Skip to content

refactor: Phase 1 — Extract ChatHeader, SystemPromptCard, ChatAlerts, ChatComposer from ChatMessagesPanel#361

Draft
mmogr wants to merge 2 commits intomainfrom
feat/chat-ui-overhaul-phase1
Draft

refactor: Phase 1 — Extract ChatHeader, SystemPromptCard, ChatAlerts, ChatComposer from ChatMessagesPanel#361
mmogr wants to merge 2 commits intomainfrom
feat/chat-ui-overhaul-phase1

Conversation

@mmogr
Copy link
Owner

@mmogr mmogr commented Mar 15, 2026

Phase 1: Component Decomposition (#360)

Extracts 4 focused subcomponents from ChatMessagesPanel (857 → 652 LOC):

Component LOC Responsibility
ChatHeader 123 Header bar: rename input, AI title gen, voice toggle, tools popover, status badge, clear/export
SystemPromptCard 104 System prompt view/edit with save/cancel/reset
ChatAlerts 38 Error banner + server-stopped warning
ChatComposer 110 Composer with ComposerPrimitive, deep research toggle, send/stop

What's preserved

  • All assistant-ui primitives (ThreadPrimitive, ComposerPrimitive, MessagePrimitive) — wrapped, never replaced
  • Context isolation: ThinkingTimingContext, VoiceContext, DeepResearchContext remain separate
  • researchMessageIdRef stays in ChatMessagesPanel (mutated before render tree)
  • No behavioral changes — strictly structural refactor

Testing checklist

  • Chat page loads without errors
  • Header displays conversation title, rename works
  • AI title generation triggers correctly
  • Voice toggle appears and functions
  • Tools popover shows available tools
  • System prompt card: view, edit, save, cancel, reset
  • Error alerts display when chat errors occur
  • Server disconnection warning appears/disappears
  • Composer input accepts text, sends messages
  • Deep research toggle works
  • Send/stop buttons function correctly
  • Keyboard shortcuts (Enter to send, Shift+Enter for newline)
  • Message streaming works end-to-end
  • Delete message flow still works
  • Scroll-to-bottom behavior preserved

mmogr added 2 commits March 15, 2026 14:58
…ser from ChatMessagesPanel

Phase 1 of chat UI overhaul (#360).

- ChatHeader (123 LOC): conversation header bar with rename, title gen, voice, tools, status
- SystemPromptCard (104 LOC): system prompt view/edit with save/cancel/reset
- ChatAlerts (38 LOC): error banner + server-stopped warning
- ChatComposer (110 LOC): composer with deep research toggle and send/stop

ChatMessagesPanel reduced from 857 → 652 LOC. All assistant-ui primitives
preserved. Context isolation unchanged.
Wrap TwoPanelLayout in visibility container divs to fix CSS cascade
conflict between Tailwind's 'hidden' and 'md:grid' display rules
that caused both Chat and Console views to render simultaneously.

Also ran npm audit fix to bump flatted 3.3.4 → 3.4.1 (DoS vuln),
though package-lock.json is gitignored so that fix is local only.
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.

1 participant