Upload 3 files

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

@@ -0,0 +1,236 @@
+<h2 mat-dialog-title>
+  {{ data.intent ? 'Edit Intent' : 'Create Intent' }}
+</h2>
+
+<mat-dialog-content>
+  <form [formGroup]="form">
+    <mat-tab-group>
+      <!-- General Tab -->
+      <mat-tab label="General">
+        <div class="tab-content">
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Intent Name*</mat-label>
+            <input matInput formControlName="name" 
+                   placeholder="e.g., flight-booking">
+            <mat-hint>Use lowercase with hyphens, no spaces</mat-hint>
+            <mat-error *ngIf="form.get('name')?.hasError('required')">Name is required</mat-error>
+            <mat-error *ngIf="form.get('name')?.hasError('pattern')">Invalid format</mat-error>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Caption</mat-label>
+            <input matInput formControlName="caption" 
+                   placeholder="e.g., Flight Booking Intent">
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+            <mat-label>Locale</mat-label>
+            <mat-select formControlName="locale">
+              <mat-option value="tr-TR">Turkish (tr-TR)</mat-option>
+              <mat-option value="en-US">English (en-US)</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Detection Prompt*</mat-label>
+            <textarea matInput formControlName="detection_prompt" 
+                      rows="4"
+                      placeholder="Describe when this intent should be detected..."></textarea>
+            <mat-hint>Explain to the LLM when to detect this intent</mat-hint>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>API Action*</mat-label>
+            <mat-select formControlName="action">
+              <mat-option *ngFor="let api of availableAPIs" [value]="api.name">
+                {{ api.name }} - {{ api.method }} {{ api.url }}
+              </mat-option>
+            </mat-select>
+            <mat-hint>Select the API to call when this intent is triggered</mat-hint>
+          </mat-form-field>
+
+          <mat-divider></mat-divider>
+
+          <h4>Fallback Messages</h4>
+          
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Timeout Message</mat-label>
+            <textarea matInput formControlName="fallback_timeout_prompt" 
+                      rows="2"
+                      placeholder="Message when API times out..."></textarea>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Error Message</mat-label>
+            <textarea matInput formControlName="fallback_error_prompt" 
+                      rows="2"
+                      placeholder="Message when API returns error..."></textarea>
+          </mat-form-field>
+        </div>
+      </mat-tab>
+
+      <!-- Examples Tab -->
+      <mat-tab label="Examples">
+        <div class="tab-content">
+          <div class="examples-section">
+            <h4>Example Sentences</h4>
+            <p>Add example sentences that should trigger this intent</p>
+
+            <div class="add-example">
+              <mat-form-field appearance="outline" class="example-input">
+                <mat-label>New Example</mat-label>
+                <input matInput [(ngModel)]="newExample" 
+                       [ngModelOptions]="{standalone: true}"
+                       (keyup.enter)="addExample()"
+                       placeholder="e.g., I want to book a flight">
+              </mat-form-field>
+              <button mat-raised-button color="primary" (click)="addExample()">
+                <mat-icon>add</mat-icon>
+                Add
+              </button>
+            </div>
+
+            <mat-list class="examples-list" *ngIf="examples.length > 0">
+              <mat-list-item *ngFor="let example of examples.controls; let i = index">
+                <mat-icon matListItemIcon>format_quote</mat-icon>
+                <div matListItemTitle>{{ example.value }}</div>
+                <button mat-icon-button matListItemMeta (click)="removeExample(i)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </mat-list-item>
+            </mat-list>
+
+            <div class="empty-state" *ngIf="examples.length === 0">
+              <p>No examples added yet. Examples help improve intent detection accuracy.</p>
+            </div>
+          </div>
+        </div>
+      </mat-tab>
+
+      <!-- Parameters Tab -->
+      <mat-tab label="Parameters">
+        <div class="tab-content">
+          <div class="parameters-header">
+            <h4>Intent Parameters</h4>
+            <button mat-raised-button color="primary" (click)="addParameter()">
+              <mat-icon>add</mat-icon>
+              Add Parameter
+            </button>
+          </div>
+
+          <div formArrayName="parameters" class="parameters-list">
+            <mat-expansion-panel *ngFor="let param of parameters.controls; let i = index" 
+                                 [formGroupName]="i">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  {{ param.get('name')?.value || 'New Parameter' }}
+                </mat-panel-title>
+                <mat-panel-description>
+                  <mat-chip-listbox>
+                    <mat-chip-option>{{ param.get('type')?.value }}</mat-chip-option>
+                    <mat-chip-option *ngIf="param.get('required')?.value" selected>Required</mat-chip-option>
+                    <mat-chip-option *ngIf="!param.get('required')?.value">Optional</mat-chip-option>
+                  </mat-chip-listbox>
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+
+              <div class="parameter-content">
+                <div class="parameter-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Parameter Name*</mat-label>
+                    <input matInput formControlName="name" 
+                           placeholder="e.g., origin_city">
+                    <mat-hint>Use snake_case</mat-hint>
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline">
+                    <mat-label>Display Name</mat-label>
+                    <input matInput formControlName="caption" 
+                           placeholder="e.g., Origin City">
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline">
+                    <mat-label>Type*</mat-label>
+                    <mat-select formControlName="type">
+                      <mat-option *ngFor="let type of parameterTypes" [value]="type">
+                        {{ type }}
+                      </mat-option>
+                    </mat-select>
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline">
+                    <mat-label>Variable Name*</mat-label>
+                    <input matInput formControlName="variable_name" 
+                           placeholder="e.g., origin">
+                    <mat-hint>Session variable name</mat-hint>
+                  </mat-form-field>
+                </div>
+
+                <mat-checkbox formControlName="required">Required Parameter</mat-checkbox>
+
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Extraction Prompt</mat-label>
+                  <textarea matInput formControlName="extraction_prompt" 
+                            rows="3"
+                            placeholder="Instructions for extracting this parameter..."></textarea>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Validation Regex</mat-label>
+                  <input matInput formControlName="validation_regex" 
+                         placeholder="e.g., ^[A-Z]{3}$">
+                  <button mat-icon-button matSuffix (click)="testRegex(i)" type="button">
+                    <mat-icon>bug_report</mat-icon>
+                  </button>
+                  <mat-hint>Optional regex pattern for validation</mat-hint>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Invalid Value Message</mat-label>
+                  <input matInput formControlName="invalid_prompt" 
+                         placeholder="Message when value doesn't match regex...">
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Type Error Message</mat-label>
+                  <input matInput formControlName="type_error_prompt" 
+                         placeholder="Message when value has wrong type...">
+                </mat-form-field>
+
+                <div class="parameter-actions">
+                  <button mat-button color="warn" (click)="removeParameter(i)">
+                    <mat-icon>delete</mat-icon>
+                    Remove
+                  </button>
+                  <div class="spacer"></div>
+                  <button mat-icon-button (click)="moveParameter(i, 'up')" 
+                          [disabled]="i === 0">
+                    <mat-icon>arrow_upward</mat-icon>
+                  </button>
+                  <button mat-icon-button (click)="moveParameter(i, 'down')" 
+                          [disabled]="i === parameters.length - 1">
+                    <mat-icon>arrow_downward</mat-icon>
+                  </button>
+                </div>
+              </div>
+            </mat-expansion-panel>
+          </div>
+
+          <div class="empty-state" *ngIf="parameters.length === 0">
+            <mat-icon>input</mat-icon>
+            <p>No parameters defined. Add parameters that need to be extracted from user input.</p>
+          </div>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="cancel()">Cancel</button>
+  <button mat-raised-button color="primary" 
+          (click)="save()" 
+          [disabled]="form.invalid">
+    Save
+  </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,134 @@
+mat-dialog-content {
+  min-width: 700px;
+  max-width: 900px;
+  max-height: 70vh;
+  padding: 0;
+}
+
+.tab-content {
+  padding: 24px;
+}
+
+.full-width {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+h4 {
+  margin: 24px 0 16px 0;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+mat-divider {
+  margin: 24px 0;
+}
+
+// Examples Tab
+.examples-section {
+  .add-example {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    margin-bottom: 24px;
+
+    .example-input {
+      flex: 1;
+    }
+  }
+
+  .examples-list {
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 0;
+
+    mat-list-item {
+      border-bottom: 1px solid #f5f5f5;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+
+// Parameters Tab
+.parameters-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+
+  h4 {
+    margin: 0;
+  }
+}
+
+.parameters-list {
+  mat-expansion-panel {
+    margin-bottom: 8px;
+
+    mat-chip-listbox {
+      margin-left: 16px;
+
+      mat-chip {
+        font-size: 11px;
+        min-height: 20px;
+        padding: 2px 8px;
+      }
+    }
+  }
+
+  .parameter-content {
+    padding: 16px;
+
+    .parameter-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-bottom: 16px;
+    }
+
+    mat-checkbox {
+      margin-bottom: 16px;
+    }
+
+    .parameter-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid #e0e0e0;
+
+      .spacer {
+        flex: 1;
+      }
+    }
+  }
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+
+  mat-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    color: #e0e0e0;
+    margin-bottom: 16px;
+  }
+
+  p {
+    color: #666;
+    margin: 0;
+  }
+}
+
+mat-dialog-actions {
+  padding: 16px 24px;
+  margin: 0;
+}

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

@@ -0,0 +1,198 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule } 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';
+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 { MatChipsModule } from '@angular/material/chips';
+import { MatTableModule } from '@angular/material/table';
+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';
+
+@Component({
+  selector: 'app-intent-edit-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatTableModule,
+    MatTabsModule,
+    MatExpansionModule,
+    MatListModule,
+    MatSnackBarModule
+  ],
+  templateUrl: './intent-edit-dialog.component.html',
+  styleUrls: ['./intent-edit-dialog.component.scss']
+})
+export default class IntentEditDialogComponent implements OnInit {
+  form!: FormGroup;
+  availableAPIs: any[] = [];
+  parameterTypes = ['str', 'int', 'float', 'bool', 'date'];
+  
+  newExample = '';
+
+  constructor(
+    private fb: FormBuilder,
+    private snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<IntentEditDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.availableAPIs = data.apis || [];
+  }
+
+  ngOnInit() {
+    this.initializeForm();
+    if (this.data.intent) {
+      this.populateForm(this.data.intent);
+    }
+  }
+
+  initializeForm() {
+    this.form = this.fb.group({
+      name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
+      caption: [''],
+      locale: ['tr-TR'],
+      detection_prompt: ['', Validators.required],
+      examples: this.fb.array([]),
+      parameters: this.fb.array([]),
+      action: ['', Validators.required],
+      fallback_timeout_prompt: [''],
+      fallback_error_prompt: ['']
+    });
+  }
+
+  populateForm(intent: any) {
+    this.form.patchValue({
+      name: intent.name,
+      caption: intent.caption,
+      locale: intent.locale,
+      detection_prompt: intent.detection_prompt,
+      action: intent.action,
+      fallback_timeout_prompt: intent.fallback_timeout_prompt,
+      fallback_error_prompt: intent.fallback_error_prompt
+    });
+
+    // Populate examples
+    if (intent.examples) {
+      const examplesArray = this.form.get('examples') as FormArray;
+      intent.examples.forEach((example: string) => {
+        examplesArray.push(this.fb.control(example));
+      });
+    }
+
+    // Populate parameters
+    if (intent.parameters) {
+      const parametersArray = this.form.get('parameters') as FormArray;
+      intent.parameters.forEach((param: any) => {
+        parametersArray.push(this.createParameterFormGroup(param));
+      });
+    }
+  }
+
+  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 examples() {
+    return this.form.get('examples') as FormArray;
+  }
+
+  get parameters() {
+    return this.form.get('parameters') as FormArray;
+  }
+
+  addExample() {
+    if (this.newExample.trim()) {
+      this.examples.push(this.fb.control(this.newExample.trim()));
+      this.newExample = '';
+    }
+  }
+
+  removeExample(index: number) {
+    this.examples.removeAt(index);
+  }
+
+  addParameter() {
+    this.parameters.push(this.createParameterFormGroup());
+  }
+
+  removeParameter(index: number) {
+    this.parameters.removeAt(index);
+  }
+
+  moveParameter(index: number, direction: 'up' | 'down') {
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+    if (newIndex >= 0 && newIndex < this.parameters.length) {
+      const param = this.parameters.at(index);
+      this.parameters.removeAt(index);
+      this.parameters.insert(newIndex, param);
+    }
+  }
+
+  async testRegex(index: number) {
+    const param = this.parameters.at(index);
+    const regex = param.get('validation_regex')?.value;
+    
+    if (!regex) {
+      this.snackBar.open('No regex pattern to test', 'Close', { duration: 2000 });
+      return;
+    }
+
+    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'
+        });
+      }
+    }
+  }
+
+  save() {
+    if (this.form.invalid) {
+      this.snackBar.open('Please fix all validation errors', 'Close', { duration: 3000 });
+      return;
+    }
+
+    const formValue = this.form.value;
+    this.dialogRef.close(formValue);
+  }
+
+  cancel() {
+    this.dialogRef.close(null);
+  }
+}