@constructor-io/constructorio-ui-pia 2.10.1 → 2.10.3

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

@@ -19,7 +19,7 @@ const PiaConversation_1 = tslib_1.__importDefault(require("../PiaConversation/Pi
 // eslint-disable-next-line complexity
 function CioPia(props) {
     var _a;
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, parameters, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -30,6 +30,7 @@ function CioPia(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        parameters,
         formatImageUrl: formatters === null || formatters === void 0 ? void 0 : formatters.formatImageUrl,
     });
     const tracking = (0, useTracking_1.default)({
@@ -92,7 +93,7 @@ function CioPia(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 }),
+            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 }),
             isLoading && react_1.default.createElement(LoadingSkeleton_1.default, { componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.loading }),
             !isLoading && error && react_1.default.createElement(ErrorBlock_1.default, { message: (error === null || error === void 0 ? void 0 : error.message) || 'Unexpected error' }),
             !isLoading && !error && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -2,41 +2,45 @@
 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 translate_1 = require("../../utils/translate");
-function SendIcon() {
-    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-        react_1.default.createElement("g", { id: '.icon-send' },
-            react_1.default.createElement("path", { id: 'Vector', d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' }))));
-}
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, }) {
+const icons_1 = require("../icons");
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, }) {
     const [value, setValue] = (0, react_1.useState)(providedValue || '');
     (0, react_1.useEffect)(() => {
         if (providedValue) {
             setValue(providedValue);
         }
     }, [providedValue]);
-    const handleSubmit = () => {
-        if (value.trim()) {
-            onSubmit(value.trim());
-            if (value.trim() !== providedValue) {
+    const handleSubmit = (0, react_1.useCallback)((submittedValue) => {
+        if (submittedValue.trim()) {
+            onSubmit(submittedValue.trim());
+            if (submittedValue.trim() !== providedValue) {
                 setValue('');
             }
         }
-    };
+    }, [onSubmit, providedValue]);
     const handleSubmitOnEnter = (e) => {
         if (e.key === 'Enter') {
             e.preventDefault();
-            handleSubmit();
+            handleSubmit(value);
         }
     };
     // 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'));
-    return (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, className: 'cio-pia-send-button', disabled: disabled },
-            (0, translate_1.translate)('Send', translations),
-            react_1.default.createElement(SendIcon, null))));
+    return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { props: {
+            disabled,
+            placeholder: resolvedPlaceholder,
+            onSubmit: handleSubmit,
+            onFocus,
+            translations,
+        }, 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)))));
 }
 exports.default = Input;

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

@@ -15,6 +15,6 @@ function PiaConversation({ conversationHistory, isLoading, error, currentItems,
         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 }))));
+            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 }))));
 }
 exports.default = PiaConversation;

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

@@ -67,7 +67,7 @@ function PiaModal({ initialQuestions, handleSubmitQuestion, handleQuestionClick,
         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("div", { className: 'cio-pia-conversation-footer' },
             initialQuestions.length > 0 && (react_1.default.createElement(SuggestedQuestionsContainer_1.default, { questions: initialQuestions, onQuestionClick: handleQuestionClicked, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions })),
-            react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations })),
+            react_1.default.createElement(Input_1.default, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input })),
         react_1.default.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
             react_1.default.createElement("div", { className: 'cio-pia-modal-content' },
                 react_1.default.createElement("div", { className: 'cio-pia-modal-header' },

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

@@ -2,15 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-function QuestionSvg() {
-    return (react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' },
-        react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            react_1.default.createElement("g", { id: 'help' },
-                react_1.default.createElement("path", { id: 'Vector', d: 'M8.00004 1.33331C4.32004 1.33331 1.33337 4.31998 1.33337 7.99998C1.33337 11.68 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00004 1.33331ZM8.66671 12.6666H7.33337V11.3333H8.66671V12.6666ZM10.0467 7.49998L9.44671 8.11331C8.96671 8.59998 8.66671 8.99998 8.66671 9.99998H7.33337V9.66665C7.33337 8.93331 7.63337 8.26665 8.11337 7.77998L8.94004 6.93998C9.18671 6.69998 9.33337 6.36665 9.33337 5.99998C9.33337 5.26665 8.73337 4.66665 8.00004 4.66665C7.26671 4.66665 6.66671 5.26665 6.66671 5.99998H5.33337C5.33337 4.52665 6.52671 3.33331 8.00004 3.33331C9.47337 3.33331 10.6667 4.52665 10.6667 5.99998C10.6667 6.58665 10.4267 7.11998 10.0467 7.49998Z', fill: '#0F1324', fillOpacity: '0.6' })))));
-}
+const icons_1 = require("../icons");
 function SuggestedQuestion({ question, onClick }) {
     return (react_1.default.createElement("button", { type: 'button', className: 'cio-pia-suggested-question', onClick: onClick },
-        react_1.default.createElement(QuestionSvg, null),
+        react_1.default.createElement("div", { className: 'cio-pia-suggested-question-icon' },
+            react_1.default.createElement(icons_1.QuestionIcon, null)),
         question));
 }
 exports.default = SuggestedQuestion;

package/lib/cjs/components/icons/QuestionIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function QuestionIcon() {
+    return (react_1.default.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("path", { d: 'M8.00004 1.33331C4.32004 1.33331 1.33337 4.31998 1.33337 7.99998C1.33337 11.68 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00004 1.33331ZM8.66671 12.6666H7.33337V11.3333H8.66671V12.6666ZM10.0467 7.49998L9.44671 8.11331C8.96671 8.59998 8.66671 8.99998 8.66671 9.99998H7.33337V9.66665C7.33337 8.93331 7.63337 8.26665 8.11337 7.77998L8.94004 6.93998C9.18671 6.69998 9.33337 6.36665 9.33337 5.99998C9.33337 5.26665 8.73337 4.66665 8.00004 4.66665C7.26671 4.66665 6.66671 5.26665 6.66671 5.99998H5.33337C5.33337 4.52665 6.52671 3.33331 8.00004 3.33331C9.47337 3.33331 10.6667 4.52665 10.6667 5.99998C10.6667 6.58665 10.4267 7.11998 10.0467 7.49998Z', fill: '#0F1324', fillOpacity: '0.6' })));
+}
+exports.default = QuestionIcon;

package/lib/cjs/components/icons/SendIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function SendIcon() {
+    return (react_1.default.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("path", { d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' })));
+}
+exports.default = SendIcon;

package/lib/cjs/components/icons/SparklesIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function SparklesIcon() {
+    return (react_1.default.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("path", { d: 'M12.6667 6.0013L13.5001 4.16797L15.3334 3.33464L13.5001 2.5013L12.6667 0.667969L11.8334 2.5013L10.0001 3.33464L11.8334 4.16797L12.6667 6.0013Z', fill: '#1C1917' }),
+        react_1.default.createElement("path", { d: 'M12.6667 10.0013L11.8334 11.8346L10.0001 12.668L11.8334 13.5013L12.6667 15.3346L13.5001 13.5013L15.3334 12.668L13.5001 11.8346L12.6667 10.0013Z', fill: '#1C1917' }),
+        react_1.default.createElement("path", { d: 'M7.66675 6.33464L6.00008 2.66797L4.33341 6.33464L0.666748 8.0013L4.33341 9.66797L6.00008 13.3346L7.66675 9.66797L11.3334 8.0013L7.66675 6.33464ZM6.66008 8.6613L6.00008 10.1146L5.34008 8.6613L3.88675 8.0013L5.34008 7.3413L6.00008 5.88797L6.66008 7.3413L8.11341 8.0013L6.66008 8.6613Z', fill: '#1C1917' })));
+}
+exports.default = SparklesIcon;

package/lib/cjs/components/icons/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparklesIcon = exports.SendIcon = exports.QuestionIcon = void 0;
+var QuestionIcon_1 = require("./QuestionIcon");
+Object.defineProperty(exports, "QuestionIcon", { enumerable: true, get: function () { return __importDefault(QuestionIcon_1).default; } });
+var SendIcon_1 = require("./SendIcon");
+Object.defineProperty(exports, "SendIcon", { enumerable: true, get: function () { return __importDefault(SendIcon_1).default; } });
+var SparklesIcon_1 = require("./SparklesIcon");
+Object.defineProperty(exports, "SparklesIcon", { enumerable: true, get: function () { return __importDefault(SparklesIcon_1).default; } });

package/lib/cjs/errors.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgentRequestError = void 0;
+/**
+ * Thrown when a Constructor agent request returns a non-2xx response.
+ *
+ * `status` is the HTTP status code, so callers can act on the kind of failure instead of
+ * parsing the message. A 422 means the request itself was rejected as unsuitable, a 429
+ * means rate limiting, and anything 500 or above means the service failed and a retry may
+ * succeed. This is the error that arrives in `CioPiaRenderProps.error` when a request fails.
+ */
+class AgentRequestError extends Error {
+    constructor(status) {
+        super(`Request failed with status ${status}`);
+        this.name = 'AgentRequestError';
+        this.status = status;
+    }
+}
+exports.AgentRequestError = AgentRequestError;

package/lib/cjs/hooks/mocks/agent.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const errors_1 = require("../../errors");
 // Create URL for PIA API
 function createAgentUrl({ itemId, threadId, variationId, question, isStreaming = false, options, parameters = {}, }) {
     const { apiKey, agentServiceUrl, clientId, sessionId, userId, segments, version } = options;
@@ -56,7 +57,7 @@ class MockAgent {
     constructor(options) {
         this.options = options;
     }
-    getSuggestedQuestions({ itemId, variationId, threadId, parameters = {}, }) {
+    getSuggestedQuestions({ itemId, variationId, threadId, parameters = {}, requestParameters = {}, }) {
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
             if (!itemId)
                 throw new Error('Item ID is required');
@@ -67,18 +68,20 @@ class MockAgent {
                 variationId,
                 threadId,
                 options: this.options,
-                parameters: mapSuggestedQuestionsParams(parameters),
+                parameters: Object.assign(Object.assign({}, requestParameters), mapSuggestedQuestionsParams(parameters)),
             });
             try {
                 const response = yield fetch(url);
                 if (!response.ok)
-                    throw new Error(`Request failed with status ${response.status}`);
+                    throw new errors_1.AgentRequestError(response.status);
                 const data = yield response.json();
                 return data;
             }
             catch (error) {
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                throw new Error(errorMessage);
+                // Rethrow untouched so the status code and the original stack survive.
+                if (error instanceof Error)
+                    throw error;
+                throw new Error(String(error));
             }
         });
     }
@@ -101,13 +104,15 @@ class MockAgent {
             try {
                 const response = yield fetch(url);
                 if (!response.ok)
-                    throw new Error(`Request failed with status ${response.status}`);
+                    throw new errors_1.AgentRequestError(response.status);
                 const data = yield response.json();
                 return data;
             }
             catch (error) {
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                throw new Error(errorMessage);
+                // Rethrow untouched so the status code and the original stack survive.
+                if (error instanceof Error)
+                    throw error;
+                throw new Error(String(error));
             }
         });
     }

package/lib/cjs/hooks/useAnswerResults.js

@@ -3,41 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const transformers_1 = require("../utils/transformers");
-const extractAndTransformItems = (data, formatImageUrl) => {
-    var _a, _b;
-    if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.item_results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results)) {
-        return null;
-    }
-    const { results } = data.item_results.response;
-    if (!Array.isArray(results) || results.length === 0) {
-        return null;
-    }
-    const transformedItems = results
-        .map((item) => (0, transformers_1.transformResultItem)(item, formatImageUrl))
-        .filter((item) => item !== null);
-    return transformedItems.length > 0 ? transformedItems : null;
-};
-const fetchAnswerResults = ({ client, itemId, question, variationId, threadId, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+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, formatImageUrl, }) {
+function useAnswerResults({ itemId, variationId, threadId, cioClient, parameters, formatImageUrl, }) {
     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 items = (0, react_1.useMemo)(() => extractAndTransformItems(answerResults, formatImageUrl), [answerResults, formatImageUrl]);
+    const items = (0, react_1.useMemo)(() => (0, transformers_1.extractAndTransformItems)(answerResults, formatImageUrl), [answerResults, formatImageUrl]);
     const fetchResult = (0, react_1.useCallback)((question) => {
         if (!cioClient)
             return;
         setIsLoading(true);
         setError(null);
         setAnswerResults(null);
-        fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId })
+        fetchAnswerResults({ client: cioClient, itemId, question, variationId, threadId, parameters })
             .then((fetchedAnswerResults) => {
             setAnswerResults(fetchedAnswerResults);
             setError(null);
@@ -49,7 +36,7 @@ function useAnswerResults({ itemId, variationId, threadId, cioClient, formatImag
             .finally(() => {
             setIsLoading(false);
         });
-    }, [cioClient, itemId, variationId, threadId]);
+    }, [cioClient, itemId, variationId, threadId, parameters]);
     return {
         data: answerResults,
         items,

package/lib/cjs/hooks/useCioPia.js

@@ -7,7 +7,7 @@ const useAnswerResults_1 = tslib_1.__importDefault(require("./useAnswerResults")
 const useSuggestedQuestions_1 = tslib_1.__importDefault(require("./useSuggestedQuestions"));
 const version_1 = tslib_1.__importDefault(require("../version"));
 function useCioPia(props) {
-    const { apiKey, itemId, variationId, threadId: providedThreadId, cioClient: providedClient, suggestedQuestionsParameters, formatImageUrl, } = 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)(() => {
@@ -25,12 +25,14 @@ function useCioPia(props) {
         threadId,
         cioClient: client,
         parameters: suggestedQuestionsParameters,
+        requestParameters: parameters,
     });
     const answers = (0, useAnswerResults_1.default)({
         itemId,
         variationId,
         threadId,
         cioClient: client,
+        parameters,
         formatImageUrl,
     });
     return {

package/lib/cjs/hooks/useSuggestedQuestions.js

@@ -2,19 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = require("react");
-const fetchSuggestedQuestions = ({ client, itemId, variationId, threadId, parameters, }) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+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, }) {
+function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, parameters, requestParameters, }) {
     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 fetchResult = (0, react_1.useCallback)(() => {
         if (!cioClient)
             return;
@@ -26,6 +29,7 @@ function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, param
             variationId,
             threadId,
             parameters,
+            requestParameters,
         })
             .then((fetchedQuestions) => {
             setQuestions(fetchedQuestions);
@@ -37,8 +41,8 @@ function useSuggestedQuestions({ itemId, variationId, threadId, cioClient, param
             .finally(() => {
             setIsLoading(false);
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- primitive dep prevents refetch on object reference change
-    }, [cioClient, itemId, variationId, threadId, parameters === null || parameters === void 0 ? void 0 : parameters.numResults]);
+        // 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]);
     (0, react_1.useEffect)(() => {
         fetchResult();
     }, [fetchResult]);

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderMarkdown = exports.sanitizeHtml = exports.CioPia = void 0;
+exports.AgentRequestError = 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; } });
+// Errors
+var errors_1 = require("./errors");
+Object.defineProperty(exports, "AgentRequestError", { enumerable: true, get: function () { return errors_1.AgentRequestError; } });
 // Default
 tslib_1.__exportStar(require("./types"), exports);
 exports.default = CioPia_1.default;

package/lib/cjs/utils/transformers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformResultItem = void 0;
+exports.extractAndTransformItems = exports.transformResultItem = void 0;
 const tslib_1 = require("tslib");
 /**
  * Converts a raw ApiItem from the Get Answers API response into an Item object
@@ -35,3 +35,24 @@ function transformResultItem(resultItem, formatImageUrl) {
         badge, data: Object.assign({}, otherMetadataFields) }, otherFields);
 }
 exports.transformResultItem = transformResultItem;
+/**
+ * Pulls the product results out of an answers response and converts them to Items.
+ *
+ * Returns `null` rather than an empty array whenever there is nothing to render, so callers
+ * can treat "no products" as a single case.
+ */
+function extractAndTransformItems(data, formatImageUrl) {
+    var _a, _b;
+    if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.item_results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results)) {
+        return null;
+    }
+    const { results } = data.item_results.response;
+    if (!Array.isArray(results) || results.length === 0) {
+        return null;
+    }
+    const transformedItems = results
+        .map((item) => transformResultItem(item, formatImageUrl))
+        .filter((item) => item !== null);
+    return transformedItems.length > 0 ? transformedItems : null;
+}
+exports.extractAndTransformItems = extractAndTransformItems;

package/lib/cjs/version.js

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

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

@@ -15,7 +15,7 @@ import PiaModal from '../PiaConversation/PiaModal';
 import PiaConversation from '../PiaConversation/PiaConversation';
 // eslint-disable-next-line complexity
 export default function CioPia(props) {
-    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, } = props;
+    const { apiKey, itemId, itemName, threadId, variationId, cioClient, displayConfigs, componentOverrides, callbacks, formatters, productCardProps, children, translations, suggestedQuestionsParameters, parameters, } = props;
     const { learnMoreUrl, showFeedback, mode = 'default', type = 'inline', showPreviousItems, disclaimerPosition = 'bottom', } = displayConfigs || {};
     const isConversation = mode === 'conversation' || type === 'modal';
     const { priceCurrency } = productCardProps || {};
@@ -26,6 +26,7 @@ export default function CioPia(props) {
         variationId,
         cioClient,
         suggestedQuestionsParameters,
+        parameters,
         formatImageUrl: formatters?.formatImageUrl,
     });
     const tracking = useTracking({
@@ -88,7 +89,7 @@ export default function CioPia(props) {
     return (React.createElement("div", { ref: containerRef, className: 'cio-pia-container', "data-testid": 'cio-pia-container' },
         React.createElement(RenderPropsWrapper, { props: renderProps, override: children || componentOverrides?.reactNode },
             React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations }),
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: handleInputFocus, value: currentQuestion, translations: translations, componentOverride: componentOverrides?.input }),
             isLoading && React.createElement(LoadingSkeleton, { componentOverride: componentOverrides?.loading }),
             !isLoading && error && React.createElement(ErrorBlock, { message: error?.message || 'Unexpected error' }),
             !isLoading && !error && (React.createElement(React.Fragment, null,

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

@@ -1,39 +1,43 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { RenderPropsWrapper, } from '@constructor-io/constructorio-ui-components';
 import { translate } from '../../utils/translate';
-function SendIcon() {
-    return (React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-        React.createElement("g", { id: '.icon-send' },
-            React.createElement("path", { id: 'Vector', d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' }))));
-}
-function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, }) {
+import { SendIcon } from '../icons';
+function Input({ value: providedValue, placeholder, disabled = false, onSubmit, onFocus, translations, componentOverride, }) {
     const [value, setValue] = useState(providedValue || '');
     useEffect(() => {
         if (providedValue) {
             setValue(providedValue);
         }
     }, [providedValue]);
-    const handleSubmit = () => {
-        if (value.trim()) {
-            onSubmit(value.trim());
-            if (value.trim() !== providedValue) {
+    const handleSubmit = useCallback((submittedValue) => {
+        if (submittedValue.trim()) {
+            onSubmit(submittedValue.trim());
+            if (submittedValue.trim() !== providedValue) {
                 setValue('');
             }
         }
-    };
+    }, [onSubmit, providedValue]);
     const handleSubmitOnEnter = (e) => {
         if (e.key === 'Enter') {
             e.preventDefault();
-            handleSubmit();
+            handleSubmit(value);
         }
     };
     // Priority: translations > placeholder prop > default
     const resolvedPlaceholder = translations?.['Ask anything'] !== undefined
         ? translate('Ask anything', translations)
         : (placeholder ?? translate('Ask anything'));
-    return (React.createElement("div", { className: 'cio-pia-input-container' },
-        React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
-        React.createElement("button", { type: 'button', onClick: handleSubmit, className: 'cio-pia-send-button', disabled: disabled },
-            translate('Send', translations),
-            React.createElement(SendIcon, null))));
+    return (React.createElement(RenderPropsWrapper, { props: {
+            disabled,
+            placeholder: resolvedPlaceholder,
+            onSubmit: handleSubmit,
+            onFocus,
+            translations,
+        }, override: componentOverride?.reactNode },
+        React.createElement("div", { className: 'cio-pia-input-container' },
+            React.createElement("input", { type: 'text', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleSubmitOnEnter, onFocus: onFocus, placeholder: resolvedPlaceholder, disabled: disabled, className: 'cio-pia-input' }),
+            React.createElement("button", { type: 'button', onClick: () => handleSubmit(value), className: 'cio-pia-send-button', disabled: disabled },
+                translate('Send', translations),
+                React.createElement(SendIcon, null)))));
 }
 export default Input;

package/lib/mjs/components/PiaConversation/PiaConversation.js

@@ -12,5 +12,5 @@ export default function PiaConversation({ conversationHistory, isLoading, error,
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             isLoading && !error && React.createElement(SuggestedQuestionsSkeleton, null),
             !isLoading && !error && (React.createElement(SuggestedQuestionsContainer, { questions: displayedQuestions, onQuestionClick: handleQuestionClick, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations }))));
+            React.createElement(Input, { onSubmit: handleSubmitQuestion, onFocus: onInputFocus, disabled: isLoading, translations: translations, componentOverride: componentOverrides?.input }))));
 }

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

@@ -64,7 +64,7 @@ export default function PiaModal({ initialQuestions, handleSubmitQuestion, handl
         React.createElement("p", { className: 'cio-pia-title', "data-testid": 'cio-pia-title' }, translate('Any questions about this product?', translations)),
         React.createElement("div", { className: 'cio-pia-conversation-footer' },
             initialQuestions.length > 0 && (React.createElement(SuggestedQuestionsContainer, { questions: initialQuestions, onQuestionClick: handleQuestionClicked, componentOverride: componentOverrides?.suggestedQuestions })),
-            React.createElement(Input, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations })),
+            React.createElement(Input, { onSubmit: handleQuestion, onFocus: onInputFocus, disabled: isLoading || isOpen, translations: translations, componentOverride: componentOverrides?.input })),
         React.createElement("dialog", { ref: dialogRef, className: 'cio-pia-modal', "aria-labelledby": 'cio-pia-modal-title' },
             React.createElement("div", { className: 'cio-pia-modal-content' },
                 React.createElement("div", { className: 'cio-pia-modal-header' },

package/lib/mjs/components/SuggestedQuestion/SuggestedQuestion.js

@@ -1,13 +1,9 @@
 import React from 'react';
-function QuestionSvg() {
-    return (React.createElement("div", { className: 'cio-pia-suggested-question-icon' },
-        React.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("g", { id: 'help' },
-                React.createElement("path", { id: 'Vector', d: 'M8.00004 1.33331C4.32004 1.33331 1.33337 4.31998 1.33337 7.99998C1.33337 11.68 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00004 1.33331ZM8.66671 12.6666H7.33337V11.3333H8.66671V12.6666ZM10.0467 7.49998L9.44671 8.11331C8.96671 8.59998 8.66671 8.99998 8.66671 9.99998H7.33337V9.66665C7.33337 8.93331 7.63337 8.26665 8.11337 7.77998L8.94004 6.93998C9.18671 6.69998 9.33337 6.36665 9.33337 5.99998C9.33337 5.26665 8.73337 4.66665 8.00004 4.66665C7.26671 4.66665 6.66671 5.26665 6.66671 5.99998H5.33337C5.33337 4.52665 6.52671 3.33331 8.00004 3.33331C9.47337 3.33331 10.6667 4.52665 10.6667 5.99998C10.6667 6.58665 10.4267 7.11998 10.0467 7.49998Z', fill: '#0F1324', fillOpacity: '0.6' })))));
-}
+import { QuestionIcon } from '../icons';
 function SuggestedQuestion({ question, onClick }) {
     return (React.createElement("button", { type: 'button', className: 'cio-pia-suggested-question', onClick: onClick },
-        React.createElement(QuestionSvg, null),
+        React.createElement("div", { className: 'cio-pia-suggested-question-icon' },
+            React.createElement(QuestionIcon, null)),
         question));
 }
 export default SuggestedQuestion;

package/lib/mjs/components/icons/QuestionIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function QuestionIcon() {
+    return (React.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M8.00004 1.33331C4.32004 1.33331 1.33337 4.31998 1.33337 7.99998C1.33337 11.68 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.68 14.6667 7.99998C14.6667 4.31998 11.68 1.33331 8.00004 1.33331ZM8.66671 12.6666H7.33337V11.3333H8.66671V12.6666ZM10.0467 7.49998L9.44671 8.11331C8.96671 8.59998 8.66671 8.99998 8.66671 9.99998H7.33337V9.66665C7.33337 8.93331 7.63337 8.26665 8.11337 7.77998L8.94004 6.93998C9.18671 6.69998 9.33337 6.36665 9.33337 5.99998C9.33337 5.26665 8.73337 4.66665 8.00004 4.66665C7.26671 4.66665 6.66671 5.26665 6.66671 5.99998H5.33337C5.33337 4.52665 6.52671 3.33331 8.00004 3.33331C9.47337 3.33331 10.6667 4.52665 10.6667 5.99998C10.6667 6.58665 10.4267 7.11998 10.0467 7.49998Z', fill: '#0F1324', fillOpacity: '0.6' })));
+}

package/lib/mjs/components/icons/SendIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function SendIcon() {
+    return (React.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M14.8934 7.09533L14.8884 7.09314L1.54219 1.55752C1.42993 1.51053 1.30778 1.49211 1.18666 1.50388C1.06554 1.51566 0.949225 1.55728 0.848125 1.62502C0.741311 1.69501 0.653573 1.79045 0.592805 1.90277C0.532037 2.01509 0.500145 2.14075 0.5 2.26845V5.80877C0.50006 5.98335 0.561019 6.15243 0.67237 6.28689C0.783722 6.42134 0.938491 6.51274 1.11 6.54533L8.38906 7.89127C8.41767 7.89669 8.44348 7.91193 8.46205 7.93435C8.48062 7.95677 8.49078 7.98497 8.49078 8.01408C8.49078 8.04319 8.48062 8.07139 8.46205 8.09381C8.44348 8.11623 8.41767 8.13147 8.38906 8.13689L1.11031 9.48283C0.938851 9.51533 0.784092 9.60661 0.67269 9.74094C0.561288 9.87528 0.500219 10.0443 0.5 10.2188V13.7597C0.499917 13.8816 0.530111 14.0017 0.587871 14.1091C0.645632 14.2165 0.729152 14.3079 0.830938 14.375C0.953375 14.4564 1.09706 14.4998 1.24406 14.5C1.34626 14.4999 1.4474 14.4794 1.54156 14.4397L14.8875 8.93564L14.8934 8.93283C15.0731 8.85563 15.2262 8.72745 15.3337 8.56415C15.4413 8.40086 15.4986 8.20961 15.4986 8.01408C15.4986 7.81855 15.4413 7.6273 15.3337 7.46401C15.2262 7.30071 15.0731 7.17253 14.8934 7.09533Z', fill: 'white' })));
+}

package/lib/mjs/components/icons/SparklesIcon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function SparklesIcon() {
+    return (React.createElement("svg", { "aria-hidden": 'true', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M12.6667 6.0013L13.5001 4.16797L15.3334 3.33464L13.5001 2.5013L12.6667 0.667969L11.8334 2.5013L10.0001 3.33464L11.8334 4.16797L12.6667 6.0013Z', fill: '#1C1917' }),
+        React.createElement("path", { d: 'M12.6667 10.0013L11.8334 11.8346L10.0001 12.668L11.8334 13.5013L12.6667 15.3346L13.5001 13.5013L15.3334 12.668L13.5001 11.8346L12.6667 10.0013Z', fill: '#1C1917' }),
+        React.createElement("path", { d: 'M7.66675 6.33464L6.00008 2.66797L4.33341 6.33464L0.666748 8.0013L4.33341 9.66797L6.00008 13.3346L7.66675 9.66797L11.3334 8.0013L7.66675 6.33464ZM6.66008 8.6613L6.00008 10.1146L5.34008 8.6613L3.88675 8.0013L5.34008 7.3413L6.00008 5.88797L6.66008 7.3413L8.11341 8.0013L6.66008 8.6613Z', fill: '#1C1917' })));
+}