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

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

@@ -31,328 +31,9 @@ import { EnvironmentService } from '../../services/environment.service';
     MatExpansionModule,
     MatSliderModule
   ],
-  template: `
-    <div class="environment-container">
-      <mat-card>
-        <mat-card-header>
-          <mat-card-title>
-            <mat-icon>settings</mat-icon>
-            Environment Configuration
-          </mat-card-title>
-        </mat-card-header>
-        
-        <mat-card-content>
-          @if (isGPTMode()) {
-            <mat-card class="info-card">
-              <mat-card-content>
-                <mat-icon>info</mat-icon>
-                <div>
-                  <strong>{{ environment.work_mode === 'gpt4o' ? 'GPT-4o' : 'GPT-4o Mini' }} Mode</strong>
-                  <p>This mode uses OpenAI's API which has usage-based pricing.</p>
-                  <p>Approximate cost: {{ environment.work_mode === 'gpt4o' ? '$0.01-0.03' : '$0.001-0.003' }} per conversation turn.</p>
-                </div>
-              </mat-card-content>
-            </mat-card>
-          }
-
-          <form (ngSubmit)="save()" #envForm="ngForm">
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Work Mode</mat-label>
-              <mat-select
-                name="workMode"
-                [(ngModel)]="environment.work_mode"
-                (selectionChange)="onWorkModeChange()"
-                required
-                [disabled]="loading"
-              >
-                <mat-option value="hfcloud">HF Cloud</mat-option>
-                <mat-option value="cloud">Cloud</mat-option>
-                <mat-option value="on-premise">On-Premise</mat-option>
-                <mat-option value="gpt4o">GPT-4o</mat-option>
-                <mat-option value="gpt4o-mini">GPT-4o Mini</mat-option>
-              </mat-select>
-              <mat-icon matPrefix>cloud</mat-icon>
-            </mat-form-field>
-
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>{{ getTokenLabel() }}</mat-label>
-              <input
-                matInput
-                type="password"
-                name="cloudToken"
-                [(ngModel)]="environment.cloud_token"
-                [disabled]="loading || environment.work_mode === 'on-premise'"
-                [placeholder]="getTokenPlaceholder()"
-              >
-              <mat-icon matPrefix>vpn_key</mat-icon>
-              <mat-hint>{{ isGPTMode() ? 'Required for OpenAI API access' : 'Required for HF Cloud and Cloud modes' }}</mat-hint>
-            </mat-form-field>
-
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Spark Endpoint</mat-label>
-              <input
-                matInput
-                type="url"
-                name="sparkEndpoint"
-                [(ngModel)]="environment.spark_endpoint"
-                [required]="!isGPTMode()"
-                [disabled]="loading || isGPTMode()"
-                placeholder="https://spark-service.example.com"
-              >
-              <mat-icon matPrefix>link</mat-icon>
-              <button
-                mat-icon-button
-                matSuffix
-                type="button"
-                (click)="testConnection()"
-                [disabled]="loading || !environment.spark_endpoint || isGPTMode()"
-                matTooltip="Test Connection"
-              >
-                <mat-icon>wifi_tethering</mat-icon>
-              </button>
-              @if (isGPTMode()) {
-                <mat-hint>Not required for GPT mode</mat-hint>
-              }
-            </mat-form-field>
-
-            <!-- TTS Configuration -->
-            <div class="engine-row">
-              <mat-form-field appearance="outline" class="engine-field">
-                <mat-label>TTS Engine</mat-label>
-                <mat-select
-                  name="ttsEngine"
-                  [(ngModel)]="environment.tts_engine"
-                  (selectionChange)="onTTSEngineChange()"
-                  [disabled]="loading"
-                >
-                  <mat-option value="no_tts">No TTS</mat-option>
-                  <mat-option value="elevenlabs">ElevenLabs</mat-option>
-                  <mat-option value="blaze">Blaze (Coming Soon)</mat-option>
-                </mat-select>
-                <mat-icon matPrefix>record_voice_over</mat-icon>
-              </mat-form-field>
-
-              <mat-form-field appearance="outline" class="api-key-field">
-                <mat-label>TTS API Key</mat-label>
-                <input
-                  matInput
-                  type="password"
-                  name="ttsApiKey"
-                  [(ngModel)]="environment.tts_engine_api_key"
-                  [disabled]="loading || environment.tts_engine === 'no_tts'"
-                  [required]="environment.tts_engine !== 'no_tts'"
-                  placeholder="Enter TTS API key"
-                >
-                <mat-icon matPrefix>key</mat-icon>
-              </mat-form-field>
-            </div>
-
-            <!-- STT Configuration -->
-            <div class="engine-row">
-              <mat-form-field appearance="outline" class="engine-field">
-                <mat-label>STT Engine</mat-label>
-                <mat-select
-                  name="sttEngine"
-                  [(ngModel)]="environment.stt_engine"
-                  (selectionChange)="onSTTEngineChange()"
-                  [disabled]="loading"
-                >
-                  <mat-option value="no_stt">No STT</mat-option>
-                  <mat-option value="google">Google Cloud Speech</mat-option>
-                  <mat-option value="azure">Azure Speech (Coming Soon)</mat-option>
-                  <mat-option value="amazon">Amazon Transcribe (Coming Soon)</mat-option>
-                  <mat-option value="flicker">Flicker (Coming Soon)</mat-option>
-                </mat-select>
-                <mat-icon matPrefix>mic</mat-icon>
-              </mat-form-field>
-              
-              <mat-form-field appearance="outline" class="api-key-field">
-                <mat-label>{{ getSTTKeyLabel() }}</mat-label>
-                <input
-                  matInput
-                  type="password"
-                  name="sttApiKey"
-                  [(ngModel)]="environment.stt_engine_api_key"
-                  [disabled]="loading || environment.stt_engine === 'no_stt'"
-                  [required]="environment.stt_engine !== 'no_stt'"
-                  [placeholder]="getSTTKeyPlaceholder()"
-                >
-                <mat-icon matPrefix>key</mat-icon>
-                <mat-hint>{{ getSTTKeyHint() }}</mat-hint>
-              </mat-form-field>
-
-              <!-- STT Settings Panel -->
-              <mat-expansion-panel class="stt-settings-panel" *ngIf="environment.stt_engine !== 'no_stt'">
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <mat-icon>settings_voice</mat-icon>
-                    STT Settings
-                  </mat-panel-title>
-                  <mat-panel-description>
-                    Advanced speech recognition settings
-                  </mat-panel-description>
-                </mat-expansion-panel-header>
-                
-                <div class="stt-settings-content">
-                  <!-- Language -->
-                  <mat-form-field appearance="outline" class="full-width">
-                    <mat-label>Language</mat-label>
-                    <mat-select
-                      name="sttLanguage"
-                      [(ngModel)]="environment.stt_settings.language"
-                      [disabled]="loading"
-                    >
-                      <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
-                      <mat-option value="en-US">English US (en-US)</mat-option>
-                      <mat-option value="en-GB">English UK (en-GB)</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>
-              
-                  <!-- Model -->
-                  <mat-form-field appearance="outline" class="full-width" *ngIf="environment.stt_engine === 'google'">
-                    <mat-label>Recognition Model</mat-label>
-                    <mat-select
-                      name="sttModel"
-                      [(ngModel)]="environment.stt_settings.model"
-                      [disabled]="loading"
-                    >
-                      <mat-option value="latest_long">Latest Long (Best for long audio)</mat-option>
-                      <mat-option value="latest_short">Latest Short (Best for short audio)</mat-option>
-                      <mat-option value="command_and_search">Command and Search</mat-option>
-                      <mat-option value="phone_call">Phone Call</mat-option>
-                      <mat-option value="video">Video</mat-option>
-                    </mat-select>
-                    <mat-icon matPrefix>model_training</mat-icon>
-                  </mat-form-field>
-              
-                  <!-- Speech Timeout -->
-                  <div class="slider-field">
-                    <label>Speech Timeout: {{ environment.stt_settings.speech_timeout_ms }}ms</label>
-                    <mat-slider
-                      [min]="500"
-                      [max]="5000"
-                      [step]="100"
-                      [discrete]="true"
-                      [displayWith]="formatMilliseconds"
-                    >
-                      <input matSliderThumb [(ngModel)]="environment.stt_settings.speech_timeout_ms">
-                    </mat-slider>
-                    <mat-hint>Silence duration to end speech detection</mat-hint>
-                  </div>
-              
-                  <!-- VAD Sensitivity -->
-                  <div class="slider-field">
-                    <label>Voice Activity Detection Sensitivity: {{ environment.stt_settings.vad_sensitivity }}</label>
-                    <mat-slider
-                      [min]="0"
-                      [max]="1"
-                      [step]="0.1"
-                      [discrete]="true"
-                    >
-                      <input matSliderThumb [(ngModel)]="environment.stt_settings.vad_sensitivity">
-                    </mat-slider>
-                    <mat-hint>Higher values = more sensitive</mat-hint>
-                  </div>
-              
-                  <!-- Noise Reduction Level -->
-                  <div class="slider-field">
-                    <label>Noise Reduction Level: {{ environment.stt_settings.noise_reduction_level }}</label>
-                    <mat-slider
-                      [min]="0"
-                      [max]="3"
-                      [step]="1"
-                      [discrete]="true"
-                    >
-                      <input matSliderThumb [(ngModel)]="environment.stt_settings.noise_reduction_level">
-                    </mat-slider>
-                    <mat-hint>0 = Off, 3 = Maximum</mat-hint>
-                  </div>
-              
-                  <!-- Checkboxes -->
-                  <div class="checkbox-group">
-                    <mat-checkbox 
-                      [(ngModel)]="environment.stt_settings.use_enhanced"
-                      [disabled]="loading"
-                      *ngIf="environment.stt_engine === 'google'">
-                      Use Enhanced Model
-                    </mat-checkbox>
-                    
-                    <mat-checkbox 
-                      [(ngModel)]="environment.stt_settings.enable_punctuation"
-                      [disabled]="loading">
-                      Enable Automatic Punctuation
-                    </mat-checkbox>
-                    
-                    <mat-checkbox 
-                      [(ngModel)]="environment.stt_settings.interim_results"
-                      [disabled]="loading">
-                      Show Interim Results
-                    </mat-checkbox>
-                  </div>
-                </div>
-              </mat-expansion-panel>
-            </div>
-
-            <mat-expansion-panel class="prompt-panel">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <mat-icon>psychology</mat-icon>
-                  Internal System Prompt
-                </mat-panel-title>
-                <mat-panel-description>
-                  Advanced configuration for LLM
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Internal Prompt</mat-label>
-                <textarea
-                  matInput
-                  name="internalPrompt"
-                  [(ngModel)]="environment.internal_prompt"
-                  [disabled]="loading"
-                  rows="10"
-                  placeholder="Enter internal system prompt..."
-                ></textarea>
-                <mat-hint>This prompt will be prepended to all project prompts</mat-hint>
-              </mat-form-field>
-            </mat-expansion-panel>
+  templateUrl: './environment.component.html',
+  styleUrls: ['./environment.component.scss']
 
-            <div class="form-actions">
-              <button
-                mat-raised-button
-                color="primary"
-                type="submit"
-                [disabled]="loading || !envForm.valid || saving"
-              >
-                @if (saving) {
-                  <mat-spinner diameter="20"></mat-spinner>
-                  Saving...
-                } @else {
-                  <mat-icon>save</mat-icon>
-                  Save
-                }
-              </button>
-              
-              <button
-                mat-raised-button
-                type="button"
-                (click)="reloadFromSpark()"
-                [disabled]="loading || isGPTMode()"
-              >
-                <mat-icon>refresh</mat-icon>
-                Reload from Spark
-              </button>
-            </div>
-          </form>
-        </mat-card-content>
-      </mat-card>
-    </div>
-  `,
   styles: [`
     .environment-container {
       max-width: 800px;