From 6aa04115b10ba5c2e5f7dc2706e98aae567ad789 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 17 Aug 2024 10:54:01 -0400
Subject: [PATCH] Fix TypeError

---
 webview-ui/src/components/ApiOptions.tsx     |  2 +-
 webview-ui/src/components/HistoryPreview.tsx |  8 ++++----
 webview-ui/src/components/HistoryView.tsx    | 10 +++++-----
 webview-ui/src/components/TaskHeader.tsx     |  8 ++++----
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/webview-ui/src/components/ApiOptions.tsx b/webview-ui/src/components/ApiOptions.tsx
index da300f6..df8638b 100644
--- a/webview-ui/src/components/ApiOptions.tsx
+++ b/webview-ui/src/components/ApiOptions.tsx
@@ -229,7 +229,7 @@ const ModelInfoView = ({ modelInfo }: { modelInfo: ModelInfo }) => {
 				doesNotSupportLabel="Does not support prompt caching"
 			/>
 			<br />
-			<span style={{ fontWeight: 500 }}>Max output:</span> {modelInfo.maxTokens.toLocaleString()} tokens
+			<span style={{ fontWeight: 500 }}>Max output:</span> {modelInfo?.maxTokens?.toLocaleString()} tokens
 			<br />
 			<span style={{ fontWeight: 500 }}>Input price:</span> {formatPrice(modelInfo.inputPrice)}/million tokens
 			{modelInfo.supportsPromptCache && modelInfo.cacheWritesPrice && modelInfo.cacheReadsPrice && (
diff --git a/webview-ui/src/components/HistoryPreview.tsx b/webview-ui/src/components/HistoryPreview.tsx
index 0c2bcf6..5158d21 100644
--- a/webview-ui/src/components/HistoryPreview.tsx
+++ b/webview-ui/src/components/HistoryPreview.tsx
@@ -15,7 +15,7 @@ const HistoryPreview = ({ taskHistory, showHistoryView }: HistoryPreviewProps) =
 	const formatDate = (timestamp: number) => {
 		const date = new Date(timestamp)
 		return date
-			.toLocaleString("en-US", {
+			?.toLocaleString("en-US", {
 				month: "long",
 				day: "numeric",
 				hour: "numeric",
@@ -100,14 +100,14 @@ const HistoryPreview = ({ taskHistory, showHistoryView }: HistoryPreviewProps) =
 							</div>
 							<div style={{ fontSize: "0.85em", color: "var(--vscode-descriptionForeground)" }}>
 								<span>
-									Tokens: ↑{item.tokensIn.toLocaleString()} ↓{item.tokensOut.toLocaleString()}
+									Tokens: ↑{item.tokensIn?.toLocaleString()} ↓{item.tokensOut?.toLocaleString()}
 								</span>
 								{" • "}
 								{item.cacheWrites && item.cacheReads && (
 									<>
 										<span>
-											Cache: +{item.cacheWrites.toLocaleString()} →{" "}
-											{item.cacheReads.toLocaleString()}
+											Cache: +{item.cacheWrites?.toLocaleString()} →{" "}
+											{item.cacheReads?.toLocaleString()}
 										</span>
 										{" • "}
 									</>
diff --git a/webview-ui/src/components/HistoryView.tsx b/webview-ui/src/components/HistoryView.tsx
index 696cd39..24cbb75 100644
--- a/webview-ui/src/components/HistoryView.tsx
+++ b/webview-ui/src/components/HistoryView.tsx
@@ -23,7 +23,7 @@ const HistoryView = ({ taskHistory, onDone }: HistoryViewProps) => {
 	const formatDate = (timestamp: number) => {
 		const date = new Date(timestamp)
 		return date
-			.toLocaleString("en-US", {
+			?.toLocaleString("en-US", {
 				month: "long",
 				day: "numeric",
 				hour: "numeric",
@@ -185,7 +185,7 @@ const HistoryView = ({ taskHistory, onDone }: HistoryViewProps) => {
 													marginBottom: "-2px",
 												}}
 											/>
-											{item.tokensIn.toLocaleString()}
+											{item.tokensIn?.toLocaleString()}
 										</span>
 										<span
 											style={{
@@ -202,7 +202,7 @@ const HistoryView = ({ taskHistory, onDone }: HistoryViewProps) => {
 													marginBottom: "-2px",
 												}}
 											/>
-											{item.tokensOut.toLocaleString()}
+											{item.tokensOut?.toLocaleString()}
 										</span>
 									</div>
 									{item.cacheWrites && item.cacheReads && (
@@ -235,7 +235,7 @@ const HistoryView = ({ taskHistory, onDone }: HistoryViewProps) => {
 														marginBottom: "-1px",
 													}}
 												/>
-												+{item.cacheWrites.toLocaleString()}
+												+{item.cacheWrites?.toLocaleString()}
 											</span>
 											<span
 												style={{
@@ -248,7 +248,7 @@ const HistoryView = ({ taskHistory, onDone }: HistoryViewProps) => {
 													className="codicon codicon-arrow-right"
 													style={{ fontSize: "12px", fontWeight: "bold", marginBottom: 0 }}
 												/>
-												{item.cacheReads.toLocaleString()}
+												{item.cacheReads?.toLocaleString()}
 											</span>
 										</div>
 									)}
diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx
index 5e8f6ec..378672b 100644
--- a/webview-ui/src/components/TaskHeader.tsx
+++ b/webview-ui/src/components/TaskHeader.tsx
@@ -197,14 +197,14 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 								className="codicon codicon-arrow-up"
 								style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
 							/>
-							{tokensIn.toLocaleString()}
+							{tokensIn?.toLocaleString()}
 						</span>
 						<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 							<i
 								className="codicon codicon-arrow-down"
 								style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
 							/>
-							{tokensOut.toLocaleString()}
+							{tokensOut?.toLocaleString()}
 						</span>
 					</div>
 					{(doesModelSupportPromptCache || cacheReads !== undefined || cacheWrites !== undefined) && (
@@ -215,14 +215,14 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 									className="codicon codicon-database"
 									style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-1px" }}
 								/>
-								+{(cacheWrites || 0).toLocaleString()}
+								+{(cacheWrites || 0)?.toLocaleString()}
 							</span>
 							<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 								<i
 									className="codicon codicon-arrow-right"
 									style={{ fontSize: "12px", fontWeight: "bold", marginBottom: 0 }}
 								/>
-								{(cacheReads || 0).toLocaleString()}
+								{(cacheReads || 0)?.toLocaleString()}
 							</span>
 						</div>
 					)}