📝 docs: update documents

src/ProChat/demos/control.tsx

@@ -0,0 +1,35 @@
+/**
+ * compact: true
+ */
+import { ChatMessageMap, ProChat } from '@ant-design/pro-chat';
+
+import { useTheme } from 'antd-style';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MockResponse } from '../mocks/streamResponse';
+
+export default () => {
+  const theme = useTheme();
+
+  const [chats, setChats] = useState<ChatMessageMap>();
+
+  return (
+    <Flexbox style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        chats={chats}
+        onChatsChange={(chats) => {
+          console.log(chats);
+          setChats(chats);
+        }}
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
+
+          const mockResponse = new MockResponse(mockedData, 100);
+
+          return mockResponse.getResponse();
+        }}
+      />
+    </Flexbox>
+  );
+};

src/ProChat/demos/doc-mode.tsx

@@ -0,0 +1,29 @@
+/**
+ * iframe: 800
+ */
+import { ProChat } from '@ant-design/pro-chat';
+
+import { MockResponse } from '@/ProChat/mocks/streamResponse';
+import { useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+import { example } from '../mocks/fullFeature';
+
+export default () => {
+  const theme = useTheme();
+  return (
+    <Flexbox style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        displayMode={'docs'}
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的流式字符串数据。本次会话传入了${messages.length}条消息`;
+
+          const mockResponse = new MockResponse(mockedData, 100);
+
+          return mockResponse.getResponse();
+        }}
+        chats={example.chats}
+        config={example.config}
+      />
+    </Flexbox>
+  );
+};

src/ProChat/index.md

@@ -15,35 +15,47 @@ description: a Chat Solution
 interface Params {}
 ```
 
-<code src="./demos/default.tsx" center></code>
+<code src="./demos/default.tsx"></code>
 
 ### 自定义 request 请求
 
-<code src="./demos/request.tsx" center></code>
+<code src="./demos/request.tsx"></code>
+
+## 受控模式
+
+使用 `chats` 和 `onChatsChange` 实现 chats 会话消息的受控
+
+<code src="./demos/control.tsx"></code>
 
 ## 设定初始会话消息
 
 使用 `initialChats` 设定初始会话消息。
 
-<code src="./demos/initialChats.tsx" center></code>
+<code src="./demos/initialChats.tsx"></code>
 
 ## 设定打招呼消息
 
 通过 `helloMessage` 设定打招呼消息。
 
-<code src="./demos/helloMessage.tsx" center></code>
+<code src="./demos/helloMessage.tsx"></code>
 
 ## 加载中
 
 使用 loading 字段控制加载中状态。适用于第一次加载数据时使用。
 
-<code src="./demos/loading.tsx" center></code>
+<code src="./demos/loading.tsx"></code>
+
+## 文档模式
+
+类 OpenAI 的文档模式，使用 `doc` 字段控制文档模式。适用于需要展示文档的场景。
+
+<code src="./demos/doc-mode.tsx"></code>
 
 ## 指定会话双方的头像、名称
 
 ProChat使用 `meta` 来表意会话双方的头像、名称等信息。设定助手的头像、名称使用 `assistantMeta`，设定用户的头像、名称使用 `userMeta`。 使用 `showTitle` 显示名称。
 
-<code src="./demos/meta.tsx" center></code>
+<code src="./demos/meta.tsx"></code>
 
 ## 🚧 悬浮窗使用
 

src/ProChat/mocks/fullFeature.ts

@@ -0,0 +1,118 @@
+export const example = {
+  chats: {
+    ZGxiX2p4: {
+      content: '请展示完整的会话高亮效果？',
+      createAt: 1697862242452,
+      id: 'ZGxiX2p4',
+      role: 'user',
+      updateAt: 1697862243540,
+    },
+    Sb5pAzLL: {
+      content: `
+# This is an H1
+## This is an H2
+### This is an H3
+#### This is an H4
+##### This is an H5
+
+The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.
+
+---
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+>
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+
+---
+
+an example | *an example* | **an example**
+
+---
+
+1. Bird
+1. McHale
+1. Parish
+    1. Bird
+    1. McHale
+        1. Parish
+
+---
+
+- Red
+- Green
+- Blue
+    - Red
+    - Green
+        - Blue
+
+---
+
+This is [an example](http://example.com/ "Title") inline link.
+
+<http://example.com/>
+
+
+| title | title | title |
+| --- | --- | --- |
+| content | content | content |
+
+
+\`\`\`bash
+$ pnpm install
+\`\`\`
+
+
+\`\`\`javascript
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
+\`\`\`
+
+---
+
+以下是一段Markdown格式的LaTeX数学公式：
+
+我是一个行内公式：$E=mc^2$
+
+我是一个独立公式：
+$$
+\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n
+$$
+
+我是一个带有分式的公式：
+$$
+\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k}
+$$
+
+我是一个带有上下标的公式：
+$$
+x^{2} + y^{2} = r^{2}
+$$
+
+我是一个带有积分符号的公式：
+$$
+\\int_{a}^{b} f(x) \\, dx
+$$
+`,
+      createAt: 1697862247302,
+      id: 'Sb5pAzLL',
+      parentId: 'ZGxiX2p4',
+      role: 'assistant',
+      updateAt: 1697862249387,
+      model: 'gpt-3.5-turbo',
+    },
+  },
+  config: {
+    model: 'gpt-3.5-turbo',
+    params: {
+      frequency_penalty: 0,
+      presence_penalty: 0,
+      temperature: 0.6,
+      top_p: 1,
+    },
+    systemRole: '',
+  },
+};