Add new ApiKey component and use with Anthropic

Signed-off-by: Geoff Wilson <[email protected]>

Author: suprjinx

packages/types/src/provider-settings.ts

@@ -113,6 +113,7 @@ const vertexSchema = apiModelIdProviderModelSchema.extend({
 const openAiSchema = baseProviderSettingsSchema.extend({
 	openAiBaseUrl: z.string().optional(),
 	openAiApiKey: z.string().optional(),
+	openAiApiKeyUseEnvVar: z.boolean().optional(),
 	openAiLegacyFormat: z.boolean().optional(),
 	openAiR1FormatEnabled: z.boolean().optional(),
 	openAiModelId: z.string().optional(),
@@ -293,6 +294,7 @@ export const PROVIDER_SETTINGS_KEYS = keysOf<ProviderSettings>()([
 	// OpenAI
 	"openAiBaseUrl",
 	"openAiApiKey",
+	"openAiApiKeyUseEnvVar",
 	"openAiLegacyFormat",
 	"openAiR1FormatEnabled",
 	"openAiModelId",

webview-ui/src/components/settings/ApiKey.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react"
+import { Checkbox } from "vscrui"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { t } from "i18next"
+
+type ApiKeyProps = {
+    apiKey: string
+    apiKeyEnvVar: string
+    setApiKey: (value: string) => void
+    setApiKeyUseEnvVar: (value: boolean) => void
+    apiKeyLabel: string
+    apiKeyUseEnvVar: boolean
+    getApiKeyUrl?: string
+    getApiKeyLabel?: string
+    disabled?: boolean
+}
+
+export const ApiKey = ({
+    apiKey,
+    apiKeyEnvVar,
+    setApiKey,
+    setApiKeyUseEnvVar,
+    apiKeyLabel,
+    apiKeyUseEnvVar,
+    getApiKeyUrl,
+    getApiKeyLabel,
+    disabled = false,
+}: ApiKeyProps) => {
+
+    const env = (window as any).PROCESS_ENV || {}
+    const apiKeyEnvVarExists = !!env[apiKeyEnvVar]
+    const [useEnvVar, setUseEnvVar] = useState(apiKeyUseEnvVar && apiKeyEnvVarExists)
+
+    const handleUseEnvVarChange = (checked: boolean) => {
+        setUseEnvVar(checked)
+        setApiKeyUseEnvVar(checked)
+    }
+
+    return (
+        <>
+            <VSCodeTextField
+                value={apiKey || ""}
+                type="password"
+                onInput={e => setApiKey((e.target as HTMLInputElement).value)}
+                placeholder={t("settings:placeholders.apiKey")}
+                className="w-full"
+                disabled={useEnvVar || disabled}>
+                <label className="block font-medium mb-1">{apiKeyLabel}</label>
+            </VSCodeTextField>
+            <div className="text-sm text-vscode-descriptionForeground -mt-2">
+                {t("settings:providers.apiKeyStorageNotice")}
+            </div>
+            <Checkbox
+                checked={useEnvVar}
+                onChange={handleUseEnvVarChange}
+                className="mb-2"
+                disabled={!apiKeyEnvVarExists}>
+                {t("settings:providers.apiKeyUseEnvVar", { name: apiKeyEnvVar })}
+            </Checkbox>
+            {!(apiKey || useEnvVar) && getApiKeyUrl && getApiKeyLabel && (
+                <VSCodeButtonLink href={getApiKeyUrl} appearance="secondary">
+                    {getApiKeyLabel}
+                </VSCodeButtonLink>
+            )}
+        </>
+    )
+}

webview-ui/src/components/settings/providers/Anthropic.tsx

@@ -8,6 +8,7 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
 
 import { inputEventTransform, noTransform } from "../transforms"
+import { ApiKey } from "../ApiKey"
 
 type AnthropicProps = {
 	apiConfiguration: ProviderSettings
@@ -29,41 +30,18 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: Anthro
 		[setApiConfigurationField],
 	)
 
-	const env = (window as any).PROCESS_ENV || {}
-	const apiKeyEnvVarExists = !!env["ANTHROPIC_API_KEY"]
-	const [useApiKeyEnvVar, setUseApiKeyEnvVar] = useState(!!apiConfiguration?.anthropicApiKeyUseEnvVar && apiKeyEnvVarExists)
-
-	const handleUseApiKeyEnvVarChange = (checked: boolean) => {
-		setUseApiKeyEnvVar(checked)
-		setApiConfigurationField("anthropicApiKeyUseEnvVar", checked)
-	}
-
 	return (
 		<>
-			<VSCodeTextField
-				value={apiConfiguration?.apiKey || ""}
-				type="password"
-				onInput={handleInputChange("apiKey")}
-				placeholder={t("settings:placeholders.apiKey")}
-				className="w-full"
-				disabled={useApiKeyEnvVar}>
-				<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
-			</VSCodeTextField>
-			<div className="text-sm text-vscode-descriptionForeground -mt-2">
-				{t("settings:providers.apiKeyStorageNotice")}
-			</div>
-			<Checkbox
-				checked={useApiKeyEnvVar}
-				onChange={handleUseApiKeyEnvVarChange}
-				className="mb-2"
-				disabled={!apiKeyEnvVarExists}>
-				{t("settings:providers.apiKeyUseEnvVar", { name: "ANTHROPIC_API_KEY"})}
-			</Checkbox>
-			{(!(apiConfiguration?.apiKey || apiConfiguration?.anthropicApiKeyUseEnvVar)) && (
-				<VSCodeButtonLink href="https://console.anthropic.com/settings/keys" appearance="secondary">
-					{t("settings:providers.getAnthropicApiKey")}
-				</VSCodeButtonLink>
-			)}
+			<ApiKey
+				apiKey={apiConfiguration?.apiKey || ""}
+				apiKeyEnvVar="ANTHROPIC_API_KEY"
+				apiKeyUseEnvVar={!!apiConfiguration?.anthropicApiKeyUseEnvVar}
+				setApiKey={(value: string) => setApiConfigurationField("apiKey", value)}
+				setApiKeyUseEnvVar={(value: boolean) => setApiConfigurationField("anthropicApiKeyUseEnvVar", value)}
+				apiKeyLabel={t("settings:providers.anthropicApiKey")}
+				getApiKeyUrl="https://console.anthropic.com/settings/keys"
+				getApiKeyLabel={t("settings:providers.getAnthropicApiKey")}
+			/>
 			<div>
 				<Checkbox
 					checked={anthropicBaseUrlSelected}