571 lines
20 KiB
TypeScript
571 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||
import { Network, Paperclip, Settings2, Send, X } from "lucide-react";
|
||
|
||
type AgentAssetItem = {
|
||
kind: "media" | "local-mindmap" | "test-pdf";
|
||
id: string;
|
||
title: string;
|
||
fileUrl: string;
|
||
mimeType?: string | null;
|
||
assetType?: string | null;
|
||
fileName?: string | null;
|
||
};
|
||
|
||
type AgentMessage = { role: "user" | "assistant"; content: string };
|
||
|
||
type ToolName =
|
||
| "mindmap_get"
|
||
| "mindmap_get_subtree"
|
||
| "search_web"
|
||
| "mindmap_apply_ops"
|
||
| "pdf_replace_mindmap";
|
||
|
||
const TOOL_LABEL: Record<ToolName, string> = {
|
||
mindmap_get: "读导图（摘要）",
|
||
mindmap_get_subtree: "读子树（按 uid）",
|
||
search_web: "联网检索（SearxNG）",
|
||
mindmap_apply_ops: "写入导图（ops）",
|
||
pdf_replace_mindmap: "PDF→导图（替换当前）",
|
||
};
|
||
|
||
const DEFAULT_TOOLS: ToolName[] = [
|
||
"mindmap_get",
|
||
"mindmap_get_subtree",
|
||
"search_web",
|
||
"mindmap_apply_ops",
|
||
"pdf_replace_mindmap",
|
||
];
|
||
|
||
const ONLINE_MODELS = [
|
||
"",
|
||
"gemini-2.5-flash",
|
||
"gemini-2.5-pro",
|
||
"gemini-3-pro-preview",
|
||
"gemini-3-flash-preview",
|
||
] as const;
|
||
|
||
export function MindmapAiAgentPanel({
|
||
documentId,
|
||
mindmapId,
|
||
mindmap,
|
||
activeNodes,
|
||
}: {
|
||
documentId: string;
|
||
mindmapId: string;
|
||
mindmap: any;
|
||
activeNodes: any[];
|
||
}) {
|
||
const [messages, setMessages] = useState<AgentMessage[]>([
|
||
{
|
||
role: "assistant",
|
||
content:
|
||
"你好，我是思维导图 AI Agent。你可以：\n- 直接说需求（例如：补完选中节点、总结 @PDF 并写入导图、从 @PDF 生成章/节结构导图）\n- 使用 @ 选择文件或上传文件\n- 让 AI 自动选择工具，或手动勾选允许使用的工具",
|
||
},
|
||
]);
|
||
const [input, setInput] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const [networkOn, setNetworkOn] = useState(true);
|
||
const [toolAuto, setToolAuto] = useState(true);
|
||
const [toolPickerOpen, setToolPickerOpen] = useState(false);
|
||
const [selectedTools, setSelectedTools] = useState<ToolName[]>(DEFAULT_TOOLS);
|
||
const [aiProvider, setAiProvider] = useState<"online" | "local">("online");
|
||
const [aiModel, setAiModel] = useState<string>("");
|
||
|
||
const [assets, setAssets] = useState<AgentAssetItem[]>([]);
|
||
const [workspaceId, setWorkspaceId] = useState<string>("");
|
||
const [attachments, setAttachments] = useState<AgentAssetItem[]>([]);
|
||
const [debug, setDebug] = useState<string>("");
|
||
|
||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const p = (window.localStorage.getItem("mindmap_ai_provider") || "").trim();
|
||
const m = window.localStorage.getItem("mindmap_ai_model") || "";
|
||
if (p === "local" || p === "online") setAiProvider(p);
|
||
if (typeof m === "string") setAiModel(m);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
try {
|
||
window.localStorage.setItem("mindmap_ai_provider", aiProvider);
|
||
window.localStorage.setItem("mindmap_ai_model", aiModel);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, [aiProvider, aiModel]);
|
||
|
||
// @ 选择
|
||
const [mentionOpen, setMentionOpen] = useState(false);
|
||
const [mentionQuery, setMentionQuery] = useState("");
|
||
const [mentionRange, setMentionRange] = useState<{ start: number; end: number } | null>(null);
|
||
|
||
const persistMindmapData = (data: unknown): boolean => {
|
||
try {
|
||
const w = window as unknown as {
|
||
__mindmapPersistById?: Record<string, (data: unknown) => void>;
|
||
};
|
||
const fn = w.__mindmapPersistById?.[mindmapId];
|
||
if (typeof fn === "function") {
|
||
fn(data);
|
||
return true;
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
return false;
|
||
};
|
||
|
||
const selectedUids = useMemo(() => {
|
||
const list = Array.isArray(activeNodes) ? activeNodes : [];
|
||
return list
|
||
.slice(0, 3)
|
||
.map((n) => String(n?.nodeData?.data?.uid ?? n?.nodeData?.uid ?? n?.getData?.("uid") ?? n?.uid ?? ""))
|
||
.filter(Boolean);
|
||
}, [activeNodes]);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
if (!documentId) return;
|
||
void (async () => {
|
||
try {
|
||
const res = await fetch(`/api/mindmap-ai/assets?documentId=${encodeURIComponent(documentId)}`);
|
||
const json = (await res.json().catch(() => null)) as any;
|
||
if (!res.ok) return;
|
||
if (cancelled) return;
|
||
setWorkspaceId(String(json?.workspaceId ?? ""));
|
||
setAssets(Array.isArray(json?.items) ? (json.items as AgentAssetItem[]) : []);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [documentId]);
|
||
|
||
const filteredAssets = useMemo(() => {
|
||
const q = mentionQuery.trim().toLowerCase();
|
||
const base = assets.slice(0, 200);
|
||
if (!q) return base.slice(0, 12);
|
||
return base
|
||
.filter((a) => {
|
||
const hay = `${a.title} ${a.fileName ?? ""}`.toLowerCase();
|
||
return hay.includes(q);
|
||
})
|
||
.slice(0, 12);
|
||
}, [assets, mentionQuery]);
|
||
|
||
const updateMentionState = (value: string, cursor: number) => {
|
||
const before = value.slice(0, Math.max(0, cursor));
|
||
const at = before.lastIndexOf("@");
|
||
if (at === -1) {
|
||
setMentionOpen(false);
|
||
setMentionQuery("");
|
||
setMentionRange(null);
|
||
return;
|
||
}
|
||
// 若 @ 前是非空白字符，视为 email/路径等，避免误触发
|
||
if (at > 0 && /\S/.test(before[at - 1] || "")) {
|
||
setMentionOpen(false);
|
||
setMentionQuery("");
|
||
setMentionRange(null);
|
||
return;
|
||
}
|
||
const token = before.slice(at + 1);
|
||
// 遇到换行/空格则不触发
|
||
if (/\s/.test(token)) {
|
||
setMentionOpen(false);
|
||
setMentionQuery("");
|
||
setMentionRange(null);
|
||
return;
|
||
}
|
||
setMentionOpen(true);
|
||
setMentionQuery(token);
|
||
setMentionRange({ start: at, end: cursor });
|
||
};
|
||
|
||
const insertMention = (item: AgentAssetItem) => {
|
||
const el = textareaRef.current;
|
||
if (!el || !mentionRange) return;
|
||
const next = `${input.slice(0, mentionRange.start)}@${item.title}${input.slice(mentionRange.end)}`;
|
||
setInput(next);
|
||
setMentionOpen(false);
|
||
setMentionQuery("");
|
||
setMentionRange(null);
|
||
// 去重加入附件
|
||
setAttachments((prev) => (prev.some((x) => x.id === item.id) ? prev : [...prev, item]));
|
||
// 光标移动到插入后
|
||
window.setTimeout(() => {
|
||
try {
|
||
const pos = mentionRange.start + 1 + item.title.length;
|
||
el.focus();
|
||
el.setSelectionRange(pos, pos);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, 0);
|
||
};
|
||
|
||
const toggleTool = (tool: ToolName) => {
|
||
setSelectedTools((prev) => {
|
||
if (prev.includes(tool)) return prev.filter((t) => t !== tool);
|
||
return [...prev, tool];
|
||
});
|
||
};
|
||
|
||
const uploadFiles = async (files: FileList | null) => {
|
||
if (!files || files.length === 0) return;
|
||
if (!workspaceId || !documentId) {
|
||
window.alert("缺少 workspaceId/documentId，无法上传。请刷新后重试。");
|
||
return;
|
||
}
|
||
const file = files[0];
|
||
const form = new FormData();
|
||
form.append("file", file);
|
||
form.append("workspaceId", workspaceId);
|
||
form.append("documentId", documentId);
|
||
|
||
setLoading(true);
|
||
try {
|
||
const res = await fetch("/api/media/upload", { method: "POST", body: form });
|
||
const json = (await res.json().catch(() => null)) as any;
|
||
if (!res.ok) throw new Error(String(json?.error ?? `上传失败：${res.status}`));
|
||
const asset = json?.asset;
|
||
const item: AgentAssetItem = {
|
||
kind: "media",
|
||
id: String(asset?.id ?? `media:${Date.now()}`),
|
||
title: String(asset?.file_name ?? file.name),
|
||
fileUrl: String(asset?.file_url ?? ""),
|
||
mimeType: String(asset?.mime_type ?? file.type ?? ""),
|
||
assetType: String(asset?.asset_type ?? "file"),
|
||
fileName: String(asset?.file_name ?? file.name),
|
||
};
|
||
setAttachments((prev) => (prev.some((x) => x.id === item.id) ? prev : [...prev, item]));
|
||
// 刷新资产列表
|
||
try {
|
||
const listRes = await fetch(`/api/mindmap-ai/assets?documentId=${encodeURIComponent(documentId)}`);
|
||
const listJson = (await listRes.json().catch(() => null)) as any;
|
||
if (listRes.ok && Array.isArray(listJson?.items)) {
|
||
setAssets(listJson.items as AgentAssetItem[]);
|
||
setWorkspaceId(String(listJson?.workspaceId ?? workspaceId));
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
} catch (e) {
|
||
window.alert(e instanceof Error ? e.message : String(e));
|
||
} finally {
|
||
setLoading(false);
|
||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||
}
|
||
};
|
||
|
||
const send = async () => {
|
||
const content = input.trim();
|
||
if (!content) return;
|
||
setDebug("");
|
||
|
||
const nextMessages: AgentMessage[] = [...messages, { role: "user", content }];
|
||
setMessages(nextMessages);
|
||
setInput("");
|
||
setLoading(true);
|
||
|
||
try {
|
||
const res = await fetch("/api/mindmap-ai/agent", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
documentId,
|
||
mindmapId,
|
||
selectedUids,
|
||
messages: nextMessages,
|
||
attachments: attachments.map((a) => ({
|
||
id: a.id,
|
||
title: a.title,
|
||
fileUrl: a.fileUrl,
|
||
mimeType: a.mimeType ?? null,
|
||
})),
|
||
toolChoice: toolAuto ? { mode: "auto" } : { mode: "manual", tools: selectedTools },
|
||
options: { searxng: networkOn, ai: { provider: aiProvider, model: aiModel.trim() || undefined } },
|
||
}),
|
||
});
|
||
const json = (await res.json().catch(() => null)) as any;
|
||
if (!res.ok) throw new Error(String(json?.error ?? `请求失败：${res.status}`));
|
||
|
||
const assistantText = String(json?.message ?? "");
|
||
setMessages((prev) => [...prev, { role: "assistant", content: assistantText || "（无输出）" }]);
|
||
|
||
if (json?.data) {
|
||
mindmap?.setData?.(json.data);
|
||
mindmap?.command?.clearHistory?.();
|
||
persistMindmapData(json.data);
|
||
}
|
||
|
||
if (json?.trace) {
|
||
setDebug(JSON.stringify(json.trace, null, 2));
|
||
}
|
||
} catch (e) {
|
||
const msg = e instanceof Error ? e.message : String(e);
|
||
setMessages((prev) => [...prev, { role: "assistant", content: `执行失败：${msg}` }]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex h-full flex-col">
|
||
<div className="flex items-center justify-between gap-2 pb-3">
|
||
<div className="text-xs text-gray-500">
|
||
{selectedUids.length ? `选中节点：${selectedUids[0]}` : "未选中节点（将以整图为上下文）"}
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs ${networkOn ? "border-blue-200 bg-blue-50 text-blue-700" : "border-gray-200 text-gray-500"}`}
|
||
title="联网检索（SearxNG）"
|
||
onClick={() => setNetworkOn((v) => !v)}
|
||
>
|
||
<Network className="h-3 w-3" />
|
||
联网
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs ${toolPickerOpen ? "border-gray-300 bg-gray-50 text-gray-700" : "border-gray-200 text-gray-600"}`}
|
||
title="选择允许使用的工具"
|
||
onClick={() => setToolPickerOpen((v) => !v)}
|
||
>
|
||
<Settings2 className="h-3 w-3" />
|
||
工具
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{toolPickerOpen && (
|
||
<div className="mb-3 rounded-md border border-gray-200 bg-white p-2">
|
||
<div className="mb-2 flex items-center justify-between">
|
||
<div className="text-xs font-medium text-gray-700">工具选择</div>
|
||
<button
|
||
type="button"
|
||
className={`rounded px-2 py-1 text-xs ${toolAuto ? "bg-blue-500 text-white" : "border border-gray-200 text-gray-600"}`}
|
||
onClick={() => setToolAuto((v) => !v)}
|
||
title="自动：AI 自行选择；手动：仅允许勾选工具"
|
||
>
|
||
{toolAuto ? "自动" : "手动"}
|
||
</button>
|
||
</div>
|
||
<div className="space-y-1">
|
||
{DEFAULT_TOOLS.map((t) => (
|
||
<label key={t} className={`flex cursor-pointer items-center gap-2 text-xs ${toolAuto ? "opacity-50" : ""}`}>
|
||
<input
|
||
type="checkbox"
|
||
disabled={toolAuto}
|
||
checked={selectedTools.includes(t)}
|
||
onChange={() => toggleTool(t)}
|
||
/>
|
||
<span className="text-gray-700">{TOOL_LABEL[t]}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
<div className="mt-2 text-[11px] text-gray-400">
|
||
提示：如果你希望 AI 一定要“写入导图”，请在需求中明确说“请写入并保存”。
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex-1 overflow-y-auto rounded-md border border-gray-200 bg-white p-2">
|
||
<div className="space-y-2">
|
||
{messages.map((m, idx) => (
|
||
<div
|
||
key={idx}
|
||
className={`whitespace-pre-wrap rounded-md px-2 py-2 text-sm ${m.role === "user" ? "bg-gray-50 text-gray-900" : "bg-white text-gray-800"}`}
|
||
>
|
||
<div className="mb-1 text-[11px] text-gray-400">{m.role === "user" ? "你" : "AI"}</div>
|
||
<div>{m.content}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{attachments.length > 0 && (
|
||
<div className="mt-2 flex flex-wrap gap-1">
|
||
{attachments.map((a) => (
|
||
<span
|
||
key={a.id}
|
||
className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700"
|
||
title={a.fileUrl}
|
||
>
|
||
@{a.title}
|
||
<button
|
||
type="button"
|
||
className="text-gray-400 hover:text-gray-700"
|
||
onClick={() => setAttachments((prev) => prev.filter((x) => x.id !== a.id))}
|
||
>
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-2 rounded-md border border-gray-200 bg-white px-2 py-2 text-xs text-gray-700">
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<div className="text-gray-500">AI：</div>
|
||
<label className="inline-flex cursor-pointer items-center gap-1">
|
||
<input
|
||
type="radio"
|
||
name="mindmap-ai-provider"
|
||
data-testid="mindmap-ai-provider-online"
|
||
checked={aiProvider === "online"}
|
||
onChange={() => setAiProvider("online")}
|
||
/>
|
||
在线
|
||
</label>
|
||
<label className="inline-flex cursor-pointer items-center gap-1">
|
||
<input
|
||
type="radio"
|
||
name="mindmap-ai-provider"
|
||
data-testid="mindmap-ai-provider-local"
|
||
checked={aiProvider === "local"}
|
||
onChange={() => setAiProvider("local")}
|
||
/>
|
||
本地
|
||
</label>
|
||
<div className="flex items-center gap-2">
|
||
<div className="text-gray-500">模型：</div>
|
||
{aiProvider === "online" ? (
|
||
<select
|
||
data-testid="mindmap-ai-model-select"
|
||
className="rounded border border-gray-200 bg-white px-2 py-1 text-xs outline-none focus:border-blue-300"
|
||
value={aiModel}
|
||
onChange={(e) => setAiModel(e.target.value)}
|
||
>
|
||
{ONLINE_MODELS.map((m) => (
|
||
<option key={m || "__default__"} value={m}>
|
||
{m ? m : "默认（ai.md）"}
|
||
</option>
|
||
))}
|
||
</select>
|
||
) : (
|
||
<input
|
||
data-testid="mindmap-ai-model-input"
|
||
className="w-[220px] rounded border border-gray-200 bg-white px-2 py-1 text-xs outline-none focus:border-blue-300"
|
||
value={aiModel}
|
||
onChange={(e) => setAiModel(e.target.value)}
|
||
placeholder="默认（ai.local.md/环境变量）"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{aiProvider === "local" ? (
|
||
<div className="mt-1 text-[11px] text-gray-400">
|
||
本地 AI 需配置 `LOCAL_AI_BASE_URL`/`LOCAL_AI_MODEL` 或 `ai.local.md` / `ai-local.md`
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="relative mt-2">
|
||
{mentionOpen && filteredAssets.length > 0 && (
|
||
<div className="absolute bottom-[calc(100%+8px)] left-0 right-0 z-30 max-h-56 overflow-auto rounded-md border border-gray-200 bg-white shadow">
|
||
{filteredAssets.map((a) => (
|
||
<button
|
||
key={a.id}
|
||
type="button"
|
||
className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
|
||
onClick={() => insertMention(a)}
|
||
>
|
||
<span className="truncate text-gray-800">{a.title}</span>
|
||
<span className="shrink-0 text-[11px] text-gray-400">{a.kind}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<textarea
|
||
ref={textareaRef}
|
||
data-testid="mindmap-ai-input"
|
||
className="w-full resize-none rounded-md border border-gray-200 bg-white p-2 text-sm outline-none focus:border-blue-300"
|
||
rows={4}
|
||
value={input}
|
||
placeholder="输入你的需求。使用 @ 选择文件（PDF/附件/本地导图），例如：总结 @卤化反应原理_1-9.pdf 并写入导图（章->节->要点）。"
|
||
onChange={(e) => {
|
||
const v = e.target.value;
|
||
setInput(v);
|
||
updateMentionState(v, e.target.selectionStart ?? v.length);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
// 焦点在 AI 输入框时，不应触发导图 Enter/Tab 快捷键
|
||
e.stopPropagation();
|
||
if (e.key === "Escape") {
|
||
setMentionOpen(false);
|
||
setToolPickerOpen(false);
|
||
return;
|
||
}
|
||
if (e.key === "Enter") {
|
||
// Enter 发送；Shift+Enter 换行
|
||
if (!e.shiftKey && !e.isComposing) {
|
||
e.preventDefault();
|
||
if (!loading) void send();
|
||
}
|
||
return;
|
||
}
|
||
}}
|
||
onClick={(e) => {
|
||
const el = e.currentTarget;
|
||
updateMentionState(el.value, el.selectionStart ?? el.value.length);
|
||
}}
|
||
/>
|
||
|
||
<div className="mt-2 flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
className="inline-flex items-center gap-1 rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
title="上传文件到当前页面附件"
|
||
disabled={loading}
|
||
>
|
||
<Paperclip className="h-3 w-3" />
|
||
上传
|
||
</button>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
void uploadFiles(e.target.files);
|
||
}}
|
||
accept="*/*"
|
||
/>
|
||
<div className="text-[11px] text-gray-400">Enter 发送 · Shift+Enter 换行</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
|
||
disabled={loading || !input.trim()}
|
||
onClick={() => void send()}
|
||
>
|
||
<Send className="h-4 w-4" />
|
||
{loading ? "执行中..." : "发送"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{debug ? (
|
||
<details className="mt-2 rounded-md border border-gray-200 bg-white p-2 text-xs text-gray-600">
|
||
<summary className="cursor-pointer select-none">调试信息（tool trace）</summary>
|
||
<pre className="mt-2 max-h-56 overflow-auto whitespace-pre-wrap">{debug}</pre>
|
||
</details>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|