Chat UIKit iOS UIKit v2
Chat UIKit iOS UIKit
Chat UIKit
iOS UIKit
Version 2
Sendbird Chat UIKit v2 for iOS UIKit is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Message threading

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. Currently, Sendbird UIKit only supports quote reply type of message threading where users' messages and replies are all shown in the channel view.


Limitations

Copy link

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

Copy link

To enable message threading, set the reply type to quote reply mode:

SBUGlobals.ReplyTypeToUse = .quoteReply

Reply to messages

Copy link

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.

Message menu

Copy link

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.

Customize the UI for message threading in Message menu

Copy link

The UI for message threading in the Message menu can be customized through SBUStringSet and SBUIconSet.

SBUStringSet

Copy link

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 nameDescription

Reply

A text for the Reply button in the Message menu.

SBUIconSet

Copy link

The following table shows a customizable reply message icon.

Icon nameImageDescription

iconReply

An icon used to indicate Reply.

Quote message input

Copy link

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

Copy link

The following table lists customizable methods of SBUMessageInputView for message threading.

MethodDescription

startQuoteReplyMode(_:)

Access level: public
Starts the quote reply mode of message threading. When a user selects Reply in the Message menu, this method is called and the mode changes to .quoteReply.

endQuoteReplyMode()

Access level: public
Ends the quote reply mode of message threading. When a user closes the quote message input view, this method is called and the mode changes from .quoteReply to .none.

setMode(_:message:)

Access level: open
Sets the mode to the value of SBUMessageInputMode.

Customize SBUQuoteMessageInputView

Copy link

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

Copy link
Property nameTypeDescription

replyToLabel

View (Text)

The UILabel displaying a text that indicates to whom the current user is replying to. The label is located at the top of the quote message input view.

fileMessagePreview

View (Image)

The UIImageView displaying a thumbnail of the file message that the current user is replying to. The thumbnail is located to the left of the replyToLabel in the quote message input view.

userMessagePreview

View (Text)

The UILabel displaying a one-line preview of the quoted message. The label is located below replyToLabel in the quote message input view.

closeReplyButton

View (Button)

The UIButton displaying iconClose as the button to close out of the quote message input view and end quote reply mode.

contentStackView

View (Layout)

The UIStackView displaying all the components in the SBUQuoteMessageInputView.

replyLabelStackView

View (Layout)

The UIStackView displaying the replyToLabel component.

List of methods of SBUQuoteMessageInputView

Copy link
MethodDescription

configure(with:)

Access level: open
Configures all the UI components in the quote message input view with the SBUQuoteMessageInputViewParams object.

Customize SBUQuoteMessageInputViewParams

Copy link

The following table lists parameters that you can configure to customize the quote message input view.

Parameter nameTypeDescription

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 Reply to right along side the quotedMessageNickname.

isFileType

Bool

Determines whether the type of message is SBDFileMessage. (Default: true)

fileType

String

The file type of message.

fileName

String

The file name of message.

The SBUQuoteMessageInputView class uses SBUMessageInputViewTheme to customize various theme components. The following table shows the properties of SBUMessageInputViewTheme.

SBUMessageInputViewTheme

Copy link
CategoryPropertyDescription

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

divider

channelViewDividerColor

The color of the line that separates the List component of SBUChannelViewController from SBUQuoteMessageInputView.

Customize SBUStringSet

Copy link

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 nameDescription

MessageInput_Reply_To

A text for quote replying to a message in the replyToLabel. The string is currently set to Reply to %s by default.


Show replies

Copy link

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

Copy link

The following tables show customizable properties and methods of SBUQuotedBaseMessageView to modify the UI of the quoted message view.

List of properties of SBUQuotedBaseMessageView

Copy link
Property nameTypeDescription

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 UILabel displaying a text that indicates to whom a member of the channel replied to. The label is located at the top of the quoted message view.

repliedIconView

View (Image)

The UIImageView displaying iconReplied. The icon view is located to the left of repliedToLabel in the quoted message view.

repliedToStackView

View (Layout)

The UIStackView displaying the repliedToLabel and repliedIconView.

messageStackView

View (Layout)

The UIStackView displaying repliedToStackView and mainContainerView, which includes the quoted message.

contentStackView

View (Layout)

The UIStackView displaying all the components in messageStackView and extra spacing surrounding the dimensions of the quoted message view. The extra spacing can be customized to modify the size of the view.

List of methods of SBUQuotedBaseMessageView

Copy link
MethodDescription

didTapQuotedMessageView(sender:)

Access level: open
Calls the didTapQuotedMessageView_: method of SBUQuotedMessageViewDelegate when the quoted message is tapped.

configure(with:)

Access level: open
Configures all the UI in the quoted message view with the SBUQuotedMessageViewParams object.

Customize SBUQuotedMessageViewParams

Copy link

The following table lists parameters that you can configure to customize the quoted message view.

Parameter nameTypeDescription

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 true, the message cell in the channel shows its messageStackView.

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

Copy link

The following tables show customizable properties and methods that only apply to the UI of quoted user messages.

List of properties of SBUQuotedUserMessageView

Copy link
Property nameTypeDescription

quotedMessageLabel

View (Label)

The UILabel displaying the text of the quoted message. The label has a limit of two lines.

List of methods of SBUQuotedUserMessageView

Copy link
MethodDescription

configure(with:)

Access level: open
Configures all the UI in the quoted message view with the SBUQuotedMessageViewParams object.

Customize SBUQuotedFileMessageView

Copy link

The following tables show customizable properties and methods that only apply to the UI of quoted file messages.

List of properties of SBUQuotedFileMessageView

Copy link
Property nameTypeDescription

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

Copy link
MethodDescription

configure(with:)

Access level: open
Configures all the UI in the quoted message view with the SBUQuotedMessageViewParams object.

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

Copy link
CategoryPropertyDescription

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

repliedToLabel

repliedToTextColor

The text color of repliedToText.

repliedToLabel

repliedToTextFont

The text font of repliedToText.

Customize SBUStringSet

Copy link

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 nameDescription

Message_You

A text that refers to the current user in the repliedToLabel. The string is currently set to You by default.

Message_Replied_To

A text in the repliedToLabel that indicates a user has replied to another user in the channel. The string is currently set to %s replied to %s by default.

Customize SBUIconSet

Copy link

The following table shows a customizable icon in the quoted message view.

Icon nameImageDescription

iconReplied

An icon indicating that a user replied to another user's message.


Event delegate for quote reply

Copy link

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(_:)

Copy link

You can customize the action by overriding the didTapQuotedMessageView(_:) method in the SBUChannelViewController class.

MethodDescription

didTapQuotedMessageView(sender:)

Access level: public
Redirects the current user to the quoted message cell when the quoted message view is tapped.