Merge branch 'main' into to/refactor-providers-6

Co-authored-by: StvLz <lizarazo.steven@gmail.com>

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

@@ -7,15 +7,12 @@ import {
 	bedrockModels,
 	cerebrasModels,
 	claudeCodeModels,
-	doubaoModels,
 	geminiModels,
 	internationalQwenModels,
 	liteLlmModelInfoSaneDefaults,
 	mainlandQwenModels,
 	ModelInfo,
 	nebiusModels,
-	vertexGlobalModels,
-	vertexModels,
 	xaiModels,
 	sapAiCoreModels,
 } from "@shared/api"
@@ -54,6 +51,8 @@ import { AnthropicProvider } from "./providers/AnthropicProvider"
 import { AskSageProvider } from "./providers/AskSageProvider"
 import { OpenAINativeProvider } from "./providers/OpenAINative"
 import { GeminiProvider } from "./providers/GeminiProvider"
+import { DoubaoProvider } from "./providers/DoubaoProvider"
+import { VertexProvider } from "./providers/VertexProvider"
 import GeminiCliProvider from "./providers/GeminiCliProvider"
 
 interface ApiOptionsProps {
@@ -65,14 +64,6 @@ interface ApiOptionsProps {
 }
 
 const SUPPORTED_THINKING_MODELS: Record<string, string[]> = {
-	vertex: [
-		"claude-3-7-sonnet@20250219",
-		"claude-sonnet-4@20250514",
-		"claude-opus-4@20250514",
-		"gemini-2.5-flash-preview-05-20",
-		"gemini-2.5-flash-preview-04-17",
-		"gemini-2.5-pro-preview-06-05",
-	],
 	qwen: [
 		"qwen3-235b-a22b",
 		"qwen3-32b",
@@ -88,7 +79,7 @@ const SUPPORTED_THINKING_MODELS: Record<string, string[]> = {
 }
 
 // This is necessary to ensure dropdown opens downward, important for when this is used in popup
-const DROPDOWN_Z_INDEX = OPENROUTER_MODEL_PICKER_Z_INDEX + 2 // Higher than the OpenRouterModelPicker's and ModelSelectorTooltip's z-index
+export const DROPDOWN_Z_INDEX = OPENROUTER_MODEL_PICKER_Z_INDEX + 2 // Higher than the OpenRouterModelPicker's and ModelSelectorTooltip's z-index
 
 export const DropdownContainer = styled.div<{ zIndex?: number }>`
 	position: relative;
@@ -403,35 +394,13 @@ const ApiOptions = ({
 				</div>
 			)}
 
-			{selectedProvider === "doubao" && (
-				<div>
-					<VSCodeTextField
-						value={apiConfiguration?.doubaoApiKey || ""}
-						style={{ width: "100%" }}
-						type="password"
-						onInput={handleInputChange("doubaoApiKey")}
-						placeholder="Enter API Key...">
-						<span style={{ fontWeight: 500 }}>Doubao API Key</span>
-					</VSCodeTextField>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: 3,
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						This key is stored locally and only used to make API requests from this extension.
-						{!apiConfiguration?.doubaoApiKey && (
-							<VSCodeLink
-								href="https://console.volcengine.com/home"
-								style={{
-									display: "inline",
-									fontSize: "inherit",
-								}}>
-								You can get a Doubao API key by signing up here.
-							</VSCodeLink>
-						)}
-					</p>
-				</div>
+			{apiConfiguration && selectedProvider === "doubao" && (
+				<DoubaoProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+				/>
 			)}
 
 			{apiConfiguration && selectedProvider === "mistral" && (
@@ -760,57 +729,14 @@ const ApiOptions = ({
 				</div>
 			)}
 
-			{apiConfiguration?.apiProvider === "vertex" && (
-				<div
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						gap: 5,
-					}}>
-					<VSCodeTextField
-						value={apiConfiguration?.vertexProjectId || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("vertexProjectId")}
-						placeholder="Enter Project ID...">
-						<span style={{ fontWeight: 500 }}>Google Cloud Project ID</span>
-					</VSCodeTextField>
-					<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 1} className="dropdown-container">
-						<label htmlFor="vertex-region-dropdown">
-							<span style={{ fontWeight: 500 }}>Google Cloud Region</span>
-						</label>
-						<VSCodeDropdown
-							id="vertex-region-dropdown"
-							value={apiConfiguration?.vertexRegion || ""}
-							style={{ width: "100%" }}
-							onChange={handleInputChange("vertexRegion")}>
-							<VSCodeOption value="">Select a region...</VSCodeOption>
-							<VSCodeOption value="us-east5">us-east5</VSCodeOption>
-							<VSCodeOption value="us-central1">us-central1</VSCodeOption>
-							<VSCodeOption value="europe-west1">europe-west1</VSCodeOption>
-							<VSCodeOption value="europe-west4">europe-west4</VSCodeOption>
-							<VSCodeOption value="asia-southeast1">asia-southeast1</VSCodeOption>
-							<VSCodeOption value="global">global</VSCodeOption>
-						</VSCodeDropdown>
-					</DropdownContainer>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: "5px",
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						To use Google Cloud Vertex AI, you need to
-						<VSCodeLink
-							href="https://cloud.google.com/vertex-ai/generative-ai/docs/partner-models/use-claude#before_you_begin"
-							style={{ display: "inline", fontSize: "inherit" }}>
-							{"1) create a Google Cloud account › enable the Vertex AI API › enable the desired Claude models,"}
-						</VSCodeLink>{" "}
-						<VSCodeLink
-							href="https://cloud.google.com/docs/authentication/provide-credentials-adc#google-idp"
-							style={{ display: "inline", fontSize: "inherit" }}>
-							{"2) install the Google Cloud CLI › configure Application Default Credentials."}
-						</VSCodeLink>
-					</p>
-				</div>
+			{apiConfiguration && selectedProvider === "vertex" && (
+				<VertexProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+					setApiConfiguration={setApiConfiguration}
+				/>
 			)}
 
 			{apiConfiguration && selectedProvider === "gemini" && (
@@ -1602,6 +1528,8 @@ const ApiOptions = ({
 				selectedProvider !== "sambanova" &&
 				selectedProvider !== "openai-native" &&
 				selectedProvider !== "gemini" &&
+				selectedProvider !== "doubao" &&
+				selectedProvider !== "vertex" &&
 				selectedProvider !== "gemini-cli" &&
 				showModelOptions && (
 					<>
@@ -1610,13 +1538,10 @@ const ApiOptions = ({
 								<span style={{ fontWeight: 500 }}>Model</span>
 							</label>
 							{selectedProvider === "claude-code" && createDropdown(claudeCodeModels)}
-							{selectedProvider === "vertex" &&
-								createDropdown(apiConfiguration?.vertexRegion === "global" ? vertexGlobalModels : vertexModels)}
 							{selectedProvider === "qwen" &&
 								createDropdown(
 									apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels,
 								)}
-							{selectedProvider === "doubao" && createDropdown(doubaoModels)}
 							{selectedProvider === "xai" && createDropdown(xaiModels)}
 							{selectedProvider === "cerebras" && createDropdown(cerebrasModels)}
 							{selectedProvider === "nebius" && createDropdown(nebiusModels)}

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

@@ -0,0 +1,47 @@
+import { ApiConfiguration, doubaoModels } from "@shared/api"
+import { ApiKeyField } from "../common/ApiKeyField"
+import { ModelSelector } from "../common/ModelSelector"
+import { ModelInfoView } from "../common/ModelInfoView"
+import { normalizeApiConfiguration } from "../utils/providerUtils"
+
+/**
+ * Props for the DoubaoProvider component
+ */
+interface DoubaoProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+}
+
+/**
+ * The ByteDance Doubao provider configuration component
+ */
+export const DoubaoProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: DoubaoProviderProps) => {
+	// Get the normalized configuration
+	const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration)
+
+	return (
+		<div>
+			<ApiKeyField
+				value={apiConfiguration?.doubaoApiKey || ""}
+				onChange={handleInputChange("doubaoApiKey")}
+				providerName="Doubao"
+				signupUrl="https://console.volcengine.com/home"
+			/>
+
+			{showModelOptions && (
+				<>
+					<ModelSelector
+						models={doubaoModels}
+						selectedModelId={selectedModelId}
+						onChange={handleInputChange("apiModelId")}
+						label="Model"
+					/>
+
+					<ModelInfoView selectedModelId={selectedModelId} modelInfo={selectedModelInfo} isPopup={isPopup} />
+				</>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,121 @@
+import { ApiConfiguration, vertexGlobalModels, vertexModels } from "@shared/api"
+import { VSCodeTextField, VSCodeDropdown, VSCodeOption, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { ModelSelector } from "../common/ModelSelector"
+import { ModelInfoView } from "../common/ModelInfoView"
+import { normalizeApiConfiguration } from "../utils/providerUtils"
+import { DropdownContainer, DROPDOWN_Z_INDEX } from "../ApiOptions"
+import ThinkingBudgetSlider from "../ThinkingBudgetSlider"
+
+/**
+ * Props for the VertexProvider component
+ */
+interface VertexProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+	setApiConfiguration: (config: ApiConfiguration) => void
+}
+
+// Vertex models that support thinking
+const SUPPORTED_THINKING_MODELS = [
+	"claude-3-7-sonnet@20250219",
+	"claude-sonnet-4@20250514",
+	"claude-opus-4@20250514",
+	"gemini-2.5-flash",
+	"gemini-2.5-pro",
+]
+
+/**
+ * The GCP Vertex AI provider configuration component
+ */
+export const VertexProvider = ({
+	apiConfiguration,
+	handleInputChange,
+	showModelOptions,
+	isPopup,
+	setApiConfiguration,
+}: VertexProviderProps) => {
+	// Get the normalized configuration
+	const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration)
+
+	// Determine which models to use based on region
+	const modelsToUse = apiConfiguration?.vertexRegion === "global" ? vertexGlobalModels : vertexModels
+
+	return (
+		<div
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: 5,
+			}}>
+			<VSCodeTextField
+				value={apiConfiguration?.vertexProjectId || ""}
+				style={{ width: "100%" }}
+				onInput={handleInputChange("vertexProjectId")}
+				placeholder="Enter Project ID...">
+				<span style={{ fontWeight: 500 }}>Google Cloud Project ID</span>
+			</VSCodeTextField>
+
+			<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 1} className="dropdown-container">
+				<label htmlFor="vertex-region-dropdown">
+					<span style={{ fontWeight: 500 }}>Google Cloud Region</span>
+				</label>
+				<VSCodeDropdown
+					id="vertex-region-dropdown"
+					value={apiConfiguration?.vertexRegion || ""}
+					style={{ width: "100%" }}
+					onChange={handleInputChange("vertexRegion")}>
+					<VSCodeOption value="">Select a region...</VSCodeOption>
+					<VSCodeOption value="us-east5">us-east5</VSCodeOption>
+					<VSCodeOption value="us-central1">us-central1</VSCodeOption>
+					<VSCodeOption value="europe-west1">europe-west1</VSCodeOption>
+					<VSCodeOption value="europe-west4">europe-west4</VSCodeOption>
+					<VSCodeOption value="asia-southeast1">asia-southeast1</VSCodeOption>
+					<VSCodeOption value="global">global</VSCodeOption>
+				</VSCodeDropdown>
+			</DropdownContainer>
+
+			<p
+				style={{
+					fontSize: "12px",
+					marginTop: "5px",
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				To use Google Cloud Vertex AI, you need to
+				<VSCodeLink
+					href="https://cloud.google.com/vertex-ai/generative-ai/docs/partner-models/use-claude#before_you_begin"
+					style={{ display: "inline", fontSize: "inherit" }}>
+					{"1) create a Google Cloud account › enable the Vertex AI API › enable the desired Claude models,"}
+				</VSCodeLink>{" "}
+				<VSCodeLink
+					href="https://cloud.google.com/docs/authentication/provide-credentials-adc#google-idp"
+					style={{ display: "inline", fontSize: "inherit" }}>
+					{"2) install the Google Cloud CLI › configure Application Default Credentials."}
+				</VSCodeLink>
+			</p>
+
+			{showModelOptions && (
+				<>
+					<ModelSelector
+						models={modelsToUse}
+						selectedModelId={selectedModelId}
+						onChange={handleInputChange("apiModelId")}
+						label="Model"
+						zIndex={DROPDOWN_Z_INDEX - 2}
+					/>
+
+					{SUPPORTED_THINKING_MODELS.includes(selectedModelId) && (
+						<ThinkingBudgetSlider
+							apiConfiguration={apiConfiguration}
+							setApiConfiguration={setApiConfiguration}
+							maxBudget={selectedModelInfo.thinkingConfig?.maxBudget}
+						/>
+					)}
+
+					<ModelInfoView selectedModelId={selectedModelId} modelInfo={selectedModelInfo} isPopup={isPopup} />
+				</>
+			)}
+		</div>
+	)
+}