diff --git a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs
index 086429bf..27a45d13 100644
--- a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs
+++ b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs
@@ -34,7 +34,14 @@
{{i18n "discourse_ai.ai_helper.context_menu.loading"}}
+
+
{{else if (eq this.menuState this.CONTEXT_MENU_STATES.review)}}
diff --git a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js
index ed9bfa1d..282da4aa 100644
--- a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js
+++ b/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._dEditorInput.classList.remove("loading");
+ this._toggleLoadingState(false);
});
+
+ 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();
+ }
+ }
}
diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
index 9a9e083e..b4f25386 100644
--- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
+++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -90,6 +90,10 @@
justify-content: flex-start;
align-items: center;
}
+
+ .btn {
+ width: unset;
+ }
}
&__resets {