instantsearch.js 4.82.0 → 4.84.0

package/es/connectors/chat/connectChat.d.ts

@@ -3,7 +3,7 @@ import { Chat } from '../../lib/chat';
 import type { AbstractChat, ChatInit as ChatInitAi, UIMessage } from '../../lib/chat';
 import type { SendEventForHits } from '../../lib/utils';
 import type { Connector, Renderer, Unmounter, UnknownWidgetParams, IndexUiState, IndexWidget } from '../../types';
-import type { UserClientSideTool } from 'instantsearch-ui-components';
+import type { UserClientSideTool, ClientSideTools } from 'instantsearch-ui-components';
 export type ChatRenderState<TUiMessage extends UIMessage = UIMessage> = {
     indexUiState: IndexUiState;
     input: string;
@@ -34,9 +34,9 @@ export type ChatRenderState<TUiMessage extends UIMessage = UIMessage> = {
      */
     onClearTransitionEnd: () => void;
     /**
-     * Tools configuration passed to the connector.
+     * Tools configuration with addToolResult bound, ready to be used by the UI.
      */
-    tools: Record<string, Omit<UserClientSideTool, 'layoutComponent'>>;
+    tools: ClientSideTools;
 } & Pick<AbstractChat<TUiMessage>, 'addToolResult' | 'clearError' | 'error' | 'id' | 'messages' | 'regenerate' | 'resumeStream' | 'sendMessage' | 'status' | 'stop'>;
 export type ChatInitWithoutTransport<TUiMessage extends UIMessage> = Omit<ChatInitAi<TUiMessage>, 'transport'>;
 export type ChatTransport = {
@@ -389,7 +389,7 @@ declare const _default: <TWidgetParams extends UnknownWidgetParams>(renderFn: Re
         isClearing: boolean;
         clearMessages: () => void;
         onClearTransitionEnd: () => void;
-        tools: Record<string, Omit<UserClientSideTool, "layoutComponent">>;
+        tools: ClientSideTools;
         widgetParams: TWidgetParams & ChatConnectorParams<TUiMessage>;
         addToolResult: <TOOL extends keyof (TUiMessage extends UIMessage<unknown, import("ai").UIDataTypes, infer TOOLS extends import("ai").UITools> ? TOOLS : import("ai").UITools)>({ tool, toolCallId, output, }: {
             tool: TOOL;

package/es/connectors/chat/connectChat.js

@@ -174,6 +174,16 @@ export default (function connectChat(renderFn) {
             widgetType: this.$$type
           });
         }
+        var toolsWithAddToolResult = {};
+        Object.entries(tools).forEach(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+            key = _ref5[0],
+            tool = _ref5[1];
+          var toolWithAddToolResult = _objectSpread(_objectSpread({}, tool), {}, {
+            addToolResult: _chatInstance.addToolResult
+          });
+          toolsWithAddToolResult[key] = toolWithAddToolResult;
+        });
         return {
           indexUiState: instantSearchInstance.getUiState()[parent.getIndexId()],
           input: input,
@@ -186,7 +196,7 @@ export default (function connectChat(renderFn) {
           isClearing: isClearing,
           clearMessages: clearMessages,
           onClearTransitionEnd: onClearTransitionEnd,
-          tools: tools,
+          tools: toolsWithAddToolResult,
           widgetParams: widgetParams,
           // Chat instance render state
           addToolResult: _chatInstance.addToolResult,

package/es/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "4.82.0";
+declare const _default: "4.84.0";
 export default _default;

package/es/lib/version.js

@@ -1 +1 @@
-export default '4.82.0';
+export default '4.84.0';

package/es/widgets/autocomplete/autocomplete.d.ts

@@ -1,9 +1,19 @@
 
-import type { AutocompleteConnectorParams, AutocompleteWidgetDescription } from '../../connectors/autocomplete/connectAutocomplete';
+import type { AutocompleteConnectorParams, AutocompleteRenderState, AutocompleteWidgetDescription } from '../../connectors/autocomplete/connectAutocomplete';
 import type { BaseHit, IndexUiState, IndexWidget, Template, WidgetFactory } from '../../types';
+import type { PlainSearchParameters } from 'algoliasearch-helper';
 import type { AutocompleteClassNames, AutocompleteIndexClassNames, AutocompleteIndexConfig } from 'instantsearch-ui-components';
 export type AutocompleteCSSClasses = Partial<AutocompleteClassNames>;
-export type AutocompleteTemplates<TItem extends BaseHit> = Partial<Record<string, TItem>>;
+export type AutocompleteSearchParameters = Omit<PlainSearchParameters, 'index'>;
+export type AutocompleteTemplates = {
+    /**
+     * Template to use for the panel.
+     */
+    panel?: Template<{
+        elements: PanelElements;
+        indices: AutocompleteRenderState['indices'];
+    }>;
+};
 type IndexConfig<TItem extends BaseHit> = AutocompleteIndexConfig<TItem> & {
     templates?: Partial<{
         /**
@@ -20,8 +30,13 @@ type IndexConfig<TItem extends BaseHit> = AutocompleteIndexConfig<TItem> & {
             onSelect: () => void;
         }>;
     }>;
+    /**
+     * Search parameters to apply to this index.
+     */
+    searchParameters?: AutocompleteSearchParameters;
     cssClasses?: Partial<AutocompleteIndexClassNames>;
 };
+type PanelElements = Partial<Record<'recent' | 'suggestions' | (string & {}), preact.JSX.Element>>;
 type AutocompleteWidgetParams<TItem extends BaseHit> = {
     /**
      * CSS Selector or HTMLElement to insert the widget.
@@ -37,12 +52,34 @@ type AutocompleteWidgetParams<TItem extends BaseHit> = {
     showSuggestions?: Partial<Pick<IndexConfig<{
         query: string;
     }>, 'indexName' | 'getURL' | 'templates' | 'cssClasses'>>;
+    showRecent?: boolean | {
+        /**
+         * Storage key to use in the local storage.
+         */
+        storageKey?: string;
+        templates?: Partial<{
+            /**
+             * Template to use for each result. This template will receive an object containing a single record.
+             */
+            item: Template<{
+                item: {
+                    query: string;
+                };
+                onSelect: () => void;
+                onRemoveRecentSearch: () => void;
+            }>;
+        }>;
+    };
+    /**
+     * Search parameters to apply to the autocomplete indices.
+     */
+    searchParameters?: AutocompleteSearchParameters;
     getSearchPageURL?: (nextUiState: IndexUiState) => string;
     onSelect?: AutocompleteIndexConfig<TItem>['onSelect'];
     /**
      * Templates to use for the widget.
      */
-    templates?: AutocompleteTemplates<TItem>;
+    templates?: AutocompleteTemplates;
     /**
      * CSS classes to add.
      */

package/es/widgets/autocomplete/autocomplete.js

@@ -1,4 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["instanceId", "containerNode"];
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -6,6 +5,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -14,11 +14,12 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { createAutocompleteComponent, createAutocompleteIndexComponent, createAutocompletePanelComponent, createAutocompletePropGetters, createAutocompleteSearchComponent, createAutocompleteSuggestionComponent, cx } from 'instantsearch-ui-components';
+import { createAutocompleteComponent, createAutocompleteIndexComponent, createAutocompletePanelComponent, createAutocompletePropGetters, createAutocompleteRecentSearchComponent, createAutocompleteSearchComponent, createAutocompleteStorage, createAutocompleteSuggestionComponent, cx } from 'instantsearch-ui-components';
 import { Fragment, h, render } from 'preact';
 import { useEffect, useId, useMemo, useRef, useState } from 'preact/hooks';
 import TemplateComponent from "../../components/Template/Template.js";
 import { connectAutocomplete, connectSearchBox } from "../../connectors/index.umd.js";
+import { ReverseHighlight } from "../../helpers/components/index.js";
 import { component } from "../../lib/suit.js";
 import { prepareTemplateProps } from "../../lib/templating/index.js";
 import { createDocumentationMessageGenerator, getContainerNode, walkIndex } from "../../lib/utils/index.js";
@@ -49,6 +50,10 @@ var AutocompleteSearchBox = createAutocompleteSearchComponent({
   createElement: h,
   Fragment: Fragment
 });
+var AutocompleteRecentSearch = createAutocompleteRecentSearchComponent({
+  createElement: h,
+  Fragment: Fragment
+});
 var usePropGetters = createAutocompletePropGetters({
   useEffect: useEffect,
   useId: useId,
@@ -56,12 +61,18 @@ var usePropGetters = createAutocompletePropGetters({
   useRef: useRef,
   useState: useState
 });
+var useStorage = createAutocompleteStorage({
+  useEffect: useEffect,
+  useState: useState,
+  useMemo: useMemo
+});
 var createRenderer = function createRenderer(params) {
   var instanceId = params.instanceId,
     containerNode = params.containerNode,
     rendererParams = _objectWithoutProperties(params, _excluded);
   return function (connectorParams, isFirstRendering) {
     if (isFirstRendering) {
+      var _targetIndex$getHelpe, _targetIndex$getHelpe2;
       var isolatedIndex = connectorParams.instantSearchInstance.mainIndex;
       var targetIndex = connectorParams.instantSearchInstance.mainIndex;
       walkIndex(targetIndex, function (childIndex) {
@@ -73,15 +84,21 @@ var createRenderer = function createRenderer(params) {
       rendererParams.renderState = {
         indexTemplateProps: [],
         isolatedIndex: isolatedIndex,
-        targetIndex: targetIndex
+        targetIndex: targetIndex,
+        templateProps: prepareTemplateProps({
+          defaultTemplates: {},
+          templatesConfig: connectorParams.instantSearchInstance.templatesConfig,
+          templates: rendererParams.templates
+        })
       };
+      connectorParams.refine((_targetIndex$getHelpe = (_targetIndex$getHelpe2 = targetIndex.getHelper()) === null || _targetIndex$getHelpe2 === void 0 ? void 0 : _targetIndex$getHelpe2.state.query) !== null && _targetIndex$getHelpe !== void 0 ? _targetIndex$getHelpe : '');
       return;
     }
     render(h(AutocompleteWrapper, _extends({}, rendererParams, connectorParams)), containerNode);
   };
 };
 function AutocompleteWrapper(_ref) {
-  var _targetIndex$getWidge, _isolatedIndex$getHel;
+  var _isolatedIndex$getHel, _targetIndex$getWidge, _showRecent$templates;
   var indicesConfig = _ref.indicesConfig,
     indices = _ref.indices,
     getSearchPageURL = _ref.getSearchPageURL,
@@ -89,9 +106,23 @@ function AutocompleteWrapper(_ref) {
     refine = _ref.refine,
     cssClasses = _ref.cssClasses,
     renderState = _ref.renderState,
-    instantSearchInstance = _ref.instantSearchInstance;
+    instantSearchInstance = _ref.instantSearchInstance,
+    showRecent = _ref.showRecent,
+    showSuggestions = _ref.showSuggestions,
+    templates = _ref.templates;
   var isolatedIndex = renderState.isolatedIndex,
     targetIndex = renderState.targetIndex;
+  var searchboxQuery = isolatedIndex === null || isolatedIndex === void 0 ? void 0 : (_isolatedIndex$getHel = isolatedIndex.getHelper()) === null || _isolatedIndex$getHel === void 0 ? void 0 : _isolatedIndex$getHel.state.query;
+  var _useStorage = useStorage({
+      query: searchboxQuery,
+      showRecent: showRecent,
+      indices: indices,
+      indicesConfig: indicesConfig
+    }),
+    storage = _useStorage.storage,
+    storageHits = _useStorage.storageHits,
+    indicesConfigForPropGetters = _useStorage.indicesConfigForPropGetters,
+    indicesForPropGetters = _useStorage.indicesForPropGetters;
   var isSearchPage = (_targetIndex$getWidge = targetIndex === null || targetIndex === void 0 ? void 0 : targetIndex.getWidgets().some(function (_ref2) {
     var $$type = _ref2.$$type;
     return ['ais.hits', 'ais.infiniteHits'].includes($$type);
@@ -105,10 +136,11 @@ function AutocompleteWrapper(_ref) {
         query: query
       }), _objectSpread2));
     });
+    query.length > 0 && storage.onAdd(query);
   };
   var _usePropGetters = usePropGetters({
-      indices: indices,
-      indicesConfig: indicesConfig,
+      indices: indicesForPropGetters,
+      indicesConfig: indicesConfigForPropGetters,
       onRefine: onRefine,
       onSelect: userOnSelect !== null && userOnSelect !== void 0 ? userOnSelect : function (_ref3) {
         var query = _ref3.query,
@@ -132,25 +164,69 @@ function AutocompleteWrapper(_ref) {
     getItemProps = _usePropGetters.getItemProps,
     getPanelProps = _usePropGetters.getPanelProps,
     getRootProps = _usePropGetters.getRootProps;
-  var query = isolatedIndex === null || isolatedIndex === void 0 ? void 0 : (_isolatedIndex$getHel = isolatedIndex.getHelper()) === null || _isolatedIndex$getHel === void 0 ? void 0 : _isolatedIndex$getHel.state.query;
-  return h(Autocomplete, _extends({}, getRootProps(), {
-    classNames: cssClasses
-  }), h(AutocompleteSearchBox, {
-    query: query || '',
-    inputProps: _objectSpread(_objectSpread({}, getInputProps()), {}, {
-      // @ts-ignore - This clashes with some ambient React JSX declarations.
-      onInput: function onInput(evt) {
-        return refine(evt.currentTarget.value);
-      }
-    }),
-    onClear: function onClear() {
-      return onRefine('');
-    },
-    isSearchStalled: instantSearchInstance.status === 'stalled'
-  }), h(AutocompletePanel, getPanelProps(), indices.map(function (_ref4, i) {
+  var AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref4) {
+    var item = _ref4.item,
+      onSelect = _ref4.onSelect,
+      onRemoveRecentSearch = _ref4.onRemoveRecentSearch;
+    return h(AutocompleteRecentSearch, {
+      item: item,
+      onSelect: onSelect,
+      onRemoveRecentSearch: onRemoveRecentSearch
+    }, h(ConditionalReverseHighlight, {
+      item: item
+    }));
+  };
+  if (_typeof(showRecent) === 'object' && (_showRecent$templates = showRecent.templates) !== null && _showRecent$templates !== void 0 && _showRecent$templates.item) {
+    var props = prepareTemplateProps({
+      defaultTemplates: {},
+      templatesConfig: instantSearchInstance.templatesConfig,
+      templates: showRecent.templates
+    });
+    AutocompleteRecentSearchComponent = function AutocompleteRecentSearchComponent(_ref5) {
+      var item = _ref5.item,
+        onSelect = _ref5.onSelect,
+        onRemoveRecentSearch = _ref5.onRemoveRecentSearch;
+      return h(TemplateComponent, _extends({}, props, {
+        templateKey: "item",
+        rootTagName: "fragment",
+        data: {
+          item: item,
+          onSelect: onSelect,
+          onRemoveRecentSearch: onRemoveRecentSearch
+        }
+      }));
+    };
+  }
+  var elements = {};
+  if (showRecent) {
+    elements.recent = h(AutocompleteIndex
+    // @ts-ignore - there seems to be problems with React.ComponentType and this, but it's actually correct
+    , {
+      ItemComponent: function ItemComponent(_ref6) {
+        var item = _ref6.item,
+          onSelect = _ref6.onSelect;
+        return h(AutocompleteRecentSearchComponent, {
+          item: item,
+          onSelect: onSelect,
+          onRemoveRecentSearch: function onRemoveRecentSearch() {
+            return storage.onRemove(item.query);
+          }
+        });
+      },
+      classNames: {
+        root: 'ais-AutocompleteRecentSearches',
+        list: 'ais-AutocompleteRecentSearchesList',
+        item: 'ais-AutocompleteRecentSearchesItem'
+      },
+      items: storageHits,
+      getItemProps: getItemProps
+    });
+  }
+  indices.forEach(function (_ref7, i) {
     var _indicesConfig$i$temp;
-    var indexId = _ref4.indexId,
-      hits = _ref4.hits;
+    var indexId = _ref7.indexId,
+      indexName = _ref7.indexName,
+      hits = _ref7.hits;
     if (!renderState.indexTemplateProps[i]) {
       renderState.indexTemplateProps[i] = prepareTemplateProps({
         defaultTemplates: {},
@@ -158,8 +234,8 @@ function AutocompleteWrapper(_ref) {
         templates: indicesConfig[i].templates
       });
     }
-    var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref5) {
-      var items = _ref5.items;
+    var headerComponent = (_indicesConfig$i$temp = indicesConfig[i].templates) !== null && _indicesConfig$i$temp !== void 0 && _indicesConfig$i$temp.header ? function (_ref8) {
+      var items = _ref8.items;
       return h(TemplateComponent, _extends({}, renderState.indexTemplateProps[i], {
         templateKey: "header",
         rootTagName: "fragment",
@@ -168,9 +244,9 @@ function AutocompleteWrapper(_ref) {
         }
       }));
     } : undefined;
-    var itemComponent = function itemComponent(_ref6) {
-      var item = _ref6.item,
-        onSelect = _ref6.onSelect;
+    var itemComponent = function itemComponent(_ref9) {
+      var item = _ref9.item,
+        onSelect = _ref9.onSelect;
       return h(TemplateComponent, _extends({}, renderState.indexTemplateProps[i], {
         templateKey: "item",
         rootTagName: "fragment",
@@ -180,7 +256,8 @@ function AutocompleteWrapper(_ref) {
         }
       }));
     };
-    return h(AutocompleteIndex, {
+    var elementId = indexName === (showSuggestions === null || showSuggestions === void 0 ? void 0 : showSuggestions.indexName) ? 'suggestions' : indexName;
+    elements[elementId] = h(AutocompleteIndex, {
       key: indexId,
       HeaderComponent: headerComponent,
       ItemComponent: itemComponent,
@@ -192,25 +269,54 @@ function AutocompleteWrapper(_ref) {
       getItemProps: getItemProps,
       classNames: indicesConfig[i].cssClasses
     });
+  });
+  return h(Autocomplete, _extends({}, getRootProps(), {
+    classNames: cssClasses
+  }), h(AutocompleteSearchBox, {
+    query: searchboxQuery || '',
+    inputProps: _objectSpread(_objectSpread({}, getInputProps()), {}, {
+      // @ts-ignore - This clashes with some ambient React JSX declarations.
+      onInput: function onInput(evt) {
+        return refine(evt.currentTarget.value);
+      }
+    }),
+    onClear: function onClear() {
+      return onRefine('');
+    },
+    isSearchStalled: instantSearchInstance.status === 'stalled'
+  }), h(AutocompletePanel, getPanelProps(), templates.panel ? h(TemplateComponent, _extends({}, renderState.templateProps, {
+    templateKey: "panel",
+    rootTagName: "fragment",
+    data: {
+      elements: elements,
+      indices: indices
+    }
+  })) : Object.keys(elements).map(function (elementId) {
+    return elements[elementId];
   })));
 }
 export function EXPERIMENTAL_autocomplete(widgetParams) {
-  var _ref7 = widgetParams || {},
-    container = _ref7.container,
-    escapeHTML = _ref7.escapeHTML,
-    _ref7$indices = _ref7.indices,
-    indices = _ref7$indices === void 0 ? [] : _ref7$indices,
-    showSuggestions = _ref7.showSuggestions,
-    getSearchPageURL = _ref7.getSearchPageURL,
-    onSelect = _ref7.onSelect,
-    _ref7$templates = _ref7.templates,
-    templates = _ref7$templates === void 0 ? {} : _ref7$templates,
-    _ref7$cssClasses = _ref7.cssClasses,
-    userCssClasses = _ref7$cssClasses === void 0 ? {} : _ref7$cssClasses;
+  var _ref0 = widgetParams || {},
+    container = _ref0.container,
+    escapeHTML = _ref0.escapeHTML,
+    _ref0$indices = _ref0.indices,
+    indices = _ref0$indices === void 0 ? [] : _ref0$indices,
+    showSuggestions = _ref0.showSuggestions,
+    showRecent = _ref0.showRecent,
+    userSearchParameters = _ref0.searchParameters,
+    getSearchPageURL = _ref0.getSearchPageURL,
+    onSelect = _ref0.onSelect,
+    _ref0$templates = _ref0.templates,
+    templates = _ref0$templates === void 0 ? {} : _ref0$templates,
+    _ref0$cssClasses = _ref0.cssClasses,
+    userCssClasses = _ref0$cssClasses === void 0 ? {} : _ref0$cssClasses;
   if (!container) {
     throw new Error(withUsage('The `container` option is required.'));
   }
   var containerNode = getContainerNode(container);
+  var searchParameters = _objectSpread({
+    hitsPerPage: 5
+  }, userSearchParameters);
   var cssClasses = {
     root: cx(suit(), userCssClasses.root)
   };
@@ -221,7 +327,16 @@ export function EXPERIMENTAL_autocomplete(widgetParams) {
       indexName: showSuggestions.indexName,
       templates: _objectSpread({
         // @ts-expect-error
-        item: AutocompleteSuggestion
+        item: function item(_ref1) {
+          var _item = _ref1.item,
+            onSelectItem = _ref1.onSelect;
+          return h(AutocompleteSuggestion, {
+            item: _item,
+            onSelect: onSelectItem
+          }, h(ConditionalReverseHighlight, {
+            item: _item
+          }));
+        }
       }, showSuggestions.templates),
       cssClasses: {
         root: cx('ais-AutocompleteSuggestions', (_showSuggestions$cssC = showSuggestions.cssClasses) === null || _showSuggestions$cssC === void 0 ? void 0 : _showSuggestions$cssC.root),
@@ -243,10 +358,13 @@ export function EXPERIMENTAL_autocomplete(widgetParams) {
     getSearchPageURL: getSearchPageURL,
     onSelect: onSelect,
     cssClasses: cssClasses,
+    showRecent: showRecent,
+    showSuggestions: showSuggestions,
     renderState: {
       indexTemplateProps: [],
       isolatedIndex: undefined,
-      targetIndex: undefined
+      targetIndex: undefined,
+      templateProps: undefined
     },
     templates: templates
   });
@@ -258,17 +376,29 @@ export function EXPERIMENTAL_autocomplete(widgetParams) {
   })({}), index({
     indexId: "ais-autocomplete-".concat(instanceId),
     EXPERIMENTAL_isolated: true
-  }).addWidgets([configure({
-    hitsPerPage: 5
-  })].concat(_toConsumableArray(indicesConfig.map(function (_ref8) {
-    var indexName = _ref8.indexName;
+  }).addWidgets([configure(searchParameters)].concat(_toConsumableArray(indicesConfig.map(function (_ref10) {
+    var indexName = _ref10.indexName,
+      indexSearchParameters = _ref10.searchParameters;
     return index({
       indexName: indexName,
       indexId: indexName
-    }).addWidgets([configure({})]);
+    }).addWidgets([configure(indexSearchParameters || {})]);
   })), [_objectSpread(_objectSpread({}, makeWidget({
     escapeHTML: escapeHTML
   })), {}, {
     $$widgetType: 'ais.autocomplete'
   })]))];
+}
+function ConditionalReverseHighlight(_ref11) {
+  var _item$_highlightResul;
+  var item = _ref11.item;
+  if (!((_item$_highlightResul = item._highlightResult) !== null && _item$_highlightResul !== void 0 && _item$_highlightResul.query) ||
+  // @ts-expect-error - we should not have matchLevel as arrays here
+  item._highlightResult.query.matchLevel === 'none') {
+    return item.query;
+  }
+  return h(ReverseHighlight, {
+    attribute: "query",
+    hit: item
+  });
 }

package/es/widgets/chat/chat.d.ts

@@ -2,7 +2,7 @@
 import { SearchIndexToolType, RecommendToolType } from '../../lib/chat';
 import type { ChatConnectorParams, ChatWidgetDescription } from '../../connectors/chat/connectChat';
 import type { WidgetFactory, Hit, TemplateWithBindEvent, BaseHit, Template, IndexUiState } from '../../types';
-import type { ChatClassNames, ChatHeaderProps, ChatMessageActionProps, ChatMessageBase, ChatMessageErrorProps, ChatMessageLoaderProps, ChatPromptProps, ChatToggleButtonProps, ClientSideToolComponentProps, RecordWithObjectID, UserClientSideTool } from 'instantsearch-ui-components';
+import type { ChatClassNames, ChatHeaderProps, ChatMessageActionProps, ChatMessageBase, ChatMessageErrorProps, ChatMessageLoaderProps, ChatPromptProps, ChatToggleButtonProps, ClientSideToolComponentProps, ClientSideTools, RecordWithObjectID, UserClientSideTool } from 'instantsearch-ui-components';
 export { SearchIndexToolType, RecommendToolType };
 export type UserClientSideToolTemplates = Partial<{
     layout: TemplateWithBindEvent<ClientSideToolComponentProps>;
@@ -95,6 +95,45 @@ export type ChatTemplates<THit extends NonNullable<object> = BaseHit> = Partial<
          */
         regenerateLabelText?: string;
     }>;
+    /**
+     * Templates to use for each message.
+     */
+    message: Partial<{
+        /**
+         * Label for the message actions
+         */
+        actionsLabelText?: string;
+        /**
+         * Label for the message container
+         */
+        messageLabelText?: string;
+    }>;
+    /**
+     * Templates to use for the assistant message.
+     */
+    assistantMessage: Partial<{
+        /**
+         * Template to use for the assistant message leading content.
+         */
+        leading: Template;
+        /**
+         * Template to use for the assistant message footer content.
+         */
+        footer: Template;
+    }>;
+    /**
+     * Templates to use for the user message.
+     */
+    userMessage: Partial<{
+        /**
+         * Template to use for the user message leading content.
+         */
+        leading: Template;
+        /**
+         * Template to use for the user message footer content.
+         */
+        footer: Template;
+    }>;
     /**
      * Templates to use for the prompt.
      */
@@ -515,7 +554,7 @@ declare const _default: <THit extends RecordWithObjectID = RecordWithObjectID>(w
         isClearing: boolean;
         clearMessages: () => void;
         onClearTransitionEnd: () => void;
-        tools: Record<string, Omit<UserClientSideTool, "layoutComponent">>;
+        tools: ClientSideTools;
         widgetParams: Partial<ChatWidgetParams<RecordWithObjectID>> & ChatConnectorParams<import("ai").UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>;
         addToolResult: <TOOL extends string>({ tool, toolCallId, output, }: {
             tool: TOOL;