From 584c09ea49cfe7194aa72c95e45a0b90e53a2ddd Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Sun, 30 Mar 2025 12:45:59 -0400
Subject: [PATCH] Link to provider docs from the API options

---
 .../src/components/settings/ApiOptions.tsx    | 51 +++++++++++++++++--
 .../src/components/settings/constants.ts      |  1 +
 webview-ui/src/i18n/locales/ca/settings.json  |  1 +
 webview-ui/src/i18n/locales/de/settings.json  |  1 +
 webview-ui/src/i18n/locales/en/settings.json  |  1 +
 webview-ui/src/i18n/locales/es/settings.json  |  1 +
 webview-ui/src/i18n/locales/fr/settings.json  |  1 +
 webview-ui/src/i18n/locales/hi/settings.json  |  1 +
 webview-ui/src/i18n/locales/it/settings.json  |  1 +
 webview-ui/src/i18n/locales/ja/settings.json  |  1 +
 webview-ui/src/i18n/locales/ko/settings.json  |  1 +
 webview-ui/src/i18n/locales/pl/settings.json  |  1 +
 .../src/i18n/locales/pt-BR/settings.json      |  1 +
 webview-ui/src/i18n/locales/tr/settings.json  |  1 +
 webview-ui/src/i18n/locales/vi/settings.json  |  1 +
 .../src/i18n/locales/zh-CN/settings.json      |  1 +
 .../src/i18n/locales/zh-TW/settings.json      |  1 +
 17 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index 3ed1158f54..cf6eec02d6 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -243,10 +243,55 @@ const ApiOptions = ({
 		[selectedProvider],
 	)
 
+	// Base URL for provider documentation
+	const DOC_BASE_URL = "https://docs.roocode.com/providers"
+
+	// Custom URL path mappings for providers with different slugs
+	const providerUrlSlugs: Record<string, string> = {
+		"openai-native": "openai",
+		openai: "openai-compatible",
+	}
+
+	// Helper function to get provider display name from PROVIDERS constant
+	const getProviderDisplayName = (providerKey: string): string | undefined => {
+		const provider = PROVIDERS.find((p) => p.value === providerKey)
+		return provider?.label
+	}
+
+	// Helper function to get the documentation URL and name for the currently selected provider
+	const getSelectedProviderDocUrl = (): { url: string; name: string } | undefined => {
+		const displayName = getProviderDisplayName(selectedProvider)
+		if (!displayName) {
+			return undefined
+		}
+
+		// Get the URL slug - use custom mapping if available, otherwise use the provider key
+		const urlSlug = providerUrlSlugs[selectedProvider] || selectedProvider
+
+		return {
+			url: `${DOC_BASE_URL}/${urlSlug}`,
+			name: displayName,
+		}
+	}
+
 	return (
 		<div className="flex flex-col gap-3">
-			<div>
-				<label className="block font-medium mb-1">{t("settings:providers.apiProvider")}</label>
+			<div className="flex flex-col gap-1 relative">
+				<div className="flex justify-between items-center">
+					<label className="block font-medium mb-1">{t("settings:providers.apiProvider")}</label>
+					{getSelectedProviderDocUrl() && (
+						<div className="text-xs text-vscode-descriptionForeground">
+							<VSCodeLink
+								href={getSelectedProviderDocUrl()!.url}
+								className="hover:text-vscode-foreground"
+								target="_blank">
+								{t("settings:providers.providerDocumentation", {
+									provider: getSelectedProviderDocUrl()!.name,
+								})}
+							</VSCodeLink>
+						</div>
+					)}
+				</div>
 				<Select
 					value={selectedProvider}
 					onValueChange={(value) => setApiConfigurationField("apiProvider", value as ApiProvider)}>
@@ -256,7 +301,7 @@ const ApiOptions = ({
 					<SelectContent>
 						<SelectItem value="openrouter">OpenRouter</SelectItem>
 						<SelectSeparator />
-						{PROVIDERS.map(({ value, label }) => (
+						{PROVIDERS.filter((p) => p.value !== "openrouter").map(({ value, label }) => (
 							<SelectItem key={value} value={value}>
 								{label}
 							</SelectItem>
diff --git a/webview-ui/src/components/settings/constants.ts b/webview-ui/src/components/settings/constants.ts
index b5f3e13196..4634f334df 100644
--- a/webview-ui/src/components/settings/constants.ts
+++ b/webview-ui/src/components/settings/constants.ts
@@ -21,6 +21,7 @@ export const MODELS_BY_PROVIDER: Partial<Record<ApiProvider, Record<string, Mode
 }
 
 export const PROVIDERS = [
+	{ value: "openrouter", label: "OpenRouter" },
 	{ value: "anthropic", label: "Anthropic" },
 	{ value: "gemini", label: "Google Gemini" },
 	{ value: "deepseek", label: "DeepSeek" },
diff --git a/webview-ui/src/i18n/locales/ca/settings.json b/webview-ui/src/i18n/locales/ca/settings.json
index 598827b3f2..0e6777969c 100644
--- a/webview-ui/src/i18n/locales/ca/settings.json
+++ b/webview-ui/src/i18n/locales/ca/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Perfil de configuració",
+		"providerDocumentation": "Documentació de {{provider}}",
 		"description": "Deseu diferents configuracions d'API per canviar ràpidament entre proveïdors i configuracions.",
 		"apiProvider": "Proveïdor d'API",
 		"openRouterApiKey": "Clau API d'OpenRouter",
diff --git a/webview-ui/src/i18n/locales/de/settings.json b/webview-ui/src/i18n/locales/de/settings.json
index 503a159025..090f5dfc55 100644
--- a/webview-ui/src/i18n/locales/de/settings.json
+++ b/webview-ui/src/i18n/locales/de/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Konfigurationsprofil",
+		"providerDocumentation": "{{provider}}-Dokumentation",
 		"description": "Speichern Sie verschiedene API-Konfigurationen, um schnell zwischen Anbietern und Einstellungen zu wechseln.",
 		"apiProvider": "API-Anbieter",
 		"model": "Modell",
diff --git a/webview-ui/src/i18n/locales/en/settings.json b/webview-ui/src/i18n/locales/en/settings.json
index c0edeefd37..aa2bcb3243 100644
--- a/webview-ui/src/i18n/locales/en/settings.json
+++ b/webview-ui/src/i18n/locales/en/settings.json
@@ -82,6 +82,7 @@
 		}
 	},
 	"providers": {
+		"providerDocumentation": "{{provider}} documentation",
 		"configProfile": "Configuration Profile",
 		"description": "Save different API configurations to quickly switch between providers and settings.",
 		"apiProvider": "API Provider",
diff --git a/webview-ui/src/i18n/locales/es/settings.json b/webview-ui/src/i18n/locales/es/settings.json
index 7a12c7c533..510dccc1a8 100644
--- a/webview-ui/src/i18n/locales/es/settings.json
+++ b/webview-ui/src/i18n/locales/es/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Perfil de configuración",
+		"providerDocumentation": "Documentación de {{provider}}",
 		"description": "Guarde diferentes configuraciones de API para cambiar rápidamente entre proveedores y ajustes.",
 		"apiProvider": "Proveedor de API",
 		"model": "Modelo",
diff --git a/webview-ui/src/i18n/locales/fr/settings.json b/webview-ui/src/i18n/locales/fr/settings.json
index 52d52c0704..b11c7fea1d 100644
--- a/webview-ui/src/i18n/locales/fr/settings.json
+++ b/webview-ui/src/i18n/locales/fr/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Profil de configuration",
+		"providerDocumentation": "Documentation {{provider}}",
 		"description": "Enregistrez différentes configurations d'API pour basculer rapidement entre les fournisseurs et les paramètres.",
 		"apiProvider": "Fournisseur d'API",
 		"model": "Modèle",
diff --git a/webview-ui/src/i18n/locales/hi/settings.json b/webview-ui/src/i18n/locales/hi/settings.json
index 040e87a19c..dd1b0985ef 100644
--- a/webview-ui/src/i18n/locales/hi/settings.json
+++ b/webview-ui/src/i18n/locales/hi/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "कॉन्फिगरेशन प्रोफाइल",
+		"providerDocumentation": "{{provider}} दस्तावेज़ीकरण",
 		"description": "विभिन्न API कॉन्फ़िगरेशन सहेजें ताकि प्रदाताओं और सेटिंग्स के बीच त्वरित रूप से स्विच कर सकें।",
 		"apiProvider": "API प्रदाता",
 		"model": "मॉडल",
diff --git a/webview-ui/src/i18n/locales/it/settings.json b/webview-ui/src/i18n/locales/it/settings.json
index fc42115bcb..7be656164e 100644
--- a/webview-ui/src/i18n/locales/it/settings.json
+++ b/webview-ui/src/i18n/locales/it/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Profilo di configurazione",
+		"providerDocumentation": "Documentazione {{provider}}",
 		"description": "Salva diverse configurazioni API per passare rapidamente tra fornitori e impostazioni.",
 		"apiProvider": "Fornitore API",
 		"model": "Modello",
diff --git a/webview-ui/src/i18n/locales/ja/settings.json b/webview-ui/src/i18n/locales/ja/settings.json
index f53af6b04d..91ff3b6424 100644
--- a/webview-ui/src/i18n/locales/ja/settings.json
+++ b/webview-ui/src/i18n/locales/ja/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "設定プロファイル",
+		"providerDocumentation": "{{provider}}のドキュメント",
 		"description": "異なるAPI設定を保存して、プロバイダーと設定をすばやく切り替えることができます。",
 		"apiProvider": "APIプロバイダー",
 		"model": "モデル",
diff --git a/webview-ui/src/i18n/locales/ko/settings.json b/webview-ui/src/i18n/locales/ko/settings.json
index cc2ce893c1..fc2f9a6ac8 100644
--- a/webview-ui/src/i18n/locales/ko/settings.json
+++ b/webview-ui/src/i18n/locales/ko/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "구성 프로필",
+		"providerDocumentation": "{{provider}} 문서",
 		"description": "다양한 API 구성을 저장하여 제공자와 설정 간에 빠르게 전환할 수 있습니다.",
 		"apiProvider": "API 제공자",
 		"model": "모델",
diff --git a/webview-ui/src/i18n/locales/pl/settings.json b/webview-ui/src/i18n/locales/pl/settings.json
index 5fefd1957f..42a97ff19b 100644
--- a/webview-ui/src/i18n/locales/pl/settings.json
+++ b/webview-ui/src/i18n/locales/pl/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Profil konfiguracji",
+		"providerDocumentation": "Dokumentacja {{provider}}",
 		"description": "Zapisz różne konfiguracje API, aby szybko przełączać się między dostawcami i ustawieniami.",
 		"apiProvider": "Dostawca API",
 		"model": "Model",
diff --git a/webview-ui/src/i18n/locales/pt-BR/settings.json b/webview-ui/src/i18n/locales/pt-BR/settings.json
index 716556b807..90409571db 100644
--- a/webview-ui/src/i18n/locales/pt-BR/settings.json
+++ b/webview-ui/src/i18n/locales/pt-BR/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Perfil de configuração",
+		"providerDocumentation": "Documentação do {{provider}}",
 		"description": "Salve diferentes configurações de API para alternar rapidamente entre provedores e configurações.",
 		"apiProvider": "Provedor de API",
 		"model": "Modelo",
diff --git a/webview-ui/src/i18n/locales/tr/settings.json b/webview-ui/src/i18n/locales/tr/settings.json
index e717841b01..ce987fcc7c 100644
--- a/webview-ui/src/i18n/locales/tr/settings.json
+++ b/webview-ui/src/i18n/locales/tr/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Yapılandırma Profili",
+		"providerDocumentation": "{{provider}} Dokümantasyonu",
 		"description": "Sağlayıcılar ve ayarlar arasında hızlıca geçiş yapmak için farklı API yapılandırmalarını kaydedin.",
 		"apiProvider": "API Sağlayıcı",
 		"model": "Model",
diff --git a/webview-ui/src/i18n/locales/vi/settings.json b/webview-ui/src/i18n/locales/vi/settings.json
index 39dfaa470d..c4b0411b2b 100644
--- a/webview-ui/src/i18n/locales/vi/settings.json
+++ b/webview-ui/src/i18n/locales/vi/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Hồ sơ cấu hình",
+		"providerDocumentation": "Tài liệu {{provider}}",
 		"description": "Lưu các cấu hình API khác nhau để nhanh chóng chuyển đổi giữa các nhà cung cấp và cài đặt.",
 		"apiProvider": "Nhà cung cấp API",
 		"model": "Mẫu",
diff --git a/webview-ui/src/i18n/locales/zh-CN/settings.json b/webview-ui/src/i18n/locales/zh-CN/settings.json
index 64721f6db1..a0074296d4 100644
--- a/webview-ui/src/i18n/locales/zh-CN/settings.json
+++ b/webview-ui/src/i18n/locales/zh-CN/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "配置文件",
+		"providerDocumentation": "{{provider}} 文档",
 		"description": "保存不同的 API 配置以快速切换提供商和设置。",
 		"apiProvider": "API 提供商",
 		"model": "模型",
diff --git a/webview-ui/src/i18n/locales/zh-TW/settings.json b/webview-ui/src/i18n/locales/zh-TW/settings.json
index 2da2373929..17070396fe 100644
--- a/webview-ui/src/i18n/locales/zh-TW/settings.json
+++ b/webview-ui/src/i18n/locales/zh-TW/settings.json
@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "配置設定檔",
+		"providerDocumentation": "{{provider}} 文件",
 		"description": "儲存不同的 API 設定以快速切換提供者和設定。",
 		"apiProvider": "API 提供者",
 		"model": "模型",