botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/skills-manager-drawer.tsx

@@ -0,0 +1,586 @@
+"use client";
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Plus, Pencil, Trash2, Loader2, AlertCircle, Eye, GripVertical, Share2, FileDown, ChevronDown } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
+import { getApiEndpoint } from "@/lib/api-url";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ShareSkillDialog } from "@/components/share-skill-dialog";
+import { ImportSkillDialog } from "@/components/import-skill-dialog";
+
+// dnd-kit for drag and drop
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface Skill {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  source: "official" | "user";
+  editable: boolean;
+}
+
+interface SkillsManagerDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onEdit: (skill: Skill) => void;
+  onCreate: () => void;
+  onSkillsChange: () => void;
+}
+
+// ============================================================================
+// SortableSkillItem - 可拖拉的技能項目
+// ============================================================================
+interface SortableSkillItemProps {
+  skill: Skill;
+  onEdit: (skill: Skill) => void;
+  onDelete: (skill: Skill) => void;
+  onShare: (skill: Skill) => void;
+  isDraggable: boolean;
+}
+
+function SortableSkillItem({ skill, onEdit, onDelete, onShare, isDraggable }: SortableSkillItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: skill.id, disabled: !isDraggable });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 50 : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-start gap-3 p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors ${
+        isDragging ? "shadow-lg ring-2 ring-primary" : ""
+      }`}
+    >
+      {/* 拖拉把手 - 只有使用者技能才顯示 */}
+      {isDraggable && (
+        <div
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing touch-none shrink-0 text-muted-foreground hover:text-foreground"
+        >
+          <GripVertical className="h-5 w-5" />
+        </div>
+      )}
+
+      {/* Icon */}
+      <div className="text-2xl shrink-0">{skill.icon || "🔧"}</div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h3 className="font-medium truncate">{skill.name}</h3>
+          {skill.source === "official" && (
+            <span className="text-xs bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 px-2 py-0.5 rounded">
+              官方
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
+          {skill.description}
+        </p>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-2 shrink-0">
+        {skill.editable ? (
+          <>
+            {/* 分享按鈕 - 只有使用者技能才顯示 */}
+            {skill.source === "user" && (
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => onShare(skill)}
+                title="分享技能"
+              >
+                <Share2 className="h-4 w-4" />
+              </Button>
+            )}
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => onEdit(skill)}
+              title="編輯"
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => onDelete(skill)}
+              title="刪除"
+              className="text-destructive hover:text-destructive"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </>
+        ) : (
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => onEdit(skill)}
+            title="查看（唯讀）"
+            className="text-blue-600 dark:text-blue-400"
+          >
+            <Eye className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// SkillsManagerDrawer - 主元件
+// ============================================================================
+export function SkillsManagerDrawer({
+  open,
+  onOpenChange,
+  onEdit,
+  onCreate,
+  onSkillsChange,
+}: SkillsManagerDrawerProps) {
+  const { user } = useAuth();
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [skillToDelete, setSkillToDelete] = useState<Skill | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSavingOrder, setIsSavingOrder] = useState(false);
+
+  // 分享功能狀態
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [skillToShare, setSkillToShare] = useState<Skill | null>(null);
+
+  // 匯入功能狀態
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+
+  const { isCapacitor, isAndroid } = useCapacitorPlatform();
+
+  // dnd-kit sensors - 支援滑鼠、觸控和鍵盤
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // 防止誤觸
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200, // 長按觸發
+        tolerance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // 分離使用者技能和官方技能
+  const { userSkills, officialSkills } = useMemo(() => {
+    const userSkills = skills.filter((s) => s.source === "user");
+    const officialSkills = skills.filter((s) => s.source === "official");
+    return { userSkills, officialSkills };
+  }, [skills]);
+
+  // 載入 skills（已從後端排序好）
+  const loadSkills = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = getApiEndpoint("/api/skills");
+      console.log("[SkillsManager] Loading skills from:", url);
+
+      const headers: HeadersInit = {};
+      if (user) {
+        const idToken = await user.getIdToken();
+        headers.Authorization = `Bearer ${idToken}`;
+      }
+
+      const response = await fetch(url, { headers });
+      const data = await response.json();
+
+      if (data.success && Array.isArray(data.skills)) {
+        setSkills(data.skills);
+        console.log("[SkillsManager] Loaded", data.skills.length, "skills");
+      } else {
+        setError("載入技能失敗");
+      }
+    } catch (err) {
+      console.error("Failed to load skills:", err);
+      setError("載入技能時發生錯誤");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 儲存順序到後端
+  const saveOrder = useCallback(
+    async (orderedUserSkillIds: string[]) => {
+      if (!user) return;
+
+      setIsSavingOrder(true);
+      try {
+        const idToken = await user.getIdToken();
+        const url = getApiEndpoint("/api/skills/order");
+
+        const response = await fetch(url, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`,
+          },
+          body: JSON.stringify({ orderedSkillIds: orderedUserSkillIds }),
+        });
+
+        if (!response.ok) {
+          console.error("[SkillsManager] Failed to save order");
+        } else {
+          console.log("[SkillsManager] Order saved successfully");
+        }
+      } catch (err) {
+        console.error("[SkillsManager] Error saving order:", err);
+      } finally {
+        setIsSavingOrder(false);
+      }
+    },
+    [user]
+  );
+
+  // 拖拉結束處理
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        const oldIndex = userSkills.findIndex((s) => s.id === active.id);
+        const newIndex = userSkills.findIndex((s) => s.id === over.id);
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const newUserSkills = arrayMove(userSkills, oldIndex, newIndex);
+
+          // 更新本地狀態
+          setSkills([...newUserSkills, ...officialSkills]);
+
+          // 儲存到後端
+          const orderedIds = newUserSkills.map((s) => s.id);
+          saveOrder(orderedIds);
+        }
+      }
+    },
+    [userSkills, officialSkills, saveOrder]
+  );
+
+  // 當抽屜開啟時載入 skills
+  useEffect(() => {
+    if (open) {
+      loadSkills();
+    }
+  }, [open]);
+
+  // 刪除 skill
+  const handleDelete = async (skill: Skill) => {
+    if (!user) {
+      alert("請先登入");
+      return;
+    }
+
+    setDeleting(true);
+    try {
+      const idToken = await user.getIdToken();
+      const url = getApiEndpoint(`/api/skills/${skill.id}`);
+      const response = await fetch(url, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${idToken}`,
+        },
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        await loadSkills();
+        onSkillsChange();
+        setDeleteDialogOpen(false);
+        setSkillToDelete(null);
+      } else {
+        alert(`刪除失敗: ${data.error || "未知錯誤"}`);
+      }
+    } catch (err) {
+      console.error("Failed to delete skill:", err);
+      alert("刪除技能時發生錯誤");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const confirmDelete = (skill: Skill) => {
+    setSkillToDelete(skill);
+    setDeleteDialogOpen(true);
+  };
+
+  // 開啟分享對話框
+  const handleShare = (skill: Skill) => {
+    setSkillToShare(skill);
+    setShareDialogOpen(true);
+  };
+
+  // 匯入成功後重新載入技能列表
+  const handleImportSuccess = () => {
+    loadSkills();
+    onSkillsChange();
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent side="bottom" className="h-screen flex flex-col p-0">
+          {/* Capacitor App: Status Bar 背景遮蔽 */}
+          {isCapacitor && (
+            <div
+              style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: "var(--safe-area-inset-top)",
+                backgroundColor: "#F0EBE3",
+                zIndex: 60,
+              }}
+            />
+          )}
+
+          {/* Header */}
+          <SheetHeader
+            className="px-6 border-b shrink-0"
+            style={{
+              paddingTop: isCapacitor
+                ? "calc(var(--safe-area-inset-top) + 1rem)"
+                : "1rem",
+              paddingBottom: "1rem",
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <SheetTitle className="text-lg">我們的技能</SheetTitle>
+              {isSavingOrder && (
+                <span className="text-xs text-muted-foreground flex items-center gap-1">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  儲存中...
+                </span>
+              )}
+            </div>
+          </SheetHeader>
+
+          {/* Skills List */}
+          <div className="flex-1 overflow-y-auto px-6 py-4">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <AlertCircle className="h-8 w-8 text-destructive mb-2" />
+                <p className="text-sm text-muted-foreground">{error}</p>
+                <Button onClick={loadSkills} variant="outline" size="sm" className="mt-4">
+                  重試
+                </Button>
+              </div>
+            ) : skills.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <p className="text-sm text-muted-foreground">還沒有自訂技能</p>
+                <Button onClick={onCreate} variant="outline" size="sm" className="mt-4">
+                  <Plus className="mr-2 h-4 w-4" />
+                  新增第一個技能
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {/* 使用者技能區塊 - 可拖拉排序 */}
+                {userSkills.length > 0 && (
+                  <div>
+                    <h4 className="text-sm font-medium text-muted-foreground mb-3 flex items-center gap-2">
+                      我的技能
+                      <span className="text-xs bg-muted px-2 py-0.5 rounded">
+                        可拖拉排序
+                      </span>
+                    </h4>
+                    <DndContext
+                      sensors={sensors}
+                      collisionDetection={closestCenter}
+                      onDragEnd={handleDragEnd}
+                    >
+                      <SortableContext
+                        items={userSkills.map((s) => s.id)}
+                        strategy={verticalListSortingStrategy}
+                      >
+                        <div className="space-y-3">
+                          {userSkills.map((skill) => (
+                            <SortableSkillItem
+                              key={skill.id}
+                              skill={skill}
+                              onEdit={onEdit}
+                              onDelete={confirmDelete}
+                              onShare={handleShare}
+                              isDraggable={true}
+                            />
+                          ))}
+                        </div>
+                      </SortableContext>
+                    </DndContext>
+                  </div>
+                )}
+
+                {/* 官方技能區塊 - 不可拖拉 */}
+                {officialSkills.length > 0 && (
+                  <div>
+                    <h4 className="text-sm font-medium text-muted-foreground mb-3">
+                      官方技能
+                    </h4>
+                    <div className="space-y-3">
+                      {officialSkills.map((skill) => (
+                        <SortableSkillItem
+                          key={skill.id}
+                          skill={skill}
+                          onEdit={onEdit}
+                          onDelete={confirmDelete}
+                          onShare={handleShare}
+                          isDraggable={false}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Footer - New Skill Button with Dropdown */}
+          <div
+            className="px-6 border-t shrink-0"
+            style={{
+              paddingTop: "1rem",
+              paddingBottom: isCapacitor
+                ? isAndroid
+                  ? "max(var(--safe-area-inset-bottom), var(--android-nav-bar-height))"
+                  : "var(--safe-area-inset-bottom)"
+                : "1rem",
+            }}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="w-full" size="lg">
+                  <Plus className="mr-2 h-4 w-4" />
+                  新增技能
+                  <ChevronDown className="ml-2 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuItem onClick={onCreate}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  建立新技能
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setImportDialogOpen(true)}>
+                  <FileDown className="mr-2 h-4 w-4" />
+                  匯入分享技能
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>確定要刪除這個技能嗎？</AlertDialogTitle>
+            <AlertDialogDescription>
+              刪除後將無法復原。技能名稱：<strong>{skillToDelete?.name}</strong>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => skillToDelete && handleDelete(skillToDelete)}
+              disabled={deleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  刪除中...
+                </>
+              ) : (
+                "確定刪除"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Share Skill Dialog */}
+      {skillToShare && (
+        <ShareSkillDialog
+          open={shareDialogOpen}
+          onOpenChange={setShareDialogOpen}
+          skillId={skillToShare.id}
+          skillName={skillToShare.name}
+        />
+      )}
+
+      {/* Import Skill Dialog */}
+      <ImportSkillDialog
+        open={importDialogOpen}
+        onOpenChange={setImportDialogOpen}
+        onSuccess={handleImportSuccess}
+      />
+    </>
+  );
+}