@paramms/chat-widget 1.0.15 → 1.0.17

package/dist/protocol/entities.d.ts

@@ -80,6 +80,9 @@ export interface Conversation {
     sentimentScore?: number;
     /** Set once an SLA-breach escalation macro has fired, so it only fires once. */
     slaEscalatedAt?: number;
+    /** If set, the conversation is snoozed until this Unix ms timestamp.
+     *  Hidden from the inbox until the timestamp passes, then resurfaces. */
+    snoozedUntil?: number;
     /** Page URL where the widget was open when the conversation started. */
     pageUrl?: string;
     /** Browser tab title at conversation start — gives agents context. */
@@ -110,3 +113,8 @@ export interface Subject {
     createdAt: number;
     updatedAt: number;
 }
+/** States in which a conversation is no longer "open": it's done with, so inbox
+ *  / proactive sweeps skip it and load balancing frees the assigned agent. The
+ *  single source of truth for "is this conversation finished?". */
+export declare const TERMINAL_STATES: ReadonlySet<string>;
+export declare function isTerminalState(state: string): boolean;

package/dist/protocol/frames.d.ts

@@ -155,6 +155,7 @@ export type ServerFrame = {
     conversationId: ConversationId;
     userId: UserId;
     isTyping: boolean;
+    preview?: string;
 } | {
     type: 'reaction';
     conversationId: ConversationId;

package/dist/react.d.ts

@@ -2,6 +2,9 @@ import { type MountOptions } from './index.js';
 interface BaseProps {
     /** Relay WebSocket URL — set as NEXT_PUBLIC_RELAY_WS_URL in .env — required */
     url: string;
+    /** HTTP(S) base for REST calls (history, uploads). Set when your REST API is
+     *  on a different host/path than the WebSocket. Defaults to the WS origin. */
+    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 +67,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 +117,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 +165,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 +222,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,174 +1,182 @@
-import { jsxs as C, jsx as s, 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: x,
-  profileId: b,
+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: i,
-  userEmail: r,
+  userName: l,
+  userEmail: c,
   userAvatar: o,
-  contextTitle: g,
+  contextTitle: m,
   contextSubtitle: y,
   contextStatus: t,
-  subjectId: f,
-  accent: h,
+  subjectId: p,
+  accent: s,
   launcher: n,
-  position: l,
-  quickReplies: c,
-  height: d = "100%",
-  i18n: p,
-  translateLang: u
+  position: d,
+  quickReplies: f,
+  height: h = "100%",
+  i18n: g,
+  translateLang: r
 }) {
-  const w = v(null), a = v(null);
-  return S(() => {
-    var m;
+  const w = k(null), x = k(null);
+  return W(() => {
+    var v;
     if (w.current)
-      return (m = a.current) == null || m.close(), a.current = L({
+      return (v = x.current) == null || v.close(), x.current = D({
         el: w.current,
-        url: x,
-        profileId: b,
-        ...f ? { subjectId: f } : {},
+        url: b,
+        ...i ? { apiUrl: i } : {},
+        profileId: a,
+        ...p ? { subjectId: p } : {},
         ...e ? { token: e } : {},
-        ...e || i || r || o ? {
+        ...e || l || c || o ? {
           user: {
-            ...i ? { name: i } : {},
-            ...r ? { email: r } : {},
+            ...l ? { name: l } : {},
+            ...c ? { email: c } : {},
             ...o ? { avatar: o } : {}
           }
         } : {},
-        ...g ? {
+        ...m ? {
           subject: {
-            title: g,
+            title: m,
             ...y ? { subtitle: y } : {},
             ...t ? { status: t } : {}
           }
         } : {},
-        ...c ? { quickReplies: c } : {},
-        ...h ? { accent: h } : {},
-        ...u ? { translateLang: u } : {},
-        ...p ? { i18n: p } : {},
-        ...n ? { launcher: n, position: l ?? "bottom-right" } : {}
+        ...f ? { quickReplies: f } : {},
+        ...s ? { accent: s } : {},
+        ...r ? { translateLang: r } : {},
+        ...g ? { i18n: g } : {},
+        ...n ? { launcher: n, position: d ?? "bottom-right" } : {}
       }), () => {
-        var R;
-        (R = a.current) == null || R.close(), a.current = null;
+        var C;
+        (C = x.current) == null || C.close(), x.current = null;
       };
-  }, [x, b, f, e, i, r, h, n, l, u]), /* @__PURE__ */ s(
+  }, [b, i, a, p, e, l, c, s, n, d, r]), /* @__PURE__ */ u(
     "div",
     {
       ref: w,
-      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: d, minHeight: d === "100%" ? "480px" : void 0 }
+      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: x,
-  profileId: b,
+function K({
+  url: b,
+  apiUrl: i,
+  profileId: a,
   listingId: e,
-  listingTitle: i,
-  listingMeta: r,
+  listingTitle: l,
+  listingMeta: c,
   listingPrice: o,
-  listingStatus: g,
+  listingStatus: m,
   userId: y,
   userName: t,
-  userEmail: f,
-  userAvatar: h,
+  userEmail: p,
+  userAvatar: s,
   accent: n,
-  launcher: l,
-  position: c,
-  quickReplies: d,
-  height: p = "100%",
-  i18n: u,
+  launcher: d,
+  position: f,
+  quickReplies: h,
+  height: g = "100%",
+  i18n: r,
   translateLang: w
 }) {
-  const a = v(null), m = v(null);
-  return S(() => {
-    var R;
-    if (a.current)
-      return (R = m.current) == null || R.close(), m.current = L({
-        el: a.current,
-        url: x,
-        profileId: b,
+  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}` } : {},
         ...y ? { token: y } : {},
-        ...y || t || f || h ? {
+        ...y || t || p || s ? {
           user: {
             ...t ? { name: t } : {},
-            ...f ? { email: f } : {},
-            ...h ? { avatar: h } : {},
+            ...p ? { email: p } : {},
+            ...s ? { avatar: s } : {},
             ...e ? { meta: { listingId: e } } : {}
           }
         } : {},
-        ...i ? {
+        ...l ? {
           subject: {
-            title: i,
-            ...r ? { subtitle: r } : {},
+            title: l,
+            ...c ? { subtitle: c } : {},
             ...o ? { tags: [`$${o.toLocaleString()}`] } : {},
-            ...g ? { status: g } : {}
+            ...m ? { status: m } : {}
           }
         } : {},
-        quickReplies: d ?? B,
+        quickReplies: h ?? T,
         ...n ? { accent: n } : {},
         ...w ? { translateLang: w } : {},
-        ...u ? { i18n: u } : {},
-        ...l ? { launcher: l, position: c ?? "bottom-right" } : {}
+        ...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;
       };
-  }, [x, b, e, y, t, f, n, l, c, w]), /* @__PURE__ */ s(
+  }, [b, i, a, e, y, t, p, n, d, f, w]), /* @__PURE__ */ u(
     "div",
     {
-      ref: a,
-      style: l ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: p, minHeight: p === "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: x,
-  profileId: b,
+function F({
+  url: b,
+  apiUrl: i,
+  profileId: a,
   userId: e,
-  userName: i,
-  userEmail: r,
+  userName: l,
+  userEmail: c,
   accent: o,
-  height: g = "100%",
+  height: m = "100%",
   i18n: y
 }) {
-  const [t, f] = M(null), h = v(null), n = v(null), l = v(null), c = v(null);
-  S(() => {
-    if (h.current)
-      return import("./chatlist.js").then(({ mountChatList: p }) => {
-        l.current = p({
-          el: h.current,
-          url: x,
-          profileId: b,
-          onSelect: (u) => f(u),
-          ...e ? { userId: e } : {},
-          ...o ? { accent: o } : {},
-          ...y ? { i18n: y } : {}
-        });
-      }), () => {
-        var p;
-        (p = l.current) == null || p.close(), l.current = null;
-      };
-  }, [x, b, e]), S(() => {
-    var p;
+  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 } : {},
+        ...y ? { i18n: y } : {}
+      }));
+    }), () => {
+      var r;
+      g = !0, (r = d.current) == null || r.close(), d.current = null;
+    };
+  }, [b, a, e]), W(() => {
+    var g;
     if (!(!n.current || !t))
-      return (p = c.current) == null || p.close(), c.current = L({
+      return (g = f.current) == null || g.close(), f.current = D({
         el: n.current,
-        url: x,
-        profileId: b,
+        url: b,
+        ...i ? { apiUrl: i } : {},
+        profileId: a,
         ...t.subjectId ? { subjectId: t.subjectId } : {},
         ...e ? { token: e } : {},
-        ...e || i || r ? {
+        ...e || l || c ? {
           user: {
-            ...i ? { name: i } : {},
-            ...r ? { email: r } : {}
+            ...l ? { name: l } : {},
+            ...c ? { email: c } : {}
           }
         } : {},
         ...t.subjectTitle ? {
@@ -179,92 +187,94 @@ function $({
         } : {},
         ...o ? { accent: o } : {}
       }), () => {
-        var u;
-        (u = c.current) == null || u.close(), c.current = null;
+        var r;
+        (r = f.current) == null || r.close(), f.current = null;
       };
   }, [t == null ? void 0 : t.id]);
-  const d = typeof window < "u" && window.innerWidth < 768;
-  return /* @__PURE__ */ C("div", { style: { display: "flex", width: "100%", height: g, minHeight: "400px", overflow: "hidden" }, children: [
-    /* @__PURE__ */ s("div", { style: {
-      width: d ? "100%" : "360px",
-      flex: d && t ? "none" : void 0,
-      display: d && 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: d ? "none" : "1px solid #e8eaed",
+      borderRight: h ? "none" : "1px solid #e8eaed",
       minWidth: 0
-    }, children: /* @__PURE__ */ s("div", { ref: h, style: { width: "100%", height: "100%" } }) }),
-    t ? /* @__PURE__ */ C("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
-      d && /* @__PURE__ */ s(
+    }, 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: () => f(null),
+          onClick: () => p(null),
           style: { position: "absolute", top: 12, left: 12, zIndex: 10, background: "none", border: "none", fontSize: 22, cursor: "pointer", color: "#1c1b1a" },
           children: "←"
         }
       ),
-      /* @__PURE__ */ s("div", { ref: n, style: { width: "100%", height: "100%" } })
-    ] }) : /* @__PURE__ */ s("div", { style: { flex: 1, display: d ? "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: x,
-  profileId: b,
+function P({
+  url: b,
+  apiUrl: i,
+  profileId: a,
   userId: e,
-  userName: i,
-  userEmail: r,
+  userName: l,
+  userEmail: c,
   accent: o = "#4F63F5",
-  floating: g = !0,
+  floating: m = !0,
   position: y = "bottom-right",
   label: t,
-  panelWidth: f,
-  panelHeight: h = "600px"
+  panelWidth: p,
+  panelHeight: s = "600px"
 }) {
-  const [n, l] = M(!1), c = v(null), d = y === "bottom-right", u = t ?? (g ? "💬" : "Messages");
-  if (S(() => {
-    const k = (z) => {
-      z.key === "Escape" && l(!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);
-  }, []), g) {
-    const k = typeof window < "u" && window.innerWidth < 480, z = k ? "100vw" : f ?? "420px", H = k ? "100dvh" : h;
-    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",
-      [d ? "right" : "left"]: "20px",
+      [h ? "right" : "left"]: "20px",
       bottom: "20px",
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      alignItems: d ? "flex-end" : "flex-start",
+      alignItems: h ? "flex-end" : "flex-start",
       gap: "12px"
     }, children: [
-      /* @__PURE__ */ s("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 ${d ? "right" : "left"}`,
+        transformOrigin: `bottom ${h ? "right" : "left"}`,
         animation: n ? "ocl-pop-in .18s ease" : "none"
-      }, children: /* @__PURE__ */ s(
-        $,
+      }, children: /* @__PURE__ */ u(
+        F,
         {
-          url: x,
-          profileId: b,
+          url: b,
+          ...i ? { apiUrl: i } : {},
+          profileId: a,
           ...e ? { userId: e } : {},
-          ...i ? { userName: i } : {},
-          ...r ? { userEmail: r } : {},
+          ...l ? { userName: l } : {},
+          ...c ? { userEmail: c } : {},
           accent: o,
           height: "100%"
         }
       ) }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ u(
         "button",
         {
-          ref: c,
-          onClick: () => l((j) => !j),
+          ref: f,
+          onClick: () => d((S) => !S),
           style: {
             width: "56px",
             height: "56px",
@@ -278,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 ? "✕" : u
+          children: n ? "✕" : r
         }
       ),
-      /* @__PURE__ */ s("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 w = f ?? "420px", [a, m] = M(null), R = () => {
-    !n && c.current && m(c.current.getBoundingClientRect()), l((k) => !k);
-  }, W = a ? a.bottom + 8 : 0, F = a ? window.innerWidth - a.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: c,
-        onClick: R,
+        ref: f,
+        onClick: C,
         style: {
           display: "inline-flex",
           alignItems: "center",
@@ -315,50 +325,51 @@ function K({
         },
         children: [
           "💬 ",
-          u
+          r
         ]
       }
     ),
-    n && a && /* @__PURE__ */ C(D, { children: [
-      /* @__PURE__ */ s(
+    n && x && /* @__PURE__ */ j($, { children: [
+      /* @__PURE__ */ u(
         "div",
         {
-          onClick: () => l(!1),
+          onClick: () => d(!1),
           style: { position: "fixed", inset: 0, zIndex: 9998 }
         }
       ),
-      /* @__PURE__ */ s("div", { style: {
+      /* @__PURE__ */ u("div", { style: {
         position: "fixed",
-        top: W,
-        right: F,
+        top: z,
+        right: H,
         width: w,
-        height: h,
+        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__ */ s(
-        $,
+      }, children: /* @__PURE__ */ u(
+        F,
         {
-          url: x,
-          profileId: b,
+          url: b,
+          ...i ? { apiUrl: i } : {},
+          profileId: a,
           ...e ? { userId: e } : {},
-          ...i ? { userName: i } : {},
-          ...r ? { userEmail: r } : {},
+          ...l ? { userName: l } : {},
+          ...c ? { userEmail: c } : {},
           accent: o,
           height: "100%"
         }
       ) }),
-      /* @__PURE__ */ s("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