Update flare-ui/src/app/dialogs/version-edit-dialog/version-edit-dialog.component.ts

flare-ui/src/app/dialogs/version-edit-dialog/version-edit-dialog.component.ts

@@ -16,7 +16,9 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ApiService, Project, Version } from '../../services/api.service';
+import { LocaleManagerService } from '../../services/locale-manager.service';
 import ConfirmDialogComponent from '../confirm-dialog/confirm-dialog.component';
 
 // Interfaces for multi-language support
@@ -25,6 +27,16 @@ interface LocalizedExample {
   example: string;
 }
 
+interface LocalizedCaption {
+  locale_code: string;
+  caption: string;
+}
+
+interface Locale {
+  code: string;
+  name: string;
+}
+
 @Component({
   selector: 'app-version-edit-dialog',
   standalone: true,
@@ -46,7 +58,8 @@ interface LocalizedExample {
     MatExpansionModule,
     MatDividerModule,
     MatProgressBarModule,
-    MatListModule
+    MatListModule,
+    MatProgressSpinnerModule
   ],
   templateUrl: './version-edit-dialog.component.html',
   styleUrls: ['./version-edit-dialog.component.scss']
@@ -56,183 +69,186 @@ export default class VersionEditDialogComponent implements OnInit {
   versions: Version[] = [];
   selectedVersion: Version | null = null;
   versionForm!: FormGroup;
-  
   loading = false;
   saving = false;
   publishing = false;
-  creating = false;
-  isDirty = false;
-  
-  selectedTabIndex = 0;
-  testUserMessage = '';
-  testResult: any = null;
   testing = false;
+  testInput = '';
+  testResult: any = null;
+  isDirty = false;
   
-  // Locale for examples
+  // Multi-language support
   selectedExampleLocale: string = 'tr';
+  availableLocales: Locale[] = [];
 
   constructor(
     private fb: FormBuilder,
-    private apiService: ApiService,
+    private api: ApiService,
+    private localeService: LocaleManagerService,
     private snackBar: MatSnackBar,
     private dialog: MatDialog,
     public dialogRef: MatDialogRef<VersionEditDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
+    @Inject(MAT_DIALOG_DATA) public data: { project: Project }
   ) {
     this.project = data.project;
-    this.versions = [...this.project.versions].sort((a, b) => b.no - a.no);
     this.selectedExampleLocale = this.project.default_locale || 'tr';
   }
 
   ngOnInit() {
     this.initializeForm();
-    
-    // Select the latest unpublished version or the latest version
-    const unpublished = this.versions.find(v => !v.published);
-    this.selectedVersion = unpublished || this.versions[0] || null;
-    
-    if (this.selectedVersion) {
-      this.loadVersion(this.selectedVersion);
-    }
-
-    this.versionForm.valueChanges.subscribe(() => {
-      this.isDirty = true;
-    });
+    this.loadVersions();
+    this.loadAvailableLocales();
   }
 
   initializeForm() {
     this.versionForm = this.fb.group({
-      no: [{value: '', disabled: true}],
-      caption: ['', Validators.required],
-      published: [{value: false, disabled: true}],
-      general_prompt: ['', Validators.required],
-      llm: this.fb.group({
-        repo_id: ['', Validators.required],
-        generation_config: this.fb.group({
-          max_new_tokens: [256, [Validators.required, Validators.min(1), Validators.max(2048)]],
-          temperature: [0.2, [Validators.required, Validators.min(0), Validators.max(2)]],
-          top_p: [0.8, [Validators.required, Validators.min(0), Validators.max(1)]],
-          repetition_penalty: [1.1, [Validators.required, Validators.min(1), Validators.max(2)]]
-        }),
-        use_fine_tune: [false],
-        fine_tune_zip: ['']
+      caption: [''],
+      prompt: ['', Validators.required],
+      welcome_prompt: [''],
+      model: ['gpt-3.5-turbo'],
+      generation_config: this.fb.group({
+        max_new_tokens: [512],
+        temperature: [0.7],
+        top_p: [0.9],
+        top_k: [null],
+        do_sample: [true]
+      }),
+      fine_tune: this.fb.group({
+        enabled: [false],
+        adapter_path: ['']
       }),
-      intents: this.fb.array([]),
-      last_update_date: ['']
+      intents: this.fb.array([])
     });
 
-    // Watch for fine-tune toggle
-    this.versionForm.get('llm.use_fine_tune')?.valueChanges.subscribe(useFineTune => {
-      const fineTuneControl = this.versionForm.get('llm.fine_tune_zip');
-      if (useFineTune) {
-        fineTuneControl?.setValidators([Validators.required]);
-      } else {
-        fineTuneControl?.clearValidators();
-        fineTuneControl?.setValue('');
-      }
-      fineTuneControl?.updateValueAndValidity();
+    // Mark form as dirty on any change
+    this.versionForm.valueChanges.subscribe(() => {
+      this.isDirty = true;
     });
   }
 
-  loadVersion(version: Version) {
-    this.selectedVersion = version;
-    
-    // Form değerlerini set et
-    this.versionForm.patchValue({
-      no: version.no,
-      caption: version.caption || '',
-      published: version.published || false,
-      general_prompt: (version as any).general_prompt || '',
-      last_update_date: version.last_update_date || ''
-    });
-  
-    // LLM config'i ayrı set et
-    if (version.llm) {
-      this.versionForm.patchValue({
-        llm: {
-          repo_id: version.llm.repo_id || '',
-          generation_config: version.llm.generation_config || {
-            max_new_tokens: 512,
-            temperature: 0.7,
-            top_p: 0.95,
-            repetition_penalty: 1.1
-          },
-          use_fine_tune: version.llm.use_fine_tune || false,
-          fine_tune_zip: version.llm.fine_tune_zip || ''
-        }
-      });
+  async loadAvailableLocales() {
+    // Get supported locales from project
+    const supportedCodes = [
+      this.project.default_locale,
+      ...(this.project.supported_languages || [])
+    ].filter(Boolean);
+
+    // Get locale details
+    for (const code of supportedCodes) {
+      const localeInfo = await this.localeService.getLocaleDetails(code).toPromise();
+      if (localeInfo) {
+        this.availableLocales.push({
+          code: localeInfo.code,
+          name: localeInfo.name
+        });
+      }
     }
-  
-    // Clear and rebuild intents
-    this.intents.clear();
-    (version.intents || []).forEach(intent => {
-      this.intents.push(this.createIntentFormGroup(intent));
-    });
+  }
 
-    this.isDirty = false;
+  getAvailableLocales(): Locale[] {
+    return this.availableLocales;
   }
-  
-  async loadVersions() {
+
+  getLocaleName(localeCode: string): string {
+    const locale = this.availableLocales.find(l => l.code === localeCode);
+    return locale?.name || localeCode;
+  }
+
+  loadVersions() {
     this.loading = true;
-    try {
-      const project = await this.apiService.getProject(this.project.id).toPromise();
-      if (project) {
-        this.project = project;
-        this.versions = [...project.versions].sort((a, b) => b.no - a.no);
+    this.api.getProjectVersions(this.project.id).subscribe({
+      next: (versions) => {
+        this.versions = versions;
+        this.loading = false;
         
-        // Re-select current version if it still exists
-        if (this.selectedVersion) {
-          const currentVersion = this.versions.find(v => v.no === this.selectedVersion!.no);
-          if (currentVersion) {
-            this.loadVersion(currentVersion);
-          } else if (this.versions.length > 0) {
-            this.loadVersion(this.versions[0]);
-          }
-        } else if (this.versions.length > 0) {
-          this.loadVersion(this.versions[0]);
+        // Auto-select if only one version
+        if (versions.length === 1) {
+          this.onVersionChange(versions[0]);
         }
+      },
+      error: (error) => {
+        console.error('Error loading versions:', error);
+        this.snackBar.open('Failed to load versions', 'Close', { duration: 3000 });
+        this.loading = false;
       }
-    } catch (error) {
-      this.snackBar.open('Failed to reload versions', 'Close', { duration: 3000 });
-    } finally {
-      this.loading = false;
-    }
+    });
   }
 
-  createIntentFormGroup(intent: any = {}): FormGroup {
-    const group = this.fb.group({
-      name: [intent.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
-      caption: [intent.caption || ''],
-      detection_prompt: [intent.detection_prompt || '', Validators.required],
-      examples: [intent.examples || []], // Store as array, not FormArray
-      parameters: this.fb.array([]),
-      action: [intent.action || '', Validators.required],
-      fallback_timeout_prompt: [intent.fallback_timeout_prompt || ''],
-      fallback_error_prompt: [intent.fallback_error_prompt || '']
+  onVersionChange(version: Version | null) {
+    if (!version) return;
+    
+    this.selectedVersion = version;
+    this.loading = true;
+    this.isDirty = false;
+    
+    this.api.getVersionDetails(this.project.id, version.no).subscribe({
+      next: (details) => {
+        this.populateForm(details);
+        this.loading = false;
+      },
+      error: (error) => {
+        console.error('Error loading version details:', error);
+        this.snackBar.open('Failed to load version details', 'Close', { duration: 3000 });
+        this.loading = false;
+      }
     });
-  
-    // Parameters'ı ayrı olarak ekle
-    if (intent.parameters && Array.isArray(intent.parameters)) {
-      const parametersArray = group.get('parameters') as FormArray;
-      intent.parameters.forEach((param: any) => {
-        parametersArray.push(this.createParameterFormGroup(param));
+  }
+
+  populateForm(version: any) {
+    // Clear existing intents
+    const intentsArray = this.versionForm.get('intents') as FormArray;
+    while (intentsArray.length > 0) {
+      intentsArray.removeAt(0);
+    }
+    
+    // Populate basic fields
+    this.versionForm.patchValue({
+      caption: version.caption || '',
+      prompt: version.prompt || '',
+      welcome_prompt: version.welcome_prompt || '',
+      model: version.model || 'gpt-3.5-turbo',
+      generation_config: version.generation_config || {},
+      fine_tune: version.fine_tune || { enabled: false }
+    });
+    
+    // Add intents
+    if (version.intents && Array.isArray(version.intents)) {
+      version.intents.forEach((intent: any) => {
+        intentsArray.push(this.createIntentFormGroup(intent));
       });
     }
-  
-    return group;
+    
+    this.isDirty = false;
   }
 
-  createParameterFormGroup(param: any = {}): FormGroup {
+  createIntentFormGroup(intent?: any): FormGroup {
     return this.fb.group({
-      name: [param.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
-      caption: [param.caption || ''],
-      type: [param.type || 'str', Validators.required],
-      required: [param.required !== false],
-      variable_name: [param.variable_name || '', Validators.required],
-      extraction_prompt: [param.extraction_prompt || ''],
-      validation_regex: [param.validation_regex || ''],
-      invalid_prompt: [param.invalid_prompt || ''],
-      type_error_prompt: [param.type_error_prompt || '']
+      name: [intent?.name || '', Validators.required],
+      caption: [intent?.caption || ''],
+      requiresApproval: [intent?.requiresApproval || false],
+      dependencies: [intent?.dependencies || []],
+      examples: [intent?.examples || []],
+      detection_prompt: [intent?.detection_prompt || '', Validators.required],
+      parameters: this.fb.array(
+        (intent?.parameters || []).map((p: any) => this.createParameterFormGroup(p))
+      ),
+      action: [intent?.action || ''],
+      fallback_timeout_prompt: [intent?.fallback_timeout_prompt || ''],
+      fallback_error_prompt: [intent?.fallback_error_prompt || '']
+    });
+  }
+
+  createParameterFormGroup(param?: any): FormGroup {
+    return this.fb.group({
+      name: [param?.name || '', Validators.required],
+      caption: [param?.caption || []],
+      type: [param?.type || 'str', Validators.required],
+      required: [param?.required !== false],
+      variable_name: [param?.variable_name || '', Validators.required],
+      extraction_prompt: [param?.extraction_prompt || ''],
+      validation_regex: [param?.validation_regex || ''],
+      invalid_prompt: [param?.invalid_prompt || ''],
+      type_error_prompt: [param?.type_error_prompt || '']
     });
   }
 
@@ -261,6 +277,23 @@ export default class VersionEditDialogComponent implements OnInit {
     return [];
   }
 
+  getParameterCaptionDisplay(captions: LocalizedCaption[]): string {
+    if (!captions || !Array.isArray(captions) || captions.length === 0) {
+      return '(No caption)';
+    }
+    
+    // Try to find caption for selected locale
+    const selectedCaption = captions.find(c => c.locale_code === this.selectedExampleLocale);
+    if (selectedCaption) return selectedCaption.caption;
+    
+    // Try default locale
+    const defaultCaption = captions.find(c => c.locale_code === this.project.default_locale);
+    if (defaultCaption) return defaultCaption.caption;
+    
+    // Return first available caption
+    return captions[0].caption;
+  }
+
   addLocalizedExample(intentIndex: number, example: string) {
     if (!example.trim()) return;
     
@@ -294,6 +327,18 @@ export default class VersionEditDialogComponent implements OnInit {
     this.isDirty = true;
   }
 
+  addParameter(intentIndex: number) {
+    const parameters = this.getIntentParameters(intentIndex);
+    parameters.push(this.createParameterFormGroup());
+    this.isDirty = true;
+  }
+
+  removeParameter(intentIndex: number, paramIndex: number) {
+    const parameters = this.getIntentParameters(intentIndex);
+    parameters.removeAt(paramIndex);
+    this.isDirty = true;
+  }
+
   // Check if version can be edited
   get canEdit(): boolean {
     return !this.selectedVersion?.published;
@@ -301,6 +346,7 @@ export default class VersionEditDialogComponent implements OnInit {
 
   addIntent() {
     this.intents.push(this.createIntentFormGroup());
+    this.isDirty = true;
   }
 
   removeIntent(index: number) {
@@ -318,6 +364,7 @@ export default class VersionEditDialogComponent implements OnInit {
     dialogRef.afterClosed().subscribe(confirmed => {
       if (confirmed) {
         this.intents.removeAt(index);
+        this.isDirty = true;
       }
     });
   }
@@ -368,14 +415,8 @@ export default class VersionEditDialogComponent implements OnInit {
     });
   }
 
-  addParameter(intentIndex: number) {
-    const parameters = this.getIntentParameters(intentIndex);
-    parameters.push(this.createParameterFormGroup());
-  }
-
-  removeParameter(intentIndex: number, paramIndex: number) {
-    const parameters = this.getIntentParameters(intentIndex);
-    parameters.removeAt(paramIndex);
+  async getAvailableAPIs() {
+    return this.api.getAPIs().toPromise();
   }
 
   async createVersion() {
@@ -407,45 +448,42 @@ export default class VersionEditDialogComponent implements OnInit {
             // Copy from selected version
             const sourceVersion = this.versions.find(v => v.no === result.selectedValue);
             if (sourceVersion) {
+              const details = await this.api.getVersionDetails(this.project.id, sourceVersion.no).toPromise();
               newVersionData = {
-                ...sourceVersion,
+                ...details,
                 no: undefined,
                 published: false,
                 last_update_date: undefined,
-                caption: `Copy of version ${sourceVersion.no}`,
-                description: sourceVersion.caption ? `Copy of ${sourceVersion.caption}` : `Copy of version ${sourceVersion.no}`
+                caption: `Copy of version ${sourceVersion.no}`
               };
             }
           } else {
             // Create blank version
             newVersionData = {
-              caption: `Version ${this.versions.length + 1}`,
-              description: 'New version',
-              default_api: '',
-              published: false,
-              llm: {
-                repo_id: '',
-                generation_config: {
-                  max_new_tokens: 512,
-                  temperature: 0.7,
-                  top_p: 0.95,
-                  top_k: 50,
-                  repetition_penalty: 1.1
-                },
-                use_fine_tune: false,
-                fine_tune_zip: ''
+              caption: 'New Version',
+              prompt: '',
+              welcome_prompt: '',
+              model: 'gpt-3.5-turbo',
+              generation_config: {
+                max_new_tokens: 512,
+                temperature: 0.7,
+                top_p: 0.9,
+                do_sample: true
               },
-              intents: [],
-              parameters: []
+              intents: []
             };
           }
-  
-          if (newVersionData) {
-            await this.apiService.createVersion(this.project.id, newVersionData).toPromise();
-            await this.loadVersions();
-            this.snackBar.open('Version created successfully!', 'Close', { duration: 3000 });
-          }
+          
+          // Create new version
+          const newVersion = await this.api.createVersion(this.project.id, newVersionData).toPromise();
+          
+          // Reload versions and select the new one
+          await this.loadVersions();
+          this.onVersionChange(newVersion);
+          
+          this.snackBar.open('Version created successfully', 'Close', { duration: 3000 });
         } catch (error) {
+          console.error('Error creating version:', error);
           this.snackBar.open('Failed to create version', 'Close', { duration: 3000 });
         } finally {
           this.loading = false;
@@ -454,355 +492,209 @@ export default class VersionEditDialogComponent implements OnInit {
     });
   }
 
-  async saveVersion() {
-    if (!this.selectedVersion || !this.canEdit) {
-      this.snackBar.open('Cannot save published version', 'Close', { duration: 3000 });
-      return;
-    }
-    
-    if (this.versionForm.invalid) {
-      const invalidFields: string[] = [];
-      Object.keys(this.versionForm.controls).forEach(key => {
-        const control = this.versionForm.get(key);
-        if (control && control.invalid) {
-          invalidFields.push(key);
-        }
-      });
-      
-      this.intents.controls.forEach((intent, index) => {
-        if (intent.invalid) {
-          invalidFields.push(`Intent ${index + 1}`);
-        }
-      });
-  
-      this.snackBar.open(`Please fix validation errors in: ${invalidFields.join(', ')}`, 'Close', { 
-        duration: 5000 
-      });
-      return;
-    }
-  
-    const currentVersion = this.selectedVersion!;
-  
-    this.saving = true;
-    
-    try {
-      const formValue = this.versionForm.getRawValue();
-      
-      // updateData'yı backend'in beklediği formatta hazırla
-      const updateData = {
-        caption: formValue.caption,
-        general_prompt: formValue.general_prompt || '',
-        llm: formValue.llm,
-        intents: formValue.intents.map((intent: any) => ({
-          name: intent.name,
-          caption: intent.caption,
-          detection_prompt: intent.detection_prompt,
-          examples: Array.isArray(intent.examples) ? intent.examples : [],
-          parameters: Array.isArray(intent.parameters) ? intent.parameters.map((param: any) => ({
-            name: param.name,
-            caption: param.caption,
-            type: param.type,
-            required: param.required,
-            variable_name: param.variable_name,
-            extraction_prompt: param.extraction_prompt,
-            validation_regex: param.validation_regex,
-            invalid_prompt: param.invalid_prompt,
-            type_error_prompt: param.type_error_prompt
-          })) : [],
-          action: intent.action,
-          fallback_timeout_prompt: intent.fallback_timeout_prompt,
-          fallback_error_prompt: intent.fallback_error_prompt
-        })),
-        last_update_date: currentVersion.last_update_date || ''
-      };
-  
-      console.log('Saving version data:', JSON.stringify(updateData, null, 2));
-  
-      const result = await this.apiService.updateVersion(
-        this.project.id, 
-        currentVersion.no, 
-        updateData
-      ).toPromise();
-  
-      this.snackBar.open('Version saved successfully', 'Close', { duration: 3000 });
-
-      this.isDirty = false;
-      
-      if (result) {
-        this.selectedVersion = result;
-        this.versionForm.patchValue({
-          last_update_date: result.last_update_date
-        });
-      }
-      
-      await this.loadVersions();
-      
-    } catch (error: any) {
-      console.error('Save error:', error);
-      
-      if (error.status === 409) {
-        // Race condition handling
-        await this.handleRaceCondition(currentVersion);
-      } else if (error.status === 400 && error.error?.detail?.includes('Published versions')) {
-        this.snackBar.open('Published versions cannot be modified. Create a new version instead.', 'Close', { 
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
-      } else {
-        const errorMessage = error.error?.detail || error.message || 'Failed to save version';
-        this.snackBar.open(errorMessage, 'Close', { 
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
-      }
-    } finally {
-      this.saving = false;
-    }
-  }
-  
-  // Race condition handling
-  private async handleRaceCondition(currentVersion: Version) {
-    const formValue = this.versionForm.getRawValue();
-    
-    const retryUpdateData = {
-      caption: formValue.caption,
-      general_prompt: formValue.general_prompt || '',
-      llm: formValue.llm,
-      intents: formValue.intents.map((intent: any) => ({
-        name: intent.name,
-        caption: intent.caption,
-        detection_prompt: intent.detection_prompt,
-        examples: Array.isArray(intent.examples) ? intent.examples : [],
-        parameters: Array.isArray(intent.parameters) ? intent.parameters : [],
-        action: intent.action,
-        fallback_timeout_prompt: intent.fallback_timeout_prompt,
-        fallback_error_prompt: intent.fallback_error_prompt
-      })),
-      last_update_date: currentVersion.last_update_date || ''
-    };
-  
-    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '500px',
-      data: {
-        title: 'Version Modified',
-        message: 'This version was modified by another user. Do you want to reload and lose your changes, or force save?',
-        confirmText: 'Force Save',
-        cancelText: 'Reload',
-        confirmColor: 'warn'
-      }
-    });
-  
-    dialogRef.afterClosed().subscribe(async (forceSave) => {
-      if (forceSave) {
-        try {
-          await this.apiService.updateVersion(
-            this.project.id, 
-            currentVersion.no, 
-            retryUpdateData,
-            true
-          ).toPromise();
-          this.snackBar.open('Version force saved', 'Close', { duration: 3000 });
-          await this.loadVersions();
-        } catch (err: any) {
-          this.snackBar.open(err.error?.detail || 'Force save failed', 'Close', { 
-            duration: 5000,
-            panelClass: 'error-snackbar'
-          });
-        }
-      } else {
-        await this.loadVersions();
-      }
-    });
-  }  
-  
-  async publishVersion() {
+  async copyVersion() {
     if (!this.selectedVersion) return;
-
+    
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '500px',
+      width: '400px',
       data: {
-        title: 'Publish Version',
-        message: `Are you sure you want to publish version "${this.selectedVersion.caption}"? This will unpublish all other versions.`,
-        confirmText: 'Publish',
-        confirmColor: 'primary'
+        title: 'Copy Version',
+        message: `Create a copy of version ${this.selectedVersion.no}?`,
+        confirmText: 'Copy',
+        cancelText: 'Cancel'
       }
     });
 
     dialogRef.afterClosed().subscribe(async (confirmed) => {
-      if (confirmed && this.selectedVersion) {
-        this.publishing = true;
+      if (confirmed) {
+        this.loading = true;
         try {
-          await this.apiService.publishVersion(
-            this.project.id,
-            this.selectedVersion.no
-          ).toPromise();
-
-          this.snackBar.open('Version published successfully', 'Close', { duration: 3000 });
+          const details = await this.api.getVersionDetails(this.project.id, this.selectedVersion!.no).toPromise();
+          const copyData = {
+            ...details,
+            no: undefined,
+            published: false,
+            last_update_date: undefined,
+            caption: `Copy of version ${this.selectedVersion!.no}`
+          };
           
-          // Reload to get updated data
-          await this.reloadProject();
+          const newVersion = await this.api.createVersion(this.project.id, copyData).toPromise();
+          
+          await this.loadVersions();
+          this.onVersionChange(newVersion);
           
-        } catch (error: any) {
-          this.snackBar.open(error.error?.detail || 'Failed to publish version', 'Close', { 
-            duration: 5000,
-            panelClass: 'error-snackbar'
-          });
+          this.snackBar.open('Version copied successfully', 'Close', { duration: 3000 });
+        } catch (error) {
+          console.error('Error copying version:', error);
+          this.snackBar.open('Failed to copy version', 'Close', { duration: 3000 });
         } finally {
-          this.publishing = false;
+          this.loading = false;
         }
       }
     });
   }
 
+  async compareVersions() {
+    const { default: VersionCompareDialogComponent } = await import('../version-compare-dialog/version-compare-dialog.component');
+    
+    this.dialog.open(VersionCompareDialogComponent, {
+      width: '90vw',
+      maxWidth: '1200px',
+      data: { 
+        versions: this.versions,
+        selectedVersion: this.selectedVersion
+      }
+    });
+  }
+
   async deleteVersion() {
     if (!this.selectedVersion || this.selectedVersion.published) return;
-
+    
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
       width: '400px',
       data: {
         title: 'Delete Version',
-        message: `Are you sure you want to delete version "${this.selectedVersion.caption}"?`,
+        message: `Are you sure you want to delete version ${this.selectedVersion.no}? This action cannot be undone.`,
         confirmText: 'Delete',
         confirmColor: 'warn'
       }
     });
 
     dialogRef.afterClosed().subscribe(async (confirmed) => {
-      if (confirmed && this.selectedVersion) {
+      if (confirmed) {
+        this.loading = true;
         try {
-          await this.apiService.deleteVersion(
-            this.project.id,
-            this.selectedVersion.no
-          ).toPromise();
-
-          this.snackBar.open('Version deleted successfully', 'Close', { duration: 3000 });
+          await this.api.deleteVersion(this.project.id, this.selectedVersion!.no).toPromise();
           
-          // Reload and select another version
-          await this.reloadProject();
-          
-          if (this.versions.length > 0) {
-            this.loadVersion(this.versions[0]);
-          } else {
-            this.selectedVersion = null;
-          }
+          this.selectedVersion = null;
+          await this.loadVersions();
           
-        } catch (error: any) {
-          this.snackBar.open(error.error?.detail || 'Failed to delete version', 'Close', { 
-            duration: 5000,
-            panelClass: 'error-snackbar'
-          });
+          this.snackBar.open('Version deleted successfully', 'Close', { duration: 3000 });
+        } catch (error) {
+          console.error('Error deleting version:', error);
+          this.snackBar.open('Failed to delete version', 'Close', { duration: 3000 });
+        } finally {
+          this.loading = false;
         }
       }
     });
   }
 
-  async testIntentDetection() {
-    if (!this.testUserMessage.trim()) {
-      this.snackBar.open('Please enter a test message', 'Close', { duration: 3000 });
-      return;
-    }
+  saveVersion() {
+    if (!this.selectedVersion || !this.canEdit || this.versionForm.invalid) return;
+    
+    this.saving = true;
+    const formValue = this.versionForm.value;
+    
+    this.api.updateVersion(this.project.id, this.selectedVersion.no, formValue).subscribe({
+      next: () => {
+        this.snackBar.open('Version saved successfully', 'Close', { duration: 3000 });
+        this.isDirty = false;
+        this.saving = false;
+      },
+      error: (error) => {
+        console.error('Error saving version:', error);
+        this.snackBar.open('Failed to save version', 'Close', { duration: 3000 });
+        this.saving = false;
+      }
+    });
+  }
 
+  publishVersion() {
+    if (!this.selectedVersion || this.selectedVersion.published || this.isDirty) return;
+    
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '500px',
+      data: {
+        title: 'Publish Version',
+        message: `Publishing version ${this.selectedVersion.no} will make it the active version for all users. Published versions cannot be edited. Continue?`,
+        confirmText: 'Publish',
+        confirmColor: 'accent'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.publishing = true;
+        
+        this.api.publishVersion(this.project.id, this.selectedVersion!.no).subscribe({
+          next: () => {
+            this.snackBar.open('Version published successfully', 'Close', { duration: 3000 });
+            this.publishing = false;
+            
+            // Reload to update status
+            this.loadVersions();
+            this.onVersionChange(this.selectedVersion);
+          },
+          error: (error) => {
+            console.error('Error publishing version:', error);
+            this.snackBar.open('Failed to publish version', 'Close', { duration: 3000 });
+            this.publishing = false;
+          }
+        });
+      }
+    });
+  }
+
+  testIntentDetection() {
+    if (!this.testInput || !this.selectedVersion) return;
+    
     this.testing = true;
     this.testResult = null;
-
+    
     // Simulate intent detection test
     setTimeout(() => {
-      // This is a mock - in real implementation, this would call the Spark service
-      const intents = this.versionForm.get('intents')?.value || [];
+      const intents = this.intents.value;
       
-      // Simple matching for demo
-      let detectedIntent = null;
-      let confidence = 0;
-
-      for (const intent of intents) {
-        // Check examples in all locales
-        const allExamples = intent.examples || [];
-        for (const example of allExamples) {
-          const exampleText = typeof example === 'string' ? example : example.example;
-          if (this.testUserMessage.toLowerCase().includes(exampleText.toLowerCase())) {
-            detectedIntent = intent.name;
-            confidence = 0.95;
-            break;
-          }
-        }
-        if (detectedIntent) break;
-      }
-
-      // Random detection for demo
-      if (!detectedIntent && intents.length > 0) {
-        const randomIntent = intents[Math.floor(Math.random() * intents.length)];
-        detectedIntent = randomIntent.name;
-        confidence = 0.65;
+      // Simple simulation - in real app, this would call the backend
+      const randomIntent = intents[Math.floor(Math.random() * intents.length)];
+      
+      if (randomIntent && Math.random() > 0.3) {
+        this.testResult = {
+          intent: randomIntent.name,
+          confidence: 0.75 + Math.random() * 0.20,
+          parameters: randomIntent.parameters.map((p: any) => ({
+            name: p.name,
+            extracted: Math.random() > 0.5,
+            value: Math.random() > 0.5 ? 'Sample Value' : null
+          }))
+        };
+      } else {
+        this.testResult = {
+          intent: null,
+          confidence: 0
+        };
       }
-
-      this.testResult = {
-        success: true,
-        intent: detectedIntent,
-        confidence: confidence,
-        parameters: detectedIntent ? this.extractTestParameters(detectedIntent) : []
-      };
-
+      
       this.testing = false;
     }, 1500);
   }
 
-  private extractTestParameters(intentName: string): any[] {
-    // Mock parameter extraction
-    const intent = this.intents.value.find((i: any) => i.name === intentName);
-    if (!intent) return [];
-
-    return intent.parameters.map((param: any) => ({
-      name: param.name,
-      value: param.type === 'date' ? '2025-06-15' : 'test_value',
-      extracted: Math.random() > 0.3
-    }));
-  }
-
-  async getAvailableAPIs(): Promise<any[]> {
-    try {
-      return await this.apiService.getAPIs().toPromise() || [];
-    } catch {
-      return [];
-    }
-  }
-
-  private async reloadProject() {
-    this.loading = true;
-    try {
-      const projects = await this.apiService.getProjects().toPromise() || [];
-      const updatedProject = projects.find(p => p.id === this.project.id);
-      
-      if (updatedProject) {
-        this.project = updatedProject;
-        this.versions = [...updatedProject.versions].sort((a, b) => b.no - a.no);
-      }
-    } catch (error) {
-      console.error('Failed to reload project:', error);
-    } finally {
-      this.loading = false;
-    }
-  }
+  close() {
+    if (this.isDirty) {
+      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        width: '400px',
+        data: {
+          title: 'Unsaved Changes',
+          message: 'You have unsaved changes. Do you want to save before closing?',
+          confirmText: 'Save & Close',
+          cancelText: 'Discard Changes',
+          showThirdOption: true,
+          thirdOptionText: 'Cancel'
+        }
+      });
 
-  async compareVersions() {
-    if (this.versions.length < 2) {
-      this.snackBar.open('Need at least 2 versions to compare', 'Close', { duration: 3000 });
-      return;
+      dialogRef.afterClosed().subscribe(result => {
+        if (result === 'confirm') {
+          this.saveVersion();
+          this.dialogRef.close();
+        } else if (result === 'cancel') {
+          this.dialogRef.close();
+        }
+        // If result is null or 'third', don't close
+      });
+    } else {
+      this.dialogRef.close();
     }
-  
-    const { default: VersionCompareDialogComponent } = await import('../version-compare-dialog/version-compare-dialog.component');
-    
-    this.dialog.open(VersionCompareDialogComponent, {
-      width: '90vw',
-      maxWidth: '1000px',
-      maxHeight: '80vh',
-      data: {
-        versions: this.versions,
-        selectedVersion: this.selectedVersion
-      }
-    });
-  }
-    
-  close() {
-    this.dialogRef.close(true);
   }
 }