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

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

@@ -17,11 +17,12 @@ const translate_1 = require("../../utils/translate");
 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"));
+const StatusRegion_1 = tslib_1.__importStar(require("../StatusRegion/StatusRegion"));
 /** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
 // 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 +33,7 @@ function CioPiaQna(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        answerParameters,
         parameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
     });
@@ -54,10 +56,12 @@ function CioPiaQna(props) {
         callbackContainerRef(node);
     }, [viewportContainerRef, callbackContainerRef]);
     const qnaResultId = (_a = pia.answers.data) === null || _a === void 0 ? void 0 : _a.qna_result_id;
-    // The text bars stand in for the answer alone, so they track the answer request only. The question
+    // The text bars and the "Loading answer" status track the answer request only. The question
     // row keeps the combined `isLoading`: the follow-up questions that refill it arrive with the
     // answer, so the row is waiting on either request.
     const isAnswerLoading = pia.answers.isLoading;
+    // Inline mode renders the answer outside any live region.
+    const answerStatus = (0, StatusRegion_1.answerStatusMessage)(isAnswerLoading, !!currentAnswer, translations);
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -71,6 +75,7 @@ function CioPiaQna(props) {
     const conversationHistoryProps = {
         conversationHistory,
         isLoading,
+        isAnswerLoading,
         error,
         currentItems,
         showFeedback,
@@ -102,9 +107,10 @@ function CioPiaQna(props) {
             react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations)),
             react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }),
             isAnswerLoading && react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }),
-            !isAnswerLoading && error && react_1.default.createElement(ErrorBlock_1.default, { message: (error === null || error === void 0 ? void 0 : error.message) || 'Unexpected error' }),
+            !isAnswerLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { key: error.message || (0, translate_1.translate)('Unexpected error', translations), message: error.message, translations: translations })),
             !isAnswerLoading && !error && currentAnswer && (react_1.default.createElement(PiaInlineAnswer_1.default, { currentAnswer: currentAnswer, currentItems: currentItems, showFeedback: showFeedback, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, onFeedback: handleFeedback, onResultClick: tracking.trackResultClick, question: currentQuestion, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
             isLoading && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
-            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })))));
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions }))),
+        react_1.default.createElement(StatusRegion_1.default, { message: answerStatus, "data-testid": 'answer-status' })));
 }
 exports.default = CioPiaQna;

package/lib/cjs/components/CioPia/CioPiaStyles.css

@@ -49,3 +49,8 @@
   line-height: 20px;
   color: #6b7280;
 }
+
+.cio-product-card[role='link']:focus-visible {
+  outline: 2px solid #0f1324;
+  outline-offset: 2px;
+}

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

@@ -11,6 +11,13 @@ function HtmlDescription({ product }) {
         return null;
     return (react_1.default.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: (0, contentTransformers_1.sanitizeHtml)(description) } }));
 }
+// The card root is focusable and acts as a link, so Enter must do what a click does.
+// Only for the card itself: Enter on the Add to Cart button inside it is that button's.
+function handleCardKeyDown(event) {
+    if (event.key === 'Enter' && event.target === event.currentTarget) {
+        event.currentTarget.click();
+    }
+}
 function createPriceSectionOverride(priceCurrency) {
     return function PriceSectionOverride({ product }) {
         const { price, salePrice } = product;
@@ -46,12 +53,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 +70,40 @@ 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', 
+                        // Reachable by Tab. The name is the product name: a name computed from the
+                        // card's content would also swallow the Add to Cart button's text.
+                        role: 'link', "aria-label": product.name || undefined, tabIndex: 0, onKeyDown: handleCardKeyDown, 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/components/ConversationHistory/ConversationHistory.js

@@ -8,7 +8,9 @@ const Disclaimer_1 = tslib_1.__importDefault(require("../CioPia/Disclaimer"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
 const PiaCustomCarousel_1 = tslib_1.__importDefault(require("../CioPia/PiaCustomCarousel"));
-function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
+const StatusRegion_1 = tslib_1.__importStar(require("../StatusRegion/StatusRegion"));
+const translate_1 = require("../../utils/translate");
+function ConversationHistory({ conversationHistory, isLoading, isAnswerLoading = isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = scrollContainerRef.current;
@@ -19,24 +21,27 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
         });
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
+    const lastEntry = conversationHistory[conversationHistory.length - 1];
+    const answerStatus = (0, StatusRegion_1.answerStatusMessage)(isAnswerLoading, !!(lastEntry === null || lastEntry === void 0 ? void 0 : lastEntry.answer), translations);
     const disclaimer = (react_1.default.createElement(Disclaimer_1.default, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.disclaimer }));
     return (react_1.default.createElement("div", { className: 'cio-pia-conversation-history' },
         disclaimerPosition === 'top' && disclaimer,
-        react_1.default.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
+        react_1.default.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', tabIndex: 0, "aria-label": (0, translate_1.translate)('Conversation history', translations) }, 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' },
+                isLast && isLoading && (react_1.default.createElement("div", { className: 'cio-pia-conversation-loading' },
                     react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }))),
-                isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { message: error.message || 'Unexpected error' })),
+                isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { key: error.message || (0, translate_1.translate)('Unexpected error', translations), message: error.message, translations: translations, announce: false })),
                 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, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
                     isLast && showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback }))))));
         })),
-        disclaimerPosition === 'bottom' && disclaimer));
+        disclaimerPosition === 'bottom' && disclaimer,
+        react_1.default.createElement(StatusRegion_1.default, { message: answerStatus, "data-testid": 'answer-status' })));
 }
 exports.default = ConversationHistory;

package/lib/cjs/components/Error/ErrorBlock.js

@@ -2,22 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const translate_1 = require("../../utils/translate");
 function WarningIcon() {
-    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (react_1.default.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
         react_1.default.createElement("path", { d: 'M12.0004 2C6.4804 2 2.0004 6.48 2.0004 12C2.0004 17.52 6.4804 22 12.0004 22C17.5204 22 22.0004 17.52 22.0004 12C22.0004 6.48 17.5204 2 12.0004 2ZM13.0004 17H11.0004V15H13.0004V17ZM13.0004 13H11.0004V7H13.0004V13Z', fill: '#F1923A' })));
 }
 function RetryIcon() {
-    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
         react_1.default.createElement("path", { d: 'M11.7633 4.23329C10.7966 3.26663 9.46992 2.66663 7.99659 2.66663C5.04992 2.66663 2.66992 5.05329 2.66992 7.99996C2.66992 10.9466 5.04992 13.3333 7.99659 13.3333C10.4833 13.3333 12.5566 11.6333 13.1499 9.33329H11.7633C11.2166 10.8866 9.73659 12 7.99659 12C5.78992 12 3.99659 10.2066 3.99659 7.99996C3.99659 5.79329 5.78992 3.99996 7.99659 3.99996C9.10326 3.99996 10.0899 4.45996 10.8099 5.18663L8.66326 7.33329H13.3299V2.66663L11.7633 4.23329Z', fill: 'white' })));
 }
-function ErrorBlock({ message, onRetry = undefined }) {
+function ErrorBlock({ message, onRetry = undefined, translations, announce = true, }) {
+    const resolvedMessage = message || (0, translate_1.translate)('Unexpected error', translations);
     return (react_1.default.createElement("div", { className: 'cio-pia-error-block-container', "data-testid": 'error-block' },
         react_1.default.createElement("div", { className: 'cio-pia-error-block-warning-icon-container', "data-testid": 'error-block-warning-icon' },
             react_1.default.createElement(WarningIcon, null)),
         react_1.default.createElement("div", { className: 'cio-pia-error-block-text-container' },
-            react_1.default.createElement("p", { className: 'cio-pia-error-block-text' }, message),
+            react_1.default.createElement("p", { className: 'cio-pia-error-block-text', role: announce ? 'alert' : undefined }, resolvedMessage),
             onRetry && (react_1.default.createElement("button", { type: 'button', onClick: onRetry, className: 'cio-pia-error-block-retry-button' },
                 react_1.default.createElement(RetryIcon, null),
-                "Retry")))));
+                (0, translate_1.translate)('Retry', translations))))));
 }
 exports.default = ErrorBlock;

package/lib/cjs/components/Feedback/Feedback.js

@@ -6,10 +6,10 @@ const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-
 const types_1 = require("../../types");
 const translate_1 = require("../../utils/translate");
 function ThumbsUpIcon({ isSelected }) {
-    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (react_1.default.createElement("path", { d: 'M3.33317 6.66667H0.666504V14.6667H3.33317V6.66667ZM5.99984 14.6667C5.2665 14.6667 4.6665 14.0667 4.6665 13.3333V6.66667C4.6665 6.3 4.81317 5.96667 5.05317 5.72667L9.4465 1.33333L10.1532 2.03333C10.3332 2.21333 10.4465 2.46667 10.4465 2.74L10.4265 2.95333L9.79317 6.00001H13.9998C14.7332 6.00001 15.3332 6.60001 15.3332 7.33334V8.66668C15.3332 8.84001 15.2998 9.00001 15.2398 9.15334L13.2265 13.8533C13.0265 14.3333 12.5532 14.6667 11.9998 14.6667H5.99984Z', fill: '#4CAF50', fillOpacity: '1' })) : (react_1.default.createElement("path", { d: 'M5.99984 14.6667H11.9998C12.5532 14.6667 13.0265 14.3333 13.2265 13.8533L15.2398 9.15334C15.2998 9.00001 15.3332 8.84001 15.3332 8.66668V7.33334C15.3332 6.60001 14.7332 6.00001 13.9998 6.00001H9.79317L10.4265 2.95334L10.4465 2.74001C10.4465 2.46668 10.3332 2.21334 10.1532 2.03334L9.4465 1.33334L5.05317 5.72668C4.81317 5.96668 4.6665 6.30001 4.6665 6.66668V13.3333C4.6665 14.0667 5.2665 14.6667 5.99984 14.6667ZM5.99984 6.66668L8.89317 3.77334L7.99984 7.33334H13.9998V8.66668L11.9998 13.3333H5.99984V6.66668ZM0.666504 6.66668H3.33317V14.6667H0.666504V6.66668Z', fill: '#0F1324', fillOpacity: '0.6' }))));
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' }, isSelected ? (react_1.default.createElement("path", { d: 'M3.33317 6.66667H0.666504V14.6667H3.33317V6.66667ZM5.99984 14.6667C5.2665 14.6667 4.6665 14.0667 4.6665 13.3333V6.66667C4.6665 6.3 4.81317 5.96667 5.05317 5.72667L9.4465 1.33333L10.1532 2.03333C10.3332 2.21333 10.4465 2.46667 10.4465 2.74L10.4265 2.95333L9.79317 6.00001H13.9998C14.7332 6.00001 15.3332 6.60001 15.3332 7.33334V8.66668C15.3332 8.84001 15.2998 9.00001 15.2398 9.15334L13.2265 13.8533C13.0265 14.3333 12.5532 14.6667 11.9998 14.6667H5.99984Z', fill: '#4CAF50', fillOpacity: '1' })) : (react_1.default.createElement("path", { d: 'M5.99984 14.6667H11.9998C12.5532 14.6667 13.0265 14.3333 13.2265 13.8533L15.2398 9.15334C15.2998 9.00001 15.3332 8.84001 15.3332 8.66668V7.33334C15.3332 6.60001 14.7332 6.00001 13.9998 6.00001H9.79317L10.4265 2.95334L10.4465 2.74001C10.4465 2.46668 10.3332 2.21334 10.1532 2.03334L9.4465 1.33334L5.05317 5.72668C4.81317 5.96668 4.6665 6.30001 4.6665 6.66668V13.3333C4.6665 14.0667 5.2665 14.6667 5.99984 14.6667ZM5.99984 6.66668L8.89317 3.77334L7.99984 7.33334H13.9998V8.66668L11.9998 13.3333H5.99984V6.66668ZM0.666504 6.66668H3.33317V14.6667H0.666504V6.66668Z', fill: '#0F1324', fillOpacity: '0.6' }))));
 }
 function ThumbsDownIcon({ isSelected }) {
-    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (react_1.default.createElement("path", { d: 'M12.6665 9.33334H15.3332V1.33334H12.6665V9.33334ZM9.99984 1.33334C10.7332 1.33334 11.3332 1.93334 11.3332 2.66668V9.33334C11.3332 9.70001 11.1865 10.0333 10.9465 10.2733L6.55317 14.6667L5.8465 13.9667C5.6665 13.7867 5.55317 13.5333 5.55317 13.26L5.57317 13.0467L6.2065 10H1.99984C1.2665 10 0.666504 9.40001 0.666504 8.66668V7.33334C0.666504 7.16001 0.699837 7.00001 0.759837 6.84668L2.77317 2.14668C2.97317 1.66668 3.4465 1.33334 3.99984 1.33334H9.99984Z', fill: '#F44336', fillOpacity: '1' })) : (react_1.default.createElement("path", { d: 'M9.99984 1.33334H3.99984C3.4465 1.33334 2.97317 1.66668 2.77317 2.14668L0.759837 6.84668C0.699837 7.00001 0.666504 7.16001 0.666504 7.33334V8.66668C0.666504 9.40001 1.2665 10 1.99984 10H6.2065L5.57317 13.0467L5.55317 13.26C5.55317 13.5333 5.6665 13.7867 5.8465 13.9667L6.55317 14.6667L10.9465 10.2733C11.1865 10.0333 11.3332 9.70001 11.3332 9.33334V2.66668C11.3332 1.93334 10.7332 1.33334 9.99984 1.33334ZM9.99984 9.33334L7.1065 12.2267L7.99984 8.66668H1.99984V7.33334L3.99984 2.66668H9.99984V9.33334ZM12.6665 1.33334H15.3332V9.33334H12.6665V1.33334Z', fill: '#0F1324', fillOpacity: '0.6' }))));
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' }, isSelected ? (react_1.default.createElement("path", { d: 'M12.6665 9.33334H15.3332V1.33334H12.6665V9.33334ZM9.99984 1.33334C10.7332 1.33334 11.3332 1.93334 11.3332 2.66668V9.33334C11.3332 9.70001 11.1865 10.0333 10.9465 10.2733L6.55317 14.6667L5.8465 13.9667C5.6665 13.7867 5.55317 13.5333 5.55317 13.26L5.57317 13.0467L6.2065 10H1.99984C1.2665 10 0.666504 9.40001 0.666504 8.66668V7.33334C0.666504 7.16001 0.699837 7.00001 0.759837 6.84668L2.77317 2.14668C2.97317 1.66668 3.4465 1.33334 3.99984 1.33334H9.99984Z', fill: '#F44336', fillOpacity: '1' })) : (react_1.default.createElement("path", { d: 'M9.99984 1.33334H3.99984C3.4465 1.33334 2.97317 1.66668 2.77317 2.14668L0.759837 6.84668C0.699837 7.00001 0.666504 7.16001 0.666504 7.33334V8.66668C0.666504 9.40001 1.2665 10 1.99984 10H6.2065L5.57317 13.0467L5.55317 13.26C5.55317 13.5333 5.6665 13.7867 5.8465 13.9667L6.55317 14.6667L10.9465 10.2733C11.1865 10.0333 11.3332 9.70001 11.3332 9.33334V2.66668C11.3332 1.93334 10.7332 1.33334 9.99984 1.33334ZM9.99984 9.33334L7.1065 12.2267L7.99984 8.66668H1.99984V7.33334L3.99984 2.66668H9.99984V9.33334ZM12.6665 1.33334H15.3332V9.33334H12.6665V1.33334Z', fill: '#0F1324', fillOpacity: '0.6' }))));
 }
 function Feedback({ translations, onFeedback, componentOverride }) {
     const [feedback, setFeedback] = (0, react_1.useState)(null);
@@ -20,9 +20,9 @@ function Feedback({ translations, onFeedback, componentOverride }) {
     return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { translations, onFeedback }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
         react_1.default.createElement("div", { className: 'cio-pia-feedback-container' },
             react_1.default.createElement("p", { className: 'cio-pia-feedback-text' }, (0, translate_1.translate)('Is this answer useful?', translations)),
-            react_1.default.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs up', onClick: () => handleFeedback(types_1.FeedbackType.UP) },
+            react_1.default.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": (0, translate_1.translate)('thumbs up', translations), "aria-pressed": feedback === types_1.FeedbackType.UP, onClick: () => handleFeedback(types_1.FeedbackType.UP) },
                 react_1.default.createElement(ThumbsUpIcon, { isSelected: feedback === types_1.FeedbackType.UP })),
-            react_1.default.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs down', onClick: () => handleFeedback(types_1.FeedbackType.DOWN) },
+            react_1.default.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": (0, translate_1.translate)('thumbs down', translations), "aria-pressed": feedback === types_1.FeedbackType.DOWN, onClick: () => handleFeedback(types_1.FeedbackType.DOWN) },
                 react_1.default.createElement(ThumbsDownIcon, { isSelected: feedback === types_1.FeedbackType.DOWN })))));
 }
 exports.default = Feedback;

package/lib/cjs/components/Input/Input.js

@@ -45,6 +45,7 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
     const resolvedPlaceholder = (translations === null || translations === void 0 ? void 0 : translations[placeholderKey]) !== undefined
         ? (0, translate_1.translate)(placeholderKey, translations)
         : (placeholder !== null && placeholder !== void 0 ? placeholder : (0, translate_1.translate)(placeholderKey));
+    const accessibleName = resolvedPlaceholder || (0, translate_1.translate)('Your question', translations);
     return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: {
             disabled,
             placeholder: resolvedPlaceholder,
@@ -55,7 +56,7 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
         }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: 'cio-pia-input-container' },
-                react_1.default.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: (0, classNames_1.cx)('cio-pia-input', error && 'cio-pia-input--error', !showSendButton && 'cio-pia-input--no-send'), "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined }),
+                react_1.default.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, "aria-label": accessibleName, disabled: disabled, className: (0, classNames_1.cx)('cio-pia-input', error && 'cio-pia-input--error', !showSendButton && 'cio-pia-input--no-send'), "aria-invalid": error ? true : undefined, "aria-describedby": error ? errorId : undefined }),
                 showSendButton && (react_1.default.createElement("button", { type: 'button', onClick: () => handleSubmit(value), className: 'cio-pia-send-button', disabled: disabled },
                     (0, translate_1.translate)('Send', translations),
                     react_1.default.createElement(icons_1.SendIcon, null)))),

package/lib/cjs/components/LoadingSkeleton/LoadingSkeleton.js

@@ -3,7 +3,8 @@ 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 skeleton = (react_1.default.createElement("div", { className: 'cio-pia-loading-skeleton', "data-testid": 'loading-skeleton' },
+// Decorative: loading is announced by the always-mounted status region.
+const skeleton = (react_1.default.createElement("div", { className: 'cio-pia-loading-skeleton', "data-testid": 'loading-skeleton', "aria-hidden": 'true' },
     react_1.default.createElement("div", { className: 'skeleton-bar' }),
     react_1.default.createElement("div", { className: 'skeleton-bar' }),
     react_1.default.createElement("div", { className: 'skeleton-bar skeleton-short' })));

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

@@ -7,13 +7,17 @@ const translate_1 = require("../../utils/translate");
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
 function CloseIcon() {
-    return (react_1.default.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (react_1.default.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
         react_1.default.createElement("path", { d: 'M15.8334 5.34166L14.6584 4.16666L10.0001 8.82499L5.34175 4.16666L4.16675 5.34166L8.82508 9.99999L4.16675 14.6583L5.34175 15.8333L10.0001 11.175L14.6584 15.8333L15.8334 14.6583L11.1751 9.99999L15.8334 5.34166Z', fill: 'currentColor' })));
 }
 function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, isLoading, componentOverrides, translations, onInputFocus, onClose, children, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const dialogRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
     const openModal = (0, react_1.useCallback)(() => {
+        const active = document.activeElement;
+        const isRealTrigger = !!active && active !== document.body && active !== document.documentElement;
+        triggerRef.current = isRealTrigger ? active : null;
         setIsOpen(true);
     }, []);
     const closeModal = (0, react_1.useCallback)(() => {
@@ -28,14 +32,28 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
             dialog.showModal();
             document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
         }
-        else if (dialog.open) {
-            dialog.close();
+        else {
+            if (dialog.open)
+                dialog.close();
             document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
         }
         return () => {
             document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
         };
     }, [isOpen]);
+    // Restore focus to the trigger. Re-runs on `isLoading`: the input trigger is
+    // disabled while a request is in flight and `focus()` would no-op.
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            return;
+        const trigger = triggerRef.current;
+        if (!trigger || !trigger.isConnected)
+            return;
+        if (trigger.disabled)
+            return;
+        trigger.focus();
+        triggerRef.current = null;
+    }, [isOpen, isLoading]);
     (0, react_1.useEffect)(() => {
         const dialog = dialogRef.current;
         if (!dialog)
@@ -72,7 +90,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
             react_1.default.createElement("div", { className: 'cio-pia-modal-content' },
                 react_1.default.createElement("div", { className: 'cio-pia-modal-header' },
                     react_1.default.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, (0, translate_1.translate)('Ask about this product', translations)),
-                    react_1.default.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": 'Close', onClick: closeModal },
+                    react_1.default.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": (0, translate_1.translate)('Close', translations), onClick: closeModal },
                         react_1.default.createElement(CloseIcon, null))),
                 react_1.default.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
 }

package/lib/cjs/components/StatusRegion/StatusRegion.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.answerStatusMessage = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const translate_1 = require("../../utils/translate");
+// Inline so it stays hidden for consumers who do not load the stylesheet.
+const SR_ONLY_STYLE = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0,
+};
+/**
+ * Visually hidden `role='status'`. Keep it mounted and change only `message`:
+ * a live region created together with its text is announced inconsistently.
+ */
+function StatusRegion({ message, 'data-testid': testId }) {
+    return (react_1.default.createElement("div", { className: 'cio-pia-sr-only', style: SR_ONLY_STYLE, role: 'status', "data-testid": testId }, message));
+}
+exports.default = StatusRegion;
+function answerStatusMessage(isLoading, hasAnswer, translations) {
+    if (isLoading)
+        return (0, translate_1.translate)('Loading answer', translations);
+    if (hasAnswer)
+        return (0, translate_1.translate)('Answer ready', translations);
+    return '';
+}
+exports.answerStatusMessage = answerStatusMessage;

package/lib/cjs/components/SuggestedQuestionsContainer/SuggestedQuestionsSkeleton.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 function SuggestedQuestionsSkeleton() {
-    return (react_1.default.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-skeleton', "aria-busy": 'true', "aria-label": 'Loading suggestions' },
+    return (react_1.default.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-skeleton', "aria-hidden": 'true' },
         react_1.default.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
         react_1.default.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
         react_1.default.createElement("div", { className: 'cio-pia-suggested-question-skeleton' })));

package/lib/cjs/components/icons/QuestionIcon.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 function QuestionIcon() {
-    return (react_1.default.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (react_1.default.createElement("svg", { "aria-hidden": 'true', focusable: 'false', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
         react_1.default.createElement("path", { d: 'M8.00004 1.33331C4.32004 1.33331 1.33337 4.31998 1.33337 7.99998C1.33337 11.68 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00004 1.33331ZM8.66671 12.6666H7.33337V11.3333H8.66671V12.6666ZM10.0467 7.49998L9.44671 8.11331C8.96671 8.59998 8.66671 8.99998 8.66671 9.99998H7.33337V9.66665C7.33337 8.93331 7.63337 8.26665 8.11337 7.77998L8.94004 6.93998C9.18671 6.69998 9.33337 6.36665 9.33337 5.99998C9.33337 5.26665 8.73337 4.66665 8.00004 4.66665C7.26671 4.66665 6.66671 5.26665 6.66671 5.99998H5.33337C5.33337 4.52665 6.52671 3.33331 8.00004 3.33331C9.47337 3.33331 10.6667 4.52665 10.6667 5.99998C10.6667 6.58665 10.4267 7.11998 10.0467 7.49998Z', fill: '#0F1324', fillOpacity: '0.6' })));
 }
 exports.default = QuestionIcon;

package/lib/cjs/components/icons/SendIcon.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 function SendIcon() {
-    return (react_1.default.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (react_1.default.createElement("svg", { "aria-hidden": 'true', focusable: 'false', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
         react_1.default.createElement("path", { d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' })));
 }
 exports.default = SendIcon;

package/lib/cjs/components/icons/SparklesIcon.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 function SparklesIcon() {
-    return (react_1.default.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (react_1.default.createElement("svg", { "aria-hidden": 'true', focusable: 'false', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
         react_1.default.createElement("path", { d: 'M12.6667 6.0013L13.5001 4.16797L15.3334 3.33464L13.5001 2.5013L12.6667 0.667969L11.8334 2.5013L10.0001 3.33464L11.8334 4.16797L12.6667 6.0013Z', fill: '#1C1917' }),
         react_1.default.createElement("path", { d: 'M12.6667 10.0013L11.8334 11.8346L10.0001 12.668L11.8334 13.5013L12.6667 15.3346L13.5001 13.5013L15.3334 12.668L13.5001 11.8346L12.6667 10.0013Z', fill: '#1C1917' }),
         react_1.default.createElement("path", { d: 'M7.66675 6.33464L6.00008 2.66797L4.33341 6.33464L0.666748 8.0013L4.33341 9.66797L6.00008 13.3346L7.66675 9.66797L11.3334 8.0013L7.66675 6.33464ZM6.66008 8.6613L6.00008 10.1146L5.34008 8.6613L3.88675 8.0013L5.34008 7.3413L6.00008 5.88797L6.66008 7.3413L8.11341 8.0013L6.66008 8.6613Z', fill: '#1C1917' })));

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 {