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

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

@@ -1,236 +1,239 @@
-<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>
+<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()"
+                      [disabled]="!newExample || !newExample.trim()">
+                <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>