Fix real-time messaging

frontend/src/ui/components/chat/MessagePanelRenderer.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { MessagePanel, type MessagePanelState } from "../../panels/MessagePanel";
 import { ChatMessages } from "./ChatMessages";
 import { ChatInputWrapper } from "./ChatInputWrapper";
+import { setGlobalMessageHandler } from "../../../websocket";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 
 interface MessagePanelRendererProps {
@@ -26,10 +27,24 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
             };
             
             // Store the handler for cleanup
-            (panel as any).onStateChange = handleStateChange;
+            panel.onStateChange = handleStateChange;
+            
+            // Set up WebSocket message handler for this panel
+            if (panel.handleWebSocketMessage) {
+                setGlobalMessageHandler(panel.handleWebSocketMessage);
+            }
         } else {
             setPanelState(null);
+            // Clear global message handler when no panel is active
+            setGlobalMessageHandler(null);
         }
+        
+        // Cleanup function
+        return () => {
+            if (panel && (panel as any).onStateChange) {
+                (panel as any).onStateChange = null;
+            }
+        };
     }, [panel]);
 
     // Handle chat switching animation

frontend/src/ui/hooks/useChat.ts

@@ -70,40 +70,8 @@ export function useChat() {
         }
     }, [user.authToken]);
 
-    // Handle WebSocket messages
-    useEffect(() => {
-        const handleWebSocketMessage = (event: MessageEvent) => {
-            try {
-                const response: WebSocketMessage = JSON.parse(event.data);
-                
-                switch (response.type) {
-                    case 'messageEdited':
-                        if (response.data) {
-                            updateMessage(response.data.id, response.data);
-                        }
-                        break;
-                    case 'messageDeleted':
-                        if (response.data && response.data.message_id) {
-                            removeMessage(response.data.message_id);
-                        }
-                        break;
-                    case 'newMessage':
-                        if (response.data) {
-                            addMessage(response.data);
-                        }
-                        break;
-                }
-            } catch (error) {
-                console.error("Error parsing WebSocket message:", error);
-            }
-        };
-
-        websocket.addEventListener("message", handleWebSocketMessage);
-
-        return () => {
-            websocket.removeEventListener("message", handleWebSocketMessage);
-        };
-    }, [addMessage, updateMessage, removeMessage, user.currentUser]);
+    // WebSocket messages are now handled by the active panel
+    // No need for duplicate handling here
 
     // Load messages only once when component mounts and user is authenticated
     useEffect(() => {

frontend/src/ui/panels/MessagePanel.ts

@@ -22,7 +22,7 @@ export interface MessagePanelCallbacks {
 export abstract class MessagePanel {
     protected state: MessagePanelState;
     protected callbacks: MessagePanelCallbacks;
-    protected onStateChange: (state: MessagePanelState) => void;
+    public onStateChange: (state: MessagePanelState) => void;
     protected currentUser: UserState;
 
     constructor(
@@ -50,6 +50,9 @@ export abstract class MessagePanel {
     abstract loadMessages(): Promise<void>;
     abstract sendMessage(content: string): Promise<void>;
     abstract isDm(): boolean;
+    
+    // Optional WebSocket message handler (can be overridden by subclasses)
+    handleWebSocketMessage?: (response: any) => void;
 
     // Common methods
     protected updateState(updates: Partial<MessagePanelState>): void {

frontend/src/ui/state.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import type { Message, User, WebSocketMessage } from "../core/types";
-import { request } from "../websocket";
+import { request, reconnectWebSocket } from "../websocket";
 import { MessagePanel } from "./panels/MessagePanel";
 import { PublicChatPanel } from "./panels/PublicChatPanel";
 import { DMPanel, type DMPanelData } from "./panels/DMPanel";
@@ -151,6 +151,9 @@ export const useAppState = create<AppState>((set, get) => ({
             }
         }));
 
+        // Reconnect WebSocket with new auth token
+        reconnectWebSocket();
+
         try {
             const payload: WebSocketMessage = {
                 type: "ping",