@yext/chat-ui-react 0.7.2 → 0.8.0

package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchInitialMessage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,EAClC,MAAM,UAAQ,EACd,eAAe,UAAO,QAuCvB"}

package/lib/commonjs/src/hooks/useFetchInitialMessage.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var useDefaultHandleApiError = require('./useDefaultHandleApiError.js');
+
+/**
+ * Sends a request to Chat API to fetch the initial message when the
+ * conversation first start or when the message history is reset.
+ *
+ * @internal
+ *
+ * @param handleError - A function which is called when an error occurs while fetching for initial message.
+ *                      By default, the error is logged to the console and an error message is added to state.
+ * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.
+ * @param customCondition - additional condition for when to fetch initial message
+ */
+function useFetchInitialMessage(handleError, stream = false, customCondition = true) {
+    const chat = chatHeadlessReact.useChatActions();
+    const defaultHandleApiError = useDefaultHandleApiError.useDefaultHandleApiError();
+    const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
+    const [fetchInitialMessage, setFetchInitialMessage] = React.useState(messages.length === 0);
+    const [messagesLength, setMessagesLength] = React.useState(messages.length);
+    const canSendMessage = chatHeadlessReact.useChatState((state) => state.conversation.canSendMessage);
+    //handle message history resets
+    React.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]);
+    React.useEffect(() => {
+        if (!fetchInitialMessage || !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,
+    ]);
+}
+
+exports.useFetchInitialMessage = useFetchInitialMessage;
+//# sourceMappingURL=useFetchInitialMessage.js.map

package/lib/commonjs/src/hooks/useFetchInitialMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchInitialMessage.js","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useChatState, useChatActions } from \"@yext/chat-headless-react\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\n\n/**\n * Sends a request to Chat API to fetch the initial message when the\n * conversation first start or when the message history is reset.\n *\n * @internal\n *\n * @param handleError - A function which is called when an error occurs while fetching for initial message.\n *                      By default, the error is logged to the console and an error message is added to state.\n * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.\n * @param customCondition - additional condition for when to fetch initial message\n */\nexport function useFetchInitialMessage(\n  handleError?: (e: unknown) => void,\n  stream = false,\n  customCondition = true\n) {\n  const chat = useChatActions();\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const messages = useChatState((state) => state.conversation.messages);\n  const [fetchInitialMessage, setFetchInitialMessage] = useState(\n    messages.length === 0\n  );\n  const [messagesLength, setMessagesLength] = useState(messages.length);\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n\n  //handle message history resets\n  useEffect(() => {\n    const newMessagesLength = messages.length;\n    // Fetch data only when the conversation messages changes from non-zero to zero\n    if (messagesLength > 0 && newMessagesLength === 0) {\n      setFetchInitialMessage(true);\n    }\n    setMessagesLength(newMessagesLength);\n  }, [messages.length, messagesLength]);\n\n  useEffect(() => {\n    if (!fetchInitialMessage || !canSendMessage || !customCondition) {\n      return;\n    }\n    setFetchInitialMessage(false);\n    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n  }, [\n    chat,\n    stream,\n    handleError,\n    defaultHandleApiError,\n    fetchInitialMessage,\n    canSendMessage,\n    customCondition,\n  ]);\n}\n"],"names":["useChatActions","useDefaultHandleApiError","useChatState","useState","useEffect"],"mappings":";;;;;;AAIA;;;;;;;;;;AAUG;AACG,SAAU,sBAAsB,CACpC,WAAkC,EAClC,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,IAAI,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAGA,gCAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAGC,cAAQ,CAC5D,QAAQ,CAAC,MAAM,KAAK,CAAC,CACtB,CAAC;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAGD,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;;IAGFE,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC;;AAE1C,QAAA,IAAI,cAAc,GAAG,CAAC,IAAI,iBAAiB,KAAK,CAAC,EAAE;YACjD,sBAAsB,CAAC,IAAI,CAAC,CAAC;AAC9B,SAAA;QACD,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtC,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAEtCA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,mBAAmB,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,EAAE;YAC/D,OAAO;AACR,SAAA;QACD,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,MAAM,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACtE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE;QACD,IAAI;QACJ,MAAM;QACN,WAAW;QACX,qBAAqB;QACrB,mBAAmB;QACnB,cAAc;QACd,eAAe;AAChB,KAAA,CAAC,CAAC;AACL;;;;"}

package/lib/esm/index.d.ts

@@ -169,11 +169,16 @@ export declare interface ChatPopUpCssClasses {
     panel__display?: string;
     panel__hidden?: string;
     button?: string;
-    button__display?: string;
-    button__hidden?: string;
     buttonIcon?: string;
+    ctaLabelContainer?: string;
+    ctaLabel?: string;
+    notification?: string;
+    closedPopupContainer?: string;
+    closedPopupContainer__display?: string;
+    closedPopupContainer__hidden?: string;
     headerCssClasses?: ChatHeaderCssClasses;
     panelCssClasses?: ChatPanelCssClasses;
+    initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;
 }
 
 /**
@@ -184,10 +189,31 @@ export declare interface ChatPopUpCssClasses {
 export declare interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">, Omit<ChatPanelProps, "header" | "customCssClasses"> {
     /** Custom icon for the popup button to open the panel. */
     openPanelButtonIcon?: JSX.Element;
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: ChatPopUpCssClasses;
+    /** Whether to show the panel on load. Defaults to false. */
+    openOnLoad?: boolean;
     /**
-     * CSS classes for customizing the component styling.
+     * Whether to show the initial message popup when the panel is hidden on load.
+     * Defaults to false.
      */
-    customCssClasses?: ChatPopUpCssClasses;
+    showInitialMessagePopUp?: boolean;
+    /**
+     * Whether to show a heartbeat animation on the popup button when the panel is hidden.
+     * Defaults to false.
+     */
+    showHeartBeatAnimation?: boolean;
+    /**
+     * Whether to show notification showing number of unread messages.
+     * Defaults to false.
+     */
+    showUnreadNotification?: boolean;
+    /**
+     * The "Call to Action" label to be displayed next to the popup button.
+     * By default, the CTA is not shown.
+     * This prop will override the "showInitialMessagePopUp" prop, if specified.
+     */
+    ctaLabel?: string;
 }
 
 /**
@@ -205,6 +231,18 @@ export declare interface FeedbackButtonsCssClasses {
     thumbsDownFillIcon?: string;
 }
 
+/**
+ * The CSS class interface for the InitialMessagePopUp component.
+ *
+ * @public
+ */
+export declare interface InitialMessagePopUpCssClasses {
+    container?: string;
+    closeButton?: string;
+    closeButtonIcon?: string;
+    message?: string;
+}
+
 /**
  * A component that displays the provided message.
  *

package/lib/esm/package.json.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO7E;;;;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;CACnD;AAeD;;;;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,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAmF9C"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO7E;;;;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;CACnD;AAeD;;;;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,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAkE9C"}

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useCallback } from 'react';
-import { useChatActions, useChatState } from '@yext/chat-headless-react';
+import { useChatState } from '@yext/chat-headless-react';
 import { MessageBubble } from './MessageBubble.mjs';
 import { ChatInput } from './ChatInput.mjs';
 import { LoadingDots } from './LoadingDots.mjs';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
-import { useDefaultHandleApiError } from '../hooks/useDefaultHandleApiError.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
 import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
+import { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
 
 const builtInCssClasses = withStylelessCssClasses("Panel", {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
@@ -27,28 +27,17 @@ const builtInCssClasses = withStylelessCssClasses("Panel", {
  * @param props - {@link ChatPanelProps}
  */
 function ChatPanel(props) {
-    const { header, customCssClasses } = props;
-    const chat = useChatActions();
+    const { header, customCssClasses, stream, handleError } = props;
     const messages = useChatState((state) => state.conversation.messages);
     const loading = useChatState((state) => state.conversation.isLoading);
-    const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
     const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
-    const defaultHandleApiError = useDefaultHandleApiError();
     const reportAnalyticsEvent = useReportAnalyticsEvent();
+    useFetchInitialMessage(handleError, stream);
     useEffect(() => {
         reportAnalyticsEvent({
             action: "CHAT_IMPRESSION",
         });
     }, [reportAnalyticsEvent]);
-    // Fetch the first message on load, if there are no existing messages or a request being processed
-    useEffect(() => {
-        if (messages.length !== 0 || !canSendMessage) {
-            return;
-        }
-        const { stream = false, handleError } = props;
-        const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
-        res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-    }, [chat, props, messages, defaultHandleApiError, canSendMessage]);
     const messagesRef = useRef([]);
     const messagesContainer = useRef(null);
     // Handle scrolling when messages change

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { useChatState, useChatActions } 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 { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\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}\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: \"flex flex-col gap-y-1 px-4 overflow-auto\",\n    inputContainer: \"w-full p-4\",\n    messageBubbleCssClasses: {\n      topContainer: \"first:mt-4\",\n    },\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?: JSX.Element;\n  /**\n   * CSS classes for customizing the component styling.\n   */\n  customCssClasses?: ChatPanelCssClasses;\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 { header, customCssClasses } = props;\n  const chat = useChatActions();\n  const messages = useChatState((state) => state.conversation.messages);\n  const loading = useChatState((state) => state.conversation.isLoading);\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\n\n  // Fetch the first message on load, if there are no existing messages or a request being processed\n  useEffect(() => {\n    if (messages.length !== 0 || !canSendMessage) {\n      return;\n    }\n    const { stream = false, handleError } = props;\n    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n  }, [chat, props, messages, defaultHandleApiError, canSendMessage]);\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  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          >\n            {messages.map((message, index) => (\n              <div key={index} ref={setMessagesRef(index)}>\n                <MessageBubble\n                  {...props}\n                  customCssClasses={cssClasses.messageBubbleCssClasses}\n                  message={message}\n                />\n              </div>\n            ))}\n            {loading && <LoadingDots />}\n          </div>\n        </div>\n        <div className={cssClasses.inputContainer}>\n          <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } 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\";\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}\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: \"flex flex-col gap-y-1 px-4 overflow-auto\",\n    inputContainer: \"w-full p-4\",\n    messageBubbleCssClasses: {\n      topContainer: \"first:mt-4\",\n    },\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?: JSX.Element;\n  /**\n   * CSS classes for customizing the component styling.\n   */\n  customCssClasses?: ChatPanelCssClasses;\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 { header, customCssClasses, stream, handleError } = props;\n  const messages = useChatState((state) => state.conversation.messages);\n  const loading = useChatState((state) => state.conversation.isLoading);\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n  useFetchInitialMessage(handleError, stream);\n\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\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  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                />\n              </div>\n            ))}\n            {loading && <LoadingDots />}\n          </div>\n        </div>\n        <div className={cssClasses.inputContainer}>\n          <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/lib/esm/src/components/ChatPopUp.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 import { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
+import { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";
 /**
  * The CSS class interface for the {@link ChatPopUp} component.
  *
@@ -12,11 +13,16 @@ export interface ChatPopUpCssClasses {
     panel__display?: string;
     panel__hidden?: string;
     button?: string;
-    button__display?: string;
-    button__hidden?: string;
     buttonIcon?: string;
+    ctaLabelContainer?: string;
+    ctaLabel?: string;
+    notification?: string;
+    closedPopupContainer?: string;
+    closedPopupContainer__display?: string;
+    closedPopupContainer__hidden?: string;
     headerCssClasses?: ChatHeaderCssClasses;
     panelCssClasses?: ChatPanelCssClasses;
+    initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;
 }
 /**
  * The props for the {@link ChatPopUp} component.
@@ -26,10 +32,31 @@ export interface ChatPopUpCssClasses {
 export interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">, Omit<ChatPanelProps, "header" | "customCssClasses"> {
     /** Custom icon for the popup button to open the panel. */
     openPanelButtonIcon?: JSX.Element;
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: ChatPopUpCssClasses;
+    /** Whether to show the panel on load. Defaults to false. */
+    openOnLoad?: boolean;
     /**
-     * CSS classes for customizing the component styling.
+     * Whether to show the initial message popup when the panel is hidden on load.
+     * Defaults to false.
      */
-    customCssClasses?: ChatPopUpCssClasses;
+    showInitialMessagePopUp?: boolean;
+    /**
+     * Whether to show a heartbeat animation on the popup button when the panel is hidden.
+     * Defaults to false.
+     */
+    showHeartBeatAnimation?: boolean;
+    /**
+     * Whether to show notification showing number of unread messages.
+     * Defaults to false.
+     */
+    showUnreadNotification?: boolean;
+    /**
+     * The "Call to Action" label to be displayed next to the popup button.
+     * By default, the CTA is not shown.
+     * This prop will override the "showInitialMessagePopUp" prop, if specified.
+     */
+    ctaLabel?: string;
 }
 /**
  * A component that renders a popup button that displays and hides

package/lib/esm/src/components/ChatPopUp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAMtB;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AA8BD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EACnE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IACrD,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAkE9C"}
+{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAKtB,OAAO,EAEL,6BAA6B,EAC9B,MAAM,uBAAuB,CAAC;AAI/B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,6BAA6B,CAAC,EAAE,6BAA6B,CAAC;CAC/D;AAqCD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EACnE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IACrD,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAyJ9C"}

package/lib/esm/src/components/ChatPopUp.mjs

@@ -6,6 +6,9 @@ import { twMerge } from 'tailwind-merge';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
 import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
+import { InitialMessagePopUp } from './InitialMessagePopUp.mjs';
+import { useChatState } from '@yext/chat-headless-react';
+import { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
 
 const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
 const builtInCssClasses = withStylelessCssClasses("PopUp", {
@@ -14,11 +17,15 @@ const builtInCssClasses = withStylelessCssClasses("PopUp", {
         "w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]",
     panel__display: "duration-300 translate-y-0",
     panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
-    button: fixedPosition +
-        "p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700 hover:-translate-y-2 duration-150",
-    button__display: "duration-300 transform translate-y-0",
-    button__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
+    closedPopupContainer: fixedPosition +
+        "flex gap-x-2.5 items-center hover:-translate-y-2 duration-150",
+    closedPopupContainer__display: "duration-300 transform translate-y-0",
+    closedPopupContainer__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
+    button: "p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700",
     buttonIcon: "text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]",
+    ctaLabelContainer: "max-w-60 -mr-8 line-clamp-1",
+    ctaLabel: "p-3 pr-8 flex items-center whitespace-nowrap animate-expand-left font-bold rounded-l-full bg-white text-blue-700 h-10 lg:h-14 text-sm lg:text-base",
+    notification: "fixed animate-fade-in bg-red-700 -right-1 top-0 rounded-full w-5 lg:w-6 h-5 lg:h-6 items-center flex justify-center text-sm lg:text-base text-white",
     headerCssClasses: {
         container: "max-[480px]:rounded-none rounded-t-3xl",
     },
@@ -37,29 +44,70 @@ const builtInCssClasses = withStylelessCssClasses("PopUp", {
  * @param props - {@link ChatPanelProps}
  */
 function ChatPopUp(props) {
-    const { openPanelButtonIcon, customCssClasses, showRestartButton = true, onClose: customOnClose, title, } = props;
+    const { openPanelButtonIcon, customCssClasses, showRestartButton = true, onClose: customOnClose, handleError, openOnLoad = false, showInitialMessagePopUp = false, showHeartBeatAnimation = false, showUnreadNotification = false, ctaLabel, title, } = props;
     const reportAnalyticsEvent = useReportAnalyticsEvent();
     useEffect(() => {
         reportAnalyticsEvent({
             action: "CHAT_IMPRESSION",
         });
     }, [reportAnalyticsEvent]);
+    const messages = useChatState((s) => s.conversation.messages);
+    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);
+    const onCloseInitialMessage = useCallback(() => {
+        setshowInitialMessage(false);
+    }, []);
+    // control CSS behavior 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);
+    // 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(() => {
+        if (openOnLoad) {
+            setShowChat(true);
+            setRenderChat(true);
+            setshowInitialMessage(false);
+        }
+    }, [openOnLoad]);
     const onClick = useCallback(() => {
         setShowChat(!showChat);
+        setRenderChat(true);
+        setshowInitialMessage(false);
     }, [showChat]);
     const onClose = useCallback(() => {
         setShowChat(false);
         customOnClose?.();
-    }, [customOnClose]);
+        // consider all the messages are read while the panel was open
+        setNumReadMessagesLength(messages.length);
+    }, [customOnClose, messages]);
+    useEffect(() => {
+        //update number of unread messages if there are new messages added while the panel is closed
+        setNumUnreadMessagesLength(messages.length - numReadMessages);
+    }, [messages, numReadMessages]);
     const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
     const panelCssClasses = twMerge(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
-    const buttonCssClasses = twMerge(cssClasses.button, showChat ? cssClasses.button__hidden : cssClasses.button__display);
+    const closedPopupContainerCssClasses = twMerge(cssClasses.closedPopupContainer, showChat
+        ? cssClasses.closedPopupContainer__hidden
+        : cssClasses.closedPopupContainer__display);
     return (React.createElement("div", { className: "yext-chat w-full h-full" },
         React.createElement("div", { className: cssClasses.container },
-            React.createElement("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel" },
-                React.createElement(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: React.createElement(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) })),
-            React.createElement("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses }, openPanelButtonIcon ?? (React.createElement(ChatIcon, { className: cssClasses.buttonIcon }))))));
+            React.createElement("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel" }, renderChat && (React.createElement(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: React.createElement(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) }))),
+            React.createElement("div", { className: closedPopupContainerCssClasses, "aria-label": "Chat Closed Popup Container" },
+                showInitialMessage && (React.createElement(InitialMessagePopUp, { onClose: onCloseInitialMessage, customCssClasses: cssClasses.initialMessagePopUpCssClasses })),
+                ctaLabel && (
+                // the div container is needed to islate the expand CSS animation
+                React.createElement("div", { className: cssClasses.ctaLabelContainer },
+                    React.createElement("button", { onClick: onClick, "aria-label": "CTA Label", className: cssClasses.ctaLabel }, ctaLabel))),
+                React.createElement("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: cssClasses.button +
+                        (showHeartBeatAnimation ? " animate-heartbeat" : "") },
+                    openPanelButtonIcon ?? (React.createElement(ChatIcon, { className: cssClasses.buttonIcon })),
+                    showUnreadNotification && !!numUnreadMessages && (React.createElement("div", { "aria-label": "Unread Messages Notification", className: cssClasses.notification }, numUnreadMessages)))))));
 }
 
 export { ChatPopUp };

package/lib/esm/src/components/ChatPopUp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.mjs","sources":["../../../../src/components/ChatPopUp.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ChatIcon } from \"../icons/Chat\";\nimport { ChatPanel, ChatPanelCssClasses, ChatPanelProps } from \"./ChatPanel\";\nimport {\n  ChatHeader,\n  ChatHeaderCssClasses,\n  ChatHeaderProps,\n} from \"./ChatHeader\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpCssClasses {\n  container?: string;\n  panel?: string;\n  panel__display?: string;\n  panel__hidden?: string;\n  button?: string;\n  button__display?: string;\n  button__hidden?: string;\n  buttonIcon?: string;\n  headerCssClasses?: ChatHeaderCssClasses;\n  panelCssClasses?: ChatPanelCssClasses;\n}\n\nconst fixedPosition = \"fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 \";\nconst builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(\n  \"PopUp\",\n  {\n    container: \"transition-all\",\n    panel:\n      fixedPosition +\n      \"w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]\",\n    panel__display: \"duration-300 translate-y-0\",\n    panel__hidden: \"duration-300 translate-y-[20%] opacity-0 invisible\",\n    button:\n      fixedPosition +\n      \"p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700 hover:-translate-y-2 duration-150\",\n    button__display: \"duration-300 transform translate-y-0\",\n    button__hidden:\n      \"duration-300 transform translate-y-[20%] opacity-0 invisible\",\n    buttonIcon: \"text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]\",\n    headerCssClasses: {\n      container: \"max-[480px]:rounded-none rounded-t-3xl\",\n    },\n    panelCssClasses: {\n      container: \"max-[480px]:rounded-none rounded-3xl\",\n      inputContainer: \"max-[480px]:rounded-none rounded-b-3xl\",\n      messagesScrollContainer: \"rounded-b-3xl\",\n    },\n  }\n);\n\n/**\n * The props for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpProps\n  extends Omit<ChatHeaderProps, \"showCloseButton\" | \"customCssClasses\">,\n    Omit<ChatPanelProps, \"header\" | \"customCssClasses\"> {\n  /** Custom icon for the popup button to open the panel. */\n  openPanelButtonIcon?: JSX.Element;\n  /**\n   * CSS classes for customizing the component styling.\n   */\n  customCssClasses?: ChatPopUpCssClasses;\n}\n\n/**\n * A component that renders a popup button that displays and hides\n * a panel for chat bot interactions.\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPopUp(props: ChatPopUpProps) {\n  const {\n    openPanelButtonIcon,\n    customCssClasses,\n    showRestartButton = true,\n    onClose: customOnClose,\n    title,\n  } = props;\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\n\n  const [showChat, setShowChat] = useState(false);\n  const onClick = useCallback(() => {\n    setShowChat(!showChat);\n  }, [showChat]);\n\n  const onClose = useCallback(() => {\n    setShowChat(false);\n    customOnClose?.();\n  }, [customOnClose]);\n\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const panelCssClasses = twMerge(\n    cssClasses.panel,\n    showChat ? cssClasses.panel__display : cssClasses.panel__hidden\n  );\n  const buttonCssClasses = twMerge(\n    cssClasses.button,\n    showChat ? cssClasses.button__hidden : cssClasses.button__display\n  );\n\n  return (\n    <div className=\"yext-chat w-full h-full\">\n      <div className={cssClasses.container}>\n        <div className={panelCssClasses} aria-label=\"Chat Popup Panel\">\n          <ChatPanel\n            {...props}\n            customCssClasses={cssClasses.panelCssClasses}\n            header={\n              <ChatHeader\n                title={title}\n                showRestartButton={showRestartButton}\n                showCloseButton={true}\n                onClose={onClose}\n                customCssClasses={cssClasses.headerCssClasses}\n              />\n            }\n          />\n        </div>\n        <button\n          aria-label=\"Chat Popup Button\"\n          onClick={onClick}\n          className={buttonCssClasses}\n        >\n          {openPanelButtonIcon ?? (\n            <ChatIcon className={cssClasses.buttonIcon} />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatPopUp.mjs","sources":["../../../../src/components/ChatPopUp.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ChatIcon } from \"../icons/Chat\";\nimport { ChatPanel, ChatPanelCssClasses, ChatPanelProps } from \"./ChatPanel\";\nimport {\n  ChatHeader,\n  ChatHeaderCssClasses,\n  ChatHeaderProps,\n} from \"./ChatHeader\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport {\n  InitialMessagePopUp,\n  InitialMessagePopUpCssClasses,\n} from \"./InitialMessagePopUp\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\n\n/**\n * The CSS class interface for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpCssClasses {\n  container?: string;\n  panel?: string;\n  panel__display?: string;\n  panel__hidden?: string;\n  button?: string;\n  buttonIcon?: string;\n  ctaLabelContainer?: string;\n  ctaLabel?: string;\n  notification?: string;\n  closedPopupContainer?: string;\n  closedPopupContainer__display?: string;\n  closedPopupContainer__hidden?: string;\n  headerCssClasses?: ChatHeaderCssClasses;\n  panelCssClasses?: ChatPanelCssClasses;\n  initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;\n}\n\nconst fixedPosition = \"fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 \";\nconst builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(\n  \"PopUp\",\n  {\n    container: \"transition-all\",\n    panel:\n      fixedPosition +\n      \"w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]\",\n    panel__display: \"duration-300 translate-y-0\",\n    panel__hidden: \"duration-300 translate-y-[20%] opacity-0 invisible\",\n    closedPopupContainer:\n      fixedPosition +\n      \"flex gap-x-2.5 items-center hover:-translate-y-2 duration-150\",\n    closedPopupContainer__display: \"duration-300 transform translate-y-0\",\n    closedPopupContainer__hidden:\n      \"duration-300 transform translate-y-[20%] opacity-0 invisible\",\n    button:\n      \"p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700\",\n    buttonIcon: \"text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]\",\n    ctaLabelContainer: \"max-w-60 -mr-8 line-clamp-1\",\n    ctaLabel:\n      \"p-3 pr-8 flex items-center whitespace-nowrap animate-expand-left font-bold rounded-l-full bg-white text-blue-700 h-10 lg:h-14 text-sm lg:text-base\",\n    notification:\n      \"fixed animate-fade-in bg-red-700 -right-1 top-0 rounded-full w-5 lg:w-6 h-5 lg:h-6 items-center flex justify-center text-sm lg:text-base text-white\",\n    headerCssClasses: {\n      container: \"max-[480px]:rounded-none rounded-t-3xl\",\n    },\n    panelCssClasses: {\n      container: \"max-[480px]:rounded-none rounded-3xl\",\n      inputContainer: \"max-[480px]:rounded-none rounded-b-3xl\",\n      messagesScrollContainer: \"rounded-b-3xl\",\n    },\n  }\n);\n\n/**\n * The props for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpProps\n  extends Omit<ChatHeaderProps, \"showCloseButton\" | \"customCssClasses\">,\n    Omit<ChatPanelProps, \"header\" | \"customCssClasses\"> {\n  /** Custom icon for the popup button to open the panel. */\n  openPanelButtonIcon?: JSX.Element;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: ChatPopUpCssClasses;\n  /** Whether to show the panel on load. Defaults to false. */\n  openOnLoad?: boolean;\n  /**\n   * Whether to show the initial message popup when the panel is hidden on load.\n   * Defaults to false.\n   */\n  showInitialMessagePopUp?: boolean;\n  /**\n   * Whether to show a heartbeat animation on the popup button when the panel is hidden.\n   * Defaults to false.\n   */\n  showHeartBeatAnimation?: boolean;\n  /**\n   * Whether to show notification showing number of unread messages.\n   * Defaults to false.\n   */\n  showUnreadNotification?: boolean;\n  /**\n   * The \"Call to Action\" label to be displayed next to the popup button.\n   * By default, the CTA is not shown.\n   * This prop will override the \"showInitialMessagePopUp\" prop, if specified.\n   */\n  ctaLabel?: string;\n}\n\n/**\n * A component that renders a popup button that displays and hides\n * a panel for chat bot interactions.\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPopUp(props: ChatPopUpProps) {\n  const {\n    openPanelButtonIcon,\n    customCssClasses,\n    showRestartButton = true,\n    onClose: customOnClose,\n    handleError,\n    openOnLoad = false,\n    showInitialMessagePopUp = false,\n    showHeartBeatAnimation = false,\n    showUnreadNotification = false,\n    ctaLabel,\n    title,\n  } = props;\n\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\n\n  const messages = useChatState((s) => s.conversation.messages);\n  const [numReadMessages, setNumReadMessagesLength] = useState<number>(0);\n  const [numUnreadMessages, setNumUnreadMessagesLength] = useState<number>(0);\n\n  useFetchInitialMessage(\n    showInitialMessagePopUp ? console.error : handleError,\n    false,\n    showUnreadNotification || showInitialMessagePopUp\n  );\n\n  const [showInitialMessage, setshowInitialMessage] = useState(\n    //only show initial message popup (if specified) when CTA label is not provided\n    !ctaLabel && showInitialMessagePopUp\n  );\n  const onCloseInitialMessage = useCallback(() => {\n    setshowInitialMessage(false);\n  }, []);\n\n  // control CSS behavior on open/close state of the panel\n  const [showChat, setShowChat] = useState(false);\n\n  // control the actual DOM rendering of the panel. Start rendering on first open state\n  // to avoid message requests immediately on load while the popup is still \"hidden\"\n  const [renderChat, setRenderChat] = useState(false);\n\n  // update in useEffect, instead of having openOnLoad as initial state for show/renderChat,\n  // in order to maintain the fade-in CSS animation when opening the panel on load\n  useEffect(() => {\n    if (openOnLoad) {\n      setShowChat(true);\n      setRenderChat(true);\n      setshowInitialMessage(false);\n    }\n  }, [openOnLoad]);\n\n  const onClick = useCallback(() => {\n    setShowChat(!showChat);\n    setRenderChat(true);\n    setshowInitialMessage(false);\n  }, [showChat]);\n\n  const onClose = useCallback(() => {\n    setShowChat(false);\n    customOnClose?.();\n    // consider all the messages are read while the panel was open\n    setNumReadMessagesLength(messages.length);\n  }, [customOnClose, messages]);\n\n  useEffect(() => {\n    //update number of unread messages if there are new messages added while the panel is closed\n    setNumUnreadMessagesLength(messages.length - numReadMessages);\n  }, [messages, numReadMessages]);\n\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const panelCssClasses = twMerge(\n    cssClasses.panel,\n    showChat ? cssClasses.panel__display : cssClasses.panel__hidden\n  );\n  const closedPopupContainerCssClasses = twMerge(\n    cssClasses.closedPopupContainer,\n    showChat\n      ? cssClasses.closedPopupContainer__hidden\n      : cssClasses.closedPopupContainer__display\n  );\n\n  return (\n    <div className=\"yext-chat w-full h-full\">\n      <div className={cssClasses.container}>\n        <div className={panelCssClasses} aria-label=\"Chat Popup Panel\">\n          {renderChat && (\n            <ChatPanel\n              {...props}\n              customCssClasses={cssClasses.panelCssClasses}\n              header={\n                <ChatHeader\n                  title={title}\n                  showRestartButton={showRestartButton}\n                  showCloseButton={true}\n                  onClose={onClose}\n                  customCssClasses={cssClasses.headerCssClasses}\n                />\n              }\n            />\n          )}\n        </div>\n        <div\n          className={closedPopupContainerCssClasses}\n          aria-label=\"Chat Closed Popup Container\"\n        >\n          {showInitialMessage && (\n            <InitialMessagePopUp\n              onClose={onCloseInitialMessage}\n              customCssClasses={cssClasses.initialMessagePopUpCssClasses}\n            />\n          )}\n          {ctaLabel && (\n            // the div container is needed to islate the expand CSS animation\n            <div className={cssClasses.ctaLabelContainer}>\n              <button\n                onClick={onClick}\n                aria-label=\"CTA Label\"\n                className={cssClasses.ctaLabel}\n              >\n                {ctaLabel}\n              </button>\n            </div>\n          )}\n          <button\n            aria-label=\"Chat Popup Button\"\n            onClick={onClick}\n            className={\n              cssClasses.button +\n              (showHeartBeatAnimation ? \" animate-heartbeat\" : \"\")\n            }\n          >\n            {openPanelButtonIcon ?? (\n              <ChatIcon className={cssClasses.buttonIcon} />\n            )}\n            {showUnreadNotification && !!numUnreadMessages && (\n              <div\n                aria-label=\"Unread Messages Notification\"\n                className={cssClasses.notification}\n              >\n                {numUnreadMessages}\n              </div>\n            )}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/lib/esm/src/components/InitialMessagePopUp.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+/**
+ * The CSS class interface for the InitialMessagePopUp component.
+ *
+ * @public
+ */
+export interface InitialMessagePopUpCssClasses {
+    container?: string;
+    closeButton?: string;
+    closeButtonIcon?: string;
+    message?: string;
+}
+/**
+ * The props for the {@link InitialMessagePopUp} component.
+ *
+ * @internal
+ */
+interface InitialMessagePopUpProps {
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: InitialMessagePopUpCssClasses;
+    /** Function to call when user click on the close button */
+    onClose: () => void;
+}
+/**
+ * A component that renders a popup bubble displaying the initial message from chat bot.
+ *
+ * @internal
+ *
+ * @param props - {@link InitialMessagePopUpProps}
+ */
+export declare function InitialMessagePopUp({ onClose, customCssClasses, }: InitialMessagePopUpProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=InitialMessagePopUp.d.ts.map

package/lib/esm/src/components/InitialMessagePopUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InitialMessagePopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/InitialMessagePopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,UAAU,wBAAwB;IAChC,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,6BAA6B,CAAC;IACjD,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,gBAAgB,GACjB,EAAE,wBAAwB,qBA0B1B"}

package/lib/esm/src/components/InitialMessagePopUp.mjs

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { CrossIcon } from '../icons/Cross.mjs';
+import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
+import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
+import { useChatState, MessageSource } from '@yext/chat-headless-react';
+
+const builtInCssClasses = withStylelessCssClasses("InitialMessagePopUp", {
+    container: "flex gap-x-1 animate-fade-in",
+    closeButton: "bg-white w-4 h-4 rounded-full border border-slate-300",
+    closeButtonIcon: "",
+    message: "line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base",
+});
+/**
+ * A component that renders a popup bubble displaying the initial message from chat bot.
+ *
+ * @internal
+ *
+ * @param props - {@link InitialMessagePopUpProps}
+ */
+function InitialMessagePopUp({ onClose, customCssClasses, }) {
+    const messages = useChatState((s) => s.conversation.messages);
+    const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const firstBotMessage = useMemo(() => {
+        return messages.length !== 0 && messages[0].source === MessageSource.BOT
+            ? messages[0].text
+            : "";
+    }, [messages]);
+    if (firstBotMessage.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", { className: cssClasses.container },
+        React.createElement("button", { "aria-label": "Close Initial Message", onClick: onClose, className: cssClasses.closeButton },
+            React.createElement(CrossIcon, { className: cssClasses.closeButtonIcon })),
+        React.createElement("div", { className: cssClasses.message }, firstBotMessage)));
+}
+
+export { InitialMessagePopUp };
+//# sourceMappingURL=InitialMessagePopUp.mjs.map

package/lib/esm/src/components/InitialMessagePopUp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InitialMessagePopUp.mjs","sources":["../../../../src/components/InitialMessagePopUp.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { MessageSource, useChatState } from \"@yext/chat-headless-react\";\n\n/**\n * The CSS class interface for the InitialMessagePopUp component.\n *\n * @public\n */\nexport interface InitialMessagePopUpCssClasses {\n  container?: string;\n  closeButton?: string;\n  closeButtonIcon?: string;\n  message?: string;\n}\n\n/**\n * The props for the {@link InitialMessagePopUp} component.\n *\n * @internal\n */\ninterface InitialMessagePopUpProps {\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: InitialMessagePopUpCssClasses;\n  /** Function to call when user click on the close button */\n  onClose: () => void;\n}\n\nconst builtInCssClasses: InitialMessagePopUpCssClasses =\n  withStylelessCssClasses(\"InitialMessagePopUp\", {\n    container: \"flex gap-x-1 animate-fade-in\",\n    closeButton: \"bg-white w-4 h-4 rounded-full border border-slate-300\",\n    closeButtonIcon: \"\",\n    message:\n      \"line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base\",\n  });\n\n/**\n * A component that renders a popup bubble displaying the initial message from chat bot.\n *\n * @internal\n *\n * @param props - {@link InitialMessagePopUpProps}\n */\nexport function InitialMessagePopUp({\n  onClose,\n  customCssClasses,\n}: InitialMessagePopUpProps) {\n  const messages = useChatState((s) => s.conversation.messages);\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const firstBotMessage: string = useMemo(() => {\n    return messages.length !== 0 && messages[0].source === MessageSource.BOT\n      ? messages[0].text\n      : \"\";\n  }, [messages]);\n\n  if (firstBotMessage.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div className={cssClasses.container}>\n      <button\n        aria-label=\"Close Initial Message\"\n        onClick={onClose}\n        className={cssClasses.closeButton}\n      >\n        <CrossIcon className={cssClasses.closeButtonIcon} />\n      </button>\n      <div className={cssClasses.message}>{firstBotMessage}</div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,iBAAiB,GACrB,uBAAuB,CAAC,qBAAqB,EAAE;AAC7C,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,WAAW,EAAE,uDAAuD;AACpE,IAAA,eAAe,EAAE,EAAE;AACnB,IAAA,OAAO,EACL,4EAA4E;AAC/E,CAAA,CAAC,CAAC;AAEL;;;;;;AAMG;SACa,mBAAmB,CAAC,EAClC,OAAO,EACP,gBAAgB,GACS,EAAA;AACzB,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,eAAe,GAAW,OAAO,CAAC,MAAK;AAC3C,QAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,aAAa,CAAC,GAAG;AACtE,cAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;cAChB,EAAE,CAAC;AACT,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,QAAA,OAAO,yCAAK,CAAC;AACd,KAAA;AAED,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClC,KACa,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,uBAAuB,EAClC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,EAAA;YAEjC,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,GAAI,CAC7C;QACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,OAAO,IAAG,eAAe,CAAO,CACvD,EACN;AACJ;;;;"}

package/lib/esm/src/components/index.d.ts

@@ -4,9 +4,10 @@ export { ChatHeader } from "./ChatHeader";
 export type { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
 export { MessageBubble } from "./MessageBubble";
 export type { MessageBubbleCssClasses, MessageBubbleProps, } from "./MessageBubble";
-export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
 export { ChatPanel } from "./ChatPanel";
 export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 export { ChatPopUp } from "./ChatPopUp";
 export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
+export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
+export type { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";
 //# sourceMappingURL=index.d.ts.map

package/lib/esm/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,YAAY,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/esm/src/hooks/useFetchInitialMessage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Sends a request to Chat API to fetch the initial message when the
+ * conversation first start or when the message history is reset.
+ *
+ * @internal
+ *
+ * @param handleError - A function which is called when an error occurs while fetching for initial message.
+ *                      By default, the error is logged to the console and an error message is added to state.
+ * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.
+ * @param customCondition - additional condition for when to fetch initial message
+ */
+export declare function useFetchInitialMessage(handleError?: (e: unknown) => void, stream?: boolean, customCondition?: boolean): void;
+//# sourceMappingURL=useFetchInitialMessage.d.ts.map

package/lib/esm/src/hooks/useFetchInitialMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchInitialMessage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useFetchInitialMessage.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,EAClC,MAAM,UAAQ,EACd,eAAe,UAAO,QAuCvB"}