Custom Message Types

Global IM UIKit supports custom message types (different from built-in message types) and allows modifying the display format of both built-in and custom message types in the Global IM UIKit SDK chat UI.

Creating Custom Message Types

In addition to using the SDK's built-in message types, you can also create custom messages based on your business needs.

tip

For details on how to create custom message types, refer to the IMLib SDK's Custom Message Types.

Custom messages can only be displayed in the Global IM UIKit chat UI if their persistentFlag is set to one of the following values:

• MessageTag.ISCOUNTED
• MessageTag.ISPERSISTED

If a custom message type has one of these properties, you must create a display template for it. Global IM UIKit will use this template to render the message. Otherwise, the custom message will be displayed as "This message type is not supported in the current version."

Creating and Registering Display Templates for Custom Messages

If you create a custom message type and need it to be displayed in the chat UI, you must create a corresponding message display template. Otherwise, the SDK will not be able to render the message properly. The following steps are similar to those for modifying the default display templates of RC's built-in messages. If needed, you can also refer to Replacing Default Display Templates for Built-in Messages to understand how the default message display templates for built-in message types are implemented and how to create custom message display templates.

Step 1: Create a Custom Message Template

All message display templates inherit from BaseMessageItemProvider. Your app needs to extend BaseMessageItemProvider to create a custom message display template class.

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

   Below is a complete example of creating a message display template CustomMessageProvider:

   public class CustomMessageProvider extends BaseMessageItemProvider<CustomMessage> {
   
     public CustomMessageProvider(){
       mConfig.showReadState = true; // Modify template properties. Here, the template enables the display of read receipts in one-to-one chat sessions.
       mConfig.xxx = ...; // Other template property configurations are omitted here.
     }
         /**
         * Create a 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's ViewHolder
         * @param t The message corresponding to this display template
         * @param uiMessage {@link UiMessage}
         * @param position Message position
         * @param list List
         * @param listener Click event listener for ViewModel. If a child view's click event needs to be handled by the ViewModel, it can be passed through this listener.
         */
       @Override
       protected void bindMessageContentViewHolder(ViewHolder holder, ViewHolder parentHolder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
   
       }
   
         /**
         * Handle click events on messages in the chat UI
         * @param holder ViewHolder
         * @param t Custom message
         * @param uiMessage {@link UiMessage}
         * @param position Position
         * @param list List data
         * @param listener Click event listener for ViewModel. If a child view's click event needs to be handled by the ViewModel, it can be passed through this listener.
         * @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 long-click events on messages in the chat UI */
       @Override
       protected boolean onItemLongClick(ViewHolder holder, CustomMessage customMessage, UiMessage uiMessage, int position, List<UiMessage> list, IViewProviderListener<UiMessage> listener) {
           return false;
       }
       /**
         * Determine whether this template should display the message based on its content
         *
         * @param messageContent Message content
         * @return Whether this template handles the message.
         */
       @Override
       protected boolean isMessageViewType(MessageContent messageContent) {
           return messageContent instanceof CustomMessage;
       }
   
         /**
         * The content to display in the conversation list when the last message of a conversation is of this type.
         * For example: An image message should display "Image" in the conversation list, so return the corresponding string resource.
         * @param context Context
         * @param t Message content
         * @return The string resource to display in the conversation list
         */
       @Override
       public Spannable getSummarySpannable(Context context, CustomMessage customMessage) {
           return new SpannableString("Content to display in the conversation list");
       }
   }

2. The SDK provides a message display configuration class ChatConfig, which includes the following properties:

   Message Display Template Properties	Default Value	Description
   isDisplayOwnAvatarInPrivateChat	false	Whether to display the user's own avatar in one-to-one chat.
   isDisplayOthersAvatarInPrivateChat	false	Whether to display others' avatars in one-to-one chat.
   isDisplayOwnAvatarInGroupChat	false	Whether to display the user's own avatar in group chat.
   isDisplayOthersAvatarInGroupChat	true	Whether to display others' avatars in group chat.
   isDisplayOwnNickNameInPrivateChat	false	Whether to display the user's own nickname in one-to-one chat.
   isDisplayOthersNickNameInPrivateChat	false	Whether to display others' nicknames in one-to-one chat.
   isDisplayOwnNickNameInGroupChat	false	Whether to display the user's own nickname in group chat.
   isDisplayOthersNickNameInGroupChat	true	Whether to display others' nicknames in group chat.
   isAlignOwnMessagesLeft	false	Whether to align the user's own messages to the left.
   isShowFirstMessagesOnPageLoad	true	Whether to display an unread message when entering the page.

   You can call this message display configuration class in the onCreate method of the Application class before opening the chat UI, as shown below:

   // Enable displaying the user's own nickname in group chat.
   ConfigCenter.getChatConfig().setDisplayOwnNickNameInGroupChat(true);

3. You must implement isMessageViewType and pass the MessageContent of the message type you want to display. This template will then be bound to the message type.

4. To handle message click and long-click events, implement onItemClick and onItemLongClick. Your app can listen to message click and long-click events through the onMessageClick and onMessageLongClick methods in the chat UI. For details, refer to Page Event Listeners.

Step 2: Register the Display Template

Provide the newly created custom message display template to the SDK.

ConfigCenter.getChatConfig().addMessageProvider(new CustomMessageProvider());