From 559b67b9216ff20b5383c1f75422e4560c9930df Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 8 Aug 2025 10:57:56 +0300
Subject: [PATCH] UI: minor fix for ai-models

---
 .../ai-model/ai-model-dialog.component.ts     |  3 ++-
 .../external/ai-config.component.html         | 27 +++++++++----------
 .../rule-node/external/ai-config.component.ts |  9 +++----
 .../ai-model-table-header.component.ts        |  5 ++++
 4 files changed, 24 insertions(+), 20 deletions(-)

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 db5d1d7e23..c459d66f12 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
@@ -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));
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
index 80519cea28..f590dae84f 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.html
+++ b/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
-        jsonRequired
-        label="{{ 'rule-node-config.ai.response-json-schema' | translate }}"
-        formControlName="schema">
-        <button mat-icon-button class="tb-mat-32"
-                toolbarSuffixButton
-                matTooltip="{{ 'rule-node-config.ai.response-json-schema-hint' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon class="material-icons">info_outline</mat-icon>
-        </button>
-      </tb-json-object-edit>
-    }
+    <tb-json-object-edit
+      jsonRequired
+      [class.!hidden]="aiConfigForm.get('responseFormat.type').value !== responseFormat.JSON_SCHEMA"
+      label="{{ 'rule-node-config.ai.response-json-schema' | translate }}"
+      formControlName="schema">
+      <button mat-icon-button class="tb-mat-32"
+              toolbarSuffixButton
+              matTooltip="{{ 'rule-node-config.ai.response-json-schema-hint' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon class="material-icons">info_outline</mat-icon>
+      </button>
+    </tb-json-object-edit>
   </div>
 
   <div class="tb-form-panel stroked no-padding no-gap">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.ts
index 47313da81d..1ef8ebca72 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/ai-config.component.ts
+++ b/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();
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/pages/ai-model/ai-model-table-header.component.ts b/ui-ngx/src/app/modules/home/pages/ai-model/ai-model-table-header.component.ts
index 48889dc877..013642dcb2 100644
--- a/ui-ngx/src/app/modules/home/pages/ai-model/ai-model-table-header.component.ts
+++ b/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> {