Quote reply

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.

To view the image in full screen, click on the

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.

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

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.

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.

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 quote reply 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 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.

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 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.

To view the image in full screen, click on the

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

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