Customize the message object UI in the Chat View

A long tab on a message object in the chat view can reveal a list of action items that can be perform on the message. Customize the message object UI in the Chat View using the ChannelFragment class.

This guide demonstrates how to:

Add a context menu item.

Create a subclass of SBUGroupChannelModule.List and override the createMessageMenuItems(for:) function to add a new menu button.

The following code snippets demonstrate how to add a Animation effect button to the context menu.

AppDelegateViewController

import UIKit
import SendbirdUIKit
import SendbirdChatSDK

// Create a delegate for CustomGroupChannelModuleList. 
protocol CustomGroupChannelModuleListDelegate {
    func groupChannelModule(_ listComponent: CustomGroupChannelModuleList, didAddAnimateMessage message: BaseMessage)
}

// Create a subclass of SBUGroupChannelModule.List.
class CustomGroupChannelModuleList: SBUGroupChannelModule.List {
    
    var customDelegate: CustomGroupChannelModuleListDelegate?
    
    override func createMessageMenuItems(for message: BaseMessage) -> [SBUMenuItem] {
        var items = super.createMessageMenuItems(for: message)
        
        switch message {
        case is UserMessage:
            let animation = self.createAnimationMenuItem(for: message)
            items.append(animation)
        default: break
        }
        
        return items
    }
    
    private func createAnimationMenuItem(for message: BaseMessage) -> SBUMenuItem {
        // Customize as needed.
        let symbolConfiguration = UIImage.SymbolConfiguration(pointSize: 24, weight: .bold)
        let iconImage = UIImage(systemName: "bubbles.and.sparkles", withConfiguration: symbolConfiguration)

        // Create a menu item for animation.
        let menuItem = SBUMenuItem(
            title: "Animation",
            color: self.theme?.menuTextColor,
            image: iconImage
        ) { [weak self, message] in
            guard let self = self else { return }
            self.customDelegate?.groupChannelModule(self, didAddAnimateMessage: message)
        }
        menuItem.isEnabled = true
        menuItem.transitionsWhenSelected = false
        
        return menuItem
    }
}

Once created, you need to set the custom classes to GroupChannelModule.ListComponent and GroupChannelViewController before using them. We recommend to run them after initialization in the AppDelegate file as shown below.

Swift#AppDelegate

// Run this code anywhere before using CustomGroupChannelViewController and CustomGroupChannelModuleList.
SBUModuleSet.GroupChannelModule.ListComponent = CustomGroupChannelModuleList.self
SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self

On this page

Add a context menu item

Sample app