botrun-horse 2.29.2 → 2.30.0

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

@@ -0,0 +1,107 @@
+/**
+ * useGdriveSync - Google Drive 同步狀態 Hook
+ */
+
+import { useState, useCallback } from 'react';
+import { getApiUrl } from '@/lib/api-url';
+
+export interface SyncProgress {
+  folderId: string;
+  folderName: string;
+  current: number;
+  total: number;
+  status: 'downloading' | 'converting' | 'indexing';
+  fileName?: string;
+}
+
+export interface SyncResult {
+  folderId: string;
+  status: 'synced' | 'error';
+  filesUpdated?: number;
+  filesSkipped?: number;
+  filesDeleted?: number;
+  duration?: number;
+  error?: string;
+}
+
+export interface UseGdriveSyncReturn {
+  isSyncing: boolean;
+  syncProgress: SyncProgress | null;
+  lastSyncTime: Date | null;
+  syncResults: SyncResult[];
+  syncAll: () => Promise<void>;
+  syncFolder: (folderId: string) => Promise<void>;
+  syncFolders: (folderIds: string[], force?: boolean) => Promise<void>;
+}
+
+export function useGdriveSync(authToken?: string): UseGdriveSyncReturn {
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncProgress, setSyncProgress] = useState<SyncProgress | null>(null);
+  const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null);
+  const [syncResults, setSyncResults] = useState<SyncResult[]>([]);
+
+  const apiUrl = getApiUrl();
+
+  const getHeaders = useCallback(() => {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (authToken) {
+      headers['Authorization'] = `Bearer ${authToken}`;
+    }
+    return headers;
+  }, [authToken]);
+
+  // 同步指定資料夾
+  const syncFolders = useCallback(async (
+    folderIds: string[],
+    force = false
+  ) => {
+    setIsSyncing(true);
+    setSyncProgress(null);
+    setSyncResults([]);
+
+    try {
+      const response = await fetch(`${apiUrl}/api/gdrive/sync`, {
+        method: 'POST',
+        headers: getHeaders(),
+        body: JSON.stringify({ folderIds, force }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to sync');
+      }
+
+      setSyncResults(data.results || []);
+      setLastSyncTime(new Date());
+    } catch (err) {
+      console.error('Sync failed:', err);
+      throw err;
+    } finally {
+      setIsSyncing(false);
+      setSyncProgress(null);
+    }
+  }, [apiUrl, getHeaders]);
+
+  // 同步單一資料夾
+  const syncFolder = useCallback(async (folderId: string) => {
+    await syncFolders([folderId]);
+  }, [syncFolders]);
+
+  // 同步全部
+  const syncAll = useCallback(async () => {
+    await syncFolders([]);
+  }, [syncFolders]);
+
+  return {
+    isSyncing,
+    syncProgress,
+    lastSyncTime,
+    syncResults,
+    syncAll,
+    syncFolder,
+    syncFolders,
+  };
+}

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

@@ -0,0 +1,409 @@
+/**
+ * useGitHub - GitHub 整合 Hook
+ *
+ * 提供 GitHub 連結、Repo 管理、Git 操作等功能
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { getApiUrl } from '@/lib/api-url';
+
+// ============ Types ============
+
+export interface GitHubRepoInfo {
+  id: number;
+  name: string;
+  fullName: string;
+  private: boolean;
+  defaultBranch: string;
+  url: string;
+}
+
+export interface ConnectedRepo {
+  id: string;
+  repoFullName: string;
+  owner: string;
+  name: string;
+  defaultBranch: string;
+  currentBranch: string;
+  status: 'pending' | 'cloning' | 'cloned' | 'syncing' | 'error';
+  lastSyncAt: string | null;
+  error: { message: string; code?: string } | null;
+  createdAt: string;
+}
+
+export interface GitStatus {
+  branch: string;
+  ahead: number;
+  behind: number;
+  staged: string[];
+  unstaged: string[];
+  untracked: string[];
+  hasChanges: boolean;
+}
+
+export interface GitCommit {
+  sha: string;
+  message: string;
+  author: string;
+  date: string;
+}
+
+export interface UseGitHubReturn {
+  // 狀態
+  connected: boolean;
+  loading: boolean;
+  error: string | null;
+
+  // Repos
+  connectedRepos: ConnectedRepo[];
+  availableRepos: GitHubRepoInfo[];
+
+  // Actions - 連結
+  connect: () => void;
+  disconnect: () => Promise<void>;
+  refresh: () => Promise<void>;
+
+  // Actions - Repo 管理
+  cloneRepo: (repoFullName: string) => Promise<ConnectedRepo>;
+  syncRepo: (repoFullName: string) => Promise<void>;
+  deleteRepo: (repoFullName: string) => Promise<void>;
+
+  // Actions - Git 操作
+  createBranch: (repoFullName: string, branchName: string) => Promise<void>;
+  switchBranch: (repoFullName: string, branchName: string) => Promise<void>;
+  commit: (repoFullName: string, message: string, files?: string[]) => Promise<void>;
+  push: (repoFullName: string) => Promise<void>;
+  getStatus: (repoFullName: string) => Promise<GitStatus>;
+  getLog: (repoFullName: string, limit?: number) => Promise<GitCommit[]>;
+}
+
+// ============ Hook ============
+
+export function useGitHub(authToken?: string): UseGitHubReturn {
+  const [connected, setConnected] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [connectedRepos, setConnectedRepos] = useState<ConnectedRepo[]>([]);
+  const [availableRepos, setAvailableRepos] = useState<GitHubRepoInfo[]>([]);
+
+  const apiUrl = getApiUrl();
+
+  const getHeaders = useCallback(() => {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (authToken) {
+      headers['Authorization'] = `Bearer ${authToken}`;
+    }
+    return headers;
+  }, [authToken]);
+
+  // ============ 載入狀態 ============
+
+  const fetchStatus = useCallback(async () => {
+    console.log('[useGitHub/fetchStatus] Start, authToken:', authToken ? 'present' : 'missing');
+    if (!authToken) {
+      console.log('[useGitHub/fetchStatus] No authToken, skipping fetch');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      console.log('[useGitHub/fetchStatus] Fetching from:', `${apiUrl}/api/github/status`);
+      const response = await fetch(`${apiUrl}/api/github/status`, {
+        headers: getHeaders(),
+      });
+
+      console.log('[useGitHub/fetchStatus] Response status:', response.status);
+      const data = await response.json();
+      console.log('[useGitHub/fetchStatus] Response data:', {
+        connected: data.connected,
+        connectedReposCount: data.connectedRepos?.length ?? 0,
+        availableReposCount: data.availableRepos?.length ?? 0,
+        error: data.error || null,
+      });
+
+      if (data.availableRepos?.length > 0) {
+        console.log('[useGitHub/fetchStatus] Available repos:', data.availableRepos.map((r: GitHubRepoInfo) => r.fullName));
+      }
+
+      setConnected(data.connected);
+      setConnectedRepos(data.connectedRepos || []);
+      setAvailableRepos(data.availableRepos || []);
+    } catch (err) {
+      console.error('[useGitHub/fetchStatus] Failed to fetch status:', err);
+      setError('無法載入 GitHub 狀態');
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, authToken, getHeaders]);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  // ============ 連結管理 ============
+
+  const connect = useCallback(async () => {
+    try {
+      // 先取得安裝 URL（需要認證）
+      const response = await fetch(`${apiUrl}/api/github/install-url`, {
+        method: 'POST',
+        headers: getHeaders(),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || 'Failed to get install URL');
+      }
+
+      // 用新分頁開啟 GitHub App 安裝頁（保留原本的應用）
+      window.open(data.installUrl, '_blank', 'noopener,noreferrer');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to connect GitHub';
+      setError(message);
+      console.error('[useGitHub] Connect error:', err);
+    }
+  }, [apiUrl, getHeaders]);
+
+  const disconnect = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(`${apiUrl}/api/github/disconnect`, {
+        method: 'DELETE',
+        headers: getHeaders(),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to disconnect');
+      }
+
+      setConnected(false);
+      setConnectedRepos([]);
+      setAvailableRepos([]);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to disconnect';
+      setError(message);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, getHeaders]);
+
+  const refresh = useCallback(async () => {
+    await fetchStatus();
+  }, [fetchStatus]);
+
+  // ============ Repo 管理 ============
+
+  const cloneRepo = useCallback(async (repoFullName: string): Promise<ConnectedRepo> => {
+    const [owner, repo] = repoFullName.split('/');
+
+    try {
+      const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/clone`, {
+        method: 'POST',
+        headers: getHeaders(),
+      });
+
+      const data = await response.json();
+
+      // 檢查 HTTP 狀態和業務邏輯成功
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || data.message || 'Failed to clone');
+      }
+
+      // 更新狀態
+      await fetchStatus();
+
+      return data.repo;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to clone';
+      setError(message);
+      throw err;
+    }
+  }, [apiUrl, getHeaders, fetchStatus]);
+
+  const syncRepo = useCallback(async (repoFullName: string) => {
+    const [owner, repo] = repoFullName.split('/');
+
+    try {
+      const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/sync`, {
+        method: 'POST',
+        headers: getHeaders(),
+      });
+
+      const data = await response.json();
+
+      // 檢查 HTTP 狀態和業務邏輯成功
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || data.message || 'Failed to sync');
+      }
+
+      // 更新狀態
+      await fetchStatus();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to sync';
+      setError(message);
+      throw err;
+    }
+  }, [apiUrl, getHeaders, fetchStatus]);
+
+  const deleteRepo = useCallback(async (repoFullName: string) => {
+    const [owner, repo] = repoFullName.split('/');
+
+    try {
+      const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}`, {
+        method: 'DELETE',
+        headers: getHeaders(),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to delete');
+      }
+
+      // 更新狀態
+      await fetchStatus();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to delete';
+      setError(message);
+      throw err;
+    }
+  }, [apiUrl, getHeaders, fetchStatus]);
+
+  // ============ Git 操作 ============
+
+  const createBranch = useCallback(async (repoFullName: string, branchName: string) => {
+    const [owner, repo] = repoFullName.split('/');
+
+    const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/branch`, {
+      method: 'POST',
+      headers: getHeaders(),
+      body: JSON.stringify({ branchName }),
+    });
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to create branch');
+    }
+
+    await fetchStatus();
+  }, [apiUrl, getHeaders, fetchStatus]);
+
+  const switchBranch = useCallback(async (repoFullName: string, branchName: string) => {
+    const [owner, repo] = repoFullName.split('/');
+
+    const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/checkout`, {
+      method: 'POST',
+      headers: getHeaders(),
+      body: JSON.stringify({ branchName }),
+    });
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to switch branch');
+    }
+
+    await fetchStatus();
+  }, [apiUrl, getHeaders, fetchStatus]);
+
+  const commit = useCallback(async (
+    repoFullName: string,
+    message: string,
+    files?: string[]
+  ) => {
+    const [owner, repo] = repoFullName.split('/');
+
+    const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/commit`, {
+      method: 'POST',
+      headers: getHeaders(),
+      body: JSON.stringify({ message, files }),
+    });
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to commit');
+    }
+  }, [apiUrl, getHeaders]);
+
+  const push = useCallback(async (repoFullName: string) => {
+    const [owner, repo] = repoFullName.split('/');
+
+    const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/push`, {
+      method: 'POST',
+      headers: getHeaders(),
+    });
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to push');
+    }
+  }, [apiUrl, getHeaders]);
+
+  const getStatus = useCallback(async (repoFullName: string): Promise<GitStatus> => {
+    const [owner, repo] = repoFullName.split('/');
+
+    const response = await fetch(`${apiUrl}/api/github/repos/${owner}/${repo}/status`, {
+      headers: getHeaders(),
+    });
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to get status');
+    }
+
+    return data.data as GitStatus;
+  }, [apiUrl, getHeaders]);
+
+  const getLog = useCallback(async (
+    repoFullName: string,
+    limit = 10
+  ): Promise<GitCommit[]> => {
+    const [owner, repo] = repoFullName.split('/');
+
+    const response = await fetch(
+      `${apiUrl}/api/github/repos/${owner}/${repo}/log?limit=${limit}`,
+      { headers: getHeaders() }
+    );
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to get log');
+    }
+
+    return data.data?.commits || [];
+  }, [apiUrl, getHeaders]);
+
+  return {
+    connected,
+    loading,
+    error,
+    connectedRepos,
+    availableRepos,
+    connect,
+    disconnect,
+    refresh,
+    cloneRepo,
+    syncRepo,
+    deleteRepo,
+    createBranch,
+    switchBranch,
+    commit,
+    push,
+    getStatus,
+    getLog,
+  };
+}

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

@@ -0,0 +1,150 @@
+/**
+ * useScrollToBottom Hook
+ *
+ * 職責：管理智慧捲動邏輯，偵測使用者是否在底部
+ *
+ * 遵循原則：
+ * - SRP: 單一職責 - 只負責捲動狀態管理
+ * - DRY: 可重用的捲動邏輯
+ * - SOLID: 介面隔離 - 只暴露必要的 API
+ */
+
+import { useState, useCallback, RefObject } from 'react';
+
+/**
+ * 捲動臨界值（像素）
+ * 當捲動位置距離底部小於此值時，視為「在底部」
+ *
+ * 🎯 設定為 80px - 用於判斷是否顯示「回到底部」按鈕
+ * - 距離底部 > 80px：顯示浮動按鈕
+ * - 距離底部 ≤ 80px：隱藏浮動按鈕
+ * - 點擊按鈕：捲動到底部
+ *
+ * ⚠️ 已取消自動捲動功能，使用者需手動滾動查看新內容
+ */
+const BOTTOM_THRESHOLD = 80;
+
+export interface UseScrollToBottomOptions {
+  /**
+   * 捲動容器的 ref
+   */
+  scrollContainerRef: RefObject<HTMLElement | null>;
+
+  /**
+   * 捲動目標元素的 ref（通常是訊息列表底部的錨點）
+   */
+  scrollTargetRef: RefObject<HTMLElement | null>;
+
+  /**
+   * 自訂臨界值（可選）
+   */
+  threshold?: number;
+}
+
+export interface UseScrollToBottomReturn {
+  /**
+   * 是否在底部（距離底部 < threshold）
+   */
+  isAtBottom: boolean;
+
+  /**
+   * 捲動到底部的函式
+   */
+  scrollToBottom: () => void;
+
+  /**
+   * Scroll 事件處理器（需綁定到 ScrollArea）
+   */
+  handleScroll: () => void;
+
+  /**
+   * 手動設定 isAtBottom 狀態（用於強制恢復自動捲動）
+   */
+  setIsAtBottom: (value: boolean) => void;
+
+  /**
+   * 手動檢查是否在底部（用於內容變化時主動更新狀態）
+   */
+  checkIsAtBottom: () => void;
+}
+
+/**
+ * 智慧捲動 Hook
+ *
+ * @example
+ * ```tsx
+ * const scrollAreaRef = useRef<HTMLDivElement>(null);
+ * const messagesEndRef = useRef<HTMLDivElement>(null);
+ *
+ * const { isAtBottom, scrollToBottom, handleScroll } = useScrollToBottom({
+ *   scrollContainerRef: scrollAreaRef,
+ *   scrollTargetRef: messagesEndRef,
+ * });
+ *
+ * // 只有在底部才自動捲動
+ * useEffect(() => {
+ *   if (isAtBottom) scrollToBottom();
+ * }, [messages]);
+ *
+ * <ScrollArea ref={scrollAreaRef} onScroll={handleScroll}>
+ *   ...
+ * </ScrollArea>
+ * ```
+ */
+export function useScrollToBottom({
+  scrollContainerRef,
+  scrollTargetRef,
+  threshold = BOTTOM_THRESHOLD,
+}: UseScrollToBottomOptions): UseScrollToBottomReturn {
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  /**
+   * 檢查是否在底部（共用邏輯）
+   * 可由 scroll 事件或內容變化時呼叫
+   */
+  const checkIsAtBottom = useCallback(() => {
+    const element = scrollContainerRef.current;
+    if (!element) return;
+
+    const { scrollHeight, scrollTop, clientHeight } = element;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+
+    // 🎯 單純的距離判斷
+    const atBottom = distanceFromBottom <= threshold;
+    setIsAtBottom(atBottom);
+  }, [scrollContainerRef, threshold]);
+
+  /**
+   * 捲動到底部
+   * 使用 smooth behavior 提供更好的 UX
+   * 🎯 點擊浮動按鈕時手動跳回底部
+   *
+   * ⚠️ 不立即設定 isAtBottom = true，讓 scroll 事件自然更新
+   * 這樣可以避免時序問題（smooth 滾動是異步的）
+   */
+  const scrollToBottom = useCallback(() => {
+    scrollTargetRef.current?.scrollIntoView({ behavior: 'smooth' });
+    // 移除立即設定，讓 scroll 事件和內容變化檢查自然更新狀態
+  }, [scrollTargetRef]);
+
+  /**
+   * Scroll 事件處理器
+   * 只根據「距離底部」判斷是否顯示浮動按鈕
+   *
+   * 🎯 簡化邏輯（已取消自動捲動功能）：
+   * - 距離底部 > 80px → isAtBottom = false（顯示浮動按鈕）
+   * - 距離底部 ≤ 80px → isAtBottom = true（隱藏浮動按鈕）
+   * - 不需要判斷滑動方向，因為沒有自動捲動
+   */
+  const handleScroll = useCallback(() => {
+    checkIsAtBottom();
+  }, [checkIsAtBottom]);
+
+  return {
+    isAtBottom,
+    scrollToBottom,
+    handleScroll,
+    setIsAtBottom,
+    checkIsAtBottom,
+  };
+}

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect } from 'react';
+import { Capacitor } from '@capacitor/core';
+
+/**
+ * StatusBar Hook - 初始化 Capacitor StatusBar
+ *
+ * 功能：
+ * 1. 設定 StatusBar 樣式（亮色）
+ * 2. 啟用 overlaysWebView 讓內容延伸到 status bar 下方
+ * 3. 配合 CSS env(safe-area-inset-*) 避免內容被遮蔽
+ *
+ * 適用於：iOS 和 Android
+ */
+export function useStatusBar() {
+  useEffect(() => {
+    // 只在原生平台（iOS/Android）執行
+    if (!Capacitor.isNativePlatform()) {
+      return;
+    }
+
+    const initStatusBar = async () => {
+      // Android: 設定 Navigation Bar（虛擬按鈕區域）
+      try {
+        const { NavigationBar } = await import('@capgo/capacitor-navigation-bar');
+
+        // 設定 Navigation Bar 背景色和按鈕樣式
+        await NavigationBar.setNavigationBarColor({
+          color: '#F0EBE3',  // 榻榻米色背景
+          darkButtons: true,  // 黑色按鈕（適合淺色背景）
+        });
+
+        console.log('✅ NavigationBar initialized successfully');
+      } catch (error) {
+        console.error('❌ Failed to initialize NavigationBar:', error);
+      }
+    };
+
+    initStatusBar();
+  }, []);
+}