Proposal for emoji reactions content type

XMTP Development Ideas & Improvements
2

We have implemented this proposal in an official content type located here and published on the NPM registry here.

This implementation contains 2 additional fields from the proposal: action and schema.

action

The action field has 2 possible values: added and removed. This field allows for un-reacting to messages. Because of this, processing reactions now requires all conversation messages in order to get the final state of reactions.

schema

As part of ongoing internal conversations, it was suggested to add a schema field to help guide developers with processing reactions.

There are 3 possible values to cover the most common use cases:

  • unicode: This value indicates the reaction is unicode value corresponding to an emoji and should be displayed as is
  • shortcode: This value means that the reaction is a string alias or shortcode for an emoji and should be converted by clients as they see fit
  • custom: The reaction is custom and may not refer to an emoji

For more information on shortcodes, check out this resource.

The final payload for the reaction content type can be found here.

An example implementation of this content type has been added to our official React Playground, which can be accessed live here. The PR that included this implementation can be found here.

Code sample

import { ContentTypeReaction } from "@xmtp/content-type-reaction";
import type { Reaction } from "@xmtp/content-type-reaction";

// react with 👍
const reaction: Reaction = {
  reference: originalMessage.id,
  action: "added",
  content: "👍",
  schema: "unicode",
};

await conversation.send(reaction, {
  contentType: ContentTypeReaction,
  contentFallback: `${client.address} reacted to "${originalMessage.content}" with {reaction.content}`
});

// un-react with 👍
const reaction: Reaction = {
  reference: originalMessage.id,
  action: "removed",
  content: "👍",
  schema: "unicode",
};

await conversation.send(reaction, {
  contentType: ContentTypeReaction,
  contentFallback: `${client.address} un-reacted to "${originalMessage.content}" with {reaction.content}`
});