@opencx/widget-react 4.0.30 → 4.0.32

package/dist/index.js

@@ -1,14 +1,14 @@
 import { jsx as r, jsxs as d, Fragment as te } from "react/jsx-runtime";
-import * as le from "@radix-ui/react-popover";
+import * as ce from "@radix-ui/react-popover";
 import * as G from "react";
-import q, { memo as $t, forwardRef as dt, useState as T, cloneElement as pt, createContext as Lt, useEffect as re, useContext as Yt, useMemo as ht, useRef as ce, createElement as ot } from "react";
-import { useWidget as R, useConfig as x, useDocumentDir as fe, useSessions as $, useMessages as j, useWidgetRouter as P, useWidgetTrigger as K, useModes as mt, useCsat as gt, useUploadFiles as qt, useIsAwaitingBotReply as wt, useContact as Xt, WidgetProvider as Ut, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
+import q, { memo as $t, forwardRef as dt, useState as T, cloneElement as pt, createContext as Lt, useEffect as re, useContext as Yt, useMemo as ht, useRef as de, createElement as ot } from "react";
+import { useWidget as R, useConfig as x, useDocumentDir as ve, useSessions as $, useMessages as j, useWidgetRouter as P, useWidgetTrigger as K, useModes as mt, useCsat as gt, useUploadFiles as qt, useIsAwaitingBotReply as wt, useContact as Xt, WidgetProvider as Ut, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
 import { clsx as Gt } from "clsx";
 import { twMerge as Kt } from "tailwind-merge";
 import { motion as Z, AnimatePresence as _ } from "framer-motion";
 import { Slot as Qt } from "@radix-ui/react-slot";
 import { cva as Zt } from "class-variance-authority";
-import { X as Jt, CircleDashedIcon as er, XIcon as ve, SquareXIcon as tr, SquareCheckBigIcon as rr, SquareCheckIcon as or, ShrinkIcon as nr, Minimize2Icon as sr, MinimizeIcon as ir, Maximize2Icon as ar, MaximizeIcon as lr, ExpandIcon as cr, CircleXIcon as dr, CircleCheckBigIcon as pr, CircleCheckIcon as ut, CheckCheckIcon as hr, CheckIcon as mr, ChevronLeftIcon as gr, LoaderIcon as wr, ArrowUpIcon as ft, PaperclipIcon as ur, ImageIcon as fr, CircleDashed as vr, AlertCircle as xr, Loader2 as br, FileAudio2Icon as yr, FileVideo2Icon as kr, FileIcon as Cr, UserRoundIcon as zr, ChevronRightIcon as Nr, SendHorizontal as Sr, ChevronDownIcon as _r } from "lucide-react";
+import { X as Jt, CircleDashedIcon as er, XIcon as xe, SquareXIcon as tr, SquareCheckBigIcon as rr, SquareCheckIcon as or, ShrinkIcon as nr, Minimize2Icon as sr, MinimizeIcon as ir, Maximize2Icon as ar, MaximizeIcon as lr, ExpandIcon as cr, CircleXIcon as dr, CircleCheckBigIcon as pr, CircleCheckIcon as ut, CheckCheckIcon as hr, CheckIcon as mr, ChevronLeftIcon as gr, LoaderIcon as wr, ArrowUpIcon as ft, PaperclipIcon as ur, ImageIcon as fr, CircleDashed as vr, AlertCircle as xr, Loader2 as br, FileAudio2Icon as yr, FileVideo2Icon as kr, FileIcon as Cr, UserRoundIcon as zr, ChevronRightIcon as Nr, SendHorizontal as Sr, ChevronDownIcon as _r } from "lucide-react";
 import vt from "remark-gfm";
 import Ir from "react-markdown";
 import xt from "rehype-raw";
@@ -19,7 +19,7 @@ import * as oe from "@radix-ui/react-tooltip";
 import nt from "tinycolor2";
 import { useDropzone as Dr } from "react-dropzone";
 import Rr from "react-use/lib/useAsyncFn";
-import { z as he } from "zod";
+import { z as me } from "zod";
 function g(e) {
   return { "data-component": e };
 }
@@ -32,29 +32,29 @@ const V = {
 }, B = $t(
   dt(
     ({ children: e, className: o, scale: t = 1.02, off: n = !1 }, s) => {
-      const [i, a] = T(!1), [c, l] = T({ x: 0, y: 0 });
+      const [a, i] = T(!1), [c, l] = T({ x: 0, y: 0 });
       if (n || /translate/.test(
         e.props.className || ""
       )) return e;
       const b = (u) => {
         var z, N;
-        const { clientX: y, clientY: I } = u, S = u.currentTarget.getBoundingClientRect(), M = y - (S.left + S.width / 2), F = I - (S.top + S.height / 2), H = Math.max(
+        const { clientX: y, clientY: I } = u, S = u.currentTarget.getBoundingClientRect(), M = y - (S.left + S.width / 2), H = I - (S.top + S.height / 2), F = Math.max(
           -1,
           Math.min(1, M / (S.width / 2))
         ), W = Math.max(
           -1,
-          Math.min(1, F / (S.height / 2))
-        ), E = H * V.x, v = W * V.y;
+          Math.min(1, H / (S.height / 2))
+        ), E = F * V.x, v = W * V.y;
         l({ x: E, y: v }), (N = (z = e.props).onMouseMove) == null || N.call(z, u);
       }, w = () => {
         var u, y;
-        a(!0), (y = (u = e.props).onMouseEnter) == null || y.call(u);
+        i(!0), (y = (u = e.props).onMouseEnter) == null || y.call(u);
       }, m = () => {
         var u, y;
-        a(!1), l({ x: 0, y: 0 }), (y = (u = e.props).onMouseLeave) == null || y.call(u);
+        i(!1), l({ x: 0, y: 0 }), (y = (u = e.props).onMouseLeave) == null || y.call(u);
       }, C = {
-        "--wobble-x": i ? `${c.x}px` : "0px",
-        "--wobble-y": i ? `${c.y}px` : "0px",
+        "--wobble-x": a ? `${c.x}px` : "0px",
+        "--wobble-y": a ? `${c.y}px` : "0px",
         "--scale": 1 - (t - 1)
       };
       return pt(e, {
@@ -95,7 +95,7 @@ const jr = 10, Er = (e, o, t) => ({
   initial: { opacity: 0, y: -e, ...o.initial },
   animate: { opacity: 1, y: 0, ...o.animate, transition: { delay: t } },
   exit: { opacity: 0, y: e, ...o.exit }
-}), Fr = {
+}), Hr = {
   right: Er,
   left: Or,
   up: Pr,
@@ -107,15 +107,15 @@ const jr = 10, Er = (e, o, t) => ({
     children: t,
     snapExit: n = !1,
     overrides: s = {},
-    delay: i = 0,
-    ...a
+    delay: a = 0,
+    ...i
   }, c) => {
-    const l = e ? Fr[e](o, s, i) : {};
-    return n && l.exit && typeof l.exit == "object" && !Array.isArray(l.exit) && (l.exit.transition = { duration: 0 }), /* @__PURE__ */ r(Z.div, { ref: c, ...a, ...l, children: t });
+    const l = e ? Hr[e](o, s, a) : {};
+    return n && l.exit && typeof l.exit == "object" && !Array.isArray(l.exit) && (l.exit.transition = { duration: 0 }), /* @__PURE__ */ r(Z.div, { ref: c, ...i, ...l, children: t });
   }
 );
 f.displayName = "MotionDiv";
-const Hr = Zt(
+const Fr = Zt(
   p(
     "inline-flex shrink-0 items-center justify-center gap-2",
     "text-sm font-medium whitespace-nowrap",
@@ -155,12 +155,12 @@ const Hr = Zt(
     }
   }
 ), k = G.forwardRef(
-  ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, i) => /* @__PURE__ */ r(B, { ref: i, children: /* @__PURE__ */ r(
+  ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, a) => /* @__PURE__ */ r(B, { ref: a, children: /* @__PURE__ */ r(
     n ? Qt : "button",
     {
       ...g("ui_lib/btn"),
       "data-variant": o,
-      className: p(Hr({ variant: o, size: t, className: e })),
+      className: p(Fr({ variant: o, size: t, className: e })),
       ...s
     }
   ) })
@@ -168,9 +168,9 @@ const Hr = Zt(
 k.displayName = "Button";
 const yt = Lt(null);
 function Wr({ children: e }) {
-  const [o, t] = T(!1), [n, s] = T(null), i = (c) => {
+  const [o, t] = T(!1), [n, s] = T(null), a = (c) => {
     s(c), t(!0);
-  }, a = () => {
+  }, i = () => {
     t(!1), setTimeout(() => {
       s(null);
     }, 200);
@@ -178,7 +178,7 @@ function Wr({ children: e }) {
   return /* @__PURE__ */ d(
     yt.Provider,
     {
-      value: { open: i, close: a, isOpen: o, content: n },
+      value: { open: a, close: i, isOpen: o, content: n },
       children: [
         /* @__PURE__ */ r(Br, {}),
         e
@@ -186,7 +186,7 @@ function Wr({ children: e }) {
     }
   );
 }
-function de() {
+function pe() {
   const e = Yt(yt);
   return e || (console.error("useDialoger must be used within a DialogerProvider"), {
     open: () => {
@@ -198,13 +198,13 @@ function de() {
   });
 }
 function Br() {
-  const { contentIframeRef: e } = R(), { isOpen: o, content: t, close: n } = de();
+  const { contentIframeRef: e } = R(), { isOpen: o, content: t, close: n } = pe();
   return re(() => {
-    var i, a;
+    var a, i;
     const s = (c) => {
       c.key === "Escape" && n();
     };
-    return (a = (i = e == null ? void 0 : e.current) == null ? void 0 : i.contentWindow) == null || a.document.addEventListener(
+    return (i = (a = e == null ? void 0 : e.current) == null ? void 0 : a.contentWindow) == null || i.document.addEventListener(
       "keydown",
       s
     ), () => {
@@ -234,7 +234,7 @@ function kt({
   className: o,
   withClose: t = !1
 }) {
-  const { close: n } = de();
+  const { close: n } = pe();
   return /* @__PURE__ */ d(
     "div",
     {
@@ -314,20 +314,20 @@ function It({
   children: e,
   trigger: o
 }) {
-  const { open: t } = de();
+  const { open: t } = pe();
   return pt(o, {
     onClick: () => t(e)
   });
 }
 function Tt({ attachment: e }) {
-  const { name: o, size: t, type: n, url: s } = e, i = n.startsWith("image/"), a = n.startsWith("video/"), c = n.startsWith("audio/");
+  const { name: o, size: t, type: n, url: s } = e, a = n.startsWith("image/"), i = n.startsWith("video/"), c = n.startsWith("audio/");
   return c ? /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "w-full shrink-0 overflow-hidden", children: /* @__PURE__ */ d("audio", { controls: !0, className: "w-full", children: [
     /* @__PURE__ */ r("source", { src: s, type: n }),
     "Your browser does not support the audio tag."
-  ] }) }) }) : a ? /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ d("video", { controls: !0, children: [
+  ] }) }) }) : i ? /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ d("video", { controls: !0, children: [
     /* @__PURE__ */ r("source", { src: s, type: n }),
     "Your browser does not support the video tag."
-  ] }) }) }) : !i && !a && !c ? /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ d("div", { className: "flex items-end gap-2 p-2", children: [
+  ] }) }) }) : !a && !i && !c ? /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ d("div", { className: "flex items-end gap-2 p-2", children: [
     /* @__PURE__ */ r(
       "a",
       {
@@ -349,13 +349,13 @@ function Tt({ attachment: e }) {
   ] }) }) }) : /* @__PURE__ */ r(
     It,
     {
-      trigger: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: i && /* @__PURE__ */ r("img", { src: s, className: "object-cover size-16", alt: o }) }) }) }),
+      trigger: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: a && /* @__PURE__ */ r("img", { src: s, className: "object-cover size-16", alt: o }) }) }) }),
       children: /* @__PURE__ */ r(
         kt,
         {
           className: "size-full max-w-full rounded-3xl flex items-center justify-center bg-transparent border-none gap-0",
           withClose: !0,
-          children: i && /* @__PURE__ */ r("div", { className: "size-fit shrink-0 rounded-2xl overflow-hidden max-h-full", children: /* @__PURE__ */ r("img", { src: s, className: "object-cover size-auto", alt: o }) })
+          children: a && /* @__PURE__ */ r("div", { className: "size-fit shrink-0 rounded-2xl overflow-hidden max-h-full", children: /* @__PURE__ */ r("img", { src: s, className: "object-cover size-auto", alt: o }) })
         }
       )
     }
@@ -365,7 +365,7 @@ const Mt = q.memo(
   Ir,
   (e, o) => e.children === o.children && e.className === o.className
 );
-function xe({
+function be({
   children: e,
   messageType: o,
   messageId: t
@@ -379,20 +379,20 @@ function xe({
       remarkPlugins: [vt],
       rehypePlugins: [xt],
       components: {
-        a: ({ children: s, ...i }) => /* @__PURE__ */ r("a", { target: i.target || n || "_top", ...i, children: s })
+        a: ({ children: s, ...a }) => /* @__PURE__ */ r("a", { target: a.target || n || "_top", ...a, children: s })
       },
       children: e
     }
   );
 }
-function me({
+function ge({
   data: e,
   id: o,
   type: t,
   attachments: n,
   isFirstInGroup: s,
-  isLastInGroup: i,
-  isAloneInGroup: a,
+  isLastInGroup: a,
+  isAloneInGroup: i,
   dataComponentNames: c,
   classNames: l
 }) {
@@ -413,8 +413,8 @@ function me({
           {
             ...g((c == null ? void 0 : c.message) ?? "chat/agent_msg/msg"),
             "data-first": s,
-            "data-last": i,
-            "data-alone": a,
+            "data-last": a,
+            "data-alone": i,
             "data-variant": b,
             className: p(
               "transition-all",
@@ -426,12 +426,12 @@ function me({
               // Adding "whitespace-pre-wrap" will result in unnecessarily huge line breaks
               b === "error" && "bg-destructive/15 text-destructive",
               // We're using the booleans directly here, not the data attributes, to make any external styling more specific than this
-              s && !a && "rounded-bl-md",
-              i && !a && "rounded-tl-md",
-              !s && !i && !a && "rounded-l-md",
+              s && !i && "rounded-bl-md",
+              a && !i && "rounded-tl-md",
+              !s && !a && !i && "rounded-l-md",
               l == null ? void 0 : l.message
             ),
-            children: /* @__PURE__ */ r(xe, { messageType: t, messageId: o, children: h })
+            children: /* @__PURE__ */ r(be, { messageType: t, messageId: o, children: h })
           }
         )
       ]
@@ -441,7 +441,7 @@ function me({
 function $r(e) {
   return /* @__PURE__ */ r("div", { className: "w-full max-w-full overflow-auto shrink-0", children: /* @__PURE__ */ r("pre", { className: "text-xs leading-tight whitespace-pre-wrap break-word", children: JSON.stringify(e, null, 1) }) });
 }
-const be = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+const ye = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
   Q.Root,
   {
     ref: t,
@@ -453,8 +453,8 @@ const be = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
     ...o
   }
 ));
-be.displayName = Q.Root.displayName;
-const ye = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+ye.displayName = Q.Root.displayName;
+const ke = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
   Q.Image,
   {
     ref: t,
@@ -462,8 +462,8 @@ const ye = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
     ...o
   }
 ));
-ye.displayName = Q.Image.displayName;
-const ke = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+ke.displayName = Q.Image.displayName;
+const Ce = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
   Q.Fallback,
   {
     ref: t,
@@ -474,15 +474,15 @@ const ke = G.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
     ...o
   }
 ));
-ke.displayName = Q.Fallback.displayName;
-function ge({
+Ce.displayName = Q.Fallback.displayName;
+function we({
   agent: e,
   ...o
 }) {
   var t, n;
-  return /* @__PURE__ */ d(be, { ...o, children: [
-    /* @__PURE__ */ r(ye, { src: (e == null ? void 0 : e.avatar) ?? "", alt: "Agent Icon" }),
-    (e == null ? void 0 : e.name) && /* @__PURE__ */ r(ke, { children: (n = (t = e == null ? void 0 : e.name) == null ? void 0 : t.slice(0, 1)) == null ? void 0 : n.toUpperCase() })
+  return /* @__PURE__ */ d(ye, { ...o, children: [
+    /* @__PURE__ */ r(ke, { src: (e == null ? void 0 : e.avatar) ?? "", alt: "Agent Icon" }),
+    (e == null ? void 0 : e.name) && /* @__PURE__ */ r(Ce, { children: (n = (t = e == null ? void 0 : e.name) == null ? void 0 : t.slice(0, 1)) == null ? void 0 : n.toUpperCase() })
   ] });
 }
 function Lr({ agent: e }) {
@@ -492,7 +492,7 @@ function Lr({ agent: e }) {
       ...g("chat/bot_loading/root"),
       className: "flex flex-row items-end w-full gap-2 animate-pulse",
       children: [
-        /* @__PURE__ */ r(ge, { agent: e }),
+        /* @__PURE__ */ r(we, { agent: e }),
         /* @__PURE__ */ d(
           "div",
           {
@@ -558,13 +558,13 @@ function A() {
     };
   }, []), { isSmallScreen: e };
 }
-const se = {
+const ie = {
   transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
   transitionDuration: "1000ms"
 };
 function X() {
-  var w, m, C, u, y, I, S, M, F, H, W, E, v, z, N, L, ne, _e, Ie, Te, Me, De, Re, je, Ee, Oe, Pe, Ae, Fe, He, We, Be, $e, Le, Ye, qe, Xe, Ue, Ve, Ge, Ke, Qe, Ze, Je, et, tt, rt;
-  const { dir: e } = fe(), { isSmallScreen: o } = A(), { theme: t, inline: n } = x(), s = (Y) => n ? "100%" : Y, i = (Y, pe) => o ? `100dv${Y}` : pe, a = (Y, pe) => s(i(Y, pe)), c = {
+  var w, m, C, u, y, I, S, M, H, F, W, E, v, z, N, L, se, _e, Ie, Te, Me, De, Re, je, Ee, Oe, Pe, Ae, He, Fe, We, Be, $e, Le, Ye, qe, Xe, Ue, Ve, Ge, Ke, Qe, Ze, Je, et, tt, rt;
+  const { dir: e } = ve(), { isSmallScreen: o } = A(), { theme: t, inline: n } = x(), s = (Y) => n ? "100%" : Y, a = (Y, he) => o ? `100dv${Y}` : he, i = (Y, he) => s(a(Y, he)), c = {
     zIndex: ((w = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : w.zIndex) ?? 1e7,
     offset: {
       bottom: ((C = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.offset) == null ? void 0 : C.bottom) ?? 20,
@@ -572,8 +572,8 @@ function X() {
       left: ((S = (I = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : I.offset) == null ? void 0 : S.left) ?? (e === "rtl" ? 20 : "initial")
     },
     size: {
-      button: ((F = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : F.button) ?? 48,
-      icon: ((W = (H = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : H.size) == null ? void 0 : W.icon) ?? 24
+      button: ((H = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : H.button) ?? 48,
+      icon: ((W = (F = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : F.size) == null ? void 0 : W.icon) ?? 24
     }
   }, l = (() => {
     const Y = e === "ltr" ? c.offset.right : c.offset.left;
@@ -589,9 +589,9 @@ function X() {
       // was: '1px solid'
       outlineColor: ((N = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : N.outlineColor) ?? "hsl(0 0% 50% / .5)",
       boxShadow: ((L = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : L.boxShadow) ?? "0 0px 100px 0px rgb(0 0 0 / 0.25)",
-      transitionProperty: ((ne = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : ne.transitionProperty) ?? "all",
-      transitionTimingFunction: ((_e = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : _e.transitionTimingFunction) ?? se.transitionTimingFunction,
-      transitionDuration: ((Ie = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Ie.transitionDuration) ?? se.transitionDuration,
+      transitionProperty: ((se = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : se.transitionProperty) ?? "all",
+      transitionTimingFunction: ((_e = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : _e.transitionTimingFunction) ?? ie.transitionTimingFunction,
+      transitionDuration: ((Ie = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Ie.transitionDuration) ?? ie.transitionDuration,
       offset: {
         side: o ? 0 : c.offset.bottom + c.size.button + V.y * 2 + (((Me = (Te = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Te.offset) == null ? void 0 : Me.side) ?? 10),
         align: o ? 0 : l + (((Re = (De = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : De.offset) == null ? void 0 : Re.align) ?? 0)
@@ -599,31 +599,31 @@ function X() {
     },
     screens: {
       welcome: {
-        width: a("w", ((Ee = (je = t == null ? void 0 : t.screens) == null ? void 0 : je.welcome) == null ? void 0 : Ee.width) ?? "400px"),
+        width: i("w", ((Ee = (je = t == null ? void 0 : t.screens) == null ? void 0 : je.welcome) == null ? void 0 : Ee.width) ?? "400px"),
         // By setting minHeight to 1px, a nice animation will play from 1px to the dynamic height of the content of the screen
-        minHeight: a(
+        minHeight: i(
           "h",
           ((Pe = (Oe = t == null ? void 0 : t.screens) == null ? void 0 : Oe.welcome) == null ? void 0 : Pe.minHeight) ?? "1px"
         )
       },
       sessions: {
-        width: a("w", ((Fe = (Ae = t == null ? void 0 : t.screens) == null ? void 0 : Ae.sessions) == null ? void 0 : Fe.width) ?? "450px"),
-        height: a("h", ((We = (He = t == null ? void 0 : t.screens) == null ? void 0 : He.sessions) == null ? void 0 : We.height) ?? "600px")
+        width: i("w", ((He = (Ae = t == null ? void 0 : t.screens) == null ? void 0 : Ae.sessions) == null ? void 0 : He.width) ?? "450px"),
+        height: i("h", ((We = (Fe = t == null ? void 0 : t.screens) == null ? void 0 : Fe.sessions) == null ? void 0 : We.height) ?? "600px")
       },
       chat: {
-        width: a("w", (($e = (Be = t == null ? void 0 : t.screens) == null ? void 0 : Be.chat) == null ? void 0 : $e.width) ?? "525px"),
-        height: a("h", ((Ye = (Le = t == null ? void 0 : t.screens) == null ? void 0 : Le.chat) == null ? void 0 : Ye.height) ?? "700px"),
+        width: i("w", (($e = (Be = t == null ? void 0 : t.screens) == null ? void 0 : Be.chat) == null ? void 0 : $e.width) ?? "525px"),
+        height: i("h", ((Ye = (Le = t == null ? void 0 : t.screens) == null ? void 0 : Le.chat) == null ? void 0 : Ye.height) ?? "700px"),
         withCanvas: {
-          width: a(
+          width: i(
             "w",
             ((Ue = (Xe = (qe = t == null ? void 0 : t.screens) == null ? void 0 : qe.chat) == null ? void 0 : Xe.withCanvas) == null ? void 0 : Ue.width) ?? "min(1050px, 100vw)"
           ),
-          height: a(
+          height: i(
             "h",
             ((Ke = (Ge = (Ve = t == null ? void 0 : t.screens) == null ? void 0 : Ve.chat) == null ? void 0 : Ge.withCanvas) == null ? void 0 : Ke.height) ?? "min(800px, 100vh)"
           ),
-          transitionTimingFunction: ((Je = (Ze = (Qe = t == null ? void 0 : t.screens) == null ? void 0 : Qe.chat) == null ? void 0 : Ze.withCanvas) == null ? void 0 : Je.transitionTimingFunction) ?? se.transitionTimingFunction,
-          transitionDuration: ((rt = (tt = (et = t == null ? void 0 : t.screens) == null ? void 0 : et.chat) == null ? void 0 : tt.withCanvas) == null ? void 0 : rt.transitionDuration) ?? se.transitionDuration
+          transitionTimingFunction: ((Je = (Ze = (Qe = t == null ? void 0 : t.screens) == null ? void 0 : Qe.chat) == null ? void 0 : Ze.withCanvas) == null ? void 0 : Je.transitionTimingFunction) ?? ie.transitionTimingFunction,
+          transitionDuration: ((rt = (tt = (et = t == null ? void 0 : t.screens) == null ? void 0 : et.chat) == null ? void 0 : tt.withCanvas) == null ? void 0 : rt.transitionDuration) ?? ie.transitionDuration
         }
       }
     }
@@ -631,7 +631,7 @@ function X() {
     // Subtract the offset.bottom twice so that it adds a bit of padding to the top
     // Subtract the distance between the trigger and the widget content container
     // Subtract the invisible padding of the trigger (for the wobble effect)
-    maxHeight: a(
+    maxHeight: i(
       "h",
       `calc(
         100vh 
@@ -641,14 +641,14 @@ function X() {
       )`
     ),
     // Subtract the offset.right twice so that it adds a bit of padding to the left
-    maxWidth: a(
+    maxWidth: i(
       "w",
       `calc(
         100vw 
         - ${l * 2}px
       )`
     ),
-    minHeight: a(
+    minHeight: i(
       "h",
       `min(
         ${h.screens.welcome.minHeight}, 
@@ -656,7 +656,7 @@ function X() {
         ${h.screens.chat.height}
       )`
     ),
-    minWidth: a(
+    minWidth: i(
       "w",
       `min(
         ${h.screens.welcome.width}, 
@@ -779,7 +779,7 @@ function Et() {
     }
   };
 }
-function Ce({
+function ze({
   width: e,
   height: o
 }) {
@@ -824,7 +824,7 @@ function ee({
       case "SquareX":
         return tr;
       case "X":
-        return ve;
+        return xe;
       case void 0:
         return it;
       default:
@@ -833,7 +833,7 @@ function ee({
   })();
   return /* @__PURE__ */ r(t, { className: p("size-4", o) });
 }
-function ze() {
+function ne() {
   const {
     widgetCtx: { org: e }
   } = R(), {
@@ -844,21 +844,24 @@ function ze() {
     routerState: { screen: s }
   } = P();
   return {
-    props: {
-      react: q,
-      org: e,
-      session: o,
-      config: t,
-      messages: n,
-      currentScreen: s
-    }
+    react: q,
+    org: e,
+    session: o,
+    config: t,
+    messages: n,
+    currentScreen: s
   };
 }
 function Vr() {
   var t;
-  const { props: e } = ze(), o = (t = e.config.specialComponents) == null ? void 0 : t.headerBottom;
+  const e = ne(), o = (t = e.config.customComponents) == null ? void 0 : t.headerBottom;
   return o ? /* @__PURE__ */ r(o, { ...e }) : null;
 }
+function Gr({ fallback: e }) {
+  var n;
+  const o = ne(), t = (n = o.config.customComponents) == null ? void 0 : n.headerTitle;
+  return t ? /* @__PURE__ */ r(t, { ...o }) : e;
+}
 function Ne() {
   const {
     widgetCtx: { org: e }
@@ -866,12 +869,12 @@ function Ne() {
     routerState: { screen: o }
   } = P(), { textContent: t } = x();
   return (() => {
-    var s, i;
+    var s, a;
     switch (o) {
       case "chat":
         return (s = t == null ? void 0 : t.chatScreen) == null ? void 0 : s.headerTitle;
       case "sessions":
-        return (i = t == null ? void 0 : t.sessionsScreen) == null ? void 0 : i.headerTitle;
+        return (a = t == null ? void 0 : t.sessionsScreen) == null ? void 0 : a.headerTitle;
       case "welcome":
         return;
       default:
@@ -880,7 +883,7 @@ function Ne() {
     }
   })() ?? e.name ?? "Chat";
 }
-function Gr(e) {
+function Kr(e) {
   switch (e) {
     case "chat":
       return g("chat/header");
@@ -893,7 +896,7 @@ function Gr(e) {
       return;
   }
 }
-function Kr() {
+function Qr() {
   const { router: e } = x(), {
     routerState: { screen: o },
     toSessionsScreen: t
@@ -909,7 +912,7 @@ function Kr() {
     }
   );
 }
-function Qr({
+function Zr({
   button: e
 }) {
   const { setIsOpen: o } = K(), { isSmallScreen: t } = A();
@@ -927,35 +930,35 @@ function Qr({
     }
   );
 }
-function we({
+function ue({
   button: e
 }) {
   const [o, t] = T(!1), {
     routerState: { screen: n }
-  } = P(), { isSmallScreen: s } = A(), { theme: i } = X(), { setWidth: a, setHeight: c } = Et();
+  } = P(), { isSmallScreen: s } = A(), { theme: a } = X(), { setWidth: i, setHeight: c } = Et();
   if (n !== "chat" && n !== "sessions") return null;
   const l = (() => {
     switch (n) {
       case "chat":
-        return i.screens.chat.height;
+        return a.screens.chat.height;
       case "sessions":
-        return i.screens.sessions.height;
+        return a.screens.sessions.height;
       default:
-        return D(n, we.name), i.screens.chat.height;
+        return D(n, ue.name), a.screens.chat.height;
     }
   })(), h = (() => {
     switch (n) {
       case "chat":
-        return i.screens.chat.width;
+        return a.screens.chat.width;
       case "sessions":
-        return i.screens.sessions.width;
+        return a.screens.sessions.width;
       default:
-        return D(n, we.name), i.screens.chat.width;
+        return D(n, ue.name), a.screens.chat.width;
     }
   })(), b = () => {
     t((w) => {
       const m = !w;
-      return c(m ? "100vh" : l), a(m ? `max(40vw, ${h})` : h), m;
+      return c(m ? "100vh" : l), i(m ? `max(40vw, ${h})` : h), m;
     });
   };
   return s && e.hideOnSmallScreen || !s && e.hideOnLargeScreen ? null : /* @__PURE__ */ r(
@@ -978,7 +981,7 @@ function Ot({
   button: e
 }) {
   var y, I;
-  const { close: o } = de(), { widgetCtx: t } = R(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: i } = $(), { isSmallScreen: a } = A(), c = !i.session, l = ((y = i.session) == null ? void 0 : y.isOpened) === !1, h = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", w = e.behaviorIfSessionIsResolved || "disabled", m = !!(i.isResolvingSession || c && b === "disabled" || l && w === "disabled"), C = async () => {
+  const { close: o } = pe(), { widgetCtx: t } = R(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: a } = $(), { isSmallScreen: i } = A(), c = !a.session, l = ((y = a.session) == null ? void 0 : y.isOpened) === !1, h = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", w = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || c && b === "disabled" || l && w === "disabled"), C = async () => {
     const { success: S, error: M } = await s();
     if (o(), !S) return console.error(M);
     switch (h) {
@@ -1033,7 +1036,7 @@ function Ot({
           );
       }
   };
-  return a && e.hideOnSmallScreen || !a && e.hideOnLargeScreen ? null : ((I = e.confirmation) == null ? void 0 : I.type) === "modal" && !l && !c ? /* @__PURE__ */ r(
+  return i && e.hideOnSmallScreen || !i && e.hideOnLargeScreen ? null : ((I = e.confirmation) == null ? void 0 : I.type) === "modal" && !l && !c ? /* @__PURE__ */ r(
     It,
     {
       trigger: /* @__PURE__ */ r(
@@ -1055,7 +1058,7 @@ function Ot({
             {
               variant: "secondary",
               onClick: o,
-              disabled: i.isResolvingSession,
+              disabled: a.isResolvingSession,
               children: e.confirmation.cancelButtonText || "No"
             }
           ),
@@ -1064,7 +1067,7 @@ function Ot({
             {
               variant: "destructive",
               onClick: C,
-              disabled: i.isResolvingSession,
+              disabled: a.isResolvingSession,
               children: e.confirmation.confirmButtonText || "Yes"
             }
           )
@@ -1083,29 +1086,29 @@ function Ot({
     }
   );
 }
-function ue({ button: e }) {
+function fe({ button: e }) {
   switch (e.functionality) {
     case "close-widget":
-      return /* @__PURE__ */ r(Qr, { button: e });
+      return /* @__PURE__ */ r(Zr, { button: e });
     case "expand-shrink":
-      return /* @__PURE__ */ r(we, { button: e });
+      return /* @__PURE__ */ r(ue, { button: e });
     case "resolve-session":
       return /* @__PURE__ */ r(Ot, { button: e });
     default:
-      return D(e, ue.name), null;
+      return D(e, fe.name), null;
   }
 }
-const Zr = {
+const Jr = {
   functionality: "close-widget",
   hideOnLargeScreen: !0,
   icon: "X"
 };
-function Jr() {
+function eo() {
   const {
     routerState: { screen: e }
   } = P(), { headerButtons: o } = x(), t = e === "chat" ? o == null ? void 0 : o.chatScreen : e === "sessions" ? o == null ? void 0 : o.sessionsScreen : [];
-  return !t || t.length === 0 ? /* @__PURE__ */ r(ue, { button: Zr }) : /* @__PURE__ */ r(te, { children: t.map((n) => /* @__PURE__ */ r(
-    ue,
+  return !t || t.length === 0 ? /* @__PURE__ */ r(fe, { button: Jr }) : /* @__PURE__ */ r(te, { children: t.map((n) => /* @__PURE__ */ r(
+    fe,
     {
       button: n
     },
@@ -1115,10 +1118,10 @@ function Jr() {
 function Pt() {
   const {
     routerState: { screen: e }
-  } = P(), o = Gr(e), t = Ne();
+  } = P(), o = Kr(e), t = Ne();
   return /* @__PURE__ */ d("header", { ...o, className: "py-2 px-4 shrink-0", children: [
     /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ r(Kr, {}),
+      /* @__PURE__ */ r(Qr, {}),
       /* @__PURE__ */ r(
         "div",
         {
@@ -1126,10 +1129,15 @@ function Pt() {
             "flex-1 h-8 flex items-center",
             e === "sessions" && "ps-2"
           ),
-          children: /* @__PURE__ */ r("h2", { className: "font-semibold", children: t })
+          children: /* @__PURE__ */ r(
+            Gr,
+            {
+              fallback: /* @__PURE__ */ r("h2", { className: "font-semibold", children: t })
+            }
+          )
         }
       ),
-      /* @__PURE__ */ r(Jr, {})
+      /* @__PURE__ */ r(eo, {})
     ] }),
     /* @__PURE__ */ r(Vr, {})
   ] });
@@ -1137,7 +1145,7 @@ function Pt() {
 function At({ className: e }) {
   return /* @__PURE__ */ r(wr, { className: p("size-4 animate-spin", e) });
 }
-function eo() {
+function to() {
   const {
     messagesState: { isInitialFetchLoading: e }
   } = j(), { isSmallScreen: o } = A(), { activeMode: t, Component: n } = mt();
@@ -1145,24 +1153,24 @@ function eo() {
     isCanvasOpen: !e && !o && !!t && !!n
   };
 }
-function to() {
-  const { activeMode: e, Component: o } = mt(), { sendMessage: t } = j(), { createStateCheckpoint: n } = $(), [s, i] = T(!1), a = async (c) => {
+function ro() {
+  const e = ne(), { activeMode: o, Component: t } = mt(), { sendMessage: n } = j(), { createStateCheckpoint: s } = $(), [a, i] = T(!1), c = async (l) => {
     try {
-      i(!0), await t(c);
-    } catch (l) {
-      console.error(l);
+      i(!0), await n(l);
+    } catch (h) {
+      console.error(h);
     } finally {
       i(!1);
     }
   };
-  return !e || !o ? null : /* @__PURE__ */ r(
-    o,
+  return !o || !t ? null : /* @__PURE__ */ r(
+    t,
     {
-      react: q,
-      mode: e,
-      createStateCheckpoint: n,
-      sendMessage: a,
-      isSendingMessage: s
+      ...e,
+      mode: o,
+      createStateCheckpoint: s,
+      sendMessage: c,
+      isSendingMessage: a
     }
   );
 }
@@ -1185,7 +1193,7 @@ const O = q.forwardRef(
   }
 );
 O.displayName = "MotionDiv__VerticalReveal";
-const ro = [
+const oo = [
   {
     label: "Terrible",
     value: 1,
@@ -1212,23 +1220,23 @@ const ro = [
     emoji: "😍"
   }
 ];
-function oo() {
+function no() {
   const { isSmallScreen: e } = A(), {
     submitCsat: o,
     isCsatRequested: t,
     isCsatSubmitted: n,
     submittedScore: s,
-    submittedFeedback: i
-  } = gt(), [a, c] = T(null), [l, h] = T(null), b = (m) => {
+    submittedFeedback: a
+  } = gt(), [i, c] = T(null), [l, h] = T(null), b = (m) => {
     c((C) => C === m ? null : m);
   }, w = () => {
-    a && o({
-      score: a,
+    i && o({
+      score: i,
       feedback: l || void 0
     });
   };
   return !t && !n ? null : /* @__PURE__ */ d("div", { className: "w-1/2 min-w-80 max-w-96 mx-auto overflow-hidden", children: [
-    /* @__PURE__ */ r(_, { mode: "wait", children: t && !a ? /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: "How was your conversation?" }) }, "csat-requested-title") : n ? /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: "You rated the conversation as" }) }, "csat-submitted-title") : null }),
+    /* @__PURE__ */ r(_, { mode: "wait", children: t && !i ? /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: "How was your conversation?" }) }, "csat-requested-title") : n ? /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: "You rated the conversation as" }) }, "csat-submitted-title") : null }),
     /* @__PURE__ */ r(
       "div",
       {
@@ -1237,18 +1245,18 @@ function oo() {
           "transition-all",
           n && "gap-0 justify-center"
         ),
-        children: ro.map((m) => /* @__PURE__ */ r(
+        children: oo.map((m) => /* @__PURE__ */ r(
           k,
           {
-            variant: m.value === a ? "secondary" : "ghost",
+            variant: m.value === i ? "secondary" : "ghost",
             size: "selfless",
             className: p(
               "transition-all overflow-hidden",
               "text-2xl size-8 rounded-full",
               "opacity-35",
               "hover:opacity-100",
-              !a && "opacity-100",
-              m.value === a && "opacity-100",
+              !i && "opacity-100",
+              m.value === i && "opacity-100",
               n && m.value !== s && "opacity-0 size-0",
               n && m.value === s && "opacity-100 size-fit text-4xl"
             ),
@@ -1259,7 +1267,7 @@ function oo() {
         ))
       }
     ),
-    /* @__PURE__ */ r(_, { mode: "wait", children: (a || s) && /* @__PURE__ */ r(O, { children: /* @__PURE__ */ d("div", { className: "pb-2 px-2 flex items-end", children: [
+    /* @__PURE__ */ r(_, { mode: "wait", children: (i || s) && /* @__PURE__ */ r(O, { children: /* @__PURE__ */ d("div", { className: "pb-2 px-2 flex items-end", children: [
       /* @__PURE__ */ r(
         "textarea",
         {
@@ -1274,7 +1282,7 @@ function oo() {
             e ? "text-[16px]" : "text-sm",
             n && "text-center"
           ),
-          value: n ? i || "" : l || "",
+          value: n ? a || "" : l || "",
           onChange: t ? (m) => h(m.target.value) : void 0,
           readOnly: n,
           placeholder: t ? "Tell us more... (optional)" : void 0
@@ -1285,7 +1293,7 @@ function oo() {
         {
           size: "fit",
           onClick: w,
-          disabled: !a,
+          disabled: !i,
           className: p(
             "transition-all overflow-hidden",
             "rounded-full size-8 flex items-center justify-center p-0",
@@ -1299,7 +1307,7 @@ function oo() {
   ] });
 }
 function U() {
-  const { dir: e } = fe(), o = x();
+  const { dir: e } = ve(), o = x();
   return ht(() => {
     const t = Tr(o.language) ? o.language : "en";
     return {
@@ -1316,8 +1324,8 @@ function Se({
   ...t
 }) {
   const { sendMessage: n } = j(), s = () => {
-    const i = e.trim();
-    i && n({ content: i });
+    const a = e.trim();
+    a && n({ content: a });
   };
   return /* @__PURE__ */ r(
     k,
@@ -1331,7 +1339,7 @@ function Se({
     }
   );
 }
-function no() {
+function so() {
   const { t: e } = U(), o = [e("i_need_more_help"), e("this_was_helpful")];
   return /* @__PURE__ */ r(
     "div",
@@ -1351,21 +1359,21 @@ function no() {
 }
 function at() {
   const { sessionState: e } = $(), { chatFooterItems: o } = x(), t = !!e.session && !e.session.isOpened, n = !t;
-  return /* @__PURE__ */ r(_, { mode: "wait", children: o == null ? void 0 : o.map((s, i) => s.showWhenSessionIsOpen === !1 && n || s.showWhenSessionIsResolved === !1 && t ? null : /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("div", { className: "pb-2 text-center text-xs", children: /* @__PURE__ */ r(xe, { children: s.message }) }) }, `${s.message}-${i}`)) });
+  return /* @__PURE__ */ r(_, { mode: "wait", children: o == null ? void 0 : o.map((s, a) => s.showWhenSessionIsOpen === !1 && n || s.showWhenSessionIsResolved === !1 && t ? null : /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("div", { className: "pb-2 text-center text-xs", children: /* @__PURE__ */ r(be, { children: s.message }) }) }, `${s.message}-${a}`)) });
 }
-function so({
+function io({
   file: { status: e, file: o, error: t },
   onCancel: n
 }) {
-  const [s, i] = T(
+  const [s, a] = T(
     null
   );
   re(() => {
     if (!o.type.startsWith("image/")) return;
     const l = new FileReader();
-    return l.onload = () => i(l.result), l.onerror = () => console.error("Error reading file"), l.readAsDataURL(o), () => l.abort();
+    return l.onload = () => a(l.result), l.onerror = () => console.error("Error reading file"), l.readAsDataURL(o), () => l.abort();
   }, [o]);
-  const a = () => {
+  const i = () => {
     switch (e) {
       case "uploading":
         return /* @__PURE__ */ r(br, { className: "size-4 animate-spin" });
@@ -1403,7 +1411,7 @@ function so({
             "flex items-center justify-center shrink-0"
           ),
           children: [
-            /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center", children: a() }),
+            /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center", children: i() }),
             /* @__PURE__ */ r(
               "button",
               {
@@ -1414,7 +1422,7 @@ function so({
                   "opacity-0 group-hover:opacity-100 transition"
                 ),
                 onClick: n,
-                children: /* @__PURE__ */ r(ve, { className: "size-4 text-primary-foreground" })
+                children: /* @__PURE__ */ r(xe, { className: "size-4 text-primary-foreground" })
               }
             ),
             /* @__PURE__ */ r(c, {})
@@ -1424,9 +1432,9 @@ function so({
     }
   );
 }
-function io() {
+function ao() {
   var E;
-  const { isSmallScreen: e } = A(), o = ce(null), { sendMessage: t } = j(), { sessionState: n } = $(), { t: s } = U(), [i, a] = T(""), {
+  const { isSmallScreen: e } = A(), o = de(null), { sendMessage: t } = j(), { sessionState: n } = $(), { t: s } = U(), [a, i] = T(""), {
     allFiles: c,
     emptyTheFiles: l,
     handleCancelUpload: h,
@@ -1435,10 +1443,10 @@ function io() {
     successFiles: m
   } = qt(), C = !!((E = n.session) != null && E.isHandedOff), { isAwaitingBotReply: u } = wt(), y = (v) => {
     b(v);
-  }, I = !i.trim() && m.length === 0, S = async () => {
+  }, I = !a.trim() && m.length === 0, S = async () => {
     if (u || I) return;
     w && console.info("please wait for the file(s) to upload");
-    const v = i.trim();
+    const v = a.trim();
     t({
       content: v,
       attachments: m.flatMap(
@@ -1452,11 +1460,11 @@ function io() {
           }
         ] : []
       )
-    }), a(""), l();
+    }), i(""), l();
   }, {
     getRootProps: M,
-    getInputProps: F,
-    open: H
+    getInputProps: H,
+    open: F
   } = Dr({
     onDrop: y,
     noClick: !0,
@@ -1485,7 +1493,7 @@ function io() {
       className: "p-2 relative space-y-1",
       ...M(),
       children: [
-        /* @__PURE__ */ r("input", { ...F() }),
+        /* @__PURE__ */ r("input", { ...H() }),
         /* @__PURE__ */ d(
           "div",
           {
@@ -1510,7 +1518,7 @@ function io() {
                         ...g("chat/input_box/attachments_container"),
                         className: "flex items-center gap-1",
                         children: /* @__PURE__ */ r(_, { mode: "popLayout", children: c.map((v) => /* @__PURE__ */ r(f, { snapExit: !0, children: /* @__PURE__ */ r(
-                          so,
+                          io,
                           {
                             onCancel: () => h(v.id),
                             file: v
@@ -1525,7 +1533,7 @@ function io() {
                         onPaste: W,
                         ref: o,
                         id: "chat-input",
-                        value: i,
+                        value: a,
                         rows: 3,
                         className: p(
                           /** Match the border radius of the container */
@@ -1538,7 +1546,7 @@ function io() {
                           // 16px on mobiles prevents auto-zoom on the input when focused
                           e ? "text-[16px]" : "text-sm"
                         ),
-                        onChange: (v) => a(v.target.value),
+                        onChange: (v) => i(v.target.value),
                         onKeyDown: async (v) => {
                           v.key === "Enter" && !v.shiftKey && (v.preventDefault(), S());
                         },
@@ -1558,7 +1566,7 @@ function io() {
                     children: /* @__PURE__ */ r(
                       k,
                       {
-                        onClick: H,
+                        onClick: F,
                         size: "fit",
                         variant: "ghost",
                         className: p(
@@ -1591,10 +1599,10 @@ function lt() {
   const { widgetCtx: e } = R(), { router: o } = x(), { canCreateNewSession: t } = $(), { toSessionsScreen: n } = P(), { t: s } = U();
   return /* @__PURE__ */ r(te, { children: t || o != null && o.chatScreenOnly ? /* @__PURE__ */ r(k, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new_conversation") }) : /* @__PURE__ */ r(k, { onClick: n, className: "rounded-2xl w-full", children: s("back_to_conversations") }) });
 }
-function ao() {
+function lo() {
   const { t: e } = U(), { isCsatRequested: o, isCsatSubmitted: t } = gt();
   return /* @__PURE__ */ r("div", { className: "p-2", children: /* @__PURE__ */ r("div", { className: "p-2 bg-muted rounded-3xl", children: /* @__PURE__ */ r(_, { mode: "wait", children: o || t ? /* @__PURE__ */ d(O, { children: [
-    /* @__PURE__ */ r(oo, {}),
+    /* @__PURE__ */ r(no, {}),
     /* @__PURE__ */ r(_, { mode: "wait", children: t && /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(lt, {}) }, "new-conv-or-back-to-convs-button") })
   ] }, "csat") : /* @__PURE__ */ d(O, { children: [
     /* @__PURE__ */ d("div", { className: "ps-2 flex items-center gap-1 pb-2", children: [
@@ -1604,26 +1612,26 @@ function ao() {
     /* @__PURE__ */ r(lt, {})
   ] }, "session-closed") }) }) });
 }
-function lo() {
-  var a;
-  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = x(), { sessionState: n } = $(), { messagesState: s } = j(), i = s.messages.length === 0;
-  return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(_, { mode: "wait", children: n.session && !((a = n.session) != null && a.isOpened) ? /* @__PURE__ */ d(O, { children: [
-    /* @__PURE__ */ r(ao, {}),
+function co() {
+  var i;
+  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = x(), { sessionState: n } = $(), { messagesState: s } = j(), a = s.messages.length === 0;
+  return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(_, { mode: "wait", children: n.session && !((i = n.session) != null && i.isOpened) ? /* @__PURE__ */ d(O, { children: [
+    /* @__PURE__ */ r(lo, {}),
     /* @__PURE__ */ r(at, {})
   ] }, "session-closed") : /* @__PURE__ */ d(O, { children: [
-    s.lastAIResMightSolveUserIssue && (t == null ? void 0 : t.enabled) !== !1 && /* @__PURE__ */ r(no, {}),
-    i && e && o !== "below-initial-messages" && /* @__PURE__ */ r("div", { className: "flex items-center flex-row justify-end gap-2 flex-wrap px-2", children: e == null ? void 0 : e.map((c, l) => /* @__PURE__ */ r(
+    s.lastAIResMightSolveUserIssue && (t == null ? void 0 : t.enabled) !== !1 && /* @__PURE__ */ r(so, {}),
+    a && e && o !== "below-initial-messages" && /* @__PURE__ */ r("div", { className: "flex items-center flex-row justify-end gap-2 flex-wrap px-2", children: e == null ? void 0 : e.map((c, l) => /* @__PURE__ */ r(
       Se,
       {
         suggestion: c
       },
       `${c}-${l}`
     )) }),
-    /* @__PURE__ */ r(io, {}),
+    /* @__PURE__ */ r(ao, {}),
     /* @__PURE__ */ r(at, {})
   ] }, "chat-input") }) });
 }
-function co({
+function po({
   isFirstInGroup: e,
   isLastInGroup: o,
   isAloneInGroup: t,
@@ -1632,10 +1640,10 @@ function co({
   const { componentStore: s } = R();
   if (n.type !== "AGENT" && n.type !== "AI") return null;
   if (n.data.action) {
-    const a = s.getComponent(n.data.action.name);
-    if (a)
+    const i = s.getComponent(n.data.action.name);
+    if (i)
       return /* @__PURE__ */ r(
-        a,
+        i,
         {
           ...n,
           id: n.id,
@@ -1645,9 +1653,9 @@ function co({
         }
       );
   }
-  const i = s.getComponent(n.component);
-  return i ? /* @__PURE__ */ r(
-    i,
+  const a = s.getComponent(n.component);
+  return a ? /* @__PURE__ */ r(
+    a,
     {
       ...n,
       id: n.id,
@@ -1656,7 +1664,7 @@ function co({
       isAloneInGroup: t
     }
   ) : /* @__PURE__ */ r(
-    me,
+    ge,
     {
       ...n,
       isFirstInGroup: e,
@@ -1665,18 +1673,18 @@ function co({
     }
   );
 }
-function Ft({
+function Ht({
   messages: e,
   className: o,
   containerClassName: t
 }) {
-  var a, c;
+  var i, c;
   const { timestamps: n } = x();
-  if (!((a = n == null ? void 0 : n.perMessageGroup) != null && a.enabled))
+  if (!((i = n == null ? void 0 : n.perMessageGroup) != null && i.enabled))
     return null;
   const s = (c = e[e.length - 1]) == null ? void 0 : c.timestamp;
   if (!s) return null;
-  const i = (() => {
+  const a = (() => {
     try {
       return new Date(s).toLocaleTimeString([], {
         hour: "2-digit",
@@ -1687,9 +1695,9 @@ function Ft({
       return console.error(l), null;
     }
   })();
-  return i ? /* @__PURE__ */ r("div", { className: t, children: /* @__PURE__ */ r("span", { className: p("text-xs text-muted-foreground", o), children: i }) }) : null;
+  return a ? /* @__PURE__ */ r("div", { className: t, children: /* @__PURE__ */ r("span", { className: p("text-xs text-muted-foreground", o), children: a }) }) : null;
 }
-function ae({
+function le({
   messages: e,
   agent: o,
   suggestedReplies: t
@@ -1701,7 +1709,7 @@ function ae({
       className: p("flex items-end gap-2"),
       children: [
         /* @__PURE__ */ r(J, { content: o == null ? void 0 : o.name, side: "right", align: "end", children: /* @__PURE__ */ r(
-          ge,
+          we,
           {
             ...g("chat/agent_msg_group/root/avatar"),
             agent: o,
@@ -1716,7 +1724,7 @@ function ae({
               className: p("flex items-end gap-2"),
               children: [
                 /* @__PURE__ */ r(J, { content: o == null ? void 0 : o.name, side: "right", align: "end", children: /* @__PURE__ */ r(
-                  ge,
+                  we,
                   {
                     ...g("chat/agent_msg_group/avatar_and_msgs/avatar"),
                     agent: o
@@ -1728,17 +1736,17 @@ function ae({
                     ...g("chat/agent_msg_group/avatar_and_msgs/msgs"),
                     className: p("flex-1 flex flex-col gap-1"),
                     children: [
-                      e.map((n, s, i) => /* @__PURE__ */ r(
-                        co,
+                      e.map((n, s, a) => /* @__PURE__ */ r(
+                        po,
                         {
                           isFirstInGroup: s === 0,
-                          isLastInGroup: s === i.length - 1,
-                          isAloneInGroup: i.length === 1,
+                          isLastInGroup: s === a.length - 1,
+                          isAloneInGroup: a.length === 1,
                           ...n
                         },
                         n.id
                       )),
-                      /* @__PURE__ */ r(Ft, { messages: e })
+                      /* @__PURE__ */ r(Ht, { messages: e })
                     ]
                   }
                 )
@@ -1764,14 +1772,14 @@ function ae({
     }
   );
 }
-function po() {
+function ho() {
   var t, n;
-  const { props: e } = ze();
+  const e = ne();
   if ((t = e.session) != null && t.isOpened || !e.session) return null;
-  const o = (n = e.config.specialComponents) == null ? void 0 : n.onSessionResolved;
+  const o = (n = e.config.customComponents) == null ? void 0 : n.onSessionResolved;
   return o ? /* @__PURE__ */ r(o, { ...e }) : null;
 }
-function ho({
+function mo({
   message: e,
   isFirstInGroup: o,
   isLastInGroup: t,
@@ -1784,7 +1792,7 @@ function ho({
       ...g("chat/user_msg/root"),
       className: "w-5/6 flex flex-col items-end gap-1",
       children: [
-        e.attachments && e.attachments.length > 0 && /* @__PURE__ */ r("div", { className: "w-full flex gap-1 flex-wrap justify-end", children: (s = e.attachments) == null ? void 0 : s.map((i) => /* @__PURE__ */ r(Tt, { attachment: i }, i.id)) }),
+        e.attachments && e.attachments.length > 0 && /* @__PURE__ */ r("div", { className: "w-full flex gap-1 flex-wrap justify-end", children: (s = e.attachments) == null ? void 0 : s.map((a) => /* @__PURE__ */ r(Tt, { attachment: a }, a.id)) }),
         e.content.length > 0 && /* @__PURE__ */ r(
           "div",
           {
@@ -1811,7 +1819,7 @@ function ho({
     }
   );
 }
-function mo({
+function go({
   messages: e
 }) {
   return /* @__PURE__ */ d(
@@ -1821,7 +1829,7 @@ function mo({
       className: p("group", "flex flex-col gap-1 justify-end items-end"),
       children: [
         e.map((o, t, n) => /* @__PURE__ */ r(
-          ho,
+          mo,
           {
             message: o,
             isFirstInGroup: t === 0,
@@ -1830,34 +1838,34 @@ function mo({
           },
           o.id
         )),
-        /* @__PURE__ */ r(Ft, { messages: e, containerClassName: "ms-auto" })
+        /* @__PURE__ */ r(Ht, { messages: e, containerClassName: "ms-auto" })
       ]
     }
   );
 }
-function go(e) {
+function wo(e) {
   const o = [];
   let t = null;
   return e.forEach((n) => {
-    var s, i, a, c, l, h;
+    var s, a, i, c, l, h;
     // Start a new group if the type changes
     (((s = t == null ? void 0 : t[0]) == null ? void 0 : s.type) !== n.type || // Start a new group if the agent changes
-    ((i = t[0]) == null ? void 0 : i.type) === "AGENT" && n.type === "AGENT" && (((a = n.agent) == null ? void 0 : a.id) !== ((c = t[0].agent) == null ? void 0 : c.id) || ((l = n.agent) == null ? void 0 : l.name) !== ((h = t[0].agent) == null ? void 0 : h.name))) && (t = [], o.push(t)), t.push(n);
+    ((a = t[0]) == null ? void 0 : a.type) === "AGENT" && n.type === "AGENT" && (((i = n.agent) == null ? void 0 : i.id) !== ((c = t[0].agent) == null ? void 0 : c.id) || ((l = n.agent) == null ? void 0 : l.name) !== ((h = t[0].agent) == null ? void 0 : h.name))) && (t = [], o.push(t)), t.push(n);
   }), o;
 }
-function wo(e) {
+function uo(e) {
   var o;
   return ((o = e == null ? void 0 : e[0]) == null ? void 0 : o.type) === "USER";
 }
-function uo(e) {
+function fo(e) {
   var o;
   return ((o = e == null ? void 0 : e[0]) == null ? void 0 : o.type) === "AI";
 }
-function fo(e) {
+function vo(e) {
   var o;
   return ((o = e == null ? void 0 : e[0]) == null ? void 0 : o.type) === "AGENT";
 }
-function vo() {
+function xo() {
   const {
     messagesState: { messages: e }
   } = j(), {
@@ -1867,13 +1875,13 @@ function vo() {
     bot: s
   } = x();
   return /* @__PURE__ */ r(te, { children: e.length === 0 && o.length > 0 && /* @__PURE__ */ r(
-    ae,
+    le,
     {
       messages: o.map(
-        ({ message: i }, a) => ({
+        ({ message: a }, i) => ({
           component: "bot_message",
-          data: { message: i },
-          id: `${a}-${i}`,
+          data: { message: a },
+          id: `${i}-${a}`,
           type: "AI",
           timestamp: null
         })
@@ -1883,33 +1891,33 @@ function vo() {
     }
   ) });
 }
-function xo() {
+function bo() {
   const {
     messagesState: { messages: e }
   } = j(), { chatBannerItems: o } = x();
   return !(o != null && o.length) || e.length > 0 && o.every((t) => !t.persistent) ? null : /* @__PURE__ */ r("div", { className: "w-full text-center text-xs", children: o.map(
-    ({ message: t, persistent: n }, s) => e.length > 0 && !n ? null : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(xe, { children: t }) }, `${t}-${s}`)
+    ({ message: t, persistent: n }, s) => e.length > 0 && !n ? null : /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(be, { children: t }) }, `${t}-${s}`)
   ) });
 }
-function bo() {
+function yo() {
   const {
     messagesState: { messages: e }
   } = j(), o = x(), {
     advancedInitialMessages: t = [],
     initialQuestions: n,
     initialQuestionsPosition: s
-  } = o, i = (() => {
-    var a;
-    return t.length ? [] : e.length ? [] : (a = o.initialMessages) != null && a.length ? o.initialMessages : ["Hello, how can I help you?"];
+  } = o, a = (() => {
+    var i;
+    return t.length ? [] : e.length ? [] : (i = o.initialMessages) != null && i.length ? o.initialMessages : ["Hello, how can I help you?"];
   })();
-  return /* @__PURE__ */ r(te, { children: e.length === 0 && i.length > 0 && /* @__PURE__ */ r(
-    ae,
+  return /* @__PURE__ */ r(te, { children: e.length === 0 && a.length > 0 && /* @__PURE__ */ r(
+    le,
     {
-      messages: i.map(
-        (a, c) => ({
+      messages: a.map(
+        (i, c) => ({
           component: "bot_message",
-          data: { message: a },
-          id: `${c}-${a}`,
+          data: { message: i },
+          id: `${c}-${i}`,
           type: "AI",
           timestamp: null
         })
@@ -1919,23 +1927,23 @@ function bo() {
     }
   ) });
 }
-function yo() {
+function ko() {
   var t;
-  const { props: e } = ze(), o = (t = e.config.specialComponents) == null ? void 0 : t.chatBottomComponents;
+  const e = ne(), o = (t = e.config.customComponents) == null ? void 0 : t.chatBottomComponents;
   return o ? /* @__PURE__ */ r("div", { children: o.map(({ key: n, component: s }) => /* @__PURE__ */ r(s, { ...e }, n)) }) : null;
 }
-function ko() {
+function Co() {
   const {
     messagesState: { messages: e }
   } = j(), { isAwaitingBotReply: o } = wt(), { componentStore: t } = R(), n = x(), s = ht(
-    () => go(e),
+    () => wo(e),
     [e]
-  ), i = t.getComponent(
+  ), a = t.getComponent(
     "loading"
-  ), a = ce(null);
+  ), i = de(null);
   function c() {
     setTimeout(() => {
-      const l = a.current;
+      const l = i.current;
       l && (l.scrollTop = l.scrollHeight);
     }, 0);
   }
@@ -1945,24 +1953,24 @@ function ko() {
     "div",
     {
       ...g("chat/msgs/root"),
-      ref: a,
+      ref: i,
       className: "max-h-full scroll-smooth relative flex-1 py-2 px-4 flex flex-col gap-2 overflow-auto",
       children: [
-        /* @__PURE__ */ r(xo, {}),
-        /* @__PURE__ */ r(vo, {}),
         /* @__PURE__ */ r(bo, {}),
+        /* @__PURE__ */ r(xo, {}),
+        /* @__PURE__ */ r(yo, {}),
         s.map((l, h) => {
           var m, C, u, y;
           const b = (m = l == null ? void 0 : l[0]) == null ? void 0 : m.type, w = (C = l[0]) == null ? void 0 : C.id;
           if (!b || !w) return null;
-          if (wo(l))
-            return /* @__PURE__ */ r(mo, { messages: l }, w);
-          if (uo(l)) {
+          if (uo(l))
+            return /* @__PURE__ */ r(go, { messages: l }, w);
+          if (fo(l)) {
             const I = h === s.length - 1;
             if (o && I) return null;
             const S = (u = l[0]) == null ? void 0 : u.agent;
             return /* @__PURE__ */ r(
-              ae,
+              le,
               {
                 messages: l,
                 agent: S
@@ -1970,10 +1978,10 @@ function ko() {
               w
             );
           }
-          if (fo(l)) {
+          if (vo(l)) {
             const I = (y = l[0]) == null ? void 0 : y.agent;
             return /* @__PURE__ */ r(
-              ae,
+              le,
               {
                 messages: l,
                 agent: I
@@ -1983,24 +1991,24 @@ function ko() {
           }
           return null;
         }),
-        o && i && /* @__PURE__ */ r(i, { agent: n.bot }),
-        /* @__PURE__ */ r(yo, {}),
-        /* @__PURE__ */ r(po, {})
+        o && a && /* @__PURE__ */ r(a, { agent: n.bot }),
+        /* @__PURE__ */ r(ko, {}),
+        /* @__PURE__ */ r(ho, {})
       ]
     }
   );
 }
-function Co() {
+function zo() {
   const {
     messagesState: { isInitialFetchLoading: e }
   } = j(), {
     sessionState: { session: o }
-  } = $(), { isCanvasOpen: t } = eo(), { theme: n } = X();
-  Ce({
+  } = $(), { isCanvasOpen: t } = to(), { theme: n } = X();
+  ze({
     width: t ? n.screens.chat.withCanvas.width : n.screens.chat.width,
     height: t ? n.screens.chat.withCanvas.height : n.screens.chat.height
   });
-  const s = ce((o == null ? void 0 : o.id) || "chat").current;
+  const s = de((o == null ? void 0 : o.id) || "chat").current;
   return /* @__PURE__ */ r(
     "div",
     {
@@ -2044,8 +2052,8 @@ function Co() {
                     transitionDuration: n.screens.chat.withCanvas.transitionDuration
                   },
                   children: [
-                    /* @__PURE__ */ r(ko, {}),
-                    /* @__PURE__ */ r(lo, {})
+                    /* @__PURE__ */ r(Co, {}),
+                    /* @__PURE__ */ r(co, {})
                   ]
                 }
               ),
@@ -2061,7 +2069,7 @@ function Co() {
                     transitionTimingFunction: n.screens.chat.withCanvas.transitionTimingFunction,
                     transitionDuration: n.screens.chat.withCanvas.transitionDuration
                   },
-                  children: /* @__PURE__ */ r(to, {})
+                  children: /* @__PURE__ */ r(ro, {})
                 }
               )
             ]
@@ -2072,7 +2080,7 @@ function Co() {
     }
   );
 }
-function zo({
+function No({
   className: e,
   ...o
 }) {
@@ -2084,7 +2092,7 @@ function zo({
     }
   );
 }
-function No({ className: e }) {
+function So({ className: e }) {
   return /* @__PURE__ */ r(
     "svg",
     {
@@ -2104,7 +2112,7 @@ function No({ className: e }) {
     }
   );
 }
-function Ht({ className: e }) {
+function Ft({ className: e }) {
   const { token: o } = x();
   return /* @__PURE__ */ r(
     "div",
@@ -2128,7 +2136,7 @@ function Ht({ className: e }) {
             /* @__PURE__ */ r("span", { children: "Powered by" }),
             /* @__PURE__ */ r("span", { children: " " }),
             /* @__PURE__ */ d("span", { className: "flex items-center gap-[1px]", children: [
-              /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(No, { className: "size-3 inline-block" }) }),
+              /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(So, { className: "size-3 inline-block" }) }),
               /* @__PURE__ */ r("span", { className: "font-semibold", children: "open" })
             ] })
           ]
@@ -2137,14 +2145,14 @@ function Ht({ className: e }) {
     }
   );
 }
-function So({ children: e }) {
+function _o({ children: e }) {
   return /* @__PURE__ */ r("p", { className: "ps-4 text-xs text-muted-foreground/75 uppercase font-semibold tracking-tight", children: e });
 }
 function ct({
   session: e,
   className: o
 }) {
-  const { bot: t } = x(), { toChatScreen: n } = P(), s = e.assignee.kind === "human" ? e.assignee.name || "Support Agent" : (t == null ? void 0 : t.name) || "AI Support Agent", i = e.assignee.kind === "human" ? e.assignee.avatarUrl || "" : (t == null ? void 0 : t.avatar) || "";
+  const { bot: t } = x(), { toChatScreen: n } = P(), s = e.assignee.kind === "human" ? e.assignee.name || "Support Agent" : (t == null ? void 0 : t.name) || "AI Support Agent", a = e.assignee.kind === "human" ? e.assignee.avatarUrl || "" : (t == null ? void 0 : t.avatar) || "";
   return /* @__PURE__ */ d(
     k,
     {
@@ -2157,9 +2165,9 @@ function ct({
       onClick: () => n(e.id),
       children: [
         /* @__PURE__ */ d("div", { className: "flex-1 flex gap-2 items-center", children: [
-          /* @__PURE__ */ r(_, { mode: "wait", children: /* @__PURE__ */ r(f, { snapExit: !0, children: /* @__PURE__ */ d(be, { className: "size-10", children: [
-            /* @__PURE__ */ r(ye, { src: i, alt: "Agent Icon" }),
-            /* @__PURE__ */ r(ke, { children: /* @__PURE__ */ r(zr, { className: "size-4" }) })
+          /* @__PURE__ */ r(_, { mode: "wait", children: /* @__PURE__ */ r(f, { snapExit: !0, children: /* @__PURE__ */ d(ye, { className: "size-10", children: [
+            /* @__PURE__ */ r(ke, { src: a, alt: "Agent Icon" }),
+            /* @__PURE__ */ r(Ce, { children: /* @__PURE__ */ r(zr, { className: "size-4" }) })
           ] }) }) }),
           /* @__PURE__ */ d("div", { className: "flex-1", children: [
             /* @__PURE__ */ r(_, { mode: "wait", children: /* @__PURE__ */ r(f, { snapExit: !0, children: s }, s) }),
@@ -2171,7 +2179,7 @@ function ct({
                 className: "line-clamp-1 overflow-hidden text-ellipsis text-xs text-muted-foreground",
                 children: e.lastMessage
               }
-            ) }, e.lastMessage || "content") : /* @__PURE__ */ r(f, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ r(zo, { className: "h-4 w-full" }) }, "skeleton") })
+            ) }, e.lastMessage || "content") : /* @__PURE__ */ r(f, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ r(No, { className: "h-4 w-full" }) }, "skeleton") })
           ] })
         ] }),
         /* @__PURE__ */ r(Nr, { className: "size-4 text-muted-foreground shrink-0 rtl:-scale-100" })
@@ -2179,12 +2187,12 @@ function ct({
     }
   );
 }
-function _o() {
+function Io() {
   const { t: e } = U(), { toChatScreen: o } = P(), {
     sessionsState: { data: t, isInitialFetchLoading: n },
     openSessions: s,
-    closedSessions: i,
-    canCreateNewSession: a
+    closedSessions: a,
+    canCreateNewSession: i
   } = $();
   return /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col overflow-scroll py-2 px-2", children: /* @__PURE__ */ r(_, { mode: "wait", children: n ? /* @__PURE__ */ r(
     f,
@@ -2210,15 +2218,15 @@ function _o() {
             },
             "open-sessions"
           ),
-          i.length > 0 && /* @__PURE__ */ d(
+          a.length > 0 && /* @__PURE__ */ d(
             f,
             {
               className: "space-y-2",
               delay: 0.2,
               snapExit: !0,
               children: [
-                /* @__PURE__ */ r(So, { children: e("closed_conversations") }),
-                i.map((c) => /* @__PURE__ */ r(
+                /* @__PURE__ */ r(_o, { children: e("closed_conversations") }),
+                a.map((c) => /* @__PURE__ */ r(
                   ct,
                   {
                     session: c,
@@ -2231,7 +2239,7 @@ function _o() {
             "closed-sessions"
           )
         ] }),
-        a && /* @__PURE__ */ r("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ ot(
+        i && /* @__PURE__ */ r("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ ot(
           k,
           {
             ...g("sessions/new_conversation_btn"),
@@ -2260,9 +2268,9 @@ function _o() {
     "sessions"
   ) }) });
 }
-function Io() {
+function To() {
   const { theme: e } = X();
-  return Ce({
+  return ze({
     width: e.screens.sessions.width,
     height: e.screens.sessions.height
   }), /* @__PURE__ */ r(
@@ -2282,13 +2290,13 @@ function Io() {
       },
       children: /* @__PURE__ */ d("div", { className: "size-full flex flex-col", children: [
         /* @__PURE__ */ r(Pt, {}),
-        /* @__PURE__ */ r(_o, {}),
-        /* @__PURE__ */ r(Ht, {})
+        /* @__PURE__ */ r(Io, {}),
+        /* @__PURE__ */ r(Ft, {})
       ] })
     }
   );
 }
-const ie = G.forwardRef(
+const ae = G.forwardRef(
   ({ className: e, type: o, ...t }, n) => {
     const { isSmallScreen: s } = A();
     return /* @__PURE__ */ r(B, { ref: n, children: /* @__PURE__ */ r(
@@ -2308,16 +2316,16 @@ const ie = G.forwardRef(
     ) });
   }
 );
-ie.displayName = "Input";
-function To() {
-  const { contentIframeRef: e } = R(), { inline: o } = x(), t = ce(null);
+ae.displayName = "Input";
+function Mo() {
+  const { contentIframeRef: e } = R(), { inline: o } = x(), t = de(null);
   return re(() => {
     const n = e == null ? void 0 : e.current;
     if (n && t.current) {
       const s = t.current;
-      let i;
-      const a = new ResizeObserver(() => {
-        i = requestAnimationFrame(() => {
+      let a;
+      const i = new ResizeObserver(() => {
+        a = requestAnimationFrame(() => {
           const c = s.offsetHeight;
           n.style.setProperty(
             "--opencx-widget-height",
@@ -2325,31 +2333,31 @@ function To() {
           );
         });
       });
-      return a.observe(s), () => {
-        cancelAnimationFrame(i), a.unobserve(s);
+      return i.observe(s), () => {
+        cancelAnimationFrame(a), i.unobserve(s);
       };
     }
   }, [e, o]), { observedElementRef: t };
 }
-const Mo = he.object({
-  name: he.string().min(2),
-  email: he.string().email()
+const Do = me.object({
+  name: me.string().min(2),
+  email: me.string().email()
 });
-function Do() {
-  var S, M, F, H, W, E, v, z;
+function Ro() {
+  var S, M, H, F, W, E, v, z;
   const {
     widgetCtx: { org: e }
-  } = R(), { setIsOpen: o } = K(), { createUnverifiedContact: t } = Xt(), { isSmallScreen: n } = A(), s = x(), { theme: i } = X(), { t: a } = U(), { observedElementRef: c } = To();
-  Ce({
+  } = R(), { setIsOpen: o } = K(), { createUnverifiedContact: t } = Xt(), { isSmallScreen: n } = A(), s = x(), { theme: a } = X(), { t: i } = U(), { observedElementRef: c } = Mo();
+  ze({
     height: void 0,
-    width: i.screens.welcome.width
+    width: a.screens.welcome.width
   });
   const [l, h] = T(((S = s.prefillUserData) == null ? void 0 : S.name) || ""), [b, w] = T(((M = s.prefillUserData) == null ? void 0 : M.email) || ""), m = (s.extraDataCollectionFields || []).filter(
     (N) => N !== "name" && N !== "email" && !!N
   ), [C, u] = T({}), [y, I] = Rr(
     async (N) => {
       N.preventDefault();
-      const L = Mo.safeParse({ name: l, email: b });
+      const L = Do.safeParse({ name: l, email: b });
       L.success && await t(
         {
           email: L.data.email,
@@ -2369,7 +2377,7 @@ function Do() {
         // Relative to the iframe
         maxWidth: "100vw",
         // Relative to the iframe
-        minHeight: i.screens.welcome.minHeight,
+        minHeight: a.screens.welcome.minHeight,
         height: "100vh",
         // Relative to the iframe
         maxHeight: "100vh",
@@ -2394,18 +2402,18 @@ function Do() {
                   "text-primary-foreground"
                 ),
                 children: [
-                  n && /* @__PURE__ */ r(f, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(k, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(ve, { className: "size-4" }) }) }),
-                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (F = s.assets) != null && F.organizationLogo ? /* @__PURE__ */ r(
+                  n && /* @__PURE__ */ r(f, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(k, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(xe, { className: "size-4" }) }) }),
+                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (H = s.assets) != null && H.organizationLogo ? /* @__PURE__ */ r(
                     "img",
                     {
-                      src: (H = s.assets) == null ? void 0 : H.organizationLogo,
+                      src: (F = s.assets) == null ? void 0 : F.organizationLogo,
                       alt: "Company Logo",
                       className: "h-8 w-auto object-contain"
                     }
                   ) : /* @__PURE__ */ r("h2", { className: "font-bold text-sm", children: e.name }) }),
                   /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ r("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((E = (W = s.textContent) == null ? void 0 : W.welcomeScreen) == null ? void 0 : E.title) || a("welcome_screen_title") }),
-                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((z = (v = s.textContent) == null ? void 0 : v.welcomeScreen) == null ? void 0 : z.description) || a("welcome_screen_description") })
+                    /* @__PURE__ */ r("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((E = (W = s.textContent) == null ? void 0 : W.welcomeScreen) == null ? void 0 : E.title) || i("welcome_screen_title") }),
+                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((z = (v = s.textContent) == null ? void 0 : v.welcomeScreen) == null ? void 0 : z.description) || i("welcome_screen_description") })
                   ] })
                 ]
               }
@@ -2422,35 +2430,35 @@ function Do() {
                 children: [
                   /* @__PURE__ */ d("form", { onSubmit: I, className: "space-y-2", children: [
                     /* @__PURE__ */ r(
-                      ie,
+                      ae,
                       {
                         value: l,
                         onChange: (N) => h(N.target.value),
                         required: !0,
-                        placeholder: a("your_name_placeholder"),
+                        placeholder: i("your_name_placeholder"),
                         name: "name"
                       }
                     ),
                     /* @__PURE__ */ r(
-                      ie,
+                      ae,
                       {
                         required: !0,
                         value: b,
                         onChange: (N) => w(N.target.value),
                         type: "email",
-                        placeholder: a("your_email_placeholder"),
+                        placeholder: i("your_email_placeholder"),
                         name: "email"
                       }
                     ),
                     m.map((N) => /* @__PURE__ */ r(
-                      ie,
+                      ae,
                       {
                         value: C[N],
-                        onChange: (L) => u((ne) => ({
-                          ...ne,
+                        onChange: (L) => u((se) => ({
+                          ...se,
                           [N]: L.target.value
                         })),
-                        placeholder: `${N} (${a("optional")})`
+                        placeholder: `${N} (${i("optional")})`
                       },
                       N
                     )),
@@ -2461,13 +2469,13 @@ function Do() {
                         className: "w-full",
                         size: "lg",
                         children: [
-                          y.loading ? a("start_chat_button_loading") : a("start_chat_button"),
+                          y.loading ? i("start_chat_button_loading") : i("start_chat_button"),
                           /* @__PURE__ */ r(Sr, { className: "size-4 rtl:-scale-100" })
                         ]
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r(Ht, {})
+                  /* @__PURE__ */ r(Ft, {})
                 ]
               }
             )
@@ -2490,7 +2498,7 @@ function Wt() {
             fadeIn: "right",
             className: "size-full",
             snapExit: !0,
-            children: /* @__PURE__ */ r(Do, {})
+            children: /* @__PURE__ */ r(Ro, {})
           },
           e
         );
@@ -2501,7 +2509,7 @@ function Wt() {
             fadeIn: "right",
             className: "size-full",
             snapExit: !0,
-            children: /* @__PURE__ */ r(Io, {})
+            children: /* @__PURE__ */ r(To, {})
           },
           e
         );
@@ -2512,7 +2520,7 @@ function Wt() {
             fadeIn: "right",
             className: "size-full",
             snapExit: !0,
-            children: /* @__PURE__ */ r(Co, {})
+            children: /* @__PURE__ */ r(zo, {})
           },
           e
         );
@@ -2521,7 +2529,7 @@ function Wt() {
     }
   })() }) });
 }
-const Ro = "4.0.30", jo = `<!DOCTYPE html>
+const jo = "4.0.32", Eo = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2540,7 +2548,7 @@ html, body {
 </body>
 </html>`;
 function Bt() {
-  const { isOpen: e } = K(), { contentIframeRef: o } = R(), { cssOverrides: t, inline: n } = x(), { theme: s, cssVars: i, computed: a } = X(), { dir: c } = U();
+  const { isOpen: e } = K(), { contentIframeRef: o } = R(), { cssOverrides: t, inline: n } = x(), { theme: s, cssVars: a, computed: i } = X(), { dir: c } = U();
   return /* @__PURE__ */ r(
     Z.div,
     {
@@ -2564,20 +2572,20 @@ function Bt() {
         bt,
         {
           ref: o,
-          initialContent: jo,
+          initialContent: Eo,
           allowFullScreen: !0,
           title: "OpenCX Live Chat",
           style: {
             // @ts-expect-error this is a valid css variable
-            "--opencx-widget-width": a.minWidth,
-            "--opencx-widget-height": a.minHeight,
-            minWidth: a.minWidth,
+            "--opencx-widget-width": i.minWidth,
+            "--opencx-widget-height": i.minHeight,
+            minWidth: i.minWidth,
             width: "var(--opencx-widget-width)",
-            maxWidth: a.maxWidth,
+            maxWidth: i.maxWidth,
             // Relative to the viewport
-            minHeight: a.minHeight,
+            minHeight: i.minHeight,
             height: "var(--opencx-widget-height)",
-            maxHeight: a.maxHeight,
+            maxHeight: i.maxHeight,
             // Relative to the viewport
             overflow: "hidden",
             /** outline is better than border because of box sizing; the outline wouldn't affect the content inside... the border will mess up how the children's border radius sits with the parent */
@@ -2598,10 +2606,10 @@ function Bt() {
               "div",
               {
                 style: {
-                  ...i,
+                  ...a,
                   zIndex: s.widgetContentContainer.zIndex
                 },
-                "data-version": Ro,
+                "data-version": jo,
                 className: p(
                   "antialiased font-sans size-full overflow-hidden relative text-secondary-foreground isolate"
                 ),
@@ -2622,10 +2630,10 @@ function Bt() {
     }
   );
 }
-function Eo() {
+function Oo() {
   const { theme: e } = X();
   return /* @__PURE__ */ r(
-    le.Content,
+    ce.Content,
     {
       onInteractOutside: (o) => o.preventDefault(),
       forceMount: !0,
@@ -2642,7 +2650,7 @@ function Eo() {
     }
   );
 }
-function Oo({
+function Po({
   className: e,
   style: o
 }) {
@@ -2677,7 +2685,7 @@ function Oo({
     }
   );
 }
-const Po = `<!DOCTYPE html>
+const Ao = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2694,13 +2702,13 @@ html, body {
 <body>
 </body>
 </html>`;
-function Ao() {
-  var i, a;
+function Ho() {
+  var a, i;
   const { isOpen: e } = K(), { cssOverrides: o, assets: t } = x(), { theme: n, cssVars: s } = X();
   return /* @__PURE__ */ d(
     bt,
     {
-      initialContent: Po,
+      initialContent: Ao,
       style: {
         height: `calc(${n.widgetTrigger.size.button}px + ${V.x * 2}px)`,
         width: `calc(${n.widgetTrigger.size.button}px + ${V.y * 2}px)`,
@@ -2730,7 +2738,7 @@ function Ao() {
               justifyContent: "center"
             },
             children: /* @__PURE__ */ r(
-              le.PopoverTrigger,
+              ce.PopoverTrigger,
               {
                 className: p(
                   "font-sans flex items-center justify-center rounded-full"
@@ -2760,7 +2768,7 @@ function Ao() {
                           initial: { rotate: 45 },
                           animate: { rotate: 0 }
                         },
-                        children: (i = t == null ? void 0 : t.widgetTrigger) != null && i.closeIcon ? /* @__PURE__ */ r(
+                        children: (a = t == null ? void 0 : t.widgetTrigger) != null && a.closeIcon ? /* @__PURE__ */ r(
                           "img",
                           {
                             src: t.widgetTrigger.closeIcon,
@@ -2789,7 +2797,7 @@ function Ao() {
                           initial: { rotate: 45 },
                           animate: { rotate: 0 }
                         },
-                        children: (a = t == null ? void 0 : t.widgetTrigger) != null && a.openIcon ? /* @__PURE__ */ r(
+                        children: (i = t == null ? void 0 : t.widgetTrigger) != null && i.openIcon ? /* @__PURE__ */ r(
                           "img",
                           {
                             src: t.widgetTrigger.openIcon,
@@ -2800,7 +2808,7 @@ function Ao() {
                             }
                           }
                         ) : /* @__PURE__ */ r(
-                          Oo,
+                          Po,
                           {
                             style: {
                               width: n.widgetTrigger.size.icon,
@@ -2823,9 +2831,9 @@ function Ao() {
   );
 }
 function Fo() {
-  const { dir: e } = fe();
+  const { dir: e } = ve();
   return /* @__PURE__ */ r(
-    le.Anchor,
+    ce.Anchor,
     {
       style: {
         position: "fixed",
@@ -2836,15 +2844,15 @@ function Fo() {
     }
   );
 }
-function Ho() {
+function Wo() {
   const { isOpen: e, setIsOpen: o } = K();
-  return /* @__PURE__ */ d(le.Root, { open: e, onOpenChange: o, children: [
+  return /* @__PURE__ */ d(ce.Root, { open: e, onOpenChange: o, children: [
     /* @__PURE__ */ r(Fo, {}),
-    /* @__PURE__ */ r(Ao, {}),
-    /* @__PURE__ */ r(Eo, {})
+    /* @__PURE__ */ r(Ho, {}),
+    /* @__PURE__ */ r(Oo, {})
   ] });
 }
-const Wo = [
+const Bo = [
   {
     key: "loading",
     component: Lr
@@ -2855,13 +2863,13 @@ const Wo = [
   },
   {
     key: "bot_message",
-    component: me
+    component: ge
   },
   {
     key: "agent_message",
-    component: me
+    component: ge
   }
-], Bo = {
+], $o = {
   get: async (e) => localStorage.getItem(e),
   set: async (e, o) => {
     localStorage.setItem(e, o);
@@ -2870,7 +2878,7 @@ const Wo = [
     localStorage.removeItem(e);
   }
 };
-function an({
+function ln({
   options: e,
   components: o = [],
   loadingComponent: t
@@ -2878,15 +2886,15 @@ function an({
   return /* @__PURE__ */ r(
     Ut,
     {
-      components: [...Wo, ...o],
+      components: [...Bo, ...o],
       options: e,
-      storage: Bo,
+      storage: $o,
       loadingComponent: t,
-      children: /* @__PURE__ */ r(Vt, { children: e.inline ? /* @__PURE__ */ r(Bt, {}) : /* @__PURE__ */ r(Ho, {}) })
+      children: /* @__PURE__ */ r(Vt, { children: e.inline ? /* @__PURE__ */ r(Bt, {}) : /* @__PURE__ */ r(Wo, {}) })
     }
   );
 }
 export {
-  an as Widget
+  ln as Widget
 };
 //# sourceMappingURL=index.js.map