Skip to content

feat(react): add reaction details modal to view reactors per emoji (#1369) - #1386

Open
Tisya-Gupta wants to merge 2 commits into
RocketChat:developfrom
Tisya-Gupta:feat/reaction-details-modal
Open

Tisya-Gupta wants to merge 2 commits into
RocketChat:developfrom
Tisya-Gupta:feat/reaction-details-modal

Conversation

@Tisya-Gupta

Copy link
Copy Markdown

Reaction Details Modal: Show Who Reacted with Each Emoji

This pull request introduces a Reaction Details Modal in EmbeddedChat that allows users to see exactly who reacted to a message with each emoji. When clicking any reaction badge on a message or selecting the "Reactions" option in the message toolbox, an accessible modal opens showing tabbed filters for each emoji and an "All" tab. Each entry displays the user's avatar, display name, username, and a "(You)" badge for the authenticated user, along with quick actions to add or remove reactions directly from the modal.

Acceptance Criteria fulfillment

  • Implemented ReactionDetailsModal component displaying reaction tabs and user lists with avatars and names
  • Added tab switching between all reactions and specific emojis
  • Integrated modal triggers into both message reaction clicks/context-menu and message action toolbox
  • Added comprehensive unit tests for reaction serialization, filtering, and modal data handling
  • Maintained full styling consistency with EmbeddedChat theme tokens and passed all lint and format checks

Fixes #1369

PR Test Details

  • Ran unit tests across @embeddedchat/react covering reaction.js and ReactionDetailsModal: 13/13 tests passed.
  • Ran yarn lint across all packages: 6/6 packages passed with 0 errors.
  • Ran yarn format:check: 10/10 packages passed.
  • Built all packages with yarn build: successful production build.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Reaction Details Modal: Show Who Reacted with Each Emoji

1 participant