Implemented a solution to properly format provider

names in the dropdown menus:

1. Created a formatProviderName utility function in ui/lib/utils.ts that:

-Contains a comprehensive mapping of provider keys to their properly
formatted display names
-Handles current providers like "openai" → "OpenAI" and "lm_studio" → "LM Studio"
-Includes future-proofing for many additional providers like NVIDIA,
OpenRouter, Mistral AI, etc.
-Provides a fallback formatting mechanism for any unknown providers
(replacing underscores with spaces and capitalizing each word)

2. Updated both dropdown menus in the settings page to use this function:

-The Chat Model Provider dropdown now displays properly formatted names
-The Embedding Model Provider dropdown also uses the same formatting

This is a purely aesthetic change that improves the UI by displaying
provider names with proper capitalization and spacing that matches
their official branding. The internal values and functionality remain
unchanged since only the display labels were modified.

The app will now show properly formatted provider names like "OpenAI",
"LM Studio", and "DeepSeek" instead of "Openai", "Lm_studio", and "Deepseek".

ui/app/settings/page.tsx

@@ -2,7 +2,7 @@
 
 import { Settings as SettingsIcon, ArrowLeft, Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
+import { cn, formatProviderName } from '@/lib/utils';
 import { Switch } from '@headlessui/react';
 import ThemeSwitcher from '@/components/theme/Switcher';
 import { ImagesIcon, VideoIcon } from 'lucide-react';
@@ -500,9 +500,7 @@ const Page = () => {
                       options={Object.keys(config.chatModelProviders).map(
                         (provider) => ({
                           value: provider,
-                          label:
+                          label: formatProviderName(provider),
-                            provider.charAt(0).toUpperCase() +
-                            provider.slice(1),
                         }),
                       )}
                     />
@@ -642,9 +640,7 @@ const Page = () => {
                       options={Object.keys(config.embeddingModelProviders).map(
                         (provider) => ({
                           value: provider,
-                          label:
+                          label: formatProviderName(provider),
-                            provider.charAt(0).toUpperCase() +
-                            provider.slice(1),
                         }),
                       )}
                     />

ui/lib/utils.ts

@@ -3,6 +3,71 @@ import { twMerge } from 'tailwind-merge';
 
 export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));
 
+export const formatProviderName = (provider: string): string => {
+  // Mapping of provider keys to their properly formatted display names
+  const providerNameMap: Record<string, string> = {
+    // Providers
+    'openai': 'OpenAI',
+    'groq': 'Groq',
+    'anthropic': 'Anthropic',
+    'gemini': 'Gemini',
+    'ollama': 'Ollama',
+    'deepseek': 'DeepSeek',
+    'lm_studio': 'LM Studio',
+    'custom_openai': 'Custom OpenAI',
+    'transformers': 'Transformers',
+    'nvidia': 'NVIDIA',
+    'openrouter': 'OpenRouter',
+    'together': 'Together AI',
+    'together_ai': 'Together AI',
+    'mistral': 'Mistral AI',
+    'mistral_ai': 'Mistral AI',
+    'le_chat_mistral': 'Le Chat Mistral',
+    'xai': 'xAI',
+    'grok': 'Grok',
+    'cohere': 'Cohere',
+    'ai21': 'AI21 Labs',
+    'ai21_labs': 'AI21 Labs',
+    'huggingface': 'Hugging Face',
+    'hugging_face': 'Hugging Face',
+    'replicate': 'Replicate',
+    'stability': 'Stability AI',
+    'stability_ai': 'Stability AI',
+    'perplexity': 'Perplexity AI',
+    'perplexity_ai': 'Perplexity AI',
+    'claude': 'Claude',
+    'azure_openai': 'Azure OpenAI',
+    'amazon': 'Amazon Bedrock',
+    'bedrock': 'Amazon Bedrock',
+    'amazon_bedrock': 'Amazon Bedrock',
+    'vertex': 'Vertex AI',
+    'vertex_ai': 'Vertex AI',
+    'google': 'Google AI',
+    'google_ai': 'Google AI',
+    'meta': 'Meta AI',
+    'meta_ai': 'Meta AI',
+    'llama': 'Llama',
+    'falcon': 'Falcon',
+    'aleph_alpha': 'Aleph Alpha',
+    'forefront': 'Forefront AI',
+    'forefront_ai': 'Forefront AI'
+  };
+
+  // Return the mapped name if it exists
+  if (provider in providerNameMap) {
+    return providerNameMap[provider];
+  }
+
+  // Default formatting for unknown providers:
+  // 1. Replace underscores with spaces
+  // 2. Capitalize each word
+  return provider
+    .replace(/_/g, ' ')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
 export const formatTimeDifference = (
   date1: Date | string,
   date2: Date | string,