@yext/chat-ui-react 0.7.0-alpha.38.5 → 0.7.0-alpha.38.6

package/lib/commonjs/src/icons/ThumbsUpFill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbsUpFill.d.ts","sourceRoot":"","sources":["../../../../src/icons/ThumbsUpFill.tsx"],"names":[],"mappings":";AAAA,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAgBd"}
+{"version":3,"file":"ThumbsUpFill.d.ts","sourceRoot":"","sources":["../../../../src/icons/ThumbsUpFill.tsx"],"names":[],"mappings":";AAEA,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAgBd"}

package/lib/commonjs/src/icons/ThumbsUpFill.js

@@ -1,9 +1,14 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime.js');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 function ThumbsUpFillIcon({ className, }) {
-    return (jsxRuntime.jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M14.059 10.5061C14.5293 11.8877 13.2864 12.5128 13.2864 12.5128C13.5887 13.7299 12.4802 14.322 12.4802 14.322C12.413 16.0655 10.8006 15.9997 10.8006 15.9997C9.89359 15.9997 8.85223 15.9997 8.85223 15.9997C7.91166 15.901 7.27341 15.5391 7.27341 15.5391C6.29924 15.0457 5.79536 14.5852 5.52663 14.2233C5.52663 14.2233 4.51887 11.6904 5.29148 8.89426C5.33673 8.73052 5.35867 8.69688 5.39226 8.63109C5.45944 8.43372 5.52663 8.36793 5.52663 8.36793C6.0641 8.00608 6.73594 7.18369 6.73594 7.18369C7.27341 6.69026 7.7437 5.27576 7.7437 5.27576C8.07962 4.12442 8.88583 4.02573 8.88583 4.02573C11.0357 3.76257 11.0021 5.60471 11.0021 5.60471C11.0021 6.32841 10.4982 7.41396 10.4982 7.41396H13.5215C15.0668 7.71002 14.9996 9.05873 14.9996 9.05873C14.9996 10.1772 14.0254 10.539 14.0254 10.539L14.059 10.5061Z", fill: "currentColor" }) }));
+    return (React__default.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg" },
+        React__default.default.createElement("path", { d: "M14.059 10.5061C14.5293 11.8877 13.2864 12.5128 13.2864 12.5128C13.5887 13.7299 12.4802 14.322 12.4802 14.322C12.413 16.0655 10.8006 15.9997 10.8006 15.9997C9.89359 15.9997 8.85223 15.9997 8.85223 15.9997C7.91166 15.901 7.27341 15.5391 7.27341 15.5391C6.29924 15.0457 5.79536 14.5852 5.52663 14.2233C5.52663 14.2233 4.51887 11.6904 5.29148 8.89426C5.33673 8.73052 5.35867 8.69688 5.39226 8.63109C5.45944 8.43372 5.52663 8.36793 5.52663 8.36793C6.0641 8.00608 6.73594 7.18369 6.73594 7.18369C7.27341 6.69026 7.7437 5.27576 7.7437 5.27576C8.07962 4.12442 8.88583 4.02573 8.88583 4.02573C11.0357 3.76257 11.0021 5.60471 11.0021 5.60471C11.0021 6.32841 10.4982 7.41396 10.4982 7.41396H13.5215C15.0668 7.71002 14.9996 9.05873 14.9996 9.05873C14.9996 10.1772 14.0254 10.539 14.0254 10.539L14.059 10.5061Z", fill: "currentColor" })));
 }
 
 exports.ThumbsUpFillIcon = ThumbsUpFillIcon;

package/lib/commonjs/src/icons/ThumbsUpFill.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbsUpFill.js","sources":["../../../../src/icons/ThumbsUpFill.tsx"],"sourcesContent":["export function ThumbsUpFillIcon({\n  className,\n}: {\n  className?: string;\n}): JSX.Element {\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M14.059 10.5061C14.5293 11.8877 13.2864 12.5128 13.2864 12.5128C13.5887 13.7299 12.4802 14.322 12.4802 14.322C12.413 16.0655 10.8006 15.9997 10.8006 15.9997C9.89359 15.9997 8.85223 15.9997 8.85223 15.9997C7.91166 15.901 7.27341 15.5391 7.27341 15.5391C6.29924 15.0457 5.79536 14.5852 5.52663 14.2233C5.52663 14.2233 4.51887 11.6904 5.29148 8.89426C5.33673 8.73052 5.35867 8.69688 5.39226 8.63109C5.45944 8.43372 5.52663 8.36793 5.52663 8.36793C6.0641 8.00608 6.73594 7.18369 6.73594 7.18369C7.27341 6.69026 7.7437 5.27576 7.7437 5.27576C8.07962 4.12442 8.88583 4.02573 8.88583 4.02573C11.0357 3.76257 11.0021 5.60471 11.0021 5.60471C11.0021 6.32841 10.4982 7.41396 10.4982 7.41396H13.5215C15.0668 7.71002 14.9996 9.05873 14.9996 9.05873C14.9996 10.1772 14.0254 10.539 14.0254 10.539L14.059 10.5061Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAAgB,SAAA,gBAAgB,CAAC,EAC/B,SAAS,GAGV,EAAA;AACC,IAAA,QACEA,cACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,YAElCA,cACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gyBAAgyB,EAClyB,IAAI,EAAC,cAAc,EACnB,CAAA,EAAA,CACE,EACN;AACJ;;;;"}
+{"version":3,"file":"ThumbsUpFill.js","sources":["../../../../src/icons/ThumbsUpFill.tsx"],"sourcesContent":["import React from \"react\";\n\nexport function ThumbsUpFillIcon({\n  className,\n}: {\n  className?: string;\n}): JSX.Element {\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M14.059 10.5061C14.5293 11.8877 13.2864 12.5128 13.2864 12.5128C13.5887 13.7299 12.4802 14.322 12.4802 14.322C12.413 16.0655 10.8006 15.9997 10.8006 15.9997C9.89359 15.9997 8.85223 15.9997 8.85223 15.9997C7.91166 15.901 7.27341 15.5391 7.27341 15.5391C6.29924 15.0457 5.79536 14.5852 5.52663 14.2233C5.52663 14.2233 4.51887 11.6904 5.29148 8.89426C5.33673 8.73052 5.35867 8.69688 5.39226 8.63109C5.45944 8.43372 5.52663 8.36793 5.52663 8.36793C6.0641 8.00608 6.73594 7.18369 6.73594 7.18369C7.27341 6.69026 7.7437 5.27576 7.7437 5.27576C8.07962 4.12442 8.88583 4.02573 8.88583 4.02573C11.0357 3.76257 11.0021 5.60471 11.0021 5.60471C11.0021 6.32841 10.4982 7.41396 10.4982 7.41396H13.5215C15.0668 7.71002 14.9996 9.05873 14.9996 9.05873C14.9996 10.1772 14.0254 10.539 14.0254 10.539L14.059 10.5061Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAEgB,SAAA,gBAAgB,CAAC,EAC/B,SAAS,GAGV,EAAA;IACC,QACEA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,EAAA;QAElCA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gyBAAgyB,EAClyB,IAAI,EAAC,cAAc,EAAA,CACnB,CACE,EACN;AACJ;;;;"}

package/lib/esm/index.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
-
-import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Message } from '@yext/chat-headless-react';
+import { default as React_2 } from 'react';
 
 /**
  * A component that renders the header of a chat bot panel,
@@ -11,7 +9,7 @@ import { Message } from '@yext/chat-headless-react';
  *
  * @param props - {@link ChatHeaderProps}
  */
-export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): JSX_2.Element;
+export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React_2.JSX.Element;
 
 /**
  * The CSS class interface for the {@link ChatHeader} component.
@@ -68,7 +66,7 @@ export declare interface ChatHeaderProps {
  *
  * @param props - {@link ChatInputProps}
  */
-export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): JSX_2.Element;
+export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): React_2.JSX.Element;
 
 /**
  * The CSS class interface for the {@link ChatInput} component.
@@ -120,7 +118,7 @@ export declare interface ChatInputProps {
  *
  * @param props - {@link ChatPanelProps}
  */
-export declare function ChatPanel(props: ChatPanelProps): JSX_2.Element;
+export declare function ChatPanel(props: ChatPanelProps): React_2.JSX.Element;
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -158,7 +156,7 @@ export declare interface ChatPanelProps extends Omit<MessageBubbleProps, "custom
  *
  * @param props - {@link ChatPanelProps}
  */
-export declare function ChatPopUp(props: ChatPopUpProps): JSX_2.Element;
+export declare function ChatPopUp(props: ChatPopUpProps): React_2.JSX.Element;
 
 /**
  * The CSS class interface for the {@link ChatPopUp} component.
@@ -214,7 +212,7 @@ export declare interface FeedbackButtonsCssClasses {
  *
  * @param props - {@link MessageBubbleProps}
  */
-export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, }: MessageBubbleProps): JSX_2.Element;
+export declare function MessageBubble({ message, showFeedbackButtons, showTimestamp, customCssClasses, formatTimestamp, }: MessageBubbleProps): React_2.JSX.Element;
 
 /**
  * The CSS class interface for the {@link MessageBubble} component.

package/lib/esm/package.json.mjs

@@ -1,4 +1,4 @@
-var version = "0.7.0-alpha.38.5";
+var version = "0.7.0-alpha.38.6";
 
 export { version };
 //# sourceMappingURL=package.json.mjs.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 /**
  * The CSS class interface for the {@link ChatHeader} component.
  *
@@ -49,5 +49,5 @@ export interface ChatHeaderProps {
  *
  * @param props - {@link ChatHeaderProps}
  */
-export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): React.JSX.Element;
 //# sourceMappingURL=ChatHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAcD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,yCAAyC;IACzC,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;CACzC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACjB,EAAE,eAAe,2CAgDjB"}
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAcD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,yCAAyC;IACzC,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;CACzC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,OAAO,EACP,gBAAgB,GACjB,EAAE,eAAe,qBAgDjB"}

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

@@ -1,8 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime.js';
 import { useChatActions } from '@yext/chat-headless-react';
 import { DualSyncIcon } from '../icons/DualSync.mjs';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
-import { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { CrossIcon } from '../icons/Cross.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
@@ -37,7 +36,10 @@ function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButt
         }, 1000);
         chat.restartConversation();
     }, [chat]);
-    return (jsxs("div", { className: cssClasses.container, children: [jsx("h1", { className: cssClasses.title, children: title }), showRestartButton && (jsx("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses, children: restartButtonIcon ?? (jsx(DualSyncIcon, { className: cssClasses.restartButtonIcon })) })), showCloseButton && (jsx("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon ?? (jsx(CrossIcon, { className: cssClasses.closeButtonIcon })) }))] }));
+    return (React.createElement("div", { className: cssClasses.container },
+        React.createElement("h1", { className: cssClasses.title }, title),
+        showRestartButton && (React.createElement("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses }, restartButtonIcon ?? (React.createElement(DualSyncIcon, { className: cssClasses.restartButtonIcon })))),
+        showCloseButton && (React.createElement("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton }, closeButtonIcon ?? (React.createElement(CrossIcon, { className: cssClasses.closeButtonIcon }))))));
 }
 
 export { ChatHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.mjs","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":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAsBA,MAAM,iBAAiB,GACrB,uBAAuB,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,GAAG,cAAc,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CACrC,UAAU,CAAC,aAAa,EACxB,UAAU,GAAG,4BAA4B,GAAG,iBAAiB,CAC9D,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,MAAM,EAAiC,CAAC;AAC9D,IAAA,MAAM,SAAS,GAAG,WAAW,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,QACEA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA,QAAA,EAAA,CAClCC,GAAI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,KAAK,EAAG,QAAA,EAAA,KAAK,GAAM,EAC5C,iBAAiB,KAChBA,8BACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,YAEjC,iBAAiB,KAChBA,GAAC,CAAA,YAAY,IAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAI,CAAA,CAC1D,EACM,CAAA,CACV,EACA,eAAe,KACdA,GAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,KACdA,GAAC,CAAA,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAI,CAAA,CACrD,GACM,CACV,CAAA,EAAA,CACG,EACN;AACJ;;;;"}
+{"version":3,"file":"ChatHeader.mjs","sources":["../../../../src/components/ChatHeader.tsx"],"sourcesContent":["import { useChatActions } from \"@yext/chat-headless-react\";\nimport { DualSyncIcon } from \"../icons/DualSync\";\nimport { useComposedCssClasses } from \"../hooks/useComposedCssClasses\";\nimport React, { 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":[],"mappings":";;;;;;;;AAsBA,MAAM,iBAAiB,GACrB,uBAAuB,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,GAAG,cAAc,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE9E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CACrC,UAAU,CAAC,aAAa,EACxB,UAAU,GAAG,4BAA4B,GAAG,iBAAiB,CAC9D,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,MAAM,EAAiC,CAAC;AAC9D,IAAA,MAAM,SAAS,GAAG,WAAW,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,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,EAAG,KAAK,CAAM;QAC5C,iBAAiB,KAChB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,EAAA,EAEjC,iBAAiB,KAChB,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAA,CAAI,CAC1D,CACM,CACV;AACA,QAAA,eAAe,KACd,KACa,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,EAEhC,EAAA,eAAe,KACd,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,eAAe,EAAA,CAAI,CACrD,CACM,CACV,CACG,EACN;AACJ;;;;"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 /**
  * The CSS class interface for the {@link ChatInput} component.
  *
@@ -49,5 +49,5 @@ export interface ChatInputProps {
  *
  * @param props - {@link ChatInputProps}
  */
-export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): React.JSX.Element;
 //# sourceMappingURL=ChatInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,GACjB,EAAE,cAAc,2CAyDhB"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,GACjB,EAAE,cAAc,qBAyDhB"}

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

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime.js';
-import { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useChatActions, useChatState } from '@yext/chat-headless-react';
 import { ArrowIcon } from '../icons/Arrow.mjs';
 import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
@@ -23,7 +22,7 @@ const builtInCssClasses = withStylelessCssClasses("Input", {
  *
  * @param props - {@link ChatInputProps}
  */
-function ChatInput({ placeholder = "Type a message...", stream = false, inputAutoFocus = false, handleError, sendButtonIcon = jsx(ArrowIcon, {}), customCssClasses, }) {
+function ChatInput({ placeholder = "Type a message...", stream = false, inputAutoFocus = false, handleError, sendButtonIcon = React.createElement(ArrowIcon, null), customCssClasses, }) {
     const chat = useChatActions();
     const [input, setInput] = useState("");
     const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
@@ -47,7 +46,9 @@ function ChatInput({ placeholder = "Type a message...", stream = false, inputAut
     const onInputChange = useCallback((e) => {
         setInput(e.target.value);
     }, []);
-    return (jsxs("div", { className: cssClasses.container, children: [jsx(TextareaAutosize, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage || input.trim().length === 0, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
+    return (React.createElement("div", { className: cssClasses.container },
+        React.createElement(TextareaAutosize, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }),
+        React.createElement("button", { "aria-label": "Send Message", disabled: !canSendMessage || input.trim().length === 0, onClick: sendMessage, className: cssClasses.sendButton }, sendButtonIcon)));
 }
 
 export { ChatInput };

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.mjs","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":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAmBA,MAAM,iBAAiB,GAAwB,uBAAuB,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,GAAGA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EAC9B,gBAAgB,GACD,EAAA;AACf,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;IAEzD,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAG,WAAW,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,GAAG,WAAW,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,GAAG,WAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAClC,QAAA,EAAA,CAAAD,GAAA,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,GACa,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;;;;"}
+{"version":3,"file":"ChatInput.mjs","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import React, { 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":[],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB,GAAwB,uBAAuB,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,GAAG,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EAC9B,gBAAgB,GACD,EAAA;AACf,IAAA,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAG,YAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;IAEzD,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAG,WAAW,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,GAAG,WAAW,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,GAAG,WAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,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;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,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,EAAA,cAAc,CACR,CACL,EACN;AACJ;;;;"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { MessageBubbleCssClasses, MessageBubbleProps } from "./MessageBubble";
 import { ChatInputCssClasses, ChatInputProps } from "./ChatInput";
 /**
@@ -36,5 +36,5 @@ export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClass
  *
  * @param props - {@link ChatPanelProps}
  */
-export declare function ChatPanel(props: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPanel(props: ChatPanelProps): React.JSX.Element;
 //# sourceMappingURL=ChatPanel.d.ts.map

package/lib/esm/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,2CA6D9C"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,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,qBA6D9C"}

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

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime.js';
-import { useEffect, useRef, createElement } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useChatActions, useChatState } from '@yext/chat-headless-react';
 import { MessageBubble } from './MessageBubble.mjs';
 import { ChatInput } from './ChatInput.mjs';
@@ -58,7 +57,15 @@ function ChatPanel(props) {
             behavior: "smooth",
         });
     }, [messages]);
-    return (jsx("div", { className: "yext-chat", children: jsxs("div", { className: cssClasses.container, children: [header, jsx("div", { className: cssClasses.messagesScrollContainer, children: jsxs("div", { ref: messagesRef, className: cssClasses.messagesContainer, children: [messages.map((message, index) => (createElement(MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, key: index, message: message }))), loading && jsx(LoadingDots, {})] }) }), jsx("div", { className: cssClasses.inputContainer, children: jsx(ChatInput, { ...props, customCssClasses: cssClasses.inputCssClasses }) })] }) }));
+    return (React.createElement("div", { className: "yext-chat" },
+        React.createElement("div", { className: cssClasses.container },
+            header,
+            React.createElement("div", { className: cssClasses.messagesScrollContainer },
+                React.createElement("div", { ref: messagesRef, className: cssClasses.messagesContainer },
+                    messages.map((message, index) => (React.createElement(MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, key: index, message: message }))),
+                    loading && React.createElement(LoadingDots, null))),
+            React.createElement("div", { className: cssClasses.inputContainer },
+                React.createElement(ChatInput, { ...props, customCssClasses: cssClasses.inputCssClasses })))));
 }
 
 export { ChatPanel };

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.mjs","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":["_jsx","_jsxs","_createElement"],"mappings":"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"}
+{"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, { 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":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 import { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
 /**
@@ -39,5 +39,5 @@ export interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton"
  *
  * @param props - {@link ChatPanelProps}
  */
-export declare function ChatPopUp(props: ChatPopUpProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPopUp(props: ChatPopUpProps): React.JSX.Element;
 //# sourceMappingURL=ChatPopUp.d.ts.map

package/lib/esm/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,2CAkE9C"}
+{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,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,qBAkE9C"}

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

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime.js';
-import { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { ChatIcon } from '../icons/Chat.mjs';
 import { ChatPanel } from './ChatPanel.mjs';
 import { ChatHeader } from './ChatHeader.mjs';
@@ -56,7 +55,11 @@ function ChatPopUp(props) {
     const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
     const panelCssClasses = twMerge(cssClasses.panel, showChat ? cssClasses.panel__display : cssClasses.panel__hidden);
     const buttonCssClasses = twMerge(cssClasses.button, showChat ? cssClasses.button__hidden : cssClasses.button__display);
-    return (jsx("div", { className: "yext-chat", children: jsxs("div", { className: cssClasses.container, children: [jsx("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel", children: jsx(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: jsx(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) }) }), jsx("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses, children: openPanelButtonIcon ?? (jsx(ChatIcon, { className: cssClasses.buttonIcon })) })] }) }));
+    return (React.createElement("div", { className: "yext-chat" },
+        React.createElement("div", { className: cssClasses.container },
+            React.createElement("div", { className: panelCssClasses, "aria-label": "Chat Popup Panel" },
+                React.createElement(ChatPanel, { ...props, customCssClasses: cssClasses.panelCssClasses, header: React.createElement(ChatHeader, { title: title, showRestartButton: showRestartButton, showCloseButton: true, onClose: onClose, customCssClasses: cssClasses.headerCssClasses }) })),
+            React.createElement("button", { "aria-label": "Chat Popup Button", onClick: onClick, className: buttonCssClasses }, openPanelButtonIcon ?? (React.createElement(ChatIcon, { className: cssClasses.buttonIcon }))))));
 }
 
 export { ChatPopUp };

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.mjs","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":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ChatPopUp.mjs","sources":["../../../../src/components/ChatPopUp.tsx"],"sourcesContent":["import React, { 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":[],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * The CSS class interface for the FeedbackButtons component.
  *
@@ -29,6 +30,6 @@ interface FeedbackButtonsProps {
  *
  * @internal
  */
-export declare function FeedbackButtons({ customCssClasses, responseId, }: FeedbackButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeedbackButtons({ customCssClasses, responseId, }: FeedbackButtonsProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=FeedbackButtons.d.ts.map

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

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

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

@@ -1,7 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime.js';
 import { ThumbsDownIcon } from '../icons/ThumbsDown.mjs';
 import { ThumbsUpIcon } from '../icons/ThumbsUp.mjs';
-import { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { ThumbsUpFillIcon } from '../icons/ThumbsUpFill.mjs';
 import { ThumbsDownFillIcon } from '../icons/ThumbsDownFill.mjs';
 import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
@@ -45,7 +44,9 @@ function FeedbackButtons({ customCssClasses, responseId, }) {
             },
         });
     }, [reportAnalyticsEvent, responseId]);
-    return (jsxs("div", { className: cssClasses.container, children: [jsx("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp, children: selectedThumb === "UP" ? (jsx(ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : (jsx(ThumbsUpIcon, { className: cssClasses.thumbsUpIcon })) }), jsx("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown, children: selectedThumb === "DOWN" ? (jsx(ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : (jsx(ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })) })] }));
+    return (React.createElement("div", { className: cssClasses.container },
+        React.createElement("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp }, selectedThumb === "UP" ? (React.createElement(ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : (React.createElement(ThumbsUpIcon, { className: cssClasses.thumbsUpIcon }))),
+        React.createElement("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown }, selectedThumb === "DOWN" ? (React.createElement(ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : (React.createElement(ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })))));
 }
 
 export { FeedbackButtons };

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

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * A component that signifies loading status.
  *
@@ -5,5 +6,5 @@
  */
 export declare function LoadingDots({ className }: {
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=LoadingDots.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../src/components/LoadingDots.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAWhE"}
+{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../src/components/LoadingDots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAWhE"}

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime.js';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 /**
@@ -7,7 +7,10 @@ import { twMerge } from 'tailwind-merge';
  * @internal
  */
 function LoadingDots({ className }) {
-    return (jsxs("div", { "aria-label": "Loading Indicator", className: twMerge("flex gap-1 p-2 animate-fade-in", className), children: [jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }), jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }), jsx("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })] }));
+    return (React.createElement("div", { "aria-label": "Loading Indicator", className: twMerge("flex gap-1 p-2 animate-fade-in", className) },
+        React.createElement("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite]" }),
+        React.createElement("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.3s]" }),
+        React.createElement("div", { className: "w-2 h-2 bg-slate-500 rounded-full animate-[bounce_1s_infinite_0.6s]" })));
 }
 
 export { LoadingDots };

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingDots.mjs","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","_jsx"],"mappings":";;;AAEA;;;;AAIG;AACa,SAAA,WAAW,CAAC,EAAE,SAAS,EAA0B,EAAA;AAC/D,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EACa,mBAAmB,EAC9B,SAAS,EAAE,OAAO,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAE/DC,aAAK,SAAS,EAAC,gEAAgE,EAAA,CAAG,EAClFA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qEAAqE,EAAG,CAAA,EACvFA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qEAAqE,EAAG,CAAA,CAAA,EAAA,CACnF,EACN;AACJ;;;;"}
+{"version":3,"file":"LoadingDots.mjs","sources":["../../../../src/components/LoadingDots.tsx"],"sourcesContent":["import React from 'react';\nimport { 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":[],"mappings":";;;AAGA;;;;AAIG;AACa,SAAA,WAAW,CAAC,EAAE,SAAS,EAA0B,EAAA;IAC/D,QACE,KACa,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EAAA,mBAAmB,EAC9B,SAAS,EAAE,OAAO,CAAC,gCAAgC,EAAE,SAAS,CAAC,EAAA;QAE/D,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gEAAgE,EAAG,CAAA;QAClF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qEAAqE,EAAG,CAAA;AACvF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qEAAqE,EAAG,CAAA,CACnF,EACN;AACJ;;;;"}

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

@@ -1,3 +1,4 @@
+import React from "react";
 interface MarkdownProps {
     /** Stringified markdown. */
     content: string;
@@ -15,6 +16,6 @@ interface MarkdownProps {
  *
  * @internal
  */
-export declare function Markdown({ content, responseId, className }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Markdown({ content, responseId, className }: MarkdownProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=Markdown.d.ts.map

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

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