Chat
A composable and customizable chat interface component.
Try these prompts ✨
The Chat component provides a complete chat interface with message history, typing indicators, file attachments support, and auto-scrolling behavior.
Features
- Message history display
- Real-time typing indicators
- File attachment support
- Auto-scrolling with manual override
- Prompt suggestions for empty states
- Stop generation capability
- Fully customizable styling
Installation
Usage
Basic Usage
With Prompt Suggestions
Custom Implementation
You can also use the individual components to build your own chat interface:
Chat
A prebuilt Chat component that provides a complete chat interface with message history, typing indicators, file attachments support, and auto-scrolling behavior.
Props
Prop | Type | Description |
---|---|---|
messages | Message[] | Array of chat messages to display |
input | string | Current input value |
handleInputChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | Input change handler |
handleSubmit | (event?, options?) => void | Form submission handler |
isGenerating | boolean | Whether AI is currently generating a response |
stop | () => void | Function to stop AI generation |
append? | (message: Message) => void | Function to append a new message (required for suggestions) |
suggestions? | string[] | Array of prompt suggestions to show when chat is empty |
onRateResponse? | (messageId: string, rating: "thumbs-up" | "thumbs-down") => void | Callback to handle user rating of AI responses, if not provided the rating buttons will not be displayed |
className? | string | Additional CSS classes for ChatContainer |
ChatContainer
A container component that wraps the whole chat interface. Used to build your own chat if not using the default Chat component.
Props
Prop | Type | Description |
---|---|---|
children | ReactNode | Child components to render |
className | string | Additional CSS classes for Chat |
ChatMessages Component
Provides a message list with auto-scrolling behavior, and typing indicators. Used to build your own chat if not using the default Chat component.
Props
Prop | Type | Description |
---|---|---|
messages | Message[] | Array of messages to display |
isTyping | boolean | Whether to show typing indicator |
ChatForm Component
A form component that wraps the message input and submit button, handles the state management for file uploads internally and uses a render function to pass them down to your input component. Used to build your own chat if not using the default Chat component.
Props
Prop | Type | Description |
---|---|---|
isPending | boolean | Whether form submission is pending |
handleSubmit | (event?, options?) => void | Form submission handler |
className? | string | Additional CSS classes |
children | (props: { files: File[] | null, setFiles: Function }) => ReactElement | Render function for form content |
Theming
The Chat component is using theme colors and fully themable with CSS variables.