Chat & Conversation
Pattern for AI assistant and human conversation interfaces.
Message types
What's the weather like in Tokyo right now?
06:50 PM
Connected to weather service.
Streaming
Show a blinking cursor while text streams in.
With input
Help me debug this React component.
I'd be happy to help! Can you share the code?
Sure, here's the stack trace...
ChatMessage props
| Prop | Type | Default | Description |
|---|---|---|---|
role | "user" | "assistant" | "system" | — | Who sent the message. |
content | ReactNode | — | Message text or React elements. Strings can stream with the StreamingText component. |
streaming | boolean | false | If true, renders the content with a typewriter cursor. |
timestamp | Date | — | Optional timestamp displayed below the bubble. |
avatar | ReactNode | — | Custom avatar/icon; defaults to system/user glyph. |
actions | ReactNode | — | Action buttons shown on hover (copy, edit, delete). |
ConversationContainer props
| Prop | Type | Default | Description |
|---|---|---|---|
messages | Message[] | — | Array of { id, role, content, timestamp, streaming }. |
onScrollBottom | () => void | — | Fires when user scrolls to bottom. |
showScrollButton | boolean | true | Shows floating button. |
inputComponent | ReactNode | — | Optional fixed input pinned to bottom. |
autoScroll | boolean | true | Scrolls to newest message automatically. |
Usage guidelines
- →User messages align right with accent; assistant aligns left.
- →System messages are centered, italicized, and lower opacity.
- →Show copy action on all assistant messages.