0.4

src/pages/chat/MessageItem/index.tsx

@@ -1,6 +1,7 @@
-import { cn } from '@heroui/react';
-import { type Message as BaseMessage } from '@mujian/js-sdk/react';
+import { addToast, cn } from '@heroui/react';
+import { type Message as BaseMessage, useMujian } from '@mujian/js-sdk/react';
 import React, { type MouseEventHandler } from 'react';
+import { mjChatCls } from '@/utils/cls';
 import { EditActions } from './components/EditActions';
 import { MessageActions } from './components/MessageActions';
 import { MessageBubble } from './components/MessageBubble';
@@ -89,6 +90,7 @@ export const MessageItem = React.memo((props: MessageItemProps) => {
   const messageRef = React.useRef<HTMLDivElement>(null); // 使用 useRef 获取当前组件的引用
   const [isEditing, setIsEditing] = React.useState(false); // State to toggle edit mode
   const [editedMessage, setEditedMessage] = React.useState(content);
+  const mujian = useMujian();
 
   const renderedMessage = isUser ? content : swipes[activeSwipeId];
 
@@ -114,6 +116,22 @@ export const MessageItem = React.memo((props: MessageItemProps) => {
     }
   };
 
+  const handleCopy = async () => {
+    try {
+      await mujian.utils.clipboard.writeText(originalMessage.content);
+      addToast({
+        color: 'success',
+        description: '复制成功',
+        timeout: 1500,
+      });
+    } catch (error) {
+      console.error(error);
+      addToast({
+        description: '复制失败，请重试。',
+      });
+    }
+  };
+
   // Separate function to handle message deletion
   const handleDeleteMessage = async () => {
     if (id) {
@@ -157,14 +175,15 @@ export const MessageItem = React.memo((props: MessageItemProps) => {
     <div
       key={`message-${activeSwipeId}`}
       ref={messageRef} // 将 ref 绑定到根容器
-      className={cn(
-        'grid items-end gap-2 mb-2 w-full grid-cols-[32px_1fr_32px]',
+      className={mjChatCls(
+        ['msg-item-wrapper'],
+        cn('grid items-end gap-2 mb-2 w-full grid-cols-[32px_1fr_32px]'),
       )}
       onContextMenu={(event) => {
         // 按ctrl点击时打印ID
         if (event.ctrlKey) {
           event.preventDefault();
-          console.log('Message ID:', id);
+          console.log('Official Chat Message ID:', id);
         }
       }}
     >
@@ -174,6 +193,7 @@ export const MessageItem = React.memo((props: MessageItemProps) => {
         isEditing={isEditing}
         editedMessage={editedMessage}
         onEditChange={setEditedMessage}
+        onCopyClick={handleCopy}
         isStreaming={isStreaming}
         currentMessage={renderedMessage}
         onEditButtonClick={handleEditButtonClick}
@@ -206,6 +226,7 @@ export const MessageItem = React.memo((props: MessageItemProps) => {
         onRegenerate={onRegenerate}
         onContinue={onContinue}
         onEditButtonClick={handleEditButtonClick}
+        onCopyClick={handleCopy}
         onSwipe={handleSwipe}
         onMessageTextClick={handleMessageTextClick}
         onDelete={handleDeleteMessage}