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

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

@@ -59,6 +59,67 @@ const hits: Hit<any> = [
     },
   },
 ];
+const multiIndexHits: Hit<any> = [
+  {
+    index_1: {
+      exact_nb_hits: 100,
+      facets: {
+        exact_matches: {
+          data_origin: [
+            {
+              value: 'Index 1',
+              count: 100,
+            },
+          ],
+          categories: [
+            {
+              value: 'Appliances',
+              count: 252,
+            },
+            {
+              value: 'Ranges, Cooktops & Ovens',
+              count: 229,
+            },
+          ],
+        },
+      },
+    },
+    index_2: {
+      exact_nb_hits: 200,
+      facets: {
+        exact_matches: {
+          data_origin: [
+            {
+              value: 'Index 2',
+              count: 200,
+            },
+          ],
+          genre: [
+            {
+              value: 'Poetry',
+              count: 340,
+            },
+            {
+              value: 'Fiction',
+              count: 140,
+            },
+          ],
+        },
+      },
+    },
+    nb_words: 1,
+    popularity: 1230,
+    query: 'cooktop',
+    objectID: 'cooktop',
+    _highlightResult: {
+      query: {
+        value: 'cooktop',
+        matchLevel: 'none',
+        matchedWords: [],
+      },
+    },
+  },
+];
 /* eslint-enable @typescript-eslint/camelcase */
 
 const searchClient = createSearchClient({
@@ -512,6 +573,83 @@ describe('createQuerySuggestionsPlugin', () => {
     });
   });
 
+  test('accumulates suggestion categories from multiple indexes and attributes', 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',
+        ],
+        [
+          'index_1',
+          'facets',
+          'exact_matches',
+          'categories',
+        ],
+        [
+          'index_2',
+          'facets',
+          'exact_matches',
+          'genre',
+        ]
+      ],
+      categoriesPerItem: 6,
+    });
+
+    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 Poetry', // Category item
+        'in Appliances', // Category item
+        'in Ranges, Cooktops & Ovens', // Category item
+        'in Index 2', // Category item
+        'in Fiction', // 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
@@ -43,13 +47,21 @@ export type CreateQuerySuggestionsPluginParams<
     onTapAhead(item: TItem): void;
   }): AutocompleteSource<TItem>;
   /**
-   * The attribute or attribute path to display categories for.
+   * The attribute, attribute path, or array of paths to display categories for.
    *
    * @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"],
+   *   ]
+   * @example [
+   *     ["index_1", "facets", "exact_matches", "attr_1"],
+   *     ["index_2", "facets", "exact_matches", "attr_2"],
+   *   ]
    * @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.
    *
@@ -118,6 +130,7 @@ export function createQuerySuggestionsPlugin<
                   }
 
                   let itemsWithCategoriesAdded = 0;
+
                   return querySuggestionsHits.reduce<
                     Array<AutocompleteQuerySuggestionsHit<typeof indexName>>
                   >((acc, current) => {
@@ -126,14 +139,29 @@ export function createQuerySuggestionsPlugin<
                     > = [current];
 
                     if (itemsWithCategoriesAdded < itemsWithCategories) {
-                      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);
+
+                        return attrVal
+                          ? totalCategories.concat(attrVal)
+                          : totalCategories;
+                      }, []);
+
+                      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,