UX: Use DMenu for topic summarization (#724)

assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-box.gjs

@@ -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
+  get topicId() {
-  collapse() {
+    return this.args.outletArgs.topic.id;
-    this.showSummaryBox = false;
-    this.canCollapseSummary = false;
   }
 
-  @action
+  get baseSummarizationURL() {
-  generateSummary() {
+    return `/discourse-ai/summarization/t/${this.topicId}`;
-    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);
-      }
-    });
   }
 
   @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)}}
+    {{#if @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>
-
       <div
-        class="summary-box__container"
+        class="ai-summarization-button"
         {{didInsert this.subscribe}}
         {{willDestroy this.unsubscribe}}
       >
-        {{#if this.showSummaryBox}}
+        <DMenu
-          <article class="ai-summary-box">
+          @onShow={{this.generateSummary}}
-            {{#if (and this.loading (not this.text))}}
+          @arrow={{true}}
-              <AiSummarySkeleton />
+          @identifier="topic-map__ai-summary"
-            {{else}}
+          @interactive={{true}}
-              <div class="generated-summary">{{this.text}}</div>
+          @triggers="click"
-
+          @placement="left"
-              {{#if this.summarizedOn}}
+          @modalForMobile={{true}}
-                <div class="summarized-on">
+          @groupIdentifier="topic-map"
-                  <p>
+          @inline={{true}}
-                    {{i18n "summary.summarized_on" date=this.summarizedOn}}
+          @label={{i18n "summary.buttons.generate"}}
-
+          @title={{i18n "summary.buttons.generate"}}
-                    <DTooltip @placements={{array "top-end"}}>
+          @icon="discourse-sparkles"
-                      <:trigger>
+          @triggerClass="ai-topic-summarization"
-                        {{dIcon "info-circle"}}
+        >
-                      </:trigger>
+          <:content>
-                      <:content>
+            <div class="ai-summary-container">
-                        {{i18n "summary.model_used" model=this.summarizedBy}}
+              <h3>Topic Summary</h3>
-                      </:content>
+              <article class="ai-summary-box">
-                    </DTooltip>
+                {{#if this.loading}}
-                  </p>
+                  <AiSummarySkeleton />
-
+                {{else}}
-                  {{#if this.outdated}}
+                  <div class="generated-summary">{{this.text}}</div>
-                    <p class="outdated-summary">
+                  {{#if this.summarizedOn}}
-                      {{this.outdatedSummaryWarningText}}
+                    <div class="summarized-on">
-                    </p>
+                      <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}}
+            </div>
-          </article>
+          </:content>
-        {{/if}}
+        </DMenu>
       </div>
     {{/if}}
   </template>

assets/stylesheets/modules/summarization/common/ai-summary.scss

@@ -1,168 +1,215 @@
-.topic-map .topic-map__additional-contents {
+.topic-map {
-  .summarization-buttons {
+  // Hide the Top Replies label if summarization is enabled
-    padding-bottom: 0.5em;
+  &: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 {
+.topic-map__ai-summary-content {
-  .summarization-buttons {
+  .fk-d-menu__inner-content,
-    display: flex;
+  .d-modal__body {
-    gap: 0.5em;
+    .ai-summary-container {
-  }
+      width: 100%;
+    }
 
-  .ai-summary {
+    .ai-summary {
-    &__list {
+      &__list {
-      list-style: none;
+        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;
+      align-items: center;
-      padding: 0;
+      justify-content: flex-end;
-      margin: 0;
+      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) {
+    .outdated-summary {
-        width: 12%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      button {
+        margin-top: 0.5em;
       }
-
+      p {
-      &:nth-child(3) {
+        color: var(--primary-medium);
-        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 {
-    text-align: right;
-
-    .info-icon {
-      margin-left: 3px;
-    }
-  }
-
-  .outdated-summary {
-    color: var(--primary-medium);
   }
 }