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

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

@@ -1,493 +1,541 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { ApiService, Environment } from '../../services/api.service';
-import { EnvironmentService } from '../../services/environment.service';
-
-@Component({
-  selector: 'app-environment',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatButtonModule,
-    MatIconModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatExpansionModule
-  ],
-  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="elevenlabs">ElevenLabs</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>STT API Key</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="Enter STT API key"
-                >
-                <mat-icon matPrefix>key</mat-icon>
-              </mat-form-field>
-            </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>
-
-            <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;
-      margin: 0 auto;
-    }
-
-    mat-card-header {
-      margin-bottom: 24px;
-
-      mat-card-title {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 24px;
-
-        mat-icon {
-          font-size: 28px;
-          width: 28px;
-          height: 28px;
-        }
-      }
-    }
-
-    .info-card {
-      margin-bottom: 20px;
-      background-color: #e3f2fd;
-      
-      mat-card-content {
-        display: flex;
-        gap: 16px;
-        align-items: flex-start;
-        
-        mat-icon {
-          color: #1976d2;
-          margin-top: 4px;
-        }
-        
-        p {
-          margin: 4px 0;
-          font-size: 14px;
-        }
-      }
-    }
-
-    .full-width {
-      width: 100%;
-      margin-bottom: 20px;
-    }
-
-    .engine-row {
-      display: flex;
-      gap: 16px;
-      align-items: flex-start;
-      margin-bottom: 20px;
-
-      .engine-field {
-        flex: 1;
-      }
-
-      .api-key-field {
-        flex: 1.5;
-      }
-    }
-
-    .prompt-panel {
-      margin-bottom: 20px;
-      
-      mat-expansion-panel-header {
-        mat-panel-title {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          
-          mat-icon {
-            color: #666;
-          }
-        }
-      }
-    }
-
-    .form-actions {
-      display: flex;
-      gap: 16px;
-      margin-top: 24px;
-      padding-top: 24px;
-      border-top: 1px solid #e0e0e0;
-    
-      button {
-    
-        mat-spinner {
-          margin-right: 8px;
-          vertical-align: middle; // Spinner'ı hizalamak için ekleyin
-        }
-        
-        mat-icon {
-          vertical-align: middle; // Icon'u hizalamak için ekleyin
-          margin-right: 4px;      // Icon ile text arasına boşluk
-        }
-      }
-    }
-
-    ::ng-deep {
-      .mat-mdc-form-field-icon-prefix {
-        padding-right: 12px;
-      }
-
-      .mat-mdc-progress-spinner {
-        --mdc-circular-progress-active-indicator-color: white;
-      }
-      
-      .mat-expansion-panel-body {
-        padding: 16px 0 !important;
-      }
-    }
-  `]
-})
-export class EnvironmentComponent implements OnInit {
-  private apiService = inject(ApiService);
-  private snackBar = inject(MatSnackBar);
-  private environmentService = inject(EnvironmentService);
-
-  environment: Environment = {
-    work_mode: 'hfcloud',
-    cloud_token: '',
-    spark_endpoint: '',
-    internal_prompt: '',
-    tts_engine: 'no_tts',
-    tts_engine_api_key: '',
-    stt_engine: 'no_stt',
-    stt_engine_api_key: ''
-  };
-
-  loading = true;
-  saving = false;
-
-  ngOnInit() {
-    this.loadEnvironment();
-  }
-
-  loadEnvironment() {
-    this.loading = true;
-    this.apiService.getEnvironment().subscribe({
-      next: (env) => {
-        this.environment = env;
-        this.loading = false;
-      },
-      error: (err) => {
-        this.snackBar.open('Failed to load environment configuration', 'Close', {
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
-        this.loading = false;
-      }
-    });
-  }
-
-  getTokenLabel(): string {
-    switch(this.environment.work_mode) {
-      case 'gpt4o':
-      case 'gpt4o-mini':
-        return 'OpenAI API Key';
-      case 'hfcloud':
-      case 'cloud':
-        return 'Cloud Token';
-      default:
-        return 'Cloud Token';
-    }
-  }
-
-  getTokenPlaceholder(): string {
-    switch(this.environment.work_mode) {
-      case 'gpt4o':
-      case 'gpt4o-mini':
-        return 'Enter OpenAI API key (sk-...)';
-      case 'hfcloud':
-      case 'cloud':
-        return 'Enter cloud token';
-      default:
-        return 'Enter cloud token';
-    }
-  }
-
-  isGPTMode(): boolean {
-    return this.environment.work_mode === 'gpt4o' || this.environment.work_mode === 'gpt4o-mini';
-  }
-
-  onWorkModeChange() {
-    if (this.environment.work_mode === 'on-premise') {
-      this.environment.cloud_token = '';
-    }
-  }
-
-  onTTSEngineChange() {
-    if (this.environment.tts_engine === 'no_tts') {
-      this.environment.tts_engine_api_key = '';
-    }
-  }
-
-  onSTTEngineChange() {
-    if (this.environment.stt_engine === 'no_stt') {
-      this.environment.stt_engine_api_key = '';
-    }
-  }
-
-  save() {
-    this.saving = true;
-  
-    this.apiService.updateEnvironment(this.environment).subscribe({
-      next: () => {
-        // Environment service'i güncelle
-        this.environmentService.updateEnvironment(this.environment);
-        
-        this.snackBar.open('Environment configuration saved successfully', 'Close', {
-          duration: 3000
-        });
-        this.saving = false;
-      },
-      error: (err) => {
-        this.snackBar.open(
-          err.error?.detail || 'Failed to save configuration', 
-          'Close', 
-          { duration: 5000, panelClass: 'error-snackbar' }
-        );
-        this.saving = false;
-      }
-    });
-  }
-
-  testConnection() {
-    this.snackBar.open('Testing connection to Spark endpoint...', undefined, {
-      duration: 2000
-    });
-    
-    // TODO: Implement actual connection test
-    setTimeout(() => {
-      this.snackBar.open('Connection successful!', 'Close', {
-        duration: 3000
-      });
-    }, 2000);
-  }
-
-  reloadFromSpark() {
-    if (this.isGPTMode()) {
-      return;
-    }
-
-    this.snackBar.open('Reloading configuration from Spark...', undefined, {
-      duration: 2000
-    });
-    
-    setTimeout(() => {
-      this.loadEnvironment();
-      this.snackBar.open('Configuration reloaded', 'Close', {
-        duration: 3000
-      });
-    }, 1000);
-  }
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { ApiService, Environment } from '../../services/api.service';
+import { EnvironmentService } from '../../services/environment.service';
+
+@Component({
+  selector: 'app-environment',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+    MatExpansionModule
+  ],
+  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>
+            </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>
+
+            <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;
+      margin: 0 auto;
+    }
+
+    mat-card-header {
+      margin-bottom: 24px;
+
+      mat-card-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 24px;
+
+        mat-icon {
+          font-size: 28px;
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+
+    .info-card {
+      margin-bottom: 20px;
+      background-color: #e3f2fd;
+      
+      mat-card-content {
+        display: flex;
+        gap: 16px;
+        align-items: flex-start;
+        
+        mat-icon {
+          color: #1976d2;
+          margin-top: 4px;
+        }
+        
+        p {
+          margin: 4px 0;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .full-width {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    .engine-row {
+      display: flex;
+      gap: 16px;
+      align-items: flex-start;
+      margin-bottom: 20px;
+
+      .engine-field {
+        flex: 1;
+      }
+
+      .api-key-field {
+        flex: 1.5;
+      }
+    }
+
+    .prompt-panel {
+      margin-bottom: 20px;
+      
+      mat-expansion-panel-header {
+        mat-panel-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          
+          mat-icon {
+            color: #666;
+          }
+        }
+      }
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 16px;
+      margin-top: 24px;
+      padding-top: 24px;
+      border-top: 1px solid #e0e0e0;
+    
+      button {
+    
+        mat-spinner {
+          margin-right: 8px;
+          vertical-align: middle; // Spinner'ı hizalamak için ekleyin
+        }
+        
+        mat-icon {
+          vertical-align: middle; // Icon'u hizalamak için ekleyin
+          margin-right: 4px;      // Icon ile text arasına boşluk
+        }
+      }
+    }
+
+    ::ng-deep {
+      .mat-mdc-form-field-icon-prefix {
+        padding-right: 12px;
+      }
+
+      .mat-mdc-progress-spinner {
+        --mdc-circular-progress-active-indicator-color: white;
+      }
+      
+      .mat-expansion-panel-body {
+        padding: 16px 0 !important;
+      }
+    }
+  `]
+})
+export class EnvironmentComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private snackBar = inject(MatSnackBar);
+  private environmentService = inject(EnvironmentService);
+
+  environment: Environment = {
+    work_mode: 'hfcloud',
+    cloud_token: '',
+    spark_endpoint: '',
+    internal_prompt: '',
+    tts_engine: 'no_tts',
+    tts_engine_api_key: '',
+    stt_engine: 'no_stt',
+    stt_engine_api_key: ''
+  };
+
+  loading = true;
+  saving = false;
+
+  ngOnInit() {
+    this.loadEnvironment();
+  }
+
+  loadEnvironment() {
+    this.loading = true;
+    this.apiService.getEnvironment().subscribe({
+      next: (env) => {
+        this.environment = env;
+        this.loading = false;
+      },
+      error: (err) => {
+        this.snackBar.open('Failed to load environment configuration', 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
+        this.loading = false;
+      }
+    });
+  }
+
+  getTokenLabel(): string {
+    switch(this.environment.work_mode) {
+      case 'gpt4o':
+      case 'gpt4o-mini':
+        return 'OpenAI API Key';
+      case 'hfcloud':
+      case 'cloud':
+        return 'Cloud Token';
+      default:
+        return 'Cloud Token';
+    }
+  }
+
+  getTokenPlaceholder(): string {
+    switch(this.environment.work_mode) {
+      case 'gpt4o':
+      case 'gpt4o-mini':
+        return 'Enter OpenAI API key (sk-...)';
+      case 'hfcloud':
+      case 'cloud':
+        return 'Enter cloud token';
+      default:
+        return 'Enter cloud token';
+    }
+  }
+
+  isGPTMode(): boolean {
+    return this.environment.work_mode === 'gpt4o' || this.environment.work_mode === 'gpt4o-mini';
+  }
+
+  onWorkModeChange() {
+    if (this.environment.work_mode === 'on-premise') {
+      this.environment.cloud_token = '';
+    }
+  }
+
+  onTTSEngineChange() {
+    if (this.environment.tts_engine === 'no_tts') {
+      this.environment.tts_engine_api_key = '';
+    }
+  }
+
+  onSTTEngineChange() {
+    if (this.environment.stt_engine === 'no_stt') {
+      this.environment.stt_engine_api_key = '';
+    }
+  }
+
+  getSTTKeyLabel(): string {
+    switch(this.environment.stt_engine) {
+      case 'google':
+        return 'Google Credentials Path';
+      case 'azure':
+        return 'Azure Subscription Key';
+      case 'amazon':
+        return 'AWS Access Key';
+      case 'flicker':
+        return 'Flicker API Key';
+      default:
+        return 'STT API Key';
+    }
+  }
+  
+  getSTTKeyPlaceholder(): string {
+    switch(this.environment.stt_engine) {
+      case 'google':
+        return 'Path to Google credentials JSON file';
+      case 'azure':
+        return 'Enter Azure subscription key';
+      case 'amazon':
+        return 'Enter AWS access key';
+      case 'flicker':
+        return 'Enter Flicker API key';
+      default:
+        return 'Enter STT API key';
+    }
+  }
+  
+  getSTTKeyHint(): string {
+    switch(this.environment.stt_engine) {
+      case 'google':
+        return 'Path to service account JSON file for Google Cloud';
+      case 'azure':
+        return 'Subscription key from Azure portal';
+      case 'amazon':
+        return 'AWS IAM access key with Transcribe permissions';
+      case 'flicker':
+        return 'API key from Flicker dashboard';
+      default:
+        return '';
+    }
+  }  
+
+  save() {
+    this.saving = true;
+  
+    this.apiService.updateEnvironment(this.environment).subscribe({
+      next: () => {
+        // Environment service'i güncelle
+        this.environmentService.updateEnvironment(this.environment);
+        
+        this.snackBar.open('Environment configuration saved successfully', 'Close', {
+          duration: 3000
+        });
+        this.saving = false;
+      },
+      error: (err) => {
+        this.snackBar.open(
+          err.error?.detail || 'Failed to save configuration', 
+          'Close', 
+          { duration: 5000, panelClass: 'error-snackbar' }
+        );
+        this.saving = false;
+      }
+    });
+  }
+
+  testConnection() {
+    this.snackBar.open('Testing connection to Spark endpoint...', undefined, {
+      duration: 2000
+    });
+    
+    // TODO: Implement actual connection test
+    setTimeout(() => {
+      this.snackBar.open('Connection successful!', 'Close', {
+        duration: 3000
+      });
+    }, 2000);
+  }
+
+  reloadFromSpark() {
+    if (this.isGPTMode()) {
+      return;
+    }
+
+    this.snackBar.open('Reloading configuration from Spark...', undefined, {
+      duration: 2000
+    });
+    
+    setTimeout(() => {
+      this.loadEnvironment();
+      this.snackBar.open('Configuration reloaded', 'Close', {
+        duration: 3000
+      });
+    }, 1000);
+  }
 }