From f3044a29e83d7f8460d3586655f7fbd894aa7af6 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Sun, 1 Feb 2026 00:21:00 +0530
Subject: [PATCH] feat: add WebSocket chat message handler for multi-user chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enables real-time message delivery between users in the same session:

- Import addMessageFromWebSocket action from sessionChatSlice
- Create handleChatMessage callback to transform Protocol Buffer format
  to Redux format (msg_id → id, sender_id → senderId, etc.)
- Register CHAT_MESSAGE (237) callback when joining session
- Messages now dispatched to Redux when received via WebSocket

This fixes:
- Multi-user message exchange (messages now appear for remote users)
- Badge updates (unread count increments when messages arrive)

Protocol Buffer format (ChatMessage):
  - sender_name, sender_id, msg, msg_id, created_at

Redux format:
  - id, senderId, senderName, message, createdAt, channel, sessionId

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../src/components/client/JKSessionScreen.js  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index 31d11371c..73c5891b7 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -55,6 +55,7 @@ import {
   selectBackingTrackData,
   selectJamTrackData
 } from '../../store/features/activeSessionSlice';
+import { addMessageFromWebSocket } from '../../store/features/sessionChatSlice';
 
 import { CLIENT_ROLE, RECORD_TYPE_AUDIO, RECORD_TYPE_BOTH } from '../../helpers/globals';
 import { MessageType } from '../../helpers/MessageFactory.js';
@@ -538,12 +539,28 @@ const JKSessionScreen = () => {
 
         //@refreshCurrentSession(true);
 
+        // Chat message handler - receives messages from WebSocket and dispatches to Redux
+        const handleChatMessage = (data) => {
+          // Transform Protocol Buffer format to Redux format
+          const message = {
+            id: data.msg_id,
+            senderId: data.sender_id,
+            senderName: data.sender_name,
+            message: data.msg,
+            createdAt: data.created_at,
+            channel: 'session',
+            sessionId: currentSession.id
+          };
+          dispatch(addMessageFromWebSocket(message));
+        };
+
         // Register message callbacks and store references for cleanup
         const callbacksToRegister = [
           { type: MessageType.SESSION_JOIN, callback: trackChanges },
           { type: MessageType.SESSION_DEPART, callback: trackChanges },
           { type: MessageType.TRACKS_CHANGED, callback: trackChanges },
-          { type: MessageType.HEARTBEAT_ACK, callback: trackChanges }
+          { type: MessageType.HEARTBEAT_ACK, callback: trackChanges },
+          { type: MessageType.CHAT_MESSAGE, callback: handleChatMessage }
         ];
 
         callbacksToRegister.forEach(({ type, callback }) => {