Unread messages

Sendbird UIKit for React provides features that help users keep track of unread messages in group channels. These features are designed to enhance the user experience by allowing users to easily identify and revisit messages they haven't read yet, especially in busy group channels where messages can accumulate quickly. For unread messages, the UIKit provides the following features:

• Unread message count: the number of unread messages appears in the channel list view, helping users quickly identify which channels have new messages they haven't read yet.

• Mark messages as unread: a user can mark messages that have arrived after a certain time point as unread, allowing them to revisit important messages or catch up on the conversation later on. Once this feature is enabled, visual indicators such as a divider and a floating view will appear in the channel view.

• Unread message divider and floating view: visual indicators that help users keep track of unread messages in the channel view. The divider appears at the top of the first unread message, while the floating view indicates the number of unread messages in the channel.

Note: Unread message counts are enabled by default, but marking messages as unread is an optional feature that can be enabled during the UIKit initialization or through Sendbird Dashboard. Both features are available only for group channels.

Unread message counts inform users the number of messages they haven’t read in each group channel. If the message count exceeds 100, it will show as 99+.

To view the image in full screen, click on the

Note : In order to use the unread message counts feature, you must first build a channel list-based service and get a channel list view. To learn how to display channel list view, refer to the List channels page.

Users can also mark messages as unread in a group channel. This feature is useful for users who want to revisit important messages or catch up on conversations they may have missed while they were away from the channel. When a user marks a message as unread, it will automatically update the read status of the messages that came after the marked message.

The mark as unread feature is implemented in the groupchannel class as a part of the UIKit's message menu item. When a user selects the Mark as unread option from the message menu item, the app will change the read status of the message and those that came after the marked message to unread.

Note: Mark as unread can be used only on user messages, file messages, and multiple files messages.

To view the image in full screen, click on the

Note: On a mobile device, the message menu may show up as a bottom sheet or a context menu depending on the Reactions setting. If Reactions are enabled, the Mark as unread menu will appear as a bottom sheet. If not, it will appear as a context menu. For more information, refer to our guide on Reactions.

To enable this feature, you can do one of the following:

• Sendbird Dashboard: Log in to Sendbird Dashboard. Then navigate to Chat > UIKit config > Group channel and enable the Mark as unread option.

• By default, enableMarkAsUnread is false. You can change the settings through the groupChannel.enableMarkAsUnread prop in the SendbirdProvider or App components as follows:

<SendbirdProvider appId={appId} userId={userId} 
  uikitOptions={{ groupChannel: { enableMarkAsUnread: true } }} >
    ...
</SendbirdProvider>

Note: The values set during the initialization can overrides the settings configured in the Sendbird Dashboard. When you set enableMarkAsUnread to true and turn the option off in the dashboard, the UIKit will still use the value set during the initialization.

A Mark as unread button appears in the message menu of each message in a group channel. When a user clicks this button, the messages that arrived after the marked message will be marked as unread.

The following table shows a customizable property of stringSet that appears in the message menu.

When a user marks a message as unread, the UIKit provides visual indicators to help them keep track of unread messages in the channel view.

To view the image in full screen, click on the

• Divider: Once a message is marked as unread, a divider will appear at the top of the first unread message in the channel view and visually indicate that there are unread messages in the channel. This can help users quickly identify where they left off in the conversation.

• Floating view: If the divider isn't shown in the current screen but there are one or more unread messages in the channel, a floating view is displayed at the top of the channel view to indicate the unread message count. Tapping on the X button of this view will mark all unread messages as read and make the floating view disappear.

The floating view can be customized through StringSet. The following table lists the customizable properties of the floating view.

Note: To learn how to customize the text resources, refer to our guide on text resources.