From e72aba62b4e32ba0c9ae463690c70a652680cf79 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Tue, 11 Mar 2025 00:43:18 -0400
Subject: [PATCH 1/2] Add prompt caching to OpenAI-compatible custom model info

---
 .changeset/thin-fans-deliver.md               |   5 +
 .../src/components/settings/ApiOptions.tsx    | 110 ++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 .changeset/thin-fans-deliver.md

diff --git a/.changeset/thin-fans-deliver.md b/.changeset/thin-fans-deliver.md
new file mode 100644
index 00000000000..5244b7d0d75
--- /dev/null
+++ b/.changeset/thin-fans-deliver.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Add prompt caching to OpenAI-compatible custom model info
diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index 656a6831cba..bd95eafd148 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -847,6 +847,29 @@ const ApiOptions = ({
 							</div>
 						</div>
 
+						<div>
+							<div className="flex items-center gap-1">
+								<Checkbox
+									checked={apiConfiguration?.openAiCustomModelInfo?.supportsPromptCache ?? false}
+									onChange={handleInputChange("openAiCustomModelInfo", (checked) => {
+										return {
+											...(apiConfiguration?.openAiCustomModelInfo || openAiModelInfoSaneDefaults),
+											supportsPromptCache: checked,
+										}
+									})}>
+									<span className="font-medium">Prompt Caching</span>
+								</Checkbox>
+								<i
+									className="codicon codicon-info text-vscode-descriptionForeground"
+									title="Enable if the model supports prompt caching. This can improve performance and reduce costs."
+									style={{ fontSize: "12px" }}
+								/>
+							</div>
+							<div className="text-sm text-vscode-descriptionForeground [pt">
+								Is this model capable of caching prompts?
+							</div>
+						</div>
+
 						<div>
 							<VSCodeTextField
 								value={
@@ -933,6 +956,93 @@ const ApiOptions = ({
 							</VSCodeTextField>
 						</div>
 
+						{apiConfiguration?.openAiCustomModelInfo?.supportsPromptCache && (
+							<>
+								<div>
+									<VSCodeTextField
+										value={
+											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)"
+											})(),
+										}}
+										onChange={handleInputChange("openAiCustomModelInfo", (e) => {
+											const value = (e.target as HTMLInputElement).value
+											const parsed = parseFloat(value)
+
+											return {
+												...(apiConfiguration?.openAiCustomModelInfo ??
+													openAiModelInfoSaneDefaults),
+												cacheReadsPrice: isNaN(parsed) ? 0 : parsed,
+											}
+										})}
+										placeholder="e.g. 0.0001"
+										className="w-full">
+										<div className="flex items-center gap-1">
+											<span className="font-medium">Cache Reads Price</span>
+											<i
+												className="codicon codicon-info text-vscode-descriptionForeground"
+												title="Cost per million tokens for reading from the cache. This is the price charged when a cached response is retrieved."
+												style={{ fontSize: "12px" }}
+											/>
+										</div>
+									</VSCodeTextField>
+								</div>
+								<div>
+									<VSCodeTextField
+										value={
+											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)"
+											})(),
+										}}
+										onChange={handleInputChange("openAiCustomModelInfo", (e) => {
+											const value = (e.target as HTMLInputElement).value
+											const parsed = parseFloat(value)
+
+											return {
+												...(apiConfiguration?.openAiCustomModelInfo ??
+													openAiModelInfoSaneDefaults),
+												cacheWritesPrice: isNaN(parsed) ? 0 : parsed,
+											}
+										})}
+										placeholder="e.g. 0.00005"
+										className="w-full">
+										<div className="flex items-center gap-1">
+											<span className="font-medium">Cache Writes Price</span>
+											<i
+												className="codicon codicon-info text-vscode-descriptionForeground"
+												title="Cost per million tokens for writing to the cache. This is the price charged when a prompt is cached for the first time."
+												style={{ fontSize: "12px" }}
+											/>
+										</div>
+									</VSCodeTextField>
+								</div>
+							</>
+						)}
+
 						<Button
 							variant="secondary"
 							onClick={() =>

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 2/2] 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 bd95eafd148..eb8634c198a 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 2144557a983..3e98485f080 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 {