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,6 +105,7 @@
       <mat-expansion-panel-header style="padding: 16px">
         <mat-panel-title translate>rule-node-config.ai.advanced-settings</mat-panel-title>
       </mat-expansion-panel-header>
+      <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>
@@ -128,6 +129,7 @@
             </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%',
+      new EntityTableColumn<AiModel>('modelId', 'ai-models.model', '33%', entity => entity.configuration.modelId)
-          entity => entity.configuration.modelId, () => ({}), false
-      )
     )
 
     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,15 +13,14 @@
  * 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 {
+  .tb-json-object-toolbar {
     button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
       align-items: center;
       vertical-align: middle;
@@ -41,9 +40,9 @@
     button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
       height: 23px;
     }
-}
+  }
 
-.tb-json-object-panel {
+  .tb-json-object-panel {
     height: 100%;
     margin-left: 15px;
     border: 1px solid #c0c0c0;
@@ -58,4 +57,5 @@
         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,
+  UntypedFormControl,
-  AbstractControl, ValidationErrors
+  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;