diff --git a/docs/guide/demos/styles-chatitem.tsx b/docs/guide/demos/styles-chatitem.tsx new file mode 100644 index 00000000..c5de30ef --- /dev/null +++ b/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>[]>(example.initialChats); + + return ( +
+ { + setChats(chats); + }} + chatItemRenderConfig={{ + contentRender: (_, defaultContent) => { + return ( +
+ {defaultContent} +
+ ); + }, + }} + request={async (messages) => { + const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`; + return new Response(mockedData); + }} + /> +
+ ); +}; diff --git a/docs/guide/demos/styles-className.tsx b/docs/guide/demos/styles-className.tsx new file mode 100644 index 00000000..85897edb --- /dev/null +++ b/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>[]>(example.initialChats); + + const CustomClassName = cx( + css(` + .ant-pro-chat-list-item-message-content{ + background-color: rgb(51 221 19 / 24%); + } + `), + ); + + return ( +
+ { + setChats(chats); + }} + chatItemRenderConfig={{ + contentRender: (_, defaultContent) => { + return ( +
+ {defaultContent} +
+ ); + }, + }} + request={async (messages) => { + const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`; + return new Response(mockedData); + }} + /> +
+ ); +}; diff --git a/docs/guide/demos/styles-darkmode.tsx b/docs/guide/demos/styles-darkmode.tsx new file mode 100644 index 00000000..000bbcb9 --- /dev/null +++ b/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>[]>(example.initialChats); + + return ( + +
+ { + setChats(chats); + }} + request={async (messages) => { + const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`; + return new Response(mockedData); + }} + /> +
+ + ); +}; diff --git a/docs/guide/demos/styles-inputarea.tsx b/docs/guide/demos/styles-inputarea.tsx new file mode 100644 index 00000000..c05fbf81 --- /dev/null +++ b/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 ( +
+ { + const mockedData: string = `这是一段模拟的对话数据。本次会话传入了${messages.length}条消息`; + return new Response(mockedData); + }} + /> +
+ ); +}; diff --git a/docs/guide/docs.md b/docs/guide/docs.md index 25207a0d..5a945393 100644 --- a/docs/guide/docs.md +++ b/docs/guide/docs.md @@ -1,6 +1,6 @@ --- title: 文档模式和普通模式的细节 -order: 20 +order: 25 group: title: 使用案例 nav: diff --git a/docs/guide/servers-push.md b/docs/guide/servers-push.md index 29fecd15..a28e29c4 100644 --- a/docs/guide/servers-push.md +++ b/docs/guide/servers-push.md @@ -32,3 +32,5 @@ ProChat 在这种情况下很灵活，我们提供几种方法来帮助你 ### Hooks sendMessage + +> working on Progress diff --git a/docs/guide/styles.md b/docs/guide/styles.md new file mode 100644 index 00000000..93d80fbb --- /dev/null +++ b/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 来修改样式。 + +下面我改动了输入框的边框颜色和字体颜色 + + + +### 对话记录样式 + +我们有一个 chatItemRenderConfig 方法，可以让你自定义对话的所有内容，这个 api 很强大，涉及到对话内容的渲染都会走到这里，头像、内容区域、操作区域都可以进行魔改 + +下面我单独给内容区包裹了一个蓝色边框 border + + + +### 使用 ClassName 样式覆盖 + +这个是最简单最方便的样式覆盖方法，我们给很多地方添加了 ClassName，你只需要打开 devtools 就可以看到一些名称 + +> 注意：如果你发现这个 ClassName 看上去不像是一个正常的类名，说明这类用的是 Hash 的 ClassName，会动态变化，请不要覆盖这一类类名 + +下面的这个案例中我使用 antd-styles（一个 antd 的 css-in-js 企业级解决方案）来对内容区域的背景做了样式覆盖 + + + +### 主题定制 + +如果你想要全局的样式定制，例如想要利用到 antd 的自定义主题、算法能力，我们结合 antd-styles 在下面提供这样一套代码，详情的使用可见 [antd-styles](https://ant-design.github.io/antd-style/zh-CN/guide) + + diff --git a/src/ProChat/components/InputArea/AutoCompleteTextArea.tsx b/src/ProChat/components/InputArea/AutoCompleteTextArea.tsx index 71dd1eca..1213e732 100644 --- a/src/ProChat/components/InputArea/AutoCompleteTextArea.tsx +++ b/src/ProChat/components/InputArea/AutoCompleteTextArea.tsx @@ -6,6 +6,8 @@ import { useStore } from '../../store'; export const AutoCompleteTextArea: React.FC = (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 = (props) => { style={{ height: 'max-content', }} + disabled={disabled} open={open} onDropdownVisibleChange={(open) => { setOpen(open); @@ -32,6 +35,7 @@ export const AutoCompleteTextArea: React.FC = (props) => { { setOpen(false);