Chat Interface
A complete chat interface with message list, auto-scroll, and textarea input. Handles Enter/Shift+Enter for sending messages.
Interactive Example
Try sending a message in the chat below:
AI
Hello! How can I help you today?
10m ago
Empty State
When no messages exist, the chat shows an empty state with customizable text:
Start a Conversation
Send a message to begin chatting with the AI assistant.
Props
| Name | Type | Default | Description |
|---|---|---|---|
messages* | Message[] | - | Array of messages to display in the chat |
onSendMessage* | (content: string) => void | Promise<void> | - | Callback fired when user sends a message |
placeholder | string | 'Type your message...' | Placeholder text for the message input |
isLoading | boolean | false | Show loading indicator and disable input |
maxHeight | string | '600px' | Maximum height of the message list area |
emptyStateTitle | string | 'No messages yet' | Title shown when message list is empty |
emptyStateMessage | string | 'Start a conversation...' | Message shown when message list is empty |
className | string | - | Additional CSS classes to apply |
Usage Guidelines
When to use
- •For conversational AI interfaces
- •Customer support chat systems
- •Any real-time messaging interface
Best practices
- •Set isLoading={true} while waiting for AI responses
- •Handle async onSendMessage callbacks properly
- •Provide meaningful empty state messages
- •Adjust maxHeight based on available screen space
Keyboard shortcuts
- •Enter: Send message
- •Shift + Enter: New line in message
Accessibility
- •Textarea has descriptive aria-label
- •Send button is properly labeled for screen readers
- •Loading state provides visual feedback
- •Auto-scrolls to latest message for better UX
Do's and Don'ts
Do
- •Show loading state while fetching AI responses
- •Handle errors gracefully in onSendMessage
- •Provide helpful empty state messages
- •Clear input after successful message send
Don't
- •Don't allow sending empty messages
- •Don't forget to disable input during loading
- •Don't ignore async errors in onSendMessage
- •Don't use overly aggressive maxHeight (consider mobile)
Related Components
Message Bubble
Individual chat message component
Text Area
Multi-line text input component
Spinner
Loading indicator component