@constructor-io/constructorio-ui-asa 1.0.0 → 1.1.1

package/lib/cjs/components/Chat/Chat.js

@@ -20,7 +20,16 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
     (0, react_1.useEffect)(() => {
         const root = isWelcome ? containerRef.current : chatViewRef.current;
         const input = root === null || root === void 0 ? void 0 : root.querySelector('input');
-        input === null || input === void 0 ? void 0 : input.focus();
+        if (input) {
+            // preventScroll: focusing must not scroll the page — the host may render Chat
+            // below the fold (or, as in Storybook docs, several instances on one page).
+            try {
+                input.focus({ preventScroll: true });
+            }
+            catch (_a) {
+                input.focus();
+            }
+        }
     }, [isWelcome]);
     (0, useFocusTrap_1.default)(containerRef, { onEscape: onClose });
     return (react_1.default.createElement("div", { className: ['cio-asa', 'cio-asa-chat', className].filter(Boolean).join(' '), ref: containerRef, role: 'dialog', "aria-labelledby": 'cio-asa-chat-title' },

package/lib/cjs/components/Chat/ChatMessageList.js

@@ -39,7 +39,7 @@ function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, as
         const hasGroups = !!((_a = message.groups) === null || _a === void 0 ? void 0 : _a.length);
         return (react_1.default.createElement("div", { key: message.id, className: 'cio-asa-ai-message-group' },
             react_1.default.createElement(AiMessage_1.default, { message: message, componentOverrides: aiMessageOverrides, translations: translations }),
-            hasGroups && (react_1.default.createElement(ResultsBlock_1.default, { groups: message.groups, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: (0, translate_1.default)('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))));
+            hasGroups && (react_1.default.createElement(ResultsBlock_1.default, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: (0, translate_1.default)('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))));
     })));
 }
 exports.default = ChatMessageList;

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

@@ -20,9 +20,10 @@ function WelcomeScreen({ suggestions = DEFAULT_SUGGESTIONS, onSend, onClose, ter
         placeholder: (0, translate_1.default)('CioAsa.welcome.placeholder', translations),
         isDisabled: disabled,
     };
+    const handleSuggestionClick = (suggestion) => onSend(suggestion, 'suggestion');
     const suggestionsRenderProps = {
         suggestions,
-        onSuggestionClick: onSend,
+        onSuggestionClick: handleSuggestionClick,
     };
     return (react_1.default.createElement("div", { className: 'cio-asa-welcome-screen' },
         onClose && (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-welcome-screen__close', onClick: onClose, "aria-label": (0, translate_1.default)('CioAsa.header.close', translations) }, "\u2715")),
@@ -36,7 +37,7 @@ function WelcomeScreen({ suggestions = DEFAULT_SUGGESTIONS, onSend, onClose, ter
                         (0, translate_1.default)('CioAsa.welcome.sendButton', translations),
                         react_1.default.createElement(icons_1.SendPlaneIcon, null)))),
             suggestions.length > 0 && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions) === null || _c === void 0 ? void 0 : _c.reactNode, props: suggestionsRenderProps },
-                react_1.default.createElement("nav", { className: 'cio-asa-welcome-screen__suggestions', "aria-label": (0, translate_1.default)('CioAsa.welcome.suggestionsAriaLabel', translations) }, suggestions.map((suggestion) => (react_1.default.createElement("button", { key: suggestion, type: 'button', className: 'cio-asa-welcome-screen__suggestion-chip', disabled: disabled, onClick: () => onSend(suggestion) }, suggestion))))))),
+                react_1.default.createElement("nav", { className: 'cio-asa-welcome-screen__suggestions', "aria-label": (0, translate_1.default)('CioAsa.welcome.suggestionsAriaLabel', translations) }, suggestions.map((suggestion) => (react_1.default.createElement("button", { key: suggestion, type: 'button', className: 'cio-asa-welcome-screen__suggestion-chip', disabled: disabled, onClick: () => handleSuggestionClick(suggestion) }, suggestion))))))),
         termsText && react_1.default.createElement("div", { className: 'cio-asa-welcome-screen__terms' }, termsText)));
 }
 exports.default = WelcomeScreen;

package/lib/cjs/components/CioAsaProvider/CioAsaProvider.js

@@ -7,7 +7,7 @@ const useCioAsaContext_1 = require("../../hooks/useCioAsaContext");
 const defaultFormatters = tslib_1.__importStar(require("../../utils/formatters"));
 const defaultUrlHelpers = tslib_1.__importStar(require("../../utils/urlHelpers"));
 function CioAsaProvider(props) {
-    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, children, } = props;
+    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, callbacks, section = 'Products', children, } = props;
     const [cioClientOptions, setCioClientOptions] = (0, react_1.useState)({});
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioClient: customCioClient, cioClientOptions });
     const contextValue = (0, react_1.useMemo)(() => ({
@@ -17,7 +17,9 @@ function CioAsaProvider(props) {
         staticRequestConfigs,
         formatters: Object.assign(Object.assign({}, defaultFormatters), formatters),
         urlHelpers: Object.assign(Object.assign({}, defaultUrlHelpers), urlHelpers),
-    }), [cioClient, cioClientOptions, formatters, urlHelpers, staticRequestConfigs]);
+        callbacks,
+        section,
+    }), [cioClient, cioClientOptions, formatters, urlHelpers, staticRequestConfigs, callbacks, section]);
     return (react_1.default.createElement(useCioAsaContext_1.AsaContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));
 }
 exports.default = CioAsaProvider;

package/lib/cjs/components/ResultsBlock/ResultsBlock.js

@@ -2,22 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
 const productNormalizer_1 = require("../../utils/productNormalizer");
-const icons_1 = require("../icons");
+const useCioAsaContext_1 = require("../../hooks/useCioAsaContext");
+const useAsaTracking_1 = tslib_1.__importDefault(require("../../hooks/useAsaTracking"));
 const constants_1 = require("./constants");
-const renderProductCard_1 = tslib_1.__importDefault(require("./renderProductCard"));
+const ResultsGroup_1 = tslib_1.__importDefault(require("./ResultsGroup"));
 require("./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 = productNormalizer_1.normalizeItemToProduct, onProductClick, onAddToCart, onViewMore, componentOverrides, }) {
+function ResultsBlock({ groups, aspectRatio = '3:4', minCardWidth = 150, gap = 12, showTitle = true, viewMoreText = 'View more products', addToCartText = 'Add to cart', saleBadgeText = 'Sale', currency, intent, intentResultId, threadId, normalizeItem = productNormalizer_1.normalizeItemToProduct, onProductClick, onAddToCart, onViewMore, componentOverrides, }) {
     var _a, _b;
     const containerRef = (0, react_1.useRef)(null);
     const [slidesToShow, setSlidesToShow] = (0, react_1.useState)(3 + constants_1.PEEK_FRACTION);
+    const context = (0, useCioAsaContext_1.useCioAsaContext)();
+    const tracking = (0, useAsaTracking_1.default)({
+        tracker: (_b = (_a = context === null || context === void 0 ? void 0 : context.cioClient) === null || _a === void 0 ? void 0 : _a.tracker) !== null && _b !== void 0 ? _b : undefined,
+        section: context === null || context === void 0 ? void 0 : context.section,
+        threadId,
+    });
+    const callbacks = context === null || context === void 0 ? void 0 : context.callbacks;
     (0, react_1.useEffect)(() => {
         const el = containerRef.current;
         if (!el)
@@ -36,37 +37,11 @@ function ResultsBlock({ groups, aspectRatio = '3:4', minCardWidth = 150, gap = 1
     }, [minCardWidth, gap]);
     if (!groups || groups.length === 0)
         return null;
-    const renderProductCard = (0, renderProductCard_1.default)({
-        currency,
-        addToCartText,
-        onProductClick,
-        onAddToCart,
-        componentOverrides: (_b = (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.productCard,
-    });
     return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-asa-results-block', style: { '--cio-asa-image-ratio': constants_1.aspectRatioMap[aspectRatio] } }, groups.map((groupData, index) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         const label = ((_a = groupData.group) === null || _a === void 0 ? void 0 : _a.display_name) || ((_b = groupData.group) === null || _b === void 0 ? void 0 : _b.value) || '';
         const groupKey = `${((_c = groupData.group) === null || _c === void 0 ? void 0 : _c.value) || label}-${index}`;
-        const products = groupData.searchResults.map((item) => normalizeItem(item, { saleBadgeText }));
-        const titleRenderProps = { label };
-        const viewMoreRenderProps = {
-            group: groupData.group,
-            onClick: () => onViewMore === null || onViewMore === void 0 ? void 0 : onViewMore(groupData.group),
-        };
-        const userCarousel = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel;
-        const carouselOverrides = Object.assign(Object.assign({ previous: { reactNode: PreviousButton }, next: { reactNode: NextButton } }, userCarousel), { item: Object.assign(Object.assign({}, userCarousel === null || userCarousel === void 0 ? void 0 : userCarousel.item), { productCard: {
-                    reactNode: renderProductCard,
-                } }) });
-        return (react_1.default.createElement("div", { className: 'cio-asa-results-group', key: groupKey },
-            showTitle && label && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_d = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.groupTitle) === null || _d === void 0 ? void 0 : _d.reactNode, props: titleRenderProps },
-                react_1.default.createElement("h3", { className: 'cio-asa-results-group__label' }, label))),
-            react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: products, loop: false, responsive: {
-                    0: { gap, slidesToShow },
-                }, componentOverrides: carouselOverrides }),
-            onViewMore && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_e = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.viewMore) === null || _e === void 0 ? void 0 : _e.reactNode, props: viewMoreRenderProps },
-                react_1.default.createElement("button", { type: 'button', className: 'cio-asa-results-group__view-more', onClick: () => onViewMore(groupData.group) },
-                    react_1.default.createElement("span", { className: 'cio-asa-results-group__view-more-text' }, viewMoreText),
-                    react_1.default.createElement(icons_1.ArrowRightIcon, null))))));
+        return (react_1.default.createElement(ResultsGroup_1.default, { key: groupKey, groupData: groupData, label: label, slidesToShow: slidesToShow, gap: gap, showTitle: showTitle, viewMoreText: viewMoreText, addToCartText: addToCartText, saleBadgeText: saleBadgeText, currency: currency, intent: intent, intentResultId: intentResultId, normalizeItem: normalizeItem, onProductClick: onProductClick, onAddToCart: onAddToCart, onViewMore: onViewMore, componentOverrides: componentOverrides, tracking: tracking, callbacks: callbacks }));
     })));
 }
 ResultsBlock.displayName = 'ResultsBlock';

package/lib/cjs/components/ResultsBlock/ResultsGroup.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const useViewportTracking_1 = tslib_1.__importDefault(require("../../hooks/useViewportTracking"));
+const icons_1 = require("../icons");
+const renderProductCard_1 = tslib_1.__importDefault(require("./renderProductCard"));
+function PreviousButton() {
+    return null;
+}
+function NextButton() {
+    return null;
+}
+/**
+ * Renders a single search_result pod (one carousel) and fires its pod-level behavioral
+ * events: `assistant_search_result_view` (on scroll into view), `assistant_search_result_click`
+ * (product click), and `assistant_search_submit` ("view more"). Each SDK beacon is paired
+ * with its optional consumer callback. Events only fire when both `intent` and the pod's
+ * `searchResultId` are known.
+ */
+function ResultsGroup({ groupData, label, slidesToShow, gap, showTitle, viewMoreText, addToCartText, saleBadgeText, currency, intent, intentResultId, normalizeItem, onProductClick, onAddToCart, onViewMore, componentOverrides, tracking, callbacks, }) {
+    var _a, _b, _c, _d;
+    const { searchResultId } = groupData;
+    const products = groupData.searchResults.map((item) => normalizeItem(item, { saleBadgeText }));
+    const canTrack = !!intent && !!searchResultId;
+    const { ref: viewRef } = (0, useViewportTracking_1.default)({
+        enabled: canTrack,
+        onView: () => {
+            var _a;
+            if (!intent || !searchResultId)
+                return;
+            const items = products.map((p) => (Object.assign({ itemId: p.id, itemName: p.name }, (p.variationId && { variationId: p.variationId }))));
+            const payload = {
+                intent,
+                searchResultId,
+                intentResultId,
+                numResultsViewed: products.length,
+                items,
+            };
+            tracking.trackResultView(payload);
+            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onResultView) === null || _a === void 0 ? void 0 : _a.call(callbacks, payload);
+        },
+    });
+    const handleProductClick = (product) => {
+        var _a;
+        if (intent && searchResultId) {
+            tracking.trackResultClick({
+                intent,
+                searchResultId,
+                intentResultId,
+                itemId: product.id,
+                itemName: product.name,
+                variationId: product.variationId,
+            });
+            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onResultClick) === null || _a === void 0 ? void 0 : _a.call(callbacks, {
+                intent,
+                searchResultId,
+                intentResultId,
+                item: Object.assign({ itemId: product.id, itemName: product.name }, (product.variationId && { variationId: product.variationId })),
+            });
+        }
+        onProductClick === null || onProductClick === void 0 ? void 0 : onProductClick(product);
+    };
+    const handleViewMore = () => {
+        var _a, _b, _c;
+        if (intent && searchResultId) {
+            const searchTerm = ((_a = groupData.group) === null || _a === void 0 ? void 0 : _a.value) || ((_b = groupData.group) === null || _b === void 0 ? void 0 : _b.display_name) || '';
+            const payload = {
+                intent,
+                searchTerm,
+                userInput: searchTerm,
+                searchResultId,
+                intentResultId,
+            };
+            tracking.trackSearchSubmit(payload);
+            (_c = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSearchSubmit) === null || _c === void 0 ? void 0 : _c.call(callbacks, payload);
+        }
+        onViewMore === null || onViewMore === void 0 ? void 0 : onViewMore(groupData.group);
+    };
+    const renderProductCard = (0, renderProductCard_1.default)({
+        currency,
+        addToCartText,
+        onProductClick: handleProductClick,
+        onAddToCart,
+        componentOverrides: (_b = (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.productCard,
+    });
+    const titleRenderProps = { label };
+    const viewMoreRenderProps = {
+        group: groupData.group,
+        onClick: handleViewMore,
+    };
+    const userCarousel = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel;
+    const carouselOverrides = Object.assign(Object.assign({ previous: { reactNode: PreviousButton }, next: { reactNode: NextButton } }, userCarousel), { item: Object.assign(Object.assign({}, userCarousel === null || userCarousel === void 0 ? void 0 : userCarousel.item), { productCard: {
+                reactNode: renderProductCard,
+            } }) });
+    return (react_1.default.createElement("div", { className: 'cio-asa-results-group', ref: viewRef },
+        showTitle && label && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.groupTitle) === null || _c === void 0 ? void 0 : _c.reactNode, props: titleRenderProps },
+            react_1.default.createElement("h3", { className: 'cio-asa-results-group__label' }, label))),
+        react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: products, loop: false, responsive: {
+                0: { gap, slidesToShow },
+            }, componentOverrides: carouselOverrides }),
+        onViewMore && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_d = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.viewMore) === null || _d === void 0 ? void 0 : _d.reactNode, props: viewMoreRenderProps },
+            react_1.default.createElement("button", { type: 'button', className: 'cio-asa-results-group__view-more', onClick: handleViewMore },
+                react_1.default.createElement("span", { className: 'cio-asa-results-group__view-more-text' }, viewMoreText),
+                react_1.default.createElement(icons_1.ArrowRightIcon, null))))));
+}
+exports.default = ResultsGroup;
+ResultsGroup.displayName = 'ResultsGroup';

package/lib/cjs/hooks/asaStreamHandlers.js

@@ -11,7 +11,9 @@ function handleSearchResult(data, pendingGroup, assistantId, setMessages) {
         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 };
+    // `result_id` is unique per search_result event; `intent_result_id` is shared across
+    // the stream. Both sit at the top level of the SSE event payload.
+    const newGroup = Object.assign(Object.assign({ group: resolvedGroup, searchResults: results }, ((data === null || data === void 0 ? void 0 : data.result_id) && { searchResultId: data.result_id })), ((data === null || data === void 0 ? void 0 : data.intent_result_id) && { intentResultId: data.intent_result_id }));
     updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', groups: [...(msg.groups || []), newGroup] })));
     return null;
 }

package/lib/cjs/hooks/useAsaResults.js

@@ -4,7 +4,9 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const useCioAsaContext_1 = require("./useCioAsaContext");
 const asaStreamHandlers_1 = require("./asaStreamHandlers");
+const useAsaTracking_1 = tslib_1.__importDefault(require("./useAsaTracking"));
 function useAsaResults() {
+    var _a;
     const [messages, setMessages] = (0, react_1.useState)([]);
     const [isStreaming, setIsStreaming] = (0, react_1.useState)(false);
     const isStreamingRef = (0, react_1.useRef)(false);
@@ -16,22 +18,37 @@ function useAsaResults() {
     if (!contextValue) {
         throw new Error('useAsaResults must be used within a CioAsaProvider.');
     }
-    const { cioClient, staticRequestConfigs } = contextValue;
+    const { cioClient, staticRequestConfigs, callbacks, section } = contextValue;
     const { domain } = staticRequestConfigs || {};
     if (!cioClient || !domain) {
         throw new Error('useAsaResults requires a configured cioClient and domain. Check your CioAsaProvider props.');
     }
+    const tracking = (0, useAsaTracking_1.default)({
+        tracker: cioClient.tracker,
+        section,
+        threadId: (_a = threadIdRef.current) !== null && _a !== void 0 ? _a : undefined,
+    });
+    const trackingRef = (0, react_1.useRef)(tracking);
+    trackingRef.current = tracking;
+    const callbacksRef = (0, react_1.useRef)(callbacks);
+    callbacksRef.current = callbacks;
+    const staticRequestConfigsRef = (0, react_1.useRef)(staticRequestConfigs);
+    staticRequestConfigsRef.current = staticRequestConfigs;
     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)
+    const sendMessage = (0, react_1.useCallback)((text, source = 'input') => {
+        var _a, _b;
+        const intent = text.trim();
+        if (!intent || isStreamingRef.current)
             return;
+        trackingRef.current.trackSubmit(intent);
+        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onAssistantSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, { intent, source });
         const userMessage = {
             id: nextMessageId(),
             role: 'user',
-            text: text.trim(),
+            text: intent,
             status: 'done',
         };
         const assistantMessage = {
@@ -40,17 +57,44 @@ function useAsaResults() {
             text: '',
             groups: [],
             status: 'loading',
+            intent,
         };
         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 })));
+        // `intent` is passed as the first argument and `threadId` is managed per-stream
+        // below, so both are stripped here. Everything else configured on the provider
+        // (filters, guard, numResultsPerEvent, numResultEvents, qsParam,
+        // preFilterExpression, fmtOptions, ...) is forwarded to the agent as-is.
+        const agentParams = Object.assign({}, staticRequestConfigsRef.current);
+        delete agentParams.intent;
+        delete agentParams.threadId;
+        const stream = cioClient.agent.getAgentResultsStream(intent, Object.assign(Object.assign(Object.assign({}, agentParams), { domain }), (threadIdRef.current && { threadId: threadIdRef.current })));
         const reader = stream.getReader();
         readerRef.current = reader;
+        // Mutable per-stream state kept on an object so the closures below don't capture
+        // reassigned loop-locals (which eslint's no-loop-func forbids).
+        const streamState = {
+            pendingGroup: null,
+            intentResultId: undefined,
+            loadStartFired: false,
+            groupCount: 0,
+        };
+        const patchAssistant = (patch) => {
+            setMessages((prev) => prev.map((m) => (m.id === assistantMessage.id ? Object.assign(Object.assign({}, m), patch) : m)));
+        };
+        const fireLoadStart = () => {
+            var _a, _b;
+            if (streamState.loadStartFired)
+                return;
+            streamState.loadStartFired = true;
+            const args = { intent, intentResultId: streamState.intentResultId };
+            trackingRef.current.trackResultLoadStarted(args);
+            (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onResultLoadStart) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+        };
         (() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
-            let pendingGroup = null;
+            var _c, _d, _e, _f, _g, _h;
             try {
                 // eslint-disable-next-line no-await-in-loop
                 while (!killSwitchRef.current) {
@@ -60,22 +104,42 @@ function useAsaResults() {
                         break;
                     if (res.done) {
                         (0, asaStreamHandlers_1.handleStreamEnd)(assistantMessage.id, setMessages);
+                        const finishArgs = {
+                            intent,
+                            searchResultCount: streamState.groupCount,
+                            intentResultId: streamState.intentResultId,
+                        };
+                        trackingRef.current.trackResultLoadFinished(finishArgs);
+                        (_d = (_c = callbacksRef.current) === null || _c === void 0 ? void 0 : _c.onResultLoadFinish) === null || _d === void 0 ? void 0 : _d.call(_c, finishArgs);
                         break;
                     }
                     const { type, data } = res.value;
-                    if (type === 'start' && (data === null || data === void 0 ? void 0 : data.thread_id)) {
-                        threadIdRef.current = data.thread_id;
+                    // `intent_result_id` is shared across the stream; capture it from the first
+                    // event that carries it so load-start/finish can attribute correctly.
+                    if (!streamState.intentResultId && (data === null || data === void 0 ? void 0 : data.intent_result_id)) {
+                        streamState.intentResultId = data.intent_result_id;
+                        patchAssistant({ intentResultId: streamState.intentResultId });
+                    }
+                    if (type === 'start') {
+                        if (data === null || data === void 0 ? void 0 : data.thread_id) {
+                            threadIdRef.current = data.thread_id;
+                            patchAssistant({ threadId: data.thread_id });
+                        }
+                        fireLoadStart();
                     }
                     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 : '',
+                        streamState.pendingGroup = {
+                            display_name: (_f = (_e = data === null || data === void 0 ? void 0 : data.display_name) !== null && _e !== void 0 ? _e : data === null || data === void 0 ? void 0 : data.group) !== null && _f !== void 0 ? _f : '',
+                            value: (_h = (_g = data === null || data === void 0 ? void 0 : data.value) !== null && _g !== void 0 ? _g : data === null || data === void 0 ? void 0 : data.group) !== null && _h !== void 0 ? _h : '',
                         };
                     }
                     else if (type === 'search_result') {
-                        pendingGroup = (0, asaStreamHandlers_1.handleSearchResult)(data, pendingGroup, assistantMessage.id, setMessages);
+                        fireLoadStart();
+                        streamState.groupCount += 1;
+                        streamState.pendingGroup = (0, asaStreamHandlers_1.handleSearchResult)(data, streamState.pendingGroup, assistantMessage.id, setMessages);
                     }
                     else if (type === 'message') {
+                        fireLoadStart();
                         (0, asaStreamHandlers_1.handleMessage)(data, assistantMessage.id, setMessages);
                     }
                     else if (type === 'server_error') {
@@ -84,7 +148,7 @@ function useAsaResults() {
                     }
                 }
             }
-            catch (_e) {
+            catch (_j) {
                 (0, asaStreamHandlers_1.handleStreamError)(assistantMessage.id, setMessages);
             }
             finally {

package/lib/cjs/hooks/useAsaTracking.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const NOOP_TRACKING = {
+    trackSubmit: () => { },
+    trackResultLoadStarted: () => { },
+    trackResultLoadFinished: () => { },
+    trackResultClick: () => { },
+    trackResultView: () => { },
+    trackSearchSubmit: () => { },
+};
+/**
+ * Fires ASA behavioral tracking events through the Constructor client. Each returned
+ * function maps to one `trackAssistant*` beacon and merges in `section` + `threadId`.
+ * Mirrors the tracking-hook pattern used by constructorio-ui-pia.
+ */
+function useAsaTracking({ tracker, section, threadId, }) {
+    const assistant = tracker;
+    const base = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (section && { section })), (threadId && { threadId }))), [section, threadId]);
+    const trackSubmit = (0, react_1.useCallback)((intent) => {
+        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantSubmit(Object.assign({ intent }, base));
+    }, [assistant, base]);
+    const trackResultLoadStarted = (0, react_1.useCallback)(({ intent, intentResultId }) => {
+        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultLoadStarted(Object.assign(Object.assign({ intent }, (intentResultId && { intentResultId })), base));
+    }, [assistant, base]);
+    const trackResultLoadFinished = (0, react_1.useCallback)(({ intent, searchResultCount, intentResultId }) => {
+        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultLoadFinished(Object.assign(Object.assign({ intent,
+            searchResultCount }, (intentResultId && { intentResultId })), base));
+    }, [assistant, base]);
+    const trackResultClick = (0, react_1.useCallback)(({ intent, searchResultId, intentResultId, itemId, itemName, variationId, }) => {
+        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultClick(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ intent,
+            searchResultId }, (intentResultId && { intentResultId })), (itemId && { itemId })), (itemName && { itemName })), (variationId && { variationId })), base));
+    }, [assistant, base]);
+    const trackResultView = (0, react_1.useCallback)(({ intent, searchResultId, numResultsViewed, intentResultId, items }) => {
+        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantResultView(Object.assign(Object.assign(Object.assign({ intent,
+            searchResultId,
+            numResultsViewed }, (intentResultId && { intentResultId })), (items && items.length > 0 && { items })), base));
+    }, [assistant, base]);
+    const trackSearchSubmit = (0, react_1.useCallback)(({ intent, searchTerm, userInput, searchResultId, intentResultId, groupId, }) => {
+        assistant === null || assistant === void 0 ? void 0 : assistant.trackAssistantSearchSubmit(Object.assign(Object.assign(Object.assign({ intent,
+            searchTerm,
+            userInput,
+            searchResultId }, (intentResultId && { intentResultId })), (groupId && { groupId })), base));
+    }, [assistant, base]);
+    return (0, react_1.useMemo)(() => {
+        if (!assistant)
+            return NOOP_TRACKING;
+        return {
+            trackSubmit,
+            trackResultLoadStarted,
+            trackResultLoadFinished,
+            trackResultClick,
+            trackResultView,
+            trackSearchSubmit,
+        };
+    }, [
+        assistant,
+        trackSubmit,
+        trackResultLoadStarted,
+        trackResultLoadFinished,
+        trackResultClick,
+        trackResultView,
+        trackSearchSubmit,
+    ]);
+}
+exports.default = useAsaTracking;

package/lib/cjs/hooks/useViewportTracking.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Fires `onView` once when the observed element scrolls into the viewport, modeling a
+ * per-pod `assistant_search_result_view` impression. Unlike the PIA widget-level view
+ * tracker, this fires a single impression per pod (not repeated enter/exit cycles).
+ */
+function useViewportTracking({ onView, enabled = true, }) {
+    const onViewRef = (0, react_1.useRef)(onView);
+    onViewRef.current = onView;
+    const firedRef = (0, react_1.useRef)(false);
+    const cleanupRef = (0, react_1.useRef)(null);
+    const ref = (0, react_1.useCallback)((node) => {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+        if (!node || !enabled || firedRef.current)
+            return;
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !firedRef.current) {
+                firedRef.current = true;
+                onViewRef.current();
+                observer.disconnect();
+            }
+        }, { threshold: 0.5 });
+        observer.observe(node);
+        cleanupRef.current = () => observer.disconnect();
+    }, [enabled]);
+    (0, react_1.useEffect)(() => () => {
+        if (cleanupRef.current)
+            cleanupRef.current();
+    }, []);
+    return { ref };
+}
+exports.default = useViewportTracking;

package/lib/cjs/index.js

@@ -3,7 +3,7 @@ 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;
+exports.ConstructorIOClient = exports.normalizeItemToProduct = exports.useAsaTracking = 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; } });
@@ -16,6 +16,8 @@ Object.defineProperty(exports, "Button", { enumerable: true, get: function () {
 // Hooks
 var useAsaResults_1 = require("./hooks/useAsaResults");
 Object.defineProperty(exports, "useAsaResults", { enumerable: true, get: function () { return __importDefault(useAsaResults_1).default; } });
+var useAsaTracking_1 = require("./hooks/useAsaTracking");
+Object.defineProperty(exports, "useAsaTracking", { enumerable: true, get: function () { return __importDefault(useAsaTracking_1).default; } });
 // Utils
 var productNormalizer_1 = require("./utils/productNormalizer");
 Object.defineProperty(exports, "normalizeItemToProduct", { enumerable: true, get: function () { return productNormalizer_1.normalizeItemToProduct; } });

package/lib/cjs/utils/productNormalizer.js

@@ -4,17 +4,8 @@ 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
+    return Object.assign(Object.assign({ 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 : '') }, (data.variation_id != null && { variationId: String(data.variation_id) })), { 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,
-    };
+            : undefined });
 }
 exports.normalizeItemToProduct = normalizeItemToProduct;

package/lib/cjs/version.js

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

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

@@ -17,7 +17,16 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
     useEffect(() => {
         const root = isWelcome ? containerRef.current : chatViewRef.current;
         const input = root?.querySelector('input');
-        input?.focus();
+        if (input) {
+            // preventScroll: focusing must not scroll the page — the host may render Chat
+            // below the fold (or, as in Storybook docs, several instances on one page).
+            try {
+                input.focus({ preventScroll: true });
+            }
+            catch {
+                input.focus();
+            }
+        }
     }, [isWelcome]);
     useFocusTrap(containerRef, { onEscape: onClose });
     return (React.createElement("div", { className: ['cio-asa', 'cio-asa-chat', className].filter(Boolean).join(' '), ref: containerRef, role: 'dialog', "aria-labelledby": 'cio-asa-chat-title' },

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

@@ -35,7 +35,7 @@ export default function ChatMessageList({ messages, onProductClick, onViewMore,
         const hasGroups = !!message.groups?.length;
         return (React.createElement("div", { key: message.id, className: 'cio-asa-ai-message-group' },
             React.createElement(AiMessage, { message: message, componentOverrides: aiMessageOverrides, translations: translations }),
-            hasGroups && (React.createElement(ResultsBlock, { groups: message.groups, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: translate('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))));
+            hasGroups && (React.createElement(ResultsBlock, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: translate('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))));
     })));
 }
 ChatMessageList.displayName = 'ChatMessageList';