From 22dc482b9ee43672ad99138833929de1e5c9aa33 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Tue, 30 Sep 2025 09:47:30 +0300
Subject: [PATCH 1/2] UI: Add baseUrl for openAI provider

---
 .../ai-model/ai-model-dialog.component.html   | 24 +++++++++---------
 .../ai-model/ai-model-dialog.component.ts     | 25 ++++++++++++++++++-
 .../src/app/shared/models/ai-model.models.ts  |  2 +-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 4 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
index abfe8500b4..5aa323fe7d 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
+++ b/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" 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">
diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
index 9d0d28e627..935f35ab5f 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
@@ -74,6 +74,8 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
 
   authenticationHint: string;
 
+  private readonly openAiDefaultBaseUrl = 'https://api.openai.com/v1';
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               protected dialogRef: MatDialogRef<AIModelDialogComponent, AiModel>,
@@ -107,7 +109,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 +135,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 +175,15 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
       );
   }
 
+  private updateApiKeyValidatorForOpenAIProvider(url: string) {
+    if (url !== this.openAiDefaultBaseUrl) {
+      this.aiModelForms.get('configuration.providerConfig.apiKey').removeValidators(Validators.required);
+    } else {
+      this.aiModelForms.get('configuration.providerConfig.apiKey').addValidators(Validators.required);
+    }
+    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');
diff --git a/ui-ngx/src/app/shared/models/ai-model.models.ts b/ui-ngx/src/app/shared/models/ai-model.models.ts
index b0a88d076e..09795b3068 100644
--- a/ui-ngx/src/app/shared/models/ai-model.models.ts
+++ b/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'],
     },
   ],
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index d39078f56a..78eec9a30a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",

From 90d9b75790f30a2e89a7d9dd84c3bc42475beabe Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Tue, 30 Sep 2025 10:34:37 +0300
Subject: [PATCH 2/2] UI: Add for apiKey required value

---
 .../home/components/ai-model/ai-model-dialog.component.html    | 2 +-
 .../home/components/ai-model/ai-model-dialog.component.ts      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
index 5aa323fe7d..44fe9dcda7 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
@@ -129,7 +129,7 @@
             @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" 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')">
diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
index 935f35ab5f..02f18e60b5 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.ts
@@ -74,6 +74,7 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
 
   authenticationHint: string;
 
+  apiKeyRequired = true;
   private readonly openAiDefaultBaseUrl = 'https://api.openai.com/v1';
 
   constructor(protected store: Store<AppState>,
@@ -178,8 +179,10 @@ 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});
   }