DEV: Mix semantic search results with normal results (#278)

assets/javascripts/discourse/connectors/after-search-result-entry/search-result-decoration.gjs

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import icon from "discourse-common/helpers/d-icon";
+
+export default class SearchResultDecoration extends Component {
+  <template>
+    <div class="ai-result__icon">
+      {{icon "discourse-sparkles"}}
+    </div>
+  </template>
+}

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

@@ -0,0 +1,148 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import I18n from "I18n";
+import { tracked } from "@glimmer/tracking";
+import { ajax } from "discourse/lib/ajax";
+import { isValidSearchTerm, translateResults } from "discourse/lib/search";
+import discourseDebounce from "discourse-common/lib/debounce";
+import { inject as service } from "@ember/service";
+import { bind } from "discourse-common/utils/decorators";
+import { SEARCH_TYPE_DEFAULT } from "discourse/controllers/full-page-search";
+import DToggleSwitch from "discourse/components/d-toggle-switch";
+import { on } from "@ember/modifier";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
+import icon from "discourse-common/helpers/d-icon";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import { withPluginApi } from "discourse/lib/plugin-api";
+
+export default class SemanticSearch extends Component {
+  <template>
+    {{#if this.searchEnabled}}
+      <div class="semantic-search__container search-results" role="region">
+        <div
+          class="semantic-search__results"
+          {{didInsert this.performHyDESearch}}
+        >
+          <div
+            class="semantic-search__searching
+              {{if this.searching 'in-progress'}}"
+          >
+            <DToggleSwitch
+              disabled={{this.searching}}
+              @state={{this.showingAIResults}}
+              title="AI search results hidden"
+              class="semantic-search__results-toggle"
+              {{on "click" this.toggleAIResults}}
+            />
+
+            <div class="semantic-search__searching-text">
+              {{icon "discourse-sparkles"}}
+              {{this.searchStateText}}
+            </div>
+
+            {{#if this.searching}}
+              <span class="semantic-search__indicator-wave">
+                <span class="semantic-search__indicator-dot">.</span>
+                <span class="semantic-search__indicator-dot">.</span>
+                <span class="semantic-search__indicator-dot">.</span>
+              </span>
+            {{/if}}
+          </div>
+        </div>
+      </div>
+    {{/if}}
+  </template>
+
+  static shouldRender(_args, { siteSettings }) {
+    return siteSettings.ai_embeddings_semantic_search_enabled;
+  }
+
+  @service appEvents;
+  @service siteSettings;
+
+  @tracked searching = false;
+  @tracked AIResults = [];
+  @tracked showingAIResults = false;
+
+  get searchStateText() {
+    if (this.searching) {
+      return I18n.t("discourse_ai.embeddings.semantic_search_loading");
+    }
+
+    if (this.AIResults.length === 0) {
+      return I18n.t("discourse_ai.embeddings.semantic_search_results.none");
+    }
+
+    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,
+          }
+        );
+      }
+    }
+  }
+
+  get searchTerm() {
+    return this.args.outletArgs.search;
+  }
+
+  get searchEnabled() {
+    return (
+      this.args.outletArgs.type === SEARCH_TYPE_DEFAULT &&
+      isValidSearchTerm(this.searchTerm, this.siteSettings)
+    );
+  }
+
+  @action
+  toggleAIResults() {
+    document.body.classList.toggle("showing-ai-results");
+    this.showingAIResults = !this.showingAIResults;
+  }
+
+  @action
+  resetAIResults() {
+    this.AIResults = [];
+    this.showingAIResults = false;
+    document.body.classList.remove("showing-ai-results");
+  }
+
+  @action
+  performHyDESearch() {
+    if (!this.searchEnabled) {
+      return;
+    }
+
+    withPluginApi("1.15.0", (api) => {
+      api.onAppEvent("full-page-search:trigger-search", () => {
+        this.searching = true;
+        this.resetAIResults();
+
+        ajax("/discourse-ai/embeddings/semantic-search", {
+          data: { q: this.searchTerm },
+        })
+          .then(async (results) => {
+            const model = (await translateResults(results)) || {};
+            const AIResults = model.posts.map(function (post) {
+              return Object.assign({}, post, { generatedByAI: true });
+            });
+
+            this.args.outletArgs.addSearchResults(AIResults, "topic_id");
+            this.AIResults = AIResults;
+          })
+          .catch(popupAjaxError)
+          .finally(() => (this.searching = false));
+      });
+    });
+  }
+}

assets/javascripts/initializers/ai-semantic-search.js

@@ -0,0 +1,9 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("1.15.0", (api) => {
+  api.modifyClass("component:search-result-entry", {
+    pluginId: "discourse-ai",
+
+    classNameBindings: ["bulkSelectEnabled", "post.generatedByAI:ai-result"],
+  });
+});

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

@@ -8,13 +8,26 @@
     align-items: baseline;
 
     .semantic-search {
+      &__searching {
+        display: flex;
+        align-items: center;
+
+        &.in-progress {
+          .semantic-search__searching-text {
+            color: var(--primary-medium);
+          }
+        }
+      }
+
       &__searching-text {
         display: inline-block;
         margin-left: 3px;
       }
+
       &__indicator-wave {
         flex: 0 0 auto;
         display: inline-flex;
+        color: var(--primary-medium);
       }
       &__indicator-dot {
         display: inline-block;
@@ -37,3 +50,33 @@
     }
   }
 }
+
+.search-results {
+  .fps-result {
+    padding: 0.5rem;
+
+    .ai-result__icon {
+      display: none;
+    }
+  }
+
+  .ai-result {
+    display: none;
+    background: var(--tertiary-very-low);
+    border-radius: var(--d-border-radius);
+
+    .ai-result__icon {
+      display: inline;
+      margin-right: 0.5rem;
+      margin-left: auto;
+      font-size: var(--font-up-2);
+      color: var(--tertiary);
+    }
+  }
+}
+
+.showing-ai-results {
+  .ai-result {
+    display: flex;
+  }
+}

config/locales/client.en.yml

@@ -80,7 +80,8 @@ en:
         semantic_search: "Topics (Semantic)"
         semantic_search_loading: "Searching for more results using AI"
         semantic_search_results:
-          toggle: "Found %{count} results using AI"
+          toggle: "Showing %{count} results found using AI"
+          toggle_hidden: "Hiding %{count} results found using AI"
           none: "Sorry, our AI search found no matching topics."
 
       ai_bot: