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

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

@@ -16,9 +16,10 @@ export default function WelcomeScreen({ suggestions = DEFAULT_SUGGESTIONS, onSen
         placeholder: translate('CioAsa.welcome.placeholder', translations),
         isDisabled: disabled,
     };
+    const handleSuggestionClick = (suggestion) => onSend(suggestion, 'suggestion');
     const suggestionsRenderProps = {
         suggestions,
-        onSuggestionClick: onSend,
+        onSuggestionClick: handleSuggestionClick,
     };
     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")),
@@ -32,7 +33,7 @@ export default function WelcomeScreen({ suggestions = DEFAULT_SUGGESTIONS, onSen
                         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))))))),
+                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: () => handleSuggestionClick(suggestion) }, suggestion))))))),
         termsText && React.createElement("div", { className: 'cio-asa-welcome-screen__terms' }, termsText)));
 }
 WelcomeScreen.displayName = 'WelcomeScreen';

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

@@ -4,7 +4,7 @@ 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 { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, callbacks, section = 'Products', children, } = props;
     const [cioClientOptions, setCioClientOptions] = useState({});
     const cioClient = useCioClient({ apiKey, cioClient: customCioClient, cioClientOptions });
     const contextValue = useMemo(() => ({
@@ -14,6 +14,8 @@ export default function CioAsaProvider(props) {
         staticRequestConfigs,
         formatters: { ...defaultFormatters, ...formatters },
         urlHelpers: { ...defaultUrlHelpers, ...urlHelpers },
-    }), [cioClient, cioClientOptions, formatters, urlHelpers, staticRequestConfigs]);
+        callbacks,
+        section,
+    }), [cioClient, cioClientOptions, formatters, urlHelpers, staticRequestConfigs, callbacks, section]);
     return (React.createElement(AsaContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));
 }

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

@@ -1,19 +1,20 @@
 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 { useCioAsaContext } from '../../hooks/useCioAsaContext';
+import useAsaTracking from '../../hooks/useAsaTracking';
 import { PEEK_FRACTION, aspectRatioMap } from './constants';
-import createProductCardRenderer from './renderProductCard';
+import ResultsGroup from './ResultsGroup';
 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, }) {
+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 = normalizeItemToProduct, onProductClick, onAddToCart, onViewMore, componentOverrides, }) {
     const containerRef = useRef(null);
     const [slidesToShow, setSlidesToShow] = useState(3 + PEEK_FRACTION);
+    const context = useCioAsaContext();
+    const tracking = useAsaTracking({
+        tracker: context?.cioClient?.tracker ?? undefined,
+        section: context?.section,
+        threadId,
+    });
+    const callbacks = context?.callbacks;
     useEffect(() => {
         const el = containerRef.current;
         if (!el)
@@ -32,44 +33,10 @@ function ResultsBlock({ groups, aspectRatio = '3:4', minCardWidth = 150, gap = 1
     }, [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))))));
+        return (React.createElement(ResultsGroup, { 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/mjs/components/ResultsBlock/ResultsGroup.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Carousel, RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
+import useViewportTracking from '../../hooks/useViewportTracking';
+import { ArrowRightIcon } from '../icons';
+import createProductCardRenderer from './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.
+ */
+export default function ResultsGroup({ groupData, label, slidesToShow, gap, showTitle, viewMoreText, addToCartText, saleBadgeText, currency, intent, intentResultId, normalizeItem, onProductClick, onAddToCart, onViewMore, componentOverrides, tracking, callbacks, }) {
+    const { searchResultId } = groupData;
+    const products = groupData.searchResults.map((item) => normalizeItem(item, { saleBadgeText }));
+    const canTrack = !!intent && !!searchResultId;
+    const { ref: viewRef } = useViewportTracking({
+        enabled: canTrack,
+        onView: () => {
+            if (!intent || !searchResultId)
+                return;
+            const items = products.map((p) => ({
+                itemId: p.id,
+                itemName: p.name,
+                ...(p.variationId && { variationId: p.variationId }),
+            }));
+            const payload = {
+                intent,
+                searchResultId,
+                intentResultId,
+                numResultsViewed: products.length,
+                items,
+            };
+            tracking.trackResultView(payload);
+            callbacks?.onResultView?.(payload);
+        },
+    });
+    const handleProductClick = (product) => {
+        if (intent && searchResultId) {
+            tracking.trackResultClick({
+                intent,
+                searchResultId,
+                intentResultId,
+                itemId: product.id,
+                itemName: product.name,
+                variationId: product.variationId,
+            });
+            callbacks?.onResultClick?.({
+                intent,
+                searchResultId,
+                intentResultId,
+                item: {
+                    itemId: product.id,
+                    itemName: product.name,
+                    ...(product.variationId && { variationId: product.variationId }),
+                },
+            });
+        }
+        onProductClick?.(product);
+    };
+    const handleViewMore = () => {
+        if (intent && searchResultId) {
+            const searchTerm = groupData.group?.value || groupData.group?.display_name || '';
+            const payload = {
+                intent,
+                searchTerm,
+                userInput: searchTerm,
+                searchResultId,
+                intentResultId,
+            };
+            tracking.trackSearchSubmit(payload);
+            callbacks?.onSearchSubmit?.(payload);
+        }
+        onViewMore?.(groupData.group);
+    };
+    const renderProductCard = createProductCardRenderer({
+        currency,
+        addToCartText,
+        onProductClick: handleProductClick,
+        onAddToCart,
+        componentOverrides: componentOverrides?.carousel?.item?.productCard,
+    });
+    const titleRenderProps = { label };
+    const viewMoreRenderProps = {
+        group: groupData.group,
+        onClick: handleViewMore,
+    };
+    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', ref: viewRef },
+        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: handleViewMore },
+                React.createElement("span", { className: 'cio-asa-results-group__view-more-text' }, viewMoreText),
+                React.createElement(ArrowRightIcon, null))))));
+}
+ResultsGroup.displayName = 'ResultsGroup';

package/lib/mjs/hooks/asaStreamHandlers.js

@@ -7,7 +7,14 @@ export function handleSearchResult(data, pendingGroup, assistantId, setMessages)
         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 };
+    // `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 = {
+        group: resolvedGroup,
+        searchResults: results,
+        ...(data?.result_id && { searchResultId: data.result_id }),
+        ...(data?.intent_result_id && { intentResultId: data.intent_result_id }),
+    };
     updateMessageById(setMessages, assistantId, (msg) => ({
         ...msg,
         status: 'streaming',

package/lib/mjs/hooks/useAsaResults.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCioAsaContext } from './useCioAsaContext';
 import { handleSearchResult, handleMessage, handleServerError, handleStreamEnd, handleStreamError, } from './asaStreamHandlers';
+import useAsaTracking from './useAsaTracking';
 export default function useAsaResults() {
     const [messages, setMessages] = useState([]);
     const [isStreaming, setIsStreaming] = useState(false);
@@ -13,22 +14,36 @@ export default 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 = useAsaTracking({
+        tracker: cioClient.tracker,
+        section,
+        threadId: threadIdRef.current ?? undefined,
+    });
+    const trackingRef = useRef(tracking);
+    trackingRef.current = tracking;
+    const callbacksRef = useRef(callbacks);
+    callbacksRef.current = callbacks;
+    const staticRequestConfigsRef = useRef(staticRequestConfigs);
+    staticRequestConfigsRef.current = staticRequestConfigs;
     const nextMessageId = useCallback(() => {
         idCounterRef.current += 1;
         return `msg-${idCounterRef.current}-${Date.now()}`;
     }, []);
-    const sendMessage = useCallback((text) => {
-        if (!text.trim() || isStreamingRef.current)
+    const sendMessage = useCallback((text, source = 'input') => {
+        const intent = text.trim();
+        if (!intent || isStreamingRef.current)
             return;
+        trackingRef.current.trackSubmit(intent);
+        callbacksRef.current?.onAssistantSubmit?.({ intent, source });
         const userMessage = {
             id: nextMessageId(),
             role: 'user',
-            text: text.trim(),
+            text: intent,
             status: 'done',
         };
         const assistantMessage = {
@@ -37,19 +52,46 @@ export default 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(), {
+        // `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 = { ...staticRequestConfigsRef.current };
+        delete agentParams.intent;
+        delete agentParams.threadId;
+        const stream = cioClient.agent.getAgentResultsStream(intent, {
+            ...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 ? { ...m, ...patch } : m)));
+        };
+        const fireLoadStart = () => {
+            if (streamState.loadStartFired)
+                return;
+            streamState.loadStartFired = true;
+            const args = { intent, intentResultId: streamState.intentResultId };
+            trackingRef.current.trackResultLoadStarted(args);
+            callbacksRef.current?.onResultLoadStart?.(args);
+        };
         (async () => {
-            let pendingGroup = null;
             try {
                 // eslint-disable-next-line no-await-in-loop
                 while (!killSwitchRef.current) {
@@ -59,22 +101,42 @@ export default function useAsaResults() {
                         break;
                     if (res.done) {
                         handleStreamEnd(assistantMessage.id, setMessages);
+                        const finishArgs = {
+                            intent,
+                            searchResultCount: streamState.groupCount,
+                            intentResultId: streamState.intentResultId,
+                        };
+                        trackingRef.current.trackResultLoadFinished(finishArgs);
+                        callbacksRef.current?.onResultLoadFinish?.(finishArgs);
                         break;
                     }
                     const { type, data } = res.value;
-                    if (type === 'start' && 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?.intent_result_id) {
+                        streamState.intentResultId = data.intent_result_id;
+                        patchAssistant({ intentResultId: streamState.intentResultId });
+                    }
+                    if (type === 'start') {
+                        if (data?.thread_id) {
+                            threadIdRef.current = data.thread_id;
+                            patchAssistant({ threadId: data.thread_id });
+                        }
+                        fireLoadStart();
                     }
                     else if (type === 'group') {
-                        pendingGroup = {
+                        streamState.pendingGroup = {
                             display_name: data?.display_name ?? data?.group ?? '',
                             value: data?.value ?? data?.group ?? '',
                         };
                     }
                     else if (type === 'search_result') {
-                        pendingGroup = handleSearchResult(data, pendingGroup, assistantMessage.id, setMessages);
+                        fireLoadStart();
+                        streamState.groupCount += 1;
+                        streamState.pendingGroup = handleSearchResult(data, streamState.pendingGroup, assistantMessage.id, setMessages);
                     }
                     else if (type === 'message') {
+                        fireLoadStart();
                         handleMessage(data, assistantMessage.id, setMessages);
                     }
                     else if (type === 'server_error') {

package/lib/mjs/hooks/useAsaTracking.js

@@ -0,0 +1,91 @@
+import { useCallback, useMemo } from '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.
+ */
+export default function useAsaTracking({ tracker, section, threadId, }) {
+    const assistant = tracker;
+    const base = useMemo(() => ({
+        ...(section && { section }),
+        ...(threadId && { threadId }),
+    }), [section, threadId]);
+    const trackSubmit = useCallback((intent) => {
+        assistant?.trackAssistantSubmit({ intent, ...base });
+    }, [assistant, base]);
+    const trackResultLoadStarted = useCallback(({ intent, intentResultId }) => {
+        assistant?.trackAssistantResultLoadStarted({
+            intent,
+            ...(intentResultId && { intentResultId }),
+            ...base,
+        });
+    }, [assistant, base]);
+    const trackResultLoadFinished = useCallback(({ intent, searchResultCount, intentResultId }) => {
+        assistant?.trackAssistantResultLoadFinished({
+            intent,
+            searchResultCount,
+            ...(intentResultId && { intentResultId }),
+            ...base,
+        });
+    }, [assistant, base]);
+    const trackResultClick = useCallback(({ intent, searchResultId, intentResultId, itemId, itemName, variationId, }) => {
+        assistant?.trackAssistantResultClick({
+            intent,
+            searchResultId,
+            ...(intentResultId && { intentResultId }),
+            ...(itemId && { itemId }),
+            ...(itemName && { itemName }),
+            ...(variationId && { variationId }),
+            ...base,
+        });
+    }, [assistant, base]);
+    const trackResultView = useCallback(({ intent, searchResultId, numResultsViewed, intentResultId, items }) => {
+        assistant?.trackAssistantResultView({
+            intent,
+            searchResultId,
+            numResultsViewed,
+            ...(intentResultId && { intentResultId }),
+            ...(items && items.length > 0 && { items }),
+            ...base,
+        });
+    }, [assistant, base]);
+    const trackSearchSubmit = useCallback(({ intent, searchTerm, userInput, searchResultId, intentResultId, groupId, }) => {
+        assistant?.trackAssistantSearchSubmit({
+            intent,
+            searchTerm,
+            userInput,
+            searchResultId,
+            ...(intentResultId && { intentResultId }),
+            ...(groupId && { groupId }),
+            ...base,
+        });
+    }, [assistant, base]);
+    return useMemo(() => {
+        if (!assistant)
+            return NOOP_TRACKING;
+        return {
+            trackSubmit,
+            trackResultLoadStarted,
+            trackResultLoadFinished,
+            trackResultClick,
+            trackResultView,
+            trackSearchSubmit,
+        };
+    }, [
+        assistant,
+        trackSubmit,
+        trackResultLoadStarted,
+        trackResultLoadFinished,
+        trackResultClick,
+        trackResultView,
+        trackSearchSubmit,
+    ]);
+}

package/lib/mjs/hooks/useViewportTracking.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef } from '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).
+ */
+export default function useViewportTracking({ onView, enabled = true, }) {
+    const onViewRef = useRef(onView);
+    onViewRef.current = onView;
+    const firedRef = useRef(false);
+    const cleanupRef = useRef(null);
+    const ref = 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]);
+    useEffect(() => () => {
+        if (cleanupRef.current)
+            cleanupRef.current();
+    }, []);
+    return { ref };
+}

package/lib/mjs/index.js

@@ -5,6 +5,7 @@ export { default as ResultsBlock } from './components/ResultsBlock/ResultsBlock'
 export { default as Button } from './components/Button/Button';
 // Hooks
 export { default as useAsaResults } from './hooks/useAsaResults';
+export { default as useAsaTracking } from './hooks/useAsaTracking';
 // Utils
 export { normalizeItemToProduct } from './utils/productNormalizer';
 // Re-exported client value from the JS client (used to construct/type a cioClient)

package/lib/mjs/utils/productNormalizer.js

@@ -3,6 +3,7 @@ export function normalizeItemToProduct(item, options) {
     return {
         id: String(data.id ?? data.result_id ?? item.value ?? ''),
         name: String(item.value ?? data.item_name ?? ''),
+        ...(data.variation_id != null && { variationId: String(data.variation_id) }),
         url: data.url,
         imageUrl: data.image_url ?? data.imageUrl,
         price: data.price,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.0.0';
+export default '1.1.1';

package/lib/types/components/Chat/WelcomeScreen.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Translations, WelcomeScreenOverrides } from '../../types';
+import { AssistantSubmitSource, Translations, WelcomeScreenOverrides } from '../../types';
 interface WelcomeScreenProps {
     suggestions?: string[];
-    onSend: (text: string) => void;
+    onSend: (text: string, source?: AssistantSubmitSource) => void;
     onClose?: () => void;
     termsText?: React.ReactNode;
     disabled?: boolean;

package/lib/types/components/ResultsBlock/ResultsBlock.d.ts

@@ -14,6 +14,9 @@ interface ResultsBlockProps {
     addToCartText?: string;
     saleBadgeText?: string;
     currency?: string;
+    intent?: string;
+    intentResultId?: string;
+    threadId?: string;
     /**
      * Map a raw search-result item to the `Product` shape rendered by the card.
      * Override this when your index metadata uses non-default field names
@@ -25,7 +28,7 @@ interface ResultsBlockProps {
     onViewMore?: (group: ResultGroupMeta) => void;
     componentOverrides?: ResultsBlockOverrides;
 }
-declare function ResultsBlock({ groups, aspectRatio, minCardWidth, gap, showTitle, viewMoreText, addToCartText, saleBadgeText, currency, normalizeItem, onProductClick, onAddToCart, onViewMore, componentOverrides, }: ResultsBlockProps): React.JSX.Element | null;
+declare function ResultsBlock({ groups, aspectRatio, minCardWidth, gap, showTitle, viewMoreText, addToCartText, saleBadgeText, currency, intent, intentResultId, threadId, normalizeItem, onProductClick, onAddToCart, onViewMore, componentOverrides, }: ResultsBlockProps): React.JSX.Element | null;
 declare namespace ResultsBlock {
     var displayName: string;
 }

package/lib/types/components/ResultsBlock/ResultsGroup.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { AsaCallbacks, ResultGroup, ResultGroupMeta, ResultsBlockOverrides } from '../../types';
+import { Product, NormalizeOptions } from '../../utils/productNormalizer';
+import useAsaTracking from '../../hooks/useAsaTracking';
+export interface ResultsGroupProps {
+    groupData: ResultGroup;
+    label: string;
+    slidesToShow: number;
+    gap: number;
+    showTitle: boolean;
+    viewMoreText: string;
+    addToCartText: string;
+    saleBadgeText: string;
+    currency?: string;
+    intent?: string;
+    intentResultId?: string;
+    normalizeItem: (item: any, options?: NormalizeOptions) => Product;
+    onProductClick?: (product: Product) => void;
+    onAddToCart?: (product: Product) => void;
+    onViewMore?: (group: ResultGroupMeta) => void;
+    componentOverrides?: ResultsBlockOverrides;
+    tracking: ReturnType<typeof useAsaTracking>;
+    callbacks?: AsaCallbacks;
+}
+/**
+ * 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.
+ */
+declare function ResultsGroup({ groupData, label, slidesToShow, gap, showTitle, viewMoreText, addToCartText, saleBadgeText, currency, intent, intentResultId, normalizeItem, onProductClick, onAddToCart, onViewMore, componentOverrides, tracking, callbacks, }: ResultsGroupProps): React.JSX.Element;
+declare namespace ResultsGroup {
+    var displayName: string;
+}
+export default ResultsGroup;