miku-discord/readmes/REACTION_LOGGING_FEATURE.md

DM Reaction Logging Feature

Overview

This feature adds comprehensive reaction logging to the Miku bot's DM system. Both user reactions and Miku's reactions to any message in DMs are now tracked and displayed in the web UI.

What Was Added

1. Data Structure Enhancement (bot/utils/dm_logger.py)

• Modified Message Entry: Added reactions field to each message entry that stores:
  • emoji: The reaction emoji
  • reactor_id: Discord ID of who reacted
  • reactor_name: Display name of the reactor
  • is_bot: Boolean indicating if Miku reacted
  • added_at: Timestamp when reaction was added

2. Reaction Logging Methods (bot/utils/dm_logger.py)

Added two new async methods to the DMLogger class:

• log_reaction_add(): Logs when a reaction is added

  • Parameters: user_id, message_id, emoji, reactor_id, reactor_name, is_bot_reactor
  • Finds the message in logs and appends reaction data
  • Prevents duplicate reactions

• log_reaction_remove(): Logs when a reaction is removed

  • Parameters: user_id, message_id, emoji, reactor_id
  • Finds and removes the specific reaction from message logs

3. Discord Event Handlers (bot/bot.py)

Added four event handlers to capture all reaction events:

• on_reaction_add(): Handles cached message reactions
• on_raw_reaction_add(): Handles uncached messages (catches bot's own reactions)
• on_reaction_remove(): Handles cached message reaction removals
• on_raw_reaction_remove(): Handles uncached message reaction removals

All handlers:

• Filter for DM reactions only (ignore server reactions)
• Properly identify the DM user (not the bot)
• Log both user and bot reactions
• Handle emoji conversion to strings

4. Web UI Styling (bot/static/index.html)

Added CSS styles for reaction display:

• .message-reactions: Container for reactions with flexbox layout
• .reaction-item: Individual reaction bubble with hover effects
• .reaction-emoji: Styled emoji display
• .reaction-by: Shows who reacted with color coding:
  • Bot reactions: cyan (#61dafb)
  • User reactions: orange (#ffa726)

5. Web UI JavaScript (bot/static/index.html)

Enhanced displayUserConversations() function to:

• Check for reactions array in each message
• Generate HTML for each reaction showing:
  • Emoji
  • Who reacted (🤖 Miku or 👤 User)
  • Tooltip with full details and timestamp

How It Works

Flow:

1. User or Miku reacts to a message in DMs
2. Discord event fires (on_reaction_add or on_raw_reaction_add)
3. Event handler captures the reaction details
4. DMLogger.log_reaction_add() stores the reaction in the user's JSON log
5. Web UI displays reactions when viewing conversations

Data Storage:

Reactions are stored in memory/dms/{user_id}.json:

{
  "user_id": 123456789,
  "username": "User",
  "conversations": [
    {
      "timestamp": "2025-11-03T12:00:00",
      "message_id": 987654321,
      "is_bot_message": false,
      "content": "Hello Miku!",
      "attachments": [],
      "reactions": [
        {
          "emoji": "❤️",
          "reactor_id": 111222333,
          "reactor_name": "Miku",
          "is_bot": true,
          "added_at": "2025-11-03T12:01:00"
        }
      ]
    }
  ]
}

Features

✅ Tracks both user and bot reactions ✅ Logs reaction additions and removals ✅ Displays reactions in web UI with visual distinction ✅ Shows who reacted and when (via tooltip) ✅ Works with both cached and uncached messages ✅ Only tracks DM reactions (ignores server reactions) ✅ Color-coded by reactor type (bot vs user)

Benefits

• Complete conversation history: See not just messages but emotional responses via reactions
• Miku's reactions tracked: Know when Miku reacted to user messages
• User reactions tracked: See how users respond to Miku's messages
• Timestamped: Know when reactions were added
• Clean UI: Reactions displayed in attractive bubbles below messages

Testing

To test the feature:

1. Send a DM to Miku
2. React to one of Miku's messages with an emoji
3. Have Miku react to one of your messages
4. View the conversation in the web UI at http://localhost:3939
5. Click on "DM Users" → Select your user → View conversations
6. You should see reactions displayed below the messages

Notes

• Reactions are only logged for DM conversations, not server messages
• The bot uses both regular and "raw" event handlers to catch all reactions, including its own
• Removing a reaction will remove it from the logs
• Reactions persist across bot restarts (stored in JSON files)