UX: Use `DMenu` for topic summarization (#724)
This commit is contained in:
Jan Cernik
GitHub
parent
5c196bca89
commit
d9dad56c6a
|
|
@ -13,41 +13,23 @@ import dIcon from "discourse-common/helpers/d-icon";
|
|||
import i18n from "discourse-common/helpers/i18n";
|
||||
import { bind } from "discourse-common/utils/decorators";
|
||||
import I18n from "discourse-i18n";
|
||||
import DMenu from "float-kit/components/d-menu";
|
||||
import DTooltip from "float-kit/components/d-tooltip";
|
||||
import and from "truth-helpers/helpers/and";
|
||||
import not from "truth-helpers/helpers/not";
|
||||
import or from "truth-helpers/helpers/or";
|
||||
import AiSummarySkeleton from "../../components/ai-summary-skeleton";
|
||||
|
||||
export default class AiSummaryBox extends Component {
|
||||
@service siteSettings;
|
||||
@service messageBus;
|
||||
@service currentUser;
|
||||
@tracked summary = "";
|
||||
|
||||
@tracked text = "";
|
||||
@tracked summarizedOn = null;
|
||||
@tracked summarizedBy = null;
|
||||
@tracked newPostsSinceSummary = null;
|
||||
@tracked outdated = false;
|
||||
@tracked canRegenerate = false;
|
||||
@tracked regenerated = false;
|
||||
|
||||
@tracked showSummaryBox = false;
|
||||
@tracked canCollapseSummary = false;
|
||||
@tracked loading = false;
|
||||
|
||||
get generateSummaryTitle() {
|
||||
const title = this.canRegenerate
|
||||
? "summary.buttons.regenerate"
|
||||
: "summary.buttons.generate";
|
||||
|
||||
return I18n.t(title);
|
||||
}
|
||||
|
||||
get generateSummaryIcon() {
|
||||
return this.canRegenerate ? "sync" : "discourse-sparkles";
|
||||
}
|
||||
|
||||
get outdatedSummaryWarningText() {
|
||||
let outdatedText = I18n.t("summary.outdated");
|
||||
|
||||
|
|
@ -65,40 +47,12 @@ export default class AiSummaryBox extends Component {
|
|||
return this.args.outletArgs.postStream.summary;
|
||||
}
|
||||
|
||||
@action
|
||||
collapse() {
|
||||
this.showSummaryBox = false;
|
||||
this.canCollapseSummary = false;
|
||||
get topicId() {
|
||||
return this.args.outletArgs.topic.id;
|
||||
}
|
||||
|
||||
@action
|
||||
generateSummary() {
|
||||
const topicId = this.args.outletArgs.topic.id;
|
||||
this.showSummaryBox = true;
|
||||
|
||||
if (this.text && !this.canRegenerate) {
|
||||
this.canCollapseSummary = false;
|
||||
return;
|
||||
}
|
||||
|
||||
let fetchURL = `/discourse-ai/summarization/t/${topicId}?`;
|
||||
|
||||
if (this.currentUser) {
|
||||
fetchURL += `stream=true`;
|
||||
|
||||
if (this.canRegenerate) {
|
||||
fetchURL += "&skip_age_check=true";
|
||||
}
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
return ajax(fetchURL).then((data) => {
|
||||
if (!this.currentUser) {
|
||||
data.done = true;
|
||||
this._updateSummary(data);
|
||||
}
|
||||
});
|
||||
get baseSummarizationURL() {
|
||||
return `/discourse-ai/summarization/t/${this.topicId}`;
|
||||
}
|
||||
|
||||
@bind
|
||||
|
|
@ -115,6 +69,49 @@ export default class AiSummaryBox extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
@action
|
||||
generateSummary() {
|
||||
let fetchURL = this.baseSummarizationURL;
|
||||
|
||||
if (this.currentUser) {
|
||||
fetchURL += `?stream=true`;
|
||||
}
|
||||
|
||||
return this._requestSummary(fetchURL);
|
||||
}
|
||||
|
||||
@action
|
||||
regenerateSummary() {
|
||||
let fetchURL = this.baseSummarizationURL;
|
||||
|
||||
if (this.currentUser) {
|
||||
fetchURL += `?stream=true`;
|
||||
|
||||
if (this.canRegenerate) {
|
||||
fetchURL += "&skip_age_check=true";
|
||||
}
|
||||
}
|
||||
|
||||
return this._requestSummary(fetchURL);
|
||||
}
|
||||
|
||||
@action
|
||||
_requestSummary(url) {
|
||||
if (this.loading || (this.text && !this.canRegenerate)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.summarizedOn = null;
|
||||
|
||||
return ajax(url).then((data) => {
|
||||
if (!this.currentUser) {
|
||||
data.done = true;
|
||||
this._updateSummary(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@bind
|
||||
_updateSummary(update) {
|
||||
const topicSummary = update.ai_topic_summary;
|
||||
|
|
@ -138,69 +135,71 @@ export default class AiSummaryBox extends Component {
|
|||
}
|
||||
|
||||
<template>
|
||||
{{#if (or @outletArgs.topic.has_summary @outletArgs.topic.summarizable)}}
|
||||
<div class="summarization-buttons">
|
||||
{{#if @outletArgs.topic.summarizable}}
|
||||
{{#if this.showSummaryBox}}
|
||||
<DButton
|
||||
@action={{this.collapse}}
|
||||
@title="summary.buttons.hide"
|
||||
@label="summary.buttons.hide"
|
||||
@icon="chevron-up"
|
||||
class="btn-primary ai-topic-summarization"
|
||||
/>
|
||||
{{else}}
|
||||
<DButton
|
||||
@action={{this.generateSummary}}
|
||||
@translatedLabel={{this.generateSummaryTitle}}
|
||||
@translatedTitle={{this.generateSummaryTitle}}
|
||||
@icon={{this.generateSummaryIcon}}
|
||||
@disabled={{this.loading}}
|
||||
class="btn-primary ai-topic-summarization"
|
||||
/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{yield}}
|
||||
</div>
|
||||
|
||||
{{#if @outletArgs.topic.summarizable}}
|
||||
<div
|
||||
class="summary-box__container"
|
||||
class="ai-summarization-button"
|
||||
{{didInsert this.subscribe}}
|
||||
{{willDestroy this.unsubscribe}}
|
||||
>
|
||||
{{#if this.showSummaryBox}}
|
||||
<article class="ai-summary-box">
|
||||
{{#if (and this.loading (not this.text))}}
|
||||
<AiSummarySkeleton />
|
||||
{{else}}
|
||||
<div class="generated-summary">{{this.text}}</div>
|
||||
|
||||
{{#if this.summarizedOn}}
|
||||
<div class="summarized-on">
|
||||
<p>
|
||||
{{i18n "summary.summarized_on" date=this.summarizedOn}}
|
||||
|
||||
<DTooltip @placements={{array "top-end"}}>
|
||||
<:trigger>
|
||||
{{dIcon "info-circle"}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
{{i18n "summary.model_used" model=this.summarizedBy}}
|
||||
</:content>
|
||||
</DTooltip>
|
||||
</p>
|
||||
|
||||
{{#if this.outdated}}
|
||||
<p class="outdated-summary">
|
||||
{{this.outdatedSummaryWarningText}}
|
||||
</p>
|
||||
<DMenu
|
||||
@onShow={{this.generateSummary}}
|
||||
@arrow={{true}}
|
||||
@identifier="topic-map__ai-summary"
|
||||
@interactive={{true}}
|
||||
@triggers="click"
|
||||
@placement="left"
|
||||
@modalForMobile={{true}}
|
||||
@groupIdentifier="topic-map"
|
||||
@inline={{true}}
|
||||
@label={{i18n "summary.buttons.generate"}}
|
||||
@title={{i18n "summary.buttons.generate"}}
|
||||
@icon="discourse-sparkles"
|
||||
@triggerClass="ai-topic-summarization"
|
||||
>
|
||||
<:content>
|
||||
<div class="ai-summary-container">
|
||||
<h3>Topic Summary</h3>
|
||||
<article class="ai-summary-box">
|
||||
{{#if this.loading}}
|
||||
<AiSummarySkeleton />
|
||||
{{else}}
|
||||
<div class="generated-summary">{{this.text}}</div>
|
||||
{{#if this.summarizedOn}}
|
||||
<div class="summarized-on">
|
||||
<p>
|
||||
{{i18n "summary.summarized_on" date=this.summarizedOn}}
|
||||
<DTooltip @placements={{array "top-end"}}>
|
||||
<:trigger>
|
||||
{{dIcon "info-circle"}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
{{i18n
|
||||
"summary.model_used"
|
||||
model=this.summarizedBy
|
||||
}}
|
||||
</:content>
|
||||
</DTooltip>
|
||||
</p>
|
||||
<div class="outdated-summary">
|
||||
{{#if this.outdated}}
|
||||
<p>{{this.outdatedSummaryWarningText}}</p>
|
||||
{{/if}}
|
||||
{{#if this.canRegenerate}}
|
||||
<DButton
|
||||
@label="summary.buttons.regenerate"
|
||||
@title="summary.buttons.regenerate"
|
||||
@action={{this.regenerateSummary}}
|
||||
@icon="sync"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</article>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</article>
|
||||
</div>
|
||||
</:content>
|
||||
</DMenu>
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,168 +1,215 @@
|
|||
.topic-map .topic-map__additional-contents {
|
||||
.summarization-buttons {
|
||||
padding-bottom: 0.5em;
|
||||
.topic-map {
|
||||
// Hide the Top Replies label if summarization is enabled
|
||||
&:has(.topic-map__additional-contents .ai-summarization-button) {
|
||||
.top-replies {
|
||||
.d-icon {
|
||||
margin: 0;
|
||||
height: 1.2em;
|
||||
}
|
||||
.d-button-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the Summarize label when there are many stats unless is mobile
|
||||
&:has(.--many-stats):has(.top-replies) .topic-map__additional-contents {
|
||||
@media screen and (min-width: 476px) {
|
||||
button {
|
||||
.d-icon {
|
||||
margin: 0;
|
||||
height: 1.2em;
|
||||
}
|
||||
.d-button-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-map__additional-contents {
|
||||
.ai-summarization-button {
|
||||
padding-block: 0.5em;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
|
||||
button span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-map .toggle-summary {
|
||||
.summarization-buttons {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.topic-map__ai-summary-content {
|
||||
.fk-d-menu__inner-content,
|
||||
.d-modal__body {
|
||||
.ai-summary-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ai-summary {
|
||||
&__list {
|
||||
list-style: none;
|
||||
.ai-summary {
|
||||
&__list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
&__list-item {
|
||||
background: var(--primary-300);
|
||||
border-radius: var(--d-border-radius);
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
height: 1em;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
&:nth-child(1) {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
width: 05%;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&:nth-child(10) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&:nth-child(11) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(12) {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
&:nth-child(13) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(14) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(15) {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
&:nth-child(16) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(17) {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
&:nth-child(18) {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
&:nth-child(19) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(20) {
|
||||
width: 25%;
|
||||
}
|
||||
&.is-shown {
|
||||
opacity: 1;
|
||||
}
|
||||
&.show {
|
||||
animation: appear 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
|
||||
forwards;
|
||||
@media (prefers-reduced-motion) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&.blink {
|
||||
animation: blink 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__generating-text {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
&__indicator-wave {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
&__indicator-dot {
|
||||
display: inline-block;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: ai-summary__indicator-wave 1.8s linear infinite;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: -1.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-summary {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.placeholder-summary-text {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin-top: 0.6em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summarized-on p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&__list-item {
|
||||
background: var(--primary-300);
|
||||
border-radius: var(--d-border-radius);
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
height: 18px;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
&:nth-child(1) {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 12%;
|
||||
.outdated-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
button {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
width: 05%;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&:nth-child(10) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&:nth-child(11) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(12) {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
&:nth-child(13) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(14) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(15) {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
&:nth-child(16) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(17) {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
&:nth-child(18) {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
&:nth-child(19) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
&:nth-child(20) {
|
||||
width: 25%;
|
||||
}
|
||||
&.is-shown {
|
||||
opacity: 1;
|
||||
}
|
||||
&.show {
|
||||
animation: appear 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s forwards;
|
||||
@media (prefers-reduced-motion) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&.blink {
|
||||
animation: blink 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
|
||||
}
|
||||
p {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
&__generating-text {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
&__indicator-wave {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
&__indicator-dot {
|
||||
display: inline-block;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: ai-summary__indicator-wave 1.8s linear infinite;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: -1.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-summary {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.placeholder-summary-text {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin-top: 0.6em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summarized-on {
|
||||
text-align: right;
|
||||
|
||||
.info-icon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.outdated-summary {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue