Prevent API key prompts and editing for model providers using local localhost base URLs

Author: robertpiosik

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.tsx

@@ -49,11 +49,13 @@ export const ModelProviders: React.FC<ModelProviders.Props> = (props) => {
             title="Rename provider"
           />
         )}
-        <IconButton
-          codicon_icon="key"
-          on_click={() => props.on_change_api_key(provider.name)}
-          title="Change API key"
-        />
+        {!provider.baseUrl.includes('localhost') && (
+          <IconButton
+            codicon_icon="key"
+            on_click={() => props.on_change_api_key(provider.name)}
+            title="Change API key"
+          />
+        )}
         <IconButton
           codicon_icon="trash"
           on_click={() => props.on_delete_provider(provider.name)}

packages/vscode/src/views/settings/backend/message-handlers/handle-add-model-provider.ts

@@ -44,18 +44,24 @@ export const handle_add_model_provider = async (
       return await show_create_provider_quick_pick()
     }
 
-    const api_key = await vscode.window.showInputBox({
-      title: 'Model API Key',
-      prompt: 'Enter your model API key'
-    })
-    if (api_key === undefined) {
-      return await show_create_provider_quick_pick()
+    const normalized_base_url = normalize_base_url(base_url)
+    const is_local = normalized_base_url.includes('localhost')
+
+    let api_key: string | undefined = ''
+    if (!is_local) {
+      api_key = await vscode.window.showInputBox({
+        title: 'API Key',
+        prompt: 'Enter your API key'
+      })
+      if (api_key === undefined) {
+        return await show_create_provider_quick_pick()
+      }
     }
 
     const new_provider: CustomProvider = {
       type: 'custom' as const,
       name: name.trim(),
-      base_url: normalize_base_url(base_url),
+      base_url: normalized_base_url,
       api_key: api_key?.trim() || ''
     }
 
@@ -67,13 +73,18 @@ export const handle_add_model_provider = async (
   const create_built_in_provider = async (
     name: keyof typeof PROVIDERS
   ): Promise<boolean> => {
-    const api_key = await vscode.window.showInputBox({
-      title: 'Model API Key',
-      prompt: 'Enter your model API key',
-      validateInput: (value) => (!value.trim() ? 'API key is required' : null)
-    })
-    if (api_key === undefined) {
-      return await show_create_provider_quick_pick()
+    const provider_info = PROVIDERS[name]
+    const is_local = provider_info.base_url.includes('localhost')
+
+    let api_key: string | undefined = ''
+    if (!is_local) {
+      api_key = await vscode.window.showInputBox({
+        title: 'API Key',
+        prompt: 'Enter your API key'
+      })
+      if (api_key === undefined) {
+        return await show_create_provider_quick_pick()
+      }
     }
 
     const providers = await providers_manager.get_providers()

packages/vscode/src/views/settings/backend/message-handlers/handle-edit-model-provider-key.ts

@@ -26,22 +26,35 @@ export const handle_change_model_provider_key = async (
   }
 
   const new_api_key = await vscode.window.showInputBox({
-    title: `Model API Key for ${provider_name}`,
-    prompt: 'Enter your model API key. Press Esc to keep the current one.',
+    title: `API Key for ${provider_name}`,
+    prompt: 'Enter your API key.',
     password: true,
     placeHolder: provider_to_update.api_key
       ? `...${provider_to_update.api_key.slice(-4)}`
       : 'No API key set'
   })
 
   if (new_api_key === undefined) {
-    // User cancelled
     return
   }
 
+  const trimmed_api_key = new_api_key.trim()
+
+  if (trimmed_api_key == '' && provider_to_update.api_key) {
+    const confirmation = await vscode.window.showWarningMessage(
+      `Are you sure you want to clear the API key for ${provider_name}? This action cannot be undone.`,
+      { modal: true },
+      'Clear API Key'
+    )
+
+    if (confirmation != 'Clear API Key') {
+      return
+    }
+  }
+
   const updated_provider: Provider = {
     ...provider_to_update,
-    api_key: new_api_key.trim()
+    api_key: trimmed_api_key
   }
 
   const providers = await providers_manager.get_providers()

packages/vscode/src/views/settings/backend/message-handlers/handle-get-model-providers.ts

@@ -9,14 +9,10 @@ export const handle_get_model_providers = async (
   const saved_providers = await providers_manager.get_providers()
 
   const providers_for_client = saved_providers.map((p) => {
-    const apiKeyMask = p.api_key
-      ? `...${p.api_key.slice(-4)}`
-      : '⚠ Missing API key'
+    const apiKeyMask = p.api_key ? `...${p.api_key.slice(-4)}` : ''
 
     const baseUrl =
-      p.type === 'built-in'
-        ? PROVIDERS[p.name].base_url
-        : p.base_url || '⚠ Missing base URL'
+      p.type == 'built-in' ? PROVIDERS[p.name].base_url : p.base_url
 
     return {
       name: p.name,