@constructor-io/constructorio-ui-pia 2.11.0 → 2.12.0

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

@@ -21,7 +21,7 @@ const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/Pi
 // eslint-disable-next-line complexity
 function CioPiaQna(props) {
     var _a;
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, parameters, trackingConfigs, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -32,6 +32,7 @@ function CioPiaQna(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        answerParameters,
         parameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
     });

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

@@ -46,12 +46,10 @@ function buildMergedOverrides(componentOverrides, priceSectionOverride) {
     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({}, (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _c === void 0 ? void 0 : _c.productCard), { content: Object.assign(Object.assign({}, content), defaults) }) }) });
 }
 function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }) {
-    const wrapperRef = (0, react_1.useRef)(null);
     const { onAddToCart } = callbacks || {};
     const addToCartHandler = (0, react_1.useCallback)((event, product) => {
         onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, event);
     }, [onAddToCart]);
-    // Determine to use user-defined click handler or default behavior
     const productClickHandler = (0, react_1.useCallback)((item) => {
         const position = items.findIndex((i) => i.id === item.id);
         if (onResultClick && question) {
@@ -65,40 +63,37 @@ function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick
             window.open(item.url, '_blank', 'noopener,noreferrer');
         }
     }, [callbacks, items, onResultClick, question, qnaResultId]);
-    // Set up event listener for product card clicks
-    (0, react_1.useEffect)(() => {
-        const el = wrapperRef.current;
-        if (!el)
-            return undefined;
-        const handleClick = (e) => {
-            const { product } = e.detail;
-            if (product) {
-                productClickHandler(product);
-            }
-        };
-        el.addEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
-        return () => {
-            el.removeEventListener(constructorio_ui_components_1.CIO_EVENTS.productCard.click, handleClick);
-        };
-    }, [productClickHandler]);
     const priceSectionOverride = (0, react_1.useMemo)(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
+    const clickHandlerProps = (0, react_1.useMemo)(() => ({
+        onProductClick: productClickHandler,
+        onAddToCart: onAddToCart ? addToCartHandler : undefined,
+    }), [productClickHandler, onAddToCart, addToCartHandler]);
     const mergedOverrides = (0, react_1.useMemo)(() => {
-        var _a;
+        var _a, _b;
         const baseOverrides = buildMergedOverrides(componentOverrides, priceSectionOverride);
+        // Override priority: carousel.reactNode → item.reactNode → item.productCard.reactNode → default ProductCard.
+        // The casts are required because the override signatures don't declare these extra props,
+        // but consumers receive them as part of the render-props contract documented in CioPiaProps.
+        const carouselOverride = baseOverrides.reactNode;
+        if (typeof carouselOverride === 'function') {
+            return Object.assign(Object.assign({}, baseOverrides), { reactNode: (props) => carouselOverride(Object.assign(Object.assign({}, props), clickHandlerProps)) });
+        }
         const cardOverrides = (_a = baseOverrides.item) === null || _a === void 0 ? void 0 : _a.productCard;
-        // The carousel never passes onAddToCart down and the card hides the button without it, so
-        // re-render the card with the handler. A full card override owns its own layout - skip it.
-        if (!onAddToCart || (cardOverrides === null || cardOverrides === void 0 ? void 0 : cardOverrides.reactNode)) {
-            return baseOverrides;
+        const itemOverride = (_b = baseOverrides.item) === null || _b === void 0 ? void 0 : _b.reactNode;
+        if (typeof itemOverride === 'function') {
+            return Object.assign(Object.assign({}, baseOverrides), { item: Object.assign(Object.assign({}, baseOverrides.item), { reactNode: (props) => itemOverride(Object.assign(Object.assign({}, props), clickHandlerProps)) }) });
+        }
+        if (typeof (cardOverrides === null || cardOverrides === void 0 ? void 0 : cardOverrides.reactNode) === 'function') {
+            const originalReactNode = cardOverrides.reactNode;
+            return Object.assign(Object.assign({}, baseOverrides), { item: Object.assign(Object.assign({}, baseOverrides.item), { productCard: Object.assign(Object.assign({}, cardOverrides), { reactNode: (props) => originalReactNode(Object.assign(Object.assign({}, props), clickHandlerProps)) }) }) });
         }
-        const addToCartText = (0, translate_1.translate)('Add to Cart', translations);
-        return Object.assign(Object.assign({}, baseOverrides), { item: Object.assign(Object.assign({}, baseOverrides.item), { productCard: Object.assign(Object.assign({}, cardOverrides), { reactNode: ({ product }) => (react_1.default.createElement(constructorio_ui_components_1.ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: addToCartHandler, componentOverrides: cardOverrides })) }) }) });
-    }, [componentOverrides, priceSectionOverride, onAddToCart, translations, addToCartHandler]);
-    // If there are no items, do not render the carousel
+        // Default: render ProductCard with handlers directly
+        const addToCartText = onAddToCart ? (0, translate_1.translate)('Add to Cart', translations) : undefined;
+        return Object.assign(Object.assign({}, baseOverrides), { item: Object.assign(Object.assign({}, baseOverrides.item), { productCard: Object.assign(Object.assign({}, cardOverrides), { reactNode: ({ product }) => (react_1.default.createElement(constructorio_ui_components_1.ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: clickHandlerProps.onAddToCart, onProductClick: clickHandlerProps.onProductClick, componentOverrides: cardOverrides })) }) }) });
+    }, [componentOverrides, priceSectionOverride, clickHandlerProps, onAddToCart, translations]);
     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: mergedOverrides })));
+    return react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: items, componentOverrides: mergedOverrides });
 }
 exports.default = PiaCustomCarousel;

package/lib/cjs/hooks/useAnswerResults.js

@@ -1,18 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const react_1 = require("react");
 const transformers_1 = require("../utils/transformers");
-const fetchAnswerResults = ({ client, itemId, question, variationId, threadId, parameters, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    const response = yield client.agent.getAnswerResults({
-        itemId,
-        variationId,
-        threadId,
-        question,
-        parameters,
-    });
-    return response;
-});
 function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = (0, react_1.useState)(null);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -24,9 +13,10 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
-        fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId, parameters })
-            .then((fetchedAnswerResults) => {
-            setAnswerResults(fetchedAnswerResults);
+        cioClient.agent.pia
+            .getAnswerResults(itemId, question, Object.assign({ threadId, variationId }, parameters))
+            .then((response) => {
+            setAnswerResults(response);
             setError(null);
         })
             .catch((err) => {

package/lib/cjs/hooks/useCioPia.js

@@ -4,27 +4,65 @@ const tslib_1 = require("tslib");
 const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults"));
 const usePiaClient_1 = tslib_1.__importDefault(require("./usePiaClient"));
 const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
+// TODO: remove SUPPORTED_DEPRECATED_PARAMS and mapDeprecatedParameters once the
+// deprecated `parameters` prop is removed from CioPiaProps.
+const SUPPORTED_DEPRECATED_PARAMS = {
+    guard: { camelKey: 'guard', isObject: false },
+    num_results: { camelKey: 'numResults', isObject: false },
+    numResults: { camelKey: 'numResults', isObject: false },
+    pre_filter_expression: { camelKey: 'preFilterExpression', isObject: true },
+    preFilterExpression: { camelKey: 'preFilterExpression', isObject: true },
+    fmt_options: { camelKey: 'fmtOptions', isObject: true },
+    fmtOptions: { camelKey: 'fmtOptions', isObject: true },
+};
+function mapDeprecatedParameters(params) {
+    if (!params)
+        return undefined;
+    const mapped = {};
+    let hasEntries = false;
+    for (const [key, value] of Object.entries(params)) {
+        const config = SUPPORTED_DEPRECATED_PARAMS[key];
+        if (!config)
+            continue;
+        hasEntries = true;
+        if (config.isObject && typeof value === 'string') {
+            try {
+                mapped[config.camelKey] = JSON.parse(value);
+            }
+            catch (_a) {
+                mapped[config.camelKey] = value;
+            }
+        }
+        else {
+            mapped[config.camelKey] = value;
+        }
+    }
+    return hasEntries ? mapped : undefined;
+}
 function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, parameters, formatImageUrl, } = props;
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, } = props;
     const { cioClient: client, threadId } = (0, usePiaClient_1.default)({
         apiKey,
         threadId: providedThreadId,
         cioClient: providedClient,
     });
+    const mappedDeprecated = mapDeprecatedParameters(parameters);
+    const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters
+        ? Object.assign(Object.assign({}, mappedDeprecated), suggestedQuestionsParameters) : undefined;
+    const mergedAnswerParams = mappedDeprecated || answerParameters ? Object.assign(Object.assign({}, mappedDeprecated), answerParameters) : undefined;
     const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
         itemId,
         variationId,
         threadId,
         cioClient: client,
-        parameters: suggestedQuestionsParameters,
-        requestParameters: parameters,
+        parameters: mergedSuggestedParams,
     });
     const answers = (0, useAnswerResults_1.default)({
         itemId,
         variationId,
         threadId,
         cioClient: client,
-        parameters,
+        parameters: mergedAnswerParams,
         formatImageUrl,
     });
     return {

package/lib/cjs/hooks/usePiaClient.js

@@ -2,20 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
+const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const version_1 = tslib_1.__importDefault(require("../version"));
-/**
- * Resolves the client and thread ID every mode needs: the caller's client when they supplied
- * one, otherwise a client built from the API key, plus a generated thread ID that stays stable
- * for the life of the component.
- */
 function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, }) {
     const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
     const client = (0, react_1.useMemo)(() => {
         if (providedClient)
             return providedClient;
-        return new MockConstructorIOClient_1.default({
+        return new constructorio_client_javascript_1.default({
             apiKey,
             sendTrackingEvents: true,
             version: `cio-ui-pia-${version_1.default}`,

package/lib/cjs/hooks/useRecsPod.js

@@ -33,9 +33,14 @@ function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, form
     const strategy = (parameters === null || parameters === void 0 ? void 0 : parameters.strategy) || DEFAULT_STRATEGY;
     const { numResults, defaultTitle } = parameters || {};
     const fetchResult = (0, react_1.useCallback)((shopperInput, source) => {
-        // Nothing to ask, so settle the loading state rather than leaving the caller in a skeleton
-        // that never resolves.
-        if (!cioClient) {
+        var _a;
+        // TODO: once getRecs is added to the JS client SDK, replace this guard+cast
+        // with a direct call: cioClient.agent.getRecs({...})
+        const getRecs = (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.agent) === null || _a === void 0 ? void 0 : _a.getRecs;
+        if (!cioClient || !getRecs) {
+            if (cioClient && !getRecs) {
+                console.info('[CioPia] getRecs is not available on the client SDK yet.');
+            }
             setIsLoading(false);
             return;
         }
@@ -45,8 +50,8 @@ function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, form
         setIsLoading(true);
         setError(null);
         setHasUnsupportedInput(false);
-        cioClient.agent
-            .getRecs({
+        getRecs
+            .call(cioClient.agent, {
             itemId,
             variationId,
             threadId,

package/lib/cjs/hooks/useSuggestedQuestions.js

@@ -1,38 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const react_1 = require("react");
-const fetchSuggestedQuestions = ({ client, itemId, variationId, threadId, parameters, requestParameters, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    const response = yield client.agent.getSuggestedQuestions({
-        itemId,
-        variationId,
-        threadId,
-        parameters,
-        requestParameters,
-    });
-    return response.questions;
-});
-function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, requestParameters, }) {
+function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, }) {
     const [questions, setQuestions] = (0, react_1.useState)([]);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
-    // Serialize to a primitive so an object-literal prop doesn't retrigger the auto-fetch effect each render.
-    const requestParametersKey = JSON.stringify(requestParameters);
+    const serializedParameters = (0, react_1.useMemo)(() => JSON.stringify(parameters), [parameters]);
     const fetchResult = (0, react_1.useCallback)(() => {
         if (!cioClient)
             return;
         setIsLoading(true);
         setError(null);
-        fetchSuggestedQuestions({
-            client: cioClient,
-            itemId,
-            variationId,
-            threadId,
-            parameters,
-            requestParameters,
-        })
-            .then((fetchedQuestions) => {
-            setQuestions(fetchedQuestions);
+        cioClient.agent.pia
+            .getSuggestedQuestions(itemId, Object.assign({ threadId,
+            variationId }, parameters))
+            .then((response) => {
+            setQuestions(response.questions);
             setError(null);
         })
             .catch((err) => {
@@ -41,8 +24,9 @@ function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, param
             .finally(() => {
             setIsLoading(false);
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- primitive deps prevent refetch loop
-    }, [cioClient, itemId, variationId, threadId, parameters === null || parameters === void 0 ? void 0 : parameters.numResults, requestParametersKey]);
+        // parameters is serialized via serializedParameters to prevent refetch on identity changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cioClient, itemId, variationId, threadId, serializedParameters]);
     (0, react_1.useEffect)(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/cjs/types.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeedbackType = void 0;
-const tslib_1 = require("tslib");
 var FeedbackType;
 (function (FeedbackType) {
     FeedbackType["UP"] = "up";
     FeedbackType["DOWN"] = "down";
 })(FeedbackType = exports.FeedbackType || (exports.FeedbackType = {}));
-tslib_1.__exportStar(require("./hooks/mocks/types"), exports);

package/lib/cjs/version.js

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

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

@@ -17,7 +17,7 @@ import PiaConversation from '../PiaConversation/PiaConversation';
 /** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
 // eslint-disable-next-line complexity
 export default function CioPiaQna(props) {
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, parameters, trackingConfigs, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -28,6 +28,7 @@ export default function CioPiaQna(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        answerParameters,
         parameters,
         formatImageUrl: formatters?.formatImageUrl,
     });

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useRef, useEffect, useMemo } from 'react';
-import { Carousel, ProductCard, CIO_EVENTS, } from '@constructor-io/constructorio-ui-components';
+import React, { useCallback, useMemo } from 'react';
+import { Carousel, ProductCard, } from '@constructor-io/constructorio-ui-components';
 import { sanitizeHtml } from '../../utils/contentTransformers';
 import { translate } from '../../utils/translate';
 function HtmlDescription({ product }) {
@@ -55,12 +55,10 @@ function buildMergedOverrides(componentOverrides, priceSectionOverride) {
     };
 }
 export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }) {
-    const wrapperRef = useRef(null);
     const { onAddToCart } = callbacks || {};
     const addToCartHandler = useCallback((event, product) => {
         onAddToCart?.(product, event);
     }, [onAddToCart]);
-    // Determine to use user-defined click handler or default behavior
     const productClickHandler = useCallback((item) => {
         const position = items.findIndex((i) => i.id === item.id);
         if (onResultClick && question) {
@@ -74,47 +72,62 @@ export default function PiaCustomCarousel({ items, componentOverrides, callbacks
             window.open(item.url, '_blank', 'noopener,noreferrer');
         }
     }, [callbacks, items, onResultClick, question, qnaResultId]);
-    // Set up event listener for product card clicks
-    useEffect(() => {
-        const el = wrapperRef.current;
-        if (!el)
-            return undefined;
-        const handleClick = (e) => {
-            const { product } = e.detail;
-            if (product) {
-                productClickHandler(product);
-            }
-        };
-        el.addEventListener(CIO_EVENTS.productCard.click, handleClick);
-        return () => {
-            el.removeEventListener(CIO_EVENTS.productCard.click, handleClick);
-        };
-    }, [productClickHandler]);
     const priceSectionOverride = useMemo(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
+    const clickHandlerProps = useMemo(() => ({
+        onProductClick: productClickHandler,
+        onAddToCart: onAddToCart ? addToCartHandler : undefined,
+    }), [productClickHandler, onAddToCart, addToCartHandler]);
     const mergedOverrides = useMemo(() => {
         const baseOverrides = buildMergedOverrides(componentOverrides, priceSectionOverride);
+        // Override priority: carousel.reactNode → item.reactNode → item.productCard.reactNode → default ProductCard.
+        // The casts are required because the override signatures don't declare these extra props,
+        // but consumers receive them as part of the render-props contract documented in CioPiaProps.
+        const carouselOverride = baseOverrides.reactNode;
+        if (typeof carouselOverride === 'function') {
+            return {
+                ...baseOverrides,
+                reactNode: (props) => carouselOverride({ ...props, ...clickHandlerProps }),
+            };
+        }
         const cardOverrides = baseOverrides.item?.productCard;
-        // The carousel never passes onAddToCart down and the card hides the button without it, so
-        // re-render the card with the handler. A full card override owns its own layout - skip it.
-        if (!onAddToCart || cardOverrides?.reactNode) {
-            return baseOverrides;
+        const itemOverride = baseOverrides.item?.reactNode;
+        if (typeof itemOverride === 'function') {
+            return {
+                ...baseOverrides,
+                item: {
+                    ...baseOverrides.item,
+                    reactNode: (props) => itemOverride({ ...props, ...clickHandlerProps }),
+                },
+            };
+        }
+        if (typeof cardOverrides?.reactNode === 'function') {
+            const originalReactNode = cardOverrides.reactNode;
+            return {
+                ...baseOverrides,
+                item: {
+                    ...baseOverrides.item,
+                    productCard: {
+                        ...cardOverrides,
+                        reactNode: (props) => originalReactNode({ ...props, ...clickHandlerProps }),
+                    },
+                },
+            };
         }
-        const addToCartText = translate('Add to Cart', translations);
+        // Default: render ProductCard with handlers directly
+        const addToCartText = onAddToCart ? translate('Add to Cart', translations) : undefined;
         return {
             ...baseOverrides,
             item: {
                 ...baseOverrides.item,
                 productCard: {
                     ...cardOverrides,
-                    reactNode: ({ product }) => (React.createElement(ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: addToCartHandler, componentOverrides: cardOverrides })),
+                    reactNode: ({ product }) => (React.createElement(ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: clickHandlerProps.onAddToCart, onProductClick: clickHandlerProps.onProductClick, componentOverrides: cardOverrides })),
                 },
             },
         };
-    }, [componentOverrides, priceSectionOverride, onAddToCart, translations, addToCartHandler]);
-    // If there are no items, do not render the carousel
+    }, [componentOverrides, priceSectionOverride, clickHandlerProps, onAddToCart, translations]);
     if (items.length === 0) {
         return null;
     }
-    return (React.createElement("div", { ref: wrapperRef },
-        React.createElement(Carousel, { items: items, componentOverrides: mergedOverrides })));
+    return React.createElement(Carousel, { items: items, componentOverrides: mergedOverrides });
 }

package/lib/mjs/hooks/useAnswerResults.js

@@ -1,15 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
 import { extractAndTransformItems } from '../utils/transformers';
-const fetchAnswerResults = async ({ client, itemId, question, variationId, threadId, parameters, }) => {
-    const response = await client.agent.getAnswerResults({
-        itemId,
-        variationId,
-        threadId,
-        question,
-        parameters,
-    });
-    return response;
-};
 export default function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -21,9 +11,10 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
-        fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId, parameters })
-            .then((fetchedAnswerResults) => {
-            setAnswerResults(fetchedAnswerResults);
+        cioClient.agent.pia
+            .getAnswerResults(itemId, question, { threadId, variationId, ...parameters })
+            .then((response) => {
+            setAnswerResults(response);
             setError(null);
         })
             .catch((err) => {

package/lib/mjs/hooks/useCioPia.js

@@ -1,27 +1,66 @@
 import useAnswerResults from './useAnswerResults';
 import usePiaClient from './usePiaClient';
 import useSuggestedQuestions from './useSuggestedQuestions';
+// TODO: remove SUPPORTED_DEPRECATED_PARAMS and mapDeprecatedParameters once the
+// deprecated `parameters` prop is removed from CioPiaProps.
+const SUPPORTED_DEPRECATED_PARAMS = {
+    guard: { camelKey: 'guard', isObject: false },
+    num_results: { camelKey: 'numResults', isObject: false },
+    numResults: { camelKey: 'numResults', isObject: false },
+    pre_filter_expression: { camelKey: 'preFilterExpression', isObject: true },
+    preFilterExpression: { camelKey: 'preFilterExpression', isObject: true },
+    fmt_options: { camelKey: 'fmtOptions', isObject: true },
+    fmtOptions: { camelKey: 'fmtOptions', isObject: true },
+};
+function mapDeprecatedParameters(params) {
+    if (!params)
+        return undefined;
+    const mapped = {};
+    let hasEntries = false;
+    for (const [key, value] of Object.entries(params)) {
+        const config = SUPPORTED_DEPRECATED_PARAMS[key];
+        if (!config)
+            continue;
+        hasEntries = true;
+        if (config.isObject && typeof value === 'string') {
+            try {
+                mapped[config.camelKey] = JSON.parse(value);
+            }
+            catch {
+                mapped[config.camelKey] = value;
+            }
+        }
+        else {
+            mapped[config.camelKey] = value;
+        }
+    }
+    return hasEntries ? mapped : undefined;
+}
 export default function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, parameters, formatImageUrl, } = props;
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, } = props;
     const { cioClient: client, threadId } = usePiaClient({
         apiKey,
         threadId: providedThreadId,
         cioClient: providedClient,
     });
+    const mappedDeprecated = mapDeprecatedParameters(parameters);
+    const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters
+        ? { ...mappedDeprecated, ...suggestedQuestionsParameters }
+        : undefined;
+    const mergedAnswerParams = mappedDeprecated || answerParameters ? { ...mappedDeprecated, ...answerParameters } : undefined;
     const suggestedQuestions = useSuggestedQuestions({
         itemId,
         variationId,
         threadId,
         cioClient: client,
-        parameters: suggestedQuestionsParameters,
-        requestParameters: parameters,
+        parameters: mergedSuggestedParams,
     });
     const answers = useAnswerResults({
         itemId,
         variationId,
         threadId,
         cioClient: client,
-        parameters,
+        parameters: mergedAnswerParams,
         formatImageUrl,
     });
     return {

package/lib/mjs/hooks/usePiaClient.js

@@ -1,18 +1,13 @@
 import { useMemo, useState } from 'react';
-import MockConstructorIOClient from './mocks/MockConstructorIOClient';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import version from '../version';
-/**
- * Resolves the client and thread ID every mode needs: the caller's client when they supplied
- * one, otherwise a client built from the API key, plus a generated thread ID that stays stable
- * for the life of the component.
- */
 export default function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, }) {
     const [generatedThreadId] = useState(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
     const client = useMemo(() => {
         if (providedClient)
             return providedClient;
-        return new MockConstructorIOClient({
+        return new ConstructorIOClient({
             apiKey,
             sendTrackingEvents: true,
             version: `cio-ui-pia-${version}`,

package/lib/mjs/hooks/useRecsPod.js

@@ -30,9 +30,13 @@ export default function useRecsPod({ itemId, variationId, threadId, cioClient, p
     const strategy = parameters?.strategy || DEFAULT_STRATEGY;
     const { numResults, defaultTitle } = parameters || {};
     const fetchResult = useCallback((shopperInput, source) => {
-        // Nothing to ask, so settle the loading state rather than leaving the caller in a skeleton
-        // that never resolves.
-        if (!cioClient) {
+        // TODO: once getRecs is added to the JS client SDK, replace this guard+cast
+        // with a direct call: cioClient.agent.getRecs({...})
+        const getRecs = cioClient?.agent?.getRecs;
+        if (!cioClient || !getRecs) {
+            if (cioClient && !getRecs) {
+                console.info('[CioPia] getRecs is not available on the client SDK yet.');
+            }
             setIsLoading(false);
             return;
         }
@@ -42,8 +46,8 @@ export default function useRecsPod({ itemId, variationId, threadId, cioClient, p
         setIsLoading(true);
         setError(null);
         setHasUnsupportedInput(false);
-        cioClient.agent
-            .getRecs({
+        getRecs
+            .call(cioClient.agent, {
             itemId,
             variationId,
             threadId,