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

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

@@ -1,456 +1,275 @@
-    <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>
+<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-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>
-          }
+        <!-- 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>
 
-          <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 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>{{ getTokenLabel() }}</mat-label>
-              <input
-                matInput
-                type="password"
-                name="cloudToken"
-                [(ngModel)]="environment.cloud_token"
-                [disabled]="loading || environment.work_mode === 'on-premise'"
-                [placeholder]="getTokenPlaceholder()"
-              >
+              <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-hint>{{ isGPTMode() ? 'Required for OpenAI API access' : 'Required for HF Cloud and Cloud modes' }}</mat-hint>
+              <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">
-              <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-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>
-              <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-checkbox formControlName="tts_use_ssml" [disabled]="loading">
+              Enable SSML Support
+            </mat-checkbox>
+          </div>
+        </div>
 
-              <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>              
+        <mat-divider></mat-divider>
 
-              <mat-checkbox 
-                name="ttsUseSSML"
-                [(ngModel)]="ttsSettings.use_ssml"
-                [disabled]="loading || !isTTSProviderSSMLCapable()"
-                *ngIf="environment.tts_engine !== 'no_tts'">
-                Use SSML
-              </mat-checkbox>
+        <!-- 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>
+          <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>
 
-            <!-- 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="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>
               
-              <mat-form-field appearance="outline" class="api-key-field">
-                <mat-label>{{ getSTTKeyLabel() }}</mat-label>
-                <input
-                  matInput
-                  [type]="environment.stt_engine === 'google' ? 'text' : '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>
-            </div>
+              <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>
 
-            <div>
-              <!-- STT Settings Panel -->
-              <mat-expansion-panel class="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)]="sttSettings.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-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-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)]="sttSettings.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 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>
-              
-                  <!-- Speech Timeout -->
-                  <div class="slider-field">
-                    <label>Speech Timeout: {{ sttSettings.speech_timeout_ms }}ms</label>
-                    <mat-slider
-                      [min]="500"
-                      [max]="5000"
-                      [step]="100"
-                      [discrete]="true"
-                      [displayWith]="formatMilliseconds"
-                    >
-                      <input matSliderThumb 
-                             name="sttSpeechTimeout"
-                             [(ngModel)]="sttSettings.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: {{ sttSettings.vad_sensitivity }}</label>
-                    <mat-slider
-                      [min]="0"
-                      [max]="1"
-                      [step]="0.1"
-                      [discrete]="true"
-                    >
-                      <input matSliderThumb 
-                             name="sttVadSensitivity"
-                             [(ngModel)]="sttSettings.vad_sensitivity">
-                    </mat-slider>
-                    <mat-hint>Higher values = more sensitive</mat-hint>
-                  </div>
-                  
-                  <!-- Noise Reduction Level -->
-                  <div class="slider-field">
-                    <label>Noise Reduction Level: {{ sttSettings.noise_reduction_level }}</label>
-                    <mat-slider
-                      [min]="0"
-                      [max]="3"
-                      [step]="1"
-                      [discrete]="true"
-                    >
-                      <input matSliderThumb 
-                             name="sttNoiseReduction"
-                             [(ngModel)]="sttSettings.noise_reduction_level">
-                    </mat-slider>
-                    <mat-hint>0 = Off, 3 = Maximum</mat-hint>
-                  </div>
-              
-                  <!-- Checkboxes -->
-                  <div class="checkbox-group">
-                    <mat-checkbox 
-                      name="sttUseEnhanced"
-                      [(ngModel)]="sttSettings.use_enhanced"
-                      [disabled]="loading"
-                      *ngIf="environment.stt_engine === 'google'">
-                      Use Enhanced Model
-                    </mat-checkbox>
-                    
-                    <mat-checkbox 
-                      name="sttEnablePunctuation"
-                      [(ngModel)]="sttSettings.enable_punctuation"
-                      [disabled]="loading">
-                      Enable Automatic Punctuation
-                    </mat-checkbox>
-                    
-                    <mat-checkbox 
-                      name="sttInterimResults"
-                      [(ngModel)]="sttSettings.interim_results"
-                      [disabled]="loading">
-                      Show Interim Results
-                    </mat-checkbox>
-                  </div>
                 </div>
-              </mat-expansion-panel>
-            </div>
 
-            <mat-expansion-panel class="prompt-panel settings-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..."
-                  class="code-textarea"
-                ></textarea>
-                <mat-hint>This prompt will be prepended to all project prompts</mat-hint>
-              </mat-form-field>
-            </mat-expansion-panel>
+                <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>
 
-            <!-- Parameter Collection Configuration -->
-            <mat-expansion-panel class="prompt-panel settings-panel">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <mat-icon>psychology</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="param-collection-content">
-                <div class="config-grid">
-                  <!-- Max Parameters Per Question -->
-                  <div class="slider-field">
-                    <label>Max Parameters Per Question: {{ parameterCollectionConfig.max_params_per_question }}</label>
-                    <mat-slider
-                      [min]="1"
-                      [max]="5"
-                      [step]="1"
-                      [discrete]="true"
-                    >
-                      <input matSliderThumb 
-                             name="maxParamsPerQuestion"
-                             [(ngModel)]="parameterCollectionConfig.max_params_per_question">
-                    </mat-slider>
-                    <mat-hint>Maximum number of parameters to ask in one question</mat-hint>
-                  </div>
-            
-                  <!-- Retry Unanswered -->
-                  <mat-checkbox 
-                    name="retryUnanswered"
-                    [(ngModel)]="parameterCollectionConfig.retry_unanswered"
-                    [disabled]="loading"
-                    class="collection-checkbox">
-                    Re-ask parameters that the user didn't answer
+                  <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>
-            
-                <!-- Collection Prompt Template -->
-                <mat-form-field appearance="outline" class="full-width">
-                  <mat-label>Collection Prompt Template</mat-label>
-                  <textarea
-                    matInput
-                    name="collectionPrompt"
-                    [(ngModel)]="parameterCollectionConfig.collection_prompt"
-                    [disabled]="loading"
-                    rows="12"
-                    placeholder="Enter the prompt template for generating parameter questions..."
-                    class="code-textarea"
-                  ></textarea>
-                </mat-form-field>
-            
-                <!-- Template Variables Help -->
-                <mat-expansion-panel class="help-panel">
-                  <mat-expansion-panel-header>
-                    <mat-panel-title>
-                      <mat-icon>help_outline</mat-icon>
-                      Template Variables Reference
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-                  
-                  <mat-list>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{conversation_history}}</code></div>
-                      <div matListItemLine>Recent conversation between user and assistant</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{intent_name}}</code></div>
-                      <div matListItemLine>Technical name of the detected intent</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{intent_caption}}</code></div>
-                      <div matListItemLine>Human-readable caption of the intent</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{collected_params}}</code></div>
-                      <div matListItemLine>Parameters already collected with their values</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{missing_params}}</code></div>
-                      <div matListItemLine>Parameters still needed to complete the request</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{unanswered_params}}</code></div>
-                      <div matListItemLine>Parameters asked before but not answered by user</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{max_params}}</code></div>
-                      <div matListItemLine>Maximum number of parameters to ask in one question</div>
-                    </mat-list-item>
-                    <mat-list-item>
-                      <mat-icon matListItemIcon>code</mat-icon>
-                      <div matListItemTitle><code>{{project_language}}</code></div>
-                      <div matListItemLine>Language setting of the current project</div>
-                    </mat-list-item>
-                  </mat-list>
-                </mat-expansion-panel>
-            
-                <!-- Reset to Default Button -->
-                <button mat-stroked-button type="button" (click)="resetCollectionPrompt()" [disabled]="loading">
-                  <mat-icon>restore</mat-icon>
-                  Reset to Default Template
-                </button>
               </div>
             </mat-expansion-panel>
-                        
-            <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>
+          </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>