✨ feat: assistantMeta 和 userMeta支持自定义类名 (#302)

* ✨ feat: assistantMeta 和 userMeta支持自定义类名

* ✨ feat: assistantMeta 和 userMeta支持自定义类名

src/ChatItem/components/Avatar.tsx

@@ -26,6 +26,7 @@ const Avatar = memo<AvatarProps>(
           background={avatar.backgroundColor}
           onClick={onClick}
           size={size}
+          className={avatar.className}
           title={avatar.title}
         />
         <Loading loading={loading} placement={placement} />

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 (
+    <div style={{ background: theme.colorBgLayout }}>
+      <style>
+        {`
+            .my-pro-chat-user {
+                background-color: #fff;
+            }
+            .my-pro-chat-assistant {
+                background-color: #000;
+            }
+        `}
+      </style>
+      <ProChat
+        showTitle
+        userMeta={{
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+          title: 'Ant Design',
+          className: 'my-pro-chat-user',
+        }}
+        assistantMeta={{
+          avatar: '🛸',
+          title: '自定义类名',
+          className: 'my-pro-chat-assistant',
+        }}
+        initialChats={Object.values(example.chats)}
+      />
+    </div>
+  );
+};

src/ProChat/index.en-US.md

@@ -68,6 +68,12 @@ ProChat uses `meta` to represent the avatars, names, and other information of bo
 
 <code src="./demos/meta.tsx"></code>
 
+## `assistantMeta` and `userMeta` support custom className
+
+`assistantMeta` and `userMeta` support custom class names by accepting `className`.
+
+<code src="./demos/customeClassName.tsx"></code>
+
 ## Custom Actions
 
 <code src="./demos/actions.tsx"></code>

src/ProChat/index.md

@@ -78,6 +78,12 @@ ProChat 使用 `meta` 来表意会话双方的头像、名称等信息。设定
 
 <code src="./demos/meta.tsx"></code>
 
+## assistantMeta和userMeta支持自定义className
+
+`assistantMeta` 和 `userMeta` 通过接受 `className` 来支持自定义类名。
+
+<code src="./demos/customeClassName.tsx"></code>
+
 ## 自定义 Actions
 
 <code src="./demos/actions.tsx"></code>

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: '',
+  },
+};

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,
         };
       }
     }

src/ProChat/types/meta.ts

@@ -15,6 +15,12 @@ export interface MetaData {
    */
   title?: string;
 
+  /**
+   * 附加类名
+   * @description 可选参数，如果不传则无
+   */
+  className?: string;
+
   /**
    * 附加数据
    * @description 可选参数，如果不传则使用默认名称

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;
 }
 
 /**

src/types/meta.ts

@@ -14,6 +14,11 @@ export interface MetaData {
    * @description 可选参数，如果不传则使用默认名称
    */
   title?: string;
+  /**
+   * 自定义类名
+   * @description 可选参数，如果不传则使用默认类名
+   */
+  className?: string;
 }
 
 export interface BaseDataModel {