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:
parent
07779a9fa8
commit
6df9356b61
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue