@xcelsior/ui-chat 1.0.8 → 2.0.1

package/src/components/Chat.tsx

@@ -1,46 +1,21 @@
 import { useCallback, useEffect, useState } from 'react';
 import { ChatWidget } from './ChatWidget';
 import { PreChatForm } from './PreChatForm';
+import { ChatBubbleIcon } from './BrandIcons';
+import { useDraggablePosition } from '../hooks/useDraggablePosition';
 import type { IChatConfig, IUser } from '../types';
 import { useChatWidgetState } from '../hooks/useChatWidgetState';
 import type { ChatWidgetState } from '../hooks/useChatWidgetState';
 
 interface ChatWidgetWrapperProps {
-    /**
-     * Base configuration for the chat widget (without user info and conversationId)
-     */
-    config: Omit<IChatConfig, 'currentUser' | 'conversationId' | 'userId'> & {
-        currentUser?: Partial<IUser>;
+    config: Omit<IChatConfig, 'conversationId'> & {
         conversationId?: string;
     };
-    /**
-     * Custom className for the wrapper
-     */
     className?: string;
-    /**
-     * Storage key prefix for persisting user data
-     * Defaults to 'xcelsior_chat'
-     */
     storageKeyPrefix?: string;
-    /**
-     * Callback when user submits the pre-chat form
-     */
     onPreChatSubmit?: (user: IUser) => void;
-    /**
-     * Controlled state. When provided, the component is controlled.
-     * - 'open': Fully open with chat interface
-     * - 'minimized': Show bubble button only
-     * - 'closed': Fully hidden
-     */
     state?: ChatWidgetState;
-    /**
-     * Default state for uncontrolled mode
-     * @default 'minimized'
-     */
     defaultState?: ChatWidgetState;
-    /**
-     * Callback when state changes
-     */
     onStateChange?: (state: ChatWidgetState) => void;
 }
 
@@ -51,23 +26,13 @@ interface StoredUserData {
     timestamp: number;
 }
 
-/**
- * Generates a unique session-based ID
- */
 function generateSessionId(): string {
     if (typeof crypto !== 'undefined' && crypto.randomUUID) {
         return crypto.randomUUID();
     }
-    // Fallback for older browsers
     return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
 }
 
-/**
- * Chat component that handles:
- * - Automatic conversation ID generation
- * - Pre-chat form for collecting user information
- * - Session persistence in localStorage
- */
 export function Chat({
     config,
     className = '',
@@ -80,22 +45,63 @@ export function Chat({
     const [userInfo, setUserInfo] = useState<IUser | null>(null);
     const [conversationId, setConversationId] = useState<string>('');
     const [isLoading, setIsLoading] = useState(true);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [showWidget, setShowWidget] = useState(false);
 
-    // Centralized state management using the custom hook
-    const { currentState, setState } = useChatWidgetState({
+    const identityMode = config.identityCollection || 'progressive';
+    const { position, isDragging, showHint, handlers } = useDraggablePosition(config.position);
+
+    const { currentState, setState: setStateRaw } = useChatWidgetState({
         state,
         defaultState,
         onStateChange,
     });
 
-    // Initialize user data from localStorage or generate new session
+    // Wrap setState with animation handling
+    const setState = useCallback(
+        (newState: ChatWidgetState) => {
+            if (newState === 'open' && currentState === 'minimized') {
+                // Opening: show widget immediately, trigger animation
+                setShowWidget(true);
+                setIsAnimating(true);
+                setStateRaw(newState);
+                // Let the animation class apply on next frame
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        setIsAnimating(false);
+                    });
+                });
+            } else if (
+                (newState === 'minimized' || newState === 'closed') &&
+                currentState === 'open'
+            ) {
+                // Closing: animate out, then change state
+                setIsAnimating(true);
+                setTimeout(() => {
+                    setShowWidget(false);
+                    setIsAnimating(false);
+                    setStateRaw(newState);
+                }, 200);
+            } else {
+                setStateRaw(newState);
+            }
+        },
+        [currentState, setStateRaw]
+    );
+
+    // Sync showWidget with state
+    useEffect(() => {
+        if (currentState === 'open') {
+            setShowWidget(true);
+        }
+    }, [currentState]);
+
+    // Initialize session
     useEffect(() => {
         const initializeSession = () => {
             try {
-                // Check if user provided initial data
                 if (config.currentUser?.email && config.currentUser?.name) {
                     const convId = config.conversationId || generateSessionId();
-
                     const user: IUser = {
                         name: config.currentUser.name,
                         email: config.currentUser.email,
@@ -103,31 +109,24 @@ export function Chat({
                         type: 'customer',
                         status: config.currentUser.status,
                     };
-
                     setUserInfo(user);
                     setConversationId(convId);
                     setIsLoading(false);
                     return;
                 }
 
-                // Try to load from localStorage
                 const storedDataJson = localStorage.getItem(`${storageKeyPrefix}_user`);
-
                 if (storedDataJson) {
                     const storedData: StoredUserData = JSON.parse(storedDataJson);
-
-                    // Check if session is still valid (24 hours)
                     const isExpired = Date.now() - storedData.timestamp > 24 * 60 * 60 * 1000;
 
                     if (!isExpired && storedData.email && storedData.name) {
-                        // Restore session
                         const user: IUser = {
                             name: storedData.name,
                             email: storedData.email,
                             type: 'customer',
                             status: 'online',
                         };
-
                         setUserInfo(user);
                         setConversationId(storedData.conversationId);
                         setIsLoading(false);
@@ -138,20 +137,11 @@ export function Chat({
                 const convId = config.conversationId || generateSessionId();
                 setConversationId(convId);
 
-                // If we have partial user info, use it
-                if (config.currentUser?.email && config.currentUser?.name) {
-                    const user: IUser = {
-                        name: config.currentUser.name,
-                        email: config.currentUser.email,
-                        avatar: config.currentUser.avatar,
-                        type: 'customer',
-                        status: 'online',
-                    };
-                    setUserInfo(user);
+                if (identityMode === 'progressive' || identityMode === 'none') {
+                    setUserInfo(null);
                 }
             } catch (error) {
                 console.error('Error initializing chat session:', error);
-                // Generate fallback IDs
                 setConversationId(config.conversationId || generateSessionId());
             } finally {
                 setIsLoading(false);
@@ -159,21 +149,13 @@ export function Chat({
         };
 
         initializeSession();
-    }, [config, storageKeyPrefix]);
+    }, [config, storageKeyPrefix, identityMode]);
 
-    // Handle pre-chat form submission
     const handlePreChatSubmit = useCallback(
         (name: string, email: string) => {
             const convId = conversationId || generateSessionId();
+            const user: IUser = { name, email, type: 'customer', status: 'online' };
 
-            const user: IUser = {
-                name,
-                email,
-                type: 'customer',
-                status: 'online',
-            };
-
-            // Store in localStorage
             const storageData: StoredUserData = {
                 name,
                 email,
@@ -183,8 +165,8 @@ export function Chat({
 
             try {
                 localStorage.setItem(`${storageKeyPrefix}_user`, JSON.stringify(storageData));
-            } catch (error) {
-                console.error('Error storing user data:', error);
+            } catch {
+                // Storage unavailable
             }
 
             setUserInfo(user);
@@ -194,35 +176,56 @@ export function Chat({
         [conversationId, storageKeyPrefix, onPreChatSubmit]
     );
 
-    // Show loading state
-    if (isLoading) {
-        return null; // Or you could show a loading spinner
-    }
+    if (isLoading) return null;
+    if (currentState === 'closed') return null;
 
-    // Handle closed state - fully hidden
-    if (currentState === 'closed') {
-        return null;
-    }
+    const positionClass = position === 'left' ? 'left-4' : 'right-4';
+    const primaryColor = config.theme?.primary || '#337eff';
+    const primaryStrong = config.theme?.primaryStrong || '#005eff';
 
-    // Handle minimized state - show bubble button only
+    // FAB button — only show when minimized
     if (currentState === 'minimized') {
         return (
-            <div className={`fixed bottom-4 right-4 z-50 ${className}`}>
+            <div className={`fixed bottom-5 ${positionClass} z-50 ${className}`}>
                 <button
                     type="button"
                     onClick={() => setState('open')}
-                    className="h-14 w-14 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:shadow-xl transition-all flex items-center justify-center relative"
+                    className={`group relative rounded-full text-white transition-all duration-300 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)'; }}
+                    style={{
+                        width: 64,
+                        height: 64,
+                        background: `linear-gradient(135deg, ${primaryColor}, ${primaryStrong})`,
+                        boxShadow: [
+                            `0 4px 24px 0 ${primaryColor}80`,
+                            `0 8px 32px -4px rgba(0,0,0,0.3)`,
+                            `inset 0 1px 0 0 rgba(255,255,255,0.2)`,
+                        ].join(', '),
+                    }}
                     aria-label="Open chat"
+                    {...handlers}
                 >
-                    <span className="text-2xl">💬</span>
+                    <ChatBubbleIcon size={28} color="white" className="pointer-events-none" />
+
+                    {/* Pulse ring — subtle blue glow */}
+                    <span
+                        className="absolute inset-0 rounded-full animate-ping pointer-events-none"
+                        style={{
+                            backgroundColor: primaryColor,
+                            opacity: 0.15,
+                            animationDuration: '2.5s',
+                        }}
+                    />
                 </button>
             </div>
         );
     }
 
-    // Open state - show either pre-chat form or chat widget
-    // Show pre-chat form if user info is not available
-    if (!userInfo || !userInfo.email || !userInfo.name) {
+    // Open state — pre-chat form (form mode only)
+    if (identityMode === 'form' && (!userInfo || !userInfo.email || !userInfo.name)) {
         return (
             <PreChatForm
                 onSubmit={handlePreChatSubmit}
@@ -235,19 +238,36 @@ export function Chat({
         );
     }
 
-    // Show chat widget with complete config
+    // Open state — chat widget
     const fullConfig: IChatConfig = {
         ...config,
         conversationId,
-        currentUser: userInfo,
+        currentUser: userInfo || undefined,
     };
 
+    // Animation styles for open/close
+    const widgetAnimationStyle: React.CSSProperties =
+        showWidget && !isAnimating
+            ? {
+                  opacity: 1,
+                  transform: 'translateY(0) scale(1)',
+                  transition: 'opacity 0.25s ease-out, transform 0.25s ease-out',
+              }
+            : {
+                  opacity: 0,
+                  transform: 'translateY(12px) scale(0.97)',
+                  transition: 'opacity 0.2s ease-in, transform 0.2s ease-in',
+              };
+
     return (
-        <ChatWidget
-            config={fullConfig}
-            className={className}
-            onClose={() => setState('closed')}
-            onMinimize={() => setState('minimized')}
-        />
+        <div style={widgetAnimationStyle}>
+            <ChatWidget
+                config={fullConfig}
+                className={className}
+                onClose={() => setState('closed')}
+                onMinimize={() => setState('minimized')}
+                resolvedPosition={position}
+            />
+        </div>
     );
 }

package/src/components/ChatHeader.tsx

@@ -1,93 +1,148 @@
-import type { IUser } from '../types';
+import type { IChatTheme, IUser } from '../types';
+import { XcelsiorSymbol } from './BrandIcons';
 
 interface ChatHeaderProps {
     agent?: IUser;
     onClose?: () => void;
     onMinimize?: () => void;
+    theme?: IChatTheme;
 }
 
-export function ChatHeader({ agent, onClose, onMinimize }: ChatHeaderProps) {
+export function ChatHeader({ agent, onClose, onMinimize, theme }: ChatHeaderProps) {
     return (
-        <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 flex items-center justify-between">
-            <div className="flex items-center gap-3">
-                <div className="relative">
-                    <div className="h-10 w-10 rounded-full bg-white/20 flex items-center justify-center text-lg font-medium">
+        <div
+            className="relative text-white overflow-hidden"
+            style={{
+                flexShrink: 0,
+                /* Layered blue smoke/glow effect for premium look */
+                background: [
+                    'radial-gradient(ellipse at 30% 50%, rgba(0,50,255,0.4) 0%, transparent 60%)',
+                    'radial-gradient(ellipse at 70% 30%, rgba(0,80,255,0.3) 0%, transparent 50%)',
+                    'radial-gradient(ellipse at 50% 80%, rgba(0,30,200,0.3) 0%, transparent 60%)',
+                    `linear-gradient(135deg, #0030cc 0%, #001a66 50%, #000d33 100%)`,
+                ].join(', '),
+            }}
+        >
+            {/* Top glass highlight — subtle light sweep for depth */}
+            <div
+                className="absolute inset-0 pointer-events-none"
+                style={{
+                    background:
+                        'linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%)',
+                }}
+            />
+
+            <div className="flex items-center justify-between" style={{ padding: '8px 16px' }}>
+                <div className="flex items-center gap-3">
+                    <div className="relative">
                         {agent?.avatar ? (
                             <img
                                 src={agent.avatar}
                                 alt={agent.name}
                                 className="h-10 w-10 rounded-full object-cover"
+                                style={{
+                                    boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
+                                }}
                             />
                         ) : (
-                            '🎧'
+                            <div style={{ filter: 'drop-shadow(0 2px 8px rgba(0,0,0,0.3))' }}>
+                                <XcelsiorSymbol size={28} color="white" />
+                            </div>
+                        )}
+                        {agent?.status === 'online' && (
+                            <div
+                                className="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full"
+                                style={{
+                                    backgroundColor: theme?.statusPositive || '#1ed473',
+                                    border: '2.5px solid rgba(0,50,180,0.9)',
+                                    boxShadow: `0 0 8px ${theme?.statusPositive || '#1ed473'}80`,
+                                }}
+                            />
                         )}
                     </div>
-                    {agent?.status === 'online' && (
-                        <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white" />
-                    )}
-                </div>
-                <div>
-                    <h3 className="font-semibold text-base">{agent?.name || 'Support Team'}</h3>
-                    <p className="text-xs text-white/80">
-                        {agent?.status === 'online'
-                            ? 'Online'
-                            : agent?.status === 'away'
-                              ? 'Away'
-                              : "We'll reply as soon as possible"}
-                    </p>
+                    <div>
+                        <h3
+                            className="font-semibold leading-tight"
+                            style={{
+                                fontSize: '15px',
+                                letterSpacing: '-0.01em',
+                            }}
+                        >
+                            {agent?.name || 'Xcelsior Software'}
+                        </h3>
+                        <p
+                            className="mt-0.5 leading-tight"
+                            style={{
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                                color: 'rgba(255,255,255,0.6)',
+                            }}
+                        >
+                            {agent?.status === 'online' ? (
+                                <span className="flex items-center gap-1.5">
+                                    <span
+                                        className="inline-block w-1.5 h-1.5 rounded-full"
+                                        style={{
+                                            backgroundColor: theme?.statusPositive || '#1ed473',
+                                            boxShadow: `0 0 4px ${theme?.statusPositive || '#1ed473'}60`,
+                                        }}
+                                    />
+                                    Online now
+                                </span>
+                            ) : agent?.status === 'away' ? (
+                                'Away'
+                            ) : (
+                                'We typically reply within minutes'
+                            )}
+                        </p>
+                    </div>
                 </div>
-            </div>
 
-            <div className="flex items-center gap-2">
-                {onMinimize && (
-                    <button
-                        type="button"
-                        onClick={onMinimize}
-                        className="p-2 hover:bg-white/10 rounded-full transition-colors"
-                        aria-label="Minimize chat"
-                    >
-                        <svg
-                            className="w-5 h-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            aria-hidden="true"
-                        >
-                            <title>Minimize icon</title>
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M20 12H4"
-                            />
-                        </svg>
-                    </button>
-                )}
-                {onClose && (
-                    <button
-                        type="button"
-                        onClick={onClose}
-                        className="p-2 hover:bg-white/10 rounded-full transition-colors"
-                        aria-label="Close chat"
-                    >
-                        <svg
-                            className="w-5 h-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            aria-hidden="true"
+                <div className="flex items-center gap-0.5">
+                    {/* Single minimize button — always minimizes back to FAB bubble */}
+                    {(onMinimize || onClose) && (
+                        <button
+                            type="button"
+                            onClick={onMinimize || onClose}
+                            className="p-2 rounded-lg transition-all duration-150"
+                            style={{ backgroundColor: 'transparent' }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                            }}
+                            aria-label="Minimize chat"
                         >
-                            <title>Close icon</title>
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M6 18L18 6M6 6l12 12"
-                            />
-                        </svg>
-                    </button>
-                )}
+                            <svg
+                                width="18"
+                                height="18"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                aria-hidden="true"
+                            >
+                                <title>Minimize</title>
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    )}
+                </div>
             </div>
+
+            {/* Bottom edge — subtle gradient line (matches website section dividers) */}
+            <div
+                className="h-px"
+                style={{
+                    background:
+                        'linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent 95%)',
+                }}
+            />
         </div>
     );
 }