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

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

@@ -23,7 +23,7 @@
           
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Provider</mat-label>
-            <mat-icon matPrefix>{{ getLLMProviderIcon(currentLLMProvider || {}) }}</mat-icon>
+            <mat-icon matPrefix>{{ getLLMProviderIcon(currentLLMProviderSafe) }}</mat-icon>
             <mat-select formControlName="llm_provider_name" 
                         (selectionChange)="onLLMProviderChange($event.value)">
               @for (provider of llmProviders; track provider.name) {
@@ -33,12 +33,12 @@
                 </mat-option>
               }
             </mat-select>
-            @if (currentLLMProvider?.description) {
-              <mat-hint>{{ currentLLMProvider.description }}</mat-hint>
+            @if (currentLLMProviderSafe?.description) {
+              <mat-hint>{{ currentLLMProviderSafe.description }}</mat-hint>
             }
           </mat-form-field>
 
-          @if (currentLLMProvider?.requires_api_key) {
+          @if (currentLLMProviderSafe?.requires_api_key) {
             <mat-form-field appearance="outline" class="full-width">
               <mat-label>{{ getApiKeyLabel('llm') }}</mat-label>
               <mat-icon matPrefix>key</mat-icon>
@@ -47,12 +47,12 @@
                      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 }}
+                API key is required for {{ currentLLMProviderSafe?.display_name }}
               </mat-error>
             </mat-form-field>
           }
 
-          @if (currentLLMProvider?.requires_endpoint) {
+          @if (currentLLMProviderSafe?.requires_endpoint) {
             <mat-form-field appearance="outline" class="full-width">
               <mat-label>Endpoint URL</mat-label>
               <mat-icon matPrefix>link</mat-icon>
@@ -66,13 +66,13 @@
                 <mat-icon>wifi_tethering</mat-icon>
               </button>
               <mat-error *ngIf="form.get('llm_provider_endpoint')?.hasError('required')">
-                Endpoint is required for {{ currentLLMProvider?.display_name }}
+                Endpoint is required for {{ currentLLMProviderSafe?.display_name }}
               </mat-error>
             </mat-form-field>
           }
 
           <!-- LLM Settings (Internal Prompt & Parameter Collection) -->
-          @if (currentLLMProvider) {
+          @if (currentLLMProviderSafe) {
             <mat-expansion-panel class="settings-panel">
               <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -86,16 +86,16 @@
               
               <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;
+                  This prompt is prepended to all intent detection requests.
                 </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>
+                            rows="10"
+                            placeholder="Enter the system prompt that guides intent detection..."></textarea>
+                  <mat-hint>Use clear instructions to guide the LLM's behavior</mat-hint>
                 </mat-form-field>
               </div>
             </mat-expansion-panel>
@@ -103,11 +103,11 @@
             <mat-expansion-panel class="settings-panel">
               <mat-expansion-panel-header>
                 <mat-panel-title>
-                  <mat-icon>quiz</mat-icon>
+                  <mat-icon>tune</mat-icon>
                   Parameter Collection Configuration
                 </mat-panel-title>
                 <mat-panel-description>
-                  Configure smart parameter collection behavior
+                  Fine-tune how parameters are collected from users
                 </mat-panel-description>
               </mat-expansion-panel-header>
               
@@ -117,54 +117,52 @@
                   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>
+                <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.ask_optional_params"
-                                    [ngModelOptions]="{standalone: true}">
-                    Ask for Optional Parameters
-                  </mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="parameterCollectionConfig.show_all_required"
+                                  [ngModelOptions]="{standalone: true}">
+                  Show All Required Parameters
+                </mat-slide-toggle>
 
-                  <mat-slide-toggle [(ngModel)]="parameterCollectionConfig.group_related_params"
-                                    [ngModelOptions]="{standalone: true}">
-                    Group Related Parameters
-                  </mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="parameterCollectionConfig.ask_optional_params"
+                                  [ngModelOptions]="{standalone: true}">
+                  Ask for Optional Parameters
+                </mat-slide-toggle>
 
-                  <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-slide-toggle [(ngModel)]="parameterCollectionConfig.group_related_params"
+                                  [ngModelOptions]="{standalone: true}">
+                  Group Related Parameters
+                </mat-slide-toggle>
 
-                  <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 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 
+                            [(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>
             </mat-expansion-panel>
           }
@@ -181,8 +179,8 @@
           
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Provider</mat-label>
-            <mat-icon matPrefix>{{ getTTSProviderIcon(currentTTSProvider || {}) }}</mat-icon>
-            <mat-select formControlName="tts_provider_name" 
+            <mat-icon matPrefix>{{ getTTSProviderIcon(currentTTSProviderSafe) }}</mat-icon>
+            <mat-select formControlName="tts_provider_name"
                         (selectionChange)="onTTSProviderChange($event.value)">
               @for (provider of ttsProviders; track provider.name) {
                 <mat-option [value]="provider.name">
@@ -191,35 +189,32 @@
                 </mat-option>
               }
             </mat-select>
-            @if (currentTTSProvider?.description) {
-              <mat-hint>{{ currentTTSProvider.description }}</mat-hint>
+            @if (currentTTSProviderSafe?.description) {
+              <mat-hint>{{ currentTTSProviderSafe.description }}</mat-hint>
             }
           </mat-form-field>
 
-          @if (currentTTSProvider?.requires_api_key) {
+          @if (currentTTSProviderSafe?.requires_api_key) {
             <mat-form-field appearance="outline" class="full-width">
-              <mat-label>{{ getApiKeyLabel('tts') }}</mat-label>
+              <mat-label>API Key</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 }}
+                API key is required for {{ currentTTSProviderSafe?.display_name }}
               </mat-error>
             </mat-form-field>
           }
 
-          @if (currentTTSProvider?.requires_endpoint) {
+          @if (currentTTSProviderSafe?.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>
           }
         </div>
@@ -235,8 +230,8 @@
           
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Provider</mat-label>
-            <mat-icon matPrefix>{{ getSTTProviderIcon(currentSTTProvider || {}) }}</mat-icon>
-            <mat-select formControlName="stt_provider_name" 
+            <mat-icon matPrefix>{{ getSTTProviderIcon(currentSTTProviderSafe) }}</mat-icon>
+            <mat-select formControlName="stt_provider_name"
                         (selectionChange)="onSTTProviderChange($event.value)">
               @for (provider of sttProviders; track provider.name) {
                 <mat-option [value]="provider.name">
@@ -245,50 +240,44 @@
                 </mat-option>
               }
             </mat-select>
-            @if (currentSTTProvider?.description) {
-              <mat-hint>{{ currentSTTProvider.description }}</mat-hint>
+            @if (currentSTTProviderSafe?.description) {
+              <mat-hint>{{ currentSTTProviderSafe.description }}</mat-hint>
             }
           </mat-form-field>
 
-          @if (currentSTTProvider?.requires_api_key) {
+          @if (currentSTTProviderSafe?.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'"
+                     [type]="currentSTTProviderSafe?.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 }}
+                {{ currentSTTProviderSafe?.name === 'google' ? 'Credentials path' : 'API key' }} is required for {{ currentSTTProviderSafe?.display_name }}
               </mat-error>
             </mat-form-field>
           }
 
-          @if (currentSTTProvider?.requires_endpoint) {
+          @if (currentSTTProviderSafe?.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>
           }
         </div>
       </form>
     }
   </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">
+    <button mat-raised-button 
+            color="primary" 
+            (click)="saveEnvironment()"
+            [disabled]="form.invalid || saving">
       <mat-icon>save</mat-icon>
       {{ saving ? 'Saving...' : 'Save Configuration' }}
     </button>