@yext/chat-ui-react 0.1.0

package/lib/commonjs/components/MessageBubble.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBubble = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chat_headless_react_1 = require("@yext/chat-headless-react");
+const hooks_1 = require("../hooks");
+const tailwind_merge_1 = require("tailwind-merge");
+const Markdown_1 = require("./Markdown");
+const builtInCssClasses = {
+    topContainer: "w-full animate-fade-in @container",
+    subContainer: "flex flex-col @lg:flex-row @lg:items-center @lg:gap-x-2 @lg:m-1",
+    subContainer__user: "@lg:flex-row-reverse",
+    message: "peer rounded-2xl text-[13px] @[480px]:text-base p-4 w-fit max-w-[80%] prose overflow-x-auto",
+    message__bot: "text-slate-900 bg-gradient-to-tr from-slate-50 to-slate-100",
+    message__user: "ml-auto @lg:ml-0 text-white bg-gradient-to-tr from-blue-600 to-blue-700",
+    timestamp: "w-fit my-0.5 text-slate-400 text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
+    timestamp__user: "ml-auto",
+};
+/**
+ * A component that displays the provided message.
+ *
+ * @public
+ *
+ * @param props - {@link MessageBubbleProps}
+ */
+function MessageBubble({ message, showTimestamp = true, customCssClasses, formatTimestamp = defaultFormatTimestamp, }) {
+    const cssClasses = (0, hooks_1.useComposedCssClasses)(builtInCssClasses, customCssClasses);
+    const messageCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.message, message.source === chat_headless_react_1.MessageSource.USER
+        ? cssClasses.message__user
+        : cssClasses.message__bot);
+    const subContainerCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.subContainer, message.source === chat_headless_react_1.MessageSource.USER
+        ? cssClasses.subContainer__user
+        : cssClasses.subContainer__bot);
+    const timestampCssClasses = (0, tailwind_merge_1.twMerge)(cssClasses.timestamp, message.source === chat_headless_react_1.MessageSource.USER
+        ? cssClasses.timestamp__user
+        : cssClasses.timestamp__bot);
+    return ((0, jsx_runtime_1.jsx)("div", { className: cssClasses.topContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: subContainerCssClasses, children: [(0, jsx_runtime_1.jsx)("div", { className: messageCssClasses, children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { content: message.text }) }), showTimestamp && ((0, jsx_runtime_1.jsx)("div", { className: timestampCssClasses, children: message.timestamp ? formatTimestamp(message.timestamp) : " " }))] }) }));
+}
+exports.MessageBubble = MessageBubble;
+/**
+ * Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33:34 PM"
+ *
+ * @param timestamp - the timestamp to convert from
+ * @returns formatted timestamp
+ */
+function defaultFormatTimestamp(timestamp) {
+    return new Date(timestamp).toLocaleString(undefined, {
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+        hour12: true,
+    });
+}
+//# sourceMappingURL=MessageBubble.js.map

package/lib/commonjs/components/MessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":";;;;AAAA,mEAAmE;AACnE,oCAAiD;AACjD,mDAAyC;AACzC,yCAAsC;AAoBtC,MAAM,iBAAiB,GAA4B;IACjD,YAAY,EAAE,mCAAmC;IACjD,YAAY,EACV,iEAAiE;IACnE,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EACL,6FAA6F;IAC/F,YAAY,EAAE,6DAA6D;IAC3E,aAAa,EACX,yEAAyE;IAC3E,SAAS,EACP,2GAA2G;IAC7G,eAAe,EAAE,SAAS;CAC3B,CAAC;AAyBF;;;;;;GAMG;AACH,SAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,gBAAgB,EAChB,eAAe,GAAG,sBAAsB,GACrB;IACnB,MAAM,UAAU,GAAG,IAAA,6BAAqB,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,iBAAiB,GAAG,IAAA,wBAAO,EAC/B,UAAU,CAAC,OAAO,EAClB,OAAO,CAAC,MAAM,KAAK,mCAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,aAAa;QAC1B,CAAC,CAAC,UAAU,CAAC,YAAY,CAC5B,CAAC;IACF,MAAM,sBAAsB,GAAG,IAAA,wBAAO,EACpC,UAAU,CAAC,YAAY,EACvB,OAAO,CAAC,MAAM,KAAK,mCAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,kBAAkB;QAC/B,CAAC,CAAC,UAAU,CAAC,iBAAiB,CACjC,CAAC;IACF,MAAM,mBAAmB,GAAG,IAAA,wBAAO,EACjC,UAAU,CAAC,SAAS,EACpB,OAAO,CAAC,MAAM,KAAK,mCAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,eAAe;QAC5B,CAAC,CAAC,UAAU,CAAC,cAAc,CAC9B,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAE,UAAU,CAAC,YAAY,YACrC,iCAAK,SAAS,EAAE,sBAAsB,aACpC,gCAAK,SAAS,EAAE,iBAAiB,YAC/B,uBAAC,mBAAQ,IAAC,OAAO,EAAE,OAAO,CAAC,IAAI,GAAI,GAC/B,EAEL,aAAa,IAAI,CAChB,gCAAK,SAAS,EAAE,mBAAmB,YAChC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,GACzD,CACP,IACG,GACF,CACP,CAAC;AACJ,CAAC;AAzCD,sCAyCC;AAED;;;;;GAKG;AACH,SAAS,sBAAsB,CAAC,SAAiB;IAC/C,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE;QACnD,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,IAAI;KACb,CAAC,CAAC;AACL,CAAC"}

package/lib/commonjs/components/index.d.ts

@@ -0,0 +1,11 @@
+export { ChatInput } from "./ChatInput";
+export type { ChatInputCssClasses, ChatInputProps } from "./ChatInput";
+export { ChatHeader } from "./ChatHeader";
+export type { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
+export { MessageBubble } from "./MessageBubble";
+export type { MessageBubbleCssClasses, MessageBubbleProps, } from "./MessageBubble";
+export { ChatPanel } from "./ChatPanel";
+export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
+export { ChatPopUp } from "./ChatPopUp";
+export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
+//# sourceMappingURL=index.d.ts.map

package/lib/commonjs/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/commonjs/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPopUp = exports.ChatPanel = exports.MessageBubble = exports.ChatHeader = exports.ChatInput = void 0;
+var ChatInput_1 = require("./ChatInput");
+Object.defineProperty(exports, "ChatInput", { enumerable: true, get: function () { return ChatInput_1.ChatInput; } });
+var ChatHeader_1 = require("./ChatHeader");
+Object.defineProperty(exports, "ChatHeader", { enumerable: true, get: function () { return ChatHeader_1.ChatHeader; } });
+var MessageBubble_1 = require("./MessageBubble");
+Object.defineProperty(exports, "MessageBubble", { enumerable: true, get: function () { return MessageBubble_1.MessageBubble; } });
+var ChatPanel_1 = require("./ChatPanel");
+Object.defineProperty(exports, "ChatPanel", { enumerable: true, get: function () { return ChatPanel_1.ChatPanel; } });
+var ChatPopUp_1 = require("./ChatPopUp");
+Object.defineProperty(exports, "ChatPopUp", { enumerable: true, get: function () { return ChatPopUp_1.ChatPopUp; } });
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAGlB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAGnB,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AAMtB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAGlB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA"}

package/lib/commonjs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useComposedCssClasses } from "./useComposedCssClasses";
+//# sourceMappingURL=index.d.ts.map

package/lib/commonjs/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/commonjs/hooks/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComposedCssClasses = void 0;
+var useComposedCssClasses_1 = require("./useComposedCssClasses");
+Object.defineProperty(exports, "useComposedCssClasses", { enumerable: true, get: function () { return useComposedCssClasses_1.useComposedCssClasses; } });
+//# sourceMappingURL=index.js.map

package/lib/commonjs/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA"}

package/lib/commonjs/hooks/useComposedCssClasses.d.ts

@@ -0,0 +1,30 @@
+/**
+ * useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
+ *
+ * @remarks
+ * Tailwind classes will be merged without conflict, with custom classes having higher priority
+ * than built-in ones.
+ *
+ * @example
+ * Suppose a component has built-in classes of `{ container: 'px-4 text-slate-700' }`.
+ *
+ * Passing in the custom classes:
+ *
+ * ```ts
+ * { container: 'text-red-200 mb-3' }
+ * ```
+ *
+ * results in the merged classes of:
+ *
+ * ```ts
+ * { container: 'px-4 text-red-200 mb-3' }
+ * ```
+ *
+ * @public
+ *
+ * @param builtInClasses - The component's built-in tailwind classes
+ * @param customClasses - The custom tailwind classes to merge with the built-in ones
+ * @returns The composed CSS classes
+ */
+export declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;
+//# sourceMappingURL=useComposedCssClasses.d.ts.map

package/lib/commonjs/hooks/useComposedCssClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposedCssClasses.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComposedCssClasses.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,qBAAqB,CACnC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,EACxC,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GACtC,cAAc,CAyBhB"}

package/lib/commonjs/hooks/useComposedCssClasses.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComposedCssClasses = void 0;
+const react_1 = require("react");
+const tailwind_merge_1 = require("tailwind-merge");
+/**
+ * useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes.
+ *
+ * @remarks
+ * Tailwind classes will be merged without conflict, with custom classes having higher priority
+ * than built-in ones.
+ *
+ * @example
+ * Suppose a component has built-in classes of `{ container: 'px-4 text-slate-700' }`.
+ *
+ * Passing in the custom classes:
+ *
+ * ```ts
+ * { container: 'text-red-200 mb-3' }
+ * ```
+ *
+ * results in the merged classes of:
+ *
+ * ```ts
+ * { container: 'px-4 text-red-200 mb-3' }
+ * ```
+ *
+ * @public
+ *
+ * @param builtInClasses - The component's built-in tailwind classes
+ * @param customClasses - The custom tailwind classes to merge with the built-in ones
+ * @returns The composed CSS classes
+ */
+function useComposedCssClasses(builtInClasses, customClasses) {
+    return (0, react_1.useMemo)(() => {
+        const mergeCssClasses = (builtInClasses, customClasses) => {
+            const mergedCssClasses = { ...builtInClasses };
+            if (!customClasses) {
+                return mergedCssClasses;
+            }
+            Object.keys(customClasses).forEach((key) => {
+                const builtIn = builtInClasses[key];
+                const custom = customClasses[key];
+                if (!builtIn || !custom) {
+                    mergedCssClasses[key] = custom || builtIn;
+                }
+                else if (typeof builtIn === "object" && typeof custom === "object") {
+                    mergedCssClasses[key] = mergeCssClasses(builtIn, custom);
+                }
+                else if (typeof builtIn === "string" && typeof custom === "string") {
+                    mergedCssClasses[key] = (0, tailwind_merge_1.twMerge)(builtIn, custom);
+                }
+            });
+            return mergedCssClasses;
+        };
+        return mergeCssClasses(builtInClasses, customClasses);
+    }, [builtInClasses, customClasses]);
+}
+exports.useComposedCssClasses = useComposedCssClasses;
+//# sourceMappingURL=useComposedCssClasses.js.map

package/lib/commonjs/hooks/useComposedCssClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposedCssClasses.js","sourceRoot":"","sources":["../../../src/hooks/useComposedCssClasses.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAChC,mDAAyC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAgB,qBAAqB,CAGnC,cAAwC,EACxC,aAAuC;IAEvC,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAClB,MAAM,eAAe,GAAG,CACtB,cAAwC,EACxC,aAAuC,EACvC,EAAE;YACF,MAAM,gBAAgB,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;YAC/C,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,gBAAgB,CAAC;aACzB;YACD,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACzC,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;gBACpC,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;gBAClC,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE;oBACvB,gBAAgB,CAAC,GAAG,CAAC,GAAG,MAAM,IAAI,OAAO,CAAC;iBAC3C;qBAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;oBACpE,gBAAgB,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;iBAC1D;qBAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;oBACpE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAA,wBAAO,EAAC,OAAO,EAAE,MAAM,CAAC,CAAC;iBAClD;YACH,CAAC,CAAC,CAAC;YACH,OAAO,gBAAgB,CAAC;QAC1B,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;AACtC,CAAC;AA9BD,sDA8BC"}

package/lib/commonjs/icons/Arrow.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function ArrowIcon(): JSX.Element;
+//# sourceMappingURL=Arrow.d.ts.map

package/lib/commonjs/icons/Arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAOvC"}

package/lib/commonjs/icons/Arrow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ArrowIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: 'none', stroke: "currentColor", strokeLinecap: "square", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 5V15" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 8.84615L10 4L5 8.84615" })] }));
+}
+exports.ArrowIcon = ArrowIcon;
+//# sourceMappingURL=Arrow.js.map

package/lib/commonjs/icons/Arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.js","sourceRoot":"","sources":["../../../src/icons/Arrow.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,SAAS;IACvB,OAAO,CACL,iCAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,QAAQ,EAAC,KAAK,EAAC,4BAA4B,aAC9I,iCAAM,CAAC,EAAC,UAAU,GAAE,EACpB,iCAAM,CAAC,EAAC,4BAA4B,GAAE,IAClC,CACP,CAAC;AACJ,CAAC;AAPD,8BAOC"}

package/lib/commonjs/icons/Cross.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function CrossIcon(): JSX.Element;
+//# sourceMappingURL=Cross.d.ts.map

package/lib/commonjs/icons/Cross.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAOvC"}

package/lib/commonjs/icons/Cross.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CrossIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function CrossIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
+}
+exports.CrossIcon = CrossIcon;
+//# sourceMappingURL=Cross.js.map

package/lib/commonjs/icons/Cross.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,SAAS;IACvB,OAAO,CACL,iCAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,aAC1G,iCAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAE,EACpE,iCAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAE,IAChE,CACP,CAAC;AACJ,CAAC;AAPD,8BAOC"}

package/lib/commonjs/icons/DualSync.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function DualSyncIcon(): JSX.Element;
+//# sourceMappingURL=DualSync.d.ts.map

package/lib/commonjs/icons/DualSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,CAO1C"}

package/lib/commonjs/icons/DualSync.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DualSyncIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function DualSyncIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: 'currentColor', stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.3148 6.47397C14.9074 7.36266 15.2593 8.46858 15.2593 9.63375C15.2593 12.675 12.9259 15.1634 10.0741 15.1634C9.11111 15.1634 8.2037 14.8671 7.42593 14.3734L9.05556 13.8995L8.87037 13.1293L6 13.939L6.75926 17L7.48148 16.8025L7.03704 15.0449C7.92593 15.6176 8.96296 15.9336 10.0741 15.9336C13.3519 15.9336 16 13.1095 16 9.614C16 8.2711 15.6111 7.02693 14.9259 6L14.3148 6.47397Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.92593 4.68459C10.8889 4.68459 11.7963 4.95341 12.5741 5.40143L10.9444 5.81362L11.1296 6.51254L14 5.77778L13.2407 3L12.5185 3.17921L12.963 4.77419C12.0741 4.25448 11.037 3.96774 9.92593 3.96774C6.64815 3.96774 4 6.53047 4 9.70251C4 10.9211 4.40741 12.0681 5.07407 13L5.68518 12.5878C5.09259 11.7634 4.74074 10.7778 4.74074 9.70251C4.74074 6.94265 7.07407 4.68459 9.92593 4.68459Z" })] }));
+}
+exports.DualSyncIcon = DualSyncIcon;
+//# sourceMappingURL=DualSync.js.map

package/lib/commonjs/icons/DualSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,YAAY;IAC1B,OAAO,CACL,iCAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,aAChI,iCAAM,CAAC,EAAC,6XAA6X,GAAE,EACvY,iCAAM,CAAC,EAAC,+XAA+X,GAAE,IACnY,CACP,CAAC;AACJ,CAAC;AAPD,oCAOC"}

package/lib/commonjs/icons/Message.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function MessageIcon(): JSX.Element;
+//# sourceMappingURL=Message.d.ts.map

package/lib/commonjs/icons/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";AAAA,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,CASzC"}

package/lib/commonjs/icons/Message.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function MessageIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: 'currentColor', xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3.37424 17.1166L6.31902 14.1718H16.6258V4.84663H3.37424V17.1166ZM3.86503 5.33742H16.135V13.681H6.31902H6.11043L5.96319 13.8282L3.85276 15.9386V5.33742H3.86503Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.4172 9.2638H6.07362V9.7546H14.4172V9.2638Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.9264 10.7362H6.07362V11.227H13.9264V10.7362Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.4356 7.79141H6.07362V8.28221H13.4356V7.79141Z" })] }));
+}
+exports.MessageIcon = MessageIcon;
+//# sourceMappingURL=Message.js.map

package/lib/commonjs/icons/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/icons/Message.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,WAAW;IACzB,OAAO,CACL,iCAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,aACxG,iCAAM,CAAC,EAAC,kKAAkK,GAAE,EAC5K,iCAAM,CAAC,EAAC,gDAAgD,GAAG,EAC3D,iCAAM,CAAC,EAAC,kDAAkD,GAAG,EAC7D,iCAAM,CAAC,EAAC,mDAAmD,GAAG,IAC1D,CACP,CAAC;AACJ,CAAC;AATD,kCASC"}

package/lib/commonjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./hooks";
+//# sourceMappingURL=index.d.ts.map

package/lib/commonjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/lib/commonjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./hooks"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B;AAC7B,0CAAwB"}

package/lib/commonjs/utils/defaultHandleError.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Default handler function for API errors.
+ *
+ * @internal
+ *
+ * @param e - error returned from api request
+ */
+export declare function defaultHandleApiError(e: unknown): void;
+//# sourceMappingURL=defaultHandleError.d.ts.map

package/lib/commonjs/utils/defaultHandleError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultHandleError.d.ts","sourceRoot":"","sources":["../../../src/utils/defaultHandleError.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,OAAO,QAE/C"}

package/lib/commonjs/utils/defaultHandleError.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultHandleApiError = void 0;
+/**
+ * Default handler function for API errors.
+ *
+ * @internal
+ *
+ * @param e - error returned from api request
+ */
+function defaultHandleApiError(e) {
+    console.error(e);
+}
+exports.defaultHandleApiError = defaultHandleApiError;
+//# sourceMappingURL=defaultHandleError.js.map

package/lib/commonjs/utils/defaultHandleError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultHandleError.js","sourceRoot":"","sources":["../../../src/utils/defaultHandleError.ts"],"names":[],"mappings":";;;AAAA;;;;;;GAMG;AACH,SAAgB,qBAAqB,CAAC,CAAU;IAC9C,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnB,CAAC;AAFD,sDAEC"}

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

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+/**
+ * The CSS class interface for the {@link ChatHeader} component.
+ *
+ * @public
+ */
+export interface ChatHeaderCssClasses {
+    header?: string;
+    title?: string;
+    restartButton?: string;
+    closeButton?: string;
+}
+/**
+ * The props for the {@link ChatHeader} component.
+ *
+ * @public
+ */
+export interface ChatHeaderProps {
+    /**
+     * The headers's title text, essentially how the chat window identifies itself to the user.
+     */
+    title: string;
+    /**
+     * Displays a restart button which allows the user to restart the conversation.
+     * Defaults to false.
+     */
+    showRestartButton?: boolean;
+    /**
+     * Displays a close button which will invoke {@link ChatHeaderProps.onClose} on click.
+     * Default to false.
+     */
+    showCloseButton?: boolean;
+    /** A function which is called when the close button is clicked.  */
+    onClose?: () => void;
+    /**  Custom icon for for restart button. */
+    restartButtonIcon?: JSX.Element;
+    /**  Custom icon for for close button. */
+    closeButtonIcon?: JSX.Element;
+    /**  CSS classes for customizing the component styling. */
+    customCssClasses?: ChatHeaderCssClasses;
+}
+/**
+ * A component that renders the header of a chat bot panel,
+ * including the title and a button to reset the conversation.
+ *
+ * @public
+ *
+ * @param props - {@link ChatHeaderProps}
+ */
+export declare function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAOA;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD;;;;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,iBAAoC,EACpC,eAAe,EACf,eAA+B,EAC/B,OAAO,EACP,gBAAgB,GACjB,EAAE,eAAe,2CA4CjB"}

package/lib/esm/components/ChatHeader.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatActions } from "@yext/chat-headless-react";
+import { DualSyncIcon } from "../icons/DualSync";
+import { useComposedCssClasses } from "../hooks/useComposedCssClasses";
+import { useCallback, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { CrossIcon } from "../icons/Cross";
+const builtInCssClasses = {
+    header: "w-full px-4 py-3 flex justify-between bg-gradient-to-tr from-blue-600 to-blue-800 rounded-t-3xl",
+    title: "text-white text-xl font-medium",
+    restartButton: "w-8 text-white stroke-[0.2] ml-auto",
+    closeButton: "w-8 text-white hover:scale-110"
+};
+/**
+ * A component that renders the header of a chat bot panel,
+ * including the title and a button to reset the conversation.
+ *
+ * @public
+ *
+ * @param props - {@link ChatHeaderProps}
+ */
+export function ChatHeader({ title, showRestartButton, restartButtonIcon = _jsx(DualSyncIcon, {}), showCloseButton, closeButtonIcon = _jsx(CrossIcon, {}), onClose, customCssClasses, }) {
+    const chat = useChatActions();
+    const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const [isSpinning, setIsSpinning] = useState(false);
+    const restartButtonCssClasses = twMerge(cssClasses.restartButton, isSpinning ? "animate-[spin_0.3s_linear_infinite]" : "hover:scale-110");
+    const clearTimerRef = useRef();
+    const onRestart = useCallback(async () => {
+        clearTimeout(clearTimerRef.current);
+        setIsSpinning(true);
+        clearTimerRef.current = setTimeout(() => {
+            setIsSpinning(false);
+        }, 1000);
+        chat.restartConversation();
+    }, [chat]);
+    return (_jsxs("div", { className: cssClasses.header, children: [_jsx("h1", { className: cssClasses.title, children: title }), showRestartButton && (_jsx("button", { "aria-label": "Restart Conversation", onClick: onRestart, className: restartButtonCssClasses, children: restartButtonIcon })), showCloseButton && (_jsx("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon }))] }));
+}
+//# sourceMappingURL=ChatHeader.js.map

package/lib/esm/components/ChatHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAc3C,MAAM,iBAAiB,GAAmC;IACxD,MAAM,EACJ,iGAAiG;IACnG,KAAK,EAAE,gCAAgC;IACvC,aAAa,EAAE,qCAAqC;IACpD,WAAW,EAAE,gCAAgC;CAC9C,CAAC;AAgCF;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,GAAG,KAAC,YAAY,KAAG,EACpC,eAAe,EACf,eAAe,GAAG,KAAC,SAAS,KAAG,EAC/B,OAAO,EACP,gBAAgB,GACA;IAChB,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;IACpD,MAAM,uBAAuB,GAAG,OAAO,CACrC,UAAU,CAAC,aAAa,EACxB,UAAU,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,iBAAiB,CACvE,CAAC;IAEF,MAAM,aAAa,GAAG,MAAM,EAAiC,CAAC;IAC9D,MAAM,SAAS,GAAG,WAAW,CAAC,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,eAAK,SAAS,EAAE,UAAU,CAAC,MAAM,aAC/B,aAAI,SAAS,EAAE,UAAU,CAAC,KAAK,YAAG,KAAK,GAAM,EAC5C,iBAAiB,IAAI,CACpB,+BACa,sBAAsB,EACjC,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,uBAAuB,YAEjC,iBAAiB,GACX,CACV,EACA,eAAe,IAAI,CAClB,+BACW,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,GACT,CACR,IACG,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+/**
+ * The CSS class interface for the {@link ChatInput} component.
+ *
+ * @public
+ */
+export interface ChatInputCssClasses {
+    container?: string;
+    textArea?: string;
+    sendButton?: string;
+}
+/**
+ * The props for the {@link ChatInput} component.
+ *
+ * @public
+ */
+export interface ChatInputProps {
+    /**
+     * The input's placeholder text when no text has been entered by the user.
+     * Defaults to "Type a message...".
+     */
+    placeholder?: string;
+    /**
+     * Enable streaming behavior by making a request to Chat Streaming API.
+     * Defaults to true.
+     */
+    stream?: boolean;
+    /** Enable auto focus for the input box. Defaults to false. */
+    inputAutoFocus?: boolean;
+    /**
+     * A function which is called when an error occurs from
+     * Chat API while processing the user's message.
+     * By default, the error is logged to the console.
+     */
+    handleError?: (e: unknown) => void;
+    /** Custom icon for the send button. */
+    sendButtonIcon?: JSX.Element;
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: ChatInputCssClasses;
+}
+/**
+ * A component that allows user to input message and send to Chat API.
+ * @public
+ *
+ * @param props - {@link ChatInputProps}
+ */
+export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatInput.d.ts.map

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

@@ -0,0 +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;AAUD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;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;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAa,EACb,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,GACjB,EAAE,cAAc,2CA0DhB"}

package/lib/esm/components/ChatInput.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useChatActions, useChatState } from "@yext/chat-headless-react";
+import { ArrowIcon } from "../icons/Arrow";
+import { useComposedCssClasses } from "../hooks";
+import Textarea from "react-expanding-textarea";
+import { twMerge } from "tailwind-merge";
+import { defaultHandleApiError } from "../utils/defaultHandleError";
+const builtInCssClasses = {
+    container: "w-full h-fit flex flex-row relative @container",
+    textArea: "w-full p-4 pr-10 border border-slate-300 disabled:bg-slate-50 rounded-3xl resize-none text-[13px] @[480px]:text-base",
+    sendButton: "rounded-full p-1.5 w-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-100 hover:bg-blue-800 active:scale-90 transition-all absolute right-7 bottom-2.5 @[480px]:bottom-3.5",
+};
+/**
+ * A component that allows user to input message and send to Chat API.
+ * @public
+ *
+ * @param props - {@link ChatInputProps}
+ */
+export function ChatInput({ placeholder = "Type a message...", stream = true, inputAutoFocus = false, handleError, sendButtonIcon = _jsx(ArrowIcon, {}), customCssClasses, }) {
+    const chat = useChatActions();
+    const [input, setInput] = useState("");
+    const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
+    const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const sendButtonClassNames = twMerge(cssClasses.sendButton, input.length === 0 && "opacity-0 invisible");
+    const sendMessage = useCallback(async () => {
+        const res = stream
+            ? chat.streamNextMessage(input)
+            : chat.getNextMessage(input);
+        setInput("");
+        res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
+    }, [chat, input, handleError, stream]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            sendMessage();
+        }
+    }, [sendMessage]);
+    const onInputChange = useCallback((e) => {
+        setInput(e.target.value);
+    }, []);
+    return (_jsxs("div", { className: cssClasses.container, children: [_jsx(Textarea, { autoFocus: inputAutoFocus, disabled: !canSendMessage, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), _jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage, onClick: sendMessage, className: sendButtonClassNames, children: sendButtonIcon })] }));
+}
+//# sourceMappingURL=ChatInput.js.map

package/lib/esm/components/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":"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"}