Add OpenAI key validation in settings page

[Tharun220602]

Steps

1. Go to Settings
2. Type in any key
3. Click update changes

Observed: Any key gets accepted
Expected: Only valid keys need to be accepted

[PRASANNAPATHI]

I have worked on this issue of OpenAI API key validation on the settings page to ensure only valid keys are accepted. Here's a summary of the changes:

1. API Key Format Validation:

• Introduced the isValidApiKeyFormat function in DashboardService.tsx to validate the API key format using a regex pattern.
• This prevents incorrectly formatted keys from being processed further.

2. Validation Against OpenAI's API & GPT-4o Model:

• Added the validateOpenAIKey function to check the validity of the API key by making a request to OpenAI’s API.
  • First, it checks if the API key format is valid.
  • Then, it makes a request to OpenAI to verify the key and ensure access to the GPT-4o model.

3. Integration in Models.tsx:

• Updated Models.tsx to integrate the validation function. Now, before proceeding with further actions, the API key is checked to ensure both format and validity.

---

Testing:

Before validation:

• Previously, even a 4-digit number like 1234 was accepted.

After validation:

• Invalid pattern example: A string like 12345 will throw an error: 'Invalid API key format'.
• Invalid OpenAI API key example: An expired key like sk-tVqE067MxmfAAPP68iuVT3BlbkFJkUz40Ub1cvyUUXrG3S will throw an error: 'Invalid API key'.

Here is the screenshot of its working,

This is example with expired key,

This is with format validation,

@neelayan7 @JohnHunt999 Could you please assign this issue to me? I’ll be happy to raise a PR once assigned. Thank you!