Custom Messages

When using Global IM UIKit, if your business layer requires custom message types, you need to register them via the registerMessage interface to ensure that Global IM UIKit can correctly parse and render these messages.

registerMessage

tip

The registerMessage interface only takes effect if called before kitApp.ready().

Parameter	Type	Required	Description
messageType	String	Yes	The message type, defined by the developer. Avoid starting with RC: to prevent conflicts with built-in message types.
options	IRCKitRegisterMessageTypeOpts	Yes	Message configuration options. Detailed attribute descriptions are provided below.

IRCKitRegisterMessageTypeOpts Configuration Details

Attribute	Type	Required	Description
isPersited	Boolean	No	Whether to store the message; false: The message will not appear in the history message list, and thus the UI will not display it. When receiving such messages, the SDK will notify the developer via the RCKitEvents.UNSCHEDULED_MESSAGES event. true: The message will be displayed in the message list. You need to implement the digest function. If you want to display it as a message bubble, you need to provide a component to define the message component.
isCounted	Boolean	No	Whether to count the message, affecting the unread count when the recipient receives the message.
isStatusMessage	Boolean	No	Whether it is a status message. Status messages are not counted, not stored, and do not enter offline compensation. They are only received when the user is online.
searchProps	Array of String	No	Fields used for search matching on the Electron platform.
digest	Function	No	The message digest function, used to customize the display of messages in the conversation list (last message) and message list (gray bar message). If a component is provided during registration, the SDK will prioritize using the component for message rendering in the message list.
component	IRCKitCustomMessageComponentOpts	No	The definition of the message bubble UI rendering component. If not configured, the SDK will render the message as a gray bar message using the digest function.

Message Display Categories

In Global IM UIKit, all messages can be categorized into three types based on display requirements:

• Notification messages: Typically messages with isPersited set to false. The SDK does not handle these internally. You can receive such messages by registering the RCKitEvents.RECV_NEW_MESSAGES event.
• Gray bar messages: These messages are displayed as gray bars in the message list, such as group member change notifications. Developers need to provide a digest function. Generally, gray bar messages are not counted (i.e., isCounted is false).
• Bubble messages: These messages are displayed as bubbles in the message list, such as text messages, image messages, etc. Developers need to provide a component definition.

Registering Gray Bar Messages

Here’s an example of registering a custom message type 'Xyz':

const XyzMessage = kitApp.registerMessageType('Xyz', {
  isCounted: true,
  isPersited: false,
  isStatusMessage: false,
  searchProps: ['content'],
  digest: (message, language) => {
    // `message` is the message object, which can be used to read the message content
    // `language` is the current language environment, such as `zh_CN`, `en_US`, etc.
    return 'This is a gray bar message';
  },
});

Registering Bubble Messages

• Global IM UIKit internally uses Vue as the DOM component rendering engine. Therefore, when defining custom components using the interface, the component template syntax is consistent with Vue.

Here’s an example of registering a custom message type 'Xyz':

const XyzMessage = kitApp.registerMessageType('Xyz', {
  isCounted: true,
  isPersited: true,
  isStatusMessage: false,
  searchProps: ['content'],
  digest: (message, language) => {
    // For bubble messages, the return value of the `digest` function will only be used for displaying the last message in the conversation list
    return '[XyzMessage]'
  },
  // Define the bubble message component
  component: {
    // Component tag name
    tag: 'xyz-message',
    // Component template
    template: `<div>{{ data }}</div>`,
    setup(props, ctx) {
      const { message } = props; // Message object
      return {
        data: message.content,
      };
    },
    // Stylesheet
    styles: [`
      .div {
        color: red;
      }
    `]
  }
});

Sending Custom Messages

You can send custom messages via the sendMessage interface. Here’s an example:

// Build the target conversation
const conversation = {
  conversationType: RongIMLib.ConversationType.PRIVATE,
  targetId: 'A'
};
// Build the message
const msg = new XyzMessage({ content: 'hello' });
// Send the message
const { code } = await kitApp.sendMessage(conversation, msg);