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 |