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

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

@@ -8,6 +8,7 @@ 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"));
@@ -22,15 +23,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 +46,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,6 +62,7 @@ function CioPiaQna(props) {
         callbacks,
         tracking,
         initialConversationHistory,
+        persisted,
     });
     const { containerRef: viewportContainerRef } = (0, useViewportTracking_1.default)({
         tracking,
@@ -64,7 +74,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.

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

package/lib/cjs/utils/conversationStorage.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearPersistedConversations = exports.moveGuestConversations = exports.saveConversation = exports.loadConversation = exports.isRestorableEntry = exports.isGuest = exports.PERSISTENCE_TTL_MS = void 0;
+const tslib_1 = require("tslib");
+const KEY_PREFIX = 'cio-pia:chat:v1';
+const STORED_VERSION = 1;
+/** Matches how long the agent remembers a thread. */
+exports.PERSISTENCE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+const isGuest = (userId) => userId == null || userId === '';
+exports.isGuest = isGuest;
+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)));
+}
+exports.isRestorableEntry = isRestorableEntry;
+function isPersistedConversation(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const { threadId, entries, updatedAt } = value;
+    return (typeof threadId === 'string' &&
+        threadId !== '' &&
+        typeof updatedAt === 'number' &&
+        Array.isArray(entries) &&
+        entries.every(isRestorableEntry));
+}
+function storageKeyFor({ apiKey, userId }) {
+    const parts = (0, exports.isGuest)(userId) ? [apiKey] : [apiKey, String(userId)];
+    return [KEY_PREFIX, ...parts.map(encodeURIComponent)].join(':');
+}
+// A guest's conversations end with the tab, so the next person at that browser never sees them.
+function storageFor({ userId }) {
+    try {
+        if (typeof window === 'undefined')
+            return null;
+        return (0, exports.isGuest)(userId) ? window.sessionStorage : window.localStorage;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function readItems(storage, key) {
+    var _a;
+    try {
+        const parsed = JSON.parse((_a = storage.getItem(key)) !== null && _a !== void 0 ? _a : 'null');
+        if ((parsed === null || parsed === void 0 ? void 0 : parsed.version) !== STORED_VERSION || typeof parsed.items !== 'object' || !parsed.items) {
+            return {};
+        }
+        const cutoff = Date.now() - exports.PERSISTENCE_TTL_MS;
+        return Object.fromEntries(Object.entries(parsed.items).filter((pair) => isPersistedConversation(pair[1]) && pair[1].updatedAt >= cutoff));
+    }
+    catch (_b) {
+        return {};
+    }
+}
+function tryWrite(storage, key, items) {
+    try {
+        if (Object.keys(items).length === 0)
+            storage.removeItem(key);
+        else
+            storage.setItem(key, JSON.stringify({ version: STORED_VERSION, items }));
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+// When storage is full, shed other products' conversations oldest first, then this one's oldest
+// turns. If not even one turn fits, this conversation is left out rather than stored half-written.
+function writeFitting(storage, key, items, itemId) {
+    if (tryWrite(storage, key, items))
+        return;
+    const _a = items, _b = itemId, saved = _a[_b], others = tslib_1.__rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+    const oldestFirst = Object.keys(others).sort((a, b) => others[a].updatedAt - others[b].updatedAt);
+    const fitsAfterEviction = oldestFirst.some((_, index) => {
+        const kept = Object.fromEntries(oldestFirst.slice(index + 1).map((id) => [id, others[id]]));
+        return tryWrite(storage, key, Object.assign(Object.assign({}, kept), { [itemId]: saved }));
+    });
+    if (fitsAfterEviction)
+        return;
+    const fitsTrimmed = saved.entries
+        .slice(1)
+        .some((_, i) => tryWrite(storage, key, { [itemId]: Object.assign(Object.assign({}, saved), { entries: saved.entries.slice(i + 1) }) }));
+    if (fitsTrimmed)
+        return;
+    tryWrite(storage, key, others);
+}
+function loadConversation(owner, itemId) {
+    const storage = storageFor(owner);
+    return storage ? readItems(storage, storageKeyFor(owner))[itemId] : undefined;
+}
+exports.loadConversation = loadConversation;
+/** Stores the answered turns of one product's conversation. A turn still waiting on its answer is left out. */
+function saveConversation(owner, itemId, threadId, history) {
+    const entries = history.filter((entry) => entry.answer !== '');
+    const storage = storageFor(owner);
+    if (!storage || entries.length === 0)
+        return;
+    const key = storageKeyFor(owner);
+    const items = readItems(storage, key);
+    writeFitting(storage, key, Object.assign(Object.assign({}, items), { [itemId]: { threadId, entries, updatedAt: Date.now() } }), itemId);
+}
+exports.saveConversation = saveConversation;
+/** On login: every guest conversation moves into the shopper's store, so none is left for the next guest. */
+function moveGuestConversations(apiKey, userId) {
+    const guest = { apiKey };
+    const shopper = { apiKey, userId };
+    const guestStorage = storageFor(guest);
+    const shopperStorage = storageFor(shopper);
+    if (!guestStorage || !shopperStorage)
+        return;
+    const guestKey = storageKeyFor(guest);
+    const moved = readItems(guestStorage, guestKey);
+    if (Object.keys(moved).length === 0)
+        return;
+    const shopperKey = storageKeyFor(shopper);
+    const merged = readItems(shopperStorage, shopperKey);
+    Object.entries(moved).forEach(([itemId, conversation]) => {
+        var _a, _b;
+        if (((_b = (_a = merged[itemId]) === null || _a === void 0 ? void 0 : _a.updatedAt) !== null && _b !== void 0 ? _b : -Infinity) <= conversation.updatedAt) {
+            merged[itemId] = conversation;
+        }
+    });
+    if (tryWrite(shopperStorage, shopperKey, merged))
+        tryWrite(guestStorage, guestKey, {});
+}
+exports.moveGuestConversations = moveGuestConversations;
+/**
+ * Deletes every stored conversation of one shopper, or of the current tab's guest when `userId` is
+ * omitted. A widget already showing one keeps it on screen until its `itemId` or `userId` changes.
+ */
+function clearPersistedConversations({ apiKey, userId, }) {
+    const owner = { apiKey, userId };
+    const storage = storageFor(owner);
+    if (storage)
+        tryWrite(storage, storageKeyFor(owner), {});
+}
+exports.clearPersistedConversations = clearPersistedConversations;

package/lib/cjs/version.js

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

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

@@ -5,6 +5,7 @@ import SuggestedQuestionsContainer from '../SuggestedQuestionsContainer/Suggeste
 import SuggestedQuestionsSkeleton from '../SuggestedQuestionsContainer/SuggestedQuestionsSkeleton';
 import useCioPia from '../../hooks/useCioPia';
 import useConversation from '../../hooks/useConversation';
+import usePersistedConversation from '../../hooks/usePersistedConversation';
 import useTracking from '../../hooks/useTracking';
 import useViewportTracking from '../../hooks/useViewportTracking';
 import useViewportCallbacks from '../../hooks/useViewportCallbacks';
@@ -19,14 +20,21 @@ import CheckoutTriggerBar from './CheckoutTriggerBar';
 /** The question-and-answer experience: `mode: 'default'`, `mode: 'conversation'`, and the modal. */
 // eslint-disable-next-line complexity
 export default function CioPiaQna(props) {
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, answerParameters, parameters, trackingConfigs, checkoutTriggers, abTest, initialConversationHistory, } = props;
+    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 = useCioPia({
+    const persisted = usePersistedConversation({
+        enabled: Boolean(persistConversation?.enabled) && isConversation,
         apiKey,
+        userId,
         itemId,
         threadId,
+    });
+    const pia = useCioPia({
+        apiKey,
+        itemId,
+        threadId: persisted?.threadId ?? threadId,
         variationId,
         cioClient,
         suggestedQuestionsParameters,
@@ -34,6 +42,7 @@ export default function CioPiaQna(props) {
         parameters,
         formatImageUrl: formatters?.formatImageUrl,
         testCells: abTest?.testCells,
+        userId,
     });
     const tracking = useTracking({
         cioClient: pia.cioClient,
@@ -49,6 +58,7 @@ export default function CioPiaQna(props) {
         callbacks,
         tracking,
         initialConversationHistory,
+        persisted,
     });
     const { containerRef: viewportContainerRef } = useViewportTracking({
         tracking,

package/lib/mjs/hooks/useAnswerResults.js

@@ -11,34 +11,50 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
     useEffect(() => {
         cioClientRef.current = cioClient;
     }, [cioClient]);
+    const requestIdRef = useRef(0);
     const fetchResult = 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, { 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 = useCallback(() => {
+        requestIdRef.current += 1;
+        setAnswerResults(null);
+        setError(null);
+        setIsLoading(false);
+    }, []);
     return {
         data: answerResults,
         items,
         isLoading,
         error,
         getAnswer: fetchResult,
+        clear,
     };
 }

package/lib/mjs/hooks/useCioPia.js

@@ -37,12 +37,13 @@ function mapDeprecatedParameters(params) {
     return hasEntries ? mapped : undefined;
 }
 export default 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 } = usePiaClient({
         apiKey,
         threadId: providedThreadId,
         cioClient: providedClient,
         testCells,
+        userId,
     });
     const mappedDeprecated = mapDeprecatedParameters(parameters);
     const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters