botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/ConversationList.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { MessageSquarePlus, Loader2, AlertCircle } from "lucide-react";
+import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
+import { ConversationListItem } from "@/components/ConversationListItem";
+import type { Conversation } from "@/types/conversation";
+
+interface ConversationListProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  conversations: Conversation[];
+  currentConversationId?: string;
+  isLoading: boolean;
+  error: Error | null;
+  onSelect: (conversation: Conversation) => void;
+  onNewChat: () => void;
+  onUpdateTitle: (conversationId: string, title: string) => Promise<Conversation>;
+  onDelete: (conversationId: string) => Promise<void>;
+}
+
+export function ConversationList({
+  open,
+  onOpenChange,
+  conversations,
+  currentConversationId,
+  isLoading,
+  error,
+  onSelect,
+  onNewChat,
+  onUpdateTitle,
+  onDelete,
+}: ConversationListProps) {
+  const { isCapacitor } = useCapacitorPlatform();
+  const [editingConversation, setEditingConversation] = useState<Conversation | null>(null);
+  const [editTitle, setEditTitle] = useState("");
+  const [deletingConversation, setDeletingConversation] = useState<Conversation | null>(null);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleEdit = (conversation: Conversation) => {
+    setEditingConversation(conversation);
+    setEditTitle(conversation.title);
+  };
+
+  const handleSaveTitle = async () => {
+    if (!editingConversation || !editTitle.trim()) return;
+
+    setIsUpdating(true);
+    try {
+      await onUpdateTitle(editingConversation.id, editTitle.trim());
+      setEditingConversation(null);
+    } catch (err) {
+      console.error("Failed to update title:", err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deletingConversation) return;
+
+    setIsDeleting(true);
+    try {
+      await onDelete(deletingConversation.id);
+      setDeletingConversation(null);
+    } catch (err) {
+      console.error("Failed to delete conversation:", err);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleSelectConversation = (conversation: Conversation) => {
+    onSelect(conversation);
+    onOpenChange(false);
+  };
+
+  const handleNewChat = () => {
+    onNewChat();
+    onOpenChange(false);
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent
+          side="left"
+          className="w-[320px] sm:w-[400px] p-0 flex flex-col"
+          style={{
+            paddingTop: isCapacitor ? "var(--safe-area-inset-top)" : undefined,
+            paddingBottom: isCapacitor ? "var(--safe-area-inset-bottom)" : undefined,
+          }}
+        >
+          <SheetHeader className="px-4 pt-4 pb-3 border-b">
+            <div className="flex flex-col gap-3 pr-8">
+              <SheetTitle>歷史對話</SheetTitle>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleNewChat}
+                className="gap-1 w-fit"
+              >
+                <MessageSquarePlus className="h-4 w-4" />
+                <span>新對話</span>
+              </Button>
+            </div>
+            <SheetDescription className="sr-only">
+              瀏覽和管理您的歷史對話記錄
+            </SheetDescription>
+          </SheetHeader>
+
+          <ScrollArea className="flex-1 px-4 py-2">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <AlertCircle className="h-8 w-8 text-destructive mb-2" />
+                <p className="text-sm text-muted-foreground">
+                  無法載入對話列表
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {error.message}
+                </p>
+              </div>
+            ) : conversations.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <MessageSquarePlus className="h-8 w-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">
+                  還沒有對話記錄
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  開始新對話後會自動儲存
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {conversations.map((conversation) => (
+                  <ConversationListItem
+                    key={conversation.id}
+                    conversation={conversation}
+                    isActive={conversation.id === currentConversationId}
+                    onClick={() => handleSelectConversation(conversation)}
+                    onEdit={handleEdit}
+                    onDelete={setDeletingConversation}
+                  />
+                ))}
+              </div>
+            )}
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+
+      {/* Edit Title Dialog */}
+      <AlertDialog
+        open={!!editingConversation}
+        onOpenChange={(open) => !open && setEditingConversation(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>編輯標題</AlertDialogTitle>
+            <AlertDialogDescription>
+              為這個對話設定一個新的標題
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <Input
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            placeholder="輸入標題..."
+            className="mt-2"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !isUpdating) {
+                handleSaveTitle();
+              }
+            }}
+          />
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isUpdating}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleSaveTitle}
+              disabled={isUpdating || !editTitle.trim()}
+            >
+              {isUpdating ? "儲存中..." : "儲存"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog
+        open={!!deletingConversation}
+        onOpenChange={(open) => !open && setDeletingConversation(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>刪除對話</AlertDialogTitle>
+            <AlertDialogDescription>
+              確定要刪除「{deletingConversation?.title}」嗎？此操作無法復原。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? "刪除中..." : "確認刪除"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/botrun-c/web/components/ConversationListItem.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { MessageSquare, MoreVertical, Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Conversation } from "@/types/conversation";
+
+/**
+ * 簡單的相對時間格式化
+ */
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return "剛剛";
+  if (diffMin < 60) return `${diffMin} 分鐘前`;
+  if (diffHour < 24) return `${diffHour} 小時前`;
+  if (diffDay < 7) return `${diffDay} 天前`;
+
+  return date.toLocaleDateString("zh-TW");
+}
+
+interface ConversationListItemProps {
+  conversation: Conversation;
+  isActive: boolean;
+  onClick: () => void;
+  onEdit: (conversation: Conversation) => void;
+  onDelete: (conversation: Conversation) => void;
+}
+
+export function ConversationListItem({
+  conversation,
+  isActive,
+  onClick,
+  onEdit,
+  onDelete,
+}: ConversationListItemProps) {
+  const formattedTime = formatRelativeTime(new Date(conversation.updatedAt));
+
+  return (
+    <div
+      className={`group flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+        isActive
+          ? "bg-primary/10 border-primary/30"
+          : "bg-card hover:bg-accent/50 border-transparent hover:border-border"
+      }`}
+      onClick={onClick}
+    >
+      {/* Icon */}
+      <div className="flex-shrink-0 mt-0.5">
+        <MessageSquare className="h-4 w-4 text-muted-foreground" />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <h4 className="text-sm font-medium truncate">{conversation.title}</h4>
+        {conversation.lastMessagePreview && (
+          <p className="text-xs text-muted-foreground truncate mt-0.5">
+            {conversation.lastMessagePreview}
+          </p>
+        )}
+        <div className="flex items-center gap-2 mt-1">
+          <span className="text-xs text-muted-foreground">{formattedTime}</span>
+          {conversation.messageCount > 0 && (
+            <span className="text-xs text-muted-foreground">
+              · {conversation.messageCount} 則訊息
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreVertical className="h-4 w-4" />
+              <span className="sr-only">對話選項</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                onEdit(conversation);
+              }}
+              className="gap-2"
+            >
+              <Pencil className="h-4 w-4" />
+              <span>編輯標題</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(conversation);
+              }}
+              className="gap-2 text-destructive focus:text-destructive"
+            >
+              <Trash2 className="h-4 w-4" />
+              <span>刪除對話</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

package/botrun-c/web/components/LoginPage.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { signInWithPopup } from 'firebase/auth';
+import { getClientAuth, getGoogleProvider } from '@/lib/firebase';
+import { isNativePlatform, signInWithGoogleNative } from '@/lib/firebase-capacitor';
+import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
+import { useAppVersion } from '@/hooks/useAppVersion';
+import Image from 'next/image';
+
+export function LoginPage() {
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { isCapacitor, isAndroid, isIOS } = useCapacitorPlatform();
+  //const [isCapacitor, setIsCapacitor] = useState(false);
+
+  const handleAppleSignIn = async () => {
+    try {
+      setIsSigningIn(true);
+      setError(null);
+
+      // Apple Sign-In 只在原生平台可用
+      if (!isNativePlatform()) {
+        console.error('[LoginPage] Apple Sign-In is only available on iOS');
+        setError('Apple 登入僅在 iOS App 中可用');
+        return;
+      }
+
+      console.log('[LoginPage] Using iOS Native Apple Sign-In');
+
+      // 動態載入 Firebase Authentication
+      const { FirebaseAuthentication } = await import('@capacitor-firebase/authentication');
+
+      console.log('[LoginPage] Calling FirebaseAuthentication.signInWithApple()...');
+      const result = await FirebaseAuthentication.signInWithApple({
+        skipNativeAuth: false,
+      });
+
+      console.log('[LoginPage] ✅ Apple sign-in successful:', result.user?.email);
+      console.log('[LoginPage] User info:', {
+        email: result.user?.email,
+        displayName: result.user?.displayName,
+        uid: result.user?.uid,
+      });
+
+      // AuthContext 會自動更新，不需要手動處理
+    } catch (error: any) {
+      console.error('[LoginPage] ❌ Apple sign-in failed:', error);
+      console.error('[LoginPage] Error details:', {
+        message: error.message,
+        code: error.code,
+        stack: error.stack,
+      });
+      setError(error.message || 'Apple 登入失敗，請重試');
+    } finally {
+      setIsSigningIn(false);
+    }
+  };
+  const { version, build, source } = useAppVersion();
+
+  const handleGoogleSignIn = async () => {
+    console.log('[LoginPage] ========================================');
+    console.log('[LoginPage] Platform:', isNativePlatform() ? 'Native (iOS/Android)' : 'Web');
+
+    try {
+      setIsSigningIn(true);
+      setError(null);
+      console.log('[LoginPage] State updated: isSigningIn = true');
+
+      // 檢查是否為原生平台（iOS/Android）
+      if (isNativePlatform()) {
+        console.log('[LoginPage] ✅ Detected Native platform');
+        console.log('[LoginPage] Calling signInWithGoogleNative()...');
+
+        try {
+          const user = await signInWithGoogleNative();
+          console.log('[LoginPage] ✅ Native sign-in successful:', user?.email);
+          // AuthContext 會自動更新
+          return;
+        } catch (nativeError: any) {
+          console.error('[LoginPage] ❌ Native sign-in error:', nativeError);
+          console.error('[LoginPage] Error details:', {
+            message: nativeError.message,
+            code: nativeError.code,
+            stack: nativeError.stack,
+          });
+          throw nativeError;
+        }
+      }
+
+      console.log('[LoginPage] Detected Web platform');
+
+      // Web 平台使用原本的 Firebase Auth
+      console.log('[LoginPage] Using Web Firebase Authentication');
+      const auth = getClientAuth();
+      const provider = getGoogleProvider();
+
+      console.log('[LoginPage] Auth instance:', auth ? 'Available' : 'Not available');
+      console.log('[LoginPage] Google Provider:', provider ? 'Available' : 'Not available');
+
+      if (!auth) {
+        console.error('[LoginPage] Firebase Auth not initialized');
+        setError('Authentication service unavailable. Please refresh the page.');
+        return;
+      }
+
+      if (!provider) {
+        console.error('[LoginPage] Google Provider not initialized');
+        setError('Google sign-in not available. Please refresh the page.');
+        return;
+      }
+
+      console.log('[LoginPage] Calling signInWithPopup...');
+      const result = await signInWithPopup(auth, provider);
+      console.log('[LoginPage] ✅ Web sign-in successful:', result.user.email);
+      // onAuthStateChanged will automatically trigger and update the UI
+    } catch (error: any) {
+      console.error('[LoginPage] ❌ Sign-in failed:', error);
+      setError(error.message || 'Sign-in failed. Please try again.');
+    } finally {
+      setIsSigningIn(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-background">
+      <div className="w-full max-w-md space-y-8 px-4">
+        <div className="text-center">
+          {/* Logo - 圓形滿版顯示 */}
+          <div className="mx-auto mb-6 h-20 w-20 rounded-full overflow-hidden">
+            <Image
+              src="/logo-48.png"
+              alt="波特人"
+              width={128}
+              height={128}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <h1 className="mb-2 text-2xl sm:text-3xl font-bold tracking-tight">
+            波特人 Botrun
+          </h1>
+          <p className="text-muted-foreground">
+            <br />
+            <br />
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          {/* Sign in with Google - 黑底白字，置於上方 */}
+          <Button
+            onClick={handleGoogleSignIn}
+            className="w-full bg-black text-white hover:bg-black/90 flex items-center justify-center"
+            size="lg"
+            disabled={isSigningIn}
+          >
+            <Image
+              src="/google_icon.png"
+              alt="Google"
+              width={20}
+              height={20}
+              className="mr-2"
+            />
+            {isSigningIn ? '登入中...' : '使用 Google 帳號登入'}
+          </Button>
+
+          {/* Sign in with Apple - 背景同底色，僅在 iOS App 中顯示 */}
+          {isIOS && (
+            <Button
+              onClick={handleAppleSignIn}
+              className="w-full bg-background text-foreground border border-input hover:bg-accent hover:text-accent-foreground flex items-center justify-center"
+              size="lg"
+              disabled={isSigningIn}
+            >
+              <Image
+                src="/apple_icon.png"
+                alt="Apple"
+                width={20}
+                height={20}
+                className="mr-2"
+              />
+              {isSigningIn ? '登入中...' : '使用 Apple 帳號登入'}
+            </Button>
+          )}
+
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-4 text-sm text-destructive">
+              <p className="font-semibold mb-1">登入錯誤</p>
+              {/* <p>{error}</p> */}
+            </div>
+          )}
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          登入即表示您同意我們的隱私權政策
+        </p>
+
+        <div className="text-center">
+          <p className="text-xs text-muted-foreground/60 font-mono">
+            {source === 'native' ? (
+              // Android/iOS App: 顯示原生版本號
+              <>v.{version}</>
+            ) : (
+              // Web: 顯示 Web 版本號
+              <>v.{version}</>
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/botrun-c/web/components/Providers.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { AuthProvider } from "@/contexts/AuthContext";
+import { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <AuthProvider>
+      {children}
+    </AuthProvider>
+  );
+}

package/botrun-c/web/components/StatusBarProvider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useStatusBar } from "@/hooks/useStatusBar";
+
+/**
+ * StatusBarProvider - Client Component Wrapper for StatusBar Hook
+ *
+ * 因為 app/layout.tsx 是 Server Component，不能直接使用 useEffect，
+ * 所以建立這個 Client Component 來封裝 useStatusBar hook。
+ */
+export function StatusBarProvider({ children }: { children: React.ReactNode }) {
+  // 初始化 StatusBar（只在 Capacitor 環境執行）
+  useStatusBar();
+
+  return <>{children}</>;
+}