@paramms/chat-widget 1.0.16 → 1.0.18

package/dist/react.d.ts

@@ -1,7 +1,12 @@
 import { type MountOptions } from './index.js';
 interface BaseProps {
-    /** Relay WebSocket URL — set as NEXT_PUBLIC_RELAY_WS_URL in .env — required */
+    /** Relay URL — set as NEXT_PUBLIC_RELAY_URL in .env. Any scheme works:
+     *  `https://api.example.com` is fine. The WebSocket URL and REST base are
+     *  derived automatically — you do NOT need to pass `wss://` or `/ws`. */
     url: string;
+    /** HTTP(S) base for REST calls — only when the REST API is on a different
+     *  origin than the socket. Normally omit. */
+    apiUrl?: string;
     /** Your Relay profile ID — set as NEXT_PUBLIC_RELAY_PROFILE_ID in .env — required */
     profileId: string;
     /** Your logged-in user's stable ID. When omitted the widget automatically
@@ -64,7 +69,7 @@ export interface ChatWidgetProps extends BaseProps {
  * />
  * ```
  */
-export declare function ChatWidget({ url, profileId, userId, userName, userEmail, userAvatar, contextTitle, contextSubtitle, contextStatus, subjectId, accent, launcher, position, quickReplies, height, i18n, translateLang, }: ChatWidgetProps): JSX.Element;
+export declare function ChatWidget({ url, apiUrl, profileId, userId, userName, userEmail, userAvatar, contextTitle, contextSubtitle, contextStatus, subjectId, accent, launcher, position, quickReplies, height, i18n, translateLang, }: ChatWidgetProps): JSX.Element;
 export interface MarketplaceChatProps extends BaseProps {
     /** Unique ID for this listing — each listing gets its own thread.
      *  Omit for a general (non-item-specific) conversation. */
@@ -114,10 +119,12 @@ export interface MarketplaceChatProps extends BaseProps {
  *
  * Only `url` and `profileId` are required. All other props are optional.
  */
-export declare function MarketplaceChat({ url, profileId, listingId, listingTitle, listingMeta, listingPrice, listingStatus, userId, userName, userEmail, userAvatar, accent, launcher, position, quickReplies, height, i18n, translateLang, }: MarketplaceChatProps): JSX.Element;
+export declare function MarketplaceChat({ url, apiUrl, profileId, listingId, listingTitle, listingMeta, listingPrice, listingStatus, userId, userName, userEmail, userAvatar, accent, launcher, position, quickReplies, height, i18n, translateLang, }: MarketplaceChatProps): JSX.Element;
 export interface ChatAppProps {
     /** Relay WebSocket URL — required */
     url: string;
+    /** HTTP(S) base for REST calls. Defaults to the WS origin. */
+    apiUrl?: string;
     /** Your Relay profile ID — required */
     profileId: string;
     /** Your logged-in user's stable ID. Omit for anonymous (uses localStorage UID) */
@@ -160,10 +167,12 @@ export interface ChatAppProps {
  * }
  * ```
  */
-export declare function ChatApp({ url, profileId, userId, userName, userEmail, accent, height, i18n, }: ChatAppProps): JSX.Element;
+export declare function ChatApp({ url, apiUrl, profileId, userId, userName, userEmail, accent, height, i18n, }: ChatAppProps): JSX.Element;
 export interface ChatAppLauncherProps {
     /** Relay WebSocket URL — required */
     url: string;
+    /** HTTP(S) base for REST calls. Defaults to the WS origin. */
+    apiUrl?: string;
     /** Your Relay profile ID — required */
     profileId: string;
     /** Your logged-in user's stable ID */
@@ -215,5 +224,5 @@ export interface ChatAppLauncherProps {
  * />
  * ```
  */
-export declare function ChatAppLauncher({ url, profileId, userId, userName, userEmail, accent, floating, position, label, panelWidth, panelHeight, }: ChatAppLauncherProps): JSX.Element;
+export declare function ChatAppLauncher({ url, apiUrl, profileId, userId, userName, userEmail, accent, floating, position, label, panelWidth, panelHeight, }: ChatAppLauncherProps): JSX.Element;
 export {};

package/dist/react.js

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