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">
-        <h1 className="text-2xl font-medium pl-4">Thread History</h1>
+      <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">
+        <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}>
-        <SheetContent side="left" className="lg:hidden flex">
-          <SheetHeader>
-            <SheetTitle>Thread History</SheetTitle>
-          </SheetHeader>
-          <ThreadList
-            threads={threads}
-            onThreadClick={() => setChatHistoryOpen((o) => !o)}
-          />
-        </SheetContent>
-      </Sheet>
+      <div className="lg:hidden">
+        <Sheet
+          open={!!chatHistoryOpen && !isLargeScreen}
+          onOpenChange={(open) => {
+            if (isLargeScreen) return;
+            setChatHistoryOpen(open);
+          }}
+        >
+          <SheetContent side="left" className="lg:hidden flex">
+            <SheetHeader>
+              <SheetTitle>Thread History</SheetTitle>
+            </SheetHeader>
+            <ThreadList
+              threads={threads}
+              onThreadClick={() => setChatHistoryOpen((o) => !o)}
+            />
+          </SheetContent>
+        </Sheet>
+      </div>
     </>
   );
 }