@opencx/widget-react 4.0.56 → 4.0.58

package/dist/index.js

@@ -1,12 +1,12 @@
 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 L, { memo as rr, forwardRef as yt, useState as P, 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 { 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";
-import { motion as re, AnimatePresence as M } from "framer-motion";
+import { motion as re, AnimatePresence as D } from "framer-motion";
 import { Slot as Wr } from "@radix-ui/react-slot";
 import { cva as Lr } from "class-variance-authority";
 import Et from "remark-gfm";
@@ -61,20 +61,20 @@ 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] = P(!1), [l, c] = P({ 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 R, g;
+        const { clientX: C, clientY: T } = x, y = x.currentTarget.getBoundingClientRect(), N = C - (y.left + y.width / 2), _ = T - (y.top + y.height / 2), E = Math.max(
           -1,
-          Math.min(1, S / (y.width / 2))
+          Math.min(1, N / (y.width / 2))
         ), w = Math.max(
           -1,
-          Math.min(1, R / (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);
+          Math.min(1, _ / (y.height / 2))
+        ), M = E * Q.x, j = w * Q.y;
+        c({ x: M, y: j }), (g = (R = e.props).onMouseMove) == null || g.call(R, x);
       }, b = () => {
         var x, C;
         a(!0), (C = (x = e.props).onMouseEnter) == null || C.call(x);
@@ -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] = P(!1), [n, s] = P(null), i = (l) => {
     s(l), t(!0);
   }, a = () => {
     t(!1), setTimeout(() => {
@@ -243,7 +243,7 @@ function to() {
         s
       );
     };
-  }, []), /* @__PURE__ */ r(M, { mode: "wait", children: o && t && /* @__PURE__ */ r(
+  }, []), /* @__PURE__ */ r(D, { mode: "wait", children: o && t && /* @__PURE__ */ r(
     k,
     {
       overrides: {
@@ -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,22 +366,22 @@ 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] = P(1), [s, i] = P({ x: 0, y: 0 }), [a, l] = P(!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(() => {
     n((w) => h(w + le));
-  }, []), I = G(() => {
+  }, []), T = G(() => {
     n((w) => {
-      const T = h(w - le);
-      return T <= 1 && i({ x: 0, y: 0 }), T;
+      const M = h(w - le);
+      return M <= 1 && i({ x: 0, y: 0 }), M;
     });
   }, []);
   G((w) => {
     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 M = w.deltaY > 0 ? -le : le;
+    n((j) => {
+      const R = h(j + M);
+      return R <= 1 && i({ x: 0, y: 0 }), R;
     });
   }, []);
   const y = G(
@@ -389,24 +389,24 @@ 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(
+  ), N = 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 = {
-        x: p.current.x + T / t,
-        y: p.current.y + P / t
+      const M = w.clientX - c.current.x, j = w.clientY - c.current.y;
+      if ((Math.abs(M) > 3 || Math.abs(j) > 3) && (u.current = !0), t <= 1) return;
+      const R = {
+        x: p.current.x + M / t,
+        y: p.current.y + j / t
       };
       i(
-        oo(D, t, v.current, b.current)
+        oo(R, t, v.current, b.current)
       );
     },
     [a, t]
-  ), R = G(() => {
+  ), _ = G(() => {
     const w = u.current;
-    l(!1), !w && n((T) => T > 1 ? (i({ x: 0, y: 0 }), 1) : ro);
-  }, []), j = t > 1;
+    l(!1), !w && n((M) => M > 1 ? (i({ x: 0, y: 0 }), 1) : ro);
+  }, []), E = t > 1;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -419,14 +419,14 @@ function $t({
             ref: v,
             className: m(
               "overflow-hidden max-h-full max-w-full rounded-2xl flex items-center justify-center",
-              j && "size-full"
+              E && "size-full"
             ),
             onPointerDown: y,
-            onPointerMove: S,
-            onPointerUp: R,
-            onPointerCancel: R,
+            onPointerMove: N,
+            onPointerUp: _,
+            onPointerCancel: _,
             style: {
-              cursor: a ? "grabbing" : j ? "grab" : "zoom-in",
+              cursor: a ? "grabbing" : E ? "grab" : "zoom-in",
               touchAction: "none"
             },
             children: /* @__PURE__ */ r(
@@ -448,13 +448,13 @@ function $t({
           }
         ),
         /* @__PURE__ */ d("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1 bg-black/60 backdrop-blur-sm rounded-full px-1.5 py-1 transition opacity-50 hover:opacity-100", children: [
-          /* @__PURE__ */ r(we, { onClick: I, label: "Zoom out", disabled: t <= ht, children: /* @__PURE__ */ r(cr, { className: "size-3.5" }) }),
+          /* @__PURE__ */ r(we, { onClick: T, label: "Zoom out", disabled: t <= ht, children: /* @__PURE__ */ r(cr, { className: "size-3.5" }) }),
           /* @__PURE__ */ d("span", { className: "text-white text-xs font-medium min-w-[3ch] text-center tabular-nums", children: [
             Math.round(t * 100),
             "%"
           ] }),
           /* @__PURE__ */ r(we, { onClick: C, label: "Zoom in", disabled: t >= gt, children: /* @__PURE__ */ r(dr, { className: "size-3.5" }) }),
-          j && /* @__PURE__ */ d(J, { children: [
+          E && /* @__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" }) })
           ] })
@@ -778,7 +778,7 @@ function ve({
   ] });
 }
 function ao({ agent: e }) {
-  return /* @__PURE__ */ r(M, { children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ r(D, { children: /* @__PURE__ */ d(
     k,
     {
       ...f("chat/bot_loading/root"),
@@ -855,17 +855,17 @@ 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;
+  var b, u, h, x, C, T, y, N, _, E, w, M, j, R, g, I, 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 = {
     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"),
-      left: ((y = (I = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : I.offset) == null ? void 0 : y.left) ?? (e === "rtl" ? 20 : "initial")
+      left: ((y = (T = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : T.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,
-      icon: ((w = (j = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : j.size) == null ? void 0 : w.icon) ?? 24
+      button: ((_ = (N = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : N.size) == null ? void 0 : _.button) ?? 48,
+      icon: ((w = (E = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : E.size) == null ? void 0 : w.icon) ?? 24
     }
   }, c = (() => {
     const q = e === "ltr" ? l.offset.right : l.offset.left;
@@ -875,12 +875,12 @@ function K() {
     primaryColor: (t == null ? void 0 : t.primaryColor) ?? "hsl(0 0% 9%)",
     widgetTrigger: l,
     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",
+      borderRadius: o ? "0px" : ((M = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : M.borderRadius) ?? "32px",
+      zIndex: ((j = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : j.zIndex) ?? l.zIndex + 1,
+      outline: ((R = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : R.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)",
+      boxShadow: ((I = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : I.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,
       transitionDuration: ((Pe = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Pe.transitionDuration) ?? ce.transitionDuration,
@@ -1175,7 +1175,7 @@ function uo() {
     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] = P(!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",
@@ -1254,13 +1254,14 @@ function be({
 function Gt({
   button: e
 }) {
-  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);
+  var T, y;
+  const { close: o } = he(), { widgetCtx: t } = O(), { setIsOpen: n } = Z(), { resolveSession: s, sessionState: i } = U(), { isSmallScreen: a } = $(), l = X(), c = !i.session, p = ((T = i.session) == null ? void 0 : T.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: N, error: _ } = await s();
+    if (o(), !N)
+      return console.error(_), !1;
     switch (v) {
       case "stay-in-chat":
-        return;
+        break;
       case "close-widget":
         n(!1);
         break;
@@ -1274,6 +1275,7 @@ function Gt({
         F(v, Gt.name);
         break;
     }
+    return !0;
   }, C = () => {
     if (c)
       switch (b) {
@@ -1314,15 +1316,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 N;
+            return (N = e.onClicked) == null ? void 0 : N.call(e, l);
           },
           children: /* @__PURE__ */ r(ne, { name: e.icon })
         }
@@ -1332,7 +1334,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 +1343,13 @@ function Gt({
             }
           ),
           /* @__PURE__ */ r(
-            N,
+            S,
             {
               variant: "destructive",
-              onClick: x,
+              onClick: async () => {
+                var _, E;
+                await x() && ((E = (_ = e.confirmation) == null ? void 0 : _.onResolved) == null || E.call(_, l));
+              },
               disabled: i.isResolvingSession,
               children: e.confirmation.confirmButtonText || "Yes"
             }
@@ -1353,14 +1358,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 N;
+        p || c ? C() : x(), (N = e.onClicked) == null || N.call(e, l);
       },
       disabled: h,
       children: /* @__PURE__ */ r(ne, { name: e.icon })
@@ -1435,7 +1440,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] = P(!1), l = async (c) => {
     try {
       a(!0), await n(c);
     } catch (p) {
@@ -1520,7 +1525,7 @@ function ko() {
     isCsatSubmitted: s,
     submittedScore: i,
     submittedFeedback: a
-  } = Nt(), [l, c] = E(null), [p, v] = E(null), b = (h) => {
+  } = Nt(), [l, c] = P(null), [p, v] = P(null), b = (h) => {
     c((x) => x === h ? null : h);
   }, u = () => {
     l && t({
@@ -1529,7 +1534,7 @@ function ko() {
     });
   };
   return !n && !s ? null : /* @__PURE__ */ d("div", { className: "w-1/2 min-w-80 max-w-96 mx-auto overflow-hidden", children: [
-    /* @__PURE__ */ r(M, { mode: "wait", children: n && !l ? /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: o("csat_title") }) }, "csat-requested-title") : s ? /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: o("csat_submitted_title") }) }, "csat-submitted-title") : null }),
+    /* @__PURE__ */ r(D, { mode: "wait", children: n && !l ? /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: o("csat_title") }) }, "csat-requested-title") : s ? /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r("p", { className: "text-sm text-muted-foreground text-center pt-2", children: o("csat_submitted_title") }) }, "csat-submitted-title") : null }),
     /* @__PURE__ */ r(
       "div",
       {
@@ -1540,7 +1545,7 @@ function ko() {
           s && "gap-0 justify-center"
         ),
         children: yo.map((h) => /* @__PURE__ */ r(
-          N,
+          S,
           {
             variant: h.value === l ? "secondary" : "ghost",
             size: "selfless",
@@ -1561,7 +1566,7 @@ function ko() {
         ))
       }
     ),
-    /* @__PURE__ */ r(M, { mode: "wait", children: (l || i) && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ d("div", { className: "pb-2 px-2 flex items-end", children: [
+    /* @__PURE__ */ r(D, { mode: "wait", children: (l || i) && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ d("div", { className: "pb-2 px-2 flex items-end", children: [
       /* @__PURE__ */ r(
         "textarea",
         {
@@ -1583,7 +1588,7 @@ function ko() {
         }
       ),
       /* @__PURE__ */ r(
-        N,
+        S,
         {
           size: "fit",
           onClick: u,
@@ -1615,7 +1620,7 @@ function Ee({
     i && n({ content: i });
   };
   return /* @__PURE__ */ r(
-    N,
+    S,
     {
       ...f("chat/suggested_reply_btn"),
       size: "sm",
@@ -1646,13 +1651,13 @@ function Co() {
 }
 function xt() {
   const { sessionState: e } = U(), { chatFooterItems: o } = z(), 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}`)) });
+  return /* @__PURE__ */ r(D, { 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] = P(
     null
   );
   se(() => {
@@ -1720,38 +1725,38 @@ 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 R;
+  const { isSmallScreen: e } = $(), o = B(null), { sendMessage: t } = A(), { sessionState: n } = U(), { disableSendingWhenAwaitingAIReply: s } = z(), { t: i } = V(), [a, l] = P(""), {
     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 = !!((R = n.session) != null && R.isHandedOff), { isAwaitingBotReply: C } = St(), T = s !== !1 && C, y = (g) => {
     b(g);
-  }, S = !a.trim() && h.length === 0, R = async () => {
-    if (I || S) return;
+  }, N = !a.trim() && h.length === 0, _ = async () => {
+    if (T || N) return;
     u && console.info("please wait for the file(s) to upload");
     const g = a.trim();
     t({
       content: g,
       attachments: h.flatMap(
-        (_) => _.fileUrl ? [
+        (I) => I.fileUrl ? [
           {
-            url: _.fileUrl,
-            type: _.file.type,
-            name: _.file.name,
-            id: _.id,
-            size: _.file.size
+            url: I.fileUrl,
+            type: I.file.type,
+            name: I.file.name,
+            id: I.id,
+            size: I.file.size
           }
         ] : []
       )
     }), l(""), p();
   }, {
-    getRootProps: j,
+    getRootProps: E,
     getInputProps: w,
-    open: T
+    open: M
   } = Ur({
     onDrop: y,
     noClick: !0,
@@ -1772,16 +1777,16 @@ function No() {
       "application/pdf": [".pdf"],
       ...mt
     }
-  }), P = (g) => {
-    const _ = g.clipboardData;
-    _ && _.files.length > 0 && y(Array.from(_.files));
+  }), j = (g) => {
+    const I = g.clipboardData;
+    I && I.files.length > 0 && y(Array.from(I.files));
   };
   return /* @__PURE__ */ d(
     "div",
     {
       ...f("chat/input_box/root"),
       className: "p-2 relative space-y-1",
-      ...j(),
+      ...E(),
       children: [
         /* @__PURE__ */ r("input", { ...w() }),
         /* @__PURE__ */ d(
@@ -1807,7 +1812,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(D, { mode: "popLayout", children: c.map((g) => /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ r(
                           zo,
                           {
                             onCancel: () => v(g.id),
@@ -1820,7 +1825,7 @@ function No() {
                       "textarea",
                       {
                         ...f("chat/input_box/textarea"),
-                        onPaste: P,
+                        onPaste: j,
                         ref: o,
                         id: "chat-input",
                         value: a,
@@ -1838,7 +1843,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(), _());
                         },
                         placeholder: i("write_a_message_placeholder")
                       }
@@ -1854,27 +1859,27 @@ function No() {
                     align: "start",
                     content: "attach images, PDFs, or spreadsheets (maximum size 5mb)",
                     children: /* @__PURE__ */ r(
-                      N,
+                      S,
                       {
-                        onClick: T,
+                        onClick: M,
                         size: "fit",
                         variant: "ghost",
                         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(D, { mode: "wait", children: T ? /* @__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") })
                       }
                     )
                   }
                 ),
                 /* @__PURE__ */ r(oe, { content: "send message", side: "top", align: "end", children: /* @__PURE__ */ r(
-                  N,
+                  S,
                   {
                     size: "fit",
-                    onClick: R,
-                    disabled: I || u || S,
+                    onClick: _,
+                    disabled: T || u || N,
                     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(D, { mode: "wait", children: T || 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") })
                   }
                 ) })
               ] })
@@ -1887,13 +1892,13 @@ 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") }) });
+  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();
-  return /* @__PURE__ */ r("div", { className: "p-2", children: /* @__PURE__ */ r("div", { className: "p-2 bg-muted rounded-3xl", children: /* @__PURE__ */ r(M, { mode: "wait", children: o || t ? /* @__PURE__ */ d(W, { children: [
+  return /* @__PURE__ */ r("div", { className: "p-2", children: /* @__PURE__ */ r("div", { className: "p-2 bg-muted rounded-3xl", children: /* @__PURE__ */ r(D, { mode: "wait", children: o || t ? /* @__PURE__ */ d(W, { children: [
     /* @__PURE__ */ r(ko, {}),
-    /* @__PURE__ */ r(M, { mode: "wait", children: t && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(vt, {}) }, "new-conv-or-back-to-convs-button") })
+    /* @__PURE__ */ r(D, { mode: "wait", children: t && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(vt, {}) }, "new-conv-or-back-to-convs-button") })
   ] }, "csat") : /* @__PURE__ */ d(W, { children: [
     /* @__PURE__ */ d("div", { className: "ps-2 flex items-center gap-1 pb-2", children: [
       /* @__PURE__ */ r(Mt, { className: "size-4 text-emerald-600" }),
@@ -1905,7 +1910,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;
-  return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(M, { mode: "wait", children: n.session && !((a = n.session) != null && a.isOpened) ? /* @__PURE__ */ d(W, { children: [
+  return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(D, { mode: "wait", children: n.session && !((a = n.session) != null && a.isOpened) ? /* @__PURE__ */ d(W, { children: [
     /* @__PURE__ */ r(So, {}),
     /* @__PURE__ */ r(xt, {})
   ] }, "session-closed") : /* @__PURE__ */ d(W, { children: [
@@ -2250,7 +2255,7 @@ function Wo() {
         /* @__PURE__ */ r(Oo, {}),
         /* @__PURE__ */ r(Fo, {}),
         i.map((p, v) => {
-          var h, x, C, I;
+          var h, x, C, T;
           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))
@@ -2267,7 +2272,7 @@ function Wo() {
             ));
           }
           if (jo(p)) {
-            const y = (I = p[0]) == null ? void 0 : I.agent;
+            const y = (T = p[0]) == null ? void 0 : T.agent;
             return /* @__PURE__ */ r(
               pe,
               {
@@ -2323,7 +2328,7 @@ 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(
+        /* @__PURE__ */ r(D, { mode: "wait", children: e ? /* @__PURE__ */ r(
           k,
           {
             className: "flex flex-col items-center justify-center w-full flex-1",
@@ -2451,7 +2456,7 @@ function bt({
 }) {
   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) || "";
   return /* @__PURE__ */ d(
-    N,
+    S,
     {
       variant: "ghost",
       size: "lg",
@@ -2462,13 +2467,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(D, { mode: "wait", children: /* @__PURE__ */ r(k, { 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(D, { mode: "wait", children: /* @__PURE__ */ r(k, { snapExit: !0, children: i }, i) }),
+            /* @__PURE__ */ r(D, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ r(k, { snapExit: !0, children: /* @__PURE__ */ r(
               Yt,
               {
                 remarkPlugins: [Et],
@@ -2491,7 +2496,7 @@ function Uo() {
     closedSessions: i,
     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(
+  return /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col overflow-scroll py-2 px-2", children: /* @__PURE__ */ r(D, { mode: "wait", children: n ? /* @__PURE__ */ r(
     k,
     {
       className: "flex-1 flex items-center justify-center",
@@ -2503,7 +2508,7 @@ function Uo() {
     {
       className: "flex-1 flex flex-col gap-2 relative",
       children: t.length ? /* @__PURE__ */ d(J, { children: [
-        /* @__PURE__ */ d(M, { children: [
+        /* @__PURE__ */ d(D, { children: [
           s.length > 0 && /* @__PURE__ */ r(
             k,
             {
@@ -2537,7 +2542,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 +2555,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",
@@ -2642,7 +2647,7 @@ const Vo = ue.object({
   email: ue.string().email()
 });
 function Go() {
-  var y, S, R, j, w, T, P, D;
+  var y, N, _, E, w, M, j, R;
   const {
     widgetCtx: { org: e }
   } = O(), { setIsOpen: o } = Z(), { createUnverifiedContact: t } = _t(), { isSmallScreen: n } = $(), s = z(), { theme: i } = K(), { t: a } = V(), { observedElementRef: l } = qo();
@@ -2650,16 +2655,16 @@ function Go() {
     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] = P(((y = s.prefillUserData) == null ? void 0 : y.name) || ""), [v, b] = P(((N = s.prefillUserData) == null ? void 0 : N.email) || ""), u = (s.extraDataCollectionFields || []).filter(
     (g) => g !== "name" && g !== "email" && !!g
-  ), [h, x] = E({}), [C, I] = Xr(
+  ), [h, x] = P({}), [C, T] = Xr(
     async (g) => {
       g.preventDefault();
-      const _ = Vo.safeParse({ name: c, email: v });
-      _.success && await t(
+      const I = Vo.safeParse({ name: c, email: v });
+      I.success && await t(
         {
-          email: _.data.email,
-          non_verified_name: _.data.name
+          email: I.data.email,
+          non_verified_name: I.data.name
         },
         // Only pass extra data if there is any
         Object.values(h).filter(Boolean).length ? h : void 0
@@ -2700,18 +2705,18 @@ 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(k, { 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: (_ = s.assets) != null && _.organizationLogo ? /* @__PURE__ */ r(
                     "img",
                     {
-                      src: (j = s.assets) == null ? void 0 : j.organizationLogo,
+                      src: (E = s.assets) == null ? void 0 : E.organizationLogo,
                       alt: "Company Logo",
                       className: "h-8 w-auto object-contain"
                     }
                   ) : /* @__PURE__ */ r("h2", { className: "font-bold text-sm", children: e.name }) }),
                   /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ r("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((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("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((M = (w = s.textContent) == null ? void 0 : w.welcomeScreen) == null ? void 0 : M.title) || a("welcome_screen_title") }),
+                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((R = (j = s.textContent) == null ? void 0 : j.welcomeScreen) == null ? void 0 : R.description) || a("welcome_screen_description") })
                   ] })
                 ]
               }
@@ -2726,7 +2731,7 @@ function Go() {
                   "rounded-3xl"
                 ),
                 children: [
-                  /* @__PURE__ */ d("form", { onSubmit: I, className: "space-y-2", children: [
+                  /* @__PURE__ */ d("form", { onSubmit: T, className: "space-y-2", children: [
                     /* @__PURE__ */ r(
                       de,
                       {
@@ -2752,16 +2757,16 @@ function Go() {
                       de,
                       {
                         value: h[g],
-                        onChange: (_) => x((ie) => ({
+                        onChange: (I) => x((ie) => ({
                           ...ie,
-                          [g]: _.target.value
+                          [g]: I.target.value
                         })),
                         placeholder: `${g} (${a("optional")})`
                       },
                       g
                     )),
                     /* @__PURE__ */ d(
-                      N,
+                      S,
                       {
                         disabled: C.loading,
                         className: "w-full",
@@ -2787,7 +2792,7 @@ function er() {
   const {
     routerState: { screen: e }
   } = H();
-  return /* @__PURE__ */ r("div", { className: "relative bg-background size-full", children: /* @__PURE__ */ r(M, { mode: "wait", children: (() => {
+  return /* @__PURE__ */ r("div", { className: "relative bg-background size-full", children: /* @__PURE__ */ r(D, { mode: "wait", children: (() => {
     switch (e) {
       case "welcome":
         return /* @__PURE__ */ r(
@@ -2827,7 +2832,7 @@ function er() {
     }
   })() }) });
 }
-const Zo = "4.0.56", Ko = `<!DOCTYPE html>
+const Zo = "4.0.58", Ko = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -3066,7 +3071,7 @@ function tn() {
                       "bg-primary",
                       "text-primary-foreground"
                     ),
-                    children: /* @__PURE__ */ r(M, { mode: "wait", children: e ? /* @__PURE__ */ r(
+                    children: /* @__PURE__ */ r(D, { mode: "wait", children: e ? /* @__PURE__ */ r(
                       k,
                       {
                         snapExit: !0,