Catalog Chat

<.message_bubble>

ConnieUI.Chat

Agreed. The schedule we sent has fourteen, with two pickup days.
HEEx 
<div class="w-sm">
  <ConnieUI.Chat.message_bubble tail>
    Agreed. The schedule we sent has fourteen, with two pickup days.
  </ConnieUI.Chat.message_bubble>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:atom

`:brand` tints the bubble as the reader's own. The ring stays the same neutral hairline either way: pairing the tint with a brand-coloured ring states it twice and shouts the second time

draws the text in the quaternary tone

squares the top-left corner, pointing at an avatar on that side

Set by the example

class

Docs

The bubble a message is drawn in. Only the shell: the caller puts the body, the unread dot (`unread_dot/1`), the editing form and the reaction control inside it. It lives here rather than with the message renderer because two surfaces draw one and a bubble is a bubble wherever it appears: the conversation timeline, and the Comments tab that lists a thread by its opening message. `tail` squares the top-left corner so the bubble points at the avatar beside it, which is how a list of many one-message rows reads as conversation rather than as a column of cards. The timeline leaves it off: a message there often has no header above it, and the square corner would point at nothing. `muted` is the resolved state in the comment list. It is the text colour rather than the whole bubble's opacity, so the border and background still match every other bubble on the page.
Attribute Type Default Description
color :atom :secondary
`:brand` tints the bubble as the reader's own. The ring stays the same neutral hairline either way: pairing the tint with a brand-coloured ring states it twice and shouts the second time :secondary | :brand
muted :boolean false
draws the text in the quaternary tone
tail :boolean false
squares the top-left corner, pointing at an avatar on that side
class :any nil
Slot Slot attributes Description
inner_block *