botrun-horse 2.30.0 → 2.34.0

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

@@ -1,143 +0,0 @@
-/**
- * 拖放區元件
- */
-
-'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

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

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