@research-copilot/plugin 1.1.16 → 1.1.18

package/dist/skills/llm-wiki/workbench/web/src/components/GraphSelection.tsx

@@ -0,0 +1,100 @@
+import { MessageSquarePlus, Plus, Send } from "lucide-react";
+import type { Selection, SelectionAction } from "@llm-wiki/graph-engine";
+
+import { graphSelectionViewModel } from "@/lib/graph-selection-drawer";
+
+interface Props {
+	title: string;
+	selection: Selection;
+	freeText: string;
+	onFreeTextChange: (value: string) => void;
+	onNeighbors: () => void;
+	onAsk: (action: SelectionAction | null) => void;
+	onAskInNewConversation: (action: SelectionAction | null) => void;
+}
+
+export function GraphSelection({
+	title,
+	selection,
+	freeText,
+	onFreeTextChange,
+	onNeighbors,
+	onAsk,
+	onAskInNewConversation,
+}: Props) {
+	const view = graphSelectionViewModel(selection);
+	const canSendFreeText = freeText.trim().length > 0;
+	const defaultAction = selection.actions?.[0] ?? null;
+	return (
+		<article className="graph-selection-drawer" data-testid="graph-selection-drawer">
+			<div className="graph-selection-hint">{view.hint}</div>
+			<div className="graph-selection-title" title={title}>{title}</div>
+			{view.showFacts && (
+				<div className="graph-selection-facts">
+					{view.facts.map((fact) => (
+						<Fact key={fact.label} label={fact.label} value={fact.value} />
+					))}
+				</div>
+			)}
+			<div className="graph-selection-actions">
+				<button
+					type="button"
+					className="graph-selection-action graph-selection-action-muted"
+					onClick={onNeighbors}
+					disabled={!view.canExpandNeighbors}
+				>
+					<Plus />
+					邻居
+				</button>
+				{selection.actions?.map((action) => (
+					<button
+						key={action.id}
+						type="button"
+						className="graph-selection-action"
+						data-action-id={action.id}
+						onClick={() => onAsk(action)}
+					>
+						<Send />
+						{action.label}
+					</button>
+				))}
+			</div>
+			<textarea
+				className="graph-selection-textarea"
+				value={freeText}
+				onChange={(event) => onFreeTextChange(event.target.value)}
+				rows={3}
+				placeholder="补充说明（可选）"
+			/>
+			<div className="graph-selection-footer">
+				<button
+					type="button"
+					className="graph-selection-send"
+					onClick={() => onAsk(null)}
+					disabled={!canSendFreeText}
+				>
+					<Send />
+					发送
+				</button>
+				<button
+					type="button"
+					className="graph-selection-secondary"
+					onClick={() => onAskInNewConversation(canSendFreeText ? null : defaultAction)}
+					disabled={!canSendFreeText && !defaultAction}
+				>
+					<MessageSquarePlus />
+					新对话
+				</button>
+			</div>
+		</article>
+	);
+}
+
+function Fact({ label, value }: { label: string; value: number }) {
+	return (
+		<div className="graph-selection-fact">
+			<strong>{value}</strong>
+			<span>{label}</span>
+		</div>
+	);
+}

package/dist/skills/llm-wiki/workbench/web/src/components/MarkdownView.tsx

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { emitWikiLinkSeen, extractWikiPageRefs, normalizeWikiLinks } from "@/lib/wiki-links";
+
+interface Props {
+	content: string;
+	onOpenPage?: (path: string) => void;
+	onWikiLinkSeen?: (path: string) => void;
+}
+
+export function MarkdownView({ content, onOpenPage, onWikiLinkSeen }: Props) {
+	useEffect(() => {
+		if (!onWikiLinkSeen) return;
+		for (const path of extractWikiPageRefs(content)) {
+			onWikiLinkSeen(path);
+			emitWikiLinkSeen(path);
+		}
+	}, [content, onWikiLinkSeen]);
+
+	return (
+		<div className="prose prose-invert max-w-none prose-pre:bg-background prose-pre:text-foreground prose-code:text-foreground">
+			<ReactMarkdown
+				remarkPlugins={[remarkGfm]}
+				components={{
+					a: ({ href, children }) => {
+						if (href?.startsWith("wiki/")) {
+							return (
+								<a
+									href={href}
+									onClick={(e) => {
+										e.preventDefault();
+										onWikiLinkSeen?.(href);
+										emitWikiLinkSeen(href);
+										onOpenPage?.(href);
+									}}
+									className="cursor-pointer underline decoration-primary underline-offset-4"
+								>
+									{children}
+								</a>
+							);
+						}
+						return (
+							<a href={href} target="_blank" rel="noopener noreferrer">
+								{children}
+							</a>
+						);
+					},
+				}}
+			>
+				{normalizeWikiLinks(content)}
+			</ReactMarkdown>
+		</div>
+	);
+}

package/dist/skills/llm-wiki/workbench/web/src/components/NewWikiDialog.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+interface Props {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSubmit: (name: string, purpose: string) => Promise<void>;
+}
+
+export function NewWikiDialog({ open, onOpenChange, onSubmit }: Props) {
+	const [name, setName] = useState("");
+	const [purpose, setPurpose] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const reset = () => {
+		setName("");
+		setPurpose("");
+		setError(null);
+		setSubmitting(false);
+	};
+
+	const handleSubmit = async () => {
+		if (!name.trim() || !purpose.trim()) {
+			setError("名称和研究方向都需要填写");
+			return;
+		}
+		setSubmitting(true);
+		setError(null);
+		try {
+			await onSubmit(name.trim(), purpose.trim());
+			reset();
+			onOpenChange(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+			setSubmitting(false);
+		}
+	};
+
+	const handleOpenChange = (newOpen: boolean) => {
+		if (!newOpen) reset();
+		onOpenChange(newOpen);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<DialogContent className="dialog-surface sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>新建知识库</DialogTitle>
+					<DialogDescription>在默认目录下创建一个完整的 llm-wiki 知识库。</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-3 py-2">
+					<Input
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+						placeholder="stage2-research"
+						autoFocus
+						className="form-field"
+					/>
+					<Input
+						value={purpose}
+						onChange={(e) => setPurpose(e.target.value)}
+						placeholder="研究方向"
+						className="form-field"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !submitting) {
+								e.preventDefault();
+								handleSubmit();
+							}
+						}}
+					/>
+					{error && (
+						<div className="rounded-md border border-destructive bg-destructive/10 px-2 py-1.5 text-xs text-destructive">
+							{error}
+						</div>
+					)}
+				</div>
+
+				<DialogFooter>
+					<Button variant="outline" onClick={() => handleOpenChange(false)} disabled={submitting}>
+						取消
+					</Button>
+					<Button onClick={handleSubmit} disabled={submitting}>
+						{submitting ? "创建中..." : "创建"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

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

@@ -0,0 +1,40 @@
+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">
+			<div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--app-muted)]">
+				@ 引用 {query && <span className="normal-case opacity-70">/ {query}</span>}
+			</div>
+			{items.length === 0 ? (
+				<div className="popup-item text-[var(--app-muted)]">没有匹配页面</div>
+			) : (
+				items.map((item, index) => (
+					<button
+						key={item.path}
+						type="button"
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={() => onSelect(item)}
+						className={cn("popup-item w-full text-left", index === selectedIndex && "popup-item-selected")}
+					>
+						<span className="min-w-20 text-xs text-[var(--app-muted)]">{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/dist/skills/llm-wiki/workbench/web/src/components/RightDrawer.tsx

@@ -0,0 +1,227 @@
+import { type CSSProperties, useEffect, useRef } from "react";
+
+import { Download, FileText, Maximize2, Minimize2, X } from "lucide-react";
+
+import { ArtifactView } from "@/components/ArtifactView";
+import { GraphReader } from "@/components/GraphReader";
+import { GraphSelection } from "@/components/GraphSelection";
+import { MarkdownView } from "@/components/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";
+
+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;
+	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,
+	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) => {
+			if (event.key === "Escape") onClose("escape");
+		};
+
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+		return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
+	}, [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 (
+		<aside
+			className={cn("drawer-panel drawer-panel-open", fullscreen && "drawer-panel-fullscreen")}
+			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 === "artifacts" && (
+					activeArtifact ? (
+						<ArtifactView manifest={activeArtifact} />
+					) : (
+						<div className="drawer-empty">
+							<FileText className="size-9 opacity-30" />
+							<span>当前对话还没有产物</span>
+						</div>
+					)
+				)}
+			</div>
+		</aside>
+	);
+}
+
+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 === "artifacts") return activeArtifact?.metadata.title ?? "产物";
+	return "";
+}