feat: Add thread history sheet

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" />