@enfin/chat 1.2.0

package/dist/esm/components/Chat.js

@@ -0,0 +1,452 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useChatContext } from '../context/ChatContext';
+import { useCall } from '../hooks/useCall';
+/**
+ * Default Chat Component
+ *
+ * Two-pane layout:
+ * - Top: app header with current user (avatar, name, switch button)
+ * - Left: list of registered users (click to select a peer)
+ * - Right: messages + input area for the selected peer
+ */
+export function Chat({ theme = 'light' }) {
+    const { userId, userName, messages, rooms, users, currentRoom, sendMessage, selectRoom, createRoom, typingUsers, connected, loading, error, refreshUsers, callState, callError, remoteStream, busyBanner, clearBusyBanner, socket, } = useChatContext();
+    const { activeCall, startCall, endCall, acceptCall, isMuted, mute, unmute } = useCall();
+    const [inputValue, setInputValue] = useState('');
+    const [selectedUserId, setSelectedUserId] = useState(null);
+    const messagesEndRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const emojiPickerRef = useRef(null);
+    const emojiButtonRef = useRef(null);
+    const inputRef = useRef(null);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    // Typing detection with debounced emit
+    const emitTypingTimerRef = useRef(null);
+    const stopTypingTimerRef = useRef(null);
+    const emitTyping = useCallback((typing) => {
+        if (!socket?.connected || !currentRoom)
+            return;
+        socket
+            .emitWithAck('message:typing', {
+            userId,
+            roomId: currentRoom._id,
+            typing,
+        })
+            .catch(() => { });
+    }, [socket, currentRoom, userId]);
+    const debouncedEmitTyping = useCallback((typing) => {
+        if (emitTypingTimerRef.current) {
+            clearTimeout(emitTypingTimerRef.current);
+        }
+        emitTypingTimerRef.current = setTimeout(() => emitTyping(typing), 300);
+    }, [emitTyping]);
+    const emitStopTypingAfterDelay = useCallback(() => {
+        if (stopTypingTimerRef.current) {
+            clearTimeout(stopTypingTimerRef.current);
+        }
+        stopTypingTimerRef.current = setTimeout(() => {
+            emitTyping(false);
+        }, 2000);
+    }, [emitTyping]);
+    // Cleanup timers on unmount
+    useEffect(() => {
+        return () => {
+            if (emitTypingTimerRef.current) {
+                clearTimeout(emitTypingTimerRef.current);
+            }
+            if (stopTypingTimerRef.current) {
+                clearTimeout(stopTypingTimerRef.current);
+            }
+        };
+    }, []);
+    // Stop typing when switching rooms
+    useEffect(() => {
+        emitTyping(false);
+        if (stopTypingTimerRef.current) {
+            clearTimeout(stopTypingTimerRef.current);
+        }
+    }, [currentRoom?._id, emitTyping]);
+    // Filter out the current user from the users list
+    const otherUsers = useMemo(() => users.filter(u => u.userId !== userId), [users, userId]);
+    // Track which peer the currentRoom represents
+    useEffect(() => {
+        if (!currentRoom) {
+            setSelectedUserId(null);
+            return;
+        }
+        const other = currentRoom.members.find(m => m !== userId);
+        if (other)
+            setSelectedUserId(other);
+    }, [currentRoom, userId]);
+    // Scroll to bottom on new messages
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    // Cleanup object URL when file changes or component unmounts
+    useEffect(() => {
+        return () => {
+            if (selectedFile?.previewUrl) {
+                URL.revokeObjectURL(selectedFile.previewUrl);
+            }
+        };
+    }, [selectedFile]);
+    // Close emoji picker on click outside
+    useEffect(() => {
+        if (!showEmojiPicker)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            // Don't close if clicking inside emoji picker or on the emoji button
+            if (emojiPickerRef.current?.contains(target))
+                return;
+            if (emojiButtonRef.current?.contains(target))
+                return;
+            setShowEmojiPicker(false);
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [showEmojiPicker]);
+    // Auto-dismiss the busy banner after 4 seconds
+    useEffect(() => {
+        if (!busyBanner)
+            return;
+        const t = setTimeout(() => clearBusyBanner(), 4000);
+        return () => clearTimeout(t);
+    }, [busyBanner, clearBusyBanner]);
+    const handleSelectUser = useCallback(async (peerId) => {
+        if (!peerId || peerId === userId)
+            return;
+        setSelectedUserId(peerId);
+        // Find existing direct room between current user and peer
+        const existing = rooms.find(r => r.type === 'direct' && r.members.length === 2 && r.members.includes(peerId) && r.members.includes(userId));
+        if (existing) {
+            selectRoom(existing._id);
+            return;
+        }
+        // Otherwise create the direct room
+        const room = await createRoom('direct', 'direct', [userId, peerId]);
+        if (room?._id) {
+            selectRoom(room._id);
+        }
+    }, [userId, createRoom, selectRoom, rooms]);
+    const handleSend = async (e) => {
+        if (e)
+            e.preventDefault();
+        if (!currentRoom)
+            return;
+        // If a file is selected, upload and send as file message
+        if (selectedFile) {
+            await handleFileSend();
+            return;
+        }
+        if (!inputValue.trim())
+            return;
+        const content = inputValue.trim();
+        setInputValue('');
+        emitTyping(false);
+        if (emitTypingTimerRef.current) {
+            clearTimeout(emitTypingTimerRef.current);
+        }
+        if (stopTypingTimerRef.current) {
+            clearTimeout(stopTypingTimerRef.current);
+        }
+        await sendMessage(currentRoom._id, content);
+    };
+    const handleFileSend = async () => {
+        if (!selectedFile || !currentRoom)
+            return;
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('file', selectedFile.file);
+            formData.append('roomId', currentRoom._id);
+            const serverUrl = import.meta.env?.VITE_SERVER_URL || 'http://localhost:3002';
+            const apiKey = import.meta.env?.VITE_CHAT_API_KEY || 'chat_dev_key';
+            const response = await fetch(`${serverUrl}/api/upload`, {
+                method: 'POST',
+                headers: {
+                    'x-api-key': apiKey,
+                },
+                body: formData,
+            });
+            if (!response.ok) {
+                throw new Error(`File upload failed: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('[CLIENT] File upload response:', data);
+            // Use the typed text as the message content (caption) if any,
+            // otherwise fall back to the filename so something is always sent.
+            const caption = inputValue.trim() || selectedFile.file.name;
+            // Send the message with file metadata + caption
+            await sendMessage(currentRoom._id, caption, {
+                fileUrl: data.fileUrl,
+                fileType: data.fileType || selectedFile.file.type,
+                fileName: data.fileName || selectedFile.file.name,
+            });
+            // Clear selected file and the typed text
+            setInputValue('');
+            emitTyping(false);
+            if (emitTypingTimerRef.current) {
+                clearTimeout(emitTypingTimerRef.current);
+            }
+            if (stopTypingTimerRef.current) {
+                clearTimeout(stopTypingTimerRef.current);
+            }
+            clearSelectedFile();
+        }
+        catch (err) {
+            console.error('[CLIENT] File upload error:', err);
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleFileSelect = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        // Revoke any previous preview URL
+        if (selectedFile?.previewUrl) {
+            URL.revokeObjectURL(selectedFile.previewUrl);
+        }
+        const previewUrl = URL.createObjectURL(file);
+        setSelectedFile({ file, previewUrl });
+        // Reset the input value so the same file can be re-selected
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    const clearSelectedFile = () => {
+        if (selectedFile?.previewUrl) {
+            URL.revokeObjectURL(selectedFile.previewUrl);
+        }
+        setSelectedFile(null);
+    };
+    const handleEmojiSelect = (emoji) => {
+        const el = inputRef.current;
+        if (!el) {
+            setInputValue(prev => prev + emoji);
+            return;
+        }
+        const start = el.selectionStart ?? inputValue.length;
+        const end = el.selectionEnd ?? inputValue.length;
+        const next = inputValue.slice(0, start) + emoji + inputValue.slice(end);
+        setInputValue(next);
+        // Restore caret right after the inserted emoji
+        requestAnimationFrame(() => {
+            el.focus();
+            const pos = start + emoji.length;
+            el.setSelectionRange(pos, pos);
+        });
+    };
+    const handleStartCall = () => {
+        if (currentRoom && selectedUserId) {
+            startCall(currentRoom._id, selectedUserId);
+        }
+    };
+    const handleSwitchUser = () => {
+        localStorage.removeItem('userId');
+        localStorage.removeItem('userName');
+        window.location.reload();
+    };
+    const emojis = ['😀', '😂', '😍', '👍', '👎', '❤️', '🔥', '💯', '🎉', '😎', '😢', '😡', '🤔', '🙄', '🤷', '👏'];
+    // Find the selected peer info for the chat header
+    const selectedPeer = otherUsers.find(u => u.userId === selectedUserId);
+    // Check if the selected peer is typing
+    const isPeerTyping = currentRoom
+        ? typingUsers.filter(t => t.typingIn?.includes(currentRoom._id) && t.userId !== userId).length > 0
+        : false;
+    // Check if selected peer is online
+    const isPeerOnline = selectedPeer ? selectedPeer.isOnline === true : false;
+    if (loading) {
+        return (_jsx("div", { className: `chat-container theme-${theme}`, children: _jsxs("div", { className: "chat-loading", children: [_jsx("div", { className: "spinner" }), _jsx("p", { children: "Connecting..." })] }) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `chat-container theme-${theme}`, children: _jsxs("div", { className: "chat-error", children: [_jsxs("p", { children: ["Connection error: ", error] }), _jsx("button", { onClick: () => window.location.reload(), children: "Retry" })] }) }));
+    }
+    return (_jsxs("div", { className: `chat-container theme-${theme}`, children: [_jsxs("header", { className: "app-topbar", children: [_jsx("div", { className: "app-brand", children: "Chat App" }), _jsxs("div", { className: "app-user", children: [_jsx("div", { className: "app-user-avatar", children: (userName[0] || 'U').toUpperCase() }), _jsx("div", { className: "app-user-name", children: userName }), _jsx("button", { className: "app-switch-btn", onClick: handleSwitchUser, title: "Switch user", "aria-label": "Switch user", children: "\u21C4" })] })] }), _jsxs("div", { className: "chat-body", children: [_jsxs("aside", { className: "chat-sidebar", children: [_jsxs("div", { className: "chat-sidebar-header", children: [_jsx("span", { children: "Users" }), _jsx("button", { className: "refresh-users-btn", onClick: refreshUsers, title: "Refresh users", "aria-label": "Refresh users", children: "\u27F3" })] }), _jsx("div", { className: "user-list", children: otherUsers.length === 0 ? (_jsx("div", { className: "no-users", children: "No other users yet" })) : (otherUsers.map((u) => (_jsx(UserListItem, { user: u, isActive: selectedUserId === u.userId, onClick: () => handleSelectUser(u.userId) }, u.userId)))) })] }), _jsx("main", { className: "chat-main", children: currentRoom && selectedPeer ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "chat-room-header", children: [_jsxs("div", { className: "chat-room-avatar-wrapper", children: [_jsx("div", { className: "chat-room-avatar", children: (selectedPeer.name[0] || '?').toUpperCase() }), isPeerOnline && _jsx("span", { className: "online-indicator", title: "Online" })] }), _jsxs("div", { className: "chat-room-info", children: [_jsx("div", { className: "chat-room-name", children: selectedPeer.name }), _jsx("div", { className: "chat-room-status", children: isPeerTyping
+                                                        ? 'typing...'
+                                                        : isPeerOnline
+                                                            ? 'online'
+                                                            : 'offline' })] }), activeCall && activeCall.roomId === currentRoom._id && activeCall.status === 'active' ? (_jsx("button", { className: "call-button call-button-active", onClick: endCall, title: "End call", "aria-label": "End call", children: _jsx("span", { className: "call-icon", children: "\uD83D\uDCF5" }) })) : activeCall && activeCall.roomId === currentRoom._id && activeCall.status === 'ringing' && activeCall.initiatorId === userId ? (_jsx("button", { className: "call-button call-button-calling", onClick: endCall, title: "Cancel call", "aria-label": "Cancel call", disabled: true, children: _jsx("span", { className: "call-icon", children: "\uD83D\uDCDE" }) })) : (_jsx("button", { className: "call-button", onClick: handleStartCall, disabled: !connected || !!activeCall, title: "Start call", "aria-label": "Start call", children: _jsx("span", { className: "call-icon", children: "\uD83D\uDCDE" }) }))] }), _jsxs("div", { className: "message-area", children: [_jsxs("div", { className: "messages", children: [messages
+                                                    .filter(m => m.roomId === currentRoom._id)
+                                                    .map((msg) => (_jsx(MessageBubble, { message: msg }, msg._id))), _jsx("div", { ref: messagesEndRef })] }), typingUsers.filter(t => t.typingIn?.includes(currentRoom._id) && t.userId !== userId).length > 0 && (_jsxs("div", { className: "typing-indicator", children: [_jsx("span", { className: "typing-dot" }), _jsx("span", { className: "typing-dot" }), _jsx("span", { className: "typing-dot" })] }))] }), _jsxs("div", { className: "message-input-container", children: [showEmojiPicker && (_jsx("div", { className: "emoji-picker", ref: emojiPickerRef, onMouseDown: (e) => e.preventDefault(), onClick: (e) => e.stopPropagation(), children: emojis.map((emoji, index) => (_jsx("button", { type: "button", className: "emoji-option", onClick: () => handleEmojiSelect(emoji), children: emoji }, index))) })), selectedFile && (_jsxs("div", { className: "file-preview", children: [selectedFile.file.type.startsWith('image/') ? (_jsx("img", { src: selectedFile.previewUrl, alt: selectedFile.file.name, className: "file-preview-image" })) : (_jsxs("div", { className: "file-preview-doc", children: [_jsx("span", { className: "file-preview-icon", children: "\uD83D\uDCC4" }), _jsx("span", { className: "file-preview-name", children: selectedFile.file.name })] })), _jsx("button", { type: "button", className: "file-preview-remove", onClick: clearSelectedFile, title: "Remove file", children: "\u2715" })] })), _jsxs("form", { onSubmit: handleSend, className: "message-input-form", children: [_jsx("button", { type: "button", ref: emojiButtonRef, className: "input-button", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        setShowEmojiPicker((prev) => !prev);
+                                                    }, title: "Emoji", children: "\uD83D\uDE0A" }), _jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => {
+                                                        setInputValue(e.target.value);
+                                                        if (e.target.value.length > 0) {
+                                                            debouncedEmitTyping(true);
+                                                            emitStopTypingAfterDelay();
+                                                        }
+                                                        else {
+                                                            if (stopTypingTimerRef.current) {
+                                                                clearTimeout(stopTypingTimerRef.current);
+                                                            }
+                                                            if (emitTypingTimerRef.current) {
+                                                                clearTimeout(emitTypingTimerRef.current);
+                                                            }
+                                                            emitTyping(false);
+                                                        }
+                                                    }, placeholder: selectedFile ? 'Add a caption (optional)...' : 'type here', disabled: !connected, className: "message-input-field" }), _jsx("button", { type: "button", className: "input-button", onClick: () => fileInputRef.current?.click(), title: "Attach file", disabled: uploading, children: "\uD83D\uDCCE" }), _jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileSelect, style: { display: 'none' }, accept: "image/*,video/*,application/pdf,.doc,.docx,.txt" }), _jsx("button", { type: "submit", disabled: !connected ||
+                                                        uploading ||
+                                                        (!inputValue.trim() && !selectedFile), title: "Send", children: uploading ? '⏳' : '➤' })] })] })] })) : (_jsx("div", { className: "no-room-selected", children: _jsx("p", { children: "Select a user to start chatting" }) })) })] }), activeCall && activeCall.status === 'ringing' && activeCall.initiatorId !== userId && (_jsx(IncomingCallPopup, { call: activeCall, onAccept: acceptCall, onReject: endCall })), activeCall && activeCall.status === 'active' && (currentRoom && activeCall.roomId === currentRoom._id ? (_jsx(FullCallView, { call: activeCall, currentUserId: userId, isMuted: isMuted, onMute: mute, onUnmute: unmute, onEnd: endCall, callState: callState, callError: callError, remoteStream: remoteStream, peerName: selectedPeer?.name || 'Unknown', peerInitial: (selectedPeer?.name?.[0] || '?').toUpperCase(), isPeerOnline: isPeerOnline })) : (_jsx(ActiveCallModal, { call: activeCall, currentUserId: userId, isMuted: isMuted, onMute: mute, onUnmute: unmute, onEnd: endCall, callState: callState, callError: callError, remoteStream: remoteStream }))), busyBanner && (_jsxs("div", { className: "busy-banner", role: "alert", children: [_jsx("span", { className: "busy-banner-icon", children: "\u26A0\uFE0F" }), _jsx("span", { className: "busy-banner-text", children: busyBanner }), _jsx("button", { className: "busy-banner-close", onClick: clearBusyBanner, "aria-label": "Dismiss", children: "\u2715" })] }))] }));
+}
+/**
+ * User Item in sidebar — click to open a chat with this user
+ */
+function UserListItem({ user, isActive, onClick, }) {
+    const isOnline = user.isOnline === true;
+    return (_jsxs("div", { className: `user-item ${isActive ? 'active' : ''}`, onClick: onClick, children: [_jsxs("div", { className: "user-avatar-wrapper", children: [_jsx("div", { className: "user-avatar", children: user.avatar ? (_jsx("img", { src: user.avatar, alt: user.name })) : (_jsx("span", { children: (user.name[0] || '?').toUpperCase() })) }), isOnline && _jsx("span", { className: "online-indicator online-indicator-sm", title: "Online" })] }), _jsxs("div", { className: "user-info", children: [_jsx("div", { className: "user-name", children: user.name }), _jsx("div", { className: "user-status", children: isOnline ? _jsx("span", { className: "status-online", children: "Online" }) : _jsx("span", { className: "status-offline", children: "Offline" }) })] })] }));
+}
+/**
+ * Message bubble component
+ */
+function MessageBubble({ message }) {
+    const myId = localStorage.getItem('userId') || '';
+    const isSent = message.senderId === myId;
+    // Build a full URL for the file when needed
+    const serverUrl = import.meta.env?.VITE_SERVER_URL || 'http://localhost:3002';
+    const fullFileUrl = message.fileUrl
+        ? message.fileUrl.startsWith('http')
+            ? message.fileUrl
+            : `${serverUrl}${message.fileUrl}`
+        : undefined;
+    const isImage = message.fileType?.startsWith('image/') ||
+        (message.fileUrl && /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(message.fileUrl));
+    return (_jsx("div", { className: `message ${isSent ? 'sent' : 'received'}`, children: _jsxs("div", { className: "message-content", children: [!isSent && _jsx("div", { className: "message-sender", children: message.senderName }), _jsxs("div", { className: "message-body", children: [fullFileUrl && (isImage ? (_jsx("a", { href: fullFileUrl, target: "_blank", rel: "noopener noreferrer", className: "image-message", children: _jsx("img", { src: fullFileUrl, alt: message.fileName || 'Image', className: "message-image" }) })) : (_jsx("div", { className: "file-message", children: _jsxs("a", { href: fullFileUrl, target: "_blank", rel: "noopener noreferrer", className: "file-link", children: [_jsx("span", { className: "file-icon", children: "\uD83D\uDCCE" }), message.fileName || 'Attachment'] }) }))), message.content && message.content !== message.fileName && (_jsx("div", { className: "message-text", children: message.content }))] }), _jsx("div", { className: "message-time", children: formatTime(message.createdAt) })] }) }));
+}
+/**
+ * Incoming-call popup — appears at the top of the screen for the callee.
+ * Shown globally so it works even when the user is not viewing the chat
+ * with the caller.
+ */
+function IncomingCallPopup({ call, onAccept, onReject, }) {
+    return (_jsx("div", { className: "incoming-call-popup", role: "dialog", "aria-label": "Incoming call", children: _jsxs("div", { className: "incoming-call-card", children: [_jsx("div", { className: "incoming-call-icon", children: "\uD83D\uDCDE" }), _jsxs("div", { className: "incoming-call-text", children: [_jsx("div", { className: "incoming-call-title", children: "Incoming Call" }), _jsx("div", { className: "incoming-call-subtitle", children: "Tap accept to join the call" })] }), _jsxs("div", { className: "incoming-call-actions", children: [_jsx("button", { onClick: onReject, className: "btn-reject", "aria-label": "Reject", children: "End" }), _jsx("button", { onClick: onAccept, className: "btn-accept", "aria-label": "Accept", children: "Accept" })] })] }) }));
+}
+/**
+ * Active-call modal — appears as a small floating card during the call.
+ * Includes the audio element that plays the remote stream.
+ */
+function ActiveCallModal({ call, currentUserId, isMuted, onMute, onUnmute, onEnd, callState, callError, remoteStream, }) {
+    const isInitiator = call.initiatorId === currentUserId;
+    const audioElRef = React.useRef(null);
+    const playAttemptsRef = React.useRef(0);
+    React.useEffect(() => {
+        const el = audioElRef.current;
+        if (!el)
+            return;
+        if (remoteStream && el.srcObject !== remoteStream) {
+            el.srcObject = remoteStream;
+            el.muted = false;
+            el.volume = 1.0;
+            const tryPlay = () => {
+                el.play().catch((err) => {
+                    console.warn('[CLIENT] Audio autoplay blocked, will retry on user gesture:', err?.message);
+                    playAttemptsRef.current += 1;
+                    if (playAttemptsRef.current < 10) {
+                        const retry = () => {
+                            el.play().then(() => {
+                                document.removeEventListener('click', retry);
+                                document.removeEventListener('keydown', retry);
+                                document.removeEventListener('touchstart', retry);
+                            }).catch(() => { });
+                        };
+                        document.addEventListener('click', retry, { once: true });
+                        document.addEventListener('keydown', retry, { once: true });
+                        document.addEventListener('touchstart', retry, { once: true });
+                    }
+                });
+            };
+            tryPlay();
+        }
+        else if (!remoteStream) {
+            el.srcObject = null;
+        }
+    }, [remoteStream]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "active-call-modal", role: "status", "aria-label": "In call", children: _jsxs("div", { className: "active-call-card", children: [_jsxs("div", { className: "active-call-info", children: [_jsx("div", { className: "active-call-icon", children: "\uD83D\uDCDE" }), _jsxs("div", { className: "active-call-text", children: [_jsx("div", { className: "active-call-title", children: callState === 'connected' ? 'In Call' : 'Connecting…' }), callError && _jsxs("div", { className: "active-call-error", children: ["\u26A0\uFE0F ", callError] })] })] }), _jsxs("div", { className: "active-call-actions", children: [_jsx("button", { onClick: isMuted ? onUnmute : onMute, className: isMuted ? 'btn-muted' : 'btn-mute', "aria-label": isMuted ? 'Unmute' : 'Mute', children: isMuted ? '🔇 Unmute' : '🔊 Mute' }), _jsx("button", { onClick: onEnd, className: "btn-end", "aria-label": "End call", children: "End" })] })] }) }), _jsx("audio", { ref: audioElRef, autoPlay: true, playsInline: true, style: { display: 'none' } })] }));
+}
+/**
+ * In-call banner — shown inside the active chat header (replaces the call
+ * button) so the user has clear feedback that they are in a call.
+ */
+function InCallBanner({ call, isMuted, onMute, onUnmute, onEnd, }) {
+    return (_jsxs("div", { className: "in-call-banner", children: [_jsxs("div", { className: "in-call-banner-status", children: [_jsx("span", { className: "in-call-banner-dot" }), _jsx("span", { children: "In Call" })] }), _jsxs("div", { className: "in-call-banner-actions", children: [_jsx("button", { onClick: isMuted ? onUnmute : onMute, className: isMuted ? 'btn-muted' : 'btn-mute', "aria-label": isMuted ? 'Unmute' : 'Mute', children: isMuted ? '🔇' : '🔊' }), _jsx("button", { onClick: onEnd, className: "btn-end", "aria-label": "End call", children: "End" })] })] }));
+}
+/**
+ * Full call view — WhatsApp-style: takes over the entire message area with a
+ * large centered avatar, call duration, and bottom action buttons.
+ * Rendered when the active call is in the currently-viewed room.
+ */
+function FullCallView({ call, currentUserId, isMuted, onMute, onUnmute, onEnd, callState, callError, remoteStream, peerName, peerInitial, isPeerOnline, }) {
+    const audioElRef = React.useRef(null);
+    const playAttemptsRef = React.useRef(0);
+    const startedAt = call.startedAt ? new Date(call.startedAt).getTime() : Date.now();
+    const [duration, setDuration] = useState('00:00');
+    const [speakerOn, setSpeakerOn] = useState(false);
+    React.useEffect(() => {
+        const tick = () => {
+            const secs = Math.floor((Date.now() - startedAt) / 1000);
+            const m = String(Math.floor(secs / 60)).padStart(2, '0');
+            const s = String(secs % 60).padStart(2, '0');
+            setDuration(`${m}:${s}`);
+        };
+        tick();
+        const t = setInterval(tick, 1000);
+        return () => clearInterval(t);
+    }, [startedAt]);
+    React.useEffect(() => {
+        const el = audioElRef.current;
+        if (!el)
+            return;
+        if (remoteStream && el.srcObject !== remoteStream) {
+            el.srcObject = remoteStream;
+            el.muted = false;
+            el.volume = 1.0;
+            const tryPlay = () => {
+                el.play().catch((err) => {
+                    console.warn('[CLIENT] Audio autoplay blocked, will retry on user gesture:', err?.message);
+                    playAttemptsRef.current += 1;
+                    if (playAttemptsRef.current < 10) {
+                        const retry = () => {
+                            el.play().then(() => {
+                                document.removeEventListener('click', retry);
+                                document.removeEventListener('keydown', retry);
+                                document.removeEventListener('touchstart', retry);
+                            }).catch(() => { });
+                        };
+                        document.addEventListener('click', retry, { once: true });
+                        document.addEventListener('keydown', retry, { once: true });
+                        document.addEventListener('touchstart', retry, { once: true });
+                    }
+                });
+            };
+            tryPlay();
+        }
+        else if (!remoteStream) {
+            el.srcObject = null;
+        }
+    }, [remoteStream]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "full-call-view", role: "status", "aria-label": "In call", children: [_jsxs("div", { className: "full-call-stage", children: [_jsxs("div", { className: "full-call-avatar", children: [_jsx("span", { children: peerInitial }), isPeerOnline && _jsx("span", { className: "full-call-online-dot", title: "Online" })] }), _jsx("div", { className: "full-call-name", children: peerName }), _jsx("div", { className: "full-call-timer", children: callState === 'connected' ? duration : 'Connecting…' }), callError && _jsxs("div", { className: "full-call-error", children: ["\u26A0\uFE0F ", callError] })] }), _jsxs("div", { className: "full-call-controls", children: [_jsxs("button", { onClick: isMuted ? onUnmute : onMute, className: `full-call-btn ${isMuted ? 'full-call-btn-active' : ''}`, "aria-label": isMuted ? 'Unmute' : 'Mute', title: isMuted ? 'Unmute' : 'Mute', children: [_jsx("span", { className: "full-call-btn-icon", children: isMuted ? '🔇' : '🔊' }), _jsx("span", { className: "full-call-btn-label", children: isMuted ? 'Unmute' : 'Speaker' })] }), _jsxs("button", { onClick: () => setSpeakerOn((v) => !v), className: `full-call-btn ${speakerOn ? 'full-call-btn-active' : ''}`, "aria-label": "Toggle speaker", title: "Toggle speaker", children: [_jsx("span", { className: "full-call-btn-icon", children: "\uD83D\uDCE2" }), _jsx("span", { className: "full-call-btn-label", children: "Audio" })] }), _jsxs("button", { onClick: onEnd, className: "full-call-btn full-call-btn-end", "aria-label": "End call", title: "End call", children: [_jsx("span", { className: "full-call-btn-icon", children: "\uD83D\uDCF5" }), _jsx("span", { className: "full-call-btn-label", children: "End" })] })] })] }), _jsx("audio", { ref: audioElRef, autoPlay: true, playsInline: true, style: { display: 'none' } })] }));
+}
+/**
+ * Format timestamp to relative time
+ */
+function formatTime(date) {
+    const d = new Date(date);
+    const now = new Date();
+    const diff = now.getTime() - d.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    if (minutes < 1)
+        return 'now';
+    if (minutes < 60)
+        return `${minutes}m`;
+    if (hours < 24)
+        return `${hours}h`;
+    return d.toLocaleDateString();
+}
+export default Chat;

package/dist/esm/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Chat } from './Chat';
+export type { ChatProps } from './Chat';
+export { default } from './Chat';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export { Chat } from './Chat';
+export { default } from './Chat';

package/dist/esm/context/ChatContext.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactNode } from 'react';
+import { Message, Room, PresenceStatus, AudioCall, ChatConfig } from '@enfin/chat-shared';
+import { WebRTCManagerState } from '../call/WebRTCManager';
+export interface ChatUser {
+    userId: string;
+    name: string;
+    avatar?: string;
+    isOnline?: boolean;
+    status?: 'online' | 'offline' | 'away';
+    lastSeen?: Date | string;
+}
+interface ChatContextValue {
+    userId: string;
+    userName: string;
+    messages: Message[];
+    rooms: Room[];
+    users: ChatUser[];
+    currentRoom?: Room;
+    activeCall?: AudioCall;
+    typingUsers: PresenceStatus[];
+    connected: boolean;
+    loading: boolean;
+    error?: string;
+    sendMessage: (roomId: string, content: string, fileMetadata?: {
+        fileUrl?: string;
+        fileType?: string;
+        fileName?: string;
+    }) => Promise<void>;
+    selectRoom: (roomId: string) => void;
+    createRoom: (name: string, type: 'direct' | 'group', members: string[]) => Promise<Room>;
+    startCall: (roomId: string, participantId: string) => Promise<void>;
+    endCall: () => Promise<void>;
+    acceptCall: () => Promise<void>;
+    rejectCall: () => Promise<void>;
+    mute: () => void;
+    unmute: () => void;
+    isMuted: boolean;
+    socket?: any;
+    refreshUsers: () => Promise<void>;
+    callState: WebRTCManagerState;
+    callError?: string;
+    remoteStream: MediaStream | null;
+    busyBanner?: string;
+    clearBusyBanner: () => void;
+    emitTyping: (roomId: string, typing: boolean) => void;
+    debouncedEmitTyping: (roomId: string, typing: boolean) => void;
+    stopTypingSoon: (roomId: string) => void;
+    loadRoomMessages: (roomId: string) => Promise<void>;
+}
+export interface ChatProviderProps {
+    config: ChatConfig;
+    userId: string;
+    userName: string;
+    serverUrl: string;
+    children: ReactNode;
+}
+export declare function ChatProvider({ config, userId, userName, serverUrl, children }: ChatProviderProps): React.JSX.Element;
+export declare function useChatContext(): ChatContextValue;
+export {};