DEV: Add suggestion buttons to edit topic area

Requires new outlets

Author: keegangeorge

assets/javascripts/discourse/components/suggestion-menus/ai-category-suggester.gjs

@@ -19,10 +19,26 @@ export default class AiCategorySuggester extends Component {
   @tracked suggestions = null;
   @tracked untriggers = [];
   @tracked triggerIcon = "discourse-sparkles";
+  @tracked content = null;
+  @tracked topicContent = null;
+
+  constructor() {
+    super(...arguments);
+    if (!this.topicContent && this.args.composer?.reply === undefined) {
+      this.fetchTopicContent();
+    }
+  }
+
+  async fetchTopicContent() {
+    await ajax(`/t/${this.args.buffered.content.id}.json`).then(({post_stream}) => {
+      this.topicContent = post_stream.posts[0].cooked;
+    });
+  }
 
   get showSuggestionButton() {
     const composerFields = document.querySelector(".composer-fields");
-    const showTrigger = this.args.composer.reply?.length > MIN_CHARACTER_COUNT;
+    this.content = this.args.composer?.reply || this.topicContent;
+    const showTrigger = this.content?.length > MIN_CHARACTER_COUNT;
 
     if (composerFields) {
       if (showTrigger) {
@@ -49,7 +65,7 @@ export default class AiCategorySuggester extends Component {
         "/discourse-ai/ai-helper/suggest_category",
         {
           method: "POST",
-          data: { text: this.args.composer.reply },
+          data: { text: this.content },
         }
       );
       this.suggestions = assistant;
@@ -66,12 +82,17 @@ export default class AiCategorySuggester extends Component {
   @action
   applySuggestion(suggestion) {
     const composer = this.args.composer;
-    if (!composer) {
-      return;
+    const buffered = this.args.buffered;
+    
+    if (composer) {
+      composer.set("categoryId", suggestion.id);
+    }
+
+    if (buffered) {
+      this.args.buffered.set("category_id", suggestion.id);
     }
 
-    composer.set("categoryId", suggestion.id);
-    this.dMenu.close();
+    return this.dMenu.close();
   }
 
   @action

assets/javascripts/discourse/components/suggestion-menus/ai-tag-suggester.gjs

@@ -20,10 +20,26 @@ export default class AiTagSuggester extends Component {
   @tracked suggestions = null;
   @tracked untriggers = [];
   @tracked triggerIcon = "discourse-sparkles";
+  @tracked content = null;
+  @tracked topicContent = null;
+
+  constructor() {
+    super(...arguments);
+    if (!this.topicContent && this.args.composer?.reply === undefined) {
+      this.fetchTopicContent();
+    }
+  }
+
+  async fetchTopicContent() {
+    await ajax(`/t/${this.args.buffered.content.id}.json`).then(({post_stream}) => {
+      this.topicContent = post_stream.posts[0].cooked;
+    });
+  }
 
   get showSuggestionButton() {
     const composerFields = document.querySelector(".composer-fields");
-    const showTrigger = this.args.composer.reply?.length > MIN_CHARACTER_COUNT;
+    this.content = this.args.composer?.reply || this.topicContent;
+    const showTrigger = this.content?.length > MIN_CHARACTER_COUNT;
 
     if (composerFields) {
       if (showTrigger) {
@@ -59,13 +75,13 @@ export default class AiTagSuggester extends Component {
     try {
       const { assistant } = await ajax("/discourse-ai/ai-helper/suggest_tags", {
         method: "POST",
-        data: { text: this.args.composer.reply },
+        data: { text: this.content},
       });
       this.suggestions = assistant;
-
+      const model = this.args.composer ? this.args.composer : this.args.buffered;
       if (this.#tagSelectorHasValues()) {
         this.suggestions = this.suggestions.filter(
-          (s) => !this.args.composer.tags.includes(s.name)
+          (s) => !mode.get("tags").includes(s.name)
         );
       }
 
@@ -104,19 +120,19 @@ export default class AiTagSuggester extends Component {
   @action
   applySuggestion(suggestion) {
     const maxTags = this.siteSettings.max_tags_per_topic;
-    const composer = this.args.composer;
-    if (!composer) {
+    const model = this.args.composer ? this.args.composer : this.args.buffered;
+    if (!model) {
       return;
     }
 
-    if (!composer.tags) {
-      composer.set("tags", [suggestion.name]);
+    const tags = model.get("tags");
+
+    if (!tags) {
+      model.set("tags", [suggestion.name]);
       this.#removedAppliedTag(suggestion);
       return;
     }
 
-    const tags = composer.tags;
-
     if (tags?.length >= maxTags) {
       return this.toasts.error({
         class: "ai-suggestion-error",
@@ -130,7 +146,7 @@ export default class AiTagSuggester extends Component {
     }
 
     tags.push(suggestion.name);
-    composer.set("tags", [...tags]);
+    model.set("tags", [...tags]);
     suggestion.disabled = true;
     this.#removedAppliedTag(suggestion);
   }

assets/javascripts/discourse/components/suggestion-menus/ai-title-suggester.gjs

@@ -16,10 +16,29 @@ export default class AiTitleSuggester extends Component {
   @tracked suggestions = null;
   @tracked untriggers = [];
   @tracked triggerIcon = "discourse-sparkles";
+  @tracked content = null;
+  @tracked topicContent = null;
+
+  constructor() {
+    super(...arguments);
+
+    if (!this.topicContent && this.args.composer?.reply === undefined) {
+      this.fetchTopicContent();
+    }
+  }
+
+  async fetchTopicContent() {
+    await ajax(`/t/${this.args.buffered.content.id}.json`).then(({post_stream}) => {
+      this.topicContent = post_stream.posts[0].cooked;
+    });
+  }
 
   get showSuggestionButton() {
     const composerFields = document.querySelector(".composer-fields");
-    const showTrigger = this.args.composer.reply?.length > MIN_CHARACTER_COUNT;
+    const editTopicTitleField = document.querySelector(".edit-topic-title");
+
+    this.content = this.args.composer?.reply || this.topicContent;
+    const showTrigger = this.content?.length > MIN_CHARACTER_COUNT;
 
     if (composerFields) {
       if (showTrigger) {
@@ -29,6 +48,14 @@ export default class AiTitleSuggester extends Component {
       }
     }
 
+    if (editTopicTitleField) {
+      if (showTrigger) {
+        editTopicTitleField.classList.add("showing-ai-suggestions");
+      } else {
+        editTopicTitleField.classList.remove("showing-ai-suggestions");
+      }
+    }
+
     return showTrigger;
   }
 
@@ -46,7 +73,7 @@ export default class AiTitleSuggester extends Component {
         "/discourse-ai/ai-helper/suggest_title",
         {
           method: "POST",
-          data: { text: this.args.composer.reply },
+          data: { text: this.content },
         }
       );
       this.suggestions = suggestions;
@@ -62,12 +89,12 @@ export default class AiTitleSuggester extends Component {
 
   @action
   applySuggestion(suggestion) {
-    const composer = this.args.composer;
-    if (!composer) {
+    const model = this.args.composer ? this.args.composer : this.args.buffered;
+    if (!model) {
       return;
     }
 
-    composer.set("title", suggestion);
+    model.set("title", suggestion);
     this.dMenu.close();
   }
 

assets/javascripts/discourse/connectors/edit-topic-category__after/ai-category-suggestion.gjs

@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import AiCategorySuggester from "../../components/suggestion-menus/ai-category-suggester";
+import { showComposerAiHelper } from "../../lib/show-ai-helper";
+
+export default class AiCategorySuggestion extends Component {
+  static shouldRender(outletArgs, helper) {
+    return showComposerAiHelper(
+      outletArgs?.composer,
+      helper.siteSettings,
+      helper.currentUser,
+      "suggestions"
+    );
+  }
+
+  <template>
+    <AiCategorySuggester
+      @buffered={{@outletArgs.buffered}}
+    />
+  </template>
+}

assets/javascripts/discourse/connectors/edit-topic-tags__after/ai-tag-suggestion.gjs

@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import AiTagSuggester from "../../components/suggestion-menus/ai-tag-suggester";
+import { showComposerAiHelper } from "../../lib/show-ai-helper";
+
+export default class AiCategorySuggestion extends Component {
+  static shouldRender(outletArgs, helper) {
+    return showComposerAiHelper(
+      outletArgs?.composer,
+      helper.siteSettings,
+      helper.currentUser,
+      "suggestions"
+    );
+  }
+
+  <template>
+    <AiTagSuggester
+      @buffered={{@outletArgs.buffered}}
+    />
+  </template>
+}

assets/javascripts/discourse/connectors/edit-topic-title__after/ai-title-suggestion.gjs

@@ -0,0 +1,18 @@
+import Component from "@glimmer/component";
+import AiTitleSuggester from "../../components/suggestion-menus/ai-title-suggester";
+import { showComposerAiHelper } from "../../lib/show-ai-helper";
+
+export default class AiTitleSuggestion extends Component {
+  static shouldRender(outletArgs, helper) {
+    return showComposerAiHelper(
+      outletArgs?.composer,
+      helper.siteSettings,
+      helper.currentUser,
+      "suggestions"
+    );
+  }
+
+  <template>
+    <AiTitleSuggester @buffered={{@outletArgs.buffered}} />
+  </template>
+}

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

@@ -257,6 +257,23 @@
   }
 }
 
+.edit-topic-title {
+  .suggestion-button {
+    margin: 0;
+    padding: 0.45rem;
+  }
+}
+
+#topic-title .edit-topic-title.showing-ai-suggestions {
+  #edit-title {
+    flex: 1 1 90%;
+  }
+
+  .suggest-titles-button {
+    padding: 0.5rem;
+  }
+}
+
 // Prevent suggestion button from wrapping
 #reply-control {
   .with-category .showing-ai-suggestions .category-input {