UX: Improve toast message location (#800)

Author: keegangeorge

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

@@ -1,8 +1,11 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
 import I18n from "discourse-i18n";
+import DToast from "float-kit/components/d-toast";
+import DToastInstance from "float-kit/lib/d-toast-instance";
 import AiHelperOptionsList from "../components/ai-helper-options-list";
 import ModalDiffModal from "../components/modal/diff-modal";
 import ThumbnailSuggestion from "../components/modal/thumbnail-suggestions";
@@ -15,9 +18,18 @@ export default class AiComposerHelperMenu extends Component {
   @tracked newSelectedText;
   @tracked diff;
   @tracked customPromptValue = "";
+  @tracked noContentError = false;
   prompts = [];
   promptTypes = {};
 
+  constructor() {
+    super(...arguments);
+
+    if (this.args.data.toolbarEvent.getText().length === 0) {
+      this.noContentError = true;
+    }
+  }
+
   get helperOptions() {
     let prompts = this.currentUser?.ai_helper_prompts;
 
@@ -70,6 +82,32 @@ export default class AiComposerHelperMenu extends Component {
     return prompts;
   }
 
+  get toast() {
+    const owner = getOwner(this);
+    const options = {
+      close: () => this.args.close(),
+      duration: 3000,
+      data: {
+        theme: "error",
+        icon: "triangle-exclamation",
+        message: I18n.t("discourse_ai.ai_helper.no_content_error"),
+      },
+    };
+
+    const custom = class CustomToastInstance extends DToastInstance {
+      constructor() {
+        super(owner, options);
+      }
+
+      @action
+      close() {
+        this.options.close();
+      }
+    };
+
+    return new custom(owner, options);
+  }
+
   @action
   suggestChanges(option) {
     if (option.name === "illustrate_post") {
@@ -102,19 +140,23 @@ export default class AiComposerHelperMenu extends Component {
   }
 
   <template>
-    <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>
+    {{#if this.noContentError}}
+      <DToast @toast={{this.toast}} />
+    {{else}}
+      <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>
+    {{/if}}
   </template>
 }

assets/javascripts/initializers/ai-helper.js

@@ -5,17 +5,6 @@ import ModalDiffModal from "../discourse/components/modal/diff-modal";
 import { showComposerAiHelper } from "../discourse/lib/show-ai-helper";
 
 function initializeAiHelperTrigger(api) {
-  const showErrorToast = () => {
-    const toasts = api.container.lookup("service:toasts");
-
-    return toasts.error({
-      duration: 3000,
-      data: {
-        message: i18n("discourse_ai.ai_helper.no_content_error"),
-      },
-    });
-  };
-
   api.onToolbarCreate((toolbar) => {
     const currentUser = api.getCurrentUser();
     const modal = api.container.lookup("service:modal");
@@ -41,7 +30,15 @@ function initializeAiHelperTrigger(api) {
       shortcut: "ALT+P",
       shortcutAction: (toolbarEvent) => {
         if (toolbarEvent.getText().length === 0) {
-          return showErrorToast();
+          const toasts = api.container.lookup("service:toasts");
+
+          return toasts.error({
+            class: "ai-proofread-error-toast",
+            duration: 3000,
+            data: {
+              message: i18n("discourse_ai.ai_helper.no_content_error"),
+            },
+          });
         }
 
         const mode = currentUser?.ai_helper_prompts.find(
@@ -64,10 +61,6 @@ function initializeAiHelperTrigger(api) {
           "context_menu"
         ),
       sendAction: (event) => {
-        if (toolbar.context.value.length === 0) {
-          return showErrorToast();
-        }
-
         const menu = api.container.lookup("service:menu");
         menu.show(document.querySelector(".ai-helper-trigger"), {
           identifier: "ai-composer-helper-menu",

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

@@ -605,3 +605,23 @@
 .mobile-view .fk-d-menu[data-identifier="ai-composer-helper-menu"] {
   z-index: z("mobile-composer");
 }
+
+.fk-d-toasts:has(.ai-proofread-error-toast) {
+  top: unset;
+  bottom: calc(var(--composer-height) - 5%);
+  right: unset;
+  left: 0;
+}
+
+@media screen and (min-width: $reply-area-max-width) {
+  .has-sidebar-page {
+    .fk-d-toasts:has(.ai-proofread-error-toast) {
+      transform: translateX(
+        calc(
+          (100vw - var(--d-max-width) - var(--d-sidebar-width) / 0.5) / 2 + 17em +
+            1rem
+        )
+      );
+    }
+  }
+}

config/locales/client.en.yml

@@ -332,7 +332,7 @@ en:
             prompt: "This post contains non-captioned images. Would you like to enable automatic AI captions on image uploads? (This can be changed in your preferences later)"
             confirm: "Enable"
             cancel: "Don't ask again"
-        no_content_error: "Please add some content to perform AI actions on."
+        no_content_error: "Add content first to perform AI actions on it"
 
       reviewables:
         model_used: "Model used:"