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,67 +2,99 @@ 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.onSearch();
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.appEvents.off("full-page-search:trigger-search", this, this.onSearch);
+  }
+
+  @action
+  onSearch() {
+    if (!this.searchEnabled) {
+      return;
+    }
+
+    this.initialSearchTerm = this.args.outletArgs.search;
+    this.searching = true;
+    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() {
-    // Search results:
-    if (this.AiResults.length > 0) {
-      if (this.showingAiResults) {
-        return I18n.t(
-          "discourse_ai.embeddings.semantic_search_results.toggle",
-          {
-            count: this.AiResults.length,
-          }
-        );
-      } else {
-        return I18n.t(
-          "discourse_ai.embeddings.semantic_search_results.toggle_hidden",
-          {
-            count: this.AiResults.length,
-          }
-        );
-      }
+    if (!this.validSearchOrder) {
+      return I18n.t(
+        "discourse_ai.embeddings.semantic_search_results.unavailable"
+      );
     }
 
     // Search loading:
     if (this.searching) {
       return I18n.t("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", {
+        count: this.AiResults.length,
+      });
+    }
+
+    // We have results but are hiding them
+    if (this.AiResults.length && !this.showingAiResults) {
+      return I18n.t(
+        "discourse_ai.embeddings.semantic_search_results.toggle_hidden",
+        {
+          count: this.AiResults.length,
+        }
+      );
+    }
+
     // Typing to search:
     if (
       this.AiResults.length === 0 &&
@@ -89,7 +121,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
     );
   }
 
@@ -110,21 +142,7 @@ export default class SemanticSearch extends Component {
     this.args.outletArgs.addSearchResults([], "topic_id");
   }
 
-  @action
-  handleSearch() {
-    if (!this.searchEnabled) {
-      return;
-    }
-
-    if (this.initialSearchTerm && !this.searching) {
-      return this.performHyDESearch();
-    }
-
-    this.#resetAndSearchOnEvent();
-  }
-
   performHyDESearch() {
-    this.searching = true;
     this.resetAiResults();
 
     ajax("/discourse-ai/embeddings/semantic-search", {
@@ -134,7 +152,6 @@ export default class SemanticSearch extends Component {
         const model = (await translateResults(results)) || {};
 
         if (model.posts?.length === 0) {
-          this.searching = false;
           return;
         }
 
@@ -144,56 +161,68 @@ 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.onSearch();
+      } 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>
+    <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'}}
+            {{unless this.validSearchOrder 'unavailable'}}"
+        >
+          <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>
 
+          {{#if this.validSearchOrder}}
             <AiIndicatorWave @loading={{this.searching}} />
-          </div>
+          {{/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}}
         </div>
       </div>
-    {{/if}}
+    </div>
   </template>
 }

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

@@ -16,7 +16,8 @@
         display: flex;
         align-items: center;
 
-        &.in-progress {
+        &.in-progress,
+        &.unavailable {
           .semantic-search__searching-text {
             color: var(--primary-medium);
           }
@@ -25,7 +26,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"

lib/embeddings/entry_point.rb

@@ -4,6 +4,9 @@ module DiscourseAi
   module Embeddings
     class EntryPoint
       def inject_into(plugin)
+        # far-circle-question used by semantic search unavailable tooltip
+        plugin.register_svg_icon "far-circle-question" if plugin.respond_to?(:register_svg_icon)
+
         # Include random topics in the suggested list *only* if there are no related topics.
         plugin.register_modifier(
           :topic_view_suggested_topics_options,