Mention

Mention is a feature that allows users to call out each other in a message within a group channel. Users can mention other members in the group channel to get their attention and directly notify that they've been mentioned in a message.

To view the image in full screen, click on the

The mention feature currently has the following limitations:

• Mention is available for group channels only.
• User is the only mention type that Sendbird UIKit provides.
• Users can only mention other users in the same channel.
• Users can have up to 10 mentions in a single message.

To turn on the feature, refer to the code below:

import App from '@sendbird/uikit-react/App';
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';

// Turn on user mention.
<App
  ...
    isMentionEnabled
/>
<SendbirdProvider
    ...
    isMentionEnabled
/>

The mention feature has basic settings that you can customize when implementing it in your client app. You can configure these settings through either App or SendbirdProvider component.

The maximum number of times you can mention the same user or multiple users in one message is 10. The maximum number of users shown in a suggested mention list is set to 15 by default. These numbers are customizable through userMention, which contains maxMentionCount and maxSuggestionCount properties.

<App
  ...
  config={{
    userMention: {
      maxMentionCount: 10,
      maxSuggestionCount: 15,
    }
  }}
/>
<SendbirdProvider
  ...
  config={{
    userMention: {
      maxMentionCount: 10,
      maxSuggestionCount: 15,
    }
  }}
/>

Users can mention other users in the same channel by either searching for the channel member or typing in the user's nickname. When a user types @ in the renderMessageInput component of Channel module, a suggested mention list view appears in the MessageList component of the group channel screen. The suggested mention list contains a scrollable list of all channel members by their nickname or user ID. The list also appears while the user types the nickname of a channel member. As the nickname is being typed, the list sorts the nicknames alphabetically in real-time.

The suggested mention list shows an alphabetical list of all channel members that you can mention in a message. For each member in the list, the profile image, nickname, and user ID are shown by default. You can choose to display either just the nickname or both nickname and user ID. The suggested mention list disappears once a user has been successfully mentioned in a message or when there's no matching nickname found in the list. If there's a typo while typing in a user's nickname or if the user's not a member of the current group channel, the mention list also disappears. If a user reaches the value of maxMentionCount, a warning guide appears in the suggested mention list view.

To view the image in full screen, click on the

When you type @ and a user nickname in the renderMessageInput component of Channel module, the suggested mention list appears. While the list can display both nickname and user ID, you can only type nicknames in the message input field to mention a user. The same user can be mentioned up to 10 times per message by default and the text of each user mention is bolded.

To view the image in full screen, click on the

The UI for mention in the message input field can be customized through stringSet.

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

When a user is mentioned in a message, the unread message count in the GroupChannelListUI component of Group Channel List module increases by the number of unread mentioned messages. A mention badge also appears to the left of the unread message count number to indicate that the user has been mentioned in one of the unread messages. Regardless of the number of unread mentioned messages, if there's at least one unread mentioned message in the channel, the mention badge appears in the channel list.

Once the user taps on the channel with the unread mentioned message, they can see all the messages in the MessageList component of Channel module where the highlighted user's nickname appears. The nickname is highlighted only in messages that mention the current user.

To view the image in full screen, click on the

Users can tap on each mentioned nickname in a message to see the user profile of the mentioned channel member. The user profile includes a profile image, nickname, and user ID.

To view the image in full screen, click on the