shopify-ai-backup/BUILDER_MODEL_SELECTOR_FIXES.md

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

• Custom dropdown opens/closes properly
• Model icons display next to model names
• "Auto (admin managed)" is selected by default for free plans
• Blurred preview only shows on click, not by default
• Full-screen overlay removed
• Click outside closes dropdown
• Selected model persists across page refreshes
• 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)