@constructor-io/constructorio-ui-asa 1.0.0

package/lib/mjs/components/Chat/WelcomeScreen.css

@@ -0,0 +1,205 @@
+.cio-asa-welcome-screen {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 20px;
+  position: relative;
+}
+
+.cio-asa-welcome-screen__close {
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1a1a1a;
+  font-size: 20px;
+  line-height: 1;
+  z-index: 1;
+}
+
+.cio-asa-welcome-screen__close:hover {
+  opacity: 0.7;
+}
+
+.cio-asa-welcome-screen__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  max-width: 504px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .cio-asa-welcome-screen__content {
+    max-width: 366px;
+  }
+}
+
+.cio-asa-welcome-screen__title {
+  font-weight: 400;
+  font-size: 26px;
+  line-height: 32px;
+  text-align: center;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  color: #000000;
+  margin: 0;
+  align-self: stretch;
+}
+
+.cio-asa-welcome-screen__input-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 8px 8px 12px;
+  gap: 12px;
+  width: 100%;
+  height: 40px;
+  margin-top: 32px;
+  background: #ffffff;
+  border: 1px solid #DEE0E3;
+  box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.cio-asa-welcome-screen__input {
+  flex: 1;
+  padding: 0;
+  border: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  color: #0F1324;
+  outline: none;
+  background: transparent;
+}
+
+.cio-asa-welcome-screen__input::placeholder {
+  color: rgba(15, 19, 36, 0.7);
+}
+
+/* Input states */
+.cio-asa-welcome-screen__input-row:hover {
+  border-color: #C8CAD0;
+}
+
+.cio-asa-welcome-screen__input-row:focus-within {
+  border-color: #A980FF;
+  box-shadow: 0px 0px 0px 2px rgba(201, 176, 254, 0.7);
+}
+
+.cio-asa-welcome-screen__input-row:active {
+  border-color: #000000;
+  box-shadow: inset 0px 1px 4px rgba(18, 18, 105, 0.14), inset 2.1px 2px 2px rgba(18, 18, 105, 0.1), inset 0px 1.5px 3px rgba(18, 18, 105, 0.05);
+}
+
+.cio-asa-welcome-screen__input-row--disabled {
+  border-color: #E9EAEC;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn {
+  background: #E9EAEC;
+  box-shadow: none;
+  color: rgba(10, 15, 41, 0.25);
+  cursor: default;
+}
+
+.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn svg path {
+  fill: rgba(10, 15, 41, 0.25);
+}
+
+.cio-asa-welcome-screen__send-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  gap: 6px;
+  height: 24px;
+  background: #14151A;
+  box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  color: #ffffff;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.cio-asa-welcome-screen__send-btn:hover {
+  background: #333;
+}
+
+.cio-asa-welcome-screen__suggestions {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  column-gap: 16px;
+  row-gap: 11px;
+  width: 100%;
+  margin-top: 20px;
+  animation: cio-asa-fade-in 0.5s ease 0.5s both;
+}
+
+.cio-asa-welcome-screen__suggestion-chip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 18px 16px;
+  background: #ffffff;
+  box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
+  border-radius: 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  color: #343434;
+  box-sizing: border-box;
+  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+
+.cio-asa-welcome-screen__suggestion-chip:hover {
+  background: #ffffff;
+  border-color: #ffffff;
+  box-shadow: 0px 6px 14px rgba(18, 18, 105, 0.11), 0px 2px 4px rgba(18, 18, 105, 0.0716748), 0px 1px 2px rgba(18, 18, 105, 0.055);
+}
+
+.cio-asa-welcome-screen__suggestion-chip:active {
+  background: #E0E3EB;
+  border-color: #DEE0E3;
+  box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
+}
+
+.cio-asa-welcome-screen__terms {
+  font-size: 11px;
+  color: #999;
+  text-align: center;
+  padding-top: 16px;
+  max-width: 504px;
+  margin: 0 auto;
+}
+
+.cio-asa-welcome-screen__terms a {
+  color: #666;
+  text-decoration: underline;
+}

package/lib/mjs/components/Chat/WelcomeScreen.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
+import { SendPlaneIcon } from '../icons';
+import translate from '../../utils/translate';
+import useMessageInput from '../../hooks/useMessageInput';
+const DEFAULT_SUGGESTIONS = [];
+export default function WelcomeScreen({ suggestions = DEFAULT_SUGGESTIONS, onSend, onClose, termsText, disabled = false, translations, componentOverrides, }) {
+    const { value: inputValue, setValue: setInputValue, handleSubmit, handleKeyDown, } = useMessageInput({ onSend, isDisabled: disabled });
+    const titleRenderProps = {
+        text: translate('CioAsa.welcome.title', translations),
+    };
+    const inputRenderProps = {
+        value: inputValue,
+        onChange: setInputValue,
+        onSubmit: handleSubmit,
+        placeholder: translate('CioAsa.welcome.placeholder', translations),
+        isDisabled: disabled,
+    };
+    const suggestionsRenderProps = {
+        suggestions,
+        onSuggestionClick: onSend,
+    };
+    return (React.createElement("div", { className: 'cio-asa-welcome-screen' },
+        onClose && (React.createElement("button", { type: 'button', className: 'cio-asa-welcome-screen__close', onClick: onClose, "aria-label": translate('CioAsa.header.close', translations) }, "\u2715")),
+        React.createElement("div", { className: 'cio-asa-welcome-screen__content' },
+            React.createElement(RenderPropsWrapper, { override: componentOverrides?.title?.reactNode, props: titleRenderProps },
+                React.createElement("h2", { id: 'cio-asa-chat-title', className: 'cio-asa-welcome-screen__title' }, titleRenderProps.text)),
+            React.createElement(RenderPropsWrapper, { override: componentOverrides?.input?.reactNode, props: inputRenderProps },
+                React.createElement("div", { className: `cio-asa-welcome-screen__input-row${disabled ? ' cio-asa-welcome-screen__input-row--disabled' : ''}` },
+                    React.createElement("input", { type: 'text', className: 'cio-asa-welcome-screen__input', value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: inputRenderProps.placeholder, disabled: disabled, "aria-label": translate('CioAsa.welcome.inputAriaLabel', translations) }),
+                    React.createElement("button", { type: 'button', className: 'cio-asa-welcome-screen__send-btn', onClick: handleSubmit, disabled: disabled || !inputValue.trim(), "aria-label": translate('CioAsa.welcome.sendAriaLabel', translations) },
+                        translate('CioAsa.welcome.sendButton', translations),
+                        React.createElement(SendPlaneIcon, null)))),
+            suggestions.length > 0 && (React.createElement(RenderPropsWrapper, { override: componentOverrides?.suggestedQuestions?.reactNode, props: suggestionsRenderProps },
+                React.createElement("nav", { className: 'cio-asa-welcome-screen__suggestions', "aria-label": translate('CioAsa.welcome.suggestionsAriaLabel', translations) }, suggestions.map((suggestion) => (React.createElement("button", { key: suggestion, type: 'button', className: 'cio-asa-welcome-screen__suggestion-chip', disabled: disabled, onClick: () => onSend(suggestion) }, suggestion))))))),
+        termsText && React.createElement("div", { className: 'cio-asa-welcome-screen__terms' }, termsText)));
+}
+WelcomeScreen.displayName = 'WelcomeScreen';

package/lib/mjs/components/CioAsaProvider/CioAsaProvider.js

@@ -0,0 +1,19 @@
+import React, { useMemo, useState } from 'react';
+import useCioClient from '../../hooks/useCioClient';
+import { AsaContext } from '../../hooks/useCioAsaContext';
+import * as defaultFormatters from '../../utils/formatters';
+import * as defaultUrlHelpers from '../../utils/urlHelpers';
+export default function CioAsaProvider(props) {
+    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, children, } = props;
+    const [cioClientOptions, setCioClientOptions] = useState({});
+    const cioClient = useCioClient({ apiKey, cioClient: customCioClient, cioClientOptions });
+    const contextValue = useMemo(() => ({
+        cioClient,
+        cioClientOptions,
+        setCioClientOptions,
+        staticRequestConfigs,
+        formatters: { ...defaultFormatters, ...formatters },
+        urlHelpers: { ...defaultUrlHelpers, ...urlHelpers },
+    }), [cioClient, cioClientOptions, formatters, urlHelpers, staticRequestConfigs]);
+    return (React.createElement(AsaContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));
+}

package/lib/mjs/components/ResultsBlock/ResultsBlock.css

@@ -0,0 +1,217 @@
+.cio-asa-results-block {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.cio-asa-results-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cio-asa-results-group__label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+/* Product Card - override ui-components defaults */
+.cio-asa-product-card.cio-product-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  min-width: unset;
+  max-width: unset;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  background: transparent;
+}
+
+.cio-asa-product-card .cio-asa-product-card__image-wrapper.cio-product-card-image-section {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--cio-asa-image-ratio, 3 / 4);
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: #f3f4f6;
+  flex-shrink: 0;
+}
+
+.cio-asa-product-card .cio-asa-product-card__image-wrapper .cio-product-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  min-height: unset;
+  border-radius: 0;
+}
+
+.cio-asa-product-card .cio-asa-product-card__badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 4px;
+  min-width: 35px;
+  max-width: 120px;
+  height: 20px;
+  background: #dc2626;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: -0.005em;
+  border-radius: 4px;
+  border: none;
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cio-asa-product-card .cio-asa-product-card__info.cio-product-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  padding: 0;
+}
+
+.cio-asa-product-card .cio-asa-product-card__name.cio-product-card-title-section {
+  font-size: 12px;
+  line-height: 1.3;
+  color: #1a1a1a;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+  min-height: calc(2 * 12px * 1.3);
+}
+
+.cio-asa-product-card__description {
+  font-size: 11px;
+  line-height: 1.3;
+  color: #6b7280;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span {
+  word-spacing: -1ch;
+}
+
+/* Sale price (rendered first by library, displayed second) */
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child:not(:only-child) {
+  color: #dc2626;
+  order: 2;
+}
+
+/* Original price (rendered second by library, displayed first) */
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:last-child:not(:first-child) {
+  font-size: 12px;
+  color: #9ca3af;
+  text-decoration: line-through;
+  font-weight: normal;
+  order: 1;
+}
+
+/* Carousel overrides */
+.cio-asa-results-group [data-slot="carousel-content"] {
+  padding: 0 !important;
+}
+
+.cio-asa-results-group [data-slot="carousel-item"] {
+  min-width: 0 !important;
+  align-self: stretch;
+}
+
+.cio-asa-results-group [data-slot="carousel-track"] {
+  padding-left: 0 !important;
+}
+
+/* Add to Cart (per card) */
+.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  color: #14151A;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  width: 100%;
+  margin-top: auto;
+  padding-top: 4px;
+  transition: background-color 0.15s;
+}
+
+.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0311 8.66659C11.5311 8.66659 11.9711 8.39325 12.1977 7.97992L14.5844 3.65325C14.8311 3.21325 14.5111 2.66659 14.0044 2.66659H4.13772L3.51105 1.33325H1.33105V2.66659H2.66439L5.06439 7.72659L4.16439 9.35325C3.67772 10.2466 4.31772 11.3333 5.33105 11.3333H13.3311V9.99992H5.33105L6.06439 8.66659H11.0311ZM4.77105 3.99992H12.8711L11.0311 7.33325H6.35105L4.77105 3.99992ZM5.33105 11.9999C4.59772 11.9999 4.00439 12.5999 4.00439 13.3333C4.00439 14.0666 4.59772 14.6666 5.33105 14.6666C6.06439 14.6666 6.66439 14.0666 6.66439 13.3333C6.66439 12.5999 6.06439 11.9999 5.33105 11.9999ZM11.9977 11.9999C11.2644 11.9999 10.6711 12.5999 10.6711 13.3333C10.6711 14.0666 11.2644 14.6666 11.9977 14.6666C12.7311 14.6666 13.3311 14.0666 13.3311 13.3333C13.3311 12.5999 12.7311 11.9999 11.9977 11.9999Z' fill='%230F1324' fill-opacity='0.6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn:hover {
+  background: #e5e7eb;
+  color: #14151A;
+}
+
+/* View More */
+.cio-asa-results-group__view-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  font-size: 13px;
+  color: #1a1a1a;
+  text-decoration: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  width: fit-content;
+}
+
+.cio-asa-results-group__view-more-text {
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+  line-height: 1.2;
+}

package/lib/mjs/components/ResultsBlock/ResultsBlock.js

@@ -0,0 +1,76 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Carousel, RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
+import { normalizeItemToProduct } from '../../utils/productNormalizer';
+import { ArrowRightIcon } from '../icons';
+import { PEEK_FRACTION, aspectRatioMap } from './constants';
+import createProductCardRenderer from './renderProductCard';
+import './ResultsBlock.css';
+function PreviousButton() {
+    return null;
+}
+function NextButton() {
+    return null;
+}
+function ResultsBlock({ groups, aspectRatio = '3:4', minCardWidth = 150, gap = 12, showTitle = true, viewMoreText = 'View more products', addToCartText = 'Add to cart', saleBadgeText = 'Sale', currency, normalizeItem = normalizeItemToProduct, onProductClick, onAddToCart, onViewMore, componentOverrides, }) {
+    const containerRef = useRef(null);
+    const [slidesToShow, setSlidesToShow] = useState(3 + PEEK_FRACTION);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return undefined;
+        const compute = () => {
+            const width = el.clientWidth;
+            const count = Math.max(1, Math.floor(width / (minCardWidth + gap)));
+            setSlidesToShow(count + PEEK_FRACTION);
+        };
+        compute();
+        if (typeof ResizeObserver === 'undefined')
+            return undefined;
+        const ro = new ResizeObserver(compute);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [minCardWidth, gap]);
+    if (!groups || groups.length === 0)
+        return null;
+    const renderProductCard = createProductCardRenderer({
+        currency,
+        addToCartText,
+        onProductClick,
+        onAddToCart,
+        componentOverrides: componentOverrides?.carousel?.item?.productCard,
+    });
+    return (React.createElement("div", { ref: containerRef, className: 'cio-asa-results-block', style: { '--cio-asa-image-ratio': aspectRatioMap[aspectRatio] } }, groups.map((groupData, index) => {
+        const label = groupData.group?.display_name || groupData.group?.value || '';
+        const groupKey = `${groupData.group?.value || label}-${index}`;
+        const products = groupData.searchResults.map((item) => normalizeItem(item, { saleBadgeText }));
+        const titleRenderProps = { label };
+        const viewMoreRenderProps = {
+            group: groupData.group,
+            onClick: () => onViewMore?.(groupData.group),
+        };
+        const userCarousel = componentOverrides?.carousel;
+        const carouselOverrides = {
+            previous: { reactNode: PreviousButton },
+            next: { reactNode: NextButton },
+            ...userCarousel,
+            item: {
+                ...userCarousel?.item,
+                productCard: {
+                    reactNode: renderProductCard,
+                },
+            },
+        };
+        return (React.createElement("div", { className: 'cio-asa-results-group', key: groupKey },
+            showTitle && label && (React.createElement(RenderPropsWrapper, { override: componentOverrides?.groupTitle?.reactNode, props: titleRenderProps },
+                React.createElement("h3", { className: 'cio-asa-results-group__label' }, label))),
+            React.createElement(Carousel, { items: products, loop: false, responsive: {
+                    0: { gap, slidesToShow },
+                }, componentOverrides: carouselOverrides }),
+            onViewMore && (React.createElement(RenderPropsWrapper, { override: componentOverrides?.viewMore?.reactNode, props: viewMoreRenderProps },
+                React.createElement("button", { type: 'button', className: 'cio-asa-results-group__view-more', onClick: () => onViewMore(groupData.group) },
+                    React.createElement("span", { className: 'cio-asa-results-group__view-more-text' }, viewMoreText),
+                    React.createElement(ArrowRightIcon, null))))));
+    })));
+}
+ResultsBlock.displayName = 'ResultsBlock';
+export default ResultsBlock;

package/lib/mjs/components/ResultsBlock/constants.js

@@ -0,0 +1,8 @@
+export const PEEK_FRACTION = 0.3;
+export const aspectRatioMap = {
+    '1:1': '1 / 1',
+    '3:4': '3 / 4',
+    '9:16': '9 / 16',
+    '4:3': '4 / 3',
+    '16:9': '16 / 9',
+};

package/lib/mjs/components/ResultsBlock/renderProductCard.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ProductCard } from '@constructor-io/constructorio-ui-components';
+import { PLACEHOLDER_IMAGE } from '../../constants';
+export default function createProductCardRenderer({ currency, addToCartText, onProductClick, onAddToCart, componentOverrides, }) {
+    const handleAddToCart = onAddToCart
+        ? (_e, product) => onAddToCart(product)
+        : undefined;
+    return function renderProductCard(renderProps) {
+        const product = renderProps.product;
+        return (React.createElement(ProductCard, { product: product, className: 'cio-asa-product-card', onProductClick: onProductClick, onAddToCart: handleAddToCart, addToCartText: addToCartText, componentOverrides: componentOverrides },
+            React.createElement(ProductCard.ImageSection, { className: 'cio-asa-product-card__image-wrapper', imageUrl: product.imageUrl || PLACEHOLDER_IMAGE }, product.badge && React.createElement("span", { className: 'cio-asa-product-card__badge' }, product.badge)),
+            React.createElement(ProductCard.Content, { className: 'cio-asa-product-card__info' },
+                React.createElement(ProductCard.TitleSection, { className: 'cio-asa-product-card__name' }),
+                currency && (React.createElement(ProductCard.PriceSection, { className: 'cio-asa-product-card__price', priceCurrency: currency })),
+                onAddToCart && (React.createElement(ProductCard.AddToCartButton, { className: 'cio-asa-product-card__add-to-cart' })))));
+    };
+}

package/lib/mjs/components/icons/ArrowRightIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function ArrowRightIcon() {
+    return (React.createElement("svg", { width: '10', height: '10', viewBox: '0 0 10 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M8.25979 4.20698L4.63903 0.72032L5.33267 -1.97313e-07L9.84668 4.34682L9.84668 5.06714L5.33267 9.41396L4.63903 8.69364L8.25979 5.20698L-0.000141371 5.20698L-0.000141328 4.20698L8.25979 4.20698Z', fill: 'currentColor' })));
+}

package/lib/mjs/components/icons/ChatBubbleDarkIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function ChatBubbleDarkIcon() {
+    return (React.createElement("svg", { className: 'cio-asa-button__icon', width: '14', height: '14', viewBox: '0 0 14 14', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        React.createElement("path", { d: 'M12.667 3.16699C12.7573 3.16717 12.8328 3.24274 12.833 3.33301V12.126L10.874 10.167H3.33301C3.24263 10.1668 3.16699 10.0904 3.16699 10V9.16699H11.833V3.16699H12.667ZM0.666992 0.5H9.33301C9.42353 0.5 9.5 0.576467 9.5 0.666992V6.66699C9.49982 6.75737 9.42342 6.83301 9.33301 6.83301H2.45996L0.5 8.79297V0.666992C0.5 0.576468 0.576468 0.5 0.666992 0.5ZM0.833008 7.9873L2.32031 6.5H9.16699V0.833008H0.833008V7.9873Z', fill: 'white', stroke: 'white' })));
+}

package/lib/mjs/components/icons/ChatBubbleLightIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function ChatBubbleLightIcon() {
+    return (React.createElement("svg", { className: 'cio-asa-button__icon', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        React.createElement("path", { d: 'M14 4.50024C14.0903 4.50043 14.1658 4.57599 14.166 4.66626V13.4592L12.207 11.5002H4.66602C4.57563 11.5001 4.5 11.4237 4.5 11.3333V10.5002H13.166V4.50024H14ZM2 1.83325H10.666C10.7565 1.83325 10.833 1.90972 10.833 2.00024V8.00024C10.8328 8.09063 10.7564 8.16626 10.666 8.16626H3.79297L1.83301 10.1262V2.00024C1.83301 1.90972 1.90948 1.83325 2 1.83325ZM2.16602 9.32056L3.65332 7.83325H10.5V2.16626H2.16602V9.32056Z', fill: 'black', stroke: 'black' })));
+}

package/lib/mjs/components/icons/SendArrowIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function SendArrowIcon() {
+    return (React.createElement("svg", { width: '10', height: '11', viewBox: '0 0 10 11', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        React.createElement("path", { d: 'M0.5 5L5 0.5L9.5 5M5 1.125V10.25', stroke: '#0F1324', strokeOpacity: '0.7', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+}

package/lib/mjs/components/icons/SendPlaneIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function SendPlaneIcon() {
+    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        React.createElement("path", { d: 'M14.8934 7.09539L14.8884 7.0932L1.54219 1.55758C1.42993 1.51059 1.30778 1.49217 1.18666 1.50395C1.06554 1.51573 0.949225 1.55734 0.848125 1.62508C0.741311 1.69507 0.653573 1.79052 0.592805 1.90283C0.532037 2.01515 0.500145 2.14081 0.5 2.26852V5.80883C0.50006 5.98341 0.561019 6.15249 0.67237 6.28695C0.783722 6.4214 0.938491 6.5128 1.11 6.54539L8.38906 7.89133C8.41767 7.89675 8.44348 7.91199 8.46205 7.93441C8.48062 7.95683 8.49078 7.98503 8.49078 8.01414C8.49078 8.04325 8.48062 8.07145 8.46205 8.09387C8.44348 8.11629 8.41767 8.13153 8.38906 8.13695L1.11031 9.48289C0.938851 9.51539 0.784092 9.60667 0.67269 9.741C0.561288 9.87534 0.500219 10.0443 0.5 10.2188V13.7598C0.499917 13.8817 0.530111 14.0018 0.587871 14.1092C0.645632 14.2166 0.729152 14.3079 0.830938 14.3751C0.953375 14.4564 1.09706 14.4999 1.24406 14.5001C1.34626 14.5 1.4474 14.4795 1.54156 14.4398L14.8875 8.9357L14.8934 8.93289C15.0731 8.85569 15.2262 8.72751 15.3337 8.56421C15.4413 8.40092 15.4986 8.20968 15.4986 8.01414C15.4986 7.81861 15.4413 7.62736 15.3337 7.46407C15.2262 7.30077 15.0731 7.1726 14.8934 7.09539Z', fill: 'white' })));
+}

package/lib/mjs/components/icons/index.js

@@ -0,0 +1,5 @@
+export { default as ChatBubbleDarkIcon } from './ChatBubbleDarkIcon';
+export { default as ChatBubbleLightIcon } from './ChatBubbleLightIcon';
+export { default as SendArrowIcon } from './SendArrowIcon';
+export { default as SendPlaneIcon } from './SendPlaneIcon';
+export { default as ArrowRightIcon } from './ArrowRightIcon';

package/lib/mjs/constants.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export const DEMO_API_KEY = 'key_fygjntHGW7usvxC8';
+export const PLACEHOLDER_IMAGE = "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='200' height='200' rx='12' fill='%23F3F4F6'/%3E%3Crect x='0.5' y='0.5' width='199' height='199' rx='11.5' stroke='%23E5E7EB'/%3E%3C/svg%3E";

package/lib/mjs/hooks/asaStreamHandlers.js

@@ -0,0 +1,39 @@
+function updateMessageById(setMessages, id, patch) {
+    setMessages((prev) => prev.map((msg) => (msg.id === id ? patch(msg) : msg)));
+}
+export function handleSearchResult(data, pendingGroup, assistantId, setMessages) {
+    const resolvedGroup = pendingGroup ?? {
+        display_name: data?.response?.search_request?.display_name ?? data?.title ?? '',
+        value: data?.response?.search_request?.search_term ?? data?.title ?? '',
+    };
+    const results = data?.response?.results ?? (data?.results ? data.results : [data]);
+    const newGroup = { group: resolvedGroup, searchResults: results };
+    updateMessageById(setMessages, assistantId, (msg) => ({
+        ...msg,
+        status: 'streaming',
+        groups: [...(msg.groups || []), newGroup],
+    }));
+    return null;
+}
+export function handleMessage(data, assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => ({
+        ...msg,
+        status: 'streaming',
+        text: (msg.text || '') + (data?.text || ''),
+    }));
+}
+export function handleServerError(assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => ({
+        ...msg,
+        status: 'error',
+    }));
+}
+export function handleStreamEnd(assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => ({ ...msg, status: 'done' }));
+}
+export function handleStreamError(assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => ({
+        ...msg,
+        status: 'error',
+    }));
+}