@athoscommerce/snap-preact 1.2.2 → 1.2.3-beta.1

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

@@ -0,0 +1,19 @@
+export type ChatAttachmentContextItem = {
+    id: string;
+    name: string;
+    imageUrl?: string;
+    isLoading?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    onClick?: () => void;
+    onRemove?: () => void;
+};
+export type ChatAttachmentContextProps = {
+    title: string;
+    items: ChatAttachmentContextItem[];
+    onClose?: () => void;
+};
+export declare const ChatAttachmentContext: ((props: ChatAttachmentContextProps) => JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=ChatAttachmentContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachmentContext.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatAttachmentContext.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,WAAoB,0BAA0B,KAAG,GAAG,CAAC,OAAO;;CA8D5F,CAAC"}

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

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { Image } from '../../Atoms/Image';
+import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
+export const ChatAttachmentContext = observer((props) => {
+    const { title, items, onClose } = props;
+    if (!items || items.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs("div", { className: 'ss__chat__attachment-context', children: [_jsxs("div", { className: 'ss__chat__attachment-context__label', children: [_jsx("span", { children: title }), onClose && (_jsx("div", { className: 'ss__chat__attachment-context__label__close', onClick: onClose, children: _jsx(Icon, { icon: 'close-thin', size: '12px' }) }))] }), _jsx("div", { className: 'ss__chat__attachment-context__items', children: items.map((item) => (_jsxs("div", { className: classnames('ss__chat__attachment-context__item', { error: item.hasError, clickable: !!item.onClick }), onClick: item.onClick, style: item.onClick ? { cursor: 'pointer' } : undefined, children: [item.hasError ? (_jsxs(_Fragment, { children: [_jsx("div", { className: 'ss__chat__attachment-context__item__error-icon', children: "\u26A0" }), _jsx("div", { className: 'ss__chat__attachment-context__item__error-message', children: item.errorMessage || `Upload Failed - ${item.name}` })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'ss__chat__attachment-context__item__content', children: [item.imageUrl && _jsx(Image, { className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && (_jsxs("div", { className: 'ss__chat__attachment-context__item__loading', children: [_jsx("div", { className: 'ss__chat__loading__dot' }), _jsx("div", { className: 'ss__chat__loading__dot' }), _jsx("div", { className: 'ss__chat__loading__dot' })] }))] }), _jsx("div", { className: 'ss__chat__attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose) && (_jsx(Button, { className: 'ss__chat__attachment-context__item__remove', onClick: () => !item.isLoading && item.onRemove?.(), icon: {
+                                icon: 'close-thin',
+                                size: '0.6em',
+                            } }))] }, item.id))) })] }));
+});

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

@@ -0,0 +1,12 @@
+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 interface ChatResultProps extends ComponentProps {
+    result: Product;
+    controller: ChatController;
+    scrollToBottom: () => void;
+}
+//# sourceMappingURL=ChatResult.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { Image } from '../../Atoms/Image';
+import { Button } from '../../Atoms/Button';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { css, useTheme, useTreePath, useSnap } from '../../../providers';
+import { CalloutBadge, OverlayBadge, Price } from '../../..';
+import { useComponent } from '../../../hooks';
+const defaultStyles = () => {
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        boxSizing: 'border-box',
+        border: '1px solid #e5e7eb',
+        borderRadius: '1em',
+        overflow: 'hidden',
+        '.ss__chat__result__image': {
+            width: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            '.ss__chat__result__image__buttons': {
+                position: 'absolute',
+                bottom: 0,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '0.5em',
+                padding: '0.5em',
+                '.ss__button': {
+                    padding: '0.25em 0.5em',
+                    background: 'rgba(255, 255, 255, 0.9)',
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '2em',
+                    boxShadow: 'inset 0 0 1px 0px rgba(0, 0, 0, 0.5)',
+                    flex: '1 1 0',
+                    minWidth: 0,
+                    fontWeight: 'bold',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                },
+            },
+            '.ss__chat__result__image__icons': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                gap: '0.5em',
+                padding: '0.5em',
+                flex: '0 0 auto',
+                alignItems: 'flex-start',
+                '.ss__button': {
+                    height: '2.5em',
+                    width: '2.5em',
+                    backgroundColor: '#000',
+                    borderRadius: '50%',
+                    justifyContent: 'center',
+                    '&.ss__chat__result__image__icons__icon--cart': {
+                        backgroundColor: '#feeeae',
+                        svg: {
+                            fill: '#000',
+                            stroke: '#000',
+                        },
+                    },
+                    svg: {
+                        fill: '#fff',
+                        stroke: '#fff',
+                    },
+                },
+            },
+        },
+        '.ss__chat__result__content': {
+            background: '#f9fafb',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5em',
+            flex: '1 1 auto',
+            padding: '0.5em 0',
+            '.ss__chat__result__content__title--primary': {
+                padding: '0 0.5em',
+            },
+            '.ss__chat__result__content__title--secondary': {
+                padding: '0 0.5em',
+                color: '#6A7282',
+                fontSize: '90%',
+            },
+            '.ss__chat__result__content__price': {
+                padding: '0 0.5em',
+                color: '#000',
+                fontWeight: 'bold',
+                fontSize: '1.2em',
+                marginTop: 'auto',
+            },
+        },
+    });
+};
+export const ChatResult = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const snap = useSnap();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatResult', globalTheme, defaultProps, properties);
+    const { controller, result, scrollToBottom, customComponent } = props;
+    if (customComponent) {
+        const ComponentOverride = useComponent(snap?.templates?.library.import.component.result || {}, customComponent);
+        if (ComponentOverride) {
+            return _jsx(ComponentOverride, { ...props });
+        }
+    }
+    const isInComparison = controller.store.currentChat?.comparisons.items.some((item) => item.result?.id === result.id);
+    const subProps = {
+        button: {
+            // component theme overrides
+            theme: props.theme,
+            // treePath,
+        },
+        image: {
+            lazy: false,
+            onLoad: scrollToBottom,
+            // component theme overrides
+            theme: props.theme,
+            // treePath,
+        },
+    };
+    const styling = mergeStyles(properties, defaultStyles);
+    return (_jsxs("div", { className: "ss__chat__result", ...styling, children: [_jsxs("div", { className: "ss__chat__result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { className: 'ss__chat__result__detail-slot__image', alt: result.display.mappings.core?.name || '', src: result.display.mappings.core?.imageUrl || '', ...subProps.image }) }), _jsxs("div", { className: "ss__chat__result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { className: 'ss__chat__result__image__buttons__similar', content: 'Similar', onClick: () => {
+                                    controller.discussProduct(result, { requestType: 'productSimilar' });
+                                } })), _jsx(Button, { className: 'ss__chat__result__image__buttons__compare', content: isInComparison ? undefined : 'Compare', icon: isInComparison ? { icon: 'check-thin', title: 'Added to comparison' } : undefined, onClick: () => {
+                                    controller.compareProduct(result);
+                                } })] }), _jsxs("div", { className: "ss__chat__result__image__icons", children: [_jsx(Button, { className: 'ss__chat__result__image__icons__icon--inquire', icon: { icon: 'chat', title: 'Discuss Product' }, onClick: () => {
+                                    controller.discussProduct(result, { requestType: 'productQuery' });
+                                } }), _jsx(Button, { className: 'ss__chat__result__image__icons__icon--cart', icon: { icon: 'cart', title: 'Add to Cart' }, onClick: () => {
+                                    controller.addToCart(result);
+                                } })] })] }), _jsxs("div", { className: "ss__chat__result__content", children: [result.display.mappings.core?.name && _jsx("div", { className: "ss__chat__result__content__title--primary", children: result.display.mappings.core?.name }), result.display.mappings.core?.price && (_jsx("div", { className: "ss__chat__result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }));
+});

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

@@ -0,0 +1,13 @@
+import { ChatController } from '@athoscommerce/snap-controller';
+export declare const MessageText: ((props: MessageTextProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface MessageTextProps {
+    chatItem: any;
+    controller: ChatController;
+    scrollToBottom: () => void;
+    onViewProduct?: () => void;
+    showDetailsButton?: boolean;
+    sideChatOpen?: boolean;
+}
+//# sourceMappingURL=MessageText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageText.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA0HhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA2D1D,CAAC;AAqCH,MAAM,WAAW,gBAAgB;IAChC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB"}

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

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { ResultsDisplay } from './ResultsDisplay';
+import { marked } from 'marked';
+import { css } from '../../..';
+import { mergeStyles } from '../../../utilities';
+import { Button } from '../../Atoms/Button';
+const defaultStyles = () => {
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        gap: '5px',
+        background: '#fff',
+        padding: '1em',
+        borderRadius: '1em',
+        borderBottomLeftRadius: '3px',
+        '.ss__chat__message-text__text-wrapper': {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            gap: '8px',
+            '.ss__chat__message-text__text-wrapper__text': {
+                alignSelf: 'flex-end',
+            },
+            '.ss__chat__message-text__view-side-chat': {
+                marginLeft: 'auto',
+                flex: '0 0 auto',
+                width: '2em',
+                height: '2em',
+                padding: 0,
+                borderRadius: '50%',
+                border: '1px solid #253B80',
+                background: '#fff',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                svg: {
+                    fill: '#253B80',
+                    stroke: '#253B80',
+                },
+                '&.ss__chat__message-text__view-side-chat--active': {
+                    background: '#253B80',
+                    svg: {
+                        fill: '#fff',
+                        stroke: '#fff',
+                    },
+                },
+            },
+        },
+        '.ss__chat__message-text__show-details': {
+            alignSelf: 'flex-start',
+            border: '1px solid #253B80',
+            background: '#fff',
+            color: '#253B80',
+            borderRadius: '999px',
+            padding: '6px 16px',
+            fontSize: '14px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            marginTop: '4px',
+            '&:not(.ss__button--disabled):hover': {
+                background: '#253B80',
+                color: '#fff',
+                svg: {
+                    fill: '#fff',
+                    stroke: '#fff',
+                },
+            },
+            svg: {
+                fill: '#253B80',
+                stroke: '#253B80',
+            },
+        },
+        '.ss__chat__message-text__results': {
+            marginTop: '12px',
+            '.swiper-container': {
+                alignItems: 'center',
+                gap: '5px',
+                '.swiper-wrapper': {},
+                '.swiper-scrollbar': {
+                    position: 'static',
+                    width: '95%',
+                    height: '6px',
+                    borderRadius: '6px',
+                    '.swiper-scrollbar-drag': {
+                        borderRadius: '6px',
+                    },
+                },
+                '.swiper-pagination-lock': {
+                    display: 'none !important',
+                },
+            },
+            '.ss__carousel__next-wrapper, .ss__carousel__prev-wrapper': {
+                svg: {
+                    fill: '#0066cc',
+                    stroke: '#0066cc',
+                },
+            },
+        },
+        '.ss__chat__message-text__facets': {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '10px',
+            margin: '10px 0 0 0',
+            '.ss__chat__message-text__facets__facet': {
+                display: 'flex',
+                gap: '5px',
+                alignItems: 'baseline',
+                label: {
+                    fontWeight: 'bold',
+                },
+            },
+        },
+    });
+};
+export const MessageText = observer((props) => {
+    const { controller, chatItem, scrollToBottom, onViewProduct, showDetailsButton } = props;
+    const styling = mergeStyles(props, defaultStyles);
+    const text = chatItem.overallSummary || chatItem.text || chatItem.comparisonData?.summary || chatItem.errorMessage || chatItem.messageForDrift || '';
+    const currentChat = controller.store.currentChat;
+    const sideChatLabels = {
+        inspirationResult: { open: 'View inspiration', close: 'Close inspiration' },
+        productComparison: { open: 'View comparison', close: 'Close comparison' },
+    };
+    const sideChatLabel = sideChatLabels[chatItem?.messageType];
+    const hasSideChatView = !!sideChatLabel && !!chatItem?.id;
+    const isSideChatActive = hasSideChatView && !!props.sideChatOpen && currentChat?.activeMessage?.id === chatItem.id;
+    // Show the prominent "Show Details" button when requested (e.g. mobile subsequent comparisons)
+    const shouldShowDetailsButton = showDetailsButton && chatItem?.messageType === 'productComparison' && !isSideChatActive;
+    return (_jsxs("div", { className: "ss__chat__message-text", ...styling, children: [text && (_jsxs("div", { className: "ss__chat__message-text__text-wrapper", children: [_jsx("div", { className: "ss__chat__message-text__text-wrapper__text", dangerouslySetInnerHTML: { __html: marked.parse(text) } }), hasSideChatView ? (_jsx(Button, { className: classnames('ss__chat__message-text__view-side-chat', {
+                            'ss__chat__message-text__view-side-chat--active': isSideChatActive,
+                        }), icon: {
+                            icon: isSideChatActive ? 'close-thin' : 'angle-right',
+                            title: isSideChatActive ? sideChatLabel.close : sideChatLabel.open,
+                        }, onClick: () => {
+                            if (isSideChatActive) {
+                                currentChat?.dismissSideChat();
+                            }
+                            else {
+                                currentChat?.setActiveMessage(chatItem.id);
+                            }
+                        } })) : null] })), shouldShowDetailsButton && (_jsx(Button, { className: "ss__chat__message-text__show-details", icon: { icon: 'angle-right', title: 'Show Details' }, onClick: () => {
+                    currentChat?.setActiveMessage(chatItem.id);
+                }, children: "Show Details" })), chatItem && _jsx(ResultsDisplay, { controller: controller, chatItem: chatItem, scrollToBottom: scrollToBottom, onViewProduct: onViewProduct })] }));
+});

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

@@ -0,0 +1,11 @@
+import { ChatController } from '@athoscommerce/snap-controller';
+export declare const MessageUser: ((props: MessageUserProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+interface MessageUserProps {
+    chatItem: any;
+    controller: ChatController;
+    onViewProduct?: (product: any) => void;
+}
+export {};
+//# sourceMappingURL=MessageUser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAyHhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CAsE1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { Image } from '../../Atoms/Image';
+import { marked } from 'marked';
+import { Icon } from '../../Atoms/Icon';
+import { css } from '../../..';
+import { mergeStyles } from '../../../utilities';
+const defaultStyles = () => {
+    const colorPrimary = '#253B80';
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        marginLeft: '40px',
+        '.ss__chat__message-user__request-type': {
+            fontStyle: 'italic',
+            color: '#999',
+            fontSize: '0.8em',
+            marginBottom: '4px',
+            textAlign: 'right',
+        },
+        '.ss__chat__message-user__row': {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '10px',
+        },
+        '.ss__chat__message-user__text': {
+            padding: '0.5em 1em',
+            borderRadius: '12px',
+            borderBottomRightRadius: '3px',
+            backgroundColor: colorPrimary,
+            color: '#fff',
+        },
+        '.ss__chat__message-user__attachments': {
+            listStyleType: 'none',
+            padding: 0,
+            margin: 0,
+            display: 'flex',
+            gap: '8px',
+            flexWrap: 'nowrap',
+            justifyContent: 'flex-end',
+            '.ss__chat__message-user__attachment__product, .ss__chat__message-user__attachment__image, .ss__chat__message-user__attachment__facet': {
+                width: '40px',
+                height: '40px',
+                borderRadius: '50%',
+                border: '2px solid #eee',
+                overflow: 'hidden',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                '.ss__image': {
+                    aspectRatio: '1 / 1',
+                    width: '100%',
+                    height: '100%',
+                },
+                '.ss__icon': {
+                    display: 'flex',
+                },
+            },
+            '.ss__chat__message-user__attachment__product--clickable': {
+                cursor: 'pointer',
+                transition: 'border-color 0.15s ease',
+                '&:hover': {
+                    borderColor: colorPrimary,
+                },
+            },
+        },
+    });
+};
+function getRequestTypeLabel(chatItem) {
+    const requestType = chatItem.requestType;
+    if (!requestType || requestType === 'general')
+        return undefined;
+    switch (requestType) {
+        case 'productQuery':
+            return 'Asking about product';
+        case 'productComparison':
+            return 'Comparing products';
+        case 'productSearch':
+            return 'Filtering products';
+        case 'imageSearch':
+            return 'Searching by image';
+        case 'productSimilar':
+            return 'Finding similar products';
+        default:
+            return undefined;
+    }
+}
+function findProductInChat(chat, productId) {
+    if (!chat || !productId)
+        return null;
+    for (const msg of chat) {
+        if ((msg.messageType === 'productQuery' || msg.messageType === 'productAnswer') && msg.sourceProduct?.id === productId) {
+            return msg.sourceProduct;
+        }
+        const candidateLists = [];
+        if (Array.isArray(msg.results))
+            candidateLists.push(msg.results);
+        if (Array.isArray(msg.searchResults))
+            candidateLists.push(msg.searchResults);
+        if (Array.isArray(msg.inspirationSections)) {
+            msg.inspirationSections.forEach((section) => {
+                if (Array.isArray(section.products))
+                    candidateLists.push(section.products);
+            });
+        }
+        if (Array.isArray(msg.recommendationResult)) {
+            msg.recommendationResult.forEach((rec) => {
+                if (Array.isArray(rec.results))
+                    candidateLists.push(rec.results);
+            });
+        }
+        for (const list of candidateLists) {
+            const match = list.find((r) => r?.id === productId);
+            if (match)
+                return match;
+        }
+    }
+    return null;
+}
+export const MessageUser = observer((props) => {
+    const { controller, chatItem, onViewProduct } = props;
+    const { store } = controller;
+    const styling = mergeStyles(props, defaultStyles);
+    const requestTypeLabel = getRequestTypeLabel(chatItem);
+    const handleProductAttachmentClick = (attachment) => {
+        if (!attachment?.productId)
+            return;
+        const chat = store.currentChat?.chat;
+        const existingQuery = chat?.find((m) => m.messageType === 'productQuery' && m.sourceProduct?.id === attachment.productId);
+        if (existingQuery) {
+            store.currentChat?.setActiveMessage(existingQuery.id);
+            onViewProduct?.(existingQuery.sourceProduct);
+            return;
+        }
+        const product = findProductInChat(chat, attachment.productId);
+        if (product) {
+            controller.viewProduct(product);
+            onViewProduct?.(product);
+        }
+    };
+    return (_jsxs("div", { className: "ss__chat__message-user", ...styling, children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, _jsxs("div", { className: "ss__chat__message-user__row", children: [_jsx("ul", { className: "ss__chat__message-user__attachments", children: chatItem.attachments?.length
+                            ? chatItem.attachments?.map((attachmentId) => {
+                                const attachment = store.currentChat?.attachments.get(attachmentId);
+                                switch (attachment?.type) {
+                                    case 'image':
+                                        return (_jsx("li", { className: "ss__chat__message-user__attachment__image", children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || attachment.base64 || '', alt: '' }) }, attachment.id));
+                                    case 'product': {
+                                        const canOpen = !!findProductInChat(store.currentChat?.chat, attachment.productId);
+                                        return (_jsx("li", { className: classnames('ss__chat__message-user__attachment__product', {
+                                                'ss__chat__message-user__attachment__product--clickable': canOpen,
+                                            }), onClick: canOpen ? () => handleProductAttachmentClick(attachment) : undefined, title: canOpen ? `View details for ${attachment.name}` : undefined, children: _jsx(Image, { style: { height: '200px', width: '200px' }, src: attachment.thumbnailUrl || '', alt: attachment.name }) }, attachment.id));
+                                    }
+                                    case 'facet':
+                                        return (_jsx("li", { className: "ss__chat__message-user__attachment__facet", children: _jsx(Icon, { title: `Filter: ${attachment.facetLabel} = ${attachment.label}`, icon: "filter-funnel", size: 27 }) }, attachment.id));
+                                    default:
+                                        return null;
+                                }
+                            })
+                            : null }), chatItem.text ? (_jsx("div", { className: "ss__chat__message-user__text", dangerouslySetInnerHTML: { __html: marked.parse(chatItem.text) } })) : null] })] }));
+});

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

@@ -0,0 +1,11 @@
+import { ChatController } from '@athoscommerce/snap-controller';
+export declare const ResultsDisplay: ((props: ResultsDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export interface ResultsDisplayProps {
+    chatItem: any;
+    controller: ChatController;
+    scrollToBottom: () => void;
+    onViewProduct?: () => void;
+}
+//# sourceMappingURL=ResultsDisplay.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import { Carousel } from '../../Molecules/Carousel';
+import { ChatResult } from './ChatResult';
+const carouselStyleScript = () => {
+    return css({
+        position: 'relative',
+        '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
+            position: 'absolute',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            zIndex: 9,
+            '.ss__carousel__prev, .ss__carousel__next': {
+                background: 'rgba(255, 255, 255, 0.85)',
+                borderRadius: '50%',
+                width: '2em',
+                height: '2em',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+            },
+        },
+        '.ss__carousel__prev-wrapper': {
+            left: 0,
+        },
+        '.ss__carousel__next-wrapper': {
+            right: 0,
+        },
+    });
+};
+export const ResultsDisplay = observer((props) => {
+    const { chatItem, controller, scrollToBottom, onViewProduct } = props;
+    const currentChat = controller.store.currentChat;
+    const activeMessage = currentChat?.activeMessage;
+    const isSideChatOpen = !!activeMessage &&
+        ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
+        currentChat?.dismissedSideChatMessageId !== activeMessage.id;
+    const isNarrow = typeof window !== 'undefined' && window.innerWidth < 550;
+    const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768;
+    const slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
+    const carouselProps = {
+        breakpoints: undefined,
+        slidesPerView,
+        slidesPerGroup: isNarrow || isConstrained ? 2 : 3,
+        loop: false,
+        pagination: false,
+        centerInsufficientSlides: false,
+        freeMode: true,
+        styleScript: carouselStyleScript,
+    };
+    const handleResultClick = (e, result) => {
+        // buttons should be able to be clicked without triggering the product click
+        if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
+            return;
+        controller.viewProduct(result);
+        onViewProduct?.();
+    };
+    if (chatItem.messageType === 'productRecommendation' && chatItem.recommendationResult?.length) {
+        return (_jsx(_Fragment, { children: chatItem.recommendationResult.map((recommendation, index) => {
+                return recommendation.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...carouselProps, hideButtons: recommendation.results.length <= slidesPerView, children: recommendation.results.map((result) => {
+                            return (_jsx("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
+                        }) }) }, index)) : null;
+            }) }));
+    }
+    return chatItem.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...carouselProps, hideButtons: chatItem.results.length <= slidesPerView, children: chatItem.results.map((result) => {
+                return (_jsx("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
+            }) }) })) : null;
+});