Add custom message actions

You can add custom message actions to your theme.

Handle custom message actions

To do something in response to a user selecting a custom action, you need to listen for custom actions using the classic JavaScript SDK.

Use the onCustomMessageAction method on the Chatbox, Inbox or Popup to listen for custom message actions. For example, if you've defined an action named "report" for a user's role, you can handle it as follows:


1chatbox.onCustomMessageAction('report', (event) => {
2  // Send the message to your backend here, so a moderator can review it.
3  console.log('Reported message with id:', event.message.id);
4});

If you've attached additional parameters to the action, you can access them through the params property:


1chatbox.onCustomMessageAction('selectUser', (event) => {
2  console.log('Selected user with id:', event.params.selectedId);
3});

Troubleshooting

Your theme renders the message action menu. If you're using a legacy theme, or you customized your theme before the message actions menu was released, then you can add it to your theme yourself.

To render the menu button, add the following tag to the UserMessage template of your theme:


1<ActionMenu class="action-menu"><Icon type="horizontalDots" /></ActionMenu>

The ActionMenu component renders a button which, when clicked, shows the message actions popup menu. You can pass a class that you can use to style the button. Any children of this element also get rendered. The default theme contains a number of styles to make the menu work well in various circumstances, such as attachments, showing a sender's name, and the like. You can see the markup of the latest default theme by creating a new theme. You can then copy the new markup and styles to your existing theme where applicable. You can also customize some of the menu's styling in the layout section of your theme.

Edited indicator doesn't show up

If you made changes to the UserMessage or MessageBody components of your theme before message editing was introduced, then edited messages won't automatically show an edited label. To add an edit indicator to your theme, take the following steps.

1. Update UserMessage

The UserMessage now receives an editedAt prop, which is null for new messages, and holds the edit timestamp if the message has been edited. Pass this prop to the MessageBody, so it can display the edit indicator:


1<MessageBody body="{{ body }}" timestamp="{{ timestamp }}" editedAt="{{ editedAt }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}"
2                         isLongEmailMessage="{{isLongEmailMessage}}" darkenMenuArea="{{ darkenMenuArea }}" isSystemMessage="{{ false }}" />

2. Update MessageBody

Then in the MessageBody component, use this new prop to display the indicator. Locate the part of the template that renders the message's text by searching for the string "{{ body.formattedText }}". After that part, add the following snippet:


1<span t:if="{{editedAt}}" class="edited-indicator">({{strings.EDITED_INDICATOR}})</span>

This renders a span with class edited-indicator if the message has been edited. In this snippet strings.EDITED_INDICATOR is the text edited, translated to the current user's locale.

Replies don't show up

To ensure that replies show up, follow the steps in the replies upgrade guide.

Do you need more help? Get in touch and a member of the TalkJS team is happy to support.