From b6e31b3bc20c933a2854cffe0b034923d960a82c Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 27 Jan 2026 14:20:09 +0530
Subject: [PATCH] feat(08-03): integrate chat button into session navigation

- Added JKSessionChatButton import
- Replaced placeholder Chat button with new component
- Passes sessionId prop from Redux state
- Button positioned after Open menu, before Attach button
---
 jam-ui/src/components/client/JKSessionScreen.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index 3b9c7ccb9..31d11371c 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -80,6 +80,7 @@ import JKSessionBackingTrack from './JKSessionBackingTrack.js';
 import JKSessionMetronome from './JKSessionMetronome.js';
 import JKSessionMetronomePlayer from './JKSessionMetronomePlayer.js';
 import JKSessionChatWindow from './JKSessionChatWindow.js';
+import JKSessionChatButton from './JKSessionChatButton.js';
 import JKPopupMediaControls from '../popups/JKPopupMediaControls.js';
 import { SESSION_PRIVACY_MAP } from '../../helpers/globals.js';
 import { toast } from 'react-toastify';
@@ -1127,9 +1128,7 @@ const JKSessionScreen = () => {
             <img src={broadcastIcon} alt="Broadcast" style={{ width: '16px', height: '16px', marginRight: '0.2rem' }} />
             Broadcast</Button>
           <JKSessionOpenMenu onBackingTrackSelected={handleBackingTrackSelected} onJamTrackSelected={() => dispatch(openModal('jamTrack'))} onMetronomeSelected={handleMetronomeSelected} />
-          <Button className='btn-custom-outline' outline size="md">
-            <img src={chatIcon} alt="Chat" style={{ width: '16px', height: '16px', marginRight: '0.2rem' }} />
-            Chat</Button>
+          <JKSessionChatButton sessionId={sessionId} />
           <Button className='btn-custom-outline' outline size="md">
             <img src={attachIcon} alt="Attach" style={{ width: '16px', height: '16px', marginRight: '0.2rem' }} />
             Attach</Button>