From c40ba64230327a671e9cdbee61a4340fd739738b Mon Sep 17 00:00:00 2001
From: brownrw8 <rwbrown@roadrunner.com>
Date: Wed, 22 Jan 2025 15:19:40 -1000
Subject: [PATCH] add stashed changes && fix missing labels

---
 .../src/components/settings/ApiOptions.tsx    | 68 ++++++++-----------
 webview-ui/src/locales/en/translation.json    |  6 ++
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index bb8ff41358..f97f737aa2 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -516,7 +516,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 						style={{ width: "100%" }}
 						type="password"
 						onInput={handleInputChange("geminiApiKey")}
-						placeholder="Enter API Key...">
+						placeholder={t("enterApiKey")}>
 						<span style={{ fontWeight: 500 }}>{t("getApiVendorKey", { vendor: "Gemini" })}</span>
 					</VSCodeTextField>
 					<p
@@ -577,14 +577,14 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 								})
 							}
 						}}>
-						Set Azure API version
+						{t("useAzureApiVersion")}
 					</VSCodeCheckbox>
 					{azureApiVersionSelected && (
 						<VSCodeTextField
 							value={apiConfiguration?.azureApiVersion || ""}
 							style={{ width: "100%", marginTop: 3 }}
 							onInput={handleInputChange("azureApiVersion")}
-							placeholder={`Default: ${azureOpenAiDefaultApiVersion}`}
+							placeholder={t("getDefault", azureOpenAiDefaultApiVersion)}
 						/>
 					)}
 					<p
@@ -593,10 +593,13 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							marginTop: 3,
 							color: "var(--vscode-descriptionForeground)",
 						}}>
-						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
-							models. Less capable models may not work as expected.)
-						</span>
+						<Trans
+							i18nKey="apiOptions.azureInfo"
+							components={{
+								Link: <VSCodeLink />,
+								ErrSpan: <span style={{ color: "var(--vscode-errorForeground)" }} />,
+							}}
+						/>
 					</p>
 				</div>
 			)}
@@ -668,8 +671,8 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 						style={{ width: "100%" }}
 						type="url"
 						onInput={handleInputChange("lmStudioBaseUrl")}
-						placeholder={"Default: http://localhost:1234"}>
-						<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
+						placeholder={t("getDefault", { defaultValue: "http://localhost/1234" })}>
+						<span style={{ fontWeight: 500 }}>{t("optionalBaseUrl")}</span>
 					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.lmStudioModelId || ""}
@@ -707,22 +710,13 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							marginTop: "5px",
 							color: "var(--vscode-descriptionForeground)",
 						}}>
-						LM Studio allows you to run models locally on your computer. For instructions on how to get started, see
-						their
-						<VSCodeLink href="https://lmstudio.ai/docs" style={{ display: "inline", fontSize: "inherit" }}>
-							quickstart guide.
-						</VSCodeLink>
-						You will also need to start LM Studio's{" "}
-						<VSCodeLink
-							href="https://lmstudio.ai/docs/basics/server"
-							style={{ display: "inline", fontSize: "inherit" }}>
-							local server
-						</VSCodeLink>{" "}
-						feature to use it with this extension.{" "}
-						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
-							models. Less capable models may not work as expected.)
-						</span>
+						<Trans
+							i18nKey="apiOptions.lmStudioInfo"
+							components={{
+								Link: <VSCodeLink style={{ display: "inline", fontSize: "inherit" }} />,
+								ErrSpan: <span style={{ color: "var(--vscode-errorForeground)" }} />,
+							}}
+						/>
 					</p>
 				</div>
 			)}
@@ -734,8 +728,8 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 						style={{ width: "100%" }}
 						type="url"
 						onInput={handleInputChange("ollamaBaseUrl")}
-						placeholder={"Default: http://localhost:11434"}>
-						<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
+						placeholder={t("getDefault", { defaultValue: "http://localhost:11434" })}>
+						<span style={{ fontWeight: 500 }}>{t("optionalBaseUrl")}</span>
 					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.ollamaModelId || ""}
@@ -773,17 +767,15 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							marginTop: "5px",
 							color: "var(--vscode-descriptionForeground)",
 						}}>
-						Ollama allows you to run models locally on your computer. For instructions on how to get started, see
-						their
-						<VSCodeLink
-							href="https://github.com/ollama/ollama/blob/main/README.md"
-							style={{ display: "inline", fontSize: "inherit" }}>
-							quickstart guide.
-						</VSCodeLink>
-						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Cline uses complex prompts and works best with Claude
-							models. Less capable models may not work as expected.)
-						</span>
+						{
+							<Trans
+								i18nKey="apiOptions.ollamaInfo"
+								components={{
+									Link: <VSCodeLink style={{ display: "inline", fontSize: "inherit" }} />,
+									ErrorSpan: <span style={{ color: "var(--vscode-errorForeground)" }} />,
+								}}
+							/>
+						}
 					</p>
 				</div>
 			)}
diff --git a/webview-ui/src/locales/en/translation.json b/webview-ui/src/locales/en/translation.json
index 1b6769afb4..4f7ddd16f9 100644
--- a/webview-ui/src/locales/en/translation.json
+++ b/webview-ui/src/locales/en/translation.json
@@ -24,13 +24,19 @@
 		"apiKey": "API Key",
 		"enterBaseUrl": "Enter Base URL...",
 		"baseUrl": "Base URL",
+		"optionalBaseUrl": "Base URL (optional)",
 		"enterModelId": "Enter Model ID...",
 		"modelId": "Model ID",
 		"useCustomBaseUrl": "Use custom base URL",
 		"apiKeyInfo": "This key is stored locally and only used to make API requests from this extension.",
+		"getDefault": "Default: {{defaultValue}}",
 		"getApiKeyMessage": "You can get an {{vendor}} API key by signing up here.",
 		"getApiVendorKey": "{{vendor}} API Key",
 		"getCompatibleVendor": "{{vendor}} Compatible",
+		"lmStudioInfo": "LM Studio allows you to run models locally on your computer. For instructions on how to get started, see their <Link href=\"https://lmstudio.ai/docs\">quickstart guide.</Link> You will also need to start LM Studio's <Link href=\"https://lmstudio.ai/docs/basics/server\">local server</Link> feature to use it with this extension. <ErrSpan>(<b>Note:</b> Cline uses complex prompts and works best with Claude models. Less capable models may not work as expected.)</ErrSpan>",
+		"ollamaInfo": "Ollama allows you to run models locally on your computer. For instructions on how to get started, see their <Link href=\"https://github.com/ollama/ollama/blob/main/README.md\">quickstart guide.</Link> <ErrorSpan>(<b>Note:</b> Cline uses complex prompts and works best with Claude models. Less capable models may not work as expected.)</ErrorSpan>",
+		"azureInfo": "<ErrSpan>(<b>Note:</b> Cline uses complex prompts and works best with Claude models. Less capable models may not work as expected.)</ErrSpan>",
+		"setAzureApiVersion": "Set Azure API version",
 		"enterGcpProjectId": "Enter Project ID...",
 		"gcpProjectId": "Google Cloud Project ID",
 		"gcpLinks": "To use Google Cloud Vertex AI, you need to <Link href=\"https://cloud.google.com/vertex-ai/generative-ai/docs/partner-models/use-claude#before_you_begin\"> 1) create a Google Cloud account › enable the Vertex AI API › enable the desired Claude models, </Link><br /> <Link href=\"https://cloud.google.com/docs/authentication/provide-credentials-adc#google-idp\"> 2) install the Google Cloud CLI › configure Application Default Credentials. </Link>",