feat: add reactions

convex/messages.ts

@@ -1,4 +1,5 @@
 import { ConvexError, v } from "convex/values";
+import emojiRegex from "emoji-regex";
 import { mutation, query } from "./lib/functions";
 
 export const getMessages = query({
@@ -31,7 +32,7 @@ export const getMessages = query({
 
     const [messages, requests] = await Promise.all([
       chat.edge("messages").map(async (message) => {
-        const [from, readBy, replyTo] = await Promise.all([
+        const [from, readBy, replyTo, reactions] = await Promise.all([
           ctx.table("users").getX(message.userId),
           message.edge("readBy"),
           message.replyTo
@@ -53,6 +54,7 @@ export const getMessages = query({
                   return null;
                 })
             : null,
+          message.edge("reactions").docs(),
         ]);
 
         return {
@@ -62,6 +64,7 @@ export const getMessages = query({
           from,
           readBy,
           replyTo,
+          reactions,
           sent: true,
         };
       }),
@@ -299,3 +302,69 @@ export const editMessage = mutation({
     });
   },
 });
+
+export const reactToMessage = mutation({
+  args: { messageId: v.id("messages"), reaction: v.string() },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+
+    if (identity === null) {
+      console.error("Unauthenticated call to mutation");
+      return null;
+    }
+
+    const convexUser = await ctx
+      .table("users")
+      .get("clerkId", identity.tokenIdentifier);
+
+    if (!convexUser?._id) {
+      throw new ConvexError(
+        "Mismatch between Clerk and Convex. This is an error by us.",
+      );
+    }
+
+    // Check if emoji
+    if (
+      !emojiRegex().test(args.reaction) ||
+      args.reaction.match(emojiRegex())!.length > 1
+    ) {
+      throw new ConvexError("Reaction must be a single emoji");
+    }
+
+    const trimmedReaction = args.reaction.trim();
+
+    // Check if message exists
+    const messageId = ctx.table("messages").normalizeId(args.messageId);
+
+    if (!messageId) {
+      throw new ConvexError("messageId was invalid");
+    }
+
+    // Check if user already reacted to this message
+    const existingReaction = await ctx
+      .table("reactions", "messageId", (q) => q.eq("messageId", messageId))
+      .filter((q) => q.eq(q.field("userId"), convexUser._id))
+      .first();
+
+    if (existingReaction && existingReaction.emoji === trimmedReaction) {
+      // Remove existing reaction
+      await existingReaction.delete();
+      return null;
+    } else if (existingReaction) {
+      // Update existing reaction
+      await existingReaction.patch({
+        emoji: args.reaction,
+      });
+      return existingReaction;
+    }
+
+    // Create new reaction if none exists
+    const reaction = await ctx.table("reactions").insert({
+      emoji: trimmedReaction,
+      userId: convexUser._id,
+      messageId,
+    });
+
+    return reaction;
+  },
+});

convex/schema.ts

@@ -14,6 +14,7 @@ const schema = defineEntSchema({
     .field("firstName", v.optional(v.string()))
     .field("email", v.optional(v.string()))
     .field("lastName", v.optional(v.string()))
+    .edges("reactions", { ref: true })
     .edges("privateChats")
     .edges("messages", { ref: true })
     .edges("clearRequests", { ref: true })
@@ -54,11 +55,17 @@ const schema = defineEntSchema({
     .field("replyTo", v.optional(v.id("messages")))
     .edge("privateChat")
     .edge("user")
+    .edges("reactions", { ref: true })
     .edges("readBy", {
       to: "users",
       inverseField: "readMessages",
       table: "readMessages",
     }),
+
+  reactions: defineEnt({})
+    .field("emoji", v.string())
+    .edge("user")
+    .edge("message"),
 });
 
 export default schema;

package.json

@@ -17,6 +17,8 @@
   "dependencies": {
     "@clerk/nextjs": "^6.5.1",
     "@clerk/shared": "^2.17.0",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@floating-ui/react": "^0.26.28",
     "@hookform/resolvers": "^3.9.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
@@ -42,6 +44,8 @@
     "convex-ents": "^0.13.0",
     "convex-helpers": "^0.1.65",
     "dayjs": "^1.11.13",
+    "emoji-mart": "^5.6.0",
+    "emoji-regex": "^10.4.0",
     "framer-motion": "^11.11.17",
     "geist": "^1.3.1",
     "import-in-the-middle": "^1.11.2",