| "use client"; |
|
|
| import { useEffect, useMemo, useState } from "react"; |
| import { FileText, LoaderCircle } from "lucide-react"; |
|
|
| import { AssistantMarkdown } from "@/components/chat/assistant-markdown"; |
| import { readSkillResource, type SkillRuntime } from "@/lib/api"; |
| import { cn } from "@/lib/utils"; |
|
|
| const DOCUMENT_EXTENSIONS = /\.(?:md|mdx|txt|json|jsonc|ya?ml|toml|xml|html?|css|csv|tsv|ini|cfg|conf|py|js|jsx|ts|tsx|sh|ps1)$/i; |
|
|
| function documentPaths(runtime: SkillRuntime) { |
| return runtime.resources |
| .filter((resource) => resource.readable && DOCUMENT_EXTENSIONS.test(resource.path)) |
| .map((resource) => resource.path) |
| .sort((left, right) => { |
| if (left === "SKILL.md") return -1; |
| if (right === "SKILL.md") return 1; |
| return left.localeCompare(right); |
| }); |
| } |
|
|
| export function SkillDocumentBrowser({ skillId, runtime }: { skillId: string; runtime: SkillRuntime }) { |
| const paths = useMemo(() => documentPaths(runtime), [runtime]); |
| const [activePath, setActivePath] = useState(paths[0] || ""); |
| const [documents, setDocuments] = useState<Record<string, string>>({}); |
| const [loading, setLoading] = useState(false); |
| const [error, setError] = useState(""); |
|
|
| useEffect(() => { |
| setActivePath(paths[0] || ""); |
| setDocuments({}); |
| setError(""); |
| }, [skillId, paths]); |
|
|
| useEffect(() => { |
| if (!activePath || documents[activePath]) return; |
| let cancelled = false; |
| setLoading(true); |
| setError(""); |
| void readSkillResource(skillId, activePath) |
| .then((resource) => { |
| if (!cancelled) setDocuments((current) => ({ ...current, [activePath]: resource.content })); |
| }) |
| .catch((reason) => { |
| if (!cancelled) setError(reason instanceof Error ? reason.message : "读取文档失败"); |
| }) |
| .finally(() => { |
| if (!cancelled) setLoading(false); |
| }); |
| return () => { cancelled = true; }; |
| }, [activePath, documents, skillId]); |
|
|
| if (!paths.length) return <p className="text-xs text-stone-500">这个 Skill 没有可展示的文本文件。</p>; |
|
|
| return ( |
| <div className="grid min-h-72 overflow-hidden rounded-xl border border-stone-200 bg-white sm:grid-cols-[220px_minmax(0,1fr)]"> |
| <nav className="max-h-80 overflow-y-auto border-b border-stone-200 bg-stone-50 p-2 sm:border-b-0 sm:border-r" aria-label="Skill 文档列表"> |
| {paths.map((path) => ( |
| <button key={path} type="button" onClick={() => setActivePath(path)} className={cn("flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-xs", activePath === path ? "bg-white font-medium text-blue-700 shadow-sm" : "text-stone-600 hover:bg-white")}> |
| <FileText className="size-3.5 shrink-0" /><span className="truncate" title={path}>{path}</span> |
| </button> |
| ))} |
| </nav> |
| <div className="max-h-80 min-w-0 overflow-auto p-4"> |
| {loading && !documents[activePath] ? <div className="flex items-center gap-2 text-sm text-stone-500"><LoaderCircle className="size-4 animate-spin" />正在读取 {activePath}</div> : null} |
| {error ? <div className="text-sm text-red-600">{error}</div> : null} |
| {documents[activePath] ? <AssistantMarkdown content={documents[activePath]} /> : null} |
| </div> |
| </div> |
| ); |
| } |
|
|
