@yext/chat-ui-react 0.2.2 → 0.3.0

package/lib/commonjs/icons/DualSync.js

@@ -2,8 +2,8 @@
 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" })] }));
+function DualSyncIcon({ className, }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", className: className, 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

@@ -1 +1 @@
-{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,YAAY;IAC1B,OAAO,CACL,iCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAC,4BAA4B,aAElC,iCAAM,CAAC,EAAC,6XAA6X,GAAG,EACxY,iCAAM,CAAC,EAAC,+XAA+X,GAAG,IACtY,CACP,CAAC;AACJ,CAAC;AAdD,oCAcC"}
+{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";;;;AAAA,SAAgB,YAAY,CAAC,EAC3B,SAAS,GAGV;IACC,OAAO,CACL,iCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,iCAAM,CAAC,EAAC,6XAA6X,GAAG,EACxY,iCAAM,CAAC,EAAC,+XAA+X,GAAG,IACtY,CACP,CAAC;AACJ,CAAC;AAnBD,oCAmBC"}

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

@@ -1 +1 @@
-{"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GACvC,cAAc,CAUhB"}
+{"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GACvC,cAAc,CAYhB"}

package/lib/commonjs/utils/withStylelessCssClasses.js

@@ -20,7 +20,9 @@ function withStylelessCssClasses(componentName, builtInClasses) {
     const formatString = (str) => str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
     const classes = { ...builtInClasses };
     Object.keys(builtInClasses).forEach((key) => {
-        classes[key] = `${classes[key]} yext-chat${formatString(componentName)}__${formatString(key)}`;
+        if (typeof classes[key] === "string") {
+            classes[key] = `${classes[key]} yext-chat${formatString(componentName)}__${formatString(key)}`;
+        }
     });
     return classes;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"withStylelessCssClasses.js","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AACH,SAAgB,uBAAuB,CAGrC,aAAqB,EACrB,cAAwC;IAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CACnC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC1C,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,aAAa,YAAY,CACrD,aAAa,CACd,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC;AAfD,0DAeC"}
+{"version":3,"file":"withStylelessCssClasses.js","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AACH,SAAgB,uBAAuB,CAGrC,aAAqB,EACrB,cAAwC;IAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CACnC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC1C,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,aAAa,YAAY,CACrD,aAAa,CACd,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC;AAjBD,0DAiBC"}

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

@@ -8,7 +8,9 @@ export interface ChatHeaderCssClasses {
     container?: string;
     title?: string;
     restartButton?: string;
+    restartButtonIcon?: string;
     closeButton?: string;
+    closeButtonIcon?: string;
 }
 /**
  * The props for the {@link ChatHeader} component.

package/lib/esm/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,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAWD;;;;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"}
+{"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"}

package/lib/esm/components/ChatHeader.js

@@ -7,10 +7,12 @@ import { twMerge } from "tailwind-merge";
 import { CrossIcon } from "../icons/Cross";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 const builtInCssClasses = withStylelessCssClasses("Header", {
-    container: "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",
+    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",
+    restartButtonIcon: "text-white stroke-[0.2] w-[26px] h-[26px]",
+    closeButton: "w-8 h-8 hover:scale-110 shrink-0 flex justify-center items-center",
+    closeButtonIcon: "text-white w-[26px] h-[26px]",
 });
 /**
  * A component that renders the header of a chat bot panel,
@@ -20,7 +22,7 @@ const builtInCssClasses = withStylelessCssClasses("Header", {
  *
  * @param props - {@link ChatHeaderProps}
  */
-export function ChatHeader({ title, showRestartButton, restartButtonIcon = _jsx(DualSyncIcon, {}), showCloseButton, closeButtonIcon = _jsx(CrossIcon, {}), onClose, customCssClasses, }) {
+export function ChatHeader({ title, showRestartButton, restartButtonIcon, showCloseButton, closeButtonIcon, onClose, customCssClasses, }) {
     const chat = useChatActions();
     const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
     const [isSpinning, setIsSpinning] = useState(false);
@@ -34,6 +36,6 @@ export function ChatHeader({ title, showRestartButton, restartButtonIcon = _jsx(
         }, 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 })), showCloseButton && (_jsx("button", { "aria-label": "Close Chat", onClick: onClose, className: cssClasses.closeButton, children: closeButtonIcon }))] }));
+    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 })) }))] }));
 }
 //# sourceMappingURL=ChatHeader.js.map

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

@@ -1 +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,CAAC;AACjD,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,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAc3E,MAAM,iBAAiB,GACrB,uBAAuB,CAAC,QAAQ,EAAE;IAChC,SAAS,EACP,iGAAiG;IACnG,KAAK,EAAE,gCAAgC;IACvC,aAAa,EAAE,qCAAqC;IACpD,WAAW,EAAE,gCAAgC;CAC9C,CAAC,CAAC;AAgCL;;;;;;;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,SAAS,aAClC,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,+BACa,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,GACT,CACV,IACG,CACP,CAAC;AACJ,CAAC"}
+{"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,CAAC;AACjD,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,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAgB3E,MAAM,iBAAiB,GACrB,uBAAuB,CAAC,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,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,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,SAAS,aAClC,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,IAAI,CACpB,KAAC,YAAY,IAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,GAAI,CAC1D,GACM,CACV,EACA,eAAe,IAAI,CAClB,+BACa,YAAY,EACvB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,WAAW,YAEhC,eAAe,IAAI,CAClB,KAAC,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,GAAI,CACrD,GACM,CACV,IACG,CACP,CAAC;AACJ,CAAC"}

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

@@ -39,6 +39,11 @@ export interface ChatInputProps {
 }
 /**
  * A component that allows user to input message and send to Chat API.
+ *
+ * @remarks
+ * Pressing "Enter" key will send the current message.
+ * To add a newline, press "Shift" and "Enter".
+ *
  * @public
  *
  * @param props - {@link ChatInputProps}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":";AASA;;;;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;;;OAGG;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;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAa,EACb,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,GACjB,EAAE,cAAc,2CA2DhB"}
+{"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;;;OAGG;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,MAAa,EACb,cAAsB,EACtB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,GACjB,EAAE,cAAc,2CAyDhB"}

package/lib/esm/components/ChatInput.js

@@ -4,16 +4,20 @@ 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 { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 const builtInCssClasses = withStylelessCssClasses("Input", {
     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 h-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",
+    textArea: "w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base",
+    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",
 });
 /**
  * A component that allows user to input message and send to Chat API.
+ *
+ * @remarks
+ * Pressing "Enter" key will send the current message.
+ * To add a newline, press "Shift" and "Enter".
+ *
  * @public
  *
  * @param props - {@link ChatInputProps}
@@ -24,7 +28,6 @@ export function ChatInput({ placeholder = "Type a message...", stream = true, in
     const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
     const defaultHandleApiError = useDefaultHandleApiError();
     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)
@@ -33,13 +36,16 @@ export function ChatInput({ placeholder = "Type a message...", stream = true, in
         res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
     }, [chat, input, handleError, defaultHandleApiError, stream]);
     const handleKeyDown = useCallback((e) => {
-        if (e.key === "Enter") {
-            sendMessage();
+        if (!e.shiftKey && e.key === "Enter") {
+            e.preventDefault();
+            if (canSendMessage) {
+                sendMessage();
+            }
         }
-    }, [sendMessage]);
+    }, [sendMessage, canSendMessage]);
     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 })] }));
+    return (_jsxs("div", { className: cssClasses.container, children: [_jsx(Textarea, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), _jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
 }
 //# sourceMappingURL=ChatInput.js.map

package/lib/esm/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","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":"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"}

package/lib/esm/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;AAM7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAcD;;;;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,2CAkD9C"}
+{"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;AAM7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAYD;;;;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,2CAkD9C"}

package/lib/esm/components/ChatPanel.js

@@ -9,9 +9,9 @@ import { useComposedCssClasses } from "../hooks";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 const builtInCssClasses = withStylelessCssClasses("Panel", {
-    container: "h-full w-full flex flex-col relative rounded-3xl shadow-2xl bg-white",
+    container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
     messagesContainer: "flex flex-col gap-y-1 mt-auto px-4 pb-[85px] overflow-auto",
-    inputContainer: "w-full absolute bottom-0 p-4 rounded-b-3xl backdrop-blur-lg",
+    inputContainer: "w-full absolute bottom-0 p-4 backdrop-blur-lg",
 });
 /**
  * A component that renders a full panel for chat bot interactions. This includes

package/lib/esm/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","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"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"}

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

@@ -14,6 +14,7 @@ export interface ChatPopUpCssClasses {
     button?: string;
     button__display?: string;
     button__hidden?: string;
+    buttonIcon?: string;
     headerCssClasses?: ChatHeaderCssClasses;
     panelCssClasses?: ChatPanelCssClasses;
 }

package/lib/esm/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;AAKtB;;;;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,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAmBD;;;;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,2CAsD9C"}
+{"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;AAKtB;;;;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;AA6BD;;;;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,2CAsD9C"}

package/lib/esm/components/ChatPopUp.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { MessageIcon } from "../icons/Message";
+import { ChatIcon } from "../icons/Chat";
 import { ChatPanel } from "./ChatPanel";
 import { ChatHeader, } from "./ChatHeader";
 import { twMerge } from "tailwind-merge";
@@ -9,13 +9,22 @@ import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
 const builtInCssClasses = withStylelessCssClasses("PopUp", {
     container: "transition-all",
-    panel: fixedPosition + "w-80 lg:w-96 h-[75vh]",
+    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]",
     panel__display: "duration-300 translate-y-0",
     panel__hidden: "duration-300 translate-y-[20%] opacity-0 invisible",
     button: fixedPosition +
         "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",
     button__display: "duration-300 transform translate-y-0",
     button__hidden: "duration-300 transform translate-y-[20%] opacity-0 invisible",
+    buttonIcon: "text-blue-600 w-[28px] h-[28px] lg:w-[40px] lg:h-[40px]",
+    headerCssClasses: {
+        container: "max-[480px]:rounded-none rounded-t-3xl",
+    },
+    panelCssClasses: {
+        container: "max-[480px]:rounded-none rounded-b-3xl",
+        inputContainer: "max-[480px]:rounded-none rounded-b-3xl",
+    },
 });
 /**
  * A component that renders a popup button that displays and hides
@@ -26,7 +35,7 @@ const builtInCssClasses = withStylelessCssClasses("PopUp", {
  * @param props - {@link ChatPanelProps}
  */
 export function ChatPopUp(props) {
-    const { openPanelButtonIcon = _jsx(MessageIcon, {}), customCssClasses, showRestartButton = true, onClose: customOnClose, title, } = props;
+    const { openPanelButtonIcon, customCssClasses, showRestartButton = true, onClose: customOnClose, title, } = props;
     const [showChat, setShowChat] = useState(false);
     const onClick = useCallback(() => {
         setShowChat(!showChat);
@@ -38,6 +47,6 @@ export 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 (_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 })] }));
+    return (_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 }) })] }));
 }
 //# sourceMappingURL=ChatPopUp.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAmB3E,MAAM,aAAa,GAAG,uDAAuD,CAAC;AAC9E,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;IACE,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,aAAa,GAAG,uBAAuB;IAC9C,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EACJ,aAAa;QACb,gLAAgL;IAClL,eAAe,EAAE,sCAAsC;IACvD,cAAc,EACZ,8DAA8D;CACjE,CACF,CAAC;AAkBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,GAAG,KAAC,WAAW,KAAG,EACrC,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAE,aAAa,EACtB,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,OAAO,CAC7B,UAAU,CAAC,KAAK,EAChB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,UAAU,CAAC,MAAM,EACjB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAClE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,cAAK,SAAS,EAAE,eAAe,gBAAa,kBAAkB,YAC5D,KAAC,SAAS,OACJ,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAC5C,MAAM,EACJ,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAC7C,GAEJ,GACE,EACN,+BACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,YAE1B,mBAAmB,GACb,IACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,aAAa,GAAG,uDAAuD,CAAC;AAC9E,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;IACE,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EACH,aAAa;QACb,sGAAsG;IACxG,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EACJ,aAAa;QACb,gLAAgL;IAClL,eAAe,EAAE,sCAAsC;IACvD,cAAc,EACZ,8DAA8D;IAChE,UAAU,EAAE,yDAAyD;IACrE,gBAAgB,EAAE;QAChB,SAAS,EAAE,wCAAwC;KACpD;IACD,eAAe,EAAE;QACf,SAAS,EAAE,wCAAwC;QACnD,cAAc,EAAE,wCAAwC;KACzD;CACF,CACF,CAAC;AAkBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAE,aAAa,EACtB,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,OAAO,CAC7B,UAAU,CAAC,KAAK,EAChB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,UAAU,CAAC,MAAM,EACjB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAClE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,cAAK,SAAS,EAAE,eAAe,gBAAa,kBAAkB,YAC5D,KAAC,SAAS,OACJ,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAC5C,MAAM,EACJ,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAC7C,GAEJ,GACE,EACN,+BACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,YAE1B,mBAAmB,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,UAAU,GAAI,GAC/D,IACL,CACP,CAAC;AACJ,CAAC"}

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

@@ -32,7 +32,7 @@ export interface MessageBubbleProps {
     /**
      * A function which is called to format the message's timestamp given in
      * ISO format (e.g. "2023-05-18T19:33:34.553Z").
-     * Defaults to "HH:MM:SS A" (e.g. "7:33:34 PM").
+     * Defaults to "HH:MM A" (e.g. "7:33 PM").
      */
     formatTimestamp?: (timestamp: string) => string;
     /** CSS classes for customizing the component styling. */

package/lib/esm/components/MessageBubble.js

@@ -12,7 +12,7 @@ const builtInCssClasses = withStylelessCssClasses("MessageBubble", {
     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: "w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
     timestamp__bot: "",
     timestamp__user: "ml-auto",
 });
@@ -37,7 +37,7 @@ export function MessageBubble({ message, showTimestamp = true, customCssClasses,
     return (_jsx("div", { className: cssClasses.topContainer, children: _jsxs("div", { className: subContainerCssClasses, children: [_jsx("div", { className: messageCssClasses, children: _jsx(Markdown, { content: message.text }) }), showTimestamp && (_jsx("div", { className: timestampCssClasses, children: message.timestamp ? formatTimestamp(message.timestamp) : " " }))] }) }));
 }
 /**
- * Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33:34 PM"
+ * Formats message's timestamp from "2023-05-18T19:33:34.553Z" to "7:33 PM"
  *
  * @param timestamp - the timestamp to convert from
  * @returns formatted timestamp
@@ -46,7 +46,6 @@ function defaultFormatTimestamp(timestamp) {
     return new Date(timestamp).toLocaleString(undefined, {
         hour: "numeric",
         minute: "numeric",
-        second: "numeric",
         hour12: true,
     });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,iBAAiB,GAA4B,uBAAuB,CACxE,eAAe,EACf;IACE,YAAY,EAAE,mCAAmC;IACjD,YAAY,EACV,iEAAiE;IACnE,iBAAiB,EAAE,EAAE;IACrB,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EACL,6FAA6F;IAC/F,YAAY,EAAE,6DAA6D;IAC3E,aAAa,EACX,yEAAyE;IAC3E,SAAS,EACP,2GAA2G;IAC7G,cAAc,EAAE,EAAE;IAClB,eAAe,EAAE,SAAS;CAC3B,CACF,CAAC;AAyBF;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,gBAAgB,EAChB,eAAe,GAAG,sBAAsB,GACrB;IACnB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,iBAAiB,GAAG,OAAO,CAC/B,UAAU,CAAC,OAAO,EAClB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,aAAa;QAC1B,CAAC,CAAC,UAAU,CAAC,YAAY,CAC5B,CAAC;IACF,MAAM,sBAAsB,GAAG,OAAO,CACpC,UAAU,CAAC,YAAY,EACvB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,kBAAkB;QAC/B,CAAC,CAAC,UAAU,CAAC,iBAAiB,CACjC,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,UAAU,CAAC,SAAS,EACpB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,eAAe;QAC5B,CAAC,CAAC,UAAU,CAAC,cAAc,CAC9B,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,YAAY,YACrC,eAAK,SAAS,EAAE,sBAAsB,aACpC,cAAK,SAAS,EAAE,iBAAiB,YAC/B,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,CAAC,IAAI,GAAI,GAC/B,EAEL,aAAa,IAAI,CAChB,cAAK,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;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"}
+{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,iBAAiB,GAA4B,uBAAuB,CACxE,eAAe,EACf;IACE,YAAY,EAAE,mCAAmC;IACjD,YAAY,EACV,iEAAiE;IACnE,iBAAiB,EAAE,EAAE;IACrB,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EACL,6FAA6F;IAC/F,YAAY,EAAE,6DAA6D;IAC3E,aAAa,EACX,yEAAyE;IAC3E,SAAS,EACP,8IAA8I;IAChJ,cAAc,EAAE,EAAE;IAClB,eAAe,EAAE,SAAS;CAC3B,CACF,CAAC;AAyBF;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,gBAAgB,EAChB,eAAe,GAAG,sBAAsB,GACrB;IACnB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,iBAAiB,GAAG,OAAO,CAC/B,UAAU,CAAC,OAAO,EAClB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,aAAa;QAC1B,CAAC,CAAC,UAAU,CAAC,YAAY,CAC5B,CAAC;IACF,MAAM,sBAAsB,GAAG,OAAO,CACpC,UAAU,CAAC,YAAY,EACvB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,kBAAkB;QAC/B,CAAC,CAAC,UAAU,CAAC,iBAAiB,CACjC,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,UAAU,CAAC,SAAS,EACpB,OAAO,CAAC,MAAM,KAAK,aAAa,CAAC,IAAI;QACnC,CAAC,CAAC,UAAU,CAAC,eAAe;QAC5B,CAAC,CAAC,UAAU,CAAC,cAAc,CAC9B,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,YAAY,YACrC,eAAK,SAAS,EAAE,sBAAsB,aACpC,cAAK,SAAS,EAAE,iBAAiB,YAC/B,KAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,CAAC,IAAI,GAAI,GAC/B,EAEL,aAAa,IAAI,CAChB,cAAK,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;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,IAAI;KACb,CAAC,CAAC;AACL,CAAC"}

package/lib/esm/icons/Chat.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ChatIcon({ className }: {
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=Chat.d.ts.map

package/lib/esm/icons/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":";AAAA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAsC3E"}

package/lib/esm/icons/Chat.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChatIcon({ className }) {
+    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.3028 12.8082L15.1553 12.9342L15.1729 13.1273L15.3973 15.5959C15.3983 15.6063 15.3964 15.6126 15.3943 15.617C15.3918 15.6223 15.3873 15.6283 15.3805 15.6332C15.3737 15.6382 15.3667 15.6408 15.3608 15.6416C15.356 15.6422 15.3495 15.6422 15.3398 15.6381L12.3578 14.3956L12.245 14.3486L12.1261 14.3771C11.4553 14.5381 10.7412 14.625 10 14.625C5.9718 14.625 2.875 12.099 2.875 9.16667C2.875 6.23436 5.9718 3.70834 10 3.70834C14.0282 3.70834 17.125 6.23436 17.125 9.16667C17.125 10.5493 16.4496 11.8289 15.3028 12.8082Z", fill: "white", stroke: "white", strokeWidth: "0.75" }), _jsx("path", { d: "M7 7.54584C7 7.38015 7.13431 7.24584 7.3 7.24584H8.725C8.89069 7.24584 9.025 7.38015 9.025 7.54584C9.025 7.71152 8.89069 7.84584 8.725 7.84584H7.3C7.13431 7.84584 7 7.71152 7 7.54584Z", fill: "currentColor" }), _jsx("path", { d: "M9.625 7.54584C9.625 7.15233 9.944 6.83334 10.3375 6.83334H12.2875C12.681 6.83334 13 7.15233 13 7.54584C13 7.93934 12.681 8.25834 12.2875 8.25834H10.3375C9.944 8.25834 9.625 7.93934 9.625 7.54584Z", fill: "currentColor" }), _jsx("path", { d: "M7 9.30834C7 9.14265 7.13431 9.00834 7.3 9.00834H12.7C12.8657 9.00834 13 9.14265 13 9.30834C13 9.47402 12.8657 9.60834 12.7 9.60834H7.3C7.13431 9.60834 7 9.47402 7 9.30834Z", fill: "currentColor" }), _jsx("path", { d: "M7 11.0708C7 10.6773 7.319 10.3583 7.7125 10.3583H8.1625C8.556 10.3583 8.875 10.6773 8.875 11.0708C8.875 11.4643 8.556 11.7833 8.1625 11.7833H7.7125C7.319 11.7833 7 11.4643 7 11.0708Z", fill: "currentColor" }), _jsx("path", { d: "M9.475 11.0708C9.475 10.9052 9.60931 10.7708 9.775 10.7708H12.7C12.8657 10.7708 13 10.9052 13 11.0708C13 11.2365 12.8657 11.3708 12.7 11.3708H9.775C9.60931 11.3708 9.475 11.2365 9.475 11.0708Z", fill: "currentColor" })] }));
+}
+//# sourceMappingURL=Chat.js.map

package/lib/esm/icons/Chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,QAAQ,CAAC,EAAE,SAAS,EAA0B;IAC5D,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,eACE,CAAC,EAAC,ugBAAugB,EACzgB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,EACd,WAAW,EAAC,MAAM,GAClB,EACF,eACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,sMAAsM,EACxM,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,8KAA8K,EAChL,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,yLAAyL,EAC3L,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,kMAAkM,EACpM,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAC;AACJ,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,IAAI,GAAG,CAAC,OAAO,CAavC"}
+{"version":3,"file":"Cross.d.ts","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAc5E"}

package/lib/esm/icons/Cross.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CrossIcon() {
-    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), _jsx("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
+export function CrossIcon({ className }) {
+    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M14 14L6 6", strokeLinecap: "square", strokeLinejoin: "round" }), _jsx("path", { d: "M14 6L6 14", strokeLinecap: "square", strokeLinejoin: "round" })] }));
 }
 //# sourceMappingURL=Cross.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,EACrE,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,IACjE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Cross.js","sourceRoot":"","sources":["../../../src/icons/Cross.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAA0B;IAC7D,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,EACrE,eAAM,CAAC,EAAC,YAAY,EAAC,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,OAAO,GAAG,IACjE,CACP,CAAC;AACJ,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,IAAI,GAAG,CAAC,OAAO,CAc1C"}
+{"version":3,"file":"DualSync.d.ts","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,CAAC,EAC3B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAed"}

package/lib/esm/icons/DualSync.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function DualSyncIcon() {
-    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_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" }), _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" })] }));
+export function DualSyncIcon({ className, }) {
+    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_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" }), _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" })] }));
 }
 //# sourceMappingURL=DualSync.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,6XAA6X,GAAG,EACxY,eAAM,CAAC,EAAC,+XAA+X,GAAG,IACtY,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DualSync.js","sourceRoot":"","sources":["../../../src/icons/DualSync.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,GAGV;IACC,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,6XAA6X,GAAG,EACxY,eAAM,CAAC,EAAC,+XAA+X,GAAG,IACtY,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/index.d.ts

@@ -22,7 +22,9 @@ export declare interface ChatHeaderCssClasses {
     container?: string;
     title?: string;
     restartButton?: string;
+    restartButtonIcon?: string;
     closeButton?: string;
+    closeButtonIcon?: string;
 }
 
 /**
@@ -57,6 +59,11 @@ export declare interface ChatHeaderProps {
 
 /**
  * A component that allows user to input message and send to Chat API.
+ *
+ * @remarks
+ * Pressing "Enter" key will send the current message.
+ * To add a newline, press "Shift" and "Enter".
+ *
  * @public
  *
  * @param props - {@link ChatInputProps}
@@ -164,6 +171,7 @@ export declare interface ChatPopUpCssClasses {
     button?: string;
     button__display?: string;
     button__hidden?: string;
+    buttonIcon?: string;
     headerCssClasses?: ChatHeaderCssClasses;
     panelCssClasses?: ChatPanelCssClasses;
 }
@@ -225,7 +233,7 @@ export declare interface MessageBubbleProps {
     /**
      * A function which is called to format the message's timestamp given in
      * ISO format (e.g. "2023-05-18T19:33:34.553Z").
-     * Defaults to "HH:MM:SS A" (e.g. "7:33:34 PM").
+     * Defaults to "HH:MM A" (e.g. "7:33 PM").
      */
     formatTimestamp?: (timestamp: string) => string;
     /** CSS classes for customizing the component styling. */

package/lib/esm/utils/withStylelessCssClasses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GACvC,cAAc,CAUhB"}
+{"version":3,"file":"withStylelessCssClasses.d.ts","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,SAAS,OAAO,CAAC,MAAM,CAAC,MAAM,cAAc,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAE7E,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GACvC,cAAc,CAYhB"}

package/lib/esm/utils/withStylelessCssClasses.js

@@ -17,7 +17,9 @@ export function withStylelessCssClasses(componentName, builtInClasses) {
     const formatString = (str) => str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
     const classes = { ...builtInClasses };
     Object.keys(builtInClasses).forEach((key) => {
-        classes[key] = `${classes[key]} yext-chat${formatString(componentName)}__${formatString(key)}`;
+        if (typeof classes[key] === "string") {
+            classes[key] = `${classes[key]} yext-chat${formatString(componentName)}__${formatString(key)}`;
+        }
     });
     return classes;
 }

package/lib/esm/utils/withStylelessCssClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"withStylelessCssClasses.js","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,uBAAuB,CAGrC,aAAqB,EACrB,cAAwC;IAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CACnC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC1C,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,aAAa,YAAY,CACrD,aAAa,CACd,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"withStylelessCssClasses.js","sourceRoot":"","sources":["../../../src/utils/withStylelessCssClasses.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,uBAAuB,CAGrC,aAAqB,EACrB,cAAwC;IAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE,CACnC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC1C,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,aAAa,YAAY,CACrD,aAAa,CACd,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/index.js",

package/src/components/ChatHeader.tsx

@@ -15,16 +15,21 @@ export interface ChatHeaderCssClasses {
   container?: string;
   title?: string;
   restartButton?: string;
+  restartButtonIcon?: string;
   closeButton?: string;
+  closeButtonIcon?: string;
 }
 
 const builtInCssClasses: Readonly<ChatHeaderCssClasses> =
   withStylelessCssClasses("Header", {
     container:
-      "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",
+      "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",
+    restartButtonIcon: "text-white stroke-[0.2] w-[26px] h-[26px]",
+    closeButton:
+      "w-8 h-8 hover:scale-110 shrink-0 flex justify-center items-center",
+    closeButtonIcon: "text-white w-[26px] h-[26px]",
   });
 
 /**
@@ -68,9 +73,9 @@ export interface ChatHeaderProps {
 export function ChatHeader({
   title,
   showRestartButton,
-  restartButtonIcon = <DualSyncIcon />,
+  restartButtonIcon,
   showCloseButton,
-  closeButtonIcon = <CrossIcon />,
+  closeButtonIcon,
   onClose,
   customCssClasses,
 }: ChatHeaderProps) {
@@ -103,7 +108,9 @@ export function ChatHeader({
           onClick={onRestart}
           className={restartButtonCssClasses}
         >
-          {restartButtonIcon}
+          {restartButtonIcon ?? (
+            <DualSyncIcon className={cssClasses.restartButtonIcon} />
+          )}
         </button>
       )}
       {showCloseButton && (
@@ -112,7 +119,9 @@ export function ChatHeader({
           onClick={onClose}
           className={cssClasses.closeButton}
         >
-          {closeButtonIcon}
+          {closeButtonIcon ?? (
+            <CrossIcon className={cssClasses.closeButtonIcon} />
+          )}
         </button>
       )}
     </div>