instantsearch-ui-components 0.15.2 → 0.17.0

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

@@ -11,9 +11,11 @@ export type AutocompleteIndexProps<T = {
     ItemComponent: (props: {
         item: T;
         onSelect: () => void;
+        onApply: () => void;
     }) => JSX.Element;
     getItemProps: (item: T, index: number) => Omit<ComponentProps<'li'>, 'onSelect'> & {
         onSelect: () => void;
+        onApply: () => void;
     };
     classNames?: Partial<AutocompleteIndexClassNames>;
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "onSelect"];
+var _excluded = ["className", "onSelect", "onApply"];
 import { cx } from "../../lib/cx.js";
 export function createAutocompleteIndexComponent(_ref) {
   var createElement = _ref.createElement;
@@ -23,6 +23,7 @@ export function createAutocompleteIndexComponent(_ref) {
       var _getItemProps = getItemProps(item, index),
         className = _getItemProps.className,
         onSelect = _getItemProps.onSelect,
+        onApply = _getItemProps.onApply,
         itemProps = _objectWithoutProperties(_getItemProps, _excluded);
       return createElement("li", _extends({
         key: "".concat(itemProps.id, ":").concat(item.objectID)
@@ -30,7 +31,8 @@ export function createAutocompleteIndexComponent(_ref) {
         className: cx('ais-AutocompleteIndexItem', classNames.item, className)
       }), createElement(ItemComponent, {
         item: item,
-        onSelect: onSelect
+        onSelect: onSelect,
+        onApply: onApply
       }));
     })));
   };

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

@@ -7,6 +7,7 @@ export type AutocompleteRecentSearchProps<T = {
     children?: ComponentChildren;
     onSelect: () => void;
     onRemoveRecentSearch: () => void;
+    onApply: () => void;
     classNames?: Partial<AutocompleteRecentSearchClassNames>;
 };
 export type AutocompleteRecentSearchClassNames = {
@@ -34,5 +35,9 @@ export type AutocompleteRecentSearchClassNames = {
      * Class names to apply to the delete button element
      **/
     deleteButton: string | string[];
+    /**
+     * Class names to apply to the apply button element
+     **/
+    applyButton: string | string[];
 };
 export declare function createAutocompleteRecentSearchComponent({ createElement, }: Renderer): (userProps: AutocompleteRecentSearchProps) => JSX.Element;

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

@@ -1,5 +1,5 @@
 import { cx } from "../../lib/index.js";
-import { ClockIcon, TrashIcon } from "./icons.js";
+import { ApplyIcon, ClockIcon, TrashIcon } from "./icons.js";
 export function createAutocompleteRecentSearchComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteRecentSearch(userProps) {
@@ -7,6 +7,7 @@ export function createAutocompleteRecentSearchComponent(_ref) {
       children = userProps.children,
       onSelect = userProps.onSelect,
       onRemoveRecentSearch = userProps.onRemoveRecentSearch,
+      onApply = userProps.onApply,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
     return createElement("div", {
@@ -31,6 +32,15 @@ export function createAutocompleteRecentSearchComponent(_ref) {
       }
     }, createElement(TrashIcon, {
       createElement: createElement
+    })), createElement("button", {
+      className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemApplyButton', classNames.applyButton),
+      title: "Apply ".concat(item.query, " as search"),
+      onClick: function onClick(evt) {
+        evt.stopPropagation();
+        onApply();
+      }
+    }, createElement(ApplyIcon, {
+      createElement: createElement
     }))));
   };
 }

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

@@ -5,6 +5,7 @@ export type AutocompleteSuggestionProps<T = {
 } & Record<string, unknown>> = {
     item: T;
     onSelect: () => void;
+    onApply: () => void;
     children: ComponentChildren;
     classNames?: Partial<AutocompleteSuggestionClassNames>;
 };
@@ -21,5 +22,7 @@ export type AutocompleteSuggestionClassNames = {
     icon: string | string[];
     /** Class names to apply to the body element **/
     body: string | string[];
+    /** Class names to apply to the apply button element **/
+    applyButton: string | string[];
 };
 export declare function createAutocompleteSuggestionComponent({ createElement, }: Renderer): (userProps: AutocompleteSuggestionProps) => JSX.Element;

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

@@ -1,10 +1,12 @@
 import { cx } from "../../lib/index.js";
-import { SubmitIcon } from "./icons.js";
+import { SubmitIcon, ApplyIcon } from "./icons.js";
 export function createAutocompleteSuggestionComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteSuggestion(userProps) {
-    var children = userProps.children,
+    var item = userProps.item,
+      children = userProps.children,
       onSelect = userProps.onSelect,
+      onApply = userProps.onApply,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
     return createElement("div", {
@@ -18,6 +20,18 @@ export function createAutocompleteSuggestionComponent(_ref) {
       createElement: createElement
     })), createElement("div", {
       className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-    }, children)));
+    }, children)), createElement("div", {
+      className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteSuggestionItemActions', classNames.actions)
+    }, createElement("button", {
+      className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteSuggestionItemApplyButton', classNames.applyButton),
+      type: "button",
+      title: "Apply ".concat(item.query, " as search"),
+      onClick: function onClick(evt) {
+        evt.stopPropagation();
+        onApply();
+      }
+    }, createElement(ApplyIcon, {
+      createElement: createElement
+    }))));
   };
 }

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

@@ -21,6 +21,7 @@ type GetItemProps = (item: {
     'aria-selected'?: boolean;
 } & {
     onSelect: () => void;
+    onApply: () => void;
 };
 type GetPanelProps = () => {
     id?: string;
@@ -51,6 +52,7 @@ export type UsePropGetters<TItem extends BaseHit> = (params: {
     indicesConfig: Array<AutocompleteIndexConfig<TItem>>;
     onRefine: (query: string) => void;
     onSelect: NonNullable<AutocompleteIndexConfig<TItem>['onSelect']>;
+    onApply: (query: string) => void;
     placeholder?: string;
 }) => {
     getInputProps: GetInputProps;
@@ -58,5 +60,5 @@ export type UsePropGetters<TItem extends BaseHit> = (params: {
     getPanelProps: GetPanelProps;
     getRootProps: GetRootProps;
 };
-export declare function createAutocompletePropGetters({ useEffect, useId, useMemo, useRef, useState, }: CreateAutocompletePropGettersParams): <TItem extends BaseHit>({ indices, indicesConfig, onRefine, onSelect: globalOnSelect, placeholder, }: Parameters<UsePropGetters<TItem>>[0]) => ReturnType<UsePropGetters<TItem>>;
+export declare function createAutocompletePropGetters({ useEffect, useId, useMemo, useRef, useState, }: CreateAutocompletePropGettersParams): <TItem extends BaseHit>({ indices, indicesConfig, onRefine, onSelect: globalOnSelect, onApply, placeholder, }: Parameters<UsePropGetters<TItem>>[0]) => ReturnType<UsePropGetters<TItem>>;
 export {};

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

@@ -1,5 +1,6 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { find } from "../../lib/index.js";
 export function createAutocompletePropGetters(_ref) {
   var useEffect = _ref.useEffect,
     useId = _ref.useId,
@@ -11,6 +12,7 @@ export function createAutocompletePropGetters(_ref) {
       indicesConfig = _ref2.indicesConfig,
       onRefine = _ref2.onRefine,
       globalOnSelect = _ref2.onSelect,
+      _onApply = _ref2.onApply,
       placeholder = _ref2.placeholder;
     var getElementId = createGetElementId(useId());
     var inputRef = useRef(null);
@@ -178,6 +180,13 @@ export function createAutocompletePropGetters(_ref) {
             return submit({
               activeDescendant: id
             });
+          },
+          onApply: function onApply() {
+            var _getQuery2;
+            var _ref4 = items.get(id),
+              currentItem = _ref4.item,
+              getQuery = _ref4.config.getQuery;
+            _onApply((_getQuery2 = getQuery === null || getQuery === void 0 ? void 0 : getQuery(currentItem)) !== null && _getQuery2 !== void 0 ? _getQuery2 : '');
           }
         };
       },
@@ -197,24 +206,29 @@ export function createAutocompletePropGetters(_ref) {
     };
   };
 }
-function buildItems(_ref4) {
-  var indices = _ref4.indices,
-    indicesConfig = _ref4.indicesConfig,
-    getElementId = _ref4.getElementId;
+function buildItems(_ref5) {
+  var indices = _ref5.indices,
+    indicesConfig = _ref5.indicesConfig,
+    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 = 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/es/components/autocomplete/createAutocompleteStorage.d.ts

@@ -9,8 +9,9 @@ type UseStorageParams<TItem extends Record<string, unknown>> = {
         storageKey?: string;
     };
     query?: string;
+    suggestionsIndexName?: string;
 } & Pick<Parameters<UsePropGetters<TItem>>[0], 'indices' | 'indicesConfig'>;
-export declare function createAutocompleteStorage({ useEffect, useMemo, useState, }: CreateAutocompleteStorageParams): <TItem extends Record<string, unknown>>({ showRecent, query, indices, indicesConfig, }: UseStorageParams<TItem>) => {
+export declare function createAutocompleteStorage({ useEffect, useMemo, useState, }: CreateAutocompleteStorageParams): <TItem extends Record<string, unknown>>({ showRecent, query, indices, indicesConfig, suggestionsIndexName, }: UseStorageParams<TItem>) => {
     storage: {
         onAdd: () => void;
         onRemove: () => void;

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

@@ -1,6 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+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; }
+import { find } from "../../lib/index.js";
 export function createAutocompleteStorage(_ref) {
   var useEffect = _ref.useEffect,
     useMemo = _ref.useMemo,
@@ -9,7 +13,8 @@ export 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 && _typeof(showRecent) === 'object' ? showRecent.storageKey : undefined;
     var storage = useMemo(function () {
       return createStorage({
@@ -53,7 +58,15 @@ export function createAutocompleteStorage(_ref) {
         })
       };
     });
-    var indicesForPropGetters = _toConsumableArray(indices);
+    var indicesForPropGetters = _toConsumableArray(indices.map(function (index) {
+      return index.indexName === suggestionsIndexName ? _objectSpread(_objectSpread({}, index), {}, {
+        hits: index.hits.filter(function (hit) {
+          return !find(storageHits, function (storageHit) {
+            return storageHit.query === hit.query;
+          });
+        })
+      }) : index;
+    }));
     var indicesConfigForPropGetters = _toConsumableArray(indicesConfig);
     indicesForPropGetters.unshift({
       indexName: 'recent-searches',

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

@@ -6,4 +6,5 @@ export declare function LoadingIcon({ createElement }: IconProps): JSX.Element;
 export declare function ClearIcon({ createElement }: IconProps): JSX.Element;
 export declare function ClockIcon({ createElement }: IconProps): JSX.Element;
 export declare function TrashIcon({ createElement }: IconProps): JSX.Element;
+export declare function ApplyIcon({ createElement }: IconProps): JSX.Element;
 export {};

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

@@ -57,4 +57,13 @@ export function TrashIcon(_ref5) {
   }, createElement("path", {
     d: "M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"
   }));
+}
+export function ApplyIcon(_ref6) {
+  var createElement = _ref6.createElement;
+  return createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, createElement("path", {
+    d: "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+  }));
 }

package/dist/es/components/chat/Chat.d.ts

@@ -2,6 +2,7 @@ import type { Renderer, ComponentProps } from '../../types';
 import type { ChatHeaderProps, ChatHeaderOwnProps } from './ChatHeader';
 import type { ChatMessagesProps } from './ChatMessages';
 import type { ChatPromptProps, ChatPromptOwnProps } from './ChatPrompt';
+import type { ChatPromptSuggestionsOwnProps } from './ChatPromptSuggestions';
 import type { ChatToggleButtonOwnProps, ChatToggleButtonProps } from './ChatToggleButton';
 export type ChatClassNames = {
     root?: string | string[];
@@ -11,6 +12,7 @@ export type ChatClassNames = {
     message?: ChatMessagesProps['messageClassNames'];
     prompt?: ChatPromptProps['classNames'];
     toggleButton?: ChatToggleButtonProps['classNames'];
+    suggestions?: ChatPromptSuggestionsOwnProps['classNames'];
 };
 export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
     open: boolean;
@@ -19,6 +21,7 @@ export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
     toggleButtonProps: ChatToggleButtonProps;
     messagesProps: ChatMessagesProps;
     promptProps: ChatPromptProps;
+    suggestionsProps: ChatPromptSuggestionsOwnProps;
     /**
      * Optional class names for elements
      */
@@ -39,5 +42,9 @@ export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
      * Optional toggle button component for the chat
      */
     toggleButtonComponent?: (props: ChatToggleButtonOwnProps) => JSX.Element;
+    /**
+     * Optional suggestions component for the chat
+     */
+    suggestionsComponent?: (props: ChatPromptSuggestionsOwnProps) => JSX.Element;
 };
 export declare function createChatComponent({ createElement, Fragment }: Renderer): (userProps: ChatProps) => JSX.Element;

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

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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) { _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; }
 import { cx } from "../../lib/index.js";
 import { createChatHeaderComponent } from "./ChatHeader.js";
 import { createChatMessagesComponent } from "./ChatMessages.js";
 import { createChatPromptComponent } from "./ChatPrompt.js";
+import { createChatPromptSuggestionsComponent } from "./ChatPromptSuggestions.js";
 import { createChatToggleButtonComponent } from "./ChatToggleButton.js";
 export function createChatComponent(_ref) {
   var createElement = _ref.createElement,
@@ -28,6 +29,10 @@ export function createChatComponent(_ref) {
     createElement: createElement,
     Fragment: Fragment
   });
+  var ChatPromptSuggestions = createChatPromptSuggestionsComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
   return function Chat(userProps) {
     var open = userProps.open,
       _userProps$maximized = userProps.maximized,
@@ -35,11 +40,13 @@ export 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,
@@ -53,7 +60,10 @@ export function createChatComponent(_ref) {
       maximized: maximized
     })), createElement(ChatMessages, _extends({}, 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/es/components/chat/ChatMessage.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, Renderer } from '../../types';
+import type { ComponentProps, Renderer, VNode } from '../../types';
 import type { ChatMessageBase, ClientSideTools } from './types';
 export type ChatMessageSide = 'left' | 'right';
 export type ChatMessageVariant = 'neutral' | 'subtle';
@@ -112,6 +112,10 @@ export type ChatMessageProps = ComponentProps<'article'> & {
      * Array of tools available for the assistant (for tool messages)
      */
     tools: ClientSideTools;
+    /**
+     * Optional suggestions element
+     */
+    suggestionsElement?: VNode;
     /**
      * Optional class names
      */

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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) { _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; }
 import { compiler } from 'markdown-to-jsx';
@@ -34,6 +34,7 @@ export function createChatMessageComponent(_ref) {
       setIndexUiState = userProps.setIndexUiState,
       onClose = userProps.onClose,
       userTranslations = userProps.translations,
+      suggestionsElement = userProps.suggestionsElement,
       props = _objectWithoutProperties(userProps, _excluded);
     var translations = _objectSpread({
       messageLabel: 'Message',
@@ -105,7 +106,7 @@ export function createChatMessageComponent(_ref) {
       className: cx(cssClasses.content)
     }, createElement("div", {
       className: cx(cssClasses.message)
-    }, message.parts.map(renderMessagePart)), hasActions && createElement("div", {
+    }, message.parts.map(renderMessagePart)), suggestionsElement, hasActions && createElement("div", {
       className: cx(cssClasses.actions),
       "aria-label": translations.actionsLabel
     }, ActionsComponent ? createElement(ActionsComponent, {

package/dist/es/components/chat/ChatMessages.d.ts

@@ -1,5 +1,5 @@
 /** @jsx createElement */
-import type { ComponentProps, MutableRef, Renderer } from '../../types';
+import type { ComponentProps, MutableRef, Renderer, VNode } from '../../types';
 import type { ChatMessageProps, ChatMessageClassNames, ChatMessageTranslations } from './ChatMessage';
 import type { ChatMessageErrorProps } from './ChatMessageError';
 import type { ChatMessageLoaderProps } from './ChatMessageLoader';
@@ -143,5 +143,9 @@ export type ChatMessagesProps<TMessage extends ChatMessageBase = ChatMessageBase
      * Callback to scroll to bottom
      */
     onScrollToBottom?: () => void;
+    /**
+     * Suggestions element to display below a message
+     */
+    suggestionsElement?: VNode;
 };
 export declare function createChatMessagesComponent({ createElement, Fragment, }: Renderer): <TMessage extends ChatMessageBase = ChatMessageBase>(userProps: ChatMessagesProps<TMessage>) => JSX.Element;

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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) { _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; }
 import { cx } from "../../lib/index.js";
@@ -41,7 +41,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(_toConsumableArray(hasTextContent(message) ? [{
       title: translations.copyToClipboardLabel,
       icon: function icon() {
@@ -75,7 +76,8 @@ function createDefaultMessageComponent(_ref) {
       actionsComponent: actionsComponent,
       "data-role": message.role,
       classNames: classNames,
-      translations: messageTranslations
+      translations: messageTranslations,
+      suggestionsElement: suggestionsElement
     }, messageProps));
   };
 }
@@ -126,6 +128,7 @@ export function createChatMessagesComponent(_ref3) {
       scrollRef = userProps.scrollRef,
       contentRef = userProps.contentRef,
       onScrollToBottom = userProps.onScrollToBottom,
+      suggestionsElement = userProps.suggestionsElement,
       props = _objectWithoutProperties(userProps, _excluded);
     var translations = _objectSpread({
       scrollToBottomLabel: 'Scroll to bottom',
@@ -157,7 +160,7 @@ export 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,
@@ -171,7 +174,8 @@ export 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/es/components/chat/ChatPromptSuggestions.d.ts

@@ -0,0 +1,14 @@
+import type { Renderer } from '../../types';
+export type ChatPromptSuggestionsClassNames = {
+    root?: string | string[];
+    suggestion?: string | string[];
+};
+export type ChatPromptSuggestionsOwnProps = {
+    suggestions?: string[];
+    onSuggestionClick: (suggestion: string) => void;
+    /**
+     * Optional class names for elements
+     */
+    classNames?: Partial<ChatPromptSuggestionsClassNames>;
+};
+export declare function createChatPromptSuggestionsComponent({ createElement, }: Renderer): (userProps: ChatPromptSuggestionsOwnProps) => JSX.Element | null;