wip

src/components/AIChatHistory/ListChatHistory.tsx

@@ -5,7 +5,12 @@ import {
 } from '../../queries/chat-history';
 import { queryClient } from '../../stores/query-client';
 import { ChatHistoryItem } from './ChatHistoryItem';
-import { Loader2Icon, PlusIcon, SearchIcon } from 'lucide-react';
+import {
+  AlertCircleIcon,
+  Loader2Icon,
+  PlusIcon,
+  SearchIcon,
+} from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounceValue } from '../../hooks/use-debounce';
@@ -21,8 +26,16 @@ export function ListChatHistory(props: ListChatHistoryProps) {
   const { activeChatHistoryId, onChatHistoryClick, onDelete } = props;
 
   const [query, setQuery] = useState('');
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
-    useInfiniteQuery(listChatHistoryOptions({ query }), queryClient);
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = useInfiniteQuery(listChatHistoryOptions({ query }), queryClient);
 
   const groupedChatHistory = useMemo(() => {
     const today = DateTime.now().startOf('day');
@@ -65,72 +78,75 @@ export function ListChatHistory(props: ListChatHistoryProps) {
     );
   }, [data?.pages]);
 
-  if (isLoading) {
-    return <ListChatHistorySkeleton />;
-  }
-
   return (
     <div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2">
-      <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>
+      {isLoading && <ListChatHistorySkeleton />}
+      {!isLoading && isError && <ErrorState error={error} />}
 
-      <SearchInput onSearch={setQuery} isLoading={isLoading} />
-
-      <div className="mt-6 space-y-4">
-        {Object.entries(groupedChatHistory ?? {}).map(([key, value]) => {
-          if (value.histories.length === 0) {
-            return null;
-          }
-
-          return (
-            <div key={key}>
-              <h2 className="ml-2 text-xs text-gray-500">{value.title}</h2>
-
-              <ul className="mt-1 space-y-0.5">
-                {value.histories.map((chatHistory) => {
-                  return (
-                    <ChatHistoryItem
-                      key={chatHistory._id}
-                      chatHistory={chatHistory}
-                      isActive={activeChatHistoryId === chatHistory._id}
-                      onChatHistoryClick={onChatHistoryClick}
-                      onDelete={() => {
-                        onDelete?.(chatHistory._id);
-                      }}
-                    />
-                  );
-                })}
-              </ul>
-            </div>
-          );
-        })}
-      </div>
-
-      {hasNextPage && (
-        <div className="mt-4">
+      {!isLoading && !isError && (
+        <>
           <button
-            className="flex w-full items-center justify-center gap-2 text-sm text-gray-500 hover:text-black"
+            className="flex w-full items-center justify-center gap-2 rounded-lg bg-black p-2 text-sm text-white"
             onClick={() => {
-              fetchNextPage();
+              onChatHistoryClick(null);
             }}
-            disabled={isFetchingNextPage}
           >
-            {isFetchingNextPage && (
-              <>
-                <Loader2Icon className="h-4 w-4 animate-spin" />
-                Loading more...
-              </>
-            )}
-            {!isFetchingNextPage && 'Load More'}
+            <PlusIcon className="h-4 w-4" />
+            <span className="text-sm">New Chat</span>
           </button>
-        </div>
+
+          <SearchInput onSearch={setQuery} isLoading={isLoading} />
+
+          <div className="mt-6 space-y-4">
+            {Object.entries(groupedChatHistory ?? {}).map(([key, value]) => {
+              if (value.histories.length === 0) {
+                return null;
+              }
+
+              return (
+                <div key={key}>
+                  <h2 className="ml-2 text-xs text-gray-500">{value.title}</h2>
+
+                  <ul className="mt-1 space-y-0.5">
+                    {value.histories.map((chatHistory) => {
+                      return (
+                        <ChatHistoryItem
+                          key={chatHistory._id}
+                          chatHistory={chatHistory}
+                          isActive={activeChatHistoryId === chatHistory._id}
+                          onChatHistoryClick={onChatHistoryClick}
+                          onDelete={() => {
+                            onDelete?.(chatHistory._id);
+                          }}
+                        />
+                      );
+                    })}
+                  </ul>
+                </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>
+          )}
+        </>
       )}
     </div>
   );
@@ -180,3 +196,21 @@ function SearchInput(props: SearchInputProps) {
     </form>
   );
 }
+
+type ErrorStateProps = {
+  error: Error | null;
+};
+
+function ErrorState(props: ErrorStateProps) {
+  const { error } = props;
+
+  return (
+    <div className="mt-10 flex flex-col items-center justify-center text-center">
+      <AlertCircleIcon className="h-8 w-8 text-red-500" />
+      <h3 className="mt-4 text-sm font-medium text-gray-900">
+        Something went wrong
+      </h3>
+      <p className="mt-0.5 text-xs text-gray-500">{error?.message}</p>
+    </div>
+  );
+}

src/components/AIChatHistory/ListChatHistorySkeleton.tsx

@@ -1,6 +1,6 @@
 export function ListChatHistorySkeleton() {
   return (
-    <div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2">
+    <>
       <div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
 
       <div className="relative mt-2">
@@ -25,6 +25,6 @@ export function ListChatHistorySkeleton() {
           </div>
         ))}
       </div>
-    </div>
+    </>
   );
 }