@yext/chat-ui-react 0.5.5 → 0.6.0-alpha.38

package/lib/commonjs/src/components/ChatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatInput.js","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { useChatActions, useChatState } from \"@yext/chat-headless-react\";\nimport { ArrowIcon } from \"../icons/Arrow\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\n\n/**\n * The CSS class interface for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputCssClasses {\n  container?: string;\n  textArea?: string;\n  sendButton?: string;\n}\n\nconst builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(\n  \"Input\",\n  {\n    container: \"w-full h-fit flex flex-row relative @container\",\n    textArea:\n      \"w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900\",\n    sendButton:\n      \"rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5\",\n  }\n);\n\n/**\n * The props for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputProps {\n  /**\n   * The input's placeholder text when no text has been entered by the user.\n   * Defaults to \"Type a message...\".\n   */\n  placeholder?: string;\n  /**\n   * Enable streaming behavior by making a request to Chat Streaming API.\n   * This feature is experimental, and is subject to change.\n   * Defaults to false.\n   */\n  stream?: boolean;\n  /** Enable auto focus for the input box. Defaults to false. */\n  inputAutoFocus?: boolean;\n  /**\n   * A function which is called when an error occurs from Chat API while processing the user's message.\n   * By default, the error is logged to the console and an error message is added to state.\n   */\n  handleError?: (e: unknown) => void;\n  /** Custom icon for the send button. */\n  sendButtonIcon?: JSX.Element;\n  /** CSS classes for customizing the component styling. */\n  customCssClasses?: ChatInputCssClasses;\n}\n\n/**\n * A component that allows user to input message and send to Chat API.\n *\n * @remarks\n * Pressing \"Enter\" key will send the current message.\n * To add a newline, press \"Shift\" and \"Enter\".\n *\n * @public\n *\n * @param props - {@link ChatInputProps}\n */\nexport function ChatInput({\n  placeholder = \"Type a message...\",\n  stream = false,\n  inputAutoFocus = false,\n  handleError,\n  sendButtonIcon = <ArrowIcon />,\n  customCssClasses,\n}: ChatInputProps) {\n  const chat = useChatActions();\n  const [input, setInput] = useState(\"\");\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const defaultHandleApiError = useDefaultHandleApiError();\n\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const sendMessage = useCallback(async () => {\n    const res = stream\n      ? chat.streamNextMessage(input)\n      : chat.getNextMessage(input);\n    setInput(\"\");\n    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n  }, [chat, input, handleError, defaultHandleApiError, stream]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (!e.shiftKey && e.key === \"Enter\") {\n        e.preventDefault();\n        if (canSendMessage && input.trim().length !== 0) {\n          sendMessage();\n        }\n      }\n    },\n    [sendMessage, canSendMessage, input]\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setInput(e.target.value);\n    },\n    []\n  );\n\n  return (\n    <div className={cssClasses.container}>\n      <TextareaAutosize\n        autoFocus={inputAutoFocus}\n        onKeyDown={handleKeyDown}\n        value={input}\n        onChange={onInputChange}\n        className={cssClasses.textArea}\n        placeholder={placeholder}\n      />\n      <button\n        aria-label=\"Send Message\"\n        disabled={!canSendMessage || input.trim().length === 0}\n        onClick={sendMessage}\n        className={cssClasses.sendButton}\n      >\n        {sendButtonIcon}\n      </button>\n    </div>\n  );\n}\n"],"names":["withStylelessCssClasses","_jsx","ArrowIcon","useChatActions","useState","useChatState","useDefaultHandleApiError","useComposedCssClasses","useCallback","_jsxs"],"mappings":";;;;;;;;;;;AAmBA,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,gDAAgD;AAC3D,IAAA,QAAQ,EACN,uKAAuK;AACzK,IAAA,UAAU,EACR,mLAAmL;AACtL,CAAA,CACF,CAAC;AAgCF;;;;;;;;;;AAUG;AACG,SAAU,SAAS,CAAC,EACxB,WAAW,GAAG,mBAAmB,EACjC,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,cAAc,GAAGC,cAAA,CAACC,eAAS,EAAA,EAAA,CAAG,EAC9B,gBAAgB,GACD,EAAA;AACf,IAAA,MAAM,IAAI,GAAGC,gCAAc,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAGC,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;IAEzD,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAAC,YAAW;QACzC,MAAM,GAAG,GAAG,MAAM;AAChB,cAAE,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;AAC/B,cAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9D,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAA2C,KAAI;QAC9C,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/C,gBAAA,WAAW,EAAE,CAAC;AACf,aAAA;AACF,SAAA;KACF,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAClC,QAAA,EAAA,CAAAR,cAAA,CAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,CAAA,EACFA,cACa,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EACzB,QAAQ,EAAE,CAAC,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EACtD,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,UAAU,EAE/B,QAAA,EAAA,cAAc,EACR,CAAA,CAAA,EAAA,CACL,EACN;AACJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAeD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA2D9C"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAeD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA6D9C"}

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

@@ -1,22 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const chat_headless_react_1 = require("@yext/chat-headless-react");
-const MessageBubble_1 = require("./MessageBubble");
-const ChatInput_1 = require("./ChatInput");
-const LoadingDots_1 = require("./LoadingDots");
-const hooks_1 = require("../hooks");
-const useDefaultHandleApiError_1 = require("../hooks/useDefaultHandleApiError");
-const withStylelessCssClasses_1 = require("../utils/withStylelessCssClasses");
-const useReportAnalyticsEvent_1 = require("../hooks/useReportAnalyticsEvent");
-const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)("Panel", {
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var MessageBubble = require('./MessageBubble.js');
+var ChatInput = require('./ChatInput.js');
+var LoadingDots = require('./LoadingDots.js');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var useDefaultHandleApiError = require('../hooks/useDefaultHandleApiError.js');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
+
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("Panel", {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
     messagesScrollContainer: "flex flex-col mt-auto overflow-hidden",
-    messagesContainer: "flex flex-col gap-y-1 px-4 pb-[85px] overflow-auto",
-    inputContainer: "w-full absolute bottom-0 p-4 backdrop-blur-lg",
+    messagesContainer: "flex flex-col gap-y-1 px-4 overflow-auto",
+    inputContainer: "w-full p-4",
     messageBubbleCssClasses: {
         topContainer: "first:mt-4",
     },
@@ -32,20 +31,20 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
  */
 function ChatPanel(props) {
     const { header, customCssClasses } = props;
-    const chat = (0, chat_headless_react_1.useChatActions)();
-    const messages = (0, chat_headless_react_1.useChatState)((state) => state.conversation.messages);
-    const loading = (0, chat_headless_react_1.useChatState)((state) => state.conversation.isLoading);
-    const canSendMessage = (0, chat_headless_react_1.useChatState)((state) => state.conversation.canSendMessage);
-    const cssClasses = (0, hooks_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
-    const defaultHandleApiError = (0, useDefaultHandleApiError_1.useDefaultHandleApiError)();
-    const reportAnalyticsEvent = (0, useReportAnalyticsEvent_1.useReportAnalyticsEvent)();
-    (0, react_2.useEffect)(() => {
+    const chat = chatHeadlessReact.useChatActions();
+    const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
+    const loading = chatHeadlessReact.useChatState((state) => state.conversation.isLoading);
+    const canSendMessage = chatHeadlessReact.useChatState((state) => state.conversation.canSendMessage);
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const defaultHandleApiError = useDefaultHandleApiError.useDefaultHandleApiError();
+    const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
+    react.useEffect(() => {
         reportAnalyticsEvent({
             action: "CHAT_IMPRESSION",
         });
     }, [reportAnalyticsEvent]);
     // Fetch the first message on load, if there are no existing messages or a request being processed
-    (0, react_2.useEffect)(() => {
+    react.useEffect(() => {
         if (messages.length !== 0 || !canSendMessage) {
             return;
         }
@@ -53,15 +52,16 @@ function ChatPanel(props) {
         const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
         res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
     }, [chat, props, messages, defaultHandleApiError, canSendMessage]);
-    const messagesRef = (0, react_2.useRef)(null);
+    const messagesRef = react.useRef(null);
     // Scroll to the bottom of the chat when the messages change
-    (0, react_2.useEffect)(() => {
+    react.useEffect(() => {
         messagesRef.current?.scroll({
             top: messagesRef.current?.scrollHeight,
             behavior: "smooth",
         });
     }, [messages]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cssClasses.container, children: [header, (0, jsx_runtime_1.jsx)("div", { className: cssClasses.messagesScrollContainer, children: (0, jsx_runtime_1.jsxs)("div", { ref: messagesRef, className: cssClasses.messagesContainer, children: [messages.map((message, index) => ((0, react_1.createElement)(MessageBubble_1.MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, key: index, message: message }))), loading && (0, jsx_runtime_1.jsx)(LoadingDots_1.LoadingDots, {})] }) }), (0, jsx_runtime_1.jsx)("div", { className: cssClasses.inputContainer, children: (0, jsx_runtime_1.jsx)(ChatInput_1.ChatInput, { ...props, customCssClasses: cssClasses.inputCssClasses }) })] }));
+    return (jsxRuntime.jsx("div", { className: "yext-chat", children: jsxRuntime.jsxs("div", { className: cssClasses.container, children: [header, jsxRuntime.jsx("div", { className: cssClasses.messagesScrollContainer, children: jsxRuntime.jsxs("div", { ref: messagesRef, className: cssClasses.messagesContainer, children: [messages.map((message, index) => (react.createElement(MessageBubble.MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, key: index, message: message }))), loading && jsxRuntime.jsx(LoadingDots.LoadingDots, {})] }) }), jsxRuntime.jsx("div", { className: cssClasses.inputContainer, children: jsxRuntime.jsx(ChatInput.ChatInput, { ...props, customCssClasses: cssClasses.inputCssClasses }) })] }) }));
 }
+
 exports.ChatPanel = ChatPanel;
-//# sourceMappingURL=ChatPanel.js.map
+//# sourceMappingURL=ChatPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.js","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatPanel.js","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useChatState, useChatActions } from \"@yext/chat-headless-react\";\nimport {\n  MessageBubble,\n  MessageBubbleCssClasses,\n  MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelCssClasses {\n  container?: string;\n  messagesContainer?: string;\n  messagesScrollContainer?: string;\n  inputContainer?: string;\n  inputCssClasses?: ChatInputCssClasses;\n  messageBubbleCssClasses?: MessageBubbleCssClasses;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n  \"Panel\",\n  {\n    container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n    messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n    messagesContainer: \"flex flex-col gap-y-1 px-4 overflow-auto\",\n    inputContainer: \"w-full p-4\",\n    messageBubbleCssClasses: {\n      topContainer: \"first:mt-4\",\n    },\n  }\n);\n\n/**\n * The props for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelProps\n  extends Omit<MessageBubbleProps, \"customCssClasses\" | \"message\">,\n    Omit<ChatInputProps, \"customCssClasses\"> {\n  /** A header to render at the top of the panel. */\n  header?: JSX.Element;\n  /**\n   * CSS classes for customizing the component styling.\n   */\n  customCssClasses?: ChatPanelCssClasses;\n}\n\n/**\n * A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPanel(props: ChatPanelProps) {\n  const { header, customCssClasses } = props;\n  const chat = useChatActions();\n  const messages = useChatState((state) => state.conversation.messages);\n  const loading = useChatState((state) => state.conversation.isLoading);\n  const canSendMessage = useChatState(\n    (state) => state.conversation.canSendMessage\n  );\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const defaultHandleApiError = useDefaultHandleApiError();\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\n\n  // Fetch the first message on load, if there are no existing messages or a request being processed\n  useEffect(() => {\n    if (messages.length !== 0 || !canSendMessage) {\n      return;\n    }\n    const { stream = false, handleError } = props;\n    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();\n    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));\n  }, [chat, props, messages, defaultHandleApiError, canSendMessage]);\n\n  const messagesRef = useRef<HTMLDivElement>(null);\n\n  // Scroll to the bottom of the chat when the messages change\n  useEffect(() => {\n    messagesRef.current?.scroll({\n      top: messagesRef.current?.scrollHeight,\n      behavior: \"smooth\",\n    });\n  }, [messages]);\n\n  return (\n    <div className=\"yext-chat\">\n      <div className={cssClasses.container}>\n        {header}\n        <div className={cssClasses.messagesScrollContainer}>\n          <div ref={messagesRef} className={cssClasses.messagesContainer}>\n            {messages.map((message, index) => (\n              <MessageBubble\n                {...props}\n                customCssClasses={cssClasses.messageBubbleCssClasses}\n                key={index}\n                message={message}\n              />\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":["withStylelessCssClasses","useChatActions","useChatState","useComposedCssClasses","useDefaultHandleApiError","useReportAnalyticsEvent","useEffect","useRef","_jsx","_jsxs","_createElement","MessageBubble","LoadingDots","ChatInput"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAMtB;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AA8BD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EACnE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IACrD,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CA8D9C"}
+{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAMtB;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AA8BD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EACnE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IACrD,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkE9C"}

package/lib/commonjs/src/components/ChatPopUp.js

@@ -1,17 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatPopUp = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Chat_1 = require("../icons/Chat");
-const ChatPanel_1 = require("./ChatPanel");
-const ChatHeader_1 = require("./ChatHeader");
-const tailwind_merge_1 = require("tailwind-merge");
-const hooks_1 = require("../hooks");
-const withStylelessCssClasses_1 = require("../utils/withStylelessCssClasses");
-const useReportAnalyticsEvent_1 = require("../hooks/useReportAnalyticsEvent");
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Chat = require('../icons/Chat.js');
+var ChatPanel = require('./ChatPanel.js');
+var ChatHeader = require('./ChatHeader.js');
+var tailwindMerge = require('tailwind-merge');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
+
 const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
-const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)("PopUp", {
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("PopUp", {
     container: "transition-all",
     panel: fixedPosition +
         "w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]",
@@ -41,24 +41,25 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
  */
 function ChatPopUp(props) {
     const { openPanelButtonIcon, customCssClasses, showRestartButton = true, onClose: customOnClose, title, } = props;
-    const reportAnalyticsEvent = (0, useReportAnalyticsEvent_1.useReportAnalyticsEvent)();
-    (0, react_1.useEffect)(() => {
+    const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
+    react.useEffect(() => {
         reportAnalyticsEvent({
             action: "CHAT_IMPRESSION",
         });
     }, [reportAnalyticsEvent]);
-    const [showChat, setShowChat] = (0, react_1.useState)(false);
-    const onClick = (0, react_1.useCallback)(() => {
+    const [showChat, setShowChat] = react.useState(false);
+    const onClick = react.useCallback(() => {
         setShowChat(!showChat);
     }, [showChat]);
-    const onClose = (0, react_1.useCallback)(() => {
+    const onClose = react.useCallback(() => {
         setShowChat(false);
         customOnClose?.();
     }, [customOnClose]);
-    const cssClasses = (0, hooks_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
-    const panelCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
-    const buttonCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.button, showChat ? cssClasses.button__hidden : cssClasses.button__display);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cssClasses.container, children: [(0, jsx_runtime_1.jsx)("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel", children: (0, jsx_runtime_1.jsx)(ChatPanel_1.ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: (0, jsx_runtime_1.jsx)(ChatHeader_1.ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) }) }), (0, jsx_runtime_1.jsx)("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses, children: openPanelButtonIcon ?? (0, jsx_runtime_1.jsx)(Chat_1.ChatIcon, { className: cssClasses.buttonIcon }) })] }));
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const panelCssClasses = tailwindMerge.twMerge(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
+    const buttonCssClasses = tailwindMerge.twMerge(cssClasses.button, showChat ? cssClasses.button__hidden : cssClasses.button__display);
+    return (jsxRuntime.jsx("div", { className: "yext-chat", children: jsxRuntime.jsxs("div", { className: cssClasses.container, children: [jsxRuntime.jsx("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel", children: jsxRuntime.jsx(ChatPanel.ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: jsxRuntime.jsx(ChatHeader.ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) }) }), jsxRuntime.jsx("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses, children: openPanelButtonIcon ?? (jsxRuntime.jsx(Chat.ChatIcon, { className: cssClasses.buttonIcon })) })] }) }));
 }
+
 exports.ChatPopUp = ChatPopUp;
-//# sourceMappingURL=ChatPopUp.js.map
+//# sourceMappingURL=ChatPopUp.js.map

package/lib/commonjs/src/components/ChatPopUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatPopUp.js","sources":["../../../../src/components/ChatPopUp.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { ChatIcon } from \"../icons/Chat\";\nimport { ChatPanel, ChatPanelCssClasses, ChatPanelProps } from \"./ChatPanel\";\nimport {\n  ChatHeader,\n  ChatHeaderCssClasses,\n  ChatHeaderProps,\n} from \"./ChatHeader\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\n\n/**\n * The CSS class interface for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpCssClasses {\n  container?: string;\n  panel?: string;\n  panel__display?: string;\n  panel__hidden?: string;\n  button?: string;\n  button__display?: string;\n  button__hidden?: string;\n  buttonIcon?: string;\n  headerCssClasses?: ChatHeaderCssClasses;\n  panelCssClasses?: ChatPanelCssClasses;\n}\n\nconst fixedPosition = \"fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 \";\nconst builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(\n  \"PopUp\",\n  {\n    container: \"transition-all\",\n    panel:\n      fixedPosition +\n      \"w-80 max-[480px]:right-0 max-[480px]:bottom-0 max-[480px]:w-full max-[480px]:h-full lg:w-96 h-[75vh]\",\n    panel__display: \"duration-300 translate-y-0\",\n    panel__hidden: \"duration-300 translate-y-[20%] opacity-0 invisible\",\n    button:\n      fixedPosition +\n      \"p-2 w-12 h-12 lg:w-16 lg:h-16 flex justify-center items-center text-white shadow-xl rounded-full bg-gradient-to-br from-blue-600 to-blue-700 hover:-translate-y-2 duration-150\",\n    button__display: \"duration-300 transform translate-y-0\",\n    button__hidden:\n      \"duration-300 transform translate-y-[20%] opacity-0 invisible\",\n    buttonIcon: \"text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]\",\n    headerCssClasses: {\n      container: \"max-[480px]:rounded-none rounded-t-3xl\",\n    },\n    panelCssClasses: {\n      container: \"max-[480px]:rounded-none rounded-3xl\",\n      inputContainer: \"max-[480px]:rounded-none rounded-b-3xl\",\n      messagesScrollContainer: \"rounded-b-3xl\",\n    },\n  }\n);\n\n/**\n * The props for the {@link ChatPopUp} component.\n *\n * @public\n */\nexport interface ChatPopUpProps\n  extends Omit<ChatHeaderProps, \"showCloseButton\" | \"customCssClasses\">,\n    Omit<ChatPanelProps, \"header\" | \"customCssClasses\"> {\n  /** Custom icon for the popup button to open the panel. */\n  openPanelButtonIcon?: JSX.Element;\n  /**\n   * CSS classes for customizing the component styling.\n   */\n  customCssClasses?: ChatPopUpCssClasses;\n}\n\n/**\n * A component that renders a popup button that displays and hides\n * a panel for chat bot interactions.\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPopUp(props: ChatPopUpProps) {\n  const {\n    openPanelButtonIcon,\n    customCssClasses,\n    showRestartButton = true,\n    onClose: customOnClose,\n    title,\n  } = props;\n  const reportAnalyticsEvent = useReportAnalyticsEvent();\n\n  useEffect(() => {\n    reportAnalyticsEvent({\n      action: \"CHAT_IMPRESSION\",\n    });\n  }, [reportAnalyticsEvent]);\n\n  const [showChat, setShowChat] = useState(false);\n  const onClick = useCallback(() => {\n    setShowChat(!showChat);\n  }, [showChat]);\n\n  const onClose = useCallback(() => {\n    setShowChat(false);\n    customOnClose?.();\n  }, [customOnClose]);\n\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n  const panelCssClasses = twMerge(\n    cssClasses.panel,\n    showChat ? cssClasses.panel__display : cssClasses.panel__hidden\n  );\n  const buttonCssClasses = twMerge(\n    cssClasses.button,\n    showChat ? cssClasses.button__hidden : cssClasses.button__display\n  );\n\n  return (\n    <div className=\"yext-chat\">\n      <div className={cssClasses.container}>\n        <div className={panelCssClasses} aria-label=\"Chat Popup Panel\">\n          <ChatPanel\n            {...props}\n            customCssClasses={cssClasses.panelCssClasses}\n            header={\n              <ChatHeader\n                title={title}\n                showRestartButton={showRestartButton}\n                showCloseButton={true}\n                onClose={onClose}\n                customCssClasses={cssClasses.headerCssClasses}\n              />\n            }\n          />\n        </div>\n        <button\n          aria-label=\"Chat Popup Button\"\n          onClick={onClick}\n          className={buttonCssClasses}\n        >\n          {openPanelButtonIcon ?? (\n            <ChatIcon className={cssClasses.buttonIcon} />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":["withStylelessCssClasses","useReportAnalyticsEvent","useEffect","useState","useCallback","useComposedCssClasses","twMerge","_jsx","_jsxs","ChatPanel","ChatHeader","ChatIcon"],"mappings":"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"}

package/lib/commonjs/src/components/FeedbackButtons.js

@@ -1,16 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FeedbackButtons = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ThumbsDown_1 = require("../icons/ThumbsDown");
-const ThumbsUp_1 = require("../icons/ThumbsUp");
-const react_1 = require("react");
-const ThumbsUpFill_1 = require("../icons/ThumbsUpFill");
-const ThumbsDownFill_1 = require("../icons/ThumbsDownFill");
-const withStylelessCssClasses_1 = require("../utils/withStylelessCssClasses");
-const hooks_1 = require("../hooks");
-const useReportAnalyticsEvent_1 = require("../hooks/useReportAnalyticsEvent");
-const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)("FeedbackButtons", {
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThumbsDown = require('../icons/ThumbsDown.js');
+var ThumbsUp = require('../icons/ThumbsUp.js');
+var react = require('react');
+var ThumbsUpFill = require('../icons/ThumbsUpFill.js');
+var ThumbsDownFill = require('../icons/ThumbsDownFill.js');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
+
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("FeedbackButtons", {
     container: "flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200",
     thumbsUpButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
     thumbsUpIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
@@ -26,10 +26,10 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
  * @internal
  */
 function FeedbackButtons({ customCssClasses, responseId, }) {
-    const reportAnalyticsEvent = (0, useReportAnalyticsEvent_1.useReportAnalyticsEvent)();
-    const cssClasses = (0, hooks_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
-    const [selectedThumb, setSelectedThumb] = (0, react_1.useState)();
-    const onClickThumbsUp = (0, react_1.useCallback)(() => {
+    const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const [selectedThumb, setSelectedThumb] = react.useState();
+    const onClickThumbsUp = react.useCallback(() => {
         setSelectedThumb("UP");
         reportAnalyticsEvent({
             action: "THUMBS_UP",
@@ -38,7 +38,7 @@ function FeedbackButtons({ customCssClasses, responseId, }) {
             },
         });
     }, [reportAnalyticsEvent, responseId]);
-    const onClickThumbsDown = (0, react_1.useCallback)(() => {
+    const onClickThumbsDown = react.useCallback(() => {
         setSelectedThumb("DOWN");
         reportAnalyticsEvent({
             action: "THUMBS_DOWN",
@@ -47,7 +47,8 @@ function FeedbackButtons({ customCssClasses, responseId, }) {
             },
         });
     }, [reportAnalyticsEvent, responseId]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cssClasses.container, children: [(0, jsx_runtime_1.jsx)("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp, children: selectedThumb === "UP" ? ((0, jsx_runtime_1.jsx)(ThumbsUpFill_1.ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : ((0, jsx_runtime_1.jsx)(ThumbsUp_1.ThumbsUpIcon, { className: cssClasses.thumbsUpIcon })) }), (0, jsx_runtime_1.jsx)("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown, children: selectedThumb === "DOWN" ? ((0, jsx_runtime_1.jsx)(ThumbsDownFill_1.ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : ((0, jsx_runtime_1.jsx)(ThumbsDown_1.ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })) })] }));
+    return (jsxRuntime.jsxs("div", { className: cssClasses.container, children: [jsxRuntime.jsx("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp, children: selectedThumb === "UP" ? (jsxRuntime.jsx(ThumbsUpFill.ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : (jsxRuntime.jsx(ThumbsUp.ThumbsUpIcon, { className: cssClasses.thumbsUpIcon })) }), jsxRuntime.jsx("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown, children: selectedThumb === "DOWN" ? (jsxRuntime.jsx(ThumbsDownFill.ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : (jsxRuntime.jsx(ThumbsDown.ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })) })] }));
 }
+
 exports.FeedbackButtons = FeedbackButtons;
-//# sourceMappingURL=FeedbackButtons.js.map
+//# sourceMappingURL=FeedbackButtons.js.map

package/lib/commonjs/src/components/FeedbackButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackButtons.js","sourceRoot":"","sources":["../../../../src/components/FeedbackButtons.tsx"],"names":[],"mappings":";;;;AAAA,oDAAqD;AACrD,gDAAiD;AACjD,iCAA8C;AAC9C,wDAAyD;AACzD,4DAA6D;AAC7D,8EAA2E;AAC3E,oCAAiD;AACjD,8EAA2E;AAiB3E,MAAM,iBAAiB,GACrB,IAAA,iDAAuB,EAA4B,iBAAiB,EAAE;IACpE,SAAS,EACP,sFAAsF;IACxF,cAAc,EACZ,iEAAiE;IACnE,YAAY,EAAE,2CAA2C;IACzD,gBAAgB,EAAE,2CAA2C;IAC7D,gBAAgB,EACd,iEAAiE;IACnE,cAAc,EAAE,2CAA2C;IAC3D,kBAAkB,EAAE,2CAA2C;CAChE,CAAC,CAAC;AAcL;;;;;GAKG;AACH,SAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,UAAU,GACW;IACrB,MAAM,oBAAoB,GAAG,IAAA,iDAAuB,GAAE,CAAC;IACvD,MAAM,UAAU,GAAG,IAAA,6BAAqB,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,GAE/C,CAAC;IACJ,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,oBAAoB,CAAC;YACnB,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE;gBACJ,UAAU;aACX;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACzB,oBAAoB,CAAC;YACnB,MAAM,EAAE,aAAa;YACrB,IAAI,EAAE;gBACJ,UAAU;aACX;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,iCAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,mCAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,YACnE,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,CACxB,uBAAC,+BAAgB,IAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,CAC7D,CAAC,CAAC,CAAC,CACF,uBAAC,uBAAY,IAAC,SAAS,EAAE,UAAU,CAAC,YAAY,GAAI,CACrD,GACM,EACT,mCACE,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,YAEzB,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,CAC1B,uBAAC,mCAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,CACjE,CAAC,CAAC,CAAC,CACF,uBAAC,2BAAc,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,GAAI,CACzD,GACM,IACL,CACP,CAAC;AACJ,CAAC;AAlDD,0CAkDC"}
+{"version":3,"file":"FeedbackButtons.js","sources":["../../../../src/components/FeedbackButtons.tsx"],"sourcesContent":["import { ThumbsDownIcon } from \"../icons/ThumbsDown\";\nimport { ThumbsUpIcon } from \"../icons/ThumbsUp\";\nimport { 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":["withStylelessCssClasses","useReportAnalyticsEvent","useComposedCssClasses","useState","useCallback","_jsxs","_jsx","ThumbsUpFillIcon","ThumbsUpIcon","ThumbsDownFillIcon","ThumbsDownIcon"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,iBAAiB,GACrBA,+CAAuB,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,GAAGC,+CAAuB,EAAE,CAAC;IACvD,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,EAE/C,CAAC;AACJ,IAAA,MAAM,eAAe,GAAGC,iBAAW,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,GAAGA,iBAAW,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;IAEvC,QACEC,yBAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClCC,cAAQ,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EAAA,QAAA,EACnE,aAAa,KAAK,IAAI,IACrBA,eAACC,6BAAgB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAA,CAAI,KAE5DD,cAAA,CAACE,qBAAY,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,YAAY,GAAI,CACrD,EAAA,CACM,EACTF,cACE,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAEzB,aAAa,KAAK,MAAM,IACvBA,cAAA,CAACG,iCAAkB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAA,CAAI,KAEhEH,cAAC,CAAAI,yBAAc,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,GAAI,CACzD,EAAA,CACM,CACL,EAAA,CAAA,EACN;AACJ;;;;"}

package/lib/commonjs/src/components/LoadingDots.js

@@ -1,15 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingDots = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const tailwind_merge_1 = require("tailwind-merge");
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+
 /**
  * A component that signifies loading status.
  *
  * @internal
  */
 function LoadingDots({ className }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": "Loading Indicator", className: (0, tailwind_merge_1.twMerge)("flex gap-1 p-2 animate-fade-in", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })] }));
+    return (jsxRuntime.jsxs("div", { "aria-label": "Loading Indicator", className: tailwindMerge.twMerge("flex gap-1 p-2 animate-fade-in", className), children: [jsxRuntime.jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }), jsxRuntime.jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }), jsxRuntime.jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })] }));
 }
+
 exports.LoadingDots = LoadingDots;
-//# sourceMappingURL=LoadingDots.js.map
+//# sourceMappingURL=LoadingDots.js.map

package/lib/commonjs/src/components/LoadingDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingDots.js","sourceRoot":"","sources":["../../../../src/components/LoadingDots.tsx"],"names":[],"mappings":";;;;AAAA,mDAAyC;AAEzC;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,SAAS,EAA0B;IAC/D,OAAO,CACL,+CACa,mBAAmB,EAC9B,SAAS,EAAE,IAAA,wBAAO,EAAC,gCAAgC,EAAE,SAAS,CAAC,aAE/D,gCAAK,SAAS,EAAC,gEAAgE,GAAG,EAClF,gCAAK,SAAS,EAAC,qEAAqE,GAAG,EACvF,gCAAK,SAAS,EAAC,qEAAqE,GAAG,IACnF,CACP,CAAC;AACJ,CAAC;AAXD,kCAWC"}
+{"version":3,"file":"LoadingDots.js","sources":["../../../../src/components/LoadingDots.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\n/**\n * A component that signifies loading status.\n *\n * @internal\n */\nexport function LoadingDots({ className }: { className?: string }) {\n  return (\n    <div\n      aria-label=\"Loading Indicator\"\n      className={twMerge(\"flex gap-1 p-2 animate-fade-in\", className)}\n    >\n      <div className=\"w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]\" />\n      <div className=\"w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]\" />\n      <div className=\"w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]\" />\n    </div>\n  );\n}\n"],"names":["_jsxs","twMerge","_jsx"],"mappings":";;;;;AAEA;;;;AAIG;AACa,SAAA,WAAW,CAAC,EAAE,SAAS,EAA0B,EAAA;AAC/D,IAAA,QACEA,eAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EACa,mBAAmB,EAC9B,SAAS,EAAEC,qBAAO,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAE/DC,wBAAK,SAAS,EAAC,gEAAgE,EAAA,CAAG,EAClFA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qEAAqE,EAAG,CAAA,EACvFA,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qEAAqE,EAAG,CAAA,CAAA,EAAA,CACnF,EACN;AACJ;;;;"}

package/lib/commonjs/src/components/Markdown.js

@@ -1,24 +1,21 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Markdown = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_markdown_1 = __importDefault(require("react-markdown"));
-const remark_gfm_1 = __importDefault(require("remark-gfm"));
-const rehype_raw_1 = __importDefault(require("rehype-raw"));
-const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
-const react_1 = require("react");
-const useReportAnalyticsEvent_1 = require("../hooks/useReportAnalyticsEvent");
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
+var rehypeRaw = require('rehype-raw');
+var rehypeSanitize = require('rehype-sanitize');
+var react = require('react');
+var useReportAnalyticsEvent = require('../hooks/useReportAnalyticsEvent.js');
+
 // The Remark and Rehype plugins to use in conjunction with ReactMarkdown.
 const unifiedPlugins = {
     remark: [
-        remark_gfm_1.default, //renders Github-Flavored Markdown
+        remarkGfm, //renders Github-Flavored Markdown
     ],
     rehype: [
-        rehype_raw_1.default,
-        rehype_sanitize_1.default, //to sanitize HTML content
+        rehypeRaw,
+        rehypeSanitize, //to sanitize HTML content
     ],
 };
 /**
@@ -31,8 +28,8 @@ const unifiedPlugins = {
  * @internal
  */
 function Markdown({ content, responseId, className }) {
-    const reportAnalyticsEvent = (0, useReportAnalyticsEvent_1.useReportAnalyticsEvent)();
-    const components = (0, react_1.useMemo)(() => {
+    const reportAnalyticsEvent = useReportAnalyticsEvent.useReportAnalyticsEvent();
+    const components = react.useMemo(() => {
         const createClickHandlerFn = (href) => () => {
             reportAnalyticsEvent({
                 action: "CHAT_LINK_CLICK",
@@ -44,11 +41,12 @@ function Markdown({ content, responseId, className }) {
         };
         return {
             a: ({ node: _, children, ...props }) => {
-                return ((0, jsx_runtime_1.jsx)("a", { ...props, onClick: createClickHandlerFn(props.href), target: "_blank", rel: "noopener noreferrer", className: "cursor-pointer", children: children }));
+                return (jsxRuntime.jsx("a", { ...props, onClick: createClickHandlerFn(props.href), target: "_blank", rel: "noopener noreferrer", className: "cursor-pointer", children: children }));
             },
         };
     }, [reportAnalyticsEvent, responseId]);
-    return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { className: className, children: content, remarkPlugins: unifiedPlugins.remark, rehypePlugins: unifiedPlugins.rehype, components: components }));
+    return (jsxRuntime.jsx(ReactMarkdown, { className: className, children: content, remarkPlugins: unifiedPlugins.remark, rehypePlugins: unifiedPlugins.rehype, components: components }));
 }
+
 exports.Markdown = Markdown;
-//# sourceMappingURL=Markdown.js.map
+//# sourceMappingURL=Markdown.js.map

package/lib/commonjs/src/components/Markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../../src/components/Markdown.tsx"],"names":[],"mappings":";;;;;;;AAAA,oEAGwB;AACxB,4DAAmC;AACnC,4DAAmC;AACnC,sEAA6C;AAC7C,iCAAgC;AAChC,8EAA2E;AAE3E,0EAA0E;AAC1E,MAAM,cAAc,GAAsD;IACxE,MAAM,EAAE;QACN,oBAAS,EAAE,kCAAkC;KAC9C;IACD,MAAM,EAAE;QACN,oBAAS;QACT,yBAAc,EAAE,0BAA0B;KAC3C;CACF,CAAC;AAWF;;;;;;;;GAQG;AACH,SAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAiB;IACxE,MAAM,oBAAoB,GAAG,IAAA,iDAAuB,GAAE,CAAC;IAEvD,MAAM,UAAU,GAAuC,IAAA,eAAO,EAAC,GAAG,EAAE;QAClE,MAAM,oBAAoB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,GAAG,EAAE;YACnD,oBAAoB,CAAC;gBACnB,MAAM,EAAE,iBAAiB;gBACzB,cAAc,EAAE,IAAI;gBACpB,IAAI,EAAE;oBACJ,UAAU;iBACX;aACF,CAAC,CAAC;QACL,CAAC,CAAC;QACF,OAAO;YACL,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBACrC,OAAO,CACL,iCACM,KAAK,EACT,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,EACzC,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,gBAAgB,YAEzB,QAAQ,GACP,CACL,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,uBAAC,wBAAa,IACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,aAAa,EAAE,cAAc,CAAC,MAAM,EACpC,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;AACJ,CAAC;AAvCD,4BAuCC"}
+{"version":3,"file":"Markdown.js","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 { 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":["useReportAnalyticsEvent","useMemo","_jsx"],"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,GAAGA,+CAAuB,EAAE,CAAC;AAEvD,IAAA,MAAM,UAAU,GAAuCC,aAAO,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,QACEC,cAAA,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,QAAA,EAAA,QAAQ,EACP,CAAA,EACJ;aACH;SACF,CAAC;AACJ,KAAC,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEvC,IAAA,QACEA,cAAA,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/commonjs/src/components/MessageBubble.js

@@ -1,14 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageBubble = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const chat_headless_react_1 = require("@yext/chat-headless-react");
-const hooks_1 = require("../hooks");
-const tailwind_merge_1 = require("tailwind-merge");
-const Markdown_1 = require("./Markdown");
-const withStylelessCssClasses_1 = require("../utils/withStylelessCssClasses");
-const FeedbackButtons_1 = require("./FeedbackButtons");
-const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)("MessageBubble", {
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var tailwindMerge = require('tailwind-merge');
+var Markdown = require('./Markdown.js');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+var FeedbackButtons = require('./FeedbackButtons.js');
+
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("MessageBubble", {
     topContainer: "w-full animate-fade-in @container",
     subContainer: "flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1",
     subContainer__bot: "",
@@ -18,7 +18,7 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
     bubble__user: "ml-auto @lg:ml-0 bg-gradient-to-tr from-blue-600 to-blue-700 text-white",
     text: "text-[13px] @[480px]:text-base prose overflow-x-auto",
     text__bot: "text-slate-900",
-    text__user: "text-white",
+    text__user: "text-white break-words",
     timestamp: "w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
     timestamp__bot: "",
     timestamp__user: "ml-auto",
@@ -32,22 +32,21 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
  * @param props - {@link MessageBubbleProps}
  */
 function MessageBubble({ message, showFeedbackButtons = true, showTimestamp = true, customCssClasses, formatTimestamp = defaultFormatTimestamp, }) {
-    const cssClasses = (0, hooks_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
-    const bubbleCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.bubble, message.source === chat_headless_react_1.MessageSource.USER
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const bubbleCssClasses = tailwindMerge.twMerge(cssClasses.bubble, message.source === chatHeadlessReact.MessageSource.USER
         ? cssClasses.bubble__user
         : cssClasses.bubble__bot);
-    const textCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.text, message.source === chat_headless_react_1.MessageSource.USER
+    const textCssClasses = tailwindMerge.twMerge(cssClasses.text, message.source === chatHeadlessReact.MessageSource.USER
         ? cssClasses.text__user
         : cssClasses.text__bot);
-    const subContainerCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.subContainer, message.source === chat_headless_react_1.MessageSource.USER
+    const subContainerCssClasses = tailwindMerge.twMerge(cssClasses.subContainer, message.source === chatHeadlessReact.MessageSource.USER
         ? cssClasses.subContainer__user
         : cssClasses.subContainer__bot);
-    const timestampCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.timestamp, message.source === chat_headless_react_1.MessageSource.USER
+    const timestampCssClasses = tailwindMerge.twMerge(cssClasses.timestamp, message.source === chatHeadlessReact.MessageSource.USER
         ? cssClasses.timestamp__user
         : cssClasses.timestamp__bot);
-    return ((0, jsx_runtime_1.jsx)("div", { className: cssClasses.topContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: subContainerCssClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: bubbleCssClasses, children: [showFeedbackButtons && message.source === chat_headless_react_1.MessageSource.BOT && ((0, jsx_runtime_1.jsx)(FeedbackButtons_1.FeedbackButtons, { customCssClasses: cssClasses.feedbackButtonsCssClasses, responseId: message.responseId })), (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { content: message.text, responseId: message.responseId, className: textCssClasses })] }), showTimestamp && ((0, jsx_runtime_1.jsx)("div", { className: timestampCssClasses, children: message.timestamp ? formatTimestamp(message.timestamp) : " " }))] }) }));
+    return (jsxRuntime.jsx("div", { className: cssClasses.topContainer, children: jsxRuntime.jsxs("div", { className: subContainerCssClasses, children: [jsxRuntime.jsxs("div", { className: bubbleCssClasses, children: [showFeedbackButtons && message.source === chatHeadlessReact.MessageSource.BOT && (jsxRuntime.jsx(FeedbackButtons.FeedbackButtons, { customCssClasses: cssClasses.feedbackButtonsCssClasses, responseId: message.responseId })), jsxRuntime.jsx(Markdown.Markdown, { content: message.text, responseId: message.responseId, className: textCssClasses })] }), showTimestamp && (jsxRuntime.jsx("div", { className: timestampCssClasses, children: message.timestamp ? formatTimestamp(message.timestamp) : " " }))] }) }));
 }
-exports.MessageBubble = MessageBubble;
 /**
  * Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33 PM"
  *
@@ -61,4 +60,6 @@ function defaultFormatTimestamp(timestamp) {
         hour12: true,
     });
 }
-//# sourceMappingURL=MessageBubble.js.map
+
+exports.MessageBubble = MessageBubble;
+//# sourceMappingURL=MessageBubble.js.map