Message threading
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
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
To enable message threading, set the reply type to quote reply mode:
Reply to messages
Users can reply to each other's messages in a group channel through the SBUChannelViewController
class. The List component of SBUChannelViewController
will allow the users to press 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:quoteMessageId:)
method of SBUChannelViewController
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 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.
The UI for message threading 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(_:)
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 messageInput component of SBUChannelViewController
. Type a message in the input field and Send. Then, the sendUserMessage(text:quoteMessageID:)
method of SBUChannelViewController
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 message threading.
Method | Description |
---|---|
startQuoteReplyMode(_:) | 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 | View (Text) | The |
fileMessagePreview | View (Image) | The |
userMessagePreview | View (Text) | The |
closeReplyButton | View (Button) | The |
contentStackView | View (Layout) | The |
replyLabelStackView | View (Layout) | 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 SBUMessageInputViewTheme
to customize various theme components. The following table shows the properties of SBUMessageInputViewTheme
.
SBUMessageInputViewTheme
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
. 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 |
---|---|
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
SBDUserMessage
. - File message: When the type of the quoted message is
SBDFileMessage
.
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 | View (Text) | The |
repliedIconView | View (Image) | The |
repliedToStackView | View (Layout) | The |
messageStackView | View (Layout) | The |
contentStackView | View (Layout) | The |
List of methods of SBUQuotedBaseMessageView
Method | Description |
---|---|
didTapQuotedMessageView(sender:) | Access level: open |
configure(with:) | Access level: open |
Customize SBUQuotedMessageViewParams
The following table lists parameters that you can configure to customize the quoted message view.
Parameter name | Type | Description |
---|---|---|
messageId | String | The ID of the quoted message. |
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. |
usingQuotedMessage | Bool | Determines whether to show the quoted message view. If |
urlString | String | The string value of a quoted message that is a URL file type. |
fileName | String | The file name of the quoted message. |
fileType | String | The file type of the quoted message. |
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 | View (Label) | 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. 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 |
---|---|
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(_:)
method in the SBUChannelViewController
class.
Method | Description |
---|---|
didTapQuotedMessageView(sender:) | Access level: public |