npm - @yext/chat-ui-react - Versions diffs - 0.11.4 → 0.12.0 - Mend

@yext/chat-ui-react 0.11.4 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/lib/commonjs/package.json.js +1 -1
package/lib/commonjs/src/components/ChatPanel.d.ts +13 -0
package/lib/commonjs/src/components/ChatPanel.d.ts.map +1 -1
package/lib/commonjs/src/components/ChatPanel.js +78 -12
package/lib/commonjs/src/components/ChatPanel.js.map +1 -1
package/lib/esm/package.json.mjs +1 -1
package/lib/esm/src/components/ChatPanel.d.ts +13 -0
package/lib/esm/src/components/ChatPanel.d.ts.map +1 -1
package/lib/esm/src/components/ChatPanel.mjs +77 -14
package/lib/esm/src/components/ChatPanel.mjs.map +1 -1
package/package.json +3 -3
package/src/components/ChatPanel.tsx +107 -13

package/lib/commonjs/package.json.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var version = "0.11.4";
+var version = "0.12.0";
 exports.version = version;
 //# sourceMappingURL=package.json.js.map

package/lib/commonjs/src/components/ChatPanel.d.ts CHANGED Viewed

@@ -58,4 +58,17 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
  * @param props - {@link ChatPanelProps}
  */
 export declare function ChatPanel(props: ChatPanelProps): React.JSX.Element;
+export declare function getStateLocalStorageKey(hostname: string, conversationId: string): string;
+/**
+ * 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 declare const loadSessionState: (conversationId: string) => PanelState;
+export declare const saveSessionState: (conversationId: string, state: PanelState) => void;
 //# sourceMappingURL=ChatPanel.d.ts.map

package/lib/commonjs/src/components/ChatPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,~~EAMV~~,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E,OAAO,EACL,2BAA2B,EAE5B,MAAM,sBAAsB,CAAC;AAG9B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,wBAAwB,CAAC,EAAE,2BAA2B,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,~~qBAuJ9C~~"}
1	+ {"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E,OAAO,EACL,2BAA2B,EAE5B,MAAM,sBAAsB,CAAC;AAG9B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,wBAAwB,CAAC,EAAE,2BAA2B,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA6L9C;AAID,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,MAAM,GACrB,MAAM,CAER;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,mBAAoB,MAAM,KAAG,UAsBzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAAoB,MAAM,SAAS,UAAU,SASzE,CAAC"}

package/lib/commonjs/src/components/ChatPanel.js CHANGED Viewed

@@ -40,6 +40,7 @@ function ChatPanel(props) {
     const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
     const loading = chatHeadlessReact.useChatState((state) => state.conversation.isLoading);
     const suggestedReplies = chatHeadlessReact.useChatState((state) => state.conversation.notes?.suggestedReplies);
+    const conversationId = chatHeadlessReact.useChatState((state) => state.conversation.conversationId);
     const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
     const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
     useFetchInitialMessage.useFetchInitialMessage(handleError, stream);
@@ -66,23 +67,38 @@ function ChatPanel(props) {
     }, [messages, suggestedReplies, messageSuggestions]);
     const messagesRef = React.useRef([]);
     const messagesContainer = React.useRef(null);
+    // State to help detect initial messages rendering
+    const [initialMessagesLength] = React.useState(messages.length);
+    const savedPanelState = React.useMemo(() => {
+        if (!conversationId) {
+            return {};
+        }
+        return loadSessionState(conversationId);
+    }, [conversationId]);
     // Handle scrolling when messages change
     React.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 = React.useCallback((index) => {
         if (!messagesRef?.current)
             return null;
@@ -92,11 +108,26 @@ function ChatPanel(props) {
         container: cssClasses.footer,
         link: "cursor-pointer hover:underline text-blue-600",
     }), [cssClasses]);
+    React.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 (React__default.default.createElement("div", { className: "yext-chat w-full h-full" },
         React__default.default.createElement("div", { className: cssClasses.container },
             header,
             React__default.default.createElement("div", { className: cssClasses.messagesScrollContainer },
-                React__default.default.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer },
+                React__default.default.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer, "aria-label": "Chat Panel Messages Container" },
                     messages.map((message, index) => (React__default.default.createElement("div", { key: index, ref: setMessagesRef(index) },
                         React__default.default.createElement(MessageBubble.MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, message: message, linkTarget: linkTarget, onLinkClick: onLinkClick })))),
                     loading && (React__default.default.createElement("div", { className: "flex" },
@@ -107,6 +138,41 @@ function ChatPanel(props) {
                 React__default.default.createElement(ChatInput.ChatInput, { ...props, onSend: onSend, onRetry: onRetry, customCssClasses: cssClasses.inputCssClasses })),
             footer && (React__default.default.createElement(Markdown.Markdown, { content: footer, linkClickEvent: "WEBSITE", linkTarget: linkTarget, onLinkClick: onLinkClick, customCssClasses: footerCssClasses })))));
 }
+const BASE_STATE_LOCAL_STORAGE_KEY = "yext_chat_panel_state";
+function getStateLocalStorageKey(hostname, conversationId) {
+    return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;
+}
+/**
+ * Loads the {@link PanelState} from local storage.
+ */
+const loadSessionState = (conversationId) => {
+    const hostname = window?.location?.hostname;
+    if (!localStorage || !hostname) {
+        return {};
+    }
+    const savedState = localStorage.getItem(getStateLocalStorageKey(hostname, conversationId));
+    if (savedState) {
+        try {
+            const parsedState = JSON.parse(savedState);
+            return parsedState;
+        }
+        catch (e) {
+            console.warn("Unabled to load saved panel state: error parsing state.");
+            localStorage.removeItem(getStateLocalStorageKey(hostname, conversationId));
+        }
+    }
+    return {};
+};
+const saveSessionState = (conversationId, state) => {
+    const hostname = window?.location?.hostname;
+    if (!localStorage || !hostname) {
+        return;
+    }
+    localStorage.setItem(getStateLocalStorageKey(hostname, conversationId), JSON.stringify(state));
+};
 exports.ChatPanel = ChatPanel;
+exports.getStateLocalStorageKey = getStateLocalStorageKey;
+exports.loadSessionState = loadSessionState;
+exports.saveSessionState = saveSessionState;
 //# sourceMappingURL=ChatPanel.js.map

package/lib/commonjs/src/components/ChatPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatPanel.js","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\nimport {\n MessageSuggestionCssClasses,\n MessageSuggestions,\n} from \"./MessageSuggestions\";\nimport { Markdown, MarkdownCssClasses } from \"./Markdown\";\n\n/*\n The CSS class interface for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n messageSuggestionClasses?: MessageSuggestionCssClasses;\n footer?: string;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer:\n \"flex flex-col gap-y-1 px-4 overflow-auto [&>:first-child]:mt-3\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"mt-1\",\n },\n footer: \"text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]\",\n }\n);\n\n/*\n The props for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" \| \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /* A header to render at the top of the panel. /\n header?: ReactNode;\n /* A footer markdown string to render at the bottom of the panel. /\n footer?: string;\n /\n CSS classes for customizing the component styling.\n /\n customCssClasses?: ChatPanelCssClasses;\n /\n A set of pre-written initial messages that the user\n * can click on instead of typing their own.\n /\n messageSuggestions?: string[];\n /* Link target open behavior on click.\n * Defaults to \"_blank\".\n /\n linkTarget?: string;\n /* A callback which is called when user clicks a link. /\n onLinkClick?: (href?: string) => void;\n /\n Text to display when retrying.\n * Defaults to \"Error occurred. Retrying\".\n /\n retryText?: string;\n}\n\n/\n A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n \n @public\n \n @param props - {@link ChatPanelProps}\n */\nexport function ChatPanel(props: ChatPanelProps) {\n const {\n header,\n footer,\n customCssClasses,\n stream,\n handleError,\n messageSuggestions,\n linkTarget = \"_blank\",\n onLinkClick,\n onSend: onSendProp,\n onRetry: onRetryProp,\n retryText = \"Error occurred. Retrying\",\n } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const suggestedReplies = useChatState(\n (state) => state.conversation.notes?.suggestedReplies\n );\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n\n const [retry, setRetry] = useState(false);\n const onSend = useCallback(\n (message: string) => {\n onSendProp?.(message);\n setRetry(false);\n },\n [onSendProp]\n );\n\n const onRetry = useCallback(\n (e: unknown) => {\n onRetryProp?.(e);\n setRetry(true);\n },\n [onRetryProp]\n );\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const suggestions = useMemo(() => {\n if (\n messages.length === 0 \|\|\n (messages.length === 1 && messages[0].source === \"BOT\")\n ) {\n return messageSuggestions;\n }\n return suggestedReplies;\n }, [messages, suggestedReplies, messageSuggestions]);\n\n const messagesRef = useRef<Array<HTMLDivElement \| null>>([]);\n const messagesContainer = useRef<HTMLDivElement>(null);\n\n // Handle scrolling when messages change\n useEffect(() => {\n let scrollTop = 0;\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n scrollTop = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n\n // Scroll to the top of the last message\n messagesContainer.current?.scroll({\n top: scrollTop,\n behavior: \"smooth\",\n });\n }, [messages]);\n\n const setMessagesRef = useCallback((index) => {\n if (!messagesRef?.current) return null;\n return (message) => (messagesRef.current[index] = message);\n }, []);\n\n const footerCssClasses: MarkdownCssClasses = useMemo(\n () => ({\n container: cssClasses.footer,\n link: \"cursor-pointer hover:underline text-blue-600\",\n }),\n [cssClasses]\n );\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div ref={messagesContainer} className={cssClasses.messagesContainer}>\n {messages.map((message, index) => (\n <div key={index} ref={setMessagesRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n />\n </div>\n ))}\n {loading && (\n <div className=\"flex\">\n <LoadingDots />\n {retry && (\n <p className=\"text-slate-500 text-[13px] font-bold\">\n {retryText}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n {suggestions && (\n <MessageSuggestions\n stream={stream}\n onSend={onSend}\n onRetry={onRetry}\n handleError={handleError}\n suggestions={suggestions}\n customCssClasses={cssClasses.messageSuggestionClasses}\n />\n )}\n <ChatInput\n {...props}\n onSend={onSend}\n onRetry={onRetry}\n customCssClasses={cssClasses.inputCssClasses}\n />\n </div>\n {footer && (\n <Markdown\n content={footer}\n linkClickEvent=\"WEBSITE\"\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n customCssClasses={footerCssClasses}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":["withStylelessCssClasses","useChatState","useComposedCssClasses","useReportAnalyticsEvent","useFetchInitialMessage","useState","useCallback","useEffect","useMemo","useRef","React","MessageBubble","LoadingDots","MessageSuggestions","ChatInput","Markdown"],"mappings":"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"}
1	+ {"version":3,"file":"ChatPanel.js","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n useLayoutEffect,\n} from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\nimport {\n MessageSuggestionCssClasses,\n MessageSuggestions,\n} from \"./MessageSuggestions\";\nimport { Markdown, MarkdownCssClasses } from \"./Markdown\";\n\n/*\n The CSS class interface for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n messageSuggestionClasses?: MessageSuggestionCssClasses;\n footer?: string;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer:\n \"flex flex-col gap-y-1 px-4 overflow-auto [&>:first-child]:mt-3\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"mt-1\",\n },\n footer: \"text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]\",\n }\n);\n\n/*\n The props for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" \| \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /* A header to render at the top of the panel. /\n header?: ReactNode;\n /* A footer markdown string to render at the bottom of the panel. /\n footer?: string;\n /\n CSS classes for customizing the component styling.\n /\n customCssClasses?: ChatPanelCssClasses;\n /\n A set of pre-written initial messages that the user\n * can click on instead of typing their own.\n /\n messageSuggestions?: string[];\n /* Link target open behavior on click.\n * Defaults to \"_blank\".\n /\n linkTarget?: string;\n /* A callback which is called when user clicks a link. /\n onLinkClick?: (href?: string) => void;\n /\n Text to display when retrying.\n * Defaults to \"Error occurred. Retrying\".\n /\n retryText?: string;\n}\n\n/\n A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n \n @public\n \n @param props - {@link ChatPanelProps}\n /\nexport function ChatPanel(props: ChatPanelProps) {\n const {\n header,\n footer,\n customCssClasses,\n stream,\n handleError,\n messageSuggestions,\n linkTarget = \"_blank\",\n onLinkClick,\n onSend: onSendProp,\n onRetry: onRetryProp,\n retryText = \"Error occurred. Retrying\",\n } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const suggestedReplies = useChatState(\n (state) => state.conversation.notes?.suggestedReplies\n );\n const conversationId = useChatState(\n (state) => state.conversation.conversationId\n );\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n\n const [retry, setRetry] = useState(false);\n const onSend = useCallback(\n (message: string) => {\n onSendProp?.(message);\n setRetry(false);\n },\n [onSendProp]\n );\n\n const onRetry = useCallback(\n (e: unknown) => {\n onRetryProp?.(e);\n setRetry(true);\n },\n [onRetryProp]\n );\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const suggestions = useMemo(() => {\n if (\n messages.length === 0 \|\|\n (messages.length === 1 && messages[0].source === \"BOT\")\n ) {\n return messageSuggestions;\n }\n return suggestedReplies;\n }, [messages, suggestedReplies, messageSuggestions]);\n\n const messagesRef = useRef<Array<HTMLDivElement \| null>>([]);\n const messagesContainer = useRef<HTMLDivElement>(null);\n\n // State to help detect initial messages rendering\n const [initialMessagesLength] = useState(messages.length);\n\n const savedPanelState = useMemo(() => {\n if (!conversationId) {\n return {};\n }\n return loadSessionState(conversationId);\n }, [conversationId]);\n\n // Handle scrolling when messages change\n useEffect(() => {\n const isInitialRender = messages.length === initialMessagesLength;\n let scrollPos = 0;\n if (isInitialRender && savedPanelState.scrollPosition !== undefined) {\n // memorized position\n scrollPos = savedPanelState?.scrollPosition;\n } else {\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n // position of the top of the last message\n scrollPos = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n }\n\n messagesContainer.current?.scroll({\n top: scrollPos,\n behavior: \"smooth\",\n });\n }, [messages, initialMessagesLength, savedPanelState.scrollPosition]);\n\n const setMessagesRef = useCallback((index) => {\n if (!messagesRef?.current) return null;\n return (message) => (messagesRef.current[index] = message);\n }, []);\n\n const footerCssClasses: MarkdownCssClasses = useMemo(\n () => ({\n container: cssClasses.footer,\n link: \"cursor-pointer hover:underline text-blue-600\",\n }),\n [cssClasses]\n );\n\n useLayoutEffect(() => {\n const curr = messagesContainer.current;\n const onScroll = () => {\n if (!conversationId) {\n return;\n }\n saveSessionState(conversationId, {\n scrollPosition: curr?.scrollTop,\n });\n };\n curr?.addEventListener(\"scroll\", onScroll);\n return () => {\n curr?.removeEventListener(\"scroll\", onScroll);\n };\n }, [messagesContainer, conversationId]);\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div\n ref={messagesContainer}\n className={cssClasses.messagesContainer}\n aria-label=\"Chat Panel Messages Container\"\n >\n {messages.map((message, index) => (\n <div key={index} ref={setMessagesRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n />\n </div>\n ))}\n {loading && (\n <div className=\"flex\">\n <LoadingDots />\n {retry && (\n <p className=\"text-slate-500 text-[13px] font-bold\">\n {retryText}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n {suggestions && (\n <MessageSuggestions\n stream={stream}\n onSend={onSend}\n onRetry={onRetry}\n handleError={handleError}\n suggestions={suggestions}\n customCssClasses={cssClasses.messageSuggestionClasses}\n />\n )}\n <ChatInput\n {...props}\n onSend={onSend}\n onRetry={onRetry}\n customCssClasses={cssClasses.inputCssClasses}\n />\n </div>\n {footer && (\n <Markdown\n content={footer}\n linkClickEvent=\"WEBSITE\"\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n customCssClasses={footerCssClasses}\n />\n )}\n </div>\n </div>\n );\n}\n\nconst BASE_STATE_LOCAL_STORAGE_KEY = \"yext_chat_panel_state\";\n\nexport function getStateLocalStorageKey(\n hostname: string,\n conversationId: string\n): string {\n return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;\n}\n\n/\n Maintains the panel state of the session.\n /\nexport interface PanelState {\n /* The scroll position of the panel. /\n scrollPosition?: number;\n}\n\n/\n Loads the {@link PanelState} from local storage.\n */\nexport const loadSessionState = (conversationId: string): PanelState => {\n const hostname = window?.location?.hostname;\n if (!localStorage \|\| !hostname) {\n return {};\n }\n const savedState = localStorage.getItem(\n getStateLocalStorageKey(hostname, conversationId)\n );\n\n if (savedState) {\n try {\n const parsedState: PanelState = JSON.parse(savedState);\n return parsedState;\n } catch (e) {\n console.warn(\"Unabled to load saved panel state: error parsing state.\");\n localStorage.removeItem(\n getStateLocalStorageKey(hostname, conversationId)\n );\n }\n }\n\n return {};\n};\n\nexport const saveSessionState = (conversationId: string, state: PanelState) => {\n const hostname = window?.location?.hostname;\n if (!localStorage \|\| !hostname) {\n return;\n }\n localStorage.setItem(\n getStateLocalStorageKey(hostname, conversationId),\n JSON.stringify(state)\n );\n};\n"],"names":["withStylelessCssClasses","useChatState","useComposedCssClasses","useReportAnalyticsEvent","useFetchInitialMessage","useState","useCallback","useEffect","useMemo","useRef","useLayoutEffect","React","MessageBubble","LoadingDots","MessageSuggestions","ChatInput","Markdown"],"mappings":"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"}

package/lib/esm/package.json.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-var version = "0.11.4";
+var version = "0.12.0";
 export { version };
 //# sourceMappingURL=package.json.mjs.map

package/lib/esm/src/components/ChatPanel.d.ts CHANGED Viewed

@@ -58,4 +58,17 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
  * @param props - {@link ChatPanelProps}
  */
 export declare function ChatPanel(props: ChatPanelProps): React.JSX.Element;
+export declare function getStateLocalStorageKey(hostname: string, conversationId: string): string;
+/**
+ * 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 declare const loadSessionState: (conversationId: string) => PanelState;
+export declare const saveSessionState: (conversationId: string, state: PanelState) => void;
 //# sourceMappingURL=ChatPanel.d.ts.map

package/lib/esm/src/components/ChatPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,~~EAMV~~,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E,OAAO,EACL,2BAA2B,EAE5B,MAAM,sBAAsB,CAAC;AAG9B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,wBAAwB,CAAC,EAAE,2BAA2B,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,~~qBAuJ9C~~"}
1	+ {"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E,OAAO,EACL,2BAA2B,EAE5B,MAAM,sBAAsB,CAAC;AAG9B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,wBAAwB,CAAC,EAAE,2BAA2B,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA6L9C;AAID,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,MAAM,GACrB,MAAM,CAER;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,mBAAoB,MAAM,KAAG,UAsBzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAAoB,MAAM,SAAS,UAAU,SASzE,CAAC"}

package/lib/esm/src/components/ChatPanel.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
 import { useChatState } from '@yext/chat-headless-react';
 import { MessageBubble } from './MessageBubble.mjs';
 import { ChatInput } from './ChatInput.mjs';
@@ -34,6 +34,7 @@ function ChatPanel(props) {
     const messages = useChatState((state) => state.conversation.messages);
     const loading = useChatState((state) => state.conversation.isLoading);
     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);
@@ -60,23 +61,38 @@ function ChatPanel(props) {
     }, [messages, suggestedReplies, messageSuggestions]);
     const messagesRef = useRef([]);
     const messagesContainer = useRef(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;
@@ -86,11 +102,26 @@ function ChatPanel(props) {
         container: cssClasses.footer,
         link: "cursor-pointer hover:underline text-blue-600",
     }), [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 (React.createElement("div", { className: "yext-chat w-full h-full" },
         React.createElement("div", { className: cssClasses.container },
             header,
             React.createElement("div", { className: cssClasses.messagesScrollContainer },
-                React.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer },
+                React.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer, "aria-label": "Chat Panel Messages Container" },
                     messages.map((message, index) => (React.createElement("div", { key: index, ref: setMessagesRef(index) },
                         React.createElement(MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, message: message, linkTarget: linkTarget, onLinkClick: onLinkClick })))),
                     loading && (React.createElement("div", { className: "flex" },
@@ -101,6 +132,38 @@ function ChatPanel(props) {
                 React.createElement(ChatInput, { ...props, onSend: onSend, onRetry: onRetry, customCssClasses: cssClasses.inputCssClasses })),
             footer && (React.createElement(Markdown, { content: footer, linkClickEvent: "WEBSITE", linkTarget: linkTarget, onLinkClick: onLinkClick, customCssClasses: footerCssClasses })))));
 }
+const BASE_STATE_LOCAL_STORAGE_KEY = "yext_chat_panel_state";
+function getStateLocalStorageKey(hostname, conversationId) {
+    return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;
+}
+/**
+ * Loads the {@link PanelState} from local storage.
+ */
+const loadSessionState = (conversationId) => {
+    const hostname = window?.location?.hostname;
+    if (!localStorage || !hostname) {
+        return {};
+    }
+    const savedState = localStorage.getItem(getStateLocalStorageKey(hostname, conversationId));
+    if (savedState) {
+        try {
+            const parsedState = JSON.parse(savedState);
+            return parsedState;
+        }
+        catch (e) {
+            console.warn("Unabled to load saved panel state: error parsing state.");
+            localStorage.removeItem(getStateLocalStorageKey(hostname, conversationId));
+        }
+    }
+    return {};
+};
+const saveSessionState = (conversationId, state) => {
+    const hostname = window?.location?.hostname;
+    if (!localStorage || !hostname) {
+        return;
+    }
+    localStorage.setItem(getStateLocalStorageKey(hostname, conversationId), JSON.stringify(state));
+};
-export { ChatPanel };
+export { ChatPanel, getStateLocalStorageKey, loadSessionState, saveSessionState };
 //# sourceMappingURL=ChatPanel.mjs.map

package/lib/esm/src/components/ChatPanel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\nimport {\n MessageSuggestionCssClasses,\n MessageSuggestions,\n} from \"./MessageSuggestions\";\nimport { Markdown, MarkdownCssClasses } from \"./Markdown\";\n\n/*\n The CSS class interface for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n messageSuggestionClasses?: MessageSuggestionCssClasses;\n footer?: string;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer:\n \"flex flex-col gap-y-1 px-4 overflow-auto [&>:first-child]:mt-3\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"mt-1\",\n },\n footer: \"text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]\",\n }\n);\n\n/*\n The props for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" \| \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /* A header to render at the top of the panel. /\n header?: ReactNode;\n /* A footer markdown string to render at the bottom of the panel. /\n footer?: string;\n /\n CSS classes for customizing the component styling.\n /\n customCssClasses?: ChatPanelCssClasses;\n /\n A set of pre-written initial messages that the user\n * can click on instead of typing their own.\n /\n messageSuggestions?: string[];\n /* Link target open behavior on click.\n * Defaults to \"_blank\".\n /\n linkTarget?: string;\n /* A callback which is called when user clicks a link. /\n onLinkClick?: (href?: string) => void;\n /\n Text to display when retrying.\n * Defaults to \"Error occurred. Retrying\".\n /\n retryText?: string;\n}\n\n/\n A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n \n @public\n \n @param props - {@link ChatPanelProps}\n */\nexport function ChatPanel(props: ChatPanelProps) {\n const {\n header,\n footer,\n customCssClasses,\n stream,\n handleError,\n messageSuggestions,\n linkTarget = \"_blank\",\n onLinkClick,\n onSend: onSendProp,\n onRetry: onRetryProp,\n retryText = \"Error occurred. Retrying\",\n } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const suggestedReplies = useChatState(\n (state) => state.conversation.notes?.suggestedReplies\n );\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n\n const [retry, setRetry] = useState(false);\n const onSend = useCallback(\n (message: string) => {\n onSendProp?.(message);\n setRetry(false);\n },\n [onSendProp]\n );\n\n const onRetry = useCallback(\n (e: unknown) => {\n onRetryProp?.(e);\n setRetry(true);\n },\n [onRetryProp]\n );\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const suggestions = useMemo(() => {\n if (\n messages.length === 0 \|\|\n (messages.length === 1 && messages[0].source === \"BOT\")\n ) {\n return messageSuggestions;\n }\n return suggestedReplies;\n }, [messages, suggestedReplies, messageSuggestions]);\n\n const messagesRef = useRef<Array<HTMLDivElement \| null>>([]);\n const messagesContainer = useRef<HTMLDivElement>(null);\n\n // Handle scrolling when messages change\n useEffect(() => {\n let scrollTop = 0;\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n scrollTop = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n\n // Scroll to the top of the last message\n messagesContainer.current?.scroll({\n top: scrollTop,\n behavior: \"smooth\",\n });\n }, [messages]);\n\n const setMessagesRef = useCallback((index) => {\n if (!messagesRef?.current) return null;\n return (message) => (messagesRef.current[index] = message);\n }, []);\n\n const footerCssClasses: MarkdownCssClasses = useMemo(\n () => ({\n container: cssClasses.footer,\n link: \"cursor-pointer hover:underline text-blue-600\",\n }),\n [cssClasses]\n );\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div ref={messagesContainer} className={cssClasses.messagesContainer}>\n {messages.map((message, index) => (\n <div key={index} ref={setMessagesRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n />\n </div>\n ))}\n {loading && (\n <div className=\"flex\">\n <LoadingDots />\n {retry && (\n <p className=\"text-slate-500 text-[13px] font-bold\">\n {retryText}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n {suggestions && (\n <MessageSuggestions\n stream={stream}\n onSend={onSend}\n onRetry={onRetry}\n handleError={handleError}\n suggestions={suggestions}\n customCssClasses={cssClasses.messageSuggestionClasses}\n />\n )}\n <ChatInput\n {...props}\n onSend={onSend}\n onRetry={onRetry}\n customCssClasses={cssClasses.inputCssClasses}\n />\n </div>\n {footer && (\n <Markdown\n content={footer}\n linkClickEvent=\"WEBSITE\"\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n customCssClasses={footerCssClasses}\n />\n )}\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n useLayoutEffect,\n} from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\nimport {\n MessageSuggestionCssClasses,\n MessageSuggestions,\n} from \"./MessageSuggestions\";\nimport { Markdown, MarkdownCssClasses } from \"./Markdown\";\n\n/*\n The CSS class interface for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n messageSuggestionClasses?: MessageSuggestionCssClasses;\n footer?: string;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer:\n \"flex flex-col gap-y-1 px-4 overflow-auto [&>:first-child]:mt-3\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"mt-1\",\n },\n footer: \"text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]\",\n }\n);\n\n/*\n The props for the {@link ChatPanel} component.\n \n @public\n /\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" \| \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /* A header to render at the top of the panel. /\n header?: ReactNode;\n /* A footer markdown string to render at the bottom of the panel. /\n footer?: string;\n /\n CSS classes for customizing the component styling.\n /\n customCssClasses?: ChatPanelCssClasses;\n /\n A set of pre-written initial messages that the user\n * can click on instead of typing their own.\n /\n messageSuggestions?: string[];\n /* Link target open behavior on click.\n * Defaults to \"_blank\".\n /\n linkTarget?: string;\n /* A callback which is called when user clicks a link. /\n onLinkClick?: (href?: string) => void;\n /\n Text to display when retrying.\n * Defaults to \"Error occurred. Retrying\".\n /\n retryText?: string;\n}\n\n/\n A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n \n @public\n \n @param props - {@link ChatPanelProps}\n /\nexport function ChatPanel(props: ChatPanelProps) {\n const {\n header,\n footer,\n customCssClasses,\n stream,\n handleError,\n messageSuggestions,\n linkTarget = \"_blank\",\n onLinkClick,\n onSend: onSendProp,\n onRetry: onRetryProp,\n retryText = \"Error occurred. Retrying\",\n } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const suggestedReplies = useChatState(\n (state) => state.conversation.notes?.suggestedReplies\n );\n const conversationId = useChatState(\n (state) => state.conversation.conversationId\n );\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n\n const [retry, setRetry] = useState(false);\n const onSend = useCallback(\n (message: string) => {\n onSendProp?.(message);\n setRetry(false);\n },\n [onSendProp]\n );\n\n const onRetry = useCallback(\n (e: unknown) => {\n onRetryProp?.(e);\n setRetry(true);\n },\n [onRetryProp]\n );\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const suggestions = useMemo(() => {\n if (\n messages.length === 0 \|\|\n (messages.length === 1 && messages[0].source === \"BOT\")\n ) {\n return messageSuggestions;\n }\n return suggestedReplies;\n }, [messages, suggestedReplies, messageSuggestions]);\n\n const messagesRef = useRef<Array<HTMLDivElement \| null>>([]);\n const messagesContainer = useRef<HTMLDivElement>(null);\n\n // State to help detect initial messages rendering\n const [initialMessagesLength] = useState(messages.length);\n\n const savedPanelState = useMemo(() => {\n if (!conversationId) {\n return {};\n }\n return loadSessionState(conversationId);\n }, [conversationId]);\n\n // Handle scrolling when messages change\n useEffect(() => {\n const isInitialRender = messages.length === initialMessagesLength;\n let scrollPos = 0;\n if (isInitialRender && savedPanelState.scrollPosition !== undefined) {\n // memorized position\n scrollPos = savedPanelState?.scrollPosition;\n } else {\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n // position of the top of the last message\n scrollPos = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n }\n\n messagesContainer.current?.scroll({\n top: scrollPos,\n behavior: \"smooth\",\n });\n }, [messages, initialMessagesLength, savedPanelState.scrollPosition]);\n\n const setMessagesRef = useCallback((index) => {\n if (!messagesRef?.current) return null;\n return (message) => (messagesRef.current[index] = message);\n }, []);\n\n const footerCssClasses: MarkdownCssClasses = useMemo(\n () => ({\n container: cssClasses.footer,\n link: \"cursor-pointer hover:underline text-blue-600\",\n }),\n [cssClasses]\n );\n\n useLayoutEffect(() => {\n const curr = messagesContainer.current;\n const onScroll = () => {\n if (!conversationId) {\n return;\n }\n saveSessionState(conversationId, {\n scrollPosition: curr?.scrollTop,\n });\n };\n curr?.addEventListener(\"scroll\", onScroll);\n return () => {\n curr?.removeEventListener(\"scroll\", onScroll);\n };\n }, [messagesContainer, conversationId]);\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div\n ref={messagesContainer}\n className={cssClasses.messagesContainer}\n aria-label=\"Chat Panel Messages Container\"\n >\n {messages.map((message, index) => (\n <div key={index} ref={setMessagesRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n />\n </div>\n ))}\n {loading && (\n <div className=\"flex\">\n <LoadingDots />\n {retry && (\n <p className=\"text-slate-500 text-[13px] font-bold\">\n {retryText}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n {suggestions && (\n <MessageSuggestions\n stream={stream}\n onSend={onSend}\n onRetry={onRetry}\n handleError={handleError}\n suggestions={suggestions}\n customCssClasses={cssClasses.messageSuggestionClasses}\n />\n )}\n <ChatInput\n {...props}\n onSend={onSend}\n onRetry={onRetry}\n customCssClasses={cssClasses.inputCssClasses}\n />\n </div>\n {footer && (\n <Markdown\n content={footer}\n linkClickEvent=\"WEBSITE\"\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n customCssClasses={footerCssClasses}\n />\n )}\n </div>\n </div>\n );\n}\n\nconst BASE_STATE_LOCAL_STORAGE_KEY = \"yext_chat_panel_state\";\n\nexport function getStateLocalStorageKey(\n hostname: string,\n conversationId: string\n): string {\n return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;\n}\n\n/\n Maintains the panel state of the session.\n /\nexport interface PanelState {\n /* The scroll position of the panel. /\n scrollPosition?: number;\n}\n\n/\n Loads the {@link PanelState} from local storage.\n */\nexport const loadSessionState = (conversationId: string): PanelState => {\n const hostname = window?.location?.hostname;\n if (!localStorage \|\| !hostname) {\n return {};\n }\n const savedState = localStorage.getItem(\n getStateLocalStorageKey(hostname, conversationId)\n );\n\n if (savedState) {\n try {\n const parsedState: PanelState = JSON.parse(savedState);\n return parsedState;\n } catch (e) {\n console.warn(\"Unabled to load saved panel state: error parsing state.\");\n localStorage.removeItem(\n getStateLocalStorageKey(hostname, conversationId)\n );\n }\n }\n\n return {};\n};\n\nexport const saveSessionState = (conversationId: string, state: PanelState) => {\n const hostname = window?.location?.hostname;\n if (!localStorage \|\| !hostname) {\n return;\n }\n localStorage.setItem(\n getStateLocalStorageKey(hostname, conversationId),\n JSON.stringify(state)\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA2CA,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,0DAA0D;AACrE,IAAA,uBAAuB,EAAE,uCAAuC;AAChE,IAAA,iBAAiB,EACf,iEAAiE;AACnE,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,uBAAuB,EAAE;AACvB,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,MAAM,EAAE,gEAAgE;AACzE,CAAA,CACF,CAAC;AAoCF;;;;;;;;AAQG;AACG,SAAU,SAAS,CAAC,KAAqB,EAAA;AAC7C,IAAA,MAAM,EACJ,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,kBAAkB,EAClB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,GAAG,0BAA0B,GACvC,GAAG,KAAK,CAAC;AACV,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;AACtE,IAAA,MAAM,gBAAgB,GAAG,YAAY,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,gBAAgB,CACtD,CAAC;AACF,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;IACF,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAC9E,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;AACvD,IAAA,sBAAsB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAE5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,OAAe,KAAI;AAClB,QAAA,UAAU,GAAG,OAAO,CAAC,CAAC;QACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClB,KAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,CAAU,KAAI;AACb,QAAA,WAAW,GAAG,CAAC,CAAC,CAAC;QACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;AACjB,KAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAE3B,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;AAC/B,QAAA,IACE,QAAQ,CAAC,MAAM,KAAK,CAAC;AACrB,aAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,KAAK,CAAC,EACvD;AACA,YAAA,OAAO,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,gBAAgB,CAAC;KACzB,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAErD,IAAA,MAAM,WAAW,GAAG,MAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;;IAGvD,MAAM,CAAC,qBAAqB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE1D,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;QACnC,IAAI,CAAC,cAAc,EAAE;AACnB,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACD,QAAA,OAAO,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAC1C,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;;IAGrB,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,qBAAqB,CAAC;QAClE,IAAI,SAAS,GAAG,CAAC,CAAC;AAClB,QAAA,IAAI,eAAe,IAAI,eAAe,CAAC,cAAc,KAAK,SAAS,EAAE;;AAEnE,YAAA,SAAS,GAAG,eAAe,EAAE,cAAc,CAAC;AAC7C,SAAA;AAAM,aAAA;AACL,YAAA,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAEpE,YAAA,IAAI,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;;gBAEnC,SAAS,GAAG,WAAW,CAAC,OAAO;AAC5B,qBAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACZ,qBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,YAAY,IAAI,CAAC,CAAC;AACzC,qBAAA,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,MAAM,CAAC,CAAC;AAC9C,aAAA;AACF,SAAA;AAED,QAAA,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC;AAChC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;KACJ,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;AAEtE,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAAK,KAAI;QAC3C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,IAAI,CAAC;AACvC,QAAA,OAAO,CAAC,OAAO,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5D,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,gBAAgB,GAAuB,OAAO,CAClD,OAAO;QACL,SAAS,EAAE,UAAU,CAAC,MAAM;AAC5B,QAAA,IAAI,EAAE,8CAA8C;AACrD,KAAA,CAAC,EACF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,eAAe,CAAC,MAAK;AACnB,QAAA,MAAM,IAAI,GAAG,iBAAiB,CAAC,OAAO,CAAC;QACvC,MAAM,QAAQ,GAAG,MAAK;YACpB,IAAI,CAAC,cAAc,EAAE;gBACnB,OAAO;AACR,aAAA;YACD,gBAAgB,CAAC,cAAc,EAAE;gBAC/B,cAAc,EAAE,IAAI,EAAE,SAAS;AAChC,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;AACF,QAAA,IAAI,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC3C,QAAA,OAAO,MAAK;AACV,YAAA,IAAI,EAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAChD,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;AAExC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACjC,MAAM;AACP,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAA;gBAChD,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA,YAAA,EAC5B,+BAA+B,EAAA;oBAEzC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC3B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC,EAAA;wBACzC,KAAC,CAAA,aAAA,CAAA,aAAa,EACR,EAAA,GAAA,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,uBAAuB,EACpD,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EAAA,CACxB,CACE,CACP,CAAC;AACD,oBAAA,OAAO,KACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,MAAM,EAAA;AACnB,wBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAG,IAAA,CAAA;AACd,wBAAA,KAAK,KACJ,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,sCAAsC,EAChD,EAAA,SAAS,CACR,CACL,CACG,CACP,CACG,CACF;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA;AACtC,gBAAA,WAAW,KACV,KAAC,CAAA,aAAA,CAAA,kBAAkB,EACjB,EAAA,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,UAAU,CAAC,wBAAwB,GACrD,CACH;AACD,gBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EACJ,EAAA,GAAA,KAAK,EACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,eAAe,GAC5C,CACE;AACL,YAAA,MAAM,KACL,KAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,OAAO,EAAE,MAAM,EACf,cAAc,EAAC,SAAS,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,CAAA,CACH,CACG,CACF,EACN;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,uBAAuB,CAAC;AAE7C,SAAA,uBAAuB,CACrC,QAAgB,EAChB,cAAsB,EAAA;AAEtB,IAAA,OAAO,GAAG,4BAA4B,CAAA,EAAA,EAAK,QAAQ,CAAK,EAAA,EAAA,cAAc,EAAE,CAAC;AAC3E,CAAC;AAUD;;AAEG;AACU,MAAA,gBAAgB,GAAG,CAAC,cAAsB,KAAgB;AACrE,IAAA,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC;AAC5C,IAAA,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE;AAC9B,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACD,IAAA,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CACrC,uBAAuB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAClD,CAAC;AAEF,IAAA,IAAI,UAAU,EAAE;QACd,IAAI;YACF,MAAM,WAAW,GAAe,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;AACvD,YAAA,OAAO,WAAW,CAAC;AACpB,SAAA;AAAC,QAAA,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,IAAI,CAAC,yDAAyD,CAAC,CAAC;YACxE,YAAY,CAAC,UAAU,CACrB,uBAAuB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAClD,CAAC;AACH,SAAA;AACF,KAAA;AAED,IAAA,OAAO,EAAE,CAAC;AACZ,EAAE;MAEW,gBAAgB,GAAG,CAAC,cAAsB,EAAE,KAAiB,KAAI;AAC5E,IAAA,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC;AAC5C,IAAA,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE;QAC9B,OAAO;AACR,KAAA;AACD,IAAA,YAAY,CAAC,OAAO,CAClB,uBAAuB,CAAC,QAAQ,EAAE,cAAc,CAAC,EACjD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACtB,CAAC;AACJ;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
@@ -70,7 +70,7 @@
     "@types/jest": "^29.5.1",
     "@types/react": "^18.2.7",
     "@yext/chat-headless-react": "^0.9.1",
-    "@yext/eslint-config": "^1.0.0",
+    "@yext/eslint-config": "^1.0.2",
     "babel-jest": "^29.5.0",
     "eslint": "^8.39.0",
     "eslint-plugin-storybook": "^0.6.12",
@@ -84,7 +84,7 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.28.1",
+    "rollup": "^3.29.5",
     "rollup-plugin-typescript2": "^0.35.0",
     "storybook": "^7.5.2",
     "tailwindcss": "^3.3.2",

package/src/components/ChatPanel.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  useLayoutEffect,
 } from "react";
 import { useChatState } from "@yext/chat-headless-react";
 import {
@@ -117,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);
@@ -157,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;
@@ -190,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
@@ -250,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)
+  );
+};