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

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

@@ -1,339 +1,401 @@
-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 { MatSliderModule } from '@angular/material/slider';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatListModule } from '@angular/material/list';
-import { ApiService, Environment, STTSettings, TTSSettings, ParameterCollectionConfig } from '../../services/api.service';
-import { EnvironmentService } from '../../services/environment.service';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ApiService } from '../services/api.service';
+import { finalize } from 'rxjs/operators';
+
+interface ProviderConfig {
+  type: string;
+  name: string;
+  display_name: string;
+  requires_endpoint: boolean;
+  requires_api_key: boolean;
+  requires_repo_info: boolean;
+  description?: string;
+}
+
+interface ProviderSettings {
+  name: string;
+  api_key?: string;
+  endpoint?: string;
+  settings: any;
+}
 
 @Component({
   selector: 'app-environment',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatButtonModule,
-    MatIconModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatExpansionModule,
-    MatSliderModule,
-    MatCheckboxModule,
-    MatListModule
-  ],
   templateUrl: './environment.component.html',
   styleUrls: ['./environment.component.scss']
 })
 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: ''
-  };
-
-  ttsSettings: TTSSettings = {
-    use_ssml: false
-  };
-  
-  // Separate STT settings object with defaults
-  sttSettings: STTSettings = {
-    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
-  };
-
-  // Parameter Collection Configuration
-  parameterCollectionConfig: ParameterCollectionConfig = {
-    max_params_per_question: 2,
-    smart_grouping: true,
-    retry_unanswered: true,
-    collection_prompt: ''
-  };
-
-  loading = true;
+  environmentForm!: FormGroup;
+  loading = false;
   saving = false;
-
-  conversation_history: string = '{{conversation_history}}';
-  intent_name: string = '{{intent_name}}';
-  intent_caption: string = '{{intent_caption}}';
-  collected_params: string = '{{collected_params}}';
-  missing_params: string = '{{missing_params}}';
-  unanswered_params: string = '{{unanswered_params}}';
-  max_params: string = '{{max_params}}';
-  project_language: string = '{{project_language}}';
+  showInternalPrompt = false;
+  showParameterCollection = false;
+  
+  // Provider lists
+  allProviders: ProviderConfig[] = [];
+  llmProviders: ProviderConfig[] = [];
+  ttsProviders: ProviderConfig[] = [];
+  sttProviders: ProviderConfig[] = [];
   
-  ngOnInit() {
+  // Current provider configs
+  currentLLMProvider?: ProviderConfig;
+  currentTTSProvider?: ProviderConfig;
+  currentSTTProvider?: ProviderConfig;
+
+  constructor(
+    private fb: FormBuilder,
+    private apiService: ApiService,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.initializeForm();
     this.loadEnvironment();
   }
 
-  loadEnvironment() {
-    this.loading = true;
-    this.apiService.getEnvironment().subscribe({
-      next: (env) => {
-        this.environment = env;
-        
-        // Load TTS settings or use defaults
-        if (env.tts_settings) {
-          this.ttsSettings = { ...this.ttsSettings, ...env.tts_settings };
-        }
-
-        // Load STT settings or use defaults
-        if (env.stt_settings) {
-          this.sttSettings = { ...this.sttSettings, ...env.stt_settings };
-        }
-        
-        // Load Parameter Collection Configuration
-        if (env.parameter_collection_config) {
-          this.parameterCollectionConfig = { ...this.parameterCollectionConfig, ...env.parameter_collection_config };
-        }
-        
-        this.loading = false;
-      },
-      error: (err) => {
-        this.snackBar.open('Failed to load environment configuration', 'Close', {
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
-        this.loading = false;
-      }
+  initializeForm(): void {
+    this.environmentForm = this.fb.group({
+      // LLM Provider
+      llm_provider_name: ['', Validators.required],
+      llm_provider_api_key: [''],
+      llm_provider_endpoint: [''],
+      internal_prompt: [''],
+      
+      // Parameter Collection Config
+      max_params_per_question: [2, [Validators.min(1), Validators.max(5)]],
+      retry_unanswered: [true],
+      collection_prompt: [''],
+      
+      // TTS Provider
+      tts_provider_name: ['no_tts'],
+      tts_provider_api_key: [''],
+      tts_provider_endpoint: [''],
+      tts_use_ssml: [false],
+      
+      // STT Provider
+      stt_provider_name: ['no_stt'],
+      stt_provider_api_key: [''],
+      stt_provider_endpoint: [''],
+      stt_speech_timeout_ms: [2000],
+      stt_noise_reduction_level: [2],
+      stt_vad_sensitivity: [0.5],
+      stt_language: ['tr-TR'],
+      stt_model: ['latest_long'],
+      stt_use_enhanced: [true],
+      stt_enable_punctuation: [true],
+      stt_interim_results: [true]
     });
-  }
-  
-  formatSliderLabel(value: number): string {
-    return `${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 'sk-...';
-      case 'hfcloud':
-      case 'cloud':
-        return 'Enter cloud token';
-      default:
-        return 'Enter token';
-    }
-  }
-
-  isGPTMode(): boolean {
-    return this.environment.work_mode === 'gpt4o' || this.environment.work_mode === 'gpt4o-mini';
+    // Subscribe to provider changes
+    this.environmentForm.get('llm_provider_name')?.valueChanges.subscribe(name => {
+      this.onLLMProviderChange(name);
+    });
+    
+    this.environmentForm.get('tts_provider_name')?.valueChanges.subscribe(name => {
+      this.onTTSProviderChange(name);
+    });
+    
+    this.environmentForm.get('stt_provider_name')?.valueChanges.subscribe(name => {
+      this.onSTTProviderChange(name);
+    });
   }
 
-  onTTSEngineChange() {
-    if (this.environment.tts_engine === 'no_tts') {
-      this.environment.tts_engine_api_key = '';
-    }
+  loadEnvironment(): void {
+    this.loading = true;
+    this.apiService.getEnvironment()
+      .pipe(finalize(() => this.loading = false))
+      .subscribe({
+        next: (data) => {
+          // Store providers
+          this.allProviders = data.providers || [];
+          this.llmProviders = this.allProviders.filter(p => p.type === 'llm');
+          this.ttsProviders = [{
+            type: 'tts',
+            name: 'no_tts',
+            display_name: 'No TTS',
+            requires_endpoint: false,
+            requires_api_key: false,
+            requires_repo_info: false
+          }, ...this.allProviders.filter(p => p.type === 'tts')];
+          this.sttProviders = [{
+            type: 'stt',
+            name: 'no_stt',
+            display_name: 'No STT',
+            requires_endpoint: false,
+            requires_api_key: false,
+            requires_repo_info: false
+          }, ...this.allProviders.filter(p => p.type === 'stt')];
+          
+          // Set form values
+          this.environmentForm.patchValue({
+            // LLM Provider
+            llm_provider_name: data.llm_provider?.name || '',
+            llm_provider_api_key: data.llm_provider?.api_key || '',
+            llm_provider_endpoint: data.llm_provider?.endpoint || '',
+            internal_prompt: data.llm_provider?.settings?.internal_prompt || '',
+            
+            // Parameter Collection
+            max_params_per_question: data.llm_provider?.settings?.parameter_collection_config?.max_params_per_question || 2,
+            retry_unanswered: data.llm_provider?.settings?.parameter_collection_config?.retry_unanswered ?? true,
+            collection_prompt: data.llm_provider?.settings?.parameter_collection_config?.collection_prompt || '',
+            
+            // TTS Provider
+            tts_provider_name: data.tts_provider?.name || 'no_tts',
+            tts_provider_api_key: data.tts_provider?.api_key || '',
+            tts_provider_endpoint: data.tts_provider?.endpoint || '',
+            tts_use_ssml: data.tts_provider?.settings?.use_ssml || false,
+            
+            // STT Provider
+            stt_provider_name: data.stt_provider?.name || 'no_stt',
+            stt_provider_api_key: data.stt_provider?.api_key || '',
+            stt_provider_endpoint: data.stt_provider?.endpoint || '',
+            stt_speech_timeout_ms: data.stt_provider?.settings?.speech_timeout_ms || 2000,
+            stt_noise_reduction_level: data.stt_provider?.settings?.noise_reduction_level || 2,
+            stt_vad_sensitivity: data.stt_provider?.settings?.vad_sensitivity || 0.5,
+            stt_language: data.stt_provider?.settings?.language || 'tr-TR',
+            stt_model: data.stt_provider?.settings?.model || 'latest_long',
+            stt_use_enhanced: data.stt_provider?.settings?.use_enhanced ?? true,
+            stt_enable_punctuation: data.stt_provider?.settings?.enable_punctuation ?? true,
+            stt_interim_results: data.stt_provider?.settings?.interim_results ?? true
+          });
+          
+          // Trigger provider change handlers
+          this.onLLMProviderChange(data.llm_provider?.name || '');
+          this.onTTSProviderChange(data.tts_provider?.name || 'no_tts');
+          this.onSTTProviderChange(data.stt_provider?.name || 'no_stt');
+        },
+        error: (error) => {
+          this.snackBar.open('Failed to load environment configuration', 'Close', {
+            duration: 3000,
+            panelClass: ['error-snackbar']
+          });
+        }
+      });
   }
 
-  onSTTEngineChange() {
-    if (this.environment.stt_engine === 'no_stt') {
-      this.environment.stt_engine_api_key = '';
+  onLLMProviderChange(name: string): void {
+    this.currentLLMProvider = this.llmProviders.find(p => p.name === name);
+    
+    if (this.currentLLMProvider) {
+      // Update validators
+      const apiKeyControl = this.environmentForm.get('llm_provider_api_key');
+      const endpointControl = this.environmentForm.get('llm_provider_endpoint');
+      
+      if (this.currentLLMProvider.requires_api_key) {
+        apiKeyControl?.setValidators([Validators.required]);
+      } else {
+        apiKeyControl?.clearValidators();
+      }
+      
+      if (this.currentLLMProvider.requires_endpoint) {
+        endpointControl?.setValidators([Validators.required, Validators.pattern('https?://.+')]);
+      } else {
+        endpointControl?.clearValidators();
+      }
+      
+      apiKeyControl?.updateValueAndValidity();
+      endpointControl?.updateValueAndValidity();
     }
   }
 
-  isTTSProviderSSMLCapable(): boolean {
-    return this.environment.tts_engine === 'elevenlabs';
-  }
-
-  // STT Key methods
-  getSTTKeyLabel(): string {
-    switch(this.environment.stt_engine) {
-      case 'google':
-        return 'Service Account JSON Path';
-      case 'azure':
-        return 'Azure Subscription Key';
-      case 'amazon':
-        return 'AWS Access Key';
-      case 'flicker':
-        return 'Flicker API Key';
-      default:
-        return 'STT API Key';
+  onTTSProviderChange(name: string): void {
+    this.currentTTSProvider = this.ttsProviders.find(p => p.name === name);
+    
+    if (this.currentTTSProvider) {
+      const apiKeyControl = this.environmentForm.get('tts_provider_api_key');
+      const endpointControl = this.environmentForm.get('tts_provider_endpoint');
+      
+      if (this.currentTTSProvider.requires_api_key && name !== 'no_tts') {
+        apiKeyControl?.setValidators([Validators.required]);
+      } else {
+        apiKeyControl?.clearValidators();
+      }
+      
+      if (this.currentTTSProvider.requires_endpoint && name !== 'no_tts') {
+        endpointControl?.setValidators([Validators.required, Validators.pattern('https?://.+')]);
+      } else {
+        endpointControl?.clearValidators();
+      }
+      
+      apiKeyControl?.updateValueAndValidity();
+      endpointControl?.updateValueAndValidity();
     }
   }
 
-  getSTTKeyPlaceholder(): string {
-    switch(this.environment.stt_engine) {
-      case 'google':
-        return '/credentials/google-service-account.json';
-      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';
+  onSTTProviderChange(name: string): void {
+    this.currentSTTProvider = this.sttProviders.find(p => p.name === name);
+    
+    if (this.currentSTTProvider) {
+      const apiKeyControl = this.environmentForm.get('stt_provider_api_key');
+      const endpointControl = this.environmentForm.get('stt_provider_endpoint');
+      
+      if (this.currentSTTProvider.requires_api_key && name !== 'no_stt') {
+        apiKeyControl?.setValidators([Validators.required]);
+      } else {
+        apiKeyControl?.clearValidators();
+      }
+      
+      if (this.currentSTTProvider.requires_endpoint && name !== 'no_stt') {
+        endpointControl?.setValidators([Validators.required, Validators.pattern('https?://.+')]);
+      } else {
+        endpointControl?.clearValidators();
+      }
+      
+      apiKeyControl?.updateValueAndValidity();
+      endpointControl?.updateValueAndValidity();
     }
   }
 
-  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(): void {
+    if (this.environmentForm.invalid) {
+      Object.keys(this.environmentForm.controls).forEach(key => {
+        const control = this.environmentForm.get(key);
+        if (control && control.invalid) {
+          control.markAsTouched();
+        }
+      });
+      return;
     }
-  }
-
-  formatMilliseconds(value: number): string {
-    return `${value}ms`;
-  }
 
-  save() {
     this.saving = true;
+    const formValue = this.environmentForm.value;
     
-    // Include all settings in the save
-    const saveData = {
-      ...this.environment,
-      stt_settings: this.sttSettings,
-      tts_settings: this.ttsSettings,
-      parameter_collection_config: this.parameterCollectionConfig
-    };
-  
-    this.apiService.updateEnvironment(saveData).subscribe({
-      next: () => {
-        // Environment service'i güncelle
-        this.environmentService.updateEnvironment(saveData);
-        
-        this.snackBar.open('Environment configuration saved successfully', 'Close', {
-          duration: 3000
-        });
-        this.saving = false;
+    // Build environment update payload
+    const payload = {
+      llm_provider: {
+        name: formValue.llm_provider_name,
+        api_key: formValue.llm_provider_api_key || null,
+        endpoint: formValue.llm_provider_endpoint || null,
+        settings: {
+          internal_prompt: formValue.internal_prompt || null,
+          parameter_collection_config: {
+            max_params_per_question: formValue.max_params_per_question,
+            retry_unanswered: formValue.retry_unanswered,
+            collection_prompt: formValue.collection_prompt || null
+          }
+        }
+      },
+      tts_provider: {
+        name: formValue.tts_provider_name,
+        api_key: formValue.tts_provider_api_key || null,
+        endpoint: formValue.tts_provider_endpoint || null,
+        settings: {
+          use_ssml: formValue.tts_use_ssml
+        }
       },
-      error: (err) => {
-        this.snackBar.open(
-          err.error?.detail || 'Failed to save configuration', 
-          'Close', 
-          { duration: 5000, panelClass: 'error-snackbar' }
-        );
-        this.saving = false;
+      stt_provider: {
+        name: formValue.stt_provider_name,
+        api_key: formValue.stt_provider_api_key || null,
+        endpoint: formValue.stt_provider_endpoint || null,
+        settings: {
+          speech_timeout_ms: formValue.stt_speech_timeout_ms,
+          noise_reduction_level: formValue.stt_noise_reduction_level,
+          vad_sensitivity: formValue.stt_vad_sensitivity,
+          language: formValue.stt_language,
+          model: formValue.stt_model,
+          use_enhanced: formValue.stt_use_enhanced,
+          enable_punctuation: formValue.stt_enable_punctuation,
+          interim_results: formValue.stt_interim_results
+        }
       }
-    });
-  }
+    };
 
-  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
+    this.apiService.updateEnvironment(payload)
+      .pipe(finalize(() => this.saving = false))
+      .subscribe({
+        next: () => {
+          this.snackBar.open('Environment configuration saved successfully', 'Close', {
+            duration: 3000,
+            panelClass: ['success-snackbar']
+          });
+        },
+        error: (error) => {
+          this.snackBar.open(
+            error.error?.detail || 'Failed to save environment configuration', 
+            'Close', 
+            {
+              duration: 5000,
+              panelClass: ['error-snackbar']
+            }
+          );
+        }
       });
-    }, 2000);
   }
 
-  reloadFromSpark() {
-    if (this.isGPTMode()) {
+  testConnection(): void {
+    const endpoint = this.environmentForm.get('llm_provider_endpoint')?.value;
+    const apiKey = this.environmentForm.get('llm_provider_api_key')?.value;
+    const provider = this.environmentForm.get('llm_provider_name')?.value;
+    
+    if (!endpoint) {
+      this.snackBar.open('Please enter an endpoint URL', 'Close', {
+        duration: 3000,
+        panelClass: ['error-snackbar']
+      });
       return;
     }
 
-    this.snackBar.open('Reloading configuration from Spark...', undefined, {
-      duration: 2000
-    });
-    
-    setTimeout(() => {
-      this.loadEnvironment();
-      this.snackBar.open('Configuration reloaded', 'Close', {
-        duration: 3000
+    this.loading = true;
+    this.apiService.testConnection({ endpoint, api_key: apiKey, provider })
+      .pipe(finalize(() => this.loading = false))
+      .subscribe({
+        next: (result) => {
+          if (result.success) {
+            this.snackBar.open('Connection successful!', 'Close', {
+              duration: 3000,
+              panelClass: ['success-snackbar']
+            });
+          } else {
+            this.snackBar.open(result.message || 'Connection failed', 'Close', {
+              duration: 5000,
+              panelClass: ['error-snackbar']
+            });
+          }
+        },
+        error: (error) => {
+          this.snackBar.open('Connection test failed', 'Close', {
+            duration: 3000,
+            panelClass: ['error-snackbar']
+          });
+        }
       });
-    }, 1000);
   }
 
-  showSnackBar(message: string) {
-    this.snackBar.open(message, 'Close', {
-      duration: 3000
-    });
+  toggleInternalPrompt(): void {
+    this.showInternalPrompt = !this.showInternalPrompt;
   }
 
-  get envForm() {
-    return {
-      valid: true // Form validation için basit bir getter
-    };
+  toggleParameterCollection(): void {
+    this.showParameterCollection = !this.showParameterCollection;
   }
 
-  onWorkModeChange() {
-    this.environmentService.updateEnvironment(this.environment);
+  isLLMEndpointRequired(): boolean {
+    return this.currentLLMProvider?.requires_endpoint || false;
   }
 
-  resetCollectionPrompt() {
-    this.parameterCollectionConfig.collection_prompt = this.getDefaultCollectionPrompt()
+  isLLMApiKeyRequired(): boolean {
+    return this.currentLLMProvider?.requires_api_key || false;
   }
-  
-  getDefaultCollectionPrompt(): string {
-    return `You are a helpful assistant collecting information from the user.
-
-Conversation context:
-{{conversation_history}}
 
-Intent: {{intent_name}} - {{intent_caption}}
-
-Already collected:
-{{collected_params}}
+  isTTSEnabled(): boolean {
+    return this.environmentForm.get('tts_provider_name')?.value !== 'no_tts';
+  }
 
-Still needed:
-{{missing_params}}
+  isSTTEnabled(): boolean {
+    return this.environmentForm.get('stt_provider_name')?.value !== 'no_stt';
+  }
 
-Previously asked but not answered:
-{{unanswered_params}}
+  getLLMProviderDescription(): string {
+    return this.currentLLMProvider?.description || '';
+  }
 
-Rules:
-1. Ask for maximum {{max_params}} parameters in one question
-2. Group parameters that naturally go together (like from/to cities, dates)
-3. If some parameters were asked before but not answered, include them again
-4. Be natural and conversational in {{project_language}}
-5. Don't repeat information already collected
-6. Ask in a friendly, human way
+  getTTSProviderDescription(): string {
+    return this.currentTTSProvider?.description || '';
+  }
 
-Generate a natural question to collect the missing parameters.`;
-  }  
+  getSTTProviderDescription(): string {
+    return this.currentSTTProvider?.description || '';
+  }
 }