88 lines
3.7 KiB
Markdown
88 lines
3.7 KiB
Markdown
# Builder Page Model Selector Fixes
|
|
|
|
## Overview
|
|
Fixed three issues with the model selector on the builder page:
|
|
1. Replaced browser dropdown with custom inline dropdown that supports icons
|
|
2. Ensured model icons from admin panel display properly next to model names
|
|
3. Combined two auto model popups into one, ensuring it doesn't open by default
|
|
|
|
## Changes Made
|
|
|
|
### 1. Custom Dropdown Implementation (builder.html)
|
|
|
|
#### HTML Changes
|
|
- Replaced native `<select>` element with custom dropdown structure:
|
|
- `model-select-btn`: Button showing current selection with icon
|
|
- `model-select-dropdown`: Dropdown container with options
|
|
- `model-select-options`: Container for option elements
|
|
- `model-select-text`: Span showing selected model name
|
|
- Hidden `<select>` element for backward compatibility
|
|
|
|
#### CSS Changes (builder.html)
|
|
Added styles for custom dropdown:
|
|
- `.model-select-btn`: Button styling with hover effects
|
|
- `.model-select-dropdown`: Dropdown positioning and appearance
|
|
- `.model-select-options`: Flex column layout for options
|
|
- `.model-option`: Individual option styling with icons
|
|
- `.model-option.selected`: Highlight for selected option
|
|
- `.model-option.disabled`: Disabled state styling
|
|
- `.model-option img`: Icon image styling
|
|
|
|
### 2. JavaScript Changes (builder.js)
|
|
|
|
#### New Functions
|
|
- `toggleCustomDropdown()`: Opens/closes the custom dropdown
|
|
- `closeCustomDropdown()`: Closes the dropdown and updates aria attributes
|
|
- `updateModelSelectDisplay(selectedValue)`: Updates button text and icon based on selection
|
|
- `renderCustomDropdownOptions()`: Renders all model options with icons from admin panel
|
|
- `selectModel(modelId)`: Handles model selection, updates UI, and closes dropdown
|
|
|
|
#### Modified Functions
|
|
- `applyPlanModelLock()`:
|
|
- For free plans: Sets "Auto (admin managed)" as default, shows blurred preview on click only
|
|
- For paid plans: Enables normal model selection with custom dropdown
|
|
- Calls `updateModelSelectDisplay()` to show current selection
|
|
|
|
- `loadModels()`:
|
|
- Populates hidden select with model values
|
|
- Calls `renderCustomDropdownOptions()` to build custom dropdown
|
|
- Calls `updateModelSelectDisplay()` to show current selection
|
|
|
|
- `renderSessionMeta()`:
|
|
- Calls `updateModelSelectDisplay()` when session model changes
|
|
|
|
- Removed `showBlurredModelPreview()` function (full-screen overlay)
|
|
- Kept `showBlurredModelPreviewInline()` function (inline dropdown only)
|
|
|
|
#### Event Handlers
|
|
- Click handler for `model-select-btn`: Toggles dropdown for paid plans, shows blurred preview for free plans
|
|
- Document click handler: Closes dropdown when clicking outside
|
|
- Change handler for hidden select: Updates display and syncs with server
|
|
|
|
### 3. Key Behaviors
|
|
|
|
#### Free Plan (Starter)
|
|
- Model selector shows "Auto (admin managed)" by default
|
|
- Clicking model selector shows blurred preview of available models (not by default)
|
|
- User cannot change selection (locked to auto)
|
|
|
|
#### Paid Plans (Business/Enterprise)
|
|
- Model selector shows dropdown with all available models
|
|
- Each option displays model icon (from admin panel) and label
|
|
- User can select any model from the list
|
|
- Selected model is highlighted with green background
|
|
|
|
## Testing Checklist
|
|
- [x] Custom dropdown opens/closes properly
|
|
- [x] Model icons display next to model names
|
|
- [x] "Auto (admin managed)" is selected by default for free plans
|
|
- [x] Blurred preview only shows on click, not by default
|
|
- [x] Full-screen overlay removed
|
|
- [x] Click outside closes dropdown
|
|
- [x] Selected model persists across page refreshes
|
|
- [x] Backward compatibility with hidden select element
|
|
|
|
## Files Modified
|
|
- `/home/engine/project/chat/public/builder.html` (HTML and CSS)
|
|
- `/home/engine/project/chat/public/builder.js` (JavaScript logic)
|