Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Chat - Grouped message timeline

Group consecutive messages from the same author into a compact timeline with custom row presentation.

Use this pattern to render a thread that visually groups messages by author and time window without manual grouping logic in the page layer.

This pattern fits support timelines, collaboration surfaces, and assistant threads where readability and density outweigh per-message isolation.

This example exercises MessageGroup, groupingWindowMs, the Message.Avatar/Message.Content/Message.Meta primitives, and grouped-versus-ungrouped owner state.

The demo below shows an author-grouped timeline that collapses repeated avatars and metadata within a short time window:

Grouped timeline
Author and time-window grouping
Alice Chen
Alice Chen
I reviewed the incident summary and grouped the first remediation steps.
Sent
The access token mismatch explains the initial deployment confusion.
Sent
Alice Chen
Alice Chen
Nine minutes later, the customer confirmed the reset worked.
Sent
You
You
Let us fold that into the public timeline so support can reuse the steps.
Sent
Also add a note about why we keep message grouping separate from the data model.
Sent
MUI Guide
MUI Guide
Done. The grouping window is now a local presentation choice inside the recipe.

Key primitives

  • MessageGroup for first/last grouping decisions.
  • Message.Root for message-level owner state.
  • Message.Avatar, Message.Content, and Message.Meta for the default row stack.
  • Message.Actions (optional) when a timeline needs inline actions.

Implementation notes

  • Vary timestamps so the grouping window is observable, not just theoretical.
  • Include at least one break in author identity and one in time-window grouping.
  • Keep the composition focused on message rows, not conversation selection or thread layout.

When to use this pattern

Use this pattern when:

  • A chat surface needs compact message grouping.
  • Avatar repetition should be reduced.
  • Grouped and ungrouped rows need different styling or spacing.

This is especially useful in support timelines, collaboration surfaces, and assistant threads where one participant often sends several messages in a row.

Design notes

  • MessageGroup keeps neighbor comparison logic out of the page layer.
  • groupingWindowMs is a presentation decision, so it belongs near the message row composition rather than in the data model.

See also

API