From f519a7b2dd7c16ea32f1c734421a3aa26a952d37 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Fri, 17 Nov 2023 06:24:51 +0530
Subject: [PATCH] WIP

---
 src/client/ChatPage.tsx                       |  2 +-
 src/client/components/ConversationWrapper.tsx | 30 +++++++++++++++----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/client/ChatPage.tsx b/src/client/ChatPage.tsx
index 4d622e5..6c0cf39 100644
--- a/src/client/ChatPage.tsx
+++ b/src/client/ChatPage.tsx
@@ -34,7 +34,7 @@ export default function ChatPage() {
           </div>
         </div>
       </div>
-      <div className="relative z-0 flex h-full w-full overflow-hidden h-screen">
+      <div className="relative z-0 flex h-full w-full overflow-hidden h-screen bg-captn-light-blue">
         <ConversationWrapper />
       </div>
     </div>
diff --git a/src/client/components/ConversationWrapper.tsx b/src/client/components/ConversationWrapper.tsx
index 6578d54..6b27191 100644
--- a/src/client/components/ConversationWrapper.tsx
+++ b/src/client/components/ConversationWrapper.tsx
@@ -1,30 +1,37 @@
 import { useState, useRef } from "react";
 import { useParams } from "react-router";
+import { Redirect } from "react-router-dom";
 
 import { useQuery } from "@wasp/queries";
 import updateConversation from "@wasp/actions/updateConversation";
 import getAgentResponse from "@wasp/actions/getAgentResponse";
 import getConversations from "@wasp/queries/getConversations";
 
-import type { Conversation } from "@wasp/entities";
+// import type { Conversation } from "@wasp/entities";
 
 import ConversationsList from "./ConversationList";
 import Loader from "./Loader";
 
 export default function ConversationWrapper() {
+  const [isLoading, setIsLoading] = useState(false);
+  const chatContainerRef = useRef(null);
+
   // Todo: remove the below ignore comment
   // @ts-ignore
   const { id } = useParams();
-  const [isLoading, setIsLoading] = useState(false);
-  const { data: conversations, isLoading: isLoadingConversations } = useQuery(
+
+  const {
+    data: conversations,
+    isLoading: isConversationLoading,
+    error: isConversationError,
+  } = useQuery(
     getConversations,
     {
       chatId: Number(id),
-    }
+    },
+    { enabled: !!id }
   );
 
-  const chatContainerRef = useRef(null);
-
   const chatContainerClass = `flex h-full flex-col items-center justify-between pb-24 overflow-y-auto bg-captn-light-blue ${
     isLoading ? "opacity-40" : "opacity-100"
   }`;
@@ -76,6 +83,17 @@ export default function ConversationWrapper() {
     }
   };
 
+  if (isConversationLoading && !!id) return <Loader />;
+  if (isConversationError) {
+    console.log("Unable to load conversation.");
+
+    return (
+      <>
+        <Redirect to="/chat" />
+      </>
+    );
+  }
+
   return (
     <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden bg-captn-light-blue">
       <div className="relative h-full w-full flex-1 overflow-auto transition-width">