feat: Allow for creating new threads

package.json

@@ -36,9 +36,11 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.0.1",
+    "react-router-dom": "^7.2.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
+    "use-query-params": "^2.2.1",
     "uuid": "^11.0.5",
     "zod": "^3.24.2"
   },

src/components/thread/index.tsx

@@ -13,6 +13,9 @@ import {
   ensureToolCallsHaveResponses,
 } from "@/lib/ensure-tool-responses";
 import { LangGraphLogoSVG } from "../icons/langgraph";
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { SquarePen } from "lucide-react";
+import { StringParam, useQueryParam } from "use-query-params";
 
 // const dummyMessages = [
 //   { type: "human", content: "Hi! What can you do?" },
@@ -40,6 +43,16 @@ function Title({ className }: { className?: string }) {
   );
 }
 
+function NewThread({ onClick }: { onClick: () => void }) {
+  const [_, setThreadId] = useQueryParam('threadId', StringParam);
+
+  return (
+    <TooltipIconButton tooltip="New thread" variant="ghost" onClick={() => setThreadId(null)}>
+      <SquarePen />
+    </TooltipIconButton>
+  )
+}
+
 export function Thread() {
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
@@ -86,6 +99,18 @@ export function Thread() {
     setInput("");
   };
 
+  const handleNewThread = () => {
+    stream.submit({
+      messages: [
+        {
+          id: uuidv4(),
+          type: "human",
+          content: "New thread",
+        },
+      ],
+    });
+  }
+
   const chatStarted = isLoading || messages.length > 0;
   const renderMessages = messages.filter(
     (m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX),
@@ -105,7 +130,8 @@ export function Thread() {
           </div>
         )}
         {chatStarted && (
-          <div className="hidden md:flex absolute top-4 right-4">
+          <div className="hidden md:flex gap-3 absolute top-4 right-4">
+            <NewThread onClick={handleNewThread} />
             <Title />
           </div>
         )}

src/main.tsx

@@ -2,9 +2,13 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 import { StreamProvider } from "./providers/Stream.tsx";
+import { QueryParamProvider } from "use-query-params";
+import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 
 createRoot(document.getElementById("root")!).render(
+  <QueryParamProvider adapter={ReactRouter6Adapter}>
     <StreamProvider>
       <App />
-  </StreamProvider>,
+    </StreamProvider>
+  </QueryParamProvider>
 );

src/providers/Stream.tsx

@@ -1,10 +1,11 @@
 import React, { createContext, useContext, ReactNode } from "react";
 import { useStream } from "@langchain/langgraph-sdk/react";
-import type { Message } from "@langchain/langgraph-sdk";
+import { Client, type Message } from "@langchain/langgraph-sdk";
 import type {
   UIMessage,
   RemoveUIMessage,
 } from "@langchain/langgraph-sdk/react-ui/types";
+import { useQueryParam, StringParam } from 'use-query-params';
 
 const useTypedStream = useStream<
   { messages: Message[]; ui: UIMessage[] },
@@ -23,9 +24,13 @@ const StreamContext = createContext<StreamContextType | undefined>(undefined);
 export const StreamProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
+  const [threadId, setThreadId] = useQueryParam('threadId', StringParam);
+
   const streamValue = useTypedStream({
     apiUrl: "http://localhost:2024",
     assistantId: "agent",
+    threadId: threadId || "",
+    onThreadId: setThreadId,
   });
 
   return (