feat: add Azure provider UI component and translations

Author: roomote

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

@@ -73,6 +73,7 @@ import {
 
 import {
 	Anthropic,
+	Azure,
 	Baseten,
 	Bedrock,
 	Cerebras,
@@ -557,6 +558,14 @@ const ApiOptions = ({
 				/>
 			)}
 
+			{selectedProvider === "azure" && (
+				<Azure
+					apiConfiguration={apiConfiguration}
+					setApiConfigurationField={setApiConfigurationField}
+					simplifySettings={fromWelcomeView}
+				/>
+			)}
+
 			{selectedProvider === "openai-codex" && (
 				<OpenAICodex
 					apiConfiguration={apiConfiguration}

webview-ui/src/components/settings/constants.ts

@@ -50,6 +50,7 @@ export const PROVIDERS = [
 	{ value: "openrouter", label: "OpenRouter", proxy: false },
 	{ value: "deepinfra", label: "DeepInfra", proxy: false },
 	{ value: "anthropic", label: "Anthropic", proxy: false },
+	{ value: "azure", label: "Azure OpenAI", proxy: false },
 	{ value: "cerebras", label: "Cerebras", proxy: false },
 	{ value: "gemini", label: "Google Gemini", proxy: false },
 	{ value: "doubao", label: "Doubao", proxy: false },

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

@@ -0,0 +1,83 @@
+import { useCallback } from "react"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+
+import { type ProviderSettings, azureOpenAiDefaultApiVersion } from "@roo-code/types"
+
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+
+import { inputEventTransform } from "../transforms"
+
+type AzureProps = {
+	apiConfiguration: ProviderSettings
+	setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
+	simplifySettings?: boolean
+}
+
+export const Azure = ({ apiConfiguration, setApiConfigurationField }: AzureProps) => {
+	const { t } = useAppTranslation()
+
+	const handleInputChange = useCallback(
+		<K extends keyof ProviderSettings, E>(
+			field: K,
+			transform: (event: E) => ProviderSettings[K] = inputEventTransform,
+		) =>
+			(event: E | Event) => {
+				setApiConfigurationField(field, transform(event as E))
+			},
+		[setApiConfigurationField],
+	)
+
+	return (
+		<>
+			<VSCodeTextField
+				value={apiConfiguration?.azureResourceName || ""}
+				onInput={handleInputChange("azureResourceName")}
+				placeholder={t("settings:placeholders.azureResourceName")}
+				className="w-full">
+				<label className="block font-medium mb-1">{t("settings:providers.azureResourceName")}</label>
+			</VSCodeTextField>
+			<div className="text-sm text-vscode-descriptionForeground -mt-2">
+				{t("settings:providers.azureResourceNameDescription")}
+			</div>
+			<VSCodeTextField
+				value={apiConfiguration?.azureDeploymentName || ""}
+				onInput={handleInputChange("azureDeploymentName")}
+				placeholder={t("settings:placeholders.azureDeploymentName")}
+				className="w-full">
+				<label className="block font-medium mb-1">{t("settings:providers.azureDeploymentName")}</label>
+			</VSCodeTextField>
+			<div className="text-sm text-vscode-descriptionForeground -mt-2">
+				{t("settings:providers.azureDeploymentNameDescription")}
+			</div>
+			<VSCodeTextField
+				value={apiConfiguration?.azureApiKey || ""}
+				type="password"
+				onInput={handleInputChange("azureApiKey")}
+				placeholder={t("settings:placeholders.apiKey")}
+				className="w-full">
+				<label className="block font-medium mb-1">{t("settings:providers.azureApiKey")}</label>
+			</VSCodeTextField>
+			<div className="text-sm text-vscode-descriptionForeground -mt-2">
+				{t("settings:providers.apiKeyStorageNotice")}
+			</div>
+			<VSCodeTextField
+				value={apiConfiguration?.azureApiVersion || ""}
+				onInput={handleInputChange("azureApiVersion")}
+				placeholder={`Default: ${azureOpenAiDefaultApiVersion}`}
+				className="w-full">
+				<label className="block font-medium mb-1">{t("settings:providers.azureApiVersion")}</label>
+			</VSCodeTextField>
+			<div className="text-sm text-vscode-descriptionForeground -mt-2">
+				{t("settings:providers.azureApiVersionDescription")}
+			</div>
+			{!apiConfiguration?.azureApiKey && (
+				<VSCodeButtonLink
+					href="https://azure.microsoft.com/en-us/products/ai-services/openai-service"
+					appearance="secondary">
+					{t("settings:providers.getAzureApiKey")}
+				</VSCodeButtonLink>
+			)}
+		</>
+	)
+}

webview-ui/src/components/settings/providers/index.ts

@@ -1,4 +1,5 @@
 export { Anthropic } from "./Anthropic"
+export { Azure } from "./Azure"
 export { Bedrock } from "./Bedrock"
 export { Cerebras } from "./Cerebras"
 export { Chutes } from "./Chutes"

webview-ui/src/i18n/locales/en/settings.json

@@ -404,6 +404,14 @@
 		"getBasetenApiKey": "Get Baseten API Key",
 		"cerebrasApiKey": "Cerebras API Key",
 		"getCerebrasApiKey": "Get Cerebras API Key",
+		"azureResourceName": "Azure Resource Name",
+		"azureResourceNameDescription": "The name of your Azure OpenAI resource (e.g., 'my-openai-resource').",
+		"azureDeploymentName": "Azure Deployment Name",
+		"azureDeploymentNameDescription": "The name of your model deployment within the resource.",
+		"azureApiKey": "Azure API Key",
+		"getAzureApiKey": "Get Azure OpenAI Access",
+		"azureApiVersion": "Azure API Version",
+		"azureApiVersionDescription": "The API version to use (e.g., '2024-10-21'). Leave empty for the default.",
 		"chutesApiKey": "Chutes API Key",
 		"getChutesApiKey": "Get Chutes API Key",
 		"fireworksApiKey": "Fireworks API Key",
@@ -998,6 +1006,8 @@
 		"projectId": "Enter Project ID...",
 		"customArn": "Enter ARN (e.g. arn:aws:bedrock:us-east-1:123456789012:foundation-model/my-model)",
 		"baseUrl": "Enter base URL...",
+		"azureResourceName": "e.g. my-openai-resource",
+		"azureDeploymentName": "e.g. gpt-4o",
 		"modelId": {
 			"lmStudio": "e.g. meta-llama-3.1-8b-instruct",
 			"lmStudioDraft": "e.g. lmstudio-community/llama-3.2-1b-instruct",