From 77e51533503cc44462a20cbd4b653f22561739ec Mon Sep 17 00:00:00 2001
From: Roman Rizzi <rizziromanalejandro@gmail.com>
Date: Mon, 17 Jul 2023 17:24:41 -0300
Subject: [PATCH] UX: Point that topic summaries are generated by an AI
 (#22646)

---
 .../discourse/app/widgets/summary-box.js      | 49 ++++++++++++++++---
 .../app/widgets/toggle-topic-summary.js       |  3 ++
 app/controllers/topics_controller.rb          |  7 ++-
 config/locales/client.en.yml                  |  7 ++-
 4 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/summary-box.js b/app/assets/javascripts/discourse/app/widgets/summary-box.js
index 6b31a3d4f20..3e620807f89 100644
--- a/app/assets/javascripts/discourse/app/widgets/summary-box.js
+++ b/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(
-          "div.summarized-on",
-          {},
-          I18n.t("summary.summarized_on", { date: attrs.summarizedOn })
-        )
-      );
+
+      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",
+                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,
           });
         });
       })
diff --git a/app/assets/javascripts/discourse/app/widgets/toggle-topic-summary.js b/app/assets/javascripts/discourse/app/widgets/toggle-topic-summary.js
index 93db4b40f65..aec44c8dfae 100644
--- a/app/assets/javascripts/discourse/app/widgets/toggle-topic-summary.js
+++ b/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() {
diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb
index 3fb7abc314b..9bf783a3a38 100644
--- a/app/controllers/topics_controller.rb
+++ b/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
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index dfffbfea12f..42413681975 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2040,8 +2040,8 @@ en:
       refresh_page: "Refresh page"
 
     summary:
-      in_progress: "Summary in progress..."
-      summarized_on: "Summarized on %{date}" 
+      in_progress: "Summarizing topic using AI..."
+      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"
-        title: "Topic summary"
+        button_title: "Summarize with AI"
 
     deleted_filter:
       enabled_description: "This topic contains deleted posts, which have been hidden."