@constructor-io/constructorio-ui-pia 2.10.0 → 2.10.2

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

@@ -92,7 +92,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/CioPia/PiaCustomCarousel.js

@@ -4,6 +4,7 @@ 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 contentTransformers_1 = require("../../utils/contentTransformers");
+const translate_1 = require("../../utils/translate");
 function HtmlDescription({ product }) {
     const { description } = product;
     if (!description)
@@ -44,8 +45,12 @@ function buildMergedOverrides(componentOverrides, priceSectionOverride) {
     }
     return Object.assign(Object.assign({}, componentOverrides), { item: Object.assign(Object.assign({}, componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item), { productCard: Object.assign(Object.assign({}, (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.item) === null || _c === void 0 ? void 0 : _c.productCard), { content: Object.assign(Object.assign({}, content), defaults) }) }) });
 }
-function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, priceCurrency, }) {
+function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }) {
     const wrapperRef = (0, react_1.useRef)(null);
+    const { onAddToCart } = callbacks || {};
+    const addToCartHandler = (0, react_1.useCallback)((event, product) => {
+        onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, event);
+    }, [onAddToCart]);
     // Determine to use user-defined click handler or default behavior
     const productClickHandler = (0, react_1.useCallback)((item) => {
         const position = items.findIndex((i) => i.id === item.id);
@@ -77,7 +82,18 @@ function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick
         };
     }, [productClickHandler]);
     const priceSectionOverride = (0, react_1.useMemo)(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
-    const mergedOverrides = (0, react_1.useMemo)(() => buildMergedOverrides(componentOverrides, priceSectionOverride), [componentOverrides, priceSectionOverride]);
+    const mergedOverrides = (0, react_1.useMemo)(() => {
+        var _a;
+        const baseOverrides = buildMergedOverrides(componentOverrides, priceSectionOverride);
+        const cardOverrides = (_a = baseOverrides.item) === null || _a === void 0 ? void 0 : _a.productCard;
+        // The carousel never passes onAddToCart down and the card hides the button without it, so
+        // re-render the card with the handler. A full card override owns its own layout - skip it.
+        if (!onAddToCart || (cardOverrides === null || cardOverrides === void 0 ? void 0 : cardOverrides.reactNode)) {
+            return baseOverrides;
+        }
+        const addToCartText = (0, translate_1.translate)('Add to Cart', translations);
+        return Object.assign(Object.assign({}, baseOverrides), { item: Object.assign(Object.assign({}, baseOverrides.item), { productCard: Object.assign(Object.assign({}, cardOverrides), { reactNode: ({ product }) => (react_1.default.createElement(constructorio_ui_components_1.ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: addToCartHandler, componentOverrides: cardOverrides })) }) }) });
+    }, [componentOverrides, priceSectionOverride, onAddToCart, translations, addToCartHandler]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;

package/lib/cjs/components/ConversationHistory/ConversationHistory.js

@@ -34,7 +34,7 @@ function ConversationHistory({ conversationHistory, isLoading, error, currentIte
                 isLast && !isLoading && error && (react_1.default.createElement(ErrorBlock_1.default, { message: error.message || 'Unexpected error' })),
                 entry.answer && (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
                     react_1.default.createElement(Answer_1.default, { text: entry.answer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
-                    carouselItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: carouselItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+                    carouselItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: carouselItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
                     isLast && showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback }))))));
         })),
         disclaimerPosition === 'bottom' && disclaimer));

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

@@ -2,41 +2,49 @@
 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, }) {
+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(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/PiaInlineAnswer/PiaInlineAnswer.js

@@ -11,7 +11,7 @@ function PiaInlineAnswer({ currentAnswer, currentItems, showFeedback, learnMoreU
     return (react_1.default.createElement("div", { className: 'cio-pia-answer-container' },
         disclaimerPosition === 'top' && disclaimer,
         react_1.default.createElement(Answer_1.default, { text: currentAnswer, componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.answer }),
-        currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+        currentItems && (react_1.default.createElement(PiaCustomCarousel_1.default, { items: currentItems, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
         showFeedback && (react_1.default.createElement(Feedback_1.default, { translations: translations, onFeedback: onFeedback || (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onFeedback), componentOverride: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.feedback })),
         disclaimerPosition === 'bottom' && disclaimer));
 }

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

@@ -6,14 +6,19 @@ const agent_1 = tslib_1.__importDefault(require("./agent"));
 const version_1 = tslib_1.__importDefault(require("../../version"));
 class MockConstructorIOClient {
     constructor(options) {
-        this.options = Object.assign({ version: options.version || `cio-ui-pia-${version_1.default}`, serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com', quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com', agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com', sessionId: options.sessionId || 0, clientId: options.clientId || 'this-is-a-random-client-id', sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true, beaconMode: options.beaconMode !== undefined ? options.beaconMode : true, networkParameters: options.networkParameters || {} }, options);
-        const cioClient = new constructorio_client_javascript_1.default(this.options);
+        const isServer = typeof window === 'undefined' || typeof document === 'undefined';
+        const clientOptions = Object.assign(Object.assign(Object.assign({ version: options.version || `cio-ui-pia-${version_1.default}`, serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com', quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com', agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com' }, (isServer && {
+            clientId: options.clientId || 'this-is-a-random-client-id',
+        })), { sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true, beaconMode: options.beaconMode !== undefined ? options.beaconMode : true, networkParameters: options.networkParameters || {} }), options);
+        const cioClient = new constructorio_client_javascript_1.default(clientOptions);
+        const { clientId, sessionId } = cioClient.agent.options;
+        this.options = Object.assign(Object.assign({}, clientOptions), { clientId, sessionId });
         this.search = cioClient.search;
         this.browse = cioClient.browse;
         this.recommendations = cioClient.recommendations;
         this.tracker = cioClient.tracker;
         this.quizzes = cioClient.quizzes;
-        this.agent = new agent_1.default(Object.assign(Object.assign({}, this.options), { clientId: options.clientId, sessionId: options.sessionId }));
+        this.agent = new agent_1.default(this.options);
     }
 }
 exports.default = MockConstructorIOClient;

package/lib/cjs/utils/translate.js

@@ -10,6 +10,7 @@ const defaultTranslations = {
     'Is this answer useful?': 'Is this answer useful?',
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
+    'Add to Cart': 'Add to Cart',
 };
 /**
  * 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.0';
+exports.default = '2.10.2';

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

@@ -88,7 +88,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/CioPia/PiaCustomCarousel.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef, useEffect, useMemo } from 'react';
-import { Carousel, CIO_EVENTS, } from '@constructor-io/constructorio-ui-components';
+import { Carousel, ProductCard, CIO_EVENTS, } from '@constructor-io/constructorio-ui-components';
 import { sanitizeHtml } from '../../utils/contentTransformers';
+import { translate } from '../../utils/translate';
 function HtmlDescription({ product }) {
     const { description } = product;
     if (!description)
@@ -53,8 +54,12 @@ function buildMergedOverrides(componentOverrides, priceSectionOverride) {
         },
     };
 }
-export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, priceCurrency, }) {
+export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }) {
     const wrapperRef = useRef(null);
+    const { onAddToCart } = callbacks || {};
+    const addToCartHandler = useCallback((event, product) => {
+        onAddToCart?.(product, event);
+    }, [onAddToCart]);
     // Determine to use user-defined click handler or default behavior
     const productClickHandler = useCallback((item) => {
         const position = items.findIndex((i) => i.id === item.id);
@@ -86,7 +91,26 @@ export default function PiaCustomCarousel({ items, componentOverrides, callbacks
         };
     }, [productClickHandler]);
     const priceSectionOverride = useMemo(() => (priceCurrency ? createPriceSectionOverride(priceCurrency) : undefined), [priceCurrency]);
-    const mergedOverrides = useMemo(() => buildMergedOverrides(componentOverrides, priceSectionOverride), [componentOverrides, priceSectionOverride]);
+    const mergedOverrides = useMemo(() => {
+        const baseOverrides = buildMergedOverrides(componentOverrides, priceSectionOverride);
+        const cardOverrides = baseOverrides.item?.productCard;
+        // The carousel never passes onAddToCart down and the card hides the button without it, so
+        // re-render the card with the handler. A full card override owns its own layout - skip it.
+        if (!onAddToCart || cardOverrides?.reactNode) {
+            return baseOverrides;
+        }
+        const addToCartText = translate('Add to Cart', translations);
+        return {
+            ...baseOverrides,
+            item: {
+                ...baseOverrides.item,
+                productCard: {
+                    ...cardOverrides,
+                    reactNode: ({ product }) => (React.createElement(ProductCard, { product: product, className: 'w-full h-full', addToCartText: addToCartText, onAddToCart: addToCartHandler, componentOverrides: cardOverrides })),
+                },
+            },
+        };
+    }, [componentOverrides, priceSectionOverride, onAddToCart, translations, addToCartHandler]);
     // If there are no items, do not render the carousel
     if (items.length === 0) {
         return null;

package/lib/mjs/components/ConversationHistory/ConversationHistory.js

@@ -31,7 +31,7 @@ export default function ConversationHistory({ conversationHistory, isLoading, er
                 isLast && !isLoading && error && (React.createElement(ErrorBlock, { message: error.message || 'Unexpected error' })),
                 entry.answer && (React.createElement("div", { className: 'cio-pia-answer-container' },
                     React.createElement(Answer, { text: entry.answer, componentOverride: componentOverrides?.answer }),
-                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+                    carouselItems && (React.createElement(PiaCustomCarousel, { items: carouselItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: entry.question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
                     isLast && showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: handleFeedback, componentOverride: componentOverrides?.feedback }))))));
         })),
         disclaimerPosition === 'bottom' && disclaimer));

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

@@ -1,39 +1,47 @@
-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, }) {
+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/PiaInlineAnswer/PiaInlineAnswer.js

@@ -8,7 +8,7 @@ export default function PiaInlineAnswer({ currentAnswer, currentItems, showFeedb
     return (React.createElement("div", { className: 'cio-pia-answer-container' },
         disclaimerPosition === 'top' && disclaimer,
         React.createElement(Answer, { text: currentAnswer, componentOverride: componentOverrides?.answer }),
-        currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, priceCurrency: priceCurrency })),
+        currentItems && (React.createElement(PiaCustomCarousel, { items: currentItems, componentOverrides: componentOverrides?.carousel, callbacks: callbacks, onResultClick: onResultClick, question: question, qnaResultId: qnaResultId, translations: translations, priceCurrency: priceCurrency })),
         showFeedback && (React.createElement(Feedback, { translations: translations, onFeedback: onFeedback || callbacks?.onFeedback, componentOverride: componentOverrides?.feedback })),
         disclaimerPosition === 'bottom' && disclaimer));
 }

package/lib/mjs/hooks/mocks/MockConstructorIOClient.js

@@ -10,29 +10,29 @@ class MockConstructorIOClient {
     quizzes;
     agent;
     constructor(options) {
-        this.options = {
+        const isServer = typeof window === 'undefined' || typeof document === 'undefined';
+        const clientOptions = {
             version: options.version || `cio-ui-pia-${version}`,
             serviceUrl: options.serviceUrl || 'https://ac.cnstrc.com',
             quizzesServiceUrl: options.quizzesServiceUrl || 'https://quizzes.cnstrc.com',
             agentServiceUrl: options.agentServiceUrl || 'https://agent.cnstrc.com',
-            sessionId: options.sessionId || 0,
-            clientId: options.clientId || 'this-is-a-random-client-id',
+            ...(isServer && {
+                clientId: options.clientId || 'this-is-a-random-client-id',
+            }),
             sendTrackingEvents: options.sendTrackingEvents !== undefined ? options.sendTrackingEvents : true,
             beaconMode: options.beaconMode !== undefined ? options.beaconMode : true,
             networkParameters: options.networkParameters || {},
             ...options,
         };
-        const cioClient = new ConstructorioClient(this.options);
+        const cioClient = new ConstructorioClient(clientOptions);
+        const { clientId, sessionId } = cioClient.agent.options;
+        this.options = { ...clientOptions, clientId, sessionId };
         this.search = cioClient.search;
         this.browse = cioClient.browse;
         this.recommendations = cioClient.recommendations;
         this.tracker = cioClient.tracker;
         this.quizzes = cioClient.quizzes;
-        this.agent = new MockAgent({
-            ...this.options,
-            clientId: options.clientId,
-            sessionId: options.sessionId,
-        });
+        this.agent = new MockAgent(this.options);
     }
 }
 export default MockConstructorIOClient;

package/lib/mjs/utils/translate.js

@@ -7,6 +7,7 @@ const defaultTranslations = {
     'Is this answer useful?': 'Is this answer useful?',
     'Learn More.': 'Learn More.',
     'Ask about this product': 'Ask about this product',
+    'Add to Cart': 'Add to Cart',
 };
 /**
  * Translates a word using the provided translations object.

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '2.10.0';
+export default '2.10.2';

package/lib/types/components/CioPia/PiaCustomCarousel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CarouselOverrides } from '@constructor-io/constructorio-ui-components';
-import { Callbacks, Item } from '../../types';
+import { Callbacks, Item, Translations } from '../../types';
 interface PiaCustomCarouselProps {
     items: Array<Item>;
     componentOverrides?: CarouselOverrides<Item>;
@@ -8,7 +8,8 @@ interface PiaCustomCarouselProps {
     onResultClick?: (item: Item, position: number, question: string, qnaResultId?: string) => void;
     question?: string;
     qnaResultId?: string;
+    translations?: Translations;
     priceCurrency?: string;
 }
-export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, priceCurrency, }: PiaCustomCarouselProps): React.JSX.Element | null;
+export default function PiaCustomCarousel({ items, componentOverrides, callbacks, onResultClick, question, qnaResultId, translations, priceCurrency, }: PiaCustomCarouselProps): React.JSX.Element | null;
 export {};

package/lib/types/components/Input/Input.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Translations } from '../../types';
+import { ComponentOverrideProps } from '@constructor-io/constructorio-ui-components';
+import { InputRenderProps, Translations } from '../../types';
 interface InputProps {
     value?: string;
     disabled?: boolean;
@@ -8,6 +9,7 @@ interface InputProps {
     onSubmit: (value: string) => void;
     onFocus?: () => void;
     translations?: Translations;
+    componentOverride?: ComponentOverrideProps<InputRenderProps>;
 }
-declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, }: InputProps): React.JSX.Element;
+declare function Input({ value: providedValue, placeholder, disabled, onSubmit, onFocus, translations, componentOverride, }: InputProps): React.JSX.Element;
 export default Input;

package/lib/types/types.d.ts

@@ -59,6 +59,7 @@ export type Translations = {
     'Is this answer useful?'?: string;
     'Learn More.'?: string;
     'Ask about this product'?: string;
+    'Add to Cart'?: string;
 };
 export type QuestionSource = 'user' | 'suggestion';
 export interface PiaCallbackContext {
@@ -70,6 +71,12 @@ export interface Callbacks {
     onQuestionSubmit?: (question: string, context: PiaCallbackContext, source: QuestionSource) => void;
     /** Called when a product card in the carousel is clicked. */
     onProductCardClick?: (item: Item) => void;
+    /**
+     * Called when the "Add to Cart" button on a product card is clicked.
+     * Providing this callback is what renders the button.
+     * Clicking the button does not fire `onProductCardClick`.
+     */
+    onAddToCart?: (item: Item, event: React.MouseEvent) => void;
     /** Called when the user submits positive or negative feedback on an answer. */
     onFeedback?: (type: FeedbackType) => void;
     /** Called when a new answer is received. Passes the full conversation history. */
@@ -139,6 +146,16 @@ export interface FeedbackRenderProps {
 export interface LoadingRenderProps {
     skeleton: ReactNode;
 }
+/**
+ * Render props passed to a custom Input override.
+ */
+export interface InputRenderProps {
+    disabled: boolean;
+    placeholder: string;
+    onSubmit: (value: string) => void;
+    onFocus?: () => void;
+    translations?: Translations;
+}
 /**
  * Component overrides for CioPia.
  * Allows customization of sub-components via reactNode or render props functions.
@@ -146,6 +163,7 @@ export interface LoadingRenderProps {
 export interface CioPiaComponentOverrides extends ComponentOverrideProps<CioPiaRenderProps> {
     carousel?: CarouselOverrides<Item>;
     answer?: ComponentOverrideProps<AnswerRenderProps>;
+    input?: ComponentOverrideProps<InputRenderProps>;
     suggestedQuestions?: ComponentOverrideProps<SuggestedQuestionsRenderProps>;
     disclaimer?: ComponentOverrideProps<DisclaimerRenderProps>;
     feedback?: ComponentOverrideProps<FeedbackRenderProps>;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.10.0";
+declare const _default: "2.10.2";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Constructor.io AI Product Insights Agent UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -26,8 +26,10 @@
   "module": "lib/mjs/index.js",
   "exports": {
     "./styles.css": {
+      "style": "./lib/mjs/styles.css",
       "import": "./lib/mjs/styles.css",
-      "require": "./lib/cjs/styles.css"
+      "require": "./lib/cjs/styles.css",
+      "default": "./lib/mjs/styles.css"
     },
     "./constructorio-ui-pia-bundled": {
       "import": "./dist/constructorio-ui-pia-bundled.js",