UX: Improve toast message location (#800)

This commit is contained in:
Keegan George 2024-09-13 16:19:13 -07:00 committed by GitHub
parent 9374cd7ac1
commit b16390ae2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 85 additions and 30 deletions

View File

@ -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}}
{{#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>
<AiHelperOptionsList
@options={{this.helperOptions}}
@customPromptValue={{this.customPromptValue}}
@performAction={{this.suggestChanges}}
@shortcutVisible={{true}}
/>
</div>
{{/if}}
</template>
}

View File

@ -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",

View File

@ -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
)
);
}
}
}

View File

@ -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:"