---
id: ui-components
title: UI Components
---

import GHComponentLink from '../../_docusaurus-components/GHComponentLink';

As described in the [Message UI](./message-ui.mdx) section, our default <GHComponentLink text='MessageSimple' path='/Message/MessageSimple.tsx'/> 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](../../guides/theming/message-ui.mdx) section for an example.

The following UI components are available for use:

- [`MessageActions`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActions.tsx) - displays the available actions on a message (ex: edit, flag, pin)

- [`MessageDeleted`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) - renders when
  `message.type` is `deleted`

- [`MessageOptions`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) - on hover,
  shows the available options on a message (i.e., react, reply, actions)

- [`MessageRepliesCountButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) - displays
  the number of threaded replies on a message

- [`MessageStatus`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) - displays message
  delivery status and the users who have read the message

- [`MessageText`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageText.tsx) - formats and renders
  the message text in markdown using [react-markdown](https://www.npmjs.com/package/react-markdown)

- [`MessageTimestamp`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) - shows the
  sent time of a message

- [`MML`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MML/MML.tsx) - a wrapper component around the
  [MML React](https://www.npmjs.com/package/mml-react) library

- [`QuotedMessage`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) - shows a quoted
  message UI wrapper when the sent message quotes a previous message

- [`Timestamp`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Timestamp.tsx) - formats and displays a date,
  used by `MessageTimestamp` and for edited message timestamps.

- [`MessageBouncePrompt`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) -
  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](./reactions.mdx).

## MessageActions Props

### ActionsIcon

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

| Type                  | Default                                                         |
| --------------------- | --------------------------------------------------------------- |
| `React.ComponentType` | <GHComponentLink text='ActionsIcon' path='/Message/icons.tsx'/> |

### 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](../../guides/theming/message-ui.mdx)).

| Type                             |
| -------------------------------- |
| React.RefObject<HTMLDivElement\> |

### mine

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

| Type          |
| ------------- |
| () => boolean |

## MessageDeleted Props

### <div class="label required basic">Required</div> 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` | <GHComponentLink text='ActionsIcon' path='/Message/icons.tsx'/> |

### displayReplies

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

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### handleOpenThread

Function that opens a [`Thread`](../core-components/thread.mdx) 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`](#messageactions-props) component ([see the example](../../guides/theming/message-ui.mdx)).

| 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` | <GHComponentLink text='ReactionIcon' path='/Message/icons.tsx'/> |

### theme

Theme string to be added to CSS class names.

```jsx
<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` | <GHComponentLink text='ThreadIcon' path='/Message/icons.tsx'/> |

## MessageRepliesCountButton Props

### labelPlural

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

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

| Type   |
| ------ |
| string |

### labelSingle

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

```jsx
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 | <GHComponentLink text='Avatar' path='/Avatar/Avatar.tsx'/> |

### messageType

Message type string to be added to CSS class names.

```jsx
<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:

```tsx
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.

```jsx
<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`](#timestamp-props), 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.

```jsx
<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

### <div class="label required basic">Required</div> 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:

```jsx
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:

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

If you need deeper customization, refer to the [`MessageBounceContext`](../contexts/message-bounce-context.mdx) 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.

```jsx
<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 |
