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

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,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var name = "@yext/chat-ui-react";
+var version = "0.6.0-alpha.38";
+var description = "A library of React Components for powering Yext Chat integrations.";
+var author = "clippy@yext.com";
+var main = "./lib/commonjs/src/index.js";
+var module$1 = "./lib/esm/src/index.mjs";
+var types = "./lib/esm/src/index.d.ts";
+var sideEffects = false;
+var exports$1 = {
+	".": {
+		"import": "./lib/esm/src/index.mjs",
+		require: "./lib/commonjs/src/index.js"
+	},
+	"./bundle.css": "./lib/bundle.css"
+};
+var license = "BSD-3-Clause";
+var files = [
+	"lib",
+	"src",
+	"THIRD-PARTY-NOTICES",
+	"LICENSE"
+];
+var keywords = [
+	"chat",
+	"ai",
+	"yext",
+	"react",
+	"components",
+	"tailwindcss"
+];
+var scripts = {
+	lint: "prettier --write . && eslint --fix --max-warnings=0 .",
+	test: "jest --config=jest.config.json",
+	storybook: "storybook dev -p 6006",
+	dev: "tsc --watch -p tsconfig.json",
+	"generate-docs": "api-extractor run --local --verbose && api-documenter markdown --input-folder temp --output-folder docs && rm -rf temp",
+	"generate-notices": "generate-license-file --input package.json --output ./THIRD-PARTY-NOTICES --overwrite",
+	postcss: "postcss",
+	tailwindcss: "tailwindcss",
+	"build:css": "./scoped-bundle.sh",
+	"build:js": "rollup --config rollup.config.mjs",
+	build: "rm -rf lib/** && npm run build:js && npm run build:css && npm run generate-docs && npm run generate-notices",
+	"build-storybook": "storybook build"
+};
+var devDependencies = {
+	"@babel/core": "^7.21.8",
+	"@babel/preset-env": "^7.21.5",
+	"@babel/preset-react": "^7.18.6",
+	"@babel/preset-typescript": "^7.21.5",
+	"@microsoft/api-documenter": "^7.22.8",
+	"@microsoft/api-extractor": "^7.35.1",
+	"@rollup/plugin-json": "^6.0.0",
+	"@storybook/addon-essentials": "^7.0.18",
+	"@storybook/addon-interactions": "^7.0.18",
+	"@storybook/addon-links": "^7.0.18",
+	"@storybook/blocks": "^7.0.18",
+	"@storybook/react": "^7.0.17",
+	"@storybook/react-vite": "^7.0.17",
+	"@storybook/testing-library": "^0.1.0",
+	"@tailwindcss/container-queries": "^0.1.1",
+	"@tailwindcss/typography": "^0.5.9",
+	"@testing-library/jest-dom": "^5.16.5",
+	"@testing-library/react": "^14.0.0",
+	"@testing-library/user-event": "^14.4.3",
+	"@types/jest": "^29.5.1",
+	"@types/react": "^18.2.7",
+	"@yext/chat-headless-react": "^0.5.6",
+	"@yext/eslint-config": "^1.0.0",
+	"babel-jest": "^29.5.0",
+	eslint: "^8.39.0",
+	"eslint-plugin-storybook": "^0.6.12",
+	"generate-license-file": "^2.0.0",
+	jest: "^29.5.0",
+	"jest-environment-jsdom": "^29.5.0",
+	msw: "^1.2.1",
+	"msw-storybook-addon": "^1.8.0",
+	"postcss-cli": "^10.1.0",
+	"postcss-nested": "^6.0.1",
+	prettier: "^2.8.8",
+	react: "^18.2.0",
+	"react-dom": "^18.2.0",
+	rollup: "^3.28.1",
+	"rollup-plugin-typescript2": "^0.35.0",
+	storybook: "^7.0.17",
+	tailwindcss: "^3.3.2",
+	typescript: "^5.0.4"
+};
+var peerDependencies = {
+	"@yext/chat-headless-react": "^0.5.4",
+	react: "^16.14 || ^17 || ^18",
+	"react-dom": "^16.14 || ^17 || || ^18"
+};
+var dependencies = {
+	"react-markdown": "^6.0.3",
+	"react-textarea-autosize": "^8.5.3",
+	"rehype-raw": "^5.0.0",
+	"rehype-sanitize": "^4.0.0",
+	"remark-gfm": "^1.0.0",
+	"tailwind-merge": "^1.12.0"
+};
+var packageJson = {
+	name: name,
+	version: version,
+	description: description,
+	author: author,
+	main: main,
+	module: module$1,
+	types: types,
+	sideEffects: sideEffects,
+	exports: exports$1,
+	license: license,
+	files: files,
+	keywords: keywords,
+	scripts: scripts,
+	devDependencies: devDependencies,
+	peerDependencies: peerDependencies,
+	dependencies: dependencies
+};
+
+exports.author = author;
+exports.default = packageJson;
+exports.dependencies = dependencies;
+exports.description = description;
+exports.devDependencies = devDependencies;
+exports.exports = exports$1;
+exports.files = files;
+exports.keywords = keywords;
+exports.license = license;
+exports.main = main;
+exports.module = module$1;
+exports.name = name;
+exports.peerDependencies = peerDependencies;
+exports.scripts = scripts;
+exports.sideEffects = sideEffects;
+exports.types = types;
+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,15 @@
-"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');
+
+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 +25,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 +46,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, { 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"],"mappings":";;;;;;;;;;;AAmBA,MAAM,iBAAiB,GAAwBA,+CAAuB,CACpE,OAAO,EACP;AACE,IAAA,SAAS,EAAE,gDAAgD;AAC3D,IAAA,QAAQ,EACN,uKAAuK;AACzK,IAAA,UAAU,EACR,mLAAmL;AACtL,CAAA,CACF,CAAC;AAgCF;;;;;;;;;;AAUG;AACG,SAAU,SAAS,CAAC,EACxB,WAAW,GAAG,mBAAmB,EACjC,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,cAAc,GAAGC,cAAA,CAACC,eAAS,EAAA,EAAA,CAAG,EAC9B,gBAAgB,GACD,EAAA;AACf,IAAA,MAAM,IAAI,GAAGC,gCAAc,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAGC,8BAAY,CACjC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,cAAc,CAC7C,CAAC;AACF,IAAA,MAAM,qBAAqB,GAAGC,iDAAwB,EAAE,CAAC;IAEzD,MAAM,UAAU,GAAGC,2CAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;AAE9E,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAAC,YAAW;QACzC,MAAM,GAAG,GAAG,MAAM;AAChB,cAAE,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;AAC/B,cAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,KAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9D,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAA2C,KAAI;QAC9C,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AAC/C,gBAAA,WAAW,EAAE,CAAC;AACf,aAAA;AACF,SAAA;KACF,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,CACrC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAC/B,CAAC,CAAyC,KAAI;AAC5C,QAAA,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC1B,EACD,EAAE,CACH,CAAC;AAEF,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAClC,QAAA,EAAA,CAAAR,cAAA,CAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,WAAW,EAAE,WAAW,EACxB,CAAA,EACFA,cACa,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EACzB,QAAQ,EAAE,CAAC,cAAc,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EACtD,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,CAAC,UAAU,EAE/B,QAAA,EAAA,cAAc,EACR,CAAA,CAAA,EAAA,CACL,EACN;AACJ;;;;"}

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

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

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

@@ -1,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":"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"}

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

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

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

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