UX: convert AI gist disclosure to a toggle (#878)

This commit is contained in:
Kris 2024-10-29 11:59:41 -04:00 committed by GitHub
parent e7a66b0789
commit 05790a6a40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 123 additions and 45 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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