feat: custom emoji reactions

src/element/chat-message.tsx

@@ -1,16 +1,23 @@
 import { useUserProfile } from "@snort/system-react";
 import { NostrEvent, parseZap, EventPublisher, EventKind } from "@snort/system";
 import { useRef, useState, useMemo } from "react";
-import { useMediaQuery, useHover, useOnClickOutside, useIntersectionObserver } from "usehooks-ts";
+import {
+  useMediaQuery,
+  useHover,
+  useOnClickOutside,
+  useIntersectionObserver,
+} from "usehooks-ts";
 
 import { System } from "../index";
 import { formatSats } from "../number";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon } from "./icon";
+import { Emoji } from "./emoji";
 import { Profile } from "./profile";
 import { Text } from "./text";
 import { SendZapsDialog } from "./send-zap";
 import { findTag } from "../utils";
+import type { EmojiPack } from "../hooks/emoji";
 
 interface Emoji {
   id: string;
@@ -31,35 +38,42 @@ export function ChatMessage({
   streamer,
   ev,
   reactions,
+  emojiPacks,
 }: {
   ev: NostrEvent;
   streamer: string;
   reactions: readonly NostrEvent[];
+  emojiPacks: EmojiPack[];
 }) {
   const ref = useRef(null);
   const inView = useIntersectionObserver(ref, {
-        freezeOnceVisible: true
+    freezeOnceVisible: true,
-    })
+  });
   const emojiRef = useRef(null);
   const isTablet = useMediaQuery("(max-width: 1020px)");
   const isHovering = useHover(ref);
   const [showZapDialog, setShowZapDialog] = useState(false);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const profile = useUserProfile(System, inView?.isIntersecting ? ev.pubkey : undefined);
+  const profile = useUserProfile(
+    System,
+    inView?.isIntersecting ? ev.pubkey : undefined
+  );
   const zapTarget = profile?.lud16 ?? profile?.lud06;
   const zaps = useMemo(() => {
-        return reactions.filter(a => a.kind === EventKind.ZapReceipt)
+    return reactions
-            .map(a => parseZap(a, System.ProfileLoader.Cache))
+      .filter((a) => a.kind === EventKind.ZapReceipt)
-            .filter(a => a && a.valid);
+      .map((a) => parseZap(a, System.ProfileLoader.Cache))
-    }, [reactions])
+      .filter((a) => a && a.valid);
-    const emojis = useMemo(() => {
+  }, [reactions]);
+  const emojiReactions = useMemo(() => {
     const emojified = reactions
       .filter((e) => e.kind === EventKind.Reaction && findTag(e, "e") === ev.id)
       .map((ev) => emojifyReaction(ev.content));
     return [...new Set(emojified)];
   }, [ev, reactions]);
+  const emojiNames = emojiPacks.map((p) => p.emojis).flat();
 
-    const hasReactions = emojis.length > 0;
+  const hasReactions = emojiReactions.length > 0;
   const totalZaps = useMemo(() => {
     const messageZaps = zaps.filter((z) => z.event === ev.id);
     return messageZaps.reduce((acc, z) => acc + z.amount, 0);
@@ -74,12 +88,31 @@ export function ChatMessage({
     setShowEmojiPicker(false);
   });
 
+  function getEmojiById(id: string) {
+    return emojiNames.find((e) => e.at(1) === id);
+  }
+
   async function onEmojiSelect(emoji: Emoji) {
     setShowEmojiPicker(false);
     setShowZapDialog(false);
+    let reply = null;
     try {
       const pub = await EventPublisher.nip7();
-            const reply = await pub?.react(ev, emoji.native || "+1");
+      if (emoji.native) {
+        reply = await pub?.react(ev, emoji.native || "+1");
+      } else {
+        const e = getEmojiById(emoji.id);
+        if (e) {
+          reply = await pub?.generic((eb) => {
+            return eb
+              .kind(EventKind.Reaction)
+              .content(`:${emoji.id}:`)
+              .tag(["e", ev.id])
+              .tag(["p", ev.pubkey])
+              .tag(["emoji", e.at(1)!, e.at(2)!]);
+          });
+        }
+      }
       if (reply) {
         console.debug(reply);
         System.BroadcastEvent(reply);
@@ -105,11 +138,7 @@ export function ChatMessage({
         onClick={() => setShowZapDialog(true)}
       >
         <Profile
-                    icon={
+          icon={ev.pubkey === streamer && <Icon name="signal" size={16} />}
-                        ev.pubkey === streamer && (
-                            <Icon name="signal" size={16} />
-                        )
-                    }
           pubkey={ev.pubkey}
           profile={profile}
         />
@@ -122,11 +151,23 @@ export function ChatMessage({
                 <span className="zap-pill-amount">{formatSats(totalZaps)}</span>
               </div>
             )}
-                        {emojis.map((e) => (
+            {emojiReactions.map((e) => {
+              const isCustomEmojiReaction =
+                e.length > 1 && e.startsWith(":") && e.endsWith(":");
+              const emojiName = e.replace(/:/g, "");
+              const emoji = isCustomEmojiReaction && getEmojiById(emojiName);
+              return (
                 <div className="message-reaction-container">
+                  {isCustomEmojiReaction && emoji ? (
+                    <span className="message-reaction">
+                      <Emoji name={emoji.at(1)!} url={emoji.at(2)!} />
+                    </span>
+                  ) : (
                     <span className="message-reaction">{e}</span>
+                  )}
                 </div>
-                        ))}
+              );
+            })}
           </div>
         )}
         {ref.current && (
@@ -170,6 +211,7 @@ export function ChatMessage({
         <EmojiPicker
           topOffset={topOffset}
           leftOffset={leftOffset}
+          emojiPacks={emojiPacks}
           onEmojiSelect={onEmojiSelect}
           onClickOutside={() => setShowEmojiPicker(false)}
           ref={emojiRef}

src/element/live-chat.css

@@ -347,6 +347,12 @@
   line-height: 22px;
 }
 
+.message-reaction .emoji {
+  width: 15px;
+  height: 15px;
+  margin-bottom: -2px;
+}
+
 .zap-pill-amount {
   text-transform: lowercase;
   color: #FFF;

src/element/live-chat.tsx

@@ -9,8 +9,10 @@ import {
   encodeTLV,
 } from "@snort/system";
 import { useEffect, useMemo } from "react";
+import uniqBy from "lodash.uniqby";
 
 import { System } from "../index";
+import useEmoji, { packId } from "../hooks/emoji";
 import { useLiveChatFeed } from "../hooks/live-chat";
 import { Profile } from "./profile";
 import { Icon } from "./icon";
@@ -76,6 +78,13 @@ export function LiveChat({
     return () => System.ProfileLoader.UntrackMetadata(pubkeys);
   }, [feed.zaps]);
 
+  const userEmojiPacks = useEmoji(login!.pubkey);
+  const userEmojis = userEmojiPacks.map((pack) => pack.emojis).flat();
+  const channelEmojiPacks = useEmoji(host);
+  const allEmojiPacks = useMemo(() => {
+    return uniqBy(channelEmojiPacks.concat(userEmojiPacks), packId);
+  }, [userEmojiPacks, channelEmojiPacks]);
+
   const zaps = feed.zaps
     .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
     .filter((z) => z && z.valid);
@@ -137,6 +146,7 @@ export function LiveChat({
             case LIVE_STREAM_CHAT: {
               return (
                 <ChatMessage
+                  emojiPacks={allEmojiPacks}
                   streamer={streamer}
                   ev={a}
                   key={a.id}
@@ -160,7 +170,7 @@ export function LiveChat({
       {(options?.canWrite ?? true) && (
         <div className="write-message">
           {login ? (
-            <WriteMessage link={link} />
+            <WriteMessage emojiPacks={allEmojiPacks} link={link} />
           ) : (
             <p>Please login to write messages!</p>
           )}

src/element/write-message.tsx

@@ -1,6 +1,5 @@
 import { NostrLink, EventPublisher, EventKind } from "@snort/system";
 import { useRef, useState, useMemo, ChangeEvent } from "react";
-import uniqBy from "lodash.uniqby";
 
 import { LIVE_STREAM_CHAT } from "../const";
 import useEmoji, { packId } from "../hooks/emoji";
@@ -10,27 +9,23 @@ import AsyncButton from "./async-button";
 import { Icon } from "./icon";
 import { Textarea } from "./textarea";
 import { EmojiPicker } from "./emoji-picker";
+import type { EmojiPack, Emoji } from "../hooks/emoji";
 
-interface Emoji {
+export function WriteMessage({
-  id: string;
+  link,
-  native?: string;
+  emojiPacks,
-}
+}: {
-
+  link: NostrLink;
-export function WriteMessage({ link }: { link: NostrLink }) {
+  emojiPacks: EmojiPack[];
+}) {
   const ref = useRef(null);
   const emojiRef = useRef(null);
   const [chat, setChat] = useState("");
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const login = useLogin();
-  const userEmojiPacks = useEmoji(login!.pubkey);
+  const emojis = emojiPacks.map((pack) => pack.emojis).flat();
-  const userEmojis = userEmojiPacks.map((pack) => pack.emojis).flat();
-  const channelEmojiPacks = useEmoji(link.author!);
-  const channelEmojis = channelEmojiPacks.map((pack) => pack.emojis).flat();
-  const emojis = userEmojis.concat(channelEmojis);
   const names = emojis.map((t) => t.at(1));
-  const allEmojiPacks = useMemo(() => {
+
-    return uniqBy(channelEmojiPacks.concat(userEmojiPacks), packId);
-  }, [userEmojiPacks, channelEmojiPacks]);
   // @ts-expect-error
   const topOffset = ref.current?.getBoundingClientRect().top;
   // @ts-expect-error
@@ -112,7 +107,7 @@ export function WriteMessage({ link }: { link: NostrLink }) {
           <EmojiPicker
             topOffset={topOffset}
             leftOffset={leftOffset}
-            emojiPacks={allEmojiPacks}
+            emojiPacks={emojiPacks}
             onEmojiSelect={onEmojiSelect}
             onClickOutside={() => setShowEmojiPicker(false)}
             ref={emojiRef}

src/hooks/emoji.tsx

@@ -12,6 +12,11 @@ import { findTag } from "utils";
 import type { EmojiTag } from "../element/emoji";
 import uniqBy from "lodash.uniqby";
 
+export interface Emoji {
+  native?: string;
+  id?: string;
+}
+
 export interface EmojiPack {
   address: string;
   name: string;
@@ -19,13 +24,19 @@ export interface EmojiPack {
   emojis: EmojiTag[];
 }
 
+function cleanShortcode(shortcode?: string) {
+  return shortcode?.replace(/\s+/, "_");
+}
+
 function toEmojiPack(ev: NostrEvent): EmojiPack {
   const d = findTag(ev, "d") || "";
   return {
     address: `${ev.kind}:${ev.pubkey}:${d}`,
     name: d,
     author: ev.pubkey,
-    emojis: ev.tags.filter((t) => t.at(0) === "emoji") as EmojiTag[],
+    emojis: ev.tags
+      .filter((t) => t.at(0) === "emoji")
+      .map((t) => ["emoji", cleanShortcode(t.at(1)), t.at(2)]) as EmojiTag[],
   };
 }