feat: add comment reactions (thumbs up) feature #2812

samarth93 · 2025-12-08T15:54:13Z

Fixes #2629

Description

Adds emoji reactions to comments, allowing users to acknowledge comments without creating additional replies.

Screenshots

Problem Solved

When someone is tagged in a comment for informational purposes, they previously had two options:

Add a new comment to acknowledge (clutters the ticket)
Read without responding (no acknowledgement)

Now users can react with emojis to acknowledge they have seen the comment.

Changes

Backend

New child table DocType HD Comment Reaction to store reactions inside comments
Added reactions Table field to HD Ticket Comment
API: toggle_reaction(comment, emoji) - add/remove reaction
API: get_reactions(comment) - get reactions grouped by emoji
Notification sent to comment author when someone reacts
Preset emojis validation: only 👍 👎 ❤️ 🎉 👀 ✅ allowed

Frontend

Emoji picker with 6 preset emojis
Shows all reactions below each comment with counts
Hover tooltip displays who has reacted
Users can have one reaction per comment
Clicking same emoji again removes it

Implementation Details

Follows Gameplan pattern with child table inside comment
Real-time updates via websocket events
API validation ensures only preset emojis can be added
One reaction per user (clicking different emoji replaces the previous one)

Testing

Open any ticket with comments
Click the emoji picker button below a comment
Select an emoji (e.g., 👍)
Try selecting a different emoji - it will replace the first one
Click the same emoji again to remove it
Hover over reactions to see who reacted

Test cases added covering:

One reaction per user validation
Reaction count accuracy
Notification creation
Preset emoji validation

Allows users to react to comments with a thumbs up emoji instead of creating new comments. This reduces ticket clutter when acknowledging a comment. Changes: - Add new HD Comment Reaction DocType to store reactions - Add toggle_reaction and get_comment_reactions API endpoints - Add reaction UI to CommentBox.vue with hover tooltip showing users - Send notification to comment author when reaction is added Backend: - helpdesk/helpdesk/doctype/hd_comment_reaction/ - new DocType - API: toggle_reaction(comment, reaction) - add/remove reaction - API: get_comment_reactions(comment) - list reactions with users Frontend: - CommentBox.vue - thumbs up button with count and user tooltip - Highlights button when current user has reacted - Real-time update via publish_event

RitvikSardana · 2025-12-09T10:23:12Z

Niceee!!! @samarth93

Some feedback:

Please share the screenshot of how it looks like, and I think it is better to store the reactions inside the comment document instead of creating a new doctype.
We should be able to choose from all the emojis and not just thumbs up.

RitvikSardana · 2025-12-09T10:26:45Z

Checkout how GP handles reactions:
https://github.com/frappe/gameplan/blob/develop/gameplan/gameplan/doctype/gp_comment/gp_comment.json

@RitvikSardana

Based on feedback from @RitvikSardana: - Replace standalone HD Comment Reaction with HD Reaction child table - Store reactions inside HD Ticket Comment (like Gameplan) - Add emoji picker with multiple emoji options (👍👎❤️😄🎉😕👀🚀) - Users can only have one reaction per comment (clicking different emoji replaces) Changes: - New HD Reaction DocType (child table with emoji + user) - Add reactions Table field to HD Ticket Comment - Add toggle_reaction() and get_reactions() APIs - Update CommentBox.vue with emoji picker popover - Remove old HD Comment Reaction standalone DocType

samarth93 · 2025-12-09T12:07:18Z

samarth93 · 2025-12-09T12:11:00Z

@RitvikSardana I have done an update based on your feedback.

RitvikSardana · 2025-12-09T12:14:06Z

Add the ss in description, also can a single user add multiple reactions?

RitvikSardana · 2025-12-09T12:15:19Z

HD Comment Reaction will be the name of the child table

samarth93 · 2025-12-09T12:16:56Z

Add the ss in description, also can a single user add multiple reactions?

One user can only react with one single emoji listed among them.

RitvikSardana · 2025-12-09T12:19:34Z

Yes they can, check how GP does this.

@RitvikSardana

Addressing feedback from @RitvikSardana: 1. Renamed child table from 'HD Reaction' to 'HD Comment Reaction' 2. Allow users to add multiple different reactions (not just one) 3. Updated PR description with screenshot Changes: - Rename HD Reaction → HD Comment Reaction (DocType name) - Update toggle_reaction logic to allow multiple reactions per user - Users can now react with different emojis (👍 + ❤️ + 🎉 etc) - Clicking same emoji toggles it off - Updated all references in code

RitvikSardana · 2025-12-09T12:50:49Z

One reaction per user should be fine.

We can also preset the reactions to be either of 4/5 just how it is on LinkedIn

const presetEmojis = ['👍', '👎', '❤️', '🎉', '👀', '✅'];

Ensure no other emojis can be added via api
Add a validation check and throw error if the emoji is not one of these.

When a user adds an emoji reaction to a comment, a HD Notification should be sent with type of reaction.
Message should be
Username reacted with x on your comment, which should link to that particular comment.

When this is done

Please write test cases for it.

Test cases should cover

Only one user can react with one reaction/emoji.
Count of the people reacting with one of these emojis, if like 10 people have reacted with heart emoji, and three with thumbs up, the test should show the proper count.
A notification doc should be created once the comment is added with a reaction.
Validation test that no other emoji can be added apart from these.

Addressing feedback: 1. One reaction per user (not multiple) 2. Preset emojis only: ['👍', '👎', '❤️', '🎉', '👀', '✅'] 3. API validation to block non-preset emojis 4. Updated notification message: 'reacted with X on your comment' 5. Comprehensive test cases covering all requirements Backend changes: - Add PRESET_EMOJIS constant - Add emoji validation in toggle_reaction API - Change to one reaction per user (replaces on different emoji) - Update notification message format - Add get_preset_emojis() API Frontend changes: - Update emojiList to match preset emojis Test cases added: - test_one_reaction_per_user: Verifies only one reaction allowed - test_reaction_count_accuracy: Tests count with 10 hearts, 3 thumbs up - test_notification_created_on_reaction: Validates HD Notification creation - test_only_preset_emojis_allowed: Ensures only preset emojis accepted - test_reaction_toggle_behavior: Tests toggle on/off behavior - test_get_reactions_returns_correct_data: Validates API response structure

samarth93 · 2025-12-09T15:02:21Z

updated as suggested

Fixes linter error from unused variable

The test was failing because it tried to use hardcoded 'TEST-TICKET-001' name but HD Ticket uses autoname. Changed to: - Create ticket dynamically and store in self.test_ticket - Reference self.test_ticket.name for comments - Clean up ticket in tearDown

RitvikSardana · 2025-12-15T07:35:47Z

There are certain issues

Reaction list is not being shown properly

it should look like this

What happens if I add a comment and then I react on it, I should not get any notification.
Add reaction button should look like this

After reacting the UI should be like this

If more than 1 person has reacted on a comment, in Notification it should be grouped.

The logo will remain like the way it is in the image

I am getting wrong notification on reacting to a comment

samarth93 · 2025-12-15T19:37:37Z

Thank you for providing these details I am working on this.

codecov · 2025-12-31T17:49:31Z

Codecov Report

❌ Patch coverage is 97.67442% with 5 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (develop@8f2699c). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...esk/doctype/hd_ticket_comment/hd_ticket_comment.py	92.75%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             develop    #2812   +/-   ##
==========================================
  Coverage           ?   42.72%           
==========================================
  Files              ?      123           
  Lines              ?     5156           
  Branches           ?        0           
==========================================
  Hits               ?     2203           
  Misses             ?     2953           
  Partials           ?        0

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Implements comment reactions logic, notifications, and UI updates.

samarth93 added 3 commits December 9, 2025 20:48

fix: remove unused username variable

6733de3

Fixes linter error from unused variable

chore: remove temporary pr description file

18c2aa1

feat: grouped notifications and UI refinements for comment reactions

7535c41

samarth93 closed this Dec 19, 2025

fix: pre-commit formatting

73673ea

samarth93 reopened this Dec 19, 2025

samarth93 added 5 commits December 19, 2025 22:51

fix: prettier formatting

270ece0

fix: wrap user-facing strings in translate function

f313fd0

fix: improve reaction notification display and routing

f69de39

style: apply prettier formatting

1ca388d

test: update assertions for new notification message format

de070ed

style: remove trailing comma for prettier

8d1101c

fix: use format() instead of f-string for Python 3.14 compatibility

7a18b33

samarth93 force-pushed the feature/comment-reactions branch 2 times, most recently from 7a18b33 to dcaca78 Compare December 31, 2025 18:44

samarth93 added a commit to samarth93/helpdesk that referenced this pull request Dec 31, 2025

feat: add comment reactions (thumbs up) feature (frappe#2812)

dcaca78

Implements comment reactions logic, notifications, and UI updates.

samarth93 force-pushed the feature/comment-reactions branch from dcaca78 to 7a18b33 Compare January 3, 2026 12:59

feat: add enable_comment_reactions setting to toggle feature

0b05a7c

feat: add comment reactions (thumbs up) feature #2812

Are you sure you want to change the base?

feat: add comment reactions (thumbs up) feature #2812

Conversation

samarth93 commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Problem Solved

Changes

Backend

Frontend

Implementation Details

Testing

Uh oh!

RitvikSardana commented Dec 9, 2025

Uh oh!

RitvikSardana commented Dec 9, 2025

Uh oh!

samarth93 commented Dec 9, 2025

Uh oh!

samarth93 commented Dec 9, 2025

Uh oh!

RitvikSardana commented Dec 9, 2025

Uh oh!

RitvikSardana commented Dec 9, 2025

Uh oh!

samarth93 commented Dec 9, 2025

Uh oh!

RitvikSardana commented Dec 9, 2025

Uh oh!

RitvikSardana commented Dec 9, 2025

Uh oh!

samarth93 commented Dec 9, 2025

Uh oh!

RitvikSardana commented Dec 15, 2025

Uh oh!

samarth93 commented Dec 15, 2025

Uh oh!

codecov bot commented Dec 31, 2025

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

samarth93 commented Dec 8, 2025 •

edited

Loading