Bug Fix: double initial fetch message from ChatPopup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",

src/components/ChatPopUp.tsx

@@ -147,12 +147,6 @@ export function ChatPopUp(props: ChatPopUpProps) {
   const [numReadMessages, setNumReadMessagesLength] = useState<number>(0);
   const [numUnreadMessages, setNumUnreadMessagesLength] = useState<number>(0);
 
-  useFetchInitialMessage(
-    showInitialMessagePopUp ? console.error : handleError,
-    false,
-    showUnreadNotification || showInitialMessagePopUp
-  );
-
   const [showInitialMessage, setshowInitialMessage] = useState(
     //only show initial message popup (if specified) when CTA label is not provided
     !ctaLabel && showInitialMessagePopUp
@@ -168,6 +162,14 @@ export function ChatPopUp(props: ChatPopUpProps) {
   // to avoid message requests immediately on load while the popup is still "hidden"
   const [renderChat, setRenderChat] = useState(false);
 
+
+  // only fetch initial message when ChatPanel is closed on load (otherwise, it will be fetched in ChatPanel)
+  useFetchInitialMessage(
+    showInitialMessagePopUp ? console.error : handleError,
+    false,
+    (showUnreadNotification || showInitialMessagePopUp) && !renderChat && !openOnLoad,
+  );
+
   // update in useEffect, instead of having openOnLoad as initial state for show/renderChat,
   // in order to maintain the fade-in CSS animation when opening the panel on load
   useEffect(() => {
@@ -192,7 +194,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
   }, [customOnClose, messages]);
 
   useEffect(() => {
-    //update number of unread messages if there are new messages added while the panel is closed
+    // update number of unread messages if there are new messages added while the panel is closed
     setNumUnreadMessagesLength(messages.length - numReadMessages);
   }, [messages, numReadMessages]);
 

src/hooks/useFetchInitialMessage.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useChatState, useChatActions } from "@yext/chat-headless-react";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 
@@ -16,43 +16,20 @@ import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 export function useFetchInitialMessage(
   handleError?: (e: unknown) => void,
   stream = false,
-  customCondition = true
+  customCondition = true,
 ) {
   const chat = useChatActions();
   const defaultHandleApiError = useDefaultHandleApiError();
   const messages = useChatState((state) => state.conversation.messages);
-  const [fetchInitialMessage, setFetchInitialMessage] = useState(
-    messages.length === 0
-  );
-  const [messagesLength, setMessagesLength] = useState(messages.length);
   const canSendMessage = useChatState(
     (state) => state.conversation.canSendMessage
   );
-
-  //handle message history resets
-  useEffect(() => {
-    const newMessagesLength = messages.length;
-    // Fetch data only when the conversation messages changes from non-zero to zero
-    if (messagesLength > 0 && newMessagesLength === 0) {
-      setFetchInitialMessage(true);
-    }
-    setMessagesLength(newMessagesLength);
-  }, [messages.length, messagesLength]);
-
+
   useEffect(() => {
-    if (!fetchInitialMessage || !canSendMessage || !customCondition) {
+    if (messages.length !== 0 || !canSendMessage || !customCondition) {
       return;
     }
-    setFetchInitialMessage(false);
     const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
     res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [
-    chat,
-    stream,
-    handleError,
-    defaultHandleApiError,
-    fetchInitialMessage,
-    canSendMessage,
-    customCondition,
-  ]);
+  }, [chat, stream, handleError, defaultHandleApiError, canSendMessage, customCondition, messages.length]);
 }

test-site/src/App.tsx

@@ -39,6 +39,10 @@ function App() {
       <ChatHeadlessProvider config={config}>
         <ChatPopUp
           title="Clippy"
+          openOnLoad={true}
+          showInitialMessagePopUp={true}
+          showHeartBeatAnimation={true}
+          showUnreadNotification={true}
           messageSuggestions={[
             "hey how are you",
             "I'm looking to order a pair of all-mountain skis",