fix: 使用 requestAnimationFrame 立即添加消息

问题：延迟到 onFinish 处理消息导致消息被 useChat 重置
解决：使用 requestAnimationFrame 在收到消息时立即添加，避免延迟

Co-authored-by: Cursor <cursoragent@cursor.com>

components/chat.tsx

@@ -69,8 +69,6 @@ export function Chat({
   // 🆕 标记是否已经尝试刷新过（避免无限刷新）
   const hasTriedRefreshRef = useRef(false);
   
-  // 🆕 存储待处理的 appendMessage（避免与 useChat 内部状态冲突）
-  const pendingAppendMessagesRef = useRef<any[]>([]);
   
   // 🆕 跟踪是否正在生成图片（用于占位图显示）
   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) {