@opencx/widget-react 4.0.56 → 4.0.57

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsx as r, jsxs as d, Fragment as J } from "react/jsx-runtime";
 import * as me from "@radix-ui/react-popover";
 import * as ee from "react";
-import L, { memo as rr, forwardRef as yt, useState as E, cloneElement as kt, createContext as or, useEffect as se, useContext as nr, useRef as B, useCallback as G, useMemo as Ct, createElement as ct } from "react";
-import { useWidget as O, useConfig as z, useSessions as U, useMessages as A, useWidgetRouter as H, useDocumentDir as ke, useWidgetTrigger as Z, useModes as zt, useCsat as Nt, useUploadFiles as sr, useIsAwaitingBotReply as St, useContact as _t, WidgetProvider as ar, WidgetTriggerProvider as ir } from "@opencx/widget-react-headless";
+import L, { memo as rr, forwardRef as yt, useState as R, cloneElement as kt, createContext as or, useEffect as se, useContext as nr, useRef as B, useCallback as G, useMemo as Ct, createElement as ct } from "react";
+import { useWidget as O, useConfig as N, useSessions as U, useMessages as A, useWidgetRouter as H, useDocumentDir as ke, useWidgetTrigger as Z, useModes as zt, useCsat as Nt, useUploadFiles as sr, useIsAwaitingBotReply as St, useContact as _t, WidgetProvider as ar, WidgetTriggerProvider as ir } from "@opencx/widget-react-headless";
 import { X as lr, ZoomOut as cr, ZoomIn as dr, RotateCcw as pr, FileText as It, FileSpreadsheet as Tt, CircleDashedIcon as mr, XIcon as Ce, SquareXIcon as hr, SquareCheckBigIcon as gr, SquareCheckIcon as ur, ShrinkIcon as wr, Minimize2Icon as fr, MinimizeIcon as xr, Maximize2Icon as vr, MaximizeIcon as br, ExpandIcon as yr, CircleXIcon as kr, CircleCheckBigIcon as Cr, CircleCheckIcon as Mt, CheckCheckIcon as zr, CheckIcon as Nr, ChevronLeftIcon as Sr, LoaderIcon as _r, ArrowUpIcon as Dt, PaperclipIcon as dt, CircleDashed as Ir, AlertCircle as Tr, Loader2 as Mr, FileAudio2Icon as Dr, FileVideo2Icon as Er, FileIcon as Rr, UserRoundIcon as Pr, ChevronRightIcon as jr, SendHorizontal as Or, ChevronDownIcon as Ar } from "lucide-react";
 import { clsx as Fr } from "clsx";
 import { twMerge as Hr } from "tailwind-merge";
@@ -61,26 +61,26 @@ const Q = {
 }, Y = rr(
   yt(
     ({ children: e, className: o, scale: t = 1.02, off: n = !1 }, s) => {
-      const [i, a] = E(!1), [l, c] = E({ x: 0, y: 0 });
+      const [i, a] = R(!1), [l, c] = R({ x: 0, y: 0 });
       if (n || /translate/.test(
         e.props.className || ""
       )) return e;
       const v = (x) => {
-        var D, g;
-        const { clientX: C, clientY: I } = x, y = x.currentTarget.getBoundingClientRect(), S = C - (y.left + y.width / 2), R = I - (y.top + y.height / 2), j = Math.max(
+        var E, g;
+        const { clientX: z, clientY: I } = x, y = x.currentTarget.getBoundingClientRect(), k = z - (y.left + y.width / 2), D = I - (y.top + y.height / 2), j = Math.max(
           -1,
-          Math.min(1, S / (y.width / 2))
+          Math.min(1, k / (y.width / 2))
         ), w = Math.max(
           -1,
-          Math.min(1, R / (y.height / 2))
+          Math.min(1, D / (y.height / 2))
         ), T = j * Q.x, P = w * Q.y;
-        c({ x: T, y: P }), (g = (D = e.props).onMouseMove) == null || g.call(D, x);
+        c({ x: T, y: P }), (g = (E = e.props).onMouseMove) == null || g.call(E, x);
       }, b = () => {
-        var x, C;
-        a(!0), (C = (x = e.props).onMouseEnter) == null || C.call(x);
+        var x, z;
+        a(!0), (z = (x = e.props).onMouseEnter) == null || z.call(x);
       }, u = () => {
-        var x, C;
-        a(!1), c({ x: 0, y: 0 }), (C = (x = e.props).onMouseLeave) == null || C.call(x);
+        var x, z;
+        a(!1), c({ x: 0, y: 0 }), (z = (x = e.props).onMouseLeave) == null || z.call(x);
       }, h = {
         "--wobble-x": i ? `${l.x}px` : "0px",
         "--wobble-y": i ? `${l.y}px` : "0px",
@@ -129,7 +129,7 @@ const qr = 10, Vr = (e, o, t) => ({
   left: Gr,
   up: Zr,
   down: Kr
-}, k = yt(
+}, C = yt(
   ({
     fadeIn: e = "down",
     distance: o = qr,
@@ -143,7 +143,7 @@ const qr = 10, Vr = (e, o, t) => ({
     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 });
   }
 );
-k.displayName = "MotionDiv";
+C.displayName = "MotionDiv";
 const Jr = Lr(
   m(
     "inline-flex shrink-0 items-center justify-center gap-2",
@@ -183,7 +183,7 @@ const Jr = Lr(
       size: "default"
     }
   }
-), N = ee.forwardRef(
+), S = ee.forwardRef(
   ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, i) => /* @__PURE__ */ r(Y, { ref: i, children: /* @__PURE__ */ r(
     n ? Wr : "button",
     {
@@ -194,10 +194,10 @@ const Jr = Lr(
     }
   ) })
 );
-N.displayName = "Button";
+S.displayName = "Button";
 const Ot = or(null);
 function eo({ children: e }) {
-  const [o, t] = E(!1), [n, s] = E(null), i = (l) => {
+  const [o, t] = R(!1), [n, s] = R(null), i = (l) => {
     s(l), t(!0);
   }, a = () => {
     t(!1), setTimeout(() => {
@@ -244,7 +244,7 @@ function to() {
       );
     };
   }, []), /* @__PURE__ */ r(M, { mode: "wait", children: o && t && /* @__PURE__ */ r(
-    k,
+    C,
     {
       overrides: {
         initial: { y: 0 },
@@ -275,7 +275,7 @@ function ze({
       children: [
         e,
         t && /* @__PURE__ */ d(
-          N,
+          S,
           {
             size: "fit",
             className: "rounded-full absolute top-4 right-4 opacity-50 hover:opacity-100",
@@ -366,9 +366,9 @@ function $t({
   src: e,
   alt: o
 }) {
-  const [t, n] = E(1), [s, i] = E({ x: 0, y: 0 }), [a, l] = E(!1), c = B({ x: 0, y: 0 }), p = B({ x: 0, y: 0 }), v = B(null), b = B(null), u = B(!1), h = (w) => Math.min(gt, Math.max(ht, w)), x = G(() => {
+  const [t, n] = R(1), [s, i] = R({ x: 0, y: 0 }), [a, l] = R(!1), c = B({ x: 0, y: 0 }), p = B({ x: 0, y: 0 }), v = B(null), b = B(null), u = B(!1), h = (w) => Math.min(gt, Math.max(ht, w)), x = G(() => {
     n(1), i({ x: 0, y: 0 });
-  }, []), C = G(() => {
+  }, []), z = G(() => {
     n((w) => h(w + le));
   }, []), I = G(() => {
     n((w) => {
@@ -380,8 +380,8 @@ function $t({
     w.preventDefault(), w.stopPropagation();
     const T = w.deltaY > 0 ? -le : le;
     n((P) => {
-      const D = h(P + T);
-      return D <= 1 && i({ x: 0, y: 0 }), D;
+      const E = h(P + T);
+      return E <= 1 && i({ x: 0, y: 0 }), E;
     });
   }, []);
   const y = G(
@@ -389,21 +389,21 @@ function $t({
       w.preventDefault(), u.current = !1, l(!0), c.current = { x: w.clientX, y: w.clientY }, p.current = { ...s }, w.target.setPointerCapture(w.pointerId);
     },
     [s]
-  ), S = G(
+  ), k = G(
     (w) => {
       if (!a) return;
       const T = w.clientX - c.current.x, P = w.clientY - c.current.y;
       if ((Math.abs(T) > 3 || Math.abs(P) > 3) && (u.current = !0), t <= 1) return;
-      const D = {
+      const E = {
         x: p.current.x + T / t,
         y: p.current.y + P / t
       };
       i(
-        oo(D, t, v.current, b.current)
+        oo(E, t, v.current, b.current)
       );
     },
     [a, t]
-  ), R = G(() => {
+  ), D = G(() => {
     const w = u.current;
     l(!1), !w && n((T) => T > 1 ? (i({ x: 0, y: 0 }), 1) : ro);
   }, []), j = t > 1;
@@ -422,9 +422,9 @@ function $t({
               j && "size-full"
             ),
             onPointerDown: y,
-            onPointerMove: S,
-            onPointerUp: R,
-            onPointerCancel: R,
+            onPointerMove: k,
+            onPointerUp: D,
+            onPointerCancel: D,
             style: {
               cursor: a ? "grabbing" : j ? "grab" : "zoom-in",
               touchAction: "none"
@@ -453,7 +453,7 @@ function $t({
             Math.round(t * 100),
             "%"
           ] }),
-          /* @__PURE__ */ r(we, { onClick: C, label: "Zoom in", disabled: t >= gt, children: /* @__PURE__ */ r(dr, { className: "size-3.5" }) }),
+          /* @__PURE__ */ r(we, { onClick: z, label: "Zoom in", disabled: t >= gt, children: /* @__PURE__ */ r(dr, { className: "size-3.5" }) }),
           j && /* @__PURE__ */ d(J, { children: [
             /* @__PURE__ */ r("div", { className: "w-px h-4 bg-white/30 mx-0.5" }),
             /* @__PURE__ */ r(we, { onClick: x, label: "Reset zoom", children: /* @__PURE__ */ r(pr, { className: "size-3.5" }) })
@@ -610,7 +610,7 @@ function Se({
   messageType: o,
   messageId: t
 }) {
-  const { anchorTarget: n } = z();
+  const { anchorTarget: n } = N();
   return /* @__PURE__ */ r(
     Yt,
     {
@@ -652,7 +652,7 @@ function X() {
     widgetCtx: { org: e }
   } = O(), {
     sessionState: { session: o }
-  } = U(), t = z(), {
+  } = U(), t = N(), {
     messagesState: { messages: n }
   } = A(), {
     routerState: { screen: s }
@@ -779,7 +779,7 @@ function ve({
 }
 function ao({ agent: e }) {
   return /* @__PURE__ */ r(M, { children: /* @__PURE__ */ d(
-    k,
+    C,
     {
       ...f("chat/bot_loading/root"),
       className: "flex flex-row items-end w-full gap-2 animate-pulse",
@@ -823,7 +823,7 @@ function oe({
   side: t,
   align: n
 }) {
-  const { disableTooltips: s } = z();
+  const { disableTooltips: s } = N();
   return !o || s ? e : /* @__PURE__ */ d(lo, { children: [
     /* @__PURE__ */ r(co, { asChild: !0, children: e }),
     /* @__PURE__ */ r(
@@ -855,16 +855,16 @@ const ce = {
   transitionDuration: "1000ms"
 };
 function K() {
-  var b, u, h, x, C, I, y, S, R, j, w, T, P, D, g, _, ie, Re, Pe, je, 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, lt;
-  const { dir: e } = ke(), { isSmallScreen: o } = $(), { theme: t, inline: n } = z(), s = (q) => n ? "100%" : q, i = (q, ge) => o ? `100dv${q}` : ge, a = (q, ge) => s(i(q, ge)), l = {
+  var b, u, h, x, z, I, y, k, D, j, w, T, P, E, g, _, ie, Re, Pe, je, 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, lt;
+  const { dir: e } = ke(), { isSmallScreen: o } = $(), { theme: t, inline: n } = N(), s = (q) => n ? "100%" : q, i = (q, ge) => o ? `100dv${q}` : ge, a = (q, ge) => s(i(q, ge)), l = {
     zIndex: ((b = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : b.zIndex) ?? 1e7,
     offset: {
       bottom: ((h = (u = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : u.offset) == null ? void 0 : h.bottom) ?? 20,
-      right: ((C = (x = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : x.offset) == null ? void 0 : C.right) ?? (e === "ltr" ? 20 : "initial"),
+      right: ((z = (x = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : x.offset) == null ? void 0 : z.right) ?? (e === "ltr" ? 20 : "initial"),
       left: ((y = (I = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : I.offset) == null ? void 0 : y.left) ?? (e === "rtl" ? 20 : "initial")
     },
     size: {
-      button: ((R = (S = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : S.size) == null ? void 0 : R.button) ?? 48,
+      button: ((D = (k = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : k.size) == null ? void 0 : D.button) ?? 48,
       icon: ((w = (j = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : j.size) == null ? void 0 : w.icon) ?? 24
     }
   }, c = (() => {
@@ -877,7 +877,7 @@ function K() {
     widgetContentContainer: {
       borderRadius: o ? "0px" : ((T = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : T.borderRadius) ?? "32px",
       zIndex: ((P = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : P.zIndex) ?? l.zIndex + 1,
-      outline: ((D = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : D.outline) ?? "none",
+      outline: ((E = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : E.outline) ?? "none",
       // was: '1px solid'
       outlineColor: ((g = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : g.outlineColor) ?? "hsl(0 0% 50% / .5)",
       boxShadow: ((_ = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : _.boxShadow) ?? "0 0px 100px 0px rgb(0 0 0 / 0.25)",
@@ -1053,7 +1053,7 @@ function qt(e) {
   }
 }
 function Vt() {
-  const { contentIframeRef: e } = O(), { inline: o } = z();
+  const { contentIframeRef: e } = O(), { inline: o } = N();
   return {
     setWidth: (t) => {
       var n;
@@ -1140,7 +1140,7 @@ function De() {
     widgetCtx: { org: e }
   } = O(), {
     routerState: { screen: o }
-  } = H(), { textContent: t } = z();
+  } = H(), { textContent: t } = N();
   return (() => {
     var s, i;
     switch (o) {
@@ -1170,12 +1170,12 @@ function go(e) {
   }
 }
 function uo() {
-  const { router: e } = z(), {
+  const { router: e } = N(), {
     routerState: { screen: o },
     toSessionsScreen: t
   } = H();
   return o !== "chat" || e != null && e.chatScreenOnly ? null : /* @__PURE__ */ r(
-    N,
+    S,
     {
       variant: "ghost",
       size: "fit",
@@ -1190,7 +1190,7 @@ function wo({
 }) {
   const { setIsOpen: o } = Z(), { isSmallScreen: t } = $(), n = X();
   return t && e.hideOnSmallScreen || !t && e.hideOnLargeScreen ? null : /* @__PURE__ */ r(
-    N,
+    S,
     {
       variant: "ghost",
       size: "fit",
@@ -1206,7 +1206,7 @@ function wo({
 function be({
   button: e
 }) {
-  const [o, t] = E(!1), {
+  const [o, t] = R(!1), {
     routerState: { screen: n }
   } = H(), { isSmallScreen: s } = $(), { theme: i } = K(), { setWidth: a, setHeight: l } = Vt(), c = X();
   if (n !== "chat" && n !== "sessions") return null;
@@ -1236,7 +1236,7 @@ function be({
     }), (u = e.onClicked) == null || u.call(e, c);
   };
   return s && e.hideOnSmallScreen || !s && e.hideOnLargeScreen ? null : /* @__PURE__ */ r(
-    N,
+    S,
     {
       variant: "ghost",
       size: "fit",
@@ -1256,8 +1256,8 @@ function Gt({
 }) {
   var I, y;
   const { close: o } = he(), { widgetCtx: t } = O(), { setIsOpen: n } = Z(), { resolveSession: s, sessionState: i } = U(), { isSmallScreen: a } = $(), l = X(), c = !i.session, p = ((I = i.session) == null ? void 0 : I.isOpened) === !1, v = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", u = e.behaviorIfSessionIsResolved || "disabled", h = !!(i.isResolvingSession || c && b === "disabled" || p && u === "disabled"), x = async () => {
-    const { success: S, error: R } = await s();
-    if (o(), !S) return console.error(R);
+    const { success: k, error: D } = await s();
+    if (o(), !k) return console.error(D);
     switch (v) {
       case "stay-in-chat":
         return;
@@ -1274,7 +1274,7 @@ function Gt({
         F(v, Gt.name);
         break;
     }
-  }, C = () => {
+  }, z = () => {
     if (c)
       switch (b) {
         case "disabled":
@@ -1285,7 +1285,7 @@ function Gt({
         default:
           F(
             b,
-            C.name
+            z.name
           );
       }
     if (p)
@@ -1306,7 +1306,7 @@ function Gt({
         default:
           F(
             u,
-            C.name
+            z.name
           );
       }
   };
@@ -1314,15 +1314,15 @@ function Gt({
     Ne,
     {
       trigger: /* @__PURE__ */ r(
-        N,
+        S,
         {
           variant: "ghost",
           size: "fit",
           className: "rounded-full",
           disabled: h,
           onClick: () => {
-            var S;
-            return (S = e.onClicked) == null ? void 0 : S.call(e, l);
+            var k;
+            return (k = e.onClicked) == null ? void 0 : k.call(e, l);
           },
           children: /* @__PURE__ */ r(ne, { name: e.icon })
         }
@@ -1332,7 +1332,7 @@ function Gt({
         /* @__PURE__ */ r(Ft, { children: /* @__PURE__ */ r(Lt, { children: e.confirmation.description || "Are you sure you want to close this conversation?" }) }),
         /* @__PURE__ */ d(Ht, { children: [
           /* @__PURE__ */ r(
-            N,
+            S,
             {
               variant: "secondary",
               onClick: o,
@@ -1341,10 +1341,13 @@ function Gt({
             }
           ),
           /* @__PURE__ */ r(
-            N,
+            S,
             {
               variant: "destructive",
-              onClick: x,
+              onClick: () => {
+                var k, D;
+                x(), (D = (k = e.confirmation) == null ? void 0 : k.onConfirmed) == null || D.call(k, l);
+              },
               disabled: i.isResolvingSession,
               children: e.confirmation.confirmButtonText || "Yes"
             }
@@ -1353,14 +1356,14 @@ function Gt({
       ] })
     }
   ) : /* @__PURE__ */ r(
-    N,
+    S,
     {
       variant: "ghost",
       size: "fit",
       className: "rounded-full",
       onClick: () => {
-        var S;
-        p || c ? C() : x(), (S = e.onClicked) == null || S.call(e, l);
+        var k;
+        p || c ? z() : x(), (k = e.onClicked) == null || k.call(e, l);
       },
       disabled: h,
       children: /* @__PURE__ */ r(ne, { name: e.icon })
@@ -1387,7 +1390,7 @@ const fo = {
 function xo() {
   const {
     routerState: { screen: e }
-  } = H(), { headerButtons: o } = z(), t = e === "chat" ? o == null ? void 0 : o.chatScreen : e === "sessions" ? o == null ? void 0 : o.sessionsScreen : [];
+  } = H(), { headerButtons: o } = N(), t = e === "chat" ? o == null ? void 0 : o.chatScreen : e === "sessions" ? o == null ? void 0 : o.sessionsScreen : [];
   return !t || t.length === 0 ? /* @__PURE__ */ r(ye, { button: fo }) : /* @__PURE__ */ r(J, { children: t.map((n) => /* @__PURE__ */ r(
     ye,
     {
@@ -1435,7 +1438,7 @@ function vo() {
   };
 }
 function bo() {
-  const e = X(), { activeMode: o, Component: t } = zt(), { sendMessage: n } = A(), { createStateCheckpoint: s } = U(), [i, a] = E(!1), l = async (c) => {
+  const e = X(), { activeMode: o, Component: t } = zt(), { sendMessage: n } = A(), { createStateCheckpoint: s } = U(), [i, a] = R(!1), l = async (c) => {
     try {
       a(!0), await n(c);
     } catch (p) {
@@ -1456,7 +1459,7 @@ function bo() {
   );
 }
 function V() {
-  const { dir: e } = ke(), o = z();
+  const { dir: e } = ke(), o = N();
   return Ct(() => {
     const t = Br(o.language) ? o.language : "en";
     return {
@@ -1471,7 +1474,7 @@ const W = L.forwardRef(
   (e, o) => {
     var t, n, s;
     return /* @__PURE__ */ r(
-      k,
+      C,
       {
         ...e,
         ref: o,
@@ -1520,7 +1523,7 @@ function ko() {
     isCsatSubmitted: s,
     submittedScore: i,
     submittedFeedback: a
-  } = Nt(), [l, c] = E(null), [p, v] = E(null), b = (h) => {
+  } = Nt(), [l, c] = R(null), [p, v] = R(null), b = (h) => {
     c((x) => x === h ? null : h);
   }, u = () => {
     l && t({
@@ -1540,7 +1543,7 @@ function ko() {
           s && "gap-0 justify-center"
         ),
         children: yo.map((h) => /* @__PURE__ */ r(
-          N,
+          S,
           {
             variant: h.value === l ? "secondary" : "ghost",
             size: "selfless",
@@ -1583,7 +1586,7 @@ function ko() {
         }
       ),
       /* @__PURE__ */ r(
-        N,
+        S,
         {
           size: "fit",
           onClick: u,
@@ -1615,7 +1618,7 @@ function Ee({
     i && n({ content: i });
   };
   return /* @__PURE__ */ r(
-    N,
+    S,
     {
       ...f("chat/suggested_reply_btn"),
       size: "sm",
@@ -1645,14 +1648,14 @@ function Co() {
   );
 }
 function xt() {
-  const { sessionState: e } = U(), { chatFooterItems: o } = z(), t = !!e.session && !e.session.isOpened, n = !t;
+  const { sessionState: e } = U(), { chatFooterItems: o } = N(), t = !!e.session && !e.session.isOpened, n = !t;
   return /* @__PURE__ */ r(M, { 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(Se, { children: s.message }) }) }, `${s.message}-${i}`)) });
 }
 function zo({
   file: { status: e, file: o, error: t },
   onCancel: n
 }) {
-  const [s, i] = E(
+  const [s, i] = R(
     null
   );
   se(() => {
@@ -1720,18 +1723,18 @@ function zo({
   );
 }
 function No() {
-  var D;
-  const { isSmallScreen: e } = $(), o = B(null), { sendMessage: t } = A(), { sessionState: n } = U(), { disableSendingWhenAwaitingAIReply: s } = z(), { t: i } = V(), [a, l] = E(""), {
+  var E;
+  const { isSmallScreen: e } = $(), o = B(null), { sendMessage: t } = A(), { sessionState: n } = U(), { disableSendingWhenAwaitingAIReply: s } = N(), { t: i } = V(), [a, l] = R(""), {
     allFiles: c,
     emptyTheFiles: p,
     handleCancelUpload: v,
     appendFiles: b,
     isUploading: u,
     successFiles: h
-  } = sr(), x = !!((D = n.session) != null && D.isHandedOff), { isAwaitingBotReply: C } = St(), I = s !== !1 && C, y = (g) => {
+  } = sr(), x = !!((E = n.session) != null && E.isHandedOff), { isAwaitingBotReply: z } = St(), I = s !== !1 && z, y = (g) => {
     b(g);
-  }, S = !a.trim() && h.length === 0, R = async () => {
-    if (I || S) return;
+  }, k = !a.trim() && h.length === 0, D = async () => {
+    if (I || k) return;
     u && console.info("please wait for the file(s) to upload");
     const g = a.trim();
     t({
@@ -1807,7 +1810,7 @@ function No() {
                       {
                         ...f("chat/input_box/attachments_container"),
                         className: "flex items-center gap-1",
-                        children: /* @__PURE__ */ r(M, { mode: "popLayout", children: c.map((g) => /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ r(
+                        children: /* @__PURE__ */ r(M, { mode: "popLayout", children: c.map((g) => /* @__PURE__ */ r(C, { snapExit: !0, children: /* @__PURE__ */ r(
                           zo,
                           {
                             onCancel: () => v(g.id),
@@ -1838,7 +1841,7 @@ function No() {
                         ),
                         onChange: (g) => l(g.target.value),
                         onKeyDown: async (g) => {
-                          g.key === "Enter" && !g.shiftKey && (g.preventDefault(), R());
+                          g.key === "Enter" && !g.shiftKey && (g.preventDefault(), D());
                         },
                         placeholder: i("write_a_message_placeholder")
                       }
@@ -1854,7 +1857,7 @@ function No() {
                     align: "start",
                     content: "attach images, PDFs, or spreadsheets (maximum size 5mb)",
                     children: /* @__PURE__ */ r(
-                      N,
+                      S,
                       {
                         onClick: T,
                         size: "fit",
@@ -1862,19 +1865,19 @@ function No() {
                         className: m(
                           "rounded-full size-8 flex items-center justify-center p-0 overflow-hidden"
                         ),
-                        children: /* @__PURE__ */ r(M, { mode: "wait", children: I ? /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(dt, { className: "size-4 opacity-50" }) }, "paper-clip-disabled") : /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(dt, { className: "size-4" }) }, "paper-clip") })
+                        children: /* @__PURE__ */ r(M, { mode: "wait", children: I ? /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(dt, { className: "size-4 opacity-50" }) }, "paper-clip-disabled") : /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(dt, { className: "size-4" }) }, "paper-clip") })
                       }
                     )
                   }
                 ),
                 /* @__PURE__ */ r(oe, { content: "send message", side: "top", align: "end", children: /* @__PURE__ */ r(
-                  N,
+                  S,
                   {
                     size: "fit",
-                    onClick: R,
-                    disabled: I || u || S,
+                    onClick: D,
+                    disabled: I || u || k,
                     className: "rounded-full size-8 flex items-center justify-center p-0",
-                    children: /* @__PURE__ */ r(M, { mode: "wait", children: I || u ? /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ r(Ir, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ r(Dt, { className: "size-4" }) }, "send") })
+                    children: /* @__PURE__ */ r(M, { mode: "wait", children: I || u ? /* @__PURE__ */ r(C, { snapExit: !0, children: /* @__PURE__ */ r(Ir, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ r(C, { snapExit: !0, children: /* @__PURE__ */ r(Dt, { className: "size-4" }) }, "send") })
                   }
                 ) })
               ] })
@@ -1886,8 +1889,8 @@ function No() {
   );
 }
 function vt() {
-  const { widgetCtx: e } = O(), { router: o } = z(), { canCreateNewSession: t } = U(), { toSessionsScreen: n } = H(), { t: s } = V();
-  return /* @__PURE__ */ r(J, { children: t || o != null && o.chatScreenOnly ? /* @__PURE__ */ r(N, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new_conversation") }) : /* @__PURE__ */ r(N, { onClick: n, className: "rounded-2xl w-full", children: s("back_to_conversations") }) });
+  const { widgetCtx: e } = O(), { router: o } = N(), { canCreateNewSession: t } = U(), { toSessionsScreen: n } = H(), { t: s } = V();
+  return /* @__PURE__ */ r(J, { children: t || o != null && o.chatScreenOnly ? /* @__PURE__ */ r(S, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new_conversation") }) : /* @__PURE__ */ r(S, { onClick: n, className: "rounded-2xl w-full", children: s("back_to_conversations") }) });
 }
 function So() {
   const { t: e } = V(), { isCsatRequested: o, isCsatSubmitted: t } = Nt();
@@ -1904,7 +1907,7 @@ function So() {
 }
 function _o() {
   var a;
-  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = z(), { sessionState: n } = U(), { messagesState: s } = A(), i = s.messages.length === 0;
+  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = N(), { sessionState: n } = U(), { messagesState: s } = A(), i = s.messages.length === 0;
   return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(M, { mode: "wait", children: n.session && !((a = n.session) != null && a.isOpened) ? /* @__PURE__ */ d(W, { children: [
     /* @__PURE__ */ r(So, {}),
     /* @__PURE__ */ r(xt, {})
@@ -1969,7 +1972,7 @@ function Qt({
   containerClassName: t
 }) {
   var a, l;
-  const { timestamps: n } = z();
+  const { timestamps: n } = N();
   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;
@@ -2163,7 +2166,7 @@ function Oo() {
     initialQuestionsPosition: t,
     initialQuestions: n,
     bot: s
-  } = z();
+  } = N();
   return /* @__PURE__ */ r(J, { children: e.length === 0 && o.length > 0 && /* @__PURE__ */ r(
     pe,
     {
@@ -2184,7 +2187,7 @@ function Oo() {
 function Ao() {
   const {
     messagesState: { messages: e }
-  } = A(), { chatBannerItems: o } = z();
+  } = A(), { chatBannerItems: o } = N();
   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(Se, { children: t }) }, `${t}-${s}`)
   ) });
@@ -2192,7 +2195,7 @@ function Ao() {
 function Fo() {
   const {
     messagesState: { messages: e }
-  } = A(), o = z(), {
+  } = A(), o = N(), {
     advancedInitialMessages: t = [],
     initialQuestions: n,
     initialQuestionsPosition: s
@@ -2225,7 +2228,7 @@ function Ho() {
 function Wo() {
   const {
     messagesState: { messages: e }
-  } = A(), { isAwaitingBotReply: o } = St(), { componentStore: t } = O(), { bot: n, humanAgent: s } = z(), i = Ct(
+  } = A(), { isAwaitingBotReply: o } = St(), { componentStore: t } = O(), { bot: n, humanAgent: s } = N(), i = Ct(
     () => Eo(e),
     [e]
   ), a = t.getComponent(
@@ -2250,14 +2253,14 @@ function Wo() {
         /* @__PURE__ */ r(Oo, {}),
         /* @__PURE__ */ r(Fo, {}),
         i.map((p, v) => {
-          var h, x, C, I;
+          var h, x, z, I;
           const b = (h = p == null ? void 0 : p[0]) == null ? void 0 : h.type, u = (x = p[0]) == null ? void 0 : x.id;
           if (!b || !u) return null;
           if (Ro(p))
             return /* @__PURE__ */ r(Do, { messages: p }, u);
           if (Po(p)) {
             const y = v === i.length - 1;
-            return o && y ? null : ((C = p[0]) == null || C.agent, /* @__PURE__ */ r(
+            return o && y ? null : ((z = p[0]) == null || z.agent, /* @__PURE__ */ r(
               pe,
               {
                 messages: p,
@@ -2324,14 +2327,14 @@ function Lo() {
       children: /* @__PURE__ */ d("div", { className: "size-full justify-between flex flex-col", children: [
         /* @__PURE__ */ r(Zt, {}),
         /* @__PURE__ */ r(M, { mode: "wait", children: e ? /* @__PURE__ */ r(
-          k,
+          C,
           {
             className: "flex flex-col items-center justify-center w-full flex-1",
             children: /* @__PURE__ */ r(Kt, {})
           },
           "loading"
         ) : /* @__PURE__ */ d(
-          k,
+          C,
           {
             className: "flex items-start h-full flex-1 overflow-auto",
             snapExit: !0,
@@ -2410,7 +2413,7 @@ function Bo({ className: e }) {
   );
 }
 function Jt({ className: e }) {
-  const { token: o } = z();
+  const { token: o } = N();
   return /* @__PURE__ */ r(
     "div",
     {
@@ -2449,9 +2452,9 @@ function bt({
   session: e,
   className: o
 }) {
-  const { bot: t, humanAgent: n } = z(), { 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) || "";
+  const { bot: t, humanAgent: n } = N(), { 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,
+    S,
     {
       variant: "ghost",
       size: "lg",
@@ -2462,13 +2465,13 @@ function bt({
       onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ d("div", { className: "flex-1 flex gap-2 items-center", children: [
-          /* @__PURE__ */ r(M, { mode: "wait", children: /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ d(_e, { className: "size-10", children: [
+          /* @__PURE__ */ r(M, { mode: "wait", children: /* @__PURE__ */ r(C, { snapExit: !0, children: /* @__PURE__ */ d(_e, { className: "size-10", children: [
             /* @__PURE__ */ r(Ie, { src: a, alt: "Agent Icon" }),
             /* @__PURE__ */ r(Te, { children: /* @__PURE__ */ r(Pr, { className: "size-4" }) })
           ] }) }) }),
           /* @__PURE__ */ d("div", { className: "flex-1", children: [
-            /* @__PURE__ */ r(M, { mode: "wait", children: /* @__PURE__ */ r(k, { snapExit: !0, children: i }, i) }),
-            /* @__PURE__ */ r(M, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r(M, { mode: "wait", children: /* @__PURE__ */ r(C, { snapExit: !0, children: i }, i) }),
+            /* @__PURE__ */ r(M, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ r(C, { snapExit: !0, children: /* @__PURE__ */ r(
               Yt,
               {
                 remarkPlugins: [Et],
@@ -2476,7 +2479,7 @@ function bt({
                 className: "line-clamp-1 overflow-hidden text-ellipsis text-xs text-muted-foreground",
                 children: e.lastMessage
               }
-            ) }, e.lastMessage || "content") : /* @__PURE__ */ r(k, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ r($o, { className: "h-4 w-full" }) }, "skeleton") })
+            ) }, e.lastMessage || "content") : /* @__PURE__ */ r(C, { className: "w-1/2", snapExit: !0, children: /* @__PURE__ */ r($o, { className: "h-4 w-full" }) }, "skeleton") })
           ] })
         ] }),
         /* @__PURE__ */ r(jr, { className: "size-4 text-muted-foreground shrink-0 rtl:-scale-100" })
@@ -2492,20 +2495,20 @@ function Uo() {
     canCreateNewSession: a
   } = U();
   return /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col overflow-scroll py-2 px-2", children: /* @__PURE__ */ r(M, { mode: "wait", children: n ? /* @__PURE__ */ r(
-    k,
+    C,
     {
       className: "flex-1 flex items-center justify-center",
       children: /* @__PURE__ */ r(Kt, {})
     },
     "loading"
   ) : /* @__PURE__ */ r(
-    k,
+    C,
     {
       className: "flex-1 flex flex-col gap-2 relative",
       children: t.length ? /* @__PURE__ */ d(J, { children: [
         /* @__PURE__ */ d(M, { children: [
           s.length > 0 && /* @__PURE__ */ r(
-            k,
+            C,
             {
               fadeIn: "up",
               delay: 0.2,
@@ -2516,7 +2519,7 @@ function Uo() {
             "open-sessions"
           ),
           i.length > 0 && /* @__PURE__ */ d(
-            k,
+            C,
             {
               className: "space-y-2",
               delay: 0.2,
@@ -2537,7 +2540,7 @@ function Uo() {
           )
         ] }),
         a && /* @__PURE__ */ r("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ ct(
-          N,
+          S,
           {
             ...f("sessions/new_conversation_btn"),
             size: "lg",
@@ -2550,7 +2553,7 @@ function Uo() {
       ] }) : /* @__PURE__ */ d("div", { className: "flex-1 flex flex-col gap-2 items-center", children: [
         /* @__PURE__ */ r("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ r("p", { className: "text-muted-foreground", children: e("no_conversations_yet") }) }),
         /* @__PURE__ */ ct(
-          N,
+          S,
           {
             ...f("sessions/new_conversation_btn"),
             size: "lg",
@@ -2616,7 +2619,7 @@ const de = ee.forwardRef(
 );
 de.displayName = "Input";
 function qo() {
-  const { contentIframeRef: e } = O(), { inline: o } = z(), t = B(null);
+  const { contentIframeRef: e } = O(), { inline: o } = N(), t = B(null);
   return se(() => {
     const n = e == null ? void 0 : e.current;
     if (n && t.current) {
@@ -2642,17 +2645,17 @@ const Vo = ue.object({
   email: ue.string().email()
 });
 function Go() {
-  var y, S, R, j, w, T, P, D;
+  var y, k, D, j, w, T, P, E;
   const {
     widgetCtx: { org: e }
-  } = O(), { setIsOpen: o } = Z(), { createUnverifiedContact: t } = _t(), { isSmallScreen: n } = $(), s = z(), { theme: i } = K(), { t: a } = V(), { observedElementRef: l } = qo();
+  } = O(), { setIsOpen: o } = Z(), { createUnverifiedContact: t } = _t(), { isSmallScreen: n } = $(), s = N(), { theme: i } = K(), { t: a } = V(), { observedElementRef: l } = qo();
   Me({
     height: void 0,
     width: i.screens.welcome.width
   });
-  const [c, p] = E(((y = s.prefillUserData) == null ? void 0 : y.name) || ""), [v, b] = E(((S = s.prefillUserData) == null ? void 0 : S.email) || ""), u = (s.extraDataCollectionFields || []).filter(
+  const [c, p] = R(((y = s.prefillUserData) == null ? void 0 : y.name) || ""), [v, b] = R(((k = s.prefillUserData) == null ? void 0 : k.email) || ""), u = (s.extraDataCollectionFields || []).filter(
     (g) => g !== "name" && g !== "email" && !!g
-  ), [h, x] = E({}), [C, I] = Xr(
+  ), [h, x] = R({}), [z, I] = Xr(
     async (g) => {
       g.preventDefault();
       const _ = Vo.safeParse({ name: c, email: v });
@@ -2700,8 +2703,8 @@ function Go() {
                   "text-primary-foreground"
                 ),
                 children: [
-                  n && /* @__PURE__ */ r(k, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(N, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(Ce, { className: "size-4" }) }) }),
-                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (R = s.assets) != null && R.organizationLogo ? /* @__PURE__ */ r(
+                  n && /* @__PURE__ */ r(C, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(S, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(Ce, { className: "size-4" }) }) }),
+                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (D = s.assets) != null && D.organizationLogo ? /* @__PURE__ */ r(
                     "img",
                     {
                       src: (j = s.assets) == null ? void 0 : j.organizationLogo,
@@ -2711,7 +2714,7 @@ function Go() {
                   ) : /* @__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: ((T = (w = s.textContent) == null ? void 0 : w.welcomeScreen) == null ? void 0 : T.title) || a("welcome_screen_title") }),
-                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((D = (P = s.textContent) == null ? void 0 : P.welcomeScreen) == null ? void 0 : D.description) || a("welcome_screen_description") })
+                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((E = (P = s.textContent) == null ? void 0 : P.welcomeScreen) == null ? void 0 : E.description) || a("welcome_screen_description") })
                   ] })
                 ]
               }
@@ -2761,13 +2764,13 @@ function Go() {
                       g
                     )),
                     /* @__PURE__ */ d(
-                      N,
+                      S,
                       {
-                        disabled: C.loading,
+                        disabled: z.loading,
                         className: "w-full",
                         size: "lg",
                         children: [
-                          C.loading ? a("start_chat_button_loading") : a("start_chat_button"),
+                          z.loading ? a("start_chat_button_loading") : a("start_chat_button"),
                           /* @__PURE__ */ r(Or, { className: "size-4 rtl:-scale-100" })
                         ]
                       }
@@ -2791,7 +2794,7 @@ function er() {
     switch (e) {
       case "welcome":
         return /* @__PURE__ */ r(
-          k,
+          C,
           {
             fadeIn: "right",
             className: "size-full",
@@ -2802,7 +2805,7 @@ function er() {
         );
       case "sessions":
         return /* @__PURE__ */ r(
-          k,
+          C,
           {
             fadeIn: "right",
             className: "size-full",
@@ -2813,7 +2816,7 @@ function er() {
         );
       case "chat":
         return /* @__PURE__ */ r(
-          k,
+          C,
           {
             fadeIn: "right",
             className: "size-full",
@@ -2827,7 +2830,7 @@ function er() {
     }
   })() }) });
 }
-const Zo = "4.0.56", Ko = `<!DOCTYPE html>
+const Zo = "4.0.57", Ko = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2846,7 +2849,7 @@ html, body {
 </body>
 </html>`;
 function tr() {
-  const { isOpen: e } = Z(), { contentIframeRef: o } = O(), { cssOverrides: t, inline: n } = z(), { theme: s, cssVars: i, computed: a } = K(), { dir: l } = V();
+  const { isOpen: e } = Z(), { contentIframeRef: o } = O(), { cssOverrides: t, inline: n } = N(), { theme: s, cssVars: i, computed: a } = K(), { dir: l } = V();
   return /* @__PURE__ */ r(
     re.div,
     {
@@ -3004,7 +3007,7 @@ html, body {
 </html>`;
 function tn() {
   var p, v, b;
-  const { isOpen: e, setIsOpen: o } = Z(), { cssOverrides: t, assets: n, customComponents: s, accessibility: i } = z(), { theme: a, cssVars: l } = K(), c = ((p = i == null ? void 0 : i.widgetTriggerButton) == null ? void 0 : p.label) ?? "Chat with us";
+  const { isOpen: e, setIsOpen: o } = Z(), { cssOverrides: t, assets: n, customComponents: s, accessibility: i } = N(), { theme: a, cssVars: l } = K(), 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,
@@ -3067,7 +3070,7 @@ function tn() {
                       "text-primary-foreground"
                     ),
                     children: /* @__PURE__ */ r(M, { mode: "wait", children: e ? /* @__PURE__ */ r(
-                      k,
+                      C,
                       {
                         snapExit: !0,
                         fadeIn: "up",
@@ -3097,7 +3100,7 @@ function tn() {
                       },
                       "x-icon"
                     ) : /* @__PURE__ */ r(
-                      k,
+                      C,
                       {
                         snapExit: !0,
                         overrides: {