Reactions

Quick Reference for AI Agents & Developers

// Add reaction
await CometChat.addReaction(messageId, "😊");

// Remove reaction
await CometChat.removeReaction(messageId, "😊");

// Get reactions from message
const reactions = message.getReactions();
reactions.forEach((r) => {
  console.log(r.getReaction(), r.getCount(), r.getReactedByMe());
});

// Fetch detailed reaction info (who reacted)
const reactionRequest = new CometChat.ReactionRequestBuilder()
  .setMessageId(messageId)
  .setLimit(10)
  .build();
const reactions = await reactionRequest.fetchNext();

// Listen for real-time reactions
CometChat.addMessageListener("REACTION_LISTENER", new CometChat.MessageListener({
  onMessageReactionAdded: (event) => {
    console.log(event.getReactedBy().getName(), "reacted with", event.getReaction());
  },
  onMessageReactionRemoved: (event) => { /* handle removal */ }
}));

Reactions let users express emotions on messages using emojis, enhancing engagement in your chat application.

Available via: SDK | REST API | UI Kits

Add a Reaction

Add an emoji reaction to any message:

JavaScript
TypeScript
Async/Await

const messageId = 123;
const emoji = "😊";

CometChat.addReaction(messageId, emoji).then(
  (message) => console.log("Reaction added:", message),
  (error) => console.log("Error:", error)
);

const messageId: number = 123;
const emoji: string = "😊";

CometChat.addReaction(messageId, emoji).then(
  (message: CometChat.BaseMessage) => console.log("Reaction added:", message),
  (error: CometChat.CometChatException) => console.log("Error:", error)
);

async function addReaction(messageId, emoji) {
  try {
    const message = await CometChat.addReaction(messageId, emoji);
    console.log("Reaction added:", emoji);
    return message;
  } catch (error) {
    console.error("Failed to add reaction:", error);
    throw error;
  }
}

// Usage
await addReaction(123, "😊");
await addReaction(123, "👍");

You can react to text messages, media messages, and custom messages.

Remove a Reaction

Remove your reaction from a message:

JavaScript
TypeScript
Async/Await

const messageId = 123;
const emoji = "😊";

CometChat.removeReaction(messageId, emoji).then(
  (message) => console.log("Reaction removed:", message),
  (error) => console.log("Error:", error)
);

const messageId: number = 123;
const emoji: string = "😊";

CometChat.removeReaction(messageId, emoji).then(
  (message: CometChat.BaseMessage) => console.log("Reaction removed:", message),
  (error: CometChat.CometChatException) => console.log("Error:", error)
);

async function removeReaction(messageId, emoji) {
  try {
    const message = await CometChat.removeReaction(messageId, emoji);
    console.log("Reaction removed:", emoji);
    return message;
  } catch (error) {
    console.error("Failed to remove reaction:", error);
    throw error;
  }
}

// Usage
await removeReaction(123, "😊");

Get Reactions from Message

Access reactions directly from a message object:

const reactions = message.getReactions();

reactions.forEach((reaction) => {
  console.log("Emoji:", reaction.getReaction());
  console.log("Count:", reaction.getCount());
  console.log("Reacted by me:", reaction.getReactedByMe());
});

Fetch Reaction Details

Get detailed information about who reacted to a message:

JavaScript
TypeScript
Async/Await

const messageId = 123;
const limit = 10;

const reactionRequest = new CometChat.ReactionRequestBuilder()
  .setMessageId(messageId)
  .setLimit(limit)
  .build();

reactionRequest.fetchNext().then(
  (reactions) => {
    reactions.forEach((reaction) => {
      console.log("User:", reaction.getReactedBy().getName());
      console.log("Emoji:", reaction.getReaction());
    });
  },
  (error) => console.log("Error:", error)
);

const messageId: number = 123;
const limit: number = 10;

const reactionRequest = new CometChat.ReactionRequestBuilder()
  .setMessageId(messageId)
  .setLimit(limit)
  .build();

reactionRequest.fetchNext().then(
  (reactions: CometChat.MessageReaction[]) => {
    reactions.forEach((reaction) => {
      console.log("User:", reaction.getReactedBy().getName());
      console.log("Emoji:", reaction.getReaction());
    });
  },
  (error: CometChat.CometChatException) => console.log("Error:", error)
);

async function fetchReactionDetails(messageId, limit = 10) {
  try {
    const reactionRequest = new CometChat.ReactionRequestBuilder()
      .setMessageId(messageId)
      .setLimit(limit)
      .build();

    const reactions = await reactionRequest.fetchNext();
    reactions.forEach((reaction) => {
      console.log("User:", reaction.getReactedBy().getName());
      console.log("Emoji:", reaction.getReaction());
    });
    return reactions;
  } catch (error) {
    console.error("Failed to fetch reactions:", error);
    throw error;
  }
}

// Usage
const reactions = await fetchReactionDetails(123);

Filter by Specific Emoji

const reactionRequest = new CometChat.ReactionRequestBuilder()
  .setMessageId(messageId)
  .setReaction("😊")  // Only fetch this emoji's reactions
  .setLimit(10)
  .build();

ReactionRequestBuilder Options

Method	Description
`setMessageId(id)`	Required. Message to fetch reactions for
`setReaction(emoji)`	Filter by specific emoji
`setLimit(limit)`	Number of reactions to fetch (max 100)

Real-Time Reaction Events

Listen for reactions in real-time:

const listenerID = "REACTION_LISTENER";

CometChat.addMessageListener(
  listenerID,
  new CometChat.MessageListener({
    onMessageReactionAdded: (reactionEvent) => {
      console.log("Reaction added:", reactionEvent);
      
      const messageId = reactionEvent.getMessageId();
      const reaction = reactionEvent.getReaction();
      const reactedBy = reactionEvent.getReactedBy();
      
      console.log(`${reactedBy.getName()} reacted with ${reaction}`);
    },
    onMessageReactionRemoved: (reactionEvent) => {
      console.log("Reaction removed:", reactionEvent);
    }
  })
);

// Remove listener when done
CometChat.removeMessageListener(listenerID);

Update Message with Reaction

When you receive a real-time reaction event, update your message object:

// In your reaction event handler
onMessageReactionAdded: (reactionEvent) => {
  const action = CometChat.REACTION_ACTION.REACTION_ADDED;
  
  const updatedMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
    originalMessage,
    reactionEvent,
    action
  );
  
  // Update your UI with the modified message
  updateMessageInUI(updatedMessage);
}

onMessageReactionRemoved: (reactionEvent) => {
  const action = CometChat.REACTION_ACTION.REACTION_REMOVED;
  
  const updatedMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
    originalMessage,
    reactionEvent,
    action
  );
  
  updateMessageInUI(updatedMessage);
}

Check if User Reacted

Check if the logged-in user has reacted to a message:

const reactions = message.getReactions();

reactions.forEach((reaction) => {
  if (reaction.getReactedByMe()) {
    console.log(`You reacted with ${reaction.getReaction()}`);
  }
});

Implementation Example

class ReactionManager {
  constructor() {
    this.setupListener();
  }

  setupListener() {
    CometChat.addMessageListener(
      "REACTION_LISTENER",
      new CometChat.MessageListener({
        onMessageReactionAdded: (event) => this.handleReactionAdded(event),
        onMessageReactionRemoved: (event) => this.handleReactionRemoved(event)
      })
    );
  }

  async toggleReaction(messageId, emoji) {
    const message = this.getMessage(messageId);
    const reactions = message.getReactions();
    const existingReaction = reactions.find(
      (r) => r.getReaction() === emoji && r.getReactedByMe()
    );

    if (existingReaction) {
      await CometChat.removeReaction(messageId, emoji);
    } else {
      await CometChat.addReaction(messageId, emoji);
    }
  }

  handleReactionAdded(event) {
    const message = this.getMessage(event.getMessageId());
    const updated = CometChat.CometChatHelper.updateMessageWithReactionInfo(
      message,
      event,
      CometChat.REACTION_ACTION.REACTION_ADDED
    );
    this.updateUI(updated);
  }

  handleReactionRemoved(event) {
    const message = this.getMessage(event.getMessageId());
    const updated = CometChat.CometChatHelper.updateMessageWithReactionInfo(
      message,
      event,
      CometChat.REACTION_ACTION.REACTION_REMOVED
    );
    this.updateUI(updated);
  }
}

Display Reactions UI

function renderReactions(message) {
  const reactions = message.getReactions();
  
  return reactions.map((reaction) => ({
    emoji: reaction.getReaction(),
    count: reaction.getCount(),
    isSelected: reaction.getReactedByMe()
  }));
}

// Example output:
// [
//   { emoji: "😊", count: 5, isSelected: true },
//   { emoji: "👍", count: 3, isSelected: false },
//   { emoji: "❤️", count: 2, isSelected: false }
// ]

Add a Reaction

Remove a Reaction

Get Reactions from Message

Fetch Reaction Details

Filter by Specific Emoji

ReactionRequestBuilder Options

Real-Time Reaction Events

Update Message with Reaction

Check if User Reacted

Implementation Example

Display Reactions UI

Next Steps

Mentions

Threaded Messages

​Add a Reaction

​Remove a Reaction

​Get Reactions from Message

​Fetch Reaction Details

​Filter by Specific Emoji

​ReactionRequestBuilder Options

​Real-Time Reaction Events

​Update Message with Reaction

​Check if User Reacted

​Implementation Example

​Display Reactions UI

​Next Steps

Mentions

Threaded Messages

Add a Reaction

Remove a Reaction

Get Reactions from Message

Fetch Reaction Details

Filter by Specific Emoji

ReactionRequestBuilder Options

Real-Time Reaction Events

Update Message with Reaction

Check if User Reacted

Implementation Example

Display Reactions UI

Next Steps