fix: Optimize the performance of stream data processing and add anti-… (#642)

* fix: Optimize the performance of stream data processing and add anti-shake and batch update mechanisms

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* 修复消息批量更新重复问题

- 将 pendingUpdates 从数组改为 Map，使用 message.id 作为键
- 避免在16ms窗口内多次更新同一消息导致的重复处理
- 优化了批量更新性能，减少冗余的映射操作

* fix lint error

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>

web/src/components/editor/generative/ai-selector.tsx

@@ -53,9 +53,28 @@ function useProseCompletion() {
 
         let fullText = "";
 
-        // Process the streaming response
+        // Process the streaming response with debounced updates
+        let chunkBuffer = "";
+        let updateTimer: NodeJS.Timeout | undefined;
+
+        const scheduleUpdate = () => {
+          if (updateTimer) clearTimeout(updateTimer);
+          updateTimer = setTimeout(() => {
+            if (chunkBuffer) {
+              fullText += chunkBuffer;
+              setCompletion(fullText);
+              chunkBuffer = "";
+            }
+          }, 16); // ~60fps
+        };
+
         for await (const chunk of response) {
-          fullText += chunk.data;
+          chunkBuffer += chunk.data;
+          scheduleUpdate();
+        }
+        // Final update
+        if (chunkBuffer) {
+          fullText += chunkBuffer;
           setCompletion(fullText);
         }