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

Reply to messages

Copy link

Members of a group or supergroup channel can reply to each others' messages in a thread using the SBUMessageThreadViewController class. When a user taps Reply in thread in the Message menu of a user or file message in the SBUGroupChannelViewController class, the thread view appears. In the new thread, users can start a separate conversation in response to the parent message.


Initialize

Copy link

You can start building a thread view through the SBUMessageThreadViewController class. Use the init(channel:channelURL:parentMessage:parentMessageId:delegate:threadedMessageListParams:startingPoint:) initializer to create the instance and display the view as shown below.

// Case 1: Use `channelURL` and `parentMessageId`.
let messageThreadVC = SBUViewControllerSet.MessageThreadViewController.init(
    channelURL: {CHANNEL_URL},
    parentMessageId: {PARENT_MESSAGE_ID},
    delegate: self,
    startingPoint: {STARTING_POINT}
)
let navigationController = UINavigationController(rootViewController: messageThreadVC)
present(navigationController, animated: true)

// Case 1-1: Add the `threadedMessageListParams` object.
let messageThreadVC = SBUViewControllerSet.MessageThreadViewController.init(
    channelURL: {CHANNEL_URL},
    parentMessageId: {PARENT_MESSAGE_ID},
    delegate: self,
    threadedMessageListParams: {PARAMS},
    startingPoint: {STARTING_POINT}
)

let navigationController = UINavigationController(rootViewController: messageThreadVC)
present(navigationController, animated: true)

// Case 2: Use the `channel` and `parentMessage` objects.
let messageThreadVC = SBUViewControllerSet.MessageThreadViewController.init(
    channel: {CHANNEL},
    parentMessage: {PARENT_MESSAGE},
    delegate: self,
    startingPoint: {STARTING_POINT}
)

let navigationController = UINavigationController(rootViewController: messageThreadVC)
present(navigationController, animated: true)

The following items are key elements of SBUMessageThreadViewController that are used to create a functional thread view.

Module components

Copy link

In the SBUMessageThreadViewController class, SBUMessageThreadModule and its components are used to create and display the thread view. The module is composed of three components: HeaderComponent, ListComponent, and InputComponent. These components are created based on the SBUBaseChannelModule class.

Property nameTypeDefault 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

Copy link

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 nameType

delegate

SBUMessageThreadModuleHeaderDelegate

theme

SBUChannelTheme

Note: To learn more about the delegate and the properties of HeaderComponent, go to the API reference page.

ListComponent

Copy link

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 nameType

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

Copy link

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 nameType

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

Copy link

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 nameTypeDescription

channel

BaseChannel

Specifies the channel value. (Default: nil)

channelURL

String

Specifies the URL of the channel. (Default: nil)

parentMessage

BaseMessage

Specifies the parent message object. (Default: nil)

parentMessageId

Int64

Specifies the ID of the parent message. (Default: nil)

threadedMessageListParams

ThreadedMessageListParams

Specifies a parameter needed to retrieve threaded message list data from the Chat SDK. (Default: nil)

startingPoint

Int64

Specifies the timestamp value that marks the starting point of the thread list. (Default: nil)

Note: To learn more about the methods and the event delegates of the view model, go to this API reference page.

SBUMessageThreadViewController properties

Copy link

To learn more about the properties of SBUMessageThreadViewController, go to the API reference page.


Customization

Copy link

You can customize the thread view by changing the view controller, module component, and view model that correspond to this key function.

View controller

Copy link

There are two ways to customize the view controller: change the default view controller value in the global SBUViewControllerSet class or set a single-use custom view controller in the key function.

The custom view controller in the code below is used in the following customization examples.

class CustomViewController: SBUMessageThreadViewController {
    // Implement custom code here.
}
  1. Change the value of SBUViewControllerSet.MessageThreadViewController.
SBUViewControllerSet.MessageThreadViewController = CustomViewController.self

// The view controller will now use `CustomViewController` as the default value.
  1. Use a one-time custom view controller in the thread view.
let messageThreadVC = CustomViewController(channelURL: {CHANNEL_URL}, parentMessageId: {PARENT_MESSAGE_ID}, delegate: self, startingPoint: {STARTING_POINT}))
let navigationController = UINavigationController(rootViewController: messageThreadVC)
present(navigationController, animated: true)

Module component

Copy link

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.

class CustomHeader: SBUMessageThreadModule.Header {
    // Implement custom code here.
}
  1. Change the value of SBUModuleSet.MessageThreadModule.HeaderComponent.
SBUModuleSet.MessageThreadModule.HeaderComponent = CustomHeader.self

let messageThreadVC = SBUViewControllerSet.MessageThreadViewController(channelURL: {CHANNEL_URL}, parentMessageId: {PARENT_MESSAGE_ID}, delegate: self, startingPoint: {STARTING_POINT}))

// The `headerComponent` in `SBUMessageThreadViewController` will now use `customHeader` as the default value.
  1. Change the module component in SBUMessageThreadViewController.
let messageThreadVC = SBUViewControllerSet.MessageThreadViewController(channelURL: {CHANNEL_URL}, parentMessageId: {PARENT_MESSAGE_ID}, delegate: self, startingPoint: {STARTING_POINT}))
messageThreadVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUMessageThreadModule, go to the API reference page.

View model

Copy link

In order to use a customized view model or customize the existing view model's event delegate, you must override the view controller.

  1. Use a customized view model.
class CustomViewController: SBUMessageThreadViewController {
    override func createViewModel(
        channel: BaseChannel? = nil,
        channelURL: String? = nil,
        parentMessage: BaseMessage? = nil,
        parentMessageId: Int64? = nil,
        threadedMessageListParams: ThreadedMessageListParams? = nil,
        startingPoint: Int64? = nil
    ) {
        self.viewModel = SBUMessageThreadViewModel(
            channel: channel,
            channelURL: channelURL,
            parentMessage: parentMessage,
            parentMessageId: parentMessageId,
            threadedMessageListParams: threadedMessageListParams,
            startingPoint: startingPoint,
            delegate: self,
            dataSource: self
        )

        // Implement your code here.
    }
}
  1. Customize the view model's event delegate. The code snippet below shows one of the many customizable event delegates.
extension CustomViewController: SBUMessageThreadViewModelDelegate {
    override func messageThreadViewModel(
        _ viewModel: SBUMessageThreadViewModel,
        didUpdateParentMessage parentMessage: BaseMessage?
    ) {
        // Implement your code here.
    }
}