From b14dc31c3ada551dd98fb2d802bdbd399a5018e5 Mon Sep 17 00:00:00 2001 From: mannix Date: Mon, 2 Sep 2024 11:27:27 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20assistantMeta=20=E5=92=8C?= =?UTF-8?q?=20userMeta=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=B1=BB=E5=90=8D=20(#302)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :sparkles: feat: assistantMeta 和 userMeta支持自定义类名 * ✨ feat: assistantMeta 和 userMeta支持自定义类名 --- src/ChatItem/components/Avatar.tsx | 1 + src/ProChat/demos/customeClassName.tsx | 39 ++++++++++++++++++++ src/ProChat/index.en-US.md | 6 ++++ src/ProChat/index.md | 6 ++++ src/ProChat/mocks/customeClassName.ts | 49 ++++++++++++++++++++++++++ src/ProChat/store/selectors/chat.ts | 1 + src/ProChat/types/meta.ts | 6 ++++ src/components/Avatar/index.tsx | 4 +++ src/types/meta.ts | 5 +++ 9 files changed, 117 insertions(+) create mode 100644 src/ProChat/demos/customeClassName.tsx create mode 100644 src/ProChat/mocks/customeClassName.ts diff --git a/src/ChatItem/components/Avatar.tsx b/src/ChatItem/components/Avatar.tsx index 2ebca665..ad401c5e 100644 --- a/src/ChatItem/components/Avatar.tsx +++ b/src/ChatItem/components/Avatar.tsx @@ -26,6 +26,7 @@ const Avatar = memo( background={avatar.backgroundColor} onClick={onClick} size={size} + className={avatar.className} title={avatar.title} /> diff --git a/src/ProChat/demos/customeClassName.tsx b/src/ProChat/demos/customeClassName.tsx new file mode 100644 index 00000000..2853e99d --- /dev/null +++ b/src/ProChat/demos/customeClassName.tsx @@ -0,0 +1,39 @@ +/** + * compact: true + */ +import { example } from '@/ProChat/mocks/customeClassName'; +import { ProChat } from '@ant-design/pro-chat'; +import { useTheme } from 'antd-style'; + +export default () => { + const theme = useTheme(); + + return ( +
+ + +
+ ); +}; diff --git a/src/ProChat/index.en-US.md b/src/ProChat/index.en-US.md index ec7a3390..d9be303f 100644 --- a/src/ProChat/index.en-US.md +++ b/src/ProChat/index.en-US.md @@ -68,6 +68,12 @@ ProChat uses `meta` to represent the avatars, names, and other information of bo +## `assistantMeta` and `userMeta` support custom className + +`assistantMeta` and `userMeta` support custom class names by accepting `className`. + + + ## Custom Actions diff --git a/src/ProChat/index.md b/src/ProChat/index.md index b420b204..3a6c6b37 100644 --- a/src/ProChat/index.md +++ b/src/ProChat/index.md @@ -78,6 +78,12 @@ ProChat 使用 `meta` 来表意会话双方的头像、名称等信息。设定 +## assistantMeta和userMeta支持自定义className + +`assistantMeta` 和 `userMeta` 通过接受 `className` 来支持自定义类名。 + + + ## 自定义 Actions diff --git a/src/ProChat/mocks/customeClassName.ts b/src/ProChat/mocks/customeClassName.ts new file mode 100644 index 00000000..19da58a1 --- /dev/null +++ b/src/ProChat/mocks/customeClassName.ts @@ -0,0 +1,49 @@ +export const example = { + chats: [ + { + content: '我想添加自定义类名', + createAt: 1697862242452, + id: 'ZGxiX2p4', + role: 'user', + updateAt: 1697862243540, + }, + { + content: ` +如下 + +\`\`\`javascript + userMeta={{ + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', + title: 'Ant Design', + className: 'my-pro-chat-user', + }} +\`\`\` + +\`\`\`javascript +assistantMeta={{ + avatar: '🛸', + title: '自定义类名', + backgroundColor: '#67dedd', + className: 'my-pro-chat-assistant', +}} +\`\`\` + `, + 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: '', + }, +}; diff --git a/src/ProChat/store/selectors/chat.ts b/src/ProChat/store/selectors/chat.ts index e1bf1c00..d49fee72 100644 --- a/src/ProChat/store/selectors/chat.ts +++ b/src/ProChat/store/selectors/chat.ts @@ -29,6 +29,7 @@ export const currentChats = (s: ChatStore): ChatMessage[] => { avatar: assistant?.avatar, backgroundColor: assistant?.backgroundColor, title: assistant?.title, + className: assistant?.className, }; } } diff --git a/src/ProChat/types/meta.ts b/src/ProChat/types/meta.ts index 572694f9..431c344f 100644 --- a/src/ProChat/types/meta.ts +++ b/src/ProChat/types/meta.ts @@ -15,6 +15,12 @@ export interface MetaData { */ title?: string; + /** + * 附加类名 + * @description 可选参数，如果不传则无 + */ + className?: string; + /** * 附加数据 * @description 可选参数，如果不传则使用默认名称 diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index d8c65e33..a3fb6770 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -29,6 +29,10 @@ export interface AvatarProps extends AntAvatarProps { * @description The title text to display if avatar is not provided */ title?: string; + /** + * @description The custom CSS class name + */ + className?: string; } /** diff --git a/src/types/meta.ts b/src/types/meta.ts index 3a6b2408..9bb2edf3 100644 --- a/src/types/meta.ts +++ b/src/types/meta.ts @@ -14,6 +14,11 @@ export interface MetaData { * @description 可选参数，如果不传则使用默认名称 */ title?: string; + /** + * 自定义类名 + * @description 可选参数，如果不传则使用默认类名 + */ + className?: string; } export interface BaseDataModel {