From 2133bebc901ae1a260450494966de065144c75ff Mon Sep 17 00:00:00 2001
From: haddadrm <121486289+haddadrm@users.noreply.github.com>
Date: Wed, 26 Feb 2025 07:32:48 +0400
Subject: [PATCH] Implemented a solution to properly format provider names in
 the dropdown menus:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 10 ++-----
 ui/lib/utils.ts          | 65 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/ui/app/settings/page.tsx b/ui/app/settings/page.tsx
index 6234157..5b527c1 100644
--- a/ui/app/settings/page.tsx
+++ b/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:
-                            provider.charAt(0).toUpperCase() +
-                            provider.slice(1),
+                          label: formatProviderName(provider),
                         }),
                       )}
                     />
@@ -642,9 +640,7 @@ const Page = () => {
                       options={Object.keys(config.embeddingModelProviders).map(
                         (provider) => ({
                           value: provider,
-                          label:
-                            provider.charAt(0).toUpperCase() +
-                            provider.slice(1),
+                          label: formatProviderName(provider),
                         }),
                       )}
                     />
diff --git a/ui/lib/utils.ts b/ui/lib/utils.ts
index 30d6da5..d00521c 100644
--- a/ui/lib/utils.ts
+++ b/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,