FEATURE: Unavailable state for semantic search when sort is not Relevant

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

@@ -2,43 +2,73 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
-import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import { service } from "@ember/service";
 import DToggleSwitch from "discourse/components/d-toggle-switch";
 import { SEARCH_TYPE_DEFAULT } from "discourse/controllers/full-page-search";
 import { ajax } from "discourse/lib/ajax";
-import { withPluginApi } from "discourse/lib/plugin-api";
 import { isValidSearchTerm, translateResults } from "discourse/lib/search";
 import icon from "discourse-common/helpers/d-icon";
-import I18n from "I18n";
+import I18n, { i18n } from "discourse-i18n";
+import DTooltip from "float-kit/components/d-tooltip";
 import AiIndicatorWave from "../../components/ai-indicator-wave";
 
 export default class SemanticSearch extends Component {
   static shouldRender(_args, { siteSettings }) {
     return siteSettings.ai_embeddings_semantic_search_enabled;
   }
 
-  @service router;
   @service appEvents;
+  @service router;
   @service siteSettings;
   @service searchPreferencesManager;
 
-  @tracked searching = false;
+  @tracked searching;
   @tracked AiResults = [];
   @tracked showingAiResults = false;
+  @tracked sortOrder = this.args.outletArgs.sortOrder;
   initialSearchTerm = this.args.outletArgs.search;
 
+  constructor() {
+    super(...arguments);
+    this.appEvents.on("full-page-search:trigger-search", this, this.onSearch);
+    this.handleSearch();
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.appEvents.off("full-page-search:trigger-search", this, this.onSearch);
+  }
+
+  @action
+  onSearch() {
+    if (!this.searching) {
+      this.resetAiResults();
+      return this.performHyDESearch();
+    }
+  }
+
   get disableToggleSwitch() {
     if (
       this.searching ||
       this.AiResults.length === 0 ||
-      this.args.outletArgs.sortOrder !== 0
+      !this.validSearchOrder
     ) {
       return true;
     }
   }
 
+  get validSearchOrder() {
+    return this.sortOrder === 0;
+  }
+
   get searchStateText() {
+    if (!this.validSearchOrder) {
+      return I18n.t(
+        "discourse_ai.embeddings.semantic_search_results.unavailable"
+      );
+    }
+
     // Search results:
     if (this.AiResults.length > 0) {
       if (this.showingAiResults) {
@@ -89,7 +119,7 @@ export default class SemanticSearch extends Component {
     return (
       this.args.outletArgs.type === SEARCH_TYPE_DEFAULT &&
       isValidSearchTerm(this.searchTerm, this.siteSettings) &&
-      this.args.outletArgs.sortOrder === 0
+      this.validSearchOrder
     );
   }
 
@@ -116,15 +146,13 @@ export default class SemanticSearch extends Component {
       return;
     }
 
-    if (this.initialSearchTerm && !this.searching) {
+    if (this.initialSearchTerm) {
+      this.searching = true;
       return this.performHyDESearch();
     }
-
-    this.#resetAndSearchOnEvent();
   }
 
   performHyDESearch() {
-    this.searching = true;
     this.resetAiResults();
 
     ajax("/discourse-ai/embeddings/semantic-search", {
@@ -134,7 +162,6 @@ export default class SemanticSearch extends Component {
         const model = (await translateResults(results)) || {};
 
         if (model.posts?.length === 0) {
-          this.searching = false;
           return;
         }
 
@@ -144,56 +171,65 @@ export default class SemanticSearch extends Component {
 
         this.AiResults = model.posts;
       })
-      .finally(() => (this.searching = false));
-  }
-
-  #resetAndSearchOnEvent() {
-    return withPluginApi("1.15.0", (api) => {
-      api.onAppEvent("full-page-search:trigger-search", () => {
-        if (!this.searching) {
-          this.resetAiResults();
-          return this.performHyDESearch();
-        }
+      .finally(() => {
+        this.searching = false;
       });
-    });
   }
 
   @action
-  checkQueryParamsAndSearch() {
-    // This check is necessary because handleSearch() isn't called
-    // if query params are present and a new search has appended text.
-    // It ensures AiResults are reset and searched for properly
-    const searchQueryParam = this.router.currentRoute?.queryParams?.q;
-    if (searchQueryParam) {
-      this.#resetAndSearchOnEvent();
+  sortChanged() {
+    if (this.sortOrder !== this.args.outletArgs.sortOrder) {
+      this.sortOrder = this.args.outletArgs.sortOrder;
+
+      if (this.validSearchOrder) {
+        this.handleSearch();
+      } else {
+        this.showingAiResults = false;
+        this.resetAiResults();
+      }
     }
   }
 
   <template>
-    <span {{didInsert this.checkQueryParamsAndSearch}}></span>
-    {{#if this.searchEnabled}}
-      <div class="semantic-search__container search-results" role="region">
-        <div class="semantic-search__results" {{didInsert this.handleSearch}}>
-          <div
-            class="semantic-search__searching
-              {{if this.searching 'in-progress'}}"
-          >
-            <DToggleSwitch
-              disabled={{this.disableToggleSwitch}}
-              @state={{this.showingAiResults}}
-              class="semantic-search__results-toggle"
-              {{on "click" this.toggleAiResults}}
-            />
-
-            <div class="semantic-search__searching-text">
-              {{icon "discourse-sparkles"}}
-              {{this.searchStateText}}
-            </div>
-
-            <AiIndicatorWave @loading={{this.searching}} />
+    <span {{didUpdate this.sortChanged @outletArgs.sortOrder}}></span>
+    <div class="semantic-search__container search-results" role="region">
+      <div class="semantic-search__results">
+        <div
+          class="semantic-search__searching {{if this.searching 'in-progress'}}"
+        >
+          <DToggleSwitch
+            disabled={{this.disableToggleSwitch}}
+            @state={{this.showingAiResults}}
+            class="semantic-search__results-toggle"
+            {{on "click" this.toggleAiResults}}
+          />
+
+          <div class="semantic-search__searching-text">
+            {{icon "discourse-sparkles"}}
+            {{this.searchStateText}}
           </div>
+
+          <AiIndicatorWave @loading={{this.searching}} />
+
+          {{#unless this.validSearchOrder}}
+
+            <DTooltip
+              @identifier="semantic-search-unavailable-tooltip"
+              class="semantic-search__unavailable-tooltip"
+              ...attributes
+            >
+              <:trigger>
+                {{icon "far-circle-question"}}
+              </:trigger>
+              <:content>
+                {{i18n
+                  "discourse_ai.embeddings.semantic_search_unavailable_tooltip"
+                }}
+              </:content>
+            </DTooltip>
+          {{/unless}}
         </div>
       </div>
-    {{/if}}
+    </div>
   </template>
 }

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

@@ -25,7 +25,11 @@
 
       &__searching-text {
         display: inline-block;
-        margin-left: 3px;
+        margin-left: 8px;
+      }
+
+      &__unavailable-tooltip {
+        margin-left: 4px;
       }
     }
 

config/locales/client.en.yml

@@ -483,6 +483,8 @@ en:
           toggle_hidden: "Hiding %{count} results found using AI"
           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_unavailable_tooltip: "Search results must be sorted by Relevance to display AI results."
         ai_generated_result: "Search result found using AI"
         quick_search:
           suffix: "in all topics and posts with AI"

plugin.rb

@@ -43,6 +43,8 @@
 
 register_asset "stylesheets/modules/ai-bot/common/ai-artifact.scss"
 
+register_svg_icon "far-circle-question" if respond_to?(:register_svg_icon)
+
 module ::DiscourseAi
   PLUGIN_NAME = "discourse-ai"