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

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

@@ -80,36 +80,49 @@ var ChatInspirationResultMessage_1 = require("../../Molecules/ChatInspirationRes
 var ChatProductComparisonMessage_1 = require("../../Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage");
 var ChatProductQueryMessage_1 = require("../../Molecules/ChatProductQueryMessage/ChatProductQueryMessage");
 var defaultStyles = function (_a) {
-    var mobile = _a.mobile, offset = _a.offset, hasSideChat = _a.hasSideChat, footerHeight = _a.footerHeight;
-    var colorPrimary = '#253B80';
+    var _b, _c, _d;
+    var mobile = _a.mobile, offset = _a.offset, hasSideChat = _a.hasSideChat, footerHeight = _a.footerHeight, primaryColorBg = _a.primaryColorBg, primaryColorFg = _a.primaryColorFg, primaryAccentColorBg = _a.primaryAccentColorBg, primaryAccentColorFg = _a.primaryAccentColorFg, secondaryAccentColorBg = _a.secondaryAccentColorBg, secondaryAccentColorFg = _a.secondaryAccentColorFg, position = _a.position;
+    var isRight = position === 'right';
+    // horizontal anchor for the root + bubble + suggested questions
+    var horizontalAnchor = isRight ? 'right' : 'left';
+    var colorPrimary = primaryColorBg;
+    var colorPrimaryText = primaryColorFg;
+    var colorPrimaryHover = new utilities_1.Colour(primaryColorBg).darkenHex();
+    var colorPrimaryAccent = primaryAccentColorBg;
+    var colorPrimaryAccentText = primaryAccentColorFg;
+    var colorPrimaryAccentHover = new utilities_1.Colour(primaryAccentColorBg).darkenHex();
+    var colorSecondaryAccent = secondaryAccentColorBg;
+    var colorSecondaryAccentText = secondaryAccentColorFg;
+    var colorSecondaryAccentHover = new utilities_1.Colour(secondaryAccentColorBg).darkenHex();
     var offsetValue = offset !== undefined ? (typeof offset === 'number' ? "".concat(offset, "px") : offset) : undefined;
-    return (0, react_1.css)({
-        position: 'fixed',
-        left: '20px',
-        bottom: '20px',
-        zIndex: 1002,
-        color: '#333',
-        '@keyframes ss-chat-slide-up': {
+    return (0, react_1.css)((_b = {
+            position: 'fixed'
+        },
+        _b[horizontalAnchor] = '20px',
+        _b.bottom = '20px',
+        _b.zIndex = 1002,
+        _b.color = '#333',
+        _b['@keyframes ss-chat-slide-up'] = {
             from: { transform: 'translateY(100%)' },
             to: { transform: 'translateY(0)' },
         },
-        '.ss__chat__primary': __assign(__assign({}, (mobile
+        _b['.ss__chat__primary'] = __assign(__assign({}, (mobile
             ? { width: '100%', height: '100%' }
             : hasSideChat
                 ? { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh' }
-                : { width: 600, maxWidth: 'calc(100vw - 60px)', height: '70vh' })), { display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', overflow: 'hidden', order: 1, '.ss__chat__header__title': {
+                : { width: 600, maxWidth: 'calc(100vw - 60px)', height: '70vh' })), { display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', overflow: 'hidden', order: isRight ? 2 : 1, '.ss__chat__header__title': {
                 gap: '22px',
             }, '.ss__chat__messages': {
                 padding: '1em',
             } }),
-        '.ss__chat__secondary': __assign(__assign(__assign(__assign(__assign(__assign({}, (mobile
+        _b['.ss__chat__secondary'] = __assign(__assign(__assign(__assign(__assign(__assign({}, (mobile
             ? {
                 width: '100%',
                 maxWidth: '100%',
                 height: "calc(100% - 70px".concat(footerHeight > 0 ? " - ".concat(footerHeight, "px") : '', ")"),
                 maxHeight: "calc(100% - 70px".concat(footerHeight > 0 ? " - ".concat(footerHeight, "px") : '', ")"),
             }
-            : { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh', maxHeight: '70vh' })), { display: 'flex', flexDirection: 'column', overflow: 'hidden', order: 2 }), (mobile
+            : { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh', maxHeight: '70vh' })), { display: 'flex', flexDirection: 'column', overflow: 'hidden', order: isRight ? 1 : 2 }), (mobile
             ? {
                 position: 'absolute',
                 bottom: footerHeight > 0 ? footerHeight : 0,
@@ -159,55 +172,57 @@ var defaultStyles = function (_a) {
             }, '.ss__chat__messages': {
                 background: '#fff!important',
             } }),
-        '.ss__button': {
+        _b['.ss__button'] = {
             border: 'none',
             background: 'none',
             color: 'inherit',
             '&:not(.ss__button--disabled):hover': {
-                background: '#dfeaf6',
+                background: new utilities_1.Colour(colorPrimary).lightenHex(0.85),
             },
             svg: {
                 fill: colorPrimary,
                 stroke: colorPrimary,
             },
         },
-        '.ss__chat__bubble': {
-            position: mobile ? 'fixed' : 'absolute',
-            bottom: mobile ? '20px' : 0,
-            left: mobile ? '20px' : 0,
-            width: '60px',
-            height: '60px',
-            borderRadius: '50%',
-            background: colorPrimary,
-            color: 'white',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            fontSize: '24px',
-            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-            zIndex: 10,
-            '&:hover': {
-                background: '#0052a3',
+        _b['.ss__chat__bubble'] = (_c = {
+                position: mobile ? 'fixed' : 'absolute',
+                bottom: mobile ? '20px' : 0
+            },
+            _c[horizontalAnchor] = mobile ? '20px' : 0,
+            _c.width = '60px',
+            _c.height = '60px',
+            _c.borderRadius = '50%',
+            _c.background = colorPrimary,
+            _c.color = colorPrimaryText,
+            _c.display = 'flex',
+            _c.alignItems = 'center',
+            _c.justifyContent = 'center',
+            _c.cursor = 'pointer',
+            _c.fontSize = '24px',
+            _c.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)',
+            _c.zIndex = 10,
+            _c['&:hover'] = {
+                background: colorPrimaryHover,
                 transform: 'scale(1.05)',
             },
-            '.ss__icon': {
+            _c['.ss__icon'] = {
                 height: '33px',
                 width: '33px',
-                fill: '#fff',
-                stroke: '#fff',
+                fill: colorPrimaryText,
+                stroke: colorPrimaryText,
             },
-        },
-        '.ss__chat__suggested-questions': {
-            position: mobile ? 'fixed' : 'absolute',
-            bottom: mobile ? '90px' : '70px',
-            left: mobile ? '20px' : 0,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '8px',
-            width: '250px',
-            zIndex: 10,
-            '.ss__chat__suggested-questions__item': {
+            _c),
+        _b['.ss__chat__suggested-questions'] = (_d = {
+                position: mobile ? 'fixed' : 'absolute',
+                bottom: mobile ? '90px' : '70px'
+            },
+            _d[horizontalAnchor] = mobile ? '20px' : 0,
+            _d.display = 'flex',
+            _d.flexDirection = 'column',
+            _d.gap = '8px',
+            _d.width = '250px',
+            _d.zIndex = 10,
+            _d['.ss__chat__suggested-questions__item'] = {
                 background: '#fff',
                 borderRadius: '12px',
                 padding: '12px 16px',
@@ -220,13 +235,13 @@ var defaultStyles = function (_a) {
                     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
                 },
             },
-        },
-        '&.ss__chat--minimized': {
+            _d),
+        _b['&.ss__chat--minimized'] = {
             width: '60px',
             height: '60px',
             minHeight: '60px',
         },
-        '&.ss__chat--open': __assign(__assign({ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 0 : '12px' }, (mobile
+        _b['&.ss__chat--open'] = __assign(__assign({ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 0 : '12px' }, (mobile
             ? {
                 top: offsetValue || 0,
                 left: 0,
@@ -236,20 +251,23 @@ var defaultStyles = function (_a) {
                 height: offsetValue ? "calc(100% - ".concat(offsetValue, ")") : '100%',
             }
             : {
-                width: hasSideChat ? 'calc(100vw - 60px)' : 'auto',
+                // Hug the content width — two 600px panels + 12px gap — so the
+                // container stays anchored to its side instead of stretching to
+                // the opposite viewport edge when the side chat opens.
+                width: hasSideChat ? 'min(calc(100vw - 60px), 1212px)' : 'auto',
                 maxWidth: 'calc(100vw - 60px)',
                 maxHeight: 'calc(100vh - 40px)',
             })), { '.ss__chat__bubble': {
                 display: 'none',
             } }),
-        '.ss__chat__header': {
+        _b['.ss__chat__header'] = {
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
             fontSize: '16px',
             position: 'relative',
             padding: '10px 15px',
-            color: '#fff',
+            color: colorPrimaryText,
             background: colorPrimary,
             borderTopLeftRadius: mobile ? 0 : '12px',
             borderTopRightRadius: mobile ? 0 : '12px',
@@ -283,8 +301,8 @@ var defaultStyles = function (_a) {
                         backgroundColor: 'transparent',
                     },
                     svg: {
-                        fill: '#fff',
-                        stroke: '#fff',
+                        fill: colorPrimaryText,
+                        stroke: colorPrimaryText,
                     },
                 },
             },
@@ -339,6 +357,8 @@ var defaultStyles = function (_a) {
                     display: 'flex',
                     flexDirection: 'column-reverse',
                     gap: 5,
+                    maxHeight: '300px',
+                    overflowY: 'auto',
                     '.ss__chat__history__chats__chat': {
                         '.ss__button': {
                             borderRadius: '12px',
@@ -357,21 +377,21 @@ var defaultStyles = function (_a) {
                 },
             },
         },
-        '.ss__chat__session-feedback': {
+        _b['.ss__chat__session-feedback'] = {
             display: 'flex',
             alignItems: 'center',
             gap: '10px',
             padding: '8px 15px',
-            background: '#40528e',
-            color: '#fff',
+            background: new utilities_1.Colour(colorPrimary).darkenHex(0.1),
+            color: colorPrimaryText,
             fontSize: '14px',
             '.ss__chat__session-feedback__icon': {
                 flex: '0 0 auto',
                 display: 'flex',
                 alignItems: 'center',
                 svg: {
-                    fill: '#fff',
-                    stroke: '#fff',
+                    fill: colorPrimaryText,
+                    stroke: colorPrimaryText,
                 },
             },
             '.ss__chat__session-feedback__label': {
@@ -380,25 +400,32 @@ var defaultStyles = function (_a) {
             },
             '.ss__chat__session-feedback__actions': {
                 display: 'flex',
-                gap: '10px',
+                gap: '6px',
                 alignItems: 'center',
                 '> span': {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                },
-                svg: {
                     cursor: 'pointer',
-                    fill: '#fff',
-                    stroke: '#fff',
-                    opacity: 0.7,
+                    opacity: 0.85,
+                    padding: '4px',
+                    borderRadius: '4px',
+                    border: '1px solid transparent',
+                    transition: 'opacity 0.15s ease, border-color 0.15s ease',
                     '&:hover': {
                         opacity: 1,
                     },
                 },
-                '&.ss__chat__session-feedback__actions--rated svg': {
+                svg: {
+                    fill: colorPrimaryText,
+                    stroke: colorPrimaryText,
+                },
+                '&.ss__chat__session-feedback__actions--rated > span': {
                     opacity: 1,
                     cursor: 'default',
+                    '&:hover': {
+                        borderColor: 'transparent',
+                    },
                 },
             },
             '.ss__chat__session-feedback__close': {
@@ -406,29 +433,42 @@ var defaultStyles = function (_a) {
                 display: 'flex',
                 alignItems: 'center',
                 cursor: 'pointer',
+                opacity: 0.85,
+                transition: 'opacity 0.15s ease',
+                '&:hover': {
+                    opacity: 1,
+                },
                 svg: {
-                    fill: '#fff',
-                    stroke: '#fff',
-                    opacity: 0.7,
-                    '&:hover': {
-                        opacity: 1,
-                    },
+                    fill: colorPrimaryText,
+                    stroke: colorPrimaryText,
                 },
             },
         },
-        '.ss__chat__content': {
+        _b['.ss__chat__content'] = {
             background: '#fff',
             maxHeight: mobile ? undefined : '90vh',
             overflow: 'hidden',
             display: 'flex',
             flexDirection: 'column',
-            border: '1px solid #0066cc',
+            border: "1px solid ".concat(colorPrimary),
             borderTop: 'none',
             marginTop: '-1px',
             borderBottomRightRadius: mobile ? 0 : '12px',
             borderBottomLeftRadius: mobile ? 0 : '12px',
             flexGrow: 1,
+            position: 'relative',
             '.ss__chat__content__header': {
+                // In overlay mode (only applied when messages overflow), the comparisons
+                // tray floats over the messages so toggling it doesn't shift the layout
+                // or push the latest message out of view. When messages don't overflow,
+                // the tray stays in flow so older messages remain reachable above it.
+                '&.ss__chat__content__header--overlay': {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 20,
+                },
                 // '.ss__chat__attachments': {
                 // 	'.ss__chat__attachment': {
                 // 		borderRadius: 0,
@@ -440,7 +480,7 @@ var defaultStyles = function (_a) {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: '1em',
-                    background: '#f4f4ff',
+                    background: new utilities_1.Colour(colorPrimary).lightenHex(0.95),
                     padding: '1em',
                     '.ss__chat__content__header__comparisons__header': {
                         display: 'flex',
@@ -455,7 +495,7 @@ var defaultStyles = function (_a) {
                                 background: colorPrimary,
                                 borderRadius: '50%',
                                 padding: '5px',
-                                fill: '#fff',
+                                fill: colorPrimaryText,
                                 height: '25px',
                                 width: '25px',
                             },
@@ -528,11 +568,11 @@ var defaultStyles = function (_a) {
                                 borderRadius: '1em',
                                 padding: '0.5em 1em',
                                 background: colorPrimary,
-                                color: '#fff',
+                                color: colorPrimaryText,
                                 textAlign: 'center',
                                 svg: {
-                                    fill: '#fff',
-                                    stroke: '#fff',
+                                    fill: colorPrimaryText,
+                                    stroke: colorPrimaryText,
                                 },
                             },
                         },
@@ -541,6 +581,7 @@ var defaultStyles = function (_a) {
             },
             '.ss__chat__messages': {
                 flex: '1 1 auto',
+                overflowY: 'auto',
                 overscrollBehavior: 'contain',
                 margin: 0,
                 maxHeight: '100%',
@@ -559,7 +600,7 @@ var defaultStyles = function (_a) {
                     width: 'fit-content',
                     padding: '6px 16px',
                     background: colorPrimary,
-                    color: '#fff',
+                    color: colorPrimaryText,
                     borderRadius: '999px',
                     fontSize: '13px',
                     fontWeight: 500,
@@ -567,11 +608,11 @@ var defaultStyles = function (_a) {
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
                     zIndex: 5,
                     '&:hover': {
-                        background: '#1a2a5c',
+                        background: colorPrimaryHover,
                     },
                     svg: {
-                        fill: '#fff',
-                        stroke: '#fff',
+                        fill: colorPrimaryText,
+                        stroke: colorPrimaryText,
                     },
                 },
                 '.ss__chat__message': {
@@ -600,7 +641,7 @@ var defaultStyles = function (_a) {
                 '.ss__chat__welcome': {
                     display: 'flex',
                     flexDirection: 'column',
-                    height: '100%',
+                    minHeight: '100%',
                     '.ss__chat__welcome__message': {
                         fontSize: '15px',
                         lineHeight: 1.5,
@@ -623,8 +664,8 @@ var defaultStyles = function (_a) {
                     flexDirection: 'column',
                     gap: '6px',
                     padding: '8px 10px',
-                    background: '#f4f4ff',
-                    border: '1px solid #e3e3f5',
+                    background: new utilities_1.Colour(colorPrimary).lightenHex(0.95),
+                    border: "1px solid ".concat(new utilities_1.Colour(colorPrimary).lightenHex(0.85)),
                     borderRadius: '8px',
                 },
                 '.ss__chat__actions--title': {
@@ -644,7 +685,7 @@ var defaultStyles = function (_a) {
                         fontSize: '14px',
                         color: '#333',
                         '&:hover': {
-                            background: '#f9f9ff',
+                            background: new utilities_1.Colour(colorPrimary).lightenHex(0.97),
                         },
                     },
                 },
@@ -744,8 +785,8 @@ var defaultStyles = function (_a) {
                     visibility: 'visible',
                 },
                 '.ss__button': {
-                    background: '#253B80',
-                    color: '#fff',
+                    background: colorPrimary,
+                    color: colorPrimaryText,
                     border: 'none',
                     borderRadius: '999px',
                     padding: '2px 10px',
@@ -753,7 +794,7 @@ var defaultStyles = function (_a) {
                     lineHeight: '1.4',
                     cursor: 'pointer',
                     '&:not(.ss__button--disabled):hover': {
-                        background: '#1a2a5c',
+                        background: colorPrimaryHover,
                     },
                     '&.ss__button--disabled': {
                         opacity: 0.5,
@@ -776,8 +817,8 @@ var defaultStyles = function (_a) {
                 flexDirection: 'column',
                 gap: '6px',
                 padding: '8px 10px',
-                background: '#f4f4ff',
-                border: '1px solid #e3e3f5',
+                background: new utilities_1.Colour(colorPrimary).lightenHex(0.95),
+                border: "1px solid ".concat(new utilities_1.Colour(colorPrimary).lightenHex(0.85)),
                 borderRadius: '8px',
                 '.ss__chat__attachment-context__label': {
                     fontSize: '14px',
@@ -907,19 +948,36 @@ var defaultStyles = function (_a) {
                     },
                 },
             },
-            '.ss__chat__content__footer': __assign({ padding: '1em', display: 'flex', flexDirection: 'column', gap: '8px', flexShrink: 0 }, (mobile
+            '.ss__chat__content__footer': __assign(__assign({ padding: '1em', display: 'flex', flexDirection: 'column', gap: '8px', flexShrink: 0, position: 'relative' }, (mobile
                 ? {
-                    position: 'relative',
                     zIndex: 11,
                     background: '#fff',
                 }
-                : {})),
+                : {})), { '.ss__chat__content__footer__drop-overlay': {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '8px',
+                    borderRadius: '6px',
+                    border: "2px dashed ".concat(colorPrimary),
+                    backgroundColor: new utilities_1.Colour(colorPrimary).lightenHex(0.9),
+                    color: colorPrimary,
+                    fontWeight: 'bold',
+                    pointerEvents: 'none',
+                    zIndex: 12,
+                    svg: {
+                        fill: colorPrimary,
+                        stroke: colorPrimary,
+                    },
+                } }),
             '.ss__chat__topic-drift': {
                 display: 'flex',
                 alignItems: 'center',
                 gap: '12px',
                 padding: '12px 16px',
-                border: '1px solid #93C5FD',
+                border: "1px solid ".concat(new utilities_1.Colour(colorPrimary).lightenHex(0.6)),
                 borderRadius: '8px',
                 backgroundColor: '#fff',
                 '.ss__chat__topic-drift__icon--info': {
@@ -949,7 +1007,7 @@ var defaultStyles = function (_a) {
                 '.ss__chat__topic-drift__button': {
                     flex: '0 0 auto',
                     backgroundColor: colorPrimary,
-                    color: '#fff',
+                    color: colorPrimaryText,
                     borderRadius: '6px',
                     padding: '8px 14px',
                     fontSize: '13px',
@@ -957,7 +1015,7 @@ var defaultStyles = function (_a) {
                     cursor: 'pointer',
                     whiteSpace: 'nowrap',
                     '&:not(.ss__button--disabled):hover': {
-                        background: '#1a2a5c',
+                        background: colorPrimaryHover,
                     },
                 },
                 '.ss__chat__topic-drift__icon--close': {
@@ -995,7 +1053,7 @@ var defaultStyles = function (_a) {
                         },
                         '&:focus': {
                             outline: 'none',
-                            borderColor: '#0066cc',
+                            borderColor: colorPrimary,
                         },
                     },
                     '.ss__button': {
@@ -1011,18 +1069,20 @@ var defaultStyles = function (_a) {
                 '.ss__chat__input__actions': {
                     '.ss__button': {
                         backgroundColor: colorPrimary,
+                        color: colorPrimaryText,
                         borderRadius: '50%',
                         height: '3em',
                         width: '3em',
                         cursor: 'pointer',
                         justifyContent: 'center',
+                        boxSizing: 'border-box',
                         '&:disabled': {
                             opacity: 0.5,
                             cursor: 'not-allowed',
                         },
                         svg: {
-                            fill: '#fff',
-                            stroke: '#fff',
+                            fill: colorPrimaryText,
+                            stroke: colorPrimaryText,
                         },
                     },
                 },
@@ -1033,11 +1093,60 @@ var defaultStyles = function (_a) {
                 textAlign: 'center',
                 flexShrink: 0,
             },
+            '.ss__chat__result__image__icons__icon--cart': {
+                backgroundColor: "".concat(colorPrimaryAccent, " !important"),
+                svg: {
+                    fill: "".concat(colorPrimaryAccentText, " !important"),
+                    stroke: "".concat(colorPrimaryAccentText, " !important"),
+                },
+            },
+            '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
+                background: "".concat(colorPrimaryAccent, " !important"),
+                color: "".concat(colorPrimaryAccentText, " !important"),
+                '&:not(.ss__button--disabled):hover': {
+                    background: "".concat(colorPrimaryAccentHover, " !important"),
+                },
+            },
+            // Secondary accent — applied to the productQuery button (ChatResult inquire icon)
+            // and the "Show similar" button (ChatProductQueryMessage). Both elements live in
+            // child components but their styling overrides are intentionally scoped here so
+            // the Chat-level theme can drive them.
+            '.ss__chat__result__image__icons__icon--inquire': {
+                backgroundColor: "".concat(colorSecondaryAccent, " !important"),
+                svg: {
+                    fill: "".concat(colorSecondaryAccentText, " !important"),
+                    stroke: "".concat(colorSecondaryAccentText, " !important"),
+                },
+            },
+            '.ss__chat-product-query-message__header__product__actions__show-similar .ss__button, .ss__chat-product-query-message__header__product__actions__discuss-product .ss__button': {
+                background: "".concat(colorSecondaryAccent, " !important"),
+                color: "".concat(colorSecondaryAccentText, " !important"),
+                border: "1px solid ".concat(colorSecondaryAccentText, " !important"),
+                '&:not(.ss__button--disabled):hover': {
+                    background: "".concat(colorSecondaryAccentHover, " !important"),
+                },
+            },
+            '.ss__chat__expired': {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '12px',
+                padding: '16px',
+                textAlign: 'center',
+                color: '#6A7282',
+                '.ss__chat__expired__message': {
+                    fontSize: '14px',
+                },
+                '.ss__chat__expired__button': {
+                    alignSelf: 'center',
+                },
+            },
         },
-    });
+        _b));
 };
 exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var globalTheme = (0, providers_1.useTheme)();
     var globalTreePath = (0, providers_1.useTreePath)();
     var isMobile = (0, __1.useMediaQuery)('(max-width: 767px)');
@@ -1045,11 +1154,26 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
         logo: 'https://cdn.athoscommerce.net/snap/images/Athos%20Commerce_Icon_white.svg',
         title: 'Athos Conversational Assistant',
-        subtitle: 'Ready to assist you',
+        subtitle: 'Your Guided Discovery Expert',
         multiselectFacets: true,
+        disableBubbleSuggestedQuestions: false,
+        primaryColorBg: '#253B80',
+        primaryColorFg: '#fff',
+        primaryAccentColorBg: '#feeeae',
+        primaryAccentColorFg: '#000000',
+        secondaryAccentColorBg: '#000000',
+        secondaryAccentColorFg: '#ffffff',
+        position: 'right',
     };
     var props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
-    var className = props.className, internalClassName = props.internalClassName, controller = props.controller, logo = props.logo, title = props.title, subtitle = props.subtitle, offset = props.offset, multiselectFacets = props.multiselectFacets;
+    var className = props.className, internalClassName = props.internalClassName, controller = props.controller, logo = props.logo, title = props.title, subtitle = props.subtitle, offset = props.offset, multiselectFacets = props.multiselectFacets, disableBubbleSuggestedQuestions = props.disableBubbleSuggestedQuestions, primaryColorBg = props.primaryColorBg, primaryColorFg = props.primaryColorFg, primaryAccentColorBg = props.primaryAccentColorBg, primaryAccentColorFg = props.primaryAccentColorFg, secondaryAccentColorBg = props.secondaryAccentColorBg, secondaryAccentColorFg = props.secondaryAccentColorFg, position = props.position;
+    var colorPrimary = primaryColorBg;
+    var colorPrimaryText = primaryColorFg;
+    var colorPrimaryAccent = primaryAccentColorBg;
+    var colorPrimaryAccentText = primaryAccentColorFg;
+    var colorSecondaryAccent = secondaryAccentColorBg;
+    var colorSecondaryAccentText = secondaryAccentColorFg;
+    var chatPosition = position === 'right' ? 'right' : 'left';
     var store = controller.store;
     var themeDefaults = {
         components: {},
@@ -1060,26 +1184,39 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
     var fileInputRef = (0, hooks_1.useRef)(null);
     var messagesEndRef = (0, hooks_1.useRef)(null);
     var messagesContainerRef = (0, hooks_1.useRef)(null);
+    var headerRef = (0, hooks_1.useRef)(null);
     var footerRef = (0, hooks_1.useRef)(null);
+    var chatRef = (0, hooks_1.useRef)(null);
     // Swipe-to-dismiss state for mobile secondary panel
     var secondaryRef = (0, hooks_1.useRef)(null);
     var swipeStartY = (0, hooks_1.useRef)(0);
     var swipeStartTime = (0, hooks_1.useRef)(0);
     var swipeActive = (0, hooks_1.useRef)(false);
     var swipeOffsetRef = (0, hooks_1.useRef)(0);
-    var _x = (0, hooks_1.useState)(0), swipeOffset = _x[0], setSwipeOffsetRaw = _x[1];
-    var _y = (0, hooks_1.useState)(false), swipeAnimating = _y[0], setSwipeAnimating = _y[1];
-    var _z = (0, hooks_1.useState)(false), mobileProductInfoOpen = _z[0], setMobileProductInfoOpen = _z[1];
-    var _0 = (0, hooks_1.useState)(0), footerHeight = _0[0], setFooterHeight = _0[1];
-    var _1 = (0, hooks_1.useState)(false), showNewMessages = _1[0], setShowNewMessages = _1[1];
+    var _u = (0, hooks_1.useState)(0), swipeOffset = _u[0], setSwipeOffsetRaw = _u[1];
+    var _v = (0, hooks_1.useState)(false), swipeAnimating = _v[0], setSwipeAnimating = _v[1];
+    var _w = (0, hooks_1.useState)(false), mobileProductInfoOpen = _w[0], setMobileProductInfoOpen = _w[1];
+    var _x = (0, hooks_1.useState)(0), footerHeight = _x[0], setFooterHeight = _x[1];
+    var _y = (0, hooks_1.useState)(false), showNewMessages = _y[0], setShowNewMessages = _y[1];
+    var _z = (0, hooks_1.useState)(false), messagesOverflow = _z[0], setMessagesOverflow = _z[1];
     var isNearBottomRef = (0, hooks_1.useRef)(true);
+    // Drag-and-drop image upload onto the footer. `dragenter`/`dragleave` fire on every
+    // child crossing, so use a counter to know when the pointer has truly left the footer.
+    var _0 = (0, hooks_1.useState)(false), isDraggingFile = _0[0], setIsDraggingFile = _0[1];
+    var dragCounterRef = (0, hooks_1.useRef)(0);
     var updateSwipeOffset = function (value) {
         swipeOffsetRef.current = value;
         setSwipeOffsetRaw(value);
     };
     var scrollToBottom = function () {
-        var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        // Scroll the messages container directly (instead of scrollIntoView on the
+        // bottom anchor) so the browser never walks up the ancestor chain. On small
+        // viewports a smooth scrollIntoView could otherwise animate the document/
+        // visual viewport and visually push the fixed-position chat off-screen.
+        var container = messagesContainerRef.current;
+        if (container) {
+            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+        }
     };
     // Conditional scroll: only scrolls if the user is already near the bottom.
     // Passed to child components (e.g. image onLoad) so they don't yank the user
@@ -1146,6 +1283,36 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
         container.addEventListener('scroll', handleScroll);
         return function () { return container.removeEventListener('scroll', handleScroll); };
     }, [store.open]);
+    // Track whether the messages container is overflowing so the comparisons header
+    // can switch between in-flow (short conversations — top content stays reachable)
+    // and overlay (overflowing — avoid layout shift when toggling the tray).
+    // Hysteresis: when already in overlay, only return to in-flow if the content
+    // would still fit *with* the header re-inserted — otherwise the two states
+    // fight each other and the layout flickers.
+    (0, hooks_1.useEffect)(function () {
+        var container = messagesContainerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        var update = function () {
+            setMessagesOverflow(function (prev) {
+                var _a;
+                var headerHeight = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+                if (prev) {
+                    // Currently overlay: header isn't taking flow space. Only switch
+                    // back to in-flow if the content would fit with the header added.
+                    return container.scrollHeight > container.clientHeight - headerHeight + 1;
+                }
+                // Currently in-flow: header already takes space — straightforward check.
+                return container.scrollHeight > container.clientHeight + 1;
+            });
+        };
+        update();
+        var observer = new ResizeObserver(update);
+        observer.observe(container);
+        if (headerRef.current)
+            observer.observe(headerRef.current);
+        return function () { return observer.disconnect(); };
+    }, [store.open, visibleChatLength]);
     // Re-focus the chat input on desktop after a search completes.
     // The input is disabled while loading, which causes the browser to drop focus.
     // On mobile we intentionally skip this so the virtual keyboard dismisses.
@@ -1173,7 +1340,19 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
     var sideChatTypes = isMobile
         ? __spreadArray(__spreadArray(['inspirationResult'], (isFirstMobileComparison ? ['productComparison'] : []), true), (mobileProductInfoOpen ? ['productQuery'] : []), true) : ['inspirationResult', 'productComparison', 'productQuery'];
     var shouldShowSideChat = activeMessage && sideChatTypes.includes(activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) && ((_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.dismissedSideChatMessageId) !== activeMessage.id;
-    var styling = (0, utilities_1.mergeStyles)({ mobile: isMobile, offset: offset, hasSideChat: !!shouldShowSideChat, footerHeight: footerHeight }, defaultStyles);
+    var styling = (0, utilities_1.mergeStyles)({
+        mobile: isMobile,
+        offset: offset,
+        hasSideChat: !!shouldShowSideChat,
+        footerHeight: footerHeight,
+        primaryColorBg: colorPrimary,
+        primaryColorFg: colorPrimaryText,
+        primaryAccentColorBg: colorPrimaryAccent,
+        primaryAccentColorFg: colorPrimaryAccentText,
+        secondaryAccentColorBg: colorSecondaryAccent,
+        secondaryAccentColorFg: colorSecondaryAccentText,
+        position: chatPosition,
+    }, defaultStyles);
     // Lock body scroll while chat is open so touch/wheel scrolls don't leak to the page behind
     (0, hooks_1.useEffect)(function () {
         if (!store.open)
@@ -1220,6 +1399,72 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
                                     return text.length > 50 ? "".concat(text.slice(0, 50), "...") : text;
                                 })() }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id)); }) })) : null] })); };
     var FacetButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label }); };
+    var getFacetButtonLabel = function (facet) {
+        var _a, _b, _c;
+        var base = facet.label || facet.field;
+        // Slider facets show the active low-high range in the button when narrowed.
+        if (facet.type === 'range') {
+            var rangeFacet = facet;
+            var active = rangeFacet.active;
+            var range = rangeFacet.range;
+            if (active && range && (active.low !== range.low || active.high !== range.high)) {
+                return "".concat(base, " (").concat((_a = active.low) !== null && _a !== void 0 ? _a : '*', "-").concat((_b = active.high) !== null && _b !== void 0 ? _b : '*', ")");
+            }
+            return base;
+        }
+        var applied = new Set();
+        // Count values marked as filtered (already applied on the server)
+        (facet.values || []).forEach(function (value) {
+            var _a, _b;
+            if (value === null || value === void 0 ? void 0 : value.filtered) {
+                if ('low' in value && 'high' in value) {
+                    applied.add("".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*'));
+                }
+                else {
+                    applied.add(value.value);
+                }
+            }
+        });
+        // Count pending facet attachments (newly selected, not yet sent)
+        (((_c = controller.store.currentChat) === null || _c === void 0 ? void 0 : _c.attachments.items) || [])
+            .filter(function (item) { return item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'); })
+            .forEach(function (item) { return applied.add(item.value); });
+        return applied.size > 0 ? "".concat(base, " (").concat(applied.size, ")") : 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.
+    var SliderFacetDropdown = function (props) {
+        var anchorRef = (0, hooks_1.useRef)(null);
+        var _a = (0, hooks_1.useState)(null), width = _a[0], setWidth = _a[1];
+        (0, hooks_1.useEffect)(function () {
+            var compute = function () {
+                if (!anchorRef.current || !chatRef.current)
+                    return;
+                var anchor = anchorRef.current.getBoundingClientRect();
+                var chat = chatRef.current.getBoundingClientRect();
+                var remaining = chat.right - anchor.left - 16;
+                setWidth(Math.max(220, remaining));
+            };
+            compute();
+            var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(compute) : null;
+            if (ro && chatRef.current)
+                ro.observe(chatRef.current);
+            window.addEventListener('resize', compute);
+            return function () {
+                if (ro)
+                    ro.disconnect();
+                window.removeEventListener('resize', compute);
+            };
+        }, []);
+        return ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: "ss__chat__actions__facet ss__chat__actions__facet--range", children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: props.label }), style: {
+                    '.ss__dropdown__content': {
+                        width: width ? "".concat(width, "px") : 'auto',
+                        background: 'white',
+                        boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)',
+                        borderRadius: '6px',
+                    },
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__slider", style: { padding: '12px 16px' }, children: (0, jsx_runtime_1.jsx)(__1.FacetSlider, { facet: props.facet }) }) }) }) }));
+    };
     // TODO: if starting a new chat and it's expired, this button would then disappear
     if (!controller.store.chatEnabled) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
@@ -1306,11 +1551,11 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
                 return undefined;
         }
     }, [requestType]);
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat', {
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ ref: chatRef, className: (0, classnames_1.default)('ss__chat', {
                         'ss__chat--open': store.open,
                         'ss__chat--minimized': !store.open,
                         'ss__chat--mobile': isMobile,
-                    }, className, internalClassName) }, styling, { children: [!store.open && !store.currentChat && ((_f = store.suggestedQuestions) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map(function (question, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions__item", onClick: function () {
+                    }, className, internalClassName) }, styling, { children: [!disableBubbleSuggestedQuestions && !store.open && !store.currentChat && ((_f = store.suggestedQuestions) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map(function (question, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions__item", onClick: function () {
                                     controller.openChat(question);
                                 }, children: question }, index)); }) })), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__bubble', onClick: function () { return controller.handlers.button.click(); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "chat", title: "Open Chat" }) }), store.open && shouldShowSideChat && activeMessage ? ((0, jsx_runtime_1.jsxs)("div", { ref: secondaryRef, className: (0, classnames_1.default)('ss__chat__secondary'), style: isMobile
                                 ? {
@@ -1340,9 +1585,9 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
                                                     setMobileProductInfoOpen(false);
                                                     (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.dismissSideChat();
                                                 } }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content", children: (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__messages', children: {
-                                            inspirationResult: ((0, jsx_runtime_1.jsx)(ChatInspirationResultMessage_1.ChatInspirationResultMessage, { chatItem: activeMessage, controller: controller, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
+                                            inspirationResult: ((0, jsx_runtime_1.jsx)(ChatInspirationResultMessage_1.ChatInspirationResultMessage, { chatItem: activeMessage, controller: controller, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
                                             productComparison: ((0, jsx_runtime_1.jsx)(ChatProductComparisonMessage_1.ChatProductComparisonMessage, { chatItem: activeMessage, controller: controller })),
-                                            productQuery: ((0, jsx_runtime_1.jsx)(ChatProductQueryMessage_1.ChatProductQueryMessage, { chatItem: activeMessage, controller: controller, displayFields: (_h = controller.config.settings) === null || _h === void 0 ? void 0 : _h.displayFields })),
+                                            productQuery: ((0, jsx_runtime_1.jsx)(ChatProductQueryMessage_1.ChatProductQueryMessage, { chatItem: activeMessage, controller: controller, displayFields: (_j = (_h = controller.config.settings) === null || _h === void 0 ? void 0 : _h.quickview) === null || _j === void 0 ? void 0 : _j.displayFields, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
                                         }[activeMessage.messageType] || null }) })] })) : null, store.open ? ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__primary', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__header__title", children: [logo ? (0, jsx_runtime_1.jsx)("img", { className: "ss__chat__header__title__logo", src: logo }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__header__title__text", children: [title ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__header__title__text__primary", children: title }) : null, subtitle ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__header__title__text__secondary", children: subtitle }) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__header__buttons", children: [(0, jsx_runtime_1.jsx)(Button_1.Button
                                                 // disabled={store.currentChat?.chat && store.currentChat.chat.length <= 1}
                                                 , { 
@@ -1357,38 +1602,40 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
                                         systemMessages.length >= feedbackAfterMessages &&
                                         !((_e = store.currentChat) === null || _e === void 0 ? void 0 : _e.feedbackDismissed) &&
                                         (!hasRated || ((_f = store.currentChat) === null || _f === void 0 ? void 0 : _f.feedbackJustGiven));
-                                    return shouldShowFeedback ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__session-feedback", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__session-feedback__icon", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "chat", size: "16px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__session-feedback__label", children: hasRated ? 'Thank you for your feedback' : "How's your experience so far?" }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__session-feedback__actions".concat(hasRated ? ' ss__chat__session-feedback__actions--rated' : ''), children: [(!hasRated || currentRating === 'UP') && ((0, jsx_runtime_1.jsx)("span", { onClick: function () { return !hasRated && controller.handleFeedback('UP'); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'thumbs-up', title: 'Thumbs Up' }) })), (!hasRated || currentRating === 'DOWN') && ((0, jsx_runtime_1.jsx)("span", { onClick: function () { return !hasRated && controller.handleFeedback('DOWN'); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'thumbs-down', title: 'Thumbs Down' }) }))] }), !hasRated && ((0, jsx_runtime_1.jsx)("span", { className: "ss__chat__session-feedback__close", onClick: function () {
+                                    return shouldShowFeedback ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__session-feedback", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__session-feedback__icon", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "chat", size: "16px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__session-feedback__label", children: hasRated ? 'Thank you for your feedback' : "How's your experience so far?" }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__session-feedback__actions".concat(hasRated ? ' ss__chat__session-feedback__actions--rated' : ''), children: [(!hasRated || currentRating === 'UP') && ((0, jsx_runtime_1.jsx)("span", { onClick: function () { return !hasRated && controller.handleFeedback('UP'); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'thumbs-up', size: "16px", title: 'Thumbs Up' }) })), (!hasRated || currentRating === 'DOWN') && ((0, jsx_runtime_1.jsx)("span", { onClick: function () { return !hasRated && controller.handleFeedback('DOWN'); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'thumbs-down', size: "16px", title: 'Thumbs Down' }) }))] }), !hasRated && ((0, jsx_runtime_1.jsx)("span", { className: "ss__chat__session-feedback__close", onClick: function () {
                                                     if (store.currentChat) {
                                                         store.currentChat.feedbackDismissed = true;
                                                         store.currentChat.save();
                                                     }
                                                 }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
-                                })(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content__header", children: ((_j = store.currentChat) === null || _j === void 0 ? void 0 : _j.comparisons.compared) && store.currentChat.comparisons.compared.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), (0, jsx_runtime_1.jsxs)("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", (_k = store.currentChat) === null || _k === void 0 ? void 0 : _k.comparisons.compared.length, "/", (_l = store.currentChat) === null || _l === void 0 ? void 0 : _l.comparisons.maxItems, ")"] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.reset(); }, children: "clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: (_m = store.currentChat) === null || _m === void 0 ? void 0 : _m.comparisons.maxItems }).map(function (_, index) {
+                                })(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, className: (0, classnames_1.default)('ss__chat__content__header', {
+                                                'ss__chat__content__header--overlay': messagesOverflow,
+                                            }), children: ((_k = store.currentChat) === null || _k === void 0 ? void 0 : _k.comparisons.compared) && store.currentChat.comparisons.compared.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), (0, jsx_runtime_1.jsxs)("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", (_l = store.currentChat) === null || _l === void 0 ? void 0 : _l.comparisons.compared.length, "/", (_m = store.currentChat) === null || _m === void 0 ? void 0 : _m.comparisons.maxItems, ")"] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.reset(); }, children: "clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: (_o = store.currentChat) === null || _o === void 0 ? void 0 : _o.comparisons.maxItems }).map(function (_, index) {
                                                                     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                                                                     var comparisonItem = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared[index];
                                                                     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__content__comparison', {
                                                                             'ss__chat__content__header__comparisons__content__comparison--placeholder': !comparisonItem,
                                                                         }), children: comparisonItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Image_1.Image
                                                                                 // onClick={() => {
-                                                                                // 	controller?.viewProduct(product as any);
+                                                                                // 	controller?.productQuickView(product as any);
                                                                                 // }}
                                                                                 , { 
                                                                                     // onClick={() => {
-                                                                                    // 	controller?.viewProduct(product as any);
+                                                                                    // 	controller?.productQuickView(product as any);
                                                                                     // }}
                                                                                     alt: ((_e = (_d = (_c = (((_b = comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result) === null || _b === void 0 ? void 0 : _b.display) || (comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result))) === null || _c === void 0 ? void 0 : _c.mappings) === null || _d === void 0 ? void 0 : _d.core) === null || _e === void 0 ? void 0 : _e.name) || '', src: ((_j = (_h = (_g = (((_f = comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result) === null || _f === void 0 ? void 0 : _f.display) || (comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result))) === null || _g === void 0 ? void 0 : _g.mappings) === null || _h === void 0 ? void 0 : _h.core) === null || _j === void 0 ? void 0 : _j.imageUrl) || '' }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content__header__comparisons__content__comparison__remove", onClick: function () {
                                                                                         var _a;
                                                                                         (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.remove(comparisonItem.result.id);
                                                                                     }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'close-thin', size: '12px' }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'plus-thin' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', children: "Add" })] })) }, index));
                                                                 }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__action', {
-                                                                    'ss__chat__content__header__comparisons__action--hidden': (((_o = store.currentChat) === null || _o === void 0 ? void 0 : _o.comparisons.compared.length) || 0) < 2,
-                                                                }), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { return controller.search(); }, icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { overflowY: 'auto', scrollbarGutter: 'stable' } : undefined, children: [(!((_p = store.currentChat) === null || _p === void 0 ? void 0 : _p.chat) || store.currentChat.chat.length === 0) && store.welcomeMessage && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__welcome", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), (_q = store.currentChat) === null || _q === void 0 ? void 0 : _q.chat.filter(function (chatItem) { return chatItem.messageType !== 'productQuery'; }).map(function (chatItem, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message ss__chat__message--".concat(chatItem.messageType), children: {
-                                                        user: ((0, jsx_runtime_1.jsx)(MessageUser_1.MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
-                                                        text: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        content: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        productSearchResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        inspirationResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
-                                                        productAnswer: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                                    'ss__chat__content__header__comparisons__action--hidden': (((_p = store.currentChat) === null || _p === void 0 ? void 0 : _p.comparisons.compared.length) || 0) < 2,
+                                                                }), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { return controller.search(); }, icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { scrollbarGutter: 'stable' } : undefined, children: [(!((_q = store.currentChat) === null || _q === void 0 ? void 0 : _q.chat) || store.currentChat.chat.length === 0) && store.welcomeMessage && !((_r = store.currentChat) === null || _r === void 0 ? void 0 : _r.isExpired) && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__welcome", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), (_s = store.currentChat) === null || _s === void 0 ? void 0 : _s.chat.filter(function (chatItem) { return chatItem.messageType !== 'productQuery'; }).map(function (chatItem, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message ss__chat__message--".concat(chatItem.messageType), children: {
+                                                        user: ((0, jsx_runtime_1.jsx)(MessageUser_1.MessageUser, { chatItem: chatItem, controller: controller, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
+                                                        text: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
+                                                        content: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
+                                                        productSearchResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
+                                                        inspirationResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
+                                                        productAnswer: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
                                                         productComparison: (function () {
                                                             var _a;
                                                             // On mobile, only the first productComparison in the session
@@ -1396,328 +1643,369 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
                                                             // prominent "Show Details" button instead.
                                                             var comparisonMessages = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat) || []).filter(function (m) { return m.messageType === 'productComparison'; });
                                                             var isFirst = comparisonMessages.length > 0 && comparisonMessages[0].id === chatItem.id;
-                                                            return ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat }));
+                                                            return ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText }));
                                                         })(),
-                                                        productRecommendation: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
+                                                        productRecommendation: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onProductQuickView: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
                                                         actions: (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { actions: chatItem.actions, controller: controller }),
-                                                        errorResponse: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
-                                                        topicDrift: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
+                                                        errorResponse: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
+                                                        topicDrift: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat, primaryColor: colorPrimary, primaryColorText: colorPrimaryText })),
                                                         productQuery: null,
-                                                    }[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__new-messages", onClick: function () {
+                                                    }[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && messagesOverflow && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__new-messages", onClick: function () {
                                                         scrollToBottom();
                                                         setShowNewMessages(false);
-                                                    }, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-down", size: "12px" }), (0, jsx_runtime_1.jsx)("span", { children: "New messages" })] }))] }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !((_r = store.currentChat) === null || _r === void 0 ? void 0 : _r.isExpired) ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__error", children: store.error.message }), ((_s = store.currentChat) === null || _s === void 0 ? void 0 : _s.sessionLimitReached) && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: "Session limit reached" }), (0, jsx_runtime_1.jsx)("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
-                                                                controller.store.createChat();
-                                                            }, children: "New Session" })] })), ((_t = store.currentChat) === null || _t === void 0 ? void 0 : _t.actions) && store.currentChat.actions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions', children: (_u = store.currentChat) === null || _u === void 0 ? void 0 : _u.actions.map(function (action, index) {
-                                                        var _a;
-                                                        return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__wrap", children: {
-                                                                facets: action.data.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facets-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facets-apply".concat(((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached.some(function (item) { return item.type === 'facet'; }))
-                                                                                        ? ' ss__chat__actions__facets-apply--active'
-                                                                                        : ''), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
-                                                                                            controller.search();
-                                                                                        }, children: "Apply" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map(function (facet, idx) {
-                                                                                var _a;
-                                                                                if (!((_a = facet.values) === null || _a === void 0 ? void 0 : _a.length))
-                                                                                    return null;
-                                                                                return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet ss__chat__actions__facet--".concat(facet.type), children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: facet.label || facet.field }), style: {
-                                                                                            '.ss__dropdown__content': __assign({ 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: '#f4f4ff',
-                                                                                                        },
-                                                                                                        '&: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: '#253B80',
-                                                                                                                borderColor: '#253B80',
-                                                                                                            },
-                                                                                                        },
-                                                                                                        '.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: '#f4f4ff',
+                                                    }, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-down", size: "12px" }), (0, jsx_runtime_1.jsx)("span", { children: "New messages" })] }))] }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !((_t = store.currentChat) === null || _t === void 0 ? void 0 : _t.isExpired) ? ((function () {
+                                            var _a, _b, _c, _d;
+                                            var dropEnabled = store.features.imageSearch.enabled && !store.loading && !store.blocked && !((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.sessionLimitReached);
+                                            var hasFiles = function (e) { var _a; return Array.from(((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) || []).includes('Files'); };
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer", ref: footerRef, onDragEnter: function (e) {
+                                                    if (!dropEnabled || !hasFiles(e))
+                                                        return;
+                                                    e.preventDefault();
+                                                    dragCounterRef.current += 1;
+                                                    setIsDraggingFile(true);
+                                                }, onDragOver: function (e) {
+                                                    if (!dropEnabled || !hasFiles(e))
+                                                        return;
+                                                    // Required to allow the drop event to fire
+                                                    e.preventDefault();
+                                                    if (e.dataTransfer)
+                                                        e.dataTransfer.dropEffect = 'copy';
+                                                }, onDragLeave: function (e) {
+                                                    if (!dropEnabled || !hasFiles(e))
+                                                        return;
+                                                    dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+                                                    if (dragCounterRef.current === 0)
+                                                        setIsDraggingFile(false);
+                                                }, onDrop: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                                                    var dropped, images, dt;
+                                                    var _a;
+                                                    return __generator(this, function (_b) {
+                                                        switch (_b.label) {
+                                                            case 0:
+                                                                if (!dropEnabled || !hasFiles(e))
+                                                                    return [2 /*return*/];
+                                                                e.preventDefault();
+                                                                dragCounterRef.current = 0;
+                                                                setIsDraggingFile(false);
+                                                                dropped = Array.from(((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
+                                                                images = dropped.filter(function (f) { return f.type.startsWith('image/'); });
+                                                                if (images.length === 0)
+                                                                    return [2 /*return*/];
+                                                                dt = new DataTransfer();
+                                                                images.forEach(function (f) { return dt.items.add(f); });
+                                                                return [4 /*yield*/, controller.upload(dt.files)];
+                                                            case 1:
+                                                                _b.sent();
+                                                                return [2 /*return*/];
+                                                        }
+                                                    });
+                                                }); }, children: [store.error && (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__error", children: store.error.message }), ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.sessionLimitReached) && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: "Session limit reached" }), (0, jsx_runtime_1.jsx)("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
+                                                                    controller.store.createChat();
+                                                                }, children: "New Session" })] })), store.facets && store.facets.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions', children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__wrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facets-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && store.hasPendingFacetChanges && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions__facets-apply ss__chat__actions__facets-apply--active', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
+                                                                                    controller.search();
+                                                                                }, children: "Apply" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--facets", children: store.facets.slice(0, 10).map(function (facet, idx) {
+                                                                        var _a;
+                                                                        // range/slider facets render via FacetSlider; everything else needs at least one value to be useful
+                                                                        if (facet.type !== 'range' && !((_a = facet.values) === null || _a === void 0 ? void 0 : _a.length))
+                                                                            return null;
+                                                                        if (facet.type === 'range') {
+                                                                            return (0, jsx_runtime_1.jsx)(SliderFacetDropdown, { facet: facet, label: getFacetButtonLabel(facet) }, idx);
+                                                                        }
+                                                                        return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet ss__chat__actions__facet--".concat(facet.type), children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
+                                                                                    '.ss__dropdown__content': __assign({ 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 utilities_1.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,
                                                                                                         },
                                                                                                     },
-                                                                                                })),
-                                                                                        }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
-                                                                                                ? facet.values.map(function (option) {
-                                                                                                    var _a, _b;
-                                                                                                    var optionValue = "".concat((_a = option.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = option.high) !== null && _b !== void 0 ? _b : '*');
-                                                                                                    if (multiselectFacets) {
-                                                                                                        var isSelected_1 = controller.store.isFacetSelected(facet.field, optionValue);
-                                                                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
-                                                                                                                if (isSelected_1) {
-                                                                                                                    controller.store.removeFacet(facet.field, optionValue);
-                                                                                                                }
-                                                                                                                else {
-                                                                                                                    controller.store.addFacet({
-                                                                                                                        key: facet.field,
-                                                                                                                        facetLabel: facet.label,
-                                                                                                                        value: optionValue,
-                                                                                                                        label: option.label,
-                                                                                                                        count: option.count,
-                                                                                                                    });
-                                                                                                                }
-                                                                                                            }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
-                                                                                                                        'ss__chat__actions__facet__option__checkbox--checked': isSelected_1,
-                                                                                                                    }), children: isSelected_1 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
-                                                                                                    }
-                                                                                                    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
+                                                                                                },
+                                                                                                '.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 utilities_1.Colour(colorPrimary).lightenHex(0.95),
+                                                                                                },
+                                                                                            },
+                                                                                        })),
+                                                                                }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
+                                                                                        ? facet.values.map(function (option) {
+                                                                                            var _a, _b;
+                                                                                            var rangeOption = option;
+                                                                                            var optionValue = "".concat((_a = rangeOption.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = rangeOption.high) !== null && _b !== void 0 ? _b : '*');
+                                                                                            if (multiselectFacets) {
+                                                                                                var isSelected_1 = controller.store.isFacetSelected(facet.field, optionValue);
+                                                                                                return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
+                                                                                                        if (isSelected_1) {
+                                                                                                            controller.store.removeFacet(facet.field, optionValue);
+                                                                                                        }
+                                                                                                        else {
                                                                                                             controller.store.addFacet({
                                                                                                                 key: facet.field,
-                                                                                                                facetLabel: facet.label,
                                                                                                                 value: optionValue,
-                                                                                                                label: option.label,
-                                                                                                                count: option.count,
                                                                                                             });
-                                                                                                            controller.search();
-                                                                                                        }, children: option.label }, optionValue));
-                                                                                                })
-                                                                                                : facet.values.map(function (option) {
-                                                                                                    var optionValue = option.value || option.label;
-                                                                                                    if (multiselectFacets) {
-                                                                                                        var isSelected_2 = controller.store.isFacetSelected(facet.field, optionValue);
-                                                                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
-                                                                                                                if (isSelected_2) {
-                                                                                                                    controller.store.removeFacet(facet.field, optionValue);
-                                                                                                                }
-                                                                                                                else {
-                                                                                                                    controller.store.addFacet({
-                                                                                                                        key: facet.field,
-                                                                                                                        facetLabel: facet.label,
-                                                                                                                        value: optionValue,
-                                                                                                                        label: option.label,
-                                                                                                                        count: option.count,
-                                                                                                                    });
-                                                                                                                }
-                                                                                                            }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
-                                                                                                                        'ss__chat__actions__facet__option__checkbox--checked': isSelected_2,
-                                                                                                                    }), children: isSelected_2 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: option.label })] }, optionValue));
-                                                                                                    }
-                                                                                                    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
+                                                                                                        }
+                                                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
+                                                                                                                'ss__chat__actions__facet__option__checkbox--checked': isSelected_1,
+                                                                                                            }), children: isSelected_1 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: rangeOption.label })] }, optionValue));
+                                                                                            }
+                                                                                            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
+                                                                                                    controller.store.addFacet({
+                                                                                                        key: facet.field,
+                                                                                                        value: optionValue,
+                                                                                                    });
+                                                                                                    controller.search();
+                                                                                                }, children: rangeOption.label }, optionValue));
+                                                                                        })
+                                                                                        : facet.values.map(function (option) {
+                                                                                            var valueOption = option;
+                                                                                            var optionValue = valueOption.value || valueOption.label;
+                                                                                            if (multiselectFacets) {
+                                                                                                var isSelected_2 = controller.store.isFacetSelected(facet.field, optionValue);
+                                                                                                return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
+                                                                                                        if (isSelected_2) {
+                                                                                                            controller.store.removeFacet(facet.field, optionValue);
+                                                                                                        }
+                                                                                                        else {
                                                                                                             controller.store.addFacet({
                                                                                                                 key: facet.field,
-                                                                                                                facetLabel: facet.label,
                                                                                                                 value: optionValue,
-                                                                                                                label: option.label,
-                                                                                                                count: option.count,
                                                                                                             });
-                                                                                                            controller.search();
-                                                                                                        }, children: option.label }, optionValue));
-                                                                                                }) }) }, facet.field) }, idx));
-                                                                            }) })] })) : null,
-                                                                actions: ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--suggested" })),
-                                                            }[action.type] || null }, index));
-                                                    }) })), (function () {
-                                                    var _a, _b, _c;
-                                                    var activeComparisonSearchResults = shouldShowSideChat && (activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'productComparison'
-                                                        ? activeMessage.searchResults || []
-                                                        : null;
-                                                    var showCommittedComparisons = !activeComparisonSearchResults &&
-                                                        ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.committed) &&
-                                                        store.currentChat.comparisons.committed.length > 0 &&
-                                                        ((activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'user' ||
-                                                            (activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'productComparison' ||
-                                                            (activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'productQuery');
-                                                    var visibleAttachments = ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.attachments.attached.filter(function (item) { return item.state === 'attached' || item.state === 'active' || item.state === 'loading' || item.state === 'error'; })) || [];
-                                                    var productAttachments = visibleAttachments.filter(function (item) {
-                                                        return item.type === 'product' &&
-                                                            item.requestType !== 'productSimilar' &&
-                                                            item.requestType !== 'productComparison';
-                                                    });
-                                                    var imageAttachments = visibleAttachments.filter(function (item) { return item.type === 'image'; });
-                                                    var comparisonItems = activeComparisonSearchResults
-                                                        ? activeComparisonSearchResults.map(function (result) {
-                                                            var _a, _b, _c, _d, _e, _f;
-                                                            var d = (result === null || result === void 0 ? void 0 : result.display) || result;
-                                                            return {
-                                                                id: result === null || result === void 0 ? void 0 : result.id,
-                                                                name: ((_b = (_a = d === null || d === void 0 ? void 0 : d.mappings) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.name) || '',
-                                                                imageUrl: ((_d = (_c = d === null || d === void 0 ? void 0 : d.mappings) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.thumbnailImageUrl) || ((_f = (_e = d === null || d === void 0 ? void 0 : d.mappings) === null || _e === void 0 ? void 0 : _e.core) === null || _f === void 0 ? void 0 : _f.imageUrl) || '',
-                                                                onClick: isMobile
-                                                                    ? function () {
-                                                                        controller.viewProduct(result);
-                                                                        setMobileProductInfoOpen(true);
-                                                                    }
-                                                                    : undefined,
-                                                            };
-                                                        })
-                                                        : showCommittedComparisons
-                                                            ? (((_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.comparisons.committed) || []).map(function (comparisonItem) {
-                                                                var _a, _b, _c, _d, _e, _f, _g, _h;
-                                                                var d = ((_a = comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result) === null || _a === void 0 ? void 0 : _a.display) || (comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result);
+                                                                                                        }
+                                                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
+                                                                                                                'ss__chat__actions__facet__option__checkbox--checked': isSelected_2,
+                                                                                                            }), children: isSelected_2 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: valueOption.label })] }, optionValue));
+                                                                                            }
+                                                                                            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
+                                                                                                    controller.store.addFacet({
+                                                                                                        key: facet.field,
+                                                                                                        value: optionValue,
+                                                                                                    });
+                                                                                                    controller.search();
+                                                                                                }, children: valueOption.label }, optionValue));
+                                                                                        }) }) }, facet.field) }, idx));
+                                                                    }) })] }) })), (function () {
+                                                        var _a, _b, _c;
+                                                        var activeComparisonSearchResults = shouldShowSideChat && (activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'productComparison'
+                                                            ? activeMessage.searchResults || []
+                                                            : null;
+                                                        var showCommittedComparisons = !activeComparisonSearchResults &&
+                                                            ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.committed) &&
+                                                            store.currentChat.comparisons.committed.length > 0 &&
+                                                            ((activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'user' ||
+                                                                (activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'productComparison' ||
+                                                                (activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.messageType) === 'productQuery');
+                                                        var visibleAttachments = ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.attachments.attached.filter(function (item) { return item.state === 'attached' || item.state === 'active' || item.state === 'loading' || item.state === 'error'; })) || [];
+                                                        var productAttachments = visibleAttachments.filter(function (item) {
+                                                            return item.type === 'product' &&
+                                                                item.requestType !== 'productSimilar' &&
+                                                                item.requestType !== 'productComparison';
+                                                        });
+                                                        var imageAttachments = visibleAttachments.filter(function (item) { return item.type === 'image'; });
+                                                        var comparisonItems = activeComparisonSearchResults
+                                                            ? activeComparisonSearchResults.map(function (result) {
+                                                                var _a, _b, _c, _d, _e, _f;
+                                                                var d = (result === null || result === void 0 ? void 0 : result.display) || result;
                                                                 return {
-                                                                    id: (_b = comparisonItem.result) === null || _b === void 0 ? void 0 : _b.id,
-                                                                    name: ((_d = (_c = d === null || d === void 0 ? void 0 : d.mappings) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.name) || '',
-                                                                    imageUrl: ((_f = (_e = d === null || d === void 0 ? void 0 : d.mappings) === null || _e === void 0 ? void 0 : _e.core) === null || _f === void 0 ? void 0 : _f.thumbnailImageUrl) || ((_h = (_g = d === null || d === void 0 ? void 0 : d.mappings) === null || _g === void 0 ? void 0 : _g.core) === null || _h === void 0 ? void 0 : _h.imageUrl) || '',
+                                                                    id: result === null || result === void 0 ? void 0 : result.id,
+                                                                    name: ((_b = (_a = d === null || d === void 0 ? void 0 : d.mappings) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.name) || '',
+                                                                    imageUrl: ((_d = (_c = d === null || d === void 0 ? void 0 : d.mappings) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.thumbnailImageUrl) || ((_f = (_e = d === null || d === void 0 ? void 0 : d.mappings) === null || _e === void 0 ? void 0 : _e.core) === null || _f === void 0 ? void 0 : _f.imageUrl) || '',
                                                                     onClick: isMobile
                                                                         ? function () {
-                                                                            controller.viewProduct(comparisonItem.result);
+                                                                            controller.productQuickView(result);
                                                                             setMobileProductInfoOpen(true);
                                                                         }
                                                                         : undefined,
                                                                 };
                                                             })
-                                                            : [];
-                                                    var productItems = productAttachments.map(function (item) { return ({
-                                                        id: item.id,
-                                                        name: item.name || '',
-                                                        imageUrl: item.thumbnailUrl || '',
-                                                        onClick: isMobile
-                                                            ? function () {
-                                                                setMobileProductInfoOpen(true);
-                                                            }
-                                                            : function () {
-                                                                var _a, _b, _c;
-                                                                (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.setActiveMessage(((_c = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.activeMessage) === null || _c === void 0 ? void 0 : _c.id) || '');
-                                                            },
-                                                        onRemove: function () {
-                                                            var _a, _b;
-                                                            (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id);
-                                                            setMobileProductInfoOpen(false);
-                                                            (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.dismissSideChat();
-                                                        },
-                                                    }); });
-                                                    var imageItems = imageAttachments.map(function (item) {
-                                                        var _a;
-                                                        return ({
+                                                            : showCommittedComparisons
+                                                                ? (((_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.comparisons.committed) || []).map(function (comparisonItem) {
+                                                                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                                                                    var d = ((_a = comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result) === null || _a === void 0 ? void 0 : _a.display) || (comparisonItem === null || comparisonItem === void 0 ? void 0 : comparisonItem.result);
+                                                                    return {
+                                                                        id: (_b = comparisonItem.result) === null || _b === void 0 ? void 0 : _b.id,
+                                                                        name: ((_d = (_c = d === null || d === void 0 ? void 0 : d.mappings) === null || _c === void 0 ? void 0 : _c.core) === null || _d === void 0 ? void 0 : _d.name) || '',
+                                                                        imageUrl: ((_f = (_e = d === null || d === void 0 ? void 0 : d.mappings) === null || _e === void 0 ? void 0 : _e.core) === null || _f === void 0 ? void 0 : _f.thumbnailImageUrl) || ((_h = (_g = d === null || d === void 0 ? void 0 : d.mappings) === null || _g === void 0 ? void 0 : _g.core) === null || _h === void 0 ? void 0 : _h.imageUrl) || '',
+                                                                        onClick: isMobile
+                                                                            ? function () {
+                                                                                controller.productQuickView(comparisonItem.result);
+                                                                                setMobileProductInfoOpen(true);
+                                                                            }
+                                                                            : undefined,
+                                                                    };
+                                                                })
+                                                                : [];
+                                                        var productItems = productAttachments.map(function (item) { return ({
                                                             id: item.id,
-                                                            name: item.fileName || 'Image',
-                                                            imageUrl: item.base64 || item.thumbnailUrl || '',
-                                                            isLoading: item.state === 'loading',
-                                                            hasError: !!item.error,
-                                                            errorMessage: (_a = item.error) === null || _a === void 0 ? void 0 : _a.message,
-                                                            onRemove: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id); },
-                                                        });
-                                                    });
-                                                    var productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product' + (isMobile ? '' : ' (click for details)');
-                                                    var hasImageError = imageItems.some(function (item) { return item.hasError; });
-                                                    var imageTitle = imageItems.length > 0 && !hasImageError ? 'Find products similar to this image:' : '';
-                                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [comparisonItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { title: 'Compare these products', items: comparisonItems, onClose: function () {
-                                                                    var _a, _b;
-                                                                    (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.resetCommitted();
-                                                                    (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.dismissSideChat();
-                                                                } })), productItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { title: productTitle, items: productItems, onClose: function () {
-                                                                    var _a;
-                                                                    productAttachments.forEach(function (item) { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id); });
-                                                                    setMobileProductInfoOpen(false);
-                                                                    (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissSideChat();
-                                                                } })), imageItems.length > 0 && (0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { title: imageTitle, items: imageItems })] }));
-                                                })(), (function () {
-                                                    var _a;
-                                                    var drift = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.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;
-                                                    var isScopeRedirect = drift.recommendedAction === 'SCOPE_REDIRECT';
-                                                    var primaryText = isScopeRedirect ? "I'm here to help with shopping" : 'Looking for something new?';
-                                                    var secondaryText = isScopeRedirect
-                                                        ? 'Try asking about products, comparisons, or recommendations'
-                                                        : 'Start a fresh session for better assistance, or keep going in this one?';
-                                                    var buttonText = isScopeRedirect ? '' : 'New Session';
-                                                    return ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: primaryText }), (0, jsx_runtime_1.jsx)("span", { children: secondaryText })] }), buttonText && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
-                                                                    var _a, _b;
-                                                                    if (isScopeRedirect) {
-                                                                        (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissTopicDrift();
-                                                                        return;
-                                                                    }
-                                                                    var messageText = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.handleTopicDrift();
-                                                                    if (messageText) {
-                                                                        controller.store.createChat();
-                                                                        controller.search({ data: { message: messageText } });
-                                                                    }
-                                                                }, children: buttonText })), (0, jsx_runtime_1.jsx)("span", { onClick: function () {
-                                                                    var _a;
-                                                                    (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissTopicDrift();
-                                                                }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px", className: 'ss__chat__topic-drift__icon--close' }) })] }));
-                                                })(), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || ((_v = store.currentChat) === null || _v === void 0 ? void 0 : _v.sessionLimitReached), placeholder: (function () {
-                                                                        var _a, _b, _c;
-                                                                        var comparedCount = ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared.length) || 0;
-                                                                        var committedCount = ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.comparisons.committed.length) || 0;
-                                                                        var attached = ((_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.attachments.attached.filter(function (item) { return item.state === 'attached' || item.state === 'active'; })) || [];
-                                                                        var attachedProducts = attached.filter(function (item) { return item.type === 'product'; });
-                                                                        var attachedImages = attached.filter(function (item) { return 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: function (e) { return controller.handlers.input.input(e); }, onKeyDown: function (e) {
-                                                                        controller.handlers.input.enterKey(e);
-                                                                        if (e.keyCode === 13 && isMobile && mobileProductInfoOpen) {
-                                                                            setMobileProductInfoOpen(false);
-                                                                        }
-                                                                    }, value: controller.store.inputValue }), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || ((_w = store.currentChat) === null || _w === void 0 ? void 0 : _w.sessionLimitReached), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, icon: { icon: 'image', title: 'Upload Image' } }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
-                                                                                return __generator(this, function (_a) {
-                                                                                    switch (_a.label) {
-                                                                                        case 0: return [4 /*yield*/, controller.upload(e.target.files)];
-                                                                                        case 1:
-                                                                                            _a.sent();
-                                                                                            // reset value
-                                                                                            e.target.value = '';
-                                                                                            return [2 /*return*/];
-                                                                                    }
-                                                                                });
-                                                                            }); }, multiple: true, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__input__actions', children: (function () {
+                                                            name: item.name || '',
+                                                            imageUrl: item.thumbnailUrl || '',
+                                                            onClick: isMobile
+                                                                ? function () {
+                                                                    setMobileProductInfoOpen(true);
+                                                                }
+                                                                : function () {
+                                                                    var _a, _b, _c;
+                                                                    (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.setActiveMessage(((_c = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.activeMessage) === null || _c === void 0 ? void 0 : _c.id) || '');
+                                                                },
+                                                            onRemove: function () {
                                                                 var _a, _b;
-                                                                var hasImageAttachment = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached) || []).some(function (item) { return item.type === 'image' && !item.error; });
-                                                                var messageEmpty = !controller.store.inputValue.trim();
-                                                                var sendDisabled = store.blocked || ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.sessionLimitReached) || (hasImageAttachment && messageEmpty) || messageEmpty;
-                                                                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__send-button", icon: { icon: 'send', title: 'Send Message' }, disabled: sendDisabled, onClick: function () {
-                                                                        if (sendDisabled)
+                                                                (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id);
+                                                                setMobileProductInfoOpen(false);
+                                                                (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.dismissSideChat();
+                                                            },
+                                                        }); });
+                                                        var imageItems = imageAttachments.map(function (item) {
+                                                            var _a;
+                                                            return ({
+                                                                id: item.id,
+                                                                name: item.fileName || 'Image',
+                                                                imageUrl: item.base64 || item.thumbnailUrl || '',
+                                                                isLoading: item.state === 'loading',
+                                                                hasError: !!item.error,
+                                                                errorMessage: (_a = item.error) === null || _a === void 0 ? void 0 : _a.message,
+                                                                onRemove: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id); },
+                                                            });
+                                                        });
+                                                        var productTitle = productItems.length > 1 ? 'Compare these products' : 'Ask about this product' + (isMobile ? '' : ' (click for details)');
+                                                        var hasImageError = imageItems.some(function (item) { return item.hasError; });
+                                                        var imageTitle = imageItems.length > 0 && !hasImageError ? 'Find products similar to this image:' : '';
+                                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [comparisonItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { title: 'Compare these products', items: comparisonItems, onClose: function () {
+                                                                        var _a, _b;
+                                                                        (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.resetCommitted();
+                                                                        (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.dismissSideChat();
+                                                                    } })), productItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { title: productTitle, items: productItems, onClose: function () {
+                                                                        var _a;
+                                                                        productAttachments.forEach(function (item) { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.remove(item.id); });
+                                                                        setMobileProductInfoOpen(false);
+                                                                        (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissSideChat();
+                                                                    } })), imageItems.length > 0 && (0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { title: imageTitle, items: imageItems })] }));
+                                                    })(), (function () {
+                                                        var _a;
+                                                        var drift = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.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;
+                                                        var isScopeRedirect = drift.recommendedAction === 'SCOPE_REDIRECT';
+                                                        var primaryText = isScopeRedirect ? "I'm here to help with shopping" : 'Looking for something new?';
+                                                        var secondaryText = isScopeRedirect
+                                                            ? 'Try asking about products, comparisons, or recommendations'
+                                                            : 'Start a fresh session for better assistance, or keep going in this one?';
+                                                        var buttonText = isScopeRedirect ? '' : 'New Session';
+                                                        return ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: primaryText }), (0, jsx_runtime_1.jsx)("span", { children: secondaryText })] }), buttonText && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
+                                                                        var _a, _b;
+                                                                        if (isScopeRedirect) {
+                                                                            (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissTopicDrift();
                                                                             return;
-                                                                        controller.search();
-                                                                        if (isMobile && mobileProductInfoOpen) {
-                                                                            setMobileProductInfoOpen(false);
                                                                         }
-                                                                    } }));
-                                                            })() })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__disclaimer', children: (0, jsx_runtime_1.jsxs)("i", { children: ["Powered by Athos Commerce. AI-powered assistant. It sometimes make mistakes. Avoid sharing personal data.", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://athoscommerce.com/legal/privacy-policy/", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" })] }) })] })) : ((0, jsx_runtime_1.jsx)("div", { children: "This chat is expired. Please start a new chat." }))] })] })) : null] })), (0, jsx_runtime_1.jsx)(__1.Overlay, { style: { zIndex: 1001 }, color: "transparent", active: store.open, onClick: function () { return controller.handlers.button.click(); } })] }) }));
+                                                                        var messageText = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.handleTopicDrift();
+                                                                        if (messageText) {
+                                                                            controller.store.createChat();
+                                                                            controller.search({ data: { message: messageText } });
+                                                                        }
+                                                                    }, children: buttonText })), (0, jsx_runtime_1.jsx)("span", { onClick: function () {
+                                                                        var _a;
+                                                                        (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissTopicDrift();
+                                                                    }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px", className: 'ss__chat__topic-drift__icon--close' }) })] }));
+                                                    })(), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || ((_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.sessionLimitReached), placeholder: (function () {
+                                                                            var _a, _b, _c;
+                                                                            var comparedCount = ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared.length) || 0;
+                                                                            var committedCount = ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.comparisons.committed.length) || 0;
+                                                                            var attached = ((_c = store.currentChat) === null || _c === void 0 ? void 0 : _c.attachments.attached.filter(function (item) { return item.state === 'attached' || item.state === 'active'; })) ||
+                                                                                [];
+                                                                            var attachedProducts = attached.filter(function (item) { return item.type === 'product'; });
+                                                                            var attachedImages = attached.filter(function (item) { return 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: function (e) { return controller.handlers.input.input(e); }, onKeyDown: function (e) {
+                                                                            controller.handlers.input.enterKey(e);
+                                                                            if (e.keyCode === 13 && isMobile && mobileProductInfoOpen) {
+                                                                                setMobileProductInfoOpen(false);
+                                                                            }
+                                                                        }, value: controller.store.inputValue }), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || ((_d = store.currentChat) === null || _d === void 0 ? void 0 : _d.sessionLimitReached), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, icon: { icon: 'image', title: 'Upload Image' } }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                                                                                    return __generator(this, function (_a) {
+                                                                                        switch (_a.label) {
+                                                                                            case 0: return [4 /*yield*/, controller.upload(e.target.files)];
+                                                                                            case 1:
+                                                                                                _a.sent();
+                                                                                                // reset value
+                                                                                                e.target.value = '';
+                                                                                                return [2 /*return*/];
+                                                                                        }
+                                                                                    });
+                                                                                }); }, multiple: true, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__input__actions', children: (function () {
+                                                                    var _a, _b;
+                                                                    var hasImageAttachment = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached) || []).some(function (item) { return item.type === 'image' && !item.error; });
+                                                                    var messageEmpty = !controller.store.inputValue.trim();
+                                                                    var sendDisabled = store.blocked || ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.sessionLimitReached) || (hasImageAttachment && messageEmpty) || messageEmpty;
+                                                                    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__send-button", icon: { icon: 'send', title: 'Send Message' }, disabled: sendDisabled, onClick: function () {
+                                                                            if (sendDisabled)
+                                                                                return;
+                                                                            controller.search();
+                                                                            if (isMobile && mobileProductInfoOpen) {
+                                                                                setMobileProductInfoOpen(false);
+                                                                            }
+                                                                        } }));
+                                                                })() })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__disclaimer', children: (0, jsx_runtime_1.jsxs)("i", { children: ["Powered by Athos Commerce. AI-powered assistant. It sometimes make mistakes. Avoid sharing personal data.", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://athoscommerce.com/legal/privacy-policy/", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" })] }) }), isDraggingFile && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer__drop-overlay", children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "image", size: "24px" }), (0, jsx_runtime_1.jsx)("span", { children: "Drop image to upload" })] }))] }));
+                                        })()) : ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__expired', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__expired__message', children: "This chat is expired. Please start a new chat." }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__expired__button', onClick: function () {
+                                                        controller.store.createChat();
+                                                    }, children: "New Session" })] }))] })] })) : null] })), (0, jsx_runtime_1.jsx)(__1.Overlay, { style: { zIndex: 1001 }, color: "transparent", active: store.open, onClick: function () { return controller.handlers.button.click(); } })] }) }));
 });