ui: support copy message content

pingcap · May 14, 2024 · a329a3f · a329a3f
1 parent 93d31dd
commit a329a3f
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/src/components/chat/message-operations.tsx b/src/components/chat/message-operations.tsx
@@ -1,11 +1,14 @@
 import { useMyChatContext } from '@/components/chat/context';
 import type { ConversationMessageGroupProps } from '@/components/chat/use-grouped-conversation-messages';
 import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 import copy from 'copy-to-clipboard';
-import { ClipboardIcon, RefreshCwIcon, ShareIcon, ThumbsDown } from 'lucide-react';
+import { ClipboardCheckIcon, ClipboardIcon, RefreshCwIcon, ShareIcon, ThumbsDown } from 'lucide-react';
+import { useState } from 'react';
 
 export function MessageOperations ({ group }: { group: ConversationMessageGroupProps }) {
   const { handleRegenerate } = useMyChatContext();
+  const [copied, setCopied] = useState(false);
   if (!group.finished) {
     return;
   }
@@ -27,13 +30,17 @@ export function MessageOperations ({ group }: { group: ConversationMessageGroupP
       <Button size="icon" variant="ghost" className="ml-auto rounded-full w-7 h-7">
         <ThumbsDown className="w-4 h-4" />
       </Button>
-      <Button size="icon" variant="ghost" className="rounded-full w-7 h-7">
-        <ClipboardIcon
-          className="w-4 h-4"
-          onClick={() => {
-            copy(group.assistantMessage.content);
-          }}
-        />
+      <Button
+        size="icon"
+        variant="ghost"
+        className={cn('rounded-full w-7 h-7 transition-colors', copied && '!text-green-500 hover:bg-green-500/10')}
+        onClick={() => {
+          setCopied(copy(group.assistantMessage.content));
+        }}
+      >
+        {copied
+          ? <ClipboardCheckIcon className="w-4 h-4" />
+          : <ClipboardIcon className="w-4 h-4" />}
       </Button>
     </div>
   );