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

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

@@ -44,6 +44,11 @@ var defaultStyles = function () {
             alignItems: 'center',
             gap: '10px',
         },
+        '.ss__chat__message-user__text-wrapper': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+        },
         '.ss__chat__message-user__text': {
             padding: '0.5em 1em',
             borderRadius: '12px',
@@ -56,9 +61,10 @@ var defaultStyles = function () {
             padding: 0,
             margin: 0,
             display: 'flex',
-            gap: '8px',
-            flexWrap: 'nowrap',
+            flexWrap: 'wrap',
             justifyContent: 'flex-end',
+            flex: '0 0 40px',
+            alignSelf: 'flex-end',
             '.ss__chat__message-user__attachment__product, .ss__chat__message-user__attachment__image, .ss__chat__message-user__attachment__facet': {
                 width: '40px',
                 height: '40px',
@@ -84,10 +90,16 @@ var defaultStyles = function () {
                     borderColor: colorPrimary,
                 },
             },
+            '.ss__chat__message-user__attachment__facet--overflow': {
+                fontSize: '12px',
+                fontWeight: 600,
+                color: '#555',
+            },
         },
     });
 };
 function getRequestTypeLabel(chatItem) {
+    var _a, _b;
     var requestType = chatItem.requestType;
     if (!requestType || requestType === 'general')
         return undefined;
@@ -97,7 +109,12 @@ function getRequestTypeLabel(chatItem) {
         case 'productComparison':
             return 'Comparing products';
         case 'productSearch':
-            return 'Filtering products';
+            if ((_b = (_a = chatItem.request) === null || _a === void 0 ? void 0 : _a.searchFilters) === null || _b === void 0 ? void 0 : _b.length) {
+                return 'Filtering products';
+            }
+            else {
+                return 'Searching products';
+            }
         case 'imageSearch':
             return 'Searching by image';
         case 'productSimilar':
@@ -147,7 +164,6 @@ function findProductInChat(chat, productId) {
     return null;
 }
 exports.MessageUser = (0, mobx_react_lite_1.observer)(function (props) {
-    var _a, _b;
     var controller = props.controller, chatItem = props.chatItem, onViewProduct = props.onViewProduct;
     var store = controller.store;
     var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
@@ -169,24 +185,40 @@ exports.MessageUser = (0, mobx_react_lite_1.observer)(function (props) {
             onViewProduct === null || onViewProduct === void 0 ? void 0 : onViewProduct(product);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__chat__message-user" }, styling, { children: [requestTypeLabel ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__row", children: [(0, jsx_runtime_1.jsx)("ul", { className: "ss__chat__message-user__attachments", children: ((_a = chatItem.attachments) === null || _a === void 0 ? void 0 : _a.length)
-                            ? (_b = chatItem.attachments) === null || _b === void 0 ? void 0 : _b.map(function (attachmentId) {
-                                var _a, _b;
-                                var attachment = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.get(attachmentId);
-                                switch (attachment === null || attachment === void 0 ? void 0 : attachment.type) {
-                                    case 'image':
-                                        return ((0, jsx_runtime_1.jsx)("li", { className: "ss__chat__message-user__attachment__image", children: (0, jsx_runtime_1.jsx)(Image_1.Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
-                                    case 'product': {
-                                        var canOpen = !!findProductInChat((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.chat, attachment.productId);
-                                        return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('ss__chat__message-user__attachment__product', {
-                                                'ss__chat__message-user__attachment__product--clickable': canOpen,
-                                            }), onClick: canOpen ? function () { return handleProductAttachmentClick(attachment); } : undefined, title: canOpen ? "View details for ".concat(attachment.name) : undefined, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
-                                    }
-                                    case 'facet':
-                                        return ((0, jsx_runtime_1.jsx)("li", { className: "ss__chat__message-user__attachment__facet", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { title: "Filter: ".concat(attachment.facetLabel, " = ").concat(attachment.label), icon: "filter-funnel", size: 27 }) }, attachment.id));
-                                    default:
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__chat__message-user" }, styling, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__row", children: [(0, jsx_runtime_1.jsx)("ul", { className: "ss__chat__message-user__attachments", children: (function () {
+                        var _a;
+                        if (!((_a = chatItem.attachments) === null || _a === void 0 ? void 0 : _a.length))
+                            return null;
+                        var resolved = chatItem.attachments.map(function (id) { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.get(id); }).filter(Boolean);
+                        var totalFacets = resolved.filter(function (a) { return a.type === 'facet'; }).length;
+                        var hiddenFacetCount = Math.max(0, totalFacets - 2);
+                        var facetIndex = 0;
+                        var items = resolved
+                            .map(function (attachment) {
+                            var _a;
+                            switch (attachment.type) {
+                                case 'image':
+                                    return ((0, jsx_runtime_1.jsx)("li", { className: "ss__chat__message-user__attachment__image", children: (0, jsx_runtime_1.jsx)(Image_1.Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
+                                case 'product': {
+                                    var canOpen = !!findProductInChat((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat, attachment.productId);
+                                    return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('ss__chat__message-user__attachment__product', {
+                                            'ss__chat__message-user__attachment__product--clickable': canOpen,
+                                        }), onClick: canOpen ? function () { return handleProductAttachmentClick(attachment); } : undefined, title: canOpen ? "View details for ".concat(attachment.name) : undefined, children: (0, jsx_runtime_1.jsx)(Image_1.Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
+                                }
+                                case 'facet': {
+                                    facetIndex += 1;
+                                    if (facetIndex > 2)
                                         return null;
+                                    return ((0, jsx_runtime_1.jsx)("li", { className: "ss__chat__message-user__attachment__facet", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { title: "Filter: ".concat(attachment.facetLabel, " = ").concat(attachment.label), icon: "filter-funnel", size: 27 }) }, attachment.id));
                                 }
-                            })
-                            : null }), chatItem.text ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked_1.marked.parse(chatItem.text) } })) : null] })] })));
+                                default:
+                                    return null;
+                            }
+                        })
+                            .filter(Boolean);
+                        if (hiddenFacetCount > 0) {
+                            items.push((0, jsx_runtime_1.jsxs)("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: "".concat(hiddenFacetCount, " more filter").concat(hiddenFacetCount === 1 ? '' : 's'), children: ["+", hiddenFacetCount] }, "facet-overflow"));
+                        }
+                        return items;
+                    })() }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked_1.marked.parse(chatItem.text) } })) : null] })] }) })));
 });

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

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

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

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

package/dist/esm/components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInspirationResultMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAoB,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAyDjG,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CA4GjG,CAAC;AAMH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,iCAAiC,CAAC;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC;CACjD,GAAG,+CAA+C,GAClD,cAAc,CAAC,iCAAiC,CAAC,CAAC;AAEnD,MAAM,MAAM,+CAA+C,GAAG;IAC7D,QAAQ,EAAE,iCAAiC,CAAC;CAC5C,CAAC;AAEF,MAAM,WAAW,gCAAgC;CAKhD"}
+{"version":3,"file":"ChatInspirationResultMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAoB,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAyDjG,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CA8GjG,CAAC;AAMH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,iCAAiC,CAAC;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC;CACjD,GAAG,+CAA+C,GAClD,cAAc,CAAC,iCAAiC,CAAC,CAAC;AAEnD,MAAM,MAAM,+CAA+C,GAAG;IAC7D,QAAQ,EAAE,iCAAiC,CAAC;CAC5C,CAAC;AAEF,MAAM,WAAW,gCAAgC;CAKhD"}

package/dist/esm/components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.js

@@ -98,10 +98,13 @@ export const ChatInspirationResultMessage = observer((properties) => {
         return null;
     }
     return inspirationSections.length ? (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-inspiration-result-message', className, internalClassName), ...styling, children: _jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections'), children: inspirationSections.map((section, index) => (_jsxs("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section'), children: [_jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__title'), children: section.clusterTitle }), _jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__description'), children: section.clusterDescription }), _jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__queries'), children: section.searchQueries.map((searchTerm, index) => (_jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__queries__query'), onClick: () => {
+                                    if (controller?.store.loading || controller?.store.blocked)
+                                        return;
                                     controller?.search({ data: { requestType: 'productSearch', searchTerm } });
                                 }, children: searchTerm }, index))) }), _jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__products'), children: _jsx(Carousel, { ...subProps.Carousel, children: section.products.map((product) => {
                                     const display = product?.display || product;
-                                    return (_jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__products__product'), children: _jsx(Image, { onClick: () => {
+                                    return (_jsx("div", { className: classnames('ss__chat-inspiration-result-message__inspiration-sections__section__products__product'), children: _jsx(Image, { onClick: (e) => {
+                                                controller?.track.product.click(e, product);
                                                 controller?.viewProduct(product);
                                                 onViewProduct?.();
                                             }, alt: display?.mappings?.core?.name || '', src: display?.mappings?.core?.imageUrl || '' }) }, product.id));

package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js

@@ -73,7 +73,7 @@ export const ChatProductComparisonMessage = observer((properties) => {
         console.warn('ChatProductComparisonMessage received message with unsupported type:', messageType, 'Expected type: productComparison');
         return null;
     }
-    const headings = comparisonData.features.length ? Object.keys(comparisonData.features[0].values) : [];
+    const headings = searchResults.length ? searchResults.map((r) => String(r?.id)) : [];
     const getDisplay = (r) => r?.display || r;
     const allProductsHaveImage = headings.length > 0 && headings.every((heading) => !!getDisplay(searchResults.find((r) => r?.id === heading))?.mappings?.core?.imageUrl);
     return comparisonData.features.length ? (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-product-comparison-message', className, internalClassName), ...styling, children: _jsx("div", { className: classnames('ss__chat-product-comparison-message__table-wrapper'), children: _jsxs("table", { className: classnames('ss__chat-product-comparison-message__table'), children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), headings.map((heading) => {

package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA+ZrE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAwNvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
+{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA+ZrE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CA0OvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}

package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js

@@ -407,7 +407,10 @@ export const ChatProductQueryMessage = observer((properties) => {
         controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
         controller?.store.clearProductQuickview();
     };
-    return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__price'), children: _jsx(Price, { value: displayedCore.price }) }))] }), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { content: 'Add to Cart', onClick: () => controller?.addToCart(sourceProduct) }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { content: 'Show Similar', onClick: () => controller?.discussProduct(sourceProduct, { requestType: 'productSimilar' }) }) }))] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), children: selection.values.map((selectionValue) => {
+    return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__price'), children: _jsx(Price, { value: displayedCore.price }) }))] }), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { content: 'Add to Cart', onClick: () => {
+                                                    controller?.track.product.addToCart(product);
+                                                    controller?.addToCart(product);
+                                                } }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { content: 'Show Similar', onClick: () => controller?.discussProduct(sourceProduct, { requestType: 'productSimilar' }) }) }))] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), children: selection.values.map((selectionValue) => {
                                     const isUnavailable = !selectionValue.available;
                                     const isSelected = selection.selected?.value === selectionValue.value;
                                     return (_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__swatch', {
@@ -417,5 +420,5 @@ export const ChatProductQueryMessage = observer((properties) => {
                                 }) })] }, selection.field))) })), infoRows.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Product Information" }), _jsx("table", { className: classnames('ss__chat-product-query-message__section__table'), children: _jsx("tbody", { children: infoRows.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: row.label }), _jsx("td", { children: row.rawKey === 'availability' ? (_jsx("span", { className: classnames({
                                                     'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
                                                     'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
-                                                }), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Description" }), _jsx("div", { className: classnames('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
+                                                }), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsx(Price, { value: Number(row.value) })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Description" }), _jsx("div", { className: classnames('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAu+BrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAirC/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAwgCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAwwC/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B"}

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

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

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

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

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

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