FIX - filtered duplicate reactions in reactions viewer

src/app/features/room/message/Reactions.tsx

@@ -40,7 +40,25 @@ export const Reactions = as<'div', ReactionsProps>(
     const reactions = useRelations(
       relations,
       useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
-    );
+    ).map((reaction) => {
+      const events = Array.from(reaction[1]);
+
+      // Track unique userIds using a Set to filter efficiently
+      const existingUserIds = new Set();
+      const uniqueEvents = events.filter((event) => {
+        const userId = event.sender?.userId;
+        if (!userId || existingUserIds.has(userId)) {
+          return false; // If already exist, filter out the event
+        }
+        existingUserIds.add(userId); // Mark this userId as exis
+        return true;
+      });
+
+      // eslint-disable-next-line no-param-reassign
+      reaction[1] = new Set(uniqueEvents);
+
+      return reaction;
+    });
 
     const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
       evt.stopPropagation();

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -40,7 +40,25 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
     const reactions = useRelations(
       relations,
       useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
-    );
+    ).map((reaction) => {
+      const events = Array.from(reaction[1]);
+
+      // Track unique userIds using a Set to filter efficiently
+      const existingUserIds = new Set();
+      const uniqueEvents = events.filter((event) => {
+        const userId = event.sender?.userId;
+        if (!userId || existingUserIds.has(userId)) {
+          return false; // If already exist, filter out the event
+        }
+        existingUserIds.add(userId); // Mark this userId as exis
+        return true;
+      });
+
+      // eslint-disable-next-line no-param-reassign
+      reaction[1] = new Set(uniqueEvents);
+
+      return reaction;
+    });
 
     const [selectedKey, setSelectedKey] = useState<string>(() => {
       if (initialKey) return initialKey;
@@ -111,7 +129,8 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                   const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
 
                   const avatarMxcUrl = member?.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
+                  const avatarUrl = avatarMxcUrl
+                    ? mx.mxcUrlToHttp(
                         avatarMxcUrl,
                         100,
                         100,
@@ -119,7 +138,8 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                         undefined,
                         false,
                         useAuthentication
-                  ) : undefined;
+                      )
+                    : undefined;
 
                   return (
                     <MenuItem