@yext/chat-ui-react 0.1.1 → 0.2.2

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

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":";AAQA;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;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;;;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":";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"}

package/lib/esm/components/ChatInput.js

@@ -6,11 +6,12 @@ import { useComposedCssClasses } from "../hooks";
 import Textarea from "react-expanding-textarea";
 import { twMerge } from "tailwind-merge";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
-const builtInCssClasses = {
+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 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",
-};
+    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",
+});
 /**
  * A component that allows user to input message and send to Chat API.
  * @public

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

package/lib/esm/components/ChatPanel.js

@@ -7,11 +7,12 @@ import { ChatInput } from "./ChatInput";
 import { LoadingDots } from "./LoadingDots";
 import { useComposedCssClasses } from "../hooks";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
-const builtInCssClasses = {
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+const builtInCssClasses = withStylelessCssClasses("Panel", {
     container: "h-full w-full flex flex-col relative rounded-3xl 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",
-};
+});
 /**
  * A component that renders a full panel for chat bot interactions. This includes
  * the message bubbles for the conversation, input box with send button, and header

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.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;AAItB;;;;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;AAgBD;;;;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,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"}

package/lib/esm/components/ChatPopUp.js

@@ -5,8 +5,9 @@ import { ChatPanel } from "./ChatPanel";
 import { ChatHeader, } from "./ChatHeader";
 import { twMerge } from "tailwind-merge";
 import { useComposedCssClasses } from "../hooks";
-const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 ";
-const builtInCssClasses = {
+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__display: "duration-300 translate-y-0",
@@ -15,7 +16,7 @@ const builtInCssClasses = {
         "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",
-};
+});
 /**
  * A component that renders a popup button that displays and hides
  * a panel for chat bot interactions.

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;AAmBjD,MAAM,aAAa,GAAG,kDAAkD,CAAC;AACzE,MAAM,iBAAiB,GAAwB;IAC7C,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,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AAKnE;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAiBD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;CAC5C;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,aAAoB,EACpB,gBAAgB,EAChB,eAAwC,GACzC,EAAE,kBAAkB,2CAoCpB"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AAMnE;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAsBD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;CAC5C;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,aAAoB,EACpB,gBAAgB,EAChB,eAAwC,GACzC,EAAE,kBAAkB,2CAoCpB"}

package/lib/esm/components/MessageBubble.js

@@ -3,16 +3,19 @@ import { MessageSource } from "@yext/chat-headless-react";
 import { useComposedCssClasses } from "../hooks";
 import { twMerge } from "tailwind-merge";
 import { Markdown } from "./Markdown";
-const builtInCssClasses = {
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+const builtInCssClasses = withStylelessCssClasses("MessageBubble", {
     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__bot: "",
     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__bot: "",
     timestamp__user: "ml-auto",
-};
+});
 /**
  * A component that displays the provided message.
  *

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

package/lib/esm/hooks/useDefaultHandleApiError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultHandleApiError.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wBAAgB,wBAAwB,QAKhC,OAAO,UAad"}
+{"version":3,"file":"useDefaultHandleApiError.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wBAAgB,wBAAwB,QAIhC,OAAO,UAUd"}

package/lib/esm/hooks/useDefaultHandleApiError.js

@@ -1,4 +1,4 @@
-import { MessageSource, useChatActions, useChatState, } from "@yext/chat-headless-react";
+import { MessageSource, useChatActions } from "@yext/chat-headless-react";
 import { useCallback } from "react";
 /**
  * Returns a default handler function for API errors. It will log the error and
@@ -8,17 +8,13 @@ import { useCallback } from "react";
  */
 export function useDefaultHandleApiError() {
     const chat = useChatActions();
-    const messages = useChatState((s) => s.conversation.messages);
     return useCallback((e) => {
         console.error(e);
-        chat.setMessages([
-            ...messages,
-            {
-                text: "Sorry, I'm unable to respond at the moment. Please try again later!",
-                source: MessageSource.BOT,
-                timestamp: new Date().toISOString(),
-            },
-        ]);
-    }, [chat, messages]);
+        chat.addMessage({
+            text: "Sorry, I'm unable to respond at the moment. Please try again later!",
+            source: MessageSource.BOT,
+            timestamp: new Date().toISOString(),
+        });
+    }, [chat]);
 }
 //# sourceMappingURL=useDefaultHandleApiError.js.map

package/lib/esm/hooks/useDefaultHandleApiError.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,YAAY,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB;IACtC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAE9D,OAAO,WAAW,CAChB,CAAC,CAAU,EAAE,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,WAAW,CAAC;YACf,GAAG,QAAQ;YACX;gBACE,IAAI,EAAE,qEAAqE;gBAC3E,MAAM,EAAE,aAAa,CAAC,GAAG;gBACzB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;aACpC;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,IAAI,EAAE,QAAQ,CAAC,CACjB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useDefaultHandleApiError.js","sourceRoot":"","sources":["../../../src/hooks/useDefaultHandleApiError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB;IACtC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAC;IAE9B,OAAO,WAAW,CAChB,CAAC,CAAU,EAAE,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC;YACd,IAAI,EAAE,qEAAqE;YAC3E,MAAM,EAAE,aAAa,CAAC,GAAG;YACzB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;SACpC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/index.d.ts

@@ -19,7 +19,7 @@ export declare function ChatHeader({ title, showRestartButton, restartButtonIcon
  * @public
  */
 export declare interface ChatHeaderCssClasses {
-    header?: string;
+    container?: string;
     title?: string;
     restartButton?: string;
     closeButton?: string;

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

@@ -0,0 +1,17 @@
+/**
+ * Append styleless css classnames that user can target to add custom styling to components.
+ * The classes follows a format of "yext-chat-component-name__css-interface-field-name".
+ *
+ * @example
+ * the styleless css class name for {@link MessageBubble}'s "message__bot" field defined
+ * in its {@link MessageBubbleCssClasses} interface is "yext-chat-message-bubble__message__bot"
+ *
+ * @internal
+ *
+ * @param componentName - the component name
+ * @param builtInClasses - built in css classnames of the component
+ *
+ * @returns builtInClasses with styleless css classnames
+ */
+export declare function withStylelessCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>>(componentName: string, builtInClasses: Readonly<ClassInterface>): ClassInterface;
+//# sourceMappingURL=withStylelessCssClasses.d.ts.map

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

@@ -0,0 +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"}

package/lib/esm/utils/withStylelessCssClasses.js

@@ -0,0 +1,24 @@
+/**
+ * Append styleless css classnames that user can target to add custom styling to components.
+ * The classes follows a format of "yext-chat-component-name__css-interface-field-name".
+ *
+ * @example
+ * the styleless css class name for {@link MessageBubble}'s "message__bot" field defined
+ * in its {@link MessageBubbleCssClasses} interface is "yext-chat-message-bubble__message__bot"
+ *
+ * @internal
+ *
+ * @param componentName - the component name
+ * @param builtInClasses - built in css classnames of the component
+ *
+ * @returns builtInClasses with styleless css classnames
+ */
+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)}`;
+    });
+    return classes;
+}
+//# sourceMappingURL=withStylelessCssClasses.js.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/index.js",
@@ -80,7 +80,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "@yext/chat-headless-react": "^0.3.2",
+    "@yext/chat-headless-react": "^0.3.3",
     "react": "^16.14 || ^17 || ^18",
     "react-dom": "^16.14 || ^17 || || ^18"
   },

package/src/components/ChatHeader.tsx

@@ -4,6 +4,7 @@ import { useComposedCssClasses } from "../hooks/useComposedCssClasses";
 import { useCallback, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { CrossIcon } from "../icons/Cross";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 
 /**
  * The CSS class interface for the {@link ChatHeader} component.
@@ -11,19 +12,20 @@ import { CrossIcon } from "../icons/Cross";
  * @public
  */
 export interface ChatHeaderCssClasses {
-  header?: string;
+  container?: string;
   title?: string;
   restartButton?: string;
   closeButton?: string;
 }
 
-const builtInCssClasses: Readonly<ChatHeaderCssClasses> = {
-  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",
-};
+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",
+  });
 
 /**
  * The props for the {@link ChatHeader} component.
@@ -93,7 +95,7 @@ export function ChatHeader({
   }, [chat]);
 
   return (
-    <div className={cssClasses.header}>
+    <div className={cssClasses.container}>
       <h1 className={cssClasses.title}>{title}</h1>
       {showRestartButton && (
         <button

package/src/components/ChatInput.tsx

@@ -5,6 +5,7 @@ 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";
 
 /**
  * The CSS class interface for the {@link ChatInput} component.
@@ -17,13 +18,16 @@ export interface ChatInputCssClasses {
   sendButton?: string;
 }
 
-const builtInCssClasses: ChatInputCssClasses = {
-  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",
-};
+const builtInCssClasses: ChatInputCssClasses = 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",
+  }
+);
 
 /**
  * The props for the {@link ChatInput} component.

package/src/components/ChatPanel.tsx

@@ -9,6 +9,7 @@ import { ChatInput, ChatInputCssClasses, ChatInputProps } from "./ChatInput";
 import { LoadingDots } from "./LoadingDots";
 import { useComposedCssClasses } from "../hooks";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -23,13 +24,17 @@ export interface ChatPanelCssClasses {
   messageBubbleCssClasses?: MessageBubbleCssClasses;
 }
 
-const builtInCssClasses: ChatPanelCssClasses = {
-  container:
-    "h-full w-full flex flex-col relative rounded-3xl 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",
-};
+const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
+  "Panel",
+  {
+    container:
+      "h-full w-full flex flex-col relative rounded-3xl 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",
+  }
+);
 
 /**
  * The props for the {@link ChatPanel} component.

package/src/components/ChatPopUp.tsx

@@ -8,6 +8,7 @@ import {
 } from "./ChatHeader";
 import { twMerge } from "tailwind-merge";
 import { useComposedCssClasses } from "../hooks";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 
 /**
  * The CSS class interface for the {@link ChatPopUp} component.
@@ -26,19 +27,22 @@ export interface ChatPopUpCssClasses {
   panelCssClasses?: ChatPanelCssClasses;
 }
 
-const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 ";
-const builtInCssClasses: ChatPopUpCssClasses = {
-  container: "transition-all",
-  panel: fixedPosition + "w-80 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",
-};
+const fixedPosition = "fixed bottom-6 right-4 lg:bottom-14 lg:right-10 z-50 ";
+const builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(
+  "PopUp",
+  {
+    container: "transition-all",
+    panel: fixedPosition + "w-80 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",
+  }
+);
 
 /**
  * The props for the {@link ChatPopUp} component.

package/src/components/MessageBubble.tsx

@@ -2,6 +2,7 @@ import { Message, MessageSource } from "@yext/chat-headless-react";
 import { useComposedCssClasses } from "../hooks";
 import { twMerge } from "tailwind-merge";
 import { Markdown } from "./Markdown";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 
 /**
  * The CSS class interface for the {@link MessageBubble} component.
@@ -21,20 +22,25 @@ export interface MessageBubbleCssClasses {
   timestamp__user?: string;
 }
 
-const builtInCssClasses: MessageBubbleCssClasses = {
-  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",
-};
+const builtInCssClasses: MessageBubbleCssClasses = withStylelessCssClasses(
+  "MessageBubble",
+  {
+    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__bot: "",
+    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__bot: "",
+    timestamp__user: "ml-auto",
+  }
+);
 
 /**
  * The props for the {@link MessageBubble} component.

package/src/hooks/useDefaultHandleApiError.ts

@@ -1,8 +1,4 @@
-import {
-  MessageSource,
-  useChatActions,
-  useChatState,
-} from "@yext/chat-headless-react";
+import { MessageSource, useChatActions } from "@yext/chat-headless-react";
 import { useCallback } from "react";
 
 /**
@@ -13,20 +9,16 @@ import { useCallback } from "react";
  */
 export function useDefaultHandleApiError() {
   const chat = useChatActions();
-  const messages = useChatState((s) => s.conversation.messages);
 
   return useCallback(
     (e: unknown) => {
       console.error(e);
-      chat.setMessages([
-        ...messages,
-        {
-          text: "Sorry, I'm unable to respond at the moment. Please try again later!",
-          source: MessageSource.BOT,
-          timestamp: new Date().toISOString(),
-        },
-      ]);
+      chat.addMessage({
+        text: "Sorry, I'm unable to respond at the moment. Please try again later!",
+        source: MessageSource.BOT,
+        timestamp: new Date().toISOString(),
+      });
     },
-    [chat, messages]
+    [chat]
   );
 }

package/src/utils/withStylelessCssClasses.ts

@@ -0,0 +1,31 @@
+/**
+ * Append styleless css classnames that user can target to add custom styling to components.
+ * The classes follows a format of "yext-chat-component-name__css-interface-field-name".
+ *
+ * @example
+ * the styleless css class name for {@link MessageBubble}'s "message__bot" field defined
+ * in its {@link MessageBubbleCssClasses} interface is "yext-chat-message-bubble__message__bot"
+ *
+ * @internal
+ *
+ * @param componentName - the component name
+ * @param builtInClasses - built in css classnames of the component
+ *
+ * @returns builtInClasses with styleless css classnames
+ */
+export function withStylelessCssClasses<
+  ClassInterface extends Partial<Record<keyof ClassInterface, string | object>>
+>(
+  componentName: string,
+  builtInClasses: Readonly<ClassInterface>
+): ClassInterface {
+  const formatString = (str: string) =>
+    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)}`;
+  });
+  return classes;
+}