fix copy button logic

tenstorrent · Feb 24, 2025 · 1b6ade1 · 1b6ade1
1 parent 69b6130
commit 1b6ade1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -298,6 +298,7 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                       isReRendering={reRenderingMessageId === message.id}
                       isStreaming={isStreaming}
                       inferenceStats={message.inferenceStats}
+                      messageContent={message.text}
                     />
                   )}
                   {message.ragDatasource && (

diff --git a/app/frontend/src/components/chatui/MessageActions.tsx b/app/frontend/src/components/chatui/MessageActions.tsx
@@ -1,11 +1,13 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React from "react";
+
+import type React from "react";
+import { useState, useEffect } from "react";
 import { Button } from "../ui/button";
 import { Clipboard, ThumbsUp, ThumbsDown } from "lucide-react";
 import CustomToaster, { customToast } from "../CustomToaster";
 import InferenceStats from "./InferenceStats";
-import { InferenceStats as InferenceStatsType } from "./types";
+import type { InferenceStats as InferenceStatsType } from "./types";
 
 interface MessageActionsProps {
   messageId: string;
@@ -14,6 +16,7 @@ interface MessageActionsProps {
   isReRendering: boolean;
   isStreaming: boolean;
   inferenceStats?: InferenceStatsType;
+  messageContent?: string;
 }
 
 const MessageActions: React.FC<MessageActionsProps> = ({
@@ -23,10 +26,29 @@ const MessageActions: React.FC<MessageActionsProps> = ({
   isReRendering,
   isStreaming,
   inferenceStats,
+  messageContent,
 }) => {
-  const handleCopy = () => {
-    // Implement copy logic here
-    customToast.success("Message copied to clipboard");
+  const [completeMessage, setCompleteMessage] = useState<string>(
+    messageContent || ""
+  );
+
+  // Update the complete message when streaming finishes
+  useEffect(() => {
+    if (!isStreaming && messageContent) {
+      setCompleteMessage(messageContent);
+    }
+  }, [isStreaming, messageContent]);
+
+  const handleCopy = async () => {
+    try {
+      if (completeMessage) {
+        await navigator.clipboard.writeText(completeMessage);
+        customToast.success("Message copied to clipboard");
+      }
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+      customToast.error("Failed to copy message");
+    }
   };
 
   const handleThumbsUp = () => {
@@ -49,6 +71,7 @@ const MessageActions: React.FC<MessageActionsProps> = ({
             size="icon"
             onClick={handleCopy}
             className="h-8 w-8 p-0"
+            disabled={isStreaming}
           >
             <Clipboard className="h-4 w-4" />
             <span className="sr-only">Copy message</span>