Merge pull request #6 from ArtemDzhereleiko/AD/feature/openai-base-url

Add baseUrl for OpenAI provider

ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html

@@ -116,14 +116,24 @@
                 <input matInput formControlName="serviceVersion">
               </mat-form-field>
             }
+            @if (providerFieldsList.includes('baseUrl')) {
+              <mat-form-field class="mat-block flex-1" appearance="outline">
+                <mat-label translate>ai-models.baseurl</mat-label>
+                <input required matInput formControlName="baseUrl">
+                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
+                  aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')">
+                  {{ 'ai-models.baseurl-required' | translate }}
+                </mat-error>
+              </mat-form-field>
+            }
             @if (providerFieldsList.includes('apiKey')) {
               <mat-form-field class="mat-block flex-1" appearance="outline">
                 <mat-label translate>ai-models.api-key</mat-label>
-                <input type="password" required matInput formControlName="apiKey" autocomplete="new-password">
+                <input type="password" matInput formControlName="apiKey" [required]="apiKeyRequired" autocomplete="new-password">
                 <tb-toggle-password matSuffix></tb-toggle-password>
                 <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.apiKey').hasError('required') ||
                   aiModelForms.get('configuration.providerConfig.apiKey').hasError('pattern')">
-                  {{ 'ai-models.api-key-required' | translate }}
+                  {{ ( provider === aiProvider.OPENAI ? 'ai-models.api-key-open-ai-required' : 'ai-models.api-key-required') | translate }}
                 </mat-error>
               </mat-form-field>
             }
@@ -158,16 +168,6 @@
                 </mat-error>
               </mat-form-field>
             }
-            @if (providerFieldsList.includes('baseUrl')) {
-              <mat-form-field class="mat-block flex-1" appearance="outline">
-                <mat-label translate>ai-models.baseurl</mat-label>
-                <input required matInput formControlName="baseUrl">
-                <mat-error *ngIf="aiModelForms.get('configuration.providerConfig.baseUrl').hasError('required') ||
-                  aiModelForms.get('configuration.providerConfig.baseUrl').hasError('pattern')">
-                  {{ 'ai-models.baseurl-required' | translate }}
-                </mat-error>
-              </mat-form-field>
-            }
             @if (provider === aiProvider.OLLAMA) {
               <div class="tb-form-panel stroked no-gap no-padding-bottom mb-4" formGroupName="auth">
                 <div class="flex flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">

ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts

@@ -74,6 +74,9 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
 
   authenticationHint: string;
 
+  apiKeyRequired = true;
+  private readonly openAiDefaultBaseUrl = 'https://api.openai.com/v1';
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               protected dialogRef: MatDialogRef<AIModelDialogComponent, AiModel>,
@@ -107,7 +110,7 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
           region: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.region : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
           accessKeyId: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.accessKeyId : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
           secretAccessKey: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.secretAccessKey : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
-          baseUrl: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.baseUrl : '', [Validators.required, Validators.pattern(/.*\S.*/)]],
+          baseUrl: [this.data.AIModel ? this.data.AIModel.configuration.providerConfig?.baseUrl : this.openAiDefaultBaseUrl, [Validators.required, Validators.pattern(/.*\S.*/)]],
           auth: this.fb.group({
             type: [this.data.AIModel?.configuration?.providerConfig?.auth?.type ?? AuthenticationType.NONE],
             username: [this.data.AIModel?.configuration?.providerConfig?.auth?.username ?? '', [Validators.required, Validators.pattern(/.*\S.*/)]],
@@ -133,6 +136,18 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
       this.aiModelForms.get('configuration.modelId').reset('');
       this.aiModelForms.get('configuration.providerConfig').reset({});
       this.updateValidation(provider);
+      if (provider === AiProvider.OPENAI) {
+        this.aiModelForms.get('configuration.providerConfig.baseUrl').patchValue(this.openAiDefaultBaseUrl, {emitEvent: false});
+        this.updateApiKeyValidatorForOpenAIProvider(this.openAiDefaultBaseUrl);
+      }
+    });
+
+    this.aiModelForms.get('configuration.providerConfig.baseUrl').valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe((url: string) => {
+      if (this.provider === AiProvider.OPENAI) {
+        this.updateApiKeyValidatorForOpenAIProvider(url);
+      }
     });
 
     this.aiModelForms.get('configuration.providerConfig.auth.type').valueChanges.pipe(
@@ -161,6 +176,17 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
       );
   }
 
+  private updateApiKeyValidatorForOpenAIProvider(url: string) {
+    if (url !== this.openAiDefaultBaseUrl) {
+      this.aiModelForms.get('configuration.providerConfig.apiKey').removeValidators(Validators.required);
+      this.apiKeyRequired = false;
+    } else {
+      this.aiModelForms.get('configuration.providerConfig.apiKey').addValidators(Validators.required);
+      this.apiKeyRequired = true;
+    }
+    this.aiModelForms.get('configuration.providerConfig.apiKey').updateValueAndValidity({emitEvent: false});
+  }
+
   private getAuthenticationHint(type: AuthenticationType) {
     if (type === AuthenticationType.BASIC) {
       this.authenticationHint = this.translate.instant('ai-models.authentication-basic-hint');

ui-ngx/src/app/shared/models/ai-model.models.ts

@@ -116,7 +116,7 @@ export const AiModelMap = new Map<AiProvider, { modelList: string[], providerFie
         'gpt-4o',
         'gpt-4o-mini',
       ],
-      providerFieldsList: ['apiKey'],
+      providerFieldsList: ['baseUrl', 'apiKey'],
       modelFieldsList: ['temperature', 'topP', 'frequencyPenalty', 'presencePenalty', 'maxOutputTokens'],
     },
   ],

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1120,6 +1120,7 @@
         "provider": "Provider",
         "api-key": "API key",
         "api-key-required": "API key is required.",
+        "api-key-open-ai-required": "API key is required when using the official OpenAI API.",
         "project-id": "Project ID",
         "project-id-required": "Project ID is required",
         "location": "Location",