Skip to content

feat(composer): add resizable input height#16707

Merged
0xfullex merged 10 commits into
mainfrom
zhangjiadi225/chat-input-style
Jul 6, 2026
Merged

feat(composer): add resizable input height#16707
0xfullex merged 10 commits into
mainfrom
zhangjiadi225/chat-input-style

Conversation

@zhangjiadi225

Copy link
Copy Markdown
Collaborator

🚨 Branch strategy — read before opening this PR

The v2 refactor has merged into main, so main is the default branch for active development (v1 and v2 code currently coexist there — expect large, breaking changes).

  • Active development (features, refactors, optimizations, fixes for the current codebase) → target main (the default base).
  • v1 maintenance (hotfixes and subsequent v1 releases) → branch from and target v1, not main.

A v1 fix does not auto-carry to main: if the same bug exists on main, open a separate forward-port PR targeting main. Before touching subsystems being replaced, read docs/references/data/ and watch for @deprecated markers — they flag code being deleted.

What this PR does

Before this PR:

The shared chat/agent composer input could be expanded with the corner button, but users could not manually adjust the input height.

After this PR:

The shared composer input supports temporary drag resizing from a top separator, keyboard resizing through the separator, and a unified corner control that restores the default height from either expanded or manually resized states.

Fixes # N/A

Why we need it and why it was done in this way

The following tradeoffs were made:

The manual height is intentionally renderer-local state only, so resizing does not persist across app restarts. The resize state machine is kept in useComposerEditorFrameSizing to keep ComposerSurface focused on rendering and composer behavior.

The following alternatives were considered:

Persisting the height in renderer cache was considered first, but the product direction changed to temporary frontend state. Adding a generic resizing panel dependency was also avoided because this is a narrow vertical resize interaction.

Links to places where the discussion took place: N/A

Breaking changes

If this PR introduces breaking changes, please describe the changes and the impact on users.

None.

Special notes for your reviewer

Validation performed:

  • pnpm lint passed with existing repository warnings only.
  • pnpm exec vitest run --project renderer src/renderer/components/composer/__tests__/ComposerSurface.test.tsx src/renderer/hooks/__tests__/useResizeDrag.test.tsx passed: 2 files, 73 tests.

Not run per project/user override: pnpm build:check, full pnpm test.

Checklist

This checklist is not enforcing, but it's a reminder of items that could be relevant to every PR.
Approvers are expected to review this list.

  • Branch: This PR targets the correct branch — main for active development, v1 for v1 maintenance fixes
  • PR: The PR description is expressive enough and will help future contributors
  • Code: Write code that humans can understand and Keep it simple
  • Refactor: You have left the code cleaner than you found it (Boy Scout Rule)
  • Upgrade: Impact of this change on upgrade flows was considered and addressed if required
  • Documentation: A user-guide update was considered and is present (link) or not required. Check this only when the PR introduces or changes a user-facing feature or behavior.
  • Self-review: I have reviewed my own code (e.g., via /gh-pr-review, gh pr diff, or GitHub UI) before requesting review from others

Release note

Added draggable height resizing for the chat and agent composer input, with the corner control restoring the default height from custom or expanded states.

Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>
@zhangjiadi225 zhangjiadi225 requested a review from a team July 3, 2026 07:22
@zhangjiadi225 zhangjiadi225 marked this pull request as draft July 3, 2026 07:25
Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>
Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>
…put-style

Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>

# Conflicts:
#	src/renderer/components/composer/ComposerSurface.tsx
@zhangjiadi225 zhangjiadi225 marked this pull request as ready for review July 3, 2026 08:44
@zhangjiadi225 zhangjiadi225 requested review from AtomsH4 and eeee0717 July 3, 2026 08:44

@eeee0717 eeee0717 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed head 4d09d47.

No substantive issues found. The resizable composer height logic is separated into a focused sizing hook, the shared resize-drag hook preserves cleanup/cancellation behavior, and the PR adds targeted pointer, keyboard, clamp, restore, and accessibility coverage. GitHub CI relevant checks are passing; general-test is skipped. Residual risk is live Electron/UI feel across layouts, which CI does not fully validate.

@AtomsH4 AtomsH4 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This review was translated automatically.

Blocker

None.

Warning

  • src/renderer/components/composer/useComposerEditorFrameSizing.ts:198 - toggleExpanded(false) doesn't handle existing manualHeight, collapse after external expand will bounce back to old manual height.
    Failure path: User first manually drags to create a custom height, then composerQuote.ts:34 can force expand via actionsRef.current.toggleExpanded(true); subsequently pressing Escape in the editor will call toggleEditorExpanded(false) via ComposerSurface.tsx:1190. The effect first animates to the default collapsed height, but after animatedHeight is cleared, resolvedFrameHeight at useComposerEditorFrameSizing.ts:275 falls back to the still-uncleared manualHeight, causing the UI to jump from collapsed height back to the old custom height, and the button remains in restore state.
    Minimal fix: Clarify the semantics of collapse. If toggleExpanded(false) should restore to default collapsed height, then clear manualHeight in that path; if it should return to manual height, then don't set the animation target to collapsed content height, and add a test for "manual resize → external toggleExpanded(true) → Escape/toggle false".

Notice

None.

Focused Tests

  • Sub-agent ran: pnpm exec vitest run --project renderer src/renderer/components/composer/__tests__/ComposerSurface.test.tsx src/renderer/hooks/__tests__/useResizeDrag.test.tsx, 2 files / 82 tests passed; output includes existing React act(...) warnings.

Original Content

Blocker

无。

Warning

  • src/renderer/components/composer/useComposerEditorFrameSizing.ts:198 - toggleExpanded(false) 没有处理已存在的 manualHeight,外部展开后的 collapse 会回弹到旧手动高度。
    Failure path: 用户先手动拖拽出 custom height 后,composerQuote.ts:34 可以通过 actionsRef.current.toggleExpanded(true) 强制展开;随后编辑器内按 Escape 会走 ComposerSurface.tsx:1190 调用 toggleEditorExpanded(false)。effect 会先动画到默认折叠高度,但 animatedHeight 清空后 resolvedFrameHeightuseComposerEditorFrameSizing.ts:275 又回落到仍未清除的 manualHeight,UI 从折叠高度跳回旧 custom height,按钮也继续处于 restore 状态。
    Minimal fix: 明确 collapse 语义。若 toggleExpanded(false) 应恢复默认折叠高度,则在该路径清除 manualHeight;若应回到手动高度,则不要把动画目标设为 collapsed content height,并补一个 "manual resize → external toggleExpanded(true) → Escape/toggle false" 测试。

Notice

无。

Focused Tests

  • 子 agent ran: pnpm exec vitest run --project renderer src/renderer/components/composer/__tests__/ComposerSurface.test.tsx src/renderer/hooks/__tests__/useResizeDrag.test.tsx,2 files / 82 tests passed;输出包含现有 React act(...) warning。

Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>
@zhangjiadi225

Copy link
Copy Markdown
Collaborator Author

Addressed in 69653bae00.

  • toggleExpanded(false) now clears the existing manual composer height, so the manual resize -> external toggleExpanded(true) -> Escape path collapses back to the default height instead of bouncing to the old manual height.
  • Added a regression test for that exact path.

Verified:

  • pnpm exec vitest run --project renderer src/renderer/components/composer/__tests__/ComposerSurface.test.tsx src/renderer/hooks/__tests__/useResizeDrag.test.tsx (83 tests passed)
  • pnpm lint (passed; existing warnings only)
  • pnpm format

@zhangjiadi225 zhangjiadi225 requested a review from AtomsH4 July 3, 2026 11:39

@AtomsH4 AtomsH4 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@zhangjiadi225 zhangjiadi225 added the ready-to-merge This PR has sufficient reviewer approvals but is awaiting code owner approval. label Jul 6, 2026
@zhangjiadi225 zhangjiadi225 removed the ready-to-merge This PR has sufficient reviewer approvals but is awaiting code owner approval. label Jul 6, 2026
zhangjiadi225 and others added 2 commits July 6, 2026 13:33
The expand/restore button was permanently visible whenever the user
dragged the input to a custom height, which felt intrusive. The corner
arc decoration now stays visible at all times as a hover affordance, and
the action button only appears on hover/focus as intended.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>
… button

Button is no longer forced visible (opacity-100) when custom height is set;
corner arc is no longer hidden (opacity-0 scale-50) in the same state.
Update the test to assert the new hover-only behaviour for both elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: jd <59188306+zhangjiadi225@users.noreply.github.com>
@zhangjiadi225 zhangjiadi225 added the ready-to-merge This PR has sufficient reviewer approvals but is awaiting code owner approval. label Jul 6, 2026
@0xfullex 0xfullex merged commit 1f741fe into main Jul 6, 2026
7 checks passed
@0xfullex 0xfullex deleted the zhangjiadi225/chat-input-style branch July 6, 2026 08:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready-to-merge This PR has sufficient reviewer approvals but is awaiting code owner approval.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants