Does The UIKit Support Mentions Out of the Box?

Sendbird Chat UIKit React
1

I noticed that just putting down a message like @anotheruser in a conversation doesn’t trigger a mention. I also didn’t see any reference to the mentions functionality on the UIKit start guide.

Does the UIKit incorporate this feature out of the box or is this something you have to build using the exposed Sendbird HOC?

2

Hi @diggtydo,

It does not look like UIKit supports mentions out of the box. It would be something you’d need to implement.

3

What’s the best way to implement this with the JS UIKit?

My instinct is that for every message that gets sent out, I’ll have to look at the message beforehand and search for a @ sign and then grab whatever value comes after it. Then intercept where ever the sendUserMessage() method is called in the UIKit and append mentionedUserIds to the params object.

I would also like to create a feature where once a user types the @ sign, there is an autocomplete search of possible users that would appear on their cursor.

Do you guys have a Codesandbox implementation of something similar to what I am looking for?

4

We don’t have a codesandbox showing what you’re looking to implement, but you’ve got the right idea.
You’d want to utilize the onBeforeSendUserMessage():

An example of that implementation (You’ll need to add your parsing logic):

const ChannelWithOnBeforeActions = ({ sdk }) => (
    <div style={{ height: '520px' }}>
        <Channel channelUrl={channelUrl}
            onBeforeSendUserMessage={(text) => {
                const params = new sdk.UserMessageParams();
                params.message = text + EXTRA_MESSAGE;
                params.data = DATA;
                return params;
            }}
        />
    </div>
)

Using that method, you can parse the message and add additional params to the message without much additional effort.

In terms of your autocomplete implementation, that would ultimately depend on how you want to implement autocomplete, but that is more of a UI implementation and not necessarily something related to Sendbird.

5

Is there an onBeforeSendUserMessage() method in the core JS SDK? I was looking through the core JS SDK’s API references and didn’t find this method. I was hoping to implement this as a silent component that would be global in scope (applies to all channels on my page) - as opposed to an actual UI component like you did in your example.

6

There is not a similar method or handler in the Core SDK. Unless you’re adding in your own custom input component to the UIKit, the onBeforeSendUserMessage prop on the Channel component is likely your best bet.

7

Is there a similar guidance for implementing mentions on iOS?