How to add the custom state banner on the message list(chat)?

[tezpark]

Summary

• How to add custom Banner display on top of the chat?

Customer request

• we are trying to add our custom banner to the channelStateBanner in SBUBaseChannelModule.List,
  but somehow not able to see our new view instead every time seeing the channel frozen banner only.
  self.listComponent?.channelStateBanner = self.customStateBannerView.
  Please help us like how we can show our own custom banner on top of the chat.

Guide & Snippet

• The logic below is a custom snippet with a simple example.

• Create CustomGroupChannelListComponent

class CustomGroupChannelListComponent: SBUGroupChannelModule.List {
    public var customStateBanner = UIView()
    
    override func setupViews() {
        super.setupViews()
        
        // Creates the `customStateBanner`
        self.customStateBanner.isHidden = true
        self.addSubview(self.customStateBanner)
    }
    
    override func setupLayouts() {
        super.setupLayouts()
        
        // Sets the `customStateBanner` layout
        self.customStateBanner
            .sbu_constraint(equalTo: self, leading: 0, trailing: 0, top: 0)
            .sbu_constraint(height: 50)
    }
    
    override func setupStyles(theme: SBUChannelTheme? = nil) {
        super.setupStyles(theme: theme)
        
        // Sets the `customStateBanner` style
        self.customStateBanner.backgroundColor = .red
    }
    
    // Methods for testing
    func updateCustomStateBanner(with information: String?) {
        // In this way, the information string passed in can be set to an object, such as a label.
        
        guard let information = information else {
            self.customStateBanner.isHidden = true
            return
        }
            
        self.customStateBanner.isHidden = false
    }
}

• Create CustomGroupChannelViewController

class CustomGroupChannelViewController: SBUGroupChannelViewController {
    // for example
    static var count: Int = 0

    
    // Called when the channel is frozen.
    override func baseChannelModule(
        _ inputComponent: SBUBaseChannelModule.Input,
        didUpdateFrozenState isFrozen: Bool
    ) {
        // example: This is done to avoid exposing the `channelStateBanner` when the `customStateBanner` is visible.
        let isCustomStateBannerDisplayed = !((self.listComponent as? CustomGroupChannelListComponent)?.customStateBanner.isHidden ?? true)
        self.listComponent?.channelStateBanner?.isHidden = (!isFrozen || isCustomStateBannerDisplayed)
    }
    override func baseChannelViewModel(
        _ viewModel: SBUBaseChannelViewModel,
        didChangeChannel channel: BaseChannel?,
        withContext context: MessageContext
    ) {
        // Test logic to change the hidden state of the `customStateBanner` whenever the channel changes.
        // Based on this logic, you can expose/hide the `customStateBanner` where needed or update the information in the banner.
        
        // case 1: access `customListComponent` via method
        if let customListComponent = self.listComponent as? CustomGroupChannelListComponent {
            let testString: String? = (Self.count%2 == 1) ? "test" : nil
            customListComponent.updateCustomStateBanner(with: testString)
        }
        
        // case 2: direct access to `customStateBanner`
        if let customStateBanner = (self.listComponent as? CustomGroupChannelListComponent)?.customStateBanner {
            customStateBanner.isHidden = (Self.count%2 == 1)
        }
        
        Self.count += 1
        
        // Since the disUpdateFrozenState delegate function is called in the logic of Super, please call it after setting the state of customStateBanner.
        super.baseChannelViewModel(viewModel, didChangeChannel: channel, withContext: context)
    }
}

• Before using the two custom classes, please set them in SBUModuleSet and SBUViewControllerSet.

SBUModuleSet.GroupChannelModule.ListComponent = CustomGroupChannelListComponent.self
SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self

Result

Reference

• SBISSUE-14051
• SBUGroupChannelModule.List
• SBUGroupChannelViewController