@paramms/chat-widget 1.0.41 → 1.0.43

package/dist/react.js

@@ -1,6 +1,6 @@
-import { jsxs as k, jsx as e, Fragment as O } from "react/jsx-runtime";
-import { useState as _, useRef as z, useEffect as D } from "react";
-import { mount as A } from "./index.js";
+import { jsxs as _, jsx as e, Fragment as O } from "react/jsx-runtime";
+import { useState as k, useRef as B, useEffect as D } from "react";
+import { mount as H } from "./index.js";
 function G({ size: o = 26 }) {
   return /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: o, height: o, fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ e(
     "path",
@@ -17,89 +17,89 @@ function G({ size: o = 26 }) {
 function Y({ size: o = 22 }) {
   return /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: o, height: o, fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) });
 }
-function V({
+function Q({
   url: o,
-  apiUrl: i,
-  profileId: d,
+  apiUrl: r,
+  profileId: s,
   token: n,
-  refreshToken: r,
+  refreshToken: i,
   userId: l,
-  userName: s,
-  userEmail: h,
+  userName: d,
+  userEmail: u,
   userAvatar: v,
   contextTitle: m,
-  contextSubtitle: u,
-  contextStatus: b,
-  subjectId: L,
-  accent: C,
-  launcher: x,
+  contextSubtitle: p,
+  contextStatus: h,
+  subjectId: C,
+  accent: R,
+  launcher: b,
   position: t,
   launcherMessage: f,
-  quickReplies: a,
+  quickReplies: j,
   height: M = "100%",
-  i18n: w,
-  translateLang: R,
-  inbox: p,
-  inboxScope: j
+  i18n: L,
+  translateLang: S,
+  inbox: a,
+  inboxScope: $
 }) {
-  const c = z(null), g = z(null), [S, $] = _(!1);
+  const w = B(null), c = B(null), [x, g] = k(!1);
   return D(() => {
-    var B;
-    if (!S && c.current)
-      return (B = g.current) == null || B.close(), g.current = A({
-        el: c.current,
+    var z;
+    if (!x && w.current)
+      return (z = c.current) == null || z.close(), c.current = H({
+        el: w.current,
         url: o,
-        ...i ? { apiUrl: i } : {},
-        profileId: d,
-        ...L ? { subjectId: L } : {},
+        ...r ? { apiUrl: r } : {},
+        profileId: s,
+        ...C ? { subjectId: C } : {},
         ...n ? { token: n } : {},
-        ...r ? { refreshToken: r } : {},
+        ...i ? { refreshToken: i } : {},
         ...l ? { userId: l } : {},
-        ...l || s || h || v ? {
+        ...l || d || u || v ? {
           user: {
-            ...s ? { name: s } : {},
-            ...h ? { email: h } : {},
+            ...d ? { name: d } : {},
+            ...u ? { email: u } : {},
             ...v ? { avatar: v } : {}
           }
         } : {},
         ...m ? {
           subject: {
             title: m,
-            ...u ? { subtitle: u } : {},
-            ...b ? { status: b } : {}
+            ...p ? { subtitle: p } : {},
+            ...h ? { status: h } : {}
           }
         } : {},
-        ...a ? { quickReplies: a } : {},
-        ...C ? { accent: C } : {},
-        ...R ? { translateLang: R } : {},
-        ...w ? { i18n: w } : {},
-        ...p && !x ? { onBack: () => $(!0) } : {},
-        ...x ? { launcher: x, position: t ?? "bottom-right", ...f ? { launcherMessage: f } : {} } : {}
+        ...j ? { quickReplies: j } : {},
+        ...R ? { accent: R } : {},
+        ...S ? { translateLang: S } : {},
+        ...L ? { i18n: L } : {},
+        ...a && !b ? { onBack: () => g(!0) } : {},
+        ...b ? { launcher: b, position: t ?? "bottom-right", ...f ? { launcherMessage: f } : {} } : {}
       }), () => {
         var y;
-        (y = g.current) == null || y.close(), g.current = null;
+        (y = c.current) == null || y.close(), c.current = null;
       };
-  }, [o, i, d, L, n, l, s, h, C, x, t, f, R, p, S]), p && !x && S ? /* @__PURE__ */ e(
-    F,
+  }, [o, r, s, C, n, l, d, u, R, b, t, f, S, a, x]), a && !b && x ? /* @__PURE__ */ e(
+    A,
     {
       url: o,
-      ...i ? { apiUrl: i } : {},
-      profileId: d,
+      ...r ? { apiUrl: r } : {},
+      profileId: s,
       ...n ? { token: n } : {},
-      ...r ? { refreshToken: r } : {},
+      ...i ? { refreshToken: i } : {},
       ...l ? { userId: l } : {},
-      ...s ? { userName: s } : {},
-      ...h ? { userEmail: h } : {},
-      ...C ? { accent: C } : {},
-      scope: j ?? "tenant",
+      ...d ? { userName: d } : {},
+      ...u ? { userEmail: u } : {},
+      ...R ? { accent: R } : {},
+      scope: $ ?? "tenant",
       height: M,
-      onClose: () => $(!1)
+      onClose: () => g(!1)
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
-      ref: c,
-      style: x ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: M, minHeight: M === "100%" ? "480px" : void 0 }
+      ref: w,
+      style: b ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: M, minHeight: M === "100%" ? "480px" : void 0 }
     }
   );
 }
@@ -108,176 +108,181 @@ const q = [
   "Can I schedule a viewing?",
   "What is your best price?"
 ];
-function X({
+function V({
   url: o,
-  apiUrl: i,
-  profileId: d,
+  apiUrl: r,
+  profileId: s,
   token: n,
-  refreshToken: r,
+  refreshToken: i,
   listingId: l,
-  listingTitle: s,
-  listingMeta: h,
+  listingTitle: d,
+  listingMeta: u,
   listingPrice: v,
   listingStatus: m,
-  userId: u,
-  userName: b,
-  userEmail: L,
-  userAvatar: C,
-  accent: x,
+  userId: p,
+  userName: h,
+  userEmail: C,
+  userAvatar: R,
+  accent: b,
   launcher: t,
   position: f,
-  launcherMessage: a,
+  launcherMessage: j,
   quickReplies: M,
-  height: w = "100%",
-  i18n: R,
-  translateLang: p,
-  inbox: j,
-  inboxScope: c
+  height: L = "100%",
+  i18n: S,
+  translateLang: a,
+  inbox: $,
+  inboxScope: w
 }) {
-  const g = z(null), S = z(null), [$, B] = _(!1);
+  const c = B(null), x = B(null), [g, z] = k(!1);
   return D(() => {
-    if ($ || !g.current) return;
+    if (g || !c.current) return;
     let y = !1;
-    const H = setTimeout(() => {
+    const F = setTimeout(() => {
       var W;
-      y || !g.current || ((W = S.current) == null || W.close(), S.current = A({
-        el: g.current,
+      y || !c.current || ((W = x.current) == null || W.close(), x.current = H({
+        el: c.current,
         url: o,
-        ...i ? { apiUrl: i } : {},
-        profileId: d,
+        ...r ? { apiUrl: r } : {},
+        profileId: s,
         ...l ? { subjectId: `listing_${l}` } : {},
         ...n ? { token: n } : {},
-        ...r ? { refreshToken: r } : {},
-        ...u ? { userId: u } : {},
-        ...u || b || L || C ? {
+        ...i ? { refreshToken: i } : {},
+        ...p ? { userId: p } : {},
+        ...p || h || C || R ? {
           user: {
-            ...b ? { name: b } : {},
-            ...L ? { email: L } : {},
-            ...C ? { avatar: C } : {},
+            ...h ? { name: h } : {},
+            ...C ? { email: C } : {},
+            ...R ? { avatar: R } : {},
             ...l ? { meta: { listingId: l } } : {}
           }
         } : {},
-        ...s ? {
+        ...d ? {
           subject: {
-            title: s,
-            ...h ? { subtitle: h } : {},
+            title: d,
+            ...u ? { subtitle: u } : {},
             ...v ? { tags: [`$${v.toLocaleString()}`] } : {},
             ...m ? { status: m } : {}
           }
         } : {},
         quickReplies: M ?? q,
-        ...x ? { accent: x } : {},
-        ...p ? { translateLang: p } : {},
-        ...R ? { i18n: R } : {},
-        ...j && !t ? { onBack: () => B(!0) } : {},
-        ...t ? { launcher: t, position: f ?? "bottom-right", ...a ? { launcherMessage: a } : {} } : {}
+        ...b ? { accent: b } : {},
+        ...a ? { translateLang: a } : {},
+        ...S ? { i18n: S } : {},
+        ...$ && !t ? { onBack: () => z(!0) } : {},
+        ...t ? { launcher: t, position: f ?? "bottom-right", ...j ? { launcherMessage: j } : {} } : {}
       }));
     }, 0);
     return () => {
       var W;
-      y = !0, clearTimeout(H), (W = S.current) == null || W.close(), S.current = null;
+      y = !0, clearTimeout(F), (W = x.current) == null || W.close(), x.current = null;
     };
-  }, [o, i, d, l, n, u, x, t, f, a, p, j, $]), j && !t && $ ? /* @__PURE__ */ e(
-    F,
+  }, [o, r, s, l, n, p, b, t, f, j, a, $, g]), $ && !t && g ? /* @__PURE__ */ e(
+    A,
     {
       url: o,
-      ...i ? { apiUrl: i } : {},
-      profileId: d,
+      ...r ? { apiUrl: r } : {},
+      profileId: s,
       ...n ? { token: n } : {},
-      ...r ? { refreshToken: r } : {},
-      ...u ? { userId: u } : {},
-      ...b ? { userName: b } : {},
-      ...L ? { userEmail: L } : {},
-      ...x ? { accent: x } : {},
-      scope: c ?? "tenant",
-      height: w,
-      onClose: () => B(!1)
+      ...i ? { refreshToken: i } : {},
+      ...p ? { userId: p } : {},
+      ...h ? { userName: h } : {},
+      ...C ? { userEmail: C } : {},
+      ...b ? { accent: b } : {},
+      scope: w ?? "tenant",
+      height: L,
+      onClose: () => z(!1)
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
-      ref: g,
-      style: t ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: w, minHeight: w === "100%" ? "480px" : void 0 }
+      ref: c,
+      style: t ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: L, minHeight: L === "100%" ? "480px" : void 0 }
     }
   );
 }
 function K(o) {
-  const [i, d] = _(
+  const [r, s] = k(
     typeof window < "u" && window.innerWidth <= o
   );
   return D(() => {
     if (typeof window > "u" || !window.matchMedia) return;
-    const n = window.matchMedia(`(max-width: ${o}px)`), r = (l) => d(l.matches);
-    return d(n.matches), n.addEventListener("change", r), () => n.removeEventListener("change", r);
-  }, [o]), i;
+    const n = window.matchMedia(`(max-width: ${o}px)`), i = (l) => s(l.matches);
+    return s(n.matches), n.addEventListener("change", i), () => n.removeEventListener("change", i);
+  }, [o]), r;
 }
-function F({
+function A({
   url: o,
-  apiUrl: i,
-  profileId: d,
+  apiUrl: r,
+  profileId: s,
   tenantId: n,
-  token: r,
+  token: i,
   refreshToken: l,
-  userId: s,
-  userName: h,
+  userId: d,
+  userName: u,
   userEmail: v,
   accent: m,
-  height: u = "100%",
-  i18n: b,
-  onClose: L,
-  scope: C = "tenant"
+  height: p = "100%",
+  i18n: h,
+  onClose: C,
+  scope: R = "tenant"
 }) {
-  const x = !d && !n, [t, f] = _(null), a = z(null), M = z(null), w = z(null), R = z(null);
+  const b = !s && !n, [t, f] = k(null), [j, M] = k(!1), L = B(null), S = B(null), a = B(null), $ = B(null);
   return D(() => {
-    if (!a.current) return;
-    let p = !1;
-    return import("./chatlist.js").then(({ mountChatList: j }) => {
-      p || !a.current || (w.current = j({
-        el: a.current,
+    if (!L.current) return;
+    let w = !1;
+    return import("./chatlist.js").catch((c) => (console.error("[relay] could not load the conversation list module.", c), w || M(!0), null)).then((c) => {
+      if (!c) return;
+      const { mountChatList: x } = c;
+      w || !L.current || (a.current = x({
+        el: L.current,
         url: o,
-        ...i ? { apiUrl: i } : {},
-        ...d ? { profileId: d } : {},
+        ...r ? { apiUrl: r } : {},
+        ...s ? { profileId: s } : {},
         ...n ? { tenantId: n } : {},
-        scope: C,
-        onSelect: (c) => f(c),
+        scope: R,
+        // We overlay a ✕ at top-right when `onClose` is given — tell the list to
+        // keep its header clear so the ✕ doesn't land on the ✎ compose button.
+        ...C ? { reserveCloseSpace: !0 } : {},
+        onSelect: (g) => f(g),
         // Compose (✎) opens the chatroom's general support thread — without
         // this a user with no conversations yet had an empty list and no way
         // to ever start one, which is what made ChatApp feel broken.
         // Compose target: the configured chatroom, else the tenant's default
         // (oldest chatroom, reported by the server on the first list fetch).
         onNewChat: () => {
-          var g;
-          const c = (g = w.current) == null ? void 0 : g.defaultProfileId();
-          c && f({ id: "__new__", profileId: c, state: "open", updatedAt: Date.now() });
+          var z;
+          const g = (z = a.current) == null ? void 0 : z.defaultProfileId();
+          g && f({ id: "__new__", profileId: g, state: "open", updatedAt: Date.now() });
         },
-        ...r ? { token: r } : {},
-        ...s ? { userId: s } : {},
+        ...i ? { token: i } : {},
+        ...d ? { userId: d } : {},
         ...m ? { accent: m } : {},
-        ...b ? { i18n: b } : {}
+        ...h ? { i18n: h } : {}
       }));
     }), () => {
-      var j;
-      p = !0, (j = w.current) == null || j.close(), w.current = null;
+      var c;
+      w = !0, (c = a.current) == null || c.close(), a.current = null;
     };
-  }, [o, i, d, n, r, s, C]), D(() => {
-    var j;
-    if (!M.current || !t) return;
-    (j = R.current) == null || j.close(), R.current = A({
-      el: M.current,
+  }, [o, r, s, n, i, d, R]), D(() => {
+    var c;
+    if (!S.current || !t) return;
+    (c = $.current) == null || c.close(), $.current = H({
+      el: S.current,
       url: o,
-      ...i ? { apiUrl: i } : {},
-      profileId: t.profileId ?? d,
+      ...r ? { apiUrl: r } : {},
+      profileId: t.profileId ?? s,
       // rows always carry theirs; compose sets one explicitly
       // DM rows open as direct conversations (kind + peer). Opening them via
       // their dm:… subjectId only works for the participant that OWNS the
       // thread key — the other side would silently fork a duplicate.
       ...t.kind === "direct" && t.peerId ? { kind: "direct", peerId: t.peerId } : t.subjectId ? { subjectId: t.subjectId } : {},
-      ...r ? { token: r } : {},
+      ...i ? { token: i } : {},
       ...l ? { refreshToken: l } : {},
-      ...s ? { userId: s } : {},
-      ...s || h || v ? {
+      ...d ? { userId: d } : {},
+      ...d || u || v ? {
         user: {
-          ...h ? { name: h } : {},
+          ...u ? { name: u } : {},
           ...v ? { email: v } : {}
         }
       } : {},
@@ -291,26 +296,26 @@ function F({
       // Stack navigation: the chatroom's back chevron returns to the list.
       onBack: () => f(null)
     });
-    const p = setInterval(() => {
-      var c;
-      return (c = w.current) == null ? void 0 : c.refresh();
+    const w = setInterval(() => {
+      var x;
+      return (x = a.current) == null ? void 0 : x.refresh();
     }, 2e4);
     return () => {
-      var c, g;
-      clearInterval(p), (c = R.current) == null || c.close(), R.current = null, (g = w.current) == null || g.refresh();
+      var x, g;
+      clearInterval(w), (x = $.current) == null || x.close(), $.current = null, (g = a.current) == null || g.refresh();
     };
-  }, [t == null ? void 0 : t.id]), x ? /* @__PURE__ */ k("div", { style: { padding: 16, font: "13px system-ui", color: "#b91c1c", background: "#fef2f2", borderRadius: 8 }, children: [
+  }, [t == null ? void 0 : t.id]), b ? /* @__PURE__ */ _("div", { style: { padding: 16, font: "13px system-ui", color: "#b91c1c", background: "#fef2f2", borderRadius: 8 }, children: [
     "[relay] <ChatApp/> needs a ",
     /* @__PURE__ */ e("code", { children: "profileId" }),
     " or a ",
     /* @__PURE__ */ e("code", { children: "tenantId" }),
     "."
-  ] }) : /* @__PURE__ */ k("div", { style: { position: "relative", width: "100%", height: u, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
-    L && !t && /* @__PURE__ */ e(
+  ] }) : /* @__PURE__ */ _("div", { style: { position: "relative", width: "100%", height: p, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
+    C && !t && /* @__PURE__ */ e(
       "button",
       {
-        onClick: L,
-        "aria-label": (b == null ? void 0 : b.close) ?? "Close",
+        onClick: C,
+        "aria-label": (h == null ? void 0 : h.close) ?? "Close",
         style: {
           position: "absolute",
           top: 8,
@@ -337,47 +342,47 @@ function F({
       inset: 0,
       display: t ? "none" : "flex",
       flexDirection: "column"
-    }, children: /* @__PURE__ */ e("div", { ref: a, style: { width: "100%", height: "100%" } }) }),
-    t && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ e("div", { ref: M, style: { width: "100%", height: "100%" } }) })
+    }, children: j ? /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", padding: 16, font: "13px system-ui", color: "#b91c1c", textAlign: "center" }, children: (h == null ? void 0 : h.error) ?? "Could not load conversations." }) : /* @__PURE__ */ e("div", { ref: L, style: { width: "100%", height: "100%" } }) }),
+    t && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ e("div", { ref: S, style: { width: "100%", height: "100%" } }) })
   ] });
 }
-function Z({
+function X({
   url: o,
-  apiUrl: i,
-  profileId: d,
+  apiUrl: r,
+  profileId: s,
   tenantId: n,
-  token: r,
+  token: i,
   refreshToken: l,
-  userId: s,
-  userName: h,
+  userId: d,
+  userName: u,
   userEmail: v,
   scope: m,
-  accent: u = "#4F63F5",
-  floating: b = !0,
-  position: L = "bottom-right",
-  label: C,
-  panelWidth: x,
+  accent: p = "#4F63F5",
+  floating: h = !0,
+  position: C = "bottom-right",
+  label: R,
+  panelWidth: b,
   panelHeight: t = "600px"
 }) {
-  const [f, a] = _(!1), M = z(null), w = L === "bottom-right", R = C ?? (b ? void 0 : "Messages"), p = K(479);
+  const [f, j] = k(!1), M = B(null), L = C === "bottom-right", S = R ?? (h ? void 0 : "Messages"), a = K(479);
   if (D(() => {
-    const y = (H) => {
-      H.key === "Escape" && a(!1);
+    const y = (F) => {
+      F.key === "Escape" && j(!1);
     };
     return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
-  }, []), b)
-    return /* @__PURE__ */ k("div", { style: {
+  }, []), h)
+    return /* @__PURE__ */ _("div", { style: {
       position: "fixed",
-      [w ? "right" : "left"]: "20px",
+      [L ? "right" : "left"]: "20px",
       bottom: "20px",
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      alignItems: w ? "flex-end" : "flex-start",
+      alignItems: L ? "flex-end" : "flex-start",
       gap: "12px"
     }, children: [
       /* @__PURE__ */ e("div", { style: {
-        ...p ? {
+        ...a ? {
           position: "fixed",
           inset: 0,
           width: "100%",
@@ -385,47 +390,47 @@ function Z({
           borderRadius: "0",
           zIndex: 9998
         } : {
-          width: `min(${x ?? "420px"}, calc(100vw - 40px))`,
+          width: `min(${b ?? "420px"}, calc(100vw - 40px))`,
           height: `min(${t}, calc(100dvh - 108px))`,
           borderRadius: "16px"
         },
         overflow: "hidden",
-        boxShadow: p ? "none" : "0 8px 40px rgba(0,0,0,.18)",
+        boxShadow: a ? "none" : "0 8px 40px rgba(0,0,0,.18)",
         background: "#fff",
         display: f ? "flex" : "none",
         flexDirection: "column",
-        transformOrigin: `bottom ${w ? "right" : "left"}`,
+        transformOrigin: `bottom ${L ? "right" : "left"}`,
         animation: f ? "ocl-pop-in .18s ease" : "none"
       }, children: /* @__PURE__ */ e(
-        F,
+        A,
         {
           url: o,
-          ...i ? { apiUrl: i } : {},
-          ...d ? { profileId: d } : {},
+          ...r ? { apiUrl: r } : {},
+          ...s ? { profileId: s } : {},
           ...n ? { tenantId: n } : {},
-          ...r ? { token: r } : {},
+          ...i ? { token: i } : {},
           ...l ? { refreshToken: l } : {},
-          ...s ? { userId: s } : {},
-          ...h ? { userName: h } : {},
+          ...d ? { userId: d } : {},
+          ...u ? { userName: u } : {},
           ...v ? { userEmail: v } : {},
           ...m ? { scope: m } : {},
-          accent: u,
+          accent: p,
           height: "100%",
-          onClose: () => a(!1)
+          onClose: () => j(!1)
         }
       ) }),
       /* @__PURE__ */ e(
         "button",
         {
           ref: M,
-          onClick: () => a((y) => !y),
-          "aria-label": f ? "Close chat" : typeof R == "string" ? R : "Open chat",
+          onClick: () => j((y) => !y),
+          "aria-label": f ? "Close chat" : typeof S == "string" ? S : "Open chat",
           "aria-expanded": f,
           style: {
             width: "56px",
             height: "56px",
             borderRadius: "50%",
-            background: u,
+            background: p,
             color: "#fff",
             border: "none",
             fontSize: "20px",
@@ -435,7 +440,7 @@ function Z({
             transition: "transform .15s",
             alignItems: "center",
             justifyContent: "center",
-            display: f && p ? "none" : "flex"
+            display: f && a ? "none" : "flex"
           },
           onMouseEnter: (y) => {
             y.currentTarget.style.transform = "scale(1.08)";
@@ -443,29 +448,29 @@ function Z({
           onMouseLeave: (y) => {
             y.currentTarget.style.transform = "scale(1)";
           },
-          children: f ? /* @__PURE__ */ e(Y, {}) : C ?? /* @__PURE__ */ e(G, {})
+          children: f ? /* @__PURE__ */ e(Y, {}) : R ?? /* @__PURE__ */ e(G, {})
         }
       ),
       /* @__PURE__ */ e("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
     ] });
-  const j = `min(${x ?? "420px"}, calc(100vw - 16px))`, [c, g] = _(null), S = () => {
-    !f && M.current && g(M.current.getBoundingClientRect()), a((y) => !y);
-  }, $ = c ? c.bottom + 8 : 0, B = c ? Math.max(8, window.innerWidth - c.right) : 0;
-  return /* @__PURE__ */ k(O, { children: [
-    /* @__PURE__ */ k(
+  const $ = `min(${b ?? "420px"}, calc(100vw - 16px))`, [w, c] = k(null), x = () => {
+    !f && M.current && c(M.current.getBoundingClientRect()), j((y) => !y);
+  }, g = w ? w.bottom + 8 : 0, z = w ? Math.max(8, window.innerWidth - w.right) : 0;
+  return /* @__PURE__ */ _(O, { children: [
+    /* @__PURE__ */ _(
       "button",
       {
         ref: M,
-        onClick: S,
+        onClick: x,
         style: {
           display: "inline-flex",
           alignItems: "center",
           gap: "6px",
           padding: "8px 16px",
           borderRadius: "8px",
-          background: f ? u : "transparent",
-          color: f ? "#fff" : u,
-          border: `2px solid ${u}`,
+          background: f ? p : "transparent",
+          color: f ? "#fff" : p,
+          border: `2px solid ${p}`,
           fontSize: "14px",
           fontWeight: 600,
           cursor: "pointer",
@@ -474,53 +479,53 @@ function Z({
         children: [
           /* @__PURE__ */ e(G, { size: 16 }),
           " ",
-          R
+          S
         ]
       }
     ),
-    f && c && /* @__PURE__ */ k(O, { children: [
+    f && w && /* @__PURE__ */ _(O, { children: [
       /* @__PURE__ */ e(
         "div",
         {
-          onClick: () => a(!1),
+          onClick: () => j(!1),
           style: { position: "fixed", inset: 0, zIndex: 9998 }
         }
       ),
       /* @__PURE__ */ e("div", { style: {
         position: "fixed",
-        ...p ? {
+        ...a ? {
           inset: 0,
           width: "100%",
           height: "100dvh",
           borderRadius: "0"
         } : {
-          top: $,
-          right: B,
-          width: j,
-          height: `min(${t}, calc(100dvh - ${$}px - 12px))`,
+          top: g,
+          right: z,
+          width: $,
+          height: `min(${t}, calc(100dvh - ${g}px - 12px))`,
           borderRadius: "16px"
         },
         overflow: "hidden",
-        boxShadow: p ? "none" : "0 8px 40px rgba(0,0,0,.2)",
+        boxShadow: a ? "none" : "0 8px 40px rgba(0,0,0,.2)",
         background: "#fff",
         zIndex: 9999,
         animation: "ocl-slide-in .18s ease"
       }, children: /* @__PURE__ */ e(
-        F,
+        A,
         {
           url: o,
-          ...i ? { apiUrl: i } : {},
-          ...d ? { profileId: d } : {},
+          ...r ? { apiUrl: r } : {},
+          ...s ? { profileId: s } : {},
           ...n ? { tenantId: n } : {},
-          ...r ? { token: r } : {},
+          ...i ? { token: i } : {},
           ...l ? { refreshToken: l } : {},
-          ...s ? { userId: s } : {},
-          ...h ? { userName: h } : {},
+          ...d ? { userId: d } : {},
+          ...u ? { userName: u } : {},
           ...v ? { userEmail: v } : {},
           ...m ? { scope: m } : {},
-          accent: u,
+          accent: p,
           height: "100%",
-          onClose: () => a(!1)
+          onClose: () => j(!1)
         }
       ) }),
       /* @__PURE__ */ e("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
@@ -528,9 +533,9 @@ function Z({
   ] });
 }
 export {
-  F as ChatApp,
-  Z as ChatAppLauncher,
-  V as ChatWidget,
-  X as MarketplaceChat
+  A as ChatApp,
+  X as ChatAppLauncher,
+  Q as ChatWidget,
+  V as MarketplaceChat
 };
 //# sourceMappingURL=react.js.map