From cceebdc04c27751f709dca48b7e1c44cf2c003a2 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Tue, 3 Sep 2024 19:22:52 -0400
Subject: [PATCH] Bug fixes for openai provider

---
 src/ClaudeDev.ts                             |  2 +-
 webview-ui/src/components/ApiOptions.tsx     |  7 +++----
 webview-ui/src/components/ChatRow.tsx        |  8 +++++---
 webview-ui/src/components/HistoryPreview.tsx |  4 ++--
 webview-ui/src/components/HistoryView.tsx    | 12 +++++++-----
 webview-ui/src/components/TaskHeader.tsx     |  2 +-
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/ClaudeDev.ts b/src/ClaudeDev.ts
index ab00a31..89712a4 100644
--- a/src/ClaudeDev.ts
+++ b/src/ClaudeDev.ts
@@ -917,7 +917,7 @@ export class ClaudeDev {
 					} as ClaudeSayTool)
 				)
 				return `The user accepted but made the following changes to your content:\n\n${userDiff}\n\nFinal result ${
-					fileExists ? "applied to" : "written as new file"
+					fileExists ? "saved to" : "written as new file"
 				} ${relPath}:\n\n${diffResult}`
 			} else {
 				const diffResult = diff.createPatch(relPath, originalContent, newContent)
diff --git a/webview-ui/src/components/ApiOptions.tsx b/webview-ui/src/components/ApiOptions.tsx
index 327ac41..bccd02b 100644
--- a/webview-ui/src/components/ApiOptions.tsx
+++ b/webview-ui/src/components/ApiOptions.tsx
@@ -73,7 +73,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 					id="api-provider"
 					value={selectedProvider}
 					onChange={handleInputChange("apiProvider")}
-					style={{ minWidth: 125 }}>
+					style={{ minWidth: 130 }}>
 					<VSCodeOption value="anthropic">Anthropic</VSCodeOption>
 					<VSCodeOption value="openrouter">OpenRouter</VSCodeOption>
 					<VSCodeOption value="bedrock">AWS Bedrock</VSCodeOption>
@@ -294,9 +294,8 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 						}}>
 						You can use any OpenAI compatible API with models that support tool use.{" "}
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts, so results
-							may vary depending on the quality of the model you choose. Less capable models may not work
-							as expected.)
+							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts, so less
+							capable models may not work as expected.)
 						</span>
 					</p>
 				</div>
diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx
index ab84b37..eff54f4 100644
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/webview-ui/src/components/ChatRow.tsx
@@ -93,7 +93,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 				]
 			case "api_req_started":
 				return [
-					cost ? (
+					cost != null ? (
 						<span
 							className="codicon codicon-check"
 							style={{ color: successColor, marginBottom: "-1.5px" }}></span>
@@ -104,7 +104,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 					) : (
 						ProgressIndicator
 					),
-					cost ? (
+					cost != null ? (
 						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request Complete</span>
 					) : apiRequestFailedMessage ? (
 						<span style={{ color: errorColor, fontWeight: "bold" }}>API Request Failed</span>
@@ -266,7 +266,9 @@ const ChatRow: React.FC<ChatRowProps> = ({
 									<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
 										{icon}
 										{title}
-										{cost && <VSCodeBadge>${Number(cost)?.toFixed(4)}</VSCodeBadge>}
+										{cost != null && cost > 0 && (
+											<VSCodeBadge>${Number(cost)?.toFixed(4)}</VSCodeBadge>
+										)}
 									</div>
 									<VSCodeButton
 										appearance="icon"
diff --git a/webview-ui/src/components/HistoryPreview.tsx b/webview-ui/src/components/HistoryPreview.tsx
index 07d5bbe..24d7023 100644
--- a/webview-ui/src/components/HistoryPreview.tsx
+++ b/webview-ui/src/components/HistoryPreview.tsx
@@ -108,12 +108,12 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 									<span>
 										Tokens: ↑{item.tokensIn?.toLocaleString()} ↓{item.tokensOut?.toLocaleString()}
 									</span>
-									{item.cacheWrites && item.cacheReads && (
+									{!!item.cacheWrites && (
 										<>
 											{" • "}
 											<span>
 												Cache: +{item.cacheWrites?.toLocaleString()} →{" "}
-												{item.cacheReads?.toLocaleString()}
+												{(item.cacheReads || 0).toLocaleString()}
 											</span>
 										</>
 									)}
diff --git a/webview-ui/src/components/HistoryView.tsx b/webview-ui/src/components/HistoryView.tsx
index 5f1f89d..af15635 100644
--- a/webview-ui/src/components/HistoryView.tsx
+++ b/webview-ui/src/components/HistoryView.tsx
@@ -65,12 +65,13 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 
 	const ExportButton = ({ itemId }: { itemId: string }) => (
 		<VSCodeButton
+			className="export-button"
 			appearance="icon"
 			onClick={(e) => {
 				e.stopPropagation()
 				handleExportMd(itemId)
 			}}>
-			<div style={{ fontSize: "11px", fontWeight: 500, opacity: 1 }}>EXPORT .MD</div>
+			<div style={{ fontSize: "11px", fontWeight: 500, opacity: 1 }}>EXPORT</div>
 		</VSCodeButton>
 	)
 
@@ -81,11 +82,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					.history-item:hover {
 						background-color: var(--vscode-list-hoverBackground);
 					}
-					.delete-button {
+					.delete-button, .export-button {
 						opacity: 0;
 						pointer-events: none;
 					}
-					.history-item:hover .delete-button {
+					.history-item:hover .delete-button,
+					.history-item:hover .export-button {
 						opacity: 1;
 						pointer-events: auto;
 					}
@@ -282,7 +284,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 											{!item.totalCost && <ExportButton itemId={item.id} />}
 										</div>
 
-										{item.cacheWrites && item.cacheReads && (
+										{!!item.cacheWrites && (
 											<div
 												style={{
 													display: "flex",
@@ -329,7 +331,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 															marginBottom: 0,
 														}}
 													/>
-													{item.cacheReads?.toLocaleString()}
+													{(item.cacheReads || 0).toLocaleString()}
 												</span>
 											</div>
 										)}
diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx
index 2ae382b..ffdda2f 100644
--- a/webview-ui/src/components/TaskHeader.tsx
+++ b/webview-ui/src/components/TaskHeader.tsx
@@ -103,7 +103,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 				marginBottom: "-2px",
 				marginRight: "-2.5px",
 			}}>
-			<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT .MD</div>
+			<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT</div>
 		</VSCodeButton>
 	)