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

package/dist/esm/components/src/components/Molecules/ChatResult/ChatResult.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath, withTracking } from '../../../providers';
+import { Colour, mergeProps, mergeStyles } from '../../../utilities';
+import { Image } from '../../Atoms/Image';
+import { Button } from '../../Atoms/Button';
+import { Price } from '../../Atoms/Price';
+import { CalloutBadge } from '../CalloutBadge';
+import { OverlayBadge } from '../OverlayBadge';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
+const defaultStyles = ({ theme }) => {
+    const colorCta = Colour.concrete(theme?.variables?.colors?.accent) || '#feeeae';
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        boxSizing: 'border-box',
+        border: '1px solid #e5e7eb',
+        borderRadius: '1em',
+        overflow: 'hidden',
+        // rest slightly scaled down and grow to full size on hover so the zoom
+        // reads as a subtle enlargement without ever exceeding the slide bounds
+        // (the surrounding Slideshow clips overflow), which would otherwise crop
+        // the card's border on hover
+        transform: 'scale(0.96)',
+        transition: 'transform 0.3s ease',
+        '&:hover': {
+            transform: 'scale(1)',
+        },
+        '.ss__chat-result__image': {
+            width: '100%',
+            aspectRatio: '1 / 1',
+            position: 'relative',
+            overflow: 'hidden',
+            // fixed-aspect frame: scale the image to fill it and crop overflow so
+            // results with different intrinsic image aspect ratios still line up
+            // at the same height when displayed side-by-side.
+            img: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+            },
+            '.ss__chat-result__image__buttons': {
+                position: 'absolute',
+                bottom: 0,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '0.5em',
+                padding: '0.5em',
+                boxSizing: 'border-box',
+                '.ss__button': {
+                    padding: '0.25em 0.5em',
+                    background: 'rgba(255, 255, 255, 0.9)',
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '2em',
+                    boxShadow: 'inset 0 0 1px 0px rgba(0, 0, 0, 0.5)',
+                    flex: '1 1 0',
+                    minWidth: 0,
+                    fontWeight: 'bold',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                },
+            },
+            '.ss__chat-result__image__icons': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                gap: '0.5em',
+                padding: '0.5em',
+                flex: '0 0 auto',
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
+                '.ss__button': {
+                    height: '2.5em',
+                    width: '2.5em',
+                    backgroundColor: '#000',
+                    borderRadius: '50%',
+                    justifyContent: 'center',
+                    boxSizing: 'border-box',
+                    '&.ss__chat-result__image__icons__icon--cart': {
+                        backgroundColor: colorCta,
+                        svg: {
+                            fill: '#000',
+                            stroke: '#000',
+                        },
+                    },
+                    svg: {
+                        fill: '#fff',
+                        stroke: '#fff',
+                    },
+                },
+            },
+        },
+        '.ss__chat-result__content': {
+            background: '#f9fafb',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5em',
+            flex: '1 1 auto',
+            padding: '0.5em 0',
+            '.ss__chat-result__content__title--primary': {
+                padding: '0 0.5em',
+                '&.ss__button': {
+                    display: 'block',
+                    background: 'none',
+                    border: 'none',
+                    color: 'inherit',
+                    font: 'inherit',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    width: 'auto',
+                },
+            },
+            '.ss__chat-result__content__title--secondary': {
+                padding: '0 0.5em',
+                color: '#6A7282',
+                fontSize: '90%',
+            },
+            '.ss__chat-result__content__price': {
+                padding: '0 0.5em',
+                color: '#000',
+                fontWeight: 'bold',
+                fontSize: '1.2em',
+            },
+        },
+    });
+};
+export const ChatResult = withTracking(observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatResult', globalTheme, defaultProps, properties);
+    const { controller, result, scrollToBottom, onProductClick, trackingRef, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('chatResult', {
+        ...props,
+        customComponent: props.customComponent && props.customComponent !== 'ChatResult' ? props.customComponent : undefined,
+    });
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const isInComparison = controller.store.currentChat?.comparisons.items.some((item) => item.result?.id === result.id);
+    // a result is "configurable" when it ships with selectable variant options
+    // (e.g. color/size); those need a selection before they can be added to cart
+    const isConfigurable = !!result.variants?.optionConfig && Object.keys(result.variants.optionConfig).length > 0;
+    const subProps = {
+        button: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        image: {
+            lazy: false,
+            onLoad: scrollToBottom,
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const productName = result.display.mappings.core?.name;
+    //initialize lang
+    const defaultLang = {
+        similarButton: {
+            value: 'Similar',
+            attributes: {
+                'aria-label': `Show similar to ${productName || 'product'}`,
+            },
+        },
+        compareButton: {
+            value: 'Compare',
+            attributes: {
+                'aria-label': `Compare ${productName || 'product'}`,
+            },
+        },
+        addedToComparisonButton: {
+            attributes: {
+                'aria-label': `${productName || 'Product'} added to comparison`,
+                title: 'Added to comparison',
+            },
+        },
+        discussButton: {
+            attributes: {
+                'aria-label': `Discuss ${productName || 'product'}`,
+                title: 'Discuss Product',
+            },
+        },
+        addToCartButton: {
+            attributes: {
+                'aria-label': `Add ${productName || 'product'} to cart`,
+                title: 'Add to Cart',
+            },
+        },
+        configureButton: {
+            attributes: {
+                'aria-label': `Configure ${productName || 'product'}`,
+                title: 'Configure',
+            },
+        },
+        productLink: {
+            attributes: {
+                'aria-label': `Open ${productName || 'product'}`,
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        controller,
+        result,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-result', className, internalClassName), ref: trackingRef, ...styling, children: [_jsxs("div", { className: "ss__chat-result__image", children: [_jsx(OverlayBadge, { controller: controller, result: result, renderEmpty: true, children: _jsx(Image, { ...subProps.image, className: 'ss__chat-result__detail-slot__image', alt: productName || '', src: result.display.mappings.core?.imageUrl || result.display.mappings.core?.parentImageUrl || '' }) }), _jsxs("div", { className: "ss__chat-result__image__buttons", children: [controller.store.features.similarProducts.enabled && (_jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__buttons__similar', onClick: () => {
+                                        controller.productSimilar(result);
+                                    }, ...mergedLang.similarButton.all })), _jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__buttons__compare', icon: isInComparison ? { icon: 'check-thin' } : undefined, "aria-pressed": isInComparison, onClick: () => {
+                                        // toggle: clicking again removes it from comparison, matching the 'x' icon in the comparison view
+                                        if (isInComparison) {
+                                            controller.store.currentChat?.comparisons.remove(result.id);
+                                            return;
+                                        }
+                                        controller.compareProduct(result);
+                                    }, ...(isInComparison ? mergedLang.addedToComparisonButton.attributes : mergedLang.compareButton.all) })] }), _jsxs("div", { className: "ss__chat-result__image__icons", children: [_jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__icons__icon--inquire', icon: { icon: 'chat' }, onClick: () => {
+                                        controller.productQuery(result);
+                                    }, ...mergedLang.discussButton.attributes }), _jsx(Button, { ...subProps.button, className: 'ss__chat-result__image__icons__icon--cart', icon: { icon: 'cart' }, onClick: () => {
+                                        // configurable products need a variant selection — open the product
+                                        // information panel so the user can pick options before adding to cart
+                                        if (isConfigurable) {
+                                            controller.productQuickView(result);
+                                            return;
+                                        }
+                                        controller.track.product.addToCart(result);
+                                        controller.addToCart(result);
+                                    }, ...(isConfigurable ? mergedLang.configureButton.attributes : mergedLang.addToCartButton.attributes) })] })] }), _jsxs("div", { className: "ss__chat-result__content", children: [productName &&
+                            (onProductClick ? (_jsx(Button, { ...subProps.button, internalClassName: 'ss__chat-result__content__title--primary', content: productName, onClick: (e) => onProductClick(e), ...mergedLang.productLink.attributes })) : (_jsx("div", { className: "ss__chat-result__content__title--primary", children: productName }))), result.display.mappings.core?.price != null && (_jsx("div", { className: "ss__chat-result__content__price", children: _jsx(Price, { value: result.display.mappings.core?.price }) })), _jsx(CalloutBadge, { controller: controller, result: result })] })] }) }));
+}));

package/dist/esm/components/src/components/Molecules/ChatResult/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatResult';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/ChatResult/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatResult/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/components/src/components/Molecules/ChatResult/index.js

@@ -0,0 +1 @@
+export * from './ChatResult';

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.d.ts

@@ -0,0 +1,24 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import type { ChatController } from '@athoscommerce/snap-controller';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+import type { ChatResponseProductRecommendationData } from '@athoscommerce/snap-client';
+import type { SearchResponseModelResult } from '@athoscommerce/snapi-types';
+export declare const ChatResultsDisplay: ((properties: ChatResultsDisplayProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatResultsDisplayItem = {
+    id?: string;
+    messageType?: string;
+    results?: (Product | SearchResponseModelResult)[];
+    recommendationResult?: (Omit<ChatResponseProductRecommendationData['recommendationResult'][number], 'results'> & {
+        results?: (Product | SearchResponseModelResult)[];
+    })[];
+};
+export type ChatResultsDisplayProps = {
+    chatItem: ChatResultsDisplayItem;
+    controller: ChatController;
+    scrollToBottom: () => void;
+    onProductQuickView?: () => void;
+} & ComponentProps<ChatResultsDisplayProps>;
+//# sourceMappingURL=ChatResultsDisplay.d.ts.map

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,4BAA4B,CAAC;AACxF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AA+B5E,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAuG7E,CAAC;AAOH,MAAM,MAAM,sBAAsB,GAAG;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,yBAAyB,CAAC,EAAE,CAAC;IAClD,oBAAoB,CAAC,EAAE,CAAC,IAAI,CAAC,qCAAqC,CAAC,sBAAsB,CAAC,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG;QAChH,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,yBAAyB,CAAC,EAAE,CAAC;KAClD,CAAC,EAAE,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,QAAQ,EAAE,sBAAsB,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC"}

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.js

@@ -0,0 +1,107 @@
+import { createElement as _createElement } from "@emotion/react";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { useMediaQuery, useCustomComponentOverride } from '../../../hooks';
+import { Slideshow } from '../Slideshow';
+import { ChatResult } from '../ChatResult';
+const defaultStyles = () => {
+    return css({
+        width: '100%',
+        marginTop: '12px',
+        '.ss__chat-results-display__result': {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            cursor: 'pointer',
+        },
+    });
+};
+const slideshowStyleScript = () => {
+    return css({
+        '.ss__slideshow__navigation .ss__button': {
+            background: 'rgba(255, 255, 255, 0.85)',
+            borderRadius: '50%',
+            width: '2em',
+            height: '2em',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+        },
+    });
+};
+export const ChatResultsDisplay = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatResultsDisplay', globalTheme, defaultProps, properties);
+    const { chatItem, controller, scrollToBottom, onProductQuickView, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('chatResultsDisplay', props);
+    const currentChat = controller.store.currentChat;
+    const activeMessage = currentChat?.activeMessage;
+    const isSideChatOpen = !!activeMessage &&
+        ['inspirationResult', 'productComparison', 'productQuery'].includes(activeMessage.messageType) &&
+        currentChat?.dismissedSideChatMessageId !== activeMessage.id;
+    const isNarrow = useMediaQuery('(max-width: 549px)');
+    // only the tablet range needs the narrower slideshow when the side chat is open;
+    // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
+    const isTabletRange = useMediaQuery('(min-width: 768px) and (max-width: 1200px)');
+    const isConstrained = !isNarrow && isSideChatOpen && isTabletRange;
+    const slidesToShow = isNarrow || isConstrained ? 1.9 : 2.9;
+    // after all hooks — an override that resolves or fails mid-lifecycle must not
+    // change the hook count between renders
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const subProps = {
+        slideshow: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+            slidesToShow,
+            slidesToMove: isNarrow || isConstrained ? 2 : 3,
+            loop: false,
+            showPagination: false,
+            centerInsufficientSlides: false,
+            overlayNavigation: true,
+            styleScript: slideshowStyleScript,
+        },
+        chatResult: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const handleResultClick = (e, result) => {
+        // buttons should be able to be clicked without triggering the product click
+        if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
+            return;
+        controller.track.product.click(e, result);
+        controller.productQuickView(result);
+        onProductQuickView?.();
+    };
+    const renderSlideshow = (results, key) => {
+        const slides = results.map((result) => ({
+            content: (_jsx("div", { className: "ss__chat-results-display__result", onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { ...subProps.chatResult, result: result, controller: controller, scrollToBottom: scrollToBottom, onProductClick: (e) => {
+                        controller.track.product.click(e, result);
+                        controller.productQuickView(result);
+                        onProductQuickView?.();
+                    } }) }, result.id)),
+        }));
+        return _createElement(Slideshow, { ...subProps.slideshow, key: key, slides: slides });
+    };
+    // the store hydrates message results into Product instances before they reach this component
+    const isRecommendation = chatItem.messageType === 'productRecommendation' && !!chatItem.recommendationResult?.length;
+    if (!isRecommendation && !chatItem.results?.length)
+        return null;
+    return (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-results-display', className, internalClassName), ...styling, children: isRecommendation
+                ? chatItem.recommendationResult.map((recommendation, index) => recommendation.results?.length ? renderSlideshow(recommendation.results, index) : null)
+                : renderSlideshow(chatItem.results) }) }));
+});

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatResultsDisplay';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatResultsDisplay/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/index.js

@@ -0,0 +1 @@
+export * from './ChatResultsDisplay';

package/dist/esm/components/src/components/Molecules/ChatSuggestedQuestions/ChatSuggestedQuestions.d.ts

@@ -0,0 +1,16 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import type { ChatController } from '@athoscommerce/snap-controller';
+import type { ChatResponseActionsData } from '@athoscommerce/snap-client';
+export declare const ChatSuggestedQuestions: ((properties: ChatSuggestedQuestionsProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatSuggestedQuestionsProps = {
+    controller: ChatController;
+    questions?: string[];
+    actions?: ChatResponseActionsData['actions'];
+} & ChatSuggestedQuestionsTemplatesLegalProps & ComponentProps<ChatSuggestedQuestionsProps>;
+export type ChatSuggestedQuestionsTemplatesLegalProps = {
+    primaryColor?: string;
+};
+//# sourceMappingURL=ChatSuggestedQuestions.d.ts.map

package/dist/esm/components/src/components/Molecules/ChatSuggestedQuestions/ChatSuggestedQuestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSuggestedQuestions.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatSuggestedQuestions/ChatSuggestedQuestions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA2D1E,eAAO,MAAM,sBAAsB,gBAAyB,2BAA2B;;CA4DrF,CAAC;AAOH,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,EAAE,cAAc,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;CAC7C,GAAG,yCAAyC,GAC5C,cAAc,CAAC,2BAA2B,CAAC,CAAC;AAE7C,MAAM,MAAM,yCAAyC,GAAG;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/esm/components/src/components/Molecules/ChatSuggestedQuestions/ChatSuggestedQuestions.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { Colour, mergeProps, mergeStyles } from '../../../utilities';
+import { useCustomComponentOverride } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
+const defaultStyles = ({ primaryColor, theme }) => {
+    const colorPrimary = primaryColor || Colour.concrete(theme?.variables?.colors?.primary) || '#253B80';
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        '.ss__chat-suggested-questions__item.ss__button': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '12px',
+            background: '#fff',
+            border: '1px solid #eee',
+            borderRadius: '12px',
+            padding: '14px 16px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            color: '#333',
+            textAlign: 'left',
+            width: '100%',
+            boxSizing: 'border-box',
+            '.ss__button__content': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '12px',
+            },
+            '&:not(.ss__button--disabled):hover': {
+                borderColor: '#ccc',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+            },
+            '&:focus-visible': {
+                outline: `2px solid ${colorPrimary}`,
+                outlineOffset: '2px',
+            },
+            '.ss__chat-suggested-questions__item__text': {
+                flex: 1,
+                fontWeight: 500,
+            },
+            '.ss__chat-suggested-questions__item__icon': {
+                width: '30px',
+                height: '30px',
+                background: colorPrimary,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '50%',
+                flexShrink: 0,
+                svg: {
+                    fill: '#fff',
+                    stroke: '#fff',
+                },
+            },
+        },
+    });
+};
+export const ChatSuggestedQuestions = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatSuggestedQuestions', globalTheme, defaultProps, properties);
+    const { controller, questions, actions, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('chatSuggestedQuestions', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const items = questions ?? actions?.map((action) => action.message) ?? [];
+    if (items.length === 0) {
+        return null;
+    }
+    const subProps = {
+        button: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        icon: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    return (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-suggested-questions', className, internalClassName), ...styling, children: items.map((item, index) => (_createElement(Button, { ...subProps.button, key: index, internalClassName: "ss__chat-suggested-questions__item", onClick: () => {
+                    controller.openChat(item);
+                } },
+                _jsx("span", { className: "ss__chat-suggested-questions__item__text", children: item }),
+                _jsx("span", { className: "ss__chat-suggested-questions__item__icon", "aria-hidden": "true", children: _jsx(Icon, { ...subProps.icon, icon: "chat" }) })))) }) }));
+});

package/dist/esm/components/src/components/Molecules/ChatSuggestedQuestions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatSuggestedQuestions';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/ChatSuggestedQuestions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatSuggestedQuestions/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/esm/components/src/components/Molecules/ChatSuggestedQuestions/index.js

@@ -0,0 +1 @@
+export * from './ChatSuggestedQuestions';

package/dist/esm/components/src/components/Molecules/Gallery/Gallery.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const Gallery: ((properties: GalleryProps) => import("preact").VNode<any> | null) & {
+    displayName: string;
+};
+export type GalleryProps = {
+    images: string[];
+    open: boolean;
+    startIndex?: number;
+    alt?: string;
+    lang?: Partial<GalleryLang>;
+} & GalleryTemplatesLegalProps & ComponentProps<GalleryProps>;
+export type GalleryTemplatesLegalProps = {
+    onClose?: () => void;
+    zoomMin?: number;
+    zoomMax?: number;
+    zoomStep?: number;
+    swipeThreshold?: number;
+};
+export interface GalleryLang {
+    gallery: Lang<never>;
+    zoomOutButton: Lang<never>;
+    zoomInButton: Lang<never>;
+    closeButton: Lang<never>;
+    prevButton: Lang<never>;
+    nextButton: Lang<never>;
+}
+//# sourceMappingURL=Gallery.d.ts.map

package/dist/esm/components/src/components/Molecules/Gallery/Gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Gallery/Gallery.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AA8FxD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAsTvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACxB"}