FEATURE: Unavailable state for semantic search when sort is not Relevant (#1030)

This commit adds an "unavailable" state for the AI semantic search toggle. Currently the AI toggle disappears when the sort by is anything but Relevance which makes the UI confusing for users looking for AI results. This should help!

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

@@ -2,15 +2,15 @@ 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 {
@@ -18,37 +18,75 @@ export default class SemanticSearch extends Component {
     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 searchStateText() {
+  get validSearchOrder() {
-    // Search results:
+    return this.sortOrder === 0;
-    if (this.AiResults.length > 0) {
-      if (this.showingAiResults) {
-        return I18n.t(
-          "discourse_ai.embeddings.semantic_search_results.toggle",
-          {
-            count: this.AiResults.length,
   }
+
+  get searchStateText() {
+    if (!this.validSearchOrder) {
+      return I18n.t(
+        "discourse_ai.embeddings.semantic_search_results.unavailable"
       );
-      } else {
+    }
+
+    // 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",
         {
@@ -56,12 +94,6 @@ export default class SemanticSearch extends Component {
         }
       );
     }
-    }
-
-    // Search loading:
-    if (this.searching) {
-      return I18n.t("discourse_ai.embeddings.semantic_search_loading");
-    }
 
     // Typing to search:
     if (
@@ -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,39 +161,33 @@ export default class SemanticSearch extends Component {
 
         this.AiResults = model.posts;
       })
-      .finally(() => (this.searching = false));
+      .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();
-        }
-      });
       });
   }
 
   @action
-  checkQueryParamsAndSearch() {
+  sortChanged() {
-    // This check is necessary because handleSearch() isn't called
+    if (this.sortOrder !== this.args.outletArgs.sortOrder) {
-    // if query params are present and a new search has appended text.
+      this.sortOrder = this.args.outletArgs.sortOrder;
-    // It ensures AiResults are reset and searched for properly
+
-    const searchQueryParam = this.router.currentRoute?.queryParams?.q;
+      if (this.validSearchOrder) {
-    if (searchQueryParam) {
+        this.onSearch();
-      this.#resetAndSearchOnEvent();
+      } else {
+        this.showingAiResults = false;
+        this.resetAiResults();
+      }
     }
   }
 
   <template>
-    <span {{didInsert this.checkQueryParamsAndSearch}}></span>
+    <span {{didUpdate this.sortChanged @outletArgs.sortOrder}}></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__results">
         <div
           class="semantic-search__searching
-              {{if this.searching 'in-progress'}}"
+            {{if this.searching 'in-progress'}}
+            {{unless this.validSearchOrder 'unavailable'}}"
         >
           <DToggleSwitch
             disabled={{this.disableToggleSwitch}}
@@ -190,10 +201,28 @@ export default class SemanticSearch extends Component {
             {{this.searchStateText}}
           </div>
 
+          {{#if this.validSearchOrder}}
             <AiIndicatorWave @loading={{this.searching}} />
-          </div>
-        </div>
-      </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>
+    </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,