Tryfix for the Autocomplete

src/common/components/forms/FormInputKey.tsx

@@ -7,7 +7,7 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 
 export function FormInputKey(props: {
-  id: string, // introduced to avoid clashes
+  autoCompleteId: string, // introduced to avoid clashes
   label?: string, rightLabel?: string | React.JSX.Element,
   description?: string | React.JSX.Element,
   value: string, onChange: (value: string) => void,
@@ -27,8 +27,10 @@ export function FormInputKey(props: {
     </IconButton>
   ), [props.value, props.noKey, isVisible]);
 
+  const acId = (props.noKey ? 'input-text-' : 'input-key-') + props.autoCompleteId;
+
   return (
-    <FormControl>
+    <FormControl id={acId}>
 
       {!!props.label && <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline', flexWrap: 'wrap', justifyContent: 'space-between' }}>
         <FormLabel>{props.label}</FormLabel>
@@ -38,7 +40,10 @@ export function FormInputKey(props: {
       </Box>}
 
       <Input
-        id={props.id}
+        key={acId}
+        name={acId}
+        autoComplete='off'
+        // autoComplete={props.noKey ? 'off' : 'new-password'}
         variant={props.required ? 'outlined' : 'outlined' /* 'soft */}
         value={props.value} onChange={handleChange}
         placeholder={props.required ? props.placeholder ? 'required: ' + props.placeholder : 'required' : props.placeholder || '...'}

src/common/components/forms/FormTextField.tsx

@@ -9,16 +9,28 @@ import { FormLabelStart } from './FormLabelStart';
  * Text form field (e.g. enter a host)
  */
 export function FormTextField(props: {
+  autoCompleteId: string,
   title: string | React.JSX.Element,
   description?: string | React.JSX.Element,
   tooltip?: string | React.JSX.Element,
   placeholder?: string, isError?: boolean, disabled?: boolean,
   value: string | undefined, onChange: (text: string) => void,
 }) {
+  const acId = 'text-' + props.autoCompleteId;
   return (
-    <FormControl orientation='horizontal' disabled={props.disabled} sx={{ flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
+    <FormControl
+      id={acId}
+      orientation='horizontal'
+      disabled={props.disabled}
+      sx={{
+        flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center',
+      }}
+    >
       <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />
       <Input
+        key={acId}
+        name={acId}
+        autoComplete='off'
         variant='outlined' placeholder={props.placeholder} error={props.isError}
         value={props.value} onChange={event => props.onChange(event.target.value)}
         sx={{ flexGrow: 1 }}

src/modules/browse/BrowseSettings.tsx

@@ -31,7 +31,7 @@ export function BrowseSettings() {
     </FormHelperText>
 
     <FormInputKey
-      id='browse-wss' label='Puppeteer Endpoint' noKey
+      autoCompleteId='browse-wss' label='Puppeteer Endpoint' noKey
       value={wssEndpoint} onChange={setWssEndpoint}
       rightLabel={!isServerConfig ? 'required' : '✔️ already set in server'}
       required={!isServerConfig} isError={!isClientValid && !isServerConfig}

src/modules/elevenlabs/ElevenlabsSettings.tsx

@@ -30,7 +30,7 @@ export function ElevenlabsSettings() {
     {/*</FormHelperText>*/}
 
     {!isConfiguredServerSide && <FormInputKey
-      id='elevenlabs-key' label='ElevenLabs API Key'
+      autoCompleteId='elevenlabs-key' label='ElevenLabs API Key'
       rightLabel={isConfiguredServerSide ? '✔️ already set in server' : 'required'}
       value={apiKey} onChange={setApiKey}
       required={!isConfiguredServerSide} isError={!isValidKey}

src/modules/llms/vendors/anthropic/AnthropicSourceSetup.tsx

@@ -46,7 +46,7 @@ export function AnthropicSourceSetup(props: { sourceId: DModelSourceId }) {
     </Alert>
 
     <FormInputKey
-      id='anthropic-key' label={!!anthropicHost ? 'API Key' : 'Anthropic API Key'}
+      autoCompleteId='anthropic-key' label={!!anthropicHost ? 'API Key' : 'Anthropic API Key'}
       rightLabel={<>{needsUserKey
         ? !anthropicKey && <Link level='body-sm' href='https://www.anthropic.com/earlyaccess' target='_blank'>request Key</Link>
         : '✔️ already set in server'
@@ -58,6 +58,7 @@ export function AnthropicSourceSetup(props: { sourceId: DModelSourceId }) {
     />
 
     {advanced.on && <FormTextField
+      autoCompleteId='anthropic-host'
       title='API Host'
       description={<>e.g., <Link level='body-sm' href='https://github.com/enricoros/big-agi/blob/main/docs/config-aws-bedrock.md' target='_blank'>bedrock-claude</Link></>}
       placeholder='deployment.service.region.amazonaws.com'
@@ -67,6 +68,7 @@ export function AnthropicSourceSetup(props: { sourceId: DModelSourceId }) {
     />}
 
     {advanced.on && <FormTextField
+      autoCompleteId='anthropic-helicone-key'
       title='Helicone Key' disabled={!!anthropicHost}
       description={<>Generate <Link level='body-sm' href='https://www.helicone.ai/keys' target='_blank'>here</Link></>}
       placeholder='sk-...'

src/modules/llms/vendors/azure/AzureSourceSetup.tsx

@@ -36,6 +36,7 @@ export function AzureSourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormTextField
+      autoCompleteId='azure-endpoint'
       title='Azure Endpoint'
       description={<Link level='body-sm' href='https://github.com/enricoros/big-agi/blob/main/docs/config-azure-openai.md' target='_blank'>configuration</Link>}
       placeholder='https://your-resource-name.openai.azure.com/'
@@ -45,7 +46,7 @@ export function AzureSourceSetup(props: { sourceId: DModelSourceId }) {
     />
 
     <FormInputKey
-      id='azure-key' label='Azure Key'
+      autoCompleteId='azure-key' label='Azure Key'
       rightLabel={<>{needsUserKey
         ? !azureKey && <Link level='body-sm' href='https://azure.microsoft.com/en-us/products/ai-services/openai-service' target='_blank'>request Key</Link>
         : '✔️ already set in server'}

src/modules/llms/vendors/gemini/GeminiSourceSetup.tsx

@@ -47,7 +47,7 @@ export function GeminiSourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormInputKey
-      id='gemini-key' label='Gemini API Key'
+      autoCompleteId='gemini-key' label='Gemini API Key'
       rightLabel={<>{needsUserKey
         ? !geminiKey && <Link level='body-sm' href={GEMINI_API_KEY_LINK} target='_blank'>request Key</Link>
         : '✔️ already set in server'}

src/modules/llms/vendors/groq/GroqSourceSetup.tsx

@@ -39,7 +39,7 @@ export function GroqSourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormInputKey
-      id='groq-key' label='Groq API Key'
+      autoCompleteId='groq-key' label='Groq API Key'
       rightLabel={<>{needsUserKey
         ? !groqKey && <Link level='body-sm' href={GROQ_REG_LINK} target='_blank'>API keys</Link>
         : '✔️ already set in server'}

src/modules/llms/vendors/lmstudio/LMStudioSourceSetup.tsx

@@ -55,7 +55,7 @@ export function LMStudioSourceSetup(props: { sourceId: DModelSourceId }) {
     </Typography>
 
     <FormInputKey
-      id='lmstudio-url' label='LM Studio API'
+      autoCompleteId='lmstudio-url' label='LM Studio API'
       required noKey
       rightLabel={<Link level='body-sm' href='https://github.com/enricoros/big-agi/blob/main/docs/config-local-lmstudio.md' target='_blank'>Learn more</Link>}
       placeholder='e.g., http://127.0.0.1:1234'

src/modules/llms/vendors/localai/LocalAISourceSetup.tsx

@@ -76,7 +76,7 @@ export function LocalAISourceSetup(props: { sourceId: DModelSourceId }) {
     </Typography>
 
     <FormInputKey
-      id='localai-host' label='LocalAI URL'
+      autoCompleteId='localai-host' label='LocalAI URL'
       placeholder='e.g., http://127.0.0.1:8080'
       noKey
       required={userHostRequired}
@@ -86,7 +86,7 @@ export function LocalAISourceSetup(props: { sourceId: DModelSourceId }) {
     />
 
     <FormInputKey
-      id='localai-host' label='(optional) API Key'
+      autoCompleteId='localai-key' label='(optional) API Key'
       placeholder='...'
       required={false}
       rightLabel={backendHasKey ? '✔️ already set in server' : undefined}

src/modules/llms/vendors/mistral/MistralSourceSetup.tsx

@@ -36,7 +36,7 @@ export function MistralSourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormInputKey
-      id='mistral-key' label='Mistral Key'
+      autoCompleteId='mistral-key' label='Mistral Key'
       rightLabel={<>{needsUserKey
         ? !mistralKey && <Link level='body-sm' href={MISTRAL_REG_LINK} target='_blank'>request Key</Link>
         : '✔️ already set in server'}

src/modules/llms/vendors/ollama/OllamaSourceSetup.tsx

@@ -39,6 +39,7 @@ export function OllamaSourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormTextField
+      autoCompleteId='ollama-host'
       title='Ollama Host'
       description={<Link level='body-sm' href='https://github.com/enricoros/big-agi/blob/main/docs/config-local-ollama.md' target='_blank'>information</Link>}
       placeholder='http://127.0.0.1:11434'

src/modules/llms/vendors/oobabooga/OobaboogaSourceSetup.tsx

@@ -37,6 +37,7 @@ export function OobaboogaSourceSetup(props: { sourceId: DModelSourceId }) {
     </Typography>
 
     <FormTextField
+      autoCompleteId='oobabooga-host'
       title='API Base'
       description='Excluding /v1'
       placeholder='http://127.0.0.1:5000'

src/modules/llms/vendors/openai/OpenAISourceSetup.tsx

@@ -45,7 +45,7 @@ export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormInputKey
-      id='openai-key' label='API Key'
+      autoCompleteId='openai-key' label='API Key'
       rightLabel={<>{needsUserKey
         ? !oaiKey && <><Link level='body-sm' href='https://platform.openai.com/account/api-keys' target='_blank'>create Key</Link> and <Link level='body-sm' href='https://openai.com/waitlist/gpt-4-api' target='_blank'>apply to GPT-4</Link></>
         : '✔️ already set in server'
@@ -57,6 +57,7 @@ export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
     />
 
     {advanced.on && <FormTextField
+      autoCompleteId='openai-host'
       title='API Endpoint'
       tooltip={`An OpenAI compatible endpoint to be used in place of 'api.openai.com'.\n\nCould be used for Helicone, Cloudflare, or other OpenAI compatible cloud or local services.\n\nExamples:\n - ${HELICONE_OPENAI_HOST}\n - localhost:1234`}
       description={<><Link level='body-sm' href='https://www.helicone.ai' target='_blank'>Helicone</Link>, <Link level='body-sm' href='https://developers.cloudflare.com/ai-gateway/' target='_blank'>Cloudflare</Link></>}
@@ -66,6 +67,7 @@ export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
     />}
 
     {advanced.on && <FormTextField
+      autoCompleteId='openai-org'
       title='Organization ID'
       description={<Link level='body-sm' href={`${Brand.URIs.OpenRepo}/issues/63`} target='_blank'>What is this</Link>}
       placeholder='Optional, for enterprise users'
@@ -74,6 +76,7 @@ export function OpenAISourceSetup(props: { sourceId: DModelSourceId }) {
     />}
 
     {advanced.on && <FormTextField
+      autoCompleteId='openai-helicone-key'
       title='Helicone Key'
       description={<>Generate <Link level='body-sm' href='https://www.helicone.ai/keys' target='_blank'>here</Link></>}
       placeholder='sk-...'

src/modules/llms/vendors/openrouter/OpenRouterSourceSetup.tsx

@@ -53,7 +53,7 @@ export function OpenRouterSourceSetup(props: { sourceId: DModelSourceId }) {
     </Typography>
 
     <FormInputKey
-      id='openrouter-key' label='OpenRouter API Key'
+      autoCompleteId='openrouter-key' label='OpenRouter API Key'
       rightLabel={<>{needsUserKey
         ? !oaiKey && <Link level='body-sm' href='https://openrouter.ai/keys' target='_blank'>your keys</Link>
         : '✔️ already set in server'

src/modules/llms/vendors/perplexity/PerplexitySourceSetup.tsx

@@ -39,7 +39,7 @@ export function PerplexitySourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormInputKey
-      id='perplexity-key' label='Perplexity API Key'
+      autoCompleteId='perplexity-key' label='Perplexity API Key'
       rightLabel={<>{needsUserKey
         ? !perplexityKey && <Link level='body-sm' href={PERPLEXITY_REG_LINK} target='_blank'>API keys</Link>
         : '✔️ already set in server'}

src/modules/llms/vendors/togetherai/TogetherAISourceSetup.tsx

@@ -45,7 +45,7 @@ export function TogetherAISourceSetup(props: { sourceId: DModelSourceId }) {
   return <>
 
     <FormInputKey
-      id='togetherai-key' label='Together AI Key'
+      autoCompleteId='togetherai-key' label='Together AI Key'
       rightLabel={<>{needsUserKey
         ? !togetherKey && <Link level='body-sm' href={TOGETHERAI_REG_LINK} target='_blank'>request Key</Link>
         : '✔️ already set in server'}

src/modules/t2i/prodia/ProdiaSettings.tsx

@@ -79,7 +79,7 @@ export function ProdiaSettings(props: { noSkipKey?: boolean }) {
   return <>
 
     {!backendHasProdia && !!props.noSkipKey && <FormInputKey
-      id='prodia-key' label='Prodia API Key'
+      autoCompleteId='prodia-key' label='Prodia API Key'
       rightLabel={backendHasProdia ? '✔️ already set in server' : 'required'}
       value={apiKey} onChange={setApiKey}
       required={!backendHasProdia} isError={!isValidKey}