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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(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");
+/**
+ * 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
+ * never changes height under the shopper's cursor.
+ */
+function RecsPodRefinement({ refinement, isLoading, inputError, showInput, translations, componentOverrides, onRefine, onSubmit, onInputFocus, }) {
+    const options = (refinement === null || refinement === void 0 ? void 0 : refinement.options) || [];
+    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) })))),
+        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, 
+                // 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 })))));
+}
+exports.default = RecsPodRefinement;

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

@@ -3,10 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const classNames_1 = require("../../utils/classNames");
 const translate_1 = require("../../utils/translate");
 const icons_1 = require("../icons");
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, }) {
+/**
+ * Numbers the `Input`s mounted on the page, so each one can give its error message a DOM `id` no
+ * other input will collide with. Nothing to do with messages or errors themselves - the id is
+ * needed because that is what the field's `aria-describedby` has to point at.
+ *
+ * `useId` is the built-in way to do this, but it is React 18+ and this package supports React
+ * >= 16.12. Read once per instance through a lazy initializer, so the number an input gets holds
+ * across its re-renders.
+ */
+let inputIdCounter = 0;
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, error, placeholderKey = 'Ask anything', showSendButton = true, }) {
     const [value, setValue] = (0, react_1.useState)(providedValue || '');
+    const [errorId] = (0, react_1.useState)(() => {
+        inputIdCounter += 1;
+        return `cio-pia-input-${inputIdCounter}-error`;
+    });
     (0, react_1.useEffect)(() => {
         if (providedValue) {
             setValue(providedValue);
@@ -27,20 +42,23 @@ function Input({ value: providedValue, placeholder, disabled = false, onSubmit,
         }
     };
     // Priority: translations > placeholder prop > default
-    const resolvedPlaceholder = (translations === null || translations === void 0 ? void 0 : translations['Ask anything']) !== undefined
-        ? (0, translate_1.translate)('Ask anything', translations)
-        : (placeholder !== null && placeholder !== void 0 ? placeholder : (0, translate_1.translate)('Ask anything'));
+    const resolvedPlaceholder = (translations === null || translations === void 0 ? void 0 : translations[placeholderKey]) !== undefined
+        ? (0, translate_1.translate)(placeholderKey, translations)
+        : (placeholder !== null && placeholder !== void 0 ? placeholder : (0, translate_1.translate)(placeholderKey));
     return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: {
             disabled,
             placeholder: resolvedPlaceholder,
             onSubmit: handleSubmit,
             onFocus,
             translations,
+            error,
         }, override: componentOverride === null || componentOverride === void 0 ? void 0 : componentOverride.reactNode },
-        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, disabled: disabled, className: 'cio-pia-input' }),
-            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)))));
+        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, 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)))),
+            error && (react_1.default.createElement("span", { className: 'cio-pia-input-error', id: errorId, role: 'alert' }, error)))));
 }
 exports.default = Input;

package/lib/cjs/components/Input/InputStyles.css

@@ -21,11 +21,38 @@
     1px 1px 1px 0px rgba(18, 18, 105, 0.05) inset;
 }
 
+/*
+ * Input Without A Send Button
+ *
+ * The right padding above is room for the Send button. With no button there is nothing to keep
+ * clear of, and leaving it would truncate what the shopper typed well short of the border.
+ */
+.cio-pia-input--no-send {
+  padding-right: 12px;
+}
+
 /* Input Hover */
 .cio-pia-input:hover {
   border: 1px solid #c8cad0;
 }
 
+/* Input Rejected Value */
+.cio-pia-input--error,
+.cio-pia-input--error:hover,
+.cio-pia-input--error:focus {
+  border: 1px solid #d93025;
+  box-shadow: none;
+}
+
+/* Input Rejected Value Message */
+.cio-pia-input-error {
+  display: block;
+  margin-top: 4px;
+  color: #d93025;
+  font-size: 12px;
+  line-height: 16px;
+}
+
 /* Input Focus */
 .cio-pia-input:focus {
   outline: none;

package/lib/cjs/components/SuggestedQuestion/SuggestedQuestion.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("../icons");
-function SuggestedQuestion({ question, onClick }) {
+function SuggestedQuestion({ question, onClick, icon }) {
     return (react_1.default.createElement("button", { type: 'button', className: 'cio-pia-suggested-question', onClick: onClick },
-        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' },
-            react_1.default.createElement(icons_1.QuestionIcon, null)),
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' }, icon !== null && icon !== void 0 ? icon : react_1.default.createElement(icons_1.QuestionIcon, null)),
         question));
 }
 exports.default = SuggestedQuestion;

package/lib/cjs/components/SuggestedQuestionsContainer/SuggestedQuestionsContainerStyles.css

@@ -21,7 +21,7 @@
 }
 
 .cio-pia-suggested-question-skeleton {
-  height: 28px;
+  height: 34px;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, 0.05);
   animation: loading-animation 2s infinite ease-in-out;

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_NAME = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
+exports.RECS_INPUT_PLACEHOLDER = exports.RECS_REFINEMENT_LABEL = exports.RECS_UNSUPPORTED_REQUEST = exports.RECS_FALLBACK_TITLE = exports.RECS_LOADING_TITLE = exports.DISCLAIMER_TEXT = exports.MOCK_QUESTIONS = exports.DEMO_QUESTION_ALTERNATIVE_PRODUCTS = exports.DEMO_QUESTION = exports.DEMO_ITEM_NAME = exports.DEMO_ITEM_ID = exports.DEMO_API_KEY = void 0;
 exports.DEMO_API_KEY = 'key_13TO6qN9H3BP3Wrn';
 exports.DEMO_ITEM_ID = '149100215';
 exports.DEMO_ITEM_NAME = 'Ensure Original Nutrition Shake';
@@ -15,3 +15,14 @@ exports.MOCK_QUESTIONS = [
     { value: 'What is the serving size and calorie count?' },
 ];
 exports.DISCLAIMER_TEXT = 'AI-generated answers aim to help, but they may occasionally miss details or be inaccurate. Double-check important information before purchasing.';
+/**
+ * Recommendations pod strings the API cannot supply, because in these states there is either
+ * no response yet or no usable response at all. Everything else the pod shows comes from the
+ * API. All five are `Translations` keys, so reference the constants instead of retyping the
+ * literals - a mistyped key falls back to itself with no warning.
+ */
+exports.RECS_LOADING_TITLE = 'Adapting recommendations to your preference';
+exports.RECS_FALLBACK_TITLE = 'Best selling products';
+exports.RECS_UNSUPPORTED_REQUEST = 'Unsupported request, try a different feature.';
+exports.RECS_REFINEMENT_LABEL = "Not what you're looking for? Try:";
+exports.RECS_INPUT_PLACEHOLDER = 'Describe something else...';

package/lib/cjs/hooks/useAnswerResults.js

@@ -1,18 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const react_1 = require("react");
 const transformers_1 = require("../utils/transformers");
-const fetchAnswerResults = ({ client, itemId, question, variationId, threadId, parameters, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    const response = yield client.agent.getAnswerResults({
-        itemId,
-        variationId,
-        threadId,
-        question,
-        parameters,
-    });
-    return response;
-});
 function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, }) {
     const [answerResults, setAnswerResults] = (0, react_1.useState)(null);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -24,9 +13,10 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
-        fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId, parameters })
-            .then((fetchedAnswerResults) => {
-            setAnswerResults(fetchedAnswerResults);
+        cioClient.agent.pia
+            .getAnswerResults(itemId, question, Object.assign({ threadId, variationId }, parameters))
+            .then((response) => {
+            setAnswerResults(response);
             setError(null);
         })
             .catch((err) => {

package/lib/cjs/hooks/useCioPia.js

@@ -1,38 +1,68 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = require("react");
-const MockConstructorIOClient_1 = tslib_1.__importDefault(require("./mocks/MockConstructorIOClient"));
 const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults"));
+const usePiaClient_1 = tslib_1.__importDefault(require("./usePiaClient"));
 const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
-const version_1 = tslib_1.__importDefault(require("../version"));
+// TODO: remove SUPPORTED_DEPRECATED_PARAMS and mapDeprecatedParameters once the
+// deprecated `parameters` prop is removed from CioPiaProps.
+const SUPPORTED_DEPRECATED_PARAMS = {
+    guard: { camelKey: 'guard', isObject: false },
+    num_results: { camelKey: 'numResults', isObject: false },
+    numResults: { camelKey: 'numResults', isObject: false },
+    pre_filter_expression: { camelKey: 'preFilterExpression', isObject: true },
+    preFilterExpression: { camelKey: 'preFilterExpression', isObject: true },
+    fmt_options: { camelKey: 'fmtOptions', isObject: true },
+    fmtOptions: { camelKey: 'fmtOptions', isObject: true },
+};
+function mapDeprecatedParameters(params) {
+    if (!params)
+        return undefined;
+    const mapped = {};
+    let hasEntries = false;
+    for (const [key, value] of Object.entries(params)) {
+        const config = SUPPORTED_DEPRECATED_PARAMS[key];
+        if (!config)
+            continue;
+        hasEntries = true;
+        if (config.isObject && typeof value === 'string') {
+            try {
+                mapped[config.camelKey] = JSON.parse(value);
+            }
+            catch (_a) {
+                mapped[config.camelKey] = value;
+            }
+        }
+        else {
+            mapped[config.camelKey] = value;
+        }
+    }
+    return hasEntries ? mapped : undefined;
+}
 function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, parameters, formatImageUrl, } = props;
-    const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
-    const threadId = providedThreadId || generatedThreadId;
-    const client = (0, react_1.useMemo)(() => {
-        if (providedClient)
-            return providedClient;
-        return new MockConstructorIOClient_1.default({
-            apiKey,
-            sendTrackingEvents: true,
-            version: `cio-ui-pia-${version_1.default}`,
-        });
-    }, [apiKey, providedClient]);
+    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, answerParameters, parameters, formatImageUrl, } = props;
+    const { cioClient: client, threadId } = (0, usePiaClient_1.default)({
+        apiKey,
+        threadId: providedThreadId,
+        cioClient: providedClient,
+    });
+    const mappedDeprecated = mapDeprecatedParameters(parameters);
+    const mergedSuggestedParams = mappedDeprecated || suggestedQuestionsParameters
+        ? Object.assign(Object.assign({}, mappedDeprecated), suggestedQuestionsParameters) : undefined;
+    const mergedAnswerParams = mappedDeprecated || answerParameters ? Object.assign(Object.assign({}, mappedDeprecated), answerParameters) : undefined;
     const suggestedQuestions = (0, useSuggestedQuestions_1.default)({
         itemId,
         variationId,
         threadId,
         cioClient: client,
-        parameters: suggestedQuestionsParameters,
-        requestParameters: parameters,
+        parameters: mergedSuggestedParams,
     });
     const answers = (0, useAnswerResults_1.default)({
         itemId,
         variationId,
         threadId,
         cioClient: client,
-        parameters,
+        parameters: mergedAnswerParams,
         formatImageUrl,
     });
     return {

package/lib/cjs/hooks/usePiaClient.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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, }) {
+    const [generatedThreadId] = (0, react_1.useState)(() => crypto.randomUUID());
+    const threadId = providedThreadId || generatedThreadId;
+    const client = (0, react_1.useMemo)(() => {
+        if (providedClient)
+            return providedClient;
+        return new constructorio_client_javascript_1.default({
+            apiKey,
+            sendTrackingEvents: true,
+            version: `cio-ui-pia-${version_1.default}`,
+        });
+    }, [apiKey, providedClient]);
+    return { cioClient: client, threadId };
+}
+exports.default = usePiaClient;

package/lib/cjs/hooks/useRecsPod.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const errors_1 = require("../errors");
+const translate_1 = require("../utils/translate");
+const constants_1 = require("../constants");
+const DEFAULT_STRATEGY = 'complementary_items';
+/**
+ * Owns everything a recommendations pod shows: one request on mount, one on every refinement,
+ * and the title that belongs to whichever of those is happening right now.
+ *
+ * The previous items are deliberately kept while a new request is in flight, so a refinement
+ * swaps the products without collapsing the row they sit in. The title is the one thing that does
+ * change, so the shopper can see the pod reacting to what they asked for.
+ */
+function useRecsPod({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, translations, }) {
+    var _a;
+    const [result, setResult] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [hasUnsupportedInput, setHasUnsupportedInput] = (0, react_1.useState)(false);
+    const [lastShopperInput, setLastShopperInput] = (0, react_1.useState)('');
+    // Counts requests so a slow response cannot overwrite a newer one. There is no
+    // AbortController in this library, so the older request still completes; its result is
+    // simply dropped.
+    const requestIdRef = (0, react_1.useRef)(0);
+    // Mirrored into a ref so it never becomes a fetch dependency. It is commonly written inline by
+    // the caller, which would give it a new identity on every render and refetch forever.
+    const formatImageUrlRef = (0, react_1.useRef)(formatImageUrl);
+    (0, react_1.useEffect)(() => {
+        formatImageUrlRef.current = formatImageUrl;
+    }, [formatImageUrl]);
+    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) {
+                console.info('[CioPia] getRecs is not available on the client SDK yet.');
+            }
+            setIsLoading(false);
+            return;
+        }
+        requestIdRef.current += 1;
+        const requestId = requestIdRef.current;
+        const isCurrent = () => requestId === requestIdRef.current;
+        setIsLoading(true);
+        setError(null);
+        setHasUnsupportedInput(false);
+        getRecs
+            .call(cioClient.agent, {
+            itemId,
+            variationId,
+            threadId,
+            strategy,
+            shopperInput,
+            numResults,
+            formatImageUrl: formatImageUrlRef.current,
+        })
+            .then((fetchedResult) => {
+            if (!isCurrent())
+                return;
+            setResult(fetchedResult);
+            setLastShopperInput(shopperInput || '');
+        })
+            .catch((err) => {
+            if (!isCurrent())
+                return;
+            const failure = err instanceof Error ? err : new Error('Error fetching recommendations');
+            const status = failure instanceof errors_1.AgentRequestError ? failure.status : undefined;
+            if (status === 400) {
+                // A 400 means the request we built was malformed, which is our bug, not the
+                // shopper's. Make it loud so it is caught in development.
+                console.error('Constructor PIA: the recommendations request was rejected.', failure);
+            }
+            // A rejected input changes nothing but the input, so the response on screen stays.
+            // Only text the shopper wrote can be rejected this way: an option is a label the API
+            // suggested, so blaming their input for it would point at the wrong thing entirely.
+            if (status === 422 && source === 'input') {
+                setHasUnsupportedInput(true);
+                return;
+            }
+            setError(failure);
+        })
+            .finally(() => {
+            if (!isCurrent())
+                return;
+            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]);
+    (0, react_1.useEffect)(() => {
+        fetchResult();
+    }, [fetchResult]);
+    const refine = (0, react_1.useCallback)((text, source) => {
+        const refinementText = text.trim();
+        if (!refinementText)
+            return;
+        fetchResult(refinementText, source);
+    }, [fetchResult]);
+    // The title belonging to the last response we kept. `defaultTitle` is the caller's last resort
+    // for a response that carried items but no title of its own.
+    const settledTitle = (result === null || result === void 0 ? void 0 : result.title) || defaultTitle || '';
+    let title = settledTitle;
+    if (isLoading) {
+        // The loading copy wins whether or not a title is held, so a refinement announces itself
+        // rather than leaving the previous personalization above products that no longer match it.
+        title = (0, translate_1.translate)(constants_1.RECS_LOADING_TITLE, translations);
+    }
+    else if (!hasUnsupportedInput && (error || (result === null || result === void 0 ? void 0 : result.status) === 'partial')) {
+        // Either the request failed or it came back degraded, so the personalized title cannot be
+        // trusted. Any products it did carry are still worth showing under a generic title.
+        title = (0, translate_1.translate)(constants_1.RECS_FALLBACK_TITLE, translations);
+    }
+    return {
+        title,
+        // Normalized so every caller can treat "nothing to render" as a single case. Our own adapter
+        // never returns an empty array, but `cioClient` is a public prop and a consumer-supplied client
+        // can. Note `[]` is truthy, so `|| null` would not catch it.
+        items: ((_a = result === null || result === void 0 ? void 0 : result.items) === null || _a === void 0 ? void 0 : _a.length) ? result.items : null,
+        refinement: (result === null || result === void 0 ? void 0 : result.refinement) || null,
+        isLoading,
+        error,
+        inputError: hasUnsupportedInput ? (0, translate_1.translate)(constants_1.RECS_UNSUPPORTED_REQUEST, translations) : null,
+        lastShopperInput,
+        refine,
+    };
+}
+exports.default = useRecsPod;

package/lib/cjs/hooks/useSuggestedQuestions.js

@@ -1,38 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const react_1 = require("react");
-const fetchSuggestedQuestions = ({ client, itemId, variationId, threadId, parameters, requestParameters, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    const response = yield client.agent.getSuggestedQuestions({
-        itemId,
-        variationId,
-        threadId,
-        parameters,
-        requestParameters,
-    });
-    return response.questions;
-});
-function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, requestParameters, }) {
+function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, }) {
     const [questions, setQuestions] = (0, react_1.useState)([]);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
-    // Serialize to a primitive so an object-literal prop doesn't retrigger the auto-fetch effect each render.
-    const requestParametersKey = JSON.stringify(requestParameters);
+    const serializedParameters = (0, react_1.useMemo)(() => JSON.stringify(parameters), [parameters]);
     const fetchResult = (0, react_1.useCallback)(() => {
         if (!cioClient)
             return;
         setIsLoading(true);
         setError(null);
-        fetchSuggestedQuestions({
-            client: cioClient,
-            itemId,
-            variationId,
-            threadId,
-            parameters,
-            requestParameters,
-        })
-            .then((fetchedQuestions) => {
-            setQuestions(fetchedQuestions);
+        cioClient.agent.pia
+            .getSuggestedQuestions(itemId, Object.assign({ threadId,
+            variationId }, parameters))
+            .then((response) => {
+            setQuestions(response.questions);
             setError(null);
         })
             .catch((err) => {
@@ -41,8 +24,9 @@ function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, param
             .finally(() => {
             setIsLoading(false);
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- primitive deps prevent refetch loop
-    }, [cioClient, itemId, variationId, threadId, parameters === null || parameters === void 0 ? void 0 : parameters.numResults, requestParametersKey]);
+        // parameters is serialized via serializedParameters to prevent refetch on identity changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cioClient, itemId, variationId, threadId, serializedParameters]);
     (0, react_1.useEffect)(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/cjs/hooks/useViewportTracking.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const FLUSH_INTERVAL_MS = 5 * 60 * 1000;
-function useViewportTracking({ tracking, questions, }) {
+const DEFAULT_VIEW_THRESHOLD = 0.5;
+function useViewportTracking({ tracking, questions, viewThreshold = DEFAULT_VIEW_THRESHOLD, }) {
     const nodeRef = (0, react_1.useRef)(null);
     const observerRef = (0, react_1.useRef)(null);
     const intervalRef = (0, react_1.useRef)(null);
@@ -50,7 +51,7 @@ function useViewportTracking({ tracking, questions, }) {
                 entryTimeRef.current = null;
                 trackingRef.current.trackOutOfView();
             }
-        }, { threshold: 0.5 });
+        }, { threshold: viewThreshold });
         observer.observe(element);
         observerRef.current = observer;
         intervalRef.current = setInterval(flush, FLUSH_INTERVAL_MS);

package/lib/cjs/styles.css

@@ -9,6 +9,7 @@
 @import './components/CioPia/CioPiaStyles.css';
 @import './components/ConversationHistory/ConversationHistoryStyles.css';
 @import './components/PiaConversation/PiaConversationStyles.css';
+@import './components/CioPiaRecs/CioPiaRecsStyles.css';
 
 .cio-pia-container {
   font-family: 'Inter', sans-serif;

package/lib/cjs/types.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeedbackType = void 0;
-const tslib_1 = require("tslib");
 var FeedbackType;
 (function (FeedbackType) {
     FeedbackType["UP"] = "up";
     FeedbackType["DOWN"] = "down";
 })(FeedbackType = exports.FeedbackType || (exports.FeedbackType = {}));
-tslib_1.__exportStar(require("./hooks/mocks/types"), exports);

package/lib/cjs/utils/classNames.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+/**
+ * Joins class names, dropping the falsy ones, so a conditional class can be written inline.
+ *
+ * Deliberately not `clsx` or `classnames`: neither is a dependency of this package, and the copy of
+ * `clsx` in the tree belongs to `@constructor-io/constructorio-ui-components`, which is a peer
+ * dependency - importing it here would work locally and break in a consumer that hoists
+ * differently. Worth revisiting if this ever needs to accept objects or nested arrays.
+ */
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+exports.cx = cx;

package/lib/cjs/utils/recs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRefinementQuestion = void 0;
+const translate_1 = require("./translate");
+const constants_1 = require("../constants");
+/**
+ * The line that introduces the refinement options. Prefers the prompt the API sent, so our
+ * copy and theirs cannot drift.
+ */
+function resolveRefinementQuestion(refinement, translations) {
+    return (refinement === null || refinement === void 0 ? void 0 : refinement.question) || (0, translate_1.translate)(constants_1.RECS_REFINEMENT_LABEL, translations);
+}
+exports.resolveRefinementQuestion = resolveRefinementQuestion;

package/lib/cjs/utils/translate.js

@@ -11,6 +11,11 @@ const defaultTranslations = {
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
     'Add to Cart': 'Add to Cart',
+    [constants_1.RECS_LOADING_TITLE]: constants_1.RECS_LOADING_TITLE,
+    [constants_1.RECS_FALLBACK_TITLE]: constants_1.RECS_FALLBACK_TITLE,
+    [constants_1.RECS_UNSUPPORTED_REQUEST]: constants_1.RECS_UNSUPPORTED_REQUEST,
+    [constants_1.RECS_REFINEMENT_LABEL]: constants_1.RECS_REFINEMENT_LABEL,
+    [constants_1.RECS_INPUT_PLACEHOLDER]: constants_1.RECS_INPUT_PLACEHOLDER,
 };
 /**
  * Translates a word using the provided translations object.

package/lib/cjs/version.js

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