Input Menu

The Global IM UIKit input component includes basic input menus for sending message types other than text messages, such as image messages, file messages, and short video messages. Voice messages are currently not supported.

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 functionality items in the top-right corner of the conversation UI, and some items in the menu need to be implemented by the application.

Limitations

Global IM UIKit currently has the following restrictions:

• The maximum size for images and files is 100 MB.
• The maximum size for GIF files is 2 MB. Files exceeding this limit will be sent as file messages.
• Short videos of up to 2 minutes are supported.

Default Menu

Each menu item has a unique ID defined by the RCKitInputMenumID enumeration. The layout position of each menu item in the input component is determined by the position and order properties.

Global IM UIKit currently provides 4 default menu IDs to identify different menu items.

Menu ID	position	order	Description
RCKitInputMenumID.IMAGES	RCKitInputMenumPosition.SECONDARY_MENU	0	Select local images to send as image messages. Up to 100 images can be selected at once, with each image not exceeding 100 MB.
RCKitInputMenumID.FILES	RCKitInputMenumPosition.SECONDARY_MENU	1	Select local files and send them. Up to 100 files can be selected at once, with each file not exceeding 100 MB. Note: Selected files will be sent as different message types based on their file type.
RCKitInputMenumID.PHOTO	RCKitInputMenumPosition.SECONDARY_MENU	2	Launch the default camera to take a photo, which will be sent as an image message. Specifying a camera is currently not supported.
RCKitInputMenumID.EMOJI	RCKitInputMenumPosition.RIGHT	0	Open the emoji panel

Menu Layout

Global IM UIKit defines the layout position of each input menu button in the input component using the RCKitInputMenumPosition enumeration, which includes three values:

• RCKitInputMenumPosition.LEFT: The menu button is displayed to the left of the text input box.
• RCKitInputMenumPosition.RIGHT: The menu button is displayed to the right of the text input box.
• RCKitInputMenumPosition.SECONDARY_MENU: The menu button is included in a secondary menu and is not displayed by default.

When multiple menu items share the same position value, Global IM UIKit sorts them based on the order property, with lower order values appearing first.

Secondary Menu

When there is at least one menu item with RCKitInputMenumPosition.SECONDARY_MENU as its position, Global IM UIKit displays a secondary menu button in the input component. Clicking this button expands the secondary menu.

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 functionality items in the top-right corner of the conversation UI, and some items in the menu need to be implemented by the application.

Custom Input Menu

tip

Modifying the menu layout is only effective before the kitApp.ready() call.

Retrieve Input Menu Data

After understanding the layout rules of the input menu in Global IM UIKit, you can use the cloneInputMenu method to obtain a copy of the input menu data, allowing you to extend or modify the existing input menu.

Global IM UIKit defines the data structure of the input menu through the IRCKitInputMenu interface, which includes the following properties:

Property	Type	Description
items	Array of IRCKitInputMenumItem	A list of menu items, where each element is a menu item data; refer to IRCKitInputMenumItem for details.
secondaryPositon	RCKitInputMenumPosition	The position of the secondary menu button, which cannot be defined as RCKitInputMenumPosition.SECONDARY_MENU.
secondaryOrder	number	The display sequence of the secondary menu button in the specified area. When the secondary menu shares the same position and order as other menu items, the secondary menu button is displayed first, with a default value of 0.
secondaryIcon	string	The icon of the secondary menu button.

Code Example

const menu: IRCKitInputMenu = kitApp.cloneInputMenu();

// The list of menu items, which is an array: [{ ... }]
console.log(menu.items);

// The position of the secondary menu button, defaulting to RCKitInputMenumPosition.LEFT
console.log(menu.secondaryPositon);

// The display sequence of the secondary menu button in the specified area, defaulting to 0
console.log(menu.secondaryOrder);

// The icon of the secondary menu button, which can be modified by developers to replace the default icon
console.log(menu.secondaryIcon);

Modify Menu Items

Since the items property in the menu data is an array, you can modify the array elements to add, delete, or modify menu items.

Each menu item data structure is defined by the IRCKitInputMenumItem interface, which includes the following properties:

Property	Type	Required	Description
id	String	Yes	The menu ID identifier. When the menu item is in the secondary menu, Global IM UIKit uses this string to match multilingual configuration text. Built-in menu items are defined by the RCKitInputMenumID enumeration, which developers should not modify.
position	RCKitInputMenumPosition	Yes	The display position of the menu button.
order	number	Yes	When multiple menu items share the same position, they are sorted based on the order value, with lower order values appearing first.
icon	string	Yes	The menu icon.
filter	Function	No	A filter function to distinguish display based on different conversations; do not modify the filter definition in built-in menu items.

By modifying the position and order properties of a menu item, you can adjust its position. By modifying the icon property, you can replace the menu item icon.

Code Example

const menu: IRCKitInputMenu = kitApp.cloneInputMenu();

// Move the emoji menu item to the left of the input box
const emoji = menu.items.find(item => item.id === RCKitInputMenumID.EMOJI);
emoji.position = RCKitInputMenumPosition.LEFT;

// Update the input menu configuration. Note that this method only takes effect before kitApp.ready() is called.
kitApp.setInputMenu(menu);

The above code moves the emoji menu item to the left of the input box and updates the input menu configuration using the setInputMenu method after completing the modifications.

Add Menu Items

When adding a new menu item, developers only need to add a new menu item data to the menu item list and update the input menu configuration using the setInputMenu method.

When adding a new menu item, ensure that the menu ID does not conflict with the menu IDs defined by the RCKitInputMenumID enumeration.

Code Example

const menu: IRCKitInputMenu = kitApp.cloneInputMenu();

const menuItemId = 'input.menu.my.menu.item.test';
// Add a new menu item
menu.items.push({
  id: menuItemId,
  position: RCKitInputMenumPosition.RIGHT,
  order: 0,
  icon: 'https://example.com/my-menu-icon.png',
  filter(conversation: IRCKitCachedConversation) {
    // Only display this menu item in one-to-one chat conversations
    return conversation.conversationType === ConversationType.PRIVATE;
  }
});

// Update the input menu configuration. Note that this method only takes effect before kitApp.ready() is called.
kitApp.setInputMenu(menu);

When the new menu item is in the secondary menu (i.e., the position value is RCKitInputMenumPosition.SECONDARY_MENU), you need to add corresponding UI display text in the multilingual configuration. If the value is RCKitInputMenumPosition.LEFT or RCKitInputMenumPosition.RIGHT, no multilingual configuration is required.

// Add multilingual UI display text
const entries = kitApp.cloneLanguageEntries('zh_CN');
entries[menuItemId] = 'Test';
kitApp.registerLanguagePack('zh_CN', entries);

When a new menu item is clicked, it triggers the RCKitEvents.INPUT_MENU_ITEM_CLICK event. You can handle the click event by listening to this event.

kitApp.addEventListener(RCKitEvents.INPUT_MENU_ITEM_CLICK, (evt) => {
  const { id, conversation } = evt.data;
  console.log('Menu ID: ', id);
  console.log('Current Conversation: ', conversation);
});

tip

Click events on built-in menu items do not trigger the RCKitEvents.INPUT_MENU_ITEM_CLICK event.