UI Components

As described in the Message UI section, our default MessageSimple component is a combination of various UI subcomponents. We export all the building blocks of MessageSimple, so a custom Message UI component can be built in a similar way. Check out the Message UI Customization section for an example.

The following UI components are available for use:

• MessageActions - displays the available actions on a message (ex: edit, flag, pin)

• MessageDeleted - renders when message.type is deleted

• MessageOptions - on hover, shows the available options on a message (i.e., react, reply, actions)

• MessageRepliesCountButton - displays the number of threaded replies on a message

• MessageStatus - displays message delivery status and the users who have read the message

• MessageText - formats and renders the message text in markdown using react-markdown

• MessageTimestamp - shows the sent time of a message

• MML - a wrapper component around the MML React library

• QuotedMessage - shows a quoted message UI wrapper when the sent message quotes a previous message

• Timestamp - formats and displays a date, used by MessageTimestamp and for edited message timestamps.

• MessageBouncePrompt - presents options to deal with a message that got bounced by the moderation rules.

Besides the above there are also components that render reaction list and reaction selector. You can find more about them in dedicated chapter.

MessageActions Props

ActionsIcon

Custom component rendering the icon used in message actions button. This button invokes the message actions menu.

Type	Default
React.ComponentType	ActionsIcon

customWrapperClass

Custom CSS class to be added to the div wrapping the component.

Type
string

getMessageActions

Function that returns an array of the allowed actions on a message by the currently connected user (overrides the value from MessageContext).

Type
() => MessageActionsArray

handleDelete

Function that removes a message from the current channel (overrides the value from MessageContext).

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleFlag

Function that flags a message (overrides the value from MessageContext).

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleMarkUnread

Function that marks the message and all the following messages as unread in a channel.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleMute

Function that mutes the sender of a message (overrides the value from MessageContext).

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handlePin

Function that pins a message in the current channel (overrides the value from MessageContext).

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

inline

If true, renders the wrapper component as a span, not a div.

Type	Default
string	false

message

The StreamChat message object, which provides necessary data to the underlying UI components (overrides the value from MessageContext).

Type
object

messageWrapperRef

React mutable ref placed on the message root div. It is forwarded by MessageOptions down to MessageActions (see the example).

Type
React.RefObject<HTMLDivElement>

mine

Function that returns whether the message was sent by the connected user.

Type
() => boolean

MessageDeleted Props

Required

message

The StreamChat message object, which provides necessary data to the underlying UI components.

Type
object

MessageOptions Props

ActionsIcon

Custom component rendering the icon used in message actions button. This button invokes the message actions menu.

Type	Default
React.ComponentType	ActionsIcon

displayReplies

If true, show the ThreadIcon and enable navigation into a Thread component.

Type	Default
boolean	true

handleOpenThread

Function that opens a Thread on a message (overrides the value from MessageContext).

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

messageWrapperRef

React mutable ref that can be placed on the message root div. MessageOptions component forwards this prop to MessageActions component (see the example).

Type
React.RefObject<HTMLDivElement>

ReactionIcon

Custom component rendering the icon used in a message options button invoking reactions selector for a given message.

Type	Default
React.ComponentType	ReactionIcon

theme

Theme string to be added to CSS class names.

<div className={`str-chat__message-${theme}__actions`} />

Type	Default
string	'simple'

ThreadIcon

Custom component rendering the icon used in a message options button opening thread.

Type	Default
React.ComponentType	ThreadIcon

MessageRepliesCountButton Props

labelPlural

If supplied, adds custom text to the end of a multiple replies message.

const pluralReplyText = `${reply_count} ${labelPlural}`;

Type
string

labelSingle

If supplied, adds custom text to the end of a single reply message.

const singleReplyText = `1 ${labelSingle}`;

Type
string

onClick

Function to navigate into an existing thread on a message.

Type
React.MouseEventHandler

reply_count

The amount of replies (i.e., threaded messages) on a message.

Type
number

MessageStatus Props

Avatar

Custom UI component to display a user's avatar (overrides the value from ComponentContext).

Type	Default
component	Avatar

messageType

Message type string to be added to CSS class names.

<span className={`str-chat__message-${messageType}-status`} />

Type	Default
string	'simple'

tooltipUserNameMapper

Allows to customize the username(s) that appear on the message status tooltip.

Type	Default
(user: UserResponse) => string	(user) => user.name		user.id

This prop's implementation is not provided out of the box by the SDK. See below for a customization example:

const CustomMessageStatus = (props: MessageStatusProps) => {
  const allCapsUserName = useCallback<TooltipUsernameMapper>(
    (user) => (user.name || user.id).toUpperCase(),
    [],
  );
  return <MessageStatus {...props} tooltipUserNameMapper={allCapsUserName} />;
};

// Sort in reverse order to avoid auto-selecting unread channel
const sort: ChannelSort = { last_updated: 1 };
const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
  <ConnectedUser token={token} userId={userId}>
    <ChannelList filters={{ id: { $eq: 'add-message' }, members: { $in: [userId] } }} sort={sort} />
    <Channel MessageStatus={CustomMessageStatus}>
      <Window>
        <ChannelHeader />
        <MessageList />
      </Window>
      <Thread />
    </Channel>
  </ConnectedUser>
);

MessageText Props

customInnerClass

If provided, replaces the CSS class name placed on the component's inner div container.

Type
string

customWrapperClass

If provided, adds a CSS class name to the component's outer div container.

Type
string

message

The StreamChat message object, which provides necessary data to the underlying UI components (overrides the value stored in MessageContext).

Type
object

theme

Theme string to be added to CSS class names.

<div className={`str-chat__message-${theme}-text-inner`} />

Type	Default
string	'simple'

MessageTimestamp Props

This component has all of the same props as the underlying Timestamp, except that instead of timestamp it uses message.created_at value from the MessageContext.

calendar

If true, call the Day.js calendar function to get the date string to display.

Type	Default
boolean	false

customClass

If provided, adds a CSS class name to the component's outer time container.

<time className={customClass} />

Type
string

format

If provided, overrides the default timestamp format.

Type	Default
string	'h:mmA'

message

The StreamChat message object, which provides necessary data to the underlying UI components (overrides the value from MessageContext).

Type
object

MML Props

Required

source

The MML source string to be rendered by the mml-react library.

Type
string

actionHandler

The submit handler function for MML actions.

Type
(data: Record<string, unknown>) => unknown

align

The side of the message list to render MML components.

Type	Default
'left' | 'right'	'right'

QuotedMessage Props

note

QuotedMessage only consumes context and does not accept any optional props.

MessageBouncePrompt props

This component is rendered in a modal dialog for messages that got bounced by the moderation rules.

MessageBouncePrompt children

Type	Default
ReactNode	Localized string for "This message did not meet our content guidelines"

Use this prop to easily override the text displayed in the modal dialog for the bounced messages, without fully implementing a custom MessageBouncePrompt component:

import { MessageBouncePrompt } from 'stream-react-chat';

function MyCustomMessageBouncePrompt(props) {
  return <MessageBouncePrompt {...props}>My custom text</MessageBouncePrompt>;
}

Then override the default MessageBouncePrompt component with your custom one:

<Channel MessageBouncePrompt={MyCustomMessageBouncePrompt}>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

If you need deeper customization, refer to the MessageBounceContext documentation.

onClose

The Message UI component will pass this callback to close the modal dialog MessageBouncePrompt are rendered in.

Type
ReactEventHandler

Timestamp props

calendar

If true, call the Day.js calendar function to get the date string to display.

Type	Default
boolean	false

customClass

If provided, adds a CSS class name to the component's outer time container.

<time className={customClass} />

Type
string

format

If provided, overrides the default timestamp format.

Type	Default
string	'h:mmA'

timestamp

Either an ISO string with a date, or a Date object with a date to display.

Type
Date | string