Sam Kim
2:41 PMDelivered
Click your blue message to mark it read. Each rounded box around a message is a chat bubble
Chat Bubble (Message Bubble)
/ chat-bubble · role="log" /
also called message bubble, speech bubble, chat message, text bubble, conversation bubble, messenger bubble
“Los bocadillos que salen en una conversación” (the speech bubbles in a conversation) are chat bubbles, also called message bubbles: one rounded box per message, the other person's on one side in a neutral color and yours on the other in the accent color. The small pointed corner is the tail, the line underneath holds the timestamp and a delivered or read status, and the bubble of three bouncing dots is a typing indicator. Careful with two lookalikes: a bubble that points at a button and explains it is a tooltip or popover, not a chat bubble, and the three dots that open a menu are an overflow menu, not a typing indicator.
If you called it…
…you meant a chat bubble (message bubble).
Anatomy — every part, named
- 1Message bubble
chat-bubble“The rounded box around each text” is the message bubble: received ones sit on the start side in a neutral fill, sent ones on the end side in the accent color.
- 2Bubble tail
“The little pointy corner on the bubble” is the tail: it points toward whoever spoke, and only the last bubble in a run keeps it.
- 3Message status
<MessageStatus />“The tiny Delivered or Read under my message” is the message status (a read receipt), sitting in the metadata line beside the timestamp.
- 4Typing indicator
<TypingIndicator />“The three dots that bounce when someone is typing” are a typing indicator: a received-style bubble that holds animated dots instead of text.
Prompt — paste into your agent
Build the conversation as a message list with role="log", one chat bubble per message (daisyUI chat + chat-bubble): received messages aligned to the start in a neutral fill (chat-start), sent messages aligned to the end in the accent color (chat-end). Give each bubble a generous corner radius with one tighter corner on the side it speaks from as its tail, cap the width at about 75% of the column so long messages wrap, and put a small metadata line under your latest message with the time and a delivered or read status (Stream Chat MessageStatus). While the other person is writing, show a typing indicator: a received-style bubble holding three dots that bounce in sequence.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my chat bubbles / message list (daisyUI chat-start, chat-end, chat-bubble; role="log"; Stream Chat MessageStatus, MessageTimestamp, TypingIndicator). Rule out: bubbles stretching the full column width because the row is a block instead of a flex row with a max-width on the bubble; a long URL or unbroken string overflowing the bubble for lack of overflow-wrap: anywhere; sent and received distinguished by color alone, with no alignment or accessible label saying who spoke; the tail drawn as a separate triangle that detaches from the bubble or shows a seam in dark mode; every consecutive message repeating the avatar, name and tail instead of only the last in a group; the list not pinned to the newest message, or yanking the reader back to the bottom while they scroll up through history; role="log" or aria-live placed on each bubble rather than once on the list, so a screen reader re-announces everything; the typing indicator left on after the message arrives, or animating with prefers-reduced-motion set; read status shown on the other person's messages; timestamps as bare text with no <time datetime>. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| daisyUI | chat-bubble | inside a chat row; chat-start puts it on their side, chat-end on yours |
| ARIA | role="log" | on the message list, not the bubble: new messages are announced politely, in order |
| daisyUI | chat-header | the sender name above the bubble; chat-footer is the line under it, chat-image the avatar |
| Stream Chat | <MessageStatus /> | the sent, delivered and read state under your own message |
| Stream Chat | <TypingIndicator /> | shows who is typing right now; most apps draw it as three animated dots in a bubble |
| Stream Chat | <MessageTimestamp /> | the sent time in the message's metadata line |