Add Format Validation for Groq API Key Input and Make Error and Success Messages More Persistent and Noticeable

[shruti-namaye]

Issue 1: API Key Field Accepts Invalid Formats

Issue:
The API key input field currently accepts any string, even if it doesn't resemble a valid Groq API key.

Cause:
There's no format validation applied before saving or using the key.

How it Affects:
This leads to unnecessary API requests with obviously invalid keys, confusing users when they see "Invalid key" errors only after submission.

Suggested Fix:
Add a basic pattern check to verify that the key starts with gsk- and has a valid structure.

Solution:

if (!/^gsk-[\w-]{32,}$/.test(apiKey)) {
errorMessage.textContent = 'Invalid format. Please enter a valid Groq API key.';
return;
}

Benefits:
1.Prevents clearly invalid submissions

2.Reduces failed API calls

3.Improves user experience with instant feedback

Issue 2: Temporary Error and Success Messages Disappear Too Quickly

Issue:
Messages like “Invalid API key” or “Settings saved successfully” are only shown briefly and then disappear automatically.

Cause:
The current implementation dynamically creates and removes message elements after a short timeout (3 seconds).

How it Affects:
Users may miss important feedback, especially if they look away or get distracted. There's also no persistent visual cue to guide the user after an error.

Suggested Fix:
Display status messages in a dedicated element near the form fields and let them remain until the next action.

Solution:
Add a permanent container (e.g.

)
Use .textContent to update it dynamically

html:

js:
statusMessage.textContent = 'API key saved successfully';
statusMessage.style.color = 'green';

Benefits:
1.Ensures users see important messages

2.Makes debugging easier

3.Provides a more professional and accessible UI