botrun-horse 2.31.0 → 2.34.0

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

@@ -1,598 +0,0 @@
-"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>
-  );
-}