@yext/chat-ui-react 0.11.3 → 0.12.0

package/src/components/ChatPanel.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  useLayoutEffect,
 } from "react";
 import { useChatState } from "@yext/chat-headless-react";
 import {
@@ -45,7 +46,8 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
   {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
     messagesScrollContainer: "flex flex-col mt-auto overflow-hidden",
-    messagesContainer: "flex flex-col gap-y-1 px-4 overflow-auto [&>*:first-child]:mt-3",
+    messagesContainer:
+      "flex flex-col gap-y-1 px-4 overflow-auto [&>*:first-child]:mt-3",
     inputContainer: "w-full p-4",
     messageBubbleCssClasses: {
       topContainer: "mt-1",
@@ -116,6 +118,9 @@ export function ChatPanel(props: ChatPanelProps) {
   const suggestedReplies = useChatState(
     (state) => state.conversation.notes?.suggestedReplies
   );
+  const conversationId = useChatState(
+    (state) => state.conversation.conversationId
+  );
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   useFetchInitialMessage(handleError, stream);
@@ -156,25 +161,40 @@ export function ChatPanel(props: ChatPanelProps) {
   const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
   const messagesContainer = useRef<HTMLDivElement>(null);
 
+  // State to help detect initial messages rendering
+  const [initialMessagesLength] = useState(messages.length);
+
+  const savedPanelState = useMemo(() => {
+    if (!conversationId) {
+      return {};
+    }
+    return loadSessionState(conversationId);
+  }, [conversationId]);
+
   // Handle scrolling when messages change
   useEffect(() => {
-    let scrollTop = 0;
-    messagesRef.current = messagesRef.current.slice(0, messages.length);
-
-    // Sums up scroll heights of all messages except the last one
-    if (messagesRef?.current.length > 1) {
-      scrollTop = messagesRef.current
-        .slice(0, -1)
-        .map((elem, _) => elem?.scrollHeight ?? 0)
-        .reduce((total, height) => total + height);
+    const isInitialRender = messages.length === initialMessagesLength;
+    let scrollPos = 0;
+    if (isInitialRender && savedPanelState.scrollPosition !== undefined) {
+      // memorized position
+      scrollPos = savedPanelState?.scrollPosition;
+    } else {
+      messagesRef.current = messagesRef.current.slice(0, messages.length);
+      // Sums up scroll heights of all messages except the last one
+      if (messagesRef?.current.length > 1) {
+        // position of the top of the last message
+        scrollPos = messagesRef.current
+          .slice(0, -1)
+          .map((elem, _) => elem?.scrollHeight ?? 0)
+          .reduce((total, height) => total + height);
+      }
     }
 
-    // Scroll to the top of the last message
     messagesContainer.current?.scroll({
-      top: scrollTop,
+      top: scrollPos,
       behavior: "smooth",
     });
-  }, [messages]);
+  }, [messages, initialMessagesLength, savedPanelState.scrollPosition]);
 
   const setMessagesRef = useCallback((index) => {
     if (!messagesRef?.current) return null;
@@ -189,12 +209,32 @@ export function ChatPanel(props: ChatPanelProps) {
     [cssClasses]
   );
 
+  useLayoutEffect(() => {
+    const curr = messagesContainer.current;
+    const onScroll = () => {
+      if (!conversationId) {
+        return;
+      }
+      saveSessionState(conversationId, {
+        scrollPosition: curr?.scrollTop,
+      });
+    };
+    curr?.addEventListener("scroll", onScroll);
+    return () => {
+      curr?.removeEventListener("scroll", onScroll);
+    };
+  }, [messagesContainer, conversationId]);
+
   return (
     <div className="yext-chat w-full h-full">
       <div className={cssClasses.container}>
         {header}
         <div className={cssClasses.messagesScrollContainer}>
-          <div ref={messagesContainer} className={cssClasses.messagesContainer}>
+          <div
+            ref={messagesContainer}
+            className={cssClasses.messagesContainer}
+            aria-label="Chat Panel Messages Container"
+          >
             {messages.map((message, index) => (
               <div key={index} ref={setMessagesRef(index)}>
                 <MessageBubble
@@ -249,3 +289,58 @@ export function ChatPanel(props: ChatPanelProps) {
     </div>
   );
 }
+
+const BASE_STATE_LOCAL_STORAGE_KEY = "yext_chat_panel_state";
+
+export function getStateLocalStorageKey(
+  hostname: string,
+  conversationId: string
+): string {
+  return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;
+}
+
+/**
+ * Maintains the panel state of the session.
+ */
+export interface PanelState {
+  /** The scroll position of the panel. */
+  scrollPosition?: number;
+}
+
+/**
+ * Loads the {@link PanelState} from local storage.
+ */
+export const loadSessionState = (conversationId: string): PanelState => {
+  const hostname = window?.location?.hostname;
+  if (!localStorage || !hostname) {
+    return {};
+  }
+  const savedState = localStorage.getItem(
+    getStateLocalStorageKey(hostname, conversationId)
+  );
+
+  if (savedState) {
+    try {
+      const parsedState: PanelState = JSON.parse(savedState);
+      return parsedState;
+    } catch (e) {
+      console.warn("Unabled to load saved panel state: error parsing state.");
+      localStorage.removeItem(
+        getStateLocalStorageKey(hostname, conversationId)
+      );
+    }
+  }
+
+  return {};
+};
+
+export const saveSessionState = (conversationId: string, state: PanelState) => {
+  const hostname = window?.location?.hostname;
+  if (!localStorage || !hostname) {
+    return;
+  }
+  localStorage.setItem(
+    getStateLocalStorageKey(hostname, conversationId),
+    JSON.stringify(state)
+  );
+};

package/src/components/ChatPopUp.tsx

@@ -110,6 +110,12 @@ export interface ChatPopUpProps
    * This prop will override the "showInitialMessagePopUp" prop, if specified.
    */
   ctaLabel?: string;
+  /**
+   * A controlled prop to open or close the panel. If provided, the prop
+   * will override the openOnLoad prop and the panel will be controlled
+   * by the parent component.
+   */
+  isOpen?: boolean;
 }
 
 /**
@@ -134,6 +140,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
     ctaLabel,
     title,
     footer,
+    isOpen,
   } = props;
 
   const reportAnalyticsEvent = useReportAnalyticsEvent();
@@ -147,24 +154,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
   const [numReadMessages, setNumReadMessagesLength] = useState<number>(0);
   const [numUnreadMessages, setNumUnreadMessagesLength] = useState<number>(0);
 
-  const [showInitialMessage, setshowInitialMessage] = useState(
-    //only show initial message popup (if specified) when CTA label is not provided
-    !ctaLabel && showInitialMessagePopUp
-  );
-
-  const onCloseInitialMessage = useCallback(() => {
-    setshowInitialMessage(false);
-  }, []);
-
-  // control CSS behavior (fade-in/out animation) on open/close state of the panel.
-  const [showChat, setShowChat] = useState(false);
-
-  // control the actual DOM rendering of the panel. Start rendering on first open state
-  // to avoid message requests immediately on load while the popup is still "hidden"
-  const [renderChat, setRenderChat] = useState(false);
-
   // Set the initial value of the local storage flag for opening on load only if it doesn't already exist
-
   if (window.localStorage.getItem(popupLocalStorageKey) === null) {
     window.localStorage.setItem(
       popupLocalStorageKey,
@@ -179,6 +169,15 @@ export function ChatPopUp(props: ChatPopUpProps) {
   const isOpenOnLoad =
     (messages.length > 1 && openOnLoadLocalStorage === "true") || openOnLoad;
 
+  const {
+    renderChat,
+    showChat,
+    showInitialMessage,
+    toggleChat,
+    closeChat,
+    closeInitialMessage,
+  } = usePanelState(isOpen, isOpenOnLoad, !ctaLabel && showInitialMessagePopUp);
+
   // only fetch initial message when ChatPanel is closed on load (otherwise, it will be fetched in ChatPanel)
   useFetchInitialMessage(
     showInitialMessagePopUp ? console.error : handleError,
@@ -188,28 +187,18 @@ export function ChatPopUp(props: ChatPopUpProps) {
       !isOpenOnLoad
   );
 
-  useEffect(() => {
-    if (!renderChat && isOpenOnLoad) {
-      setShowChat(true);
-      setRenderChat(true);
-      setshowInitialMessage(false);
-    }
-  }, [renderChat, messages.length, isOpenOnLoad]);
-
   const onClick = useCallback(() => {
-    setShowChat((prev) => !prev);
-    setRenderChat(true);
-    setshowInitialMessage(false);
+    toggleChat();
     window.localStorage.setItem(popupLocalStorageKey, "true");
-  }, []);
+  }, [toggleChat]);
 
   const onClose = useCallback(() => {
-    setShowChat(false);
+    closeChat();
     customOnClose?.();
     // consider all the messages are read while the panel was open
     setNumReadMessagesLength(messages.length);
     window.localStorage.setItem(popupLocalStorageKey, "false");
-  }, [customOnClose, messages.length]);
+  }, [closeChat, customOnClose, messages.length]);
 
   useEffect(() => {
     // update number of unread messages if there are new messages added while the panel is closed
@@ -255,7 +244,7 @@ export function ChatPopUp(props: ChatPopUpProps) {
         >
           {showInitialMessage && (
             <InitialMessagePopUp
-              onClose={onCloseInitialMessage}
+              onClose={closeInitialMessage}
               customCssClasses={cssClasses.initialMessagePopUpCssClasses}
             />
           )}
@@ -298,3 +287,62 @@ export function ChatPopUp(props: ChatPopUpProps) {
     </div>
   );
 }
+
+function usePanelState(
+  isOpen: boolean | undefined,
+  isOpenOnLoad: boolean | undefined,
+  initialMessageVisible: boolean | undefined
+) {
+  // control CSS behavior (fade-in/out animation) on open/close state of the panel.
+  const [showChat, setShowChat] = useState(false);
+  // control the actual DOM rendering of the panel. Start rendering on first open state
+  // to avoid message requests immediately on load while the popup is still "hidden"
+  const [renderChat, setRenderChat] = useState(false);
+  const [showInitialMessage, setshowInitialMessage] = useState(
+    initialMessageVisible
+  );
+
+  useEffect(() => {
+    if (isOpen !== undefined) {
+      setShowChat(isOpen);
+      setRenderChat(isOpen);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!renderChat && isOpenOnLoad && isOpen === undefined) {
+      setShowChat(true);
+      setRenderChat(true);
+      setshowInitialMessage(false);
+    }
+  }, [renderChat, isOpen, isOpenOnLoad]);
+
+  const toggleChat = useCallback(() => {
+    if (isOpen !== undefined) {
+      return;
+    }
+    setShowChat((prev) => !prev);
+    setRenderChat(true);
+    setshowInitialMessage(false);
+  }, [isOpen]);
+
+  const closeChat = useCallback(() => {
+    if (isOpen !== undefined) {
+      return;
+    }
+    setShowChat(false);
+  }, [isOpen]);
+
+  const closeInitialMessage = useCallback(() => {
+    setshowInitialMessage(false);
+  }, []);
+
+  return {
+    showChat,
+    renderChat,
+    showInitialMessage,
+    toggleChat,
+    closeChat,
+    closeInitialMessage,
+  };
+}

package/src/components/Markdown.tsx

@@ -1,4 +1,7 @@
-import ReactMarkdown, { Options } from "react-markdown";
+import ReactMarkdown, {
+  PluggableList,
+  ReactMarkdownOptions,
+} from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
@@ -7,7 +10,7 @@ import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent";
 import { useComposedCssClasses } from "../hooks/useComposedCssClasses";
 
 // The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
-const unifiedPlugins: { remark?: Options['remarkPlugins']; rehype: Options['rehypePlugins'] } = {
+const unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {
   remark: [
     remarkGfm, //renders Github-Flavored Markdown
   ],
@@ -69,7 +72,7 @@ export function Markdown({
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
-  const components: Options["components"] = useMemo(() => {
+  const components: ReactMarkdownOptions["components"] = useMemo(() => {
     const createClickHandlerFn = (href?: string) => () => {
       reportAnalyticsEvent({
         action: linkClickEvent,