Edit a Message

Allow users to edit sent messages

Quick Reference for AI Agents & Developers

// Edit a text message
const editedMessage = new CometChat.TextMessage(
  receiverID,
  "Updated text",
  CometChat.RECEIVER_TYPE.USER
);
editedMessage.setId(originalMessageId);  // Required!
const message = await CometChat.editMessage(editedMessage);

// Listen for edit events
CometChat.addMessageListener("EDIT_LISTENER", new CometChat.MessageListener({
  onMessageEdited: (message) => {
    console.log("Edited:", message.getText());
    console.log("Edited at:", message.getEditedAt());
    console.log("Edited by:", message.getEditedBy());
  }
}));

// Check if message was edited
if (message.getEditedAt()) {
  console.log("Message was edited");
}

CometChat allows users to edit their sent messages. This guide covers editing messages and handling edit events.

Available via: SDK | REST API | UI Kits

---

Edit a Message

Use editMessage() to modify a previously sent message. Currently, only TextMessage and CustomMessage can be edited.

JavaScript

const receiverID = "user_uid";
const messageText = "Updated message text";
const receiverType = CometChat.RECEIVER_TYPE.USER;
const messageId = 123; // ID of message to edit

const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);
textMessage.setId(messageId);

CometChat.editMessage(textMessage).then(
  (message) => {
    console.log("Message edited:", message);
    console.log("Edited at:", message.getEditedAt());
    console.log("Edited by:", message.getEditedBy());
  },
  (error) => {
    console.log("Error:", error);
  }
);

TypeScript

const receiverID: string = "user_uid";
const messageText: string = "Updated message text";
const receiverType: string = CometChat.RECEIVER_TYPE.USER;
const messageId: number = 123;

const textMessage: CometChat.TextMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);
textMessage.setId(messageId);

CometChat.editMessage(textMessage).then(
  (message: CometChat.TextMessage) => {
    console.log("Message edited:", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Error:", error);
  }
);

Async/Await

async function editMessage(originalMessage, newText) {
  const editedMessage = new CometChat.TextMessage(
    originalMessage.getReceiverId(),
    newText,
    originalMessage.getReceiverType()
  );
  editedMessage.setId(originalMessage.getId());

  try {
    const message = await CometChat.editMessage(editedMessage);
    console.log("Message edited:", message.getText());
    console.log("Edited at:", message.getEditedAt());
    return message;
  } catch (error) {
    console.error("Edit failed:", error);
    throw error;
  }
}

// Usage
const updatedMessage = await editMessage(originalMessage, "New text here");

You must set the message ID using setId() before calling editMessage().

Update Tags While Editing

You can update message tags during edit:

const textMessage = new CometChat.TextMessage(receiverID, newText, receiverType);
textMessage.setId(messageId);
textMessage.setTags(["edited", "important"]);

CometChat.editMessage(textMessage);

Tags set during edit replace all existing tags on the message.

---

Edit Permissions

User Role	Conversation Type	Can Edit
Message Sender	One-on-One	Own messages
Message Sender	Group	Own messages
Group Admin	Group	All messages
Group Moderator	Group	All messages

---

Real-Time Edit Events

Listen for message edits while your app is running:

const listenerID = "EDIT_LISTENER";

CometChat.addMessageListener(
  listenerID,
  new CometChat.MessageListener({
    onMessageEdited: (message) => {
      console.log("Message edited:", message);
      console.log("New text:", message.getText());
      console.log("Edited at:", message.getEditedAt());
      console.log("Edited by:", message.getEditedBy());
      
      // Update your UI
      updateMessageInList(message);
    }
  })
);

Edited Message Properties

Property	Method	Description
Edited At	getEditedAt()	Timestamp when edited
Edited By	getEditedBy()	UID of user who edited

---

Missed Edit Events

When fetching message history, edited messages include editedAt and editedBy fields:

JavaScript

messagesRequest.fetchPrevious().then((messages) => {
  messages.forEach((message) => {
    if (message.getEditedAt()) {
      console.log("This message was edited at:", message.getEditedAt());
    }
  });
});

Async/Await

async function fetchAndCheckEdits() {
  try {
    const messages = await messagesRequest.fetchPrevious();
    messages.forEach((message) => {
      if (message.getEditedAt()) {
        console.log("This message was edited at:", message.getEditedAt());
      }
    });
    return messages;
  } catch (error) {
    console.log("Error:", error);
    throw error;
  }
}

Additionally, an Action message is created when a message is edited:

Field	Value
action	"edited"
actionOn	Updated message object
actionBy	User who edited
actionFor	Receiver (User/Group)

---

Example: Edit Message UI

function editMessage(originalMessage, newText) {
  const editedMessage = new CometChat.TextMessage(
    originalMessage.getReceiverId(),
    newText,
    originalMessage.getReceiverType()
  );
  editedMessage.setId(originalMessage.getId());

  return CometChat.editMessage(editedMessage).then(
    (message) => {
      // Update local message list
      updateMessageInUI(message);
      return message;
    },
    (error) => {
      console.error("Edit failed:", error);
      throw error;
    }
  );
}

// Usage
editMessage(selectedMessage, "New message text");

---

Next Steps

Delete Messages

Remove messages from conversations

Send Messages

Send new messages