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:

import { SendBirdProvider, Channel } from 'sendbird-uikit';
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="QUOTE_REPLY"
        />
      {/* ChannelList, ChannelSettings... */}
      </SendBirdProvider>
    </div>
  );
};

Users can reply to each other's messages through the Channel component. The option to reply can be found in the Message item menu. Once they click Reply, they can start quote replying in the QuoteMessageInput component. 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 item menu contains a Copy button and a Reply button. To view the menu, click on the More options icon next to the message you wish to reply to. Then, choose Reply to quote reply to the selected 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 message threading in the Message item menu can be customized through stringSet.

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

Once the current user chooses to Reply in the Message item menu, they will be able to start quote replying through the QUOTE_REPLY mode of QuoteMessageInput. The preview of the quoted message is displayed above the messageInput component of Channel. Type a message in the input field and Enter to send.

If the user taps the icon for Close on the top right corner of QuoteMessageInput, 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 render a custom view of the quote message input component by using the quotedMessage parameter of renderMessageInput. Refer to the code below.

<Channel
  ...
  renderMessageInput={(props) => {
    const {
      channel,
      user,
      disabled,
      quotedMessage,
    } = props;
    return (
      <div className="your-custom-message-input-component">
        {/* Use quoted message here */}
      </div>
    );
  }}
/>

The following table shows a customizable property of stringSet that appears in the quote message input component.

Users can view all quoted messages and replies in a group channel through the Channel component. 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.

To view the image in full screen, click on the

You can render a custom view of quoted messages through the renderCustomMessage property of Channel. By using the message parameter of renderCustomMessage, 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
  renderCustomMessage={(message, currentGroupChannel, chainTop, chainBottom) => {
    const { parentMessage } = message;
    const { messageType, message, name, url, sender, type } = parentMessage;
    // `parentMessage` can be a type of UserMessage or FileMessage.
    const { userId, nickname, profileUrl } = sender;
    if(condition) {
      return (
        <div ... />
      );
    }
    return null;
  }}
/>

The following table shows a customizable property of stringSet that appears in the quoted message.