botrun-horse 2.30.0 → 2.34.0

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

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

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