Add emoji reactions to the chat messages

[DonnieBLT]

[krrish-sehgal]

/assign

[github-actions[bot]]

Hello @krrish-sehgal! You've been assigned to OWASP-BLT/BLT issue #3681. You have 24 hours to complete a pull request.

[github-actions[bot]]

⏰ This issue has been automatically unassigned due to 24 hours of inactivity. The issue is now available for anyone to work on again.

[DonnieBLT]

the emojis are still acting kind of weird, when I try to add the same emoji it doesn't record the action

[razzasid]

@coderabbitai what is the problem in this issue? plz explain

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch the issue details
gh issue view 3681 --repo OWASP-BLT/BLT

Length of output: 198

---

🏁 Script executed:

#!/bin/bash
# Fetch the issue details with comments
gh issue view 3681 --repo OWASP-BLT/BLT --comments

Length of output: 922

---

🏁 Script executed:

#!/bin/bash
# Check for PRs related to this issue
gh pr list --repo OWASP-BLT/BLT --search "3681 in:body" --limit 5

# Let's also look for emoji-related files in the codebase
echo "Searching for files related to emoji functionality..."
rg -l "emoji" --type py
rg -l "reaction" --type py

# Let's also look for chat-related files
echo "Searching for files related to chat functionality..."
rg -l "chat" --type py

Length of output: 1335

---

🏁 Script executed:

#!/bin/bash
# Let's look at the model definition for message reactions
echo "=== Message Reactions Model Definition ==="
rg -A 10 -B 2 "class Message" website/models.py

# Let's look at how message reactions are handled in consumers.py
echo -e "\n\n=== Message Reactions in Consumers ==="
rg -A 10 -B 2 "reaction" website/consumers.py

# Let's examine the migration that added message reactions
echo -e "\n\n=== Message Reactions Migration ==="
cat website/migrations/0237_message_reactions.py

Length of output: 5192

---

@razzasid Based on my analysis of the code, I can explain the problem in issue #3681:

The issue is about emoji reactions in chat messages, where DonnieBLT reported: "the emojis are still acting kind of weird, when I try to add the same emoji it doesn't record the action."

After examining the code, I can see that the emoji reaction system is implemented with a toggle behavior:

1. In the website/consumers.py file, the add_reaction method is designed to toggle reactions - if a user clicks an emoji they've already reacted with, it removes their reaction instead of adding another one.

2. The code specifically checks if the username is already in the list for that emoji reaction:

   if username in reactions[emoji]:
       reactions[emoji].remove(username)  # Removes the reaction
   else:
       reactions[emoji] = reactions.get(emoji, []) + [username]  # Adds the reaction
   

The bug appears to be that when DonnieBLT tries to add the same emoji multiple times, the system is toggling between adding and removing the reaction, rather than allowing multiple instances of the same emoji from one user.

This is likely by design (most emoji reaction systems work as toggles), but DonnieBLT may be expecting a different behavior where users can add multiple instances of the same emoji.

[razzasid]

@coderabbitai what code need to be add or modified to fix this bug?

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

[coderabbitai[bot]]

A summary of the edits CodeRabbit can apply:

Will update website/consumers.py so that add_reaction always appends the emoji reaction instead of toggling it off.

A plan of each step that CodeRabbit will take in order to execute the edits for each file (with inline rough draft snippets):

✏️ website/consumers.py

Delete lines 405–410, which implement the toggle behavior:

if username in reactions[emoji]:
    reactions[emoji].remove(username)
    if not reactions[emoji]:
        del reactions[emoji]
else:
    reactions[emoji] = reactions.get(emoji, []) + [username]

---

After line 404, insert the following single statement to always add the reaction:

# Always add the username to the reactions list, allowing multiple instances
reactions[emoji] = reactions.get(emoji, []) + [username]

---

Save the file. Restart the Channels/Daphne server if necessary. Then test via the chat UI or automated tests to confirm that clicking the same emoji repeatedly now accumulates new reactions rather than removing them.

A summary of the context that CodeRabbit is considering across the codebase:

Locate the existing toggle logic inside add_reaction to identify exactly which lines to replace.

• [ ] ✅ Create PR with these edits
• [ ] 📋 Get copyable edits

[igennova]

the emojis are still acting kind of weird, when I try to add the same emoji it doesn't record the action

when u will click on the same emoji the reaction will remove

[DonnieBLT]

What if the user is anonymous? Is it just the first anonymous user or could we do it session based?

[Sidhant185]

/assign

[github-actions[bot]]

Hello @Sidhant185! You've been assigned to OWASP-BLT/BLT issue #3681. You have 24 hours to complete a pull request.

[Sidhant185]

Fixed an issue where clicking the same emoji reaction again didn’t record or toggle properly. The problem was caused by creating a new list instead of updating the existing one in place.

Replaced {reactions[emoji] = reactions.get(emoji, []) + [username]} with {reactions[emoji].append(username)}

so the list is mutated directly and Django detects the change correctly.

[github-actions[bot]]

⏰ This issue has been automatically unassigned from Sidhant185 due to 24 hours of inactivity. The issue is now available for anyone to work on again.

[Nachiket-Roy]

@coderabbitai can you tell me if the issue has been resolved or not? if not then tell me all the pages that can implement this feature?

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for PRs linked to issue #3681
echo "=== PRs linked to issue #3681 ==="
gh pr list --repo OWASP-BLT/BLT --search "3681" --state all --limit 10 --json number,title,state,url

# Check the current state of the add_reaction method in consumers.py
echo -e "\n\n=== Current add_reaction method in website/consumers.py ==="
rg -A 15 -B 2 "def add_reaction" website/consumers.py

# Find all chat-related views
echo -e "\n\n=== Chat-related views in views.py ==="
rg -n -B 2 -A 10 "def.*chat|def.*room|def.*message" website/views.py

# Find all templates related to chat/messaging
echo -e "\n\n=== Chat/message related templates ==="
fd -e html . website/templates/ | xargs grep -l "chat\|message\|room" | head -20

# Check URL patterns for chat functionality
echo -e "\n\n=== Chat-related URL patterns ==="
rg -n "chat|room|message" website/urls.py

# Check if there are any recent commits fixing this issue
echo -e "\n\n=== Recent commits mentioning emoji or reaction ==="
git log --all --oneline --grep="emoji\|reaction" -10

Length of output: 2632

---

[Nachiket-Roy]

@coderabbitai just tell me about the pages that can use this feature

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Find all templates to understand what pages exist
echo "=== All HTML Templates ==="
fd -e html . website/templates/ | sort

# Find models that might benefit from reactions
echo -e "\n\n=== Models with user-generated content ==="
rg -n "class.*\(models\.Model\)" website/models.py | head -30

# Look for views that render pages with user content
echo -e "\n\n=== Views that might display user content ==="
rg -n "^def " website/views.py | grep -E "issue|bug|comment|chat|message|room|post|report" | head -30

# Check current usage of reactions in templates
echo -e "\n\n=== Current reaction implementation in templates ==="
rg -n "reaction" website/templates/ --type html

# Find URL patterns to understand all available pages
echo -e "\n\n=== URL patterns (first 50 lines) ==="
head -50 website/urls.py

# Check if there are any issue/bug related pages
echo -e "\n\n=== Issue/Bug related templates ==="
fd -e html . website/templates/ | xargs grep -l "issue\|bug\|report" | head -10

Length of output: 19169

---

@Nachiket-Roy Based on my analysis of the codebase, here's where the emoji reaction feature is currently implemented and where it could be added:

Currently Implemented ✅

1. Chat Room Messages (join_room.html) - Users can react to messages in chat rooms with emojis

Pages That Could Use Emoji Reactions 💡

High Priority (Most Common User Interactions)

1. Bug/Issue Reports (issue.html) - Allow users to react to bug reports

   • Model: Issue
   • Would need to add reactions JSONField to the Issue model

2. Comments (comments.html, comments2.html) - React to comments on issues

   • Would need a Comment model with reactions field

3. Forum Posts & Comments - React to forum discussions

   • Models: ForumPost, ForumComment
   • Would need to add reactions field to both models

4. Blog Posts (blog/post_detail.html) - React to blog articles

   • Would need to add reactions to the blog post model

Medium Priority (Community Features)

5. User Profiles (profile.html) - React to profile achievements/contributions

6. Hunt Submissions (hunt_submittion.html) - React to bug hunt submissions

   • Model: Hunt

7. GitHub Issues (github_issue_detail.html) - React to imported GitHub issues

8. Project Contributions (projects/project_detail.html) - React to project updates

Lower Priority (Specialized Features)

9. Sizzle Check-ins (sizzle/checkin_detail.html) - React to daily check-ins

10. Team Updates (team_overview.html) - React to team announcements

11. Education Lectures (education/view_lecture.html) - React to course content

12. Hackathon Entries (hackathons/detail.html) - React to submissions

Implementation Requirements

To add reactions to any of these pages, you would need to:

1. Add a reactions JSONField to the respective model (similar to the Message model)
2. Create WebSocket handlers or AJAX endpoints for adding/removing reactions
3. Update the template to include reaction UI components
4. Add JavaScript to handle user interactions

The current chat implementation in join_room.html serves as a good template that can be adapted for these other pages.

[Nachiket-Roy]

@coderabbitai Does BLT already have any reusable reaction system or partial implementation that I should build on? Or would this be a new feature that needs to be implemented from scratch?

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# 1. Examine the complete Message model and reactions field
echo "=== Message Model with Reactions Field ==="
rg -A 5 -B 2 "class Message" website/models.py | head -50

# 2. Look for any mixin classes or utilities for reactions
echo -e "\n\n=== Search for Reaction Utilities or Mixins ==="
rg -n "class.*Reaction" website/models.py website/utils.py 2>/dev/null || echo "No reaction mixins found"

# 3. Check the complete add_reaction implementation in consumers
echo -e "\n\n=== Complete add_reaction Implementation ==="
rg -A 20 -B 5 "def add_reaction" website/consumers.py

# 4. Check if there are any helper functions for reactions
echo -e "\n\n=== Helper Functions for Reactions ==="
rg -n "def.*reaction" website/consumers.py website/views.py

# 5. Look at the frontend JavaScript for reactions
echo -e "\n\n=== JavaScript Reaction Implementation ==="
rg -A 10 -B 2 "reaction" website/templates/join_room.html | head -80

# 6. Check if there are any template tags or filters for reactions
echo -e "\n\n=== Template Tags/Filters for Reactions ==="
fd templatetags website/ | xargs grep -l "reaction" 2>/dev/null || echo "No template tags found"

# 7. Check if reactions field is used anywhere else
echo -e "\n\n=== Other Models Using Reactions ==="
rg -n "reactions.*=.*JSONField" website/models.py

# 8. Look for any base classes that Message inherits from
echo -e "\n\n=== Message Model Inheritance ==="
rg -B 2 -A 15 "^class Message" website/models.py

Length of output: 8683

---

@Nachiket-Roy Great question! BLT does have a partial reaction system that you can build upon, but it's not fully reusable yet. Here's what exists and what you'll need to build:

✅ What Already Exists

The Message model in chat rooms has emoji reactions implemented with:

1. Database Schema Pattern

reactions = models.JSONField(default=dict, help_text="Stores emoji reactions and their counts")

• Data structure: {emoji: [username1, username2, ...]}
• Only the Message model has this field currently

2. Backend Logic (website/consumers.py)

• add_reaction() method that handles adding/toggling reactions
• WebSocket-based implementation for real-time updates
• Located in the ChatConsumer class

3. Frontend Components (website/templates/join_room.html)

• HTML/CSS for displaying reaction buttons
• JavaScript for handling emoji picker and click events
• Visual design with counts and hover effects

❌ What's Missing (Needs to be Built)

To make this truly reusable across different pages, you'll need to create:

1. Model Mixin

# Create in website/models.py or website/mixins.py
class ReactionMixin(models.Model):
    reactions = models.JSONField(default=dict, help_text="Stores emoji reactions and their counts")
    
    class Meta:
        abstract = True

2. REST API Endpoints

Current implementation only works with WebSockets. You'll need:

• POST /api/<model>/<id>/reactions/ - Add/toggle reaction
• GET /api/<model>/<id>/reactions/ - Get reactions
• Works for non-chat pages (Issues, Comments, etc.)

3. Reusable Template Partial

<!-- website/templates/includes/reactions.html -->
{% load reaction_tags %}
<div class="reactions-container" data-model="{{ model }}" data-id="{{ object.id }}">
    <!-- Reusable reaction UI -->
</div>

4. Reusable JavaScript Component

Extract the reaction logic from join_room.html into a standalone JS file:

// static/js/reactions.js
class ReactionManager {
    constructor(element, options) { /* ... */ }
    addReaction(emoji) { /* ... */ }
    // etc.
}

5. Template Tags/Filters

# website/templatetags/reaction_tags.py
@register.inclusion_tag('includes/reactions.html')
def render_reactions(obj):
    return {'reactions': obj.reactions, 'object': obj}

🎯 Recommendation

Build on the existing implementation rather than starting from scratch:

1. Phase 1: Extract the current chat reaction system into reusable components
2. Phase 2: Add REST API endpoints for non-WebSocket use
3. Phase 3: Apply the mixin to other models (Issue, Comment, etc.)
4. Phase 4: Update templates to use the reusable components

The existing implementation is a solid blueprint - the data structure, UI/UX patterns, and general approach are all good. You just need to decouple it from the chat/WebSocket context and make it modular.

Would you like me to help you create any of these reusable components?