@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

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

@@ -0,0 +1,76 @@
+import { Lang } from '../../../hooks';
+import { LangAttributes, LangValue } from '../../../hooks/useLang';
+export interface ChatLang {
+    openChatButton: Lang<never>;
+    closeChatButton: Lang<never>;
+    newChatButton: Lang<never>;
+    chatHistoryButton: Lang<never>;
+    historyTitle: Lang<never>;
+    historyClearButton: Lang<never>;
+    historyNewChatLabel: Lang<never>;
+    sideChatRegionLabel: Lang<never>;
+    inspirationResultTitle: Lang<never>;
+    inspirationResultSubtitle: Lang<never>;
+    productComparisonTitle: Lang<never>;
+    productComparisonSubtitle: Lang<{
+        count: number | string;
+    }>;
+    chatMessagesLabel: Lang<never>;
+    newMessagesButton: Lang<never>;
+    loadingVerbsProductQuery: Lang<never>;
+    loadingVerbsProductSearch: Lang<never>;
+    loadingVerbsProductComparison: Lang<never>;
+    loadingVerbsImageSearch: Lang<never>;
+    loadingVerbsProductSimilar: Lang<never>;
+    loadingVerbsInspirationRequest: Lang<never>;
+    feedbackPrompt: Lang<never>;
+    feedbackThanks: Lang<never>;
+    feedbackThumbsUpButton: Lang<never>;
+    feedbackThumbsDownButton: Lang<never>;
+    feedbackDismissButton: Lang<never>;
+    comparisonsTitle: Lang<{
+        count: number;
+        max: number;
+    }>;
+    comparisonsClearButton: Lang<never>;
+    comparisonsAddText: Lang<never>;
+    comparisonsCompareButton: Lang<never>;
+    comparisonsRemoveButton: Lang<{
+        name: string;
+    }>;
+    chatUnavailableMessage: Lang<never>;
+    highVolumeMessage: Lang<never>;
+    highVolumeSubMessage: Lang<never>;
+    newSessionButton: Lang<never>;
+    facetsTitle: Lang<never>;
+    facetsApplyButton: Lang<{
+        count: number;
+    }>;
+    facetsClearButton: Lang<never>;
+    attachmentCompareTitle: Lang<never>;
+    attachmentAskProductTitle: Lang<never>;
+    attachmentImageSimilarTitle: Lang<never>;
+    topicDriftScopeMessage: Lang<never>;
+    topicDriftScopeSubMessage: Lang<never>;
+    topicDriftMessage: Lang<never>;
+    topicDriftSubMessage: Lang<never>;
+    topicDriftDismissButton: Lang<never>;
+    inputPlaceholder: Lang<never>;
+    inputPlaceholderAskProduct: Lang<never>;
+    inputPlaceholderCompare: Lang<never>;
+    inputPlaceholderComparedProducts: Lang<never>;
+    inputPlaceholderAskImage: Lang<never>;
+    inputPlaceholderAddCompare: Lang<never>;
+    uploadImageButton: Lang<never>;
+    sendMessageButton: Lang<never>;
+    dropOverlayText: Lang<never>;
+    disclaimerText: Lang<never>;
+    privacyPolicyLinkText: Lang<never>;
+    expiredMessage: Lang<never>;
+}
+export declare const chatDefaultLang: Partial<ChatLang>;
+/** Resolves the plain-text `value` of a lang entry (invoking value functions with `data`). */
+export declare function langTextOf<T>(entry: (Partial<LangValue<T>> & Partial<LangAttributes<T>>) | undefined, data?: T): string | undefined;
+/** Resolves a single attribute of a lang entry (invoking attribute functions with `data`). */
+export declare function langAttrOf<T>(entry: (Partial<LangValue<T>> & Partial<LangAttributes<T>>) | undefined, attribute: 'aria-label' | 'aria-valuetext' | 'title' | 'alt' | 'placeholder', data?: T): string | undefined;
+//# sourceMappingURL=Chat.lang.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.lang.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.lang.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,100 @@
+export const 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`). */
+export 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`). */
+export function langAttrOf(entry, attribute, data) {
+    const value = entry?.attributes?.[attribute];
+    return typeof value === 'function' ? value(data) : value;
+}

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

@@ -0,0 +1,26 @@
+import type { ChatController } from '@athoscommerce/snap-controller';
+import type { ChatMessage } from '@athoscommerce/snap-store-mobx';
+import { Theme } from '../../../../providers';
+import { ChatLang } from '../Chat.lang';
+/**
+ * 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.
+ */
+export declare const ChatAttachments: ((props: ChatAttachmentsProps) => JSX.Element) & {
+    displayName: string;
+};
+export type ChatAttachmentsProps = {
+    controller: ChatController;
+    activeMessage?: ChatMessage | null;
+    sideChatOpen?: boolean;
+    mobile?: boolean;
+    onProductQuickView?: () => void;
+    /** Called when product attachments are removed (closes the mobile product info panel). */
+    onProductAttachmentsRemoved?: () => void;
+    lang?: Partial<ChatLang>;
+    disableStyles?: boolean;
+    theme?: Theme;
+    treePath?: string;
+};
+//# sourceMappingURL=ChatAttachments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatAttachments.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/components/ChatAttachments.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAA8C,MAAM,gCAAgC,CAAC;AAE9G,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AAKrE;;;;GAIG;AACH,eAAO,MAAM,eAAe,WAAoB,oBAAoB,KAAG,GAAG,CAAC,OAAO;;CA2HhF,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG;IAClC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,0FAA0F;IAC1F,2BAA2B,CAAC,EAAE,MAAM,IAAI,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

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

@@ -0,0 +1,98 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import deepmerge from 'deepmerge';
+import { observer } from 'mobx-react-lite';
+import { ChatAttachmentContext } from '../../../Molecules/ChatAttachmentContext';
+import { chatDefaultLang, langTextOf } from '../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.
+ */
+export const ChatAttachments = observer((props) => {
+    const { controller, activeMessage, sideChatOpen, mobile, onProductQuickView, disableStyles, theme, treePath } = props;
+    const { store } = controller;
+    const lang = deepmerge(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 ? langTextOf(lang.attachmentCompareTitle) : langTextOf(lang.attachmentAskProductTitle)) || '';
+    const hasImageError = imageItems.some((item) => item.hasError);
+    const imageTitle = (imageItems.length > 0 && !hasImageError ? langTextOf(lang.attachmentImageSimilarTitle) : '') || '';
+    return (_jsxs(_Fragment, { children: [comparisonItems.length > 0 && (_jsx(ChatAttachmentContext, { ...subProps.attachmentContext, title: langTextOf(lang.attachmentCompareTitle) || '', items: comparisonItems, onClose: () => {
+                    store.currentChat?.comparisons.resetCommitted();
+                    store.currentChat?.dismissSideChat();
+                } })), productItems.length > 0 && (_jsx(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 && _jsx(ChatAttachmentContext, { ...subProps.attachmentContext, title: imageTitle, items: imageItems })] }));
+});

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

@@ -0,0 +1,13 @@
+import type { ChatController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../../types';
+import { ChatLang } from '../Chat.lang';
+export declare const ChatComparisonsTray: ((properties: ChatComparisonsTrayProps) => JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatComparisonsTrayProps = {
+    controller: ChatController;
+    lang?: Partial<ChatLang>;
+    primaryColorBg?: string;
+    primaryColorFg?: string;
+} & ComponentProps<ChatComparisonsTrayProps>;
+//# sourceMappingURL=ChatComparisonsTray.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComparisonsTray.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/components/ChatComparisonsTray.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,cAAc,EAAe,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AAsHrE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,GAAG,CAAC,OAAO,GAAG,IAAI;;CA2GpG,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG;IACtC,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,wBAAwB,CAAC,CAAC"}

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

@@ -0,0 +1,155 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../../providers';
+import { Colour, mergeProps, mergeStyles } from '../../../../utilities';
+import { useLang } from '../../../../hooks';
+import { useA11y } from '../../../../hooks/useA11y';
+import { Button } from '../../../Atoms/Button';
+import { Icon } from '../../../Atoms/Icon';
+import { Image } from '../../../Atoms/Image';
+import { chatDefaultLang, langAttrOf } from '../Chat.lang';
+const defaultStyles = ({ primaryColorBg, primaryColorFg }) => {
+    const colorPrimary = primaryColorBg;
+    const colorPrimaryText = primaryColorFg;
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5em',
+        background: new 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,
+                    },
+                },
+            },
+        },
+    });
+};
+export const ChatComparisonsTray = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatComparisonsTray', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller } = props;
+    const { store } = controller;
+    const comparisons = store.currentChat?.comparisons;
+    const lang = deepmerge(chatDefaultLang, props.lang || {});
+    const mergedLang = 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 = mergeStyles(props, defaultStyles);
+    if (!comparisons?.compared || comparisons.compared.length === 0) {
+        return null;
+    }
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__chat__content__header__comparisons', className, internalClassName), children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [_jsx(Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), _jsx("span", { className: 'ss__chat__content__header__comparisons__header__title__text', ...mergedLang.comparisonsTitle?.all })] }), _jsx("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: _jsx(Button, { onClick: () => comparisons.reset(), children: _jsx("span", { ...mergedLang.comparisonsClearButton?.all }) }) })] }), _jsxs("div", { className: 'ss__chat__content__header__comparisons__content', children: [_jsx("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: comparisons.maxItems }).map((_, index) => {
+                                const comparisonItem = comparisons.compared[index];
+                                return (_jsx("div", { className: classnames('ss__chat__content__header__comparisons__content__comparison', {
+                                        'ss__chat__content__header__comparisons__content__comparison--placeholder': !comparisonItem,
+                                    }), children: comparisonItem ? (_jsxs(_Fragment, { children: [_jsx(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 ||
+                                                    '' }), _jsx("div", { className: "ss__chat__content__header__comparisons__content__comparison__remove", role: "button", ref: (e) => useA11y(e), "aria-label": langAttrOf(lang.comparisonsRemoveButton, 'aria-label', {
+                                                    name: (comparisonItem?.result?.display || comparisonItem?.result)?.mappings?.core?.name || '',
+                                                }), onClick: () => {
+                                                    comparisons.remove(comparisonItem.result.id);
+                                                }, children: _jsx(Icon, { icon: 'close-thin', size: '12px' }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: 'plus-thin' }), _jsx("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', ...mergedLang.comparisonsAddText?.all })] })) }, index));
+                            }) }), _jsx("div", { className: classnames('ss__chat__content__header__comparisons__action', {
+                                'ss__chat__content__header__comparisons__action--hidden': (comparisons.compared.length || 0) < 2,
+                            }), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: langAttrOf(lang.comparisonsCompareButton, 'title') }, children: _jsx("span", { ...mergedLang.comparisonsCompareButton?.value }) }) })] })] }) }));
+});

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

@@ -0,0 +1,19 @@
+import { RefObject } from 'preact';
+import type { ChatController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../../types';
+import { ChatLang } from '../Chat.lang';
+export declare const ChatComposer: ((properties: ChatComposerProps) => JSX.Element) & {
+    displayName: string;
+};
+export type ChatComposerProps = {
+    controller: ChatController;
+    fileInputRef: RefObject<HTMLInputElement>;
+    /** Called after the user submits a message (Enter key or send button). */
+    onUserSend?: () => void;
+    poweredByText?: string;
+    privacyPolicyUrl?: string;
+    lang?: Partial<ChatLang>;
+    primaryColorBg?: string;
+    primaryColorFg?: string;
+} & ComponentProps<ChatComposerProps>;
+//# sourceMappingURL=ChatComposer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/components/ChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAe,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAA2C,MAAM,cAAc,CAAC;AAmGjF,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,GAAG,CAAC,OAAO;;CA+H/E,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC1C,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC"}