botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/hooks/useAttachments.ts

@@ -0,0 +1,269 @@
+/**
+ * 附件狀態管理 Hook
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import type { PendingAttachment } from '@/types/attachment';
+import type { UploadResult } from '@/lib/upload-service';
+import { uploadFile } from '@/lib/upload-service';
+import {
+  getAttachmentType,
+  canPreview,
+  generateAttachmentId,
+  formatAttachmentSize,
+} from '@/lib/attachment-utils';
+
+interface UseAttachmentsOptions {
+  /** 附件數量上限，預設 20 */
+  maxCount?: number;
+  /** 單檔大小上限（bytes），預設 350MB */
+  maxFileSize?: number;
+  /** 錯誤回呼 */
+  onError?: (error: string) => void;
+}
+
+interface UseAttachmentsReturn {
+  /** 所有附件列表 */
+  attachments: PendingAttachment[];
+  /** 新增檔案 */
+  addFiles: (files: File[]) => void;
+  /** 移除單一附件 */
+  removeAttachment: (id: string) => void;
+  /** 清除所有附件 */
+  clearAll: () => void;
+  /** 重試上傳失敗的附件 */
+  retryUpload: (id: string) => void;
+  /** 批次上傳所有待上傳的附件 */
+  uploadAll: (idToken: string, userId: string, projectId?: string) => Promise<UploadResult[]>;
+  /** 是否正在上傳 */
+  isUploading: boolean;
+  /** 是否有附件 */
+  hasAttachments: boolean;
+  /** 是否還可以新增更多附件 */
+  canAddMore: boolean;
+  /** 目前附件數量 */
+  count: number;
+}
+
+const DEFAULT_MAX_COUNT = 20;
+const DEFAULT_MAX_FILE_SIZE = 350 * 1024 * 1024; // 350MB
+
+export function useAttachments(
+  options: UseAttachmentsOptions = {}
+): UseAttachmentsReturn {
+  const {
+    maxCount = DEFAULT_MAX_COUNT,
+    maxFileSize = DEFAULT_MAX_FILE_SIZE,
+    onError,
+  } = options;
+
+  const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+
+  /**
+   * 新增檔案到附件列表
+   */
+  const addFiles = useCallback(
+    (files: File[]) => {
+      const currentCount = attachments.length;
+      const availableSlots = maxCount - currentCount;
+
+      if (availableSlots <= 0) {
+        onError?.(`已達附件上限 (${maxCount} 個)`);
+        return;
+      }
+
+      const filesToAdd = files.slice(0, availableSlots);
+      const skipped = files.length - filesToAdd.length;
+
+      const newAttachments: PendingAttachment[] = [];
+
+      for (const file of filesToAdd) {
+        // 檢查檔案大小
+        if (file.size > maxFileSize) {
+          onError?.(
+            `檔案 "${file.name}" 超過 ${formatAttachmentSize(maxFileSize)} 限制`
+          );
+          continue;
+        }
+
+        const type = getAttachmentType(file.type);
+        const previewUrl = canPreview(type)
+          ? URL.createObjectURL(file)
+          : null;
+
+        newAttachments.push({
+          id: generateAttachmentId(),
+          file,
+          name: file.name,
+          size: file.size,
+          type,
+          mimeType: file.type || 'application/octet-stream',
+          previewUrl,
+          status: 'pending',
+          progress: 0,
+        });
+      }
+
+      if (newAttachments.length > 0) {
+        setAttachments(prev => [...prev, ...newAttachments]);
+      }
+
+      if (skipped > 0) {
+        onError?.(`已跳過 ${skipped} 個檔案（超過上限）`);
+      }
+    },
+    [attachments.length, maxCount, maxFileSize, onError]
+  );
+
+  /**
+   * 移除單一附件
+   */
+  const removeAttachment = useCallback((id: string) => {
+    setAttachments(prev => {
+      const att = prev.find(a => a.id === id);
+      if (att?.previewUrl) {
+        URL.revokeObjectURL(att.previewUrl);
+      }
+      return prev.filter(a => a.id !== id);
+    });
+  }, []);
+
+  /**
+   * 清除所有附件
+   */
+  const clearAll = useCallback(() => {
+    setAttachments(prev => {
+      prev.forEach(att => {
+        if (att.previewUrl) {
+          URL.revokeObjectURL(att.previewUrl);
+        }
+      });
+      return [];
+    });
+  }, []);
+
+  /**
+   * 重試上傳失敗的附件
+   */
+  const retryUpload = useCallback((id: string) => {
+    setAttachments(prev =>
+      prev.map(att =>
+        att.id === id
+          ? { ...att, status: 'pending' as const, progress: 0, error: undefined }
+          : att
+      )
+    );
+  }, []);
+
+  /**
+   * 批次上傳所有待上傳的附件
+   */
+  const uploadAll = useCallback(
+    async (idToken: string, userId: string, projectId = 'default'): Promise<UploadResult[]> => {
+      const pendingAttachments = attachments.filter(
+        a => a.status === 'pending'
+      );
+
+      if (pendingAttachments.length === 0) {
+        return [];
+      }
+
+      setIsUploading(true);
+      const results: UploadResult[] = [];
+
+      for (const att of pendingAttachments) {
+        // 更新狀態為上傳中，初始進度為 0
+        setAttachments(prev =>
+          prev.map(a =>
+            a.id === att.id ? { ...a, status: 'uploading' as const, progress: 0 } : a
+          )
+        );
+
+        try {
+          const result = await uploadFile({
+            file: att.file,
+            idToken,
+            userId,
+            projectId,
+            // 即時更新進度
+            onProgress: (progress: number) => {
+              setAttachments(prev =>
+                prev.map(a =>
+                  a.id === att.id ? { ...a, progress } : a
+                )
+              );
+            },
+          });
+
+          if (result.success) {
+            setAttachments(prev =>
+              prev.map(a =>
+                a.id === att.id
+                  ? {
+                      ...a,
+                      status: 'uploaded' as const,
+                      progress: 100,
+                      uploadResult: {
+                        displayPath: result.displayPath,
+                        size: result.size,
+                      },
+                    }
+                  : a
+              )
+            );
+            results.push(result);
+          } else {
+            throw new Error(result.error || '上傳失敗');
+          }
+        } catch (error) {
+          const errorMessage =
+            error instanceof Error ? error.message : '上傳失敗';
+          setAttachments(prev =>
+            prev.map(a =>
+              a.id === att.id
+                ? {
+                    ...a,
+                    status: 'error' as const,
+                    error: errorMessage,
+                  }
+                : a
+            )
+          );
+          onError?.(`檔案 "${att.name}" 上傳失敗: ${errorMessage}`);
+        }
+      }
+
+      setIsUploading(false);
+      return results;
+    },
+    [attachments, onError]
+  );
+
+  /**
+   * 元件卸載時清理 blob URLs
+   */
+  useEffect(() => {
+    return () => {
+      attachments.forEach(att => {
+        if (att.previewUrl) {
+          URL.revokeObjectURL(att.previewUrl);
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    attachments,
+    addFiles,
+    removeAttachment,
+    clearAll,
+    retryUpload,
+    uploadAll,
+    isUploading,
+    hasAttachments: attachments.length > 0,
+    canAddMore: attachments.length < maxCount,
+    count: attachments.length,
+  };
+}

package/botrun-c/web/hooks/useAuthToken.ts

@@ -0,0 +1,59 @@
+/**
+ * useAuthToken - 取得並快取 Firebase Auth Token
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+
+export function useAuthToken() {
+  const { user } = useAuth();
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 取得 token
+  const refreshToken = useCallback(async () => {
+    if (!user) {
+      setToken(null);
+      return null;
+    }
+
+    setIsLoading(true);
+    try {
+      const newToken = await user.getIdToken();
+      setToken(newToken);
+      return newToken;
+    } catch (error) {
+      console.error('Failed to get auth token:', error);
+      setToken(null);
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user]);
+
+  // 當使用者變更時重新取得 token
+  useEffect(() => {
+    if (user) {
+      refreshToken();
+    } else {
+      setToken(null);
+    }
+  }, [user, refreshToken]);
+
+  // Token 每 50 分鐘自動刷新（Firebase token 有效期 1 小時）
+  useEffect(() => {
+    if (!user) return;
+
+    const intervalId = setInterval(() => {
+      refreshToken();
+    }, 50 * 60 * 1000); // 50 分鐘
+
+    return () => clearInterval(intervalId);
+  }, [user, refreshToken]);
+
+  return {
+    token,
+    isLoading,
+    refreshToken,
+  };
+}

package/botrun-c/web/hooks/useAutoWelcome.ts

@@ -0,0 +1,89 @@
+/**
+ * useAutoWelcome Hook
+ *
+ * 自動顯示歡迎訊息的 React Hook
+ *
+ * 功能:
+ * - 在 chat 頁面載入時從後端 API 取得歡迎訊息
+ * - 歡迎訊息會在初次對話前顯示，並在使用者開始對話後自動移除
+ * - 完全依賴後端 API，無 fallback 機制
+ *
+ * 使用方式:
+ * ```tsx
+ * const { welcomeMessage, shouldShowWelcome, isLoading, error } = useAutoWelcome(messages);
+ * ```
+ */
+
+import { useState, useEffect } from "react";
+import { getApiEndpoint } from "@/lib/api-url";
+import type { Message } from "@/components/chat-message";
+
+export interface WelcomeMessage {
+  id: string;
+  role: "assistant";
+  content: string;
+  timestamp: Date;
+  isWelcome: boolean;
+}
+
+export function useAutoWelcome(messages: Message[]) {
+  // Derive state: calculate shouldShowWelcome based on messages
+  const shouldShowWelcome = messages.length === 0;
+
+  // State for API data
+  const [welcomeContent, setWelcomeContent] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Fetch welcome message from backend API
+  useEffect(() => {
+    const fetchWelcomeMessage = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const apiUrl = getApiEndpoint('/api/welcome-message');
+        console.log('[useAutoWelcome] Fetching welcome message from:', apiUrl);
+
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (data.success && data.message?.content) {
+          console.log('[useAutoWelcome] Successfully fetched welcome message from API');
+          setWelcomeContent(data.message.content);
+        } else {
+          throw new Error('Invalid API response format');
+        }
+      } catch (err) {
+        console.error('[useAutoWelcome] Failed to fetch welcome message:', err);
+        setError(err instanceof Error ? err : new Error('Unknown error'));
+        setWelcomeContent(''); // API 失敗時不顯示歡迎訊息
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchWelcomeMessage();
+  }, []); // 只在初次掛載時執行一次
+
+  // 產生歡迎訊息物件
+  const welcomeMessage: WelcomeMessage = {
+    id: "welcome-message-initial",
+    role: "assistant",
+    content: welcomeContent,
+    timestamp: new Date(),
+    isWelcome: true,
+  };
+
+  return {
+    welcomeMessage,
+    shouldShowWelcome,
+    isLoading,
+    error,
+  };
+}

package/botrun-c/web/hooks/useCapacitorPlatform.ts

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+
+export type CapacitorPlatform = 'web' | 'ios' | 'android';
+
+export interface CapacitorPlatformInfo {
+  isCapacitor: boolean;
+  isIOS: boolean;
+  isAndroid: boolean;
+  isWeb: boolean;
+  platform: CapacitorPlatform;
+  /**
+   * 取得底部 padding 的 CSS 值
+   * @param extraOffset 額外的偏移量（例如：6rem 用於浮動按鈕）
+   */
+  getBottomPadding: (extraOffset?: string) => string;
+}
+
+/**
+ * Hook to detect Capacitor platform (iOS/Android/Web)
+ *
+ * @returns {CapacitorPlatformInfo} Platform information
+ *
+ * @example
+ * const { isCapacitor, isIOS, isAndroid, platform, getBottomPadding } = useCapacitorPlatform();
+ *
+ * // Use in styles
+ * paddingBottom: isAndroid
+ *   ? 'max(var(--safe-area-inset-bottom), var(--android-nav-bar-height))'
+ *   : 'var(--safe-area-inset-bottom)'
+ *
+ * // Or use getBottomPadding helper
+ * <div style={{ paddingBottom: getBottomPadding() }}>
+ * <button style={{ bottom: getBottomPadding('6rem') }}>
+ */
+export function useCapacitorPlatform(): CapacitorPlatformInfo {
+  const [platformInfo, setPlatformInfo] = useState<Omit<CapacitorPlatformInfo, 'getBottomPadding'>>({
+    isCapacitor: false,
+    isIOS: false,
+    isAndroid: false,
+    isWeb: true,
+    platform: 'web'
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const Capacitor = (window as any).Capacitor;
+
+      if (Capacitor) {
+        const platform = Capacitor.getPlatform?.() || 'web';
+        const isIOS = platform === 'ios';
+        const isAndroid = platform === 'android';
+        const isWeb = platform === 'web';
+        const isCapacitor = isIOS || isAndroid;
+
+        setPlatformInfo({
+          isCapacitor,
+          isIOS,
+          isAndroid,
+          isWeb,
+          platform
+        });
+
+        console.log('🔍 [useCapacitorPlatform] Detected platform:', {
+          platform,
+          isCapacitor,
+          isIOS,
+          isAndroid
+        });
+      }
+    }
+  }, []);
+
+  /**
+   * 計算底部 padding/position 的統一函數
+   *
+   * 邏輯說明：
+   * - Desktop/Web: 0（無需額外間距）
+   * - iOS Capacitor: max(safe-area-inset-bottom, 20px)（確保最小間距，避免太貼近螢幕邊緣）
+   * - Android Capacitor: max(safe-area-inset-bottom, 48px)（適配三鍵導航模式）
+   *
+   * @param extraOffset 額外的偏移量（例如：6rem 用於浮動按鈕）
+   */
+  const getBottomPadding = useMemo(
+    () => (extraOffset?: string) => {
+      const baseOffset = extraOffset || '0px';
+
+      if (platformInfo.isIOS) {
+        // iOS Capacitor: max(safe-area-inset-bottom, 20px) + extraOffset
+        return extraOffset
+          ? `calc(${baseOffset} + max(var(--safe-area-inset-bottom), 20px))`
+          : 'max(var(--safe-area-inset-bottom), 20px)';
+      }
+
+      if (platformInfo.isAndroid) {
+        // Android Capacitor: max(safe-area-inset-bottom, 48px) + extraOffset
+        return extraOffset
+          ? `calc(${baseOffset} + max(var(--safe-area-inset-bottom), var(--android-nav-bar-height)))`
+          : 'max(var(--safe-area-inset-bottom), var(--android-nav-bar-height))';
+      }
+
+      // Web: 無額外間距，只有 extraOffset
+      return extraOffset || '0';
+    },
+    [platformInfo.isIOS, platformInfo.isAndroid]
+  );
+
+  return {
+    ...platformInfo,
+    getBottomPadding,
+  };
+}

package/botrun-c/web/hooks/useCapawesomeLiveUpdate.ts

@@ -0,0 +1,149 @@
+import { useEffect } from 'react';
+
+/**
+ * Capawesome Live Update Hook
+ *
+ * 功能:
+ * - App Resume 時自動檢查更新
+ * - 自動下載並套用新版本
+ * - 錯誤處理與 Logging
+ *
+ * 更新策略: App Resume 時檢查 (推薦)
+ * - 平衡使用者體驗與更新即時性
+ * - 不打斷使用者當前操作
+ * - 自動在背景下載並立即重新載入
+ *
+ * 注意:
+ * - 只在 Capacitor 環境執行
+ * - Web 環境會自動跳過
+ * - 使用動態 import 避免建置錯誤
+ *
+ * 使用方式:
+ * 在 CapacitorProvider 中呼叫 useCapawesomeLiveUpdate()
+ */
+export function useCapawesomeLiveUpdate() {
+  useEffect(() => {
+    // 檢查是否在 Capacitor 環境
+    if (typeof window === 'undefined' || !(window as any).Capacitor) {
+      console.log('[LiveUpdate] Skipping (not in Capacitor environment)');
+      return;
+    }
+
+    let listenerHandle: any = null;
+    let readyTimeoutId: NodeJS.Timeout | null = null;
+
+    const initLiveUpdate = async () => {
+      try {
+        // 動態載入 Capacitor plugins (只在 Capacitor 環境)
+        const [{ App }, { LiveUpdate }, { Capacitor }] = await Promise.all([
+          import('@capacitor/app'),
+          import('@capawesome/capacitor-live-update'),
+          import('@capacitor/core')
+        ]);
+
+        // 🚫 檢查 LiveUpdate 是否被禁用
+        // 防護：Capacitor.getConfig 在 Web 環境下可能不存在
+        if (typeof Capacitor.getConfig !== 'function') {
+          console.log('[LiveUpdate] Skipping (Capacitor.getConfig not available in this environment)');
+          return;
+        }
+
+        const config = Capacitor.getConfig();
+        const liveUpdateConfig = config.plugins?.LiveUpdate || {};
+        const isEnabled = liveUpdateConfig.enabled !== false; // 預設為 true
+
+        if (!isEnabled) {
+          console.log('[LiveUpdate] ⚠️  Disabled by config (enabled: false), skipping all update checks');
+          return;
+        }
+
+        console.log('[LiveUpdate] ✅ Enabled by config, initializing...');
+
+        const checkForUpdates = async () => {
+          try {
+            console.log('[LiveUpdate] Checking for updates...');
+
+            // 1. 先同步取得最新 bundle 資訊
+            const syncResult = await LiveUpdate.sync();
+            console.log('[LiveUpdate] Sync result:', syncResult);
+
+            // 2. 如果沒有 nextBundleId，代表已是最新版
+            if (!syncResult.nextBundleId) {
+              console.log('[LiveUpdate] Already up to date (no nextBundleId)');
+              return;
+            }
+
+            // 3. 取得當前實際運行的 bundle ID
+            const currentBundleResult = await LiveUpdate.getCurrentBundle();
+            const currentBundleId = currentBundleResult?.bundleId || null;
+            console.log('[LiveUpdate] Current bundle:', currentBundleId);
+            console.log('[LiveUpdate] Next bundle:', syncResult.nextBundleId);
+
+            // 4. 檢查是否真的有新版本
+            if (syncResult.nextBundleId !== currentBundleId) {
+              console.log('[LiveUpdate] New bundle available:', syncResult.nextBundleId);
+
+              // 詢問使用者是否立即安裝
+              const shouldReload = confirm("波特人有新版本可用,是否立即安裝?(按取消稍後安裝)");
+              if (shouldReload) {
+                // 清除 ready timeout,避免 reload 後舊的 timeout 還在執行
+                if (readyTimeoutId) {
+                  clearTimeout(readyTimeoutId);
+                  readyTimeoutId = null;
+                  console.log('[LiveUpdate] Cleared ready timeout before reload');
+                }
+
+                // 3. 設定要使用的 bundle (重要!)
+                await LiveUpdate.setNextBundle({ bundleId: syncResult.nextBundleId });
+                console.log('[LiveUpdate] Next bundle set to:', syncResult.nextBundleId);
+
+                // 4. 重新載入
+                await LiveUpdate.reload();
+              }
+            } else {
+              console.log('[LiveUpdate] Already up to date');
+            }
+          } catch (error) {
+            console.error('[LiveUpdate] Update failed:', error);
+            // 更新失敗不影響 App 正常運作
+          }
+        };
+
+        // App resume 時檢查更新
+        listenerHandle = await App.addListener('resume', () => {
+          console.log('[LiveUpdate] App resumed, checking for updates');
+          checkForUpdates();
+        });
+
+        // 🚨 重要: 立即發送 ready signal
+        // 必須在 App 啟動後盡快呼叫,不要延遲
+        await LiveUpdate.ready();
+        console.log('[LiveUpdate] ✅ Ready signal sent');
+
+        // 延遲 2 秒後再檢查更新,確保 App 完全載入
+        readyTimeoutId = setTimeout(async () => {
+          try {
+            console.log('[LiveUpdate] Starting update check (delayed 2s after ready)');
+            checkForUpdates();
+          } catch (error) {
+            console.error('[LiveUpdate] Update check failed:', error);
+          }
+        }, 2000);
+      } catch (error) {
+        console.error('[LiveUpdate] Failed to initialize:', error);
+      }
+    };
+
+    initLiveUpdate();
+
+    return () => {
+      // 清理 listener 和 timeout
+      if (listenerHandle) {
+        listenerHandle.remove();
+      }
+      if (readyTimeoutId) {
+        clearTimeout(readyTimeoutId);
+      }
+    };
+  }, []);
+}