Update flare-ui/src/app/components/environment/environment.component.ts

flare-ui/src/app/components/environment/environment.component.ts

@@ -198,8 +198,8 @@ import { EnvironmentService } from '../../services/environment.service';
 
             <!-- STT Settings Panel -->
             <mat-expansion-panel class="stt-settings-panel" 
-                 *ngIf="environment.stt_engine !== 'no_stt' && environment.stt_settings"
-                 [expanded]="sttSettingsExpanded">
+                                 *ngIf="environment.stt_engine !== 'no_stt'"
+                                 [expanded]="sttSettingsExpanded">
               <mat-expansion-panel-header>
                 <mat-panel-title>
                   <mat-icon>settings_voice</mat-icon>
@@ -210,13 +210,13 @@ import { EnvironmentService } from '../../services/environment.service';
                 </mat-panel-description>
               </mat-expansion-panel-header>
               
-              <div class="stt-settings-grid">
+              <div class="stt-settings-grid" *ngIf="environment.stt_settings">
                 <mat-form-field appearance="outline">
                   <mat-label>Speech Timeout (ms)</mat-label>
                   <input matInput type="number" 
                          name="speechTimeout"
-                         [ngModel]="environment.stt_settings?.speech_timeout_ms || 2000"
-                         (ngModelChange)="updateSTTSetting('speech_timeout_ms', $event)"
+                         [value]="environment.stt_settings.speech_timeout_ms"
+                         (input)="updateSTTSetting('speech_timeout_ms', +$any($event.target).value)"
                          min="500" max="5000" step="100"
                          [disabled]="loading">
                   <mat-icon matPrefix>timer</mat-icon>
@@ -226,7 +226,8 @@ import { EnvironmentService } from '../../services/environment.service';
                 <mat-form-field appearance="outline">
                   <mat-label>Noise Reduction Level</mat-label>
                   <mat-select name="noiseReduction"
-                              [(ngModel)]="environment.stt_settings!.noise_reduction_level"
+                              [value]="environment.stt_settings.noise_reduction_level"
+                              (selectionChange)="updateSTTSetting('noise_reduction_level', $event.value)"
                               [disabled]="loading">
                     <mat-option [value]="0">Off</mat-option>
                     <mat-option [value]="1">Low</mat-option>
@@ -243,7 +244,8 @@ import { EnvironmentService } from '../../services/environment.service';
                               [displayWith]="formatVAD">
                     <input matSliderThumb
                            name="vadSensitivity"
-                           [(ngModel)]="environment.stt_settings!.vad_sensitivity"
+                           [value]="environment.stt_settings.vad_sensitivity"
+                           (input)="updateSTTSetting('vad_sensitivity', +$any($event.target).value)"
                            [disabled]="loading">
                   </mat-slider>
                   <mat-icon matPrefix>graphic_eq</mat-icon>
@@ -253,7 +255,8 @@ import { EnvironmentService } from '../../services/environment.service';
                 <mat-form-field appearance="outline">
                   <mat-label>Language</mat-label>
                   <mat-select name="sttLanguage"
-                              [(ngModel)]="environment.stt_settings!.language"
+                              [value]="environment.stt_settings.language"
+                              (selectionChange)="updateSTTSetting('language', $event.value)"
                               [disabled]="loading">
                     <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
                     <mat-option value="en-US">English (en-US)</mat-option>
@@ -268,7 +271,8 @@ import { EnvironmentService } from '../../services/environment.service';
                                 *ngIf="environment.stt_engine === 'google'">
                   <mat-label>Model</mat-label>
                   <mat-select name="sttModel"
-                              [(ngModel)]="environment.stt_settings!.model"
+                              [value]="environment.stt_settings.model"
+                              (selectionChange)="updateSTTSetting('model', $event.value)"
                               [disabled]="loading">
                     <mat-option value="latest_long">Latest Long (Best for conversations)</mat-option>
                     <mat-option value="command_and_search">Command & Search (Short queries)</mat-option>
@@ -280,20 +284,23 @@ import { EnvironmentService } from '../../services/environment.service';
                 
                 <div class="checkbox-group">
                   <mat-checkbox name="useEnhanced"
-                                [(ngModel)]="environment.stt_settings!.use_enhanced"
+                                [checked]="environment.stt_settings.use_enhanced"
+                                (change)="updateSTTSetting('use_enhanced', $event.checked)"
                                 [disabled]="loading || environment.stt_engine !== 'google'">
                     Use Enhanced Model
                     <mat-icon matTooltip="Better accuracy but higher cost" class="info-icon">info</mat-icon>
                   </mat-checkbox>
                   
                   <mat-checkbox name="enablePunctuation"
-                                [(ngModel)]="environment.stt_settings!.enable_punctuation"
+                                [checked]="environment.stt_settings.enable_punctuation"
+                                (change)="updateSTTSetting('enable_punctuation', $event.checked)"
                                 [disabled]="loading">
                     Automatic Punctuation
                   </mat-checkbox>
                   
                   <mat-checkbox name="interimResults"
-                                [(ngModel)]="environment.stt_settings!.interim_results"
+                                [checked]="environment.stt_settings.interim_results"
+                                (change)="updateSTTSetting('interim_results', $event.checked)"
                                 [disabled]="loading">
                     Show Interim Results
                   </mat-checkbox>
@@ -313,7 +320,7 @@ import { EnvironmentService } from '../../services/environment.service';
                   <p class="cost-info">Cost: ~$0.024/minute (standard), ~$0.036/minute (enhanced)</p>
                 </div>
               </div>
-            </mat-expansion-panel>            
+            </mat-expansion-panel>                      
 
             <mat-expansion-panel class="prompt-panel">
               <mat-expansion-panel-header>
@@ -676,6 +683,22 @@ export class EnvironmentComponent implements OnInit {
     }
   }
 
+  updateSTTSetting(key: string, value: any) {
+    if (!this.environment.stt_settings) {
+      this.environment.stt_settings = {
+        speech_timeout_ms: 2000,
+        noise_reduction_level: 2,
+        vad_sensitivity: 0.5,
+        language: 'tr-TR',
+        model: 'latest_long',
+        use_enhanced: true,
+        enable_punctuation: true,
+        interim_results: true
+      };
+    }
+    (this.environment.stt_settings as any)[key] = value;
+  }
+  
   formatVAD(value: number): string {
     return value.toFixed(1);
   }
@@ -695,27 +718,25 @@ export class EnvironmentComponent implements OnInit {
     }
   }
   
-  onSTTCredentialsFileSelected(event: any) {
-    const file = event.target.files[0];
-    if (file && file.type === 'application/json') {
-      const reader = new FileReader();
-      reader.onload = (e: any) => {
-        try {
-          // Validate it's a valid JSON
-          const jsonContent = JSON.parse(e.target.result);
-          // Store the entire JSON content as the API key
-          this.environment.stt_engine_api_key = e.target.result;
-          this.snackBar.open('Google credentials loaded successfully', 'Close', {
-            duration: 3000
-          });
-        } catch (error) {
-          this.snackBar.open('Invalid JSON file', 'Close', {
-            duration: 3000,
-            panelClass: 'error-snackbar'
-          });
-        }
-      };
-      reader.readAsText(file);
+  onSTTEngineChange() {
+    if (this.environment.stt_engine === 'no_stt') {
+      this.environment.stt_engine_api_key = '';
+      this.sttSettingsExpanded = false;
+    } else {
+      // Ensure stt_settings exists when enabling STT
+      if (!this.environment.stt_settings) {
+        this.environment.stt_settings = {
+          speech_timeout_ms: 2000,
+          noise_reduction_level: 2,
+          vad_sensitivity: 0.5,
+          language: 'tr-TR',
+          model: 'latest_long',
+          use_enhanced: true,
+          enable_punctuation: true,
+          interim_results: true
+        };
+      }
+      this.sttSettingsExpanded = true;
     }
   }