admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-04 16:14:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	CHANGELOG.md
This commit is contained in:
HouYunFei
2026-07-20 07:55:56 +08:00
parent b5dc9c8a87 8fb8d0b224
commit d566d5cc46
18 changed files with 947 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/canvas/canvas-agent-chat-ui.tsx
+1 -1
View File
@@ -303,7 +303,7 @@ function toolCardState(title: string, text: string, detail?: unknown) {
if (objectField(detail, "status") === "noop" || /未生效|无需|没有找到|没有.*可|已存在/.test(raw)) return { label: "未生效", color: "#d97706", softBorder: "rgba(217,119,6,.22)", softBg: "rgba(217,119,6,.04)", icon: <CircleAlert className="size-4" />, isError: false };
if (/拒绝|取消/.test(raw) || lower.includes("rejected")) return { label: "拒绝执行", color: "#dc2626", softBorder: "rgba(220,38,38,.20)", softBg: "rgba(220,38,38,.04)", icon: <XCircle className="size-4" />, isError: true };
if (/失败|错误/.test(raw) || lower.includes("failed") || lower.includes("error")) return { label: "执行失败", color: "#dc2626", softBorder: "rgba(220,38,38,.20)", softBg: "rgba(220,38,38,.04)", icon: <XCircle className="size-4" />, isError: true };
if (/完成|成功/.test(raw) || lower.includes("completed") || lower.includes("succeeded")) return { label: tool === "canvas_apply_ops" || /画布操作/.test(title) ? "已批准执行" : "执行完成", color: "#16a34a", softBorder: "rgba(22,163,74,.20)", softBg: "rgba(22,163,74,.04)", icon: <CheckCircle2 className="size-4" />, isError: false };
if (/完成|成功/.test(raw) || lower.includes("completed") || lower.includes("succeeded")) return { label: tool === "canvas_apply_ops" || /画布操作/.test(title) ? "已批准执行" : "工具完成", color: "#16a34a", softBorder: "rgba(22,163,74,.20)", softBg: "rgba(22,163,74,.04)", icon: <CheckCircle2 className="size-4" />, isError: false };
return { label: "工具调用", color: "#2563eb", softBorder: "rgba(37,99,235,.20)", softBg: "rgba(37,99,235,.04)", icon: <Wrench className="size-4" />, isError: false };
}
web/src/components/canvas/canvas-local-agent-panel.tsx
+178 -79
View File
@@ -5,7 +5,11 @@ import copyToClipboard from "copy-to-clipboard";
import { Copy, FolderOpen, History, KeyRound, Link2, LoaderCircle, PlugZap, Plus, RefreshCw, Square, Terminal, Trash2 } from "lucide-react";
import { canvasThemes } from "@/lib/canvas-theme";
import { imageMetadata } from "@/lib/canvas/canvas-node-factory";
import { fitNodeSize } from "@/lib/canvas/canvas-node-size";
import { readImageMeta } from "@/lib/image-utils";
import { randomId } from "@/lib/utils";
import { uploadImage } from "@/services/image-storage";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
import { useShallow } from "zustand/react/shallow";
@@ -27,7 +31,9 @@ const AGENT_MCP_REMOVE_COMMAND = "codex mcp remove infinite-canvas";
type AgentEventPayload = {
agent?: string;
type?: string;
threadId?: string;
thread_id?: string;
turn_id?: string;
item?: AgentEventItem;
error?: { message?: string };
message?: string;
@@ -40,6 +46,10 @@ type AgentWorkspace = { workspacePath: string; activeThreadId?: string };
type AgentThreadsResponse = { ok?: boolean; workspace?: AgentWorkspace; data?: AgentThreadSummary[] };
type AgentThreadResponse = { ok?: boolean; workspace?: AgentWorkspace; thread?: AgentThreadSummary; messages?: AgentChatItem[] };
type AgentConfigResponse = { ok?: boolean; url?: string; token?: string; hasToken?: boolean };
type AgentCodexState = { busy?: boolean; threadId?: string; turnId?: string };
type AgentHelloEvent = { ok?: boolean; clientId?: string; codex?: AgentCodexState };
type AgentWorkspaceEvent = { activeThreadId?: string; threadId?: string; emptyThread?: boolean };
type AgentChatEvent = { threadId?: string; sourceClientId?: string; message?: AgentChatItem };
export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { embedded?: boolean; headless?: boolean; autoConnect?: boolean }) {
const theme = canvasThemes[useThemeStore((state) => state.theme)];
@@ -88,28 +98,27 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
const errorLoggedRef = useRef(false);
const attachmentUrlsRef = useRef(new Set<string>());
const clientIdRef = useRef(randomId());
const loadThreadsSequenceRef = useRef(0);
const endpoint = useMemo(() => url.trim().replace(/\/$/, ""), [url]);
const urlAgentAutoConnect = searchParams.has("agentUrl") && searchParams.has("agentToken");
const loadThreads = useCallback(async () => {
const loadThreads = useCallback(async (skipHistory = false) => {
if (!connectedRef.current && !useAgentStore.getState().connected) return;
const sequence = ++loadThreadsSequenceRef.current;
setAgentState({ loadingThreads: true });
try {
const data = await fetchAgentJson<AgentThreadsResponse>(endpoint, token, `/agent/codex/threads`);
const nextThreadId = data.workspace?.activeThreadId || "";
setAgentState({
threads: data.data || [],
workspacePath: data.workspace?.workspacePath || "",
activeThreadId: nextThreadId,
messages: [],
});
if (nextThreadId) {
let nextMessages: AgentChatItem[] = [];
if (nextThreadId && !skipHistory) {
const thread = await fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(nextThreadId)}`);
setAgentState({ messages: normalizeHistoryMessages(thread.messages || []) });
nextMessages = normalizeHistoryMessages(thread.messages || []);
}
if (sequence !== loadThreadsSequenceRef.current) return;
setAgentState({ threads: data.data || [], workspacePath: data.workspace?.workspacePath || "", activeThreadId: nextThreadId, messages: nextMessages });
} catch (error) {
addEventLog("读取历史失败", error);
} finally {
setAgentState({ loadingThreads: false });
if (sequence === loadThreadsSequenceRef.current) setAgentState({ loadingThreads: false });
}
}, [endpoint, setAgentState, token]);
@@ -144,13 +153,28 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
localStorage.setItem("canvas-agent-url", endpoint);
localStorage.setItem("canvas-agent-token", token);
const clientId = clientIdRef.current;
let eventQueue = Promise.resolve();
const enqueueEvent = (task: () => void | Promise<void>) => {
eventQueue = eventQueue.then(task).catch((error) => addEventLog("同步会话失败", error));
};
const source = new EventSource(`${endpoint}/events?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`);
source.addEventListener("hello", () => {
source.addEventListener("hello", (event) => {
const busy = Boolean(parseEventData<AgentHelloEvent>(event)?.codex?.busy);
errorLoggedRef.current = false;
connectedRef.current = true;
setAgentState({ connected: true, activity: "已连接", connectError: "", silentConnect: false, messages: useAgentStore.getState().messages.filter((item) => !isConnectionErrorMessage(item)) });
setAgentState({ connected: true, activity: busy ? "Codex 正在运行" : "已连接", waiting: busy, sending: false, connectError: "", silentConnect: false, messages: useAgentStore.getState().messages.filter((item) => !isConnectionErrorMessage(item)) });
if (!headless) message.success("本地 Agent 已连接");
void postState(endpoint, token, clientId, canvasContextRef.current?.snapshot || null);
if (document.visibilityState === "visible" && document.hasFocus()) void activateAgentClient(endpoint, token, clientId);
});
source.addEventListener("codex_state", (event) => {
const data = parseEventData<AgentCodexState>(event);
if (!data) return;
enqueueEvent(async () => {
const busy = Boolean(data.busy);
setAgentState({ activity: busy ? "Codex 正在运行" : "完成", waiting: busy, ...(busy ? {} : { sending: false }) });
if (!busy) await loadThreads();
});
});
source.addEventListener("tool_call", (event) => {
const data = parseEventData<AgentPendingToolCall>(event);
@@ -158,21 +182,40 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
});
source.addEventListener("agent_event", (event) => {
const data = parseEventData<AgentEventPayload>(event);
if (data) handleAgentEvent(data);
if (data) enqueueEvent(() => {
if (isCurrentThreadEvent(data)) handleAgentEvent(data);
});
});
source.addEventListener("workspace_changed", (event) => {
const data = parseEventData<AgentWorkspaceEvent>(event);
if (!data) return;
enqueueEvent(async () => {
const nextThreadId = data.activeThreadId ?? data.threadId ?? "";
pendingToolRef.current = null;
setAgentState({ activeThreadId: nextThreadId, messages: [], pendingTool: null });
await loadThreads(data.emptyThread);
});
});
source.addEventListener("chat_message", (event) => {
const data = parseEventData<AgentChatEvent>(event);
if (!data?.message) return;
enqueueEvent(() => {
if (!isCurrentThreadEvent(data)) return;
addMessage(data.message!);
});
});
source.addEventListener("agent_log", (event) => {
const text = parseEventData<{ text?: unknown }>(event)?.text;
addEventLog("日志", text, text);
});
source.addEventListener("agent_error", (event) => {
const message = parseEventData<{ message?: unknown }>(event)?.message;
setAgentState({ activity: "出错", waiting: false });
addMessage({ role: "error", title: "错误", text: normalizeText(message) });
addEventLog("错误", message, message);
});
source.addEventListener("agent_done", () => {
setAgentState({ activity: "完成", waiting: false, sending: false });
void loadThreads();
const data = parseEventData<AgentEventPayload>(event);
if (!data) return;
enqueueEvent(() => {
if (!isCurrentThreadEvent(data)) return;
addMessage({ role: "error", title: "错误", text: normalizeText(data.message) });
addEventLog("错误", data.message, data.message);
});
});
source.onerror = () => {
const wasConnected = connectedRef.current;
@@ -193,6 +236,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
return () => {
source.close();
connectedRef.current = false;
loadThreadsSequenceRef.current += 1;
};
}, [enabled, endpoint, loadThreads, message, setAgentState, token]);
@@ -200,6 +244,19 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
if (connected) void loadThreads();
}, [connected, loadThreads]);
useEffect(() => {
if (!connected) return;
const activate = () => void activateAgentClient(endpoint, token, clientIdRef.current);
const activateVisible = () => {
if (document.visibilityState === "visible") activate();
};
window.addEventListener("focus", activate);
document.addEventListener("visibilitychange", activateVisible);
return () => {
window.removeEventListener("focus", activate);
document.removeEventListener("visibilitychange", activateVisible);
};
}, [connected, endpoint, token]);
const sendPrompt = async () => {
const text = prompt.trim();
const files = attachments;
@@ -209,27 +266,35 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
addMessage({ role: "error", title: "图片过大", text: "图片附件超过 30MB，请删减后再发送。" });
return;
}
setAgentState({ activity: "发送中", sending: true, waiting: true });
addMessage({ role: "user", text: text || "发送了图片", attachments: files });
setAgentState({ activity: "发送中", sending: true });
const messageId = createId();
addMessage({ id: messageId, role: "user", text: text || "发送了图片", attachments: files });
addEventLog("用户发送", { text, attachments: files.map(({ name, type, size }) => ({ name, type, size })) });
try {
const res = await fetch(`${endpoint}/agent/codex/turn?token=${encodeURIComponent(token)}`, {
const data = await fetchAgentJson<{ threadId?: string }>(endpoint, token, "/agent/codex/turn", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ prompt: requestPrompt, threadId: useAgentStore.getState().activeThreadId || undefined, attachments: files.map(({ name, type, dataUrl }) => ({ name, type, dataUrl })) }),
body: JSON.stringify({
prompt: requestPrompt,
messageText: text || `发送了 ${files.length} 张图片`,
messageId,
clientId: clientIdRef.current,
threadId: useAgentStore.getState().activeThreadId || undefined,
attachments: files.map(({ id, name, type, size, width, height, dataUrl }) => ({ id, name, type, size, width, height, dataUrl })),
}),
});
if (!res.ok) throw new Error("本地 Agent 拒绝了请求");
const data = (await res.json()) as { threadId?: string };
if (data.threadId) setAgentState({ activeThreadId: data.threadId });
addEventLog("本地 Agent 已接收", { status: res.status });
addEventLog("本地 Agent 已接收", { threadId: data.threadId });
files.forEach((item) => {
URL.revokeObjectURL(item.url);
attachmentUrlsRef.current.delete(item.url);
});
setAgentState({ prompt: "", attachments: [] });
} catch (error) {
setAgentState({ activity: "发送失败", waiting: false });
addMessage({ role: "error", title: "发送失败", text: error instanceof Error ? error.message : "发送失败" });
const text = error instanceof Error ? error.message : "发送失败";
const busy = text.includes("Codex 正在运行");
setAgentState({ activity: busy ? "Codex 正在运行" : "发送失败" });
addMessage({ role: "error", title: busy ? "任务仍在运行" : "发送失败", text });
addEventLog("发送失败", error);
} finally {
setAgentState({ sending: false });
@@ -240,11 +305,10 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
if (!connected || (!sending && !waiting)) return;
setAgentState({ activity: "停止中" });
try {
await fetch(`${endpoint}/agent/codex/interrupt?token=${encodeURIComponent(token)}`, { method: "POST", headers: { "content-type": "application/json" } });
setAgentState({ activity: "已停止", sending: false, waiting: false });
await fetch(`${endpoint}/agent/codex/interrupt?token=${encodeURIComponent(token)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ threadId: useAgentStore.getState().activeThreadId || undefined }) });
addEventLog("用户停止", {});
} catch {
setAgentState({ activity: "就绪", sending: false, waiting: false });
setAgentState({ activity: "停止失败" });
}
};
@@ -256,9 +320,10 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
const next = await Promise.all(
images.slice(0, Math.max(0, MAX_ATTACHMENTS - prev.length)).map(async (file) => {
const dataUrl = await readDataUrl(file);
const meta = await readImageMeta(dataUrl);
const url = URL.createObjectURL(file);
attachmentUrlsRef.current.add(url);
return { id: createId(), name: file.name, type: file.type, size: file.size, url, dataUrl };
return { id: createId(), name: file.name, type: file.type, size: file.size, width: meta.width, height: meta.height, url, dataUrl };
}),
);
const merged = [...prev, ...next];
@@ -286,13 +351,13 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
};
const handleToolCall = async (endpoint: string, token: string, payload: AgentPendingToolCall) => {
if (confirmToolsRef.current && payload.name === "canvas_apply_ops") {
if (confirmToolsRef.current && isCanvasWriteTool(payload.name)) {
if (pendingToolRef.current) {
await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, error: "仍有待确认的画布工具调用" });
return;
}
pendingToolRef.current = payload;
setAgentState({ pendingTool: payload, activity: "等待确认", waiting: false });
setAgentState({ pendingTool: payload });
addEventLog("等待确认", payload, payload);
return;
}
@@ -302,16 +367,13 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
const runToolCall = async (endpoint: string, token: string, payload: AgentPendingToolCall) => {
if (isSiteTool(payload.name)) {
try {
setAgentState({ activity: SITE_TOOL_LABELS[payload.name], waiting: true });
addEventLog(toolName(payload.name), payload, payload);
const result = await runSiteTool(payload.name, payload.input || {}, navigate);
const result = await runSiteTool(payload.name, payload.input || {}, navigate, { canvasSnapshot: canvasContextRef.current?.snapshot || null });
await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, result });
setAgentState({ activity: "工具完成", waiting: true });
addEventLog(`${toolName(payload.name)}完成`, result, result);
addMessage({ role: "tool", title: `${toolName(payload.name)}完成`, text: siteToolSummary(payload.name, result), detail: { requestId: payload.requestId, name: payload.name, input: payload.input, result } });
} catch (error) {
const message = error instanceof Error ? error.message : "工具执行失败";
setAgentState({ activity: "工具失败", waiting: false });
addMessage({ role: "tool", title: "工具失败", text: message, detail: payload });
await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, error: message });
}
@@ -319,9 +381,9 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
}
try {
const input: { ops?: CanvasAgentOp[]; path?: string } = payload.input || {};
setAgentState({ activity: payload.name === "canvas_apply_ops" ? "执行画布操作" : payload.name === "site_navigate" ? "跳转页面" : "读取画布", waiting: true });
addEventLog(toolName(payload.name), payload, payload);
let result: unknown;
let appliedOps = input.ops || [];
if (payload.name === "site_navigate") {
const path = input.path || "/";
navigate(path);
@@ -329,25 +391,29 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
} else if (payload.name === "canvas_apply_ops") {
const context = canvasContextRef.current;
if (!context) throw new Error("当前不在画布页，请先用 site_navigate 打开画布");
result = context.applyOps(input.ops || []);
result = context.applyOps(appliedOps);
void postState(endpoint, token, clientIdRef.current, result as CanvasAgentSnapshot);
} else if (payload.name === "canvas_create_attachment_nodes") {
const context = canvasContextRef.current;
if (!context) throw new Error("当前不在画布页，请先用 site_navigate 打开画布");
appliedOps = await attachmentNodeOps(endpoint, token, clientIdRef.current, payload.input?.nodes);
result = context.applyOps(appliedOps);
await postState(endpoint, token, clientIdRef.current, result as CanvasAgentSnapshot);
} else {
const snapshot = canvasContextRef.current?.snapshot;
if (!snapshot) throw new Error("当前不在画布页，请先用 site_navigate 打开画布");
result = snapshot;
}
await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, result });
setAgentState({ activity: "工具完成", waiting: true });
addEventLog(`${toolName(payload.name)}完成`, result, result);
addMessage({
role: "tool",
title: `${toolName(payload.name)}完成`,
text: payload.name === "canvas_apply_ops" ? summarizeCanvasAgentOps(input.ops || []) || "画布操作" : payload.name === "site_navigate" ? `已跳转到 ${input.path || "/"}` : "已完成",
text: appliedOps.length ? summarizeCanvasAgentOps(appliedOps) || "画布操作" : payload.name === "site_navigate" ? `已跳转到 ${input.path || "/"}` : "已完成",
detail: { requestId: payload.requestId, name: payload.name, input, result },
});
} catch (error) {
const message = error instanceof Error ? error.message : "画布操作失败";
setAgentState({ activity: "工具失败", waiting: false });
addMessage({ role: "tool", title: "工具失败", text: message, detail: payload });
await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, error: message });
}
@@ -356,7 +422,6 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
const rejectPendingTool = async () => {
if (!pendingTool) return;
await postToolResult(endpoint, token, clientIdRef.current, { requestId: pendingTool.requestId, error: "用户取消了画布工具调用" });
setAgentState({ activity: "已取消", waiting: false });
addMessage({ role: "tool", title: "拒绝执行", text: toolName(pendingTool.name), detail: { requestId: pendingTool.requestId, name: pendingTool.name, input: pendingTool.input } });
pendingToolRef.current = null;
setAgentState({ pendingTool: null });
@@ -422,6 +487,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
}, [autoConnect, connected, enabled]);
function clearAgentSession(patch: Parameters<typeof setAgentState>[0] = {}) {
loadThreadsSequenceRef.current += 1;
setAgentState({
messages: [],
threads: [],
@@ -437,12 +503,11 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
}
const startNewThread = async () => {
if (!connected) return;
if (!connected || sending || waiting) return;
setAgentState({ loadingThreads: true });
try {
const data = await fetchAgentJson<AgentThreadResponse>(endpoint, token, "/agent/codex/threads/new", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) });
setAgentState({ activeThreadId: data.thread?.id || data.workspace?.activeThreadId || "", messages: [], activeTab: "chat", activity: "新对话" });
await loadThreads();
} catch (error) {
addEventLog("新建对话失败", error);
message.error(error instanceof Error ? error.message : "新建对话失败");
@@ -452,12 +517,11 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
};
const resumeThread = async (threadId: string) => {
if (!connected || !threadId) return;
if (!connected || !threadId || sending || waiting) return;
setAgentState({ loadingThreads: true });
try {
const data = await fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/resume`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) });
setAgentState({ activeThreadId: data.thread?.id || threadId, messages: normalizeHistoryMessages(data.messages || []), activeTab: "chat", activity: "已恢复会话" });
await loadThreads();
} catch (error) {
addEventLog("恢复对话失败", error);
message.error(error instanceof Error ? error.message : "恢复对话失败");
@@ -467,7 +531,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
};
const deleteThread = async (threadId: string) => {
if (!connected || !threadId) return;
if (!connected || !threadId || sending || waiting) return;
setAgentState({ loadingThreads: true });
try {
await fetchAgentJson(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/delete`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) });
@@ -498,11 +562,12 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
});
};
const addMessage = (item: Omit<AgentChatItem, "id">) => {
const addMessage = (item: Omit<AgentChatItem, "id"> & { id?: string }) => {
const text = normalizeText(item.text);
if (!text && !item.attachments?.length) return;
const next = { ...item, id: `${Date.now()}-${Math.random()}`, text };
const next = { ...item, id: item.id || `${Date.now()}-${Math.random()}`, text } as AgentChatItem;
const currentMessages = useAgentStore.getState().messages;
if (currentMessages.some((message) => message.id === next.id)) return;
if (next.streamId) {
const index = currentMessages.findIndex((message) => message.streamId === next.streamId);
if (index >= 0) {
@@ -527,15 +592,8 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
const handleAgentEvent = (event: AgentEventPayload) => {
if (shouldLogAgentEvent(event)) addEventLog(eventTitle(event), event, event);
if (event.type === "thread.started" && event.thread_id) setAgentState({ activeThreadId: event.thread_id });
const nextActivity = activityText(event);
if (nextActivity) setAgentState({ activity: nextActivity });
if (event.type === "turn.started") setAgentState({ waiting: true });
if (event.type === "turn.completed" || event.type === "turn.failed" || event.type === "error") setAgentState({ waiting: false, sending: false });
const item = formatAgentEvent(event);
if (item) {
if (item.role === "error") setAgentState({ waiting: false, sending: false });
addMessage(item);
}
if (item) addMessage(item);
};
const content = (
@@ -555,7 +613,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
}}
right={
<>
<Button size="small" type="text" disabled={!connected || loadingThreads} icon={<Plus className="size-3.5" />} onClick={startNewThread}>
<Button size="small" type="text" disabled={!connected || loadingThreads || sending || waiting} icon={<Plus className="size-3.5" />} onClick={startNewThread}>
新对话
</Button>
</>
@@ -582,6 +640,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
activeThreadId={activeThreadId}
workspacePath={workspacePath}
loading={loadingThreads}
busy={sending || waiting}
connected={connected}
onRefresh={() => void loadThreads()}
onNewThread={() => void startNewThread()}
@@ -864,6 +923,7 @@ function AgentHistoryView({
activeThreadId,
workspacePath,
loading,
busy,
connected,
onRefresh,
onNewThread,
@@ -875,6 +935,7 @@ function AgentHistoryView({
activeThreadId: string;
workspacePath: string;
loading: boolean;
busy: boolean;
connected: boolean;
onRefresh: () => void;
onNewThread: () => void;
@@ -899,7 +960,7 @@ function AgentHistoryView({
<Button size="small" icon={<RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />} disabled={!connected || loading} onClick={onRefresh}>
刷新
</Button>
<Button size="small" type="primary" icon={<Plus className="size-3.5" />} disabled={!connected || loading} onClick={onNewThread}>
<Button size="small" type="primary" icon={<Plus className="size-3.5" />} disabled={!connected || loading || busy} onClick={onNewThread}>
新对话
</Button>
</div>
@@ -923,11 +984,11 @@ function AgentHistoryView({
</div>
<div className="flex shrink-0 items-center gap-1">
<span className="text-[10px] opacity-55">{formatThreadTime(thread.updatedAt || thread.createdAt)}</span>
<Button size="small" className="!h-6 !px-2" disabled={loading} onClick={() => onResumeThread(thread.id)}>
<Button size="small" className="!h-6 !px-2" disabled={loading || busy} onClick={() => onResumeThread(thread.id)}>
进入
</Button>
<Tooltip title="删除记录">
<Button size="small" danger type="text" className="!h-6 !w-6 !min-w-6" disabled={loading} icon={<Trash2 className="size-3.5" />} onClick={() => onDeleteThread(thread)} />
<Button size="small" danger type="text" className="!h-6 !w-6 !min-w-6" disabled={loading || busy} icon={<Trash2 className="size-3.5" />} onClick={() => onDeleteThread(thread)} />
</Tooltip>
</div>
</div>
@@ -955,6 +1016,12 @@ async function postState(endpoint: string, token: string, clientId: string, snap
} catch {}
}
async function activateAgentClient(endpoint: string, token: string, clientId: string) {
try {
await fetch(`${endpoint}/canvas/activate?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`, { method: "POST" });
} catch {}
}
async function postToolResult(endpoint: string, token: string, clientId: string, body: { requestId: string; result?: unknown; error?: string }) {
await fetch(`${endpoint}/canvas/result?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
}
@@ -985,6 +1052,11 @@ function parseEventData<T>(event: Event) {
}
}
function isCurrentThreadEvent(event: { threadId?: string; thread_id?: string }) {
const threadId = event.threadId || event.thread_id || "";
return Boolean(threadId) && threadId === useAgentStore.getState().activeThreadId;
}
function formatLogText(logs: AgentEventLog[], context: AgentLogContext) {
const head = [
"Infinite Canvas Agent 诊断日志",
@@ -1025,17 +1097,6 @@ function usageText(event: AgentEventPayload) {
return undefined;
}
function activityText(event: AgentEventPayload) {
const name = event.type || "";
if (name === "thread.started") return "已创建会话";
if (name === "turn.started") return "思考中";
if (name === "turn.completed") return "完成";
if (name === "turn.failed" || name === "error") return "出错";
if (name === "item.started") return isMcpToolItem(event.item) ? `调用${toolName(String(event.item?.tool || ""))}` : "执行步骤";
if (name === "item.completed") return isMcpToolItem(event.item) ? "工具完成" : "更新消息";
return "";
}
function eventTitle(event: AgentEventPayload) {
const item = event.item;
if (event.type === "thread.started") return "已创建 Codex 会话";
@@ -1064,6 +1125,7 @@ function toolName(name: string) {
if (name === "canvas_get_selection") return "读取选区";
if (name === "canvas_export_snapshot") return "导出快照";
if (name === "canvas_create_node") return "创建节点";
if (name === "canvas_create_attachment_nodes") return "添加附件图片";
if (name === "canvas_create_text_node") return "创建文本";
if (name === "canvas_create_text_nodes") return "批量创建文本";
if (name === "canvas_create_config_node") return "创建生成配置";
@@ -1093,6 +1155,10 @@ function siteToolSummary(name: string, result: unknown) {
if (name === "prompts_search") return `找到 ${numberField(data, "total")} 条提示词`;
if (name === "assets_list") return `共 ${numberField(data, "total")} 个资产`;
if (name === "assets_add") return "已加入我的资产";
if (name === "generation_get_status") {
const summary = data.summary && typeof data.summary === "object" ? (data.summary as Record<string, unknown>) : {};
return `共 ${numberField(data, "total")} 个任务，排队 ${numberField(summary, "queued")}，运行中 ${numberField(summary, "running")}，成功 ${numberField(summary, "succeeded")}，失败 ${numberField(summary, "failed")}`;
}
if (name === "workbench_image_generate" || name === "workbench_video_generate") return typeof data.note === "string" ? data.note : "已在工作台执行";
if (name === "workbench_image_get_config" || name === "workbench_video_get_config") return "已读取工作台配置";
return "已完成";
@@ -1167,9 +1233,7 @@ function mergeAgentText(prev: string, next: string) {
}
function promptWithAttachments(text: string, attachments: AgentAttachment[]) {
if (!attachments.length) return text;
const names = attachments.map((item) => item.name).join("、");
return [text, `用户上传了 ${attachments.length} 张图片附件：${names}。`].filter(Boolean).join("\n\n");
return text || (attachments.length ? "请处理上传的图片附件。" : "");
}
function attachmentPayloadBytes(attachments: AgentAttachment[]) {
@@ -1180,6 +1244,41 @@ function formatBytes(bytes: number) {
return bytes > 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)}MB` : `${Math.ceil(bytes / 1024)}KB`;
}
function isCanvasWriteTool(name: string) {
return name === "canvas_apply_ops" || name === "canvas_create_attachment_nodes";
}
async function attachmentNodeOps(endpoint: string, token: string, clientId: string, value: unknown): Promise<CanvasAgentOp[]> {
const nodes = Array.isArray(value) ? value : [];
if (!nodes.length) throw new Error("没有可添加的图片附件");
return await Promise.all(
nodes.map(async (value) => {
const item = value as { id?: unknown; attachmentId?: unknown; title?: unknown; position?: unknown };
const id = String(item.id || "");
const attachmentId = String(item.attachmentId || "");
if (!id || !attachmentId) throw new Error("图片附件节点参数无效");
const res = await fetch(`${endpoint}/agent/attachments/${encodeURIComponent(attachmentId)}?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`);
if (!res.ok) {
const body = (await res.json().catch(() => null)) as { error?: string } | null;
throw new Error(body?.error || "读取图片附件失败");
}
const image = await uploadImage(await res.blob());
const size = fitNodeSize(image.width, image.height);
const position = item.position && typeof item.position === "object" ? (item.position as { x?: unknown; y?: unknown }) : {};
return {
type: "add_node" as const,
id,
nodeType: "image" as const,
title: String(item.title || "参考图"),
position: { x: Number(position.x) || 0, y: Number(position.y) || 0 },
width: size.width,
height: size.height,
metadata: imageMetadata(image),
};
}),
);
}
async function fetchAgentJson<T>(endpoint: string, token: string, path: string, init?: RequestInit) {
const url = `${endpoint}${path}${path.includes("?") ? "&" : "?"}token=${encodeURIComponent(token)}`;
const res = await fetch(url, init);
web/src/lib/agent/agent-site-tools.ts
+63 -5
View File
@@ -4,6 +4,7 @@ import { fetchPrompts } from "@/services/api/prompts";
import { uploadImage } from "@/services/image-storage";
import { imageAspectOptions, imageQualityOptions } from "@/components/image-settings-panel";
import { videoResolutionOptions, videoSecondOptions, videoSizeOptions } from "@/components/video-settings-panel";
import type { CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";
import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
import { useAssetStore } from "@/stores/use-asset-store";
import { modelOptionLabel, modelOptionName, normalizeModelOptionValue, selectableModelsByCapability, useConfigStore } from "@/stores/use-config-store";
@@ -14,6 +15,7 @@ import { useWorkbenchAgentStore } from "@/stores/use-workbench-agent-store";
export const SITE_TOOL_NAMES = [
"canvas_list_projects",
"generation_get_status",
"workbench_image_get_config",
"workbench_image_generate",
"workbench_video_get_config",
@@ -31,6 +33,7 @@ export function isSiteTool(name: string): name is SiteToolName {
export const SITE_TOOL_LABELS: Record<SiteToolName, string> = {
canvas_list_projects: "画布列表",
generation_get_status: "生成任务状态",
workbench_image_get_config: "生图配置",
workbench_image_generate: "生图工作台生成",
workbench_video_get_config: "视频配置",
@@ -41,11 +44,16 @@ export const SITE_TOOL_LABELS: Record<SiteToolName, string> = {
};
type SiteToolInput = Record<string, unknown>;
type SiteToolContext = { canvasSnapshot?: CanvasAgentSnapshot | null };
type GenerationStatus = "idle" | "queued" | "running" | "succeeded" | "failed";
type GenerationStatusItem = { id: string; source: "canvas" | "image" | "video"; status: GenerationStatus; kind?: string; title?: string; prompt?: string; projectId?: string; createdAt?: string; updatedAt?: string; successCount?: number; failCount?: number; error?: string };
export async function runSiteTool(name: SiteToolName, input: SiteToolInput, navigate: NavigateFunction): Promise<unknown> {
export async function runSiteTool(name: SiteToolName, input: SiteToolInput, navigate: NavigateFunction, context: SiteToolContext = {}): Promise<unknown> {
switch (name) {
case "canvas_list_projects":
return listCanvasProjects(input);
case "generation_get_status":
return getGenerationStatus(input, context.canvasSnapshot);
case "workbench_image_get_config":
return getImageConfig();
case "workbench_image_generate":
@@ -65,6 +73,56 @@ export async function runSiteTool(name: SiteToolName, input: SiteToolInput, navi
}
}
function getGenerationStatus(input: SiteToolInput, canvasSnapshot?: CanvasAgentSnapshot | null) {
const scope = input.scope === "canvas" || input.scope === "image" || input.scope === "video" ? input.scope : "all";
const taskId = typeof input.taskId === "string" ? input.taskId : "";
const nodeIds = new Set(Array.isArray(input.nodeIds) ? input.nodeIds.filter((id): id is string => typeof id === "string") : []);
const limit = Math.max(1, Math.min(100, Math.floor(Number(input.limit)) || 20));
const tasks: GenerationStatusItem[] = [];
const includeCanvas = (scope === "all" || scope === "canvas") && (!taskId || nodeIds.size > 0);
const includeWorkbench = !nodeIds.size || Boolean(taskId);
if (includeCanvas && canvasSnapshot) {
canvasSnapshot.nodes.forEach((node) => {
const status = normalizeCanvasGenerationStatus(node.metadata?.status);
if (!status || (nodeIds.size && !nodeIds.has(node.id))) return;
const metadata = node.metadata || {};
if (!nodeIds.size && node.type !== "config" && status !== "running" && status !== "failed" && !metadata.generationMode && !metadata.generationType && !metadata.model) return;
tasks.push({ id: node.id, source: "canvas", status, kind: metadata.generationMode || node.type, title: node.title, prompt: compactPrompt(metadata.prompt || metadata.composerContent), projectId: canvasSnapshot.projectId, error: metadata.errorDetails });
});
}
if (includeWorkbench) {
useWorkbenchAgentStore.getState().tasks.forEach((task) => {
if ((scope === "image" || scope === "video") && task.kind !== scope) return;
if (scope === "canvas" || (taskId && task.id !== taskId)) return;
tasks.push({ ...task, source: task.kind, prompt: compactPrompt(task.prompt) });
});
}
tasks.sort((a, b) => generationStatusOrder(a.status) - generationStatusOrder(b.status) || (b.updatedAt || "").localeCompare(a.updatedAt || ""));
const summary: Record<GenerationStatus, number> = { idle: 0, queued: 0, running: 0, succeeded: 0, failed: 0 };
tasks.forEach((task) => (summary[task.status] += 1));
return { total: tasks.length, summary, tasks: tasks.slice(0, limit) };
}
function generationStatusOrder(status: GenerationStatus) {
return status === "running" ? 0 : status === "queued" ? 1 : 2;
}
function normalizeCanvasGenerationStatus(status: unknown): GenerationStatus | null {
if (status === "idle") return "idle";
if (status === "loading") return "running";
if (status === "success") return "succeeded";
if (status === "error") return "failed";
return null;
}
function compactPrompt(prompt: unknown) {
const value = typeof prompt === "string" ? prompt.trim() : "";
return value ? `${value.slice(0, 200)}${value.length > 200 ? "..." : ""}` : undefined;
}
function listCanvasProjects(input: SiteToolInput) {
const { projects, hydrated } = useCanvasStore.getState();
if (!hydrated) throw new Error("画布还在加载中，请稍后重试");
@@ -118,8 +176,8 @@ function runImageWorkbench(input: SiteToolInput, navigate: NavigateFunction) {
const prompt = typeof input.prompt === "string" ? input.prompt : undefined;
const run = input.run !== false;
navigate("/image");
useWorkbenchAgentStore.getState().dispatchImage({ prompt, run });
return { ok: true, navigated: "/image", prompt, run, applied, note: run ? "已跳转生图工作台并触发生成，结果请稍后在工作台查看" : "已跳转生图工作台并填入参数，未触发生成" };
const taskId = useWorkbenchAgentStore.getState().dispatchImage({ prompt, run });
return { ok: true, navigated: "/image", prompt, run, taskId, applied, note: run ? "已跳转生图工作台并触发生成，可用 generation_get_status 查询任务" : "已跳转生图工作台并填入参数，未触发生成" };
}
function getVideoConfig() {
@@ -173,8 +231,8 @@ function runVideoWorkbench(input: SiteToolInput, navigate: NavigateFunction) {
const prompt = typeof input.prompt === "string" ? input.prompt : undefined;
const run = input.run !== false;
navigate("/video");
useWorkbenchAgentStore.getState().dispatchVideo({ prompt, run });
return { ok: true, navigated: "/video", prompt, run, applied, note: run ? "已跳转视频创作台并触发生成，结果请稍后在工作台查看" : "已跳转视频创作台并填入参数，未触发生成" };
const taskId = useWorkbenchAgentStore.getState().dispatchVideo({ prompt, run });
return { ok: true, navigated: "/video", prompt, run, taskId, applied, note: run ? "已跳转视频创作台并触发生成，可用 generation_get_status 查询任务" : "已跳转视频创作台并填入参数，未触发生成" };
}
async function searchPrompts(input: SiteToolInput) {
web/src/pages/image/index.tsx
+22 -3
View File
@@ -92,7 +92,9 @@ export default function ImagePage() {
const [autoRunToken, setAutoRunToken] = useState(0);
const imageCommand = useWorkbenchAgentStore((state) => state.imageCommand);
const clearImageCommand = useWorkbenchAgentStore((state) => state.clearImageCommand);
const updateAgentTask = useWorkbenchAgentStore((state) => state.updateTask);
const processedCommandRef = useRef(0);
const agentTaskIdRef = useRef<string | undefined>(undefined);
const model = effectiveConfig.imageModel || effectiveConfig.model;
const canGenerate = Boolean(prompt.trim());
@@ -141,22 +143,30 @@ export default function ImagePage() {
};
const generate = async () => {
const agentTaskId = agentTaskIdRef.current;
agentTaskIdRef.current = undefined;
const text = prompt.trim();
if (!text) {
message.error("请输入生图提示词");
if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "请输入生图提示词" });
return;
}
if (!isAiConfigReady(effectiveConfig, model)) {
message.warning("请先完成配置");
openConfigDialog(true);
if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "生图配置不完整" });
return;
}
const snapshot = buildRequestSnapshot();
if (!snapshot) return;
if (!snapshot) {
if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "生图参数无效" });
return;
}
setElapsedMs(0);
setRunning(true);
if (agentTaskId) updateAgentTask(agentTaskId, { status: "running", error: undefined });
setPreviewLog(null);
setResults(Array.from({ length: generationCount }, () => ({ id: nanoid(), status: "pending" })));
const batchStartedAt = performance.now();
@@ -169,6 +179,8 @@ export default function ImagePage() {
const successCount = successImages.length;
const failCount = generationCount - successCount;
const failed = result.find((item): item is PromiseRejectedResult => item.status === "rejected");
const error = failed?.reason instanceof Error ? failed.reason.message : failCount ? "生成失败" : undefined;
if (agentTaskId) updateAgentTask(agentTaskId, { status: successCount ? "succeeded" : "failed", successCount, failCount, error: successCount ? undefined : error });
try {
const logImages = await Promise.all(
@@ -202,8 +214,15 @@ export default function ImagePage() {
processedCommandRef.current = imageCommand.nonce;
clearImageCommand();
if (typeof imageCommand.prompt === "string") setPrompt(imageCommand.prompt);
if (imageCommand.run && !running) setAutoRunToken((value) => value + 1);
}, [imageCommand, clearImageCommand, running]);
if (imageCommand.run && running) {
if (imageCommand.taskId) updateAgentTask(imageCommand.taskId, { status: "failed", error: "生图工作台已有任务正在运行" });
return;
}
if (imageCommand.run) {
agentTaskIdRef.current = imageCommand.taskId;
setAutoRunToken((value) => value + 1);
}
}, [imageCommand, clearImageCommand, running, updateAgentTask]);
useEffect(() => {
if (!autoRunToken) return;
web/src/pages/video/index.tsx
+29 -11
View File
@@ -97,7 +97,9 @@ export default function VideoPage() {
const [autoRunToken, setAutoRunToken] = useState(0);
const videoCommand = useWorkbenchAgentStore((state) => state.videoCommand);
const clearVideoCommand = useWorkbenchAgentStore((state) => state.clearVideoCommand);
const updateAgentTask = useWorkbenchAgentStore((state) => state.updateTask);
const processedCommandRef = useRef(0);
const agentTaskIdRef = useRef<string | undefined>(undefined);
const model = effectiveConfig.videoModel || effectiveConfig.model;
const canGenerate = Boolean(prompt.trim());
@@ -170,10 +172,16 @@ export default function VideoPage() {
}
};
const generate = async () => {
const agentTaskId = agentTaskIdRef.current;
agentTaskIdRef.current = undefined;
const snapshot = buildRequestSnapshot();
if (!snapshot) return;
if (!snapshot) {
if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "视频生成参数无效" });
return;
}
setElapsedMs(0);
setRunning(true);
if (agentTaskId) updateAgentTask(agentTaskId, { status: "running", error: undefined });
setPreviewLog(null);
setResults([{ id: nanoid(), status: "pending" }]);
const batchStartedAt = performance.now();
@@ -181,11 +189,12 @@ export default function VideoPage() {
try {
const task = await createVideoGenerationTask(snapshot.config, snapshot.text, snapshot.references, snapshot.videoReferences, snapshot.audioReferences);
const log = buildLog({ prompt: snapshot.text, model, config: snapshot.config, references: snapshot.references, videoReferences: snapshot.videoReferences, audioReferences: snapshot.audioReferences, durationMs: 0, status: "生成中", task });
await saveLog(log);
void pollGenerationLog(log, snapshot.config);
await saveLog(log, false);
void pollGenerationLog(log, snapshot.config, agentTaskId);
} catch (error) {
const errorMessage = error instanceof Error ? error.message : "生成失败";
setResults([{ id: nanoid(), status: "failed", error: errorMessage }]);
if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", successCount: 0, failCount: 1, error: errorMessage });
await saveLog(buildLog({ prompt: snapshot.text, model, config: snapshot.config, references: snapshot.references, videoReferences: snapshot.videoReferences, audioReferences: snapshot.audioReferences, durationMs: performance.now() - batchStartedAt, status: "失败", error: errorMessage }));
message.error(errorMessage);
setRunning(false);
@@ -198,8 +207,15 @@ export default function VideoPage() {
processedCommandRef.current = videoCommand.nonce;
clearVideoCommand();
if (typeof videoCommand.prompt === "string") setPrompt(videoCommand.prompt);
if (videoCommand.run && !running) setAutoRunToken((value) => value + 1);
}, [videoCommand, clearVideoCommand, running]);
if (videoCommand.run && running) {
if (videoCommand.taskId) updateAgentTask(videoCommand.taskId, { status: "failed", error: "视频工作台已有任务正在运行" });
return;
}
if (videoCommand.run) {
agentTaskIdRef.current = videoCommand.taskId;
setAutoRunToken((value) => value + 1);
}
}, [videoCommand, clearVideoCommand, running, updateAgentTask]);
useEffect(() => {
if (!autoRunToken) return;
@@ -276,7 +292,7 @@ export default function VideoPage() {
.filter((log) => selectedLogIds.includes(log.id))
.map((log) => log.video?.storageKey)
.filter((key): key is string => Boolean(key));
void Promise.all([deleteStoredMedia(mediaKeys), ...selectedLogIds.map((id) => logStore.removeItem(id))]).then(refreshLogs);
void Promise.all([deleteStoredMedia(mediaKeys), ...selectedLogIds.map((id) => logStore.removeItem(id))]).then(() => refreshLogs());
if (previewLog && selectedLogIds.includes(previewLog.id)) {
setPreviewLog(null);
setResults([]);
@@ -285,15 +301,15 @@ export default function VideoPage() {
setDeleteConfirmOpen(false);
};
const saveLog = async (log: GenerationLog) => {
const saveLog = async (log: GenerationLog, resumePending = true) => {
await logStore.setItem(log.id, serializeLog(log));
await refreshLogs();
await refreshLogs(resumePending);
};
const refreshLogs = async () => {
const refreshLogs = async (resumePending = true) => {
const nextLogs = await readStoredLogs();
setLogs(nextLogs);
resumePendingLogs(nextLogs);
if (resumePending) resumePendingLogs(nextLogs);
return nextLogs;
};
@@ -303,7 +319,7 @@ export default function VideoPage() {
}
};
const pollGenerationLog = async (log: GenerationLog, configOverride?: AiConfig) => {
const pollGenerationLog = async (log: GenerationLog, configOverride?: AiConfig, agentTaskId?: string) => {
if (!log.task || activeLogIdsRef.current.has(log.id)) return;
activeLogIdsRef.current.add(log.id);
setRunning(true);
@@ -326,6 +342,7 @@ export default function VideoPage() {
mimeType: stored.mimeType,
};
setResults([{ id: nextVideo.id, status: "success", video: nextVideo }]);
if (agentTaskId) updateAgentTask(agentTaskId, { status: "succeeded", successCount: 1, failCount: 0, error: undefined });
await saveLog({ ...log, status: "成功", durationMs: nextVideo.durationMs, video: nextVideo, error: undefined });
message.success("视频已生成");
return;
@@ -337,6 +354,7 @@ export default function VideoPage() {
} catch (error) {
const errorMessage = error instanceof Error ? error.message : "生成失败";
setResults([{ id: log.id, status: "failed", error: errorMessage }]);
if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", successCount: 0, failCount: 1, error: errorMessage });
await saveLog({ ...log, status: "失败", durationMs: Date.now() - log.createdAt, error: errorMessage });
message.error(errorMessage);
} finally {
web/src/stores/use-agent-store.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { create } from "zustand";
import type { CanvasAgentOp, CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";
export type AgentChatRole = "user" | "assistant" | "system" | "tool" | "error";
export type AgentAttachment = { id: string; name: string; type: string; size: number; url: string; dataUrl: string };
export type AgentAttachment = { id: string; name: string; type: string; size: number; width: number; height: number; url: string; dataUrl: string };
export type AgentChatItem = { id: string; role: AgentChatRole; title?: string; text: string; meta?: string; detail?: unknown; attachments?: AgentAttachment[]; streamId?: string };
export type AgentEventLog = { id: string; time: string; title: string; text: string; raw?: unknown };
export type AgentPendingToolCall = { requestId: string; name: string; input?: { ops?: CanvasAgentOp[]; path?: string } & Record<string, unknown> };
web/src/stores/use-workbench-agent-store.ts
+36 -4
View File
@@ -6,15 +6,30 @@ import { create } from "zustand";
export type WorkbenchCommand = {
nonce: number;
taskId?: string;
prompt?: string;
run: boolean;
};
export type WorkbenchGenerationTask = {
id: string;
kind: "image" | "video";
status: "queued" | "running" | "succeeded" | "failed";
prompt?: string;
createdAt: string;
updatedAt: string;
successCount?: number;
failCount?: number;
error?: string;
};
type WorkbenchAgentStore = {
imageCommand: WorkbenchCommand | null;
videoCommand: WorkbenchCommand | null;
dispatchImage: (command: Omit<WorkbenchCommand, "nonce">) => void;
dispatchVideo: (command: Omit<WorkbenchCommand, "nonce">) => void;
tasks: WorkbenchGenerationTask[];
dispatchImage: (command: Omit<WorkbenchCommand, "nonce" | "taskId">) => string | undefined;
dispatchVideo: (command: Omit<WorkbenchCommand, "nonce" | "taskId">) => string | undefined;
updateTask: (id: string, patch: Partial<Pick<WorkbenchGenerationTask, "status" | "successCount" | "failCount" | "error">>) => void;
clearImageCommand: () => void;
clearVideoCommand: () => void;
};
@@ -25,8 +40,25 @@ const nextNonce = () => (nonce += 1);
export const useWorkbenchAgentStore = create<WorkbenchAgentStore>((set) => ({
imageCommand: null,
videoCommand: null,
dispatchImage: (command) => set({ imageCommand: { ...command, nonce: nextNonce() } }),
dispatchVideo: (command) => set({ videoCommand: { ...command, nonce: nextNonce() } }),
tasks: [],
dispatchImage: (command) => {
const commandNonce = nextNonce();
const task = command.run ? createTask("image", commandNonce, command.prompt) : undefined;
set((state) => ({ imageCommand: { ...command, nonce: commandNonce, taskId: task?.id }, tasks: task ? [task, ...state.tasks].slice(0, 30) : state.tasks }));
return task?.id;
},
dispatchVideo: (command) => {
const commandNonce = nextNonce();
const task = command.run ? createTask("video", commandNonce, command.prompt) : undefined;
set((state) => ({ videoCommand: { ...command, nonce: commandNonce, taskId: task?.id }, tasks: task ? [task, ...state.tasks].slice(0, 30) : state.tasks }));
return task?.id;
},
updateTask: (id, patch) => set((state) => ({ tasks: state.tasks.map((task) => (task.id === id ? { ...task, ...patch, updatedAt: new Date().toISOString() } : task)) })),
clearImageCommand: () => set({ imageCommand: null }),
clearVideoCommand: () => set({ videoCommand: null }),
}));
function createTask(kind: "image" | "video", commandNonce: number, prompt?: string): WorkbenchGenerationTask {
const now = new Date().toISOString();
return { id: `${kind}-${commandNonce}`, kind, status: "queued", prompt, createdAt: now, updatedAt: now };
}