@athoscommerce/snap-preact 1.13.3-beta.168 → 1.13.3-beta.191

package/dist/cjs/components/src/components/Molecules/Slideshow/Slideshow.js

@@ -30,6 +30,10 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
             display: 'flex',
             width: `100%`,
             transition: 'transform 0.3s ease-in-out',
+            // keep the track on its own compositor layer at all times; otherwise Chrome promotes it
+            // when a transform transition starts and demotes it when it ends, re-rasterizing the
+            // (scaled) slide content each time, which reads as every image flickering
+            willChange: 'transform',
             // Disable transition during dragging
             '&.ss__slideshow__track--dragging': {
                 transition: 'none',
@@ -271,6 +275,8 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
         return () => observer.disconnect();
     }, []);
     // Touch/Drag state
+    // drag positions live in refs so the document-level mousemove/mouseup listeners
+    // (registered once per drag) always read current values instead of stale state
     const [isDragging, setIsDragging] = (0, hooks_1.useState)(false);
     // mirrors `isDragging` state - the state drives renders (the dragging class, the transform,
     // the autoplay effect), but the drag handlers below run through refs and can fire before
@@ -430,8 +436,17 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
             return;
         const diff = currentXRef.current - startXRef.current;
         const threshold = getNavigationThreshold();
+        const slideWidthPx = (trackRef.current?.parentElement?.offsetWidth || 0) / visibleSlides;
         if (Math.abs(diff) > threshold) {
-            if (diff > 0 && (loop || currentIndex > 0)) {
+            const slidesDragged = slideWidthPx > 0 ? Math.round(Math.abs(diff) / slideWidthPx) : 0;
+            if (slidesDragged > slidesToMove) {
+                // long drags land on the slide group they were dragged to instead of snapping back
+                setCurrentIndex((prevIndex) => {
+                    const newIndex = diff > 0 ? prevIndex - slidesDragged : prevIndex + slidesDragged;
+                    return Math.max(0, Math.min(maxIndex, newIndex));
+                });
+            }
+            else if (diff > 0 && (loop || currentIndex > 0)) {
                 // Dragged right - go to previous
                 goToPrevious();
             }
@@ -516,6 +531,16 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
             }, autoPlayInterval);
         }
     };
+    // The browser fires a click after a drag's mouseup/touchend. Catch it in the capture phase on
+    // the container so it never reaches slide content that carries its own onClick (e.g. product
+    // cards that open a quickview) — those handlers can't know a drag just happened.
+    const handleContainerClickCapture = (event) => {
+        if (!hasDraggedRef.current)
+            return;
+        hasDraggedRef.current = false;
+        event.stopPropagation();
+        event.preventDefault();
+    };
     // Handle image click
     const handleSlideClick = (slide, index) => {
         if (slide.onClick && !isDragging && !hasDraggedRef.current) {
@@ -662,27 +687,29 @@ exports.Slideshow = (0, mobx_react_lite_1.observer)((properties) => {
     }, { activeBreakpoint: globalTheme?.activeBreakpoint });
     return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__slideshow', className), ref: slideshowRef, role: "region", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-roledescription": "slideshow", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 
             // @ts-ignore - ignore
-            onKeyDown: handleKeyDown, tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__container", children: (0, jsx_runtime_1.jsx)("div", { ref: trackRef, className: (0, classnames_1.default)('ss__slideshow__track', {
+            onKeyDown: handleKeyDown, tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), (0, jsx_runtime_1.jsx)("div", { className: "ss__slideshow__container", 
+                    // @ts-ignore - capture-phase click
+                    onClickCapture: touchDragging ? handleContainerClickCapture : undefined, 
+                    // Touch events
+                    // @ts-ignore - touch events
+                    onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
+                    // @ts-ignore - touch events
+                    onTouchMove: touchDragging
+                        ? (event) => {
+                            if (isDraggingRef.current) {
+                                event.preventDefault(); // Prevent scrolling while dragging
+                            }
+                            const touch = event.touches[0];
+                            handleDragMove(touch.clientX);
+                        }
+                        : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
+                    // mouse events for desktop dragging
+                    // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the container
+                    // @ts-ignore - mouse events
+                    onMouseDown: touchDragging ? handleMouseDown : undefined, children: (0, jsx_runtime_1.jsx)("div", { ref: trackRef, className: (0, classnames_1.default)('ss__slideshow__track', {
                             'ss__slideshow__track--dragging': isDragging,
                             'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= computedSlidesToShow,
-                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
-                        // Touch events
-                        // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
-                        // @ts-ignore - touch events
-                        onTouchMove: touchDragging
-                            ? (event) => {
-                                if (isDraggingRef.current) {
-                                    event.preventDefault(); // Prevent scrolling while dragging
-                                }
-                                const touch = event.touches[0];
-                                handleDragMove(touch.clientX);
-                            }
-                            : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
-                        // mouse events for desktop dragging
-                        // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the track
-                        // @ts-ignore - mouse events
-                        onMouseDown: touchDragging ? handleMouseDown : undefined, children: normalizedSlides.map((slide, index) => {
+                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, children: normalizedSlides.map((slide, index) => {
                             const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             const hasClickHandler = !!slide.onClick;
                             const hasContent = !!slide.content;

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

@@ -399,7 +399,6 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)((properties) => {
         position: 'right',
         hideMessageTypeIndicatorText: false,
         buttonBelowMessage: false,
-        poweredByText: 'Powered by Athos Commerce.',
     };
     let props = (0, utilities_1.mergeProps)('chat', globalTheme, defaultProps, properties);
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('chat', props);
@@ -501,7 +500,13 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)((properties) => {
     const sideChatTypes = isMobile
         ? ['inspirationResult', ...(isFirstMobileComparison ? ['productComparison'] : []), ...(mobileProductInfoOpen ? ['productQuery'] : [])]
         : ['inspirationResult', 'productComparison', 'productQuery'];
-    const shouldShowSideChat = activeMessage && sideChatTypes.includes(activeMessage?.messageType) && store.currentChat?.dismissedSideChatMessageId !== activeMessage.id;
+    // productQuery panels are additionally driven by the chat quickview store — the controller's
+    // `show()` opening the store is what opens the window, and `close()` is what dismisses it
+    const quickviewOpen = Boolean(controller.quickviewManager?.store.isOpen);
+    const shouldShowSideChat = activeMessage &&
+        sideChatTypes.includes(activeMessage?.messageType) &&
+        store.currentChat?.dismissedSideChatMessageId !== activeMessage.id &&
+        (activeMessage.messageType !== 'productQuery' || quickviewOpen);
     const hasSideChat = !!shouldShowSideChat;
     // Lock body scrolling (wheel + touch) to the chat while it is open. Mobile only —
     // on desktop the chat is a side panel and the page behind it stays scrollable.
@@ -514,7 +519,8 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)((properties) => {
             if (e.key !== 'Escape')
                 return;
             if (store.currentChat?.activeMessage && shouldShowSideChat) {
-                store.currentChat?.dismissSideChat();
+                // dismiss through the controller so the product quickview closes with the window
+                controller.dismissSideChat();
             }
             else {
                 controller.handlers.button.click();
@@ -547,7 +553,8 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)((properties) => {
             item.requestType !== 'productComparison');
         productAttachmentsToRemove.forEach((item) => store.currentChat?.attachments.remove(item.id));
         setMobileProductInfoOpen(false);
-        store.currentChat?.dismissSideChat();
+        // dismiss through the controller so the product quickview closes with the window
+        controller.dismissSideChat();
     };
     const requestType = store.currentChat?.requestType;
     const loadingVerbLangKey = requestType ? LOADING_VERB_LANG_KEYS[requestType] : undefined;
@@ -609,7 +616,7 @@ exports.ChatOrganism = (0, mobx_react_lite_1.observer)((properties) => {
                             // On mobile, interacting with the primary chat (header or anywhere within)
                             // dismisses the secondary panel. Capture phase so it fires even when an
                             // inner control stops propagation.
-                            onClickCapture: isMobile && shouldShowSideChat ? () => dismissSideChat() : undefined, children: [(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)(Image_1.Image, { className: "ss__chat__header__title__logo", src: logo, alt: title || 'Chat 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, { className: "ss__chat__header__button--new", "aria-label": (0, Chat_lang_1.langAttrOf)(lang.newChatButton, 'aria-label'), icon: { icon: controller.store.initChatLoading ? 'spinner' : 'plus-rounded', title: (0, Chat_lang_1.langAttrOf)(lang.newChatButton, 'title') }, onClick: () => controller.store.createChat() }), store.chats.length > 1 && (0, jsx_runtime_1.jsx)(ChatHistory_1.ChatHistory, { ...subProps.history, controller: controller }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__header__button--close", "aria-label": (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'aria-label'), icon: { icon: 'close-rounded', title: (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'title') }, onClick: () => controller.handlers.button.click() })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)(ChatSessionFeedback_1.ChatSessionFeedback, { ...subProps.sessionFeedback, controller: controller }), (0, jsx_runtime_1.jsx)("div", { ref: headerRef, className: (0, classnames_1.default)('ss__chat__content__header', {
+                            onClickCapture: isMobile && shouldShowSideChat ? () => dismissSideChat() : undefined, 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)(Image_1.Image, { className: "ss__chat__header__title__logo", src: logo, alt: title || (0, Chat_lang_1.langAttrOf)(lang.headerLogo, 'alt') || '' })) : 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, { className: "ss__chat__header__button--new", "aria-label": (0, Chat_lang_1.langAttrOf)(lang.newChatButton, 'aria-label'), icon: { icon: controller.store.initChatLoading ? 'spinner' : 'plus-rounded', title: (0, Chat_lang_1.langAttrOf)(lang.newChatButton, 'title') }, onClick: () => controller.store.createChat() }), store.chats.length > 1 && (0, jsx_runtime_1.jsx)(ChatHistory_1.ChatHistory, { ...subProps.history, controller: controller }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__header__button--close", "aria-label": (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'aria-label'), icon: { icon: 'close-rounded', title: (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'title') }, onClick: () => controller.handlers.button.click() })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)(ChatSessionFeedback_1.ChatSessionFeedback, { ...subProps.sessionFeedback, controller: controller }), (0, jsx_runtime_1.jsx)("div", { ref: headerRef, className: (0, classnames_1.default)('ss__chat__content__header', {
                                                 'ss__chat__content__header--overlay': messagesOverflow,
                                             }), children: (0, jsx_runtime_1.jsx)(ChatComparisonsTray_1.ChatComparisonsTray, { ...subProps.comparisonsTray, controller: controller }) }), (0, jsx_runtime_1.jsx)(ChatMessages_1.ChatMessages, { ...subProps.messages, controller: controller, messagesContainerRef: messagesContainerRef, messagesEndRef: messagesEndRef, mobile: isMobile, avatarCharacter: avatarCharacter, avatarImage: avatarImage, sideChatOpen: !!shouldShowSideChat, onProductQuickView: () => setMobileProductInfoOpen(true), scrollToBottom: scrollToBottom, scrollToBottomIfNear: scrollToBottomIfNear, showNewMessages: showNewMessages, setShowNewMessages: setShowNewMessages, messagesOverflow: messagesOverflow }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { ...subProps.loadingIndicator, loading: store.loading, verbs: loadingVerbs }), !store.currentChat?.isExpired ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer", ref: footerRef, ...dragHandlers, children: [(store.error || store.chatEnabled === false) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__error", children: store.error?.message || (0, Chat_lang_1.langTextOf)(lang.chatUnavailableMessage) })), (0, jsx_runtime_1.jsx)(ChatTopicDrift_1.ChatTopicDrift, { ...subProps.topicDrift, controller: controller, variant: "sessionLimit" }), (0, jsx_runtime_1.jsx)(ChatFacetsBar_1.ChatFacetsBar, { ...subProps.facetsBar, controller: controller, chatRef: chatRef, multiselectFacets: multiselectFacets }), (0, jsx_runtime_1.jsx)(ChatAttachments_1.ChatAttachments, { ...subProps.attachments, controller: controller, activeMessage: activeMessage, sideChatOpen: !!shouldShowSideChat, mobile: isMobile, onProductQuickView: () => setMobileProductInfoOpen(true), onProductAttachmentsRemoved: () => setMobileProductInfoOpen(false) }), (0, jsx_runtime_1.jsx)(ChatTopicDrift_1.ChatTopicDrift, { ...subProps.topicDrift, controller: controller, variant: "drift" }), (0, jsx_runtime_1.jsx)(ChatComposer_1.ChatComposer, { ...subProps.composer, controller: controller, fileInputRef: fileInputRef, onUserSend: () => {
                                                         if (isMobile && mobileProductInfoOpen) {

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

@@ -10,6 +10,9 @@ exports.chatDefaultLang = {
     closeChatButton: {
         attributes: { 'aria-label': 'Close chat', title: 'Close Chat' },
     },
+    headerLogo: {
+        attributes: { alt: 'Chat logo' },
+    },
     newChatButton: {
         attributes: { 'aria-label': 'New chat', title: 'New Chat' },
     },
@@ -69,6 +72,7 @@ exports.chatDefaultLang = {
     attachmentCompareTitle: { value: 'Compare these products' },
     attachmentAskProductTitle: { value: 'Ask about this product' },
     attachmentImageSimilarTitle: { value: 'Find products similar to this image:' },
+    attachmentImageName: { value: 'Image' },
     topicDriftScopeMessage: { value: "I'm here to help with shopping" },
     topicDriftScopeSubMessage: { value: 'Try asking about products, comparisons, or recommendations' },
     topicDriftMessage: { value: 'Looking for something new?' },
@@ -89,6 +93,7 @@ exports.chatDefaultLang = {
         attributes: { 'aria-label': 'Send Message', title: 'Send Message' },
     },
     dropOverlayText: { value: 'Drop image to upload' },
+    poweredByText: { value: 'Powered by Athos Commerce.' },
     disclaimerText: { value: 'AI-powered assistant. It sometimes makes mistakes. Avoid sharing personal data.' },
     privacyPolicyLinkText: { value: 'Privacy Policy' },
     expiredMessage: { value: 'This chat is expired. Please start a new chat.' },

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

@@ -69,7 +69,8 @@ exports.ChatAttachments = (0, mobx_react_lite_1.observer)((props) => {
     const dismissProductAttachment = (id) => {
         store.currentChat?.attachments.remove(id);
         props.onProductAttachmentsRemoved && props.onProductAttachmentsRemoved();
-        store.currentChat?.dismissSideChat();
+        // dismiss through the controller so a product quickview closes with the window
+        controller.dismissSideChat();
     };
     const productItems = productAttachments.map((item) => {
         const remove = () => dismissProductAttachment(item.id);
@@ -83,7 +84,7 @@ exports.ChatAttachments = (0, mobx_react_lite_1.observer)((props) => {
     });
     const imageItems = imageAttachments.map((item) => ({
         id: item.id,
-        name: item.fileName || 'Image',
+        name: item.fileName || (0, Chat_lang_1.langTextOf)(lang.attachmentImageName) || '',
         imageUrl: item.base64 || item.thumbnailUrl || '',
         isLoading: item.state === 'loading',
         hasError: !!item.error,
@@ -95,10 +96,10 @@ exports.ChatAttachments = (0, mobx_react_lite_1.observer)((props) => {
     const imageTitle = (imageItems.length > 0 && !hasImageError ? (0, Chat_lang_1.langTextOf)(lang.attachmentImageSimilarTitle) : '') || '';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [comparisonItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { ...subProps.attachmentContext, title: (0, Chat_lang_1.langTextOf)(lang.attachmentCompareTitle) || '', items: comparisonItems, onClose: () => {
                     store.currentChat?.comparisons.resetCommitted();
-                    store.currentChat?.dismissSideChat();
+                    controller.dismissSideChat();
                 } })), productItems.length > 0 && ((0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { ...subProps.attachmentContext, title: productTitle, items: productItems, onClose: () => {
                     productAttachments.forEach((item) => store.currentChat?.attachments.remove(item.id));
                     props.onProductAttachmentsRemoved && props.onProductAttachmentsRemoved();
-                    store.currentChat?.dismissSideChat();
+                    controller.dismissSideChat();
                 } })), imageItems.length > 0 && (0, jsx_runtime_1.jsx)(ChatAttachmentContext_1.ChatAttachmentContext, { ...subProps.attachmentContext, title: imageTitle, items: imageItems })] }));
 });

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

@@ -43,7 +43,8 @@ const defaultStyles = ({ primaryColorBg, primaryColorFg }) => {
                 'input[type="text"]': {
                     padding: '0.5em 0',
                     margin: '0 0 0 1em',
-                    flex: '1 0 auto',
+                    flex: '1 1 0%',
+                    minWidth: 0,
                     border: 'none',
                     backgroundColor: 'transparent',
                     '&::placeholder': {
@@ -113,7 +114,6 @@ exports.ChatComposer = (0, mobx_react_lite_1.observer)((properties) => {
     const globalTheme = (0, providers_1.useTheme)();
     const globalTreePath = (0, providers_1.useTreePath)();
     const defaultProps = {
-        poweredByText: 'Powered by Athos Commerce.',
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.mergeProps)('chatComposer', globalTheme, defaultProps, properties);
@@ -162,5 +162,5 @@ exports.ChatComposer = (0, mobx_react_lite_1.observer)((properties) => {
                                         return;
                                     controller.search();
                                     onUserSend && onUserSend();
-                                } }) })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__disclaimer', children: (0, jsx_runtime_1.jsxs)("i", { children: [poweredByText, " ", (0, Chat_lang_1.langTextOf)(lang.disclaimerText), privacyPolicyUrl && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [' ', (0, jsx_runtime_1.jsx)("a", { href: privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", children: (0, Chat_lang_1.langTextOf)(lang.privacyPolicyLinkText) })] }))] }) })] }) }));
+                                } }) })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__disclaimer', children: (0, jsx_runtime_1.jsxs)("i", { children: [poweredByText ?? (0, Chat_lang_1.langTextOf)(lang.poweredByText), " ", (0, Chat_lang_1.langTextOf)(lang.disclaimerText), privacyPolicyUrl && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [' ', (0, jsx_runtime_1.jsx)("a", { href: privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer", children: (0, Chat_lang_1.langTextOf)(lang.privacyPolicyLinkText) })] }))] }) })] }) }));
 });

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

@@ -16,7 +16,7 @@ const hooks_2 = require("../../../../hooks");
 const Button_1 = require("../../../Atoms/Button");
 const ChatInspirationResultMessage_1 = require("../../../Molecules/ChatInspirationResultMessage");
 const ChatProductComparisonMessage_1 = require("../../../Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage");
-const ChatProductQueryMessage_1 = require("../../../Molecules/ChatProductQueryMessage/ChatProductQueryMessage");
+const ChatQuickview_1 = require("../../../Molecules/ChatQuickview/ChatQuickview");
 const useChatGestures_1 = require("../hooks/useChatGestures");
 const Chat_lang_1 = require("../Chat.lang");
 const defaultStyles = ({ mobile, footerHeight, primaryColorBg }) => {
@@ -135,7 +135,7 @@ exports.ChatSideChat = (0, mobx_react_lite_1.observer)((properties) => {
             theme: props.theme,
             treePath,
         },
-        productQueryMessage: {
+        quickview: {
             disableStyles,
             theme: props.theme,
             treePath,
@@ -158,7 +158,7 @@ exports.ChatSideChat = (0, mobx_react_lite_1.observer)((properties) => {
             case 'productComparison':
                 return ((0, jsx_runtime_1.jsx)(ChatProductComparisonMessage_1.ChatProductComparisonMessage, { ...subProps.productComparisonMessage, chatItem: activeMessage, controller: controller }));
             case 'productQuery':
-                return ((0, jsx_runtime_1.jsx)(ChatProductQueryMessage_1.ChatProductQueryMessage, { ...subProps.productQueryMessage, chatItem: activeMessage, controller: controller, displayFields: controller.config.settings?.quickview?.displayFields, primaryColor: primaryColorBg, primaryColorText: primaryColorFg }));
+                return ((0, jsx_runtime_1.jsx)(ChatQuickview_1.ChatQuickview, { ...subProps.quickview, chatItem: activeMessage, controller: controller, primaryColor: primaryColorBg, primaryColorText: primaryColorFg }));
             default:
                 return null;
         }

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

@@ -4,7 +4,7 @@ exports.chatAccentThemeComponents = void 0;
 const utilities_1 = require("../../../../utilities");
 /**
  * Accent styling for buttons living inside child components (ChatResult's cart /
- * inquire icons and ChatProductQueryMessage's action buttons) — injected through
+ * inquire icons and ChatQuickview's action buttons) — injected through
  * the theme so each child applies it via its own style pipeline instead of the
  * organism reaching in with `!important` overrides.
  */
@@ -30,27 +30,29 @@ const chatAccentThemeComponents = ({ primaryAccentColorBg, primaryAccentColorFg,
                 },
             },
         },
-        chatProductQueryMessage: {
+        chatQuickview: {
             style: {
-                '.ss__chat-product-query-message__header__product__actions': {
-                    '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
-                        background: primaryAccentColorBg,
-                        color: primaryAccentColorFg,
-                        svg: {
-                            fill: primaryAccentColorFg,
-                            stroke: primaryAccentColorFg,
-                        },
-                        '&:not(.ss__button--disabled):hover': {
-                            background: new utilities_1.Colour(primaryAccentColorBg).mixBlack(),
-                        },
+                '.ss__quickview__add-to-cart.ss__button': {
+                    background: primaryAccentColorBg,
+                    color: primaryAccentColorFg,
+                    svg: {
+                        fill: primaryAccentColorFg,
+                        stroke: primaryAccentColorFg,
                     },
-                    '.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: secondaryAccentColorBg,
-                        color: secondaryAccentColorFg,
-                        border: `1px solid ${secondaryAccentColorFg}`,
-                        '&:not(.ss__button--disabled):hover': {
-                            background: new utilities_1.Colour(secondaryAccentColorBg).mixBlack(),
-                        },
+                    '&:not(.ss__button--disabled):hover': {
+                        background: new utilities_1.Colour(primaryAccentColorBg).mixBlack(),
+                    },
+                },
+                '.ss__quickview__more-info.ss__button, .ss__quickview__similar.ss__button, .ss__quickview__discuss.ss__button': {
+                    background: secondaryAccentColorBg,
+                    color: secondaryAccentColorFg,
+                    border: `1px solid ${secondaryAccentColorFg}`,
+                    svg: {
+                        fill: secondaryAccentColorFg,
+                        stroke: secondaryAccentColorFg,
+                    },
+                    '&:not(.ss__button--disabled):hover': {
+                        background: new utilities_1.Colour(secondaryAccentColorBg).mixBlack(),
                     },
                 },
             },

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

@@ -258,7 +258,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         hideBadge: false,
     };
     const props = (0, utilities_1.mergeProps)('quickviewLayout', globalTheme, defaultProps, properties);
-    const { quickviewManager, className, internalClassName, disableStyles, treePath, hideBadge, column1, column2, column3, column4, recommendation } = props;
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, hideBadge, variantDropdownType, column1, column2, column3, column4, recommendation, } = props;
     // NOTE: the `!shouldRenderDefault` return lives below the last hook call — every hook in this
     // component must run unconditionally on every render (shouldRenderDefault can flip while
     // mounted, e.g. when a pending customComponent import resolves or fails).
@@ -281,6 +281,12 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         moreInfoButton: {
             value: 'More info',
         },
+        similarButton: {
+            value: 'Similar',
+        },
+        discussButton: {
+            value: 'Discuss',
+        },
         loadingText: {
             value: 'Loading…',
         },
@@ -343,7 +349,8 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     // is within it).
     (0, hooks_1.useEffect)(() => {
         const isOpenNow = Boolean(quickviewManager?.store?.isOpen);
-        if (!shouldRenderDefault || !isOpenNow)
+        // inline embeds (e.g. the chat secondary window) are not modal — Escape must not close them
+        if (!shouldRenderDefault || !isOpenNow || props.inline)
             return;
         const onKey = (e) => {
             if (e.key === 'Escape' && !galleryOpen) {
@@ -352,7 +359,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [shouldRenderDefault, quickviewManager?.store?.isOpen, galleryOpen]);
+    }, [shouldRenderDefault, quickviewManager?.store?.isOpen, galleryOpen, props.inline]);
     // Recommendation modules. `findModule` runs inside .map()/recursion and must not call hooks, so
     // resolve every referenced profile's controller + components here (stable order) and let
     // findModule read from this map. Mirrors Organisms/NoResults.
@@ -449,12 +456,18 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     };
     // Dialog semantics + focus trap for the quickview content, following the autocomplete
     // containers (AutocompleteModal/AutocompleteSlideout): useA11y traps Tab within the
-    // content and wires Escape to the callback above.
+    // content and wires Escape to the callback above. Inline embeds (e.g. the chat secondary
+    // window) are part of the surrounding page — no dialog role and no focus trap, which
+    // would otherwise stop the shopper tabbing out to the chat composer.
     const contentProps = {
         className: 'ss__quickview__content',
-        role: 'dialog',
-        'aria-modal': 'true',
-        ref: (e) => (0, hooks_2.useA11y)(e, 0, true, handleEscape),
+        ...(props.inline
+            ? {}
+            : {
+                role: 'dialog',
+                'aria-modal': 'true',
+                ref: (e) => (0, hooks_2.useA11y)(e, 0, true, handleEscape),
+            }),
         ...mergedLang.quickview?.attributes,
     };
     // Prefer `product.display` so the displayed name/image/attributes reflect the
@@ -549,17 +562,23 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         // the selection whose field matches (e.g. `variantSelection.color`). The field also matches its
         // component-name form (`color_family` → `color-family`). A bare `variantSelection` module is
         // not supported.
+        // `variantDropdownType` swaps the component for selections that aren't swatches.
+        const renderSelection = (selection) => {
+            const isSwatch = selection.type === 'swatch' || selection.type === 'swatches';
+            const type = variantDropdownType && !isSwatch ? variantDropdownType : selection.type;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }, selection.field));
+        };
         if (module == 'variantSelections') {
             if (!selections || selections.length === 0)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variants", children: selections.map((selection) => ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: selection.type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }, selection.field))) }));
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variants", children: selections.map((selection) => renderSelection(selection)) });
         }
         if (module.startsWith('variantSelection.')) {
             const name = module.slice('variantSelection.'.length);
             const selection = selections?.find((selection) => selection.field === name || (0, snap_toolbox_1.fieldNameToComponentName)(selection.field) === name);
             if (!name || !selection)
                 return null;
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: selection.type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }));
+            return renderSelection(selection);
         }
         if (module == 'button.add-to-cart') {
             if (!product)
@@ -569,7 +588,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         if (module == 'button.more-info') {
             if (!url)
                 return null;
-            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "more-info", internalClassName: "ss__quickview__go-to-product", lang: { button: lang.moreInfoButton }, onClick: (e) => {
+            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "more-info", internalClassName: "ss__quickview__more-info", lang: { button: lang.moreInfoButton }, onClick: (e) => {
                     // track the redirect to the product page as a quickview clickThrough
                     // before navigating away (delegated with `quickView: true`)
                     if (product) {
@@ -578,6 +597,20 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
                     window.location.href = url;
                 }, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
         }
+        // Chat-only modules: `button.similar` and `button.discuss` forward to the chat controller
+        // that opened the quickview. They render nothing for non-chat source controllers, so a
+        // layout carrying them stays safe to share across surfaces.
+        if (module == 'button.similar' || module == 'button.discuss') {
+            const chatController = quickviewManager.sourceController?.type === 'chat' ? quickviewManager.sourceController : undefined;
+            if (!product || !chatController)
+                return null;
+            if (module == 'button.similar') {
+                if (!chatController.store.features?.similarProducts?.enabled)
+                    return null;
+                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "similar", internalClassName: "ss__quickview__similar", lang: { button: lang.similarButton }, onClick: () => chatController.productSimilar(product), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
+            }
+            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "discuss", internalClassName: "ss__quickview__discuss", lang: { button: lang.discussButton }, onClick: () => chatController.productQuery(product), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
+        }
         // `quantityPicker` binds to the observable `product.quantity`, which `button.add-to-cart`
         // (via the cart store) picks up when the product is added.
         if (module == 'quantityPicker') {
@@ -613,5 +646,5 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     }
     const topRowCounter = { value: 0 };
     const closeButton = ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__quickview__close", icon: "close-thin", lang: { button: lang.closeButton }, onClick: () => onClose(), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [!props.inline && closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
 });

package/dist/cjs/components/src/index.js

@@ -44,7 +44,7 @@ __exportStar(require("./components/Molecules/ChatInspirationResultMessage"), exp
 __exportStar(require("./components/Molecules/ChatMessageText"), exports);
 __exportStar(require("./components/Molecules/ChatMessageUser"), exports);
 __exportStar(require("./components/Molecules/ChatProductComparisonMessage"), exports);
-__exportStar(require("./components/Molecules/ChatProductQueryMessage"), exports);
+__exportStar(require("./components/Molecules/ChatQuickview"), exports);
 __exportStar(require("./components/Molecules/ChatResult"), exports);
 __exportStar(require("./components/Molecules/ChatResultsDisplay"), exports);
 __exportStar(require("./components/Molecules/ChatSuggestedQuestions"), exports);

package/dist/cjs/components/src/providers/themeComponents.js

@@ -35,7 +35,7 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'chatMessageText',
     'chatMessageUser',
     'chatProductComparisonMessage',
-    'chatProductQueryMessage',
+    'chatQuickview',
     'chatResult',
     'chatResultsDisplay',
     'chatSuggestedQuestions',

package/dist/cjs/src/Snap.js

@@ -126,7 +126,7 @@ class Snap {
                     profiler: services?.profiler,
                     logger: services?.logger,
                     tracker: services?.tracker || this.tracker,
-                    quickviewManager: services?.quickviewManager || this.quickviewManager,
+                    quickviewManager: services?.quickviewManager || (type === snap_controller_1.ControllerTypes.chat ? this.chatQuickviewManager : this.quickviewManager),
                 });
             }
             if (callback) {
@@ -496,6 +496,18 @@ class Snap {
                 this.logger.error(`Failed to create the Quickview Manager.`, err);
             }
         }
+        // Create the chat quickview manager whenever chat controllers are configured — even
+        // without a `quickview` config, since chat needs no component target (the productQuery
+        // panel renders a QuickviewLayout inline). Settings inherit from the quickview config
+        // when one exists so displayFields/imagesField behave consistently across both surfaces.
+        if (this.config.controllers?.chat?.length) {
+            try {
+                this.chatQuickviewManager = new snap_controller_1.QuickviewManager({}, { ...(this.config.quickview?.config || {}), id: 'chat-quickview' });
+            }
+            catch (err) {
+                this.logger.error(`Failed to create the chat Quickview Manager.`, err);
+            }
+        }
         // create controllers
         Object.keys(this.config?.controllers || {}).forEach((type) => {
             switch (type) {

package/dist/cjs/src/Templates/Stores/LibraryStore.js

@@ -41,7 +41,7 @@ class LibraryStore {
             chatMessageText: {},
             chatMessageUser: {},
             chatProductComparisonMessage: {},
-            chatProductQueryMessage: {},
+            chatQuickview: {},
             chatResult: {},
             chatResultsDisplay: {},
             chatSuggestedQuestions: {},
@@ -262,7 +262,7 @@ class LibraryStore {
                 chatMessageText: {},
                 chatMessageUser: {},
                 chatProductComparisonMessage: {},
-                chatProductQueryMessage: {},
+                chatQuickview: {},
                 chatResult: {},
                 chatResultsDisplay: {},
                 chatSuggestedQuestions: {},