Replace default configuration dropdowns with a new selector component and implement a VS Code QuickPick handler

Author: robertpiosik

.github/workflows/deploy-vscode-extension.yml

@@ -52,15 +52,13 @@ jobs:
           pnpm build
 
       - name: Publish to VS Code Marketplace
-        continue-on-error: true
         run: |
           cd apps/editor
           npx @vscode/vsce publish --no-dependencies -p ${{ secrets.VSCE_PAT }}
         env:
           VSCE_PAT: ${{ secrets.VSCE_PAT }}
 
       - name: Publish to Open VSX Registry
-        continue-on-error: true
         run: |
           cd apps/editor
           npx ovsx publish --no-dependencies -p ${{ secrets.OVSX_PAT }}

apps/editor/src/views/settings/backend/message-handlers/handle-select-default-configuration.ts

@@ -0,0 +1,75 @@
+import * as vscode from 'vscode'
+import { SettingsProvider } from '@/views/settings/backend/settings-provider'
+import {
+  ModelProvidersManager,
+  get_tool_config_id
+} from '@/services/model-providers-manager'
+import { SelectDefaultConfigurationMessage } from '@/views/settings/types/messages'
+import { handle_set_default_configuration } from './handle-set-default-configuration'
+
+export const handle_select_default_configuration = async (
+  provider: SettingsProvider,
+  message: SelectDefaultConfigurationMessage
+): Promise<void> => {
+  const providers_manager = new ModelProvidersManager(provider.context)
+  const configs = await providers_manager.get_code_completions_tool_configs()
+
+  if (configs.length === 0) {
+    vscode.window.showInformationMessage(
+      'No configurations available. Please create one first.'
+    )
+    return
+  }
+
+  const items = configs.map((c) => {
+    const description_parts = [c.provider_name]
+    if (c.temperature != null) {
+      description_parts.push(`${c.temperature}`)
+    }
+    if (c.reasoning_effort) {
+      description_parts.push(`${c.reasoning_effort}`)
+    }
+
+    return {
+      label: c.model,
+      description: description_parts.join(' · '),
+      config_id: get_tool_config_id(c)
+    }
+  })
+
+  const quick_pick = vscode.window.createQuickPick<
+    vscode.QuickPickItem & { config_id: string }
+  >()
+
+  quick_pick.items = items
+  quick_pick.title = 'Configurations'
+  quick_pick.placeholder = 'Select default configuration'
+  quick_pick.matchOnDescription = true
+
+  const close_button: vscode.QuickInputButton = {
+    iconPath: new vscode.ThemeIcon('close'),
+    tooltip: 'Close'
+  }
+  quick_pick.buttons = [close_button]
+
+  quick_pick.onDidTriggerButton((button) => {
+    if (button === close_button) {
+      quick_pick.hide()
+    }
+  })
+
+  quick_pick.onDidAccept(async () => {
+    const selected = quick_pick.selectedItems[0]
+    if (selected) {
+      await handle_set_default_configuration(
+        provider,
+        selected.config_id,
+        message.tool_name
+      )
+    }
+    quick_pick.hide()
+  })
+
+  quick_pick.onDidHide(() => quick_pick.dispose())
+  quick_pick.show()
+}

apps/editor/src/views/settings/backend/message-handlers/index.ts

@@ -4,6 +4,7 @@ export * from './handle-upsert-model-provider'
 export * from './handle-delete-model-provider'
 export * from './handle-reorder-configuration'
 export * from './handle-set-default-configuration'
+export * from './handle-select-default-configuration'
 export * from './handle-get-edit-context-system-instructions'
 export * from './handle-update-edit-context-system-instructions'
 export * from './handle-get-edit-format-instructions'

apps/editor/src/views/settings/backend/settings-provider.ts

@@ -28,6 +28,7 @@ import {
   handle_reorder_configuration,
   handle_reorder_model_providers,
   handle_set_default_configuration,
+  handle_select_default_configuration,
   handle_update_check_new_files,
   handle_update_clear_checks_in_workspace_behavior,
   handle_update_are_automatic_checkpoints_disabled,
@@ -140,6 +141,8 @@ export class SettingsProvider {
             message.configuration_id,
             message.tool_name
           )
+        } else if (message.command == 'SELECT_DEFAULT_CONFIGURATION') {
+          await handle_select_default_configuration(this, message)
         } else if (message.command == 'GET_EDIT_CONTEXT_SYSTEM_INSTRUCTIONS') {
           await handle_get_edit_context_system_instructions(this)
         } else if (

apps/editor/src/views/settings/frontend/Home/Home.tsx

@@ -8,7 +8,7 @@ import { Group as UiGroup } from '@ui/components/editor/settings/Group/Group'
 import { Section as UiSection } from '@ui/components/editor/settings/Section'
 import { SortableList } from '@ui/components/editor/settings/SortableList'
 import { IconButton } from '@ui/components/editor/common/IconButton'
-import { Dropdown as UiDropdown } from '@ui/components/editor/common/Dropdown'
+import { DefaultConfigurationSelector } from '@ui/components/editor/settings/DefaultConfigurationSelector'
 import { Textarea as UiTextarea } from '@ui/components/editor/common/Textarea'
 import { Toggler as UiToggler } from '@ui/components/editor/common/Toggler'
 import { Button as UiButton } from '@ui/components/editor/common/Button'
@@ -159,6 +159,7 @@ type Props = {
     tool_name: ToolType,
     configuration_id: string | null
   ) => void
+  on_select_default_config: (tool_name: ToolType) => void
   on_open_external_url: (url: string) => void
   scroll_to_section_on_load?: NavItem
 }
@@ -298,14 +299,6 @@ export const Home: React.FC<Props> = (props) => {
     handle_scroll_to_section(item_id)
   }
 
-  const config_options = [
-    { value: '', label: t('action.none') },
-    ...props.configurations.map((c) => ({
-      value: c.id,
-      label: `${c.model} (${c.description})`
-    }))
-  ]
-
   return (
     <div style={{ height: '100vh' }}>
       <UiLayout
@@ -563,16 +556,20 @@ export const Home: React.FC<Props> = (props) => {
           <UiGroup>
             <UiItem
               title={t('action.default-configuration')}
-              slot_right={
-                <UiDropdown
-                  options={config_options}
-                  value={props.defaults['intelligent-update'] || ''}
-                  onChange={(val) =>
-                    props.on_set_default_config(
-                      'intelligent-update',
-                      val || null
-                    )
+              slot_below={
+                <DefaultConfigurationSelector
+                  value={props.defaults['intelligent-update'] || null}
+                  configurations={props.configurations}
+                  on_unset={() =>
+                    props.on_set_default_config('intelligent-update', null)
+                  }
+                  on_select={() =>
+                    props.on_select_default_config('intelligent-update')
                   }
+                  translations={{
+                    select_default: t('action.select-default-configuration'),
+                    unset: t('action.unset-default')
+                  }}
                 />
               }
             />
@@ -636,13 +633,20 @@ export const Home: React.FC<Props> = (props) => {
           <UiGroup>
             <UiItem
               title={t('action.default-configuration')}
-              slot_right={
-                <UiDropdown
-                  options={config_options}
-                  value={props.defaults['code-at-cursor'] || ''}
-                  onChange={(val) =>
-                    props.on_set_default_config('code-at-cursor', val || null)
+              slot_below={
+                <DefaultConfigurationSelector
+                  value={props.defaults['code-at-cursor'] || null}
+                  configurations={props.configurations}
+                  on_unset={() =>
+                    props.on_set_default_config('code-at-cursor', null)
+                  }
+                  on_select={() =>
+                    props.on_select_default_config('code-at-cursor')
                   }
+                  translations={{
+                    select_default: t('action.select-default-configuration'),
+                    unset: t('action.unset-default')
+                  }}
                 />
               }
             />
@@ -673,16 +677,20 @@ export const Home: React.FC<Props> = (props) => {
           <UiGroup>
             <UiItem
               title={t('action.default-configuration')}
-              slot_right={
-                <UiDropdown
-                  options={config_options}
-                  value={props.defaults['find-relevant-files'] || ''}
-                  onChange={(val) =>
-                    props.on_set_default_config(
-                      'find-relevant-files',
-                      val || null
-                    )
+              slot_below={
+                <DefaultConfigurationSelector
+                  value={props.defaults['find-relevant-files'] || null}
+                  configurations={props.configurations}
+                  on_unset={() =>
+                    props.on_set_default_config('find-relevant-files', null)
+                  }
+                  on_select={() =>
+                    props.on_select_default_config('find-relevant-files')
                   }
+                  translations={{
+                    select_default: t('action.select-default-configuration'),
+                    unset: t('action.unset-default')
+                  }}
                 />
               }
             />
@@ -700,13 +708,20 @@ export const Home: React.FC<Props> = (props) => {
           <UiGroup>
             <UiItem
               title={t('action.default-configuration')}
-              slot_right={
-                <UiDropdown
-                  options={config_options}
-                  value={props.defaults['commit-messages'] || ''}
-                  onChange={(val) =>
-                    props.on_set_default_config('commit-messages', val || null)
+              slot_below={
+                <DefaultConfigurationSelector
+                  value={props.defaults['commit-messages'] || null}
+                  configurations={props.configurations}
+                  on_unset={() =>
+                    props.on_set_default_config('commit-messages', null)
+                  }
+                  on_select={() =>
+                    props.on_select_default_config('commit-messages')
                   }
+                  translations={{
+                    select_default: t('action.select-default-configuration'),
+                    unset: t('action.unset-default')
+                  }}
                 />
               }
             />
@@ -775,13 +790,20 @@ export const Home: React.FC<Props> = (props) => {
           <UiGroup>
             <UiItem
               title={t('action.default-configuration')}
-              slot_right={
-                <UiDropdown
-                  options={config_options}
-                  value={props.defaults['voice-input'] || ''}
-                  onChange={(val) =>
-                    props.on_set_default_config('voice-input', val || null)
+              slot_below={
+                <DefaultConfigurationSelector
+                  value={props.defaults['voice-input'] || null}
+                  configurations={props.configurations}
+                  on_unset={() =>
+                    props.on_set_default_config('voice-input', null)
                   }
+                  on_select={() =>
+                    props.on_select_default_config('voice-input')
+                  }
+                  translations={{
+                    select_default: t('action.select-default-configuration'),
+                    unset: t('action.unset-default')
+                  }}
                 />
               }
             />

apps/editor/src/views/settings/frontend/Settings.tsx

@@ -155,6 +155,7 @@ export const Settings = () => {
       on_duplicate_config={settings_hook.handle_duplicate_config}
       on_delete_config={settings_hook.handle_delete_config}
       on_set_default_config={settings_hook.handle_set_default_config}
+      on_select_default_config={settings_hook.handle_select_default_config}
       on_open_external_url={settings_hook.handle_open_external_url}
       scroll_to_section_on_load={scroll_to_section_on_load}
     />

apps/editor/src/views/settings/frontend/hooks/use-settings.ts

@@ -232,6 +232,13 @@ export const use_settings = (vscode: any) => {
     } as FrontendMessage)
   }
 
+  const handle_select_default_config = (tool_name: ToolType) => {
+    post_message(vscode, {
+      command: 'SELECT_DEFAULT_CONFIGURATION',
+      tool_name
+    } as FrontendMessage)
+  }
+
   const handle_commit_instructions_change = (instructions: string) =>
     post_message(vscode, {
       command: 'UPDATE_COMMIT_MESSAGE_INSTRUCTIONS',
@@ -411,6 +418,7 @@ export const use_settings = (vscode: any) => {
     handle_duplicate_config,
     handle_delete_config,
     handle_set_default_config,
+    handle_select_default_config,
     handle_voice_input_instructions_change,
     handle_commit_instructions_change,
     handle_include_prompts_in_commit_messages_change,

apps/editor/src/views/settings/frontend/i18n/translations/actions.ts

@@ -251,6 +251,24 @@ export const actions = {
     hu: 'Alapértelmezés törlése',
     bg: 'Премахване на по подразбиране'
   },
+  'action.select-default-configuration': {
+    en: 'Select default configuration',
+    pl: 'Wybierz domyślną konfigurację',
+    'zh-cn': '选择默认配置',
+    ja: 'デフォルト設定を選択',
+    'zh-tw': '選擇預設設定',
+    de: 'Standardkonfiguration auswählen',
+    es: 'Seleccionar configuración predeterminada',
+    fr: 'Sélectionner la configuration par défaut',
+    'pt-br': 'Selecionar configuração padrão',
+    ru: 'Выбрать конфигурацию по умолчанию',
+    ko: '기본 구성 선택',
+    it: 'Seleziona configurazione predefinita',
+    tr: 'Varsayılan yapılandırmayı seç',
+    cs: 'Vybrat výchozí konfiguraci',
+    hu: 'Alapértelmezett konfiguráció kiválasztása',
+    bg: 'Изберете конфигурация по подразбиране'
+  },
   'action.configuration': {
     en: 'configuration',
     pl: 'konfiguracja',

apps/editor/src/views/settings/types/messages.ts

@@ -65,6 +65,11 @@ export interface SetDefaultConfigurationMessage {
   configuration_id: string | null
 }
 
+export interface SelectDefaultConfigurationMessage {
+  command: 'SELECT_DEFAULT_CONFIGURATION'
+  tool_name: ToolType
+}
+
 export interface GetCommitMessageInstructionsMessage {
   command: 'GET_COMMIT_MESSAGE_INSTRUCTIONS'
 }
@@ -253,6 +258,7 @@ export type FrontendMessage =
   | ReorderConfigurationsMessage
   | DeleteConfigurationMessage
   | SetDefaultConfigurationMessage
+  | SelectDefaultConfigurationMessage
   | GetCommitMessageInstructionsMessage
   | UpdateCommitMessageInstructionsMessage
   | GetIncludePromptsInCommitMessagesMessage

packages/ui/src/components/editor/settings/DefaultConfigurationSelector/DefaultConfigurationSelector.module.scss

@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.model {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  opacity: 0.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.9em;
+  margin-left: 0.5em;
+}
+
+.actions {
+  margin-left: 12px;
+}