Refactor API and web configuration creation to integrate with update logic and support custom insertion positioning

- from reasoning effort quick pick, remove 'unset' option
- standalone quick picks should have close buttons on the right, not back button on the left
- rename 'New api configuration' quick pick title to 'new configuration'
- once configuration is created, don't save yet, instead open the edit form so that user can set other details. Only after saving from there check for duplicates (in case of API configuration).
- 'message' should not be of type any
- 'Identical configuration already exists.' should be shown in modal so the user is able to close the form or stay

Author: robertpiosik

apps/editor/src/views/actions/create-api-configuration/create-api-configuration.ts

@@ -18,35 +18,12 @@ export const create_api_configuration = async (params: {
   tool_type: ToolType
   create_on_top?: boolean
   insertion_index?: number
-}): Promise<ApiConfiguration | undefined> => {
+}): Promise<
+  { config: ApiConfiguration; insertion_index?: number } | undefined
+> => {
   const providers_manager = new ModelProvidersManager(params.context)
   const model_fetcher = new ModelFetcher()
 
-  let set_default_api_configuration:
-    | ((api_configuration: ApiConfiguration | null) => Promise<void>)
-    | undefined
-
-  if (params.tool_type == 'code-at-cursor') {
-    set_default_api_configuration = (c) =>
-      providers_manager.set_default_code_completions_api_configuration(c)
-  } else if (params.tool_type == 'commit-messages') {
-    set_default_api_configuration = (c) =>
-      providers_manager.set_default_commit_messages_api_configuration(c)
-  } else if (params.tool_type == 'intelligent-update') {
-    set_default_api_configuration = (c) =>
-      providers_manager.set_default_intelligent_update_api_configuration(c)
-  } else if (params.tool_type == 'find-relevant-files') {
-    set_default_api_configuration = (c) =>
-      providers_manager.set_default_find_relevant_files_api_configuration(c)
-  } else if (params.tool_type == 'voice-input') {
-    set_default_api_configuration = (c) =>
-      providers_manager.set_default_voice_input_api_configuration(c)
-  } else if (params.tool_type !== 'edit-context') {
-    throw new Error(`Unknown tool type: ${params.tool_type}`)
-  }
-
-  const api_configurations = await providers_manager.get_api_configurations()
-
   let actual_insertion_index: number | undefined
 
   if (params.insertion_index !== undefined) {
@@ -121,32 +98,12 @@ export const create_api_configuration = async (params: {
     temperature: undefined
   }
 
-  const new_id = get_api_configuration_id(api_configuration_to_add)
-
-  if (api_configurations.some((c) => get_api_configuration_id(c) === new_id)) {
-    vscode.window.showErrorMessage(
-      dictionary.error_message.CONFIGURATION_ALREADY_EXISTS
-    )
-    return undefined
-  }
-
   if (params.create_on_top) {
-    api_configurations.unshift(api_configuration_to_add)
-  } else if (actual_insertion_index !== undefined) {
-    api_configurations.splice(
-      actual_insertion_index,
-      0,
-      api_configuration_to_add
-    )
-  } else {
-    api_configurations.push(api_configuration_to_add)
+    actual_insertion_index = 0
   }
 
-  await providers_manager.save_api_configurations(api_configurations)
-
-  if (set_default_api_configuration) {
-    await set_default_api_configuration(api_configuration_to_add)
+  return {
+    config: api_configuration_to_add,
+    insertion_index: actual_insertion_index
   }
-
-  return api_configuration_to_add
 }

apps/editor/src/views/actions/create-api-configuration/interactions/initial-select-provider.ts

@@ -45,7 +45,7 @@ export const initial_select_model_provider = async (
         } as any,
         ...model_provider_items
       ]
-      quick_pick.title = 'New API Configuration'
+      quick_pick.title = 'New Configuration'
       quick_pick.placeholder = 'Select a model provider'
       const close_button: vscode.QuickInputButton = {
         iconPath: new vscode.ThemeIcon('close'),

apps/editor/src/views/actions/create-web-configuration.ts

@@ -1,13 +1,14 @@
 import * as vscode from 'vscode'
-import { dictionary } from '@shared/constants/dictionary'
 import { CHATBOTS } from '@shared/constants/chatbots'
 import { ConfigWebConfigurationFormat } from '@/utils/web-configuration-format-converters'
 import { generate_unique_name } from '../utils/generate-unique-name'
 
 export const create_web_configuration = async (params: {
   placement?: 'top' | 'bottom'
   reference_index?: number
-}): Promise<ConfigWebConfigurationFormat | undefined> => {
+}): Promise<
+  { config: ConfigWebConfigurationFormat; insertion_index?: number } | undefined
+> => {
   const config = vscode.workspace.getConfiguration('codeWebChat')
   const current_web_configurations =
     config.get<ConfigWebConfigurationFormat[]>('webConfigurations', []) || []
@@ -128,20 +129,5 @@ export const create_web_configuration = async (params: {
       : undefined
   }
 
-  const updated_web_configurations = [...current_web_configurations]
-  if (insertion_index !== undefined) {
-    updated_web_configurations.splice(insertion_index, 0, new_web_configuration)
-  } else {
-    updated_web_configurations.push(new_web_configuration)
-  }
-
-  try {
-    await config.update('webConfigurations', updated_web_configurations, true)
-    return new_web_configuration
-  } catch (error) {
-    vscode.window.showErrorMessage(
-      dictionary.error_message.FAILED_TO_CREATE_ITEM('Web Configuration', error)
-    )
-    return undefined
-  }
+  return { config: new_web_configuration, insertion_index }
 }

apps/editor/src/views/actions/update-api-configuration/interactions/edit-model-for-api-config.ts

@@ -66,7 +66,11 @@ export const edit_model_for_api_configuration = async (params: {
           quick_pick.items = model_items
           quick_pick.title = 'Models'
           quick_pick.placeholder = 'Choose a model'
-          quick_pick.buttons = [vscode.QuickInputButtons.Back]
+          const close_button: vscode.QuickInputButton = {
+            iconPath: new vscode.ThemeIcon('close'),
+            tooltip: 'Close'
+          }
+          quick_pick.buttons = [close_button]
           if (last_selected_model_id) {
             const active = model_items.find(
               (item) =>
@@ -84,7 +88,7 @@ export const edit_model_for_api_configuration = async (params: {
               quick_pick.hide()
             }),
             quick_pick.onDidTriggerButton((button) => {
-              if (button === vscode.QuickInputButtons.Back) {
+              if (button === close_button) {
                 quick_pick.hide()
               }
             }),

apps/editor/src/views/actions/update-api-configuration/interactions/edit-provider-for-api-config.ts

@@ -18,7 +18,11 @@ export const edit_model_provider_for_api_configuration = async (
     quick_pick.items = model_provider_items
     quick_pick.title = 'Model Providers'
     quick_pick.placeholder = 'Select a model provider'
-    quick_pick.buttons = [vscode.QuickInputButtons.Back]
+    const close_button: vscode.QuickInputButton = {
+      iconPath: new vscode.ThemeIcon('close'),
+      tooltip: 'Close'
+    }
+    quick_pick.buttons = [close_button]
     if (current_model_provider_name) {
       const active = model_provider_items.find(
         (p) => p.label === current_model_provider_name
@@ -35,7 +39,7 @@ export const edit_model_provider_for_api_configuration = async (
         quick_pick.hide()
       }),
       quick_pick.onDidTriggerButton((button) => {
-        if (button === vscode.QuickInputButtons.Back) {
+        if (button === close_button) {
           quick_pick.hide()
         }
       }),

apps/editor/src/views/actions/update-api-configuration/interactions/edit-reasoning-effort-for-api-config.ts

@@ -4,26 +4,23 @@ export const edit_reasoning_effort_for_api_config = async (
   current_effort?: string
 ) => {
   const effort_options: vscode.QuickPickItem[] = [
-    {
-      label: 'Unset',
-      description: 'Remove reasoning effort from the API configuration'
-    }
-  ]
-
-  effort_options.push(
     { label: 'None' },
     { label: 'Minimal' },
     { label: 'Low' },
     { label: 'Medium' },
     { label: 'High' }
-  )
+  ]
 
-  return await new Promise<string | null | undefined>((resolve) => {
+  return await new Promise<string | undefined>((resolve) => {
     const quick_pick = vscode.window.createQuickPick()
     quick_pick.items = effort_options
     quick_pick.title = 'Edit API Configuration'
     quick_pick.placeholder = 'Select reasoning effort'
-    quick_pick.buttons = [vscode.QuickInputButtons.Back]
+    const close_button: vscode.QuickInputButton = {
+      iconPath: new vscode.ThemeIcon('close'),
+      tooltip: 'Close'
+    }
+    quick_pick.buttons = [close_button]
     if (current_effort) {
       const active = effort_options.find(
         (item) => item.label.toLowerCase() === current_effort.toLowerCase()
@@ -39,16 +36,14 @@ export const edit_reasoning_effort_for_api_config = async (
         accepted = true
         const selected = quick_pick.selectedItems[0]
         if (selected) {
-          resolve(
-            selected.label == 'Unset' ? null : selected.label.toLowerCase()
-          )
+          resolve(selected.label.toLowerCase())
         } else {
           resolve(undefined)
         }
         quick_pick.hide()
       }),
       quick_pick.onDidTriggerButton((button) => {
-        if (button === vscode.QuickInputButtons.Back) {
+        if (button === close_button) {
           quick_pick.hide()
         }
       }),

apps/editor/src/views/actions/update-api-configuration/update-api-configuration.ts

@@ -5,35 +5,51 @@ import {
   get_api_configuration_id
 } from '@/services/model-providers-manager'
 import { ApiConfiguration } from '@/views/panel/types/messages'
+import { ToolType } from '@/views/settings/types/tools'
 
 export const update_api_configuration = async (params: {
   context: vscode.ExtensionContext
   updating_api_configuration: ApiConfiguration
   updated_api_configuration: ApiConfiguration
   origin?: 'cancel' | 'save'
+  is_new?: boolean
+  insertion_index?: number
+  tool_type?: ToolType
 }): Promise<{ success: boolean; has_changes: boolean; new_id?: string }> => {
   const providers_manager = new ModelProvidersManager(params.context)
+
+  if (params.is_new && params.origin === 'cancel') {
+    return { success: true, has_changes: false }
+  }
+
   const api_configurations = await providers_manager.get_api_configurations()
 
-  const api_configuration_index = api_configurations.findIndex(
-    (p) => get_api_configuration_id(p) == params.updating_api_configuration.id
-  )
+  let api_configuration_index = -1
+  if (!params.is_new) {
+    api_configuration_index = api_configurations.findIndex(
+      (p) => get_api_configuration_id(p) == params.updating_api_configuration.id
+    )
 
-  if (api_configuration_index == -1 && params.origin != 'cancel') {
-    vscode.window.showErrorMessage(
-      dictionary.error_message.COULD_NOT_UPDATE_ITEM_NOT_FOUND(
-        'API configuration',
-        params.updating_api_configuration.id
+    if (api_configuration_index == -1 && params.origin != 'cancel') {
+      vscode.window.showErrorMessage(
+        dictionary.error_message.COULD_NOT_UPDATE_ITEM_NOT_FOUND(
+          'API configuration',
+          params.updating_api_configuration.id
+        )
       )
-    )
-    return { success: false, has_changes: false }
+      return { success: false, has_changes: false }
+    }
   }
 
   const has_changes =
     params.updating_api_configuration.id !==
-    get_api_configuration_id(params.updated_api_configuration)
+      get_api_configuration_id(params.updated_api_configuration) ||
+    params.updating_api_configuration.system_instructions_override !==
+      params.updated_api_configuration.system_instructions_override ||
+    params.updating_api_configuration.is_pinned !==
+      params.updated_api_configuration.is_pinned
 
-  if (!has_changes) {
+  if (!has_changes && !params.is_new) {
     return { success: true, has_changes: false }
   }
 
@@ -59,36 +75,76 @@ export const update_api_configuration = async (params: {
   }
 
   const new_config = {
-    ...api_configurations[api_configuration_index],
+    ...(!params.is_new && api_configuration_index !== -1
+      ? api_configurations[api_configuration_index]
+      : {}),
     model_provider_name: params.updated_api_configuration.model_provider_name,
     model: params.updated_api_configuration.model,
     temperature: params.updated_api_configuration.temperature,
     reasoning_effort: params.updated_api_configuration.reasoning_effort,
     system_instructions_override:
-      params.updated_api_configuration.system_instructions_override
+      params.updated_api_configuration.system_instructions_override,
+    is_pinned: params.updated_api_configuration.is_pinned
   }
 
-  const new_id = get_api_configuration_id(new_config)
+  const new_id = get_api_configuration_id(new_config as any)
+
+  const is_duplicate = params.is_new
+    ? api_configurations.some((c) => get_api_configuration_id(c) === new_id)
+    : new_id != params.updating_api_configuration.id &&
+      api_configurations.some((c) => get_api_configuration_id(c) === new_id)
 
-  // check if id already exists AND it's not the one we're editing
-  if (
-    new_id !== params.updating_api_configuration.id &&
-    api_configurations.some((c) => get_api_configuration_id(c) === new_id)
-  ) {
-    vscode.window.showErrorMessage(
-      dictionary.error_message.CONFIGURATION_ALREADY_EXISTS
+  if (is_duplicate) {
+    const discard_button = 'Discard'
+    const result = await vscode.window.showWarningMessage(
+      dictionary.error_message.CONFIGURATION_ALREADY_EXISTS,
+      { modal: true },
+      discard_button
     )
+
+    if (result == discard_button) {
+      return { success: true, has_changes: false }
+    }
+
     return { success: false, has_changes: true }
   }
 
-  if (api_configuration_index !== -1) {
-    api_configurations[api_configuration_index] = new_config
-  } else {
-    api_configurations.push(new_config)
+  if (params.is_new) {
+    if (params.insertion_index !== undefined) {
+      api_configurations.splice(params.insertion_index, 0, new_config as any)
+    } else {
+      api_configurations.push(new_config as any)
+    }
+  } else if (api_configuration_index !== -1) {
+    api_configurations[api_configuration_index] = new_config as any
   }
 
   await providers_manager.save_api_configurations(api_configurations)
 
+  if (params.is_new && params.tool_type) {
+    if (params.tool_type == 'code-at-cursor') {
+      await providers_manager.set_default_code_completions_api_configuration(
+        new_config as any
+      )
+    } else if (params.tool_type == 'commit-messages') {
+      await providers_manager.set_default_commit_messages_api_configuration(
+        new_config as any
+      )
+    } else if (params.tool_type == 'intelligent-update') {
+      await providers_manager.set_default_intelligent_update_api_configuration(
+        new_config as any
+      )
+    } else if (params.tool_type == 'find-relevant-files') {
+      await providers_manager.set_default_find_relevant_files_api_configuration(
+        new_config as any
+      )
+    } else if (params.tool_type == 'voice-input') {
+      await providers_manager.set_default_voice_input_api_configuration(
+        new_config as any
+      )
+    }
+  }
+
   return {
     success: true,
     has_changes: true,