Clean-up chat input buttons (#2016)
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Unified secondary chat input actions into a single “+” dropdown to
declutter the UI and make codebase context, file attachments, and token
usage easier to access.
- **Refactors**
- Added AuxiliaryActionsMenu with “Codebase context”, “Attach files”,
and “Show/Hide token usage”.
- Moved token usage toggle into the menu; removed the inline toggle
button from ChatInput.
- Updated FileAttachmentDropdown to render as menu items and support
both chat-context and upload-to-codebase flows.
- Converted ContextFilesPicker to a modal dialog and moved its trigger
into the menu; removed the standalone context button from
ChatInputControls.
<sup>Written for commit 5cdb2737170edfc9aef97a52d3397295552ad2ab.
Summary will update on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
This PR consolidates secondary chat input actions into a unified "+"
dropdown menu, improving UI organization and discoverability. The
refactoring moves codebase context, file attachments, and token usage
toggle from separate buttons into a single menu with proper nesting
(file attachments as a submenu).
**Key changes:**
- Created `AuxiliaryActionsMenu` component that consolidates three
previously separate UI controls
- Refactored `FileAttachmentDropdown` to support dual rendering modes
(standalone or as menu items)
- Converted `ContextFilesPicker` trigger from button to menu item
- Updated `ChatInput` to use new menu and pass
`showContextFilesPicker={false}` to `ChatInputControls`
- Updated e2e tests and helpers to navigate the new nested menu
structure
**Code quality:**
- Clean component composition with proper prop drilling
- Maintained backward compatibility where needed (`renderAsMenuItems`
prop)
- E2E tests properly updated with menu navigation and cleanup
- Consistent styling and accessibility preserved
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk
- Well-structured UI refactoring with comprehensive test coverage
updates, no logic changes to core functionality, and proper component
reusability patterns
- No files require special attention
<h3>Important Files Changed</h3>
| Filename | Overview |
|----------|----------|
| src/components/chat/AuxiliaryActionsMenu.tsx | Introduced new
component to consolidate secondary actions (codebase context, file
attachments, token usage) into a single "+" dropdown menu |
| src/components/chat/FileAttachmentDropdown.tsx | Refactored to support
rendering as both standalone dropdown and as menu items within parent
dropdown via `renderAsMenuItems` prop |
| src/components/ContextFilesPicker.tsx | Converted trigger from
standalone button with tooltip to menu item for integration into parent
dropdown menu |
| src/components/chat/ChatInput.tsx | Replaced individual action buttons
with `AuxiliaryActionsMenu` component, passing
`showContextFilesPicker={false}` to `ChatInputControls` |
</details>
<h3>Sequence Diagram</h3>
```mermaid
sequenceDiagram
participant User
participant AuxiliaryActionsMenu
participant DropdownMenu
participant ContextFilesPicker
participant FileAttachmentDropdown
participant ChatInput
User->>AuxiliaryActionsMenu: Click "+" button
AuxiliaryActionsMenu->>DropdownMenu: Open menu
alt Codebase Context
User->>ContextFilesPicker: Click "Codebase context"
ContextFilesPicker->>ContextFilesPicker: Open popover with context settings
User->>ContextFilesPicker: Configure paths/excludes
ContextFilesPicker->>ChatInput: Update context configuration
end
alt Attach Files
User->>DropdownMenu: Hover "Attach files"
DropdownMenu->>FileAttachmentDropdown: Show submenu
User->>FileAttachmentDropdown: Click attachment option
FileAttachmentDropdown->>FileAttachmentDropdown: Trigger hidden file input
User->>FileAttachmentDropdown: Select file(s)
FileAttachmentDropdown->>ChatInput: onFileSelect(files, type)
ChatInput->>ChatInput: Handle file attachment
end
alt Toggle Token Usage
User->>AuxiliaryActionsMenu: Click "Show/Hide token usage"
AuxiliaryActionsMenu->>ChatInput: toggleShowTokenBar()
ChatInput->>ChatInput: Update showTokenBar state
ChatInput->>ChatInput: Render/hide TokenBar
end
```
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Streamlines chat input by consolidating secondary actions into a
single menu and updating related components and tests.
>
> - Adds `AuxiliaryActionsMenu` with `Codebase context`, `Attach files`
submenu, and token usage toggle
> - Updates `ChatInput` to use the new menu; removes inline token
toggle; sets `ChatInputControls` `showContextFilesPicker=false`
> - Refactors `ContextFilesPicker` to a menu-item trigger
(`codebase-context-trigger`) within its `Popover`
> - Enhances `FileAttachmentDropdown` to optionally `renderAsMenuItems`,
retaining hidden inputs for `chat-context` and `upload-to-codebase`
> - Adjusts E2E tests and helpers to open the new menu, hover "Attach
files", use new triggers, and close via Escape; verifies
upload-to-codebase write
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
425a26e3f2a471f5b6850148eb8ddc3737db38b0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
正在显示
请
注册
或者
登录
后发表评论