Skip to content

💄 style(chat-input): rework Plus menu with toggle switches and grouped submenus#15433

Merged
rivertwilight merged 10 commits into
canaryfrom
style/plus-menu-polish
Jun 4, 2026
Merged

💄 style(chat-input): rework Plus menu with toggle switches and grouped submenus#15433
rivertwilight merged 10 commits into
canaryfrom
style/plus-menu-polish

Conversation

@rivertwilight

Copy link
Copy Markdown
Collaborator

💻 Change Type

  • 💄 style
  • ♻️ refactor

🔀 Description of Change

Polishes the chat input + (Add) dropdown menu.

Interaction

  • ActionDropdown now supports Base UI type: 'switch' / type: 'checkbox' menu items — the items type was widened to BaseMenuItemType and decorateMenuItems passes those self-contained items through untouched.
  • Memory, Web Search (binary case), and Formatting Tool render as trailing-switch items — toggled by clicking the switch or the whole row, and the menu stays open. Their leading icons are now static (no color/glyph swap on toggle).

Structure

  • Upload File or Image is merged into a renamed Attachments submenu (upload first, then libraries/files). When the knowledge base is disabled, Upload stays a top-level entry so it never disappears.
  • Add Skills… is merged into the Skills submenu.
  • New order: Attachments · Memory · Web Search · ─── · Skills · ─── · Formatting Tool · Advanced parameters.

Styling

  • The skill search bar is borderless (removed the filled container), and the submenu header/footer slot padding is cancelled so the field sits near the menu edge on every side.
  • The Skill and Attachments submenus are matched to the same width (320px).

🧪 How to Test

  • Tested locally
  1. Open the chat input menu.
  2. Toggle Memory / Web Search / Formatting Tool via the switch and via the row — both should flip state and keep the menu open.
  3. Hover Attachments → upload a file and toggle libraries/files; hover Skills → search, pin/auto, "Add Skills…".
  4. Confirm the two submenus share the same width and the search field padding is tight.

bun run type-check and ESLint on the touched files pass.

📸 Screenshots / Videos

Before After
to add to add

📝 Additional Information

Adds two i18n keys — chat:plus.addAttachments ("Attachments") and editor:actions.typobar.title ("Formatting Tool"). Only default, en-US, and zh-CN are populated; run pnpm i18n to fill the remaining locales.

…d submenus

- Render Memory, Web Search and Formatting Tool as trailing-switch menu items (toggle via the switch or the whole row); ActionDropdown now supports `type: 'switch'` items
- Merge file upload into a renamed "Attachments" submenu, and "Add Skills..." into the Skills submenu
- Reorder entries (Attachments, Memory, Web Search, Skills, Formatting Tool, Advanced params) with section dividers
- Make the skill search bar borderless and cancel the slot padding so it sits near the menu edge
- Match the skill and Attachments submenu widths

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
lobehub Ready Ready Preview, Comment Jun 4, 2026 11:46am

Request Review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Sorry @rivertwilight, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

@dosubot dosubot Bot added size:L This PR changes 100-499 lines, ignoring generated files. i18n labels Jun 3, 2026
… submenu

Long library/file names made each row's natural width exceed the footer-driven 320px, growing the Attachments submenu past the skill submenu. Tighten the label max-width so rows stay within 320px and the footer floor keeps both submenus level.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@codecov

codecov Bot commented Jun 3, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 4.58716% with 104 lines in your changes missing coverage. Please review.
✅ Project coverage is 65.95%. Comparing base (70f81ad) to head (73c8ef8).
⚠️ Report is 795 commits behind head on canary.

Additional details and impacted files
@@            Coverage Diff             @@
##           canary   #15433      +/-   ##
==========================================
- Coverage   68.96%   65.95%   -3.02%     
==========================================
  Files        2403     2752     +349     
  Lines      209462   257768   +48306     
  Branches    25460    26681    +1221     
==========================================
+ Hits       144463   170014   +25551     
- Misses      64856    87636   +22780     
+ Partials      143      118      -25     
Flag Coverage Δ
app 61.84% <4.58%> (-0.66%) ⬇️
database 92.49% <ø> (+0.18%) ⬆️
packages/agent-runtime ?
packages/context-engine ?
packages/conversation-flow ?
packages/file-loaders 87.89% <ø> (+0.29%) ⬆️
packages/memory-user-memory ?
packages/model-bank ?
packages/model-runtime 84.72% <ø> (+0.92%) ⬆️
packages/prompts 72.49% <ø> (+3.48%) ⬆️
packages/python-interpreter ?
packages/ssrf-safe-fetch ?
packages/utils ?
packages/web-crawler 88.08% <ø> (-0.34%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Components Coverage Δ
Store 68.43% <ø> (+1.69%) ⬆️
Services 54.58% <ø> (+0.87%) ⬆️
Server 72.32% <ø> (+3.02%) ⬆️
Libs 57.01% <ø> (+3.73%) ⬆️
Utils 81.44% <ø> (+1.49%) ⬆️
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

- Attachments: align the View-more row with the menu items and span it full width; drop the Libraries/Files group headers for a flat list
- Skills: replace the pinned/auto activation groups with a flat list (pinned first, each carrying a trailing Pin icon) plus a dedicated Auto-mode switch entry
- Move "Add Skills" into a footer icon button beside Skill Management
- Reveal each skill row's 3-dot menu only on hover

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…de-from-auto)

- Drop the pin mechanism (pin indicator + pinned/auto policy options)
- Manual mode: each skill row shows a trailing switch toggling whether the skill is used
- Auto mode: hide the switch; the hover 3-dot offers Exclude-from-Auto / Include-in-Auto + Configure (no uninstall — that lives in the management screen)
- Use the base-ui Switch so per-skill switches match the Auto-entry switch size
- Fix the gap between the Add Skills and Skill Management footer icons

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@dosubot dosubot Bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Jun 3, 2026
… list

- Each skill row uses a trailing switch (same base-ui Switch size as the Auto entry); off excludes the skill, shown with an "Excluded" tag in auto mode
- Keep the skill list stable across auto/manual (stop surfacing hidden builtin tools in manual, which made the list denser)
- 3-dot is now Configure-only (hover), shown only for configurable skills

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Auto ON: each skill row shows a hover-only 3-dot menu with an "Exclude from Auto" switch item (+ Configure when available)
- Auto OFF: each skill row keeps its trailing enable switch
- Both use the base-ui Switch for consistent sizing

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Move the Auto skill-activation toggle into the pinned header next to the search bar, so it stays sticky while the skill list scrolls (instead of being the first scrollable row).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@dosubot dosubot Bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Jun 4, 2026
@rivertwilight rivertwilight merged commit 537c39f into canary Jun 4, 2026
33 of 35 checks passed
@rivertwilight rivertwilight deleted the style/plus-menu-polish branch June 4, 2026 13:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

i18n size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant