From a0f2a08f357a3b9df40799b397f303ce14c9f1cb Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Thu, 15 Aug 2024 20:37:15 -0400
Subject: [PATCH] Fix haiku prompt caching when tool prompt doesnt meet min
 required tokens

---
 src/api/anthropic.ts                     |  4 +--
 webview-ui/src/components/ApiOptions.tsx | 36 +++++++++---------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/api/anthropic.ts b/src/api/anthropic.ts
index 0bb4b84..cc0b860 100644
--- a/src/api/anthropic.ts
+++ b/src/api/anthropic.ts
@@ -56,9 +56,7 @@ export class AnthropicHandler implements ApiHandler {
 							}
 							return message
 						}),
-						tools: tools.map((tool, index) =>
-							index === tools.length - 1 ? { ...tool, cache_control: { type: "ephemeral" } } : tool
-						),
+						tools, // cache breakpoints go from tools > system > messages, and since tools dont change, we can just set the breakpoint at the end of system (this avoids having to set a breakpoint at the end of tools which by itself does not meet min requirements for haiku caching)
 						tool_choice: { type: "auto" },
 					},
 					(() => {
diff --git a/webview-ui/src/components/ApiOptions.tsx b/webview-ui/src/components/ApiOptions.tsx
index 826269e..da300f6 100644
--- a/webview-ui/src/components/ApiOptions.tsx
+++ b/webview-ui/src/components/ApiOptions.tsx
@@ -215,45 +215,35 @@ const ModelInfoView = ({ modelInfo }: { modelInfo: ModelInfo }) => {
 		}).format(price)
 	}
 
-	const showPromptCachingPrices =
-		modelInfo.supportsPromptCache && modelInfo.cacheWritesPrice && modelInfo.cacheReadsPrice
-
 	return (
 		<p style={{ fontSize: "12px", marginTop: "2px", color: "var(--vscode-descriptionForeground)" }}>
-			<ModelInfoSupportsItem
-				isSupported={modelInfo.supportsPromptCache}
-				supportsLabel="Supports prompt caching"
-				doesNotSupportLabel="Does not support prompt caching"
-			/>{" "}
-			<VSCodeLink href="https://www.anthropic.com/news/prompt-caching" style={{ display: "inline" }}>
-				(what is this?)
-			</VSCodeLink>
-			<br />
 			<ModelInfoSupportsItem
 				isSupported={modelInfo.supportsImages}
 				supportsLabel="Supports images"
 				doesNotSupportLabel="Does not support images"
 			/>
 			<br />
+			<ModelInfoSupportsItem
+				isSupported={modelInfo.supportsPromptCache}
+				supportsLabel="Supports prompt caching"
+				doesNotSupportLabel="Does not support prompt caching"
+			/>
+			<br />
 			<span style={{ fontWeight: 500 }}>Max output:</span> {modelInfo.maxTokens.toLocaleString()} tokens
 			<br />
-			<span style={{ fontWeight: 500 }}>
-				{showPromptCachingPrices ? "Base input price:" : "Input price:"}
-			</span>{" "}
-			{formatPrice(modelInfo.inputPrice)} per million tokens
-			{showPromptCachingPrices && (
+			<span style={{ fontWeight: 500 }}>Input price:</span> {formatPrice(modelInfo.inputPrice)}/million tokens
+			{modelInfo.supportsPromptCache && modelInfo.cacheWritesPrice && modelInfo.cacheReadsPrice && (
 				<>
 					<br />
-					<span style={{ fontWeight: 500 }}>Prompt caching write price:</span>{" "}
-					{formatPrice(modelInfo.cacheWritesPrice || 0)} per million tokens
+					<span style={{ fontWeight: 500 }}>Cache writes price:</span>{" "}
+					{formatPrice(modelInfo.cacheWritesPrice || 0)}/million tokens
 					<br />
-					<span style={{ fontWeight: 500 }}>Prompt caching read price:</span>{" "}
-					{formatPrice(modelInfo.cacheReadsPrice || 0)} per million tokens
+					<span style={{ fontWeight: 500 }}>Cache reads price:</span>{" "}
+					{formatPrice(modelInfo.cacheReadsPrice || 0)}/million tokens
 				</>
 			)}
 			<br />
-			<span style={{ fontWeight: 500 }}>Output price:</span> {formatPrice(modelInfo.outputPrice)} per million
-			tokens
+			<span style={{ fontWeight: 500 }}>Output price:</span> {formatPrice(modelInfo.outputPrice)}/million tokens
 		</p>
 	)
 }