botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/ChatPage.tsx

@@ -0,0 +1,1736 @@
+
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { ChatMessage, type Message } from "@/components/chat-message";
+import { ChatInput } from "@/components/chat-input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LogOut, MoreVertical, MessageSquarePlus, Sparkles, Copy, Check, Mail, Star, Info, UserX, RefreshCw, User, Hammer, Trash2, Brain, ChevronDown, FolderSync, Plus, History, Github, GitBranch, Link2, Unlink, FolderGit2, Search, X, AlertCircle, Download, CheckCircle2 } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import Image from "next/image";
+import { useAuth } from "@/contexts/AuthContext";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
+import { useAutoWelcome } from "@/hooks/useAutoWelcome";
+import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
+import { useScrollToBottom } from "@/hooks/useScrollToBottom";
+import { useAppStoreUpdate, openAppStore } from "@/hooks/useAppStoreUpdate";
+import { useUserPlan } from "@/hooks/useUserPlan";
+import { ScrollToBottomButton } from "@/components/scroll-to-bottom-button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { BotrunIncubator } from "@/components/botrun-incubator";
+import { SkillsManagerDrawer } from "@/components/skills-manager-drawer";
+import { SkillsEditor } from "@/components/skills-editor";
+import { GdriveAddDialog } from "@/components/gdrive/gdrive-add-dialog";
+import { useGdriveFolders } from "@/hooks/useGdriveFolders";
+import { useGdriveSync } from "@/hooks/useGdriveSync";
+import { useGitHub } from "@/hooks/useGitHub";
+import { useAuthToken } from "@/hooks/useAuthToken";
+import { useClaudeModel, type ClaudeModelId } from "@/hooks/useClaudeModel";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { getApiUrl } from '@/lib/api-url';
+import {
+  saveSessionId,
+  loadSessionId,
+  clearSessionId,
+  saveMessages,
+  loadMessages,
+  clearMessages,
+  clearAllUserData,
+} from '@/lib/conversation-storage';
+import { copyAllMessages } from '@/lib/clipboard-utils';
+import { ConversationList } from '@/components/ConversationList';
+import { useConversations } from '@/hooks/useConversations';
+import { useConversation } from '@/hooks/useConversation';
+import type { Conversation } from '@/types/conversation';
+
+// API URL - 使用統一的 API URL 邏輯
+const API_URL = (() => {
+  if (typeof window === 'undefined') return '';
+
+  // Capacitor (iOS/Android App) - 必須檢查 isNativePlatform()
+  // ⚠️ window.Capacitor 在 web 環境也會存在，需要額外判斷
+  const capacitor = (window as any).Capacitor;
+  if (capacitor && capacitor.isNativePlatform && capacitor.isNativePlatform()) {
+    // 真正的 Native App 環境：使用環境變數或預設 Cloud Run URL
+    return process.env.NEXT_PUBLIC_API_URL || 'https://botrun-c-257949799705.asia-east1.run.app';
+  }
+
+  // Next.js Dev Server (localhost:3000) - 使用 lib/api-url.ts 的統一邏輯
+  // 本地開發：前端在 3000，API 在 8080
+  const currentPort = window.location.port;
+  if (currentPort === '3000') {
+    console.log('🔍 [ChatPage] Detected Next.js dev server (port 3000), using: http://localhost:8080');
+    return 'http://localhost:8080';
+  }
+
+  // Load Balancer 架構：檢查是否在個人後端 (/u/{hash}/)
+  const pathname = window.location.pathname;
+  if (pathname.startsWith('/u/')) {
+    // 提取 /u/{hash}/ 前綴 (hash 是 8 位 16 進制)
+    const match = pathname.match(/^\/u\/[0-9a-f]{8}/);
+    if (match) {
+      console.log('🔍 [ChatPage] Detected personal backend path:', match[0]);
+      return match[0];  // 例如: /u/53288a47
+    }
+  }
+
+  // 使用環境變數設定的 API URL（如果有的話）
+  if (process.env.NEXT_PUBLIC_API_URL) {
+    return process.env.NEXT_PUBLIC_API_URL;
+  }
+
+  // 統一前端或其他情況：使用相對路徑（空字串）
+  return '';
+})();
+
+// Debug: Log environment
+if (typeof window !== 'undefined') {
+  console.log('🔍 [ChatPage] Environment:', {
+    isCapacitor: !!(window as any).Capacitor,
+    API_URL,
+    userAgent: navigator.userAgent
+  });
+}
+
+function log(message: string, data?: any) {
+  const timestamp = new Date().toLocaleTimeString("zh-TW");
+  if (data) {
+    console.log(`[${timestamp}] 🌐 ${message}`, data);
+  } else {
+    console.log(`[${timestamp}] 🌐 ${message}`);
+  }
+}
+
+// 轉錄模型選項
+const TRANSCRIPTION_MODELS = [
+  { id: 'whisper-local', name: 'Whisper v3 Turbo (本地)', description: '本地 MLX Whisper，物理隔離，Apple Silicon 優化' },
+  { id: 'whisper-Breeze-ASR-25', name: 'Whisper Breeze ASR 2.5 (國網中心)', description: '台灣國網中心優化版本，適合中文' },
+  { id: 'Whisper-Large-V3', name: 'Whisper Large V3 (國網中心)', description: 'OpenAI 大型模型，支援多語言' },
+  { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro (Google)', description: 'Google 最新模型，高準確度' },
+] as const;
+
+export type TranscriptionModel = typeof TRANSCRIPTION_MODELS[number]['id'];
+
+// 雲端模型（需要網路）
+const CLOUD_MODELS: TranscriptionModel[] = ['whisper-Breeze-ASR-25', 'Whisper-Large-V3', 'gemini-2.5-pro'];
+
+// 本地模型（物理隔離）
+const LOCAL_MODELS: TranscriptionModel[] = ['whisper-local'];
+
+export function ChatPage() {
+  const { user, signOut } = useAuth();
+  const { toast } = useToast();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [sessionId, setSessionId] = useState<string | undefined>();
+  const [isStopping, setIsStopping] = useState(false);
+  const [streamingMessageId, setStreamingMessageId] = useState<string | null>(null);
+  const [isIncubatorOpen, setIsIncubatorOpen] = useState(false);
+  const [isSkillsDrawerOpen, setIsSkillsDrawerOpen] = useState(false);
+  // 選單折疊狀態
+  const [menuSections, setMenuSections] = useState({
+    chat: false,
+    incubator: false,
+    gdrive: false,
+    github: false,
+    model: false,
+    about: false,
+  });
+  const [isGdriveAddDialogOpen, setIsGdriveAddDialogOpen] = useState(false);
+  const [skillsEditorOpen, setSkillsEditorOpen] = useState(false);
+  const [skillToEdit, setSkillToEdit] = useState<{ id: string; name: string; description: string; icon: string; source: "official" | "user"; editable: boolean } | null>(null);
+  const [clearFilesDialogOpen, setClearFilesDialogOpen] = useState(false);
+  const [fileStats, setFileStats] = useState<{ uploads: { count: number; size: number }; pdfPages: { count: number; size: number }; total: { count: number; size: number } } | null>(null);
+  const [isClearingFiles, setIsClearingFiles] = useState(false);
+  const [isLoadingStats, setIsLoadingStats] = useState(false);
+  // 🗂️ 對話歷史狀態
+  const [isConversationListOpen, setIsConversationListOpen] = useState(false);
+  const [currentConversationId, setCurrentConversationId] = useState<string | undefined>();
+
+  // 🎯 根據 ?local=true 決定預設轉錄模型
+  const [transcriptionModel, setTranscriptionModel] = useState<TranscriptionModel>(() => {
+    if (typeof window === 'undefined') return 'whisper-Breeze-ASR-25';
+    const searchParams = new URLSearchParams(window.location.search);
+    const isLocalMode = searchParams.get('local') === 'true';
+    return isLocalMode ? 'whisper-local' : 'whisper-Breeze-ASR-25';
+  });
+  const [isCopiedAll, setIsCopiedAll] = useState(false);
+  const [isSharingEmail, setIsSharingEmail] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // 偵測 Capacitor 平台
+  const { isCapacitor, isIOS, isAndroid, platform, getBottomPadding } = useCapacitorPlatform();
+
+  // 🎯 檢查 App 更新（iOS/Android）
+  const { updateAvailable, latestVersion, hasSeenUpdateNotification, markUpdateAsSeen } = useAppStoreUpdate();
+
+  // 🎯 取得使用者訂閱方案
+  const { planName, isLoading: isPlanLoading, refetch: refetchUserPlan } = useUserPlan(user);
+
+  // 🧠 Claude 模型選擇（Haiku 4.5 / Sonnet 4）
+  const { currentModel: claudeModel, setModel: setClaudeModel, models: claudeModels, getModelInfo } = useClaudeModel();
+
+  // 🎯 取得 Auth Token（用於 Google Drive 等需要認證的功能）
+  const { token: authToken } = useAuthToken();
+
+  // 🗂️ Google Drive 相關 hooks
+  const {
+    folders: gdriveFolders,
+    history: gdriveHistory,
+    isLoading: isGdriveFoldersLoading,
+    addFolder: addGdriveFolder,
+    removeFolder: removeGdriveFolder,
+    toggleSelect: toggleGdriveSelect,
+    refetch: refetchGdriveFolders,
+  } = useGdriveFolders(authToken || undefined);
+
+  const {
+    isSyncing: isGdriveSyncing,
+    syncAll: syncAllGdrive,
+  } = useGdriveSync(authToken || undefined);
+
+  // 🐙 GitHub 整合
+  const {
+    connected: isGitHubConnected,
+    loading: isGitHubLoading,
+    connectedRepos,
+    availableRepos,
+    connect: connectGitHub,
+    disconnect: disconnectGitHub,
+    cloneRepo: cloneGitHubRepo,
+    syncRepo: syncGitHubRepo,
+    deleteRepo: deleteGitHubRepo,
+    refresh: refreshGitHub,
+  } = useGitHub(authToken || undefined);
+  const [syncingRepoName, setSyncingRepoName] = useState<string | null>(null);
+  const [cloningRepoName, setCloningRepoName] = useState<string | null>(null);
+  const [deletingRepoName, setDeletingRepoName] = useState<string | null>(null);
+  const [showGitHubReposModal, setShowGitHubReposModal] = useState(false);
+
+  // 🐙 GitHub 連結回調處理（從 GitHub OAuth 跳轉回來時）
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const githubConnected = urlParams.get('github_connected');
+    const githubError = urlParams.get('github_error');
+
+    if (githubConnected === 'true') {
+      toast({
+        title: '✅ GitHub 連結成功',
+        description: '現在可以管理你的 Repository 了',
+      });
+      // 清除 URL 參數
+      window.history.replaceState({}, '', window.location.pathname);
+      // 重新載入 GitHub 狀態
+      refreshGitHub();
+    } else if (githubError) {
+      const errorMessages: Record<string, string> = {
+        missing_state: '連結參數遺失，請重新連結',
+        invalid_state: '連結已過期，請重新連結',
+        invalid_installation: 'GitHub App 安裝驗證失敗',
+        install_failed: 'GitHub 連結失敗，請重試',
+      };
+      toast({
+        title: '❌ GitHub 連結失敗',
+        description: errorMessages[githubError] || '未知錯誤',
+        variant: 'destructive',
+      });
+      // 清除 URL 參數
+      window.history.replaceState({}, '', window.location.pathname);
+    }
+  }, [toast, refreshGitHub]);
+
+  // 🗂️ 對話歷史 hooks
+  const {
+    conversations,
+    isLoading: isConversationsLoading,
+    error: conversationsError,
+    refetch: refetchConversations,
+    updateTitle: updateConversationTitle,
+    deleteConversation,
+  } = useConversations(authToken || undefined);
+
+  const {
+    conversation: selectedConversation,
+    messages: selectedMessages,
+    isLoading: isSelectedConversationLoading,
+  } = useConversation(authToken || undefined, currentConversationId);
+
+  // Debug: 顯示當前平台和底部間距
+  useEffect(() => {
+    console.log('🔍 [ChatPage] Platform detection result:', {
+      platform,
+      isCapacitor,
+      bottomPadding: getBottomPadding(),
+      buttonBottom: getBottomPadding('6rem'),
+    });
+  }, [platform, isCapacitor, getBottomPadding]);
+
+  // 🔄 頁面載入時恢復 sessionId 和 messages（避免閒置後失憶）
+  useEffect(() => {
+    if (!user) return;
+
+    // 恢復 sessionId
+    const savedSessionId = loadSessionId(user.uid);
+    if (savedSessionId) {
+      setSessionId(savedSessionId);
+      log('🔄 Restored sessionId from localStorage');
+    }
+
+    // 恢復 messages（可選，快速恢復對話內容）
+    const savedMessages = loadMessages(user.uid);
+    if (savedMessages && savedMessages.length > 0) {
+      setMessages(savedMessages);
+      log(`🔄 Restored ${savedMessages.length} messages from localStorage`);
+    }
+  }, [user]); // 只在 user 變更時執行一次
+
+  // 💾 自動儲存 sessionId（每次變更時）
+  useEffect(() => {
+    if (!user || !sessionId) return;
+
+    saveSessionId(user.uid, sessionId);
+  }, [user, sessionId]);
+
+  // 💾 自動儲存 messages（可選，debounce 避免過度寫入）
+  useEffect(() => {
+    if (!user || messages.length === 0) return;
+
+    // 使用 setTimeout debounce（5 秒後才存）
+    const timeoutId = setTimeout(() => {
+      saveMessages(user.uid, messages);
+    }, 5000);
+
+    return () => clearTimeout(timeoutId);
+  }, [user, messages]);
+
+  // 歡迎訊息 hook
+  const { welcomeMessage, shouldShowWelcome } = useAutoWelcome(messages);
+
+  // 智慧捲動 hook
+  const { isAtBottom, scrollToBottom, handleScroll, checkIsAtBottom } = useScrollToBottom({
+    scrollContainerRef: scrollAreaRef,
+    scrollTargetRef: messagesEndRef,
+  });
+
+  // 🎯 取消自動捲動功能 - 使用者需手動滾動查看新內容
+  // 保留浮動按鈕，讓使用者可以隨時跳回底部
+  // useEffect(() => {
+  //   if (isAtBottom) {
+  //     scrollToBottom();
+  //   }
+  // }, [messages, isAtBottom, scrollToBottom]);
+
+  // 🎯 當內容變化時，檢查是否需要顯示浮動按鈕
+  // 當 AI 生成內容超過視窗高度時，自動顯示按鈕提醒使用者
+  useEffect(() => {
+    // 多次檢查，確保捕捉到內容超過視窗的時刻
+    // 因為 DOM 更新和渲染需要時間，單次檢查可能不準確
+    const timers = [
+      setTimeout(() => checkIsAtBottom(), 50),   // 第一次快速檢查
+      setTimeout(() => checkIsAtBottom(), 150),  // 第二次檢查
+      setTimeout(() => checkIsAtBottom(), 300),  // 第三次檢查（確保 smooth scroll 完成）
+    ];
+    return () => timers.forEach(timer => clearTimeout(timer));
+  }, [messages, checkIsAtBottom]);
+
+
+  const handleStopResponse = () => {
+    log("🛑 User requested to stop the response");
+    setIsStopping(true);
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      log("🛑 AbortController signal sent");
+    }
+
+    // Reset states after a short delay to allow cleanup
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsStopping(false);
+      abortControllerRef.current = null;
+    }, 500);
+  };
+
+  // 技能編輯處理函數
+  const handleEditSkill = (skill: { id: string; name: string; description: string; icon: string; source: "official" | "user"; editable: boolean }) => {
+    setSkillToEdit(skill);
+    setIsSkillsDrawerOpen(false);
+    setSkillsEditorOpen(true);
+  };
+
+  const handleCreateSkill = () => {
+    setSkillToEdit(null);
+    setIsSkillsDrawerOpen(false);
+    setSkillsEditorOpen(true);
+  };
+
+  const handleSkillsChange = () => {
+    // Skills 變更後的回呼（目前僅關閉 drawer 即可）
+  };
+
+  // 清除檔案功能
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  };
+
+  const handleOpenClearFilesDialog = async () => {
+    if (!user) return;
+
+    setIsLoadingStats(true);
+    setClearFilesDialogOpen(true);
+
+    try {
+      const token = await user.getIdToken();
+      const apiUrl = getApiUrl();
+      const response = await fetch(`${apiUrl}/api/files/stats?projectId=default`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to get file stats');
+      }
+
+      const data = await response.json();
+      setFileStats(data.stats);
+      log('📊 File stats loaded:', data.stats);
+    } catch (error) {
+      console.error('Failed to load file stats:', error);
+      toast({
+        title: "載入失敗",
+        description: "無法取得檔案統計資訊",
+        variant: "destructive",
+      });
+      setClearFilesDialogOpen(false);
+    } finally {
+      setIsLoadingStats(false);
+    }
+  };
+
+  const handleClearFiles = async () => {
+    if (!user) return;
+
+    setIsClearingFiles(true);
+
+    try {
+      const token = await user.getIdToken();
+      const apiUrl = getApiUrl();
+      const response = await fetch(`${apiUrl}/api/files/clear?projectId=default`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to clear files');
+      }
+
+      const data = await response.json();
+      log('🗑️ Files cleared:', data);
+
+      toast({
+        title: "清除完成",
+        description: data.message || `已清除 ${data.totalDeleted} 個檔案`,
+        duration: 2000,
+      });
+
+      setClearFilesDialogOpen(false);
+      setFileStats(null);
+    } catch (error) {
+      console.error('Failed to clear files:', error);
+      toast({
+        title: "清除失敗",
+        description: "無法清除檔案，請稍後再試",
+        variant: "destructive",
+      });
+    } finally {
+      setIsClearingFiles(false);
+    }
+  };
+
+  const handleNewChat = () => {
+    // 1. 清空 sessionId（讓下次請求建立新 session）
+    setSessionId(undefined);
+
+    // 2. 清空所有訊息
+    setMessages([]);
+
+    // 3. 清空 localStorage（避免恢復舊對話）
+    if (user) {
+      clearSessionId(user.uid);
+      clearMessages(user.uid);
+      log('🗑️  Cleared localStorage for new chat');
+    }
+
+    // 4. 重置其他狀態（保險起見）
+    setIsLoading(false);
+    setIsStopping(false);
+    abortControllerRef.current = null;
+
+    // 5. 清空當前對話 ID（歷史對話功能）
+    setCurrentConversationId(undefined);
+
+    // 6. 歡迎訊息會自動重新顯示（因為 shouldShowWelcome = messages.length === 0）
+  };
+
+  // 🗂️ 選擇歷史對話
+  const handleSelectConversation = (conversation: Conversation) => {
+    log(`🗂️ Selected conversation: ${conversation.id} - ${conversation.title}`);
+
+    // 設定當前對話 ID（觸發 useConversation hook 載入訊息）
+    setCurrentConversationId(conversation.id);
+
+    // 設定 sessionId 以便繼續對話
+    if (conversation.sessionId) {
+      setSessionId(conversation.sessionId);
+      if (user) {
+        saveSessionId(user.uid, conversation.sessionId);
+      }
+    }
+  };
+
+  // 🗂️ 當選擇的對話訊息載入完成後，更新 messages 狀態
+  useEffect(() => {
+    if (selectedMessages && selectedMessages.length > 0 && currentConversationId) {
+      // 將 API 回傳的訊息轉換為本地 Message 格式
+      const convertedMessages: Message[] = selectedMessages.map((msg) => ({
+        id: msg.id,
+        role: msg.role,
+        content: msg.content,
+        timestamp: new Date(msg.timestamp),
+        toolUses: msg.toolUses?.map((tu) => ({
+          toolId: tu.id,
+          toolName: tu.name,
+          toolInput: tu.input,
+          toolOutput: tu.output,
+        })),
+      }));
+
+      setMessages(convertedMessages);
+      log(`🗂️ Loaded ${convertedMessages.length} messages from conversation ${currentConversationId}`);
+
+      // 同時更新 localStorage
+      if (user) {
+        saveMessages(user.uid, convertedMessages);
+      }
+    }
+  }, [selectedMessages, currentConversationId, user]);
+
+  const handleSignOut = async () => {
+    // 登出前清除所有使用者資料
+    if (user) {
+      clearAllUserData(user.uid);
+      log('🗑️  Cleared all user data before sign out');
+    }
+
+    // 執行 Firebase 登出
+    await signOut();
+  };
+
+  const handleCopyAllMessages = async () => {
+    if (messages.length === 0) return;
+
+    try {
+      await copyAllMessages(messages);
+      setIsCopiedAll(true);
+      setTimeout(() => setIsCopiedAll(false), 2000);
+      console.log('✅ All messages copied to clipboard (plain text + HTML)');
+    } catch (error) {
+      console.error('❌ Copy all failed:', error);
+    }
+  };
+
+  const handleShareToEmail = async () => {
+    if (messages.length === 0) {
+      toast({
+        title: "無對話記錄",
+        description: "目前沒有對話可以分享",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!user) {
+      toast({
+        title: "請先登入",
+        description: "需要登入才能使用 Email 分享功能",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSharingEmail(true);
+
+    try {
+      // 取得 Firebase Auth Token
+      const token = await user.getIdToken();
+
+      // 準備 API 請求資料
+      const apiUrl = getApiUrl();
+      const response = await fetch(`${apiUrl}/api/share-conversation`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          messages: messages.map(msg => ({
+            role: msg.role,
+            content: msg.content,
+          })),
+          title: `波特人對話記錄 - ${new Date().toLocaleDateString('zh-TW')}`,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || '發送失敗');
+      }
+
+      // 成功 - 0.8 秒後自動消失
+      toast({
+        title: "📧 Email 已發送",
+        description: `對話記錄已發送到您的信箱 (${user.email})`,
+        duration: 800,
+      });
+
+      log('✅ Conversation shared to email successfully', { email: user.email });
+    } catch (error) {
+      console.error('❌ Share to email failed:', error);
+      toast({
+        title: "發送失敗",
+        description: error instanceof Error ? error.message : '無法發送 Email，請稍後再試',
+        variant: "destructive",
+      });
+    } finally {
+      setIsSharingEmail(false);
+    }
+  };
+
+  const handleOpenUrl = async (url: string, logPrefix: string) => {
+    log(`${logPrefix} Opening: ${url}`);
+
+    try {
+      // 判斷是否為 native 平台（iOS/Android）
+      const isNative = (window as any).Capacitor?.isNativePlatform?.() || false;
+
+      if (isNative) {
+        // Native 環境：使用 _system 在外部瀏覽器開啟
+        // Capacitor 的 WebView 會自動處理 _system target
+        window.open(url, '_system');
+        log("✅ Opened URL in external browser (Native)");
+      } else {
+        // 網頁環境：在新分頁開啟
+        window.open(url, '_blank');
+        log("✅ Opened URL in new tab (Web)");
+      }
+    } catch (error) {
+      log(`❌ Error opening URL:`, error);
+      console.error("Error opening URL:", error);
+    }
+  };
+
+  const handleFeatures = async () => {
+    await handleOpenUrl('https://app.botrun.ai/intro/', '✨');
+  };
+
+  const handleAbout = async () => {
+    await handleOpenUrl('https://app.botrun.ai/intro/index.html#contact', 'ℹ️');
+  };
+
+  const handleDeleteAccount = async () => {
+    await handleOpenUrl('https://app.botrun.ai/delete-account/', '🗑️');
+  };
+
+  const handleSendMessage = async (content: string) => {
+    if (!content.trim()) return;
+
+    const requestId = `req-${Date.now()}`;
+    log(`📤 [${requestId}] Sending message:`, { content, sessionId });
+
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      role: "user",
+      content,
+      timestamp: new Date(),
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setIsLoading(true);
+
+    // ✨ 自動重試機制：最多重試 1 次，使用者無需知道重試過程
+    const MAX_RETRIES = 1;
+    let lastError: Error | null = null;
+
+    for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+      // 重試時記錄 log（使用者看不到）
+      if (attempt > 0) {
+        log(`🔄 [${requestId}] Auto-retry attempt ${attempt}/${MAX_RETRIES}...`);
+        console.warn(`🔄 [${requestId}] Auto-retrying after transient error:`, lastError?.message);
+      }
+
+      try {
+        const assistantMessageId = `assistant-${Date.now()}`;
+        const assistantMessage: Message = {
+          id: assistantMessageId,
+          role: "assistant",
+          content: "",
+          timestamp: new Date(),
+        };
+
+        // 重試時需要先移除上一次失敗的空 assistant message
+        if (attempt > 0) {
+          setMessages((prev) => {
+            // 移除最後一個空的 assistant message（如果有的話）
+            const lastMsg = prev[prev.length - 1];
+            if (lastMsg && lastMsg.role === 'assistant' && !lastMsg.content) {
+              return [...prev.slice(0, -1), assistantMessage];
+            }
+            return [...prev, assistantMessage];
+          });
+        } else {
+          setMessages((prev) => [...prev, assistantMessage]);
+        }
+        setStreamingMessageId(assistantMessageId); // 開始串流
+
+        // Create new AbortController for this request
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+
+        log(`📡 [${requestId}] Making API request to ${API_URL}/api/chat (attempt ${attempt + 1}/${MAX_RETRIES + 1})`);
+
+        // ✨ 檢查 URL 參數 ?local=true（LM Studio 物理隔離模式）
+        const searchParams = new URLSearchParams(window.location.search);
+        const useLMStudio = searchParams.get('local') === 'true';
+
+        // Get Firebase ID token for authentication
+        // 🔧 物理隔離模式：使用假 token，不需要網路
+        let idToken: string;
+        if (useLMStudio) {
+          idToken = 'local-mode-no-auth-needed';
+          log(`🔧 [${requestId}] Physical isolation mode - using fake token (no network required)`);
+        } else {
+          if (!user) {
+            throw new Error("User not authenticated");
+          }
+          idToken = await user.getIdToken();
+          log(`🔐 [${requestId}] ID Token obtained, length: ${idToken?.length || 0}`);
+        }
+
+        // Debug: 顯示當前 URL 和模式
+        log(`🔍 [${requestId}] URL: ${window.location.href}`);
+        log(`🔍 [${requestId}] URL params:`, Object.fromEntries(searchParams.entries()));
+
+        if (useLMStudio) {
+          log(`🔧 [${requestId}] ✅ LM Studio mode enabled (URL: ?local=true)`);
+        } else {
+          log(`🤖 [${requestId}] ✅ Claude Agent SDK mode (default)`);
+        }
+
+        const response = await fetch(`${API_URL}/api/chat`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${idToken}`,
+          },
+          body: JSON.stringify({
+            message: content,
+            sessionId,
+            useLMStudio, // ✨ 傳遞給後端
+            claudeModel, // 🧠 使用者選擇的 Claude 模型
+          }),
+          signal: abortController.signal,
+        });
+
+        log(`✅ [${requestId}] Response received, status: ${response.status}`);
+
+        // Handle Rate Limit Error (429) - 不重試，直接顯示錯誤
+        if (response.status === 429) {
+          const errorData = await response.json();
+          log(`⚠️  [${requestId}] Rate limit exceeded:`, errorData);
+
+          // 直接使用後端提供的完整錯誤訊息（包含所有詳細資訊和升級方案）
+          const errorMessage = errorData.message || '請求過於頻繁，請稍後再試';
+
+          // 在聊天中顯示錯誤訊息
+          const errorMessageObj: Message = {
+            id: `error-${Date.now()}`,
+            role: "assistant",
+            content: errorMessage,  // 直接使用後端組合好的完整訊息
+            timestamp: new Date(),
+          };
+
+          setMessages((prev) => [...prev.slice(0, -1), errorMessageObj]); // 移除空的 assistant message
+          setIsLoading(false);
+          setStreamingMessageId(null);
+          return; // 429 錯誤不重試
+        }
+
+        if (!response.ok) {
+          log(`❌ [${requestId}] HTTP error! status: ${response.status}`);
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+
+        if (!reader) {
+          log(`❌ [${requestId}] No reader available`);
+          throw new Error("No reader available");
+        }
+
+        log(`🔄 [${requestId}] Starting to read SSE stream...`);
+
+        let buffer = "";
+        let assistantContent = "";
+        let eventCount = 0;
+        let textChunkCount = 0;
+
+        while (true) {
+          const { done, value } = await reader.read();
+
+          if (done) {
+            // Removed: log(`🏁 [${requestId}] Stream finished - Events: ${eventCount}, Text chunks: ${textChunkCount}, Total chars: ${assistantContent.length}`);
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              eventCount++;
+              try {
+                const data = JSON.parse(line.slice(6));
+
+                if (data.sessionId) {
+                  log(`🆔 [${requestId}] Got session ID: ${data.sessionId}`);
+                  setSessionId(data.sessionId);
+                }
+
+                if (data.text) {
+                  assistantContent += data.text;
+                  textChunkCount++;
+                  setMessages((prev) =>
+                    prev.map((msg) =>
+                      msg.id === assistantMessageId
+                        ? { ...msg, content: assistantContent }
+                        : msg
+                    )
+                  );
+                }
+
+                if (data.toolName && data.toolId) {
+                  log(`🔧 [${requestId}] Tool usage: ${data.toolName} (${data.toolId})`);
+                  setMessages((prev) =>
+                    prev.map((msg) =>
+                      msg.id === assistantMessageId
+                        ? {
+                            ...msg,
+                            toolUses: [
+                              ...(msg.toolUses || []),
+                              {
+                                toolId: data.toolId,
+                                toolName: data.toolName,
+                                toolInput: data.toolInput,
+                              },
+                            ],
+                          }
+                        : msg
+                    )
+                  );
+                }
+
+                if (data.toolOutput !== undefined && data.toolId) {
+                  log(`📤 [${requestId}] Tool output received for ${data.toolId}`);
+                  setMessages((prev) =>
+                    prev.map((msg) =>
+                      msg.id === assistantMessageId && msg.toolUses
+                        ? {
+                            ...msg,
+                            toolUses: msg.toolUses.map((tu) =>
+                              tu.toolId === data.toolId
+                                ? { ...tu, toolOutput: data.toolOutput, isError: data.isError }
+                                : tu
+                            ),
+                          }
+                        : msg
+                    )
+                  );
+                }
+
+                if (data.token && data.fileName) {
+                  log(`📥 [${requestId}] Download ready: ${data.fileName}`);
+                  setMessages((prev) =>
+                    prev.map((msg) =>
+                      msg.id === assistantMessageId
+                        ? {
+                            ...msg,
+                            downloadToken: data.token,
+                            downloadFileName: data.fileName,
+                          }
+                        : msg
+                    )
+                  );
+                }
+
+                if (data.success) {
+                  log(`✅ [${requestId}] Conversation completed`);
+                }
+
+                if (data.error) {
+                  log(`❌ [${requestId}] Error: ${data.error}`);
+                }
+
+                // 🔍 Handle debug info from backend (removed to reduce console noise)
+                // if (data.type === 'debug') {
+                //   console.log(`🔍 [Backend Debug] ${data.message}`, data.details);
+                // }
+              } catch (e) {
+                log(`❌ [${requestId}] Error parsing SSE data:`, e);
+                console.error("Error parsing SSE data:", e);
+              }
+            }
+          }
+        }
+
+        // ✅ 成功完成，執行 cleanup 並結束
+        if (attempt > 0) {
+          log(`✅ [${requestId}] Auto-retry succeeded on attempt ${attempt + 1}`);
+        }
+        setIsLoading(false);
+        setIsStopping(false);
+        setStreamingMessageId(null);
+        abortControllerRef.current = null;
+        return; // 成功，結束函數
+
+      } catch (error) {
+        // Check if error is due to abort - 不重試
+        if (error instanceof Error && error.name === 'AbortError') {
+          log(`⏹️ [${requestId}] Request was stopped by user`);
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: `info-${Date.now()}`,
+              role: "assistant",
+              content: "⏹️ Response was stopped by user.",
+              timestamp: new Date(),
+            },
+          ]);
+          setIsLoading(false);
+          setIsStopping(false);
+          setStreamingMessageId(null);
+          abortControllerRef.current = null;
+          return; // AbortError 不重試
+        }
+
+        // 記錄錯誤（供開發者除錯）
+        log(`❌ [${requestId}] Error on attempt ${attempt + 1}/${MAX_RETRIES + 1}:`, error);
+        if (error instanceof Error) {
+          console.error(`❌ [${requestId}] Error name:`, error.name);
+          console.error(`❌ [${requestId}] Error message:`, error.message);
+        }
+
+        lastError = error instanceof Error ? error : new Error(String(error));
+
+        // 如果還有重試次數，繼續迴圈（不顯示錯誤給使用者）
+        if (attempt < MAX_RETRIES) {
+          log(`🔄 [${requestId}] Will retry... (${MAX_RETRIES - attempt} attempts remaining)`);
+          // 短暫延遲後重試（避免立即重試）
+          await new Promise(resolve => setTimeout(resolve, 500));
+          continue;
+        }
+
+        // 所有重試都失敗了，顯示錯誤給使用者
+        log(`❌ [${requestId}] All retry attempts exhausted. Showing error to user.`);
+        console.error("❌ [ChatPage] Full error after all retries:", lastError);
+        if (lastError) {
+          console.error('❌ Error stack:', lastError.stack);
+        }
+
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `error-${Date.now()}`,
+            role: "assistant",
+            content: "連線出現問題，請聯絡客服夥伴",
+            timestamp: new Date(),
+          },
+        ]);
+      }
+    }
+
+    // finally 邏輯移到這裡（確保無論成功或失敗都會執行）
+    setIsLoading(false);
+    setIsStopping(false);
+    setStreamingMessageId(null); // 結束串流
+    abortControllerRef.current = null;
+  };
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex w-full flex-col bg-background"
+      style={isCapacitor ? {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: '100vh',
+        overflow: 'hidden'
+      } : {
+        height: '100dvh',
+        minHeight: '-webkit-fill-available'
+      }}
+    >
+      {/* Capacitor App: Status Bar 背景遮蔽 - 解決 Android 13+ setBackgroundColor 失效問題 */}
+      {isCapacitor && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 'var(--safe-area-inset-top)',
+            backgroundColor: '#F0EBE3', // 榻榻米色
+            zIndex: 40, // 低於選單按鈕 (z-50)，高於內容
+            pointerEvents: 'none', // 讓點擊事件穿透，不擋到按鈕
+          }}
+        />
+      )}
+
+      {/* Floating Dots Menu */}
+      <DropdownMenu onOpenChange={(open) => {
+        if (open) {
+          // 🔴 開啟選單時，標記使用者已看過更新通知
+          if (updateAvailable && !hasSeenUpdateNotification) {
+            console.log('👁️ [ChatPage] Menu opened, marking update as seen');
+            markUpdateAsSeen();
+          }
+
+          // 🎯 重新查詢使用者方案（帶 3 分鐘快取）
+          refetchUserPlan();
+        }
+      }}>
+        <DropdownMenuTrigger asChild>
+          <div className="fixed right-4 z-50" style={{
+            top: isCapacitor
+              ? 'calc(var(--safe-area-inset-top) + 1rem)'
+              : '1rem'
+          }}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-10 w-10 rounded-full bg-background/80 backdrop-blur-sm shadow-md hover:bg-background/95 relative"
+            >
+              <MoreVertical className="h-5 w-5" />
+              {/* 🔴 紅點提示：有新版本且尚未查看 */}
+              {updateAvailable && !hasSeenUpdateNotification && (
+                <span className="absolute top-0 right-0 h-3 w-3 rounded-full bg-red-500 border-2 border-background" />
+              )}
+              <span className="sr-only">More options</span>
+            </Button>
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[min(90vw,384px)] max-h-[80vh] overflow-y-auto">
+          {/* 使用者資訊區塊 */}
+          <div className="flex items-center gap-3 px-2 py-3">
+            {/* 使用者頭像 */}
+            <div className="flex-shrink-0">
+              {user?.photoURL ? (
+                <Image
+                  src={user.photoURL}
+                  alt={user.displayName || 'User'}
+                  width={40}
+                  height={40}
+                  className="rounded-full"
+                />
+              ) : (
+                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
+                  <User className="h-5 w-5 text-muted-foreground" />
+                </div>
+              )}
+            </div>
+
+            {/* 使用者名稱和 Email */}
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {user?.displayName || user?.email?.split('@')[0] || '使用者'}
+                {/* 🎯 顯示方案名稱（如果有） */}
+                {planName && <span className="text-muted-foreground font-normal"> ({planName})</span>}
+              </p>
+              {user?.email && (
+                <p className="text-xs text-muted-foreground truncate">
+                  {user.email}
+                </p>
+              )}
+            </div>
+          </div>
+          <DropdownMenuSeparator />
+
+          {/* 1️⃣ 對話 */}
+          <Collapsible
+            open={menuSections.chat}
+            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, chat: open }))}
+          >
+            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
+              <span className="font-medium">對話</span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.chat ? 'rotate-180' : ''}`} />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pl-2">
+              <DropdownMenuItem onClick={handleNewChat} className="cursor-pointer gap-2">
+                <MessageSquarePlus className="h-4 w-4" />
+                <span>新對話</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  refetchConversations();
+                  setIsConversationListOpen(true);
+                }}
+                className="cursor-pointer gap-2"
+              >
+                <History className="h-4 w-4" />
+                <span>歷史對話</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={handleShareToEmail}
+                className="cursor-pointer gap-2"
+                disabled={isSharingEmail || messages.length === 0}
+              >
+                <Mail className="h-4 w-4" />
+                <span>{isSharingEmail ? '發送中...' : '分享 Email'}</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={handleCopyAllMessages}
+                className="cursor-pointer gap-2"
+                disabled={messages.length === 0}
+              >
+                {isCopiedAll ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+                <span>{isCopiedAll ? '已複製' : '複製對話'}</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleOpenClearFilesDialog} className="cursor-pointer gap-2">
+                <Trash2 className="h-4 w-4" />
+                <span>清除檔案</span>
+              </DropdownMenuItem>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* 2️⃣ 孵化器 */}
+          <Collapsible
+            open={menuSections.incubator}
+            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, incubator: open }))}
+          >
+            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
+              <span className="font-medium">孵化器</span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.incubator ? 'rotate-180' : ''}`} />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pl-2">
+              <DropdownMenuItem onClick={() => setIsIncubatorOpen(true)} className="cursor-pointer gap-2">
+                <Sparkles className="h-4 w-4" />
+                <span>指揮家</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setIsSkillsDrawerOpen(true)} className="cursor-pointer gap-2">
+                <Hammer className="h-4 w-4" />
+                <span>技能</span>
+              </DropdownMenuItem>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* 3️⃣ GDrive */}
+          <Collapsible
+            open={menuSections.gdrive}
+            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, gdrive: open }))}
+          >
+            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
+              <div className="flex items-center gap-2">
+                <span className="font-medium">GDrive</span>
+                {gdriveFolders.length > 0 && (
+                  <span className="text-xs text-muted-foreground">{gdriveFolders.length} 個</span>
+                )}
+              </div>
+              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.gdrive ? 'rotate-180' : ''}`} />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pl-2">
+              {/* 資料夾列表 */}
+              {isGdriveFoldersLoading ? (
+                <div className="px-2 py-2 text-xs text-muted-foreground">載入中...</div>
+              ) : gdriveFolders.length === 0 ? (
+                <div className="px-2 py-2 text-xs text-muted-foreground">尚無資料夾</div>
+              ) : (
+                gdriveFolders.slice(0, 3).map((folder) => (
+                  <DropdownMenuItem
+                    key={folder.id}
+                    onClick={() => toggleGdriveSelect(folder.id)}
+                    className="cursor-pointer gap-2"
+                  >
+                    <div className={`w-3 h-3 rounded border flex items-center justify-center ${
+                      folder.selected ? 'bg-primary border-primary' : 'border-input'
+                    }`}>
+                      {folder.selected && <Check className="h-2 w-2 text-primary-foreground" />}
+                    </div>
+                    <span className="truncate flex-1">{folder.alias}</span>
+                  </DropdownMenuItem>
+                ))
+              )}
+              {gdriveFolders.length > 3 && (
+                <div className="px-2 py-1 text-xs text-muted-foreground">
+                  +{gdriveFolders.length - 3} 個資料夾
+                </div>
+              )}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={async () => {
+                  try {
+                    await syncAllGdrive();
+                    await refetchGdriveFolders();
+                    toast({ title: "同步完成" });
+                  } catch (err: any) {
+                    toast({ title: "同步失敗", description: err.message, variant: "destructive" });
+                  }
+                }}
+                className="cursor-pointer gap-2"
+                disabled={isGdriveSyncing || gdriveFolders.length === 0}
+              >
+                <RefreshCw className={`h-4 w-4 ${isGdriveSyncing ? 'animate-spin' : ''}`} />
+                <span>{isGdriveSyncing ? '同步中...' : '同步全部'}</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setIsGdriveAddDialogOpen(true)}
+                className="cursor-pointer gap-2"
+              >
+                <Plus className="h-4 w-4" />
+                <span>新增資料夾</span>
+              </DropdownMenuItem>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* 4️⃣ GitHub */}
+          <Collapsible
+            open={menuSections.github}
+            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, github: open }))}
+          >
+            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
+              <div className="flex items-center gap-2">
+                <span className="font-medium">GitHub</span>
+                {isGitHubConnected && connectedRepos.length > 0 && (
+                  <span className="text-xs text-muted-foreground">{connectedRepos.length} 個</span>
+                )}
+              </div>
+              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.github ? 'rotate-180' : ''}`} />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pl-2">
+              {isGitHubLoading ? (
+                <div className="px-2 py-2 text-xs text-muted-foreground">載入中...</div>
+              ) : !isGitHubConnected ? (
+                <DropdownMenuItem
+                  onClick={() => connectGitHub()}
+                  className="cursor-pointer gap-2"
+                >
+                  <Link2 className="h-4 w-4" />
+                  <span>連結 GitHub</span>
+                </DropdownMenuItem>
+              ) : (
+                <>
+                  {/* 已下載的 Repo 列表（點擊同步，右側可刪除） */}
+                  {connectedRepos.length > 0 && (
+                    <>
+                      <div className="px-2 py-1 text-xs text-muted-foreground font-medium">已下載</div>
+                      {connectedRepos.slice(0, 3).map((repo) => {
+                        const isSyncing = syncingRepoName === repo.repoFullName;
+                        const isDeleting = deletingRepoName === repo.repoFullName;
+                        const isBusy = syncingRepoName !== null || deletingRepoName !== null;
+                        return (
+                          <div key={repo.id} className="flex items-center gap-1 px-2 py-1.5 text-sm hover:bg-accent rounded-sm group">
+                            <button
+                              onClick={async () => {
+                                try {
+                                  setSyncingRepoName(repo.repoFullName);
+                                  await syncGitHubRepo(repo.repoFullName);
+                                  toast({ title: "同步完成", description: `${repo.repoFullName} 已更新至最新版本` });
+                                } catch (err: any) {
+                                  toast({ title: "同步失敗", description: err.message, variant: "destructive" });
+                                } finally {
+                                  setSyncingRepoName(null);
+                                }
+                              }}
+                              className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer disabled:opacity-50"
+                              disabled={isBusy}
+                              title="點擊同步最新版本"
+                            >
+                              {isSyncing || repo.status === 'syncing' ? (
+                                <RefreshCw className="h-4 w-4 shrink-0 animate-spin text-blue-500" />
+                              ) : repo.status === 'error' ? (
+                                <AlertCircle className="h-4 w-4 shrink-0 text-destructive" />
+                              ) : (
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-600" />
+                              )}
+                              <span className="truncate">{repo.repoFullName}</span>
+                              {(isSyncing || repo.status === 'syncing') && <span className="text-xs text-blue-500 shrink-0">同步中</span>}
+                              {repo.status === 'error' && !isSyncing && <span className="text-xs text-destructive shrink-0">錯誤</span>}
+                            </button>
+                            <button
+                              onClick={async (e) => {
+                                e.stopPropagation();
+                                if (!confirm(`確定要移除 ${repo.repoFullName} 嗎？\n\n這會刪除本地下載的檔案，但不會影響 GitHub 上的原始倉庫。`)) return;
+                                try {
+                                  setDeletingRepoName(repo.repoFullName);
+                                  await deleteGitHubRepo(repo.repoFullName);
+                                  toast({ title: "已移除", description: `${repo.repoFullName} 已從本地刪除` });
+                                } catch (err: any) {
+                                  toast({ title: "移除失敗", description: err.message, variant: "destructive" });
+                                } finally {
+                                  setDeletingRepoName(null);
+                                }
+                              }}
+                              className="p-1 opacity-0 group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive rounded transition-opacity disabled:opacity-50"
+                              disabled={isBusy}
+                              title="移除此 Repository"
+                            >
+                              {isDeleting ? <RefreshCw className="h-3.5 w-3.5 animate-spin" /> : <X className="h-3.5 w-3.5" />}
+                            </button>
+                          </div>
+                        );
+                      })}
+                      {connectedRepos.length > 3 && (
+                        <div className="px-2 py-1 text-xs text-muted-foreground">
+                          +{connectedRepos.length - 3} 個 Repo
+                        </div>
+                      )}
+                    </>
+                  )}
+
+                  {/* 尚未下載的 Repo 列表（點擊下載） */}
+                  {availableRepos.length > 0 && (
+                    <>
+                      {connectedRepos.length > 0 && <DropdownMenuSeparator />}
+                      <div className="px-2 py-1 text-xs text-muted-foreground font-medium">尚未下載 ({availableRepos.length})</div>
+                      {availableRepos.slice(0, 3).map((repo) => {
+                        const isCloning = cloningRepoName === repo.fullName;
+                        const isBusy = cloningRepoName !== null;
+                        return (
+                          <DropdownMenuItem
+                            key={repo.id}
+                            onClick={async () => {
+                              try {
+                                setCloningRepoName(repo.fullName);
+                                toast({ title: "下載中...", description: `正在下載 ${repo.fullName}` });
+                                await cloneGitHubRepo(repo.fullName);
+                                toast({ title: "下載完成", description: `${repo.fullName} 已可在對話中使用` });
+                              } catch (err: any) {
+                                toast({ title: "下載失敗", description: err.message, variant: "destructive" });
+                              } finally {
+                                setCloningRepoName(null);
+                              }
+                            }}
+                            className="cursor-pointer gap-2"
+                            disabled={isBusy}
+                          >
+                            {isCloning ? (
+                              <RefreshCw className="h-4 w-4 animate-spin text-blue-500" />
+                            ) : (
+                              <Download className="h-4 w-4 text-muted-foreground" />
+                            )}
+                            <span className="truncate flex-1">{repo.fullName}</span>
+                          </DropdownMenuItem>
+                        );
+                      })}
+                      {availableRepos.length > 3 && (
+                        <DropdownMenuItem
+                          onClick={() => setShowGitHubReposModal(true)}
+                          className="cursor-pointer gap-2 text-primary"
+                        >
+                          <FolderGit2 className="h-4 w-4" />
+                          <span>查看全部 {availableRepos.length} 個</span>
+                        </DropdownMenuItem>
+                      )}
+                    </>
+                  )}
+
+                  {/* 無任何 Repo 時顯示 */}
+                  {connectedRepos.length === 0 && availableRepos.length === 0 && (
+                    <div className="px-2 py-2 text-xs text-muted-foreground">尚無 Repository</div>
+                  )}
+
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => connectGitHub()}
+                    className="cursor-pointer gap-2"
+                  >
+                    <Plus className="h-4 w-4" />
+                    <span>新增 Repository</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => disconnectGitHub()}
+                    className="cursor-pointer gap-2 text-destructive focus:text-destructive"
+                  >
+                    <Unlink className="h-4 w-4" />
+                    <span>中斷連結</span>
+                  </DropdownMenuItem>
+                </>
+              )}
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* 5️⃣ AI 模型 */}
+          <Collapsible
+            open={menuSections.model}
+            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, model: open }))}
+          >
+            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
+              <div className="flex items-center gap-2">
+                <span className="font-medium">AI 模型</span>
+                <span className="text-xs text-muted-foreground">{getModelInfo()?.name}</span>
+              </div>
+              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.model ? 'rotate-180' : ''}`} />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="px-2 pb-2">
+              <div className="flex gap-1">
+                {claudeModels.map((model) => (
+                  <button
+                    key={model.id}
+                    onClick={() => setClaudeModel(model.id)}
+                    className={`flex-1 px-2 py-1.5 text-xs rounded-md transition-colors ${
+                      claudeModel === model.id
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted hover:bg-muted/80'
+                    }`}
+                    title={model.description}
+                  >
+                    {model.name}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                {getModelInfo()?.description}
+              </p>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* 5️⃣ 關於 */}
+          <Collapsible
+            open={menuSections.about}
+            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, about: open }))}
+          >
+            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
+              <span className="font-medium">關於</span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.about ? 'rotate-180' : ''}`} />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pl-2">
+              <DropdownMenuItem onClick={handleFeatures} className="cursor-pointer gap-2">
+                <Star className="h-4 w-4" />
+                <span>特色介紹</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleAbout} className="cursor-pointer gap-2">
+                <Info className="h-4 w-4" />
+                <span>聯絡我們</span>
+              </DropdownMenuItem>
+              {/* 版本更新 - 僅在有新版本時顯示 */}
+              {updateAvailable && (
+                <DropdownMenuItem
+                  onClick={async () => { await openAppStore(); }}
+                  className="cursor-pointer gap-2 text-blue-600 dark:text-blue-400"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                  <span>{latestVersion ? `更新 v${latestVersion}` : '版本更新'}</span>
+                </DropdownMenuItem>
+              )}
+            </CollapsibleContent>
+          </Collapsible>
+
+          <DropdownMenuSeparator />
+
+          {/* 刪除帳號 - 僅在 iOS/Android App 中顯示 */}
+          {isCapacitor && (
+            <DropdownMenuItem onClick={handleDeleteAccount} className="cursor-pointer gap-2 text-destructive focus:text-destructive">
+              <UserX className="h-4 w-4" />
+              <span>刪除帳號</span>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer gap-2">
+            <LogOut className="h-4 w-4" />
+            <span>登出</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ScrollArea
+        ref={scrollAreaRef}
+        className="flex-1"
+        onScroll={handleScroll}
+        style={{
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          // Capacitor App: 確保內容從 status bar 下方開始
+          ...(isCapacitor && {
+            paddingTop: 'var(--safe-area-inset-top)'
+          })
+        }}
+      >
+        <div className="mx-auto w-full max-w-6xl px-4 md:px-6" style={{
+          paddingTop: isCapacitor ? '1rem' : 'calc(var(--safe-area-inset-top) + 1rem)',
+          paddingBottom: isCapacitor ? '160px' : '120px' // 預留輸入框高度空間
+        }}>
+          {/* 自動顯示歡迎訊息（僅在初次對話前） */}
+          {shouldShowWelcome && messages.length === 0 && (
+            <ChatMessage
+              key={welcomeMessage.id}
+              message={welcomeMessage}
+              onSendMessage={handleSendMessage}
+              isStreaming={false}
+            />
+          )}
+
+          {/* 一般對話訊息 */}
+          {messages.map((message, index) => (
+            <ChatMessage
+              key={message.id}
+              message={message}
+              onSendMessage={handleSendMessage}
+              isStreaming={message.id === streamingMessageId}
+              previousMessage={index > 0 ? messages[index - 1] : undefined}
+            />
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+      </ScrollArea>
+
+      {/* 浮動「回到底部」按鈕 */}
+      <ScrollToBottomButton
+        visible={!isAtBottom}
+        onClick={scrollToBottom}
+      />
+      <div className="border-t flex-shrink-0 bg-background" style={{
+        paddingBottom: isCapacitor
+          ? isAndroid
+            ? 'max(var(--safe-area-inset-bottom), var(--android-nav-bar-height))'  // Android: 確保至少 48px
+            : 'var(--safe-area-inset-bottom)'  // iOS: 使用系統提供的 safe area
+          : 'var(--safe-area-inset-bottom)'
+      }}>
+        <div className="mx-auto w-full max-w-6xl px-4 md:px-6">
+          <ChatInput
+            onSend={handleSendMessage}
+            onStop={handleStopResponse}
+            disabled={isLoading}
+            isLoading={isLoading}
+            isStopping={isStopping}
+            placeholder=""
+            transcriptionModel={transcriptionModel}
+          />
+        </div>
+      </div>
+
+      {/* 指揮家孵化器 Modal */}
+      <BotrunIncubator
+        open={isIncubatorOpen}
+        onOpenChange={setIsIncubatorOpen}
+        onNewChat={handleNewChat}
+      />
+
+      {/* 技能孵化器 Drawer */}
+      <SkillsManagerDrawer
+        open={isSkillsDrawerOpen}
+        onOpenChange={setIsSkillsDrawerOpen}
+        onEdit={handleEditSkill}
+        onCreate={handleCreateSkill}
+        onSkillsChange={handleSkillsChange}
+      />
+
+      {/* 技能編輯器 */}
+      <SkillsEditor
+        open={skillsEditorOpen}
+        onOpenChange={setSkillsEditorOpen}
+        skill={skillToEdit}
+        onSaved={handleSkillsChange}
+      />
+
+      {/* Google Drive 新增資料夾對話框 */}
+      <GdriveAddDialog
+        open={isGdriveAddDialogOpen}
+        onOpenChange={setIsGdriveAddDialogOpen}
+        onAdd={async (url, alias, type) => {
+          try {
+            await addGdriveFolder(url, alias, type);
+            toast({ title: "資料夾已新增", description: "請點擊同步按鈕開始下載" });
+            setIsGdriveAddDialogOpen(false);
+          } catch (err: any) {
+            toast({ title: "新增失敗", description: err.message, variant: "destructive" });
+          }
+        }}
+        history={gdriveHistory}
+      />
+
+      {/* GitHub Repos Modal */}
+      {showGitHubReposModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* 背景遮罩 */}
+          <div
+            className="fixed inset-0 bg-black/50"
+            onClick={() => setShowGitHubReposModal(false)}
+          />
+          {/* Modal 內容 */}
+          <div className="relative z-50 w-full max-w-md mx-4 bg-background rounded-lg shadow-lg border max-h-[80vh] flex flex-col">
+            {/* 標題列 */}
+            <div className="flex items-center justify-between p-4 border-b">
+              <div className="flex items-center gap-2">
+                <FolderGit2 className="h-5 w-5" />
+                <h2 className="text-lg font-semibold">GitHub Repositories</h2>
+              </div>
+              <button
+                onClick={() => setShowGitHubReposModal(false)}
+                className="p-1 rounded-md hover:bg-accent"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            {/* 搜尋框 */}
+            <div className="p-3 border-b">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <input
+                  type="text"
+                  placeholder="搜尋 Repository..."
+                  className="w-full pl-9 pr-4 py-2 text-sm border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+                  id="github-repos-search"
+                  onChange={(e) => {
+                    const searchValue = e.target.value.toLowerCase();
+                    const items = document.querySelectorAll('[data-github-repo]');
+                    items.forEach((item) => {
+                      const repoName = item.getAttribute('data-github-repo')?.toLowerCase() || '';
+                      (item as HTMLElement).style.display = repoName.includes(searchValue) ? 'flex' : 'none';
+                    });
+                  }}
+                />
+              </div>
+            </div>
+            {/* Repo 列表 */}
+            <div className="flex-1 overflow-y-auto p-2">
+              {availableRepos.map((repo) => (
+                <button
+                  key={repo.id}
+                  data-github-repo={repo.fullName}
+                  onClick={async () => {
+                    try {
+                      setIsGitHubCloning(true);
+                      await cloneGitHubRepo(repo.fullName);
+                      toast({ title: `已 Clone ${repo.fullName}` });
+                      setShowGitHubReposModal(false);
+                    } catch (err: any) {
+                      toast({ title: "Clone 失敗", description: err.message, variant: "destructive" });
+                    } finally {
+                      setIsGitHubCloning(false);
+                    }
+                  }}
+                  disabled={isGitHubCloning}
+                  className="flex items-center gap-3 w-full p-3 rounded-md hover:bg-accent text-left disabled:opacity-50"
+                >
+                  <Github className="h-4 w-4 flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">{repo.name}</div>
+                    <div className="text-xs text-muted-foreground truncate">{repo.fullName}</div>
+                  </div>
+                  <Plus className="h-4 w-4 flex-shrink-0 text-primary" />
+                </button>
+              ))}
+            </div>
+            {/* 底部資訊 */}
+            <div className="p-3 border-t text-xs text-muted-foreground text-center">
+              共 {availableRepos.length} 個可連結的 Repository
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 歷史對話列表 */}
+      <ConversationList
+        open={isConversationListOpen}
+        onOpenChange={setIsConversationListOpen}
+        conversations={conversations}
+        currentConversationId={currentConversationId}
+        isLoading={isConversationsLoading}
+        error={conversationsError}
+        onSelect={handleSelectConversation}
+        onNewChat={handleNewChat}
+        onUpdateTitle={updateConversationTitle}
+        onDelete={deleteConversation}
+      />
+
+      {/* 清除檔案確認對話框 */}
+      <AlertDialog open={clearFilesDialogOpen} onOpenChange={setClearFilesDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>清除上傳檔案</AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div>
+                {isLoadingStats ? (
+                  <span>載入中...</span>
+                ) : fileStats ? (
+                  <div className="space-y-2">
+                    <p>即將清除以下檔案，此操作無法復原：</p>
+                    <ul className="list-disc list-inside text-sm space-y-1 ml-2">
+                      {fileStats.uploads.count > 0 && (
+                        <li>上傳檔案：{fileStats.uploads.count} 個 ({formatFileSize(fileStats.uploads.size)})</li>
+                      )}
+                      {fileStats.pdfPages.count > 0 && (
+                        <li>PDF 拆解頁面：{fileStats.pdfPages.count} 個 ({formatFileSize(fileStats.pdfPages.size)})</li>
+                      )}
+                    </ul>
+                    {fileStats.total.count > 0 ? (
+                      <p className="font-medium mt-2">
+                        總計：{fileStats.total.count} 個檔案 ({formatFileSize(fileStats.total.size)})
+                      </p>
+                    ) : (
+                      <p className="text-muted-foreground">目前沒有可清除的檔案</p>
+                    )}
+                  </div>
+                ) : (
+                  <span>無法載入檔案資訊</span>
+                )}
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isClearingFiles}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleClearFiles}
+              disabled={isClearingFiles || isLoadingStats || !fileStats || fileStats.total.count === 0}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isClearingFiles ? '清除中...' : '確認清除'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}