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

<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-error *ngIf="form.get('caption')?.hasError('required')">Caption is required</mat-error>
          </mat-form-field>

          <mat-form-field appearance="outline" class="full-width">
            <mat-label>Detection Prompt*</mat-label>
            <textarea matInput formControlName="detection_prompt" class="code-textarea"
                      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" class="code-textarea"
                      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" class="code-textarea"
                      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">
            <div class="examples-header">
              <h4>Examples for</h4>
              <mat-form-field appearance="outline" class="locale-selector">
                <mat-select [(value)]="selectedExampleLocale">
                  <mat-option *ngFor="let locale of supportedLocales" [value]="locale">
                    {{ getLocaleName(locale) }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>

            <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}"
                       placeholder="e.g., I want to book a flight from Istanbul to Ankara"
                       (keyup.enter)="addExample()">
              </mat-form-field>
              <button mat-raised-button color="accent" (click)="addExample()" [disabled]="!newExample.trim()">
                <mat-icon>add</mat-icon>
                Add Example
              </button>
            </div>

            <mat-list class="examples-list" *ngIf="getExamplesForCurrentLocale().length > 0">
              <mat-list-item *ngFor="let example of getExamplesForCurrentLocale()">
                {{ example.example }}
                <button mat-icon-button matListItemMeta (click)="removeExample(example)">
                  <mat-icon>delete</mat-icon>
                </button>
              </mat-list-item>
            </mat-list>

            <div class="empty-state" *ngIf="getExamplesForCurrentLocale().length === 0">
              <mat-icon>format_list_bulleted</mat-icon>
              <p>No examples for {{ getLocaleName(selectedExampleLocale) }} yet.</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 [value]="getCaptionDisplay(param.get('caption')?.value)" 
                           readonly
                           (click)="openCaptionDialog(i)"
                           placeholder="Click to edit captions">
                    <button mat-icon-button matSuffix (click)="openCaptionDialog(i)" type="button">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <mat-hint>Multi-language captions</mat-hint>
                  </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" class="code-textarea"
                            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>