fix(chat): match the composer's plus button to its 26px footer row

Merged
AV
1mo ago
+34-14

Summary

  • The plus button at the start of the chat composer's footer was a 32px square. Everything else in that row is 26px: the model and mode pills, and send, stop and mic. The plus button now matches at 26px.
  • Every footer icon button is now a circle, the same shape as the New Workspace submit. That covers plus, send, stop, mic, dictation retry and discard.
  • The six inline class strings in ComposerBody now share four constants: base, ghost, filled and inactive send.

Verification page with before/after captures and measurements: https://app.superset.sh/page/acp-chat-composer-footer-controls-on-one-height-0hmx0u

Why / Context

#8181 and #8199 brought send, stop and mic down to the pills' 26px. The plus button in ContextButton was left at 32px, so its hover box stood 6px taller than the rest of the row. Sizes and icon sizes follow main; only the plus button's size and the corner radius change.

Manual QA

Done in the dev desktop app over CDP, in the ACP chat pane opened from the sidebar:

  • Measured on main: plus is 32px tall, both pills and send are 26px.
  • Measured with this branch: all four are 26px with the same top. The boxes, icons and labels all centre on the same line.
  • Typed text into the composer: send keeps its primary fill as a circle.
  • Dictation and streaming states. They use the same class constants but were not driven live.

Testing

  • tsc --noEmit in packages/chat-ui: passes.
  • bun test --isolate in packages/chat-ui on Bun 1.4.2: 4 pass. On Bun 1.3.14 the historyNavigation test from #8181 fails at import time, with or without this change.
  • biome check on the changed files: clean.

Known Limitations

  • The 16px send and plus glyphs are heavier than the 12px pill chevrons.
  • The inactive send uses the secondary fill, which is a shade darker than the pills' 7% foreground tint. Both are left as they are on main.

Summary by cubic

Matches the chat composer's plus button to the 26px height of the rest of the footer row and makes every footer icon button a circle, fixing the 6px hover-box mismatch left from #8181 and #8199. The six inline class strings in ComposerBody now share four constants: base, ghost, filled, and inactive send.

Summary by CodeRabbit

  • Style
    • Standardized the sizing and appearance of prompt composer controls.
    • Reduced the context button and its plus icon.