@opencx/widget-react 4.0.35 → 4.0.36

package/dist/index.js

@@ -38,12 +38,12 @@ 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), O = I - (x.top + x.height / 2), F = Math.max(
+        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(
           -1,
           Math.min(1, M / (x.width / 2))
         ), W = Math.max(
           -1,
-          Math.min(1, O / (x.height / 2))
+          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 = () => {
@@ -91,15 +91,15 @@ const Er = 10, Rr = (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 = (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 = {
+}), Hr = {
   right: Rr,
   left: Pr,
   up: Ar,
-  down: Hr
+  down: Or
 }, u = dt(
   ({
     fadeIn: e = "down",
@@ -110,7 +110,7 @@ const Er = 10, Rr = (e, o, t) => ({
     delay: a = 0,
     ...i
   }, l) => {
-    const d = e ? Or[e](o, s, a) : {};
+    const d = e ? Hr[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 });
   }
 );
@@ -547,7 +547,7 @@ function J({
   ] });
 }
 const st = 450;
-function H() {
+function O() {
   const [e, o] = U.useState(() => (window.top || window).innerWidth < st);
   return U.useEffect(() => {
     const t = window.top || window, n = () => {
@@ -563,8 +563,8 @@ const ie = {
   transitionDuration: "1000ms"
 };
 function q() {
-  var v, m, z, w, k, I, x, M, O, F, W, R, f, N, S, B, se, _e, Ie, Te, Me, De, je, Ee, Re, Pe, Ae, He, Oe, Fe, 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 = {
+  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,
     offset: {
       bottom: ((z = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.offset) == null ? void 0 : z.bottom) ?? 20,
@@ -572,7 +572,7 @@ function q() {
       left: ((x = (I = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : I.offset) == null ? void 0 : x.left) ?? (e === "rtl" ? 20 : "initial")
     },
     size: {
-      button: ((O = (M = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : M.size) == null ? void 0 : O.button) ?? 48,
+      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
     }
   }, d = (() => {
@@ -607,7 +607,7 @@ function q() {
         )
       },
       sessions: {
-        width: i("w", ((Oe = (He = t == null ? void 0 : t.screens) == null ? void 0 : He.sessions) == null ? void 0 : Oe.width) ?? "450px"),
+        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")
       },
       chat: {
@@ -783,7 +783,7 @@ function ze({
   width: e,
   height: o
 }) {
-  const { isSmallScreen: t } = H(), { setWidth: n, setHeight: s } = Rt();
+  const { isSmallScreen: t } = O(), { setWidth: n, setHeight: s } = Rt();
   re(() => {
     e && n(e), o && s(o);
   }, [t, o, e, n, s]);
@@ -915,7 +915,7 @@ function Qr() {
 function Zr({
   button: e
 }) {
-  const { setIsOpen: o } = K(), { isSmallScreen: t } = H();
+  const { setIsOpen: o } = K(), { isSmallScreen: t } = O();
   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 } = H(), { theme: a } = q(), { setWidth: i, setHeight: l } = Rt();
+  } = A(), { isSmallScreen: s } = O(), { theme: a } = q(), { setWidth: i, setHeight: l } = Rt();
   if (n !== "chat" && n !== "sessions") return null;
   const d = (() => {
     switch (n) {
@@ -981,7 +981,7 @@ function Pt({
   button: e
 }) {
   var k, I;
-  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", v = e.behaviorIfSessionIsResolved || "disabled", m = !!(a.isResolvingSession || l && y === "disabled" || d && v === "disabled"), z = async () => {
+  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);
     switch (h) {
@@ -1142,13 +1142,13 @@ function At() {
     /* @__PURE__ */ r(Vr, {})
   ] });
 }
-function Ht({ className: e }) {
+function Ot({ className: e }) {
   return /* @__PURE__ */ r(wr, { className: p("size-4 animate-spin", e) });
 }
 function to() {
   const {
     messagesState: { isInitialFetchLoading: e }
-  } = E(), { isSmallScreen: o } = H(), { activeMode: t, Component: n } = mt();
+  } = E(), { isSmallScreen: o } = O(), { activeMode: t, Component: n } = mt();
   return {
     isCanvasOpen: !e && !o && !!t && !!n
   };
@@ -1221,7 +1221,7 @@ const oo = [
   }
 ];
 function no() {
-  const { isSmallScreen: e } = H(), {
+  const { isSmallScreen: e } = O(), {
     submitCsat: o,
     isCsatRequested: t,
     isCsatSubmitted: n,
@@ -1434,7 +1434,7 @@ function io({
 }
 function ao() {
   var R;
-  const { isSmallScreen: e } = H(), o = de(null), { sendMessage: t } = E(), { sessionState: n } = L(), { t: s } = X(), [a, i] = T(""), {
+  const { isSmallScreen: e } = O(), o = de(null), { sendMessage: t } = E(), { sessionState: n } = L(), { t: s } = X(), [a, i] = T(""), {
     allFiles: l,
     emptyTheFiles: d,
     handleCancelUpload: h,
@@ -1463,7 +1463,7 @@ function ao() {
     }), i(""), d();
   }, {
     getRootProps: M,
-    getInputProps: O,
+    getInputProps: H,
     open: F
   } = Dr({
     onDrop: k,
@@ -1493,7 +1493,7 @@ function ao() {
       className: "p-2 relative space-y-1",
       ...M(),
       children: [
-        /* @__PURE__ */ r("input", { ...O() }),
+        /* @__PURE__ */ r("input", { ...H() }),
         /* @__PURE__ */ c(
           "div",
           {
@@ -1673,7 +1673,7 @@ function po({
     }
   );
 }
-function Ot({
+function Ht({
   messages: e,
   className: o,
   containerClassName: t
@@ -1746,7 +1746,7 @@ function le({
                         },
                         n.id
                       )),
-                      /* @__PURE__ */ r(Ot, { messages: e })
+                      /* @__PURE__ */ r(Ht, { messages: e })
                     ]
                   }
                 )
@@ -1838,7 +1838,7 @@ function go({
           },
           o.id
         )),
-        /* @__PURE__ */ r(Ot, { messages: e, containerClassName: "ms-auto" })
+        /* @__PURE__ */ r(Ht, { messages: e, containerClassName: "ms-auto" })
       ]
     }
   );
@@ -2036,7 +2036,7 @@ function zo() {
           u,
           {
             className: "flex flex-col items-center justify-center w-full flex-1",
-            children: /* @__PURE__ */ r(Ht, {})
+            children: /* @__PURE__ */ r(Ot, {})
           },
           "loading"
         ) : /* @__PURE__ */ c(
@@ -2204,7 +2204,7 @@ function Io() {
     u,
     {
       className: "flex-1 flex items-center justify-center",
-      children: /* @__PURE__ */ r(Ht, {})
+      children: /* @__PURE__ */ r(Ot, {})
     },
     "loading"
   ) : /* @__PURE__ */ r(
@@ -2304,7 +2304,7 @@ function To() {
 }
 const ae = G.forwardRef(
   ({ className: e, type: o, ...t }, n) => {
-    const { isSmallScreen: s } = H();
+    const { isSmallScreen: s } = O();
     return /* @__PURE__ */ r($, { ref: n, children: /* @__PURE__ */ r(
       "input",
       {
@@ -2350,10 +2350,10 @@ const Do = me.object({
   email: me.string().email()
 });
 function jo() {
-  var x, M, O, F, W, R, f, N;
+  var x, M, H, F, W, R, f, N;
   const {
     widgetCtx: { org: e }
-  } = j(), { setIsOpen: o } = K(), { createUnverifiedContact: t } = qt(), { isSmallScreen: n } = H(), s = b(), { theme: a } = q(), { t: i } = X(), { observedElementRef: l } = Mo();
+  } = j(), { setIsOpen: o } = K(), { createUnverifiedContact: t } = qt(), { isSmallScreen: n } = O(), s = b(), { theme: a } = q(), { t: i } = X(), { observedElementRef: l } = Mo();
   ze({
     height: void 0,
     width: a.screens.welcome.width
@@ -2409,7 +2409,7 @@ 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: (O = s.assets) != null && O.organizationLogo ? /* @__PURE__ */ r(
+                  /* @__PURE__ */ r("div", { className: "flex items-center justify-between w-full mb-2", children: (H = s.assets) != null && H.organizationLogo ? /* @__PURE__ */ r(
                     "img",
                     {
                       src: (F = s.assets) == null ? void 0 : F.organizationLogo,
@@ -2535,7 +2535,7 @@ function Wt() {
     }
   })() }) });
 }
-const Eo = "4.0.35", Ro = `<!DOCTYPE html>
+const Eo = "4.0.36", Ro = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2649,6 +2649,8 @@ function Po() {
       },
       side: "top",
       align: "end",
+      "aria-modal": "false",
+      "aria-label": "Support chat",
       sideOffset: e.widgetContentContainer.offset.side,
       alignOffset: e.widgetContentContainer.offset.align,
       avoidCollisions: !1,
@@ -2691,7 +2693,7 @@ function Ao({
     }
   );
 }
-const Ho = `<!DOCTYPE html>
+const Oo = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2708,13 +2710,14 @@ html, body {
 <body>
 </body>
 </html>`;
-function Oo() {
+function Ho() {
   var a, i;
   const { isOpen: e } = K(), { cssOverrides: o, assets: t } = b(), { theme: n, cssVars: s } = q();
   return /* @__PURE__ */ c(
     bt,
     {
-      initialContent: Ho,
+      initialContent: Oo,
+      title: "OpenCX Live Chat Trigger",
       style: {
         height: `calc(${n.widgetTrigger.size.button}px + ${V.x * 2}px)`,
         width: `calc(${n.widgetTrigger.size.button}px + ${V.y * 2}px)`,
@@ -2854,7 +2857,7 @@ function Wo() {
   const { isOpen: e, setIsOpen: o } = K();
   return /* @__PURE__ */ c(ce.Root, { open: e, onOpenChange: o, children: [
     /* @__PURE__ */ r(Fo, {}),
-    /* @__PURE__ */ r(Oo, {}),
+    /* @__PURE__ */ r(Ho, {}),
     /* @__PURE__ */ r(Po, {})
   ] });
 }