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

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

@@ -1,275 +1,296 @@
-<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()">
-        
+<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 (loading) {
+      <div class="loading-container">
+        <mat-spinner></mat-spinner>
+        <p>Loading configuration...</p>
+      </div>
+    } @else {
+      <form [formGroup]="form">
         <!-- LLM Provider Section -->
-        <div class="section">
-          <h3 class="section-title">
-            <mat-icon>psychology</mat-icon>
+        <div class="provider-section">
+          <h3>
+            <mat-icon>smart_toy</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-label>Provider</mat-label>
+            <mat-icon matPrefix>{{ getLLMProviderIcon(currentLLMProvider || {}) }}</mat-icon>
+            <mat-select formControlName="llm_provider_name" 
+                        (selectionChange)="onLLMProviderChange($event.value)">
+              @for (provider of llmProviders; track provider.name) {
+                <mat-option [value]="provider.name">
+                  <mat-icon>{{ getLLMProviderIcon(provider) }}</mat-icon>
+                  {{ provider.display_name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-hint *ngIf="getLLMProviderDescription()">{{ getLLMProviderDescription() }}</mat-hint>
+            @if (currentLLMProvider?.description) {
+              <mat-hint>{{ currentLLMProvider.description }}</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>
+          @if (currentLLMProvider?.requires_api_key) {
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>{{ getApiKeyLabel('llm') }}</mat-label>
+              <mat-icon matPrefix>key</mat-icon>
+              <input matInput 
+                     type="password" 
+                     formControlName="llm_provider_api_key"
+                     [placeholder]="getApiKeyPlaceholder('llm')">
+              <mat-error *ngIf="form.get('llm_provider_api_key')?.hasError('required')">
+                API key is required for {{ currentLLMProvider?.display_name }}
+              </mat-error>
+            </mat-form-field>
+          }
 
-          <div class="endpoint-row" *ngIf="isLLMEndpointRequired()">
-            <mat-form-field appearance="outline" class="endpoint-field">
+          @if (currentLLMProvider?.requires_endpoint) {
+            <mat-form-field appearance="outline" class="full-width">
               <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
+              <input matInput 
+                     formControlName="llm_provider_endpoint"
+                     [placeholder]="getEndpointPlaceholder('llm')">
+              <button mat-icon-button matSuffix 
+                      (click)="testConnection()" 
+                      type="button"
+                      matTooltip="Test connection">
+                <mat-icon>wifi_tethering</mat-icon>
+              </button>
+              <mat-error *ngIf="form.get('llm_provider_endpoint')?.hasError('required')">
+                Endpoint is required for {{ currentLLMProvider?.display_name }}
               </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>
+          <!-- LLM Settings (Internal Prompt & Parameter Collection) -->
+          @if (currentLLMProvider) {
+            <mat-expansion-panel class="settings-panel">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>psychology</mat-icon>
+                  Internal System Prompt
+                </mat-panel-title>
+                <mat-panel-description>
+                  Configure the internal prompt for intent detection
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              
+              <div class="panel-content">
+                <p class="hint-text">
+                  This prompt is prepended to all intent detection requests. 
+                  Use placeholders: &lt;intent names&gt;, &lt;intent captions&gt;, &lt;project language&gt;
+                </p>
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Internal Prompt</mat-label>
+                  <textarea matInput 
+                            [(ngModel)]="internalPrompt"
+                            [ngModelOptions]="{standalone: true}"
+                            rows="6"
+                            placeholder="Enter internal system prompt..."></textarea>
+                </mat-form-field>
+              </div>
+            </mat-expansion-panel>
+
+            <mat-expansion-panel class="settings-panel">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>quiz</mat-icon>
+                  Parameter Collection Configuration
+                </mat-panel-title>
+                <mat-panel-description>
+                  Configure smart parameter collection behavior
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              
+              <div class="panel-content">
+                <mat-slide-toggle [(ngModel)]="parameterCollectionConfig.enabled"
+                                  [ngModelOptions]="{standalone: true}">
+                  Enable Smart Parameter Collection
+                </mat-slide-toggle>
+
+                <div class="config-grid" *ngIf="parameterCollectionConfig.enabled">
+                  <div class="config-item">
+                    <label>Max Parameters per Question</label>
+                    <mat-slider min="1" max="5" step="1" discrete>
+                      <input matSliderThumb [(ngModel)]="parameterCollectionConfig.max_params_per_question"
+                             [ngModelOptions]="{standalone: true}">
+                    </mat-slider>
+                    <span class="slider-value">{{ parameterCollectionConfig.max_params_per_question }}</span>
+                  </div>
+
+                  <mat-slide-toggle [(ngModel)]="parameterCollectionConfig.show_all_required"
+                                    [ngModelOptions]="{standalone: true}">
+                    Show All Required Parameters
+                  </mat-slide-toggle>
+
+                  <mat-slide-toggle [(ngModel)]="parameterCollectionConfig.ask_optional_params"
+                                    [ngModelOptions]="{standalone: true}">
+                    Ask for Optional Parameters
+                  </mat-slide-toggle>
 
-          <!-- 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-slide-toggle [(ngModel)]="parameterCollectionConfig.group_related_params"
+                                    [ngModelOptions]="{standalone: true}">
+                    Group Related Parameters
+                  </mat-slide-toggle>
 
-              <mat-checkbox formControlName="retry_unanswered" [disabled]="loading">
-                Retry Unanswered Parameters
-              </mat-checkbox>
+                  <div class="config-item">
+                    <label>Minimum Confidence Score</label>
+                    <mat-slider min="0" max="1" step="0.1" discrete>
+                      <input matSliderThumb [(ngModel)]="parameterCollectionConfig.min_confidence_score"
+                             [ngModelOptions]="{standalone: true}">
+                    </mat-slider>
+                    <span class="slider-value">{{ parameterCollectionConfig.min_confidence_score }}</span>
+                  </div>
 
-              <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>
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>Collection Prompt Template</mat-label>
+                    <textarea matInput 
+                              [(ngModel)]="parameterCollectionConfig.collection_prompt"
+                              [ngModelOptions]="{standalone: true}"
+                              rows="8"></textarea>
+                    <button mat-icon-button matSuffix 
+                            (click)="resetCollectionPrompt()" 
+                            type="button"
+                            matTooltip="Reset to default">
+                      <mat-icon>refresh</mat-icon>
+                    </button>
+                  </mat-form-field>
+                </div>
+              </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>
+        <div class="provider-section">
+          <h3>
+            <mat-icon>record_voice_over</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-label>Provider</mat-label>
+            <mat-icon matPrefix>{{ getTTSProviderIcon(currentTTSProvider || {}) }}</mat-icon>
+            <mat-select formControlName="tts_provider_name" 
+                        (selectionChange)="onTTSProviderChange($event.value)">
+              @for (provider of ttsProviders; track provider.name) {
+                <mat-option [value]="provider.name">
+                  <mat-icon>{{ getTTSProviderIcon(provider) }}</mat-icon>
+                  {{ provider.display_name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-hint *ngIf="getTTSProviderDescription()">{{ getTTSProviderDescription() }}</mat-hint>
+            @if (currentTTSProvider?.description) {
+              <mat-hint>{{ currentTTSProvider.description }}</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
+          @if (currentTTSProvider?.requires_api_key) {
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>{{ getApiKeyLabel('tts') }}</mat-label>
+              <mat-icon matPrefix>key</mat-icon>
+              <input matInput 
+                     type="password" 
+                     formControlName="tts_provider_api_key"
+                     [placeholder]="getApiKeyPlaceholder('tts')">
+              <mat-error *ngIf="form.get('tts_provider_api_key')?.hasError('required')">
+                API key is required for {{ currentTTSProvider?.display_name }}
               </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">
+          @if (currentTTSProvider?.requires_endpoint) {
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Endpoint URL</mat-label>
               <mat-icon matPrefix>link</mat-icon>
+              <input matInput 
+                     formControlName="tts_provider_endpoint"
+                     [placeholder]="getEndpointPlaceholder('tts')">
+              <mat-error *ngIf="form.get('tts_provider_endpoint')?.hasError('required')">
+                Endpoint is required for {{ currentTTSProvider?.display_name }}
+              </mat-error>
             </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">
+        <div class="provider-section">
+          <h3>
             <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-label>Provider</mat-label>
+            <mat-icon matPrefix>{{ getSTTProviderIcon(currentSTTProvider || {}) }}</mat-icon>
+            <mat-select formControlName="stt_provider_name" 
+                        (selectionChange)="onSTTProviderChange($event.value)">
+              @for (provider of sttProviders; track provider.name) {
+                <mat-option [value]="provider.name">
+                  <mat-icon>{{ getSTTProviderIcon(provider) }}</mat-icon>
+                  {{ provider.display_name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-hint *ngIf="getSTTProviderDescription()">{{ getSTTProviderDescription() }}</mat-hint>
+            @if (currentSTTProvider?.description) {
+              <mat-hint>{{ currentSTTProvider.description }}</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
+          @if (currentSTTProvider?.requires_api_key) {
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>{{ getApiKeyLabel('stt') }}</mat-label>
+              <mat-icon matPrefix>key</mat-icon>
+              <input matInput 
+                     [type]="currentSTTProvider.name === 'google' ? 'text' : 'password'"
+                     formControlName="stt_provider_api_key"
+                     [placeholder]="getApiKeyPlaceholder('stt')">
+              <mat-error *ngIf="form.get('stt_provider_api_key')?.hasError('required')">
+                {{ currentSTTProvider.name === 'google' ? 'Credentials path' : 'API key' }} is required for {{ currentSTTProvider?.display_name }}
               </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">
+          @if (currentSTTProvider?.requires_endpoint) {
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Endpoint URL</mat-label>
               <mat-icon matPrefix>link</mat-icon>
+              <input matInput 
+                     formControlName="stt_provider_endpoint"
+                     [placeholder]="getEndpointPlaceholder('stt')">
+              <mat-error *ngIf="form.get('stt_provider_endpoint')?.hasError('required')">
+                Endpoint is required for {{ currentSTTProvider?.display_name }}
+              </mat-error>
             </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>
+    }
+  </mat-card-content>
+  
+  <mat-card-actions align="end">
+    <button mat-button (click)="loadEnvironment()" [disabled]="loading || saving">
+      <mat-icon>refresh</mat-icon>
+      Reload
+    </button>
+    <button mat-raised-button color="primary" 
+            (click)="save()" 
+            [disabled]="form.invalid || loading || saving">
+      <mat-icon>save</mat-icon>
+      {{ saving ? 'Saving...' : 'Save Configuration' }}
+    </button>
+  </mat-card-actions>
+</mat-card>