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

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

@@ -6,9 +6,7 @@ import {
 	bedrockDefaultModelId,
 	bedrockModels,
 	geminiModels,
-	internationalQwenModels,
 	liteLlmModelInfoSaneDefaults,
-	mainlandQwenModels,
 	ModelInfo,
 	nebiusModels,
 } from "@shared/api"
@@ -46,6 +44,7 @@ import { AskSageProvider } from "./providers/AskSageProvider"
 import { OpenAINativeProvider } from "./providers/OpenAINative"
 import { GeminiProvider } from "./providers/GeminiProvider"
 import { DoubaoProvider } from "./providers/DoubaoProvider"
+import { QwenProvider } from "./providers/QwenProvider"
 import { VertexProvider } from "./providers/VertexProvider"
 import GeminiCliProvider from "./providers/GeminiCliProvider"
 import { RequestyProvider } from "./providers/RequestyProvider"
@@ -64,21 +63,6 @@ interface ApiOptionsProps {
 	saveImmediately?: boolean // Add prop to control immediate saving
 }
 
-const SUPPORTED_THINKING_MODELS: Record<string, string[]> = {
-	qwen: [
-		"qwen3-235b-a22b",
-		"qwen3-32b",
-		"qwen3-30b-a3b",
-		"qwen3-14b",
-		"qwen3-8b",
-		"qwen3-4b",
-		"qwen3-1.7b",
-		"qwen3-0.6b",
-		"qwen-plus-latest",
-		"qwen-turbo-latest",
-	],
-}
-
 // This is necessary to ensure dropdown opens downward, important for when this is used in popup
 export const DROPDOWN_Z_INDEX = OPENROUTER_MODEL_PICKER_Z_INDEX + 2 // Higher than the OpenRouterModelPicker's and ModelSelectorTooltip's z-index
 
@@ -120,7 +104,6 @@ const ApiOptions = ({
 	const [modelConfigurationSelected, setModelConfigurationSelected] = useState(false)
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
 	const [providerSortingSelected, setProviderSortingSelected] = useState(!!apiConfiguration?.openRouterProviderSorting)
-	const [reasoningEffortSelected, setReasoningEffortSelected] = useState(!!apiConfiguration?.reasoningEffort)
 
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		const newValue = event.target.value
@@ -327,60 +310,14 @@ const ApiOptions = ({
 				/>
 			)}
 
-			{selectedProvider === "qwen" && (
-				<div>
-					<DropdownContainer className="dropdown-container" style={{ position: "inherit" }}>
-						<label htmlFor="qwen-line-provider">
-							<span style={{ fontWeight: 500, marginTop: 5 }}>Alibaba API Line</span>
-						</label>
-						<VSCodeDropdown
-							id="qwen-line-provider"
-							value={apiConfiguration?.qwenApiLine || "china"}
-							onChange={handleInputChange("qwenApiLine")}
-							style={{
-								minWidth: 130,
-								position: "relative",
-							}}>
-							<VSCodeOption value="china">China API</VSCodeOption>
-							<VSCodeOption value="international">International API</VSCodeOption>
-						</VSCodeDropdown>
-					</DropdownContainer>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: 3,
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						Please select the appropriate API interface based on your location. If you are in China, choose the China
-						API interface. Otherwise, choose the International API interface.
-					</p>
-					<VSCodeTextField
-						value={apiConfiguration?.qwenApiKey || ""}
-						style={{ width: "100%" }}
-						type="password"
-						onInput={handleInputChange("qwenApiKey")}
-						placeholder="Enter API Key...">
-						<span style={{ fontWeight: 500 }}>Qwen 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?.qwenApiKey && (
-							<VSCodeLink
-								href="https://bailian.console.aliyun.com/"
-								style={{
-									display: "inline",
-									fontSize: "inherit",
-								}}>
-								You can get a Qwen API key by signing up here.
-							</VSCodeLink>
-						)}
-					</p>
-				</div>
+			{apiConfiguration && selectedProvider === "qwen" && (
+				<QwenProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+					setApiConfiguration={setApiConfiguration}
+				/>
 			)}
 
 			{apiConfiguration && selectedProvider === "doubao" && (
@@ -1250,6 +1187,7 @@ const ApiOptions = ({
 				selectedProvider !== "openai-native" &&
 				selectedProvider !== "gemini" &&
 				selectedProvider !== "doubao" &&
+				selectedProvider !== "qwen" &&
 				selectedProvider !== "vertex" &&
 				selectedProvider !== "gemini-cli" &&
 				selectedProvider !== "fireworks" &&
@@ -1262,21 +1200,8 @@ const ApiOptions = ({
 							<label htmlFor="model-id">
 								<span style={{ fontWeight: 500 }}>Model</span>
 							</label>
-							{selectedProvider === "qwen" &&
-								createDropdown(
-									apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels,
-								)}
 							{selectedProvider === "nebius" && createDropdown(nebiusModels)}
 						</DropdownContainer>
-
-						{SUPPORTED_THINKING_MODELS[selectedProvider]?.includes(selectedModelId) && (
-							<ThinkingBudgetSlider
-								apiConfiguration={apiConfiguration}
-								setApiConfiguration={setApiConfiguration}
-								maxBudget={selectedModelInfo.thinkingConfig?.maxBudget}
-							/>
-						)}
-
 						<ModelInfoView
 							selectedModelId={selectedModelId}
 							modelInfo={selectedModelInfo}

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

@@ -0,0 +1,108 @@
+import { ApiConfiguration, internationalQwenModels, mainlandQwenModels } from "@shared/api"
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
+import { ApiKeyField } from "../common/ApiKeyField"
+import { ModelSelector, DropdownContainer } from "../common/ModelSelector"
+import { ModelInfoView } from "../common/ModelInfoView"
+import { normalizeApiConfiguration } from "../utils/providerUtils"
+import ThinkingBudgetSlider from "../ThinkingBudgetSlider"
+import { DROPDOWN_Z_INDEX } from "../ApiOptions"
+
+const SUPPORTED_THINKING_MODELS = [
+	"qwen3-235b-a22b",
+	"qwen3-32b",
+	"qwen3-30b-a3b",
+	"qwen3-14b",
+	"qwen3-8b",
+	"qwen3-4b",
+	"qwen3-1.7b",
+	"qwen3-0.6b",
+	"qwen-plus-latest",
+	"qwen-turbo-latest",
+]
+
+/**
+ * Props for the QwenProvider component
+ */
+interface QwenProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+	setApiConfiguration: (config: ApiConfiguration) => void
+}
+
+/**
+ * The Alibaba Qwen provider configuration component
+ */
+export const QwenProvider = ({
+	apiConfiguration,
+	handleInputChange,
+	showModelOptions,
+	isPopup,
+	setApiConfiguration,
+}: QwenProviderProps) => {
+	// Get the normalized configuration
+	const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration)
+
+	// Determine which models to use based on API line selection
+	const qwenModels = apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels
+
+	return (
+		<div>
+			<DropdownContainer className="dropdown-container" style={{ position: "inherit" }}>
+				<label htmlFor="qwen-line-provider">
+					<span style={{ fontWeight: 500, marginTop: 5 }}>Alibaba API Line</span>
+				</label>
+				<VSCodeDropdown
+					id="qwen-line-provider"
+					value={apiConfiguration?.qwenApiLine || "china"}
+					onChange={handleInputChange("qwenApiLine")}
+					style={{
+						minWidth: 130,
+						position: "relative",
+					}}>
+					<VSCodeOption value="china">China API</VSCodeOption>
+					<VSCodeOption value="international">International API</VSCodeOption>
+				</VSCodeDropdown>
+			</DropdownContainer>
+			<p
+				style={{
+					fontSize: "12px",
+					marginTop: 3,
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				Please select the appropriate API interface based on your location. If you are in China, choose the China API
+				interface. Otherwise, choose the International API interface.
+			</p>
+
+			<ApiKeyField
+				value={apiConfiguration?.qwenApiKey || ""}
+				onChange={handleInputChange("qwenApiKey")}
+				providerName="Qwen"
+				signupUrl="https://bailian.console.aliyun.com/"
+			/>
+
+			{showModelOptions && (
+				<>
+					<ModelSelector
+						models={qwenModels}
+						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>
+	)
+}