botrun-horse 2.31.0 → 2.34.0

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

@@ -1,226 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,363 +0,0 @@
-"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>
-  );
-}