botrun-horse 2.29.2 → 2.31.0

package/botrun-c/web/components/share-skill-dialog.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Copy, Check, Loader2, AlertCircle } from "lucide-react";
+import { Clipboard } from "@capacitor/clipboard";
+import { getApiEndpoint } from "@/lib/api-url";
+import { useAuth } from "@/contexts/AuthContext";
+
+interface ShareSkillDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  skillId: string;
+  skillName: string;
+}
+
+export function ShareSkillDialog({
+  open,
+  onOpenChange,
+  skillId,
+  skillName
+}: ShareSkillDialogProps) {
+  const { user } = useAuth();
+  const [shareId, setShareId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 生成分享連結
+  const handleCreateShare = async () => {
+    if (!user) {
+      setError('請先登入');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const idToken = await user.getIdToken();
+      const url = getApiEndpoint('/api/skills/share');
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${idToken}`
+        },
+        body: JSON.stringify({ skillId })
+      });
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.error || '建立失敗');
+      }
+
+      setShareId(data.shareId);
+    } catch (err: any) {
+      setError(err.message || '建立分享連結失敗');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 複製到剪貼簿（跨平台支援）
+  const handleCopy = async () => {
+    if (!shareId) return;
+
+    try {
+      await Clipboard.write({ string: shareId });
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('複製失敗:', err);
+      // Fallback to web API
+      try {
+        await navigator.clipboard.writeText(shareId);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (fallbackErr) {
+        console.error('Fallback 複製也失敗:', fallbackErr);
+      }
+    }
+  };
+
+  // 當對話框打開時，自動建立分享連結
+  useEffect(() => {
+    if (open && !shareId && !isLoading) {
+      // 印出 userId 方便找 GCS 位置
+      if (user) {
+        console.log('[ShareSkillDialog] userId:', user.uid);
+      }
+      handleCreateShare();
+    }
+  }, [open]);
+
+  // 重置狀態
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      // 關閉時重置狀態
+      setShareId(null);
+      setError(null);
+      setCopied(false);
+    }
+    onOpenChange(newOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>分享技能：{skillName}</DialogTitle>
+          <DialogDescription>
+            建立分享 ID，其他人可以透過此 ID 將技能匯入到自己的技能集
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              <span className="ml-3 text-muted-foreground">建立分享連結中...</span>
+            </div>
+          ) : error ? (
+            <div className="flex items-start gap-2 p-3 bg-destructive/10 text-destructive rounded-md text-sm">
+              <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
+              <span>{error}</span>
+            </div>
+          ) : shareId ? (
+            <div className="space-y-2">
+              <Label>分享 ID</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={shareId}
+                  readOnly
+                  className="font-mono text-xs"
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleCopy}
+                  className="shrink-0"
+                >
+                  {copied ? (
+                    <>
+                      <Check className="h-4 w-4 mr-2" />
+                      已複製！
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="h-4 w-4 mr-2" />
+                      複製
+                    </>
+                  )}
+                </Button>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                將此 ID 分享給其他人，他們可以在「匯入分享技能」中使用
+              </p>
+            </div>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/botrun-c/web/components/skills-editor.tsx

@@ -0,0 +1,443 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Loader2, X, Save } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
+import { getApiEndpoint } from "@/lib/api-url";
+import type { Skill } from "@/types/skills";
+
+interface SkillsEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  skill: Skill | null; // null = 新增模式
+  onSaved: () => void; // 儲存成功後的回呼
+}
+
+// 解析 YAML frontmatter（支援多行 description）
+function parseFrontmatter(content: string) {
+  const match = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
+  if (!match) {
+    return { name: "", description: "", allowedTools: "", body: content };
+  }
+
+  const frontmatter = match[1];
+  const body = match[2];
+
+  const nameMatch = frontmatter.match(/^name:\s*(.+)$/m);
+  const toolsMatch = frontmatter.match(/^allowed-tools:\s*\[(.*)\]$/m);
+
+  // 解析 description（支援 YAML | 多行語法）
+  // 先嘗試多行格式（避免 regex backtracking 問題）
+  let description = "";
+  const descMultiLineMatch = frontmatter.match(/^description:\s*\|\s*\n((?:[ ]{2}.+\n?)*)/m);
+
+  if (descMultiLineMatch) {
+    // 多行 description（YAML | 語法）
+    // 移除每行開頭的 2 個空格縮排，並合併為多行字串
+    description = descMultiLineMatch[1]
+      .split('\n')
+      .map(line => line.replace(/^[ ]{2}/, ''))
+      .join('\n')
+      .trim();
+  } else {
+    // 單行 description
+    const descSingleLineMatch = frontmatter.match(/^description:\s*(.+)$/m);
+    if (descSingleLineMatch) {
+      description = descSingleLineMatch[1].trim();
+    }
+  }
+
+  return {
+    name: nameMatch ? nameMatch[1].trim() : "",
+    description,
+    allowedTools: toolsMatch ? toolsMatch[1].trim() : "",
+    body: body.trim(),
+  };
+}
+
+// 組合 YAML frontmatter
+function buildSkillContent(name: string, description: string, allowedTools: string, body: string) {
+  const frontmatter: string[] = [];
+
+  // name
+  frontmatter.push(`name: ${name}`);
+
+  // description（支援多行，使用 YAML | 語法）
+  if (description.includes('\n')) {
+    frontmatter.push('description: |');
+    for (const line of description.split('\n')) {
+      frontmatter.push(`  ${line}`);
+    }
+  } else {
+    frontmatter.push(`description: ${description}`);
+  }
+
+  // allowed-tools
+  if (allowedTools.trim()) {
+    frontmatter.push(`allowed-tools: [${allowedTools}]`);
+  }
+
+  return `---\n${frontmatter.join('\n')}\n---\n\n${body}`;
+}
+
+const DEFAULT_BODY_TEMPLATE = `# 技能說明
+
+當使用者說「xxx」或需要「xxx」時使用。
+
+## 功能描述
+
+這個技能的功能是...
+
+## 使用方式
+
+1. 步驟一
+2. 步驟二
+3. 步驟三
+
+## 注意事項
+
+- 注意事項一
+- 注意事項二
+`;
+
+export function SkillsEditor({ open, onOpenChange, skill, onSaved }: SkillsEditorProps) {
+  const { user } = useAuth();
+  const { isCapacitor, isAndroid } = useCapacitorPlatform();
+  const [name, setName] = useState("");
+  const [originalSkillId, setOriginalSkillId] = useState(""); // 記錄原始 skillId 用於重新命名
+  const [description, setDescription] = useState("");
+  const [allowedTools, setAllowedTools] = useState("");
+  const [body, setBody] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const isEditMode = skill !== null;
+  const isReadOnly = skill !== null && !skill.editable; // 官方技能唯讀模式
+
+  // 載入技能內容（編輯模式）
+  useEffect(() => {
+    if (open && isEditMode && skill) {
+      setName(skill.name);
+      setOriginalSkillId(skill.id); // 記錄原始 skillId
+      setDescription(skill.description);
+      loadSkillContent(skill.id);
+    } else if (open && !isEditMode) {
+      // 新增模式：使用預設模板
+      setName("");
+      setOriginalSkillId("");
+      setDescription("當使用者說「xxx」或需要「xxx」時使用");
+      setAllowedTools("");
+      setBody(DEFAULT_BODY_TEMPLATE);
+    }
+  }, [open, skill, isEditMode]);
+
+  const loadSkillContent = async (skillId: string) => {
+    if (!user) return;
+
+    setLoading(true);
+    try {
+      const idToken = await user.getIdToken();
+      const url = getApiEndpoint(`/api/skills/${skillId}`);
+      console.log('[SkillsEditor] Loading skill:', url);
+      const response = await fetch(url, {
+        headers: {
+          Authorization: `Bearer ${idToken}`,
+        },
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        const parsed = parseFrontmatter(data.content);
+        setName(parsed.name || skill?.name || "");
+        setDescription(parsed.description);
+        setAllowedTools(parsed.allowedTools);
+        setBody(parsed.body);
+      } else {
+        alert(`載入失敗: ${data.error || "未知錯誤"}`);
+      }
+    } catch (err) {
+      console.error("Failed to load skill content:", err);
+      alert("載入技能內容時發生錯誤");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 儲存技能
+  const handleSave = async () => {
+    if (!user) {
+      alert("請先登入");
+      return;
+    }
+
+    if (!name.trim()) {
+      alert("請輸入技能名稱");
+      return;
+    }
+
+    if (!description.trim()) {
+      alert("請輸入觸發技能的時機");
+      return;
+    }
+
+    if (!body.trim()) {
+      alert("請輸入技能內容");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const idToken = await user.getIdToken();
+      const fullContent = buildSkillContent(name, description, allowedTools, body);
+
+      if (isEditMode && skill) {
+        // 更新現有技能（支援重新命名）
+        const url = getApiEndpoint(`/api/skills/${originalSkillId}`);
+        console.log('[SkillsEditor] Updating skill:', url);
+
+        // 如果名稱有變更，傳送 newName 給後端
+        const isRenaming = name.trim() !== originalSkillId;
+        const requestBody: { content: string; newName?: string } = { content: fullContent };
+        if (isRenaming) {
+          requestBody.newName = name.trim();
+          console.log('[SkillsEditor] Renaming skill:', originalSkillId, '→', name.trim());
+        }
+
+        const response = await fetch(url, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`,
+          },
+          body: JSON.stringify(requestBody),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.success) {
+          onSaved();
+          onOpenChange(false);
+        } else {
+          alert(`儲存失敗: ${data.error || "未知錯誤"}`);
+        }
+      } else {
+        // 新增技能
+        const url = getApiEndpoint("/api/skills");
+        console.log('[SkillsEditor] Creating new skill:', url);
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`,
+          },
+          body: JSON.stringify({ name, content: fullContent }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.success) {
+          onSaved();
+          onOpenChange(false);
+        } else {
+          alert(`新增失敗: ${data.error || "未知錯誤"}`);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to save skill:", err);
+      alert("儲存技能時發生錯誤");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="bottom" className="h-screen flex flex-col p-0 [&>button]:hidden">
+        {/* 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">
+            <div className="flex items-center gap-3">
+              <SheetTitle className="text-lg">
+                {isReadOnly ? "查看技能（唯讀）" : isEditMode ? "編輯技能" : "新增技能"}
+              </SheetTitle>
+              {isReadOnly && (
+                <span className="text-xs bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 px-2 py-1 rounded">
+                  官方技能 - 僅供參考學習
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {/* 儲存按鈕（唯讀模式下隱藏）*/}
+              {!isReadOnly && (
+                <Button
+                  onClick={handleSave}
+                  disabled={saving || loading}
+                  size="sm"
+                  variant="default"
+                  className="gap-2"
+                >
+                  {saving ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      儲存中
+                    </>
+                  ) : (
+                    <>
+                      <Save className="h-4 w-4" />
+                      儲存
+                    </>
+                  )}
+                </Button>
+              )}
+              {/* 關閉按鈕 */}
+              <Button
+                onClick={() => onOpenChange(false)}
+                disabled={saving}
+                size="sm"
+                variant="outline"
+                className="gap-2"
+              >
+                <X className="h-4 w-4" />
+                關閉
+              </Button>
+            </div>
+          </div>
+        </SheetHeader>
+
+        {/* Form */}
+        <div
+          className="flex-1 overflow-y-auto px-6"
+          style={{
+            paddingTop: '1rem',
+            paddingBottom: isCapacitor
+              ? isAndroid
+                ? 'max(var(--safe-area-inset-bottom), var(--android-nav-bar-height))'
+                : 'var(--safe-area-inset-bottom)'
+              : '1rem'
+          }}
+        >
+          {loading ? (
+            <div className="flex items-center justify-center h-full">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {/* Name */}
+              <div className="space-y-2">
+                <Label htmlFor="name">技能名稱 *</Label>
+                <Input
+                  id="name"
+                  placeholder="例如：PDF技能"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  disabled={saving}
+                  readOnly={isReadOnly}
+                  className={isReadOnly ? "bg-muted cursor-default" : ""}
+                  type="text"
+                />
+                <p className="text-xs text-muted-foreground">
+                  {isReadOnly
+                    ? "官方技能不可修改"
+                    : isEditMode
+                    ? "修改名稱會同時更新資料夾名稱"
+                    : "可使用中文、英文、數字和連字號"}
+                </p>
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">觸發技能的時機 *</Label>
+                <Textarea
+                  id="description"
+                  placeholder="當使用者說「xxx」或需要「xxx」時使用"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  disabled={saving}
+                  readOnly={isReadOnly}
+                  rows={3}
+                  className={isReadOnly ? "resize-none bg-muted cursor-default" : "resize-none"}
+                  inputMode="text"
+                />
+                <p className="text-xs text-muted-foreground">
+                  {isReadOnly
+                    ? "這是官方技能的觸發描述，供您參考學習"
+                    : "簡短描述技能功能及何時觸發（Claude 會根據這個決定是否使用此技能）"}
+                </p>
+              </div>
+
+              {/* Allowed Tools */}
+              <div className="space-y-2">
+                <Label htmlFor="allowedTools">允許工具（選填）</Label>
+                <Input
+                  id="allowedTools"
+                  placeholder="留空表示允許所有工具，或輸入：Read, Grep, Glob"
+                  value={allowedTools}
+                  onChange={(e) => setAllowedTools(e.target.value)}
+                  disabled={saving}
+                  readOnly={isReadOnly}
+                  className={isReadOnly ? "bg-muted cursor-default" : ""}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {isReadOnly
+                    ? "官方技能允許使用的工具列表"
+                    : "限制技能可使用的工具，用逗號分隔。留空=允許所有工具"}
+                </p>
+              </div>
+
+              {/* Body */}
+              <div className="space-y-2">
+                <Label htmlFor="body">技能內容 *</Label>
+                <Textarea
+                  id="body"
+                  placeholder="在此輸入技能的詳細說明（支援 Markdown）..."
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  disabled={saving}
+                  readOnly={isReadOnly}
+                  rows={20}
+                  className={isReadOnly ? "resize-none font-mono text-sm bg-muted cursor-default" : "resize-none font-mono text-sm"}
+                  inputMode="text"
+                />
+                <p className="text-xs text-muted-foreground">
+                  {isReadOnly
+                    ? "這是官方技能的完整內容，展示了如何撰寫一個完整的技能。您可以參考這個格式來建立自己的技能。"
+                    : "詳細說明技能的功能、使用方式、注意事項等（支援 Markdown 格式）"}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}