Reply to messages
Members of a group or supergroup channel can reply to each others' messages in a thread using the MessageThreadView
structure. When a user taps Reply in thread in the Message menu of a user or file message in the GroupChannelView
class, the thread view appears. In the new thread, users can start a separate conversation in response to the parent message.
Initialize
You can start building a thread view by initializing the MessageThreadView
structure.
Init parameters
Property name | Type | Default value |
---|---|---|
HeaderComponent | SBUMessageThreadModule.Header | SBUModuleSet.MessageThreadModule.HeaderComponent |
ListComponent | SBUMessageThreadModule.List | SBUModuleSet.MessageThreadModule.ListComponent |
InputComponent | SBUMessageThreadModule.Input | SBUModuleSet.MessageThreadModule.InputComponent |
When the loadView()
method of the view controller is called, the module components get added to the view in the setupView()
method of the Sendbird UIKit's view life cycle. Then, the configure
method of each module component is called to set the property values and display the view.
HeaderComponent
The HeaderComponent
in the thread view shows a title that says Thread by default, a back button that takes the user to the previous view, and a text button of the channel title in the titleView
area. When a user taps on the text button, the group channel view appears. Each property corresponds to the elements in NavigationBar
of SBUMessageThreadViewController
.
The following table shows the parameters of the configure
method of HeaderComponent
.
Parameter name | Type |
---|---|
delegate | SBUMessageThreadModuleHeaderDelegate |
theme | SBUChannelTheme |
Note: To learn more about the delegate and the properties of
HeaderComponent
, go to the API reference page.
ListComponent
The ListComponent
shows a parent message and a list of all its replies, both text and file messages, in a chronological order. Within this component, the parent message is displayed through SBUParentMessageInfoView
located above the thread replies. Replies sent by the current user are differentiated from those sent by other channel members by the color and location of the message bubble. The following table shows the parameters of the configure
method of ListComponent
.
Parameter name | Type |
---|---|
delegate | SBUMessageThreadModuleListDelegate |
dataSource | SBUMessageThreadModuleListDataSource |
theme | SBUChannelTheme |
Note: To learn more about the delegate, data source, and the properties of
ListComponent
, go to the API reference page.
InputComponent
The InputComponent
shows the input field of the thread where users can type and send their replies. The following table shows the parameters of the configure
method of InputComponent
.
Parameter name | Type |
---|---|
delegate | SBUMessageThreadModuleInputDelegate |
dataSource | SBUMessageThreadModuleInputDataSource |
theme | SBUChannelTheme |
Note: To learn more about the delegate, data source, and the properties of
InputComponent
, go to the API reference page.
View model
The SBUMessageThreadViewController
class uses a view model that is a type of the SBUMessageThreadViewModel
class. The view model is created in the initializer of the view controller through the createViewModel(channel:)
method.
The following table shows the parameter of the createViewModel
method.
Parameter name | Type | Description |
---|---|---|
channel | BaseChannel | Specifies the channel value. (Default: |
channelURL | String | Specifies the URL of the channel. (Default: |
parentMessage | BaseMessage | Specifies the parent message object. (Default: |
parentMessageId | Int64 | Specifies the ID of the parent message. (Default: |
threadedMessageListParams | ThreadedMessageListParams | Specifies a parameter needed to retrieve threaded message list data from the Chat SDK. (Default: |
startingPoint | Int64 | Specifies the timestamp value that marks the starting point of the thread list. (Default: |
Note: To learn more about the methods and the event delegates of the view model, go to this API reference page.
SBUMessageThreadViewController properties
To learn more about the properties of SBUMessageThreadViewController
, go to the API reference page.
Customization
Sendbird Chat SwiftUI provides a View customization
and DestinationViewBuilder
.
- View customization: Our SwiftUI SDK allows you to selectively customize view elements. To learn more about the customization and our SwiftUI is designed, see the customization guide.
- DestinationViewBuilder: Use DestinationViewBuilder to customize the destination views that are navigatable from the group channel view.
Note : Visit our Github Sample to see the custom sample implementation for each item.
Partial customization
You can easily customize a specific part of a View
, which particularly comes in handy when changing only a certain area in the View
.
To do so, use the View Builders that Sendbird has predefined and its a ViewConfig
. The ViewConfig
contains the data needed to render the view and its parameters can be found in the table below.
Parameter
- Change the value of
SBUViewControllerSet.MessageThreadViewController
.
- Use a one-time custom view controller in the thread view.
Module component
There are two ways to customize a module component: change the default module component type in the global SBUModuleSet.MessageThreadModule
class or set a single-use custom module component in the view controller.
The custom header component in the code below is used in the following customization examples.
- Change the value of
SBUModuleSet.MessageThreadModule.HeaderComponent
.
- Change the module component in
SBUMessageThreadViewController
.
Note: To learn more about the methods of
SBUMessageThreadModule
, go to the API reference page.
View model
In order to use a customized view model or customize the existing view model's event delegate, you must override the view controller.
- Use a customized view model.
- Customize the view model's event delegate. The code snippet below shows one of the many customizable event delegates.
DestinationViewBuilder
This screen has no DestinationViewBuilder because there's no navigational elements, such as buttons or links to other screens.