Add model selector to plan messages proceed button

This commit is contained in:
cto-new[bot]
2026-02-10 10:17:27 +00:00
parent 35b8084032
commit 7221361ae1
3 changed files with 221 additions and 2 deletions

View File

@@ -0,0 +1,57 @@
# Model Selector for Plan Messages - Implementation Complete
## What Was Implemented
When the "Proceed with Build" button appears in plan messages, a model selector dropdown is now displayed above it, allowing users to choose which AI model to use for the build process.
## Changes Made
### 1. New Function: `createInlineModelSelector()`
Location: chat/public/builder.js (line 1900-1975)
This helper function:
- Creates a container div with the class 'inline-model-selector'
- Adds a label "Select Model for Build:" above the dropdown
- Creates a styled select dropdown element
- Populates it with all available models from state.models
- Shows model labels, names, and multipliers (e.g., "2x")
- Pre-selects the currently chosen model
- Handles user selection changes and syncs with the main model selector
- Updates state.selectedModelId and calls markUserModelChange()
### 2. Modified "Proceed with Build" Button Section
Location: chat/public/builder.js (line 2174-2193)
The proceed button section now:
- Creates a container div (buildActionsContainer) using flexbox layout
- Adds the inline model selector above the button
- Adds the "Proceed with Build" button below the selector
- Appends the entire container to the message body
## Key Features
Model selector appears inline in plan messages
User can change model before proceeding with build
Selection syncs with main model selector in composer
State is properly managed and protected from server overwrites
Handles edge cases (no models available)
Matches existing UI styling and design system
JavaScript syntax validation passed
No breaking changes to existing functionality
## How It Works
1. User receives a plan message from AI
2. The renderMessages function detects it's a plan message ready for building
3. A buildActionsContainer is created with the inline model selector and proceed button
4. User can select a different model from the dropdown if desired
5. Selection changes update state and sync with main selector
6. When user clicks "Proceed with Build", the selected model is used for the build
## Technical Details
- Uses flexbox for layout (gap: 12px, margin-top: 16px)
- Select element styled with custom SVG dropdown arrow
- Full-width design for easy selection on all devices
- Integrates with existing state management functions
- No backend changes required