Message Thread
Chat thread with grouped sender bubbles, a Today day divider, a reaction chip, and a read receipt on the last outgoing message.
Chat thread with grouped sender bubbles, a Today day divider, a reaction chip, and a read receipt on the last outgoing message.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Message Thread is the conversation surface between Avery Stone and Maya Chen, messages grouped by sender so the avatar renders once per run, outgoing bubbles right-aligned in bg-foreground with text-background, incoming left-aligned in bg-muted. A "Today" day divider breaks the earlier exchange from the current session, and the final outgoing bubble, "Let us aim to close ACM-231 before Friday," carries a CheckCheck read receipt. One earlier message has a reaction chip, a thumbs-up with a count of 1.
Thread data splits across two arrays split by the day divider. Rendering the avatar once per sender group is what makes the layout read as conversation rather than a list.
Reach for this block as the main content area of a chat view, wired to your messages endpoint with a thread ID. Pair it above a message composer and below a channel list sidebar or conversation list.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the 1:1 message history view. Other thread shapes:
Tip: the day divider is load-bearing context; without it users lose track of whether they are reading today or last week.