botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/gdrive/gdrive-selector.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+/**
+ * GdriveSelector - 右上角 Google Drive 選單（桌面版）
+ */
+
+import { useState } from "react";
+import { FolderSync, Plus, Check, RefreshCw, Trash2, MoreVertical } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { useGdriveFolders, GdriveFolder } from "@/hooks/useGdriveFolders";
+import { useGdriveSync } from "@/hooks/useGdriveSync";
+import { GdriveAddDialog } from "./gdrive-add-dialog";
+import { useToast } from "@/hooks/use-toast";
+
+interface GdriveSelectorProps {
+  authToken?: string;
+  className?: string;
+}
+
+export function GdriveSelector({ authToken, className }: GdriveSelectorProps) {
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const { toast } = useToast();
+
+  const {
+    folders,
+    history,
+    isLoading: isFoldersLoading,
+    addFolder,
+    removeFolder,
+    toggleSelect,
+    refetch,
+  } = useGdriveFolders(authToken);
+
+  const {
+    isSyncing,
+    syncAll,
+  } = useGdriveSync(authToken);
+
+  const selectedCount = folders.filter(f => f.selected).length;
+
+  const handleAddFolder = async (url: string, alias?: string, type?: 'public' | 'service-account') => {
+    try {
+      await addFolder(url, alias, type);
+      toast({
+        title: "資料夾已新增",
+        description: "請點擊同步按鈕開始下載檔案",
+      });
+      setIsAddDialogOpen(false);
+    } catch (err: any) {
+      toast({
+        title: "新增失敗",
+        description: err.message || "無法新增資料夾",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleSync = async () => {
+    try {
+      await syncAll();
+      await refetch();
+      toast({
+        title: "同步完成",
+        description: "所有資料夾已更新",
+      });
+    } catch (err: any) {
+      toast({
+        title: "同步失敗",
+        description: err.message || "無法同步資料夾",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleRemove = async (id: string, name: string) => {
+    try {
+      await removeFolder(id);
+      toast({
+        title: "資料夾已移除",
+        description: `已移除「${name}」`,
+      });
+    } catch (err: any) {
+      toast({
+        title: "移除失敗",
+        description: err.message || "無法移除資料夾",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className={className}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="gap-2"
+            data-testid="gdrive-selector"
+          >
+            <FolderSync className="h-4 w-4" />
+            <span className="hidden sm:inline">
+              {folders.length > 0 ? `${folders.length} 個資料夾` : 'Google Drive'}
+            </span>
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="end" className="w-80">
+          {/* 標題列 */}
+          <div className="flex items-center justify-between px-2 py-1.5">
+            <span className="text-sm font-medium">Google Drive 資料夾</span>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={handleSync}
+              disabled={isSyncing || folders.length === 0}
+              data-testid="gdrive-sync-button"
+            >
+              <RefreshCw className={`h-4 w-4 ${isSyncing ? 'animate-spin' : ''}`} />
+            </Button>
+          </div>
+
+          <DropdownMenuSeparator />
+
+          {/* 資料夾列表 */}
+          {isFoldersLoading ? (
+            <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+              載入中...
+            </div>
+          ) : folders.length === 0 ? (
+            <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+              目前沒有已同步的資料夾
+            </div>
+          ) : (
+            folders.map((folder) => (
+              <FolderItem
+                key={folder.id}
+                folder={folder}
+                onToggle={() => toggleSelect(folder.id)}
+                onRemove={() => handleRemove(folder.id, folder.alias)}
+              />
+            ))
+          )}
+
+          <DropdownMenuSeparator />
+
+          {/* 新增按鈕 */}
+          <DropdownMenuItem
+            onClick={() => setIsAddDialogOpen(true)}
+            data-testid="gdrive-add-button"
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            新增資料夾
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* 新增對話框 */}
+      <GdriveAddDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        onAdd={handleAddFolder}
+        history={history}
+      />
+    </div>
+  );
+}
+
+// 資料夾項目元件
+interface FolderItemProps {
+  folder: GdriveFolder;
+  onToggle: () => void;
+  onRemove: () => void;
+}
+
+function FolderItem({ folder, onToggle, onRemove }: FolderItemProps) {
+  return (
+    <div className="flex items-center justify-between px-2 py-1.5 hover:bg-accent rounded-sm">
+      <button
+        className="flex items-center gap-2 flex-1 text-left"
+        onClick={onToggle}
+      >
+        <div className={`w-4 h-4 rounded border flex items-center justify-center ${
+          folder.selected ? 'bg-primary border-primary' : 'border-input'
+        }`}>
+          {folder.selected && <Check className="h-3 w-3 text-primary-foreground" />}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium truncate">{folder.alias}</div>
+          <div className="text-xs text-muted-foreground">
+            {folder.fileCount} 檔案 · {folder.totalSize}
+            {folder.syncStatus === 'pending' && ' · 待同步'}
+            {folder.syncStatus === 'syncing' && ' · 同步中'}
+            {folder.syncStatus === 'error' && ' · 錯誤'}
+          </div>
+        </div>
+      </button>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            onClick={onRemove}
+            className="text-destructive"
+            data-testid="gdrive-folder-delete"
+          >
+            <Trash2 className="mr-2 h-4 w-4" />
+            刪除
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/botrun-c/web/components/gdrive/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Google Drive 元件匯出
+ */
+
+export { GdriveSelector } from './gdrive-selector';
+export { GdriveDrawer } from './gdrive-drawer';
+export { GdriveAddDialog } from './gdrive-add-dialog';

package/botrun-c/web/components/generated-image-card.tsx

@@ -0,0 +1,363 @@
+"use client";
+
+// ============================================================================
+// generated-image-card.tsx - AI 生成圖片顯示卡片
+// 遵循 SOLID 原則：單一職責 - 只負責圖片顯示和互動
+// 使用 shadcn Dialog 實現圖片預覽
+// ============================================================================
+
+import { useState, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import {
+  Download,
+  RefreshCw,
+  AlertCircle,
+  ImageIcon,
+  X,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { Filesystem, Directory } from "@capacitor/filesystem";
+import { Share } from "@capacitor/share";
+import type { ExtractedImage } from "@/lib/image-extractor";
+
+interface GeneratedImageCardProps {
+  image: ExtractedImage;
+  index?: number;
+  onEditRequest?: (sessionId: string, prompt: string) => void;
+  className?: string;
+}
+
+/**
+ * AI 生成圖片顯示卡片
+ * - 全寬顯示
+ * - 點擊放大
+ * - 下載功能
+ * - 錯誤處理
+ */
+export function GeneratedImageCard({
+  image,
+  index = 0,
+  onEditRequest,
+  className,
+}: GeneratedImageCardProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+    setIsError(false);
+  }, []);
+
+  const handleError = useCallback(() => {
+    setIsLoading(false);
+    setIsError(true);
+  }, []);
+
+  const handleDownload = useCallback(async () => {
+    setIsDownloading(true);
+    try {
+      // 1. Fetch 圖片
+      const response = await fetch(image.url);
+      const blob = await response.blob();
+
+      // 2. 檢測平台
+      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];
+            const fileName = `generated-image-${Date.now()}.png`;
+
+            // 寫入暫存檔案
+            const result = await Filesystem.writeFile({
+              path: fileName,
+              data: base64String,
+              directory: Directory.Cache,
+            });
+
+            console.log("✅ [Download] Temp file created:", result.uri);
+
+            // 觸發系統分享面板
+            await Share.share({
+              title: "儲存圖片",
+              text: `圖片：${fileName}`,
+              url: result.uri,
+              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(blob);
+      } else {
+        // Web：傳統 blob download
+        console.log("🔽 [Download] Web platform detected, using blob URL");
+
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `generated-image-${Date.now()}.png`;
+        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 : "未知錯誤"));
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [image.url]);
+
+  const handleRetry = useCallback(() => {
+    setIsLoading(true);
+    setIsError(false);
+  }, []);
+
+  if (isError) {
+    return (
+      <div
+        className={cn(
+          "w-full rounded-lg border border-border bg-muted/30 p-6",
+          className
+        )}
+      >
+        <div className="flex flex-col items-center justify-center gap-3 text-muted-foreground">
+          <AlertCircle className="h-10 w-10" />
+          <p className="text-sm">圖片載入失敗</p>
+          <Button variant="outline" size="sm" onClick={handleRetry}>
+            <RefreshCw className="mr-2 h-4 w-4" />
+            重試
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* 縮圖卡片 */}
+      <Dialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
+        <DialogTrigger asChild>
+          <div
+            className={cn(
+              "group relative w-full overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-all cursor-pointer",
+              className
+            )}
+          >
+            {/* 載入中狀態 */}
+            {isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-muted/50">
+                <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                  <ImageIcon className="h-8 w-8 animate-pulse" />
+                  <span className="text-sm">圖片載入中...</span>
+                </div>
+              </div>
+            )}
+
+            {/* 圖片 */}
+            <img
+              src={image.url}
+              alt={image.alt || `Generated Image ${index + 1}`}
+              className={cn(
+                "w-full max-h-[500px] object-cover transition-opacity",
+                isLoading ? "opacity-0" : "opacity-100"
+              )}
+              onLoad={handleLoad}
+              onError={handleError}
+              loading="lazy"
+            />
+
+            {/* 桌面版：hover 顯示下載按鈕 */}
+            <div
+              className={cn(
+                "absolute right-2 top-2 gap-1 transition-opacity",
+                "hidden md:flex md:opacity-0 md:group-hover:opacity-100"
+              )}
+            >
+              <Button
+                variant="secondary"
+                size="icon"
+                className="h-8 w-8 bg-background/80 backdrop-blur-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDownload();
+                }}
+                title="下載圖片"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </DialogTrigger>
+
+        {/* 全螢幕預覽 Dialog */}
+        <DialogContent
+          className="!max-w-full !h-full !p-0 border-0 bg-black"
+          hideCloseButton={true}
+        >
+          {/* 桌面版：右上角顯示下載 + 關閉按鈕（並排） */}
+          <div className="absolute top-4 right-4 hidden md:flex items-center gap-2 z-[100]">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleDownload}
+              disabled={isDownloading}
+              className="text-white hover:bg-white/20 cursor-pointer touch-manipulation"
+              title="下載圖片"
+              aria-label="下載圖片"
+            >
+              <Download className="h-5 w-5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsPreviewOpen(false)}
+              onPointerDown={() => setIsPreviewOpen(false)}
+              className="text-white hover:bg-white/20 cursor-pointer touch-manipulation"
+              title="關閉"
+              aria-label="關閉"
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+
+          {/* 手機版：右上角只顯示關閉按鈕 */}
+          <div className="absolute top-[calc(1rem+env(safe-area-inset-top))] right-4 md:hidden z-[100]">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsPreviewOpen(false)}
+              onPointerDown={() => setIsPreviewOpen(false)}
+              className="text-white hover:bg-white/20 cursor-pointer touch-manipulation h-12 w-12"
+              title="關閉"
+              aria-label="關閉"
+            >
+              <X className="h-6 w-6" />
+            </Button>
+          </div>
+
+          {/* 手機版：底部中間顯示下載按鈕 */}
+          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex md:hidden z-[100]">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleDownload}
+              disabled={isDownloading}
+              className="text-white hover:bg-white/20 cursor-pointer touch-manipulation h-12 w-12"
+              title="下載圖片"
+              aria-label="下載圖片"
+            >
+              <Download className="h-6 w-6" />
+            </Button>
+          </div>
+
+          {/* 圖片區 + 縮放 */}
+          <div className="h-full flex items-center justify-center z-0">
+            <TransformWrapper
+              initialScale={1}
+              minScale={0.5}
+              maxScale={4}
+              wheel={{ step: 0.1 }}
+              pinch={{ step: 5 }}
+              doubleClick={{ mode: "reset" }}
+            >
+              <TransformComponent
+                wrapperClass="!w-full !h-full"
+                contentClass="!w-full !h-full flex items-center justify-center"
+              >
+                <img
+                  src={image.url}
+                  alt={image.alt || `Generated Image ${index + 1}`}
+                  className="max-w-full max-h-full object-contain"
+                />
+              </TransformComponent>
+            </TransformWrapper>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+interface GeneratedImageGridProps {
+  images: ExtractedImage[];
+  onEditRequest?: (sessionId: string, prompt: string) => void;
+  className?: string;
+}
+
+/**
+ * 多圖片網格顯示
+ */
+export function GeneratedImageGrid({
+  images,
+  onEditRequest,
+  className,
+}: GeneratedImageGridProps) {
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  // 單張圖片：全寬顯示
+  if (images.length === 1) {
+    return (
+      <GeneratedImageCard
+        image={images[0]}
+        index={0}
+        onEditRequest={onEditRequest}
+        className={className}
+      />
+    );
+  }
+
+  // 多張圖片：網格顯示
+  const gridCols =
+    images.length === 2
+      ? "grid-cols-2"
+      : images.length === 3
+        ? "grid-cols-3"
+        : "grid-cols-2";
+
+  return (
+    <div className={cn("grid gap-4", gridCols, className)}>
+      {images.map((image, index) => (
+        <GeneratedImageCard
+          key={`${image.url}-${index}`}
+          image={image}
+          index={index}
+          onEditRequest={onEditRequest}
+        />
+      ))}
+    </div>
+  );
+}