Bug Fix: double initial fetch message from ChatPopup (#70)

when `openOnLoad` and `showUnreadNotification` prop are both in use, initial message was fetched twice -- once from ChatPopUp component and once from ChatPanel. This is because useFetchInitialMessage doesn't share state between the two component.

This PR updates it so ChatPopUp component only fetch when ChatPanel is not render, otherwise ChatPanel should always do the fetching of the initial message

J=CLIP-1231
TEST=manual

see that it works with both `openOnLoad` and `showUnreadNotification` on

https://github.com/yext/chat-ui-react/assets/36055303/12ccb877-8665-4f8e-a5bc-3e883391f857

Author: yen-tt

package-lock.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",

package.json

@@ -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/components/ChatPopUp.tsx

@@ -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]);
 }

src/hooks/useFetchInitialMessage.ts

@@ -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",