/* Chat / Sessions — 真实接 /api/sessions + /chat SSE。 */ function Chat() { const [sessions, setSessions] = React.useState([]); const [activeId, setActiveId] = React.useState(null); const [messages, setMessages] = React.useState([]); const [filter, setFilter] = React.useState("all"); const [composer, setComposer] = React.useState(""); const [streaming, setStreaming] = React.useState(false); const [streamText, setStreamText] = React.useState(""); // 待审批 + 已结案的工具授权卡片（替代原 window.confirm） const [pendingApprovals, setPendingApprovals] = React.useState([]); const [resolvedApprovals, setResolvedApprovals] = React.useState([]); const streamCtrl = React.useRef(null); // 拉会话列表（5s 轮询） React.useEffect(() => { let alive = true; const fetchList = async () => { const r = await API.get("/api/sessions?limit=50"); if (alive && !r.error) { const list = r.sessions || []; setSessions(list); if (!activeId && list.length > 0) setActiveId(list[0].id); } }; fetchList(); const id = setInterval(fetchList, 5000); return () => { alive = false; clearInterval(id); }; }, [activeId]); // 拉某个会话的历史消息 React.useEffect(() => { if (!activeId) { setMessages([]); setPendingApprovals([]); setResolvedApprovals([]); return; } setPendingApprovals([]); setResolvedApprovals([]); let alive = true; (async () => { const r = await API.get(`/api/sessions/${encodeURIComponent(activeId)}/messages`); if (alive && !r.error) setMessages(r.messages || []); })(); return () => { alive = false; }; }, [activeId]); const filtered = sessions.filter(s => filter === "all" || (filter === "repl" && s.channel === "repl") || (filter === "web" && s.channel === "web") || (filter === "wechat" && s.channel === "wechat") ); const active = sessions.find(s => s.id === activeId); // 把待审批的工具调用以聊天卡片形式插入会话流，不再弹浏览器原生 confirm。 const askToolApproval = (approval) => { setPendingApprovals(list => list.some(a => a.id === approval.id) ? list : [...list, approval]); }; const resolveApproval = async (approval, decision, scope) => { setPendingApprovals(list => list.filter(a => a.id !== approval.id)); setResolvedApprovals(list => [...list, { approval, decision, scope, at: Date.now() }]); const r = await API.respondToolApproval(approval.id, decision, scope); if (r.error) { setMessages(m => [...m, { role: "assistant", content: `[工具审批提交失败] ${r.error}` }]); } }; const send = () => { const text = composer.trim(); if (!text || streaming) return; const sessionForSend = activeId && (!active || active.channel === "web") ? activeId : null; setMessages(m => [...m, { role: "user", content: text }]); setComposer(""); setStreaming(true); setStreamText(""); let buf = ""; streamCtrl.current = API.chatStream({ q: text, sessionId: sessionForSend, onSession: (sid) => { if (!sid) return; setActiveId(sid); setSessions(list => list.some(s => s.id === sid) ? list : [{ id: sid, channel: "web", calls: 0, input_tokens: 0, output_tokens: 0, cost_cny: 0, last_active_at: Date.now(), last_message: text }, ...list]); }, onApproval: askToolApproval, onDelta: (chunk) => { buf += chunk; setStreamText(buf); }, onDone: () => { if (buf) setMessages(m => [...m, { role: "assistant", content: buf }]); setStreamText(""); setStreaming(false); streamCtrl.current = null; // 触发会话列表刷新 API.get("/api/sessions?limit=50").then(r => { if (!r.error) setSessions(r.sessions || []); }); }, onError: (msg) => { setMessages(m => [...m, { role: "assistant", content: `[错误] ${msg}` }]); setStreamText(""); setStreaming(false); setPendingApprovals([]); streamCtrl.current = null; }, }); }; const stop = () => { if (streamCtrl.current) streamCtrl.current.abort(); streamCtrl.current = null; setStreaming(false); if (streamText) setMessages(m => [...m, { role: "assistant", content: streamText + " …[已中止]" }]); setStreamText(""); setPendingApprovals([]); }; const newSession = async () => { const r = await API.post("/api/sessions/new", { channel: "web" }); if (r.error) { alert("新建失败：" + r.error); return; } setActiveId(r.session_id); setMessages([]); setSessions(list => list.some(s => s.id === r.session_id) ? list : [{ id: r.session_id, channel: r.channel || "web", calls: 0, input_tokens: 0, output_tokens: 0, cost_cny: 0, last_active_at: Date.now(), last_message: "" }, ...list]); // 刷新列表；新建会话未发生调用前可能还未落 DB，保留本地占位 const lst = await API.get("/api/sessions?limit=50"); if (!lst.error && (lst.sessions || []).length) setSessions(lst.sessions || []); }; const deleteSession = async (sessionId) => { if (streaming && sessionId === activeId) { alert("当前会话正在生成，先停止再删除。"); return; } const item = sessions.find(s => s.id === sessionId); const name = (item && item.last_message) ? `“${item.last_message.slice(0, 28)}${item.last_message.length > 28 ? "..." : ""}”` : sessionId.slice(0, 16); if (!window.confirm(`删除历史会话 ${name}？\n本地消息、工具调用和会话统计都会移除。`)) return; const r = await API.del(`/api/sessions/${encodeURIComponent(sessionId)}`); if (r.error) { alert("删除失败：" + r.error); return; } const next = sessions.filter(s => s.id !== sessionId); setSessions(next); if (activeId === sessionId) { setMessages([]); setActiveId(next[0]?.id || null); } const fresh = await API.get("/api/sessions?limit=50"); if (!fresh.error) { const list = fresh.sessions || []; setSessions(list); if (activeId === sessionId) { setActiveId(list[0]?.id || null); setMessages([]); } } }; const handleComposerKeyDown = (e) => { if (e.key !== "Enter" || e.shiftKey || e.isComposing) return; e.preventDefault(); if (streaming) stop(); else send(); }; const totals = sessions.reduce((acc, s) => ({ msgs: acc.msgs + (s.calls || 0), tok: acc.tok + (s.input_tokens || 0) + (s.output_tokens || 0), cost: acc.cost + (s.cost_cny || 0), }), { msgs: 0, tok: 0, cost: 0 }); return (
} />
{/* LEFT: session list */}
{filtered.length === 0 ? (
暂无会话
点击"新建会话"开始
) : filtered.map(s => ( setActiveId(s.id)} onDelete={() => deleteSession(s.id)} /> ))}
{/* CENTER: conversation */}
{active ? ( <> {active.channel} {active.id.slice(0, 16)} {active.calls} 次调用 · {API.fmtNumber((active.input_tokens || 0) + (active.output_tokens || 0))} tok · ￥{API.fmtCost(active.cost_cny)} ) : ( 未选择会话 )}
{/* Transcript */}
{messages.length === 0 && !streaming && (
这个会话还没有消息。下方输入框开始聊天 ↓
)} {messages.map((m, i) => )} {streaming && } {resolvedApprovals.map((r, i) => ( ))} {pendingApprovals.map((a) => ( resolveApproval(a, decision, scope)} /> ))}
{/* Composer */}