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

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

@@ -1,151 +1,161 @@
-<h2 mat-dialog-title>
-  Manage Versions - {{ project.name }}
-  <mat-chip-listbox class="title-chips">
-    <mat-chip-option>{{ project.caption }}</mat-chip-option>
-    <mat-chip-option>{{ versions.length }} versions</mat-chip-option>
-  </mat-chip-listbox>
-</h2>
+<mat-dialog-content class="version-management-container">
+  <h2 mat-dialog-title>
+    {{ project.name }} - Version Management
+    <mat-chip-listbox class="title-chips">
+      <mat-chip-option [disabled]="true">
+        <mat-icon>layers</mat-icon>
+        {{ versions.length }} versions
+      </mat-chip-option>
+    </mat-chip-listbox>
+  </h2>
 
-<mat-dialog-content>
-  <div class="version-management-container">
-    
+  <div class="dialog-content">
     <!-- Version Selector -->
     <div class="version-selector">
-      <mat-form-field appearance="outline" class="version-select">
+      <mat-form-field class="version-select">
         <mat-label>Select Version</mat-label>
-        <mat-select [(value)]="selectedVersion" (selectionChange)="loadVersion($event.value)">
+        <mat-select [(value)]="selectedVersion" (selectionChange)="onVersionChange($event.value)">
           <mat-option *ngFor="let version of versions" [value]="version">
-            Version {{ version.no }} - {{ version.caption }}
-            <span class="version-status" *ngIf="version.published">(Published)</span>
+            Version {{ version.no }} - {{ version.caption || 'No description' }}
+            <span class="version-status" *ngIf="version.published">[Published]</span>
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <div class="version-actions">
-        <button mat-raised-button color="primary" (click)="createVersion()" [disabled]="creating">
+        <button mat-raised-button color="primary" (click)="createVersion()">
           <mat-icon>add</mat-icon>
           New Version
         </button>
+        <button mat-button (click)="copyVersion()" [disabled]="!selectedVersion">
+          <mat-icon>content_copy</mat-icon>
+          Copy
+        </button>
         <button mat-button (click)="compareVersions()" [disabled]="versions.length < 2">
           <mat-icon>compare_arrows</mat-icon>
           Compare
         </button>
+        <button mat-button color="warn" (click)="deleteVersion()" 
+                [disabled]="!selectedVersion || selectedVersion.published">
+          <mat-icon>delete</mat-icon>
+          Delete
+        </button>
       </div>
     </div>
 
-    <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
-    
-    <!-- Warning for published version -->
+    <!-- Published Version Warning -->
     <div class="alert alert-warning" *ngIf="selectedVersion?.published">
-      <mat-icon>info</mat-icon>
-      This version is published and cannot be edited. Create a new version or unpublish to make changes.
+      <mat-icon>warning</mat-icon>
+      <span>This version is published and cannot be edited. Create a copy to make changes.</span>
+    </div>
+
+    <!-- Loading State -->
+    <div class="loading-container" *ngIf="loading">
+      <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
+      <p>Loading version details...</p>
     </div>
 
     <!-- Version Editor -->
     <div class="version-editor" *ngIf="selectedVersion && !loading">
       <form [formGroup]="versionForm">
-        <mat-tab-group [(selectedIndex)]="selectedTabIndex" dynamicHeight>
+        <mat-tab-group>
           <!-- General Tab -->
           <mat-tab label="General">
             <div class="tab-content">
-              <div class="metadata-info">
-                <mat-chip-listbox>
-                  <mat-chip-option>Version {{ selectedVersion.no }}</mat-chip-option>
-                  <mat-chip-option *ngIf="selectedVersion.published" selected>Published</mat-chip-option>
-                  <mat-chip-option *ngIf="!selectedVersion.published">Draft</mat-chip-option>
-                  <mat-chip-option *ngIf="selectedVersion.last_update_date">
-                    Last updated: {{ selectedVersion.last_update_date | date:'short' }}
-                  </mat-chip-option>
-                </mat-chip-listbox>
-              </div>
+              <mat-form-field class="full-width">
+                <mat-label>Version Caption</mat-label>
+                <input matInput formControlName="caption" [readonly]="!canEdit">
+                <mat-hint>Brief description of this version</mat-hint>
+              </mat-form-field>
 
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Caption</mat-label>
-                <input matInput formControlName="caption" placeholder="Version description" [readonly]="!canEdit">
+              <mat-form-field class="full-width">
+                <mat-label>General Prompt</mat-label>
+                <textarea matInput formControlName="prompt" rows="8" [readonly]="!canEdit"></textarea>
+                <mat-hint>System prompt that defines the assistant's behavior</mat-hint>
               </mat-form-field>
 
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>General System Prompt</mat-label>
-                <textarea matInput 
-                  class="code-textarea"
-                  formControlName="general_prompt" 
-                  rows="10"
-                  placeholder="Define the assistant's behavior and capabilities..."
-                  [readonly]="!canEdit"></textarea>
-                <mat-hint>This prompt defines the overall behavior of your assistant</mat-hint>
+              <mat-form-field class="full-width">
+                <mat-label>Welcome Prompt</mat-label>
+                <textarea matInput formControlName="welcome_prompt" rows="4" [readonly]="!canEdit"></textarea>
+                <mat-hint>Initial greeting message (use {{variables.user_name}} for personalization)</mat-hint>
               </mat-form-field>
 
-              <div class="action-buttons">
-                <button mat-raised-button color="warn" 
-                        (click)="deleteVersion()"
-                        [disabled]="selectedVersion.published"
-                        *ngIf="!selectedVersion.published">
-                  <mat-icon>delete</mat-icon>
-                  Delete Version
-                </button>
+              <div class="metadata-info">
+                <mat-chip-listbox>
+                  <mat-chip-option [disabled]="true">
+                    <mat-icon>schedule</mat-icon>
+                    Last updated: {{ selectedVersion.last_update_date | date:'short' }}
+                  </mat-chip-option>
+                  <mat-chip-option [disabled]="true" *ngIf="selectedVersion.last_update_user">
+                    <mat-icon>person</mat-icon>
+                    By: {{ selectedVersion.last_update_user }}
+                  </mat-chip-option>
+                </mat-chip-listbox>
               </div>
             </div>
           </mat-tab>
 
-          <!-- LLM Configuration Tab -->
+          <!-- LLM Tab -->
           <mat-tab label="LLM">
-            <div class="tab-content" formGroupName="llm">
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Model Repository ID</mat-label>
-                <input matInput formControlName="repo_id" 
-                       placeholder="e.g., ytu-ce-cosmos/Turkish-Llama-8b-Instruct-v0.1"
-                       [readonly]="!canEdit">
-                <mat-hint>HuggingFace model repository ID</mat-hint>
+            <div class="tab-content">
+              <mat-form-field class="full-width">
+                <mat-label>Model</mat-label>
+                <mat-select formControlName="model" [disabled]="!canEdit">
+                  <mat-option value="gpt-3.5-turbo">GPT-3.5 Turbo</mat-option>
+                  <mat-option value="gpt-4">GPT-4</mat-option>
+                  <mat-option value="claude-2">Claude 2</mat-option>
+                  <mat-option value="llama-2">Llama 2</mat-option>
+                </mat-select>
               </mat-form-field>
 
-              <h4>Generation Configuration</h4>
-              <div formGroupName="generation_config" class="generation-config">
-                <mat-form-field appearance="outline">
-                  <mat-label>Max New Tokens</mat-label>
-                  <input matInput type="number" formControlName="max_new_tokens" [readonly]="!canEdit">
-                  <mat-hint>Maximum tokens to generate (1-2048)</mat-hint>
-                </mat-form-field>
+              <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title>Generation Configuration</mat-panel-title>
+                </mat-expansion-panel-header>
+                
+                <div class="generation-config" formGroupName="generation_config">
+                  <mat-form-field>
+                    <mat-label>Max Tokens</mat-label>
+                    <input matInput type="number" formControlName="max_new_tokens" [readonly]="!canEdit">
+                  </mat-form-field>
 
-                <mat-form-field appearance="outline">
-                  <mat-label>Temperature</mat-label>
-                  <input matInput type="number" step="0.1" formControlName="temperature" [readonly]="!canEdit">
-                  <mat-hint>Controls randomness (0-2)</mat-hint>
-                </mat-form-field>
+                  <mat-form-field>
+                    <mat-label>Temperature</mat-label>
+                    <input matInput type="number" step="0.1" formControlName="temperature" [readonly]="!canEdit">
+                  </mat-form-field>
 
-                <mat-form-field appearance="outline">
-                  <mat-label>Top P</mat-label>
-                  <input matInput type="number" step="0.1" formControlName="top_p" [readonly]="!canEdit">
-                  <mat-hint>Nucleus sampling (0-1)</mat-hint>
-                </mat-form-field>
+                  <mat-form-field>
+                    <mat-label>Top P</mat-label>
+                    <input matInput type="number" step="0.1" formControlName="top_p" [readonly]="!canEdit">
+                  </mat-form-field>
 
-                <mat-form-field appearance="outline">
-                  <mat-label>Repetition Penalty</mat-label>
-                  <input matInput type="number" step="0.1" formControlName="repetition_penalty" [readonly]="!canEdit">
-                  <mat-hint>Penalty for repetition (1-2)</mat-hint>
-                </mat-form-field>
-              </div>
+                  <mat-form-field>
+                    <mat-label>Top K</mat-label>
+                    <input matInput type="number" formControlName="top_k" [readonly]="!canEdit">
+                  </mat-form-field>
 
-              <mat-divider></mat-divider>
+                  <mat-checkbox formControlName="do_sample" [disabled]="!canEdit">
+                    Do Sample
+                  </mat-checkbox>
+                </div>
+              </mat-expansion-panel>
 
-              <div class="fine-tune-section">
-                <mat-checkbox formControlName="use_fine_tune" [disabled]="!canEdit">
-                  Use Fine-Tuned Model
+              <div class="fine-tune-section" formGroupName="fine_tune">
+                <mat-checkbox formControlName="enabled" [disabled]="!canEdit">
+                  Enable Fine-tuning
                 </mat-checkbox>
 
-                <mat-form-field appearance="outline" class="full-width" 
-                                *ngIf="versionForm.get('llm.use_fine_tune')?.value">
-                  <mat-label>Fine-Tune ZIP URL</mat-label>
-                  <input matInput formControlName="fine_tune_zip" 
-                         placeholder="https://example.com/lora-adapter.zip"
-                         [readonly]="!canEdit">
-                  <mat-hint>URL to LoRA adapter ZIP file</mat-hint>
+                <mat-form-field class="full-width" *ngIf="versionForm.get('fine_tune.enabled')?.value">
+                  <mat-label>Adapter Path</mat-label>
+                  <input matInput formControlName="adapter_path" [readonly]="!canEdit">
+                  <mat-hint>Path to LoRA adapter</mat-hint>
                 </mat-form-field>
               </div>
             </div>
           </mat-tab>
 
           <!-- Intents Tab -->
-          <mat-tab label="Intents">
+          <mat-tab label="Intents" [matBadge]="intents.length" matBadgeColor="primary">
             <div class="tab-content">
               <div class="intents-header">
                 <h3>Intent Definitions</h3>
@@ -155,17 +165,17 @@
                 </button>
               </div>
 
-              <!-- Locale selector for examples display -->
-              <mat-form-field appearance="outline" class="locale-selector">
+              <!-- Example Language Selector -->
+              <mat-form-field class="locale-selector">
                 <mat-label>Example Language</mat-label>
                 <mat-select [(value)]="selectedExampleLocale">
-                  <mat-option *ngFor="let locale of project.supported_locales" [value]="locale">
-                    {{ locale }}
+                  <mat-option *ngFor="let locale of getAvailableLocales()" [value]="locale.code">
+                    {{ locale.name }}
                   </mat-option>
                 </mat-select>
               </mat-form-field>
 
-              <div formArrayName="intents" class="intents-list">
+              <div class="intents-list">
                 <mat-expansion-panel *ngFor="let intent of intents.controls; let i = index" 
                                      [formGroupName]="i">
                   <mat-expansion-panel-header>
@@ -201,29 +211,10 @@
                       </div>
                       
                       <div class="summary-item" *ngIf="getLocalizedExamples(intent.get('examples')?.value, selectedExampleLocale).length > 0">
-                        <strong>Examples ({{ selectedExampleLocale }}):</strong>
-                        <mat-chip-listbox>
-                          <mat-chip-option *ngFor="let example of getLocalizedExamples(intent.get('examples')?.value, selectedExampleLocale)">
-                            {{ example.example }}
-                          </mat-chip-option>
-                        </mat-chip-listbox>
-                      </div>
-
-                      <div class="summary-item" *ngIf="canEdit">
-                        <strong>Examples ({{ selectedExampleLocale }}):</strong>
+                        <strong>Examples ({{ getLocaleName(selectedExampleLocale) }}):</strong>
                         <div class="examples-display">
-                          <mat-form-field appearance="outline" class="full-width">
-                            <mat-label>Add Example</mat-label>
-                            <input matInput #exampleInput 
-                                   placeholder="Type an example and press Enter"
-                                   (keyup.enter)="addLocalizedExample(i, exampleInput.value); exampleInput.value=''"
-                                   [disabled]="!canEdit">
-                          </mat-form-field>
-                          <mat-chip-row *ngFor="let example of getLocalizedExamples(intent.get('examples')?.value, selectedExampleLocale)"
-                                        (removed)="removeLocalizedExample(i, example)"
-                                        [removable]="canEdit">
-                            {{ example.example }}
-                            <mat-icon matChipRemove *ngIf="canEdit">cancel</mat-icon>
+                          <mat-chip-row *ngFor="let ex of getLocalizedExamples(intent.get('examples')?.value, selectedExampleLocale)">
+                            {{ ex.example }}
                           </mat-chip-row>
                         </div>
                       </div>
@@ -232,9 +223,14 @@
                         <strong>Parameters:</strong>
                         <mat-list>
                           <mat-list-item *ngFor="let param of getIntentParameters(i).controls">
-                            <mat-icon matListItemIcon>{{ param.get('required')?.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
+                            <mat-icon matListItemIcon>
+                              {{ param.get('required')?.value ? 'check_box' : 'check_box_outline_blank' }}
+                            </mat-icon>
                             <div matListItemTitle>{{ param.get('name')?.value }}</div>
-                            <div matListItemLine>{{ param.get('type')?.value }} - {{ param.get('caption')?.value }}</div>
+                            <div matListItemLine>
+                              {{ getParameterCaptionDisplay(param.get('caption')?.value) }}
+                              ({{ param.get('type')?.value }})
+                            </div>
                           </mat-list-item>
                         </mat-list>
                       </div>
@@ -242,36 +238,22 @@
                   </div>
                 </mat-expansion-panel>
               </div>
-
-              <div class="empty-state" *ngIf="intents.length === 0">
-                <mat-icon>psychology</mat-icon>
-                <p>No intents defined yet.</p>
-                <button mat-raised-button color="primary" (click)="addIntent()" [disabled]="!canEdit">
-                  Add First Intent
-                </button>
-              </div>
             </div>
           </mat-tab>
 
           <!-- Test Tab -->
           <mat-tab label="Test">
             <div class="tab-content">
-              <h3>Test Intent Detection</h3>
-              <p>Enter a user message to test which intent would be detected.</p>
-
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>User Message</mat-label>
-                <textarea matInput 
-                          [(ngModel)]="testUserMessage"
-                          [ngModelOptions]="{standalone: true}"
-                          rows="3"
-                          placeholder="e.g., I want to book a flight from Istanbul to Ankara"></textarea>
+              <mat-form-field class="full-width">
+                <mat-label>Test Input</mat-label>
+                <textarea matInput [(ngModel)]="testInput" rows="3" 
+                          placeholder="Enter a message to test intent detection..."
+                          [ngModelOptions]="{standalone: true}"></textarea>
               </mat-form-field>
 
-              <button mat-raised-button color="accent" 
-                      (click)="testIntentDetection()"
-                      [disabled]="testing || !testUserMessage">
-                <mat-icon>play_arrow</mat-icon>
+              <button mat-raised-button color="primary" (click)="testIntentDetection()" 
+                      [disabled]="!testInput || testing">
+                <mat-icon>science</mat-icon>
                 {{ testing ? 'Testing...' : 'Test Intent Detection' }}
               </button>