Message

A chat-style message bubble with sent/received variants and iOS-tapback-style reactions overlapping the bubble corner, a MessageReactions max/+N overflow stack like AvatarGroup, plus a source-citation use case for LLM responses.

Installation

npx dafink-ui add message

Demos

Hey, are we still on for 3pm?
Yep, see you then!
The Eiffel Tower is 330 meters tall, including antennas.
12

Media messages

Message renders whatever you pass as children. A compact AudioPlayer drops straight into the default bubble; its controls pick up the bubble's own text color automatically, no extra props needed. For content with its own visual chrome, like an image, pass bubble={false} so it isn't nested inside a second colored box.

Photo shared in the conversation
Just got back from the trip. Here's the view!

Composition

<Message>
<MessageReactions>/* auto-detected */
<MessageReaction />
</MessageReactions>
</Message>

Props

NameTypeDefaultDescription
variant'sent' | 'received''received''sent' right-aligns the bubble in brand fill; 'received' left-aligns it in a neutral surface tint.
avatarReactNode-Optional avatar rendered beside the bubble.
bubblebooleantrueSet false to render children without the bubble background/padding, for content that supplies its own chrome (an image, an AudioPlayer) so it isn't nested in a second colored box.
classNamestring''Additional CSS classes merged onto the root row.
childrenReactNode-The message content. A MessageReactions child is detected and extracted automatically; it can appear anywhere inside.