Synced from GitHub
refactor(web): resting image previews and queued attachments are their own components#22719
Continues the ChatComposer split.
The thumbnails shown next to the prompt while the composer rests are now ComposerRestingImagePreviews, which ChatComposer renders in two places. The attachments of a queued message being edited are now ComposerQueuedAttachmentRow. Both live in ComposerAttachmentStrip.tsx. The resting previews compute their own preview counts. ChatComposer builds them once as an element const and passes its "+N more" handler directly. This adds no useStableCallback uses; ChatComposer keeps the 34 it has on main. Behavior is unchanged.
| before | this PR | |
|---|---|---|
| ChatComposer.tsx lines | 7,016 | 6,923 |
| ComposerAttachmentStrip.tsx lines | 535 | 656 |
| Renders, 20 typed chars | 678 | 678 |
Renders measured with the shared fiber counter (rc-init.js) on a seeded dev server: typing 20 characters into an existing thread's composer, median of 3 runs. This layer is for readability; it does not change renders.
Tests run: vp lint and vp fmt --check on the changed files, tsc-rs --noEmit for apps/web, and reactCompilerCoverage.test.ts for the changed files (0 bailouts).
🤖 Generated with Claude Code
Checks
- SuccessfulCodeRabbitGitHub
Review completed
- Successful
Skipped - Not affected
- Skipped
- Skipped
- Skipped
- SuccessfulRemove preview downloadGitHub
- SuccessfulLabel PR 22719GitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- Successful
- Successful
- SuccessfulCollect PR targetsGitHub
- Successful
- SuccessfulPrepare PR size configGitHub
- SuccessfulCheckGitHub
- SuccessfulNative fingerprint diffGitHub
- Skipped
- SkippedRustGitHub
- SkippedRelease SmokeGitHub
- SuccessfulTest WebGitHub
- SuccessfulTestGitHub
- SuccessfulBuild and TypecheckGitHub
- SkippedDeploy web previewGitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- SuccessfulLabel PR 22719GitHub
- SuccessfulCollect PR targetsGitHub
- SkippedEAS PreviewGitHub
- SuccessfulPrepare PR size configGitHub
- SuccessfulNative fingerprint diffGitHub
- SuccessfulTest Server 5GitHub
- SuccessfulTest Server 4GitHub
- SuccessfulTest Server 7GitHub
- SuccessfulTest Server 3GitHub
- SuccessfulTest Server 1GitHub
- SuccessfulTest Server 2GitHub
- SuccessfulTest Server 6GitHub
- SuccessfulChangesGitHub
- SuccessfulTest Server 8GitHub
- SuccessfulLintGitHub
Added 1 commit
- refactor(web): resting image previews and queued attachments are their own components7ccabf4
Synced from GitHub
Approvability
Verdict: Approved at 7ccabf4
Macroscope's review found this PR approvable — This refactor extracts existing resting-preview and queued-attachment markup into reusable components without changing their rendering, preview, expansion, or removal behavior. It introduces no schema, configuration, security, billing, deployment, or static-analysis changes.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
- Configuration used: Path: .coderabbit.config.ts
- Review profile: CHILL
- Plan: Team
- Run ID:
bab20354-8417-403a-bcf8-6c1f811578b0
📥 Commits
Reviewing files that changed from the base of the PR and between 1122a852bc1639e9a64142e58de97f38125c1336 and 7ccabf41dd3ddd91da2f990c070845d79e4a9e6f.
📒 Files selected for processing: 2
apps/web/src/components/chat/ChatComposer.tsxapps/web/src/components/chat/ComposerAttachmentStrip.tsx
Limit details: You’ve used all 10 included reviews currently available.
📝 Walkthrough
ChatComposer now uses reusable components for resting image previews and queued attachments. Resting previews support bounded thumbnails, fallback rendering, preview opening, and overflow handling. Queued attachments display thumbnails or filenames with removal controls.
Changes: Composer attachment previews
Layer / File(s) Summary Attachment preview components
apps/web/src/components/chat/ComposerAttachmentStrip.tsxAdds resting image previews with fallback rendering and overflow handling, and queued attachment rows with removal controls. ChatComposer integration
apps/web/src/components/chat/ChatComposer.tsxReplaces inline resting image and queued attachment rendering with the new components. Updates imports and retains composer expansion, focus, and scrolling behavior for additional images. Priority: ⬇️ Low
Estimated code review effort: 3 (Moderate) | ~20 minutes
Change: Refactor
Suggested reviewers:
t3dotgg
Merge Risk: ⚪ Minimal · up to 7ccab
The extracted attachment previews preserve the checked image-opening and removal behavior. No merge-blocking issue was found.
Pre-merge checks: Passed 3 · Failed 1
Failed Failed checks: 1 warning
Check name Status Explanation Resolution Description check Warning The description explains the component split and provides detailed verification results, but it omits the required Problem and Scope and approval sections. It also does not include the required before… Add a Problem section with expected behavior and relevant context. Add the triaged issue or explicit maintainer approval, or explain why an exemption applies. Include before-and-after screenshots and state any verification that could not be… Passed Passed checks: 3 passed
Check name Status Explanation Title check Passed The title clearly describes the main refactor and uses an appropriate conventional commit format. Linked Issues check Passed Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check
Explanation
The description explains the component split and provides detailed verification results, but it omits the required Problem and Scope and approval sections. It also does not include the required before-and-after screenshots for this UI change.
Resolution
Add a Problem section with expected behavior and relevant context. Add the triaged issue or explicit maintainer approval, or explain why an exemption applies. Include before-and-after screenshots and state any verification that could not be completed.
✨ Finishing Touches
📝 Generate docstrings
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
- Commit to this branch
- Create a new PR
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Usage-based review receipt
- Mode: Continue automatically
- Reviewed files: 2
- Charged: $0.50
- View usage details
Note
This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.
Comment @coderabbitai help to get the list of available commands.