fix(agent): ensure image attachments retain thumbnails after history sync and prevent internal context from displaying in user messages

2026-07-30 04:44:28 +08:00 · 2026-07-29 15:17:10 +08:00
parent 88e86c0566
commit 5a607bea6c
11 changed files with 74 additions and 16 deletions
@@ -54,7 +54,7 @@ export function AgentChatTimeline({
    }, [messages, pendingTool, scrollToBottom, updateScrollState, waiting]);
    return (
        <div className="relative min-h-0 flex-1">
-            <div ref={listRef} className="thin-scrollbar h-full space-y-4 overflow-y-auto px-4 pb-12 pt-4" onScroll={updateScrollState}>
+            <div ref={listRef} className="thin-scrollbar h-full select-text space-y-4 overflow-y-auto px-4 pb-12 pt-4" onScroll={updateScrollState}>
                {messages.map((item) => (
                    isPlanMessage(item) ? null : <AgentChatMessageRow key={item.id} item={item} theme={theme} user={user} />
                ))}
@@ -128,4 +128,3 @@ function UsageNumber({ label, value, color }: { label: string; value: number; co
        </span>
    );
 }
-
@@ -475,14 +475,15 @@ export function normalizeHistoryMessages(messages: AgentChatItem[]) {
 }

 export function mergeHistoryAttachments(messages: AgentChatItem[], currentMessages: AgentChatItem[]) {
-    const currentUsers = currentMessages.filter((item) => item.role === "user").reverse();
-    let userIndex = 0;
+    const currentUsers = currentMessages.filter((item) => item.role === "user" && item.attachments?.length).reverse();
    return [...messages]
        .reverse()
        .map((item) => {
            if (item.role !== "user") return item;
-            const current = currentUsers[userIndex++];
-            return current?.attachments?.length ? { ...item, id: current.id, text: current.text, attachments: current.attachments } : item;
+            const index = currentUsers.findIndex((current) => current.text === item.text || current.historyText === item.text);
+            if (index < 0) return item;
+            const current = currentUsers.splice(index, 1)[0];
+            return { ...item, id: current.id, text: current.text, historyText: current.historyText, attachments: current.attachments };
        })
        .reverse();
 }
@@ -54,6 +54,7 @@ export function AgentPanel() {
        >
            <motion.aside
                className="relative flex h-full shrink-0 flex-col border-l"
+                data-canvas-shortcuts-ignore
                initial={{ x: 48 }}
                animate={{ x: panelClosing ? 28 : 0 }}
                transition={{ duration: resizing ? 0 : PANEL_MOTION_SECONDS, ease: [0.22, 1, 0.36, 1] }}
@@ -9,6 +9,7 @@ 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 { deleteAgentThreadMessages, readAgentUserMessages, saveAgentUserMessage } from "@/services/agent-chat-storage";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useShallow } from "zustand/react/shallow";
 import { useAgentStore, type AgentCanvasContext, type AgentChatItem, type AgentPendingToolCall, type AgentThreadSummary } from "@/stores/use-agent-store";
@@ -123,12 +124,14 @@ export function LocalAgentPanel({ embedded, headless, autoConnect }: { embedded?
        try {
            const currentThreadId = useAgentStore.getState().activeThreadId;
            const currentThreadRequest = currentThreadId && !skipHistory ? fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(currentThreadId)}`).catch(() => null) : null;
+            const storedMessagesRequest = currentThreadId && !skipHistory ? readAgentUserMessages(currentThreadId) : null;
            const data = await fetchAgentJson<AgentThreadsResponse>(endpoint, token, `/agent/codex/threads`);
            let nextMessages: AgentChatItem[] = [];
            if (currentThreadId && !skipHistory) {
                let thread = await currentThreadRequest;
                thread ||= await fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(currentThreadId)}`);
-                nextMessages = mergeHistoryAttachments(normalizeHistoryMessages(thread.messages || []), useAgentStore.getState().messages);
+                const storedMessages = (await storedMessagesRequest) || [];
+                nextMessages = mergeHistoryAttachments(normalizeHistoryMessages(thread.messages || []), [...storedMessages, ...useAgentStore.getState().messages]);
            }
            if (sequence !== loadThreadsSequenceRef.current) return;
            setAgentState({ threads: data.data || [], workspacePath: data.workspace?.workspacePath || "", ...(skipHistory ? {} : { messages: nextMessages }) });
@@ -282,6 +285,7 @@ export function LocalAgentPanel({ embedded, headless, autoConnect }: { embedded?
        }
        setAgentState({ activity: "发送中", sending: true });
        const messageId = createId();
+        const userText = text || `发送了 ${files.length} 张图片`;
        let threadId = useAgentStore.getState().activeThreadId;
        try {
            if (!threadId) {
@@ -290,14 +294,15 @@ export function LocalAgentPanel({ embedded, headless, autoConnect }: { embedded?
                if (!threadId) throw new Error("新建对话失败");
                setAgentState({ activeThreadId: threadId, messages: [], tokenUsage: null });
            }
-            addMessage({ id: messageId, role: "user", text: text || "发送了图片", attachments: files });
+            addMessage({ id: messageId, role: "user", text: userText, historyText: requestPrompt, attachments: files });
+            if (files.length) void saveAgentUserMessage(threadId, { id: messageId, role: "user", text: userText, historyText: requestPrompt, attachments: files }).catch(() => undefined);
            addEventLog("发送任务", `${compactText(text) || "仅附件"}${files.length ? ` · 附件 ${files.length}` : ""}`);
            const data = await fetchAgentJson<{ threadId?: string }>(endpoint, token, "/agent/codex/turn", {
                method: "POST",
                headers: { "content-type": "application/json" },
                body: JSON.stringify({
                    prompt: requestPrompt,
-                    messageText: text || `发送了 ${files.length} 张图片`,
+                    messageText: userText,
                    messageId,
                    clientId: clientIdRef.current,
                    threadId,
@@ -541,8 +546,13 @@ export function LocalAgentPanel({ embedded, headless, autoConnect }: { embedded?
        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 || []), tokenUsage: null, activeTab: "chat", activity: "已恢复会话" });
+            const current = useAgentStore.getState();
+            const [data, storedMessages] = await Promise.all([
+                fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/resume`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) }),
+                readAgentUserMessages(threadId),
+            ]);
+            const localMessages = current.activeThreadId === threadId ? current.messages : [];
+            setAgentState({ activeThreadId: data.thread?.id || threadId, messages: mergeHistoryAttachments(normalizeHistoryMessages(data.messages || []), [...storedMessages, ...localMessages]), tokenUsage: null, activeTab: "chat", activity: "已恢复会话" });
        } catch (error) {
            addEventLog("恢复对话失败", error);
            message.error(error instanceof Error ? error.message : "恢复对话失败");
@@ -556,6 +566,7 @@ export function LocalAgentPanel({ embedded, headless, autoConnect }: { embedded?
        setAgentState({ loadingThreads: true });
        try {
            await Promise.all(threadIds.map((threadId) => fetchAgentJson(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/delete`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) })));
+            void deleteAgentThreadMessages(threadIds).catch(() => undefined);
            const current = useAgentStore.getState();
            const deleted = new Set(threadIds);
            setAgentState({
@@ -252,7 +252,7 @@ export function CanvasNodeInfoModal({ node, open, onClose }: { node: CanvasNodeD
    return (
        <Modal className="canvas-node-info-modal" title={title} open={open && Boolean(node)} centered footer={null} onCancel={onClose}>
            {node ? (
-                <div className="h-[56vh] min-h-[360px] text-sm">
+                <div className="h-[56vh] min-h-[360px] select-text text-sm" data-canvas-shortcuts-ignore>
                    {view === "info" ? (
                        <div className="thin-scrollbar h-full space-y-3 overflow-auto pr-1">
                            <InfoRow label="ID" value={node.id} />
@@ -1382,11 +1382,13 @@ function InfiniteCanvasPage() {
    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            const target = event.target instanceof Element ? event.target : null;
-            if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || target?.closest("[contenteditable='true'],[data-canvas-no-zoom]")) return;
+            if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || target?.closest("[contenteditable='true'],[data-canvas-no-zoom],[data-canvas-shortcuts-ignore]")) return;

            const key = event.key.toLowerCase();
            const isModifierShortcut = event.metaKey || event.ctrlKey;

+            if (isModifierShortcut && key === "c" && window.getSelection()?.toString()) return;
+
            if (isModifierShortcut && !event.altKey && key === "z") {
                event.preventDefault();
                if (event.shiftKey) redoCanvas();
@@ -0,0 +1,38 @@
+import localforage from "localforage";
+
+import { upscaleDataUrl } from "@/lib/canvas/canvas-image-data";
+import type { AgentAttachment, AgentChatItem } from "@/stores/use-agent-store";
+
+export type StoredAgentUserMessage = Pick<AgentChatItem, "id" | "text" | "attachments"> & { role: "user"; historyText: string };
+
+const store = localforage.createInstance({ name: "infinite-canvas", storeName: "agent_chat_messages" });
+const indexKey = (threadId: string) => `thread:${threadId}`;
+const messageKey = (threadId: string, messageId: string) => `message:${threadId}:${messageId}`;
+
+export async function saveAgentUserMessage(threadId: string, message: StoredAgentUserMessage) {
+    if (!message.attachments?.length) return;
+    const attachments = await Promise.all((message.attachments || []).map(createThumbnail));
+    await store.setItem(messageKey(threadId, message.id), { ...message, attachments });
+    const ids = (await store.getItem<string[]>(indexKey(threadId))) || [];
+    if (!ids.includes(message.id)) await store.setItem(indexKey(threadId), [...ids, message.id]);
+}
+
+export async function readAgentUserMessages(threadId: string) {
+    const ids = (await store.getItem<string[]>(indexKey(threadId))) || [];
+    return (await Promise.all(ids.map((id) => store.getItem<StoredAgentUserMessage>(messageKey(threadId, id))))).filter((item): item is StoredAgentUserMessage => Boolean(item));
+}
+
+export async function deleteAgentThreadMessages(threadIds: string[]) {
+    await Promise.all(
+        threadIds.map(async (threadId) => {
+            const ids = (await store.getItem<string[]>(indexKey(threadId))) || [];
+            await Promise.all(ids.map((id) => store.removeItem(messageKey(threadId, id))));
+            await store.removeItem(indexKey(threadId));
+        }),
+    );
+}
+
+async function createThumbnail(attachment: AgentAttachment): Promise<AgentAttachment> {
+    const dataUrl = Math.max(attachment.width, attachment.height) > 512 ? await upscaleDataUrl(attachment.dataUrl, { targetLongEdge: 512, algorithm: "high" }) : attachment.dataUrl;
+    return { ...attachment, size: dataUrl.length, url: dataUrl, dataUrl };
+}
@@ -4,7 +4,7 @@ import type { CanvasAgentOp, CanvasAgentSnapshot } from "@/lib/canvas/canvas-age

 export type AgentChatRole = "user" | "assistant" | "system" | "tool" | "error";
 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 AgentChatItem = { id: string; role: AgentChatRole; title?: string; text: string; historyText?: 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> };
 export type AgentCanvasContext = { snapshot: CanvasAgentSnapshot; applyOps: (ops?: CanvasAgentOp[]) => CanvasAgentSnapshot; undoOps: () => CanvasAgentSnapshot | null; canUndo: boolean };