chore: add threads support

Author: jfromaniello

package-lock.json

@@ -49,6 +49,7 @@
     "ai": "^4.3.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "nuqs": "^2.4.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwind-merge": "^3.2.0",

package.json

@@ -4,6 +4,7 @@ import { useAgentChat } from "agents/ai-react";
 import type { Message } from "@ai-sdk/react";
 import { APPROVAL } from "./shared";
 import type { tools } from "./tools";
+import { useQueryState } from "nuqs";
 
 // Component imports
 import { Button } from "@/components/button/Button";
@@ -21,14 +22,17 @@ import {
   Robot,
   Sun,
   Trash,
+  FilePlus,
 } from "@phosphor-icons/react";
+import { generateShortId } from "./lib/utils";
 
 // List of tools that require human confirmation
 const toolsRequiringConfirmation: (keyof typeof tools)[] = [
   "getWeatherInformation",
 ];
 
 export default function Chat() {
+  const [ thread, setThread ] = useQueryState("thread");
   const [theme, setTheme] = useState<"dark" | "light">(() => {
     // Check localStorage first, default to dark if not found
     const savedTheme = localStorage.getItem("theme");
@@ -60,13 +64,24 @@ export default function Chat() {
     scrollToBottom();
   }, [scrollToBottom]);
 
+  useEffect(() => {
+    if (thread) return;
+    createNewThread();
+  }, [thread]);
+
   const toggleTheme = () => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
   };
 
+  const createNewThread = () => {
+    const newThread = generateShortId();
+    setThread(newThread);
+  };
+
   const agent = useAgent({
     agent: "chat",
+    name: thread ?? undefined,
   });
 
   const {
@@ -101,6 +116,10 @@ export default function Chat() {
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   };
 
+  if (!thread) {
+    return <></>;
+  }
+
   return (
     <div className="h-[100vh] w-full p-4 flex justify-center items-center bg-fixed overflow-hidden">
       <HasOpenAIKey />
@@ -152,6 +171,18 @@ export default function Chat() {
             size="md"
             shape="square"
             className="rounded-full h-9 w-9"
+            tooltip={"New Thread"}
+            onClick={createNewThread}
+          >
+            <FilePlus size={20} />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="md"
+            shape="square"
+            className="rounded-full h-9 w-9"
+            tooltip={"Clear History"}
             onClick={clearHistory}
           >
             <Trash size={20} />

src/app.tsx

@@ -2,13 +2,16 @@ import "./styles.css";
 import { createRoot } from "react-dom/client";
 import App from "./app";
 import { Providers } from "@/providers";
+import { NuqsAdapter } from 'nuqs/adapters/react';
 
 const root = createRoot(document.getElementById("app")!);
 
 root.render(
   <Providers>
     <div className="bg-neutral-50 text-base text-neutral-900 antialiased transition-colors selection:bg-blue-700 selection:text-white dark:bg-neutral-950 dark:text-neutral-100">
-      <App />
+      <NuqsAdapter>
+        <App />
+      </NuqsAdapter>
     </div>
   </Providers>
 );

src/client.tsx

@@ -4,3 +4,8 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function generateShortId(length = 8) {
+  const bytes = crypto.getRandomValues(new Uint8Array(length));
+  return btoa(String.fromCharCode(...bytes)).replace(/[^a-zA-Z0-9]/g, '').slice(0, length);
+}