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

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

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';  // FormsModule EKLE
+import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -14,6 +14,30 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatListModule } from '@angular/material/list';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+
+// Interfaces for multi-language support
+interface LocalizedExample {
+  locale_code: string;
+  example: string;
+}
+
+interface LocalizedCaption {
+  locale_code: string;
+  caption: string;
+}
+
+interface ParameterWithLocalizedCaption {
+  name: string;
+  caption: LocalizedCaption[];
+  type: string;
+  required: boolean;
+  variable_name: string;
+  extraction_prompt?: string;
+  validation_regex?: string;
+  invalid_prompt?: string;
+  type_error_prompt?: string;
+}
 
 @Component({
   selector: 'app-intent-edit-dialog',
@@ -21,7 +45,7 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
   imports: [
     CommonModule,
     ReactiveFormsModule,
-    FormsModule,  // BU SATIRI EKLE
+    FormsModule,
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
@@ -44,15 +68,23 @@ export default class IntentEditDialogComponent implements OnInit {
   availableAPIs: any[] = [];
   parameterTypes = ['str', 'int', 'float', 'bool', 'date'];
   
+  // Multi-language support
+  supportedLocales: string[] = [];
+  selectedExampleLocale: string = '';
+  examples: LocalizedExample[] = [];
+  
   newExample = '';
 
   constructor(
     private fb: FormBuilder,
     private snackBar: MatSnackBar,
+    private dialog: MatDialog,
     public dialogRef: MatDialogRef<IntentEditDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.availableAPIs = data.apis || [];
+    this.supportedLocales = data.supportedLocales || ['tr'];
+    this.selectedExampleLocale = data.defaultLocale || this.supportedLocales[0] || 'tr';
   }
 
   ngOnInit() {
@@ -66,9 +98,7 @@ export default class IntentEditDialogComponent implements OnInit {
     this.form = this.fb.group({
       name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
       caption: ['', Validators.required],
-      locale: ['tr-TR'],
       detection_prompt: ['', Validators.required],
-      examples: this.fb.array([]),
       parameters: this.fb.array([]),
       action: ['', Validators.required],
       fallback_timeout_prompt: [''],
@@ -77,146 +107,191 @@ export default class IntentEditDialogComponent implements OnInit {
   }
 
   populateForm(intent: any) {
-    // Önce basit alanları doldur
+    // Populate basic fields
     this.form.patchValue({
       name: intent.name || '',
       caption: intent.caption || '',
-      locale: intent.locale || 'tr-TR',
       detection_prompt: intent.detection_prompt || '',
       action: intent.action || '',
       fallback_timeout_prompt: intent.fallback_timeout_prompt || '',
       fallback_error_prompt: intent.fallback_error_prompt || ''
     });
 
-    // Examples array'ini doldur
+    // Populate localized examples
     if (intent.examples && Array.isArray(intent.examples)) {
-      const examplesArray = this.form.get('examples') as FormArray;
-      examplesArray.clear();
-      intent.examples.forEach((example: string) => {
-        if (typeof example === 'string') {
-          examplesArray.push(this.fb.control(example));
-        }
-      });
+      if (intent.examples.length > 0 && typeof intent.examples[0] === 'object' && 'locale_code' in intent.examples[0]) {
+        // New format with LocalizedExample
+        this.examples = [...intent.examples];
+      } else if (typeof intent.examples[0] === 'string') {
+        // Old format - convert to new format using default locale
+        this.examples = intent.examples.map((ex: string) => ({
+          locale_code: this.selectedExampleLocale,
+          example: ex
+        }));
+      }
     }
 
-    // Parameters array'ini doldur
+    // Populate parameters with localized captions
     if (intent.parameters && Array.isArray(intent.parameters)) {
-      const parametersArray = this.form.get('parameters') as FormArray;
-      parametersArray.clear();
+      const paramsArray = this.form.get('parameters') as FormArray;
+      paramsArray.clear();
+      
       intent.parameters.forEach((param: any) => {
-        parametersArray.push(this.createParameterFormGroup(param));
+        paramsArray.push(this.createParameterFormGroup(param));
       });
     }
   }
 
-  createParameterFormGroup(param: any = {}): FormGroup {
+  createParameterFormGroup(param?: any): FormGroup {
+    // Convert old caption format to new if needed
+    let captionArray: LocalizedCaption[] = [];
+    if (param?.caption) {
+      if (Array.isArray(param.caption)) {
+        captionArray = param.caption;
+      } else if (typeof param.caption === 'string') {
+        // Old format - convert to new
+        captionArray = [{
+          locale_code: this.selectedExampleLocale,
+          caption: param.caption
+        }];
+      }
+    }
+
     return this.fb.group({
-      name: [param.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
-      caption: [param.caption || '', Validators.required], // ✅ Validators.required ekle
-      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: [param?.name || '', Validators.required],
+      caption: [captionArray],
+      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 examples() {
-    return this.form.get('examples') as FormArray;
+  get parameters() {
+    return this.form.get('parameters') as FormArray;
   }
 
-  get parameters(): FormArray {
-    return this.form.get('parameters') as FormArray || this.fb.array([]);
+  addParameter() {
+    this.parameters.push(this.createParameterFormGroup());
   }
 
-  addExample() {
-    const trimmedExample = this.newExample?.trim();
-    if (trimmedExample) {
-      this.examples.push(this.fb.control(trimmedExample));
-      this.newExample = '';
-    }
+  removeParameter(index: number) {
+    this.parameters.removeAt(index);
   }
-  
-  removeExample(index: number) {
-    this.examples.removeAt(index);
+
+  // Multi-language example management
+  getExamplesForCurrentLocale(): LocalizedExample[] {
+    return this.examples.filter(ex => ex.locale_code === this.selectedExampleLocale);
   }
 
-  addParameter() {
-    const parametersArray = this.form.get('parameters') as FormArray;
-    parametersArray.push(this.createParameterFormGroup());
+  addExample() {
+    if (this.newExample.trim()) {
+      const existingIndex = this.examples.findIndex(
+        ex => ex.locale_code === this.selectedExampleLocale && ex.example === this.newExample.trim()
+      );
+      
+      if (existingIndex === -1) {
+        this.examples.push({
+          locale_code: this.selectedExampleLocale,
+          example: this.newExample.trim()
+        });
+        this.newExample = '';
+      } else {
+        this.snackBar.open('This example already exists for this locale', 'Close', { duration: 3000 });
+      }
+    }
   }
-  
-  removeParameter(index: number) {
-    this.parameters.removeAt(index);
+
+  removeExample(example: LocalizedExample) {
+    const index = this.examples.findIndex(
+      ex => ex.locale_code === example.locale_code && ex.example === example.example
+    );
+    if (index !== -1) {
+      this.examples.splice(index, 1);
+    }
   }
 
-  moveParameter(index: number, direction: 'up' | 'down') {
-    const parametersArray = this.form.get('parameters') as FormArray;
-    const newIndex = direction === 'up' ? index - 1 : index + 1;
+  // Parameter caption management
+  getCaptionDisplay(captions: LocalizedCaption[]): string {
+    if (!captions || captions.length === 0) return '(No caption)';
     
-    if (newIndex >= 0 && newIndex < parametersArray.length) {
-      const param = parametersArray.at(index);
-      parametersArray.removeAt(index);
-      parametersArray.insert(newIndex, param);
-    }
+    // Try to find caption for default locale
+    const defaultCaption = captions.find(c => c.locale_code === (this.data.defaultLocale || 'tr'));
+    if (defaultCaption) return defaultCaption.caption;
+    
+    // Return first available caption
+    return captions[0].caption;
   }
 
-  async testRegex(index: number) {
-    const param = this.parameters.at(index);
-    const regex = param.get('validation_regex')?.value;
+  async openCaptionDialog(paramIndex: number) {
+    const param = this.parameters.at(paramIndex);
+    const currentCaptions = param.get('caption')?.value || [];
     
-    if (!regex) {
-      this.snackBar.open('No regex pattern to test', 'Close', { duration: 2000 });
-      return;
-    }
+    // Import and open caption dialog
+    const { default: CaptionDialogComponent } = await import('./caption-dialog.component');
+    
+    const dialogRef = this.dialog.open(CaptionDialogComponent, {
+      width: '600px',
+      data: {
+        captions: [...currentCaptions],
+        supportedLocales: this.supportedLocales,
+        defaultLocale: this.data.defaultLocale
+      }
+    });
 
-    const testValue = prompt('Enter a test value:');
-    if (testValue !== null) {
-      try {
-        const pattern = new RegExp(regex);
-        const matches = pattern.test(testValue);
-        
-        this.snackBar.open(
-          matches ? '✓ Pattern matches!' : '✗ Pattern does not match',
-          'Close',
-          { duration: 3000 }
-        );
-      } catch (error) {
-        this.snackBar.open('Invalid regex pattern', 'Close', { 
-          duration: 3000,
-          panelClass: 'error-snackbar'
-        });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        param.patchValue({ caption: result });
       }
-    }
+    });
   }
 
-  save() {
-    if (this.form.invalid) {
-      this.snackBar.open('Please fix all validation errors', 'Close', { duration: 3000 });
-      return;
-    }
-  
-    const formValue = this.form.value;
-    
-    // Form değerlerini güvenli bir şekilde al
-    const result = {
-      name: formValue.name || '',
-      caption: formValue.caption || '',
-      locale: formValue.locale || 'tr-TR',
-      detection_prompt: formValue.detection_prompt || '',
-      action: formValue.action || '',
-      fallback_timeout_prompt: formValue.fallback_timeout_prompt || '',
-      fallback_error_prompt: formValue.fallback_error_prompt || '',
-      examples: Array.isArray(formValue.examples) ? formValue.examples : [],
-      parameters: Array.isArray(formValue.parameters) ? formValue.parameters : []
+  // Locale helpers
+  getLocaleName(localeCode: string): string {
+    const localeNames: { [key: string]: string } = {
+      'tr': 'Türkçe',
+      'en': 'English',
+      'de': 'Deutsch',
+      'fr': 'Français',
+      'es': 'Español',
+      'ar': 'العربية',
+      'ru': 'Русский',
+      'zh': '中文',
+      'ja': '日本語',
+      'ko': '한국어'
     };
-  
-    this.dialogRef.close(result);
+    return localeNames[localeCode] || localeCode;
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      const formValue = this.form.value;
+      
+      // Add examples to the result
+      formValue.examples = this.examples;
+      
+      // Ensure all parameters have captions
+      formValue.parameters = formValue.parameters.map((param: any) => {
+        if (!param.caption || param.caption.length === 0) {
+          // Create default caption if missing
+          param.caption = [{
+            locale_code: this.data.defaultLocale || 'tr',
+            caption: param.name
+          }];
+        }
+        return param;
+      });
+      
+      this.dialogRef.close(formValue);
+    } else {
+      this.snackBar.open('Please fill all required fields', 'Close', { duration: 3000 });
+    }
   }
 
   cancel() {
-    this.dialogRef.close(null);
+    this.dialogRef.close();
   }
 }