diff --git a/app/assets/javascripts/discourse/app/widgets/summary-box.js b/app/assets/javascripts/discourse/app/widgets/summary-box.js
index 3e620807f89..bb04df8f27b 100644
--- a/app/assets/javascripts/discourse/app/widgets/summary-box.js
+++ b/app/assets/javascripts/discourse/app/widgets/summary-box.js
@@ -1,5 +1,5 @@
import { createWidget } from "discourse/widgets/widget";
-import hbs from "discourse/widgets/hbs-compiler";
+import { hbs } from "ember-cli-htmlbars";
import { ajax } from "discourse/lib/ajax";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { cookAsync } from "discourse/lib/text";
@@ -7,18 +7,35 @@ import RawHtml from "discourse/widgets/raw-html";
import I18n from "I18n";
import { shortDateNoYear } from "discourse/lib/formatter";
import { h } from "virtual-dom";
+import { iconNode } from "discourse-common/lib/icon-library";
+import RenderGlimmer from "discourse/widgets/render-glimmer";
createWidget("summary-skeleton", {
tagName: "section.placeholder-summary",
- template: hbs`
-
-
-
- {{transformed.in_progress_label}}
- `,
- transform() {
- return { in_progress_label: I18n.t("summary.in_progress") };
+ html() {
+ const html = [];
+
+ html.push(this.buildPlaceholderDiv());
+ html.push(this.buildPlaceholderDiv());
+ html.push(this.buildPlaceholderDiv());
+
+ html.push(
+ h("span", {}, [
+ iconNode("magic", { class: "rotate-center" }),
+ h(
+ "p.placeholder-generating-summary-text",
+ {},
+ I18n.t("summary.in_progress")
+ ),
+ ])
+ );
+
+ return html;
+ },
+
+ buildPlaceholderDiv() {
+ return h("div.placeholder-summary-text.placeholder-animation");
},
});
@@ -30,41 +47,28 @@ export default createWidget("summary-box", {
return { expandSummarizedOn: false };
},
- html(attrs, state) {
+ html(attrs) {
const html = [];
if (attrs.summary) {
html.push(new RawHtml({ html: `${attrs.summary}
` }));
-
- if (state.expandSummarizedOn) {
- html.push(
- h(
- "div.summarized-on",
- {},
- I18n.t("summary.summarized_on", {
- method: attrs.summarizedBy,
- date: attrs.summarizedOn,
- })
- )
- );
- } else {
- html.push(
- h("div.summarized-on", [
- this.attach("button", {
- className: "btn btn-link summarized-on",
- translatedTitle: I18n.t("summary.summarized_on", {
- method: "AI",
+ html.push(
+ h("div.summarized-on", {}, [
+ new RenderGlimmer(
+ this,
+ "div",
+ hbs`{{@data.summarizedOn}}{{d-icon "info-circle"}}
+ {{i18n "summary.model_used" model=@data.attrs.summarizedBy}}
+ `,
+ {
+ attrs,
+ summarizedOn: I18n.t("summary.summarized_on", {
date: attrs.summarizedOn,
}),
- translatedLabel: I18n.t("summary.summarized_on", {
- method: "AI",
- date: attrs.summarizedOn,
- }),
- action: "showFullSummarizedOn",
- }),
- ])
- );
- }
+ }
+ ),
+ ])
+ );
} else {
html.push(this.attach("summary-skeleton"));
this.fetchSummary(attrs.topicId);
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 6f998ad5850..9ec8d1776c0 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -2,6 +2,7 @@
@import "vendor/normalize";
@import "vendor/normalize-ext";
@import "vendor/pikaday";
+@import "vendor/rotate-center";
@import "vendor/tippy";
@import "vendor/svg-arrow";
@import "common/whcm";
diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss
index 746802071b7..74c56a123c2 100644
--- a/app/assets/stylesheets/common/base/_index.scss
+++ b/app/assets/stylesheets/common/base/_index.scss
@@ -58,6 +58,7 @@
@import "tooltip";
@import "topic-admin-menu";
@import "topic-post";
+@import "topic-summary";
@import "topic";
@import "upload";
@import "user-badges";
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 40713ae0d41..83a6bed14ea 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -838,27 +838,6 @@ aside.quote {
margin-left: 0.25em;
}
}
-
- .toggle-summary {
- .summarization-buttons {
- display: flex;
- }
-
- .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;
- }
- }
}
.topic-avatar,
diff --git a/app/assets/stylesheets/common/base/topic-summary.scss b/app/assets/stylesheets/common/base/topic-summary.scss
new file mode 100644
index 00000000000..174bcde18ab
--- /dev/null
+++ b/app/assets/stylesheets/common/base/topic-summary.scss
@@ -0,0 +1,38 @@
+.topic-map {
+ .toggle-summary {
+ .summarization-buttons {
+ display: flex;
+ }
+
+ .placeholder-summary {
+ padding-top: 0.5em;
+ }
+
+ .placeholder-summary-text {
+ display: inline-block;
+ height: 1em;
+ margin-top: 0.6em;
+ width: 100%;
+ }
+
+ .rotate-center {
+ -webkit-animation: rotate-center 3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
+ 0.5s infinite both;
+ animation: rotate-center 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s
+ infinite both;
+ }
+
+ .placeholder-generating-summary-text {
+ display: inline-block;
+ margin-left: 3px;
+ }
+
+ .summarized-on {
+ text-align: right;
+
+ .model-used {
+ margin-left: 3px;
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/vendor/rotate-center.scss b/app/assets/stylesheets/vendor/rotate-center.scss
new file mode 100644
index 00000000000..1a822753f2b
--- /dev/null
+++ b/app/assets/stylesheets/vendor/rotate-center.scss
@@ -0,0 +1,32 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2023-7-17 8:32:34
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation rotate-center
+ * ----------------------------------------
+ */
+ @-webkit-keyframes rotate-center {
+ 0% {
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes rotate-center {
+ 0% {
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 56acb422d4c..6e20c8912ee 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2041,7 +2041,8 @@ en:
summary:
in_progress: "Summarizing topic using AI..."
- summarized_on: "Summarized with %{method} on %{date}"
+ summarized_on: "Summarized with AI on %{date}"
+ model_used: "AI used: %{model}"
enabled_description: "You're viewing this topic top replies: the most interesting posts as determined by the community."
description:
one: "There is %{count} reply."