The MaxRequestsInput component was extracted from AutoApproveMenu.tsx into its own file (MaxRequestsInput.tsx) to improve reusability and maintainability. This component is now used in both AutoApproveMenu.tsx and AutoApproveSettings.tsx to manage the auto-approve API request limit.

Previously this option was only available in the Chat Approval popup menu

Author: Chris Hasson

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -214,7 +214,6 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					<MaxRequestsInput
 						allowedMaxRequests={allowedMaxRequests ?? undefined}
 						onValueChange={(value) => setAllowedMaxRequests(value)}
-						variant="menu"
 					/>
 					{/* kilocode_change end */}
 				</div>

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

@@ -131,8 +131,6 @@ export const AutoApproveSettings = ({
 				<MaxRequestsInput
 					allowedMaxRequests={allowedMaxRequests}
 					onValueChange={(value) => setCachedStateField("allowedMaxRequests", value)}
-					variant="settings"
-					testId="max-requests-input"
 				/>
 				{/* kilocode_change end */}
 

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

@@ -1,79 +1,34 @@
 // kilocode_change - new file
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { Trans, useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next"
 import { vscode } from "@/utils/vscode"
+import { useCallback } from "react"
 
 interface MaxRequestsInputProps {
 	allowedMaxRequests?: number | undefined
 	onValueChange: (value: number | undefined) => void
-	variant?: "menu" | "settings"
 	className?: string
-	style?: React.CSSProperties
-	testId?: string
 }
 
-export function MaxRequestsInput({
-	allowedMaxRequests,
-	onValueChange,
-	variant = "settings",
-	className,
-	style,
-	testId,
-}: MaxRequestsInputProps) {
+export function MaxRequestsInput({ allowedMaxRequests, onValueChange, className }: MaxRequestsInputProps) {
 	const { t } = useTranslation()
 
-	const handleInput = (e: any) => {
-		const input = e.target as HTMLInputElement
-		input.value = input.value.replace(/[^0-9]/g, "")
-		const value = parseInt(input.value)
-		const parsedValue = !isNaN(value) && value > 0 ? value : undefined
-		onValueChange(parsedValue)
-		vscode.postMessage({ type: "allowedMaxRequests", value: parsedValue })
-	}
+	const handleInput = useCallback(
+		(e: any) => {
+			const input = e.target as HTMLInputElement
+			input.value = input.value.replace(/[^0-9]/g, "")
+			const value = parseInt(input.value)
+			const parsedValue = !isNaN(value) && value > 0 ? value : undefined
+			onValueChange(parsedValue)
+			vscode.postMessage({ type: "allowedMaxRequests", value: parsedValue })
+		},
+		[onValueChange],
+	)
 
 	const inputValue = (allowedMaxRequests ?? Infinity) === Infinity ? "" : allowedMaxRequests?.toString()
 
-	if (variant === "menu") {
-		return (
-			<>
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						gap: "8px",
-						marginTop: "10px",
-						marginBottom: "8px",
-						color: "var(--vscode-descriptionForeground)",
-						...style,
-					}}
-					className={className}>
-					<span style={{ flexShrink: 1, minWidth: 0 }}>
-						<Trans i18nKey="settings:autoApprove.apiRequestLimit.title" />:
-					</span>
-					<VSCodeTextField
-						placeholder={t("settings:autoApprove.apiRequestLimit.unlimited")}
-						value={inputValue}
-						onInput={handleInput}
-						style={{ flex: 1 }}
-						data-testid={testId}
-					/>
-				</div>
-				<div
-					style={{
-						color: "var(--vscode-descriptionForeground)",
-						fontSize: "12px",
-						marginBottom: "10px",
-					}}>
-					<Trans i18nKey="settings:autoApprove.apiRequestLimit.description" />
-				</div>
-			</>
-		)
-	}
-
 	return (
-		<div
-			className={`flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background ${className || ""}`}
-			style={style}>
+		<div className={`flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background ${className || ""}`}>
 			<div className="flex items-center gap-4 font-bold">
 				<span className="codicon codicon-pulse" />
 				<div>{t("settings:autoApprove.apiRequestLimit.title")}</div>
@@ -84,7 +39,7 @@ export function MaxRequestsInput({
 					value={inputValue}
 					onInput={handleInput}
 					style={{ flex: 1, maxWidth: "200px" }}
-					data-testid={testId || "max-requests-input"}
+					data-testid="max-requests-input"
 				/>
 			</div>
 			<div className="text-vscode-descriptionForeground text-sm">

webview-ui/src/components/settings/__tests__/MaxRequestsInput.spec.tsx

@@ -7,39 +7,20 @@ vi.mock("@/utils/vscode", () => ({
 	vscode: { postMessage: vi.fn() },
 }))
 
-const translations: Record<string, string> = {
-	"settings:autoApprove.apiRequestLimit.title": "Max API Requests",
-	"settings:autoApprove.apiRequestLimit.unlimited": "Unlimited",
-	"settings:autoApprove.apiRequestLimit.description": "Limit the number of API requests",
-}
 vi.mock("react-i18next", () => ({
-	useTranslation: () => ({
-		t: (key: string) => translations[key] || key,
-	}),
-	Trans: ({ i18nKey }: { i18nKey: string; children?: React.ReactNode }) => (
-		<span>{translations[i18nKey] || i18nKey}</span>
-	),
+	useTranslation: () => {
+		const translations: Record<string, string> = {
+			"settings:autoApprove.apiRequestLimit.title": "Max API Requests",
+			"settings:autoApprove.apiRequestLimit.unlimited": "Unlimited",
+			"settings:autoApprove.apiRequestLimit.description": "Limit the number of API requests",
+		}
+		return { t: (key: string) => translations[key] || key }
+	},
 }))
 
 describe("MaxRequestsInput", () => {
 	const mockOnValueChange = vi.fn()
 
-	it("renders with settings variant by default", () => {
-		render(<MaxRequestsInput allowedMaxRequests={10} onValueChange={mockOnValueChange} />)
-
-		expect(screen.getByText("Max API Requests")).toBeInTheDocument()
-		expect(screen.getByText("Limit the number of API requests")).toBeInTheDocument()
-		expect(screen.getByDisplayValue("10")).toBeInTheDocument()
-	})
-
-	it("renders with menu variant styling", () => {
-		render(<MaxRequestsInput allowedMaxRequests={5} onValueChange={mockOnValueChange} variant="menu" />)
-
-		expect(screen.getByText("Max API Requests")).toBeInTheDocument()
-		expect(screen.getByText("Limit the number of API requests")).toBeInTheDocument()
-		expect(screen.getByDisplayValue("5")).toBeInTheDocument()
-	})
-
 	it("shows empty input when allowedMaxRequests is undefined", () => {
 		render(<MaxRequestsInput allowedMaxRequests={undefined} onValueChange={mockOnValueChange} />)