This is beta documentation for Stream Chat React SDK v14. For the latest stable version, see the latest version (v13) .

UI Components

As described in the Message UI component, the default MessageSimple UI is composed from smaller building blocks. Those building blocks are exported so you can reuse them in custom layouts.

Best Practices

Reuse the exported building blocks instead of duplicating message behavior.
Keep action components aligned with permission checks from MessageContext.
Reuse MessageText or StreamedMessageText to keep text rendering consistent.
Prefer targeted overrides over replacing every part of the message UI at once.
Use the reactions chapter for reaction-specific components and props.

Available UI Components

The following message UI components are exported and commonly reused in custom message layouts:

MessageActions for quick actions and the dropdown action menu
MessageAlsoSentInChannelIndicator for thread replies that are also shown in the channel
MessageBlocked for moderation-blocked messages
MessageBouncePrompt for bounced-message recovery
MessageDeletedBubble for deleted-message bubbles
MessageEditedIndicator for the edited label and tooltip in message metadata
MessageRepliesCountButton for thread reply counts
MessageStatus for sent, delivered, and read state
MessageText for markdown-rendered message text
MessageTimestamp for sent-time metadata
MessageTranslationIndicator for translation state
PinIndicator for pinned messages
QuotedMessage for quoted-message content
ReminderNotification for reminders on messages
StreamedMessageText for AI-generated streaming text
Timestamp for shared timestamp formatting

For ReactionSelector, ReactionsList, SimpleReactionsList, and MessageReactionsDetail, see the reactions chapter.

MessageActions Props

Prop	Description	Type
`disableBaseMessageActionSetFilter`	Disables the SDK permission and context filter for the current `messageActionSet`. Defaults to `false`.	`boolean`
`messageActionSet`	Custom action-set items rendered as quick actions or dropdown actions.	`MessageActionSetItem[]`

This component has all of the same props as the underlying Timestamp, except that instead of timestamp it uses message.message_text_updated_at from the MessageContext for the tooltip. It renders only when the message has been edited (has message_text_updated_at) and is not AI-generated.

If you need the older always-visible edited timestamp instead of the default label-plus-tooltip behavior, build that explicitly in your custom message metadata with Timestamp and message.message_text_updated_at.

Prop	Description	Type
`calendar`	If true, call the `Day.js` calendar function to get the date string to display in the edited-at tooltip	`boolean`
`customClass`	If provided, adds a CSS class name to the component's outer container (the span that wraps the "Edited" label and tooltip)	`string`
`format`	If provided, overrides the default timestamp format used in the edited-at tooltip	`string`
`message`	The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`)	`object`

MessageStatus Props

Prop	Description	Type
`MessageDeliveredStatus`	Custom component rendered when a message is delivered but not yet read.	`React.ComponentType`
`MessageReadStatus`	Custom component rendered when a message is delivered and read.	`React.ComponentType`
`MessageSendingStatus`	Custom component rendered while a message is being sent.	`React.ComponentType`
`MessageSentStatus`	Custom component rendered when a message has been created on the server but has not been read yet.	`React.ComponentType`
`messageType`	String used to derive CSS class names for the status element. Defaults to `"simple"`.	`string`
`tooltipUserNameMapper`	Custom mapper for usernames displayed in the read-status tooltip.	`TooltipUsernameMapper`

renderText function

Avatar