Chat UIKit React v2
Chat UIKit React
Chat UIKit
React
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Message threading

Copy link

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.


Limitations

Copy link

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.

How to use

Copy link

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>
  );
};

Reply to messages

Copy link

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.

Message item menu

Copy link

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.

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.

Customize the UI for message threading in Message item menu

Copy link

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

stringSet for Message item menu

Copy link

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

KeyStringDescription

MESSAGE_MENU__REPLY

Reply

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

Quote message input

Copy link

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.

Customize the UI for quote message input

Copy link

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>
    );
  }}
/>

stringSet for quote message input

Copy link

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

KeyStringDescription

QUOTE_MESSAGE_INPUT__REPLY_TO

Reply to

A text that indicates to whom the current user is replying to.

QUOTE_MESSAGE_INPUT__FILE_TYPE_IMAGE

Photo

A text that indicates that the attached file type is an image.

QUOTE_MESSAGE_INPUT__FILE_TYPE_GIF

GIF

A text that indicates that the attached file type is a GIF.

QUOTE_MESSAGE_INPUT__FILE_TYPE_VIDEO

Video

A text that indicates that the attached file type is a video.


Show replies

Copy link

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.

Customize the UI for quoted message

Copy link

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;
  }}
/>

stringSet for quoted message

Copy link

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

KeyStringDescription

QUOTED_MESSAGE__REPLIED_TO

Replied to

A text that indicates to whom a user replied to.