@paramms/chat-widget 1.0.1 → 1.0.2

package/dist/react.js

@@ -1,143 +1,143 @@
-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,
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as d, useEffect as _ } from "react";
+import { mount as $ } from "./index.js";
+function x({
+  url: u,
+  profileId: w,
   userId: t,
-  userName: i,
-  userEmail: c,
-  userAvatar: u,
-  contextTitle: p,
+  userName: h,
+  userEmail: f,
+  userAvatar: c,
+  contextTitle: m,
   contextSubtitle: o,
-  contextStatus: h,
-  showChatList: b,
-  subjectId: n,
-  accent: C,
-  launcher: r,
-  position: _,
+  contextStatus: l,
+  showChatList: p,
+  subjectId: e,
+  accent: b,
+  launcher: n,
+  position: k,
   quickReplies: L,
-  height: s = "100%",
-  i18n: w,
-  translateLang: R
+  height: v = "100%",
+  i18n: C,
+  translateLang: s
 }) {
-  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 } : {},
+  const r = d(null), i = d(null);
+  return _(() => {
+    if (r.current)
+      return i.current = $({
+        el: r.current,
+        url: u,
+        profileId: w,
+        ...e ? { subjectId: e } : {},
         ...t ? { token: t } : {},
-        ...t || i || c || u ? {
+        ...t || h || f || c ? {
           user: {
-            ...i ? { name: i } : {},
-            ...c ? { email: c } : {},
-            ...u ? { avatar: u } : {}
+            ...h ? { name: h } : {},
+            ...f ? { email: f } : {},
+            ...c ? { avatar: c } : {}
           }
         } : {},
-        ...p ? {
+        ...m ? {
           subject: {
-            title: p,
+            title: m,
             ...o ? { subtitle: o } : {},
-            ...h ? { status: h } : {}
+            ...l ? { status: l } : {}
           }
         } : {},
-        ...b ? { showChatList: !0 } : {},
+        ...p ? { showChatList: !0 } : {},
         ...L ? { quickReplies: L } : {},
-        ...C ? { accent: C } : {},
-        ...R ? { translateLang: R } : {},
-        ...w ? { i18n: w } : {},
-        ...r ? { launcher: r, position: _ ?? "bottom-right" } : {}
+        ...b ? { accent: b } : {},
+        ...s ? { translateLang: s } : {},
+        ...C ? { i18n: C } : {},
+        ...n ? { launcher: n, position: k ?? "bottom-right" } : {}
       }), () => {
-        var v;
-        (v = f.current) == null || v.close(), f.current = null;
+        var R;
+        (R = i.current) == null || R.close(), i.current = null;
       };
-  }, [l, m, n, t]), r ? /* @__PURE__ */ k($, {}) : /* @__PURE__ */ k(
+  }, [u, w, e, t]), /* @__PURE__ */ y(
     "div",
     {
-      ref: e,
-      style: { width: "100%", height: s, minHeight: s === "100%" ? "480px" : void 0 }
+      ref: r,
+      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: v, minHeight: v === "100%" ? "480px" : void 0 }
     }
   );
 }
-const F = [
+const j = [
   "Is this still available?",
   "Can I schedule a viewing?",
   "What is your best price?"
 ];
-function K({
-  url: l,
-  profileId: m,
+function D({
+  url: u,
+  profileId: w,
   listingId: t,
-  listingTitle: i,
-  listingMeta: c,
-  listingPrice: u,
-  listingStatus: p,
+  listingTitle: h,
+  listingMeta: f,
+  listingPrice: c,
+  listingStatus: m,
   userId: o,
-  userName: h,
-  userEmail: b,
-  userAvatar: n,
-  accent: C,
-  launcher: r,
-  position: _,
+  userName: l,
+  userEmail: p,
+  userAvatar: e,
+  accent: b,
+  launcher: n,
+  position: k,
   quickReplies: L,
-  height: s = "100%",
-  i18n: w,
-  translateLang: R
+  height: v = "100%",
+  i18n: C,
+  translateLang: s
 }) {
-  const e = y(null), f = y(null);
-  return j(() => {
-    if (e.current)
-      return f.current = E({
-        el: e.current,
-        url: l,
-        profileId: m,
+  const r = d(null), i = d(null);
+  return _(() => {
+    if (r.current)
+      return i.current = $({
+        el: r.current,
+        url: u,
+        profileId: w,
         // ── Listing context ────────────────────────────────────────────────────
         // When listingId is present: open that listing's chat directly (no list).
         // When listingId is absent: show the thread list (dedicated inbox page).
         ...t ? { subjectId: `listing_${t}` } : {},
         ...o ? { token: o } : {},
-        ...o || h || b || n ? {
+        ...o || l || p || e ? {
           user: {
-            ...h ? { name: h } : {},
-            ...b ? { email: b } : {},
-            ...n ? { avatar: n } : {},
+            ...l ? { name: l } : {},
+            ...p ? { email: p } : {},
+            ...e ? { avatar: e } : {},
             ...t ? { meta: { listingId: t } } : {}
           }
         } : {},
-        ...i ? {
+        ...h ? {
           subject: {
-            title: i,
-            ...c ? { subtitle: c } : {},
-            ...u ? { tags: [`$${u.toLocaleString()}`] } : {},
-            ...p ? { status: p } : {}
+            title: h,
+            ...f ? { subtitle: f } : {},
+            ...c ? { tags: [`$${c.toLocaleString()}`] } : {},
+            ...m ? { status: m } : {}
           }
         } : {},
         // showChatList is true in both cases but behaves differently:
         // • With subjectId → chat screen shown immediately on open (in index.ts)
         // • Without subjectId → list screen is home (the dedicated inbox case)
         showChatList: !0,
-        quickReplies: L ?? F,
-        ...C ? { accent: C } : {},
-        ...R ? { translateLang: R } : {},
-        ...w ? { i18n: w } : {},
-        ...r ? { launcher: r, position: _ ?? "bottom-right" } : {}
+        quickReplies: L ?? j,
+        ...b ? { accent: b } : {},
+        ...s ? { translateLang: s } : {},
+        ...C ? { i18n: C } : {},
+        ...n ? { launcher: n, position: k ?? "bottom-right" } : {}
       }), () => {
-        var v;
-        (v = f.current) == null || v.close(), f.current = null;
+        var R;
+        (R = i.current) == null || R.close(), i.current = null;
       };
-  }, [l, m, t, o]), r ? /* @__PURE__ */ k($, {}) : /* @__PURE__ */ k(
+  }, [u, w, t, o]), /* @__PURE__ */ y(
     "div",
     {
-      ref: e,
-      style: { width: "100%", height: s, minHeight: s === "100%" ? "480px" : void 0 }
+      ref: r,
+      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: v, minHeight: v === "100%" ? "480px" : void 0 }
     }
   );
 }
 export {
-  D as ChatWidget,
-  K as MarketplaceChat
+  x as ChatWidget,
+  D as MarketplaceChat
 };
 //# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -1 +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 widget. Two modes depending on whether `listingId` is provided:\n *\n * **With `listingId` (listing page)** — opens that listing's chat immediately.\n * No list screen. The buyer is already looking at the item so context is clear.\n * ```tsx\n * // On your listing detail page:\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.gearbox}`}\n *   listingStatus=\"Available\"\n *   userId={session?.user.id}\n *   userName={session?.user.name}\n *   userEmail={session?.user.email}\n * />\n * ```\n *\n * **Without `listingId` (My Messages / inbox page)** — shows the WhatsApp-style\n * thread list as the home screen. No conversation is opened until the user taps one.\n * Use this on a dedicated `/messages` or `/inbox` page.\n * ```tsx\n * // On your /messages page:\n * <MarketplaceChat\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 * />\n * ```\n *\n * Only `url` and `profileId` are required. All other props are optional.\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\n      // ── Listing context ────────────────────────────────────────────────────\n      // When listingId is present: open that listing's chat directly (no list).\n      // When listingId is absent: show the thread list (dedicated inbox page).\n      ...(listingId ? { subjectId: `listing_${listingId}` } : {}),\n\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\n      ...(listingTitle ? {\n        subject: {\n          title: listingTitle,\n          ...(listingMeta   ? { subtitle: listingMeta }                       : {}),\n          ...(listingPrice  ? { tags: [`$${listingPrice.toLocaleString()}`] } : {}),\n          ...(listingStatus ? { status:   listingStatus }                     : {}),\n        },\n      } : {}),\n\n      // showChatList is true in both cases but behaves differently:\n      // • With subjectId → chat screen shown immediately on open (in index.ts)\n      // • Without subjectId → list screen is home (the dedicated inbox case)\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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"}
+{"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  // When launcher=true, still render the div — mount() moves it inside the\n  // fixed panel above the bubble. Zero size so it doesn't affect page layout.\n  return (\n    <div\n      ref={ref}\n      style={launcher ? { width: 0, height: 0, overflow: 'hidden' } : { 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 widget. Two modes depending on whether `listingId` is provided:\n *\n * **With `listingId` (listing page)** — opens that listing's chat immediately.\n * No list screen. The buyer is already looking at the item so context is clear.\n * ```tsx\n * // On your listing detail page:\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.gearbox}`}\n *   listingStatus=\"Available\"\n *   userId={session?.user.id}\n *   userName={session?.user.name}\n *   userEmail={session?.user.email}\n * />\n * ```\n *\n * **Without `listingId` (My Messages / inbox page)** — shows the WhatsApp-style\n * thread list as the home screen. No conversation is opened until the user taps one.\n * Use this on a dedicated `/messages` or `/inbox` page.\n * ```tsx\n * // On your /messages page:\n * <MarketplaceChat\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 * />\n * ```\n *\n * Only `url` and `profileId` are required. All other props are optional.\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\n      // ── Listing context ────────────────────────────────────────────────────\n      // When listingId is present: open that listing's chat directly (no list).\n      // When listingId is absent: show the thread list (dedicated inbox page).\n      ...(listingId ? { subjectId: `listing_${listingId}` } : {}),\n\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\n      ...(listingTitle ? {\n        subject: {\n          title: listingTitle,\n          ...(listingMeta   ? { subtitle: listingMeta }                       : {}),\n          ...(listingPrice  ? { tags: [`$${listingPrice.toLocaleString()}`] } : {}),\n          ...(listingStatus ? { status:   listingStatus }                     : {}),\n        },\n      } : {}),\n\n      // showChatList is true in both cases but behaves differently:\n      // • With subjectId → chat screen shown immediately on open (in index.ts)\n      // • Without subjectId → list screen is home (the dedicated inbox case)\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  // When launcher=true, still render the div — mount() moves it inside the\n  // fixed panel above the bubble. Zero size so it doesn't affect page layout.\n  return (\n    <div\n      ref={ref}\n      style={launcher ? { width: 0, height: 0, overflow: 'hidden' } : { 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","DEFAULT_MARKETPLACE_REPLIES","MarketplaceChat","listingId","listingTitle","listingMeta","listingPrice","listingStatus"],"mappings":";;;AAkGO,SAASA,EAAW;AAAA,EACzB,KAAAC;AAAA,EAAK,WAAAC;AAAA,EACL,QAAAC;AAAA,EAAQ,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,YAAAC;AAAA,EAC7B,cAAAC;AAAA,EAAc,iBAAAC;AAAA,EAAiB,eAAAC;AAAA,EAC/B,cAAAC;AAAA,EAAc,WAAAC;AAAA,EACd,QAAAC;AAAA,EAAQ,UAAAC;AAAA,EAAU,UAAAC;AAAA,EAAU,cAAAC;AAAA,EAAc,QAAAC,IAAS;AAAA,EACnD,MAAAC;AAAA,EAAM,eAAAC;AACR,GAAiC;AAC/B,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAYD,EAA4B,IAAI;AAElD,SAAAE,EAAU,MAAM;AACd,QAAKH,EAAI;AACT,aAAAE,EAAU,UAAUE,EAAM;AAAA,QACxB,IAAIJ,EAAI;AAAA,QACR,KAAAlB;AAAA,QACA,WAAAC;AAAA,QACA,GAAIS,IAAY,EAAE,WAAAA,EAAA,IAAiB,CAAA;AAAA,QACnC,GAAIR,IAAY,EAAE,OAAOA,EAAA,IAAW,CAAA;AAAA,QACpC,GAAIA,KAAUC,KAAYC,KAAaC,IAAa;AAAA,UAClD,MAAM;AAAA,YACJ,GAAIF,IAAa,EAAE,MAAQA,EAAA,IAAe,CAAA;AAAA,YAC1C,GAAIC,IAAa,EAAE,OAAQA,EAAA,IAAe,CAAA;AAAA,YAC1C,GAAIC,IAAa,EAAE,QAAQA,MAAe,CAAA;AAAA,UAAC;AAAA,QAC7C,IACE,CAAA;AAAA,QACJ,GAAIC,IAAe;AAAA,UACjB,SAAS;AAAA,YACP,OAAOA;AAAA,YACP,GAAIC,IAAkB,EAAE,UAAUA,EAAA,IAAoB,CAAA;AAAA,YACtD,GAAIC,IAAkB,EAAE,QAAUA,MAAoB,CAAA;AAAA,UAAC;AAAA,QACzD,IACE,CAAA;AAAA,QACJ,GAAIC,IAAiB,EAAE,cAAc,GAAA,IAAkC,CAAA;AAAA,QACvE,GAAIK,IAAiB,EAAE,cAAAA,EAAA,IAAgD,CAAA;AAAA,QACvE,GAAIH,IAAiB,EAAE,QAAAA,EAAA,IAAgD,CAAA;AAAA,QACvE,GAAIM,IAAiB,EAAE,eAAAA,EAAA,IAAgD,CAAA;AAAA,QACvE,GAAID,IAAiB,EAAE,MAAAA,EAAA,IAAgD,CAAA;AAAA,QACvE,GAAIJ,IAAiB,EAAE,UAAAA,GAAU,UAAUC,KAAY,eAAA,IAAmB,CAAA;AAAA,MAAC,CAC5E,GACM,MAAM;;AAAE,SAAAU,IAAAH,EAAU,YAAV,QAAAG,EAAmB,SAASH,EAAU,UAAU;AAAA,MAAK;AAAA,EAEtE,GAAG,CAACpB,GAAKC,GAAWS,GAAWR,CAAM,CAAC,GAKpC,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,OAAON,IAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,SAAA,IAAa,EAAE,OAAO,QAAQ,QAAAG,GAAQ,WAAWA,MAAW,SAAS,UAAU,OAAA;AAAA,IAAU;AAAA,EAAA;AAGlJ;AAkBA,MAAMU,IAA8B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAsCO,SAASC,EAAgB;AAAA,EAC9B,KAAA1B;AAAA,EAAK,WAAAC;AAAA,EACL,WAAA0B;AAAA,EAAW,cAAAC;AAAA,EAAc,aAAAC;AAAA,EAAa,cAAAC;AAAA,EAAc,eAAAC;AAAA,EACpD,QAAA7B;AAAA,EAAQ,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,YAAAC;AAAA,EAC7B,QAAAM;AAAA,EAAQ,UAAAC;AAAA,EAAU,UAAAC;AAAA,EAAU,cAAAC;AAAA,EAAc,QAAAC,IAAS;AAAA,EACnD,MAAAC;AAAA,EAAM,eAAAC;AACR,GAAsC;AACpC,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAYD,EAA4B,IAAI;AAElD,SAAAE,EAAU,MAAM;AACd,QAAKH,EAAI;AACT,aAAAE,EAAU,UAAUE,EAAM;AAAA,QACxB,IAAIJ,EAAI;AAAA,QACR,KAAAlB;AAAA,QACA,WAAAC;AAAA;AAAA;AAAA;AAAA,QAKA,GAAI0B,IAAY,EAAE,WAAW,WAAWA,CAAS,GAAA,IAAO,CAAA;AAAA,QAExD,GAAIzB,IAAY,EAAE,OAAOA,EAAA,IAAW,CAAA;AAAA,QACpC,GAAIA,KAAUC,KAAYC,KAAaC,IAAa;AAAA,UAClD,MAAM;AAAA,YACJ,GAAIF,IAAa,EAAE,MAAQA,EAAA,IAAe,CAAA;AAAA,YAC1C,GAAIC,IAAa,EAAE,OAAQA,EAAA,IAAe,CAAA;AAAA,YAC1C,GAAIC,IAAa,EAAE,QAAQA,EAAA,IAAe,CAAA;AAAA,YAC1C,GAAIsB,IAAa,EAAE,MAAM,EAAE,WAAAA,EAAA,EAAU,IAAM,CAAA;AAAA,UAAC;AAAA,QAC9C,IACE,CAAA;AAAA,QAEJ,GAAIC,IAAe;AAAA,UACjB,SAAS;AAAA,YACP,OAAOA;AAAA,YACP,GAAIC,IAAgB,EAAE,UAAUA,EAAA,IAAsC,CAAA;AAAA,YACtE,GAAIC,IAAgB,EAAE,MAAM,CAAC,IAAIA,EAAa,eAAA,CAAgB,EAAE,EAAA,IAAM,CAAA;AAAA,YACtE,GAAIC,IAAgB,EAAE,QAAUA,MAAsC,CAAA;AAAA,UAAC;AAAA,QACzE,IACE,CAAA;AAAA;AAAA;AAAA;AAAA,QAKJ,cAAe;AAAA,QACf,cAAejB,KAAgBW;AAAA,QAC/B,GAAId,IAAgB,EAAE,QAAAA,EAAA,IAAmD,CAAA;AAAA,QACzE,GAAIM,IAAgB,EAAE,eAAAA,EAAA,IAAmD,CAAA;AAAA,QACzE,GAAID,IAAgB,EAAE,MAAAA,EAAA,IAAmD,CAAA;AAAA,QACzE,GAAIJ,IAAgB,EAAE,UAAAA,GAAU,UAAUC,KAAY,eAAA,IAAmB,CAAA;AAAA,MAAC,CAC3E,GACM,MAAM;;AAAE,SAAAU,IAAAH,EAAU,YAAV,QAAAG,EAAmB,SAASH,EAAU,UAAU;AAAA,MAAK;AAAA,EAEtE,GAAG,CAACpB,GAAKC,GAAW0B,GAAWzB,CAAM,CAAC,GAKpC,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,OAAON,IAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,SAAA,IAAa,EAAE,OAAO,QAAQ,QAAAG,GAAQ,WAAWA,MAAW,SAAS,UAAU,OAAA;AAAA,IAAU;AAAA,EAAA;AAGlJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paramms/chat-widget",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Embeddable real-time chat widget for the Relay platform",
   "license": "MIT",
   "repository": {