UX: Show suggestion buttons only if sufficient content is present (#204)

assets/javascripts/discourse/components/ai-suggestion-dropdown.gjs

@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import DButton from "discourse/components/d-button";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
@@ -8,17 +7,21 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { bind } from "discourse-common/utils/decorators";
 import { inject as service } from "@ember/service";
 import I18n from "I18n";
+import DButton from "discourse/components/d-button";
 
 export default class AISuggestionDropdown extends Component {
   <template>
-    <DButton
-      @class="suggestion-button {{if this.loading 'is-loading'}}"
-      @icon={{this.suggestIcon}}
-      @title="discourse_ai.ai_helper.suggest"
-      @action={{this.performSuggestion}}
-      @disabled={{this.disableSuggestionButton}}
-      ...attributes
-    />
+    {{#if this.showAIButton}}
+      <DButton
+        @class="suggestion-button {{if this.loading 'is-loading'}}"
+        @icon={{this.suggestIcon}}
+        @title="discourse_ai.ai_helper.suggest"
+        @action={{this.performSuggestion}}
+        @disabled={{this.disableSuggestionButton}}
+        ...attributes
+      />
+    {{/if}}
+
     {{#if this.showMenu}}
       {{! template-lint-disable modifier-name-case }}
       <ul class="popup-menu ai-suggestions-menu" {{didInsert this.handleClickOutside}}>
@@ -42,6 +45,7 @@ export default class AISuggestionDropdown extends Component {
   @service dialog;
   @service site;
   @service siteSettings;
+  @service composer;
   @tracked loading = false;
   @tracked showMenu = false;
   @tracked generatedSuggestions = [];
@@ -59,21 +63,15 @@ export default class AISuggestionDropdown extends Component {
     document.removeEventListener("click", this.onClickOutside);
   }
 
-  get composerInput() {
-    return document.querySelector(".d-editor-input")?.value || this.args.composer.reply;
+  get showAIButton() {
+    const minCharacterCount = 40;
+    return this.composer.model.replyLength > minCharacterCount;
   }
 
   get disableSuggestionButton() {
     return this.loading;
   }
 
-  closeMenu() {
-    this.suggestIcon = "discourse-sparkles";
-    this.showMenu = false;
-    this.showErrors = false;
-    this.errors = "";
-  }
-
   @bind
   onClickOutside(event) {
     const menu = document.querySelector(".ai-title-suggestions-menu");
@@ -82,7 +80,7 @@ export default class AISuggestionDropdown extends Component {
       return;
     }
 
-    return this.closeMenu();
+    return this.#closeMenu();
   }
 
   @action
@@ -104,21 +102,53 @@ export default class AISuggestionDropdown extends Component {
 
     if (this.args.mode === this.SUGGESTION_TYPES.title) {
       composer.set("title", suggestion);
-      return this.closeMenu();
+      return this.#closeMenu();
     }
 
     if (this.args.mode === this.SUGGESTION_TYPES.category) {
     const selectedCategoryId = this.site.categories.find((c) => c.slug === suggestion).id;
     composer.set("categoryId", selectedCategoryId);
-    return this.closeMenu();
+    return this.#closeMenu();
     }
 
     if (this.args.mode === this.SUGGESTION_TYPES.tag) {
-      this.updateTags(suggestion, composer);
+      this.#updateTags(suggestion, composer);
     }
   }
 
-  updateTags(suggestion, composer) {
+  @action
+  async performSuggestion() {
+    if (!this.args.mode) {
+      return;
+    }
+
+    if (this.composer.model.replyLength === 0) {
+      return this.dialog.alert(I18n.t("discourse_ai.ai_helper.missing_content"));
+    }
+
+    this.loading = true;
+    this.suggestIcon = "spinner";
+
+    return ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
+      method: "POST",
+      data: { text: this.composer.model.reply },
+    }).then((data) => {
+      this.#assignGeneratedSuggestions(data, this.args.mode);
+    }).catch(popupAjaxError).finally(() => {
+      this.loading = false;
+      this.suggestIcon = "sync-alt";
+      this.showMenu = true;
+    });
+  }
+
+  #closeMenu() {
+    this.suggestIcon = "discourse-sparkles";
+    this.showMenu = false;
+    this.showErrors = false;
+    this.errors = "";
+  }
+
+  #updateTags(suggestion, composer) {
     const maxTags = this.siteSettings.max_tags_per_topic;
 
     if (!composer.tags) {
@@ -142,43 +172,26 @@ export default class AISuggestionDropdown extends Component {
     return this.generatedSuggestions = this.generatedSuggestions.filter((s) => s !== suggestion);
   }
 
-  @action
-  async performSuggestion() {
-    if (!this.args.mode) {
-      return;
+  #tagSelectorHasValues() {
+    return this.args.composer?.tags && this.args.composer?.tags.length > 0;
+  }
+
+  #assignGeneratedSuggestions(data, mode) {
+    if (mode === this.SUGGESTION_TYPES.title) {
+      return this.generatedSuggestions = data.suggestions;
     }
 
-    if (this.composerInput?.length === 0) {
-      return this.dialog.alert(I18n.t("discourse_ai.ai_helper.missing_content"));
-    }
+    const suggestions = data.assistant.map((s) => s.name);
 
-    this.loading = true;
-    this.suggestIcon = "spinner";
-
-    return ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
-      method: "POST",
-      data: { text: this.composerInput },
-    }).then((data) => {
-      if (this.args.mode === this.SUGGESTION_TYPES.title) {
-        this.generatedSuggestions = data.suggestions;
+    if (mode === this.SUGGESTION_TYPES.tag) {
+      if (this.#tagSelectorHasValues()) {
+        // Filter out tags if they are already selected in the tag input
+        return this.generatedSuggestions = suggestions.filter((t) => !this.args.composer.tags.includes(t));
       } else {
-        const suggestions = data.assistant.map((s) => s.name);
-        if (this.SUGGESTION_TYPES.tag) {
-          if (this.args.composer?.tags && this.args.composer?.tags.length > 0) {
-            // Filter out tags if they are already selected in the tag input
-            this.generatedSuggestions = suggestions.filter((t) => !this.args.composer.tags.includes(t));
-          } else {
-            this.generatedSuggestions = suggestions;
-          }
-        } else {
-          this.generatedSuggestions = suggestions;
-        }
+        return this.generatedSuggestions = suggestions;
       }
-    }).catch(popupAjaxError).finally(() => {
-      this.loading = false;
-      this.suggestIcon = "sync-alt";
-      this.showMenu = true;
-    });
+    }
 
+    return this.generatedSuggestions = suggestions;
   }
 }

spec/system/ai_helper/ai_composer_helper_spec.rb

@@ -339,6 +339,17 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
 
       expect(ai_suggestion_dropdown).to have_no_dropdown
     end
+
+    it "only shows trigger button if there is sufficient content in the composer" do
+      visit("/latest")
+      page.find("#create-topic").click
+      composer.fill_content("abc")
+
+      expect(ai_suggestion_dropdown).to have_no_suggestion_button
+
+      composer.fill_content(OpenAiCompletionsInferenceStubs.translated_response)
+      expect(ai_suggestion_dropdown).to have_suggestion_button
+    end
   end
 
   context "when suggesting the category with AI category suggester" do

spec/system/page_objects/components/ai_suggestion_dropdown.rb

@@ -3,13 +3,14 @@
 module PageObjects
   module Components
     class AISuggestionDropdown < PageObjects::Components::Base
-      TITLE_BUTTON_SELECTOR = ".suggestion-button.suggest-titles-button"
-      CATEGORY_BUTTON_SELECTOR = ".suggestion-button.suggest-category-button"
-      TAG_BUTTON_SELECTOR = ".suggestion-button.suggest-tags-button"
+      SUGGESTION_BUTTON_SELECTOR = ".suggestion-button"
+      TITLE_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-titles-button"
+      CATEGORY_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-category-button"
+      TAG_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-tags-button"
       MENU_SELECTOR = ".ai-suggestions-menu"
 
       def click_suggest_titles_button
-        find(TITLE_BUTTON_SELECTOR, visible: :all).click
+        page.find(TITLE_BUTTON_SELECTOR, visible: :all).click
       end
 
       def click_suggest_category_button
@@ -40,6 +41,14 @@ module PageObjects
       def has_no_dropdown?
         has_no_css?(MENU_SELECTOR)
       end
+
+      def has_suggestion_button?
+        has_css?(SUGGESTION_BUTTON_SELECTOR)
+      end
+
+      def has_no_suggestion_button?
+        has_no_css?(SUGGESTION_BUTTON_SELECTOR)
+      end
     end
   end
 end