@yext/chat-ui-react 0.7.3 → 0.8.1-alpha

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

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

@@ -2,7 +2,7 @@
  * Returns a default handler function for API errors. It will log the error and
  * add a default error message to state.
  *
- * @internal
+ * @public
  */
 export declare function useDefaultHandleApiError(): (e: unknown) => void;
 //# sourceMappingURL=useDefaultHandleApiError.d.ts.map

package/lib/esm/src/hooks/useDefaultHandleApiError.mjs

@@ -5,7 +5,7 @@ import { useCallback } from 'react';
  * Returns a default handler function for API errors. It will log the error and
  * add a default error message to state.
  *
- * @internal
+ * @public
  */
 function useDefaultHandleApiError() {
     const chat = useChatActions();

package/lib/esm/src/hooks/useDefaultHandleApiError.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultHandleApiError.mjs","sources":["../../../../src/hooks/useDefaultHandleApiError.ts"],"sourcesContent":["import { MessageSource, useChatActions } from \"@yext/chat-headless-react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a default handler function for API errors. It will log the error and\n * add a default error message to state.\n *\n * @internal\n */\nexport function useDefaultHandleApiError() {\n  const chat = useChatActions();\n\n  return useCallback(\n    (e: unknown) => {\n      console.error(e);\n      chat.addMessage({\n        text: \"Sorry, I'm unable to respond at the moment. Please try again later!\",\n        source: MessageSource.BOT,\n        timestamp: new Date().toISOString(),\n      });\n    },\n    [chat]\n  );\n}\n"],"names":[],"mappings":";;;AAGA;;;;;AAKG;SACa,wBAAwB,GAAA;AACtC,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;AAE9B,IAAA,OAAO,WAAW,CAChB,CAAC,CAAU,KAAI;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;AACd,YAAA,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAE,aAAa,CAAC,GAAG;AACzB,YAAA,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,SAAA,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ;;;;"}
+{"version":3,"file":"useDefaultHandleApiError.mjs","sources":["../../../../src/hooks/useDefaultHandleApiError.ts"],"sourcesContent":["import { MessageSource, useChatActions } from \"@yext/chat-headless-react\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a default handler function for API errors. It will log the error and\n * add a default error message to state.\n *\n * @public\n */\nexport function useDefaultHandleApiError() {\n  const chat = useChatActions();\n\n  return useCallback(\n    (e: unknown) => {\n      console.error(e);\n      chat.addMessage({\n        text: \"Sorry, I'm unable to respond at the moment. Please try again later!\",\n        source: MessageSource.BOT,\n        timestamp: new Date().toISOString(),\n      });\n    },\n    [chat]\n  );\n}\n"],"names":[],"mappings":";;;AAGA;;;;;AAKG;SACa,wBAAwB,GAAA;AACtC,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;AAE9B,IAAA,OAAO,WAAW,CAChB,CAAC,CAAU,KAAI;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;AACd,YAAA,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAE,aAAa,CAAC,GAAG;AACzB,YAAA,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,SAAA,CAAC,CAAC;AACL,KAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ;;;;"}

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.
+ *
+ * @public
+ *
+ * @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"}

package/lib/esm/src/hooks/useFetchInitialMessage.mjs

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { useChatActions, useChatState } from '@yext/chat-headless-react';
+import { useDefaultHandleApiError } from './useDefaultHandleApiError.mjs';
+
+/**
+ * Sends a request to Chat API to fetch the initial message when the
+ * conversation first start or when the message history is reset.
+ *
+ * @public
+ *
+ * @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 = useChatActions();
+    const defaultHandleApiError = useDefaultHandleApiError();
+    const messages = useChatState((state) => state.conversation.messages);
+    const [fetchInitialMessage, setFetchInitialMessage] = useState(messages.length === 0);
+    const [messagesLength, setMessagesLength] = useState(messages.length);
+    const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
+    //handle message history resets
+    useEffect(() => {
+        const newMessagesLength = messages.length;
+        // Fetch data only when the conversation messages changes from non-zero to zero
+        if (messagesLength > 0 && newMessagesLength === 0) {
+            setFetchInitialMessage(true);
+        }
+        setMessagesLength(newMessagesLength);
+    }, [messages.length, messagesLength]);
+    useEffect(() => {
+        if (!fetchInitialMessage || !canSendMessage || !customCondition) {
+            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,
+    ]);
+}
+
+export { useFetchInitialMessage };
+//# sourceMappingURL=useFetchInitialMessage.mjs.map

package/lib/esm/src/hooks/useFetchInitialMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchInitialMessage.mjs","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 * @public\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":[],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AACG,SAAU,sBAAsB,CACpC,WAAkC,EAClC,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,IAAI,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,QAAQ,CAAC,MAAM,KAAK,CAAC,CACtB,CAAC;AACF,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;;IAGF,SAAS,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;IAEtC,SAAS,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/src/hooks/useReportAnalyticsEvent.d.ts

@@ -4,7 +4,7 @@ import { ChatHeadless } from "@yext/chat-headless-react";
  * The payload will automatically includes chat-ui-react's
  * package version for "clientSdk" field.
  *
- * @internal
+ * @public
  */
 export declare function useReportAnalyticsEvent(): ChatHeadless["report"];
 //# sourceMappingURL=useReportAnalyticsEvent.d.ts.map

package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs

@@ -7,7 +7,7 @@ import { useCallback } from 'react';
  * The payload will automatically includes chat-ui-react's
  * package version for "clientSdk" field.
  *
- * @internal
+ * @public
  */
 function useReportAnalyticsEvent() {
     const chat = useChatActions();

package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useReportAnalyticsEvent.mjs","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"sourcesContent":["import { ChatHeadless, useChatActions } from \"@yext/chat-headless-react\";\nimport { version } from \"../../package.json\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a function to send requests to Yext Analytics API.\n * The payload will automatically includes chat-ui-react's\n * package version for \"clientSdk\" field.\n *\n * @internal\n */\nexport function useReportAnalyticsEvent(): ChatHeadless[\"report\"] {\n  const chat = useChatActions();\n  chat.addClientSdk({\n    CHAT_UI_REACT: version,\n  });\n  return useCallback((payload) => chat.report(payload), [chat]);\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;AAMG;SACa,uBAAuB,GAAA;AACrC,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC;AAChB,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA,CAAC,CAAC;AACH,IAAA,OAAO,WAAW,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE;;;;"}
+{"version":3,"file":"useReportAnalyticsEvent.mjs","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"sourcesContent":["import { ChatHeadless, useChatActions } from \"@yext/chat-headless-react\";\nimport { version } from \"../../package.json\";\nimport { useCallback } from \"react\";\n\n/**\n * Returns a function to send requests to Yext Analytics API.\n * The payload will automatically includes chat-ui-react's\n * package version for \"clientSdk\" field.\n *\n * @public\n */\nexport function useReportAnalyticsEvent(): ChatHeadless[\"report\"] {\n  const chat = useChatActions();\n  chat.addClientSdk({\n    CHAT_UI_REACT: version,\n  });\n  return useCallback((payload) => chat.report(payload), [chat]);\n}\n"],"names":[],"mappings":";;;;AAIA;;;;;;AAMG;SACa,uBAAuB,GAAA;AACrC,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC;AAChB,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA,CAAC,CAAC;AACH,IAAA,OAAO,WAAW,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE;;;;"}

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

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ * Scroll the messsages container to the top of the last message whenever there's
+ * an update to the messages state.
+ *
+ * @public
+ *
+ * @returns a ref to set on the messages container element and
+ *  a function to set ref on individual message element
+ */
+export declare function useScrollToLastMessage(): [
+    React.RefObject<HTMLDivElement>,
+    (index: number) => ((message: HTMLDivElement) => void) | undefined
+];
+//# sourceMappingURL=useScrollToLastMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToLastMessage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,IAAI;IACxC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS;CACnE,CA+BA"}

package/lib/esm/src/hooks/useScrollToLastMessage.mjs

@@ -0,0 +1,43 @@
+import { useChatState } from '@yext/chat-headless-react';
+import { useRef, useEffect, useCallback } from 'react';
+
+/**
+ * Scroll the messsages container to the top of the last message whenever there's
+ * an update to the messages state.
+ *
+ * @public
+ *
+ * @returns a ref to set on the messages container element and
+ *  a function to set ref on individual message element
+ */
+function useScrollToLastMessage() {
+    const messagesRef = useRef([]);
+    const messagesContainerRef = useRef(null);
+    const messages = useChatState((state) => state.conversation.messages);
+    // 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);
+        }
+        // Scroll to the top of the last message
+        messagesContainerRef.current?.scroll({
+            top: scrollTop,
+            behavior: "smooth",
+        });
+    }, [messages]);
+    const setMessageRef = useCallback((index) => {
+        if (!messagesRef?.current)
+            return undefined;
+        return (message) => (messagesRef.current[index] = message);
+    }, []);
+    return [messagesContainerRef, setMessageRef];
+}
+
+export { useScrollToLastMessage };
+//# sourceMappingURL=useScrollToLastMessage.mjs.map

package/lib/esm/src/hooks/useScrollToLastMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToLastMessage.mjs","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"sourcesContent":["import { useChatState } from \"@yext/chat-headless-react\";\nimport React, { useCallback, useEffect, useRef } from \"react\";\n\n/**\n * Scroll the messsages container to the top of the last message whenever there's\n * an update to the messages state.\n * \n * @public\n * \n * @returns a ref to set on the messages container element and\n *  a function to set ref on individual message element\n */\nexport function useScrollToLastMessage(): [\n  React.RefObject<HTMLDivElement>,\n  (index: number) => ((message: HTMLDivElement) => void) | undefined\n] {\n  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);\n  const messagesContainerRef = useRef<HTMLDivElement>(null);\n  const messages = useChatState((state) => state.conversation.messages);\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    messagesContainerRef.current?.scroll({\n      top: scrollTop,\n      behavior: \"smooth\",\n    });\n  }, [messages]);\n\n  const setMessageRef = useCallback((index) => {\n    if (!messagesRef?.current) return undefined;\n    return (message: HTMLDivElement) => (messagesRef.current[index] = message);\n  }, []);\n\n  return [messagesContainerRef, setMessageRef]\n}"],"names":[],"mappings":";;;AAGA;;;;;;;;AAQG;SACa,sBAAsB,GAAA;AAIpC,IAAA,MAAM,WAAW,GAAG,MAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC1D,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;IAGtE,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,CAAC,CAAC;AAClB,QAAA,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAGpE,QAAA,IAAI,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,SAAS,GAAG,WAAW,CAAC,OAAO;AAC5B,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACZ,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,YAAY,IAAI,CAAC,CAAC;AACzC,iBAAA,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,MAAM,CAAC,CAAC;AAC9C,SAAA;;AAGD,QAAA,oBAAoB,CAAC,OAAO,EAAE,MAAM,CAAC;AACnC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAK,KAAI;QAC1C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,SAAS,CAAC;AAC5C,QAAA,OAAO,CAAC,OAAuB,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5E,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAA;AAC9C;;;;"}

package/lib/esm/src/index.mjs

@@ -3,5 +3,11 @@ export { ChatHeader } from './components/ChatHeader.mjs';
 export { MessageBubble } from './components/MessageBubble.mjs';
 export { ChatPanel } from './components/ChatPanel.mjs';
 export { ChatPopUp } from './components/ChatPopUp.mjs';
+export { FeedbackButtons } from './components/FeedbackButtons.mjs';
+export { Markdown } from './components/Markdown.mjs';
 export { useComposedCssClasses } from './hooks/useComposedCssClasses.mjs';
+export { useDefaultHandleApiError } from './hooks/useDefaultHandleApiError.mjs';
+export { useFetchInitialMessage } from './hooks/useFetchInitialMessage.mjs';
+export { useReportAnalyticsEvent } from './hooks/useReportAnalyticsEvent.mjs';
+export { useScrollToLastMessage } from './hooks/useScrollToLastMessage.mjs';
 //# sourceMappingURL=index.mjs.map

package/lib/esm/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.7.3",
+  "version": "0.8.1-alpha",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
@@ -33,7 +33,7 @@
     "lint": "prettier --write . && eslint --fix --max-warnings=0 .",
     "test": "jest --config=jest.config.json",
     "storybook": "storybook dev -p 6006",
-    "dev": "tsc --watch -p tsconfig.json",
+    "dev": "rollup --watch --config rollup.config.mjs",
     "generate-docs": "api-extractor run --local --verbose && api-documenter markdown --input-folder temp --output-folder docs && rm -rf temp",
     "generate-notices": "generate-license-file --input package.json --output ./THIRD-PARTY-NOTICES --overwrite",
     "postcss": "postcss",

package/src/components/ChatPanel.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useChatState, useChatActions } from "@yext/chat-headless-react";
+import React, { useEffect } from "react";
+import { useChatState } from "@yext/chat-headless-react";
 import {
   MessageBubble,
   MessageBubbleCssClasses,
@@ -7,10 +7,13 @@ import {
 } from "./MessageBubble";
 import { ChatInput, ChatInputCssClasses, ChatInputProps } from "./ChatInput";
 import { LoadingDots } from "./LoadingDots";
-import { useComposedCssClasses } from "../hooks";
-import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
+import {
+  useComposedCssClasses,
+  useReportAnalyticsEvent,
+  useFetchInitialMessage,
+  useScrollToLastMessage,
+  } from "../hooks";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
-import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -66,16 +69,12 @@ export interface ChatPanelProps
  */
 export function ChatPanel(props: ChatPanelProps) {
   const { header, customCssClasses, stream, handleError } = props;
-  const chat = useChatActions();
   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();
-  const [fetchInitialMessage, setFetchInitialMessage] = useState(false);
+  useFetchInitialMessage(handleError, stream);
+  const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();
 
   useEffect(() => {
     reportAnalyticsEvent({
@@ -83,57 +82,14 @@ export function ChatPanel(props: ChatPanelProps) {
     });
   }, [reportAnalyticsEvent]);
 
-  // Request initial message only if there are no existing messages and no ongoing request.
-  useEffect(() => {
-    setFetchInitialMessage(messages.length === 0 && canSendMessage);
-  }, [messages.length, canSendMessage]);
-
-  useEffect(() => {
-    if (!fetchInitialMessage) {
-      return;
-    }
-    // Ensures that the fetch for the initial message occurs only once
-    setFetchInitialMessage(false);
-    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
-    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
-  }, [chat, stream, handleError, defaultHandleApiError, fetchInitialMessage]);
-
-  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
-  const messagesContainer = useRef<HTMLDivElement>(null);
-
-  // 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);
-    }
-
-    // Scroll to the top of the last message
-    messagesContainer.current?.scroll({
-      top: scrollTop,
-      behavior: "smooth",
-    });
-  }, [messages]);
-
-  const setMessagesRef = useCallback((index) => {
-    if (!messagesRef?.current) return null;
-    return (message) => (messagesRef.current[index] = message);
-  }, []);
-
   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={messagesContainerRef} className={cssClasses.messagesContainer}>
             {messages.map((message, index) => (
-              <div key={index} ref={setMessagesRef(index)}>
+              <div key={index} ref={setMessageRef(index)}>
                 <MessageBubble
                   {...props}
                   customCssClasses={cssClasses.messageBubbleCssClasses}

package/src/components/ChatPopUp.tsx

@@ -10,6 +10,12 @@ import { twMerge } from "tailwind-merge";
 import { useComposedCssClasses } from "../hooks";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent";
+import {
+  InitialMessagePopUp,
+  InitialMessagePopUpCssClasses,
+} from "./InitialMessagePopUp";
+import { useChatState } from "@yext/chat-headless-react";
+import { useFetchInitialMessage } from "../hooks/useFetchInitialMessage";
 
 /**
  * The CSS class interface for the {@link ChatPopUp} component.
@@ -22,11 +28,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;
 }
 
 const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
@@ -39,13 +50,20 @@ const builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(
       "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:
+    closedPopupContainer:
       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:
+      "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",
     },
@@ -67,10 +85,31 @@ export interface ChatPopUpProps
     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;
 }
 
 /**
@@ -87,36 +126,85 @@ export function ChatPopUp(props: ChatPopUpProps) {
     customCssClasses,
     showRestartButton = true,
     onClose: customOnClose,
+    handleError,
+    openOnLoad = false,
+    showInitialMessagePopUp = false,
+    showHeartBeatAnimation = false,
+    showUnreadNotification = false,
+    ctaLabel,
     title,
   } = props;
-  const reportAnalyticsEvent = useReportAnalyticsEvent();
 
+  const reportAnalyticsEvent = useReportAnalyticsEvent();
   useEffect(() => {
     reportAnalyticsEvent({
       action: "CHAT_IMPRESSION",
     });
   }, [reportAnalyticsEvent]);
 
-  const [renderChat, setRenderChat] = useState(false);
+  const messages = useChatState((s) => s.conversation.messages);
+  const [numReadMessages, setNumReadMessagesLength] = useState<number>(0);
+  const [numUnreadMessages, setNumUnreadMessagesLength] = useState<number>(0);
+
+  useFetchInitialMessage(
+    showInitialMessagePopUp ? console.error : handleError,
+    false,
+    showUnreadNotification || showInitialMessagePopUp
+  );
+
+  const [showInitialMessage, setshowInitialMessage] = useState(
+    //only show initial message popup (if specified) when CTA label is not provided
+    !ctaLabel && showInitialMessagePopUp
+  );
+  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 (
@@ -139,15 +227,49 @@ export function ChatPopUp(props: ChatPopUpProps) {
             />
           )}
         </div>
-        <button
-          aria-label="Chat Popup Button"
-          onClick={onClick}
-          className={buttonCssClasses}
+        <div
+          className={closedPopupContainerCssClasses}
+          aria-label="Chat Closed Popup Container"
         >
-          {openPanelButtonIcon ?? (
-            <ChatIcon className={cssClasses.buttonIcon} />
+          {showInitialMessage && (
+            <InitialMessagePopUp
+              onClose={onCloseInitialMessage}
+              customCssClasses={cssClasses.initialMessagePopUpCssClasses}
+            />
+          )}
+          {ctaLabel && (
+            // the div container is needed to islate the expand CSS animation
+            <div className={cssClasses.ctaLabelContainer}>
+              <button
+                onClick={onClick}
+                aria-label="CTA Label"
+                className={cssClasses.ctaLabel}
+              >
+                {ctaLabel}
+              </button>
+            </div>
           )}
-        </button>
+          <button
+            aria-label="Chat Popup Button"
+            onClick={onClick}
+            className={
+              cssClasses.button +
+              (showHeartBeatAnimation ? " animate-heartbeat" : "")
+            }
+          >
+            {openPanelButtonIcon ?? (
+              <ChatIcon className={cssClasses.buttonIcon} />
+            )}
+            {showUnreadNotification && !!numUnreadMessages && (
+              <div
+                aria-label="Unread Messages Notification"
+                className={cssClasses.notification}
+              >
+                {numUnreadMessages}
+              </div>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );

package/src/components/FeedbackButtons.tsx

@@ -39,9 +39,9 @@ const builtInCssClasses: FeedbackButtonsCssClasses =
 /**
  * The props for the FeedbackButtons component.
  *
- * @internal
+ * @public
  */
-interface FeedbackButtonsProps {
+export interface FeedbackButtonsProps {
   /** The response ID correlates to the current message to give feedback on. */
   responseId?: string;
   /** CSS classes for customizing the component styling. */
@@ -52,7 +52,7 @@ interface FeedbackButtonsProps {
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
  * report analytic events on click.
  *
- * @internal
+ * @public
  */
 export function FeedbackButtons({
   customCssClasses,