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

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

@@ -210,117 +210,122 @@ import { EnvironmentService } from '../../services/environment.service';
                 </mat-panel-description>
               </mat-expansion-panel-header>
               
-              <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"
-                         [value]="sttSettings.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>
-                  <mat-hint>Silence duration to end speech (500-5000ms)</mat-hint>
-                </mat-form-field>
-                
-                <mat-form-field appearance="outline">
-                  <mat-label>Noise Reduction Level</mat-label>
-                  <mat-select name="noiseReduction"
-                              [value]="sttSettings.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>
-                    <mat-option [value]="2">Medium</mat-option>
-                    <mat-option [value]="3">High</mat-option>
-                  </mat-select>
-                  <mat-icon matPrefix>noise_aware</mat-icon>
-                </mat-form-field>
-                
-                <mat-form-field appearance="outline" class="full-width">
-                  <mat-label>VAD Sensitivity</mat-label>
-                  <mat-slider min="0" max="1" step="0.1" 
-                              [discrete]="true"
-                              [displayWith]="formatVAD">
-                    <input matSliderThumb
-                           name="vadSensitivity"
-                           [value]="sttSettings.vad_sensitivity"
-                           (input)="updateSTTSetting('vad_sensitivity', +$any($event.target).value)"
+              <!-- Panel içeriğini ngIf ile kontrol et -->
+              <ng-container *ngIf="environment.stt_settings && sttSettingsExpanded">
+                <div class="stt-settings-grid">
+    
+                  <mat-form-field appearance="outline">
+                    <mat-label>Speech Timeout (ms)</mat-label>
+                    <input matInput type="number" 
+                           name="speechTimeout"
+                           [value]="sttSettings.speech_timeout_ms"
+                           (input)="updateSTTSetting('speech_timeout_ms', +$any($event.target).value)"
+                           min="500" max="5000" step="100"
                            [disabled]="loading">
-                  </mat-slider>
-                  <mat-icon matPrefix>graphic_eq</mat-icon>
-                  <mat-hint>Voice activity detection sensitivity (0=low, 1=high)</mat-hint>
-                </mat-form-field>
-                
-                <mat-form-field appearance="outline">
-                  <mat-label>Language</mat-label>
-                  <mat-select name="sttLanguage"
-                              [value]="sttSettings.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>
-                    <mat-option value="de-DE">German (de-DE)</mat-option>
-                    <mat-option value="fr-FR">French (fr-FR)</mat-option>
-                    <mat-option value="es-ES">Spanish (es-ES)</mat-option>
-                  </mat-select>
-                  <mat-icon matPrefix>language</mat-icon>
-                </mat-form-field>
-                
-                <mat-form-field appearance="outline" 
-                                *ngIf="environment.stt_engine === 'google'">
-                  <mat-label>Model</mat-label>
-                  <mat-select name="sttModel"
-                              [value]="sttSettings.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>
-                    <mat-option value="phone_call">Phone Call (Telephony)</mat-option>
-                    <mat-option value="video">Video (Multiple speakers)</mat-option>
-                  </mat-select>
-                  <mat-icon matPrefix>model_training</mat-icon>
-                </mat-form-field>
-                
-                <div class="checkbox-group">
-                  <mat-checkbox name="useEnhanced"
-                                [checked]="sttSettings.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-icon matPrefix>timer</mat-icon>
+                    <mat-hint>Silence duration to end speech (500-5000ms)</mat-hint>
+                  </mat-form-field>
                   
-                  <mat-checkbox name="enablePunctuation"
-                                [checked]="sttSettings.enable_punctuation"
-                                (change)="updateSTTSetting('enable_punctuation', $event.checked)"
+                  <mat-form-field appearance="outline">
+                    <mat-label>Noise Reduction Level</mat-label>
+                    <mat-select name="noiseReduction"
+                                [value]="sttSettings.noise_reduction_level"
+                                (selectionChange)="updateSTTSetting('noise_reduction_level', $event.value)"
                                 [disabled]="loading">
-                    Automatic Punctuation
-                  </mat-checkbox>
+                      <mat-option [value]="0">Off</mat-option>
+                      <mat-option [value]="1">Low</mat-option>
+                      <mat-option [value]="2">Medium</mat-option>
+                      <mat-option [value]="3">High</mat-option>
+                    </mat-select>
+                    <mat-icon matPrefix>noise_aware</mat-icon>
+                  </mat-form-field>
+                  
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>VAD Sensitivity</mat-label>
+                    <mat-slider min="0" max="1" step="0.1" 
+                                [discrete]="true"
+                                [displayWith]="formatVAD">
+                      <input matSliderThumb
+                             name="vadSensitivity"
+                             [value]="sttSettings.vad_sensitivity"
+                             (input)="updateSTTSetting('vad_sensitivity', +$any($event.target).value)"
+                             [disabled]="loading">
+                    </mat-slider>
+                    <mat-icon matPrefix>graphic_eq</mat-icon>
+                    <mat-hint>Voice activity detection sensitivity (0=low, 1=high)</mat-hint>
+                  </mat-form-field>
                   
-                  <mat-checkbox name="interimResults"
-                                [checked]="sttSettings.interim_results"
-                                (change)="updateSTTSetting('interim_results', $event.checked)"
+                  <mat-form-field appearance="outline">
+                    <mat-label>Language</mat-label>
+                    <mat-select name="sttLanguage"
+                                [value]="sttSettings.language"
+                                (selectionChange)="updateSTTSetting('language', $event.value)"
                                 [disabled]="loading">
-                    Show Interim Results
-                  </mat-checkbox>
-                </div>
-              </div>
-              
-              <div class="stt-info-card" *ngIf="environment.stt_engine === 'google'">
-                <mat-icon>info</mat-icon>
-                <div>
-                  <strong>Google Cloud Setup Required:</strong>
-                  <ol>
-                    <li>Create a Google Cloud project</li>
-                    <li>Enable Speech-to-Text API</li>
-                    <li>Create service account & download JSON key</li>
-                    <li>Upload JSON key file as STT API Key</li>
-                  </ol>
-                  <p class="cost-info">Cost: ~$0.024/minute (standard), ~$0.036/minute (enhanced)</p>
+                      <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
+                      <mat-option value="en-US">English (en-US)</mat-option>
+                      <mat-option value="de-DE">German (de-DE)</mat-option>
+                      <mat-option value="fr-FR">French (fr-FR)</mat-option>
+                      <mat-option value="es-ES">Spanish (es-ES)</mat-option>
+                    </mat-select>
+                    <mat-icon matPrefix>language</mat-icon>
+                  </mat-form-field>
+                  
+                  <mat-form-field appearance="outline" 
+                                  *ngIf="environment.stt_engine === 'google'">
+                    <mat-label>Model</mat-label>
+                    <mat-select name="sttModel"
+                                [value]="sttSettings.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>
+                      <mat-option value="phone_call">Phone Call (Telephony)</mat-option>
+                      <mat-option value="video">Video (Multiple speakers)</mat-option>
+                    </mat-select>
+                    <mat-icon matPrefix>model_training</mat-icon>
+                  </mat-form-field>
+                  
+                  <div class="checkbox-group">
+                    <mat-checkbox name="useEnhanced"
+                                  [checked]="sttSettings.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"
+                                  [checked]="sttSettings.enable_punctuation"
+                                  (change)="updateSTTSetting('enable_punctuation', $event.checked)"
+                                  [disabled]="loading">
+                      Automatic Punctuation
+                    </mat-checkbox>
+                    
+                    <mat-checkbox name="interimResults"
+                                  [checked]="sttSettings.interim_results"
+                                  (change)="updateSTTSetting('interim_results', $event.checked)"
+                                  [disabled]="loading">
+                      Show Interim Results
+                    </mat-checkbox>
+                  </div>
+                </div>  
+
+                <div class="stt-info-card" *ngIf="environment.stt_engine === 'google'">
+                  <mat-icon>info</mat-icon>
+                  <div>
+                    <strong>Google Cloud Setup Required:</strong>
+                    <ol>
+                      <li>Create a Google Cloud project</li>
+                      <li>Enable Speech-to-Text API</li>
+                      <li>Create service account & download JSON key</li>
+                      <li>Upload JSON key file as STT API Key</li>
+                    </ol>
+                    <p class="cost-info">Cost: ~$0.024/minute (standard), ~$0.036/minute (enhanced)</p>
+                  </div>
                 </div>
-              </div>
-            </mat-expansion-panel>                      
+
+              </ng-container>
+            </mat-expansion-panel>
 
             <mat-expansion-panel class="prompt-panel">
               <mat-expansion-panel-header>