feat: update Azure AI handler and model picker for improved configuration and error handling

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

@@ -39,6 +39,7 @@ import OpenRouterModelPicker, {
 	OPENROUTER_MODEL_PICKER_Z_INDEX,
 } from "./OpenRouterModelPicker"
 import OpenAiModelPicker from "./OpenAiModelPicker"
+import AzureAiModelPicker from "./AzureAiModelPicker"
 import GlamaModelPicker from "./GlamaModelPicker"
 
 interface ApiOptionsProps {
@@ -138,6 +139,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 					options={[
 						{ value: "openrouter", label: "OpenRouter" },
 						{ value: "anthropic", label: "Anthropic" },
+						{ value: "azure-ai", label: "Azure AI Model Inference" },
 						{ value: "gemini", label: "Google Gemini" },
 						{ value: "deepseek", label: "DeepSeek" },
 						{ value: "openai-native", label: "OpenAI" },
@@ -208,6 +210,8 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 				</div>
 			)}
 
+			{selectedProvider === "azure-ai" && <AzureAiModelPicker />}
+
 			{selectedProvider === "glama" && (
 				<div>
 					<VSCodeTextField
@@ -1556,6 +1560,12 @@ export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration) {
 				selectedModelId: apiConfiguration?.openRouterModelId || openRouterDefaultModelId,
 				selectedModelInfo: apiConfiguration?.openRouterModelInfo || openRouterDefaultModelInfo,
 			}
+		case "azure-ai":
+			return {
+				selectedProvider: provider,
+				selectedModelId: apiConfiguration?.apiModelId || "",
+				selectedModelInfo: azureAiModelInfoSaneDefaults,
+			}
 		case "openai":
 			return {
 				selectedProvider: provider,

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

@@ -1,56 +1,145 @@
 import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { memo } from "react"
 import { useExtensionState } from "../../context/ExtensionStateContext"
+import { Pane } from "vscrui"
+import { azureAiModelInfoSaneDefaults } from "../../../../src/shared/api"
 
 const AzureAiModelPicker: React.FC = () => {
 	const { apiConfiguration, handleInputChange } = useExtensionState()
 
 	return (
-		<>
+		<div style={{ display: "flex", flexDirection: "column", rowGap: "5px" }}>
 			<VSCodeTextField
 				value={apiConfiguration?.azureAiEndpoint || ""}
 				style={{ width: "100%" }}
 				type="url"
-				onInput={handleInputChange("azureAiEndpoint")}
-				placeholder="https://ai-services-resource.services.ai.azure.com/models">
-				<span style={{ fontWeight: 500 }}>Azure AI Endpoint</span>
+				onChange={handleInputChange("azureAiEndpoint")}
+				placeholder="https://your-endpoint.region.inference.ai.azure.com">
+				<span style={{ fontWeight: 500 }}>Base URL</span>
 			</VSCodeTextField>
 
 			<VSCodeTextField
 				value={apiConfiguration?.azureAiKey || ""}
 				style={{ width: "100%" }}
 				type="password"
-				onInput={handleInputChange("azureAiKey")}
+				onChange={handleInputChange("azureAiKey")}
 				placeholder="Enter API Key...">
-				<span style={{ fontWeight: 500 }}>Azure AI Key</span>
+				<span style={{ fontWeight: 500 }}>API Key</span>
 			</VSCodeTextField>
 
 			<VSCodeTextField
 				value={apiConfiguration?.apiModelId || ""}
 				style={{ width: "100%" }}
 				type="text"
-				onInput={handleInputChange("apiModelId")}
+				onChange={handleInputChange("apiModelId")}
 				placeholder="Enter model deployment name...">
-				<span style={{ fontWeight: 500 }}>Deployment Name</span>
+				<span style={{ fontWeight: 500 }}>Model Deployment Name</span>
 			</VSCodeTextField>
 
+			<Pane
+				title="Model Configuration"
+				open={false}
+				actions={[
+					{
+						iconName: "refresh",
+						onClick: () =>
+							handleInputChange("openAiCustomModelInfo")({
+								target: { value: azureAiModelInfoSaneDefaults },
+							}),
+					},
+				]}>
+				<div
+					style={{
+						padding: 15,
+						backgroundColor: "var(--vscode-editor-background)",
+					}}>
+					<p
+						style={{
+							fontSize: "12px",
+							color: "var(--vscode-descriptionForeground)",
+							margin: "0 0 15px 0",
+							lineHeight: "1.4",
+						}}>
+						Configure capabilities for your deployed model.
+					</p>
+
+					<div
+						style={{
+							backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+							padding: "12px",
+							borderRadius: "4px",
+							marginTop: "8px",
+						}}>
+						<span
+							style={{
+								fontSize: "11px",
+								fontWeight: 500,
+								color: "var(--vscode-editor-foreground)",
+								display: "block",
+								marginBottom: "10px",
+							}}>
+							Model Features
+						</span>
+
+						<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+							<VSCodeTextField
+								value={
+									apiConfiguration?.openAiCustomModelInfo?.contextWindow?.toString() ||
+									azureAiModelInfoSaneDefaults.contextWindow?.toString() ||
+									""
+								}
+								type="text"
+								style={{ width: "100%" }}
+								onChange={(e: any) => {
+									const parsed = parseInt(e.target.value)
+									handleInputChange("openAiCustomModelInfo")({
+										target: {
+											value: {
+												...(apiConfiguration?.openAiCustomModelInfo ||
+													azureAiModelInfoSaneDefaults),
+												contextWindow:
+													e.target.value === ""
+														? undefined
+														: isNaN(parsed)
+															? azureAiModelInfoSaneDefaults.contextWindow
+															: parsed,
+											},
+										},
+									})
+								}}
+								placeholder="e.g. 128000">
+								<span style={{ fontWeight: 500 }}>Context Window Size</span>
+							</VSCodeTextField>
+							<p
+								style={{
+									fontSize: "11px",
+									color: "var(--vscode-descriptionForeground)",
+									marginTop: "4px",
+								}}>
+								Total tokens the model can process in a single request.
+							</p>
+						</div>
+					</div>
+				</div>
+			</Pane>
+
 			<p
 				style={{
 					fontSize: "12px",
 					marginTop: "5px",
 					color: "var(--vscode-descriptionForeground)",
 				}}>
-				Configure your Azure AI Model Inference endpoint and model deployment. The API key is stored locally.
+				Configure your Azure AI Model Inference endpoint and model deployment. API keys are stored locally.
 				{!apiConfiguration?.azureAiKey && (
 					<VSCodeLink
 						href="https://learn.microsoft.com/azure/ai-foundry/model-inference/reference/reference-model-inference-chat-completions"
 						style={{ display: "inline", fontSize: "inherit" }}>
 						{" "}
-						Learn more about Azure AI Model Inference endpoints.
+						Learn more about Azure AI Model Inference.
 					</VSCodeLink>
 				)}
 			</p>
-		</>
+		</div>
 	)
 }