@opencx/widget-react 4.0.5 → 4.0.6

package/dist/index.js

@@ -1,4 +1,4 @@
-import { jsx as o, jsxs as c, Fragment as ve } from "react/jsx-runtime";
+import { jsx as o, jsxs as l, Fragment as ve } from "react/jsx-runtime";
 import * as ie from "@radix-ui/react-popover";
 import * as E from "react";
 import se, { memo as Ht, forwardRef as ct, useState as j, cloneElement as At, useEffect as le, useMemo as dt, useRef as ce, createElement as nt } from "react";
@@ -48,7 +48,7 @@ const V = {
 }, W = Ht(
   ct(
     ({ children: e, className: r, scale: t = 1.02, off: n = !1 }, s) => {
-      const [a, i] = j(!1), [l, p] = j({ x: 0, y: 0 });
+      const [a, i] = j(!1), [c, p] = j({ x: 0, y: 0 });
       if (n || /translate/.test(
         e.props.className || ""
       )) return e;
@@ -69,8 +69,8 @@ const V = {
         var m, u;
         i(!1), p({ x: 0, y: 0 }), (u = (m = e.props).onMouseLeave) == null || u.call(m);
       }, h = {
-        "--wobble-x": a ? `${l.x}px` : "0px",
-        "--wobble-y": a ? `${l.y}px` : "0px",
+        "--wobble-x": a ? `${c.x}px` : "0px",
+        "--wobble-y": a ? `${c.y}px` : "0px",
         "--scale": 1 - (t - 1)
       };
       return At(e, {
@@ -158,9 +158,9 @@ const vt = R.Root, bt = R.Trigger, xt = E.forwardRef(({ className: e, ...r }, t)
   }
 ));
 xt.displayName = R.Overlay.displayName;
-const ye = E.forwardRef(({ className: e, children: r, withClose: t = !1, ...n }, s) => /* @__PURE__ */ c(pe.Portal, { children: [
+const ye = E.forwardRef(({ className: e, children: r, withClose: t = !1, ...n }, s) => /* @__PURE__ */ l(pe.Portal, { children: [
   /* @__PURE__ */ o(xt, {}),
-  /* @__PURE__ */ c(
+  /* @__PURE__ */ l(
     R.Content,
     {
       ref: s,
@@ -176,7 +176,7 @@ const ye = E.forwardRef(({ className: e, children: r, withClose: t = !1, ...n },
           {
             asChild: !0,
             className: "absolute end-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-            children: /* @__PURE__ */ c(z, { size: "fit", className: "rounded-full", variant: "secondary", children: [
+            children: /* @__PURE__ */ l(z, { size: "fit", className: "rounded-full", variant: "secondary", children: [
               /* @__PURE__ */ o(qt, { className: "h-4 w-4" }),
               /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
             ] })
@@ -236,14 +236,14 @@ const zt = E.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
 ));
 zt.displayName = R.Description.displayName;
 function Nt({ attachment: e }) {
-  const { name: r, size: t, type: n, url: s } = e, a = n.startsWith("image/"), i = n.startsWith("video/"), l = n.startsWith("audio/");
-  return l ? /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o("div", { className: "w-full shrink-0 overflow-hidden", children: /* @__PURE__ */ c("audio", { controls: !0, className: "w-full", children: [
+  const { name: r, size: t, type: n, url: s } = e, a = n.startsWith("image/"), i = n.startsWith("video/"), c = n.startsWith("audio/");
+  return c ? /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o("div", { className: "w-full shrink-0 overflow-hidden", children: /* @__PURE__ */ l("audio", { controls: !0, className: "w-full", children: [
     /* @__PURE__ */ o("source", { src: s, type: n }),
     "Your browser does not support the audio tag."
-  ] }) }) }) : i ? /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("video", { controls: !0, children: [
+  ] }) }) }) : i ? /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ l("video", { controls: !0, children: [
     /* @__PURE__ */ o("source", { src: s, type: n }),
     "Your browser does not support the video tag."
-  ] }) }) }) : !a && !i && !l ? /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("div", { className: "flex items-end gap-2 p-2", children: [
+  ] }) }) }) : !a && !i && !c ? /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ l("div", { className: "flex items-end gap-2 p-2", children: [
     /* @__PURE__ */ o(
       "a",
       {
@@ -258,13 +258,13 @@ function Nt({ attachment: e }) {
         children: r
       }
     ),
-    /* @__PURE__ */ c("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ l("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
       (t / 1024).toFixed(2),
       " KB"
     ] })
-  ] }) }) }) : /* @__PURE__ */ c(vt, { children: [
+  ] }) }) }) : /* @__PURE__ */ l(vt, { children: [
     /* @__PURE__ */ o(W, { children: /* @__PURE__ */ o(bt, { children: /* @__PURE__ */ o("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: a && /* @__PURE__ */ o("img", { src: s, className: "object-cover size-16", alt: r }) }) }) }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ l(
       ye,
       {
         "aria-describedby": void 0,
@@ -290,14 +290,14 @@ function ae({
   isFirstInGroup: s,
   isLastInGroup: a,
   isAloneInGroup: i,
-  dataComponentNames: l,
+  dataComponentNames: c,
   classNames: p
 }) {
   const { anchorTarget: g } = S(), { message: x, variant: y = "default" } = e;
-  return y === "error" ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { className: "flex flex-row flex-wrap items-center justify-start", children: /* @__PURE__ */ o("div", { className: "leading-snug text-sm text-destructive", children: x }) }) }) : /* @__PURE__ */ c(
+  return y === "error" ? /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { className: "flex flex-row flex-wrap items-center justify-start", children: /* @__PURE__ */ o("div", { className: "leading-snug text-sm text-destructive", children: x }) }) }) : /* @__PURE__ */ l(
     "div",
     {
-      ...w((l == null ? void 0 : l.messageContainer) ?? "chat/agent_msg/root"),
+      ...w((c == null ? void 0 : c.messageContainer) ?? "chat/agent_msg/root"),
       className: d(
         "w-5/6 flex flex-col items-start gap-1",
         p == null ? void 0 : p.messageContainer
@@ -307,7 +307,7 @@ function ae({
         x.length > 0 && /* @__PURE__ */ o(
           "div",
           {
-            ...w((l == null ? void 0 : l.message) ?? "chat/agent_msg/msg"),
+            ...w((c == null ? void 0 : c.message) ?? "chat/agent_msg/msg"),
             "data-first": s,
             "data-last": a,
             "data-alone": i,
@@ -386,7 +386,7 @@ function ge({
   ...r
 }) {
   var t, n;
-  return /* @__PURE__ */ c(Ce, { ...r, children: [
+  return /* @__PURE__ */ l(Ce, { ...r, children: [
     /* @__PURE__ */ o(ze, { src: (e == null ? void 0 : e.avatar) ?? "", alt: "Agent Icon" }),
     (e == null ? void 0 : e.name) && /* @__PURE__ */ o(Ne, { children: (n = (t = e == null ? void 0 : e.name) == null ? void 0 : t.slice(0, 1)) == null ? void 0 : n.toUpperCase() })
   ] });
@@ -421,21 +421,21 @@ const Eo = 10, Fo = (e, r, t) => ({
     overrides: s = {},
     delay: a = 0,
     ...i
-  }, l) => {
+  }, c) => {
     const p = e ? Ao[e](r, s, a) : {};
-    return n && p.exit && typeof p.exit == "object" && !Array.isArray(p.exit) && (p.exit.transition = { duration: 0 }), /* @__PURE__ */ o(J.div, { ref: l, ...i, ...p, children: t });
+    return n && p.exit && typeof p.exit == "object" && !Array.isArray(p.exit) && (p.exit.transition = { duration: 0 }), /* @__PURE__ */ o(J.div, { ref: c, ...i, ...p, children: t });
   }
 );
 f.displayName = "MotionDiv";
 function Bo({ agent: e }) {
-  return /* @__PURE__ */ o(T, { children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ o(T, { children: /* @__PURE__ */ l(
     f,
     {
       ...w("chat/bot_loading/root"),
       className: "flex flex-row items-end w-full gap-2 animate-pulse",
       children: [
         /* @__PURE__ */ o(ge, { agent: e }),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ l(
           "div",
           {
             ...w("chat/bot_loading/bouncing_dots_container"),
@@ -474,7 +474,7 @@ function Q({
   align: n
 }) {
   const { disableTooltips: s } = S();
-  return !r || s ? e : /* @__PURE__ */ c($o, { children: [
+  return !r || s ? e : /* @__PURE__ */ l($o, { children: [
     /* @__PURE__ */ o(Yo, { asChild: !0, children: e }),
     /* @__PURE__ */ o(
       It,
@@ -506,7 +506,7 @@ const re = {
 };
 function X() {
   var y, v, h, m, u, _, k, I, M, F, P, O, b, C, B, N, L, oe, Te, Me, De, Re, Oe, je, Ee, Fe, Pe, We, He, Ae, Be, Le, $e, Ye, qe, Ue, Xe, Ve, Ke, Ge, Ze, Je, Qe, et, tt, ot, rt;
-  const { dir: e } = be(), { isSmallScreen: r } = A(), { theme: t, inline: n } = S(), s = ($) => n ? "100%" : $, a = ($, he) => r ? `100dv${$}` : he, i = ($, he) => s(a($, he)), l = {
+  const { dir: e } = be(), { isSmallScreen: r } = A(), { theme: t, inline: n } = S(), s = ($) => n ? "100%" : $, a = ($, he) => r ? `100dv${$}` : he, i = ($, he) => s(a($, he)), c = {
     zIndex: ((y = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : y.zIndex) ?? 1e7,
     offset: {
       bottom: ((h = (v = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : v.offset) == null ? void 0 : h.bottom) ?? 20,
@@ -518,15 +518,15 @@ function X() {
       icon: ((P = (F = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : F.size) == null ? void 0 : P.icon) ?? 24
     }
   }, p = (() => {
-    const $ = e === "ltr" ? l.offset.right : l.offset.left;
+    const $ = e === "ltr" ? c.offset.right : c.offset.left;
     return typeof $ != "number" ? 0 : $;
   })(), g = {
     palette: (t == null ? void 0 : t.palette) ?? "neutral",
     primaryColor: (t == null ? void 0 : t.primaryColor) ?? "hsl(0 0% 9%)",
-    widgetTrigger: l,
+    widgetTrigger: c,
     widgetContentContainer: {
       borderRadius: r ? "0px" : ((O = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : O.borderRadius) ?? "32px",
-      zIndex: ((b = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : b.zIndex) ?? l.zIndex + 1,
+      zIndex: ((b = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : b.zIndex) ?? c.zIndex + 1,
       outline: ((C = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : C.outline) ?? "none",
       // was: '1px solid'
       outlineColor: ((B = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : B.outlineColor) ?? "hsl(0 0% 50% / .5)",
@@ -535,7 +535,7 @@ function X() {
       transitionTimingFunction: ((oe = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : oe.transitionTimingFunction) ?? re.transitionTimingFunction,
       transitionDuration: ((Te = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Te.transitionDuration) ?? re.transitionDuration,
       offset: {
-        side: r ? 0 : l.offset.bottom + l.size.button + V.y * 2 + (((De = (Me = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Me.offset) == null ? void 0 : De.side) ?? 10),
+        side: r ? 0 : c.offset.bottom + c.size.button + V.y * 2 + (((De = (Me = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Me.offset) == null ? void 0 : De.side) ?? 10),
         align: r ? 0 : p + (((Oe = (Re = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Re.offset) == null ? void 0 : Oe.align) ?? 0)
       }
     },
@@ -859,7 +859,7 @@ function ue({
 }) {
   const [r, t] = j(!1), {
     routerState: { screen: n }
-  } = H(), { isSmallScreen: s } = A(), { theme: a } = X(), { setWidth: i, setHeight: l } = Mt();
+  } = H(), { isSmallScreen: s } = A(), { theme: a } = X(), { setWidth: i, setHeight: c } = Mt();
   if (n !== "chat" && n !== "sessions") return null;
   const p = (() => {
     switch (n) {
@@ -882,7 +882,7 @@ function ue({
   })(), x = () => {
     t((y) => {
       const v = !y;
-      return l(v ? "100vh" : p), i(v ? `max(40vw, ${g})` : g), v;
+      return c(v ? "100vh" : p), i(v ? `max(40vw, ${g})` : g), v;
     });
   };
   return s && e.hideOnSmallScreen || !s && e.hideOnLargeScreen ? null : /* @__PURE__ */ o(
@@ -905,7 +905,7 @@ function Rt({
   button: e
 }) {
   var _, k;
-  const [r, t] = j(!1), { widgetCtx: n } = Y(), { setIsOpen: s } = K(), { resolveSession: a, sessionState: i } = q(), { isSmallScreen: l } = A(), p = !i.session, g = ((_ = i.session) == null ? void 0 : _.isOpened) === !1, x = e.onResolved || "stay-in-chat", y = e.behaviorBeforeSessionCreation || "disabled", v = e.behaviorIfSessionIsResolved || "disabled", h = !!(i.isResolvingSession || p && y === "disabled" || g && v === "disabled"), m = async () => {
+  const [r, t] = j(!1), { widgetCtx: n } = Y(), { setIsOpen: s } = K(), { resolveSession: a, sessionState: i } = q(), { isSmallScreen: c } = A(), p = !i.session, g = ((_ = i.session) == null ? void 0 : _.isOpened) === !1, x = e.onResolved || "stay-in-chat", y = e.behaviorBeforeSessionCreation || "disabled", v = e.behaviorIfSessionIsResolved || "disabled", h = !!(i.isResolvingSession || p && y === "disabled" || g && v === "disabled"), m = async () => {
     const { success: I, error: M } = await a();
     if (t(!1), !I) return console.error(M);
     switch (x) {
@@ -958,7 +958,7 @@ function Rt({
           );
       }
   };
-  return l && e.hideOnSmallScreen || !l && e.hideOnLargeScreen ? null : ((k = e.confirmation) == null ? void 0 : k.type) === "modal" && !g && !p ? /* @__PURE__ */ c(vt, { open: r, onOpenChange: t, children: [
+  return c && e.hideOnSmallScreen || !c && e.hideOnLargeScreen ? null : ((k = e.confirmation) == null ? void 0 : k.type) === "modal" && !g && !p ? /* @__PURE__ */ l(vt, { open: r, onOpenChange: t, children: [
     /* @__PURE__ */ o(bt, { asChild: !0, children: /* @__PURE__ */ o(
       z,
       {
@@ -969,10 +969,10 @@ function Rt({
         children: /* @__PURE__ */ o(ee, { name: e.icon })
       }
     ) }),
-    /* @__PURE__ */ c(ye, { children: [
+    /* @__PURE__ */ l(ye, { children: [
       /* @__PURE__ */ o(yt, { children: /* @__PURE__ */ o(ke, { children: e.confirmation.title || "Close conversation" }) }),
       /* @__PURE__ */ o(kt, { children: /* @__PURE__ */ o(zt, { children: e.confirmation.description || "Are you sure you want to close this conversation?" }) }),
-      /* @__PURE__ */ c(Ct, { children: [
+      /* @__PURE__ */ l(Ct, { children: [
         /* @__PURE__ */ o(
           z,
           {
@@ -1038,7 +1038,7 @@ function Ot() {
   const {
     routerState: { screen: e }
   } = H(), { isLoading: r } = de(), t = Uo(e), n = _e();
-  return /* @__PURE__ */ o("header", { ...t, className: "py-2 px-4 shrink-0", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ o("header", { ...t, className: "py-2 px-4 shrink-0", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ o(Xo, {}),
     /* @__PURE__ */ o(
       "div",
@@ -1065,9 +1065,9 @@ function Zo() {
   };
 }
 function Jo() {
-  const { activeMode: e, Component: r } = pt(), { sendMessage: t } = U(), { createStateCheckpoint: n } = q(), [s, a] = j(!1), i = async (l) => {
+  const { activeMode: e, Component: r } = pt(), { sendMessage: t } = U(), { createStateCheckpoint: n } = q(), [s, a] = j(!1), i = async (c) => {
     try {
-      a(!0), await t(l);
+      a(!0), await t(c);
     } catch (p) {
       console.error(p);
     } finally {
@@ -1305,7 +1305,7 @@ function pr({
       default:
         return null;
     }
-  }, l = () => {
+  }, c = () => {
     const p = r.type.split("/")[0];
     return p === "image" && s ? /* @__PURE__ */ o(
       "img",
@@ -1320,11 +1320,11 @@ function pr({
     Q,
     {
       side: "bottom",
-      content: e === "error" ? /* @__PURE__ */ c("span", { className: "text-destructive", children: [
+      content: e === "error" ? /* @__PURE__ */ l("span", { className: "text-destructive", children: [
         "Failed to upload: ",
         t
       ] }) : r.name,
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ l(
         "div",
         {
           className: d(
@@ -1348,7 +1348,7 @@ function pr({
                 children: /* @__PURE__ */ o(xe, { className: "size-4 text-primary-foreground" })
               }
             ),
-            /* @__PURE__ */ o(l, {})
+            /* @__PURE__ */ o(c, {})
           ]
         }
       )
@@ -1358,7 +1358,7 @@ function pr({
 function hr() {
   var O;
   const { isSmallScreen: e } = A(), r = ce(null), { sendMessage: t } = U(), { sessionState: n } = q(), { t: s } = Z(), [a, i] = j(""), {
-    allFiles: l,
+    allFiles: c,
     emptyTheFiles: p,
     handleCancelUpload: g,
     appendFiles: x,
@@ -1409,7 +1409,7 @@ function hr() {
     const C = b.clipboardData;
     C && C.files.length > 0 && u(Array.from(C.files));
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "div",
     {
       ...w("chat/input_box/root"),
@@ -1417,7 +1417,7 @@ function hr() {
       ...I(),
       children: [
         /* @__PURE__ */ o("input", { ...M() }),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ l(
           "div",
           {
             ...w("chat/input_box/inner_root"),
@@ -1429,18 +1429,18 @@ function hr() {
               "hover:border-primary focus-within:border-primary"
             ),
             children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   ...w("chat/input_box/textarea_and_attachments_container"),
                   className: "flex flex-col gap-2",
                   children: [
-                    l.length > 0 && /* @__PURE__ */ o(
+                    c.length > 0 && /* @__PURE__ */ o(
                       "div",
                       {
                         ...w("chat/input_box/attachments_container"),
                         className: "flex items-center gap-1",
-                        children: /* @__PURE__ */ o(T, { mode: "popLayout", children: l.map((b) => /* @__PURE__ */ o(f, { snapExit: !0, children: /* @__PURE__ */ o(
+                        children: /* @__PURE__ */ o(T, { mode: "popLayout", children: c.map((b) => /* @__PURE__ */ o(f, { snapExit: !0, children: /* @__PURE__ */ o(
                           pr,
                           {
                             onCancel: () => g(b.id),
@@ -1463,7 +1463,7 @@ function hr() {
                           // INPUT_CONTAINER_B_RADIUS,
                           "max-h-16 [field-sizing:content]",
                           "w-full resize-none px-2",
-                          l.length === 0 && "pt-1",
+                          c.length === 0 && "pt-1",
                           "bg-transparent outline-none",
                           "placeholder:text-muted-foreground",
                           // 16px on mobiles prevents auto-zoom on the input when focused
@@ -1479,7 +1479,7 @@ function hr() {
                   ]
                 }
               ),
-              /* @__PURE__ */ c("div", { className: "gap-2 flex justify-between", children: [
+              /* @__PURE__ */ l("div", { className: "gap-2 flex justify-between", children: [
                 /* @__PURE__ */ o(
                   Q,
                   {
@@ -1520,8 +1520,8 @@ function hr() {
 }
 function mr() {
   const { widgetCtx: e } = Y(), { router: r } = S(), { canCreateNewSession: t } = q(), { toSessionsScreen: n } = H(), { t: s } = Z();
-  return /* @__PURE__ */ o("div", { className: "p-2", children: /* @__PURE__ */ c("div", { className: "p-2 bg-muted rounded-3xl space-y-2", children: [
-    /* @__PURE__ */ c("div", { className: "ps-2 flex items-center gap-1", children: [
+  return /* @__PURE__ */ o("div", { className: "p-2", children: /* @__PURE__ */ l("div", { className: "p-2 bg-muted rounded-3xl space-y-2", children: [
+    /* @__PURE__ */ l("div", { className: "ps-2 flex items-center gap-1", children: [
       /* @__PURE__ */ o(gt, { className: "size-4 text-emerald-600" }),
       /* @__PURE__ */ o("h2", { className: "text-sm font-medium", children: s("session-closed-lead") })
     ] }),
@@ -1550,7 +1550,7 @@ function wr() {
       children: /* @__PURE__ */ o(mr, {})
     },
     "session-closed"
-  ) : /* @__PURE__ */ c(
+  ) : /* @__PURE__ */ l(
     f,
     {
       className: "overflow-hidden",
@@ -1561,12 +1561,12 @@ function wr() {
       },
       children: [
         s.lastAIResMightSolveUserIssue && (t == null ? void 0 : t.enabled) !== !1 && /* @__PURE__ */ o(dr, {}),
-        a && e && r !== "below-initial-messages" && /* @__PURE__ */ o("div", { className: "flex items-center flex-row justify-end gap-2 flex-wrap px-2", children: e == null ? void 0 : e.map((l, p) => /* @__PURE__ */ o(
+        a && e && r !== "below-initial-messages" && /* @__PURE__ */ o("div", { className: "flex items-center flex-row justify-end gap-2 flex-wrap px-2", children: e == null ? void 0 : e.map((c, p) => /* @__PURE__ */ o(
           Ie,
           {
-            suggestion: l
+            suggestion: c
           },
-          `${l}-${p}`
+          `${c}-${p}`
         )) }),
         /* @__PURE__ */ o(hr, {})
       ]
@@ -1620,7 +1620,7 @@ function we({
   agent: r,
   suggestedReplies: t
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "div",
     {
       ...w("chat/agent_msg_group/root"),
@@ -1634,8 +1634,8 @@ function we({
             className: "hidden"
           }
         ) }),
-        /* @__PURE__ */ c("div", { className: d("flex-1 flex flex-col gap-2"), children: [
-          /* @__PURE__ */ c(
+        /* @__PURE__ */ l("div", { className: d("flex-1 flex flex-col gap-2"), children: [
+          /* @__PURE__ */ l(
             "div",
             {
               ...w("chat/agent_msg_group/avatar_and_msgs/root"),
@@ -1694,7 +1694,7 @@ function ur({
   isAloneInGroup: n
 }) {
   var s;
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "div",
     {
       ...w("chat/user_msg/root"),
@@ -1752,8 +1752,8 @@ function vr(e) {
   const r = [];
   let t = null;
   return e.forEach((n) => {
-    var s, a, i, l;
-    (!t || ((s = t[0]) == null ? void 0 : s.type) !== n.type) && (t = [], r.push(t)), ((a = t[0]) == null ? void 0 : a.type) === "FROM_AGENT" && n.type === "FROM_AGENT" && ((i = n.agent) == null ? void 0 : i.id) !== ((l = t[0].agent) == null ? void 0 : l.id) && (t = [], r.push(t)), t.push(n);
+    var s, a, i, c;
+    (!t || ((s = t[0]) == null ? void 0 : s.type) !== n.type) && (t = [], r.push(t)), ((a = t[0]) == null ? void 0 : a.type) === "FROM_AGENT" && n.type === "FROM_AGENT" && ((i = n.agent) == null ? void 0 : i.id) !== ((c = t[0].agent) == null ? void 0 : c.id) && (t = [], r.push(t)), t.push(n);
   }), r;
 }
 function br(e) {
@@ -1774,7 +1774,7 @@ function kr() {
   } = U(), { isAwaitingBotReply: r } = ht(), { componentStore: t } = Y(), n = S(), { initialQuestions: s, initialQuestionsPosition: a } = n, i = dt(
     () => vr(e),
     [e]
-  ), l = n.persistentInitialMessages || [], p = (() => {
+  ), c = n.persistentInitialMessages || [], p = (() => {
     var h;
     return e.length ? ((h = n.advancedInitialMessages) == null ? void 0 : h.filter((m) => !!m.persistent)) || [] : n.advancedInitialMessages || [];
   })(), g = (() => {
@@ -1791,14 +1791,14 @@ function kr() {
   }
   return le(() => {
     v();
-  }, [e]), /* @__PURE__ */ c(
+  }, [e]), /* @__PURE__ */ l(
     "div",
     {
       ...w("chat/msgs/root"),
       ref: y,
       className: "max-h-full scroll-smooth relative flex-1 py-2 px-4 flex flex-col gap-2 overflow-auto",
       children: [
-        /* @__PURE__ */ o("div", { ...w("chat/persistent_initial_msgs/root"), children: l.map((h, m, u) => /* @__PURE__ */ o(
+        /* @__PURE__ */ o("div", { ...w("chat/persistent_initial_msgs/root"), children: c.map((h, m, u) => /* @__PURE__ */ o(
           ae,
           {
             component: "bot_message",
@@ -1904,7 +1904,7 @@ function Cr() {
         maxHeight: "100vh"
         // Relative to the iframe
       },
-      children: /* @__PURE__ */ c("div", { className: "size-full justify-between flex flex-col", children: [
+      children: /* @__PURE__ */ l("div", { className: "size-full justify-between flex flex-col", children: [
         /* @__PURE__ */ o(Ot, {}),
         /* @__PURE__ */ o(T, { mode: "wait", children: e ? /* @__PURE__ */ o(
           f,
@@ -1913,13 +1913,13 @@ function Cr() {
             children: /* @__PURE__ */ o(jt, {})
           },
           "loading"
-        ) : /* @__PURE__ */ c(
+        ) : /* @__PURE__ */ l(
           f,
           {
             className: "flex items-start h-full flex-1 overflow-auto",
             snapExit: !0,
             children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   ...w("chat/main/root"),
@@ -1989,7 +1989,7 @@ function Ft({ className: e }) {
         "flex items-center justify-center gap-2 p-2 pt-0",
         e
       ),
-      children: /* @__PURE__ */ o(W, { children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ o(W, { children: /* @__PURE__ */ l(
         "a",
         {
           href: `https://open.cx/?ref=${r}`,
@@ -2003,7 +2003,7 @@ function Ft({ className: e }) {
           children: [
             /* @__PURE__ */ o("span", { children: "Powered by" }),
             /* @__PURE__ */ o("span", { children: " " }),
-            /* @__PURE__ */ c("span", { className: "flex items-center gap-[1px]", children: [
+            /* @__PURE__ */ l("span", { className: "flex items-center gap-[1px]", children: [
               /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(zr, { className: "size-3 inline-block" }) }),
               /* @__PURE__ */ o("span", { className: "font-semibold", children: "open" })
             ] })
@@ -2021,7 +2021,7 @@ function lt({
   className: r
 }) {
   const { bot: t } = S(), { toChatScreen: n } = H(), s = e.assignee.kind === "human" ? e.assignee.name || "Support Agent" : (t == null ? void 0 : t.name) || "AI Support Agent", a = e.assignee.kind === "human" ? e.assignee.avatarUrl || "" : (t == null ? void 0 : t.avatar) || "";
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     z,
     {
       variant: "ghost",
@@ -2032,12 +2032,12 @@ function lt({
       ),
       onClick: () => n(e.id),
       children: [
-        /* @__PURE__ */ c("div", { className: "flex-1 flex gap-2 items-center", children: [
-          /* @__PURE__ */ o(T, { mode: "wait", children: /* @__PURE__ */ o(f, { snapExit: !0, children: /* @__PURE__ */ c(Ce, { className: "size-10", children: [
+        /* @__PURE__ */ l("div", { className: "flex-1 flex gap-2 items-center", children: [
+          /* @__PURE__ */ o(T, { mode: "wait", children: /* @__PURE__ */ o(f, { snapExit: !0, children: /* @__PURE__ */ l(Ce, { className: "size-10", children: [
             /* @__PURE__ */ o(ze, { src: a, alt: "Agent Icon" }),
             /* @__PURE__ */ o(Ne, { children: /* @__PURE__ */ o(vo, { className: "size-4" }) })
           ] }) }) }),
-          /* @__PURE__ */ c("div", { className: "flex-1", children: [
+          /* @__PURE__ */ l("div", { className: "flex-1", children: [
             /* @__PURE__ */ o(T, { mode: "wait", children: /* @__PURE__ */ o(f, { snapExit: !0, children: s }, s) }),
             /* @__PURE__ */ o(T, { mode: "wait", children: e.lastMessage ? /* @__PURE__ */ o(f, { snapExit: !0, children: /* @__PURE__ */ o(
               St,
@@ -2073,8 +2073,8 @@ function Sr() {
     f,
     {
       className: "flex-1 flex flex-col gap-2 relative",
-      children: t.length ? /* @__PURE__ */ c(ve, { children: [
-        /* @__PURE__ */ c(T, { children: [
+      children: t.length ? /* @__PURE__ */ l(ve, { children: [
+        /* @__PURE__ */ l(T, { children: [
           s.length > 0 && /* @__PURE__ */ o(
             f,
             {
@@ -2082,11 +2082,11 @@ function Sr() {
               delay: 0.2,
               className: "space-y-2",
               snapExit: !0,
-              children: s.map((l) => /* @__PURE__ */ o(lt, { session: l }, l.id))
+              children: s.map((c) => /* @__PURE__ */ o(lt, { session: c }, c.id))
             },
             "open-sessions"
           ),
-          a.length > 0 && /* @__PURE__ */ c(
+          a.length > 0 && /* @__PURE__ */ l(
             f,
             {
               className: "space-y-2",
@@ -2094,13 +2094,13 @@ function Sr() {
               snapExit: !0,
               children: [
                 /* @__PURE__ */ o(Nr, { children: e("closed-conversations") }),
-                a.map((l) => /* @__PURE__ */ o(
+                a.map((c) => /* @__PURE__ */ o(
                   lt,
                   {
-                    session: l,
+                    session: c,
                     className: "opacity-50 hover:opacity-100"
                   },
-                  l.id
+                  c.id
                 ))
               ]
             },
@@ -2118,7 +2118,7 @@ function Sr() {
           },
           e("new-conversation")
         ) })
-      ] }) : /* @__PURE__ */ c("div", { className: "flex-1 flex flex-col gap-2 items-center", children: [
+      ] }) : /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col gap-2 items-center", children: [
         /* @__PURE__ */ o("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ o("p", { className: "text-muted-foreground", children: e("no-conversations-yet") }) }),
         /* @__PURE__ */ nt(
           z,
@@ -2156,7 +2156,7 @@ function _r() {
         maxHeight: "100vh"
         // Relative to the iframe
       },
-      children: /* @__PURE__ */ c("div", { className: "size-full flex flex-col", children: [
+      children: /* @__PURE__ */ l("div", { className: "size-full flex flex-col", children: [
         /* @__PURE__ */ o(Ot, {}),
         /* @__PURE__ */ o(Sr, {}),
         /* @__PURE__ */ o(Ft, {})
@@ -2194,10 +2194,10 @@ function Ir() {
       let a;
       const i = new ResizeObserver(() => {
         a = requestAnimationFrame(() => {
-          const l = s.offsetHeight;
+          const c = s.offsetHeight;
           n.style.setProperty(
             "--opencx-widget-height",
-            r ? "100%" : `${l.toFixed(1)}px`
+            r ? "100%" : `${c.toFixed(1)}px`
           );
         });
       });
@@ -2213,7 +2213,7 @@ const Tr = me.object({
 });
 function Mr() {
   var k, I, M, F, P, O, b, C, B;
-  const { setIsOpen: e } = K(), { createUnverifiedContact: r } = Lt(), { isSmallScreen: t } = A(), n = S(), { theme: s } = X(), { t: a } = Z(), { data: i } = de(), { observedElementRef: l } = Ir();
+  const { setIsOpen: e } = K(), { createUnverifiedContact: r } = Lt(), { isSmallScreen: t } = A(), n = S(), { theme: s } = X(), { t: a } = Z(), { data: i } = de(), { observedElementRef: c } = Ir();
   Se({
     height: void 0,
     width: s.screens.welcome.width
@@ -2250,17 +2250,17 @@ function Mr() {
         // Relative to the iframe
         overflowY: "auto"
       },
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ l(
         "div",
         {
-          ref: l,
+          ref: c,
           className: d(
             "flex flex-col",
             t && "h-full",
             "bg-[radial-gradient(ellipse_at_top_left,hsl(var(--opencx-primary)),transparent),radial-gradient(ellipse_at_top_right,hsl(var(--opencx-primary)),transparent)]"
           ),
           children: [
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ l(
               "div",
               {
                 className: d(
@@ -2277,14 +2277,14 @@ function Mr() {
                       className: "h-8 w-auto object-contain"
                     }
                   ) : /* @__PURE__ */ o("h2", { className: "font-bold text-sm", children: (P = i == null ? void 0 : i.data) == null ? void 0 : P.organizationName }) }),
-                  /* @__PURE__ */ c("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ l("div", { className: "space-y-2", children: [
                     /* @__PURE__ */ o("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((b = (O = n.textContent) == null ? void 0 : O.welcomeScreen) == null ? void 0 : b.title) || a("welcome-title") }),
                     /* @__PURE__ */ o("p", { className: "text-sm", children: ((B = (C = n.textContent) == null ? void 0 : C.welcomeScreen) == null ? void 0 : B.description) || a("welcome-description") })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ l(
               "div",
               {
                 className: d(
@@ -2294,7 +2294,7 @@ function Mr() {
                   "rounded-3xl"
                 ),
                 children: [
-                  /* @__PURE__ */ c("form", { onSubmit: _, className: "space-y-2", children: [
+                  /* @__PURE__ */ l("form", { onSubmit: _, className: "space-y-2", children: [
                     /* @__PURE__ */ o(
                       ne,
                       {
@@ -2328,7 +2328,7 @@ function Mr() {
                       },
                       N
                     )),
-                    /* @__PURE__ */ c(
+                    /* @__PURE__ */ l(
                       z,
                       {
                         disabled: u.loading,
@@ -2356,7 +2356,7 @@ function Pt() {
   const {
     routerState: { screen: e }
   } = H();
-  return /* @__PURE__ */ c(ve, { children: [
+  return /* @__PURE__ */ l(ve, { children: [
     /* @__PURE__ */ o(pe.Container, {}),
     /* @__PURE__ */ o("div", { className: "relative bg-background size-full", children: /* @__PURE__ */ o(T, { mode: "wait", children: (() => {
       switch (e) {
@@ -2399,7 +2399,7 @@ function Pt() {
     })() }) })
   ] });
 }
-const Dr = `<!DOCTYPE html>
+const Dr = "4.0.6", Rr = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2418,7 +2418,7 @@ html, body {
 </body>
 </html>`;
 function Wt() {
-  const { isOpen: e } = K(), { version: r, contentIframeRef: t } = Y(), { cssOverrides: n, inline: s } = S(), { theme: a, cssVars: i, computed: l } = X(), { dir: p } = Z();
+  const { isOpen: e } = K(), { contentIframeRef: r } = Y(), { cssOverrides: t, inline: n } = S(), { theme: s, cssVars: a, computed: i } = X(), { dir: c } = Z();
   return /* @__PURE__ */ o(
     J.div,
     {
@@ -2435,43 +2435,43 @@ function Wt() {
           opacity: 1,
           y: 0,
           display: "block",
-          height: s ? "100%" : void 0
+          height: n ? "100%" : void 0
         }
       },
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ l(
         ut,
         {
-          ref: t,
-          initialContent: Dr,
+          ref: r,
+          initialContent: Rr,
           allowFullScreen: !0,
           title: "OpenCX Live Chat",
           style: {
             // @ts-expect-error this is a valid css variable
-            "--opencx-widget-width": l.minWidth,
-            "--opencx-widget-height": l.minHeight,
-            minWidth: l.minWidth,
+            "--opencx-widget-width": i.minWidth,
+            "--opencx-widget-height": i.minHeight,
+            minWidth: i.minWidth,
             width: "var(--opencx-widget-width)",
-            maxWidth: l.maxWidth,
+            maxWidth: i.maxWidth,
             // Relative to the viewport
-            minHeight: l.minHeight,
+            minHeight: i.minHeight,
             height: "var(--opencx-widget-height)",
-            maxHeight: l.maxHeight,
+            maxHeight: i.maxHeight,
             // Relative to the viewport
             overflow: "hidden",
             /** outline is better than border because of box sizing; the outline wouldn't affect the content inside... the border will mess up how the children's border radius sits with the parent */
-            outline: a.widgetContentContainer.outline,
-            outlineColor: a.widgetContentContainer.outlineColor,
-            borderRadius: a.widgetContentContainer.borderRadius,
-            boxShadow: a.widgetContentContainer.boxShadow,
-            transitionProperty: a.widgetContentContainer.transitionProperty,
-            transitionTimingFunction: a.widgetContentContainer.transitionTimingFunction,
-            transitionDuration: a.widgetContentContainer.transitionDuration,
+            outline: s.widgetContentContainer.outline,
+            outlineColor: s.widgetContentContainer.outlineColor,
+            borderRadius: s.widgetContentContainer.borderRadius,
+            boxShadow: s.widgetContentContainer.boxShadow,
+            transitionProperty: s.widgetContentContainer.transitionProperty,
+            transitionTimingFunction: s.widgetContentContainer.transitionTimingFunction,
+            transitionDuration: s.widgetContentContainer.transitionDuration,
             // reset iframe defaults
             boxSizing: "border-box",
             borderWidth: "0px"
           },
           children: [
-            n && /* @__PURE__ */ o("style", { children: n }),
+            t && /* @__PURE__ */ o("style", { children: t }),
             /* @__PURE__ */ o(
               Lo,
               {
@@ -2481,13 +2481,13 @@ function Wt() {
                   "div",
                   {
                     style: {
-                      ...i
+                      ...a
                     },
-                    "data-version": r,
+                    "data-version": Dr,
                     className: d(
                       "antialiased font-sans size-full overflow-hidden relative text-secondary-foreground"
                     ),
-                    dir: p,
+                    dir: c,
                     children: /* @__PURE__ */ o(Pt, {})
                   }
                 )
@@ -2499,7 +2499,7 @@ function Wt() {
     }
   );
 }
-function Rr() {
+function Or() {
   const { theme: e } = X();
   return /* @__PURE__ */ o(
     ie.Content,
@@ -2519,11 +2519,11 @@ function Rr() {
     }
   );
 }
-function Or({
+function jr({
   className: e,
   style: r
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "svg",
     {
       width: "32",
@@ -2554,7 +2554,7 @@ function Or({
     }
   );
 }
-const jr = `<!DOCTYPE html>
+const Er = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2571,13 +2571,13 @@ html, body {
 <body>
 </body>
 </html>`;
-function Er() {
+function Fr() {
   var a, i;
   const { isOpen: e } = K(), { cssOverrides: r, assets: t } = S(), { theme: n, cssVars: s } = X();
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     ut,
     {
-      initialContent: jr,
+      initialContent: Er,
       style: {
         height: `calc(${n.widgetTrigger.size.button}px + ${V.x * 2}px)`,
         width: `calc(${n.widgetTrigger.size.button}px + ${V.y * 2}px)`,
@@ -2677,7 +2677,7 @@ function Er() {
                             }
                           }
                         ) : /* @__PURE__ */ o(
-                          Or,
+                          jr,
                           {
                             style: {
                               width: n.widgetTrigger.size.icon,
@@ -2699,7 +2699,7 @@ function Er() {
     }
   );
 }
-function Fr() {
+function Pr() {
   const { dir: e } = be();
   return /* @__PURE__ */ o(
     ie.Anchor,
@@ -2713,15 +2713,15 @@ function Fr() {
     }
   );
 }
-function Pr() {
+function Wr() {
   const { isOpen: e, setIsOpen: r } = K();
-  return /* @__PURE__ */ c(ie.Root, { open: e, onOpenChange: r, children: [
+  return /* @__PURE__ */ l(ie.Root, { open: e, onOpenChange: r, children: [
+    /* @__PURE__ */ o(Pr, {}),
     /* @__PURE__ */ o(Fr, {}),
-    /* @__PURE__ */ o(Er, {}),
-    /* @__PURE__ */ o(Rr, {})
+    /* @__PURE__ */ o(Or, {})
   ] });
 }
-const Wr = [
+const Hr = [
   {
     key: "loading",
     component: Bo
@@ -2738,7 +2738,7 @@ const Wr = [
     key: "agent_message",
     component: ae
   }
-], Hr = {
+], Ar = {
   get: async (e) => localStorage.getItem(e),
   set: async (e, r) => {
     localStorage.setItem(e, r);
@@ -2747,7 +2747,7 @@ const Wr = [
     localStorage.removeItem(e);
   }
 };
-function sn({
+function an({
   options: e,
   components: r = [],
   loadingComponent: t
@@ -2755,15 +2755,15 @@ function sn({
   return /* @__PURE__ */ o(
     $t,
     {
-      components: [...Wr, ...r],
+      components: [...Hr, ...r],
       options: e,
-      storage: Hr,
+      storage: Ar,
       loadingComponent: t,
-      children: /* @__PURE__ */ o(Yt, { children: e.inline ? /* @__PURE__ */ o(Wt, {}) : /* @__PURE__ */ o(Pr, {}) })
+      children: /* @__PURE__ */ o(Yt, { children: e.inline ? /* @__PURE__ */ o(Wt, {}) : /* @__PURE__ */ o(Wr, {}) })
     }
   );
 }
 export {
-  sn as Widget
+  an as Widget
 };
 //# sourceMappingURL=index.js.map