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

<div class="environment-container">
  <mat-card class="main-card">
    <mat-card-header>
      <mat-card-title>
        <mat-icon>settings</mat-icon>
        Environment Configuration
      </mat-card-title>
    </mat-card-header>
    
    <mat-card-content>
      <form [formGroup]="environmentForm" (ngSubmit)="save()">
        
        <!-- LLM Provider Section -->
        <div class="section">
          <h3 class="section-title">
            <mat-icon>psychology</mat-icon>
            LLM Provider
          </h3>
          
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>LLM Provider</mat-label>
            <mat-select formControlName="llm_provider_name" [disabled]="loading">
              <mat-option *ngFor="let provider of llmProviders" [value]="provider.name">
                {{ provider.display_name }}
              </mat-option>
            </mat-select>
            <mat-hint *ngIf="getLLMProviderDescription()">{{ getLLMProviderDescription() }}</mat-hint>
          </mat-form-field>

          <mat-form-field appearance="outline" class="full-width" *ngIf="isLLMApiKeyRequired()">
            <mat-label>API Key</mat-label>
            <input matInput type="password" formControlName="llm_provider_api_key" [disabled]="loading">
            <mat-icon matPrefix>vpn_key</mat-icon>
            <mat-error *ngIf="environmentForm.get('llm_provider_api_key')?.hasError('required')">
              API key is required
            </mat-error>
          </mat-form-field>

          <div class="endpoint-row" *ngIf="isLLMEndpointRequired()">
            <mat-form-field appearance="outline" class="endpoint-field">
              <mat-label>Endpoint URL</mat-label>
              <input matInput formControlName="llm_provider_endpoint" [disabled]="loading">
              <mat-icon matPrefix>link</mat-icon>
              <mat-error *ngIf="environmentForm.get('llm_provider_endpoint')?.hasError('required')">
                Endpoint is required
              </mat-error>
              <mat-error *ngIf="environmentForm.get('llm_provider_endpoint')?.hasError('pattern')">
                Invalid URL format
              </mat-error>
            </mat-form-field>
            
            <button mat-stroked-button type="button" (click)="testConnection()" 
                    [disabled]="loading || !environmentForm.get('llm_provider_endpoint')?.value"
                    class="test-button">
              <mat-icon>speed</mat-icon>
              Test Connection
            </button>
          </div>

          <!-- Internal Prompt -->
          <mat-expansion-panel class="settings-panel">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <mat-icon>chat</mat-icon>
                Internal System Prompt
              </mat-panel-title>
            </mat-expansion-panel-header>
            
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Internal Prompt</mat-label>
              <textarea matInput formControlName="internal_prompt" rows="10" [disabled]="loading"></textarea>
              <mat-hint>
                Available placeholders: &lt;intent names&gt;, &lt;intent captions&gt;, &lt;project language&gt;
              </mat-hint>
            </mat-form-field>
          </mat-expansion-panel>

          <!-- Parameter Collection Config -->
          <mat-expansion-panel class="settings-panel">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <mat-icon>input</mat-icon>
                Parameter Collection Configuration
              </mat-panel-title>
            </mat-expansion-panel-header>
            
            <div class="parameter-config">
              <mat-form-field appearance="outline" class="small-field">
                <mat-label>Max Parameters per Question</mat-label>
                <input matInput type="number" formControlName="max_params_per_question" 
                       min="1" max="5" [disabled]="loading">
              </mat-form-field>

              <mat-checkbox formControlName="retry_unanswered" [disabled]="loading">
                Retry Unanswered Parameters
              </mat-checkbox>

              <mat-form-field appearance="outline" class="full-width">
                <mat-label>Collection Prompt Template</mat-label>
                <textarea matInput formControlName="collection_prompt" rows="8" [disabled]="loading"></textarea>
                <mat-hint>
                  Available placeholders: {{conversation_history}}, {{intent_name}}, {{missing_params}}, etc.
                </mat-hint>
              </mat-form-field>
            </div>
          </mat-expansion-panel>
        </div>

        <mat-divider></mat-divider>

        <!-- TTS Provider Section -->
        <div class="section">
          <h3 class="section-title">
            <mat-icon>volume_up</mat-icon>
            TTS Provider
          </h3>
          
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>TTS Provider</mat-label>
            <mat-select formControlName="tts_provider_name" [disabled]="loading">
              <mat-option *ngFor="let provider of ttsProviders" [value]="provider.name">
                {{ provider.display_name }}
              </mat-option>
            </mat-select>
            <mat-hint *ngIf="getTTSProviderDescription()">{{ getTTSProviderDescription() }}</mat-hint>
          </mat-form-field>

          <div *ngIf="isTTSEnabled()">
            <mat-form-field appearance="outline" class="full-width" 
                          *ngIf="currentTTSProvider?.requires_api_key">
              <mat-label>TTS API Key</mat-label>
              <input matInput type="password" formControlName="tts_provider_api_key" [disabled]="loading">
              <mat-icon matPrefix>vpn_key</mat-icon>
              <mat-error *ngIf="environmentForm.get('tts_provider_api_key')?.hasError('required')">
                API key is required
              </mat-error>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width" 
                          *ngIf="currentTTSProvider?.requires_endpoint">
              <mat-label>TTS Endpoint URL</mat-label>
              <input matInput formControlName="tts_provider_endpoint" [disabled]="loading">
              <mat-icon matPrefix>link</mat-icon>
            </mat-form-field>

            <mat-checkbox formControlName="tts_use_ssml" [disabled]="loading">
              Enable SSML Support
            </mat-checkbox>
          </div>
        </div>

        <mat-divider></mat-divider>

        <!-- STT Provider Section -->
        <div class="section">
          <h3 class="section-title">
            <mat-icon>mic</mat-icon>
            STT Provider
          </h3>
          
          <mat-form-field appearance="outline" class="full-width">
            <mat-label>STT Provider</mat-label>
            <mat-select formControlName="stt_provider_name" [disabled]="loading">
              <mat-option *ngFor="let provider of sttProviders" [value]="provider.name">
                {{ provider.display_name }}
              </mat-option>
            </mat-select>
            <mat-hint *ngIf="getSTTProviderDescription()">{{ getSTTProviderDescription() }}</mat-hint>
          </mat-form-field>

          <div *ngIf="isSTTEnabled()">
            <mat-form-field appearance="outline" class="full-width" 
                          *ngIf="currentSTTProvider?.requires_api_key">
              <mat-label>STT API Key / Credentials Path</mat-label>
              <input matInput formControlName="stt_provider_api_key" [disabled]="loading">
              <mat-icon matPrefix>vpn_key</mat-icon>
              <mat-hint>For Google STT, provide the path to service account JSON file</mat-hint>
              <mat-error *ngIf="environmentForm.get('stt_provider_api_key')?.hasError('required')">
                API key or credentials path is required
              </mat-error>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width" 
                          *ngIf="currentSTTProvider?.requires_endpoint">
              <mat-label>STT Endpoint URL</mat-label>
              <input matInput formControlName="stt_provider_endpoint" [disabled]="loading">
              <mat-icon matPrefix>link</mat-icon>
            </mat-form-field>

            <!-- STT Settings -->
            <mat-expansion-panel class="settings-panel">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <mat-icon>tune</mat-icon>
                  STT Settings
                </mat-panel-title>
              </mat-expansion-panel-header>
              
              <div class="stt-settings">
                <div class="settings-row">
                  <mat-form-field appearance="outline" class="small-field">
                    <mat-label>Speech Timeout (ms)</mat-label>
                    <input matInput type="number" formControlName="stt_speech_timeout_ms" [disabled]="loading">
                  </mat-form-field>

                  <mat-form-field appearance="outline" class="small-field">
                    <mat-label>Noise Reduction Level</mat-label>
                    <mat-select formControlName="stt_noise_reduction_level" [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-form-field>

                  <mat-form-field appearance="outline" class="small-field">
                    <mat-label>VAD Sensitivity</mat-label>
                    <input matInput type="number" formControlName="stt_vad_sensitivity" 
                           min="0" max="1" step="0.1" [disabled]="loading">
                  </mat-form-field>
                </div>

                <div class="settings-row">
                  <mat-form-field appearance="outline" class="small-field">
                    <mat-label>Language</mat-label>
                    <input matInput formControlName="stt_language" [disabled]="loading">
                    <mat-hint>Use {{current_language_code}} for dynamic language</mat-hint>
                  </mat-form-field>

                  <mat-form-field appearance="outline" class="small-field">
                    <mat-label>Model</mat-label>
                    <input matInput formControlName="stt_model" [disabled]="loading">
                  </mat-form-field>
                </div>

                <div class="settings-row">
                  <mat-checkbox formControlName="stt_use_enhanced" [disabled]="loading">
                    Use Enhanced Model
                  </mat-checkbox>

                  <mat-checkbox formControlName="stt_enable_punctuation" [disabled]="loading">
                    Enable Punctuation
                  </mat-checkbox>

                  <mat-checkbox formControlName="stt_interim_results" [disabled]="loading">
                    Enable Interim Results
                  </mat-checkbox>
                </div>
              </div>
            </mat-expansion-panel>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="actions">
          <button mat-raised-button color="primary" type="submit" 
                  [disabled]="loading || saving || environmentForm.invalid">
            <mat-icon>save</mat-icon>
            Save Configuration
          </button>
          
          <button mat-button type="button" (click)="loadEnvironment()" [disabled]="loading || saving">
            <mat-icon>refresh</mat-icon>
            Reload
          </button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>
</div>

<!-- Loading Overlay -->
<div class="loading-overlay" *ngIf="loading || saving">
  <mat-spinner></mat-spinner>
</div>