A chat row: an avatar, a bubble, and an optional name above and status below - sixteen variants where the only thing that ever changes is which of the four...
Two components, sixteen variants
Message - Align × Show Avatar × Show Header × Show Footer: Start · End × Yes · No × Yes · No × Yes · No - 480 wide, 66 to 118 tall
Message Group - none: 480 × 266 - three Messages stacked 8 apart
Three things at once, which is the point of it being one property. Start is the other person: the row runs left to right, the bubble takes base.muted with base.foreground text. End is you: the row reverses so the avatar lands on the right, and the bubble takes base.primary with base.primary-foreground. You never set the fill and the side separately.
Why is the avatar aligned to the bubble and not the row?
Because a status line under the bubble is not part of the message's shape - it is a note about it. If the avatar sat on the bottom of the row it would drop 26 pixels every time a footer appeared, and a thread would look like the faces were sliding around. The component pins it to the bubble's baseline instead.
What is the Message Group for?
One number. It is three Messages in a column 8 apart, and that eight is the entire component. Put the spacing in the group and a thread has one place to change its rhythm; put it on each message and you have twenty places.
When do I hide the avatar and the header?
When nothing has changed. The usage frame shows both cases: in a back-and-forth the reply drops the avatar because the side already says who is speaking, and in two consecutive messages from one person the second drops the avatar and the name both. Only the bubble is new, so only the bubble appears.
Does it reuse anything?
The bubble is a real instance of the Bubble component, reactions and all - the Message adds the avatar column, the header and the footer around it. The reaction pill ships hidden in all sixteen, so turning one on is a property change rather than an edit. The usage frame's attachment example brings in a real Attachment instance too, so a file in a chat is the same file card the rest of the kit uses.
What can hang off a message?
Three things, and the usage frame shows each. An attachment sits under the bubble, indented into the same 40px column so it reads as part of the message rather than a new one. Actions - copy, retry, and a thumbs-down - sit in the footer, flush to the message's own edge, which puts them on the right for an End row. And an emoji reply drops the bubble entirely: no fill, no 280 width, just the glyph at 32.