fix(chat): contain activity response previews - #26
Conversation
📝 WalkthroughWalkthroughThe chat response layout now constrains response width and hides overflow. A regression test verifies clipped activity-card content and bounded response previews. ChangesChat response bounds
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
tests/regression/chat-css-regression.test.mjs (1)
143-155: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftAdd a runtime regression for the preview toggle.
These assertions inspect source text only. They do not render an overflowing response or exercise the
Show full responsetoShow lesstransition. Add a focused DOM or component test. Assert thatShow lessremains available after expansion.As per coding guidelines, tests must maintain regression and contract coverage for behavior changes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/regression/chat-css-regression.test.mjs` around lines 143 - 155, Add a focused runtime DOM or component test alongside the existing source assertions that renders an overflowing response preview, activates the “Show full response” control, and verifies the “Show less” control remains available after expansion. Keep the current source-text assertions and target the existing preview toggle behavior rather than changing production code.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@webview/shared/src/chat/MessageComponents.tsx`:
- Around line 12753-12755: Update the response preview overflow handling near
shouldConstrainResponsePreview so expanding via “Show full response” does not
clear hasResponseOverflow. Preserve the measured overflow state, or measure it
independently against the collapsed max-h-32 constraint, so the “Show less”
control in the response toggle remains available.
---
Nitpick comments:
In `@tests/regression/chat-css-regression.test.mjs`:
- Around line 143-155: Add a focused runtime DOM or component test alongside the
existing source assertions that renders an overflowing response preview,
activates the “Show full response” control, and verifies the “Show less” control
remains available after expansion. Keep the current source-text assertions and
target the existing preview toggle behavior rather than changing production
code.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: dbefb350-7020-4bfe-af9b-7ded93bbc966
📒 Files selected for processing (2)
tests/regression/chat-css-regression.test.mjswebview/shared/src/chat/MessageComponents.tsx
| "relative min-w-0 max-w-full mt-1.5 space-y-1.5", | ||
| shouldConstrainResponsePreview && "max-h-32 overflow-hidden", | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the overflow state when the response expands.
When the response exceeds max-h-32, hasResponseOverflow becomes true. After the user clicks Show full response, the effect at Lines 11724-11742 clears this state. The Show less control at Lines 12776-12789 then disappears.
Retain the measured state while expanded, or measure overflow against the collapsed height independently.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@webview/shared/src/chat/MessageComponents.tsx` around lines 12753 - 12755,
Update the response preview overflow handling near
shouldConstrainResponsePreview so expanding via “Show full response” does not
clear hasResponseOverflow. Preserve the measured overflow state, or measure it
independently against the collapsed max-h-32 constraint, so the “Show less”
control in the response toggle remains available.
1 participant
Summary
Verification
Subtest: chat source css keeps active Tailwind directives
ok 1 - chat source css keeps active Tailwind directives
duration_ms: 1.197125
...
Subtest: chat css pipeline keeps Tailwind enabled for utility-heavy React chat components
ok 2 - chat css pipeline keeps Tailwind enabled for utility-heavy React chat components
duration_ms: 0.2705
...
Subtest: details tabs use one shared content gutter with an overview reset
ok 3 - details tabs use one shared content gutter with an overview reset
duration_ms: 0.293167
...
Subtest: Active Task is a peer overview section instead of a parent heading
ok 4 - Active Task is a peer overview section instead of a parent heading
duration_ms: 0.281084
...
Subtest: overview section headers use labels and chevrons without decorative dots
ok 5 - overview section headers use labels and chevrons without decorative dots
duration_ms: 0.462542
...
Subtest: active checklist progress marker uses the themed status indicator
ok 6 - active checklist progress marker uses the themed status indicator
duration_ms: 2.357333
...
Subtest: active compaction uses the shared card border token
ok 7 - active compaction uses the shared card border token
duration_ms: 0.607208
...
Subtest: activity path tooltips use an owned opaque surface
ok 8 - activity path tooltips use an owned opaque surface
duration_ms: 0.635375
...
Subtest: response previews stay contained inside activity cards
ok 9 - response previews stay contained inside activity cards
duration_ms: 0.868833
...
Subtest: markdown-body ordered lists must display with decimal numbers (not bullets)
ok 10 - markdown-body ordered lists must display with decimal numbers (not bullets)
duration_ms: 0.242708
...
Subtest: markdown-body unordered lists must display with disc bullets
ok 11 - markdown-body unordered lists must display with disc bullets
duration_ms: 0.16625
...
Subtest: markdown-body lists must have separate rules for ul and ol (not combined)
ok 12 - markdown-body lists must have separate rules for ul and ol (not combined)
duration_ms: 0.33725
...
Subtest: markdown-body code blocks must include a visible copy button affordance
ok 13 - markdown-body code blocks must include a visible copy button affordance
duration_ms: 0.259708
...
1..13
tests 13
suites 0
pass 13
fail 0
cancelled 0
skipped 0
todo 0
duration_ms 78.770292
vite v5.4.21 building for production...
transforming...
✓ 1534 modules transformed.
rendering chunks...
computing gzip size...
dist/ThemeFileIcon.css 2.18 kB │ gzip: 0.80 kB
dist/chat.css 271.00 kB │ gzip: 45.69 kB
dist/walkthrough.js 2.39 kB │ gzip: 0.88 kB
dist/textarea.js 12.55 kB │ gzip: 3.53 kB
dist/plan.js 36.02 kB │ gzip: 7.69 kB
dist/chat.js 1,613.95 kB │ gzip: 290.97 kB
dist/ThemeFileIcon.js 1,866.17 kB │ gzip: 476.06 kB
✓ built in 3.40s
Merged 2 CSS files into chat.css
Closes #21
Summary by CodeRabbit