@athoscommerce/snap-preact 1.2.3-beta.2 → 1.2.3-beta.4

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',
@@ -390,7 +391,19 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
             borderBottomRightRadius: mobile ? 0 : '12px',
             borderBottomLeftRadius: mobile ? 0 : '12px',
             flexGrow: 1,
+            position: 'relative',
             '.ss__chat__content__header': {
+                // In overlay mode (only applied when messages overflow), the comparisons
+                // tray floats over the messages so toggling it doesn't shift the layout
+                // or push the latest message out of view. When messages don't overflow,
+                // the tray stays in flow so older messages remain reachable above it.
+                '&.ss__chat__content__header--overlay': {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 20,
+                },
                 // '.ss__chat__attachments': {
                 // 	'.ss__chat__attachment': {
                 // 		borderRadius: 0,
@@ -435,9 +448,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 +459,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',
@@ -511,6 +524,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: {
@@ -537,7 +576,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
                 '.ss__chat__welcome': {
                     display: 'flex',
                     flexDirection: 'column',
-                    height: '100%',
+                    minHeight: '100%',
                     '.ss__chat__welcome__message': {
                         fontSize: '15px',
                         lineHeight: 1.5,
@@ -675,13 +714,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 +971,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,
@@ -983,9 +1029,10 @@ export const Chat = observer((properties) => {
         title: 'Athos Conversational Assistant',
         subtitle: 'Ready to assist you',
         multiselectFacets: true,
+        disableBubbleSuggestedQuestions: false,
     };
     let props = mergeProps('facets', globalTheme, defaultProps, properties);
-    const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets } = props;
+    const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets, disableBubbleSuggestedQuestions } = props;
     const { store } = controller;
     const themeDefaults = {
         components: {},
@@ -999,6 +1046,7 @@ export const Chat = observer((properties) => {
     const fileInputRef = useRef(null);
     const messagesEndRef = useRef(null);
     const messagesContainerRef = useRef(null);
+    const headerRef = useRef(null);
     const footerRef = useRef(null);
     // Swipe-to-dismiss state for mobile secondary panel
     const secondaryRef = useRef(null);
@@ -1010,22 +1058,124 @@ 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 [messagesOverflow, setMessagesOverflow] = useState(false);
+    const isNearBottomRef = useRef(true);
     const updateSwipeOffset = (value) => {
         swipeOffsetRef.current = value;
         setSwipeOffsetRaw(value);
     };
     const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        // Scroll the messages container directly (instead of scrollIntoView on the
+        // bottom anchor) so the browser never walks up the ancestor chain. On small
+        // viewports a smooth scrollIntoView could otherwise animate the document/
+        // visual viewport and visually push the fixed-position chat off-screen.
+        const container = messagesContainerRef.current;
+        if (container) {
+            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+        }
+    };
+    // 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();
+        }
     };
-    // Auto-scroll to bottom when new messages are added or chat state changes
+    // 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.currentChat?.chat.length, store.loading, store.open]);
+    }, [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]);
+    // Track whether the messages container is overflowing so the comparisons header
+    // can switch between in-flow (short conversations — top content stays reachable)
+    // and overlay (overflowing — avoid layout shift when toggling the tray).
+    // Hysteresis: when already in overlay, only return to in-flow if the content
+    // would still fit *with* the header re-inserted — otherwise the two states
+    // fight each other and the layout flickers.
+    useEffect(() => {
+        const container = messagesContainerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        const update = () => {
+            setMessagesOverflow((prev) => {
+                const headerHeight = headerRef.current?.offsetHeight || 0;
+                if (prev) {
+                    // Currently overlay: header isn't taking flow space. Only switch
+                    // back to in-flow if the content would fit with the header added.
+                    return container.scrollHeight > container.clientHeight - headerHeight + 1;
+                }
+                // Currently in-flow: header already takes space — straightforward check.
+                return container.scrollHeight > container.clientHeight + 1;
+            });
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(container);
+        if (headerRef.current)
+            observer.observe(headerRef.current);
+        return () => observer.disconnect();
+    }, [store.open, visibleChatLength]);
+    // 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.loading]);
     // const subProps: ChatSubProps = {};
     const activeMessage = store.currentChat?.activeMessage;
     // On mobile, only auto-open the secondary panel for the first productComparison
@@ -1090,6 +1240,26 @@ export const Chat = observer((properties) => {
                                     return text.length > 50 ? `${text.slice(0, 50)}...` : text;
                                 })() }), _jsx("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id))) })) : null] }));
     const FacetButton = (props) => _jsx(Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label });
+    const getFacetButtonLabel = (facet) => {
+        const applied = new Set();
+        // Count values marked as filtered (already applied on the server)
+        (facet.values || []).forEach((value) => {
+            if (value?.filtered) {
+                if ('low' in value && 'high' in value) {
+                    applied.add(`${value.low ?? '*'}:${value.high ?? '*'}`);
+                }
+                else {
+                    applied.add(value.value);
+                }
+            }
+        });
+        // Count pending facet attachments (newly selected, not yet sent)
+        (controller.store.currentChat?.attachments.items || [])
+            .filter((item) => item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'))
+            .forEach((item) => applied.add(item.value));
+        const base = facet.label || facet.field;
+        return applied.size > 0 ? `${base} (${applied.size})` : base;
+    };
     // TODO: if starting a new chat and it's expired, this button would then disappear
     if (!controller.store.chatEnabled) {
         return _jsx(_Fragment, {});
@@ -1178,7 +1348,7 @@ export const Chat = observer((properties) => {
                         'ss__chat--open': store.open,
                         'ss__chat--minimized': !store.open,
                         'ss__chat--mobile': isMobile,
-                    }, className, internalClassName), ...styling, children: [!store.open && !store.currentChat && store.suggestedQuestions?.length > 0 && (_jsx("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map((question, index) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
+                    }, className, internalClassName), ...styling, children: [!disableBubbleSuggestedQuestions && !store.open && !store.currentChat && store.suggestedQuestions?.length > 0 && (_jsx("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map((question, index) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
                                     controller.openChat(question);
                                 }, children: question }, index))) })), _jsx("div", { className: 'ss__chat__bubble', onClick: () => controller.handlers.button.click(), children: _jsx(Icon, { icon: "chat", title: "Open Chat" }) }), store.open && shouldShowSideChat && activeMessage ? (_jsxs("div", { ref: secondaryRef, className: classnames('ss__chat__secondary'), style: isMobile
                                 ? {
@@ -1192,8 +1362,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)
@@ -1228,7 +1397,9 @@ export const Chat = observer((properties) => {
                                                         store.currentChat.save();
                                                     }
                                                 }, children: _jsx(Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
-                                })(), _jsxs("div", { className: "ss__chat__content", children: [_jsx("div", { className: "ss__chat__content__header", children: store.currentChat?.comparisons.compared && store.currentChat.comparisons.compared.length > 0 && (_jsxs("div", { className: 'ss__chat__content__header__comparisons', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [_jsx(Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), _jsxs("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", store.currentChat?.comparisons.compared.length, "/", store.currentChat?.comparisons.maxItems, ")"] })] }), _jsx("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: _jsx(Button, { onClick: () => store.currentChat?.comparisons.reset(), children: "clear" }) })] }), _jsxs("div", { className: 'ss__chat__content__header__comparisons__content', children: [_jsx("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: store.currentChat?.comparisons.maxItems }).map((_, index) => {
+                                })(), _jsxs("div", { className: "ss__chat__content", children: [_jsx("div", { ref: headerRef, className: classnames('ss__chat__content__header', {
+                                                'ss__chat__content__header--overlay': messagesOverflow,
+                                            }), children: store.currentChat?.comparisons.compared && store.currentChat.comparisons.compared.length > 0 && (_jsxs("div", { className: 'ss__chat__content__header__comparisons', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [_jsx(Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), _jsxs("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", store.currentChat?.comparisons.compared.length, "/", store.currentChat?.comparisons.maxItems, ")"] })] }), _jsx("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: _jsx(Button, { onClick: () => store.currentChat?.comparisons.reset(), children: "clear" }) })] }), _jsxs("div", { className: 'ss__chat__content__header__comparisons__content', children: [_jsx("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: store.currentChat?.comparisons.maxItems }).map((_, index) => {
                                                                     const comparisonItem = store.currentChat?.comparisons.compared[index];
                                                                     return (_jsx("div", { className: classnames('ss__chat__content__header__comparisons__content__comparison', {
                                                                             'ss__chat__content__header__comparisons__content__comparison--placeholder': !comparisonItem,
@@ -1245,37 +1416,43 @@ 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 ? { scrollbarGutter: 'stable' } : undefined, children: [(!store.currentChat?.chat || store.currentChat.chat.length === 0) && store.welcomeMessage && !store.currentChat?.isExpired && (_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 && messagesOverflow && (_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') ||
+                                                                                    (store.currentChat?.removedFacets && store.currentChat.removedFacets.length > 0)
+                                                                                    ? ' 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: {
+                                                                            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: getFacetButtonLabel(facet) }), style: {
                                                                                         '.ss__dropdown__content': {
                                                                                             width: '150px',
                                                                                             maxHeight: '200px',
@@ -1339,9 +1516,11 @@ export const Chat = observer((properties) => {
                                                                                         },
                                                                                     }, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
                                                                                             ? facet.values.map((option) => {
-                                                                                                const optionValue = `${option.low ?? '*'}:${option.high ?? '*'}`;
+                                                                                                const rangeOption = option;
+                                                                                                const optionValue = `${rangeOption.low ?? '*'}:${rangeOption.high ?? '*'}`;
                                                                                                 if (multiselectFacets) {
-                                                                                                    const isSelected = controller.store.isFacetSelected(facet.field, optionValue);
+                                                                                                    const isSelected = (rangeOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
+                                                                                                        controller.store.isFacetSelected(facet.field, optionValue);
                                                                                                     return (_jsxs("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: () => {
                                                                                                             if (isSelected) {
                                                                                                                 controller.store.removeFacet(facet.field, optionValue);
@@ -1351,29 +1530,31 @@ export const Chat = observer((properties) => {
                                                                                                                     key: facet.field,
                                                                                                                     facetLabel: facet.label,
                                                                                                                     value: optionValue,
-                                                                                                                    label: option.label,
-                                                                                                                    count: option.count,
+                                                                                                                    label: rangeOption.label,
+                                                                                                                    count: rangeOption.count,
                                                                                                                 });
                                                                                                             }
                                                                                                         }, children: [_jsx("div", { className: classnames('ss__chat__actions__facet__option__checkbox', {
                                                                                                                     'ss__chat__actions__facet__option__checkbox--checked': isSelected,
-                                                                                                                }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
+                                                                                                                }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: rangeOption.label })] }, optionValue));
                                                                                                 }
                                                                                                 return (_jsx(Button, { onClick: () => {
                                                                                                         controller.store.addFacet({
                                                                                                             key: facet.field,
                                                                                                             facetLabel: facet.label,
                                                                                                             value: optionValue,
-                                                                                                            label: option.label,
-                                                                                                            count: option.count,
+                                                                                                            label: rangeOption.label,
+                                                                                                            count: rangeOption.count,
                                                                                                         });
                                                                                                         controller.search();
-                                                                                                    }, children: option.label }, optionValue));
+                                                                                                    }, children: rangeOption.label }, optionValue));
                                                                                             })
                                                                                             : facet.values.map((option) => {
-                                                                                                const optionValue = option.value || option.label;
+                                                                                                const valueOption = option;
+                                                                                                const optionValue = valueOption.value || valueOption.label;
                                                                                                 if (multiselectFacets) {
-                                                                                                    const isSelected = controller.store.isFacetSelected(facet.field, optionValue);
+                                                                                                    const isSelected = (valueOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
+                                                                                                        controller.store.isFacetSelected(facet.field, optionValue);
                                                                                                     return (_jsxs("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: () => {
                                                                                                             if (isSelected) {
                                                                                                                 controller.store.removeFacet(facet.field, optionValue);
@@ -1383,24 +1564,24 @@ export const Chat = observer((properties) => {
                                                                                                                     key: facet.field,
                                                                                                                     facetLabel: facet.label,
                                                                                                                     value: optionValue,
-                                                                                                                    label: option.label,
-                                                                                                                    count: option.count,
+                                                                                                                    label: valueOption.label,
+                                                                                                                    count: valueOption.count,
                                                                                                                 });
                                                                                                             }
                                                                                                         }, children: [_jsx("div", { className: classnames('ss__chat__actions__facet__option__checkbox', {
                                                                                                                     'ss__chat__actions__facet__option__checkbox--checked': isSelected,
-                                                                                                                }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
+                                                                                                                }), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: valueOption.label })] }, optionValue));
                                                                                                 }
                                                                                                 return (_jsx(Button, { onClick: () => {
                                                                                                         controller.store.addFacet({
                                                                                                             key: facet.field,
                                                                                                             facetLabel: facet.label,
                                                                                                             value: optionValue,
-                                                                                                            label: option.label,
-                                                                                                            count: option.count,
+                                                                                                            label: valueOption.label,
+                                                                                                            count: valueOption.count,
                                                                                                         });
                                                                                                         controller.search();
-                                                                                                    }, children: option.label }, optionValue));
+                                                                                                    }, children: valueOption.label }, optionValue));
                                                                                             }) }) }, facet.field) }, idx));
                                                                         }) })] })) : null,
                                                             actions: (_jsx("div", { className: "ss__chat__actions--suggested" })),
@@ -1509,6 +1690,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 +1729,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;AAkH7D,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"}