fix: router issues

package.json

@@ -36,7 +36,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.0.1",
-    "react-router-dom": "^7.2.0",
+    "react-router-dom": "^6.17.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",

src/components/thread/index.tsx

@@ -17,23 +17,6 @@ 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?" },
-//   {
-//     type: "ai",
-//     content: `Hello! I can assist you with a variety of tasks, including:
-
-// 1. **Answering Questions**: I can provide information on a wide range of topics, from science and history to technology and culture.
-// 2. **Writing Assistance**: I can help you draft emails, essays, reports, and creative writing pieces.
-// 3. **Learning Support**: I can explain concepts, help with homework, and provide study tips.
-// 4. **Language Help**: I can assist with translations, grammar, and vocabulary in multiple languages.
-// 5. **Recommendations**: I can suggest books, movies, recipes, and more based on your interests.
-// 6. **General Advice**: I can offer tips on various subjects, including productivity, wellness, and personal development.
-
-// If you have something specific in mind, feel free to ask!`,
-//   },
-// ];
-
 function Title({ className }: { className?: string }) {
   return (
     <div className={cn("flex gap-2 items-center", className)}>
@@ -43,21 +26,26 @@ function Title({ className }: { className?: string }) {
   );
 }
 
-function NewThread({ onClick }: { onClick: () => void }) {
-  const [_, setThreadId] = useQueryParam('threadId', StringParam);
+function NewThread() {
+  const [_, setThreadId] = useQueryParam("threadId", StringParam);
 
   return (
-    <TooltipIconButton tooltip="New thread" variant="ghost" onClick={() => setThreadId(null)}>
-      <SquarePen />
+    <TooltipIconButton
+      size="lg"
+      className="p-4"
+      tooltip="New thread"
+      variant="ghost"
+      onClick={() => setThreadId(null)}
+    >
+      <SquarePen className="size-5" />
     </TooltipIconButton>
-  )
+  );
 }
 
 export function Thread() {
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
   const stream = useStreamContext();
-  // const messages = [...dummyMessages, ...stream.messages];
   const messages = stream.messages;
   const isLoading = stream.isLoading;
   const prevMessageLength = useRef(0);
@@ -99,18 +87,6 @@ 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),
@@ -130,8 +106,8 @@ export function Thread() {
           </div>
         )}
         {chatStarted && (
-          <div className="hidden md:flex gap-3 absolute top-4 right-4">
-            <NewThread onClick={handleNewThread} />
+          <div className="hidden md:flex items-center gap-3 absolute top-4 right-4">
+            <NewThread />
             <Title />
           </div>
         )}

src/main.tsx

@@ -3,12 +3,15 @@ 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';
+import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
+import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")!).render(
+  <BrowserRouter>
     <QueryParamProvider adapter={ReactRouter6Adapter}>
       <StreamProvider>
         <App />
       </StreamProvider>
     </QueryParamProvider>
+  </BrowserRouter>,
 );

src/providers/Stream.tsx

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