fix: add Message Processing Throttling to Prevent Browser Crashes (#848)

app/components/chat/Chat.client.tsx

@@ -21,6 +21,7 @@ import { debounce } from '~/utils/debounce';
 import { useSettings } from '~/lib/hooks/useSettings';
 import type { ProviderInfo } from '~/types/model';
 import { useSearchParams } from '@remix-run/react';
+import { createSampler } from '~/utils/sampler';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -77,6 +78,24 @@ export function Chat() {
   );
 }
 
+const processSampledMessages = createSampler(
+  (options: {
+    messages: Message[];
+    initialMessages: Message[];
+    isLoading: boolean;
+    parseMessages: (messages: Message[], isLoading: boolean) => void;
+    storeMessageHistory: (messages: Message[]) => Promise<void>;
+  }) => {
+    const { messages, initialMessages, isLoading, parseMessages, storeMessageHistory } = options;
+    parseMessages(messages, isLoading);
+
+    if (messages.length > initialMessages.length) {
+      storeMessageHistory(messages).catch((error) => toast.error(error.message));
+    }
+  },
+  50,
+);
+
 interface ChatProps {
   initialMessages: Message[];
   storeMessageHistory: (messages: Message[]) => Promise<void>;
@@ -169,11 +188,13 @@ export const ChatImpl = memo(
     }, []);
 
     useEffect(() => {
-      parseMessages(messages, isLoading);
-
-      if (messages.length > initialMessages.length) {
-        storeMessageHistory(messages).catch((error) => toast.error(error.message));
-      }
+      processSampledMessages({
+        messages,
+        initialMessages,
+        isLoading,
+        parseMessages,
+        storeMessageHistory,
+      });
     }, [messages, isLoading, parseMessages]);
 
     const scrollTextArea = () => {