UX: Improve toast message location (#800)
This commit is contained in:
parent
9374cd7ac1
commit
b16390ae2a
|
@ -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,6 +140,9 @@ export default class AiComposerHelperMenu extends Component {
|
|||
}
|
||||
|
||||
<template>
|
||||
{{#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">
|
||||
|
@ -116,5 +157,6 @@ export default class AiComposerHelperMenu extends Component {
|
|||
@shortcutVisible={{true}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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:"
|
||||
|
|
Loading…
Reference in New Issue