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 = { + "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 (
-
- +
+
+ + {getSelectedProviderDocUrl() && ( +
+ + {t("settings:providers.providerDocumentation", { + provider: getSelectedProviderDocUrl()!.name, + })} + +
+ )} +