UX: Full page search -- always show tooltip & add msg (#1051)

Author: markvanlan

assets/javascripts/discourse/components/ai-full-page-search.gjs

@@ -9,7 +9,7 @@ import { SEARCH_TYPE_DEFAULT } from "discourse/controllers/full-page-search";
 import { ajax } from "discourse/lib/ajax";
 import { isValidSearchTerm, translateResults } from "discourse/lib/search";
 import icon from "discourse-common/helpers/d-icon";
-import I18n, { i18n } from "discourse-i18n";
+import { i18n } from "discourse-i18n";
 import DTooltip from "float-kit/components/d-tooltip";
 import AiIndicatorWave from "./ai-indicator-wave";
 
@@ -64,26 +64,26 @@ export default class AiFullPageSearch extends Component {
 
   get searchStateText() {
     if (!this.validSearchOrder) {
-      return I18n.t(
+      return i18n(
         "discourse_ai.embeddings.semantic_search_results.unavailable"
       );
     }
 
     // Search loading:
     if (this.searching) {
-      return I18n.t("discourse_ai.embeddings.semantic_search_loading");
+      return i18n("discourse_ai.embeddings.semantic_search_loading");
     }
 
     // We have results and we are showing them
     if (this.AiResults.length && this.showingAiResults) {
-      return I18n.t("discourse_ai.embeddings.semantic_search_results.toggle", {
+      return i18n("discourse_ai.embeddings.semantic_search_results.toggle", {
         count: this.AiResults.length,
       });
     }
 
     // We have results but are hiding them
     if (this.AiResults.length && !this.showingAiResults) {
-      return I18n.t(
+      return i18n(
         "discourse_ai.embeddings.semantic_search_results.toggle_hidden",
         {
           count: this.AiResults.length,
@@ -96,12 +96,12 @@ export default class AiFullPageSearch extends Component {
       this.AiResults.length === 0 &&
       this.searchTerm !== this.initialSearchTerm
     ) {
-      return I18n.t("discourse_ai.embeddings.semantic_search_results.new");
+      return i18n("discourse_ai.embeddings.semantic_search_results.new");
     }
 
     // No results:
     if (this.AiResults.length === 0) {
-      return I18n.t("discourse_ai.embeddings.semantic_search_results.none");
+      return i18n("discourse_ai.embeddings.semantic_search_results.none");
     }
   }
 
@@ -121,6 +121,14 @@ export default class AiFullPageSearch extends Component {
     );
   }
 
+  get tooltipText() {
+    return i18n(
+      `discourse_ai.embeddings.semantic_search_tooltips.${
+        this.validSearchOrder ? "results_explanation" : "invalid_sort"
+      }`
+    );
+  }
+
   @action
   toggleAiResults() {
     if (this.showingAiResults) {
@@ -201,22 +209,17 @@ export default class AiFullPageSearch extends Component {
             <AiIndicatorWave @loading={{this.searching}} />
           {{/if}}
 
-          {{#unless this.validSearchOrder}}
-
-            <DTooltip
-              @identifier="semantic-search-unavailable-tooltip"
-              class="semantic-search__unavailable-tooltip"
-            >
-              <:trigger>
-                {{icon "far-circle-question"}}
-              </:trigger>
-              <:content>
-                {{i18n
-                  "discourse_ai.embeddings.semantic_search_unavailable_tooltip"
-                }}
-              </:content>
-            </DTooltip>
-          {{/unless}}
+          <DTooltip
+            @identifier="semantic-search-tooltip"
+            class="semantic-search__tooltip"
+          >
+            <:trigger>
+              {{icon "far-circle-question"}}
+            </:trigger>
+            <:content>
+              {{this.tooltipText}}
+            </:content>
+          </DTooltip>
         </div>
       </div>
     </div>

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

@@ -1,13 +1,13 @@
 import Component from "@glimmer/component";
-import AiSemanticSearch from "../../components/ai-full-page-search";
+import AiFullPageSearch from "../../components/ai-full-page-search";
 
 export default class AiFullPageSearchConnector extends Component {
   static shouldRender(_args, { siteSettings }) {
     return siteSettings.ai_embeddings_semantic_search_enabled;
   }
 
   <template>
-    <AiSemanticSearch
+    <AiFullPageSearch
       @sortOrder={{@outletArgs.sortOrder}}
       @searchTerm={{@outletArgs.search}}
       @searchType={{@outletArgs.type}}

assets/stylesheets/modules/embeddings/common/semantic-search.scss

@@ -29,8 +29,9 @@
         margin-left: 8px;
       }
 
-      &__unavailable-tooltip {
+      &__tooltip {
         margin-left: 4px;
+        font-size: var(--font-down-1);
       }
     }
 

config/locales/client.en.yml

@@ -486,6 +486,10 @@ en:
           none: "Sorry, our AI search found no matching topics"
           new: "Press 'search' to begin looking for new results with AI"
           unavailable: "AI results unavailable"
+        semantic_search_tooltips:
+          results_explanation: "When enabled, additional AI search results will be added below."
+          invalid_sort: "Search results must be sorted by Relevance to display AI results"
+        semantic_search_unavailable_tooltip:
         semantic_search_unavailable_tooltip: "Search results must be sorted by Relevance to display AI results"
         ai_generated_result: "Search result found using AI"
         quick_search: