merge confricts

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

@@ -18,13 +18,13 @@ import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react
 import { useInterval } from "react-use"
 import styled from "styled-components"
 import * as vscodemodels from "vscode"
-import { ClineAccountInfoCard } from "./ClineAccountInfoCard"
 import OllamaModelPicker from "./OllamaModelPicker"
 import OpenRouterModelPicker, { ModelDescriptionMarkdown, OPENROUTER_MODEL_PICKER_Z_INDEX } from "./OpenRouterModelPicker"
 import ThinkingBudgetSlider from "./ThinkingBudgetSlider"
 import { formatPrice } from "./utils/pricingUtils"
 import { normalizeApiConfiguration } from "./utils/providerUtils"
 
+import { ClineProvider } from "./providers/ClineProvider"
 import { OpenRouterProvider } from "./providers/OpenRouterProvider"
 import { MistralProvider } from "./providers/MistralProvider"
 import { DeepSeekProvider } from "./providers/DeepSeekProvider"
@@ -95,7 +95,6 @@ const ApiOptions = ({
 	const [vsCodeLmModels, setVsCodeLmModels] = useState<vscodemodels.LanguageModelChatSelector[]>([])
 	const [modelConfigurationSelected, setModelConfigurationSelected] = useState(false)
 	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
-	const [providerSortingSelected, setProviderSortingSelected] = useState(!!apiConfiguration?.openRouterProviderSorting)
 
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		const newValue = event.target.value
@@ -259,10 +258,13 @@ const ApiOptions = ({
 				</VSCodeDropdown>
 			</DropdownContainer>
 
-			{selectedProvider === "cline" && (
-				<div style={{ marginBottom: 14, marginTop: 4 }}>
-					<ClineAccountInfoCard />
-				</div>
+			{apiConfiguration && selectedProvider === "cline" && (
+				<ClineProvider
+					apiConfiguration={apiConfiguration}
+					handleInputChange={handleInputChange}
+					showModelOptions={showModelOptions}
+					isPopup={isPopup}
+				/>
 			)}
 
 			{apiConfiguration && selectedProvider === "asksage" && (
@@ -849,57 +851,6 @@ const ApiOptions = ({
 				</p>
 			)}
 
-			{selectedProvider === "cline" && showModelOptions && (
-				<>
-					<VSCodeCheckbox
-						style={{ marginTop: -10 }}
-						checked={providerSortingSelected}
-						onChange={(e: any) => {
-							const isChecked = e.target.checked === true
-							setProviderSortingSelected(isChecked)
-							if (!isChecked) {
-								setApiConfiguration({
-									...apiConfiguration,
-									openRouterProviderSorting: "",
-								})
-							}
-						}}>
-						Sort underlying provider routing
-					</VSCodeCheckbox>
-
-					{providerSortingSelected && (
-						<div style={{ marginBottom: -6 }}>
-							<DropdownContainer className="dropdown-container" zIndex={OPENROUTER_MODEL_PICKER_Z_INDEX + 1}>
-								<VSCodeDropdown
-									style={{ width: "100%", marginTop: 3 }}
-									value={apiConfiguration?.openRouterProviderSorting}
-									onChange={(e: any) => {
-										setApiConfiguration({
-											...apiConfiguration,
-											openRouterProviderSorting: e.target.value,
-										})
-									}}>
-									<VSCodeOption value="">Default</VSCodeOption>
-									<VSCodeOption value="price">Price</VSCodeOption>
-									<VSCodeOption value="throughput">Throughput</VSCodeOption>
-									<VSCodeOption value="latency">Latency</VSCodeOption>
-								</VSCodeDropdown>
-							</DropdownContainer>
-							<p style={{ fontSize: "12px", marginTop: 3, color: "var(--vscode-descriptionForeground)" }}>
-								{!apiConfiguration?.openRouterProviderSorting &&
-									"Default behavior is to load balance requests across providers (like AWS, Google Vertex, Anthropic), prioritizing price while considering provider uptime"}
-								{apiConfiguration?.openRouterProviderSorting === "price" &&
-									"Sort providers by price, prioritizing the lowest cost provider"}
-								{apiConfiguration?.openRouterProviderSorting === "throughput" &&
-									"Sort providers by throughput, prioritizing the provider with the highest throughput (may increase cost)"}
-								{apiConfiguration?.openRouterProviderSorting === "latency" &&
-									"Sort providers by response time, prioritizing the provider with the lowest latency"}
-							</p>
-						</div>
-					)}
-				</>
-			)}
-
 			{selectedProvider !== "openrouter" &&
 				selectedProvider !== "cline" &&
 				selectedProvider !== "anthropic" &&
@@ -943,8 +894,6 @@ const ApiOptions = ({
 					</>
 				)}
 
-			{selectedProvider === "cline" && showModelOptions && <OpenRouterModelPicker isPopup={isPopup} />}
-
 			{modelIdErrorMessage && (
 				<p
 					style={{

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

@@ -0,0 +1,86 @@
+import { ApiConfiguration } from "@shared/api"
+import { VSCodeCheckbox, VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
+import { useState } from "react"
+import { ClineAccountInfoCard } from "../ClineAccountInfoCard"
+import OpenRouterModelPicker, { OPENROUTER_MODEL_PICKER_Z_INDEX } from "../OpenRouterModelPicker"
+import { DropdownContainer } from "../common/ModelSelector"
+
+/**
+ * Props for the ClineProvider component
+ */
+interface ClineProviderProps {
+	apiConfiguration: ApiConfiguration
+	handleInputChange: (field: keyof ApiConfiguration) => (event: any) => void
+	showModelOptions: boolean
+	isPopup?: boolean
+}
+
+/**
+ * The Cline provider configuration component
+ */
+export const ClineProvider = ({ apiConfiguration, handleInputChange, showModelOptions, isPopup }: ClineProviderProps) => {
+	const [providerSortingSelected, setProviderSortingSelected] = useState(!!apiConfiguration?.openRouterProviderSorting)
+
+	// Create a wrapper for handling field changes more directly
+	const handleFieldChange = (field: keyof ApiConfiguration) => (value: any) => {
+		handleInputChange(field)({ target: { value } })
+	}
+
+	return (
+		<div>
+			{/* Cline Account Info Card */}
+			<div style={{ marginBottom: 14, marginTop: 4 }}>
+				<ClineAccountInfoCard />
+			</div>
+
+			{showModelOptions && (
+				<>
+					{/* Provider Sorting Options */}
+					<VSCodeCheckbox
+						style={{ marginTop: -10 }}
+						checked={providerSortingSelected}
+						onChange={(e: any) => {
+							const isChecked = e.target.checked === true
+							setProviderSortingSelected(isChecked)
+							if (!isChecked) {
+								handleFieldChange("openRouterProviderSorting")("")
+							}
+						}}>
+						Sort underlying provider routing
+					</VSCodeCheckbox>
+
+					{providerSortingSelected && (
+						<div style={{ marginBottom: -6 }}>
+							<DropdownContainer className="dropdown-container" zIndex={OPENROUTER_MODEL_PICKER_Z_INDEX + 1}>
+								<VSCodeDropdown
+									style={{ width: "100%", marginTop: 3 }}
+									value={apiConfiguration?.openRouterProviderSorting}
+									onChange={(e: any) => {
+										handleFieldChange("openRouterProviderSorting")(e.target.value)
+									}}>
+									<VSCodeOption value="">Default</VSCodeOption>
+									<VSCodeOption value="price">Price</VSCodeOption>
+									<VSCodeOption value="throughput">Throughput</VSCodeOption>
+									<VSCodeOption value="latency">Latency</VSCodeOption>
+								</VSCodeDropdown>
+							</DropdownContainer>
+							<p style={{ fontSize: "12px", marginTop: 3, color: "var(--vscode-descriptionForeground)" }}>
+								{!apiConfiguration?.openRouterProviderSorting &&
+									"Default behavior is to load balance requests across providers (like AWS, Google Vertex, Anthropic), prioritizing price while considering provider uptime"}
+								{apiConfiguration?.openRouterProviderSorting === "price" &&
+									"Sort providers by price, prioritizing the lowest cost provider"}
+								{apiConfiguration?.openRouterProviderSorting === "throughput" &&
+									"Sort providers by throughput, prioritizing the provider with the highest throughput (may increase cost)"}
+								{apiConfiguration?.openRouterProviderSorting === "latency" &&
+									"Sort providers by response time, prioritizing the provider with the lowest latency"}
+							</p>
+						</div>
+					)}
+
+					{/* OpenRouter Model Picker */}
+					<OpenRouterModelPicker isPopup={isPopup} />
+				</>
+			)}
+		</div>
+	)
+}