Introduce a unified settings menu to manage API providers and API tool configurations

Author: robertpiosik

…ndlers/handle-configure-api-providers.ts …open-settings/configure-api-providers.tspackages/vscode/src/view/backend/message-handlers/handle-configure-api-providers.ts renamed to packages/vscode/src/view/backend/message-handlers/handle-open-settings/configure-api-providers.ts packages/vscode/src/view/backend/message-handlers/handle-configure-api-providers.ts renamed to packages/vscode/src/view/backend/message-handlers/handle-open-settings/configure-api-providers.ts

@@ -12,7 +12,7 @@ const normalize_base_url = (url: string): string => {
   return url.trim().replace(/\/+$/, '')
 }
 
-export const handle_configure_api_providers = async (
+export const configure_api_providers = async (
   provider: ViewProvider
 ): Promise<void> => {
   const providers_manager = new ApiProvidersManager(provider.context)
@@ -92,7 +92,7 @@ export const handle_configure_api_providers = async (
     ]
   }
 
-  const show_providers_quick_pick = async () => {
+  const show_providers_quick_pick = async (): Promise<void> => {
     const saved_providers = await providers_manager.get_providers()
 
     if (saved_providers.length == 0) {
@@ -106,13 +106,16 @@ export const handle_configure_api_providers = async (
     quick_pick.placeholder = 'Select an API provider to edit or add a new one'
 
     return new Promise<void>((resolve) => {
+      let is_accepted = false
+
       quick_pick.onDidAccept(async () => {
+        is_accepted = true
         const selected = quick_pick.selectedItems[0]
+        quick_pick.hide()
+
         if (selected.label == '$(add) Add another API provider...') {
-          quick_pick.hide()
           await show_create_provider_quick_pick()
         } else if ('provider' in selected) {
-          quick_pick.hide()
           await edit_provider(selected.provider as Provider)
         }
         resolve()
@@ -124,13 +127,17 @@ export const handle_configure_api_providers = async (
           index: number
         }
 
-        if (event.button === edit_button) {
-          quick_pick.hide()
-          await edit_provider(item.provider)
-          resolve()
-        } else if (event.button === change_api_key_button) {
+        if (
+          event.button === edit_button ||
+          event.button === change_api_key_button
+        ) {
+          is_accepted = true
           quick_pick.hide()
-          await edit_built_in_provider(item.provider as BuiltInProvider)
+          if (event.button === edit_button) {
+            await edit_provider(item.provider)
+          } else if (event.button === change_api_key_button) {
+            await edit_built_in_provider(item.provider as BuiltInProvider)
+          }
           resolve()
         } else if (event.button === delete_button) {
           const confirm = await vscode.window.showWarningMessage(
@@ -145,15 +152,17 @@ export const handle_configure_api_providers = async (
               (p) => p.name != item.provider.name
             )
             await providers_manager.save_providers(updated_providers)
-            quick_pick.items = await create_provider_items()
+
             if (updated_providers.length === 0) {
+              is_accepted = true
               quick_pick.hide()
               vscode.window.showInformationMessage(
                 'All API providers have been removed.'
               )
               await show_create_provider_quick_pick()
               resolve()
             } else {
+              quick_pick.items = await create_provider_items()
               quick_pick.show()
             }
           }
@@ -184,7 +193,9 @@ export const handle_configure_api_providers = async (
       })
 
       quick_pick.onDidHide(() => {
-        resolve()
+        if (!is_accepted) {
+          resolve()
+        }
       })
 
       quick_pick.show()

packages/vscode/src/view/backend/message-handlers/handle-open-settings/handle-open-settings.ts

@@ -0,0 +1,87 @@
+import * as vscode from 'vscode'
+import { ViewProvider } from '@/view/backend/view-provider'
+import { configure_api_providers } from './configure-api-providers'
+import { setup_api_tool_multi_config } from './setup-api-tool-multi-config'
+import { setup_api_tool } from './setup-api-tool'
+
+export const handle_open_settings = async (
+  provider: ViewProvider
+): Promise<void> => {
+  const show_main_menu = async () => {
+    const selected = await vscode.window.showQuickPick(
+      [
+        {
+          label: 'Configure API Providers',
+          detail:
+            'OpenAI-compatible API endpoints to use by API tools. API keys never leave your device.'
+        },
+        {
+          label: 'API tools',
+          kind: vscode.QuickPickItemKind.Separator
+        },
+        {
+          label: 'Code Completions',
+          description: 'Get code at cursor from state-of-the-art reasoning models.'
+        },
+        {
+          label: 'Edit Context',
+          description:
+            'Create and modify files in context based on natural language instructions.'
+        },
+        {
+          label: 'Intelligent Update',
+          description:
+            'Handle "truncated" edit format and fix malformed diffs.'
+        },
+        {
+          label: 'Commit Messages',
+          description:
+            'Generate meaningful commit messages precisely adhering to your style.'
+        }
+      ],
+      {
+        title: 'Settings',
+        placeHolder: 'Select option'
+      }
+    )
+
+    if (!selected) {
+      return
+    }
+
+    switch (selected.label) {
+      case 'Configure API Providers':
+        await configure_api_providers(provider)
+        break
+      case 'Code Completions':
+        await setup_api_tool_multi_config({
+          provider,
+          tool: 'code-completions'
+        })
+        break
+      case 'Edit Context':
+        await setup_api_tool_multi_config({
+          provider,
+          tool: 'edit-context'
+        })
+        break
+      case 'Intelligent Update':
+        await setup_api_tool_multi_config({
+          provider,
+          tool: 'intelligent-update'
+        })
+        break
+      case 'Commit Messages':
+        await setup_api_tool({
+          provider,
+          tool: 'commit-messages'
+        })
+        break
+    }
+
+    // Return to main menu after completing any operation
+    await show_main_menu()
+  }
+
+  await show_main_menu()
+}

packages/vscode/src/view/backend/message-handlers/handle-open-settings/index.ts

@@ -0,0 +1 @@
+export * from './handle-open-settings'

…rs/handle-setup-api-tool-multi-config.ts …-settings/setup-api-tool-multi-config.tspackages/vscode/src/view/backend/message-handlers/handle-setup-api-tool-multi-config.ts renamed to packages/vscode/src/view/backend/message-handlers/handle-open-settings/setup-api-tool-multi-config.ts packages/vscode/src/view/backend/message-handlers/handle-setup-api-tool-multi-config.ts renamed to packages/vscode/src/view/backend/message-handlers/handle-open-settings/setup-api-tool-multi-config.ts

@@ -28,7 +28,7 @@ interface ToolMethods {
   get_display_name: () => string
 }
 
-export const handle_setup_api_tool_multi_config = async (params: {
+export const setup_api_tool_multi_config = async (params: {
   provider: ViewProvider
   tool: SupportedTool
 }): Promise<void> => {
@@ -207,8 +207,11 @@ export const handle_setup_api_tool_multi_config = async (params: {
     quick_pick.matchOnDescription = true
     quick_pick.placeholder = 'Select a configuration to edit or add another one'
 
+    let is_accepted = false
+
     return new Promise<void>((resolve) => {
       quick_pick.onDidAccept(async () => {
+        is_accepted = true
         const selected = quick_pick.selectedItems[0]
         if (!selected) {
           quick_pick.hide()
@@ -220,10 +223,12 @@ export const handle_setup_api_tool_multi_config = async (params: {
           quick_pick.hide()
           await add_configuration()
           await show_configs_quick_pick()
+          resolve()
         } else if ('config' in selected && selected.config) {
           quick_pick.hide()
           await edit_configuration(selected.config as ToolConfig)
           await show_configs_quick_pick()
+          resolve()
         }
       })
 
@@ -234,9 +239,11 @@ export const handle_setup_api_tool_multi_config = async (params: {
         }
 
         if (event.button === edit_button) {
+          is_accepted = true
           quick_pick.hide()
           await edit_configuration(item.config)
           await show_configs_quick_pick()
+          resolve()
         } else if (event.button === delete_button) {
           const confirm = await vscode.window.showWarningMessage(
             `Are you sure you want to delete ${item.config.model} (${item.config.provider_name})?`,
@@ -259,11 +266,13 @@ export const handle_setup_api_tool_multi_config = async (params: {
             }
 
             if (current_configs.length == 0) {
+              is_accepted = true
               quick_pick.hide()
               await add_configuration()
               if (current_configs.length > 0) {
                 await show_configs_quick_pick()
               }
+              resolve()
             } else {
               quick_pick.items = create_config_items()
               quick_pick.show()
@@ -305,7 +314,9 @@ export const handle_setup_api_tool_multi_config = async (params: {
       })
 
       quick_pick.onDidHide(() => {
-        resolve()
+        if (!is_accepted) {
+          resolve()
+        }
       })
 
       quick_pick.show()

…essage-handlers/handle-setup-api-tool.ts …s/handle-open-settings/setup-api-tool.tspackages/vscode/src/view/backend/message-handlers/handle-setup-api-tool.ts renamed to packages/vscode/src/view/backend/message-handlers/handle-open-settings/setup-api-tool.ts packages/vscode/src/view/backend/message-handlers/handle-setup-api-tool.ts renamed to packages/vscode/src/view/backend/message-handlers/handle-open-settings/setup-api-tool.ts

@@ -18,7 +18,7 @@ const DEFAULT_TEMPERATURE: { [key in SupportedTool]: number } = {
 
 const DEFAULT_CONFIRMATION_THRESHOLD = 20000
 
-export const handle_setup_api_tool = async (params: {
+export const setup_api_tool = async (params: {
   provider: ViewProvider
   tool: SupportedTool
 }): Promise<void> => {

packages/vscode/src/view/backend/message-handlers/index.ts

@@ -1,5 +1,4 @@
 export * from './handle-copy-prompt'
-export * from './handle-configure-api-providers'
 export * from './handle-create-preset'
 export * from './handle-delete-preset'
 export * from './handle-duplicate-preset'
@@ -21,8 +20,6 @@ export * from './handle-send-prompt'
 export * from './handle-show-preset-picker'
 export * from './handle-show-quick-pick'
 export * from './handle-update-preset'
-export * from './handle-setup-api-tool-multi-config'
-export * from './handle-setup-api-tool'
 export * from './handle-pick-open-router-model'
 export * from './handle-save-home-view-type'
 export * from './handle-get-home-view-type'
@@ -34,3 +31,4 @@ export * from './handle-get-mode-web'
 export * from './handle-get-mode-api'
 export * from './handle-save-mode-web'
 export * from './handle-save-mode-api'
+export * from './handle-open-settings'

packages/vscode/src/view/backend/view-provider.ts

@@ -36,20 +36,17 @@ import {
   handle_get_instructions,
   handle_request_editor_state,
   handle_request_editor_selection_state,
-  handle_configure_api_providers,
-  handle_setup_api_tool_multi_config,
-  handle_setup_api_tool,
-  handle_pick_open_router_model,
-  handle_save_home_view_type,
-  handle_get_home_view_type,
   handle_edit_context,
   handle_code_completion,
   handle_get_edit_format,
   handle_at_sign_quick_pick,
   handle_get_mode_web,
   handle_save_mode_web,
   handle_get_mode_api,
-  handle_save_mode_api
+  handle_save_mode_api,
+  handle_save_home_view_type,
+  handle_get_home_view_type,
+  handle_open_settings
 } from './message-handlers'
 import {
   config_preset_to_ui_format,
@@ -347,7 +344,11 @@ export class ViewProvider implements vscode.WebviewViewProvider {
           } else if (message.command == 'PREVIEW_PRESET') {
             await handle_preview_preset(this, message)
           } else if (message.command == 'COPY_PROMPT') {
-            await handle_copy_prompt(this, message.instruction, message.preset_name)
+            await handle_copy_prompt(
+              this,
+              message.instruction,
+              message.preset_name
+            )
           } else if (message.command == 'SHOW_PRESET_PICKER') {
             await handle_show_preset_picker(this)
           } else if (message.command == 'REQUEST_EDITOR_STATE') {
@@ -388,36 +389,14 @@ export class ViewProvider implements vscode.WebviewViewProvider {
             await handle_save_edit_format(this, message)
           } else if (message.command == 'CARET_POSITION_CHANGED') {
             this.caret_position = message.caret_position
-          } else if (message.command == 'CONFIGURE_API_PROVIDERS') {
-            handle_configure_api_providers(this)
-          } else if (message.command == 'SETUP_API_TOOL_CODE_COMPLETIONS') {
-            await handle_setup_api_tool_multi_config({
-              provider: this,
-              tool: 'code-completions'
-            })
-          } else if (message.command == 'SETUP_API_TOOL_EDIT_CONTEXT') {
-            await handle_setup_api_tool_multi_config({
-              provider: this,
-              tool: 'edit-context'
-            })
-          } else if (message.command == 'SETUP_API_TOOL_INTELLIGENT_UPDATE') {
-            await handle_setup_api_tool_multi_config({
-              provider: this,
-              tool: 'intelligent-update'
-            })
-          } else if (message.command == 'SETUP_API_TOOL_COMMIT_MESSAGES') {
-            await handle_setup_api_tool({
-              provider: this,
-              tool: 'commit-messages'
-            })
-          } else if (message.command == 'PICK_OPEN_ROUTER_MODEL') {
-            await handle_pick_open_router_model(this)
           } else if (message.command == 'SAVE_HOME_VIEW_TYPE') {
             await handle_save_home_view_type(this, message)
           } else if (message.command == 'GET_HOME_VIEW_TYPE') {
             handle_get_home_view_type(this)
           } else if (message.command == 'SHOW_AT_SIGN_QUICK_PICK') {
             await handle_at_sign_quick_pick(this, this.context)
+          } else if (message.command == 'OPEN_SETTINGS') {
+            await handle_open_settings(this)
           }
         } catch (error: any) {
           console.error('Error handling message:', message, error)