@opencx/widget-react 4.0.15 → 4.0.16

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as d, Fragment as te } from "react/jsx-runtime";
 import * as ie from "@radix-ui/react-popover";
 import * as G from "react";
 import $, { memo as Bt, forwardRef as it, useState as I, cloneElement as lt, createContext as Lt, useEffect as oe, useContext as Yt, useMemo as ct, useRef as le, createElement as tt } from "react";
-import { useWidget as E, useConfig as x, useDocumentDir as we, useWidgetRouter as B, useWidgetTrigger as K, useSessions as q, useMessages as R, useModes as dt, useCsat as pt, useUploadFiles as $t, useIsAwaitingBotReply as ht, useContact as qt, WidgetProvider as Ut, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
+import { useWidget as j, useConfig as x, useDocumentDir as we, useWidgetRouter as B, useWidgetTrigger as K, useSessions as q, useMessages as R, useModes as dt, useCsat as pt, useUploadFiles as $t, useIsAwaitingBotReply as ht, useContact as qt, WidgetProvider as Ut, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
 import { clsx as Xt } from "clsx";
 import { twMerge as Gt } from "tailwind-merge";
 import { motion as Q, AnimatePresence as S } from "framer-motion";
@@ -44,8 +44,8 @@ const X = {
         ), W = Math.max(
           -1,
           Math.min(1, A / (_.height / 2))
-        ), j = P * X.x, v = W * X.y;
-        l({ x: j, y: v }), (z = (C = e.props).onMouseMove) == null || z.call(C, f);
+        ), E = P * X.x, v = W * X.y;
+        l({ x: E, y: v }), (z = (C = e.props).onMouseMove) == null || z.call(C, f);
       }, w = () => {
         var f, N;
         a(!0), (N = (f = e.props).onMouseEnter) == null || N.call(f);
@@ -198,7 +198,7 @@ function ce() {
   });
 }
 function Ho() {
-  const { contentIframeRef: e } = E(), { isOpen: r, content: t, close: n } = ce();
+  const { contentIframeRef: e } = j(), { isOpen: r, content: t, close: n } = ce();
   return oe(() => {
     var i, a;
     const s = (c) => {
@@ -561,7 +561,7 @@ const se = {
   transitionDuration: "1000ms"
 };
 function U() {
-  var w, m, k, f, N, T, _, M, A, P, W, j, v, C, z, L, ne, Ne, Se, _e, Ie, Te, Me, De, je, Ee, Re, Oe, Ae, Pe, We, He, Fe, Be, Le, Ye, $e, qe, Ue, Ve, Xe, Ge, Ke, Ze, Qe, Je, et;
+  var w, m, k, f, N, T, _, M, A, P, W, E, v, C, z, L, ne, Ne, Se, _e, Ie, Te, Me, De, je, Ee, Re, Oe, Ae, Pe, We, He, Fe, Be, Le, Ye, $e, qe, Ue, Ve, Xe, Ge, Ke, Ze, Qe, Je, et;
   const { dir: e } = we(), { isSmallScreen: r } = O(), { theme: t, inline: n } = x(), s = (Y) => n ? "100%" : Y, i = (Y, de) => r ? `100dv${Y}` : de, a = (Y, de) => s(i(Y, de)), c = {
     zIndex: ((w = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : w.zIndex) ?? 1e7,
     offset: {
@@ -581,7 +581,7 @@ function U() {
     primaryColor: (t == null ? void 0 : t.primaryColor) ?? "hsl(0 0% 9%)",
     widgetTrigger: c,
     widgetContentContainer: {
-      borderRadius: r ? "0px" : ((j = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : j.borderRadius) ?? "32px",
+      borderRadius: r ? "0px" : ((E = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : E.borderRadius) ?? "32px",
       zIndex: ((v = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : v.zIndex) ?? c.zIndex + 1,
       outline: ((C = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : C.outline) ?? "none",
       // was: '1px solid'
@@ -759,7 +759,7 @@ function Dt(e) {
   }
 }
 function jt() {
-  const { contentIframeRef: e } = E(), { inline: r } = x();
+  const { contentIframeRef: e } = j(), { inline: r } = x();
   return {
     setWidth: (t) => {
       var n;
@@ -832,7 +832,7 @@ function ee({
   return /* @__PURE__ */ o(t, { className: p("size-4", r) });
 }
 function ke() {
-  const { widgetCtx: { org: e } } = E(), {
+  const { widgetCtx: { org: e } } = j(), {
     routerState: { screen: r }
   } = B(), { textContent: t } = x();
   return (() => {
@@ -948,7 +948,7 @@ function Et({
   button: e
 }) {
   var N, T;
-  const { close: r } = ce(), { widgetCtx: t } = E(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: i } = q(), { isSmallScreen: a } = O(), c = !i.session, l = ((N = i.session) == null ? void 0 : N.isOpened) === !1, h = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", w = e.behaviorIfSessionIsResolved || "disabled", m = !!(i.isResolvingSession || c && b === "disabled" || l && w === "disabled"), k = async () => {
+  const { close: r } = ce(), { widgetCtx: t } = j(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: i } = q(), { isSmallScreen: a } = O(), c = !i.session, l = ((N = i.session) == null ? void 0 : N.isOpened) === !1, h = e.onResolved || "stay-in-chat", b = e.behaviorBeforeSessionCreation || "disabled", w = e.behaviorIfSessionIsResolved || "disabled", m = !!(i.isResolvingSession || c && b === "disabled" || l && w === "disabled"), k = async () => {
     const { success: _, error: M } = await s();
     if (r(), !_) return console.error(M);
     switch (h) {
@@ -1536,7 +1536,7 @@ function mr({
   );
 }
 function ur() {
-  var j;
+  var E;
   const { isSmallScreen: e } = O(), r = le(null), { sendMessage: t } = R(), { sessionState: n } = q(), { t: s } = V(), [i, a] = I(""), {
     allFiles: c,
     emptyTheFiles: l,
@@ -1544,7 +1544,7 @@ function ur() {
     appendFiles: b,
     isUploading: w,
     successFiles: m
-  } = $t(), k = !!((j = n.session) != null && j.isHandedOff), { isAwaitingBotReply: f } = ht(), N = (v) => {
+  } = $t(), k = !!((E = n.session) != null && E.isHandedOff), { isAwaitingBotReply: f } = ht(), N = (v) => {
     b(v);
   }, T = !i.trim() && m.length === 0, _ = async () => {
     if (f || T) return;
@@ -1699,7 +1699,7 @@ function ur() {
   );
 }
 function st() {
-  const { widgetCtx: e } = E(), { router: r } = x(), { canCreateNewSession: t } = q(), { toSessionsScreen: n } = B(), { t: s } = V();
+  const { widgetCtx: e } = j(), { router: r } = x(), { canCreateNewSession: t } = q(), { toSessionsScreen: n } = B(), { t: s } = V();
   return /* @__PURE__ */ o(te, { 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 gr() {
@@ -1736,7 +1736,7 @@ function fr({
   isAloneInGroup: t,
   ...n
 }) {
-  const { componentStore: s } = E();
+  const { componentStore: s } = j();
   if (n.type !== "AGENT" && n.type !== "AI") return null;
   if (n.data.action) {
     const a = s.getComponent(n.data.action.name);
@@ -1871,7 +1871,18 @@ function ze({
     }
   );
 }
-function vr({
+function vr() {
+  var s;
+  const {
+    widgetCtx: { org: e }
+  } = j(), {
+    sessionState: { session: r }
+  } = q(), t = x();
+  if (r != null && r.isOpened || !r) return null;
+  const n = (s = t.specialComponents) == null ? void 0 : s.onSessionResolved;
+  return n ? /* @__PURE__ */ o(n, { react: $, session: r, config: t, org: e }) : null;
+}
+function br({
   message: e,
   isFirstInGroup: r,
   isLastInGroup: t,
@@ -1911,7 +1922,7 @@ function vr({
     }
   );
 }
-function br({
+function xr({
   messages: e
 }) {
   return /* @__PURE__ */ d(
@@ -1921,7 +1932,7 @@ function br({
       className: p("group", "flex flex-col gap-1 justify-end items-end"),
       children: [
         e.map((r, t, n) => /* @__PURE__ */ o(
-          vr,
+          br,
           {
             message: r,
             isFirstInGroup: t === 0,
@@ -1935,7 +1946,7 @@ function br({
     }
   );
 }
-function xr(e) {
+function yr(e) {
   const r = [];
   let t = null;
   return e.forEach((n) => {
@@ -1943,19 +1954,19 @@ function xr(e) {
     (!t || ((s = t[0]) == null ? void 0 : s.type) !== n.type) && (t = [], r.push(t)), ((i = t[0]) == null ? void 0 : i.type) === "AGENT" && n.type === "AGENT" && (((a = n.agent) == null ? void 0 : a.id) !== ((c = t[0].agent) == null ? void 0 : c.id) || ((l = n.agent) == null ? void 0 : l.name) !== ((h = t[0].agent) == null ? void 0 : h.name)) && (t = [], r.push(t)), t.push(n);
   }), r;
 }
-function yr(e) {
+function kr(e) {
   var r;
   return ((r = e == null ? void 0 : e[0]) == null ? void 0 : r.type) === "USER";
 }
-function kr(e) {
+function Cr(e) {
   var r;
   return ((r = e == null ? void 0 : e[0]) == null ? void 0 : r.type) === "AI";
 }
-function Cr(e) {
+function zr(e) {
   var r;
   return ((r = e == null ? void 0 : e[0]) == null ? void 0 : r.type) === "AGENT";
 }
-function zr() {
+function Nr() {
   const {
     messagesState: { messages: e }
   } = R(), {
@@ -1981,7 +1992,7 @@ function zr() {
     }
   ) });
 }
-function Nr() {
+function Sr() {
   const {
     messagesState: { messages: e }
   } = R(), { chatBannerItems: r } = x();
@@ -1989,7 +2000,7 @@ function Nr() {
     ({ message: t, persistent: n }, s) => e.length > 0 && !n ? null : /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(It, { children: t }) }, `${t}-${s}`)
   ) });
 }
-function Sr() {
+function _r() {
   const {
     messagesState: { messages: e }
   } = R(), r = x(), {
@@ -2017,11 +2028,11 @@ function Sr() {
     }
   ) });
 }
-function _r() {
+function Ir() {
   const {
     messagesState: { messages: e }
-  } = R(), { isAwaitingBotReply: r } = ht(), { componentStore: t } = E(), n = x(), s = ct(
-    () => xr(e),
+  } = R(), { isAwaitingBotReply: r } = ht(), { componentStore: t } = j(), n = x(), s = ct(
+    () => yr(e),
     [e]
   ), i = t.getComponent(
     "loading"
@@ -2041,16 +2052,16 @@ function _r() {
       ref: a,
       className: "max-h-full scroll-smooth relative flex-1 py-2 px-4 flex flex-col gap-2 overflow-auto",
       children: [
-        /* @__PURE__ */ o(Nr, {}),
-        /* @__PURE__ */ o(zr, {}),
         /* @__PURE__ */ o(Sr, {}),
+        /* @__PURE__ */ o(Nr, {}),
+        /* @__PURE__ */ o(_r, {}),
         s.map((l) => {
           var w, m, k;
           const h = (w = l == null ? void 0 : l[0]) == null ? void 0 : w.type, b = (m = l[0]) == null ? void 0 : m.id;
           if (!h || !b) return null;
-          if (yr(l))
-            return /* @__PURE__ */ o(br, { messages: l }, b);
-          if (kr(l) || Cr(l)) {
+          if (kr(l))
+            return /* @__PURE__ */ o(xr, { messages: l }, b);
+          if (Cr(l) || zr(l)) {
             const f = (k = l[0]) == null ? void 0 : k.agent;
             return /* @__PURE__ */ o(
               ze,
@@ -2064,19 +2075,11 @@ function _r() {
           return null;
         }),
         r && i && /* @__PURE__ */ o(i, { agent: n.bot }),
-        /* @__PURE__ */ o(Ir, {})
+        /* @__PURE__ */ o(vr, {})
       ]
     }
   );
 }
-function Ir() {
-  const {
-    sessionState: { session: e }
-  } = q(), { 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 Tr() {
   const {
     messagesState: { isInitialFetchLoading: e }
@@ -2131,7 +2134,7 @@ function Tr() {
                     transitionDuration: n.screens.chat.withCanvas.transitionDuration
                   },
                   children: [
-                    /* @__PURE__ */ o(_r, {}),
+                    /* @__PURE__ */ o(Ir, {}),
                     /* @__PURE__ */ o(wr, {})
                   ]
                 }
@@ -2397,7 +2400,7 @@ const ae = G.forwardRef(
 );
 ae.displayName = "Input";
 function Or() {
-  const { contentIframeRef: e } = E(), { inline: r } = x(), t = le(null);
+  const { contentIframeRef: e } = j(), { inline: r } = x(), t = le(null);
   return oe(() => {
     const n = e == null ? void 0 : e.current;
     if (n && t.current) {
@@ -2423,8 +2426,8 @@ const Ar = pe.object({
   email: pe.string().email()
 });
 function Pr() {
-  var _, M, A, P, W, j, v, C;
-  const { widgetCtx: { org: e } } = E(), { setIsOpen: r } = K(), { createUnverifiedContact: t } = qt(), { isSmallScreen: n } = O(), s = x(), { theme: i } = U(), { t: a } = V(), { observedElementRef: c } = Or();
+  var _, M, A, P, W, E, v, C;
+  const { widgetCtx: { org: e } } = j(), { setIsOpen: r } = K(), { createUnverifiedContact: t } = qt(), { isSmallScreen: n } = O(), s = x(), { theme: i } = U(), { t: a } = V(), { observedElementRef: c } = Or();
   ye({
     height: void 0,
     width: i.screens.welcome.width
@@ -2489,7 +2492,7 @@ function Pr() {
                     }
                   ) : /* @__PURE__ */ o("h2", { className: "font-bold text-sm", children: e.name }) }),
                   /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ o("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((j = (W = s.textContent) == null ? void 0 : W.welcomeScreen) == null ? void 0 : j.title) || a("welcome-title") }),
+                    /* @__PURE__ */ o("h1", { className: "text-[1.75rem] font-semibold tracking-tight leading-none", children: ((E = (W = s.textContent) == null ? void 0 : W.welcomeScreen) == null ? void 0 : E.title) || a("welcome-title") }),
                     /* @__PURE__ */ o("p", { className: "text-sm", children: ((C = (v = s.textContent) == null ? void 0 : v.welcomeScreen) == null ? void 0 : C.description) || a("welcome-description") })
                   ] })
                 ]
@@ -2606,7 +2609,7 @@ function Ht() {
     }
   })() }) });
 }
-const Wr = "4.0.15", Hr = `<!DOCTYPE html>
+const Wr = "4.0.16", Hr = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2625,7 +2628,7 @@ html, body {
 </body>
 </html>`;
 function Ft() {
-  const { isOpen: e } = K(), { contentIframeRef: r } = E(), { cssOverrides: t, inline: n } = x(), { theme: s, cssVars: i, computed: a } = U(), { dir: c } = V();
+  const { isOpen: e } = K(), { contentIframeRef: r } = j(), { cssOverrides: t, inline: n } = x(), { theme: s, cssVars: i, computed: a } = U(), { dir: c } = V();
   return /* @__PURE__ */ o(
     Q.div,
     {