How to add a new button in messageInputView?

[tezpark]

Summary

• Q: The customer is looking for ways to customize input control to add their own button. They want a new button next to the + (show menu items: camera, photo library, and document) button.

Guide & Snippet

1. Create a customized message input view class based on SBUMessageInputView

class LeftButtonAddedMessageInputView: SBUMessageInputView {
    // MARK: Set up custom button here    
    override func setupViews() {
        super.setupViews()
        // Use this to place a button on the left
        self.inputHStackView.insertArrangedSubview(self.customButton, at: 0)
        
        // Use this to place a button on the right
        // self.inputHStackView.addArrangedSubview(self.customButton)
    }
    
    // MARK: Implementation for test.
    public lazy var customButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setImage(UIImage(systemName: "cloud.sun"), for: .normal)
        button.addTarget(self, action: #selector(onTapCustomButton(_:)), for: .touchUpInside)
        button.isHidden = false
        button.alpha = 1
        return button
    }()
    
    override func setupLayouts() {
        super.setupLayouts()
        
        self.customButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.customButton.widthAnchor.constraint(equalToConstant: 32),
            self.customButton.heightAnchor.constraint(equalToConstant: 38)
        ])
    }
    
    @objc func onTapCustomButton(_ sender: Any) {
        print("Custom button clicked")
    }
}

2. Create a customized input component class based on SBUGroupChannelModule.Input

class CustomGroupChannelModuleInputComponent: SBUGroupChannelModule.Input {
    override func setupViews() {
        self.messageInputView = LeftButtonAddedMessageInputView()
        
        super.setupViews()
    }
}

3. Create a customized group channel viewController class based on SBUGroupChannelViewController

class CustomGroupChannelViewController: SBUGroupChannelViewController {
    override func setupViews() {
        self.inputComponent = CustomGroupChannelModuleInputComponent()
        
        super.setupViews()
    }
}

4. To use the customized view controllers, update SBUViewControllerSet like below:

SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self