Skip to content

feat: replace ref-based messages with component-based message bubbles#545

Open
avoidwork wants to merge 12 commits into
mainfrom
feat/component-based-message-bubbles
Open

feat: replace ref-based messages with component-based message bubbles#545
avoidwork wants to merge 12 commits into
mainfrom
feat/component-based-message-bubbles

Conversation

@avoidwork

Copy link
Copy Markdown
Owner

Description

Replace the ref-based message array architecture in the TUI with a component-based system where each message is a standalone MessageBubble component managing its own state. This eliminates the need for messagesRef, forceRender, and array spreading that fights React's rendering model.

Type of Change

  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Refactor (no functional changes)
  • Performance improvement
  • CI / build / tooling

Testing

  • All 1072 existing tests updated to use new component API
  • New unit tests for MessageBubble component (state updates, streaming, tool calls)
  • New unit tests for MessageList component (add, update, clear, windowing)
  • New unit tests for ConversationPanel simplification
  • Manual verification: messages render immediately, scroll works correctly, no streaming delay

Coverage

  • Line coverage maintained

Checklist

  • npm run lint passes
  • Tests pass with maintained line coverage
  • No forbidden patterns used
  • Conventional Commit style applied

Related Issues

Fixes #541

@avoidwork avoidwork self-assigned this Jul 7, 2026
avoidwork added 11 commits July 7, 2026 07:45
- Extract MessageBubble component with internal state management
- Create MessageList component for managing bubble instances
- Simplify app.js and conversationPanel.js to use new component API
- Section 1: 6/8 tasks complete (1.6, 1.8 pending)
- Section 2: 10/10 tasks complete
- Section 3: 5/5 tasks complete
- Section 4: 5/10 tasks complete (4.6-4.10 pending)
- Sections 5-6: not started
- Replace Date.now() + Math.random() with crypto.randomUUID()
- Ensures stable, globally unique IDs for each MessageBubble
- Add formatMessage, isStreamingMessage, countMessageLines, getToolCallLines
- Task 1.6 complete
- Add formatTime, getRoleColors, getBubbleStyle, renderMessages to conversationPanel.js
- Remove unused imports from messageBubble.js
- Mark tasks 13.1-13.4 as complete (tests, lint, coverage, startup)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: replace ref-based messages with component-based message bubbles

1 participant