From b16390ae2acf4285bb6384491dd09ec988feea4d Mon Sep 17 00:00:00 2001 From: Keegan George Date: Fri, 13 Sep 2024 16:19:13 -0700 Subject: [PATCH] UX: Improve toast message location (#800) --- .../components/ai-composer-helper-menu.gjs | 68 +++++++++++++++---- assets/javascripts/initializers/ai-helper.js | 25 +++---- .../modules/ai-helper/common/ai-helper.scss | 20 ++++++ config/locales/client.en.yml | 2 +- 4 files changed, 85 insertions(+), 30 deletions(-) diff --git a/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs b/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs index 4806ed8e..fa1b6761 100644 --- a/assets/javascripts/discourse/components/ai-composer-helper-menu.gjs +++ b/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 { } } diff --git a/assets/javascripts/initializers/ai-helper.js b/assets/javascripts/initializers/ai-helper.js index 74c5c7da..2b4caf2b 100644 --- a/assets/javascripts/initializers/ai-helper.js +++ b/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", diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss index c29a69f0..9261005f 100644 --- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss +++ b/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 + ) + ); + } + } +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 4efcebc9..3d7cad56 100644 --- a/config/locales/client.en.yml +++ b/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:"