react-instantsearch 7.26.0 → 7.27.0

package/dist/es/widgets/Autocomplete.js

@@ -4,10 +4,12 @@ import { _ } from '@swc/helpers/cjs/_object_without_properties.cjs';
 import { _ as _$5 } from '@swc/helpers/cjs/_sliced_to_array.cjs';
 import { _ as _$2 } from '@swc/helpers/cjs/_to_consumable_array.cjs';
 import { _ as _$3 } from '@swc/helpers/cjs/_type_of.cjs';
-import { createAutocompleteComponent, createAutocompletePanelComponent, createAutocompleteIndexComponent, createAutocompleteSuggestionComponent, createAutocompleteRecentSearchComponent, createAutocompleteDetachedContainerComponent, createAutocompleteDetachedOverlayComponent, createAutocompleteDetachedFormContainerComponent, createAutocompleteDetachedSearchButtonComponent, createAutocompletePropGetters, createAutocompleteStorage, cx } from 'instantsearch-ui-components';
-import React, { createElement, Fragment, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createAutocompleteComponent, createAutocompletePanelComponent, createAutocompleteIndexComponent, createAutocompleteSuggestionComponent, createAutocompletePromptSuggestionComponent, createAutocompleteRecentSearchComponent, createAutocompleteDetachedContainerComponent, createAutocompleteDetachedOverlayComponent, createAutocompleteDetachedFormContainerComponent, createAutocompleteDetachedSearchButtonComponent, createAutocompletePropGetters, createAutocompleteStorage, cx, getPromptSuggestionHits, isPromptSuggestion } from 'instantsearch-ui-components';
+import 'instantsearch.js/es/lib/utils/index.js';
+import React, { createElement, Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { useInstantSearch, useSearchBox, Index, Configure, useAutocomplete } from 'react-instantsearch-core';
 import { AutocompleteSearch } from '../components/AutocompleteSearch.js';
+import { Highlight } from './Highlight.js';
 import { ReverseHighlight } from './ReverseHighlight.js';
 
 var Autocomplete = createAutocompleteComponent({
@@ -26,6 +28,10 @@ var AutocompleteSuggestion = createAutocompleteSuggestionComponent({
     createElement: createElement,
     Fragment: Fragment
 });
+var AutocompletePromptSuggestion = createAutocompletePromptSuggestionComponent({
+    createElement: createElement,
+    Fragment: Fragment
+});
 var AutocompleteRecentSearch = createAutocompleteRecentSearchComponent({
     createElement: createElement,
     Fragment: Fragment
@@ -46,9 +52,14 @@ var AutocompleteDetachedSearchButton = createAutocompleteDetachedSearchButtonCom
     createElement: createElement,
     Fragment: Fragment
 });
+var id = 0;
 var usePropGetters = createAutocompletePropGetters({
     useEffect: useEffect,
-    useId: useId,
+    useId: React.useId || function() {
+        return React.useState(function() {
+            return (id++).toString();
+        });
+    },
     useMemo: useMemo,
     useRef: useRef,
     useState: useState
@@ -178,9 +189,10 @@ function getMediaQueryList(mediaQuery) {
     };
 }
 function EXPERIMENTAL_Autocomplete(_0) {
-    var _0_indices = _0.indices, indices = _0_indices === void 0 ? [] : _0_indices, showSuggestions = _0.showSuggestions, showRecent = _0.showRecent, userSearchParameters = _0.searchParameters, detachedMediaQuery = _0.detachedMediaQuery, tmp = _0.translations, userTranslations = tmp === void 0 ? {} : tmp, props = _(_0, [
+    var _0_indices = _0.indices, indices = _0_indices === void 0 ? [] : _0_indices, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, showRecent = _0.showRecent, userSearchParameters = _0.searchParameters, detachedMediaQuery = _0.detachedMediaQuery, tmp = _0.translations, userTranslations = tmp === void 0 ? {} : tmp, props = _(_0, [
         "indices",
-        "showSuggestions",
+        "showQuerySuggestions",
+        "showPromptSuggestions",
         "showRecent",
         "searchParameters",
         "detachedMediaQuery",
@@ -198,12 +210,12 @@ function EXPERIMENTAL_Autocomplete(_0) {
         hitsPerPage: 5
     }, userSearchParameters);
     var indicesConfig = _$2(indices);
-    if (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) {
-        var _showSuggestions_classNames, _showSuggestions_classNames1, _showSuggestions_classNames2, _showSuggestions_classNames3;
+    if (showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : showQuerySuggestions.indexName) {
+        var _showQuerySuggestions_classNames, _showQuerySuggestions_classNames1, _showQuerySuggestions_classNames2, _showQuerySuggestions_classNames3;
         indicesConfig.unshift({
-            indexName: showSuggestions.indexName,
-            headerComponent: showSuggestions.headerComponent,
-            itemComponent: showSuggestions.itemComponent || function(param) {
+            indexName: showQuerySuggestions.indexName,
+            headerComponent: showQuerySuggestions.headerComponent,
+            itemComponent: showQuerySuggestions.itemComponent || function(param) {
                 var item = param.item, onSelect = param.onSelect, onApply = param.onApply;
                 return /*#__PURE__*/ React.createElement(AutocompleteSuggestion, {
                     item: item,
@@ -214,15 +226,48 @@ function EXPERIMENTAL_Autocomplete(_0) {
                 }));
             },
             classNames: {
-                root: cx('ais-AutocompleteSuggestions', showSuggestions === null || showSuggestions === void 0 ? void 0 : (_showSuggestions_classNames = showSuggestions.classNames) === null || _showSuggestions_classNames === void 0 ? void 0 : _showSuggestions_classNames.root),
-                list: cx('ais-AutocompleteSuggestionsList', showSuggestions === null || showSuggestions === void 0 ? void 0 : (_showSuggestions_classNames1 = showSuggestions.classNames) === null || _showSuggestions_classNames1 === void 0 ? void 0 : _showSuggestions_classNames1.list),
-                header: cx('ais-AutocompleteSuggestionsHeader', showSuggestions === null || showSuggestions === void 0 ? void 0 : (_showSuggestions_classNames2 = showSuggestions.classNames) === null || _showSuggestions_classNames2 === void 0 ? void 0 : _showSuggestions_classNames2.header),
-                item: cx('ais-AutocompleteSuggestionsItem', showSuggestions === null || showSuggestions === void 0 ? void 0 : (_showSuggestions_classNames3 = showSuggestions.classNames) === null || _showSuggestions_classNames3 === void 0 ? void 0 : _showSuggestions_classNames3.item)
+                root: cx('ais-AutocompleteSuggestions', showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : (_showQuerySuggestions_classNames = showQuerySuggestions.classNames) === null || _showQuerySuggestions_classNames === void 0 ? void 0 : _showQuerySuggestions_classNames.root),
+                list: cx('ais-AutocompleteSuggestionsList', showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : (_showQuerySuggestions_classNames1 = showQuerySuggestions.classNames) === null || _showQuerySuggestions_classNames1 === void 0 ? void 0 : _showQuerySuggestions_classNames1.list),
+                header: cx('ais-AutocompleteSuggestionsHeader', showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : (_showQuerySuggestions_classNames2 = showQuerySuggestions.classNames) === null || _showQuerySuggestions_classNames2 === void 0 ? void 0 : _showQuerySuggestions_classNames2.header),
+                item: cx('ais-AutocompleteSuggestionsItem', showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : (_showQuerySuggestions_classNames3 = showQuerySuggestions.classNames) === null || _showQuerySuggestions_classNames3 === void 0 ? void 0 : _showQuerySuggestions_classNames3.item)
             },
+            searchParameters: _$1({
+                hitsPerPage: 3
+            }, showQuerySuggestions.searchParameters),
             getQuery: function getQuery(item) {
                 return item.query;
             },
-            getURL: showSuggestions.getURL
+            getURL: showQuerySuggestions.getURL
+        });
+    }
+    if (showPromptSuggestions === null || showPromptSuggestions === void 0 ? void 0 : showPromptSuggestions.indexName) {
+        var _showPromptSuggestions_classNames, _showPromptSuggestions_classNames1, _showPromptSuggestions_classNames2, _showPromptSuggestions_classNames3;
+        indicesConfig.push({
+            indexName: showPromptSuggestions.indexName,
+            headerComponent: showPromptSuggestions.headerComponent,
+            itemComponent: showPromptSuggestions.itemComponent || function(param) {
+                var item = param.item, onSelect = param.onSelect;
+                return /*#__PURE__*/ React.createElement(AutocompletePromptSuggestion, {
+                    item: item,
+                    onSelect: onSelect
+                }, /*#__PURE__*/ React.createElement(ConditionalHighlight, {
+                    item: item,
+                    attribute: "prompt"
+                }));
+            },
+            classNames: {
+                root: cx('ais-AutocompletePromptSuggestions', (_showPromptSuggestions_classNames = showPromptSuggestions.classNames) === null || _showPromptSuggestions_classNames === void 0 ? void 0 : _showPromptSuggestions_classNames.root),
+                list: cx('ais-AutocompletePromptSuggestionsList', (_showPromptSuggestions_classNames1 = showPromptSuggestions.classNames) === null || _showPromptSuggestions_classNames1 === void 0 ? void 0 : _showPromptSuggestions_classNames1.list),
+                header: cx('ais-AutocompletePromptSuggestionsHeader', (_showPromptSuggestions_classNames2 = showPromptSuggestions.classNames) === null || _showPromptSuggestions_classNames2 === void 0 ? void 0 : _showPromptSuggestions_classNames2.header),
+                item: cx('ais-AutocompletePromptSuggestionsItem', (_showPromptSuggestions_classNames3 = showPromptSuggestions.classNames) === null || _showPromptSuggestions_classNames3 === void 0 ? void 0 : _showPromptSuggestions_classNames3.item)
+            },
+            searchParameters: _$1({
+                hitsPerPage: 3
+            }, showPromptSuggestions.searchParameters),
+            getQuery: function getQuery(item) {
+                return item.prompt;
+            },
+            getURL: showPromptSuggestions.getURL
         });
     }
     var recentSearchConfig = showRecent ? {
@@ -255,13 +300,15 @@ function EXPERIMENTAL_Autocomplete(_0) {
         isSearchPage: isSearchPage,
         showRecent: showRecent,
         recentSearchConfig: recentSearchConfig,
-        showSuggestions: showSuggestions,
+        showQuerySuggestions: showQuerySuggestions,
         detachedMediaQuery: detachedMediaQuery,
-        translations: translations
+        translations: translations,
+        showPromptSuggestions: showPromptSuggestions,
+        chatRenderState: indexRenderState.chat
     }))));
 }
 function InnerAutocomplete(_0) {
-    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showSuggestions = _0.showSuggestions, transformItems = _0.transformItems, placeholder = _0.placeholder, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _(_0, [
+    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, props = _(_0, [
         "indicesConfig",
         "refineSearchBox",
         "isSearchStalled",
@@ -272,13 +319,17 @@ function InnerAutocomplete(_0) {
         "panelComponent",
         "showRecent",
         "recentSearchConfig",
-        "showSuggestions",
+        "showQuerySuggestions",
+        "showPromptSuggestions",
+        "chatRenderState",
         "transformItems",
         "placeholder",
         "detachedMediaQuery",
         "translations",
         "classNames"
     ]);
+    var _ref;
+    var _showPromptSuggestions_searchParameters;
     var _useAutocomplete = useAutocomplete({
         transformItems: transformItems
     }), indices = _useAutocomplete.indices, refineAutocomplete = _useAutocomplete.refine, currentRefinement = _useAutocomplete.currentRefinement;
@@ -289,10 +340,57 @@ function InnerAutocomplete(_0) {
         query: currentRefinement,
         indices: indices,
         indicesConfig: indicesConfig,
-        suggestionsIndexName: showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName
+        suggestionsIndexName: showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : showQuerySuggestions.indexName
     }), storage = _useStorage.storage, storageHits = _useStorage.storageHits, indicesForPropGetters = _useStorage.indicesForPropGetters, indicesConfigForPropGetters = _useStorage.indicesConfigForPropGetters;
+    var promptSuggestionsIndexName = showPromptSuggestions === null || showPromptSuggestions === void 0 ? void 0 : showPromptSuggestions.indexName;
+    var promptSuggestionsLimit = (_ref = showPromptSuggestions === null || showPromptSuggestions === void 0 ? void 0 : (_showPromptSuggestions_searchParameters = showPromptSuggestions.searchParameters) === null || _showPromptSuggestions_searchParameters === void 0 ? void 0 : _showPromptSuggestions_searchParameters.hitsPerPage) !== null && _ref !== void 0 ? _ref : 3;
+    var indicesForPanel = useMemo(function() {
+        return indices.map(function(index) {
+            var dedupedHits = index.indexName === (showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : showQuerySuggestions.indexName) && showRecent ? index.hits.filter(function(suggestionHit) {
+                return !storageHits.find(function(storageHit) {
+                    return storageHit.query === suggestionHit.query;
+                });
+            }) : index.hits;
+            if (index.indexName !== promptSuggestionsIndexName) {
+                return _$4(_$1({}, index), {
+                    hits: dedupedHits
+                });
+            }
+            return _$4(_$1({}, index), {
+                hits: getPromptSuggestionHits({
+                    hits: dedupedHits,
+                    limit: promptSuggestionsLimit
+                })
+            });
+        });
+    }, [
+        indices,
+        promptSuggestionsIndexName,
+        promptSuggestionsLimit,
+        showRecent,
+        showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : showQuerySuggestions.indexName,
+        storageHits
+    ]);
+    var indicesForPropGettersWithPromptSuggestions = useMemo(function() {
+        return indicesForPropGetters.map(function(index) {
+            if (index.indexName !== promptSuggestionsIndexName) {
+                return index;
+            }
+            return _$4(_$1({}, index), {
+                hits: getPromptSuggestionHits({
+                    hits: index.hits,
+                    limit: promptSuggestionsLimit
+                })
+            });
+        });
+    }, [
+        indicesForPropGetters,
+        promptSuggestionsIndexName,
+        promptSuggestionsLimit
+    ]);
+    useRef(false);
     var _usePropGetters = usePropGetters({
-        indices: indicesForPropGetters,
+        indices: indicesForPropGettersWithPromptSuggestions,
         indicesConfig: indicesConfigForPropGetters,
         onRefine: function onRefine(query) {
             refineAutocomplete(query);
@@ -303,7 +401,19 @@ function InnerAutocomplete(_0) {
             refineAutocomplete(query);
         },
         onSelect: userOnSelect !== null && userOnSelect !== void 0 ? userOnSelect : function(param) {
-            var query = param.query, setQuery = param.setQuery, url = param.url;
+            var item = param.item, query = param.query, setQuery = param.setQuery, url = param.url;
+            if (isPromptSuggestion(item)) {
+                var chatRenderStateWithFocus = chatRenderState;
+                if (chatRenderStateWithFocus) {
+                    var _chatRenderStateWithFocus_setOpen, _chatRenderStateWithFocus_focusInput, _chatRenderStateWithFocus_sendMessage;
+                    (_chatRenderStateWithFocus_setOpen = chatRenderStateWithFocus.setOpen) === null || _chatRenderStateWithFocus_setOpen === void 0 ? void 0 : _chatRenderStateWithFocus_setOpen.call(chatRenderStateWithFocus, true);
+                    (_chatRenderStateWithFocus_focusInput = chatRenderStateWithFocus.focusInput) === null || _chatRenderStateWithFocus_focusInput === void 0 ? void 0 : _chatRenderStateWithFocus_focusInput.call(chatRenderStateWithFocus);
+                    (_chatRenderStateWithFocus_sendMessage = chatRenderStateWithFocus.sendMessage) === null || _chatRenderStateWithFocus_sendMessage === void 0 ? void 0 : _chatRenderStateWithFocus_sendMessage.call(chatRenderStateWithFocus, {
+                        text: item.prompt
+                    });
+                    return;
+                }
+            }
             if (url) {
                 window.location.href = url;
                 return;
@@ -376,14 +486,14 @@ function InnerAutocomplete(_0) {
             key: "recentSearches"
         });
     }
-    indices.forEach(function(param) {
+    indicesForPanel.forEach(function(param) {
         var indexId = param.indexId, indexName = param.indexName, hits = param.hits;
-        var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
-        var filteredHits = elementId === 'suggestions' && showRecent ? hits.filter(function(suggestionHit) {
-            return !storageHits.find(function(storageHit) {
-                return storageHit.query === suggestionHit.query;
-            });
-        }) : hits;
+        var elementId = indexName;
+        if (indexName === (showQuerySuggestions === null || showQuerySuggestions === void 0 ? void 0 : showQuerySuggestions.indexName)) {
+            elementId = 'suggestions';
+        } else if (indexName === (showPromptSuggestions === null || showPromptSuggestions === void 0 ? void 0 : showPromptSuggestions.indexName)) {
+            elementId = 'promptSuggestions';
+        }
         var currentIndexConfig = indicesConfig.find(function(config) {
             return config.indexName === indexName;
         });
@@ -396,7 +506,7 @@ function InnerAutocomplete(_0) {
             HeaderComponent: currentIndexConfig.headerComponent,
             // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
             ItemComponent: currentIndexConfig.itemComponent,
-            items: filteredHits.map(function(item) {
+            items: hits.map(function(item) {
                 return _$4(_$1({}, item), {
                     __indexName: indexId
                 });
@@ -420,7 +530,7 @@ function InnerAutocomplete(_0) {
     });
     var panelContent = /*#__PURE__*/ React.createElement(AutocompletePanel, getPanelProps(), PanelComponent ? /*#__PURE__*/ React.createElement(PanelComponent, {
         elements: elements,
-        indices: indices
+        indices: indicesForPanel
     }) : Object.keys(elements).map(function(elementId) {
         return elements[elementId];
     }));
@@ -477,5 +587,17 @@ function ConditionalReverseHighlight(param) {
         hit: item
     });
 }
+function ConditionalHighlight(param) {
+    var item = param.item, _param_attribute = param.attribute, attribute = _param_attribute === void 0 ? 'query' : _param_attribute;
+    var _item__highlightResult;
+    if (!((_item__highlightResult = item._highlightResult) === null || _item__highlightResult === void 0 ? void 0 : _item__highlightResult[attribute]) || // @ts-expect-error - we should not have matchLevel as arrays here
+    item._highlightResult[attribute].matchLevel === 'none') {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, item[attribute]);
+    }
+    return /*#__PURE__*/ React.createElement(Highlight, {
+        attribute: attribute,
+        hit: item
+    });
+}
 
 export { EXPERIMENTAL_Autocomplete };

package/dist/es/widgets/Chat.js

@@ -6,7 +6,7 @@ import { _ as _$2 } from '@swc/helpers/cjs/_sliced_to_array.cjs';
 import { createChatComponent } from 'instantsearch-ui-components';
 import { SearchIndexToolType, RecommendToolType, MemorizeToolType, MemorySearchToolType, PonderToolType } from 'instantsearch.js/es/lib/chat/index.js';
 export { MemorizeToolType, MemorySearchToolType, PonderToolType, RecommendToolType, SearchIndexToolType } from 'instantsearch.js/es/lib/chat/index.js';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useState, useRef, useMemo, useEffect } from 'react';
 import { useInstantSearch, useChat } from 'react-instantsearch-core';
 import { useStickToBottom } from '../lib/useStickToBottom.js';
 import { createCarouselTool } from './chat/tools/SearchIndexTool.js';
@@ -52,13 +52,13 @@ function Chat(_0) {
     ]);
     var promptTranslations = translations.prompt, headerTranslations = translations.header, messageTranslations = translations.message, messagesTranslations = translations.messages;
     var _useInstantSearch = useInstantSearch(), indexUiState = _useInstantSearch.indexUiState, setIndexUiState = _useInstantSearch.setIndexUiState;
-    var _React_useState = _$2(React.useState(false), 2), maximized = _React_useState[0], setMaximized = _React_useState[1];
-    var promptRef = React.useRef(null);
+    var _useState = _$2(useState(false), 2), maximized = _useState[0], setMaximized = _useState[1];
+    var promptRef = useRef(null);
     var _useStickToBottom = useStickToBottom({
         initial: 'smooth',
         resize: 'smooth'
     }), scrollRef = _useStickToBottom.scrollRef, contentRef = _useStickToBottom.contentRef, scrollToBottom = _useStickToBottom.scrollToBottom, isAtBottom = _useStickToBottom.isAtBottom;
-    var tools = React.useMemo(function() {
+    var tools = useMemo(function() {
         var defaults = createDefaultTools(itemComponent, getSearchPageURL);
         return _$3({}, defaults, userTools);
     }, [
@@ -70,6 +70,19 @@ function Chat(_0) {
         tools: tools
     }));
     var messages = chatState.messages, sendMessage = chatState.sendMessage, status = chatState.status, regenerate = chatState.regenerate, stop = chatState.stop; chatState.error; var input = chatState.input, setInput = chatState.setInput, open = chatState.open, setOpen = chatState.setOpen, isClearing = chatState.isClearing, clearMessages = chatState.clearMessages, onClearTransitionEnd = chatState.onClearTransitionEnd, toolsFromConnector = chatState.tools, suggestions = chatState.suggestions;
+    var wasOpenRef = useRef(false);
+    useEffect(function() {
+        var shouldFocusPrompt = !wasOpenRef.current && open;
+        if (shouldFocusPrompt) {
+            window.requestAnimationFrame(function() {
+                var _promptRef_current;
+                (_promptRef_current = promptRef.current) === null || _promptRef_current === void 0 ? void 0 : _promptRef_current.focus();
+            });
+        }
+        wasOpenRef.current = open;
+    }, [
+        open
+    ]);
     return /*#__PURE__*/ React.createElement(ChatUiComponent, {
         title: title,
         open: open,