@constructor-io/constructorio-ui-pia 2.16.1 → 2.18.0

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

@@ -8,9 +8,11 @@ const SuggestedQuestionsContainer_1 = tslib_1.__importDefault(require("../Sugges
 const SuggestedQuestionsSkeleton_1 = tslib_1.__importDefault(require("../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton"));
 const useCioPia_1 = tslib_1.__importDefault(require("../../hooks/useCioPia"));
 const useConversation_1 = tslib_1.__importDefault(require("../../hooks/useConversation"));
+const usePersistedConversation_1 = tslib_1.__importDefault(require("../../hooks/usePersistedConversation"));
 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");
@@ -22,15 +24,22 @@ const CheckoutTriggerBar_1 = tslib_1.__importDefault(require("./CheckoutTriggerB
 /** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
 // eslint-disable-next-line complexity
 function CioPiaQna(props) {
-    var _a;
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, checkoutTriggers, abTest, initialConversationHistory, } = props;
+    var _a, _b;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, checkoutTriggers, abTest, initialConversationHistory, persistConversation, userId, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
-    const pia = (0, useCioPia_1.default)({
+    const persisted = (0, usePersistedConversation_1.default)({
+        enabled: Boolean(persistConversation === null || persistConversation === void 0 ? void 0 : persistConversation.enabled) && isConversation,
         apiKey,
+        userId,
         itemId,
         threadId,
+    });
+    const pia = (0, useCioPia_1.default)({
+        apiKey,
+        itemId,
+        threadId: (_a = persisted === null || persisted === void 0 ? void 0 : persisted.threadId) !== null && _a !== void 0 ? _a : threadId,
         variationId,
         cioClient,
         suggestedQuestionsParameters,
@@ -38,6 +47,7 @@ function CioPiaQna(props) {
         parameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
         testCells: abTest === null || abTest === void 0 ? void 0 : abTest.testCells,
+        userId,
     });
     const tracking = (0, useTracking_1.default)({
         cioClient: pia.cioClient,
@@ -53,7 +63,17 @@ function CioPiaQna(props) {
         callbacks,
         tracking,
         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,
@@ -64,7 +84,7 @@ function CioPiaQna(props) {
         viewportContainerRef(node);
         callbackContainerRef(node);
     }, [viewportContainerRef, callbackContainerRef]);
-    const qnaResultId = (_a = pia.answers.data) === null || _a === void 0 ? void 0 : _a.qna_result_id;
+    const qnaResultId = (_b = pia.answers.data) === null || _b === void 0 ? void 0 : _b.qna_result_id;
     // 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.
@@ -117,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/useAnswerResults.js

@@ -13,35 +13,51 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters
     (0, react_1.useEffect)(() => {
         cioClientRef.current = cioClient;
     }, [cioClient]);
+    const requestIdRef = (0, react_1.useRef)(0);
     const fetchResult = (0, react_1.useCallback)((question) => {
         const client = cioClientRef.current;
         if (!client)
             return;
+        requestIdRef.current += 1;
+        const requestId = requestIdRef.current;
+        const isCurrent = () => requestId === requestIdRef.current;
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
         client.agent.pia
             .getAnswerResults(itemId, question, Object.assign({ threadId, variationId }, parameters))
             .then((response) => {
+            if (!isCurrent())
+                return;
             setAnswerResults(response);
             setError(null);
         })
             .catch((err) => {
+            if (!isCurrent())
+                return;
             setError(err instanceof Error ? err : new Error('Error fetching answer'));
             setAnswerResults(null);
         })
             .finally(() => {
-            setIsLoading(false);
+            if (isCurrent())
+                setIsLoading(false);
         });
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemId, variationId, threadId, serializedParameters]);
+    const clear = (0, react_1.useCallback)(() => {
+        requestIdRef.current += 1;
+        setAnswerResults(null);
+        setError(null);
+        setIsLoading(false);
+    }, []);
     return {
         data: answerResults,
         items,
         isLoading,
         error,
         getAnswer: fetchResult,
+        clear,
     };
 }
 exports.default = useAnswerResults;

package/lib/cjs/hooks/useCioPia.js

@@ -40,12 +40,13 @@ function mapDeprecatedParameters(params) {
     return hasEntries ? mapped : undefined;
 }
 function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, testCells, } = props;
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, testCells, userId, } = props;
     const { cioClient: client, threadId } = (0, usePiaClient_1.default)({
         apiKey,
         threadId: providedThreadId,
         cioClient: providedClient,
         testCells,
+        userId,
     });
     const mappedDeprecated = mapDeprecatedParameters(parameters);
     const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters

package/lib/cjs/hooks/useConversation.js

@@ -1,40 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function isRestorableEntry(entry) {
-    if (typeof entry !== 'object' || entry === null)
-        return false;
-    const { question, answer, items } = entry;
-    return (typeof question === 'string' &&
-        typeof answer === 'string' &&
-        (items === undefined || items === null || Array.isArray(items)));
-}
+const conversationStorage_1 = require("../utils/conversationStorage");
+// `id` is the React key, so ids from outside the widget cannot be trusted to be unique.
+const renumber = (entries) => entries.map((entry, index) => (Object.assign(Object.assign({}, entry), { id: index + 1 })));
 // The seed comes from the host's own storage, typed or not: a malformed one must not take the widget down.
 function restoreHistory(seed) {
     if (!Array.isArray(seed)) {
         console.warn('[CioPia] initialConversationHistory must be an array. It was ignored.');
         return [];
     }
-    const entries = seed.filter(isRestorableEntry);
+    const entries = seed.filter(conversationStorage_1.isRestorableEntry);
     if (entries.length < seed.length) {
         console.warn(`[CioPia] ${seed.length - entries.length} initialConversationHistory entries were ignored. Each needs a string question and answer, and items must be an array.`);
     }
-    // Seeded ids are replaced: `id` is the React key, so a caller's values cannot be trusted to be unique.
-    return entries.map((entry, index) => (Object.assign(Object.assign({}, entry), { id: index + 1 })));
+    return renumber(entries);
+}
+function initialHistory(isConversation, seed, persisted) {
+    if (!isConversation)
+        return [];
+    if (seed !== undefined)
+        return restoreHistory(seed);
+    return persisted ? renumber(persisted.history) : [];
 }
-function useConversation({ pia, itemId, isConversation, callbacks, tracking, initialConversationHistory, }) {
+function useConversation({ pia, itemId, isConversation, callbacks, tracking, initialConversationHistory, persisted, }) {
     var _a, _b, _c;
     const { suggestedQuestions, answers, threadId } = pia;
     const { getAnswer } = answers;
     const context = (0, react_1.useMemo)(() => ({ itemId, threadId }), [itemId, threadId]);
     const [currentQuestion, setCurrentQuestion] = (0, react_1.useState)('');
     const [displayedQuestions, setDisplayedQuestions] = (0, react_1.useState)([]);
-    const [conversationHistory, setConversationHistory] = (0, react_1.useState)(() => isConversation && initialConversationHistory !== undefined
-        ? restoreHistory(initialConversationHistory)
-        : []);
+    const [conversationHistory, setConversationHistory] = (0, react_1.useState)(() => initialHistory(isConversation, initialConversationHistory, persisted));
     const entryIdRef = (0, react_1.useRef)(conversationHistory.length);
     const conversationHistoryRef = (0, react_1.useRef)(conversationHistory);
     const prevItemIdRef = (0, react_1.useRef)(itemId);
+    const persistedRef = (0, react_1.useRef)(persisted);
+    const prevPersistedKeyRef = (0, react_1.useRef)(persisted === null || persisted === void 0 ? void 0 : persisted.key);
     const prevAnswerDataRef = (0, react_1.useRef)(answers.data);
     const hasTrackedCurrentAnswerRef = (0, react_1.useRef)(false);
     const answersRef = (0, react_1.useRef)(answers);
@@ -61,6 +62,9 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, ini
     (0, react_1.useEffect)(() => {
         conversationHistoryRef.current = conversationHistory;
     }, [conversationHistory]);
+    (0, react_1.useEffect)(() => {
+        persistedRef.current = persisted;
+    }, [persisted]);
     const submitQuestion = (0, react_1.useCallback)((question, source) => {
         lastSourceRef.current = source;
         lastQuestionRef.current = question;
@@ -101,7 +105,9 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, ini
     const resetState = (0, react_1.useCallback)(() => {
         setCurrentQuestion('');
         setDisplayedQuestions(suggestedQuestions.data);
-        setConversationHistory([]);
+        // A stored conversation outlives the modal: it is there again when the modal reopens.
+        if (!persistedRef.current)
+            setConversationHistory([]);
         prevAnswerDataRef.current = null;
         showsFollowUpsRef.current = false;
     }, [suggestedQuestions.data]);
@@ -116,6 +122,19 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, ini
         prevAnswerDataRef.current = null;
         showsFollowUpsRef.current = false;
     }, [itemId]);
+    (0, react_1.useEffect)(() => {
+        // Runs after the itemId reset above, so another product's stored conversation replaces the empty one.
+        if (!persisted || prevPersistedKeyRef.current === persisted.key)
+            return;
+        prevPersistedKeyRef.current = persisted.key;
+        // The live answer belongs to the conversation being replaced: left in place, the restored last
+        // turn would show its products and credit its feedback.
+        answersRef.current.clear();
+        const restored = renumber(persisted.history);
+        entryIdRef.current = restored.length;
+        setConversationHistory(restored);
+        setCurrentQuestion('');
+    }, [persisted]);
     (0, react_1.useEffect)(() => {
         // The ref, not `answers.data`, which outlives the item it answered.
         if (showsFollowUpsRef.current)
@@ -149,12 +168,15 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, ini
         const qnaResultId = (_d = answers.data) === null || _d === void 0 ? void 0 : _d.qna_result_id;
         if (isConversation) {
             setConversationHistory((prev) => {
-                var _a, _b;
-                if (prev.length === 0)
+                var _a, _b, _c;
+                // Only a question still waiting is answered: after a switch of product or shopper, a late
+                // answer must not overwrite a settled turn of the conversation that replaced it.
+                if (prev.length === 0 || prev[prev.length - 1].answer !== '')
                     return prev;
                 const updated = [...prev];
                 updated[updated.length - 1] = Object.assign(Object.assign({}, updated[updated.length - 1]), { answer: answerValue, items: answers.items, threadId: answerThreadId, qnaResultId });
                 (_b = (_a = callbacksRef.current) === null || _a === void 0 ? void 0 : _a.onAnswer) === null || _b === void 0 ? void 0 : _b.call(_a, updated, contextRef.current);
+                (_c = persistedRef.current) === null || _c === void 0 ? void 0 : _c.save(updated);
                 return updated;
             });
         }

package/lib/cjs/hooks/usePersistedConversation.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const conversationStorage_1 = require("../utils/conversationStorage");
+function loadIfEnabled({ enabled, apiKey, userId, itemId, threadIdProp, }) {
+    if (!enabled)
+        return { threadId: '', history: [] };
+    const stored = (0, conversationStorage_1.loadConversation)({ apiKey, userId }, itemId);
+    if (stored && (!threadIdProp || stored.threadId === threadIdProp)) {
+        return { threadId: stored.threadId, history: stored.entries };
+    }
+    // A product with nothing stored starts its own thread, so returning to another product resumes
+    // a thread that only ever heard about that product.
+    return { threadId: threadIdProp || crypto.randomUUID(), history: [] };
+}
+/** The stored conversation for this product and shopper, or `undefined` while persistence is off. */
+function usePersistedConversation({ enabled, apiKey, userId: userIdProp, itemId, threadId: threadIdProp, }) {
+    const userId = (0, conversationStorage_1.isGuest)(userIdProp) ? undefined : String(userIdProp);
+    const userIdOmitted = userIdProp === undefined;
+    // An omitted id stores a signed-in shopper as a guest, so say so rather than fail silently.
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !userIdOmitted)
+            return;
+        console.warn('[CioPia] persistConversation is on but no userId was passed, so conversations are stored as a guest. Pass the signed-in shopper id, or null for a guest.');
+    }, [enabled, userIdOmitted]);
+    const target = { enabled, apiKey, userId, itemId, threadIdProp };
+    const [shown, setShown] = (0, react_1.useState)(() => (Object.assign(Object.assign(Object.assign({}, target), { key: 0, loggedIn: false }), loadIfEnabled(target))));
+    // Adjusted during render, not in an effect: React re-renders before committing, so the first
+    // request after a switch of product or shopper already goes out on the new thread. See
+    // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    let current = shown;
+    if (shown.enabled !== enabled ||
+        shown.apiKey !== apiKey ||
+        shown.userId !== userId ||
+        shown.itemId !== itemId ||
+        shown.threadIdProp !== threadIdProp) {
+        const loggedIn = enabled &&
+            shown.enabled &&
+            shown.apiKey === apiKey &&
+            shown.userId === undefined &&
+            userId !== undefined;
+        // A login continues the guest's conversation as the shopper's own. With none to carry over,
+        // the shopper's own stored conversation is shown, rather than replaced by an empty one.
+        const keepsConversation = loggedIn &&
+            shown.itemId === itemId &&
+            shown.threadIdProp === threadIdProp &&
+            (0, conversationStorage_1.loadConversation)({ apiKey }, itemId) !== undefined;
+        const conversation = keepsConversation
+            ? { key: shown.key, threadId: shown.threadId, history: shown.history }
+            : Object.assign({ key: shown.key + 1 }, loadIfEnabled(target));
+        current = Object.assign(Object.assign(Object.assign({}, target), { loggedIn }), conversation);
+        setShown(current);
+    }
+    (0, react_1.useEffect)(() => {
+        if (shown.loggedIn && shown.userId)
+            (0, conversationStorage_1.moveGuestConversations)(shown.apiKey, shown.userId);
+    }, [shown]);
+    const shownRef = (0, react_1.useRef)(shown);
+    (0, react_1.useEffect)(() => {
+        shownRef.current = shown;
+    }, [shown]);
+    const save = (0, react_1.useCallback)((history) => {
+        const latest = shownRef.current;
+        if (!latest.enabled)
+            return;
+        (0, conversationStorage_1.saveConversation)({ apiKey: latest.apiKey, userId: latest.userId }, latest.itemId, latest.threadId, history);
+    }, []);
+    const { key, threadId, history } = current;
+    return (0, react_1.useMemo)(() => (current.enabled ? { key, threadId, history, save } : undefined), [current.enabled, key, threadId, history, save]);
+}
+exports.default = usePersistedConversation;

package/lib/cjs/hooks/usePiaClient.js

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const version_1 = tslib_1.__importDefault(require("../version"));
-function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, testCells, }) {
+function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedClient, testCells, userId, }) {
     const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
     const threadId = providedThreadId || generatedThreadId;
     const serializedTestCells = (0, react_1.useMemo)(() => JSON.stringify(testCells !== null && testCells !== void 0 ? testCells : null), [testCells]);
@@ -15,6 +15,13 @@ function usePiaClient({ apiKey, threadId: providedThreadId, cioClient: providedC
         // testCells is compared by serializedTestCells so an inline object does not rebuild the client
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiKey, providedClient, serializedTestCells]);
+    // Set rather than passed to the constructor, so a login does not rebuild the client.
+    (0, react_1.useEffect)(() => {
+        if (providedClient || userId === undefined)
+            return;
+        // The typings require `apiKey`; the client merges a partial update.
+        client.setClientOptions({ userId: userId || undefined });
+    }, [client, providedClient, userId]);
     // A caller's client owns its own options, so say so rather than dropping these silently.
     (0, react_1.useEffect)(() => {
         if (!providedClient || !testCells || Object.keys(testCells).length === 0)

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/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AgentRequestError = exports.renderMarkdown = exports.sanitizeHtml = exports.CioPia = void 0;
+exports.AgentRequestError = exports.clearPersistedConversations = exports.renderMarkdown = exports.sanitizeHtml = exports.CioPia = void 0;
 const tslib_1 = require("tslib");
 const CioPia_1 = tslib_1.__importDefault(require("./components/CioPia"));
 // Components
@@ -10,6 +10,9 @@ Object.defineProperty(exports, "CioPia", { enumerable: true, get: function () {
 var contentTransformers_1 = require("./utils/contentTransformers");
 Object.defineProperty(exports, "sanitizeHtml", { enumerable: true, get: function () { return contentTransformers_1.sanitizeHtml; } });
 Object.defineProperty(exports, "renderMarkdown", { enumerable: true, get: function () { return contentTransformers_1.renderMarkdown; } });
+// Persistence
+var conversationStorage_1 = require("./utils/conversationStorage");
+Object.defineProperty(exports, "clearPersistedConversations", { enumerable: true, get: function () { return conversationStorage_1.clearPersistedConversations; } });
 // Errors
 var errors_1 = require("./errors");
 Object.defineProperty(exports, "AgentRequestError", { enumerable: true, get: function () { return errors_1.AgentRequestError; } });