Set process env in react html as script, instead of trying to pass message

Signed-off-by: Geoff Wilson <[email protected]>

Author: suprjinx

src/api/index.ts

@@ -78,7 +78,9 @@ export function buildApiHandler(configuration: ProviderSettings): ApiHandler {
 
 	switch (apiProvider) {
 		case "anthropic":
-			options.apiKey = getEnvVar("ANTHROPIC_API_KEY", options.apiKey)
+			if (options.anthropicApiKeyUseEnvVar) {
+				options.apiKey = getEnvVar("ANTHROPIC_API_KEY", options.apiKey)
+			}
 			return new AnthropicHandler(options)
 		case "glama":
 			options.glamaApiKey = getEnvVar("GLAMA_API_KEY", options.glamaApiKey)
@@ -93,7 +95,9 @@ export function buildApiHandler(configuration: ProviderSettings): ApiHandler {
 				? new AnthropicVertexHandler(options)
 				: new VertexHandler(options)
 		case "openai":
-			options.openAiApiKey = getEnvVar("OPEN_AI_API_KEY", options.openAiApiKey)
+			if (options.openAiApiKeyUseEnvVar) {
+				options.openAiApiKey = getEnvVar("OPEN_AI_API_KEY", options.openAiApiKey)
+			}
 			return new OpenAiHandler(options)
 		case "ollama":
 			return new OllamaHandler(options)

src/core/webview/ClineProvider.ts

@@ -395,12 +395,6 @@ export class ClineProvider
 		// and executes code based on the message that is recieved
 		this.setWebviewMessageListener(webviewView.webview)
 
-		// Send process.env to the webview
-		webviewView.webview.postMessage({
-			type: "env",
-			env: process.env,
-		});
-
 		// Subscribe to code index status updates if the manager exists
 		if (this.codeIndexManager) {
 			this.codeIndexStatusSubscription = this.codeIndexManager.onProgressUpdate((update: IndexProgressUpdate) => {
@@ -720,6 +714,7 @@ export class ClineProvider
 				window.IMAGES_BASE_URI = "${imagesUri}"
 				window.AUDIO_BASE_URI = "${audioUri}"
 				window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
+				window.PROCESS_ENV = ${JSON.stringify(process.env)}
 			</script>
             <title>Roo Code</title>
           </head>

webview-ui/src/components/settings/ApiOptions.tsx

@@ -329,10 +329,7 @@ const ApiOptions = ({
 			)}
 
 			{selectedProvider === "anthropic" && (
-				<Anthropic 
-					apiConfiguration={apiConfiguration} 
-					setApiConfigurationField={setApiConfigurationField} 
-					env={env} />
+				<Anthropic apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField}/>
 			)}
 
 			{selectedProvider === "openai-native" && (

webview-ui/src/components/settings/SettingsView.tsx

@@ -408,9 +408,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			if (message.type === "action" && message.action === "didBecomeVisible") {
 				scrollToActiveTab()
 			}
-			if (message.type === "env") {
-				setEnv(message.env)
-			}
 		}
 
 		window.addEventListener("message", handleMessage)

webview-ui/src/components/settings/providers/Anthropic.tsx

@@ -12,15 +12,11 @@ import { inputEventTransform, noTransform } from "../transforms"
 type AnthropicProps = {
 	apiConfiguration: ProviderSettings
 	setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
-	env?: Record<string, string | undefined>
 }
 
-export const Anthropic = ({ apiConfiguration, setApiConfigurationField, env = {}}: AnthropicProps) => {
+export const Anthropic = ({ apiConfiguration, setApiConfigurationField }: AnthropicProps) => {
 	const { t } = useAppTranslation()
-	
-	const apiKeyEnvVarExists = !!env["ANTHROPIC_API_KEY"]
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
-	const [useApiKeyEnvVar, setUseApiKeyEnvVar] = useState(!!apiConfiguration?.anthropicApiKeyUseEnvVar)
 
 	const handleInputChange = useCallback(
 		<K extends keyof ProviderSettings, E>(
@@ -33,23 +29,24 @@ export const Anthropic = ({ apiConfiguration, setApiConfigurationField, env = {}
 		[setApiConfigurationField],
 	)
 
+	const env = (window as any).PROCESS_ENV || {}
+	const apiKeyEnvVarExists = !!env["ANTHROPIC_API_KEY"]
+	const [useApiKeyEnvVar, setUseApiKeyEnvVar] = useState(!!apiConfiguration?.anthropicApiKeyUseEnvVar)
+
 	const handleUseApiKeyEnvVarChange = (checked: boolean) => {
 		setUseApiKeyEnvVar(checked)
 		setApiConfigurationField("anthropicApiKeyUseEnvVar", checked)
 	}
 
-	console.log("Environment from ApiOptions at Anthropic:", env)
-
 	return (
 		<>
 			<VSCodeTextField
-				value={env["ANTHROPIC_API_KEY"]}
-				type="text"
+				value={apiConfiguration?.apiKey || ""}
+				type="password"
 				onInput={handleInputChange("apiKey")}
 				placeholder={t("settings:placeholders.apiKey")}
 				className="w-full"
-				disabled={useApiKeyEnvVar}
-				>
+				disabled={useApiKeyEnvVar}>
 				<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
 			</VSCodeTextField>
 			<div className="text-sm text-vscode-descriptionForeground -mt-2">

webview-ui/src/i18n/locales/en/settings.json

@@ -135,7 +135,7 @@
 		"openRouterApiKey": "OpenRouter API Key",
 		"getOpenRouterApiKey": "Get OpenRouter API Key",
 		"apiKeyStorageNotice": "API keys are stored securely in VSCode's Secret Storage",
-		"apiKeyUseEnvVar": "Get API key from env var {{name}}",
+		"apiKeyUseEnvVar": "Use API key from env var {{name}}",
 		"glamaApiKey": "Glama API Key",
 		"getGlamaApiKey": "Get Glama API Key",
 		"useCustomBaseUrl": "Use custom base URL",