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

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

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

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

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

@@ -0,0 +1,166 @@
+"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) })] }))] }) })] }) }));
+});