Chat UIKit iOS v3
Chat UIKit iOS
Chat UIKit
iOS
Version 3

Threads

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. Sendbird UIKit supports two reply types: quote reply and threads. Threads allow users to start a separate conversation in a new thread when responding to a message. The reply message is also sent to the channel in the message list component.


Limitations

Copy link

Threads currently have 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't reply to messages that are already thread replies to a parent message.

How to use

Copy link

To turn on thread mode, set the reply type to thread:

SBUGlobals.reply.replyType = .thread

Set threadReplySelectType

Copy link

You have the option to set threadReplySelectType to PARENT or THREAD. This enum property allows you to direct your users to view either the parent message or the message thread when they tap on a reply in the group channel view.

// Set ThreadReplySelectType to the parent message.
SBUGlobals.reply.threadReplySelectType = .parent

// Set ThreadReplySelectType to the message thread.
SBUGlobals.reply.threadReplySelectType = .thread

Reply to messages

Copy link

Users can reply to messages in a group or supergroup channel through the SBUGroupChannelViewController class. To do so, long tap on the message you wish to reply to in the listComponent of SBUGroupChannelModule. Then, a message menu appears. Once the Reply in thread button is selected, users can start replying in a new thread using SBUMessageThreadViewController. A message that already has a reply is called a parent message and the replied message is called a reply. Both parent messages and replies can be either a user message or file message.

Message menu

Copy link

The Message menu contains an Emoji reaction bar, a Copy button, and a Reply in thread button. To view the menu, long tap on a message in the channel view. Then, tap Reply in thread in the menu to reply to the selected message in a new thread. Like quote reply, threads only allow 1-depth threads. This means that users can’t reply to messages that are already thread replies to a parent message. The Reply in thread button of a message that’s already a thread reply appears as deactivated. Similarly, the Delete button of a parent message that has one or more replies in a thread appears as deactivated. To delete the parent message, its thread replies must be deleted first.

Customize the UI for threads in Message menu

Copy link

The UI for threads 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

MessageThread.Menu.replyInThread

A text for the Reply in thread button in the Message menu.

Message_Replied_Users_Count(Int, Bool)

1 reply
%d replies
99+ replies

Message_Reply_Cannot_Found_Original

Couldn't find the original message for this reply.

SBUIconSet

Copy link

The following table shows a customizable reply in thread icon.

Icon nameImageDescription

iconThread

An icon used to indicate Reply in thread.

Message thread

Copy link

Once the current user taps Reply in thread in the Message menu, they can start a new thread through SBUMessageThreadViewController. In the thread view, the parent message is displayed through SBUParentMessageInfoView at the top of the ListComponent of SBUMessageThreadModule. The thread view is composed of three components: headerComponent, listComponent, and inputComponent.

The header component shows the title of the message thread screen, which says Thread by default. Below the title, there's a text button that indicates the name of the channel that the thread belongs to. When a user taps on the button, they can view the corresponding parent message in the group channel screen. The title of the thread and the channel name are both displayed through SBUMessageThreadTitleView within headerComponent.

In the list component, the parent message and its replies are displayed in a chronological order. While in the input component, the user can send either a text message or a file message as a reply to the parent message.

If you reply with a user message in the message input field, the sendUserMessage(text:parentMessage:) method of SBUMessageThreadViewModel is invoked and a new thread is created. When replying with a file message, the SendFileMessage(Uri uri) method of SBUMessageThreadViewModel is invoked. The placeholder text in the thread input field changes depending on whether the parent message has an existing thread or not. If the parent message already has one or more thread replies, the default placeholder text shows as Reply to thread. If the parent message has no existing replies, the placeholder text shows as Reply in thread.

Customize the UI of message thread

Copy link

The UI for threads in HeaderComponent and InputComponent of SBUMessageThreadModule can be customized through SBUStringSet.

SBUStringSet

Copy link

The following table shows customizable properties of SBUStringSet that appear in the message thread header component and message thread input component.

Property nameDescription

MessageThread.Header.title

A text for the title of the thread view.

MessageThread.MessageInput.replyInThread

A placeholder text in the message input field that indicates the parent message of the thread has no existing replies. The string is currently set to Reply in thread by default.

MessageThread.MessageInput.replyToThread

A placeholder text in the message input field that indicates the parent message of the thread already has one or more replies. The string is currently set to Reply to thread by default.


Show replies

Copy link

Users can view reply messages in both the thread view and the group channel view because all replies sent to a thread also get sent to the channel automatically. In the thread view, replies are shown chronologically in the ListComponent of SBUMessageThreadModule with the current user’s replies shown on the right and channel members’ replies shown on the left of the screen by default. In the group channel view, a parent message contains SBUThreadInfoView that shows the number of replies it has and the profile images of the users who replied to the message. SBUThreadInfoView is one of the many components that make up a message cell. The replies sent to the channel are displayed the same way as quoted messages in quote reply mode.

Thread list

Copy link

In a thread view, the parent message is shown using SBUParentMessageInfoView within ListComponent. A parent message info view includes the parent message, its reaction emojis, and the number of replies it has in the thread. Meanwhile, its replies are shown in a chronological order below the parent message info view in the lower part of the ListComponent of SBUMessageThreadModule. Both the parent message and the reply can be a text or file message. By default, the replies sent by the current user are displayed on the righdt side of the screen and the message bubble is purple.

You can customize the replies in the thread list the same way as customizing each message in the listComponent of SBUGroupChannelViewController. The thread replies are created by first calling the SBUMessageThreadViewController class. It uses SBUAdminMessageCell, SBUUserMessageCell, and SBUFileMessageCell classes to display the messages in the message thread.

Customize SBUParentMessageInfoView

Copy link

The following table shows customizable properties and methods of SBUParentMessageInfoView to modify the UI of the parent message info view.

List of properties of SBUParentMessageInfoView

Copy link
Property nameTypeDescription

profileView

SBUMessageProfileView

Specifies the view that displays the profile image of the user that sent the parent message.

userNameLabel

UILabel

Specifies the UILabel displaying the user name of channel member who sent the parent message.

dateLabel

UILabel

Specifies the UILabel displaying the date and time that the parent message was sent.

moreButton

UIButton

Specifies the UIButton displaying iconMore as the button to view more menu items.

replySeparateLine

UIView

Specifies the UIView displaying a line that separates the parent message and its emoji reactions from the thread reply count.

replyLabel

UILabel

Specifies the UILabel displaying the number of replies there are in the thread.

bottomSeparateLine

UIView

Specifies the UIView displaying a line that separates the thread reply count from the list of replies in the thread.

messageTextView

SBUUserMessageTextView

Specifies the view that displays the parent message when the message is a user message.

baseFileContentView

SBUBaseFileContentView

Specifies the view that displays the parent message when the message is a file message.

reactionView

SBUParentMessageInfoReactionView

Specifies the view that displays the reactions of the parent message.

userProfileTapHandler

(() -> Void)

Specifies the handler that's called when a user profile is tapped.

tapHandlerToContent

(() -> Void)

Specifies the handler that's called when the view below the parent message is tapped.

moreButtonTapHandlerToContent

(() -> Void)

Specifies the handler that's called when the button to view more menu items is tapped.

emojiTapHandler

((String) -> Void)

Specifies the handler that's called an emoji is tapped.

moreEmojiTapHandler

(() -> Void)

Specifies the handler that's called when the add reaction button is tapped to view more emoji options.

emojiLongPressHandler

((String) -> Void)

Specifies the handler that's called when an emoji is long tapped.

mentionTapHandler

((SBUUser) -> Void)

Specifies the handler that's called when a user mention is tapped.

List of methods of SBUParentMessageInfoView

Copy link
MethodDescription

configure(message:delegate:useReaction:)

Access level: open
Configures all UI components in the parent message info view with message, delegate, and userReaction parameters.

setupViews()

Sets the value of properties used to create views and the hierarchy of view components.

setupLayouts()

Sets the layout of components in a view.

updateLayouts()

Updates the layout of components in a view if any changes have been made.

setupStyles()

Sets the style of a view, such as ColorSet, StringSet, and FontSet.

setupActions()

Sets all actions of UI elements that a user could possibly execute in the view.

onTapUserProfileView(sender:)

Access level: open
Calls userProfileTapHandler() when the user profile is tapped.

onTapContentView(sender:)

Access level: open
Calls tapHandlerToContent() when the content of the message is tapped.

onTapWebview(sender:)

Access level: open
Opens the sent URL when the web page preview area is tapped.

onTapMoreButton(_:)

Access level: open
Calls moreButtonTapHandlerToContent() when the iconMore button is tapped.

To display the parent message info view, SBUParentMessageInfoView uses SBUMessageCellTheme in the SBUTheme class. The following table shows the properties of SBUMessageCellTheme for threads.

SBUMessageCellTheme

Copy link
CategoryPropertyDescription

View

parentInfoBackgroundColor

The background color of the parent message info.

User name

parentInfoUserNameTextFont

The text font of the user name of the channel member who sent the parent message.

User Name

parentInfoUserNameTextColor

The text color of the user name of the channel member who sent the parent message.

Sent Date

parentInfoDateFont

The text font of the date and time that the parent message was sent.

Sent Date

parentInfoDateTextColor

The text color of the date and time that the parent message was sent.

More Button

parentInfoMoreButtonTintColor

The tint color of the iconMore button.

Separate

parentInfoSeparateBarColor

The color of the line that separates the parent message and its emoji reactions from the thread reply count.

Reply Count

parentInfoReplyCountTextColor

The text color of the thread reply count.

Reply Count

parentInfoReplyCountTextFont

The text font of the thread reply count.

Group channel

Copy link

In a group channel view, the parent message contains SBUThreadInfoView that displays the number of thread replies and up to four profile images of users who responded in the thread. Since all replies sent to a thread also get sent to the channel automatically, the thread replies are shown in the channel as quoted messages in quote reply mode. Users can view these replies through SBUQuotedBaseMessageView, SBUQuotedUserMessageView, and SBUQuotedFileMessageView. These views are internally implemented in Sendbird UIKit to display the different types of reply messages on the screen. Both SBUQuotedUserMessageView and SBUQuotedFileMessageView inherit the properties and methods of SBUQuotedBaseMessageView. The SBUQuotedBaseMessageView shows the parent message and the repliedToLabel that indicates a user replied to another user in the channel.

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 SBUThreadInfoView

Copy link

The following table shows customizable properties and methods of SBUThreadInfoView to modify the UI of the thread info view.

List of properties of SBUThreadInfoView

Copy link
Property nameTypeDescription

repliedUsersStackView

UIStackView

Specifies the UIStackView that displays all users who replied to a parent message in a thread.

repliedCountLabel

UILabel

Specifies the UILabel that displays the number of replies there are in a thread.

userImageSize

CGFloat

Specifies the size of the user profile image.

repliedUserLimit

Int

Specifies the maximum number of users who replied to a thread shown in the thread info view. (Default: 4).

List of methods of SBUThreadInfoView

Copy link
MethodDescription

configure(message:messagePosition:)

Access level: open
Configures all UI components in the thread info view with the message and messagePosition parameters.

setupViews()

Sets the value of properties used to create views and the hierarchy of view components.

setupLayouts()

Sets the layout of components in a view.

setupStyles(theme:)

Sets the layout of components in a view with SBUMessageCellTheme.

updateLayouts()

Updates the layout of components in a view if any changes have been made.

setupStyles()

Sets the style of a view, such as ColorSet, StringSet, and FontSet.

setupActions()

Sets all actions of UI elements that a user could possibly execute in the view.

setupRepliedUsers()

Sets the UI elements that show each individual replied users in the thread info view.

onClickThreadInfo(sender:)

Access level: open
Calls userProfileTapHandler() when the thread info view is tapped.

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

Specifies the class that customizes the theme of a message cell.

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.

repliedToText

String

Specifies the text that indicates to whom a member of the channel replied to.

repliedToLabel

UILabel

Specifies 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

UIImageView

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

repliedToStackView

UIStackView

Specifies the UIStackView displaying the repliedToLabel and repliedIconView.

messageStackView

UIStackView

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

contentStackView

UIStackView

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

quotedMessageCreatedAt

Int64

Specifies the sent time of the quoted message.

params

SBUQuotedBaseMessageViewParams

Specifies the parameters to build the quoted base message 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 SBUQuotedBaseMessageViewParams object.

Customize SBUQuotedBaseMessageViewParams

Copy link

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

Parameter nameTypeDescription

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

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

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

UILabel

Specifies 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 SBUQuotedBaseMessageViewParams 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

Specifies the string value of a quoted message that is a URL file type.

fileType

MessageFileType

Specifies 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 SBUQuotedBaseMessageViewParams object.

To display all the thread replies, SBUQuotedBaseMessageView, SBUQuotedUserMessageView, and SBUQuotedFileMessageView all use SBUMessageCellTheme in the SBUTheme class. The following table shows the properties of SBUMessageCellTheme.

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.

Property nameDescription

Message_Unavailable

A text that indicates that the current user can’t view the parent message because it was sent before the user joined the channel.

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.