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

Chat in a group channel

Copy link

In a group channel, you can have both 1-to-1 chat and 1-to-N chats through the SBUGroupChannelViewController class. There are two types of group channel based on whether a user needs an invitation to join: private and public. UIKit also provides a Supergroup channel to facilitate a more stable chat environment for a larger number of users.

UIKit supports plain text messages, file messages, and media content such as photos and videos to be sent in group channels. Once delivered, those messages are grouped by time in minutes and date in the channel. If the permission to access photo library is limited when sending a file message containing photos and videos, the SBUSelectablePhotoViewController class is used.

To learn more about the channels, go to the Channel types page in Chat SDK.


Features

Copy link

Refer to the table below to see what features there are in SBUGroupChannelViewController.

FeatureDescription

Send message

Allows users to send messages, images, videos, and files in the message input view.

Notify new messages

Displays a push notification when receiving a new message.

Show last seen time

Shows the timestamp of when a member read the last message in the channel. This function is only available in 1-to-1 chat channels.

Show message send status

Displays the send status of a message as either successful, failed, or sending.

Show delivery receipt

Displays the delivery receipt status of a message in the channel.

Show read receipt

Displays the read receipt status of a message in the channel.

Show typing indicator

Displays whether another user in the channel is typing a message.

Copy message

Allows users to copy a text message.

Edit message

Allows users to edit their own messages.

Delete message

Allows users to delete their own messages.

Retry to send a message

Allows users to try to resend a failed message.

Mention a user in a message

Allows users to mention channel members in a message.

Channel settings menu

Navigates to the group channel settings view from the navigation bar.

Go back to previous view

Returns the user to the previous view from the navigation bar.

Show channel status banner

Displays the channel status in the top banner of the view. By default, the banner only shows the frozen state of the channel.


Initialize

Copy link

You can start building a channel-based chat service by calling the SBUGroupChannelViewController class. It uses SBUAdminMessageCell, SBUUserMessageCell, and SBUFileMessageCell classes to display the messages in the channel. It's also in charge of auto connecting to Sendbird server and internal functions to handle core features of UIKit such as pagination and real-time updates.

Note: You can initialize SBUGroupChannelViewController by setting the value of ChannelURL or GroupChannel. If you've already created MessageListParams, we recommend you to set all of the objects together. Otherwise, the default values are used for these classes.

You can start building a chat in group channel view through the SBUGroupChannelViewController class. Use either the init(channelURL:messageListParams:) or init(channel:messageListParams:)) initializer to create the instance and display the view.

let channelVC = SBUGroupChannelViewController(
    channelURL: {CHANNEL_URL},
    messageListParams: messageListParams
)
let navigationController = UINavigationController(rootViewController: channelVC)
present(navigationController, animated: true)

The following items are key elements of SBUGroupChannelViewController that are used to create a functional chat in group channel view.

Module components

Copy link

In the SBUGroupChannelViewController class, SBUGroupChannelModule and its components are used to create and display the group channel view. The module is composed of three components: HeaderComponent,ListComponent, and InputComponent.

Property nameTypeDefault value

HeaderComponent

SBUGroupChannelModule.Header

SBUModuleSet.GroupChannelModule.HeaderComponent

ListComponent

SBUGroupChannelModule.List

SBUModuleSet.GroupChannelModule.ListComponent

InputComponent

SBUGroupChannelModule.Input

SBUModuleSet.GroupChannelModule.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 includes a channel title, a back button that takes the user to the previous view, and a button that takes the user to the channel settings view. Each property corresponds to the elements in the navigation bar of the view controller.

The following table shows the parameters of the configure method of the HeaderComponent.

Parameter nameType

delegate

SBUGroupChannelModuleHeaderDelegate

theme

SBUChannelTheme

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

ListComponent

Copy link

The ListComponent shows a list of all the messages in the group channel. The following table shows the parameters of the configure method of the ListComponent.

Parameter nameType

delegate

SBUGroupChannelModuleListDelegate

dataSource

SBUGroupChannelModuleListDataSource

theme

SBUChannelTheme

Note: To learn more about the delegate, data source, and the properties of the ListComponent for group channels, go to the API reference page.

InputComponent

Copy link

The InputComponent shows the input field of a channel where users can type and send their messages. The following table shows the parameters of the configure method of the InputComponent.

Parameter nameType

delegate

SBUGroupChannelModuleInputDelegate

dataSource

SBUGroupChannelModuleInputDataSource

theme

SBUChannelTheme

Note: To learn more about the delegate, data source, and the properties of the InputComponent for group channels, go to the API reference page.

View model

Copy link

The SBUGroupChannelViewController class uses a view model that is a type of the SBUGroupChannelViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:channelURL:messageListParams:startingPoint:showIndicator:) method. When the view model object is created, it retrieves message list data from Chat SDK to the view controller and updates the view through the baseChannelViewModel(_:didReceiveNewMessage:forChannel:) event.

Note: If the value of channel or channelURL is invalid, the view model cannot retrieve the message list.

The following table shows the parameters of the createViewModel method.

Parameter nameTypeDescription

channel

BaseChannel

Specifies the channel value. (Default: nil)

channelURL

String

Specifies the URL of the channel. You can find this URL from the url property of the GroupChannel, or find it on your Sendbird Dashboard. (Default: nil)

messageListParams

MessageListParams

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

startingPoint

Int64

Specifies the timestamp value that marks the starting point of the message list. (Default: Int64.max)

showIndicator

Bool

Determines whether to show the loading indicator when fetching channel messages. (Default: true)

Message order

Copy link

In the SBUGroupChannelViewModel message list, known as fullMessageList, messages are organized based on their sending status and their arrival time.

In this layout, older messages are positioned at the top of the list, while the most recent messages appear at the bottom. As new messages are successfully sent and received, they are displayed at the lower end of the list, just above any messages that are pending or have failed. Below these, you'll find any messages that are still pending or have failed to send. These are ordered based on their original sending time. Furthermore, if the bubble typing indicator feature is enabled for your channel, this indicator will be consistently shown at the very bottom of the message list, regardless of the statuses of other messages. This layout prioritizes the visibility of new, successful messages while maintaining awareness of pending and failed messages, as well as ongoing typing activity.

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

SBUBaseChannelViewController properties

Copy link

The SBUBaseChannelViewController class provides properties and methods that are used in both group channels and open channels. To learn more about these properties, go to the API reference page.


Customization

Copy link

You can customize the chat UI of a group channel by making changes to the following parts:

Message cell

Copy link

You can customize the message cells by inheriting different message cells as shown in the list below. Each of the following message cell inherits SBUContentBaseMessageCell.

To customize the message cells listed above, you can override each message class. You can selectively override the components, methods, or add custom views into the existing view hierarchy.

The below is an image of the view hierarchy of SBUContentBaseMessageCell.

The code below shows an example of adding a UILabel view into SBUUserMessageCell.

class MyUserMessageCell: SBUUserMessageCell {
    // The custom view to be added to SBUUserMessageCell
    lazy var myLabel: UILabel = {
        let label = UILabel()
        label.textColor = .systemBlue
        label.font = .systemFont(ofSize: 14)
        label.numberOfLines = 0
        return label
    }()
    
    override func setupViews() {
        super.setupViews()
        
        // Insert myLabel view inside mainContainerView of SBUUserMessageCell.
        self.mainContainerView.addArrangedSubview(myLabel)
    }
    
    override func configure(with configuration: SBUBaseMessageCellParams) {
        super.configure(with: configuration)
        
        guard let configuration = configuration as? SBUUserMessageCellParams else { return }
        guard let userMessage = configuration.userMessage else { return }
        
        myLabel.text = {YOUR_DATA}
    }
}

// Set up your custom `GroupChannelViewController` in `SBUViewControllerSet` before using it. 
class CustomViewController: SBUGroupChannelViewController {
    override func setupViews() {
        // Register the custom message cell.
        self.listComponent?.register(userMessageCell: MyUserMessageCell())
        super.setupViews()
    }
}

SBUViewControllerSet.GroupChannelViewController = CustomViewController.self

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 CustomGroupChannelViewController: SBUGroupChannelViewController {
    // Implement custom code here.
}
  1. Change the value of SBUViewControllerSet.GroupChannelViewController.
SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self

// The view controller will now use `CustomGroupChannelViewController` as the default value.
  1. Use a one-time custom view controller in the chat in group channel view.
let channelVC = CustomGroupChannelViewController(channelURL: {CHANNEL_URL})
let navigationController = UINavigationController(rootViewController: channelVC)
present(navigationController, animated: true)

Module component

Copy link

There are two ways to customize a module component: change the default component value in the global SBUModuleSet.GroupChannelModule class or set a single-use custom module component in the view controller. If there is no set custom value in the loadView() method of SBUGroupChannelViewController, the module components will use the default values.

The custom header component in the code below is used in the following customization examples.

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

let channelVC = SBUViewControllerSet.GroupChannelViewController(channelURL: {CHANNEL_URL})

// The `headerComponent` in `SBUGroupChannelViewController` will now use `customHeader` as the default value.
  1. Change the module component in SBUGroupChannelViewController.
let channelVC = SBUViewControllerSet.GroupChannelViewController(channelURL: {CHANNEL_URL})
channelVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUGroupChannelModule, 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 CustomChannelViewController: SBUGroupChannelViewController {
    override func func createViewModel(
        channel: BaseChannel? = nil,
        channelURL: String? = nil,
        messageListParams: MessageListParams? = nil,
        startingPoint: Int64? = LLONG_MAX,
        showIndicator: Bool = true
    ) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()
        // Implement your code here.
    }
}
  1. Customize the view model's event delegate.
extension CustomChannelViewController: SBUGroupChannelViewModelDelegate {
    override func baseChannelViewModel(
        _ viewModel: SBUBaseChannelViewModel,
        didChangeChannel channel: BaseChannel?,
        withContext context: MessageContext
    ) {
        // Implement your code here.
}