Message threading

Message threading is a feature that allows users to reply to each other's messages in a channel. Users can ask questions, give feedback or add context to a specific message without interrupting the conversation flow. A message thread refers to a group of messages and their replies. Currently, Sendbird UIKit only supports quote reply type of message threading where users' messages and replies are all shown in the channel view.

To view the image in full screen, click on the

Message threading currently has the following limitations:

• UIKit message threading is available for group channels only.
• Quote reply is the only reply type that Sendbird UIKit provides.
• Sendbird UIKit only supports 1-depth threads, meaning you can't reply to a quote reply message.

To enable message threading, set the reply filter to quote reply mode:

// Turn on the quote reply mode.
SendBirdUIKit.setReplyType(ReplyType.QUOTE_REPLY);
// Turn off the quote reply mode.
SendBirdUIKit.setReplyType(ReplyType.NONE);

Users can reply to messages in a group channel through the ChannelFragment class. The message list region of ChannelFragment will allow the users to press and hold the message they wish to reply to. A Message menu will appear and once they tap Reply, they can start quote replying using the QUOTE_REPLY mode of MessageInputView. A message that already has a reply is called a quoted message and the replied message is called a reply. Both quoted messages and replies can be either user messages or file messages.

The Message menu contains an Emoji reaction bar, a Copy button, and a Reply button. To view the menu, long tap on a message in channel view. Then, tap Reply in the menu to quote reply to the selected message. The sendUserMessage(UserMessageParams params) method of ChannelFragment is invoked and the selected message becomes a quoted message.

The Reply button of a message that is already a reply appears as deactivated because Sendbird UIkit only supports 1-depth replies.

To view the image in full screen, click on the

The Delete button of a quoted message that has one or more replies appears as deactivated. To delete the quoted message, its replies must be deleted first.

To view the image in full screen, click on the

The UI for quote reply in the Message menu can be customized through StringSet and IconSet.

The Reply text in the Message menu can be customized through StringSet. The StringSet is a set of strings used to compose a view. It’s a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_channel_anchor_reply">Reply</string>
</resources>

The following table shows a customizable reply message icon.

Once the current user chooses to Reply in the Message menu, they will be able to start quote replying through the QUOTE_REPLY mode of MessageInputView. The preview of the quoted message is displayed above the message input field region of ChannelFragment. Type a message in the input field and Send. Then, the sendUserMessage(UserMessageParams params) method of ChannelFragment is called to send the reply message.

If the user closes the quoted message in MessageInputView, they can end QUOTE_REPLY mode and the preview of the quoted message disappears.

To view the image in full screen, click on the

You can customize the UI for message input view using StyleSet, StringSet, and IconSet.

To customize the style of items in the message input view, you have to change the UIKit-defined style values in the res/values/style.xml file as shown below.

<style name="Custom" parent="SendBird">
    <item name="sb_message_input_style">@style/CustomMessageInput</item>
</style>

<style name="CustomMessageInput" parent="Widget.SendBird.MessageInput">
    ...

    <item name="sb_message_input_quote_reply_title_text_appearance"></item>
    <item name="sb_message_input_quoted_message_text_appearance"></item>
    <item name="sb_message_input_quote_reply_right_icon"></item>
    <item name="sb_message_input_quote_reply_right_icon_tint"></item>
    <item name="sb_message_input_quote_reply_right_icon_background"></item>
</style>

The text of the title in the message input view can be customized through StringSet. The StringSet is a set of strings used to compose a view. It’s a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_reply_to">Reply to %s&#8230;</string>
</resources>

The icon in the upper right corner of the message input view can be customized through IconSet.

Users can view all quoted messages in the channel through BaseQuotedMessageView, MyQuotedMessageView, and OtherQuotedMessageView. Both MyQuotedMessageView and BaseQuotedMessageView inherit the properties and methods of BaseQuotedMessageView. The BaseQuoteMessageView only shows the quoted message and the title that indicates a user replied to another user as all reply messages are considered individual messages in the channel that inherit BaseViewHolder<BaseMessage>.

There are two types of quoted message views in a channel: MyQuotedMessageView and OtherQuotedMessageView. When the current user replies to a message in the channel, the quoted message is shown using MyQuotedMessageView. When another user in the channel replies to a message in the channel, the quoted message is displayed through OtherQuotedMessageView.

To view the image in full screen, click on the

You can customize the UI for quoted messages in a channel using StyleSet, StringSet, and IconSet.

To customize the style of items in the quoted message view, you have to change the UIKit-defined style values in the res/values/style.xml file as shown below.

<style name="Custom" parent="SendBird">
    <item name="sb_my_quoted_message_style">@style/CustomMyQuotedMessage</item>
    <item name="sb_other_quoted_message_style">@style/CustomOtherQuotedMessage</item>
</style>

<style name="CustomMyQuotedMessage" parent="Widget.SendBird.MyQuotedMessageView">
    <item name="sb_quoted_message_title_icon"></item>
    <item name="sb_quoted_message_title_icon_tint"></item>
    <item name="sb_quoted_message_title_text_appearance"></item>
    <item name="sb_quoted_message_background"></item>
    <item name="sb_quoted_message_background_tint"></item>
    <item name="sb_quoted_message_file_icon_tint"></item>
    <item name="sb_quoted_message_text_appearance"></item>
</style>

<style name="CustomOtherQuotedMessage" parent="Widget.SendBird.OtherQuotedMessageView">
    <item name="sb_quoted_message_title_icon"></item>
    <item name="sb_quoted_message_title_icon_tint"></item>
    <item name="sb_quoted_message_title_text_appearance"></item>
    <item name="sb_quoted_message_background"></item>
    <item name="sb_quoted_message_background_tint"></item>
    <item name="sb_quoted_message_file_icon_tint"></item>
    <item name="sb_quoted_message_text_appearance"></item>
</style>

The texts in the quoted message view can be customized through StringSet. The StringSet is a set of strings used to compose a view. It’s a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_you">You</string>
    <string name="sb_text_reply_to">Reply to %s</string>
    <string name="sb_text_replied_to">%s replied to %s</string>
    <string name="sb_text_error_original_message_not_found">Couldn\'t find the original message for this reply.</string>
</resources>

The icon to the left of the title in the quoted message view can be customized through IconSet.

The quoted message view supports an event handler for tap gestures. When the current user taps or presses and holds the quoted message, the onListItemClick() or onListItemLongClick() method of ChannelFragment is called and the identifier becomes StringSet.QuoteReply.

You can customize the action by overriding the onListItemClick() and onListItemLongClick() methods in the ChannelFragment class. To do so, follow the guide below:

1. Create a new fragment that inherits ChannelFragment as a subclass.
2. Override onListItemClick() and onListItemLongClick() methods in the fragment.
3. Apply the customized fragment by using the ChannelFragment.Builder().setCustomChannelFragment() method.

public class ChannelFragment {
    @Override
    public void onListItemClick(View view, String identifier, int position, BaseMessage message) {
        switch (identifier) {
            case StringSet.Chat:
                // ClickableViewType.Chat
                break;
            case StringSet.Profile:
                // ClickableViewType.Profile
                break;
            case StringSet.QuoteReply:
                // ClickableViewType.Reply
                break;
        }
    }

    @Override
    public void onListItemLongClick(View itemView, String identifier, int position, BaseMessage message) {
        switch (identifier) {
            case StringSet.Chat:
                // ClickableViewType.Chat
                break;
            case StringSet.Profile:
                // ClickableViewType.Profile
                break;
            case StringSet.QuoteReply:
                // ClickableViewType.Reply
                break;
        }
    }
}