@athoscommerce/snap-preact 1.7.1-beta.121 → 1.8.0

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

@@ -1,939 +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',
-        hideMessageTypeIndicatorText: false,
-        buttonBelowMessage: false,
-    };
-    let props = mergeProps('chat', globalTheme, defaultProps, properties);
-    const { className, internalClassName, controller, logo, title, subtitle, avatar, offset, multiselectFacets, disableBubbleSuggestedQuestions, primaryColorBg, primaryColorFg, primaryAccentColorBg, primaryAccentColorFg, secondaryAccentColorBg, secondaryAccentColorFg, position, hideMessageTypeIndicatorText, buttonBelowMessage, 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 isValidImageUrl = (value) => {
-        try {
-            const { protocol } = new URL(value);
-            return protocol === 'http:' || protocol === 'https:' || protocol === 'data:';
-        }
-        catch {
-            return false;
-        }
-    };
-    // A single-character avatar renders as a capitalized letter; a longer value renders
-    // as an image when it's a valid image URL. Anything else renders no avatar.
-    const avatarCharacter = avatar && avatar.length === 1 ? avatar.toUpperCase() : undefined;
-    const avatarImage = avatar && avatar.length > 1 && isValidImageUrl(avatar) ? avatar : undefined;
-    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,
-            hideMessageTypeIndicatorText,
-        },
-        messageText: {
-            disableStyles,
-            theme: props.theme,
-            treePath,
-            primaryColor: colorPrimary,
-            primaryColorText: colorPrimaryText,
-            primaryAccentColor: colorPrimaryAccent,
-            primaryAccentColorText: colorPrimaryAccentText,
-            buttonBelowMessage,
-        },
-        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", disabled: store.loading || store.blocked, 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 || store.loading || store.blocked, 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, {});
-    }
-    // Dismiss the secondary panel and clear any product attachments tied to the side-chat
-    // (discuss product flow), while preserving productSimilar/productComparison attachments.
-    const dismissSideChat = () => {
-        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();
-    };
-    const { swipeOffset, swipeAnimating, swipeHandlers } = useChatGestures({
-        panelRef: secondaryRef,
-        shouldShowSideChat: !!shouldShowSideChat,
-        activeMessageId: activeMessage?.id,
-        onDismiss: 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) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
-                                    controller.openChat(question);
-                                }, children: question }, question))) })), _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: '',
-                                                    }[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: '',
-                                                    }[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: () => 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', 
-                            // On mobile, interacting with the primary chat (header or anywhere within)
-                            // dismisses the secondary panel. Capture phase so it fires even when an
-                            // inner control stops propagation.
-                            onClickCapture: isMobile && shouldShowSideChat ? () => dismissSideChat() : undefined, children: [_jsxs("div", { className: 'ss__chat__header', children: [_jsxs("div", { className: "ss__chat__header__title", children: [logo ? _jsx(Image, { className: "ss__chat__header__title__logo", src: logo, alt: title || 'Chat 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.loading || store.blocked, 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() })] })] }), _jsxs("div", { className: "ss__chat__content", children: [(() => {
-                                            const feedbackAfterMessages = controller.config.settings?.feedbackAfterMessages;
-                                            const systemMessages = (store.currentChat?.chat || []).filter((msg) => msg.messageType !== 'user' && msg.messageType !== 'productQuery');
-                                            const currentRating = store.currentChat?.feedback.rating;
-                                            const hasRated = !!currentRating;
-                                            const shouldShowFeedback = feedbackAfterMessages &&
-                                                systemMessages.length >= feedbackAfterMessages &&
-                                                !store.currentChat?.feedback.dismissed &&
-                                                (!hasRated || store.currentChat?.feedback.justGiven);
-                                            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.feedback.dismissed = true;
-                                                                store.currentChat.save();
-                                                            }
-                                                        }, children: _jsx(Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
-                                        })(), _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) => {
-                                                    const showAvatar = !!(avatarCharacter || avatarImage) && chatItem.messageType !== 'user';
-                                                    const messageContent = {
-                                                        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;
-                                                    return (_jsxs("div", { className: classnames(`ss__chat__message`, `ss__chat__message--${chatItem.messageType}`, {
-                                                            'ss__chat__message--with-avatar': showAvatar,
-                                                        }), children: [showAvatar && (_jsx("div", { className: classnames('ss__chat__message__avatar', {
-                                                                    'ss__chat__message__avatar--image': !!avatarImage,
-                                                                }), "aria-hidden": "true", children: avatarImage ? _jsx(Image, { src: avatarImage, alt: "" }) : avatarCharacter })), showAvatar ? _jsx("div", { className: "ss__chat__message__content", children: messageContent }) : messageContent] }, chatItem.id));
-                                                }), _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() })] }) }));
-});