feat: Add thread history sheet

src/components/thread/history/index.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import { useThreads } from "@/hooks/useThreads";
+import { Thread } from "@langchain/langgraph-sdk";
+import { useEffect, useState } from "react";
+import { getContentString } from "../utils";
+import { useQueryParam, StringParam } from "use-query-params";
+
+export default function ThreadHistory() {
+  const [threads, setThreads] = useState<Thread[]>([]);
+  const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
+  const { getThreads } = useThreads();
+
+  useEffect(() => {
+    getThreads().then(setThreads).catch(console.error);
+  }, []);
+
+  return (
+    <>
+      <div className="flex flex-col border-r-[1px] border-slate-300 items-start justify-start gap-6 h-screen w-[300px] shrink-0 px-2 py-4 shadow-inner-right">
+        <h1 className="text-2xl font-medium pl-4">Thread History</h1>
+        <div className="h-full overflow-y-scroll flex flex-col gap-2 items-start justify-start [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+          {threads.map((t) => {
+            let itemText = t.thread_id;
+            if (
+              typeof t.values === "object" &&
+              t.values &&
+              "messages" in t.values &&
+              Array.isArray(t.values.messages) &&
+              t.values.messages?.length > 0
+            ) {
+              const firstMessage = t.values.messages[0];
+              itemText = getContentString(firstMessage.content);
+            }
+            return (
+              <div key={t.thread_id} className="w-full">
+                <Button
+                  variant="ghost"
+                  className="truncate text-left items-start justify-start w-[264px]"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (t.thread_id === threadId) return;
+                    setThreadId(t.thread_id);
+                  }}
+                >
+                  {itemText}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/thread/index.tsx

@@ -17,6 +17,7 @@ import { TooltipIconButton } from "./tooltip-icon-button";
 import { ArrowDown, LoaderCircle, SquarePen } from "lucide-react";
 import { StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import ThreadHistory from "./history";
 
 function StickyToBottomContent(props: {
   content: ReactNode;
@@ -122,10 +123,11 @@ export function Thread() {
   };
 
   return (
-    <div className="flex flex-col w-full h-screen overflow-hidden">
+    <div className="flex w-full h-screen overflow-hidden">
+      <ThreadHistory />
       <div
         className={cn(
-          "grow grid grid-rows-[auto_1fr]",
+          "flex-1 flex flex-col min-w-0 overflow-hidden",
           !threadId && "grid-rows-[1fr]",
         )}
       >
@@ -155,10 +157,10 @@ export function Thread() {
           </div>
         )}
 
-        <StickToBottom className="relative">
+        <StickToBottom className="relative flex-1 overflow-hidden">
           <StickyToBottomContent
             className={cn(
-              "absolute inset-0",
+              "absolute inset-0 overflow-auto",
               !threadId && "flex flex-col items-stretch mt-[25vh]",
               threadId && "grid grid-rows-[1fr_auto]",
             )}
@@ -196,7 +198,7 @@ export function Thread() {
                     <h1 className="text-2xl font-semibold tracking-tight">
                       LangGraph Chat
                     </h1>
-                  </div>
+                  </div> 
                 )}
 
                 <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />