Add Azure API version option

src/api/openai.ts

@@ -17,7 +17,8 @@ export class OpenAiHandler implements ApiHandler {
 				apiKey: this.options.openAiApiKey,
 				// https://learn.microsoft.com/en-us/azure/ai-services/openai/api-version-deprecation
 				// https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#api-specs
-				apiVersion: "2024-08-01-preview",
+				// (make sure to update API options placeholder)
+				apiVersion: this.options.azureApiVersion || "2024-08-01-preview",
 			})
 		} else {
 			this.client = new OpenAI({

src/providers/ClaudeDevProvider.ts

@@ -44,6 +44,7 @@ type GlobalStateKey =
 	| "ollamaModelId"
 	| "ollamaBaseUrl"
 	| "anthropicBaseUrl"
+	| "azureApiVersion"
 
 export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	public static readonly sideBarId = "claude-dev.SidebarProvider" // used in package.json as the view's id. This value cannot be changed due to how vscode caches views based on their id, and updating the id would break existing instances of the extension.
@@ -346,6 +347,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 								anthropicBaseUrl,
 								geminiApiKey,
 								openAiNativeApiKey,
+								azureApiVersion,
 							} = message.apiConfiguration
 							await this.updateGlobalState("apiProvider", apiProvider)
 							await this.updateGlobalState("apiModelId", apiModelId)
@@ -365,6 +367,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 							await this.updateGlobalState("anthropicBaseUrl", anthropicBaseUrl)
 							await this.storeSecret("geminiApiKey", geminiApiKey)
 							await this.storeSecret("openAiNativeApiKey", openAiNativeApiKey)
+							await this.updateGlobalState("azureApiVersion", azureApiVersion)
 							this.claudeDev?.updateApi(message.apiConfiguration)
 						}
 						await this.postStateToWebview()
@@ -691,6 +694,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			anthropicBaseUrl,
 			geminiApiKey,
 			openAiNativeApiKey,
+			azureApiVersion,
 			lastShownAnnouncementId,
 			customInstructions,
 			alwaysAllowReadOnly,
@@ -714,6 +718,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("anthropicBaseUrl") as Promise<string | undefined>,
 			this.getSecret("geminiApiKey") as Promise<string | undefined>,
 			this.getSecret("openAiNativeApiKey") as Promise<string | undefined>,
+			this.getGlobalState("azureApiVersion") as Promise<string | undefined>,
 			this.getGlobalState("lastShownAnnouncementId") as Promise<string | undefined>,
 			this.getGlobalState("customInstructions") as Promise<string | undefined>,
 			this.getGlobalState("alwaysAllowReadOnly") as Promise<boolean | undefined>,
@@ -754,6 +759,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 				anthropicBaseUrl,
 				geminiApiKey,
 				openAiNativeApiKey,
+				azureApiVersion,
 			},
 			lastShownAnnouncementId,
 			customInstructions,

src/shared/api.ts

@@ -26,6 +26,7 @@ export interface ApiHandlerOptions {
 	ollamaBaseUrl?: string
 	geminiApiKey?: string
 	openAiNativeApiKey?: string
+	azureApiVersion?: string
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {

webview-ui/src/components/ApiOptions.tsx

@@ -40,6 +40,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage }: ApiOptionsProps) => {
 	const { apiConfiguration, setApiConfiguration, uriScheme } = useExtensionState()
 	const [ollamaModels, setOllamaModels] = useState<string[]>([])
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
+	const [azureApiVersionSelected, setAzureApiVersionSelected] = useState(!!apiConfiguration?.azureApiVersion)
 
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		setApiConfiguration({ ...apiConfiguration, [field]: event.target.value })
@@ -414,10 +415,31 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage }: ApiOptionsProps) => {
 						placeholder={"Enter Model ID..."}>
 						<span style={{ fontWeight: 500 }}>Model ID</span>
 					</VSCodeTextField>
+					<div style={{ marginTop: 2 }}>
+						<VSCodeCheckbox
+							checked={azureApiVersionSelected}
+							onChange={(e: any) => {
+								const isChecked = e.target.checked === true
+								setAzureApiVersionSelected(isChecked)
+								if (!isChecked) {
+									setApiConfiguration({ ...apiConfiguration, azureApiVersion: "" })
+								}
+							}}>
+							Set Azure API version
+						</VSCodeCheckbox>
+					</div>
+					{azureApiVersionSelected && (
+						<VSCodeTextField
+							value={apiConfiguration?.azureApiVersion || ""}
+							style={{ width: "100%", marginTop: 3 }}
+							onInput={handleInputChange("azureApiVersion")}
+							placeholder="Default: 2024-08-01-preview"
+						/>
+					)}
 					<p
 						style={{
 							fontSize: "12px",
-							marginTop: "5px",
+							marginTop: 3,
 							color: "var(--vscode-descriptionForeground)",
 						}}>
 						You can use any OpenAI compatible API with models that support tool use.{" "}