react-instantsearch 7.28.1 → 7.29.0

package/dist/umd/ReactInstantSearch.js

@@ -1,4 +1,4 @@
-/*! React InstantSearch 7.28.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! React InstantSearch 7.29.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
@@ -24,7 +24,7 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-    var version$2 = '7.28.1';
+    var version$2 = '7.29.0';
 
     function _define_property(obj, key, value) {
         if (key in obj) {
@@ -9684,7 +9684,7 @@
         };
     }
 
-    var version = '4.92.1';
+    var version = '4.93.0';
 
     function hydrateSearchClient(client, results) {
         if (!results) {
@@ -12578,6 +12578,30 @@
         return DefaultChatTransport;
     }(HttpChatTransport);
 
+    function sendChatMessageFeedback(param) {
+        var agentId = param.agentId, vote = param.vote, messageId = param.messageId, appId = param.appId, apiKey = param.apiKey;
+        return fetch("https://".concat(appId, ".algolia.net/agent-studio/1/feedback"), {
+            method: 'POST',
+            body: JSON.stringify({
+                messageId: messageId,
+                agentId: agentId,
+                vote: vote
+            }),
+            headers: {
+                'x-algolia-application-id': appId,
+                'x-algolia-api-key': apiKey,
+                'content-type': 'application/json'
+            }
+        }).then(function(response) {
+            if (response.status >= 300) {
+                return response.json().then(function(data) {
+                    throw new Error("Feedback request failed with status ".concat(response.status, ": ").concat(data.message));
+                });
+            }
+            return response.json();
+        });
+    }
+
     /**
      * Clears the refinements of a SearchParameters object based on rules provided.
      * The included attributes list is applied before the excluded attributes list. If the list
@@ -12797,7 +12821,11 @@
             var setOpen;
             var focusInput;
             var setIsClearing;
+            var setFeedbackState;
             var agentId = 'agentId' in options ? options.agentId : undefined;
+            var feedbackState = {};
+            var _sendChatMessageFeedback;
+            var feedbackAbortController;
             // Extract suggestions from the last assistant message's data-suggestions part
             var getSuggestionsFromMessages = function getSuggestionsFromMessages(messages) {
                 // Find the last assistant message (iterate from end)
@@ -12829,6 +12857,7 @@
             var onClearTransitionEnd = function onClearTransitionEnd() {
                 setMessages([]);
                 _chatInstance.clearError();
+                feedbackState = {};
                 setIsClearing(false);
             };
             var makeChatInstance = function makeChatInstance(instantSearchInstance) {
@@ -12963,6 +12992,33 @@
                         isClearing = value;
                         render();
                     };
+                    setFeedbackState = function setFeedbackState(messageId, state) {
+                        feedbackState = _object_spread_props(_object_spread({}, feedbackState), _define_property({}, messageId, state));
+                        render();
+                    };
+                    var feedback = 'feedback' in options ? options.feedback : undefined;
+                    if (agentId && feedback) {
+                        var _getAppIdAndApiKey = _sliced_to_array(getAppIdAndApiKey(initOptions.instantSearchInstance.client), 2), appId = _getAppIdAndApiKey[0], apiKey = _getAppIdAndApiKey[1];
+                        if (!appId || !apiKey) {
+                            throw new Error(withUsage$m('Could not extract Algolia credentials from the search client.'));
+                        }
+                        feedbackAbortController = new AbortController();
+                        _sendChatMessageFeedback = function _sendChatMessageFeedback(messageId, vote) {
+                            if (feedbackState[messageId] !== undefined) {
+                                return;
+                            }
+                            setFeedbackState(messageId, 'sending');
+                            sendChatMessageFeedback({
+                                agentId: agentId,
+                                vote: vote,
+                                messageId: messageId,
+                                appId: appId,
+                                apiKey: apiKey
+                            }).finally(function() {
+                                setFeedbackState(messageId, vote);
+                            });
+                        };
+                    }
                     _chatInstance['~registerErrorCallback'](render);
                     _chatInstance['~registerMessagesCallback'](render);
                     _chatInstance['~registerStatusCallback'](render);
@@ -13023,6 +13079,8 @@
                         clearMessages: clearMessages,
                         onClearTransitionEnd: onClearTransitionEnd,
                         tools: toolsWithAddToolResult,
+                        sendChatMessageFeedback: _sendChatMessageFeedback,
+                        feedbackState: feedbackState,
                         widgetParams: widgetParams,
                         // Chat instance render state
                         addToolResult: _chatInstance.addToolResult,
@@ -13038,6 +13096,7 @@
                     };
                 },
                 dispose: function dispose() {
+                    feedbackAbortController === null || feedbackAbortController === void 0 ? void 0 : feedbackAbortController.abort();
                     unmountFn();
                 },
                 shouldRender: function shouldRender() {
@@ -17330,6 +17389,20 @@
         };
     }
 
+    // WebKit can keep this SVG spinner animating while the loading slot is hidden (`hidden` / not stalled),
+    // which wastes work. We pause SMIL when idle and unpause when `isSearchStalled`.
+    // Same approach as autocomplete-js.
+    // https://github.com/algolia/autocomplete/issues/1322
+    function syncLoadingSvgAnimation(element, isSearchStalled) {
+        if (!element || typeof element.pauseAnimations !== 'function' || typeof element.unpauseAnimations !== 'function') {
+            return;
+        }
+        if (isSearchStalled) {
+            element.unpauseAnimations();
+        } else {
+            element.pauseAnimations();
+        }
+    }
     function SubmitIcon(param) {
         var createElement = param.createElement;
         return /*#__PURE__*/ createElement("svg", {
@@ -17341,10 +17414,13 @@
         }));
     }
     function LoadingIcon(param) {
-        var createElement = param.createElement;
+        var createElement = param.createElement, isSearchStalled = param.isSearchStalled;
         return /*#__PURE__*/ createElement("svg", {
             className: "ais-AutocompleteLoadingIcon",
-            viewBox: "0 0 100 100"
+            viewBox: "0 0 100 100",
+            ref: function ref(element) {
+                return syncLoadingSvgAnimation(element, isSearchStalled);
+            }
         }, /*#__PURE__*/ createElement("circle", {
             cx: "50",
             cy: "50",
@@ -17732,6 +17808,51 @@
             stroke: "currentColor"
         }));
     }
+    function CheckIcon(param) {
+        var createElement = param.createElement;
+        return /*#__PURE__*/ createElement("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        }, /*#__PURE__*/ createElement("path", {
+            d: "M21.801 10A10 10 0 1 1 17 3.335"
+        }), /*#__PURE__*/ createElement("path", {
+            d: "m9 11 3 3L22 4"
+        }));
+    }
+    function ThumbsUpIcon(param) {
+        var createElement = param.createElement;
+        return /*#__PURE__*/ createElement("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        }, /*#__PURE__*/ createElement("path", {
+            d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"
+        }), /*#__PURE__*/ createElement("path", {
+            d: "M7 10v12"
+        }));
+    }
+    function ThumbsDownIcon(param) {
+        var createElement = param.createElement;
+        return /*#__PURE__*/ createElement("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        }, /*#__PURE__*/ createElement("path", {
+            d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"
+        }), /*#__PURE__*/ createElement("path", {
+            d: "M17 14V2"
+        }));
+    }
     function ChevronLeftIcon(param) {
         var createElement = param.createElement;
         return /*#__PURE__*/ createElement("svg", {
@@ -17845,14 +17966,16 @@
             }, /*#__PURE__*/ createElement("button", {
                 className: "ais-AutocompleteSubmitButton",
                 type: "submit",
-                title: "Submit"
+                title: "Submit",
+                hidden: isSearchStalled
             }, /*#__PURE__*/ createElement(SubmitIcon, {
                 createElement: createElement
             }))), /*#__PURE__*/ createElement("div", {
                 className: "ais-AutocompleteLoadingIndicator",
                 hidden: !isSearchStalled
             }, /*#__PURE__*/ createElement(LoadingIcon, {
-                createElement: createElement
+                createElement: createElement,
+                isSearchStalled: isSearchStalled
             }))), /*#__PURE__*/ createElement("div", {
                 className: "ais-AutocompleteInputWrapper"
             }, /*#__PURE__*/ createElement("input", _object_spread({
@@ -18814,7 +18937,7 @@
             Fragment: Fragment
         });
         return function DefaultMessage(param) {
-            var message = param.message, status = param.status, userMessageProps = param.userMessageProps, assistantMessageProps = param.assistantMessageProps, tools = param.tools, indexUiState = param.indexUiState, setIndexUiState = param.setIndexUiState, onReload = param.onReload, onClose = param.onClose, actionsComponent = param.actionsComponent, classNames = param.classNames, messageTranslations = param.messageTranslations, translations = param.translations, suggestionsElement = param.suggestionsElement;
+            var message = param.message, status = param.status, userMessageProps = param.userMessageProps, assistantMessageProps = param.assistantMessageProps, tools = param.tools, indexUiState = param.indexUiState, setIndexUiState = param.setIndexUiState, onReload = param.onReload, onClose = param.onClose, onFeedback = param.onFeedback, feedbackState = param.feedbackState, actionsComponent = param.actionsComponent, classNames = param.classNames, messageTranslations = param.messageTranslations, translations = param.translations, suggestionsElement = param.suggestionsElement;
             var defaultAssistantActions = _to_consumable_array(hasTextContent(message) ? [
                 {
                     title: translations.copyToClipboardLabel,
@@ -18838,6 +18961,60 @@
                     }
                 }
             ]);
+            var messageFeedback = feedbackState === null || feedbackState === void 0 ? void 0 : feedbackState[message.id];
+            var hasVoted = messageFeedback !== undefined;
+            if (onFeedback) {
+                var isSending = messageFeedback === 'sending';
+                if (isSending) {
+                    defaultAssistantActions.push({
+                        title: translations.sendingFeedbackLabel,
+                        icon: function icon() {
+                            return /*#__PURE__*/ createElement("span", {
+                                className: "ais-ChatMessage-feedbackSpinner"
+                            }, /*#__PURE__*/ createElement(LoadingSpinnerIcon, {
+                                createElement: createElement
+                            }));
+                        },
+                        disabled: true
+                    });
+                } else if (hasVoted) {
+                    defaultAssistantActions.push({
+                        title: translations.feedbackThankYouText,
+                        icon: function icon() {
+                            return /*#__PURE__*/ createElement("span", {
+                                className: "ais-ChatMessage-feedbackCheck"
+                            }, /*#__PURE__*/ createElement(CheckIcon, {
+                                createElement: createElement
+                            }), /*#__PURE__*/ createElement("span", {
+                                className: "ais-ChatMessage-feedbackText"
+                            }, translations.feedbackThankYouText));
+                        },
+                        disabled: true
+                    });
+                } else {
+                    defaultAssistantActions.push({
+                        title: translations.thumbsUpLabel,
+                        icon: function icon() {
+                            return /*#__PURE__*/ createElement(ThumbsUpIcon, {
+                                createElement: createElement
+                            });
+                        },
+                        onClick: function onClick(m) {
+                            return onFeedback(m.id, 1);
+                        }
+                    }, {
+                        title: translations.thumbsDownLabel,
+                        icon: function icon() {
+                            return /*#__PURE__*/ createElement(ThumbsDownIcon, {
+                                createElement: createElement
+                            });
+                        },
+                        onClick: function onClick(m) {
+                            return onFeedback(m.id, 0);
+                        }
+                    });
+                }
+            }
             var messageProps = message.role === 'user' ? userMessageProps : assistantMessageProps;
             var defaultActions = message.role === 'user' ? undefined : defaultAssistantActions;
             return /*#__PURE__*/ createElement(ChatMessage, _object_spread({
@@ -18875,7 +19052,7 @@
         });
         return function ChatMessages(userProps) {
             var _lastMessage_parts;
-            var _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, _userProps_messageClassNames = userProps.messageClassNames, messageClassNames = _userProps_messageClassNames === void 0 ? {} : _userProps_messageClassNames, messageTranslations = userProps.messageTranslations, _userProps_messages = userProps.messages, messages = _userProps_messages === void 0 ? [] : _userProps_messages, MessageComponent = userProps.messageComponent, LoaderComponent = userProps.loaderComponent, ErrorComponent = userProps.errorComponent, ActionsComponent = userProps.actionsComponent, tools = userProps.tools, indexUiState = userProps.indexUiState, setIndexUiState = userProps.setIndexUiState, _userProps_status = userProps.status, status = _userProps_status === void 0 ? 'ready' : _userProps_status, _userProps_hideScrollToBottom = userProps.hideScrollToBottom, hideScrollToBottom = _userProps_hideScrollToBottom === void 0 ? false : _userProps_hideScrollToBottom, onReload = userProps.onReload, onClose = userProps.onClose, userTranslations = userProps.translations, userMessageProps = userProps.userMessageProps, assistantMessageProps = userProps.assistantMessageProps, _userProps_isClearing = userProps.isClearing, isClearing = _userProps_isClearing === void 0 ? false : _userProps_isClearing, onClearTransitionEnd = userProps.onClearTransitionEnd, isScrollAtBottom = userProps.isScrollAtBottom, scrollRef = userProps.scrollRef, contentRef = userProps.contentRef, onScrollToBottom = userProps.onScrollToBottom, suggestionsElement = userProps.suggestionsElement, props = _object_without_properties(userProps, [
+            var _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, _userProps_messageClassNames = userProps.messageClassNames, messageClassNames = _userProps_messageClassNames === void 0 ? {} : _userProps_messageClassNames, messageTranslations = userProps.messageTranslations, _userProps_messages = userProps.messages, messages = _userProps_messages === void 0 ? [] : _userProps_messages, MessageComponent = userProps.messageComponent, LoaderComponent = userProps.loaderComponent, ErrorComponent = userProps.errorComponent, ActionsComponent = userProps.actionsComponent, tools = userProps.tools, indexUiState = userProps.indexUiState, setIndexUiState = userProps.setIndexUiState, _userProps_status = userProps.status, status = _userProps_status === void 0 ? 'ready' : _userProps_status, _userProps_hideScrollToBottom = userProps.hideScrollToBottom, hideScrollToBottom = _userProps_hideScrollToBottom === void 0 ? false : _userProps_hideScrollToBottom, onReload = userProps.onReload, onClose = userProps.onClose, userTranslations = userProps.translations, userMessageProps = userProps.userMessageProps, assistantMessageProps = userProps.assistantMessageProps, _userProps_isClearing = userProps.isClearing, isClearing = _userProps_isClearing === void 0 ? false : _userProps_isClearing, onClearTransitionEnd = userProps.onClearTransitionEnd, isScrollAtBottom = userProps.isScrollAtBottom, scrollRef = userProps.scrollRef, contentRef = userProps.contentRef, onScrollToBottom = userProps.onScrollToBottom, suggestionsElement = userProps.suggestionsElement, onFeedback = userProps.onFeedback, feedbackState = userProps.feedbackState, props = _object_without_properties(userProps, [
                 "classNames",
                 "messageClassNames",
                 "messageTranslations",
@@ -18900,12 +19077,18 @@
                 "scrollRef",
                 "contentRef",
                 "onScrollToBottom",
-                "suggestionsElement"
+                "suggestionsElement",
+                "onFeedback",
+                "feedbackState"
             ]);
             var translations = _object_spread({
                 scrollToBottomLabel: 'Scroll to bottom',
                 copyToClipboardLabel: 'Copy to clipboard',
-                regenerateLabel: 'Regenerate'
+                regenerateLabel: 'Regenerate',
+                thumbsUpLabel: 'Like',
+                thumbsDownLabel: 'Dislike',
+                feedbackThankYouText: 'Thanks for your feedback!',
+                sendingFeedbackLabel: 'Sending feedback...'
             }, userTranslations);
             var cssClasses = {
                 root: cx('ais-ChatMessages', classNames.root),
@@ -18949,6 +19132,8 @@
                     indexUiState: indexUiState,
                     setIndexUiState: setIndexUiState,
                     onReload: onReload,
+                    onFeedback: onFeedback,
+                    feedbackState: feedbackState,
                     actionsComponent: ActionsComponent,
                     onClose: onClose,
                     translations: translations,
@@ -18976,6 +19161,52 @@
         };
     }
 
+    function createChatOverlayLayoutComponent(param) {
+        var createElement = param.createElement;
+        return function ChatOverlayLayout(userProps) {
+            var open = userProps.open, maximized = userProps.maximized, headerComponent = userProps.headerComponent, messagesComponent = userProps.messagesComponent, promptComponent = userProps.promptComponent, toggleButtonComponent = userProps.toggleButtonComponent, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, className = userProps.className; // Chat state props (destructured to avoid spreading on div)
+            userProps.messages;
+            userProps.status;
+            userProps.isClearing;
+            userProps.clearMessages;
+            userProps.onClearTransitionEnd;
+            userProps.suggestions;
+            userProps.tools;
+            userProps.sendMessage;
+            userProps.regenerate;
+            userProps.stop;
+            userProps.error;
+            var rest = _object_without_properties(userProps, [
+                "open",
+                "maximized",
+                "headerComponent",
+                "messagesComponent",
+                "promptComponent",
+                "toggleButtonComponent",
+                "classNames",
+                "className",
+                "messages",
+                "status",
+                "isClearing",
+                "clearMessages",
+                "onClearTransitionEnd",
+                "suggestions",
+                "tools",
+                "sendMessage",
+                "regenerate",
+                "stop",
+                "error"
+            ]);
+            return /*#__PURE__*/ createElement("div", _object_spread_props(_object_spread({}, rest), {
+                className: cx('ais-Chat', 'ais-ChatOverlayLayout', maximized && 'ais-ChatOverlayLayout--maximized', classNames.root, className)
+            }), /*#__PURE__*/ createElement("div", {
+                className: cx('ais-Chat-container', open && 'ais-Chat-container--open', maximized && 'ais-Chat-container--maximized', classNames.container)
+            }, headerComponent, messagesComponent, promptComponent), /*#__PURE__*/ createElement("div", {
+                className: "ais-Chat-toggleButtonWrapper"
+            }, toggleButtonComponent));
+        };
+    }
+
     function createChatPromptComponent(param) {
         var createElement = param.createElement;
         var Button = createButtonComponent({
@@ -19213,8 +19444,12 @@
             createElement: createElement,
             Fragment: Fragment
         });
+        var OverlayLayout = createChatOverlayLayoutComponent({
+            createElement: createElement,
+            Fragment: Fragment
+        });
         return function Chat(userProps) {
-            var open = userProps.open, _userProps_maximized = userProps.maximized, maximized = _userProps_maximized === void 0 ? false : _userProps_maximized, headerProps = userProps.headerProps, toggleButtonProps = userProps.toggleButtonProps, messagesProps = userProps.messagesProps, suggestionsProps = userProps.suggestionsProps, _userProps_promptProps = userProps.promptProps, promptProps = _userProps_promptProps === void 0 ? {} : _userProps_promptProps, 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, props = _object_without_properties(userProps, [
+            var open = userProps.open, _userProps_maximized = userProps.maximized, maximized = _userProps_maximized === void 0 ? false : _userProps_maximized, headerProps = userProps.headerProps, toggleButtonProps = userProps.toggleButtonProps, messagesProps = userProps.messagesProps, suggestionsProps = userProps.suggestionsProps, _userProps_promptProps = userProps.promptProps, promptProps = _userProps_promptProps === void 0 ? {} : _userProps_promptProps, HeaderComponent = userProps.headerComponent, PromptComponent = userProps.promptComponent, ToggleButtonComponent = userProps.toggleButtonComponent, SuggestionsComponent = userProps.suggestionsComponent, tmp = userProps.layoutComponent, LayoutComponent = tmp === void 0 ? OverlayLayout : tmp, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, className = userProps.className, sendMessage = userProps.sendMessage, regenerate = userProps.regenerate, stop = userProps.stop, error = userProps.error, props = _object_without_properties(userProps, [
                 "open",
                 "maximized",
                 "headerProps",
@@ -19226,27 +19461,29 @@
                 "promptComponent",
                 "toggleButtonComponent",
                 "suggestionsComponent",
+                "layoutComponent",
                 "classNames",
-                "className"
+                "className",
+                "sendMessage",
+                "regenerate",
+                "stop",
+                "error"
             ]);
-            return /*#__PURE__*/ createElement("div", _object_spread_props(_object_spread({}, props), {
-                className: cx('ais-Chat', maximized && 'ais-Chat--maximized', classNames.root, className)
-            }), /*#__PURE__*/ createElement("div", {
-                className: cx('ais-Chat-container', open && 'ais-Chat-container--open', maximized && 'ais-Chat-container--maximized', classNames.container)
-            }, createElement(HeaderComponent || ChatHeader, _object_spread_props(_object_spread({}, headerProps), {
+            var headerComponent = createElement(HeaderComponent || ChatHeader, _object_spread_props(_object_spread({}, headerProps), {
                 classNames: classNames.header,
                 maximized: maximized
-            })), /*#__PURE__*/ createElement(ChatMessages, _object_spread_props(_object_spread({}, messagesProps), {
+            }));
+            var messagesComponent = /*#__PURE__*/ createElement(ChatMessages, _object_spread_props(_object_spread({}, messagesProps), {
                 classNames: classNames.messages,
                 messageClassNames: classNames.message,
                 suggestionsElement: createElement(SuggestionsComponent || ChatPromptSuggestions, _object_spread_props(_object_spread({}, suggestionsProps), {
                     classNames: classNames.suggestions
                 }))
-            })), createElement(PromptComponent || ChatPrompt, _object_spread_props(_object_spread({}, promptProps), {
+            }));
+            var promptComponent = createElement(PromptComponent || ChatPrompt, _object_spread_props(_object_spread({}, promptProps), {
                 classNames: classNames.prompt
-            }))), /*#__PURE__*/ createElement("div", {
-                className: "ais-Chat-toggleButtonWrapper"
-            }, createElement(ToggleButtonComponent || ChatToggleButton, _object_spread_props(_object_spread({}, toggleButtonProps), {
+            }));
+            var toggleButtonComponent = createElement(ToggleButtonComponent || ChatToggleButton, _object_spread_props(_object_spread({}, toggleButtonProps), {
                 classNames: classNames.toggleButton,
                 onClick: function onClick() {
                     var _toggleButtonProps_onClick;
@@ -19256,7 +19493,78 @@
                         (_promptProps_promptRef = promptProps.promptRef) === null || _promptProps_promptRef === void 0 ? void 0 : (_promptProps_promptRef_current = _promptProps_promptRef.current) === null || _promptProps_promptRef_current === void 0 ? void 0 : _promptProps_promptRef_current.focus();
                     }
                 }
-            }))));
+            }));
+            return /*#__PURE__*/ createElement(LayoutComponent, _object_spread_props(_object_spread({}, props), {
+                open: open,
+                maximized: maximized,
+                headerComponent: headerComponent,
+                messagesComponent: messagesComponent,
+                promptComponent: promptComponent,
+                toggleButtonComponent: toggleButtonComponent,
+                classNames: {
+                    root: classNames.root,
+                    container: classNames.container
+                },
+                className: className,
+                messages: messagesProps.messages,
+                status: messagesProps.status,
+                tools: messagesProps.tools,
+                isClearing: messagesProps.isClearing,
+                clearMessages: headerProps.onClear,
+                onClearTransitionEnd: messagesProps.onClearTransitionEnd,
+                suggestions: suggestionsProps.suggestions,
+                sendMessage: sendMessage,
+                regenerate: regenerate,
+                stop: stop,
+                error: error
+            }));
+        };
+    }
+
+    function createChatInlineLayoutComponent(param) {
+        var createElement = param.createElement;
+        return function ChatInlineLayout(userProps) {
+            var headerComponent = userProps.headerComponent, messagesComponent = userProps.messagesComponent, promptComponent = userProps.promptComponent, _userProps_classNames = userProps.classNames, classNames = _userProps_classNames === void 0 ? {} : _userProps_classNames, className = userProps.className;
+            userProps.open;
+            userProps.maximized;
+            userProps.toggleButtonComponent; // Chat state props (destructured to avoid spreading on div)
+            userProps.messages;
+            userProps.status;
+            userProps.isClearing;
+            userProps.clearMessages;
+            userProps.onClearTransitionEnd;
+            userProps.suggestions;
+            userProps.tools;
+            userProps.sendMessage;
+            userProps.regenerate;
+            userProps.stop;
+            userProps.error;
+            var rest = _object_without_properties(userProps, [
+                "headerComponent",
+                "messagesComponent",
+                "promptComponent",
+                "classNames",
+                "className",
+                "open",
+                "maximized",
+                "toggleButtonComponent",
+                "messages",
+                "status",
+                "isClearing",
+                "clearMessages",
+                "onClearTransitionEnd",
+                "suggestions",
+                "tools",
+                "sendMessage",
+                "regenerate",
+                "stop",
+                "error"
+            ]);
+            return /*#__PURE__*/ createElement("div", _object_spread_props(_object_spread({}, rest), {
+                className: cx('ais-Chat', 'ais-ChatInlineLayout', classNames.root, className)
+            }), /*#__PURE__*/ createElement("div", {
+                className: cx('ais-Chat-container', classNames.container)
+            }, headerComponent, messagesComponent, promptComponent));
         };
     }
 
@@ -21032,6 +21340,16 @@
         return /*#__PURE__*/ React.createElement(CarouselUiComponent, _object_spread({}, carouselRefs, props));
     }
 
+    var ChatOverlayLayout = createChatOverlayLayoutComponent({
+        createElement: React.createElement,
+        Fragment: React.Fragment
+    });
+
+    var ChatInlineLayout = createChatInlineLayoutComponent({
+        createElement: React.createElement,
+        Fragment: React.Fragment
+    });
+
     function createCarouselTool(showViewAll, itemComponent, getSearchPageURL) {
         var Button = createButtonComponent({
             createElement: React.createElement
@@ -21130,13 +21448,14 @@
         return _obj = {}, _define_property(_obj, SearchIndexToolType$1, createCarouselTool(true, itemComponent, getSearchPageURL)), _define_property(_obj, RecommendToolType, createCarouselTool(false, itemComponent, getSearchPageURL)), _define_property(_obj, MemorizeToolType, {}), _define_property(_obj, MemorySearchToolType, {}), _define_property(_obj, PonderToolType, {}), _obj;
     }
     function Chat(_0) {
-        var userTools = _0.tools, toggleButtonProps = _0.toggleButtonProps, headerProps = _0.headerProps, messagesProps = _0.messagesProps, promptProps = _0.promptProps, itemComponent = _0.itemComponent, toggleButtonComponent = _0.toggleButtonComponent, toggleButtonIconComponent = _0.toggleButtonIconComponent, headerComponent = _0.headerComponent, headerTitleIconComponent = _0.headerTitleIconComponent, headerCloseIconComponent = _0.headerCloseIconComponent, headerMinimizeIconComponent = _0.headerMinimizeIconComponent, headerMaximizeIconComponent = _0.headerMaximizeIconComponent, messagesLoaderComponent = _0.messagesLoaderComponent, messagesErrorComponent = _0.messagesErrorComponent, promptComponent = _0.promptComponent, promptHeaderComponent = _0.promptHeaderComponent, promptFooterComponent = _0.promptFooterComponent, assistantMessageLeadingComponent = _0.assistantMessageLeadingComponent, assistantMessageFooterComponent = _0.assistantMessageFooterComponent, userMessageLeadingComponent = _0.userMessageLeadingComponent, userMessageFooterComponent = _0.userMessageFooterComponent, actionsComponent = _0.actionsComponent, suggestionsComponent = _0.suggestionsComponent, classNames = _0.classNames, _0_translations = _0.translations, translations = _0_translations === void 0 ? {} : _0_translations, title = _0.title, getSearchPageURL = _0.getSearchPageURL, props = _object_without_properties(_0, [
+        var userTools = _0.tools, toggleButtonProps = _0.toggleButtonProps, headerProps = _0.headerProps, messagesProps = _0.messagesProps, promptProps = _0.promptProps, itemComponent = _0.itemComponent, layoutComponent = _0.layoutComponent, toggleButtonComponent = _0.toggleButtonComponent, toggleButtonIconComponent = _0.toggleButtonIconComponent, headerComponent = _0.headerComponent, headerTitleIconComponent = _0.headerTitleIconComponent, headerCloseIconComponent = _0.headerCloseIconComponent, headerMinimizeIconComponent = _0.headerMinimizeIconComponent, headerMaximizeIconComponent = _0.headerMaximizeIconComponent, messagesLoaderComponent = _0.messagesLoaderComponent, messagesErrorComponent = _0.messagesErrorComponent, promptComponent = _0.promptComponent, promptHeaderComponent = _0.promptHeaderComponent, promptFooterComponent = _0.promptFooterComponent, assistantMessageLeadingComponent = _0.assistantMessageLeadingComponent, assistantMessageFooterComponent = _0.assistantMessageFooterComponent, userMessageLeadingComponent = _0.userMessageLeadingComponent, userMessageFooterComponent = _0.userMessageFooterComponent, actionsComponent = _0.actionsComponent, suggestionsComponent = _0.suggestionsComponent, classNames = _0.classNames, _0_translations = _0.translations, translations = _0_translations === void 0 ? {} : _0_translations, title = _0.title, getSearchPageURL = _0.getSearchPageURL, props = _object_without_properties(_0, [
             "tools",
             "toggleButtonProps",
             "headerProps",
             "messagesProps",
             "promptProps",
             "itemComponent",
+            "layoutComponent",
             "toggleButtonComponent",
             "toggleButtonIconComponent",
             "headerComponent",
@@ -21179,7 +21498,7 @@
         var chatState = useChat(_object_spread_props(_object_spread({}, props), {
             tools: tools
         }));
-        var messages = chatState.messages, sendMessage = chatState.sendMessage, status = chatState.status, regenerate = chatState.regenerate, stop = chatState.stop, error = chatState.error, input = chatState.input, setInput = chatState.setInput, open = chatState.open, setOpen = chatState.setOpen, isClearing = chatState.isClearing, clearMessages = chatState.clearMessages, onClearTransitionEnd = chatState.onClearTransitionEnd, toolsFromConnector = chatState.tools, suggestions = chatState.suggestions;
+        var messages = chatState.messages, sendMessage = chatState.sendMessage, status = chatState.status, regenerate = chatState.regenerate, stop = chatState.stop, error = chatState.error, input = chatState.input, setInput = chatState.setInput, open = chatState.open, setOpen = chatState.setOpen, isClearing = chatState.isClearing, clearMessages = chatState.clearMessages, onClearTransitionEnd = chatState.onClearTransitionEnd, toolsFromConnector = chatState.tools, suggestions = chatState.suggestions, onFeedback = chatState.sendChatMessageFeedback, feedbackState = chatState.feedbackState;
         var wasOpenRef = React.useRef(false);
         React.useEffect(function() {
             var shouldFocusPrompt = !wasOpenRef.current && open;
@@ -21200,6 +21519,11 @@
             title: title,
             open: open,
             maximized: maximized,
+            sendMessage: sendMessage,
+            regenerate: regenerate,
+            stop: stop,
+            error: error,
+            layoutComponent: layoutComponent,
             headerComponent: headerComponent,
             promptComponent: promptComponent,
             toggleButtonComponent: toggleButtonComponent,
@@ -21237,6 +21561,8 @@
                 onClose: function onClose() {
                     return setOpen(false);
                 },
+                onFeedback: onFeedback,
+                feedbackState: feedbackState,
                 messages: messages,
                 tools: toolsFromConnector,
                 indexUiState: indexUiState,
@@ -22974,6 +23300,8 @@
     exports.Breadcrumb = Breadcrumb;
     exports.Carousel = Carousel;
     exports.Chat = Chat;
+    exports.ChatInlineLayout = ChatInlineLayout;
+    exports.ChatOverlayLayout = ChatOverlayLayout;
     exports.ClearRefinements = ClearRefinements;
     exports.Configure = Configure;
     exports.CurrentRefinements = CurrentRefinements;