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

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

@@ -5,7 +5,6 @@ import {
 	ApiConfiguration,
 	bedrockDefaultModelId,
 	bedrockModels,
-	claudeCodeModels,
 	geminiModels,
 	internationalQwenModels,
 	liteLlmModelInfoSaneDefaults,
@@ -54,6 +53,7 @@ import { FireworksProvider } from "./providers/FireworksProvider"
 import { XaiProvider } from "./providers/XaiProvider"
 import { CerebrasProvider } from "./providers/CerebrasProvider"
 import { OllamaProvider } from "./providers/OllamaProvider"
+import { ClaudeCodeProvider } from "./providers/ClaudeCodeProvider"
 import { SapAiCoreProvider } from "./providers/SapAiCoreProvider"
 
 interface ApiOptionsProps {
@@ -309,25 +309,13 @@ const ApiOptions = ({
 				/>
 			)}
 
-			{selectedProvider === "claude-code" && (
-				<div>
-					<VSCodeTextField
-						value={apiConfiguration?.claudeCodePath || ""}
-						style={{ width: "100%", marginTop: 3 }}
-						type="text"
-						onInput={handleInputChange("claudeCodePath")}
-						placeholder="Default: claude"
-					/>
-
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: 3,
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						Path to the Claude Code CLI.
-					</p>
-				</div>
+			{apiConfiguration && selectedProvider === "claude-code" && (
+				<ClaudeCodeProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+				/>
 			)}
 
 			{apiConfiguration && selectedProvider === "openai-native" && (
@@ -1248,6 +1236,7 @@ const ApiOptions = ({
 				selectedProvider !== "cline" &&
 				selectedProvider !== "anthropic" &&
 				selectedProvider !== "asksage" &&
+				selectedProvider !== "claude-code" &&
 				selectedProvider !== "openai" &&
 				selectedProvider !== "ollama" &&
 				selectedProvider !== "lmstudio" &&
@@ -1273,7 +1262,6 @@ const ApiOptions = ({
 							<label htmlFor="model-id">
 								<span style={{ fontWeight: 500 }}>Model</span>
 							</label>
-							{selectedProvider === "claude-code" && createDropdown(claudeCodeModels)}
 							{selectedProvider === "qwen" &&
 								createDropdown(
 									apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels,

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

@@ -0,0 +1,63 @@
+import { ApiConfiguration, claudeCodeModels } from "@shared/api"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { ModelSelector } from "../common/ModelSelector"
+import { ModelInfoView } from "../common/ModelInfoView"
+import { normalizeApiConfiguration } from "../utils/providerUtils"
+
+/**
+ * Props for the ClaudeCodeProvider component
+ */
+interface ClaudeCodeProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+}
+
+/**
+ * The Claude Code provider configuration component
+ */
+export const ClaudeCodeProvider = ({
+	apiConfiguration,
+	handleInputChange,
+	showModelOptions,
+	isPopup,
+}: ClaudeCodeProviderProps) => {
+	// Get the normalized configuration
+	const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration)
+
+	return (
+		<div>
+			<VSCodeTextField
+				value={apiConfiguration?.claudeCodePath || ""}
+				style={{ width: "100%", marginTop: 3 }}
+				type="text"
+				onInput={handleInputChange("claudeCodePath")}
+				placeholder="Default: claude">
+				<span style={{ fontWeight: 500 }}>Claude Code CLI Path</span>
+			</VSCodeTextField>
+
+			<p
+				style={{
+					fontSize: "12px",
+					marginTop: 3,
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				Path to the Claude Code CLI.
+			</p>
+
+			{showModelOptions && (
+				<>
+					<ModelSelector
+						models={claudeCodeModels}
+						selectedModelId={selectedModelId}
+						onChange={handleInputChange("apiModelId")}
+						label="Model"
+					/>
+
+					<ModelInfoView selectedModelId={selectedModelId} modelInfo={selectedModelInfo} isPopup={isPopup} />
+				</>
+			)}
+		</div>
+	)
+}