LLMs: centralize config UI into 1 function

Author: enricoros

src/modules/llms/components/LLMVendorSetup.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import type { DModelsService, DModelsServiceId } from '~/common/stores/llms/llms.service.types';
+
+import { findModelVendor, ModelVendorId } from '../vendors/vendors.registry';
+
+
+// direct imports for all vendor setup components - NOTE: we could lazy load if this becomes a performance issue
+import { AlibabaServiceSetup } from '../vendors/alibaba/AlibabaServiceSetup';
+import { AnthropicServiceSetup } from '../vendors/anthropic/AnthropicServiceSetup';
+import { AzureServiceSetup } from '../vendors/azure/AzureServiceSetup';
+import { DeepseekAIServiceSetup } from '../vendors/deepseek/DeepseekAIServiceSetup';
+import { GeminiServiceSetup } from '../vendors/gemini/GeminiServiceSetup';
+import { GroqServiceSetup } from '../vendors/groq/GroqServiceSetup';
+import { LMStudioServiceSetup } from '../vendors/lmstudio/LMStudioServiceSetup';
+import { LocalAIServiceSetup } from '../vendors/localai/LocalAIServiceSetup';
+import { MistralServiceSetup } from '../vendors/mistral/MistralServiceSetup';
+import { OllamaServiceSetup } from '../vendors/ollama/OllamaServiceSetup';
+import { OpenAIServiceSetup } from '../vendors/openai/OpenAIServiceSetup';
+import { OpenPipeServiceSetup } from '../vendors/openpipe/OpenPipeServiceSetup';
+import { OpenRouterServiceSetup } from '../vendors/openrouter/OpenRouterServiceSetup';
+import { PerplexityServiceSetup } from '../vendors/perplexity/PerplexityServiceSetup';
+import { TogetherAIServiceSetup } from '../vendors/togetherai/TogetherAIServiceSetup';
+import { XAIServiceSetup } from '../vendors/xai/XAIServiceSetup';
+
+
+/**
+ * Hardcoded mapping with the setup components for each vendor.
+ * NOTE: we do it here to only depend on this file (even lazily) and avoid to import all the Components (UI)
+ *       code on vendor definitions (which must be lightweight as it impacts boot time).
+ */
+const vendorSetupComponents: Record<ModelVendorId, React.ComponentType<{ serviceId: DModelsServiceId }>> = {
+  alibaba: AlibabaServiceSetup,
+  anthropic: AnthropicServiceSetup,
+  azure: AzureServiceSetup,
+  deepseek: DeepseekAIServiceSetup,
+  googleai: GeminiServiceSetup,
+  groq: GroqServiceSetup,
+  lmstudio: LMStudioServiceSetup,
+  localai: LocalAIServiceSetup,
+  mistral: MistralServiceSetup,
+  ollama: OllamaServiceSetup,
+  openai: OpenAIServiceSetup,
+  openpipe: OpenPipeServiceSetup,
+  openrouter: OpenRouterServiceSetup,
+  perplexity: PerplexityServiceSetup,
+  togetherai: TogetherAIServiceSetup,
+  xai: XAIServiceSetup,
+} as const;
+
+
+export function LLMVendorSetup(props: { service: DModelsService }) {
+  const vendor = findModelVendor(props.service.vId);
+  if (!vendor)
+    return 'Configuration issue: Vendor not found for Service ' + props.service.id;
+
+  const SetupComponent = vendorSetupComponents[vendor.id];
+  if (!SetupComponent)
+    return 'Configuration issue: Setup component not found for vendor ' + vendor.id;
+
+  return <SetupComponent key={props.service.id} serviceId={props.service.id} />;
+}

src/modules/llms/models-modal/ModelsModal.tsx

@@ -11,28 +11,20 @@ import { useHasLLMs, useModelsServices } from '~/common/stores/llms/llms.hooks';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 
 import { LLMOptionsModal } from './LLMOptionsModal';
+import { LLMVendorSetup } from '../components/LLMVendorSetup';
 import { ModelsList } from './ModelsList';
 import { ModelsServiceSelector } from './ModelsServiceSelector';
 import { ModelsWizard } from './ModelsWizard';
-import { findModelVendor } from '../vendors/vendors.registry';
 
 
 // configuration
 const MODELS_WIZARD_ENABLE_INITIALLY = true;
 
 
-function VendorServiceSetup(props: { service: DModelsService }) {
-  const vendor = findModelVendor(props.service.vId);
-  if (!vendor)
-    return 'Configuration issue: Vendor not found for Service ' + props.service.id;
-  return <vendor.ServiceSetupComponent key={props.service.id} serviceId={props.service.id} />;
-}
-
-
 type TabValue = 'wizard' | 'setup' | 'defaults';
 
 /**
- * Note: the reason for this component separation from the parent state, is delayed state intitialization.
+ * Note: the reason for this component separation from the parent state, is delayed state initialization.
  */
 function ModelsConfiguratorModal(props: {
   modelsServices: DModelsService[],
@@ -148,7 +140,7 @@ function ModelsConfiguratorModal(props: {
       {isTabSetup && (
         <Box sx={{ display: 'grid', gap: 'var(--Card-padding)' }}>
           {activeService
-            ? <VendorServiceSetup service={activeService} />
+            ? <LLMVendorSetup service={activeService} />
             : <Box sx={{ minHeight: '7.375rem' }} />
           }
         </Box>

src/modules/llms/vendors/IModelVendor.ts

@@ -5,7 +5,6 @@ import type { SvgIconProps } from '@mui/joy';
 import type { BackendCapabilities } from '~/modules/backend/store-backend-capabilities';
 
 import type { DLLM } from '~/common/stores/llms/llms.types';
-import type { DModelsServiceId } from '~/common/stores/llms/llms.service.types';
 
 import type { ModelDescriptionSchema } from '../server/llm.server.types';
 import type { ModelVendorId } from './vendors.registry';
@@ -24,7 +23,6 @@ export interface IModelVendor<TServiceSettings extends Record<string, any> = {},
 
   // components
   readonly Icon: React.FunctionComponent<SvgIconProps>;
-  readonly ServiceSetupComponent: React.ComponentType<{ serviceId: DModelsServiceId }>;
 
   /// abstraction interface ///
 

src/modules/llms/vendors/alibaba/alibaba.vendor.ts

@@ -4,8 +4,6 @@ import type { IModelVendor } from '../IModelVendor';
 import type { OpenAIAccessSchema } from '../../server/openai/openai.router';
 import { ModelVendorOpenAI } from '../openai/openai.vendor';
 
-import { AlibabaServiceSetup } from './AlibabaServiceSetup';
-
 
 interface DAlibabaServiceSettings {
   alibabaOaiKey: string;
@@ -22,7 +20,6 @@ export const ModelVendorAlibaba: IModelVendor<DAlibabaServiceSettings, OpenAIAcc
 
   // components
   Icon: AlibabaCloudIcon,
-  ServiceSetupComponent: AlibabaServiceSetup,
 
   // functions
   initializeSetup: () => ({

src/modules/llms/vendors/anthropic/anthropic.vendor.ts

@@ -4,8 +4,6 @@ import { apiAsync } from '~/common/util/trpc.client';
 import type { AnthropicAccessSchema } from '../../server/anthropic/anthropic.router';
 import type { IModelVendor } from '../IModelVendor';
 
-import { AnthropicServiceSetup } from './AnthropicServiceSetup';
-
 
 // special symbols
 export const isValidAnthropicApiKey = (apiKey?: string) => !!apiKey && (apiKey.startsWith('sk-') ? apiKey.length >= 39 : apiKey.length > 1);
@@ -27,7 +25,6 @@ export const ModelVendorAnthropic: IModelVendor<DAnthropicServiceSettings, Anthr
 
   // components
   Icon: AnthropicIcon,
-  ServiceSetupComponent: AnthropicServiceSetup,
 
   // functions
   getTransportAccess: (partialSetup): AnthropicAccessSchema => ({

src/modules/llms/vendors/azure/azure.vendor.ts

@@ -5,8 +5,6 @@ import type { OpenAIAccessSchema } from '../../server/openai/openai.router';
 
 import { ModelVendorOpenAI } from '../openai/openai.vendor';
 
-import { AzureServiceSetup } from './AzureServiceSetup';
-
 
 // special symbols
 export const isValidAzureApiKey = (apiKey?: string) => !!apiKey && apiKey.length >= 32;
@@ -42,7 +40,6 @@ export const ModelVendorAzure: IModelVendor<DAzureServiceSettings, OpenAIAccessS
 
   // components
   Icon: AzureIcon,
-  ServiceSetupComponent: AzureServiceSetup,
 
   // functions
   getTransportAccess: (partialSetup): OpenAIAccessSchema => ({

src/modules/llms/vendors/deepseek/deepseekai.vendor.ts

@@ -5,8 +5,6 @@ import type { OpenAIAccessSchema } from '../../server/openai/openai.router';
 
 import { ModelVendorOpenAI } from '../openai/openai.vendor';
 
-import { DeepseekAIServiceSetup } from './DeepseekAIServiceSetup';
-
 
 export interface DDeepseekServiceSettings {
   deepseekKey: string;
@@ -22,7 +20,6 @@ export const ModelVendorDeepseek: IModelVendor<DDeepseekServiceSettings, OpenAIA
 
   // components
   Icon: DeepseekIcon,
-  ServiceSetupComponent: DeepseekAIServiceSetup,
 
   // functions
   initializeSetup: () => ({

src/modules/llms/vendors/gemini/gemini.vendor.ts

@@ -5,8 +5,6 @@ import type { GeminiAccessSchema } from '../../server/gemini/gemini.router';
 import type { GeminiWire_Safety } from '~/modules/aix/server/dispatch/wiretypes/gemini.wiretypes';
 import type { IModelVendor } from '../IModelVendor';
 
-import { GeminiServiceSetup } from './GeminiServiceSetup';
-
 
 interface DGeminiServiceSettings {
   geminiKey: string;
@@ -35,7 +33,6 @@ export const ModelVendorGemini: IModelVendor<DGeminiServiceSettings, GeminiAcces
 
   // components
   Icon: GeminiIcon,
-  ServiceSetupComponent: GeminiServiceSetup,
 
   // functions
   initializeSetup: () => ({

src/modules/llms/vendors/groq/groq.vendor.ts

@@ -5,8 +5,6 @@ import type { OpenAIAccessSchema } from '../../server/openai/openai.router';
 
 import { ModelVendorOpenAI } from '../openai/openai.vendor';
 
-import { GroqServiceSetup } from './GroqServiceSetup';
-
 
 interface DGroqServiceSettings {
   groqKey: string;
@@ -22,7 +20,6 @@ export const ModelVendorGroq: IModelVendor<DGroqServiceSettings, OpenAIAccessSch
 
   // components
   Icon: GroqIcon,
-  ServiceSetupComponent: GroqServiceSetup,
 
   // functions
   initializeSetup: () => ({

src/modules/llms/vendors/lmstudio/lmstudio.vendor.ts

@@ -3,7 +3,6 @@ import type { OpenAIAccessSchema } from '../../server/openai/openai.router';
 
 import { ModelVendorOpenAI } from '../openai/openai.vendor';
 
-import { LMStudioServiceSetup } from './LMStudioServiceSetup';
 import { LMStudioIcon } from '~/common/components/icons/vendors/LMStudioIcon';
 
 
@@ -20,7 +19,6 @@ export const ModelVendorLMStudio: IModelVendor<DLMStudioServiceSettings, OpenAIA
 
   // components
   Icon: LMStudioIcon,
-  ServiceSetupComponent: LMStudioServiceSetup,
 
   // functions
   initializeSetup: () => ({