<div className={`str-chat__message-${theme}__actions`} />
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 whenmessage.type
isdeleted
MessageOptions
- on hover, shows the available options on a message (i.e., react, reply, actions)MessageRepliesCountButton
- displays the number of threaded replies on a messageMessageStatus
- displays message delivery status and the users who have read the messageMessageText
- formats and renders the message text in markdown using react-markdownMessageTimestamp
- shows the sent time of a messageQuotedMessage
- shows a quoted message UI wrapper when the sent message quotes a previous messageTimestamp
- formats and displays a date, used byMessageTimestamp
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
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.
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
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
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 |