Message UI components

The default MessageUI is built from parts, and stream-chat-react exports them for a message UI of your own. Each part reads the message from MessageContext, so most need no props inside a message. Each is an override key of the same name. Message UI shows where each part sits.

Best practices

• Compose these parts instead of rebuilding them. They handle states that are easy to miss, such as a failed send, a thread reply or a message without text.
• Replace one part through its override key, and keep the rest of the default MessageUI.
• To change the action menu, change the action set, not the component. Actions explains how.

Available UI components

A message prop replaces the message from the context. With one, MessageTimestamp also renders outside a message, for example in an override of the gallery header's time; without one, it throws outside a MessageProvider. Timestamp, the component MessageTimestamp and MessageEditedIndicator render the time with, isn't exported; replace it with the Timestamp override key.

For ReactionSelector, MessageReactions and MessageReactionsDetail, see Reaction components. For Attachment, see Attachments.

MessageActions props

The default set, and how to add, remove or replace an action, are on Actions. useBaseMessageActionSetFilter(set) runs the same filter on a set of your own.

MessageBubbleContent props

It renders the items whose isVisible holds for the message. Each item has these fields:

MessageBubbleContentVisibilityFilterParams holds the message, and isAIGenerated: whether isMessageAIGenerated marks the message as AI generated. Bubble content lists the default items and when each one shows.

MessageEditedIndicator props

MessageEditedIndicator renders only for a message with message_text_updated_at. The default MessageUI also leaves it out for AI-generated messages.

The edit time in the tooltip goes through formatDate from the context first, when the list has one. Date and time formatting covers the keys and formats.

MessageStatus props

MessageStatus renders on the user's own messages only, and not on failed or error messages. In a thread it shows only "sending". "Sent" shows on the user's latest message, or on every own message with returnAllReadData.

This replacement shows only first names in the read tooltip:

import type { TooltipUsernameMapper } from "stream-chat-react";
import { MessageStatus, WithComponents } from "stream-chat-react";

const firstName: TooltipUsernameMapper = (user) =>
  user.name?.split(" ")[0] ?? user.id;

// The SDK renders the `MessageStatus` key without props, so the override passes its own.
const MessageStatusWithFirstNames = () => (
  <MessageStatus tooltipUserNameMapper={firstName} />
);

const overrides = { MessageStatus: MessageStatusWithFirstNames };

export const App = () => (
  <WithComponents overrides={overrides}>
    {/* the rest of the app */}
  </WithComponents>
);

Read state, unread and receipts explains where the read and delivery state comes from.

Hooks

• useMessageContext() reads the message the parts render.
• useMessageAlsoSentInChannelNavigation() gives the jump that the View button of MessageAlsoSentInChannelIndicator makes, for a button of your own.
• useMessageReminder(messageId) returns the reminder ReminderNotification shows.