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

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

@@ -17,8 +17,8 @@ const PiaCustomCarousel_1 = tslib_1.__importDefault(require("./PiaCustomCarousel
 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, children, translations, suggestedQuestionsParameters, } = props;
-    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline' } = displayConfigs || {};
+    const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
+    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const pia = (0, useCioPia_1.default)({
         apiKey,
@@ -27,8 +27,9 @@ function CioPia(props) {
         variationId,
         cioClient,
         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 });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = (0, useConversation_1.default)({ pia, itemId, isConversation, callbacks });
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -45,6 +46,7 @@ function CioPia(props) {
         error,
         currentItems,
         showFeedback,
+        showPreviousItems,
         learnMoreUrl,
         translations,
         callbacks,

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, learnMoreUrl, translations, callbacks, componentOverrides, }) {
+function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, translations, callbacks, componentOverrides, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = scrollContainerRef.current;
@@ -19,18 +19,22 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
         });
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
-    return (react_1.default.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-history', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
-        const isLast = index === conversationHistory.length - 1;
-        return (react_1.default.createElement("div", { key: entry.id, className: 'cio-pia-conversation-entry' },
-            react_1.default.createElement("div", { className: 'cio-pia-chat-question' }, entry.question),
-            isLast && isLoading && (react_1.default.createElement("div", { className: 'cio-pia-conversation-loading', "aria-live": 'polite' },
-                react_1.default.createElement(LoadingSkeleton_1.default, null))),
-            isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { message: error.message || 'Unexpected error' })),
-            entry.answer && (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
-                react_1.default.createElement(Answer_1.default, { text: entry.answer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
-                isLast && currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, 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 })))),
-            isLast && entry.answer && (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' },
+        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;
+            const latestEntryItems = currentItems !== undefined ? currentItems : entry.items;
+            const carouselItems = isLast ? latestEntryItems : previousEntryItems;
+            return (react_1.default.createElement("div", { key: entry.id, className: 'cio-pia-conversation-entry' },
+                react_1.default.createElement("div", { className: 'cio-pia-chat-question' }, entry.question),
+                isLast && isLoading && (react_1.default.createElement("div", { className: 'cio-pia-conversation-loading', "aria-live": 'polite' },
+                    react_1.default.createElement(LoadingSkeleton_1.default, null))),
+                isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { message: error.message || 'Unexpected error' })),
+                entry.answer && (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
+                    react_1.default.createElement(Answer_1.default, { text: entry.answer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
+                    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 })));
 }
 exports.default = ConversationHistory;

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

@@ -1,5 +1,12 @@
 .cio-pia-conversation-history {
   --conversation-gap: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.cio-pia-conversation-entries {
   display: flex;
   flex-direction: column;
   gap: var(--conversation-gap);

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, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, 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, 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, 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/hooks/useAnswerResults.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const transformers_1 = require("../utils/transformers");
-const extractAndTransformItems = (data) => {
+const extractAndTransformItems = (data, formatImageUrl) => {
     var _a, _b;
     if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.item_results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results)) {
         return null;
@@ -13,7 +13,7 @@ const extractAndTransformItems = (data) => {
         return null;
     }
     const transformedItems = results
-        .map(transformers_1.transformResultItem)
+        .map((item) => (0, transformers_1.transformResultItem)(item, formatImageUrl))
         .filter((item) => item !== null);
     return transformedItems.length > 0 ? transformedItems : null;
 };
@@ -26,7 +26,7 @@ const fetchAnswerResults = ({ client, itemId, question, variationId, threadId, }
     });
     return response;
 });
-function useAnswerResults({ itemId, variationId, threadId, cioClient, }) {
+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);
@@ -39,7 +39,7 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, }) {
         fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);
-            setItems(extractAndTransformItems(fetchedAnswerResults));
+            setItems(extractAndTransformItems(fetchedAnswerResults, formatImageUrl));
             setError(null);
         })
             .catch((err) => {
@@ -50,7 +50,7 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, }) {
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId]);
+    }, [cioClient, itemId, variationId, threadId, formatImageUrl]);
     return {
         data: answerResults,
         items,

package/lib/cjs/hooks/useCioPia.js

@@ -5,7 +5,7 @@ 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, } = props;
+    const { apiKey, itemId, variationId, threadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = props;
     const defaultClient = (0, useCioClient_1.default)({ apiKey });
     const client = providedClient || defaultClient;
     const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
@@ -20,6 +20,7 @@ function useCioPia(props) {
         variationId,
         threadId,
         cioClient: client,
+        formatImageUrl,
     });
     return {
         suggestedQuestions,

package/lib/cjs/hooks/useConversation.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function useConversation({ pia, itemId, isConversation, }) {
+function useConversation({ pia, itemId, isConversation, callbacks, }) {
     var _a, _b, _c, _d;
     const { suggestedQuestions, answers } = pia;
     const { getAnswer } = answers;
@@ -11,6 +11,8 @@ function useConversation({ pia, itemId, isConversation, }) {
     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);
         setCurrentQuestion(question);
         getAnswer(question);
         if (isConversation) {
@@ -18,7 +20,7 @@ function useConversation({ pia, itemId, isConversation, }) {
             const id = entryIdRef.current;
             setConversationHistory((prev) => [...prev, { id, question, answer: '' }]);
         }
-    }, [getAnswer, isConversation]);
+    }, [getAnswer, isConversation, callbacks]);
     const resetState = (0, react_1.useCallback)(() => {
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
@@ -51,10 +53,10 @@ function useConversation({ pia, itemId, isConversation, }) {
             if (prev.length === 0)
                 return prev;
             const updated = [...prev];
-            updated[updated.length - 1] = Object.assign(Object.assign({}, updated[updated.length - 1]), { answer: answerValue });
+            updated[updated.length - 1] = Object.assign(Object.assign({}, updated[updated.length - 1]), { answer: answerValue, items: answers.items });
             return updated;
         });
-    }, [isConversation, answers.data]);
+    }, [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;
     const error = answers.error || suggestedQuestions.error;

package/lib/cjs/utils/transformers.js

@@ -6,18 +6,26 @@ const tslib_1 = require("tslib");
  * Converts a raw ApiItem from the Get Answers API response into an Item object
  * that can be used in the Carousel component.
  */
-function transformResultItem(resultItem) {
+function transformResultItem(resultItem, formatImageUrl) {
     const { value, matched_terms: matchedTerms, data } = resultItem, otherFields = tslib_1.__rest(resultItem, ["value", "matched_terms", "data"]);
     if (!data || typeof data !== 'object' || !data.id || !value) {
         return null;
     }
     const { id, variation_id: variationId, description, url, image_url: imageUrl, price, sale_price: salePrice, rating, reviews_count: reviewsCount, tags, sl_campaign_id: slCampaignId, sl_campaign_owner: slCampaignOwner, badge } = data, otherMetadataFields = tslib_1.__rest(data, ["id", "variation_id", "description", "url", "image_url", "price", "sale_price", "rating", "reviews_count", "tags", "sl_campaign_id", "sl_campaign_owner", "badge"]);
+    // Skip formatting for absent or empty URLs; consumers should handle placeholders separately.
+    let formattedImageUrl = imageUrl;
+    if (formatImageUrl && imageUrl) {
+        try {
+            formattedImageUrl = formatImageUrl(imageUrl);
+        }
+        catch (_a) {
+            formattedImageUrl = imageUrl;
+        }
+    }
     return Object.assign({ id, name: value, matchedTerms,
         variationId,
         description,
-        url,
-        imageUrl,
-        price,
+        url, imageUrl: formattedImageUrl, price,
         salePrice,
         rating,
         reviewsCount,

package/lib/cjs/version.js

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

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

@@ -14,8 +14,8 @@ import PiaCustomCarousel from './PiaCustomCarousel';
 import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
 export default function CioPia(props) {
-    const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, children, translations, suggestedQuestionsParameters, } = props;
-    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline' } = displayConfigs || {};
+    const { apiKey, itemId, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, children, translations, suggestedQuestionsParameters, } = props;
+    const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const pia = useCioPia({
         apiKey,
@@ -24,8 +24,9 @@ export default function CioPia(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        formatImageUrl: formatters?.formatImageUrl,
     });
-    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = useConversation({ pia, itemId, isConversation });
+    const { currentQuestion, displayedQuestions, conversationHistory, currentAnswer, currentItems, isLoading, error, handleSubmitQuestion, resetState, } = useConversation({ pia, itemId, isConversation, callbacks });
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -42,6 +43,7 @@ export default function CioPia(props) {
         error,
         currentItems,
         showFeedback,
+        showPreviousItems,
         learnMoreUrl,
         translations,
         callbacks,

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, learnMoreUrl, translations, callbacks, componentOverrides, }) {
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, translations, callbacks, componentOverrides, }) {
     const scrollContainerRef = useRef(null);
     useEffect(() => {
         const container = scrollContainerRef.current;
@@ -16,17 +16,21 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
         });
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
-    return (React.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-history', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
-        const isLast = index === conversationHistory.length - 1;
-        return (React.createElement("div", { key: entry.id, className: 'cio-pia-conversation-entry' },
-            React.createElement("div", { className: 'cio-pia-chat-question' }, entry.question),
-            isLast && isLoading && (React.createElement("div", { className: 'cio-pia-conversation-loading', "aria-live": 'polite' },
-                React.createElement(LoadingSkeleton, null))),
-            isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
-            entry.answer && (React.createElement("div", { className: 'cio-pia-answer-container' },
-                React.createElement(Answer, { text: entry.answer, componentOverride: componentOverrides?.answer }),
-                isLast && currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
-                isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })))),
-            isLast && entry.answer && (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }))));
-    })));
+    return (React.createElement("div", { className: 'cio-pia-conversation-history' },
+        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;
+            const latestEntryItems = currentItems !== undefined ? currentItems : entry.items;
+            const carouselItems = isLast ? latestEntryItems : previousEntryItems;
+            return (React.createElement("div", { key: entry.id, className: 'cio-pia-conversation-entry' },
+                React.createElement("div", { className: 'cio-pia-chat-question' }, entry.question),
+                isLast && isLoading && (React.createElement("div", { className: 'cio-pia-conversation-loading', "aria-live": 'polite' },
+                    React.createElement(LoadingSkeleton, null))),
+                isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
+                entry.answer && (React.createElement("div", { className: 'cio-pia-answer-container' },
+                    React.createElement(Answer, { text: entry.answer, componentOverride: componentOverrides?.answer }),
+                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks })),
+                    isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: callbacks?.onFeedback, componentOverride: componentOverrides?.feedback }))))));
+        })),
+        React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer })));
 }

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

@@ -1,5 +1,12 @@
 .cio-pia-conversation-history {
   --conversation-gap: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.cio-pia-conversation-entries {
   display: flex;
   flex-direction: column;
   gap: var(--conversation-gap);

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, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }) {
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, 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, 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, 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/hooks/useAnswerResults.js

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { transformResultItem } from '../utils/transformers';
-const extractAndTransformItems = (data) => {
+const extractAndTransformItems = (data, formatImageUrl) => {
     if (!data?.item_results?.response?.results) {
         return null;
     }
@@ -9,7 +9,7 @@ const extractAndTransformItems = (data) => {
         return null;
     }
     const transformedItems = results
-        .map(transformResultItem)
+        .map((item) => transformResultItem(item, formatImageUrl))
         .filter((item) => item !== null);
     return transformedItems.length > 0 ? transformedItems : null;
 };
@@ -22,7 +22,7 @@ const fetchAnswerResults = async ({ client, itemId, question, variationId, threa
     });
     return response;
 };
-export default function useAnswerResults({ itemId, variationId, threadId, cioClient, }) {
+export default function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = useState(null);
     const [items, setItems] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -35,7 +35,7 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
         fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);
-            setItems(extractAndTransformItems(fetchedAnswerResults));
+            setItems(extractAndTransformItems(fetchedAnswerResults, formatImageUrl));
             setError(null);
         })
             .catch((err) => {
@@ -46,7 +46,7 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId]);
+    }, [cioClient, itemId, variationId, threadId, formatImageUrl]);
     return {
         data: answerResults,
         items,

package/lib/mjs/hooks/useCioPia.js

@@ -2,7 +2,7 @@ import useAnswerResults from './useAnswerResults';
 import useCioClient from './useCioClient';
 import useSuggestedQuestions from './useSuggestedQuestions';
 export default function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId, cioClient: providedClient, suggestedQuestionsParameters, } = props;
+    const { apiKey, itemId, variationId, threadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = props;
     const defaultClient = useCioClient({ apiKey });
     const client = providedClient || defaultClient;
     const suggestedQuestions = useSuggestedQuestions({
@@ -17,6 +17,7 @@ export default function useCioPia(props) {
         variationId,
         threadId,
         cioClient: client,
+        formatImageUrl,
     });
     return {
         suggestedQuestions,

package/lib/mjs/hooks/useConversation.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-export default function useConversation({ pia, itemId, isConversation, }) {
+export default function useConversation({ pia, itemId, isConversation, callbacks, }) {
     const { suggestedQuestions, answers } = pia;
     const { getAnswer } = answers;
     const [currentQuestion, setCurrentQuestion] = useState('');
@@ -8,6 +8,7 @@ export default function useConversation({ pia, itemId, isConversation, }) {
     const entryIdRef = useRef(0);
     const prevAnswerValueRef = useRef(answers.data?.value);
     const handleSubmitQuestion = useCallback((question) => {
+        callbacks?.onQuestionSubmit?.(question);
         setCurrentQuestion(question);
         getAnswer(question);
         if (isConversation) {
@@ -15,7 +16,7 @@ export default function useConversation({ pia, itemId, isConversation, }) {
             const id = entryIdRef.current;
             setConversationHistory((prev) => [...prev, { id, question, answer: '' }]);
         }
-    }, [getAnswer, isConversation]);
+    }, [getAnswer, isConversation, callbacks]);
     const resetState = useCallback(() => {
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
@@ -49,10 +50,11 @@ export default function useConversation({ pia, itemId, isConversation, }) {
             updated[updated.length - 1] = {
                 ...updated[updated.length - 1],
                 answer: answerValue,
+                items: answers.items,
             };
             return updated;
         });
-    }, [isConversation, answers.data]);
+    }, [isConversation, answers.data, answers.items]);
     const currentAnswer = answers.data?.value ?? '';
     const currentItems = answers.items ?? null;
     const error = answers.error || suggestedQuestions.error;

package/lib/mjs/utils/transformers.js

@@ -2,12 +2,22 @@
  * Converts a raw ApiItem from the Get Answers API response into an Item object
  * that can be used in the Carousel component.
  */
-export function transformResultItem(resultItem) {
+export function transformResultItem(resultItem, formatImageUrl) {
     const { value, matched_terms: matchedTerms, data, ...otherFields } = resultItem;
     if (!data || typeof data !== 'object' || !data.id || !value) {
         return null;
     }
     const { id, variation_id: variationId, description, url, image_url: imageUrl, price, sale_price: salePrice, rating, reviews_count: reviewsCount, tags, sl_campaign_id: slCampaignId, sl_campaign_owner: slCampaignOwner, badge, ...otherMetadataFields } = data;
+    // Skip formatting for absent or empty URLs; consumers should handle placeholders separately.
+    let formattedImageUrl = imageUrl;
+    if (formatImageUrl && imageUrl) {
+        try {
+            formattedImageUrl = formatImageUrl(imageUrl);
+        }
+        catch {
+            formattedImageUrl = imageUrl;
+        }
+    }
     return {
         id,
         name: value,
@@ -15,7 +25,7 @@ export function transformResultItem(resultItem) {
         variationId,
         description,
         url,
-        imageUrl,
+        imageUrl: formattedImageUrl,
         price,
         salePrice,
         rating,

package/lib/mjs/version.js

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IncludeComponentOverrides, IncludeRenderProps } from '@constructor-io/constructorio-ui-components';
 import MockConstructorIOClient from '../../hooks/mocks/MockConstructorIOClient';
-import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters } from '../../types';
+import { CioPiaRenderProps, CioPiaComponentOverrides, Callbacks, CioPiaDisplayConfigs, Translations, SuggestedQuestionsParameters, Formatters } from '../../types';
 export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, IncludeComponentOverrides<CioPiaComponentOverrides> {
     apiKey: string;
     itemId: string;
@@ -10,7 +10,21 @@ export interface CioPiaProps extends IncludeRenderProps<CioPiaRenderProps>, Incl
     variationId?: string;
     cioClient?: MockConstructorIOClient;
     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.
+     */
     callbacks?: Callbacks;
+    /** Define formatter functions outside the component or memoize to avoid unnecessary re-renders. */
+    formatters?: Formatters;
     translations?: Translations;
     suggestedQuestionsParameters?: SuggestedQuestionsParameters;
 }

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

@@ -4,11 +4,22 @@ export interface ConversationHistoryProps {
     conversationHistory: ConversationEntry[];
     isLoading: boolean;
     error: Error | null;
+    /**
+     * Items for the latest conversation entry's carousel.
+     * - `undefined` (not provided): falls back to entry.items
+     * - `null`: explicitly no items, hides the carousel
+     * - `Item[]`: shows these items, overriding entry.items
+     */
     currentItems?: Item[] | null;
     showFeedback?: boolean;
+    /**
+     * Show product carousels on non-last conversation entries. Defaults to true.
+     * The last entry always falls back to its own items when currentItems is not provided.
+     */
+    showPreviousItems?: boolean;
     learnMoreUrl?: string;
     translations?: Translations;
     callbacks?: Callbacks;
     componentOverrides?: CioPiaComponentOverrides;
 }
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, learnMoreUrl, translations, callbacks, componentOverrides, }: ConversationHistoryProps): React.JSX.Element;
+export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, 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, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }: PiaConversationProps): React.JSX.Element;
+export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, }: PiaConversationProps): React.JSX.Element;

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

@@ -1,12 +1,13 @@
 import { Nullable } from '@constructor-io/constructorio-client-javascript';
 import MockConstructorIOClient from './mocks/MockConstructorIOClient';
-import { Item, GetAnswerResultsResponse } from '../types';
+import { Formatters, Item, GetAnswerResultsResponse } from '../types';
 export interface UseAnswerResultsProps {
     itemId: string;
     variationId?: string;
     threadId?: string;
     cioClient: MockConstructorIOClient;
     parameters?: Record<string, any>;
+    formatImageUrl?: Formatters['formatImageUrl'];
 }
 export interface UseAnswerResultsReturn {
     data: Nullable<GetAnswerResultsResponse>;
@@ -15,4 +16,4 @@ export interface UseAnswerResultsReturn {
     error: Error | null;
     getAnswer: (question: string) => void;
 }
-export default function useAnswerResults({ itemId, variationId, threadId, cioClient, }: UseAnswerResultsProps): UseAnswerResultsReturn;
+export default function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImageUrl, }: UseAnswerResultsProps): UseAnswerResultsReturn;

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

@@ -1,4 +1,4 @@
-import { SuggestedQuestionsParameters } from '../types';
+import { Formatters, SuggestedQuestionsParameters } from '../types';
 import MockConstructorIOClient from './mocks/MockConstructorIOClient';
 import { UseAnswerResultsReturn } from './useAnswerResults';
 import { UseSuggestedQuestionsReturn } from './useSuggestedQuestions';
@@ -9,6 +9,8 @@ export interface UseCioPiaProps {
     threadId?: string;
     cioClient?: MockConstructorIOClient;
     suggestedQuestionsParameters?: SuggestedQuestionsParameters;
+    /** Define outside the component or wrap with useCallback to avoid unnecessary re-renders. */
+    formatImageUrl?: Formatters['formatImageUrl'];
 }
 export interface UseCioPiaReturn {
     suggestedQuestions: UseSuggestedQuestionsReturn;

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

@@ -1,9 +1,10 @@
-import { ConversationEntry, Question, Item } from '../types';
+import { Callbacks, ConversationEntry, Question, Item } from '../types';
 import { UseCioPiaReturn } from './useCioPia';
 export interface UseConversationProps {
     pia: UseCioPiaReturn;
     itemId: string;
     isConversation: boolean;
+    callbacks?: Callbacks;
 }
 export interface UseConversationReturn {
     currentQuestion: string;
@@ -16,4 +17,4 @@ export interface UseConversationReturn {
     handleSubmitQuestion: (question: string) => void;
     resetState: () => void;
 }
-export default function useConversation({ pia, itemId, isConversation, }: UseConversationProps): UseConversationReturn;
+export default function useConversation({ pia, itemId, isConversation, callbacks, }: UseConversationProps): UseConversationReturn;