Reactions

Sendbird UIKit for Jetpack Compose supports message reactions. Reactions are a useful social interaction tool that helps build a more engaging chat experience, allowing users to express their response to messages beyond text using emojis. This feature is based on the Chat SDK’s reactions and provides a default set of emojis suited for diverse messaging needs. You can also customize the reactions UI with the compose customization.

Note: Reactions are currently available for group channels only.

To use the reactions feature, make sure you have completed the following prerequisites:

• Enable the reactions feature in your Sendbird application. You can do this by going to Chat > UIKit config in Sendbird Dashboard and turn on Reactions.
• The emojis registered in your Sendbird application.

Once your client app is connected to the Sendbird server, you can access an emoji list predefined by Sendbird. A combination of the emoji list and the reaction information within each message completes the reaction UI.

Reactions can be expressed in various ways within the chat view. The following components are used to display reactions:

• Emoji reaction bar: A long tap on a message to select an emoji from the Emoji reaction bar.
• Add reaction button: Tap on the Add reaction button to select an emoji.
• Emoji reaction box: Tap on an existing emoji reaction in the Emoji reaction box to add a user count of the reaction.

To view the image in full screen, click on the

When a message doesn't contain any prior reaction data, the only way to add a reaction is by holding down a message to view the Emoji reaction bar in the message context menu. The bar reveals a list of five to six emojis in the chronological order of when each emoji was registered to the Sendbird server. Selecting the Add reaction button on the right end of the bar reveals the full Emoji list to add different emoji reactions.

Even when a message already contains reaction data, you can still long tap a message to view the Emoji reaction bar. In this case, emoji reactions already added to the message by the current user are highlighted with a background color.

The Add reaction button can be accessed through either the Emoji reaction box or the Emoji reaction bar in the message context menu.

A long tap on a message can open the Emoji reaction bar where the Add reaction button appears, whereas a regular tap on the button in the Emoji reaction box under the message text sends an onClick() event that calls the Emoji list.

To view the image in full screen, click on the

An Emoji list displays all emojis registered within an application. By default, Sendbird UIKit provides seven emojis but you can register more through the add emojis API. The list is refreshed when the application connects to the Chat SDK by comparing the prior emojiHash in the application to the emojiHash information from the Sendbird server.

When the Emoji list is shown, reactions already added to a message by the current user are highlighted with a background color.

To view the image in full screen, click on the

When a text or file message contains reaction data, this data is displayed below the message in the form of emoji reactions. The number of users who added an emoji reaction to the message is indicated next to each emoji reaction. Selecting an emoji in the Emoji reaction box adds or removes the reacted user count.

To see a list of users who reacted to the message, long tap a reaction emoji that's displayed in the Emoji reaction box. The underlined tab corresponds to the tapped emoji reaction but you can also view the reacted user list for other emoji reactions. Each tab shows the user count and a list of all users who reacted with the emoji.

Sendbird UIKit for Jetpack Compose can customize reactions using inject custom composable. The following code demonstrates how to build ChannelScreen with injecting a reaction-related composable.

You can customize reaction-related events such as onEmojiReactionClick, onEmojiReactionLongClick, and onEmojiReactionMoreButtonClick in the MessageItemFactory. This allows you to handle reactions in a way that suits your application needs, such as showing a list of users who reacted when a reaction is clicked.

@Composable
fun CustomReactionChannelScreen(
    navController: NavController,
    channelUrl: String
) {
    val context = LocalContext.current
    val customDialogState = rememberChannelDialogState()
    val customViewModel = viewModel<ChannelViewModel>(
        factory = ChannelViewModel.factory(ChannelViewModelParams(channelUrl))
    )
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl,
        dialogState = customDialogState,
        viewModelContract = customViewModel,
        messageItem = { prevMessage, message, nextMessage, onMessageClick, onMessageLongClick ->
            MessageItemFactory(
                prevMessage,
                message,
                nextMessage,
                onMessageClick = onMessageClick,
                onMessageLongClick = onMessageLongClick,
                onEmojiReactionClick = { message, key, isAdded ->
                    Toast.makeText(context, "Custom Reaction", Toast.LENGTH_SHORT).show()
                    customViewModel.toggleReaction(message, key, isAdded)
                },
                onEmojiReactionLongClick = { message, reaction -> customDialogState.showEmojiReactedUserDialog(message, reaction) },
                onEmojiReactionMoreButtonClick = { message -> customDialogState.showEmojiListDialog(message) },
            )
        }
    )
}

You can also customize the reaction composable by providing your own implementation of the CustomEmojiReactionList in the MessageItemFactory. This allows you to change how reactions are displayed, such as adding an additional action or functionality to the reaction emoji list.

@Composable
fun CustomReactionChannelScreen(
    navController: NavController,
    channelUrl: String
) {
    val customDialogState = rememberChannelDialogState()
    val customViewModel = viewModel<ChannelViewModel>(
        factory = ChannelViewModel.factory(ChannelViewModelParams(channelUrl))
    )
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl,
        dialogState = customDialogState,
        viewModelContract = customViewModel,
        messageItem = { prevMessage, message, nextMessage, onMessageClick, onMessageLongClick ->
            MessageItemFactory(
                prevMessage,
                message,
                nextMessage,
                onMessageClick = onMessageClick,
                onMessageLongClick = onMessageLongClick,
                onEmojiReactionClick = { message, key, isAdded -> customViewModel.toggleReaction(message, key, isAdded) },
                onEmojiReactionLongClick = { message, reaction -> customDialogState.showEmojiReactedUserDialog(message, reaction) },
                onEmojiReactionMoreButtonClick = { message -> customDialogState.showEmojiListDialog(message) },
                myTextMessageItem = { userMessage ->
                    MyTextMessageItem(
                        message = userMessage,
                        onMessageClick = onMessageClick,
                        onMessageLongClick = onMessageLongClick,
                        emojiReactionList = {
                            CustomEmojiReactionList(
                                message = userMessage,
                                useMoreButton = true,
                                onEmojiReactionClick = { message, key, isAdded ->
                                    customViewModel.toggleReaction(it, key, isAdded)
                                },
                                onEmojiReactionLongClick = { message, reaction ->
                                    customDialogState.showEmojiReactedUserDialog(it, reaction)
                                },
                                onEmojiReactionMoreButtonClick = { customDialogState.showEmojiListDialog(it) }
                            )
                        }
                    )
                }
            )
        }
    )
}

@Composable
fun CustomEmojiReactionList(
    message: UikitUserMessage,
    useMoreButton: Boolean,
    onEmojiReactionClick: (UikitBaseMessage, String, Boolean) -> Unit,
    onEmojiReactionLongClick: (UikitBaseMessage, UiKitReaction) -> Unit,
    onEmojiReactionMoreButtonClick: (UikitBaseMessage) -> Unit
) {
    // Custom implementation of EmojiReactionList.
}