Threads

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. Sendbird UIKit supports two reply types: quote reply and threads. Threads allow users to start a separate conversation in a new thread screen when responding to a message. The reply message is also sent to the channel in the message list component.

To view the image in full screen, click on the

Threads currently have the following limitations:

• UIKit message threading is available for group channels and supergroup channels only.
• Sendbird UIKit only supports 1-depth threads, meaning you can't reply to messages that are already thread replies to a parent message.

To turn on thread mode, set the reply filter to thread:

import { SendbirdUIKitContainer } from "@sendbird/uikit-react-native";

const App = () => {
  return (
    <SendbirdUIKitContainer
      appId={APP_ID}
      uikitOptions={{
        groupChannel: {
          replyType: 'thread',
        },
      }}
    />
  );
};

You have the option to set threadReplySelectType to parent or thread. This function allows you to direct your users to view either the parent message or the message thread when they tap on a reply in the group channel screen.

import { SendbirdUIKitContainer } from "@sendbird/uikit-react-native";

const App = () => {
  return (
    <SendbirdUIKitContainer
      appId={APP_ID}
      uikitOptions={{
        groupChannel: {
          threadReplySelectType: 'thread', // 'thread', 'parent'
        },
      }}
    />
  );
};

Users can reply to messages in a group or supergroup channel. To do so, long tap on the message you wish to reply to in the messageListComponent of GroupChannelModule. Then, a message menu appears. Once the Reply in thread button is selected, users can start replying in a new thread in GroupChannelThreadModule. A message that already has a reply is called a parent message and the replied message is called a reply. Both parent messages and replies can be either a user message or file message.

The Message menu contains an Emoji reaction bar, a Copy button, and a Reply in thread button. To view the menu, long tap on a message in the channel view. Then, tap Reply in thread in the menu to reply to the selected message in a new thread. If you reply with a user message, the sendUserMessage() method of GroupChannelThreadFragment is invoked and a new thread is created. When replying with a file message, the sendFileMessage() method of GroupChannelThreadFragment is invoked.

//

To view the image in full screen, click on the

Like quote reply, threads only allow 1-depth threads. This means that users can’t reply to messages that are already thread replies to a parent message. The Reply in thread button of a message that’s already a thread reply appears as deactivated. Similarly, the Delete button of a parent message that has one or more replies in a thread appears as deactivated. To delete the parent message, its thread replies must be deleted first.

The UI for threads in the Message menu can be customized through the string resource and icon resource.

The following table shows a customizable property of StringSet that appears in the Message menu.

The following table shows a customizable reply in thread icon.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['thread'] = require('your_icons/icon-thread.png');

Once the current user taps Reply in thread in the Message menu, they can start a new thread in the GroupChannelThreadModule. The message thread screen is composed of four components: message thread header, thread list, message thread input, and thread list status.

To view the image in full screen, click on the

The header component shows the title of the message thread screen, which says Thread by default. Below the title, there's a text button that indicates the name of the channel that the thread belongs to. When a user taps on the button, they can view the corresponding parent message in the group channel screen.

In the thread list component, the parent message and its replies are displayed in a chronological order while in the message thread input component, the user can send either a text message or a file message as a reply to the parent message. The placeholder text in the message thread input field changes depending on whether the parent message has an existing thread or not. If the parent message already has one or more thread replies, the default placeholder text shows as Reply to thread. If the parent message has no existing replies, the placeholder text shows as Reply in thread.

You can customize the UI for threads in GroupChannelThreadHeader and GroupChannelThreadInput of GroupChannelThreadModule using the string resource.

The following table shows customizable properties of StringSet that appear in the GroupChannelThreadHeader and GroupChannelThreadInput components.

Users can view reply messages in both the GroupChannelThreadModule and GroupChannelModule because all replies sent to a thread also get sent to the channel automatically. In the GroupChannelThreadModule, replies are shown chronologically in the GroupChannelThreadMessageList component with the current user’s replies shown on the right and channel members’ replies shown on the left of the view by default. In the GroupChannelModule, the thread replies sent to the channel are displayed the same way as quoted messages in quote reply mode.

In the message thread screen, the parent message is displayed below the GroupChannelThreadHeader of GroupChannelThreadModule. Its reaction emojis and the number of replies in the thread are also shown below. In the GroupChannelThreadMessageList of GroupChannelThreadModule, the parent message and a list of all replies to that message are shown in a chronological order. Both the parent message and the reply can be a text or file message. By default, the replies sent by the current user are displayed on the right side of the screen and the message bubble is purple.

To view the image in full screen, click on the

You can customize the UI for threads in the GroupChannelThreadMessageList of GroupChannelThreadModule when a reply is sent to the thread.

The number of thread repiles shown in the thread list component and the error text displayed in the status component can be customized through the string resource.

interface StringSet {
    GROUP_CHANNEL_THREAD: {
         REPLY_COUNT: (
          replyCount: number,
          maxReplyCount?: number,
        ) => string;
    };
}

In the group channel screen, all parent messages with a thread have a GroupChannelMessageReplyInfo component that displays the number of thread replies and up to four profile images of users who responded in the thread. The GroupChannelMessageReplyInfo is a UI component that doesn't inherit a provider and can be used freely between different modules.

Since all replies sent to a thread also get sent to the channel automatically, the thread replies are shown in the channel as quoted messages in quote reply mode. Users can view these replies through the GroupChannelMessageParentMessage component, which shows the parent message and a text that indicates a user replied to another channel member. For all reply messages, a parentMessage property exists within the message property. message is used to render the GroupChannelMessageRenderer component, while parentMessage is used to render the GroupChannelMessageParentMessage component.

To view the image in full screen, click on the

You can customize the UI for threads in GroupChannelMessageReplyInfo and GroupChannelMessageRenderer using the string resource and icon resource.

The following table shows customizable properties of StringSet that appear in the GroupChannelModule.

interface StringSet {
    LABELS: {
        REPLY_FROM_SENDER_TO_RECEIVER: (
          replyMessage: SendbirdUserMessage | SendbirdFileMessage,
          parentMessage: SendbirdUserMessage | SendbirdFileMessage,
          currentUserId?: string,
        ) => string;
        MESSAGE_UNAVAILABLE: string;
    };
    GROUP_CHANNEL_THREAD: {
         REPLY_COUNT: (
          replyCount: number,
          maxReplyCount?: number,
        ) => string;
    };
}

The following table shows the icon to the left of the text in GroupChannelMessageRenderer, which can be customized through the icon resource.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['reply-filled'] = require('your_icons/icon-reply-filled.png');