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

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { FormsModule } from '@angular/forms';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { ApiService } from '../../services/api.service';
 import { EnvironmentService } from '../../services/environment.service';
 import { CommonModule } from '@angular/common';
@@ -15,6 +16,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
 
 // Provider interfaces
 interface ProviderConfig {
@@ -39,7 +42,6 @@ interface EnvironmentConfig {
   tts_provider: ProviderSettings;
   stt_provider: ProviderSettings;
   providers: ProviderConfig[];
-  parameter_collection_config: any;
 }
 
 @Component({
@@ -48,6 +50,7 @@ interface EnvironmentConfig {
   imports: [
     CommonModule,
     ReactiveFormsModule,
+    FormsModule,
     MatCardModule,
     MatFormFieldModule,
     MatInputModule,
@@ -58,7 +61,10 @@ interface EnvironmentConfig {
     MatSlideToggleModule,
     MatExpansionModule,
     MatDividerModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatDialogModule
   ],
   templateUrl: './environment.component.html',
   styleUrls: ['./environment.component.scss']
@@ -67,6 +73,7 @@ export class EnvironmentComponent implements OnInit {
   form: FormGroup;
   loading = false;
   saving = false;
+  isLoading = false;
   
   // Provider lists
   llmProviders: ProviderConfig[] = [];
@@ -78,9 +85,17 @@ export class EnvironmentComponent implements OnInit {
   currentTTSProvider?: ProviderConfig;
   currentSTTProvider?: ProviderConfig;
   
-  // Settings
-  parameterCollectionConfig: any = {};
-  internalPrompt = '';
+  // Settings for LLM
+  internalPrompt: string = '';
+  parameterCollectionConfig: any = {
+    enabled: false,
+    max_params_per_question: 1,
+    show_all_required: false,
+    ask_optional_params: false,
+    group_related_params: false,
+    min_confidence_score: 0.7,
+    collection_prompt: 'Please provide the following information:'
+  };
 
   constructor(
     private fb: FormBuilder,
@@ -110,196 +125,280 @@ export class EnvironmentComponent implements OnInit {
     this.loadEnvironment();
   }
 
-  loadEnvironment() {
+  // Safe getters for template
+  get currentLLMProviderSafe(): ProviderConfig | null {
+    return this.currentLLMProvider || null;
+  }
+
+  get currentTTSProviderSafe(): ProviderConfig | null {
+    return this.currentTTSProvider || null;
+  }
+
+  get currentSTTProviderSafe(): ProviderConfig | null {
+    return this.currentSTTProvider || null;
+  }
+
+  loadEnvironment(): void {
     this.loading = true;
+    this.isLoading = true;
+    
     this.apiService.getEnvironment().subscribe({
-      next: (data: EnvironmentConfig) => {
-        // Separate providers by type
-        this.llmProviders = data.providers.filter(p => p.type === 'llm');
-        this.ttsProviders = data.providers.filter(p => p.type === 'tts');
-        this.sttProviders = data.providers.filter(p => p.type === 'stt');
-        
-        // Load current settings
+      next: (data: any) => {
+        // Check if it's new format or legacy
         if (data.llm_provider) {
-          this.form.patchValue({
-            llm_provider_name: data.llm_provider.name,
-            llm_provider_api_key: data.llm_provider.api_key || '',
-            llm_provider_endpoint: data.llm_provider.endpoint || ''
-          });
-          
-          // Extract settings
-          this.internalPrompt = data.llm_provider.settings?.internal_prompt || '';
-          this.parameterCollectionConfig = data.llm_provider.settings?.parameter_collection_config || this.getDefaultParameterCollectionConfig();
-          
-          this.onLLMProviderChange(data.llm_provider.name);
+          this.handleNewFormat(data);
+        } else {
+          this.handleLegacyFormat(data);
         }
-        
-        if (data.tts_provider) {
-          this.form.patchValue({
-            tts_provider_name: data.tts_provider.name,
-            tts_provider_api_key: data.tts_provider.api_key || '',
-            tts_provider_endpoint: data.tts_provider.endpoint || ''
-          });
-          this.onTTSProviderChange(data.tts_provider.name);
-        }
-        
-        if (data.stt_provider) {
-          this.form.patchValue({
-            stt_provider_name: data.stt_provider.name,
-            stt_provider_api_key: data.stt_provider.api_key || '',
-            stt_provider_endpoint: data.stt_provider.endpoint || ''
-          });
-          this.onSTTProviderChange(data.stt_provider.name);
-        }
-        
         this.loading = false;
+        this.isLoading = false;
       },
       error: (err) => {
-        this.snackBar.open('Failed to load environment configuration', 'Close', {
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
+        console.error('Failed to load environment:', err);
+        this.snackBar.open('Failed to load environment configuration', 'Close', { duration: 3000 });
         this.loading = false;
+        this.isLoading = false;
       }
     });
   }
 
-  onLLMProviderChange(providerName: string) {
-    this.currentLLMProvider = this.llmProviders.find(p => p.name === providerName);
-    
-    // Enable/disable fields based on provider requirements
-    const apiKeyControl = this.form.get('llm_provider_api_key');
-    const endpointControl = this.form.get('llm_provider_endpoint');
+  handleNewFormat(data: EnvironmentConfig): void {
+    // Update provider lists
+    if (data.providers) {
+      this.llmProviders = data.providers.filter(p => p.type === 'llm');
+      this.ttsProviders = data.providers.filter(p => p.type === 'tts');
+      this.sttProviders = data.providers.filter(p => p.type === 'stt');
+    }
+
+    // Set form values
+    this.form.patchValue({
+      llm_provider_name: data.llm_provider?.name || '',
+      llm_provider_api_key: data.llm_provider?.api_key || '',
+      llm_provider_endpoint: data.llm_provider?.endpoint || '',
+      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 || '',
+      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 || ''
+    });
+
+    // Set internal prompt and parameter collection config
+    this.internalPrompt = data.llm_provider?.settings?.internal_prompt || '';
+    this.parameterCollectionConfig = data.llm_provider?.settings?.parameter_collection_config || this.parameterCollectionConfig;
+
+    // Update current providers
+    this.updateCurrentProviders();
     
-    if (this.currentLLMProvider) {
-      // API Key field
-      if (this.currentLLMProvider.requires_api_key) {
-        apiKeyControl?.enable();
-        apiKeyControl?.setValidators([Validators.required]);
-      } else {
-        apiKeyControl?.disable();
-        apiKeyControl?.clearValidators();
-      }
-      
-      // Endpoint field
-      if (this.currentLLMProvider.requires_endpoint) {
-        endpointControl?.enable();
-        endpointControl?.setValidators([Validators.required]);
-      } else {
-        endpointControl?.disable();
-        endpointControl?.clearValidators();
-      }
-      
-      apiKeyControl?.updateValueAndValidity();
-      endpointControl?.updateValueAndValidity();
+    // Notify environment service
+    if (data.tts_provider?.name !== 'no_tts') {
+      this.environmentService.setTTSEnabled(true);
     }
+    if (data.stt_provider?.name !== 'no_stt') {
+      this.environmentService.setSTTEnabled(true);
+    }
+  }
+
+  handleLegacyFormat(data: any): void {
+    console.warn('Legacy environment format detected, using defaults');
+    
+    // Set default providers if not present
+    this.llmProviders = this.getDefaultProviders('llm');
+    this.ttsProviders = this.getDefaultProviders('tts');
+    this.sttProviders = this.getDefaultProviders('stt');
+    
+    // Map legacy fields
+    this.form.patchValue({
+      llm_provider_name: data.work_mode || 'spark',
+      llm_provider_api_key: data.cloud_token || '',
+      llm_provider_endpoint: data.spark_endpoint || '',
+      tts_provider_name: data.tts_engine || 'no_tts',
+      tts_provider_api_key: data.tts_engine_api_key || '',
+      stt_provider_name: data.stt_engine || 'no_stt',
+      stt_provider_api_key: data.stt_engine_api_key || ''
+    });
     
-    // Update environment service
-    this.updateEnvironmentService();
+    this.internalPrompt = data.internal_prompt || '';
+    this.parameterCollectionConfig = data.parameter_collection_config || this.parameterCollectionConfig;
+    
+    this.updateCurrentProviders();
   }
 
-  onTTSProviderChange(providerName: string) {
-    this.currentTTSProvider = this.ttsProviders.find(p => p.name === providerName);
+  getDefaultProviders(type: string): ProviderConfig[] {
+    const defaults: { [key: string]: ProviderConfig[] } = {
+      llm: [
+        {
+          type: 'llm',
+          name: 'spark',
+          display_name: 'Spark (YTU Cosmos)',
+          requires_endpoint: true,
+          requires_api_key: true,
+          requires_repo_info: true,
+          description: 'YTU Cosmos Spark LLM Service'
+        },
+        {
+          type: 'llm',
+          name: 'gpt4o',
+          display_name: 'GPT-4o',
+          requires_endpoint: false,
+          requires_api_key: true,
+          requires_repo_info: false,
+          description: 'OpenAI GPT-4o model'
+        },
+        {
+          type: 'llm',
+          name: 'gpt4o-mini',
+          display_name: 'GPT-4o Mini',
+          requires_endpoint: false,
+          requires_api_key: true,
+          requires_repo_info: false,
+          description: 'OpenAI GPT-4o Mini model'
+        }
+      ],
+      tts: [
+        {
+          type: 'tts',
+          name: 'no_tts',
+          display_name: 'No TTS',
+          requires_endpoint: false,
+          requires_api_key: false,
+          requires_repo_info: false,
+          description: 'Disable text-to-speech'
+        },
+        {
+          type: 'tts',
+          name: 'elevenlabs',
+          display_name: 'ElevenLabs',
+          requires_endpoint: false,
+          requires_api_key: true,
+          requires_repo_info: false,
+          description: 'ElevenLabs TTS service'
+        }
+      ],
+      stt: [
+        {
+          type: 'stt',
+          name: 'no_stt',
+          display_name: 'No STT',
+          requires_endpoint: false,
+          requires_api_key: false,
+          requires_repo_info: false,
+          description: 'Disable speech-to-text'
+        },
+        {
+          type: 'stt',
+          name: 'google',
+          display_name: 'Google Cloud STT',
+          requires_endpoint: false,
+          requires_api_key: true,
+          requires_repo_info: false,
+          description: 'Google Cloud Speech-to-Text'
+        }
+      ]
+    };
     
-    const apiKeyControl = this.form.get('tts_provider_api_key');
-    const endpointControl = this.form.get('tts_provider_endpoint');
+    return defaults[type] || [];
+  }
+
+  updateCurrentProviders(): void {
+    const llmName = this.form.get('llm_provider_name')?.value;
+    const ttsName = this.form.get('tts_provider_name')?.value;
+    const sttName = this.form.get('stt_provider_name')?.value;
+
+    this.currentLLMProvider = this.llmProviders.find(p => p.name === llmName);
+    this.currentTTSProvider = this.ttsProviders.find(p => p.name === ttsName);
+    this.currentSTTProvider = this.sttProviders.find(p => p.name === sttName);
+
+    // Update form validators based on requirements
+    this.updateFormValidators();
+  }
+
+  updateFormValidators(): void {
+    // LLM validators
+    if (this.currentLLMProvider?.requires_api_key) {
+      this.form.get('llm_provider_api_key')?.setValidators(Validators.required);
+    } else {
+      this.form.get('llm_provider_api_key')?.clearValidators();
+    }
     
-    if (this.currentTTSProvider) {
-      // API Key field
-      if (this.currentTTSProvider.requires_api_key) {
-        apiKeyControl?.enable();
-        apiKeyControl?.setValidators([Validators.required]);
-      } else {
-        apiKeyControl?.disable();
-        apiKeyControl?.clearValidators();
-        apiKeyControl?.setValue('');
-      }
-      
-      // Endpoint field
-      if (this.currentTTSProvider.requires_endpoint) {
-        endpointControl?.enable();
-        endpointControl?.setValidators([Validators.required]);
-      } else {
-        endpointControl?.disable();
-        endpointControl?.clearValidators();
-        endpointControl?.setValue('');
-      }
-      
-      apiKeyControl?.updateValueAndValidity();
-      endpointControl?.updateValueAndValidity();
+    if (this.currentLLMProvider?.requires_endpoint) {
+      this.form.get('llm_provider_endpoint')?.setValidators(Validators.required);
+    } else {
+      this.form.get('llm_provider_endpoint')?.clearValidators();
+    }
+
+    // TTS validators
+    if (this.currentTTSProvider?.requires_api_key) {
+      this.form.get('tts_provider_api_key')?.setValidators(Validators.required);
+    } else {
+      this.form.get('tts_provider_api_key')?.clearValidators();
+    }
+
+    // STT validators
+    if (this.currentSTTProvider?.requires_api_key) {
+      this.form.get('stt_provider_api_key')?.setValidators(Validators.required);
+    } else {
+      this.form.get('stt_provider_api_key')?.clearValidators();
     }
+
+    // Update validity
+    this.form.get('llm_provider_api_key')?.updateValueAndValidity();
+    this.form.get('llm_provider_endpoint')?.updateValueAndValidity();
+    this.form.get('tts_provider_api_key')?.updateValueAndValidity();
+    this.form.get('stt_provider_api_key')?.updateValueAndValidity();
   }
 
-  onSTTProviderChange(providerName: string) {
-    this.currentSTTProvider = this.sttProviders.find(p => p.name === providerName);
+  onLLMProviderChange(value: string): void {
+    this.currentLLMProvider = this.llmProviders.find(p => p.name === value);
+    this.updateFormValidators();
     
-    const apiKeyControl = this.form.get('stt_provider_api_key');
-    const endpointControl = this.form.get('stt_provider_endpoint');
+    // Reset fields if provider doesn't require them
+    if (!this.currentLLMProvider?.requires_api_key) {
+      this.form.get('llm_provider_api_key')?.setValue('');
+    }
+    if (!this.currentLLMProvider?.requires_endpoint) {
+      this.form.get('llm_provider_endpoint')?.setValue('');
+    }
+  }
+
+  onTTSProviderChange(value: string): void {
+    this.currentTTSProvider = this.ttsProviders.find(p => p.name === value);
+    this.updateFormValidators();
     
-    if (this.currentSTTProvider) {
-      // API Key field
-      if (this.currentSTTProvider.requires_api_key) {
-        apiKeyControl?.enable();
-        apiKeyControl?.setValidators([Validators.required]);
-      } else {
-        apiKeyControl?.disable();
-        apiKeyControl?.clearValidators();
-        apiKeyControl?.setValue('');
-      }
-      
-      // Endpoint field
-      if (this.currentSTTProvider.requires_endpoint) {
-        endpointControl?.enable();
-        endpointControl?.setValidators([Validators.required]);
-      } else {
-        endpointControl?.disable();
-        endpointControl?.clearValidators();
-        endpointControl?.setValue('');
-      }
-      
-      apiKeyControl?.updateValueAndValidity();
-      endpointControl?.updateValueAndValidity();
+    if (!this.currentTTSProvider?.requires_api_key) {
+      this.form.get('tts_provider_api_key')?.setValue('');
     }
+    
+    // Notify environment service
+    this.environmentService.setTTSEnabled(value !== 'no_tts');
   }
 
-  getDefaultParameterCollectionConfig() {
-    return {
-      enabled: true,
-      max_params_per_question: 2,
-      show_all_required: true,
-      ask_optional_params: false,
-      group_related_params: true,
-      min_confidence_score: 0.7,
-      collection_prompt: `You are a smart parameter collection assistant.
-Based on the conversation and the parameters needed, generate a natural question to collect missing parameters.
-
-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. Use context from the conversation to make the question flow naturally
-
-Generate ONLY the question, nothing else.`
-    };
+  onSTTProviderChange(value: string): void {
+    this.currentSTTProvider = this.sttProviders.find(p => p.name === value);
+    this.updateFormValidators();
+    
+    if (!this.currentSTTProvider?.requires_api_key) {
+      this.form.get('stt_provider_api_key')?.setValue('');
+    }
+    
+    // Notify environment service
+    this.environmentService.setSTTEnabled(value !== 'no_stt');
   }
 
-  save() {
+  saveEnvironment(): void {
     if (this.form.invalid) {
-      this.form.markAllAsTouched();
+      this.snackBar.open('Please fix validation errors', 'Close', { duration: 3000 });
       return;
     }
 
     this.saving = true;
-    
     const formValue = this.form.value;
-    
-    // Build provider settings
+
     const saveData = {
       llm_provider: {
         name: formValue.llm_provider_name,
-        api_key: formValue.llm_provider_api_key || null,
-        endpoint: formValue.llm_provider_endpoint || null,
+        api_key: formValue.llm_provider_api_key,
+        endpoint: formValue.llm_provider_endpoint,
         settings: {
           internal_prompt: this.internalPrompt,
           parameter_collection_config: this.parameterCollectionConfig
@@ -307,159 +406,141 @@ Generate ONLY the question, nothing else.`
       },
       tts_provider: {
         name: formValue.tts_provider_name,
-        api_key: formValue.tts_provider_api_key || null,
-        endpoint: formValue.tts_provider_endpoint || null,
+        api_key: formValue.tts_provider_api_key,
+        endpoint: formValue.tts_provider_endpoint,
         settings: {}
       },
       stt_provider: {
         name: formValue.stt_provider_name,
-        api_key: formValue.stt_provider_api_key || null,
-        endpoint: formValue.stt_provider_endpoint || null,
+        api_key: formValue.stt_provider_api_key,
+        endpoint: formValue.stt_provider_endpoint,
         settings: {}
-      },
-      parameter_collection_config: this.parameterCollectionConfig
+      }
     };
-  
-    this.apiService.updateEnvironment(saveData).subscribe({
+
+    this.apiService.updateEnvironment(saveData as any).subscribe({
       next: () => {
-        // Update environment service
-        this.updateEnvironmentService();
-        
-        this.snackBar.open('Environment configuration saved successfully', 'Close', {
-          duration: 3000
-        });
+        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' }
-        );
+        console.error('Failed to save environment:', err);
+        this.snackBar.open('Failed to save environment configuration', 'Close', { duration: 3000 });
         this.saving = false;
       }
     });
   }
 
-  private updateEnvironmentService() {
-    // Update environment service with current form values
-    const formValue = this.form.value;
-    this.environmentService.setLLMProvider(formValue.llm_provider_name);
-  }
-
-  getLLMProviderIcon(provider: ProviderConfig): string {
-    const iconMap: { [key: string]: string } = {
-      'spark': 'flash_on',
-      'gpt4o': 'psychology',
-      'gpt4o-mini': 'psychology_alt'
-    };
-    return iconMap[provider.name] || 'smart_toy';
-  }
-
-  getTTSProviderIcon(provider: ProviderConfig): string {
-    const iconMap: { [key: string]: string } = {
-      'no_tts': 'volume_off',
-      'elevenlabs': 'record_voice_over',
-      'blaze': 'campaign'
-    };
-    return iconMap[provider.name] || 'volume_up';
-  }
-
-  getSTTProviderIcon(provider: ProviderConfig): string {
-    const iconMap: { [key: string]: string } = {
-      'no_stt': 'mic_off',
-      'google': 'g_translate',
-      'azure': 'cloud',
-      'flicker': 'light_mode'
-    };
-    return iconMap[provider.name] || 'mic';
+  // Icon helpers
+  getLLMProviderIcon(provider: ProviderConfig | null): string {
+    if (!provider || !provider.name) return 'smart_toy';
+    
+    switch(provider.name) {
+      case 'gpt4o':
+      case 'gpt4o-mini':
+        return 'psychology';
+      case 'spark':
+        return 'auto_awesome';
+      default:
+        return 'smart_toy';
+    }
   }
 
-  getApiKeyLabel(providerType: string): string {
-    const provider = providerType === 'llm' ? this.currentLLMProvider :
-                    providerType === 'tts' ? this.currentTTSProvider :
-                    this.currentSTTProvider;
-    
-    if (!provider) return 'API Key';
+  getTTSProviderIcon(provider: ProviderConfig | null): string {
+    if (!provider || !provider.name) return 'record_voice_over';
     
-    // Special cases
-    if (provider.name === 'google' && providerType === 'stt') {
-      return 'Service Account JSON Path';
+    switch(provider.name) {
+      case 'elevenlabs':
+        return 'graphic_eq';
+      case 'blaze':
+        return 'volume_up';
+      default:
+        return 'record_voice_over';
     }
-    
-    return 'API Key';
   }
 
-  getApiKeyPlaceholder(providerType: string): string {
-    const provider = providerType === 'llm' ? this.currentLLMProvider :
-                    providerType === 'tts' ? this.currentTTSProvider :
-                    this.currentSTTProvider;
+  getSTTProviderIcon(provider: ProviderConfig | null): string {
+    if (!provider || !provider.name) return 'mic';
     
-    if (!provider) return 'Enter API key';
-    
-    // Provider-specific placeholders
-    const placeholders: { [key: string]: string } = {
-      'spark': 'Enter Spark token',
-      'gpt4o': 'sk-...',
-      'gpt4o-mini': 'sk-...',
-      'google': '/path/to/credentials.json',
-      'azure': 'Enter Azure subscription key',
-      'elevenlabs': 'Enter ElevenLabs API key'
-    };
-    
-    return placeholders[provider.name] || 'Enter API key';
+    switch(provider.name) {
+      case 'google':
+        return 'g_translate';
+      case 'azure':
+        return 'cloud';
+      case 'flicker':
+        return 'mic_none';
+      default:
+        return 'mic';
+    }
   }
 
-  getEndpointPlaceholder(providerType: string): string {
-    const provider = providerType === 'llm' ? this.currentLLMProvider :
-                    providerType === 'tts' ? this.currentTTSProvider :
-                    this.currentSTTProvider;
-    
-    if (!provider) return 'https://...';
-    
-    // Provider-specific placeholders
-    const placeholders: { [key: string]: string } = {
-      'spark': 'http://localhost:7861',
-      'blaze': 'https://blaze-tts.example.com',
-      'flicker': 'https://flicker-stt.example.com'
-    };
-    
-    return placeholders[provider.name] || 'https://...';
+  getProviderIcon(provider: ProviderConfig): string {
+    switch(provider.type) {
+      case 'llm':
+        return this.getLLMProviderIcon(provider);
+      case 'tts':
+        return this.getTTSProviderIcon(provider);
+      case 'stt':
+        return this.getSTTProviderIcon(provider);
+      default:
+        return 'settings';
+    }
   }
 
-  formatSliderLabel(value: number): string {
-    return `${value}`;
+  // Helper methods
+  getApiKeyLabel(type: string): string {
+    switch(type) {
+      case 'llm':
+        return this.currentLLMProvider?.name === 'spark' ? 'API Token' : 'API Key';
+      case 'tts':
+        return 'API Key';
+      case 'stt':
+        return this.currentSTTProvider?.name === 'google' ? 'Credentials JSON Path' : 'API Key';
+      default:
+        return 'API Key';
+    }
   }
 
-  resetCollectionPrompt() {
-    this.parameterCollectionConfig.collection_prompt = this.getDefaultParameterCollectionConfig().collection_prompt;
+  getApiKeyPlaceholder(type: string): string {
+    switch(type) {
+      case 'llm':
+        if (this.currentLLMProvider?.name === 'spark') return 'Enter Spark token';
+        if (this.currentLLMProvider?.name?.includes('gpt')) return 'sk-...';
+        return 'Enter API key';
+      case 'tts':
+        return 'Enter TTS API key';
+      case 'stt':
+        return this.currentSTTProvider?.name === 'google' ? '/path/to/credentials.json' : 'Enter STT API key';
+      default:
+        return 'Enter API key';
+    }
   }
 
-  testConnection() {
-    if (!this.currentLLMProvider?.requires_endpoint) {
-      this.snackBar.open('This provider does not require endpoint testing', 'Close', {
-        duration: 3000
-      });
-      return;
+  getEndpointPlaceholder(type: string): string {
+    switch(type) {
+      case 'llm':
+        return 'https://spark-api.example.com';
+      case 'tts':
+        return 'https://tts-api.example.com';
+      case 'stt':
+        return 'https://stt-api.example.com';
+      default:
+        return 'https://api.example.com';
     }
+  }
+
+  resetCollectionPrompt(): void {
+    this.parameterCollectionConfig.collection_prompt = 'Please provide the following information:';
+  }
 
+  testConnection(): void {
     const endpoint = this.form.get('llm_provider_endpoint')?.value;
     if (!endpoint) {
-      this.snackBar.open('Please enter an endpoint URL', 'Close', {
-        duration: 3000
-      });
+      this.snackBar.open('Please enter an endpoint URL', 'Close', { duration: 2000 });
       return;
     }
-
-    this.snackBar.open('Testing connection...', undefined, {
-      duration: 2000
-    });
     
+    this.snackBar.open('Testing connection...', 'Close', { duration: 2000 });
     // TODO: Implement actual connection test
-    setTimeout(() => {
-      this.snackBar.open('Connection successful!', 'Close', {
-        duration: 3000
-      });
-    }, 2000);
   }
 }