@yext/chat-ui-react 0.5.6 → 0.6.0-alpha.38.2

package/README.md

@@ -41,21 +41,19 @@ export default App;
 
 ### default styling
 
-By default, the component library uses Tailwind styling.
+By default, the component library uses Tailwind styling. However, for projects that
+do not use Tailwind, a css bundle is exported as part of this package. To use it, you can import
+the file `@yext/chat-ui-react/bundle.css` into your normal CSS flow.
 
-To use the Component library's styling without adding Tailwind to your project, add
-`ChatStyleProvider` as a wrapper for all Chat related components:
+Example for Yext Pages:
 
-```tsx
-<ChatStyleProvider>
-  <ChatHeadlessProvider config={config}>
-    <ChatPanel />
-  </ChatHeadlessProvider>
-</ChatStyleProvider>
+```css
+/* index.css */
+@import "@yext/chat-ui-react/bundle.css";
 ```
 
-`ChatStyleProvider` imports "@yext/chat-ui-react/bundle.css" and provides
-a parent div with classname `yext-chat`. The styling in the bundle is scoped to elements with classname `yext-chat` and its children. This is to prevent Chat component library's styling, which includes tailwind preflight, from affecting user's existing styling outside of Chat components.
+The CSS bundle is scoped to the target class `.yext-chat`, which is automatically included as a wrapper div in both
+`ChatPanel` and `ChatPopUp`.
 
 ### custom styling
 

package/THIRD-PARTY-NOTICES

@@ -1330,7 +1330,7 @@ SOFTWARE.
 
 The following npm package may be included in this product:
 
- - react-textarea-autosize@8.5.2
+ - react-textarea-autosize@8.5.3
 
 This package contains the following license and notice below:
 

package/lib/commonjs/package.json.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.6.0-alpha.38.2";
+
+exports.version = version;
+//# sourceMappingURL=package.json.js.map

package/lib/commonjs/package.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const chat_headless_react_1 = require("@yext/chat-headless-react");
-const DualSync_1 = require("../icons/DualSync");
-const useComposedCssClasses_1 = require("../hooks/useComposedCssClasses");
-const react_1 = require("react");
-const tailwind_merge_1 = require("tailwind-merge");
-const Cross_1 = require("../icons/Cross");
-const withStylelessCssClasses_1 = require("../utils/withStylelessCssClasses");
-const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)("Header", {
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var DualSync = require('../icons/DualSync.js');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var react = require('react');
+var tailwindMerge = require('tailwind-merge');
+var Cross = require('../icons/Cross.js');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("Header", {
     container: "w-full pl-4 pr-3 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800",
     title: "text-white text-xl font-medium truncate pr-1",
     restartButton: "w-8 h-8 ml-auto shrink-0 flex justify-center items-center",
@@ -26,12 +26,12 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
  * @param props - {@link ChatHeaderProps}
  */
 function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }) {
-    const chat = (0, chat_headless_react_1.useChatActions)();
-    const cssClasses = (0, useComposedCssClasses_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
-    const [isSpinning, setIsSpinning] = (0, react_1.useState)(false);
-    const restartButtonCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.restartButton, isSpinning ? "animate-[spin_0.3s_linear]" : "hover:scale-110");
-    const clearTimerRef = (0, react_1.useRef)();
-    const onRestart = (0, react_1.useCallback)(async () => {
+    const chat = chatHeadlessReact.useChatActions();
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const [isSpinning, setIsSpinning] = react.useState(false);
+    const restartButtonCssClasses = tailwindMerge.twMerge(cssClasses.restartButton, isSpinning ? "animate-[spin_0.3s_linear]" : "hover:scale-110");
+    const clearTimerRef = react.useRef();
+    const onRestart = react.useCallback(async () => {
         clearTimeout(clearTimerRef.current);
         setIsSpinning(true);
         clearTimerRef.current = setTimeout(() => {
@@ -39,7 +39,8 @@ function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButt
         }, 1000);
         chat.restartConversation();
     }, [chat]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cssClasses.container, children: [(0, jsx_runtime_1.jsx)("h1", { className: cssClasses.title, children: title }), showRestartButton && ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses, children: restartButtonIcon ?? ((0, jsx_runtime_1.jsx)(DualSync_1.DualSyncIcon, { className: cssClasses.restartButtonIcon })) })), showCloseButton && ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon ?? ((0, jsx_runtime_1.jsx)(Cross_1.CrossIcon, { className: cssClasses.closeButtonIcon })) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cssClasses.container, children: [jsxRuntime.jsx("h1", { className: cssClasses.title, children: title }), showRestartButton && (jsxRuntime.jsx("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses, children: restartButtonIcon ?? (jsxRuntime.jsx(DualSync.DualSyncIcon, { className: cssClasses.restartButtonIcon })) })), showCloseButton && (jsxRuntime.jsx("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon ?? (jsxRuntime.jsx(Cross.CrossIcon, { className: cssClasses.closeButtonIcon })) }))] }));
 }
+
 exports.ChatHeader = ChatHeader;
-//# sourceMappingURL=ChatHeader.js.map
+//# sourceMappingURL=ChatHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";;;;AAAA,mEAA2D;AAC3D,gDAAiD;AACjD,0EAAuE;AACvE,iCAAsD;AACtD,mDAAyC;AACzC,0CAA2C;AAC3C,8EAA2E;AAgB3E,MAAM,iBAAiB,GACrB,IAAA,iDAAuB,EAAC,QAAQ,EAAE;IAChC,SAAS,EACP,wFAAwF;IAC1F,KAAK,EAAE,8CAA8C;IACrD,aAAa,EAAE,2DAA2D;IAC1E,iBAAiB,EAAE,2CAA2C;IAC9D,WAAW,EACT,mEAAmE;IACrE,eAAe,EAAE,8BAA8B;CAChD,CAAC,CAAC;AAgCL;;;;;;;GAOG;AACH,SAAgB,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACA;IAChB,MAAM,IAAI,GAAG,IAAA,oCAAc,GAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,IAAA,6CAAqB,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,uBAAuB,GAAG,IAAA,wBAAO,EACrC,UAAU,CAAC,aAAa,EACxB,UAAU,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,iBAAiB,CAC9D,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,cAAM,GAAiC,CAAC;IAC9D,MAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACvC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACtC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,iCAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,+BAAI,SAAS,EAAE,UAAU,CAAC,KAAK,YAAG,KAAK,GAAM,EAC5C,iBAAiB,IAAI,CACpB,iDACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,YAEjC,iBAAiB,IAAI,CACpB,uBAAC,uBAAY,IAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,GAAI,CAC1D,GACM,CACV,EACA,eAAe,IAAI,CAClB,iDACa,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,IAAI,CAClB,uBAAC,iBAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,GAAI,CACrD,GACM,CACV,IACG,CACP,CAAC;AACJ,CAAC;AAxDD,gCAwDC"}
+{"version":3,"file":"ChatHeader.js","sources":["../../../../src/components/ChatHeader.tsx"],"sourcesContent":["import { useChatActions } from \"@yext/chat-headless-react\";\nimport { DualSyncIcon } from \"../icons/DualSync\";\nimport { useComposedCssClasses } from \"../hooks/useComposedCssClasses\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\n\n/**\n * The CSS class interface for the {@link ChatHeader} component.\n *\n * @public\n */\nexport interface ChatHeaderCssClasses {\n  container?: string;\n  title?: string;\n  restartButton?: string;\n  restartButtonIcon?: string;\n  closeButton?: string;\n  closeButtonIcon?: string;\n}\n\nconst builtInCssClasses: Readonly<ChatHeaderCssClasses> =\n  withStylelessCssClasses(\"Header\", {\n    container:\n      \"w-full pl-4 pr-3 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800\",\n    title: \"text-white text-xl font-medium truncate pr-1\",\n    restartButton: \"w-8 h-8 ml-auto shrink-0 flex justify-center items-center\",\n    restartButtonIcon: \"text-white stroke-[0.2] w-[26px] h-[26px]\",\n    closeButton:\n      \"w-8 h-8 hover:scale-110 shrink-0 flex justify-center items-center\",\n    closeButtonIcon: \"text-white w-[26px] h-[26px]\",\n  });\n\n/**\n * The props for the {@link ChatHeader} component.\n *\n * @public\n */\nexport interface ChatHeaderProps {\n  /**\n   * The headers's title text, essentially how the chat window identifies itself to the user.\n   */\n  title: string;\n  /**\n   * Displays a restart button which allows the user to restart the conversation.\n   * Defaults to false.\n   */\n  showRestartButton?: boolean;\n  /**\n   * Displays a close button which will invoke {@link ChatHeaderProps.onClose} on click.\n   * Default to false.\n   */\n  showCloseButton?: boolean;\n  /** A function which is called when the close button is clicked.  */\n  onClose?: () => void;\n  /**  Custom icon for for restart button. */\n  restartButtonIcon?: JSX.Element;\n  /**  Custom icon for for close button. */\n  closeButtonIcon?: JSX.Element;\n  /**  CSS classes for customizing the component styling. */\n  customCssClasses?: ChatHeaderCssClasses;\n}\n\n/**\n * A component that renders the header of a chat bot panel,\n * including the title and a button to reset the conversation.\n *\n * @public\n *\n * @param props - {@link ChatHeaderProps}\n */\nexport function ChatHeader({\n  title,\n  showRestartButton,\n  restartButtonIcon,\n  showCloseButton,\n  closeButtonIcon,\n  onClose,\n  customCssClasses,\n}: ChatHeaderProps) {\n  const chat = useChatActions();\n\n  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n  const [isSpinning, setIsSpinning] = useState(false);\n  const restartButtonCssClasses = twMerge(\n    cssClasses.restartButton,\n    isSpinning ? \"animate-[spin_0.3s_linear]\" : \"hover:scale-110\"\n  );\n\n  const clearTimerRef = useRef<ReturnType<typeof setTimeout>>();\n  const onRestart = useCallback(async () => {\n    clearTimeout(clearTimerRef.current);\n    setIsSpinning(true);\n    clearTimerRef.current = setTimeout(() => {\n      setIsSpinning(false);\n    }, 1000);\n    chat.restartConversation();\n  }, [chat]);\n\n  return (\n    <div className={cssClasses.container}>\n      <h1 className={cssClasses.title}>{title}</h1>\n      {showRestartButton && (\n        <button\n          aria-label=\"Restart Conversation\"\n          onClick={onRestart}\n          className={restartButtonCssClasses}\n        >\n          {restartButtonIcon ?? (\n            <DualSyncIcon className={cssClasses.restartButtonIcon} />\n          )}\n        </button>\n      )}\n      {showCloseButton && (\n        <button\n          aria-label=\"Close Chat\"\n          onClick={onClose}\n          className={cssClasses.closeButton}\n        >\n          {closeButtonIcon ?? (\n            <CrossIcon className={cssClasses.closeButtonIcon} />\n          )}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["withStylelessCssClasses","useChatActions","useComposedCssClasses","useState","twMerge","useRef","useCallback","_jsxs","_jsx","DualSyncIcon","CrossIcon"],"mappings":";;;;;;;;;;;AAsBA,MAAM,iBAAiB,GACrBA,+CAAuB,CAAC,QAAQ,EAAE;AAChC,IAAA,SAAS,EACP,wFAAwF;AAC1F,IAAA,KAAK,EAAE,8CAA8C;AACrD,IAAA,aAAa,EAAE,2DAA2D;AAC1E,IAAA,iBAAiB,EAAE,2CAA2C;AAC9D,IAAA,WAAW,EACT,mEAAmE;AACrE,IAAA,eAAe,EAAE,8BAA8B;AAChD,CAAA,CAAC,CAAC;AAgCL;;;;;;;AAOG;SACa,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACA,EAAA;AAChB,IAAA,MAAM,IAAI,GAAGC,gCAAc,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,MAAM,uBAAuB,GAAGC,qBAAO,CACrC,UAAU,CAAC,aAAa,EACxB,UAAU,GAAG,4BAA4B,GAAG,iBAAiB,CAC9D,CAAC;AAEF,IAAA,MAAM,aAAa,GAAGC,YAAM,EAAiC,CAAC;AAC9D,IAAA,MAAM,SAAS,GAAGC,iBAAW,CAAC,YAAW;AACvC,QAAA,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpC,aAAa,CAAC,IAAI,CAAC,CAAC;AACpB,QAAA,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;YACtC,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB,EAAE,IAAI,CAAC,CAAC;QACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC7B,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AAEX,IAAA,QACEC,eAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA,QAAA,EAAA,CAClCC,cAAI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,KAAK,EAAG,QAAA,EAAA,KAAK,GAAM,EAC5C,iBAAiB,KAChBA,yCACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,YAEjC,iBAAiB,KAChBA,cAAC,CAAAC,qBAAY,IAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAI,CAAA,CAC1D,EACM,CAAA,CACV,EACA,eAAe,KACdD,cAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,KACdA,cAAC,CAAAE,eAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAI,CAAA,CACrD,GACM,CACV,CAAA,EAAA,CACG,EACN;AACJ;;;;"}

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

@@ -1,18 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const chat_headless_react_1 = require("@yext/chat-headless-react");
-const Arrow_1 = require("../icons/Arrow");
-const hooks_1 = require("../hooks");
-const react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
-const useDefaultHandleApiError_1 = require("../hooks/useDefaultHandleApiError");
-const withStylelessCssClasses_1 = require("../utils/withStylelessCssClasses");
-const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)("Input", {
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var chatHeadlessReact = require('@yext/chat-headless-react');
+var Arrow = require('../icons/Arrow.js');
+var useComposedCssClasses = require('../hooks/useComposedCssClasses.js');
+var TextareaAutosize = require('react-textarea-autosize');
+var useDefaultHandleApiError = require('../hooks/useDefaultHandleApiError.js');
+var withStylelessCssClasses = require('../utils/withStylelessCssClasses.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
+
+const builtInCssClasses = withStylelessCssClasses.withStylelessCssClasses("Input", {
     container: "w-full h-fit flex flex-row relative @container",
     textArea: "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",
     sendButton: "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",
@@ -28,20 +29,20 @@ const builtInCssClasses = (0, withStylelessCssClasses_1.withStylelessCssClasses)
  *
  * @param props - {@link ChatInputProps}
  */
-function ChatInput({ placeholder = "Type a message...", stream = false, inputAutoFocus = false, handleError, sendButtonIcon = (0, jsx_runtime_1.jsx)(Arrow_1.ArrowIcon, {}), customCssClasses, }) {
-    const chat = (0, chat_headless_react_1.useChatActions)();
-    const [input, setInput] = (0, react_1.useState)("");
-    const canSendMessage = (0, chat_headless_react_1.useChatState)((state) => state.conversation.canSendMessage);
-    const defaultHandleApiError = (0, useDefaultHandleApiError_1.useDefaultHandleApiError)();
-    const cssClasses = (0, hooks_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
-    const sendMessage = (0, react_1.useCallback)(async () => {
+function ChatInput({ placeholder = "Type a message...", stream = false, inputAutoFocus = false, handleError, sendButtonIcon = jsxRuntime.jsx(Arrow.ArrowIcon, {}), customCssClasses, }) {
+    const chat = chatHeadlessReact.useChatActions();
+    const [input, setInput] = react.useState("");
+    const canSendMessage = chatHeadlessReact.useChatState((state) => state.conversation.canSendMessage);
+    const defaultHandleApiError = useDefaultHandleApiError.useDefaultHandleApiError();
+    const cssClasses = useComposedCssClasses.useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const sendMessage = react.useCallback(async () => {
         const res = stream
             ? chat.streamNextMessage(input)
             : chat.getNextMessage(input);
         setInput("");
         res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
     }, [chat, input, handleError, defaultHandleApiError, stream]);
-    const handleKeyDown = (0, react_1.useCallback)((e) => {
+    const handleKeyDown = react.useCallback((e) => {
         if (!e.shiftKey && e.key === "Enter") {
             e.preventDefault();
             if (canSendMessage && input.trim().length !== 0) {
@@ -49,10 +50,11 @@ function ChatInput({ placeholder = "Type a message...", stream = false, inputAut
             }
         }
     }, [sendMessage, canSendMessage, input]);
-    const onInputChange = (0, react_1.useCallback)((e) => {
+    const onInputChange = react.useCallback((e) => {
         setInput(e.target.value);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: cssClasses.container, children: [(0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), (0, jsx_runtime_1.jsx)("button", { "aria-label": "Send Message", disabled: !canSendMessage || input.trim().length === 0, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
+    return (jsxRuntime.jsxs("div", { className: cssClasses.container, children: [jsxRuntime.jsx(TextareaAutosize__default.default, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), jsxRuntime.jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage || input.trim().length === 0, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
 }
+
 exports.ChatInput = ChatInput;
-//# sourceMappingURL=ChatInput.js.map
+//# sourceMappingURL=ChatInput.js.map

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","TextareaAutosize"],"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,CAACS,iCAAgB,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,EACFT,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,18 +1,17 @@
-"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 overflow-auto",
@@ -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":";;;;;;;;;;;;;AA4BA,MAAM,iBAAiB,GAAwBA,+CAAuB,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;AAC7C,IAAA,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;AAC3C,IAAA,MAAM,IAAI,GAAGC,gCAAc,EAAE,CAAC;AAC9B,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACtE,IAAA,MAAM,OAAO,GAAGA,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;AACtE,IAAA,MAAM,cAAc,GAAGA,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;IACF,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAC9E,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,oBAAoB,GAAGC,+CAAuB,EAAE,CAAC;IAEvDC,eAAS,CAAC,MAAK;AACb,QAAA,oBAAoB,CAAC;AACnB,YAAA,MAAM,EAAE,iBAAiB;AAC1B,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;;IAG3BA,eAAS,CAAC,MAAK;QACb,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,EAAE;YAC5C,OAAO;AACR,SAAA;QACD,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;AAC9C,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,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEnE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAC;;IAGjDD,eAAS,CAAC,MAAK;AACb,QAAA,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC;AAC1B,YAAA,GAAG,EAAE,WAAW,CAAC,OAAO,EAAE,YAAY;AACtC,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,QACEE,wBAAK,SAAS,EAAC,WAAW,EACxB,QAAA,EAAAC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA,QAAA,EAAA,CACjC,MAAM,EACPD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAChD,QAAA,EAAAC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,aAC3D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAC3BC,mBAAA,CAACC,2BAAa,EAAA,EAAA,GACR,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,uBAAuB,EACpD,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,GAChB,CACH,CAAC,EACD,OAAO,IAAIH,cAAC,CAAAI,uBAAW,EAAG,EAAA,CAAA,CAAA,EAAA,CACvB,GACF,EACNJ,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,QAAA,EACvCA,cAAC,CAAAK,mBAAS,EAAK,EAAA,GAAA,KAAK,EAAE,gBAAgB,EAAE,UAAU,CAAC,eAAe,GAAI,EAClE,CAAA,CAAA,EAAA,CACF,EACF,CAAA,EACN;AACJ;;;;"}

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