keystone-design-bootstrap 1.0.85 → 1.0.87

package/src/design_system/portal/MessageComposer.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useState, useTransition, useRef, useEffect } from 'react';
+import React, { useState, useTransition, useRef, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+import { useRealtimeReplyOrchestrator, type RealtimeSubscriptionData } from '../chat/useRealtimeReplyOrchestrator';
 
 export function MessageComposer({ contactId }: { contactId: number }) {
   const [body, setBody] = useState('');
@@ -10,6 +11,42 @@ export function MessageComposer({ contactId }: { contactId: number }) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const router = useRouter();
 
+  const hasAgentReplyWithBody = useCallback(async () => {
+    const response = await fetch(`/api/chat/?contact_id=${encodeURIComponent(contactId)}`);
+    if (!response.ok) return false;
+    const result = await response.json();
+    const messages = (result?.data || []) as Array<{ sender_type?: string; body?: string | null }>;
+    const latest = messages[messages.length - 1];
+    return (
+      latest?.sender_type === 'agent' &&
+      latest?.body != null &&
+      String(latest.body).trim() !== ''
+    );
+  }, [contactId]);
+
+  const fetchRealtimeData = useCallback(async (): Promise<RealtimeSubscriptionData | null> => {
+    const response = await fetch(`/api/chat/?action=realtime_token&contact_id=${encodeURIComponent(contactId)}`);
+    if (!response.ok) return null;
+    const result = await response.json();
+    const token = result?.data?.token as string | undefined;
+    const streamContactId = result?.data?.contact_id as number | undefined;
+    const cableUrl = result?.data?.cable_url as string | undefined;
+    if (!token || !streamContactId || !cableUrl) return null;
+    return { token, contact_id: streamContactId, cable_url: cableUrl };
+  }, [contactId]);
+
+  const {
+    beginReplyWait,
+    ensureRealtimeSubscription,
+  } = useRealtimeReplyOrchestrator({
+    debugLabel: 'MessageComposer',
+    fetchRealtimeData,
+    loadLatestHasReply: hasAgentReplyWithBody,
+    onReplyResolved: () => {
+      router.refresh();
+    },
+  });
+
   // Auto-resize textarea
   useEffect(() => {
     const el = textareaRef.current;
@@ -18,6 +55,10 @@ export function MessageComposer({ contactId }: { contactId: number }) {
     el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
   }, [body]);
 
+  useEffect(() => {
+    void ensureRealtimeSubscription();
+  }, [ensureRealtimeSubscription]);
+
   function submit() {
     if (!body.trim() || isPending) return;
     setError(null);
@@ -34,6 +75,17 @@ export function MessageComposer({ contactId }: { contactId: number }) {
         } else {
           setBody('');
           router.refresh();
+          const hasBackgroundReplyJob = Boolean(result?.data?.job_id);
+          if (hasBackgroundReplyJob) {
+            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 });
+          }
         }
       } catch {
         setError('Failed to send message.');

package/src/design_system/portal/PortalPage.tsx

@@ -72,12 +72,13 @@ export interface PortalPageProps {
 /** HEAD-request the booking URL and inspect framing headers to decide whether to embed in an iframe. */
 async function checkIframeAllowed(url: string): Promise<boolean> {
   try {
-    const res = await fetch(url, {
+    const fetchOptions: RequestInit & { next?: { revalidate?: number } } = {
       method: 'HEAD',
       redirect: 'follow',
       // Cache for 1 hour — booking platforms rarely change their embedding policy.
       next: { revalidate: 3600 },
-    });
+    };
+    const res = await fetch(url, fetchOptions);
 
     const xfo = res.headers.get('x-frame-options')?.toUpperCase();
     if (xfo === 'DENY' || xfo === 'SAMEORIGIN') return false;

package/src/lib/server-api.ts

@@ -165,7 +165,8 @@ export async function getJobPosting(slug: string) {
 }
 
 export async function getSocialPosts() {
-  return serverFetch('/public/social_posts', defaultOptions);
+  // Social payloads can exceed Next's data-cache item size; avoid noisy build warnings.
+  return serverFetch('/public/social_posts', { cache: 'no-store' });
 }
 
 /** Packages (bundles of service items). */

package/src/next/routes/chat.ts

@@ -25,9 +25,22 @@ import { clientContextHeaders } from './proxy-headers';
 
 const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
 const API_KEY = process.env.API_KEY || '';
+const CONSUMER_TOKEN_COOKIE = 'ks_consumer_token';
 
 type JsonResponder = (body: unknown, init?: ResponseInit) => Response;
 
+function cookieValue(cookieHeader: string | null, key: string): string | null {
+  if (!cookieHeader) return null;
+  const token = cookieHeader
+    .split(';')
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(`${key}=`))
+    ?.split('=')
+    .slice(1)
+    .join('=');
+  return token ? decodeURIComponent(token) : null;
+}
+
 export function createChatRouteHandlers(deps?: { NextResponse?: { json: JsonResponder } }) {
   const json: JsonResponder = deps?.NextResponse?.json ?? ((body, init) => Response.json(body, init));
 
@@ -65,7 +78,9 @@ export function createChatRouteHandlers(deps?: { NextResponse?: { json: JsonResp
             { status: response.status }
           );
         }
-        return json({ success: true, data: data.data });
+        const responseData = data.data || {};
+        const cableUrl = API_URL.replace(/\/api\/v1\/?$/, '').replace(/^http/, 'ws') + '/cable';
+        return json({ success: true, data: { ...responseData, cable_url: cableUrl } });
       } catch (error) {
         console.error('Chat message error:', error);
         return json({ success: false, error: 'Network error. Please try again later.' }, { status: 500 });
@@ -76,9 +91,50 @@ export function createChatRouteHandlers(deps?: { NextResponse?: { json: JsonResp
     GET: async (request: Request): Promise<Response> => {
       try {
         const { searchParams } = new URL(request.url);
+        const action = searchParams.get('action');
         const identifier = searchParams.get('identifier');
         const contactId = searchParams.get('contact_id');
 
+        if (action === 'realtime_token') {
+          if (!identifier && !contactId) {
+            return json({ success: false, error: 'identifier or contact_id is required for realtime token.' }, { status: 400 });
+          }
+
+          const response = contactId
+            ? await (async () => {
+                const consumerToken = cookieValue(request.headers.get('cookie'), CONSUMER_TOKEN_COOKIE);
+                if (!consumerToken) {
+                  return new Response(JSON.stringify({ error: 'Unauthorized' }), {
+                    status: 401,
+                    headers: { 'Content-Type': 'application/json' },
+                  });
+                }
+                return fetch(
+                  `${API_URL}/consumer/me/contacts/${encodeURIComponent(contactId)}/realtime_token`,
+                  {
+                    headers: {
+                      Authorization: `Bearer ${consumerToken}`,
+                      ...(API_KEY ? { 'X-API-Key': API_KEY } : {}),
+                    },
+                  }
+                );
+              })()
+            : await fetch(
+                `${API_URL}/public/messages/realtime_token?identifier=${encodeURIComponent(identifier!)}`,
+                { headers: { 'X-API-Key': API_KEY } }
+              );
+          const data = await response.json();
+          if (!response.ok) {
+            return json(
+              { success: false, error: data.error || 'Failed to create realtime token.' },
+              { status: response.status }
+            );
+          }
+
+          const cableUrl = API_URL.replace(/\/api\/v1\/?$/, '').replace(/^http/, 'ws') + '/cable';
+          return json({ success: true, data: { ...(data.data || {}), cable_url: cableUrl } });
+        }
+
         if (!identifier && !contactId) {
           return json({ success: false, error: 'identifier or contact_id is required.' }, { status: 400 });
         }

package/src/types/rails-actioncable.d.ts

@@ -0,0 +1,16 @@
+declare module '@rails/actioncable' {
+  export function createConsumer(url?: string): {
+    subscriptions: {
+      create(
+        channel: Record<string, string>,
+        callbacks: {
+          connected?: () => void;
+          disconnected?: () => void;
+          rejected?: () => void;
+          received?: (data: { type?: string }) => void | Promise<void>;
+        }
+      ): { unsubscribe: () => void };
+    };
+    disconnect: () => void;
+  };
+}

package/dist/package-DeHKpQp7.d.ts

@@ -1,121 +0,0 @@
-import { P as PhotoAttachment, a as Photo } 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 CompanyInformation {
-    id: number;
-    company_name: string;
-    tagline: string;
-    mission_statement_markdown?: string;
-    about_text_markdown?: string;
-    description_markdown?: string;
-    values_markdown?: string;
-    stats_markdown?: string;
-    founded_year?: number;
-    logo_photo?: Photo;
-    favicon_url?: string;
-    facebook_url?: string;
-    instagram_url?: string;
-    tiktok_url?: string;
-    linkedin_url?: string;
-    twitter_url?: string;
-    youtube_url?: string;
-    pinterest_url?: string;
-    google_my_business_url?: string;
-    yelp_url?: string;
-    tripadvisor_url?: string;
-    google_reviews_url?: string;
-    primary_phone?: string;
-    primary_email?: string;
-    primary_address_line_1?: string;
-    primary_address_line_2?: string;
-    primary_city?: string;
-    primary_state?: string;
-    primary_zip_code?: string;
-    primary_country?: string;
-    support_email?: string;
-    sales_email?: string;
-    business_hours?: string;
-    external_management_url?: string;
-    /** Member portal URL for this account. When set, used as the primary CTA instead of external_management_url. */
-    portal_url?: string | null;
-    terms_of_service_markdown?: string;
-    privacy_policy_markdown?: string;
-    created_at: string;
-    updated_at: string;
-    photo_attachments?: PhotoAttachment[];
-    account_status?: string;
-    chat_enabled?: boolean;
-}
-type CompanyInformationResponse = CompanyInformation | null;
-
-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 { CompanyInformation as C, OfferPublic as O, Package as P, Service as S, CompanyInformationResponse as a, PackageItem as b, ServiceItem as c, ServiceParams as d, ServiceResponse as e };