Chat Message
A single message in a conversation, supporting user, assistant, and system roles with streaming-aware rendering.
ChatMessage is the core building block of any conversational interface. It handles layout, avatar placement, role-based styling, optional timestamps, and a streaming cursor state. All three roles — user, assistant, and system — are supported out of the box.
U
Can you summarize this document for me?
AI
Sure! Here's a concise summary of the key points...
Conversation started
Streaming state
Set isStreaming={true} to append a blinking cursor to the message content. Use this while the model is mid-response.
AI
Analyzing the document structure and key themes
With timestamps
Pass a timestamp string to render a label beneath the bubble.
U
Can you summarize this document for me?
2:31 PMAI
Sure! Here's a concise summary of the key points...
2:31 PMProps
| Prop | Type | Default | Description |
|---|---|---|---|
role | "user" | "assistant" | "system" | — | Who sent the message |
content | React.ReactNode | — | Message content |
isStreaming | boolean | false | Appends an animated blinking cursor |
avatar | React.ReactNode | — | Custom avatar element (defaults to "U" / "AI" circle) |
timestamp | string | — | Optional label shown below the bubble |
className | string | — | Additional class names on the outer wrapper |
Source
packages/ui/src/chat-message.tsx — copy into components/ui/chat-message.tsx in your project.