Custom message types

Chat UI SDK supports custom message types in addition to built-in types. You can define how custom messages display on the channel page.

Create a custom message type

Define custom messages to meet your business requirements.

tip

Register custom message types with the nexconn public API: call NCEngine.registerCustomMessages(...) to register the message type, then register the corresponding Chat UI message template.

Custom messages display on the channel page only when their persistentFlag is set to one of these values:

• MessageTag.ISCOUNTED
• MessageTag.ISPERSISTED

If your custom message type has either attribute, create a display template for it. Chat UI SDK uses this template to render the message. Without a template, the custom message displays as This message is not supported in the current version.

Create and register a display template

The following steps are similar to modifying built-in message display styles. For reference, see Built-in default message display templates to understand how built-in message templates work.

Step 1: Create a custom message template

All message display templates inherit from BaseMessageItemProvider. Extend BaseMessageItemProvider to create your message display template class.

1. Create a subclass that extends BaseMessageItemProvider<CustomMessage>, for example, CustomMessageProvider.

   The following example shows a complete CustomMessageProvider implementation:

   Java

   public class CustomMessageProvider extends BaseMessageItemProvider<CustomMessage> {
   
     public CustomMessageProvider(){
       mConfig.showReadState = true; // Modify template properties. Here, the template enables read receipt status display in direct channels.
       mConfig.xxx = ...; // Additional property configurations omitted
     }
         /**
         * Create ViewHolder
         * @param parent Parent ViewGroup
         * @param viewType View type
         * @return ViewHolder
         */
   
       @Override
       protected ViewHolder onCreateMessageContentViewHolder(ViewGroup parent, int viewType) {
           View view =
                   LayoutInflater.from(parent.getContext())
                           .inflate(R.layout.xxx, parent, false);
           return new ViewHolder(parent.getContext(), view);
       }
   
       /**
         * Set values for views in the message view
         * @param holder ViewHolder
         * @param parentHolder Parent layout ViewHolder
         * @param t Message corresponding to this display template
         * @param uiMessage {@link UiMessage}
         * @param position Message position
         * @param list List
         * @param listener ViewModel click event listener. If a subview's click event needs ViewModel processing, use this listener for callbacks.
         */
       @Override
       protected void bindMessageContentViewHolder(ViewHolder holder, ViewHolder parentHolder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
   
       }
   
         /**
         * Handle message click events on the channel page
         * @param holder ViewHolder
         * @param t Custom message
         * @param uiMessage {@link UiMessage}
         * @param position Position
         * @param list List data
         * @param listener ViewModel click event listener. If a subview's click event needs ViewModel processing, use this listener for callbacks.
         * @return Whether the click event was consumed
         */
       @Override
       protected boolean onItemClick(ViewHolder holder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
           return false;
       }
       /** Handle message long-press events on the channel page */
       @Override
       protected boolean onItemLongClick(ViewHolder holder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
           return false;
       }
       /**
         * Determine whether the message type matches this template based on message content
         *
         * @param messageContent Message content
         * @return Whether this template handles the message type.
         */
       @Override
       protected boolean isMessageViewType(MessageContent messageContent) {
           return messageContent instanceof CustomMessage;
       }
   
         /**
         * Content to display in the channel list when the last message in a channel is this message type.
         * For example: an image message displays as "Image" in the channel list, so return the corresponding string resource.
         * @param context Context
         * @param t Message content
         * @return String resource to display in the channel list
         */
       @Override
       public Spannable getSummarySpannable(Context context, CustomMessage customMessage) {
           return new SpannableString("Content displayed in channel list");
       }
   }

2. The SDK provides MessageItemProviderConfig to configure message display properties:

   Property	Default	Description
   showPortrait	true	Show the avatar.
   centerInHorizontal	false	Center message content horizontally.
   showWarning	true	Show a warning for failed sends.
   showProgress	true	Show send progress.
   showSummaryWithName	true	Show the sender name in the channel.
   showReadState	false	Show read receipt status in direct channels.
   showContentBubble	true	Show the message bubble.

   In your custom template constructor, access the base class MessageItemProviderConfig variable mConfig to modify template properties:

   Java

   public CustomMessageProvider(){
       mConfig.showReadState = true; // Modify template properties. Here, the template enables read receipt status display in direct channels.
       mConfig.xxx = ...; // Additional property configurations omitted
     }

3. Implement isMessageViewType and pass the MessageContent of the message type to display. This binds the template to the message type.

4. To handle message click and long-press events, implement onItemClick and onItemLongClick. Your app can listen for these events on the channel page through onMessageClick and onMessageLongClick. For details, see Page event listeners.

Step 2: Register the display template

After SDK initialization, register your custom message display template:

Java

NCChatUIConfig.channelConfig().addMessageProvider(new CustomMessageProvider());