UI: Minor improvement for ai models

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

@@ -94,7 +94,7 @@
                 toolbarSuffixButton
                 matTooltip="{{ 'rule-node-config.ai.response-json-schema-hint' | translate }}"
                 matTooltipPosition="above">
-          <mat-icon style="color: #7b7b7b">info</mat-icon>
+          <mat-icon class="material-icons">info_outline</mat-icon>
         </button>
       </tb-json-object-edit>
     }
@@ -105,29 +105,31 @@
       <mat-expansion-panel-header style="padding: 16px">
         <mat-panel-title translate>rule-node-config.ai.advanced-settings</mat-panel-title>
       </mat-expansion-panel-header>
-      <div class="tb-form-panel no-border no-padding-top" style="margin-top: 0">
-        <div class="tb-form-row space-between flex-1 columns-xs">
-          <div tb-hint-tooltip-icon="{{'rule-node-config.ai.timeout-hint' | translate}}">{{ 'rule-node-config.ai.timeout' | translate }}</div>
-          <div class="flex flex-row items-center justify-start gap-2">
-            <tb-time-unit-input
-              required
-              inlineField
-              requiredText="{{ 'rule-node-config.ai.timeout-required' | translate }}"
-              minErrorText="{{ 'rule-node-config.ai.timeout-validation' | translate }}"
-              maxErrorText="{{ 'rule-node-config.ai.timeout-validation' | translate }}"
-              [maxTime]="600"
-              [minTime]="1"
-              formControlName="timeoutSeconds">
-            </tb-time-unit-input>
+      <ng-template matExpansionPanelContent>
+        <div class="tb-form-panel no-border no-padding-top" style="margin-top: 0">
+          <div class="tb-form-row space-between flex-1 columns-xs">
+            <div tb-hint-tooltip-icon="{{'rule-node-config.ai.timeout-hint' | translate}}">{{ 'rule-node-config.ai.timeout' | translate }}</div>
+            <div class="flex flex-row items-center justify-start gap-2">
+              <tb-time-unit-input
+                required
+                inlineField
+                requiredText="{{ 'rule-node-config.ai.timeout-required' | translate }}"
+                minErrorText="{{ 'rule-node-config.ai.timeout-validation' | translate }}"
+                maxErrorText="{{ 'rule-node-config.ai.timeout-validation' | translate }}"
+                [maxTime]="600"
+                [minTime]="1"
+                formControlName="timeoutSeconds">
+              </tb-time-unit-input>
+            </div>
+          </div>
+          <div tb-hint-tooltip-icon="{{ 'rule-node-config.ai.force-acknowledgement-hint' | translate }}"
+               class="tb-form-row same-padding">
+            <mat-slide-toggle class="mat-slide margin" formControlName="forceAck">
+              {{ 'rule-node-config.ai.force-acknowledgement' | translate }}
+            </mat-slide-toggle>
           </div>
         </div>
-        <div tb-hint-tooltip-icon="{{ 'rule-node-config.ai.force-acknowledgement-hint' | translate }}"
-             class="tb-form-row same-padding">
-          <mat-slide-toggle class="mat-slide margin" formControlName="forceAck">
-            {{ 'rule-node-config.ai.force-acknowledgement' | translate }}
-          </mat-slide-toggle>
-        </div>
-      </div>
+      </ng-template>
     </mat-expansion-panel>
   </div>
 </section>

ui-ngx/src/app/modules/home/pages/ai-model/ai-model-table-config.resolve.ts

@@ -65,9 +65,7 @@ export class AiModelsTableConfigResolver {
       new EntityTableColumn<AiModel>('provider', 'ai-models.provider', '33%',
           entity => this.translate.instant(AiProviderTranslations.get(entity.configuration.provider))
       ),
-      new EntityTableColumn<AiModel>('aiModel', 'ai-models.model', '33%',
-          entity => entity.configuration.modelId, () => ({}), false
-      )
+      new EntityTableColumn<AiModel>('modelId', 'ai-models.model', '33%', entity => entity.configuration.modelId)
     )
 
     this.config.deleteEntityTitle = model => this.translate.instant('ai-models.delete-model-title', {modelName: model.name});

ui-ngx/src/app/shared/components/json-object-edit.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
+<div class="tb-json-object flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
   <div class="tb-json-object-toolbar flex flex-row items-center justify-start">

ui-ngx/src/app/shared/components/json-object-edit.component.scss

@@ -13,49 +13,49 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
+.tb-json-object {
   position: relative;
 
   .fill-height {
     height: 100%;
   }
-}
 
-.tb-json-object-toolbar {
-  button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
-    align-items: center;
-    vertical-align: middle;
-    min-width: 32px;
-    min-height: 15px;
-    padding: 4px;
-    margin: 0;
-    font-size: .8rem;
-    line-height: 15px;
-    color: #7b7b7b;
-    background: rgba(220, 220, 220, .35);
+  .tb-json-object-toolbar {
+    button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
+      align-items: center;
+      vertical-align: middle;
+      min-width: 32px;
+      min-height: 15px;
+      padding: 4px;
+      margin: 0;
+      font-size: .8rem;
+      line-height: 15px;
+      color: #7b7b7b;
+      background: rgba(220, 220, 220, .35);
 
-    &:not(:last-child) {
-      margin-right: 4px;
+      &:not(:last-child) {
+        margin-right: 4px;
+      }
+    }
+    button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
+      height: 23px;
     }
   }
-  button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
-    height: 23px;
-  }
-}
-
-.tb-json-object-panel {
-  height: 100%;
-  margin-left: 15px;
-  border: 1px solid #c0c0c0;
 
-  #tb-json-input {
-    width: 100%;
-    min-width: 200px;
+  .tb-json-object-panel {
     height: 100%;
-    min-height: 300px;
+    margin-left: 15px;
+    border: 1px solid #c0c0c0;
+
+    #tb-json-input {
+      width: 100%;
+      min-width: 200px;
+      height: 100%;
+      min-height: 300px;
 
-    &:not(.fill-height) {
-      min-height: 200px;
+      &:not(.fill-height) {
+        min-height: 200px;
+      }
     }
   }
 }

ui-ngx/src/app/shared/components/json-object-edit.component.ts

@@ -19,21 +19,23 @@ import {
   Component,
   ElementRef,
   forwardRef,
+  HostBinding,
   Input,
   OnDestroy,
   OnInit,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {
+  AbstractControl,
   ControlValueAccessor,
-  UntypedFormControl,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
-  Validator,
-  AbstractControl, ValidationErrors
+  UntypedFormControl,
+  ValidationErrors,
+  Validator
 } from '@angular/forms';
 import { Ace } from 'ace-builds';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -48,6 +50,7 @@ export const jsonRequired = (control: AbstractControl): ValidationErrors | null
   selector: 'tb-json-object-edit',
   templateUrl: './json-object-edit.component.html',
   styleUrls: ['./json-object-edit.component.scss'],
+  encapsulation: ViewEncapsulation.None,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -63,6 +66,8 @@ export const jsonRequired = (control: AbstractControl): ValidationErrors | null
 })
 export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Validator, OnDestroy {
 
+  @HostBinding('style.position') position = 'relative';
+
   @ViewChild('jsonEditor', {static: true})
   jsonEditorElmRef: ElementRef;