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

package/lib/cjs/hooks/useConversation.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useConversation({ pia, itemId, isConversation, callbacks, tracking, }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
     const context = (0, react_1.useMemo)(() => ({ itemId, threadId }), [itemId, threadId]);
@@ -10,7 +10,7 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
     const [displayedQuestions, setDisplayedQuestions] = (0, react_1.useState)([]);
     const [conversationHistory, setConversationHistory] = (0, react_1.useState)([]);
     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 prevAnswerDataRef = (0, react_1.useRef)(answers.data);
     const hasTrackedCurrentAnswerRef = (0, react_1.useRef)(false);
     const answersRef = (0, react_1.useRef)(answers);
     const callbacksRef = (0, react_1.useRef)(callbacks);
@@ -68,13 +68,13 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
         setConversationHistory([]);
-        prevAnswerValueRef.current = undefined;
+        prevAnswerDataRef.current = null;
     }, [suggestedQuestions.data]);
     (0, react_1.useEffect)(() => {
         setCurrentQuestion('');
         setDisplayedQuestions([]);
         setConversationHistory([]);
-        prevAnswerValueRef.current = undefined;
+        prevAnswerDataRef.current = null;
     }, [itemId]);
     (0, react_1.useEffect)(() => {
         setDisplayedQuestions(suggestedQuestions.data);
@@ -93,9 +93,11 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
         const answerValue = (_b = (_a = answers.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
         if (!answerValue)
             return;
-        if (answerValue === prevAnswerValueRef.current)
+        // Compare by response object, not by text: two consecutive answers with
+        // identical text are still two answers and both must reach the history.
+        if (answers.data === prevAnswerDataRef.current)
             return;
-        prevAnswerValueRef.current = answerValue;
+        prevAnswerDataRef.current = answers.data;
         const answerThreadId = (_c = answers.data) === null || _c === void 0 ? void 0 : _c.thread_id;
         const qnaResultId = (_d = answers.data) === null || _d === void 0 ? void 0 : _d.qna_result_id;
         if (isConversation) {
@@ -122,8 +124,8 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
             (_f = (_e = callbacksRef.current) === null || _e === void 0 ? void 0 : _e.onAnswer) === null || _f === void 0 ? void 0 : _f.call(_e, [entry], contextRef.current);
         }
     }, [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 currentAnswer = (_b = (_a = answers.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    const currentItems = (_c = answers.items) !== null && _c !== void 0 ? _c : null;
     const error = answers.error || suggestedQuestions.error;
     const isLoading = answers.isLoading || suggestedQuestions.isLoading;
     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/utils/translate.js

@@ -5,12 +5,21 @@ const constants_1 = require("../constants");
 const defaultTranslations = {
     'Any questions about this product?': 'Any questions about this product?',
     'Ask anything': 'Ask anything',
+    'Your question': 'Your question',
     Send: 'Send',
     [constants_1.DISCLAIMER_TEXT]: constants_1.DISCLAIMER_TEXT,
     'Is this answer useful?': 'Is this answer useful?',
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
     'Add to Cart': 'Add to Cart',
+    'Unexpected error': 'Unexpected error',
+    'thumbs up': 'thumbs up',
+    'thumbs down': 'thumbs down',
+    Close: 'Close',
+    Retry: 'Retry',
+    'Conversation history': 'Conversation history',
+    'Loading answer': 'Loading answer',
+    'Answer ready': 'Answer ready',
     [constants_1.RECS_LOADING_TITLE]: constants_1.RECS_LOADING_TITLE,
     [constants_1.RECS_FALLBACK_TITLE]: constants_1.RECS_FALLBACK_TITLE,
     [constants_1.RECS_UNSUPPORTED_REQUEST]: constants_1.RECS_UNSUPPORTED_REQUEST,
@@ -21,6 +30,9 @@ const defaultTranslations = {
  * Translates a word using the provided translations object.
  * Falls back to English defaults if translation is not provided.
  *
+ * An explicitly empty string is returned as-is: blanking out a string is how
+ * consumers hide it.
+ *
  * @param word - The key to translate
  * @param translations - Optional user-provided translations object
  * @returns The translated string or the original word if no translation exists

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.13.0';

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

@@ -14,10 +14,11 @@ import { translate } from '../../utils/translate';
 import PiaInlineAnswer from '../PiaInlineAnswer/PiaInlineAnswer';
 import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
+import StatusRegion, { answerStatusMessage } from '../StatusRegion/StatusRegion';
 /** 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 +29,7 @@ export default function CioPiaQna(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        answerParameters,
         parameters,
         formatImageUrl: formatters?.formatImageUrl,
     });
@@ -50,10 +52,12 @@ export default function CioPiaQna(props) {
         callbackContainerRef(node);
     }, [viewportContainerRef, callbackContainerRef]);
     const qnaResultId = pia.answers.data?.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 = answerStatusMessage(isAnswerLoading, !!currentAnswer, translations);
     const renderProps = {
         items: currentItems,
         isLoading,
@@ -67,6 +71,7 @@ export default function CioPiaQna(props) {
     const conversationHistoryProps = {
         conversationHistory,
         isLoading,
+        isAnswerLoading,
         error,
         currentItems,
         showFeedback,
@@ -98,8 +103,9 @@ export default function CioPiaQna(props) {
             React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
             React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
             isAnswerLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
-            !isAnswerLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
+            !isAnswerLoading && error && (React.createElement(ErrorBlock, { key: error.message || translate('Unexpected error', translations), message: error.message, translations: translations })),
             !isAnswerLoading && !error && currentAnswer && (React.createElement(PiaInlineAnswer, { 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.createElement(SuggestedQuestionsSkeleton, null),
-            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })))));
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions }))),
+        React.createElement(StatusRegion, { message: answerStatus, "data-testid": 'answer-status' })));
 }

package/lib/mjs/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/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 }) {
@@ -8,6 +8,13 @@ function HtmlDescription({ product }) {
         return null;
     return (React.createElement("p", { className: 'cio-product-card-description', dangerouslySetInnerHTML: { __html: 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;
@@ -55,12 +62,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 +79,65 @@ 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', 
+                        // 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, 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/components/ConversationHistory/ConversationHistory.js

@@ -5,7 +5,9 @@ import Disclaimer from '../CioPia/Disclaimer';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import PiaCustomCarousel from '../CioPia/PiaCustomCarousel';
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
+import StatusRegion, { answerStatusMessage } from '../StatusRegion/StatusRegion';
+import { translate } from '../../utils/translate';
+export default function ConversationHistory({ conversationHistory, isLoading, isAnswerLoading = isLoading, error, currentItems, showFeedback, showPreviousItems = true, learnMoreUrl, disclaimerPosition = 'bottom', translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }) {
     const scrollContainerRef = useRef(null);
     useEffect(() => {
         const container = scrollContainerRef.current;
@@ -16,23 +18,26 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
         });
         return () => cancelAnimationFrame(frameId);
     }, [conversationHistory, isLoading]);
+    const lastEntry = conversationHistory[conversationHistory.length - 1];
+    const answerStatus = answerStatusMessage(isAnswerLoading, !!lastEntry?.answer, translations);
     const disclaimer = (React.createElement(Disclaimer, { learnMoreUrl: learnMoreUrl, translations: translations, componentOverride: componentOverrides?.disclaimer }));
     return (React.createElement("div", { className: 'cio-pia-conversation-history' },
         disclaimerPosition === 'top' && disclaimer,
-        React.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', "aria-label": 'Conversation history' }, conversationHistory.map((entry, index) => {
+        React.createElement("div", { ref: scrollContainerRef, className: 'cio-pia-conversation-entries', role: 'log', tabIndex: 0, "aria-label": 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.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' },
+                isLast && isLoading && (React.createElement("div", { className: 'cio-pia-conversation-loading' },
                     React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }))),
-                isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
+                isLast && !isLoading && error && (React.createElement(ErrorBlock, { key: error.message || translate('Unexpected error', translations), message: error.message, translations: translations, announce: false })),
                 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, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
                     isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides?.feedback }))))));
         })),
-        disclaimerPosition === 'bottom' && disclaimer));
+        disclaimerPosition === 'bottom' && disclaimer,
+        React.createElement(StatusRegion, { message: answerStatus, "data-testid": 'answer-status' })));
 }

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

@@ -1,20 +1,22 @@
 import React from 'react';
+import { translate } from '../../utils/translate';
 function WarningIcon() {
-    return (React.createElement("svg", { width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (React.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.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.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (React.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.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 || translate('Unexpected error', translations);
     return (React.createElement("div", { className: 'cio-pia-error-block-container', "data-testid": 'error-block' },
         React.createElement("div", { className: 'cio-pia-error-block-warning-icon-container', "data-testid": 'error-block-warning-icon' },
             React.createElement(WarningIcon, null)),
         React.createElement("div", { className: 'cio-pia-error-block-text-container' },
-            React.createElement("p", { className: 'cio-pia-error-block-text' }, message),
+            React.createElement("p", { className: 'cio-pia-error-block-text', role: announce ? 'alert' : undefined }, resolvedMessage),
             onRetry && (React.createElement("button", { type: 'button', onClick: onRetry, className: 'cio-pia-error-block-retry-button' },
                 React.createElement(RetryIcon, null),
-                "Retry")))));
+                translate('Retry', translations))))));
 }
 export default ErrorBlock;

package/lib/mjs/components/Feedback/Feedback.js

@@ -3,10 +3,10 @@ import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components
 import { FeedbackType } from '../../types';
 import { translate } from '../../utils/translate';
 function ThumbsUpIcon({ isSelected }) {
-    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (React.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.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.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.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.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.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, isSelected ? (React.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.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.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.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.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' }))));
 }
 export default function Feedback({ translations, onFeedback, componentOverride }) {
     const [feedback, setFeedback] = useState(null);
@@ -17,8 +17,8 @@ export default function Feedback({ translations, onFeedback, componentOverride }
     return (React.createElement(RenderPropsWrapper, { props: { translations, onFeedback }, override: componentOverride?.reactNode },
         React.createElement("div", { className: 'cio-pia-feedback-container' },
             React.createElement("p", { className: 'cio-pia-feedback-text' }, translate('Is this answer useful?', translations)),
-            React.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs up', onClick: () => handleFeedback(FeedbackType.UP) },
+            React.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": translate('thumbs up', translations), "aria-pressed": feedback === FeedbackType.UP, onClick: () => handleFeedback(FeedbackType.UP) },
                 React.createElement(ThumbsUpIcon, { isSelected: feedback === FeedbackType.UP })),
-            React.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": 'thumbs down', onClick: () => handleFeedback(FeedbackType.DOWN) },
+            React.createElement("button", { type: 'button', className: 'cio-pia-feedback-button', "aria-label": translate('thumbs down', translations), "aria-pressed": feedback === FeedbackType.DOWN, onClick: () => handleFeedback(FeedbackType.DOWN) },
                 React.createElement(ThumbsDownIcon, { isSelected: feedback === FeedbackType.DOWN })))));
 }

package/lib/mjs/components/Input/Input.js

@@ -42,6 +42,7 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
     const resolvedPlaceholder = translations?.[placeholderKey] !== undefined
         ? translate(placeholderKey, translations)
         : (placeholder ?? translate(placeholderKey));
+    const accessibleName = resolvedPlaceholder || translate('Your question', translations);
     return (React.createElement(RenderPropsWrapper, { props: {
             disabled,
             placeholder: resolvedPlaceholder,
@@ -52,7 +53,7 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
         }, override: componentOverride?.reactNode },
         React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'cio-pia-input-container' },
-                React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: 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.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, "aria-label": accessibleName, disabled: disabled, className: 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.createElement("button", { type: 'button', onClick: () => handleSubmit(value), className: 'cio-pia-send-button', disabled: disabled },
                     translate('Send', translations),
                     React.createElement(SendIcon, null)))),

package/lib/mjs/components/LoadingSkeleton/LoadingSkeleton.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
-const skeleton = (React.createElement("div", { className: 'cio-pia-loading-skeleton', "data-testid": 'loading-skeleton' },
+// Decorative: loading is announced by the always-mounted status region.
+const skeleton = (React.createElement("div", { className: 'cio-pia-loading-skeleton', "data-testid": 'loading-skeleton', "aria-hidden": 'true' },
     React.createElement("div", { className: 'skeleton-bar' }),
     React.createElement("div", { className: 'skeleton-bar' }),
     React.createElement("div", { className: 'skeleton-bar skeleton-short' })));

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

@@ -4,13 +4,17 @@ import { translate } from '../../utils/translate';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
 function CloseIcon() {
-    return (React.createElement("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    return (React.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.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' })));
 }
 export default function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, isLoading, componentOverrides, translations, onInputFocus, onClose, children, }) {
     const [isOpen, setIsOpen] = useState(false);
     const dialogRef = useRef(null);
+    const triggerRef = useRef(null);
     const openModal = useCallback(() => {
+        const active = document.activeElement;
+        const isRealTrigger = !!active && active !== document.body && active !== document.documentElement;
+        triggerRef.current = isRealTrigger ? active : null;
         setIsOpen(true);
     }, []);
     const closeModal = useCallback(() => {
@@ -25,14 +29,28 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
             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.
+    useEffect(() => {
+        if (isOpen)
+            return;
+        const trigger = triggerRef.current;
+        if (!trigger || !trigger.isConnected)
+            return;
+        if (trigger.disabled)
+            return;
+        trigger.focus();
+        triggerRef.current = null;
+    }, [isOpen, isLoading]);
     useEffect(() => {
         const dialog = dialogRef.current;
         if (!dialog)
@@ -69,7 +87,7 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
             React.createElement("div", { className: 'cio-pia-modal-content' },
                 React.createElement("div", { className: 'cio-pia-modal-header' },
                     React.createElement("p", { className: 'cio-pia-title', id: 'cio-pia-modal-title' }, translate('Ask about this product', translations)),
-                    React.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": 'Close', onClick: closeModal },
+                    React.createElement("button", { type: 'button', className: 'cio-pia-modal-close-button', "aria-label": translate('Close', translations), onClick: closeModal },
                         React.createElement(CloseIcon, null))),
                 React.createElement("div", { className: 'cio-pia-modal-body' }, children)))));
 }