@constructor-io/constructorio-ui-pia 2.3.0 → 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,17 +3,14 @@ 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) {
@@ -61,7 +58,6 @@ function CioPia(props) {
     }
     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' },
         react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: renderProps, override: children || (componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode) },
@@ -70,12 +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' },
-                    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)),
+                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/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.3.0';
+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,16 +1,13 @@
 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) {
@@ -58,7 +55,6 @@ export default function CioPia(props) {
     }
     if (isConversation)
         return React.createElement(PiaConversation, { ...conversationHistoryProps });
-    const disclaimer = (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }));
     // Default inline mode
     return (React.createElement("div", { className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
@@ -67,11 +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' },
-                    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)),
+                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/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.3.0';
+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/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 {};

package/lib/types/index.d.ts

@@ -1,5 +1,6 @@
 import CioPia from './components/CioPia';
 export { default as CioPia } from './components/CioPia';
 export type { CioPiaProps } from './components/CioPia';
+export { sanitizeHtml, renderMarkdown } from './utils/contentTransformers';
 export * from './types';
 export default CioPia;

package/lib/types/types.d.ts

@@ -113,8 +113,8 @@ export interface FeedbackRenderProps {
     onFeedback?: (type: FeedbackType) => void;
 }
 /**
- * Component overrides for CioPia
- * Allows customization of sub-components via reactNode or render props functions
+ * Component overrides for CioPia.
+ * Allows customization of sub-components via reactNode or render props functions.
  */
 export interface CioPiaComponentOverrides extends ComponentOverrideProps<CioPiaRenderProps> {
     carousel?: CarouselOverrides<Item>;

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

@@ -0,0 +1,2 @@
+export declare function sanitizeHtml(html: string): string;
+export declare function renderMarkdown(content: string): string;

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

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

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.3.0";
+declare const _default: "2.4.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -51,7 +51,7 @@
   },
   "types": "lib/types/index.d.ts",
   "scripts": {
-    "lint": "eslint src --ext js,ts,jsx,tsx",
+    "lint": "eslint src",
     "check-types": "npx tsc --noEmit",
     "copy-styles": "rsync -am --include='*/' --include='*.css' --exclude='*' src/ lib/mjs/ && rsync -am --include='*/' --include='*.css' --exclude='*' src/ lib/cjs/",
     "dev": "storybook dev -p 6006",
@@ -64,7 +64,7 @@
     "storybook-docs-dev": "storybook dev --docs -p 6007",
     "serve-built-storybook": "npx http-server docs",
     "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build",
-    "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause;ISC' --excludePackages 'picocolors@1.0.0;graceful-fs@4.2.11;lightningcss@1.30.2;lightningcss-darwin-arm64@1.30.2;lightningcss-linux-x64-gnu@1.30.2;lightningcss-linux-x64-musl@1.30.2'",
+    "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause;ISC' --excludePackages 'lightningcss@1.32.0;lightningcss-darwin-arm64@1.32.0;lightningcss-linux-x64-gnu@1.32.0;lightningcss-linux-x64-musl@1.32.0'",
     "prepare": "husky"
   },
   "peerDependencies": {
@@ -82,10 +82,11 @@
     "@babel/preset-typescript": "^7.23.3",
     "@chromatic-com/storybook": "^3.2.5",
     "@cspell/eslint-plugin": "^8.17.5",
+    "@eslint/js": "^9.39.4",
     "@storybook/addon-a11y": "^8.6.4",
     "@storybook/addon-actions": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
     "@storybook/addon-links": "^8.6.4",
     "@storybook/addon-onboarding": "^8.6.4",
     "@storybook/blocks": "^8.6.4",
@@ -97,32 +98,31 @@
     "@storybook/testing-library": "^0.2.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
-    "@types/jest": "^29.5.14",
+    "@types/dompurify": "^3.0.5",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "chromatic": "^11.27.0",
-    "eslint": "^8.57.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.1",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.11.4",
-    "globals": "^16.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.5.0",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
+    "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.2.0",
+    "jest-environment-node": "^30.4.1",
     "license-checker": "^25.0.1",
     "prop-types": "^15.8.1",
     "start-server-and-test": "^2.0.10",
     "storybook": "^8.6.4",
     "typescript": "^4.9.4",
-    "typescript-eslint": "^8.26.1",
+    "typescript-eslint": "^8.59.2",
     "vite": "^6.3.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "webpack": "^5.98.0"
@@ -130,5 +130,9 @@
   "volta": {
     "node": "22.18.0",
     "npm": "10.9.3"
+  },
+  "dependencies": {
+    "dompurify": "^3.4.2",
+    "marked": "^15.0.12"
   }
 }