✨ feat: 支持 renderMessageExtra

src/ChatItem/index.tsx

@@ -1,6 +1,7 @@
 import { Alert, type AlertProps } from 'antd';
 import { Loader2 } from 'lucide-react';
 import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import Avatar from '@/Avatar';
 import EditableMessage from '@/EditableMessage';
@@ -45,6 +46,7 @@ export interface ChatItemProps {
    * @description The message content of the chat item
    */
   message?: string;
+  messageExtra?: ReactNode;
   /**
    * @description Callback when the message content changes
    * @param value - The new message content
@@ -68,6 +70,7 @@ export interface ChatItemProps {
    * @description Whether to show the title of the chat item
    */
   showTitle?: boolean;
+
   /**
    * @description The timestamp of the chat item
    */
@@ -96,6 +99,7 @@ const ChatItem = memo<ChatItemProps>(
     editing,
     onChange,
     onEditingChange,
+    messageExtra,
     ...properties
   }) => {
     const { cx, styles } = useStyles({
@@ -106,6 +110,7 @@ const ChatItem = memo<ChatItemProps>(
       title: avatar.title,
       type,
     });
+
     return (
       <div className={cx(styles.container, className)} {...properties}>
         <div className={styles.avatarContainer}>
@@ -130,14 +135,16 @@ const ChatItem = memo<ChatItemProps>(
             {alert ? (
               <Alert className={styles.alert} showIcon {...alert} />
             ) : (
-              <div className={styles.message} style={editing ? { padding: 12 } : {}}>
+              <Flexbox className={styles.message} style={editing ? { padding: 12 } : {}}>
                 <EditableMessage
                   editing={editing}
                   onChange={onChange}
                   onEditingChange={onEditingChange}
                   value={String(message || '...')}
                 />
-              </div>
+
+                {messageExtra ? <div className={styles.messageExtra}>{messageExtra}</div> : null}
+              </Flexbox>
             )}
             {!editing && (
               <div className={styles.actions} role="chat-item-actions">

src/ChatItem/style.ts

@@ -168,6 +168,7 @@ export const useStyles = createStyles(
         gap: 8px;
         align-items: ${placement === 'left' ? 'flex-start' : 'flex-end'};
       `,
+      messageExtra: cx('message-extra'),
       name: css`
         position: ${showTitle ? 'relative' : 'absolute'};
         top: ${showTitle ? 'unset' : '-16px'};

src/ChatList/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
 import ChatItem, { ChatItemProps } from '@/ChatItem';
 import type { DivProps } from '@/types';
@@ -18,6 +18,7 @@ export interface ChatListProps extends DivProps {
    * @param {string} messageId - The id of the message
    */
   onActionClick?: (actionKey: string, messageId: string) => void;
+  renderMessageExtra?: (props: ChatMessage) => ReactNode;
   /**
    * @description Whether to show name of the chat item
    * @default false
@@ -31,31 +32,44 @@ export interface ChatListProps extends DivProps {
 }
 
 const ChatList = memo<ChatListProps>(
-  ({ onActionClick, className, data, type = 'chat', showTitle, ...props }) => {
+  ({
+    onActionClick,
+    renderMessageExtra: MessageExtra,
+    className,
+    data,
+    type = 'chat',
+    showTitle,
+    ...props
+  }) => {
     const { cx, styles } = useStyles();
 
     return (
       <div className={cx(styles.container, className)} {...props}>
-        {data.map((item) => (
-          <ChatItem
-            actions={
-              <ActionsBar
-                onActionClick={
-                  onActionClick ? (actionKey) => onActionClick?.(actionKey, item.id) : undefined
-                }
-                primary={item.role === 'user'}
-              />
-            }
-            avatar={item.meta}
-            key={item.id}
-            message={item.content}
-            placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
-            primary={item.role === 'user'}
-            showTitle={showTitle}
-            time={item.updateAt || item.createAt}
-            type={type === 'chat' ? 'block' : 'pure'}
-          />
-        ))}
+        {data.map((item) => {
+          const renderMessageExtra = MessageExtra ? <MessageExtra {...item} /> : undefined;
+
+          return (
+            <ChatItem
+              actions={
+                <ActionsBar
+                  onActionClick={
+                    onActionClick ? (actionKey) => onActionClick?.(actionKey, item.id) : undefined
+                  }
+                  primary={item.role === 'user'}
+                />
+              }
+              avatar={item.meta}
+              key={item.id}
+              message={item.content}
+              messageExtra={renderMessageExtra}
+              placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
+              primary={item.role === 'user'}
+              showTitle={showTitle}
+              time={item.updateAt || item.createAt}
+              type={type === 'chat' ? 'block' : 'pure'}
+            />
+          );
+        })}
       </div>
     );
   },

src/types/chatMessage.ts

@@ -27,7 +27,6 @@ export interface ChatMessage extends BaseDataModel {
       target: string;
       to: string;
     };
-    // 语音
   } & Record<string, any>;
 
   parentId?: string;

src/types/meta.ts

@@ -19,8 +19,8 @@ export interface MetaData {
 }
 
 export interface BaseDataModel {
-  createAt?: number;
+  createAt: number;
   id: string;
   meta: MetaData;
-  updateAt?: number;
+  updateAt: number;
 }