use helper for threadId creation

Author: ianmacartney

example/ui/chat/ChatBasic.tsx

@@ -8,55 +8,30 @@ import {
   useThreadMessages,
   type UIMessage,
 } from "@convex-dev/agent/react";
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import { cn } from "../lib/utils";
-
-function getThreadIdFromHash() {
-  return window.location.hash.replace(/^#/, "") || undefined;
-}
+import { useDemoThread } from "@/hooks/use-demo-thread";
 
 export default function ChatBasic() {
-  const createThread = useMutation(api.threads.createNewThread);
-  const [threadId, setThreadId] = useState<string | undefined>(
-    typeof window !== "undefined" ? getThreadIdFromHash() : undefined,
-  );
+  const {
+    threadId,
+    resetThread: newThread,
+    setThreadId,
+  } = useDemoThread("Basic Chat Example");
 
   // Fetch thread title if threadId exists
   const threadDetails = useQuery(
     api.threads.getThreadDetails,
     threadId ? { threadId } : "skip",
   );
 
-  // Fetch all threads (internal API)
-  // For demo, hardcode userId as in backend
+  // Fetch all threads
   const threads = usePaginatedQuery(
     api.threads.listThreads,
     {},
     { initialNumItems: 20 },
   );
 
-  // Listen for hash changes
-  useEffect(() => {
-    function onHashChange() {
-      setThreadId(getThreadIdFromHash());
-    }
-    window.addEventListener("hashchange", onHashChange);
-    return () => window.removeEventListener("hashchange", onHashChange);
-  }, []);
-
-  // Reset handler: create a new thread and update hash
-  const newThread = useCallback(() => {
-    void createThread({ title: "Fresh thread" }).then((newId) => {
-      window.location.hash = newId;
-      setThreadId(newId);
-    });
-  }, [createThread]);
-
-  // On mount or when threadId changes, if no threadId, create one and set hash
-  useEffect(() => {
-    if (!threadId) newThread();
-  }, [newThread, threadId]);
-
   return (
     <div className="h-full flex flex-col">
       <header className="bg-white/80 backdrop-blur-sm p-4 flex justify-between items-center border-b">
@@ -106,7 +81,7 @@ export default function ChatBasic() {
           </div>
           <div className="px-4 py-2">
             <button
-              onClick={newThread}
+              onClick={() => void newThread()}
               className="w-full flex justify-center items-center gap-2 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
               type="button"
             >

example/ui/chat/ChatStreaming.tsx

@@ -7,43 +7,12 @@ import {
   useUIMessages,
   type UIMessage,
 } from "@convex-dev/agent/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
-
-function getThreadIdFromHash() {
-  return window.location.hash.replace(/^#/, "") || undefined;
-}
+import { useDemoThread } from "@/hooks/use-demo-thread";
 
 export default function ChatStreaming() {
-  const createThread = useMutation(api.threads.createNewThread);
-  const [threadId, setThreadId] = useState<string | undefined>(
-    typeof window !== "undefined" ? getThreadIdFromHash() : undefined,
-  );
-
-  // Listen for hash changes
-  useEffect(() => {
-    function onHashChange() {
-      setThreadId(getThreadIdFromHash());
-    }
-    window.addEventListener("hashchange", onHashChange);
-    return () => window.removeEventListener("hashchange", onHashChange);
-  }, []);
-
-  const resetThread = useCallback(() => {
-    void createThread({
-      title: "Streaming Chat Example",
-    }).then((newId) => {
-      window.location.hash = newId;
-      setThreadId(newId);
-    });
-  }, [createThread]);
-
-  // On mount or when threadId changes, if no threadId, create one and set hash
-  useEffect(() => {
-    if (!threadId) {
-      void resetThread();
-    }
-  }, [resetThread, threadId]);
+  const { threadId, resetThread } = useDemoThread("Streaming Chat Example");
 
   return (
     <>
@@ -54,7 +23,7 @@ export default function ChatStreaming() {
       </header>
       <div className="h-[calc(100vh-8rem)] flex flex-col bg-gray-50">
         {threadId ? (
-          <Story threadId={threadId} reset={resetThread} />
+          <Story threadId={threadId} reset={() => void resetThread()} />
         ) : (
           <div className="flex-1 flex items-center justify-center text-gray-500">
             Loading...

example/ui/hooks/use-demo-thread.ts

@@ -33,7 +33,7 @@ export function useDemoThread(title: string) {
     }
   }, [resetThread, threadId]);
 
-  return { threadId, resetThread };
+  return { threadId, resetThread, setThreadId };
 }
 
 function getThreadIdFromHash() {