diff --git a/package-lock.json b/package-lock.json index dc51d62..b44341a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@yext/chat-ui-react", - "version": "0.9.1", + "version": "0.9.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@yext/chat-ui-react", - "version": "0.9.1", + "version": "0.9.2", "license": "BSD-3-Clause", "dependencies": { "react-markdown": "^6.0.3", diff --git a/package.json b/package.json index 3ff02b9..2efcfbf 100644 --- a/package.json +++ b/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", diff --git a/src/components/ChatPopUp.tsx b/src/components/ChatPopUp.tsx index 30c8da0..79aab06 100644 --- a/src/components/ChatPopUp.tsx +++ b/src/components/ChatPopUp.tsx @@ -147,12 +147,6 @@ export function ChatPopUp(props: ChatPopUpProps) { const [numReadMessages, setNumReadMessagesLength] = useState(0); const [numUnreadMessages, setNumUnreadMessagesLength] = useState(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]); diff --git a/src/hooks/useFetchInitialMessage.ts b/src/hooks/useFetchInitialMessage.ts index 565ec31..0b1631f 100644 --- a/src/hooks/useFetchInitialMessage.ts +++ b/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]); } diff --git a/test-site/package-lock.json b/test-site/package-lock.json index a99ebbf..6576344 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -23,7 +23,7 @@ }, "..": { "name": "@yext/chat-ui-react", - "version": "0.9.1", + "version": "0.9.2", "license": "BSD-3-Clause", "dependencies": { "react-markdown": "^6.0.3", diff --git a/test-site/src/App.tsx b/test-site/src/App.tsx index c1a0aa2..df36a3c 100644 --- a/test-site/src/App.tsx +++ b/test-site/src/App.tsx @@ -39,6 +39,10 @@ function App() {