Skip to content

Refactor the design of bottombox of Chatbox UI#1749

Open
Douglasymlai wants to merge 2 commits into
mainfrom
refactor-bottombox
Open

Refactor the design of bottombox of Chatbox UI#1749
Douglasymlai wants to merge 2 commits into
mainfrom
refactor-bottombox

Conversation

@Douglasymlai

@Douglasymlai Douglasymlai commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Closes #1729

Related Issue

New Feature

Description

Refactors the ChatBox BottomBox composer into a clearer two-tier layout and adds new picker / project-setup controls.

Layout & structure

  • Introduces BoxBottom — a dedicated row under the input for project-setup controls (session mode, model, thinking effort), separate from the message composer in InputBox.
  • Moves session mode and model dropdown out of InputBox and into BoxBottom; both render read-only once a project has started, interactive on the workspace composer.
  • Removes BoxAction (task time, status, pause/resume) from the bottom bar.
  • Restructures floating overlays (queued messages, usage-limit banner, picker panels) so they sit above BoxMain without affecting layout.
  • Updates shell styling: rounded-3xl, revised background tokens, and a subtle backdrop on the chat overlay container.

New UI

  • PickerPanel — floating connector and skill pickers triggered from the input action row; toggling inserts/removes #skill / @connector tokens inline.
  • ThinkingEffortSelect — pill-style reasoning-effort control matching the model dropdown and mode toggle (UI only for now; fixed to Medium, not yet persisted per project — tracked in [Feature Request] Add model thinking effort controls #1717).
  • ProjectModeToggle — read-only variant for in-project chat (transparent background, no chevrons).

Input & rich text

  • Replaces the generic “+” menu with dedicated connector (hammer) and skill (wand) trigger buttons.
  • Extends rich-text parsing/rendering to support @connector tokens alongside existing #skill tokens.
  • Extracts shared integration logos into src/lib/connectorIcons.ts (reused by the picker and Connectors settings page).

Other

  • Tweaks ChatInputModelDropdown trigger styling (removes Sparkles icon, grows to menu width while open).
  • Adds i18n strings for thinking-effort labels and add-connector/skill actions across all locales.

Testing Evidence (REQUIRED)

Screenshot 2026-07-12 at 23 35 58
  • I have included human-verified testing evidence in this PR.
  • This PR includes frontend/UI changes, and I attached screenshot(s) or screen recording(s).
  • No frontend/UI changes in this PR.

Manual verification:

  • Workspace empty state — BottomBox shows interactive mode toggle, model dropdown, and thinking-effort control on the bottom row.
  • Active project chat — bottom row renders read-only; input action row shows connector/skill triggers and send button.
  • Connector picker — opens above input, toggles @connector tokens, closes on outside click.
  • Skill picker — opens above input, toggles #skill tokens, closes on outside click.
  • Long model names — bottom row wraps instead of clipping (regression for [BUG] Chat input bottom row overflows / clips instead of folding when content doesn't fit #1729).
  • Queued messages and usage-limit banner still float above the composer without shifting layout.
  • Confirm/save states — header variants and background colors render correctly.

Note: Attach screenshots or a screen recording showing the workspace composer, in-project read-only bottom row, and connector/skill picker panels before requesting review.

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Contribution Guidelines Acknowledgement

@Douglasymlai Douglasymlai marked this pull request as ready for review July 10, 2026 13:26

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Claude Code Review

Claude Code Review is paused for this repository. To reconnect it, an admin of this repository's GitHub organization (or the account owner, for personal repositories) who can also manage your Claude organization's Code Review settings needs to re-link GitHub in Code Review settings. This is a one-time step.

Tip: disable this comment in your organization's Code Review settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Chat input bottom row overflows / clips instead of folding when content doesn't fit

1 participant