📝 docs: add float mode

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",

src/BackBottom/index.md

@@ -1,5 +1,5 @@
 ---
-nav: Components
+nav: 组件
 group: Chat
 title: BackBottom
 ---

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.

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.

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.

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'.

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.

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.

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.

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>
+  );
+};

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

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.

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.