UI Components

As described in the Message UI section, our default MessageSimple component is a combination of various UI sub-components. 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

MessageActions Props

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

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

message

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

Type
object

customWrapperClass

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

Type
string

inline

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

Type	Default
string	false

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 or not 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

displayLeft

If true, sets the MessageOptions component to the left of the connected user's messages.

Type	Default
boolean	true

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>

theme

Theme string to be added to CSS class names.

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

Type	Default
string	'simple'

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
(event: React.BaseSyntheticEvent) => Promise<void> | void

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 you to customize the username(s) that appear on the message status tooltip.

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

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

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.