botrun-horse 2.31.0 → 2.35.0

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

@@ -1,1251 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, useCallback } from "react";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Send, Loader2, Paperclip, StopCircle, Mic, Square, Download, AlertCircle, RefreshCw, X, Settings, Shield, User, Camera as CameraIcon, Folder, Video, Info } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useAuth } from "@/contexts/AuthContext";
-import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
-import { SkillsManagerDrawer } from "./skills-manager-drawer";
-import { SkillsEditor } from "./skills-editor";
-import { getApiEndpoint } from "@/lib/api-url";
-import { AudioRecorder } from '@capawesome-team/capacitor-audio-recorder';
-import { SystemLimits, DEFAULT_LIMITS, formatFileSize } from "@/lib/constants";
-import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Share } from '@capacitor/share';
-import { ForegroundService } from '@capawesome-team/capacitor-android-foreground-service';
-import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
-import { uploadFile, uploadFiles } from "@/lib/upload-service";
-import { convertToLocalPath } from "@/lib/path-utils";
-import type { Skill } from "@/types/skills";
-import { useAttachments } from "@/hooks/useAttachments";
-import { AttachmentPreview } from "./attachment-preview";
-import { DropZone } from "./drop-zone";
-
-// 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 '';
-})();
-
-interface ChatInputProps {
-  onSend: (message: string) => void;
-  onStop?: () => void;
-  disabled?: boolean;
-  isLoading?: boolean;
-  isStopping?: boolean;
-  placeholder?: string;
-  transcriptionModel?: string;
-}
-
-export function ChatInput({
-  onSend,
-  onStop,
-  disabled = false,
-  isLoading = false,
-  isStopping = false,
-  placeholder = "Type your message...",
-  transcriptionModel = 'whisper-Breeze-ASR-25',
-}: ChatInputProps) {
-  const { user } = useAuth();
-  const { isCapacitor, isAndroid, isIOS } = useCapacitorPlatform();
-
-  // 🔑 判斷是否為桌面 Web（非 App + 非行動裝置 UserAgent）
-  const isDesktopWeb = !isCapacitor &&
-    typeof window !== 'undefined' &&
-    !/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-
-
-  // 🔄 測試：改回受控組件 + composition 保護
-  const [message, setMessage] = useState("");
-  const [uploading, setUploading] = useState(false);
-  const [skills, setSkills] = useState<Skill[]>([]);
-  const [systemLimits, setSystemLimits] = useState<SystemLimits>(DEFAULT_LIMITS);
-  const [isRecording, setIsRecording] = useState(false);
-  const [transcribing, setTranscribing] = useState(false);
-  const [transcriptionStatus, setTranscriptionStatus] = useState("");
-  const [recordedAudio, setRecordedAudio] = useState<Blob | null>(null);
-  const [transcriptionError, setTranscriptionError] = useState<string | null>(null);
-  const [managerDrawerOpen, setManagerDrawerOpen] = useState(false);
-  const [editorOpen, setEditorOpen] = useState(false);
-  const [skillToEdit, setSkillToEdit] = useState<Skill | null>(null);
-  const [attachmentError, setAttachmentError] = useState<string | null>(null);
-  const isComposingRef = useRef(false); // 追蹤輸入法狀態
-
-  // 統一附件系統
-  const {
-    attachments,
-    addFiles,
-    removeAttachment,
-    clearAll: clearAllAttachments,
-    retryUpload,
-    uploadAll,
-    isUploading: isUploadingAttachments,
-    hasAttachments,
-    canAddMore,
-    count: attachmentCount,
-  } = useAttachments({
-    maxCount: 20,
-    maxFileSize: systemLimits.http.maxFileSize,
-    onError: (error) => setAttachmentError(error),
-  });
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const videoInputRef = useRef<HTMLInputElement>(null); // 錄影專用
-
-  // Load system limits
-  const loadSystemLimits = async () => {
-    try {
-      const url = getApiEndpoint("/api/config/limits");
-      const response = await fetch(url);
-      if (response.ok) {
-        const limits = await response.json();
-        setSystemLimits(limits);
-        // Removed: console.log('[ChatInput] System limits loaded:', limits);
-      }
-    } catch (error) {
-      console.error('[ChatInput] Failed to load system limits, using defaults:', error);
-    }
-  };
-
-  // Load skills
-  const loadSkills = async () => {
-    const url = getApiEndpoint("/api/skills");
-    // Removed: console.log('[ChatInput] Loading skills from:', url);
-
-    try {
-      // 如果已登入，帶上認證 token
-      const headers: HeadersInit = {};
-      if (user) {
-        const idToken = await user.getIdToken();
-        headers.Authorization = `Bearer ${idToken}`;
-        // Removed: console.log('[ChatInput] Loading with auth token');
-      }
-      // Removed: else { console.log('[ChatInput] Loading without auth (guest mode)'); }
-
-      const res = await fetch(url, { headers });
-      const data = await res.json();
-      // Removed: console.log('[ChatInput] Skills loaded:', data);
-
-      if (data.success && Array.isArray(data.skills)) {
-        setSkills(data.skills);
-      }
-    } catch (error) {
-      console.error("Failed to load skills:", error);
-    }
-  };
-
-  // 當 user 狀態變化時重新載入 skills（登入/登出時）
-  useEffect(() => {
-    loadSystemLimits();
-    loadSkills();
-  }, [user]);
-
-  useEffect(() => {
-    // 只在 Web 環境下，LLM 回傳完畢後自動 focus
-    // Mobile App 不 auto-focus，避免鍵盤自動彈出干擾閱讀
-    if (!disabled && !isCapacitor) {
-      inputRef.current?.focus();
-    }
-  }, [disabled, isCapacitor]);
-
-  // 🔄 受控組件版本：自動調整高度（只在非 composition 期間）
-  useEffect(() => {
-    // 在 composition 期間不調整高度，避免干擾 IME
-    if (isComposingRef.current) return;
-
-    const textarea = inputRef.current;
-    if (!textarea) return;
-
-    // 調整高度
-    textarea.style.height = 'auto';
-    const newHeight = Math.min(textarea.scrollHeight, 200);
-    textarea.style.height = `${newHeight}px`;
-    textarea.style.overflowY = textarea.scrollHeight > 200 ? 'auto' : 'hidden';
-  }, [message]); // message 改變時調整高度
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const messageText = message.trim();
-
-    // 需要有訊息或附件才能送出
-    if (!messageText && !hasAttachments) return;
-    if (disabled) return;
-
-    // 如果有附件，需要先上傳
-    if (hasAttachments) {
-      if (!user) {
-        alert("請先登入");
-        return;
-      }
-
-      setUploading(true);
-      try {
-        const idToken = await user.getIdToken();
-        const results = await uploadAll(idToken, user.uid, 'default');
-
-        // 取得成功上傳的檔案路徑
-        const attachmentPaths = results
-          .filter(r => r.success)
-          .map(r => convertToLocalPath(r.displayPath));
-
-        // 組合最終訊息
-        const finalMessage = attachmentPaths.length > 0
-          ? `${attachmentPaths.join('\n')}\n\n${messageText}`
-          : messageText;
-
-        // 發送訊息
-        if (finalMessage.trim()) {
-          onSend(finalMessage);
-        }
-
-        // 清空
-        setMessage('');
-        clearAllAttachments();
-        setAttachmentError(null);
-
-      } catch (error) {
-        console.error('Send error:', error);
-        setAttachmentError('發送失敗，請重試');
-      } finally {
-        setUploading(false);
-      }
-    } else {
-      // 沒有附件，直接發送訊息
-      onSend(messageText);
-      setMessage('');
-    }
-  };
-
-  const handleSkillSelect = (skill: Skill) => {
-    // Send skill name directly to chat
-    onSend(skill.name);
-  };
-
-  // 開啟編輯器（編輯模式）
-  const handleEditSkill = (skill: Skill) => {
-    setSkillToEdit(skill);
-    setManagerDrawerOpen(false);
-    setEditorOpen(true);
-  };
-
-  // 開啟編輯器（新增模式）
-  const handleCreateSkill = () => {
-    setSkillToEdit(null);
-    setManagerDrawerOpen(false);
-    setEditorOpen(true);
-  };
-
-  // Skills 變更後重新載入
-  const handleSkillsChange = () => {
-    loadSkills();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    // 忽略輸入法組合中的 Enter
-    if (e.nativeEvent.isComposing) return;
-
-    if (e.key === "Enter") {
-      if (isDesktopWeb) {
-        // 桌面 Web：Shift+Enter 換行、Enter 送出
-        if (!e.shiftKey) {
-          e.preventDefault();
-          handleSubmit(e);
-        }
-        // Shift+Enter 時不阻止，允許換行
-      }
-      // 其他情況（手機 Web、iOS App、Android App）：Enter 換行，不處理
-    }
-  };
-
-  // 處理輸入法 composition events（中文、日文、韓文等）
-  const handleCompositionStart = () => {
-    isComposingRef.current = true;
-  };
-
-  const handleCompositionEnd = (e: React.CompositionEvent<HTMLTextAreaElement>) => {
-    isComposingRef.current = false;
-
-    // 確保最終值被更新
-    setMessage(e.currentTarget.value);
-  };
-
-  // 處理一般輸入
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setMessage(e.target.value);
-  };
-
-  // 處理檔案選擇（統一附件系統：只加入預覽，送出時才上傳）
-  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = e.target.files;
-    if (!selectedFiles || selectedFiles.length === 0) return;
-
-    // 加入附件列表（延遲上傳）
-    addFiles(Array.from(selectedFiles));
-
-    // Reset input value to allow selecting the same file again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  }, [addFiles]);
-
-  // 處理貼上事件（支援截圖和圖片）
-  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
-    const items = e.clipboardData?.items;
-    if (!items) return;
-
-    const files: File[] = [];
-    for (const item of items) {
-      if (item.kind === 'file') {
-        const file = item.getAsFile();
-        if (file) {
-          files.push(file);
-        }
-      }
-    }
-
-    // 如果有檔案，加入附件列表並阻止預設的文字貼上
-    if (files.length > 0) {
-      e.preventDefault();
-      addFiles(files);
-    }
-    // 如果沒有檔案（純文字），讓預設行為處理
-  }, [addFiles]);
-
-  // 處理拖放事件
-  const handleDrop = useCallback((files: File[]) => {
-    addFiles(files);
-  }, [addFiles]);
-
-  const handleFileButtonClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleVideoCaptureClick = () => {
-    videoInputRef.current?.click();
-  };
-
-  // 使用 Capacitor Camera API 處理拍照/錄影/相簿選取（統一附件系統）
-  const handleMediaCapture = async () => {
-    try {
-      // 使用 Camera.getPhoto 搭配 Prompt 模式
-      // 會顯示原生選單：拍照、從相簿選擇
-      const media = await Camera.getPhoto({
-        quality: 90,
-        allowEditing: false,
-        resultType: CameraResultType.Uri,
-        source: CameraSource.Camera, // 關鍵：不跳出選項，直接進入相機
-        saveToGallery: false, // 拍照後不自動存到相簿（避免重複）
-      });
-
-      if (!media.webPath) {
-        throw new Error("無法取得媒體檔案");
-      }
-
-      // 將 webPath 轉換為 Blob
-      const response = await fetch(media.webPath);
-      const blob = await response.blob();
-
-      // 根據 format 判斷檔案類型和副檔名
-      const format = media.format || 'jpg';
-      const mimeType = blob.type || (format.includes('mp4') || format.includes('mov') ? 'video/mp4' : 'image/jpeg');
-      const fileName = `capture_${Date.now()}.${format}`;
-      const file = new File([blob], fileName, { type: mimeType });
-
-      // 加入附件列表（延遲上傳）
-      addFiles([file]);
-
-    } catch (error: any) {
-      // 使用者取消操作不顯示錯誤
-      if (error.message === 'User cancelled photos app') {
-        console.log('📸 [Media Capture] 使用者取消操作');
-      } else {
-        console.error('❌ [Media Capture] 失敗:', error);
-        alert("媒體操作失敗: " + (error instanceof Error ? error.message : "未知錯誤"));
-      }
-    }
-  };
-
-  // Helper: 將 base64 字串轉換為 Blob
-  const base64ToBlob = (base64: string, mimeType: string): Blob => {
-    const byteCharacters = atob(base64);
-    const byteNumbers = new Array(byteCharacters.length);
-    for (let i = 0; i < byteCharacters.length; i++) {
-      byteNumbers[i] = byteCharacters.charCodeAt(i);
-    }
-    const byteArray = new Uint8Array(byteNumbers);
-    return new Blob([byteArray], { type: mimeType });
-  };
-
-  // Helper: 記憶體監控
-  const logMemoryUsage = (label: string) => {
-    if ((performance as any).memory) {
-      const m = (performance as any).memory;
-      console.log(`💾 [Memory] ${label}:`, {
-        used: `${(m.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB`,
-        total: `${(m.totalJSHeapSize / 1024 / 1024).toFixed(2)} MB`,
-        percent: `${((m.usedJSHeapSize / m.jsHeapSizeLimit) * 100).toFixed(1)}%`,
-      });
-    }
-  };
-
-  // 儲存錄音到 IndexedDB
-  const saveAudioToIndexedDB = async (audioBlob: Blob, timestamp: number) => {
-    try {
-      const dbName = 'AudioRecordings';
-      const storeName = 'recordings';
-
-      const request = indexedDB.open(dbName, 1);
-
-      request.onupgradeneeded = (event) => {
-        const db = (event.target as IDBOpenDBRequest).result;
-        if (!db.objectStoreNames.contains(storeName)) {
-          db.createObjectStore(storeName, { keyPath: 'timestamp' });
-        }
-      };
-
-      return new Promise<void>((resolve, reject) => {
-        request.onsuccess = () => {
-          const db = request.result;
-          const transaction = db.transaction([storeName], 'readwrite');
-          const store = transaction.objectStore(storeName);
-          store.put({ timestamp, audioBlob, createdAt: new Date().toISOString() });
-
-          transaction.oncomplete = () => {
-            console.log('✅ 錄音已儲存到 IndexedDB');
-            resolve();
-          };
-
-          transaction.onerror = () => reject(transaction.error);
-        };
-
-        request.onerror = () => reject(request.error);
-      });
-    } catch (error) {
-      console.error('儲存錄音失敗:', error);
-    }
-  };
-
-  // 從 IndexedDB 讀取錄音
-  const getAudioFromIndexedDB = async (timestamp: number): Promise<Blob | null> => {
-    try {
-      const dbName = 'AudioRecordings';
-      const storeName = 'recordings';
-
-      const request = indexedDB.open(dbName, 1);
-
-      return new Promise((resolve, reject) => {
-        request.onsuccess = () => {
-          const db = request.result;
-          const transaction = db.transaction([storeName], 'readonly');
-          const store = transaction.objectStore(storeName);
-          const getRequest = store.get(timestamp);
-
-          getRequest.onsuccess = () => {
-            const result = getRequest.result;
-            resolve(result ? result.audioBlob : null);
-          };
-
-          getRequest.onerror = () => reject(getRequest.error);
-        };
-
-        request.onerror = () => reject(request.error);
-      });
-    } catch (error) {
-      console.error('讀取錄音失敗:', error);
-      return null;
-    }
-  };
-
-  // 轉錄音訊（帶 retry 機制）- 使用 presigned URL 避免 413 錯誤
-  const transcribeAudio = async (audioBlob: Blob, timestamp: number, retryCount = 0): Promise<boolean> => {
-    const maxRetries = 3;
-
-    try {
-      setTranscribing(true);
-      setTranscriptionError(null);
-      setTranscriptionStatus(`🎤 轉錄中... ${retryCount > 0 ? `(重試 ${retryCount}/${maxRetries})` : ''}`);
-
-      if (!user) {
-        throw new Error("請先登入");
-      }
-
-      const idToken = await user.getIdToken();
-
-      const mimeType = audioBlob.type || 'audio/webm';
-      const extension = mimeType.includes('mp4') || mimeType.includes('m4a') ? 'm4a' :
-                        mimeType.includes('aac') ? 'aac' :
-                        mimeType.includes('mpeg') || mimeType.includes('mp3') ? 'mp3' : 'webm';
-      const fileName = `recording-${timestamp}.${extension}`;
-
-      const audioFile = new File([audioBlob], fileName, { type: mimeType });
-
-      // 🔍 記錄音訊檔案資訊
-      const fileSizeMB = (audioFile.size / 1024 / 1024).toFixed(2);
-      console.log(`🎤 [Transcribe] Audio file: ${fileSizeMB} MB (${audioFile.size} bytes), ${mimeType}`);
-
-      // 🚀 Step 1: 上傳音訊到 GCS（使用統一上傳服務）
-      setTranscriptionStatus(`📤 上傳音訊中...`);
-      const uploadStartTime = Date.now();
-      console.log(`📤 [Transcribe] Upload started at ${new Date(uploadStartTime).toLocaleTimeString()}`);
-
-      const uploadResult = await uploadFile({
-        file: audioFile,
-        idToken,
-        userId: user.uid,
-        projectId: 'default'
-      });
-
-      const uploadEndTime = Date.now();
-      const uploadDuration = ((uploadEndTime - uploadStartTime) / 1000).toFixed(2);
-
-      if (!uploadResult.success) {
-        console.error(`❌ [Transcribe] Upload failed after ${uploadDuration}s:`, uploadResult.error);
-        throw new Error(uploadResult.error || "音訊上傳失敗");
-      }
-
-      const gcsPath = uploadResult.displayPath;
-      const audioUploadId = uploadResult.audioUploadId;
-      console.log(`✅ [Transcribe] Upload completed in ${uploadDuration}s → ${gcsPath}`);
-      console.log(`🎫 [Transcribe] audioUploadId: ${audioUploadId}`);
-      logMemoryUsage('After upload completed');
-
-      // 🚀 Step 2: 呼叫轉錄 API（傳遞 GCS URI 和 audioUploadId）
-      setTranscriptionStatus(`🎤 轉錄中... ${retryCount > 0 ? `(重試 ${retryCount}/${maxRetries})` : ''}`);
-      const transcribeStartTime = Date.now();
-      console.log(`🎤 [Transcribe] Transcription started at ${new Date(transcribeStartTime).toLocaleTimeString()}`);
-
-      const response = await fetch(getApiEndpoint("/api/transcribe-audio"), {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${idToken}`,
-          ...(audioUploadId && { "X-Audio-Upload-Id": audioUploadId }),
-        },
-        body: JSON.stringify({
-          gcsUri: gcsPath,
-          model: transcriptionModel,
-        }),
-      });
-
-      const transcribeEndTime = Date.now();
-      const transcribeDuration = ((transcribeEndTime - transcribeStartTime) / 1000).toFixed(2);
-
-      if (!response.ok) {
-        console.error(`❌ [Transcribe] API failed after ${transcribeDuration}s: HTTP ${response.status}`);
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const result = await response.json();
-      console.log(`🔍 [Transcribe] API response received in ${transcribeDuration}s:`, {
-        success: result.success,
-        resultsCount: result.results?.length || 0,
-        hasResults: !!result.results,
-        firstResultKeys: result.results?.[0] ? Object.keys(result.results[0]) : [],
-        textLength: result.results?.[0]?.text?.length || 0
-      });
-
-      // 🔍 Debug: 詳細檢查條件
-      console.log(`🔍 [Transcribe] Condition check:`, {
-        'response.ok': response.ok,
-        'result.success': result.success,
-        'result.results': !!result.results,
-        'result.results.length': result.results?.length || 0,
-        'condition met': response.ok && result.success && result.results && result.results.length > 0
-      });
-
-      if (response.ok && result.success && result.results && result.results.length > 0) {
-        // 轉錄成功
-        const transcripts = result.results.map((r: any) => r.text).join('\n\n');
-        const textLength = transcripts.length;
-        const totalDuration = ((transcribeEndTime - uploadStartTime) / 1000).toFixed(2);
-
-        console.log(`✅ [Transcribe] Success! Transcription completed in ${transcribeDuration}s`);
-        console.log(`📊 [Transcribe] Summary: Upload ${uploadDuration}s + Transcribe ${transcribeDuration}s = Total ${totalDuration}s`);
-        console.log(`📝 [Transcribe] Transcribed ${textLength} characters`);
-
-        // 檢查是否為空字串（未偵測到語音）
-        if (transcripts === '' || transcripts.trim() === '') {
-          console.log('ℹ️ [Transcribe] No speech detected in audio');
-          setTranscriptionStatus('no-speech');
-          setRecordedAudio(null);
-          setTranscriptionError(null);
-
-          // 5秒後清除狀態
-          setTimeout(() => {
-            setTranscriptionStatus("");
-            setTranscribing(false);
-          }, 5000);
-
-          return true;
-        }
-
-        // 有內容的正常轉錄，自動送出
-        onSend(transcripts);
-
-        setTranscriptionStatus(`✅ 轉錄成功！`);
-        setRecordedAudio(null);
-        setTranscriptionError(null);
-
-        // 3秒後清除狀態
-        setTimeout(() => {
-          setTranscriptionStatus("");
-          setTranscribing(false);
-        }, 3000);
-
-        return true;
-      } else {
-        console.error('❌ [Transcribe] Failed:', result.error || "轉錄失敗");
-        throw new Error(result.error || "轉錄失敗");
-      }
-    } catch (error) {
-      console.error(`轉錄錯誤 (嘗試 ${retryCount + 1}/${maxRetries + 1}):`, error);
-
-      // 如果還有重試機會，自動重試
-      if (retryCount < maxRetries) {
-        console.log(`⚠️ 將在 2 秒後重試...`);
-        await new Promise(resolve => setTimeout(resolve, 2000));
-        return transcribeAudio(audioBlob, timestamp, retryCount + 1);
-      } else {
-        // 已達最大重試次數
-        const errorMessage = error instanceof Error ? error.message : "未知錯誤";
-        setTranscriptionError(`轉錄失敗（已重試 ${maxRetries} 次）: ${errorMessage}`);
-        setTranscriptionStatus("");
-        setTranscribing(false);
-        return false;
-      }
-    }
-  };
-
-  // 開始/停止錄音（使用 Capacitor Audio Recorder，跨平台支援）
-  const handleRecordingToggle = async () => {
-    if (isRecording) {
-      // 停止錄音
-      try {
-        const result = await AudioRecorder.stopRecording();
-        console.log('🎤 Recording stopped:', result);
-
-        // 🔥 Android: 關閉前景服務
-        if ((window as any).Capacitor?.getPlatform() === 'android') {
-          try {
-            await ForegroundService.stopForegroundService();
-            console.log('🔥 Foreground service stopped');
-          } catch (fgError) {
-            console.warn('⚠️ Failed to stop foreground service:', fgError);
-          }
-        }
-
-        const timestamp = Date.now();
-        let audioBlob: Blob | null = null;
-
-        // Web 平台返回 blob，Native 平台返回 uri
-        if (result.blob) {
-          // Web: 直接使用 blob
-          console.log('🎤 [Web] Using blob');
-          audioBlob = result.blob;
-        } else if (result.uri) {
-          // Native (iOS/Android): 從 uri 讀取檔案並轉換為 blob
-          try {
-            const fileData = await Filesystem.readFile({
-              path: result.uri
-            });
-
-            const base64Data = fileData.data as string;
-            const mimeType = 'audio/mp4';
-            audioBlob = base64ToBlob(base64Data, mimeType);
-
-            if (audioBlob.size === 0) {
-              throw new Error('Blob size is 0 - conversion failed');
-            }
-          } catch (fileError) {
-            console.error('Failed to read/convert file:', fileError);
-            throw new Error('無法讀取錄音檔案: ' + (fileError instanceof Error ? fileError.message : '未知錯誤'));
-          }
-        }
-
-        if (audioBlob) {
-          // 儲存到 IndexedDB
-          await saveAudioToIndexedDB(audioBlob, timestamp);
-
-          // 儲存到 state（用於 retry 和下載）
-          setRecordedAudio(audioBlob);
-
-          // 開始轉錄
-          await transcribeAudio(audioBlob, timestamp);
-        }
-
-        setIsRecording(false);
-      } catch (error) {
-        console.error('❌ Failed to stop recording:', error);
-        alert('停止錄音失敗: ' + (error instanceof Error ? error.message : '未知錯誤'));
-        setIsRecording(false);
-      }
-    } else {
-      // 開始錄音
-      try {
-        // 請求麥克風權限
-        const permissions = await AudioRecorder.requestPermissions();
-        console.log('🎤 Audio Permissions:', permissions);
-
-        if (permissions.recordAudio !== 'granted') {
-          alert('需要麥克風權限才能錄音');
-          return;
-        }
-
-        // 🔥 Android: 請求通知權限並啟動前景服務（讓錄音在背景/螢幕關閉時繼續）
-        if ((window as any).Capacitor?.getPlatform() === 'android') {
-          try {
-            // Android 13+ (API 33+) 需要明確請求通知權限
-            const notificationPermission = await ForegroundService.checkPermissions();
-            console.log('🔔 Notification Permission:', notificationPermission);
-
-            if (notificationPermission.display !== 'granted') {
-              console.log('🔔 Requesting notification permission...');
-              const result = await ForegroundService.requestPermissions();
-              console.log('🔔 Notification Permission Result:', result);
-
-              if (result.display !== 'granted') {
-                console.warn('⚠️ Notification permission denied, foreground service may not show notification');
-                // 繼續執行,但前景服務可能無法顯示通知
-              }
-            }
-
-            // 啟動前景服務
-            await ForegroundService.startForegroundService({
-              id: 1,
-              title: '正在錄音',
-              body: '點擊返回 App',
-              smallIcon: 'ic_launcher',
-            });
-            console.log('🔥 Foreground service started');
-          } catch (fgError) {
-            console.warn('⚠️ Failed to start foreground service:', fgError);
-            // 繼續錄音，即使前景服務啟動失敗
-          }
-        }
-
-        // 開始錄音（優化設定：極致壓縮 - 方案 1）
-        // 32 kbps + 16 kHz = ~240 KB/分鐘（相較原本 1.4 MB 減少 83%）
-        // 上傳速度從 ~1.1 秒加速到 ~0.2 秒（5.5 倍加速）
-        await AudioRecorder.startRecording({
-          bitRate: 32000,    // 32 kbps（語音辨識足夠）
-          sampleRate: 16000, // 16 kHz（Whisper 最低支援，覆蓋所有語音頻率）
-        });
-        console.log('🎤 Recording started');
-
-        setIsRecording(true);
-        setTranscriptionStatus("🎤 錄音中...");
-      } catch (error) {
-        console.error('❌ Failed to start recording:', error);
-        alert('無法啟動錄音: ' + (error instanceof Error ? error.message : '未知錯誤'));
-      }
-    }
-  };
-
-  // 下載錄音檔案
-  const handleDownloadRecording = async () => {
-    if (!recordedAudio) return;
-
-    try {
-      // 檢測平台
-      const isNative = (window as any).Capacitor?.isNativePlatform() || false;
-
-      if (isNative) {
-        // Native 平台（iOS/Android）：使用 Share API 觸發分享面板
-        console.log('🔽 [Download] Native platform detected, using Share API');
-
-        // 轉換 Blob 為 base64
-        const reader = new FileReader();
-        reader.onloadend = async () => {
-          try {
-            const base64Data = reader.result as string;
-            const base64String = base64Data.split(',')[1]; // 移除 data URL prefix
-
-            const fileName = `recording-${Date.now()}.${recordedAudio.type.includes('mp4') ? 'm4a' : 'webm'}`;
-
-            // 寫入檔案到 Cache 目錄（暫存）
-            const result = await Filesystem.writeFile({
-              path: fileName,
-              data: base64String,
-              directory: Directory.Cache,
-            });
-
-            console.log('✅ [Download] Temp file created:', result.uri);
-
-            // 使用 Share API 觸發系統分享面板
-            await Share.share({
-              title: '儲存錄音檔案',
-              text: `錄音檔案：${fileName}`,
-              url: result.uri, // iOS/Android 支援 file:// URLs
-              dialogTitle: '選擇儲存位置',
-            });
-
-            console.log('✅ [Download] Share dialog completed');
-          } catch (error) {
-            const errorMessage = error instanceof Error ? error.message : String(error);
-
-            // 如果使用者取消分享，不顯示錯誤訊息
-            if (errorMessage.toLowerCase().includes('cancel')) {
-              console.log('ℹ️ [Download] Share cancelled by user');
-              return;
-            }
-
-            // 其他錯誤顯示為下載失敗
-            console.error('❌ [Download] Failed to save file:', error);
-            alert('下載失敗: ' + errorMessage);
-          }
-        };
-        reader.readAsDataURL(recordedAudio);
-      } else {
-        // Web 平台：使用傳統下載方式
-        console.log('🔽 [Download] Web platform detected, using blob URL');
-
-        const url = URL.createObjectURL(recordedAudio);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `recording-${Date.now()}.webm`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-
-        console.log('✅ [Download] File downloaded');
-      }
-    } catch (error) {
-      console.error('❌ [Download] Error:', error);
-      alert('下載失敗: ' + (error instanceof Error ? error.message : '未知錯誤'));
-    }
-  };
-
-  // 重試轉錄
-  const handleRetryTranscription = async () => {
-    if (!recordedAudio) return;
-
-    const timestamp = Date.now();
-    await transcribeAudio(recordedAudio, timestamp);
-  };
-
-
-  return (
-    <DropZone onDrop={handleDrop} disabled={disabled || uploading || !canAddMore}>
-    <div className="w-full border-t bg-background">
-      {/* 錄音/轉錄狀態：只有異常時才顯示，正常狀態不凸顯（按鈕本身已表示狀態） */}
-
-      {/* 轉錄錯誤處理 */}
-      {transcriptionError && recordedAudio && (
-        <div className="relative flex items-start gap-3 p-4 pb-3 bg-red-50/50 dark:bg-red-950/30">
-          <div className="flex-shrink-0">
-            <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400" />
-          </div>
-          {/* [D-2] 加入 pr-8 預留 X 按鈕空間 */}
-          <div className="flex-1 pr-8">
-            <p className="text-sm font-medium text-red-900 dark:text-red-200 mb-2">
-              {transcriptionError}
-            </p>
-            {/* [D-1] 加入 flex-col sm:flex-row 實現 responsive */}
-            <div className="flex flex-col sm:flex-row gap-2">
-              <Button
-                type="button"
-                size="sm"
-                onClick={handleRetryTranscription}
-                disabled={transcribing}
-                variant="outline"
-                className="border-red-300 hover:bg-red-100 dark:border-red-700 dark:hover:bg-red-900"
-              >
-                {transcribing ? (
-                  <>
-                    <Loader2 className="mr-2 h-3 w-3 animate-spin" />
-                    重試中...
-                  </>
-                ) : (
-                  <>
-                    <RefreshCw className="mr-2 h-3 w-3" />
-                    重試轉錄
-                  </>
-                )}
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                onClick={handleDownloadRecording}
-                variant="outline"
-                className="border-red-300 hover:bg-red-100 dark:border-red-700 dark:hover:bg-red-900"
-              >
-                <Download className="mr-2 h-3 w-3" />
-                下載錄音
-              </Button>
-            </div>
-          </div>
-          <div className="absolute top-2 right-2">
-            <Button
-              type="button"
-              size="icon"
-              variant="ghost"
-              onClick={() => setTranscriptionError(null)}
-              className="h-6 w-6 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900"
-              aria-label="關閉錯誤訊息"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* 未偵測到語音訊息 */}
-      {transcriptionStatus === 'no-speech' && !transcriptionError && (
-        <div className="relative">
-          <div className="flex gap-3 p-4 pb-2 bg-blue-50 dark:bg-blue-950/50 border-l-4 border-blue-500">
-            <Info className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-blue-900 dark:text-blue-200">
-                未偵測到語音內容
-              </p>
-              <p className="text-xs text-blue-700 dark:text-blue-400 mt-1">
-                請確認麥克風權限已開啟，或嘗試重新錄音
-              </p>
-            </div>
-          </div>
-          <div className="absolute top-2 right-2">
-            <Button
-              type="button"
-              size="icon"
-              variant="ghost"
-              onClick={() => setTranscriptionStatus("")}
-              className="h-6 w-6 text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900"
-              aria-label="關閉訊息"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* 錄音/轉錄狀態 */}
-      {(transcribing || transcriptionStatus) && !transcriptionError && transcriptionStatus !== 'no-speech' && (
-        <div className="flex items-center gap-2 p-4 pb-2 bg-amber-50/50 dark:bg-amber-950/30">
-          <Loader2 className="h-4 w-4 animate-spin text-amber-600 dark:text-amber-500" />
-          <div className="flex-1">
-            <p className="text-sm font-medium text-amber-900 dark:text-amber-200">
-              {transcriptionStatus}
-            </p>
-            <p className="text-xs text-amber-700 dark:text-amber-400">
-              轉錄完成後會自動送出（錄音已安全儲存）
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* 上傳中狀態 */}
-      {uploading && (
-        <div className="flex items-center gap-2 p-4 pb-2 bg-blue-50/50 dark:bg-blue-950/30">
-          <Loader2 className="h-4 w-4 animate-spin text-blue-600 dark:text-blue-500" />
-          <p className="text-sm font-medium text-blue-900 dark:text-blue-200">
-            📤 正在自動上傳檔案...
-          </p>
-        </div>
-      )}
-
-      {/* 附件錯誤提示 */}
-      {attachmentError && (
-        <div className="relative flex items-start gap-3 p-4 pb-3 bg-red-50/50 dark:bg-red-950/30">
-          <AlertCircle className="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-400" />
-          <p className="text-sm font-medium text-red-900 dark:text-red-200 flex-1">
-            {attachmentError}
-          </p>
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={() => setAttachmentError(null)}
-            className="h-6 w-6 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900 flex-shrink-0"
-            aria-label="關閉錯誤訊息"
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-      )}
-
-      {/* 附件預覽區 */}
-      <AttachmentPreview
-        attachments={attachments}
-        maxCount={20}
-        onRemove={removeAttachment}
-        onRetry={retryUpload}
-        onClearAll={clearAllAttachments}
-        disabled={disabled || uploading}
-      />
-
-      <form
-        onSubmit={handleSubmit}
-        className="flex w-full gap-2 p-3 sm:p-4"
-      >
-      {/* 檔案上傳 input (用於選擇本機檔案、多選等) */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        onChange={handleFileSelect}
-        className="hidden"
-      />
-
-      {/* 錄影專用 input */}
-      <input
-        ref={videoInputRef}
-        type="file"
-        capture="environment"
-        onChange={handleFileSelect}
-        className="hidden"
-      />
-
-      {/* 上傳按鈕 - Web 直接上傳，App 顯示下拉選單 */}
-      {isCapacitor ? (
-        // Capacitor App：保留下拉選單（拍照、錄影）
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              size="icon"
-              variant="outline"
-              disabled={disabled}
-              className="shrink-0"
-              title="上傳檔案"
-            >
-              <Paperclip className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-64">
-            {/* Capacitor App：拍照和錄影分離 */}
-            {isCapacitor && (
-              <>
-                <DropdownMenuItem
-                  onClick={handleFileButtonClick}
-                  className="cursor-pointer hover:bg-accent font-medium"
-                >
-                  <Folder className="mr-2 h-4 w-4" />
-                  <span>上傳檔案</span>
-                </DropdownMenuItem>
-                {/* 拍照和錄影功能僅在 Android 平台顯示 */}
-                {isAndroid && (
-                  <>
-                    <DropdownMenuItem
-                      onClick={handleMediaCapture}
-                      className="cursor-pointer hover:bg-accent font-medium"
-                    >
-                      <CameraIcon className="mr-2 h-4 w-4" />
-                      <span>拍照</span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={handleVideoCaptureClick}
-                      className="cursor-pointer hover:bg-accent font-medium"
-                    >
-                      <Video className="mr-2 h-4 w-4" />
-                      <span>錄影</span>
-                    </DropdownMenuItem>
-                  </>
-                )}
-              </>
-            )}
-
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : (
-        // Web 環境：直接點擊上傳
-        <Button
-          type="button"
-          size="icon"
-          variant="outline"
-          disabled={disabled}
-          className="shrink-0"
-          onClick={handleFileButtonClick}
-          title="上傳檔案"
-        >
-          <Paperclip className="h-4 w-4" />
-        </Button>
-      )}
-
-      {/* Input Field - 受控組件 + composition 保護 */}
-      <Textarea
-        ref={inputRef}
-        value={message}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onPaste={handlePaste}
-        onCompositionStart={handleCompositionStart}
-        onCompositionEnd={handleCompositionEnd}
-        placeholder={hasAttachments ? '新增說明文字...' : placeholder}
-        disabled={disabled}
-        className="flex-1 text-base resize-none overflow-hidden min-h-[2.25rem] max-h-[200px] leading-normal py-2"
-        autoComplete="off"
-        autoFocus
-        rows={1}
-        inputMode="text"
-      />
-
-      {/* 動態右側按鈕：Stop (AI) > Stop (錄音) > Send > Mic */}
-      {isLoading ? (
-        // 1. Stop AI response (最高優先級)
-        // 旋轉圓環 + 停止方塊：表示 AI 思考中，可點擊停止
-        <Button
-          type="button"
-          size="icon"
-          variant="ghost"
-          onClick={onStop}
-          disabled={isStopping}
-          className="shrink-0 relative hover:bg-destructive/10"
-          title="AI 思考中，點擊停止"
-        >
-          {isStopping ? (
-            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-          ) : (
-            <div className="relative flex items-center justify-center w-6 h-6">
-              {/* 外圈旋轉動畫 - 漸層弧線 */}
-              <svg className="absolute w-6 h-6 animate-spin" viewBox="0 0 24 24">
-                <circle
-                  className="opacity-20"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  fill="none"
-                />
-                <circle
-                  className="text-primary"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  fill="none"
-                  strokeDasharray="32"
-                  strokeDashoffset="12"
-                  strokeLinecap="round"
-                />
-              </svg>
-              {/* 中心停止方塊 */}
-              <Square className="h-2.5 w-2.5 text-primary fill-primary" />
-            </div>
-          )}
-        </Button>
-      ) : isRecording ? (
-        // 2. Stop recording
-        <Button
-          type="button"
-          size="icon"
-          variant="destructive"
-          onClick={handleRecordingToggle}
-          disabled={disabled || transcribing}
-          className="shrink-0"
-          title="停止錄音"
-        >
-          <Square className="h-4 w-4" />
-        </Button>
-      ) : message.trim() ? (
-        // 3. Send message (有文字訊息)
-        <Button
-          type="submit"
-          size="icon"
-          disabled={disabled || uploading}
-          className="shrink-0"
-          title="送出訊息"
-        >
-          {uploading ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Send className="h-4 w-4" />
-          )}
-        </Button>
-      ) : hasAttachments ? (
-        // 4. 有附件但無文字：顯示錄音 + 發送雙按鈕
-        <div className="flex items-center gap-1">
-          <Button
-            type="button"
-            size="icon"
-            variant="outline"
-            onClick={handleRecordingToggle}
-            disabled={disabled || transcribing}
-            className="shrink-0"
-            title="開始錄音"
-          >
-            <Mic className="h-4 w-4" />
-          </Button>
-          <Button
-            type="submit"
-            size="icon"
-            disabled={disabled || uploading}
-            className="shrink-0"
-            title="送出附件"
-          >
-            {uploading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Send className="h-4 w-4" />
-            )}
-          </Button>
-        </div>
-      ) : (
-        // 5. Start recording (預設，無附件無文字)
-        <Button
-          type="button"
-          size="icon"
-          variant="outline"
-          onClick={handleRecordingToggle}
-          disabled={disabled || transcribing}
-          className="shrink-0"
-          title="開始錄音"
-        >
-          <Mic className="h-4 w-4" />
-        </Button>
-      )}
-    </form>
-
-    {/* Skills Manager Drawer */}
-    <SkillsManagerDrawer
-      open={managerDrawerOpen}
-      onOpenChange={setManagerDrawerOpen}
-      onEdit={handleEditSkill}
-      onCreate={handleCreateSkill}
-      onSkillsChange={handleSkillsChange}
-    />
-
-    {/* Skills Editor */}
-    <SkillsEditor
-      open={editorOpen}
-      onOpenChange={setEditorOpen}
-      skill={skillToEdit}
-      onSaved={handleSkillsChange}
-    />
-    </div>
-    </DropZone>
-  );
-}