feat: add CopyButton component and integrate copy functionality into messages

- Introduced a new CopyButton component for copying text to the clipboard.
- Implemented a custom hook, useCopy, to manage clipboard interactions and state.
- Integrated the CopyButton into the message component, allowing users to copy assistant messages easily.
- Enhanced message display logic to conditionally show the copy button based on message role and status.

app/api/chat/route.ts

@@ -56,7 +56,7 @@ export async function POST(req: Request) {
 
   // Check if chat already exists for the given ID
   // If not, we'll create it in onFinish
-  var isNewChat = false;
+  let isNewChat = false;
   if (chatId) {
     try {
       const existingChat = await db.query.chats.findFirst({

components/copy-button.tsx

@@ -0,0 +1,38 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useCopy } from "@/lib/hooks/use-copy";
+import { Button } from "./ui/button";
+
+interface CopyButtonProps {
+  text: string;
+  className?: string;
+}
+
+export function CopyButton({ text, className }: CopyButtonProps) {
+  const { copied, copy } = useCopy();
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn(
+        "transition-opacity opacity-0 group-hover/message:opacity-100 gap-1.5",
+        className
+      )}
+      onClick={() => copy(text)}
+      title="Copy to clipboard"
+    >
+      {copied ? (
+        <>
+          <CheckIcon className="h-4 w-4" />
+          <span className="text-xs">Copied!</span>
+        </>
+      ) : (
+        <>
+          <CopyIcon className="h-4 w-4" />
+          <span className="text-xs">Copy</span>
+        </>
+      )}
+    </Button>
+  );
+} 

components/message.tsx

@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 import { ChevronDownIcon, ChevronUpIcon, LightbulbIcon } from "lucide-react";
 import { SpinnerIcon } from "./icons";
 import { ToolInvocation } from "./tool-invocation";
+import { CopyButton } from "./copy-button";
 
 interface ReasoningPart {
   type: "reasoning";
@@ -102,6 +103,18 @@ const PurePreviewMessage = ({
   status: "error" | "submitted" | "streaming" | "ready";
   isLatestMessage: boolean;
 }) => {
+  // Create a string with all text parts for copy functionality
+  const getMessageText = () => {
+    if (!message.parts) return "";
+    return message.parts
+      .filter(part => part.type === "text")
+      .map(part => (part.type === "text" ? part.text : ""))
+      .join("\n\n");
+  };
+
+  // Only show copy button if the message is from the assistant and not currently streaming
+  const shouldShowCopyButton = message.role === "assistant" && (!isLatestMessage || status !== "streaming");
+
   return (
     <AnimatePresence key={message.id}>
       <motion.div
@@ -174,6 +187,11 @@ const PurePreviewMessage = ({
                   return null;
               }
             })}
+            {shouldShowCopyButton && (
+              <div className="flex justify-start mt-2">
+                <CopyButton text={getMessageText()} />
+              </div>
+            )}
           </div>
         </div>
       </motion.div>

lib/hooks/use-copy.ts

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+
+export function useCopy(timeout = 2000) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(
+    async (text: string) => {
+      if (!navigator.clipboard) {
+        console.error('Clipboard API not available');
+        return false;
+      }
+      
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        
+        setTimeout(() => {
+          setCopied(false);
+        }, timeout);
+        
+        return true;
+      } catch (error) {
+        console.error('Failed to copy text:', error);
+        return false;
+      }
+    },
+    [timeout]
+  );
+
+  return { copied, copy };
+}