Update components/chat-message-display.tsx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/claude-code.yml

@@ -74,19 +74,24 @@ jobs:
 
             This is a personal project - an AI-powered draw.io diagram generator built with:
             - Next.js 15 with React 19
-            - Vercel AI SDK (streamText, useChat, tool calling)
             - Multiple AI providers: Bedrock, Anthropic, OpenAI, Google, Azure, OpenRouter, Ollama
 
             First, check previous review comments from github-actions bot using `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`.
             For each previous comment:
             - If the issue is fixed in the current code, resolve the comment thread using:
+            - Multiple AI providers: Bedrock, Anthropic, OpenAI, Google, Azure, OpenRouter, Ollama
+
+            STEP 1: Check existing comments to avoid duplicates.
+            Run: `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`
+
+            Build a list of files and line numbers that already have comments. For each existing comment:
+            - If the issue is FIXED in current code, resolve the thread using:
               `gh api graphql -f query='mutation { resolveReviewThread(input: {threadId: "THREAD_ID"}) { thread { isResolved } } }'`
-              Get the thread ID from the comment's node_id field.
-            - If the issue still exists, leave it alone
+            - If the issue still exists, remember this file:line - DO NOT create a new comment for it
 
-            Then review the current diff for NEW issues only:
+            STEP 2: Review the diff for issues, but SKIP any file:line that already has a comment.
 
-            Review this PR for ONLY these issues:
+            Review this PR for these issues (report ALL that apply):
             1. Bugs that would cause runtime errors or broken functionality
             2. Security issues (exposed secrets, API key leaks)
             3. AI SDK misuse - specifically check for:
@@ -96,18 +101,22 @@ jobs:
                - Tool definitions: Must use Zod schemas for inputSchema
                - Status handling: Check status (submitted/streaming/ready/error) before actions
                - Stream cleanup: Call stop() when aborting streams
+            4. Unrelated changes that should be in separate PRs (scope creep)
+            5. Suspicious .gitignore additions or accidentally committed files
+            6. UI/UX inconsistencies (e.g., alignment issues)
 
             When reviewing AI SDK usage, fetch https://ai-sdk.dev/docs/ to verify correct patterns.
             Key doc pages: /docs/ai-sdk-ui/chatbot, /docs/ai-sdk-core/generating-text, /docs/ai-sdk-core/tools-and-tool-calling
 
             DO NOT comment on:
-            - Performance optimizations
-            - Code style or formatting
-            - "Best practices" that don't affect functionality
-            - Type safety improvements
-            - Error handling additions
+            - Minor performance optimizations
+            - Code style preferences (unless clearly wrong)
+            - Type annotations that don't affect functionality
 
-            Use `mcp__github_inline_comment__create_inline_comment` for inline comments.
-            Be very selective - if there are no real bugs, just say "LGTM" in a PR comment.
+            IMPORTANT:
+            - NEVER create a comment on a file:line that already has a comment - this causes duplicates
+            - For each NEW issue, use `mcp__github_inline_comment__create_inline_comment` to comment on the specific line
+            - ALWAYS include a suggested fix using GitHub's suggestion syntax: ```suggestion\n<fixed code>\n```
+            - Only say "LGTM" if there are truly ZERO new issues to report
           claude_args: |
-            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"

.gitignore

@@ -41,3 +41,8 @@ yarn-error.log*
 next-env.d.ts
 push-via-ec2.sh
 .claude/settings.local.json
+
+next
+next-ai-draw-io@0.2.0
+object
+starting

components/chat-message-display.tsx

@@ -7,6 +7,7 @@ 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 } from "lucide-react";
 
 import { useDiagram } from "@/contexts/diagram-context";
 
@@ -30,6 +31,51 @@ export function ChatMessageDisplay({
     const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
         {}
     );
+    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
+
+    // 复制消息到剪贴板，支持非 HTTPS 环境的降级处理
+    const copyMessageToClipboard = async (messageId: string, text: string) => {
+        try {
+            // 优先使用 Clipboard API（需要 HTTPS 或 localhost）
+            if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(text);
+            } else {
+                // 降级方案：使用传统的 execCommand 方法（兼容 HTTP 环境）
+                const textArea = document.createElement("textarea");
+                textArea.value = text;
+                // 设置样式避免影响页面布局
+                textArea.style.position = "fixed";
+                // 降级方案：使用传统的 execCommand 方法（兼容 HTTP 环境）
+                // Fallback: Use textarea selection (works in most browsers)
+                textArea.style.top = "-9999px";
+                textArea.style.opacity = "0";
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+
+                const successful = document.execCommand("copy");
+                document.body.removeChild(textArea);
+
+                if (!successful) {
+                    throw new Error("execCommand copy failed");
+                }
+            }
+            setCopiedMessageId(messageId);
+            setTimeout(() => {
+                setCopiedMessageId(null);
+            }, 2000);
+        } catch (err) {
+            console.error("Failed to copy message:", err);
+        }
+    };
+
+    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");
+    };
     const handleDisplayChart = useCallback(
         (xml: string) => {
             const currentXml = xml || "";
@@ -160,51 +206,67 @@ export function ChatMessageDisplay({
             {messages.length === 0 ? (
                 <ExamplePanel setInput={setInput} setFiles={setFiles} />
             ) : (
-                messages.map((message) => (
-                    <div
-                        key={message.id}
-                        className={`mb-4 ${
-                            message.role === "user" ? "text-right" : "text-left"
-                        }`}
-                    >
+                messages.map((message) => {
+                    const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
+                    return (
                         <div
-                            className={`inline-block 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"
-                            }`}
+                            key={message.id}
+                            className={`mb-4 ${message.role === "user" ? "text-right" : "text-left"
+                                }`}
                         >
-                            {message.parts?.map((part: any, index: number) => {
-                                switch (part.type) {
-                                    case "text":
-                                        return (
-                                            <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
+                                className={`inline-block 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"
+                                    }`}
+                            >
+                                {message.parts?.map((part: any, index: number) => {
+                                    switch (part.type) {
+                                        case "text":
+                                            return (
+                                                <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>
+                            {userMessageText && (
+                                <div className="flex justify-start mt-1">
+                                    <button
+                                        onClick={() => copyMessageToClipboard(message.id, userMessageText)}
+                                        className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
+                                        title={copiedMessageId === message.id ? "Copied!" : "Copy message"}
+                                    >
+                                        {copiedMessageId === message.id ? (
+                                            <Check className="h-3.5 w-3.5 text-green-500" />
+                                        ) : (
+                                            <Copy className="h-3.5 w-3.5" />
+                                        )}
+                                    </button>
+                                </div>
+                            )}
                         </div>
-                    </div>
-                ))
+                    )
+                })
             )}
             {error && (
                 <div className="text-red-500 text-sm mt-2">