deepseek and together refactor

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

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

@@ -11,7 +11,6 @@ import {
 	bedrockModels,
 	cerebrasModels,
 	claudeCodeModels,
-	deepSeekModels,
 	doubaoModels,
 	geminiModels,
 	internationalQwenModels,
@@ -54,7 +53,8 @@ import { normalizeApiConfiguration } from "./utils/providerUtils"
 
 import { OpenRouterProvider } from "./providers/OpenRouterProvider"
 import { MistralProvider } from "./providers/MistralProvider"
-import { ExtensionMessage } from "@shared/ExtensionMessage"
+import { DeepSeekProvider } from "./providers/DeepSeekProvider"
+import { TogetherProvider } from "./providers/TogetherProvider"
 
 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -470,37 +470,6 @@ const ApiOptions = ({
 				</div>
 			)}
 
-			{selectedProvider === "deepseek" && (
-				<div>
-					<VSCodeTextField
-						value={apiConfiguration?.deepSeekApiKey || ""}
-						style={{ width: "100%" }}
-						type="password"
-						onInput={handleInputChange("deepSeekApiKey")}
-						placeholder="Enter API Key...">
-						<span style={{ fontWeight: 500 }}>DeepSeek 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?.deepSeekApiKey && (
-							<VSCodeLink
-								href="https://www.deepseek.com/"
-								style={{
-									display: "inline",
-									fontSize: "inherit",
-								}}>
-								You can get a DeepSeek API key by signing up here.
-							</VSCodeLink>
-						)}
-					</p>
-				</div>
-			)}
-
 			{selectedProvider === "qwen" && (
 				<div>
 					<DropdownContainer className="dropdown-container" style={{ position: "inherit" }}>
@@ -607,6 +576,24 @@ const ApiOptions = ({
 				/>
 			)}
 
+			{apiConfiguration && selectedProvider === "deepseek" && (
+				<DeepSeekProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+				/>
+			)}
+
+			{apiConfiguration && selectedProvider === "together" && (
+				<TogetherProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+				/>
+			)}
+
 			{selectedProvider === "bedrock" && (
 				<div
 					style={{
@@ -1426,37 +1413,6 @@ const ApiOptions = ({
 				</div>
 			)}
 
-			{selectedProvider === "together" && (
-				<div>
-					<VSCodeTextField
-						value={apiConfiguration?.togetherApiKey || ""}
-						style={{ width: "100%" }}
-						type="password"
-						onInput={handleInputChange("togetherApiKey")}
-						placeholder="Enter API Key...">
-						<span style={{ fontWeight: 500 }}>API Key</span>
-					</VSCodeTextField>
-					<VSCodeTextField
-						value={apiConfiguration?.togetherModelId || ""}
-						style={{ width: "100%" }}
-						onInput={handleInputChange("togetherModelId")}
-						placeholder={"Enter Model ID..."}>
-						<span style={{ fontWeight: 500 }}>Model ID</span>
-					</VSCodeTextField>
-					<p
-						style={{
-							fontSize: "12px",
-							marginTop: 3,
-							color: "var(--vscode-descriptionForeground)",
-						}}>
-						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
-							models. Less capable models may not work as expected.)
-						</span>
-					</p>
-				</div>
-			)}
-
 			{selectedProvider === "vscode-lm" && (
 				<div>
 					<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
@@ -2161,6 +2117,7 @@ const ApiOptions = ({
 				selectedProvider !== "requesty" &&
 				selectedProvider !== "bedrock" &&
 				selectedProvider !== "mistral" &&
+				selectedProvider !== "deepseek" &&
 				showModelOptions && (
 					<>
 						<DropdownContainer zIndex={DROPDOWN_Z_INDEX - 2} className="dropdown-container">
@@ -2173,7 +2130,6 @@ const ApiOptions = ({
 								createDropdown(apiConfiguration?.vertexRegion === "global" ? vertexGlobalModels : vertexModels)}
 							{selectedProvider === "gemini" && createDropdown(geminiModels)}
 							{selectedProvider === "openai-native" && createDropdown(openAiNativeModels)}
-							{selectedProvider === "deepseek" && createDropdown(deepSeekModels)}
 							{selectedProvider === "qwen" &&
 								createDropdown(
 									apiConfiguration?.qwenApiLine === "china" ? mainlandQwenModels : internationalQwenModels,

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

@@ -0,0 +1,47 @@
+import { ApiConfiguration, deepSeekModels } 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 DeepSeekProvider component
+ */
+interface DeepSeekProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+}
+
+/**
+ * The DeepSeek provider configuration component
+ */
+export const DeepSeekProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: DeepSeekProviderProps) => {
+	// Get the normalized configuration
+	const { selectedModelId, selectedModelInfo } = normalizeApiConfiguration(apiConfiguration)
+
+	return (
+		<div>
+			<ApiKeyField
+				value={apiConfiguration?.deepSeekApiKey || ""}
+				onChange={handleInputChange("deepSeekApiKey")}
+				providerName="DeepSeek"
+				signupUrl="https://www.deepseek.com/"
+			/>
+
+			{showModelOptions && (
+				<>
+					<ModelSelector
+						models={deepSeekModels}
+						selectedModelId={selectedModelId}
+						onChange={handleInputChange("apiModelId")}
+						label="Model"
+					/>
+
+					<ModelInfoView selectedModelId={selectedModelId} modelInfo={selectedModelInfo} isPopup={isPopup} />
+				</>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,46 @@
+import { ApiConfiguration } from "@shared/api"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { ApiKeyField } from "../common/ApiKeyField"
+
+/**
+ * Props for the TogetherProvider component
+ */
+interface TogetherProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+}
+
+/**
+ * The Together provider configuration component
+ */
+export const TogetherProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: TogetherProviderProps) => {
+	return (
+		<div>
+			<ApiKeyField
+				value={apiConfiguration?.togetherApiKey || ""}
+				onChange={handleInputChange("togetherApiKey")}
+				providerName="Together"
+			/>
+			<VSCodeTextField
+				value={apiConfiguration?.togetherModelId || ""}
+				style={{ width: "100%" }}
+				onInput={handleInputChange("togetherModelId")}
+				placeholder={"Enter Model ID..."}>
+				<span style={{ fontWeight: 500 }}>Model ID</span>
+			</VSCodeTextField>
+			<p
+				style={{
+					fontSize: "12px",
+					marginTop: 3,
+					color: "var(--vscode-descriptionForeground)",
+				}}>
+				<span style={{ color: "var(--vscode-errorForeground)" }}>
+					(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude models.
+					Less capable models may not work as expected.)
+				</span>
+			</p>
+		</div>
+	)
+}