UX: Display a tooltip signalling this is an AI powered feature (#1141)

Author: romanrizzi

assets/javascripts/discourse/connectors/full-page-search-below-search-header/ai-full-page-discobot-discoveries.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
+import DTooltip from "float-kit/components/d-tooltip";
 import AiSearchDiscoveries from "../../components/ai-search-discoveries";
 
 export default class AiFullPageDiscobotDiscoveries extends Component {
@@ -23,8 +24,34 @@ export default class AiFullPageDiscobotDiscoveries extends Component {
       <h3
         class="ai-search-discoveries__discoveries-title full-page-discoveries"
       >
-        {{icon "robot"}}
-        {{i18n "discourse_ai.discobot_discoveries.main_title"}}
+        <span>
+          {{icon "robot"}}
+          {{i18n "discourse_ai.discobot_discoveries.main_title"}}
+        </span>
+
+        <span class="ai-search-discoveries-tooltip">
+          <DTooltip @placement="top-end">
+            <:trigger>
+              {{icon "circle-info"}}
+            </:trigger>
+            <:content>
+              <div class="ai-search-discoveries-tooltip__content">
+                <div class="ai-search-discoveries-tooltip__header">
+                  {{i18n "discourse_ai.discobot_discoveries.tooltip.header"}}
+                </div>
+
+                <div class="ai-search-discoveries-tooltip__content">
+                  {{#if this.discobotDiscoveries.modelUsed}}
+                    {{i18n
+                      "discourse_ai.discobot_discoveries.tooltip.content"
+                      model=this.discobotDiscoveries.modelUsed
+                    }}
+                  {{/if}}
+                </div>
+              </div>
+            </:content>
+          </DTooltip>
+        </span>
       </h3>
       <div class="full-page-discoveries">
         <AiSearchDiscoveries @searchTerm={{@outletArgs.search}} />

assets/javascripts/discourse/connectors/search-menu-results-type-top/ai-discobot-discoveries.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
+import DTooltip from "float-kit/components/d-tooltip";
 import AiSearchDiscoveries from "../../components/ai-search-discoveries";
 
 export default class AiDiscobotDiscoveries extends Component {
@@ -18,8 +19,34 @@ export default class AiDiscobotDiscoveries extends Component {
   <template>
     <div class="ai-discobot-discoveries">
       <h3 class="ai-search-discoveries__discoveries-title">
-        {{icon "robot"}}
-        {{i18n "discourse_ai.discobot_discoveries.main_title"}}
+        <span>
+          {{icon "robot"}}
+          {{i18n "discourse_ai.discobot_discoveries.main_title"}}
+        </span>
+
+        <span class="ai-search-discoveries-tooltip">
+          <DTooltip @placement="top-end">
+            <:trigger>
+              {{icon "circle-info"}}
+            </:trigger>
+            <:content>
+              <div class="ai-search-discoveries-tooltip__content">
+                <div class="ai-search-discoveries-tooltip__header">
+                  {{i18n "discourse_ai.discobot_discoveries.tooltip.header"}}
+                </div>
+
+                <div class="ai-search-discoveries-tooltip__content">
+                  {{#if this.discobotDiscoveries.modelUsed}}
+                    {{i18n
+                      "discourse_ai.discobot_discoveries.tooltip.content"
+                      model=this.discobotDiscoveries.modelUsed
+                    }}
+                  {{/if}}
+                </div>
+              </div>
+            </:content>
+          </DTooltip>
+        </span>
       </h3>
 
       <AiSearchDiscoveries />

assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss

@@ -18,12 +18,28 @@
     border-bottom: 1px solid var(--primary-low);
   }
 
+  &__discoveries-title {
+    display: flex;
+    justify-content: space-between;
+  }
+
   &__toggle {
     padding-left: 0;
     margin-bottom: 0.5em;
   }
 }
 
+.ai-search-discoveries-tooltip {
+  &__header {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+
+  .fk-d-tooltip__trigger {
+    vertical-align: middle;
+  }
+}
+
 .ai-discobot-discoveries {
   padding: 0.5em;
 }

config/locales/client.en.yml

@@ -680,8 +680,8 @@ en:
         collapse: "Collapse"
         timed_out: "Discobot couldn't find any discoveries. Something went wrong."
         tooltip:
-          title: "AI powered search"
-          body: "Natural language search powered by %{model}"
+          header: "AI powered search"
+          content: "Natural language search powered by %{model}"
     review:
       types:
         reviewable_ai_post: