ChatBox

A complete chat interface component with real-time messaging, file sharing, voice notes, and WebSocket support.

useChat Hook

The ChatBox component works with the useChat hook for state management:

Props

The ChatBox component accepts the following props:

• chat - ChatState object from useChat hook (required)
• currentUserId - Current user's ID to identify own messages (required)
• userName - Display name of the chat recipient (required)
• variant - Visual style: solid or soft (default: solid)
• userAvatar - Avatar image URL for the recipient
• userStatus - Status text to display (default: "Online")
• headerActions - Snippet for custom header action buttons
• onVoiceNote - Callback for voice note recording (blob, url) => void
• onFileAttach - Callback for file attachment (file) => void
• onCameraCapture - Callback for camera capture button click
• class - Custom CSS classes

Message Types

The ChatBox supports multiple message types:

• text - Standard text messages (default)
• image - Image attachments with preview
• voice - Voice notes with audio player
• file - Generic file attachments

Message Interface

ChatState Methods

The chat state object provides these methods:

• sendMessage(content, type?, metadata?) - Send a new message
• loadMore() - Load older messages (pagination)
• markAsRead(messageId) - Mark a message as read
• connect() - Manually connect WebSocket
• disconnect() - Disconnect WebSocket

Custom Header Actions Example

Features

• Real-time messaging via WebSocket with automatic reconnection
• REST API fallback when WebSocket is unavailable
• Message status indicators (sending, sent, delivered, read, error)
• Voice note recording with audio player
• File and image attachment support
• Infinite scroll with "Load more" pagination
• Automatic scrolling to latest messages
• Message timestamps in local time format
• Visual distinction between own and received messages
• Customizable header actions via snippets
• Support for custom message transformers
• Token-based authentication support

API Requirements

Your backend API should implement these endpoints:

REST API

• GET /chats/:chatId/messages?limit=50&before=messageId - Fetch messages
• POST /chats/:chatId/messages - Send a new message

WebSocket

WebSocket URL format: ws://host/path?token=xxx&chatId=xxx&userId=xxx

Message types to handle:

• type: "message" - New message received
• type: "status" - Message status update
• type: "typing" - User typing indicator
• type: "read" - Mark message as read