@xcelsior/ui-chat 1.0.1

package/src/components/ChatInput.tsx

@@ -0,0 +1,363 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Button, TextArea } from '@xcelsior/design-system';
+import Picker from '@emoji-mart/react';
+import type { IChatConfig } from '../types';
+import type { UseFileUploadReturn } from '../hooks/useFileUpload';
+
+interface ChatInputProps {
+    onSend: (message: string) => void;
+    onTyping?: (isTyping: boolean) => void;
+    config: IChatConfig;
+    fileUpload: UseFileUploadReturn;
+    disabled?: boolean;
+}
+
+export function ChatInput({
+    onSend,
+    onTyping,
+    config,
+    fileUpload,
+    disabled = false,
+}: ChatInputProps) {
+    const [message, setMessage] = useState('');
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [emojiData, setEmojiData] = useState<any>();
+    const [emojiPickerPosition, setEmojiPickerPosition] = useState<{
+        top: number;
+        left: number;
+    } | null>(null);
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    const emojiPickerRef = useRef<HTMLDivElement>(null);
+    const emojiButtonRef = useRef<HTMLButtonElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const startTypingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const isTypingRef = useRef<boolean>(false);
+
+    const enableEmoji = config.enableEmoji ?? true;
+    const enableFileUpload = config.enableFileUpload ?? true;
+
+    // Load emoji data
+    useEffect(() => {
+        if (!enableEmoji) return;
+        (async () => {
+            try {
+                const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
+                setEmojiData(await response.json());
+            } catch (error) {
+                console.error('Failed to load emoji data:', error);
+            }
+        })();
+    }, [enableEmoji]);
+
+    // Handle click outside emoji picker
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target as Node)) {
+                setShowEmojiPicker(false);
+            }
+        };
+
+        if (showEmojiPicker) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showEmojiPicker]);
+
+    // Cleanup typing timeouts on unmount
+    useEffect(() => {
+        return () => {
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+            if (startTypingTimeoutRef.current) {
+                clearTimeout(startTypingTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    // Update emoji picker position on window resize/scroll
+    useEffect(() => {
+        if (!showEmojiPicker) return;
+
+        const updatePosition = () => {
+            if (emojiButtonRef.current) {
+                const rect = emojiButtonRef.current.getBoundingClientRect();
+                setEmojiPickerPosition({
+                    top: rect.top - 370,
+                    left: rect.left - 300,
+                });
+            }
+        };
+
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [showEmojiPicker]);
+
+    const handleTyping = (value: string) => {
+        setMessage(value);
+
+        // Send typing indicator with debouncing
+        if (onTyping && config.enableTypingIndicator !== false) {
+            // Clear any pending "start typing" timeout
+            if (startTypingTimeoutRef.current) {
+                clearTimeout(startTypingTimeoutRef.current);
+            }
+
+            // Clear any pending "stop typing" timeout
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+
+            // If not already typing, debounce the start typing event
+            if (!isTypingRef.current) {
+                startTypingTimeoutRef.current = setTimeout(() => {
+                    onTyping(true);
+                    isTypingRef.current = true;
+                }, 300); // 300ms debounce for start typing
+            }
+
+            // Set timeout to stop typing indicator after inactivity
+            typingTimeoutRef.current = setTimeout(() => {
+                if (isTypingRef.current) {
+                    onTyping(false);
+                    isTypingRef.current = false;
+                }
+            }, 1500); // 1.5s of inactivity to stop typing
+        }
+    };
+
+    const handleSend = () => {
+        const trimmedMessage = message.trim();
+        if (!trimmedMessage || disabled) return;
+
+        onSend(trimmedMessage);
+        setMessage('');
+        setShowEmojiPicker(false);
+
+        // Stop typing indicator
+        if (onTyping) {
+            // Clear all typing-related timeouts
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+            if (startTypingTimeoutRef.current) {
+                clearTimeout(startTypingTimeoutRef.current);
+            }
+            // Send stop typing event if currently typing
+            if (isTypingRef.current) {
+                onTyping(false);
+                isTypingRef.current = false;
+            }
+        }
+
+        // Focus back on textarea
+        textAreaRef.current?.focus();
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+
+    const insertAtCursor = (text: string) => {
+        const textarea = textAreaRef.current;
+        if (!textarea) {
+            setMessage((prev) => prev + text);
+            return;
+        }
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const newValue = message.slice(0, start) + text + message.slice(end);
+        setMessage(newValue);
+
+        // Set cursor position after inserted text
+        setTimeout(() => {
+            const newCursorPos = start + text.length;
+            textarea.setSelectionRange(newCursorPos, newCursorPos);
+            textarea.focus();
+        }, 0);
+    };
+
+    const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (!files || files.length === 0) return;
+
+        const file = files[0];
+        try {
+            config.toast?.info('Uploading file...');
+            const uploadedFile = await fileUpload.uploadFile(file);
+            if (uploadedFile?.markdown) {
+                insertAtCursor(`\n${uploadedFile.markdown}\n`);
+                config.toast?.success('File uploaded successfully');
+            }
+        } catch (error: any) {
+            console.error('File upload failed:', error);
+            config.toast?.error(error.message);
+        } finally {
+            // Clear the file input
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
+
+    return (
+        <div className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3">
+            <div className="relative flex-1">
+                <div className="relative">
+                    <TextArea
+                        ref={textAreaRef}
+                        value={message}
+                        onChange={(e) => handleTyping(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Type a message..."
+                        rows={1}
+                        className="resize-none pr-24 pl-4 py-3 rounded-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm leading-5 placeholder-gray-500 dark:placeholder-gray-400"
+                        disabled={disabled}
+                    />
+
+                    {/* Actions inside the input on the right */}
+                    <div className="absolute right-12 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                        {enableEmoji && (
+                            <div className="relative">
+                                <button
+                                    ref={emojiButtonRef}
+                                    type="button"
+                                    onClick={() => {
+                                        if (!showEmojiPicker && emojiButtonRef.current) {
+                                            const rect =
+                                                emojiButtonRef.current.getBoundingClientRect();
+                                            setEmojiPickerPosition({
+                                                top: rect.top - 450,
+                                                left: rect.left - 290,
+                                            });
+                                        }
+                                        setShowEmojiPicker((v) => !v);
+                                    }}
+                                    className="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                                    disabled={disabled}
+                                    aria-label="Add emoji"
+                                >
+                                    <span className="text-lg">😊</span>
+                                </button>
+                            </div>
+                        )}
+
+                        {enableFileUpload && fileUpload.canUpload && (
+                            <>
+                                <button
+                                    type="button"
+                                    onClick={() => fileInputRef.current?.click()}
+                                    className="p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                                    disabled={disabled || fileUpload.isUploading}
+                                    aria-label="Attach file"
+                                >
+                                    {fileUpload.isUploading ? (
+                                        <span className="text-lg animate-spin">⏳</span>
+                                    ) : (
+                                        <span className="text-lg">📎</span>
+                                    )}
+                                </button>
+                                <input
+                                    ref={fileInputRef}
+                                    type="file"
+                                    accept="image/*,application/pdf,.doc,.docx"
+                                    className="hidden"
+                                    onChange={handleFileSelect}
+                                />
+                            </>
+                        )}
+                    </div>
+
+                    {/* Send button positioned inside the input at far right */}
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                        <Button
+                            onClick={handleSend}
+                            disabled={!message.trim() || disabled}
+                            variant="primary"
+                            size="sm"
+                            className="h-9 w-9 p-0 rounded-full flex items-center justify-center shadow-sm"
+                        >
+                            <span className="flex items-center justify-center">
+                                <svg
+                                    className="w-4 h-4 rotate-90"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                    aria-hidden="true"
+                                >
+                                    <title>Send icon</title>
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                    />
+                                </svg>
+                            </span>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            {fileUpload.isUploading && (
+                <div className="mt-2">
+                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+                        <div
+                            className="bg-blue-600 h-1.5 rounded-full transition-all duration-300"
+                            style={{ width: `${fileUpload.uploadProgress}%` }}
+                        />
+                    </div>
+                    <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Uploading... {fileUpload.uploadProgress}%
+                    </p>
+                </div>
+            )}
+
+            {/* Emoji picker portal */}
+            {showEmojiPicker &&
+                emojiData &&
+                emojiPickerPosition &&
+                typeof document !== 'undefined' &&
+                createPortal(
+                    <div
+                        ref={emojiPickerRef}
+                        className="fixed rounded-lg border bg-white dark:bg-gray-800 dark:border-gray-700 shadow-xl"
+                        style={{
+                            top: `${emojiPickerPosition.top}px`,
+                            left: `${emojiPickerPosition.left}px`,
+                            zIndex: 9999,
+                        }}
+                    >
+                        <Picker
+                            data={emojiData}
+                            onEmojiSelect={(emoji: any) => {
+                                insertAtCursor(emoji.native || emoji.shortcodes || '');
+                                setShowEmojiPicker(false);
+                            }}
+                            previewPosition="none"
+                            skinTonePosition="none"
+                            navPosition="bottom"
+                            perLine={8}
+                            searchPosition="sticky"
+                            theme="auto"
+                        />
+                    </div>,
+                    document.body
+                )}
+        </div>
+    );
+}

package/src/components/ChatWidget.tsx

@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useWebSocket } from '../hooks/useWebSocket';
+import { useMessages } from '../hooks/useMessages';
+import { useFileUpload } from '../hooks/useFileUpload';
+import { useTypingIndicator } from '../hooks/useTypingIndicator';
+import { ChatHeader } from './ChatHeader';
+import { MessageList } from './MessageList';
+import { ChatInput } from './ChatInput';
+import type { IChatConfig, IMessage } from '../types';
+
+export interface ChatWidgetProps {
+    config: IChatConfig;
+    className?: string;
+    /**
+     * Variant of the chat widget:
+     * - 'popover': Fixed positioned floating widget (default)
+     * - 'fullPage': Full page layout that fills the container
+     */
+    variant?: 'popover' | 'fullPage';
+    /**
+     * External WebSocket connection (for agents with global connection)
+     */
+    externalWebSocket?: WebSocket | null;
+}
+
+export function ChatWidget({
+    config,
+    className = '',
+    variant = 'popover',
+    externalWebSocket,
+}: ChatWidgetProps) {
+    const [isMinimized, setIsMinimized] = useState(false);
+    const [isClosed, setIsClosed] = useState(false);
+
+    const isFullPage = variant === 'fullPage';
+
+    // Initialize WebSocket connection (or use external one)
+    const websocket = useWebSocket(config, externalWebSocket);
+
+    // Initialize messages
+    const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore } = useMessages(
+        websocket,
+        config
+    );
+
+    // Initialize file upload
+    const fileUpload = useFileUpload(config.apiKey, config.fileUpload);
+
+    // Initialize typing indicator
+    const { isTyping, typingUsers } = useTypingIndicator(websocket);
+
+    // Handle sending messages
+    const handleSendMessage = useCallback(
+        (content: string) => {
+            if (!websocket.isConnected) {
+                config.toast?.error('Not connected to chat server');
+                return;
+            }
+
+            // Create optimistic message
+            const optimisticMessage: IMessage = {
+                id: `temp-${Date.now()}`,
+                conversationId: config.conversationId || '',
+                senderId: config.currentUser.email,
+                senderType: config.currentUser.type,
+                content,
+                messageType: 'text',
+                createdAt: new Date().toISOString(),
+                status: 'sent',
+            };
+
+            // Add to local state immediately (optimistic update)
+            addMessage(optimisticMessage);
+
+            // Send via WebSocket
+            websocket.sendMessage('sendMessage', {
+                conversationId: config.conversationId,
+                content,
+                messageType: 'text',
+            });
+
+            // Call callback
+            config.onMessageSent?.(optimisticMessage);
+        },
+        [websocket, config, addMessage]
+    );
+
+    // Handle typing indicator
+    const handleTyping = useCallback(
+        (isTyping: boolean) => {
+            if (!websocket.isConnected || config.enableTypingIndicator === false) {
+                return;
+            }
+
+            websocket.sendMessage('typing', {
+                conversationId: config.conversationId,
+                isTyping,
+            });
+        },
+        [websocket, config]
+    );
+
+    // Handle errors
+    useEffect(() => {
+        if (websocket.error) {
+            config.toast?.error(websocket.error.message || 'An error occurred');
+        }
+    }, [websocket.error, config]);
+
+    // For fullPage variant, ignore minimize/close state
+    if (!isFullPage) {
+        if (isClosed) {
+            return null;
+        }
+
+        // Minimized view (floating button) - only for popover
+        if (isMinimized) {
+            return (
+                <div className={`fixed bottom-4 right-4 z-50 ${className}`}>
+                    <button
+                        type="button"
+                        onClick={() => setIsMinimized(false)}
+                        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"
+                        aria-label="Open chat"
+                    >
+                        <span className="text-2xl">💬</span>
+                        {messages.some(
+                            (msg) =>
+                                msg.senderId !== config.currentUser.email && msg.status !== 'read'
+                        ) && (
+                            <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">
+                                !
+                            </span>
+                        )}
+                    </button>
+                </div>
+            );
+        }
+    }
+
+    // Container styles based on variant
+    const containerClasses = isFullPage
+        ? `flex flex-col bg-white dark:bg-gray-900 h-full ${className}`
+        : `fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`;
+
+    const containerStyle = isFullPage
+        ? undefined
+        : {
+              width: '400px',
+              height: '600px',
+              maxHeight: 'calc(100vh - 2rem)',
+          };
+
+    return (
+        <div className={containerClasses} style={containerStyle}>
+            {!isFullPage && (
+                <ChatHeader
+                    agent={
+                        config.currentUser.type === 'customer'
+                            ? {
+                                  email: 'contact@xcelsior.co',
+                                  name: 'Support Agent',
+                                  type: 'agent',
+                                  status: websocket.isConnected ? 'online' : 'offline',
+                              }
+                            : undefined
+                    }
+                    onMinimize={() => setIsMinimized(true)}
+                    onClose={() => setIsClosed(true)}
+                />
+            )}
+
+            {/* Connection Status */}
+            {!websocket.isConnected && (
+                <div className="bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800 px-4 py-2">
+                    <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
+                        <span className="text-sm text-yellow-800 dark:text-yellow-200">
+                            Reconnecting...
+                        </span>
+                        <button
+                            type="button"
+                            onClick={websocket.reconnect}
+                            className="ml-auto text-xs text-yellow-700 dark:text-yellow-300 hover:underline"
+                        >
+                            Retry
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Messages */}
+            {isLoading ? (
+                <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center">
+                        <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                            Loading messages...
+                        </p>
+                    </div>
+                </div>
+            ) : (
+                <MessageList
+                    messages={messages}
+                    currentUser={config.currentUser}
+                    isTyping={isTyping}
+                    typingUser={typingUsers[0]}
+                    autoScroll={true}
+                    onLoadMore={loadMore}
+                    hasMore={hasMore}
+                    isLoadingMore={isLoadingMore}
+                />
+            )}
+
+            {/* Input */}
+            <ChatInput
+                onSend={handleSendMessage}
+                onTyping={handleTyping}
+                config={config}
+                fileUpload={fileUpload}
+                disabled={!websocket.isConnected}
+            />
+
+            {/* Powered by footer - only for popover */}
+            {!isFullPage && (
+                <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>
+    );
+}