@opencx/widget-react 4.0.50 → 4.0.51

package/dist/index.js

@@ -3,7 +3,7 @@ import * as he from "@radix-ui/react-popover";
 import * as J from "react";
 import L, { memo as Kt, forwardRef as xt, useState as D, cloneElement as vt, createContext as Qt, useEffect as se, useContext as Jt, useRef as B, useCallback as q, useMemo as bt, createElement as lt } from "react";
 import { useWidget as O, useConfig as C, useSessions as U, useMessages as A, useWidgetRouter as H, useDocumentDir as ye, useWidgetTrigger as V, useModes as yt, useCsat as kt, useUploadFiles as er, useIsAwaitingBotReply as Ct, useContact as zt, WidgetProvider as tr, WidgetTriggerProvider as rr } from "@opencx/widget-react-headless";
-import { X as or, ZoomOut as nr, ZoomIn as sr, RotateCcw as ar, FileText as Nt, CircleDashedIcon as ir, XIcon as ke, SquareXIcon as lr, SquareCheckBigIcon as cr, SquareCheckIcon as dr, ShrinkIcon as pr, Minimize2Icon as hr, MinimizeIcon as mr, Maximize2Icon as ur, MaximizeIcon as gr, ExpandIcon as wr, CircleXIcon as fr, CircleCheckBigIcon as xr, CircleCheckIcon as St, CheckCheckIcon as vr, CheckIcon as br, ChevronLeftIcon as yr, LoaderIcon as kr, ArrowUpIcon as _t, PaperclipIcon as ct, CircleDashed as Cr, AlertCircle as zr, Loader2 as Nr, FileAudio2Icon as Sr, FileVideo2Icon as _r, FileIcon as Ir, UserRoundIcon as Tr, ChevronRightIcon as Mr, SendHorizontal as Dr, ChevronDownIcon as Rr } from "lucide-react";
+import { X as or, ZoomOut as nr, ZoomIn as sr, RotateCcw as ar, FileText as Nt, CircleDashedIcon as ir, XIcon as ke, SquareXIcon as lr, SquareCheckBigIcon as cr, SquareCheckIcon as dr, ShrinkIcon as pr, Minimize2Icon as hr, MinimizeIcon as mr, Maximize2Icon as gr, MaximizeIcon as ur, ExpandIcon as wr, CircleXIcon as fr, CircleCheckBigIcon as xr, CircleCheckIcon as St, CheckCheckIcon as vr, CheckIcon as br, ChevronLeftIcon as yr, LoaderIcon as kr, ArrowUpIcon as _t, PaperclipIcon as ct, CircleDashed as Cr, AlertCircle as zr, Loader2 as Nr, FileAudio2Icon as Sr, FileVideo2Icon as _r, FileIcon as Ir, UserRoundIcon as Tr, ChevronRightIcon as Mr, SendHorizontal as Dr, ChevronDownIcon as Rr } from "lucide-react";
 import { clsx as jr } from "clsx";
 import { twMerge as Pr } from "tailwind-merge";
 import { motion as re, AnimatePresence as T } from "framer-motion";
@@ -19,7 +19,7 @@ import * as ae from "@radix-ui/react-tooltip";
 import dt from "tinycolor2";
 import { useDropzone as Wr } from "react-dropzone";
 import Lr from "react-use/lib/useAsyncFn";
-import { z as ge } from "zod";
+import { z as ue } from "zod";
 function w(e) {
   return { "data-component": e };
 }
@@ -32,35 +32,35 @@ const K = {
 }, Y = Kt(
   xt(
     ({ children: e, className: o, scale: t = 1.02, off: n = !1 }, s) => {
-      const [a, i] = D(!1), [l, c] = D({ x: 0, y: 0 });
+      const [i, a] = D(!1), [l, c] = D({ x: 0, y: 0 });
       if (n || /translate/.test(
         e.props.className || ""
       )) return e;
-      const x = (v) => {
-        var M, u;
-        const { clientX: z, clientY: _ } = v, f = v.currentTarget.getBoundingClientRect(), R = z - (f.left + f.width / 2), P = _ - (f.top + f.height / 2), E = Math.max(
+      const f = (b) => {
+        var M, g;
+        const { clientX: z, clientY: _ } = b, v = b.currentTarget.getBoundingClientRect(), R = z - (v.left + v.width / 2), P = _ - (v.top + v.height / 2), E = Math.max(
           -1,
-          Math.min(1, R / (f.width / 2))
-        ), g = Math.max(
+          Math.min(1, R / (v.width / 2))
+        ), u = Math.max(
           -1,
-          Math.min(1, P / (f.height / 2))
-        ), I = E * K.x, j = g * K.y;
-        c({ x: I, y: j }), (u = (M = e.props).onMouseMove) == null || u.call(M, v);
-      }, y = () => {
-        var v, z;
-        i(!0), (z = (v = e.props).onMouseEnter) == null || z.call(v);
+          Math.min(1, P / (v.height / 2))
+        ), I = E * K.x, j = u * K.y;
+        c({ x: I, y: j }), (g = (M = e.props).onMouseMove) == null || g.call(M, b);
+      }, x = () => {
+        var b, z;
+        a(!0), (z = (b = e.props).onMouseEnter) == null || z.call(b);
       }, m = () => {
-        var v, z;
-        i(!1), c({ x: 0, y: 0 }), (z = (v = e.props).onMouseLeave) == null || z.call(v);
+        var b, z;
+        a(!1), c({ x: 0, y: 0 }), (z = (b = e.props).onMouseLeave) == null || z.call(b);
       }, k = {
-        "--wobble-x": a ? `${l.x}px` : "0px",
-        "--wobble-y": a ? `${l.y}px` : "0px",
+        "--wobble-x": i ? `${l.x}px` : "0px",
+        "--wobble-y": i ? `${l.y}px` : "0px",
         "--scale": 1 - (t - 1)
       };
       return vt(e, {
         ref: s,
-        onMouseMove: x,
-        onMouseEnter: y,
+        onMouseMove: f,
+        onMouseEnter: x,
         onMouseLeave: m,
         style: {
           ...k,
@@ -100,21 +100,21 @@ const $r = 10, Br = (e, o, t) => ({
   left: Yr,
   up: Ur,
   down: Xr
-}, b = xt(
+}, y = xt(
   ({
     fadeIn: e = "down",
     distance: o = $r,
     children: t,
     snapExit: n = !1,
     overrides: s = {},
-    delay: a = 0,
-    ...i
+    delay: i = 0,
+    ...a
   }, l) => {
-    const c = e ? qr[e](o, s, a) : {};
-    return n && c.exit && typeof c.exit == "object" && !Array.isArray(c.exit) && (c.exit.transition = { duration: 0 }), /* @__PURE__ */ r(re.div, { ref: l, ...i, ...c, children: t });
+    const c = e ? qr[e](o, s, i) : {};
+    return n && c.exit && typeof c.exit == "object" && !Array.isArray(c.exit) && (c.exit.transition = { duration: 0 }), /* @__PURE__ */ r(re.div, { ref: l, ...a, ...c, children: t });
   }
 );
-b.displayName = "MotionDiv";
+y.displayName = "MotionDiv";
 const Vr = Or(
   h(
     "inline-flex shrink-0 items-center justify-center gap-2",
@@ -155,7 +155,7 @@ const Vr = Or(
     }
   }
 ), N = J.forwardRef(
-  ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, a) => /* @__PURE__ */ r(Y, { ref: a, children: /* @__PURE__ */ r(
+  ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, i) => /* @__PURE__ */ r(Y, { ref: i, children: /* @__PURE__ */ r(
     n ? Er : "button",
     {
       ...w("ui_lib/btn"),
@@ -168,9 +168,9 @@ const Vr = Or(
 N.displayName = "Button";
 const Dt = Qt(null);
 function Gr({ children: e }) {
-  const [o, t] = D(!1), [n, s] = D(null), a = (l) => {
+  const [o, t] = D(!1), [n, s] = D(null), i = (l) => {
     s(l), t(!0);
-  }, i = () => {
+  }, a = () => {
     t(!1), setTimeout(() => {
       s(null);
     }, 200);
@@ -178,7 +178,7 @@ function Gr({ children: e }) {
   return /* @__PURE__ */ d(
     Dt.Provider,
     {
-      value: { open: a, close: i, isOpen: o, content: n },
+      value: { open: i, close: a, isOpen: o, content: n },
       children: [
         /* @__PURE__ */ r(Zr, {}),
         e
@@ -200,11 +200,11 @@ function me() {
 function Zr() {
   const { contentIframeRef: e } = O(), { isOpen: o, content: t, close: n } = me();
   return se(() => {
-    var a, i;
+    var i, a;
     const s = (l) => {
       l.key === "Escape" && n();
     };
-    return (i = (a = e == null ? void 0 : e.current) == null ? void 0 : a.contentWindow) == null || i.document.addEventListener(
+    return (a = (i = e == null ? void 0 : e.current) == null ? void 0 : i.contentWindow) == null || a.document.addEventListener(
       "keydown",
       s
     ), () => {
@@ -215,7 +215,7 @@ function Zr() {
       );
     };
   }, []), /* @__PURE__ */ r(T, { mode: "wait", children: o && t && /* @__PURE__ */ r(
-    b,
+    y,
     {
       overrides: {
         initial: { y: 0 },
@@ -321,9 +321,9 @@ function ze({
 const pt = 1, ht = 5, le = 0.5, Kr = 2.5;
 function Qr(e, o, t, n) {
   if (!t || !n || o <= 1) return { x: 0, y: 0 };
-  const s = t.getBoundingClientRect(), a = n.offsetWidth, i = n.offsetHeight, l = Math.max(0, (a * o - s.width) / (2 * o)), c = Math.max(
+  const s = t.getBoundingClientRect(), i = n.offsetWidth, a = n.offsetHeight, l = Math.max(0, (i * o - s.width) / (2 * o)), c = Math.max(
     0,
-    (i * o - s.height) / (2 * o)
+    (a * o - s.height) / (2 * o)
   );
   return {
     x: Math.min(l, Math.max(-l, e.x)),
@@ -334,73 +334,73 @@ function At({
   src: e,
   alt: o
 }) {
-  const [t, n] = D(1), [s, a] = D({ x: 0, y: 0 }), [i, l] = D(!1), c = B({ x: 0, y: 0 }), p = B({ x: 0, y: 0 }), x = B(null), y = B(null), m = B(!1), k = (g) => Math.min(ht, Math.max(pt, g)), v = q(() => {
-    n(1), a({ x: 0, y: 0 });
+  const [t, n] = D(1), [s, i] = D({ x: 0, y: 0 }), [a, l] = D(!1), c = B({ x: 0, y: 0 }), p = B({ x: 0, y: 0 }), f = B(null), x = B(null), m = B(!1), k = (u) => Math.min(ht, Math.max(pt, u)), b = q(() => {
+    n(1), i({ x: 0, y: 0 });
   }, []), z = q(() => {
-    n((g) => k(g + le));
+    n((u) => k(u + le));
   }, []), _ = q(() => {
-    n((g) => {
-      const I = k(g - le);
-      return I <= 1 && a({ x: 0, y: 0 }), I;
+    n((u) => {
+      const I = k(u - le);
+      return I <= 1 && i({ x: 0, y: 0 }), I;
     });
   }, []);
-  q((g) => {
-    g.preventDefault(), g.stopPropagation();
-    const I = g.deltaY > 0 ? -le : le;
+  q((u) => {
+    u.preventDefault(), u.stopPropagation();
+    const I = u.deltaY > 0 ? -le : le;
     n((j) => {
       const M = k(j + I);
-      return M <= 1 && a({ x: 0, y: 0 }), M;
+      return M <= 1 && i({ x: 0, y: 0 }), M;
     });
   }, []);
-  const f = q(
-    (g) => {
-      g.preventDefault(), m.current = !1, l(!0), c.current = { x: g.clientX, y: g.clientY }, p.current = { ...s }, g.target.setPointerCapture(g.pointerId);
+  const v = q(
+    (u) => {
+      u.preventDefault(), m.current = !1, l(!0), c.current = { x: u.clientX, y: u.clientY }, p.current = { ...s }, u.target.setPointerCapture(u.pointerId);
     },
     [s]
   ), R = q(
-    (g) => {
-      if (!i) return;
-      const I = g.clientX - c.current.x, j = g.clientY - c.current.y;
+    (u) => {
+      if (!a) return;
+      const I = u.clientX - c.current.x, j = u.clientY - c.current.y;
       if ((Math.abs(I) > 3 || Math.abs(j) > 3) && (m.current = !0), t <= 1) return;
       const M = {
         x: p.current.x + I / t,
         y: p.current.y + j / t
       };
-      a(
-        Qr(M, t, x.current, y.current)
+      i(
+        Qr(M, t, f.current, x.current)
       );
     },
-    [i, t]
+    [a, t]
   ), P = q(() => {
-    const g = m.current;
-    l(!1), !g && n((I) => I > 1 ? (a({ x: 0, y: 0 }), 1) : Kr);
+    const u = m.current;
+    l(!1), !u && n((I) => I > 1 ? (i({ x: 0, y: 0 }), 1) : Kr);
   }, []), E = t > 1;
   return /* @__PURE__ */ d(
     "div",
     {
       className: "relative size-full flex items-center justify-center select-none",
-      onClick: (g) => g.stopPropagation(),
+      onClick: (u) => u.stopPropagation(),
       children: [
         /* @__PURE__ */ r(
           "div",
           {
-            ref: x,
+            ref: f,
             className: h(
               "overflow-hidden max-h-full max-w-full rounded-2xl flex items-center justify-center",
               E && "size-full"
             ),
-            onPointerDown: f,
+            onPointerDown: v,
             onPointerMove: R,
             onPointerUp: P,
             onPointerCancel: P,
             style: {
-              cursor: i ? "grabbing" : E ? "grab" : "zoom-in",
+              cursor: a ? "grabbing" : E ? "grab" : "zoom-in",
               touchAction: "none"
             },
             children: /* @__PURE__ */ r(
               "img",
               {
-                ref: y,
+                ref: x,
                 src: e,
                 alt: o,
                 className: "block max-w-full object-contain pointer-events-none",
@@ -424,7 +424,7 @@ function At({
           /* @__PURE__ */ r(we, { onClick: z, label: "Zoom in", disabled: t >= ht, children: /* @__PURE__ */ r(sr, { className: "size-3.5" }) }),
           E && /* @__PURE__ */ d(Q, { children: [
             /* @__PURE__ */ r("div", { className: "w-px h-4 bg-white/30 mx-0.5" }),
-            /* @__PURE__ */ r(we, { onClick: v, label: "Reset zoom", children: /* @__PURE__ */ r(ar, { className: "size-3.5" }) })
+            /* @__PURE__ */ r(we, { onClick: b, label: "Reset zoom", children: /* @__PURE__ */ r(ar, { className: "size-3.5" }) })
           ] })
         ] })
       ]
@@ -449,14 +449,14 @@ function we({
   );
 }
 function Ft({ attachment: e }) {
-  const { name: o, size: t, type: n, url: s } = e, a = n.startsWith("image/"), i = n.startsWith("video/"), l = n.startsWith("audio/"), c = n === "application/pdf";
+  const { name: o, size: t, type: n, url: s } = e, i = n.startsWith("image/"), a = n.startsWith("video/"), l = n.startsWith("audio/"), c = n === "application/pdf";
   return l ? /* @__PURE__ */ r(Y, { 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."
-  ] }) }) }) : i ? /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ d("video", { controls: !0, children: [
+  ] }) }) }) : a ? /* @__PURE__ */ r(Y, { 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."
-  ] }) }) }) : a ? /* @__PURE__ */ r(
+  ] }) }) }) : i ? /* @__PURE__ */ r(
     ze,
     {
       trigger: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ r("img", { src: s, className: "object-cover size-16", alt: o }) }) }) }),
@@ -550,16 +550,16 @@ function Ne({
       remarkPlugins: [It],
       rehypePlugins: [Tt],
       components: {
-        a: ({ children: s, ...a }) => /* @__PURE__ */ r("a", { target: a.target || n || "_top", ...a, children: s }),
-        img: ({ src: s, alt: a, ...i }) => s ? /* @__PURE__ */ r(
+        a: ({ children: s, ...i }) => /* @__PURE__ */ r("a", { target: i.target || n || "_top", ...i, children: s }),
+        img: ({ src: s, alt: i, ...a }) => s ? /* @__PURE__ */ r(
           ze,
           {
             trigger: /* @__PURE__ */ r(
               "img",
               {
                 src: s,
-                alt: a,
-                ...i,
+                alt: i,
+                ...a,
                 className: "cursor-pointer rounded-xl"
               }
             ),
@@ -568,11 +568,11 @@ function Ne({
               {
                 className: "size-full max-w-full rounded-3xl flex items-center justify-center bg-transparent border-none gap-0",
                 withClose: !0,
-                children: /* @__PURE__ */ r(At, { src: s, alt: a })
+                children: /* @__PURE__ */ r(At, { src: s, alt: i })
               }
             )
           }
-        ) : /* @__PURE__ */ r("img", { src: s, alt: a, ...i })
+        ) : /* @__PURE__ */ r("img", { src: s, alt: i, ...a })
       },
       children: e
     }
@@ -610,14 +610,14 @@ function fe(e) {
     id: t,
     type: n,
     attachments: s,
-    isFirstInGroup: a,
-    isLastInGroup: i,
+    isFirstInGroup: i,
+    isLastInGroup: a,
     isAloneInGroup: l,
     dataComponentNames: c,
     classNames: p
   } = e;
   if (n !== "AI" && n !== "AGENT") return null;
-  const { message: x, variant: y = "default" } = o;
+  const { message: f, variant: x = "default" } = o;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -628,15 +628,15 @@ function fe(e) {
       ),
       children: [
         s && s.length > 0 && /* @__PURE__ */ r("div", { className: "w-full gap-1 flex flex-row flex-wrap items-center justify-start", children: s == null ? void 0 : s.map((m) => /* @__PURE__ */ r(Ft, { attachment: m }, m.id)) }),
-        x.length > 0 && /* @__PURE__ */ d("div", { className: "flex flex-row gap-2", children: [
+        f.length > 0 && /* @__PURE__ */ d("div", { className: "flex flex-row gap-2", children: [
           /* @__PURE__ */ r(
             "div",
             {
               ...w((c == null ? void 0 : c.message) ?? "chat/agent_msg/msg"),
-              "data-first": a,
-              "data-last": i,
+              "data-first": i,
+              "data-last": a,
               "data-alone": l,
-              "data-variant": y,
+              "data-variant": x,
               className: h(
                 "transition-all",
                 "w-fit py-3 px-4 rounded-3xl bg-secondary text-secondary-foreground",
@@ -645,14 +645,14 @@ function fe(e) {
                 // `[word-break:break-word]` is deprecated but works in the browser, while `break-words` which is `[overflow-wrap: break-word]` does not work
                 // No need to add "whitespace-pre-wrap" in the agent or bot message because it is markup and content appear on separate lines as expected
                 // Adding "whitespace-pre-wrap" will result in unnecessarily huge line breaks
-                y === "error" && "bg-destructive/15 text-destructive",
+                x === "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
-                a && !l && "rounded-bl-md",
-                i && !l && "rounded-tl-md",
-                !a && !i && !l && "rounded-l-md",
+                i && !l && "rounded-bl-md",
+                a && !l && "rounded-tl-md",
+                !i && !a && !l && "rounded-l-md",
                 p == null ? void 0 : p.message
               ),
-              children: /* @__PURE__ */ r(Ne, { messageType: n, messageId: t, children: x })
+              children: /* @__PURE__ */ r(Ne, { messageType: n, messageId: t, children: f })
             }
           ),
           /* @__PURE__ */ r(Jr, { currentMessage: e })
@@ -710,7 +710,7 @@ function xe({
 }
 function to({ agent: e }) {
   return /* @__PURE__ */ r(T, { children: /* @__PURE__ */ d(
-    b,
+    y,
     {
       ...w("chat/bot_loading/root"),
       className: "flex flex-row items-end w-full gap-2 animate-pulse",
@@ -786,17 +786,17 @@ const ce = {
   transitionDuration: "1000ms"
 };
 function G() {
-  var y, m, k, v, z, _, f, R, P, E, g, I, j, M, u, S, ie, Re, je, Pe, Ee, Oe, Ae, Fe, He, We, Le, $e, Be, Ye, Ue, Xe, qe, Ve, Ge, Ze, Ke, Qe, Je, et, tt, rt, ot, nt, st, at, it;
-  const { dir: e } = ye(), { isSmallScreen: o } = $(), { theme: t, inline: n } = C(), s = (X) => n ? "100%" : X, a = (X, ue) => o ? `100dv${X}` : ue, i = (X, ue) => s(a(X, ue)), l = {
-    zIndex: ((y = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : y.zIndex) ?? 1e7,
+  var x, m, k, b, z, _, v, R, P, E, u, I, j, M, g, S, ie, Re, je, Pe, Ee, Oe, Ae, Fe, He, We, Le, $e, Be, Ye, Ue, Xe, qe, Ve, Ge, Ze, Ke, Qe, Je, et, tt, rt, ot, nt, st, at, it;
+  const { dir: e } = ye(), { isSmallScreen: o } = $(), { theme: t, inline: n } = C(), s = (X) => n ? "100%" : X, i = (X, ge) => o ? `100dv${X}` : ge, a = (X, ge) => s(i(X, ge)), l = {
+    zIndex: ((x = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : x.zIndex) ?? 1e7,
     offset: {
       bottom: ((k = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.offset) == null ? void 0 : k.bottom) ?? 20,
-      right: ((z = (v = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : v.offset) == null ? void 0 : z.right) ?? (e === "ltr" ? 20 : "initial"),
-      left: ((f = (_ = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : _.offset) == null ? void 0 : f.left) ?? (e === "rtl" ? 20 : "initial")
+      right: ((z = (b = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : b.offset) == null ? void 0 : z.right) ?? (e === "ltr" ? 20 : "initial"),
+      left: ((v = (_ = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : _.offset) == null ? void 0 : v.left) ?? (e === "rtl" ? 20 : "initial")
     },
     size: {
       button: ((P = (R = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : R.size) == null ? void 0 : P.button) ?? 48,
-      icon: ((g = (E = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : E.size) == null ? void 0 : g.icon) ?? 24
+      icon: ((u = (E = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : E.size) == null ? void 0 : u.icon) ?? 24
     }
   }, c = (() => {
     const X = e === "ltr" ? l.offset.right : l.offset.left;
@@ -810,7 +810,7 @@ function G() {
       zIndex: ((j = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : j.zIndex) ?? l.zIndex + 1,
       outline: ((M = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : M.outline) ?? "none",
       // was: '1px solid'
-      outlineColor: ((u = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : u.outlineColor) ?? "hsl(0 0% 50% / .5)",
+      outlineColor: ((g = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : g.outlineColor) ?? "hsl(0 0% 50% / .5)",
       boxShadow: ((S = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : S.boxShadow) ?? "0 0px 100px 0px rgb(0 0 0 / 0.25)",
       transitionProperty: ((ie = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : ie.transitionProperty) ?? "all",
       transitionTimingFunction: ((Re = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Re.transitionTimingFunction) ?? ce.transitionTimingFunction,
@@ -822,26 +822,26 @@ function G() {
     },
     screens: {
       welcome: {
-        width: i("w", ((He = (Fe = t == null ? void 0 : t.screens) == null ? void 0 : Fe.welcome) == null ? void 0 : He.width) ?? "400px"),
+        width: a("w", ((He = (Fe = t == null ? void 0 : t.screens) == null ? void 0 : Fe.welcome) == null ? void 0 : He.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: i(
+        minHeight: a(
           "h",
           ((Le = (We = t == null ? void 0 : t.screens) == null ? void 0 : We.welcome) == null ? void 0 : Le.minHeight) ?? "1px"
         )
       },
       sessions: {
-        width: i("w", ((Be = ($e = t == null ? void 0 : t.screens) == null ? void 0 : $e.sessions) == null ? void 0 : Be.width) ?? "450px"),
-        height: i("h", ((Ue = (Ye = t == null ? void 0 : t.screens) == null ? void 0 : Ye.sessions) == null ? void 0 : Ue.height) ?? "600px")
+        width: a("w", ((Be = ($e = t == null ? void 0 : t.screens) == null ? void 0 : $e.sessions) == null ? void 0 : Be.width) ?? "450px"),
+        height: a("h", ((Ue = (Ye = t == null ? void 0 : t.screens) == null ? void 0 : Ye.sessions) == null ? void 0 : Ue.height) ?? "600px")
       },
       chat: {
-        width: i("w", ((qe = (Xe = t == null ? void 0 : t.screens) == null ? void 0 : Xe.chat) == null ? void 0 : qe.width) ?? "525px"),
-        height: i("h", ((Ge = (Ve = t == null ? void 0 : t.screens) == null ? void 0 : Ve.chat) == null ? void 0 : Ge.height) ?? "700px"),
+        width: a("w", ((qe = (Xe = t == null ? void 0 : t.screens) == null ? void 0 : Xe.chat) == null ? void 0 : qe.width) ?? "525px"),
+        height: a("h", ((Ge = (Ve = t == null ? void 0 : t.screens) == null ? void 0 : Ve.chat) == null ? void 0 : Ge.height) ?? "700px"),
         withCanvas: {
-          width: i(
+          width: a(
             "w",
             ((Qe = (Ke = (Ze = t == null ? void 0 : t.screens) == null ? void 0 : Ze.chat) == null ? void 0 : Ke.withCanvas) == null ? void 0 : Qe.width) ?? "min(1050px, 100vw)"
           ),
-          height: i(
+          height: a(
             "h",
             ((tt = (et = (Je = t == null ? void 0 : t.screens) == null ? void 0 : Je.chat) == null ? void 0 : et.withCanvas) == null ? void 0 : tt.height) ?? "min(800px, 100vh)"
           ),
@@ -850,11 +850,11 @@ function G() {
         }
       }
     }
-  }, x = {
+  }, f = {
     // 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: i(
+    maxHeight: a(
       "h",
       `calc(
         100vh 
@@ -864,14 +864,14 @@ function G() {
       )`
     ),
     // Subtract the offset.right twice so that it adds a bit of padding to the left
-    maxWidth: i(
+    maxWidth: a(
       "w",
       `calc(
         100vw 
         - ${c * 2}px
       )`
     ),
-    minHeight: i(
+    minHeight: a(
       "h",
       `min(
         ${p.screens.welcome.minHeight}, 
@@ -879,7 +879,7 @@ function G() {
         ${p.screens.chat.height}
       )`
     ),
-    minWidth: i(
+    minWidth: a(
       "w",
       `min(
         ${p.screens.welcome.width}, 
@@ -890,7 +890,7 @@ function G() {
   };
   return {
     theme: p,
-    computed: x,
+    computed: f,
     cssVars: so({
       palette: p.palette,
       primary: p.primaryColor
@@ -1011,7 +1011,7 @@ function Te({
     e && n(e), o && s(o);
   }, [t, o, e, n, s]);
 }
-const ut = ir;
+const gt = ir;
 function ne({
   name: e,
   className: o
@@ -1031,9 +1031,9 @@ function ne({
       case "Expand":
         return wr;
       case "Maximize":
-        return gr;
-      case "Maximize2":
         return ur;
+      case "Maximize2":
+        return gr;
       case "Minimize":
         return mr;
       case "Minimize2":
@@ -1049,9 +1049,9 @@ function ne({
       case "X":
         return ke;
       case void 0:
-        return ut;
+        return gt;
       default:
-        return F(e, ne.name), ut;
+        return F(e, ne.name), gt;
     }
   })();
   return /* @__PURE__ */ r(t, { className: h("size-4", o) });
@@ -1073,12 +1073,12 @@ function Me() {
     routerState: { screen: o }
   } = H(), { textContent: t } = C();
   return (() => {
-    var s, a;
+    var s, i;
     switch (o) {
       case "chat":
         return (s = t == null ? void 0 : t.chatScreen) == null ? void 0 : s.headerTitle;
       case "sessions":
-        return (a = t == null ? void 0 : t.sessionsScreen) == null ? void 0 : a.headerTitle;
+        return (i = t == null ? void 0 : t.sessionsScreen) == null ? void 0 : i.headerTitle;
       case "welcome":
         return;
       default:
@@ -1139,30 +1139,30 @@ function ve({
 }) {
   const [o, t] = D(!1), {
     routerState: { screen: n }
-  } = H(), { isSmallScreen: s } = $(), { theme: a } = G(), { setWidth: i, setHeight: l } = Bt();
+  } = H(), { isSmallScreen: s } = $(), { theme: i } = G(), { setWidth: a, setHeight: l } = Bt();
   if (n !== "chat" && n !== "sessions") return null;
   const c = (() => {
     switch (n) {
       case "chat":
-        return a.screens.chat.height;
+        return i.screens.chat.height;
       case "sessions":
-        return a.screens.sessions.height;
+        return i.screens.sessions.height;
       default:
-        return F(n, ve.name), a.screens.chat.height;
+        return F(n, ve.name), i.screens.chat.height;
     }
   })(), p = (() => {
     switch (n) {
       case "chat":
-        return a.screens.chat.width;
+        return i.screens.chat.width;
       case "sessions":
-        return a.screens.sessions.width;
+        return i.screens.sessions.width;
       default:
-        return F(n, ve.name), a.screens.chat.width;
+        return F(n, ve.name), i.screens.chat.width;
     }
-  })(), x = () => {
-    t((y) => {
-      const m = !y;
-      return l(m ? "100vh" : c), i(m ? `max(40vw, ${p})` : p), m;
+  })(), f = () => {
+    t((x) => {
+      const m = !x;
+      return l(m ? "100vh" : c), a(m ? `max(40vw, ${p})` : p), m;
     });
   };
   return s && e.hideOnSmallScreen || !s && e.hideOnLargeScreen ? null : /* @__PURE__ */ r(
@@ -1171,7 +1171,7 @@ function ve({
       variant: "ghost",
       size: "fit",
       className: "rounded-full",
-      onClick: x,
+      onClick: f,
       children: /* @__PURE__ */ r(
         ne,
         {
@@ -1185,9 +1185,9 @@ function Yt({
   button: e
 }) {
   var z, _;
-  const { close: o } = me(), { widgetCtx: t } = O(), { setIsOpen: n } = V(), { resolveSession: s, sessionState: a } = U(), { isSmallScreen: i } = $(), l = !a.session, c = ((z = a.session) == null ? void 0 : z.isOpened) === !1, p = e.onResolved || "stay-in-chat", x = e.behaviorBeforeSessionCreation || "disabled", y = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || l && x === "disabled" || c && y === "disabled"), k = async () => {
-    const { success: f, error: R } = await s();
-    if (o(), !f) return console.error(R);
+  const { close: o } = me(), { widgetCtx: t } = O(), { setIsOpen: n } = V(), { resolveSession: s, sessionState: i } = U(), { isSmallScreen: a } = $(), l = !i.session, c = ((z = i.session) == null ? void 0 : z.isOpened) === !1, p = e.onResolved || "stay-in-chat", f = e.behaviorBeforeSessionCreation || "disabled", x = e.behaviorIfSessionIsResolved || "disabled", m = !!(i.isResolvingSession || l && f === "disabled" || c && x === "disabled"), k = async () => {
+    const { success: v, error: R } = await s();
+    if (o(), !v) return console.error(R);
     switch (p) {
       case "stay-in-chat":
         return;
@@ -1204,9 +1204,9 @@ function Yt({
         F(p, Yt.name);
         break;
     }
-  }, v = () => {
+  }, b = () => {
     if (l)
-      switch (x) {
+      switch (f) {
         case "disabled":
           return;
         case "close-widget":
@@ -1214,12 +1214,12 @@ function Yt({
           break;
         default:
           F(
-            x,
-            v.name
+            f,
+            b.name
           );
       }
     if (c)
-      switch (y) {
+      switch (x) {
         case "disabled":
           return;
         case "close-widget":
@@ -1235,12 +1235,12 @@ function Yt({
           break;
         default:
           F(
-            y,
-            v.name
+            x,
+            b.name
           );
       }
   };
-  return i && e.hideOnSmallScreen || !i && e.hideOnLargeScreen ? null : ((_ = e.confirmation) == null ? void 0 : _.type) === "modal" && !c && !l ? /* @__PURE__ */ r(
+  return a && e.hideOnSmallScreen || !a && e.hideOnLargeScreen ? null : ((_ = e.confirmation) == null ? void 0 : _.type) === "modal" && !c && !l ? /* @__PURE__ */ r(
     ze,
     {
       trigger: /* @__PURE__ */ r(
@@ -1262,7 +1262,7 @@ function Yt({
             {
               variant: "secondary",
               onClick: o,
-              disabled: a.isResolvingSession,
+              disabled: i.isResolvingSession,
               children: e.confirmation.cancelButtonText || "No"
             }
           ),
@@ -1271,7 +1271,7 @@ function Yt({
             {
               variant: "destructive",
               onClick: k,
-              disabled: a.isResolvingSession,
+              disabled: i.isResolvingSession,
               children: e.confirmation.confirmButtonText || "Yes"
             }
           )
@@ -1284,7 +1284,7 @@ function Yt({
       variant: "ghost",
       size: "fit",
       className: "rounded-full",
-      onClick: c || l ? v : k,
+      onClick: c || l ? b : k,
       disabled: m,
       children: /* @__PURE__ */ r(ne, { name: e.icon })
     }
@@ -1349,7 +1349,7 @@ function Ut() {
 function Xt({ className: e }) {
   return /* @__PURE__ */ r(kr, { className: h("size-4 animate-spin", e) });
 }
-function uo() {
+function go() {
   const {
     messagesState: { isInitialFetchLoading: e }
   } = A(), { isSmallScreen: o } = $(), { activeMode: t, Component: n } = yt();
@@ -1357,14 +1357,14 @@ function uo() {
     isCanvasOpen: !e && !o && !!t && !!n
   };
 }
-function go() {
-  const e = te(), { activeMode: o, Component: t } = yt(), { sendMessage: n } = A(), { createStateCheckpoint: s } = U(), [a, i] = D(!1), l = async (c) => {
+function uo() {
+  const e = te(), { activeMode: o, Component: t } = yt(), { sendMessage: n } = A(), { createStateCheckpoint: s } = U(), [i, a] = D(!1), l = async (c) => {
     try {
-      i(!0), await n(c);
+      a(!0), await n(c);
     } catch (p) {
       console.error(p);
     } finally {
-      i(!1);
+      a(!1);
     }
   };
   return !o || !t ? null : /* @__PURE__ */ r(
@@ -1374,7 +1374,7 @@ function go() {
       mode: o,
       createStateCheckpoint: s,
       sendMessage: l,
-      isSendingMessage: a
+      isSendingMessage: i
     }
   );
 }
@@ -1382,7 +1382,7 @@ const W = L.forwardRef(
   (e, o) => {
     var t, n, s;
     return /* @__PURE__ */ r(
-      b,
+      y,
       {
         ...e,
         ref: o,
@@ -1430,17 +1430,17 @@ function fo() {
     isCsatRequested: t,
     isCsatSubmitted: n,
     submittedScore: s,
-    submittedFeedback: a
-  } = kt(), [i, l] = D(null), [c, p] = D(null), x = (m) => {
+    submittedFeedback: i
+  } = kt(), [a, l] = D(null), [c, p] = D(null), f = (m) => {
     l((k) => k === m ? null : m);
-  }, y = () => {
-    i && o({
-      score: i,
+  }, x = () => {
+    a && o({
+      score: a,
       feedback: c || 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(T, { mode: "wait", children: t && !i ? /* @__PURE__ */ r(W, { 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(W, { 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(T, { mode: "wait", children: t && !a ? /* @__PURE__ */ r(W, { 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(W, { 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",
       {
@@ -1452,26 +1452,26 @@ function fo() {
         children: wo.map((m) => /* @__PURE__ */ r(
           N,
           {
-            variant: m.value === i ? "secondary" : "ghost",
+            variant: m.value === a ? "secondary" : "ghost",
             size: "selfless",
             className: h(
               "transition-all overflow-hidden",
               "text-2xl size-8 rounded-full",
               "opacity-35",
               "hover:opacity-100",
-              !i && "opacity-100",
-              m.value === i && "opacity-100",
+              !a && "opacity-100",
+              m.value === a && "opacity-100",
               n && m.value !== s && "opacity-0 size-0",
               n && m.value === s && "opacity-100 size-fit text-4xl"
             ),
-            onClick: t ? () => x(m.value) : void 0,
+            onClick: t ? () => f(m.value) : void 0,
             children: m.emoji
           },
           m.value
         ))
       }
     ),
-    /* @__PURE__ */ r(T, { mode: "wait", children: (i || s) && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ d("div", { className: "pb-2 px-2 flex items-end", children: [
+    /* @__PURE__ */ r(T, { mode: "wait", children: (a || s) && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ d("div", { className: "pb-2 px-2 flex items-end", children: [
       /* @__PURE__ */ r(
         "textarea",
         {
@@ -1486,7 +1486,7 @@ function fo() {
             e ? "text-[16px]" : "text-sm",
             n && "text-center"
           ),
-          value: n ? a || "" : c || "",
+          value: n ? i || "" : c || "",
           onChange: t ? (m) => p(m.target.value) : void 0,
           readOnly: n,
           placeholder: t ? "Tell us more... (optional)" : void 0
@@ -1496,8 +1496,8 @@ function fo() {
         N,
         {
           size: "fit",
-          onClick: y,
-          disabled: !i,
+          onClick: x,
+          disabled: !a,
           className: h(
             "transition-all overflow-hidden",
             "rounded-full size-8 flex items-center justify-center p-0",
@@ -1528,8 +1528,8 @@ function De({
   ...t
 }) {
   const { sendMessage: n } = A(), s = () => {
-    const a = e.trim();
-    a && n({ content: a });
+    const i = e.trim();
+    i && n({ content: i });
   };
   return /* @__PURE__ */ r(
     N,
@@ -1561,23 +1561,23 @@ function xo() {
     }
   );
 }
-function gt() {
+function ut() {
   const { sessionState: e } = U(), { chatFooterItems: o } = C(), t = !!e.session && !e.session.isOpened, n = !t;
-  return /* @__PURE__ */ r(T, { mode: "wait", children: o == null ? void 0 : o.map((s, a) => s.showWhenSessionIsOpen === !1 && n || s.showWhenSessionIsResolved === !1 && t ? null : /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r("div", { className: "pb-2 text-center text-xs", children: /* @__PURE__ */ r(Ne, { children: s.message }) }) }, `${s.message}-${a}`)) });
+  return /* @__PURE__ */ r(T, { mode: "wait", children: o == null ? void 0 : o.map((s, i) => s.showWhenSessionIsOpen === !1 && n || s.showWhenSessionIsResolved === !1 && t ? null : /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r("div", { className: "pb-2 text-center text-xs", children: /* @__PURE__ */ r(Ne, { children: s.message }) }) }, `${s.message}-${i}`)) });
 }
 function vo({
   file: { status: e, file: o, error: t },
   onCancel: n
 }) {
-  const [s, a] = D(
+  const [s, i] = D(
     null
   );
   se(() => {
     if (!o.type.startsWith("image/")) return;
     const c = new FileReader();
-    return c.onload = () => a(c.result), c.onerror = () => console.error("Error reading file"), c.readAsDataURL(o), () => c.abort();
+    return c.onload = () => i(c.result), c.onerror = () => console.error("Error reading file"), c.readAsDataURL(o), () => c.abort();
   }, [o]);
-  const i = () => {
+  const a = () => {
     switch (e) {
       case "uploading":
         return /* @__PURE__ */ r(Nr, { className: "size-4 animate-spin" });
@@ -1615,7 +1615,7 @@ function vo({
             "flex items-center justify-center shrink-0"
           ),
           children: [
-            /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center", children: i() }),
+            /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center", children: a() }),
             /* @__PURE__ */ r(
               "button",
               {
@@ -1638,21 +1638,21 @@ function vo({
 }
 function bo() {
   var M;
-  const { isSmallScreen: e } = $(), o = B(null), { sendMessage: t } = A(), { sessionState: n } = U(), { disableSendingWhenAwaitingAIReply: s } = C(), { t: a } = Z(), [i, l] = D(""), {
+  const { isSmallScreen: e } = $(), o = B(null), { sendMessage: t } = A(), { sessionState: n } = U(), { disableSendingWhenAwaitingAIReply: s } = C(), { t: i } = Z(), [a, l] = D(""), {
     allFiles: c,
     emptyTheFiles: p,
-    handleCancelUpload: x,
-    appendFiles: y,
+    handleCancelUpload: f,
+    appendFiles: x,
     isUploading: m,
     successFiles: k
-  } = er(), v = !!((M = n.session) != null && M.isHandedOff), { isAwaitingBotReply: z } = Ct(), _ = s !== !1 && z, f = (u) => {
-    y(u);
-  }, R = !i.trim() && k.length === 0, P = async () => {
+  } = er(), b = !!((M = n.session) != null && M.isHandedOff), { isAwaitingBotReply: z } = Ct(), _ = s !== !1 && z, v = (g) => {
+    x(g);
+  }, R = !a.trim() && k.length === 0, P = async () => {
     if (_ || R) return;
     m && console.info("please wait for the file(s) to upload");
-    const u = i.trim();
+    const g = a.trim();
     t({
-      content: u,
+      content: g,
       attachments: k.flatMap(
         (S) => S.fileUrl ? [
           {
@@ -1667,16 +1667,16 @@ function bo() {
     }), l(""), p();
   }, {
     getRootProps: E,
-    getInputProps: g,
+    getInputProps: u,
     open: I
   } = Wr({
-    onDrop: f,
+    onDrop: v,
     noClick: !0,
     onDropRejected() {
       console.error("unsupported file type, or the file is too large");
     },
     maxSize: 5 * 1024 * 1024,
-    accept: v ? {
+    accept: b ? {
       "text/*": [".txt"],
       "image/*": [".png", ".jpg", ".jpeg", ".gif"],
       "application/pdf": [".pdf"]
@@ -1687,9 +1687,9 @@ function bo() {
       "image/webp": [".webp"],
       "application/pdf": [".pdf"]
     }
-  }), j = (u) => {
-    const S = u.clipboardData;
-    S && S.files.length > 0 && f(Array.from(S.files));
+  }), j = (g) => {
+    const S = g.clipboardData;
+    S && S.files.length > 0 && v(Array.from(S.files));
   };
   return /* @__PURE__ */ d(
     "div",
@@ -1698,7 +1698,7 @@ function bo() {
       className: "p-2 relative space-y-1",
       ...E(),
       children: [
-        /* @__PURE__ */ r("input", { ...g() }),
+        /* @__PURE__ */ r("input", { ...u() }),
         /* @__PURE__ */ d(
           "div",
           {
@@ -1722,13 +1722,13 @@ function bo() {
                       {
                         ...w("chat/input_box/attachments_container"),
                         className: "flex items-center gap-1",
-                        children: /* @__PURE__ */ r(T, { mode: "popLayout", children: c.map((u) => /* @__PURE__ */ r(b, { snapExit: !0, children: /* @__PURE__ */ r(
+                        children: /* @__PURE__ */ r(T, { mode: "popLayout", children: c.map((g) => /* @__PURE__ */ r(y, { snapExit: !0, children: /* @__PURE__ */ r(
                           vo,
                           {
-                            onCancel: () => x(u.id),
-                            file: u
+                            onCancel: () => f(g.id),
+                            file: g
                           }
-                        ) }, u.id)) })
+                        ) }, g.id)) })
                       }
                     ),
                     /* @__PURE__ */ r(
@@ -1738,7 +1738,7 @@ function bo() {
                         onPaste: j,
                         ref: o,
                         id: "chat-input",
-                        value: i,
+                        value: a,
                         rows: 3,
                         className: h(
                           /** Match the border radius of the container */
@@ -1751,11 +1751,11 @@ function bo() {
                           // 16px on mobiles prevents auto-zoom on the input when focused
                           e ? "text-[16px]" : "text-sm"
                         ),
-                        onChange: (u) => l(u.target.value),
-                        onKeyDown: async (u) => {
-                          u.key === "Enter" && !u.shiftKey && (u.preventDefault(), P());
+                        onChange: (g) => l(g.target.value),
+                        onKeyDown: async (g) => {
+                          g.key === "Enter" && !g.shiftKey && (g.preventDefault(), P());
                         },
-                        placeholder: a("write_a_message_placeholder")
+                        placeholder: i("write_a_message_placeholder")
                       }
                     )
                   ]
@@ -1777,7 +1777,7 @@ function bo() {
                         className: h(
                           "rounded-full size-8 flex items-center justify-center p-0 overflow-hidden"
                         ),
-                        children: /* @__PURE__ */ r(T, { mode: "wait", children: _ ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(ct, { className: "size-4 opacity-50" }) }, "paper-clip-disabled") : /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(ct, { className: "size-4" }) }, "paper-clip") })
+                        children: /* @__PURE__ */ r(T, { mode: "wait", children: _ ? /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(ct, { className: "size-4 opacity-50" }) }, "paper-clip-disabled") : /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(ct, { className: "size-4" }) }, "paper-clip") })
                       }
                     )
                   }
@@ -1789,7 +1789,7 @@ function bo() {
                     onClick: P,
                     disabled: _ || m || R,
                     className: "rounded-full size-8 flex items-center justify-center p-0",
-                    children: /* @__PURE__ */ r(T, { mode: "wait", children: _ || m ? /* @__PURE__ */ r(b, { snapExit: !0, children: /* @__PURE__ */ r(Cr, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ r(b, { snapExit: !0, children: /* @__PURE__ */ r(_t, { className: "size-4" }) }, "send") })
+                    children: /* @__PURE__ */ r(T, { mode: "wait", children: _ || m ? /* @__PURE__ */ r(y, { snapExit: !0, children: /* @__PURE__ */ r(Cr, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ r(y, { snapExit: !0, children: /* @__PURE__ */ r(_t, { className: "size-4" }) }, "send") })
                   }
                 ) })
               ] })
@@ -1818,14 +1818,14 @@ function yo() {
   ] }, "session-closed") }) }) });
 }
 function ko() {
-  var i;
-  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = C(), { sessionState: n } = U(), { messagesState: s } = A(), a = s.messages.length === 0;
-  return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(T, { mode: "wait", children: n.session && !((i = n.session) != null && i.isOpened) ? /* @__PURE__ */ d(W, { children: [
+  var a;
+  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = C(), { sessionState: n } = U(), { messagesState: s } = A(), i = s.messages.length === 0;
+  return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(T, { mode: "wait", children: n.session && !((a = n.session) != null && a.isOpened) ? /* @__PURE__ */ d(W, { children: [
     /* @__PURE__ */ r(yo, {}),
-    /* @__PURE__ */ r(gt, {})
+    /* @__PURE__ */ r(ut, {})
   ] }, "session-closed") : /* @__PURE__ */ d(W, { children: [
     s.lastAIResMightSolveUserIssue && (t == null ? void 0 : t.enabled) !== !1 && /* @__PURE__ */ r(xo, {}),
-    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((l, c) => /* @__PURE__ */ r(
+    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((l, c) => /* @__PURE__ */ r(
       De,
       {
         suggestion: l
@@ -1833,7 +1833,7 @@ function ko() {
       `${l}-${c}`
     )) }),
     /* @__PURE__ */ r(bo, {}),
-    /* @__PURE__ */ r(gt, {})
+    /* @__PURE__ */ r(ut, {})
   ] }, "chat-input") }) });
 }
 function Co({
@@ -1845,10 +1845,10 @@ function Co({
   const { componentStore: s } = O();
   if (n.type !== "AGENT" && n.type !== "AI") return null;
   if (n.data.action) {
-    const i = s.getComponent(n.data.action.name);
-    if (i)
+    const a = s.getComponent(n.data.action.name);
+    if (a)
       return /* @__PURE__ */ r(
-        i,
+        a,
         {
           ...n,
           id: n.id,
@@ -1858,9 +1858,9 @@ function Co({
         }
       );
   }
-  const a = s.getComponent(n.component);
-  return a ? /* @__PURE__ */ r(
-    a,
+  const i = s.getComponent(n.component);
+  return i ? /* @__PURE__ */ r(
+    i,
     {
       ...n,
       id: n.id,
@@ -1883,13 +1883,13 @@ function qt({
   className: o,
   containerClassName: t
 }) {
-  var i, l;
+  var a, l;
   const { timestamps: n } = C();
-  if (!((i = n == null ? void 0 : n.perMessageGroup) != null && i.enabled))
+  if (!((a = n == null ? void 0 : n.perMessageGroup) != null && a.enabled))
     return null;
   const s = (l = e[e.length - 1]) == null ? void 0 : l.timestamp;
   if (!s) return null;
-  const a = (() => {
+  const i = (() => {
     try {
       return new Date(s).toLocaleTimeString([], {
         hour: "2-digit",
@@ -1900,7 +1900,7 @@ function qt({
       return console.error(c), null;
     }
   })();
-  return a ? /* @__PURE__ */ r("div", { className: t, children: /* @__PURE__ */ r("span", { className: h("text-xs text-muted-foreground", o), children: a }) }) : null;
+  return i ? /* @__PURE__ */ r("div", { className: t, children: /* @__PURE__ */ r("span", { className: h("text-xs text-muted-foreground", o), children: i }) }) : null;
 }
 function pe({
   messages: e,
@@ -1941,12 +1941,12 @@ function pe({
                     ...w("chat/agent_msg_group/avatar_and_msgs/msgs"),
                     className: h("flex-1 flex flex-col gap-1"),
                     children: [
-                      e.map((n, s, a) => /* @__PURE__ */ r(
+                      e.map((n, s, i) => /* @__PURE__ */ r(
                         Co,
                         {
                           isFirstInGroup: s === 0,
-                          isLastInGroup: s === a.length - 1,
-                          isAloneInGroup: a.length === 1,
+                          isLastInGroup: s === i.length - 1,
+                          isAloneInGroup: i.length === 1,
                           ...n
                         },
                         n.id
@@ -1997,7 +1997,7 @@ function No({
       ...w("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((a) => /* @__PURE__ */ r(Ft, { attachment: a }, a.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((i) => /* @__PURE__ */ r(Ft, { attachment: i }, i.id)) }),
         e.content.length > 0 && /* @__PURE__ */ r(
           "div",
           {
@@ -2052,10 +2052,10 @@ function _o(e) {
   const o = [];
   let t = null;
   return e.forEach((n) => {
-    var s, a, i, l, c, p;
+    var s, i, a, l, c, p;
     // 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
-    ((a = t[0]) == null ? void 0 : a.type) === "AGENT" && n.type === "AGENT" && (((i = n.agent) == null ? void 0 : i.id) !== ((l = t[0].agent) == null ? void 0 : l.id) || ((c = n.agent) == null ? void 0 : c.name) !== ((p = t[0].agent) == null ? void 0 : p.name))) && (t = [], o.push(t)), t.push(n);
+    ((i = t[0]) == null ? void 0 : i.type) === "AGENT" && n.type === "AGENT" && (((a = n.agent) == null ? void 0 : a.id) !== ((l = t[0].agent) == null ? void 0 : l.id) || ((c = n.agent) == null ? void 0 : c.name) !== ((p = t[0].agent) == null ? void 0 : p.name))) && (t = [], o.push(t)), t.push(n);
   }), o;
 }
 function Io(e) {
@@ -2083,10 +2083,10 @@ function Do() {
     pe,
     {
       messages: o.map(
-        ({ message: a }, i) => ({
+        ({ message: i }, a) => ({
           component: "bot_message",
-          data: { message: a },
-          id: `${i}-${a}`,
+          data: { message: i },
+          id: `${a}-${i}`,
           type: "AI",
           timestamp: null
         })
@@ -2111,18 +2111,18 @@ function jo() {
     advancedInitialMessages: t = [],
     initialQuestions: n,
     initialQuestionsPosition: s
-  } = o, a = (() => {
-    var i;
-    return t.length ? [] : e.length ? [] : (i = o.initialMessages) != null && i.length ? o.initialMessages : ["Hello, how can I help you?"];
+  } = o, i = (() => {
+    var a;
+    return t.length ? [] : e.length ? [] : (a = o.initialMessages) != null && a.length ? o.initialMessages : ["Hello, how can I help you?"];
   })();
-  return /* @__PURE__ */ r(Q, { children: e.length === 0 && a.length > 0 && /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(Q, { children: e.length === 0 && i.length > 0 && /* @__PURE__ */ r(
     pe,
     {
-      messages: a.map(
-        (i, l) => ({
+      messages: i.map(
+        (a, l) => ({
           component: "bot_message",
-          data: { message: i },
-          id: `${l}-${i}`,
+          data: { message: a },
+          id: `${l}-${a}`,
           type: "AI",
           timestamp: null
         })
@@ -2140,10 +2140,10 @@ function Po() {
 function Eo() {
   const {
     messagesState: { messages: e }
-  } = A(), { isAwaitingBotReply: o } = Ct(), { componentStore: t } = O(), { bot: n, humanAgent: s } = C(), a = bt(
+  } = A(), { isAwaitingBotReply: o } = Ct(), { componentStore: t } = O(), { bot: n, humanAgent: s } = C(), i = bt(
     () => _o(e),
     [e]
-  ), i = t.getComponent(
+  ), a = t.getComponent(
     "loading"
   ), l = B(null);
   function c() {
@@ -2164,15 +2164,15 @@ function Eo() {
         /* @__PURE__ */ r(Ro, {}),
         /* @__PURE__ */ r(Do, {}),
         /* @__PURE__ */ r(jo, {}),
-        a.map((p, x) => {
-          var k, v, z, _;
-          const y = (k = p == null ? void 0 : p[0]) == null ? void 0 : k.type, m = (v = p[0]) == null ? void 0 : v.id;
-          if (!y || !m) return null;
+        i.map((p, f) => {
+          var k, b, z, _;
+          const x = (k = p == null ? void 0 : p[0]) == null ? void 0 : k.type, m = (b = p[0]) == null ? void 0 : b.id;
+          if (!x || !m) return null;
           if (Io(p))
             return /* @__PURE__ */ r(So, { messages: p }, m);
           if (To(p)) {
-            const f = x === a.length - 1;
-            return o && f ? null : ((z = p[0]) == null || z.agent, /* @__PURE__ */ r(
+            const v = f === i.length - 1;
+            return o && v ? null : ((z = p[0]) == null || z.agent, /* @__PURE__ */ r(
               pe,
               {
                 messages: p,
@@ -2182,15 +2182,15 @@ function Eo() {
             ));
           }
           if (Mo(p)) {
-            const f = (_ = p[0]) == null ? void 0 : _.agent;
+            const v = (_ = p[0]) == null ? void 0 : _.agent;
             return /* @__PURE__ */ r(
               pe,
               {
                 messages: p,
-                agent: f ? {
-                  ...f,
-                  name: (s == null ? void 0 : s.name) || f.name || "",
-                  avatarUrl: (s == null ? void 0 : s.avatarUrl) || f.avatarUrl || null
+                agent: v ? {
+                  ...v,
+                  name: (s == null ? void 0 : s.name) || v.name || "",
+                  avatarUrl: (s == null ? void 0 : s.avatarUrl) || v.avatarUrl || null
                 } : s ? {
                   isAi: !1,
                   id: null,
@@ -2203,7 +2203,7 @@ function Eo() {
           }
           return null;
         }),
-        o && i && /* @__PURE__ */ r(i, { agent: n }),
+        o && a && /* @__PURE__ */ r(a, { agent: n }),
         /* @__PURE__ */ r(Po, {}),
         /* @__PURE__ */ r(zo, {})
       ]
@@ -2215,7 +2215,7 @@ function Oo() {
     messagesState: { isInitialFetchLoading: e }
   } = A(), {
     sessionState: { session: o }
-  } = U(), { isCanvasOpen: t } = uo(), { theme: n } = G();
+  } = U(), { isCanvasOpen: t } = go(), { theme: n } = G();
   Te({
     width: t ? n.screens.chat.withCanvas.width : n.screens.chat.width,
     height: t ? n.screens.chat.withCanvas.height : n.screens.chat.height
@@ -2239,14 +2239,14 @@ function Oo() {
       children: /* @__PURE__ */ d("div", { className: "size-full justify-between flex flex-col", children: [
         /* @__PURE__ */ r(Ut, {}),
         /* @__PURE__ */ r(T, { mode: "wait", children: e ? /* @__PURE__ */ r(
-          b,
+          y,
           {
             className: "flex flex-col items-center justify-center w-full flex-1",
             children: /* @__PURE__ */ r(Xt, {})
           },
           "loading"
         ) : /* @__PURE__ */ d(
-          b,
+          y,
           {
             className: "flex items-start h-full flex-1 overflow-auto",
             snapExit: !0,
@@ -2281,7 +2281,7 @@ function Oo() {
                     transitionTimingFunction: n.screens.chat.withCanvas.transitionTimingFunction,
                     transitionDuration: n.screens.chat.withCanvas.transitionDuration
                   },
-                  children: /* @__PURE__ */ r(go, {})
+                  children: /* @__PURE__ */ r(uo, {})
                 }
               )
             ]
@@ -2364,7 +2364,7 @@ function ft({
   session: e,
   className: o
 }) {
-  const { bot: t, humanAgent: n } = C(), { toChatScreen: s } = H(), a = e.assignee.kind === "human" ? (n == null ? void 0 : n.name) || e.assignee.name || "Support Agent" : (t == null ? void 0 : t.name) || "AI Support Agent", i = e.assignee.kind === "human" ? (n == null ? void 0 : n.avatarUrl) || e.assignee.avatarUrl || "" : (t == null ? void 0 : t.avatarUrl) || (t == null ? void 0 : t.avatar) || "";
+  const { bot: t, humanAgent: n } = C(), { toChatScreen: s } = H(), i = e.assignee.kind === "human" ? (n == null ? void 0 : n.name) || e.assignee.name || "Support Agent" : (t == null ? void 0 : t.name) || "AI Support Agent", a = e.assignee.kind === "human" ? (n == null ? void 0 : n.avatarUrl) || e.assignee.avatarUrl || "" : (t == null ? void 0 : t.avatarUrl) || (t == null ? void 0 : t.avatar) || "";
   return /* @__PURE__ */ d(
     N,
     {
@@ -2377,13 +2377,13 @@ function ft({
       onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ d("div", { className: "flex-1 flex gap-2 items-center", children: [
-          /* @__PURE__ */ r(T, { mode: "wait", children: /* @__PURE__ */ r(b, { snapExit: !0, children: /* @__PURE__ */ d(Se, { className: "size-10", children: [
-            /* @__PURE__ */ r(_e, { src: i, alt: "Agent Icon" }),
+          /* @__PURE__ */ r(T, { mode: "wait", children: /* @__PURE__ */ r(y, { snapExit: !0, children: /* @__PURE__ */ d(Se, { className: "size-10", children: [
+            /* @__PURE__ */ r(_e, { src: a, alt: "Agent Icon" }),
             /* @__PURE__ */ r(Ie, { children: /* @__PURE__ */ r(Tr, { className: "size-4" }) })
           ] }) }) }),
           /* @__PURE__ */ d("div", { className: "flex-1", children: [
-            /* @__PURE__ */ r(T, { mode: "wait", children: /* @__PURE__ */ r(b, { snapExit: !0, children: a }, a) }),
-            /* @__PURE__ */ r(T, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ r(b, { snapExit: !0, children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r(T, { mode: "wait", children: /* @__PURE__ */ r(y, { snapExit: !0, children: i }, i) }),
+            /* @__PURE__ */ r(T, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ r(y, { snapExit: !0, children: /* @__PURE__ */ r(
               Ht,
               {
                 remarkPlugins: [It],
@@ -2391,7 +2391,7 @@ function ft({
                 className: "line-clamp-1 overflow-hidden text-ellipsis text-xs text-muted-foreground",
                 children: e.lastMessage
               }
-            ) }, e.lastMessage || "content") : /* @__PURE__ */ r(b, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ r(Ao, { className: "h-4 w-full" }) }, "skeleton") })
+            ) }, e.lastMessage || "content") : /* @__PURE__ */ r(y, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ r(Ao, { className: "h-4 w-full" }) }, "skeleton") })
           ] })
         ] }),
         /* @__PURE__ */ r(Mr, { className: "size-4 text-muted-foreground shrink-0 rtl:-scale-100" })
@@ -2403,24 +2403,24 @@ function Wo() {
   const { t: e } = Z(), { toChatScreen: o } = H(), {
     sessionsState: { data: t, isInitialFetchLoading: n },
     openSessions: s,
-    closedSessions: a,
-    canCreateNewSession: i
+    closedSessions: i,
+    canCreateNewSession: a
   } = U();
   return /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col overflow-scroll py-2 px-2", children: /* @__PURE__ */ r(T, { mode: "wait", children: n ? /* @__PURE__ */ r(
-    b,
+    y,
     {
       className: "flex-1 flex items-center justify-center",
       children: /* @__PURE__ */ r(Xt, {})
     },
     "loading"
   ) : /* @__PURE__ */ r(
-    b,
+    y,
     {
       className: "flex-1 flex flex-col gap-2 relative",
       children: t.length ? /* @__PURE__ */ d(Q, { children: [
         /* @__PURE__ */ d(T, { children: [
           s.length > 0 && /* @__PURE__ */ r(
-            b,
+            y,
             {
               fadeIn: "up",
               delay: 0.2,
@@ -2430,15 +2430,15 @@ function Wo() {
             },
             "open-sessions"
           ),
-          a.length > 0 && /* @__PURE__ */ d(
-            b,
+          i.length > 0 && /* @__PURE__ */ d(
+            y,
             {
               className: "space-y-2",
               delay: 0.2,
               snapExit: !0,
               children: [
                 /* @__PURE__ */ r(Ho, { children: e("closed_conversations") }),
-                a.map((l) => /* @__PURE__ */ r(
+                i.map((l) => /* @__PURE__ */ r(
                   ft,
                   {
                     session: l,
@@ -2451,7 +2451,7 @@ function Wo() {
             "closed-sessions"
           )
         ] }),
-        i && /* @__PURE__ */ r("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ lt(
+        a && /* @__PURE__ */ r("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ lt(
           N,
           {
             ...w("sessions/new_conversation_btn"),
@@ -2536,9 +2536,9 @@ function $o() {
     const n = e == null ? void 0 : e.current;
     if (n && t.current) {
       const s = t.current;
-      let a;
-      const i = new ResizeObserver(() => {
-        a = requestAnimationFrame(() => {
+      let i;
+      const a = new ResizeObserver(() => {
+        i = requestAnimationFrame(() => {
           const l = s.offsetHeight;
           n.style.setProperty(
             "--opencx-widget-height",
@@ -2546,31 +2546,31 @@ function $o() {
           );
         });
       });
-      return i.observe(s), () => {
-        cancelAnimationFrame(a), i.unobserve(s);
+      return a.observe(s), () => {
+        cancelAnimationFrame(i), a.unobserve(s);
       };
     }
   }, [e, o]), { observedElementRef: t };
 }
-const Bo = ge.object({
-  name: ge.string().min(2),
-  email: ge.string().email()
+const Bo = ue.object({
+  name: ue.string().min(2),
+  email: ue.string().email()
 });
 function Yo() {
-  var f, R, P, E, g, I, j, M;
+  var v, R, P, E, u, I, j, M;
   const {
     widgetCtx: { org: e }
-  } = O(), { setIsOpen: o } = V(), { createUnverifiedContact: t } = zt(), { isSmallScreen: n } = $(), s = C(), { theme: a } = G(), { t: i } = Z(), { observedElementRef: l } = $o();
+  } = O(), { setIsOpen: o } = V(), { createUnverifiedContact: t } = zt(), { isSmallScreen: n } = $(), s = C(), { theme: i } = G(), { t: a } = Z(), { observedElementRef: l } = $o();
   Te({
     height: void 0,
-    width: a.screens.welcome.width
+    width: i.screens.welcome.width
   });
-  const [c, p] = D(((f = s.prefillUserData) == null ? void 0 : f.name) || ""), [x, y] = D(((R = s.prefillUserData) == null ? void 0 : R.email) || ""), m = (s.extraDataCollectionFields || []).filter(
-    (u) => u !== "name" && u !== "email" && !!u
-  ), [k, v] = D({}), [z, _] = Lr(
-    async (u) => {
-      u.preventDefault();
-      const S = Bo.safeParse({ name: c, email: x });
+  const [c, p] = D(((v = s.prefillUserData) == null ? void 0 : v.name) || ""), [f, x] = D(((R = s.prefillUserData) == null ? void 0 : R.email) || ""), m = (s.extraDataCollectionFields || []).filter(
+    (g) => g !== "name" && g !== "email" && !!g
+  ), [k, b] = D({}), [z, _] = Lr(
+    async (g) => {
+      g.preventDefault();
+      const S = Bo.safeParse({ name: c, email: f });
       S.success && await t(
         {
           email: S.data.email,
@@ -2580,7 +2580,7 @@ function Yo() {
         Object.values(k).filter(Boolean).length ? k : void 0
       );
     },
-    [c, x, k]
+    [c, f, k]
   );
   return /* @__PURE__ */ r(
     "div",
@@ -2590,7 +2590,7 @@ function Yo() {
         // Relative to the iframe
         maxWidth: "100vw",
         // Relative to the iframe
-        minHeight: a.screens.welcome.minHeight,
+        minHeight: i.screens.welcome.minHeight,
         height: "100vh",
         // Relative to the iframe
         maxHeight: "100vh",
@@ -2615,7 +2615,7 @@ function Yo() {
                   "text-primary-foreground"
                 ),
                 children: [
-                  n && /* @__PURE__ */ r(b, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(N, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(ke, { className: "size-4" }) }) }),
+                  n && /* @__PURE__ */ r(y, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(N, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(ke, { className: "size-4" }) }) }),
                   /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (P = s.assets) != null && P.organizationLogo ? /* @__PURE__ */ r(
                     "img",
                     {
@@ -2625,8 +2625,8 @@ function Yo() {
                     }
                   ) : /* @__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: ((I = (g = s.textContent) == null ? void 0 : g.welcomeScreen) == null ? void 0 : I.title) || i("welcome_screen_title") }),
-                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((M = (j = s.textContent) == null ? void 0 : j.welcomeScreen) == null ? void 0 : M.description) || i("welcome_screen_description") })
+                    /* @__PURE__ */ r("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((I = (u = s.textContent) == null ? void 0 : u.welcomeScreen) == null ? void 0 : I.title) || a("welcome_screen_title") }),
+                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((M = (j = s.textContent) == null ? void 0 : j.welcomeScreen) == null ? void 0 : M.description) || a("welcome_screen_description") })
                   ] })
                 ]
               }
@@ -2646,9 +2646,9 @@ function Yo() {
                       de,
                       {
                         value: c,
-                        onChange: (u) => p(u.target.value),
+                        onChange: (g) => p(g.target.value),
                         required: !0,
-                        placeholder: i("your_name_placeholder"),
+                        placeholder: a("your_name_placeholder"),
                         name: "name"
                       }
                     ),
@@ -2656,24 +2656,24 @@ function Yo() {
                       de,
                       {
                         required: !0,
-                        value: x,
-                        onChange: (u) => y(u.target.value),
+                        value: f,
+                        onChange: (g) => x(g.target.value),
                         type: "email",
-                        placeholder: i("your_email_placeholder"),
+                        placeholder: a("your_email_placeholder"),
                         name: "email"
                       }
                     ),
-                    m.map((u) => /* @__PURE__ */ r(
+                    m.map((g) => /* @__PURE__ */ r(
                       de,
                       {
-                        value: k[u],
-                        onChange: (S) => v((ie) => ({
+                        value: k[g],
+                        onChange: (S) => b((ie) => ({
                           ...ie,
-                          [u]: S.target.value
+                          [g]: S.target.value
                         })),
-                        placeholder: `${u} (${i("optional")})`
+                        placeholder: `${g} (${a("optional")})`
                       },
-                      u
+                      g
                     )),
                     /* @__PURE__ */ d(
                       N,
@@ -2682,7 +2682,7 @@ function Yo() {
                         className: "w-full",
                         size: "lg",
                         children: [
-                          z.loading ? i("start_chat_button_loading") : i("start_chat_button"),
+                          z.loading ? a("start_chat_button_loading") : a("start_chat_button"),
                           /* @__PURE__ */ r(Dr, { className: "size-4 rtl:-scale-100" })
                         ]
                       }
@@ -2706,7 +2706,7 @@ function Gt() {
     switch (e) {
       case "welcome":
         return /* @__PURE__ */ r(
-          b,
+          y,
           {
             fadeIn: "right",
             className: "size-full",
@@ -2717,7 +2717,7 @@ function Gt() {
         );
       case "sessions":
         return /* @__PURE__ */ r(
-          b,
+          y,
           {
             fadeIn: "right",
             className: "size-full",
@@ -2728,7 +2728,7 @@ function Gt() {
         );
       case "chat":
         return /* @__PURE__ */ r(
-          b,
+          y,
           {
             fadeIn: "right",
             className: "size-full",
@@ -2742,7 +2742,7 @@ function Gt() {
     }
   })() }) });
 }
-const Uo = "4.0.50", Xo = `<!DOCTYPE html>
+const Uo = "4.0.51", Xo = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2761,7 +2761,7 @@ html, body {
 </body>
 </html>`;
 function Zt() {
-  const { isOpen: e } = V(), { contentIframeRef: o } = O(), { cssOverrides: t, inline: n } = C(), { theme: s, cssVars: a, computed: i } = G(), { dir: l } = Z();
+  const { isOpen: e } = V(), { contentIframeRef: o } = O(), { cssOverrides: t, inline: n } = C(), { theme: s, cssVars: i, computed: a } = G(), { dir: l } = Z();
   return /* @__PURE__ */ r(
     re.div,
     {
@@ -2790,15 +2790,15 @@ function Zt() {
           title: "OpenCX Live Chat",
           style: {
             // @ts-expect-error this is a valid css variable
-            "--opencx-widget-width": i.minWidth,
-            "--opencx-widget-height": i.minHeight,
-            minWidth: i.minWidth,
+            "--opencx-widget-width": a.minWidth,
+            "--opencx-widget-height": a.minHeight,
+            minWidth: a.minWidth,
             width: "var(--opencx-widget-width)",
-            maxWidth: i.maxWidth,
+            maxWidth: a.maxWidth,
             // Relative to the viewport
-            minHeight: i.minHeight,
+            minHeight: a.minHeight,
             height: "var(--opencx-widget-height)",
-            maxHeight: i.maxHeight,
+            maxHeight: a.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 */
@@ -2819,7 +2819,7 @@ function Zt() {
               "div",
               {
                 style: {
-                  ...a,
+                  ...i,
                   zIndex: s.widgetContentContainer.zIndex
                 },
                 "data-version": Uo,
@@ -2918,12 +2918,12 @@ html, body {
 </body>
 </html>`;
 function Zo() {
-  var l, c;
-  const { isOpen: e, setIsOpen: o } = V(), { cssOverrides: t, assets: n, customComponents: s } = C(), { theme: a, cssVars: i } = G();
+  var p, f, x;
+  const { isOpen: e, setIsOpen: o } = V(), { cssOverrides: t, assets: n, customComponents: s, accessibility: i } = C(), { theme: a, cssVars: l } = G(), c = ((p = i == null ? void 0 : i.widgetTriggerButton) == null ? void 0 : p.label) ?? "Chat with us";
   return s != null && s.widgetTrigger ? s.widgetTrigger({
     react: L,
     isOpen: e,
-    setIsOpen: (p) => o(p)
+    setIsOpen: (m) => o(m)
   }) : /* @__PURE__ */ d(
     Mt,
     {
@@ -2950,7 +2950,7 @@ function Zo() {
           "div",
           {
             style: {
-              ...i,
+              ...l,
               width: "100%",
               height: "100%",
               display: "flex",
@@ -2960,6 +2960,8 @@ function Zo() {
             children: /* @__PURE__ */ r(
               he.PopoverTrigger,
               {
+                "aria-label": c,
+                title: c,
                 className: h(
                   "font-sans flex items-center justify-center rounded-full"
                 ),
@@ -2980,7 +2982,7 @@ function Zo() {
                       "text-primary-foreground"
                     ),
                     children: /* @__PURE__ */ r(T, { mode: "wait", children: e ? /* @__PURE__ */ r(
-                      b,
+                      y,
                       {
                         snapExit: !0,
                         fadeIn: "up",
@@ -2988,7 +2990,7 @@ function Zo() {
                           initial: { rotate: 45 },
                           animate: { rotate: 0 }
                         },
-                        children: (l = n == null ? void 0 : n.widgetTrigger) != null && l.closeIcon ? /* @__PURE__ */ r(
+                        children: (f = n == null ? void 0 : n.widgetTrigger) != null && f.closeIcon ? /* @__PURE__ */ r(
                           "img",
                           {
                             src: n.widgetTrigger.closeIcon,
@@ -3010,14 +3012,14 @@ function Zo() {
                       },
                       "x-icon"
                     ) : /* @__PURE__ */ r(
-                      b,
+                      y,
                       {
                         snapExit: !0,
                         overrides: {
                           initial: { rotate: 45 },
                           animate: { rotate: 0 }
                         },
-                        children: (c = n == null ? void 0 : n.widgetTrigger) != null && c.openIcon ? /* @__PURE__ */ r(
+                        children: (x = n == null ? void 0 : n.widgetTrigger) != null && x.openIcon ? /* @__PURE__ */ r(
                           "img",
                           {
                             src: n.widgetTrigger.openIcon,
@@ -3068,8 +3070,8 @@ function Qo({
   widgetRef: e
 }) {
   const { widgetCtx: o } = O(), { contactState: t } = zt(), { setIsOpen: n, isOpen: s } = V(), {
-    toChatScreen: a,
-    routerState: { screen: i }
+    toChatScreen: i,
+    routerState: { screen: a }
   } = H(), { sendMessage: l } = A();
   return L.useImperativeHandle(
     e,
@@ -3080,7 +3082,7 @@ function Qo({
           console.warn("Cannot start a new chat: contact not yet initialized.");
           return;
         }
-        console.log({ isOpen: s }), s || n(!0), i === "chat" && o.resetChat(), a(), c != null && c.message && l({ content: c.message });
+        console.log({ isOpen: s }), s || n(!0), a === "chat" && o.resetChat(), i(), c != null && c.message && l({ content: c.message });
       }
     }),
     [
@@ -3088,8 +3090,8 @@ function Qo({
       t,
       n,
       s,
-      i,
       a,
+      i,
       l
     ]
   ), null;