| "use client"; |
|
|
| import { useEffect, useRef, useState } from "react"; |
| import { ImagePlus, LoaderCircle, Plus, Sparkles, Star, Trash2 } from "lucide-react"; |
| import { toast } from "sonner"; |
|
|
| import { SkillCoverThumbnail } from "@/app/chat/components/skill-showcase"; |
| import { Button } from "@/components/ui/button"; |
| import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; |
| import { Input } from "@/components/ui/input"; |
| import { Textarea } from "@/components/ui/textarea"; |
| import { generateSkillExamples, updateSkillPresentation, uploadSkillPresentationAssets, type InstalledSkill, type SkillAsset, type SkillExample, type SkillInputSpec, type SkillRuntime } from "@/lib/api"; |
|
|
| type Props = { |
| skill: InstalledSkill | null; |
| runtime: SkillRuntime | null; |
| onOpenChange: (open: boolean) => void; |
| onSaved: (runtime: SkillRuntime, items: InstalledSkill[]) => void; |
| }; |
|
|
| function emptyExample(index: number): SkillExample { |
| return { id: `custom-${Date.now()}-${index}`, title: `示例 ${index + 1}`, description: "", prompt: "", assets: [], attachment_hint: "" }; |
| } |
|
|
| export function SkillPresentationEditor({ skill, runtime, onOpenChange, onSaved }: Props) { |
| const [title, setTitle] = useState(""); |
| const [description, setDescription] = useState(""); |
| const [category, setCategory] = useState(""); |
| const [tags, setTags] = useState(""); |
| const [coverPath, setCoverPath] = useState(""); |
| const [assets, setAssets] = useState<SkillAsset[]>([]); |
| const [examples, setExamples] = useState<SkillExample[]>([]); |
| const [inputs, setInputs] = useState<SkillInputSpec[]>([]); |
| const [working, setWorking] = useState<"" | "save" | "upload" | "generate">(""); |
| const fileRef = useRef<HTMLInputElement>(null); |
|
|
| useEffect(() => { |
| if (!runtime) return; |
| setTitle(runtime.presentation.title || runtime.name); |
| setDescription(runtime.presentation.description || runtime.description); |
| setCategory(runtime.presentation.category || "专业工作流"); |
| setTags(runtime.presentation.tags.join("、")); |
| setCoverPath(runtime.presentation.cover?.path || ""); |
| setAssets(runtime.presentation.assets); |
| setExamples(runtime.presentation.examples); |
| setInputs(runtime.presentation.inputs); |
| }, [runtime]); |
|
|
| const save = async () => { |
| if (!skill || !runtime || working) return; |
| const validExamples = examples.filter((example) => example.prompt.trim()).map((example, index) => ({ |
| ...example, |
| id: example.id || `custom-${index + 1}`, |
| title: example.title.trim() || `示例 ${index + 1}`, |
| prompt: example.prompt.trim(), |
| })); |
| if (!validExamples.length) { |
| toast.error("至少保留一个可用示例"); |
| return; |
| } |
| setWorking("save"); |
| try { |
| const result = await updateSkillPresentation(skill.id, { |
| display: { |
| title: title.trim() || runtime.name, |
| description: description.trim(), |
| category: category.trim() || "专业工作流", |
| cover: coverPath, |
| tags: tags.split(/[，,、\n]/).map((item) => item.trim()).filter(Boolean), |
| }, |
| assets: assets.map((asset) => ({ path: asset.path, name: asset.name, description: asset.description, role: asset.path === coverPath ? "cover" : "gallery" })), |
| examples: validExamples, |
| inputs: inputs.filter((input) => input.label.trim()).map((input, index) => ({ ...input, id: input.id || `input-${index + 1}`, label: input.label.trim(), description: input.description.trim() })), |
| }); |
| onSaved(result.skill, result.items); |
| toast.success("Skill 展示信息已保存"); |
| onOpenChange(false); |
| } catch (error) { |
| toast.error(error instanceof Error ? error.message : "保存展示信息失败"); |
| } finally { |
| setWorking(""); |
| } |
| }; |
|
|
| const upload = async (files: File[]) => { |
| if (!skill || !files.length || working) return; |
| setWorking("upload"); |
| try { |
| const result = await uploadSkillPresentationAssets(skill.id, files); |
| setAssets((current) => [...current, ...result.assets.filter((asset) => !current.some((item) => item.path === asset.path))]); |
| if (!coverPath && result.assets[0]) setCoverPath(result.assets[0].path); |
| toast.success(`已添加 ${result.assets.length} 张展示图片，保存后生效`); |
| } catch (error) { |
| toast.error(error instanceof Error ? error.message : "上传展示图片失败"); |
| } finally { |
| if (fileRef.current) fileRef.current.value = ""; |
| setWorking(""); |
| } |
| }; |
|
|
| const generateExamples = async () => { |
| if (!skill || working) return; |
| setWorking("generate"); |
| try { |
| const result = await generateSkillExamples(skill.id); |
| setExamples(result.skill.presentation.examples); |
| onSaved(result.skill, result.items); |
| toast.success("AI 已根据 Skill 文档生成示例，你可以继续编辑后保存"); |
| } catch (error) { |
| toast.error(error instanceof Error ? error.message : "AI 生成示例失败"); |
| } finally { |
| setWorking(""); |
| } |
| }; |
|
|
| return ( |
| <Dialog open={Boolean(skill)} onOpenChange={onOpenChange}> |
| <DialogContent className="flex h-[min(92dvh,960px)] w-[min(96vw,1100px)] max-w-[1100px] flex-col gap-0 overflow-hidden rounded-[28px] p-0"> |
| <DialogHeader className="shrink-0 border-b border-stone-100 px-6 py-5 pr-14 text-left"> |
| <DialogTitle>编辑 Skill 展示</DialogTitle> |
| <p className="text-sm text-stone-500">后台设置会覆盖自动扫描结果，不会修改第三方 Skill 的原始文件。</p> |
| </DialogHeader> |
| {!runtime || !skill ? ( |
| <div className="flex flex-1 items-center justify-center gap-2 text-sm text-stone-500"><LoaderCircle className="size-4 animate-spin" />正在读取展示信息…</div> |
| ) : ( |
| <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5"> |
| <div className="grid gap-4 sm:grid-cols-2"> |
| <label className="space-y-1.5 text-sm"><span className="font-medium text-stone-700">展示名称</span><Input value={title} onChange={(event) => setTitle(event.target.value)} /></label> |
| <label className="space-y-1.5 text-sm"><span className="font-medium text-stone-700">分类</span><Input value={category} onChange={(event) => setCategory(event.target.value)} /></label> |
| <label className="space-y-1.5 text-sm sm:col-span-2"><span className="font-medium text-stone-700">描述</span><Textarea value={description} onChange={(event) => setDescription(event.target.value)} className="min-h-20 resize-y" /></label> |
| <label className="space-y-1.5 text-sm sm:col-span-2"><span className="font-medium text-stone-700">标签</span><Input value={tags} onChange={(event) => setTags(event.target.value)} placeholder="用逗号或顿号分隔" /></label> |
| </div> |
| |
| <section className="mt-7"> |
| <div className="mb-3 flex items-center justify-between gap-3"><div><h3 className="text-sm font-semibold text-stone-900">用户输入要求</h3><p className="mt-1 text-xs text-stone-500">只有勾选“必需”的项目会阻止执行；参考图片默认可选。</p></div><Button type="button" variant="outline" size="sm" onClick={() => setInputs((current) => [...current, { id: `input-${Date.now()}`, label: "新输入项", type: "text", required: false, description: "" }])}><Plus />新增</Button></div> |
| <div className="space-y-3"> |
| {inputs.map((input, index) => ( |
| <div key={input.id || index} className="grid gap-3 rounded-2xl border border-stone-200 bg-stone-50/60 p-4 sm:grid-cols-[1fr_150px_auto]"> |
| <Input value={input.label} onChange={(event) => setInputs((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, label: event.target.value } : item))} placeholder="输入名称" /> |
| <select value={input.type} onChange={(event) => setInputs((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, type: event.target.value } : item))} className="h-10 rounded-md border border-stone-200 bg-white px-3 text-sm text-stone-700 outline-none focus:border-blue-300"> |
| <option value="text">文字要求</option><option value="image">参考图片</option><option value="file">文件</option><option value="pdf">PDF</option><option value="video">视频</option><option value="audio">音频</option> |
| </select> |
| <Button type="button" variant="ghost" size="icon" onClick={() => setInputs((current) => current.filter((_, itemIndex) => itemIndex !== index))} aria-label="删除输入项"><Trash2 className="size-4" /></Button> |
| <Input value={input.description} onChange={(event) => setInputs((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, description: event.target.value } : item))} placeholder="给用户看的说明" className="sm:col-span-2" /> |
| <label className="flex h-10 items-center gap-2 text-sm text-stone-700"><input type="checkbox" checked={input.required} onChange={(event) => setInputs((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, required: event.target.checked } : item))} className="size-4 rounded border-stone-300" />必需</label> |
| </div> |
| ))} |
| </div> |
| </section> |
| |
| <section className="mt-7"> |
| <div className="mb-3 flex items-center justify-between gap-3"><div><h3 className="text-sm font-semibold text-stone-900">封面与案例图</h3><p className="mt-1 text-xs text-stone-500">封面按 4:3 展示；选择星标可设为封面，其余图片进入案例画廊。</p></div><Button type="button" variant="outline" size="sm" disabled={Boolean(working)} onClick={() => fileRef.current?.click()}>{working === "upload" ? <LoaderCircle className="animate-spin" /> : <ImagePlus />}上传图片</Button><input ref={fileRef} className="hidden" type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/svg+xml" multiple onChange={(event) => void upload(Array.from(event.currentTarget.files || []))} /></div> |
| {assets.length ? <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">{assets.map((asset, index) => ( |
| <div key={asset.path} className={`overflow-hidden rounded-2xl border bg-white ${coverPath === asset.path ? "border-blue-400 ring-2 ring-blue-100" : "border-stone-200"}`}> |
| <SkillCoverThumbnail skillId={skill.id} asset={asset} crop className="aspect-[4/3] w-full rounded-none border-0 border-b" /> |
| <div className="space-y-2 p-3"><Input value={asset.name} onChange={(event) => setAssets((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, name: event.target.value } : item))} className="h-8 text-xs" /><div className="flex gap-2"><button type="button" onClick={() => setCoverPath(asset.path)} className={`inline-flex h-8 flex-1 items-center justify-center gap-1 rounded-lg text-xs ${coverPath === asset.path ? "bg-blue-600 text-white" : "bg-stone-100 text-stone-600 hover:bg-stone-200"}`}><Star className={`size-3 ${coverPath === asset.path ? "fill-current" : ""}`} />{coverPath === asset.path ? "当前封面" : "设为封面"}</button><button type="button" onClick={() => { setAssets((current) => current.filter((_, itemIndex) => itemIndex !== index)); if (coverPath === asset.path) setCoverPath(""); }} className="inline-flex size-8 items-center justify-center rounded-lg text-stone-400 hover:bg-red-50 hover:text-red-600" aria-label={`移除 ${asset.name}`}><Trash2 className="size-3.5" /></button></div></div> |
| </div> |
| ))}</div> : <div className="rounded-2xl border border-dashed border-stone-300 py-10 text-center text-sm text-stone-500">还没有展示图片，可上传自定义封面和案例图。</div>} |
| </section> |
| |
| <section className="mt-7"> |
| <div className="mb-3 flex items-center justify-between gap-3"><div><h3 className="text-sm font-semibold text-stone-900">套用示例</h3><p className="mt-1 text-xs text-stone-500">AI 会阅读 Skill 文档生成不同场景的示例；生成后仍可逐条修改。</p></div><div className="flex gap-2"><Button type="button" variant="outline" size="sm" disabled={Boolean(working)} onClick={() => setExamples((current) => [...current, emptyExample(current.length)])}><Plus />新增</Button><Button type="button" size="sm" disabled={Boolean(working)} onClick={() => void generateExamples()}>{working === "generate" ? <LoaderCircle className="animate-spin" /> : <Sparkles />}AI 生成示例</Button></div></div> |
| <div className="space-y-3">{examples.map((example, index) => ( |
| <div key={example.id || index} className="rounded-2xl border border-stone-200 bg-stone-50/60 p-4"> |
| <div className="grid gap-3 sm:grid-cols-[1fr_1fr_auto]"><Input value={example.title} onChange={(event) => setExamples((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, title: event.target.value } : item))} placeholder="示例标题" /><Input value={example.description} onChange={(event) => setExamples((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, description: event.target.value } : item))} placeholder="适合什么场景" /><Button type="button" variant="ghost" size="icon" onClick={() => setExamples((current) => current.filter((_, itemIndex) => itemIndex !== index))} aria-label="删除示例"><Trash2 className="size-4" /></Button></div> |
| <Textarea value={example.prompt} onChange={(event) => setExamples((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, prompt: event.target.value } : item))} placeholder={`$${skill.id} 具体任务要求`} className="mt-3 min-h-24 resize-y bg-white" /> |
| <Input value={example.attachment_hint} onChange={(event) => setExamples((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, attachment_hint: event.target.value } : item))} placeholder="附件提醒（可选），例如：请上传一张产品正面图" className="mt-3 bg-white" /> |
| </div> |
| ))}</div> |
| </section> |
| </div> |
| )} |
| <div className="flex shrink-0 items-center justify-between gap-3 border-t border-stone-100 bg-white px-6 py-4"><span className="text-xs text-stone-400">保存后用户端立即读取新的展示内容。</span><div className="flex gap-2"><Button type="button" variant="outline" onClick={() => onOpenChange(false)}>取消</Button><Button type="button" disabled={!runtime || Boolean(working)} onClick={() => void save()}>{working === "save" ? <LoaderCircle className="animate-spin" /> : null}保存展示</Button></div></div> |
| </DialogContent> |
| </Dialog> |
| ); |
| } |
|
|
