refactor(model-connections): update placeholder text for API key fields

This commit is contained in:
Anish Sarkar 2026-06-13 22:17:48 +05:30
parent c7409c8995
commit 1c72f4174b
2 changed files with 11 additions and 8 deletions

View file

@ -87,14 +87,14 @@ export function BedrockConnectForm({ onDraftChange }: ProviderConnectFormProps)
<Input <Input
value={accessKeyId} value={accessKeyId}
onChange={(event) => setAccessKeyId(event.target.value)} onChange={(event) => setAccessKeyId(event.target.value)}
placeholder="AKIAIOSFODNN7EXAMPLE" placeholder="Enter your AWS access key ID"
/> />
</div> </div>
<ApiKeyField <ApiKeyField
value={secretAccessKey} value={secretAccessKey}
onChange={setSecretAccessKey} onChange={setSecretAccessKey}
label="AWS Secret Access Key" label="AWS Secret Access Key"
placeholder="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY" placeholder="Enter your AWS secret access key"
/> />
</> </>
) : null} ) : null}

View file

@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
import { ApiBaseUrlField, ApiKeyField } from "./connect-fields"; import { ApiBaseUrlField, ApiKeyField } from "./connect-fields";
import type { ProviderConnectFormProps } from "./provider-metadata"; import type { ProviderConnectFormProps } from "./provider-metadata";
const OPTIONAL_API_KEY_PROVIDERS = new Set(["ollama_chat", "lm_studio", "openai_compatible"]);
function baseUrlHint(provider: string) { function baseUrlHint(provider: string) {
if (provider === "ollama_chat" || provider === "lm_studio") { if (provider === "ollama_chat" || provider === "lm_studio") {
return "For local servers, use host.docker.internal instead of localhost."; return "For local servers, use host.docker.internal instead of localhost.";
@ -28,13 +30,14 @@ export function DefaultConnectForm({
}: ProviderConnectFormProps) { }: ProviderConnectFormProps) {
const [baseUrl, setBaseUrl] = useState(defaultBaseUrl); const [baseUrl, setBaseUrl] = useState(defaultBaseUrl);
const [apiKey, setApiKey] = useState(""); const [apiKey, setApiKey] = useState("");
const isOllama = provider === "ollama_chat"; const isApiKeyOptional = OPTIONAL_API_KEY_PROVIDERS.has(provider);
const hint = baseUrlHint(provider); const hint = baseUrlHint(provider);
const canSubmit = !(baseUrlRequired && !baseUrl.trim()); const apiKeyValue = apiKey.trim();
const canSubmit = !(baseUrlRequired && !baseUrl.trim()) && (isApiKeyOptional || Boolean(apiKeyValue));
useEffect(() => { useEffect(() => {
onDraftChange({ base_url: baseUrl || null, api_key: apiKey || null, extra: {} }, canSubmit); onDraftChange({ base_url: baseUrl || null, api_key: apiKeyValue || null, extra: {} }, canSubmit);
}, [apiKey, baseUrl, canSubmit, onDraftChange]); }, [apiKeyValue, baseUrl, canSubmit, onDraftChange]);
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@ -47,8 +50,8 @@ export function DefaultConnectForm({
<ApiKeyField <ApiKeyField
value={apiKey} value={apiKey}
onChange={setApiKey} onChange={setApiKey}
label={isOllama ? "API Key (optional)" : "API Key"} label={isApiKeyOptional ? "API Key (optional)" : "API Key"}
placeholder={isOllama ? "Optional for Ollama" : "API key"} placeholder="Enter your API key"
/> />
</div> </div>
); );