How to send Giphy image to message list with customized button?

[kaiLee-sendbird]

Summary

• How to add Giphy icon to the input view?
• How to send Giphy image to a message list?

Guide & Snippet

1.

To add a customized button to the input view, you need to change messageInputView. Specifically, you need to insert a new view in inputHStackView and modify the icon position by adjusting the index in insertArrangedSubview.
To handle the tap event from the giphyButton, define a custom delegate. You can relay the event externally by executing a delegate method inside the button's action.

protocol CustomMessageInputViewDelegate: SBUMessageInputViewDelegate {
    func messageInputViewDidSelectGiphyButton(_ messageInputView: SBUMessageInputView)
}

class LeftButtonAddedMessageInputView: SBUMessageInputView {
    override func setupViews() {
        super.setupViews()
        self.inputHStackView.insertArrangedSubview(self.giphyButton, at: 1)
    }

    public lazy var giphyButton: UIButton = {
        let giphyIcon = UIImage(named: "giphy.icon") // Change to your asset name
        let button = UIButton(type: .custom)
        
        button.setImage(giphyIcon, for: .normal)
        button.addTarget(self, action: #selector(onTapCustomButton(_:)), for: .touchUpInside)
        button.isHidden = false
        button.alpha = 1

        return button
    }()

    override func setupLayouts() {
        super.setupLayouts()

        self.giphyButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.giphyButton.widthAnchor.constraint(equalToConstant: 32),
            self.giphyButton.heightAnchor.constraint(equalToConstant: 38)
        ])
    }

    @objc func onTapCustomButton(_ sender: Any) {
        if let delegate, let customDelegate = delegate as? CustomMessageInputViewDelegate {
            customDelegate.messageInputViewDidSelectGiphyButton(self)
        }
    }
}

2

Now, create the CustomGroupChannelModuleInputComponent class with the custom input view, LeftButtonAddedMessageInputView. All we need to do is switching its messageInputView to our LeftButtonAddedMessageInputView instance while setupView is in progress.
Don't forget to implement CustomMessageInputViewDelegate to monitor tap events, and also declare CustomGroupChannelModuleInputDelegate to further relay these events outside of the component, to the view controller in this example.

protocol CustomGroupChannelModuleInputDelegate: SBUGroupChannelModuleInputDelegate {
    func groupChannelModuleDidTapGiphyButton(_ inputComponent: SBUGroupChannelModule.Input)
}

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

extension CustomGroupChannelModuleInputComponent: CustomMessageInputViewDelegate {
    func messageInputViewDidSelectGiphyButton(_ messageInputView: SBUMessageInputView) {
        if let delegate, let customDelegate = delegate as? CustomGroupChannelModuleInputDelegate {
            customDelegate.groupChannelModuleDidTapGiphyButton(self)
        }
    }
}

3

For the next step, implement the CustomGroupChannelModuleInputDelegate within your CustomGroupChannelViewController. This will allow you to monitor tap events on the giphyButton.
If you have obtained the URL of a GIF from your codes, use the viewModel's sendFileMessage method to transmit the GIF file. You just need to pass the URL to the FileMessageCreateParams constructor in the fileURL to send a message.

class CustomGroupChannelViewController: SBUGroupChannelViewController {
    // ...
}

extension CustomGroupChannelViewController: CustomGroupChannelModuleInputDelegate {
    // Respond to the tap event on the Giphy button
    func groupChannelModuleDidTapGiphyButton(_ inputComponent: SBUGroupChannelModule.Input) {
        searchGiphy()
    }
    
    func searchGiphy() {
        let sendGiphy: (URL) -> Void = { giphyURL in
            let params = FileMessageCreateParams(fileURL: giphyURL.absoluteString)
            // Utilizing the viewModel to send the GIF message
            self.viewModel?.sendFileMessage(messageParams: params)
        }

        // Call Giphy SDK's search method
        // The GiphyURL is generated, call the sendGiphy block to send the message.
    }
}

4

Lastly, you need to update SBUModuleSet and  SBUViewControllerSet like below:

SBUModuleSet.GroupChannelModule.InputComponent = CustomGroupChannelModuleInputComponent.self
SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self

References

• How to add a new button in messageInputView? #103