feat: Adding UI and settings for the max context window

- added `MaxContextWindowControl.tsx`
- added maxContextWindow in `settings.json`

Author: HahaBill

packages/types/src/provider-settings.ts

@@ -57,6 +57,7 @@ const baseProviderSettingsSchema = z.object({
 	diffEnabled: z.boolean().optional(),
 	fuzzyMatchThreshold: z.number().optional(),
 	modelTemperature: z.number().nullish(),
+	modelMaxContextWindow: z.number().nullish(),
 	rateLimitSeconds: z.number().optional(),
 
 	// Model reasoning.
@@ -346,6 +347,7 @@ export const PROVIDER_SETTINGS_KEYS = keysOf<ProviderSettings>()([
 	"diffEnabled",
 	"fuzzyMatchThreshold",
 	"modelTemperature",
+	"modelMaxContextWindow",
 	"rateLimitSeconds",
 	// Fake AI
 	"fakeAi",

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

@@ -51,6 +51,7 @@ import { ApiErrorMessage } from "./ApiErrorMessage"
 import { ThinkingBudget } from "./ThinkingBudget"
 import { DiffSettingsControl } from "./DiffSettingsControl"
 import { TemperatureControl } from "./TemperatureControl"
+import { MaxContextWindowControl } from "./MaxContextWindowControl"
 import { RateLimitSecondsControl } from "./RateLimitSecondsControl"
 import { BedrockCustomArn } from "./providers/BedrockCustomArn"
 import { buildDocLink } from "@src/utils/docLinks"
@@ -484,6 +485,11 @@ const ApiOptions = ({
 						onChange={handleInputChange("modelTemperature", noTransform)}
 						maxValue={2}
 					/>
+					<MaxContextWindowControl
+						value={apiConfiguration.modelMaxContextWindow}
+						onChange={handleInputChange("modelMaxContextWindow", noTransform)}
+						maxValue={1000000}
+					/>
 					<RateLimitSecondsControl
 						value={apiConfiguration.rateLimitSeconds || 0}
 						onChange={(value) => setApiConfigurationField("rateLimitSeconds", value)}

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

@@ -0,0 +1,71 @@
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { useEffect, useState } from "react"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useDebounce } from "react-use"
+
+import { Slider } from "@/components/ui"
+
+interface MaxContextWindowControlProps {
+	value: number | undefined | null
+	onChange: (value: number | undefined | null) => void
+	maxValue?: number // Some providers like OpenAI use 0-2 range.
+}
+
+export const MaxContextWindowControl = ({ value, onChange, maxValue = 1000000 }: MaxContextWindowControlProps) => {
+	const { t } = useAppTranslation()
+	const [isCustomTemperature, setIsCustomTemperature] = useState(value !== undefined)
+	const [inputValue, setInputValue] = useState(value)
+
+	useDebounce(() => onChange(inputValue), 50, [onChange, inputValue])
+
+	// Sync internal state with prop changes when switching profiles.
+	useEffect(() => {
+		const hasCustomTemperature = value !== undefined && value !== null
+		setIsCustomTemperature(hasCustomTemperature)
+		setInputValue(value)
+	}, [value])
+
+	return (
+		<>
+			<div>
+				<VSCodeCheckbox
+					checked={isCustomTemperature}
+					onChange={(e: any) => {
+						const isChecked = e.target.checked
+						setIsCustomTemperature(isChecked)
+
+						if (!isChecked) {
+							setInputValue(null) // Unset the temperature, note that undefined is unserializable.
+						} else {
+							setInputValue(value ?? 0) // Use the value from apiConfiguration, if set.
+						}
+					}}>
+					<label className="block font-medium mb-1">{t("settings:maxContextWindow.useCustom")}</label>
+				</VSCodeCheckbox>
+				<div className="text-sm text-vscode-descriptionForeground mt-1">
+					{t("settings:maxContextWindow.description")}
+				</div>
+			</div>
+
+			{isCustomTemperature && (
+				<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
+					<div>
+						<div className="flex items-center gap-2">
+							<Slider
+								min={0}
+								max={maxValue}
+								step={1}
+								value={[inputValue ?? 0]}
+								onValueChange={([value]) => setInputValue(value)}
+							/>
+							<span className="w-10">{inputValue}</span>
+						</div>
+						<div className="text-vscode-descriptionForeground text-sm mt-1">
+							{t("settings:maxContextWindow.rangeDescription")}
+						</div>
+					</div>
+				</div>
+			)}
+		</>
+	)
+}

webview-ui/src/i18n/locales/en/settings.json

@@ -497,6 +497,11 @@
 		"description": "Controls randomness in the model's responses.",
 		"rangeDescription": "Higher values make output more random, lower values make it more deterministic."
 	},
+	"maxContextWindow": {
+		"useCustom": "Use custom context max window",
+		"description": "Controls randomness in the model's responses.",
+		"rangeDescription": "Higher values make output more random, lower values make it more deterministic."
+	},
 	"modelInfo": {
 		"supportsImages": "Supports images",
 		"noImages": "Does not support images",