@paramms/chat-widget 0.1.0 → 1.0.0

package/dist/react.js

@@ -0,0 +1,137 @@
+import { jsx as k, Fragment as $ } from "react/jsx-runtime";
+import { useRef as y, useEffect as j } from "react";
+import { mount as E } from "./index.js";
+function D({
+  url: l,
+  profileId: m,
+  userId: t,
+  userName: i,
+  userEmail: c,
+  userAvatar: u,
+  contextTitle: p,
+  contextSubtitle: o,
+  contextStatus: h,
+  showChatList: b,
+  subjectId: n,
+  accent: C,
+  launcher: r,
+  position: _,
+  quickReplies: L,
+  height: s = "100%",
+  i18n: w,
+  translateLang: R
+}) {
+  const e = y(null), f = y(null);
+  return j(() => {
+    if (e.current)
+      return f.current = E({
+        el: e.current,
+        url: l,
+        profileId: m,
+        ...n ? { subjectId: n } : {},
+        ...t ? { token: t } : {},
+        ...t || i || c || u ? {
+          user: {
+            ...i ? { name: i } : {},
+            ...c ? { email: c } : {},
+            ...u ? { avatar: u } : {}
+          }
+        } : {},
+        ...p ? {
+          subject: {
+            title: p,
+            ...o ? { subtitle: o } : {},
+            ...h ? { status: h } : {}
+          }
+        } : {},
+        ...b ? { showChatList: !0 } : {},
+        ...L ? { quickReplies: L } : {},
+        ...C ? { accent: C } : {},
+        ...R ? { translateLang: R } : {},
+        ...w ? { i18n: w } : {},
+        ...r ? { launcher: r, position: _ ?? "bottom-right" } : {}
+      }), () => {
+        var v;
+        (v = f.current) == null || v.close(), f.current = null;
+      };
+  }, [l, m, n, t]), r ? /* @__PURE__ */ k($, {}) : /* @__PURE__ */ k(
+    "div",
+    {
+      ref: e,
+      style: { width: "100%", height: s, minHeight: s === "100%" ? "480px" : void 0 }
+    }
+  );
+}
+const F = [
+  "Is this still available?",
+  "Can I schedule a viewing?",
+  "What is your best price?"
+];
+function K({
+  url: l,
+  profileId: m,
+  listingId: t,
+  listingTitle: i,
+  listingMeta: c,
+  listingPrice: u,
+  listingStatus: p,
+  userId: o,
+  userName: h,
+  userEmail: b,
+  userAvatar: n,
+  accent: C,
+  launcher: r,
+  position: _,
+  quickReplies: L,
+  height: s = "100%",
+  i18n: w,
+  translateLang: R
+}) {
+  const e = y(null), f = y(null);
+  return j(() => {
+    if (e.current)
+      return f.current = E({
+        el: e.current,
+        url: l,
+        profileId: m,
+        ...t ? { subjectId: `listing_${t}` } : {},
+        ...o ? { token: o } : {},
+        ...o || h || b || n ? {
+          user: {
+            ...h ? { name: h } : {},
+            ...b ? { email: b } : {},
+            ...n ? { avatar: n } : {},
+            ...t ? { meta: { listingId: t } } : {}
+          }
+        } : {},
+        ...i ? {
+          subject: {
+            title: i,
+            ...c ? { subtitle: c } : {},
+            ...u ? { tags: [`$${u.toLocaleString()}`] } : {},
+            ...p ? { status: p } : {}
+          }
+        } : {},
+        showChatList: !0,
+        quickReplies: L ?? F,
+        ...C ? { accent: C } : {},
+        ...R ? { translateLang: R } : {},
+        ...w ? { i18n: w } : {},
+        ...r ? { launcher: r, position: _ ?? "bottom-right" } : {}
+      }), () => {
+        var v;
+        (v = f.current) == null || v.close(), f.current = null;
+      };
+  }, [l, m, t, o]), r ? /* @__PURE__ */ k($, {}) : /* @__PURE__ */ k(
+    "div",
+    {
+      ref: e,
+      style: { width: "100%", height: s, minHeight: s === "100%" ? "480px" : void 0 }
+    }
+  );
+}
+export {
+  D as ChatWidget,
+  K as MarketplaceChat
+};
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sources":["../src/react.tsx"],"sourcesContent":["// react.tsx — React wrapper around mount().\n//\n// Next.js App Router: add 'use client' to whichever file imports these.\n// The widget needs WebSocket + DOM — it cannot render on the server.\n//\n// Import path: '@paramms/chat-widget/react'\n//\n// Two components:\n//   ChatWidget        — general support chat (hotel, SaaS, helpdesk, etc.)\n//   MarketplaceChat   — one thread per listing (used cars, rentals, etc.)\n//\n// Both: only url + profileId are required. userId is always optional —\n// anonymous guests are handled automatically via localStorage.\n\nimport { useEffect, useRef } from 'react'\nimport { mount, type MountOptions, type WidgetHandle } from './index.js'\n\n// ── Shared base props ─────────────────────────────────────────────────────────\n\ninterface BaseProps {\n  /** Relay WebSocket URL — set as NEXT_PUBLIC_RELAY_WS_URL in .env — required */\n  url:       string\n  /** Your Relay profile ID — set as NEXT_PUBLIC_RELAY_PROFILE_ID in .env — required */\n  profileId: string\n\n  /** Your logged-in user's stable ID. When omitted the widget automatically\n   *  assigns a persistent anonymous ID from localStorage — no login required. */\n  userId?:     string\n  /** Shown to agents instead of the raw user ID */\n  userName?:   string\n  /** Shown to agents so they can follow up by email */\n  userEmail?:  string\n  /** Avatar URL shown in the widget header and dashboard */\n  userAvatar?: string\n\n  /** Brand colour hex, e.g. \"#1a56db\". Defaults to the profile theme colour. */\n  accent?:   string\n  /** Render as a floating launcher button instead of inline */\n  launcher?: boolean\n  /** Launcher position — default 'bottom-right' */\n  position?: 'bottom-right' | 'bottom-left'\n  /** Pre-set reply chips shown above the input */\n  quickReplies?: string[]\n  /** Container height when rendered inline. Default: '100%' */\n  height?: string\n  /** i18n string overrides for non-English sites */\n  i18n?: MountOptions['i18n']\n  /** ISO language code for auto-translating incoming messages */\n  translateLang?: string\n}\n\n// ── ChatWidget ────────────────────────────────────────────────────────────────\n\nexport interface ChatWidgetProps extends BaseProps {\n  /** Optional context card shown at the top of the chat\n   *  (e.g. the support ticket, booking, or order being discussed) */\n  contextTitle?:    string\n  contextSubtitle?: string\n  contextStatus?:   string\n\n  /** Show the WhatsApp-style thread list as the home screen.\n   *  Use when users can have more than one thread on this profile\n   *  (e.g. one thread per support ticket, one per booking). */\n  showChatList?: boolean\n\n  /** Stable item ID — pins this conversation to a specific item/thread.\n   *  When showChatList is also true, the widget opens this thread immediately\n   *  but the user can navigate back to the full list. */\n  subjectId?: string\n}\n\n/**\n * General-purpose support chat widget. Only `url` and `profileId` are required.\n * All other props are optional — anonymous guests work without any configuration.\n *\n * @example Basic support chat\n * ```tsx\n * <ChatWidget\n *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}\n *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}\n *   userId={session?.user.id}\n *   userName={session?.user.name}\n *   userEmail={session?.user.email}\n * />\n * ```\n *\n * @example Multi-thread (tickets, bookings, orders)\n * ```tsx\n * <ChatWidget\n *   url={...} profileId={...}\n *   showChatList\n *   subjectId={`ticket_${ticket.id}`}\n *   contextTitle={ticket.title}\n *   contextStatus={ticket.status}\n *   userId={session?.user.id}\n * />\n * ```\n */\nexport function ChatWidget({\n  url, profileId,\n  userId, userName, userEmail, userAvatar,\n  contextTitle, contextSubtitle, contextStatus,\n  showChatList, subjectId,\n  accent, launcher, position, quickReplies, height = '100%',\n  i18n, translateLang,\n}: ChatWidgetProps): JSX.Element {\n  const ref       = useRef<HTMLDivElement>(null)\n  const handleRef = useRef<WidgetHandle | null>(null)\n\n  useEffect(() => {\n    if (!ref.current) return\n    handleRef.current = mount({\n      el: ref.current,\n      url,\n      profileId,\n      ...(subjectId ? { subjectId }    : {}),\n      ...(userId    ? { token: userId } : {}),\n      ...(userId || userName || userEmail || userAvatar ? {\n        user: {\n          ...(userName   ? { name:   userName }   : {}),\n          ...(userEmail  ? { email:  userEmail }  : {}),\n          ...(userAvatar ? { avatar: userAvatar } : {}),\n        },\n      } : {}),\n      ...(contextTitle ? {\n        subject: {\n          title: contextTitle,\n          ...(contextSubtitle ? { subtitle: contextSubtitle } : {}),\n          ...(contextStatus   ? { status:   contextStatus }   : {}),\n        },\n      } : {}),\n      ...(showChatList   ? { showChatList: true }                          : {}),\n      ...(quickReplies   ? { quickReplies }                                : {}),\n      ...(accent         ? { accent }                                      : {}),\n      ...(translateLang  ? { translateLang }                               : {}),\n      ...(i18n           ? { i18n }                                        : {}),\n      ...(launcher       ? { launcher, position: position ?? 'bottom-right' } : {}),\n    })\n    return () => { handleRef.current?.close(); handleRef.current = null }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [url, profileId, subjectId, userId])\n\n  if (launcher) return <></>\n  return (\n    <div\n      ref={ref}\n      style={{ width: '100%', height, minHeight: height === '100%' ? '480px' : undefined }}\n    />\n  )\n}\n\n// ── MarketplaceChat ───────────────────────────────────────────────────────────\n\nexport interface MarketplaceChatProps extends BaseProps {\n  /** Unique ID for this listing — each listing gets its own thread.\n   *  Omit for a general (non-item-specific) conversation. */\n  listingId?:     string\n  /** Shown at the top of the chat — e.g. \"2019 Toyota Camry SE\" */\n  listingTitle?:  string\n  /** One-line detail — e.g. \"45,000 km · Automatic\" */\n  listingMeta?:   string\n  /** Price shown as a tag — e.g. 12500 → \"$12,500\" */\n  listingPrice?:  number\n  /** Status badge — e.g. \"Available\", \"Sold\", \"Pending\" */\n  listingStatus?: string\n}\n\nconst DEFAULT_MARKETPLACE_REPLIES = [\n  'Is this still available?',\n  'Can I schedule a viewing?',\n  'What is your best price?',\n]\n\n/**\n * Marketplace chat — one thread per listing, guests can switch between all\n * their active threads via a WhatsApp-style list. Only `url` and `profileId`\n * are required. All other props are optional.\n *\n * @example Used car listing\n * ```tsx\n * <MarketplaceChat\n *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}\n *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}\n *   listingId={car.id}\n *   listingTitle={car.title}\n *   listingPrice={car.price}\n *   listingMeta={`${car.mileage.toLocaleString()} km · ${car.transmission}`}\n *   listingStatus=\"Available\"\n *   userId={session?.user.id}\n *   userName={session?.user.name}\n *   userEmail={session?.user.email}\n * />\n * ```\n */\nexport function MarketplaceChat({\n  url, profileId,\n  listingId, listingTitle, listingMeta, listingPrice, listingStatus,\n  userId, userName, userEmail, userAvatar,\n  accent, launcher, position, quickReplies, height = '100%',\n  i18n, translateLang,\n}: MarketplaceChatProps): JSX.Element {\n  const ref       = useRef<HTMLDivElement>(null)\n  const handleRef = useRef<WidgetHandle | null>(null)\n\n  useEffect(() => {\n    if (!ref.current) return\n    handleRef.current = mount({\n      el: ref.current,\n      url,\n      profileId,\n      ...(listingId ? { subjectId: `listing_${listingId}` } : {}),\n      ...(userId    ? { token: userId }                     : {}),\n      ...(userId || userName || userEmail || userAvatar ? {\n        user: {\n          ...(userName   ? { name:   userName }   : {}),\n          ...(userEmail  ? { email:  userEmail }  : {}),\n          ...(userAvatar ? { avatar: userAvatar } : {}),\n          ...(listingId  ? { meta: { listingId } } : {}),\n        },\n      } : {}),\n      ...(listingTitle ? {\n        subject: {\n          title: listingTitle,\n          ...(listingMeta   ? { subtitle: listingMeta }                       : {}),\n          ...(listingPrice  ? { tags: [`$${listingPrice.toLocaleString()}`] } : {}),\n          ...(listingStatus ? { status:   listingStatus }                     : {}),\n        },\n      } : {}),\n      showChatList:  true,\n      quickReplies:  quickReplies ?? DEFAULT_MARKETPLACE_REPLIES,\n      ...(accent        ? { accent }                                       : {}),\n      ...(translateLang ? { translateLang }                                : {}),\n      ...(i18n          ? { i18n }                                         : {}),\n      ...(launcher      ? { launcher, position: position ?? 'bottom-right' } : {}),\n    })\n    return () => { handleRef.current?.close(); handleRef.current = null }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [url, profileId, listingId, userId])\n\n  if (launcher) return <></>\n  return (\n    <div\n      ref={ref}\n      style={{ width: '100%', height, minHeight: height === '100%' ? '480px' : undefined }}\n    />\n  )\n}\n"],"names":["ChatWidget","url","profileId","userId","userName","userEmail","userAvatar","contextTitle","contextSubtitle","contextStatus","showChatList","subjectId","accent","launcher","position","quickReplies","height","i18n","translateLang","ref","useRef","handleRef","useEffect","mount","_a","jsx","Fragment","DEFAULT_MARKETPLACE_REPLIES","MarketplaceChat","listingId","listingTitle","listingMeta","listingPrice","listingStatus"],"mappings":"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"}

package/dist/renderer.d.ts

@@ -0,0 +1,159 @@
+import type { AnnotationStroke } from './protocol/index.js';
+import type { ChatStore } from './store.js';
+export interface WidgetConfig {
+    subject?: {
+        title?: string;
+        subtitle?: string;
+        tags?: string[];
+        status?: string;
+        ownerLabel?: string;
+    };
+    quickReplies?: string[];
+    accent?: string;
+    /** Identified user info — shown as the guest avatar/name in the widget header. */
+    userInfo?: {
+        name?: string;
+        avatar?: string;
+    };
+    /** i18n string overrides */
+    i18n?: {
+        placeholder?: string;
+        send?: string;
+        offline?: string;
+        poweredBy?: string;
+    };
+}
+export interface RendererHandlers {
+    onSend(text: string): void;
+    onAttach?(file: File): void;
+    onInvoke(actionId: string, inputs?: Record<string, unknown>): void;
+    onTyping(isTyping: boolean): void;
+    onReadUpTo(seq: number): void;
+    onReact?(messageId: string, emoji: string, remove: boolean): void;
+    onCsat?(score: number): void;
+    onLoadMore?(): void;
+    onEdit?(messageId: string, newText: string): void;
+    onDelete?(messageId: string): void;
+    /** Co-browsing: a freehand stroke was completed on the shared whiteboard. */
+    onAnnotate?(stroke: Omit<AnnotationStroke, 'by'>): void;
+    /** Co-browsing: clear the shared whiteboard for everyone. */
+    onAnnotateClear?(): void;
+    /** Translate a message's text for display. Return null if unavailable —
+     *  the renderer shows a brief "unavailable" hint and leaves the original. */
+    onTranslate?(text: string): Promise<string | null>;
+    /** Multi-subject chat list (e.g. a marketplace with one thread per item):
+     *  fetch the guest's other conversations. Omit to hide the list button
+     *  entirely — single-conversation embeds don't need this. */
+    onListChats?(): Promise<ChatListEntry[]>;
+    /** Switch the active conversation to a different one from the list —
+     *  effectively a re-open with a different subjectId. */
+    onSwitchChat?(entry: ChatListEntry): void;
+}
+export interface ChatListEntry {
+    id: string;
+    subjectId?: string;
+    subjectTitle?: string;
+    state: string;
+    updatedAt: number;
+    /** Server-assigned highest message seq — used to compute unread count. */
+    lastSeq?: number;
+    /** Snippet of the last message text — shown as preview in the list row. */
+    lastMessage?: string;
+}
+/** Renders a ChatStore into a host element in the Image-1 layout: header →
+ *  subject card → action chips → chat → quick replies → input. Self-injects its
+ *  stylesheet so it looks right wherever it mounts. Accent comes from the
+ *  dashboard-authored profile theme (via the manifest), falling back to config. */
+export declare class Renderer {
+    private readonly root;
+    private readonly me;
+    private readonly h;
+    private readonly cfg;
+    private readonly scroll;
+    private readonly chips;
+    private readonly typing;
+    private readonly quick;
+    private readonly formHost;
+    private readonly csatPanel;
+    private readonly offlinePanel;
+    private readonly footer;
+    private readonly input;
+    private readonly subjectCard;
+    private readonly e2eBadge;
+    private readonly statusBadge;
+    private readonly headerName;
+    private readonly connStatus;
+    private typingTimer;
+    private csatSubmitted;
+    private readonly cobrowseBtn;
+    private readonly cobrowseCanvas;
+    private readonly cobrowseToolbar;
+    private readonly cobrowseHint;
+    private cobrowseActive;
+    private cobrowseColor;
+    private lastAnnotationVersion;
+    private storeRef;
+    private scrollCleanup;
+    /** Returns the scroll container so history.ts can attach scroll listeners. */
+    getScrollEl(): HTMLElement | null;
+    /** Registers a cleanup fn removed on destroy() to prevent listener leaks. */
+    setScrollCleanup(fn: () => void): void;
+    private readonly translationCache;
+    private readonly showingTranslation;
+    private listScreen;
+    private chatScreen;
+    private listBody;
+    private listSearch;
+    private backBtn;
+    private activeChatId;
+    private inChatScreen;
+    private allEntries;
+    /** Last seq the guest has seen per conversationId — used to compute unread badges. */
+    private readonly seenSeq;
+    private seenSeqKey;
+    /** Load seenSeq from localStorage (keyed by userId+profileId). */
+    initSeenSeq(key: string): void;
+    setSeenSeq(conversationId: string, seq: number): void;
+    constructor(root: HTMLElement, me: string, h: RendererHandlers, cfg?: WidgetConfig);
+    /** Fetch the list and re-render it. Called on mount and after switching chats. */
+    private destroyed;
+    /** Call when the widget is unmounted. Disconnects scroll listeners and
+     *  prevents in-flight fetches from writing to dead DOM. */
+    destroy(): void;
+    refreshList(): void;
+    /** Render list rows, optionally filtered by search query. */
+    private renderListRows;
+    private isUnread;
+    /** Build a single WhatsApp-style conversation row. */
+    private buildRow;
+    /** Returns true when the chat screen is visible (not the list). */
+    isInChatScreen(): boolean;
+    /** Navigate to the chat screen (slide list left, slide chat in from right). */
+    showChatScreen(): void;
+    /** Navigate back to the list screen. */
+    showListScreen(): void;
+    private flushSend;
+    private signalTyping;
+    render(store: ChatStore): void;
+    setConnStatus(status: 'connecting' | 'open' | 'reconnecting'): void;
+    private buildOfflinePanel;
+    private buildCsatPanel;
+    private subjectBuilt;
+    /** Subject card from the server's Subject entity (per chatroom), with the
+     *  mount config as a fallback. Built once when data first arrives. */
+    private updateCobrowseUI;
+    private resizeCobrowseCanvas;
+    /** Draw a stroke whose points are normalized to 0..1, scaled to the current
+     *  canvas size — so strokes line up across different viewport sizes. */
+    private drawStroke;
+    private redrawCobrowse;
+    private bindCobrowsePointerEvents;
+    private buildSubjectCard;
+    private chipEl;
+    /** In-widget confirmation modal (replaces window.confirm). */
+    private confirm;
+    /** Inline form for a form-effect action: typed inputs (date picker, number,
+     *  text) rendered above the composer — no browser prompts. */
+    private openForm;
+    private messageEl;
+}

package/dist/store.d.ts

@@ -0,0 +1,48 @@
+import type { ServerFrame, Message, ManifestAction, MessageContent, ConversationId, UserId, Subject, AnnotationStroke } from './protocol/index.js';
+export type SendStatus = 'pending' | 'sent' | 'delivered' | 'read';
+export interface RenderMessage extends Message {
+    clientMsgId?: string;
+    status?: SendStatus;
+}
+/** Pure, DOM-free conversation state. Feed it ServerFrames (and local optimistic
+ *  sends); read an ordered, de-duplicated view out. Ordering is by `seq`; the
+ *  same message arriving twice (live + sync on reconnect) is collapsed by id —
+ *  the structural fix for the old duplicate-bubble bug. */
+export declare class ChatStore {
+    private readonly me;
+    conversationId?: ConversationId;
+    state: string;
+    version: number;
+    hasMoreHistory: boolean;
+    lastReadByOthers: number;
+    assignedAgentId: UserId | undefined;
+    accent: string | undefined;
+    subject: Subject | undefined;
+    name: string | undefined;
+    e2e: boolean;
+    offline: boolean;
+    offlineMessage: string;
+    whiteLabel: boolean;
+    readonly typing: Set<string>;
+    readonly online: Set<string>;
+    /** Co-browsing: shared whiteboard strokes for this conversation. */
+    annotations: AnnotationStroke[];
+    /** Bumped on any annotation change so the renderer can cheaply detect updates. */
+    annotationVersion: number;
+    /** Live sentiment of the guest's latest message (agent-side only). */
+    sentiment: 'positive' | 'neutral' | 'frustrated' | undefined;
+    sentimentScore: number | undefined;
+    private actions;
+    private readonly byId;
+    private readonly keyByClient;
+    private _maxSeq;
+    private _sorted;
+    constructor(me: UserId);
+    messages(): RenderMessage[];
+    visibleActions(): ManifestAction[];
+    highestSeq(): number;
+    addOptimistic(clientMsgId: string, content: MessageContent): RenderMessage;
+    apply(frame: ServerFrame): void;
+    private upsert;
+    private markOwnStatus;
+}

package/package.json

@@ -1,6 +1,29 @@
 {
   "name": "@paramms/chat-widget",
-  "version": "0.1.0",
+  "version": "1.0.0",
+  "description": "Embeddable real-time chat widget for the Relay platform",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/paramms/objectchat"
+  },
+  "keywords": ["chat", "widget", "relay", "customer-support", "live-chat"],
+  "files": [
+    "dist/index.js",
+    "dist/index.js.map",
+    "dist/index.d.ts",
+    "dist/react.js",
+    "dist/react.js.map",
+    "dist/react.d.ts",
+    "dist/store.d.ts",
+    "dist/connection.d.ts",
+    "dist/history.d.ts",
+    "dist/outbox.d.ts",
+    "dist/renderer.d.ts",
+    "dist/crypto.d.ts",
+    "dist/e2e.d.ts",
+    "dist/protocol"
+  ],
   "type": "module",
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json --emitDeclarationOnly && node build-preview.js",

package/build-preview.js

@@ -1,136 +0,0 @@
-// build-preview.js — generates dist/index.html after vite library build.
-//
-// Two modes, chosen by URL at load time (not build time):
-//   - relay.paramms.com               → marketing/install-guide landing page
-//   - relay.paramms.com/?profileId=x  → just the widget, in a contained card
-//     (this is the URL the dashboard's "Preview" link and shared test links
-//     use — should look exactly like the widget would look embedded on a
-//     real page, not a full-bleed app)
-import { writeFileSync, mkdirSync } from 'node:fs'
-
-mkdirSync('dist', { recursive: true })
-
-const html = `<!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
-    mount({
-      el: app,
-      url: wsUrl,
-      profileId: profileId || 'p_hotel',
-      ...(subjectId ? { subjectId } : {}),
-      accent: q.get('accent') || '#4F63F5',
-      showChatList: q.get('chatList') !== 'off',
-    })
-  </script>
-</body>
-</html>`
-
-writeFileSync('dist/index.html', html)
-console.log('✓ dist/index.html written')

package/index.html

@@ -1,37 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Relay widget</title>
-  <style>
-    body { margin:0; background:#e9ebef; font-family:system-ui,sans-serif; }
-    #app { width:390px; height:720px; margin:24px auto; border-radius:22px; overflow:hidden;
-           box-shadow:0 18px 50px rgba(0,0,0,.18); background:#fff; }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module">
-    import { mount } from './src/index.ts'
-    const q = new URLSearchParams(location.search)
-    const subjectId = q.get('subjectId') || undefined
-    const title = q.get('title')
-    mount({
-      el: document.getElementById('app'),
-      url: q.get('url') || import.meta.env.VITE_SERVER_URL || 'ws://localhost:3000/ws',
-      profileId: q.get('profileId') || import.meta.env.VITE_PROFILE_ID || 'p_hotel',
-      ...(subjectId ? { subjectId } : {}),
-      accent: q.get('accent') || '#4F63F5',
-      ...(title ? { subject: {
-        ownerLabel: q.get('owner') || undefined,
-        title,
-        subtitle: q.get('subtitle') || '',
-        status: q.get('status') || '',
-        tags: (q.get('tags') || '').split(',').filter(Boolean),
-      } } : {}),
-      quickReplies: (q.get('quick') || '').split(',').filter(Boolean),
-    })
-  </script>
-</body>
-</html>