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

package/dist/cjs/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/cjs/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/cjs/components/src/components/Organisms/Chat/ChatAttachmentContext.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatAttachmentContext = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = require("../../Atoms/Image");
+var Button_1 = require("../../Atoms/Button");
+var Icon_1 = require("../../Atoms/Icon");
+exports.ChatAttachmentContext = (0, mobx_react_lite_1.observer)(function (props) {
+    var title = props.title, items = props.items, onClose = props.onClose;
+    if (!items || items.length === 0) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__attachment-context', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__attachment-context__label', children: [(0, jsx_runtime_1.jsx)("span", { children: title }), onClose && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__attachment-context__label__close', onClick: onClose, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: 'close-thin', size: '12px' }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__attachment-context__items', children: items.map(function (item) { return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat__attachment-context__item', { error: item.hasError, clickable: !!item.onClick }), onClick: item.onClick, style: item.onClick ? { cursor: 'pointer' } : undefined, children: [item.hasError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__attachment-context__item__error-icon', children: "\u26A0" }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__attachment-context__item__error-message', children: item.errorMessage || "Upload Failed - ".concat(item.name) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__attachment-context__item__content', children: [item.imageUrl && (0, jsx_runtime_1.jsx)(Image_1.Image, { className: item.isLoading ? 'loading' : '', src: item.imageUrl, alt: item.name }), item.isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__attachment-context__item__loading', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__loading__dot' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__loading__dot' })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__attachment-context__item__name', title: item.name, children: item.name })] })), item.onRemove && (items.length > 1 || !onClose) && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__attachment-context__item__remove', onClick: function () { var _a; return !item.isLoading && ((_a = item.onRemove) === null || _a === void 0 ? void 0 : _a.call(item)); }, icon: {
+                                icon: 'close-thin',
+                                size: '0.6em',
+                            } }))] }, item.id)); }) })] }));
+});

package/dist/cjs/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/cjs/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/cjs/components/src/components/Organisms/Chat/ChatResult.js

@@ -0,0 +1,158 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatResult = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var Image_1 = require("../../Atoms/Image");
+var Button_1 = require("../../Atoms/Button");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var __1 = require("../../..");
+var hooks_1 = require("../../../hooks");
+var defaultStyles = function () {
+    return (0, providers_1.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',
+            },
+        },
+    });
+};
+exports.ChatResult = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var snap = (0, providers_1.useSnap)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('chatResult', globalTheme, defaultProps, properties);
+    var controller = props.controller, result = props.result, scrollToBottom = props.scrollToBottom, customComponent = props.customComponent;
+    if (customComponent) {
+        var ComponentOverride = (0, hooks_1.useComponent)(((_a = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _a === void 0 ? void 0 : _a.library.import.component.result) || {}, customComponent);
+        if (ComponentOverride) {
+            return (0, jsx_runtime_1.jsx)(ComponentOverride, __assign({}, props));
+        }
+    }
+    var isInComparison = (_b = controller.store.currentChat) === null || _b === void 0 ? void 0 : _b.comparisons.items.some(function (item) { var _a; return ((_a = item.result) === null || _a === void 0 ? void 0 : _a.id) === result.id; });
+    var subProps = {
+        button: {
+            // component theme overrides
+            theme: props.theme,
+            // treePath,
+        },
+        image: {
+            lazy: false,
+            onLoad: scrollToBottom,
+            // component theme overrides
+            theme: props.theme,
+            // treePath,
+        },
+    };
+    var styling = (0, utilities_1.mergeStyles)(properties, defaultStyles);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__chat__result" }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__result__image", children: [(0, jsx_runtime_1.jsx)(__1.OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({ className: 'ss__chat__result__detail-slot__image', alt: ((_c = result.display.mappings.core) === null || _c === void 0 ? void 0 : _c.name) || '', src: ((_d = result.display.mappings.core) === null || _d === void 0 ? void 0 : _d.imageUrl) || '' }, subProps.image)) }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__result__image__buttons", children: [controller.store.features.similarProducts.enabled && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__result__image__buttons__similar', content: 'Similar', onClick: function () {
+                                    controller.discussProduct(result, { requestType: 'productSimilar' });
+                                } })), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__result__image__buttons__compare', content: isInComparison ? undefined : 'Compare', icon: isInComparison ? { icon: 'check-thin', title: 'Added to comparison' } : undefined, onClick: function () {
+                                    controller.compareProduct(result);
+                                } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__result__image__icons", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__result__image__icons__icon--inquire', icon: { icon: 'chat', title: 'Discuss Product' }, onClick: function () {
+                                    controller.discussProduct(result, { requestType: 'productQuery' });
+                                } }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__result__image__icons__icon--cart', icon: { icon: 'cart', title: 'Add to Cart' }, onClick: function () {
+                                    controller.addToCart(result);
+                                } })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__result__content", children: [((_e = result.display.mappings.core) === null || _e === void 0 ? void 0 : _e.name) && (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__result__content__title--primary", children: (_f = result.display.mappings.core) === null || _f === void 0 ? void 0 : _f.name }), ((_g = result.display.mappings.core) === null || _g === void 0 ? void 0 : _g.price) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__result__content__price", children: (0, jsx_runtime_1.jsx)(__1.Price, { value: (_h = result.display.mappings.core) === null || _h === void 0 ? void 0 : _h.price }) })), (0, jsx_runtime_1.jsx)(__1.CalloutBadge, { controller: controller, result: result })] })] })));
+});

package/dist/cjs/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/cjs/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/cjs/components/src/components/Organisms/Chat/MessageText.js

@@ -0,0 +1,170 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageText = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var classnames_1 = __importDefault(require("classnames"));
+var ResultsDisplay_1 = require("./ResultsDisplay");
+var marked_1 = require("marked");
+var __1 = require("../../..");
+var utilities_1 = require("../../../utilities");
+var Button_1 = require("../../Atoms/Button");
+var defaultStyles = function () {
+    return (0, __1.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',
+                },
+            },
+        },
+    });
+};
+exports.MessageText = (0, mobx_react_lite_1.observer)(function (props) {
+    var _a, _b;
+    var controller = props.controller, chatItem = props.chatItem, scrollToBottom = props.scrollToBottom, onViewProduct = props.onViewProduct, showDetailsButton = props.showDetailsButton;
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var text = chatItem.overallSummary || chatItem.text || ((_a = chatItem.comparisonData) === null || _a === void 0 ? void 0 : _a.summary) || chatItem.errorMessage || chatItem.messageForDrift || '';
+    var currentChat = controller.store.currentChat;
+    var sideChatLabels = {
+        inspirationResult: { open: 'View inspiration', close: 'Close inspiration' },
+        productComparison: { open: 'View comparison', close: 'Close comparison' },
+    };
+    var sideChatLabel = sideChatLabels[chatItem === null || chatItem === void 0 ? void 0 : chatItem.messageType];
+    var hasSideChatView = !!sideChatLabel && !!(chatItem === null || chatItem === void 0 ? void 0 : chatItem.id);
+    var isSideChatActive = hasSideChatView && !!props.sideChatOpen && ((_b = currentChat === null || currentChat === void 0 ? void 0 : currentChat.activeMessage) === null || _b === void 0 ? void 0 : _b.id) === chatItem.id;
+    // Show the prominent "Show Details" button when requested (e.g. mobile subsequent comparisons)
+    var shouldShowDetailsButton = showDetailsButton && (chatItem === null || chatItem === void 0 ? void 0 : chatItem.messageType) === 'productComparison' && !isSideChatActive;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__chat__message-text" }, styling, { children: [text && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-text__text-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__text-wrapper__text", dangerouslySetInnerHTML: { __html: marked_1.marked.parse(text) } }), hasSideChatView ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: (0, classnames_1.default)('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: function () {
+                            if (isSideChatActive) {
+                                currentChat === null || currentChat === void 0 ? void 0 : currentChat.dismissSideChat();
+                            }
+                            else {
+                                currentChat === null || currentChat === void 0 ? void 0 : currentChat.setActiveMessage(chatItem.id);
+                            }
+                        } })) : null] })), shouldShowDetailsButton && ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__message-text__show-details", icon: { icon: 'angle-right', title: 'Show Details' }, onClick: function () {
+                    currentChat === null || currentChat === void 0 ? void 0 : currentChat.setActiveMessage(chatItem.id);
+                }, children: "Show Details" })), chatItem && (0, jsx_runtime_1.jsx)(ResultsDisplay_1.ResultsDisplay, { controller: controller, chatItem: chatItem, scrollToBottom: scrollToBottom, onViewProduct: onViewProduct })] })));
+});

package/dist/cjs/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/cjs/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/cjs/components/src/components/Organisms/Chat/MessageUser.js

@@ -0,0 +1,192 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageUser = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var classnames_1 = __importDefault(require("classnames"));
+var Image_1 = require("../../Atoms/Image");
+var marked_1 = require("marked");
+var Icon_1 = require("../../Atoms/Icon");
+var __1 = require("../../..");
+var utilities_1 = require("../../../utilities");
+var defaultStyles = function () {
+    var colorPrimary = '#253B80';
+    return (0, __1.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) {
+    var 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) {
+    var _a;
+    if (!chat || !productId)
+        return null;
+    var _loop_1 = function (msg) {
+        if ((msg.messageType === 'productQuery' || msg.messageType === 'productAnswer') && ((_a = msg.sourceProduct) === null || _a === void 0 ? void 0 : _a.id) === productId) {
+            return { value: msg.sourceProduct };
+        }
+        var 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(function (section) {
+                if (Array.isArray(section.products))
+                    candidateLists.push(section.products);
+            });
+        }
+        if (Array.isArray(msg.recommendationResult)) {
+            msg.recommendationResult.forEach(function (rec) {
+                if (Array.isArray(rec.results))
+                    candidateLists.push(rec.results);
+            });
+        }
+        for (var _b = 0, candidateLists_1 = candidateLists; _b < candidateLists_1.length; _b++) {
+            var list = candidateLists_1[_b];
+            var match = list.find(function (r) { return (r === null || r === void 0 ? void 0 : r.id) === productId; });
+            if (match)
+                return { value: match };
+        }
+    };
+    for (var _i = 0, chat_1 = chat; _i < chat_1.length; _i++) {
+        var msg = chat_1[_i];
+        var state_1 = _loop_1(msg);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+    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);
+    var requestTypeLabel = getRequestTypeLabel(chatItem);
+    var handleProductAttachmentClick = function (attachment) {
+        var _a, _b;
+        if (!(attachment === null || attachment === void 0 ? void 0 : attachment.productId))
+            return;
+        var chat = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat;
+        var existingQuery = chat === null || chat === void 0 ? void 0 : chat.find(function (m) { var _a; return m.messageType === 'productQuery' && ((_a = m.sourceProduct) === null || _a === void 0 ? void 0 : _a.id) === attachment.productId; });
+        if (existingQuery) {
+            (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.setActiveMessage(existingQuery.id);
+            onViewProduct === null || onViewProduct === void 0 ? void 0 : onViewProduct(existingQuery.sourceProduct);
+            return;
+        }
+        var product = findProductInChat(chat, attachment.productId);
+        if (product) {
+            controller.viewProduct(product);
+            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 null;
+                                }
+                            })
+                            : 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

@@ -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/cjs/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"}