botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/drop-zone.tsx

@@ -0,0 +1,143 @@
+/**
+ * 拖放區元件
+ */
+
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { Upload } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DropZoneProps {
+  /** 子元件 */
+  children: React.ReactNode;
+  /** 拖放檔案回呼 */
+  onDrop: (files: File[]) => void;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 自訂 className */
+  className?: string;
+}
+
+/**
+ * 拖放區元件
+ * 包裹子元件，提供拖放檔案功能
+ */
+export function DropZone({
+  children,
+  onDrop,
+  disabled = false,
+  className,
+}: DropZoneProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  /**
+   * 處理拖曳進入
+   */
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (disabled) return;
+
+      dragCounterRef.current++;
+
+      // 檢查是否有檔案
+      if (e.dataTransfer.types.includes('Files')) {
+        setIsDragging(true);
+      }
+    },
+    [disabled]
+  );
+
+  /**
+   * 處理拖曳離開
+   */
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      dragCounterRef.current--;
+
+      if (dragCounterRef.current === 0) {
+        setIsDragging(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * 處理拖曳經過（需要阻止預設行為才能接收 drop）
+   */
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (disabled) return;
+
+      // 設定拖放效果
+      e.dataTransfer.dropEffect = 'copy';
+    },
+    [disabled]
+  );
+
+  /**
+   * 處理放下
+   */
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // 重置狀態
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+
+      if (disabled) return;
+
+      const files = Array.from(e.dataTransfer.files);
+
+      if (files.length > 0) {
+        onDrop(files);
+      }
+    },
+    [disabled, onDrop]
+  );
+
+  return (
+    <div
+      className={cn('relative', className)}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {children}
+
+      {/* 拖放遮罩 */}
+      {isDragging && (
+        <div
+          className={cn(
+            'absolute inset-0 z-50',
+            'bg-primary/10 backdrop-blur-[2px]',
+            'border-2 border-dashed border-primary',
+            'rounded-lg',
+            'flex items-center justify-center',
+            'pointer-events-none'
+          )}
+        >
+          <div className="text-center">
+            <Upload className="w-10 h-10 text-primary mx-auto mb-2" />
+            <p className="text-sm font-medium text-primary">
+              放開以新增附件
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/botrun-c/web/components/gdrive/gdrive-add-dialog.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+/**
+ * GdriveAddDialog - 新增 Google Drive 資料夾對話框
+ */
+
+import { useState } from "react";
+import { FolderPlus, Link, History, Globe, Key } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface GdriveAddDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (url: string, alias?: string, type?: 'public' | 'service-account') => Promise<void>;
+  history: string[];
+}
+
+export function GdriveAddDialog({
+  open,
+  onOpenChange,
+  onAdd,
+  history,
+}: GdriveAddDialogProps) {
+  const [url, setUrl] = useState("");
+  const [alias, setAlias] = useState("");
+  const [type, setType] = useState<'public' | 'service-account'>('public');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!url.trim()) {
+      setError("請輸入 Google Drive 連結");
+      return;
+    }
+
+    // 驗證 URL 格式
+    if (!isValidGdriveUrl(url)) {
+      setError("請輸入有效的 Google Drive 資料夾連結");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await onAdd(url.trim(), alias.trim() || undefined, type);
+      // 重置表單
+      setUrl("");
+      setAlias("");
+      setType('public');
+    } catch (err: any) {
+      setError(err.message || "新增失敗");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleHistorySelect = (historyUrl: string) => {
+    setUrl(historyUrl);
+  };
+
+  const handleClose = () => {
+    if (!isLoading) {
+      setUrl("");
+      setAlias("");
+      setType('public');
+      setError(null);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md w-[calc(100vw-2rem)] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <FolderPlus className="h-5 w-5" />
+            新增 Google Drive 資料夾
+          </DialogTitle>
+          <DialogDescription>
+            輸入 Google Drive 資料夾連結來同步檔案
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4 min-w-0">
+          {/* URL 輸入 */}
+          <div className="space-y-2">
+            <Label htmlFor="url" className="flex items-center gap-1">
+              <Link className="h-3.5 w-3.5" />
+              資料夾連結
+            </Label>
+            <Input
+              id="url"
+              type="url"
+              placeholder="https://drive.google.com/drive/folders/..."
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+                setError(null);
+              }}
+              disabled={isLoading}
+              data-testid="gdrive-url-input"
+            />
+          </div>
+
+          {/* 別名輸入 */}
+          <div className="space-y-2">
+            <Label htmlFor="alias">別名（選填）</Label>
+            <Input
+              id="alias"
+              type="text"
+              placeholder="例如：專案文件"
+              value={alias}
+              onChange={(e) => setAlias(e.target.value)}
+              disabled={isLoading}
+              data-testid="gdrive-alias-input"
+            />
+          </div>
+
+          {/* 存取類型 */}
+          <div className="space-y-2">
+            <Label>存取類型</Label>
+            <div className="grid grid-cols-2 gap-2">
+              <button
+                type="button"
+                onClick={() => setType('public')}
+                disabled={isLoading}
+                data-testid="gdrive-type-public"
+                className={`flex items-center gap-2 p-3 rounded-md border text-left transition-colors ${
+                  type === 'public'
+                    ? 'border-primary bg-primary/10 text-primary'
+                    : 'border-input hover:bg-accent'
+                }`}
+              >
+                <Globe className="h-4 w-4" />
+                <span className="text-sm">公開資料夾</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setType('service-account')}
+                disabled={isLoading}
+                data-testid="gdrive-type-service-account"
+                className={`flex items-center gap-2 p-3 rounded-md border text-left transition-colors ${
+                  type === 'service-account'
+                    ? 'border-primary bg-primary/10 text-primary'
+                    : 'border-input hover:bg-accent'
+                }`}
+              >
+                <Key className="h-4 w-4" />
+                <span className="text-sm">服務帳戶</span>
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {type === 'public'
+                ? "資料夾需設定為「知道連結的任何人都可以檢視」，或分享給服務帳戶"
+                : (
+                  <>
+                    資料夾需與服務帳戶共用：
+                    <br />
+                    <code className="text-[10px] bg-muted px-1 py-0.5 rounded select-all break-all">
+                      257949799705-compute@developer.gserviceaccount.com
+                    </code>
+                  </>
+                )}
+            </p>
+          </div>
+
+          {/* 歷史記錄 */}
+          {history.length > 0 && (
+            <div className="space-y-2 min-w-0">
+              <Label className="flex items-center gap-1">
+                <History className="h-3.5 w-3.5" />
+                最近使用
+              </Label>
+              <div className="max-h-24 overflow-y-auto overflow-x-hidden rounded-md border p-2">
+                {history.map((historyUrl, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    className="w-full text-left text-xs text-muted-foreground hover:text-foreground py-1 px-2 hover:bg-accent rounded block overflow-hidden text-ellipsis whitespace-nowrap"
+                    onClick={() => handleHistorySelect(historyUrl)}
+                    disabled={isLoading}
+                  >
+                    {historyUrl}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 錯誤訊息 */}
+          {error && (
+            <p className="text-sm text-destructive" data-testid="gdrive-error">
+              {error}
+            </p>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isLoading}
+            >
+              取消
+            </Button>
+            <Button
+              type="submit"
+              disabled={isLoading || !url.trim()}
+              data-testid="gdrive-submit-button"
+            >
+              {isLoading ? "新增中..." : "新增"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * 驗證 Google Drive URL 格式
+ */
+function isValidGdriveUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+
+    // 檢查是否為 Google Drive 網域
+    if (!parsed.hostname.includes('drive.google.com') &&
+        !parsed.hostname.includes('docs.google.com')) {
+      return false;
+    }
+
+    // 檢查是否包含資料夾 ID
+    const folderMatch = url.match(/\/folders\/([a-zA-Z0-9_-]+)/);
+    const idMatch = url.match(/[?&]id=([a-zA-Z0-9_-]+)/);
+
+    return !!(folderMatch || idMatch);
+  } catch {
+    return false;
+  }
+}

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

@@ -0,0 +1,236 @@
+"use client";
+
+/**
+ * GdriveDrawer - Google Drive 選單（行動裝置版）
+ * 使用 Sheet 元件實作底部抽屜
+ */
+
+import { useState } from "react";
+import { FolderSync, Plus, Check, RefreshCw, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { useGdriveFolders, GdriveFolder } from "@/hooks/useGdriveFolders";
+import { useGdriveSync } from "@/hooks/useGdriveSync";
+import { GdriveAddDialog } from "./gdrive-add-dialog";
+import { useToast } from "@/hooks/use-toast";
+
+interface GdriveDrawerProps {
+  authToken?: string;
+  className?: string;
+}
+
+export function GdriveDrawer({ authToken, className }: GdriveDrawerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  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}>
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="gap-2"
+            data-testid="gdrive-drawer-trigger"
+          >
+            <FolderSync className="h-4 w-4" />
+            {folders.length > 0 && (
+              <span className="text-xs bg-primary text-primary-foreground rounded-full px-1.5">
+                {selectedCount}
+              </span>
+            )}
+          </Button>
+        </SheetTrigger>
+
+        <SheetContent side="bottom" className="h-[70vh]">
+          <SheetHeader>
+            <SheetTitle className="flex items-center justify-between">
+              <span>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-mobile"
+              >
+                <RefreshCw className={`h-4 w-4 ${isSyncing ? 'animate-spin' : ''}`} />
+              </Button>
+            </SheetTitle>
+            <SheetDescription>
+              選擇要用於問答的資料夾
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="flex-1 overflow-y-auto py-4">
+            {isFoldersLoading ? (
+              <div className="py-8 text-center text-muted-foreground">
+                載入中...
+              </div>
+            ) : folders.length === 0 ? (
+              <div className="py-8 text-center text-muted-foreground">
+                目前沒有已同步的資料夾
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {folders.map((folder) => (
+                  <MobileFolderItem
+                    key={folder.id}
+                    folder={folder}
+                    onToggle={() => toggleSelect(folder.id)}
+                    onRemove={() => handleRemove(folder.id, folder.alias)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <SheetFooter className="flex-col gap-2 sm:flex-col">
+            <Button
+              className="w-full"
+              onClick={() => {
+                setIsOpen(false);
+                setIsAddDialogOpen(true);
+              }}
+              data-testid="gdrive-add-button-mobile"
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              新增資料夾
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline" className="w-full">關閉</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      {/* 新增對話框 */}
+      <GdriveAddDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        onAdd={handleAddFolder}
+        history={history}
+      />
+    </div>
+  );
+}
+
+// 行動版資料夾項目
+interface MobileFolderItemProps {
+  folder: GdriveFolder;
+  onToggle: () => void;
+  onRemove: () => void;
+}
+
+function MobileFolderItem({ folder, onToggle, onRemove }: MobileFolderItemProps) {
+  return (
+    <div className="flex items-center gap-3 p-3 rounded-lg border">
+      <button
+        className="flex items-center gap-3 flex-1 text-left"
+        onClick={onToggle}
+      >
+        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
+          folder.selected ? 'bg-primary border-primary' : 'border-input'
+        }`}>
+          {folder.selected && <Check className="h-3.5 w-3.5 text-primary-foreground" />}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="font-medium truncate">{folder.alias}</div>
+          <div className="text-sm text-muted-foreground">
+            {folder.fileCount} 檔案 · {folder.totalSize}
+            {folder.syncStatus === 'pending' && ' · 待同步'}
+            {folder.syncStatus === 'syncing' && ' · 同步中'}
+            {folder.syncStatus === 'error' && ' · 錯誤'}
+          </div>
+        </div>
+      </button>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8 text-destructive"
+        onClick={onRemove}
+        data-testid="gdrive-folder-delete-mobile"
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}