Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Quote reply

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. Sendbird UIKit supports two reply types: quote reply and threads. Quote reply allows users to exchange and view both non-reply messages and replies in one channel view.


Limitations

Copy link

Quote reply currently has 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 only reply to the original message.

How to use

Copy link

To turn on quote reply mode, set the reply filter to QUOTE_REPLY:

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="QUOTE_REPLY"
                />
            {/* ChannelList, ChannelSettings... */}
            </SendbirdProvider>
        </div>
    );
};

Reply to messages

Copy link

Users can reply to each other's messages through the Channel module. The option to reply can be found in the Message item menu. Once they click Reply, they can start quote replying in the MessageInput 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 button 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 the 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 quote reply in Message item menu

Copy link

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

String set 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 in the QuoteMessageInput component above the MessageInput component of Channel. Type a message in the input field and Enter to send. QuoteMessageInput is a UI component that doesn't inherit a provider and can be used freely between different modules.

If the user selects 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>
        );
    }}
/>

String set 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 module. For all reply messages, a parentMessage property exists within the message property. The message is used to render the MessageItem component, while parentMessage is used to render the QuotedMessage component. The QuoteMessage is a UI component that doesn't inherit a provider and can be used freely between different modules.

Customize the UI for quoted message

Copy link

You can render a custom view of quoted messages 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 { parentMessage } = message;
        const { currentGroupChannel } = useChannelContext()
        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;
    }}
/>

String set for quoted message

Copy link

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

KeyStringDescription

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.

QUOTED_MESSAGE__UNAVAILABLE

Message unavailable

A text that indicates that quoted message is unavailable.