@xcelsior/ui-chat 1.0.1

package/src/components/PreChatForm.tsx

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+
+interface PreChatFormProps {
+    onSubmit: (name: string, email: string) => void;
+    className?: string;
+    initialName?: string;
+    initialEmail?: string;
+}
+
+/**
+ * PreChatForm component for collecting user information before starting chat
+ */
+export function PreChatForm({
+    onSubmit,
+    className = '',
+    initialName = '',
+    initialEmail = '',
+}: PreChatFormProps) {
+    const [name, setName] = useState(initialName);
+    const [email, setEmail] = useState(initialEmail);
+    const [errors, setErrors] = useState<{ name?: string; email?: string }>({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const validateForm = (): boolean => {
+        const newErrors: { name?: string; email?: string } = {};
+
+        // Validate name
+        if (!name.trim()) {
+            newErrors.name = 'Name is required';
+        } else if (name.trim().length < 2) {
+            newErrors.name = 'Name must be at least 2 characters';
+        }
+
+        // Validate email
+        if (!email.trim()) {
+            newErrors.email = 'Email is required';
+        } else {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(email)) {
+                newErrors.email = 'Please enter a valid email address';
+            }
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!validateForm()) {
+            return;
+        }
+
+        setIsSubmitting(true);
+        try {
+            onSubmit(name.trim(), email.trim());
+        } catch (error) {
+            console.error('Error submitting form:', error);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div
+            className={`fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`}
+            style={{
+                width: '400px',
+                maxHeight: 'calc(100vh - 2rem)',
+            }}
+        >
+            {/* Header */}
+            <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4">
+                <h2 className="text-lg font-semibold">Start a Conversation</h2>
+                <p className="text-sm text-blue-100 mt-1">
+                    Please provide your details to continue
+                </p>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="p-6 space-y-5">
+                {/* Name Input */}
+                <div>
+                    <label
+                        htmlFor="chat-name"
+                        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200"
+                    >
+                        Name <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="text"
+                        id="chat-name"
+                        value={name}
+                        onChange={(e) => {
+                            setName(e.target.value);
+                            if (errors.name) {
+                                setErrors((prev) => ({ ...prev, name: undefined }));
+                            }
+                        }}
+                        className={`block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${
+                            errors.name
+                                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                                : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
+                        } dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
+                        placeholder="John Doe"
+                        disabled={isSubmitting}
+                        autoComplete="name"
+                    />
+                    {errors.name && (
+                        <p className="mt-2 text-sm text-red-600 dark:text-red-500" role="alert">
+                            {errors.name}
+                        </p>
+                    )}
+                </div>
+
+                {/* Email Input */}
+                <div>
+                    <label
+                        htmlFor="chat-email"
+                        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200"
+                    >
+                        Email <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="email"
+                        id="chat-email"
+                        value={email}
+                        onChange={(e) => {
+                            setEmail(e.target.value);
+                            if (errors.email) {
+                                setErrors((prev) => ({ ...prev, email: undefined }));
+                            }
+                        }}
+                        className={`block w-full px-4 py-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border ${
+                            errors.email
+                                ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+                                : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
+                        } dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
+                        placeholder="john@example.com"
+                        disabled={isSubmitting}
+                        autoComplete="email"
+                    />
+                    {errors.email && (
+                        <p className="mt-2 text-sm text-red-600 dark:text-red-500" role="alert">
+                            {errors.email}
+                        </p>
+                    )}
+                </div>
+
+                {/* Submit Button */}
+                <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                >
+                    {isSubmitting ? (
+                        <span className="flex items-center justify-center">
+                            <svg
+                                className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                aria-label="Loading"
+                            >
+                                <title>Loading</title>
+                                <circle
+                                    className="opacity-25"
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    strokeWidth="4"
+                                />
+                                <path
+                                    className="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                />
+                            </svg>
+                            Starting Chat...
+                        </span>
+                    ) : (
+                        'Start Chat'
+                    )}
+                </button>
+
+                {/* Privacy Notice */}
+                <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+                    We respect your privacy. Your information will only be used to assist you.
+                </p>
+            </form>
+
+            {/* Footer */}
+            <div className="bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700">
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                    Powered by <span className="font-semibold">Xcelsior Chat</span>
+                </p>
+            </div>
+        </div>
+    );
+}

package/src/components/TypingIndicator.tsx

@@ -0,0 +1,31 @@
+interface TypingIndicatorProps {
+    isTyping: boolean;
+    userName?: string;
+}
+
+export function TypingIndicator({ isTyping, userName }: TypingIndicatorProps) {
+    if (!isTyping) {
+        return null;
+    }
+
+    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="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' }}
+                    />
+                </div>
+                <span className="text-xs text-gray-600 dark:text-gray-400">
+                    {userName ? `${userName} is typing...` : 'Someone is typing...'}
+                </span>
+            </div>
+        </div>
+    );
+}

package/src/hooks/useFileUpload.ts

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+import axios from 'axios';
+import type { IFileUploadConfig, IUploadedFile } from '../types';
+
+export interface UseFileUploadReturn {
+    uploadFile: (file: File) => Promise<IUploadedFile | null>;
+    isUploading: boolean;
+    uploadProgress: number;
+    error: Error | null;
+    canUpload: boolean;
+}
+
+export function useFileUpload(apiKey: string, config?: IFileUploadConfig): UseFileUploadReturn {
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const [error, setError] = useState<Error | null>(null);
+
+    const defaultConfig = {
+        maxFileSize: 10 * 1024 * 1024, // 10MB default
+        allowedTypes: [
+            'image/jpeg',
+            'image/jpg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+            'application/pdf',
+            'application/msword',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            'text/plain',
+            'text/csv',
+        ],
+    };
+
+    const finalConfig = { ...defaultConfig, ...config };
+    const canUpload = !!config?.uploadUrl;
+
+    const validateFile = (file: File): string | null => {
+        if (!finalConfig.allowedTypes.includes(file.type)) {
+            return `File type ${file.type} is not supported. Allowed types: ${finalConfig.allowedTypes.join(', ')}`;
+        }
+
+        if (file.size > finalConfig.maxFileSize) {
+            return `File size ${(file.size / 1024 / 1024).toFixed(2)}MB exceeds the maximum allowed size of ${(finalConfig.maxFileSize / 1024 / 1024).toFixed(2)}MB`;
+        }
+
+        return null;
+    };
+
+    const uploadFile = async (file: File): Promise<IUploadedFile | null> => {
+        if (!config?.uploadUrl) {
+            const err = new Error('File upload URL is not configured');
+            setError(err);
+            throw err;
+        }
+
+        const validationError = validateFile(file);
+        if (validationError) {
+            const err = new Error(validationError);
+            setError(err);
+            throw err;
+        }
+
+        setIsUploading(true);
+        setUploadProgress(0);
+        setError(null);
+
+        try {
+            // Step 1: Get presigned upload URL from the API
+            const uploadUrlResponse = await axios.post(
+                config.uploadUrl,
+                {
+                    fileName: file.name,
+                    contentType: file.type,
+                    fileSize: file.size,
+                },
+                {
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'x-api-key': apiKey || '',
+                        ...config.headers,
+                    },
+                }
+            );
+
+            const { uploadUrl, attachmentUrl } =
+                uploadUrlResponse.data.data || uploadUrlResponse.data;
+
+            if (!uploadUrl || !attachmentUrl) {
+                throw new Error('Failed to get upload URL from server');
+            }
+
+            // Step 2: Upload file directly to S3 using presigned URL
+            await axios.put(uploadUrl, file, {
+                headers: {
+                    'Content-Type': file.type,
+                },
+                onUploadProgress: (progressEvent) => {
+                    if (progressEvent.total) {
+                        const progress = Math.round(
+                            (progressEvent.loaded * 100) / progressEvent.total
+                        );
+                        setUploadProgress(progress);
+                    }
+                },
+            });
+
+            return {
+                url: attachmentUrl,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                markdown: file.type.startsWith('image/')
+                    ? `![${file.name}](${attachmentUrl})`
+                    : `[${file.name}](${attachmentUrl})`,
+            };
+        } catch (err) {
+            console.error('File upload failed:', err);
+            const error = err instanceof Error ? err : new Error('Upload failed');
+            setError(error);
+            throw error;
+        } finally {
+            setIsUploading(false);
+            setUploadProgress(0);
+        }
+    };
+
+    return {
+        uploadFile,
+        isUploading,
+        uploadProgress,
+        error,
+        canUpload,
+    };
+}

package/src/hooks/useMessages.ts

@@ -0,0 +1,165 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { IMessage, IChatConfig } 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);
+    const [error, setError] = useState<Error | null>(null);
+    const [nextPageToken, setNextPageToken] = useState<string | undefined>(undefined);
+    const [hasMore, setHasMore] = useState(true);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+    // Extract stable references from config
+    const { httpApiUrl, conversationId, headers, onError, toast } = config;
+
+    const headersWithApiKey = useMemo(
+        () => ({
+            ...headers,
+            'x-api-key': config.apiKey,
+        }),
+        [headers, config.apiKey]
+    );
+
+    // Fetch existing messages when conversationId changes
+    useEffect(() => {
+        const loadMessages = async () => {
+            // Only fetch if we have httpApiUrl and conversationId
+            if (!httpApiUrl || !conversationId) {
+                return;
+            }
+
+            setIsLoading(true);
+            setError(null);
+
+            try {
+                const result = await fetchMessages(
+                    httpApiUrl,
+                    { conversationId, limit: 20 },
+                    headersWithApiKey
+                );
+
+                setMessages(result.data);
+                setNextPageToken(result.nextPageToken);
+                setHasMore(!!result.nextPageToken);
+            } catch (err) {
+                const error = err instanceof Error ? err : new Error('Failed to load messages');
+                setError(error);
+                onError?.(error);
+                toast?.error('Failed to load existing messages');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadMessages();
+        // Only re-run when conversationId or httpApiUrl changes
+    }, [conversationId, httpApiUrl, headersWithApiKey, onError, toast]);
+
+    // Extract onMessageReceived callback
+    const { onMessageReceived } = config;
+
+    // Listen for incoming messages from WebSocket
+    useEffect(() => {
+        if (websocket.lastMessage?.type === 'message' && websocket.lastMessage.data) {
+            const newMessage: IMessage = websocket.lastMessage.data;
+
+            if (conversationId && newMessage.conversationId !== conversationId) {
+                // Ignore messages for other conversations
+                return;
+            }
+            setMessages((prev) => {
+                // Avoid duplicates
+                if (prev.some((msg) => msg.id === newMessage.id)) {
+                    return prev;
+                }
+                return [...prev, newMessage];
+            });
+
+            // Notify parent component about new message
+            onMessageReceived?.(newMessage);
+        }
+    }, [websocket.lastMessage, onMessageReceived, conversationId]);
+
+    const addMessage = useCallback((message: IMessage) => {
+        setMessages((prev) => {
+            // Avoid duplicates
+            if (prev.some((msg) => msg.id === message.id)) {
+                return prev;
+            }
+            return [...prev, message];
+        });
+    }, []);
+
+    const updateMessageStatus = useCallback((messageId: string, status: IMessage['status']) => {
+        setMessages((prev) => prev.map((msg) => (msg.id === messageId ? { ...msg, status } : msg)));
+    }, []);
+
+    const clearMessages = useCallback(() => {
+        setMessages([]);
+    }, []);
+
+    const loadMore = useCallback(async () => {
+        if (!hasMore || isLoadingMore || !httpApiUrl || !conversationId || !nextPageToken) {
+            return;
+        }
+
+        setIsLoadingMore(true);
+        setError(null);
+
+        try {
+            const result = await fetchMessages(
+                httpApiUrl,
+                {
+                    conversationId,
+                    limit: 20,
+                    pageToken: nextPageToken,
+                },
+                headersWithApiKey
+            );
+
+            setMessages((prev) => [...result.data, ...prev]);
+            setNextPageToken(result.nextPageToken);
+            setHasMore(!!result.nextPageToken);
+        } catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to load more messages');
+            setError(error);
+            onError?.(error);
+        } finally {
+            setIsLoadingMore(false);
+        }
+    }, [
+        hasMore,
+        isLoadingMore,
+        httpApiUrl,
+        conversationId,
+        nextPageToken,
+        headersWithApiKey,
+        onError,
+    ]);
+
+    return {
+        messages,
+        addMessage,
+        updateMessageStatus,
+        clearMessages,
+        isLoading,
+        error,
+        loadMore,
+        hasMore,
+        isLoadingMore,
+    };
+}

package/src/hooks/useTypingIndicator.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import type { UseWebSocketReturn } from './useWebSocket';
+
+export interface UseTypingIndicatorReturn {
+    isTyping: boolean;
+    typingUsers: string[];
+}
+
+export function useTypingIndicator(websocket: UseWebSocketReturn): UseTypingIndicatorReturn {
+    const [typingUsers, setTypingUsers] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (websocket.lastMessage?.type === 'typing' && websocket.lastMessage.data) {
+            const { userId, isTyping } = websocket.lastMessage.data;
+
+            if (isTyping) {
+                setTypingUsers((prev) => {
+                    if (!prev.includes(userId)) {
+                        return [...prev, userId];
+                    }
+                    return prev;
+                });
+            } else {
+                setTypingUsers((prev) => prev.filter((id) => id !== userId));
+            }
+        }
+    }, [websocket.lastMessage]);
+
+    return {
+        isTyping: typingUsers.length > 0,
+        typingUsers,
+    };
+}