feat: Add recent searches limit param (#2704)

packages/docsearch-react/src/DocSearch.tsx

@@ -70,6 +70,18 @@ export interface DocSearchProps {
   translations?: DocSearchTranslations;
   getMissingResultsUrl?: ({ query }: { query: string }) => string;
   insights?: AutocompleteOptions<InternalDocSearchHit>['insights'];
+  /**
+   * Limit of how many recent searches that should be saved/displayed.
+   *
+   * @default 7
+   */
+  recentSearchesLimit?: number;
+  /**
+   * Limit of how many recent searches that should be saved/displayed when there are favorited searches.
+   *
+   * @default 4
+   */
+  recentSearchesWithFavoritesLimit?: number;
 }
 
 export function DocSearch({ ...props }: DocSearchProps): JSX.Element {

packages/docsearch-react/src/DocSearchModal.tsx

@@ -282,6 +282,8 @@ export function DocSearchModal({
   onAskAiToggle,
   isAskAiActive = false,
   canHandleAskAi = false,
+  recentSearchesLimit = 7,
+  recentSearchesWithFavoritesLimit = 4,
 }: DocSearchModalProps): JSX.Element {
   const { footer: footerTranslations, searchBox: searchBoxTranslations, ...screenStateTranslations } = translations;
   const [state, setState] = React.useState<DocSearchState<InternalDocSearchHit>>({
@@ -320,9 +322,7 @@ export function DocSearchModal({
   const recentSearches = React.useRef(
     createStoredSearches<StoredDocSearchHit>({
       key: `__DOCSEARCH_RECENT_SEARCHES__${indexName}`,
-      // We display 7 recent searches and there's no favorites, but only
-      // 4 when there are favorites.
-      limit: favoriteSearches.getAll().length === 0 ? 7 : 4,
+      limit: favoriteSearches.getAll().length === 0 ? recentSearchesLimit : recentSearchesWithFavoritesLimit,
     }),
   ).current;
 
@@ -523,7 +523,9 @@ export function DocSearchModal({
           return [...noQuerySources, ...recentConversationSource];
         }
 
-        const querySourcesState: BuildQuerySourcesState = { context: sourcesState.context };
+        const querySourcesState: BuildQuerySourcesState = {
+          context: sourcesState.context,
+        };
 
         // Algolia sources
         const algoliaSourcesPromise = buildQuerySources({

packages/website/docs/api.mdx

@@ -458,6 +458,84 @@ docsearch({
 
 </Tabs>
 
+## `recentSearchesLimit`
+
+> `type: number` | `default: 7` | **optional**
+
+The maximum number of recent searches that are stored for the user. Default is 7.
+
+<Tabs
+  groupId="language"
+  defaultValue="js"
+  values={[
+    { label: 'JavaScript', value: 'js' },
+    { label: 'React', value: 'react' }
+  ]}
+>
+<TabItem value="js">
+
+```js
+docsearch({
+  // ...
+  recentSearchesLimit: 12
+  // ...
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```jsx
+<DocSearch
+  // ...
+  recentSearchesLimit={12}
+  // ...
+/>
+```
+
+</TabItem>
+</Tabs>
+
+## `recentSearchesWithFavoritesLimit`
+
+> `type: number` | `default: 4` | **optional**
+
+The maximum number of recent searches that are stored when the user has favorited searches. Default is 4.
+
+<Tabs
+  groupId="language"
+  defaultValue="js"
+  values={[
+    { label: 'JavaScript', value: 'js' },
+    { label: 'React', value: 'react' }
+  ]}
+>
+<TabItem value="js">
+
+```js
+docsearch({
+  // ...
+  recentSearchesWithFavoritesLimit: 5
+  // ...
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```jsx
+<DocSearch
+  // ...
+  recentSearchesWithFavoritesLimit={5}
+  // ...
+/>
+```
+
+</TabItem>
+</Tabs>
+
 [1]: https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/
 [2]: https://github.com/algolia/docsearch/
 [3]: https://github.com/algolia/docsearch/tree/master