@constructor-io/constructorio-ui-pia 2.4.0 → 2.6.3

package/lib/cjs/components/CioPia/CioPia.js

@@ -7,6 +7,7 @@ const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const useCioPia_1 = tslib_1.__importDefault(require("../../hooks/useCioPia"));
 const useConversation_1 = tslib_1.__importDefault(require("../../hooks/useConversation"));
+const useViewportCallbacks_1 = tslib_1.__importDefault(require("../../hooks/useViewportCallbacks"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
 const translate_1 = require("../../utils/translate");
@@ -26,7 +27,8 @@ function CioPia(props) {
         suggestedQuestionsParameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation, callbacks });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation, callbacks });
+    const { containerRef } = (0, useViewportCallbacks_1.default)({ callbacks, context });
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -51,22 +53,25 @@ function CioPia(props) {
         componentOverrides,
         displayedQuestions,
         handleSubmitQuestion,
+        handleQuestionClick,
+        containerRef,
+        onInputFocus: handleInputFocus,
     };
     if (type === 'modal') {
-        return (react_1.default.createElement(PiaModal_1.default, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onClose: resetState },
+        return (react_1.default.createElement(PiaModal_1.default, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, handleQuestionClick: handleQuestionClick, containerRef: containerRef, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onInputFocus: handleInputFocus, onClose: resetState },
             react_1.default.createElement(PiaConversation_1.default, Object.assign({}, conversationHistoryProps))));
     }
     if (isConversation)
         return react_1.default.createElement(PiaConversation_1.default, Object.assign({}, conversationHistoryProps));
     // Default inline mode
-    return (react_1.default.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+    return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: renderProps, override: children || (componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode) },
             react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations)),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, value: currentQuestion, translations: translations }),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
             isLoading && react_1.default.createElement(LoadingSkeleton_1.default, null),
             !isLoading && error && react_1.default.createElement(ErrorBlock_1.default, { message: (error === null || error === void 0 ? void 0 : error.message) || 'Unexpected error' }),
             !isLoading && !error && (react_1.default.createElement(react_1.default.Fragment, null,
                 currentAnswer && (react_1.default.createElement(PiaInlineAnswer_1.default, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides })),
-                react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))))));
+                react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))))));
 }
 exports.default = CioPia;

package/lib/cjs/components/Input/Input.js

@@ -8,7 +8,7 @@ function SendIcon() {
         react_1.default.createElement("g", { id: '.icon-send' },
             react_1.default.createElement("path", { id: 'Vector', d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' }))));
 }
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, translations, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, }) {
     const [value, setValue] = (0, react_1.useState)(providedValue || '');
     (0, react_1.useEffect)(() => {
         if (providedValue) {
@@ -32,7 +32,7 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
         ? (0, translate_1.translate)('Ask anything', translations)
         : (placeholder !== null && placeholder !== void 0 ? placeholder : (0, translate_1.translate)('Ask anything'));
     return (react_1.default.createElement("div", { className: 'cio-pia-input-container' },
-        react_1.default.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
+        react_1.default.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
         react_1.default.createElement("button", { type: 'button', onClick: handleSubmit, className: 'cio-pia-send-button', disabled: disabled },
             (0, translate_1.translate)('Send', translations),
             react_1.default.createElement(SendIcon, null))));

package/lib/cjs/components/PiaConversation/PiaConversation.js

@@ -7,14 +7,14 @@ const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../Sugges
 const SuggestedQuestionsSkeleton_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton"));
 const translate_1 = require("../../utils/translate");
 const ConversationHistory_1 = tslib_1.__importDefault(require("../ConversationHistory/ConversationHistory"));
-function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, onInputFocus, }) {
     const hasHistory = conversationHistory.length > 0;
-    return (react_1.default.createElement("div", { className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
+    return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations))),
         react_1.default.createElement(ConversationHistory_1.default, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides }),
         react_1.default.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
-            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, disabled: isLoading, translations: translations }))));
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations }))));
 }
 exports.default = PiaConversation;

package/lib/cjs/components/PiaConversation/PiaModal.js

@@ -10,7 +10,7 @@ function CloseIcon() {
     return (react_1.default.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
         react_1.default.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
 }
-function PiaModal({ initialQuestions, handleSubmitQuestion, isLoading, componentOverrides, translations, onClose, children, }) {
+function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, isLoading, componentOverrides, translations, onInputFocus, onClose, children, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const dialogRef = (0, react_1.useRef)(null);
     const openModal = (0, react_1.useCallback)(() => {
@@ -59,11 +59,15 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, isLoading, component
         handleSubmitQuestion(question);
         openModal();
     }, [handleSubmitQuestion, openModal]);
-    return (react_1.default.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+    const handleQuestionClicked = (0, react_1.useCallback)((question) => {
+        handleQuestionClick(question);
+        openModal();
+    }, [handleQuestionClick, openModal]);
+    return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations)),
         react_1.default.createElement("div", { className: 'cio-pia-conversation-footer' },
-            initialQuestions.length > 0 && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: initialQuestions, onQuestionClick: handleQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, disabled: isLoading || isOpen, translations: translations })),
+            initialQuestions.length > 0 && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: initialQuestions, onQuestionClick: handleQuestionClicked, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations })),
         react_1.default.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
             react_1.default.createElement("div", { className: 'cio-pia-modal-content' },
                 react_1.default.createElement("div", { className: 'cio-pia-modal-header' },

package/lib/cjs/hooks/useAnswerResults.js

@@ -28,9 +28,9 @@ const fetchAnswerResults = ({ client, itemId, question, variationId, threadId, }
 });
 function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = (0, react_1.useState)(null);
-    const [items, setItems] = (0, react_1.useState)(null);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const items = (0, react_1.useMemo)(() => extractAndTransformItems(answerResults, formatImageUrl), [answerResults, formatImageUrl]);
     const fetchResult = (0, react_1.useCallback)((question) => {
         if (!cioClient)
             return;
@@ -39,18 +39,16 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImag
         fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);
-            setItems(extractAndTransformItems(fetchedAnswerResults, formatImageUrl));
             setError(null);
         })
             .catch((err) => {
             setError(err instanceof Error ? err : new Error('Error fetching answer'));
             setAnswerResults(null);
-            setItems(null);
         })
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId, formatImageUrl]);
+    }, [cioClient, itemId, variationId, threadId]);
     return {
         data: answerResults,
         items,

package/lib/cjs/hooks/useCioPia.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const react_1 = require("react");
 const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults"));
 const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
 function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = props;
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = props;
+    const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
+    const threadId = providedThreadId || generatedThreadId;
     const defaultClient = (0, useCioClient_1.default)({ apiKey });
     const client = providedClient || defaultClient;
     const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
@@ -23,6 +26,7 @@ function useCioPia(props) {
         formatImageUrl,
     });
     return {
+        threadId,
         suggestedQuestions,
         answers,
     };

package/lib/cjs/hooks/useConversation.js

@@ -3,24 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useConversation({ pia, itemId, isConversation, callbacks, }) {
     var _a, _b, _c, _d;
-    const { suggestedQuestions, answers } = pia;
+    const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
+    const context = (0, react_1.useMemo)(() => ({ itemId, threadId }), [itemId, threadId]);
     const [currentQuestion, setCurrentQuestion] = (0, react_1.useState)('');
     const [displayedQuestions, setDisplayedQuestions] = (0, react_1.useState)([]);
     const [conversationHistory, setConversationHistory] = (0, react_1.useState)([]);
     const entryIdRef = (0, react_1.useRef)(0);
     const prevAnswerValueRef = (0, react_1.useRef)((_a = answers.data) === null || _a === void 0 ? void 0 : _a.value);
-    const handleSubmitQuestion = (0, react_1.useCallback)((question) => {
-        var _a;
-        (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuestionSubmit) === null || _a === void 0 ? void 0 : _a.call(callbacks, question);
+    const callbacksRef = (0, react_1.useRef)(callbacks);
+    const contextRef = (0, react_1.useRef)(context);
+    const lastQuestionRef = (0, react_1.useRef)('');
+    const lastSourceRef = (0, react_1.useRef)('user');
+    (0, react_1.useEffect)(() => {
+        callbacksRef.current = callbacks;
+    }, [callbacks]);
+    (0, react_1.useEffect)(() => {
+        contextRef.current = context;
+    }, [context]);
+    const submitQuestion = (0, react_1.useCallback)((question, source) => {
+        lastSourceRef.current = source;
+        lastQuestionRef.current = question;
         setCurrentQuestion(question);
         getAnswer(question);
         if (isConversation) {
             entryIdRef.current += 1;
             const id = entryIdRef.current;
-            setConversationHistory((prev) => [...prev, { id, question, answer: '' }]);
+            setConversationHistory((prev) => [...prev, { id, question, answer: '', source }]);
         }
-    }, [getAnswer, isConversation, callbacks]);
+    }, [getAnswer, isConversation]);
+    const handleSubmitQuestion = (0, react_1.useCallback)((question) => {
+        var _a, _b;
+        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onQuestionSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, question, contextRef.current, 'user');
+        submitQuestion(question, 'user');
+    }, [submitQuestion]);
+    const handleQuestionClick = (0, react_1.useCallback)((question) => {
+        var _a, _b;
+        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onQuestionSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, question, contextRef.current, 'suggestion');
+        submitQuestion(question, 'suggestion');
+    }, [submitQuestion]);
+    const handleInputFocus = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, contextRef.current);
+    }, []);
     const resetState = (0, react_1.useCallback)(() => {
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
@@ -42,20 +67,38 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
             setDisplayedQuestions(answers.data.follow_up_questions);
     }, [answers.data]);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         const answerValue = (_b = (_a = answers.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
-        if (!isConversation || !answerValue)
+        if (!answerValue)
             return;
         if (answerValue === prevAnswerValueRef.current)
             return;
         prevAnswerValueRef.current = answerValue;
-        setConversationHistory((prev) => {
-            if (prev.length === 0)
-                return prev;
-            const updated = [...prev];
-            updated[updated.length - 1] = Object.assign(Object.assign({}, updated[updated.length - 1]), { answer: answerValue, items: answers.items });
-            return updated;
-        });
+        const answerThreadId = (_c = answers.data) === null || _c === void 0 ? void 0 : _c.thread_id;
+        const qnaResultId = (_d = answers.data) === null || _d === void 0 ? void 0 : _d.qna_result_id;
+        if (isConversation) {
+            setConversationHistory((prev) => {
+                var _a, _b;
+                if (prev.length === 0)
+                    return prev;
+                const updated = [...prev];
+                updated[updated.length - 1] = Object.assign(Object.assign({}, updated[updated.length - 1]), { answer: answerValue, items: answers.items, threadId: answerThreadId, qnaResultId });
+                (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onAnswer) === null || _b === void 0 ? void 0 : _b.call(_a, updated, contextRef.current);
+                return updated;
+            });
+        }
+        else {
+            const entry = {
+                id: entryIdRef.current,
+                question: lastQuestionRef.current,
+                answer: answerValue,
+                source: lastSourceRef.current,
+                items: answers.items,
+                threadId: answerThreadId,
+                qnaResultId,
+            };
+            (_f = (_e = callbacksRef.current) === null || _e === void 0 ? void 0 : _e.onAnswer) === null || _f === void 0 ? void 0 : _f.call(_e, [entry], contextRef.current);
+        }
     }, [isConversation, answers.data, answers.items]);
     const currentAnswer = (_c = (_b = answers.data) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '';
     const currentItems = (_d = answers.items) !== null && _d !== void 0 ? _d : null;
@@ -69,7 +112,10 @@ function useConversation({ pia, itemId, isConversation, callbacks, }) {
         currentItems,
         isLoading,
         error,
+        context,
         handleSubmitQuestion,
+        handleQuestionClick,
+        handleInputFocus,
         resetState,
     };
 }

package/lib/cjs/hooks/useViewportCallbacks.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useViewportCallbacks({ callbacks, context, }) {
+    const callbacksRef = (0, react_1.useRef)(callbacks);
+    const contextRef = (0, react_1.useRef)(context);
+    const hasBeenVisibleRef = (0, react_1.useRef)(false);
+    const hasFiredOutOfViewRef = (0, react_1.useRef)(false);
+    const observerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        callbacksRef.current = callbacks;
+    }, [callbacks]);
+    (0, react_1.useEffect)(() => {
+        contextRef.current = context;
+    }, [context]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, []);
+    const containerRef = (0, react_1.useCallback)((node) => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (!node)
+            return;
+        hasBeenVisibleRef.current = false;
+        hasFiredOutOfViewRef.current = false;
+        const observer = new IntersectionObserver(([entry]) => {
+            var _a, _b, _c, _d;
+            if (entry.isIntersecting && !hasBeenVisibleRef.current) {
+                hasBeenVisibleRef.current = true;
+                (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onView) === null || _b === void 0 ? void 0 : _b.call(_a, contextRef.current);
+            }
+            else if (!entry.isIntersecting &&
+                hasBeenVisibleRef.current &&
+                !hasFiredOutOfViewRef.current) {
+                hasFiredOutOfViewRef.current = true;
+                (_d = (_c = callbacksRef.current) === null || _c === void 0 ? void 0 : _c.onOutOfView) === null || _d === void 0 ? void 0 : _d.call(_c, contextRef.current);
+                observer.disconnect();
+            }
+        }, { threshold: 0.5 });
+        observer.observe(node);
+        observerRef.current = observer;
+    }, []);
+    return { containerRef };
+}
+exports.default = useViewportCallbacks;

package/lib/cjs/stories/assets/storybook-styles.css

@@ -110,3 +110,92 @@ div.badge-wrapper code {
   background: #d8e8fd;
   color: #3c70bf;
 }
+
+.cio-flow-diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 24px 0 0;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+}
+
+.cio-flow-diagram .flow-step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.cio-flow-diagram .flow-box {
+  padding: 10px 16px;
+  border-radius: 8px;
+  min-width: 220px;
+  text-align: center;
+}
+
+.cio-flow-diagram .flow-box--consumer {
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+}
+
+.cio-flow-diagram .flow-box--internal {
+  background: #f5f3ff;
+  border: 1px solid #ddd6fe;
+}
+
+.cio-flow-diagram .flow-box--output {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+}
+
+.cio-flow-diagram .flow-arrow {
+  margin-left: 110px;
+  color: #9ca3af;
+}
+
+.cio-flow-diagram .flow-label {
+  font-size: 12px;
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.cio-flow-diagram .flow-callback {
+  font-size: 12px;
+  color: #059669;
+}
+
+.cio-flow-diagram .flow-box-subtitle {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.cio-flow-legend {
+  display: flex;
+  gap: 16px;
+  margin: 32px 0 16px;
+  font-size: 12px;
+}
+
+.cio-flow-legend .legend-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.cio-flow-legend .legend-swatch--consumer {
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+}
+
+.cio-flow-legend .legend-swatch--internal {
+  background: #f5f3ff;
+  border: 1px solid #ddd6fe;
+}
+
+.cio-flow-legend .legend-swatch--output {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+}

package/lib/cjs/utils/contentTransformers.js

@@ -13,10 +13,16 @@ function sanitizeHtml(html) {
     return dompurify_1.default.sanitize(html, purifyConfig);
 }
 exports.sanitizeHtml = sanitizeHtml;
-function renderMarkdown(content) {
+function renderMarkdown(content, options) {
+    var _a;
     if (!content)
         return '';
-    const html = marked_1.marked.parse(content, { async: false });
+    const html = marked_1.marked.parse(content, { async: false, breaks: true });
+    if (options === null || options === void 0 ? void 0 : options.sanitize) {
+        const purifier = (0, dompurify_1.default)(window);
+        const config = Object.assign(Object.assign({}, purifyConfig), { FORBID_TAGS: [...((_a = purifyConfig.FORBID_TAGS) !== null && _a !== void 0 ? _a : [])] });
+        return options.sanitize(purifier, html, { config });
+    }
     return dompurify_1.default.sanitize(html, purifyConfig);
 }
 exports.renderMarkdown = renderMarkdown;

package/lib/cjs/version.js

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

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

@@ -4,6 +4,7 @@ import Input from '../Input/Input';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 import useCioPia from '../../hooks/useCioPia';
 import useConversation from '../../hooks/useConversation';
+import useViewportCallbacks from '../../hooks/useViewportCallbacks';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import { translate } from '../../utils/translate';
@@ -23,7 +24,8 @@ export default function CioPia(props) {
         suggestedQuestionsParameters,
         formatImageUrl: formatters?.formatImageUrl,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = useConversation({ pia, itemId, isConversation, callbacks });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, context, handleSubmitQuestion, handleQuestionClick, handleInputFocus, resetState, } = useConversation({ pia, itemId, isConversation, callbacks });
+    const { containerRef } = useViewportCallbacks({ callbacks, context });
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -48,21 +50,24 @@ export default function CioPia(props) {
         componentOverrides,
         displayedQuestions,
         handleSubmitQuestion,
+        handleQuestionClick,
+        containerRef,
+        onInputFocus: handleInputFocus,
     };
     if (type === 'modal') {
-        return (React.createElement(PiaModal, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onClose: resetState },
+        return (React.createElement(PiaModal, { initialQuestions: pia.suggestedQuestions.data, handleSubmitQuestion: handleSubmitQuestion, handleQuestionClick: handleQuestionClick, containerRef: containerRef, isLoading: isLoading, componentOverrides: componentOverrides, translations: translations, onInputFocus: handleInputFocus, onClose: resetState },
             React.createElement(PiaConversation, { ...conversationHistoryProps })));
     }
     if (isConversation)
         return React.createElement(PiaConversation, { ...conversationHistoryProps });
     // Default inline mode
-    return (React.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+    return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
             React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, value: currentQuestion, translations: translations }),
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
             isLoading && React.createElement(LoadingSkeleton, null),
             !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
             !isLoading && !error && (React.createElement(React.Fragment, null,
                 currentAnswer && (React.createElement(PiaInlineAnswer, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides })),
-                React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides?.suggestedQuestions }))))));
+                React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions }))))));
 }

package/lib/mjs/components/Input/Input.js

@@ -5,7 +5,7 @@ function SendIcon() {
         React.createElement("g", { id: '.icon-send' },
             React.createElement("path", { id: 'Vector', d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' }))));
 }
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, translations, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, }) {
     const [value, setValue] = useState(providedValue || '');
     useEffect(() => {
         if (providedValue) {
@@ -29,7 +29,7 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
         ? translate('Ask anything', translations)
         : (placeholder ?? translate('Ask anything'));
     return (React.createElement("div", { className: 'cio-pia-input-container' },
-        React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
+        React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
         React.createElement("button", { type: 'button', onClick: handleSubmit, className: 'cio-pia-send-button', disabled: disabled },
             translate('Send', translations),
             React.createElement(SendIcon, null))));

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

@@ -4,13 +4,13 @@ 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, }) {
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, onInputFocus, }) {
     const hasHistory = conversationHistory.length > 0;
-    return (React.createElement("div", { className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
+    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("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
-            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, disabled: isLoading, translations: translations }))));
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations }))));
 }

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

@@ -7,7 +7,7 @@ function CloseIcon() {
     return (React.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
         React.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
 }
-export default function PiaModal({ initialQuestions, handleSubmitQuestion, isLoading, componentOverrides, translations, onClose, children, }) {
+export default function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, isLoading, componentOverrides, translations, onInputFocus, onClose, children, }) {
     const [isOpen, setIsOpen] = useState(false);
     const dialogRef = useRef(null);
     const openModal = useCallback(() => {
@@ -56,11 +56,15 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, isLoa
         handleSubmitQuestion(question);
         openModal();
     }, [handleSubmitQuestion, openModal]);
-    return (React.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
+    const handleQuestionClicked = useCallback((question) => {
+        handleQuestionClick(question);
+        openModal();
+    }, [handleQuestionClick, openModal]);
+    return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
-            initialQuestions.length > 0 && (React.createElement(SuggestedQuestionsContainer, { questions: initialQuestions, onQuestionClick: handleQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleQuestion, disabled: isLoading || isOpen, translations: translations })),
+            initialQuestions.length > 0 && (React.createElement(SuggestedQuestionsContainer, { questions: initialQuestions, onQuestionClick: handleQuestionClicked, componentOverride: componentOverrides?.suggestedQuestions })),
+            React.createElement(Input, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations })),
         React.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
             React.createElement("div", { className: 'cio-pia-modal-content' },
                 React.createElement("div", { className: 'cio-pia-modal-header' },

package/lib/mjs/hooks/useAnswerResults.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { transformResultItem } from '../utils/transformers';
 const extractAndTransformItems = (data, formatImageUrl) => {
     if (!data?.item_results?.response?.results) {
@@ -24,9 +24,9 @@ const fetchAnswerResults = async ({ client, itemId, question, variationId, threa
 };
 export default function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = useState(null);
-    const [items, setItems] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
+    const items = useMemo(() => extractAndTransformItems(answerResults, formatImageUrl), [answerResults, formatImageUrl]);
     const fetchResult = useCallback((question) => {
         if (!cioClient)
             return;
@@ -35,18 +35,16 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
         fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);
-            setItems(extractAndTransformItems(fetchedAnswerResults, formatImageUrl));
             setError(null);
         })
             .catch((err) => {
             setError(err instanceof Error ? err : new Error('Error fetching answer'));
             setAnswerResults(null);
-            setItems(null);
         })
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId, formatImageUrl]);
+    }, [cioClient, itemId, variationId, threadId]);
     return {
         data: answerResults,
         items,