Fix reactions in DMs

frontend/src/pages/app/core/types.d.ts

@@ -212,6 +212,7 @@ export interface DmEnvelope extends BaseDmEnvelope {
     senderId: number;
     files?: DmFile[];
     timestamp: string;
+    reactions?: Reaction[];
 }
 
 export interface DmFile {
@@ -332,6 +333,15 @@ export interface AddReactionRequest extends WebSocketMessage {
     }
 }
 
+export interface AddDmReactionRequest extends WebSocketMessage {
+    type: "addDmReaction",
+    credentials: WebSocketCredentials;
+    data: {
+        dm_envelope_id: number;
+        emoji: string;
+    }
+}
+
 // Messages
 export interface DMNewWebSocketMessage extends WebSocketMessage {
     type: "dmNew",
@@ -379,8 +389,20 @@ export interface ReactionUpdateWebSocketMessage extends WebSocketMessage {
     }
 }
 
+export interface DMReactionUpdateWebSocketMessage extends WebSocketMessage {
+    type: "dmReactionUpdate",
+    data: {
+        dm_envelope_id: number;
+        emoji: string;
+        action: "added" | "removed";
+        user_id: number;
+        username: string;
+        reactions: Reaction[];
+    }
+}
+
 // Shared types
-export type DMWebSocketMessage = DMNewWebSocketMessage | DMEditedWebSocketMessage | DMDeletedWebSocketMessage
+export type DMWebSocketMessage = DMNewWebSocketMessage | DMEditedWebSocketMessage | DMDeletedWebSocketMessage | DMReactionUpdateWebSocketMessage
 export type ChatWebSocketMessage = MessageEditedWebSocketMessage | MessageDeletedWebSocketMessage | NewMessageWebSocketMessage | ReactionUpdateWebSocketMessage
 
 // -----------

frontend/src/pages/app/ui/components/chat/ChatMessages.tsx

@@ -10,7 +10,7 @@ import { useEffect, useState, type ReactNode } from "react";
 import { delay } from "../../../utils/utils";
 import { MaterialDialog } from "../core/Dialog";
 import { request } from "../../../core/websocket";
-import type { AddReactionRequest } from "../../../core/types";
+import type { AddReactionRequest, AddDmReactionRequest } from "../../../core/types";
 
 interface ChatMessagesProps {
     messages?: MessageType[];
@@ -125,14 +125,32 @@ export function ChatMessages({ messages = [], children, isDm = false, onReplySel
         if (!user.authToken) return;
         
         try {
-            await request<AddReactionRequest["data"], any>({
-                type: "addReaction",
-                credentials: { scheme: "Bearer", credentials: user.authToken },
-                data: {
-                    message_id: messageId,
-                    emoji: emoji
+            if (isDm) {
+                // For DM messages, we need to find the dm_envelope_id from the message
+                const message = messages.find(m => m.id === messageId);
+                const dmEnvelopeId = message?.runtimeData?.dmEnvelope?.id;
+                
+                if (dmEnvelopeId) {
+                    await request<AddDmReactionRequest["data"], any>({
+                        type: "addDmReaction",
+                        credentials: { scheme: "Bearer", credentials: user.authToken },
+                        data: {
+                            dm_envelope_id: dmEnvelopeId,
+                            emoji: emoji
+                        }
+                    });
                 }
-            });
+            } else {
+                // For regular chat messages
+                await request<AddReactionRequest["data"], any>({
+                    type: "addReaction",
+                    credentials: { scheme: "Bearer", credentials: user.authToken },
+                    data: {
+                        message_id: messageId,
+                        emoji: emoji
+                    }
+                });
+            }
         } catch (error) {
             console.error("Failed to add reaction:", error);
         }

frontend/src/pages/app/ui/panels/DMPanel.ts

@@ -70,6 +70,7 @@ export class DMPanel extends MessagePanel {
             is_read: false,
             is_edited: false,
             files: env.files?.map(file => { return {"name": file.name, "encrypted": true, "path": file.path} }) || [],
+            reactions: env.reactions || [],
 
             runtimeData: {
                 dmEnvelope: env
@@ -238,6 +239,10 @@ export class DMPanel extends MessagePanel {
             const { id } = response.data;
             this.removeMessage(id);
         }
+        if (response.type === "dmReactionUpdate" && this.dmData) {
+            const { dm_envelope_id, reactions } = response.data;
+            this.updateMessageReactions(dm_envelope_id, reactions);
+        }
     };
 
     // Reset for DM switching
@@ -302,4 +307,17 @@ export class DMPanel extends MessagePanel {
     }
     
     handleProfileClick(): void {}
+
+    updateMessageReactions(dmEnvelopeId: number, reactions: any[]): void {
+        const messages = this.getMessages();
+        const messageIndex = messages.findIndex(msg => 
+            msg.runtimeData?.dmEnvelope?.id === dmEnvelopeId
+        );
+        
+        if (messageIndex !== -1) {
+            const updatedMessage = { ...messages[messageIndex] };
+            updatedMessage.reactions = reactions;
+            this.updateMessage(updatedMessage.id, { reactions: reactions });
+        }
+    }
 }