Skip to contentSkip to navigation
DocsDocs

Message

The entries of a conversation, your own as bubbles and others at full width.

StableSince 1.0.0
On this page

Overview

Show code, Conversation.tsx

Variants

Yours

The person using the app: a compact bubble at the end.

Someone else's

Anyone else, such as an assistant: full width, no bubble, room for a formatted answer.

Show code, FormattedAnswer.tsx

Anatomy

  1. List

  2. Message

  3. Author

  4. Meta

  5. Content

  6. Actions

  7. Status

Show code, MessageAnatomy.tsx

Behaviour

Delivery status

A message can show that it is on its way, or that it wasn't sent.

  • Offer Try again beside one that failed.
Show code, DeliveryStatus.tsx

Adapting to width

Your own bubble grows to three quarters of the list, and keeps a readable width in a narrow list.

Show code, BubbleWidth.tsx

Rules

The bubble means you; everyone else's messages run at full width, in the order they were sent.

Use it when

  • A conversation with a person or an assistant
  • A thread of comments, each with its author and time
  • A reply that streams in while people read
DoComments by others, each with its author, at full width.
Show code, CommentThread.tsx
Don’tSomeone else's message in your bubble: the bubble means you.
Show code, SelfForOthers.tsx

Order and focus

Keep messages oldest first, in one list.

  • Leave focus where it is as new ones arrive: the list announces them.

Content

Name icon actions after what they do, such as Copy answer.

Related

  • A whole conversation, with the log, the composer, a streaming reply and a failed send.

  • The field where people write and send the next message.

  • Items people scan, open and act on, such as a list of conversations.

  • A short notification that comes and goes, such as Message sent.

  • Formatted text on its own, outside a conversation.