Message Menu

Message Menu

Global IM UIKit provides basic message menu functionality. In use, users can display the message menu by right-clicking on a message in the message list. The menu items displayed will vary depending on the type and status of the clicked message.

tip

The above image is a reference design and not the default implementation of Global IM UIKit. Components such as the conversation list filter, extended function items in the top-right corner of the conversation page, and some items in the menu need to be implemented by the application itself.

Each menu item has a unique ID identifier, defined by the RCKitMessageMenuID enumeration.

Menu ID	Menu Description	Function Description
RCKitMessageMenuID.REPLY	Reply/Quote	-
RCKitMessageMenuID.MULIT_CHOICE	Multi-select	After clicking, multi-select mode will be enabled, allowing multiple messages to be selected for batch forwarding, individual forwarding, or deletion
RCKitMessageMenuID.COPY	Copy	Copy the content of a text message to the clipboard. This function is only valid for text messages
RCKitMessageMenuID.FORWARD	Forward	Forward the clicked message to another conversation
RCKitMessageMenuID.DELETE	Delete	This function is used to delete both local and server-stored messages

Global IM UIKit also uses this ID to query the multilingual configuration file to obtain the display text for the menu items. Therefore, you can modify the display text of the menu items by editing the multilingual entries.

// Get a copy of the multilingual entries
const entries = kitApp.cloneLanguageEntries('zh_CN');
// Modify the display text of the menu items
entries[RCKitMessageMenuID.REPLY] = 'Quote';
// Register the multilingual pack. Note that this method only takes effect if called before kitApp.ready()
kitApp.registerLanguagePack('zh_CN', entries);

About Deleting Messages

When a user performs a message deletion operation, the SDK will display a confirmation popup. For messages sent by the user that are within the allowed recall time limit, the popup will display a recall option.

When a message is deleted, the SDK will delete both the local and server-stored messages. However, for devices in a multi-device login scenario (e.g., mobile devices), the messages will not be deleted.

Customizing the Message Menu

You can obtain a copy of the existing message menu data via cloneMessageMenu to extend or modify the existing message menu.

const menu = kitApp.cloneMessageMenu();
// [{ id: 'message.menu.item.reply', icon: '', filter: (message) => message.messageType === MessageType.TEXT }]

The message menu data is an array, with each item representing a menu item. The data structure is defined as follows:

export interface IRCKitMessageMenuItem {
  /**
   * Menu ID. The SDK includes this data when dispatching click events and also uses this ID to query the multilingual UI display text.
   */
  id: string,
  /**
   * Menu icon
   */
  icon: string,
  /**
   * Filter function. Returns true to display the menu, false to hide it. This method is used to customize the display of the menu based on different message types.
   * @param message - The clicked message
   */
  readonly filter?: (message: IRCKitCachedMessage) => boolean,
}

Since the message menu item data is an array, you can modify the array data to achieve customization of the message menu, such as changing the display order, adding or deleting menu items, etc.

After making modifications, developers need to register the modified data into Global IM UIKit using the setMessageMenu method.

tip

setMessageMenu only takes effect if called before kitApp.ready().

kitApp.setMessageMenu(menu);

tip

Since Global IM UIKit matches the multilingual UI display text based on the conversation menu ID, when adding new menu items, you need to add the corresponding UI display text in the multilingual pack.

// Get a copy of the message menu items
const menu = kitApp.cloneMessageMenu();
// Add a test menu item
menu.push({
  id: 'message.menu.item.test',
  icon: '', // The icon UI needs to be provided by yourself
  filter: (message) => message.messageType === MessageType.TEXT, // Only display for text messages
});
// Register the message menu
kitApp.setMessageMenu(menu);

// Add multilingual UI display text
let entries = kitApp.cloneLanguageEntries('zh_CN');
entries['message.menu.item.test'] = 'Test Menu';
kitApp.registerLanguagePack('zh_CN', entries);

entries = kitApp.cloneLanguageEntries('en_US');
entries['message.menu.item.test'] = 'Test Menu';
kitApp.registerLanguagePack('en_US', entries);

When a new message menu item is clicked, the SDK will dispatch the RCKitEvents.MESSAGE_MENU_ITEM_CLICK event. You can listen to this event to implement custom menu click handling logic.

tip

For built-in menu items, the SDK will automatically handle click events. Unless developers have special business requirements, they should avoid calling evt.preventDefault() to block the default behavior.

kitApp.addEventListener(RCKitEvents.MESSAGE_MENU_ITEM_CLICK, (evt) => {
  const { id, message } = evt.data;
  switch (id) {
    case 'message.menu.item.test':
      // Handling logic
      break;
    default:
      // Note: Do not call evt.preventDefault() to intercept click events of built-in menu items
      break;
  }
});