@opencx/widget-react 4.0.36 → 4.0.38

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as c, Fragment as te } from "react/jsx-runtime";
 import * as ce from "@radix-ui/react-popover";
 import * as G from "react";
 import U, { memo as Lt, forwardRef as dt, useState as T, cloneElement as pt, createContext as Bt, useEffect as re, useContext as Yt, useMemo as ht, useRef as de, createElement as ot } from "react";
-import { useWidget as j, useConfig as b, useDocumentDir as ve, useSessions as L, useMessages as E, useWidgetRouter as A, useWidgetTrigger as K, useModes as mt, useCsat as gt, useUploadFiles as Ut, useIsAwaitingBotReply as wt, useContact as qt, WidgetProvider as Xt, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
+import { useWidget as j, useConfig as b, useDocumentDir as ve, useSessions as L, useMessages as E, useWidgetRouter as O, useWidgetTrigger as K, useModes as mt, useCsat as gt, useUploadFiles as Ut, useIsAwaitingBotReply as wt, useContact as qt, WidgetProvider as Xt, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
 import { clsx as Gt } from "clsx";
 import { twMerge as Kt } from "tailwind-merge";
 import { motion as Z, AnimatePresence as _ } from "framer-motion";
@@ -38,15 +38,15 @@ const V = {
       )) return e;
       const y = (w) => {
         var N, S;
-        const { clientX: k, clientY: I } = w, x = w.currentTarget.getBoundingClientRect(), M = k - (x.left + x.width / 2), H = I - (x.top + x.height / 2), F = Math.max(
+        const { clientX: k, clientY: I } = w, f = w.currentTarget.getBoundingClientRect(), M = k - (f.left + f.width / 2), F = I - (f.top + f.height / 2), A = Math.max(
           -1,
-          Math.min(1, M / (x.width / 2))
+          Math.min(1, M / (f.width / 2))
         ), W = Math.max(
           -1,
-          Math.min(1, H / (x.height / 2))
-        ), R = F * V.x, f = W * V.y;
-        d({ x: R, y: f }), (S = (N = e.props).onMouseMove) == null || S.call(N, w);
-      }, v = () => {
+          Math.min(1, F / (f.height / 2))
+        ), R = A * V.x, v = W * V.y;
+        d({ x: R, y: v }), (S = (N = e.props).onMouseMove) == null || S.call(N, w);
+      }, x = () => {
         var w, k;
         i(!0), (k = (w = e.props).onMouseEnter) == null || k.call(w);
       }, m = () => {
@@ -60,7 +60,7 @@ const V = {
       return pt(e, {
         ref: s,
         onMouseMove: y,
-        onMouseEnter: v,
+        onMouseEnter: x,
         onMouseLeave: m,
         style: {
           ...z,
@@ -87,19 +87,19 @@ const Er = 10, Rr = (e, o, t) => ({
   initial: { opacity: 0, x: e, ...o.initial },
   animate: { opacity: 1, x: 0, ...o.animate, transition: { delay: t } },
   exit: { opacity: 0, x: -e, ...o.exit }
-}), Ar = (e, o, t) => ({
+}), Or = (e, o, t) => ({
   initial: { opacity: 0, y: e, ...o.initial },
   animate: { opacity: 1, y: 0, ...o.animate, transition: { delay: t } },
   exit: { opacity: 0, y: -e, ...o.exit }
-}), Or = (e, o, t) => ({
+}), Hr = (e, o, t) => ({
   initial: { opacity: 0, y: -e, ...o.initial },
   animate: { opacity: 1, y: 0, ...o.animate, transition: { delay: t } },
   exit: { opacity: 0, y: e, ...o.exit }
-}), Hr = {
+}), Fr = {
   right: Rr,
   left: Pr,
-  up: Ar,
-  down: Or
+  up: Or,
+  down: Hr
 }, u = dt(
   ({
     fadeIn: e = "down",
@@ -110,12 +110,12 @@ const Er = 10, Rr = (e, o, t) => ({
     delay: a = 0,
     ...i
   }, l) => {
-    const d = e ? Hr[e](o, s, a) : {};
+    const d = e ? Fr[e](o, s, a) : {};
     return n && d.exit && typeof d.exit == "object" && !Array.isArray(d.exit) && (d.exit.transition = { duration: 0 }), /* @__PURE__ */ r(Z.div, { ref: l, ...i, ...d, children: t });
   }
 );
 u.displayName = "MotionDiv";
-const Fr = Zt(
+const Ar = Zt(
   p(
     "inline-flex shrink-0 items-center justify-center gap-2",
     "text-sm font-medium whitespace-nowrap",
@@ -160,7 +160,7 @@ const Fr = Zt(
     {
       ...g("ui_lib/btn"),
       "data-variant": o,
-      className: p(Fr({ variant: o, size: t, className: e })),
+      className: p(Ar({ variant: o, size: t, className: e })),
       ...s
     }
   ) })
@@ -407,7 +407,7 @@ function ge({
         d == null ? void 0 : d.messageContainer
       ),
       children: [
-        n && n.length > 0 && /* @__PURE__ */ r("div", { className: "w-full gap-1 flex flex-row flex-wrap items-center justify-start", children: n == null ? void 0 : n.map((v) => /* @__PURE__ */ r(Tt, { attachment: v }, v.id)) }),
+        n && n.length > 0 && /* @__PURE__ */ r("div", { className: "w-full gap-1 flex flex-row flex-wrap items-center justify-start", children: n == null ? void 0 : n.map((x) => /* @__PURE__ */ r(Tt, { attachment: x }, x.id)) }),
         h.length > 0 && /* @__PURE__ */ r(
           "div",
           {
@@ -547,7 +547,7 @@ function J({
   ] });
 }
 const st = 450;
-function O() {
+function H() {
   const [e, o] = U.useState(() => (window.top || window).innerWidth < st);
   return U.useEffect(() => {
     const t = window.top || window, n = () => {
@@ -563,17 +563,17 @@ const ie = {
   transitionDuration: "1000ms"
 };
 function q() {
-  var v, m, z, w, k, I, x, M, H, F, W, R, f, N, S, B, se, _e, Ie, Te, Me, De, je, Ee, Re, Pe, Ae, Oe, He, Fe, We, $e, Le, Be, Ye, Ue, qe, Xe, Ve, Ge, Ke, Qe, Ze, Je, et, tt, rt;
-  const { dir: e } = ve(), { isSmallScreen: o } = O(), { theme: t, inline: n } = b(), s = (Y) => n ? "100%" : Y, a = (Y, he) => o ? `100dv${Y}` : he, i = (Y, he) => s(a(Y, he)), l = {
-    zIndex: ((v = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : v.zIndex) ?? 1e7,
+  var x, m, z, w, k, I, f, M, F, A, W, R, v, N, S, B, se, _e, Ie, Te, Me, De, je, Ee, Re, Pe, Oe, He, Fe, Ae, We, $e, Le, Be, Ye, Ue, qe, Xe, Ve, Ge, Ke, Qe, Ze, Je, et, tt, rt;
+  const { dir: e } = ve(), { isSmallScreen: o } = H(), { theme: t, inline: n } = b(), s = (Y) => n ? "100%" : Y, a = (Y, he) => o ? `100dv${Y}` : he, i = (Y, he) => s(a(Y, he)), l = {
+    zIndex: ((x = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : x.zIndex) ?? 1e7,
     offset: {
       bottom: ((z = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.offset) == null ? void 0 : z.bottom) ?? 20,
       right: ((k = (w = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : w.offset) == null ? void 0 : k.right) ?? (e === "ltr" ? 20 : "initial"),
-      left: ((x = (I = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : I.offset) == null ? void 0 : x.left) ?? (e === "rtl" ? 20 : "initial")
+      left: ((f = (I = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : I.offset) == null ? void 0 : f.left) ?? (e === "rtl" ? 20 : "initial")
     },
     size: {
-      button: ((H = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : H.button) ?? 48,
-      icon: ((W = (F = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : F.size) == null ? void 0 : W.icon) ?? 24
+      button: ((F = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : F.button) ?? 48,
+      icon: ((W = (A = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : A.size) == null ? void 0 : W.icon) ?? 24
     }
   }, d = (() => {
     const Y = e === "ltr" ? l.offset.right : l.offset.left;
@@ -584,7 +584,7 @@ function q() {
     widgetTrigger: l,
     widgetContentContainer: {
       borderRadius: o ? "0px" : ((R = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : R.borderRadius) ?? "32px",
-      zIndex: ((f = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : f.zIndex) ?? l.zIndex + 1,
+      zIndex: ((v = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : v.zIndex) ?? l.zIndex + 1,
       outline: ((N = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : N.outline) ?? "none",
       // was: '1px solid'
       outlineColor: ((S = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : S.outlineColor) ?? "hsl(0 0% 50% / .5)",
@@ -603,12 +603,12 @@ function q() {
         // By setting minHeight to 1px, a nice animation will play from 1px to the dynamic height of the content of the screen
         minHeight: i(
           "h",
-          ((Ae = (Pe = t == null ? void 0 : t.screens) == null ? void 0 : Pe.welcome) == null ? void 0 : Ae.minHeight) ?? "1px"
+          ((Oe = (Pe = t == null ? void 0 : t.screens) == null ? void 0 : Pe.welcome) == null ? void 0 : Oe.minHeight) ?? "1px"
         )
       },
       sessions: {
-        width: i("w", ((He = (Oe = t == null ? void 0 : t.screens) == null ? void 0 : Oe.sessions) == null ? void 0 : He.width) ?? "450px"),
-        height: i("h", ((We = (Fe = t == null ? void 0 : t.screens) == null ? void 0 : Fe.sessions) == null ? void 0 : We.height) ?? "600px")
+        width: i("w", ((Fe = (He = t == null ? void 0 : t.screens) == null ? void 0 : He.sessions) == null ? void 0 : Fe.width) ?? "450px"),
+        height: i("h", ((We = (Ae = t == null ? void 0 : t.screens) == null ? void 0 : Ae.sessions) == null ? void 0 : We.height) ?? "600px")
       },
       chat: {
         width: i("w", ((Le = ($e = t == null ? void 0 : t.screens) == null ? void 0 : $e.chat) == null ? void 0 : Le.width) ?? "525px"),
@@ -783,7 +783,7 @@ function ze({
   width: e,
   height: o
 }) {
-  const { isSmallScreen: t } = O(), { setWidth: n, setHeight: s } = Rt();
+  const { isSmallScreen: t } = H(), { setWidth: n, setHeight: s } = Rt();
   re(() => {
     e && n(e), o && s(o);
   }, [t, o, e, n, s]);
@@ -842,7 +842,7 @@ function ne() {
     messagesState: { messages: n }
   } = E(), {
     routerState: { screen: s }
-  } = A();
+  } = O();
   return {
     react: U,
     org: e,
@@ -867,7 +867,7 @@ function Ne() {
     widgetCtx: { org: e }
   } = j(), {
     routerState: { screen: o }
-  } = A(), { textContent: t } = b();
+  } = O(), { textContent: t } = b();
   return (() => {
     var s, a;
     switch (o) {
@@ -900,7 +900,7 @@ function Qr() {
   const { router: e } = b(), {
     routerState: { screen: o },
     toSessionsScreen: t
-  } = A();
+  } = O();
   return o !== "chat" || e != null && e.chatScreenOnly ? null : /* @__PURE__ */ r(
     C,
     {
@@ -915,7 +915,7 @@ function Qr() {
 function Zr({
   button: e
 }) {
-  const { setIsOpen: o } = K(), { isSmallScreen: t } = O();
+  const { setIsOpen: o } = K(), { isSmallScreen: t } = H();
   return t && e.hideOnSmallScreen || !t && e.hideOnLargeScreen ? null : /* @__PURE__ */ r(
     C,
     {
@@ -935,7 +935,7 @@ function ue({
 }) {
   const [o, t] = T(!1), {
     routerState: { screen: n }
-  } = A(), { isSmallScreen: s } = O(), { theme: a } = q(), { setWidth: i, setHeight: l } = Rt();
+  } = O(), { isSmallScreen: s } = H(), { theme: a } = q(), { setWidth: i, setHeight: l } = Rt();
   if (n !== "chat" && n !== "sessions") return null;
   const d = (() => {
     switch (n) {
@@ -956,8 +956,8 @@ function ue({
         return D(n, ue.name), a.screens.chat.width;
     }
   })(), y = () => {
-    t((v) => {
-      const m = !v;
+    t((x) => {
+      const m = !x;
       return l(m ? "100vh" : d), i(m ? `max(40vw, ${h})` : h), m;
     });
   };
@@ -981,9 +981,9 @@ function Pt({
   button: e
 }) {
   var k, I;
-  const { close: o } = pe(), { widgetCtx: t } = j(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: a } = L(), { isSmallScreen: i } = O(), l = !a.session, d = ((k = a.session) == null ? void 0 : k.isOpened) === !1, h = e.onResolved || "stay-in-chat", y = e.behaviorBeforeSessionCreation || "disabled", v = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || l && y === "disabled" || d && v === "disabled"), z = async () => {
-    const { success: x, error: M } = await s();
-    if (o(), !x) return console.error(M);
+  const { close: o } = pe(), { widgetCtx: t } = j(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: a } = L(), { isSmallScreen: i } = H(), l = !a.session, d = ((k = a.session) == null ? void 0 : k.isOpened) === !1, h = e.onResolved || "stay-in-chat", y = e.behaviorBeforeSessionCreation || "disabled", x = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || l && y === "disabled" || d && x === "disabled"), z = async () => {
+    const { success: f, error: M } = await s();
+    if (o(), !f) return console.error(M);
     switch (h) {
       case "stay-in-chat":
         return;
@@ -1015,7 +1015,7 @@ function Pt({
           );
       }
     if (d)
-      switch (v) {
+      switch (x) {
         case "disabled":
           return;
         case "close-widget":
@@ -1031,7 +1031,7 @@ function Pt({
           break;
         default:
           D(
-            v,
+            x,
             w.name
           );
       }
@@ -1106,7 +1106,7 @@ const Jr = {
 function eo() {
   const {
     routerState: { screen: e }
-  } = A(), { headerButtons: o } = b(), t = e === "chat" ? o == null ? void 0 : o.chatScreen : e === "sessions" ? o == null ? void 0 : o.sessionsScreen : [];
+  } = O(), { headerButtons: o } = b(), t = e === "chat" ? o == null ? void 0 : o.chatScreen : e === "sessions" ? o == null ? void 0 : o.sessionsScreen : [];
   return !t || t.length === 0 ? /* @__PURE__ */ r(fe, { button: Jr }) : /* @__PURE__ */ r(te, { children: t.map((n) => /* @__PURE__ */ r(
     fe,
     {
@@ -1115,10 +1115,10 @@ function eo() {
     `${n.functionality}-${n.icon}`
   )) });
 }
-function At() {
+function Ot() {
   const {
     routerState: { screen: e }
-  } = A(), o = Kr(e), t = Ne();
+  } = O(), o = Kr(e), t = Ne();
   return /* @__PURE__ */ c("header", { ...o, className: "py-2 px-4 shrink-0", children: [
     /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ r(Qr, {}),
@@ -1142,13 +1142,13 @@ function At() {
     /* @__PURE__ */ r(Vr, {})
   ] });
 }
-function Ot({ className: e }) {
+function Ht({ className: e }) {
   return /* @__PURE__ */ r(wr, { className: p("size-4 animate-spin", e) });
 }
 function to() {
   const {
     messagesState: { isInitialFetchLoading: e }
-  } = E(), { isSmallScreen: o } = O(), { activeMode: t, Component: n } = mt();
+  } = E(), { isSmallScreen: o } = H(), { activeMode: t, Component: n } = mt();
   return {
     isCanvasOpen: !e && !o && !!t && !!n
   };
@@ -1221,7 +1221,7 @@ const oo = [
   }
 ];
 function no() {
-  const { isSmallScreen: e } = O(), {
+  const { isSmallScreen: e } = H(), {
     submitCsat: o,
     isCsatRequested: t,
     isCsatSubmitted: n,
@@ -1229,7 +1229,7 @@ function no() {
     submittedFeedback: a
   } = gt(), [i, l] = T(null), [d, h] = T(null), y = (m) => {
     l((z) => z === m ? null : m);
-  }, v = () => {
+  }, x = () => {
     i && o({
       score: i,
       feedback: d || void 0
@@ -1292,7 +1292,7 @@ function no() {
         C,
         {
           size: "fit",
-          onClick: v,
+          onClick: x,
           disabled: !i,
           className: p(
             "transition-all overflow-hidden",
@@ -1434,21 +1434,21 @@ function io({
 }
 function ao() {
   var R;
-  const { isSmallScreen: e } = O(), o = de(null), { sendMessage: t } = E(), { sessionState: n } = L(), { t: s } = X(), [a, i] = T(""), {
+  const { isSmallScreen: e } = H(), o = de(null), { sendMessage: t } = E(), { sessionState: n } = L(), { t: s } = X(), [a, i] = T(""), {
     allFiles: l,
     emptyTheFiles: d,
     handleCancelUpload: h,
     appendFiles: y,
-    isUploading: v,
+    isUploading: x,
     successFiles: m
-  } = Ut(), z = !!((R = n.session) != null && R.isHandedOff), { isAwaitingBotReply: w } = wt(), k = (f) => {
-    y(f);
-  }, I = !a.trim() && m.length === 0, x = async () => {
+  } = Ut(), z = !!((R = n.session) != null && R.isHandedOff), { isAwaitingBotReply: w } = wt(), k = (v) => {
+    y(v);
+  }, I = !a.trim() && m.length === 0, f = async () => {
     if (w || I) return;
-    v && console.info("please wait for the file(s) to upload");
-    const f = a.trim();
+    x && console.info("please wait for the file(s) to upload");
+    const v = a.trim();
     t({
-      content: f,
+      content: v,
       attachments: m.flatMap(
         (N) => N.fileUrl ? [
           {
@@ -1463,8 +1463,8 @@ function ao() {
     }), i(""), d();
   }, {
     getRootProps: M,
-    getInputProps: H,
-    open: F
+    getInputProps: F,
+    open: A
   } = Dr({
     onDrop: k,
     noClick: !0,
@@ -1482,8 +1482,8 @@ function ao() {
       "image/gif": [".gif"],
       "image/webp": [".webp"]
     }
-  }), W = (f) => {
-    const N = f.clipboardData;
+  }), W = (v) => {
+    const N = v.clipboardData;
     N && N.files.length > 0 && k(Array.from(N.files));
   };
   return /* @__PURE__ */ c(
@@ -1493,7 +1493,7 @@ function ao() {
       className: "p-2 relative space-y-1",
       ...M(),
       children: [
-        /* @__PURE__ */ r("input", { ...H() }),
+        /* @__PURE__ */ r("input", { ...F() }),
         /* @__PURE__ */ c(
           "div",
           {
@@ -1517,13 +1517,13 @@ function ao() {
                       {
                         ...g("chat/input_box/attachments_container"),
                         className: "flex items-center gap-1",
-                        children: /* @__PURE__ */ r(_, { mode: "popLayout", children: l.map((f) => /* @__PURE__ */ r(u, { snapExit: !0, children: /* @__PURE__ */ r(
+                        children: /* @__PURE__ */ r(_, { mode: "popLayout", children: l.map((v) => /* @__PURE__ */ r(u, { snapExit: !0, children: /* @__PURE__ */ r(
                           io,
                           {
-                            onCancel: () => h(f.id),
-                            file: f
+                            onCancel: () => h(v.id),
+                            file: v
                           }
-                        ) }, f.id)) })
+                        ) }, v.id)) })
                       }
                     ),
                     /* @__PURE__ */ r(
@@ -1546,9 +1546,9 @@ function ao() {
                           // 16px on mobiles prevents auto-zoom on the input when focused
                           e ? "text-[16px]" : "text-sm"
                         ),
-                        onChange: (f) => i(f.target.value),
-                        onKeyDown: async (f) => {
-                          f.key === "Enter" && !f.shiftKey && (f.preventDefault(), x());
+                        onChange: (v) => i(v.target.value),
+                        onKeyDown: async (v) => {
+                          v.key === "Enter" && !v.shiftKey && (v.preventDefault(), f());
                         },
                         placeholder: s("write_a_message_placeholder")
                       }
@@ -1566,7 +1566,7 @@ function ao() {
                     children: /* @__PURE__ */ r(
                       C,
                       {
-                        onClick: F,
+                        onClick: A,
                         size: "fit",
                         variant: "ghost",
                         className: p(
@@ -1581,10 +1581,10 @@ function ao() {
                   C,
                   {
                     size: "fit",
-                    onClick: x,
-                    disabled: w || v || I,
+                    onClick: f,
+                    disabled: w || x || I,
                     className: "rounded-full size-8 flex items-center justify-center p-0",
-                    children: /* @__PURE__ */ r(_, { mode: "wait", children: w || v ? /* @__PURE__ */ r(u, { snapExit: !0, children: /* @__PURE__ */ r(vr, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ r(u, { snapExit: !0, children: /* @__PURE__ */ r(ft, { className: "size-4" }) }, "send") })
+                    children: /* @__PURE__ */ r(_, { mode: "wait", children: w || x ? /* @__PURE__ */ r(u, { snapExit: !0, children: /* @__PURE__ */ r(vr, { className: "size-4 animate-spin animate-iteration-infinite" }) }, "loading") : /* @__PURE__ */ r(u, { snapExit: !0, children: /* @__PURE__ */ r(ft, { className: "size-4" }) }, "send") })
                   }
                 ) })
               ] })
@@ -1596,7 +1596,7 @@ function ao() {
   );
 }
 function lt() {
-  const { widgetCtx: e } = j(), { router: o } = b(), { canCreateNewSession: t } = L(), { toSessionsScreen: n } = A(), { t: s } = X();
+  const { widgetCtx: e } = j(), { router: o } = b(), { canCreateNewSession: t } = L(), { toSessionsScreen: n } = O(), { t: s } = X();
   return /* @__PURE__ */ r(te, { children: t || o != null && o.chatScreenOnly ? /* @__PURE__ */ r(C, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new_conversation") }) : /* @__PURE__ */ r(C, { onClick: n, className: "rounded-2xl w-full", children: s("back_to_conversations") }) });
 }
 function lo() {
@@ -1673,7 +1673,7 @@ function po({
     }
   );
 }
-function Ht({
+function Ft({
   messages: e,
   className: o,
   containerClassName: t
@@ -1746,7 +1746,7 @@ function le({
                         },
                         n.id
                       )),
-                      /* @__PURE__ */ r(Ht, { messages: e })
+                      /* @__PURE__ */ r(Ft, { messages: e })
                     ]
                   }
                 )
@@ -1838,7 +1838,7 @@ function go({
           },
           o.id
         )),
-        /* @__PURE__ */ r(Ht, { messages: e, containerClassName: "ms-auto" })
+        /* @__PURE__ */ r(Ft, { messages: e, containerClassName: "ms-auto" })
       ]
     }
   );
@@ -1961,13 +1961,13 @@ function Co() {
         /* @__PURE__ */ r(yo, {}),
         a.map((h, y) => {
           var z, w, k, I;
-          const v = (z = h == null ? void 0 : h[0]) == null ? void 0 : z.type, m = (w = h[0]) == null ? void 0 : w.id;
-          if (!v || !m) return null;
+          const x = (z = h == null ? void 0 : h[0]) == null ? void 0 : z.type, m = (w = h[0]) == null ? void 0 : w.id;
+          if (!x || !m) return null;
           if (uo(h))
             return /* @__PURE__ */ r(go, { messages: h }, m);
           if (fo(h)) {
-            const x = y === a.length - 1;
-            return o && x ? null : ((k = h[0]) == null || k.agent, /* @__PURE__ */ r(
+            const f = y === a.length - 1;
+            return o && f ? null : ((k = h[0]) == null || k.agent, /* @__PURE__ */ r(
               le,
               {
                 messages: h,
@@ -1977,18 +1977,19 @@ function Co() {
             ));
           }
           if (vo(h)) {
-            const x = (I = h[0]) == null ? void 0 : I.agent;
+            const f = (I = h[0]) == null ? void 0 : I.agent;
             return /* @__PURE__ */ r(
               le,
               {
                 messages: h,
-                agent: x ? {
-                  ...x,
-                  avatarUrl: (s == null ? void 0 : s.avatarUrl) || x.avatarUrl || null
+                agent: f ? {
+                  ...f,
+                  name: (s == null ? void 0 : s.name) || f.name || "",
+                  avatarUrl: (s == null ? void 0 : s.avatarUrl) || f.avatarUrl || null
                 } : s ? {
                   isAi: !1,
                   id: null,
-                  name: "",
+                  name: s.name || "",
                   avatarUrl: s.avatarUrl || null
                 } : void 0
               },
@@ -2031,12 +2032,12 @@ function zo() {
         // Relative to the iframe
       },
       children: /* @__PURE__ */ c("div", { className: "size-full justify-between flex flex-col", children: [
-        /* @__PURE__ */ r(At, {}),
+        /* @__PURE__ */ r(Ot, {}),
         /* @__PURE__ */ r(_, { mode: "wait", children: e ? /* @__PURE__ */ r(
           u,
           {
             className: "flex flex-col items-center justify-center w-full flex-1",
-            children: /* @__PURE__ */ r(Ot, {})
+            children: /* @__PURE__ */ r(Ht, {})
           },
           "loading"
         ) : /* @__PURE__ */ c(
@@ -2118,7 +2119,7 @@ function So({ className: e }) {
     }
   );
 }
-function Ft({ className: e }) {
+function At({ className: e }) {
   const { token: o } = b();
   return /* @__PURE__ */ r(
     "div",
@@ -2158,7 +2159,7 @@ function ct({
   session: e,
   className: o
 }) {
-  const { bot: t, humanAgent: n } = b(), { toChatScreen: s } = A(), a = e.assignee.kind === "human" ? 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 } = b(), { toChatScreen: s } = O(), 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) || "";
   return /* @__PURE__ */ c(
     C,
     {
@@ -2194,7 +2195,7 @@ function ct({
   );
 }
 function Io() {
-  const { t: e } = X(), { toChatScreen: o } = A(), {
+  const { t: e } = X(), { toChatScreen: o } = O(), {
     sessionsState: { data: t, isInitialFetchLoading: n },
     openSessions: s,
     closedSessions: a,
@@ -2204,7 +2205,7 @@ function Io() {
     u,
     {
       className: "flex-1 flex items-center justify-center",
-      children: /* @__PURE__ */ r(Ot, {})
+      children: /* @__PURE__ */ r(Ht, {})
     },
     "loading"
   ) : /* @__PURE__ */ r(
@@ -2295,16 +2296,16 @@ function To() {
         // Relative to the iframe
       },
       children: /* @__PURE__ */ c("div", { className: "size-full flex flex-col", children: [
-        /* @__PURE__ */ r(At, {}),
+        /* @__PURE__ */ r(Ot, {}),
         /* @__PURE__ */ r(Io, {}),
-        /* @__PURE__ */ r(Ft, {})
+        /* @__PURE__ */ r(At, {})
       ] })
     }
   );
 }
 const ae = G.forwardRef(
   ({ className: e, type: o, ...t }, n) => {
-    const { isSmallScreen: s } = O();
+    const { isSmallScreen: s } = H();
     return /* @__PURE__ */ r($, { ref: n, children: /* @__PURE__ */ r(
       "input",
       {
@@ -2350,15 +2351,15 @@ const Do = me.object({
   email: me.string().email()
 });
 function jo() {
-  var x, M, H, F, W, R, f, N;
+  var f, M, F, A, W, R, v, N;
   const {
     widgetCtx: { org: e }
-  } = j(), { setIsOpen: o } = K(), { createUnverifiedContact: t } = qt(), { isSmallScreen: n } = O(), s = b(), { theme: a } = q(), { t: i } = X(), { observedElementRef: l } = Mo();
+  } = j(), { setIsOpen: o } = K(), { createUnverifiedContact: t } = qt(), { isSmallScreen: n } = H(), s = b(), { theme: a } = q(), { t: i } = X(), { observedElementRef: l } = Mo();
   ze({
     height: void 0,
     width: a.screens.welcome.width
   });
-  const [d, h] = T(((x = s.prefillUserData) == null ? void 0 : x.name) || ""), [y, v] = T(((M = s.prefillUserData) == null ? void 0 : M.email) || ""), m = (s.extraDataCollectionFields || []).filter(
+  const [d, h] = T(((f = s.prefillUserData) == null ? void 0 : f.name) || ""), [y, x] = T(((M = s.prefillUserData) == null ? void 0 : M.email) || ""), m = (s.extraDataCollectionFields || []).filter(
     (S) => S !== "name" && S !== "email" && !!S
   ), [z, w] = T({}), [k, I] = jr(
     async (S) => {
@@ -2409,17 +2410,17 @@ function jo() {
                 ),
                 children: [
                   n && /* @__PURE__ */ r(u, { className: "absolute top-6 end-6", children: /* @__PURE__ */ r(C, { size: "selfless", onClick: () => o(!1), children: /* @__PURE__ */ r(xe, { className: "size-4" }) }) }),
-                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (H = s.assets) != null && H.organizationLogo ? /* @__PURE__ */ r(
+                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (F = s.assets) != null && F.organizationLogo ? /* @__PURE__ */ r(
                     "img",
                     {
-                      src: (F = s.assets) == null ? void 0 : F.organizationLogo,
+                      src: (A = s.assets) == null ? void 0 : A.organizationLogo,
                       alt: "Company Logo",
                       className: "h-8 w-auto object-contain"
                     }
                   ) : /* @__PURE__ */ r("h2", { className: "font-bold text-sm", children: e.name }) }),
                   /* @__PURE__ */ c("div", { className: "space-y-2", children: [
                     /* @__PURE__ */ r("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((R = (W = s.textContent) == null ? void 0 : W.welcomeScreen) == null ? void 0 : R.title) || i("welcome_screen_title") }),
-                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((N = (f = s.textContent) == null ? void 0 : f.welcomeScreen) == null ? void 0 : N.description) || i("welcome_screen_description") })
+                    /* @__PURE__ */ r("p", { className: "text-sm", children: ((N = (v = s.textContent) == null ? void 0 : v.welcomeScreen) == null ? void 0 : N.description) || i("welcome_screen_description") })
                   ] })
                 ]
               }
@@ -2450,7 +2451,7 @@ function jo() {
                       {
                         required: !0,
                         value: y,
-                        onChange: (S) => v(S.target.value),
+                        onChange: (S) => x(S.target.value),
                         type: "email",
                         placeholder: i("your_email_placeholder"),
                         name: "email"
@@ -2481,7 +2482,7 @@ function jo() {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r(Ft, {})
+                  /* @__PURE__ */ r(At, {})
                 ]
               }
             )
@@ -2494,7 +2495,7 @@ function jo() {
 function Wt() {
   const {
     routerState: { screen: e }
-  } = A();
+  } = O();
   return /* @__PURE__ */ r("div", { className: "relative bg-background size-full", children: /* @__PURE__ */ r(_, { mode: "wait", children: (() => {
     switch (e) {
       case "welcome":
@@ -2535,7 +2536,7 @@ function Wt() {
     }
   })() }) });
 }
-const Eo = "4.0.36", Ro = `<!DOCTYPE html>
+const Eo = "4.0.38", Ro = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2658,7 +2659,7 @@ function Po() {
     }
   );
 }
-function Ao({
+function Oo({
   className: e,
   style: o
 }) {
@@ -2693,7 +2694,7 @@ function Ao({
     }
   );
 }
-const Oo = `<!DOCTYPE html>
+const Ho = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2710,13 +2711,13 @@ html, body {
 <body>
 </body>
 </html>`;
-function Ho() {
+function Fo() {
   var a, i;
   const { isOpen: e } = K(), { cssOverrides: o, assets: t } = b(), { theme: n, cssVars: s } = q();
   return /* @__PURE__ */ c(
     bt,
     {
-      initialContent: Oo,
+      initialContent: Ho,
       title: "OpenCX Live Chat Trigger",
       style: {
         height: `calc(${n.widgetTrigger.size.button}px + ${V.x * 2}px)`,
@@ -2817,7 +2818,7 @@ function Ho() {
                             }
                           }
                         ) : /* @__PURE__ */ r(
-                          Ao,
+                          Oo,
                           {
                             style: {
                               width: n.widgetTrigger.size.icon,
@@ -2839,7 +2840,7 @@ function Ho() {
     }
   );
 }
-function Fo() {
+function Ao() {
   const { dir: e } = ve();
   return /* @__PURE__ */ r(
     ce.Anchor,
@@ -2856,8 +2857,8 @@ function Fo() {
 function Wo() {
   const { isOpen: e, setIsOpen: o } = K();
   return /* @__PURE__ */ c(ce.Root, { open: e, onOpenChange: o, children: [
+    /* @__PURE__ */ r(Ao, {}),
     /* @__PURE__ */ r(Fo, {}),
-    /* @__PURE__ */ r(Ho, {}),
     /* @__PURE__ */ r(Po, {})
   ] });
 }