How to modify the options of a message

How-To Guides
1

Modifying Options of a Message

This guide provides a step-by-step guide on modifying message options using our React UI Kit. A similar guide is available on how add a new option message, like the download button, in our Angular UI documentation here. Both solutions are applicable for all our V4 UI Kits.

Guide Details:

Language/Framework: React
SDK and UI Kit Versions:

"@cometchat/calls-sdk-javascript": "^4.0.6",
"@cometchat/chat-sdk-javascript": "^4.0.3",
"@cometchat/chat-uikit-react": "^4.1.1",

SDK Documentation: Web SDK

UI Kit Documentation: React UI Kit

Introduction

CometChat offers features for real-time messaging, including the ability to customize message actions to suit your application’s needs.

In this guide, we’ll walk you through the process of modifying message actions in CometChat, specifically focusing on removing options like delete or edit from all messages. We’ll use React and the CometChat component properties threadedMessagesConfiguration and messageListConfiguration to achieve this customization.

options

Prerequisites

Before proceeding, ensure you have the following:

  • Basic understanding of React hooks (useState and useEffect)
  • Familiarity with CometChat messaging SDK and React integration
  • Understanding of our Message Templates

Step by Step Guide

The following steps are for our React UI Kit. However, the same principles apply for any of our other UI Kits.

  1. Define a State for Message Templates:
    We use the useState hook to define the state for message templates. This state will hold the modified message templates after removing specific actions like delete or edit.
const [templates, setTemplates] = useState<CometChatMessageTemplate[]>([]);
  1. Use the useEffect Hook:
    The useEffect hook is deployed to fetch all default message templates when the component mounts.
useEffect(() => {
  let definedTemplates =
    CometChatUIKit.getDataSource().getAllMessageTemplates();
}, []);

  1. Modify Message Options:
    Within the useEffect, we iterate over each defined template and customize its options. Specifically, we filter out the ‘delete’ and ‘edit’ option from the message options array. Other option id’s available to filter out are ‘replyInThread’ and ‘copy’.

  2. Update State with Modified Templates:
    After customizing the message templates, we update the state using setTemplates to reflect the changes.

useEffect(() => {
    definedTemplates.map((template) => {
        template.options = (loggedInUser: CometChat.User, message: CometChat.BaseMessage, theme: CometChatTheme, group?: CometChat.Group | undefined) => {
            const messagesOptions = CometChatUIKit.getDataSource().getMessageOptions(loggedInUser, message, theme, group);
            const newOptions = messagesOptions.filter((option) => option.id !== ‘delete’ && option.id !== 'edit');
            console.log(newOptions);
            return newOptions;
        }
        return template;
    })
    setTemplates(definedTemplates);
}, [])
  1. Modifying the CometChat Component:
    Finally, we integrate the our new defined templates into the CometChatMessages component using the messageListConfiguration and threadedMessagesConfiguration properties.
<CometChatMessages
    user={new CometChat.User({uid: ‘superhero1’, name: “Iron Man”})}
    messageListConfiguration={
        new MessageListConfiguration({
            templates: templates
        })
    }
    threadedMessagesConfiguration={
        new ThreadedMessagesConfiguration({
            messageListConfiguration: new MessageListConfiguration({
                templates: templates
            })
        })
    }
/>