@paramms/chat-widget 1.0.47 → 1.5.0

package/dist/protocol/entities.d.ts

@@ -14,6 +14,7 @@ export type MessageContent = {
     text: string;
     enc?: boolean;
     iv?: string;
+    quickReplies?: string[];
 } | {
     kind: 'attachment';
     url: string;

package/dist/react.js

@@ -1,6 +1,6 @@
-import { jsxs as W, jsx as n, Fragment as q } from "react/jsx-runtime";
-import { useState as _, useRef as k, useEffect as A } from "react";
-import { mount as Y } from "./index.js";
+import { jsxs as H, jsx as n, Fragment as J } from "react/jsx-runtime";
+import { useState as D, useRef as k, useEffect as W } from "react";
+import { mount as F } from "./index.js";
 function K({ size: r = 26 }) {
   return /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", width: r, height: r, fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ n(
     "path",
@@ -14,54 +14,54 @@ function K({ size: r = 26 }) {
     }
   ) });
 }
-function E({ size: r = 22 }) {
+function Q({ size: r = 22 }) {
   return /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", width: r, height: r, fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) });
 }
 function T({
   url: r,
   apiUrl: i,
-  profileId: c,
+  profileId: d,
   token: o,
   refreshToken: l,
   userId: s,
-  userName: d,
+  userName: c,
   userEmail: p,
   userAvatar: y,
   contextTitle: v,
   contextSubtitle: a,
   contextStatus: j,
-  subjectId: L,
+  subjectId: S,
   accent: f,
   accent2: w,
   theme: m,
   webfont: h,
   launcher: t,
-  position: b,
-  launcherMessage: $,
+  position: x,
+  launcherMessage: M,
   quickReplies: z,
   height: g = "100%",
   i18n: B,
-  features: x,
-  translateLang: S,
+  features: b,
+  translateLang: $,
   inbox: C,
   inboxScope: u
 }) {
-  const R = k(null), e = k(null), [M, D] = _(!1);
-  return A(() => {
-    var H;
-    if (!M && R.current)
-      return (H = e.current) == null || H.close(), e.current = Y({
+  const R = k(null), e = k(null), [L, _] = D(!1);
+  return W(() => {
+    var O;
+    if (!L && R.current)
+      return (O = e.current) == null || O.close(), e.current = F({
         el: R.current,
         url: r,
         ...i ? { apiUrl: i } : {},
-        profileId: c,
-        ...L ? { subjectId: L } : {},
+        profileId: d,
+        ...S ? { subjectId: S } : {},
         ...o ? { token: o } : {},
         ...l ? { refreshToken: l } : {},
         ...s ? { userId: s } : {},
-        ...s || d || p || y ? {
+        ...s || c || p || y ? {
           user: {
-            ...d ? { name: d } : {},
+            ...c ? { name: c } : {},
             ...p ? { email: p } : {},
             ...y ? { avatar: y } : {}
           }
@@ -78,25 +78,25 @@ function T({
         ...w ? { accent2: w } : {},
         ...m ? { theme: m } : {},
         ...h === !1 ? { webfont: !1 } : {},
-        ...S ? { translateLang: S } : {},
+        ...$ ? { translateLang: $ } : {},
         ...B ? { i18n: B } : {},
-        ...x ? { features: x } : {},
-        ...C && !t ? { onBack: () => D(!0) } : {},
-        ...t ? { launcher: t, position: b ?? "bottom-right", ...$ ? { launcherMessage: $ } : {} } : {}
+        ...b ? { features: b } : {},
+        ...C && !t ? { onBack: () => _(!0) } : {},
+        ...t ? { launcher: t, position: x ?? "bottom-right", ...M ? { launcherMessage: M } : {} } : {}
       }), () => {
-        var O;
-        (O = e.current) == null || O.close(), e.current = null;
+        var G;
+        (G = e.current) == null || G.close(), e.current = null;
       };
-  }, [r, i, c, L, o, s, d, p, f, t, b, $, S, C, M]), C && !t && M ? /* @__PURE__ */ n(
-    G,
+  }, [r, i, d, S, o, s, c, p, f, t, x, M, $, C, L]), C && !t && L ? /* @__PURE__ */ n(
+    A,
     {
       url: r,
       ...i ? { apiUrl: i } : {},
-      profileId: c,
+      profileId: d,
       ...o ? { token: o } : {},
       ...l ? { refreshToken: l } : {},
       ...s ? { userId: s } : {},
-      ...d ? { userName: d } : {},
+      ...c ? { userName: c } : {},
       ...p ? { userEmail: p } : {},
       ...f ? { accent: f } : {},
       ...w ? { accent2: w } : {},
@@ -104,7 +104,7 @@ function T({
       ...h === !1 ? { webfont: !1 } : {},
       scope: u ?? "tenant",
       height: g,
-      onClose: () => D(!1)
+      onClose: () => _(!1)
     }
   ) : /* @__PURE__ */ n(
     "div",
@@ -114,155 +114,150 @@ function T({
     }
   );
 }
-const P = [
-  "Is this still available?",
-  "Can I schedule a viewing?",
-  "What is your best price?"
-];
-function I({
+function E({
   url: r,
   apiUrl: i,
-  profileId: c,
+  profileId: d,
   token: o,
   refreshToken: l,
   listingId: s,
-  listingTitle: d,
+  listingTitle: c,
   listingMeta: p,
   listingPrice: y,
   listingStatus: v,
   userId: a,
   userName: j,
-  userEmail: L,
+  userEmail: S,
   userAvatar: f,
   accent: w,
   accent2: m,
   theme: h,
   webfont: t,
-  launcher: b,
-  position: $,
+  launcher: x,
+  position: M,
   launcherMessage: z,
   quickReplies: g,
   height: B = "100%",
-  i18n: x,
-  features: S,
+  i18n: b,
+  features: $,
   translateLang: C,
   inbox: u,
   inboxScope: R
 }) {
-  const e = k(null), M = k(null), [D, H] = _(!1);
-  return A(() => {
-    if (D || !e.current) return;
-    let O = !1;
-    const J = setTimeout(() => {
-      var F;
-      O || !e.current || ((F = M.current) == null || F.close(), M.current = Y({
+  const e = k(null), L = k(null), [_, O] = D(!1);
+  return W(() => {
+    if (_ || !e.current) return;
+    let G = !1;
+    const V = setTimeout(() => {
+      var Y;
+      G || !e.current || ((Y = L.current) == null || Y.close(), L.current = F({
         el: e.current,
         url: r,
         ...i ? { apiUrl: i } : {},
-        profileId: c,
+        profileId: d,
         ...s ? { subjectId: `listing_${s}` } : {},
         ...o ? { token: o } : {},
         ...l ? { refreshToken: l } : {},
         ...a ? { userId: a } : {},
-        ...a || j || L || f ? {
+        ...a || j || S || f ? {
           user: {
             ...j ? { name: j } : {},
-            ...L ? { email: L } : {},
+            ...S ? { email: S } : {},
             ...f ? { avatar: f } : {},
             ...s ? { meta: { listingId: s } } : {}
           }
         } : {},
-        ...d ? {
+        ...c ? {
           subject: {
-            title: d,
+            title: c,
             ...p ? { subtitle: p } : {},
             ...y ? { tags: [`$${y.toLocaleString()}`] } : {},
             ...v ? { status: v } : {}
           }
         } : {},
-        quickReplies: g ?? P,
+        ...g ? { quickReplies: g } : {},
         ...w ? { accent: w } : {},
         ...m ? { accent2: m } : {},
         ...h ? { theme: h } : {},
         ...t === !1 ? { webfont: !1 } : {},
         ...C ? { translateLang: C } : {},
-        ...x ? { i18n: x } : {},
-        ...S ? { features: S } : {},
-        ...u && !b ? { onBack: () => H(!0) } : {},
-        ...b ? { launcher: b, position: $ ?? "bottom-right", ...z ? { launcherMessage: z } : {} } : {}
+        ...b ? { i18n: b } : {},
+        ...$ ? { features: $ } : {},
+        ...u && !x ? { onBack: () => O(!0) } : {},
+        ...x ? { launcher: x, position: M ?? "bottom-right", ...z ? { launcherMessage: z } : {} } : {}
       }));
     }, 0);
     return () => {
-      var F;
-      O = !0, clearTimeout(J), (F = M.current) == null || F.close(), M.current = null;
+      var Y;
+      G = !0, clearTimeout(V), (Y = L.current) == null || Y.close(), L.current = null;
     };
-  }, [r, i, c, s, o, a, w, b, $, z, C, u, D]), u && !b && D ? /* @__PURE__ */ n(
-    G,
+  }, [r, i, d, s, o, a, w, x, M, z, C, u, _]), u && !x && _ ? /* @__PURE__ */ n(
+    A,
     {
       url: r,
       ...i ? { apiUrl: i } : {},
-      profileId: c,
+      profileId: d,
       ...o ? { token: o } : {},
       ...l ? { refreshToken: l } : {},
       ...a ? { userId: a } : {},
       ...j ? { userName: j } : {},
-      ...L ? { userEmail: L } : {},
+      ...S ? { userEmail: S } : {},
       ...w ? { accent: w } : {},
       ...m ? { accent2: m } : {},
       ...h ? { theme: h } : {},
       ...t === !1 ? { webfont: !1 } : {},
       scope: R ?? "tenant",
       height: B,
-      onClose: () => H(!1)
+      onClose: () => O(!1)
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
       ref: e,
-      style: b ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: B, minHeight: B === "100%" ? "480px" : void 0 }
+      style: x ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: B, minHeight: B === "100%" ? "480px" : void 0 }
     }
   );
 }
-function Q(r) {
-  const [i, c] = _(
+function X(r) {
+  const [i, d] = D(
     typeof window < "u" && window.innerWidth <= r
   );
-  return A(() => {
+  return W(() => {
     if (typeof window > "u" || !window.matchMedia) return;
-    const o = window.matchMedia(`(max-width: ${r}px)`), l = (s) => c(s.matches);
-    return c(o.matches), o.addEventListener("change", l), () => o.removeEventListener("change", l);
+    const o = window.matchMedia(`(max-width: ${r}px)`), l = (s) => d(s.matches);
+    return d(o.matches), o.addEventListener("change", l), () => o.removeEventListener("change", l);
   }, [r]), i;
 }
-function G({
+function A({
   url: r,
   apiUrl: i,
-  profileId: c,
+  profileId: d,
   tenantId: o,
   token: l,
   refreshToken: s,
-  userId: d,
+  userId: c,
   userName: p,
   userEmail: y,
   accent: v,
   theme: a,
   webfont: j,
-  height: L = "100%",
+  height: S = "100%",
   i18n: f,
   onClose: w,
   scope: m = "tenant"
 }) {
-  const h = !c && !o, [t, b] = _(null), [$, z] = _(!1), g = k(null), B = k(null), x = k(null), S = k(null);
-  return A(() => {
+  const h = !d && !o, [t, x] = D(null), [M, z] = D(!1), g = k(null), B = k(null), b = k(null), $ = k(null);
+  return W(() => {
     if (!g.current) return;
     let C = !1;
     return import("./chatlist.js").catch((u) => (console.error("[relay] could not load the conversation list module.", u), C || z(!0), null)).then((u) => {
       if (!u) return;
       const { mountChatList: R } = u;
-      C || !g.current || (x.current = R({
+      C || !g.current || (b.current = R({
         el: g.current,
         url: r,
         ...i ? { apiUrl: i } : {},
-        ...c ? { profileId: c } : {},
+        ...d ? { profileId: d } : {},
         ...o ? { tenantId: o } : {},
         ...a ? { theme: a } : {},
         ...j === !1 ? { webfont: !1 } : {},
@@ -270,34 +265,34 @@ function G({
         // 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.
         ...w ? { reserveCloseSpace: !0 } : {},
-        onSelect: (e) => b(e),
+        onSelect: (e) => x(e),
         // 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 M;
-          const e = (M = x.current) == null ? void 0 : M.defaultProfileId();
-          e && b({ id: "__new__", profileId: e, state: "open", updatedAt: Date.now() });
+          var L;
+          const e = (L = b.current) == null ? void 0 : L.defaultProfileId();
+          e && x({ id: "__new__", profileId: e, state: "open", updatedAt: Date.now() });
         },
         ...l ? { token: l } : {},
-        ...d ? { userId: d } : {},
+        ...c ? { userId: c } : {},
         ...v ? { accent: v } : {},
         ...f ? { i18n: f } : {}
       }));
     }), () => {
       var u;
-      C = !0, (u = x.current) == null || u.close(), x.current = null;
+      C = !0, (u = b.current) == null || u.close(), b.current = null;
     };
-  }, [r, i, c, o, l, d, m]), A(() => {
+  }, [r, i, d, o, l, c, m]), W(() => {
     var u;
     if (!B.current || !t) return;
-    (u = S.current) == null || u.close(), S.current = Y({
+    (u = $.current) == null || u.close(), $.current = F({
       el: B.current,
       url: r,
       ...i ? { apiUrl: i } : {},
-      profileId: t.profileId ?? c,
+      profileId: t.profileId ?? d,
       // 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
@@ -305,8 +300,8 @@ function G({
       ...t.kind === "direct" && t.peerId ? { kind: "direct", peerId: t.peerId } : t.subjectId ? { subjectId: t.subjectId } : {},
       ...l ? { token: l } : {},
       ...s ? { refreshToken: s } : {},
-      ...d ? { userId: d } : {},
-      ...d || p || y ? {
+      ...c ? { userId: c } : {},
+      ...c || p || y ? {
         user: {
           ...p ? { name: p } : {},
           ...y ? { email: y } : {}
@@ -320,23 +315,23 @@ function G({
       } : {},
       ...v ? { accent: v } : {},
       // Stack navigation: the chatroom's back chevron returns to the list.
-      onBack: () => b(null)
+      onBack: () => x(null)
     });
     const C = setInterval(() => {
       var R;
-      return (R = x.current) == null ? void 0 : R.refresh();
+      return (R = b.current) == null ? void 0 : R.refresh();
     }, 2e4);
     return () => {
       var R, e;
-      clearInterval(C), (R = S.current) == null || R.close(), S.current = null, (e = x.current) == null || e.refresh();
+      clearInterval(C), (R = $.current) == null || R.close(), $.current = null, (e = b.current) == null || e.refresh();
     };
-  }, [t == null ? void 0 : t.id]), h ? /* @__PURE__ */ W("div", { style: { padding: 16, font: "13px system-ui", color: "#b91c1c", background: "#fef2f2", borderRadius: 8 }, children: [
+  }, [t == null ? void 0 : t.id]), h ? /* @__PURE__ */ H("div", { style: { padding: 16, font: "13px system-ui", color: "#b91c1c", background: "#fef2f2", borderRadius: 8 }, children: [
     "[relay] <ChatApp/> needs a ",
     /* @__PURE__ */ n("code", { children: "profileId" }),
     " or a ",
     /* @__PURE__ */ n("code", { children: "tenantId" }),
     "."
-  ] }) : /* @__PURE__ */ W("div", { style: { position: "relative", width: "100%", height: L, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
+  ] }) : /* @__PURE__ */ H("div", { style: { position: "relative", width: "100%", height: S, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
     w && !t && /* @__PURE__ */ n(
       "button",
       {
@@ -360,7 +355,7 @@ function G({
           lineHeight: 1,
           cursor: "pointer"
         },
-        children: /* @__PURE__ */ n(E, { size: 18 })
+        children: /* @__PURE__ */ n(Q, { size: 18 })
       }
     ),
     /* @__PURE__ */ n("div", { style: {
@@ -368,43 +363,43 @@ function G({
       inset: 0,
       display: t ? "none" : "flex",
       flexDirection: "column"
-    }, children: $ ? /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", padding: 16, font: "13px system-ui", color: "#b91c1c", textAlign: "center" }, children: (f == null ? void 0 : f.error) ?? "Could not load conversations." }) : /* @__PURE__ */ n("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
+    }, children: M ? /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", padding: 16, font: "13px system-ui", color: "#b91c1c", textAlign: "center" }, children: (f == null ? void 0 : f.error) ?? "Could not load conversations." }) : /* @__PURE__ */ n("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
     t && /* @__PURE__ */ n("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ n("div", { ref: B, style: { width: "100%", height: "100%" } }) })
   ] });
 }
-function N({
+function I({
   url: r,
   apiUrl: i,
-  profileId: c,
+  profileId: d,
   tenantId: o,
   token: l,
   refreshToken: s,
-  userId: d,
+  userId: c,
   userName: p,
   userEmail: y,
   scope: v,
   accent: a = "#6c5ce7",
   floating: j = !0,
-  position: L = "bottom-right",
+  position: S = "bottom-right",
   label: f,
   panelWidth: w,
   panelHeight: m = "600px"
 }) {
-  const [h, t] = _(!1), b = k(null), $ = L === "bottom-right", z = f ?? (j ? void 0 : "Messages"), g = Q(479);
-  if (A(() => {
-    const e = (M) => {
-      M.key === "Escape" && t(!1);
+  const [h, t] = D(!1), x = k(null), M = S === "bottom-right", z = f ?? (j ? void 0 : "Messages"), g = X(479);
+  if (W(() => {
+    const e = (L) => {
+      L.key === "Escape" && t(!1);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, []), j)
-    return /* @__PURE__ */ W("div", { style: {
+    return /* @__PURE__ */ H("div", { style: {
       position: "fixed",
-      [$ ? "right" : "left"]: "20px",
+      [M ? "right" : "left"]: "20px",
       bottom: "20px",
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      alignItems: $ ? "flex-end" : "flex-start",
+      alignItems: M ? "flex-end" : "flex-start",
       gap: "12px"
     }, children: [
       /* @__PURE__ */ n("div", { style: {
@@ -425,18 +420,18 @@ function N({
         background: "#fff",
         display: h ? "flex" : "none",
         flexDirection: "column",
-        transformOrigin: `bottom ${$ ? "right" : "left"}`,
+        transformOrigin: `bottom ${M ? "right" : "left"}`,
         animation: h ? "ocl-pop-in .18s ease" : "none"
       }, children: /* @__PURE__ */ n(
-        G,
+        A,
         {
           url: r,
           ...i ? { apiUrl: i } : {},
-          ...c ? { profileId: c } : {},
+          ...d ? { profileId: d } : {},
           ...o ? { tenantId: o } : {},
           ...l ? { token: l } : {},
           ...s ? { refreshToken: s } : {},
-          ...d ? { userId: d } : {},
+          ...c ? { userId: c } : {},
           ...p ? { userName: p } : {},
           ...y ? { userEmail: y } : {},
           ...v ? { scope: v } : {},
@@ -448,7 +443,7 @@ function N({
       /* @__PURE__ */ n(
         "button",
         {
-          ref: b,
+          ref: x,
           onClick: () => t((e) => !e),
           "aria-label": h ? "Close chat" : typeof z == "string" ? z : "Open chat",
           "aria-expanded": h,
@@ -474,19 +469,19 @@ function N({
           onMouseLeave: (e) => {
             e.currentTarget.style.transform = "scale(1)";
           },
-          children: h ? /* @__PURE__ */ n(E, {}) : f ?? /* @__PURE__ */ n(K, {})
+          children: h ? /* @__PURE__ */ n(Q, {}) : f ?? /* @__PURE__ */ n(K, {})
         }
       ),
       /* @__PURE__ */ n("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
     ] });
-  const B = `min(${w ?? "420px"}, calc(100vw - 16px))`, [x, S] = _(null), C = () => {
-    !h && b.current && S(b.current.getBoundingClientRect()), t((e) => !e);
-  }, u = x ? x.bottom + 8 : 0, R = x ? Math.max(8, window.innerWidth - x.right) : 0;
-  return /* @__PURE__ */ W(q, { children: [
-    /* @__PURE__ */ W(
+  const B = `min(${w ?? "420px"}, calc(100vw - 16px))`, [b, $] = D(null), C = () => {
+    !h && x.current && $(x.current.getBoundingClientRect()), t((e) => !e);
+  }, u = b ? b.bottom + 8 : 0, R = b ? Math.max(8, window.innerWidth - b.right) : 0;
+  return /* @__PURE__ */ H(J, { children: [
+    /* @__PURE__ */ H(
       "button",
       {
-        ref: b,
+        ref: x,
         onClick: C,
         style: {
           display: "inline-flex",
@@ -509,7 +504,7 @@ function N({
         ]
       }
     ),
-    h && x && /* @__PURE__ */ W(q, { children: [
+    h && b && /* @__PURE__ */ H(J, { children: [
       /* @__PURE__ */ n(
         "div",
         {
@@ -537,15 +532,15 @@ function N({
         zIndex: 9999,
         animation: "ocl-slide-in .18s ease"
       }, children: /* @__PURE__ */ n(
-        G,
+        A,
         {
           url: r,
           ...i ? { apiUrl: i } : {},
-          ...c ? { profileId: c } : {},
+          ...d ? { profileId: d } : {},
           ...o ? { tenantId: o } : {},
           ...l ? { token: l } : {},
           ...s ? { refreshToken: s } : {},
-          ...d ? { userId: d } : {},
+          ...c ? { userId: c } : {},
           ...p ? { userName: p } : {},
           ...y ? { userEmail: y } : {},
           ...v ? { scope: v } : {},
@@ -559,9 +554,9 @@ function N({
   ] });
 }
 export {
-  G as ChatApp,
-  N as ChatAppLauncher,
+  A as ChatApp,
+  I as ChatAppLauncher,
   T as ChatWidget,
-  I as MarketplaceChat
+  E as MarketplaceChat
 };
 //# sourceMappingURL=react.js.map