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.

customWrapperClass

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

getMessageActions

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

handleDelete

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

handleFlag

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

handleMarkUnread

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

handleMute

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

handlePin

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

inline

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

message

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

mine

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

MessageDeleted Props

message

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

MessageOptions Props

ActionsIcon

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

displayReplies

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

handleOpenThread

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

ReactionIcon

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

theme

Theme string to be added to CSS class names.

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

ThreadIcon

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

MessageRepliesCountButton Props

labelPlural

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

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

labelSingle

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

const singleReplyText = `1 ${labelSingle}`;

onClick

Function to navigate into an existing thread on a message.

reply_count

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

MessageStatus Props

Avatar

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

MessageDeliveredStatus

Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string ‘Delivered’.

MessageReadStatus

Custom component to render when message is considered delivered and read. The default UI renders the last reader’s Avatar and a tooltip with string readers’ names.

MessageSendingStatus

Custom component to render when message is considered as being the in the process of delivery. The default UI renders LoadingIndicator and a tooltip with string ‘Sending’.

messageType

Message type string to be added to CSS class names.

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

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.

customWrapperClass

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

message

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

theme

Theme string to be added to CSS class names.

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

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.

customClass

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

<time className={customClass} />

format

If provided, overrides the default timestamp format.

message

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

MML Props

source

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

actionHandler

The submit handler function for MML actions.

align

The side of the message list to render MML components.

QuotedMessage Props

MessageBouncePrompt props

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

MessageBouncePrompt children

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.

Timestamp props

calendar

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

customClass

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

<time className={customClass} />

format

If provided, overrides the default timestamp format.

timestamp

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