Chat Message Bubbles — HTML CSS JS Snippet

A chat interface is more than styled speech bubbles — the details that make one feel real are message grouping, delivery status, and a typing indicator that appears and disappears at the right moments. This snippet builds all three on top of plain flexbox, matching the visual language of iMessage and WhatsApp.

Bubble tails via asymmetric border-radius

Rather than an SVG or pseudo-element tail, each bubble uses border-radius: 16px with one corner overridden: incoming bubbles get border-bottom-left-radius: 4px, outgoing bubbles get border-bottom-right-radius: 4px. The sharp corner sits nearest the avatar, which is what visually "points" the bubble at its sender without any extra markup.

Grouping consecutive messages

When the same sender posts multiple messages in a row, only the first carries the full rounded top corners — a CSS rule targets .bubble:not(:first-child) within a group to restore the top-left radius on any bubble after the first, since the group's first bubble is the only one that should have a soft top. Combined with the shared .bubble-group wrapper only showing one timestamp per group instead of one per bubble, this is what makes rapid-fire messages read as one thought instead of a wall of separate boxes.

Read receipts

Each outgoing message's .meta line renders a status word ("Sent" or "Delivered") plus a checkmark. A single check in gray means delivered; a double check in green (.tick-read) means read. This is purely a CSS class toggle — in a real app, flip .tick to .tick-read when your backend's read-receipt event for that message arrives, typically over a WebSocket.

Day dividers

A centered pill (.day-divider) breaks the thread into date groups, matching the convention in every major chat app. In a real implementation, insert one whenever a message's date differs from the previous message's date, computed by comparing toDateString() on consecutive timestamps.

The typing indicator

Three dots inside a bubble-shaped container animate with a shared @keyframes bounce, offset by animation-delay of 0s, 0.15s, and 0.3s so they ripple rather than bounce in unison — the same staggering technique used by loading-dot spinners elsewhere in this library. The row is toggled via the hidden attribute rather than being added and removed from the DOM, so no layout thrash occurs each time it appears.

Sending flow

sendMsg() prevents the form's default submission, builds a new .msg-row via addMessage(), and inserts it with insertBefore(row, typingRow) — always right before the typing indicator's row rather than at the end of the thread, so the typing bubble (when shown) stays visually last. scrollToBottom() runs after every insertion by setting thread.scrollTop = thread.scrollHeight, keeping the newest message in view the way every chat app auto-scrolls.

Simulated reply for the demo

simulateReply() shows the typing indicator after a short delay, waits, then hides it and inserts a reply — standing in for a real WebSocket or polling connection. In production, the typing indicator's visibility should be driven by a "user is typing" event from your backend, not a fixed timeout, and the actual reply should come from your message stream rather than a hardcoded string.

XSS safety

Message text is written using .textContent, never innerHTML, on the dynamically created bubble — the only innerHTML usage builds the surrounding structural markup (avatar, meta), never the user-authored message body, which is the detail that keeps a chat UI safe when real user input flows through it.

See also the chat conversation list for the inbox view this thread would open from, and the AI chat interface for a variant built around a single assistant rather than a peer-to-peer conversation.