@constructor-io/constructorio-ui-pia 2.7.0 → 2.9.0

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, }) {
     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 })),
+                    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, }) {
     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 }),
         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, }) {
     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 })),
+        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/mocks/MockConstructorIOClient.js

@@ -28,8 +28,11 @@ class MockConstructorIOClient {
         this.recommendations = cioClient.recommendations;
         this.tracker = cioClient.tracker;
         this.quizzes = cioClient.quizzes;
-        // Use the mock agent instead of the one from the client
-        this.agent = new MockAgent(this.options);
+        this.agent = new MockAgent({
+            ...this.options,
+            clientId: options.clientId,
+            sessionId: options.sessionId,
+        });
     }
 }
 export default MockConstructorIOClient;

package/lib/mjs/hooks/mocks/agent.js

@@ -1,6 +1,6 @@
 // Create URL for PIA API
 function createAgentUrl({ itemId, threadId, variationId, question, isStreaming = false, options, parameters = {}, }) {
-    const { apiKey, agentServiceUrl } = options;
+    const { apiKey, agentServiceUrl, clientId, sessionId, userId, segments, version } = options;
     if (!agentServiceUrl)
         throw new Error('Agent service URL is required');
     let baseUrl = `${agentServiceUrl}/v1/item_questions`;
@@ -19,6 +19,21 @@ function createAgentUrl({ itemId, threadId, variationId, question, isStreaming =
     if (variationId) {
         url.searchParams.append('variation_id', variationId);
     }
+    if (clientId) {
+        url.searchParams.append('i', clientId);
+    }
+    if (sessionId != null) {
+        url.searchParams.append('s', String(sessionId));
+    }
+    if (userId) {
+        url.searchParams.append('ui', userId);
+    }
+    if (version) {
+        url.searchParams.append('c', version);
+    }
+    if (segments?.length) {
+        segments.forEach((segment) => url.searchParams.append('us', segment));
+    }
     // Any additional parameters
     Object.entries(parameters).forEach(([key, value]) => {
         if (value !== undefined) {

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.7.0';
+export default '2.9.0';

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

@@ -7,6 +7,8 @@ export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, Incl
     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. */

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

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

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

@@ -1,10 +1,12 @@
-import { Callbacks, ConversationEntry, PiaCallbackContext, Question, Item } from '../types';
+import { Callbacks, ConversationEntry, FeedbackType, PiaCallbackContext, Question, Item } from '../types';
 import { UseCioPiaReturn } from './useCioPia';
+import { UseTrackingReturn } from './useTracking';
 export interface UseConversationProps {
     pia: UseCioPiaReturn;
     itemId: string;
     isConversation: boolean;
     callbacks?: Callbacks;
+    tracking?: UseTrackingReturn;
 }
 export interface UseConversationReturn {
     currentQuestion: string;
@@ -18,6 +20,7 @@ export interface UseConversationReturn {
     handleSubmitQuestion: (question: string) => void;
     handleQuestionClick: (question: string) => void;
     handleInputFocus: () => void;
+    handleFeedback: (type: FeedbackType) => void;
     resetState: () => void;
 }
-export default function useConversation({ pia, itemId, isConversation, callbacks, }: UseConversationProps): UseConversationReturn;
+export default function useConversation({ pia, itemId, isConversation, callbacks, tracking, }: UseConversationProps): UseConversationReturn;

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

@@ -0,0 +1,27 @@
+import { Tracker } from '@constructor-io/constructorio-client-javascript/lib/types/constructorio';
+import { FeedbackType, Item, Question, GetAnswerResultsResponse } from '../types';
+export interface TimeSpan {
+    start: string;
+    end: string;
+}
+export interface UseTrackingProps {
+    cioClient?: {
+        tracker: Tracker;
+    };
+    itemId: string;
+    itemName: string;
+    variationId?: string;
+    threadId?: string;
+}
+export interface UseTrackingReturn {
+    trackViews: (questions: Question[], viewTimespans: TimeSpan[]) => void;
+    trackView: (questions: Question[]) => void;
+    trackOutOfView: () => void;
+    trackFocus: () => void;
+    trackQuestionClick: (question: string) => void;
+    trackQuestionSubmit: (question: string) => void;
+    trackAnswerView: (question: string, answerData: GetAnswerResultsResponse, items?: Item[] | null) => void;
+    trackAnswerFeedback: (feedbackType: FeedbackType, qnaResultId?: string) => void;
+    trackResultClick: (clickedItem: Item, position: number, question: string, qnaResultId?: string) => void;
+}
+export default function useTracking({ cioClient, itemId, itemName, variationId, threadId, }: UseTrackingProps): UseTrackingReturn;

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

@@ -0,0 +1,10 @@
+import { Question } from '../types';
+import { UseTrackingReturn } from './useTracking';
+export interface UseViewportTrackingProps {
+    tracking: UseTrackingReturn;
+    questions: Question[];
+}
+export interface UseViewportTrackingReturn {
+    containerRef: (node: HTMLDivElement | null) => void;
+}
+export default function useViewportTracking({ tracking, questions, }: UseViewportTrackingProps): UseViewportTrackingReturn;

package/lib/types/utils/transformers.d.ts

@@ -1,5 +1,5 @@
 import { Nullable } from '@constructor-io/constructorio-client-javascript';
-import { Formatters, Item, ApiItem } from '../types';
+import { ApiItem, Formatters, Item } from '../types';
 /**
  * Converts a raw ApiItem from the Get Answers API response into an Item object
  * that can be used in the Carousel component.

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.7.0";
+declare const _default: "2.9.0";
 export default _default;