manager: smoother ai services formatting (fixes #9265) (#9266)

Co-authored-by: dogi <[email protected]>

Author: Mutugiii

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.59",
+  "version": "0.20.60",
   "myplanet": {
-    "latest": "v0.35.82",
-    "min": "v0.34.82"
+    "latest": "v0.36.9",
+    "min": "v0.35.9"
   },
   "scripts": {
     "ng": "ng",

src/app/manager-dashboard/manager-aiservices.component.html

@@ -2,29 +2,29 @@
   <button mat-icon-button routerLink="/manager">
     <mat-icon>arrow_back</mat-icon>
   </button>
-  <span i18n>AI API Configurations</span>
+  <span i18n>AI Configurations</span>
 </mat-toolbar>
 
 <form class="container" [formGroup]="configForm">
   <mat-card class="card">
     <mat-card-title i18n>API Keys</mat-card-title>
     <mat-card-content *ngIf="configuration.keys">
       <mat-list>
-        <mat-list-item *ngFor="let key of objectKeys(configuration.keys)">
+        <mat-list-item *ngFor="let apiKey of configuration.keys | keyvalue">
           <div class="list-item-content">
-            <span>{{ key | titlecase }}</span>
+            <span>{{ apiKey.key | titlecase }}</span>
             <mat-form-field>
               <input
                 matInput
-                [type]="hideKey[key] ? 'password' : 'text'"
-                [formControlName]="'keys_' + key"
+                [type]="hideKey[apiKey.key] ? 'password' : 'text'"
+                [formControlName]="'keys_' + apiKey.key"
                 placeholder="Enter API key"
                 i18n-placeholder
               />
-              <button mat-icon-button matSuffix (click)="toggleHideKey(key)">
-                <mat-icon>{{ hideKey[key] ? 'visibility_off' : 'visibility' }}</mat-icon>
+              <button mat-icon-button matSuffix (click)="toggleHideKey(apiKey.key)">
+                <mat-icon>{{ hideKey[apiKey.key] ? 'visibility_off' : 'visibility' }}</mat-icon>
               </button>
-              <button mat-icon-button matSuffix (click)="copyKey(key)">
+              <button mat-icon-button matSuffix (click)="copyKey(apiKey.key)">
                 <mat-icon>content_copy</mat-icon>
               </button>
             </mat-form-field>
@@ -39,11 +39,11 @@
     <mat-card-title i18n>Models</mat-card-title>
     <mat-card-content *ngIf="configuration.models">
       <mat-list>
-        <mat-list-item *ngFor="let model of objectKeys(configuration.models)">
+        <mat-list-item *ngFor="let model of configuration.models | keyvalue">
           <div class="list-item-content">
-            <span>{{ model | titlecase }}</span>
+            <span>{{ model.key | titlecase }}</span>
             <mat-form-field>
-              <input matInput [formControlName]="'models_' + model" placeholder="Enter model" i18n-placeholder />
+              <input matInput [formControlName]="'models_' + model.key" placeholder="Enter model" i18n-placeholder />
             </mat-form-field>
           </div>
         </mat-list-item>

src/app/manager-dashboard/manager-aiservices.component.ts

@@ -1,26 +1,34 @@
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl, AbstractControl } from '@angular/forms';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
 import { finalize } from 'rxjs/operators';
-
 import { ConfigurationService } from '../configuration/configuration.service';
 import { CouchService } from '../shared/couchdb.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
 import { StateService } from '../shared/state.service';
 
+interface AIServiceConfigForm {
+  streaming: FormControl<boolean>;
+  assistantName: FormControl<string>;
+  assistantInstructions: FormControl<string>;
+  [key: string]: AbstractControl<any, any>;
+}
+
 @Component({
   templateUrl: './manager-aiservices.component.html',
   styleUrls: [ './manager-settings.shared.scss' ],
 })
-export class ManagerAIServicesComponent implements OnInit {
+export class ManagerAIServicesComponent implements OnInit, OnDestroy {
   configuration: any = {};
-  configForm: UntypedFormGroup;
+  configForm: FormGroup<AIServiceConfigForm>;
   hideKey: { [key: string]: boolean } = {};
   spinnerOn = true;
+  private unsubscribe$ = new Subject<void>();
 
   constructor(
-    private fb: UntypedFormBuilder,
+    private fb: FormBuilder,
     private clipboard: Clipboard,
     private configurationService: ConfigurationService,
     private couchService: CouchService,
@@ -29,10 +37,10 @@ export class ManagerAIServicesComponent implements OnInit {
     private stateService: StateService,
   ) {
     this.configForm = this.fb.group({
-      streaming: [ false ],
-      assistantName: [ '' ],
-      assistantInstructions: [ '' ]
-    });
+      streaming: new FormControl(false, { nonNullable: true }),
+      assistantName: new FormControl('', { nonNullable: true }),
+      assistantInstructions: new FormControl('', { nonNullable: true })
+    }) as FormGroup<AIServiceConfigForm>;
   }
 
   ngOnInit() {
@@ -41,14 +49,19 @@ export class ManagerAIServicesComponent implements OnInit {
     this.initForm();
   }
 
+  ngOnDestroy() {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
   initForm() {
     this.configForm = this.fb.group({
-      streaming: [ !!this.configuration.streaming ],
+      streaming: new FormControl(!!this.configuration.streaming, { nonNullable: true }),
       ...this.mapConfigToFormGroup(this.configuration.keys, 'keys_'),
       ...this.mapConfigToFormGroup(this.configuration.models, 'models_'),
-      assistantName: [ this.configuration.assistant?.name || '' ],
-      assistantInstructions: [ this.configuration.assistant?.instructions || '' ]
-    });
+      assistantName: new FormControl(this.configuration.assistant?.name || '', { nonNullable: true }),
+      assistantInstructions: new FormControl(this.configuration.assistant?.instructions || '', { nonNullable: true })
+    }) as FormGroup<AIServiceConfigForm>;
 
     if (this.configuration.keys) {
       for (const key of Object.keys(this.configuration.keys)) {
@@ -58,19 +71,15 @@ export class ManagerAIServicesComponent implements OnInit {
   }
 
   mapConfigToFormGroup(configObject: any, prefix: string) {
-    const formGroupObj = {};
+    const formGroupObj: { [key: string]: FormControl<string> } = {};
     if (configObject) {
       for (const key of Object.keys(configObject)) {
-        formGroupObj[prefix + key] = [ configObject[key] || '' ];
+        formGroupObj[prefix + key] = new FormControl(configObject[key] || '', { nonNullable: true });
       }
     }
     return formGroupObj;
   }
 
-  objectKeys(obj: any): string[] {
-    return Object.keys(obj);
-  }
-
   saveConfig() {
     const spinnerOff = () => this.spinnerOn = false;
     if (!this.configForm.valid) {
@@ -112,7 +121,7 @@ export class ManagerAIServicesComponent implements OnInit {
   }
 
   copyKey(key: string) {
-    const value = this.configForm.get('keys_' + key).value;
+    const value = this.configForm.get('keys_' + key)?.value || '';
     this.clipboard.copy(value);
   }