feat(08-02): integrate message list into chat window

Replace placeholder content with JKChatMessageList component:
- Import JKChatMessageList
- Remove placeholder div with text
- JKChatMessageList handles its own styling (flex: 1, padding, scroll)
- Update component documentation

Chat window now displays:
- Header with channel name and close button (fixed top)
- Message list with auto-scroll (scrollable, flex: 1)
- Loading spinner when fetching history
- Empty state when no messages
- Individual messages with avatars and timestamps

Layout follows flexbox pattern with header fixed and message list
filling remaining space with independent scrolling.

Ready for Plan 8.3 (Chat Button & Unread Badge).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Nuwan 2026-01-27 14:07:42 +05:30
parent 07779a9fa8
commit 6df9356b61
1 changed files with 4 additions and 8 deletions

View File

@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import WindowPortal from '../common/WindowPortal.js';
import JKChatHeader from './chat/JKChatHeader.js';
import JKChatMessageList from './chat/JKChatMessageList.js';
import {
selectIsChatWindowOpen,
selectActiveChannel,
@ -20,9 +21,9 @@ import {
* - closeChatWindow: Action to close window
*
* Component hierarchy:
* WindowPortal JKChatHeader + [content area placeholder]
* WindowPortal JKChatHeader + JKChatMessageList
*
* Note: Message list implementation deferred to Plan 8.2
* Note: Message composition implementation deferred to Plan 9
*/
const JKSessionChatWindow = () => {
const dispatch = useDispatch();
@ -60,12 +61,7 @@ const JKSessionChatWindow = () => {
channelName={getChannelName()}
onClose={handleClose}
/>
<div style={{ flex: 1, padding: '16px', backgroundColor: '#ffffff' }}>
{/* Message list placeholder - Plan 8.2 */}
<p style={{ color: '#6c757d', textAlign: 'center', marginTop: '24px' }}>
Chat messages will appear here
</p>
</div>
<JKChatMessageList />
</div>
</WindowPortal>
);