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

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)))));
 }

package/lib/mjs/components/StatusRegion/StatusRegion.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { translate } from '../../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.
+ */
+export default function StatusRegion({ message, 'data-testid': testId }) {
+    return (React.createElement("div", { className: 'cio-pia-sr-only', style: SR_ONLY_STYLE, role: 'status', "data-testid": testId }, message));
+}
+export function answerStatusMessage(isLoading, hasAnswer, translations) {
+    if (isLoading)
+        return translate('Loading answer', translations);
+    if (hasAnswer)
+        return translate('Answer ready', translations);
+    return '';
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export default function SuggestedQuestionsSkeleton() {
-    return (React.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-skeleton', "aria-busy": 'true', "aria-label": 'Loading suggestions' },
+    return (React.createElement("div", { className: 'cio-pia-suggested-questions-container', "data-testid": 'suggested-questions-skeleton', "aria-hidden": 'true' },
         React.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
         React.createElement("div", { className: 'cio-pia-suggested-question-skeleton' }),
         React.createElement("div", { className: 'cio-pia-suggested-question-skeleton' })));

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

@@ -1,5 +1,5 @@
 import React from 'react';
 export default function QuestionIcon() {
-    return (React.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.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.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' })));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
 export default function SendIcon() {
-    return (React.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.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.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' })));
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export default function SparklesIcon() {
-    return (React.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.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.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.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.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/mjs/hooks/useConversation.js

@@ -7,7 +7,7 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
     const [displayedQuestions, setDisplayedQuestions] = useState([]);
     const [conversationHistory, setConversationHistory] = useState([]);
     const entryIdRef = useRef(0);
-    const prevAnswerValueRef = useRef(answers.data?.value);
+    const prevAnswerDataRef = useRef(answers.data);
     const hasTrackedCurrentAnswerRef = useRef(false);
     const answersRef = useRef(answers);
     const callbacksRef = useRef(callbacks);
@@ -61,13 +61,13 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
         setConversationHistory([]);
-        prevAnswerValueRef.current = undefined;
+        prevAnswerDataRef.current = null;
     }, [suggestedQuestions.data]);
     useEffect(() => {
         setCurrentQuestion('');
         setDisplayedQuestions([]);
         setConversationHistory([]);
-        prevAnswerValueRef.current = undefined;
+        prevAnswerDataRef.current = null;
     }, [itemId]);
     useEffect(() => {
         setDisplayedQuestions(suggestedQuestions.data);
@@ -84,9 +84,11 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         const answerValue = answers.data?.value ?? '';
         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 = answers.data?.thread_id;
         const qnaResultId = answers.data?.qna_result_id;
         if (isConversation) {

package/lib/mjs/utils/translate.js

@@ -2,12 +2,21 @@ import { DISCLAIMER_TEXT, RECS_FALLBACK_TITLE, RECS_INPUT_PLACEHOLDER, RECS_LOAD
 const defaultTranslations = {
     'Any questions about this product?': 'Any questions about this product?',
     'Ask anything': 'Ask anything',
+    'Your question': 'Your question',
     Send: 'Send',
     [DISCLAIMER_TEXT]: 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',
     [RECS_LOADING_TITLE]: RECS_LOADING_TITLE,
     [RECS_FALLBACK_TITLE]: RECS_FALLBACK_TITLE,
     [RECS_UNSUPPORTED_REQUEST]: RECS_UNSUPPORTED_REQUEST,
@@ -18,6 +27,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/mjs/version.js

@@ -1 +1 @@
-export default '2.12.0';
+export default '2.13.0';

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

@@ -3,6 +3,12 @@ import { ConversationEntry, FeedbackType, Translations, Item, Callbacks, CioPiaC
 export interface ConversationHistoryProps {
     conversationHistory: ConversationEntry[];
     isLoading: boolean;
+    /**
+     * Whether the answer request itself is in flight. `isLoading` also covers the follow-up
+     * questions request, which is fine for the visible skeleton but would make the status region
+     * announce "Loading answer" while only the questions are loading. Defaults to `isLoading`.
+     */
+    isAnswerLoading?: boolean;
     error: Error | null;
     /**
      * Items for the latest conversation entry's carousel.
@@ -27,4 +33,4 @@ export interface ConversationHistoryProps {
     qnaResultId?: string;
     priceCurrency?: string;
 }
-export default function ConversationHistory({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }: ConversationHistoryProps): React.JSX.Element;
+export default function ConversationHistory({ conversationHistory, isLoading, isAnswerLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, handleFeedback, onResultClick, qnaResultId, priceCurrency, }: ConversationHistoryProps): React.JSX.Element;

package/lib/types/components/Error/ErrorBlock.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
+import { Translations } from '../../types';
 interface ErrorBlockProps {
     message: string;
     onRetry?: () => void;
+    translations?: Translations;
+    /**
+     * Whether the message is a `role='alert'` live region. Turn off when the block is rendered
+     * inside another live region (such as the conversation `role='log'`), which already announces
+     * inserted text: nesting the two would announce the error twice. Defaults to true.
+     */
+    announce?: boolean;
 }
-declare function ErrorBlock({ message, onRetry }: ErrorBlockProps): React.JSX.Element;
+declare function ErrorBlock({ message, onRetry, translations, announce, }: ErrorBlockProps): React.JSX.Element;
 export default ErrorBlock;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Translations } from '../../types';
+interface StatusRegionProps {
+    message: string;
+    'data-testid'?: string;
+}
+/**
+ * Visually hidden `role='status'`. Keep it mounted and change only `message`:
+ * a live region created together with its text is announced inconsistently.
+ */
+export default function StatusRegion({ message, 'data-testid': testId }: StatusRegionProps): React.JSX.Element;
+export declare function answerStatusMessage(isLoading: boolean, hasAnswer: boolean, translations?: Translations): string;
+export {};

package/lib/types/types.d.ts

@@ -60,12 +60,22 @@ export type CioPiaDisplayConfigs = {
 export type Translations = {
     'Any questions about this product?'?: string;
     'Ask anything'?: string;
+    /** Accessible name of the question field when its placeholder is blanked out. */
+    'Your question'?: string;
     Send?: string;
     'AI-generated answers aim to help, but they may occasionally miss details or be inaccurate. Double-check important information before purchasing.'?: string;
     'Is this answer useful?'?: string;
     'Learn More.'?: string;
     'Ask about this product'?: string;
     'Add to Cart'?: string;
+    'Unexpected error'?: string;
+    'thumbs up'?: string;
+    'thumbs down'?: string;
+    Close?: string;
+    Retry?: string;
+    'Conversation history'?: string;
+    'Loading answer'?: string;
+    'Answer ready'?: string;
     /** Recommendations pod title shown while a request is in flight. */
     'Adapting recommendations to your preference'?: string;
     /** Recommendations pod title shown when a request fails or comes back degraded. */

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

@@ -3,6 +3,9 @@ import { Translations } from '../types';
  * 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/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.12.0";
+declare const _default: "2.13.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -77,7 +77,6 @@
     "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@axe-core/react": "^4.10.1",
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
@@ -104,6 +103,7 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
+    "axe-playwright": "^2.2.2",
     "chromatic": "^11.27.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.1",