FEATURE: Add cancel button to loading context menu (#213)

assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs

@@ -34,7 +34,14 @@
             <span>
               {{i18n "discourse_ai.ai_helper.context_menu.loading"}}
             </span>
+            <DButton
+              @icon="times"
+              @title="discourse_ai.ai_helper.context_menu.cancel"
+              @action={{this.cancelAIAction}}
+              class="btn-flat cancel-request"
+            />
           </li>
+
         </ul>
 
       {{else if (eq this.menuState this.CONTEXT_MENU_STATES.review)}}

assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js

@@ -60,6 +60,7 @@ export default class AiHelperContextMenu extends Component {
   @tracked _popper;
   @tracked _dEditorInput;
   @tracked _contextMenu;
+  @tracked _activeAIRequest = null;
 
   constructor() {
     super(...arguments);
@@ -168,7 +169,7 @@ export default class AiHelperContextMenu extends Component {
   }
 
   get canCloseContextMenu() {
-    if (this.loading) {
+    if (this.loading && this._activeAIRequest !== null) {
       return false;
     }
 
@@ -205,6 +206,16 @@ export default class AiHelperContextMenu extends Component {
     this.menuState = this.CONTEXT_MENU_STATES.review;
   }
 
+  _toggleLoadingState(loading) {
+    if (loading) {
+      this._dEditorInput.classList.add("loading");
+      return (this.loading = true);
+    }
+
+    this._dEditorInput.classList.remove("loading");
+    return (this.loading = false);
+  }
+
   handleBoundaries() {
     const textAreaWrapper = document
       .querySelector(".d-editor-textarea-wrapper")
@@ -302,15 +313,16 @@ export default class AiHelperContextMenu extends Component {
 
   @action
   async updateSelected(option) {
-    this.loading = true;
+    this._toggleLoadingState(true);
     this.lastUsedOption = option;
-    this._dEditorInput.classList.add("loading");
     this.menuState = this.CONTEXT_MENU_STATES.loading;
 
-    return ajax("/discourse-ai/ai-helper/suggest", {
+    this._activeAIRequest = ajax("/discourse-ai/ai-helper/suggest", {
       method: "POST",
       data: { mode: option, text: this.selectedText },
-    })
+    });
+
+    this._activeAIRequest
       .then((data) => {
         // resets the values if new suggestion is started:
         this.diff = null;
@@ -319,9 +331,10 @@ export default class AiHelperContextMenu extends Component {
       })
       .catch(popupAjaxError)
       .finally(() => {
-        this.loading = false;
+        this._toggleLoadingState(false);
-        this._dEditorInput.classList.remove("loading");
       });
+
+    return this._activeAIRequest;
   }
 
   @action
@@ -333,4 +346,14 @@ export default class AiHelperContextMenu extends Component {
   confirmChanges() {
     this.menuState = this.CONTEXT_MENU_STATES.resets;
   }
+
+  @action
+  cancelAIAction() {
+    if (this._activeAIRequest) {
+      this._activeAIRequest.abort();
+      this._activeAIRequest = null;
+      this._toggleLoadingState(false);
+      this.closeContextMenu();
+    }
+  }
 }

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -90,6 +90,10 @@
       justify-content: flex-start;
       align-items: center;
     }
+
+    .btn {
+      width: unset;
+    }
   }
 
   &__resets {