How to Modify Action Messages in a Group Chat

erica-cometchat · June 14, 2024, 4:32pm

Guide Overview

Language/Framework: React Native UI Kit

SDK and UI Kit Versions:

"@cometchat/calls-sdk-react-native": "^4.0.4",
"@cometchat/chat-sdk-react-native": "^4.0.6",
"@cometchat/chat-uikit-react-native": "^4.3.2"

** This guide can be used to customize the action messages of any our V4 UI kits**

Introduction

Customizing action messages in group chats can significantly enhance user experience by making system-generated messages more meaningful and relevant.

This guide explains how to customize the default action messages in a group chat conversation, such as “System added Max”.

If the group is managed by the system, the group actions can look like this:

Remove Unread Count for Group Actions

To remove unread count for Group Actions messages for your entire app, go to the dashboard. Under the ‘general’ tab, you will see an option to turn off all Group Actions.

Modify Group Actions

Follow these steps to tailor these messages to your needs.

Prerequisites

Familiarize yourself with the Message Template structure of the CometChat UI Kit. This guide uses the React Native UI Kit.
Review the Messaging Key Concepts, particularly the Action Group section.

Solution Overview

We will modify the CometChatConversationsWithMessages component. This involves altering the MessageList configuration.

The MessageList configuration is accessible via the Messages component. You can use any CometChat component that allows modification of the Messages configuration.

Retrieve Message Templates

Message templates dictate how each message is rendered. Start by fetching all message templates.

let theme = new CometChatTheme({});
let allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(theme);

Modify the Action Message Template

Iterate through each message template and check if its category is ‘action’ and if the type is ‘TYPE_GROUP_MEMBER’. The second condition is needed to ensure we only override the action for group member actions and not messages actions (like message is deleted/edited).

allTemplates.map((template) => {
  if (
    template.category === CometChat.CATEGORY_ACTION &&
    template.type === CometChat.ACTION_TYPE.TYPE_GROUP_MEMBER
  ) {
    // Modify the content view
  }
});

Define Custom Content View for Action Messages

Override the ContentView for action messages using values from the message object. Cast messageObj to CometChat.Action to access action-specific properties.

Refer to the Action Message SDK class for more details on the properties of the Action message.

  allTemplates.map((template) => {
    if (template.category === CometChat.CATEGORY_ACTION && template.type === CometChat.ACTION_TYPE.TYPE_GROUP_MEMBER) {
      console.log("Action Template:", template); // Debug log if it matches category
        // Modify the content view
      template.ContentView = (messageObj, alignMent) => {
        const actionMessage = messageObj as CometChat.Action;
        const action = actionMessage.getAction();
        console.log("action message " , actionMessage);
        const actionOn = actionMessage.getActionOn() as CometChat.User;
        const actionBy = actionMessage.getActionBy() as CometChat.User;
        const actionOnUserName = actionOn?.getName();
        const actionByUserName = actionBy?.getName();
        let message = "CometChat has made an update";

        switch(action){
          case  CometChat.ACTION_TYPE.MEMBER_JOINED:
            message = (actionByUserName + " has joined the group.");
            break;
          case CometChat.ACTION_TYPE.MEMBER_LEFT:
            message =(actionByUserName + " has left the group.");
            break;
          case CometChat.ACTION_TYPE.MEMBER_KICKED:
            message = (actionOnUserName + " has been kicked from the group.");
            break;
          case CometChat.ACTION_TYPE.MEMBER_BANNED:
            message = (actionOnUserName + " has been banned from the group.");
            break;
          case CometChat.ACTION_TYPE.MEMBER_UNBANNED:
            message = actionOnUserName + " has been unbanned from the group.";
            break;
          case CometChat.ACTION_TYPE.MEMBER_ADDED:
            message = actionOnUserName + " has been added to the group.";
            break;
          case CometChat.ACTION_TYPE.MEMBER_SCOPE_CHANGED:
            message = "The scope of " + actionOnUserName + " has been changed.";
            break;
        }

        return (
          // View of the message to render
          <View>
            <Text>{message}</Text>
          </View>
        );
      };
    }
    return template;
  });

Message List Configuration

Pass the updated message templates to the Message List Configuration.

const messageListConfiguration: MessageListConfigurationInterface = {
  templates: allTemplates,
};

Messages Configuration

After defining messageListConfiguration, pass it to the Messages Configuration.

const messagesConfiguration: MessagesConfigurationInterface = {
  messageListConfiguration: messageListConfiguration,
};

Modify the CometChat Component

Use the ConversationsWithMessages component to view the customized action messages.

return (
  <CometChatConversationsWithMessages
    messagesConfigurations={messagesConfiguration}
  />
);