@constructor-io/constructorio-ui-pia 2.8.0 → 2.10.0

package/lib/mjs/components/CioPia/PiaCustomCarousel.js

@@ -7,10 +7,60 @@ function HtmlDescription({ product }) {
         return null;
     return (React.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: sanitizeHtml(description) } }));
 }
-export default function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
+function createPriceSectionOverride(priceCurrency) {
+    return function PriceSectionOverride({ product }) {
+        const { price, salePrice } = product;
+        if (price == null)
+            return null;
+        return (React.createElement("div", { className: 'cio-product-card-price-section flex items-baseline gap-2' },
+            React.createElement("span", { className: 'text-lg font-bold' },
+                priceCurrency,
+                "\u00A0",
+                salePrice ?? price),
+            salePrice != null && (React.createElement("span", { className: 'text-sm text-gray-400 line-through' },
+                priceCurrency,
+                "\u00A0",
+                price))));
+    };
+}
+function getContentDefaults(content, priceSectionOverride) {
+    const defaults = {};
+    if (!content?.description) {
+        defaults.description = { reactNode: HtmlDescription };
+    }
+    if (!content?.price && priceSectionOverride) {
+        defaults.price = { reactNode: priceSectionOverride };
+    }
+    return defaults;
+}
+function buildMergedOverrides(componentOverrides, priceSectionOverride) {
+    const content = componentOverrides?.item?.productCard?.content;
+    const defaults = getContentDefaults(content, priceSectionOverride);
+    if (Object.keys(defaults).length === 0) {
+        return componentOverrides || {};
+    }
+    return {
+        ...componentOverrides,
+        item: {
+            ...componentOverrides?.item,
+            productCard: {
+                ...componentOverrides?.item?.productCard,
+                content: {
+                    ...content,
+                    ...defaults,
+                },
+            },
+        },
+    };
+}
+export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, priceCurrency, }) {
     const wrapperRef = useRef(null);
     // Determine to use user-defined click handler or default behavior
     const productClickHandler = useCallback((item) => {
+        const position = items.findIndex((i) => i.id === item.id);
+        if (onResultClick && question) {
+            onResultClick(item, position >= 0 ? position : 0, question, qnaResultId);
+        }
         const { onProductCardClick } = callbacks || {};
         if (onProductCardClick) {
             onProductCardClick(item);
@@ -18,7 +68,7 @@ export default function PiaCustomCarousel({ items, componentOverrides, callbacks
         else if (item?.url) {
             window.open(item.url, '_blank', 'noopener,noreferrer');
         }
-    }, [callbacks]);
+    }, [callbacks, items, onResultClick, question, qnaResultId]);
     // Set up event listener for product card clicks
     useEffect(() => {
         const el = wrapperRef.current;
@@ -35,24 +85,8 @@ export default function PiaCustomCarousel({ items, componentOverrides, callbacks
             el.removeEventListener(CIO_EVENTS.productCard.click, handleClick);
         };
     }, [productClickHandler]);
-    const mergedOverrides = useMemo(() => {
-        if (componentOverrides?.item?.productCard?.content?.description) {
-            return componentOverrides;
-        }
-        return {
-            ...componentOverrides,
-            item: {
-                ...componentOverrides?.item,
-                productCard: {
-                    ...componentOverrides?.item?.productCard,
-                    content: {
-                        ...componentOverrides?.item?.productCard?.content,
-                        description: { reactNode: HtmlDescription },
-                    },
-                },
-            },
-        };
-    }, [componentOverrides]);
+    const priceSectionOverride = useMemo(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
+    const mergedOverrides = useMemo(() => buildMergedOverrides(componentOverrides, priceSectionOverride), [componentOverrides, priceSectionOverride]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;

package/lib/mjs/components/ConversationHistory/ConversationHistory.js

@@ -5,7 +5,7 @@ import Disclaimer from '../CioPia/Disclaimer';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import PiaCustomCarousel from '../CioPia/PiaCustomCarousel';
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
     const scrollContainerRef = useRef(null);
     useEffect(() => {
         const container = scrollContainerRef.current;
@@ -31,8 +31,8 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
                 isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
                 entry.answer && (React.createElement("div", { className: 'cio-pia-answer-container' },
                     React.createElement(Answer, { text: entry.answer, componentOverride: componentOverrides?.answer }),
-                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
-                    isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback }))))));
+                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+                    isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides?.feedback }))))));
         })),
         disclaimerPosition === 'bottom' && disclaimer));
 }

package/lib/mjs/components/PiaConversation/PiaConversation.js

@@ -4,11 +4,11 @@ import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/Suggeste
 import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
 import { translate } from '../../utils/translate';
 import ConversationHistory from '../ConversationHistory/ConversationHistory';
-export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, onInputFocus, }) {
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, }) {
     const hasHistory = conversationHistory.length > 0;
     return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations))),
-        React.createElement(ConversationHistory, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides }),
+        React.createElement(ConversationHistory, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId, priceCurrency: priceCurrency }),
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
             !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),

package/lib/mjs/components/PiaInlineAnswer/PiaInlineAnswer.js

@@ -3,12 +3,12 @@ import Answer from '../Answer/Answer';
 import Feedback from '../Feedback/Feedback';
 import Disclaimer from '../CioPia/Disclaimer';
 import PiaCustomCarousel from '../CioPia/PiaCustomCarousel';
-export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
+export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, priceCurrency, }) {
     const disclaimer = (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }));
     return (React.createElement("div", { className: 'cio-pia-answer-container' },
         disclaimerPosition === 'top' && disclaimer,
         React.createElement(Answer, { text: currentAnswer, componentOverride: componentOverrides?.answer }),
-        currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
-        showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })),
+        currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+        showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: onFeedback || callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })),
         disclaimerPosition === 'bottom' && disclaimer));
 }

package/lib/mjs/constants.js

@@ -1,5 +1,6 @@
 export const DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
 export const DEMO_ITEM_ID = '149100215';
+export const DEMO_ITEM_NAME = 'Ensure Original Nutrition Shake';
 export const DEMO_QUESTION = 'What is the nutritional content of this shake?';
 export const DEMO_QUESTION_ALTERNATIVE_PRODUCTS = 'What alternative products are available for this item?';
 export const MOCK_QUESTIONS = [

package/lib/mjs/hooks/useCioClient.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import version from '../version';
-import MockConstructorIOClient from './mocks/MockConstructorIOClient';
 const useCioClient = ({ apiKey, cioClient, options } = {}) => {
     if (!apiKey && !cioClient) {
         throw new Error('Api Key or Constructor Client required');
@@ -9,7 +9,7 @@ const useCioClient = ({ apiKey, cioClient, options } = {}) => {
         if (cioClient)
             return cioClient;
         if (apiKey) {
-            return new MockConstructorIOClient({
+            return new ConstructorIOClient({
                 apiKey,
                 sendTrackingEvents: true,
                 version: `cio-ui-pia-${version}`,

package/lib/mjs/hooks/useCioPia.js

@@ -1,13 +1,21 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import MockConstructorIOClient from './mocks/MockConstructorIOClient';
 import useAnswerResults from './useAnswerResults';
-import useCioClient from './useCioClient';
 import useSuggestedQuestions from './useSuggestedQuestions';
+import version from '../version';
 export default function useCioPia(props) {
     const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = props;
     const [generatedThreadId] = useState(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
-    const defaultClient = useCioClient({ apiKey });
-    const client = providedClient || defaultClient;
+    const client = useMemo(() => {
+        if (providedClient)
+            return providedClient;
+        return new MockConstructorIOClient({
+            apiKey,
+            sendTrackingEvents: true,
+            version: `cio-ui-pia-${version}`,
+        });
+    }, [apiKey, providedClient]);
     const suggestedQuestions = useSuggestedQuestions({
         itemId,
         variationId,
@@ -23,6 +31,7 @@ export default function useCioPia(props) {
         formatImageUrl,
     });
     return {
+        cioClient: client,
         threadId,
         suggestedQuestions,
         answers,

package/lib/mjs/hooks/useConversation.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-export default function useConversation({ pia, itemId, isConversation, callbacks, }) {
+export default function useConversation({ pia, itemId, isConversation, callbacks, tracking, }) {
     const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
     const context = useMemo(() => ({ itemId, threadId }), [itemId, threadId]);
@@ -8,8 +8,11 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
     const [conversationHistory, setConversationHistory] = useState([]);
     const entryIdRef = useRef(0);
     const prevAnswerValueRef = useRef(answers.data?.value);
+    const hasTrackedCurrentAnswerRef = useRef(false);
+    const answersRef = useRef(answers);
     const callbacksRef = useRef(callbacks);
     const contextRef = useRef(context);
+    const trackingRef = useRef(tracking);
     const lastQuestionRef = useRef('');
     const lastSourceRef = useRef('user');
     useEffect(() => {
@@ -18,9 +21,16 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
     useEffect(() => {
         contextRef.current = context;
     }, [context]);
+    useEffect(() => {
+        trackingRef.current = tracking;
+    }, [tracking]);
+    useEffect(() => {
+        answersRef.current = answers;
+    }, [answers]);
     const submitQuestion = useCallback((question, source) => {
         lastSourceRef.current = source;
         lastQuestionRef.current = question;
+        hasTrackedCurrentAnswerRef.current = false;
         setCurrentQuestion(question);
         getAnswer(question);
         if (isConversation) {
@@ -30,16 +40,23 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         }
     }, [getAnswer, isConversation]);
     const handleSubmitQuestion = useCallback((question) => {
+        trackingRef.current?.trackQuestionSubmit(question);
         callbacksRef.current?.onQuestionSubmit?.(question, contextRef.current, 'user');
         submitQuestion(question, 'user');
     }, [submitQuestion]);
     const handleQuestionClick = useCallback((question) => {
+        trackingRef.current?.trackQuestionClick(question);
         callbacksRef.current?.onQuestionSubmit?.(question, contextRef.current, 'suggestion');
         submitQuestion(question, 'suggestion');
     }, [submitQuestion]);
     const handleInputFocus = useCallback(() => {
+        trackingRef.current?.trackFocus();
         callbacksRef.current?.onFocus?.(contextRef.current);
     }, []);
+    const handleFeedback = useCallback((type) => {
+        trackingRef.current?.trackAnswerFeedback(type, answersRef.current.data?.qna_result_id);
+        callbacksRef.current?.onFeedback?.(type);
+    }, []);
     const resetState = useCallback(() => {
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
@@ -58,7 +75,11 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
     useEffect(() => {
         if (answers.data?.follow_up_questions)
             setDisplayedQuestions(answers.data.follow_up_questions);
-    }, [answers.data]);
+        if (answers.data && lastQuestionRef.current && !hasTrackedCurrentAnswerRef.current) {
+            hasTrackedCurrentAnswerRef.current = true;
+            trackingRef.current?.trackAnswerView(lastQuestionRef.current, answers.data, answers.items);
+        }
+    }, [answers.data, answers.items]);
     useEffect(() => {
         const answerValue = answers.data?.value ?? '';
         if (!answerValue)
@@ -113,6 +134,7 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         handleSubmitQuestion,
         handleQuestionClick,
         handleInputFocus,
+        handleFeedback,
         resetState,
     };
 }

package/lib/mjs/hooks/useTracking.js

@@ -0,0 +1,107 @@
+import { useCallback, useMemo } from 'react';
+import { FeedbackType } from '../types';
+export default function useTracking({ cioClient, itemId, itemName, variationId, threadId, }) {
+    const tracker = cioClient?.tracker;
+    const baseParams = useMemo(() => ({
+        itemId,
+        itemName,
+        ...(variationId && { variationId }),
+        ...(threadId && { threadId }),
+    }), [itemId, itemName, variationId, threadId]);
+    const mapQuestions = useCallback((questions) => questions.map((q) => ({ question: q.value })), []);
+    const trackViews = useCallback((questions, viewTimespans) => {
+        tracker?.trackProductInsightsAgentViews({
+            ...baseParams,
+            questions: mapQuestions(questions),
+            viewTimespans,
+        });
+    }, [tracker, baseParams, mapQuestions]);
+    const trackView = useCallback((questions) => {
+        tracker?.trackProductInsightsAgentView({
+            ...baseParams,
+            questions: mapQuestions(questions),
+        });
+    }, [tracker, baseParams, mapQuestions]);
+    const trackOutOfView = useCallback(() => {
+        tracker?.trackProductInsightsAgentOutOfView(baseParams);
+    }, [tracker, baseParams]);
+    const trackFocus = useCallback(() => {
+        tracker?.trackProductInsightsAgentFocus(baseParams);
+    }, [tracker, baseParams]);
+    const trackQuestionClick = useCallback((question) => {
+        tracker?.trackProductInsightsAgentQuestionClick({
+            ...baseParams,
+            question,
+        });
+    }, [tracker, baseParams]);
+    const trackQuestionSubmit = useCallback((question) => {
+        tracker?.trackProductInsightsAgentQuestionSubmit({
+            ...baseParams,
+            question,
+        });
+    }, [tracker, baseParams]);
+    const trackAnswerView = useCallback((question, answerData, items) => {
+        tracker?.trackProductInsightsAgentAnswerView({
+            ...baseParams,
+            question,
+            answerText: answerData.value,
+            qnaResultId: answerData.qna_result_id,
+            ...(items &&
+                items.length > 0 && {
+                items: items.map((item) => ({
+                    itemId: item.id,
+                    itemName: item.name,
+                })),
+            }),
+            ...(answerData.follow_up_questions &&
+                answerData.follow_up_questions.length > 0 && {
+                followUpQuestions: answerData.follow_up_questions.map((q) => ({
+                    value: q.value,
+                })),
+            }),
+        });
+    }, [tracker, baseParams]);
+    const trackAnswerFeedback = useCallback((feedbackType, qnaResultId) => {
+        const feedbackLabel = feedbackType === FeedbackType.UP ? 'thumbs_up' : 'thumbs_down';
+        tracker?.trackProductInsightsAgentAnswerFeedback({
+            ...baseParams,
+            feedbackLabel,
+            ...(qnaResultId && { qnaResultId }),
+        });
+    }, [tracker, baseParams]);
+    const trackResultClick = useCallback((clickedItem, position, question, qnaResultId) => {
+        tracker?.trackProductInsightsAgentResultClick({
+            itemId: clickedItem.id,
+            itemName: clickedItem.name,
+            ...(clickedItem.variationId && { variationId: clickedItem.variationId }),
+            question,
+            seedItemId: itemId,
+            seedItemName: itemName,
+            ...(variationId && { seedVariationId: variationId }),
+            ...(qnaResultId && { qnaResultId }),
+            ...(threadId && { threadId }),
+            position,
+        });
+    }, [tracker, itemId, itemName, variationId, threadId]);
+    return useMemo(() => ({
+        trackViews,
+        trackView,
+        trackOutOfView,
+        trackFocus,
+        trackQuestionClick,
+        trackQuestionSubmit,
+        trackAnswerView,
+        trackAnswerFeedback,
+        trackResultClick,
+    }), [
+        trackViews,
+        trackView,
+        trackOutOfView,
+        trackFocus,
+        trackQuestionClick,
+        trackQuestionSubmit,
+        trackAnswerView,
+        trackAnswerFeedback,
+        trackResultClick,
+    ]);
+}

package/lib/mjs/hooks/useViewportTracking.js

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useRef } from 'react';
+const FLUSH_INTERVAL_MS = 5 * 60 * 1000;
+export default function useViewportTracking({ tracking, questions, }) {
+    const nodeRef = useRef(null);
+    const observerRef = useRef(null);
+    const intervalRef = useRef(null);
+    const timespansRef = useRef([]);
+    const entryTimeRef = useRef(null);
+    const questionsRef = useRef(questions);
+    const trackingRef = useRef(tracking);
+    useEffect(() => {
+        const questionsJustArrived = questionsRef.current.length === 0 && questions.length > 0;
+        questionsRef.current = questions;
+        if (questionsJustArrived && entryTimeRef.current) {
+            trackingRef.current.trackView(questions);
+        }
+    }, [questions]);
+    useEffect(() => {
+        trackingRef.current = tracking;
+    }, [tracking]);
+    // Stable: only reads refs
+    const flush = useCallback(() => {
+        if (entryTimeRef.current) {
+            timespansRef.current.push({
+                start: entryTimeRef.current,
+                end: new Date().toISOString(),
+            });
+            entryTimeRef.current = null;
+        }
+        if (timespansRef.current.length > 0 && questionsRef.current.length > 0) {
+            trackingRef.current.trackViews(questionsRef.current, [...timespansRef.current]);
+            timespansRef.current = [];
+        }
+    }, []);
+    const setupObserver = useCallback((element) => {
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                entryTimeRef.current = new Date().toISOString();
+                if (questionsRef.current.length > 0) {
+                    trackingRef.current.trackView(questionsRef.current);
+                }
+            }
+            else if (entryTimeRef.current) {
+                timespansRef.current.push({
+                    start: entryTimeRef.current,
+                    end: new Date().toISOString(),
+                });
+                entryTimeRef.current = null;
+                trackingRef.current.trackOutOfView();
+            }
+        }, { threshold: 0.5 });
+        observer.observe(element);
+        observerRef.current = observer;
+        intervalRef.current = setInterval(flush, FLUSH_INTERVAL_MS);
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'hidden') {
+                flush();
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            observer.disconnect();
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            flush();
+        };
+    }, [flush]);
+    const cleanupRef = useRef(null);
+    const containerRef = useCallback((node) => {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+        nodeRef.current = node;
+        if (node) {
+            cleanupRef.current = setupObserver(node);
+        }
+    }, [setupObserver]);
+    useEffect(() => {
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, []);
+    return { containerRef };
+}

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.8.0';
+export default '2.10.0';

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { IncludeComponentOverrides, IncludeRenderProps } from '@constructor-io/constructorio-ui-components';
 import MockConstructorIOClient from '../../hooks/mocks/MockConstructorIOClient';
-import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters, Formatters } from '../../types';
+import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters, Formatters, ProductCardDisplayProps } from '../../types';
 export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, IncludeComponentOverrides<CioPiaComponentOverrides> {
     /** Your Constructor.io API key. */
     apiKey: string;
     /** The product item ID to fetch insights for. */
     itemId: string;
+    /** The product display name, sent with tracking events. */
+    itemName: string;
     /** Thread ID for conversation context. Must be a valid UUID (e.g., "550e8400-e29b-41d4-a716-446655440000"). */
     threadId?: string;
     /** Optional variation ID for the product. */
@@ -21,6 +23,8 @@ export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, Incl
     componentOverrides?: CioPiaComponentOverrides;
     /** Formatter functions for transforming data before display. */
     formatters?: Formatters;
+    /** Props forwarded to the ProductCard rendered inside the carousel. */
+    productCardProps?: ProductCardDisplayProps;
     /** UI string translations for internationalization. */
     translations?: Translations;
     /** Parameters for the suggested questions request. */

package/lib/types/components/CioPia/PiaCustomCarousel.d.ts

@@ -5,6 +5,10 @@ interface PiaCustomCarouselProps {
     items: Array<Item>;
     componentOverrides?: CarouselOverrides<Item>;
     callbacks?: Callbacks;
+    onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
+    question?: string;
+    qnaResultId?: string;
+    priceCurrency?: string;
 }
-export default function PiaCustomCarousel({ items, componentOverrides, callbacks, }: PiaCustomCarouselProps): React.JSX.Element | null;
+export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, priceCurrency, }: PiaCustomCarouselProps): React.JSX.Element | null;
 export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConversationEntry, Translations, Item, Callbacks, CioPiaComponentOverrides, DisclaimerPosition } from '../../types';
+import { ConversationEntry, FeedbackType, Translations, Item, Callbacks, CioPiaComponentOverrides, DisclaimerPosition } from '../../types';
 export interface ConversationHistoryProps {
     conversationHistory: ConversationEntry[];
     isLoading: boolean;
@@ -22,5 +22,9 @@ export interface ConversationHistoryProps {
     translations?: Translations;
     callbacks?: Callbacks;
     componentOverrides?: CioPiaComponentOverrides;
+    handleFeedback?: (type: FeedbackType) => void;
+    onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
+    qnaResultId?: string;
+    priceCurrency?: string;
 }
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, }: ConversationHistoryProps): React.JSX.Element;
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }: ConversationHistoryProps): React.JSX.Element;

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

@@ -1,11 +1,14 @@
 import React from 'react';
-import { Question } from '../../types';
+import { FeedbackType, Item, Question } from '../../types';
 import { ConversationHistoryProps } from '../ConversationHistory/ConversationHistory';
 export interface PiaConversationProps extends ConversationHistoryProps {
     displayedQuestions: Question[];
     handleSubmitQuestion: (question: string) => void;
     handleQuestionClick: (question: string) => void;
     containerRef?: (node: HTMLDivElement | null) => void;
+    handleFeedback?: (type: FeedbackType) => void;
+    onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
+    qnaResultId?: string;
     onInputFocus?: () => void;
 }
-export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, onInputFocus, }: PiaConversationProps): React.JSX.Element;
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, }: PiaConversationProps): React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Callbacks, CioPiaComponentOverrides, DisclaimerPosition, Translations, Item } from '../../types';
+import { Callbacks, CioPiaComponentOverrides, DisclaimerPosition, FeedbackType, Translations, Item } from '../../types';
 interface PiaInlineAnswerProps {
     currentAnswer: string;
     currentItems: Item[] | null;
@@ -9,6 +9,11 @@ interface PiaInlineAnswerProps {
     translations?: Translations;
     callbacks?: Callbacks;
     componentOverrides?: CioPiaComponentOverrides;
+    onFeedback?: (type: FeedbackType) => void;
+    onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
+    question?: string;
+    qnaResultId?: string;
+    priceCurrency?: string;
 }
-export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, }: PiaInlineAnswerProps): React.JSX.Element;
+export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, onFeedback, onResultClick, question, qnaResultId, priceCurrency, }: PiaInlineAnswerProps): React.JSX.Element;
 export {};

package/lib/types/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const DEMO_API_KEY = "key_13TO6qN9H3BP3Wrn";
 export declare const DEMO_ITEM_ID = "149100215";
+export declare const DEMO_ITEM_NAME = "Ensure Original Nutrition Shake";
 export declare const DEMO_QUESTION = "What is the nutritional content of this shake?";
 export declare const DEMO_QUESTION_ALTERNATIVE_PRODUCTS = "What alternative products are available for this item?";
 export declare const MOCK_QUESTIONS: {

package/lib/types/hooks/useCioClient.d.ts

@@ -1,13 +1,9 @@
-import { ConstructorClientOptions, Nullable } from '@constructor-io/constructorio-client-javascript';
-import MockConstructorIOClient from './mocks/MockConstructorIOClient';
-/**
- * Uses MockConstructorIOClient for now, to be replaced with the actual Client JS object
- */
+import ConstructorIOClient, { ConstructorClientOptions, Nullable } from '@constructor-io/constructorio-client-javascript';
 export type UseCioClientProps = {
     apiKey?: string;
-    cioClient?: Nullable<MockConstructorIOClient>;
+    cioClient?: Nullable<ConstructorIOClient>;
     options?: Omit<ConstructorClientOptions, 'apiKey' | 'sendTrackingEvents' | 'version'>;
 };
-type UseCioClient = (props: UseCioClientProps) => Nullable<MockConstructorIOClient> | never;
+type UseCioClient = (props: UseCioClientProps) => Nullable<ConstructorIOClient> | never;
 declare const useCioClient: UseCioClient;
 export default useCioClient;

package/lib/types/hooks/useCioPia.d.ts

@@ -1,3 +1,4 @@
+import { Tracker } from '@constructor-io/constructorio-client-javascript/lib/types/constructorio';
 import { Formatters, SuggestedQuestionsParameters } from '../types';
 import MockConstructorIOClient from './mocks/MockConstructorIOClient';
 import { UseAnswerResultsReturn } from './useAnswerResults';
@@ -13,6 +14,9 @@ export interface UseCioPiaProps {
     formatImageUrl?: Formatters['formatImageUrl'];
 }
 export interface UseCioPiaReturn {
+    cioClient: {
+        tracker: Tracker;
+    };
     threadId: string;
     suggestedQuestions: UseSuggestedQuestionsReturn;
     answers: UseAnswerResultsReturn;