Message | Fragments

Preview

<Message role="user">
  <Message.Content>
    Hello! Can you help me with a coding question?
  </Message.Content>
</Message>

Installation

npx @usefragments/cli add message

Writes src/fragments/ui/components/Message plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Message is a compound: import the root and reach its parts through dot notation.

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

Right-aligned and capped at 80% of the available width.

<Message role="user">
  <Message.Content>
    Hello! Can you help me with a coding question?
  </Message.Content>
</Message>

Examples

Assistant Message

Left-aligned with an avatar and a wider measure.

<Message role="assistant">
  <Message.Content>
    Of course! I'd be happy to help. What would you like to know?
  </Message.Content>
</Message>

System Message

Centred and quiet, for context rather than conversation.

<Message role="system">
  <Message.Content>
    Conversation started. Model: GPT-4
  </Message.Content>
</Message>

Streaming

A blinking caret trails the text as it arrives.

<Message role="assistant" status="streaming">
  <Message.Content>
    I'm currently generating a response for you
  </Message.Content>
</Message>

With Timestamp

A relative send time sits beneath the bubble.

<Message role="assistant" timestamp={new Date(Date.now() - 300000)}>
  <Message.Content>
    This message was sent 5 minutes ago.
  </Message.Content>
  <Message.Timestamp />
</Message>

Error State

A failed send turns the bubble and its border red.

<Message role="user" status="error">
  <Message.Content>
    This message failed to send.
  </Message.Content>
</Message>

Custom Avatars

Photos replace the default glyphs on both sides.

<>
  <Message
    role="user"
    avatar={<Message.Avatar src="https://i.pravatar.cc/64?u=user" alt="Jane" />}
  >
    <Message.Content>

With Actions

Controls stay hidden until the pointer enters the row.

<Message
  role="assistant"
  actions={
    <>
      <Button variant="ghost" size="sm">
        Copy

API

Component props
Prop	Type	Default	Description
`role`Required	`enumuserassistantsystem`	Not set	Message role determines styling and alignment
`children`Required	`node`	Not set	Message content
`status`	`enumpendingstreamingcompleteerror`	`complete`	Message state
`timestamp`	`object`	Not set	When the message was sent
`avatar`	`node`	Not set	Custom avatar override (null to hide)
`actions`	`node`	Not set	Hover actions (copy, regenerate)

Accessibility

Uses semantic HTML for message structure
Role-based styling has sufficient color contrast
Actions are keyboard accessible
Streaming indicator respects reduced motion preferences

Guidance

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)

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

Next steps

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