How to remove specific message options in React UIKit

[Gaurav.CometChat]

Guide Overview

This guide explains how you can filter out some message options based on your requirements.
For this guide, we will be using the React UI Kit. But this can be achieved using any of the CometChat UI Kits.

UIKit Version:

"@cometchat/chat-uikit-react": "^4.3.24",

Note: The following are the IDs of the default message options available in the Message Templates that you can use to filter the options.

1. react
2. replyInThread
3. copy
4. edit
5. delete
6. sendMessagePrivately
7. messageInformation

Steps to implement:

1. Create a new template by extending the default message templates:

• Get the default messages templates, override the options for each of the template.
• getMessageOptions() method filter two options with id’s sendMessagePrivately and delete.

Please make sure to pass theme inside the CometChatUIKit.getDataSource().getAllMessageTemplates() so that theme is applied properly in the templates while getting the default templates. Here, we have passed a new instance of the CometChatTheme.

  const getMessageOptions = (
    loggedInUser: User,
    message: BaseMessage,
    theme: CometChatTheme,
    group?: Group | undefined
  ) => {
    let defaultOption = CometChatUIKit.getDataSource().getMessageOptions(
      loggedInUser,
      message,
      theme,
      group
    );
    defaultOption = defaultOption.filter((opt) => opt.id !== "sendMessagePrivately" && opt.id !=="delete")
    return defaultOption;
  };
  
    const getFilteredOptionTemplate = () => {
    const defaultTemplate =
      CometChatUIKit.getDataSource().getAllMessageTemplates(
        new CometChatTheme({})
      );
    defaultTemplate.forEach((template) => {
      template.options = (loggedInUser: CometChat.User, message: CometChat.BaseMessage, theme: CometChatTheme, group?: CometChat.Group) => getMessageOptions(loggedInUser,message,theme,group);
    });
    return defaultTemplate;
  };

2. Pass messageListConfiguration to the component:

<CometChatConversationsWithMessages
  messagesConfiguration={
    new MessagesConfiguration({
      messageListConfiguration: new MessageListConfiguration({
        templates: getFilteredOptionTemplate(),
      }),
    })
  }
/>

• To ensure these configurations are applied to threaded messages as well, you need to pass the same messageListConfiguration to the threadedMessagesConfiguration within the messagesConfiguration.

<CometChatConversationsWithMessages
  messagesConfiguration={
    new MessagesConfiguration({
          threadedMessageConfiguration: new ThreadedMessagesConfiguration({
             messageListConfiguration: new MessageListConfiguration({
                templates: getFilteredOptionTemplate(),
            }),
          }),
          messageListConfiguration: new MessageListConfiguration({
          templates: getFilteredOptionTemplate(),
      }),
    })
  }
/>

Default Message Options:

Output:

Both the options delete and reply privately has been removed.

Please note that if the logged-in user has a scope of moderator, admin, or owner of the group, they can also edit or delete messages from the participants.