From 416228f4e21467ea1d443233c43fbab92f7110bb Mon Sep 17 00:00:00 2001
From: abirc8010 <abirc8010@gmail.com>
Date: Mon, 6 Jan 2025 22:39:06 +0530
Subject: [PATCH 1/3] Add tooltip to reactions

---
 .../src/views/EmojiReaction/EmojiReaction.js  |  2 +-
 .../react/src/views/Message/Message.styles.js | 16 ++++++++
 .../src/views/Message/MessageReactions.js     | 39 +++++++++++++++++--
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/views/EmojiReaction/EmojiReaction.js b/packages/react/src/views/EmojiReaction/EmojiReaction.js
index a85dfc92fc..80ba34d76e 100644
--- a/packages/react/src/views/EmojiReaction/EmojiReaction.js
+++ b/packages/react/src/views/EmojiReaction/EmojiReaction.js
@@ -7,7 +7,7 @@ import DOMPurify from 'dompurify';
 
 const EmojiReaction = ({ body }) => {
   const emojiHtml = emojione.toImage(body);
-
+  emojione.imageTitleTag = false;
   return (
     <Box
       css={css`
diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 8c380d241b..931d1ef415 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -242,6 +242,22 @@ export const getMessageReactionsStyles = (theme) => {
     reactionMine: css`
       background: ${theme.colors.secondary};
     `,
+    emojiTooltip: css`
+      position: absolute;
+      bottom: 120%;
+      left: 50%;
+      transform: translateX(-40%);
+      background-color: ${theme.invertedColors.secondary};
+      color: ${theme.invertedColors.secondaryForeground};
+      z-index: ${theme.zIndex?.tooltip || 1400};
+      border-radius: ${theme.radius};
+      padding: 8px 10px;
+      width: 200px;
+      white-space: normal;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      font-size: 0.85rem;
+    `,
   };
 
   return styles;
diff --git a/packages/react/src/views/Message/MessageReactions.js b/packages/react/src/views/Message/MessageReactions.js
index 5f05a684d0..188787ce80 100644
--- a/packages/react/src/views/Message/MessageReactions.js
+++ b/packages/react/src/views/Message/MessageReactions.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   useComponentOverrides,
@@ -24,6 +24,33 @@ export const MessageReactions = ({
   );
   const { theme } = useTheme();
   const styles = getMessageReactionsStyles(theme);
+  const [hoveredReaction, setHoveredReaction] = useState(null);
+  const tooltipMap = {};
+  const getTooltipContent = (reaction) => {
+    const usernames = [...(reaction.usernames || [])];
+    const userIndex = usernames.indexOf(authenticatedUserUsername);
+    if (userIndex !== -1) {
+      usernames.splice(userIndex, 1);
+      usernames.unshift('You');
+    }
+    const visibleNames = usernames.slice(0, 9);
+    const remainingCount = usernames.length - visibleNames.length;
+    let tooltipContent = visibleNames.join(', ');
+    if (remainingCount > 0) {
+      tooltipContent += `, and ${remainingCount} ${
+        remainingCount === 1 ? 'other' : 'others'
+      }`;
+    }
+    tooltipMap[
+      reaction.name
+    ] = `${tooltipContent} reacted with ${reaction.name}`;
+    return tooltipMap[reaction.name];
+  };
+  message.reactions &&
+    serializeReactions(message.reactions).forEach((reaction) => {
+      getTooltipContent(reaction);
+    });
+
   return (
     <Box
       css={styles.container}
@@ -34,12 +61,12 @@ export const MessageReactions = ({
       {message.reactions &&
         serializeReactions(message.reactions).map((reaction) => (
           <Box
+            key={reaction.name}
             css={
               isSameUser(reaction, authenticatedUserUsername)
                 ? [styles.reaction, styles.reactionMine]
                 : [styles.reaction]
             }
-            key={reaction.name}
             mine={isSameUser(reaction, authenticatedUserUsername)}
             onClick={() =>
               handleEmojiClick(
@@ -48,9 +75,15 @@ export const MessageReactions = ({
                 !isSameUser(reaction, authenticatedUserUsername)
               )
             }
+            onMouseEnter={() => setHoveredReaction(reaction.name)}
+            onMouseLeave={() => setHoveredReaction(null)}
+            style={{ position: 'relative' }}
           >
-            <Markdown body={reaction.name} isReaction />
+            <Markdown body={reaction.name} isReaction titleTagVisible={false} />
             <p>{reaction.count}</p>
+            {hoveredReaction === reaction.name && (
+              <Box css={styles.emojiTooltip}>{tooltipMap[reaction.name]}</Box>
+            )}
           </Box>
         ))}
     </Box>

From c246b4c4c761a27694e60977172d184e69b0050e Mon Sep 17 00:00:00 2001
From: abirc8010 <abirc8010@gmail.com>
Date: Mon, 6 Jan 2025 22:40:50 +0530
Subject: [PATCH 2/3] remove tagvisible prop

---
 packages/react/src/views/Message/MessageReactions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/views/Message/MessageReactions.js b/packages/react/src/views/Message/MessageReactions.js
index 188787ce80..d31236f5fd 100644
--- a/packages/react/src/views/Message/MessageReactions.js
+++ b/packages/react/src/views/Message/MessageReactions.js
@@ -79,7 +79,7 @@ export const MessageReactions = ({
             onMouseLeave={() => setHoveredReaction(null)}
             style={{ position: 'relative' }}
           >
-            <Markdown body={reaction.name} isReaction titleTagVisible={false} />
+            <Markdown body={reaction.name} isReaction />
             <p>{reaction.count}</p>
             {hoveredReaction === reaction.name && (
               <Box css={styles.emojiTooltip}>{tooltipMap[reaction.name]}</Box>

From 719ed369f9e69fc16b705d4da5eab83236ef5926 Mon Sep 17 00:00:00 2001
From: abirc8010 <abirc8010@gmail.com>
Date: Sat, 11 Jan 2025 22:57:00 +0530
Subject: [PATCH 3/3] update tooltipMap

---
 .../src/views/Message/MessageReactions.js     | 117 ++++++++++--------
 1 file changed, 65 insertions(+), 52 deletions(-)

diff --git a/packages/react/src/views/Message/MessageReactions.js b/packages/react/src/views/Message/MessageReactions.js
index d31236f5fd..39a0cc6f96 100644
--- a/packages/react/src/views/Message/MessageReactions.js
+++ b/packages/react/src/views/Message/MessageReactions.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   Box,
   useComponentOverrides,
@@ -25,31 +25,42 @@ export const MessageReactions = ({
   const { theme } = useTheme();
   const styles = getMessageReactionsStyles(theme);
   const [hoveredReaction, setHoveredReaction] = useState(null);
-  const tooltipMap = {};
-  const getTooltipContent = (reaction) => {
-    const usernames = [...(reaction.usernames || [])];
-    const userIndex = usernames.indexOf(authenticatedUserUsername);
-    if (userIndex !== -1) {
-      usernames.splice(userIndex, 1);
-      usernames.unshift('You');
-    }
-    const visibleNames = usernames.slice(0, 9);
-    const remainingCount = usernames.length - visibleNames.length;
-    let tooltipContent = visibleNames.join(', ');
-    if (remainingCount > 0) {
-      tooltipContent += `, and ${remainingCount} ${
-        remainingCount === 1 ? 'other' : 'others'
-      }`;
+
+  const tooltipMap = useMemo(() => {
+    const map = {};
+    if (message.reactions) {
+      serializeReactions(message.reactions).forEach((reaction) => {
+        const usernames = reaction.usernames || [];
+        const updatedUsernames = [];
+        let isUserIncluded = false;
+
+        usernames.forEach((username) => {
+          if (username === authenticatedUserUsername) {
+            isUserIncluded = true;
+          } else {
+            updatedUsernames.push(username);
+          }
+        });
+
+        if (isUserIncluded) {
+          updatedUsernames.unshift('You');
+        }
+
+        const visibleNames = updatedUsernames.slice(0, 9);
+        const remainingCount = updatedUsernames.length - visibleNames.length;
+
+        let tooltipContent = visibleNames.join(', ');
+        if (remainingCount > 0) {
+          tooltipContent += `, and ${remainingCount} ${
+            remainingCount === 1 ? 'other' : 'others'
+          }`;
+        }
+
+        map[reaction.name] = `${tooltipContent} reacted with ${reaction.name}`;
+      });
     }
-    tooltipMap[
-      reaction.name
-    ] = `${tooltipContent} reacted with ${reaction.name}`;
-    return tooltipMap[reaction.name];
-  };
-  message.reactions &&
-    serializeReactions(message.reactions).forEach((reaction) => {
-      getTooltipContent(reaction);
-    });
+    return map;
+  }, [message.reactions, authenticatedUserUsername]);
 
   return (
     <Box
@@ -59,33 +70,35 @@ export const MessageReactions = ({
       {...props}
     >
       {message.reactions &&
-        serializeReactions(message.reactions).map((reaction) => (
-          <Box
-            key={reaction.name}
-            css={
-              isSameUser(reaction, authenticatedUserUsername)
-                ? [styles.reaction, styles.reactionMine]
-                : [styles.reaction]
-            }
-            mine={isSameUser(reaction, authenticatedUserUsername)}
-            onClick={() =>
-              handleEmojiClick(
-                reaction,
-                message,
-                !isSameUser(reaction, authenticatedUserUsername)
-              )
-            }
-            onMouseEnter={() => setHoveredReaction(reaction.name)}
-            onMouseLeave={() => setHoveredReaction(null)}
-            style={{ position: 'relative' }}
-          >
-            <Markdown body={reaction.name} isReaction />
-            <p>{reaction.count}</p>
-            {hoveredReaction === reaction.name && (
-              <Box css={styles.emojiTooltip}>{tooltipMap[reaction.name]}</Box>
-            )}
-          </Box>
-        ))}
+        serializeReactions(message.reactions).map((reaction) => {
+          const isUserReaction = isSameUser(
+            reaction,
+            authenticatedUserUsername
+          );
+          return (
+            <Box
+              key={reaction.name}
+              css={
+                isUserReaction
+                  ? [styles.reaction, styles.reactionMine]
+                  : [styles.reaction]
+              }
+              mine={isUserReaction}
+              onClick={() =>
+                handleEmojiClick(reaction, message, !isUserReaction)
+              }
+              onMouseEnter={() => setHoveredReaction(reaction.name)}
+              onMouseLeave={() => setHoveredReaction(null)}
+              style={{ position: 'relative' }}
+            >
+              <Markdown body={reaction.name} isReaction />
+              <p>{reaction.count}</p>
+              {hoveredReaction === reaction.name && (
+                <Box css={styles.emojiTooltip}>{tooltipMap[reaction.name]}</Box>
+              )}
+            </Box>
+          );
+        })}
     </Box>
   );
 };