From ab888e8f738df176e87e972e5f59a0355b6ed2e5 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 11 Jun 2025 14:45:20 +0100
Subject: [PATCH] Chat history UI

---
 .../AIChatHistory/AIChatHistory.tsx           | 160 +++++++++---------
 1 file changed, 81 insertions(+), 79 deletions(-)

diff --git a/src/components/AIChatHistory/AIChatHistory.tsx b/src/components/AIChatHistory/AIChatHistory.tsx
index 12982c9f2..1f365b623 100644
--- a/src/components/AIChatHistory/AIChatHistory.tsx
+++ b/src/components/AIChatHistory/AIChatHistory.tsx
@@ -61,91 +61,93 @@ export function AIChatHistory(props: AIChatHistoryProps) {
     setIsChatHistoryLoading(false);
   }, [hasError]);
 
+  if (isLoading || isBillingDetailsLoading) {
+    return (
+      <AIChatLayout>
+        <div className="relative flex grow">
+          <div className="absolute inset-0 z-20 flex items-center justify-center">
+            <Loader2Icon className="h-8 w-8 animate-spin stroke-[2.5] text-gray-400/80" />
+          </div>
+        </div>
+      </AIChatLayout>
+    );
+  }
+
   return (
     <AIChatLayout>
       <div className="relative flex grow">
-        {showGlobalLoader && (
-          <div className="absolute inset-0 z-20 flex items-center justify-center">
-            <Loader2Icon className="h-8 w-8 animate-spin stroke-[2.5]" />
-          </div>
+        {isPaidUser && (
+          <ListChatHistory
+            activeChatHistoryId={chatHistoryId}
+            onChatHistoryClick={(chatHistoryId) => {
+              setKeyTrigger((keyTrigger) => keyTrigger + 1);
+
+              if (chatHistoryId === null) {
+                setChatHistoryId(undefined);
+                window.history.replaceState(null, '', '/ai/chat');
+                return;
+              }
+
+              // so that we can show the loading state when the chat history is not fetched yet
+              // it will help us to avoid the flash of content
+              const hasAlreadyFetched = queryClient.getQueryData(
+                chatHistoryOptions(chatHistoryId).queryKey,
+              );
+
+              if (!hasAlreadyFetched) {
+                setIsChatHistoryLoading(true);
+              }
+
+              setChatHistoryId(chatHistoryId);
+              window.history.replaceState(
+                null,
+                '',
+                `/ai/chat/${chatHistoryId}`,
+              );
+            }}
+            onDelete={(deletedChatHistoryId) => {
+              const isCurrentChatHistory =
+                deletedChatHistoryId === chatHistoryId;
+              if (!isCurrentChatHistory) {
+                return;
+              }
+
+              setChatHistoryId(undefined);
+              window.history.replaceState(null, '', '/ai/chat');
+            }}
+          />
         )}
 
-        {!showGlobalLoader && (
-          <>
-            {isPaidUser && (
-              <ListChatHistory
-                activeChatHistoryId={chatHistoryId}
-                onChatHistoryClick={(chatHistoryId) => {
-                  setKeyTrigger((keyTrigger) => keyTrigger + 1);
-
-                  if (chatHistoryId === null) {
-                    setChatHistoryId(undefined);
-                    window.history.replaceState(null, '', '/ai/chat');
-                    return;
-                  }
-
-                  // so that we can show the loading state when the chat history is not fetched yet
-                  // it will help us to avoid the flash of content
-                  const hasAlreadyFetched = queryClient.getQueryData(
-                    chatHistoryOptions(chatHistoryId).queryKey,
-                  );
-
-                  if (!hasAlreadyFetched) {
-                    setIsChatHistoryLoading(true);
-                  }
-
-                  setChatHistoryId(chatHistoryId);
-                  window.history.replaceState(
-                    null,
-                    '',
-                    `/ai/chat/${chatHistoryId}`,
-                  );
-                }}
-                onDelete={(deletedChatHistoryId) => {
-                  const isCurrentChatHistory =
-                    deletedChatHistoryId === chatHistoryId;
-                  if (!isCurrentChatHistory) {
-                    return;
-                  }
-
-                  setChatHistoryId(undefined);
-                  window.history.replaceState(null, '', '/ai/chat');
-                }}
-              />
-            )}
-
-            <div className="relative flex grow">
-              {isChatHistoryLoading && !hasError && (
-                <div className="absolute inset-0 z-20 flex items-center justify-center">
-                  <Loader2Icon className="h-8 w-8 animate-spin stroke-[2.5]" />
-                </div>
-              )}
-
-              {!isChatHistoryLoading && hasError && (
-                <div className="absolute inset-0 z-20 flex items-center justify-center">
-                  <ChatHistoryError error={hasError} className="mt-0" />
-                </div>
-              )}
-
-              {!isChatHistoryLoading && !hasError && (
-                <AIChat
-                  key={keyTrigger}
-                  messages={data?.messages}
-                  chatHistoryId={chatHistoryId}
-                  setChatHistoryId={(id) => {
-                    setChatHistoryId(id);
-                    window.history.replaceState(null, '', `/ai/chat/${id}`);
-                    queryClient.invalidateQueries({
-                      predicate: (query) => {
-                        return query.queryKey[0] === 'list-chat-history';
-                      },
-                    });
-                  }}
-                />
-              )}
+        <div className="relative flex grow">
+          {isChatHistoryLoading && !hasError && (
+            <div className="absolute inset-0 z-20 flex items-center justify-center">
+              <Loader2Icon className="h-8 w-8 animate-spin stroke-[2.5]" />
             </div>
-          </>
-        )}
+          )}
+
+          {!isChatHistoryLoading && hasError && (
+            <div className="absolute inset-0 z-20 flex items-center justify-center">
+              <ChatHistoryError error={hasError} className="mt-0" />
+            </div>
+          )}
+
+          {!isChatHistoryLoading && !hasError && (
+            <AIChat
+              key={keyTrigger}
+              messages={data?.messages}
+              chatHistoryId={chatHistoryId}
+              setChatHistoryId={(id) => {
+                setChatHistoryId(id);
+                window.history.replaceState(null, '', `/ai/chat/${id}`);
+                queryClient.invalidateQueries({
+                  predicate: (query) => {
+                    return query.queryKey[0] === 'list-chat-history';
+                  },
+                });
+              }}
+            />
+          )}
+        </div>
       </div>
     </AIChatLayout>
   );