@constructor-io/constructorio-ui-pia 2.3.0 → 2.6.2

package/lib/cjs/components/Answer/Answer.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const contentTransformers_1 = require("../../utils/contentTransformers");
 function Answer({ text, componentOverride }) {
     if (!text) {
         return null;
     }
     return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { text }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
-        react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text)));
+        react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: (0, contentTransformers_1.renderMarkdown)(text) } })));
 }
 exports.default = Answer;

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

@@ -3,17 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
-const Disclaimer_1 = tslib_1.__importDefault(require("./Disclaimer"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
-const Answer_1 = tslib_1.__importDefault(require("../Answer/Answer"));
-const Feedback_1 = tslib_1.__importDefault(require("../Feedback/Feedback"));
 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");
-const PiaCustomCarousel_1 = tslib_1.__importDefault(require("./PiaCustomCarousel"));
+const PiaInlineAnswer_1 = tslib_1.__importDefault(require("../PiaInlineAnswer/PiaInlineAnswer"));
 const PiaModal_1 = tslib_1.__importDefault(require("../PiaConversation/PiaModal"));
 const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/PiaConversation"));
 function CioPia(props) {
@@ -29,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,
@@ -54,28 +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));
-    const disclaimer = (react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }));
     // 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("div", { className: 'cio-pia-answer-container' },
-                    disclaimerPosition === 'top' && disclaimer,
-                    react_1.default.createElement(Answer_1.default, { text: currentAnswer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
-                    currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
-                    showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })),
-                    disclaimerPosition === 'bottom' && disclaimer)),
-                react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleSubmitQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))))));
+                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: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))))));
 }
 exports.default = CioPia;

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

@@ -3,6 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const contentTransformers_1 = require("../../utils/contentTransformers");
+function HtmlDescription({ product }) {
+    const { description } = product;
+    if (!description)
+        return null;
+    return (react_1.default.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: (0, contentTransformers_1.sanitizeHtml)(description) } }));
+}
 function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
     const wrapperRef = (0, react_1.useRef)(null);
     // Determine to use user-defined click handler or default behavior
@@ -31,11 +38,18 @@ function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
             el.removeEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
         };
     }, [productClickHandler]);
+    const mergedOverrides = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if ((_c = (_b = (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _a === void 0 ? void 0 : _a.productCard) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.description) {
+            return componentOverrides;
+        }
+        return Object.assign(Object.assign({}, componentOverrides), { item: Object.assign(Object.assign({}, componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item), { productCard: Object.assign(Object.assign({}, (_d = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _d === void 0 ? void 0 : _d.productCard), { content: Object.assign(Object.assign({}, (_f = (_e = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _e === void 0 ? void 0 : _e.productCard) === null || _f === void 0 ? void 0 : _f.content), { description: { reactNode: HtmlDescription } }) }) }) });
+    }, [componentOverrides]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;
     }
     return (react_1.default.createElement("div", { ref: wrapperRef },
-        react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: items, componentOverrides: componentOverrides })));
+        react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: items, componentOverrides: mergedOverrides })));
 }
 exports.default = PiaCustomCarousel;

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/components/PiaInlineAnswer/PiaInlineAnswer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Answer_1 = tslib_1.__importDefault(require("../Answer/Answer"));
+const Feedback_1 = tslib_1.__importDefault(require("../Feedback/Feedback"));
+const Disclaimer_1 = tslib_1.__importDefault(require("../CioPia/Disclaimer"));
+const PiaCustomCarousel_1 = tslib_1.__importDefault(require("../CioPia/PiaCustomCarousel"));
+function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
+    const disclaimer = (react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }));
+    return (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
+        disclaimerPosition === 'top' && disclaimer,
+        react_1.default.createElement(Answer_1.default, { text: currentAnswer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
+        currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
+        showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })),
+        disclaimerPosition === 'bottom' && disclaimer));
+}
+exports.default = PiaInlineAnswer;

package/lib/cjs/constants.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
-// eslint-disable-next-line import/prefer-default-export
 exports.DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
 exports.DEMO_ITEM_ID = '149100215';
 exports.DEMO_QUESTION = 'What is the nutritional content of this shake?';

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/index.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CioPia = void 0;
+exports.renderMarkdown = exports.sanitizeHtml = exports.CioPia = void 0;
 const tslib_1 = require("tslib");
 const CioPia_1 = tslib_1.__importDefault(require("./components/CioPia"));
 // Components
 var CioPia_2 = require("./components/CioPia");
 Object.defineProperty(exports, "CioPia", { enumerable: true, get: function () { return tslib_1.__importDefault(CioPia_2).default; } });
+// Utilities
+var contentTransformers_1 = require("./utils/contentTransformers");
+Object.defineProperty(exports, "sanitizeHtml", { enumerable: true, get: function () { return contentTransformers_1.sanitizeHtml; } });
+Object.defineProperty(exports, "renderMarkdown", { enumerable: true, get: function () { return contentTransformers_1.renderMarkdown; } });
 // Default
 tslib_1.__exportStar(require("./types"), exports);
 exports.default = CioPia_1.default;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMarkdown = exports.sanitizeHtml = void 0;
+const tslib_1 = require("tslib");
+const dompurify_1 = tslib_1.__importDefault(require("dompurify"));
+const marked_1 = require("marked");
+const purifyConfig = {
+    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
+};
+function sanitizeHtml(html) {
+    if (!html)
+        return '';
+    return dompurify_1.default.sanitize(html, purifyConfig);
+}
+exports.sanitizeHtml = sanitizeHtml;
+function renderMarkdown(content) {
+    if (!content)
+        return '';
+    const html = marked_1.marked.parse(content, { async: false, breaks: true });
+    return dompurify_1.default.sanitize(html, purifyConfig);
+}
+exports.renderMarkdown = renderMarkdown;

package/lib/cjs/utils/index.js

@@ -1,4 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMarkdown = exports.sanitizeHtml = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./styleHelpers"), exports);
+var contentTransformers_1 = require("./contentTransformers");
+Object.defineProperty(exports, "sanitizeHtml", { enumerable: true, get: function () { return contentTransformers_1.sanitizeHtml; } });
+Object.defineProperty(exports, "renderMarkdown", { enumerable: true, get: function () { return contentTransformers_1.renderMarkdown; } });

package/lib/cjs/utils/styleHelpers.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPreferredColorScheme = void 0;
-// eslint-disable-next-line import/prefer-default-export
 function getPreferredColorScheme() {
     var _a;
     let colorScheme = 'light';

package/lib/cjs/utils/translate.js

@@ -19,7 +19,6 @@ const defaultTranslations = {
  * @param translations - Optional user-provided translations object
  * @returns The translated string or the original word if no translation exists
  */
-// eslint-disable-next-line import/prefer-default-export
 const translate = (word, translations) => {
     if (translations && translations[word] !== undefined) {
         return translations[word];

package/lib/cjs/version.js

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

package/lib/mjs/components/Answer/Answer.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
+import { renderMarkdown } from '../../utils/contentTransformers';
 function Answer({ text, componentOverride }) {
     if (!text) {
         return null;
     }
     return (React.createElement(RenderPropsWrapper, { props: { text }, override: componentOverride?.reactNode },
-        React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text)));
+        React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: renderMarkdown(text) } })));
 }
 export default Answer;