@opencx/widget-react 4.0.43 → 4.0.44

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as c, Fragment as re } from "react/jsx-runtime";
 import * as ce from "@radix-ui/react-popover";
 import * as G from "react";
 import U, { memo as $t, forwardRef as dt, useState as T, cloneElement as pt, createContext as Bt, useEffect as oe, useContext as Yt, useMemo as ht, useRef as de, createElement as ot } from "react";
-import { useWidget as j, useConfig as b, useSessions as $, useMessages as E, useWidgetRouter as A, useDocumentDir as ve, useWidgetTrigger as K, useModes as mt, useCsat as gt, useUploadFiles as Ut, useIsAwaitingBotReply as wt, useContact as qt, WidgetProvider as Xt, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
+import { useWidget as j, useConfig as b, useSessions as L, useMessages as E, useWidgetRouter as A, useDocumentDir as ve, useWidgetTrigger as K, useModes as mt, useCsat as gt, useUploadFiles as Ut, useIsAwaitingBotReply as wt, useContact as qt, WidgetProvider as Xt, WidgetTriggerProvider as Vt } from "@opencx/widget-react-headless";
 import { clsx as Gt } from "clsx";
 import { twMerge as Kt } from "tailwind-merge";
 import { motion as J, AnimatePresence as _ } from "framer-motion";
@@ -29,7 +29,7 @@ function p(...e) {
 const V = {
   x: 2,
   y: 2
-}, L = $t(
+}, Y = $t(
   dt(
     ({ children: e, className: o, scale: t = 1.02, off: n = !1 }, s) => {
       const [i, a] = T(!1), [l, d] = T({ x: 0, y: 0 });
@@ -78,7 +78,7 @@ const V = {
     }
   )
 );
-L.displayName = "Wobble";
+Y.displayName = "Wobble";
 const Er = 10, Rr = (e, o, t) => ({
   initial: { opacity: 0, x: -e, ...o.initial },
   animate: { opacity: 1, x: 0, ...o.animate, transition: { delay: t } },
@@ -155,7 +155,7 @@ const Hr = Zt(
     }
   }
 ), C = G.forwardRef(
-  ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, i) => /* @__PURE__ */ r(L, { ref: i, children: /* @__PURE__ */ r(
+  ({ className: e, variant: o = "default", size: t, asChild: n = !1, ...s }, i) => /* @__PURE__ */ r(Y, { ref: i, children: /* @__PURE__ */ r(
     n ? Qt : "button",
     {
       ...g("ui_lib/btn"),
@@ -321,13 +321,13 @@ function It({
 }
 function Tt({ attachment: e }) {
   const { name: o, size: t, type: n, url: s } = e, i = n.startsWith("image/"), a = n.startsWith("video/"), l = n.startsWith("audio/");
-  return l ? /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r("div", { className: "w-full shrink-0 overflow-hidden", children: /* @__PURE__ */ c("audio", { controls: !0, className: "w-full", children: [
+  return l ? /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r("div", { className: "w-full shrink-0 overflow-hidden", children: /* @__PURE__ */ c("audio", { controls: !0, className: "w-full", children: [
     /* @__PURE__ */ r("source", { src: s, type: n }),
     "Your browser does not support the audio tag."
-  ] }) }) }) : a ? /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("video", { controls: !0, children: [
+  ] }) }) }) : a ? /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r("div", { className: "w-full border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("video", { controls: !0, children: [
     /* @__PURE__ */ r("source", { src: s, type: n }),
     "Your browser does not support the video tag."
-  ] }) }) }) : !i && !a && !l ? /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("div", { className: "flex items-end gap-2 p-2", children: [
+  ] }) }) }) : !i && !a && !l ? /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: /* @__PURE__ */ c("div", { className: "flex items-end gap-2 p-2", children: [
     /* @__PURE__ */ r(
       "a",
       {
@@ -349,7 +349,7 @@ function Tt({ attachment: e }) {
   ] }) }) }) : /* @__PURE__ */ r(
     It,
     {
-      trigger: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: i && /* @__PURE__ */ r("img", { src: s, className: "object-cover size-16", alt: o }) }) }) }),
+      trigger: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r("div", { className: "size-fit border shrink-0 rounded-2xl overflow-hidden", children: i && /* @__PURE__ */ r("img", { src: s, className: "object-cover size-16", alt: o }) }) }) }),
       children: /* @__PURE__ */ r(
         kt,
         {
@@ -390,7 +390,7 @@ function Z() {
     widgetCtx: { org: e }
   } = j(), {
     sessionState: { session: o }
-  } = $(), t = b(), {
+  } = L(), t = b(), {
     messagesState: { messages: n }
   } = E(), {
     routerState: { screen: s }
@@ -593,8 +593,8 @@ const ae = {
   transitionDuration: "1000ms"
 };
 function q() {
-  var x, m, z, w, k, I, f, M, O, H, W, R, v, N, S, B, se, _e, Ie, Te, Me, De, je, Ee, Re, Pe, Ae, Fe, Oe, He, We, Le, $e, Be, Ye, Ue, qe, Xe, Ve, Ge, Ke, Qe, Ze, Je, et, tt, rt;
-  const { dir: e } = ve(), { isSmallScreen: o } = F(), { theme: t, inline: n } = b(), s = (Y) => n ? "100%" : Y, i = (Y, he) => o ? `100dv${Y}` : he, a = (Y, he) => s(i(Y, he)), l = {
+  var x, m, z, w, k, I, f, M, O, H, W, R, v, N, S, $, se, _e, Ie, Te, Me, De, je, Ee, Re, Pe, Ae, Fe, Oe, He, We, Le, $e, Be, Ye, Ue, qe, Xe, Ve, Ge, Ke, Qe, Ze, Je, et, tt, rt;
+  const { dir: e } = ve(), { isSmallScreen: o } = F(), { theme: t, inline: n } = b(), s = (B) => n ? "100%" : B, i = (B, he) => o ? `100dv${B}` : he, a = (B, he) => s(i(B, he)), l = {
     zIndex: ((x = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : x.zIndex) ?? 1e7,
     offset: {
       bottom: ((z = (m = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : m.offset) == null ? void 0 : z.bottom) ?? 20,
@@ -606,8 +606,8 @@ function q() {
       icon: ((W = (H = t == null ? void 0 : t.widgetTrigger) == null ? void 0 : H.size) == null ? void 0 : W.icon) ?? 24
     }
   }, d = (() => {
-    const Y = e === "ltr" ? l.offset.right : l.offset.left;
-    return typeof Y != "number" ? 0 : Y;
+    const B = e === "ltr" ? l.offset.right : l.offset.left;
+    return typeof B != "number" ? 0 : B;
   })(), h = {
     palette: (t == null ? void 0 : t.palette) ?? "neutral",
     primaryColor: (t == null ? void 0 : t.primaryColor) ?? "hsl(0 0% 9%)",
@@ -618,7 +618,7 @@ function q() {
       outline: ((N = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : N.outline) ?? "none",
       // was: '1px solid'
       outlineColor: ((S = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : S.outlineColor) ?? "hsl(0 0% 50% / .5)",
-      boxShadow: ((B = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : B.boxShadow) ?? "0 0px 100px 0px rgb(0 0 0 / 0.25)",
+      boxShadow: (($ = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : $.boxShadow) ?? "0 0px 100px 0px rgb(0 0 0 / 0.25)",
       transitionProperty: ((se = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : se.transitionProperty) ?? "all",
       transitionTimingFunction: ((_e = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : _e.transitionTimingFunction) ?? ae.transitionTimingFunction,
       transitionDuration: ((Ie = t == null ? void 0 : t.widgetContentContainer) == null ? void 0 : Ie.transitionDuration) ?? ae.transitionDuration,
@@ -992,7 +992,7 @@ function Pt({
   button: e
 }) {
   var k, I;
-  const { close: o } = pe(), { widgetCtx: t } = j(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: i } = $(), { isSmallScreen: a } = F(), l = !i.session, d = ((k = i.session) == null ? void 0 : k.isOpened) === !1, h = e.onResolved || "stay-in-chat", y = e.behaviorBeforeSessionCreation || "disabled", x = e.behaviorIfSessionIsResolved || "disabled", m = !!(i.isResolvingSession || l && y === "disabled" || d && x === "disabled"), z = async () => {
+  const { close: o } = pe(), { widgetCtx: t } = j(), { setIsOpen: n } = K(), { resolveSession: s, sessionState: i } = L(), { isSmallScreen: a } = F(), l = !i.session, d = ((k = i.session) == null ? void 0 : k.isOpened) === !1, h = e.onResolved || "stay-in-chat", y = e.behaviorBeforeSessionCreation || "disabled", x = e.behaviorIfSessionIsResolved || "disabled", m = !!(i.isResolvingSession || l && y === "disabled" || d && x === "disabled"), z = async () => {
     const { success: f, error: M } = await s();
     if (o(), !f) return console.error(M);
     switch (h) {
@@ -1165,7 +1165,7 @@ function ro() {
   };
 }
 function oo() {
-  const e = Z(), { activeMode: o, Component: t } = mt(), { sendMessage: n } = E(), { createStateCheckpoint: s } = $(), [i, a] = T(!1), l = async (d) => {
+  const e = Z(), { activeMode: o, Component: t } = mt(), { sendMessage: n } = E(), { createStateCheckpoint: s } = L(), [i, a] = T(!1), l = async (d) => {
     try {
       a(!0), await n(d);
     } catch (h) {
@@ -1369,7 +1369,7 @@ function ao() {
   );
 }
 function it() {
-  const { sessionState: e } = $(), { chatFooterItems: o } = b(), t = !!e.session && !e.session.isOpened, n = !t;
+  const { sessionState: e } = L(), { chatFooterItems: o } = b(), t = !!e.session && !e.session.isOpened, n = !t;
   return /* @__PURE__ */ r(_, { mode: "wait", children: o == null ? void 0 : o.map((s, i) => s.showWhenSessionIsOpen === !1 && n || s.showWhenSessionIsResolved === !1 && t ? null : /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r("div", { className: "pb-2 text-center text-xs", children: /* @__PURE__ */ r(be, { children: s.message }) }) }, `${s.message}-${i}`)) });
 }
 function io({
@@ -1445,7 +1445,7 @@ function io({
 }
 function lo() {
   var R;
-  const { isSmallScreen: e } = F(), o = de(null), { sendMessage: t } = E(), { sessionState: n } = $(), { t: s } = X(), [i, a] = T(""), {
+  const { isSmallScreen: e } = F(), o = de(null), { sendMessage: t } = E(), { sessionState: n } = L(), { t: s } = X(), [i, a] = T(""), {
     allFiles: l,
     emptyTheFiles: d,
     handleCancelUpload: h,
@@ -1607,7 +1607,7 @@ function lo() {
   );
 }
 function lt() {
-  const { widgetCtx: e } = j(), { router: o } = b(), { canCreateNewSession: t } = $(), { toSessionsScreen: n } = A(), { t: s } = X();
+  const { widgetCtx: e } = j(), { router: o } = b(), { canCreateNewSession: t } = L(), { toSessionsScreen: n } = A(), { t: s } = X();
   return /* @__PURE__ */ r(re, { children: t || o != null && o.chatScreenOnly ? /* @__PURE__ */ r(C, { onClick: e.resetChat, className: "rounded-2xl w-full", children: s("new_conversation") }) : /* @__PURE__ */ r(C, { onClick: n, className: "rounded-2xl w-full", children: s("back_to_conversations") }) });
 }
 function co() {
@@ -1625,7 +1625,7 @@ function co() {
 }
 function po() {
   var a;
-  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = b(), { sessionState: n } = $(), { messagesState: s } = E(), i = s.messages.length === 0;
+  const { initialQuestions: e, initialQuestionsPosition: o, thisWasHelpfulOrNot: t } = b(), { sessionState: n } = L(), { messagesState: s } = E(), i = s.messages.length === 0;
   return /* @__PURE__ */ r("footer", { children: /* @__PURE__ */ r(_, { mode: "wait", children: n.session && !((a = n.session) != null && a.isOpened) ? /* @__PURE__ */ c(P, { children: [
     /* @__PURE__ */ r(co, {}),
     /* @__PURE__ */ r(it, {})
@@ -2021,7 +2021,7 @@ function No() {
     messagesState: { isInitialFetchLoading: e }
   } = E(), {
     sessionState: { session: o }
-  } = $(), { isCanvasOpen: t } = ro(), { theme: n } = q();
+  } = L(), { isCanvasOpen: t } = ro(), { theme: n } = q();
   ze({
     width: t ? n.screens.chat.withCanvas.width : n.screens.chat.width,
     height: t ? n.screens.chat.withCanvas.height : n.screens.chat.height
@@ -2139,7 +2139,7 @@ function Ht({ className: e }) {
         "flex items-center justify-center gap-2 p-2 pt-0",
         e
       ),
-      children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ c(
         "a",
         {
           href: `https://open.cx/?ref=${o}`,
@@ -2211,7 +2211,7 @@ function To() {
     openSessions: s,
     closedSessions: i,
     canCreateNewSession: a
-  } = $();
+  } = L();
   return /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col overflow-scroll py-2 px-2", children: /* @__PURE__ */ r(_, { mode: "wait", children: n ? /* @__PURE__ */ r(
     u,
     {
@@ -2317,9 +2317,10 @@ function Mo() {
 const ie = G.forwardRef(
   ({ className: e, type: o, ...t }, n) => {
     const { isSmallScreen: s } = F();
-    return /* @__PURE__ */ r(L, { ref: n, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r(
       "input",
       {
+        ref: n,
         type: o,
         className: p(
           // 16px on mobiles prevents auto-zoom on the input when focused
@@ -2331,7 +2332,7 @@ const ie = G.forwardRef(
         ),
         ...t
       }
-    ) });
+    );
   }
 );
 ie.displayName = "Input";
@@ -2375,11 +2376,11 @@ function Eo() {
   ), [z, w] = T({}), [k, I] = jr(
     async (S) => {
       S.preventDefault();
-      const B = jo.safeParse({ name: d, email: y });
-      B.success && await t(
+      const $ = jo.safeParse({ name: d, email: y });
+      $.success && await t(
         {
-          email: B.data.email,
-          non_verified_name: B.data.name
+          email: $.data.email,
+          non_verified_name: $.data.name
         },
         // Only pass extra data if there is any
         Object.values(z).filter(Boolean).length ? z : void 0
@@ -2472,9 +2473,9 @@ function Eo() {
                       ie,
                       {
                         value: z[S],
-                        onChange: (B) => w((se) => ({
+                        onChange: ($) => w((se) => ({
                           ...se,
-                          [S]: B.target.value
+                          [S]: $.target.value
                         })),
                         placeholder: `${S} (${a("optional")})`
                       },
@@ -2547,7 +2548,7 @@ function Wt() {
     }
   })() }) });
 }
-const Ro = "4.0.43", Po = `<!DOCTYPE html>
+const Ro = "4.0.44", Po = `<!DOCTYPE html>
 <html>
 <head>
 <style>
@@ -2768,7 +2769,7 @@ function Ho() {
                   height: n.widgetTrigger.size.button,
                   width: n.widgetTrigger.size.button
                 },
-                children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r(
+                children: /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r(
                   "div",
                   {
                     ...g("trigger/btn"),