MessageList
StableA column that holds a conversation and reads out new messages.
Also known as thread, chat thread, conversation, message thread
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A short conversation
Summarise the meeting notes.
Assistant: The team agreed to ship on Friday and review metrics next week.
<MessageList>
<Message role="user">Summarise the meeting notes.</Message>
<Message role="assistant">The team agreed to ship on Friday and review metrics next week.</Message>
</MessageList>Your messages and the assistant's replies stack in one column.
When to use it
The column that holds one conversation. It reads new turns out to screen readers as they are added, so people who cannot see the screen can follow along.
Made of: Conversation area · Messages
Use it for
- The messages of one conversation, in order.
- A thread where replies arrive while the person waits.
- A page with more than one conversation, each with its own name.
Not for
- A single turn on its own: use Message.
- The box where people type: use Composer.
- A list of past chats: use ConversationList.
Do and avoid
When does my flight land?
Assistant: Your flight lands at 9:40. The hotel lets you check in from 2 pm.
When does my flight land?
Do
- Put each message directly inside it so each new one is read out.
- Mark the reply as still being written while its words arrive.
- Give each conversation its own name when a page shows more than one.
- Place it inside ThreadTemplate, which already sets a good reading width.
Avoid
- Do not put the message box inside it. Everything added there is read out.
- Do not rebuild the list for every new word. Update the last message instead.
- Do not add other read-out areas inside it.
On a phone
- Fills the width of its container up to 768px, so on a phone it is the full width with a 24px gap between messages.
- It does not scroll or pin itself. Your scrolling parent must handle the on-screen keyboard and the bottom safe area.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | none | The messages, in order. Usually Message components. |
| label | string | "Conversation" | Accessible name of the log region. Change it when more than one thread is on screen. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
max-w-3xl reading widthgap-6 spacing
Built in
- Screen readers hear each new message as it is added, without being cut off.
- Changes to messages already on screen are not read out again.
- It is named "Conversation" for screen readers unless you give it another name.
- It has no keyboard controls of its own.
What you need to do
- Put each Message directly inside it, so each new one is read out.
- Set streaming on the reply that is still being written, and turn it off when it ends.
- Give each list its own label when a page shows more than one conversation.
- Keep the message box and other read-out areas outside it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide