UI components · Messages
Chat Bubble
Also called: Message bubble, Chat message, Speech bubble, ChatBubble
One message in a chat or AI conversation. It's a rounded box with a background color. Your messages sit on the right, the other person's or the AI's on the left, with an avatar and a time nearby.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstBuild the message area for an AI assistant. Center the conversation with a max width of 760px. User messages go on the right with a light gray background (#F4F4F4), 18px corner radius, 10px 16px padding, and a max width of 75%. AI replies go on the left with a 28px round avatar and no background, and support paragraphs, lists, and code blocks with a copy button. Under each reply, add a row of 28px icon buttons (Copy, Like, Dislike, Regenerate) that only shows when hovering that message. While the AI is generating, show three bouncing dots with a "Stop" button next to them. If a message fails to send, show a red exclamation mark and "Retry" to its left. Use 16px between messages. Scroll to the bottom when a new message arrives, but not while the user is scrolling back through history; in that case, show a "↓ Jump to latest" button in the bottom right.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Chat Bubble is what you need.
Use Chat Bubble when
- Back-and-forth conversations between two or more people, like instant messaging, live support, and direct messages
- ChatGPT-style AI assistants showing the user's questions and the AI's replies
- Support tickets or order conversations that show messages between buyer, seller, and support over time
Pick something else when
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Both sides' messages sit on the left in the same color, so you have to read the names to know which ones are yours
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Bubbles fill the whole row, so a long paragraph runs across the entire screen and is tiring to read
- 03
New messages don't scroll into view, or users get dragged back to the bottom while scrolling up through history
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
An avatar, a name and time (optional), a message box with a background color, and message actions (copy, regenerate, and so on). Your messages and the other side's sit on opposite sides, and AI replies can contain paragraphs, lists, and code blocks.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The chat bubble is the basic unit of a conversation UI. In messaging apps, live support widgets, and AI assistants like ChatGPT, every message sits in a bubble. Yours are on the right in the brand color or gray, the other side's are on the left in white or light gray, with an avatar beside them and a name and send time above or below. An AI assistant's replies are usually wider, sometimes with no background at all, and can hold paragraphs, lists, and code blocks, with a row of small "Copy, Like, Regenerate" buttons underneath. While it's generating, you see three bouncing dots, or the text streams in word by word.
It looks a lot like a Comment, since both are an avatar plus some text. The difference is the setting. Comments hang under an article or product, everyone's comments line up on the left in one column, and each one can be liked or replied to. Chat bubbles are a back-and-forth between two people (or a person and an AI), alternating left and right, with new messages at the bottom. It's not a Popover either. A popover is a floating panel that opens from a button and has nothing to do with chat.
Position and color should make it obvious at a glance who said what. Cap bubble width at 70% to 80% of the chat area and let long text wrap instead of filling the row. When one person sends several messages in a row, show the avatar once and tighten the spacing. After a long gap, insert a centered timestamp. Draw the sending, failed (a red exclamation mark plus "Retry"), and read states. Scroll to the bottom when a new message arrives, but don't yank users back down while they're scrolling up through history.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-chat-bubble- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-bubble.chat-bubble.chat:is(.chat-start, .chat-end)[data-message-author-role].cs-message.rce-mbox.str-chat__message
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
chat-bubblemessage-bubblemsg-bubblebubblechat-messagechat-msgmessagemessage-itemmessage-rowuser-message
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
ChatBubbleMessageBubbleChatMessageMessageItemBubbleUserMessageAssistantMessage
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026