From b574f1ebf5779b992c0eb623a87e9dfc0517eb93 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 10 Jun 2025 13:21:12 +0600
Subject: [PATCH] wip

---
 .../AIChatHistory/ListChatHistory.tsx         | 80 ++++++++++---------
 .../AIChatHistory/ListChatHistorySkeleton.tsx | 26 +++---
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/components/AIChatHistory/ListChatHistory.tsx b/src/components/AIChatHistory/ListChatHistory.tsx
index 39de0587d..b2d661076 100644
--- a/src/components/AIChatHistory/ListChatHistory.tsx
+++ b/src/components/AIChatHistory/ListChatHistory.tsx
@@ -101,7 +101,7 @@ export function ListChatHistory(props: ListChatHistoryProps) {
   return (
     <div
       className={cn(
-        'w-[255px] shrink-0 border-r border-gray-200 bg-white p-2',
+        'flex w-[255px] shrink-0 flex-col justify-start border-r border-gray-200 bg-white p-2',
         !isOpen && 'hidden',
       )}
     >
@@ -110,31 +110,33 @@ export function ListChatHistory(props: ListChatHistoryProps) {
 
       {!isLoading && !isError && (
         <>
-          <div className="mb-4 flex items-center justify-between">
-            <h1 className="font-medium text-gray-900">Chat History</h1>
+          <div>
+            <div className="mb-4 flex items-center justify-between">
+              <h1 className="font-medium text-gray-900">Chat History</h1>
+              <button
+                className="flex size-8 items-center justify-center rounded-lg p-1 hover:bg-gray-100"
+                onClick={() => {
+                  setIsOpen(false);
+                }}
+              >
+                <PanelLeftCloseIcon className="h-4.5 w-4.5" />
+              </button>
+            </div>
+
             <button
-              className="flex size-8 items-center justify-center rounded-lg p-1 hover:bg-gray-100"
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-black p-2 text-sm text-white"
               onClick={() => {
-                setIsOpen(false);
+                onChatHistoryClick(null);
               }}
             >
-              <PanelLeftCloseIcon className="h-4.5 w-4.5" />
+              <PlusIcon className="h-4 w-4" />
+              <span className="text-sm">New Chat</span>
             </button>
+
+            <SearchInput onSearch={setQuery} isLoading={isLoading} />
           </div>
 
-          <button
-            className="flex w-full items-center justify-center gap-2 rounded-lg bg-black p-2 text-sm text-white"
-            onClick={() => {
-              onChatHistoryClick(null);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            <span className="text-sm">New Chat</span>
-          </button>
-
-          <SearchInput onSearch={setQuery} isLoading={isLoading} />
-
-          <div className="mt-6 space-y-4">
+          <div className="scrollbar-track-transparent scrollbar scrollbar-thumb-gray-300 -mx-2 mt-6 grow space-y-4 overflow-y-auto px-2">
             {Object.entries(groupedChatHistory ?? {}).map(([key, value]) => {
               if (value.histories.length === 0) {
                 return null;
@@ -162,27 +164,27 @@ export function ListChatHistory(props: ListChatHistoryProps) {
                 </div>
               );
             })}
-          </div>
 
-          {hasNextPage && (
-            <div className="mt-4">
-              <button
-                className="flex w-full items-center justify-center gap-2 text-sm text-gray-500 hover:text-black"
-                onClick={() => {
-                  fetchNextPage();
-                }}
-                disabled={isFetchingNextPage}
-              >
-                {isFetchingNextPage && (
-                  <>
-                    <Loader2Icon className="h-4 w-4 animate-spin" />
-                    Loading more...
-                  </>
-                )}
-                {!isFetchingNextPage && 'Load More'}
-              </button>
-            </div>
-          )}
+            {hasNextPage && (
+              <div className="mt-4">
+                <button
+                  className="flex w-full items-center justify-center gap-2 text-sm text-gray-500 hover:text-black"
+                  onClick={() => {
+                    fetchNextPage();
+                  }}
+                  disabled={isFetchingNextPage}
+                >
+                  {isFetchingNextPage && (
+                    <>
+                      <Loader2Icon className="h-4 w-4 animate-spin" />
+                      Loading more...
+                    </>
+                  )}
+                  {!isFetchingNextPage && 'Load More'}
+                </button>
+              </div>
+            )}
+          </div>
         </>
       )}
     </div>
diff --git a/src/components/AIChatHistory/ListChatHistorySkeleton.tsx b/src/components/AIChatHistory/ListChatHistorySkeleton.tsx
index de3108825..219ddff47 100644
--- a/src/components/AIChatHistory/ListChatHistorySkeleton.tsx
+++ b/src/components/AIChatHistory/ListChatHistorySkeleton.tsx
@@ -1,26 +1,28 @@
 export function ListChatHistorySkeleton() {
   return (
     <>
-      <div className="mb-4 flex items-center justify-between gap-2">
-        <div className="h-6 w-1/2 animate-pulse rounded bg-gray-200" />
+      <div>
+        <div className="mb-4 flex items-center justify-between gap-2">
+          <div className="h-6 w-1/2 animate-pulse rounded bg-gray-200" />
 
-        <div className="size-8 animate-pulse rounded-md bg-gray-200" />
-      </div>
+          <div className="size-8 animate-pulse rounded-md bg-gray-200" />
+        </div>
 
-      <div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
-
-      <div className="relative mt-2">
         <div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
-        <div className="absolute top-1/2 left-2.5 -translate-y-1/2">
-          <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
+
+        <div className="relative mt-2">
+          <div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
+          <div className="absolute top-1/2 left-2.5 -translate-y-1/2">
+            <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
+          </div>
         </div>
       </div>
 
-      <div className="mt-6 space-y-4">
+      <div className="scrollbar-track-transparent scrollbar scrollbar-thumb-gray-300 -mx-2 mt-6 grow space-y-4 overflow-y-auto px-2">
         {['Today', 'Last 7 Days', 'Older'].map((group) => (
           <div key={group}>
-            <div className="ml-2 h-4 w-16 animate-pulse rounded bg-gray-200" />
-            <ul className="mt-1 space-y-0.5 px-2">
+            <div className="h-4 w-16 animate-pulse rounded bg-gray-200" />
+            <ul className="mt-1 space-y-0.5">
               {[1, 2, 3].map((i) => (
                 <li
                   key={i}