@athoscommerce/snap-preact 1.2.3-beta.1 → 1.2.3-beta.3

package/dist/esm/components/src/components/Organisms/Chat/Chat.js

@@ -170,11 +170,11 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                 padding: '12px 16px',
                 fontSize: '14px',
                 color: '#333',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
                 cursor: 'pointer',
                 lineHeight: 1.4,
                 '&:hover': {
-                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
                 },
             },
         },
@@ -220,6 +220,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                 display: 'flex',
                 '.ss__chat__header__title__logo': {
                     height: '44px',
+                    width: 'auto',
                 },
                 '.ss__chat__header__title__text': {
                     display: 'flex',
@@ -435,9 +436,9 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                         alignItems: 'stretch',
                         '.ss__chat__content__header__comparisons__content__items': {
                             display: 'flex',
-                            gap: '1em',
                             flex: '1 1 calc(100% - 100px)',
                             justifyContent: 'space-between',
+                            gap: '0.5em',
                         },
                         '.ss__chat__content__header__comparisons__content__comparison': {
                             background: '#fff',
@@ -446,7 +447,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '0.5em',
-                            flex: '0 1 20%',
+                            flex: '0 1 25%',
                             position: 'relative',
                             '&.ss__chat__content__header__comparisons__content__comparison--placeholder': {
                                 border: '2px dashed #ddd',
@@ -503,7 +504,6 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
             },
             '.ss__chat__messages': {
                 flex: '1 1 auto',
-                overflowY: 'auto',
                 overscrollBehavior: 'contain',
                 margin: 0,
                 maxHeight: '100%',
@@ -511,6 +511,32 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                 '.ss__chat__messages__end': {
                     height: '1px',
                 },
+                '.ss__chat__new-messages': {
+                    position: 'sticky',
+                    bottom: '10px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '6px',
+                    margin: '0 auto',
+                    width: 'fit-content',
+                    padding: '6px 16px',
+                    background: colorPrimary,
+                    color: '#fff',
+                    borderRadius: '999px',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+                    zIndex: 5,
+                    '&:hover': {
+                        background: '#1a2a5c',
+                    },
+                    svg: {
+                        fill: '#fff',
+                        stroke: '#fff',
+                    },
+                },
                 '.ss__chat__message': {
                     marginBottom: '30px',
                     ul: {
@@ -675,13 +701,19 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                 display: 'flex',
                 justifyContent: 'flex-end',
                 padding: '0 2px',
+                // reserve the slot so toggling the button's visibility doesn't reflow the header
+                visibility: 'hidden',
+                '&.ss__chat__actions__facets-apply--active': {
+                    visibility: 'visible',
+                },
                 '.ss__button': {
                     background: '#253B80',
                     color: '#fff',
                     border: 'none',
                     borderRadius: '999px',
-                    padding: '6px 16px',
-                    fontSize: '14px',
+                    padding: '2px 10px',
+                    fontSize: '12px',
+                    lineHeight: '1.4',
                     cursor: 'pointer',
                     '&:not(.ss__button--disabled):hover': {
                         background: '#1a2a5c',
@@ -926,6 +958,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                         padding: '0.5em 0',
                         margin: '0 0 0 1em',
                         flex: '1 0 auto',
+                        border: 'none',
                         '&::placeholder': {
                             color: '#999',
                             opacity: 0.7,
@@ -1010,6 +1043,8 @@ export const Chat = observer((properties) => {
     const [swipeAnimating, setSwipeAnimating] = useState(false);
     const [mobileProductInfoOpen, setMobileProductInfoOpen] = useState(false);
     const [footerHeight, setFooterHeight] = useState(0);
+    const [showNewMessages, setShowNewMessages] = useState(false);
+    const isNearBottomRef = useRef(true);
     const updateSwipeOffset = (value) => {
         swipeOffsetRef.current = value;
         setSwipeOffsetRaw(value);
@@ -1017,15 +1052,78 @@ export const Chat = observer((properties) => {
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
-    // Auto-scroll to bottom when new messages are added or chat state changes
+    // Conditional scroll: only scrolls if the user is already near the bottom.
+    // Passed to child components (e.g. image onLoad) so they don't yank the user
+    // back to the bottom when they have scrolled up to read older messages.
+    const scrollToBottomIfNear = () => {
+        if (isNearBottomRef.current) {
+            scrollToBottom();
+        }
+    };
+    // productQuery messages are filtered out of the main chat render (they only drive the side-chat panel),
+    // so don't auto-scroll when one is added — otherwise clicking a product in the side chat scrolls the main thread.
+    const visibleChatLength = (store.currentChat?.chat || []).filter((m) => m.messageType !== 'productQuery').length;
+    // Scroll to bottom when chat opens
     useEffect(() => {
-        // if (store.open && messagesContainerRef.current) {
-        // 	messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
-        // }
         if (store.open) {
             scrollToBottom();
+            setShowNewMessages(false);
+            isNearBottomRef.current = true;
+        }
+    }, [store.open]);
+    // Handle new messages — auto-scroll for user messages, show popup for response messages when scrolled up
+    useEffect(() => {
+        if (!store.open)
+            return;
+        const chat = store.currentChat?.chat || [];
+        const visibleChat = chat.filter((m) => m.messageType !== 'productQuery');
+        const lastMessage = visibleChat[visibleChat.length - 1];
+        if (!lastMessage)
+            return;
+        if (lastMessage.messageType === 'user') {
+            scrollToBottom();
+            setShowNewMessages(false);
+        }
+        else {
+            if (isNearBottomRef.current) {
+                scrollToBottom();
+                setShowNewMessages(false);
+            }
+            else {
+                setShowNewMessages(true);
+            }
+        }
+    }, [visibleChatLength]);
+    // Scroll to show loading indicator when user sends a message
+    useEffect(() => {
+        if (store.open && store.loading) {
+            scrollToBottom();
+        }
+    }, [store.loading]);
+    // Track scroll position to dismiss the "New messages" popup when user scrolls to bottom
+    useEffect(() => {
+        const container = messagesContainerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            const threshold = 100;
+            const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+            isNearBottomRef.current = isNearBottom;
+            if (isNearBottom) {
+                setShowNewMessages(false);
+            }
+        };
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [store.open]);
+    // Re-focus the chat input on desktop after a search completes.
+    // The input is disabled while loading, which causes the browser to drop focus.
+    // On mobile we intentionally skip this so the virtual keyboard dismisses.
+    useEffect(() => {
+        if (!store.loading && !isMobile && store.open) {
+            controller.focusInput();
         }
-    }, [store.currentChat?.chat.length, store.loading, store.open]);
+    }, [store.loading]);
     // const subProps: ChatSubProps = {};
     const activeMessage = store.currentChat?.activeMessage;
     // On mobile, only auto-open the secondary panel for the first productComparison
@@ -1192,8 +1290,7 @@ export const Chat = observer((properties) => {
                                                         productQuery: 'Product Information',
                                                     }[activeMessage.messageType] || null }), _jsx("div", { className: "ss__chat__header__title__secondary", children: {
                                                         inspirationResult: 'Choose a style direction to explore',
-                                                        productComparison: `Comparing ${activeMessage?.comparisonData?.features.length ||
-                                                            activeMessage?.searchResults?.length} products`,
+                                                        productComparison: `Comparing ${activeMessage?.searchResults?.length || ''} products`,
                                                         productQuery: 'Complete product details',
                                                     }[activeMessage.messageType] || null })] }), _jsx("div", { className: "ss__chat__header__buttons", children: _jsx(Button, { className: "ss__chat__header__button--close", icon: { icon: 'close2', title: 'Close Chat' }, onClick: () => {
                                                     // clear any product attachments tied to the side chat (discuss product flow)
@@ -1245,34 +1342,39 @@ export const Chat = observer((properties) => {
                                                                                     }, children: _jsx(Icon, { icon: 'close-thin', size: '12px' }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: 'plus-thin' }), _jsx("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', children: "Add" })] })) }, index));
                                                                 }) }), _jsx("div", { className: classnames('ss__chat__content__header__comparisons__action', {
                                                                     'ss__chat__content__header__comparisons__action--hidden': (store.currentChat?.comparisons.compared.length || 0) < 2,
-                                                                }), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), _jsxs("div", { className: 'ss__chat__messages', ref: messagesContainerRef, children: [(!store.currentChat?.chat || store.currentChat.chat.length === 0) && store.welcomeMessage && (_jsxs("div", { className: "ss__chat__welcome", children: [_jsx("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), _jsx(SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), store.currentChat?.chat
+                                                                }), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), _jsxs("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { overflowY: 'auto', scrollbarGutter: 'stable' } : undefined, children: [(!store.currentChat?.chat || store.currentChat.chat.length === 0) && store.welcomeMessage && (_jsxs("div", { className: "ss__chat__welcome", children: [_jsx("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), _jsx(SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), store.currentChat?.chat
                                                     .filter((chatItem) => chatItem.messageType !== 'productQuery')
                                                     .map((chatItem, index) => (_jsx("div", { className: `ss__chat__message ss__chat__message--${chatItem.messageType}`, children: {
                                                         user: (_jsx(MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined })),
-                                                        text: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        content: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        productSearchResult: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        inspirationResult: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        productAnswer: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        text: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        content: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        productSearchResult: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        inspirationResult: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        productAnswer: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
                                                         productComparison: (() => {
                                                             // On mobile, only the first productComparison in the session
                                                             // auto-opens the secondary panel. Subsequent ones get a
                                                             // prominent "Show Details" button instead.
                                                             const comparisonMessages = (store.currentChat?.chat || []).filter((m) => m.messageType === 'productComparison');
                                                             const isFirst = comparisonMessages.length > 0 && comparisonMessages[0].id === chatItem.id;
-                                                            return (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat }));
+                                                            return (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat }));
                                                         })(),
-                                                        productRecommendation: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        productRecommendation: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat })),
                                                         actions: _jsx(SuggestedQuestions, { actions: chatItem.actions, controller: controller }),
-                                                        errorResponse: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, sideChatOpen: !!shouldShowSideChat })),
-                                                        topicDrift: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, sideChatOpen: !!shouldShowSideChat })),
+                                                        errorResponse: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
+                                                        topicDrift: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
                                                         productQuery: null,
-                                                    }[chatItem.messageType] || null }, index))), _jsx("div", { className: "ss__chat__messages__end", ref: messagesEndRef })] }), _jsx(ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !store.currentChat?.isExpired ? (_jsxs("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && _jsx("div", { className: "ss__chat__error", children: store.error.message }), store.currentChat?.sessionLimitReached && (_jsxs("div", { className: 'ss__chat__topic-drift', children: [_jsx(Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), _jsxs("div", { className: 'ss__chat__topic-drift__text', children: [_jsx("span", { children: "Session limit reached" }), _jsx("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), _jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
+                                                    }[chatItem.messageType] || null }, index))), _jsx("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && (_jsxs("div", { className: "ss__chat__new-messages", onClick: () => {
+                                                        scrollToBottom();
+                                                        setShowNewMessages(false);
+                                                    }, children: [_jsx(Icon, { icon: "angle-down", size: "12px" }), _jsx("span", { children: "New messages" })] }))] }), _jsx(ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !store.currentChat?.isExpired ? (_jsxs("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && _jsx("div", { className: "ss__chat__error", children: store.error.message }), store.currentChat?.sessionLimitReached && (_jsxs("div", { className: 'ss__chat__topic-drift', children: [_jsx(Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), _jsxs("div", { className: 'ss__chat__topic-drift__text', children: [_jsx("span", { children: "Session limit reached" }), _jsx("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), _jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
                                                                 controller.store.createChat();
                                                             }, children: "New Session" })] })), store.currentChat?.actions && store.currentChat.actions.length > 0 && (_jsx("div", { className: 'ss__chat__actions', children: store.currentChat?.actions.map((action, index) => (_jsx("div", { className: "ss__chat__actions__wrap", children: {
-                                                            facets: action.data.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && (store.currentChat?.attachments.attached.some((item) => item.type === 'facet') || false) && (_jsx("div", { className: "ss__chat__actions__facets-apply", children: _jsx(Button, { onClick: () => {
+                                                            facets: action.data.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && (_jsx("div", { className: `ss__chat__actions__facets-apply${store.currentChat?.attachments.attached.some((item) => item.type === 'facet')
+                                                                                    ? ' ss__chat__actions__facets-apply--active'
+                                                                                    : ''}`, children: _jsx(Button, { onClick: () => {
                                                                                         controller.search();
-                                                                                    }, children: "Apply Filters" }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map((facet, idx) => {
+                                                                                    }, children: "Apply" }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map((facet, idx) => {
                                                                             if (!facet.values?.length)
                                                                                 return null;
                                                                             return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, button: _jsx(FacetButton, { label: facet.label || facet.field }), style: {
@@ -1509,6 +1611,7 @@ export const Chat = observer((properties) => {
                                                                     const messageText = store.currentChat?.handleTopicDrift();
                                                                     if (messageText) {
                                                                         controller.store.createChat();
+                                                                        controller.search({ data: { message: messageText } });
                                                                     }
                                                                 }, children: buttonText })), _jsx("span", { onClick: () => {
                                                                     store.currentChat?.dismissTopicDrift();
@@ -1547,7 +1650,7 @@ export const Chat = observer((properties) => {
                                                                             }, multiple: true, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), _jsx("div", { className: 'ss__chat__input__actions', children: (() => {
                                                                 const hasImageAttachment = (store.currentChat?.attachments.attached || []).some((item) => item.type === 'image' && !item.error);
                                                                 const messageEmpty = !controller.store.inputValue.trim();
-                                                                const sendDisabled = store.blocked || store.currentChat?.sessionLimitReached || (hasImageAttachment && messageEmpty);
+                                                                const sendDisabled = store.blocked || store.currentChat?.sessionLimitReached || (hasImageAttachment && messageEmpty) || messageEmpty;
                                                                 return (_jsx(Button, { className: "ss__chat__send-button", icon: { icon: 'send', title: 'Send Message' }, disabled: sendDisabled, onClick: () => {
                                                                         if (sendDisabled)
                                                                             return;

package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts

@@ -1,12 +1,11 @@
 import { ChatController } from '@athoscommerce/snap-controller';
 import { Product } from '@athoscommerce/snap-store-mobx';
 import { ComponentProps } from '../../../types';
-export declare const ChatResult: ((properties: ChatResultProps) => JSX.Element) & {
-    displayName: string;
-};
+export declare const ChatResult: (props: ChatResultProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export interface ChatResultProps extends ComponentProps {
     result: Product;
     controller: ChatController;
     scrollToBottom: () => void;
+    trackingRef?: (el: HTMLElement | null) => void;
 }
 //# sourceMappingURL=ChatResult.d.ts.map

package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAyG7D,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,GAAG,CAAC,OAAO;;CAiG3E,CAAC;AAMH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAyG7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}

package/dist/esm/components/src/components/Organisms/Chat/ChatResult.js

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { Image } from '../../Atoms/Image';
 import { Button } from '../../Atoms/Button';
 import { mergeProps, mergeStyles } from '../../../utilities';
-import { css, useTheme, useTreePath, useSnap } from '../../../providers';
+import { css, useTheme, useTreePath, useSnap, withTracking } from '../../../providers';
 import { CalloutBadge, OverlayBadge, Price } from '../../..';
 import { useComponent } from '../../../hooks';
 const defaultStyles = () => {
@@ -100,7 +100,7 @@ const defaultStyles = () => {
         },
     });
 };
-export const ChatResult = observer((properties) => {
+export const ChatResult = withTracking(observer((properties) => {
     const globalTheme = useTheme();
     const globalTreePath = useTreePath();
     const snap = useSnap();
@@ -108,7 +108,7 @@ export const ChatResult = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('chatResult', globalTheme, defaultProps, properties);
-    const { controller, result, scrollToBottom, customComponent } = props;
+    const { controller, result, scrollToBottom, customComponent, trackingRef } = props;
     if (customComponent) {
         const ComponentOverride = useComponent(snap?.templates?.library.import.component.result || {}, customComponent);
         if (ComponentOverride) {
@@ -116,6 +116,9 @@ export const ChatResult = observer((properties) => {
         }
     }
     const isInComparison = controller.store.currentChat?.comparisons.items.some((item) => item.result?.id === result.id);
+    // a result is "configurable" when it ships with selectable variant options
+    // (e.g. color/size); those need a selection before they can be added to cart
+    const isConfigurable = !!result.variants?.optionConfig && Object.keys(result.variants.optionConfig).length > 0;
     const subProps = {
         button: {
             // component theme overrides
@@ -131,13 +134,20 @@ export const ChatResult = observer((properties) => {
         },
     };
     const styling = mergeStyles(properties, defaultStyles);
-    return (_jsxs("div", { className: "ss__chat__result", ...styling, children: [_jsxs("div", { className: "ss__chat__result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { className: 'ss__chat__result__detail-slot__image', alt: result.display.mappings.core?.name || '', src: result.display.mappings.core?.imageUrl || '', ...subProps.image }) }), _jsxs("div", { className: "ss__chat__result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { className: 'ss__chat__result__image__buttons__similar', content: 'Similar', onClick: () => {
+    return (_jsxs("div", { className: "ss__chat__result", ref: trackingRef, ...styling, children: [_jsxs("div", { className: "ss__chat__result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { className: 'ss__chat__result__detail-slot__image', alt: result.display.mappings.core?.name || '', src: result.display.mappings.core?.imageUrl || '', ...subProps.image }) }), _jsxs("div", { className: "ss__chat__result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { className: 'ss__chat__result__image__buttons__similar', content: 'Similar', onClick: () => {
                                     controller.discussProduct(result, { requestType: 'productSimilar' });
                                 } })), _jsx(Button, { className: 'ss__chat__result__image__buttons__compare', content: isInComparison ? undefined : 'Compare', icon: isInComparison ? { icon: 'check-thin', title: 'Added to comparison' } : undefined, onClick: () => {
                                     controller.compareProduct(result);
                                 } })] }), _jsxs("div", { className: "ss__chat__result__image__icons", children: [_jsx(Button, { className: 'ss__chat__result__image__icons__icon--inquire', icon: { icon: 'chat', title: 'Discuss Product' }, onClick: () => {
                                     controller.discussProduct(result, { requestType: 'productQuery' });
-                                } }), _jsx(Button, { className: 'ss__chat__result__image__icons__icon--cart', icon: { icon: 'cart', title: 'Add to Cart' }, onClick: () => {
+                                } }), _jsx(Button, { className: 'ss__chat__result__image__icons__icon--cart', icon: { icon: 'cart', title: isConfigurable ? 'Configure' : 'Add to Cart' }, onClick: () => {
+                                    // configurable products need a variant selection — open the product
+                                    // information panel so the user can pick options before adding to cart
+                                    if (isConfigurable) {
+                                        controller.viewProduct(result);
+                                        return;
+                                    }
+                                    controller.track.product.addToCart(result);
                                     controller.addToCart(result);
-                                } })] })] }), _jsxs("div", { className: "ss__chat__result__content", children: [result.display.mappings.core?.name && _jsx("div", { className: "ss__chat__result__content__title--primary", children: result.display.mappings.core?.name }), result.display.mappings.core?.price && (_jsx("div", { className: "ss__chat__result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }));
-});
+                                } })] })] }), _jsxs("div", { className: "ss__chat__result__content", children: [result.display.mappings.core?.name && (_jsx("div", { className: "ss__chat__result__content__title--primary", children: result.display.mappings.core?.name })), result.display.mappings.core?.price && (_jsx("div", { className: "ss__chat__result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }));
+}));

package/dist/esm/components/src/components/Organisms/Chat/MessageUser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAyHhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CAsE1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
+{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA6F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}

package/dist/esm/components/src/components/Organisms/Chat/MessageUser.js

@@ -27,6 +27,11 @@ const defaultStyles = () => {
             alignItems: 'center',
             gap: '10px',
         },
+        '.ss__chat__message-user__text-wrapper': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+        },
         '.ss__chat__message-user__text': {
             padding: '0.5em 1em',
             borderRadius: '12px',
@@ -39,9 +44,10 @@ const defaultStyles = () => {
             padding: 0,
             margin: 0,
             display: 'flex',
-            gap: '8px',
-            flexWrap: 'nowrap',
+            flexWrap: 'wrap',
             justifyContent: 'flex-end',
+            flex: '0 0 40px',
+            alignSelf: 'flex-end',
             '.ss__chat__message-user__attachment__product, .ss__chat__message-user__attachment__image, .ss__chat__message-user__attachment__facet': {
                 width: '40px',
                 height: '40px',
@@ -67,6 +73,11 @@ const defaultStyles = () => {
                     borderColor: colorPrimary,
                 },
             },
+            '.ss__chat__message-user__attachment__facet--overflow': {
+                fontSize: '12px',
+                fontWeight: 600,
+                color: '#555',
+            },
         },
     });
 };
@@ -80,7 +91,12 @@ function getRequestTypeLabel(chatItem) {
         case 'productComparison':
             return 'Comparing products';
         case 'productSearch':
-            return 'Filtering products';
+            if (chatItem.request?.searchFilters?.length) {
+                return 'Filtering products';
+            }
+            else {
+                return 'Searching products';
+            }
         case 'imageSearch':
             return 'Searching by image';
         case 'productSimilar':
@@ -142,23 +158,38 @@ export const MessageUser = observer((props) => {
             onViewProduct?.(product);
         }
     };
-    return (_jsxs("div", { className: "ss__chat__message-user", ...styling, children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, _jsxs("div", { className: "ss__chat__message-user__row", children: [_jsx("ul", { className: "ss__chat__message-user__attachments", children: chatItem.attachments?.length
-                            ? chatItem.attachments?.map((attachmentId) => {
-                                const attachment = store.currentChat?.attachments.get(attachmentId);
-                                switch (attachment?.type) {
-                                    case 'image':
-                                        return (_jsx("li", { className: "ss__chat__message-user__attachment__image", children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
-                                    case 'product': {
-                                        const canOpen = !!findProductInChat(store.currentChat?.chat, attachment.productId);
-                                        return (_jsx("li", { className: classnames('ss__chat__message-user__attachment__product', {
-                                                'ss__chat__message-user__attachment__product--clickable': canOpen,
-                                            }), onClick: canOpen ? () => handleProductAttachmentClick(attachment) : undefined, title: canOpen ? `View details for ${attachment.name}` : undefined, children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
-                                    }
-                                    case 'facet':
-                                        return (_jsx("li", { className: "ss__chat__message-user__attachment__facet", children: _jsx(Icon, { title: `Filter: ${attachment.facetLabel} = ${attachment.label}`, icon: "filter-funnel", size: 27 }) }, attachment.id));
-                                    default:
+    return (_jsx("div", { className: "ss__chat__message-user", ...styling, children: _jsxs("div", { className: "ss__chat__message-user__row", children: [_jsx("ul", { className: "ss__chat__message-user__attachments", children: (() => {
+                        if (!chatItem.attachments?.length)
+                            return null;
+                        const resolved = chatItem.attachments.map((id) => store.currentChat?.attachments.get(id)).filter(Boolean);
+                        const totalFacets = resolved.filter((a) => a.type === 'facet').length;
+                        const hiddenFacetCount = Math.max(0, totalFacets - 2);
+                        let facetIndex = 0;
+                        const items = resolved
+                            .map((attachment) => {
+                            switch (attachment.type) {
+                                case 'image':
+                                    return (_jsx("li", { className: "ss__chat__message-user__attachment__image", children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
+                                case 'product': {
+                                    const canOpen = !!findProductInChat(store.currentChat?.chat, attachment.productId);
+                                    return (_jsx("li", { className: classnames('ss__chat__message-user__attachment__product', {
+                                            'ss__chat__message-user__attachment__product--clickable': canOpen,
+                                        }), onClick: canOpen ? () => handleProductAttachmentClick(attachment) : undefined, title: canOpen ? `View details for ${attachment.name}` : undefined, children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
+                                }
+                                case 'facet': {
+                                    facetIndex += 1;
+                                    if (facetIndex > 2)
                                         return null;
+                                    return (_jsx("li", { className: "ss__chat__message-user__attachment__facet", children: _jsx(Icon, { title: `Filter: ${attachment.facetLabel} = ${attachment.label}`, icon: "filter-funnel", size: 27 }) }, attachment.id));
                                 }
-                            })
-                            : null }), chatItem.text ? (_jsx("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked.parse(chatItem.text) } })) : null] })] }));
+                                default:
+                                    return null;
+                            }
+                        })
+                            .filter(Boolean);
+                        if (hiddenFacetCount > 0) {
+                            items.push(_jsxs("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: `${hiddenFacetCount} more filter${hiddenFacetCount === 1 ? '' : 's'}`, children: ["+", hiddenFacetCount] }, "facet-overflow"));
+                        }
+                        return items;
+                    })() }), _jsxs("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? (_jsx("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked.parse(chatItem.text) } })) : null] })] }) }));
 });

package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CA2EhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CA8EhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}

package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.js

@@ -38,7 +38,9 @@ export const ResultsDisplay = observer((props) => {
         ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
         currentChat?.dismissedSideChatMessageId !== activeMessage.id;
     const isNarrow = typeof window !== 'undefined' && window.innerWidth < 550;
-    const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768;
+    // only the tablet range needs the narrower carousel when the side chat is open;
+    // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
+    const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
     const slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
     const carouselProps = {
         breakpoints: undefined,
@@ -54,6 +56,7 @@ export const ResultsDisplay = observer((props) => {
         // buttons should be able to be clicked without triggering the product click
         if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
             return;
+        controller.track.product.click(e, result);
         controller.viewProduct(result);
         onViewProduct?.();
     };

package/dist/esm/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA+CjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA0N3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,oCAAoC,GACvC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA+CjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAsN3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,oCAAoC,GACvC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,uBAAuB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.js

@@ -55,7 +55,10 @@ export const AutocompleteFixed = observer((properties) => {
     };
     const props = mergeProps('autocompleteFixed', globalTheme, defaultProps, properties);
     const [active, setActive] = useState(false);
-    const [inputName, setInputName] = useState('query');
+    // Use an empty inputName so the rendered SearchInput does not participate in form
+    // serialization. The original input retains its name (e.g. 'q') so that native form
+    // submission still produces the expected ?q= query parameter.
+    const inputName = '';
     let input = props.input;
     let buttonSelector = props.buttonSelector;
     let inputPlaceholderText = undefined;
@@ -63,13 +66,6 @@ export const AutocompleteFixed = observer((properties) => {
         if (typeof input === 'string') {
             input = document.querySelector(input);
         }
-        const existingInputName = input?.getAttribute('name');
-        if (existingInputName) {
-            setInputName(existingInputName);
-            if (props.renderInput) {
-                input.setAttribute('name', '');
-            }
-        }
         inputPlaceholderText = input?.getAttribute('placeholder');
     }
     if (!buttonSelector && input) {

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA8DjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAqK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,oCAAoC,GACvC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA8DjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAiK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,oCAAoC,GACvC,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -71,20 +71,16 @@ export const AutocompleteModal = observer((properties) => {
     };
     const props = mergeProps('autocompleteModal', globalTheme, defaultProps, properties);
     const [active, setActive] = useState(false);
-    const [inputName, setInputName] = useState('query');
+    // Use an empty inputName so the rendered SearchInput does not participate in form
+    // serialization. The original input retains its name (e.g. 'q') so that native form
+    // submission still produces the expected ?q= query parameter.
+    const inputName = '';
     let input = props.input;
     let buttonSelector = props.buttonSelector;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
         }
-        const existingInputName = input?.getAttribute('name');
-        if (existingInputName) {
-            setInputName(existingInputName);
-            if (props.renderInput) {
-                input.setAttribute('name', '');
-            }
-        }
     }
     if (!buttonSelector && input) {
         buttonSelector = input;

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA6JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,uCAAuC,GAC1C,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CAyJjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,uCAAuC,GAC1C,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,uBAAuB,CAAC"}