npm - @paramms/chat-widget - Versions diffs - 1.0.30 → 1.0.32 - Mend

@paramms/chat-widget 1.0.30 → 1.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/index.html ADDED Viewed

@@ -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>

package/dist/react.d.ts CHANGED Viewed

@@ -9,6 +9,13 @@ interface BaseProps {
     apiUrl?: string;
     /** Your Relay profile ID — set as NEXT_PUBLIC_RELAY_PROFILE_ID in .env — required */
     profileId: string;
+    /** A signed identity token — an ES256 JWT `{sub,iat,exp}` minted by YOUR
+     *  backend for chatrooms with signed identity (guestPublicKey) enabled.
+     *  This is the production identity tier; wins over `userId`. */
+    token?: string;
+    /** Called when a signed token expires: return a fresh token from your
+     *  backend to renew the session without a reload. */
+    refreshToken?: () => Promise<string | null>;
     /** Your logged-in user's stable ID. When omitted the widget automatically
      *  assigns a persistent anonymous ID from localStorage — no login required. */
     userId?: string;
@@ -49,7 +56,7 @@ export interface ChatWidgetProps extends BaseProps {
  * @example Basic support chat
  * ```tsx
  * <ChatWidget
- *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *   url={process.env.NEXT_PUBLIC_RELAY_URL}
  *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
  *   userId={session?.user.id}
  *   userName={session?.user.name}
@@ -57,19 +64,22 @@ export interface ChatWidgetProps extends BaseProps {
  * />
  * ```
  *
- * @example Multi-thread (tickets, bookings, orders)
+ * @example Multi-thread (tickets, bookings, orders) — one thread per subjectId
  * ```tsx
  * <ChatWidget
  *   url={...} profileId={...}
- *   showChatList
  *   subjectId={`ticket_${ticket.id}`}
  *   contextTitle={ticket.title}
  *   contextStatus={ticket.status}
  *   userId={session?.user.id}
  * />
  * ```
+ *
+ * Need a list of the user's threads with tap-to-open? That's `<ChatApp />`
+ * (inline) or `<ChatAppLauncher />` (floating bubble) — this component renders
+ * a single conversation.
  */
-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 declare function ChatWidget({ url, apiUrl, profileId, token, refreshToken, 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. */
@@ -91,7 +101,7 @@ export interface MarketplaceChatProps extends BaseProps {
  * ```tsx
  * // On your listing detail page:
  * <MarketplaceChat
- *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *   url={process.env.NEXT_PUBLIC_RELAY_URL}
  *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
  *   listingId={car.id}
  *   listingTitle={car.title}
@@ -104,35 +114,53 @@ export interface MarketplaceChatProps extends BaseProps {
  * />
  * ```
  *
- * **Without `listingId` (My Messages / inbox page)** — shows the WhatsApp-style
- * thread list as the home screen. No conversation is opened until the user taps one.
- * Use this on a dedicated `/messages` or `/inbox` page.
+ * **Without `listingId`** — opens the buyer's single general (non-listing)
+ * thread with this chatroom. For a "My Messages" / inbox page with the
+ * WhatsApp-style thread list and tap-to-open, use `<ChatApp />` (or
+ * `<ChatAppLauncher />` for a floating bubble):
  * ```tsx
  * // On your /messages page:
- * <MarketplaceChat
- *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ * <ChatApp
+ *   url={process.env.NEXT_PUBLIC_RELAY_URL}
  *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
  *   userId={session?.user.id}
- *   userName={session?.user.name}
  * />
  * ```
  *
  * Only `url` and `profileId` are required. All other props are optional.
  */
-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 declare function MarketplaceChat({ url, apiUrl, profileId, token, refreshToken, 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 */
+    /** Relay URL — ONE url, any scheme; `https://api.relay.paramms.com` is the
+     *  recommended form. The WebSocket URL and REST base are derived from it —
+     *  you do NOT need to pass `wss://` or `/ws`. */
     url: string;
-    /** HTTP(S) base for REST calls. Defaults to the WS origin. */
+    /** HTTP(S) base for REST calls — only when the REST API is on a different
+     *  origin than the socket. Normally omit.
+     *  @deprecated pass a single `url`; kept for back-compat. */
     apiUrl?: string;
     /** Your Relay profile ID — required */
     profileId: string;
+    /** A signed identity token (ES256 JWT) for chatrooms with signed identity
+     *  enabled — the production tier. Wins over `userId`. */
+    token?: string;
+    /** Return a fresh token when a signed token expires. */
+    refreshToken?: () => Promise<string | null>;
     /** Your logged-in user's stable ID. Omit for anonymous (uses localStorage UID) */
     userId?: string;
     /** Optional: shown to agents in the dashboard */
     userName?: string;
     /** Optional: shown to agents in the dashboard */
     userEmail?: string;
+    /** Which conversations the list shows (default 'tenant'):
+     *    'tenant'  — every conversation this user has with the business that
+     *      owns `profileId`, across ALL of its chatrooms — like a real
+     *      messaging app. Each row opens against its own chatroom.
+     *    'profile' — only this chatroom's threads (the pre-1.0.30 behaviour).
+     *  Tenancy note: guests never see or send tenant ids — the server resolves
+     *  the tenant FROM the profileId, so `profileId` stays the only id you
+     *  configure. */
+    scope?: 'profile' | 'tenant';
     /** Brand colour hex — default '#4F63F5' */
     accent?: string;
     /** Container height. Default: '100%' */
@@ -142,21 +170,25 @@ export interface ChatAppProps {
 }
 /**
  * Full chat-app component: conversation list on the left (or full screen on
- * mobile), chat room on the right when a thread is selected.
+ * mobile), chat room on the right when a thread is selected — like a
+ * standalone messaging app. Tapping a thread opens the chat inline; the ✎
+ * button starts a new conversation with the business.
  *
- * Works like a standalone messaging app — tapping a thread opens the chat
- * inline without navigating away from the page.
+ * By default (`scope="tenant"`) the list shows EVERY conversation this user
+ * has with the business that owns `profileId` — across all of its chatrooms —
+ * and each row opens against its own chatroom. Pass `scope="profile"` to
+ * limit it to one chatroom's threads.
  *
  * @example
  * ```tsx
  * 'use client'
- * import { ChatList } from '@paramms/chat-widget/react'
+ * import { ChatApp } from '@paramms/chat-widget/react'
  *
  * export default function MessagesPage({ session }) {
  *   return (
  *     <div style={{ height: '100vh' }}>
- *       <ChatList
- *         url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *       <ChatApp
+ *         url={process.env.NEXT_PUBLIC_RELAY_URL}
  *         profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
  *         userId={session?.user.id}
  *         userName={session?.user.name}
@@ -167,18 +199,28 @@ export interface ChatAppProps {
  * }
  * ```
  */
-export declare function ChatApp({ url, apiUrl, profileId, userId, userName, userEmail, accent, height, i18n, }: ChatAppProps): JSX.Element;
+export declare function ChatApp({ url, apiUrl, profileId, token, refreshToken, userId, userName, userEmail, accent, height, i18n, scope, }: ChatAppProps): JSX.Element;
 export interface ChatAppLauncherProps {
-    /** Relay WebSocket URL — required */
+    /** Relay URL — ONE url, any scheme; `https://api.relay.paramms.com` is the
+     *  recommended form. The WebSocket URL and REST base are derived from it. */
     url: string;
-    /** HTTP(S) base for REST calls. Defaults to the WS origin. */
+    /** HTTP(S) base for REST calls — only when REST is on a different origin.
+     *  @deprecated pass a single `url`; kept for back-compat. */
     apiUrl?: string;
     /** Your Relay profile ID — required */
     profileId: string;
+    /** A signed identity token (ES256 JWT) for chatrooms with signed identity
+     *  enabled — the production tier. Wins over `userId`. */
+    token?: string;
+    /** Return a fresh token when a signed token expires. */
+    refreshToken?: () => Promise<string | null>;
     /** Your logged-in user's stable ID */
     userId?: string;
     userName?: string;
     userEmail?: string;
+    /** Which conversations the panel's list shows — see ChatAppProps.scope.
+     *  Default 'tenant': every conversation this user has with the business. */
+    scope?: 'profile' | 'tenant';
     /** Brand colour hex — default '#4F63F5' */
     accent?: string;
     /** true  → floating bubble fixed to the corner of the screen (like Intercom)
@@ -205,7 +247,7 @@ export interface ChatAppLauncherProps {
  * @example Floating bubble (bottom-right)
  * ```tsx
  * <ChatAppLauncher
- *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *   url={process.env.NEXT_PUBLIC_RELAY_URL}
  *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
  *   userId={session?.user.id}
  *   floating
@@ -216,7 +258,7 @@ export interface ChatAppLauncherProps {
  * @example Inline nav button
  * ```tsx
  * <ChatAppLauncher
- *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *   url={process.env.NEXT_PUBLIC_RELAY_URL}
  *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
  *   userId={session?.user.id}
  *   floating={false}
@@ -224,5 +266,5 @@ export interface ChatAppLauncherProps {
  * />
  * ```
  */
-export declare function ChatAppLauncher({ url, apiUrl, profileId, userId, userName, userEmail, accent, floating, position, label, panelWidth, panelHeight, }: ChatAppLauncherProps): JSX.Element;
+export declare function ChatAppLauncher({ url, apiUrl, profileId, token, refreshToken, userId, userName, userEmail, scope, accent, floating, position, label, panelWidth, panelHeight, }: ChatAppLauncherProps): JSX.Element;
 export {};