From c2bf405489238a4e79544810bbe8d11f02a1db30 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 14 Jul 2024 12:58:29 +0530
Subject: [PATCH] Make loading message, styling configurable. Do not show agent
 when no data

- Pass Loading message, class name via props to both inline and normal
  loading spinners
- Pass loading conversation message to loading spinner when chat
  history is being fetched
---
 .../components/chatHistory/chatHistory.tsx    | 22 ++++++++++---------
 .../web/app/components/loading/loading.tsx    | 19 ++++++++--------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx
index d8052a04..78093cec 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.tsx
+++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx
@@ -247,7 +247,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
             <div ref={ref}>
                 <div className={styles.chatHistory} ref={chatHistoryRef}>
                     <div ref={sentinelRef} style={{ height: '1px' }}>
-                        {fetchingData && <InlineLoading />}
+                        {fetchingData && <InlineLoading message="Loading Conversation" className='opacity-50'/>}
                     </div>
                     {(data && data.chat) && data.chat.map((chatMessage, index) => (
                         <ChatMessage
@@ -328,16 +328,18 @@ export default function ChatHistory(props: ChatHistoryProps) {
                             isLastMessage={true}
                         />
                     }
-                    <div className={`${styles.agentIndicator} pb-4`}>
-                        <div className="relative group mx-2 cursor-pointer">
-                            <ProfileCard
-                                name={constructAgentName()}
-                                link={constructAgentLink()}
-                                avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
-                                description={constructAgentPersona()}
-                            />
+                    {data &&
+                        <div className={`${styles.agentIndicator} pb-4`}>
+                            <div className="relative group mx-2 cursor-pointer">
+                                <ProfileCard
+                                    name={constructAgentName()}
+                                    link={constructAgentLink()}
+                                    avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
+                                    description={constructAgentPersona()}
+                                />
+                            </div>
                         </div>
-                    </div>
+                    }
                 </div>
             </div>
         </ScrollArea>
diff --git a/src/interface/web/app/components/loading/loading.tsx b/src/interface/web/app/components/loading/loading.tsx
index 650011d7..55ada004 100644
--- a/src/interface/web/app/components/loading/loading.tsx
+++ b/src/interface/web/app/components/loading/loading.tsx
@@ -1,22 +1,23 @@
 import { CircleNotch } from '@phosphor-icons/react';
 
-export default function Loading() {
+interface LoadingProps {
+    className?: string;
+    message?: string;
+}
+
+export default function Loading(props: LoadingProps) {
     return (
         // NOTE: We can display usage tips here for casual learning moments.
-        <div className={`bg-background opacity-50 flex items-center justify-center h-screen`}>
-            <div>Loading <span><CircleNotch className={`inline animate-spin h-5 w-5`} /></span></div>
+        <div className={props.className || "bg-background opacity-50 flex items-center justify-center h-screen"}>
+            <div>{props.message || "Loading" } <span><CircleNotch className="inline animate-spin h-5 w-5" /></span></div>
         </div>
     );
 }
 
-interface InlineLoadingProps {
-    className?: string;
-}
-
-export function InlineLoading(props: InlineLoadingProps) {
+export function InlineLoading(props: LoadingProps) {
     return (
         <button className={`${props.className}`}>
-            <CircleNotch className={`animate-spin h-5 w-5 mt-3 mr-3`} />
+            <span>{props.message} <CircleNotch className="inline animate-spin h-5 w-5 mx-3" /></span>
         </button>
     )
 }