Feat: Added 'Mentions you' and 'Mentions user' tooltips for mentioned…

… users & underline on hover (#859) * Feat: Added Tooltip for Send button & Arrow-back button * removed tooltip for send button & changed label to Jump to message * Removed gap between tooltip and tooltipArrow for left position * Added tooltip styles positioning for left, right positions * Dynamic Positioning for Tooltip with readable code * Feat: Add 'Mentions you' and 'Mentions user' tooltips for mentioned users & underline on hover * Update Tooltip.styles.js * Update Tooltip.js * Update MessageAggregator.js * Added tooltip for all and here mentions --------- Co-authored-by: Zishan Ahmad <[email protected]>
RocketChat · Jan 11, 2025 · bcc7e95 · bcc7e95
1 parent d1f074b
commit bcc7e95
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/packages/markups/src/elements/CodeBlock.js b/packages/markups/src/elements/CodeBlock.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Box, useTheme } from '@embeddedchat/ui-elements';
 import SyntaxHighlighter from 'react-syntax-highlighter';

diff --git a/packages/markups/src/elements/elements.styles.js b/packages/markups/src/elements/elements.styles.js
@@ -99,6 +99,13 @@ const useMentionStyles = (contents, username) => {
       cursor: pointer;
       padding: 1.5px;
       border-radius: 3px;
+
+      &:hover {
+        text-decoration: underline;
+        text-decoration-color: ${contents.value === username
+          ? theme.colors.destructiveForeground
+          : theme.colors.mutedForeground};
+      }
     `,
   };
 

diff --git a/packages/markups/src/mentions/UserMention.js b/packages/markups/src/mentions/UserMention.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@embeddedchat/ui-elements';
+import { Box, Tooltip } from '@embeddedchat/ui-elements';
 import { useUserStore } from '@embeddedchat/react/src/store';
 import useSetExclusiveState from '@embeddedchat/react/src/hooks/useSetExclusiveState';
 import RCContext from '@embeddedchat/react/src/context/RCInstance';
@@ -27,7 +27,9 @@ const UserMention = ({ contents }) => {
   };
 
   const hasMember = (user) => {
-    if (user === 'all' || user === 'here') return true;
+    if (user === 'all' || user === 'here') {
+      return true;
+    }
     let found = false;
     Object.keys(members).forEach((ele) => {
       if (members[ele].username === user) {
@@ -39,20 +41,27 @@ const UserMention = ({ contents }) => {
 
   const styles = useMentionStyles(contents, username);
 
+  const handleClick = () => {
+    if (!['here', 'all'].includes(contents.value)) {
+      handleUserInfo(contents.value);
+    }
+  };
+
+  const tooltipMap = {
+    all: 'Mentions all the room members',
+    here: 'Mentions online room members',
+    [username]: 'Mentions you',
+  };
+  const tooltipText = tooltipMap[contents.value] || 'Mentions user';
+
   return (
     <>
       {hasMember(contents.value) ? (
-        <Box
-          is="span"
-          css={styles.mention}
-          onClick={
-            ['here', 'all'].includes(contents.value)
-              ? null
-              : () => handleUserInfo(contents.value)
-          }
-        >
-          {contents.value}
-        </Box>
+        <Tooltip text={tooltipText} position="top" key={username}>
+          <Box is="span" css={styles.mention} onClick={handleClick}>
+            {contents.value}
+          </Box>
+        </Tooltip>
       ) : (
         `@${contents.value}`
       )}