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

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

@@ -1,13 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useCallback } from '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 { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
 import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
-import { useScrollToLastMessage } from '../hooks/useScrollToLastMessage.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
+import { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
 
 const builtInCssClasses = withStylelessCssClasses("Panel", {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
@@ -34,18 +33,41 @@ function ChatPanel(props) {
     const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
     const reportAnalyticsEvent = useReportAnalyticsEvent();
     useFetchInitialMessage(handleError, stream);
-    const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();
     useEffect(() => {
         reportAnalyticsEvent({
             action: "CHAT_IMPRESSION",
         });
     }, [reportAnalyticsEvent]);
+    const messagesRef = useRef([]);
+    const messagesContainer = useRef(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 (React.createElement("div", { className: "yext-chat w-full h-full" },
         React.createElement("div", { className: cssClasses.container },
             header,
             React.createElement("div", { className: cssClasses.messagesScrollContainer },
-                React.createElement("div", { ref: messagesContainerRef, className: cssClasses.messagesContainer },
-                    messages.map((message, index) => (React.createElement("div", { key: index, ref: setMessageRef(index) },
+                React.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer },
+                    messages.map((message, index) => (React.createElement("div", { key: index, ref: setMessagesRef(index) },
                         React.createElement(MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, message: message })))),
                     loading && React.createElement(LoadingDots, null))),
             React.createElement("div", { className: cssClasses.inputContainer },

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, { useEffect } 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 {\n  useComposedCssClasses,\n  useReportAnalyticsEvent,\n  useFetchInitialMessage,\n  useScrollToLastMessage,\n  } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\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  const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();\n\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\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={messagesContainerRef} className={cssClasses.messagesContainer}>\n            {messages.map((message, index) => (\n              <div key={index} ref={setMessageRef(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":";;;;;;;;;;;AA+BA,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,0DAA0D;AACrE,IAAA,uBAAuB,EAAE,uCAAuC;AAChE,IAAA,iBAAiB,EAAE,0CAA0C;AAC7D,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,uBAAuB,EAAE;AACvB,QAAA,YAAY,EAAE,YAAY;AAC3B,KAAA;AACF,CAAA,CACF,CAAC;AAkBF;;;;;;;;AAQG;AACG,SAAU,SAAS,CAAC,KAAqB,EAAA;IAC7C,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAChE,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAC9E,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;AACvD,IAAA,sBAAsB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAC5C,MAAM,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG,sBAAsB,EAAE,CAAC;IAEvE,SAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAE3B,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACjC,MAAM;AACP,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAA;gBAChD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,oBAAoB,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA;oBACpE,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC3B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EAAA;AACxC,wBAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EACR,EAAA,GAAA,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,uBAAuB,EACpD,OAAO,EAAE,OAAO,EAChB,CAAA,CACE,CACP,CAAC;AACD,oBAAA,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,CACvB,CACF;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA;AACvC,gBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,KAAK,EAAE,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAAI,CAAA,CAClE,CACF,CACF,EACN;AACJ;;;;"}
+{"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":";;;;;;;;;;AA4BA,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,0DAA0D;AACrE,IAAA,uBAAuB,EAAE,uCAAuC;AAChE,IAAA,iBAAiB,EAAE,0CAA0C;AAC7D,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,uBAAuB,EAAE;AACvB,QAAA,YAAY,EAAE,YAAY;AAC3B,KAAA;AACF,CAAA,CACF,CAAC;AAkBF;;;;;;;;AAQG;AACG,SAAU,SAAS,CAAC,KAAqB,EAAA;IAC7C,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAChE,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAC9E,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;AACvD,IAAA,sBAAsB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAE5C,SAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAE3B,IAAA,MAAM,WAAW,GAAG,MAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;;IAGvD,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,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC;AAChC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAAK,KAAI;QAC3C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,IAAI,CAAC;AACvC,QAAA,OAAO,CAAC,OAAO,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5D,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;YACjC,MAAM;AACP,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAA;gBAChD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA;oBACjE,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC3B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC,EAAA;AACzC,wBAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EACR,EAAA,GAAA,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,uBAAuB,EACpD,OAAO,EAAE,OAAO,EAChB,CAAA,CACE,CACP,CAAC;AACD,oBAAA,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,CACvB,CACF;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA;AACvC,gBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,KAAK,EAAE,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAAI,CAAA,CAClE,CACF,CACF,EACN;AACJ;;;;"}

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

@@ -4,11 +4,11 @@ import { ChatPanel } from './ChatPanel.mjs';
 import { ChatHeader } from './ChatHeader.mjs';
 import { twMerge } from 'tailwind-merge';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
-import { useChatState } from '@yext/chat-headless-react';
-import { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
 import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.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", {

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

@@ -16,9 +16,9 @@ export interface 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. */
@@ -28,7 +28,8 @@ export interface FeedbackButtonsProps {
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
  * report analytic events on click.
  *
- * @public
+ * @internal
  */
 export declare function FeedbackButtons({ customCssClasses, responseId, }: FeedbackButtonsProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=FeedbackButtons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackButtons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAgBD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;CAC9C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACX,EAAE,oBAAoB,qBA+CtB"}
+{"version":3,"file":"FeedbackButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackButtons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAgBD;;;;GAIG;AACH,UAAU,oBAAoB;IAC5B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;CAC9C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACX,EAAE,oBAAoB,qBA+CtB"}

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

@@ -5,7 +5,6 @@ import { ThumbsUpFillIcon } from '../icons/ThumbsUpFill.mjs';
 import { ThumbsDownFillIcon } from '../icons/ThumbsDownFill.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
-import '@yext/chat-headless-react';
 import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
 
 const builtInCssClasses = withStylelessCssClasses("FeedbackButtons", {
@@ -21,7 +20,7 @@ const builtInCssClasses = withStylelessCssClasses("FeedbackButtons", {
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
  * report analytic events on click.
  *
- * @public
+ * @internal
  */
 function FeedbackButtons({ customCssClasses, responseId, }) {
     const reportAnalyticsEvent = useReportAnalyticsEvent();

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackButtons.mjs","sources":["../../../../src/components/FeedbackButtons.tsx"],"sourcesContent":["import { ThumbsDownIcon } from \"../icons/ThumbsDown\";\nimport { ThumbsUpIcon } from \"../icons/ThumbsUp\";\nimport React, { useCallback, useState } from \"react\";\nimport { ThumbsUpFillIcon } from \"../icons/ThumbsUpFill\";\nimport { ThumbsDownFillIcon } from \"../icons/ThumbsDownFill\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the FeedbackButtons component.\n *\n * @public\n */\nexport interface FeedbackButtonsCssClasses {\n  container?: string;\n  thumbsUpButton?: string;\n  thumbsUpIcon?: string;\n  thumbsUpFillIcon?: string;\n  thumbsDownButton?: string;\n  thumbsDownIcon?: string;\n  thumbsDownFillIcon?: string;\n}\n\nconst builtInCssClasses: FeedbackButtonsCssClasses =\n  withStylelessCssClasses<FeedbackButtonsCssClasses>(\"FeedbackButtons\", {\n    container:\n      \"flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200\",\n    thumbsUpButton:\n      \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n    thumbsUpIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n    thumbsUpFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n    thumbsDownButton:\n      \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n    thumbsDownIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n    thumbsDownFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n  });\n\n/**\n * The props for the FeedbackButtons component.\n *\n * @public\n */\nexport interface FeedbackButtonsProps {\n  /** The response ID correlates to the current message to give feedback on. */\n  responseId?: string;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: FeedbackButtonsCssClasses;\n}\n\n/**\n * Displays feedback buttons (e.g. thumbs up and thumbs down) that will\n * report analytic events on click.\n *\n * @public\n */\nexport function FeedbackButtons({\n  customCssClasses,\n  responseId,\n}: FeedbackButtonsProps) {\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const [selectedThumb, setSelectedThumb] = useState<\n    \"UP\" | \"DOWN\" | undefined\n  >();\n  const onClickThumbsUp = useCallback(() => {\n    setSelectedThumb(\"UP\");\n    reportAnalyticsEvent({\n      action: \"THUMBS_UP\",\n      chat: {\n        responseId,\n      },\n    });\n  }, [reportAnalyticsEvent, responseId]);\n\n  const onClickThumbsDown = useCallback(() => {\n    setSelectedThumb(\"DOWN\");\n    reportAnalyticsEvent({\n      action: \"THUMBS_DOWN\",\n      chat: {\n        responseId,\n      },\n    });\n  }, [reportAnalyticsEvent, responseId]);\n\n  return (\n    <div className={cssClasses.container}>\n      <button className={cssClasses.thumbsUpButton} onClick={onClickThumbsUp}>\n        {selectedThumb === \"UP\" ? (\n          <ThumbsUpFillIcon className={cssClasses.thumbsUpFillIcon} />\n        ) : (\n          <ThumbsUpIcon className={cssClasses.thumbsUpIcon} />\n        )}\n      </button>\n      <button\n        className={cssClasses.thumbsDownButton}\n        onClick={onClickThumbsDown}\n      >\n        {selectedThumb === \"DOWN\" ? (\n          <ThumbsDownFillIcon className={cssClasses.thumbsDownFillIcon} />\n        ) : (\n          <ThumbsDownIcon className={cssClasses.thumbsDownIcon} />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,iBAAiB,GACrB,uBAAuB,CAA4B,iBAAiB,EAAE;AACpE,IAAA,SAAS,EACP,sFAAsF;AACxF,IAAA,cAAc,EACZ,iEAAiE;AACnE,IAAA,YAAY,EAAE,2CAA2C;AACzD,IAAA,gBAAgB,EAAE,2CAA2C;AAC7D,IAAA,gBAAgB,EACd,iEAAiE;AACnE,IAAA,cAAc,EAAE,2CAA2C;AAC3D,IAAA,kBAAkB,EAAE,2CAA2C;AAChE,CAAA,CAAC,CAAC;AAcL;;;;;AAKG;SACa,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACW,EAAA;AACrB,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACvB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EACnE,EAAA,aAAa,KAAK,IAAI,IACrB,oBAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,KAE5D,oBAAC,YAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,CAAI,CACrD,CACM;QACT,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,EAEzB,aAAa,KAAK,MAAM,IACvB,KAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,KAEhE,oBAAC,cAAc,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,CAAI,CACzD,CACM,CACL,EACN;AACJ;;;;"}
+{"version":3,"file":"FeedbackButtons.mjs","sources":["../../../../src/components/FeedbackButtons.tsx"],"sourcesContent":["import { ThumbsDownIcon } from \"../icons/ThumbsDown\";\nimport { ThumbsUpIcon } from \"../icons/ThumbsUp\";\nimport React, { useCallback, useState } from \"react\";\nimport { ThumbsUpFillIcon } from \"../icons/ThumbsUpFill\";\nimport { ThumbsDownFillIcon } from \"../icons/ThumbsDownFill\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the FeedbackButtons component.\n *\n * @public\n */\nexport interface FeedbackButtonsCssClasses {\n  container?: string;\n  thumbsUpButton?: string;\n  thumbsUpIcon?: string;\n  thumbsUpFillIcon?: string;\n  thumbsDownButton?: string;\n  thumbsDownIcon?: string;\n  thumbsDownFillIcon?: string;\n}\n\nconst builtInCssClasses: FeedbackButtonsCssClasses =\n  withStylelessCssClasses<FeedbackButtonsCssClasses>(\"FeedbackButtons\", {\n    container:\n      \"flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200\",\n    thumbsUpButton:\n      \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n    thumbsUpIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n    thumbsUpFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n    thumbsDownButton:\n      \"w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center\",\n    thumbsDownIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n    thumbsDownFillIcon: \"text-white w-[22px] h-[22px] stroke-[0.2]\",\n  });\n\n/**\n * The props for the FeedbackButtons component.\n *\n * @internal\n */\ninterface FeedbackButtonsProps {\n  /** The response ID correlates to the current message to give feedback on. */\n  responseId?: string;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: FeedbackButtonsCssClasses;\n}\n\n/**\n * Displays feedback buttons (e.g. thumbs up and thumbs down) that will\n * report analytic events on click.\n *\n * @internal\n */\nexport function FeedbackButtons({\n  customCssClasses,\n  responseId,\n}: FeedbackButtonsProps) {\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const [selectedThumb, setSelectedThumb] = useState<\n    \"UP\" | \"DOWN\" | undefined\n  >();\n  const onClickThumbsUp = useCallback(() => {\n    setSelectedThumb(\"UP\");\n    reportAnalyticsEvent({\n      action: \"THUMBS_UP\",\n      chat: {\n        responseId,\n      },\n    });\n  }, [reportAnalyticsEvent, responseId]);\n\n  const onClickThumbsDown = useCallback(() => {\n    setSelectedThumb(\"DOWN\");\n    reportAnalyticsEvent({\n      action: \"THUMBS_DOWN\",\n      chat: {\n        responseId,\n      },\n    });\n  }, [reportAnalyticsEvent, responseId]);\n\n  return (\n    <div className={cssClasses.container}>\n      <button className={cssClasses.thumbsUpButton} onClick={onClickThumbsUp}>\n        {selectedThumb === \"UP\" ? (\n          <ThumbsUpFillIcon className={cssClasses.thumbsUpFillIcon} />\n        ) : (\n          <ThumbsUpIcon className={cssClasses.thumbsUpIcon} />\n        )}\n      </button>\n      <button\n        className={cssClasses.thumbsDownButton}\n        onClick={onClickThumbsDown}\n      >\n        {selectedThumb === \"DOWN\" ? (\n          <ThumbsDownFillIcon className={cssClasses.thumbsDownFillIcon} />\n        ) : (\n          <ThumbsDownIcon className={cssClasses.thumbsDownIcon} />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAwBA,MAAM,iBAAiB,GACrB,uBAAuB,CAA4B,iBAAiB,EAAE;AACpE,IAAA,SAAS,EACP,sFAAsF;AACxF,IAAA,cAAc,EACZ,iEAAiE;AACnE,IAAA,YAAY,EAAE,2CAA2C;AACzD,IAAA,gBAAgB,EAAE,2CAA2C;AAC7D,IAAA,gBAAgB,EACd,iEAAiE;AACnE,IAAA,cAAc,EAAE,2CAA2C;AAC3D,IAAA,kBAAkB,EAAE,2CAA2C;AAChE,CAAA,CAAC,CAAC;AAcL;;;;;AAKG;SACa,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACW,EAAA;AACrB,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACvB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzB,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,IAAI,EAAE;gBACJ,UAAU;AACX,aAAA;AACF,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EACnE,EAAA,aAAa,KAAK,IAAI,IACrB,oBAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,KAE5D,oBAAC,YAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,YAAY,EAAA,CAAI,CACrD,CACM;QACT,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,EAEzB,aAAa,KAAK,MAAM,IACvB,KAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,KAEhE,oBAAC,cAAc,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,CAAI,CACzD,CACM,CACL,EACN;AACJ;;;;"}

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

@@ -1,10 +1,5 @@
 import React from "react";
-/**
- * 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. */
@@ -19,7 +14,8 @@ export interface MarkdownProps {
  * @remarks
  * A link click will send a CHAT_LINK_CLICK analytics event
  *
- * @public
+ * @internal
  */
 export declare function Markdown({ content, responseId, className }: MarkdownProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=Markdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,aAAa,qBAuCzE"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC,UAAU,aAAa;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,aAAa,qBAuCzE"}

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

@@ -22,7 +22,7 @@ const unifiedPlugins = {
  * @remarks
  * A link click will send a CHAT_LINK_CLICK analytics event
  *
- * @public
+ * @internal
  */
 function Markdown({ content, responseId, className }) {
     const reportAnalyticsEvent = useReportAnalyticsEvent();

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","sources":["../../../../src/components/Markdown.tsx"],"sourcesContent":["import ReactMarkdown, {\n  PluggableList,\n  ReactMarkdownOptions,\n} from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeSanitize from \"rehype-sanitize\";\nimport React, { useMemo } from \"react\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.\nconst unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {\n  remark: [\n    remarkGfm, //renders Github-Flavored Markdown\n  ],\n  rehype: [\n    rehypeRaw, //to support HTML embedded in markdown\n    rehypeSanitize, //to sanitize HTML content\n  ],\n};\n\n/**\n * The props for the {@link Markdown} component.\n * \n * @public\n */\nexport interface MarkdownProps {\n  /** Stringified markdown. */\n  content: string;\n  /** The response ID correlates to the current message. */\n  responseId?: string;\n  /** Classnames for the container. */\n  className?: string;\n}\n\n/**\n * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include\n * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.\n *\n * @remarks\n * A link click will send a CHAT_LINK_CLICK analytics event\n *\n * @public\n */\nexport function Markdown({ content, responseId, className }: MarkdownProps) {\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n  const components: ReactMarkdownOptions[\"components\"] = useMemo(() => {\n    const createClickHandlerFn = (href?: string) => () => {\n      reportAnalyticsEvent({\n        action: \"CHAT_LINK_CLICK\",\n        destinationUrl: href,\n        chat: {\n          responseId,\n        },\n      });\n    };\n    return {\n      a: ({ node: _, children, ...props }) => {\n        return (\n          <a\n            {...props}\n            onClick={createClickHandlerFn(props.href)}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"cursor-pointer\"\n          >\n            {children}\n          </a>\n        );\n      },\n    };\n  }, [reportAnalyticsEvent, responseId]);\n\n  return (\n    <ReactMarkdown\n      className={className}\n      children={content}\n      remarkPlugins={unifiedPlugins.remark}\n      rehypePlugins={unifiedPlugins.rehype}\n      components={components}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAUA;AACA,MAAM,cAAc,GAAsD;AACxE,IAAA,MAAM,EAAE;AACN,QAAA,SAAS;AACV,KAAA;AACD,IAAA,MAAM,EAAE;QACN,SAAS;AACT,QAAA,cAAc;AACf,KAAA;CACF,CAAC;AAgBF;;;;;;;;AAQG;AACG,SAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAiB,EAAA;AACxE,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAuC,OAAO,CAAC,MAAK;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAAK,MAAK;AACnD,YAAA,oBAAoB,CAAC;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,IAAI,EAAE;oBACJ,UAAU;AACX,iBAAA;AACF,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;QACF,OAAO;AACL,YAAA,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AACrC,gBAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,gBAAgB,EAEzB,EAAA,QAAQ,CACP,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB,EACF;AACJ;;;;"}
+{"version":3,"file":"Markdown.mjs","sources":["../../../../src/components/Markdown.tsx"],"sourcesContent":["import ReactMarkdown, {\n  PluggableList,\n  ReactMarkdownOptions,\n} from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeSanitize from \"rehype-sanitize\";\nimport React, { useMemo } from \"react\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n// The Remark and Rehype plugins to use in conjunction with ReactMarkdown.\nconst unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {\n  remark: [\n    remarkGfm, //renders Github-Flavored Markdown\n  ],\n  rehype: [\n    rehypeRaw, //to support HTML embedded in markdown\n    rehypeSanitize, //to sanitize HTML content\n  ],\n};\n\ninterface MarkdownProps {\n  /** Stringified markdown. */\n  content: string;\n  /** The response ID correlates to the current message. */\n  responseId?: string;\n  /** Classnames for the container. */\n  className?: string;\n}\n\n/**\n * Renders Github-Flavored Markdown from the Knowledge Graph. This Markdown can include\n * arbitrary HTML. Any HTML will be sanitized according to Rehype's default Schema.\n *\n * @remarks\n * A link click will send a CHAT_LINK_CLICK analytics event\n *\n * @internal\n */\nexport function Markdown({ content, responseId, className }: MarkdownProps) {\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n  const components: ReactMarkdownOptions[\"components\"] = useMemo(() => {\n    const createClickHandlerFn = (href?: string) => () => {\n      reportAnalyticsEvent({\n        action: \"CHAT_LINK_CLICK\",\n        destinationUrl: href,\n        chat: {\n          responseId,\n        },\n      });\n    };\n    return {\n      a: ({ node: _, children, ...props }) => {\n        return (\n          <a\n            {...props}\n            onClick={createClickHandlerFn(props.href)}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"cursor-pointer\"\n          >\n            {children}\n          </a>\n        );\n      },\n    };\n  }, [reportAnalyticsEvent, responseId]);\n\n  return (\n    <ReactMarkdown\n      className={className}\n      children={content}\n      remarkPlugins={unifiedPlugins.remark}\n      rehypePlugins={unifiedPlugins.rehype}\n      components={components}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAUA;AACA,MAAM,cAAc,GAAsD;AACxE,IAAA,MAAM,EAAE;AACN,QAAA,SAAS;AACV,KAAA;AACD,IAAA,MAAM,EAAE;QACN,SAAS;AACT,QAAA,cAAc;AACf,KAAA;CACF,CAAC;AAWF;;;;;;;;AAQG;AACG,SAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAiB,EAAA;AACxE,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAuC,OAAO,CAAC,MAAK;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAAK,MAAK;AACnD,YAAA,oBAAoB,CAAC;AACnB,gBAAA,MAAM,EAAE,iBAAiB;AACzB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,IAAI,EAAE;oBACJ,UAAU;AACX,iBAAA;AACF,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;QACF,OAAO;AACL,YAAA,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AACrC,gBAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,gBAAgB,EAEzB,EAAA,QAAQ,CACP,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,EAAA,CACtB,EACF;AACJ;;;;"}

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

@@ -8,9 +8,6 @@ export { ChatPanel } from "./ChatPanel";
 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";
 //# 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,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,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEzF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,YAAY,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,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/index.d.ts

@@ -1,6 +1,3 @@
 export { useComposedCssClasses } from "./useComposedCssClasses";
-export { useDefaultHandleApiError } from "./useDefaultHandleApiError";
-export { useFetchInitialMessage } from "./useFetchInitialMessage";
 export { useReportAnalyticsEvent } from "./useReportAnalyticsEvent";
-export { useScrollToLastMessage } from "./useScrollToLastMessage";
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"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,uBAAuB,EAAE,MAAM,2BAA2B,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.
  *
- * @public
+ * @internal
  */
 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.
  *
- * @public
+ * @internal
  */
 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 * @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;;;;"}
+{"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;;;;"}

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

@@ -2,7 +2,7 @@
  * 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/lib/esm/src/hooks/useFetchInitialMessage.mjs

@@ -6,7 +6,7 @@ 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
+ * @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/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",
+  "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.
@@ -74,7 +71,6 @@ export function ChatPanel(props: ChatPanelProps) {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   useFetchInitialMessage(handleError, stream);
-  const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();
 
   useEffect(() => {
     reportAnalyticsEvent({
@@ -82,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}

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"}