feat: Better sidebar

src/components/thread/history/index.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { useThreads } from "@/providers/Thread";
 import { Thread } from "@langchain/langgraph-sdk";
 import { useEffect } from "react";
+
 import { getContentString } from "../utils";
 import { useQueryParam, StringParam, BooleanParam } from "use-query-params";
 import {
@@ -11,6 +12,9 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { PanelRightOpen } from "lucide-react";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 function ThreadList({
   threads,
@@ -22,7 +26,7 @@ function ThreadList({
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
 
   return (
-    <div className="h-full flex flex-col gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+    <div className="h-full flex flex-col w-full gap-2 items-start justify-start overflow-y-scroll [&::-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 (
@@ -36,10 +40,10 @@ function ThreadList({
           itemText = getContentString(firstMessage.content);
         }
         return (
-          <div key={t.thread_id} className="w-full">
+          <div key={t.thread_id} className="w-full px-1">
             <Button
               variant="ghost"
-              className="truncate text-left items-start justify-start w-[264px]"
+              className="text-left items-start justify-start font-normal w-[280px]"
               onClick={(e) => {
                 e.preventDefault();
                 onThreadClick?.(t.thread_id);
@@ -47,7 +51,7 @@ function ThreadList({
                 setThreadId(t.thread_id);
               }}
             >
-              {itemText}
+              <p className="truncate text-ellipsis">{itemText}</p>
             </Button>
           </div>
         );
@@ -58,15 +62,16 @@ function ThreadList({
 
 function ThreadHistoryLoading() {
   return (
-    <div className="h-full flex flex-col gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+    <div className="h-full flex flex-col w-full gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
       {Array.from({ length: 30 }).map((_, i) => (
-        <Skeleton key={`skeleton-${i}`} className="w-[264px] h-10" />
+        <Skeleton key={`skeleton-${i}`} className="w-[280px] h-10" />
       ))}
     </div>
   );
 }
 
 export default function ThreadHistory() {
+  const isLargeScreen = useMediaQuery("(min-width: 1024px)");
   const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
     "chatHistoryOpen",
     BooleanParam,
@@ -86,25 +91,44 @@ export default function ThreadHistory() {
 
   return (
     <>
-      <div className="hidden lg: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">
+      <div className="hidden lg:flex flex-col border-r-[1px] border-slate-300 items-start justify-start gap-6 h-screen w-[300px] shrink-0 shadow-inner-right">
-        <h1 className="text-2xl font-medium pl-4">Thread History</h1>
+        <div className="flex items-center justify-between w-full p-2">
+          <Button
+            className="hover:bg-gray-100"
+            variant="ghost"
+            onClick={() => setChatHistoryOpen((p) => !p)}
+          >
+            <PanelRightOpen />
+          </Button>
+          <h1 className="text-xl font-semibold tracking-tight">
+            Thread History
+          </h1>
+        </div>
         {threadsLoading ? (
           <ThreadHistoryLoading />
         ) : (
           <ThreadList threads={threads} />
         )}
       </div>
-      <Sheet open={!!chatHistoryOpen} onOpenChange={setChatHistoryOpen}>
+      <div className="lg:hidden">
-        <SheetContent side="left" className="lg:hidden flex">
+        <Sheet
-          <SheetHeader>
+          open={!!chatHistoryOpen && !isLargeScreen}
-            <SheetTitle>Thread History</SheetTitle>
+          onOpenChange={(open) => {
-          </SheetHeader>
+            if (isLargeScreen) return;
-          <ThreadList
+            setChatHistoryOpen(open);
-            threads={threads}
+          }}
-            onThreadClick={() => setChatHistoryOpen((o) => !o)}
+        >
-          />
+          <SheetContent side="left" className="lg:hidden flex">
-        </SheetContent>
+            <SheetHeader>
-      </Sheet>
+              <SheetTitle>Thread History</SheetTitle>
+            </SheetHeader>
+            <ThreadList
+              threads={threads}
+              onThreadClick={() => setChatHistoryOpen((o) => !o)}
+            />
+          </SheetContent>
+        </Sheet>
+      </div>
     </>
   );
 }

src/components/thread/index.tsx

@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 import { ReactNode, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 import { useStreamContext } from "@/providers/Stream";
 import { useState, FormEvent } from "react";
@@ -24,6 +25,7 @@ import { BooleanParam, StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import ThreadHistory from "./history";
 import { toast } from "sonner";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 function StickyToBottomContent(props: {
   content: ReactNode;
@@ -65,12 +67,13 @@ function ScrollToBottom(props: { className?: string }) {
 
 export function Thread() {
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
-  const [_, setChatHistoryOpen] = useQueryParam(
+  const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
     "chatHistoryOpen",
     BooleanParam,
   );
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
+  const isLargeScreen = useMediaQuery("(min-width: 1024px)");
 
   const stream = useStreamContext();
   const messages = stream.messages;
@@ -166,16 +169,72 @@ export function Thread() {
 
   return (
     <div className="flex w-full h-screen overflow-hidden">
-      <ThreadHistory />
+      <div className="relative lg:flex hidden">
-      <div
+        <motion.div
+          className="absolute h-full border-r bg-white overflow-hidden z-20"
+          style={{ width: 300 }}
+          animate={
+            isLargeScreen
+              ? { x: chatHistoryOpen ? 0 : -300 }
+              : { x: chatHistoryOpen ? 0 : -300 }
+          }
+          initial={{ x: -300 }}
+          transition={
+            isLargeScreen
+              ? { type: "spring", stiffness: 300, damping: 30 }
+              : { duration: 0 }
+          }
+        >
+          <div className="relative h-full" style={{ width: 300 }}>
+            <ThreadHistory />
+          </div>
+        </motion.div>
+      </div>
+      <motion.div
         className={cn(
-          "flex-1 flex flex-col min-w-0 overflow-hidden",
+          "flex-1 flex flex-col min-w-0 overflow-hidden relative",
           !chatStarted && "grid-rows-[1fr]",
         )}
+        layout={isLargeScreen}
+        animate={{
+          marginLeft: chatHistoryOpen ? (isLargeScreen ? 300 : 0) : 0,
+          width: chatHistoryOpen
+            ? isLargeScreen
+              ? "calc(100% - 300px)"
+              : "100%"
+            : "100%",
+        }}
+        transition={
+          isLargeScreen
+            ? { type: "spring", stiffness: 300, damping: 30 }
+            : { duration: 0 }
+        }
       >
+        {!chatStarted && (
+          <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
+            {(!chatHistoryOpen || !isLargeScreen) && (
+              <Button
+                className="hover:bg-gray-100"
+                variant="ghost"
+                onClick={() => setChatHistoryOpen((p) => !p)}
+              >
+                <PanelRightOpen />
+              </Button>
+            )}
+          </div>
+        )}
         {chatStarted && (
           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <div className="flex gap-2 items-center justify-start">
+            <div className="flex items-center justify-start gap-2">
+              {(!chatHistoryOpen || !isLargeScreen) && (
+                <Button
+                  className="hover:bg-gray-100"
+                  variant="ghost"
+                  onClick={() => setChatHistoryOpen((p) => !p)}
+                >
+                  <PanelRightOpen />
+                </Button>
+              )}
               <button
                 className="flex gap-2 items-center cursor-pointer"
                 onClick={() => setThreadId(null)}
@@ -185,13 +244,6 @@ export function Thread() {
                   LangGraph Chat
                 </span>
               </button>
-              <Button
-                className="flex lg:hidden"
-                variant="ghost"
-                onClick={() => setChatHistoryOpen((p) => !p)}
-              >
-                <PanelRightOpen />
-              </Button>
             </div>
 
             <TooltipIconButton
@@ -254,7 +306,7 @@ export function Thread() {
 
                 <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
 
-                <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl">
+                <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl relative z-10">
                   <form
                     onSubmit={handleSubmit}
                     className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
@@ -288,7 +340,7 @@ export function Thread() {
             }
           />
         </StickToBottom>
-      </div>
+      </motion.div>
     </div>
   );
 }

src/hooks/useMediaQuery.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}

src/index.css

@@ -118,9 +118,11 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
+
   :root {
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;

tailwind.config.js

@@ -1,7 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx,js,jsx}",
+    "./agent/**/*.{ts,tsx,js,jsx}",
+  ],
   theme: {
     extend: {
       borderRadius: {