instantsearch-ui-components 0.17.1 → 0.19.0

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompleteDetachedContainerComponent = createAutocompleteDetachedContainerComponent;
+var _cx = require("../../lib/cx");
+function createAutocompleteDetachedContainerComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteDetachedContainer(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+    return createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedContainer', classNames.detachedContainer),
+      onMouseDown: function onMouseDown(event) {
+        event.stopPropagation();
+      }
+    }, children);
+  };
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompleteDetachedFormContainerComponent = createAutocompleteDetachedFormContainerComponent;
+var _cx = require("../../lib/cx");
+var _Button = require("../Button");
+function createAutocompleteDetachedFormContainerComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = (0, _Button.createButtonComponent)({
+    createElement: createElement
+  });
+  return function AutocompleteDetachedFormContainer(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      onCancel = userProps.onCancel,
+      translations = userProps.translations;
+    return createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedFormContainer', classNames.detachedFormContainer)
+    }, children, createElement(Button, {
+      variant: "ghost",
+      className: (0, _cx.cx)('ais-AutocompleteDetachedCancelButton', classNames.detachedCancelButton),
+      onClick: onCancel
+    }, translations.detachedCancelButtonText));
+  };
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompleteDetachedOverlayComponent = createAutocompleteDetachedOverlayComponent;
+var _cx = require("../../lib/cx");
+function createAutocompleteDetachedOverlayComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteDetachedOverlay(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      onClose = userProps.onClose;
+    return createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedOverlay', classNames.detachedOverlay),
+      onMouseDown: onClose
+    }, children);
+  };
+}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompleteDetachedSearchButtonComponent = createAutocompleteDetachedSearchButtonComponent;
+var _cx = require("../../lib/cx");
+var _icons = require("./icons");
+function createAutocompleteDetachedSearchButtonComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteDetachedSearchButton(userProps) {
+    var query = userProps.query,
+      _userProps$placeholde = userProps.placeholder,
+      placeholder = _userProps$placeholde === void 0 ? 'Search' : _userProps$placeholde,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      onClick = userProps.onClick,
+      onClear = userProps.onClear,
+      translations = userProps.translations;
+    return createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedSearchButton', classNames.detachedSearchButton),
+      onClick: onClick,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onClick();
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      title: translations.detachedSearchButtonTitle
+    }, createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedSearchButtonIcon', classNames.detachedSearchButtonIcon)
+    }, createElement(_icons.SearchIcon, {
+      createElement: createElement
+    })), createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedSearchButtonPlaceholder', classNames.detachedSearchButtonPlaceholder),
+      hidden: Boolean(query)
+    }, placeholder), createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteDetachedSearchButtonQuery', classNames.detachedSearchButtonQuery)
+    }, query), query && onClear && createElement("button", {
+      type: "reset",
+      className: (0, _cx.cx)('ais-AutocompleteDetachedSearchButtonClear', classNames.detachedSearchButtonClear),
+      title: translations.detachedClearButtonTitle,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        onClear();
+      }
+    }, createElement(_icons.ClearIcon, {
+      createElement: createElement
+    })));
+  };
+}

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

@@ -20,7 +20,10 @@ function createAutocompletePropGetters(_ref) {
       onRefine = _ref2.onRefine,
       globalOnSelect = _ref2.onSelect,
       _onApply = _ref2.onApply,
-      placeholder = _ref2.placeholder;
+      onSubmit = _ref2.onSubmit,
+      placeholder = _ref2.placeholder,
+      _ref2$isDetached = _ref2.isDetached,
+      isDetached = _ref2$isDetached === void 0 ? false : _ref2$isDetached;
     var getElementId = createGetElementId(useId());
     var inputRef = useRef(null);
     var rootRef = useRef(null);
@@ -42,6 +45,11 @@ function createAutocompletePropGetters(_ref) {
       items = _useMemo.items,
       itemsIds = _useMemo.itemsIds;
     useEffect(function () {
+      // In detached mode, we don't close the panel on body click
+      // because the overlay handles closing
+      if (isDetached) {
+        return function () {};
+      }
       var onBodyClick = function onBodyClick(event) {
         var _unwrapRef;
         if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
@@ -53,16 +61,14 @@ function createAutocompletePropGetters(_ref) {
       return function () {
         document.body.removeEventListener('click', onBodyClick);
       };
-    }, [rootRef]);
+    }, [rootRef, isDetached]);
     var getNextActiveDescendant = function getNextActiveDescendant(key) {
       switch (key) {
-        case 'ArrowLeft':
         case 'ArrowUp':
           {
             var prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
             return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
           }
-        case 'ArrowRight':
         case 'ArrowDown':
           {
             var nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
@@ -104,6 +110,7 @@ function createAutocompletePropGetters(_ref) {
         });
         setActiveDescendant(undefined);
       }
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
     };
     return {
       getInputProps: function getInputProps() {
@@ -132,9 +139,7 @@ function createAutocompletePropGetters(_ref) {
                   }
                   break;
                 }
-              case 'ArrowLeft':
               case 'ArrowUp':
-              case 'ArrowRight':
               case 'ArrowDown':
                 {
                   var _document$getElementB;
@@ -153,7 +158,10 @@ function createAutocompletePropGetters(_ref) {
                   break;
                 }
               case 'Tab':
-                setIsOpen(false);
+                // In detached mode, Tab doesn't close the panel
+                if (!isDetached) {
+                  setIsOpen(false);
+                }
                 break;
               default:
                 setIsOpen(true);
@@ -209,6 +217,12 @@ function createAutocompletePropGetters(_ref) {
         return {
           ref: rootRef
         };
+      },
+      isOpen: isOpen,
+      setIsOpen: setIsOpen,
+      focusInput: function focusInput() {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
       }
     };
   };

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

@@ -7,6 +7,7 @@ exports.ApplyIcon = ApplyIcon;
 exports.ClearIcon = ClearIcon;
 exports.ClockIcon = ClockIcon;
 exports.LoadingIcon = LoadingIcon;
+exports.SearchIcon = SearchIcon;
 exports.SubmitIcon = SubmitIcon;
 exports.TrashIcon = TrashIcon;
 function SubmitIcon(_ref) {
@@ -77,4 +78,14 @@ function ApplyIcon(_ref6) {
   }, 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"
   }));
+}
+function SearchIcon(_ref7) {
+  var createElement = _ref7.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteDetachedSearchIcon",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, createElement("path", {
+    d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+  }));
 }

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

@@ -14,6 +14,50 @@ Object.keys(_Autocomplete).forEach(function (key) {
     }
   });
 });
+var _AutocompleteDetachedContainer = require("./AutocompleteDetachedContainer");
+Object.keys(_AutocompleteDetachedContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutocompleteDetachedContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutocompleteDetachedContainer[key];
+    }
+  });
+});
+var _AutocompleteDetachedFormContainer = require("./AutocompleteDetachedFormContainer");
+Object.keys(_AutocompleteDetachedFormContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutocompleteDetachedFormContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutocompleteDetachedFormContainer[key];
+    }
+  });
+});
+var _AutocompleteDetachedOverlay = require("./AutocompleteDetachedOverlay");
+Object.keys(_AutocompleteDetachedOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutocompleteDetachedOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutocompleteDetachedOverlay[key];
+    }
+  });
+});
+var _AutocompleteDetachedSearchButton = require("./AutocompleteDetachedSearchButton");
+Object.keys(_AutocompleteDetachedSearchButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutocompleteDetachedSearchButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutocompleteDetachedSearchButton[key];
+    }
+  });
+});
 var _AutocompleteIndex = require("./AutocompleteIndex");
 Object.keys(_AutocompleteIndex).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -15,6 +15,8 @@ var _icons = require("./icons");
 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; }
+// Keep in sync with packages/instantsearch.js/src/lib/chat/index.ts
+var SearchIndexToolType = 'algolia_search_index';
 function createChatMessageComponent(_ref) {
   var createElement = _ref.createElement;
   var Button = (0, _Button.createButtonComponent)({
@@ -74,12 +76,17 @@ function createChatMessageComponent(_ref) {
       if ((0, _lib.startsWith)(part.type, 'tool-')) {
         var toolName = part.type.replace('tool-', '');
         var tool = tools[toolName];
+
+        // Compatibility shim with Algolia MCP Server search tool
+        if (!tool && (0, _lib.startsWith)(toolName, "".concat(SearchIndexToolType, "_"))) {
+          tool = tools[SearchIndexToolType];
+        }
         if (tool) {
           var ToolLayoutComponent = tool.layoutComponent;
           var toolMessage = part;
           var boundAddToolResult = function boundAddToolResult(params) {
-            var _tool$addToolResult;
-            return (_tool$addToolResult = tool.addToolResult) === null || _tool$addToolResult === void 0 ? void 0 : _tool$addToolResult.call(tool, {
+            var _tool$addToolResult, _tool;
+            return (_tool$addToolResult = (_tool = tool).addToolResult) === null || _tool$addToolResult === void 0 ? void 0 : _tool$addToolResult.call(_tool, {
               output: params.output,
               tool: part.type,
               toolCallId: toolMessage.toolCallId
@@ -96,6 +103,7 @@ function createChatMessageComponent(_ref) {
             indexUiState: indexUiState,
             setIndexUiState: setIndexUiState,
             addToolResult: boundAddToolResult,
+            applyFilters: tool.applyFilters,
             onClose: onClose
           }));
         }

package/dist/cjs/version.js

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

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

@@ -9,5 +9,41 @@ export type AutocompleteClassNames = {
      * Class names to apply to the root element
      */
     root: string | string[];
+    /**
+     * Class names to apply to the detached overlay backdrop
+     */
+    detachedOverlay: string | string[];
+    /**
+     * Class names to apply to the detached container
+     */
+    detachedContainer: string | string[];
+    /**
+     * Class names to apply to the detached form container
+     */
+    detachedFormContainer: string | string[];
+    /**
+     * Class names to apply to the detached search button
+     */
+    detachedSearchButton: string | string[];
+    /**
+     * Class names to apply to the detached search button icon
+     */
+    detachedSearchButtonIcon: string | string[];
+    /**
+     * Class names to apply to the detached search button placeholder
+     */
+    detachedSearchButtonPlaceholder: string | string[];
+    /**
+     * Class names to apply to the detached search button query
+     */
+    detachedSearchButtonQuery: string | string[];
+    /**
+     * Class names to apply to the detached search button clear button
+     */
+    detachedSearchButtonClear: string | string[];
+    /**
+     * Class names to apply to the detached cancel button
+     */
+    detachedCancelButton: string | string[];
 };
 export declare function createAutocompleteComponent({ createElement }: Renderer): (userProps: AutocompleteProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+/** @jsx createElement */
+import type { ComponentChildren, Renderer } from '../../types';
+import type { AutocompleteClassNames } from './Autocomplete';
+export type AutocompleteDetachedContainerProps = {
+    children?: ComponentChildren;
+    classNames?: Partial<AutocompleteClassNames>;
+};
+export declare function createAutocompleteDetachedContainerComponent({ createElement, }: Renderer): (userProps: AutocompleteDetachedContainerProps) => JSX.Element;

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

@@ -0,0 +1,15 @@
+import { cx } from "../../lib/cx.js";
+export function createAutocompleteDetachedContainerComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteDetachedContainer(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+    return createElement("div", {
+      className: cx('ais-AutocompleteDetachedContainer', classNames.detachedContainer),
+      onMouseDown: function onMouseDown(event) {
+        event.stopPropagation();
+      }
+    }, children);
+  };
+}

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

@@ -0,0 +1,11 @@
+/** @jsx createElement */
+import type { ComponentChildren, Renderer } from '../../types';
+import type { AutocompleteClassNames } from './Autocomplete';
+import type { AutocompleteDetachedTranslations } from './AutocompleteDetachedSearchButton';
+export type AutocompleteDetachedFormContainerProps = {
+    children?: ComponentChildren;
+    classNames?: Partial<AutocompleteClassNames>;
+    onCancel: () => void;
+    translations: AutocompleteDetachedTranslations;
+};
+export declare function createAutocompleteDetachedFormContainerComponent({ createElement, }: Renderer): (userProps: AutocompleteDetachedFormContainerProps) => JSX.Element;

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

@@ -0,0 +1,22 @@
+import { cx } from "../../lib/cx.js";
+import { createButtonComponent } from "../Button.js";
+export function createAutocompleteDetachedFormContainerComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = createButtonComponent({
+    createElement: createElement
+  });
+  return function AutocompleteDetachedFormContainer(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      onCancel = userProps.onCancel,
+      translations = userProps.translations;
+    return createElement("div", {
+      className: cx('ais-AutocompleteDetachedFormContainer', classNames.detachedFormContainer)
+    }, children, createElement(Button, {
+      variant: "ghost",
+      className: cx('ais-AutocompleteDetachedCancelButton', classNames.detachedCancelButton),
+      onClick: onCancel
+    }, translations.detachedCancelButtonText));
+  };
+}

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

@@ -0,0 +1,9 @@
+/** @jsx createElement */
+import type { ComponentChildren, Renderer } from '../../types';
+import type { AutocompleteClassNames } from './Autocomplete';
+export type AutocompleteDetachedOverlayProps = {
+    children?: ComponentChildren;
+    classNames?: Partial<AutocompleteClassNames>;
+    onClose: () => void;
+};
+export declare function createAutocompleteDetachedOverlayComponent({ createElement, }: Renderer): (userProps: AutocompleteDetachedOverlayProps) => JSX.Element;

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

@@ -0,0 +1,14 @@
+import { cx } from "../../lib/cx.js";
+export function createAutocompleteDetachedOverlayComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteDetachedOverlay(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      onClose = userProps.onClose;
+    return createElement("div", {
+      className: cx('ais-AutocompleteDetachedOverlay', classNames.detachedOverlay),
+      onMouseDown: onClose
+    }, children);
+  };
+}

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

@@ -0,0 +1,17 @@
+/** @jsx createElement */
+import type { Renderer } from '../../types';
+import type { AutocompleteClassNames } from './Autocomplete';
+export type AutocompleteDetachedTranslations = {
+    detachedCancelButtonText: string;
+    detachedSearchButtonTitle: string;
+    detachedClearButtonTitle: string;
+};
+export type AutocompleteDetachedSearchButtonProps = {
+    query: string;
+    placeholder?: string;
+    classNames?: Partial<AutocompleteClassNames>;
+    onClick: () => void;
+    onClear?: () => void;
+    translations: AutocompleteDetachedTranslations;
+};
+export declare function createAutocompleteDetachedSearchButtonComponent({ createElement, }: Renderer): (userProps: AutocompleteDetachedSearchButtonProps) => JSX.Element;

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

@@ -0,0 +1,47 @@
+import { cx } from "../../lib/cx.js";
+import { ClearIcon, SearchIcon } from "./icons.js";
+export function createAutocompleteDetachedSearchButtonComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteDetachedSearchButton(userProps) {
+    var query = userProps.query,
+      _userProps$placeholde = userProps.placeholder,
+      placeholder = _userProps$placeholde === void 0 ? 'Search' : _userProps$placeholde,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      onClick = userProps.onClick,
+      onClear = userProps.onClear,
+      translations = userProps.translations;
+    return createElement("div", {
+      className: cx('ais-AutocompleteDetachedSearchButton', classNames.detachedSearchButton),
+      onClick: onClick,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onClick();
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      title: translations.detachedSearchButtonTitle
+    }, createElement("div", {
+      className: cx('ais-AutocompleteDetachedSearchButtonIcon', classNames.detachedSearchButtonIcon)
+    }, createElement(SearchIcon, {
+      createElement: createElement
+    })), createElement("div", {
+      className: cx('ais-AutocompleteDetachedSearchButtonPlaceholder', classNames.detachedSearchButtonPlaceholder),
+      hidden: Boolean(query)
+    }, placeholder), createElement("div", {
+      className: cx('ais-AutocompleteDetachedSearchButtonQuery', classNames.detachedSearchButtonQuery)
+    }, query), query && onClear && createElement("button", {
+      type: "reset",
+      className: cx('ais-AutocompleteDetachedSearchButtonClear', classNames.detachedSearchButtonClear),
+      title: translations.detachedClearButtonTitle,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        onClear();
+      }
+    }, createElement(ClearIcon, {
+      createElement: createElement
+    })));
+  };
+}

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

@@ -53,12 +53,36 @@ export type UsePropGetters<TItem extends BaseHit> = (params: {
     onRefine: (query: string) => void;
     onSelect: NonNullable<AutocompleteIndexConfig<TItem>['onSelect']>;
     onApply: (query: string) => void;
+    /**
+     * Called when the form is submitted (Enter pressed).
+     * Useful for detached mode to close the modal.
+     */
+    onSubmit?: () => void;
     placeholder?: string;
+    /**
+     * Whether the autocomplete is in detached mode (mobile).
+     * In detached mode:
+     * - Panel stays open (doesn't close on body click)
+     * - Tab key doesn't close panel
+     */
+    isDetached?: boolean;
 }) => {
     getInputProps: GetInputProps;
     getItemProps: GetItemProps;
     getPanelProps: GetPanelProps;
     getRootProps: GetRootProps;
+    /**
+     * Whether the panel is open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to set the panel open state. Useful for detached mode.
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Function to focus the input. Useful for detached mode to show the keyboard.
+     */
+    focusInput: () => void;
 };
-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 declare function createAutocompletePropGetters({ useEffect, useId, useMemo, useRef, useState, }: CreateAutocompletePropGettersParams): <TItem extends BaseHit>({ indices, indicesConfig, onRefine, onSelect: globalOnSelect, onApply, onSubmit, placeholder, isDetached, }: Parameters<UsePropGetters<TItem>>[0]) => ReturnType<UsePropGetters<TItem>>;
 export {};

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

@@ -13,7 +13,10 @@ export function createAutocompletePropGetters(_ref) {
       onRefine = _ref2.onRefine,
       globalOnSelect = _ref2.onSelect,
       _onApply = _ref2.onApply,
-      placeholder = _ref2.placeholder;
+      onSubmit = _ref2.onSubmit,
+      placeholder = _ref2.placeholder,
+      _ref2$isDetached = _ref2.isDetached,
+      isDetached = _ref2$isDetached === void 0 ? false : _ref2$isDetached;
     var getElementId = createGetElementId(useId());
     var inputRef = useRef(null);
     var rootRef = useRef(null);
@@ -35,6 +38,11 @@ export function createAutocompletePropGetters(_ref) {
       items = _useMemo.items,
       itemsIds = _useMemo.itemsIds;
     useEffect(function () {
+      // In detached mode, we don't close the panel on body click
+      // because the overlay handles closing
+      if (isDetached) {
+        return function () {};
+      }
       var onBodyClick = function onBodyClick(event) {
         var _unwrapRef;
         if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
@@ -46,16 +54,14 @@ export function createAutocompletePropGetters(_ref) {
       return function () {
         document.body.removeEventListener('click', onBodyClick);
       };
-    }, [rootRef]);
+    }, [rootRef, isDetached]);
     var getNextActiveDescendant = function getNextActiveDescendant(key) {
       switch (key) {
-        case 'ArrowLeft':
         case 'ArrowUp':
           {
             var prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
             return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
           }
-        case 'ArrowRight':
         case 'ArrowDown':
           {
             var nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
@@ -97,6 +103,7 @@ export function createAutocompletePropGetters(_ref) {
         });
         setActiveDescendant(undefined);
       }
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
     };
     return {
       getInputProps: function getInputProps() {
@@ -125,9 +132,7 @@ export function createAutocompletePropGetters(_ref) {
                   }
                   break;
                 }
-              case 'ArrowLeft':
               case 'ArrowUp':
-              case 'ArrowRight':
               case 'ArrowDown':
                 {
                   var _document$getElementB;
@@ -146,7 +151,10 @@ export function createAutocompletePropGetters(_ref) {
                   break;
                 }
               case 'Tab':
-                setIsOpen(false);
+                // In detached mode, Tab doesn't close the panel
+                if (!isDetached) {
+                  setIsOpen(false);
+                }
                 break;
               default:
                 setIsOpen(true);
@@ -202,6 +210,12 @@ export function createAutocompletePropGetters(_ref) {
         return {
           ref: rootRef
         };
+      },
+      isOpen: isOpen,
+      setIsOpen: setIsOpen,
+      focusInput: function focusInput() {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
       }
     };
   };

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

@@ -7,4 +7,5 @@ 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 declare function SearchIcon({ createElement }: IconProps): JSX.Element;
 export {};

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

@@ -66,4 +66,14 @@ export function ApplyIcon(_ref6) {
   }, 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"
   }));
+}
+export function SearchIcon(_ref7) {
+  var createElement = _ref7.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteDetachedSearchIcon",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, createElement("path", {
+    d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+  }));
 }

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

@@ -1,4 +1,8 @@
 export * from './Autocomplete';
+export * from './AutocompleteDetachedContainer';
+export * from './AutocompleteDetachedFormContainer';
+export * from './AutocompleteDetachedOverlay';
+export * from './AutocompleteDetachedSearchButton';
 export * from './AutocompleteIndex';
 export * from './AutocompletePanel';
 export * from './AutocompleteRecentSearch';

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

@@ -1,4 +1,8 @@
 export * from "./Autocomplete.js";
+export * from "./AutocompleteDetachedContainer.js";
+export * from "./AutocompleteDetachedFormContainer.js";
+export * from "./AutocompleteDetachedOverlay.js";
+export * from "./AutocompleteDetachedSearchButton.js";
 export * from "./AutocompleteIndex.js";
 export * from "./AutocompletePanel.js";
 export * from "./AutocompleteRecentSearch.js";

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

@@ -8,6 +8,8 @@ import { compiler } from 'markdown-to-jsx';
 import { cx, startsWith } from "../../lib/index.js";
 import { createButtonComponent } from "../Button.js";
 import { MenuIcon } from "./icons.js";
+// Keep in sync with packages/instantsearch.js/src/lib/chat/index.ts
+var SearchIndexToolType = 'algolia_search_index';
 export function createChatMessageComponent(_ref) {
   var createElement = _ref.createElement;
   var Button = createButtonComponent({
@@ -67,12 +69,17 @@ export function createChatMessageComponent(_ref) {
       if (startsWith(part.type, 'tool-')) {
         var toolName = part.type.replace('tool-', '');
         var tool = tools[toolName];
+
+        // Compatibility shim with Algolia MCP Server search tool
+        if (!tool && startsWith(toolName, "".concat(SearchIndexToolType, "_"))) {
+          tool = tools[SearchIndexToolType];
+        }
         if (tool) {
           var ToolLayoutComponent = tool.layoutComponent;
           var toolMessage = part;
           var boundAddToolResult = function boundAddToolResult(params) {
-            var _tool$addToolResult;
-            return (_tool$addToolResult = tool.addToolResult) === null || _tool$addToolResult === void 0 ? void 0 : _tool$addToolResult.call(tool, {
+            var _tool$addToolResult, _tool;
+            return (_tool$addToolResult = (_tool = tool).addToolResult) === null || _tool$addToolResult === void 0 ? void 0 : _tool$addToolResult.call(_tool, {
               output: params.output,
               tool: part.type,
               toolCallId: toolMessage.toolCallId
@@ -89,6 +96,7 @@ export function createChatMessageComponent(_ref) {
             indexUiState: indexUiState,
             setIndexUiState: setIndexUiState,
             addToolResult: boundAddToolResult,
+            applyFilters: tool.applyFilters,
             onClose: onClose
           }));
         }

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

@@ -1,3 +1,4 @@
+import type { SearchParameters } from 'algoliasearch-helper';
 export type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
 export type ChatRole = 'data' | 'user' | 'assistant' | 'system';
 /**
@@ -349,12 +350,22 @@ export interface AbstractChat<TUIMessage extends UIMessage> {
 }
 export type AddToolResult = AbstractChat<UIMessage>['addToolResult'];
 export type AddToolResultWithOutput = (params: Pick<Parameters<AddToolResult>[0], 'output'>) => ReturnType<AddToolResult>;
+export type SearchToolInput = {
+    query: string;
+    number_of_results?: number;
+    facet_filters?: string[][];
+};
+export type ApplyFiltersParams = {
+    query?: string;
+    facetFilters?: string[][];
+};
 export type ClientSideToolComponentProps = {
     message: ChatToolMessage;
     indexUiState: object;
     setIndexUiState: (state: object) => void;
     onClose: () => void;
     addToolResult: AddToolResultWithOutput;
+    applyFilters: (params: ApplyFiltersParams) => SearchParameters;
 };
 export type ClientSideToolComponent = (props: ClientSideToolComponentProps) => JSX.Element;
 export type ClientSideTool = {
@@ -363,8 +374,9 @@ export type ClientSideTool = {
     onToolCall?: (params: Parameters<NonNullable<ChatInit<UIMessage>['onToolCall']>>[0]['toolCall'] & {
         addToolResult: AddToolResultWithOutput;
     }) => void;
+    applyFilters: (params: ApplyFiltersParams) => SearchParameters;
 };
 export type ClientSideTools = Record<string, ClientSideTool>;
-export type UserClientSideTool = Omit<ClientSideTool, 'addToolResult'>;
+export type UserClientSideTool = Omit<ClientSideTool, 'addToolResult' | 'applyFilters'>;
 export type UserClientSideTools = Record<string, UserClientSideTool>;
 export {};

package/dist/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.17.1";
+declare const _default: "0.19.0";
 export default _default;

package/dist/es/version.js

@@ -1 +1 @@
-export default '0.17.1';
+export default '0.19.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch-ui-components",
-  "version": "0.17.1",
+  "version": "0.19.0",
   "description": "Common UI components for InstantSearch.",
   "types": "dist/es/index.d.ts",
   "main": "dist/cjs/index.js",
@@ -52,5 +52,5 @@
     "zod": "^3.25.76 || ^4",
     "zod-to-json-schema": "3.24.6"
   },
-  "gitHead": "d40d81bc9232c88f0dba1fdaada8471237f31847"
+  "gitHead": "b1d19a647b42add5bbf0a5b70bd2705d3b6ca92e"
 }