diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index e0a61574e..482353cdc 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -137,10 +137,12 @@ Plans: **Goal**: Build modeless chat dialog with message list and user information display **Depends on**: Phase 7 **Research**: Unlikely (following established modal/dialog patterns) -**Plans**: TBD +**Plans**: 3 plans Plans: -- [ ] 08-01: TBD (run /gsd:plan-phase 8 to break down) +- [ ] 08-01: Chat Window Shell & WindowPortal Integration (4 tasks) +- [ ] 08-02: Message List & Auto-Scroll (5 tasks, mixed TDD) +- [ ] 08-03: Chat Button & Unread Badge (3-4 tasks) #### Phase 9: Message Composition & Sending **Goal**: Implement text input, send functionality, and real-time message delivery @@ -183,6 +185,7 @@ Phases execute in numeric order: 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → | 5. JamTrack Implementation | v1.0 | 5/5 | Complete | 2026-01-14 | | 6. Session Chat Research & Design | v1.1 | 2/2 | Complete | 2026-01-26 | | 7. Chat Infrastructure & State Management | v1.1 | 3/3 | Complete | 2026-01-27 | +| 8. Chat Window UI & Message Display | v1.1 | 0/3 | Not started | - | | 8. Chat Window UI & Message Display | v1.1 | 0/TBD | Not started | - | | 9. Message Composition & Sending | v1.1 | 0/TBD | Not started | - | | 10. Read/Unread Status Management | v1.1 | 0/TBD | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index c20701a1d..dc1c70d12 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -9,10 +9,10 @@ See: .planning/PROJECT.md (updated 2026-01-13) ## Current Position -Phase: 7 of 11 (Chat Infrastructure & State Management) -Plan: 07-03 Complete -Status: Phase 7 complete (3/3 plans), ready for Phase 8 (Chat Window UI & Message Display) -Last activity: 2026-01-27 — Plan 3 (WebSocket Integration & Selectors) complete +Phase: 8 of 11 (Chat Window UI & Message Display) +Plan: Phase 8 planning complete +Status: Phase 7 complete (3/3 plans), Phase 8 plans created (3 plans), ready to execute Plan 08-01 +Last activity: 2026-01-27 — Phase 8 planning complete (3 plans created) Progress: █████░░░░░ 50% (v1.1) @@ -37,7 +37,7 @@ Progress: █████░░░░░ 50% (v1.1) **v1.1 Music Session Chat (In Progress):** - Total plans completed: 5 (Phase 6: 2 plans, Phase 7: 3 plans) - Total phases: 6 (phases 6-11) -- Progress: 50% (Phase 6 complete, Phase 7 complete, Phase 8 ready to start) +- Progress: 50% (Phase 6 complete, Phase 7 complete, Phase 8 planned with 3 plans) **Recent Trend:** - Last milestone: v1.0 completed 2026-01-14 with excellent velocity @@ -249,7 +249,7 @@ None yet. ## Session Continuity Last session: 2026-01-27 -Stopped at: Phase 7 Plan 2 complete (Async Thunks & API Integration) +Stopped at: Phase 8 planning complete (3 plans created) Resume file: None -**Next:** Phase 7 Plan 3 (WebSocket Integration & Selectors) - Implement CHAT_MESSAGE handler, 8 memoized selectors, localStorage persistence for unread counts +**Next:** Execute Plan 08-01 (Chat Window Shell & WindowPortal Integration) - Create JKSessionChatWindow, JKChatHeader, integrate with JKSessionScreen, write integration tests diff --git a/.planning/phases/08-chat-window-ui/08-01-PLAN.md b/.planning/phases/08-chat-window-ui/08-01-PLAN.md new file mode 100644 index 000000000..2d9fe0c52 --- /dev/null +++ b/.planning/phases/08-chat-window-ui/08-01-PLAN.md @@ -0,0 +1,423 @@ +--- +phase: 08-chat-window-ui +plan: 01 +type: standard +--- + + +Create chat window shell with WindowPortal integration. + +Purpose: Build the foundational chat window UI that opens in a popup window, with header and close functionality. This establishes the chat UI foundation that Plans 8.2 and 8.3 will build upon. + +Output: JKSessionChatWindow component with WindowPortal wrapper, JKChatHeader component, integration with JKSessionScreen. + + + +@./.claude/get-shit-done/workflows/execute-phase.md +@./.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md + +# Phase 6 design documents +@.planning/phases/06-session-chat-research-design/CHAT_COMPONENT_DESIGN.md +@.planning/phases/06-session-chat-research-design/IMPLEMENTATION_ROADMAP.md + +# Phase 7 summary +@.planning/phases/07-chat-infrastructure/07-03-SUMMARY.md + +# WindowPortal reference +@jam-ui/src/components/common/WindowPortal.js +@jam-ui/src/components/client/JKSessionBackingTrackPlayer.js (WindowPortal usage example) +@jam-ui/src/components/client/JKSessionScreen.js (integration point) + +# Redux selectors from Phase 7 +@jam-ui/src/store/features/sessionChatSlice.js + +# Codebase conventions +@.planning/codebase/ARCHITECTURE.md +@.planning/codebase/CONVENTIONS.md +@CLAUDE.md + +**Key context from Phase 6 design:** +- Chat window uses WindowPortal for modeless popup (follows Backing Track/JamTrack pattern) +- Window dimensions: 450px width × 600px height (per CHAT_COMPONENT_DESIGN.md) +- Header shows channel name, close button +- Component hierarchy: JKSessionChatWindow → WindowPortal → JKChatHeader + [content area] +- Redux integration: `isWindowOpen`, `activeChannel`, `openChatWindow`, `closeChatWindow` actions + +**Key context from Phase 7:** +- Redux infrastructure complete: sessionChatSlice with reducers, thunks, selectors +- Selectors available: `selectIsChatWindowOpen`, `selectActiveChannel`, `selectChatMessages` +- Actions available: `openChatWindow`, `closeChatWindow`, `setActiveChannel`, `setWindowPosition` + + + + + + Task 1: Create JKChatHeader component + jam-ui/src/components/client/chat/JKChatHeader.js + +Create the chat window header component: + +1. Create directory `jam-ui/src/components/client/chat/` +2. Create `JKChatHeader.js` with: + - Props: `channelName` (string), `onClose` (function) + - Render: Title bar with channel name and close button (X) + - Style: Inline styles for now (SCSS in Plan 8.3) + - Example structure: + ```javascript + const JKChatHeader = ({ channelName, onClose }) => { + return ( +
+
+ {channelName || 'Session Chat'} +
+ +
+ ); + }; + ``` +3. Add PropTypes validation +4. Export component + +**Verification:** +- Component renders header with title +- Close button calls onClose callback +- Inline styles applied correctly + + +JKChatHeader.js exists with channel name display and close button. PropTypes defined. + + +Chat header component complete with close functionality. + + + + + Task 2: Create JKSessionChatWindow component with WindowPortal + jam-ui/src/components/client/JKSessionChatWindow.js + +Create the main chat window component with WindowPortal wrapper: + +1. Create `jam-ui/src/components/client/JKSessionChatWindow.js` +2. Import dependencies: + - React, Redux (useSelector, useDispatch) + - WindowPortal component + - JKChatHeader component + - sessionChatSlice actions and selectors +3. Component structure: + ```javascript + const JKSessionChatWindow = () => { + const dispatch = useDispatch(); + + // Selectors + const isWindowOpen = useSelector(selectIsChatWindowOpen); + const activeChannel = useSelector(selectActiveChannel); + + // Handlers + const handleClose = useCallback(() => { + dispatch(closeChatWindow()); + }, [dispatch]); + + // Channel name formatting + const getChannelName = () => { + if (!activeChannel) return 'Session Chat'; + if (activeChannel === 'global') return 'Global Chat'; + return 'Session Chat'; + }; + + if (!isWindowOpen) return null; + + return ( + +
+ +
+ {/* Message list placeholder - Plan 8.2 */} +

+ Chat messages will appear here +

+
+
+ + ); + }; + ``` +4. Add PropTypes (none needed - uses Redux) +5. Export component with React.memo for performance + +**Implementation notes:** +- Window dimensions: 450×600 per design spec +- Placeholder content area for message list (Plan 8.2) +- windowId for identification (useful for debugging) +- Conditional render: only if isWindowOpen is true +- Use useCallback for handleClose to prevent re-renders + +**Verification:** +- WindowPortal opens when isWindowOpen is true +- Header displays correct channel name +- Close button calls closeChatWindow action +- Window has correct dimensions +- Popup window closes properly + + +JKSessionChatWindow.js exists with WindowPortal wrapper. Window opens/closes correctly. Header displays channel name. + + +Chat window component complete with WindowPortal integration and placeholder content. + + + + + Task 3: Integrate chat window with JKSessionScreen + jam-ui/src/components/client/JKSessionScreen.js + +Add chat window to JKSessionScreen with conditional rendering: + +1. Open `jam-ui/src/components/client/JKSessionScreen.js` +2. Import JKSessionChatWindow at top: + ```javascript + import JKSessionChatWindow from './JKSessionChatWindow.js'; + ``` +3. Add chat window render at bottom of component JSX (after all other modals): + - Find the location after JKSessionMetronomePlayer or other popup components + - Add: `` + - Example placement (near end of return statement): + ```javascript + return ( + <> + {/* ... existing session UI ... */} + + {/* Media players */} + {backingTrackPlayerOpen && } + {jamTrackPlayerOpen && } + {metronomePlayerOpen && } + + {/* Chat window */} + + + ); + ``` + +**Integration notes:** +- No props needed (component uses Redux internally) +- Conditional rendering handled inside JKSessionChatWindow +- Follows same pattern as BackingTrackPlayer/JamTrackPlayer/MetronomePlayer +- Window lifecycle managed by WindowPortal + +**Verification:** +- Component renders without errors +- No console warnings +- Chat window doesn't show by default (isWindowOpen = false) +- Other session UI unaffected + + +JKSessionChatWindow integrated into JKSessionScreen. Component renders without errors. Window lifecycle works correctly. + + +Chat window integrated into session screen. Ready for message list implementation (Plan 8.2). + + + + + Task 4: Write integration test for window open/close behavior + jam-ui/test/chat/chat-window.spec.ts + +Create Playwright integration test for chat window behavior: + +1. Create directory `jam-ui/test/chat/` +2. Create `chat-window.spec.ts` with: + +```typescript +import { test, expect } from '@playwright/test'; +import { loginToJamUI, createAndJoinSession } from '../helpers/sessionHelpers'; + +test.describe('Chat Window', () => { + test.beforeEach(async ({ page }) => { + await loginToJamUI(page); + await createAndJoinSession(page); + }); + + test('opens chat window when dispatching openChatWindow action', async ({ page }) => { + // Dispatch openChatWindow action via Redux DevTools or direct call + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + store.dispatch({ type: 'sessionChat/openChatWindow' }); + }); + + // Wait for popup window + const popupPromise = page.waitForEvent('popup'); + const popup = await popupPromise; + + // Verify popup opened + expect(popup).toBeTruthy(); + await expect(popup).toHaveTitle('JamKazam Chat'); + + // Verify header content + const header = popup.locator('h5'); + await expect(header).toBeVisible(); + await expect(header).toContainText('Chat'); + }); + + test('closes chat window when clicking close button', async ({ page }) => { + // Open chat window + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + store.dispatch({ type: 'sessionChat/openChatWindow' }); + }); + + const popupPromise = page.waitForEvent('popup'); + const popup = await popupPromise; + + // Click close button + await popup.locator('button[aria-label="Close chat"]').click(); + + // Verify popup closed + await expect(popup).not.toBeAttached(); + + // Verify Redux state updated + const isWindowOpen = await page.evaluate(() => { + const store = window.__REDUX_STORE__; + return store.getState().sessionChat.isWindowOpen; + }); + expect(isWindowOpen).toBe(false); + }); + + test('shows placeholder message before messages loaded', async ({ page }) => { + // Open chat window + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + store.dispatch({ type: 'sessionChat/openChatWindow' }); + }); + + const popupPromise = page.waitForEvent('popup'); + const popup = await popupPromise; + + // Verify placeholder text + const placeholder = popup.locator('p:has-text("Chat messages will appear here")'); + await expect(placeholder).toBeVisible(); + }); +}); +``` + +3. Add Redux store exposure for testing (if not already present): + - In `jam-ui/src/store/store.js`, add: + ```javascript + if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') { + window.__REDUX_STORE__ = store; + } + ``` + +**Test coverage:** +- Window opens on openChatWindow action +- Window closes on close button click +- Header displays correct title +- Placeholder message visible +- Redux state updated correctly + +**Verification:** +- All 3 tests pass +- No console errors +- Window lifecycle works correctly + + +Integration tests written and passing. Window open/close behavior validated. Redux state updates confirmed. + + +Integration tests complete for chat window shell. Plan 8.1 complete. + + + + + + +Before declaring plan complete: +- [ ] JKChatHeader component exists with channel name and close button +- [ ] JKSessionChatWindow component exists with WindowPortal wrapper +- [ ] Chat window renders with correct dimensions (450×600) +- [ ] Window opens only when isWindowOpen is true +- [ ] Close button triggers closeChatWindow action +- [ ] JKSessionChatWindow integrated into JKSessionScreen +- [ ] Integration tests written and passing +- [ ] No console errors or warnings +- [ ] Popup window closes properly on unmount + + + + +- JKChatHeader.js created with close button +- JKSessionChatWindow.js created with WindowPortal integration +- Chat window integrated into JKSessionScreen +- Integration tests passing (3 tests minimum) +- Window opens/closes correctly via Redux actions +- Header displays channel name +- Placeholder content visible +- Ready for Plan 8.2 (Message List & Auto-Scroll) + + + +After completion, create `.planning/phases/08-chat-window-ui/08-01-SUMMARY.md`: + +# Phase 8 Plan 1: Chat Window Shell & WindowPortal Integration Summary + +**Created chat window foundation with popup window integration** + +## Accomplishments + +- Created JKChatHeader component with channel name display and close button +- Created JKSessionChatWindow component with WindowPortal wrapper +- Integrated chat window into JKSessionScreen (conditional rendering) +- Wrote integration tests for window open/close behavior +- Window lifecycle managed via Redux (openChatWindow/closeChatWindow actions) + +## Files Created/Modified + +- `jam-ui/src/components/client/chat/JKChatHeader.js` - Header component (NEW) +- `jam-ui/src/components/client/JKSessionChatWindow.js` - Main chat window (NEW) +- `jam-ui/src/components/client/JKSessionScreen.js` - Added chat window render (MODIFIED) +- `jam-ui/test/chat/chat-window.spec.ts` - Integration tests (NEW) + +## Decisions Made + +[Document any implementation decisions: Window dimensions? Styling approach? Redux integration patterns?] + +## Issues Encountered + +[Any challenges during implementation, or "None"] + +## Next Phase Readiness + +Ready for Plan 2 (Message List & Auto-Scroll) + diff --git a/.planning/phases/08-chat-window-ui/08-02-PLAN.md b/.planning/phases/08-chat-window-ui/08-02-PLAN.md new file mode 100644 index 000000000..836443b6a --- /dev/null +++ b/.planning/phases/08-chat-window-ui/08-02-PLAN.md @@ -0,0 +1,738 @@ +--- +phase: 08-chat-window-ui +plan: 02 +type: mixed +--- + + +Build message list with auto-scroll behavior and message display components. + +Purpose: Create the core chat UI for displaying messages with auto-scroll logic, message formatting, and loading/empty states. This completes the read-only chat experience. + +Output: JKChatMessageList, JKChatMessage, loading/empty components, auto-scroll logic, timestamp formatting utility. + + + +@./.claude/get-shit-done/workflows/execute-phase.md +@./.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md + +# Phase 6 design documents +@.planning/phases/06-session-chat-research-design/CHAT_COMPONENT_DESIGN.md +@.planning/phases/06-session-chat-research-design/IMPLEMENTATION_ROADMAP.md + +# Phase 7 summary +@.planning/phases/07-chat-infrastructure/07-03-SUMMARY.md + +# Phase 8 Plan 1 summary +@.planning/phases/08-chat-window-ui/08-01-SUMMARY.md + +# Redux selectors and state +@jam-ui/src/store/features/sessionChatSlice.js + +# Chat window shell +@jam-ui/src/components/client/JKSessionChatWindow.js + +# Codebase conventions +@.planning/codebase/ARCHITECTURE.md +@.planning/codebase/CONVENTIONS.md +@CLAUDE.md + +**Key context from Phase 6 design:** +- Message list: Scrollable container with auto-scroll to bottom on new messages +- Auto-scroll logic: Respect user manual scrolling (disable auto-scroll when scrolled up) +- Message format: Avatar (or initials), sender name, message text, timestamp (relative) +- Loading state: Spinner while fetching history +- Empty state: "No messages yet" when messagesByChannel[channel] is empty +- Timestamp formatting: Use dayjs for relative time (e.g., "2 minutes ago", "Yesterday") + +**Key context from Phase 7:** +- Selectors available: `selectChatMessages(state, channel)`, `selectFetchStatus(state, channel)` +- Message structure: `{ id, senderId, senderName, message, createdAt, channel }` +- fetchChatHistory thunk: Available for loading history (optional for now) + +**Auto-scroll requirements from design:** +- Scroll to bottom on component mount +- Scroll to bottom when new message arrives (if user at bottom) +- Don't auto-scroll if user manually scrolled up (preserve position) +- Re-enable auto-scroll when user scrolls back to bottom +- Detect "at bottom" threshold: within 50px of bottom + +**TDD requirements from CLAUDE.md:** +- Auto-scroll logic should be tested (unit test for scroll behavior state machine) +- Timestamp formatting utility must have unit tests +- Message rendering can skip TDD (visual component) + + + + + + Task 1: Create timestamp formatting utility (TDD) + jam-ui/src/utils/formatTimestamp.js, jam-ui/src/utils/__tests__/formatTimestamp.test.js + +Using TDD, create utility function for relative timestamp formatting: + +**RED Phase - Write failing tests first:** + +1. Create directory `jam-ui/src/utils/` (if not exists) +2. Create test file `jam-ui/src/utils/__tests__/formatTimestamp.test.js`: + ```javascript + import { formatTimestamp } from '../formatTimestamp'; + + describe('formatTimestamp', () => { + test('returns "Just now" for messages within last minute', () => { + const now = new Date(); + expect(formatTimestamp(now.toISOString())).toBe('Just now'); + }); + + test('returns "X minutes ago" for messages within last hour', () => { + const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000); + expect(formatTimestamp(fiveMinutesAgo.toISOString())).toBe('5 minutes ago'); + }); + + test('returns "X hours ago" for messages within last day', () => { + const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000); + expect(formatTimestamp(twoHoursAgo.toISOString())).toBe('2 hours ago'); + }); + + test('returns "Yesterday" for messages from previous day', () => { + const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000); + expect(formatTimestamp(yesterday.toISOString())).toMatch(/Yesterday/); + }); + + test('returns date for older messages', () => { + const lastWeek = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000); + const result = formatTimestamp(lastWeek.toISOString()); + expect(result).toMatch(/\d{1,2}\/\d{1,2}\/\d{4}/); // MM/DD/YYYY format + }); + + test('handles invalid dates gracefully', () => { + expect(formatTimestamp(null)).toBe(''); + expect(formatTimestamp(undefined)).toBe(''); + expect(formatTimestamp('invalid')).toBe(''); + }); + }); + ``` +3. Run tests - should FAIL (utility doesn't exist yet) + +**GREEN Phase - Implement utility:** + +4. Install dayjs if not already present: + ```bash + cd jam-ui + npm install dayjs + ``` +5. Create `jam-ui/src/utils/formatTimestamp.js`: + ```javascript + import dayjs from 'dayjs'; + import relativeTime from 'dayjs/plugin/relativeTime'; + + dayjs.extend(relativeTime); + + /** + * Formats a timestamp as relative time (e.g., "2 minutes ago", "Yesterday") + * @param {string} timestamp - ISO timestamp string + * @returns {string} Formatted relative time + */ + export const formatTimestamp = (timestamp) => { + if (!timestamp) return ''; + + try { + const date = dayjs(timestamp); + if (!date.isValid()) return ''; + + const now = dayjs(); + const diffInMinutes = now.diff(date, 'minute'); + const diffInHours = now.diff(date, 'hour'); + const diffInDays = now.diff(date, 'day'); + + if (diffInMinutes < 1) return 'Just now'; + if (diffInMinutes < 60) return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`; + if (diffInHours < 24) return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`; + if (diffInDays === 1) return 'Yesterday'; + if (diffInDays < 7) return date.format('dddd'); // Day name (e.g., "Monday") + return date.format('MM/DD/YYYY'); + } catch (error) { + console.error('formatTimestamp error:', error); + return ''; + } + }; + ``` +6. Run tests - should PASS + +**REFACTOR Phase:** + +7. Add JSDoc comments for clarity +8. Consider edge cases (future dates, very old dates) +9. Ensure tests still pass + +**Verification:** +- All 6 tests pass +- Handles invalid input gracefully +- Returns expected formats for all time ranges + + +formatTimestamp utility created with passing unit tests. All time ranges handled correctly. Invalid input handled gracefully. + + +Timestamp formatting utility complete with TDD validation. + + + + + Task 2: Create JKChatMessage component + jam-ui/src/components/client/chat/JKChatMessage.js + +Create individual message display component: + +1. Create `jam-ui/src/components/client/chat/JKChatMessage.js` +2. Import formatTimestamp utility +3. Component structure: + ```javascript + import React from 'react'; + import PropTypes from 'prop-types'; + import { formatTimestamp } from '../../../utils/formatTimestamp'; + + const JKChatMessage = ({ message }) => { + const { senderName, message: text, createdAt } = message; + + // Get initials for avatar (first letter of first and last name) + const getInitials = (name) => { + if (!name) return '?'; + const parts = name.trim().split(' '); + if (parts.length === 1) return parts[0][0].toUpperCase(); + return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); + }; + + return ( +
+ {/* Avatar */} +
+ {getInitials(senderName)} +
+ + {/* Message content */} +
+
+ + {senderName || 'Unknown'} + + + {formatTimestamp(createdAt)} + +
+
+ {text} +
+
+
+ ); + }; + + JKChatMessage.propTypes = { + message: PropTypes.shape({ + id: PropTypes.string.isRequired, + senderId: PropTypes.string.isRequired, + senderName: PropTypes.string, + message: PropTypes.string.isRequired, + createdAt: PropTypes.string.isRequired + }).isRequired + }; + + export default React.memo(JKChatMessage); + ``` + +**Component features:** +- Avatar with initials (first + last name initials) +- Sender name in bold +- Relative timestamp (via formatTimestamp utility) +- Message text with word wrapping +- React.memo for performance (prevents re-renders on list scroll) +- Inline styles (SCSS in Plan 8.3 if needed) + +**Verification:** +- Component renders message correctly +- Initials generated properly +- Timestamp formatted correctly +- No PropTypes warnings + + +JKChatMessage component created with avatar, name, message, and timestamp display. React.memo applied for performance. + + +Message display component complete with formatting and performance optimization. + + + + + Task 3: Create loading and empty state components + jam-ui/src/components/client/chat/JKChatLoadingSpinner.js, jam-ui/src/components/client/chat/JKChatEmptyState.js + +Create loading spinner and empty state components: + +**1. JKChatLoadingSpinner.js:** +```javascript +import React from 'react'; +import { Spinner } from 'reactstrap'; + +const JKChatLoadingSpinner = () => { + return ( +
+ +

Loading messages...

+
+ ); +}; + +export default JKChatLoadingSpinner; +``` + +**2. JKChatEmptyState.js:** +```javascript +import React from 'react'; + +const JKChatEmptyState = () => { + return ( +
+
💬
+

+ No messages yet +

+

+ Be the first to send a message in this chat! +

+
+ ); +}; + +export default JKChatEmptyState; +``` + +**Component features:** +- Loading: Spinner from reactstrap + "Loading messages..." text +- Empty: Chat emoji + encouraging message +- Centered layout with padding +- Simple, clear messaging +- No props needed (stateless components) + +**Verification:** +- Both components render without errors +- Styles applied correctly +- Spinner animates +- No console warnings + + +Loading and empty state components created. Both render correctly with appropriate styling. + + +Loading and empty state components complete. + + + + + Task 4: Create JKChatMessageList with auto-scroll logic (TDD for auto-scroll behavior) + jam-ui/src/components/client/chat/JKChatMessageList.js, jam-ui/src/components/client/chat/__tests__/JKChatMessageList.test.js + +Create message list component with auto-scroll logic. Use TDD for auto-scroll behavior. + +**RED Phase - Write failing tests for auto-scroll logic:** + +1. Create test file `jam-ui/src/components/client/chat/__tests__/JKChatMessageList.test.js`: + ```javascript + import React from 'react'; + import { render, screen } from '@testing-library/react'; + import { Provider } from 'react-redux'; + import { configureStore } from '@reduxjs/toolkit'; + import JKChatMessageList from '../JKChatMessageList'; + import sessionChatReducer from '../../../../store/features/sessionChatSlice'; + + const createMockStore = (messages = []) => { + return configureStore({ + reducer: { + sessionChat: sessionChatReducer + }, + preloadedState: { + sessionChat: { + messagesByChannel: { 'test-channel': messages }, + activeChannel: 'test-channel', + fetchStatus: { 'test-channel': 'idle' } + } + } + }); + }; + + describe('JKChatMessageList auto-scroll behavior', () => { + test('scrolls to bottom on mount if messages exist', () => { + const messages = [ + { id: '1', senderId: 'user1', senderName: 'User 1', message: 'Hello', createdAt: new Date().toISOString() } + ]; + const store = createMockStore(messages); + + const scrollToMock = jest.fn(); + HTMLDivElement.prototype.scrollTo = scrollToMock; + + render( + + + + ); + + // Should call scrollTo after messages render + // Note: May need to wait for useEffect + // expect(scrollToMock).toHaveBeenCalled(); + }); + + test('shows empty state when no messages', () => { + const store = createMockStore([]); + + render( + + + + ); + + expect(screen.getByText('No messages yet')).toBeInTheDocument(); + }); + + test('shows loading spinner when fetching', () => { + const store = configureStore({ + reducer: { sessionChat: sessionChatReducer }, + preloadedState: { + sessionChat: { + messagesByChannel: {}, + activeChannel: 'test-channel', + fetchStatus: { 'test-channel': 'loading' } + } + } + }); + + render( + + + + ); + + expect(screen.getByText('Loading messages...')).toBeInTheDocument(); + }); + }); + ``` + +2. Run tests - should FAIL (component doesn't exist yet) + +**GREEN Phase - Implement component:** + +3. Create `jam-ui/src/components/client/chat/JKChatMessageList.js`: + ```javascript + import React, { useEffect, useRef, useState, useCallback } from 'react'; + import { useSelector } from 'react-redux'; + import { + selectChatMessages, + selectFetchStatus, + selectActiveChannel + } from '../../../store/features/sessionChatSlice'; + import JKChatMessage from './JKChatMessage'; + import JKChatLoadingSpinner from './JKChatLoadingSpinner'; + import JKChatEmptyState from './JKChatEmptyState'; + + const JKChatMessageList = () => { + const activeChannel = useSelector(selectActiveChannel); + const messages = useSelector((state) => selectChatMessages(state, activeChannel)); + const fetchStatus = useSelector((state) => selectFetchStatus(state, activeChannel)); + + const listRef = useRef(null); + const [isUserScrolling, setIsUserScrolling] = useState(false); + const scrollTimeoutRef = useRef(null); + + // Scroll to bottom helper + const scrollToBottom = useCallback(() => { + if (listRef.current) { + listRef.current.scrollTo({ + top: listRef.current.scrollHeight, + behavior: 'smooth' + }); + } + }, []); + + // Detect if user is at bottom (within 50px threshold) + const isAtBottom = useCallback(() => { + if (!listRef.current) return false; + const { scrollTop, scrollHeight, clientHeight } = listRef.current; + return scrollHeight - scrollTop - clientHeight < 50; + }, []); + + // Handle scroll events + const handleScroll = useCallback(() => { + if (!listRef.current) return; + + // Clear existing timeout + if (scrollTimeoutRef.current) { + clearTimeout(scrollTimeoutRef.current); + } + + // Set user scrolling flag + setIsUserScrolling(true); + + // Reset flag after scroll stops (300ms debounce) + scrollTimeoutRef.current = setTimeout(() => { + setIsUserScrolling(false); + + // Re-enable auto-scroll if user scrolled to bottom + if (isAtBottom()) { + setIsUserScrolling(false); + } + }, 300); + }, [isAtBottom]); + + // Auto-scroll on new messages (if user at bottom or not manually scrolling) + useEffect(() => { + if (!isUserScrolling && messages.length > 0) { + scrollToBottom(); + } + }, [messages.length, isUserScrolling, scrollToBottom]); + + // Scroll to bottom on mount + useEffect(() => { + if (messages.length > 0) { + setTimeout(scrollToBottom, 100); // Delay for DOM render + } + }, [scrollToBottom]); + + // Cleanup timeout on unmount + useEffect(() => { + return () => { + if (scrollTimeoutRef.current) { + clearTimeout(scrollTimeoutRef.current); + } + }; + }, []); + + // Loading state + if (fetchStatus === 'loading') { + return ; + } + + // Empty state + if (messages.length === 0) { + return ; + } + + // Message list + return ( +
+ {messages.map((message) => ( + + ))} +
+ ); + }; + + export default JKChatMessageList; + ``` + +4. Run tests - should PASS (at least empty/loading tests) + +**REFACTOR Phase:** + +5. Review auto-scroll logic: + - Scroll threshold (50px) is reasonable + - Debounce timeout (300ms) feels responsive + - useCallback prevents unnecessary re-renders +6. Add JSDoc comments for complex functions +7. Ensure tests still pass + +**Implementation notes:** +- Auto-scroll disabled when user manually scrolls up +- Re-enabled when user scrolls back to bottom (within 50px) +- Smooth scrolling for better UX +- 300ms debounce prevents jittery scroll detection +- scrollTimeoutRef cleanup on unmount prevents memory leaks + +**Verification:** +- Tests pass (empty state, loading state) +- Auto-scroll works on mount +- Auto-scroll works on new messages (if at bottom) +- Manual scroll disables auto-scroll +- Scrolling to bottom re-enables auto-scroll + + +JKChatMessageList component created with auto-scroll logic. Unit tests passing. Auto-scroll behavior validated. + + +Message list component complete with auto-scroll behavior and TDD validation. + + + + + Task 5: Integrate message list into JKSessionChatWindow + jam-ui/src/components/client/JKSessionChatWindow.js + +Replace placeholder content with JKChatMessageList: + +1. Open `jam-ui/src/components/client/JKSessionChatWindow.js` +2. Import JKChatMessageList: + ```javascript + import JKChatMessageList from './chat/JKChatMessageList.js'; + ``` +3. Replace placeholder content: + ```javascript + // OLD: +
+

+ Chat messages will appear here +

+
+ + // NEW: + + ``` + +4. Update component structure (remove padding wrapper, JKChatMessageList has its own styling): + ```javascript + return ( + +
+ + +
+ + ); + ``` + +**Verification:** +- Message list renders inside chat window +- Auto-scroll works on window open +- Header remains fixed at top +- Message list scrolls independently +- No layout issues + + +JKChatMessageList integrated into chat window. Messages display correctly. Auto-scroll works. Layout correct. + + +Message list integrated. Chat window now displays messages with auto-scroll. Plan 8.2 complete. + + + + + + +Before declaring plan complete: +- [ ] formatTimestamp utility created with passing unit tests +- [ ] JKChatMessage component renders message correctly +- [ ] JKChatLoadingSpinner and JKChatEmptyState components created +- [ ] JKChatMessageList component created with auto-scroll logic +- [ ] Auto-scroll unit tests written and passing +- [ ] Auto-scroll works on mount and new messages +- [ ] Manual scrolling disables auto-scroll +- [ ] Message list integrated into JKSessionChatWindow +- [ ] No console errors or warnings +- [ ] All existing tests still pass + + + + +- formatTimestamp utility with 6+ passing tests +- JKChatMessage component with initials avatar +- Loading and empty state components +- JKChatMessageList with auto-scroll behavior +- Auto-scroll logic tested (TDD) +- Message list integrated into chat window +- All tests passing +- Ready for Plan 8.3 (Chat Button & Unread Badge) + + + +After completion, create `.planning/phases/08-chat-window-ui/08-02-SUMMARY.md`: + +# Phase 8 Plan 2: Message List & Auto-Scroll Summary + +**Built message display with auto-scroll behavior** + +## Accomplishments + +- Created formatTimestamp utility with relative time formatting (TDD) +- Created JKChatMessage component with avatar, name, message, timestamp +- Created loading spinner and empty state components +- Created JKChatMessageList with auto-scroll logic (TDD for behavior) +- Integrated message list into chat window +- Auto-scroll respects user manual scrolling + +## Files Created/Modified + +- `jam-ui/src/utils/formatTimestamp.js` - Timestamp formatting utility (NEW) +- `jam-ui/src/utils/__tests__/formatTimestamp.test.js` - Unit tests (NEW) +- `jam-ui/src/components/client/chat/JKChatMessage.js` - Message component (NEW) +- `jam-ui/src/components/client/chat/JKChatLoadingSpinner.js` - Loading state (NEW) +- `jam-ui/src/components/client/chat/JKChatEmptyState.js` - Empty state (NEW) +- `jam-ui/src/components/client/chat/JKChatMessageList.js` - Message list with auto-scroll (NEW) +- `jam-ui/src/components/client/chat/__tests__/JKChatMessageList.test.js` - Unit tests (NEW) +- `jam-ui/src/components/client/JKSessionChatWindow.js` - Integrated message list (MODIFIED) + +## Decisions Made + +[Document any implementation decisions: Auto-scroll threshold? Debounce duration? Timestamp format choices?] + +## Issues Encountered + +[Any challenges with auto-scroll logic, or "None"] + +## Next Phase Readiness + +Ready for Plan 3 (Chat Button & Unread Badge) + diff --git a/.planning/phases/08-chat-window-ui/08-03-PLAN.md b/.planning/phases/08-chat-window-ui/08-03-PLAN.md new file mode 100644 index 000000000..205969acd --- /dev/null +++ b/.planning/phases/08-chat-window-ui/08-03-PLAN.md @@ -0,0 +1,592 @@ +--- +phase: 08-chat-window-ui +plan: 03 +type: standard +--- + + +Create chat button with unread badge and integrate into session screen navigation. + +Purpose: Add the chat button to JKSessionScreen top navigation with unread count badge, completing the chat window trigger UI and Phase 8. + +Output: JKSessionChatButton component with badge, navigation integration, styling, integration tests. + + + +@./.claude/get-shit-done/workflows/execute-phase.md +@./.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md + +# Phase 6 design documents +@.planning/phases/06-session-chat-research-design/CHAT_COMPONENT_DESIGN.md +@.planning/phases/06-session-chat-research-design/IMPLEMENTATION_ROADMAP.md + +# Phase 7 summary +@.planning/phases/07-chat-infrastructure/07-03-SUMMARY.md + +# Phase 8 Plan 1 & 2 summaries +@.planning/phases/08-chat-window-ui/08-01-SUMMARY.md +@.planning/phases/08-chat-window-ui/08-02-SUMMARY.md + +# Redux selectors and state +@jam-ui/src/store/features/sessionChatSlice.js + +# Session screen (integration point) +@jam-ui/src/components/client/JKSessionScreen.js + +# Codebase conventions +@.planning/codebase/ARCHITECTURE.md +@.planning/codebase/CONVENTIONS.md +@CLAUDE.md + +**Key context from Phase 6 design:** +- Chat button: Icon button with badge showing unread count +- Badge: Only visible when unreadCount > 0 +- Badge text: Number (1-99) or "99+" for counts >= 100 +- Button placement: Top navigation bar in JKSessionScreen (near other action buttons) +- Button behavior: Click opens chat window (dispatch openChatWindow + setActiveChannel) +- Icon: Use existing chatIcon from assets/img/client/chat.svg + +**Key context from Phase 7:** +- Selectors available: `selectTotalUnreadCount`, `selectIsChatWindowOpen`, `selectActiveChannel` +- Actions available: `openChatWindow`, `setActiveChannel` +- Unread count: Sum across all channels (global + session + lesson) + +**Session screen navigation:** +- Top bar has action buttons: gear (settings), invite, volume, video, record, broadcast, open, chat, attach, resync +- Icons imported from assets/img/client/*.svg +- Button pattern: `description` +- Badge pattern: Position badge absolutely over icon top-right corner + +**Integration test requirements:** +- Badge visibility (hidden when count = 0, visible when count > 0) +- Badge text ("1", "5", "99+") +- Button click opens chat window +- Redux state updated on click + + + + + + Task 1: Create JKSessionChatButton component + jam-ui/src/components/client/JKSessionChatButton.js + +Create chat button component with unread badge: + +1. Create `jam-ui/src/components/client/JKSessionChatButton.js` +2. Import dependencies: + - React, Redux (useSelector, useDispatch) + - sessionChatSlice actions and selectors + - chatIcon from assets +3. Component structure: + ```javascript + import React, { useCallback } from 'react'; + import { useDispatch, useSelector } from 'react-redux'; + import { + openChatWindow, + setActiveChannel, + selectTotalUnreadCount, + selectIsChatWindowOpen + } from '../../store/features/sessionChatSlice'; + import chatIcon from '../../assets/img/client/chat.svg'; + + const JKSessionChatButton = ({ sessionId }) => { + const dispatch = useDispatch(); + const unreadCount = useSelector(selectTotalUnreadCount); + const isWindowOpen = useSelector(selectIsChatWindowOpen); + + const handleClick = useCallback(() => { + if (isWindowOpen) { + // Window already open - do nothing (or focus window if possible) + return; + } + + // Set active channel to session chat + dispatch(setActiveChannel({ + channel: sessionId, + channelType: 'session' + })); + + // Open chat window + dispatch(openChatWindow()); + }, [dispatch, sessionId, isWindowOpen]); + + // Format badge text + const getBadgeText = () => { + if (unreadCount === 0) return ''; + if (unreadCount >= 100) return '99+'; + return String(unreadCount); + }; + + return ( +
+ Chat + {unreadCount > 0 && ( +
+ {getBadgeText()} +
+ )} +
+ ); + }; + + export default JKSessionChatButton; + ``` + +**Component features:** +- sessionId prop: Used to set active channel on click +- unreadCount badge: Only visible when count > 0 +- Badge formatting: "1", "5", "99+" (for 100+) +- Reduced opacity when window already open (visual feedback) +- Tooltip on hover ("Open session chat") +- Badge styling: Red background, white text, positioned top-right +- useCallback for handleClick to prevent re-renders + +**Verification:** +- Component renders chat icon +- Badge hidden when unreadCount = 0 +- Badge visible with correct text when unreadCount > 0 +- Click handler dispatches actions +- No PropTypes warnings + + +JKSessionChatButton component created with unread badge. Badge visibility and text correct. Click handler works. + + +Chat button component complete with unread badge functionality. + + + + + Task 2: Integrate chat button into JKSessionScreen navigation + jam-ui/src/components/client/JKSessionScreen.js + +Add chat button to session screen top navigation: + +1. Open `jam-ui/src/components/client/JKSessionScreen.js` +2. Import JKSessionChatButton near other component imports: + ```javascript + import JKSessionChatButton from './JKSessionChatButton.js'; + ``` +3. Locate the top navigation bar (look for action button icons: gear, invite, volume, etc.) + - Search for `gearIcon`, `inviteIcon`, `volumeIcon` to find the navigation section + - Likely in a Row/Col layout or flexbox container +4. Add JKSessionChatButton after the "open" button (openIcon) and before "attach" button (attachIcon): + ```javascript + {/* Example placement - adjust based on actual layout */} + Open + + Attach + ``` +5. Pass sessionId prop from component state/props: + - sessionId should be available from `selectSessionId` selector or `activeSession.id` + - Example: `const sessionId = useSelector(selectSessionId);` + +**Integration notes:** +- Button renders inline with other action buttons +- Spacing should match other icons (margin/padding) +- sessionId required for setting active channel +- Button order: ...open, chat, attach, resync (per design) + +**Verification:** +- Chat button visible in session screen top bar +- Button aligned with other action buttons +- sessionId passed correctly +- No layout issues +- Other buttons unaffected + + +Chat button integrated into JKSessionScreen navigation. Button visible and aligned. sessionId prop passed correctly. + + +Chat button integrated into session screen. UI complete. + + + + + Task 3: Write integration tests for chat button behavior + jam-ui/test/chat/chat-button.spec.ts + +Create Playwright integration tests for chat button: + +1. Create `jam-ui/test/chat/chat-button.spec.ts` +2. Write tests for badge visibility and click behavior: + +```typescript +import { test, expect } from '@playwright/test'; +import { loginToJamUI, createAndJoinSession } from '../helpers/sessionHelpers'; + +test.describe('Chat Button', () => { + test.beforeEach(async ({ page }) => { + await loginToJamUI(page); + await createAndJoinSession(page); + }); + + test('shows chat button in session screen navigation', async ({ page }) => { + // Verify chat button is visible + const chatButton = page.locator('img[alt="Chat"]'); + await expect(chatButton).toBeVisible(); + }); + + test('hides badge when unread count is 0', async ({ page }) => { + // Ensure unread count is 0 in Redux state + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + const state = store.getState().sessionChat; + expect(state.unreadCounts).toEqual({}); + }); + + // Badge should not be visible + const badge = page.locator('div:has-text(/^\\d+$/)').filter({ hasText: /^\\d+$/ }); + await expect(badge).not.toBeVisible(); + }); + + test('shows badge with correct count when messages arrive', async ({ page }) => { + // Simulate receiving a message (increment unread count via Redux) + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + store.dispatch({ + type: 'sessionChat/incrementUnreadCount', + payload: { channel: 'test-session-id' } + }); + }); + + // Badge should be visible with "1" + const badge = page.locator('div:has-text("1")'); + await expect(badge).toBeVisible(); + }); + + test('shows "99+" for counts >= 100', async ({ page }) => { + // Set unread count to 150 + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + for (let i = 0; i < 150; i++) { + store.dispatch({ + type: 'sessionChat/incrementUnreadCount', + payload: { channel: 'test-session-id' } + }); + } + }); + + // Badge should show "99+" + const badge = page.locator('div:has-text("99+")'); + await expect(badge).toBeVisible(); + }); + + test('opens chat window when button clicked', async ({ page }) => { + // Click chat button + const chatButton = page.locator('img[alt="Chat"]'); + await chatButton.click(); + + // Wait for popup window + const popupPromise = page.waitForEvent('popup', { timeout: 5000 }); + const popup = await popupPromise; + + // Verify popup opened + expect(popup).toBeTruthy(); + await expect(popup).toHaveTitle('JamKazam Chat'); + + // Verify Redux state updated + const isWindowOpen = await page.evaluate(() => { + const store = window.__REDUX_STORE__; + return store.getState().sessionChat.isWindowOpen; + }); + expect(isWindowOpen).toBe(true); + }); + + test('does not open duplicate window when button clicked again', async ({ page }) => { + // Click chat button + const chatButton = page.locator('img[alt="Chat"]'); + await chatButton.click(); + + // Wait for popup + const popupPromise = page.waitForEvent('popup'); + const popup = await popupPromise; + expect(popup).toBeTruthy(); + + // Click button again + await chatButton.click(); + + // No new popup should open (timeout after 2 seconds) + await expect(async () => { + await page.waitForEvent('popup', { timeout: 2000 }); + }).rejects.toThrow(); + }); + + test('resets badge count when chat window opened', async ({ page }) => { + // Add unread messages + await page.evaluate(() => { + const store = window.__REDUX_STORE__; + for (let i = 0; i < 5; i++) { + store.dispatch({ + type: 'sessionChat/incrementUnreadCount', + payload: { channel: 'test-session-id' } + }); + } + }); + + // Verify badge shows "5" + let badge = page.locator('div:has-text("5")'); + await expect(badge).toBeVisible(); + + // Open chat window + const chatButton = page.locator('img[alt="Chat"]'); + await chatButton.click(); + await page.waitForEvent('popup'); + + // Wait for Redux state to update + await page.waitForTimeout(500); + + // Badge should be hidden (count reset to 0) + badge = page.locator('div:has-text("5")'); + await expect(badge).not.toBeVisible(); + }); +}); +``` + +**Test coverage:** +- Button visibility +- Badge hidden when count = 0 +- Badge visible with correct text (1-99) +- Badge shows "99+" for counts >= 100 +- Button click opens chat window +- Duplicate window prevention +- Badge resets on window open + +**Verification:** +- All 7 tests pass +- No flaky tests +- Redux state validated correctly + + +Integration tests written and passing. Badge behavior validated. Window open behavior confirmed. Redux state updates verified. + + +Integration tests complete for chat button. Plan 8.3 complete. + + + + + Task 4: Add SCSS styling for chat button (optional) + jam-ui/src/components/client/JKSessionChatButton.scss + +Optionally create SCSS file for chat button styling: + +**Note:** This task is optional. Inline styles from Task 1 are sufficient for MVP. SCSS provides better organization for future maintenance. + +1. Create `jam-ui/src/components/client/JKSessionChatButton.scss`: + ```scss + .jk-session-chat-button { + position: relative; + display: inline-block; + + &__icon { + cursor: pointer; + width: 24px; + height: 24px; + opacity: 1; + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.8; + } + + &--open { + opacity: 0.6; + } + } + + &__badge { + position: absolute; + top: -6px; + right: -6px; + background-color: #dc3545; // Bootstrap danger red + color: white; + border-radius: 10px; + padding: 2px 6px; + font-size: 11px; + font-weight: bold; + line-height: 1; + min-width: 18px; + text-align: center; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + animation: badge-pulse 0.3s ease-out; + } + } + + @keyframes badge-pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } + } + ``` + +2. Import SCSS in component: + ```javascript + import './JKSessionChatButton.scss'; + ``` + +3. Update component JSX to use class names: + ```javascript +
+ Chat + {unreadCount > 0 && ( +
+ {getBadgeText()} +
+ )} +
+ ``` + +4. Run SCSS compilation: + ```bash + cd jam-ui + npm run scss + ``` + +**SCSS benefits:** +- Better organization (BEM naming convention) +- Hover effects for icon +- Badge pulse animation on new messages +- Easier to maintain and extend + +**Skip this task if:** +- Inline styles are sufficient for MVP +- Want to batch styling updates later +- Time constraints + +**Verification:** +- SCSS compiles without errors +- Styles applied correctly +- Hover effects work +- Badge animation smooth +- No visual regressions + + +SCSS styling added (or skipped). Chat button styled consistently. Animations work (if added). + + +Styling complete (or deferred). Chat button UI polished. + + + + + + +Before declaring plan complete: +- [ ] JKSessionChatButton component created with badge +- [ ] Badge hidden when unreadCount = 0 +- [ ] Badge visible with correct text (1-99, "99+") +- [ ] Chat button integrated into JKSessionScreen navigation +- [ ] sessionId prop passed correctly +- [ ] Integration tests written and passing (7 tests) +- [ ] Button click opens chat window +- [ ] Badge resets when window opens +- [ ] SCSS styling added (optional) +- [ ] No console errors or warnings + + + + +- JKSessionChatButton component with unread badge +- Badge visibility logic working correctly +- Chat button integrated into session navigation +- Integration tests passing (7+ tests) +- Button opens chat window with correct channel +- Badge resets on window open +- Styling complete (inline or SCSS) +- Phase 8 complete - Chat window UI fully functional +- Ready for Phase 9 (Message Composition & Sending) + + + +After completion, create `.planning/phases/08-chat-window-ui/08-03-SUMMARY.md`: + +# Phase 8 Plan 3: Chat Button & Unread Badge Summary + +**Created chat button with unread badge and integrated into session navigation** + +## Accomplishments + +- Created JKSessionChatButton component with unread count badge +- Badge shows correct text (1-99, "99+") and hides when count = 0 +- Integrated chat button into JKSessionScreen top navigation +- Wrote integration tests for badge visibility and click behavior +- Badge resets when chat window opens +- Optional SCSS styling (if completed) + +## Files Created/Modified + +- `jam-ui/src/components/client/JKSessionChatButton.js` - Chat button with badge (NEW) +- `jam-ui/src/components/client/JKSessionScreen.js` - Integrated chat button (MODIFIED) +- `jam-ui/test/chat/chat-button.spec.ts` - Integration tests (NEW) +- `jam-ui/src/components/client/JKSessionChatButton.scss` - SCSS styling (OPTIONAL, NEW) + +## Decisions Made + +[Document any implementation decisions: Badge positioning? Badge color? Button placement in navigation? SCSS vs inline styles?] + +## Issues Encountered + +[Any challenges with badge visibility, or "None"] + +## Phase 8 Complete! + +**Chat Window UI fully functional:** +- ✅ Chat window opens in popup (Plan 8.1) +- ✅ Messages display with auto-scroll (Plan 8.2) +- ✅ Chat button with unread badge (Plan 8.3) + +**Ready for Phase 9 (Message Composition & Sending).** + +Next phase will add: +- Text input composer +- Send button functionality +- Real-time message delivery +- Enter key to send +- Character count/limits +