From f9220124991357d5f3044c6cce4a9f62a4a5763a Mon Sep 17 00:00:00 2001
From: Roman Rizzi <roman@discourse.org>
Date: Thu, 20 Feb 2025 16:21:26 -0300
Subject: [PATCH] UX: Display a tooltip signalling this is an AI powered
 feature (#1141)

---
 .../ai-full-page-discobot-discoveries.gjs     | 31 +++++++++++++++++--
 .../ai-discobot-discoveries.gjs               | 31 +++++++++++++++++--
 .../common/ai-discobot-discoveries.scss       | 16 ++++++++++
 config/locales/client.en.yml                  |  4 +--
 4 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/assets/javascripts/discourse/connectors/full-page-search-below-search-header/ai-full-page-discobot-discoveries.gjs b/assets/javascripts/discourse/connectors/full-page-search-below-search-header/ai-full-page-discobot-discoveries.gjs
index 3e07efde..19816767 100644
--- a/assets/javascripts/discourse/connectors/full-page-search-below-search-header/ai-full-page-discobot-discoveries.gjs
+++ b/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}} />
diff --git a/assets/javascripts/discourse/connectors/search-menu-results-type-top/ai-discobot-discoveries.gjs b/assets/javascripts/discourse/connectors/search-menu-results-type-top/ai-discobot-discoveries.gjs
index 2ad49d34..1358d8f7 100644
--- a/assets/javascripts/discourse/connectors/search-menu-results-type-top/ai-discobot-discoveries.gjs
+++ b/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 />
diff --git a/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss b/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss
index edfcf6b6..93fb01a7 100644
--- a/assets/stylesheets/modules/ai-bot/common/ai-discobot-discoveries.scss
+++ b/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;
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 598fd15e..d34e528a 100644
--- a/config/locales/client.en.yml
+++ b/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: