React Message component

Preview

<Message from="user">
  <Message.Content>Which files break the workspace rules?</Message.Content>
</Message>

Usage

Use when

Individual turns in a chat transcript
AI assistant and chatbot interfaces
User and assistant turns that must read differently
Turns carrying copy, regenerate, or feedback actions

Avoid when

Plain text with no chat context (use Text)
Notifications (use Alert or Toast)
Threads with nested replies (use Card with a custom layout)

Implementation notes

Always set from; it places the turn and picks the reading
Events such as a model switch or a joined user are ConversationList.Event, not a message
A string from the assistant renders as markdown; from the user it keeps its line breaks
status covers pending, streaming and error; error adds the failure block with Try again when onRetry is set
No avatars by default; pass avatar when a conversation has more than two people
The user's bubble caps at 80% of the measure so the two sides stay distinct
Show one waiting pattern: ThinkingIndicator before the reply starts, the caret while it streams

Installation

pnpm add @usefragments/ui

The npm package stays managed by your package manager. Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import Message once, then compose its parts with dot notation.

Message.Content
Message.Actions
Message.Timestamp
Message.Avatar
Message.Error

The user's words in a band bubble at the end, capped at 80% of the measure.

<Message from="user">
  <Message.Content>Which files break the workspace rules?</Message.Content>
</Message>

Examples

Assistant Message

The reply is flush and renders markdown.

<Message from="assistant">
  <Message.Content>{"Two files use a raw `button`."}</Message.Content>
</Message>

Streaming

A still caret at the end while the reply arrives.

const partial = "Two files need updated imports…";

<Message from="assistant" status="streaming">
  <Message.Content>{partial}</Message.Content>
</Message>

Sending

The meta line says Sending… until the message lands.

<Message from="user" status="pending">
  <Message.Content>Summarise the changes on main.</Message.Content>
</Message>

Failed

The failure block says what happened and offers Try again.

const partial = "The reply was interrupted.";
const retry = () => {};

<Message from="assistant" status="error" onRetry={retry}>
  <Message.Content>{partial}</Message.Content>
</Message>

With Timestamp

A relative time in the meta line.

const sentAt = new Date(2026, 9, 4, 10, 30);

<Message from="user" timestamp={sentAt}>
  <Message.Content>Thanks!</Message.Content>
</Message>

With Actions

Copy and regenerate beside the meta line.

import { Copy } from "@phosphor-icons/react";

const reply = "Two files need updated imports.";

<Message
  from="assistant"

With Avatar

Opt in when more than two people talk.

<Message from="user" avatar={<Message.Avatar>AL</Message.Avatar>}>
  <Message.Content>Can you check main?</Message.Content>
</Message>

API reference

Component props
Prop	Type	Default	Description
`actions`	`React.ReactNode`	Not set	Actions for the message (copy, regenerate), shown on hover or focus where a pointer hovers, always on touch
`Actions.children`Required	`React.ReactNode`	Not set	—
`avatar`	`React.ReactNode`	Not set	Opt-in avatar slot, usually Message.Avatar. No avatar is drawn by default
`Avatar.alt`	`string \| undefined`	Not set	Alt text for the image.
`Avatar.children`	`React.ReactNode`	Not set	Initials or a glyph when there is no image.
`Avatar.src`	`string \| undefined`	Not set	Image URL.
`children`Required	`React.ReactNode`	Not set	Message parts, usually Message.Content
`Content.children`Required	`React.ReactNode`	Not set	A string from the assistant renders as markdown; from the user it keeps its line breaks.
`Error.actions`	`React.ReactNode`	Not set	More actions beside retry (for example "Ask differently").
`Error.children`	`React.ReactNode`	Not set	What went wrong.
`Error.onRetry`	`(() => void) \| undefined`	Not set	Retry handler; adds the "Try again" action. Defaults to the message's `onRetry`.
`Error.retryLabel`	`string \| undefined`	Not set	Label of the retry action.
`from`Required	`MessageFromuserassistant`	Not set	Who wrote the message: the user's bubble sits at the end, the assistant's reply is flush
`onRetry`	`(() => void) \| undefined`	Not set	Retry a failed message; the failure block offers Try again
`status`	`MessageStatus \| undefinedpendingerrorstreamingcomplete`	`complete`	Where the message stands: pending shows Sending…, streaming a still caret at the end, error a failure block
`timestamp`	`Date \| undefined`	Not set	When the message was sent; shown in the meta line
`Timestamp.date`	`Date \| undefined`	Not set	Date to show. Defaults to the message's `timestamp`.
`Timestamp.format`	`((date: Date) => string) \| undefined`	Not set	Custom format function.

Accessibility

A streaming message sets aria-busy until it completes
The failure block is an alert with its words and a labelled Try again
Actions are reachable by keyboard and shown on focus; they are always visible on touch
The timestamp is a time element with a machine-readable date

ConversationListparentMessages are typically used within ConversationList
AvatarchildUse Avatar component for custom avatar content
ThinkingIndicatorsiblingShow ThinkingIndicator while awaiting assistant response

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.