Skip to content

chore/feat: Add tooltip displaying users who reacted with a particular emoji#820

Merged
Spiral-Memory merged 11 commits intoRocketChat:developfrom
abirc8010:feat/reaction-feature
Feb 9, 2025
Merged

chore/feat: Add tooltip displaying users who reacted with a particular emoji#820
Spiral-Memory merged 11 commits intoRocketChat:developfrom
abirc8010:feat/reaction-feature

Conversation

@abirc8010
Copy link
Contributor

@abirc8010 abirc8010 commented Jan 6, 2025

Brief Title

This PR introduces a tooltip displaying users who reacted with a specific emoji.

Acceptance Criteria fulfillment

  • Added state hoveredReaction to track the currently hovered reaction.
  • Created a tooltipMap to store the tooltip content for each reaction.
  • Implemented getTooltipContent to generate a string of users who reacted,
  • For each reaction, the tooltip is displayed on hover and shows the users who reacted, with a limit of 9 users before summarizing with "and {remainingNumberOfReactions} other(s)".
  • Added relevant styling to the tooltip for proper alignment

Fixes #819

Video/Screenshots

Screencast.from.2025-01-06.22-44-53.webm

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-820 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

@Spiral-Memory
Copy link
Collaborator

Hey @abirc8010
This looks great ! Thanks for this addition

const styles = getMessageReactionsStyles(theme);
const [hoveredReaction, setHoveredReaction] = useState(null);
const tooltipMap = {};
const getTooltipContent = (reaction) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This much manual computation are required ? Do we have an easy way of implementing this ?

The reason i am saying this, using function like splice etc throw an error if there are empty things and all.. So a bit concerned about the stablity..

Can we look for a method with less computation involved

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Spiral-Memory I have updated my approach

Copy link
Collaborator

@Spiral-Memory Spiral-Memory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Spiral-Memory Spiral-Memory added the chore a subtle fix label Jan 30, 2025
@Spiral-Memory Spiral-Memory changed the title Feat: Add tooltip displaying users who reacted with a particular emoji chore/feat: Add tooltip displaying users who reacted with a particular emoji Jan 30, 2025
@Spiral-Memory Spiral-Memory merged commit fe63e3d into RocketChat:develop Feb 9, 2025
2 checks passed
github-actions bot added a commit that referenced this pull request Feb 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore a subtle fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feat: Add tooltip displaying the users who reacted with a particular emoji

2 participants