📝 feat: add custom styles doc

docs/guide/demos/styles-chatitem.tsx

@@ -0,0 +1,41 @@
+/**
+ * compact: true
+ */
+import { ChatMessage, ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+import { useState } from 'react';
+import { example } from './mocks/fullFeature';
+
+export default () => {
+  const theme = useTheme();
+  const [chats, setChats] = useState<ChatMessage<Record<string, any>>[]>(example.initialChats);
+
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        chats={chats}
+        onChatsChange={(chats) => {
+          setChats(chats);
+        }}
+        chatItemRenderConfig={{
+          contentRender: (_, defaultContent) => {
+            return (
+              <div
+                style={{
+                  border: '1px solid #1890ff',
+                  borderRadius: '8px',
+                }}
+              >
+                {defaultContent}
+              </div>
+            );
+          },
+        }}
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
+          return new Response(mockedData);
+        }}
+      />
+    </div>
+  );
+};

docs/guide/demos/styles-className.tsx

@@ -0,0 +1,49 @@
+/**
+ * compact: true
+ */
+import { ChatMessage, ProChat } from '@ant-design/pro-chat';
+import { css, cx, useTheme } from 'antd-style';
+import { useState } from 'react';
+import { example } from './mocks/fullFeature';
+
+export default () => {
+  const theme = useTheme();
+  const [chats, setChats] = useState<ChatMessage<Record<string, any>>[]>(example.initialChats);
+
+  const CustomClassName = cx(
+    css(`
+      .ant-pro-chat-list-item-message-content{
+        background-color: rgb(51 221 19 / 24%);
+      }
+  `),
+  );
+
+  return (
+    <div style={{ background: theme.colorBgLayout }} className={CustomClassName}>
+      <ProChat
+        chats={chats}
+        onChatsChange={(chats) => {
+          setChats(chats);
+        }}
+        chatItemRenderConfig={{
+          contentRender: (_, defaultContent) => {
+            return (
+              <div
+                style={{
+                  border: '1px solid #1890ff',
+                  borderRadius: '8px',
+                }}
+              >
+                {defaultContent}
+              </div>
+            );
+          },
+        }}
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
+          return new Response(mockedData);
+        }}
+      />
+    </div>
+  );
+};

docs/guide/demos/styles-darkmode.tsx

@@ -0,0 +1,39 @@
+/**
+ * compact: true
+ */
+import { ChatMessage, ProChat } from '@ant-design/pro-chat';
+import { theme } from 'antd';
+import { ThemeProvider } from 'antd-style';
+import { useState } from 'react';
+import { example } from './mocks/fullFeature';
+
+export default () => {
+  const [chats, setChats] = useState<ChatMessage<Record<string, any>>[]>(example.initialChats);
+
+  return (
+    <ThemeProvider
+      appearance="dark"
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        token: {
+          colorPrimary: '#ED4192',
+          colorText: '#1890ff',
+          borderRadius: 20,
+        },
+      }}
+    >
+      <div style={{ background: '#000' }}>
+        <ProChat
+          chats={chats}
+          onChatsChange={(chats) => {
+            setChats(chats);
+          }}
+          request={async (messages) => {
+            const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
+            return new Response(mockedData);
+          }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};

docs/guide/demos/styles-inputarea.tsx

@@ -0,0 +1,30 @@
+/**
+ * compact: true
+ */
+import { ProChat } from '@ant-design/pro-chat';
+
+import { useTheme } from 'antd-style';
+
+export default () => {
+  const theme = useTheme();
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        helloMessage={
+          '欢迎使用 ProChat ，我是你的专属机器人，这是我们的 Github：[ProChat](https://github.com/ant-design/pro-chat)'
+        }
+        inputAreaProps={{
+          style: {
+            border: '1px solid #1890ff',
+            color: 'rgb(38,64,15)',
+            fontWeight: 800,
+          },
+        }}
+        request={async (messages) => {
+          const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`;
+          return new Response(mockedData);
+        }}
+      />
+    </div>
+  );
+};

docs/guide/docs.md

@@ -1,6 +1,6 @@
 ---
 title: 文档模式和普通模式的细节
-order: 20
+order: 25
 group:
   title: 使用案例
 nav:

docs/guide/servers-push.md

@@ -32,3 +32,5 @@ ProChat 在这种情况下很灵活，我们提供几种方法来帮助你
 <code src="./demos/controled-servers-push.tsx" ></code>
 
 ### Hooks sendMessage
+
+> working on Progress

docs/guide/styles.md

@@ -0,0 +1,47 @@
+---
+title: 自定义样式
+order: 20
+group:
+  title: 使用案例
+nav:
+  title: 文档
+  order: 0
+---
+
+## 自定义样式
+
+整体对于 ProChat 来说，因为使用了 AntDesign 组件和设计，风格上是保持统一的
+
+同时我们也支持不同程度的自定义样式
+
+### 输入框区域样式
+
+inputAreaProps 允许你给输入框透传 Props（即 antd Input.Area 支持的 Props），里面可以穿入 ClassName 或 Style 来修改样式。
+
+下面我改动了输入框的边框颜色和字体颜色
+
+<code src="./demos/styles-inputarea.tsx" ></code>
+
+### 对话记录样式
+
+我们有一个 chatItemRenderConfig 方法，可以让你自定义对话的所有内容，这个 api 很强大，涉及到对话内容的渲染都会走到这里，头像、内容区域、操作区域都可以进行魔改
+
+下面我单独给内容区包裹了一个蓝色边框 border
+
+<code src="./demos/styles-chatitem.tsx" ></code>
+
+### 使用 ClassName 样式覆盖
+
+这个是最简单最方便的样式覆盖方法，我们给很多地方添加了 ClassName，你只需要打开 devtools 就可以看到一些名称
+
+> 注意：如果你发现这个 ClassName 看上去不像是一个正常的类名，说明这类用的是 Hash 的 ClassName，会动态变化，请不要覆盖这一类类名
+
+下面的这个案例中我使用 antd-styles（一个 antd 的 css-in-js 企业级解决方案）来对内容区域的背景做了样式覆盖
+
+<code src="./demos/styles-className.tsx" ></code>
+
+### 主题定制
+
+如果你想要全局的样式定制，例如想要利用到 antd 的自定义主题、算法能力，我们结合 antd-styles 在下面提供这样一套代码，详情的使用可见 [antd-styles](https://ant-design.github.io/antd-style/zh-CN/guide)
+
+<code src="./demos/styles-darkmode.tsx" ></code>

src/ProChat/components/InputArea/AutoCompleteTextArea.tsx

@@ -6,6 +6,8 @@ import { useStore } from '../../store';
 export const AutoCompleteTextArea: React.FC<TextAreaProps> = (props) => {
   const [autocompleteRequest] = useStore((s) => [s.autocompleteRequest]);
 
+  const { disabled } = props;
+
   const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
   const [open, setOpen] = useState(false);
   return (
@@ -15,6 +17,7 @@ export const AutoCompleteTextArea: React.FC<TextAreaProps> = (props) => {
       style={{
         height: 'max-content',
       }}
+      disabled={disabled}
       open={open}
       onDropdownVisibleChange={(open) => {
         setOpen(open);
@@ -32,6 +35,7 @@ export const AutoCompleteTextArea: React.FC<TextAreaProps> = (props) => {
       <Input.TextArea
         size="large"
         {...props}
+        disabled={disabled}
         className={`${props.className}-textarea`}
         onFocus={(e) => {
           setOpen(false);