botrun-horse 2.29.2 → 2.30.0

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

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