1210 lines
47 KiB
TypeScript
1210 lines
47 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||
import { ChevronLeft, History, Network, Plus, Settings, Settings2, Send, Sparkles, User, Wrench, X } from "lucide-react";
|
||
import type { Json } from "@/types/supabase";
|
||
import { useEditorBridgeStore } from "@/store/editor-bridge";
|
||
import { useAiAgentUiStore } from "@/store/ai-agent-ui";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import {
|
||
Sheet,
|
||
SheetContent,
|
||
SheetHeader,
|
||
SheetTitle,
|
||
} from "@/components/ui/sheet";
|
||
|
||
type AgentMessage = { role: "user" | "assistant"; content: string };
|
||
|
||
const DEFAULT_SESSION_MESSAGES: AgentMessage[] = [
|
||
{
|
||
role: "assistant",
|
||
content:
|
||
"你好，我是页面 AI Agent。\n- 我可以查找/插入/改写页面内容（直接落入页面）。\n- 我也可以：LightRAG 检索、跨页面搜索/读取、读取图片 OCR、执行斜杠命令（创建/改名）。\n- 建议先说你的目标（例如：把某段改写更简洁，或在某个标题后新增一段总结）。",
|
||
},
|
||
];
|
||
|
||
type ToolName =
|
||
| "search_web"
|
||
| "rag_lightrag_query"
|
||
| "docs_search"
|
||
| "docs_read"
|
||
| "image_read"
|
||
| "slash_run"
|
||
| "doc_get"
|
||
| "doc_find"
|
||
| "doc_insert_blocks"
|
||
| "doc_replace_range";
|
||
|
||
const TOOL_LABEL: Record<ToolName, string> = {
|
||
search_web: "联网检索（SearxNG）",
|
||
rag_lightrag_query: "LightRAG 检索",
|
||
docs_search: "文档搜索（跨页）",
|
||
docs_read: "文档读取（跨页）",
|
||
image_read: "图片读取（OCR）",
|
||
slash_run: "斜杠命令（写入）",
|
||
doc_get: "读页面（摘要）",
|
||
doc_find: "查找（按块）",
|
||
doc_insert_blocks: "插入块（写入）",
|
||
doc_replace_range: "替换块文本（写入）",
|
||
};
|
||
|
||
const DEFAULT_TOOLS: ToolName[] = [
|
||
"doc_get",
|
||
"doc_find",
|
||
"doc_insert_blocks",
|
||
"doc_replace_range",
|
||
"docs_search",
|
||
"docs_read",
|
||
"image_read",
|
||
"rag_lightrag_query",
|
||
"search_web",
|
||
];
|
||
|
||
type ToolLog =
|
||
| { type: "tool_call"; id: string; tool: string; args: Record<string, unknown> }
|
||
| { type: "tool_result"; id: string; tool: string; ok: boolean; ms: number; result: unknown }
|
||
| { type: "error"; message: string };
|
||
|
||
type ChatSession = {
|
||
id: string;
|
||
title: string;
|
||
createdAt: number;
|
||
updatedAt: number;
|
||
messages: AgentMessage[];
|
||
toolLogs: ToolLog[];
|
||
};
|
||
|
||
type PanelPage = "chat" | "tools" | "history" | "account" | "settings";
|
||
|
||
const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
|
||
|
||
const generateId = () => {
|
||
if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
|
||
return `sess_${Math.random().toString(16).slice(2, 10)}`;
|
||
};
|
||
|
||
const normalizeSessions = (sessions: ChatSession[]) => {
|
||
const maxSessions = 20;
|
||
const maxMessages = 40;
|
||
const maxToolLogs = 80;
|
||
return sessions
|
||
.slice(0, maxSessions)
|
||
.map((s) => ({
|
||
...s,
|
||
messages: Array.isArray(s.messages) ? s.messages.slice(-maxMessages) : [],
|
||
toolLogs: Array.isArray(s.toolLogs) ? s.toolLogs.slice(-maxToolLogs) : [],
|
||
}))
|
||
.sort((a, b) => b.updatedAt - a.updatedAt);
|
||
};
|
||
|
||
const parseSseChunks = async (
|
||
res: Response,
|
||
onEvent: (event: string, dataText: string) => void,
|
||
) => {
|
||
if (!res.body) throw new Error("响应不支持流式读取");
|
||
const reader = res.body.getReader();
|
||
const decoder = new TextDecoder("utf-8");
|
||
|
||
let buffer = "";
|
||
while (true) {
|
||
const { value, done } = await reader.read();
|
||
if (done) break;
|
||
buffer += decoder.decode(value, { stream: true });
|
||
|
||
while (true) {
|
||
const sep = buffer.indexOf("\n\n");
|
||
if (sep === -1) break;
|
||
const raw = buffer.slice(0, sep);
|
||
buffer = buffer.slice(sep + 2);
|
||
|
||
// 注释/心跳：以 ":" 开头
|
||
if (raw.trimStart().startsWith(":")) continue;
|
||
|
||
const lines = raw.split(/\r?\n/);
|
||
let event = "message";
|
||
const dataLines: string[] = [];
|
||
for (const line of lines) {
|
||
if (line.startsWith("event:")) event = line.slice("event:".length).trim() || "message";
|
||
if (line.startsWith("data:")) dataLines.push(line.slice("data:".length).trimStart());
|
||
}
|
||
onEvent(event, dataLines.join("\n"));
|
||
}
|
||
}
|
||
};
|
||
|
||
const safeJsonStringify = (value: unknown) => {
|
||
try {
|
||
return JSON.stringify(value);
|
||
} catch {
|
||
return "";
|
||
}
|
||
};
|
||
|
||
export function DocumentAiAgentPanel({
|
||
documentId,
|
||
getLatestBlocks,
|
||
}: {
|
||
documentId: string;
|
||
getLatestBlocks: () => Json | null;
|
||
}) {
|
||
const editorBridge = useEditorBridgeStore((s) => s.bridge);
|
||
|
||
const open = useAiAgentUiStore((s) => s.documentAgentOpen);
|
||
const setOpen = useAiAgentUiStore((s) => s.setDocumentAgentOpen);
|
||
const setAvailable = useAiAgentUiStore((s) => s.setDocumentAgentAvailable);
|
||
const [messages, setMessages] = useState<AgentMessage[]>(() => DEFAULT_SESSION_MESSAGES);
|
||
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 [maxSteps, setMaxSteps] = useState<number>(10);
|
||
const [aiProvider, setAiProvider] = useState<"online" | "local">("online");
|
||
const [aiModel, setAiModel] = useState<string>("");
|
||
const [page, setPage] = useState<PanelPage>("chat");
|
||
|
||
const [toolLogs, setToolLogs] = useState<ToolLog[]>([]);
|
||
const [sessions, setSessions] = useState<ChatSession[]>([]);
|
||
const [activeSessionId, setActiveSessionId] = useState<string>("");
|
||
|
||
// 兼容旧实现（已改为侧边栏内切换页面，不再弹出居中对话框）
|
||
const [toolsDialogOpen, setToolsDialogOpen] = useState(false);
|
||
const [historyDialogOpen, setHistoryDialogOpen] = useState(false);
|
||
const [accountDialogOpen, setAccountDialogOpen] = useState(false);
|
||
const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
|
||
|
||
const abortRef = useRef<AbortController | null>(null);
|
||
const syncTimerRef = useRef<number | null>(null);
|
||
|
||
useEffect(() => {
|
||
setAvailable(true);
|
||
return () => {
|
||
setAvailable(false);
|
||
setOpen(false);
|
||
};
|
||
}, [setAvailable, setOpen]);
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const stepsRaw = window.localStorage.getItem("doc_ai_max_steps") || "";
|
||
const p = (window.localStorage.getItem("doc_ai_provider") || "").trim();
|
||
const m = window.localStorage.getItem("doc_ai_model") || "";
|
||
const parsed = Number(stepsRaw);
|
||
if (Number.isFinite(parsed) && parsed >= 1) {
|
||
setMaxSteps(Math.max(1, Math.min(24, Math.floor(parsed))));
|
||
}
|
||
if (p === "local" || p === "online") setAiProvider(p);
|
||
if (typeof m === "string") setAiModel(m);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
try {
|
||
window.localStorage.setItem("doc_ai_max_steps", String(maxSteps));
|
||
window.localStorage.setItem("doc_ai_provider", aiProvider);
|
||
window.localStorage.setItem("doc_ai_model", aiModel);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, [aiModel, aiProvider, maxSteps]);
|
||
|
||
useEffect(() => {
|
||
// 关闭面板时，回到对话页，避免下次打开还停留在设置/历史等子页
|
||
if (!open) setPage("chat");
|
||
}, [open]);
|
||
|
||
// 会话/历史：按 documentId 隔离持久化
|
||
useEffect(() => {
|
||
try {
|
||
const key = `doc_ai_sessions:${documentId}`;
|
||
const raw = window.localStorage.getItem(key);
|
||
if (!raw) {
|
||
const id = generateId();
|
||
const now = Date.now();
|
||
const session: ChatSession = {
|
||
id,
|
||
title: "新会话",
|
||
createdAt: now,
|
||
updatedAt: now,
|
||
messages: DEFAULT_SESSION_MESSAGES,
|
||
toolLogs: [],
|
||
};
|
||
setSessions([session]);
|
||
setActiveSessionId(id);
|
||
setMessages(session.messages);
|
||
setToolLogs([]);
|
||
return;
|
||
}
|
||
|
||
const parsed = JSON.parse(raw) as unknown;
|
||
const list = typeof parsed === "object" && parsed && "sessions" in parsed ? (parsed as any).sessions : null;
|
||
const active = typeof parsed === "object" && parsed && "activeSessionId" in parsed ? String((parsed as any).activeSessionId ?? "") : "";
|
||
if (!Array.isArray(list) || list.length === 0) return;
|
||
|
||
const loaded = normalizeSessions(
|
||
list
|
||
.map((x) => {
|
||
const id = String((x as any)?.id ?? "").trim() || generateId();
|
||
const createdAt = Number((x as any)?.createdAt ?? Date.now());
|
||
const updatedAt = Number((x as any)?.updatedAt ?? createdAt);
|
||
const title = String((x as any)?.title ?? "").trim() || "历史会话";
|
||
const messages = Array.isArray((x as any)?.messages) ? (x as any).messages : DEFAULT_SESSION_MESSAGES;
|
||
const toolLogs = Array.isArray((x as any)?.toolLogs) ? (x as any).toolLogs : [];
|
||
return { id, title, createdAt, updatedAt, messages, toolLogs } as ChatSession;
|
||
})
|
||
.filter((s) => s.id),
|
||
);
|
||
setSessions(loaded);
|
||
const picked = active && loaded.some((s) => s.id === active) ? active : loaded[0]!.id;
|
||
setActiveSessionId(picked);
|
||
const cur = loaded.find((s) => s.id === picked) ?? loaded[0]!;
|
||
setMessages(cur.messages?.length ? cur.messages : DEFAULT_SESSION_MESSAGES);
|
||
setToolLogs(cur.toolLogs ?? []);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
// 只在 documentId 变化时读取一次
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [documentId]);
|
||
|
||
useEffect(() => {
|
||
if (!activeSessionId) return;
|
||
if (syncTimerRef.current) window.clearTimeout(syncTimerRef.current);
|
||
syncTimerRef.current = window.setTimeout(() => {
|
||
setSessions((prev) => {
|
||
const now = Date.now();
|
||
const next = prev.some((s) => s.id === activeSessionId)
|
||
? prev.map((s) =>
|
||
s.id === activeSessionId ? { ...s, messages, toolLogs, updatedAt: now } : s,
|
||
)
|
||
: [
|
||
{
|
||
id: activeSessionId,
|
||
title: "新会话",
|
||
createdAt: now,
|
||
updatedAt: now,
|
||
messages,
|
||
toolLogs,
|
||
},
|
||
...prev,
|
||
];
|
||
return normalizeSessions(next);
|
||
});
|
||
}, 200);
|
||
return () => {
|
||
if (syncTimerRef.current) window.clearTimeout(syncTimerRef.current);
|
||
};
|
||
}, [activeSessionId, messages, toolLogs]);
|
||
|
||
useEffect(() => {
|
||
if (!documentId) return;
|
||
try {
|
||
const key = `doc_ai_sessions:${documentId}`;
|
||
const payload = JSON.stringify({ activeSessionId, sessions: normalizeSessions(sessions) });
|
||
if (payload.length <= 900_000) window.localStorage.setItem(key, payload);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, [activeSessionId, documentId, sessions]);
|
||
|
||
const currentSession = useMemo(() => sessions.find((s) => s.id === activeSessionId) ?? null, [activeSessionId, sessions]);
|
||
const currentSessionTitle = currentSession?.title || "新会话";
|
||
|
||
const pageTitle = useMemo(() => {
|
||
switch (page) {
|
||
case "tools":
|
||
return "工具（代替 MCP）";
|
||
case "history":
|
||
return "历史会话";
|
||
case "account":
|
||
return "账户 / 模型";
|
||
case "settings":
|
||
return "设置";
|
||
default:
|
||
return "页面 AI Agent";
|
||
}
|
||
}, [page]);
|
||
|
||
const startNewSession = () => {
|
||
if (loading) return;
|
||
const id = generateId();
|
||
const now = Date.now();
|
||
const next: ChatSession = {
|
||
id,
|
||
title: "新会话",
|
||
createdAt: now,
|
||
updatedAt: now,
|
||
messages: DEFAULT_SESSION_MESSAGES,
|
||
toolLogs: [],
|
||
};
|
||
setSessions((prev) => normalizeSessions([next, ...prev]));
|
||
setActiveSessionId(id);
|
||
setMessages(next.messages);
|
||
setToolLogs([]);
|
||
setInput("");
|
||
};
|
||
|
||
const clearHistory = () => {
|
||
if (loading) return;
|
||
const base: ChatSession =
|
||
currentSession ??
|
||
({
|
||
id: activeSessionId || generateId(),
|
||
title: "当前会话",
|
||
createdAt: Date.now(),
|
||
updatedAt: Date.now(),
|
||
messages,
|
||
toolLogs,
|
||
} as ChatSession);
|
||
setSessions([
|
||
{
|
||
...base,
|
||
title: base.title || "当前会话",
|
||
updatedAt: Date.now(),
|
||
messages,
|
||
toolLogs,
|
||
},
|
||
]);
|
||
setActiveSessionId(base.id);
|
||
};
|
||
|
||
const switchSession = (id: string) => {
|
||
if (loading) return;
|
||
const target = sessions.find((s) => s.id === id);
|
||
if (!target) return;
|
||
setActiveSessionId(target.id);
|
||
setMessages(target.messages?.length ? target.messages : DEFAULT_SESSION_MESSAGES);
|
||
setToolLogs(target.toolLogs ?? []);
|
||
setInput("");
|
||
};
|
||
|
||
const resetCurrentSession = () => {
|
||
if (loading) return;
|
||
setMessages(DEFAULT_SESSION_MESSAGES);
|
||
setToolLogs([]);
|
||
setInput("");
|
||
if (activeSessionId) {
|
||
setSessions((prev) =>
|
||
normalizeSessions(
|
||
prev.map((s) =>
|
||
s.id === activeSessionId ? { ...s, messages: DEFAULT_SESSION_MESSAGES, toolLogs: [], updatedAt: Date.now(), title: s.title || "当前会话" } : s,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
};
|
||
|
||
const deleteSession = (id: string) => {
|
||
if (loading) return;
|
||
setSessions((prev) => {
|
||
const next = prev.filter((s) => s.id !== id);
|
||
return normalizeSessions(next);
|
||
});
|
||
if (id === activeSessionId) {
|
||
const fallback = sessions.filter((s) => s.id !== id)[0];
|
||
if (fallback) {
|
||
setActiveSessionId(fallback.id);
|
||
setMessages(fallback.messages?.length ? fallback.messages : DEFAULT_SESSION_MESSAGES);
|
||
setToolLogs(fallback.toolLogs ?? []);
|
||
} else {
|
||
startNewSession();
|
||
}
|
||
}
|
||
};
|
||
|
||
const canSend = useMemo(() => input.trim().length > 0 && !loading, [input, loading]);
|
||
|
||
const stop = () => {
|
||
abortRef.current?.abort();
|
||
abortRef.current = null;
|
||
setLoading(false);
|
||
};
|
||
|
||
const send = async () => {
|
||
const content = input.trim();
|
||
if (!content) return;
|
||
setToolLogs([]);
|
||
if (activeSessionId && currentSessionTitle === "新会话") {
|
||
const title = content.length > 18 ? `${content.slice(0, 18)}…` : content;
|
||
setSessions((prev) =>
|
||
normalizeSessions(
|
||
prev.map((s) => (s.id === activeSessionId ? { ...s, title, updatedAt: Date.now() } : s)),
|
||
),
|
||
);
|
||
}
|
||
|
||
const nextMessages: AgentMessage[] = [...messages, { role: "user", content }];
|
||
setMessages(nextMessages);
|
||
setInput("");
|
||
setLoading(true);
|
||
|
||
abortRef.current?.abort();
|
||
const controller = new AbortController();
|
||
abortRef.current = controller;
|
||
|
||
// 不把面板的“欢迎语”当作对话历史发送给服务端，避免影响任务执行
|
||
const payloadMessages = nextMessages.filter(
|
||
(m, idx) => !(idx === 0 && m.role === "assistant" && /页面 AI Agent/.test(m.content)),
|
||
);
|
||
|
||
const blocks = getLatestBlocks();
|
||
const blocksJson = blocks ? safeJsonStringify(blocks) : "";
|
||
const shouldSendBlocks = blocksJson && blocksJson.length <= 500_000;
|
||
|
||
try {
|
||
const res = await fetch("/api/ai-agent/run", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
signal: controller.signal,
|
||
body: JSON.stringify({
|
||
stream: true,
|
||
maxSteps,
|
||
scope: "document",
|
||
messages: payloadMessages.slice(-24),
|
||
toolChoice: toolAuto
|
||
? {
|
||
mode: "auto",
|
||
toolSets: [
|
||
"toolset.readonly",
|
||
"toolset.rag_read",
|
||
"toolset.docs_read",
|
||
"toolset.media_read",
|
||
"toolset.doc_read",
|
||
"toolset.doc_write",
|
||
"toolset.slash_write",
|
||
],
|
||
}
|
||
: { mode: "manual", tools: selectedTools },
|
||
context: { documentId, documentBlocks: shouldSendBlocks ? blocks : null },
|
||
options: { searxng: networkOn, ai: { provider: aiProvider, model: aiModel.trim() || undefined } },
|
||
}),
|
||
});
|
||
if (!res.ok) {
|
||
const j = (await res.json().catch(() => null)) as unknown;
|
||
const err = typeof j === "object" && j && "error" in j ? String((j as Record<string, unknown>).error ?? "") : "";
|
||
throw new Error(err || `请求失败：${res.status}`);
|
||
}
|
||
|
||
await parseSseChunks(res, (event, dataText) => {
|
||
if (event === "tool_call") {
|
||
try {
|
||
const data = JSON.parse(dataText || "null") as unknown;
|
||
const obj = (typeof data === "object" && data ? (data as Record<string, unknown>) : {}) as Record<string, unknown>;
|
||
setToolLogs((prev) => [
|
||
...prev,
|
||
{
|
||
type: "tool_call",
|
||
id: String(obj.id ?? ""),
|
||
tool: String(obj.tool ?? ""),
|
||
args: (typeof obj.args === "object" && obj.args ? (obj.args as Record<string, unknown>) : {}) as Record<
|
||
string,
|
||
unknown
|
||
>,
|
||
},
|
||
]);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (event === "tool_result") {
|
||
try {
|
||
const data = JSON.parse(dataText || "null") as unknown;
|
||
const obj = (typeof data === "object" && data ? (data as Record<string, unknown>) : {}) as Record<string, unknown>;
|
||
const tool = String(obj.tool ?? "");
|
||
const result = "result" in obj ? obj.result : null;
|
||
setToolLogs((prev) => [
|
||
...prev,
|
||
{ type: "tool_result", id: String(obj.id ?? ""), tool, ok: Boolean(obj.ok), ms: Number(obj.ms ?? 0), result },
|
||
]);
|
||
|
||
// doc 写工具返回 data=blocks 时，立即落入编辑器
|
||
if ((tool === "doc_insert_blocks" || tool === "doc_replace_range") && obj.ok) {
|
||
const r = result as unknown;
|
||
const dataNode =
|
||
typeof r === "object" && r && "data" in (r as Record<string, unknown>) ? (r as Record<string, unknown>).data : null;
|
||
if (dataNode && editorBridge?.replaceWithSnapshot) {
|
||
try {
|
||
editorBridge.replaceWithSnapshot(dataNode as Json);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (event === "assistant_message") {
|
||
try {
|
||
const data = JSON.parse(dataText || "null") as unknown;
|
||
const assistantText =
|
||
typeof data === "object" && data && "text" in data ? String((data as Record<string, unknown>).text ?? "") : "";
|
||
setMessages((prev) => [...prev, { role: "assistant", content: assistantText.trim() ? assistantText.trim() : "（无输出）" }]);
|
||
} catch {
|
||
setMessages((prev) => [...prev, { role: "assistant", content: "（无输出）" }]);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (event === "error") {
|
||
try {
|
||
const data = JSON.parse(dataText || "null") as unknown;
|
||
const message =
|
||
typeof data === "object" && data && "message" in data ? String((data as Record<string, unknown>).message ?? "") : "";
|
||
setToolLogs((prev) => [...prev, { type: "error", message: message || "未知错误" }]);
|
||
} catch {
|
||
setToolLogs((prev) => [...prev, { type: "error", message: "未知错误" }]);
|
||
}
|
||
return;
|
||
}
|
||
});
|
||
} catch (e) {
|
||
const msg = e instanceof Error ? e.message : String(e);
|
||
setToolLogs((prev) => [...prev, { type: "error", message: msg }]);
|
||
} finally {
|
||
abortRef.current = null;
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Sheet open={open} onOpenChange={setOpen}>
|
||
<SheetContent side="right" className="p-0">
|
||
<SheetHeader className="border-b">
|
||
<SheetTitle className="flex items-center justify-between gap-2">
|
||
<span className="flex items-center gap-2">
|
||
{page === "chat" ? (
|
||
<Sparkles className="h-4 w-4" />
|
||
) : (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setPage("chat")}
|
||
disabled={loading}
|
||
title="返回对话"
|
||
>
|
||
<ChevronLeft className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
{pageTitle}
|
||
</span>
|
||
<div className="flex items-center gap-1">
|
||
<Button variant="ghost" size="icon" onClick={startNewSession} disabled={loading} title="新建会话">
|
||
<Plus className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setPage("tools")}
|
||
disabled={loading}
|
||
title="工具（代替 MCP）"
|
||
>
|
||
<Wrench className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setPage("history")}
|
||
disabled={loading}
|
||
title="历史"
|
||
>
|
||
<History className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setPage("account")}
|
||
disabled={loading}
|
||
title="账户/模型"
|
||
>
|
||
<User className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setPage("settings")}
|
||
disabled={loading}
|
||
title="设置"
|
||
>
|
||
<Settings className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" onClick={() => setOpen(false)} title="关闭">
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</SheetTitle>
|
||
</SheetHeader>
|
||
|
||
<div className="flex flex-1 flex-col overflow-hidden">
|
||
<div className={page === "chat" ? "" : "hidden"}>
|
||
<div className="hidden">
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${networkOn ? "bg-white" : "bg-muted"}`}
|
||
onClick={() => setNetworkOn((v) => !v)}
|
||
disabled={loading}
|
||
title="联网检索"
|
||
>
|
||
<Network className="h-3.5 w-3.5" />
|
||
{networkOn ? "联网" : "离线"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${toolAuto ? "bg-white" : "bg-muted"}`}
|
||
onClick={() => setToolAuto((v) => !v)}
|
||
disabled={loading}
|
||
title="工具自动/手动"
|
||
>
|
||
<Settings2 className="h-3.5 w-3.5" />
|
||
{toolAuto ? "自动工具" : "手动工具"}
|
||
</button>
|
||
{!toolAuto && (
|
||
<button
|
||
type="button"
|
||
className="inline-flex items-center gap-1 rounded border bg-white px-2 py-1"
|
||
onClick={() => setToolPickerOpen((v) => !v)}
|
||
disabled={loading}
|
||
>
|
||
<Settings2 className="h-3.5 w-3.5" />
|
||
选择工具
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<label className="flex items-center gap-2">
|
||
步数
|
||
<input
|
||
className="w-[72px] rounded border px-2 py-1 text-xs"
|
||
type="number"
|
||
min={1}
|
||
max={24}
|
||
step={1}
|
||
value={maxSteps}
|
||
onChange={(e) => {
|
||
const v = Number(e.target.value);
|
||
if (!Number.isFinite(v)) return;
|
||
setMaxSteps(Math.max(1, Math.min(24, Math.floor(v))));
|
||
}}
|
||
disabled={loading}
|
||
/>
|
||
</label>
|
||
|
||
<select
|
||
className="h-8 rounded border bg-white px-2 text-xs"
|
||
value={aiProvider}
|
||
onChange={(e) => setAiProvider(e.target.value === "local" ? "local" : "online")}
|
||
disabled={loading}
|
||
>
|
||
<option value="online">在线</option>
|
||
<option value="local">本地</option>
|
||
</select>
|
||
<input
|
||
className="h-8 w-[180px] rounded border px-2 text-xs"
|
||
value={aiModel}
|
||
onChange={(e) => setAiModel(e.target.value)}
|
||
placeholder="model（可选）"
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{false && (
|
||
<div className="border-b p-3 text-sm">
|
||
<div className="mb-2 text-xs text-muted-foreground">允许使用的工具</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{(Object.keys(TOOL_LABEL) as ToolName[]).map((t) => {
|
||
const on = selectedTools.includes(t);
|
||
return (
|
||
<button
|
||
key={t}
|
||
type="button"
|
||
className={`rounded border px-2 py-1 text-xs ${on ? "bg-[#111827] text-white" : "bg-white"}`}
|
||
onClick={() =>
|
||
setSelectedTools((prev) =>
|
||
prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t],
|
||
)
|
||
}
|
||
disabled={loading}
|
||
>
|
||
{TOOL_LABEL[t]}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex min-h-0 flex-1 flex-col">
|
||
<div className="grid min-h-0 flex-1 grid-cols-1 gap-0">
|
||
<div className="min-h-0 border-b">
|
||
<div className="px-3 py-2 text-sm font-medium">对话</div>
|
||
<ScrollArea className="h-[38vh] border-t">
|
||
<div className="space-y-3 p-3 text-sm">
|
||
{messages.map((m, idx) => (
|
||
<div key={idx} className="space-y-1">
|
||
<div className="text-xs text-muted-foreground">{m.role === "user" ? "用户" : "AI"}</div>
|
||
<div className="whitespace-pre-wrap">{m.content}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</ScrollArea>
|
||
</div>
|
||
|
||
<div className="min-h-0">
|
||
<div className="px-3 py-2 text-sm font-medium">工具日志</div>
|
||
<ScrollArea className="h-[30vh] border-t">
|
||
<div className="space-y-3 p-3 text-sm">
|
||
{toolLogs.length === 0 ? <div className="text-muted-foreground">暂无工具日志</div> : null}
|
||
{toolLogs.map((l, idx) => {
|
||
if (l.type === "error") {
|
||
return (
|
||
<div key={idx} className="rounded border border-red-200 bg-red-50 p-2 text-red-700">
|
||
错误：{l.message}
|
||
</div>
|
||
);
|
||
}
|
||
if (l.type === "tool_call") {
|
||
return (
|
||
<details key={idx} className="rounded border p-2">
|
||
<summary className="cursor-pointer select-none text-xs text-muted-foreground">
|
||
tool_call · {l.tool} · {l.id}
|
||
</summary>
|
||
<pre className="mt-2 whitespace-pre-wrap text-xs">{JSON.stringify(l.args, null, 2)}</pre>
|
||
</details>
|
||
);
|
||
}
|
||
return (
|
||
<details key={idx} className="rounded border p-2">
|
||
<summary className="cursor-pointer select-none text-xs text-muted-foreground">
|
||
tool_result · {l.tool} · {l.id} · {l.ok ? "ok" : "fail"} · {l.ms}ms
|
||
</summary>
|
||
<pre className="mt-2 whitespace-pre-wrap text-xs">{JSON.stringify(l.result, null, 2)}</pre>
|
||
</details>
|
||
);
|
||
})}
|
||
</div>
|
||
</ScrollArea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t p-3">
|
||
<div className="flex gap-2">
|
||
<Textarea
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
placeholder="输入你的需求（Enter 发送，Shift+Enter 换行）"
|
||
className="min-h-[72px] flex-1"
|
||
disabled={loading}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" && !e.shiftKey) {
|
||
e.preventDefault();
|
||
if (canSend) void send();
|
||
}
|
||
}}
|
||
/>
|
||
<div className="flex flex-col gap-2">
|
||
<Button disabled={!canSend} onClick={() => void send()}>
|
||
<Send className="mr-2 h-4 w-4" />
|
||
发送
|
||
</Button>
|
||
<Button variant="secondary" disabled={!loading} onClick={stop}>
|
||
<X className="mr-2 h-4 w-4" />
|
||
停止
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{!editorBridge ? (
|
||
<div className="mt-2 text-xs text-muted-foreground">
|
||
提示：编辑器尚未准备好，写入工具可能无法立即落入页面（稍等或刷新）。
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={page === "chat" ? "hidden" : "min-h-0 flex-1 overflow-hidden"}>
|
||
{page === "tools" ? (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-3 p-3 text-sm">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${toolAuto ? "bg-white" : "bg-muted"}`}
|
||
onClick={() => setToolAuto((v) => !v)}
|
||
disabled={loading}
|
||
title="工具自动/手动"
|
||
>
|
||
<Settings2 className="h-3.5 w-3.5" />
|
||
{toolAuto ? "自动工具" : "手动工具"}
|
||
</button>
|
||
</div>
|
||
|
||
{!toolAuto ? (
|
||
<div>
|
||
<div className="mb-2 text-xs text-muted-foreground">允许使用的工具（手动模式）</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{(Object.keys(TOOL_LABEL) as ToolName[]).map((t) => {
|
||
const on = selectedTools.includes(t);
|
||
return (
|
||
<button
|
||
key={t}
|
||
type="button"
|
||
className={`rounded border px-2 py-1 text-xs ${on ? "bg-[#111827] text-white" : "bg-white"}`}
|
||
onClick={() =>
|
||
setSelectedTools((prev) =>
|
||
prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t],
|
||
)
|
||
}
|
||
disabled={loading}
|
||
>
|
||
{TOOL_LABEL[t]}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-xs text-muted-foreground">
|
||
自动模式下：AI 会在允许的 ToolSet 范围内自行选择工具。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</ScrollArea>
|
||
) : null}
|
||
|
||
{page === "history" ? (
|
||
<ScrollArea className="h-full">
|
||
<div className="p-3 text-sm">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<div className="text-xs text-muted-foreground">最多保留 20 个会话</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Button variant="outline" onClick={resetCurrentSession} disabled={loading}>
|
||
清空当前
|
||
</Button>
|
||
<Button variant="outline" onClick={startNewSession} disabled={loading}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
新建会话
|
||
</Button>
|
||
<Button variant="destructive" onClick={clearHistory} disabled={loading}>
|
||
清空历史
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 space-y-2">
|
||
{sessions.map((s) => {
|
||
const active = s.id === activeSessionId;
|
||
const time = new Date(s.updatedAt || s.createdAt).toLocaleString();
|
||
return (
|
||
<div
|
||
key={s.id}
|
||
className={`flex items-center gap-2 rounded border px-3 py-2 ${active ? "border-[#111827]" : "border-border"}`}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="min-w-0 flex-1 text-left"
|
||
onClick={() => {
|
||
switchSession(s.id);
|
||
setPage("chat");
|
||
}}
|
||
disabled={loading}
|
||
title={active ? "当前会话" : "切换到该会话"}
|
||
>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="truncate font-medium">{s.title || "未命名"}</div>
|
||
<div className="shrink-0 text-xs text-muted-foreground">{time}</div>
|
||
</div>
|
||
<div className="mt-1 text-xs text-muted-foreground">消息 {s.messages.length} · 日志 {s.toolLogs.length}</div>
|
||
</button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => deleteSession(s.id)}
|
||
disabled={loading || active}
|
||
title={active ? "不能删除当前会话" : "删除会话"}
|
||
>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</ScrollArea>
|
||
) : null}
|
||
|
||
{page === "account" ? (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-3 p-3 text-sm">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<label className="text-xs text-muted-foreground">推理来源</label>
|
||
<select
|
||
className="h-9 rounded border bg-white px-2 text-sm"
|
||
value={aiProvider}
|
||
onChange={(e) => setAiProvider(e.target.value === "local" ? "local" : "online")}
|
||
disabled={loading}
|
||
>
|
||
<option value="online">在线</option>
|
||
<option value="local">本地</option>
|
||
</select>
|
||
<label className="ml-2 text-xs text-muted-foreground">模型（可选）</label>
|
||
<input
|
||
className="h-9 w-[260px] rounded border px-2 text-sm"
|
||
value={aiModel}
|
||
onChange={(e) => setAiModel(e.target.value)}
|
||
placeholder="例如 gemini-2.5-pro"
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">
|
||
说明：在线/本地的 BaseURL 与 Key 仍由配置文件/环境变量控制；这里仅做 provider 与 model 覆盖。
|
||
</div>
|
||
</div>
|
||
</ScrollArea>
|
||
) : null}
|
||
|
||
{page === "settings" ? (
|
||
<ScrollArea className="h-full">
|
||
<div className="space-y-3 p-3 text-sm">
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${networkOn ? "bg-white" : "bg-muted"}`}
|
||
onClick={() => setNetworkOn((v) => !v)}
|
||
disabled={loading}
|
||
title="联网检索"
|
||
>
|
||
<Network className="h-3.5 w-3.5" />
|
||
{networkOn ? "联网" : "离线"}
|
||
</button>
|
||
|
||
<label className="flex items-center gap-2">
|
||
步数
|
||
<input
|
||
className="w-[92px] rounded border px-2 py-1 text-sm"
|
||
type="number"
|
||
min={1}
|
||
max={24}
|
||
step={1}
|
||
value={maxSteps}
|
||
onChange={(e) => {
|
||
const v = Number(e.target.value);
|
||
if (!Number.isFinite(v)) return;
|
||
setMaxSteps(clamp(Math.floor(v), 1, 24));
|
||
}}
|
||
disabled={loading}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">说明：步数越大越“能做事”，但会更慢且更消耗推理额度。</div>
|
||
</div>
|
||
</ScrollArea>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 工具（代替 MCP） */}
|
||
<Dialog open={toolsDialogOpen} onOpenChange={setToolsDialogOpen}>
|
||
<DialogContent showCloseButton={false} className="max-w-[720px]">
|
||
<DialogHeader>
|
||
<DialogTitle>工具（代替 MCP）</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-3 text-sm">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${toolAuto ? "bg-white" : "bg-muted"}`}
|
||
onClick={() => setToolAuto((v) => !v)}
|
||
disabled={loading}
|
||
title="工具自动/手动"
|
||
>
|
||
<Settings2 className="h-3.5 w-3.5" />
|
||
{toolAuto ? "自动工具" : "手动工具"}
|
||
</button>
|
||
</div>
|
||
|
||
{!toolAuto ? (
|
||
<div>
|
||
<div className="mb-2 text-xs text-muted-foreground">允许使用的工具（手动模式）</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{(Object.keys(TOOL_LABEL) as ToolName[]).map((t) => {
|
||
const on = selectedTools.includes(t);
|
||
return (
|
||
<button
|
||
key={t}
|
||
type="button"
|
||
className={`rounded border px-2 py-1 text-xs ${on ? "bg-[#111827] text-white" : "bg-white"}`}
|
||
onClick={() =>
|
||
setSelectedTools((prev) =>
|
||
prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t],
|
||
)
|
||
}
|
||
disabled={loading}
|
||
>
|
||
{TOOL_LABEL[t]}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-xs text-muted-foreground">
|
||
自动模式下：AI 会在允许的 ToolSet 范围内自行选择工具。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 历史 */}
|
||
<Dialog open={historyDialogOpen} onOpenChange={setHistoryDialogOpen}>
|
||
<DialogContent showCloseButton={false} className="max-w-[720px]">
|
||
<DialogHeader>
|
||
<DialogTitle>历史会话</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<div className="text-xs text-muted-foreground">最多保留 20 个会话</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Button variant="outline" onClick={resetCurrentSession} disabled={loading}>
|
||
清空当前
|
||
</Button>
|
||
<Button variant="outline" onClick={startNewSession} disabled={loading}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
新建会话
|
||
</Button>
|
||
<Button variant="destructive" onClick={clearHistory} disabled={loading}>
|
||
清空历史
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 space-y-2">
|
||
{sessions.map((s) => {
|
||
const active = s.id === activeSessionId;
|
||
const time = new Date(s.updatedAt || s.createdAt).toLocaleString();
|
||
return (
|
||
<div key={s.id} className={`flex items-center gap-2 rounded border px-3 py-2 ${active ? "border-[#111827]" : "border-border"}`}>
|
||
<button
|
||
type="button"
|
||
className="min-w-0 flex-1 text-left"
|
||
onClick={() => {
|
||
switchSession(s.id);
|
||
setHistoryDialogOpen(false);
|
||
}}
|
||
disabled={loading}
|
||
title={active ? "当前会话" : "切换到该会话"}
|
||
>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="truncate font-medium">{s.title || "未命名"}</div>
|
||
<div className="shrink-0 text-xs text-muted-foreground">{time}</div>
|
||
</div>
|
||
<div className="mt-1 text-xs text-muted-foreground">
|
||
消息 {s.messages.length} · 日志 {s.toolLogs.length}
|
||
</div>
|
||
</button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => deleteSession(s.id)}
|
||
disabled={loading || active}
|
||
title={active ? "不能删除当前会话" : "删除会话"}
|
||
>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 账户/模型 */}
|
||
<Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
|
||
<DialogContent showCloseButton={false} className="max-w-[720px]">
|
||
<DialogHeader>
|
||
<DialogTitle>账户 / 模型</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-3 text-sm">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<label className="text-xs text-muted-foreground">推理来源</label>
|
||
<select
|
||
className="h-9 rounded border bg-white px-2 text-sm"
|
||
value={aiProvider}
|
||
onChange={(e) => setAiProvider(e.target.value === "local" ? "local" : "online")}
|
||
disabled={loading}
|
||
>
|
||
<option value="online">在线</option>
|
||
<option value="local">本地</option>
|
||
</select>
|
||
<label className="ml-2 text-xs text-muted-foreground">模型（可选）</label>
|
||
<input
|
||
className="h-9 w-[260px] rounded border px-2 text-sm"
|
||
value={aiModel}
|
||
onChange={(e) => setAiModel(e.target.value)}
|
||
placeholder="例如 gemini-2.5-pro"
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">
|
||
说明：在线/本地的 BaseURL 与 Key 仍由配置文件/环境变量控制；这里仅做 provider 与 model 覆盖。
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 设置 */}
|
||
<Dialog open={settingsDialogOpen} onOpenChange={setSettingsDialogOpen}>
|
||
<DialogContent showCloseButton={false} className="max-w-[720px]">
|
||
<DialogHeader>
|
||
<DialogTitle>设置</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-3 text-sm">
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<button
|
||
type="button"
|
||
className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${networkOn ? "bg-white" : "bg-muted"}`}
|
||
onClick={() => setNetworkOn((v) => !v)}
|
||
disabled={loading}
|
||
title="联网检索"
|
||
>
|
||
<Network className="h-3.5 w-3.5" />
|
||
{networkOn ? "联网" : "离线"}
|
||
</button>
|
||
|
||
<label className="flex items-center gap-2">
|
||
步数
|
||
<input
|
||
className="w-[92px] rounded border px-2 py-1 text-sm"
|
||
type="number"
|
||
min={1}
|
||
max={24}
|
||
step={1}
|
||
value={maxSteps}
|
||
onChange={(e) => {
|
||
const v = Number(e.target.value);
|
||
if (!Number.isFinite(v)) return;
|
||
setMaxSteps(clamp(Math.floor(v), 1, 24));
|
||
}}
|
||
disabled={loading}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">说明：步数越大越“能做事”，但会更慢且更消耗推理额度。</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</SheetContent>
|
||
</Sheet>
|
||
);
|
||
}
|