npm - @athoscommerce/snap-preact - Versions diffs - 1.5.1-beta.116 → 1.6.0 - Mend

@athoscommerce/snap-preact 1.5.1-beta.116 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1687) hide show

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

@@ -1,916 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import classnames from 'classnames';
-import deepmerge from 'deepmerge';
-import { observer } from 'mobx-react-lite';
-import { useTheme, CacheProvider, useTreePath } from '../../../providers';
-import { Colour, mergeProps, mergeStyles } from '../../../utilities';
-import { chatDefaultStyles } from './Chat.styles';
-import { useChatGestures } from './hooks/useChatGestures';
-import { useChatOverflow } from './hooks/useChatOverflow';
-import { useChatFileUpload } from './hooks/useChatFileUpload';
-import { Button } from '../../Atoms/Button';
-import { useRef, useEffect, useMemo, useState } from 'preact/hooks';
-import { ChatMessageUser } from '../../Molecules/ChatMessageUser';
-import { ChatMessageText } from '../../Molecules/ChatMessageText';
-import { ChatSuggestedQuestions } from '../../Molecules/ChatSuggestedQuestions';
-import { ChatAttachmentContext } from '../../Molecules/ChatAttachmentContext';
-import { Image } from '../../Atoms/Image';
-import { ChatLoadingIndicator } from '../../Atoms/ChatLoadingIndicator';
-import { Dropdown, FacetSlider, Icon, Overlay, useMediaQuery } from '../../..';
-import { ChatInspirationResultMessage } from '../../Molecules/ChatInspirationResultMessage';
-import { ChatProductComparisonMessage, } from '../../Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage';
-import { ChatProductQueryMessage, } from '../../Molecules/ChatProductQueryMessage/ChatProductQueryMessage';
-export const ChatOrganism = observer((properties) => {
-    const globalTheme = useTheme();
-    const globalTreePath = useTreePath();
-    const isMobile = useMediaQuery('(max-width: 767px)');
-    const defaultProps = {
-        treePath: globalTreePath,
-        logo: 'https://cdn.athoscommerce.net/snap/images/Athos%20Commerce_Icon_white.svg',
-        title: 'Athos Conversational Assistant',
-        subtitle: 'Your Guided Discovery Expert',
-        multiselectFacets: false,
-        disableBubbleSuggestedQuestions: isMobile ? true : false,
-        primaryColorBg: '#253B80',
-        primaryColorFg: '#fff',
-        primaryAccentColorBg: '#feeeae',
-        primaryAccentColorFg: '#000000',
-        secondaryAccentColorBg: '#000000',
-        secondaryAccentColorFg: '#ffffff',
-        position: 'right',
-    };
-    let props = mergeProps('chat', globalTheme, defaultProps, properties);
-    const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets, disableBubbleSuggestedQuestions, primaryColorBg, primaryColorFg, primaryAccentColorBg, primaryAccentColorFg, secondaryAccentColorBg, secondaryAccentColorFg, position, disableStyles, treePath, } = props;
-    const colorPrimary = primaryColorBg;
-    const colorPrimaryText = primaryColorFg;
-    const colorPrimaryAccent = primaryAccentColorBg;
-    const colorPrimaryAccentText = primaryAccentColorFg;
-    const colorSecondaryAccent = secondaryAccentColorBg;
-    const colorSecondaryAccentText = secondaryAccentColorFg;
-    const chatPosition = position === 'right' ? 'right' : 'left';
-    const { store } = controller;
-    const themeDefaults = {
-        components: {},
-    };
-    // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
-    const theme = deepmerge(themeDefaults, props?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
-    props = {
-        ...props,
-        theme,
-    };
-    const subProps = {
-        messageUser: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-            primaryColor: colorPrimary,
-            primaryColorText: colorPrimaryText,
-        },
-        messageText: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-            primaryColor: colorPrimary,
-            primaryColorText: colorPrimaryText,
-        },
-        suggestedQuestions: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-            primaryColor: colorPrimary,
-        },
-        attachmentContext: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-        },
-        loadingIndicator: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-        },
-        inspirationResultMessage: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-        },
-        productComparisonMessage: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-        },
-        productQueryMessage: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-            primaryColor: colorPrimary,
-            primaryColorText: colorPrimaryText,
-        },
-    };
-    const messagesEndRef = useRef(null);
-    const messagesContainerRef = useRef(null);
-    const headerRef = useRef(null);
-    const footerRef = useRef(null);
-    const chatRef = useRef(null);
-    // Ref for the mobile secondary panel — needed for swipe-to-dismiss measurements
-    const secondaryRef = useRef(null);
-    const [mobileProductInfoOpen, setMobileProductInfoOpen] = useState(false);
-    const [footerHeight, setFooterHeight] = useState(0);
-    const dropEnabled = store.features.imageSearch.enabled && !store.loading && !store.blocked && !store.currentChat?.sessionLimitReached;
-    const { fileInputRef, isDraggingFile, dragHandlers } = useChatFileUpload({
-        enabled: !!dropEnabled,
-        onUpload: (files) => controller.upload(files),
-    });
-    // 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 visibleChat = (store.currentChat?.chat || []).filter((m) => m.messageType !== 'productQuery');
-    const visibleChatLength = visibleChat.length;
-    const lastVisibleMessage = visibleChat[visibleChat.length - 1];
-    const { showNewMessages, setShowNewMessages, messagesOverflow, scrollToBottom, scrollToBottomIfNear } = useChatOverflow({
-        messagesContainerRef,
-        headerRef,
-        open: store.open,
-        loading: store.loading,
-        visibleChatLength,
-        lastVisibleMessage,
-    });
-    // 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.
-    // Only fire on the loading true → false transition — running on mount steals
-    // focus away from the Storybook controls whenever the story re-renders.
-    const prevLoadingRef = useRef(store.loading);
-    useEffect(() => {
-        if (prevLoadingRef.current && !store.loading && !isMobile && store.open) {
-            controller.focusInput();
-        }
-        prevLoadingRef.current = store.loading;
-    }, [store.loading]);
-    // const subProps: ChatSubProps = {};
-    const activeMessage = store.currentChat?.activeMessage;
-    // On mobile, only auto-open the secondary panel for the first productComparison
-    // message in the chat session. Subsequent comparison results show a "Show Details"
-    // button instead (handled in MessageText via sideChatLabel toggle).
-    const isFirstMobileComparison = (() => {
-        if (!isMobile || activeMessage?.messageType !== 'productComparison')
-            return true;
-        // If the user explicitly activated a comparison (via "Show Details" or the
-        // view-side-chat button), always allow it regardless of position in the chat
-        if (store.currentChat?.activeMessageId)
-            return true;
-        const comparisonMessages = (store.currentChat?.chat || []).filter((m) => m.messageType === 'productComparison');
-        return comparisonMessages.length <= 1;
-    })();
-    const sideChatTypes = isMobile
-        ? ['inspirationResult', ...(isFirstMobileComparison ? ['productComparison'] : []), ...(mobileProductInfoOpen ? ['productQuery'] : [])]
-        : ['inspirationResult', 'productComparison', 'productQuery'];
-    const shouldShowSideChat = activeMessage && sideChatTypes.includes(activeMessage?.messageType) && store.currentChat?.dismissedSideChatMessageId !== activeMessage.id;
-    const hasSideChat = !!shouldShowSideChat;
-    const styling = useMemo(() => mergeStyles({
-        mobile: isMobile,
-        offset,
-        hasSideChat,
-        footerHeight,
-        primaryColorBg: colorPrimary,
-        primaryColorFg: colorPrimaryText,
-        primaryAccentColorBg: colorPrimaryAccent,
-        primaryAccentColorFg: colorPrimaryAccentText,
-        secondaryAccentColorBg: colorSecondaryAccent,
-        secondaryAccentColorFg: colorSecondaryAccentText,
-        position: chatPosition,
-    }, chatDefaultStyles), [
-        isMobile,
-        offset,
-        hasSideChat,
-        footerHeight,
-        colorPrimary,
-        colorPrimaryText,
-        colorPrimaryAccent,
-        colorPrimaryAccentText,
-        colorSecondaryAccent,
-        colorSecondaryAccentText,
-        chatPosition,
-    ]);
-    // Lock body scroll while chat is open so touch/wheel scrolls don't leak to the page behind
-    useEffect(() => {
-        if (!store.open)
-            return;
-        const body = document.body;
-        const previousOverflow = body.style.overflow;
-        const previousOverscroll = body.style.overscrollBehavior;
-        body.style.overflow = 'hidden';
-        body.style.overscrollBehavior = 'contain';
-        return () => {
-            body.style.overflow = previousOverflow;
-            body.style.overscrollBehavior = previousOverscroll;
-        };
-    }, [store.open]);
-    // Close chat on Escape key (or dismiss side chat first when it's open)
-    useEffect(() => {
-        if (!store.open)
-            return;
-        const onKeyDown = (e) => {
-            if (e.key !== 'Escape')
-                return;
-            if (store.currentChat?.activeMessage && shouldShowSideChat) {
-                store.currentChat?.dismissSideChat();
-            }
-            else {
-                controller.handlers.button.click();
-            }
-        };
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [store.open, shouldShowSideChat]);
-    // Track the primary footer height so the mobile secondary panel can sit above it
-    useEffect(() => {
-        const el = footerRef.current;
-        if (!el)
-            return;
-        const observer = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                setFooterHeight(entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height);
-            }
-        });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, [store.open, store.currentChat?.isExpired]);
-    // Prevent the background page from scrolling while the chat is open on touch
-    // devices. iOS Safari (real iPad/iPhone) rubber-band-scrolls the body when a
-    // touchmove inside `.ss__chat__messages` reaches the top/bottom — and
-    // `overscroll-behavior: contain` is ignored there.
-    //
-    // We don't touch body styles (locking via `position: fixed` on `<body>` leaves
-    // iPad Safari in a stuck viewport state where the page can't scroll after the
-    // lock is released). Instead we install a `touchmove` handler that:
-    //   - allows the touchmove if it's inside a scrollable region of the chat
-    //     and that region isn't at its scroll edge in the swipe direction;
-    //   - calls `preventDefault()` otherwise — which is what blocks both
-    //     background scrolling and iOS rubber-band overscroll.
-    // Cleanup just removes the listeners, so nothing can leak into the page.
-    useEffect(() => {
-        if (!store.open)
-            return;
-        if (typeof document === 'undefined')
-            return;
-        let startX = 0;
-        let startY = 0;
-        let scrollEl = null;
-        // Walk up from the touch target to find the first ancestor inside the chat
-        // that is actually scrollable in either axis. Stop at the chat root so we
-        // never consider elements outside the chat.
-        const findScrollableInChat = (start) => {
-            const chatRoot = chatRef.current;
-            if (!chatRoot)
-                return null;
-            let el = start;
-            while (el && chatRoot.contains(el)) {
-                const style = getComputedStyle(el);
-                const scrollableY = (style.overflowY === 'auto' || style.overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
-                const scrollableX = (style.overflowX === 'auto' || style.overflowX === 'scroll') && el.scrollWidth > el.clientWidth;
-                if (scrollableY || scrollableX) {
-                    return el;
-                }
-                if (el === chatRoot)
-                    break;
-                el = el.parentElement;
-            }
-            return null;
-        };
-        const onTouchStart = (e) => {
-            if (!e.touches[0])
-                return;
-            startX = e.touches[0].clientX;
-            startY = e.touches[0].clientY;
-            scrollEl = findScrollableInChat(e.target);
-        };
-        const onTouchMove = (e) => {
-            const target = e.target;
-            const chatRoot = chatRef.current;
-            const inChat = !!(chatRoot && target && chatRoot.contains(target));
-            // Touches outside the chat shouldn't scroll the background.
-            if (!inChat) {
-                if (e.cancelable)
-                    e.preventDefault();
-                return;
-            }
-            // Inside the chat but no scrollable container — block to prevent body scroll.
-            if (!scrollEl) {
-                if (e.cancelable)
-                    e.preventDefault();
-                return;
-            }
-            // Inside a scrollable container — only block when at the edge in the
-            // swipe direction, so internal scrolling continues to work. Detect the
-            // dominant axis so horizontally-scrollable rows (e.g. the facets row)
-            // also get to handle their own touch gestures.
-            const currentX = e.touches[0]?.clientX ?? startX;
-            const currentY = e.touches[0]?.clientY ?? startY;
-            const deltaX = currentX - startX;
-            const deltaY = currentY - startY;
-            const horizontal = Math.abs(deltaX) > Math.abs(deltaY);
-            if (horizontal) {
-                const scrollsX = scrollEl.scrollWidth > scrollEl.clientWidth;
-                if (!scrollsX) {
-                    if (e.cancelable)
-                        e.preventDefault();
-                    return;
-                }
-                const atLeft = scrollEl.scrollLeft <= 0;
-                const atRight = scrollEl.scrollLeft + scrollEl.clientWidth >= scrollEl.scrollWidth - 1;
-                if ((atLeft && deltaX > 0) || (atRight && deltaX < 0)) {
-                    if (e.cancelable)
-                        e.preventDefault();
-                }
-            }
-            else {
-                const scrollsY = scrollEl.scrollHeight > scrollEl.clientHeight;
-                if (!scrollsY) {
-                    if (e.cancelable)
-                        e.preventDefault();
-                    return;
-                }
-                const atTop = scrollEl.scrollTop <= 0;
-                const atBottom = scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 1;
-                if ((atTop && deltaY > 0) || (atBottom && deltaY < 0)) {
-                    if (e.cancelable)
-                        e.preventDefault();
-                }
-            }
-        };
-        document.addEventListener('touchstart', onTouchStart, { passive: true });
-        document.addEventListener('touchmove', onTouchMove, { passive: false });
-        return () => {
-            document.removeEventListener('touchstart', onTouchStart);
-            document.removeEventListener('touchmove', onTouchMove);
-        };
-    }, [store.open]);
-    const HistoryButton = (props) => (_jsx(Button, { className: "ss__chat__header__button--history", disabled: props.disabled, icon: {
-            icon: 'history',
-            title: 'Chat History',
-        } }));
-    const HistoryPopup = (props) => (_jsxs("div", { className: "ss__chat__history", children: [_jsxs("div", { className: "ss__chat__history__header", children: [_jsx("h4", { children: "History" }), _jsx("div", { className: "ss__chat__history__header__buttons", children: _jsx(Button, { content: "clear", onClick: () => {
-                                controller.store.clearHistory();
-                                props.toggleOpen && props.toggleOpen();
-                            } }) })] }), store.chats.length > 0 ? (_jsx("div", { className: "ss__chat__history__chats", children: store.chats
-                    .slice()
-                    .reverse()
-                    .map((chat) => (_jsx("div", { className: "ss__chat__history__chats__chat", children: _jsxs(Button, { className: "ss__chat__history__chat__button", onClick: () => {
-                            controller.store.switchChat(chat.id);
-                        }, disabled: chat.id === store.currentChatId, children: [_jsx("div", { className: "ss__chat__history__chat__button__text", children: (() => {
-                                    const lastUserMessage = [...chat.chat].reverse().find((message) => message.messageType === 'user');
-                                    if (!lastUserMessage)
-                                        return 'New Chat';
-                                    const text = lastUserMessage.text;
-                                    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 base = facet.label || facet.field;
-        // Slider facets show the active low-high range in the button when narrowed.
-        if (facet.type === 'range') {
-            const rangeFacet = facet;
-            const active = rangeFacet.active;
-            const range = rangeFacet.range;
-            if (active && range && (active.low !== range.low || active.high !== range.high)) {
-                return `${base} (${active.low ?? '*'}-${active.high ?? '*'})`;
-            }
-            return base;
-        }
-        // Count current selections from the urlManager (source of truth for live state).
-        // `value.filtered` reflects the server's snapshot at response time and goes stale
-        // once the user deselects locally.
-        const applied = (facet.values || []).filter((value) => {
-            if (!value)
-                return false;
-            const optionValue = 'low' in value && 'high' in value
-                ? `${value.low ?? '*'}:${value.high ?? '*'}`
-                : value.value || value.label;
-            return controller.store.isFacetSelected(facet.field, optionValue);
-        }).length;
-        return applied > 0 ? `${base} (${applied})` : base;
-    };
-    // Slider dropdown grows to fill the remaining chat width from its anchor,
-    // so the price range slider isn't cramped inside a 150px-wide dropdown.
-    const SliderFacetDropdown = (props) => {
-        const anchorRef = useRef(null);
-        const [width, setWidth] = useState(null);
-        useEffect(() => {
-            const compute = () => {
-                if (!anchorRef.current || !chatRef.current)
-                    return;
-                const anchor = anchorRef.current.getBoundingClientRect();
-                const chat = chatRef.current.getBoundingClientRect();
-                const remaining = chat.right - anchor.left - 16;
-                setWidth(Math.max(220, remaining));
-            };
-            compute();
-            const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(compute) : null;
-            if (ro && chatRef.current)
-                ro.observe(chatRef.current);
-            window.addEventListener('resize', compute);
-            return () => {
-                if (ro)
-                    ro.disconnect();
-                window.removeEventListener('resize', compute);
-            };
-        }, []);
-        return (_jsx("div", { ref: anchorRef, className: "ss__chat__actions__facet ss__chat__actions__facet--range", children: _jsx(Dropdown, { usePortal: true, dropUp: true, button: _jsx(FacetButton, { label: props.label }), style: {
-                    '.ss__dropdown__content': {
-                        width: width ? `${width}px` : 'auto',
-                        background: 'white',
-                        boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
-                        borderRadius: '6px',
-                    },
-                }, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: _jsx("div", { className: "ss__chat__actions__facet__slider", style: { padding: '12px 16px' }, children: _jsx(FacetSlider, { facet: props.facet, onChange: () => {
-                                if (!multiselectFacets) {
-                                    // FacetSlider fires onChange before its urlManager update; defer
-                                    // so controller.search() reads the updated filter state. Force
-                                    // productSearch with the current filters so a slider tweak doesn't
-                                    // fall through to `general` when hasPendingFacetChanges happens to
-                                    // be false (e.g. the slider returned to the seeded range).
-                                    queueMicrotask(() => controller.search({
-                                        data: { requestType: 'productSearch', searchFilters: controller.store.searchFilters },
-                                    }));
-                                }
-                            } }) }) }) }) }));
-    };
-    // TODO: if starting a new chat and it's expired, this button would then disappear
-    if (!controller.store.chatEnabled) {
-        return _jsx(_Fragment, {});
-    }
-    const { swipeOffset, swipeAnimating, swipeHandlers } = useChatGestures({
-        panelRef: secondaryRef,
-        shouldShowSideChat: !!shouldShowSideChat,
-        activeMessageId: activeMessage?.id,
-        onDismiss: () => {
-            const attachments = store.currentChat?.attachments.attached || [];
-            const productAttachments = attachments.filter((item) => item.type === 'product' && item.requestType !== 'productSimilar' && item.requestType !== 'productComparison');
-            productAttachments.forEach((item) => store.currentChat?.attachments.remove(item.id));
-            setMobileProductInfoOpen(false);
-            store.currentChat?.dismissSideChat();
-        },
-    });
-    const requestType = store.currentChat?.requestType;
-    const loadingVerbs = useMemo(() => {
-        switch (requestType) {
-            case 'productQuery':
-                return ['Thinking', 'Searching', 'Analyzing', 'Gathering details'];
-            case 'productSearch':
-                return ['Searching', 'Browsing catalog', 'Finding products', 'Curating results'];
-            case 'productComparison':
-                return ['Comparing', 'Analyzing', 'Evaluating', 'Weighing options'];
-            case 'imageSearch':
-                return ['Analyzing image', 'Identifying', 'Searching', 'Matching'];
-            case 'productSimilar':
-                return ['Finding similar items', 'Searching', 'Matching', 'Curating'];
-            case 'inspirationRequest':
-                return ['Brainstorming', 'Imagining', 'Curating', 'Inspiring'];
-            case 'general':
-            default:
-                return undefined;
-        }
-    }, [requestType]);
-    const isWelcomeState = (!store.currentChat?.chat || store.currentChat.chat.length === 0) && !!store.welcomeMessage && !store.currentChat?.isExpired;
-    return (_jsx(CacheProvider, { children: _jsxs(_Fragment, { children: [_jsxs("div", { ref: chatRef, className: classnames('ss__chat', {
-                        'ss__chat--open': store.open,
-                        'ss__chat--minimized': !store.open,
-                        'ss__chat--mobile': isMobile,
-                        'ss__chat--welcome': isWelcomeState,
-                    }, 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("button", { type: "button", className: 'ss__chat__bubble', "aria-label": store.open ? 'Close chat' : 'Open chat', "aria-expanded": store.open, 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'), role: "region", "aria-label": "Conversation details", style: isMobile
-                                ? {
-                                    // Touch swipe animations need to be inline to prevent visual jumps
-                                    transform: swipeOffset > 0 ? `translateY(${swipeOffset}px)` : undefined,
-                                    transition: swipeAnimating ? 'transform 0.3s ease-out' : 'none',
-                                }
-                                : undefined, children: [isMobile && (_jsx("div", { className: "ss__chat__secondary__drag-handle", ...swipeHandlers, children: _jsx("div", { className: "ss__chat__secondary__drag-handle__indicator" }) })), _jsxs("div", { className: 'ss__chat__header', onTouchStart: isMobile ? swipeHandlers.onTouchStart : undefined, onTouchMove: isMobile ? swipeHandlers.onTouchMove : undefined, onTouchEnd: isMobile ? swipeHandlers.onTouchEnd : undefined, children: [_jsxs("div", { className: "ss__chat__header__title", children: [_jsx("div", { className: "ss__chat__header__title__primary", children: {
-                                                        inspirationResult: 'Inspiration Scenarios',
-                                                        productComparison: 'Product Comparison',
-                                                        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?.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", "aria-label": "Close chat", icon: { icon: 'close2', title: 'Close Chat' }, onClick: () => {
-                                                    // clear any product attachments tied to the side chat (discuss product flow)
-                                                    // so the attachments bar disappears alongside the secondary panel
-                                                    // but preserve productComparison attachments so the user can continue comparing
-                                                    const productAttachmentsToRemove = (store.currentChat?.attachments.attached || []).filter((item) => item.type === 'product' &&
-                                                        item.requestType !== 'productSimilar' &&
-                                                        item.requestType !== 'productComparison');
-                                                    productAttachmentsToRemove.forEach((item) => store.currentChat?.attachments.remove(item.id));
-                                                    setMobileProductInfoOpen(false);
-                                                    store.currentChat?.dismissSideChat();
-                                                } }) })] }), _jsx("div", { className: "ss__chat__content", children: _jsx("div", { className: 'ss__chat__messages', children: {
-                                            inspirationResult: (_jsx(ChatInspirationResultMessage, { ...subProps.inspirationResultMessage, chatItem: activeMessage, controller: controller, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined })),
-                                            productComparison: (_jsx(ChatProductComparisonMessage, { ...subProps.productComparisonMessage, chatItem: activeMessage, controller: controller })),
-                                            productQuery: (_jsx(ChatProductQueryMessage, { ...subProps.productQueryMessage, chatItem: activeMessage, controller: controller, displayFields: controller.config.settings?.quickview?.displayFields, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                        }[activeMessage.messageType] || null }) })] })) : null, store.open ? (_jsxs("div", { className: 'ss__chat__primary', children: [_jsxs("div", { className: 'ss__chat__header', children: [_jsxs("div", { className: "ss__chat__header__title", children: [logo ? _jsx("img", { className: "ss__chat__header__title__logo", src: logo }) : null, _jsxs("div", { className: "ss__chat__header__title__text", children: [title ? _jsx("div", { className: "ss__chat__header__title__text__primary", children: title }) : null, subtitle ? _jsx("div", { className: "ss__chat__header__title__text__secondary", children: subtitle }) : null] })] }), _jsxs("div", { className: "ss__chat__header__buttons", children: [_jsx(Button
-                                                // disabled={store.currentChat?.chat && store.currentChat.chat.length <= 1}
-                                                , {
-                                                    // disabled={store.currentChat?.chat && store.currentChat.chat.length <= 1}
-                                                    className: "ss__chat__header__button--new", "aria-label": "New chat", icon: { icon: controller.store.initChatLoading ? 'spinner' : 'plus2', title: 'New Chat' }, onClick: () => controller.store.createChat() }), store.chats.length > 1 && (_jsx(Dropdown, { disabled: store.chats.length == 1 && store.currentChat && store.currentChat.chat.length <= 1, className: "ss__chat__header__dropdown-history", button: _jsx(HistoryButton, {}), children: _jsx(HistoryPopup, {}) })), _jsx(Button, { className: "ss__chat__header__button--close", "aria-label": "Close chat", icon: { icon: 'close2', title: 'Close Chat' }, onClick: () => controller.handlers.button.click() })] })] }), (() => {
-                                    const feedbackAfterMessages = controller.config.settings?.feedbackAfterMessages;
-                                    const systemMessages = (store.currentChat?.chat || []).filter((msg) => msg.messageType !== 'user' && msg.messageType !== 'productQuery');
-                                    const currentRating = store.currentChat?.sessionFeedback?.rating;
-                                    const hasRated = !!currentRating;
-                                    const shouldShowFeedback = feedbackAfterMessages &&
-                                        systemMessages.length >= feedbackAfterMessages &&
-                                        !store.currentChat?.feedbackDismissed &&
-                                        (!hasRated || store.currentChat?.feedbackJustGiven);
-                                    return shouldShowFeedback ? (_jsxs("div", { className: "ss__chat__session-feedback", children: [_jsx("div", { className: "ss__chat__session-feedback__icon", children: _jsx(Icon, { icon: "chat", size: "16px" }) }), _jsx("span", { className: "ss__chat__session-feedback__label", children: hasRated ? 'Thank you for your feedback' : "How's your experience so far?" }), _jsxs("div", { className: `ss__chat__session-feedback__actions${hasRated ? ' ss__chat__session-feedback__actions--rated' : ''}`, children: [(!hasRated || currentRating === 'UP') && (_jsx("span", { onClick: () => !hasRated && controller.handleFeedback('UP'), children: _jsx(Icon, { icon: 'thumbs-up', size: "16px", title: 'Thumbs Up' }) })), (!hasRated || currentRating === 'DOWN') && (_jsx("span", { onClick: () => !hasRated && controller.handleFeedback('DOWN'), children: _jsx(Icon, { icon: 'thumbs-down', size: "16px", title: 'Thumbs Down' }) }))] }), !hasRated && (_jsx("span", { className: "ss__chat__session-feedback__close", onClick: () => {
-                                                    if (store.currentChat) {
-                                                        store.currentChat.feedbackDismissed = true;
-                                                        store.currentChat.save();
-                                                    }
-                                                }, children: _jsx(Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
-                                })(), _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,
-                                                                        }), children: comparisonItem ? (_jsxs(_Fragment, { children: [_jsx(Image
-                                                                                // onClick={() => {
-                                                                                // 	controller?.productQuickView(product as any);
-                                                                                // }}
-                                                                                , {
-                                                                                    // onClick={() => {
-                                                                                    // 	controller?.productQuickView(product as any);
-                                                                                    // }}
-                                                                                    alt: (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.name || '', src: (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.imageUrl ||
-                                                                                        (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.parentImageUrl ||
-                                                                                        '' }), _jsx("div", { className: "ss__chat__content__header__comparisons__content__comparison__remove", onClick: () => {
-                                                                                        store.currentChat?.comparisons.remove(comparisonItem.result.id);
-                                                                                    }, 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, role: "log", "aria-live": "polite", "aria-relevant": "additions", "aria-label": "Chat messages", 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(ChatSuggestedQuestions, { ...subProps.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(ChatMessageUser, { ...subProps.messageUser, chatItem: chatItem, controller: controller, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        text: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        content: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        productSearchResult: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        inspirationResult: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        productAnswer: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        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(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText }));
-                                                        })(),
-                                                        productRecommendation: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? () => setMobileProductInfoOpen(true) : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        actions: (_jsx(ChatSuggestedQuestions, { actions: chatItem.actions, controller: controller })),
-                                                        errorResponse: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        topicDrift: (_jsx(ChatMessageText, { ...subProps.messageText, chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
-                                                        productQuery: null,
-                                                    }[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, { ...subProps.loadingIndicator, loading: store.loading, verbs: loadingVerbs }), !store.currentChat?.isExpired ? (_jsxs("div", { className: "ss__chat__content__footer", ref: footerRef, ...dragHandlers, 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.facets && store.facets.length > 0 && (_jsx("div", { className: 'ss__chat__actions', children: _jsxs("div", { className: "ss__chat__actions__wrap", children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && store.hasPendingFacetChanges && (_jsx("div", { className: 'ss__chat__actions__facets-apply ss__chat__actions__facets-apply--active', children: _jsx(Button, { onClick: () => {
-                                                                                controller.search();
-                                                                            }, children: store.pendingFacetCount > 0 ? `Apply (${store.pendingFacetCount})` : 'Clear facets' }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: store.facets.slice(0, 10).map((facet, idx) => {
-                                                                    // range/slider facets render via FacetSlider; everything else needs at least one value to be useful
-                                                                    if (facet.type !== 'range' && !facet.values?.length)
-                                                                        return null;
-                                                                    if (facet.type === 'range') {
-                                                                        return _jsx(SliderFacetDropdown, { facet: facet, label: getFacetButtonLabel(facet) }, idx);
-                                                                    }
-                                                                    return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, boundaryRef: chatRef, button: _jsx(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
-                                                                                '.ss__dropdown__content': {
-                                                                                    width: '150px',
-                                                                                    maxHeight: '200px',
-                                                                                    overflowY: 'auto',
-                                                                                    background: 'white',
-                                                                                    boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
-                                                                                    borderRadius: '6px',
-                                                                                    ...(multiselectFacets
-                                                                                        ? {
-                                                                                            '.ss__chat__actions__facet__option--checkbox': {
-                                                                                                display: 'flex',
-                                                                                                alignItems: 'center',
-                                                                                                gap: '8px',
-                                                                                                padding: '6px 10px',
-                                                                                                cursor: 'pointer',
-                                                                                                width: '100%',
-                                                                                                boxSizing: 'border-box',
-                                                                                                background: '#fff',
-                                                                                                border: 'none',
-                                                                                                borderBottom: '1px solid #f0f0f0',
-                                                                                                '&:hover': {
-                                                                                                    background: new Colour(colorPrimary).lightenHex(0.95),
-                                                                                                },
-                                                                                                '&:last-child': {
-                                                                                                    borderBottom: 'none',
-                                                                                                },
-                                                                                                '.ss__chat__actions__facet__option__checkbox': {
-                                                                                                    width: '16px',
-                                                                                                    height: '16px',
-                                                                                                    borderRadius: '3px',
-                                                                                                    border: '2px solid #ccc',
-                                                                                                    display: 'flex',
-                                                                                                    alignItems: 'center',
-                                                                                                    justifyContent: 'center',
-                                                                                                    flexShrink: 0,
-                                                                                                    '&.ss__chat__actions__facet__option__checkbox--checked': {
-                                                                                                        background: colorPrimary,
-                                                                                                        borderColor: colorPrimary,
-                                                                                                        color: colorPrimaryText,
-                                                                                                        svg: {
-                                                                                                            fill: colorPrimaryText,
-                                                                                                            stroke: colorPrimaryText,
-                                                                                                        },
-                                                                                                    },
-                                                                                                },
-                                                                                                '.ss__chat__actions__facet__option__label': {
-                                                                                                    fontSize: '14px',
-                                                                                                    color: '#333',
-                                                                                                    flex: '1 1 auto',
-                                                                                                    textAlign: 'left',
-                                                                                                },
-                                                                                            },
-                                                                                        }
-                                                                                        : {
-                                                                                            '.ss__button': {
-                                                                                                width: '100%',
-                                                                                                border: 'none',
-                                                                                                borderRadius: 0,
-                                                                                                boxSizing: 'border-box',
-                                                                                                background: '#fff',
-                                                                                                '&:hover': {
-                                                                                                    background: new Colour(colorPrimary).lightenHex(0.95),
-                                                                                                },
-                                                                                                '&.ss__chat__actions__facet__option--selected': {
-                                                                                                    fontWeight: 'bold',
-                                                                                                },
-                                                                                            },
-                                                                                        }),
-                                                                                },
-                                                                            }, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
-                                                                                    ? facet.values.map((option) => {
-                                                                                        const rangeOption = option;
-                                                                                        const optionValue = `${rangeOption.low ?? '*'}:${rangeOption.high ?? '*'}`;
-                                                                                        if (multiselectFacets) {
-                                                                                            const isSelected = 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);
-                                                                                                    }
-                                                                                                    else {
-                                                                                                        controller.store.addFacet({
-                                                                                                            key: facet.field,
-                                                                                                            value: optionValue,
-                                                                                                        });
-                                                                                                    }
-                                                                                                }, 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: rangeOption.label })] }, optionValue));
-                                                                                        }
-                                                                                        return (_jsx(Button, { className: classnames({
-                                                                                                'ss__chat__actions__facet__option--selected': controller.store.isFacetSelected(facet.field, optionValue),
-                                                                                            }), onClick: () => {
-                                                                                                // Non-multiselect: clicking an already-selected value toggles it off.
-                                                                                                // `addFacet` is idempotent against an existing urlManager value, so without
-                                                                                                // the toggle the state wouldn't change, `hasPendingFacetChanges` would stay
-                                                                                                // false, and the params getter would fall through to `general`.
-                                                                                                if (controller.store.isFacetSelected(facet.field, optionValue)) {
-                                                                                                    controller.store.removeFacet(facet.field, optionValue);
-                                                                                                }
-                                                                                                else {
-                                                                                                    controller.store.addFacet({
-                                                                                                        key: facet.field,
-                                                                                                        value: optionValue,
-                                                                                                    });
-                                                                                                }
-                                                                                                // Force productSearch with the current filter state rather than relying
-                                                                                                // on the params getter's hasPendingFacetChanges promotion — a facet click
-                                                                                                // in the chat is unambiguously a search intent.
-                                                                                                controller.search({
-                                                                                                    data: { requestType: 'productSearch', searchFilters: controller.store.searchFilters },
-                                                                                                });
-                                                                                            }, children: rangeOption.label }, optionValue));
-                                                                                    })
-                                                                                    : facet.values.map((option) => {
-                                                                                        const valueOption = option;
-                                                                                        const optionValue = valueOption.value || valueOption.label;
-                                                                                        if (multiselectFacets) {
-                                                                                            const isSelected = 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);
-                                                                                                    }
-                                                                                                    else {
-                                                                                                        controller.store.addFacet({
-                                                                                                            key: facet.field,
-                                                                                                            value: optionValue,
-                                                                                                        });
-                                                                                                    }
-                                                                                                }, 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: valueOption.label })] }, optionValue));
-                                                                                        }
-                                                                                        return (_jsx(Button, { className: classnames({
-                                                                                                'ss__chat__actions__facet__option--selected': controller.store.isFacetSelected(facet.field, optionValue),
-                                                                                            }), onClick: () => {
-                                                                                                // Non-multiselect: clicking an already-selected value toggles it off.
-                                                                                                // `addFacet` is idempotent against an existing urlManager value, so without
-                                                                                                // the toggle the state wouldn't change, `hasPendingFacetChanges` would stay
-                                                                                                // false, and the params getter would fall through to `general`.
-                                                                                                if (controller.store.isFacetSelected(facet.field, optionValue)) {
-                                                                                                    controller.store.removeFacet(facet.field, optionValue);
-                                                                                                }
-                                                                                                else {
-                                                                                                    controller.store.addFacet({
-                                                                                                        key: facet.field,
-                                                                                                        value: optionValue,
-                                                                                                    });
-                                                                                                }
-                                                                                                // Force productSearch with the current filter state rather than relying
-                                                                                                // on the params getter's hasPendingFacetChanges promotion — a facet click
-                                                                                                // in the chat is unambiguously a search intent.
-                                                                                                controller.search({
-                                                                                                    data: { requestType: 'productSearch', searchFilters: controller.store.searchFilters },
-                                                                                                });
-                                                                                            }, children: valueOption.label }, optionValue));
-                                                                                    }) }) }, facet.field) }, idx));
-                                                                }) })] }) })), (() => {
-                                                    const activeComparisonSearchResults = shouldShowSideChat && activeMessage?.messageType === 'productComparison'
-                                                        ? activeMessage.searchResults || []
-                                                        : null;
-                                                    const showCommittedComparisons = !activeComparisonSearchResults &&
-                                                        store.currentChat?.comparisons.committed &&
-                                                        store.currentChat.comparisons.committed.length > 0 &&
-                                                        (activeMessage?.messageType === 'user' ||
-                                                            activeMessage?.messageType === 'productComparison' ||
-                                                            activeMessage?.messageType === 'productQuery');
-                                                    const visibleAttachments = store.currentChat?.attachments.attached.filter((item) => item.state === 'attached' || item.state === 'active' || item.state === 'loading' || item.state === 'error') || [];
-                                                    const productAttachments = visibleAttachments.filter((item) => item.type === 'product' &&
-                                                        item.requestType !== 'productSimilar' &&
-                                                        item.requestType !== 'productComparison');
-                                                    const imageAttachments = visibleAttachments.filter((item) => item.type === 'image');
-                                                    const comparisonItems = activeComparisonSearchResults
-                                                        ? activeComparisonSearchResults.map((result) => {
-                                                            const d = result?.display || result;
-                                                            return {
-                                                                id: result?.id,
-                                                                name: d?.mappings?.core?.name || '',
-                                                                imageUrl: d?.mappings?.core?.thumbnailImageUrl || d?.mappings?.core?.imageUrl || d?.mappings?.core?.parentImageUrl || '',
-                                                                onClick: () => {
-                                                                    controller.productQuickView(result);
-                                                                    if (isMobile)
-                                                                        setMobileProductInfoOpen(true);
-                                                                },
-                                                            };
-                                                        })
-                                                        : showCommittedComparisons
-                                                            ? (store.currentChat?.comparisons.committed || []).map((comparisonItem) => {
-                                                                const d = comparisonItem?.result?.display || comparisonItem?.result;
-                                                                return {
-                                                                    id: comparisonItem.result?.id,
-                                                                    name: d?.mappings?.core?.name || '',
-                                                                    imageUrl: d?.mappings?.core?.thumbnailImageUrl || d?.mappings?.core?.imageUrl || d?.mappings?.core?.parentImageUrl || '',
-                                                                    onClick: () => {
-                                                                        controller.productQuickView(comparisonItem.result);
-                                                                        if (isMobile)
-                                                                            setMobileProductInfoOpen(true);
-                                                                    },
-                                                                };
-                                                            })
-                                                            : [];
-                                                    const productItems = productAttachments.map((item) => {
-                                                        const remove = () => {
-                                                            store.currentChat?.attachments.remove(item.id);
-                                                            setMobileProductInfoOpen(false);
-                                                            store.currentChat?.dismissSideChat();
-                                                        };
-                                                        return {
-                                                            id: item.id,
-                                                            name: item.name || '',
-                                                            imageUrl: item.thumbnailUrl || '',
-                                                            onClick: remove,
-                                                            onRemove: remove,
-                                                        };
-                                                    });
-                                                    const imageItems = imageAttachments.map((item) => ({
-                                                        id: item.id,
-                                                        name: item.fileName || 'Image',
-                                                        imageUrl: item.base64 || item.thumbnailUrl || '',
-                                                        isLoading: item.state === 'loading',
-                                                        hasError: !!item.error,
-                                                        errorMessage: item.error?.message,
-                                                        onRemove: () => store.currentChat?.attachments.remove(item.id),
-                                                    }));
-                                                    const productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product';
-                                                    const hasImageError = imageItems.some((item) => item.hasError);
-                                                    const imageTitle = imageItems.length > 0 && !hasImageError ? 'Find products similar to this image:' : '';
-                                                    return (_jsxs(_Fragment, { children: [comparisonItems.length > 0 && (_jsx(ChatAttachmentContext, { ...subProps.attachmentContext, title: 'Compare these products', items: comparisonItems, onClose: () => {
-                                                                    store.currentChat?.comparisons.resetCommitted();
-                                                                    store.currentChat?.dismissSideChat();
-                                                                } })), productItems.length > 0 && (_jsx(ChatAttachmentContext, { ...subProps.attachmentContext, title: productTitle, items: productItems, onClose: () => {
-                                                                    productAttachments.forEach((item) => store.currentChat?.attachments.remove(item.id));
-                                                                    setMobileProductInfoOpen(false);
-                                                                    store.currentChat?.dismissSideChat();
-                                                                } })), imageItems.length > 0 && _jsx(ChatAttachmentContext, { ...subProps.attachmentContext, title: imageTitle, items: imageItems })] }));
-                                                })(), (() => {
-                                                    const drift = store.currentChat?.topicDrift;
-                                                    if (!drift)
-                                                        return null;
-                                                    // recommendedAction is the prescription; driftType is the diagnosis.
-                                                    // Hide the banner when the backend says to keep flowing, or when no drift was detected.
-                                                    if (drift.recommendedAction === 'CONTINUE' || drift.driftType === 'NO_DRIFT')
-                                                        return null;
-                                                    const isScopeRedirect = drift.recommendedAction === 'SCOPE_REDIRECT';
-                                                    const primaryText = isScopeRedirect ? "I'm here to help with shopping" : 'Looking for something new?';
-                                                    const secondaryText = isScopeRedirect
-                                                        ? 'Try asking about products, comparisons, or recommendations'
-                                                        : 'Start a fresh session for better assistance, or keep going in this one?';
-                                                    const buttonText = isScopeRedirect ? '' : 'New Session';
-                                                    return (_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: primaryText }), _jsx("span", { children: secondaryText })] }), buttonText && (_jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
-                                                                    if (isScopeRedirect) {
-                                                                        store.currentChat?.dismissTopicDrift();
-                                                                        return;
-                                                                    }
-                                                                    // Capture image attachments from the current chat before handleTopicDrift /
-                                                                    // createChat tear down the conversation — an imageSearch that drifted needs
-                                                                    // the same image attached to the carried-over message in the new session,
-                                                                    // otherwise params would fall back to a `general` request without the image.
-                                                                    const previousImageAttachments = (store.currentChat?.attachments.attached || [])
-                                                                        .filter((item) => item.type === 'image' && item.state !== 'error')
-                                                                        .map((item) => {
-                                                                        const img = item;
-                                                                        return {
-                                                                            type: 'image',
-                                                                            base64: img.base64,
-                                                                            fileName: img.fileName,
-                                                                            imageId: img.imageId,
-                                                                            imageUrl: img.imageUrl,
-                                                                            thumbnailUrl: img.thumbnailUrl,
-                                                                            // Already uploaded — skip the 'loading' default state.
-                                                                            state: 'attached',
-                                                                        };
-                                                                    });
-                                                                    const messageText = store.currentChat?.handleTopicDrift();
-                                                                    if (messageText) {
-                                                                        controller.store.createChat();
-                                                                        previousImageAttachments.forEach((cfg) => {
-                                                                            controller.store.currentChat?.attachments.add(cfg);
-                                                                        });
-                                                                        controller.search({ data: { message: messageText } });
-                                                                    }
-                                                                }, children: buttonText })), _jsx("span", { onClick: () => {
-                                                                    store.currentChat?.dismissTopicDrift();
-                                                                }, children: _jsx(Icon, { icon: "close-thin", size: "14px", className: 'ss__chat__topic-drift__icon--close' }) })] }));
-                                                })(), _jsxs("div", { className: 'ss__chat__input', children: [_jsxs("div", { className: 'ss__chat__input__input', children: [_jsx("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || store.currentChat?.sessionLimitReached, placeholder: (() => {
-                                                                        const comparedCount = store.currentChat?.comparisons.compared.length || 0;
-                                                                        const committedCount = store.currentChat?.comparisons.committed.length || 0;
-                                                                        const attached = store.currentChat?.attachments.attached.filter((item) => item.state === 'attached' || item.state === 'active') || [];
-                                                                        const attachedProducts = attached.filter((item) => item.type === 'product');
-                                                                        const attachedImages = attached.filter((item) => item.type === 'image' && !item.error);
-                                                                        if (attachedProducts.length === 1) {
-                                                                            return 'Ask about this product...';
-                                                                        }
-                                                                        if (comparedCount > 1 || attachedProducts.length > 1) {
-                                                                            return 'What would you like to compare?';
-                                                                        }
-                                                                        if (committedCount > 0) {
-                                                                            return 'Ask about the compared products...';
-                                                                        }
-                                                                        if (attachedImages.length > 0) {
-                                                                            return 'Ask about this image...';
-                                                                        }
-                                                                        if (comparedCount === 1) {
-                                                                            return 'Add another product to compare...';
-                                                                        }
-                                                                        return 'Type your message...';
-                                                                    })(), onInput: (e) => controller.handlers.input.input(e), onKeyDown: (e) => {
-                                                                        controller.handlers.input.enterKey(e);
-                                                                        if (e.keyCode === 13 && isMobile && mobileProductInfoOpen) {
-                                                                            setMobileProductInfoOpen(false);
-                                                                        }
-                                                                    }, value: controller.store.inputValue }), store.features.imageSearch.enabled && (_jsxs(_Fragment, { children: [_jsx(Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || store.currentChat?.sessionLimitReached, onClick: () => fileInputRef.current?.click(), icon: { icon: 'image', title: 'Upload Image' } }), _jsx("input", { ref: fileInputRef, onChange: async (e) => {
-                                                                                await controller.upload(e.target.files);
-                                                                                // reset value
-                                                                                e.target.value = '';
-                                                                            }, 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) || messageEmpty;
-                                                                return (_jsx(Button, { className: "ss__chat__send-button", icon: { icon: 'send', title: 'Send Message' }, disabled: sendDisabled, onClick: () => {
-                                                                        if (sendDisabled)
-                                                                            return;
-                                                                        controller.search();
-                                                                        if (isMobile && mobileProductInfoOpen) {
-                                                                            setMobileProductInfoOpen(false);
-                                                                        }
-                                                                    } }));
-                                                            })() })] }), _jsx("div", { className: 'ss__chat__disclaimer', children: _jsxs("i", { children: ["Powered by Athos Commerce. AI-powered assistant. It sometimes make mistakes. Avoid sharing personal data.", ' ', _jsx("a", { href: "https://athoscommerce.com/legal/privacy-policy/", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" })] }) }), isDraggingFile && (_jsxs("div", { className: "ss__chat__content__footer__drop-overlay", children: [_jsx(Icon, { icon: "image", size: "24px" }), _jsx("span", { children: "Drop image to upload" })] }))] })) : (_jsxs("div", { className: 'ss__chat__expired', children: [_jsx("div", { className: 'ss__chat__expired__message', children: "This chat is expired. Please start a new chat." }), _jsx(Button, { className: 'ss__chat__expired__button', onClick: () => {
-                                                        controller.store.createChat();
-                                                    }, children: "New Session" })] }))] })] })) : null] }), _jsx(Overlay, { style: { zIndex: 1001 }, color: "transparent", active: store.open, onClick: () => controller.handlers.button.click() })] }) }));
-});