UX: convert AI gist disclosure to a toggle (#878)
This commit is contained in:
parent
e7a66b0789
commit
05790a6a40
|
@ -1,23 +0,0 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { service } from "@ember/service";
|
||||
import icon from "discourse-common/helpers/d-icon";
|
||||
import i18n from "discourse-common/helpers/i18n";
|
||||
|
||||
export default class AiGistDisclosure extends Component {
|
||||
@service router;
|
||||
|
||||
get shouldShow() {
|
||||
return this.router.currentRoute.attributes?.list?.topics?.some(
|
||||
(topic) => topic.ai_topic_gist
|
||||
);
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.shouldShow}}
|
||||
<span class="ai-topic-gist__disclosure">
|
||||
{{icon "discourse-sparkles"}}
|
||||
{{i18n "discourse_ai.summarization.disclosure"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
|
@ -0,0 +1,84 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { concat, fn } from "@ember/helper";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import DropdownMenu from "discourse/components/dropdown-menu";
|
||||
import icon from "discourse-common/helpers/d-icon";
|
||||
import i18n from "discourse-common/helpers/i18n";
|
||||
import DMenu from "float-kit/components/d-menu";
|
||||
|
||||
export default class AiGistToggle extends Component {
|
||||
@service router;
|
||||
@service gistPreference;
|
||||
|
||||
get shouldShow() {
|
||||
return this.router.currentRoute.attributes?.list?.topics?.some(
|
||||
(topic) => topic.ai_topic_gist
|
||||
);
|
||||
}
|
||||
|
||||
get buttons() {
|
||||
return [
|
||||
{
|
||||
id: "gists_enabled",
|
||||
label: "discourse_ai.summarization.gists_enabled_long",
|
||||
icon: "discourse-sparkles",
|
||||
},
|
||||
{
|
||||
id: "gists_disabled",
|
||||
label: "discourse_ai.summarization.gists_disabled",
|
||||
icon: "far-eye-slash",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@action
|
||||
onRegisterApi(api) {
|
||||
this.dMenu = api;
|
||||
}
|
||||
|
||||
@action
|
||||
onSelect(optionId) {
|
||||
this.gistPreference.setPreference(optionId);
|
||||
this.dMenu.close();
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.shouldShow}}
|
||||
|
||||
<DMenu
|
||||
@modalForMobile={{true}}
|
||||
@autofocus={{true}}
|
||||
@identifier="ai-gists-dropdown"
|
||||
@onRegisterApi={{this.onRegisterApi}}
|
||||
@triggerClass="btn-transparent"
|
||||
>
|
||||
<:trigger>
|
||||
<span class="d-button-label">
|
||||
{{i18n
|
||||
(concat
|
||||
"discourse_ai.summarization." this.gistPreference.preference
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
{{icon "angle-down"}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
<DropdownMenu as |dropdown|>
|
||||
{{#each this.buttons as |button|}}
|
||||
<dropdown.item>
|
||||
<DButton
|
||||
@label={{button.label}}
|
||||
@icon={{button.icon}}
|
||||
class="btn-transparent"
|
||||
@action={{fn this.onSelect button.id}}
|
||||
/>
|
||||
</dropdown.item>
|
||||
{{/each}}
|
||||
</DropdownMenu>
|
||||
</:content>
|
||||
</DMenu>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
|
@ -3,11 +3,18 @@ import { service } from "@ember/service";
|
|||
|
||||
export default class AiTopicGist extends Component {
|
||||
@service router;
|
||||
@service gistPreference;
|
||||
|
||||
get prefersGist() {
|
||||
return this.gistPreference.preference === "gists_enabled";
|
||||
}
|
||||
|
||||
get showGist() {
|
||||
return (
|
||||
this.router.currentRoute.attributes?.filterType === "hot" &&
|
||||
this.args.topic?.ai_topic_gist &&
|
||||
!this.args.topic?.excerpt &&
|
||||
this.prefersGist &&
|
||||
!this.args.topic?.excerpt
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import Component from "@glimmer/component";
|
||||
import AiGistDisclosure from "../../components/ai-gist-disclosure";
|
||||
import AiGistToggle from "../../components/ai-gist-toggle";
|
||||
|
||||
export default class AiTopicGistDisclosure extends Component {
|
||||
export default class AiTopicGistToggle extends Component {
|
||||
static shouldRender(outletArgs, helper) {
|
||||
const isMobileView = helper.site.mobileView;
|
||||
return isMobileView;
|
||||
}
|
||||
|
||||
<template>
|
||||
<AiGistDisclosure />
|
||||
<AiGistToggle />
|
||||
</template>
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
import Component from "@glimmer/component";
|
||||
import AiGistDisclosure from "../../components/ai-gist-disclosure";
|
||||
import AiGistToggle from "../../components/ai-gist-toggle";
|
||||
|
||||
export default class AiTopicGist extends Component {
|
||||
static shouldRender(outletArgs) {
|
||||
|
@ -11,6 +11,6 @@ export default class AiTopicGist extends Component {
|
|||
}
|
||||
|
||||
<template>
|
||||
<AiGistDisclosure />
|
||||
<AiGistToggle />
|
||||
</template>
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import { tracked } from "@glimmer/tracking";
|
||||
import Service from "@ember/service";
|
||||
|
||||
export default class GistPreference extends Service {
|
||||
@tracked
|
||||
preference = localStorage.getItem("aiGistPreference") || "gists_disabled";
|
||||
|
||||
setPreference(value) {
|
||||
this.preference = value;
|
||||
localStorage.setItem("aiGistPreference", value);
|
||||
}
|
||||
}
|
|
@ -238,22 +238,18 @@
|
|||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__disclosure {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-600);
|
||||
.desktop-view & {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.mobile-view & {
|
||||
display: block;
|
||||
margin-top: -0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.d-icon {
|
||||
font-size: var(--font-down-1);
|
||||
position: relative;
|
||||
top: -0.05em; // improve vertical alignment
|
||||
}
|
||||
.ai-gists-dropdown-trigger {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-medium);
|
||||
padding-left: 0.25em;
|
||||
.mobile-view & {
|
||||
padding-left: 0;
|
||||
color: var(--primary-high);
|
||||
}
|
||||
.d-icon {
|
||||
color: var(--primary-low-mid);
|
||||
margin-left: 0.15em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -465,7 +465,9 @@ en:
|
|||
topic:
|
||||
title: "Topic summary"
|
||||
close: "Close summary panel"
|
||||
disclosure: "Summaries generated by AI"
|
||||
gists_enabled: "with summary"
|
||||
gists_enabled_long: "with AI-generated summary"
|
||||
gists_disabled: "without summary"
|
||||
review:
|
||||
types:
|
||||
reviewable_ai_post:
|
||||
|
|
Loading…
Reference in New Issue