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

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,22 +3,19 @@ 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 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) {
     const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
-    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, } = displayConfigs || {};
+    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const pia = (0, useCioPia_1.default)({
         apiKey,
@@ -48,6 +45,7 @@ function CioPia(props) {
         showFeedback,
         showPreviousItems,
         learnMoreUrl,
+        disclaimerPosition,
         translations,
         callbacks,
         componentOverrides,
@@ -68,11 +66,7 @@ function CioPia(props) {
             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' },
-                    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 })),
-                    react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }))),
+                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 }))))));
 }
 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/ConversationHistory/ConversationHistory.js

@@ -8,7 +8,7 @@ const Disclaimer_1 = tslib_1.__importDefault(require("../CioPia/Disclaimer"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
 const PiaCustomCarousel_1 = tslib_1.__importDefault(require("../CioPia/PiaCustomCarousel"));
-function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, translations, callbacks, componentOverrides, }) {
+function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = scrollContainerRef.current;
@@ -19,7 +19,9 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
         });
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
+    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-conversation-history' },
+        disclaimerPosition === 'top' && disclaimer,
         react_1.default.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
             const isLast = index === conversationHistory.length - 1;
             const previousEntryItems = showPreviousItems ? entry.items : null;
@@ -35,6 +37,6 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
                     carouselItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: carouselItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks })),
                     isLast && 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 }))))));
         })),
-        react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer })));
+        disclaimerPosition === 'bottom' && disclaimer));
 }
 exports.default = ConversationHistory;

package/lib/cjs/components/ConversationHistory/ConversationHistoryStyles.css

@@ -4,6 +4,7 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  gap: var(--conversation-gap);
 }
 
 .cio-pia-conversation-entries {

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

@@ -7,11 +7,11 @@ 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, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
     const hasHistory = conversationHistory.length > 0;
     return (react_1.default.createElement("div", { 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, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides }),
+        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 })),

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

@@ -61,8 +61,9 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, isLoading, component
     }, [handleSubmitQuestion, openModal]);
     return (react_1.default.createElement("div", { 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(Input_1.default, { onSubmit: handleQuestion, disabled: isLoading || isOpen, translations: translations }),
-        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("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 })),
         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/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/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 });
+    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.2.1';
+exports.default = '2.4.0';

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;

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

@@ -1,21 +1,18 @@
 import React from 'react';
 import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
-import Disclaimer from './Disclaimer';
 import Input from '../Input/Input';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
-import Answer from '../Answer/Answer';
-import Feedback from '../Feedback/Feedback';
 import useCioPia from '../../hooks/useCioPia';
 import useConversation from '../../hooks/useConversation';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import { translate } from '../../utils/translate';
-import PiaCustomCarousel from './PiaCustomCarousel';
+import PiaInlineAnswer from '../PiaInlineAnswer/PiaInlineAnswer';
 import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
 export default function CioPia(props) {
     const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
-    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, } = displayConfigs || {};
+    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const pia = useCioPia({
         apiKey,
@@ -45,6 +42,7 @@ export default function CioPia(props) {
         showFeedback,
         showPreviousItems,
         learnMoreUrl,
+        disclaimerPosition,
         translations,
         callbacks,
         componentOverrides,
@@ -65,10 +63,6 @@ export default function CioPia(props) {
             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("div", { className: 'cio-pia-answer-container' },
-                    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 })),
-                    React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }))),
+                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 }))))));
 }

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

@@ -1,5 +1,12 @@
-import React, { useCallback, useRef, useEffect } from 'react';
+import React, { useCallback, useRef, useEffect, useMemo } from 'react';
 import { Carousel, CIO_EVENTS, } from '@constructor-io/constructorio-ui-components';
+import { sanitizeHtml } from '../../utils/contentTransformers';
+function HtmlDescription({ product }) {
+    const { description } = product;
+    if (!description)
+        return null;
+    return (React.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: sanitizeHtml(description) } }));
+}
 export default function PiaCustomCarousel({ items, componentOverrides, callbacks, }) {
     const wrapperRef = useRef(null);
     // Determine to use user-defined click handler or default behavior
@@ -28,10 +35,28 @@ export default function PiaCustomCarousel({ items, componentOverrides, callbacks
             el.removeEventListener(CIO_EVENTS.productCard.click, handleClick);
         };
     }, [productClickHandler]);
+    const mergedOverrides = useMemo(() => {
+        if (componentOverrides?.item?.productCard?.content?.description) {
+            return componentOverrides;
+        }
+        return {
+            ...componentOverrides,
+            item: {
+                ...componentOverrides?.item,
+                productCard: {
+                    ...componentOverrides?.item?.productCard,
+                    content: {
+                        ...componentOverrides?.item?.productCard?.content,
+                        description: { reactNode: HtmlDescription },
+                    },
+                },
+            },
+        };
+    }, [componentOverrides]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;
     }
     return (React.createElement("div", { ref: wrapperRef },
-        React.createElement(Carousel, { items: items, componentOverrides: componentOverrides })));
+        React.createElement(Carousel, { items: items, componentOverrides: mergedOverrides })));
 }

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, translations, callbacks, componentOverrides, }) {
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, }) {
     const scrollContainerRef = useRef(null);
     useEffect(() => {
         const container = scrollContainerRef.current;
@@ -16,7 +16,9 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
         });
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
+    const disclaimer = (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }));
     return (React.createElement("div", { className: 'cio-pia-conversation-history' },
+        disclaimerPosition === 'top' && disclaimer,
         React.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
             const isLast = index === conversationHistory.length - 1;
             const previousEntryItems = showPreviousItems ? entry.items : null;
@@ -32,5 +34,5 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
                     carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
                     isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback }))))));
         })),
-        React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer })));
+        disclaimerPosition === 'bottom' && disclaimer));
 }

package/lib/mjs/components/ConversationHistory/ConversationHistoryStyles.css

@@ -4,6 +4,7 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  gap: var(--conversation-gap);
 }
 
 .cio-pia-conversation-entries {

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, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
     const hasHistory = conversationHistory.length > 0;
     return (React.createElement("div", { 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, 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 }),
         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 })),

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

@@ -58,8 +58,9 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, isLoa
     }, [handleSubmitQuestion, openModal]);
     return (React.createElement("div", { 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(Input, { onSubmit: handleQuestion, disabled: isLoading || isOpen, translations: translations }),
-        initialQuestions.length > 0 && (React.createElement(SuggestedQuestionsContainer, { questions: initialQuestions, onQuestionClick: handleQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
+        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 })),
         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/components/PiaInlineAnswer/PiaInlineAnswer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+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, }) {
+    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 })),
+        disclaimerPosition === 'bottom' && disclaimer));
+}

package/lib/mjs/constants.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
 export const DEMO_ITEM_ID = '149100215';
 export const DEMO_QUESTION = 'What is the nutritional content of this shake?';

package/lib/mjs/index.js

@@ -1,6 +1,8 @@
 import CioPia from './components/CioPia';
 // Components
 export { default as CioPia } from './components/CioPia';
+// Utilities
+export { sanitizeHtml, renderMarkdown } from './utils/contentTransformers';
 // Default
 export * from './types';
 export default CioPia;

package/lib/mjs/utils/contentTransformers.js

@@ -0,0 +1,16 @@
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+const purifyConfig = {
+    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
+};
+export function sanitizeHtml(html) {
+    if (!html)
+        return '';
+    return DOMPurify.sanitize(html, purifyConfig);
+}
+export function renderMarkdown(content) {
+    if (!content)
+        return '';
+    const html = marked.parse(content, { async: false });
+    return DOMPurify.sanitize(html, purifyConfig);
+}

package/lib/mjs/utils/index.js

@@ -1 +1,2 @@
 export * from './styleHelpers';
+export { sanitizeHtml, renderMarkdown } from './contentTransformers';

package/lib/mjs/utils/styleHelpers.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export function getPreferredColorScheme() {
     let colorScheme = 'light';
     // Check if the dark-mode Media-Query matches

package/lib/mjs/utils/translate.js

@@ -16,7 +16,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
 export const translate = (word, translations) => {
     if (translations && translations[word] !== undefined) {
         return translations[word];

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.2.1';
+export default '2.4.0';

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

@@ -3,29 +3,27 @@ import { IncludeComponentOverrides, IncludeRenderProps } from '@constructor-io/c
 import MockConstructorIOClient from '../../hooks/mocks/MockConstructorIOClient';
 import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters, Formatters } from '../../types';
 export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, IncludeComponentOverrides<CioPiaComponentOverrides> {
+    /** Your Constructor.io API key. */
     apiKey: string;
+    /** The product item ID to fetch insights for. */
     itemId: string;
-    /** Thread ID for conversation context. Must be a valid UUID (e.g., "550e8400-e29b-41d4-a716-446655440000") */
+    /** 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. */
     variationId?: string;
+    /** Optional Constructor.io client instance. If not provided, one will be created internally. */
     cioClient?: MockConstructorIOClient;
+    /** Display configuration options (mode, type, showFeedback, etc.). */
     displayConfigs?: CioPiaDisplayConfigs;
-    /**
-     * Callback handlers for user interactions:
-     *
-     * `onQuestionSubmit: (question: string) => void`
-     * Called when a question is submitted (via Enter key, Send button, or suggested question click).
-     *
-     * `onProductCardClick: (item: Item) => void`
-     * Called when a product card in the carousel is clicked.
-     *
-     * `onFeedback: (type: 'up' | 'down') => void`
-     * Called when the user submits positive or negative feedback on an answer.
-     */
+    /** Callback handlers for user interactions (onQuestionSubmit, onProductCardClick, onFeedback). */
     callbacks?: Callbacks;
-    /** Define formatter functions outside the component or memoize to avoid unnecessary re-renders. */
+    /** Custom component overrides via reactNode or render props functions. */
+    componentOverrides?: CioPiaComponentOverrides;
+    /** Formatter functions for transforming data before display. */
     formatters?: Formatters;
+    /** UI string translations for internationalization. */
     translations?: Translations;
+    /** Parameters for the suggested questions request. */
     suggestedQuestionsParameters?: SuggestedQuestionsParameters;
 }
 export default function CioPia(props: CioPiaProps): React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConversationEntry, Translations, Item, Callbacks, CioPiaComponentOverrides } from '../../types';
+import { ConversationEntry, Translations, Item, Callbacks, CioPiaComponentOverrides, DisclaimerPosition } from '../../types';
 export interface ConversationHistoryProps {
     conversationHistory: ConversationEntry[];
     isLoading: boolean;
@@ -18,8 +18,9 @@ export interface ConversationHistoryProps {
      */
     showPreviousItems?: boolean;
     learnMoreUrl?: string;
+    disclaimerPosition?: DisclaimerPosition;
     translations?: Translations;
     callbacks?: Callbacks;
     componentOverrides?: CioPiaComponentOverrides;
 }
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, translations, callbacks, componentOverrides, }: ConversationHistoryProps): React.JSX.Element;
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, }: ConversationHistoryProps): React.JSX.Element;

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

@@ -5,4 +5,4 @@ export interface PiaConversationProps extends ConversationHistoryProps {
     displayedQuestions: Question[];
     handleSubmitQuestion: (question: string) => void;
 }
-export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }: PiaConversationProps): React.JSX.Element;
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }: PiaConversationProps): React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Callbacks, CioPiaComponentOverrides, DisclaimerPosition, Translations, Item } from '../../types';
+interface PiaInlineAnswerProps {
+    currentAnswer: string;
+    currentItems: Item[] | null;
+    showFeedback?: boolean;
+    learnMoreUrl?: string;
+    disclaimerPosition?: DisclaimerPosition;
+    translations?: Translations;
+    callbacks?: Callbacks;
+    componentOverrides?: CioPiaComponentOverrides;
+}
+export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, }: PiaInlineAnswerProps): React.JSX.Element;
+export {};