fix: race condition after resumable stream ends (#986)

components/chat.tsx

@@ -18,6 +18,7 @@ import { toast } from './toast';
 import type { Session } from 'next-auth';
 import { useSearchParams } from 'next/navigation';
 import { useChatVisibility } from '@/hooks/use-chat-visibility';
+import { useAutoResume } from '@/hooks/use-auto-resume';
 
 export function Chat({
   id,
@@ -54,6 +55,7 @@ export function Chat({
     stop,
     reload,
     experimental_resume,
+    data,
   } = useChat({
     id,
     initialMessages,
@@ -77,15 +79,6 @@ export function Chat({
     },
   });
 
-  useEffect(() => {
-    if (autoResume) {
-      experimental_resume();
-    }
-
-    // note: this hook has no dependencies since it only needs to run once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const searchParams = useSearchParams();
   const query = searchParams.get('query');
 
@@ -111,6 +104,14 @@ export function Chat({
   const [attachments, setAttachments] = useState<Array<Attachment>>([]);
   const isArtifactVisible = useArtifactSelector((state) => state.isVisible);
 
+  useAutoResume({
+    autoResume,
+    initialMessages,
+    experimental_resume,
+    data,
+    setMessages,
+  });
+
   return (
     <>
       <div className="flex flex-col min-w-0 h-dvh bg-background">