Skip to content

Add an expand / collapse (maximize) toggle to the chat composer#49

Open
DragonnZhang wants to merge 2 commits into
mainfrom
loop/composer-expand
Open

Add an expand / collapse (maximize) toggle to the chat composer#49
DragonnZhang wants to merge 2 commits into
mainfrom
loop/composer-expand

Conversation

@DragonnZhang

Copy link
Copy Markdown
Collaborator

Closes #48

What & why

OpenWork's chat composer (FreeFormInput) auto-grows as you type, but only up to
a fixed capmin(66% of window height, 540px). There was no way to
deliberately give the input a large editing area, so drafting or editing a long
prompt meant writing and scrolling inside a small box even with a tall window.

Comparable desktop chat surfaces (Claude's desktop app, ChatGPT desktop, Codex
desktop) all offer a maximize / expand affordance on the composer. OpenWork's
toolbar already has a model picker, a thinking-level picker, a context-usage
indicator and an attach control, but no expand toggle — this adds one.

This adds a small expand / collapse toggle to the composer's right-side
controls, next to the thinking-level and model pickers and following the same
!compactMode rule:

  • A Maximize2 icon when collapsed / Minimize2 when expanded, with a tooltip
    ("Expand composer" / "Collapse composer") and aria-pressed reflecting state.
  • Clicking it maximizes the input to max(78% of window height, 560px) — applied
    as both minHeight and maxHeight on the editable area so the box is genuinely
    large even when empty — recomputed on window resize alongside the existing cap.
  • Clicking again collapses back to the normal auto-grow cap.
  • The maximized state resets on session switch, so a new conversation starts
    compact.

Frontend-only. It only toggles renderer layout state (isComposerExpanded)
and the inline height style already applied to RichTextInput. No backend /
qwen-code change. Two new i18n keys (chat.expandComposer, chat.collapseComposer)
added to all locales for the tooltip.

Changes

  • components/app-shell/input/FreeFormInput.tsxisComposerExpanded state,
    expandedMaxHeight computed in the existing resize effect, a reset-on-session
    effect, the toolbar toggle button, and the conditional input height.
  • packages/shared/src/i18n/locales/*.jsonchat.expandComposer /
    chat.collapseComposer in all 7 locales, inserted in sorted position.
  • e2e/assertions/composer-expand.assert.ts — new CDP assertion (below).

Verification (DoD)

  • bun run typecheck:all — introduces no new errors. Delta vs main is
    zero: the only errors are the 11 pre-existing ones in apps/electron
    (auto-update.ts owner/repo, a settings-default-thinking test tuple, two
    test files importing vitest) — none in the files this PR touches.
  • bun test — the set of failing tests is byte-for-byte identical to
    main (verified by diffing the sorted, timing-stripped failure lists from a
    clean-main run and this branch: 56 pre-existing failures, e.g. BrowserCDP,
    BrowserPaneManager, RPC registration profiles, RoutedClient,
    startWebuiHttpServer, resource-bundle, and the i18n sorted checks whose
    first out-of-order key is menu.homepage — far from the chat.* keys added
    here). This change adds zero new failures. (The raw N fail total is
    order-dependent/flaky when the whole suite runs unisolated, which is why the
    repo splits *.isolated.ts; the deterministic signal is the failing-test set,
    which is unchanged.)
  • bun run lint:i18n:parity — OK (6 locales, 1544 keys each). The two new
    keys are added to every locale in sorted position.
  • Renderer build (bun run electron:build:renderer, where this change lives)
    — ✅ builds cleanly.
  • CDP assertion transpiles (bun build e2e/assertions/composer-expand.assert.ts)
    — ✅.

CDP e2e assertion (composer-expand.assert.ts)

Drives the real built app over CDP entirely in the draft (no-session) state — no
seeded conversation needed:

  1. The composer renders the expand toggle, initially aria-pressed="false".
  2. Measures the input area's height (collapsed).
  3. Clicks the toggle → asserts the input height grows to >= 2× the collapsed
    height and the toggle flips to aria-pressed="true".
  4. Clicks again → asserts the input height collapses back to roughly its start
    height and the toggle returns to aria-pressed="false".

The height measurements prove the toggle actually resizes the composer, not
merely swaps an icon.

⚠️ Local CDP run was blocked by this sandbox's egress policy, not by the
feature. electron:build:main cannot resolve the libsignal GitHub dependency
(pulled in transitively by the WhatsApp/Baileys worker), and the Electron binary
download 403s from the egress proxy, so the app can't be built or launched here
(xvfb is present; only those network fetches fail). The assertion transpiles
and is included so CI / a reviewer can run bun run e2e in an environment with
normal network access. Everything that doesn't require launching Electron
(typecheck, unit tests, i18n parity, renderer build) passes with zero delta vs
main.

Part of the autonomous desktop-feature loop (loop-bot).


Generated by Claude Code

Add a toolbar toggle that maximizes the chat composer into a tall editing
area for composing/editing long prompts, then collapses it back. Mirrors the
existing model and thinking-level pickers (right-side controls, hidden in
compact mode).

- Toggle button (Maximize2/Minimize2) with aria-pressed and a tooltip.
- When expanded, the RichTextInput's inline height flips from the auto-grow
  cap (min(66vh, 540px)) to max(78vh, 560px), applied as both min/max height
  so the box is genuinely large even when empty. Recomputed on window resize.
- Resets to collapsed on session switch.
- New i18n keys chat.expandComposer / chat.collapseComposer in all locales.

Adds e2e/assertions/composer-expand.assert.ts, which drives the built app
over CDP in the draft state: measures the input height, clicks to maximize
(asserts the height grows >= 2x and aria-pressed flips true), then collapses
(asserts the height returns and aria-pressed flips false).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Expand / collapse (maximize) toggle for the chat composer

2 participants