copy button for message bubbles

Author: Dylan Huang

vite-app/src/components/MessageBubble.tsx

@@ -1,8 +1,11 @@
 import type { Message } from "../types/eval-protocol";
 import { useState } from "react";
+import Button from "./Button";
+import { Tooltip } from "./Tooltip";
 
 export const MessageBubble = ({ message }: { message: Message }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
   const isUser = message.role === "user";
   const isSystem = message.role === "system";
   const isTool = message.role === "tool";
@@ -31,10 +34,20 @@ export const MessageBubble = ({ message }: { message: Message }) => {
       ? messageContent.substring(0, 200) + "..."
       : messageContent;
 
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(messageContent);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy message:", err);
+    }
+  };
+
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-1`}>
       <div
-        className={`max-w-sm lg:max-w-md xl:max-w-lg px-2 py-1 border text-xs ${
+        className={`max-w-sm lg:max-w-md xl:max-w-lg px-2 py-1 border text-xs relative ${
           isUser
             ? "bg-blue-50 border-blue-200 text-blue-900"
             : isSystem
@@ -44,7 +57,32 @@ export const MessageBubble = ({ message }: { message: Message }) => {
             : "bg-yellow-50 border-yellow-200 text-yellow-900"
         }`}
       >
-        <div className="font-semibold text-xs mb-0.5 capitalize">
+        {/* Copy button positioned in top-right corner */}
+        <div className="absolute top-1 right-1">
+          <Tooltip
+            content={copySuccess ? "Copied!" : "Copy message to clipboard"}
+            position="top"
+          >
+            <Button
+              onClick={handleCopy}
+              size="sm"
+              variant="secondary"
+              className={`p-0.5 h-5 text-[10px] opacity-60 hover:opacity-100 transition-opacity cursor-pointer ${
+                isUser
+                  ? "text-blue-600 hover:bg-blue-100"
+                  : isSystem
+                  ? "text-gray-600 hover:bg-gray-100"
+                  : isTool
+                  ? "text-green-600 hover:bg-green-100"
+                  : "text-yellow-600 hover:bg-yellow-100"
+              }`}
+            >
+              Copy
+            </Button>
+          </Tooltip>
+        </div>
+
+        <div className="font-semibold text-xs mb-0.5 capitalize pr-8">
           {message.role}
         </div>
         <div className="whitespace-pre-wrap break-words overflow-hidden text-xs">