From cae435951a5dba6bb0a8ba5a40818ea46682bf93 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Tue, 19 Dec 2023 11:48:18 +0530
Subject: [PATCH] Create single team per chat

---
 src/client/components/ConversationList.tsx    | 39 ++++++++++++++++++-
 src/client/components/ConversationWrapper.tsx | 22 ++++++++---
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/client/components/ConversationList.tsx b/src/client/components/ConversationList.tsx
index fe97da6..46a3f45 100644
--- a/src/client/components/ConversationList.tsx
+++ b/src/client/components/ConversationList.tsx
@@ -4,15 +4,16 @@ import { useState } from "react";
 import Markdown from "markdown-to-jsx";
 
 import type { Conversation } from "@wasp/entities";
-
 import logo from "../static/captn-logo.png";
 
 type ConversationsListProps = {
   conversations: Conversation[];
+  isLoading: boolean;
 };
 
 export default function ConversationsList({
   conversations,
+  isLoading,
 }: ConversationsListProps) {
   return (
     <div className="w-full">
@@ -84,6 +85,42 @@ export default function ConversationsList({
           </div>
         );
       })}
+      <div
+        className={`flex items-center px-5 py-2 group bg-captn-light-cream flex-col ${
+          isLoading ? "" : "hidden"
+        }`}
+        style={{ minHeight: "85px" }}
+      >
+        <div
+          className="relative ml-3 block w-full p-4 pl-10 text-sm text-captn-dark-blue  border-captn-light-cream rounded-lg bg-captn-light-cream "
+          style={{ maxWidth: "840px", margin: "auto" }}
+        >
+          <span
+            className="absolute inline-block"
+            style={{
+              left: "-15px",
+              top: "6px",
+              height: " 45px",
+              width: "45px",
+            }}
+          >
+            <img
+              alt="captn logo"
+              src={logo}
+              className="w-full h-full"
+              style={{ borderRadius: "50%" }}
+            />
+          </span>
+          <div className="chat-conversations text-base flex flex-col gap-2">
+            <span>
+              I am presently navigating the waters of your request.
+              <br />
+              Kindly stay anchored, and I will promptly return to you once I
+              have information to share.
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/client/components/ConversationWrapper.tsx b/src/client/components/ConversationWrapper.tsx
index 3b34a8d..c33690e 100644
--- a/src/client/components/ConversationWrapper.tsx
+++ b/src/client/components/ConversationWrapper.tsx
@@ -82,12 +82,16 @@ export default function ConversationWrapper() {
 
   const scrollToBottom = () => {
     if (chatWindowRef.current) {
-      // @ts-ignore
-      chatWindowRef.current.scrollTo({
+      // Delay the scrolling animation by 500ms
+      setTimeout(() => {
+        // Scroll to the bottom with a smooth behavior
         // @ts-ignore
-        top: chatWindowRef.current.scrollHeight,
-        behavior: "smooth",
-      });
+        chatWindowRef.current.scrollTo({
+          // @ts-ignore
+          top: chatWindowRef.current.scrollHeight,
+          behavior: "smooth",
+        });
+      }, 200);
     }
   };
 
@@ -152,7 +156,13 @@ export default function ConversationWrapper() {
           <div className="flex-1 overflow-hidden pb-36">
             <div ref={chatWindowRef} className={`${chatContainerClass}`}>
               {conversations && (
-                <ConversationsList conversations={conversations} />
+                <ConversationsList
+                  conversations={conversations}
+                  isLoading={
+                    currentChatDetails &&
+                    currentChatDetails.team_status === "inprogress"
+                  }
+                />
               )}
             </div>
             {isLoading && <Loader />}