discourse-ai/assets/javascripts/discourse/components/ai-gist-toggle.gjs

85 lines
2.2 KiB
Plaintext

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