[AviPeltz]

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 feat(chat): composer shortcuts, Cmd+Enter steer, and image attachments in the transcript #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.

^{Written for commit 53da8ed. Summary will update on new commits.}

Summary by CodeRabbit

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: b601f605-926e-4b3f-916c-1e0f6f299d5a

📥 Commits

Reviewing files that changed from the base of the PR and between 5e9178e and 53da8ed.

📒 Files selected for processing (2)

• packages/chat-ui/src/components/PromptInput/components/ComposerBody/ComposerBody.tsx
• packages/chat-ui/src/components/PromptInput/components/ContextButton/ContextButton.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

ComposerBody now applies shared styling classes to dictation, stop-response, and send controls. ContextButton is now smaller and circular, with a reduced plus icon.

Changes

Prompt input button styling

Layer / File(s)	Summary
Apply prompt input button styles packages/chat-ui/src/components/PromptInput/components/ComposerBody/ComposerBody.tsx, packages/chat-ui/src/components/PromptInput/components/ContextButton/ContextButton.tsx	ComposerBody defines shared sizing and appearance classes and applies them to dictation, stop-response, and send buttons. ContextButton changes to a 26px circular shape, and its plus icon shrinks.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: saddlepaddle

Merge Risk: ⚪ Minimal · up to 53da8

The footer controls’ sizing and shape are aligned, with no identified behavior change that blocks merging.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title uses conventional commit format and clearly identifies the main change: matching the composer’s plus button to the 26px footer row.
Description check	✅ Passed	The description explains the change and its context, and provides detailed manual QA and test results. It omits the template’s explicit Checklist section, but the reported checks make the description …
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.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cubic-dev-ai]

No issues found across 2 files

_{You’re at about 91% of the monthly reviewed-line limit. You may want to disable incremental reviews to conserve quota. Reviews will continue until that limit is exceeded. If you need help avoiding interruptions, please contact contact@cubic.dev.}

Architecture diagram

sequenceDiagram
    participant Client as Client Browser
    participant UI as Chat UI (chat-ui)
    participant Composer as ComposerBody Component
    participant Context as ContextButton Component
    participant Styler as Style Constants (Tailwind CSS)

    Note over Client,Styler: Chat Composer Footer Rendering (Runtime)
    Client->>UI: Render chat interface
    UI->>Composer: Mount ComposerBody
    Composer->>Styler: Access shared footer button style constants
    
    Note over Composer,Styler: Footer Controls Rendering
    Composer->>Context: Render plus button (NEW: 26px circle)
    Context->>Styler: Apply consistent size/radius classes
    Styler-->>Context: Styled button (26px rounded-full)
    
    Note over Composer,Styler: Dictation Controls (CHANGED: shared constants)
    Composer->>Styler: Apply FILLED_FOOTER_BUTTON_CLASS (retry, stop)
    Composer->>Styler: Apply GHOST_FOOTER_BUTTON_CLASS (discard, mic)
    
    Note over Composer,Styler: Send Button States (CHANGED: unified inactive)
    alt canSend = true
        Composer->>Styler: Apply filled primary style (26px rounded-full)
    else canSend = false
        Composer->>Styler: Apply INACTIVE_SEND_BUTTON_CLASS (secondary)
    end
    
    Styler-->>Composer: Consistent 26px circular buttons
    Composer-->>UI: Rendered footer row (all controls aligned)
    UI-->>Client: Display composer with uniform footer
    
    Note over Composer: User Interaction
    Client->>Composer: Click footer button
    alt Plus button
        Composer->>Context: Trigger onClick (open context menu)
    else Send button
        Composer->>Composer: submit() if canSend
    else Mic button
        Composer->>Composer: Toggle dictation session
    end

Loading

_{Turn on auto-fix | Re-trigger cubic}

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ✅ Neon database branch

Thank you for your contribution! 🎉

[greptile-apps]

Confidence Score: 5/5

[Low risk] Adjusts button sizing and styling in the chat composer.

The PR appears safe to merge.

What we checked:

• Send keeps its active color: The active branch combines the base styles with primary colors. It does not include the secondary colors used by the other buttons.

Summary

The composer’s plus button now matches the 26px footer controls. Footer icon buttons become circular, and ComposerBody shares their styles through four constants.

• Click handlers and disabled conditions stay unchanged.
• No actionable issues found.
• Visual capture was blocked because the local storybook executable was unavailable.
• AviPeltz explicitly left the heavier glyphs and darker inactive-send fill unchanged. Neither is introduced by this PR.

_{Reviews (1) · Last reviewed commit: "fix(chat): match the composer's plus but..."}