UIKit React v3
UIKit React
UIKit
React
Home
/
UIKit
/
React
This is the new Docs for UIKit v3 for React. To see the previous Docs, click here.

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.


Limitations

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.

How to use

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

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import Channel from "@sendbird/uikit-react/Channel";

const APP_ID = '';
const USER_ID = '';
const OwnAppComponent = () => {
    const [channelUrl, setChannelUrl] = useState('');
    ...
    return (
        <div>
            <SendbirdProvider
                appId={APP_ID}
                userId={USER_ID}
                ...
            >
                <Channel
                    channelUrl={channelUrl}
                    ...
                    replyType="THREAD"
                />
            {/* ChannelList, ChannelSettings... */}
            </SendbirdProvider>
        </div>
    );
};

Set ThreadReplySelectType

You have the option to set ThreadReplySelectType to PARENT or THREAD. This enum function allows you to direct your users to view either the parent message or the message thread when they click on a reply button in the group channel view.

import Channel from "@sendbird/uikit-react/Channel";
import { ThreadReplySelectType } from "@sendbird/uikit-react/Channel/context";

<Channel
  threadReplySelectType={ThreadReplySelectType.THREAD}
/>
or
<Channel
  threadReplySelectType={ThreadReplySelectType.PARENT}
/>

Reply to messages

Users can reply to messages in a group or supergroup channel through the Channel module. To do so, click on the more options icon button next to the message you wish to reply to in the MessageList component of Channel module. Once you click Reply in thread, you can start replying in a new thread in the Thread module. 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 user message or file message.

Message item menu

The Message item menu contains an Emoji reaction bar, a Copy button, and a Reply in thread button. To view the menu, click on the more options icon button next to to the message you wish to reply to. Then, select Reply in thread in the menu to reply to the selected message in a new thread.

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.

Customize the UI for threads in Message item menu

The UI for threads in the Message item menu can be customized through stringSet.

String set for Message item menu

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

KeyStringDescription

MESSAGE_MENU__THREAD

Reply in thread

A text for the Reply in thread button in the Message item menu.

Thread

Once the current user selects Reply in thread in the Message menu, they can start a new thread in the Thread module. The thread module has six UI components: ThreadUI, ThreadHeader, ParentMessageInfo, ThreadList, ThreadListItem, and ThreadMessageInput.

ThreadHeader shows the title of the thread view, 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 clicks the button, they can view the corresponding parent message in the Channel module.

In ParentMessageInfo, the parent message of the thread is displayed and below the component, in ThreadList and ThreadListItem, users can see the number of replies in the thread and a list of all replies to that message are shown in a chronological order. ThreadMessageInput is where 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 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 is Reply to thread. If the parent message has no existing replies, the placeholder text is Reply in thread.

Customize ThreadUI

The UI for threads in the ThreadHeader component and the ThreadMessageInput component of the ThreadUI can be customized through stringSet.

String set for thread

The following table shows customizable properties of stringSet that appear in the ThreadHeader and ThreadMessageInput components.

KeyStringDescription

THREAD__HEADER_TITLE

Thread

A text for the title of the thread view.

THREADINPUTREPLY_IN_THREAD

Reply in thread

A placeholder text in the ThreadMessageInput component that indicates that the parent message of the thread has no existing replies.

THREADINPUTREPLY_TO_THREAD

Reply to thread

A placeholder text in the ThreadMessageInput component that indicates that the parent message of the thread already has one or more replies.


Show replies

Users can view reply messages in both the Thread module and Channel module because all replies sent to a thread also get sent to the channel automatically. In the Thread module, replies are shown chronologically in the ThreadList 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 Channel module, the thread replies sent to the channel are displayed the same way as quoted messages in quote reply mode.

Thread list

In thread view, the parent message and its reaction emojis are displayed in the ParentMessageInfo component. Meanwhile in ThreadList and ThreadListItem, the number of replies in the thread 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.

Customize the UI in thread list

The UI for threads in ThreadList and ThreadListItem of ThreadUI can be customized through stringSet.

String set for thread list

The following table shows customizable properties of stringSet that appear in ThreadList and ThreadListItem.

KeyStringDescription

THREAD__THREAD_REPLY

reply

A text that indicates that a parent message has one reply in the thread.

THREAD__THREAD_REPLIES

replies

A text that indicates that a parent message has more than one replies in the thread.

MESSAGE_MENU__OPEN_IN_CHANNEL

View in channel

A text in the Message menu for a parent message that allows the user to view the parent message in the Channel module.

Group channel

In ChannelUI, all parent messages with a thread have a ThreadReplies component that displays the number of thread replies and up to four profile images of users who responded in the thread. The ThreadReplies 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 QuotedMessge component of the Channel module, 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 MessageItem component, while parentMessage is used to render the QuotedMessage component.

Customize the UI in group channel

You can render a custom view of replies through the renderMessage property of Channel. By using the message parameter of renderMessage, you can also access the parentMessage property inside message. Through the parentMessage property, you can customize the QuotedMessage component. Refer to the code below:

<Channel
    renderMessage={({ message, chainTop, chainBottom }) => {
        const { currentGroupChannel } = useChannelContext()
        const { parentMessage } = message;
        // `parentMessage` can be a type of UserMessage or FileMessage.
        const { userId, nickname, profileUrl } = sender;
        if(condition) {
            return (
                <div ... />
            );
        }
        return null;
    }}
/>

String set for group channel

The following table shows customizable properties of stringSet that appear in the ChannelUI.

KeyStringDescription

CHANNEL__THREAD_REPLY

reply

A text that indicates that a parent message has one reply in the thread.

CHANNEL__THREAD_REPLIES

replies

A text that indicates that a parent message has more than one replies in the thread.

QUOTED_MESSAGE__CURRENT_USER

You

A text that indicates the current user.

QUOTED_MESSAGE__REPLIED_TO

replied to

A text that indicates to whom a user replied to.

CHANNEL__THREAD_OVER_MAX

99+ replies

A text that indicates that a parent message has more than 99 replies in the thread.

QUOTED_MESSAGE__UNAVAILABLE

Message unavailable

A text that indicates that the current user can't view the parent message because it was sent before the user joined the channel.