@joekytc/dsh-swarm 0.1.2 → 0.2.0

package/skills/llm-wiki-skill/workbench/web/src/components/RefMenu.tsx

@@ -0,0 +1,44 @@
+import type { PageRef } from "../lib/api";
+import { cn } from "../lib/utils";
+
+interface Props {
+	open: boolean;
+	query: string;
+	items: PageRef[];
+	selectedIndex: number;
+	onSelect: (item: PageRef) => void;
+}
+
+export function RefMenu({ open, query, items, selectedIndex, onSelect }: Props) {
+	if (!open) return null;
+	return (
+		<div className="popup-menu popup-menu-ref" role="listbox" aria-label="@ 引用页面">
+			<div className="popup-menu-heading">
+				<span className="popup-menu-symbol">@</span>
+				<span>引用页面</span>
+				{query && <span className="popup-menu-query">/ {query}</span>}
+			</div>
+			{items.length === 0 ? (
+				<div className="popup-item popup-item-empty">没有匹配页面</div>
+			) : (
+				items.map((item, index) => (
+					<button
+						key={item.path}
+						type="button"
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={() => onSelect(item)}
+						role="option"
+						aria-selected={index === selectedIndex}
+						className={cn("popup-item w-full text-left", index === selectedIndex && "popup-item-selected")}
+					>
+						<span className="popup-item-kind">{item.category}</span>
+						<span className="min-w-0 flex-1">
+							<span className="block truncate">{item.title}</span>
+							<span className="popup-item-desc block truncate font-mono">{item.path}</span>
+						</span>
+					</button>
+				))
+			)}
+		</div>
+	);
+}

package/skills/llm-wiki-skill/workbench/web/src/components/RightDrawer.tsx

@@ -0,0 +1,298 @@
+import React, { type CSSProperties, Suspense, lazy, useEffect, useRef } from "react";
+
+import { Download, FileText, Maximize2, Minimize2, X } from "lucide-react";
+import type { GraphSummaryCommand } from "@llm-wiki/graph-engine";
+
+import { GraphReader } from "./GraphReader";
+import { GraphSelection } from "./GraphSelection";
+import {
+	GraphCommunitySummary,
+	GraphExcludedObjectSummary,
+	GraphGlobalOverviewSummary,
+	GraphNodeSummary,
+	GraphSearchResultsSummary,
+	GraphSimpleState,
+	GraphUnavailableObjectSummary,
+} from "./GraphSummaryDrawer";
+import { MarkdownView } from "./MarkdownView";
+import type { DrawerState } from "../lib/drawer-state";
+import { getArtifactFileUrl, type ArtifactManifest } from "../lib/api";
+import type { GraphReaderActionId } from "../lib/graph-reader";
+import { cn } from "../lib/utils";
+
+const ArtifactView = lazy(() => import("./ArtifactView").then((module) => ({ default: module.ArtifactView })));
+
+interface Props {
+	drawer: DrawerState;
+	fullscreen: boolean;
+	width: number;
+	defaultWidth: number;
+	onSelectArtifact: (id: string) => void;
+	onOpenPage: (path: string) => void;
+	onWikiLinkSeen: (path: string) => void;
+	onGraphReaderAction: (actionId: GraphReaderActionId) => void;
+	onGraphSummaryCommand?: (command: GraphSummaryCommand) => void;
+	onGraphSummaryNodeSelect?: (nodeId: string) => void;
+	onGraphSummaryNodePreview?: (nodeId: string | null) => void;
+	onGraphSelectionTextChange: (value: string) => void;
+	onGraphSelectionNeighbors: () => void;
+	onGraphSelectionAsk: (actionId: string | null, newConversation: boolean) => void;
+	onResize: (width: number) => void;
+	onToggleFullscreen: () => void;
+	onClose: (reason: "button" | "escape") => void;
+}
+
+const KIND_ICON: Record<ArtifactManifest["kind"], string> = {
+	html: "🌐",
+	pdf: "📄",
+	docx: "📝",
+	pptx: "📊",
+	xlsx: "📋",
+};
+
+export function RightDrawer({
+	drawer,
+	fullscreen,
+	width,
+	defaultWidth,
+	onSelectArtifact,
+	onOpenPage,
+	onWikiLinkSeen,
+	onGraphReaderAction,
+	onGraphSummaryCommand = () => {},
+	onGraphSummaryNodeSelect = () => {},
+	onGraphSummaryNodePreview = () => {},
+	onGraphSelectionTextChange,
+	onGraphSelectionNeighbors,
+	onGraphSelectionAsk,
+	onResize,
+	onToggleFullscreen,
+	onClose,
+}: Props) {
+	const dragStart = useRef<{ x: number; width: number } | null>(null);
+
+	useEffect(() => {
+		return () => {
+			document.body.classList.remove("drawer-resizing");
+		};
+	}, []);
+
+	useEffect(() => {
+		if (drawer.mode === "closed") return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			const target = event.target as { closest?: (selector: string) => Element | null } | null;
+			const topLayerTarget = typeof target?.closest === "function"
+				? target.closest(".search-panel, .appearance-panel, [role='dialog'], [data-radix-popper-content-wrapper]")
+				: null;
+			if (
+				event.defaultPrevented
+				|| topLayerTarget
+			) {
+				return;
+			}
+			if (event.key === "Escape") onClose("escape");
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [drawer.mode, onClose]);
+
+	if (drawer.mode === "closed") return null;
+	const activeArtifact = drawer.mode === "artifacts"
+		? drawer.artifacts.find((item) => item.id === drawer.activeArtifactId) ?? null
+		: null;
+	const title = drawerTitle(drawer, activeArtifact);
+	return (
+		<React.Fragment>
+		<aside
+			className={cn("drawer-panel drawer-panel-open", fullscreen && "drawer-panel-fullscreen")}
+			data-drawer-open="true"
+			style={{ "--drawer-width": `${width}px` } as CSSProperties}
+		>
+			{!fullscreen && (
+				<div
+					className="drawer-resize-handle"
+					role="separator"
+					aria-label="调整预览区宽度"
+					aria-orientation="vertical"
+					tabIndex={0}
+					onDoubleClick={() => onResize(defaultWidth)}
+					onKeyDown={(event) => {
+						if (event.key === "ArrowLeft") {
+							event.preventDefault();
+							onResize(width + 24);
+						}
+						if (event.key === "ArrowRight") {
+							event.preventDefault();
+							onResize(width - 24);
+						}
+						if (event.key === "Home") {
+							event.preventDefault();
+							onResize(defaultWidth);
+						}
+					}}
+					onPointerDown={(event) => {
+						event.preventDefault();
+						dragStart.current = { x: event.clientX, width };
+						document.body.classList.add("drawer-resizing");
+						const target = event.currentTarget;
+						target.setPointerCapture(event.pointerId);
+					}}
+					onPointerMove={(event) => {
+						if (!dragStart.current) return;
+						const delta = dragStart.current.x - event.clientX;
+						onResize(dragStart.current.width + delta);
+					}}
+					onPointerUp={(event) => {
+						dragStart.current = null;
+						document.body.classList.remove("drawer-resizing");
+						if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+							event.currentTarget.releasePointerCapture(event.pointerId);
+						}
+					}}
+					onPointerCancel={(event) => {
+						dragStart.current = null;
+						document.body.classList.remove("drawer-resizing");
+						if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+							event.currentTarget.releasePointerCapture(event.pointerId);
+						}
+					}}
+				/>
+			)}
+			<header className="drawer-header">
+				<div className="drawer-title">
+					{title}
+				</div>
+				<div className="flex items-center gap-1">
+					{activeArtifact && (
+						<button
+							type="button"
+							className="icon-btn"
+							aria-label="下载"
+							onClick={() => {
+								const link = document.createElement("a");
+								link.href = getArtifactFileUrl(activeArtifact.id, activeArtifact.primaryFile);
+								link.download = activeArtifact.primaryFile;
+								link.click();
+							}}
+						>
+							<Download className="size-4" />
+						</button>
+					)}
+					<button type="button" className="icon-btn" onClick={onToggleFullscreen} aria-label={fullscreen ? "退出全屏" : "全屏"}>
+						{fullscreen ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
+					</button>
+					<button type="button" className="icon-btn" onClick={() => onClose("button")} aria-label="关闭">
+						<X className="size-4" />
+					</button>
+				</div>
+			</header>
+			{drawer.mode === "artifacts" && (
+				<div className="drawer-tabs">
+					{drawer.artifacts.map((item) => (
+						<button
+							key={item.id}
+							type="button"
+							onClick={() => onSelectArtifact(item.id)}
+							className={cn("drawer-tab", item.id === drawer.activeArtifactId && "drawer-tab-active")}
+						>
+							{KIND_ICON[item.kind]} {item.metadata.title.slice(0, 12)}
+						</button>
+					))}
+				</div>
+			)}
+			<div className="drawer-content">
+				{drawer.mode === "wiki" && (
+					<>
+						{drawer.loading && <div className="text-muted-foreground">加载中...</div>}
+						{drawer.error && <div className="whitespace-pre-wrap text-destructive">{drawer.error}</div>}
+						{!drawer.loading && !drawer.error && <MarkdownView content={drawer.content} onOpenPage={onOpenPage} />}
+					</>
+				)}
+				{drawer.mode === "graph-reader" && (
+					<GraphReader
+						payload={drawer.payload}
+						content={drawer.content}
+						loading={drawer.loading}
+						error={drawer.error}
+						onOpenPage={onOpenPage}
+						onWikiLinkSeen={onWikiLinkSeen}
+						onAction={onGraphReaderAction}
+					/>
+				)}
+				{drawer.mode === "graph-selection" && (
+					<GraphSelection
+						title={drawer.title}
+						selection={drawer.selection}
+						freeText={drawer.freeText}
+						onFreeTextChange={onGraphSelectionTextChange}
+						onNeighbors={onGraphSelectionNeighbors}
+						onAsk={(action) => onGraphSelectionAsk(action?.id ?? null, false)}
+						onAskInNewConversation={(action) => onGraphSelectionAsk(action?.id ?? null, true)}
+					/>
+				)}
+				{drawer.mode === "graph-node-summary" && (
+					<GraphNodeSummary payload={drawer.payload} onCommand={onGraphSummaryCommand} />
+				)}
+				{drawer.mode === "graph-community-summary" && (
+					<GraphCommunitySummary
+						payload={drawer.payload}
+						onCommand={onGraphSummaryCommand}
+						onShowNodeSummary={onGraphSummaryNodeSelect}
+						onPreviewNode={onGraphSummaryNodePreview}
+					/>
+				)}
+				{drawer.mode === "graph-search-results" && (
+					<GraphSearchResultsSummary payload={drawer.payload} onCommand={onGraphSummaryCommand} />
+				)}
+				{drawer.mode === "graph-excluded-object" && (
+					<GraphExcludedObjectSummary payload={drawer.payload} onCommand={onGraphSummaryCommand} />
+				)}
+				{drawer.mode === "graph-unavailable-object" && (
+					<GraphUnavailableObjectSummary payload={drawer.payload} />
+				)}
+				{drawer.mode === "graph-global-overview" && (
+					<GraphGlobalOverviewSummary payload={drawer.payload} />
+				)}
+				{drawer.mode === "graph-loading" && (
+					<GraphSimpleState title={drawer.title} message={drawer.message ?? "加载中..."} />
+				)}
+				{drawer.mode === "graph-empty" && (
+					<GraphSimpleState title={drawer.title} message={drawer.message} />
+				)}
+				{drawer.mode === "graph-error" && (
+					<GraphSimpleState title={drawer.title} message={drawer.message} />
+				)}
+				{drawer.mode === "artifacts" && (
+					activeArtifact ? (
+						<Suspense fallback={<div className="text-muted-foreground">加载中...</div>}>
+							<ArtifactView manifest={activeArtifact} />
+						</Suspense>
+					) : (
+						<div className="drawer-empty">
+							<FileText className="size-9 opacity-30" />
+							<span>当前对话还没有产物</span>
+						</div>
+					)
+				)}
+			</div>
+		</aside>
+		</React.Fragment>
+	);
+}
+
+function drawerTitle(drawer: DrawerState, activeArtifact: ArtifactManifest | null): string {
+	if (drawer.mode === "wiki") return drawer.path ?? "页面";
+	if (drawer.mode === "graph-reader") return drawer.payload.node.title;
+	if (drawer.mode === "graph-selection") return "选区";
+	if (drawer.mode === "graph-node-summary") return drawer.payload.label;
+	if (drawer.mode === "graph-community-summary") return drawer.payload.label;
+	if (drawer.mode === "graph-search-results") return "搜索结果";
+	if (drawer.mode === "graph-excluded-object") return "暂不可见";
+	if (drawer.mode === "graph-unavailable-object") return "不可用";
+	if (drawer.mode === "graph-global-overview") return "全局概览";
+	if (drawer.mode === "graph-loading" || drawer.mode === "graph-empty" || drawer.mode === "graph-error") return drawer.title;
+	if (drawer.mode === "artifacts") return activeArtifact?.metadata.title ?? "产物";
+	return "";
+}

package/skills/llm-wiki-skill/workbench/web/src/components/SearchPanel.tsx

@@ -0,0 +1,165 @@
+import { ExternalLink, Link2, Search, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import type { PageRef } from "../lib/api";
+import { filterPageRefs } from "../lib/search-filter";
+import { cn } from "../lib/utils";
+
+interface Props {
+	open: boolean;
+	refs: PageRef[];
+	loading?: boolean;
+	error?: string | null;
+	knowledgeBaseName?: string | null;
+	onClose: () => void;
+	onOpenPage: (path: string) => void;
+	onInsertRef?: (path: string) => void;
+}
+
+export function SearchPanel({
+	open,
+	refs,
+	loading = false,
+	error = null,
+	knowledgeBaseName,
+	onClose,
+	onOpenPage,
+	onInsertRef,
+}: Props) {
+	const [query, setQuery] = useState("");
+	const [selected, setSelected] = useState(0);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const results = useMemo(() => filterPageRefs(refs, query, 50), [query, refs]);
+	const selectedResult = results[selected] ?? results[0] ?? null;
+
+	useEffect(() => {
+		if (!open) return;
+		const timer = window.setTimeout(() => {
+			setQuery("");
+			setSelected(0);
+			inputRef.current?.focus();
+		}, 0);
+		return () => window.clearTimeout(timer);
+	}, [open]);
+
+	if (!open) return null;
+
+	const openSelected = () => {
+		if (!selectedResult) return;
+		onOpenPage(selectedResult.ref.path);
+		onClose();
+	};
+
+	return (
+		<div className="search-overlay" role="presentation" onMouseDown={onClose}>
+			<section
+				className="search-panel"
+				aria-label="当前库搜索"
+				onMouseDown={(event) => event.stopPropagation()}
+			>
+				<header className="search-panel-header">
+					<div>
+						<div className="search-panel-title">搜索当前库</div>
+						<div className="search-panel-subtitle">
+							{knowledgeBaseName ? `${knowledgeBaseName} · ${refs.length} 个页面引用` : "请先选择知识库"}
+						</div>
+					</div>
+					<button type="button" className="icon-btn" onClick={onClose} aria-label="关闭搜索">
+						<X className="size-4" />
+					</button>
+				</header>
+				<label className="search-input-wrap">
+					<Search className="size-4" aria-hidden="true" />
+					<input
+						ref={inputRef}
+						value={query}
+						onChange={(event) => {
+							setQuery(event.target.value);
+							setSelected(0);
+						}}
+						onKeyDown={(event) => {
+							if (event.key === "Escape") {
+								event.preventDefault();
+								onClose();
+								return;
+							}
+							if (event.key === "ArrowDown") {
+								event.preventDefault();
+								setSelected((value) => Math.min(value + 1, Math.max(results.length - 1, 0)));
+								return;
+							}
+							if (event.key === "ArrowUp") {
+								event.preventDefault();
+								setSelected((value) => Math.max(value - 1, 0));
+								return;
+							}
+							if (event.key === "Enter") {
+								event.preventDefault();
+								openSelected();
+							}
+						}}
+						placeholder="输入标题、路径、中文关键词..."
+						aria-label="搜索当前库页面"
+					/>
+					<kbd>Enter</kbd>
+				</label>
+				<div className="search-panel-body">
+					{loading && <div className="search-state">正在加载当前库页面...</div>}
+					{error && <div className="search-state search-state-error">{error}</div>}
+					{!loading && !error && !knowledgeBaseName && (
+						<div className="search-state">请先选择知识库</div>
+					)}
+					{!loading && !error && knowledgeBaseName && refs.length === 0 && (
+						<div className="search-state">当前库还没有可搜索页面</div>
+					)}
+					{!loading && !error && knowledgeBaseName && refs.length > 0 && results.length === 0 && (
+						<div className="search-state">没有匹配结果</div>
+					)}
+					{!loading && !error && results.length > 0 && (
+						<div className="search-results" role="listbox" aria-label="搜索结果">
+							{results.map((result, index) => (
+								<div
+									key={result.ref.path}
+									role="option"
+									aria-selected={index === selected}
+									className={cn("search-result", index === selected && "search-result-selected")}
+									onMouseEnter={() => setSelected(index)}
+								>
+									<button
+										type="button"
+										className="search-result-main"
+										onClick={() => {
+											onOpenPage(result.ref.path);
+											onClose();
+										}}
+									>
+										<span className="search-result-kind">{result.ref.category}</span>
+										<span className="search-result-copy">
+											<span className="search-result-title">{result.ref.title}</span>
+											<span className="search-result-path">{result.ref.path}</span>
+										</span>
+										<ExternalLink className="size-3.5" />
+									</button>
+									{onInsertRef && (
+										<button
+											type="button"
+											className="search-insert-btn"
+											onClick={(event) => {
+												event.stopPropagation();
+												onInsertRef(result.ref.path);
+												onClose();
+											}}
+										>
+											<Link2 className="size-3.5" />
+											插入
+										</button>
+									)}
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</section>
+		</div>
+	);
+}