feat(askai): add facet filtering (#2676)

examples/demo-askai/src/App.tsx

@@ -12,7 +12,12 @@ function App(): JSX.Element {
         indexName="docsearch"
         appId="PMZUYBQDAK"
         apiKey="24b09689d5b4223813d9b8e48563c8f6"
-        askAi="askAIDemo"
+        askAi={{
+          assistantId: 'askAIDemo',
+          searchParameters: {
+            facetFilters: ['language:en'],
+          },
+        }}
         insights={true}
       />
     </div>

packages/docsearch-css/src/button.css

@@ -10,7 +10,6 @@
   width: 320px;
   height: 36px;
   justify-content: space-between;
-  margin: 0 0 0 16px;
   padding: 0 8px;
   user-select: none;
 }
@@ -54,8 +53,8 @@
   color: var(--docsearch-key-color);
   box-shadow: none !important;
   display: flex;
-  height: 20px;
-  width: 20px;
+  height: 24px;
+  width: 24px;
   justify-content: center;
   position: relative;
   border: 0;

packages/docsearch-react/src/DocSearch.tsx

@@ -43,6 +43,12 @@ export type DocSearchAskAi = {
    * The assistant ID to use for the ask AI feature.
    */
   assistantId: string | null;
+  /**
+   * The search parameters to use for the ask AI feature.
+   */
+  searchParameters?: {
+    facetFilters?: SearchParamsObject['facetFilters'];
+  };
 };
 
 export interface DocSearchProps {

packages/docsearch-react/src/DocSearchModal.tsx

@@ -330,6 +330,7 @@ export function DocSearchModal({
 
   const askAiConfig = typeof askAi === 'object' ? askAi : null;
   const askAiConfigurationId = typeof askAi === 'string' ? askAi : askAiConfig?.assistantId || null;
+  const askAiSearchParameters = askAiConfig?.searchParameters;
 
   const [askAiStreamError, setAskAiStreamError] = React.useState<Error | null>(null);
 
@@ -363,6 +364,7 @@ export function DocSearchModal({
       'X-Algolia-Index-Name': askAiConfig?.indexName || indexName,
       'X-Algolia-Assistant-Id': askAiConfigurationId || '',
     },
+    body: askAiSearchParameters ? { searchParameters: askAiSearchParameters } : {},
     onError(streamError) {
       setAskAiStreamError(streamError);
     },

packages/website/docs/api.mdx

@@ -87,7 +87,7 @@ docsearch({
 });
 ```
 
-or
+or if you want to use different credentials for askAi and add search parameters
 
 ```js
 docsearch({
@@ -97,6 +97,9 @@ docsearch({
     apiKey: 'ANOTHER_SEARCH_API_KEY',
     appId: 'ANOTHER_APP_ID',
     assistantId: 'YOUR_ALGOLIA_ASSISTANT_ID',
+    searchParameters: {
+      facetFilters: ['language:en'],
+    },
   },
   // ...
 });

packages/website/docs/docsearch.mdx

@@ -204,6 +204,8 @@ docsearch({
 
 ### Filtering search results
 
+#### Keyword search
+
 If your website uses [DocSearch meta tags][13] or if you've added [custom variables to your config][14], you'll be able to use the [`facetFilters`][16] option to scope your search results to a [`facet`][15]
 
 This is useful to limit the scope of the search to one language or one version.
@@ -242,6 +244,54 @@ docsearch({
 
 </Tabs>
 
+#### AskAI
+
+Filtering also applies when using AskAI. This is useful to limit the scope of the LLM's search to only relevant results.
+
+:::info
+We recommend using the `facetFilters` option when using AskAI with multiple languages or any multi-faceted index.
+:::
+
+<Tabs
+  groupId="language"
+  defaultValue="js"
+  values={[
+    { label: 'JavaScript', value: 'js', },
+    { label: 'React', value: 'react', }
+  ]
+}>
+<TabItem value="js">
+```js
+docsearch({
+  askAi: {
+    assistantId: 'YOUR_ALGOLIA_ASSISTANT_ID',
+    searchParameters: {
+      facetFilters: ['language:en', 'version:1.0.0'],
+    },
+  },
+});
+```
+</TabItem>
+
+<TabItem value="react">
+```js
+
+```
+
+```jsx
+<DocSearch
+  askAi={{
+    assistantId: 'YOUR_ALGOLIA_ASSISTANT_ID',
+    searchParameters: {
+      facetFilters: ['language:en', 'version:1.0.0'],
+    },
+  }}
+/>
+```
+</TabItem>
+
+</Tabs>
+
 ### Sending events
 
 You can send search events to your DocSearch index by passing in the `insights` parameter when creating your DocSearch instance.
@@ -256,12 +306,10 @@ You can send search events to your DocSearch index by passing in the `insights`
 }>
 <TabItem value="js">
 
-```js
+```diff
 docsearch({
-  searchParameters: {
-    facetFilters: ['language:en', 'version:1.0.0'],
-  },
-  insights: true,
+   // other options
++  insights: true,
 });
 ```
 
@@ -269,12 +317,10 @@ docsearch({
 
 <TabItem value="react">
 
-```jsx
+```diff
 <DocSearch
-  searchParameters={{
-    facetFilters: ['language:en', 'version:1.0.0'],
-  }}
-  insights
+  // other options
++  insights={true}
 />
 ```