@paramms/chat-widget 1.0.30 → 1.0.32

package/dist/react.js

@@ -1,289 +1,319 @@
-import { jsxs as S, jsx as p, Fragment as $ } from "react/jsx-runtime";
-import { useState as D, useRef as k, useEffect as z } from "react";
-import { mount as T } from "./index.js";
-function A({
-  url: x,
+import { jsxs as M, jsx as p, Fragment as B } from "react/jsx-runtime";
+import { useState as F, useRef as j, useEffect as _ } from "react";
+import { mount as H } from "./index.js";
+function E({
+  url: w,
   apiUrl: i,
-  profileId: b,
-  userId: t,
-  userName: l,
-  userEmail: c,
-  userAvatar: o,
-  contextTitle: w,
-  contextSubtitle: y,
-  contextStatus: e,
-  subjectId: a,
-  accent: d,
-  launcher: n,
-  position: s,
-  quickReplies: f,
-  height: h = "100%",
-  i18n: g,
-  translateLang: r
+  profileId: v,
+  token: r,
+  refreshToken: g,
+  userId: e,
+  userName: c,
+  userEmail: d,
+  userAvatar: s,
+  contextTitle: x,
+  contextSubtitle: m,
+  contextStatus: C,
+  subjectId: t,
+  accent: b,
+  launcher: f,
+  position: n,
+  quickReplies: h,
+  height: y = "100%",
+  i18n: u,
+  translateLang: R
 }) {
-  const m = k(null), u = k(null);
-  return z(() => {
-    var v;
-    if (m.current)
-      return (v = u.current) == null || v.close(), u.current = T({
-        el: m.current,
-        url: x,
+  const l = j(null), o = j(null);
+  return _(() => {
+    var a;
+    if (l.current)
+      return (a = o.current) == null || a.close(), o.current = H({
+        el: l.current,
+        url: w,
         ...i ? { apiUrl: i } : {},
-        profileId: b,
-        ...a ? { subjectId: a } : {},
-        ...t ? { userId: t } : {},
-        ...t || l || c || o ? {
+        profileId: v,
+        ...t ? { subjectId: t } : {},
+        ...r ? { token: r } : {},
+        ...g ? { refreshToken: g } : {},
+        ...e ? { userId: e } : {},
+        ...e || c || d || s ? {
           user: {
-            ...l ? { name: l } : {},
-            ...c ? { email: c } : {},
-            ...o ? { avatar: o } : {}
+            ...c ? { name: c } : {},
+            ...d ? { email: d } : {},
+            ...s ? { avatar: s } : {}
           }
         } : {},
-        ...w ? {
+        ...x ? {
           subject: {
-            title: w,
-            ...y ? { subtitle: y } : {},
-            ...e ? { status: e } : {}
+            title: x,
+            ...m ? { subtitle: m } : {},
+            ...C ? { status: C } : {}
           }
         } : {},
-        ...f ? { quickReplies: f } : {},
-        ...d ? { accent: d } : {},
-        ...r ? { translateLang: r } : {},
-        ...g ? { i18n: g } : {},
-        ...n ? { launcher: n, position: s ?? "bottom-right" } : {}
+        ...h ? { quickReplies: h } : {},
+        ...b ? { accent: b } : {},
+        ...R ? { translateLang: R } : {},
+        ...u ? { i18n: u } : {},
+        ...f ? { launcher: f, position: n ?? "bottom-right" } : {}
       }), () => {
-        var C;
-        (C = u.current) == null || C.close(), u.current = null;
+        var W;
+        (W = o.current) == null || W.close(), o.current = null;
       };
-  }, [x, i, b, a, t, l, c, d, n, s, r]), /* @__PURE__ */ p(
+  }, [w, i, v, t, r, e, c, d, b, f, n, R]), /* @__PURE__ */ p(
     "div",
     {
-      ref: m,
-      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: h, minHeight: h === "100%" ? "480px" : void 0 }
+      ref: l,
+      style: f ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: y, minHeight: y === "100%" ? "480px" : void 0 }
     }
   );
 }
-const B = [
+const k = [
   "Is this still available?",
   "Can I schedule a viewing?",
   "What is your best price?"
 ];
-function K({
-  url: x,
+function G({
+  url: w,
   apiUrl: i,
-  profileId: b,
-  listingId: t,
-  listingTitle: l,
-  listingMeta: c,
-  listingPrice: o,
-  listingStatus: w,
-  userId: y,
-  userName: e,
-  userEmail: a,
-  userAvatar: d,
-  accent: n,
-  launcher: s,
-  position: f,
-  quickReplies: h,
-  height: g = "100%",
-  i18n: r,
-  translateLang: m
+  profileId: v,
+  token: r,
+  refreshToken: g,
+  listingId: e,
+  listingTitle: c,
+  listingMeta: d,
+  listingPrice: s,
+  listingStatus: x,
+  userId: m,
+  userName: C,
+  userEmail: t,
+  userAvatar: b,
+  accent: f,
+  launcher: n,
+  position: h,
+  quickReplies: y,
+  height: u = "100%",
+  i18n: R,
+  translateLang: l
 }) {
-  const u = k(null), v = k(null);
-  return z(() => {
-    if (!u.current) return;
-    let C = !1;
-    const M = setTimeout(() => {
-      var j;
-      C || !u.current || ((j = v.current) == null || j.close(), v.current = T({
-        el: u.current,
-        url: x,
+  const o = j(null), a = j(null);
+  return _(() => {
+    if (!o.current) return;
+    let W = !1;
+    const D = setTimeout(() => {
+      var z;
+      W || !o.current || ((z = a.current) == null || z.close(), a.current = H({
+        el: o.current,
+        url: w,
         ...i ? { apiUrl: i } : {},
-        profileId: b,
-        ...t ? { subjectId: `listing_${t}` } : {},
-        ...y ? { userId: y } : {},
-        ...y || e || a || d ? {
+        profileId: v,
+        ...e ? { subjectId: `listing_${e}` } : {},
+        ...r ? { token: r } : {},
+        ...g ? { refreshToken: g } : {},
+        ...m ? { userId: m } : {},
+        ...m || C || t || b ? {
           user: {
-            ...e ? { name: e } : {},
-            ...a ? { email: a } : {},
-            ...d ? { avatar: d } : {},
-            ...t ? { meta: { listingId: t } } : {}
+            ...C ? { name: C } : {},
+            ...t ? { email: t } : {},
+            ...b ? { avatar: b } : {},
+            ...e ? { meta: { listingId: e } } : {}
           }
         } : {},
-        ...l ? {
+        ...c ? {
           subject: {
-            title: l,
-            ...c ? { subtitle: c } : {},
-            ...o ? { tags: [`$${o.toLocaleString()}`] } : {},
-            ...w ? { status: w } : {}
+            title: c,
+            ...d ? { subtitle: d } : {},
+            ...s ? { tags: [`$${s.toLocaleString()}`] } : {},
+            ...x ? { status: x } : {}
           }
         } : {},
-        quickReplies: h ?? B,
-        ...n ? { accent: n } : {},
-        ...m ? { translateLang: m } : {},
-        ...r ? { i18n: r } : {},
-        ...s ? { launcher: s, position: f ?? "bottom-right" } : {}
+        quickReplies: y ?? k,
+        ...f ? { accent: f } : {},
+        ...l ? { translateLang: l } : {},
+        ...R ? { i18n: R } : {},
+        ...n ? { launcher: n, position: h ?? "bottom-right" } : {}
       }));
     }, 0);
     return () => {
-      var j;
-      C = !0, clearTimeout(M), (j = v.current) == null || j.close(), v.current = null;
+      var z;
+      W = !0, clearTimeout(D), (z = a.current) == null || z.close(), a.current = null;
     };
-  }, [x, i, b, t, y, n, s, f, m]), /* @__PURE__ */ p(
+  }, [w, i, v, e, r, m, f, n, h, l]), /* @__PURE__ */ p(
     "div",
     {
-      ref: u,
-      style: s ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: g, minHeight: g === "100%" ? "480px" : void 0 }
+      ref: o,
+      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: u, minHeight: u === "100%" ? "480px" : void 0 }
     }
   );
 }
-function F({
-  url: x,
+function A({
+  url: w,
   apiUrl: i,
-  profileId: b,
-  userId: t,
-  userName: l,
-  userEmail: c,
-  accent: o,
-  height: w = "100%",
-  i18n: y
+  profileId: v,
+  token: r,
+  refreshToken: g,
+  userId: e,
+  userName: c,
+  userEmail: d,
+  accent: s,
+  height: x = "100%",
+  i18n: m,
+  scope: C = "tenant"
 }) {
-  const [e, a] = D(null), d = k(null), n = k(null), s = k(null), f = k(null);
-  z(() => {
-    if (!d.current) return;
-    let g = !1;
-    return import("./chatlist.js").then(({ mountChatList: r }) => {
-      g || !d.current || (s.current = r({
-        el: d.current,
-        url: x,
+  const [t, b] = F(null), f = j(null), n = j(null), h = j(null), y = j(null);
+  _(() => {
+    if (!f.current) return;
+    let R = !1;
+    return import("./chatlist.js").then(({ mountChatList: l }) => {
+      R || !f.current || (h.current = l({
+        el: f.current,
+        url: w,
         ...i ? { apiUrl: i } : {},
-        profileId: b,
-        onSelect: (m) => a(m),
-        ...t ? { userId: t } : {},
-        ...o ? { accent: o } : {},
-        ...y ? { i18n: y } : {}
+        profileId: v,
+        scope: C,
+        onSelect: (o) => b(o),
+        // 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.
+        onNewChat: () => b({ id: "__new__", state: "open", updatedAt: Date.now() }),
+        ...r ? { token: r } : {},
+        ...e ? { userId: e } : {},
+        ...s ? { accent: s } : {},
+        ...m ? { i18n: m } : {}
       }));
     }), () => {
-      var r;
-      g = !0, (r = s.current) == null || r.close(), s.current = null;
+      var l;
+      R = !0, (l = h.current) == null || l.close(), h.current = null;
     };
-  }, [x, b, t]), z(() => {
-    var g;
-    if (!(!n.current || !e))
-      return (g = f.current) == null || g.close(), f.current = T({
-        el: n.current,
-        url: x,
-        ...i ? { apiUrl: i } : {},
-        profileId: b,
-        ...e.subjectId ? { subjectId: e.subjectId } : {},
-        ...t ? { token: t } : {},
-        ...t || l || c ? {
-          user: {
-            ...l ? { name: l } : {},
-            ...c ? { email: c } : {}
-          }
-        } : {},
-        ...e.subjectTitle ? {
-          subject: {
-            title: e.subjectTitle,
-            ...e.subjectMeta ? { subtitle: e.subjectMeta } : {}
-          }
-        } : {},
-        ...o ? { accent: o } : {}
-      }), () => {
-        var r;
-        (r = f.current) == null || r.close(), f.current = null;
-      };
-  }, [e == null ? void 0 : e.id]);
-  const h = typeof window < "u" && window.innerWidth < 768;
-  return /* @__PURE__ */ S("div", { style: { display: "flex", width: "100%", height: w, minHeight: "400px", overflow: "hidden" }, children: [
+  }, [w, i, v, r, e, C]), _(() => {
+    var l;
+    if (!n.current || !t) return;
+    (l = y.current) == null || l.close(), y.current = H({
+      el: n.current,
+      url: w,
+      ...i ? { apiUrl: i } : {},
+      profileId: t.profileId ?? v,
+      ...t.subjectId ? { subjectId: t.subjectId } : {},
+      ...r ? { token: r } : {},
+      ...g ? { refreshToken: g } : {},
+      ...e ? { userId: e } : {},
+      ...e || c || d ? {
+        user: {
+          ...c ? { name: c } : {},
+          ...d ? { email: d } : {}
+        }
+      } : {},
+      ...t.subjectTitle ? {
+        subject: {
+          title: t.subjectTitle,
+          ...t.subjectMeta ? { subtitle: t.subjectMeta } : {}
+        }
+      } : {},
+      ...s ? { accent: s } : {}
+    });
+    const R = setInterval(() => {
+      var o;
+      return (o = h.current) == null ? void 0 : o.refresh();
+    }, 2e4);
+    return () => {
+      var o, a;
+      clearInterval(R), (o = y.current) == null || o.close(), y.current = null, (a = h.current) == null || a.refresh();
+    };
+  }, [t == null ? void 0 : t.id]);
+  const u = typeof window < "u" && window.innerWidth < 768;
+  return /* @__PURE__ */ M("div", { style: { display: "flex", width: "100%", height: x, minHeight: "400px", overflow: "hidden" }, children: [
     /* @__PURE__ */ p("div", { style: {
-      width: h ? "100%" : "360px",
-      flex: h && e ? "none" : void 0,
-      display: h && e ? "none" : "flex",
+      width: u ? "100%" : "360px",
+      flex: u && t ? "none" : void 0,
+      display: u && t ? "none" : "flex",
       flexDirection: "column",
-      borderRight: h ? "none" : "1px solid #e8eaed",
+      borderRight: u ? "none" : "1px solid #e8eaed",
       minWidth: 0
-    }, children: /* @__PURE__ */ p("div", { ref: d, style: { width: "100%", height: "100%" } }) }),
-    e ? /* @__PURE__ */ S("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
-      h && /* @__PURE__ */ p(
+    }, children: /* @__PURE__ */ p("div", { ref: f, style: { width: "100%", height: "100%" } }) }),
+    t ? /* @__PURE__ */ M("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
+      u && /* @__PURE__ */ p(
         "button",
         {
-          onClick: () => a(null),
+          onClick: () => b(null),
           style: { position: "absolute", top: 12, left: 12, zIndex: 10, background: "none", border: "none", fontSize: 22, cursor: "pointer", color: "#1c1b1a" },
           children: "←"
         }
       ),
       /* @__PURE__ */ p("div", { ref: n, style: { width: "100%", height: "100%" } })
-    ] }) : /* @__PURE__ */ p("div", { style: { flex: 1, display: h ? "none" : "flex", alignItems: "center", justifyContent: "center", color: "#9b9690", fontSize: 14 }, children: "Select a conversation" })
+    ] }) : /* @__PURE__ */ p("div", { style: { flex: 1, display: u ? "none" : "flex", alignItems: "center", justifyContent: "center", color: "#9b9690", fontSize: 14 }, children: "Select a conversation" })
   ] });
 }
-function P({
-  url: x,
+function J({
+  url: w,
   apiUrl: i,
-  profileId: b,
-  userId: t,
-  userName: l,
-  userEmail: c,
-  accent: o = "#4F63F5",
-  floating: w = !0,
-  position: y = "bottom-right",
-  label: e,
-  panelWidth: a,
-  panelHeight: d = "600px"
+  profileId: v,
+  token: r,
+  refreshToken: g,
+  userId: e,
+  userName: c,
+  userEmail: d,
+  scope: s,
+  accent: x = "#4F63F5",
+  floating: m = !0,
+  position: C = "bottom-right",
+  label: t,
+  panelWidth: b,
+  panelHeight: f = "600px"
 }) {
-  const [n, s] = D(!1), f = k(null), h = y === "bottom-right", r = e ?? (w ? "💬" : "Messages");
-  if (z(() => {
-    const R = (L) => {
-      L.key === "Escape" && s(!1);
+  const [n, h] = F(!1), y = j(null), u = C === "bottom-right", l = t ?? (m ? "💬" : "Messages");
+  if (_(() => {
+    const S = ($) => {
+      $.key === "Escape" && h(!1);
     };
-    return document.addEventListener("keydown", R), () => document.removeEventListener("keydown", R);
-  }, []), w) {
-    const R = typeof window < "u" && window.innerWidth < 480, L = R ? "100vw" : a ?? "420px", H = R ? "100dvh" : d;
-    return /* @__PURE__ */ S("div", { style: {
+    return document.addEventListener("keydown", S), () => document.removeEventListener("keydown", S);
+  }, []), m) {
+    const S = typeof window < "u" && window.innerWidth < 480, $ = S ? "100vw" : b ?? "420px", Y = S ? "100dvh" : f;
+    return /* @__PURE__ */ M("div", { style: {
       position: "fixed",
-      [h ? "right" : "left"]: "20px",
+      [u ? "right" : "left"]: "20px",
       bottom: "20px",
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      alignItems: h ? "flex-end" : "flex-start",
+      alignItems: u ? "flex-end" : "flex-start",
       gap: "12px"
     }, children: [
       /* @__PURE__ */ p("div", { style: {
-        width: L,
-        height: H,
-        borderRadius: R ? "0" : "16px",
+        width: $,
+        height: Y,
+        borderRadius: S ? "0" : "16px",
         overflow: "hidden",
         boxShadow: "0 8px 40px rgba(0,0,0,.18)",
         background: "#fff",
         display: n ? "flex" : "none",
         flexDirection: "column",
-        transformOrigin: `bottom ${h ? "right" : "left"}`,
+        transformOrigin: `bottom ${u ? "right" : "left"}`,
         animation: n ? "ocl-pop-in .18s ease" : "none"
       }, children: /* @__PURE__ */ p(
-        F,
+        A,
         {
-          url: x,
+          url: w,
           ...i ? { apiUrl: i } : {},
-          profileId: b,
-          ...t ? { userId: t } : {},
-          ...l ? { userName: l } : {},
-          ...c ? { userEmail: c } : {},
-          accent: o,
+          profileId: v,
+          ...r ? { token: r } : {},
+          ...g ? { refreshToken: g } : {},
+          ...e ? { userId: e } : {},
+          ...c ? { userName: c } : {},
+          ...d ? { userEmail: d } : {},
+          ...s ? { scope: s } : {},
+          accent: x,
           height: "100%"
         }
       ) }),
       /* @__PURE__ */ p(
         "button",
         {
-          ref: f,
-          onClick: () => s((W) => !W),
+          ref: y,
+          onClick: () => h((L) => !L),
           style: {
             width: "56px",
             height: "56px",
             borderRadius: "50%",
-            background: o,
+            background: x,
             color: "#fff",
             border: "none",
             fontSize: "24px",
@@ -292,36 +322,36 @@ function P({
             boxShadow: "0 4px 16px rgba(0,0,0,.25)",
             transition: "transform .15s"
           },
-          onMouseEnter: (W) => {
-            W.target.style.transform = "scale(1.08)";
+          onMouseEnter: (L) => {
+            L.target.style.transform = "scale(1.08)";
           },
-          onMouseLeave: (W) => {
-            W.target.style.transform = "scale(1)";
+          onMouseLeave: (L) => {
+            L.target.style.transform = "scale(1)";
           },
-          children: n ? "✕" : r
+          children: n ? "✕" : l
         }
       ),
       /* @__PURE__ */ p("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
     ] });
   }
-  const m = a ?? "420px", [u, v] = D(null), C = () => {
-    !n && f.current && v(f.current.getBoundingClientRect()), s((R) => !R);
-  }, M = u ? u.bottom + 8 : 0, j = u ? window.innerWidth - u.right : 0;
-  return /* @__PURE__ */ S($, { children: [
-    /* @__PURE__ */ S(
+  const o = b ?? "420px", [a, W] = F(null), D = () => {
+    !n && y.current && W(y.current.getBoundingClientRect()), h((S) => !S);
+  }, z = a ? a.bottom + 8 : 0, O = a ? window.innerWidth - a.right : 0;
+  return /* @__PURE__ */ M(B, { children: [
+    /* @__PURE__ */ M(
       "button",
       {
-        ref: f,
-        onClick: C,
+        ref: y,
+        onClick: D,
         style: {
           display: "inline-flex",
           alignItems: "center",
           gap: "6px",
           padding: "8px 16px",
           borderRadius: "8px",
-          background: n ? o : "transparent",
-          color: n ? "#fff" : o,
-          border: `2px solid ${o}`,
+          background: n ? x : "transparent",
+          color: n ? "#fff" : x,
+          border: `2px solid ${x}`,
           fontSize: "14px",
           fontWeight: 600,
           cursor: "pointer",
@@ -329,24 +359,24 @@ function P({
         },
         children: [
           "💬 ",
-          r
+          l
         ]
       }
     ),
-    n && u && /* @__PURE__ */ S($, { children: [
+    n && a && /* @__PURE__ */ M(B, { children: [
       /* @__PURE__ */ p(
         "div",
         {
-          onClick: () => s(!1),
+          onClick: () => h(!1),
           style: { position: "fixed", inset: 0, zIndex: 9998 }
         }
       ),
       /* @__PURE__ */ p("div", { style: {
         position: "fixed",
-        top: M,
-        right: j,
-        width: m,
-        height: d,
+        top: z,
+        right: O,
+        width: o,
+        height: f,
         borderRadius: "16px",
         overflow: "hidden",
         boxShadow: "0 8px 40px rgba(0,0,0,.2)",
@@ -354,15 +384,18 @@ function P({
         zIndex: 9999,
         animation: "ocl-slide-in .18s ease"
       }, children: /* @__PURE__ */ p(
-        F,
+        A,
         {
-          url: x,
+          url: w,
           ...i ? { apiUrl: i } : {},
-          profileId: b,
-          ...t ? { userId: t } : {},
-          ...l ? { userName: l } : {},
-          ...c ? { userEmail: c } : {},
-          accent: o,
+          profileId: v,
+          ...r ? { token: r } : {},
+          ...g ? { refreshToken: g } : {},
+          ...e ? { userId: e } : {},
+          ...c ? { userName: c } : {},
+          ...d ? { userEmail: d } : {},
+          ...s ? { scope: s } : {},
+          accent: x,
           height: "100%"
         }
       ) }),
@@ -371,9 +404,9 @@ function P({
   ] });
 }
 export {
-  F as ChatApp,
-  P as ChatAppLauncher,
-  A as ChatWidget,
-  K as MarketplaceChat
+  A as ChatApp,
+  J as ChatAppLauncher,
+  E as ChatWidget,
+  G as MarketplaceChat
 };
 //# sourceMappingURL=react.js.map