@paramms/chat-widget 1.0.7 → 1.0.9

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

@@ -115,51 +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 ChatListProps {
+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;
-    /** Called when the user taps a conversation row.
-     *  Use this to navigate to the listing page or open a ChatWidget. */
-    onSelect: (entry: import('./chatlist.js').ChatListEntry) => void;
+    /** 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 when rendered inline. Default: '100%' */
+    /** Container height. Default: '100%' */
     height?: string;
     /** i18n overrides */
     i18n?: import('./chatlist.js').ChatListOptions['i18n'];
 }
 /**
- * Standalone conversation list — separate from the chat widget.
- * Use this on a dedicated /messages or /inbox page.
- * Tap a row → onSelect fires → you navigate to the listing or open a ChatWidget.
+ * 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'
- * import { useRouter } from 'next/navigation'
  *
  * export default function MessagesPage({ session }) {
- *   const router = useRouter()
  *   return (
- *     <div style={{ height: '600px' }}>
+ *     <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}
- *         onSelect={(entry) => {
- *           // Navigate to the listing page where the ChatWidget lives
- *           router.push(`/listings/${entry.subjectId}`)
- *         }}
+ *         userName={session?.user.name}
+ *         userEmail={session?.user.email}
  *       />
  *     </div>
  *   )
  * }
  * ```
  */
-export declare function ChatList({ url, profileId, userId, onSelect, accent, height, i18n, }: ChatListProps): JSX.Element;
+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,172 +1,365 @@
-import { jsx as k } from "react/jsx-runtime";
-import { useRef as b, useEffect as H } from "react";
-import { mount as _ } from "./index.js";
-function W({
-  url: c,
-  profileId: l,
+import { jsxs as R, jsx as c, Fragment as M } from "react/jsx-runtime";
+import { useState as W, useRef as m, useEffect as j } from "react";
+import { mount as z } from "./index.js";
+function Y({
+  url: x,
+  profileId: b,
   userId: t,
-  userName: u,
+  userName: i,
   userEmail: r,
-  userAvatar: i,
-  contextTitle: f,
-  contextSubtitle: o,
+  userAvatar: n,
+  contextTitle: g,
+  contextSubtitle: y,
   contextStatus: e,
-  subjectId: n,
-  accent: m,
-  launcher: p,
-  position: R,
-  quickReplies: s,
-  height: y = "100%",
-  i18n: C,
-  translateLang: d
+  subjectId: h,
+  accent: p,
+  launcher: o,
+  position: s,
+  quickReplies: d,
+  height: l = "100%",
+  i18n: f,
+  translateLang: a
 }) {
-  const v = b(null), h = b(null);
-  return H(() => {
-    if (v.current)
-      return h.current = _({
-        el: v.current,
-        url: c,
-        profileId: l,
-        ...n ? { subjectId: n } : {},
+  const w = m(null), u = m(null);
+  return j(() => {
+    if (w.current)
+      return u.current = z({
+        el: w.current,
+        url: x,
+        profileId: b,
+        ...h ? { subjectId: h } : {},
         ...t ? { token: t } : {},
-        ...t || u || r || i ? {
+        ...t || i || r || n ? {
           user: {
-            ...u ? { name: u } : {},
+            ...i ? { name: i } : {},
             ...r ? { email: r } : {},
-            ...i ? { avatar: i } : {}
+            ...n ? { avatar: n } : {}
           }
         } : {},
-        ...f ? {
+        ...g ? {
           subject: {
-            title: f,
-            ...o ? { subtitle: o } : {},
+            title: g,
+            ...y ? { subtitle: y } : {},
             ...e ? { status: e } : {}
           }
         } : {},
-        ...s ? { quickReplies: s } : {},
-        ...m ? { accent: m } : {},
-        ...d ? { translateLang: d } : {},
-        ...C ? { i18n: C } : {},
-        ...p ? { launcher: p, position: R ?? "bottom-right" } : {}
+        ...d ? { quickReplies: d } : {},
+        ...p ? { accent: p } : {},
+        ...a ? { translateLang: a } : {},
+        ...f ? { i18n: f } : {},
+        ...o ? { launcher: o, position: s ?? "bottom-right" } : {}
       }), () => {
-        var w;
-        (w = h.current) == null || w.close(), h.current = null;
+        var v;
+        (v = u.current) == null || v.close(), u.current = null;
       };
-  }, [c, l, n, t]), /* @__PURE__ */ k(
+  }, [x, b, h, t]), /* @__PURE__ */ c(
     "div",
     {
-      ref: v,
-      style: p ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: y, minHeight: y === "100%" ? "480px" : void 0 }
+      ref: w,
+      style: o ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: l, minHeight: l === "100%" ? "480px" : void 0 }
     }
   );
 }
-const $ = [
+const B = [
   "Is this still available?",
   "Can I schedule a viewing?",
   "What is your best price?"
 ];
-function D({
-  url: c,
-  profileId: l,
+function A({
+  url: x,
+  profileId: b,
   listingId: t,
-  listingTitle: u,
+  listingTitle: i,
   listingMeta: r,
-  listingPrice: i,
-  listingStatus: f,
-  userId: o,
+  listingPrice: n,
+  listingStatus: g,
+  userId: y,
   userName: e,
-  userEmail: n,
-  userAvatar: m,
-  accent: p,
-  launcher: R,
-  position: s,
-  quickReplies: y,
-  height: C = "100%",
-  i18n: d,
-  translateLang: v
+  userEmail: h,
+  userAvatar: p,
+  accent: o,
+  launcher: s,
+  position: d,
+  quickReplies: l,
+  height: f = "100%",
+  i18n: a,
+  translateLang: w
 }) {
-  const h = b(null), w = b(null);
-  return H(() => {
-    if (h.current)
-      return w.current = _({
-        el: h.current,
-        url: c,
-        profileId: l,
+  const u = m(null), v = m(null);
+  return j(() => {
+    if (u.current)
+      return v.current = z({
+        el: u.current,
+        url: x,
+        profileId: b,
         // ── 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 || e || n || m ? {
+        ...y ? { token: y } : {},
+        ...y || e || h || p ? {
           user: {
             ...e ? { name: e } : {},
-            ...n ? { email: n } : {},
-            ...m ? { avatar: m } : {},
+            ...h ? { email: h } : {},
+            ...p ? { avatar: p } : {},
             ...t ? { meta: { listingId: t } } : {}
           }
         } : {},
-        ...u ? {
+        ...i ? {
           subject: {
-            title: u,
+            title: i,
             ...r ? { subtitle: r } : {},
-            ...i ? { tags: [`$${i.toLocaleString()}`] } : {},
-            ...f ? { status: f } : {}
+            ...n ? { tags: [`$${n.toLocaleString()}`] } : {},
+            ...g ? { status: g } : {}
           }
         } : {},
-        quickReplies: y ?? $,
-        ...p ? { accent: p } : {},
-        ...v ? { translateLang: v } : {},
-        ...d ? { i18n: d } : {},
-        ...R ? { launcher: R, position: s ?? "bottom-right" } : {}
+        quickReplies: l ?? B,
+        ...o ? { accent: o } : {},
+        ...w ? { translateLang: w } : {},
+        ...a ? { i18n: a } : {},
+        ...s ? { launcher: s, position: d ?? "bottom-right" } : {}
       }), () => {
-        var L;
-        (L = w.current) == null || L.close(), w.current = null;
+        var S;
+        (S = v.current) == null || S.close(), v.current = null;
       };
-  }, [c, l, t, o]), /* @__PURE__ */ k(
+  }, [x, b, t, y]), /* @__PURE__ */ c(
     "div",
     {
-      ref: h,
-      style: R ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: C, minHeight: C === "100%" ? "480px" : void 0 }
+      ref: u,
+      style: s ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: f, minHeight: f === "100%" ? "480px" : void 0 }
     }
   );
 }
-function F({
-  url: c,
-  profileId: l,
+function D({
+  url: x,
+  profileId: b,
   userId: t,
-  onSelect: u,
-  accent: r,
-  height: i = "100%",
-  i18n: f
+  userName: i,
+  userEmail: r,
+  accent: n,
+  height: g = "100%",
+  i18n: y
 }) {
-  const o = b(null), e = b(null);
-  return H(() => {
-    if (o.current)
-      return import("./chatlist.js").then(({ mountChatList: n }) => {
-        e.current = n({
-          el: o.current,
-          url: c,
-          profileId: l,
-          onSelect: u,
+  const [e, h] = W(null), p = m(null), o = m(null), s = m(null), d = m(null);
+  j(() => {
+    if (p.current)
+      return import("./chatlist.js").then(({ mountChatList: f }) => {
+        s.current = f({
+          el: p.current,
+          url: x,
+          profileId: b,
+          onSelect: (a) => h(a),
           ...t ? { userId: t } : {},
-          ...r ? { accent: r } : {},
-          ...f ? { i18n: f } : {}
+          ...n ? { accent: n } : {},
+          ...y ? { i18n: y } : {}
         });
       }), () => {
-        var n;
-        (n = e.current) == null || n.close(), e.current = null;
+        var f;
+        (f = s.current) == null || f.close(), s.current = null;
       };
-  }, [c, l, t]), /* @__PURE__ */ k(
-    "div",
-    {
-      ref: o,
-      style: { width: "100%", height: i, minHeight: i === "100%" ? "400px" : void 0 }
-    }
-  );
+  }, [x, b, t]), j(() => {
+    var f;
+    if (!(!o.current || !e))
+      return (f = d.current) == null || f.close(), d.current = z({
+        el: o.current,
+        url: x,
+        profileId: b,
+        ...e.subjectId ? { subjectId: e.subjectId } : {},
+        ...t ? { token: t } : {},
+        ...t || i || r ? {
+          user: {
+            ...i ? { name: i } : {},
+            ...r ? { email: r } : {}
+          }
+        } : {},
+        ...e.subjectTitle ? {
+          subject: {
+            title: e.subjectTitle,
+            ...e.subjectMeta ? { subtitle: e.subjectMeta } : {}
+          }
+        } : {},
+        ...n ? { accent: n } : {}
+      }), () => {
+        var a;
+        (a = d.current) == null || a.close(), d.current = null;
+      };
+  }, [e == null ? void 0 : e.id]);
+  const l = typeof window < "u" && window.innerWidth < 768;
+  return /* @__PURE__ */ R("div", { style: { display: "flex", width: "100%", height: g, minHeight: "400px", overflow: "hidden" }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      width: l ? "100%" : "360px",
+      flex: l && e ? "none" : void 0,
+      display: l && e ? "none" : "flex",
+      flexDirection: "column",
+      borderRight: l ? "none" : "1px solid #e8eaed",
+      minWidth: 0
+    }, children: /* @__PURE__ */ c("div", { ref: p, style: { width: "100%", height: "100%" } }) }),
+    e ? /* @__PURE__ */ R("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
+      l && /* @__PURE__ */ c(
+        "button",
+        {
+          onClick: () => h(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: l ? "none" : "flex", alignItems: "center", justifyContent: "center", color: "#9b9690", fontSize: 14 }, children: "Select a conversation" })
+  ] });
+}
+function E({
+  url: x,
+  profileId: b,
+  userId: t,
+  userName: i,
+  userEmail: r,
+  accent: n = "#4F63F5",
+  floating: g = !0,
+  position: y = "bottom-right",
+  label: e,
+  panelWidth: h,
+  panelHeight: p = "600px"
+}) {
+  const [o, s] = W(!1), d = m(null), l = y === "bottom-right", a = e ?? (g ? "💬" : "Messages");
+  if (j(() => {
+    const k = (L) => {
+      L.key === "Escape" && s(!1);
+    };
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
+  }, []), g) {
+    const k = typeof window < "u" && window.innerWidth < 480, L = k ? "100vw" : h ?? "420px", H = k ? "100dvh" : p;
+    return /* @__PURE__ */ R("div", { style: {
+      position: "fixed",
+      [l ? "right" : "left"]: "20px",
+      bottom: "20px",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: l ? "flex-end" : "flex-start",
+      gap: "12px"
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        width: L,
+        height: H,
+        borderRadius: k ? "0" : "16px",
+        overflow: "hidden",
+        boxShadow: "0 8px 40px rgba(0,0,0,.18)",
+        background: "#fff",
+        display: o ? "flex" : "none",
+        flexDirection: "column",
+        transformOrigin: `bottom ${l ? "right" : "left"}`,
+        animation: o ? "ocl-pop-in .18s ease" : "none"
+      }, children: /* @__PURE__ */ c(
+        D,
+        {
+          url: x,
+          profileId: b,
+          ...t ? { userId: t } : {},
+          ...i ? { userName: i } : {},
+          ...r ? { userEmail: r } : {},
+          accent: n,
+          height: "100%"
+        }
+      ) }),
+      /* @__PURE__ */ c(
+        "button",
+        {
+          ref: d,
+          onClick: () => s((C) => !C),
+          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: (C) => {
+            C.target.style.transform = "scale(1.08)";
+          },
+          onMouseLeave: (C) => {
+            C.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 w = h ?? "420px", [u, v] = W(null), S = () => {
+    !o && d.current && v(d.current.getBoundingClientRect()), s((k) => !k);
+  }, $ = u ? u.bottom + 8 : 0, F = u ? window.innerWidth - u.right : 0;
+  return /* @__PURE__ */ R(M, { children: [
+    /* @__PURE__ */ R(
+      "button",
+      {
+        ref: d,
+        onClick: S,
+        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 && u && /* @__PURE__ */ R(M, { children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          onClick: () => s(!1),
+          style: { position: "fixed", inset: 0, zIndex: 9998 }
+        }
+      ),
+      /* @__PURE__ */ c("div", { style: {
+        position: "fixed",
+        top: $,
+        right: F,
+        width: w,
+        height: p,
+        borderRadius: "16px",
+        overflow: "hidden",
+        boxShadow: "0 8px 40px rgba(0,0,0,.2)",
+        background: "#fff",
+        zIndex: 9999,
+        animation: "ocl-slide-in .18s ease"
+      }, children: /* @__PURE__ */ c(
+        D,
+        {
+          url: x,
+          profileId: b,
+          ...t ? { userId: t } : {},
+          ...i ? { userName: i } : {},
+          ...r ? { userEmail: r } : {},
+          accent: n,
+          height: "100%"
+        }
+      ) }),
+      /* @__PURE__ */ c("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
+    ] })
+  ] });
 }
 export {
-  F as ChatList,
-  W as ChatWidget,
-  D as MarketplaceChat
+  D as ChatApp,
+  E as ChatAppLauncher,
+  Y as ChatWidget,
+  A as MarketplaceChat
 };
 //# sourceMappingURL=react.js.map