feat: add emoji reactions to chat messages

[sanjam3712]

Closes #124

What this PR does

Adds emoji reactions to chat messages in PiperChat, a core Discord feature that was missing. Users can hover over any message, click the 😊 button, and pick from 8 emojis. Reactions appear below messages with counts and sync in real time via Socket.IO.

Changes Made

Backend (server/)

• Added reactions array field to Chat.js message schema
• Added POST /toggle_reaction endpoint in routes/chat.js
• Emits reaction_updated Socket.IO event to all clients in the channel

Frontend (frontend/)

• Added emoji picker button (😊) on message hover
• Added emoji picker popup with 8 emojis: 👍 ❤️ 😂 😮 😢 🔥 🎉 👀
• Added reaction bar below messages showing emoji + count
• Your own reactions are highlighted in purple
• Clicking an existing reaction toggles it off
• Added Socket.IO listener for real-time reaction updates

Mockup Screenshot:

How it works

1. Hover over any message → 😊 button appears
2. Click 😊 → emoji picker pops up
3. Select emoji → reaction appears below message
4. Click reaction again → removes your reaction
5. All reactions sync in real time for all users in the channel

[vercel]

@sanjam3712 is attempting to deploy a commit to the Sunil Kumar's projects Team on Vercel.

A member of the Team first needs to authorize it.

[0rigin-c0de]

@sanjam3712 can you please take the latest pull from main and then make your changes

[sanjam3712]

Hi @0rigin-c0de ! I've pulled the latest from main and rebased my changes. The PR is now updated! 🙌

[0rigin-c0de]

@sanjam3712 please check this locally
it have some erros check latest api/v1

[0rigin-c0de]

Fix URL → POST /api/v1/chat/toggle_reaction and verify 200 + DB update.
Two browsers in same channel: user A reacts, user B sees count update without refresh.
Toggle same emoji twice (add/remove) and confirm count goes to 0 and chip disappears.
React on another user’s message (not only your own).
Switch channel while picker is open picker state should reset (may need useEffect on channel_id).
Message with no reactions field (pre-migration data) — no crash on render.

[sanjam3712]

Hi @0rigin-c0de ! I've addressed all the review points:

• ✅ Fixed URL to /chat/toggle_reaction (API_BASE_URL already includes /api/v1)
• ✅ Picker state resets on channel switch via useEffect on channel_id
• ✅ Used Array.isArray() to safely handle messages with no reactions field
• ✅ Reaction button shows for all messages, not just your own

Please let me know if anything else needs fixing

[0rigin-c0de]

@sanjam3712 Nicely Done.
but still I can only react to server messages
We need this thing in friends chat as well not only in server

[sanjam3712]

Hi @0rigin-c0de ! I've now added emoji reactions to the DM/friends chat as well:

Frontend (DirectMessage.jsx):

• Added 😊 reaction button on message hover
• Emoji picker with 8 emojis
• Reaction bar below messages with count
• Real-time sync via dm_reaction_updated socket event

Backend (directMessages.js):

• Added POST /direct-messages/toggle_dm_reaction endpoint
• Updated DirectMessageThread model to include reactions field
• Emits dm_reaction_updated to both participants in real time

Please let me know if anything else needs fixing! 🙌