UI: minor fix for ai-models

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

@@ -36,6 +36,7 @@ import {
 import { AiModelService } from '@core/http/ai-model.service';
 import { CheckConnectivityDialogComponent } from '@home/components/ai-model/check-connectivity-dialog.component';
 import { map } from 'rxjs/operators';
+import { deepTrim } from '@core/utils';
 
 export interface AIModelDialogData {
   AIModel?: AiModel;
@@ -162,6 +163,6 @@ export class AIModelDialogComponent extends DialogComponent<AIModelDialogCompone
 
   add(): void {
     const aiModel = {...this.data.AIModel, ...this.aiModelForms.value} as AiModel;
-    this.aiModelService.saveAiModel(aiModel).subscribe(aiModel => this.dialogRef.close(aiModel));
+    this.aiModelService.saveAiModel(deepTrim(aiModel)).subscribe(aiModel => this.dialogRef.close(aiModel));
   }
 }

ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html

@@ -79,25 +79,24 @@
       <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ getResponseFormatHint }}">
         {{ 'rule-node-config.ai.response-format' | translate }}
       </div>
-      <tb-toggle-select formControlName="type" [disabled]="disabledResponseFormatType">
+      <tb-toggle-select formControlName="type">
         <tb-toggle-option [value]="responseFormat.TEXT">{{ 'rule-node-config.ai.response-text' | translate }}</tb-toggle-option>
         <tb-toggle-option [value]="responseFormat.JSON">{{ 'rule-node-config.ai.response-json' | translate }}</tb-toggle-option>
         <tb-toggle-option [value]="responseFormat.JSON_SCHEMA">{{ 'rule-node-config.ai.response-json-schema' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    @if (aiConfigForm.get('responseFormat.type').value === responseFormat.JSON_SCHEMA) {
+    <tb-json-object-edit
-      <tb-json-object-edit
+      jsonRequired
-        jsonRequired
+      [class.!hidden]="aiConfigForm.get('responseFormat.type').value !== responseFormat.JSON_SCHEMA"
-        label="{{ 'rule-node-config.ai.response-json-schema' | translate }}"
+      label="{{ 'rule-node-config.ai.response-json-schema' | translate }}"
-        formControlName="schema">
+      formControlName="schema">
-        <button mat-icon-button class="tb-mat-32"
+      <button mat-icon-button class="tb-mat-32"
-                toolbarSuffixButton
+              toolbarSuffixButton
-                matTooltip="{{ 'rule-node-config.ai.response-json-schema-hint' | translate }}"
+              matTooltip="{{ 'rule-node-config.ai.response-json-schema-hint' | translate }}"
-                matTooltipPosition="above">
+              matTooltipPosition="above">
-          <mat-icon class="material-icons">info_outline</mat-icon>
+        <mat-icon class="material-icons">info_outline</mat-icon>
-        </button>
+      </button>
-      </tb-json-object-edit>
+    </tb-json-object-edit>
-    }
   </div>
 
   <div class="tb-form-panel stroked no-padding no-gap">

ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.ts

@@ -23,6 +23,7 @@ import { AIModelDialogComponent, AIModelDialogData } from '@home/components/ai-m
 import { AiModel, AiRuleNodeResponseFormatTypeOnlyText, ResponseFormat } from '@shared/models/ai-model.models';
 import { deepTrim } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
+import { jsonRequired } from '@shared/components/json-object-edit.component';
 
 @Component({
   selector: 'tb-external-node-ai-config',
@@ -37,8 +38,6 @@ export class AiConfigComponent extends RuleNodeConfigurationComponent {
 
   responseFormat = ResponseFormat;
 
-  disabledResponseFormatType: boolean;
-
   constructor(private fb: UntypedFormBuilder,
               private translate: TranslateService,
               private dialog: MatDialog) {
@@ -56,7 +55,7 @@ export class AiConfigComponent extends RuleNodeConfigurationComponent {
       userPrompt: [configuration?.userPrompt ?? '', [Validators.required, Validators.maxLength(10000), Validators.pattern(/.*\S.*/)]],
       responseFormat: this.fb.group({
         type: [configuration?.responseFormat?.type ?? ResponseFormat.JSON, []],
-        schema: [configuration?.responseFormat?.schema ?? null, [Validators.required]],
+        schema: [configuration?.responseFormat?.schema ?? null, [jsonRequired]],
       }),
       timeoutSeconds: [configuration?.timeoutSeconds ?? 60, []],
       forceAck: [configuration?.forceAck ?? true, []]
@@ -88,10 +87,10 @@ export class AiConfigComponent extends RuleNodeConfigurationComponent {
         if (this.aiConfigForm.get('responseFormat.type').value !== ResponseFormat.TEXT) {
           this.aiConfigForm.get('responseFormat.type').patchValue(ResponseFormat.TEXT, {emitEvent: true});
         }
-        this.disabledResponseFormatType = true;
+        this.aiConfigForm.get('responseFormat.type').disable();
       }
     } else {
-      this.disabledResponseFormatType = false;
+      this.aiConfigForm.get('responseFormat.type').enable();
     }
   }
 

ui-ngx/src/app/modules/home/pages/ai-model/ai-model-table-header.component.ts

@@ -23,6 +23,11 @@ import { AiModel } from '@shared/models/ai-model.models';
 @Component({
   selector: 'tb-ai-model-table-header',
   templateUrl: './ai-model-table-header.component.html',
+  styles: [`
+    :host {
+        width: 100%;
+    }
+  `],
   styleUrls: []
 })
 export class AiModelTableHeaderComponent extends EntityTableHeaderComponent<AiModel> {