botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/chat-message.tsx

@@ -0,0 +1,598 @@
+"use client";
+
+import { useEffect, useMemo, useState, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { User, Download, Wrench, ChevronDown, ChevronRight, FileJson, CheckCircle2, AlertCircle, Copy, Check } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import { rehypeDelToMark } from "@/lib/rehype-del-to-mark";
+import { Button } from "@/components/ui/button";
+import { downloadDataFile } from "@/lib/api";
+import { copyMessage } from "@/lib/clipboard-utils";
+import { parseButtonsFromText } from "@/config/smart-buttons";
+import { getApiEndpoint } from "@/lib/api-url";
+import { SmartButtonGroup, SmartButtonProps } from "@/components/smart-button-group";
+import { GeneratedImageGrid } from "@/components/generated-image-card";
+import { extractImagesFromToolUses, type ExtractedImage } from "@/lib/image-extractor";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+// 自訂 sanitize schema - 允許 img 標籤（僅限 HTTPS 來源）
+const sanitizeSchema = {
+  ...defaultSchema,
+  tagNames: [...(defaultSchema.tagNames || []), 'img'],
+  attributes: {
+    ...defaultSchema.attributes,
+    img: ['src', 'alt', 'title', 'width', 'height', 'loading'],
+  },
+  protocols: {
+    ...defaultSchema.protocols,
+    src: ['https'],
+  },
+};
+
+// API URL - 根據環境和當前路徑動態計算
+const API_URL = (() => {
+  if (typeof window === 'undefined') return '';
+
+  // Capacitor (iOS/Android App)
+  if ((window as any).Capacitor) {
+    return process.env.NEXT_PUBLIC_API_URL || 'https://botrun-c-257949799705.asia-east1.run.app';
+  }
+
+  // Load Balancer 架構：檢查是否在個人後端 (/u/{hash}/)
+  const pathname = window.location.pathname;
+  if (pathname.startsWith('/u/')) {
+    const match = pathname.match(/^\/u\/[0-9a-f]{8}/);
+    if (match) {
+      return match[0];
+    }
+  }
+
+  // 使用環境變數設定的 API URL（如果有的話）
+  if (process.env.NEXT_PUBLIC_API_URL) {
+    return process.env.NEXT_PUBLIC_API_URL;
+  }
+
+  // 統一前端或其他情況：使用相對路徑（空字串）
+  return '';
+})();
+
+// 單一工具呼叫資訊
+export interface ToolUseItem {
+  toolId: string;       // 用於關聯 toolInput 和 toolOutput
+  toolName: string;
+  toolInput: any;
+  toolOutput?: any;
+  isError?: boolean;
+}
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+  toolUses?: ToolUseItem[];  // 支援多工具呼叫
+  downloadToken?: string;
+  downloadFileName?: string;
+}
+
+interface ChatMessageProps {
+  message: Message;
+  onSendMessage?: (text: string) => void; // 新增：用於智慧按鈕點擊
+  isStreaming?: boolean; // 是否正在串流中（控制動畫）
+  previousMessage?: Message; // 用於複製一問一答對（取得上一則使用者訊息）
+}
+
+function normalizeMarkdown(content: string) {
+  if (!content) return "";
+  return content
+    .replace(/\u3000/g, " ")
+    // ⚠️ 暫時註解：全形轉半形功能導致全形逗號（，U+FF0C）無法顯示
+    // 原因：U+FF01-FF5E 範圍包含全形逗號，會被轉為半形
+    // 全形句點（。U+3002）不在此範圍內，所以不受影響
+    // TODO: 之後決定是否要以更精確的範圍恢復此功能，或完全移除
+    // .replace(/[\uFF01-\uFF5E]/g, (char) =>
+    //   String.fromCharCode(char.charCodeAt(0) - 0xfee0)
+    // )
+    // HTML 預覽連結轉換：將 <!-- html-preview:hashedUserId/projectId --> 轉換為可點擊連結
+    // 新格式：hashedUserId/projectId（效能優化，O(1) 定位）
+    .replace(/<!--\s*html-preview:([a-zA-Z0-9]+)\/([a-zA-Z0-9-]+)\s*-->/g, (match, hashedUserId, projectId) => {
+      return `\n\n**🌐 [點此預覽網頁](/api/html-preview/${hashedUserId}/${projectId}/)** _(在新分頁開啟)_\n\n`;
+    });
+}
+
+export function ChatMessage({ message, onSendMessage, isStreaming = false, previousMessage }: ChatMessageProps) {
+  const isUser = message.role === "user";
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+  // 多工具折疊狀態：使用 Record<toolId, boolean> 追蹤每個工具的開關狀態
+  const [toolOpenStates, setToolOpenStates] = useState<Record<string, boolean>>({});
+  const [outputOpenStates, setOutputOpenStates] = useState<Record<string, boolean>>({});
+  const [isCopied, setIsCopied] = useState(false); // 複製狀態
+
+  const normalizedContent = useMemo(
+    () => normalizeMarkdown(message.content),
+    [message.content]
+  );
+
+  // 🔍 Debug: 監控 toolUse 變化 (removed to reduce console noise)
+  // useEffect(() => {
+  //   console.log("🔧 [ChatMessage] toolUse changed:", {
+  //     messageId: message.id,
+  //     hasToolUse: !!message.toolUse,
+  //     toolName: message.toolUse?.toolName,
+  //     hasToolInput: !!message.toolUse?.toolInput,
+  //     hasToolOutput: !!message.toolUse?.toolOutput,
+  //     isError: message.toolUse?.isError,
+  //     toolInput: message.toolUse?.toolInput,
+  //     toolOutput: message.toolUse?.toolOutput,
+  //   });
+  // }, [message.toolUse, message.id]);
+
+  // 🔍 Debug: 監控折疊狀態變化 (removed to reduce console noise)
+  // useEffect(() => {
+  //   console.log("📂 [ChatMessage] Fold state changed:", {
+  //     messageId: message.id,
+  //     isToolOpen,
+  //     isOutputOpen,
+  //   });
+  // }, [isToolOpen, isOutputOpen, message.id]);
+
+  // 🎯 自動展開 MCP Output：當 toolOutput 到達時，自動展開對應的工具
+  useEffect(() => {
+    if (message.toolUses) {
+      const newOutputStates: Record<string, boolean> = { ...outputOpenStates };
+      let hasChanges = false;
+      for (const tu of message.toolUses) {
+        if (tu.toolOutput && !outputOpenStates[tu.toolId]) {
+          newOutputStates[tu.toolId] = true;
+          hasChanges = true;
+        }
+      }
+      if (hasChanges) {
+        setOutputOpenStates(newOutputStates);
+      }
+    }
+  }, [message.toolUses, message.id]);
+
+  // 解析智慧按鈕（從 AI 回應中提取 @botrun-button 標記）
+  const { cleanText, buttons } = useMemo(() => {
+    if (isUser) {
+      // 使用者訊息不需要解析按鈕
+      return { cleanText: normalizedContent, buttons: [] };
+    }
+
+    // Removed debug logs to reduce console noise
+    const result = parseButtonsFromText(normalizedContent);
+    return result;
+  }, [normalizedContent, isUser]);
+
+  // 從 toolUses 提取 AI 生成的圖片（用於全寬顯示）
+  const extractedImages = useMemo<ExtractedImage[]>(() => {
+    if (isUser) {
+      return [];
+    }
+
+    return extractImagesFromToolUses(message.toolUses);
+  }, [isUser, message.toolUses]);
+
+  // 處理智慧按鈕點擊
+  const handleButtonClick = (button: SmartButtonProps) => {
+    console.log("🔘 Smart button clicked:", button);
+    if (onSendMessage && button.text) {
+      onSendMessage(button.text);
+    }
+  };
+
+  // Removed: Debug logs that trigger on every character during SSE stream
+  // useEffect(() => {
+  //   const preview = normalizedContent
+  //     ? normalizedContent.slice(0, 80).replace(/\s+/g, " ")
+  //     : "";
+  //   const codes = Array.from(preview.slice(0, 15)).map((char) =>
+  //     char.charCodeAt(0)
+  //   );
+  //   console.log("🧩 ChatMessage render", {
+  //     id: message.id,
+  //     role: message.role,
+  //     length: normalizedContent.length,
+  //     preview,
+  //     charCodes: codes,
+  //     rawContent: message.content.slice(0, 100),
+  //     normalizedContent: normalizedContent.slice(0, 100),
+  //     downloadToken: message.downloadToken,
+  //     downloadFileName: message.downloadFileName,
+  //   });
+  //   console.log("🔍 ReactMarkdown Check:", {
+  //     hasReactMarkdown: typeof ReactMarkdown,
+  //     remarkGfm: typeof remarkGfm,
+  //     rehypeRaw: typeof rehypeRaw,
+  //     rehypeSanitize: typeof rehypeSanitize,
+  //   });
+  // }, [message, normalizedContent]);
+
+  // Handle download button click (for downloadToken)
+  const handleDownload = async () => {
+    if (!message.downloadToken) return;
+
+    setIsDownloading(true);
+    setDownloadError(null);
+
+    try {
+      const response = await fetch(getApiEndpoint(`/api/download/${message.downloadToken}`));
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Download failed');
+      }
+
+      // Get the file as blob
+      const blob = await response.blob();
+
+      // Create download link
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = message.downloadFileName || 'download.html';
+      document.body.appendChild(a);
+      a.click();
+
+      // Cleanup
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+
+      console.log('✅ File downloaded successfully:', message.downloadFileName);
+    } catch (error) {
+      console.error('❌ Download error:', error);
+      setDownloadError(error instanceof Error ? error.message : 'Download failed');
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  // Handle markdown link click (intercept /api/data/** links)
+  const handleMarkdownClick = async (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+
+    // Check if clicked element is a link
+    if (target.tagName === 'A') {
+      const href = target.getAttribute('href');
+
+      // Check if it's an /api/data/** link
+      if (href && href.startsWith('/api/data/')) {
+        e.preventDefault();
+
+        console.log('🔗 Intercepted /api/data/** link:', href);
+
+        // Extract file path (remove /api/data/ prefix)
+        const filePath = href.replace(/^\/api\/data\//, '');
+
+        try {
+          // Use downloadDataFile helper (auto adds Firebase token)
+          await downloadDataFile(filePath);
+          console.log('✅ File downloaded via intercepted link');
+        } catch (error) {
+          console.error('❌ Download failed:', error);
+          alert(`下載失敗: ${error instanceof Error ? error.message : '未知錯誤'}`);
+        }
+      }
+    }
+  };
+
+  // Handle copy button click - copies both plain text and HTML formats
+  const handleCopy = async () => {
+    try {
+      await copyMessage({
+        content: message.content,
+        role: isUser ? 'user' : 'assistant',
+        timestamp: message.timestamp,
+        previousMessage: !isUser && previousMessage && previousMessage.role === 'user'
+          ? {
+              content: previousMessage.content,
+              role: 'user',
+              timestamp: previousMessage.timestamp,
+            }
+          : undefined,
+      });
+
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+      console.log('✅ Message copied to clipboard (plain text + HTML)');
+    } catch (error) {
+      console.error('❌ Copy failed:', error);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col gap-2 px-2 py-2 animate-in fade-in-50 slide-in-from-bottom-3",
+        isUser ? "bg-background" : "bg-muted/30"
+      )}
+    >
+      {/* Header: Avatar + Name + Time */}
+      <div className="flex items-center gap-2">
+        <div
+          className={cn(
+            "flex h-6 w-6 md:h-7 md:w-7 shrink-0 select-none items-center justify-center rounded-full",
+            isUser
+              ? "bg-primary text-primary-foreground"
+              : "bg-gradient-to-br from-yellow-400 to-amber-500"
+          )}
+        >
+          {isUser ? (
+            <User className="h-3 w-3 md:h-4 md:w-4" />
+          ) : (
+            <div className="relative flex h-4 w-4 md:h-5 md:w-5 items-center justify-center">
+              {isStreaming ? (
+                <>
+                  <div className="absolute h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-white animate-pulse" />
+                  <div className="absolute h-2.5 w-2.5 md:h-3 md:w-3 rounded-full bg-white/30 animate-ping" style={{ animationDuration: '2s' }} />
+                </>
+              ) : (
+                <div className="h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-white" />
+              )}
+            </div>
+          )}
+        </div>
+
+        <span className="text-sm font-semibold">
+          {isUser ? "You" : "波特人"}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {message.timestamp.toLocaleTimeString("zh-TW", {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        </span>
+      </div>
+
+      {/* Content: Full width, no indentation */}
+      <div className="w-full space-y-2 overflow-hidden">
+
+        {/* 多工具呼叫區塊 */}
+        {message.toolUses && message.toolUses.length > 0 && (
+          <div className="space-y-2">
+            {message.toolUses.map((toolUse) => {
+              const isToolOpen = toolOpenStates[toolUse.toolId] || false;
+              const isOutputOpen = outputOpenStates[toolUse.toolId] || false;
+
+              return (
+                <Collapsible
+                  key={toolUse.toolId}
+                  open={isToolOpen}
+                  onOpenChange={(open) => setToolOpenStates(prev => ({ ...prev, [toolUse.toolId]: open }))}
+                  className="w-full"
+                >
+                  <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md bg-accent/50 px-3 py-2 text-xs hover:bg-accent/70 transition-colors">
+                    {isToolOpen ? (
+                      <ChevronDown className="h-3 w-3 shrink-0" />
+                    ) : (
+                      <ChevronRight className="h-3 w-3 shrink-0" />
+                    )}
+                    <Wrench className="h-3 w-3 shrink-0" />
+                    <span className="text-muted-foreground font-medium">
+                      {toolUse.toolName}
+                    </span>
+                    {toolUse.isError !== undefined && (
+                      toolUse.isError ? (
+                        <AlertCircle className="ml-auto h-3 w-3 text-destructive shrink-0" />
+                      ) : (
+                        <CheckCircle2 className="ml-auto h-3 w-3 text-green-500 shrink-0" />
+                      )
+                    )}
+                  </CollapsibleTrigger>
+                  <CollapsibleContent className="mt-2 space-y-2">
+                    {toolUse.toolInput && (
+                      <div className="rounded-md border border-border bg-muted/30 p-3">
+                        <div className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
+                          <FileJson className="h-3 w-3" />
+                          Input
+                        </div>
+                        <pre className="overflow-x-auto text-xs text-foreground">
+                          <code>{JSON.stringify(toolUse.toolInput, null, 2)}</code>
+                        </pre>
+                      </div>
+                    )}
+                    {toolUse.toolOutput && (
+                      <Collapsible
+                        open={isOutputOpen}
+                        onOpenChange={(open) => setOutputOpenStates(prev => ({ ...prev, [toolUse.toolId]: open }))}
+                        className="rounded-md border border-border bg-muted/30"
+                      >
+                        <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-2 text-xs hover:bg-accent/50 transition-colors rounded-t-md">
+                          {isOutputOpen ? (
+                            <ChevronDown className="h-3 w-3 shrink-0" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 shrink-0" />
+                          )}
+                          <FileJson className="h-3 w-3 shrink-0" />
+                          <span className="font-medium text-muted-foreground">Tool Response</span>
+                          <span className="ml-auto text-[10px] text-muted-foreground/60">
+                            {typeof toolUse.toolOutput === 'string'
+                              ? `${toolUse.toolOutput.length} chars`
+                              : `${JSON.stringify(toolUse.toolOutput).length} chars`}
+                          </span>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="px-3 pb-3">
+                          {/* 使用 ReactMarkdown 渲染 toolOutput，支援圖片顯示 */}
+                          <div className="text-xs mt-2 prose prose-sm dark:prose-invert text-foreground">
+                            <ReactMarkdown
+                              remarkPlugins={[remarkGfm]}
+                              rehypePlugins={[rehypeRaw, rehypeDelToMark, [rehypeSanitize, sanitizeSchema]]}
+                              components={{
+                                img: ({ node, src, alt, ...props }) => {
+                                  if (!src?.startsWith('https://')) {
+                                    return <span className="text-muted-foreground">[圖片載入失敗]</span>;
+                                  }
+                                  return (
+                                    <img
+                                      src={src}
+                                      alt={alt || '生成的圖片'}
+                                      loading="lazy"
+                                      className="max-w-full h-auto rounded-lg shadow-md my-2"
+                                      style={{ maxHeight: '400px', objectFit: 'contain' }}
+                                      onError={(e) => {
+                                        const target = e.target as HTMLImageElement;
+                                        target.style.display = 'none';
+                                      }}
+                                      {...props}
+                                    />
+                                  );
+                                },
+                                // 保持程式碼區塊正常顯示（使用 foreground 確保可讀性）
+                                pre: ({ children }) => (
+                                  <pre className="overflow-x-auto bg-muted/50 p-2 rounded text-xs text-foreground">{children}</pre>
+                                ),
+                                code: ({ children }) => (
+                                  <code className="text-xs text-foreground">{children}</code>
+                                ),
+                              }}
+                            >
+                              {(() => {
+                                const output = toolUse.toolOutput;
+                                // 如果是字串，直接渲染
+                                if (typeof output === 'string') return output;
+                                // 如果是陣列（MCP 標準格式），提取所有 text 內容
+                                if (Array.isArray(output)) {
+                                  return output
+                                    .filter((item: any) => item?.type === 'text' && item?.text)
+                                    .map((item: any) => item.text)
+                                    .join('\n\n');
+                                }
+                                // 其他情況，JSON 序列化
+                                return JSON.stringify(output, null, 2);
+                              })()}
+                            </ReactMarkdown>
+                          </div>
+                        </CollapsibleContent>
+                      </Collapsible>
+                    )}
+                  </CollapsibleContent>
+                </Collapsible>
+              );
+            })}
+          </div>
+        )}
+
+        {/* AI 生成圖片全寬顯示區 */}
+        {extractedImages.length > 0 && (
+          <div className="my-4">
+            <GeneratedImageGrid
+              images={extractedImages}
+              onEditRequest={(sessionId, prompt) => {
+                // 觸發迭代修改（未來可擴展）
+                console.log("Edit request:", sessionId, prompt);
+              }}
+            />
+          </div>
+        )}
+
+        {/* 主要內容區 */}
+        <div
+          className="prose prose-sm max-w-none dark:prose-invert break-words [&>p]:whitespace-pre-line"
+          onClick={handleMarkdownClick}
+        >
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw, rehypeDelToMark, [rehypeSanitize, sanitizeSchema]]}
+            components={{
+              img: ({ node, src, alt, ...props }) => {
+                if (!src?.startsWith('https://')) {
+                  return <span className="text-muted-foreground">[圖片載入失敗：不支援的來源]</span>;
+                }
+                return (
+                  <img
+                    src={src}
+                    alt={alt || '生成的圖片'}
+                    loading="lazy"
+                    className="max-w-full h-auto rounded-lg shadow-md my-2"
+                    style={{ maxHeight: '400px', objectFit: 'contain' }}
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement;
+                      target.style.display = 'none';
+                      target.insertAdjacentHTML('afterend', '<span class="text-muted-foreground">[圖片載入失敗]</span>');
+                    }}
+                    {...props}
+                  />
+                );
+              },
+              a: ({ node, href, children, ...props }) => {
+                const isDataLink = href?.startsWith('/api/data/');
+                const isHtmlPreviewLink = href?.startsWith('/api/html-preview/');
+                const isNative = typeof window !== 'undefined' &&
+                  (window as any).Capacitor?.isNativePlatform?.() || false;
+
+                // HTML 預覽連結需要加上 API Server URL（開發環境 localhost:8080）
+                const finalHref = isHtmlPreviewLink ? getApiEndpoint(href || '') : href;
+
+                return (
+                  <a
+                    href={finalHref}
+                    target={isDataLink ? undefined : (isNative ? '_system' : '_blank')}
+                    rel={isDataLink ? undefined : 'noopener noreferrer'}
+                    {...props}
+                  >
+                    {children}
+                  </a>
+                );
+              },
+            }}
+          >
+            {cleanText}
+          </ReactMarkdown>
+        </div>
+
+        {/* 智慧按鈕群組 */}
+        {buttons.length > 0 && (
+          <SmartButtonGroup
+            buttons={buttons}
+            onButtonClick={handleButtonClick}
+          />
+        )}
+
+        {/* 操作按鈕區（複製 + 下載） */}
+        <div className="mt-2 flex items-center gap-2">
+          {/* 複製按鈕（所有訊息都有） */}
+          <Button
+            onClick={handleCopy}
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground hover:text-foreground"
+            title={isUser ? "複製此訊息" : "複製問答對"}
+          >
+            {isCopied ? (
+              <Check className="h-4 w-4 text-green-500" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+
+          {/* 下載按鈕（只有 AI 訊息且有 downloadToken 時顯示） */}
+          {message.downloadToken && message.downloadFileName && (
+            <Button
+              onClick={handleDownload}
+              disabled={isDownloading}
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              title={`下載 ${message.downloadFileName}`}
+            >
+              <Download className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        {downloadError && (
+          <p className="text-sm text-destructive mt-2">{downloadError}</p>
+        )}
+      </div>
+    </div>
+  );
+}