@paramms/chat-widget 1.0.29 → 1.0.31

package/dist/hooks.d.ts

@@ -0,0 +1,43 @@
+import { RelayConversation, type RelayClientOptions, type OpenOptions } from './core.js';
+import type { RenderMessage } from './store.js';
+export type UseRelayConversationOptions = RelayClientOptions & OpenOptions;
+export interface RelayConversationHook {
+    /** Messages in seq order (optimistic sends included, pending-marked). */
+    messages: RenderMessage[];
+    send: (text: string) => void;
+    /** Call from your input's onChange for typing indicators. */
+    typing: (isTyping: boolean) => void;
+    markRead: () => void;
+    /** connecting | connected | reconnecting | error */
+    status: string;
+    statusMessage: string | undefined;
+    conversationId: string | undefined;
+    /** Our canonical user id (server-resolved) — compare with message.senderId for "mine". */
+    me: string | undefined;
+    /** userIds currently typing (excluding you). */
+    peersTyping: string[];
+    /** The underlying conversation for anything the hook doesn't surface
+     *  (reactions, invoke, raw store). */
+    conversation: RelayConversation;
+}
+/** One live conversation (support thread or DM). The connection opens on
+ *  mount and closes on unmount; options changes reopen. */
+export declare function useRelayConversation(opts: UseRelayConversationOptions): RelayConversationHook;
+export interface ChatListRow {
+    conversationId: string;
+    subjectId?: string;
+    title?: string;
+    lastMessage?: string;
+    updatedAt: number;
+    unread?: boolean;
+}
+/** The current user's conversation list for a chatroom (the "inbox" screen of
+ *  a chat app). Polls the REST endpoint; pass `refreshMs: 0` to fetch once. */
+export declare function useRelayChatList(opts: RelayClientOptions & {
+    refreshMs?: number;
+}): {
+    conversations: ChatListRow[];
+    loading: boolean;
+    error: string | null;
+    refresh: () => void;
+};

package/dist/hooks.js

@@ -0,0 +1,71 @@
+import { useState as d, useEffect as k, useRef as y, useSyncExternalStore as M, useMemo as h } from "react";
+import { RelayClient as j } from "./core.js";
+import { r as b } from "./uid.js";
+function E(e) {
+  var l;
+  const c = `${e.url}|${e.token ?? ""}|${e.profileId}|${e.subjectId ?? ""}|${e.kind ?? ""}|${e.peerId ?? ""}`, s = y(null);
+  (!s.current || s.current.key !== c) && ((l = s.current) == null || l.convo.close(), s.current = { key: c, convo: new j(e).open(e) });
+  const n = s.current.convo;
+  k(() => () => {
+    var t;
+    (t = s.current) == null || t.convo.close(), s.current = null;
+  }, []);
+  const o = y(0), i = M(
+    (t) => n.onChange(() => {
+      o.current++, t();
+    }),
+    () => o.current,
+    () => o.current
+  ), u = h(() => n.store.messages(), [n, i]), f = h(() => [...n.store.typing], [n, i]);
+  return {
+    messages: u,
+    send: (t) => n.send(t),
+    typing: (t) => n.typing(t),
+    markRead: () => n.markRead(),
+    status: n.status,
+    statusMessage: n.statusMessage,
+    conversationId: n.conversationId,
+    me: n.me,
+    peersTyping: f,
+    conversation: n
+  };
+}
+function S(e) {
+  const [c, s] = d([]), [n, o] = d(!0), [i, u] = d(null), [f, l] = d(0);
+  return k(() => {
+    let t = !1;
+    const { httpBase: R } = b(e.url), v = e.token ?? "";
+    async function m() {
+      try {
+        const a = await fetch(`${R}/conversations/mine?profileId=${encodeURIComponent(e.profileId)}`, {
+          headers: v ? { authorization: `Bearer ${v}` } : {}
+        });
+        if (!a.ok) throw new Error(`chat list failed: ${a.status}`);
+        const $ = await a.json();
+        if (t) return;
+        s($.conversations.map((r) => ({
+          conversationId: r.id,
+          ...r.subjectId ? { subjectId: r.subjectId } : {},
+          ...r.subjectTitle ? { title: r.subjectTitle } : {},
+          ...r.lastMessage ? { lastMessage: r.lastMessage } : {},
+          updatedAt: r.updatedAt,
+          ...r.unread !== void 0 ? { unread: r.unread } : {}
+        }))), u(null);
+      } catch (a) {
+        t || u(a.message);
+      } finally {
+        t || o(!1);
+      }
+    }
+    m();
+    const g = e.refreshMs ?? 15e3, I = g > 0 ? setInterval(() => void m(), g) : null;
+    return () => {
+      t = !0, I && clearInterval(I);
+    };
+  }, [e.url, e.token, e.profileId, e.refreshMs, f]), { conversations: c, loading: n, error: i, refresh: () => l((t) => t + 1) };
+}
+export {
+  S as useRelayChatList,
+  E as useRelayConversation
+};
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../src/hooks.ts"],"sourcesContent":["// ── @paramms/chat-widget/hooks — React bindings for the headless SDK ─────────\n// Build your own chat UI with two hooks. Same primitives as the bundled\n// widget and the agent dashboard — these are bindings, not a reimplementation.\n//\n//   const { messages, send, status, typing } = useRelayConversation({\n//     url, token, profileId: 'p_x', subjectId: 'listing_42',\n//   })\n//   const dm = useRelayConversation({ url, token, profileId: 'p_x', kind: 'direct', peerId: 'user_bob' })\n//   const { conversations } = useRelayChatList({ url, token, profileId: 'p_x' })\nimport { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'\nimport { RelayClient, RelayConversation, type RelayClientOptions, type OpenOptions } from './core.js'\nimport { resolveRelayUrls } from './history.js'\nimport type { RenderMessage } from './store.js'\n\nexport type UseRelayConversationOptions = RelayClientOptions & OpenOptions\n\nexport interface RelayConversationHook {\n  /** Messages in seq order (optimistic sends included, pending-marked). */\n  messages: RenderMessage[]\n  send: (text: string) => void\n  /** Call from your input's onChange for typing indicators. */\n  typing: (isTyping: boolean) => void\n  markRead: () => void\n  /** connecting | connected | reconnecting | error */\n  status: string\n  statusMessage: string | undefined\n  conversationId: string | undefined\n  /** Our canonical user id (server-resolved) — compare with message.senderId for \"mine\". */\n  me: string | undefined\n  /** userIds currently typing (excluding you). */\n  peersTyping: string[]\n  /** The underlying conversation for anything the hook doesn't surface\n   *  (reactions, invoke, raw store). */\n  conversation: RelayConversation\n}\n\n/** One live conversation (support thread or DM). The connection opens on\n *  mount and closes on unmount; options changes reopen. */\nexport function useRelayConversation(opts: UseRelayConversationOptions): RelayConversationHook {\n  // Key that captures every option that requires a NEW conversation/socket.\n  const key = `${opts.url}|${opts.token ?? ''}|${opts.profileId}|${opts.subjectId ?? ''}|${opts.kind ?? ''}|${opts.peerId ?? ''}`\n  const convoRef = useRef<{ key: string; convo: RelayConversation } | null>(null)\n  if (!convoRef.current || convoRef.current.key !== key) {\n    convoRef.current?.convo.close()\n    convoRef.current = { key, convo: new RelayClient(opts).open(opts) }\n  }\n  const convo = convoRef.current.convo\n\n  // Close on unmount (and on Strict-Mode double-invoke, reopen lazily above).\n  useEffect(() => () => { convoRef.current?.convo.close(); convoRef.current = null }, [])\n\n  // Subscribe React to the store via useSyncExternalStore: `version` bumps on\n  // every change, and the snapshot getters below memo off it. (This is the\n  // lesson from the dashboard's stale-useMemo bug baked into the API.)\n  const versionRef = useRef(0)\n  const version = useSyncExternalStore(\n    (onStoreChange) => convo.onChange(() => { versionRef.current++; onStoreChange() }),\n    () => versionRef.current,\n    () => versionRef.current,\n  )\n\n  const messages = useMemo(() => convo.store.messages(), [convo, version])\n  const peersTyping = useMemo(() => [...convo.store.typing], [convo, version])\n\n  return {\n    messages,\n    send: (text: string) => convo.send(text),\n    typing: (isTyping: boolean) => convo.typing(isTyping),\n    markRead: () => convo.markRead(),\n    status: convo.status,\n    statusMessage: convo.statusMessage,\n    conversationId: convo.conversationId as string | undefined,\n    me: convo.me as string | undefined,\n    peersTyping,\n    conversation: convo,\n  }\n}\n\nexport interface ChatListRow {\n  conversationId: string\n  subjectId?: string\n  title?: string\n  lastMessage?: string\n  updatedAt: number\n  unread?: boolean\n}\n\n/** The current user's conversation list for a chatroom (the \"inbox\" screen of\n *  a chat app). Polls the REST endpoint; pass `refreshMs: 0` to fetch once. */\nexport function useRelayChatList(opts: RelayClientOptions & { refreshMs?: number }): {\n  conversations: ChatListRow[]\n  loading: boolean\n  error: string | null\n  refresh: () => void\n} {\n  const [conversations, setConversations] = useState<ChatListRow[]>([])\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n  const [nonce, setNonce] = useState(0)\n\n  useEffect(() => {\n    let cancelled = false\n    const { httpBase } = resolveRelayUrls(opts.url)\n    const token = opts.token ?? ''\n    async function load(): Promise<void> {\n      try {\n        const res = await fetch(`${httpBase}/conversations/mine?profileId=${encodeURIComponent(opts.profileId)}`, {\n          headers: token ? { authorization: `Bearer ${token}` } : {},\n        })\n        if (!res.ok) throw new Error(`chat list failed: ${res.status}`)\n        const data = await res.json() as { conversations: Array<{ id: string; subjectId?: string; subjectTitle?: string; lastMessage?: string; updatedAt: number; unread?: boolean }> }\n        if (cancelled) return\n        setConversations(data.conversations.map(c => ({\n          conversationId: c.id,\n          ...(c.subjectId ? { subjectId: c.subjectId } : {}),\n          ...(c.subjectTitle ? { title: c.subjectTitle } : {}),\n          ...(c.lastMessage ? { lastMessage: c.lastMessage } : {}),\n          updatedAt: c.updatedAt,\n          ...(c.unread !== undefined ? { unread: c.unread } : {}),\n        })))\n        setError(null)\n      } catch (e) {\n        if (!cancelled) setError((e as Error).message)\n      } finally {\n        if (!cancelled) setLoading(false)\n      }\n    }\n    void load()\n    const ms = opts.refreshMs ?? 15_000\n    const timer = ms > 0 ? setInterval(() => void load(), ms) : null\n    return () => { cancelled = true; if (timer) clearInterval(timer) }\n  }, [opts.url, opts.token, opts.profileId, opts.refreshMs, nonce])\n\n  return { conversations, loading, error, refresh: () => setNonce(n => n + 1) }\n}\n"],"names":["useRelayConversation","opts","key","convoRef","useRef","_a","RelayClient","convo","useEffect","versionRef","version","useSyncExternalStore","onStoreChange","messages","useMemo","peersTyping","text","isTyping","useRelayChatList","conversations","setConversations","useState","loading","setLoading","error","setError","nonce","setNonce","cancelled","httpBase","resolveRelayUrls","token","load","res","data","c","e","ms","timer","n"],"mappings":"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"}

package/dist/index.d.ts

@@ -34,6 +34,9 @@ export interface MountOptions {
      *     origin (first-party cookie + localStorage). A returning visitor on the same
      *     browser keeps their history; if storage is blocked they get a fresh chat. */
     token?: string;
+    /** Called when a signed token is rejected (expired): return a fresh token
+     *  from your backend to renew the session without a reload. */
+    refreshToken?: () => Promise<string | null>;
     userId?: string;
     subject?: WidgetConfig['subject'];
     quickReplies?: string[];

package/dist/index.html

@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Relay Chat Widget</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+
+    /* Marketing mode (no profileId in URL): purple gradient + info column */
+    body.marketing {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+    .container {
+      max-width: 900px;
+      width: 100%;
+      display: flex;
+      gap: 48px;
+      align-items: flex-start;
+    }
+    .info { flex: 1; color: #fff; }
+    .info h1 { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
+    .info p { font-size: 16px; opacity: .85; line-height: 1.6; margin-bottom: 24px; }
+    .snippet {
+      background: rgba(0,0,0,.3);
+      border-radius: 12px;
+      padding: 20px;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 13px;
+      color: #e2e8f0;
+      line-height: 1.6;
+      white-space: pre;
+    }
+
+    /* Widget-only mode (?profileId=... present): bare contained card on a
+       neutral backdrop — what the widget actually looks like embedded on a
+       real page, just centered for easy viewing/sharing as a test link. */
+    body.widget-only { background: #e9eaee; }
+
+    /* Both modes use the same card shape for the widget itself */
+    .preview {
+      width: 390px;
+      height: 680px;
+      max-width: calc(100vw - 48px);
+      max-height: calc(100vh - 48px);
+      border-radius: 22px;
+      overflow: hidden;
+      box-shadow: 0 24px 60px rgba(0,0,0,.25);
+      background: #fff;
+      flex-shrink: 0;
+    }
+
+    #app { width: 100%; height: 100%; }
+  </style>
+</head>
+<body>
+  <div id="marketing-info" class="info" style="display:none">
+    <h1>Relay Chat Widget</h1>
+    <p>Add a real-time chat widget to any website in two lines of code.</p>
+    <div class="snippet">&lt;div id="chat"&gt;&lt;/div&gt;
+&lt;script type="module"&gt;
+  import { mount } from 'https://relay.paramms.com/index.js'
+  mount({
+    el: document.getElementById('chat'),
+    url: 'wss://api.paramms.com/ws',
+    profileId: 'YOUR_PROFILE_ID',
+  })
+&lt;/script&gt;</div>
+  </div>
+  <div id="layout"></div>
+  <script type="module">
+    import { mount } from './index.js'
+
+    const q = new URLSearchParams(location.search)
+    const profileId = q.get('profileId')
+    const isWidgetOnly = !!profileId
+
+    document.body.className = isWidgetOnly ? 'widget-only' : 'marketing'
+
+    const layout = document.getElementById('layout')
+    const preview = document.createElement('div')
+    preview.className = 'preview'
+    const app = document.createElement('div')
+    app.id = 'app'
+    preview.append(app)
+
+    if (isWidgetOnly) {
+      // Just the contained card, centered on a neutral backdrop.
+      layout.append(preview)
+    } else {
+      // Marketing landing page: info column + card preview, side by side.
+      const container = document.createElement('div')
+      container.className = 'container'
+      const info = document.getElementById('marketing-info')
+      info.style.display = ''
+      container.append(info, preview)
+      layout.append(container)
+    }
+
+    const wsUrl = q.get('url') || 'wss://api.paramms.com/ws'
+    const subjectId = q.get('subjectId') || undefined
+
+    // ── Persistent guest identity ────────────────────────────────────────────
+    // Resolved here and persisted via BOTH a first-party cookie and localStorage.
+    // On this top-level page the cookie survives refreshes even when localStorage
+    // is cleared/blocked, so the guest keeps the same id across reloads and the
+    // server resumes their existing conversation instead of starting a new chat.
+    function readCookie(name) {
+      const m = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'))
+      return m ? decodeURIComponent(m[1]) : null
+    }
+    function persistentGuestId() {
+      let id = q.get('uid')                                  // explicit pin wins
+      if (!id) { try { id = localStorage.getItem('oc_uid') } catch (e) {} }
+      if (!id) id = readCookie('oc_uid')
+      if (!id) id = 'g_' + Math.random().toString(36).slice(2) + Date.now().toString(36)
+      try { localStorage.setItem('oc_uid', id) } catch (e) {}
+      const secure = location.protocol === 'https:' ? '; Secure' : ''
+      document.cookie = 'oc_uid=' + encodeURIComponent(id) +
+        '; Max-Age=' + (60 * 60 * 24 * 365) + '; Path=/; SameSite=Lax' + secure
+      return id
+    }
+
+    // Prefer SERVER-OWNED identity: the relay mints a signed guest token and
+    // sets an httpOnly cookie scoped to the parent domain, so the same guest is
+    // recognised across refreshes regardless of client storage. Falls back to
+    // the client-persisted id if the relay can't be reached — and NEVER hangs:
+    // fetch() has no built-in timeout, so without this a slow/unreachable relay
+    // would leave the promise pending forever and the widget would never mount
+    // (a blank page). We race it against a short timeout.
+    let apiBase = wsUrl.replace('wss://', 'https://').replace('ws://', 'http://')
+    if (apiBase.endsWith('/ws')) apiBase = apiBase.slice(0, -3)
+    async function resolveToken() {
+      const pinned = q.get('token') || q.get('uid')   // host-supplied identity wins
+      if (pinned) return pinned
+      try {
+        const ctrl = new AbortController()
+        const timer = setTimeout(() => ctrl.abort(), 3000)
+        const r = await fetch(apiBase + '/auth/guest', { method: 'POST', credentials: 'include', signal: ctrl.signal })
+        clearTimeout(timer)
+        if (r.ok) { const d = await r.json(); if (d && d.token) return d.token }
+      } catch (e) { /* unreachable/slow/aborted — fall back below */ }
+      return persistentGuestId()
+    }
+
+    // Mount only ever depends on a resolved token, and any failure surfaces as a
+    // visible message rather than a blank page.
+    resolveToken()
+      .catch(() => persistentGuestId())
+      .then((token) => {
+        try {
+          mount({
+            el: app,
+            token,
+            url: wsUrl,
+            profileId: profileId || 'p_hotel',
+            ...(subjectId ? { subjectId } : {}),
+            accent: q.get('accent') || '#4F63F5',
+          })
+        } catch (err) {
+          app.innerHTML = '<div style="padding:24px;font:14px system-ui;color:#b91c1c">' +
+            'Chat failed to load. ' + (err && err.message ? String(err.message) : '') + '</div>'
+        }
+      })
+  </script>
+</body>
+</html>