DEV: Move composer AI helper to toolbar (#796)

Previously we had moved the AI helper from the options menu to a selection menu that appears when selecting text in the composer. This had the benefit of making the AI helper a more discoverable feature. Now that some time has passed and the AI helper is more recognized, we will be moving it back to the composer toolbar.

This is better because:
- It consistent with other behavior and ways of accessing tools in the composer
- It has an improved mobile experience
- It reduces unnecessary code and keeps things easier to migrate when we have composer V2.
- It allows for easily triggering AI helper for all content by clicking the button instead of having to select everything.

Author: keegangeorge

assets/javascripts/discourse/components/ai-composer-helper-menu.gjs

@@ -2,46 +2,22 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
-import { modifier } from "ember-modifier";
-import { eq } from "truth-helpers";
-import DButton from "discourse/components/d-button";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
-import AiHelperButtonGroup from "../components/ai-helper-button-group";
-import AiHelperLoading from "../components/ai-helper-loading";
 import AiHelperOptionsList from "../components/ai-helper-options-list";
 import ModalDiffModal from "../components/modal/diff-modal";
 import ThumbnailSuggestion from "../components/modal/thumbnail-suggestions";
 
 export default class AiComposerHelperMenu extends Component {
   @service modal;
   @service siteSettings;
-  @service aiComposerHelper;
   @service currentUser;
-  @service capabilities;
+  @service site;
   @tracked newSelectedText;
   @tracked diff;
-  @tracked initialValue = "";
   @tracked customPromptValue = "";
-  @tracked loading = false;
-  @tracked lastUsedOption = null;
-  @tracked thumbnailSuggestions = null;
-  @tracked showThumbnailModal = false;
-  @tracked lastSelectionRange = null;
-  MENU_STATES = this.aiComposerHelper.MENU_STATES;
   prompts = [];
   promptTypes = {};
 
-  documentListeners = modifier(() => {
-    document.addEventListener("keydown", this.onKeyDown, { passive: true });
-
-    return () => {
-      document.removeEventListener("keydown", this.onKeyDown);
-    };
-  });
-
   get helperOptions() {
     let prompts = this.currentUser?.ai_helper_prompts;
 
@@ -94,260 +70,51 @@ export default class AiComposerHelperMenu extends Component {
     return prompts;
   }
 
-  get reviewButtons() {
-    return [
-      {
-        icon: "exchange-alt",
-        label: "discourse_ai.ai_helper.context_menu.view_changes",
-        action: () =>
-          this.modal.show(ModalDiffModal, {
-            model: {
-              diff: this.diff,
-              oldValue: this.initialValue,
-              newValue: this.newSelectedText,
-              revert: this.undoAiAction,
-              confirm: () => this.updateMenuState(this.MENU_STATES.resets),
-            },
-          }),
-        classes: "view-changes",
-      },
-      {
-        icon: "undo",
-        label: "discourse_ai.ai_helper.context_menu.revert",
-        action: this.undoAiAction,
-        classes: "revert",
-      },
-      {
-        icon: "check",
-        label: "discourse_ai.ai_helper.context_menu.confirm",
-        action: () => this.updateMenuState(this.MENU_STATES.resets),
-        classes: "confirm",
-      },
-    ];
-  }
-
-  get resetButtons() {
-    return [
-      {
-        icon: "undo",
-        label: "discourse_ai.ai_helper.context_menu.undo",
-        action: this.undoAiAction,
-        classes: "undo",
-      },
-      {
-        icon: "discourse-sparkles",
-        label: "discourse_ai.ai_helper.context_menu.regen",
-        action: () => this.updateSelected(this.lastUsedOption),
-        classes: "regenerate",
-      },
-    ];
-  }
-
-  get canCloseMenu() {
-    if (
-      document.activeElement ===
-      document.querySelector(".ai-custom-prompt__input")
-    ) {
-      return false;
-    }
-
-    if (this.loading && this._activeAiRequest !== null) {
-      return false;
-    }
-
-    if (this.aiComposerHelper.menuState === this.MENU_STATES.review) {
-      return false;
-    }
-
-    return true;
-  }
-
-  get isExpanded() {
-    if (this.aiComposerHelper.menuState === this.MENU_STATES.triggers) {
-      return "";
-    }
-
-    return "is-expanded";
-  }
-
-  @bind
-  onKeyDown(event) {
-    if (event.key === "Escape") {
-      return this.closeMenu();
-    }
-    if (
-      event.key === "Backspace" &&
-      this.args.data.selectedText &&
-      this.aiComposerHelper.menuState === this.MENU_STATES.triggers
-    ) {
-      return this.closeMenu();
-    }
-  }
-
-  @action
-  toggleAiHelperOptions() {
-    this.updateMenuState(this.MENU_STATES.options);
-  }
-
   @action
-  async updateSelected(option) {
-    this._toggleLoadingState(true);
-    this.lastUsedOption = option;
-    this.updateMenuState(this.MENU_STATES.loading);
-    this.initialValue = this.args.data.selectedText;
-    this.lastSelectionRange = this.args.data.selectionRange;
-
-    try {
-      this._activeAiRequest = await ajax("/discourse-ai/ai-helper/suggest", {
-        method: "POST",
-        data: {
+  suggestChanges(option) {
+    if (option.name === "illustrate_post") {
+      this.modal.show(ThumbnailSuggestion, {
+        model: {
           mode: option.id,
-          text: this.args.data.selectedText,
-          custom_prompt: this.customPromptValue,
-          force_default_locale: true,
+          selectedText: this.args.data.selectedText,
+          thumbnails: this.thumbnailSuggestions,
         },
       });
-
-      const data = await this._activeAiRequest;
-
-      // resets the values if new suggestion is started:
-      this.diff = null;
-      this.newSelectedText = null;
-      this.thumbnailSuggestions = null;
-
-      if (option.name === "illustrate_post") {
-        this._toggleLoadingState(false);
-        this.closeMenu();
-        this.thumbnailSuggestions = data.thumbnails;
-        this.modal.show(ThumbnailSuggestion, {
-          model: {
-            thumbnails: this.thumbnailSuggestions,
-          },
-        });
-      } else {
-        this._updateSuggestedByAi(data);
-      }
-    } catch (error) {
-      popupAjaxError(error);
-    } finally {
-      this._toggleLoadingState(false);
-    }
-
-    return this._activeAiRequest;
-  }
-
-  @action
-  cancelAiAction() {
-    if (this._activeAiRequest) {
-      this._activeAiRequest.abort();
-      this._activeAiRequest = null;
-      this._toggleLoadingState(false);
-      this.closeMenu();
+      return this.args.close();
     }
-  }
 
-  @action
-  updateMenuState(newState) {
-    this.aiComposerHelper.menuState = newState;
+    this.modal.show(ModalDiffModal, {
+      model: {
+        mode: option.id,
+        selectedText: this.args.data.selectedText,
+        revert: this.undoAiAction,
+        toolbarEvent: this.args.data.toolbarEvent,
+        customPromptValue: this.customPromptValue,
+      },
+    });
+    return this.args.close();
   }
 
   @action
   closeMenu() {
-    if (!this.canCloseMenu) {
-      return;
-    }
-
     this.customPromptValue = "";
-    this.updateMenuState(this.MENU_STATES.triggers);
     this.args.close();
   }
 
-  @action
-  undoAiAction() {
-    if (this.capabilities.isFirefox) {
-      // execCommand("undo") is no not supported in Firefox so we insert old text at range
-      // we also need to calculate the length diffrence between the old and new text
-      const lengthDifference =
-        this.args.data.selectedText.length - this.initialValue.length;
-      const end = this.lastSelectionRange.y - lengthDifference;
-      this._insertAt(this.lastSelectionRange.x, end, this.initialValue);
-    } else {
-      document.execCommand("undo", false, null);
-    }
-
-    // context menu is prevented from closing when in review state
-    // so we change to reset state quickly before closing
-    this.updateMenuState(this.MENU_STATES.resets);
-    this.closeMenu();
-  }
-
-  _toggleLoadingState(loading) {
-    if (loading) {
-      this.args.data.dEditorInput.classList.add("loading");
-      return (this.loading = true);
-    }
-
-    this.args.data.dEditorInput.classList.remove("loading");
-    this.loading = false;
-  }
-
-  _updateSuggestedByAi(data) {
-    this.newSelectedText = data.suggestions[0];
-
-    if (data.diff) {
-      this.diff = data.diff;
-    }
-
-    this._insertAt(
-      this.args.data.selectionRange.x,
-      this.args.data.selectionRange.y,
-      this.newSelectedText
-    );
-
-    this.updateMenuState(this.MENU_STATES.review);
-  }
-
-  _insertAt(start, end, text) {
-    this.args.data.dEditorInput.setSelectionRange(start, end);
-    this.args.data.dEditorInput.focus();
-    document.execCommand("insertText", false, text);
-  }
-
   <template>
-    <div
-      class="ai-composer-helper-menu {{this.isExpanded}}"
-      {{this.documentListeners}}
-    >
-      {{#if (eq this.aiComposerHelper.menuState this.MENU_STATES.triggers)}}
-        <ul class="ai-composer-helper-menu__triggers">
-          <li>
-            <DButton
-              @icon="discourse-sparkles"
-              @label="discourse_ai.ai_helper.context_menu.trigger"
-              @action={{this.toggleAiHelperOptions}}
-              class="btn-flat"
-            />
-          </li>
-        </ul>
-      {{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.options)}}
-        <AiHelperOptionsList
-          @options={{this.helperOptions}}
-          @customPromptValue={{this.customPromptValue}}
-          @performAction={{this.updateSelected}}
-        />
-      {{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.loading)}}
-        <AiHelperLoading @cancel={{this.cancelAiAction}} />
-      {{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.review)}}
-        <AiHelperButtonGroup
-          @buttons={{this.reviewButtons}}
-          class="ai-composer-helper-menu__review"
-        />
-      {{else if (eq this.aiComposerHelper.menuState this.MENU_STATES.resets)}}
-        <AiHelperButtonGroup
-          @buttons={{this.resetButtons}}
-          class="ai-composer-helper-menu__resets"
-        />
+    <div class="ai-composer-helper-menu">
+      {{#if this.site.mobileView}}
+        <div class="ai-composer-helper-menu__selected-text">
+          {{@data.selectedText}}
+        </div>
       {{/if}}
+
+      <AiHelperOptionsList
+        @options={{this.helperOptions}}
+        @customPromptValue={{this.customPromptValue}}
+        @performAction={{this.suggestChanges}}
+        @shortcutVisible={{true}}
+      />
     </div>
   </template>
 }

assets/javascripts/discourse/components/ai-helper-button-group.gjs

@@ -4,7 +4,6 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import DButton from "discourse/components/d-button";
 import withEventValue from "discourse/helpers/with-event-value";
-import autoFocus from "discourse/modifiers/auto-focus";
 import i18n from "discourse-common/helpers/i18n";
 import not from "truth-helpers/helpers/not";
 
@@ -29,12 +28,7 @@ export default class AiHelperCustomPrompt extends Component {
         }}
         class="ai-custom-prompt__input"
         type="text"
-        {{!-- Using {{autoFocus}} helper instead of built in autofocus="autofocus"
-            because built in autofocus doesn't work consistently when component is
-            invoked twice separetly without a page refresh.
-            (i.e. trigger in post AI helper followed by trigger in composer AI helper)
-      --}}
-        {{autoFocus}}
+        autofocus="autofocus"
       />
 
       <DButton