feat(ui): chat UI polish — streaming, markdown, and thinking block#123
feat(ui): chat UI polish — streaming, markdown, and thinking block#123preetsuthar17 merged 6 commits intomainfrom
Conversation
Change assistant message bubbles from left-aligned to full-width stretch for better readability and content flow.
Add morphdom for DOM diffing, Shiki for code block syntax highlighting, and CSS for GFM tables, blockquotes, strikethrough, and streaming fade-in animations.
Rewrite acp-render with morphdom-based DOM diffing for flicker-free streaming, rAF-batched rendering, and a thinking block system that shows Searching/Reviewing/Finished steps for web tool calls with persistent baked state across chat switches.
Integrate thinking block lifecycle into the page render loop with correct DOM positioning, smart auto-scroll that respects manual scrolling, and WebSocket reconnection resilience to preserve thinking state across disconnects.
📋 GitRank PR AnalysisScore: 0 points (ineligible)
Eligibility Checks
Impact SummaryThis PR implements significant UI enhancements including full-width assistant message layout, extended markdown rendering with Shiki syntax highlighting and GFM tables, smooth streaming with morphdom DOM diffing and fade-in animations, and a thinking block UI showing agent reasoning steps. The implementation adds 1,691 lines across 10 files with comprehensive test updates to support the new DOM manipulation and streaming logic. Smart auto-scroll respects manual user scrolling and persists thinking blocks across chat switches and WebSocket reconnections. Analysis DetailsComponent Classification: This PR affects UI rendering, markdown processing, streaming animations, and thinking block display—multiple subsystems without a single dominant category. Classified as OTHER due to cross-cutting nature of the feature. Severity Justification: This is a medium-severity enhancement (P2). It improves UI polish, readability, and user experience with streaming animations and thinking block visualization, but does not fix critical bugs or prevent data loss. The changes are functional improvements rather than critical fixes. Eligibility Notes: Issue: False—no referenced issue/bug report; this is a feature enhancement. Fix_implementation: True—code changes align with PR title and description (streaming, markdown, thinking blocks all implemented). PR_linked: True—detailed description with test plan provided. Tests: True—multiple test files updated (acp-page-cache.test.mjs, acp-page-notice.test.mjs, acp-page-session-binding.test.mjs, acp-render.test.mjs) with new DOM mocking utilities and test assertions. Tests_required: True—this is a significant feature addition affecting business logic (streaming rendering, thinking state persistence, DOM diffing), UI rendering pipeline, and state management, all of which require test coverage to prevent regressions. Analyzed by GitRank 🤖 |
2 participants
Summary
Test plan