feat: add message copy btn

InternLM · Apr 9, 2024 · 006e55b · 006e55b
1 parent 4f84bd6
commit 006e55b
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/openaoe/frontend/src/pages/chat/components/chat/chat.tsx b/openaoe/frontend/src/pages/chat/components/chat/chat.tsx
@@ -79,6 +79,8 @@ const RunningMario = () => {
 function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: number, name: string, bot: string} }) {
     const { models } = useContext(GlobalConfigContext);
     const [showDate, setShowDate] = useState(false);
+    const [showCopy, setShowCopy] = React.useState(false);
+
     const { message } = props;
     const isUser = message.sender_type === 'user' || message.provider === 'user';
     const isAdmin = message.sender_type === 'admin' || message.provider === 'admin';
@@ -89,6 +91,10 @@ function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: numbe
     );
     const configStore = useConfigStore();
 
+    const handleCopyMsg = () => {
+        copyToClipboard(message.text);
+    };
+
     const getModel = () => {
         if (isUser) {
             return USER_INFO;
@@ -131,7 +137,16 @@ function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: numbe
                         title={message.model || configStore.username}
                         className={className}
                         style={{ borderRadius: !isUser ? '1px 10px 10px 10px' : '10px 1px 10px 10px' }}
+                        onMouseOver={() => setShowCopy(true)}
+                        onFocus={() => setShowCopy(true)}
+                        onMouseLeave={() => setShowCopy(false)}
                     >
+                        {showCopy && (
+                            <span
+                                className={styles.copyCodeBtn}
+                                {...getNeedEventCallback(handleCopyMsg)}
+                            />
+                        )}
                         {message.stream && <RunningMario />}
                         {!isUser && (
                             <div className={styles.chatOperations}>
@@ -206,7 +221,6 @@ function ChatSession(props: { session: ChatSessionProps }) {
                     );
                 })}
             </div>
-            {/* <ChatOperation modelName={session.name} /> */}
         </div>
     );
 }