Messaging components

MessageItem takes a single msg prop typed as Message. Only id is required; everything else is optional — text, sentAt, readAt, status, typing, a user object, and the content payloads image, audio, attachment, reply, urlPreview and reactions. reply and urlPreview only render on a message that also has text. Because MessageItem renders an <li>, map your messages inside your own <ol> or <ul> and give that list an aria-label such as "Conversation".

Set me: true inside the message's user object. The bubble then aligns to the right with self-end, uses the primary background with a squared top-right corner, and the sender label reads "You" instead of user.name. Avatars are only rendered for messages from other people.

Set status on the message to "sent", "read" or "failed" and the status icon renders next to the timestamp. Add readAt and it is appended to the tooltip on a read message. You can also render the indicator on its own with <MessageStatus status="read" readAt="2:20 PM" /> — the message status example above renders all three states that way.

Yes. Pass image as { src, alt, name, size }, attachment as { name, size, type } where type is one of "jpg", "txt", "pdf" or "mp4" (it selects the file icon), and audio as { duration }, which renders a waveform with a play button. size and duration are display strings, not raw byte counts, and the audio playback button is a UI shell — wire up your own player.

Add an entry with typing: true and no text or other content, since any content would still render above the dots. MessageItem renders the animated three-dot bubble and hides the timestamp and status for that entry; the sender label still shows unless you set showUserLabel={false}.

Pass showUserLabel={false} to MessageItem. It defaults to true, so a common pattern is to only show the label on the first message in a run from the same sender.

The composers are example code rather than exported components — MessageActionMinimal, MessageActionTextarea and MessageActionAdvanced live in message-action.demo.tsx, so copy the one you want into your own project rather than importing it as part of the API. All three are uncontrolled forms with a field named message: they accept an onSubmit callback that is called with the message string after the form's default submission is prevented, and MessageActionMinimal additionally accepts a size of "sm", "md" or "lg", defaulting to "lg".