From e04d8d69d1ae1437a62a6d8df1e3256865568a7e Mon Sep 17 00:00:00 2001
From: "ellipsis-dev[bot]"
 <65095814+ellipsis-dev[bot]@users.noreply.github.com>
Date: Tue, 11 Mar 2025 05:01:13 +0000
Subject: [PATCH] address comments left by @cte on #1562 (Add prompt caching to
 OpenAI-compatible custom model info);

---
 .../src/components/settings/ApiOptions.tsx    | 36 ++++++-------------
 webview-ui/src/index.css                      | 12 +++++++
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index bd95eafd14..eb8634c198 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -964,19 +964,11 @@ const ApiOptions = ({
 											apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice?.toString() ?? "0"
 										}
 										type="text"
-										style={{
-											borderColor: (() => {
-												const value = apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice
-
-												if (!value && value !== 0) {
-													return "var(--vscode-input-border)"
-												}
-
-												return value >= 0
-													? "var(--vscode-charts-green)"
-													: "var(--vscode-errorForeground)"
-											})(),
-										}}
+										className={cn("w-full", {
+											"border-vscode-input": !apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice && apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice !== 0,
+											"border-vscode-green": apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice >= 0,
+											"border-vscode-error": apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice < 0,
+										})}
 										onChange={handleInputChange("openAiCustomModelInfo", (e) => {
 											const value = (e.target as HTMLInputElement).value
 											const parsed = parseFloat(value)
@@ -1005,19 +997,11 @@ const ApiOptions = ({
 											apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice?.toString() ?? "0"
 										}
 										type="text"
-										style={{
-											borderColor: (() => {
-												const value = apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice
-
-												if (!value && value !== 0) {
-													return "var(--vscode-input-border)"
-												}
-
-												return value >= 0
-													? "var(--vscode-charts-green)"
-													: "var(--vscode-errorForeground)"
-											})(),
-										}}
+										className={cn("w-full", {
+											"border-vscode-input": !apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice && apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice !== 0,
+											"border-vscode-green": apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice >= 0,
+											"border-vscode-error": apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice < 0,
+										})}
 										onChange={handleInputChange("openAiCustomModelInfo", (e) => {
 											const value = (e.target as HTMLInputElement).value
 											const parsed = parseFloat(value)
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index 2144557a98..3e98485f08 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -159,6 +159,18 @@
 		border-color: var(--border);
 	}
 
+	.border-vscode-input {
+		border-color: var(--vscode-input-border);
+	}
+
+	.border-vscode-green {
+		border-color: var(--vscode-charts-green);
+	}
+
+	.border-vscode-error {
+		border-color: var(--vscode-errorForeground);
+	}
+
 	/* Code Block Styles */
 	pre,
 	code {