diff --git a/components/chat.tsx b/components/chat.tsx index 5ecf348be..05b56a0cb 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -69,8 +69,6 @@ export function Chat({ // 🆕 标记是否已经尝试刷新过(避免无限刷新) const hasTriedRefreshRef = useRef(false); - // 🆕 存储待处理的 appendMessage(避免与 useChat 内部状态冲突) - const pendingAppendMessagesRef = useRef([]); // 🆕 跟踪是否正在生成图片(用于占位图显示) const [isGeneratingImageFlag, setIsGeneratingImageFlag] = useState(false); @@ -287,15 +285,13 @@ export function Chat({ } // 🆕 处理后端返回的自定义消息(用于图片/视频生成的非流式响应) - // 注意:不要在这里调用 setMessages,因为会与 useChat 内部状态冲突 - // 改为存储到待处理队列,在 onFinish 时统一处理 if (dataPart.type === "data-appendMessage") { try { const messageData = typeof dataPart.data === 'string' ? JSON.parse(dataPart.data) : dataPart.data; - console.log("[Chat] Received appendMessage (queued):", messageData); + console.log("[Chat] Received appendMessage:", messageData); // 🆕 检测是否包含 GENERATING_IMAGE 标记 const hasGeneratingMarker = messageData.parts?.some( @@ -319,8 +315,29 @@ export function Chat({ setIsGeneratingImageFlag(false); } - // 存储到待处理队列 - pendingAppendMessagesRef.current.push(messageData); + // 🆕 立即添加消息到状态,使用 requestAnimationFrame 避免与 useChat 冲突 + // 这比延迟到 onFinish 更可靠,因为用户需要立即看到对话消息 + requestAnimationFrame(() => { + setMessages((prevMessages) => { + // 检查消息是否已存在 + if (prevMessages.some(m => m.id === messageData.id)) { + console.log("[Chat] Message already exists, skipping:", messageData.id); + return prevMessages; + } + + const newMessage: any = { + id: messageData.id, + role: messageData.role, + content: messageData.parts?.[0]?.text || "", + createdAt: new Date(), + parts: messageData.parts || [], + attachments: [], + }; + + console.log("[Chat] Adding message via requestAnimationFrame:", messageData.id); + return [...prevMessages, newMessage]; + }); + }); // 🆕 收到消息,清除持久化状态 completeGeneration(); @@ -333,35 +350,7 @@ export function Chat({ mutate(unstable_serialize(getChatHistoryPaginationKey)); // 🆕 生成完成,清除持久化状态 completeGeneration(); - - // 🆕 处理待处理的 appendMessage(在流结束后安全地添加) - if (pendingAppendMessagesRef.current.length > 0) { - console.log("[Chat] Processing pending appendMessages:", pendingAppendMessagesRef.current.length); - const pendingMessages = [...pendingAppendMessagesRef.current]; - pendingAppendMessagesRef.current = []; - - // 使用 setTimeout 延迟处理,确保 useChat 内部状态已稳定 - setTimeout(() => { - setMessages((prevMessages) => { - let newMessages = [...prevMessages]; - for (const messageData of pendingMessages) { - if (!newMessages.some(m => m.id === messageData.id)) { - const newMessage: any = { - id: messageData.id, - role: messageData.role, - content: messageData.parts?.[0]?.text || "", - createdAt: new Date(), - parts: messageData.parts || [], - attachments: [], - }; - newMessages = [...newMessages, newMessage]; - } - } - console.log("[Chat] After processing pending messages:", newMessages.length); - return newMessages; - }); - }, 100); - } + console.log("[Chat] onFinish called"); }, onError: (error) => { if (error instanceof ChatSDKError) {