Message Customization

Chat SDK supports fully custom message types. To enable this, several steps are required.

  1. Define a new message type

  2. Make a way to send the message

  3. Add UI to send the message

  4. Display the message in the chat view controller

1. Message type

The message type is an integer which should be unique. You can look at the PMessage.h to see which message types are already in use. It would be safe to use a type over 100.

You can define your message type as an enum or using #define.

public enum CustomMessageType: Int {
    case snap = 101
}

2. Hook into chat options to send the message

In the chat view controller, there is a plus button that shows a list of options when clicked. This can be useful as a way to send custom messages.

To do this, subclass BChatOption and implement the functions:

import ChatSDK

@objc public class CustomChatOption: BChatOption {
    @objc public override func icon() -> UIImage! {
        return UIImage(named: "YourIcon.png")
    }
    
    @objc override public func title() -> String! {
        return "Your Title"
    }
    
    @objc override public func execute(_ viewController: UIViewController!, threadEntityID: String!, handler: PChatOptionsHandler!) -> RXPromise! {
        let promise = RXPromise()
        
        //...
        // Execute your code. When it's complete, call promise.resolve(withResult: "") or promise.reject(withReason: "")
        // Add message send code from step 3. here
        
        return promise
    }
}

Here you can return an optional icon, a title and there is a function that is executed when the option is selected. You also have access to the view controller which allows you to present a custom view controller if necessary.

Register this option with the framework after Chat SDK initialization

BChatSDK.ui().add(CustomChatOption.init())

3. Send the message

oThe message can be sent like this. The most important thing is that it has the message type and the ID of the thread you want it to be sent to. You can also assign custom meta values to the message. These will be serialized and sent with the message.

public func send(threadEntityID: String) -> RXPromise {
    let message = BMessageBuilder.message()?
        .type(as: Int32(CustomMessageType.snap.rawValue))?
        .thread(threadEntityID)?
        .meta(["CustomKey1": "CustomValue1"])
        .build()
    return BChatSDK.thread().send(message)
}

4. Render the message

First, you need to make a custom table view cell by subclassing BMessageCell. There are some important functions you can override to customize the cell:

import ChatSDK

public class CustomMessageCell: BMessageCell {
    override public init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        // Your custom setup code here
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override public func setMessage(_ message: PElmMessage!, isSelected selected: Bool) {
        super.setMessage(message, isSelected: selected)
        
        // On bind code here
    }
    
    public override func cellContentView() -> UIView! {
        // Custom cell contents here
    
        return UIView()
    }
    
    public static override func messageWidth(_ message: PElmMessage!) -> Float {
        return 99 // Custom width
    }
    
    public static override func messageHeight(_ message: PElmMessage!) -> Float {
        return 99 // Custom height
    }
}

You can use the setMessage function to bind the message to your cell contents. You can also specify a custom contents view using cellContentView. The width and height of the cell are specified using static override functions. Look at BMessageCell.h for more details.

The final step is to bind this cell type to your message type. After Chat SDK initialization add the following code:

BChatSDK.ui().registerMessage(withCellClass: CustomMessageCell.self, messageType: NSNumber(value: CustomMessageType.snap.rawValue))

Last updated