Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Message
Composable conversation rows for chat and AI-assistant interfaces, pairing an avatar with a content column of header, bubbles, and footer, with start and end alignment for incoming and outgoing messages.
Default
An incoming message composes
MessageAvatar and MessageContent inside a Message row. The content column stacks a MessageHeader with the sender name above a Bubble holding the message body, while the avatar sits on the left and anchors to the bottom of the row.
Loading example…
Outgoing Message
Set
Align="MessageAlign.End" for outgoing messages. The markup order stays avatar-then-content — the row applies flex-row-reverse automatically, so the avatar renders on the outer right edge. A MessageFooter below the bubble shows delivery status and right-aligns to match the row.
Loading example…
Conversation Thread
A full thread mixes incoming and outgoing rows. Use
MessageGroup to cluster consecutive messages from the same sender with tighter spacing — omit the avatar on all but one message in the group so it appears once. A single MessageContent can stack multiple bubbles, and BubbleReactions attaches emoji reactions to any bubble.
Loading example…
Ghost Assistant Reply
Use
BubbleVariant.Ghost for AI-assistant replies that render markdown-style content at full width without a framed surface. The MessageHeader and MessageFooter detect the ghost bubble and drop their horizontal padding so all text lines up flush with the content.
Loading example…