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 types of message threading: quote reply and threads. Quote reply allows users to exchange and view all messages and replies together in the channel view.
Limitations
Message threading 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
To turn on quote reply mode, set the reply type to quoteReply:
Reply to messages
Users can reply to each other's messages in a group channel through the SBUGroupChannelViewController class. The list component of SBUGroupChannelViewController allows the users to tap and hold the message they wish to reply to. A Message menu will appear and once they tap Reply, they can start quote replying using SBUMessageInputView and SBUQuoteMessageInputView. A message that already has a reply is called 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 menu contains an Emoji reaction bar, a Copy button, and a Reply button. To view the menu, long tap on a message in channel view. Then, tap Reply in the menu to quote reply to the selected message. The sendUserMessage(text:parentMessage:) method of SBUGroupChannelViewModel is invoked and the selected message becomes a quoted message.
The Reply button of a message that is already a reply appears as deactivated because 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.
The UI for quote reply in the Message menu can be customized through SBUStringSet and SBUIconSet.
SBUStringSet
The following table shows a customizable property of SBUStringSet that appears in the Message menu. The SBUStringSet is a set of strings used to compose a view. You need to modify the stringSet values in advance if you want to make changes to the view.
| Property name | Description |
|---|---|
Reply | A text for the Reply button in the Message menu. |
SBUIconSet
The following table shows a customizable reply message icon.
| Icon name | Image | Description |
|---|---|---|
iconReply | An icon used to indicate Reply. |
Quote message input
The startQuoteReplyMode(message:) method of the SBUMessageInputView class is called when a user chooses to Reply in the Message menu. Then, a preview of the quoted message is displayed through SBUQuoteMessageInputView above the input component of SBUGroupChannelViewController. Type a message in the input field and Send. Then, the sendUserMessage(parentMessage:) method of SBUGroupChannelViewModel is called to send the reply message.
If the user closes the quoted message in SBUQuoteMessageInputView, the endQuoteReplyMode() method of SBUMessageInputView is called and the preview of the quoted message disappears.
Customize reply methods of SBUMessageInputView
The following table lists customizable methods of SBUMessageInputView for quote reply.
| Method | Description |
|---|---|
startQuoteReplyMode(message:) | Access level: public |
endQuoteReplyMode() | Access level: public |
setMode(_:message:) | Access level: open |
Customize SBUQuoteMessageInputView
The following tables show customizable properties and methods of SBUQuoteMessageInputView to modify the UI of the quoted message input view.
List of properties of SBUQuoteMessageInputView
| Property name | Type | Description |
|---|---|---|
replyToLabel | UILabel | The |
fileMessagePreview | UIImageView | The |
userMessagePreview | UILabel | The |
closeReplyButton | UIButton | The |
contentStackView | UIStackView | The |
replyLabelStackView | UIStackView | The |
List of methods of SBUQuoteMessageInputView
| Method | Description |
|---|---|
configure(with:) | Access level: open |
Customize SBUQuoteMessageInputViewParams
The following table lists parameters that you can configure to customize the quote message input view.
| Parameter name | Type | Description |
|---|---|---|
message | String | The text of the message that the current user is replying to. |
quotedMessageNickname | String | The nickname of the user that sent the quoted message. |
replyToText | String | The text of the title in the quote message input view. By default, the text says |
isFileType | Bool | Determines whether the type of |
fileType | String | The file type of |
fileName | String | The file name of |
Theme
The SBUQuoteMessageInputView class uses SBUMessageInputTheme to customize various theme components. The following table shows the properties of SBUMessageInputTheme.
SBUMessageInputTheme
| Category | Property | Description |
|---|---|---|
fileMessagePreview | quotedFileMessageThumbnailTintColor | The color of the icon indicating the file type of the quoted message. |
fileMessagePreview | quotedFileMessageThumbnailBackgroundColor | The background color of the quoted file message preview. |
replyToLabel | replyToTextFont | The text font of the title in the quote message input view that indicates to whom the current user is replying to. |
replyToLabel | replyToTextColor | The text color of the title in the quote message input view that indicates to whom the current user is replying to. |
userMessagePreview | quotedMessageTextFont | The text font of the quoted message preview. |
userMessagePreview | quotedMessageTextColor | The text color of the quoted message preview. |
closeReplyButton | closeReplyButtonColor | The color of the button in the top right corner of the quote message input view that closes |
divider | channelViewDividerColor | The color of the line that separates the list component of |
Customize SBUStringSet
The following table shows a customizable property of SBUStringSet that appears in SBUQuoteMessageInputView.
| Property name | Description |
|---|---|
MessageInput_Reply_To | A text for quote replying to a message in the |
Show replies
Users can view all quoted messages in the channel through SBUQuotedBaseMessageView, SBUQuotedUserMessageView, and SBUQuotedFileMessageView. Both SBUQuotedUserMessageView and SBUQuotedFileMessageView inherit the properties and methods of SBUQuotedBaseMessageView. The SBUQuotedBaseMessageView only shows the quoted message and the repliedToLabel as all reply messages are considered individual message cells that inherit the SBUBaseMessageCell class.
There are two types of quoted messages:
- User message: When the type of the quoted message is
UserMessage. - File message: When the type of the quoted message is
FileMessage.
When the quoted message is a user message, the message is displayed through SBUQuotedUserMessageView. When the quoted message is a file message, the message is shown through SBUQuotedFileMessageView. If you wish to customize the quoted message view, you must inherit the SBUQuotedBaseMessageView class for both message types.
Customize SBUQuotedBaseMessageView
The following tables show customizable properties and methods of SBUQuotedBaseMessageView to modify the UI of the quoted message view.
List of properties of SBUQuotedBaseMessageView
| Property name | Type | Description |
|---|---|---|
theme | SBUMessageCellTheme | SBUMessageCellTheme |
messagePosition | MessagePosition | The location of the quoted message view. |
quotedMessageNickname | String | The nickname of the user that sent the quoted message. |
replierNickname | String | The nickname of the user that replied to the quoted message. |
text | String | The text of the quoted message. |
repliedToText | String | The text that indicates to whom a member of the channel replied to. |
repliedToLabel | UILabel | The |
repliedIconView | UIImageView | The |
repliedToStackView | UIStackView | The |
messageStackView | UIStackView | The |
contentStackView | UIStackView | The |
List of methods of SBUQuotedBaseMessageView
| Method | Description |
|---|---|
didTapQuotedMessageView(sender:) | Access level: open |
configure(with:) | Access level: open |
Customize SBUQuotedBaseMessageViewParams
The following table lists parameters that you can configure to customize the quoted message view.
| Parameter name | Type | Description |
|---|---|---|
messageId | String | Specifies the ID of the quoted message. |
messagePosition | MessagePosition | Specifies the location of the quoted message view. |
quotedMessageNickname | String | Specifies the nickname of the user that sent the quoted message. |
replierNickname | String | Specifies the nickname of the user that replied to the quoted message. |
text | String | Specifies the text of the quoted message. |
useQuotedMessage | Bool | Determines whether to show the quoted message view. If |
urlString | String | Specifies the string value of a quoted message that is a URL file type. |
fileName | String | Specifies the file name of the quoted message. |
fileType | String | Specifies the file type of the quoted message. |
quotedMessageCreatedAt | Int64 | Specifies the sent time of the quoted message. |
messageCreatedAt | Int64 | Specifies the sent time of a regular, non-reply or non-quoted message. |
joinedAt | Int64 | Specifies the time that the current user joined the channel. |
Customize SBUQuotedUserMessageView
The following tables show customizable properties and methods that only apply to the UI of quoted user messages.
List of properties of SBUQuotedUserMessageView
| Property name | Type | Description |
|---|---|---|
quotedMessageLabel | UILabel | The |
List of methods of SBUQuotedUserMessageView
| Method | Description |
|---|---|
configure(with:) | Access level: open |
Customize SBUQuotedFileMessageView
The following tables show customizable properties and methods that only apply to the UI of quoted file messages.
List of properties of SBUQuotedFileMessageView
| Property name | Type | Description |
|---|---|---|
urlString | String | The string value of a quoted message that is a URL file type. |
fileType | MessageFileType | The file type of the quoted message. |
List of methods of SBUQuotedFileMessageView
| Method | Description |
|---|---|
configure(with:) | Access level: open |
Theme
To display the quoted message view, SBUQuotedBaseMessageView, SBUQuotedUserMessageView, and SBUQuotedFileMessageView all use SBUMessageCellTheme in the SBUTheme class. The following table shows the properties of SBUMessageCellTheme for quote reply.
SBUMessageCellTheme
| Category | Property | Description |
|---|---|---|
QuotedBaseMessageView | quotedMessageBackgroundColor | The background color of the quoted message. |
QuotedFileMessageView | quotedFileMessageThumbnailColor | The color of the icon indicating the file type of the quoted message. If the file is an image, the tint color will be the image thumbnail. |
QuotedUserMessageView | quotedMessageTextColor | The text color of the quoted message. |
QuotedUserMessageView | quotedMessageTextFont | The text font of the quoted message. |
repliedIconView | repliedIconColor | The color of |
repliedToLabel | repliedToTextColor | The text color of |
repliedToLabel | repliedToTextFont | The text font of |
Customize SBUStringSet
The following table shows customizable properties of SBUStringSet that appears in the quoted message view.
| Property name | Description |
|---|---|
Message_You | A text that refers to the current user in the |
Message_Replied_To | A text in the |
Customize SBUIconSet
The following table shows a customizable icon in the quoted message view.
| Icon name | Image | Description |
|---|---|---|
iconReplied | An icon indicating that a user replied to another user's message. |
Event delegate for quote reply
The quoted message view supports an event delegate for tap gestures. When the current user taps on the quoted message, the didTapQuotedMessageView(_:) method of SBUQuotedMessageViewDelegate is called and the screen scrolls to the quoted message cell in the channel view.
Customize didTapQuotedMessageView(_:)
You can customize the action by overriding the didTapQuotedMessageView(sender:) method in the group channel module's listComponent.
| Method | Description |
|---|---|
didTapQuotedMessageView(sender:) | Access level: public |