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

@@ -1,83 +1,553 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { MatChipsModule } from '@angular/material/chips';
+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 { ApiService, Project, Version } from '../../services/api.service';
+import ConfirmDialogComponent from '../confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-version-edit-dialog',
   standalone: true,
-  imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule],
-  template: `
-    <h2 mat-dialog-title>Manage Versions - {{ data.project.name }}</h2>
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatTabsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatTableModule,
+    MatChipsModule,
+    MatExpansionModule,
+    MatDividerModule,
+    MatProgressBarModule,
+    MatListModule
+  ],
+  templateUrl: './version-edit-dialog.component.html',
+  styleUrls: ['./version-edit-dialog.component.scss']
+})
+export default class VersionEditDialogComponent implements OnInit {
+  project: Project;
+  versions: Version[] = [];
+  selectedVersion: Version | null = null;
+  versionForm!: FormGroup;
+  
+  loading = false;
+  saving = false;
+  publishing = false;
+  creating = false;
+  
+  selectedTabIndex = 0;
+  testUserMessage = '';
+  testResult: any = null;
+  testing = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private apiService: ApiService,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialog,
+    public dialogRef: MatDialogRef<VersionEditDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.project = data.project;
+    this.versions = [...this.project.versions].sort((a, b) => b.id - a.id);
+  }
+
+  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);
+    }
+  }
+
+  initializeForm() {
+    this.versionForm = this.fb.group({
+      id: [{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: ['']
+      }),
+      intents: this.fb.array([]),
+      last_update_date: ['']
+    });
+
+    // 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();
+    });
+  }
+
+  loadVersion(version: Version) {
+    this.selectedVersion = version;
     
-    <mat-dialog-content>
-      <div class="version-management-placeholder">
-        <mat-icon>construction</mat-icon>
-        <h3>Version Management Coming Soon</h3>
-        <p>This feature will allow you to:</p>
-        <ul>
-          <li>Create new versions from existing ones</li>
-          <li>Edit unpublished versions</li>
-          <li>Publish versions to production</li>
-          <li>Compare versions side by side</li>
-          <li>Manage intents and parameters</li>
-        </ul>
-      </div>
-    </mat-dialog-content>
+    // Clear intents array
+    const intentsArray = this.versionForm.get('intents') as FormArray;
+    while (intentsArray.length !== 0) {
+      intentsArray.removeAt(0);
+    }
+
+    // Populate form
+    this.versionForm.patchValue({
+      id: version.id,
+      caption: version.caption,
+      published: version.published,
+      general_prompt: version.general_prompt || '',
+      llm: version.llm || {
+        repo_id: '',
+        generation_config: {
+          max_new_tokens: 256,
+          temperature: 0.2,
+          top_p: 0.8,
+          repetition_penalty: 1.1
+        },
+        use_fine_tune: false,
+        fine_tune_zip: ''
+      },
+      last_update_date: version.last_update_date || ''
+    });
+
+    // Populate intents
+    if (version.intents) {
+      version.intents.forEach(intent => {
+        intentsArray.push(this.createIntentFormGroup(intent));
+      });
+    }
+
+    // Enable/disable form based on published status
+    if (version.published) {
+      this.versionForm.disable();
+      this.snackBar.open('This version is published and cannot be edited', 'OK', { duration: 3000 });
+    } else {
+      this.versionForm.enable();
+      this.versionForm.get('id')?.disable();
+      this.versionForm.get('published')?.disable();
+    }
+  }
+
+  createIntentFormGroup(intent: any = {}): FormGroup {
+    const parametersArray = this.fb.array([]);
+    
+    if (intent.parameters) {
+      intent.parameters.forEach((param: any) => {
+        parametersArray.push(this.createParameterFormGroup(param));
+      });
+    }
+
+    return this.fb.group({
+      name: [intent.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
+      caption: [intent.caption || ''],
+      locale: [intent.locale || 'tr-TR'],
+      detection_prompt: [intent.detection_prompt || '', Validators.required],
+      examples: this.fb.array(intent.examples || []),
+      parameters: parametersArray,
+      action: [intent.action || '', Validators.required],
+      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, 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 || '']
+    });
+  }
+
+  get intents() {
+    return this.versionForm.get('intents') as FormArray;
+  }
+
+  getIntentParameters(intentIndex: number): FormArray {
+    return this.intents.at(intentIndex).get('parameters') as FormArray;
+  }
+
+  getIntentExamples(intentIndex: number): FormArray {
+    return this.intents.at(intentIndex).get('examples') as FormArray;
+  }
+
+  addIntent() {
+    this.intents.push(this.createIntentFormGroup());
+  }
+
+  removeIntent(index: number) {
+    const intent = this.intents.at(index).value;
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '400px',
+      data: {
+        title: 'Delete Intent',
+        message: `Are you sure you want to delete intent "${intent.name}"?`,
+        confirmText: 'Delete',
+        confirmColor: 'warn'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
+        this.intents.removeAt(index);
+      }
+    });
+  }
+
+  async editIntent(intentIndex: number) {
+    const { default: IntentEditDialogComponent } = await import('../intent-edit-dialog/intent-edit-dialog.component');
     
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="close()">Close</button>
-    </mat-dialog-actions>
-  `,
-  styles: [`
-    mat-dialog-content {
-      min-width: 600px;
-      min-height: 400px;
+    const intent = this.intents.at(intentIndex);
+    const dialogRef = this.dialog.open(IntentEditDialogComponent, {
+      width: '90vw',
+      maxWidth: '1000px',
+      data: { 
+        intent: intent.value,
+        project: this.project,
+        apis: await this.getAvailableAPIs()
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        // Update the intent in the form array
+        intent.patchValue(result);
+      }
+    });
+  }
+
+  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);
+  }
+
+  addExample(intentIndex: number, example: string) {
+    if (example.trim()) {
+      const examples = this.getIntentExamples(intentIndex);
+      examples.push(this.fb.control(example));
+    }
+  }
+
+  removeExample(intentIndex: number, exampleIndex: number) {
+    const examples = this.getIntentExamples(intentIndex);
+    examples.removeAt(exampleIndex);
+  }
+
+  async createVersion() {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '500px',
+      data: {
+        title: 'Create New Version',
+        message: 'Which version would you like to use as a base for the new version?',
+        confirmText: 'Create',
+        showVersionSelect: true,
+        versions: this.versions
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(async (sourceVersionId) => {
+      if (sourceVersionId) {
+        this.creating = true;
+        try {
+          const result = await this.apiService.createVersion(this.project.id, {
+            source_version_id: sourceVersionId,
+            caption: 'New Version'
+          }).toPromise();
+
+          this.snackBar.open('Version created successfully', 'Close', { duration: 3000 });
+          
+          // Reload project to get new version
+          await this.reloadProject();
+          
+          // Select the new version
+          const newVersion = this.versions.find(v => v.id === result.id);
+          if (newVersion) {
+            this.loadVersion(newVersion);
+          }
+        } catch (error: any) {
+          this.snackBar.open(error.error?.detail || 'Failed to create version', 'Close', { 
+            duration: 5000,
+            panelClass: 'error-snackbar'
+          });
+        } finally {
+          this.creating = false;
+        }
+      }
+    });
+  }
+
+  async saveVersion() {
+    if (this.versionForm.invalid || !this.selectedVersion) {
+      this.snackBar.open('Please fix all validation errors', 'Close', { duration: 3000 });
+      return;
     }
 
-    .version-management-placeholder {
-      text-align: center;
-      padding: 60px 20px;
+    this.saving = true;
+    try {
+      const formValue = this.versionForm.getRawValue();
+      
+      // Prepare intents data
+      const intents = formValue.intents.map((intent: any) => ({
+        ...intent,
+        examples: intent.examples || []
+      }));
 
-      mat-icon {
-        font-size: 64px;
-        width: 64px;
-        height: 64px;
-        color: #666;
-        margin-bottom: 20px;
+      const updateData = {
+        caption: formValue.caption,
+        general_prompt: formValue.general_prompt,
+        llm: formValue.llm,
+        intents: intents,
+        last_update_date: formValue.last_update_date
+      };
+
+      await this.apiService.updateVersion(
+        this.project.id, 
+        this.selectedVersion.id, 
+        updateData
+      ).toPromise();
+
+      this.snackBar.open('Version saved successfully', 'Close', { duration: 3000 });
+      
+      // Update last_update_date
+      const updatedVersion = { ...this.selectedVersion, ...updateData };
+      this.loadVersion(updatedVersion);
+      
+    } catch (error: any) {
+      if (error.status === 409) {
+        this.snackBar.open('Version was modified by another user. Please reload.', 'Close', { 
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
+        await this.reloadProject();
+      } else {
+        this.snackBar.open(error.error?.detail || 'Failed to save version', 'Close', { 
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
+      }
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  async publishVersion() {
+    if (!this.selectedVersion) return;
+
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '500px',
+      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'
       }
+    });
+
+    dialogRef.afterClosed().subscribe(async (confirmed) => {
+      if (confirmed && this.selectedVersion) {
+        this.publishing = true;
+        try {
+          await this.apiService.publishVersion(
+            this.project.id,
+            this.selectedVersion.id
+          ).toPromise();
+
+          this.snackBar.open('Version published successfully', 'Close', { duration: 3000 });
+          
+          // Reload to get updated data
+          await this.reloadProject();
+          
+        } catch (error: any) {
+          this.snackBar.open(error.error?.detail || 'Failed to publish version', 'Close', { 
+            duration: 5000,
+            panelClass: 'error-snackbar'
+          });
+        } finally {
+          this.publishing = false;
+        }
+      }
+    });
+  }
+
+  async deleteVersion() {
+    if (!this.selectedVersion || this.selectedVersion.published) return;
 
-      h3 {
-        color: #333;
-        margin-bottom: 16px;
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '400px',
+      data: {
+        title: 'Delete Version',
+        message: `Are you sure you want to delete version "${this.selectedVersion.caption}"?`,
+        confirmText: 'Delete',
+        confirmColor: 'warn'
       }
+    });
 
-      p {
-        color: #666;
-        margin-bottom: 20px;
+    dialogRef.afterClosed().subscribe(async (confirmed) => {
+      if (confirmed && this.selectedVersion) {
+        try {
+          await this.apiService.deleteVersion(
+            this.project.id,
+            this.selectedVersion.id
+          ).toPromise();
+
+          this.snackBar.open('Version deleted successfully', 'Close', { duration: 3000 });
+          
+          // Reload and select another version
+          await this.reloadProject();
+          
+          if (this.versions.length > 0) {
+            this.loadVersion(this.versions[0]);
+          } else {
+            this.selectedVersion = null;
+          }
+          
+        } catch (error: any) {
+          this.snackBar.open(error.error?.detail || 'Failed to delete version', 'Close', { 
+            duration: 5000,
+            panelClass: 'error-snackbar'
+          });
+        }
       }
+    });
+  }
 
-      ul {
-        text-align: left;
-        max-width: 400px;
-        margin: 0 auto;
-        color: #666;
+  async testIntentDetection() {
+    if (!this.testUserMessage.trim()) {
+      this.snackBar.open('Please enter a test message', 'Close', { duration: 3000 });
+      return;
+    }
 
-        li {
-          margin-bottom: 8px;
+    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 || [];
+      
+      // Simple matching for demo
+      let detectedIntent = null;
+      let confidence = 0;
+
+      for (const intent of intents) {
+        for (const example of intent.examples || []) {
+          if (this.testUserMessage.toLowerCase().includes(example.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;
+      }
+
+      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.id - a.id);
       }
+    } catch (error) {
+      console.error('Failed to reload project:', error);
+    } finally {
+      this.loading = false;
     }
-  `]
-})
-export default class VersionEditDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<VersionEditDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  }
+
+  compareVersions() {
+    // TODO: Implement version comparison
+    this.snackBar.open('Version comparison coming soon', 'Close', { duration: 3000 });
+  }
 
   close() {
-    this.dialogRef.close(false);
+    this.dialogRef.close(true);
   }
 }