@constructor-io/constructorio-ui-asa 1.0.0

package/lib/cjs/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLACEHOLDER_IMAGE = exports.DEMO_API_KEY = void 0;
+// eslint-disable-next-line import/prefer-default-export
+exports.DEMO_API_KEY = 'key_fygjntHGW7usvxC8';
+exports.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/cjs/hooks/asaStreamHandlers.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStreamError = exports.handleStreamEnd = exports.handleServerError = exports.handleMessage = exports.handleSearchResult = void 0;
+function updateMessageById(setMessages, id, patch) {
+    setMessages((prev) => prev.map((msg) => (msg.id === id ? patch(msg) : msg)));
+}
+function handleSearchResult(data, pendingGroup, assistantId, setMessages) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const resolvedGroup = pendingGroup !== null && pendingGroup !== void 0 ? pendingGroup : {
+        display_name: (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.response) === null || _a === void 0 ? void 0 : _a.search_request) === null || _b === void 0 ? void 0 : _b.display_name) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data.title) !== null && _d !== void 0 ? _d : '',
+        value: (_h = (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.response) === null || _e === void 0 ? void 0 : _e.search_request) === null || _f === void 0 ? void 0 : _f.search_term) !== null && _g !== void 0 ? _g : data === null || data === void 0 ? void 0 : data.title) !== null && _h !== void 0 ? _h : '',
+    };
+    const results = (_k = (_j = data === null || data === void 0 ? void 0 : data.response) === null || _j === void 0 ? void 0 : _j.results) !== null && _k !== void 0 ? _k : ((data === null || data === void 0 ? void 0 : data.results) ? data.results : [data]);
+    const newGroup = { group: resolvedGroup, searchResults: results };
+    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', groups: [...(msg.groups || []), newGroup] })));
+    return null;
+}
+exports.handleSearchResult = handleSearchResult;
+function handleMessage(data, assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', text: (msg.text || '') + ((data === null || data === void 0 ? void 0 : data.text) || '') })));
+}
+exports.handleMessage = handleMessage;
+function handleServerError(assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'error' })));
+}
+exports.handleServerError = handleServerError;
+function handleStreamEnd(assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'done' })));
+}
+exports.handleStreamEnd = handleStreamEnd;
+function handleStreamError(assistantId, setMessages) {
+    updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'error' })));
+}
+exports.handleStreamError = handleStreamError;

package/lib/cjs/hooks/useAsaResults.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const useCioAsaContext_1 = require("./useCioAsaContext");
+const asaStreamHandlers_1 = require("./asaStreamHandlers");
+function useAsaResults() {
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [isStreaming, setIsStreaming] = (0, react_1.useState)(false);
+    const isStreamingRef = (0, react_1.useRef)(false);
+    const killSwitchRef = (0, react_1.useRef)(false);
+    const readerRef = (0, react_1.useRef)(null);
+    const threadIdRef = (0, react_1.useRef)(null);
+    const idCounterRef = (0, react_1.useRef)(0);
+    const contextValue = (0, useCioAsaContext_1.useCioAsaContext)();
+    if (!contextValue) {
+        throw new Error('useAsaResults must be used within a CioAsaProvider.');
+    }
+    const { cioClient, staticRequestConfigs } = contextValue;
+    const { domain } = staticRequestConfigs || {};
+    if (!cioClient || !domain) {
+        throw new Error('useAsaResults requires a configured cioClient and domain. Check your CioAsaProvider props.');
+    }
+    const nextMessageId = (0, react_1.useCallback)(() => {
+        idCounterRef.current += 1;
+        return `msg-${idCounterRef.current}-${Date.now()}`;
+    }, []);
+    const sendMessage = (0, react_1.useCallback)((text) => {
+        if (!text.trim() || isStreamingRef.current)
+            return;
+        const userMessage = {
+            id: nextMessageId(),
+            role: 'user',
+            text: text.trim(),
+            status: 'done',
+        };
+        const assistantMessage = {
+            id: nextMessageId(),
+            role: 'assistant',
+            text: '',
+            groups: [],
+            status: 'loading',
+        };
+        setMessages((prev) => [...prev, userMessage, assistantMessage]);
+        setIsStreaming(true);
+        isStreamingRef.current = true;
+        killSwitchRef.current = false;
+        const stream = cioClient.agent.getAgentResultsStream(text.trim(), Object.assign({ domain }, (threadIdRef.current && { threadId: threadIdRef.current })));
+        const reader = stream.getReader();
+        readerRef.current = reader;
+        (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            let pendingGroup = null;
+            try {
+                // eslint-disable-next-line no-await-in-loop
+                while (!killSwitchRef.current) {
+                    // eslint-disable-next-line no-await-in-loop
+                    const res = yield reader.read();
+                    if (killSwitchRef.current)
+                        break;
+                    if (res.done) {
+                        (0, asaStreamHandlers_1.handleStreamEnd)(assistantMessage.id, setMessages);
+                        break;
+                    }
+                    const { type, data } = res.value;
+                    if (type === 'start' && (data === null || data === void 0 ? void 0 : data.thread_id)) {
+                        threadIdRef.current = data.thread_id;
+                    }
+                    else if (type === 'group') {
+                        pendingGroup = {
+                            display_name: (_b = (_a = data === null || data === void 0 ? void 0 : data.display_name) !== null && _a !== void 0 ? _a : data === null || data === void 0 ? void 0 : data.group) !== null && _b !== void 0 ? _b : '',
+                            value: (_d = (_c = data === null || data === void 0 ? void 0 : data.value) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data.group) !== null && _d !== void 0 ? _d : '',
+                        };
+                    }
+                    else if (type === 'search_result') {
+                        pendingGroup = (0, asaStreamHandlers_1.handleSearchResult)(data, pendingGroup, assistantMessage.id, setMessages);
+                    }
+                    else if (type === 'message') {
+                        (0, asaStreamHandlers_1.handleMessage)(data, assistantMessage.id, setMessages);
+                    }
+                    else if (type === 'server_error') {
+                        (0, asaStreamHandlers_1.handleServerError)(assistantMessage.id, setMessages);
+                        break;
+                    }
+                }
+            }
+            catch (_e) {
+                (0, asaStreamHandlers_1.handleStreamError)(assistantMessage.id, setMessages);
+            }
+            finally {
+                if (readerRef.current === reader) {
+                    reader.cancel();
+                    readerRef.current = null;
+                    setIsStreaming(false);
+                    isStreamingRef.current = false;
+                }
+            }
+        }))();
+    }, [cioClient, domain, nextMessageId]);
+    (0, react_1.useEffect)(() => () => {
+        killSwitchRef.current = true;
+        if (readerRef.current) {
+            readerRef.current.cancel();
+            readerRef.current = null;
+        }
+    }, []);
+    const clearHistory = (0, react_1.useCallback)(() => {
+        killSwitchRef.current = true;
+        if (readerRef.current) {
+            readerRef.current.cancel();
+            readerRef.current = null;
+        }
+        threadIdRef.current = null;
+        setMessages([]);
+        setIsStreaming(false);
+        isStreamingRef.current = false;
+    }, []);
+    return { messages, sendMessage, isStreaming, clearHistory };
+}
+exports.default = useAsaResults;

package/lib/cjs/hooks/useCioAsaContext.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCioAsaContext = exports.AsaContext = void 0;
+const react_1 = require("react");
+exports.AsaContext = (0, react_1.createContext)(null);
+exports.AsaContext.displayName = 'AsaContext';
+/**
+ * React Hook to access state provided by CioAsa provider.
+ * Note: Should only be used by components nested under a CioAsa provider
+ */
+function useCioAsaContext() {
+    return (0, react_1.useContext)(exports.AsaContext);
+}
+exports.useCioAsaContext = useCioAsaContext;
+exports.default = useCioAsaContext;

package/lib/cjs/hooks/useCioClient.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+const react_1 = require("react");
+const version_1 = tslib_1.__importDefault(require("../version"));
+const useCioClient = ({ apiKey, cioClient, cioClientOptions } = {}) => {
+    if (!apiKey && !cioClient) {
+        throw new Error('Api Key or Constructor Client required');
+    }
+    const memoizedCioClient = (0, react_1.useMemo)(() => {
+        if (cioClient)
+            return cioClient;
+        if (apiKey && typeof window !== 'undefined') {
+            return new constructorio_client_javascript_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-asa-${version_1.default}` }, cioClientOptions));
+        }
+        return null;
+    }, [apiKey, cioClient, cioClientOptions]);
+    return memoizedCioClient;
+};
+exports.default = useCioClient;

package/lib/cjs/hooks/useFocusTrap.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Traps Tab/Shift+Tab focus within the referenced container and invokes
+ * onEscape when Escape is pressed.
+ */
+function useFocusTrap(containerRef, { onEscape } = {}) {
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container)
+            return undefined;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && onEscape) {
+                onEscape();
+            }
+            if (e.key === 'Tab') {
+                const focusableElements = container.querySelectorAll(FOCUSABLE_SELECTOR);
+                if (focusableElements.length === 0)
+                    return;
+                const first = focusableElements[0];
+                const last = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+                else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        };
+        container.addEventListener('keydown', handleKeyDown);
+        return () => container.removeEventListener('keydown', handleKeyDown);
+    }, [containerRef, onEscape]);
+}
+exports.default = useFocusTrap;

package/lib/cjs/hooks/useMessageInput.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useMessageInput({ onSend, isDisabled = false, submitOnEnterOnly = false, }) {
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleSubmit = () => {
+        if (isDisabled || !value.trim())
+            return;
+        onSend(value.trim());
+        setValue('');
+    };
+    const handleKeyDown = (e) => {
+        if (e.key !== 'Enter')
+            return;
+        if (submitOnEnterOnly && e.shiftKey)
+            return;
+        e.preventDefault();
+        handleSubmit();
+    };
+    return { value, setValue, handleSubmit, handleKeyDown };
+}
+exports.default = useMessageInput;

package/lib/cjs/hooks/useRequestConfigs.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const useCioAsaContext_1 = require("./useCioAsaContext");
+function useRequestConfigs() {
+    const context = (0, useCioAsaContext_1.useCioAsaContext)();
+    if (!context) {
+        throw new Error('This Hook needs to be called within the C.io ASA Context Provider.');
+    }
+    const { urlHelpers, staticRequestConfigs } = context;
+    const { getUrl, setUrl, getStateFromUrl, getUrlFromState } = urlHelpers;
+    const url = getUrl();
+    const urlRequestConfigs = url ? getStateFromUrl(url) : {};
+    const requestConfigs = Object.assign(Object.assign({}, staticRequestConfigs), urlRequestConfigs);
+    const setRequestConfigs = (configsToUpdate) => {
+        const oldUrl = getUrl();
+        if (!oldUrl) {
+            throw new Error('getUrl returns undefined when attempting to call setRequestConfigs');
+        }
+        const urlObj = new URL(oldUrl);
+        const oldRequestConfigs = getStateFromUrl(oldUrl);
+        const newRequestConfigs = Object.assign(Object.assign({}, oldRequestConfigs), configsToUpdate);
+        const newUrl = getUrlFromState(newRequestConfigs, urlObj);
+        setUrl(newUrl);
+    };
+    return { requestConfigs, setRequestConfigs };
+}
+exports.default = useRequestConfigs;

package/lib/cjs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConstructorIOClient = exports.normalizeItemToProduct = exports.useAsaResults = exports.Button = exports.ResultsBlock = exports.Chat = exports.CioAsaProvider = void 0;
+// Components
+var CioAsaProvider_1 = require("./components/CioAsaProvider/CioAsaProvider");
+Object.defineProperty(exports, "CioAsaProvider", { enumerable: true, get: function () { return __importDefault(CioAsaProvider_1).default; } });
+var Chat_1 = require("./components/Chat/Chat");
+Object.defineProperty(exports, "Chat", { enumerable: true, get: function () { return __importDefault(Chat_1).default; } });
+var ResultsBlock_1 = require("./components/ResultsBlock/ResultsBlock");
+Object.defineProperty(exports, "ResultsBlock", { enumerable: true, get: function () { return __importDefault(ResultsBlock_1).default; } });
+var Button_1 = require("./components/Button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+// Hooks
+var useAsaResults_1 = require("./hooks/useAsaResults");
+Object.defineProperty(exports, "useAsaResults", { enumerable: true, get: function () { return __importDefault(useAsaResults_1).default; } });
+// Utils
+var productNormalizer_1 = require("./utils/productNormalizer");
+Object.defineProperty(exports, "normalizeItemToProduct", { enumerable: true, get: function () { return productNormalizer_1.normalizeItemToProduct; } });
+// Re-exported client value from the JS client (used to construct/type a cioClient)
+var types_1 = require("./types");
+Object.defineProperty(exports, "ConstructorIOClient", { enumerable: true, get: function () { return types_1.ConstructorIOClient; } });

package/lib/cjs/styles.css

@@ -0,0 +1,34 @@
+@import '@constructor-io/constructorio-ui-components/styles.css';
+@import './components/Button/Button.css';
+@import './components/Chat/Chat.css';
+@import './components/Chat/ChatHeader.css';
+@import './components/Chat/WelcomeScreen.css';
+@import './components/Chat/ChatMessageList.css';
+@import './components/Chat/UserMessage.css';
+@import './components/Chat/AiMessage.css';
+@import './components/Chat/TypingIndicator.css';
+@import './components/Chat/ChatInput.css';
+@import './components/ResultsBlock/ResultsBlock.css';
+
+.cio-asa,
+.cio-asa * {
+  font-family: var(--cio-asa-font-family, 'Inter', sans-serif);
+}
+
+.cio-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.cio-asa button:focus-visible,
+.cio-asa [role='button']:focus-visible {
+  outline: 2px solid #A980FF;
+  outline-offset: 2px;
+}

package/lib/cjs/types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConstructorIOClient = void 0;
+const tslib_1 = require("tslib");
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+exports.ConstructorIOClient = constructorio_client_javascript_1.default;

package/lib/cjs/utils/formatters.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatPrice = void 0;
+// eslint-disable-next-line import/prefer-default-export
+function formatPrice(price) {
+    if (price) {
+        return `$${price.toFixed(2)}`;
+    }
+    return '';
+}
+exports.formatPrice = formatPrice;

package/lib/cjs/utils/productNormalizer.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeItemToProduct = void 0;
+function normalizeItemToProduct(item, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const data = item.data || {};
+    return {
+        id: String((_c = (_b = (_a = data.id) !== null && _a !== void 0 ? _a : data.result_id) !== null && _b !== void 0 ? _b : item.value) !== null && _c !== void 0 ? _c : ''),
+        name: String((_e = (_d = item.value) !== null && _d !== void 0 ? _d : data.item_name) !== null && _e !== void 0 ? _e : ''),
+        url: data.url,
+        imageUrl: (_f = data.image_url) !== null && _f !== void 0 ? _f : data.imageUrl,
+        price: data.price,
+        salePrice: (_g = data.sale_price) !== null && _g !== void 0 ? _g : data.salePrice,
+        description: data.description,
+        badge: data.sale_price != null || data.salePrice != null
+            ? (_h = options === null || options === void 0 ? void 0 : options.saleBadgeText) !== null && _h !== void 0 ? _h : 'Sale'
+            : undefined,
+    };
+}
+exports.normalizeItemToProduct = normalizeItemToProduct;

package/lib/cjs/utils/translate.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultTranslations = {
+    'CioAsa.header.title': 'Shopping Assistant',
+    'CioAsa.header.close': 'Close',
+    'CioAsa.input.placeholder': 'Ask a question about this product',
+    'CioAsa.input.ariaLabel': 'Type your message',
+    'CioAsa.input.sendAriaLabel': 'Send message',
+    'CioAsa.welcome.title': 'Shopping Assistant',
+    'CioAsa.welcome.placeholder': 'Ask anything',
+    'CioAsa.welcome.sendButton': 'Chat',
+    'CioAsa.welcome.inputAriaLabel': 'Type your question',
+    'CioAsa.welcome.sendAriaLabel': 'Send message',
+    'CioAsa.welcome.suggestionsAriaLabel': 'Suggested questions',
+    'CioAsa.messageList.ariaLabel': 'Chat messages',
+    'CioAsa.typingIndicator.ariaLabel': 'Assistant is typing',
+    'CioAsa.userMessage.ariaLabel': 'You said',
+    'CioAsa.results.viewMore': 'View more products',
+    'CioAsa.results.addToCart': 'Add to cart',
+    'CioAsa.results.saleBadge': 'Sale',
+    'CioAsa.error.message': "I can't assist you with that request.",
+};
+function translate(key, translations) {
+    var _a;
+    if ((translations === null || translations === void 0 ? void 0 : translations[key]) !== undefined) {
+        return translations[key];
+    }
+    return (_a = defaultTranslations[key]) !== null && _a !== void 0 ? _a : key;
+}
+exports.default = translate;

package/lib/cjs/utils/typeHelpers.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/utils/urlHelpers.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUrlFromState = exports.getStateFromUrl = exports.getFilterParamsFromState = exports.extractFiltersFromUrl = exports.setUrl = exports.getUrl = exports.defaultQueryStringMap = void 0;
+const tslib_1 = require("tslib");
+exports.defaultQueryStringMap = Object.freeze({
+    intent: 'q',
+    page: 'page',
+    numResultsPerPage: 'resultsPerPod',
+    domain: 'domain',
+    filters: 'filters', // do special encoding/decoding
+});
+function getUrl() {
+    if (typeof window === 'undefined')
+        return undefined;
+    return window.location.href;
+}
+exports.getUrl = getUrl;
+function setUrl(newUrlWithEncodedState) {
+    if (typeof window === 'undefined')
+        return;
+    window.location.href = newUrlWithEncodedState;
+}
+exports.setUrl = setUrl;
+function extractFiltersFromUrl(urlParams) {
+    const filters = {};
+    const filterRegex = new RegExp(`^${exports.defaultQueryStringMap.filters}\\[(.*)\\]`);
+    urlParams === null || urlParams === void 0 ? void 0 : urlParams.forEach((value, key) => {
+        var _a;
+        const filterKey = (_a = key === null || key === void 0 ? void 0 : key.match(filterRegex)) === null || _a === void 0 ? void 0 : _a[1];
+        if (filterKey) {
+            if (filters[filterKey]) {
+                filters[filterKey].push(value);
+            }
+            else {
+                filters[filterKey] = [value];
+            }
+        }
+    });
+    return Object.keys(filters).length ? filters : undefined;
+}
+exports.extractFiltersFromUrl = extractFiltersFromUrl;
+function getFilterParamsFromState(urlParams, filters) {
+    var _a;
+    if (filters) {
+        (_a = Object.entries(filters)) === null || _a === void 0 ? void 0 : _a.forEach(([filterName, filterValues]) => {
+            if (Array.isArray(filterValues)) {
+                filterValues.forEach((filterValue) => {
+                    urlParams.append(`filters[${filterName}]`, String(filterValue));
+                });
+            }
+            else {
+                urlParams.append(`filters[${filterName}]`, String(filterValues));
+            }
+        });
+    }
+}
+exports.getFilterParamsFromState = getFilterParamsFromState;
+function getStateFromUrl(url) {
+    const urlObject = new URL(url);
+    const urlParams = urlObject.searchParams;
+    const rawState = {};
+    Object.entries(exports.defaultQueryStringMap).forEach(([key, val]) => {
+        const storedVal = urlParams.get(val);
+        if (storedVal != null) {
+            rawState[key] = storedVal;
+        }
+    });
+    const filters = extractFiltersFromUrl(urlParams);
+    const { page, numResultsPerPage } = rawState, rest = tslib_1.__rest(rawState, ["page", "numResultsPerPage"]);
+    const state = Object.assign({}, rest);
+    if (numResultsPerPage)
+        state.numResultsPerPage = Number(numResultsPerPage);
+    if (filters)
+        state.filters = filters;
+    return state;
+}
+exports.getStateFromUrl = getStateFromUrl;
+function getUrlFromState(state, options = {}) {
+    const { baseUrl: url, origin, pathname } = options;
+    const baseUrl = url || `${origin}${pathname}`;
+    const params = new URLSearchParams();
+    Object.entries(state).forEach(([key, val]) => {
+        if (exports.defaultQueryStringMap[key] === undefined) {
+            return;
+        }
+        let encodedVal = '';
+        if (key === 'filters' && state.filters) {
+            getFilterParamsFromState(params, state.filters);
+        }
+        else if (typeof val !== 'string') {
+            encodedVal = JSON.stringify(val);
+        }
+        else {
+            encodedVal = val;
+        }
+        if (encodedVal) {
+            params.set(exports.defaultQueryStringMap[key], encodedVal);
+        }
+    });
+    return `${baseUrl}?${params.toString()}`;
+}
+exports.getUrlFromState = getUrlFromState;

package/lib/cjs/version.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = '1.0.0';

package/lib/mjs/components/Button/Button.css

@@ -0,0 +1,61 @@
+.cio-asa-button.cio-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  box-shadow:
+    0px 6px 14px rgba(18, 18, 105, 0.11),
+    0px 2px 4px rgba(18, 18, 105, 0.0717),
+    0px 1px 2px rgba(18, 18, 105, 0.055);
+  transition: opacity 0.2s;
+}
+
+.cio-asa-button.cio-button:hover {
+  opacity: 0.9;
+}
+
+.cio-asa-button.cio-button:active {
+  opacity: 0.8;
+}
+
+/* Dark theme */
+.cio-asa-button--dark.cio-button {
+  background: #14151A;
+  color: #ffffff;
+}
+
+/* Light theme */
+.cio-asa-button--light.cio-button {
+  background: #ffffff;
+  color: #14151A;
+}
+
+/* Sizes */
+.cio-asa-button--sm.cio-button {
+  height: 32px;
+  padding: 8px 12px 8px 8px;
+}
+
+.cio-asa-button--lg.cio-button {
+  height: 40px;
+  padding: 10px 16px 10px 12px;
+}
+
+.cio-asa-button__icon {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+
+.cio-asa-button__label {
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  white-space: nowrap;
+}

package/lib/mjs/components/Button/Button.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button as CioButton } from '@constructor-io/constructorio-ui-components';
+import { ChatBubbleDarkIcon, ChatBubbleLightIcon } from '../icons';
+export default function Button({ theme = 'dark', size = 'sm', onClick, label = 'Shopping assistant', }) {
+    return (React.createElement(CioButton, { className: `cio-asa-button cio-asa-button--${theme} cio-asa-button--${size}`, size: size === 'lg' ? 'default' : 'sm', onClick: onClick },
+        theme === 'dark' ? React.createElement(ChatBubbleDarkIcon, null) : React.createElement(ChatBubbleLightIcon, null),
+        React.createElement("span", { className: 'cio-asa-button__label' }, label)));
+}

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

@@ -0,0 +1,35 @@
+.cio-asa-ai-message {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding-right: 12px;
+}
+
+.cio-asa-ai-message__bubble {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  gap: 8px;
+  background: #ECEEF3;
+  border-radius: 6px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cio-asa-ai-message__bubble--error {
+  background: #FDECEC;
+}
+
+.cio-asa-ai-message__text {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.005em;
+  color: #0F1324;
+}
+
+.cio-asa-ai-message__bubble--error .cio-asa-ai-message__text {
+  color: #B42318;
+}