fix: default avatar and text are always showed at first (casibase#1300)

Author: Working On It

web/src/ChatBox.js

@@ -330,7 +330,7 @@ class ChatBox extends React.Component {
     return (
       <Layout style={{display: "flex", width: "100%", height: "100%", borderRadius: "6px"}}>
         <Card style={{display: "flex", width: "100%", height: "100%", flexDirection: "column", position: "relative", padding: "24px"}}>
-          {messages.length === 0 && <WelcomeHeader store={this.props.store} />}
+          {messages.length === 0 && <WelcomeHeader store={this.props.store} isStoreLoading={this.props.isStoreLoading} isStoreLoadingError={this.props.isStoreLoadingError} />}
 
           <MessageList
             ref={this.messageListRef}

web/src/ChatPage.js

@@ -54,6 +54,8 @@ class ChatPage extends BaseListPage {
       defaultStore: null,
       filteredStores: [],
       paneCount: 1,
+      isStoreLoading: true,
+      isStoreLoadingError: false,
     });
 
     this.fetch();
@@ -115,6 +117,7 @@ class ChatPage extends BaseListPage {
   };
 
   getGlobalStores() {
+    this.state.isStoreLoading = true;
     StoreBackend.getGlobalStores("", "", "", "", "", "").then((res) => {
       if (res.status === "ok") {
         const stores = res?.data;
@@ -130,9 +133,13 @@ class ChatPage extends BaseListPage {
           stores: stores,
           defaultStore: defaultStore,
           filteredStores: filteredStores,
+          isStoreLoading: false,
         });
       } else {
         Setting.showMessage("error", `${i18next.t("general:Failed to get")}: ${res.msg}`);
+        this.setState({
+          isStoreLoadingError: true,
+        });
       }
     });
   }
@@ -754,6 +761,8 @@ class ChatPage extends BaseListPage {
                 name={this.state.chat?.name}
                 displayName={this.state.chat?.displayName}
                 store={this.state.chat ? this.state.stores?.find(store => store.name === this.state.chat.store) : this.state.stores?.find(store => store.isDefault === true)}
+                isStoreLoading={this.state.isStoreLoading}
+                isStoreLoadingError={this.state.isStoreLoadingError}
               />
             </div>
           )}

web/src/chat/WelcomeHeader.js

@@ -17,15 +17,48 @@ import {Welcome} from "@ant-design/x";
 import * as Setting from "../Setting";
 import i18next from "i18next";
 
-const WelcomeHeader = ({store}) => {
-  const avatar = store?.avatar || Setting.AiAvatar;
+const WelcomeHeader = ({store, isStoreLoading, isStoreLoadingError}) => {
+
+  const getTitle = () => {
+    if (isStoreLoading) {
+      return null;
+    }
+    if (isStoreLoadingError) {
+      return i18next.t("chat:Hello, I'm Casibase AI Assistant");
+    }
+    return store?.welcomeTitle || i18next.t("chat:Hello, I'm Casibase AI Assistant");
+  };
+
+  const getDescription = () => {
+    if (isStoreLoading) {
+      return null;
+    }
+    if (isStoreLoadingError) {
+      return i18next.t("chat:I'm here to help answer your questions");
+    }
+    return store?.welcomeText || i18next.t("chat:I'm here to help answer your questions");
+  };
+
+  const getAvatar = () => {
+    if (isStoreLoading) {
+      return null;
+    }
+    if (isStoreLoadingError) {
+      return Setting.AiAvatar;
+    }
+    return store?.avatar || Setting.AiAvatar;
+  };
+
+  const avatar = getAvatar();
+  const title = getTitle();
+  const description = getDescription();
 
   return (
     <Welcome
       variant="borderless"
       icon={avatar}
-      title={store?.welcomeTitle || i18next.t("chat:Hello, I'm Casibase AI Assistant")}
-      description={store?.welcomeText || i18next.t("chat:I'm here to help answer your questions")}
+      title={title}
+      description={description}
     />
   );
 };