Conversation
Markdown for agentsA container for displaying a list of chat messages with auto-scroll and loading states.
npx slipstream-ui@latest add conversationPlayground
U
You
Hello, can you help me with React?
A
Assistant
Of course! I'd be happy to help you with React. What specific aspect would you like to learn about?
U
You
How do I manage state in React applications?
With loading state
U
You
Hello, can you help me with React?
A
Assistant
Of course! I'd be happy to help you with React. What specific aspect would you like to learn about?
U
You
How do I manage state in React applications?
A
Assistant
Thinking...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | Message[] | required | Array of message objects to display |
| isLoading | boolean | false | Whether assistant is generating a response |
| showAvatars | boolean | true | Whether to show avatars for messages |
| loadingMessage | string | 'Thinking...' | Text to display while loading |
| renderContent | (content: string) => ReactNode | undefined | Custom renderer applied to every message (e.g. markdown) |
| streamingMessageId | string | undefined | ID of the message still generating; shows its cursor and auto-scrolls |
Accessibility
- Auto-scroll behavior is smooth and doesn't interrupt users
- Loading state is visually indicated
- Consider adding aria-live regions for streaming responses
- Ensure users can navigate through messages with keyboard if needed