@xcelsior/ui-chat 2.0.3 → 2.0.5

package/src/hooks/useMessages.ts

@@ -1,8 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { IMessage, IChatConfig, UseMessagesReturn } from '../types';
 import type { UseWebSocketReturn } from './useWebSocket';
 import { fetchMessages } from '../utils/api';
 
+/** Max time (ms) to show the bot thinking indicator before auto-clearing */
+const BOT_THINKING_TIMEOUT = 15_000;
+
+/** Conversation statuses where the bot will NOT respond */
+const AGENT_STATUSES = new Set(['agent_active', 'pending_agent']);
+
 export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig): UseMessagesReturn {
     const [messages, setMessages] = useState<IMessage[]>([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -11,8 +17,10 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
     const [hasMore, setHasMore] = useState(true);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
     const [isBotThinking, setIsBotThinking] = useState(false);
+    const botThinkingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    /** True when an agent has taken over — set from conversation status OR message history */
+    const agentActiveRef = useRef(false);
 
-    // Extract stable references from config
     const { httpApiUrl, conversationId, headers, onError, toast } = config;
 
     const headersWithApiKey = useMemo(
@@ -23,14 +31,44 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         [headers, config.apiKey]
     );
 
-    // Fetch existing messages when conversationId changes
+    /** Clear bot thinking timer and state */
+    const clearBotThinking = useCallback(() => {
+        setIsBotThinking(false);
+        if (botThinkingTimerRef.current) {
+            clearTimeout(botThinkingTimerRef.current);
+            botThinkingTimerRef.current = null;
+        }
+    }, []);
+
+    // ── Fetch conversation status to seed agentActiveRef ──────────────
+    // This is the PRIMARY mechanism — not relying on message history pagination.
     useEffect(() => {
-        const loadMessages = async () => {
-            // Only fetch if we have httpApiUrl and conversationId
-            if (!httpApiUrl || !conversationId) {
-                return;
+        if (!httpApiUrl || !conversationId) return;
+
+        const fetchStatus = async () => {
+            try {
+                const url = `${httpApiUrl}/conversation?conversationId=${encodeURIComponent(conversationId)}`;
+                const res = await fetch(url, { headers: headersWithApiKey });
+                if (!res.ok) return;
+                const json = await res.json();
+                // Backend returns { data: { conversation: { status, ... } } } or { data: { status, ... } }
+                const conv = json.data?.conversation ?? json.data;
+                if (conv?.status && AGENT_STATUSES.has(conv.status)) {
+                    agentActiveRef.current = true;
+                }
+            } catch {
+                // Non-critical — fallback to message history check
             }
+        };
+
+        fetchStatus();
+    }, [httpApiUrl, conversationId, headersWithApiKey]);
 
+    // ── Fetch existing messages ──────────────────────────────────────
+    useEffect(() => {
+        if (!httpApiUrl || !conversationId) return;
+
+        const loadMessages = async () => {
             setIsLoading(true);
             setError(null);
 
@@ -44,6 +82,10 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
                 setMessages(result.data);
                 setNextPageToken(result.nextPageToken);
                 setHasMore(!!result.nextPageToken);
+                // Secondary check: agent messages in the visible page
+                if (result.data.some((m: IMessage) => m.senderType === 'agent')) {
+                    agentActiveRef.current = true;
+                }
             } catch (err) {
                 const error = err instanceof Error ? err : new Error('Failed to load messages');
                 setError(error);
@@ -55,50 +97,89 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         };
 
         loadMessages();
-        // Only re-run when conversationId or httpApiUrl changes
     }, [conversationId, httpApiUrl, headersWithApiKey, onError, toast]);
 
-    // Extract onMessageReceived callback
     const { onMessageReceived } = config;
 
-    // Listen for incoming messages from WebSocket
+    // ── Listen for incoming messages from WebSocket ───────────────────
     useEffect(() => {
         if (websocket.lastMessage?.type === 'message' && websocket.lastMessage.data) {
             const newMessage: IMessage = websocket.lastMessage.data;
 
-            if (conversationId && newMessage.conversationId !== conversationId) {
-                // Ignore messages for other conversations
-                return;
-            }
+            if (conversationId && newMessage.conversationId !== conversationId) return;
+
             setMessages((prev) => {
-                // Avoid duplicates
-                if (prev.some((msg) => msg.id === newMessage.id)) {
-                    return prev;
+                if (prev.some((msg) => msg.id === newMessage.id)) return prev;
+                const newMsgTime = new Date(newMessage.createdAt).getTime();
+                const tempIdx = prev.findIndex(
+                    (msg) =>
+                        msg.id.startsWith('temp-') &&
+                        msg.content === newMessage.content &&
+                        msg.senderId === newMessage.senderId &&
+                        Math.abs(new Date(msg.createdAt).getTime() - newMsgTime) < 10_000
+                );
+                if (tempIdx >= 0) {
+                    const next = [...prev];
+                    next[tempIdx] = newMessage;
+                    return next;
                 }
                 return [...prev, newMessage];
             });
 
-            // Clear bot thinking state when bot or system message arrives
-            if (newMessage.senderType === 'bot' || newMessage.senderType === 'system') {
-                setIsBotThinking(false);
+            if (newMessage.senderType === 'agent') {
+                agentActiveRef.current = true;
+            }
+
+            // Clear bot thinking when a non-customer message arrives
+            if (newMessage.senderType !== 'customer') {
+                clearBotThinking();
             }
 
-            // Notify parent component about new message
             onMessageReceived?.(newMessage);
         }
-    }, [websocket.lastMessage, onMessageReceived, conversationId]);
+    }, [websocket.lastMessage, onMessageReceived, conversationId, clearBotThinking]);
 
+    // ── Handle bot_not_responding + conversation_updated events ───────
+    useEffect(() => {
+        if (!websocket.lastMessage) return;
+        const { type, data } = websocket.lastMessage;
+
+        if (type === 'bot_not_responding') {
+            if (data?.conversationId && conversationId && data.conversationId !== conversationId) return;
+            clearBotThinking();
+            agentActiveRef.current = true;
+        }
+
+        if (type === 'conversation_updated') {
+            if (data?.conversationId && conversationId && data.conversationId !== conversationId) return;
+            if (data?.status && AGENT_STATUSES.has(data.status)) {
+                agentActiveRef.current = true;
+                clearBotThinking();
+            }
+        }
+    }, [websocket.lastMessage, conversationId, clearBotThinking]);
+
+    // ── addMessage (used for optimistic customer messages) ────────────
     const addMessage = useCallback((message: IMessage) => {
+        // Read agentActiveRef BEFORE the async setMessages
+        const isAgentActive = agentActiveRef.current;
+
         setMessages((prev) => {
-            // Avoid duplicates
-            if (prev.some((msg) => msg.id === message.id)) {
-                return prev;
-            }
+            if (prev.some((msg) => msg.id === message.id)) return prev;
             return [...prev, message];
         });
-        // Show bot thinking indicator immediately when customer sends a message
-        if (message.senderType === 'customer') {
+
+        if (message.senderType === 'agent') {
+            agentActiveRef.current = true;
+        }
+
+        // Only show bot thinking for customer messages when NO agent is active
+        if (message.senderType === 'customer' && !isAgentActive) {
             setIsBotThinking(true);
+            if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+            botThinkingTimerRef.current = setTimeout(() => {
+                setIsBotThinking(false);
+            }, BOT_THINKING_TIMEOUT);
         }
     }, []);
 
@@ -108,12 +189,11 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
 
     const clearMessages = useCallback(() => {
         setMessages([]);
+        agentActiveRef.current = false;
     }, []);
 
     const loadMore = useCallback(async () => {
-        if (!hasMore || isLoadingMore || !httpApiUrl || !conversationId || !nextPageToken) {
-            return;
-        }
+        if (!hasMore || isLoadingMore || !httpApiUrl || !conversationId || !nextPageToken) return;
 
         setIsLoadingMore(true);
         setError(null);
@@ -121,11 +201,7 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         try {
             const result = await fetchMessages(
                 httpApiUrl,
-                {
-                    conversationId,
-                    limit: 20,
-                    pageToken: nextPageToken,
-                },
+                { conversationId, limit: 20, pageToken: nextPageToken },
                 headersWithApiKey
             );
 
@@ -139,15 +215,13 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         } finally {
             setIsLoadingMore(false);
         }
-    }, [
-        hasMore,
-        isLoadingMore,
-        httpApiUrl,
-        conversationId,
-        nextPageToken,
-        headersWithApiKey,
-        onError,
-    ]);
+    }, [hasMore, isLoadingMore, httpApiUrl, conversationId, nextPageToken, headersWithApiKey, onError]);
+
+    useEffect(() => {
+        return () => {
+            if (botThinkingTimerRef.current) clearTimeout(botThinkingTimerRef.current);
+        };
+    }, []);
 
     return {
         messages,

package/src/hooks/useWebSocket.ts

@@ -28,6 +28,13 @@ export function useWebSocket(
     const reconnectAttemptsRef = useRef(0);
     const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
     const abortedRef = useRef(false);
+    /**
+     * Monotonically increasing counter incremented each time connect() is called.
+     * Each WebSocket closure captures the generation at open time; if the generation
+     * has advanced by the time onclose fires, the close event belongs to a stale
+     * connection and must not trigger reconnection.
+     */
+    const connectionGenerationRef = useRef(0);
     const maxReconnectAttempts = 5;
     const reconnectDelay = 3000;
 
@@ -47,10 +54,8 @@ export function useWebSocket(
                 const message: IWebSocketMessage = JSON.parse(event.data);
                 setLastMessage(message);
 
-                // Handle different message types
-                if (message.type === 'message' && message.data) {
-                    config.onMessageReceived?.(message.data);
-                } else if (message.type === 'error') {
+                // Handle error messages — regular messages are handled by useMessages via lastMessage
+                if (message.type === 'error') {
                     const err = new Error(message.data?.message || 'WebSocket error');
                     setError(err);
                     config.onError?.(err);
@@ -78,6 +83,10 @@ export function useWebSocket(
         // Skip if the effect was already cleaned up (React Strict Mode)
         if (abortedRef.current) return;
 
+        // Capture this connection's generation so that stale onclose/onopen
+        // callbacks from a previous WebSocket instance are ignored.
+        const generation = ++connectionGenerationRef.current;
+
         console.log('connecting to WebSocket...', config.currentUser, config.conversationId);
         try {
             // Clean up existing connection
@@ -103,6 +112,7 @@ export function useWebSocket(
             const ws = new WebSocket(url.toString());
 
             ws.onopen = () => {
+                if (generation !== connectionGenerationRef.current) return;
                 if (abortedRef.current) {
                     ws.close(1000, 'Effect cleaned up');
                     return;
@@ -115,6 +125,7 @@ export function useWebSocket(
             };
 
             ws.onerror = (event) => {
+                if (generation !== connectionGenerationRef.current) return;
                 if (abortedRef.current) return;
                 console.error('WebSocket error:', event);
                 const err = new Error('WebSocket connection error');
@@ -123,6 +134,8 @@ export function useWebSocket(
             };
 
             ws.onclose = (event) => {
+                // Ignore close events from superseded connections (reconnect or re-mount).
+                if (generation !== connectionGenerationRef.current) return;
                 if (abortedRef.current) return;
                 console.log('WebSocket closed:', event.code, event.reason);
                 setIsConnected(false);

package/src/index.tsx

@@ -4,6 +4,9 @@ export type { ChatWidgetProps } from './components/ChatWidget';
 export { Chat } from './components/Chat';
 
 // Individual components (for custom implementations)
+export { BookingCancelledCard } from './components/BookingCancelledCard';
+export { BookingConfirmationCard } from './components/BookingConfirmationCard';
+export { BookingSlotPicker } from './components/BookingSlotPicker';
 export { ChatHeader } from './components/ChatHeader';
 export { ChatInput } from './components/ChatInput';
 export { MarkdownMessage } from './components/MarkdownMessage';
@@ -48,6 +51,10 @@ import type {
     ConversationPriority,
     ConversationChannel,
     UseMessagesReturn,
+    IBookingSlot,
+    IBookingData,
+    IBookingConfirmationData,
+    IBookingCancelledData,
 } from './types';
 
 export type {
@@ -68,4 +75,8 @@ export type {
     ConversationPriority,
     ConversationChannel,
     UseMessagesReturn,
+    IBookingSlot,
+    IBookingData,
+    IBookingConfirmationData,
+    IBookingCancelledData,
 };

package/src/types.ts

@@ -8,7 +8,7 @@ export interface IUser {
 }
 
 // Message types
-export type MessageType = 'text' | 'image' | 'file' | 'system';
+export type MessageType = 'text' | 'image' | 'file' | 'system' | 'booking_slots' | 'booking_confirmation' | 'booking_cancelled';
 export type MessageStatus = 'sent' | 'delivered' | 'read';
 
 export interface IMessage {
@@ -49,9 +49,46 @@ export interface IConversation {
     metadata?: Record<string, unknown>;
 }
 
+// Booking data interfaces
+export interface IBookingSlot {
+    date: string;       // ISO date: "2026-03-25"
+    dayLabel: string;   // "Tue 25"
+    dayName: string;    // "Tuesday"
+    slots: string[];    // ["09:00", "09:30", "10:00", ...]
+}
+
+export interface IBookingData {
+    availableDates: IBookingSlot[];
+    timezone: string;
+    meetingDuration: number;
+}
+
+export interface IBookingConfirmationData {
+    bookingId: string;
+    visitorName: string;
+    meetingDate: string;
+    meetingTime: string;
+    meetingDuration: number;
+    meetingPurpose: string;
+    meetLink?: string;
+    calendarLink?: string;
+    timezone: string;
+}
+
+export interface IBookingCancelledData {
+    bookingId: string;
+    meetingDate: string;
+    meetingTime: string;
+    meetingPurpose: string;
+    cancelledBy: 'visitor' | 'admin';
+}
+
 // WebSocket message types
 export interface IWebSocketMessage {
-    type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system' | 'escalation_requested' | 'bot_response' | 'conversation_updated';
+    type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system'
+        | 'escalation_requested' | 'bot_response' | 'conversation_updated'
+        | 'bot_not_responding'
+        | 'booking_slots' | 'booking_confirmation' | 'booking_cancelled';
     data: any;
 }
 

package/src/utils/api.ts

@@ -26,6 +26,7 @@ export async function fetchMessages(
                 'Content-Type': 'application/json',
                 ...headers,
             },
+            timeout: 8000,
         });
 
         return {

package/storybook-static/assets/BookingCancelledCard-XHuB-Ebp.js

@@ -0,0 +1,31 @@
+import{j as e}from"./jsx-runtime-Cf8x2fCZ.js";import{c as l,C as j,G as S}from"./globe-BtMvkLMD.js";/**
+ * @license lucide-react v0.477.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const v=[["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M16 2v4",key:"4m81vk"}],["path",{d:"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",key:"3spt84"}],["path",{d:"M3 10h18",key:"8toen8"}],["path",{d:"M16 19h6",key:"xwg31i"}],["path",{d:"M19 16v6",key:"tddt3s"}]],_=l("CalendarPlus",v);/**
+ * @license lucide-react v0.477.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const z=[["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M16 2v4",key:"4m81vk"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["path",{d:"M3 10h18",key:"8toen8"}]],k=l("Calendar",z);/**
+ * @license lucide-react v0.477.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const B=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]],I=l("CircleCheck",B);/**
+ * @license lucide-react v0.477.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const M=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]],T=l("CircleX",M);/**
+ * @license lucide-react v0.477.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const w=[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}]],m=l("MessageSquare",w);/**
+ * @license lucide-react v0.477.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const L=[["path",{d:"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",key:"ftymec"}],["rect",{x:"2",y:"6",width:"14",height:"12",rx:"2",key:"158x01"}]],N=l("Video",L);function h({data:n,theme:r}){const d=(r==null?void 0:r.background)||"#00001a",i=(()=>{if(!d.startsWith("#"))return!1;const c=d.replace("#",""),u=parseInt(c.substring(0,2),16),f=parseInt(c.substring(2,4),16),C=parseInt(c.substring(4,6),16);return(.299*u+.587*f+.114*C)/255>.5})(),t=(r==null?void 0:r.primary)||"#337eff",p=(r==null?void 0:r.statusPositive)||"#22c55e",o=(r==null?void 0:r.text)||(i?"#1a1a2e":"#f7f7f8"),x=(r==null?void 0:r.textMuted)||(i?"rgba(0,0,0,0.45)":"rgba(247,247,248,0.4)"),g=i?{backgroundColor:"rgba(0,0,0,0.03)",boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.08)",borderRadius:"14px",padding:"16px",overflow:"hidden"}:{backgroundColor:"rgba(255,255,255,0.04)",boxShadow:"inset 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 1px 0 0 rgba(255,255,255,0.1)",borderRadius:"14px",padding:"16px",overflow:"hidden"},a={display:"flex",alignItems:"flex-start",gap:"8px",marginBottom:"8px"},y={height:"1px",backgroundColor:i?"rgba(0,0,0,0.06)":"rgba(255,255,255,0.06)",margin:"12px 0"},s={display:"flex",alignItems:"center",justifyContent:"center",gap:"6px",flex:1,padding:"9px 12px",borderRadius:"9px",fontSize:"12px",fontWeight:"600",letterSpacing:"0.01em",cursor:"pointer",textDecoration:"none",border:"none",transition:"opacity 0.15s ease"};return e.jsxs("div",{style:g,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"10px",marginBottom:"14px"},children:[e.jsx(I,{size:22,color:p,"aria-hidden":"true"}),e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:"14px",fontWeight:"700",color:o,letterSpacing:"0.006em",lineHeight:1.3},children:"Meeting Confirmed"}),e.jsx("p",{style:{fontSize:"11px",color:p,letterSpacing:"0.01em",marginTop:"1px"},children:"You'll receive a calendar invite shortly"})]})]}),e.jsxs("div",{children:[e.jsxs("div",{style:a,children:[e.jsx(k,{size:14,color:t,"aria-hidden":"true",style:{marginTop:"1px",flexShrink:0}}),e.jsxs("span",{style:{fontSize:"13px",color:o,lineHeight:1.4},children:[n.meetingDate," at ",n.meetingTime]})]}),e.jsxs("div",{style:a,children:[e.jsx(j,{size:14,color:t,"aria-hidden":"true",style:{marginTop:"1px",flexShrink:0}}),e.jsxs("span",{style:{fontSize:"13px",color:o,lineHeight:1.4},children:[n.meetingDuration," minutes"]})]}),e.jsxs("div",{style:{...a,marginBottom:"0"},children:[e.jsx(m,{size:14,color:t,"aria-hidden":"true",style:{marginTop:"1px",flexShrink:0}}),e.jsx("span",{style:{fontSize:"13px",color:o,lineHeight:1.4},children:n.meetingPurpose})]})]}),n.timezone&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"5px",marginTop:"8px"},children:[e.jsx(S,{size:11,color:x,"aria-hidden":"true"}),e.jsx("span",{style:{fontSize:"11px",color:x,letterSpacing:"0.01em"},children:n.timezone})]}),(n.meetLink||n.calendarLink)&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:y}),e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[n.meetLink&&e.jsxs("a",{href:n.meetLink,target:"_blank",rel:"noopener noreferrer",style:{...s,background:`linear-gradient(135deg, ${t}, ${(r==null?void 0:r.primaryStrong)||"#005eff"})`,color:"#ffffff",boxShadow:`0 2px 8px -2px ${t}50`},children:[e.jsx(N,{size:13,"aria-hidden":"true"}),"Join Meet"]}),n.calendarLink&&e.jsxs("a",{href:n.calendarLink,target:"_blank",rel:"noopener noreferrer",style:{...s,backgroundColor:i?"rgba(0,0,0,0.05)":"rgba(255,255,255,0.07)",color:o,boxShadow:i?"inset 0 0 0 1px rgba(0,0,0,0.1)":"inset 0 0 0 0.5px rgba(255,255,255,0.12)"},children:[e.jsx(_,{size:13,"aria-hidden":"true"}),"Add to Calendar"]})]})]})]})}try{h.displayName="BookingConfirmationCard",h.__docgenInfo={description:"",displayName:"BookingConfirmationCard",props:{data:{defaultValue:null,description:"",name:"data",required:!0,type:{name:"IBookingConfirmationData"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"IChatTheme | undefined"}}}}}catch{}function b({data:n,theme:r}){const d=(r==null?void 0:r.background)||"#00001a",i=(()=>{if(!d.startsWith("#"))return!1;const s=d.replace("#",""),c=parseInt(s.substring(0,2),16),u=parseInt(s.substring(2,4),16),f=parseInt(s.substring(4,6),16);return(.299*c+.587*u+.114*f)/255>.5})(),t=(r==null?void 0:r.statusNegative)||"#ef4444",p=(r==null?void 0:r.text)||(i?"#1a1a2e":"#f7f7f8"),o=(r==null?void 0:r.textMuted)||(i?"rgba(0,0,0,0.45)":"rgba(247,247,248,0.4)"),x=i?{backgroundColor:"rgba(239,68,68,0.04)",boxShadow:"inset 0 0 0 1px rgba(239,68,68,0.12)",borderRadius:"14px",padding:"16px"}:{backgroundColor:"rgba(239,68,68,0.06)",boxShadow:"inset 0 0 0 0.5px rgba(239,68,68,0.18)",borderRadius:"14px",padding:"16px"},g={fontSize:"13px",color:o,lineHeight:1.4,textDecoration:"line-through",textDecorationColor:i?"rgba(0,0,0,0.25)":"rgba(255,255,255,0.2)"},a={display:"flex",alignItems:"flex-start",gap:"8px",marginBottom:"8px"},y=n.cancelledBy==="visitor"?"Cancelled by you":"Cancelled by support";return e.jsxs("div",{style:x,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"10px",marginBottom:"14px"},children:[e.jsx(T,{size:22,color:t,"aria-hidden":"true"}),e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:"14px",fontWeight:"700",color:p,letterSpacing:"0.006em",lineHeight:1.3},children:"Meeting Cancelled"}),e.jsx("p",{style:{fontSize:"11px",color:t,letterSpacing:"0.01em",marginTop:"1px",opacity:.8},children:y})]})]}),e.jsxs("div",{children:[e.jsxs("div",{style:a,children:[e.jsx(k,{size:14,color:o,"aria-hidden":"true",style:{marginTop:"1px",flexShrink:0}}),e.jsxs("span",{style:g,children:[n.meetingDate," at ",n.meetingTime]})]}),e.jsxs("div",{style:{...a,marginBottom:"0"},children:[e.jsx(m,{size:14,color:o,"aria-hidden":"true",style:{marginTop:"1px",flexShrink:0}}),e.jsx("span",{style:g,children:n.meetingPurpose})]})]})]})}try{b.displayName="BookingCancelledCard",b.__docgenInfo={description:"",displayName:"BookingCancelledCard",props:{data:{defaultValue:null,description:"",name:"data",required:!0,type:{name:"IBookingCancelledData"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"IChatTheme | undefined"}}}}}catch{}export{h as B,b as a};

package/storybook-static/assets/BookingCards.stories-DfJ482RS.js

@@ -0,0 +1,66 @@
+import{j as e}from"./jsx-runtime-Cf8x2fCZ.js";import{B,a as j}from"./BookingCancelledCard-XHuB-Ebp.js";import"./index-yBjzXJbu.js";import"./globe-BtMvkLMD.js";import"./index--qcDGAq6.js";const T={title:"Components/BookingConfirmationCard",component:B,parameters:{layout:"padded"},tags:["autodocs"],decorators:[a=>e.jsx("div",{style:{maxWidth:360,background:"#00001a",padding:16,borderRadius:12},children:e.jsx(a,{})})]},d={bookingId:"bk_abc123",visitorName:"John Doe",meetingDate:"2026-03-26",meetingTime:"10:00",meetingDuration:30,meetingPurpose:"Discuss mobile app development project",meetLink:"https://meet.google.com/abc-defg-hij",calendarLink:"https://calendar.google.com/event?eid=abc123",timezone:"Australia/Sydney"},n={args:{data:d}},r={args:{data:{...d,meetLink:void 0}}},o={args:{data:d,theme:{primary:"#337eff",background:"#ffffff",text:"#1a1a2e",textMuted:"rgba(0,0,0,0.35)"}},decorators:[a=>e.jsx("div",{style:{maxWidth:360,background:"#ffffff",padding:16,borderRadius:12},children:e.jsx(a,{})})]},t={render:a=>e.jsx("div",{style:{maxWidth:360,background:"#00001a",padding:16,borderRadius:12},children:e.jsx(j,{...a})}),args:{data:{bookingId:"bk_abc123",meetingDate:"2026-03-26",meetingTime:"10:00",meetingPurpose:"Discuss mobile app development project",cancelledBy:"visitor"}}},i={render:a=>e.jsx("div",{style:{maxWidth:360,background:"#00001a",padding:16,borderRadius:12},children:e.jsx(j,{...a})}),args:{data:{bookingId:"bk_abc123",meetingDate:"2026-03-26",meetingTime:"10:00",meetingPurpose:"Discuss mobile app development project",cancelledBy:"admin"}}};var s,m,c;n.parameters={...n.parameters,docs:{...(s=n.parameters)==null?void 0:s.docs,source:{originalSource:`{
+  args: {
+    data: mockConfirmation
+  }
+}`,...(c=(m=n.parameters)==null?void 0:m.docs)==null?void 0:c.source}}};var g,p,l;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`{
+  args: {
+    data: {
+      ...mockConfirmation,
+      meetLink: undefined
+    }
+  }
+}`,...(l=(p=r.parameters)==null?void 0:p.docs)==null?void 0:l.source}}};var u,f,b;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  args: {
+    data: mockConfirmation,
+    theme: {
+      primary: '#337eff',
+      background: '#ffffff',
+      text: '#1a1a2e',
+      textMuted: 'rgba(0,0,0,0.35)'
+    }
+  },
+  decorators: [Story => <div style={{
+    maxWidth: 360,
+    background: '#ffffff',
+    padding: 16,
+    borderRadius: 12
+  }}>
+                <Story />
+            </div>]
+}`,...(b=(f=o.parameters)==null?void 0:f.docs)==null?void 0:b.source}}};var k,C,x;t.parameters={...t.parameters,docs:{...(k=t.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  render: args => <div style={{
+    maxWidth: 360,
+    background: '#00001a',
+    padding: 16,
+    borderRadius: 12
+  }}>
+            <BookingCancelledCard {...args} />
+        </div>,
+  args: {
+    data: {
+      bookingId: 'bk_abc123',
+      meetingDate: '2026-03-26',
+      meetingTime: '10:00',
+      meetingPurpose: 'Discuss mobile app development project',
+      cancelledBy: 'visitor'
+    } as IBookingCancelledData
+  }
+}`,...(x=(C=t.parameters)==null?void 0:C.docs)==null?void 0:x.source}}};var y,h,v;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  render: args => <div style={{
+    maxWidth: 360,
+    background: '#00001a',
+    padding: 16,
+    borderRadius: 12
+  }}>
+            <BookingCancelledCard {...args} />
+        </div>,
+  args: {
+    data: {
+      bookingId: 'bk_abc123',
+      meetingDate: '2026-03-26',
+      meetingTime: '10:00',
+      meetingPurpose: 'Discuss mobile app development project',
+      cancelledBy: 'admin'
+    } as IBookingCancelledData
+  }
+}`,...(v=(h=i.parameters)==null?void 0:h.docs)==null?void 0:v.source}}};const W=["Confirmed","ConfirmedNoMeetLink","ConfirmedLightTheme","CancelledByVisitor","CancelledByAdmin"];export{i as CancelledByAdmin,t as CancelledByVisitor,n as Confirmed,o as ConfirmedLightTheme,r as ConfirmedNoMeetLink,W as __namedExportsOrder,T as default};

package/storybook-static/assets/BookingSlotPicker-BkfssueW.js

@@ -0,0 +1 @@
+import{j as t}from"./jsx-runtime-Cf8x2fCZ.js";import{r as y}from"./index--qcDGAq6.js";import{G as B,C as D}from"./globe-BtMvkLMD.js";function S({data:i,theme:r,onSlotSelected:m,disabled:o=!1}){var b;const[p,h]=y.useState(0),[a,k]=y.useState(null),x=(r==null?void 0:r.background)||"#00001a",d=(()=>{if(!x.startsWith("#"))return!1;const e=x.replace("#",""),n=parseInt(e.substring(0,2),16),c=parseInt(e.substring(2,4),16),I=parseInt(e.substring(4,6),16);return(.299*n+.587*c+.114*I)/255>.5})(),j=(r==null?void 0:r.primary)||"#337eff",g=(r==null?void 0:r.text)||(d?"#1a1a2e":"#f7f7f8"),s=(r==null?void 0:r.textMuted)||(d?"rgba(0,0,0,0.45)":"rgba(247,247,248,0.4)"),C=d?{backgroundColor:"rgba(0,0,0,0.03)",boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.08)",borderRadius:"14px",padding:"14px"}:{backgroundColor:"rgba(255,255,255,0.04)",boxShadow:"inset 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 1px 0 0 rgba(255,255,255,0.1)",borderRadius:"14px",padding:"14px"},u={backgroundColor:j,color:"#ffffff",borderRadius:"20px",padding:"5px 12px",fontSize:"12px",fontWeight:"600",letterSpacing:"0.01em",cursor:o?"default":"pointer",border:"none",flexShrink:0},f=d?{backgroundColor:"rgba(0,0,0,0.04)",color:g,borderRadius:"20px",padding:"5px 12px",fontSize:"12px",fontWeight:"500",letterSpacing:"0.01em",cursor:o?"default":"pointer",border:"none",boxShadow:"inset 0 0 0 1px rgba(0,0,0,0.1)",flexShrink:0}:{backgroundColor:"rgba(255,255,255,0.05)",color:g,borderRadius:"20px",padding:"5px 12px",fontSize:"12px",fontWeight:"500",letterSpacing:"0.01em",cursor:o?"default":"pointer",border:"none",boxShadow:"inset 0 0 0 0.5px rgba(255,255,255,0.1)",flexShrink:0},v=(a==null?void 0:a.date)===((b=i.availableDates[p])==null?void 0:b.date)?a.time:null,z=(e,n)=>{o||(k({date:e,time:n}),m(e,n))},l=i.availableDates[p];return t.jsxs("div",{style:C,children:[t.jsx("p",{style:{fontSize:"11px",fontWeight:"600",letterSpacing:"0.06em",textTransform:"uppercase",color:s,marginBottom:"10px"},children:"Select a date"}),t.jsx("div",{style:{display:"flex",gap:"6px",overflowX:"auto",paddingBottom:"2px",scrollbarWidth:"none",msOverflowStyle:"none",marginBottom:"14px"},children:i.availableDates.map((e,n)=>t.jsx("button",{type:"button",onClick:()=>!o&&h(n),style:n===p?u:f,title:e.dayName,"aria-pressed":n===p,disabled:o,children:e.dayLabel},e.date))}),l&&t.jsxs(t.Fragment,{children:[t.jsx("p",{style:{fontSize:"11px",fontWeight:"600",letterSpacing:"0.06em",textTransform:"uppercase",color:s,marginBottom:"8px"},children:l.dayName}),t.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"6px",marginBottom:"14px"},children:l.slots.map(e=>{const n=v===e,c=(a==null?void 0:a.date)===l.date&&a.time===e;return t.jsx("button",{type:"button",onClick:()=>z(l.date,e),disabled:o&&!c,"aria-pressed":n,style:{...n?u:f,padding:"7px 8px",borderRadius:"8px",fontSize:"13px",fontWeight:n?"600":"400",textAlign:"center",opacity:o&&!c?.4:1,transition:"opacity 0.15s ease"},children:e},e)})})]}),t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"8px"},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"5px"},children:[t.jsx(B,{size:11,color:s,"aria-hidden":"true"}),t.jsx("span",{style:{fontSize:"11px",color:s,letterSpacing:"0.01em"},children:i.timezone})]}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"5px"},children:[t.jsx(D,{size:11,color:s,"aria-hidden":"true"}),t.jsxs("span",{style:{fontSize:"11px",color:s,letterSpacing:"0.01em"},children:[i.meetingDuration," min"]})]})]})]})}try{S.displayName="BookingSlotPicker",S.__docgenInfo={description:"",displayName:"BookingSlotPicker",props:{data:{defaultValue:null,description:"",name:"data",required:!0,type:{name:"IBookingData"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"IChatTheme | undefined"}},onSlotSelected:{defaultValue:null,description:"",name:"onSlotSelected",required:!0,type:{name:"(date: string, time: string) => void"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}}}}}catch{}export{S as B};

package/storybook-static/assets/BookingSlotPicker.stories-fYlg1zLg.js

@@ -0,0 +1,50 @@
+import{j as r}from"./jsx-runtime-Cf8x2fCZ.js";import{B as j}from"./BookingSlotPicker-BkfssueW.js";import"./index-yBjzXJbu.js";import"./index--qcDGAq6.js";import"./globe-BtMvkLMD.js";const A={title:"Components/BookingSlotPicker",component:j,parameters:{layout:"padded"},tags:["autodocs"],decorators:[e=>r.jsx("div",{style:{maxWidth:360,background:"#00001a",padding:16,borderRadius:12},children:r.jsx(e,{})})]},n={availableDates:[{date:"2026-03-25",dayLabel:"Wed 25",dayName:"Wednesday",slots:["09:00","09:30","10:00","10:30","14:00","14:30","15:00"]},{date:"2026-03-26",dayLabel:"Thu 26",dayName:"Thursday",slots:["09:00","10:00","11:00","13:00","14:00"]},{date:"2026-03-27",dayLabel:"Fri 27",dayName:"Friday",slots:["09:30","10:30","11:30"]},{date:"2026-03-28",dayLabel:"Mon 30",dayName:"Monday",slots:["09:00","09:30","10:00","10:30","11:00","11:30","13:00","14:00","15:00","16:00"]},{date:"2026-03-31",dayLabel:"Tue 31",dayName:"Tuesday",slots:["14:00","14:30","15:00","15:30","16:00"]}],timezone:"Australia/Sydney",meetingDuration:30},t={args:{data:n,onSlotSelected:(e,a)=>console.log("Selected:",e,a)}},o={args:{data:n,onSlotSelected:(e,a)=>console.log("Selected:",e,a),theme:{primary:"#337eff",background:"#ffffff",text:"#1a1a2e",textMuted:"rgba(0,0,0,0.35)"}},decorators:[e=>r.jsx("div",{style:{maxWidth:360,background:"#ffffff",padding:16,borderRadius:12},children:r.jsx(e,{})})]},d={args:{data:n,onSlotSelected:(e,a)=>console.log("Selected:",e,a),disabled:!0}},s={args:{data:{availableDates:[{date:"2026-03-26",dayLabel:"Thu 26",dayName:"Thursday",slots:["14:00"]},{date:"2026-03-27",dayLabel:"Fri 27",dayName:"Friday",slots:["09:00","15:30"]}],timezone:"Australia/Sydney",meetingDuration:30},onSlotSelected:(e,a)=>console.log("Selected:",e,a)}};var i,l,c,m,y;t.parameters={...t.parameters,docs:{...(i=t.parameters)==null?void 0:i.docs,source:{originalSource:`{
+  args: {
+    data: mockBookingData,
+    onSlotSelected: (date, time) => console.log('Selected:', date, time)
+  }
+}`,...(c=(l=t.parameters)==null?void 0:l.docs)==null?void 0:c.source},description:{story:"Default dark theme",...(y=(m=t.parameters)==null?void 0:m.docs)==null?void 0:y.description}}};var p,u,g,S,f;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  args: {
+    data: mockBookingData,
+    onSlotSelected: (date, time) => console.log('Selected:', date, time),
+    theme: {
+      primary: '#337eff',
+      background: '#ffffff',
+      text: '#1a1a2e',
+      textMuted: 'rgba(0,0,0,0.35)'
+    }
+  },
+  decorators: [Story => <div style={{
+    maxWidth: 360,
+    background: '#ffffff',
+    padding: 16,
+    borderRadius: 12
+  }}>
+                <Story />
+            </div>]
+}`,...(g=(u=o.parameters)==null?void 0:u.docs)==null?void 0:g.source},description:{story:"Light theme",...(f=(S=o.parameters)==null?void 0:S.docs)==null?void 0:f.description}}};var b,h,k,D,x;d.parameters={...d.parameters,docs:{...(b=d.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  args: {
+    data: mockBookingData,
+    onSlotSelected: (date, time) => console.log('Selected:', date, time),
+    disabled: true
+  }
+}`,...(k=(h=d.parameters)==null?void 0:h.docs)==null?void 0:k.source},description:{story:"Disabled state (after selection)",...(x=(D=d.parameters)==null?void 0:D.docs)==null?void 0:x.description}}};var L,T,N,v,B;s.parameters={...s.parameters,docs:{...(L=s.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  args: {
+    data: {
+      availableDates: [{
+        date: '2026-03-26',
+        dayLabel: 'Thu 26',
+        dayName: 'Thursday',
+        slots: ['14:00']
+      }, {
+        date: '2026-03-27',
+        dayLabel: 'Fri 27',
+        dayName: 'Friday',
+        slots: ['09:00', '15:30']
+      }],
+      timezone: 'Australia/Sydney',
+      meetingDuration: 30
+    },
+    onSlotSelected: (date, time) => console.log('Selected:', date, time)
+  }
+}`,...(N=(T=s.parameters)==null?void 0:T.docs)==null?void 0:N.source},description:{story:"Limited availability",...(B=(v=s.parameters)==null?void 0:v.docs)==null?void 0:B.description}}};const E=["Default","LightTheme","Disabled","LimitedSlots"];export{t as Default,d as Disabled,o as LightTheme,s as LimitedSlots,E as __namedExportsOrder,A as default};

package/storybook-static/assets/BrandIcons-BsRAdWzL.js

@@ -0,0 +1,4 @@
+import{j as e}from"./jsx-runtime-Cf8x2fCZ.js";function l({size:a=24,color:i="white",className:r="",style:t}){return e.jsxs("svg",{width:a,height:a,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:r,style:t,"aria-hidden":"true",children:[e.jsx("path",{d:"M20.582 15.027L31.849 0.036H24.808L17.039 10.303L20.582 15.027ZM24.808 31.837H31.849L20.582 16.846L17.039 21.57L24.808 31.837Z",fill:i}),e.jsx("path",{d:"M14.313 15.027H18.402L7.135 0.036H0.185L9.406 12.392C10.587 13.983 12.359 15.027 14.313 15.027Z",fill:i}),e.jsx("path",{d:"M0.185 31.837H7.135L18.402 16.846H14.313C12.359 16.846 10.588 17.891 9.406 19.481L0.185 31.837Z",fill:i})]})}function s({size:a=36,color:i="white",className:r="",style:t}){return e.jsxs("svg",{width:a,height:a,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:r,style:t,"aria-hidden":"true",children:[e.jsx("circle",{cx:"16",cy:"3.5",r:"3",fill:"#67e8f9",opacity:.4}),e.jsx("circle",{cx:"16",cy:"3.5",r:"1.5",fill:"#67e8f9"}),e.jsx("rect",{x:"15",y:"4.5",width:"2",height:"4",rx:"1",fill:i}),e.jsx("rect",{x:"1",y:"15",width:"4",height:"6",rx:"2",fill:i,opacity:.5}),e.jsx("rect",{x:"27",y:"15",width:"4",height:"6",rx:"2",fill:i,opacity:.5}),e.jsx("rect",{x:"5",y:"8.5",width:"22",height:"19",rx:"5",fill:i}),e.jsx("circle",{cx:"12",cy:"16.5",r:"3",fill:"#1a4fd0"}),e.jsx("circle",{cx:"20",cy:"16.5",r:"3",fill:"#1a4fd0"}),e.jsx("circle",{cx:"13",cy:"15.5",r:"1.2",fill:i}),e.jsx("circle",{cx:"21",cy:"15.5",r:"1.2",fill:i}),e.jsx("path",{d:"M13 22.5q3 2.5 6 0",stroke:"#1a4fd0",strokeWidth:"1.5",strokeLinecap:"round"})]})}function n({size:a=40,className:i=""}){const r=Math.round(a*.55);return e.jsx("div",{className:`flex items-center justify-center rounded-full ${i}`,style:{width:a,height:a,background:"linear-gradient(135deg, #337eff, #005eff)"},children:e.jsx(l,{size:r,color:"white"})})}try{l.displayName="XcelsiorSymbol",l.__docgenInfo={description:`Xcelsior "X" symbol mark (from favicon-brand.svg)
+Reusable across the chat widget — FAB button, avatar, header, etc.`,displayName:"XcelsiorSymbol",props:{size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"number | undefined"}},color:{defaultValue:{value:"white"},description:"",name:"color",required:!1,type:{name:"string | undefined"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties | undefined"}}}}}catch{}try{s.displayName="ChatBubbleIcon",s.__docgenInfo={description:`Expressive robot icon for the FAB launcher button.
+Friendly robot with cyan antenna glow, ear nubs, eyes with highlights, and smile.`,displayName:"ChatBubbleIcon",props:{size:{defaultValue:{value:"36"},description:"",name:"size",required:!1,type:{name:"number | undefined"}},color:{defaultValue:{value:"white"},description:"",name:"color",required:!1,type:{name:"string | undefined"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties | undefined"}}}}}catch{}try{n.displayName="XcelsiorAvatar",n.__docgenInfo={description:`Xcelsior "X" avatar — symbol inside a gradient circle
+Used as bot avatar in messages and chat header`,displayName:"XcelsiorAvatar",props:{size:{defaultValue:{value:"40"},description:"",name:"size",required:!1,type:{name:"number | undefined"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}}}}}catch{}export{s as C,l as X,n as a};