@paramms/chat-widget 1.0.6 → 1.0.8

package/dist/protocol/entities.d.ts

@@ -104,6 +104,9 @@ export interface Subject {
     title: string;
     state: string;
     fields: Record<string, string | number | boolean>;
+    /** URL of the page where the subject lives (e.g. the listing page URL).
+     *  Captured automatically by the widget and stored on first open. */
+    url?: string;
     createdAt: number;
     updatedAt: number;
 }

package/dist/protocol/frames.d.ts

@@ -12,6 +12,8 @@ export type ClientFrame = {
     profileId?: ProfileId;
     pageUrl?: string;
     pageTitle?: string;
+    subjectTitle?: string;
+    subjectMeta?: string;
 } | {
     type: 'send';
     conversationId: ConversationId;

package/dist/react.d.ts

@@ -34,13 +34,7 @@ export interface ChatWidgetProps extends BaseProps {
     contextTitle?: string;
     contextSubtitle?: string;
     contextStatus?: string;
-    /** Show the WhatsApp-style thread list as the home screen.
-     *  Use when users can have more than one thread on this profile
-     *  (e.g. one thread per support ticket, one per booking). */
-    showChatList?: boolean;
-    /** Stable item ID — pins this conversation to a specific item/thread.
-     *  When showChatList is also true, the widget opens this thread immediately
-     *  but the user can navigate back to the full list. */
+    /** Stable item ID — pins this conversation to a specific item/thread. */
     subjectId?: string;
 }
 /**
@@ -70,7 +64,7 @@ export interface ChatWidgetProps extends BaseProps {
  * />
  * ```
  */
-export declare function ChatWidget({ url, profileId, userId, userName, userEmail, userAvatar, contextTitle, contextSubtitle, contextStatus, showChatList, subjectId, accent, launcher, position, quickReplies, height, i18n, translateLang, }: ChatWidgetProps): JSX.Element;
+export declare function ChatWidget({ url, profileId, userId, userName, userEmail, userAvatar, contextTitle, contextSubtitle, contextStatus, subjectId, accent, launcher, position, quickReplies, height, i18n, translateLang, }: ChatWidgetProps): JSX.Element;
 export interface MarketplaceChatProps extends BaseProps {
     /** Unique ID for this listing — each listing gets its own thread.
      *  Omit for a general (non-item-specific) conversation. */
@@ -121,4 +115,105 @@ export interface MarketplaceChatProps extends BaseProps {
  * Only `url` and `profileId` are required. All other props are optional.
  */
 export declare function MarketplaceChat({ url, profileId, listingId, listingTitle, listingMeta, listingPrice, listingStatus, userId, userName, userEmail, userAvatar, accent, launcher, position, quickReplies, height, i18n, translateLang, }: MarketplaceChatProps): JSX.Element;
+export interface ChatAppProps {
+    /** Relay WebSocket URL — required */
+    url: string;
+    /** Your Relay profile ID — required */
+    profileId: string;
+    /** 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;
+    /** Brand colour hex — default '#f5713c' */
+    accent?: string;
+    /** Container height. Default: '100%' */
+    height?: string;
+    /** i18n overrides */
+    i18n?: import('./chatlist.js').ChatListOptions['i18n'];
+}
+/**
+ * Full chat-app component: conversation list on the left (or full screen on
+ * mobile), chat room on the right when a thread is selected.
+ *
+ * Works like a standalone messaging app — tapping a thread opens the chat
+ * inline without navigating away from the page.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import { ChatList } from '@paramms/chat-widget/react'
+ *
+ * export default function MessagesPage({ session }) {
+ *   return (
+ *     <div style={{ height: '100vh' }}>
+ *       <ChatList
+ *         url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *         profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
+ *         userId={session?.user.id}
+ *         userName={session?.user.name}
+ *         userEmail={session?.user.email}
+ *       />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function ChatApp({ url, profileId, userId, userName, userEmail, accent, height, i18n, }: ChatAppProps): JSX.Element;
+export interface ChatAppLauncherProps {
+    /** Relay WebSocket URL — required */
+    url: string;
+    /** Your Relay profile ID — required */
+    profileId: string;
+    /** Your logged-in user's stable ID */
+    userId?: string;
+    userName?: string;
+    userEmail?: string;
+    /** Brand colour hex — default '#4F63F5' */
+    accent?: string;
+    /** true  → floating bubble fixed to the corner of the screen (like Intercom)
+     *  false → an inline "Messages" button that expands a panel below it
+     *  Default: true */
+    floating?: boolean;
+    /** Only used when floating=true. Default: 'bottom-right' */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Label shown on the button. Default: '💬' for floating, 'Messages' for inline */
+    label?: string;
+    /** Width of the chat panel. Default: '420px' (floating) or '100%' (inline) */
+    panelWidth?: string;
+    /** Height of the chat panel. Default: '600px' */
+    panelHeight?: string;
+}
+/**
+ * A button that opens the full ChatApp (list → chat) in a panel.
+ *
+ * floating=true  → fixed bubble in the corner of the screen, like WhatsApp Web's
+ *                  chat button or Intercom.
+ * floating=false → an inline button (e.g. in your nav bar) that expands a panel
+ *                  below it.
+ *
+ * @example Floating bubble (bottom-right)
+ * ```tsx
+ * <ChatAppLauncher
+ *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
+ *   userId={session?.user.id}
+ *   floating
+ *   position="bottom-right"
+ * />
+ * ```
+ *
+ * @example Inline nav button
+ * ```tsx
+ * <ChatAppLauncher
+ *   url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+ *   profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
+ *   userId={session?.user.id}
+ *   floating={false}
+ *   label="Messages"
+ * />
+ * ```
+ */
+export declare function ChatAppLauncher({ url, profileId, userId, userName, userEmail, accent, floating, position, label, panelWidth, panelHeight, }: ChatAppLauncherProps): JSX.Element;
 export {};

package/dist/react.js

@@ -1,143 +1,363 @@
-import { jsx as y } from "react/jsx-runtime";
-import { useRef as d, useEffect as _ } from "react";
-import { mount as $ } from "./index.js";
-function x({
+import { jsxs as k, jsx as c, Fragment as M } from "react/jsx-runtime";
+import { useState as z, useRef as w, useEffect as j } from "react";
+import { mount as S } from "./index.js";
+function H({
   url: u,
-  profileId: w,
+  profileId: x,
   userId: t,
-  userName: h,
-  userEmail: f,
-  userAvatar: c,
-  contextTitle: m,
-  contextSubtitle: o,
-  contextStatus: l,
-  showChatList: p,
-  subjectId: e,
-  accent: b,
-  launcher: n,
-  position: k,
-  quickReplies: L,
-  height: v = "100%",
-  i18n: C,
-  translateLang: s
+  userName: r,
+  userEmail: l,
+  userAvatar: n,
+  contextTitle: g,
+  contextSubtitle: b,
+  contextStatus: e,
+  subjectId: p,
+  accent: h,
+  launcher: o,
+  position: d,
+  quickReplies: y,
+  height: s = "100%",
+  i18n: f,
+  translateLang: a
 }) {
-  const r = d(null), i = d(null);
-  return _(() => {
-    if (r.current)
-      return i.current = $({
-        el: r.current,
+  const v = w(null), i = w(null);
+  return j(() => {
+    if (v.current)
+      return i.current = S({
+        el: v.current,
         url: u,
-        profileId: w,
-        ...e ? { subjectId: e } : {},
+        profileId: x,
+        ...p ? { subjectId: p } : {},
         ...t ? { token: t } : {},
-        ...t || h || f || c ? {
+        ...t || r || l || n ? {
           user: {
-            ...h ? { name: h } : {},
-            ...f ? { email: f } : {},
-            ...c ? { avatar: c } : {}
+            ...r ? { name: r } : {},
+            ...l ? { email: l } : {},
+            ...n ? { avatar: n } : {}
           }
         } : {},
-        ...m ? {
+        ...g ? {
           subject: {
-            title: m,
-            ...o ? { subtitle: o } : {},
-            ...l ? { status: l } : {}
+            title: g,
+            ...b ? { subtitle: b } : {},
+            ...e ? { status: e } : {}
           }
         } : {},
-        ...p ? { showChatList: !0 } : {},
-        ...L ? { quickReplies: L } : {},
-        ...b ? { accent: b } : {},
-        ...s ? { translateLang: s } : {},
-        ...C ? { i18n: C } : {},
-        ...n ? { launcher: n, position: k ?? "bottom-right" } : {}
+        ...y ? { quickReplies: y } : {},
+        ...h ? { accent: h } : {},
+        ...a ? { translateLang: a } : {},
+        ...f ? { i18n: f } : {},
+        ...o ? { launcher: o, position: d ?? "bottom-right" } : {}
       }), () => {
-        var R;
-        (R = i.current) == null || R.close(), i.current = null;
+        var m;
+        (m = i.current) == null || m.close(), i.current = null;
       };
-  }, [u, w, e, t]), /* @__PURE__ */ y(
+  }, [u, x, p, t]), /* @__PURE__ */ c(
     "div",
     {
-      ref: r,
-      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: v, minHeight: v === "100%" ? "480px" : void 0 }
+      ref: v,
+      style: o ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: s, minHeight: s === "100%" ? "480px" : void 0 }
     }
   );
 }
-const j = [
+const W = [
   "Is this still available?",
   "Can I schedule a viewing?",
   "What is your best price?"
 ];
-function D({
+function _({
   url: u,
-  profileId: w,
+  profileId: x,
   listingId: t,
-  listingTitle: h,
-  listingMeta: f,
-  listingPrice: c,
-  listingStatus: m,
-  userId: o,
-  userName: l,
+  listingTitle: r,
+  listingMeta: l,
+  listingPrice: n,
+  listingStatus: g,
+  userId: b,
+  userName: e,
   userEmail: p,
-  userAvatar: e,
-  accent: b,
-  launcher: n,
-  position: k,
-  quickReplies: L,
-  height: v = "100%",
-  i18n: C,
-  translateLang: s
+  userAvatar: h,
+  accent: o,
+  launcher: d,
+  position: y,
+  quickReplies: s,
+  height: f = "100%",
+  i18n: a,
+  translateLang: v
 }) {
-  const r = d(null), i = d(null);
-  return _(() => {
-    if (r.current)
-      return i.current = $({
-        el: r.current,
+  const i = w(null), m = w(null);
+  return j(() => {
+    if (i.current)
+      return m.current = S({
+        el: i.current,
         url: u,
-        profileId: w,
+        profileId: x,
         // ── 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 || l || p || e ? {
+        ...b ? { token: b } : {},
+        ...b || e || p || h ? {
           user: {
-            ...l ? { name: l } : {},
+            ...e ? { name: e } : {},
             ...p ? { email: p } : {},
-            ...e ? { avatar: e } : {},
+            ...h ? { avatar: h } : {},
             ...t ? { meta: { listingId: t } } : {}
           }
         } : {},
-        ...h ? {
+        ...r ? {
           subject: {
-            title: h,
-            ...f ? { subtitle: f } : {},
-            ...c ? { tags: [`$${c.toLocaleString()}`] } : {},
-            ...m ? { status: m } : {}
+            title: r,
+            ...l ? { subtitle: l } : {},
+            ...n ? { tags: [`$${n.toLocaleString()}`] } : {},
+            ...g ? { status: g } : {}
           }
         } : {},
-        // 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 ?? j,
-        ...b ? { accent: b } : {},
-        ...s ? { translateLang: s } : {},
-        ...C ? { i18n: C } : {},
-        ...n ? { launcher: n, position: k ?? "bottom-right" } : {}
+        quickReplies: s ?? W,
+        ...o ? { accent: o } : {},
+        ...v ? { translateLang: v } : {},
+        ...a ? { i18n: a } : {},
+        ...d ? { launcher: d, position: y ?? "bottom-right" } : {}
       }), () => {
-        var R;
-        (R = i.current) == null || R.close(), i.current = null;
+        var C;
+        (C = m.current) == null || C.close(), m.current = null;
       };
-  }, [u, w, t, o]), /* @__PURE__ */ y(
+  }, [u, x, t, b]), /* @__PURE__ */ c(
     "div",
     {
-      ref: r,
-      style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: v, minHeight: v === "100%" ? "480px" : void 0 }
+      ref: i,
+      style: d ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: f, minHeight: f === "100%" ? "480px" : void 0 }
     }
   );
 }
+function L({
+  url: u,
+  profileId: x,
+  userId: t,
+  userName: r,
+  userEmail: l,
+  accent: n,
+  height: g = "100%",
+  i18n: b
+}) {
+  const [e, p] = z(null), h = w(null), o = w(null), d = w(null), y = w(null);
+  j(() => {
+    if (h.current)
+      return import("./chatlist.js").then(({ mountChatList: f }) => {
+        d.current = f({
+          el: h.current,
+          url: u,
+          profileId: x,
+          onSelect: (a) => p(a),
+          ...t ? { userId: t } : {},
+          ...n ? { accent: n } : {},
+          ...b ? { i18n: b } : {}
+        });
+      }), () => {
+        var f;
+        (f = d.current) == null || f.close(), d.current = null;
+      };
+  }, [u, x, t]), j(() => {
+    var f;
+    if (!(!o.current || !e))
+      return (f = y.current) == null || f.close(), y.current = S({
+        el: o.current,
+        url: u,
+        profileId: x,
+        ...e.subjectId ? { subjectId: e.subjectId } : {},
+        ...t ? { token: t } : {},
+        ...t || r || l ? {
+          user: {
+            ...r ? { name: r } : {},
+            ...l ? { email: l } : {}
+          }
+        } : {},
+        ...e.subjectTitle ? {
+          subject: {
+            title: e.subjectTitle,
+            ...e.subjectMeta ? { subtitle: e.subjectMeta } : {}
+          }
+        } : {},
+        ...n ? { accent: n } : {}
+      }), () => {
+        var a;
+        (a = y.current) == null || a.close(), y.current = null;
+      };
+  }, [e == null ? void 0 : e.id]);
+  const s = typeof window < "u" && window.innerWidth < 768;
+  return /* @__PURE__ */ k("div", { style: { display: "flex", width: "100%", height: g, minHeight: "400px", overflow: "hidden" }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      width: s ? "100%" : "360px",
+      flex: s && e ? "none" : void 0,
+      display: s && e ? "none" : "flex",
+      flexDirection: "column",
+      borderRight: s ? "none" : "1px solid #e8eaed",
+      minWidth: 0
+    }, children: /* @__PURE__ */ c("div", { ref: h, style: { width: "100%", height: "100%" } }) }),
+    e ? /* @__PURE__ */ k("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
+      s && /* @__PURE__ */ c(
+        "button",
+        {
+          onClick: () => p(null),
+          style: { position: "absolute", top: 12, left: 12, zIndex: 10, background: "none", border: "none", fontSize: 22, cursor: "pointer", color: "#1c1b1a" },
+          children: "←"
+        }
+      ),
+      /* @__PURE__ */ c("div", { ref: o, style: { width: "100%", height: "100%" } })
+    ] }) : /* @__PURE__ */ c("div", { style: { flex: 1, display: s ? "none" : "flex", alignItems: "center", justifyContent: "center", color: "#9b9690", fontSize: 14 }, children: "Select a conversation" })
+  ] });
+}
+function O({
+  url: u,
+  profileId: x,
+  userId: t,
+  userName: r,
+  userEmail: l,
+  accent: n = "#4F63F5",
+  floating: g = !0,
+  position: b = "bottom-right",
+  label: e,
+  panelWidth: p,
+  panelHeight: h = "600px"
+}) {
+  const [o, d] = z(!1), y = w(null), s = b === "bottom-right", a = e ?? (g ? "💬" : "Messages");
+  if (j(() => {
+    const i = (m) => {
+      m.key === "Escape" && d(!1);
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, []), g) {
+    const i = typeof window < "u" && window.innerWidth < 480, m = i ? "100vw" : p ?? "420px", C = i ? "100dvh" : h;
+    return /* @__PURE__ */ k("div", { style: {
+      position: "fixed",
+      [s ? "right" : "left"]: "20px",
+      bottom: "20px",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: s ? "flex-end" : "flex-start",
+      gap: "12px"
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        width: m,
+        height: C,
+        borderRadius: i ? "0" : "16px",
+        overflow: "hidden",
+        boxShadow: "0 8px 40px rgba(0,0,0,.18)",
+        background: "#fff",
+        display: o ? "flex" : "none",
+        flexDirection: "column",
+        transformOrigin: `bottom ${s ? "right" : "left"}`,
+        animation: o ? "ocl-pop-in .18s ease" : "none"
+      }, children: /* @__PURE__ */ c(
+        L,
+        {
+          url: u,
+          profileId: x,
+          ...t ? { userId: t } : {},
+          ...r ? { userName: r } : {},
+          ...l ? { userEmail: l } : {},
+          accent: n,
+          height: "100%"
+        }
+      ) }),
+      /* @__PURE__ */ c(
+        "button",
+        {
+          ref: y,
+          onClick: () => d((R) => !R),
+          style: {
+            width: "56px",
+            height: "56px",
+            borderRadius: "50%",
+            background: n,
+            color: "#fff",
+            border: "none",
+            fontSize: "24px",
+            cursor: "pointer",
+            flexShrink: 0,
+            boxShadow: "0 4px 16px rgba(0,0,0,.25)",
+            transition: "transform .15s"
+          },
+          onMouseEnter: (R) => {
+            R.target.style.transform = "scale(1.08)";
+          },
+          onMouseLeave: (R) => {
+            R.target.style.transform = "scale(1)";
+          },
+          children: o ? "✕" : a
+        }
+      ),
+      /* @__PURE__ */ c("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
+    ] });
+  }
+  const v = p ?? "420px";
+  return /* @__PURE__ */ k("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ k(
+      "button",
+      {
+        ref: y,
+        onClick: () => d((i) => !i),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "8px 16px",
+          borderRadius: "8px",
+          background: o ? n : "transparent",
+          color: o ? "#fff" : n,
+          border: `2px solid ${n}`,
+          fontSize: "14px",
+          fontWeight: 600,
+          cursor: "pointer",
+          transition: "background .15s, color .15s"
+        },
+        children: [
+          "💬 ",
+          a
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ k(M, { children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          onClick: () => d(!1),
+          style: { position: "fixed", inset: 0, zIndex: 999 }
+        }
+      ),
+      /* @__PURE__ */ c("div", { style: {
+        position: "absolute",
+        top: "calc(100% + 8px)",
+        right: 0,
+        width: v,
+        height: h,
+        borderRadius: "16px",
+        overflow: "hidden",
+        boxShadow: "0 8px 40px rgba(0,0,0,.18)",
+        background: "#fff",
+        zIndex: 1e3,
+        animation: "ocl-pop-in .18s ease"
+      }, children: /* @__PURE__ */ c(
+        L,
+        {
+          url: u,
+          profileId: x,
+          ...t ? { userId: t } : {},
+          ...r ? { userName: r } : {},
+          ...l ? { userEmail: l } : {},
+          accent: n,
+          height: "100%"
+        }
+      ) }),
+      /* @__PURE__ */ c("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
+    ] })
+  ] });
+}
 export {
-  x as ChatWidget,
-  D as MarketplaceChat
+  L as ChatApp,
+  O as ChatAppLauncher,
+  H as ChatWidget,
+  _ as MarketplaceChat
 };
 //# sourceMappingURL=react.js.map