keystone-design-bootstrap 1.0.85 → 1.0.87

package/dist/next/routes/form.js

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/next/routes/proxy-headers.ts
+function clientContextHeaders(request) {
+  var _a, _b;
+  const ip = request.headers.get("x-real-ip") || ((_b = (_a = request.headers.get("x-forwarded-for")) == null ? void 0 : _a.split(",")[0]) == null ? void 0 : _b.trim());
+  const ua = request.headers.get("user-agent");
+  const cookieHeader = request.headers.get("cookie") || "";
+  const cookies = Object.fromEntries(
+    cookieHeader.split(";").map((c) => {
+      const [k, ...v] = c.trim().split("=");
+      return [k, v.join("=")];
+    })
+  );
+  const fbp = cookies["_fbp"];
+  const fbc = cookies["_fbc"];
+  const headers = {};
+  if (ip) headers["X-Real-Client-IP"] = ip;
+  if (ua) headers["X-Real-Client-UA"] = ua;
+  if (fbp) headers["X-Meta-FBP"] = fbp;
+  if (fbc) headers["X-Meta-FBC"] = fbc;
+  return headers;
+}
+
+// src/next/routes/form.ts
+var API_URL = process.env.API_URL || "http://localhost:3000/api/v1";
+var API_KEY = process.env.API_KEY || "";
+function createFormRouteHandlers(deps) {
+  var _a, _b;
+  const json = (_b = (_a = deps == null ? void 0 : deps.NextResponse) == null ? void 0 : _a.json) != null ? _b : ((body, init) => Response.json(body, init));
+  return {
+    POST: async (request) => {
+      var _a2;
+      try {
+        const body = await request.json();
+        const formType = body == null ? void 0 : body.formType;
+        if (!formType) {
+          return json({ success: false, error: "Form type is required." }, { status: 400 });
+        }
+        const response = await fetch(`${API_URL}/public/form_submissions`, {
+          method: "POST",
+          headers: __spreadValues({
+            "Content-Type": "application/json",
+            "X-API-Key": API_KEY
+          }, clientContextHeaders(request)),
+          body: JSON.stringify(body)
+        });
+        const data = await response.json();
+        if (!response.ok) {
+          return json(
+            {
+              success: false,
+              error: data.error || "Failed to submit form. Please try again."
+            },
+            { status: response.status }
+          );
+        }
+        const payload = {
+          success: true,
+          message: data.message || "Form submitted successfully."
+        };
+        if (formType === "lead" && ((_a2 = data.data) == null ? void 0 : _a2.event_id)) {
+          payload.eventId = data.data.event_id;
+        }
+        return json(payload);
+      } catch (error) {
+        console.error("Form submission error:", error);
+        return json(
+          {
+            success: false,
+            error: "Network error. Please try again later."
+          },
+          { status: 500 }
+        );
+      }
+    }
+  };
+}
+export {
+  createFormRouteHandlers
+};
+//# sourceMappingURL=form.js.map

package/dist/next/routes/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/routes/proxy-headers.ts","../../../src/next/routes/form.ts"],"sourcesContent":["/**\n * Extracts the real client IP, user-agent, and Meta browser cookies (_fbp / _fbc)\n * from an incoming Next.js route request and returns them as headers to forward\n * to the upstream Rails API.\n *\n * Cloudflare and other load-balancers set x-real-ip (or x-forwarded-for) on\n * inbound requests before they reach the Next.js function. Without this, the\n * Rails API sees the Next.js server IP instead of the real browser IP, which\n * produces inaccurate server-side CAPI signals.\n *\n * _fbp (Meta Browser ID) and _fbc (Meta Click ID) are first-party cookies set by\n * the Meta Pixel. Forwarding them allows the API to store them on the Contact\n * record so they can be included in all subsequent CAPI events — even those fired\n * from background jobs that have no live HTTP request.\n *\n * Convention:\n *   X-Real-Client-IP  — real browser IP\n *   X-Real-Client-UA  — real browser user-agent\n *   X-Meta-FBP        — value of the _fbp cookie\n *   X-Meta-FBC        — value of the _fbc cookie (or built from fbclid param)\n */\nexport function clientContextHeaders(request: Request): Record<string, string> {\n  const ip =\n    request.headers.get('x-real-ip') ||\n    request.headers.get('x-forwarded-for')?.split(',')[0]?.trim();\n  const ua = request.headers.get('user-agent');\n\n  const cookieHeader = request.headers.get('cookie') || '';\n  const cookies = Object.fromEntries(\n    cookieHeader.split(';').map((c) => {\n      const [k, ...v] = c.trim().split('=');\n      return [k, v.join('=')];\n    })\n  );\n  const fbp = cookies['_fbp'];\n  const fbc = cookies['_fbc'];\n\n  const headers: Record<string, string> = {};\n  if (ip) headers['X-Real-Client-IP'] = ip;\n  if (ua) headers['X-Real-Client-UA'] = ua;\n  if (fbp) headers['X-Meta-FBP'] = fbp;\n  if (fbc) headers['X-Meta-FBC'] = fbc;\n  return headers;\n}\n","/**\n * Form submission proxy route handler for Next.js App Router.\n *\n * Usage in a site/template:\n *   // app/api/form/route.ts\n *   export { POST } from 'keystone-design-bootstrap/next/routes/form';\n *\n * Env (server-side only):\n * - API_URL (default: http://localhost:3000/api/v1)\n * - API_KEY\n *\n * ## Meta Pixel + CAPI tracking for custom forms\n *\n * POST body must include `formType: 'lead'` for conversion tracking to fire:\n *   - Server-side: the API automatically fires a CAPI Lead event (no extra work needed).\n *   - Client-side: the response includes `eventId` for browser/server deduplication.\n *     After a successful response, call these two functions from 'keystone-design-bootstrap/tracking':\n *\n *     const result = await response.json();\n *     if (result.success) {\n *       await setPixelUserData({ email, phone });               // hash + store identity for the session\n *       firePixelEvent('Lead', undefined, result.eventId);      // fire fbq('track', 'Lead') with server event ID for dedup\n *     }\n *\n * Both tracking calls are silent no-ops when no Meta Pixel is configured for the site.\n * Non-lead form types (e.g. 'job_application') do not fire any tracking events.\n */\n\n// IMPORTANT:\n// Do NOT import NextRequest/NextResponse here.\n// Export a factory so the consuming app can pass its own `NextResponse` (from its own\n// `next/server`) to avoid type identity conflicts when used as a local file dependency.\n\nimport { clientContextHeaders } from './proxy-headers';\n\nconst API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';\nconst API_KEY = process.env.API_KEY || '';\n\ntype JsonResponder = (body: unknown, init?: ResponseInit) => Response;\n\nexport function createFormRouteHandlers(deps?: { NextResponse?: { json: JsonResponder } }) {\n  const json: JsonResponder = deps?.NextResponse?.json ?? ((body, init) => Response.json(body, init));\n\n  return {\n    POST: async (request: Request): Promise<Response> => {\n      try {\n        const body = await request.json();\n        const formType = body?.formType;\n\n        if (!formType) {\n          return json({ success: false, error: 'Form type is required.' }, { status: 400 });\n        }\n\n        const response = await fetch(`${API_URL}/public/form_submissions`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n            'X-API-Key': API_KEY,\n            ...clientContextHeaders(request),\n          },\n          body: JSON.stringify(body),\n        });\n\n        const data = await response.json();\n\n        if (!response.ok) {\n          return json(\n            {\n              success: false,\n              error: data.error || 'Failed to submit form. Please try again.',\n            },\n            { status: response.status }\n          );\n        }\n\n        const payload: { success: true; message?: string; eventId?: string } = {\n          success: true,\n          message: data.message || 'Form submitted successfully.',\n        };\n\n        if (formType === 'lead' && data.data?.event_id) {\n          payload.eventId = data.data.event_id;\n        }\n\n        return json(payload);\n      } catch (error) {\n        console.error('Form submission error:', error);\n        return json(\n          {\n            success: false,\n            error: 'Network error. Please try again later.',\n          },\n          { status: 500 }\n        );\n      }\n    },\n  };\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBO,SAAS,qBAAqB,SAA0C;AArB/E;AAsBE,QAAM,KACJ,QAAQ,QAAQ,IAAI,WAAW,OAC/B,mBAAQ,QAAQ,IAAI,iBAAiB,MAArC,mBAAwC,MAAM,KAAK,OAAnD,mBAAuD;AACzD,QAAM,KAAK,QAAQ,QAAQ,IAAI,YAAY;AAE3C,QAAM,eAAe,QAAQ,QAAQ,IAAI,QAAQ,KAAK;AACtD,QAAM,UAAU,OAAO;AAAA,IACrB,aAAa,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM;AACjC,YAAM,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG;AACpC,aAAO,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC;AAAA,IACxB,CAAC;AAAA,EACH;AACA,QAAM,MAAM,QAAQ,MAAM;AAC1B,QAAM,MAAM,QAAQ,MAAM;AAE1B,QAAM,UAAkC,CAAC;AACzC,MAAI,GAAI,SAAQ,kBAAkB,IAAI;AACtC,MAAI,GAAI,SAAQ,kBAAkB,IAAI;AACtC,MAAI,IAAK,SAAQ,YAAY,IAAI;AACjC,MAAI,IAAK,SAAQ,YAAY,IAAI;AACjC,SAAO;AACT;;;ACRA,IAAM,UAAU,QAAQ,IAAI,WAAW;AACvC,IAAM,UAAU,QAAQ,IAAI,WAAW;AAIhC,SAAS,wBAAwB,MAAmD;AAxC3F;AAyCE,QAAM,QAAsB,wCAAM,iBAAN,mBAAoB,SAApB,aAA6B,CAAC,MAAM,SAAS,SAAS,KAAK,MAAM,IAAI;AAEjG,SAAO;AAAA,IACL,MAAM,OAAO,YAAwC;AA5CzD,UAAAA;AA6CM,UAAI;AACF,cAAM,OAAO,MAAM,QAAQ,KAAK;AAChC,cAAM,WAAW,6BAAM;AAEvB,YAAI,CAAC,UAAU;AACb,iBAAO,KAAK,EAAE,SAAS,OAAO,OAAO,yBAAyB,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,QAClF;AAEA,cAAM,WAAW,MAAM,MAAM,GAAG,OAAO,4BAA4B;AAAA,UACjE,QAAQ;AAAA,UACR,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,aAAa;AAAA,aACV,qBAAqB,OAAO;AAAA,UAEjC,MAAM,KAAK,UAAU,IAAI;AAAA,QAC3B,CAAC;AAED,cAAM,OAAO,MAAM,SAAS,KAAK;AAEjC,YAAI,CAAC,SAAS,IAAI;AAChB,iBAAO;AAAA,YACL;AAAA,cACE,SAAS;AAAA,cACT,OAAO,KAAK,SAAS;AAAA,YACvB;AAAA,YACA,EAAE,QAAQ,SAAS,OAAO;AAAA,UAC5B;AAAA,QACF;AAEA,cAAM,UAAiE;AAAA,UACrE,SAAS;AAAA,UACT,SAAS,KAAK,WAAW;AAAA,QAC3B;AAEA,YAAI,aAAa,YAAUA,MAAA,KAAK,SAAL,gBAAAA,IAAW,WAAU;AAC9C,kBAAQ,UAAU,KAAK,KAAK;AAAA,QAC9B;AAEA,eAAO,KAAK,OAAO;AAAA,MACrB,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7C,eAAO;AAAA,UACL;AAAA,YACE,SAAS;AAAA,YACT,OAAO;AAAA,UACT;AAAA,UACA,EAAE,QAAQ,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":["_a"]}

package/dist/package-IU_GpDA0.d.ts

@@ -0,0 +1,74 @@
+import { P as PhotoAttachment } from './photos-CmBdWiuZ.js';
+
+/** Nested under `service_items[].offers` and `packages[].offers` in public API. */
+interface OfferPublic {
+    id: number;
+    name: string;
+    description: string | null;
+    value_terms: string | null;
+    active?: boolean;
+    expires_at?: string | null;
+    expired?: boolean;
+    photo_attachments?: PhotoAttachment[];
+}
+
+interface Service {
+    id: number;
+    name: string;
+    slug: string;
+    description_markdown: string;
+    summary?: string;
+    pricing_info?: string;
+    features_markdown?: string;
+    featured: boolean;
+    sort_order: number;
+    photo_attachments?: PhotoAttachment[];
+    service_items?: ServiceItem[];
+    created_at: string;
+    updated_at: string;
+}
+interface ServiceItem {
+    id: number;
+    name: string;
+    slug: string;
+    summary?: string | null;
+    description_markdown?: string | null;
+    pricing_info?: string | null;
+    price_cents?: number | null;
+    duration_minutes?: number | null;
+    sort_order: number;
+    service_id?: number;
+    photo_attachments?: PhotoAttachment[];
+    offers?: OfferPublic[];
+}
+interface ServiceParams {
+    featured?: boolean;
+    q?: string;
+    page?: number;
+    per_page?: number;
+}
+type ServiceResponse = Service[];
+
+interface PackageItem {
+    quantity: number;
+    service_item?: {
+        id: number;
+        name: string;
+        slug: string;
+        summary?: string | null;
+    };
+}
+interface Package {
+    id: number;
+    name: string;
+    slug: string;
+    summary?: string | null;
+    description_markdown?: string | null;
+    pricing_info?: string | null;
+    price_cents?: number | null;
+    photo_attachments?: PhotoAttachment[];
+    package_items?: PackageItem[];
+    offers?: OfferPublic[];
+}
+
+export type { OfferPublic as O, Package as P, Service as S, PackageItem as a, ServiceItem as b, ServiceParams as c, ServiceResponse as d };

package/dist/types/index.d.ts

@@ -1,29 +1,14 @@
-import { Theme } from '../themes/index.js';
+export { Theme } from '../themes/index.js';
+export { N as NavItem, S as SiteConfig } from '../config-C_XBZixg.js';
 export { B as BlogPost, a as BlogPostAuthor, b as BlogPostParams, c as BlogPostResponse, d as BlogPostTag } from '../blog-post-vWzW8yFb.js';
-export { C as CompanyInformation, a as CompanyInformationResponse, O as OfferPublic, P as Package, b as PackageItem, S as Service, c as ServiceItem, d as ServiceParams, e as ServiceResponse } from '../package-DeHKpQp7.js';
+export { C as CompanyInformation, a as CompanyInformationResponse } from '../company-information-C1pP-SvU.js';
+export { a as Consumer, c as ConsumerContact, b as ContactSummary, C as ConversationSummary, M as Message } from '../consumer-BWjQawiO.js';
 import { P as PhotoAttachment } from '../photos-CmBdWiuZ.js';
 export { a as Photo } from '../photos-CmBdWiuZ.js';
 export { F as FormDefinition, a as FormFieldDefinition, b as FormFieldItem, c as FormFieldOption, d as FormType } from '../form-C94A_PX_.js';
+export { O as OfferPublic, P as Package, a as PackageItem, S as Service, b as ServiceItem, c as ServiceParams, d as ServiceResponse } from '../package-IU_GpDA0.js';
 export { a as WebsitePhoto, W as WebsitePhotos, b as WebsitePhotosResponse } from '../website-photos-Cl1YqAno.js';
 
-interface NavItem {
-    label: string;
-    href: string;
-    subtitle?: string;
-    children?: NavItem[];
-}
-interface SiteConfig {
-    site: {
-        title: string;
-        description: string;
-        theme: Theme;
-    };
-    navigation: {
-        header: NavItem[];
-        footer: NavItem[][];
-    };
-}
-
 interface Testimonial {
     id: number;
     reviewer_name: string;
@@ -203,53 +188,6 @@ interface JobPostingParams {
 }
 type JobPostingResponse = JobPosting[];
 
-/** Consumer and messaging types (aligned with Rails ConsumerSerializer and conversation endpoints). */
-interface Consumer {
-    id: number;
-    email: string | null;
-    phone: string | null;
-    primary_identifier: string | null;
-    contacts?: ConsumerContact[];
-}
-interface ConsumerContact {
-    id: number;
-    display_name: string;
-    account?: {
-        id: number;
-        name: string;
-        slug?: string;
-    };
-}
-interface ConversationSummary {
-    contact_id: number;
-    business?: {
-        id: number;
-        name: string;
-        company_name?: string;
-    };
-    last_message_at: string | null;
-    last_message_preview?: string | null;
-    message_count: number;
-}
-interface Message {
-    id: number;
-    body: string | null;
-    /** "outbound" = sent by the business; "inbound" = sent by the contact/member. */
-    direction: 'inbound' | 'outbound';
-    sender_type: 'contact' | 'agent' | 'human';
-    sender_display_name?: string;
-    created_at: string;
-}
-interface ContactSummary {
-    id: number;
-    display_name: string;
-    business?: {
-        id: number;
-        name: string;
-        company_name?: string;
-    };
-}
-
 interface ContactInfo {
     id?: number;
     about_text_markdown?: string;
@@ -310,4 +248,4 @@ interface ContactFormResponse {
     data: ContactFormSubmission;
 }
 
-export { type Consumer, type ConsumerContact, type ContactFormData, type ContactFormResponse, type ContactFormSubmission, type ContactInfo, type ContactResponse, type ContactSummary, type ConversationSummary, type FaqCategory, type FaqCategoryResponse, type FaqParams, type FaqQuestion, type FaqResponse, type JobPosting, type JobPostingParams, type JobPostingResponse, type Location, type LocationParams, type LocationResponse, type Message, type NavItem, PhotoAttachment, type SiteConfig, type SocialPost, type SocialPostParams, type SocialPostResponse, type TeamMember, type TeamMemberParams, type TeamMemberResponse, type Testimonial, type TestimonialParams, type TestimonialResponse, Theme };
+export { type ContactFormData, type ContactFormResponse, type ContactFormSubmission, type ContactInfo, type ContactResponse, type FaqCategory, type FaqCategoryResponse, type FaqParams, type FaqQuestion, type FaqResponse, type JobPosting, type JobPostingParams, type JobPostingResponse, type Location, type LocationParams, type LocationResponse, PhotoAttachment, type SocialPost, type SocialPostParams, type SocialPostResponse, type TeamMember, type TeamMemberParams, type TeamMemberResponse, type Testimonial, type TestimonialParams, type TestimonialResponse };

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./sections": "./src/design_system/sections/index.tsx",
-    "./elements": "./src/design_system/elements/index.tsx",
-    "./logo": "./src/design_system/logo/keystone-logo.tsx",
-    "./hooks": "./src/lib/hooks/index.ts",
-    "./contexts": "./src/contexts/index.ts",
-    "./tracking": "./src/tracking/index.ts",
-    "./components/DynamicFormFields": "./src/design_system/components/DynamicFormFields.tsx",
-    "./lib/server-api": "./src/lib/server-api.ts",
-    "./lib/cta-urls": "./src/lib/cta-urls.ts",
-    "./lib/component-registry": "./src/lib/component-registry.ts",
-    "./next/routes/chat": "./src/next/routes/chat.ts",
-    "./next/routes/form": "./src/next/routes/form.ts",
-    "./next/contexts/form-definitions": "./src/next/contexts/form-definitions.tsx",
-    "./next/layouts/root-layout": "./src/next/layouts/root-layout.tsx",
-    "./next/providers/ssr-provider": "./src/next/providers/ssr-provider.tsx",
-    "./next/gallery/design-gallery": "./src/next/gallery/design-gallery.tsx",
-    "./next/legal/privacy-policy": "./src/next/legal/privacy-policy.tsx",
-    "./next/legal/terms-of-service": "./src/next/legal/terms-of-service.tsx",
+    ".": "./dist/index.js",
+    "./sections": "./dist/design_system/sections/index.js",
+    "./elements": "./dist/design_system/elements/index.js",
+    "./logo": "./dist/design_system/logo/keystone-logo.js",
+    "./hooks": "./dist/lib/hooks/index.js",
+    "./contexts": "./dist/contexts/index.js",
+    "./tracking": "./dist/tracking/index.js",
+    "./components/DynamicFormFields": "./dist/design_system/components/DynamicFormFields.js",
+    "./lib/server-api": "./dist/lib/server-api.js",
+    "./lib/cta-urls": "./dist/lib/cta-urls.js",
+    "./lib/component-registry": "./dist/lib/component-registry.js",
+    "./next/routes/chat": "./dist/next/routes/chat.js",
+    "./next/routes/form": "./dist/next/routes/form.js",
+    "./next/contexts/form-definitions": "./dist/next/contexts/form-definitions.js",
+    "./next/layouts/root-layout": "./dist/next/layouts/root-layout.js",
+    "./next/providers/ssr-provider": "./dist/next/providers/ssr-provider.js",
+    "./next/gallery/design-gallery": "./dist/next/gallery/design-gallery.js",
+    "./next/legal/privacy-policy": "./dist/next/legal/privacy-policy.js",
+    "./next/legal/terms-of-service": "./dist/next/legal/terms-of-service.js",
     "./styles/*": "./src/styles/*",
-    "./types": "./src/types/index.ts",
-    "./themes": "./src/themes/index.ts",
-    "./utils/*": "./src/utils/*",
-    "./portal": "./src/design_system/portal/index.ts",
-    "./lib/consumer-session": "./src/lib/consumer-session.ts",
-    "./next/routes/consumer-auth": "./src/next/routes/consumer-auth.ts"
+    "./types": "./dist/types/index.js",
+    "./themes": "./dist/themes/index.js",
+    "./utils/*": "./dist/utils/*",
+    "./portal": "./dist/design_system/portal/index.js",
+    "./lib/consumer-session": "./dist/lib/consumer-session.js",
+    "./next/routes/consumer-auth": "./dist/next/routes/consumer-auth.js"
   },
   "repository": {
     "type": "git",
@@ -64,6 +64,7 @@
     "@fontsource/montserrat": "^5.2.8",
     "@fontsource/playfair-display": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",
+    "@rails/actioncable": "^8.1.300",
     "@untitledui/file-icons": "^0.0.9",
     "@untitledui/icons": "^0.0.20",
     "clsx": "^2.1.1",
@@ -79,6 +80,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/rails__actioncable": "^8.0.3",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",

package/src/design_system/chat/useRealtimeReplyOrchestrator.ts

@@ -0,0 +1,127 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+import { createConsumer } from '@rails/actioncable';
+
+export interface RealtimeSubscriptionData {
+  token: string;
+  contact_id: number;
+  cable_url: string;
+}
+
+interface UseRealtimeReplyOrchestratorOptions {
+  debugLabel: string;
+  fetchRealtimeData: () => Promise<RealtimeSubscriptionData | null>;
+  loadLatestHasReply: () => Promise<boolean>;
+  onReplyResolved: () => void;
+  onAgentThinking?: () => void;
+}
+
+export function useRealtimeReplyOrchestrator({
+  debugLabel,
+  fetchRealtimeData,
+  loadLatestHasReply,
+  onReplyResolved,
+  onAgentThinking,
+}: UseRealtimeReplyOrchestratorOptions) {
+  const cableRef = useRef<ReturnType<typeof createConsumer> | null>(null);
+  const subscriptionRef = useRef<{ unsubscribe: () => void } | null>(null);
+  const subscribedContactRef = useRef<number | null>(null);
+
+  const clearRealtime = useCallback(() => {
+    if (subscriptionRef.current) {
+      subscriptionRef.current.unsubscribe();
+      subscriptionRef.current = null;
+    }
+    if (cableRef.current) {
+      cableRef.current.disconnect();
+      cableRef.current = null;
+    }
+    subscribedContactRef.current = null;
+  }, []);
+
+  const resolveReply = useCallback(() => {
+    onReplyResolved();
+  }, [onReplyResolved]);
+
+  const subscribeRealtime = useCallback((realtime: RealtimeSubscriptionData) => {
+    const token = realtime.token;
+    const contactIdForStream = realtime.contact_id;
+    const cableUrl = realtime.cable_url;
+    if (!token || !contactIdForStream || !cableUrl) return;
+
+    if (
+      subscribedContactRef.current === contactIdForStream &&
+      subscriptionRef.current &&
+      cableRef.current
+    ) {
+      return;
+    }
+
+    clearRealtime();
+
+    const cable = createConsumer(`${cableUrl}?token=${encodeURIComponent(token)}`);
+    cableRef.current = cable;
+    subscribedContactRef.current = contactIdForStream;
+    subscriptionRef.current = cable.subscriptions.create(
+      { channel: 'ContactCommunicationsChannel', contact_id: String(contactIdForStream) },
+      {
+        connected: () => {
+          console.info(`[${debugLabel}] realtime connected contact_id=${contactIdForStream}`);
+        },
+        disconnected: () => {
+          console.warn(`[${debugLabel}] realtime disconnected contact_id=${contactIdForStream}`);
+        },
+        rejected: () => {
+          console.warn(`[${debugLabel}] realtime rejected contact_id=${contactIdForStream}`);
+        },
+        received: async (data: { type?: string }) => {
+          console.info(`[${debugLabel}] realtime received type=${data?.type ?? 'unknown'} contact_id=${contactIdForStream}`);
+          if (data?.type === 'agent_thinking') {
+            onAgentThinking?.();
+            return;
+          }
+          if (data?.type !== 'new_communication') return;
+          try {
+            const hasReply = await loadLatestHasReply();
+            if (hasReply) {
+              resolveReply();
+            }
+          } catch (error) {
+            console.error(`[${debugLabel}] realtime receive handling error`, error);
+          }
+        },
+      }
+    );
+  }, [clearRealtime, debugLabel, loadLatestHasReply, onAgentThinking, resolveReply]);
+
+  const ensureRealtimeSubscription = useCallback(async () => {
+    try {
+      const realtime = await fetchRealtimeData();
+      if (!realtime) return;
+      subscribeRealtime(realtime);
+    } catch {
+      // Realtime is best-effort; UI remains in waiting state until connection succeeds.
+    }
+  }, [fetchRealtimeData, subscribeRealtime]);
+
+  const beginReplyWait = useCallback((options?: { realtimeData?: RealtimeSubscriptionData | null }) => {
+    if (options?.realtimeData) {
+      subscribeRealtime(options.realtimeData);
+    } else {
+      void ensureRealtimeSubscription();
+    }
+  }, [ensureRealtimeSubscription, subscribeRealtime]);
+
+  useEffect(() => {
+    return () => {
+      clearRealtime();
+    };
+  }, [clearRealtime]);
+
+  return {
+    ensureRealtimeSubscription,
+    subscribeRealtime,
+    beginReplyWait,
+  };
+}

package/src/design_system/components/ChatWidget.tsx

@@ -5,6 +5,7 @@ import { X, MessageChatSquare } from '@untitledui/icons';
 import { Avatar } from '../elements/avatar/avatar';
 import { cx } from '../../utils/cx';
 import { captureEvent } from '../../tracking/captureEvent';
+import { useRealtimeReplyOrchestrator, type RealtimeSubscriptionData } from '../chat/useRealtimeReplyOrchestrator';
 
 interface Message {
   id: string;
@@ -126,47 +127,55 @@ export function ChatWidget({
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
-  // Poll for agent reply (simpler than WebSockets for public widget)
-  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  // Clear any in-flight poll on unmount
-  useEffect(() => {
-    return () => {
-      if (pollIntervalRef.current !== null) {
-        clearInterval(pollIntervalRef.current);
-      }
-    };
+  const hasAgentReplyWithBody = useCallback((list: Message[]) => {
+    const latest = list[list.length - 1];
+    return (
+      latest?.sender_type === 'agent' &&
+      latest?.body != null &&
+      String(latest.body).trim() !== ''
+    );
   }, []);
 
-  const pollForAgentReply = () => {
-    setWaitingForReply(true);
-
-    let attempts = 0;
-    const maxAttempts = 30;
-
-    pollIntervalRef.current = setInterval(async () => {
-      attempts++;
+  const fetchRealtimeData = useCallback(async (): Promise<RealtimeSubscriptionData | null> => {
+    if (!contactId && !sessionId) return null;
+    const query = contactId
+      ? `contact_id=${encodeURIComponent(contactId)}`
+      : `identifier=${encodeURIComponent(sessionId)}`;
+    const response = await fetch(`/api/chat/?action=realtime_token&${query}`);
+    if (!response.ok) return null;
+    const result = await response.json();
+    const token = result?.data?.token as string | undefined;
+    const contactIdForStream = result?.data?.contact_id as number | undefined;
+    const cableUrl = result?.data?.cable_url as string | undefined;
+    if (!token || !contactIdForStream || !cableUrl) return null;
+    return { token, contact_id: contactIdForStream, cable_url: cableUrl };
+  }, [contactId, sessionId]);
 
-      try {
-        const newMessages = await loadMessages();
+  const {
+    beginReplyWait,
+    ensureRealtimeSubscription,
+  } = useRealtimeReplyOrchestrator({
+    debugLabel: 'ChatWidget',
+    fetchRealtimeData,
+    loadLatestHasReply: async () => hasAgentReplyWithBody(await loadMessages()),
+    onReplyResolved: () => {
+      setWaitingForReply(false);
+      setIsLoading(false);
+    },
+    onAgentThinking: () => {
+      setWaitingForReply(true);
+    },
+  });
 
-        const latest = newMessages[newMessages.length - 1];
-        const hasAgentReplyWithBody =
-          latest?.sender_type === 'agent' &&
-          latest?.body != null &&
-          String(latest.body).trim() !== '';
+  const hasPersistedMessages = messages.some((message) => !String(message.id).startsWith('temp_'));
 
-        if (hasAgentReplyWithBody || attempts >= maxAttempts) {
-          clearInterval(pollIntervalRef.current!);
-          pollIntervalRef.current = null;
-          setWaitingForReply(false);
-          setIsLoading(false);
-        }
-      } catch (error) {
-        console.error('[ChatWidget] Error polling for messages:', error);
-      }
-    }, 1000);
-  };
+  useEffect(() => {
+    if (!isOpen || (!contactId && !sessionId)) return;
+    // Anonymous sessions do not have a contact row until the first message is sent.
+    // Ignore optimistic temp rows to avoid pre-contact token probes (404 noise).
+    if (!contactId && !hasPersistedMessages) return;
+    ensureRealtimeSubscription();
+  }, [contactId, ensureRealtimeSubscription, hasPersistedMessages, isOpen, sessionId]);
 
   const sendMessage = async () => {
     if (!inputValue.trim() || (!contactId && !sessionId)) return;
@@ -201,24 +210,36 @@ export function ChatWidget({
         captureEvent('chat_message_sent', { is_authenticated: Boolean(contactId) });
 
         if (result.data?.job_id) {
-          pollForAgentReply();
+          setWaitingForReply(true);
+          const realtimeFromSend = result.data?.realtime_token && result.data?.contact_id && result.data?.cable_url
+            ? {
+              token: result.data.realtime_token,
+              contact_id: result.data.contact_id,
+              cable_url: result.data.cable_url,
+            }
+            : null;
+          beginReplyWait({ realtimeData: realtimeFromSend });
         } else if (result.data?.status === 'agent_unavailable' || result.data?.status === 'no_auto_reply') {
           setIsLoading(false);
+          setWaitingForReply(false);
         } else {
           await loadMessages();
           setIsLoading(false);
+          setWaitingForReply(false);
         }
       } else {
         setMessages(prev => prev.filter(m => m.id !== tempMessage.id));
         captureEvent('chat_message_failed', { error: 'send_failed' });
         console.error('Failed to send message');
         setIsLoading(false);
+        setWaitingForReply(false);
       }
     } catch (error) {
       setMessages(prev => prev.filter(m => m.id !== tempMessage.id));
       captureEvent('chat_message_failed', { error: 'network_error' });
       console.error('Failed to send message:', error);
       setIsLoading(false);
+      setWaitingForReply(false);
     }
   };