Polish editor toolbar and AI service (#885)

ai/src/service.py

@@ -34,7 +34,7 @@ def save_interaction_endpoint() -> Response | dict[str, str]:
   else:
     metadata = None
   folder_name = generate_folder_name(prompt)
-  base_path = "../ft/goldens"
+  base_path = "ft/goldens"
   folder_path = os.path.join(base_path, folder_name)
 
   os.makedirs(folder_path, exist_ok=True)
@@ -88,6 +88,9 @@ def generate():
 
 
 def generate_folder_name(prompt: str) -> str:
+  prompt = prompt.replace(
+    " ", "_"
+  )  # Replace spaces with underscores to avoid %20
   # Generate a unique 4-character suffix to avoid naming collisions
   suffix = secrets.token_urlsafe(4)
   cleaned_prompt = urllib.parse.quote(prompt)[:50]

mesop/web/src/editor_toolbar/editor_history_dialog.ng.html

@@ -31,6 +31,7 @@ <h3 mat-dialog-title>Mesop Editor History</h3>
   </div>
 </mat-dialog-content>
 <mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
   <button
     mat-button
     [mat-dialog-close]="selectedInteraction"
@@ -39,5 +40,4 @@ <h3 mat-dialog-title>Mesop Editor History</h3>
   >
     Revert
   </button>
-  <button mat-button [mat-dialog-close]="false">Cancel</button>
 </mat-dialog-actions>

mesop/web/src/editor_toolbar/editor_response_dialog.ng.html

@@ -1,11 +1,11 @@
-<h3 mat-dialog-title>Mesop Editor Response</h3>
+<h3 mat-dialog-title>Review generated code</h3>
 <mat-dialog-content class="mat-typography">
   <mesop-code-mirror-diff
     [beforeCode]="data.response.beforeCode"
     [afterCode]="data.response.afterCode"
   />
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="true">OK</button>
-  <button mat-button [mat-dialog-close]="false" cdkFocusInitial>Cancel</button>
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Apply</button>
 </mat-dialog-actions>

mesop/web/src/editor_toolbar/editor_toolbar.ng.html

@@ -11,9 +11,6 @@
   </button>
 
   @if (!isToolbarMinimized) {
-  <div class="drag-handle" cdkDragHandle>
-    <mat-icon>drag_indicator</mat-icon>
-  </div>
 
   <button
     mat-icon-button
@@ -27,7 +24,7 @@
   <textarea
     #textarea
     disabled="{{isLoading}}"
-    placeholder="{{isLoading ? 'Generating...' : 'Type in the UI change you want...' }}"
+    placeholder="{{isLoading ? 'Generating...' : 'Type in the UI change... ' + getToolbarShortcutText() }}"
     class="floating-editor-toolbar-textarea"
     [(ngModel)]="prompt"
     (ngModelChange)="onPromptChange($event)"

mesop/web/src/editor_toolbar/editor_toolbar.scss

@@ -49,7 +49,7 @@
     color: var(--sys-on-surface-variant);
   }
   height: 30px;
-  width: min(80vw, 480px);
+  width: max(min(60vw, 480px), 180px);
   outline: none;
   resize: none;
   overflow: hidden;

mesop/web/src/editor_toolbar/editor_toolbar.ts

@@ -1,4 +1,11 @@
-import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  Inject,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {CdkDrag, CdkDragEnd} from '@angular/cdk/drag-drop';
 import {MatButtonModule} from '@angular/material/button';
@@ -112,6 +119,27 @@ export class EditorToolbar implements OnInit {
     return 'Select component - Ctrl ⇧ E';
   }
 
+  @HostListener('window:keydown', ['$event'])
+  handleKeyDown(event: KeyboardEvent) {
+    // Hotkey for focusing on editor toolbar textarea
+    //
+    // Binds:
+    // cmd + k (MacOs)
+    // ctrl + k (Other platforms)
+    if (event.key === 'k' && (isMac() ? event.metaKey : event.ctrlKey)) {
+      this.textarea.nativeElement.focus();
+      event.preventDefault();
+      return;
+    }
+  }
+
+  getToolbarShortcutText(): string {
+    if (isMac()) {
+      return '⌘ K';
+    }
+    return 'Ctrl K';
+  }
+
   isSelectingMode(): boolean {
     return this.editorService.getSelectionMode() === SelectionMode.SELECTING;
   }
@@ -202,8 +230,11 @@ export class EditorToolbar implements OnInit {
         width: '90%',
       });
       const response = await responsePromise;
+      progressDialogRef.afterClosed().subscribe(() => {
+        this.autocompleteTrigger.closePanel();
+      });
       progressDialogRef.close();
-      this.autocompleteTrigger.closePanel();
+
       const dialogRef = this.dialog.open(EditorPromptResponseDialog, {
         data: {response: response, responseTime: this.responseTime},
         width: '90%',
@@ -250,6 +281,15 @@ export class EditorToolbar implements OnInit {
       if (Number.isInteger(result)) {
         const interaction = this.editorToolbarService.getHistory()[result];
         this.editorToolbarService.commit(interaction.beforeCode);
+        this.editorToolbarService.addHistoryEntry({
+          prompt: `Revert: ${interaction.prompt}`,
+          path: interaction.path,
+          // Swap before and after code to represent the revert
+          beforeCode: interaction.afterCode,
+          afterCode: interaction.beforeCode,
+          diff: '<revert>',
+          lineNumber: undefined,
+        });
       }
     });
   }

mesop/web/src/editor_toolbar/editor_toolbar_service.ts

@@ -58,7 +58,7 @@ export class EditorToolbarService {
     }
   }
 
-  private addHistoryEntry(entry: PromptInteraction) {
+  addHistoryEntry(entry: PromptInteraction) {
     this.history.unshift(entry);
     this.saveHistoryToStorage();
   }