botrun-horse 2.29.2 → 2.31.0

package/botrun-c/web/components/smart-button-group.tsx

@@ -0,0 +1,132 @@
+/**
+ * Smart Button Group Component
+ *
+ * 智慧按鈕群組組件
+ * 渲染從 AI 回應中解析出的智慧按鈕
+ *
+ * 特性：
+ * - 使用 shadcn Button 組件
+ * - 支援 lucide-react 圖標
+ * - 點擊後自動送出訊息（代替使用者輸入）
+ * - 響應式佈局（自動換行）
+ */
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import * as Icons from "lucide-react";
+import { LucideIcon } from "lucide-react";
+
+export interface SmartButtonProps {
+  text: string;
+  icon?: string; // lucide icon name
+  action?: "send" | "download";
+}
+
+export interface SmartButtonGroupProps {
+  buttons: SmartButtonProps[];
+  onButtonClick: (button: SmartButtonProps) => void;
+  className?: string;
+}
+
+/**
+ * 根據 icon 名稱取得 Lucide Icon 組件
+ */
+function getIconComponent(iconName?: string): LucideIcon | null {
+  if (!iconName) return null;
+
+  // 轉換 kebab-case 為 PascalCase
+  // 例如：help-circle → HelpCircle
+  const pascalCase = iconName
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+
+  // @ts-ignore - 動態取得 icon
+  const IconComponent = Icons[pascalCase] as LucideIcon;
+
+  return IconComponent || null;
+}
+
+/**
+ * SmartButtonGroup 組件
+ *
+ * @example
+ * ```tsx
+ * <SmartButtonGroup
+ *   buttons={[
+ *     { text: "請問妳有哪些能力？", icon: "help-circle" },
+ *     { text: "查看使用教學", icon: "book-open" }
+ *   ]}
+ *   onButtonClick={(btn) => sendMessage(btn.text)}
+ * />
+ * ```
+ */
+export function SmartButtonGroup({
+  buttons,
+  onButtonClick,
+  className = "",
+}: SmartButtonGroupProps) {
+  if (!buttons || buttons.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`flex flex-wrap gap-2 mt-3 ${className}`}
+      role="group"
+      aria-label="智慧按鈕"
+    >
+      {buttons.map((button, index) => {
+        const IconComponent = getIconComponent(button.icon);
+
+        return (
+          <Button
+            key={index}
+            variant="outline"
+            size="sm"
+            onClick={() => onButtonClick(button)}
+            className="transition-all hover:scale-105"
+            aria-label={button.text}
+          >
+            {IconComponent && (
+              <IconComponent className="mr-2 h-4 w-4" aria-hidden="true" />
+            )}
+            <span>{button.text}</span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * 單一智慧按鈕組件（可選，如果需要單獨使用）
+ */
+export function SmartButton({
+  text,
+  icon,
+  onClick,
+  className = "",
+}: {
+  text: string;
+  icon?: string;
+  onClick: () => void;
+  className?: string;
+}) {
+  const IconComponent = getIconComponent(icon);
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={onClick}
+      className={`transition-all hover:scale-105 ${className}`}
+      aria-label={text}
+    >
+      {IconComponent && (
+        <IconComponent className="mr-2 h-4 w-4" aria-hidden="true" />
+      )}
+      <span>{text}</span>
+    </Button>
+  );
+}

package/botrun-c/web/config/smart-buttons.ts

@@ -0,0 +1,295 @@
+/**
+ * Smart Buttons Configuration
+ *
+ * 智慧按鈕設定檔
+ * 從 BOTRUN.md 自動編譯生成
+ *
+ * Source: BOTRUN.md (Lines 6-26)
+ * Compiled by: botrun-button agent (natural language parsing)
+ * Last updated: 2025-10-23
+ */
+
+export interface SmartButton {
+  id: string;
+  text: string;
+  icon: string; // lucide-react icon name
+  action: "send" | "download";
+  description?: string; // 給開發者看的註解
+}
+
+export type TriggerCondition =
+  | "user_greeting" // 使用者打招呼
+  | "user_confused" // 使用者困惑
+  | "conversation_start" // 對話開始
+  | "form_completed" // 表單完成
+  | "tech_question"; // 技術問題
+
+/**
+ * 按鈕定義
+ * 從 BOTRUN.md 自然語言描述編譯而來
+ */
+export const BUTTON_DEFINITIONS: Record<string, SmartButton> = {
+  // 對話剛開始時
+  check_capability: {
+    id: "check_capability",
+    text: "請問妳有哪些能力？",
+    icon: "help-circle",
+    action: "send",
+    description: "對話開始時 / 使用者困惑時顯示",
+  },
+  view_tutorial: {
+    id: "view_tutorial",
+    text: "查看使用教學",
+    icon: "book-open",
+    action: "send",
+    description: "對話開始時顯示",
+  },
+  start_new_chat: {
+    id: "start_new_chat",
+    text: "開始新的對話",
+    icon: "play-circle",
+    action: "send",
+    description: "對話開始時顯示",
+  },
+
+  // 使用者打招呼時
+  search_taiwan_news: {
+    id: "search_taiwan_news",
+    text: "請幫我上網查臺灣今天新聞",
+    icon: "newspaper",
+    action: "send",
+    description: "使用者說 hi/hello 時顯示",
+  },
+  view_trending: {
+    id: "view_trending",
+    text: "查看熱門話題",
+    icon: "trending-up",
+    action: "send",
+    description: "使用者打招呼時顯示",
+  },
+
+  // 使用者困惑時
+  feature_intro: {
+    id: "feature_intro",
+    text: "我的功能介紹",
+    icon: "help-circle",
+    action: "send",
+    description: "使用者困惑時顯示",
+  },
+  usage_examples: {
+    id: "usage_examples",
+    text: "使用範例",
+    icon: "lightbulb",
+    action: "send",
+    description: "使用者困惑時顯示",
+  },
+
+  // 表單完成時
+  download_pdf: {
+    id: "download_pdf",
+    text: "下載 PDF",
+    icon: "download",
+    action: "download",
+    description: "表單填寫完成時自動顯示",
+  },
+
+  // 技術問題時
+  view_tech_docs: {
+    id: "view_tech_docs",
+    text: "查看技術文件",
+    icon: "book-open",
+    action: "send",
+    description: "使用者問技術問題時顯示",
+  },
+};
+
+/**
+ * 觸發規則
+ * 定義在什麼條件下顯示哪些按鈕
+ */
+export const TRIGGER_RULES: Record<TriggerCondition, string[]> = {
+  conversation_start: [
+    "check_capability",
+    "view_tutorial",
+    "start_new_chat",
+  ],
+  user_greeting: [
+    "search_taiwan_news",
+    "view_trending",
+  ],
+  user_confused: [
+    "feature_intro",
+    "usage_examples",
+  ],
+  form_completed: [
+    "download_pdf",
+  ],
+  tech_question: [
+    "view_tech_docs",
+  ],
+};
+
+/**
+ * 根據 button ID 取得按鈕定義
+ */
+export function getButton(buttonId: string): SmartButton | undefined {
+  return BUTTON_DEFINITIONS[buttonId];
+}
+
+/**
+ * 根據觸發條件取得應顯示的按鈕列表
+ */
+export function getButtonsByCondition(condition: TriggerCondition): SmartButton[] {
+  const buttonIds = TRIGGER_RULES[condition] || [];
+  return buttonIds.map((id) => BUTTON_DEFINITIONS[id]).filter(Boolean);
+}
+
+/**
+ * AI 提示工程準則
+ * 告訴主 AI 何時應該輸出智慧按鈕
+ */
+export const AI_BUTTON_PROMPT = `
+## 智慧按鈕使用指南
+
+你可以在適當時機輸出智慧按鈕，讓使用者輕鬆點擊執行常見操作。
+
+### 輸出格式
+使用以下格式輸出按鈕（按鈕會自動渲染成可點擊的 UI 元件）：
+\`\`\`
+@botrun-button "按鈕文字" icon:icon-name
+\`\`\`
+
+### 觸發時機與按鈕
+
+#### 1. 對話剛開始時（第一條訊息）
+顯示 2-3 個按鈕幫助使用者快速開始：
+\`\`\`
+@botrun-button "請問妳有哪些能力？" icon:help-circle
+@botrun-button "查看使用教學" icon:book-open
+@botrun-button "開始新的對話" icon:play-circle
+\`\`\`
+
+#### 2. 使用者打招呼時（hi, hello, 嗨, 你好）
+熱情回應後顯示這些按鈕：
+\`\`\`
+@botrun-button "請幫我上網查臺灣今天新聞" icon:newspaper
+@botrun-button "查看熱門話題" icon:trending-up
+\`\`\`
+
+#### 3. 使用者看起來困惑時
+- 關鍵詞：「不知道該做什麼」、「你能幹嘛」、「有什麼功能」
+- 顯示按鈕：
+\`\`\`
+@botrun-button "我的功能介紹" icon:help-circle
+@botrun-button "使用範例" icon:lightbulb
+\`\`\`
+
+#### 4. 表單填寫完成時
+自動顯示下載按鈕：
+\`\`\`
+@botrun-button "下載 PDF" icon:download
+\`\`\`
+
+#### 5. 使用者問技術問題時
+- 關鍵詞：「API」、「技術」、「怎麼實作」、「原理」
+- 顯示按鈕：
+\`\`\`
+@botrun-button "查看技術文件" icon:book-open
+\`\`\`
+
+### 重要原則
+- ✅ 按鈕應該自然出現在對話流中，不要突兀
+- ✅ 每次對話最多顯示 2-3 個按鈕
+- ✅ 按鈕文字要清楚明確，讓使用者一看就懂
+- ✅ 不要過度使用按鈕，只在真正有幫助時才顯示
+- ❌ 不要在每次回應都顯示按鈕
+- ❌ 不要顯示重複或相似的按鈕
+
+### 範例對話
+
+**範例 1: 對話開始**
+使用者: （第一次訪問）
+AI: 嗨，妳好啊，我們是波特人～ 很高興見到妳！我可以幫妳做很多事情，妳想從哪裡開始呢？
+
+@botrun-button "請問妳有哪些能力？" icon:help-circle
+@botrun-button "查看使用教學" icon:book-open
+
+---
+
+**範例 2: 使用者打招呼**
+使用者: hi
+AI: 嗨！很高興見到妳 😊 今天想聊點什麼呢？
+
+@botrun-button "請幫我上網查臺灣今天新聞" icon:newspaper
+@botrun-button "查看熱門話題" icon:trending-up
+
+---
+
+**範例 3: 使用者困惑**
+使用者: 不知道該做什麼
+AI: 沒關係，讓我來幫妳！我有很多功能可以協助妳，妳可以點擊下面的按鈕快速了解：
+
+@botrun-button "我的功能介紹" icon:help-circle
+@botrun-button "使用範例" icon:lightbulb
+`;
+
+/**
+ * 根據按鈕文字自動推斷適當的 icon
+ * 參考: .claude/agents/botrun-button.md Icon 推斷參考表
+ */
+export function inferIconFromText(text: string): string {
+  // 將文字轉為小寫方便比對
+  const lowerText = text.toLowerCase();
+
+  // 按優先順序檢查關鍵字
+  if (lowerText.includes("新聞") || lowerText.includes("news")) return "newspaper";
+  if (lowerText.includes("下載") || lowerText.includes("pdf") || lowerText.includes("download")) return "download";
+  if (lowerText.includes("查詢") || lowerText.includes("搜尋") || lowerText.includes("search")) return "search";
+  if (lowerText.includes("能力") || lowerText.includes("功能") || lowerText.includes("幫助") || lowerText.includes("help")) return "help-circle";
+  if (lowerText.includes("教學") || lowerText.includes("文件") || lowerText.includes("doc")) return "book-open";
+  if (lowerText.includes("開始") || lowerText.includes("使用") || lowerText.includes("啟動") || lowerText.includes("start")) return "play-circle";
+  if (lowerText.includes("表單") || lowerText.includes("填寫") || lowerText.includes("form")) return "file-text";
+  if (lowerText.includes("熱門") || lowerText.includes("話題") || lowerText.includes("trending")) return "trending-up";
+  if (lowerText.includes("範例") || lowerText.includes("example")) return "lightbulb";
+  if (lowerText.includes("設定") || lowerText.includes("配置") || lowerText.includes("setting")) return "settings";
+  if (lowerText.includes("上傳") || lowerText.includes("檔案") || lowerText.includes("upload")) return "upload";
+  if (lowerText.includes("編輯") || lowerText.includes("修改") || lowerText.includes("edit")) return "edit";
+  if (lowerText.includes("刪除") || lowerText.includes("移除") || lowerText.includes("delete")) return "trash-2";
+  if (lowerText.includes("儲存") || lowerText.includes("保存") || lowerText.includes("save")) return "save";
+
+  // 預設 icon
+  return "message-square";
+}
+
+/**
+ * 解析 AI 輸出中的按鈕標記
+ * 這個函數會在前端使用，用來從 AI 回應中提取按鈕
+ *
+ * 支援的格式：
+ * - @botrun-button "按鈕文字" icon:icon-name (明確指定 icon)
+ * - @botrun-button "按鈕文字" (自動根據文字推斷 icon)
+ */
+export function parseButtonsFromText(text: string): {
+  cleanText: string;
+  buttons: Array<{ text: string; icon: string }>;
+} {
+  const buttonRegex = /@botrun-button\s+"([^"]+)"(?:\s+icon:(\S+))?/g;
+  const buttons: Array<{ text: string; icon: string }> = [];
+  let match;
+
+  while ((match = buttonRegex.exec(text)) !== null) {
+    const buttonText = match[1];
+    const explicitIcon = match[2];
+
+    buttons.push({
+      text: buttonText,
+      // 如果有明確指定 icon 就用，否則根據文字自動推斷
+      icon: explicitIcon || inferIconFromText(buttonText),
+    });
+  }
+
+  // 移除按鈕標記，只保留純文字
+  const cleanText = text.replace(buttonRegex, "").trim();
+
+  return { cleanText, buttons };
+}

package/botrun-c/web/config/welcome-messages.ts

@@ -0,0 +1,29 @@
+/**
+ * Welcome Messages Configuration
+ *
+ * 歡迎訊息設定檔
+ * 從 BOTRUN.md 提取的歡迎詞，用於 AI chat 啟動時自動顯示
+ *
+ * Source: BOTRUN.md Line 2
+ * Marker: @botrun-welcome
+ */
+
+export const WELCOME_MESSAGES = {
+  zh: {
+    title: "歡迎",
+    content: `嗨，我們是政府的好夥伴波特人：
+🔒 臺灣封閉地端三大機房：新竹國網中心、彰化Google機房、臺北AWS機房
+🔴 怕外洩 → 封閉會議管理
+⚠️  別亂講 → 零幻覺證明
+🎯 客製化 → 孵化共享波特人`,
+    source: "BOTRUN.md @botrun-welcome (Line 2)",
+  },
+};
+
+/**
+ * 取得預設歡迎訊息
+ * @returns 歡迎訊息物件
+ */
+export function getDefaultWelcomeMessage() {
+  return WELCOME_MESSAGES.zh;
+}

package/botrun-c/web/contexts/AuthContext.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { User, onAuthStateChanged, signOut as firebaseSignOut } from 'firebase/auth';
+import { getClientAuth } from '@/lib/firebase';
+import { isNativePlatform, getCurrentUserNative, signOutNative } from '@/lib/firebase-capacitor';
+import { Capacitor } from '@capacitor/core';
+import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
+
+// 版本號：用於確認更新是否生效
+const AUTH_CONTEXT_VERSION = '3.0.0-authStateChange-listener';
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  error: Error | null;
+  signOut: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+console.log(`[AuthContext] 🔄 AuthContext loaded - Version: ${AUTH_CONTEXT_VERSION}`);
+
+export function useAuth(): AuthContextType {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  console.log(`[AuthContext] 🔄 AuthProvider mounting - Version: ${AUTH_CONTEXT_VERSION}`);
+  console.log(`[AuthContext] Platform: ${Capacitor.getPlatform()}, isNative: ${isNativePlatform()}`);
+
+  // Logout 函數
+  const signOut = async () => {
+    console.log(`[AuthContext] 🚪 signOut called - Version: ${AUTH_CONTEXT_VERSION}`);
+    console.log(`[AuthContext] Platform: ${Capacitor.getPlatform()}, isNative: ${isNativePlatform()}`);
+
+    // 原生平台使用原生登出
+    if (isNativePlatform()) {
+      console.log('[AuthContext] Using native sign out');
+      try {
+        await signOutNative();
+        console.log('[AuthContext] ✅ Native sign out successful');
+        setUser(null);
+      } catch (nativeError) {
+        console.error('[AuthContext] ❌ Native sign out failed:', nativeError);
+      }
+      return;
+    }
+
+    // Web 平台使用 Firebase Web Auth
+    console.log('[AuthContext] Using web Firebase sign out');
+    const auth = getClientAuth();
+    if (!auth) {
+      console.error('[AuthContext] Firebase Auth not initialized, cannot sign out');
+      return;
+    }
+
+    try {
+      console.log('[AuthContext] User signing out...', { uid: auth.currentUser?.uid });
+      await firebaseSignOut(auth);
+      console.log('[AuthContext] ✅ User signed out successfully');
+    } catch (logoutError) {
+      console.error('[AuthContext] ❌ Sign out failed:', logoutError);
+    }
+  };
+
+  useEffect(() => {
+    console.log(`[AuthContext] 🔧 useEffect triggered - Version: ${AUTH_CONTEXT_VERSION}`);
+    console.log(`[AuthContext] Platform: ${Capacitor.getPlatform()}, isNative: ${isNativePlatform()}`);
+
+    // 原生平台：使用原生認證狀態管理
+    if (isNativePlatform()) {
+      console.log('[AuthContext] ⚡ Using NATIVE auth state management with authStateChange listener');
+
+      // 處理 auth state 變化的共用邏輯
+      const handleAuthStateChange = async (hasUser: boolean) => {
+        console.log('[AuthContext] 🔔 Auth state changed, hasUser:', hasUser);
+
+        try {
+          if (hasUser) {
+            const currentUser = await getCurrentUserNative();
+            console.log('[AuthContext] Native current user:', currentUser?.email || 'No user');
+
+            if (currentUser) {
+              console.log('[AuthContext] ✅ Native user found:', {
+                uid: currentUser.uid,
+                email: currentUser.email,
+                displayName: currentUser.displayName,
+              });
+
+              // 🔑 只在 user 真正改變時才更新 state
+              setUser(prevUser => {
+                if (prevUser?.uid === currentUser.uid &&
+                    prevUser?.email === currentUser.email &&
+                    prevUser?.displayName === currentUser.displayName) {
+                  console.log('[AuthContext] User unchanged, skip update');
+                  return prevUser;
+                }
+                console.log('[AuthContext] User changed, updating state');
+                return currentUser;
+              });
+              setError(null);
+            }
+          } else {
+            console.log('[AuthContext] No native user signed in');
+            setUser(prevUser => {
+              if (prevUser === null) {
+                console.log('[AuthContext] User already null, skip update');
+                return null;
+              }
+              console.log('[AuthContext] Clearing user');
+              return null;
+            });
+            setError(null);
+          }
+        } catch (err) {
+          console.error('[AuthContext] ❌ Error handling auth state change:', err);
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setUser(null);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      // 初始檢查當前用戶
+      handleAuthStateChange(true).catch(() => {
+        setLoading(false);
+      });
+
+      // 監聽 auth state 變化（即時觸發，無延遲）
+      let listenerHandle: Awaited<ReturnType<typeof FirebaseAuthentication.addListener>> | null = null;
+
+      FirebaseAuthentication.addListener(
+        'authStateChange',
+        async (result) => {
+          console.log('[AuthContext] 🔔 authStateChange event fired:', result.user ? 'User signed in' : 'No user');
+          await handleAuthStateChange(!!result.user);
+        }
+      ).then(handle => {
+        listenerHandle = handle;
+      });
+
+      return () => {
+        console.log('[AuthContext] Cleaning up native authStateChange listener');
+        if (listenerHandle) {
+          listenerHandle.remove();
+        }
+      };
+    }
+
+    // Web 平台：使用 Firebase Web Auth
+    console.log('[AuthContext] ⚡ Using WEB auth state management');
+    console.log('[AuthContext] Setting up Firebase auth state listener...');
+
+    const authInstance = getClientAuth();
+
+    if (!authInstance) {
+      console.error('[AuthContext] ❌ Firebase Auth not initialized');
+      setError(new Error('Firebase Auth initialization failed'));
+      setLoading(false);
+      return;
+    }
+
+    console.log('[AuthContext] ✅ Firebase Auth instance obtained');
+
+    // 監聽 Firebase 的身份驗證狀態變化
+    const unsubscribe = onAuthStateChanged(
+      authInstance,
+      async (currentUser) => {
+        if (currentUser) {
+          // 使用者已登入
+          console.log('[AuthContext] ✅ Web user signed in:', {
+            uid: currentUser.uid,
+            email: currentUser.email,
+            displayName: currentUser.displayName,
+          });
+
+          setUser(currentUser);
+          setError(null);
+        } else {
+          // 使用者已登出
+          console.log('[AuthContext] Web user signed out');
+          setUser(null);
+          setError(null);
+        }
+
+        setLoading(false);
+      },
+      (authError) => {
+        // 監聽器發生錯誤
+        console.error('[AuthContext] ❌ Auth state listener error:', authError);
+        setError(authError instanceof Error ? authError : new Error(String(authError)));
+        setUser(null);
+        setLoading(false);
+      }
+    );
+
+    // 清理函數
+    return () => {
+      console.log('[AuthContext] Cleaning up web auth state listener');
+      unsubscribe();
+    };
+  }, []);
+
+  const value = { user, loading, error, signOut };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}