@opencx/widget-react 4.0.12 → 4.0.14

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsx as o, jsxs as d, Fragment as oe } from "react/jsx-runtime";
 import * as le from "@radix-ui/react-popover";
 import * as K from "react";
-import q, { memo as Yt, forwardRef as lt, useState as I, cloneElement as ct, createContext as $t, useEffect as re, useContext as qt, useMemo as dt, useRef as ce, createElement as ot } from "react";
-import { useWidget as $, useConfig as y, useDocumentDir as ve, useWidgetRouter as F, usePreludeData as de, useWidgetTrigger as Z, useSessions as U, useMessages as E, useModes as pt, useCsat as ht, useUploadFiles as Ut, useIsAwaitingBotReply as mt, useContact as Vt, WidgetProvider as Xt, WidgetTriggerProvider as Gt } from "@opencx/widget-react-headless";
+import $, { memo as Yt, forwardRef as lt, useState as I, cloneElement as ct, createContext as $t, useEffect as re, useContext as qt, useMemo as dt, useRef as ce, createElement as ot } from "react";
+import { useWidget as q, useConfig as x, useDocumentDir as ve, useWidgetRouter as F, usePreludeData as de, useWidgetTrigger as Z, useSessions as U, useMessages as E, useModes as pt, useCsat as ht, useUploadFiles as Ut, useIsAwaitingBotReply as mt, useContact as Vt, WidgetProvider as Xt, WidgetTriggerProvider as Gt } from "@opencx/widget-react-headless";
 import { clsx as Kt } from "clsx";
 import { twMerge as Zt } from "tailwind-merge";
 import { motion as J, AnimatePresence as N } from "framer-motion";
@@ -38,13 +38,13 @@ const G = {
       )) return e;
       const b = (f) => {
         var C, B;
-        const { clientX: z, clientY: T } = f, S = f.currentTarget.getBoundingClientRect(), M = z - (S.left + S.width / 2), P = T - (S.top + S.height / 2), A = Math.max(
+        const { clientX: z, clientY: T } = f, S = f.currentTarget.getBoundingClientRect(), M = z - (S.left + S.width / 2), O = T - (S.top + S.height / 2), P = Math.max(
           -1,
           Math.min(1, M / (S.width / 2))
-        ), O = Math.max(
+        ), A = Math.max(
           -1,
-          Math.min(1, P / (S.height / 2))
-        ), j = A * G.x, v = O * G.y;
+          Math.min(1, O / (S.height / 2))
+        ), j = P * G.x, v = A * G.y;
         l({ x: j, y: v }), (B = (C = e.props).onMouseMove) == null || B.call(C, f);
       }, w = () => {
         var f, z;
@@ -83,23 +83,23 @@ const Eo = 10, Ro = (e, r, t) => ({
   initial: { opacity: 0, x: -e, ...r.initial },
   animate: { opacity: 1, x: 0, ...r.animate, transition: { delay: t } },
   exit: { opacity: 0, x: e, ...r.exit }
-}), Po = (e, r, t) => ({
+}), Oo = (e, r, t) => ({
   initial: { opacity: 0, x: e, ...r.initial },
   animate: { opacity: 1, x: 0, ...r.animate, transition: { delay: t } },
   exit: { opacity: 0, x: -e, ...r.exit }
-}), Ao = (e, r, t) => ({
+}), Po = (e, r, t) => ({
   initial: { opacity: 0, y: e, ...r.initial },
   animate: { opacity: 1, y: 0, ...r.animate, transition: { delay: t } },
   exit: { opacity: 0, y: -e, ...r.exit }
-}), Oo = (e, r, t) => ({
+}), Ao = (e, r, t) => ({
   initial: { opacity: 0, y: -e, ...r.initial },
   animate: { opacity: 1, y: 0, ...r.animate, transition: { delay: t } },
   exit: { opacity: 0, y: e, ...r.exit }
 }), Wo = {
   right: Ro,
-  left: Po,
-  up: Ao,
-  down: Oo
+  left: Oo,
+  up: Po,
+  down: Ao
 }, g = lt(
   ({
     fadeIn: e = "down",
@@ -154,7 +154,7 @@ const Ho = Jt(
       size: "default"
     }
   }
-), x = K.forwardRef(
+), y = K.forwardRef(
   ({ className: e, variant: r = "default", size: t, asChild: n = !1, ...s }, a) => /* @__PURE__ */ o(W, { ref: a, children: /* @__PURE__ */ o(
     n ? Qt : "button",
     {
@@ -165,7 +165,7 @@ const Ho = Jt(
     }
   ) })
 );
-x.displayName = "Button";
+y.displayName = "Button";
 const bt = $t(null);
 function Fo({ children: e }) {
   const [r, t] = I(!1), [n, s] = I(null), a = (c) => {
@@ -198,7 +198,7 @@ function pe() {
   });
 }
 function Bo() {
-  const { contentIframeRef: e } = $(), { isOpen: r, content: t, close: n } = pe();
+  const { contentIframeRef: e } = q(), { isOpen: r, content: t, close: n } = pe();
   return re(() => {
     var a, i;
     const s = (c) => {
@@ -246,7 +246,7 @@ function xt({
       children: [
         e,
         t && /* @__PURE__ */ d(
-          x,
+          y,
           {
             size: "fit",
             className: "rounded-full absolute top-4 right-4",
@@ -289,7 +289,7 @@ const Ct = ({
   ...r
 }) => /* @__PURE__ */ o("div", { className: p("flex flex-col gap-2", e), ...r });
 Ct.displayName = "DialogerFooter";
-const zt = q.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+const zt = $.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   "p",
   {
     ref: t,
@@ -301,7 +301,7 @@ const zt = q.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   }
 ));
 zt.displayName = "DialogerTitle";
-const Nt = q.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+const Nt = $.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   "p",
   {
     ref: t,
@@ -361,7 +361,7 @@ function _t({ attachment: e }) {
     }
   );
 }
-const It = q.memo(
+const It = $.memo(
   Mo,
   (e, r) => e.children === r.children && e.className === r.className
 );
@@ -370,7 +370,7 @@ function Tt({
   messageType: r,
   messageId: t
 }) {
-  const { anchorTarget: n } = y();
+  const { anchorTarget: n } = x();
   return /* @__PURE__ */ o(
     It,
     {
@@ -529,7 +529,7 @@ function ee({
   side: t,
   align: n
 }) {
-  const { disableTooltips: s } = y();
+  const { disableTooltips: s } = x();
   return !r || s ? e : /* @__PURE__ */ d(qo, { children: [
     /* @__PURE__ */ o(Uo, { asChild: !0, children: e }),
     /* @__PURE__ */ o(
@@ -546,8 +546,8 @@ function ee({
 }
 const nt = 450;
 function R() {
-  const [e, r] = q.useState(() => (window.top || window).innerWidth < nt);
-  return q.useEffect(() => {
+  const [e, r] = $.useState(() => (window.top || window).innerWidth < nt);
+  return $.useEffect(() => {
     const t = window.top || window, n = () => {
       r(t.innerWidth < nt);
     };
@@ -561,8 +561,8 @@ const ae = {
   transitionDuration: "1000ms"
 };
 function V() {
-  var w, m, k, f, z, T, S, M, P, A, O, j, v, C, B, _, L, se, _e, Ie, Te, Me, De, je, Ee, Re, Pe, Ae, Oe, We, He, Fe, Be, Le, Ye, $e, qe, Ue, Ve, Xe, Ge, Ke, Ze, Qe, Je, et, tt;
-  const { dir: e } = ve(), { isSmallScreen: r } = R(), { theme: t, inline: n } = y(), s = (Y) => n ? "100%" : Y, a = (Y, he) => r ? `100dv${Y}` : he, i = (Y, he) => s(a(Y, he)), c = {
+  var w, m, k, f, z, T, S, M, O, P, A, j, v, C, B, _, L, se, _e, Ie, Te, Me, De, je, Ee, Re, Oe, Pe, Ae, We, He, Fe, Be, Le, Ye, $e, qe, Ue, Ve, Xe, Ge, Ke, Ze, Qe, Je, et, tt;
+  const { dir: e } = ve(), { isSmallScreen: r } = R(), { theme: t, inline: n } = x(), s = (Y) => n ? "100%" : Y, a = (Y, he) => r ? `100dv${Y}` : he, i = (Y, he) => s(a(Y, he)), c = {
     zIndex: ((w = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : w.zIndex) ?? 1e7,
     offset: {
       bottom: ((k = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.offset) == null ? void 0 : k.bottom) ?? 20,
@@ -570,8 +570,8 @@ function V() {
       left: ((S = (T = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : T.offset) == null ? void 0 : S.left) ?? (e === "rtl" ? 20 : "initial")
     },
     size: {
-      button: ((P = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : P.button) ?? 48,
-      icon: ((O = (A = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : A.size) == null ? void 0 : O.icon) ?? 24
+      button: ((O = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : O.button) ?? 48,
+      icon: ((A = (P = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : P.size) == null ? void 0 : A.icon) ?? 24
     }
   }, l = (() => {
     const Y = e === "ltr" ? c.offset.right : c.offset.left;
@@ -601,11 +601,11 @@ function V() {
         // 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",
-          ((Pe = (Re = t == null ? void 0 : t.screens) == null ? void 0 : Re.welcome) == null ? void 0 : Pe.minHeight) ?? "1px"
+          ((Oe = (Re = t == null ? void 0 : t.screens) == null ? void 0 : Re.welcome) == null ? void 0 : Oe.minHeight) ?? "1px"
         )
       },
       sessions: {
-        width: i("w", ((Oe = (Ae = t == null ? void 0 : t.screens) == null ? void 0 : Ae.sessions) == null ? void 0 : Oe.width) ?? "450px"),
+        width: i("w", ((Ae = (Pe = t == null ? void 0 : t.screens) == null ? void 0 : Pe.sessions) == null ? void 0 : Ae.width) ?? "450px"),
         height: i("h", ((He = (We = t == null ? void 0 : t.screens) == null ? void 0 : We.sessions) == null ? void 0 : He.height) ?? "600px")
       },
       chat: {
@@ -759,7 +759,7 @@ function jt(e) {
   }
 }
 function Et() {
-  const { contentIframeRef: e } = $(), { inline: r } = y();
+  const { contentIframeRef: e } = q(), { inline: r } = x();
   return {
     setWidth: (t) => {
       var n;
@@ -847,7 +847,7 @@ function ze() {
   var s;
   const { data: e } = de(), {
     routerState: { screen: r }
-  } = F(), { textContent: t } = y();
+  } = F(), { textContent: t } = x();
   return (() => {
     var a, i;
     switch (r) {
@@ -877,12 +877,12 @@ function Xo(e) {
   }
 }
 function Go() {
-  const { router: e } = y(), {
+  const { router: e } = x(), {
     routerState: { screen: r },
     toSessionsScreen: t
   } = F();
   return r !== "chat" || e != null && e.chatScreenOnly ? null : /* @__PURE__ */ o(
-    x,
+    y,
     {
       variant: "ghost",
       size: "fit",
@@ -897,7 +897,7 @@ function Ko({
 }) {
   const { setIsOpen: r } = Z(), { isSmallScreen: t } = R();
   return t && e.hideOnSmallScreen || !t && e.hideOnLargeScreen ? null : /* @__PURE__ */ o(
-    x,
+    y,
     {
       variant: "ghost",
       size: "fit",
@@ -942,7 +942,7 @@ function we({
     });
   };
   return s && e.hideOnSmallScreen || !s && e.hideOnLargeScreen ? null : /* @__PURE__ */ o(
-    x,
+    y,
     {
       variant: "ghost",
       size: "fit",
@@ -957,11 +957,11 @@ function we({
     }
   );
 }
-function Pt({
+function Ot({
   button: e
 }) {
   var z, T;
-  const { close: r } = pe(), { widgetCtx: t } = $(), { setIsOpen: n } = Z(), { resolveSession: s, sessionState: a } = U(), { isSmallScreen: i } = R(), c = !a.session, l = ((z = a.session) == null ? void 0 : z.isOpened) === !1, h = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", w = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || c && b === "disabled" || l && w === "disabled"), k = async () => {
+  const { close: r } = pe(), { widgetCtx: t } = q(), { setIsOpen: n } = Z(), { resolveSession: s, sessionState: a } = U(), { isSmallScreen: i } = R(), c = !a.session, l = ((z = a.session) == null ? void 0 : z.isOpened) === !1, h = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", w = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || c && b === "disabled" || l && w === "disabled"), k = async () => {
     const { success: S, error: M } = await s();
     if (r(), !S) return console.error(M);
     switch (h) {
@@ -977,7 +977,7 @@ function Pt({
         n(!1), t.resetChat();
         break;
       default:
-        D(h, Pt.name);
+        D(h, Ot.name);
         break;
     }
   }, f = () => {
@@ -1020,7 +1020,7 @@ function Pt({
     St,
     {
       trigger: /* @__PURE__ */ o(
-        x,
+        y,
         {
           variant: "ghost",
           size: "fit",
@@ -1034,7 +1034,7 @@ function Pt({
         /* @__PURE__ */ o(kt, { children: /* @__PURE__ */ o(Nt, { children: e.confirmation.description || "Are you sure you want to close this conversation?" }) }),
         /* @__PURE__ */ d(Ct, { children: [
           /* @__PURE__ */ o(
-            x,
+            y,
             {
               variant: "secondary",
               onClick: r,
@@ -1043,7 +1043,7 @@ function Pt({
             }
           ),
           /* @__PURE__ */ o(
-            x,
+            y,
             {
               variant: "destructive",
               onClick: k,
@@ -1055,7 +1055,7 @@ function Pt({
       ] })
     }
   ) : /* @__PURE__ */ o(
-    x,
+    y,
     {
       variant: "ghost",
       size: "fit",
@@ -1073,7 +1073,7 @@ function fe({ button: e }) {
     case "expand-shrink":
       return /* @__PURE__ */ o(we, { button: e });
     case "resolve-session":
-      return /* @__PURE__ */ o(Pt, { button: e });
+      return /* @__PURE__ */ o(Ot, { button: e });
     default:
       return D(e, fe.name), null;
   }
@@ -1086,7 +1086,7 @@ const Zo = {
 function Qo() {
   const {
     routerState: { screen: e }
-  } = F(), { headerButtons: r } = y(), t = e === "chat" ? r == null ? void 0 : r.chatScreen : e === "sessions" ? r == null ? void 0 : r.sessionsScreen : [];
+  } = F(), { headerButtons: r } = x(), t = e === "chat" ? r == null ? void 0 : r.chatScreen : e === "sessions" ? r == null ? void 0 : r.sessionsScreen : [];
   return !t || t.length === 0 ? /* @__PURE__ */ o(fe, { button: Zo }) : /* @__PURE__ */ o(oe, { children: t.map((n) => /* @__PURE__ */ o(
     fe,
     {
@@ -1095,7 +1095,7 @@ function Qo() {
     `${n.functionality}-${n.icon}`
   )) });
 }
-function At() {
+function Pt() {
   const {
     routerState: { screen: e }
   } = F(), { isLoading: r } = de(), t = Xo(e), n = ze();
@@ -1114,7 +1114,7 @@ function At() {
     /* @__PURE__ */ o(Qo, {})
   ] }) });
 }
-function Ot({ className: e }) {
+function At({ className: e }) {
   return /* @__PURE__ */ o(fo, { className: p("size-4 animate-spin", e) });
 }
 function Jo() {
@@ -1138,7 +1138,7 @@ function er() {
   return !e || !r ? null : /* @__PURE__ */ o(
     r,
     {
-      react: q,
+      react: $,
       mode: e,
       createStateCheckpoint: n,
       sendMessage: i,
@@ -1146,7 +1146,7 @@ function er() {
     }
   );
 }
-const H = q.forwardRef(
+const H = $.forwardRef(
   (e, r) => {
     var t, n, s;
     return /* @__PURE__ */ o(
@@ -1218,7 +1218,7 @@ function or() {
           n && "gap-0 justify-center"
         ),
         children: tr.map((m) => /* @__PURE__ */ o(
-          x,
+          y,
           {
             variant: m.value === i ? "secondary" : "ghost",
             size: "selfless",
@@ -1261,7 +1261,7 @@ function or() {
         }
       ),
       /* @__PURE__ */ o(
-        x,
+        y,
         {
           size: "fit",
           onClick: w,
@@ -1424,7 +1424,7 @@ function mr(e, r) {
   return t && t[e] || "";
 }
 function X() {
-  const { dir: e } = ve(), r = y();
+  const { dir: e } = ve(), r = x();
   return dt(() => {
     const t = hr(r.language) ? r.language : "en";
     return {
@@ -1445,7 +1445,7 @@ function Ne({
     a && n({ content: a });
   };
   return /* @__PURE__ */ o(
-    x,
+    y,
     {
       ...u("chat/suggested_reply_btn"),
       size: "sm",
@@ -1579,8 +1579,8 @@ function wr() {
     }), i(""), l();
   }, {
     getRootProps: M,
-    getInputProps: P,
-    open: A
+    getInputProps: O,
+    open: P
   } = Do({
     onDrop: z,
     noClick: !0,
@@ -1598,7 +1598,7 @@ function wr() {
       "image/gif": [".gif"],
       "image/webp": [".webp"]
     }
-  }), O = (v) => {
+  }), A = (v) => {
     const C = v.clipboardData;
     C && C.files.length > 0 && z(Array.from(C.files));
   };
@@ -1609,7 +1609,7 @@ function wr() {
       className: "p-2 relative space-y-1",
       ...M(),
       children: [
-        /* @__PURE__ */ o("input", { ...P() }),
+        /* @__PURE__ */ o("input", { ...O() }),
         /* @__PURE__ */ d(
           "div",
           {
@@ -1646,7 +1646,7 @@ function wr() {
                       "textarea",
                       {
                         ...u("chat/input_box/textarea"),
-                        onPaste: O,
+                        onPaste: A,
                         ref: r,
                         id: "chat-input",
                         value: a,
@@ -1680,9 +1680,9 @@ function wr() {
                     align: "start",
                     content: "attach files, (maximum size 5mb)",
                     children: /* @__PURE__ */ o(
-                      x,
+                      y,
                       {
-                        onClick: A,
+                        onClick: P,
                         size: "fit",
                         variant: "ghost",
                         className: p(
@@ -1694,7 +1694,7 @@ function wr() {
                   }
                 ),
                 /* @__PURE__ */ o(ee, { content: "send message", side: "top", align: "end", children: /* @__PURE__ */ o(
-                  x,
+                  y,
                   {
                     size: "fit",
                     onClick: S,
@@ -1712,8 +1712,8 @@ function wr() {
   );
 }
 function at() {
-  const { widgetCtx: e } = $(), { router: r } = y(), { canCreateNewSession: t } = U(), { toSessionsScreen: n } = F(), { t: s } = X();
-  return /* @__PURE__ */ o(oe, { children: t || r != null && r.chatScreenOnly ? /* @__PURE__ */ o(x, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new-conversation") }) : /* @__PURE__ */ o(x, { onClick: n, className: "rounded-2xl w-full", children: s("back-to-conversations") }) });
+  const { widgetCtx: e } = q(), { router: r } = x(), { canCreateNewSession: t } = U(), { toSessionsScreen: n } = F(), { t: s } = X();
+  return /* @__PURE__ */ o(oe, { children: t || r != null && r.chatScreenOnly ? /* @__PURE__ */ o(y, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new-conversation") }) : /* @__PURE__ */ o(y, { onClick: n, className: "rounded-2xl w-full", children: s("back-to-conversations") }) });
 }
 function fr() {
   const { t: e } = X(), { isCsatRequested: r, isCsatSubmitted: t } = ht();
@@ -1730,7 +1730,7 @@ function fr() {
 }
 function vr() {
   var i;
-  const { initialQuestions: e, initialQuestionsPosition: r, thisWasHelpfulOrNot: t } = y(), { sessionState: n } = U(), { messagesState: s } = E(), a = s.messages.length === 0;
+  const { initialQuestions: e, initialQuestionsPosition: r, thisWasHelpfulOrNot: t } = x(), { sessionState: n } = U(), { messagesState: s } = E(), a = s.messages.length === 0;
   return /* @__PURE__ */ o("footer", { children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(N, { mode: "wait", children: n.session && !((i = n.session) != null && i.isOpened) ? /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(fr, {}) }, "session-closed") : /* @__PURE__ */ d(H, { children: [
     s.lastAIResMightSolveUserIssue && (t == null ? void 0 : t.enabled) !== !1 && /* @__PURE__ */ o(ur, {}),
     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, l) => /* @__PURE__ */ o(
@@ -1749,7 +1749,7 @@ function br({
   isAloneInGroup: t,
   ...n
 }) {
-  const { componentStore: s } = $();
+  const { componentStore: s } = q();
   if (n.type !== "AGENT" && n.type !== "AI") return null;
   if (n.data.action) {
     const i = s.getComponent(n.data.action.name);
@@ -1791,7 +1791,7 @@ function Ht({
   containerClassName: t
 }) {
   var i, c;
-  const { timestamps: n } = y();
+  const { timestamps: n } = x();
   if (!((i = n == null ? void 0 : n.perMessageGroup) != null && i.enabled))
     return null;
   const s = (c = e[e.length - 1]) == null ? void 0 : c.timestamp;
@@ -1976,7 +1976,7 @@ function Sr() {
     initialQuestionsPosition: t,
     initialQuestions: n,
     bot: s
-  } = y();
+  } = x();
   return /* @__PURE__ */ o(oe, { children: e.length === 0 && r.length > 0 && /* @__PURE__ */ o(
     Se,
     {
@@ -1997,7 +1997,7 @@ function Sr() {
 function _r() {
   const {
     messagesState: { messages: e }
-  } = E(), { chatBannerItems: r } = y();
+  } = E(), { chatBannerItems: r } = x();
   return !(r != null && r.length) || e.length > 0 && r.every((t) => !t.persistent) ? null : /* @__PURE__ */ o("div", { className: "w-full text-center text-xs", children: r.map(
     ({ message: t, persistent: n }, s) => e.length > 0 && !n ? null : /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(Tt, { children: t }) }, `${t}-${s}`)
   ) });
@@ -2005,7 +2005,7 @@ function _r() {
 function Ir() {
   const {
     messagesState: { messages: e }
-  } = E(), r = y(), {
+  } = E(), r = x(), {
     advancedInitialMessages: t = [],
     initialQuestions: n,
     initialQuestionsPosition: s
@@ -2033,7 +2033,7 @@ function Ir() {
 function Tr() {
   const {
     messagesState: { messages: e }
-  } = E(), { isAwaitingBotReply: r } = mt(), { componentStore: t } = $(), n = y(), s = dt(
+  } = E(), { isAwaitingBotReply: r } = mt(), { componentStore: t } = q(), n = x(), s = dt(
     () => kr(e),
     [e]
   ), a = t.getComponent(
@@ -2076,12 +2076,21 @@ function Tr() {
           }
           return null;
         }),
-        r && a && /* @__PURE__ */ o(a, { agent: n.bot })
+        r && a && /* @__PURE__ */ o(a, { agent: n.bot }),
+        /* @__PURE__ */ o(Mr, {})
       ]
     }
   );
 }
 function Mr() {
+  const {
+    sessionState: { session: e }
+  } = U(), { specialComponents: r } = x();
+  if (e != null && e.isOpened || !e) return null;
+  const t = r == null ? void 0 : r.onSessionResolved;
+  return t ? /* @__PURE__ */ o(t, { react: $ }) : null;
+}
+function Dr() {
   const {
     messagesState: { isInitialFetchLoading: e }
   } = E(), {
@@ -2108,12 +2117,12 @@ function Mr() {
         // Relative to the iframe
       },
       children: /* @__PURE__ */ d("div", { className: "size-full justify-between flex flex-col", children: [
-        /* @__PURE__ */ o(At, {}),
+        /* @__PURE__ */ o(Pt, {}),
         /* @__PURE__ */ o(N, { mode: "wait", children: e ? /* @__PURE__ */ o(
           g,
           {
             className: "flex flex-col items-center justify-center w-full flex-1",
-            children: /* @__PURE__ */ o(Ot, {})
+            children: /* @__PURE__ */ o(At, {})
           },
           "loading"
         ) : /* @__PURE__ */ d(
@@ -2163,7 +2172,7 @@ function Mr() {
     }
   );
 }
-function Dr({ className: e }) {
+function jr({ className: e }) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -2184,7 +2193,7 @@ function Dr({ className: e }) {
   );
 }
 function Ft({ className: e }) {
-  const { token: r } = y();
+  const { token: r } = x();
   return /* @__PURE__ */ o(
     "div",
     {
@@ -2207,7 +2216,7 @@ function Ft({ className: e }) {
             /* @__PURE__ */ o("span", { children: "Powered by" }),
             /* @__PURE__ */ o("span", { children: " " }),
             /* @__PURE__ */ d("span", { className: "flex items-center gap-[1px]", children: [
-              /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(Dr, { className: "size-3 inline-block" }) }),
+              /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(jr, { className: "size-3 inline-block" }) }),
               /* @__PURE__ */ o("span", { className: "font-semibold", children: "open" })
             ] })
           ]
@@ -2216,16 +2225,16 @@ function Ft({ className: e }) {
     }
   );
 }
-function jr({ children: e }) {
+function Er({ children: e }) {
   return /* @__PURE__ */ o("p", { className: "ps-4 text-xs text-muted-foreground/75 uppercase font-semibold tracking-tight", children: e });
 }
 function it({
   session: e,
   className: r
 }) {
-  const { bot: t } = y(), { toChatScreen: n } = F(), 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) || "";
+  const { bot: t } = x(), { toChatScreen: n } = F(), 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__ */ d(
-    x,
+    y,
     {
       variant: "ghost",
       size: "lg",
@@ -2258,7 +2267,7 @@ function it({
     }
   );
 }
-function Er() {
+function Rr() {
   const { t: e } = X(), { toChatScreen: r } = F(), {
     sessionsState: { data: t, isInitialFetchLoading: n },
     openSessions: s,
@@ -2269,7 +2278,7 @@ function Er() {
     g,
     {
       className: "flex-1 flex items-center justify-center",
-      children: /* @__PURE__ */ o(Ot, {})
+      children: /* @__PURE__ */ o(At, {})
     },
     "loading"
   ) : /* @__PURE__ */ o(
@@ -2296,7 +2305,7 @@ function Er() {
               delay: 0.2,
               snapExit: !0,
               children: [
-                /* @__PURE__ */ o(jr, { children: e("closed-conversations") }),
+                /* @__PURE__ */ o(Er, { children: e("closed-conversations") }),
                 a.map((c) => /* @__PURE__ */ o(
                   it,
                   {
@@ -2311,7 +2320,7 @@ function Er() {
           )
         ] }),
         i && /* @__PURE__ */ o("div", { className: "mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background", children: /* @__PURE__ */ ot(
-          x,
+          y,
           {
             ...u("sessions/new_conversation_btn"),
             size: "lg",
@@ -2324,7 +2333,7 @@ function Er() {
       ] }) : /* @__PURE__ */ d("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__ */ ot(
-          x,
+          y,
           {
             ...u("sessions/new_conversation_btn"),
             size: "lg",
@@ -2339,7 +2348,7 @@ function Er() {
     "sessions"
   ) }) });
 }
-function Rr() {
+function Or() {
   const { theme: e } = V();
   return Ce({
     width: e.screens.sessions.width,
@@ -2360,8 +2369,8 @@ function Rr() {
         // Relative to the iframe
       },
       children: /* @__PURE__ */ d("div", { className: "size-full flex flex-col", children: [
-        /* @__PURE__ */ o(At, {}),
-        /* @__PURE__ */ o(Er, {}),
+        /* @__PURE__ */ o(Pt, {}),
+        /* @__PURE__ */ o(Rr, {}),
         /* @__PURE__ */ o(Ft, {})
       ] })
     }
@@ -2389,7 +2398,7 @@ const ie = K.forwardRef(
 );
 ie.displayName = "Input";
 function Pr() {
-  const { contentIframeRef: e } = $(), { inline: r } = y(), t = ce(null);
+  const { contentIframeRef: e } = q(), { inline: r } = x(), t = ce(null);
   return re(() => {
     const n = e == null ? void 0 : e.current;
     if (n && t.current) {
@@ -2414,9 +2423,9 @@ const Ar = me.object({
   name: me.string().min(2),
   email: me.string().email()
 });
-function Or() {
-  var S, M, P, A, O, j, v, C, B;
-  const { setIsOpen: e } = Z(), { createUnverifiedContact: r } = Vt(), { isSmallScreen: t } = R(), n = y(), { theme: s } = V(), { t: a } = X(), { data: i } = de(), { observedElementRef: c } = Pr();
+function Wr() {
+  var S, M, O, P, A, j, v, C, B;
+  const { setIsOpen: e } = Z(), { createUnverifiedContact: r } = Vt(), { isSmallScreen: t } = R(), n = x(), { theme: s } = V(), { t: a } = X(), { data: i } = de(), { observedElementRef: c } = Pr();
   Ce({
     height: void 0,
     width: s.screens.welcome.width
@@ -2471,15 +2480,15 @@ function Or() {
                   "text-primary-foreground"
                 ),
                 children: [
-                  t && /* @__PURE__ */ o(g, { className: "absolute top-6 end-6", children: /* @__PURE__ */ o(x, { size: "selfless", onClick: () => e(!1), children: /* @__PURE__ */ o(be, { className: "size-4" }) }) }),
-                  /* @__PURE__ */ o("div", { className: "flex items-center justify-between w-full mb-2", children: (P = n.assets) != null && P.organizationLogo ? /* @__PURE__ */ o(
+                  t && /* @__PURE__ */ o(g, { className: "absolute top-6 end-6", children: /* @__PURE__ */ o(y, { size: "selfless", onClick: () => e(!1), children: /* @__PURE__ */ o(be, { className: "size-4" }) }) }),
+                  /* @__PURE__ */ o("div", { className: "flex items-center justify-between w-full mb-2", children: (O = n.assets) != null && O.organizationLogo ? /* @__PURE__ */ o(
                     "img",
                     {
-                      src: (A = n.assets) == null ? void 0 : A.organizationLogo,
+                      src: (P = n.assets) == null ? void 0 : P.organizationLogo,
                       alt: "Company Logo",
                       className: "h-8 w-auto object-contain"
                     }
-                  ) : /* @__PURE__ */ o("h2", { className: "font-bold text-sm", children: (O = i == null ? void 0 : i.data) == null ? void 0 : O.organizationName }) }),
+                  ) : /* @__PURE__ */ o("h2", { className: "font-bold text-sm", children: (A = i == null ? void 0 : i.data) == null ? void 0 : A.organizationName }) }),
                   /* @__PURE__ */ d("div", { className: "space-y-2", children: [
                     /* @__PURE__ */ o("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((v = (j = n.textContent) == null ? void 0 : j.welcomeScreen) == null ? void 0 : v.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") })
@@ -2532,7 +2541,7 @@ function Or() {
                       _
                     )),
                     /* @__PURE__ */ d(
-                      x,
+                      y,
                       {
                         disabled: z.loading,
                         className: "w-full",
@@ -2568,7 +2577,7 @@ function Bt() {
             fadeIn: "right",
             className: "size-full",
             snapExit: !0,
-            children: /* @__PURE__ */ o(Or, {})
+            children: /* @__PURE__ */ o(Wr, {})
           },
           e
         );
@@ -2579,7 +2588,7 @@ function Bt() {
             fadeIn: "right",
             className: "size-full",
             snapExit: !0,
-            children: /* @__PURE__ */ o(Rr, {})
+            children: /* @__PURE__ */ o(Or, {})
           },
           e
         );
@@ -2590,7 +2599,7 @@ function Bt() {
             fadeIn: "right",
             className: "size-full",
             snapExit: !0,
-            children: /* @__PURE__ */ o(Mr, {})
+            children: /* @__PURE__ */ o(Dr, {})
           },
           e
         );
@@ -2599,7 +2608,7 @@ function Bt() {
     }
   })() }) });
 }
-const Wr = "4.0.12", Hr = `<!DOCTYPE html>
+const Hr = "4.0.14", Fr = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2618,7 +2627,7 @@ html, body {
 </body>
 </html>`;
 function Lt() {
-  const { isOpen: e } = Z(), { contentIframeRef: r } = $(), { cssOverrides: t, inline: n } = y(), { theme: s, cssVars: a, computed: i } = V(), { dir: c } = X();
+  const { isOpen: e } = Z(), { contentIframeRef: r } = q(), { cssOverrides: t, inline: n } = x(), { theme: s, cssVars: a, computed: i } = V(), { dir: c } = X();
   return /* @__PURE__ */ o(
     J.div,
     {
@@ -2642,7 +2651,7 @@ function Lt() {
         vt,
         {
           ref: r,
-          initialContent: Hr,
+          initialContent: Fr,
           allowFullScreen: !0,
           title: "OpenCX Live Chat",
           style: {
@@ -2679,7 +2688,7 @@ function Lt() {
                   ...a,
                   zIndex: s.widgetContentContainer.zIndex
                 },
-                "data-version": Wr,
+                "data-version": Hr,
                 className: p(
                   "antialiased font-sans size-full overflow-hidden relative text-secondary-foreground isolate"
                 ),
@@ -2700,7 +2709,7 @@ function Lt() {
     }
   );
 }
-function Fr() {
+function Br() {
   const { theme: e } = V();
   return /* @__PURE__ */ o(
     le.Content,
@@ -2720,7 +2729,7 @@ function Fr() {
     }
   );
 }
-function Br({
+function Lr({
   className: e,
   style: r
 }) {
@@ -2755,7 +2764,7 @@ function Br({
     }
   );
 }
-const Lr = `<!DOCTYPE html>
+const Yr = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2772,13 +2781,13 @@ html, body {
 <body>
 </body>
 </html>`;
-function Yr() {
+function $r() {
   var a, i;
-  const { isOpen: e } = Z(), { cssOverrides: r, assets: t } = y(), { theme: n, cssVars: s } = V();
+  const { isOpen: e } = Z(), { cssOverrides: r, assets: t } = x(), { theme: n, cssVars: s } = V();
   return /* @__PURE__ */ d(
     vt,
     {
-      initialContent: Lr,
+      initialContent: Yr,
       style: {
         height: `calc(${n.widgetTrigger.size.button}px + ${G.x * 2}px)`,
         width: `calc(${n.widgetTrigger.size.button}px + ${G.y * 2}px)`,
@@ -2878,7 +2887,7 @@ function Yr() {
                             }
                           }
                         ) : /* @__PURE__ */ o(
-                          Br,
+                          Lr,
                           {
                             style: {
                               width: n.widgetTrigger.size.icon,
@@ -2900,7 +2909,7 @@ function Yr() {
     }
   );
 }
-function $r() {
+function qr() {
   const { dir: e } = ve();
   return /* @__PURE__ */ o(
     le.Anchor,
@@ -2914,15 +2923,15 @@ function $r() {
     }
   );
 }
-function qr() {
+function Ur() {
   const { isOpen: e, setIsOpen: r } = Z();
   return /* @__PURE__ */ d(le.Root, { open: e, onOpenChange: r, children: [
+    /* @__PURE__ */ o(qr, {}),
     /* @__PURE__ */ o($r, {}),
-    /* @__PURE__ */ o(Yr, {}),
-    /* @__PURE__ */ o(Fr, {})
+    /* @__PURE__ */ o(Br, {})
   ] });
 }
-const Ur = [
+const Vr = [
   {
     key: "loading",
     component: Yo
@@ -2939,7 +2948,7 @@ const Ur = [
     key: "agent_message",
     component: ue
   }
-], Vr = {
+], Xr = {
   get: async (e) => localStorage.getItem(e),
   set: async (e, r) => {
     localStorage.setItem(e, r);
@@ -2948,7 +2957,7 @@ const Ur = [
     localStorage.removeItem(e);
   }
 };
-function mn({
+function un({
   options: e,
   components: r = [],
   loadingComponent: t
@@ -2956,15 +2965,15 @@ function mn({
   return /* @__PURE__ */ o(
     Xt,
     {
-      components: [...Ur, ...r],
+      components: [...Vr, ...r],
       options: e,
-      storage: Vr,
+      storage: Xr,
       loadingComponent: t,
-      children: /* @__PURE__ */ o(Gt, { children: e.inline ? /* @__PURE__ */ o(Lt, {}) : /* @__PURE__ */ o(qr, {}) })
+      children: /* @__PURE__ */ o(Gt, { children: e.inline ? /* @__PURE__ */ o(Lt, {}) : /* @__PURE__ */ o(Ur, {}) })
     }
   );
 }
 export {
-  mn as Widget
+  un as Widget
 };
 //# sourceMappingURL=index.js.map