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

Customize the message context menu

Copy link

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's context menu by creating a subclass of SBUGroupChannelModule.List and overriding the createMessageMenuItems(for:) function.

This guide demonstrates how to:


Add a context menu item

Copy link

The following codes in each tab demonstrate how to add an Animation effect button to the context menu.

  1. Create a subclass of SBUGroupChannelModule.List and override the createMessageMenuItems(for:) function to add a new menu button.
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
    }
}
  1. Then create a custom ViewController and set the custom classes to GroupChannelModule.ListComponent and GroupChannelViewController before using them.
// Create a subclass of SBUGroupChannelViewController that is also a CustomGroupChannelModuleListDelegate.
class CustomGroupChannelViewController: SBUGroupChannelViewController, CustomGroupChannelModuleListDelegate {
    func groupChannelModule(_ listComponent: CustomGroupChannelModuleList, didAddAnimateMessage message: BaseMessage) {
        // Show animated message.
        print("Animated message.")
        
    }

    override func setupViews() {
        super.setupViews()
        
        // set
        (self.listComponent as? CustomGroupChannelModuleList)?.customDelegate = self
    }
}
  1. 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.
// Run this code anywhere before using CustomGroupChannelViewController and CustomGroupChannelModuleList.
SBUModuleSet.GroupChannelModule.ListComponent = CustomGroupChannelModuleList.self
SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self