feat(v4): Add support for multi-index search (#2736)

* feat(v4): Add support for multi-index search

* feat(docs): Document new indices property and mark indeName and searchParameters as deprecated

---------

Co-authored-by: Dylan Tientcheu <[email protected]>

Author: 8bittitan

examples/demo-react/src/App.tsx

@@ -7,6 +7,7 @@ import '@docsearch/css/dist/style.css';
 
 import Basic from './examples/basic';
 import BasicAskAI from './examples/basic-askai';
+import MultiIndex from './examples/multi-index';
 import WHitComponent from './examples/w-hit-component';
 import WTransformItems from './examples/w-hit-transformItems';
 
@@ -47,6 +48,13 @@ function App(): JSX.Element {
               <WTransformItems />
             </div>
           </section>
+
+          <section className="demo-section">
+            <p className="section-description">multi index search</p>
+            <div className="search-wrapper">
+              <MultiIndex />
+            </div>
+          </section>
         </main>
       </div>
     </div>

examples/demo-react/src/examples/multi-index.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { DocSearch } from '@docsearch/react';
+import type { JSX } from 'react';
+
+export default function MultiIndex(): JSX.Element {
+  return (
+    <DocSearch
+      indices={[
+        {
+          name: 'docsearch',
+        },
+        {
+          name: 'tailwindcss',
+        },
+        {
+          name: 'kubernetes',
+        },
+      ]}
+      appId="PMZUYBQDAK"
+      apiKey="24b09689d5b4223813d9b8e48563c8f6"
+      translations={{ button: { buttonText: 'Multi index search' } }}
+      insights={true}
+    />
+  );
+}

packages/docsearch-react/src/DocSearch.tsx

@@ -51,6 +51,11 @@ export type DocSearchAskAi = {
   };
 };
 
+export interface DocSearchIndex {
+  name: string;
+  searchParameters?: SearchParamsObject;
+}
+
 export interface DocSearchProps {
   /**
    * Algolia application id used by the search client.
@@ -62,8 +67,16 @@ export interface DocSearchProps {
   apiKey: string;
   /**
    * Name of the algolia index to query.
+   *
+   * @deprecated `indexName` will be removed in a future version. Please use `indices` property going forward.
+   */
+  indexName?: string;
+  /**
+   * List of indices and _optional_ searchParameters to be used for search.
+   *
+   * @see {@link https://docsearch.algolia.com/docs/api#indices}
    */
-  indexName: string;
+  indices?: Array<DocSearchIndex | string>;
   /**
    * Configuration or assistant id to enable ask ai mode. Pass a string assistant id or a full config object.
    */
@@ -78,6 +91,8 @@ export interface DocSearchProps {
   placeholder?: string;
   /**
    * Additional algolia search parameters to merge into each query.
+   *
+   * @deprecated `searchParameters` will be removed in a future version. Please use `indices` property going forward.
    */
   searchParameters?: SearchParamsObject;
   /**
@@ -142,7 +157,7 @@ export interface DocSearchProps {
   recentSearchesWithFavoritesLimit?: number;
 }
 
-export function DocSearch({ ...props }: DocSearchProps): JSX.Element {
+export function DocSearch({ indexName, searchParameters, indices = [], ...props }: DocSearchProps): JSX.Element {
   const searchButtonRef = React.useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [initialQuery, setInitialQuery] = React.useState<string | undefined>(props?.initialQuery || undefined);
@@ -200,6 +215,26 @@ export function DocSearch({ ...props }: DocSearchProps): JSX.Element {
   });
   useTheme({ theme: props.theme });
 
+  // Format the `indexes` to be used until `indexName` and `searchParameters` props are fully removed.
+  const indexes: DocSearchIndex[] = [];
+
+  if (indexName && indexName !== '') {
+    indexes.push({
+      name: indexName,
+      searchParameters,
+    });
+  }
+
+  if (indices.length > 0) {
+    indices.forEach((index) => {
+      indexes.push(typeof index === 'string' ? { name: index } : index);
+    });
+  }
+
+  if (indexes.length < 1) {
+    throw new Error('Must supply either `indexName` or `indices` for DocSearch to work');
+  }
+
   return (
     <>
       <DocSearchButton ref={searchButtonRef} translations={props?.translations?.button} onClick={onOpen} />
@@ -214,6 +249,7 @@ export function DocSearch({ ...props }: DocSearchProps): JSX.Element {
             translations={props?.translations?.modal}
             isAskAiActive={isAskAiActive}
             canHandleAskAi={canHandleAskAi}
+            indexes={indexes}
             onAskAiToggle={onAskAiToggle}
             onClose={onClose}
           />,