feat(plugins): allow multi-index categoryAttribute in query suggestions

packages/autocomplete-plugin-query-suggestions/src/__tests__/createQuerySuggestionsPlugin.test.ts

@@ -46,6 +46,47 @@ const hits: Hit<any> = [
     },
   },
 ];
+const multiIndexHits: Hit<any> = [
+  {
+    index_1: {
+      exact_nb_hits: 100,
+      facets: {
+        exact_matches: {
+          data_origin: [
+            {
+              value: 'Index 1',
+              count: 100,
+            },
+          ],
+        },
+      },
+    },
+    index_2: {
+      exact_nb_hits: 200,
+      facets: {
+        exact_matches: {
+          data_origin: [
+            {
+              value: 'Index 2',
+              count: 200,
+            },
+          ],
+        },
+      },
+    },
+    nb_words: 1,
+    popularity: 1230,
+    query: 'cooktop',
+    objectID: 'cooktop',
+    _highlightResult: {
+      query: {
+        value: 'cooktop',
+        matchLevel: 'none',
+        matchedWords: [],
+      },
+    },
+  },
+];
 /* eslint-enable @typescript-eslint/camelcase */
 
 const searchClient = createSearchClient({
@@ -394,6 +435,67 @@ describe('createQuerySuggestionsPlugin', () => {
     });
   });
 
+  test('accumulates suggestion categories from multiple indexes', async () => {
+    castToJestMock(searchClient.search).mockReturnValueOnce(
+      Promise.resolve(
+        createMultiSearchResponse({
+          hits: multiIndexHits,
+        })
+      )
+    );
+
+    const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+      searchClient,
+      indexName: 'indexName',
+      categoryAttribute: [
+        [
+          'index_1',
+          'facets',
+          'exact_matches',
+          'data_origin',
+        ],
+        [
+          'index_2',
+          'facets',
+          'exact_matches',
+          'data_origin',
+        ]
+      ],
+      categoriesPerItem: 2,
+    });
+
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+
+    autocomplete({
+      container,
+      panelContainer,
+      plugins: [querySuggestionsPlugin],
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        within(
+          panelContainer.querySelector(
+            '[data-autocomplete-source-id="querySuggestionsPlugin"]'
+          )
+        )
+          .getAllByRole('option')
+          .map((option) => option.textContent)
+      ).toEqual([
+        'cooktop', // Query Suggestions item
+        'in Index 2', // Category item
+        'in Index 1', // Category item
+      ]);
+    });
+  });
+
   test('fills the input with the query item key followed by a space on tap ahead', async () => {
     const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       searchClient,

packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts

@@ -9,7 +9,11 @@ import { SearchOptions } from '@algolia/client-search';
 import { SearchClient } from 'algoliasearch/lite';
 
 import { getTemplates } from './getTemplates';
-import { AutocompleteQuerySuggestionsHit, QuerySuggestionsHit } from './types';
+import {
+  AutocompleteQuerySuggestionsHit,
+  QuerySuggestionsHit,
+  QuerySuggestionsFacetValue,
+} from './types';
 
 export type CreateQuerySuggestionsPluginParams<
   TItem extends QuerySuggestionsHit
@@ -45,11 +49,23 @@ export type CreateQuerySuggestionsPluginParams<
   /**
    * The attribute or attribute path to display categories for.
    *
+   * If suggestion index is connected to multiple indexes, array of paths can be used.
+   * The assumption in this case is that a single category gets split across multiple indexes,
+   * having a uniform value per index, so the total matches for category values will be accumulated
+   * by picking the first match per each path (and it should only have one).
+   *
+   * Multiple attribute names can be used if required, but they should all designate a single "entity",
+   * even if having different names.
+   *
    * @example ["instant_search", "facets", "exact_matches", "categories"]
    * @example ["instant_search", "facets", "exact_matches", "hierarchicalCategories.lvl0"]
+   * @example [
+   *     ["index_1", "facets", "exact_matches", "data_origin"],
+   *     ["index_2", "facets", "exact_matches", "data_origin"],
+   *   ]
    * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions/createQuerySuggestionsPlugin/#param-categoryattribute
    */
-  categoryAttribute?: string | string[];
+  categoryAttribute?: string | string[] | string[][];
   /**
    * How many items to display categories for.
    *
@@ -125,12 +141,34 @@ export function createQuerySuggestionsPlugin<
                     > = [current];
 
                     if (i <= itemsWithCategories - 1) {
-                      const categories = getAttributeValueByPath(
-                        current,
-                        Array.isArray(categoryAttribute)
-                          ? categoryAttribute
-                          : [categoryAttribute]
-                      )
+                      let paths = (Array.isArray(categoryAttribute[0])
+                        ? categoryAttribute
+                        : [categoryAttribute]) as string[][];
+
+                      if (typeof categoryAttribute === 'string') {
+                        paths = [[categoryAttribute]];
+                      }
+
+                      const categoriesValues = paths.reduce<
+                        QuerySuggestionsFacetValue[]
+                      >((totalCategories, path) => {
+                        const attrVal = getAttributeValueByPath(current, path);
+
+                        if (!attrVal) {
+                          return totalCategories;
+                        }
+
+                        // use only the first facet value if multiple indexes needs to be targeted by multiple paths
+                        return totalCategories.concat(
+                          paths.length > 1 ? attrVal[0] : attrVal
+                        );
+                      }, []);
+
+                      if (paths.length > 1) {
+                        categoriesValues.sort((a, b) => b.count - a.count);
+                      }
+
+                      const categories = categoriesValues
                         .map((x) => x.value)
                         .slice(0, categoriesPerItem);
 

packages/autocomplete-plugin-query-suggestions/src/types/QuerySuggestionsHit.ts

@@ -1,6 +1,6 @@
 import { Hit } from '@algolia/client-search';
 
-type QuerySuggestionsFacetValue = { value: string; count: number };
+export type QuerySuggestionsFacetValue = { value: string; count: number };
 
 type QuerySuggestionsIndexMatch<TKey extends string> = Record<
   TKey,