instantsearch-ui-components 0.16.0 → 0.17.1

package/dist/cjs/components/FilterSuggestions.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFilterSuggestionsComponent = createFilterSuggestionsComponent;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _lib = require("../lib");
+var _Button = require("./Button");
+var _icons = require("./chat/icons");
+var _excluded = ["classNames", "suggestions", "isLoading", "refine", "skeletonCount", "itemComponent", "headerComponent", "emptyComponent"];
+function createFilterSuggestionsComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = (0, _Button.createButtonComponent)({
+    createElement: createElement
+  });
+  function DefaultHeader(_ref2) {
+    var classNames = _ref2.classNames;
+    return createElement("div", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-header', classNames.header)
+    }, createElement("span", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-headerIcon', classNames.headerIcon)
+    }, createElement(_icons.SparklesIcon, {
+      createElement: createElement
+    })), createElement("span", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-headerTitle', classNames.headerTitle)
+    }, "Filter suggestions"));
+  }
+  function DefaultItem(_ref3) {
+    var suggestion = _ref3.suggestion,
+      classNames = _ref3.classNames,
+      refine = _ref3.refine;
+    return createElement(Button, {
+      variant: "outline",
+      size: "sm",
+      className: (0, _lib.cx)(classNames.button),
+      onClick: refine
+    }, createElement("span", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-label', classNames.label)
+    }, suggestion.label, ": ", suggestion.value), createElement("span", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-count', classNames.count)
+    }, suggestion.count));
+  }
+  return function FilterSuggestions(userProps) {
+    var _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      suggestions = userProps.suggestions,
+      isLoading = userProps.isLoading,
+      _refine = userProps.refine,
+      _userProps$skeletonCo = userProps.skeletonCount,
+      skeletonCount = _userProps$skeletonCo === void 0 ? 3 : _userProps$skeletonCo,
+      _userProps$itemCompon = userProps.itemComponent,
+      ItemComponent = _userProps$itemCompon === void 0 ? DefaultItem : _userProps$itemCompon,
+      headerComponent = userProps.headerComponent,
+      EmptyComponent = userProps.emptyComponent,
+      props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
+    var HeaderComponent = headerComponent === false ? null : headerComponent !== null && headerComponent !== void 0 ? headerComponent : DefaultHeader;
+    var isEmpty = suggestions.length === 0;
+    if (isEmpty && !isLoading) {
+      return createElement("div", (0, _extends2.default)({}, props, {
+        className: (0, _lib.cx)('ais-FilterSuggestions', classNames.root, 'ais-FilterSuggestions--empty', classNames.emptyRoot, props.className)
+      }), EmptyComponent && createElement(EmptyComponent, {
+        classNames: {
+          emptyRoot: classNames.emptyRoot
+        }
+      }));
+    }
+    var headerClassNames = {
+      header: classNames.header,
+      headerIcon: classNames.headerIcon,
+      headerTitle: classNames.headerTitle
+    };
+    var itemClassNames = {
+      item: classNames.item,
+      button: classNames.button,
+      label: classNames.label,
+      count: classNames.count
+    };
+    return createElement("div", (0, _extends2.default)({}, props, {
+      className: (0, _lib.cx)('ais-FilterSuggestions', classNames.root, isLoading && (0, _lib.cx)('ais-FilterSuggestions--loading', classNames.loadingRoot), props.className)
+    }), HeaderComponent && createElement(HeaderComponent, {
+      classNames: headerClassNames
+    }), isLoading ? createElement("div", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-skeleton', classNames.skeleton)
+    }, (0, _toConsumableArray2.default)(new Array(skeletonCount)).map(function (_, i) {
+      return createElement("div", {
+        key: i,
+        className: (0, _lib.cx)('ais-FilterSuggestions-skeletonItem', classNames.skeletonItem)
+      });
+    })) : createElement("ul", {
+      className: (0, _lib.cx)('ais-FilterSuggestions-list', classNames.list)
+    }, suggestions.map(function (suggestion) {
+      return createElement("li", {
+        key: "".concat(suggestion.attribute, "-").concat(suggestion.value),
+        className: (0, _lib.cx)('ais-FilterSuggestions-item', classNames.item)
+      }, createElement(ItemComponent, {
+        suggestion: suggestion,
+        classNames: itemClassNames,
+        refine: function refine() {
+          return _refine(suggestion.attribute, suggestion.value);
+        }
+      }));
+    })));
+  };
+}

package/dist/cjs/components/autocomplete/AutocompleteIndex.js

@@ -18,6 +18,9 @@ function createAutocompleteIndexComponent(_ref) {
       getItemProps = userProps.getItemProps,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+    if (items.length === 0) {
+      return null;
+    }
     return createElement("div", {
       className: (0, _cx.cx)('ais-AutocompleteIndex', classNames.root)
     }, HeaderComponent && createElement("div", {

package/dist/cjs/components/autocomplete/createAutocompletePropGetters.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createAutocompletePropGetters = createAutocompletePropGetters;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _lib = require("../../lib");
 function createAutocompletePropGetters(_ref) {
   var useEffect = _ref.useEffect,
     useId = _ref.useId,
@@ -218,18 +219,23 @@ function buildItems(_ref5) {
     getElementId = _ref5.getElementId;
   var itemsIds = [];
   var items = new Map();
-  for (var i = 0; i < indicesConfig.length; i++) {
+  var _loop = function _loop(i) {
     var _indices$i;
-    var config = indicesConfig[i];
+    var currentIndexConfig = (0, _lib.find)(indicesConfig, function (config) {
+      return config.indexName === indices[i].indexName;
+    });
     var hits = ((_indices$i = indices[i]) === null || _indices$i === void 0 ? void 0 : _indices$i.hits) || [];
     for (var position = 0; position < hits.length; position++) {
-      var itemId = getElementId('item', config.indexName, position);
+      var itemId = getElementId('item', (currentIndexConfig === null || currentIndexConfig === void 0 ? void 0 : currentIndexConfig.indexName) || indices[i].indexName, position);
       items.set(itemId, {
         item: hits[position],
-        config: config
+        config: currentIndexConfig
       });
       itemsIds.push(itemId);
     }
+  };
+  for (var i = 0; i < indices.length; i++) {
+    _loop(i);
   }
   return {
     items: items,

package/dist/cjs/components/autocomplete/createAutocompleteStorage.js

@@ -6,9 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createAutocompleteStorage = createAutocompleteStorage;
 exports.createStorage = createStorage;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lib = require("../../lib");
+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) { (0, _defineProperty2.default)(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 createAutocompleteStorage(_ref) {
   var useEffect = _ref.useEffect,
     useMemo = _ref.useMemo,
@@ -17,7 +21,8 @@ function createAutocompleteStorage(_ref) {
     var showRecent = _ref2.showRecent,
       query = _ref2.query,
       indices = _ref2.indices,
-      indicesConfig = _ref2.indicesConfig;
+      indicesConfig = _ref2.indicesConfig,
+      suggestionsIndexName = _ref2.suggestionsIndexName;
     var storageKey = showRecent && (0, _typeof2.default)(showRecent) === 'object' ? showRecent.storageKey : undefined;
     var storage = useMemo(function () {
       return createStorage({
@@ -61,7 +66,15 @@ function createAutocompleteStorage(_ref) {
         })
       };
     });
-    var indicesForPropGetters = (0, _toConsumableArray2.default)(indices);
+    var indicesForPropGetters = (0, _toConsumableArray2.default)(indices.map(function (index) {
+      return index.indexName === suggestionsIndexName ? _objectSpread(_objectSpread({}, index), {}, {
+        hits: index.hits.filter(function (hit) {
+          return !(0, _lib.find)(storageHits, function (storageHit) {
+            return storageHit.query === hit.query;
+          });
+        })
+      }) : index;
+    }));
     var indicesConfigForPropGetters = (0, _toConsumableArray2.default)(indicesConfig);
     indicesForPropGetters.unshift({
       indexName: 'recent-searches',

package/dist/cjs/components/chat/Chat.js

@@ -12,8 +12,9 @@ var _lib = require("../../lib");
 var _ChatHeader = require("./ChatHeader");
 var _ChatMessages = require("./ChatMessages");
 var _ChatPrompt = require("./ChatPrompt");
+var _ChatPromptSuggestions = require("./ChatPromptSuggestions");
 var _ChatToggleButton = require("./ChatToggleButton");
-var _excluded = ["open", "maximized", "headerProps", "toggleButtonProps", "messagesProps", "promptProps", "headerComponent", "promptComponent", "toggleButtonComponent", "classNames", "className"];
+var _excluded = ["open", "maximized", "headerProps", "toggleButtonProps", "messagesProps", "suggestionsProps", "promptProps", "headerComponent", "promptComponent", "toggleButtonComponent", "suggestionsComponent", "classNames", "className"];
 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) { (0, _defineProperty2.default)(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 createChatComponent(_ref) {
@@ -35,6 +36,10 @@ function createChatComponent(_ref) {
     createElement: createElement,
     Fragment: Fragment
   });
+  var ChatPromptSuggestions = (0, _ChatPromptSuggestions.createChatPromptSuggestionsComponent)({
+    createElement: createElement,
+    Fragment: Fragment
+  });
   return function Chat(userProps) {
     var open = userProps.open,
       _userProps$maximized = userProps.maximized,
@@ -42,11 +47,13 @@ function createChatComponent(_ref) {
       headerProps = userProps.headerProps,
       toggleButtonProps = userProps.toggleButtonProps,
       messagesProps = userProps.messagesProps,
+      suggestionsProps = userProps.suggestionsProps,
       _userProps$promptProp = userProps.promptProps,
       promptProps = _userProps$promptProp === void 0 ? {} : _userProps$promptProp,
       HeaderComponent = userProps.headerComponent,
       PromptComponent = userProps.promptComponent,
       ToggleButtonComponent = userProps.toggleButtonComponent,
+      SuggestionsComponent = userProps.suggestionsComponent,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
       className = userProps.className,
@@ -60,7 +67,10 @@ function createChatComponent(_ref) {
       maximized: maximized
     })), createElement(ChatMessages, (0, _extends2.default)({}, messagesProps, {
       classNames: classNames.messages,
-      messageClassNames: classNames.message
+      messageClassNames: classNames.message,
+      suggestionsElement: createElement(SuggestionsComponent || ChatPromptSuggestions, _objectSpread(_objectSpread({}, suggestionsProps), {}, {
+        classNames: classNames.suggestions
+      }))
     })), createElement(PromptComponent || ChatPrompt, _objectSpread(_objectSpread({}, promptProps), {}, {
       classNames: classNames.prompt
     }))), createElement("div", {

package/dist/cjs/components/chat/ChatMessage.js

@@ -12,7 +12,7 @@ var _markdownToJsx = require("markdown-to-jsx");
 var _lib = require("../../lib");
 var _Button = require("../Button");
 var _icons = require("./icons");
-var _excluded = ["classNames", "message", "side", "variant", "actions", "autoHideActions", "leadingComponent", "actionsComponent", "footerComponent", "tools", "indexUiState", "setIndexUiState", "onClose", "translations"];
+var _excluded = ["classNames", "message", "side", "variant", "actions", "autoHideActions", "leadingComponent", "actionsComponent", "footerComponent", "tools", "indexUiState", "setIndexUiState", "onClose", "translations", "suggestionsElement"];
 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) { (0, _defineProperty2.default)(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 createChatMessageComponent(_ref) {
@@ -41,6 +41,7 @@ function createChatMessageComponent(_ref) {
       setIndexUiState = userProps.setIndexUiState,
       onClose = userProps.onClose,
       userTranslations = userProps.translations,
+      suggestionsElement = userProps.suggestionsElement,
       props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
     var translations = _objectSpread({
       messageLabel: 'Message',
@@ -112,7 +113,7 @@ function createChatMessageComponent(_ref) {
       className: (0, _lib.cx)(cssClasses.content)
     }, createElement("div", {
       className: (0, _lib.cx)(cssClasses.message)
-    }, message.parts.map(renderMessagePart)), hasActions && createElement("div", {
+    }, message.parts.map(renderMessagePart)), suggestionsElement, hasActions && createElement("div", {
       className: (0, _lib.cx)(cssClasses.actions),
       "aria-label": translations.actionsLabel
     }, ActionsComponent ? createElement(ActionsComponent, {

package/dist/cjs/components/chat/ChatMessages.js

@@ -15,7 +15,7 @@ var _ChatMessage = require("./ChatMessage");
 var _ChatMessageError = require("./ChatMessageError");
 var _ChatMessageLoader = require("./ChatMessageLoader");
 var _icons = require("./icons");
-var _excluded = ["classNames", "messageClassNames", "messageTranslations", "messages", "messageComponent", "loaderComponent", "errorComponent", "actionsComponent", "tools", "indexUiState", "setIndexUiState", "status", "hideScrollToBottom", "onReload", "onClose", "translations", "userMessageProps", "assistantMessageProps", "isClearing", "onClearTransitionEnd", "isScrollAtBottom", "scrollRef", "contentRef", "onScrollToBottom"];
+var _excluded = ["classNames", "messageClassNames", "messageTranslations", "messages", "messageComponent", "loaderComponent", "errorComponent", "actionsComponent", "tools", "indexUiState", "setIndexUiState", "status", "hideScrollToBottom", "onReload", "onClose", "translations", "userMessageProps", "assistantMessageProps", "isClearing", "onClearTransitionEnd", "isScrollAtBottom", "scrollRef", "contentRef", "onScrollToBottom", "suggestionsElement"];
 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) { (0, _defineProperty2.default)(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; }
 var getTextContent = function getTextContent(message) {
@@ -48,7 +48,8 @@ function createDefaultMessageComponent(_ref) {
       actionsComponent = _ref2.actionsComponent,
       classNames = _ref2.classNames,
       messageTranslations = _ref2.messageTranslations,
-      translations = _ref2.translations;
+      translations = _ref2.translations,
+      suggestionsElement = _ref2.suggestionsElement;
     var defaultAssistantActions = [].concat((0, _toConsumableArray2.default)(hasTextContent(message) ? [{
       title: translations.copyToClipboardLabel,
       icon: function icon() {
@@ -82,7 +83,8 @@ function createDefaultMessageComponent(_ref) {
       actionsComponent: actionsComponent,
       "data-role": message.role,
       classNames: classNames,
-      translations: messageTranslations
+      translations: messageTranslations,
+      suggestionsElement: suggestionsElement
     }, messageProps));
   };
 }
@@ -133,6 +135,7 @@ function createChatMessagesComponent(_ref3) {
       scrollRef = userProps.scrollRef,
       contentRef = userProps.contentRef,
       onScrollToBottom = userProps.onScrollToBottom,
+      suggestionsElement = userProps.suggestionsElement,
       props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
     var translations = _objectSpread({
       scrollToBottomLabel: 'Scroll to bottom',
@@ -164,7 +167,7 @@ function createChatMessagesComponent(_ref3) {
           onClearTransitionEnd === null || onClearTransitionEnd === void 0 ? void 0 : onClearTransitionEnd();
         }
       }
-    }, messages.map(function (message) {
+    }, messages.map(function (message, index) {
       return createElement(DefaultMessage, {
         key: message.id,
         message: message,
@@ -178,7 +181,8 @@ function createChatMessagesComponent(_ref3) {
         onClose: onClose,
         translations: translations,
         classNames: messageClassNames,
-        messageTranslations: messageTranslations
+        messageTranslations: messageTranslations,
+        suggestionsElement: status === 'ready' && message.role === 'assistant' && index === messages.length - 1 ? suggestionsElement : undefined
       });
     }), status === 'submitted' && createElement(DefaultLoader, {
       translations: {

package/dist/cjs/components/chat/ChatPromptSuggestions.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChatPromptSuggestionsComponent = createChatPromptSuggestionsComponent;
+var _lib = require("../../lib");
+var _Button = require("../Button");
+function createChatPromptSuggestionsComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = (0, _Button.createButtonComponent)({
+    createElement: createElement
+  });
+  return function ChatPromptSuggestions(userProps) {
+    var _userProps$suggestion = userProps.suggestions,
+      suggestions = _userProps$suggestion === void 0 ? [] : _userProps$suggestion,
+      onSuggestionClick = userProps.onSuggestionClick,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+    if (suggestions.length === 0) {
+      return null;
+    }
+    return createElement("div", {
+      className: (0, _lib.cx)('ais-ChatPromptSuggestions', classNames.root)
+    }, suggestions.map(function (suggestion, index) {
+      return createElement(Button, {
+        key: index,
+        size: "sm",
+        variant: "primary",
+        className: (0, _lib.cx)('ais-ChatPromptSuggestions-suggestion', classNames.suggestion),
+        onClick: function onClick() {
+          return onSuggestionClick(suggestion);
+        }
+      }, suggestion);
+    }));
+  };
+}

package/dist/cjs/components/index.js

@@ -113,6 +113,17 @@ Object.keys(_ChatPrompt).forEach(function (key) {
     }
   });
 });
+var _ChatPromptSuggestions = require("./chat/ChatPromptSuggestions");
+Object.keys(_ChatPromptSuggestions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatPromptSuggestions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ChatPromptSuggestions[key];
+    }
+  });
+});
 var _ChatToggleButton = require("./chat/ChatToggleButton");
 Object.keys(_ChatToggleButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -211,4 +222,15 @@ Object.keys(_TrendingItems).forEach(function (key) {
       return _TrendingItems[key];
     }
   });
+});
+var _FilterSuggestions = require("./FilterSuggestions");
+Object.keys(_FilterSuggestions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FilterSuggestions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FilterSuggestions[key];
+    }
+  });
 });

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '0.16.0';
+var _default = exports.default = '0.17.1';

package/dist/es/components/FilterSuggestions.d.ts

@@ -0,0 +1,108 @@
+import type { ComponentProps, Renderer } from '../types';
+export type Suggestion = {
+    /**
+     * The facet attribute name.
+     */
+    attribute: string;
+    /**
+     * The facet value to filter by.
+     */
+    value: string;
+    /**
+     * Human-readable display label.
+     */
+    label: string;
+    /**
+     * Number of records matching this filter.
+     */
+    count: number;
+};
+export type FilterSuggestionsItemComponentProps = {
+    suggestion: Suggestion;
+    classNames: Partial<Pick<FilterSuggestionsClassNames, 'item' | 'button' | 'label' | 'count'>>;
+    refine: () => void;
+};
+export type FilterSuggestionsHeaderComponentProps = {
+    classNames: Partial<Pick<FilterSuggestionsClassNames, 'header' | 'headerIcon' | 'headerTitle'>>;
+};
+export type FilterSuggestionsEmptyComponentProps = {
+    classNames: Partial<Pick<FilterSuggestionsClassNames, 'emptyRoot'>>;
+};
+export type FilterSuggestionsProps = ComponentProps<'div'> & {
+    suggestions: Suggestion[];
+    isLoading: boolean;
+    refine: (attribute: string, value: string) => void;
+    classNames?: Partial<FilterSuggestionsClassNames>;
+    /**
+     * Number of skeleton items to show when loading.
+     * @default 3
+     */
+    skeletonCount?: number;
+    /**
+     * Component to render each suggestion item.
+     */
+    itemComponent?: (props: FilterSuggestionsItemComponentProps) => JSX.Element;
+    /**
+     * Component to render the header. Set to `false` to disable the header.
+     */
+    headerComponent?: ((props: FilterSuggestionsHeaderComponentProps) => JSX.Element) | false;
+    /**
+     * Component to render when there are no suggestions.
+     */
+    emptyComponent?: (props: FilterSuggestionsEmptyComponentProps) => JSX.Element | null;
+};
+export type FilterSuggestionsClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root: string | string[];
+    /**
+     * Class names to apply to the root element when loading
+     */
+    loadingRoot: string | string[];
+    /**
+     * Class names to apply to the root element when empty
+     */
+    emptyRoot: string | string[];
+    /**
+     * Class names to apply to the header element
+     */
+    header: string | string[];
+    /**
+     * Class names to apply to the header icon element
+     */
+    headerIcon: string | string[];
+    /**
+     * Class names to apply to the header title element
+     */
+    headerTitle: string | string[];
+    /**
+     * Class names to apply to the skeleton container element
+     */
+    skeleton: string | string[];
+    /**
+     * Class names to apply to each skeleton item element
+     */
+    skeletonItem: string | string[];
+    /**
+     * Class names to apply to the list element
+     */
+    list: string | string[];
+    /**
+     * Class names to apply to each item element
+     */
+    item: string | string[];
+    /**
+     * Class names to apply to the button element
+     */
+    button: string | string[];
+    /**
+     * Class names to apply to the label element
+     */
+    label: string | string[];
+    /**
+     * Class names to apply to the count element
+     */
+    count: string | string[];
+};
+export declare function createFilterSuggestionsComponent({ createElement }: Renderer): (userProps: FilterSuggestionsProps) => JSX.Element | null;

package/dist/es/components/FilterSuggestions.js

@@ -0,0 +1,101 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["classNames", "suggestions", "isLoading", "refine", "skeletonCount", "itemComponent", "headerComponent", "emptyComponent"];
+import { cx } from "../lib/index.js";
+import { createButtonComponent } from "./Button.js";
+import { SparklesIcon } from "./chat/icons.js";
+export function createFilterSuggestionsComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = createButtonComponent({
+    createElement: createElement
+  });
+  function DefaultHeader(_ref2) {
+    var classNames = _ref2.classNames;
+    return createElement("div", {
+      className: cx('ais-FilterSuggestions-header', classNames.header)
+    }, createElement("span", {
+      className: cx('ais-FilterSuggestions-headerIcon', classNames.headerIcon)
+    }, createElement(SparklesIcon, {
+      createElement: createElement
+    })), createElement("span", {
+      className: cx('ais-FilterSuggestions-headerTitle', classNames.headerTitle)
+    }, "Filter suggestions"));
+  }
+  function DefaultItem(_ref3) {
+    var suggestion = _ref3.suggestion,
+      classNames = _ref3.classNames,
+      refine = _ref3.refine;
+    return createElement(Button, {
+      variant: "outline",
+      size: "sm",
+      className: cx(classNames.button),
+      onClick: refine
+    }, createElement("span", {
+      className: cx('ais-FilterSuggestions-label', classNames.label)
+    }, suggestion.label, ": ", suggestion.value), createElement("span", {
+      className: cx('ais-FilterSuggestions-count', classNames.count)
+    }, suggestion.count));
+  }
+  return function FilterSuggestions(userProps) {
+    var _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      suggestions = userProps.suggestions,
+      isLoading = userProps.isLoading,
+      _refine = userProps.refine,
+      _userProps$skeletonCo = userProps.skeletonCount,
+      skeletonCount = _userProps$skeletonCo === void 0 ? 3 : _userProps$skeletonCo,
+      _userProps$itemCompon = userProps.itemComponent,
+      ItemComponent = _userProps$itemCompon === void 0 ? DefaultItem : _userProps$itemCompon,
+      headerComponent = userProps.headerComponent,
+      EmptyComponent = userProps.emptyComponent,
+      props = _objectWithoutProperties(userProps, _excluded);
+    var HeaderComponent = headerComponent === false ? null : headerComponent !== null && headerComponent !== void 0 ? headerComponent : DefaultHeader;
+    var isEmpty = suggestions.length === 0;
+    if (isEmpty && !isLoading) {
+      return createElement("div", _extends({}, props, {
+        className: cx('ais-FilterSuggestions', classNames.root, 'ais-FilterSuggestions--empty', classNames.emptyRoot, props.className)
+      }), EmptyComponent && createElement(EmptyComponent, {
+        classNames: {
+          emptyRoot: classNames.emptyRoot
+        }
+      }));
+    }
+    var headerClassNames = {
+      header: classNames.header,
+      headerIcon: classNames.headerIcon,
+      headerTitle: classNames.headerTitle
+    };
+    var itemClassNames = {
+      item: classNames.item,
+      button: classNames.button,
+      label: classNames.label,
+      count: classNames.count
+    };
+    return createElement("div", _extends({}, props, {
+      className: cx('ais-FilterSuggestions', classNames.root, isLoading && cx('ais-FilterSuggestions--loading', classNames.loadingRoot), props.className)
+    }), HeaderComponent && createElement(HeaderComponent, {
+      classNames: headerClassNames
+    }), isLoading ? createElement("div", {
+      className: cx('ais-FilterSuggestions-skeleton', classNames.skeleton)
+    }, _toConsumableArray(new Array(skeletonCount)).map(function (_, i) {
+      return createElement("div", {
+        key: i,
+        className: cx('ais-FilterSuggestions-skeletonItem', classNames.skeletonItem)
+      });
+    })) : createElement("ul", {
+      className: cx('ais-FilterSuggestions-list', classNames.list)
+    }, suggestions.map(function (suggestion) {
+      return createElement("li", {
+        key: "".concat(suggestion.attribute, "-").concat(suggestion.value),
+        className: cx('ais-FilterSuggestions-item', classNames.item)
+      }, createElement(ItemComponent, {
+        suggestion: suggestion,
+        classNames: itemClassNames,
+        refine: function refine() {
+          return _refine(suggestion.attribute, suggestion.value);
+        }
+      }));
+    })));
+  };
+}

package/dist/es/components/autocomplete/AutocompleteIndex.d.ts

@@ -37,4 +37,4 @@ export type AutocompleteIndexClassNames = {
      */
     item: string | string[];
 };
-export declare function createAutocompleteIndexComponent({ createElement }: Renderer): (userProps: AutocompleteIndexProps) => JSX.Element;
+export declare function createAutocompleteIndexComponent({ createElement }: Renderer): (userProps: AutocompleteIndexProps) => JSX.Element | null;

package/dist/es/components/autocomplete/AutocompleteIndex.js

@@ -11,6 +11,9 @@ export function createAutocompleteIndexComponent(_ref) {
       getItemProps = userProps.getItemProps,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+    if (items.length === 0) {
+      return null;
+    }
     return createElement("div", {
       className: cx('ais-AutocompleteIndex', classNames.root)
     }, HeaderComponent && createElement("div", {