react-instantsearch 7.40.0 → 7.42.0

package/dist/es/widgets/Autocomplete.js

@@ -6,14 +6,14 @@ import { _ as _$3 } from '@swc/helpers/esm/_to_consumable_array.js';
 import { _ as _$5 } from '@swc/helpers/esm/_type_of.js';
 import { createAutocompleteComponent, createAutocompletePanelComponent, createAutocompleteIndexComponent, createAutocompleteSuggestionComponent, createAutocompletePromptSuggestionComponent, createAutocompleteRecentSearchComponent, createAutocompleteDetachedContainerComponent, createAutocompleteDetachedOverlayComponent, createAutocompleteDetachedFormContainerComponent, createAutocompleteDetachedSearchButtonComponent, createAutocompletePropGetters, createAutocompleteStorage, cx, getPromptSuggestionHits, isPromptSuggestion } from 'instantsearch-ui-components';
 import { openChat, isChatBusy } from 'instantsearch.js/es/lib/chat/index.js';
-import 'instantsearch.js/es/lib/utils/index.js';
+import { deprecate } from 'instantsearch.js/es/lib/utils/index.js';
 import React, { createElement, Fragment, useEffect, useMemo, useRef, useState, useLayoutEffect } from 'react';
 import { useInstantSearch, useInstantSearchContext, useSearchBox, Index, Configure, Feeds, useAutocomplete } from 'react-instantsearch-core';
 import { AutocompleteSearch } from '../components/AutocompleteSearch.js';
 import { Highlight } from './Highlight.js';
 import { ReverseHighlight } from './ReverseHighlight.js';
 
-var Autocomplete = createAutocompleteComponent({
+var AutocompleteUiComponent = createAutocompleteComponent({
     createElement: createElement,
     Fragment: Fragment
 });
@@ -199,7 +199,7 @@ function getMediaQueryList(mediaQuery) {
         setIsModalOpen: setIsModalOpen
     };
 }
-function EXPERIMENTAL_Autocomplete(props) {
+function Autocomplete(props) {
     var _showRecent_classNames, _showRecent_classNames1, _showRecent_classNames2, _showRecent_classNames3;
     var indices = 'indices' in props ? props.indices : undefined;
     var feeds = 'feeds' in props ? props.feeds : undefined;
@@ -232,10 +232,10 @@ function EXPERIMENTAL_Autocomplete(props) {
     var domId = useAutocompleteId();
     var instanceKey = domId.replace(/:/g, '');
     if (isFeedsMode && indices !== undefined) {
-        throw new Error('EXPERIMENTAL_Autocomplete: `feeds` and `indices` are mutually exclusive.');
+        throw new Error('Autocomplete: `feeds` and `indices` are mutually exclusive.');
     }
     if (isFeedsMode && !compositionID) {
-        throw new Error('EXPERIMENTAL_Autocomplete in feeds-mode requires a composition-based <InstantSearch> (compositionID must be set).');
+        throw new Error('Autocomplete in feeds-mode requires a composition-based <InstantSearch> (compositionID must be set).');
     }
     var isSearchStalled = status === 'stalled';
     var searchParameters = _$2({
@@ -450,7 +450,7 @@ function EXPERIMENTAL_Autocomplete(props) {
             }
             setActivated(true);
         };
-        return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$2({}, shellRootProps), {
+        return /*#__PURE__*/ React.createElement(AutocompleteUiComponent, _$4(_$2({}, shellRootProps), {
             classNames: classNames
         }), isDetached ? /*#__PURE__*/ React.createElement(AutocompleteDetachedSearchButton, {
             query: (_indexUiState_query = indexUiState.query) !== null && _indexUiState_query !== void 0 ? _indexUiState_query : '',
@@ -493,7 +493,7 @@ function EXPERIMENTAL_Autocomplete(props) {
     }));
     if (isFeedsMode) {
         return /*#__PURE__*/ React.createElement(Index, {
-            EXPERIMENTAL_isolated: true,
+            isolated: true,
             indexName: compositionID,
             indexId: "ais-autocomplete-".concat(instanceKey)
         }, /*#__PURE__*/ React.createElement(Configure, searchParameters), /*#__PURE__*/ React.createElement(Feeds, {
@@ -504,7 +504,7 @@ function EXPERIMENTAL_Autocomplete(props) {
         }), innerAutocomplete);
     }
     return /*#__PURE__*/ React.createElement(Index, {
-        EXPERIMENTAL_isolated: true,
+        isolated: true,
         indexId: "ais-autocomplete-".concat(instanceKey)
     }, /*#__PURE__*/ React.createElement(Configure, searchParameters), indicesConfig.map(function(index) {
         return /*#__PURE__*/ React.createElement(Index, {
@@ -514,6 +514,7 @@ function EXPERIMENTAL_Autocomplete(props) {
         }, /*#__PURE__*/ React.createElement(Configure, index.searchParameters));
     }), innerAutocomplete);
 }
+/** @deprecated use Autocomplete instead */ var EXPERIMENTAL_Autocomplete = deprecate(Autocomplete, 'EXPERIMENTAL_Autocomplete is no longer experimental. Please use Autocomplete instead.');
 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, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, translations = _0.translations, classNames = _0.classNames, aiMode = _0.aiMode, domId = _0.domId, detached = _0.detached, props = _(_0, [
         "indicesConfig",
@@ -630,7 +631,7 @@ function InnerAutocomplete(_0) {
                 if (chatRenderState) {
                     if (openChat(chatRenderState, {
                         message: item.prompt,
-                        referer: 'prompt-suggestions'
+                        referer: 'prompt-suggestions-autocomplete'
                     })) {
                         setQuery('');
                     }
@@ -799,7 +800,7 @@ function InnerAutocomplete(_0) {
         "ref"
     ]);
     if (isDetached) {
-        return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$2({}, props, rootProps), {
+        return /*#__PURE__*/ React.createElement(AutocompleteUiComponent, _$4(_$2({}, props, rootProps), {
             rootRef: rootRef,
             classNames: classNames
         }), /*#__PURE__*/ React.createElement(AutocompleteDetachedSearchButton, {
@@ -825,7 +826,7 @@ function InnerAutocomplete(_0) {
         }, searchBoxContent), panelContent)));
     }
     // Normal (non-detached) rendering
-    return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$2({}, props, rootProps), {
+    return /*#__PURE__*/ React.createElement(AutocompleteUiComponent, _$4(_$2({}, props, rootProps), {
         rootRef: rootRef,
         classNames: classNames
     }), searchBoxContent, panelContent);
@@ -855,4 +856,4 @@ function ConditionalHighlight(param) {
     });
 }
 
-export { EXPERIMENTAL_Autocomplete };
+export { Autocomplete, EXPERIMENTAL_Autocomplete };

package/dist/es/widgets/Chat.d.ts

@@ -38,6 +38,10 @@ export type ChatProps<TObject, TUiMessage extends UIMessage = UIMessage> = Omit<
     userMessageLeadingComponent?: ChatMessageProps['leadingComponent'];
     userMessageFooterComponent?: ChatMessageProps['footerComponent'];
     suggestionsComponent?: ChatUiProps['suggestionsComponent'];
+    /**
+     * Whether to render reasoning parts
+     */
+    showReasoning?: boolean;
     translations?: Partial<{
         prompt: ChatUiProps['promptProps']['translations'];
         header: ChatUiProps['headerProps']['translations'];

package/dist/es/widgets/Chat.js

@@ -1,13 +1,13 @@
 import { _ } from '@swc/helpers/esm/_define_property.js';
-import { _ as _$4 } from '@swc/helpers/esm/_object_spread.js';
-import { _ as _$5 } from '@swc/helpers/esm/_object_spread_props.js';
+import { _ as _$5 } from '@swc/helpers/esm/_object_spread.js';
+import { _ as _$4 } from '@swc/helpers/esm/_object_spread_props.js';
 import { _ as _$2 } from '@swc/helpers/esm/_object_without_properties.js';
 import { _ as _$3 } from '@swc/helpers/esm/_sliced_to_array.js';
 import { _ as _$1 } from '@swc/helpers/esm/_to_array.js';
 import { createChatComponent } from 'instantsearch-ui-components';
 import { SearchIndexToolType, RecommendToolType, DisplayResultsToolType, MemorizeToolType, MemorySearchToolType, PonderToolType } from 'instantsearch.js/es/lib/chat/index.js';
 export { DisplayResultsToolType, MemorizeToolType, MemorySearchToolType, PonderToolType, RecommendToolType, SearchIndexToolType } from 'instantsearch.js/es/lib/chat/index.js';
-import React, { createElement, Fragment, memo, useState, useRef, useMemo, useImperativeHandle, useEffect } from 'react';
+import React, { createElement, Fragment, useMemo, useState, useRef, useImperativeHandle, useEffect } from 'react';
 import { useInstantSearch, useChat } from 'react-instantsearch-core';
 import { useStickToBottom } from '../lib/useStickToBottom.js';
 import { createDisplayResultsTool } from './chat/tools/DisplayResultsTool.js';
@@ -16,18 +16,35 @@ import { createCarouselTool } from './chat/tools/SearchIndexTool.js';
 var ChatUiComponent = createChatComponent({
     createElement: createElement,
     Fragment: Fragment,
-    memo: memo,
+    useMemo: useMemo,
     useState: useState
 });
 function createDefaultTools(itemComponent, getSearchPageURL) {
     var _obj;
     return _obj = {}, _(_obj, SearchIndexToolType, createCarouselTool(true, itemComponent, getSearchPageURL)), _(_obj, RecommendToolType, createCarouselTool(false, itemComponent, getSearchPageURL)), _(_obj, DisplayResultsToolType, createDisplayResultsTool(itemComponent)), _(_obj, MemorizeToolType, {}), _(_obj, MemorySearchToolType, {}), _(_obj, PonderToolType, {}), _obj;
 }
+function mergeToolOptions(defaultTools, userTools) {
+    if (!userTools) {
+        return defaultTools;
+    }
+    var tools = _$5({}, defaultTools, userTools);
+    Object.keys(userTools).forEach(function(toolName) {
+        var _defaultTools_toolName;
+        var userTool = userTools[toolName];
+        var defaultStreamInput = (_defaultTools_toolName = defaultTools[toolName]) === null || _defaultTools_toolName === void 0 ? void 0 : _defaultTools_toolName.streamInput;
+        if (userTool.layoutComponent !== undefined && userTool.streamInput === undefined && defaultStreamInput !== undefined) {
+            tools[toolName] = _$4(_$5({}, userTool), {
+                streamInput: defaultStreamInput
+            });
+        }
+    });
+    return tools;
+}
 function ChatInner(_0, _1) {
     var _ref = [
         _0,
         _1
-    ], _ref1 = _$1(_ref), _ref2 = _ref1[0], _rest = _ref1.slice(1), userTools = _ref2.tools, headerProps = _ref2.headerProps, messagesProps = _ref2.messagesProps, promptProps = _ref2.promptProps, itemComponent = _ref2.itemComponent, layoutComponent = _ref2.layoutComponent, headerComponent = _ref2.headerComponent, headerTitleIconComponent = _ref2.headerTitleIconComponent, headerCloseIconComponent = _ref2.headerCloseIconComponent, headerMinimizeIconComponent = _ref2.headerMinimizeIconComponent, headerMaximizeIconComponent = _ref2.headerMaximizeIconComponent, loaderComponent = _ref2.loaderComponent, messagesErrorComponent = _ref2.messagesErrorComponent, promptComponent = _ref2.promptComponent, promptHeaderComponent = _ref2.promptHeaderComponent, promptFooterComponent = _ref2.promptFooterComponent, assistantMessageLeadingComponent = _ref2.assistantMessageLeadingComponent, assistantMessageFooterComponent = _ref2.assistantMessageFooterComponent, userMessageLeadingComponent = _ref2.userMessageLeadingComponent, userMessageFooterComponent = _ref2.userMessageFooterComponent, emptyComponent = _ref2.emptyComponent, actionsComponent = _ref2.actionsComponent, suggestionsComponent = _ref2.suggestionsComponent, classNames = _ref2.classNames, _ref_translations = _ref2.translations, translations = _ref_translations === void 0 ? {} : _ref_translations, title = _ref2.title, getSearchPageURL = _ref2.getSearchPageURL, _ref_disableTriggerValidation = _ref2.disableTriggerValidation, disableTriggerValidation = _ref_disableTriggerValidation === void 0 ? false : _ref_disableTriggerValidation, props = _$2(_ref2, [
+    ], _ref1 = _$1(_ref), _ref2 = _ref1[0], _rest = _ref1.slice(1), userTools = _ref2.tools, headerProps = _ref2.headerProps, messagesProps = _ref2.messagesProps, promptProps = _ref2.promptProps, itemComponent = _ref2.itemComponent, layoutComponent = _ref2.layoutComponent, headerComponent = _ref2.headerComponent, headerTitleIconComponent = _ref2.headerTitleIconComponent, headerCloseIconComponent = _ref2.headerCloseIconComponent, headerMinimizeIconComponent = _ref2.headerMinimizeIconComponent, headerMaximizeIconComponent = _ref2.headerMaximizeIconComponent, loaderComponent = _ref2.loaderComponent, messagesErrorComponent = _ref2.messagesErrorComponent, promptComponent = _ref2.promptComponent, promptHeaderComponent = _ref2.promptHeaderComponent, promptFooterComponent = _ref2.promptFooterComponent, assistantMessageLeadingComponent = _ref2.assistantMessageLeadingComponent, assistantMessageFooterComponent = _ref2.assistantMessageFooterComponent, userMessageLeadingComponent = _ref2.userMessageLeadingComponent, userMessageFooterComponent = _ref2.userMessageFooterComponent, emptyComponent = _ref2.emptyComponent, actionsComponent = _ref2.actionsComponent, suggestionsComponent = _ref2.suggestionsComponent, classNames = _ref2.classNames, _ref_translations = _ref2.translations, translations = _ref_translations === void 0 ? {} : _ref_translations, title = _ref2.title, getSearchPageURL = _ref2.getSearchPageURL, _ref_disableTriggerValidation = _ref2.disableTriggerValidation, disableTriggerValidation = _ref_disableTriggerValidation === void 0 ? false : _ref_disableTriggerValidation, showReasoning = _ref2.showReasoning, props = _$2(_ref2, [
         "tools",
         "headerProps",
         "messagesProps",
@@ -55,7 +72,8 @@ function ChatInner(_0, _1) {
         "translations",
         "title",
         "getSearchPageURL",
-        "disableTriggerValidation"
+        "disableTriggerValidation",
+        "showReasoning"
     ]), _rest1 = _$3(_rest, 1), ref = _rest1[0];
     var promptTranslations = translations.prompt, headerTranslations = translations.header, messageTranslations = translations.message, messagesTranslations = translations.messages;
     var _useInstantSearch = useInstantSearch(), indexUiState = _useInstantSearch.indexUiState, setIndexUiState = _useInstantSearch.setIndexUiState;
@@ -67,7 +85,7 @@ function ChatInner(_0, _1) {
     }), scrollRef = _useStickToBottom.scrollRef, contentRef = _useStickToBottom.contentRef, scrollToBottom = _useStickToBottom.scrollToBottom, isAtBottom = _useStickToBottom.isAtBottom;
     var tools = useMemo(function() {
         var defaults = createDefaultTools(itemComponent, getSearchPageURL);
-        return _$4({}, defaults, userTools);
+        return mergeToolOptions(defaults, userTools);
     }, [
         getSearchPageURL,
         itemComponent,
@@ -78,7 +96,7 @@ function ChatInner(_0, _1) {
     // set on the layout component, which is consistent across flavors.
     var isInlineLayoutComponent = typeof layoutComponent === 'function' && layoutComponent.$$inlineLayout === true;
     var effectiveDisableTriggerValidation = disableTriggerValidation || isInlineLayoutComponent;
-    var chatState = useChat(_$5(_$4({}, props), {
+    var chatState = useChat(_$4(_$5({}, props), {
         tools: tools,
         disableTriggerValidation: effectiveDisableTriggerValidation
     }));
@@ -122,6 +140,10 @@ function ChatInner(_0, _1) {
         status,
         scrollToBottom
     ]);
+    var _ref3 = messagesProps !== null && messagesProps !== void 0 ? messagesProps : {}, callerAssistantMessageProps = _ref3.assistantMessageProps, callerUserMessageProps = _ref3.userMessageProps, restMessagesProps = _$2(_ref3, [
+        "assistantMessageProps",
+        "userMessageProps"
+    ]);
     return /*#__PURE__*/ React.createElement(ChatUiComponent, {
         title: title,
         open: open,
@@ -134,7 +156,7 @@ function ChatInner(_0, _1) {
         headerComponent: headerComponent,
         promptComponent: promptComponent,
         suggestionsComponent: suggestionsComponent,
-        headerProps: _$4({
+        headerProps: _$5({
             onClose: function onClose() {
                 return setOpen(false);
             },
@@ -150,7 +172,7 @@ function ChatInner(_0, _1) {
             maximizeIconComponent: headerMaximizeIconComponent,
             translations: headerTranslations
         }, headerProps),
-        messagesProps: _$5(_$4({
+        messagesProps: _$4(_$5({
             status: status,
             onReload: function onReload(messageId) {
                 return regenerate({
@@ -177,20 +199,21 @@ function ChatInner(_0, _1) {
             errorComponent: messagesErrorComponent,
             emptyComponent: emptyComponent,
             actionsComponent: actionsComponent,
-            assistantMessageProps: _$4({
+            translations: messagesTranslations,
+            messageTranslations: messageTranslations
+        }, restMessagesProps), {
+            assistantMessageProps: _$5({
                 leadingComponent: assistantMessageLeadingComponent,
-                footerComponent: assistantMessageFooterComponent
-            }, messagesProps === null || messagesProps === void 0 ? void 0 : messagesProps.assistantMessageProps),
-            userMessageProps: _$4({
+                footerComponent: assistantMessageFooterComponent,
+                showReasoning: showReasoning
+            }, callerAssistantMessageProps),
+            userMessageProps: _$5({
                 leadingComponent: userMessageLeadingComponent,
                 footerComponent: userMessageFooterComponent
-            }, messagesProps === null || messagesProps === void 0 ? void 0 : messagesProps.userMessageProps),
-            translations: messagesTranslations,
-            messageTranslations: messageTranslations
-        }, messagesProps), {
+            }, callerUserMessageProps),
             error: error
         }),
-        promptProps: _$4({
+        promptProps: _$5({
             promptRef: promptRef,
             status: status,
             value: input,

package/dist/es/widgets/PromptSuggestions.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { PromptSuggestionsOwnProps } from 'instantsearch-ui-components';
+import type { UsePromptSuggestionsProps } from 'react-instantsearch-core';
+/**
+ * Props passed to a custom `layoutComponent`. Mirrors the connector render
+ * state so a layout component owns the full markup.
+ */
+export type PromptSuggestionsLayoutComponentProps = {
+    suggestions: string[];
+    isLoading: boolean;
+    onSuggestionClick: (prompt: string) => void;
+    isChatBusy: boolean;
+};
+export type PromptSuggestionsOnSuggestionClick = (prompt: string, helpers: {
+    sendToChat: (prompt: string) => boolean;
+}) => void;
+type OwnedUiProps = 'suggestions' | 'isLoading' | 'onSuggestionClick' | 'disabled' | 'skeletonCount';
+export type PromptSuggestionsProps = Omit<PromptSuggestionsOwnProps, OwnedUiProps> & UsePromptSuggestionsProps & {
+    layoutComponent?: (props: PromptSuggestionsLayoutComponentProps) => JSX.Element | null;
+    onSuggestionClick?: PromptSuggestionsOnSuggestionClick;
+};
+export declare function PromptSuggestions({ classNames, layoutComponent: LayoutComponent, onSuggestionClick: onSuggestionClickOverride, agentId, transport, configurationId, transformHits, context, transformItems, ...props }: PromptSuggestionsProps): React.JSX.Element;
+export {};

package/dist/es/widgets/PromptSuggestions.js

@@ -0,0 +1,57 @@
+import { _ as _$2 } from '@swc/helpers/esm/_object_spread.js';
+import { _ as _$1 } from '@swc/helpers/esm/_object_spread_props.js';
+import { _ } from '@swc/helpers/esm/_object_without_properties.js';
+import { createPromptSuggestionsComponent } from 'instantsearch-ui-components';
+import React, { createElement, Fragment } from 'react';
+import { usePromptSuggestions } from 'react-instantsearch-core';
+
+var PromptSuggestionsUi = createPromptSuggestionsComponent({
+    createElement: createElement,
+    Fragment: Fragment
+});
+function PromptSuggestions(_0) {
+    var _0_classNames = _0.classNames, classNames = _0_classNames === void 0 ? {} : _0_classNames, LayoutComponent = _0.layoutComponent, onSuggestionClickOverride = _0.onSuggestionClick, // Connector params — forwarded to the hook, not the UI root.
+    agentId = _0.agentId, transport = _0.transport, configurationId = _0.configurationId, transformHits = _0.transformHits, context = _0.context, transformItems = _0.transformItems, props = _(_0, [
+        "classNames",
+        "layoutComponent",
+        "onSuggestionClick",
+        "agentId",
+        "transport",
+        "configurationId",
+        "transformHits",
+        "context",
+        "transformItems"
+    ]);
+    var _usePromptSuggestions = usePromptSuggestions({
+        agentId: agentId,
+        transport: transport,
+        configurationId: configurationId,
+        transformHits: transformHits,
+        context: context,
+        transformItems: transformItems
+    }, {
+        $$widgetType: 'ais.promptSuggestions'
+    }), suggestions = _usePromptSuggestions.suggestions, isLoading = _usePromptSuggestions.isLoading, onSuggestionClick = _usePromptSuggestions.onSuggestionClick, isChatBusy = _usePromptSuggestions.isChatBusy, sendToChat = _usePromptSuggestions.sendToChat;
+    var handleClick = onSuggestionClickOverride ? function(prompt) {
+        return onSuggestionClickOverride(prompt, {
+            sendToChat: sendToChat
+        });
+    } : onSuggestionClick;
+    if (LayoutComponent) {
+        return /*#__PURE__*/ React.createElement(LayoutComponent, {
+            suggestions: suggestions,
+            isLoading: isLoading,
+            onSuggestionClick: handleClick,
+            isChatBusy: isChatBusy
+        });
+    }
+    return /*#__PURE__*/ React.createElement(PromptSuggestionsUi, _$1(_$2({}, props), {
+        classNames: classNames,
+        suggestions: suggestions,
+        isLoading: isLoading,
+        onSuggestionClick: handleClick,
+        disabled: isChatBusy
+    }));
+}
+
+export { PromptSuggestions };

package/dist/es/widgets/chat/tools/DisplayResultsTool.js

@@ -1,16 +1,48 @@
 import { createDisplayResultsToolComponent, createButtonComponent, ChevronLeftIcon, ChevronRightIcon } from 'instantsearch-ui-components';
-import React, { createElement, Fragment, useMemo } from 'react';
+import React, { createElement, Fragment, useEffect, useMemo, useRef } from 'react';
 import { Carousel } from '../../../components/Carousel.js';
 
 function createDisplayResultsTool(itemComponent) {
     var DisplayResultsUIComponent = createDisplayResultsToolComponent({
         createElement: createElement,
         Fragment: Fragment,
-        useMemo: useMemo
+        useEffect: useEffect,
+        useMemo: useMemo,
+        useRef: useRef
     });
     var Button = createButtonComponent({
         createElement: createElement
     });
+    var DisplayResultsCarouselHeader = function DisplayResultsCarouselHeader(param) {
+        var nbItems = param.nbItems, canScrollLeft = param.canScrollLeft, canScrollRight = param.canScrollRight, scrollLeft = param.scrollLeft, scrollRight = param.scrollRight;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "ais-ChatToolDisplayResultsCarouselHeader"
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "ais-ChatToolDisplayResultsCarouselHeaderCount"
+        }, nbItems, " result", nbItems > 1 ? 's' : ''), /*#__PURE__*/ React.createElement("div", {
+            className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButtons"
+        }, /*#__PURE__*/ React.createElement(Button, {
+            variant: "outline",
+            size: "sm",
+            iconOnly: true,
+            "aria-label": "Previous",
+            onClick: scrollLeft,
+            disabled: !canScrollLeft,
+            className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButton"
+        }, /*#__PURE__*/ React.createElement(ChevronLeftIcon, {
+            createElement: createElement
+        })), /*#__PURE__*/ React.createElement(Button, {
+            variant: "outline",
+            size: "sm",
+            iconOnly: true,
+            "aria-label": "Next",
+            onClick: scrollRight,
+            disabled: !canScrollRight,
+            className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButton"
+        }, /*#__PURE__*/ React.createElement(ChevronRightIcon, {
+            createElement: createElement
+        }))));
+    };
     var DisplayResultsLayoutComponent = function DisplayResultsLayoutComponent(toolProps) {
         return /*#__PURE__*/ React.createElement(DisplayResultsUIComponent, {
             toolProps: toolProps,
@@ -21,40 +53,14 @@ function createDisplayResultsTool(itemComponent) {
                     itemComponent: itemComponent,
                     sendEvent: sendEvent,
                     showNavigation: false,
-                    headerComponent: function headerComponent(param) {
-                        var canScrollLeft = param.canScrollLeft, canScrollRight = param.canScrollRight, scrollLeft = param.scrollLeft, scrollRight = param.scrollRight;
-                        return /*#__PURE__*/ React.createElement("div", {
-                            className: "ais-ChatToolDisplayResultsCarouselHeader"
-                        }, /*#__PURE__*/ React.createElement("div", {
-                            className: "ais-ChatToolDisplayResultsCarouselHeaderCount"
-                        }, items.length, " result", items.length > 1 ? 's' : ''), /*#__PURE__*/ React.createElement("div", {
-                            className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButtons"
-                        }, /*#__PURE__*/ React.createElement(Button, {
-                            variant: "outline",
-                            size: "sm",
-                            iconOnly: true,
-                            onClick: scrollLeft,
-                            disabled: !canScrollLeft,
-                            className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButton"
-                        }, /*#__PURE__*/ React.createElement(ChevronLeftIcon, {
-                            createElement: createElement
-                        })), /*#__PURE__*/ React.createElement(Button, {
-                            variant: "outline",
-                            size: "sm",
-                            iconOnly: true,
-                            onClick: scrollRight,
-                            disabled: !canScrollRight,
-                            className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButton"
-                        }, /*#__PURE__*/ React.createElement(ChevronRightIcon, {
-                            createElement: createElement
-                        }))));
-                    }
+                    headerComponent: DisplayResultsCarouselHeader
                 });
             }
         });
     };
     return {
-        layoutComponent: DisplayResultsLayoutComponent
+        layoutComponent: DisplayResultsLayoutComponent,
+        streamInput: true
     };
 }
 

package/dist/es/widgets/chat/tools/SearchIndexTool.js

@@ -1,96 +1,25 @@
-import { _ } from '@swc/helpers/esm/_object_spread.js';
-import { createButtonComponent, getFacetFiltersFromToolInput, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from 'instantsearch-ui-components';
-import { addAbsolutePosition, addQueryID } from 'instantsearch.js/es/lib/utils/index.js';
-import React, { createElement } from 'react';
-import { Carousel } from '../../../components/Carousel.js';
+import { createCarouselToolComponent } from 'instantsearch-ui-components';
+import React, { createElement, Fragment, useEffect, useMemo, useRef, useState } from 'react';
 
 function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
-    var Button = createButtonComponent({
-        createElement: createElement
+    var SearchLayoutUIComponent = createCarouselToolComponent({
+        createElement: createElement,
+        Fragment: Fragment,
+        useEffect: useEffect,
+        useMemo: useMemo,
+        useRef: useRef,
+        useState: useState
     });
-    function SearchLayoutComponent(param) {
-        var message = param.message, applyFilters = param.applyFilters, onClose = param.onClose, sendEvent = param.sendEvent;
-        var _ref;
-        var _output_hits;
-        var input = message === null || message === void 0 ? void 0 : message.input;
-        var output = message === null || message === void 0 ? void 0 : message.output;
-        var hitsWithAbsolutePosition = addAbsolutePosition((output === null || output === void 0 ? void 0 : output.hits) || [], 0, ((_ref = input === null || input === void 0 ? void 0 : input.number_of_results) !== null && _ref !== void 0 ? _ref : output === null || output === void 0 ? void 0 : (_output_hits = output.hits) === null || _output_hits === void 0 ? void 0 : _output_hits.length) || 5);
-        var items = addQueryID(hitsWithAbsolutePosition, output === null || output === void 0 ? void 0 : output.queryID);
-        var MemoedHeaderComponent = React.useMemo(function() {
-            return function(props) {
-                return /*#__PURE__*/ React.createElement(HeaderComponent, _({
-                    nbHits: output === null || output === void 0 ? void 0 : output.nbHits,
-                    input: input,
-                    hitsPerPage: items.length,
-                    onClose: onClose,
-                    applyFilters: applyFilters
-                }, props));
-            };
-        }, [
-            items.length,
-            input,
-            output === null || output === void 0 ? void 0 : output.nbHits,
-            applyFilters,
-            onClose
-        ]);
-        return /*#__PURE__*/ React.createElement(Carousel, {
-            items: items,
+    var SearchLayoutComponent = function SearchLayoutComponent(toolProps) {
+        return /*#__PURE__*/ React.createElement(SearchLayoutUIComponent, {
+            getSearchPageURL: getSearchPageURL,
+            headerProps: {
+                showViewAll: showViewAll
+            },
             itemComponent: itemComponent,
-            sendEvent: sendEvent,
-            showNavigation: false,
-            headerComponent: MemoedHeaderComponent
+            toolProps: toolProps
         });
-    }
-    function HeaderComponent(param) {
-        var canScrollLeft = param.canScrollLeft, canScrollRight = param.canScrollRight, scrollLeft = param.scrollLeft, scrollRight = param.scrollRight, nbHits = param.nbHits, input = param.input, hitsPerPage = param.hitsPerPage, applyFilters = param.applyFilters, onClose = param.onClose;
-        if ((hitsPerPage !== null && hitsPerPage !== void 0 ? hitsPerPage : 0) < 1) {
-            return null;
-        }
-        return /*#__PURE__*/ React.createElement("div", {
-            className: "ais-ChatToolSearchIndexCarouselHeader"
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: "ais-ChatToolSearchIndexCarouselHeaderResults"
-        }, nbHits && /*#__PURE__*/ React.createElement("div", {
-            className: "ais-ChatToolSearchIndexCarouselHeaderCount"
-        }, hitsPerPage !== null && hitsPerPage !== void 0 ? hitsPerPage : 0, " of ", nbHits.toLocaleString(), " result", nbHits > 1 ? 's' : ''), showViewAll && /*#__PURE__*/ React.createElement(Button, {
-            variant: "ghost",
-            size: "sm",
-            onClick: function onClick() {
-                if (!input || !applyFilters) return;
-                var params = applyFilters({
-                    query: input.query,
-                    facetFilters: getFacetFiltersFromToolInput(input)
-                });
-                if (getSearchPageURL && new URL(getSearchPageURL(params)).pathname !== window.location.pathname) {
-                    window.location.href = getSearchPageURL(params);
-                }
-                onClose();
-            },
-            className: "ais-ChatToolSearchIndexCarouselHeaderViewAll"
-        }, "View all", /*#__PURE__*/ React.createElement(ArrowRightIcon, {
-            createElement: createElement
-        }))), (hitsPerPage !== null && hitsPerPage !== void 0 ? hitsPerPage : 0) > 2 && /*#__PURE__*/ React.createElement("div", {
-            className: "ais-ChatToolSearchIndexCarouselHeaderScrollButtons"
-        }, /*#__PURE__*/ React.createElement(Button, {
-            variant: "outline",
-            size: "sm",
-            iconOnly: true,
-            onClick: scrollLeft,
-            disabled: !canScrollLeft,
-            className: "ais-ChatToolSearchIndexCarouselHeaderScrollButton"
-        }, /*#__PURE__*/ React.createElement(ChevronLeftIcon, {
-            createElement: createElement
-        })), /*#__PURE__*/ React.createElement(Button, {
-            variant: "outline",
-            size: "sm",
-            iconOnly: true,
-            onClick: scrollRight,
-            disabled: !canScrollRight,
-            className: "ais-ChatToolSearchIndexCarouselHeaderScrollButton"
-        }, /*#__PURE__*/ React.createElement(ChevronRightIcon, {
-            createElement: createElement
-        }))));
-    }
+    };
     return {
         layoutComponent: SearchLayoutComponent
     };

package/dist/es/widgets/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Autocomplete';
 export * from './Breadcrumb';
 export * from './Chat';
+export * from './PromptSuggestions';
 export * from './ChatTrigger';
 export * from './ClearRefinements';
 export * from './CurrentRefinements';

package/dist/es/widgets/index.js

@@ -1,6 +1,7 @@
-export { EXPERIMENTAL_Autocomplete } from './Autocomplete.js';
+export { Autocomplete, EXPERIMENTAL_Autocomplete } from './Autocomplete.js';
 export { Breadcrumb } from './Breadcrumb.js';
 export { Chat, createDefaultTools } from './Chat.js';
+export { PromptSuggestions } from './PromptSuggestions.js';
 export { ChatTrigger } from './ChatTrigger.js';
 export { ClearRefinements } from './ClearRefinements.js';
 export { CurrentRefinements } from './CurrentRefinements.js';