Upload environment.component.ts

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

@@ -1,862 +1,493 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup } 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 { MatSliderModule } from '@angular/material/slider';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { ApiService, Environment, STTSettings } from '../../services/api.service';
-import { EnvironmentService } from '../../services/environment.service';
-
-@Component({
-  selector: 'app-environment',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule, // Bunu ekle
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatButtonModule,
-    MatIconModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatExpansionModule,
-    MatSliderModule,
-    MatTooltipModule,
-    MatCheckboxModule
-  ],
-  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"
-                formControlName="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"
-                formControlName="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"
-                formControlName="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"
-                  formControlName="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"
-                  formControlName="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"
-                  formControlName="environment.stt_engine"
-                  (selectionChange)="onSTTEngineChange()"
-                  [disabled]="loading"
-                >
-                  <mat-option value="no_stt">No STT</mat-option>
-                  <mat-option value="google">Google Cloud Speech-to-Text</mat-option>
-                  <mat-option value="azure">Azure Speech Services (Coming Soon)</mat-option>
-                  <mat-option value="amazon">Amazon Transcribe (Coming Soon)</mat-option>
-                  <mat-option value="gpt4o_realtime">GPT-4o Realtime (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>STT API Key / Credentials</mat-label>
-                <input
-                  matInput
-                  type="password"
-                  name="sttApiKey"
-                  formControlName="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>
-                <button mat-icon-button matSuffix 
-                        *ngIf="environment.stt_engine === 'google'"
-                        (click)="fileInput.click()"
-                        [disabled]="loading"
-                        matTooltip="Upload Google credentials JSON">
-                  <mat-icon>upload_file</mat-icon>
-                </button>
-                <input #fileInput type="file" accept=".json" 
-                       style="display: none"
-                       (change)="onSTTCredentialsFileSelected($event)">
-              </mat-form-field>
-            </div>
-
-            <!-- STT Settings Panel -->
-            <mat-expansion-panel class="stt-settings-panel" 
-                                 *ngIf="environment.stt_engine !== 'no_stt'"
-                                 [expanded]="sttSettingsExpanded">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <mat-icon>settings_voice</mat-icon>
-                  STT Advanced Settings
-                </mat-panel-title>
-                <mat-panel-description>
-                  Configure speech recognition parameters
-                </mat-panel-description>
-              </mat-expansion-panel-header>
-              
-              <!-- Panel içeriğini ngIf ile kontrol et -->
-              <ng-container *ngIf="environment.stt_settings && sttSettingsExpanded">
-                <div class="stt-settings-grid">
-    
-                  <mat-form-field appearance="outline">
-                    <mat-label>Speech Timeout (ms)</mat-label>
-                    <input matInput type="number" 
-                           name="speechTimeout"
-                           [value]="sttSettings.speech_timeout_ms"
-                           (input)="updateSTTSetting('speech_timeout_ms', +$any($event.target).value)"
-                           min="500" max="5000" step="100"
-                           [disabled]="loading">
-                    <mat-icon matPrefix>timer</mat-icon>
-                    <mat-hint>Silence duration to end speech (500-5000ms)</mat-hint>
-                  </mat-form-field>
-                  
-                  <mat-form-field appearance="outline">
-                    <mat-label>Noise Reduction Level</mat-label>
-                    <mat-select name="noiseReduction"
-                                [value]="sttSettings.noise_reduction_level"
-                                (selectionChange)="updateSTTSetting('noise_reduction_level', $event.value)"
-                                [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>noise_aware</mat-icon>
-                  </mat-form-field>
-                  
-                  <mat-form-field appearance="outline" class="full-width">
-                    <mat-label>VAD Sensitivity</mat-label>
-                    <mat-slider min="0" max="1" step="0.1" 
-                                [discrete]="true"
-                                [displayWith]="formatVAD">
-                      <input matSliderThumb
-                             name="vadSensitivity"
-                             [value]="sttSettings.vad_sensitivity"
-                             (input)="updateSTTSetting('vad_sensitivity', +$any($event.target).value)"
-                             [disabled]="loading">
-                    </mat-slider>
-                    <mat-icon matPrefix>graphic_eq</mat-icon>
-                    <mat-hint>Voice activity detection sensitivity (0=low, 1=high)</mat-hint>
-                  </mat-form-field>
-                  
-                  <mat-form-field appearance="outline">
-                    <mat-label>Language</mat-label>
-                    <mat-select name="sttLanguage"
-                                [value]="sttSettings.language"
-                                (selectionChange)="updateSTTSetting('language', $event.value)"
-                                [disabled]="loading">
-                      <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
-                      <mat-option value="en-US">English (en-US)</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-select>
-                    <mat-icon matPrefix>language</mat-icon>
-                  </mat-form-field>
-                  
-                  <mat-form-field appearance="outline" 
-                                  *ngIf="environment.stt_engine === 'google'">
-                    <mat-label>Model</mat-label>
-                    <mat-select name="sttModel"
-                                [value]="sttSettings.model"
-                                (selectionChange)="updateSTTSetting('model', $event.value)"
-                                [disabled]="loading">
-                      <mat-option value="latest_long">Latest Long (Best for conversations)</mat-option>
-                      <mat-option value="command_and_search">Command & Search (Short queries)</mat-option>
-                      <mat-option value="phone_call">Phone Call (Telephony)</mat-option>
-                      <mat-option value="video">Video (Multiple speakers)</mat-option>
-                    </mat-select>
-                    <mat-icon matPrefix>model_training</mat-icon>
-                  </mat-form-field>
-                  
-                  <div class="checkbox-group">
-                    <mat-checkbox name="useEnhanced"
-                                  [checked]="sttSettings.use_enhanced"
-                                  (change)="updateSTTSetting('use_enhanced', $event.checked)"
-                                  [disabled]="loading || environment.stt_engine !== 'google'">
-                      Use Enhanced Model
-                      <mat-icon matTooltip="Better accuracy but higher cost" class="info-icon">info</mat-icon>
-                    </mat-checkbox>
-                    
-                    <mat-checkbox name="enablePunctuation"
-                                  [checked]="sttSettings.enable_punctuation"
-                                  (change)="updateSTTSetting('enable_punctuation', $event.checked)"
-                                  [disabled]="loading">
-                      Automatic Punctuation
-                    </mat-checkbox>
-                    
-                    <mat-checkbox name="interimResults"
-                                  [checked]="sttSettings.interim_results"
-                                  (change)="updateSTTSetting('interim_results', $event.checked)"
-                                  [disabled]="loading">
-                      Show Interim Results
-                    </mat-checkbox>
-                  </div>
-                </div>  
-
-                <div class="stt-info-card" *ngIf="environment.stt_engine === 'google'">
-                  <mat-icon>info</mat-icon>
-                  <div>
-                    <strong>Google Cloud Setup Required:</strong>
-                    <ol>
-                      <li>Create a Google Cloud project</li>
-                      <li>Enable Speech-to-Text API</li>
-                      <li>Create service account & download JSON key</li>
-                      <li>Upload JSON key file as STT API Key</li>
-                    </ol>
-                    <p class="cost-info">Cost: ~$0.024/minute (standard), ~$0.036/minute (enhanced)</p>
-                  </div>
-                </div>
-
-              </ng-container>
-            </mat-expansion-panel>
-
-            <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"
-                  formControlName="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
-        }
-      }
-    }
-
-    .stt-settings-panel {
-      margin-bottom: 20px;
-      
-      .stt-settings-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 16px;
-        
-        .full-width {
-          grid-column: 1 / -1;
-        }
-        
-        .checkbox-group {
-          grid-column: 1 / -1;
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-          
-          mat-checkbox {
-            display: flex;
-            align-items: center;
-            
-            .info-icon {
-              font-size: 18px;
-              margin-left: 8px;
-              color: #666;
-              cursor: help;
-            }
-          }
-        }
-      }
-      
-      .stt-info-card {
-        margin-top: 16px;
-        padding: 16px;
-        background-color: #e3f2fd;
-        border-radius: 4px;
-        display: flex;
-        gap: 16px;
-        
-        mat-icon {
-          color: #1976d2;
-          flex-shrink: 0;
-        }
-        
-        ol {
-          margin: 8px 0;
-          padding-left: 20px;
-        }
-        
-        .cost-info {
-          margin-top: 8px;
-          font-size: 14px;
-          color: #666;
-        }
-      }
-    }
-
-    ::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);
-  private fb = inject(FormBuilder);
-
-  environmentForm!: FormGroup;
-  loading = true;
-  saving = false;
-  sttSettingsExpanded = false;
-
-  ngOnInit() {
-    this.initializeForm();
-    this.loadEnvironment();
-  }
-
-  initializeForm() {
-    this.environmentForm = this.fb.group({
-      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: [''],
-      stt_settings: this.fb.group({
-        speech_timeout_ms: [2000],
-        noise_reduction_level: [2],
-        vad_sensitivity: [0.5],
-        language: ['tr-TR'],
-        model: ['latest_long'],
-        use_enhanced: [true],
-        enable_punctuation: [true],
-        interim_results: [true]
-      })
-    });
-
-    // STT engine değişikliklerini dinle
-    this.environmentForm.get('stt_engine')?.valueChanges.subscribe(value => {
-      this.onSTTEngineChange(value);
-    });
-  }
-
-  loadEnvironment() {
-    this.loading = true;
-    this.apiService.getEnvironment().subscribe({
-      next: (env) => {
-        this.environmentForm.patchValue({
-          work_mode: env.work_mode,
-          cloud_token: env.cloud_token,
-          spark_endpoint: env.spark_endpoint,
-          internal_prompt: env.internal_prompt,
-          tts_engine: env.tts_engine,
-          tts_engine_api_key: env.tts_engine_api_key,
-          stt_engine: env.stt_engine,
-          stt_engine_api_key: env.stt_engine_api_key
-        });
-
-        if (env.stt_settings) {
-          this.environmentForm.get('stt_settings')?.patchValue(env.stt_settings);
-        }
-        
-        this.loading = false;
-      },
-      error: (err) => {
-        this.snackBar.open('Failed to load environment configuration', 'Close', {
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
-        this.loading = false;
-      }
-    });
-  }
-
-  onSTTEngineChange(value: string) {
-    if (value === 'no_stt') {
-      this.environmentForm.patchValue({ stt_engine_api_key: '' });
-      this.sttSettingsExpanded = false;
-    } else {
-      this.sttSettingsExpanded = true;
-    }
-  }
-
-  save() {
-    if (this.environmentForm.invalid) {
-      return;
-    }
-
-    this.saving = true;
-    const formValue = this.environmentForm.value;
-
-    this.apiService.updateEnvironment(formValue).subscribe({
-      next: () => {
-        this.environmentService.updateEnvironment(formValue);
-        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;
-      }
-    });
-  }
-
-  // Diğer metodlar
-  isGPTMode(): boolean {
-    const workMode = this.environmentForm.get('work_mode')?.value;
-    return workMode === 'gpt4o' || workMode === 'gpt4o-mini';
-  }
-
-  formatVAD(value: number): string {
-    return value.toFixed(1);
-  }
-
-  getSTTKeyPlaceholder(): string {
-    const sttEngine = this.environmentForm.get('stt_engine')?.value;
-    switch(sttEngine) {
-      case 'google':
-        return 'Google service account JSON content';
-      case 'azure':
-        return 'Azure subscription key';
-      case 'amazon':
-        return 'AWS access key';
-      case 'gpt4o_realtime':
-        return 'OpenAI API key';
-      default:
-        return 'Enter API key';
-    }
-  }
-
-  onSTTCredentialsFileSelected(event: any) {
-    const file = event.target.files[0];
-    if (file && file.type === 'application/json') {
-      const reader = new FileReader();
-      reader.onload = (e: any) => {
-        try {
-          JSON.parse(e.target.result); // Validate JSON
-          this.environmentForm.patchValue({ stt_engine_api_key: e.target.result });
-          this.snackBar.open('Google credentials loaded successfully', 'Close', {
-            duration: 3000
-          });
-        } catch (error) {
-          this.snackBar.open('Invalid JSON file', 'Close', {
-            duration: 3000,
-            panelClass: 'error-snackbar'
-          });
-        }
-      };
-      reader.readAsText(file);
-    }
-  }
-
-  get environment(): Environment {
-    return {
-      ...this.environmentForm.value,
-      stt_settings: this.sttSettingsForm.value
-    };
-  }
-
-  set environment(value: Environment) {
-    // Form update için kullanılmıyor, sadece compat için
-  }
-    
-  updateSTTSetting(key: string, value: any) {
-    if (!this.environment.stt_settings) {
-      this.environment.stt_settings = {
-        speech_timeout_ms: 2000,
-        noise_reduction_level: 2,
-        vad_sensitivity: 0.5,
-        language: 'tr-TR',
-        model: 'latest_long',
-        use_enhanced: true,
-        enable_punctuation: true,
-        interim_results: true
-      };
-    }
-    (this.environment.stt_settings as any)[key] = value;
-  }
-    
-  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 = '';
-      this.sttSettingsExpanded = false;
-    } else {
-      // STT settings'i hemen oluştur
-      if (!this.environment.stt_settings) {
-        this.environment.stt_settings = {
-          speech_timeout_ms: 2000,
-          noise_reduction_level: 2,
-          vad_sensitivity: 0.5,
-          language: 'tr-TR',
-          model: 'latest_long',
-          use_enhanced: true,
-          enable_punctuation: true,
-          interim_results: true
-        };
-      }
-      
-      setTimeout(() => {
-        this.sttSettingsExpanded = true;
-      }, 50);
-    }
-  }
-  
-  formatVAD(value: number): string {
-    return value.toFixed(1);
-  }
-  
-  getSTTKeyPlaceholder(): string {
-    switch(this.environment.stt_engine) {
-      case 'google':
-        return 'Google service account JSON content';
-      case 'azure':
-        return 'Azure subscription key';
-      case 'amazon':
-        return 'AWS access key';
-      case 'gpt4o_realtime':
-        return 'OpenAI API key';
-      default:
-        return 'Enter API key';
-    }
-  }
-  
-  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="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);
+  }
 }