@xcelsior/ui-chat 1.0.7 → 2.0.0

package/src/components/ThinkingIndicator.tsx

@@ -0,0 +1,370 @@
+import { useEffect, useRef, useState } from 'react';
+import { XcelsiorAvatar } from './BrandIcons';
+import type { IChatTheme } from '../types';
+
+// ─── Phrase Pools ────────────────────────────────────────────────────────────
+// Each pool is tied to a detected conversation context.
+// Phrases should feel casual, human, and short (≤4 words ideal).
+
+const PHRASE_POOLS: Record<string, string[]> = {
+    // ── Greetings & small talk ──
+    greeting: [
+        'Hey there!',
+        'Hello!',
+        'Hi! One moment',
+        'Welcome!',
+        'Nice to meet you',
+    ],
+    farewell: [
+        'Wrapping up',
+        'One last thing',
+        'Almost done',
+    ],
+
+    // ── Sales & pricing ──
+    pricing: [
+        'Crunching numbers',
+        'Checking our plans',
+        'Let me look into that',
+        'Pulling up pricing',
+        'Running the numbers',
+        'Checking options',
+    ],
+    quote: [
+        'Putting this together',
+        'Working on your quote',
+        'Gathering the details',
+        'Tailoring this for you',
+    ],
+
+    // ── Scheduling & booking ──
+    booking: [
+        'Checking the calendar',
+        'Finding good times',
+        'Pulling up availability',
+        'Let me check slots',
+    ],
+
+    // ── Technical questions ──
+    technical: [
+        'Diving into the docs',
+        'Interesting question',
+        'Let me look that up',
+        'Checking the specs',
+        'Hmm, good one',
+        'Researching this',
+    ],
+    code: [
+        'Reading the code',
+        'Checking the repo',
+        'Let me trace that',
+        'Debugging in my head',
+    ],
+
+    // ── Support & issues ──
+    support: [
+        'On it!',
+        'Let me help',
+        'Looking into this',
+        'Checking for you',
+        'I got you',
+        'Investigating',
+    ],
+    frustrated: [
+        'I hear you',
+        'Let me fix this',
+        'Sorry about that',
+        'Working on it now',
+        'Bear with me',
+    ],
+
+    // ── Services & capabilities ──
+    services: [
+        'Great question',
+        'Let me explain',
+        'Pulling up details',
+        'Good to know you ask',
+    ],
+    portfolio: [
+        'Checking our work',
+        'Pulling up examples',
+        'Let me show you',
+        'Finding case studies',
+    ],
+
+    // ── About the company ──
+    about: [
+        'Glad you asked!',
+        'Let me tell you',
+        'Good question',
+        'Here we go',
+    ],
+
+    // ── Comparison & decisions ──
+    comparison: [
+        'Weighing the options',
+        'Let me compare',
+        'Thinking through this',
+        'Good point',
+    ],
+
+    // ── Follow-up & continuation ──
+    followUp: [
+        'Let me dig deeper',
+        'More details coming',
+        'Building on that',
+        'Expanding on this',
+    ],
+
+    // ── General / fallback ──
+    general: [
+        'Hmm, let me think',
+        'One sec',
+        'On it',
+        'Working on it',
+        'Almost there',
+        'Bear with me',
+        'Let me check',
+        'Good question',
+        'Hang tight',
+        'Looking into it',
+        'Let me see',
+        'Thinking',
+        'Just a moment',
+        'Figuring this out',
+    ],
+};
+
+// ─── Context Detection ───────────────────────────────────────────────────────
+// Ordered by specificity — first match wins.
+
+interface ContextRule {
+    key: string;
+    pattern: RegExp;
+}
+
+const CONTEXT_RULES: ContextRule[] = [
+    // Frustration / urgency (check first — trumps topic)
+    { key: 'frustrated', pattern: /frustrat|angry|annoyed|terrible|worst|useless|waste|stupid|wtf|seriously|ridiculous|unacceptable|disappointing/ },
+
+    // Greetings (start of message)
+    { key: 'greeting', pattern: /^(hi\b|hey\b|hello\b|good morning|good afternoon|good evening|g'day|howdy|yo\b|sup\b|what's up|greetings)/ },
+    { key: 'farewell', pattern: /\b(thanks|thank you|bye|goodbye|cheers|that's all|that's it|no more|all good|perfect thanks)\b/ },
+
+    // Booking & scheduling
+    { key: 'booking', pattern: /\b(book|schedule|meeting|appointment|calendar|available time|free slot|set up a call|arrange|consultation time|when can)\b/ },
+
+    // Pricing & quotes
+    { key: 'quote', pattern: /\b(quote|proposal|estimate|project cost|custom price|tailor|bespoke)\b/ },
+    { key: 'pricing', pattern: /\b(price|cost|how much|pricing|rate|fee|budget|afford|charge|per hour|hourly|package|plan|tier|subscription)\b/ },
+
+    // Technical / code
+    { key: 'code', pattern: /\b(code|github|repo|commit|deploy|ci\/cd|docker|aws|lambda|api endpoint|sdk|npm|yarn|pnpm|typescript|react|next\.?js)\b/ },
+    { key: 'technical', pattern: /\b(api|integrate|integration|stack|server|database|backend|frontend|infrastructure|architecture|performance|scalab|migration|devops|cloud)\b/ },
+
+    // Support & bugs
+    { key: 'support', pattern: /\b(bug|error|issue|broken|not working|help|support|problem|fix|crash|down|fail|stuck|trouble|can't|cannot|doesn't work|won't)\b/ },
+
+    // Services & portfolio
+    { key: 'portfolio', pattern: /\b(portfolio|case stud|example|previous work|client|project you|showcase|demo|sample)\b/ },
+    { key: 'services', pattern: /\b(service|what do you|what can you|offer|do you do|capabilit|specializ|expertise|solution|consult|develop|design|build|create)\b/ },
+
+    // About company
+    { key: 'about', pattern: /\b(who are|about you|your team|your company|where are you|location|office|founded|history|values|mission)\b/ },
+
+    // Comparison / decision-making
+    { key: 'comparison', pattern: /\b(compare|vs|versus|difference|better|which one|alternative|competitor|pros and cons|trade.?off|should i|recommend)\b/ },
+
+    // Follow-up patterns (vague follow-ups to prior answers)
+    { key: 'followUp', pattern: /\b(more detail|tell me more|elaborate|explain further|what about|and also|another question|one more|can you also|what else|go on)\b/ },
+];
+
+function detectContext(message?: string): string {
+    if (!message) return 'general';
+    const lower = message.toLowerCase().trim();
+
+    for (const rule of CONTEXT_RULES) {
+        if (rule.pattern.test(lower)) return rule.key;
+    }
+
+    // Short messages (1-3 words) that didn't match anything → likely casual
+    if (lower.split(/\s+/).length <= 3) return 'general';
+
+    // Questions tend to be exploratory
+    if (lower.endsWith('?')) return 'general';
+
+    return 'general';
+}
+
+// ─── Shuffle Utility ─────────────────────────────────────────────────────────
+
+function getShuffledPhrases(context: string): string[] {
+    const pool = PHRASE_POOLS[context] || PHRASE_POOLS.general;
+    const contextPhrases = [...pool];
+
+    // Mix in 2-3 general phrases for variety (avoid duplicates)
+    const extras = PHRASE_POOLS.general
+        .filter((p) => !contextPhrases.includes(p))
+        .sort(() => Math.random() - 0.5)
+        .slice(0, 3);
+
+    const combined = [...contextPhrases, ...extras];
+
+    // Fisher-Yates shuffle
+    for (let i = combined.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [combined[i], combined[j]] = [combined[j], combined[i]];
+    }
+    return combined;
+}
+
+// ─── Theme Helpers ───────────────────────────────────────────────────────────
+
+function computeIsLightTheme(bg?: string): boolean {
+    if (!bg?.startsWith('#')) return false;
+    const hex = bg.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;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export interface ThinkingIndicatorProps {
+    /** Last message the user sent — used to pick contextual phrases */
+    lastUserMessage?: string;
+    /** Chat theme for color matching */
+    theme?: IChatTheme;
+    /** Show avatar next to the indicator */
+    showAvatar?: boolean;
+}
+
+export function ThinkingIndicator({
+    lastUserMessage,
+    theme,
+    showAvatar = true,
+}: ThinkingIndicatorProps) {
+    const isLightTheme = computeIsLightTheme(theme?.background);
+    const primaryColor = theme?.primary || '#337eff';
+    const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.4)' : 'rgba(247,247,248,0.45)');
+
+    const [phraseIndex, setPhraseIndex] = useState(0);
+    const [displayText, setDisplayText] = useState('');
+    const [isDeleting, setIsDeleting] = useState(false);
+    const phrasesRef = useRef<string[]>(getShuffledPhrases(detectContext(lastUserMessage)));
+
+    // Re-shuffle when user sends a new message
+    useEffect(() => {
+        phrasesRef.current = getShuffledPhrases(detectContext(lastUserMessage));
+        setPhraseIndex(0);
+        setDisplayText('');
+        setIsDeleting(false);
+    }, [lastUserMessage]);
+
+    // Typewriter effect
+    useEffect(() => {
+        const phrases = phrasesRef.current;
+        const phrase = phrases[phraseIndex % phrases.length];
+        let timeout: NodeJS.Timeout;
+
+        if (!isDeleting) {
+            if (displayText.length < phrase.length) {
+                // Typing forward — variable speed for natural feel
+                timeout = setTimeout(
+                    () => setDisplayText(phrase.slice(0, displayText.length + 1)),
+                    30 + Math.random() * 30,
+                );
+            } else {
+                // Pause at full phrase before deleting
+                timeout = setTimeout(() => setIsDeleting(true), 1800);
+            }
+        } else {
+            if (displayText.length > 0) {
+                // Deleting — faster than typing
+                timeout = setTimeout(
+                    () => setDisplayText(displayText.slice(0, -1)),
+                    18,
+                );
+            } else {
+                // Advance to next phrase
+                setIsDeleting(false);
+                setPhraseIndex((prev) => (prev + 1) % phrasesRef.current.length);
+            }
+        }
+
+        return () => clearTimeout(timeout);
+    }, [displayText, isDeleting, phraseIndex]);
+
+    return (
+        <div
+            className="flex gap-2.5 mb-3"
+            role="status"
+            aria-live="polite"
+            aria-label="Xcelsior is thinking"
+        >
+            {showAvatar && (
+                <div className="flex-shrink-0 mt-auto mb-5">
+                    <XcelsiorAvatar size={28} />
+                </div>
+            )}
+            <div className="flex flex-col items-start">
+                <div
+                    style={{
+                        backgroundColor: isLightTheme
+                            ? 'rgba(0,0,0,0.04)'
+                            : 'rgba(255,255,255,0.04)',
+                        borderRadius: '18px 18px 18px 4px',
+                        boxShadow: isLightTheme
+                            ? 'inset 0 0 0 1px rgba(0,0,0,0.06)'
+                            : 'inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)',
+                        padding: '12px 16px',
+                        minWidth: 160,
+                    }}
+                >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        {/* Pulsing dots */}
+                        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+                            {[0, 1, 2].map((i) => (
+                                <span
+                                    key={i}
+                                    style={{
+                                        width: 5,
+                                        height: 5,
+                                        borderRadius: '50%',
+                                        backgroundColor: primaryColor,
+                                        display: 'inline-block',
+                                        animation: `thinkingPulse 1.4s ease-in-out ${i * 0.2}s infinite`,
+                                    }}
+                                />
+                            ))}
+                        </div>
+
+                        {/* Typewriter text + blinking cursor */}
+                        <span
+                            style={{
+                                fontSize: 12,
+                                color: textMuted,
+                                letterSpacing: '0.015em',
+                                fontStyle: 'italic',
+                            }}
+                        >
+                            {displayText}
+                            <span
+                                style={{
+                                    display: 'inline-block',
+                                    width: 1,
+                                    height: 13,
+                                    backgroundColor: textMuted,
+                                    marginLeft: 1,
+                                    animation: 'cursorBlink 0.8s step-end infinite',
+                                    verticalAlign: 'text-bottom',
+                                }}
+                            />
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/TypingIndicator.tsx

@@ -9,20 +9,36 @@ export function TypingIndicator({ isTyping, userName }: TypingIndicatorProps) {
     }
 
     return (
-        <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+        <div
+            className="px-4 py-2"
+            style={{
+                borderTop: '1px solid rgba(255,255,255,0.06)',
+                backgroundColor: 'rgba(0,0,0,0.15)',
+            }}
+        >
             <div className="flex items-center gap-2">
                 <div className="flex gap-1">
-                    <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" />
-                    <span
-                        className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
-                        style={{ animationDelay: '0.1s' }}
-                    />
-                    <span
-                        className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
-                        style={{ animationDelay: '0.2s' }}
-                    />
+                    {[0, 1, 2].map((i) => (
+                        <span
+                            key={i}
+                            className="rounded-full animate-bounce"
+                            style={{
+                                width: 5,
+                                height: 5,
+                                backgroundColor: 'rgba(51,126,255,0.6)',
+                                animationDelay: `${i * 0.1}s`,
+                                animationDuration: '0.8s',
+                            }}
+                        />
+                    ))}
                 </div>
-                <span className="text-xs text-gray-600 dark:text-gray-400">
+                <span
+                    style={{
+                        fontSize: '12px',
+                        letterSpacing: '0.015em',
+                        color: 'rgba(247,247,248,0.45)',
+                    }}
+                >
                     {userName ? `${userName} is typing...` : 'Someone is typing...'}
                 </span>
             </div>

package/src/hooks/useDraggablePosition.ts

@@ -0,0 +1,91 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { WidgetPosition } from '../types';
+
+const STORAGE_KEY = 'xcelsior-chat-position';
+
+function getStoredPosition(): 'left' | 'right' {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'left' || stored === 'right') return stored;
+    } catch {
+        // localStorage not available
+    }
+    return 'right';
+}
+
+function storePosition(position: 'left' | 'right') {
+    try {
+        localStorage.setItem(STORAGE_KEY, position);
+    } catch {
+        // localStorage not available
+    }
+}
+
+export function useDraggablePosition(configPosition: WidgetPosition = 'auto') {
+    const resolvedDefault = configPosition === 'auto' ? getStoredPosition() : configPosition;
+    const [position, setPosition] = useState<'left' | 'right'>(resolvedDefault);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStartX = useRef(0);
+    const fabRef = useRef<HTMLButtonElement>(null);
+    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');
+            if (!hasVisited && !hasShownHint.current) {
+                hasShownHint.current = true;
+                setShowHint(true);
+                const timer = setTimeout(() => {
+                    setShowHint(false);
+                    localStorage.setItem('xcelsior-chat-hint-shown', 'true');
+                }, 2000);
+                return () => clearTimeout(timer);
+            }
+        } catch {
+            // localStorage not available
+        }
+    }, []);
+
+    const handlePointerDown = useCallback((e: React.PointerEvent) => {
+        dragStartX.current = e.clientX;
+        setIsDragging(true);
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    }, []);
+
+    const handlePointerMove = useCallback((_e: React.PointerEvent) => {
+        // Visual feedback could be added here (e.g., opacity change)
+    }, []);
+
+    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]
+    );
+
+    return {
+        position,
+        isDragging,
+        showHint,
+        fabRef,
+        handlers: {
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+        },
+    };
+}

package/src/hooks/useMessages.ts

@@ -1,20 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import type { IMessage, IChatConfig } from '../types';
+import type { IMessage, IChatConfig, UseMessagesReturn } from '../types';
 import type { UseWebSocketReturn } from './useWebSocket';
 import { fetchMessages } from '../utils/api';
 
-export interface UseMessagesReturn {
-    messages: IMessage[];
-    addMessage: (message: IMessage) => void;
-    updateMessageStatus: (messageId: string, status: IMessage['status']) => void;
-    clearMessages: () => void;
-    isLoading: boolean;
-    error: Error | null;
-    loadMore: () => Promise<void>;
-    hasMore: boolean;
-    isLoadingMore: boolean;
-}
-
 export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig): UseMessagesReturn {
     const [messages, setMessages] = useState<IMessage[]>([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -22,6 +10,7 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
     const [nextPageToken, setNextPageToken] = useState<string | undefined>(undefined);
     const [hasMore, setHasMore] = useState(true);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [isBotThinking, setIsBotThinking] = useState(false);
 
     // Extract stable references from config
     const { httpApiUrl, conversationId, headers, onError, toast } = config;
@@ -89,6 +78,11 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
                 return [...prev, newMessage];
             });
 
+            // Clear bot thinking state when bot or system message arrives
+            if (newMessage.senderType === 'bot' || newMessage.senderType === 'system') {
+                setIsBotThinking(false);
+            }
+
             // Notify parent component about new message
             onMessageReceived?.(newMessage);
         }
@@ -102,6 +96,10 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
             }
             return [...prev, message];
         });
+        // Show bot thinking indicator immediately when customer sends a message
+        if (message.senderType === 'customer') {
+            setIsBotThinking(true);
+        }
     }, []);
 
     const updateMessageStatus = useCallback((messageId: string, status: IMessage['status']) => {
@@ -161,5 +159,6 @@ export function useMessages(websocket: UseWebSocketReturn, config: IChatConfig):
         loadMore,
         hasMore,
         isLoadingMore,
+        isBotThinking,
     };
 }