@athoscommerce/snap-preact 1.12.1-beta.152 → 1.13.0

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

@@ -1,105 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.chatDefaultLang = void 0;
-exports.langTextOf = langTextOf;
-exports.langAttrOf = langAttrOf;
-exports.chatDefaultLang = {
-    openChatButton: {
-        attributes: { 'aria-label': 'Open chat', title: 'Open Chat' },
-    },
-    closeChatButton: {
-        attributes: { 'aria-label': 'Close chat', title: 'Close Chat' },
-    },
-    newChatButton: {
-        attributes: { 'aria-label': 'New chat', title: 'New Chat' },
-    },
-    chatHistoryButton: {
-        attributes: { 'aria-label': 'Chat History', title: 'Chat History' },
-    },
-    historyTitle: { value: 'History' },
-    historyClearButton: { value: 'clear' },
-    historyNewChatLabel: { value: 'New Chat' },
-    sideChatRegionLabel: {
-        attributes: { 'aria-label': 'Conversation details' },
-    },
-    inspirationResultTitle: { value: 'Inspiration Scenarios' },
-    inspirationResultSubtitle: { value: 'Choose a style direction to explore' },
-    productComparisonTitle: { value: 'Product Comparison' },
-    productComparisonSubtitle: { value: (data) => `Comparing ${data?.count ?? ''} products` },
-    chatMessagesLabel: {
-        attributes: { 'aria-label': 'Chat messages' },
-    },
-    newMessagesButton: { value: 'New messages' },
-    loadingVerbsProductQuery: { value: 'Thinking, Searching, Analyzing, Gathering details' },
-    loadingVerbsProductSearch: { value: 'Searching, Browsing catalog, Finding products, Curating results' },
-    loadingVerbsProductComparison: { value: 'Comparing, Analyzing, Evaluating, Weighing options' },
-    loadingVerbsImageSearch: { value: 'Analyzing image, Identifying, Searching, Matching' },
-    loadingVerbsProductSimilar: { value: 'Finding similar items, Searching, Matching, Curating' },
-    loadingVerbsInspirationRequest: { value: 'Brainstorming, Imagining, Curating, Inspiring' },
-    feedbackPrompt: { value: "How's your experience so far?" },
-    feedbackThanks: { value: 'Thank you for your feedback' },
-    feedbackThumbsUpButton: {
-        attributes: { 'aria-label': 'Thumbs Up', title: 'Thumbs Up' },
-    },
-    feedbackThumbsDownButton: {
-        attributes: { 'aria-label': 'Thumbs Down', title: 'Thumbs Down' },
-    },
-    feedbackDismissButton: {
-        attributes: { 'aria-label': 'Dismiss feedback' },
-    },
-    comparisonsTitle: { value: (data) => `Compare Products (${data?.count ?? 0}/${data?.max ?? 0})` },
-    comparisonsClearButton: { value: 'clear' },
-    comparisonsAddText: { value: 'Add' },
-    comparisonsCompareButton: {
-        value: 'Compare',
-        attributes: { title: 'Compare' },
-    },
-    comparisonsRemoveButton: {
-        attributes: { 'aria-label': (data) => `Remove ${data?.name || 'product'} from comparison` },
-    },
-    chatUnavailableMessage: {
-        value: 'Service is temporarily unavailable. In the meantime, feel free to use the search bar above to find what you need!',
-    },
-    highVolumeMessage: { value: 'Chat is currently unavailable due to high volume.' },
-    highVolumeSubMessage: { value: 'In the meantime, feel free to use the search bar above to find what you need!' },
-    newSessionButton: { value: 'New Session' },
-    facetsTitle: { value: 'Filter by:' },
-    facetsApplyButton: { value: (data) => `Apply (${data?.count ?? 0})` },
-    facetsClearButton: { value: 'Clear facets' },
-    attachmentCompareTitle: { value: 'Compare these products' },
-    attachmentAskProductTitle: { value: 'Ask about this product' },
-    attachmentImageSimilarTitle: { value: 'Find products similar to this 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?' },
-    topicDriftSubMessage: { value: 'Start a fresh session for better assistance, or keep going in this one?' },
-    topicDriftDismissButton: {
-        attributes: { 'aria-label': 'Dismiss' },
-    },
-    inputPlaceholder: { value: 'Type your message...' },
-    inputPlaceholderAskProduct: { value: 'Ask about this product...' },
-    inputPlaceholderCompare: { value: 'What would you like to compare?' },
-    inputPlaceholderComparedProducts: { value: 'Ask about the compared products...' },
-    inputPlaceholderAskImage: { value: 'Ask about this image...' },
-    inputPlaceholderAddCompare: { value: 'Add another product to compare...' },
-    uploadImageButton: {
-        attributes: { 'aria-label': 'Upload Image', title: 'Upload Image' },
-    },
-    sendMessageButton: {
-        attributes: { 'aria-label': 'Send Message', title: 'Send Message' },
-    },
-    dropOverlayText: { value: 'Drop image to upload' },
-    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.' },
-};
-/** Resolves the plain-text `value` of a lang entry (invoking value functions with `data`). */
-function langTextOf(entry, data) {
-    const value = entry?.value;
-    return typeof value === 'function' ? value(data) : value;
-}
-/** Resolves a single attribute of a lang entry (invoking attribute functions with `data`). */
-function langAttrOf(entry, attribute, data) {
-    const value = entry?.attributes?.[attribute];
-    return typeof value === 'function' ? value(data) : value;
-}

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

@@ -1,104 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatAttachments = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const deepmerge_1 = __importDefault(require("deepmerge"));
-const mobx_react_lite_1 = require("mobx-react-lite");
-const ChatAttachmentContext_1 = require("../../../Molecules/ChatAttachmentContext");
-const Chat_lang_1 = require("../Chat.lang");
-const isProductAttachment = (item) => item.type === 'product';
-const isImageAttachment = (item) => item.type === 'image';
-/**
- * Renders the attachment-context strips above the composer: committed / active
- * comparisons, product attachments (ask-about / compare), and image attachments.
- * Pure fragment — styling comes from the ChatAttachmentContext molecule itself.
- */
-exports.ChatAttachments = (0, mobx_react_lite_1.observer)((props) => {
-    const { controller, activeMessage, sideChatOpen, mobile, onProductQuickView, disableStyles, theme, treePath } = props;
-    const { store } = controller;
-    const lang = (0, deepmerge_1.default)(Chat_lang_1.chatDefaultLang, props.lang || {});
-    const subProps = {
-        attachmentContext: {
-            disableStyles,
-            theme,
-            treePath,
-        },
-    };
-    const activeComparisonSearchResults = sideChatOpen && activeMessage?.messageType === 'productComparison'
-        ? activeMessage.searchResults || []
-        : null;
-    const showCommittedComparisons = !activeComparisonSearchResults &&
-        store.currentChat?.comparisons.committed &&
-        store.currentChat.comparisons.committed.length > 0 &&
-        (activeMessage?.messageType === 'user' || activeMessage?.messageType === 'productComparison' || activeMessage?.messageType === 'productQuery');
-    const visibleAttachments = store.currentChat?.attachments.attached.filter((item) => item.state === 'attached' || item.state === 'active' || item.state === 'loading' || item.state === 'error') || [];
-    const productAttachments = visibleAttachments.filter((item) => isProductAttachment(item) && item.requestType !== 'productSimilar' && item.requestType !== 'productComparison');
-    const imageAttachments = visibleAttachments.filter(isImageAttachment);
-    const comparisonItems = activeComparisonSearchResults
-        ? activeComparisonSearchResults.map((result) => {
-            const d = result?.display || result;
-            return {
-                id: result?.id,
-                name: d?.mappings?.core?.name || '',
-                imageUrl: d?.mappings?.core?.thumbnailImageUrl || d?.mappings?.core?.imageUrl || d?.mappings?.core?.parentImageUrl || '',
-                onClick: () => {
-                    controller.productQuickView(result);
-                    if (mobile)
-                        onProductQuickView && onProductQuickView();
-                },
-            };
-        })
-        : showCommittedComparisons
-            ? (store.currentChat?.comparisons.committed || []).map((comparisonItem) => {
-                const d = (comparisonItem.result?.display || comparisonItem.result);
-                return {
-                    id: comparisonItem.result?.id,
-                    name: d?.mappings?.core?.name || '',
-                    imageUrl: d?.mappings?.core?.thumbnailImageUrl || d?.mappings?.core?.imageUrl || d?.mappings?.core?.parentImageUrl || '',
-                    onClick: () => {
-                        controller.productQuickView(comparisonItem.result);
-                        if (mobile)
-                            onProductQuickView && onProductQuickView();
-                    },
-                };
-            })
-            : [];
-    const dismissProductAttachment = (id) => {
-        store.currentChat?.attachments.remove(id);
-        props.onProductAttachmentsRemoved && props.onProductAttachmentsRemoved();
-        store.currentChat?.dismissSideChat();
-    };
-    const productItems = productAttachments.map((item) => {
-        const remove = () => dismissProductAttachment(item.id);
-        return {
-            id: item.id,
-            name: item.name || '',
-            imageUrl: item.thumbnailUrl || '',
-            onClick: remove,
-            onRemove: remove,
-        };
-    });
-    const imageItems = imageAttachments.map((item) => ({
-        id: item.id,
-        name: item.fileName || 'Image',
-        imageUrl: item.base64 || item.thumbnailUrl || '',
-        isLoading: item.state === 'loading',
-        hasError: !!item.error,
-        errorMessage: item.error?.message,
-        onRemove: () => store.currentChat?.attachments.remove(item.id),
-    }));
-    const productTitle = (productItems.length > 1 ? (0, Chat_lang_1.langTextOf)(lang.attachmentCompareTitle) : (0, Chat_lang_1.langTextOf)(lang.attachmentAskProductTitle)) || '';
-    const hasImageError = imageItems.some((item) => item.hasError);
-    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();
-                } })), 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();
-                } })), 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/ChatComparisonsTray.js

@@ -1,161 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatComparisonsTray = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("@emotion/react");
-const classnames_1 = __importDefault(require("classnames"));
-const deepmerge_1 = __importDefault(require("deepmerge"));
-const mobx_react_lite_1 = require("mobx-react-lite");
-const providers_1 = require("../../../../providers");
-const utilities_1 = require("../../../../utilities");
-const hooks_1 = require("../../../../hooks");
-const useA11y_1 = require("../../../../hooks/useA11y");
-const Button_1 = require("../../../Atoms/Button");
-const Icon_1 = require("../../../Atoms/Icon");
-const Image_1 = require("../../../Atoms/Image");
-const Chat_lang_1 = require("../Chat.lang");
-const defaultStyles = ({ primaryColorBg, primaryColorFg }) => {
-    const colorPrimary = primaryColorBg;
-    const colorPrimaryText = primaryColorFg;
-    return (0, react_1.css)({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5em',
-        background: new utilities_1.Colour(colorPrimary).mixWhite(0.95),
-        padding: '0.5em 1em',
-        '.ss__chat__content__header__comparisons__header': {
-            display: 'flex',
-            justifyContent: 'space-between',
-            '.ss__chat__content__header__comparisons__header__title': {
-                fontWeight: 'bold',
-                fontSize: '1.2em',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.5em',
-                '.ss__chat__content__header__comparisons__header__title__icon': {
-                    background: colorPrimary,
-                    borderRadius: '50%',
-                    padding: '5px',
-                    fill: colorPrimaryText,
-                    height: '25px',
-                    width: '25px',
-                },
-            },
-            '.ss__chat__content__header__comparisons__header__actions': {
-                '.ss__button': {
-                    border: 'none',
-                    background: 'none',
-                },
-            },
-        },
-        '.ss__chat__content__header__comparisons__content': {
-            display: 'flex',
-            gap: '1em',
-            alignItems: 'stretch',
-            '.ss__chat__content__header__comparisons__content__items': {
-                display: 'flex',
-                flex: '1 1 calc(100% - 100px)',
-                justifyContent: 'space-between',
-                gap: '0.5em',
-            },
-            '.ss__chat__content__header__comparisons__content__comparison': {
-                background: '#fff',
-                padding: '0.5em',
-                borderRadius: '1em',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.5em',
-                flex: '0 1 25%',
-                position: 'relative',
-                '&.ss__chat__content__header__comparisons__content__comparison--placeholder': {
-                    border: '2px dashed #ddd',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    '.ss__chat__content__header__comparisons__content__comparison--placeholder__text': {
-                        color: '#999',
-                        fontStyle: 'italic',
-                    },
-                },
-                '.ss__chat__content__header__comparisons__content__comparison__remove': {
-                    position: 'absolute',
-                    top: '-3px',
-                    right: '-3px',
-                    cursor: 'pointer',
-                    background: 'red',
-                    borderRadius: '50%',
-                    padding: '0.4em',
-                    height: 20,
-                    width: 20,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    svg: {
-                        fill: '#fff',
-                        stroke: '#fff',
-                    },
-                },
-            },
-            '.ss__chat__content__header__comparisons__action': {
-                display: 'flex',
-                alignItems: 'center',
-                marginLeft: 'auto',
-                flex: '1 1 auto',
-                '&.ss__chat__content__header__comparisons__action--hidden': {
-                    visibility: 'hidden',
-                },
-                '.ss__button': {
-                    flexDirection: 'row-reverse',
-                    borderRadius: '1em',
-                    padding: '0.5em 1em',
-                    background: colorPrimary,
-                    color: colorPrimaryText,
-                    textAlign: 'center',
-                    svg: {
-                        fill: colorPrimaryText,
-                        stroke: colorPrimaryText,
-                    },
-                },
-            },
-        },
-    });
-};
-exports.ChatComparisonsTray = (0, mobx_react_lite_1.observer)((properties) => {
-    const globalTheme = (0, providers_1.useTheme)();
-    const globalTreePath = (0, providers_1.useTreePath)();
-    const defaultProps = {
-        treePath: globalTreePath,
-    };
-    const props = (0, utilities_1.mergeProps)('chatComparisonsTray', globalTheme, defaultProps, properties);
-    const { className, internalClassName, controller } = props;
-    const { store } = controller;
-    const comparisons = store.currentChat?.comparisons;
-    const lang = (0, deepmerge_1.default)(Chat_lang_1.chatDefaultLang, props.lang || {});
-    const mergedLang = (0, hooks_1.useLang)({
-        comparisonsTitle: lang.comparisonsTitle,
-        comparisonsClearButton: lang.comparisonsClearButton,
-        comparisonsAddText: lang.comparisonsAddText,
-        comparisonsCompareButton: lang.comparisonsCompareButton,
-    }, { controller, count: comparisons?.compared.length || 0, max: comparisons?.maxItems || 0 }, { activeBreakpoint: globalTheme?.activeBreakpoint });
-    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    if (!comparisons?.compared || comparisons.compared.length === 0) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__chat__content__header__comparisons', className, internalClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), (0, jsx_runtime_1.jsx)("span", { className: 'ss__chat__content__header__comparisons__header__title__text', ...mergedLang.comparisonsTitle?.all })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => comparisons.reset(), children: (0, jsx_runtime_1.jsx)("span", { ...mergedLang.comparisonsClearButton?.all }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: comparisons.maxItems }).map((_, index) => {
-                                const comparisonItem = comparisons.compared[index];
-                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__content__comparison', {
-                                        'ss__chat__content__header__comparisons__content__comparison--placeholder': !comparisonItem,
-                                    }), children: comparisonItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Image_1.Image, { alt: (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.name || '', src: (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.imageUrl ||
-                                                    (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.parentImageUrl ||
-                                                    '' }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content__header__comparisons__content__comparison__remove", role: "button", ref: (e) => (0, useA11y_1.useA11y)(e), "aria-label": (0, Chat_lang_1.langAttrOf)(lang.comparisonsRemoveButton, 'aria-label', {
-                                                    name: (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.name || '',
-                                                }), onClick: () => {
-                                                    comparisons.remove(comparisonItem.result.id);
-                                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: 'close-thin', size: '12px' }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: 'plus-thin' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', ...mergedLang.comparisonsAddText?.all })] })) }, index));
-                            }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__action', {
-                                'ss__chat__content__header__comparisons__action--hidden': (comparisons.compared.length || 0) < 2,
-                            }), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: (0, Chat_lang_1.langAttrOf)(lang.comparisonsCompareButton, 'title') }, children: (0, jsx_runtime_1.jsx)("span", { ...mergedLang.comparisonsCompareButton?.value }) }) })] })] }) }));
-});

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

@@ -1,166 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatComposer = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("@emotion/react");
-const classnames_1 = __importDefault(require("classnames"));
-const deepmerge_1 = __importDefault(require("deepmerge"));
-const mobx_react_lite_1 = require("mobx-react-lite");
-const snap_client_1 = require("@athoscommerce/snap-client");
-const providers_1 = require("../../../../providers");
-const utilities_1 = require("../../../../utilities");
-const Button_1 = require("../../../Atoms/Button");
-const Chat_lang_1 = require("../Chat.lang");
-// show the character counter only when the user is approaching the limit
-const CHAR_COUNTER_THRESHOLD = 200;
-const defaultStyles = ({ primaryColorBg, primaryColorFg }) => {
-    const colorPrimary = primaryColorBg;
-    const colorPrimaryText = primaryColorFg;
-    return (0, react_1.css)({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        flexShrink: 0,
-        '.ss__chat__input': {
-            display: 'flex',
-            justifyContent: 'space-between',
-            gap: '8px',
-            flexShrink: 0,
-            '.ss__chat__input__input': {
-                flex: '1 1 0%',
-                minWidth: 0,
-                border: '1px solid #ccc',
-                borderRadius: '2em',
-                display: 'flex',
-                justifyContent: 'space-between',
-                overflow: 'auto',
-                '&:has(input:disabled)': {
-                    backgroundColor: '#f5f5f5',
-                },
-                'input[type="text"]': {
-                    padding: '0.5em 0',
-                    margin: '0 0 0 1em',
-                    flex: '1 0 auto',
-                    border: 'none',
-                    backgroundColor: 'transparent',
-                    '&::placeholder': {
-                        color: '#999',
-                        opacity: 0.7,
-                    },
-                    '&:focus': {
-                        outline: 'none',
-                        borderColor: colorPrimary,
-                    },
-                    '&:disabled': {
-                        backgroundColor: 'transparent',
-                    },
-                },
-                '.ss__button': {
-                    margin: '0 0.5em 0 0',
-                    backgroundColor: 'transparent',
-                    '&:hover': {
-                        backgroundColor: 'transparent',
-                    },
-                    '&:disabled': {
-                        backgroundColor: 'transparent',
-                    },
-                },
-                'input[type="file"]': {
-                    display: 'none',
-                },
-                '.ss__chat__input__counter': {
-                    alignSelf: 'center',
-                    flexShrink: 0,
-                    fontSize: '10px',
-                    color: '#999',
-                    padding: '0 0.75em',
-                    whiteSpace: 'nowrap',
-                },
-            },
-            '.ss__chat__input__actions': {
-                '.ss__button': {
-                    backgroundColor: colorPrimary,
-                    color: colorPrimaryText,
-                    borderRadius: '50%',
-                    height: '3em',
-                    width: '3em',
-                    cursor: 'pointer',
-                    justifyContent: 'center',
-                    boxSizing: 'border-box',
-                    '&:disabled': {
-                        opacity: 0.5,
-                        cursor: 'not-allowed',
-                    },
-                    svg: {
-                        fill: colorPrimaryText,
-                        stroke: colorPrimaryText,
-                    },
-                },
-            },
-        },
-        '.ss__chat__disclaimer': {
-            fontSize: '10px',
-            color: '#6A7282',
-            textAlign: 'center',
-            flexShrink: 0,
-        },
-    });
-};
-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);
-    const { className, internalClassName, controller, fileInputRef, onUserSend, poweredByText, privacyPolicyUrl } = props;
-    const { store } = controller;
-    const lang = (0, deepmerge_1.default)(Chat_lang_1.chatDefaultLang, props.lang || {});
-    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    const inputDisabled = store.loading || store.blocked || store.currentChat?.sessionLimitReached || store.chatEnabled === false;
-    const placeholder = (() => {
-        const comparedCount = store.currentChat?.comparisons.compared.length || 0;
-        const committedCount = store.currentChat?.comparisons.committed.length || 0;
-        const attached = store.currentChat?.attachments.attached.filter((item) => item.state === 'attached' || item.state === 'active') || [];
-        const attachedProducts = attached.filter((item) => item.type === 'product');
-        const attachedImages = attached.filter((item) => item.type === 'image' && !item.error);
-        if (attachedProducts.length === 1) {
-            return (0, Chat_lang_1.langTextOf)(lang.inputPlaceholderAskProduct);
-        }
-        if (comparedCount > 1 || attachedProducts.length > 1) {
-            return (0, Chat_lang_1.langTextOf)(lang.inputPlaceholderCompare);
-        }
-        if (committedCount > 0) {
-            return (0, Chat_lang_1.langTextOf)(lang.inputPlaceholderComparedProducts);
-        }
-        if (attachedImages.length > 0) {
-            return (0, Chat_lang_1.langTextOf)(lang.inputPlaceholderAskImage);
-        }
-        if (comparedCount === 1) {
-            return (0, Chat_lang_1.langTextOf)(lang.inputPlaceholderAddCompare);
-        }
-        return (0, Chat_lang_1.langTextOf)(lang.inputPlaceholder);
-    })();
-    const hasImageAttachment = (store.currentChat?.attachments.attached || []).some((item) => item.type === 'image' && !item.error);
-    const messageEmpty = !controller.store.inputValue.trim();
-    const sendDisabled = store.blocked || store.currentChat?.sessionLimitReached || store.chatEnabled === false || (hasImageAttachment && messageEmpty) || messageEmpty;
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__chat__composer', className, internalClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", maxLength: snap_client_1.CHAT_MAX_MESSAGE_LENGTH, disabled: inputDisabled, placeholder: placeholder, onInput: (e) => controller.handlers.input.input(e), onKeyDown: (e) => {
-                                        controller.handlers.input.enterKey(e);
-                                        if (e.key === 'Enter') {
-                                            onUserSend && onUserSend();
-                                        }
-                                    }, value: controller.store.inputValue }), controller.store.inputValue.length >= CHAR_COUNTER_THRESHOLD && ((0, jsx_runtime_1.jsx)("span", { className: 'ss__chat__input__counter', children: `${controller.store.inputValue.length}/${snap_client_1.CHAT_MAX_MESSAGE_LENGTH}` })), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: inputDisabled, onClick: () => fileInputRef.current?.click(), "aria-label": (0, Chat_lang_1.langAttrOf)(lang.uploadImageButton, 'aria-label'), icon: { icon: 'image', title: (0, Chat_lang_1.langAttrOf)(lang.uploadImageButton, 'title') } }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, onChange: async (e) => {
-                                                await controller.upload(e.target.files);
-                                                // reset value
-                                                e.target.value = '';
-                                            }, type: "file", accept: "image/*", className: "ss__chat__input__input__file" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__input__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__send-button", "aria-label": (0, Chat_lang_1.langAttrOf)(lang.sendMessageButton, 'aria-label'), icon: { icon: 'send', title: (0, Chat_lang_1.langAttrOf)(lang.sendMessageButton, 'title') }, disabled: sendDisabled, onClick: () => {
-                                    if (sendDisabled)
-                                        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) })] }))] }) })] }) }));
-});