UX: convert AI gist disclosure to a toggle (#878)

Author: awesomerobot

assets/javascripts/discourse/components/ai-gist-disclosure.gjs

@@ -0,0 +1,84 @@
+import Component from "@glimmer/component";
+import { concat, fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+import DMenu from "float-kit/components/d-menu";
+
+export default class AiGistToggle extends Component {
+  @service router;
+  @service gistPreference;
+
+  get shouldShow() {
+    return this.router.currentRoute.attributes?.list?.topics?.some(
+      (topic) => topic.ai_topic_gist
+    );
+  }
+
+  get buttons() {
+    return [
+      {
+        id: "gists_enabled",
+        label: "discourse_ai.summarization.gists_enabled_long",
+        icon: "discourse-sparkles",
+      },
+      {
+        id: "gists_disabled",
+        label: "discourse_ai.summarization.gists_disabled",
+        icon: "far-eye-slash",
+      },
+    ];
+  }
+
+  @action
+  onRegisterApi(api) {
+    this.dMenu = api;
+  }
+
+  @action
+  onSelect(optionId) {
+    this.gistPreference.setPreference(optionId);
+    this.dMenu.close();
+  }
+
+  <template>
+    {{#if this.shouldShow}}
+
+      <DMenu
+        @modalForMobile={{true}}
+        @autofocus={{true}}
+        @identifier="ai-gists-dropdown"
+        @onRegisterApi={{this.onRegisterApi}}
+        @triggerClass="btn-transparent"
+      >
+        <:trigger>
+          <span class="d-button-label">
+            {{i18n
+              (concat
+                "discourse_ai.summarization." this.gistPreference.preference
+              )
+            }}
+          </span>
+          {{icon "angle-down"}}
+        </:trigger>
+        <:content>
+          <DropdownMenu as |dropdown|>
+            {{#each this.buttons as |button|}}
+              <dropdown.item>
+                <DButton
+                  @label={{button.label}}
+                  @icon={{button.icon}}
+                  class="btn-transparent"
+                  @action={{fn this.onSelect button.id}}
+                />
+              </dropdown.item>
+            {{/each}}
+          </DropdownMenu>
+        </:content>
+      </DMenu>
+    {{/if}}
+  </template>
+}

assets/javascripts/discourse/components/ai-gist-toggle.gjs

@@ -3,11 +3,18 @@ import { service } from "@ember/service";
 
 export default class AiTopicGist extends Component {
   @service router;
+  @service gistPreference;
+
+  get prefersGist() {
+    return this.gistPreference.preference === "gists_enabled";
+  }
 
   get showGist() {
     return (
       this.router.currentRoute.attributes?.filterType === "hot" &&
       this.args.topic?.ai_topic_gist &&
+      !this.args.topic?.excerpt &&
+      this.prefersGist &&
       !this.args.topic?.excerpt
     );
   }

assets/javascripts/discourse/components/ai-topic-gist.gjs

@@ -1,13 +1,13 @@
 import Component from "@glimmer/component";
-import AiGistDisclosure from "../../components/ai-gist-disclosure";
+import AiGistToggle from "../../components/ai-gist-toggle";
 
-export default class AiTopicGistDisclosure extends Component {
+export default class AiTopicGistToggle extends Component {
   static shouldRender(outletArgs, helper) {
     const isMobileView = helper.site.mobileView;
     return isMobileView;
   }
 
   <template>
-    <AiGistDisclosure />
+    <AiGistToggle />
   </template>
 }

assets/javascripts/discourse/connectors/discovery-above/mobile-gist-disclosure.gjs renamed to assets/javascripts/discourse/connectors/discovery-above/mobile-gist-toggle.gjs

@@ -1,5 +1,5 @@
 import Component from "@glimmer/component";
-import AiGistDisclosure from "../../components/ai-gist-disclosure";
+import AiGistToggle from "../../components/ai-gist-toggle";
 
 export default class AiTopicGist extends Component {
   static shouldRender(outletArgs) {
@@ -11,6 +11,6 @@ export default class AiTopicGist extends Component {
   }
 
   <template>
-    <AiGistDisclosure />
+    <AiGistToggle />
   </template>
 }

assets/javascripts/discourse/connectors/topic-list-heading-bottom/desktop-gist-disclosure.gjs renamed to assets/javascripts/discourse/connectors/topic-list-heading-bottom/desktop-gist-toggle.gjs

@@ -0,0 +1,12 @@
+import { tracked } from "@glimmer/tracking";
+import Service from "@ember/service";
+
+export default class GistPreference extends Service {
+  @tracked
+  preference = localStorage.getItem("aiGistPreference") || "gists_disabled";
+
+  setPreference(value) {
+    this.preference = value;
+    localStorage.setItem("aiGistPreference", value);
+  }
+}

assets/javascripts/discourse/services/gist-preference.js

@@ -238,22 +238,18 @@
       color: var(--primary-medium);
     }
   }
+}
 
-  &__disclosure {
-    font-size: var(--font-down-1);
-    color: var(--primary-600);
-    .desktop-view & {
-      margin-left: 0.5em;
-    }
-    .mobile-view & {
-      display: block;
-      margin-top: -0.5em;
-      margin-bottom: 0.5em;
-    }
-    .d-icon {
-      font-size: var(--font-down-1);
-      position: relative;
-      top: -0.05em; // improve vertical alignment
-    }
+.ai-gists-dropdown-trigger {
+  font-size: var(--font-down-1);
+  color: var(--primary-medium);
+  padding-left: 0.25em;
+  .mobile-view & {
+    padding-left: 0;
+    color: var(--primary-high);
+  }
+  .d-icon {
+    color: var(--primary-low-mid);
+    margin-left: 0.15em;
   }
 }

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

@@ -465,7 +465,9 @@ en:
         topic:
           title: "Topic summary"
           close: "Close summary panel"
-        disclosure: "Summaries generated by AI"
+        gists_enabled: "with summary"
+        gists_enabled_long: "with AI-generated summary"
+        gists_disabled: "without summary"
     review:
       types:
         reviewable_ai_post: