feat: add copy button to user messages in chat sidebar (#21)

* Initial plan

* Initial plan for adding copy button to user messages

Co-authored-by: huminglong <63436986+huminglong@users.noreply.github.com>

* Add copy button to user messages in chat sidebar

Co-authored-by: huminglong <63436986+huminglong@users.noreply.github.com>

* Refactor: extract userMessageText to avoid duplicate function calls

Co-authored-by: huminglong <63436986+huminglong@users.noreply.github.com>

* feat(ui): 增加消息复制功能支持非 HTTPS 环境

优化复制消息到剪贴板的逻辑，增加对非 HTTPS 环境的降级处理，提升用户体验。

* fix(package): 添加 peer 属性以支持依赖关系

* chore(.gitignore): 添加 next 和 next-ai-draw-io@0.2.0 相关条目

* fix: improve copy button implementation

- Fix copy button alignment (place left of user message)
- Remove unused React import
- Move getMessageTextContent outside component
- Add error state with X icon for copy failures
- Translate Chinese comments to English
- Simplify copy function
- Add missing semicolon
- Remove accidental .gitignore entries

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}

components/chat-message-display.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import type React from "react";
 import { useRef, useEffect, useState, useCallback } from "react";
 import Image from "next/image";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import ExamplePanel from "./chat-example-panel";
 import { UIMessage } from "ai";
 import { convertToLegalXml, replaceNodes } from "@/lib/utils";
+import { Copy, Check, X } from "lucide-react";
 
 import { useDiagram } from "@/contexts/diagram-context";
 
+const getMessageTextContent = (message: UIMessage): string => {
+    if (!message.parts) return "";
+    return message.parts
+        .filter((part: any) => part.type === "text")
+        .map((part: any) => part.text)
+        .join("\n");
+};
+
 interface ChatMessageDisplayProps {
     messages: UIMessage[];
     error?: Error | null;
@@ -30,6 +38,21 @@ export function ChatMessageDisplay({
     const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
         {}
     );
+    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
+    const [copyFailedMessageId, setCopyFailedMessageId] = useState<string | null>(null);
+
+    const copyMessageToClipboard = async (messageId: string, text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedMessageId(messageId);
+            setTimeout(() => setCopiedMessageId(null), 2000);
+        } catch (err) {
+            console.error("Failed to copy message:", err);
+            setCopyFailedMessageId(messageId);
+            setTimeout(() => setCopyFailedMessageId(null), 2000);
+        }
+    };
+
     const handleDisplayChart = useCallback(
         (xml: string) => {
             const currentXml = xml || "";
@@ -137,16 +160,16 @@ export function ChatMessageDisplay({
                                 {output || (toolName === "display_diagram"
                                     ? "Diagram generated"
                                     : toolName === "edit_diagram"
-                                    ? "Diagram edited"
+                                        ? "Diagram edited"
-                                    : "Tool executed")}
+                                        : "Tool executed")}
                             </div>
                         ) : state === "output-error" ? (
                             <div className="text-red-600">
                                 {output || (toolName === "display_diagram"
                                     ? "Error generating diagram"
                                     : toolName === "edit_diagram"
-                                    ? "Error editing diagram"
+                                        ? "Error editing diagram"
-                                    : "Tool error")}
+                                        : "Tool error")}
                             </div>
                         ) : null}
                     </div>
@@ -160,51 +183,66 @@ export function ChatMessageDisplay({
             {messages.length === 0 ? (
                 <ExamplePanel setInput={setInput} setFiles={setFiles} />
             ) : (
-                messages.map((message) => (
+                messages.map((message) => {
-                    <div
+                    const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
-                        key={message.id}
+                    return (
-                        className={`mb-4 ${
-                            message.role === "user" ? "text-right" : "text-left"
-                        }`}
-                    >
                         <div
-                            className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
+                            key={message.id}
-                                message.role === "user"
+                            className={`mb-4 flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
-                                    ? "bg-primary text-primary-foreground"
-                                    : "bg-muted text-muted-foreground"
-                            }`}
                         >
-                            {message.parts?.map((part: any, index: number) => {
+                            {message.role === "user" && userMessageText && (
-                                switch (part.type) {
+                                <button
-                                    case "text":
+                                    onClick={() => copyMessageToClipboard(message.id, userMessageText)}
-                                        return (
+                                    className="p-1 text-gray-400 hover:text-gray-600 transition-colors self-center mr-1"
-                                            <div key={index}>{part.text}</div>
+                                    title={copiedMessageId === message.id ? "Copied!" : copyFailedMessageId === message.id ? "Failed to copy" : "Copy message"}
-                                        );
+                                >
-                                    case "file":
+                                    {copiedMessageId === message.id ? (
-                                        return (
+                                        <Check className="h-3.5 w-3.5 text-green-500" />
-                                            <div key={index} className="mt-2">
+                                    ) : copyFailedMessageId === message.id ? (
-                                                <Image
+                                        <X className="h-3.5 w-3.5 text-red-500" />
-                                                    src={part.url}
+                                    ) : (
-                                                    width={200}
+                                        <Copy className="h-3.5 w-3.5" />
-                                                    height={200}
+                                    )}
-                                                    alt={`Uploaded diagram or image for AI analysis`}
+                                </button>
-                                                    className="rounded-md border"
+                            )}
-                                                    style={{
+                            <div
-                                                        objectFit: "contain",
+                                className={`px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${message.role === "user"
-                                                    }}
+                                        ? "bg-primary text-primary-foreground"
-                                                />
+                                        : "bg-muted text-muted-foreground"
-                                            </div>
+                                    }`}
-                                        );
+                            >
-                                    default:
+                                {message.parts?.map((part: any, index: number) => {
-                                        if (part.type?.startsWith("tool-")) {
+                                    switch (part.type) {
-                                            return renderToolPart(part);
+                                        case "text":
-                                        }
+                                            return (
-                                        return null;
+                                                <div key={index}>{part.text}</div>
-                                }
+                                            );
-                            })}
+                                        case "file":
+                                            return (
+                                                <div key={index} className="mt-2">
+                                                    <Image
+                                                        src={part.url}
+                                                        width={200}
+                                                        height={200}
+                                                        alt={`Uploaded diagram or image for AI analysis`}
+                                                        className="rounded-md border"
+                                                        style={{
+                                                            objectFit: "contain",
+                                                        }}
+                                                    />
+                                                </div>
+                                            );
+                                        default:
+                                            if (part.type?.startsWith("tool-")) {
+                                                return renderToolPart(part);
+                                            }
+                                            return null;
+                                    }
+                                })}
+                            </div>
                         </div>
-                    </div>
+                    );
-                ))
+                })
             )}
             {error && (
                 <div className="text-red-500 text-sm mt-2">

package.json

@@ -46,6 +46,8 @@
         "@types/pako": "^2.0.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "eslint": "9.39.1",
+        "eslint-config-next": "16.0.5",
         "tailwindcss": "^4",
         "typescript": "^5"
     }