Message Overview

The message docs cover the UI rendered for each row inside MessageList. The current API surface is broad because the SDK lets you replace the full row, the message body, attachment rendering, reactions, metadata, and several special-case headers independently.

Use this page as the entry point before drilling into the individual component docs.

Mental Model

Think about message rendering in layers:

  1. MessageList renders a list of messages.
  2. MessageItemView renders one message row.
  3. MessageContent renders the bubble/body inside that row.
  4. Attachments, reactions, replies, headers, status, and timestamps hang off that row/body structure.
  5. MessageContext exposes the message-specific state used by the render tree.

If you only need lightweight decoration around the bubble, prefer the MessageContent*View slots instead of replacing the whole message row.

Start Here

Common Tasks

Best Practices

  • Start with the smallest override that solves the problem.
  • Prefer dedicated subcomponent overrides over replacing MessageItemView wholesale.
  • Use WithComponents for cross-screen UI overrides.
  • Use Channel props when the customization belongs to one chat surface.
  • Keep custom message rendering lightweight to avoid list performance regressions.
Previous
MessagesContext
Next
MessageItemView