@xcelsior/ui-chat 2.0.4 → 2.0.5

package/src/components/BookingSlotPicker.tsx

@@ -0,0 +1,253 @@
+import { useState, useCallback } from 'react';
+import { Calendar, Clock, Globe } from 'lucide-react';
+import type { IBookingData, IChatTheme } from '../types';
+
+interface BookingSlotPickerProps {
+    data: IBookingData;
+    theme?: IChatTheme;
+    onSlotSelected: (date: string, time: string) => void;
+    disabled?: boolean;
+}
+
+export function BookingSlotPicker({ data, theme, onSlotSelected, disabled = false }: BookingSlotPickerProps) {
+    const [selectedDateIndex, setSelectedDateIndex] = useState(0);
+    const [selectedSlot, setSelectedSlot] = useState<{ date: string; time: string } | null>(null);
+
+    const bgColor = theme?.background || '#00001a';
+    const isLightTheme = (() => {
+        if (!bgColor.startsWith('#')) return false;
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+    })();
+
+    const primaryColor = theme?.primary || '#337eff';
+    const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+    const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.45)' : 'rgba(247,247,248,0.4)');
+
+    const cardStyle: React.CSSProperties = isLightTheme
+        ? {
+              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',
+          };
+
+    const activePillStyle: React.CSSProperties = {
+        backgroundColor: primaryColor,
+        color: '#ffffff',
+        borderRadius: '20px',
+        padding: '5px 12px',
+        fontSize: '12px',
+        fontWeight: '600',
+        letterSpacing: '0.01em',
+        cursor: disabled ? 'default' : 'pointer',
+        border: 'none',
+        flexShrink: 0,
+    };
+
+    const inactivePillStyle: React.CSSProperties = isLightTheme
+        ? {
+              backgroundColor: 'rgba(0,0,0,0.04)',
+              color: textColor,
+              borderRadius: '20px',
+              padding: '5px 12px',
+              fontSize: '12px',
+              fontWeight: '500',
+              letterSpacing: '0.01em',
+              cursor: disabled ? '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: textColor,
+              borderRadius: '20px',
+              padding: '5px 12px',
+              fontSize: '12px',
+              fontWeight: '500',
+              letterSpacing: '0.01em',
+              cursor: disabled ? 'default' : 'pointer',
+              border: 'none',
+              boxShadow: 'inset 0 0 0 0.5px rgba(255,255,255,0.1)',
+              flexShrink: 0,
+          };
+
+    const activeSlot = selectedSlot?.date === data.availableDates[selectedDateIndex]?.date
+        ? selectedSlot.time
+        : null;
+
+    const [confirming, setConfirming] = useState(false);
+
+    const handleSlotClick = (date: string, time: string) => {
+        if (disabled || confirming) return;
+        setSelectedSlot({ date, time });
+    };
+
+    const handleConfirm = useCallback(() => {
+        if (!selectedSlot || disabled || confirming) return;
+        setConfirming(true);
+        onSlotSelected(selectedSlot.date, selectedSlot.time);
+    }, [selectedSlot, disabled, confirming, onSlotSelected]);
+
+    const currentDate = data.availableDates[selectedDateIndex];
+
+    return (
+        <div style={cardStyle}>
+            {/* Section label */}
+            <p
+                style={{
+                    fontSize: '11px',
+                    fontWeight: '600',
+                    letterSpacing: '0.06em',
+                    textTransform: 'uppercase',
+                    color: textMuted,
+                    marginBottom: '10px',
+                }}
+            >
+                Select a date
+            </p>
+
+            {/* Date pills row */}
+            <div
+                style={{
+                    display: 'flex',
+                    gap: '6px',
+                    overflowX: 'auto',
+                    paddingBottom: '2px',
+                    scrollbarWidth: 'none',
+                    msOverflowStyle: 'none',
+                    marginBottom: '14px',
+                }}
+            >
+                {data.availableDates.map((dateSlot, index) => (
+                    <button
+                        key={dateSlot.date}
+                        type="button"
+                        onClick={() => !disabled && setSelectedDateIndex(index)}
+                        style={index === selectedDateIndex ? activePillStyle : inactivePillStyle}
+                        title={dateSlot.dayName}
+                        aria-pressed={index === selectedDateIndex}
+                        disabled={disabled}
+                    >
+                        {dateSlot.dayLabel}
+                    </button>
+                ))}
+            </div>
+
+            {/* Time slots grid */}
+            {currentDate && (
+                <>
+                    <p
+                        style={{
+                            fontSize: '11px',
+                            fontWeight: '600',
+                            letterSpacing: '0.06em',
+                            textTransform: 'uppercase',
+                            color: textMuted,
+                            marginBottom: '8px',
+                        }}
+                    >
+                        {currentDate.dayName}
+                    </p>
+                    <div
+                        style={{
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(3, 1fr)',
+                            gap: '6px',
+                            marginBottom: '14px',
+                        }}
+                    >
+                        {currentDate.slots.map((time) => {
+                            const isSelected = activeSlot === time;
+                            const isConfirmed = selectedSlot?.date === currentDate.date && selectedSlot.time === time;
+                            return (
+                                <button
+                                    key={time}
+                                    type="button"
+                                    onClick={() => handleSlotClick(currentDate.date, time)}
+                                    disabled={disabled && !isConfirmed}
+                                    aria-pressed={isSelected}
+                                    style={{
+                                        ...(isSelected ? activePillStyle : inactivePillStyle),
+                                        padding: '7px 8px',
+                                        borderRadius: '8px',
+                                        fontSize: '13px',
+                                        fontWeight: isSelected ? '600' : '400',
+                                        textAlign: 'center',
+                                        opacity: disabled && !isConfirmed ? 0.4 : 1,
+                                        transition: 'opacity 0.15s ease',
+                                    }}
+                                >
+                                    {time}
+                                </button>
+                            );
+                        })}
+                    </div>
+                </>
+            )}
+
+            {/* Confirm button — only visible when a slot is selected */}
+            {selectedSlot && !disabled && (
+                <button
+                    type="button"
+                    onClick={handleConfirm}
+                    disabled={confirming}
+                    style={{
+                        width: '100%',
+                        padding: '10px 16px',
+                        borderRadius: '10px',
+                        border: 'none',
+                        backgroundColor: confirming ? `${primaryColor}80` : primaryColor,
+                        color: '#ffffff',
+                        fontSize: '13px',
+                        fontWeight: '600',
+                        letterSpacing: '0.01em',
+                        cursor: confirming ? 'default' : 'pointer',
+                        marginBottom: '12px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '6px',
+                        transition: 'background-color 0.15s ease',
+                    }}
+                >
+                    <Calendar size={14} aria-hidden="true" />
+                    {confirming ? 'Booking...' : `Book ${selectedSlot.time} on ${data.availableDates.find(d => d.date === selectedSlot.date)?.dayLabel ?? selectedSlot.date}`}
+                </button>
+            )}
+
+            {/* Footer: timezone + duration */}
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '8px',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                    <Globe size={11} color={textMuted} aria-hidden="true" />
+                    <span style={{ fontSize: '11px', color: textMuted, letterSpacing: '0.01em' }}>
+                        {data.timezone}
+                    </span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                    <Clock size={11} color={textMuted} aria-hidden="true" />
+                    <span style={{ fontSize: '11px', color: textMuted, letterSpacing: '0.01em' }}>
+                        {data.meetingDuration} min
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/BrandIcons.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { XcelsiorSymbol, XcelsiorAvatar } from './BrandIcons';
+import { XcelsiorSymbol, XcelsiorAvatar, ChatBubbleIcon } from './BrandIcons';
 
 const meta: Meta<typeof XcelsiorSymbol> = {
     title: 'Brand/Icons',
@@ -70,6 +70,37 @@ export const AvatarSizes: StoryObj = {
     ),
 };
 
+/** ChatBubbleIcon — FAB robot icon at various sizes */
+export const ChatBubbleSizes: StoryObj = {
+    render: () => (
+        <div className="flex flex-col gap-10 p-8">
+            {/* Actual FAB size */}
+            <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">Actual FAB (36px icon in 64px circle)</h3>
+                <div className="rounded-full flex items-center justify-center" style={{ width: 64, height: 64, background: 'linear-gradient(135deg, #337eff, #005eff)', boxShadow: '0 4px 24px 0 rgba(51,126,255,0.5)' }}>
+                    <ChatBubbleIcon size={36} color="white" />
+                </div>
+            </div>
+            {/* Enlarged */}
+            <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">Enlarged 2x</h3>
+                <div className="rounded-full flex items-center justify-center" style={{ width: 128, height: 128, background: 'linear-gradient(135deg, #337eff, #005eff)' }}>
+                    <ChatBubbleIcon size={72} color="white" />
+                </div>
+            </div>
+            {/* On dark page */}
+            <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">On dark page</h3>
+                <div className="flex items-center gap-10 p-10 rounded-lg" style={{ background: 'linear-gradient(180deg, #0a0e27, #111633)' }}>
+                    <div className="rounded-full flex items-center justify-center" style={{ width: 64, height: 64, background: 'linear-gradient(135deg, #337eff, #005eff)', boxShadow: '0 4px 24px 0 rgba(51,126,255,0.5), 0 8px 32px -4px rgba(0,0,0,0.3)' }}>
+                        <ChatBubbleIcon size={36} color="white" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    ),
+};
+
 /** Avatar in context — message list style */
 export const AvatarInContext: StoryObj = {
     render: () => (

package/src/components/BrandIcons.tsx

@@ -40,25 +40,29 @@ export function XcelsiorSymbol({ size = 24, color = 'white', className = '', sty
 }
 
 /**
- * Chat bubble icon for the FAB launcher button.
- * Instantly recognizable as a chat trigger.
+ * Expressive robot icon for the FAB launcher button.
+ * Friendly robot with cyan antenna glow, ear nubs, eyes with highlights, and smile.
  */
-export function ChatBubbleIcon({ size = 28, color = 'white', className = '', style }: BrandIconProps) {
+export function ChatBubbleIcon({ size = 36, color = 'white', className = '', style }: BrandIconProps) {
     return (
-        <svg
-            width={size}
-            height={size}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke={color}
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className={className}
-            style={style}
-            aria-hidden="true"
-        >
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={style} aria-hidden="true">
+            {/* Antenna with glow ring — cyan */}
+            <circle cx="16" cy="3.5" r="3" fill="#67e8f9" opacity={0.4} />
+            <circle cx="16" cy="3.5" r="1.5" fill="#67e8f9" />
+            <rect x="15" y="4.5" width="2" height="4" rx="1" fill={color} />
+            {/* Ear nubs */}
+            <rect x="1" y="15" width="4" height="6" rx="2" fill={color} opacity={0.5} />
+            <rect x="27" y="15" width="4" height="6" rx="2" fill={color} opacity={0.5} />
+            {/* Head — rounded rectangle */}
+            <rect x="5" y="8.5" width="22" height="19" rx="5" fill={color} />
+            {/* Eyes — dark cutouts (blue to show through on gradient bg) */}
+            <circle cx="12" cy="16.5" r="3" fill="#1a4fd0" />
+            <circle cx="20" cy="16.5" r="3" fill="#1a4fd0" />
+            {/* Eye highlights */}
+            <circle cx="13" cy="15.5" r="1.2" fill={color} />
+            <circle cx="21" cy="15.5" r="1.2" fill={color} />
+            {/* Smile */}
+            <path d="M13 22.5q3 2.5 6 0" stroke="#1a4fd0" strokeWidth="1.5" strokeLinecap="round" />
         </svg>
     );
 }

package/src/components/Chat.tsx

@@ -47,7 +47,7 @@ export function Chat({
     const [isLoading, setIsLoading] = useState(true);
 
     const identityMode = config.identityCollection || 'progressive';
-    const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
+    const { position, isDragging, showHint, containerRef, shouldSuppressClick, handlers } = useDraggablePosition(config.position);
     const sessionInitializedRef = useRef(false);
 
     const { currentState, setState } = useChatWidgetState({
@@ -110,7 +110,40 @@ export function Chat({
                 setConversationId(convId);
 
                 if (identityMode === 'progressive' || identityMode === 'none') {
-                    setUserInfo(null);
+                    // Resolve the anonymous user now so we can persist it alongside the conversationId.
+                    // getAnonymousUser (in ChatWidget) creates/reads the anon-id from localStorage,
+                    // but the conversationId was never persisted — fix that here.
+                    let anonId: string;
+                    try {
+                        const stored = localStorage.getItem('xcelsior-chat-anon-id');
+                        if (stored) {
+                            anonId = stored;
+                        } else {
+                            anonId = `anon-${crypto.randomUUID?.() || Math.random().toString(36).slice(2)}`;
+                            localStorage.setItem('xcelsior-chat-anon-id', anonId);
+                        }
+                    } catch {
+                        anonId = `anon-${Math.random().toString(36).slice(2)}`;
+                    }
+
+                    const anonEmail = `${anonId}@anonymous.xcelsior.co`;
+                    const anonUser: IUser = { name: 'Visitor', email: anonEmail, type: 'customer', status: 'online' };
+                    setUserInfo(anonUser);
+
+                    // Persist so the session survives page refresh
+                    try {
+                        localStorage.setItem(
+                            `${storageKeyPrefix}_user`,
+                            JSON.stringify({
+                                name: anonUser.name,
+                                email: anonUser.email,
+                                conversationId: convId,
+                                timestamp: Date.now(),
+                            } satisfies StoredUserData),
+                        );
+                    } catch {
+                        // Storage unavailable
+                    }
                 }
                 sessionInitializedRef.current = true;
             } catch (error) {
@@ -160,15 +193,16 @@ export function Chat({
     // FAB button — only show when minimized
     if (currentState === 'minimized') {
         return (
-            <div className={`fixed bottom-5 ${positionClass} z-50 ${className}`}>
+            <div
+                ref={containerRef}
+                className={`fixed bottom-5 ${positionClass} z-50 ${className}`}
+            >
                 <button
                     type="button"
-                    onClick={() => setState('open')}
-                    className={`group relative rounded-full text-white transition-all duration-300 flex items-center justify-center touch-none select-none ${
+                    onClick={() => { if (!shouldSuppressClick()) setState('open'); }}
+                    className={`group relative rounded-full text-white flex items-center justify-center touch-none select-none ${
                         showHint ? 'animate-bounce' : ''
-                    } ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
-                    onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.08)'; }}
-                    onMouseLeave={(e) => { e.currentTarget.style.transform = isDragging ? 'scale(1.1)' : 'scale(1)'; }}
+                    } ${isDragging ? 'cursor-grabbing scale-110' : 'cursor-grab hover:scale-[1.08] transition-transform duration-300'}`}
                     style={{
                         width: 64,
                         height: 64,
@@ -182,7 +216,7 @@ export function Chat({
                     aria-label="Open chat"
                     {...handlers}
                 >
-                    <ChatBubbleIcon size={28} color="white" className="pointer-events-none" />
+                    <ChatBubbleIcon size={36} className="pointer-events-none" />
 
                     {/* Pulse ring — subtle blue glow */}
                     <span

package/src/components/ChatWidget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useWebSocket } from '../hooks/useWebSocket';
 import { useMessages } from '../hooks/useMessages';
 import { useFileUpload } from '../hooks/useFileUpload';
@@ -76,6 +76,10 @@ export function ChatWidget({
         enabled: !isFullPage,
     });
 
+    // Guard against rapid duplicate sends (e.g. double-clicking quick action buttons
+    // before React re-renders to remove them). Tracks the last sent content + timestamp.
+    const lastSentRef = useRef<{ content: string; time: number } | null>(null);
+
     const handleSendMessage = useCallback(
         (content: string) => {
             if (!websocket.isConnected) {
@@ -83,8 +87,19 @@ export function ChatWidget({
                 return;
             }
 
+            // Deduplicate rapid identical sends within 1 second
+            const now = Date.now();
+            if (
+                lastSentRef.current &&
+                lastSentRef.current.content === content &&
+                now - lastSentRef.current.time < 1000
+            ) {
+                return;
+            }
+            lastSentRef.current = { content, time: now };
+
             const optimisticMessage: IMessage = {
-                id: `temp-${Date.now()}`,
+                id: `temp-${now}`,
                 conversationId: config.conversationId || '',
                 senderId: effectiveUser.email,
                 senderType: effectiveUser.type,
@@ -107,6 +122,18 @@ export function ChatWidget({
         [websocket, config, addMessage, effectiveUser]
     );
 
+    const handleBookingSlotSelected = useCallback(
+        (date: string, time: string, _messageId: string) => {
+            if (!websocket.isConnected) return;
+            websocket.sendMessage('bookSlot', {
+                conversationId: config.conversationId,
+                date,
+                time,
+            });
+        },
+        [websocket, config]
+    );
+
     const handleTyping = useCallback(
         (isTyping: boolean) => {
             if (!websocket.isConnected || config.enableTypingIndicator === false) return;
@@ -303,6 +330,7 @@ export function ChatWidget({
                     theme={config.theme}
                     onQuickAction={handleSendMessage}
                     isBotThinking={isBotThinking}
+                    onBookingSlotSelected={handleBookingSlotSelected}
                 />
             )}