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

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/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.1';

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/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.1';

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/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. */

package/lib/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-pia",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "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",