From 703cda767813f57827ccaf97e3c73dcdcddc6b01 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Sun, 2 Feb 2025 15:43:16 -0500
Subject: [PATCH] feat: add Azure AI model picker component for endpoint and
 key configuration

---
 .../settings/AzureAiModelPicker.tsx           | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 webview-ui/src/components/settings/AzureAiModelPicker.tsx

diff --git a/webview-ui/src/components/settings/AzureAiModelPicker.tsx b/webview-ui/src/components/settings/AzureAiModelPicker.tsx
new file mode 100644
index 0000000..81ea4e7
--- /dev/null
+++ b/webview-ui/src/components/settings/AzureAiModelPicker.tsx
@@ -0,0 +1,57 @@
+import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { memo } from "react"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+
+const AzureAiModelPicker: React.FC = () => {
+	const { apiConfiguration, handleInputChange } = useExtensionState()
+
+	return (
+		<>
+			<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>
+			</VSCodeTextField>
+
+			<VSCodeTextField
+				value={apiConfiguration?.azureAiKey || ""}
+				style={{ width: "100%" }}
+				type="password"
+				onInput={handleInputChange("azureAiKey")}
+				placeholder="Enter API Key...">
+				<span style={{ fontWeight: 500 }}>Azure AI Key</span>
+			</VSCodeTextField>
+
+			<VSCodeTextField
+				value={apiConfiguration?.apiModelId || ""}
+				style={{ width: "100%" }}
+				type="text"
+				onInput={handleInputChange("apiModelId")}
+				placeholder="Enter model deployment name...">
+				<span style={{ fontWeight: 500 }}>Deployment Name</span>
+			</VSCodeTextField>
+
+			<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.
+				{!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.
+					</VSCodeLink>
+				)}
+			</p>
+		</>
+	)
+}
+
+export default memo(AzureAiModelPicker)