@yext/chat-ui-react 0.8.1-alpha.53.2 → 0.8.1

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

@@ -1 +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;;;;"}
+{"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 * @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":[],"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

@@ -1,8 +1,6 @@
 import { ChatHeadless } from "@yext/chat-headless-react";
 /**
  * Returns a function to send requests to Yext Analytics API.
- * The payload will automatically includes chat-ui-react's
- * package version for "clientSdk" field.
  *
  * @public
  */

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

@@ -1 +1 @@
-{"version":3,"file":"useReportAnalyticsEvent.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkB,MAAM,2BAA2B,CAAC;AAIzE;;;;;;GAMG;AACH,wBAAgB,uBAAuB,IAAI,YAAY,CAAC,QAAQ,CAAC,CAMhE"}
+{"version":3,"file":"useReportAnalyticsEvent.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useReportAnalyticsEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkB,MAAM,2BAA2B,CAAC;AAIzE;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,YAAY,CAAC,QAAQ,CAAC,CAMhE"}

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

@@ -4,8 +4,6 @@ import { useCallback } from 'react';
 
 /**
  * Returns a function to send requests to Yext Analytics API.
- * The payload will automatically includes chat-ui-react's
- * package version for "clientSdk" field.
  *
  * @public
  */

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 * @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;;;;"}
+{"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 *\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;;;;AAIG;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/index.mjs

@@ -3,11 +3,6 @@ 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.8.1-alpha.53.2",
+  "version": "0.8.1",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",

package/src/components/ChatPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useChatState } from "@yext/chat-headless-react";
 import {
   MessageBubble,
@@ -7,13 +7,10 @@ import {
 } from "./MessageBubble";
 import { ChatInput, ChatInputCssClasses, ChatInputProps } from "./ChatInput";
 import { LoadingDots } from "./LoadingDots";
-import {
-  useComposedCssClasses,
-  useReportAnalyticsEvent,
-  useFetchInitialMessage,
-  useScrollToLastMessage,
-  } from "../hooks";
+import { useComposedCssClasses } from "../hooks";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent";
+import { useFetchInitialMessage } from "../hooks/useFetchInitialMessage";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -50,10 +47,8 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
 export interface ChatPanelProps
   extends Omit<MessageBubbleProps, "customCssClasses" | "message">,
     Omit<ChatInputProps, "customCssClasses"> {
-  /** A custom header component to render at the top of the panel. */
+  /** A header to render at the top of the panel. */
   header?: JSX.Element;
-  /** A custom input component to render at the bottom of the panel. */
-  input?: JSX.Element;
   /**
    * CSS classes for customizing the component styling.
    */
@@ -70,13 +65,12 @@ export interface ChatPanelProps
  * @param props - {@link ChatPanelProps}
  */
 export function ChatPanel(props: ChatPanelProps) {
-  const { header, input, customCssClasses, stream, handleError } = props;
+  const { header, customCssClasses, stream, handleError } = props;
   const messages = useChatState((state) => state.conversation.messages);
   const loading = useChatState((state) => state.conversation.isLoading);
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   useFetchInitialMessage(handleError, stream);
-  const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();
 
   useEffect(() => {
     reportAnalyticsEvent({
@@ -84,14 +78,42 @@ export function ChatPanel(props: ChatPanelProps) {
     });
   }, [reportAnalyticsEvent]);
 
+  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={messagesContainerRef} className={cssClasses.messagesContainer}>
+          <div ref={messagesContainer} className={cssClasses.messagesContainer}>
             {messages.map((message, index) => (
-              <div key={index} ref={setMessageRef(index)}>
+              <div key={index} ref={setMessagesRef(index)}>
                 <MessageBubble
                   {...props}
                   customCssClasses={cssClasses.messageBubbleCssClasses}
@@ -103,7 +125,7 @@ export function ChatPanel(props: ChatPanelProps) {
           </div>
         </div>
         <div className={cssClasses.inputContainer}>
-          {input ?? <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />}
+          <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
         </div>
       </div>
     </div>

package/src/components/ChatPopUp.tsx

@@ -82,7 +82,7 @@ const builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(
  */
 export interface ChatPopUpProps
   extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">,
-    Omit<ChatPanelProps, "header" | "input" | "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. */

package/src/components/FeedbackButtons.tsx

@@ -39,9 +39,9 @@ const builtInCssClasses: FeedbackButtonsCssClasses =
 /**
  * The props for the FeedbackButtons component.
  *
- * @public
+ * @internal
  */
-export interface FeedbackButtonsProps {
+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 @@ export interface FeedbackButtonsProps {
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
  * report analytic events on click.
  *
- * @public
+ * @internal
  */
 export function FeedbackButtons({
   customCssClasses,

package/src/components/Markdown.tsx

@@ -19,12 +19,7 @@ const unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {
   ],
 };
 
-/**
- * The props for the {@link Markdown} component.
- * 
- * @public
- */
-export interface MarkdownProps {
+interface MarkdownProps {
   /** Stringified markdown. */
   content: string;
   /** The response ID correlates to the current message. */
@@ -40,7 +35,7 @@ export interface MarkdownProps {
  * @remarks
  * A link click will send a CHAT_LINK_CLICK analytics event
  *
- * @public
+ * @internal
  */
 export function Markdown({ content, responseId, className }: MarkdownProps) {
   const reportAnalyticsEvent = useReportAnalyticsEvent();

package/src/components/index.ts

@@ -16,10 +16,5 @@ export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 export { ChatPopUp } from "./ChatPopUp";
 export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
 
-export { FeedbackButtons } from "./FeedbackButtons";
-export type { FeedbackButtonsCssClasses, FeedbackButtonsProps } from "./FeedbackButtons";
-
-export { Markdown } from "./Markdown";
-export { MarkdownProps } from "./Markdown";
-
+export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
 export type { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";

package/src/hooks/index.ts

@@ -1,5 +1,2 @@
 export { useComposedCssClasses } from "./useComposedCssClasses";
-export { useDefaultHandleApiError } from "./useDefaultHandleApiError";
-export { useFetchInitialMessage } from "./useFetchInitialMessage";
-export { useReportAnalyticsEvent } from "./useReportAnalyticsEvent";
-export { useScrollToLastMessage } from "./useScrollToLastMessage";
+export { useReportAnalyticsEvent } from "./useReportAnalyticsEvent";

package/src/hooks/useDefaultHandleApiError.ts

@@ -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.
  *
- * @public
+ * @internal
  */
 export function useDefaultHandleApiError() {
   const chat = useChatActions();

package/src/hooks/useFetchInitialMessage.ts

@@ -6,7 +6,7 @@ import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
  * Sends a request to Chat API to fetch the initial message when the
  * conversation first start or when the message history is reset.
  *
- * @public
+ * @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.

package/src/hooks/useReportAnalyticsEvent.ts

@@ -4,8 +4,6 @@ import { useCallback } from "react";
 
 /**
  * Returns a function to send requests to Yext Analytics API.
- * The payload will automatically includes chat-ui-react's
- * package version for "clientSdk" field.
  *
  * @public
  */

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

@@ -1,15 +0,0 @@
-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/commonjs/src/hooks/useScrollToLastMessage.d.ts.map

@@ -1 +0,0 @@
-{"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/commonjs/src/hooks/useScrollToLastMessage.js

@@ -1,45 +0,0 @@
-'use strict';
-
-var chatHeadlessReact = require('@yext/chat-headless-react');
-var React = require('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 = React.useRef([]);
-    const messagesContainerRef = React.useRef(null);
-    const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
-    // Handle scrolling when messages change
-    React.useEffect(() => {
-        let scrollTop = 0;
-        messagesRef.current = messagesRef.current.slice(0, messages.length);
-        // Sums up scroll heights of all messages except the last one
-        if (messagesRef?.current.length > 1) {
-            scrollTop = messagesRef.current
-                .slice(0, -1)
-                .map((elem, _) => elem?.scrollHeight ?? 0)
-                .reduce((total, height) => total + height);
-        }
-        // Scroll to the top of the last message
-        messagesContainerRef.current?.scroll({
-            top: scrollTop,
-            behavior: "smooth",
-        });
-    }, [messages]);
-    const setMessageRef = React.useCallback((index) => {
-        if (!messagesRef?.current)
-            return undefined;
-        return (message) => (messagesRef.current[index] = message);
-    }, []);
-    return [messagesContainerRef, setMessageRef];
-}
-
-exports.useScrollToLastMessage = useScrollToLastMessage;
-//# sourceMappingURL=useScrollToLastMessage.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToLastMessage.js","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":["useRef","useChatState","useEffect","useCallback"],"mappings":";;;;;AAGA;;;;;;;;AAQG;SACa,sBAAsB,GAAA;AAIpC,IAAA,MAAM,WAAW,GAAGA,YAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,oBAAoB,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;AAC1D,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;IAGtEC,eAAS,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,GAAGC,iBAAW,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/hooks/useScrollToLastMessage.d.ts

@@ -1,15 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,43 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/hooks/useScrollToLastMessage.ts

@@ -1,47 +0,0 @@
-import { useChatState } from "@yext/chat-headless-react";
-import React, { useCallback, useEffect, useRef } 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 function useScrollToLastMessage(): [
-  React.RefObject<HTMLDivElement>,
-  (index: number) => ((message: HTMLDivElement) => void) | undefined
-] {
-  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
-  const messagesContainerRef = useRef<HTMLDivElement>(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: HTMLDivElement) => (messagesRef.current[index] = message);
-  }, []);
-
-  return [messagesContainerRef, setMessageRef]
-}