@constructor-io/constructorio-ui-pia 2.17.0 → 2.18.1

package/lib/cjs/components/Answer/Answer.js

@@ -8,7 +8,7 @@ function Answer({ text, componentOverride }) {
     if (!text) {
         return null;
     }
-    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { text }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
-        react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: (0, contentTransformers_1.renderMarkdown)(text) } })));
+    const html = (0, contentTransformers_1.renderMarkdown)(text);
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: { text }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode }, html ? (react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: html } })) : (react_1.default.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text))));
 }
 exports.default = Answer;

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

@@ -12,6 +12,7 @@ const usePersistedConversation_1 = tslib_1.__importDefault(require("../../hooks/
 const useTracking_1 = tslib_1.__importDefault(require("../../hooks/useTracking"));
 const useViewportTracking_1 = tslib_1.__importDefault(require("../../hooks/useViewportTracking"));
 const useViewportCallbacks_1 = tslib_1.__importDefault(require("../../hooks/useViewportCallbacks"));
+const useReturnFocusToInput_1 = tslib_1.__importDefault(require("../../hooks/useReturnFocusToInput"));
 const ErrorBlock_1 = tslib_1.__importDefault(require("../Error/ErrorBlock"));
 const LoadingSkeleton_1 = tslib_1.__importDefault(require("../LoadingSkeleton/LoadingSkeleton"));
 const translate_1 = require("../../utils/translate");
@@ -64,6 +65,15 @@ function CioPiaQna(props) {
         initialConversationHistory,
         persisted,
     });
+    const { inputRef, returnFocusAfterLoading } = (0, useReturnFocusToInput_1.default)(isLoading);
+    const handleInlineSubmit = (0, react_1.useCallback)((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const handleInlineQuestionClick = (0, react_1.useCallback)((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     const { containerRef: viewportContainerRef } = (0, useViewportTracking_1.default)({
         tracking,
         questions: displayedQuestions,
@@ -127,12 +137,12 @@ function CioPiaQna(props) {
     return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: renderProps, override: children || (componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode) },
             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 }),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleInlineSubmit, onFocus: handleInputFocus, inputRef: inputRef, disabled: isLoading, 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, { 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: handleInlineQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
             checkoutElement),
         react_1.default.createElement(StatusRegion_1.default, { message: answerStatus, "data-testid": 'answer-status' })));
 }

package/lib/cjs/components/CioPiaRecs/RecsPodRefinement.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestion_1 = tslib_1.__importDefault(require("../SuggestedQuestion/SuggestedQuestion"));
 const icons_1 = require("../icons");
 const RecsOptionsSkeleton_1 = tslib_1.__importDefault(require("./RecsOptionsSkeleton"));
 const recs_1 = require("../../utils/recs");
 const constants_1 = require("../../constants");
+const useReturnFocusToInput_1 = tslib_1.__importDefault(require("../../hooks/useReturnFocusToInput"));
 /**
  * The row under the products: a prompt line, the short options the API suggested, and a box for
  * anything it did not think of. The prompt line is held still while the rest reloads, so the row
@@ -15,11 +16,20 @@ const constants_1 = require("../../constants");
  */
 function RecsPodRefinement({ refinement, isLoading, inputError, showInput, translations, componentOverrides, onRefine, onSubmit, onInputFocus, }) {
     const options = (refinement === null || refinement === void 0 ? void 0 : refinement.options) || [];
+    const { inputRef, returnFocusAfterLoading } = (0, useReturnFocusToInput_1.default)(isLoading);
+    const refine = (0, react_1.useCallback)((text) => {
+        onRefine(text);
+        returnFocusAfterLoading();
+    }, [onRefine, returnFocusAfterLoading]);
+    const submit = (0, react_1.useCallback)((value) => {
+        onSubmit(value);
+        returnFocusAfterLoading();
+    }, [onSubmit, returnFocusAfterLoading]);
     return (react_1.default.createElement("div", { className: 'cio-pia-recs-pod__refinement' },
         react_1.default.createElement("span", { className: 'cio-pia-recs-pod__refinement-label' }, (0, recs_1.resolveRefinementQuestion)(refinement, translations)),
-        isLoading ? (react_1.default.createElement(RecsOptionsSkeleton_1.default, { count: options.length || undefined })) : (options.map((option) => (react_1.default.createElement(SuggestedQuestion_1.default, { key: option, question: option, icon: react_1.default.createElement(icons_1.SparklesIcon, null), onClick: () => onRefine(option) })))),
+        isLoading ? (react_1.default.createElement(RecsOptionsSkeleton_1.default, { count: options.length || undefined })) : (options.map((option) => (react_1.default.createElement(SuggestedQuestion_1.default, { key: option, question: option, icon: react_1.default.createElement(icons_1.SparklesIcon, null), onClick: () => refine(option) })))),
         showInput && (react_1.default.createElement("div", { className: 'cio-pia-recs-pod__input' },
-            react_1.default.createElement(Input_1.default, { onSubmit: onSubmit, onFocus: onInputFocus, disabled: isLoading, error: inputError !== null && inputError !== void 0 ? inputError : undefined, placeholderKey: constants_1.RECS_INPUT_PLACEHOLDER, 
+            react_1.default.createElement(Input_1.default, { onSubmit: submit, onFocus: onInputFocus, inputRef: inputRef, disabled: isLoading, error: inputError !== null && inputError !== void 0 ? inputError : undefined, placeholderKey: constants_1.RECS_INPUT_PLACEHOLDER, 
                 // The pod's box sits in a row beside the options and submits on Enter. Q&A keeps
                 // its button; this one has none in the mocks.
                 showSendButton: false, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input })))));

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

@@ -16,7 +16,7 @@ const icons_1 = require("../icons");
  * across its re-renders.
  */
 let inputIdCounter = 0;
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, placeholderKey = 'Ask anything', showSendButton = true, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, inputRef, placeholderKey = 'Ask anything', showSendButton = true, }) {
     const [value, setValue] = (0, react_1.useState)(providedValue || '');
     const [errorId] = (0, react_1.useState)(() => {
         inputIdCounter += 1;
@@ -53,10 +53,11 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
             onFocus,
             translations,
             error,
+            inputRef,
         }, 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, "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 }),
+                react_1.default.createElement("input", { ref: inputRef, 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/PiaConversation/PiaConversation.js

@@ -1,21 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const SuggestedQuestionsSkeleton_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton"));
 const translate_1 = require("../../utils/translate");
+const useReturnFocusToInput_1 = tslib_1.__importDefault(require("../../hooks/useReturnFocusToInput"));
+const PiaModal_1 = require("./PiaModal");
 const ConversationHistory_1 = tslib_1.__importDefault(require("../ConversationHistory/ConversationHistory"));
 function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, checkoutElement, }) {
     const hasHistory = conversationHistory.length > 0;
+    const { inputRef, returnFocusAfterLoading } = (0, useReturnFocusToInput_1.default)(isLoading);
+    const modalInputRef = (0, react_1.useContext)(PiaModal_1.ModalInputRefContext);
+    const attachInput = (0, react_1.useCallback)((node) => {
+        inputRef(node);
+        modalInputRef === null || modalInputRef === void 0 ? void 0 : modalInputRef(node);
+    }, [inputRef, modalInputRef]);
+    const submitQuestion = (0, react_1.useCallback)((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const clickQuestion = (0, react_1.useCallback)((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (react_1.default.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, (0, translate_1.translate)('Any questions about this product?', translations))),
         react_1.default.createElement(ConversationHistory_1.default, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId, priceCurrency: priceCurrency }),
         checkoutElement && react_1.default.createElement("div", { className: 'cio-pia-conversation-checkout' }, checkoutElement),
         react_1.default.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && react_1.default.createElement(SuggestedQuestionsSkeleton_1.default, null),
-            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))));
+            !isLoading && !error && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: displayedQuestions, onQuestionClick: clickQuestion, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
+            react_1.default.createElement(Input_1.default, { onSubmit: submitQuestion, onFocus: onInputFocus, inputRef: attachInput, disabled: isLoading, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))));
 }
 exports.default = PiaConversation;

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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalInputRefContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../Input/Input"));
 const translate_1 = require("../../utils/translate");
 const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsContainer"));
 const OVERFLOW_HIDDEN_CLASS = 'cio-pia-modal-open';
+/** Lets the conversation rendered as the modal's children hand it the node of its input. */
+exports.ModalInputRefContext = (0, react_1.createContext)(undefined);
 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', "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' })));
@@ -14,6 +17,11 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const dialogRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
+    const initialFocusRef = (0, react_1.useRef)(null);
+    const inputNodeRef = (0, react_1.useRef)(null);
+    const setInputNode = (0, react_1.useCallback)((node) => {
+        inputNodeRef.current = node;
+    }, []);
     const openModal = (0, react_1.useCallback)(() => {
         const active = document.activeElement;
         const isRealTrigger = !!active && active !== document.body && active !== document.documentElement;
@@ -30,6 +38,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
             return undefined;
         if (isOpen) {
             dialog.showModal();
+            initialFocusRef.current = document.activeElement;
             document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
         }
         else {
@@ -41,6 +50,19 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
             document.body.classList.remove(OVERFLOW_HIDDEN_CLASS);
         };
     }, [isOpen]);
+    // The input is disabled when the dialog opens, so showModal() parks focus on the first enabled
+    // control. Hand it to the input once the answer has loaded, unless the shopper has moved it.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isOpen || isLoading || !initialFocusRef.current)
+            return;
+        const placed = initialFocusRef.current;
+        initialFocusRef.current = null;
+        const active = document.activeElement;
+        if (active !== placed && active !== document.body)
+            return;
+        (_a = inputNodeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isOpen, isLoading]);
     // 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)(() => {
@@ -92,6 +114,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
                     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": (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)))));
+                react_1.default.createElement("div", { className: 'cio-pia-modal-body' },
+                    react_1.default.createElement(exports.ModalInputRefContext.Provider, { value: setInputNode }, children))))));
 }
 exports.default = PiaModal;

package/lib/cjs/hooks/useReturnFocusToInput.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * While an answer loads, the control the shopper used to ask is disabled or swapped for a
+ * skeleton, and the browser drops focus to <body>.
+ */
+function useReturnFocusToInput(isLoading) {
+    const inputNodeRef = (0, react_1.useRef)(null);
+    const pendingRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isLoading || !pendingRef.current)
+            return;
+        pendingRef.current = false;
+        const active = document.activeElement;
+        const focusWasDropped = !active || active === document.body;
+        if (inputNodeRef.current && focusWasDropped)
+            inputNodeRef.current.focus();
+    }, [isLoading]);
+    const inputRef = (0, react_1.useCallback)((node) => {
+        inputNodeRef.current = node;
+    }, []);
+    const returnFocusAfterLoading = (0, react_1.useCallback)(() => {
+        pendingRef.current = true;
+    }, []);
+    return { inputRef, returnFocusAfterLoading };
+}
+exports.default = useReturnFocusToInput;

package/lib/cjs/stories/assets/storybook-styles.css

@@ -1,15 +1,3 @@
-div.subheading {
-  --mediumdark: '#999999';
-  font-weight: 700;
-  font-size: 13px;
-  color: #999;
-  letter-spacing: 6px;
-  line-height: 24px;
-  text-transform: uppercase;
-  margin-bottom: 12px;
-  margin-top: 40px;
-}
-
 div.link-list {
   display: grid;
   grid-template-columns: 1fr;
@@ -78,126 +66,3 @@ a.link-item p {
   line-height: 20px;
 }
 
-span.badge {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-div.badge-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-div.badge-wrapper code {
-  font-size: 12px;
-  display: inline-block;
-}
-
-.badge.tip {
-  background: #e7fdd8;
-  color: #66bf3c;
-}
-
-.badge.note {
-  background: #d8e8fd;
-  color: #3c70bf;
-}
-
-.cio-flow-diagram {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 24px 0 0;
-  font-family: system-ui, sans-serif;
-  font-size: 14px;
-}
-
-.cio-flow-diagram .flow-step {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.cio-flow-diagram .flow-box {
-  padding: 10px 16px;
-  border-radius: 8px;
-  min-width: 220px;
-  text-align: center;
-}
-
-.cio-flow-diagram .flow-box--consumer {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-}
-
-.cio-flow-diagram .flow-box--internal {
-  background: #f5f3ff;
-  border: 1px solid #ddd6fe;
-}
-
-.cio-flow-diagram .flow-box--output {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-}
-
-.cio-flow-diagram .flow-arrow {
-  margin-left: 110px;
-  color: #9ca3af;
-}
-
-.cio-flow-diagram .flow-label {
-  font-size: 12px;
-  color: #9ca3af;
-  font-style: italic;
-}
-
-.cio-flow-diagram .flow-callback {
-  font-size: 12px;
-  color: #059669;
-}
-
-.cio-flow-diagram .flow-box-subtitle {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.cio-flow-legend {
-  display: flex;
-  gap: 16px;
-  margin: 32px 0 16px;
-  font-size: 12px;
-}
-
-.cio-flow-legend .legend-swatch {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  margin-right: 4px;
-  vertical-align: middle;
-}
-
-.cio-flow-legend .legend-swatch--consumer {
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-}
-
-.cio-flow-legend .legend-swatch--internal {
-  background: #f5f3ff;
-  border: 1px solid #ddd6fe;
-}
-
-.cio-flow-legend .legend-swatch--output {
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-}

package/lib/cjs/utils/contentTransformers.js

@@ -4,25 +4,71 @@ exports.renderMarkdown = exports.sanitizeHtml = void 0;
 const tslib_1 = require("tslib");
 const dompurify_1 = tslib_1.__importDefault(require("dompurify"));
 const marked_1 = require("marked");
+// For catalog HTML (product descriptions).
 const purifyConfig = {
     FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
 };
+// For the answer, which an LLM writes from text a shopper can steer, so only the tags `marked`
+// outputs are kept. Images, media and SVG would load a URL with no click and could leak data;
+// form controls and `style` could fake a form.
+const markdownPurifyConfig = {
+    ALLOWED_TAGS: 'p br strong em del a ul ol li blockquote hr code pre table thead tbody tr th td h1 h2 h3 h4 h5 h6'.split(' '),
+    ALLOWED_ATTR: ['href', 'align', 'start'],
+};
+// Text the agent reads (catalog, knowledge base, reviews) could plant a phishing link, so only
+// links to this site, its subdomains, email and phone stay clickable. A link a custom `sanitize`
+// deliberately keeps (e.g. `sms:`) stays too, but web links to other sites never do.
+function isOnThisSite(href, { keepOtherSchemes = false } = {}) {
+    try {
+        const url = new URL(href, window.location.href);
+        if (url.protocol === 'mailto:' || url.protocol === 'tel:')
+            return true;
+        if (url.protocol !== 'http:' && url.protocol !== 'https:')
+            return keepOtherSchemes;
+        const site = window.location.hostname.replace(/^www\./, '');
+        return url.hostname === site || url.hostname.endsWith(`.${site}`);
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function unlinkOffSiteLinks(html, options) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    doc.querySelectorAll('a[href]').forEach((link) => {
+        if (!isOnThisSite(link.getAttribute('href'), options)) {
+            link.replaceWith(...Array.from(link.childNodes));
+        }
+    });
+    return doc.body.innerHTML;
+}
+/**
+ * Sanitizes catalog HTML such as a product description. Browser only: without a DOM to sanitize
+ * with (server rendering) it returns `''`.
+ */
 function sanitizeHtml(html) {
-    if (!html)
+    if (!html || !dompurify_1.default.isSupported)
         return '';
     return dompurify_1.default.sanitize(html, purifyConfig);
 }
 exports.sanitizeHtml = sanitizeHtml;
+/**
+ * Turns the answer's markdown into sanitized HTML. Only the tags markdown produces are kept, and
+ * only links to this site, its subdomains, `mailto:` and `tel:` stay clickable. A custom `sanitize`
+ * can keep other schemes, but web links to other sites always become plain text. Browser only:
+ * without a DOM to sanitize with (server rendering) it returns `''`, so render the plain text.
+ */
 function renderMarkdown(content, options) {
-    var _a;
-    if (!content)
+    var _a, _b;
+    if (!content || !dompurify_1.default.isSupported)
         return '';
     const html = marked_1.marked.parse(content, { async: false, breaks: true });
     if (options === null || options === void 0 ? void 0 : options.sanitize) {
         const purifier = (0, dompurify_1.default)(window);
-        const config = Object.assign(Object.assign({}, purifyConfig), { FORBID_TAGS: [...((_a = purifyConfig.FORBID_TAGS) !== null && _a !== void 0 ? _a : [])] });
-        return options.sanitize(purifier, html, { config });
+        const config = Object.assign(Object.assign({}, markdownPurifyConfig), { ALLOWED_TAGS: [...((_a = markdownPurifyConfig.ALLOWED_TAGS) !== null && _a !== void 0 ? _a : [])], ALLOWED_ATTR: [...((_b = markdownPurifyConfig.ALLOWED_ATTR) !== null && _b !== void 0 ? _b : [])] });
+        return unlinkOffSiteLinks(options.sanitize(purifier, html, { config }), {
+            keepOtherSchemes: true,
+        });
     }
-    return dompurify_1.default.sanitize(html, purifyConfig);
+    return unlinkOffSiteLinks(dompurify_1.default.sanitize(html, markdownPurifyConfig));
 }
 exports.renderMarkdown = renderMarkdown;

package/lib/cjs/version.js

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

package/lib/mjs/components/Answer/Answer.js

@@ -5,7 +5,7 @@ function Answer({ text, componentOverride }) {
     if (!text) {
         return null;
     }
-    return (React.createElement(RenderPropsWrapper, { props: { text }, override: componentOverride?.reactNode },
-        React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: renderMarkdown(text) } })));
+    const html = renderMarkdown(text);
+    return (React.createElement(RenderPropsWrapper, { props: { text }, override: componentOverride?.reactNode }, html ? (React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text', dangerouslySetInnerHTML: { __html: html } })) : (React.createElement("div", { className: 'cio-pia-answer', "data-testid": 'answer-text' }, text))));
 }
 export default Answer;

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

@@ -9,6 +9,7 @@ import usePersistedConversation from '../../hooks/usePersistedConversation';
 import useTracking from '../../hooks/useTracking';
 import useViewportTracking from '../../hooks/useViewportTracking';
 import useViewportCallbacks from '../../hooks/useViewportCallbacks';
+import useReturnFocusToInput from '../../hooks/useReturnFocusToInput';
 import ErrorBlock from '../Error/ErrorBlock';
 import LoadingSkeleton from '../LoadingSkeleton/LoadingSkeleton';
 import { translate } from '../../utils/translate';
@@ -60,6 +61,15 @@ export default function CioPiaQna(props) {
         initialConversationHistory,
         persisted,
     });
+    const { inputRef, returnFocusAfterLoading } = useReturnFocusToInput(isLoading);
+    const handleInlineSubmit = useCallback((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const handleInlineQuestionClick = useCallback((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     const { containerRef: viewportContainerRef } = useViewportTracking({
         tracking,
         questions: displayedQuestions,
@@ -123,12 +133,12 @@ export default function CioPiaQna(props) {
     return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
             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 }),
+            React.createElement(Input, { onSubmit: handleInlineSubmit, onFocus: handleInputFocus, inputRef: inputRef, disabled: isLoading, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
             isAnswerLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
             !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: handleInlineQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
             checkoutElement),
         React.createElement(StatusRegion, { message: answerStatus, "data-testid": 'answer-status' })));
 }

package/lib/mjs/components/CioPiaRecs/RecsPodRefinement.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Input from '../Input/Input';
 import SuggestedQuestion from '../SuggestedQuestion/SuggestedQuestion';
 import { SparklesIcon } from '../icons';
 import RecsOptionsSkeleton from './RecsOptionsSkeleton';
 import { resolveRefinementQuestion } from '../../utils/recs';
 import { RECS_INPUT_PLACEHOLDER } from '../../constants';
+import useReturnFocusToInput from '../../hooks/useReturnFocusToInput';
 /**
  * The row under the products: a prompt line, the short options the API suggested, and a box for
  * anything it did not think of. The prompt line is held still while the rest reloads, so the row
@@ -12,11 +13,20 @@ import { RECS_INPUT_PLACEHOLDER } from '../../constants';
  */
 export default function RecsPodRefinement({ refinement, isLoading, inputError, showInput, translations, componentOverrides, onRefine, onSubmit, onInputFocus, }) {
     const options = refinement?.options || [];
+    const { inputRef, returnFocusAfterLoading } = useReturnFocusToInput(isLoading);
+    const refine = useCallback((text) => {
+        onRefine(text);
+        returnFocusAfterLoading();
+    }, [onRefine, returnFocusAfterLoading]);
+    const submit = useCallback((value) => {
+        onSubmit(value);
+        returnFocusAfterLoading();
+    }, [onSubmit, returnFocusAfterLoading]);
     return (React.createElement("div", { className: 'cio-pia-recs-pod__refinement' },
         React.createElement("span", { className: 'cio-pia-recs-pod__refinement-label' }, resolveRefinementQuestion(refinement, translations)),
-        isLoading ? (React.createElement(RecsOptionsSkeleton, { count: options.length || undefined })) : (options.map((option) => (React.createElement(SuggestedQuestion, { key: option, question: option, icon: React.createElement(SparklesIcon, null), onClick: () => onRefine(option) })))),
+        isLoading ? (React.createElement(RecsOptionsSkeleton, { count: options.length || undefined })) : (options.map((option) => (React.createElement(SuggestedQuestion, { key: option, question: option, icon: React.createElement(SparklesIcon, null), onClick: () => refine(option) })))),
         showInput && (React.createElement("div", { className: 'cio-pia-recs-pod__input' },
-            React.createElement(Input, { onSubmit: onSubmit, onFocus: onInputFocus, disabled: isLoading, error: inputError ?? undefined, placeholderKey: RECS_INPUT_PLACEHOLDER, 
+            React.createElement(Input, { onSubmit: submit, onFocus: onInputFocus, inputRef: inputRef, disabled: isLoading, error: inputError ?? undefined, placeholderKey: RECS_INPUT_PLACEHOLDER, 
                 // The pod's box sits in a row beside the options and submits on Enter. Q&A keeps
                 // its button; this one has none in the mocks.
                 showSendButton: false, translations: translations, componentOverride: componentOverrides?.input })))));

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

@@ -13,7 +13,7 @@ import { SendIcon } from '../icons';
  * across its re-renders.
  */
 let inputIdCounter = 0;
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, placeholderKey = 'Ask anything', showSendButton = true, }) {
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, inputRef, placeholderKey = 'Ask anything', showSendButton = true, }) {
     const [value, setValue] = useState(providedValue || '');
     const [errorId] = useState(() => {
         inputIdCounter += 1;
@@ -50,10 +50,11 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
             onFocus,
             translations,
             error,
+            inputRef,
         }, 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, "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 }),
+                React.createElement("input", { ref: inputRef, 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/PiaConversation/PiaConversation.js

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import Input from '../Input/Input';
 import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/SuggestedQuestionsContainer';
 import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
 import { translate } from '../../utils/translate';
+import useReturnFocusToInput from '../../hooks/useReturnFocusToInput';
+import { ModalInputRefContext } from './PiaModal';
 import ConversationHistory from '../ConversationHistory/ConversationHistory';
 export default function PiaConversation({ conversationHistory, isLoading, error, currentItems, showFeedback, showPreviousItems, learnMoreUrl, disclaimerPosition, translations, callbacks, componentOverrides, displayedQuestions, handleSubmitQuestion, handleQuestionClick, containerRef, handleFeedback, onResultClick, qnaResultId, onInputFocus, priceCurrency, checkoutElement, }) {
     const hasHistory = conversationHistory.length > 0;
+    const { inputRef, returnFocusAfterLoading } = useReturnFocusToInput(isLoading);
+    const modalInputRef = useContext(ModalInputRefContext);
+    const attachInput = useCallback((node) => {
+        inputRef(node);
+        modalInputRef?.(node);
+    }, [inputRef, modalInputRef]);
+    const submitQuestion = useCallback((question) => {
+        handleSubmitQuestion(question);
+        returnFocusAfterLoading();
+    }, [handleSubmitQuestion, returnFocusAfterLoading]);
+    const clickQuestion = useCallback((question) => {
+        handleQuestionClick(question);
+        returnFocusAfterLoading();
+    }, [handleQuestionClick, returnFocusAfterLoading]);
     return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container cio-pia-conversation', "data-testid": 'cio-pia-container' },
         !hasHistory && (React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations))),
         React.createElement(ConversationHistory, { conversationHistory: conversationHistory, isLoading: isLoading, error: error, currentItems: currentItems, showFeedback: showFeedback, showPreviousItems: showPreviousItems, learnMoreUrl: learnMoreUrl, disclaimerPosition: disclaimerPosition, translations: translations, callbacks: callbacks, componentOverrides: componentOverrides, handleFeedback: handleFeedback, onResultClick: onResultClick, qnaResultId: qnaResultId, priceCurrency: priceCurrency }),
         checkoutElement && React.createElement("div", { className: 'cio-pia-conversation-checkout' }, checkoutElement),
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
-            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides?.input }))));
+            !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: clickQuestion, componentOverride: componentOverrides?.suggestedQuestions })),
+            React.createElement(Input, { onSubmit: submitQuestion, onFocus: onInputFocus, inputRef: attachInput, disabled: isLoading, translations: translations, componentOverride: componentOverrides?.input }))));
 }