<MessageActionMenu>

The <MessageActionMenu> component displays a dropdown menu attached to each message in the chat. It offers actions related to that message based on the user's permissions, such as editing, deleting, replying to, or leaving an emoji reaction to the given message.

interface MessageActionMenuProps

Properties

common
: CommonChatboxProps

A collection of objects which are passed to all Chatbox theme components.

message
: MessageSnapshot

The message that's attached to the action menu.

permissions
: MessagePermissions

The current user's permissions relating to the given message.

Controlling who can access which actions

In the default implementation, the permissions object is checked to determine which actions are available to which users. You can, however, customize this component to further restrict this logic as you see fit. For example, you may set custom fields on the message, or pass specific data to themeCustom and read it out here, to change who can access which actions.

Adding your own custom actions

If you customize this component, you may add or remove any <MenuItem> as you see fit. For example, to add a menu item that calls a JavaScript function in your main application code, pass it in the themeCustom field when you instantiate the Chatbox:

1<Chatbox
2  userId="..."
3  ...
4  themeCustom={{
5    reportMessage(messageId) {
6      alert("User reported message " + messageId);
7    }
8  }}
9/>

and add a menu item to your <MessageActionMenu> component which invokes this function:

1<${MenuItem}
2  className="t-menu-item"
3  onSelect=${() => common.themeCustom.reportMessage(message.id)}>
4  Report this message
5</${MenuItem}>

Example

In the default theme, the <MessageActionMenu> component is implemented as follows:

MessageActionMenu.js
view on GitHub
1// loading...