Synced from GitHub
refactor(web): the composer's layout and provider hooks live in their own files#23042
ChatComposer.tsx still holds six module-level hooks and components that don't share the composer's state. They sit in front of the composer body and push it more than a thousand lines down the file.
This PR moves them out unchanged:
useComposerRestingTransition.ts: the resting/collapsed height and content animation.ComposerCommandMenuLayer.tsx: the portal that positions the slash/mention menu.useRestingComposerControlsLayout.ts: measures which footer blocks fit.useProviderWorkspaceSnapshotRefresh.ts: rescans provider skills and commands for the cwd.useComposerProviderModel.ts: resolves the provider instance, model and options.useComposerImageGroups.ts: separates pending SnapShots from standalone images.
The code is the same apart from the export keywords and imports. Each hook is still called once from the composer body, so render boundaries are unchanged. Typing 20 chars still renders ChatComposer 20 times, with 0 TraitsPicker and 0 ComposerAttachButton renders.
| File | before | after |
|---|---|---|
| ChatComposer.tsx | 6,372 | 5,434 |
| useComposerRestingTransition.ts | 526 | |
| ComposerCommandMenuLayer.tsx | 94 | |
| useRestingComposerControlsLayout.ts | 84 | |
| useProviderWorkspaceSnapshotRefresh.ts | 137 | |
| useComposerProviderModel.ts | 100 | |
| useComposerImageGroups.ts | 40 |
Tested:
- apps/web typecheck and lint on the touched files.
- React Compiler: 0 bailouts on all seven files.
- Hands-on in a dev build: typing, the slash menu position, and the resting composer.
🤖 Generated with Claude Code
Checks
- SuccessfulCodeRabbitGitHub
Review completed
- Successful
Skipped - Not affected
- Skipped
- Skipped
- Skipped
- SuccessfulRemove preview downloadGitHub
- Successful
- Successful
- Skipped
- SuccessfulLabel PR sizeGitHub
- SuccessfulLabel PR 23042GitHub
- Successful
- Successful
- SuccessfulPrepare PR size configGitHub
- SuccessfulCollect PR targetsGitHub
- SuccessfulCheckGitHub
- SkippedRelease SmokeGitHub
- Skipped
- SkippedRustGitHub
- SuccessfulBuild and TypecheckGitHub
- SuccessfulTest WebGitHub
- SuccessfulTestGitHub
- Skipped
- SuccessfulLabel PR sizeGitHub
- SuccessfulLabel PR 23042GitHub
- SuccessfulTest Server 7GitHub
- SuccessfulTest Server 4GitHub
- SuccessfulTest Server 5GitHub
- SuccessfulTest Server 2GitHub
- SuccessfulTest Server 3GitHub
- SuccessfulTest Server 8GitHub
- SuccessfulChangesGitHub
- SuccessfulTest Server 1GitHub
- SuccessfulTest Server 6GitHub
- SuccessfulCollect PR targetsGitHub
- SuccessfulLintGitHub
- SkippedEAS PreviewGitHub
- SuccessfulPrepare PR size configGitHub
- SuccessfulNative fingerprint diffGitHub
Added 1 commit
- refactor(web): the composer's layout and provider hooks live in their own files1807a1e
Synced from GitHub
Approvability
Verdict: Approved at 1807a1e
Macroscope's review found this PR approvable — This PR separates existing composer layout, provider, workspace-refresh, image-grouping, and command-menu logic into dedicated files without changing their behavior or adding new capability. The large diff is primarily relocation and import rewiring, with no product-default or static-analysis configuration 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:
2a91ccf8-9a68-4102-9934-b73c38073e66
📥 Commits
Reviewing files that changed from the base of the PR and between ec8a0878b4c9eb31ff47432a143893d0fedba6d9 and 1807a1e9c9d9c7e2dd80b05c6c43041dc5172a8e.
📒 Files selected for processing: 7
apps/web/src/components/chat/ChatComposer.tsxapps/web/src/components/chat/ComposerCommandMenuLayer.tsxapps/web/src/components/chat/useComposerImageGroups.tsapps/web/src/components/chat/useComposerProviderModel.tsapps/web/src/components/chat/useComposerRestingTransition.tsapps/web/src/components/chat/useProviderWorkspaceSnapshotRefresh.tsapps/web/src/components/chat/useRestingComposerControlsLayout.ts
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.
📝 Walkthrough
Composer transition, layout, command-menu, provider, workspace-refresh, and image-group logic now resides in separate modules.
ChatComposerimports these implementations instead of defining them locally.Changes: Composer modules
Layer / File(s) Summary Composer layout and transitions
apps/web/src/components/chat/useRestingComposerControlsLayout.ts,apps/web/src/components/chat/useComposerRestingTransition.tsThe controls hook measures responsive layout. The transition hook animates composer geometry and content, updates overlay height, and cleans up animation state. Provider and workspace state
apps/web/src/components/chat/useComposerProviderModel.ts,apps/web/src/components/chat/useProviderWorkspaceSnapshotRefresh.tsThe provider hook derives selected provider and model state. The workspace hook refreshes snapshots and applies TTL and retry-cooldown checks. Composer image grouping
apps/web/src/components/chat/useComposerImageGroups.tsThe image hook tracks pending SnapShot animations and groups pending, uncommitted, and standalone images. Command-menu positioning
apps/web/src/components/chat/ComposerCommandMenuLayer.tsxThe portal layer positions the command menu using composer geometry and tracks layout changes. ChatComposer integration
apps/web/src/components/chat/ChatComposer.tsxChatComposerimports the extracted modules and removes the corresponding local implementations and unused imports.Priority: ⬇️ Low
Estimated code review effort: 4 (Complex) | ~45 minutes
Change: Refactor
Merge Risk: ⚪ Minimal · up to 1807a
This is a behavior-preserving file split of the chat composer. No defects were found, and no user-facing change is expected beyond the stated render-boundary preservation.
Pre-merge checks: Passed 3 · Failed 1
Failed Failed checks: 1 warning
Check name Status Explanation Resolution Description check Warning The description explains the problem, extracted files, intended render-boundary preservation, and verification performed. It does not include the required Scope and approval section. It also lacks the… Add the triaged issue or explicit maintainer approval, or explain why this focused refactor qualifies for an exemption. Add clear before/after screenshots and a short recording that demonstrates the resting transition and slash-menu positio… Passed Passed checks: 3 passed
Check name Status Explanation Title check Passed The title clearly describes the main change: moving the composer's layout and provider hooks into separate files. 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 problem, extracted files, intended render-boundary preservation, and verification performed. It does not include the required Scope and approval section. It also lacks the required before/after screenshots and short recording for the UI motion and interaction changes.
Resolution
Add the triaged issue or explicit maintainer approval, or explain why this focused refactor qualifies for an exemption. Add clear before/after screenshots and a short recording that demonstrates the resting transition and slash-menu positioning. State any verification that was not 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
Comment @coderabbitai help to get the list of available commands.