keystone-design-bootstrap 1.0.84 → 1.0.86

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
 import { cookies } from 'next/headers';
-import { KeystoneLogoMinimal } from '../logo/keystone-logo-minimal';
+import { KeystoneBrandLockup } from '../logo/keystone-brand-lockup';
+import { KEYSTONE_APP_URL } from '../logo/keystone-logo-minimal';
 import { LogoutButton } from './LogoutButton';
 import { LoginModalController } from './LoginModalController';
 import { MessageComposer } from './MessageComposer';
@@ -287,7 +288,7 @@ function ServicesPanel({
       <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} tab="services" />
       <div className="divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden">
         {activeServices.map((service) => (
-          <details key={service.id} className="group">
+          <details key={service.id} className="group" open>
             <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
               <div>
                 <span className="font-medium text-primary">{service.name}</span>
@@ -715,9 +716,19 @@ export async function PortalPage({
                 </button>
               )}
 
-              <div className="flex items-center gap-1.5 border-l border-tertiary pl-3">
-                <KeystoneLogoMinimal className="size-5" />
-                <span className="hidden sm:block text-[10px] font-medium text-quaternary">Keystone</span>
+              <div className="border-l border-tertiary pl-3">
+                <a
+                  href={KEYSTONE_APP_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Visit Keystone website"
+                >
+                  <KeystoneBrandLockup
+                    className="gap-2"
+                    iconClassName="h-3.5"
+                    wordmarkClassName="hidden sm:block h-2.5"
+                  />
+                </a>
               </div>
             </div>
           </div>

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 });
         }