diff --git a/package.json b/package.json
index 1b10cdcc..0738b6c3 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "zustand-utils": "^1.3.1"
   },
   "devDependencies": {
+    "@ant-design/pro-editor": "latest",
     "@commitlint/cli": "^17",
     "@lobehub/ui": "^1",
     "@testing-library/react": "^14",
diff --git a/src/ActionIcon/demos/CustomSize.tsx b/src/ActionIcon/demos/CustomSize.tsx
deleted file mode 100644
index a2db7d94..00000000
--- a/src/ActionIcon/demos/CustomSize.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ActionIcon, ActionIconProps } from '@ant-design/pro-chat';
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import { Settings } from 'lucide-react';
-
-export default () => {
-  const store = useCreateStore();
-  const size: ActionIconProps['size'] | any = useControls(
-    {
-      blockSize: {
-        max: 100,
-        min: 8,
-        step: 4,
-        value: 40,
-      },
-      borderRadius: {
-        max: 50,
-        min: 2,
-        step: 2,
-        value: 10,
-      },
-      fontSize: {
-        max: 100,
-        min: 8,
-        step: 4,
-        value: 28,
-      },
-      strokeWidth: {
-        max: 2,
-        min: 1,
-        step: 0.5,
-        value: 2,
-      },
-    },
-    { store },
-  );
-
-  return (
-    <StoryBook levaStore={store}>
-      <ActionIcon active icon={Settings} size={size} />
-    </StoryBook>
-  );
-};
diff --git a/src/ActionIcon/demos/index.tsx b/src/ActionIcon/demos/index.tsx
deleted file mode 100644
index 9df7e395..00000000
--- a/src/ActionIcon/demos/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { ActionIcon, ActionIconProps } from '@ant-design/pro-chat';
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import { folder } from 'leva';
-import * as LucideIcon from 'lucide-react';
-
-export default () => {
-  const store = useCreateStore();
-  const control: ActionIconProps | any = useControls(
-    {
-      active: false,
-      glass: false,
-      icon: {
-        options: LucideIcon,
-        value: LucideIcon.Settings,
-      },
-      size: {
-        options: ['large', 'normal', 'small'],
-        value: 'large',
-      },
-      tooltip: folder({
-        arrow: false,
-        loading: false,
-        placement: {
-          options: [
-            'top',
-            'left',
-            'right',
-            'bottom',
-            'topLeft',
-            'topRight',
-            'bottomLeft',
-            'bottomRight',
-            'leftTop',
-            'leftBottom',
-            'rightTop',
-            'rightBottom',
-          ],
-          value: 'top',
-        },
-        spotlight: false,
-        title: '',
-      }),
-    },
-    { store },
-  );
-
-  return (
-    <StoryBook levaStore={store}>
-      <ActionIcon {...control} />
-    </StoryBook>
-  );
-};
diff --git a/src/ActionIcon/index.md b/src/ActionIcon/index.md
deleted file mode 100644
index b2e12e53..00000000
--- a/src/ActionIcon/index.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-nav: Components
-group:
-  title: General
-  order: -1
-title: ActionIcon
-description: ActionIcon is a component used to render an icon with a block around it
----
-
-## Default
-
-Search icons in [`Lucide Icon`](https://lucide.dev/)
-
-<code src="./demos/index.tsx" nopadding></code>
-
-## CustomSize
-
-<code src="./demos/CustomSize.tsx" nopadding></code>
-
-## APIs
-
-<API></API>
diff --git a/src/ActionIconGroup/demos/data.tsx b/src/ActionIconGroup/demos/data.tsx
deleted file mode 100644
index 611d3b23..00000000
--- a/src/ActionIconGroup/demos/data.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { type ActionIconGroupProps } from '@ant-design/pro-chat';
-import { Copy, RotateCw, Trash } from 'lucide-react';
-
-export const items: ActionIconGroupProps['items'] = [
-  {
-    icon: Copy,
-    key: 'copy',
-    label: 'Copy',
-  },
-  {
-    icon: RotateCw,
-    key: 'regenerate',
-    label: 'Regenerate',
-  },
-];
-
-export const dropdownMenu: ActionIconGroupProps['dropdownMenu'] = [
-  {
-    icon: Copy,
-    key: 'copy',
-    label: 'Copy',
-  },
-  {
-    icon: RotateCw,
-    key: 'regenerate',
-    label: 'Regenerate',
-  },
-  {
-    type: 'divider',
-  },
-  {
-    icon: Trash,
-    key: 'delete',
-    label: 'Delete',
-  },
-];
diff --git a/src/ActionIconGroup/demos/index.tsx b/src/ActionIconGroup/demos/index.tsx
deleted file mode 100644
index 9c9ff582..00000000
--- a/src/ActionIconGroup/demos/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ActionIconGroup, ActionIconGroupProps } from '@ant-design/pro-chat';
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-
-import { dropdownMenu, items } from './data';
-
-export default () => {
-  const store = useCreateStore();
-  const control: ActionIconGroupProps | any = useControls(
-    {
-      direction: {
-        options: ['row', 'column'],
-        value: 'row',
-      },
-      spotlight: true,
-      type: {
-        options: ['ghost', 'block', 'pure'],
-        value: 'block',
-      },
-    },
-    { store },
-  );
-
-  return (
-    <StoryBook levaStore={store}>
-      <ActionIconGroup
-        dropdownMenu={dropdownMenu}
-        items={items}
-        onActionClick={(key) => console.log(key)}
-        {...control}
-      />
-    </StoryBook>
-  );
-};
diff --git a/src/ActionIconGroup/index.md b/src/ActionIconGroup/index.md
deleted file mode 100644
index a6dca35e..00000000
--- a/src/ActionIconGroup/index.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-nav: Components
-group: General
-title: ActionIconGroup
-description: ActionIconGroup is a component used to render multi buttons
----
-
-## Default
-
-<code src="./demos/index.tsx" nopadding></code>
-
-## APIs
-
-<API></API>
diff --git a/src/BackBottom/index.md b/src/BackBottom/index.md
index 99722b3e..678b1cf6 100644
--- a/src/BackBottom/index.md
+++ b/src/BackBottom/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Chat
 title: BackBottom
 ---
diff --git a/src/ChatItem/index.md b/src/ChatItem/index.md
index 3db5886e..3045dce3 100644
--- a/src/ChatItem/index.md
+++ b/src/ChatItem/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Chat
 title: ChatItem
 description: ChatItem is a React component that represents a single item in a chat conversation. It displays the user's avatar, name, and message. It can also display a loading indicator if the message is still being sent.
diff --git a/src/EditableMessage/index.md b/src/EditableMessage/index.md
index 0c59d0ec..41d196a0 100644
--- a/src/EditableMessage/index.md
+++ b/src/EditableMessage/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Message
 title: EditableMessage
 description: The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message.
diff --git a/src/EditableMessageList/index.md b/src/EditableMessageList/index.md
index 88018b7d..e0706d09 100644
--- a/src/EditableMessageList/index.md
+++ b/src/EditableMessageList/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Message
 title: EditableMessageList
 description: EditableMessageList is a React component that allows users to edit a list of chat messages, including their content and role. It is designed to be used in chatbot building applications.
diff --git a/src/Highlighter/index.md b/src/Highlighter/index.md
index 5e6ad259..c31ab701 100644
--- a/src/Highlighter/index.md
+++ b/src/Highlighter/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Content
 title: Highlighter
 description: The Highlighter component is used to display syntax-highlighted code blocks. It takes in the code content as a string and the language of the code as a string. The component allows users to copy the code content and can also display the language tag. The code block can have a background and the theme can be set to either 'dark' or 'light'.
diff --git a/src/Markdown/index.md b/src/Markdown/index.md
index 15152e30..56511a70 100644
--- a/src/Markdown/index.md
+++ b/src/Markdown/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Content
 title: Markdown
 description: Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications.
diff --git a/src/MessageInput/index.md b/src/MessageInput/index.md
index da29316c..b9bf04ca 100644
--- a/src/MessageInput/index.md
+++ b/src/MessageInput/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Message
 title: MessageInput
 description: CopyButton is a React component used to copy text content to the clipboard. It provides a button with a copy icon that, when clicked, copies the specified content to the user's clipboard. It also displays a tooltip indicating whether the copy action was successful or not.
diff --git a/src/MessageModal/index.md b/src/MessageModal/index.md
index a44cab62..73eb8e12 100644
--- a/src/MessageModal/index.md
+++ b/src/MessageModal/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Message
 title: MessageModal
 description: The MessageModal component is a modal window that can display either a message in Markdown format or a message input field for editing the message.
diff --git a/src/ProChat/demos/draggable.tsx b/src/ProChat/demos/draggable.tsx
new file mode 100644
index 00000000..290c0d20
--- /dev/null
+++ b/src/ProChat/demos/draggable.tsx
@@ -0,0 +1,36 @@
+/**
+ * iframe: 500
+ * title: 作为侧边栏使用
+ */
+import { MockResponse } from '@/ProChat/mocks/streamResponse';
+import { ProChat } from '@ant-design/pro-chat';
+import { DraggablePanel } from '@ant-design/pro-editor';
+import { useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const theme = useTheme();
+
+  return (
+    <DraggablePanel
+      mode={'float'}
+      defaultPosition={{ x: 400, y: 30 }}
+      minHeight={400}
+      style={{ background: theme.colorBgLayout }}
+    >
+      <Flexbox align={'center'} style={{ fontSize: 12 }}>
+        客服助理
+      </Flexbox>
+      <ProChat
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
+
+          const mockResponse = new MockResponse(mockedData);
+
+          return mockResponse.getResponse();
+        }}
+        style={{ height: '100vh' }}
+      />
+    </DraggablePanel>
+  );
+};
diff --git a/src/ProChat/index.md b/src/ProChat/index.md
index 04add173..8018495b 100644
--- a/src/ProChat/index.md
+++ b/src/ProChat/index.md
@@ -1,7 +1,8 @@
 ---
-nav: Components
+nav: 组件
 group: Chat
 title: ProChat
+order: 0
 description: a Chat Solution
 ---
 
@@ -63,10 +64,12 @@ ProChat使用 `meta` 来表意会话双方的头像、名称等信息。设定
 
 <code src="./demos/meta.tsx"></code>
 
-## 🚧 悬浮窗使用
+## 悬浮窗使用
 
 将 `ProChat` 组件作为会话解决方案
 
+<code src="./demos/draggable.tsx"></code>
+
 ## 🚧 程序化控制消息发送
 
 ## APIs
diff --git a/src/Snippet/index.md b/src/Snippet/index.md
index 1dcd1c7e..ecd2f49a 100644
--- a/src/Snippet/index.md
+++ b/src/Snippet/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Content
 title: Snippet
 description: The Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol before the content and a language for syntax highlighting. The component is also copyable with a CopyButton included by default.
diff --git a/src/TokenTag/index.md b/src/TokenTag/index.md
index 06a73ad3..12383abe 100644
--- a/src/TokenTag/index.md
+++ b/src/TokenTag/index.md
@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Chat
 title: TokenTag
 description: The TokenTag component is used to display a token tag with a FluentEmoji icon and a text indicating the remaining tokens.