@xcelsior/ui-chat 2.0.3 → 2.0.5

package/src/components/MessageItem.tsx

@@ -1,7 +1,11 @@
 import { formatDistanceToNow } from 'date-fns';
-import type { IMessage, IUser, IChatTheme } from '../types';
+import { Check, CheckCheck, Headphones, Paperclip } from 'lucide-react';
+import type { IMessage, IUser, IChatTheme, IBookingData, IBookingConfirmationData, IBookingCancelledData } from '../types';
 import { XcelsiorAvatar } from './BrandIcons';
 import { MarkdownMessage } from './MarkdownMessage';
+import { BookingSlotPicker } from './BookingSlotPicker';
+import { BookingConfirmationCard } from './BookingConfirmationCard';
+import { BookingCancelledCard } from './BookingCancelledCard';
 
 interface MessageItemProps {
     message: IMessage;
@@ -9,6 +13,8 @@ interface MessageItemProps {
     showAvatar?: boolean;
     showTimestamp?: boolean;
     theme?: IChatTheme;
+    /** Called when visitor selects a booking slot — sends their choice as a chat message */
+    onBookingSlotSelected?: (date: string, time: string, messageId: string) => void;
 }
 
 export function MessageItem({
@@ -17,6 +23,7 @@ export function MessageItem({
     showAvatar = true,
     showTimestamp = true,
     theme,
+    onBookingSlotSelected,
 }: MessageItemProps) {
     const isOwnMessage = message.senderType === currentUser.type;
     const isSystemMessage = message.senderType === 'system';
@@ -38,6 +45,73 @@ export function MessageItem({
     const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
     const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.35)' : 'rgba(247,247,248,0.35)');
 
+    // Booking messages — render card components directly (no bubble wrapper)
+    if (
+        message.messageType === 'booking_slots' ||
+        message.messageType === 'booking_confirmation' ||
+        message.messageType === 'booking_cancelled'
+    ) {
+        return (
+            <div className="flex gap-2.5 mb-3 flex-row">
+                {/* Avatar placeholder */}
+                {showAvatar && (
+                    <div className="flex-shrink-0 mt-auto mb-5">
+                        <XcelsiorAvatar size={28} />
+                    </div>
+                )}
+                <div className="flex flex-col max-w-[85%] items-start">
+                    {/* Sender label */}
+                    <span
+                        className="mb-1 px-1 font-medium"
+                        style={{
+                            color: isLightTheme ? 'rgba(0,0,0,0.45)' : 'rgba(247,247,248,0.4)',
+                            fontSize: '11px',
+                            letterSpacing: '0.019em',
+                        }}
+                    >
+                        AI Assistant
+                    </span>
+                    {message.messageType === 'booking_slots' && (
+                        <BookingSlotPicker
+                            data={message.metadata?.bookingData as IBookingData}
+                            theme={theme}
+                            onSlotSelected={(date, time) => {
+                                onBookingSlotSelected?.(date, time, message.id);
+                            }}
+                            disabled={!!message.metadata?.slotSelected}
+                        />
+                    )}
+                    {message.messageType === 'booking_confirmation' && (
+                        <BookingConfirmationCard
+                            data={message.metadata?.bookingConfirmation as IBookingConfirmationData}
+                            theme={theme}
+                        />
+                    )}
+                    {message.messageType === 'booking_cancelled' && (
+                        <BookingCancelledCard
+                            data={message.metadata?.bookingCancelled as IBookingCancelledData}
+                            theme={theme}
+                        />
+                    )}
+                    {/* Timestamp */}
+                    {showTimestamp && (
+                        <div className="flex items-center gap-1.5 mt-1 px-1">
+                            <span
+                                style={{
+                                    fontSize: '11px',
+                                    letterSpacing: '0.019em',
+                                    color: textMuted,
+                                }}
+                            >
+                                {formatDistanceToNow(new Date(message.createdAt), { addSuffix: true })}
+                            </span>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
     // System messages — centered pill with ultra-subtle surface
     if (isSystemMessage) {
         return (
@@ -121,21 +195,12 @@ export function MessageItem({
                                     : 'inset 0 0 0 0.5px rgba(255,255,255,0.1)',
                             }}
                         >
-                            <svg
-                                width="14"
-                                height="14"
-                                viewBox="0 0 24 24"
-                                fill="none"
+                            <Headphones
+                                size={14}
                                 stroke={isLightTheme ? primaryColor : 'white'}
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
+                                strokeWidth={2}
                                 aria-hidden="true"
-                            >
-                                <title>Agent</title>
-                                <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
-                                <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" />
-                            </svg>
+                            />
                         </div>
                     )}
                 </div>
@@ -194,20 +259,7 @@ export function MessageItem({
                     )}
                     {message.messageType === 'file' && (
                         <div className="flex items-center gap-2">
-                            <svg
-                                width="18"
-                                height="18"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="1.75"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                aria-hidden="true"
-                            >
-                                <title>File</title>
-                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
-                            </svg>
+                            <Paperclip size={18} strokeWidth={1.75} aria-hidden="true" />
                             <a
                                 href={message.content}
                                 target="_blank"
@@ -245,54 +297,13 @@ export function MessageItem({
                         {isOwnMessage && message.status && (
                             <span style={{ color: textMuted }}>
                                 {message.status === 'sent' && (
-                                    <svg
-                                        width="14"
-                                        height="14"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        strokeWidth="2.5"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        aria-hidden="true"
-                                    >
-                                        <title>Sent</title>
-                                        <polyline points="20 6 9 17 4 12" />
-                                    </svg>
+                                    <Check size={14} strokeWidth={2.5} aria-hidden="true" />
                                 )}
                                 {message.status === 'delivered' && (
-                                    <svg
-                                        width="14"
-                                        height="14"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        strokeWidth="2.5"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        aria-hidden="true"
-                                    >
-                                        <title>Delivered</title>
-                                        <polyline points="18 6 7 17 2 12" />
-                                        <polyline points="22 6 11 17" />
-                                    </svg>
+                                    <CheckCheck size={14} strokeWidth={2.5} aria-hidden="true" />
                                 )}
                                 {message.status === 'read' && (
-                                    <svg
-                                        width="14"
-                                        height="14"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke={primaryColor}
-                                        strokeWidth="2.5"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        aria-hidden="true"
-                                    >
-                                        <title>Read</title>
-                                        <polyline points="18 6 7 17 2 12" />
-                                        <polyline points="22 6 11 17" />
-                                    </svg>
+                                    <CheckCheck size={14} strokeWidth={2.5} stroke={primaryColor} aria-hidden="true" />
                                 )}
                             </span>
                         )}

package/src/components/MessageList.tsx

@@ -23,6 +23,8 @@ interface MessageListProps {
     onQuickAction?: (text: string) => void;
     /** True when user sent a message and bot response hasn't arrived yet */
     isBotThinking?: boolean;
+    /** Called when visitor selects a booking slot */
+    onBookingSlotSelected?: (date: string, time: string, messageId: string) => void;
 }
 
 export function MessageList({
@@ -38,6 +40,7 @@ export function MessageList({
     theme,
     onQuickAction,
     isBotThinking = false,
+    onBookingSlotSelected,
 }: MessageListProps) {
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -250,6 +253,7 @@ export function MessageList({
                     showAvatar={true}
                     showTimestamp={true}
                     theme={theme}
+                    onBookingSlotSelected={onBookingSlotSelected}
                 />
             ))}
 

package/src/hooks/useDraggablePosition.ts

@@ -2,35 +2,50 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import type { WidgetPosition } from '../types';
 
 const STORAGE_KEY = 'xcelsior-chat-position';
+const DRAG_THRESHOLD = 5;
+const FAB_SIZE = 64;
+const MARGIN = 16;
+const BOTTOM = 20;
+const VELOCITY_THRESHOLD = 0.4;
+const SETTLE_DURATION = 400;
+const SETTLE_EASING = 'cubic-bezier(0.2, 0.9, 0.3, 1.1)';
 
 function getStoredPosition(): 'left' | 'right' {
     try {
         const stored = localStorage.getItem(STORAGE_KEY);
         if (stored === 'left' || stored === 'right') return stored;
-    } catch {
-        // localStorage not available
-    }
+    } catch { /* */ }
     return 'right';
 }
 
-function storePosition(position: 'left' | 'right') {
-    try {
-        localStorage.setItem(STORAGE_KEY, position);
-    } catch {
-        // localStorage not available
-    }
+function storePosition(pos: 'left' | 'right') {
+    try { localStorage.setItem(STORAGE_KEY, pos); } catch { /* */ }
+}
+
+function restingX(side: 'left' | 'right'): number {
+    return side === 'left' ? MARGIN : window.innerWidth - MARGIN - FAB_SIZE;
+}
+
+function restingY(): number {
+    return window.innerHeight - BOTTOM - FAB_SIZE;
 }
 
 export function useDraggablePosition(configPosition: WidgetPosition = 'auto') {
     const resolvedDefault = configPosition === 'auto' ? getStoredPosition() : configPosition;
     const [position, setPosition] = useState<'left' | 'right'>(resolvedDefault);
+    const positionRef = useRef(position);
+    positionRef.current = position;
+
     const [isDragging, setIsDragging] = useState(false);
-    const dragStartX = useRef(0);
-    const fabRef = useRef<HTMLButtonElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const draggingRef = useRef(false);
+    const didDragRef = useRef(false);
+    const startPointer = useRef({ x: 0, y: 0 });
+    const startRect = useRef({ x: 0, y: 0 });
+    const samples = useRef<Array<{ x: number; t: number }>>([]);
     const hasShownHint = useRef(false);
     const [showHint, setShowHint] = useState(false);
 
-    // Show bounce hint on first visit
     useEffect(() => {
         try {
             const hasVisited = localStorage.getItem('xcelsior-chat-hint-shown');
@@ -43,49 +58,139 @@ export function useDraggablePosition(configPosition: WidgetPosition = 'auto') {
                 }, 2000);
                 return () => clearTimeout(timer);
             }
-        } catch {
-            // localStorage not available
-        }
+        } catch { /* */ }
     }, []);
 
-    const handlePointerDown = useCallback((e: React.PointerEvent) => {
-        dragStartX.current = e.clientX;
-        setIsDragging(true);
-        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    useEffect(() => {
+        const handleMove = (e: PointerEvent) => {
+            if (!draggingRef.current) return;
+            const el = containerRef.current;
+            if (!el) return;
+
+            const dx = e.clientX - startPointer.current.x;
+            const dy = e.clientY - startPointer.current.y;
+            if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+                didDragRef.current = true;
+            }
+
+            el.style.transition = 'none';
+            el.style.transform = `translate(${dx}px, ${dy}px)`;
+
+            const now = performance.now();
+            samples.current.push({ x: e.clientX, t: now });
+            if (samples.current.length > 5) samples.current.shift();
+        };
+
+        const handleUp = (e: PointerEvent) => {
+            if (!draggingRef.current) return;
+            draggingRef.current = false;
+
+            const el = containerRef.current;
+            if (!el) return;
+
+            // ── Velocity ────────────────────────────────────
+            let velocityX = 0;
+            const s = samples.current;
+            if (s.length >= 2) {
+                const first = s[0];
+                const last = s[s.length - 1];
+                const dt = last.t - first.t;
+                if (dt > 0) velocityX = (last.x - first.x) / dt;
+            }
+            samples.current = [];
+
+            // ── Target side ─────────────────────────────────
+            const currentVisualX = startRect.current.x + (e.clientX - startPointer.current.x);
+            const screenMid = window.innerWidth / 2;
+            let targetSide: 'left' | 'right';
+
+            if (Math.abs(velocityX) > VELOCITY_THRESHOLD) {
+                targetSide = velocityX < 0 ? 'left' : 'right';
+            } else {
+                targetSide = (currentVisualX + FAB_SIZE / 2) < screenMid ? 'left' : 'right';
+            }
+
+            // ── Animate from current position to target resting position ──
+            // Both expressed as offsets from the CURRENT CSS base (old position).
+            // We do NOT update React state until animation finishes.
+            const oldBaseX = restingX(positionRef.current);
+            const oldBaseY = restingY();
+
+            const currentX = startRect.current.x + (e.clientX - startPointer.current.x);
+            const currentY = startRect.current.y + (e.clientY - startPointer.current.y);
+
+            const targetX = restingX(targetSide);
+            const targetY = restingY();
+
+            // Current visual position as translate from old CSS base
+            const fromTx = currentX - oldBaseX;
+            const fromTy = currentY - oldBaseY;
+
+            // Target resting position as translate from old CSS base
+            const toTx = targetX - oldBaseX;
+            const toTy = targetY - oldBaseY;
+
+            // Ensure we're at the "from" position with no transition
+            el.style.transition = 'none';
+            el.style.transform = `translate(${fromTx}px, ${fromTy}px)`;
+
+            // Force reflow
+            void el.offsetHeight;
+
+            // Animate to target
+            el.style.transition = `transform ${SETTLE_DURATION}ms ${SETTLE_EASING}`;
+            el.style.transform = `translate(${toTx}px, ${toTy}px)`;
+
+            // After animation: clean up DOM styles, update React state
+            const finish = () => {
+                el.style.transition = '';
+                el.style.transform = '';
+                el.removeEventListener('transitionend', finish);
+                // Now update React state — this re-renders with correct CSS class
+                setIsDragging(false);
+                if (targetSide !== positionRef.current) {
+                    setPosition(targetSide);
+                    storePosition(targetSide);
+                }
+            };
+
+            el.addEventListener('transitionend', finish, { once: true });
+            // Safety fallback
+            setTimeout(finish, SETTLE_DURATION + 50);
+        };
+
+        document.addEventListener('pointermove', handleMove);
+        document.addEventListener('pointerup', handleUp);
+        return () => {
+            document.removeEventListener('pointermove', handleMove);
+            document.removeEventListener('pointerup', handleUp);
+        };
     }, []);
 
-    const handlePointerMove = useCallback((_e: React.PointerEvent) => {
-        // Visual feedback could be added here (e.g., opacity change)
+    const handlePointerDown = useCallback((e: React.PointerEvent) => {
+        e.preventDefault();
+        const el = containerRef.current;
+        if (!el) return;
+
+        const rect = el.getBoundingClientRect();
+        startPointer.current = { x: e.clientX, y: e.clientY };
+        startRect.current = { x: rect.left, y: rect.top };
+        draggingRef.current = true;
+        didDragRef.current = false;
+        samples.current = [];
+        setIsDragging(true);
     }, []);
 
-    const handlePointerUp = useCallback(
-        (e: React.PointerEvent) => {
-            setIsDragging(false);
-            (e.target as HTMLElement).releasePointerCapture(e.pointerId);
-
-            const deltaX = e.clientX - dragStartX.current;
-            // Only snap if dragged more than 50px horizontally
-            if (Math.abs(deltaX) > 50) {
-                const screenMid = window.innerWidth / 2;
-                const newPosition = e.clientX < screenMid ? 'left' : 'right';
-                if (newPosition !== position) {
-                    setPosition(newPosition);
-                    storePosition(newPosition);
-                }
-            }
-        },
-        [position]
-    );
+    const shouldSuppressClick = useCallback(() => didDragRef.current, []);
 
     return {
         position,
         isDragging,
         showHint,
-        fabRef,
+        containerRef,
+        shouldSuppressClick,
         handlers: {
             onPointerDown: handlePointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
         },
     };
 }