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

package/lib/cjs/hooks/useAnswerResults.js

@@ -6,14 +6,21 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters
     const [answerResults, setAnswerResults] = (0, react_1.useState)(null);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const serializedParameters = (0, react_1.useMemo)(() => JSON.stringify(parameters), [parameters]);
     const items = (0, react_1.useMemo)(() => (0, transformers_1.extractAndTransformItems)(answerResults, formatImageUrl), [answerResults, formatImageUrl]);
+    // A host that rebuilds the client on render must not change getAnswer's identity.
+    const cioClientRef = (0, react_1.useRef)(cioClient);
+    (0, react_1.useEffect)(() => {
+        cioClientRef.current = cioClient;
+    }, [cioClient]);
     const fetchResult = (0, react_1.useCallback)((question) => {
-        if (!cioClient)
+        const client = cioClientRef.current;
+        if (!client)
             return;
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
-        cioClient.agent.pia
+        client.agent.pia
             .getAnswerResults(itemId, question, Object.assign({ threadId, variationId }, parameters))
             .then((response) => {
             setAnswerResults(response);
@@ -26,7 +33,9 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId, parameters]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemId, variationId, threadId, serializedParameters]);
     return {
         data: answerResults,
         items,

package/lib/cjs/hooks/useConversation.js

@@ -18,6 +18,9 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
     const trackingRef = (0, react_1.useRef)(tracking);
     const lastQuestionRef = (0, react_1.useRef)('');
     const lastSourceRef = (0, react_1.useRef)('user');
+    // Set once an answer owns the question row, so a later suggested-questions
+    // response cannot take it back.
+    const showsFollowUpsRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         callbacksRef.current = callbacks;
     }, [callbacks]);
@@ -69,20 +72,29 @@ function useConversation({ pia, itemId, isConversation, callbacks, tracking, })
         setDisplayedQuestions(suggestedQuestions.data);
         setConversationHistory([]);
         prevAnswerDataRef.current = null;
+        showsFollowUpsRef.current = false;
     }, [suggestedQuestions.data]);
     (0, react_1.useEffect)(() => {
         setCurrentQuestion('');
         setDisplayedQuestions([]);
         setConversationHistory([]);
         prevAnswerDataRef.current = null;
+        showsFollowUpsRef.current = false;
     }, [itemId]);
     (0, react_1.useEffect)(() => {
+        // The ref, not `answers.data`, which outlives the item it answered.
+        if (showsFollowUpsRef.current)
+            return;
         setDisplayedQuestions(suggestedQuestions.data);
     }, [suggestedQuestions.data]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
-        if ((_a = answers.data) === null || _a === void 0 ? void 0 : _a.follow_up_questions)
-            setDisplayedQuestions(answers.data.follow_up_questions);
+        if (answers.data) {
+            // An answer with no follow-ups empties the row: the pre-generated questions
+            // include the one just asked.
+            setDisplayedQuestions((_a = answers.data.follow_up_questions) !== null && _a !== void 0 ? _a : []);
+            showsFollowUpsRef.current = true;
+        }
         if (answers.data && lastQuestionRef.current && !hasTrackedCurrentAnswerRef.current) {
             hasTrackedCurrentAnswerRef.current = true;
             (_b = trackingRef.current) === null || _b === void 0 ? void 0 : _b.trackAnswerView(lastQuestionRef.current, answers.data, answers.items);

package/lib/cjs/hooks/useRecsPod.js

@@ -30,15 +30,23 @@ function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, form
     (0, react_1.useEffect)(() => {
         formatImageUrlRef.current = formatImageUrl;
     }, [formatImageUrl]);
+    // A host that rebuilds the client on render must not restart the request.
+    const cioClientRef = (0, react_1.useRef)(cioClient);
+    (0, react_1.useEffect)(() => {
+        cioClientRef.current = cioClient;
+    }, [cioClient]);
+    // A client arriving where there was none still warrants a fetch.
+    const hasClient = !!cioClient;
     const strategy = (parameters === null || parameters === void 0 ? void 0 : parameters.strategy) || DEFAULT_STRATEGY;
     const { numResults, defaultTitle } = parameters || {};
     const fetchResult = (0, react_1.useCallback)((shopperInput, source) => {
         var _a;
         // TODO: once getRecs is added to the JS client SDK, replace this guard+cast
         // with a direct call: cioClient.agent.getRecs({...})
-        const getRecs = (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.agent) === null || _a === void 0 ? void 0 : _a.getRecs;
-        if (!cioClient || !getRecs) {
-            if (cioClient && !getRecs) {
+        const client = cioClientRef.current;
+        const getRecs = (_a = client === null || client === void 0 ? void 0 : client.agent) === null || _a === void 0 ? void 0 : _a.getRecs;
+        if (!client || !getRecs) {
+            if (client && !getRecs) {
                 console.info('[CioPia] getRecs is not available on the client SDK yet.');
             }
             setIsLoading(false);
@@ -51,7 +59,7 @@ function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, form
         setError(null);
         setHasUnsupportedInput(false);
         getRecs
-            .call(cioClient.agent, {
+            .call(client.agent, {
             itemId,
             variationId,
             threadId,
@@ -91,9 +99,9 @@ function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, form
             setIsLoading(false);
         });
     }, 
-    // Every dependency is a primitive. `formatImageUrl` is read through a ref instead, so a
-    // caller writing it inline cannot restart the request on every render.
-    [cioClient, itemId, variationId, threadId, strategy, numResults]);
+    // Every dependency is a primitive; `formatImageUrl` and the client are read through refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasClient, itemId, variationId, threadId, strategy, numResults]);
     (0, react_1.useEffect)(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/cjs/hooks/useSuggestedQuestions.js

@@ -6,12 +6,21 @@ function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, param
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const serializedParameters = (0, react_1.useMemo)(() => JSON.stringify(parameters), [parameters]);
+    // The client is how the question is asked, not part of the question: a host that
+    // rebuilds it on render must not make the widget ask the same thing again.
+    const cioClientRef = (0, react_1.useRef)(cioClient);
+    (0, react_1.useEffect)(() => {
+        cioClientRef.current = cioClient;
+    }, [cioClient]);
+    // A client arriving where there was none is the one client change worth a fetch.
+    const hasClient = !!cioClient;
     const fetchResult = (0, react_1.useCallback)(() => {
-        if (!cioClient)
+        const client = cioClientRef.current;
+        if (!client)
             return;
         setIsLoading(true);
         setError(null);
-        cioClient.agent.pia
+        client.agent.pia
             .getSuggestedQuestions(itemId, Object.assign({ threadId,
             variationId }, parameters))
             .then((response) => {
@@ -26,7 +35,7 @@ function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, param
         });
         // parameters is serialized via serializedParameters to prevent refetch on identity changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient, itemId, variationId, threadId, serializedParameters]);
+    }, [hasClient, itemId, variationId, threadId, serializedParameters]);
     (0, react_1.useEffect)(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/cjs/version.js

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

package/lib/mjs/hooks/useAnswerResults.js

@@ -1,17 +1,24 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { extractAndTransformItems } from '../utils/transformers';
 export default function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
+    const serializedParameters = useMemo(() => JSON.stringify(parameters), [parameters]);
     const items = useMemo(() => extractAndTransformItems(answerResults, formatImageUrl), [answerResults, formatImageUrl]);
+    // A host that rebuilds the client on render must not change getAnswer's identity.
+    const cioClientRef = useRef(cioClient);
+    useEffect(() => {
+        cioClientRef.current = cioClient;
+    }, [cioClient]);
     const fetchResult = useCallback((question) => {
-        if (!cioClient)
+        const client = cioClientRef.current;
+        if (!client)
             return;
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
-        cioClient.agent.pia
+        client.agent.pia
             .getAnswerResults(itemId, question, { threadId, variationId, ...parameters })
             .then((response) => {
             setAnswerResults(response);
@@ -24,7 +31,9 @@ export default function useAnswerResults({ itemId, variationId, threadId, cioCli
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId, parameters]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemId, variationId, threadId, serializedParameters]);
     return {
         data: answerResults,
         items,

package/lib/mjs/hooks/useConversation.js

@@ -15,6 +15,9 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
     const trackingRef = useRef(tracking);
     const lastQuestionRef = useRef('');
     const lastSourceRef = useRef('user');
+    // Set once an answer owns the question row, so a later suggested-questions
+    // response cannot take it back.
+    const showsFollowUpsRef = useRef(false);
     useEffect(() => {
         callbacksRef.current = callbacks;
     }, [callbacks]);
@@ -62,19 +65,28 @@ export default function useConversation({ pia, itemId, isConversation, callbacks
         setDisplayedQuestions(suggestedQuestions.data);
         setConversationHistory([]);
         prevAnswerDataRef.current = null;
+        showsFollowUpsRef.current = false;
     }, [suggestedQuestions.data]);
     useEffect(() => {
         setCurrentQuestion('');
         setDisplayedQuestions([]);
         setConversationHistory([]);
         prevAnswerDataRef.current = null;
+        showsFollowUpsRef.current = false;
     }, [itemId]);
     useEffect(() => {
+        // The ref, not `answers.data`, which outlives the item it answered.
+        if (showsFollowUpsRef.current)
+            return;
         setDisplayedQuestions(suggestedQuestions.data);
     }, [suggestedQuestions.data]);
     useEffect(() => {
-        if (answers.data?.follow_up_questions)
-            setDisplayedQuestions(answers.data.follow_up_questions);
+        if (answers.data) {
+            // An answer with no follow-ups empties the row: the pre-generated questions
+            // include the one just asked.
+            setDisplayedQuestions(answers.data.follow_up_questions ?? []);
+            showsFollowUpsRef.current = true;
+        }
         if (answers.data && lastQuestionRef.current && !hasTrackedCurrentAnswerRef.current) {
             hasTrackedCurrentAnswerRef.current = true;
             trackingRef.current?.trackAnswerView(lastQuestionRef.current, answers.data, answers.items);

package/lib/mjs/hooks/useRecsPod.js

@@ -27,14 +27,22 @@ export default function useRecsPod({ itemId, variationId, threadId, cioClient, p
     useEffect(() => {
         formatImageUrlRef.current = formatImageUrl;
     }, [formatImageUrl]);
+    // A host that rebuilds the client on render must not restart the request.
+    const cioClientRef = useRef(cioClient);
+    useEffect(() => {
+        cioClientRef.current = cioClient;
+    }, [cioClient]);
+    // A client arriving where there was none still warrants a fetch.
+    const hasClient = !!cioClient;
     const strategy = parameters?.strategy || DEFAULT_STRATEGY;
     const { numResults, defaultTitle } = parameters || {};
     const fetchResult = useCallback((shopperInput, source) => {
         // TODO: once getRecs is added to the JS client SDK, replace this guard+cast
         // with a direct call: cioClient.agent.getRecs({...})
-        const getRecs = cioClient?.agent?.getRecs;
-        if (!cioClient || !getRecs) {
-            if (cioClient && !getRecs) {
+        const client = cioClientRef.current;
+        const getRecs = client?.agent?.getRecs;
+        if (!client || !getRecs) {
+            if (client && !getRecs) {
                 console.info('[CioPia] getRecs is not available on the client SDK yet.');
             }
             setIsLoading(false);
@@ -47,7 +55,7 @@ export default function useRecsPod({ itemId, variationId, threadId, cioClient, p
         setError(null);
         setHasUnsupportedInput(false);
         getRecs
-            .call(cioClient.agent, {
+            .call(client.agent, {
             itemId,
             variationId,
             threadId,
@@ -87,9 +95,9 @@ export default function useRecsPod({ itemId, variationId, threadId, cioClient, p
             setIsLoading(false);
         });
     }, 
-    // Every dependency is a primitive. `formatImageUrl` is read through a ref instead, so a
-    // caller writing it inline cannot restart the request on every render.
-    [cioClient, itemId, variationId, threadId, strategy, numResults]);
+    // Every dependency is a primitive; `formatImageUrl` and the client are read through refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasClient, itemId, variationId, threadId, strategy, numResults]);
     useEffect(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/mjs/hooks/useSuggestedQuestions.js

@@ -1,15 +1,24 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 export default function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, }) {
     const [questions, setQuestions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const serializedParameters = useMemo(() => JSON.stringify(parameters), [parameters]);
+    // The client is how the question is asked, not part of the question: a host that
+    // rebuilds it on render must not make the widget ask the same thing again.
+    const cioClientRef = useRef(cioClient);
+    useEffect(() => {
+        cioClientRef.current = cioClient;
+    }, [cioClient]);
+    // A client arriving where there was none is the one client change worth a fetch.
+    const hasClient = !!cioClient;
     const fetchResult = useCallback(() => {
-        if (!cioClient)
+        const client = cioClientRef.current;
+        if (!client)
             return;
         setIsLoading(true);
         setError(null);
-        cioClient.agent.pia
+        client.agent.pia
             .getSuggestedQuestions(itemId, {
             threadId,
             variationId,
@@ -27,7 +36,7 @@ export default function useSuggestedQuestions({ itemId, variationId, threadId, c
         });
         // parameters is serialized via serializedParameters to prevent refetch on identity changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cioClient, itemId, variationId, threadId, serializedParameters]);
+    }, [hasClient, itemId, variationId, threadId, serializedParameters]);
     useEffect(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/mjs/version.js

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

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

@@ -1,6 +1,6 @@
-import DOMPurify from 'dompurify';
+import DOMPurify, { type Config } from 'dompurify';
 export interface SanitizeOptions {
-    config: DOMPurify.Config;
+    config: Config;
 }
 /** Options for {@link renderMarkdown}. */
 export interface RenderMarkdownOptions {

package/lib/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -99,7 +99,6 @@
     "@storybook/testing-library": "^0.2.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
-    "@types/dompurify": "^3.0.5",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -127,17 +126,19 @@
     "typescript-eslint": "^8.59.2",
     "vite": "^6.4.3",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "webpack": "^5.98.0"
+    "webpack": "^5.104.1"
   },
   "volta": {
     "node": "22.18.0",
     "npm": "10.9.3"
   },
   "dependencies": {
-    "dompurify": "^3.4.2",
+    "dompurify": "^3.4.15",
     "marked": "^15.0.12"
   },
   "overrides": {
-    "uuid": "^11.1.1"
+    "uuid": "^11.1.1",
+    "browserslist": "^4.28.9",
+    "postcss-selector-parser": "^7.1.6"
   }
 }