@xcelsior/ui-chat 1.0.1

package/src/components/Chat.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chat } from './Chat';
+import type { IChatConfig } from '../types';
+
+const meta: Meta<typeof Chat> = {
+    title: 'Components/Chat',
+    component: Chat,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Chat>;
+
+// Base configuration without user details
+const baseConfig: Omit<IChatConfig, 'currentUser' | 'conversationId' | 'userId'> = {
+    websocketUrl: 'wss://dev-ws-chat.xcelsior.co',
+    httpApiUrl: 'https://dev-chat.xcelsior.co/api',
+    enableEmoji: true,
+    enableFileUpload: true,
+    enableTypingIndicator: true,
+    fileUpload: {
+        uploadUrl: `https://dev-chat.xcelsior.co/api/attachments/upload-url`,
+        maxFileSize: 2 * 1024 * 1024, // 2MB (default)
+        allowedTypes: [
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+            'application/pdf',
+            'application/msword',
+            'text/plain',
+            'text/csv',
+        ],
+    },
+    enableReadReceipts: true,
+    apiKey: 'test',
+    toast: {
+        success: (message: string) => console.log('Success:', message),
+        error: (message: string) => console.error('Error:', message),
+        info: (message: string) => console.log('Info:', message),
+    },
+};
+
+/**
+ * Default story - Shows pre-chat form first
+ */
+export const Default: Story = {
+    args: {
+        config: baseConfig,
+    },
+};

package/src/components/Chat.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState } from 'react';
+import { ChatWidget } from './ChatWidget';
+import { PreChatForm } from './PreChatForm';
+import type { IChatConfig, IUser } from '../types';
+
+interface ChatWidgetWrapperProps {
+    /**
+     * Base configuration for the chat widget (without user info and conversationId)
+     */
+    config: Omit<IChatConfig, 'currentUser' | 'conversationId' | 'userId'> & {
+        currentUser?: Partial<IUser>;
+        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;
+}
+
+interface StoredUserData {
+    name: string;
+    email: string;
+    conversationId: string;
+    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 = '',
+    storageKeyPrefix = 'xcelsior_chat',
+    onPreChatSubmit,
+}: ChatWidgetWrapperProps) {
+    const [userInfo, setUserInfo] = useState<IUser | null>(null);
+    const [conversationId, setConversationId] = useState<string>('');
+    const [isLoading, setIsLoading] = useState(true);
+
+    // Initialize user data from localStorage or generate new 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,
+                        avatar: config.currentUser.avatar,
+                        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);
+                        return;
+                    }
+                }
+
+                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);
+                }
+            } catch (error) {
+                console.error('Error initializing chat session:', error);
+                // Generate fallback IDs
+                setConversationId(config.conversationId || generateSessionId());
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        initializeSession();
+    }, [config, storageKeyPrefix]);
+
+    // 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',
+            };
+
+            // Store in localStorage
+            const storageData: StoredUserData = {
+                name,
+                email,
+                conversationId: convId,
+                timestamp: Date.now(),
+            };
+
+            try {
+                localStorage.setItem(`${storageKeyPrefix}_user`, JSON.stringify(storageData));
+            } catch (error) {
+                console.error('Error storing user data:', error);
+            }
+
+            setUserInfo(user);
+            setConversationId(convId);
+            onPreChatSubmit?.(user);
+        },
+        [conversationId, storageKeyPrefix, onPreChatSubmit]
+    );
+
+    // Show loading state
+    if (isLoading) {
+        return null; // Or you could show a loading spinner
+    }
+
+    // Show pre-chat form if user info is not available
+    if (!userInfo || !userInfo.email || !userInfo.name) {
+        return (
+            <PreChatForm
+                onSubmit={handlePreChatSubmit}
+                className={className}
+                initialName={config.currentUser?.name}
+                initialEmail={config.currentUser?.email}
+            />
+        );
+    }
+
+    // Show chat widget with complete config
+    const fullConfig: IChatConfig = {
+        ...config,
+        conversationId,
+        currentUser: userInfo,
+    };
+
+    return <ChatWidget config={fullConfig} className={className} />;
+}

package/src/components/ChatHeader.tsx

@@ -0,0 +1,93 @@
+import type { IUser } from '../types';
+
+interface ChatHeaderProps {
+    agent?: IUser;
+    onClose?: () => void;
+    onMinimize?: () => void;
+}
+
+export function ChatHeader({ agent, onClose, onMinimize }: 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">
+                        {agent?.avatar ? (
+                            <img
+                                src={agent.avatar}
+                                alt={agent.name}
+                                className="h-10 w-10 rounded-full object-cover"
+                            />
+                        ) : (
+                            '🎧'
+                        )}
+                    </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>
+            </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"
+                        >
+                            <title>Close icon</title>
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M6 18L18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}