UX: Point that topic summaries are generated by an AI (#22646)

app/assets/javascripts/discourse/app/widgets/summary-box.js

@@ -26,18 +26,45 @@ export default createWidget("summary-box", {
   tagName: "article.summary-box",
   buildKey: (attrs) => `summary-box-${attrs.topicId}`,
 
-  html(attrs) {
+  defaultState() {
+    return { expandSummarizedOn: false };
+  },
+
+  html(attrs, state) {
     const html = [];
 
     if (attrs.summary) {
       html.push(new RawHtml({ html: `<div>${attrs.summary}</div>` }));
-      html.push(
+
-        h(
+      if (state.expandSummarizedOn) {
-          "div.summarized-on",
+        html.push(
-          {},
+          h(
-          I18n.t("summary.summarized_on", { date: attrs.summarizedOn })
+            "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",
+                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);
@@ -46,6 +73,11 @@ export default createWidget("summary-box", {
     return html;
   },
 
+  showFullSummarizedOn() {
+    this.state.expandSummarizedOn = true;
+    this.scheduleRerender();
+  },
+
   fetchSummary(topicId) {
     ajax(`/t/${topicId}/strategy-summary`)
       .then((data) => {
@@ -54,6 +86,7 @@ export default createWidget("summary-box", {
           this.sendWidgetEvent("summaryUpdated", {
             summary: cooked.string,
             summarizedOn: shortDateNoYear(data.summarized_on),
+            summarizedBy: data.summarized_by,
           });
         });
       })

app/assets/javascripts/discourse/app/widgets/toggle-topic-summary.js

@@ -42,6 +42,7 @@ export default createWidget("toggle-topic-summary", {
       summaryBoxHidden: true,
       summary: "",
       summarizedOn: null,
+      summarizedBy: null,
     };
   },
 
@@ -90,6 +91,7 @@ export default createWidget("toggle-topic-summary", {
     if (this.summaryBoxVisble()) {
       attrs.summary = this.state.summary;
       attrs.summarizedOn = this.state.summarizedOn;
+      attrs.summarizedBy = this.state.summarizedBy;
       html.push(this.attach("summary-box", attrs));
     }
 
@@ -103,6 +105,7 @@ export default createWidget("toggle-topic-summary", {
   summaryUpdatedEvent(update) {
     this.state.summary = update.summary;
     this.state.summarizedOn = update.summarizedOn;
+    this.state.summarizedBy = update.summarizedBy;
   },
 
   summaryBoxVisble() {

app/controllers/topics_controller.rb

@@ -1181,7 +1181,12 @@ class TopicsController < ApplicationController
 
     hijack do
       summary = TopicSummarization.new(strategy).summarize(topic, current_user)
-      render json: { summary: summary&.summarized_text, summarized_on: summary&.updated_at }
+
+      render json: {
+               summary: summary.summarized_text,
+               summarized_on: summary.updated_at,
+               summarized_by: summary.algorithm,
+             }
     end
   end
 

config/locales/client.en.yml

@@ -2040,8 +2040,8 @@ en:
       refresh_page: "Refresh page"
 
     summary:
-      in_progress: "Summary in progress..."
+      in_progress: "Summarizing topic using AI..."
-      summarized_on: "Summarized on %{date}" 
+      summarized_on: "Summarized with %{method} on %{date}" 
       enabled_description: "You're viewing this topic top replies: the most interesting posts as determined by the community."
       description:
         one: "There is <b>%{count}</b> reply."
@@ -2063,8 +2063,7 @@ en:
       short_title: "Show this topic top replies: the most interesting posts as determined by the community"
       strategy:
         hide_button_title: "Hide summary"
-        button_title: "Summarize this topic"
+        button_title: "Summarize with AI"
-        title: "Topic summary"
 
     deleted_filter:
       enabled_description: "This topic contains deleted posts, which have been hidden."