@paramms/chat-widget 1.0.42 → 1.0.44

package/dist/react.js

@@ -19,10 +19,10 @@ function Y({ size: o = 22 }) {
 }
 function Q({
   url: o,
-  apiUrl: i,
+  apiUrl: r,
   profileId: s,
   token: n,
-  refreshToken: r,
+  refreshToken: i,
   userId: l,
   userName: d,
   userEmail: u,
@@ -30,15 +30,15 @@ function Q({
   contextTitle: m,
   contextSubtitle: p,
   contextStatus: h,
-  subjectId: L,
-  accent: C,
+  subjectId: C,
+  accent: R,
   launcher: b,
   position: t,
   launcherMessage: f,
-  quickReplies: R,
-  height: S = "100%",
-  i18n: j,
-  translateLang: M,
+  quickReplies: j,
+  height: M = "100%",
+  i18n: L,
+  translateLang: S,
   inbox: a,
   inboxScope: $
 }) {
@@ -49,11 +49,11 @@ function Q({
       return (z = c.current) == null || z.close(), c.current = H({
         el: w.current,
         url: o,
-        ...i ? { apiUrl: i } : {},
+        ...r ? { apiUrl: r } : {},
         profileId: s,
-        ...L ? { subjectId: L } : {},
+        ...C ? { subjectId: C } : {},
         ...n ? { token: n } : {},
-        ...r ? { refreshToken: r } : {},
+        ...i ? { refreshToken: i } : {},
         ...l ? { userId: l } : {},
         ...l || d || u || v ? {
           user: {
@@ -69,37 +69,37 @@ function Q({
             ...h ? { status: h } : {}
           }
         } : {},
-        ...R ? { quickReplies: R } : {},
-        ...C ? { accent: C } : {},
-        ...M ? { translateLang: M } : {},
-        ...j ? { i18n: j } : {},
+        ...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 = c.current) == null || y.close(), c.current = null;
       };
-  }, [o, i, s, L, n, l, d, u, C, b, t, f, M, a, x]), a && !b && x ? /* @__PURE__ */ e(
+  }, [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 } : {},
+      ...r ? { apiUrl: r } : {},
       profileId: s,
       ...n ? { token: n } : {},
-      ...r ? { refreshToken: r } : {},
+      ...i ? { refreshToken: i } : {},
       ...l ? { userId: l } : {},
       ...d ? { userName: d } : {},
       ...u ? { userEmail: u } : {},
-      ...C ? { accent: C } : {},
+      ...R ? { accent: R } : {},
       scope: $ ?? "tenant",
-      height: S,
+      height: M,
       onClose: () => g(!1)
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
       ref: w,
-      style: b ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: S, minHeight: S === "100%" ? "480px" : void 0 }
+      style: b ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: M, minHeight: M === "100%" ? "480px" : void 0 }
     }
   );
 }
@@ -110,10 +110,10 @@ const q = [
 ];
 function V({
   url: o,
-  apiUrl: i,
+  apiUrl: r,
   profileId: s,
   token: n,
-  refreshToken: r,
+  refreshToken: i,
   listingId: l,
   listingTitle: d,
   listingMeta: u,
@@ -121,15 +121,15 @@ function V({
   listingStatus: m,
   userId: p,
   userName: h,
-  userEmail: L,
-  userAvatar: C,
+  userEmail: C,
+  userAvatar: R,
   accent: b,
   launcher: t,
   position: f,
-  launcherMessage: R,
-  quickReplies: S,
-  height: j = "100%",
-  i18n: M,
+  launcherMessage: j,
+  quickReplies: M,
+  height: L = "100%",
+  i18n: S,
   translateLang: a,
   inbox: $,
   inboxScope: w
@@ -143,17 +143,17 @@ function V({
       y || !c.current || ((W = x.current) == null || W.close(), x.current = H({
         el: c.current,
         url: o,
-        ...i ? { apiUrl: i } : {},
+        ...r ? { apiUrl: r } : {},
         profileId: s,
         ...l ? { subjectId: `listing_${l}` } : {},
         ...n ? { token: n } : {},
-        ...r ? { refreshToken: r } : {},
+        ...i ? { refreshToken: i } : {},
         ...p ? { userId: p } : {},
-        ...p || h || L || C ? {
+        ...p || h || C || R ? {
           user: {
             ...h ? { name: h } : {},
-            ...L ? { email: L } : {},
-            ...C ? { avatar: C } : {},
+            ...C ? { email: C } : {},
+            ...R ? { avatar: R } : {},
             ...l ? { meta: { listingId: l } } : {}
           }
         } : {},
@@ -165,58 +165,58 @@ function V({
             ...m ? { status: m } : {}
           }
         } : {},
-        quickReplies: S ?? q,
+        quickReplies: M ?? q,
         ...b ? { accent: b } : {},
         ...a ? { translateLang: a } : {},
-        ...M ? { i18n: M } : {},
+        ...S ? { i18n: S } : {},
         ...$ && !t ? { onBack: () => z(!0) } : {},
-        ...t ? { launcher: t, position: f ?? "bottom-right", ...R ? { launcherMessage: R } : {} } : {}
+        ...t ? { launcher: t, position: f ?? "bottom-right", ...j ? { launcherMessage: j } : {} } : {}
       }));
     }, 0);
     return () => {
       var W;
       y = !0, clearTimeout(F), (W = x.current) == null || W.close(), x.current = null;
     };
-  }, [o, i, s, l, n, p, b, t, f, R, a, $, g]), $ && !t && g ? /* @__PURE__ */ e(
+  }, [o, r, s, l, n, p, b, t, f, j, a, $, g]), $ && !t && g ? /* @__PURE__ */ e(
     A,
     {
       url: o,
-      ...i ? { apiUrl: i } : {},
+      ...r ? { apiUrl: r } : {},
       profileId: s,
       ...n ? { token: n } : {},
-      ...r ? { refreshToken: r } : {},
+      ...i ? { refreshToken: i } : {},
       ...p ? { userId: p } : {},
       ...h ? { userName: h } : {},
-      ...L ? { userEmail: L } : {},
+      ...C ? { userEmail: C } : {},
       ...b ? { accent: b } : {},
       scope: w ?? "tenant",
-      height: j,
+      height: L,
       onClose: () => z(!1)
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
       ref: c,
-      style: t ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: j, minHeight: j === "100%" ? "480px" : void 0 }
+      style: t ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: L, minHeight: L === "100%" ? "480px" : void 0 }
     }
   );
 }
 function K(o) {
-  const [i, s] = k(
+  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) => s(l.matches);
-    return s(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 A({
   url: o,
-  apiUrl: i,
+  apiUrl: r,
   profileId: s,
   tenantId: n,
-  token: r,
+  token: i,
   refreshToken: l,
   userId: d,
   userName: u,
@@ -224,23 +224,26 @@ function A({
   accent: m,
   height: p = "100%",
   i18n: h,
-  onClose: L,
-  scope: C = "tenant"
+  onClose: C,
+  scope: R = "tenant"
 }) {
-  const b = !s && !n, [t, f] = k(null), [R, S] = k(!1), j = B(null), M = B(null), a = B(null), $ = B(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 (!j.current) return;
+    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 || S(!0), null)).then((c) => {
+    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 || !j.current || (a.current = x({
-        el: j.current,
+      w || !L.current || (a.current = x({
+        el: L.current,
         url: o,
-        ...i ? { apiUrl: i } : {},
+        ...r ? { apiUrl: r } : {},
         ...s ? { profileId: s } : {},
         ...n ? { tenantId: n } : {},
-        scope: 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
@@ -252,7 +255,7 @@ function A({
           const g = (z = a.current) == null ? void 0 : z.defaultProfileId();
           g && f({ id: "__new__", profileId: g, state: "open", updatedAt: Date.now() });
         },
-        ...r ? { token: r } : {},
+        ...i ? { token: i } : {},
         ...d ? { userId: d } : {},
         ...m ? { accent: m } : {},
         ...h ? { i18n: h } : {}
@@ -261,20 +264,20 @@ function A({
       var c;
       w = !0, (c = a.current) == null || c.close(), a.current = null;
     };
-  }, [o, i, s, n, r, d, C]), D(() => {
+  }, [o, r, s, n, i, d, R]), D(() => {
     var c;
-    if (!M.current || !t) return;
+    if (!S.current || !t) return;
     (c = $.current) == null || c.close(), $.current = H({
-      el: M.current,
+      el: S.current,
       url: o,
-      ...i ? { apiUrl: i } : {},
+      ...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 } : {},
       ...d ? { userId: d } : {},
       ...d || u || v ? {
@@ -308,10 +311,10 @@ function A({
     /* @__PURE__ */ e("code", { children: "tenantId" }),
     "."
   ] }) : /* @__PURE__ */ _("div", { style: { position: "relative", width: "100%", height: p, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
-    L && !t && /* @__PURE__ */ e(
+    C && !t && /* @__PURE__ */ e(
       "button",
       {
-        onClick: L,
+        onClick: C,
         "aria-label": (h == null ? void 0 : h.close) ?? "Close",
         style: {
           position: "absolute",
@@ -339,16 +342,16 @@ function A({
       inset: 0,
       display: t ? "none" : "flex",
       flexDirection: "column"
-    }, children: R ? /* @__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: j, 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 X({
   url: o,
-  apiUrl: i,
+  apiUrl: r,
   profileId: s,
   tenantId: n,
-  token: r,
+  token: i,
   refreshToken: l,
   userId: d,
   userName: u,
@@ -356,26 +359,26 @@ function X({
   scope: m,
   accent: p = "#4F63F5",
   floating: h = !0,
-  position: L = "bottom-right",
-  label: C,
+  position: C = "bottom-right",
+  label: R,
   panelWidth: b,
   panelHeight: t = "600px"
 }) {
-  const [f, R] = k(!1), S = B(null), j = L === "bottom-right", M = C ?? (h ? void 0 : "Messages"), a = 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 = (F) => {
-      F.key === "Escape" && R(!1);
+      F.key === "Escape" && j(!1);
     };
     return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
   }, []), h)
     return /* @__PURE__ */ _("div", { style: {
       position: "fixed",
-      [j ? "right" : "left"]: "20px",
+      [L ? "right" : "left"]: "20px",
       bottom: "20px",
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      alignItems: j ? "flex-end" : "flex-start",
+      alignItems: L ? "flex-end" : "flex-start",
       gap: "12px"
     }, children: [
       /* @__PURE__ */ e("div", { style: {
@@ -396,16 +399,16 @@ function X({
         background: "#fff",
         display: f ? "flex" : "none",
         flexDirection: "column",
-        transformOrigin: `bottom ${j ? "right" : "left"}`,
+        transformOrigin: `bottom ${L ? "right" : "left"}`,
         animation: f ? "ocl-pop-in .18s ease" : "none"
       }, children: /* @__PURE__ */ e(
         A,
         {
           url: o,
-          ...i ? { apiUrl: i } : {},
+          ...r ? { apiUrl: r } : {},
           ...s ? { profileId: s } : {},
           ...n ? { tenantId: n } : {},
-          ...r ? { token: r } : {},
+          ...i ? { token: i } : {},
           ...l ? { refreshToken: l } : {},
           ...d ? { userId: d } : {},
           ...u ? { userName: u } : {},
@@ -413,15 +416,15 @@ function X({
           ...m ? { scope: m } : {},
           accent: p,
           height: "100%",
-          onClose: () => R(!1)
+          onClose: () => j(!1)
         }
       ) }),
       /* @__PURE__ */ e(
         "button",
         {
-          ref: S,
-          onClick: () => R((y) => !y),
-          "aria-label": f ? "Close chat" : typeof M == "string" ? M : "Open chat",
+          ref: M,
+          onClick: () => j((y) => !y),
+          "aria-label": f ? "Close chat" : typeof S == "string" ? S : "Open chat",
           "aria-expanded": f,
           style: {
             width: "56px",
@@ -445,19 +448,19 @@ function X({
           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 $ = `min(${b ?? "420px"}, calc(100vw - 16px))`, [w, c] = k(null), x = () => {
-    !f && S.current && c(S.current.getBoundingClientRect()), R((y) => !y);
+    !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: S,
+        ref: M,
         onClick: x,
         style: {
           display: "inline-flex",
@@ -476,7 +479,7 @@ function X({
         children: [
           /* @__PURE__ */ e(G, { size: 16 }),
           " ",
-          M
+          S
         ]
       }
     ),
@@ -484,7 +487,7 @@ function X({
       /* @__PURE__ */ e(
         "div",
         {
-          onClick: () => R(!1),
+          onClick: () => j(!1),
           style: { position: "fixed", inset: 0, zIndex: 9998 }
         }
       ),
@@ -511,10 +514,10 @@ function X({
         A,
         {
           url: o,
-          ...i ? { apiUrl: i } : {},
+          ...r ? { apiUrl: r } : {},
           ...s ? { profileId: s } : {},
           ...n ? { tenantId: n } : {},
-          ...r ? { token: r } : {},
+          ...i ? { token: i } : {},
           ...l ? { refreshToken: l } : {},
           ...d ? { userId: d } : {},
           ...u ? { userName: u } : {},
@@ -522,7 +525,7 @@ function X({
           ...m ? { scope: m } : {},
           accent: p,
           height: "100%",
-          onClose: () => R(!1)
+          onClose: () => j(!1)
         }
       ) }),
       /* @__PURE__ */ e("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })