@constructor-io/constructorio-ui-asa 1.6.1 → 1.7.1

package/lib/cjs/components/CioAsa/CioAsa.js

@@ -15,8 +15,8 @@ const Chat_1 = tslib_1.__importDefault(require("../Chat/Chat"));
 const CioAsa = react_1.default.forwardRef((props, ref) => {
     const { 
     // Provider configuration — everything else belongs to Chat.
-    apiKey, cioClient, staticRequestConfigs, formatters, urlHelpers, callbacks, section } = props, chatProps = tslib_1.__rest(props, ["apiKey", "cioClient", "staticRequestConfigs", "formatters", "urlHelpers", "callbacks", "section"]);
-    return (react_1.default.createElement(CioAsaProvider_1.default, { apiKey: apiKey, cioClient: cioClient, staticRequestConfigs: staticRequestConfigs, formatters: formatters, urlHelpers: urlHelpers, callbacks: callbacks, section: section },
+    apiKey, cioClient, testCells, staticRequestConfigs, formatters, urlHelpers, callbacks, section } = props, chatProps = tslib_1.__rest(props, ["apiKey", "cioClient", "testCells", "staticRequestConfigs", "formatters", "urlHelpers", "callbacks", "section"]);
+    return (react_1.default.createElement(CioAsaProvider_1.default, { apiKey: apiKey, cioClient: cioClient, testCells: testCells, staticRequestConfigs: staticRequestConfigs, formatters: formatters, urlHelpers: urlHelpers, callbacks: callbacks, section: section },
         react_1.default.createElement(Chat_1.default, Object.assign({}, chatProps, { ref: ref }))));
 });
 CioAsa.displayName = 'CioAsa';

package/lib/cjs/components/CioAsaProvider/CioAsaProvider.js

@@ -7,9 +7,14 @@ const useCioAsaContext_1 = require("../../hooks/useCioAsaContext");
 const defaultFormatters = tslib_1.__importStar(require("../../utils/formatters"));
 const defaultUrlHelpers = tslib_1.__importStar(require("../../utils/urlHelpers"));
 function CioAsaProvider(props) {
-    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, callbacks, section = 'Products', children, } = props;
+    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, testCells, callbacks, section = 'Products', children, } = props;
     const [cioClientOptions, setCioClientOptions] = (0, react_1.useState)({});
-    const cioClient = (0, useCioClient_1.default)({ apiKey, cioClient: customCioClient, cioClientOptions });
+    const cioClient = (0, useCioClient_1.default)({
+        apiKey,
+        cioClient: customCioClient,
+        cioClientOptions,
+        testCells,
+    });
     const contextValue = (0, react_1.useMemo)(() => ({
         cioClient,
         cioClientOptions,

package/lib/cjs/hooks/useCioClient.js

@@ -4,18 +4,29 @@ const tslib_1 = require("tslib");
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const react_1 = require("react");
 const version_1 = tslib_1.__importDefault(require("../version"));
-const useCioClient = ({ apiKey, cioClient, cioClientOptions } = {}) => {
+const useCioClient = ({ apiKey, cioClient, cioClientOptions, testCells } = {}) => {
     if (!apiKey && !cioClient) {
         throw new Error('Api Key or Constructor Client required');
     }
+    const serializedOptions = (0, react_1.useMemo)(() => JSON.stringify({ cioClientOptions: cioClientOptions !== null && cioClientOptions !== void 0 ? cioClientOptions : null, testCells: testCells !== null && testCells !== void 0 ? testCells : null }), [cioClientOptions, testCells]);
     const memoizedCioClient = (0, react_1.useMemo)(() => {
         if (cioClient)
             return cioClient;
         if (apiKey && typeof window !== 'undefined') {
-            return new constructorio_client_javascript_1.default(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-asa-${version_1.default}` }, cioClientOptions));
+            return new constructorio_client_javascript_1.default(Object.assign(Object.assign({ apiKey, sendTrackingEvents: true, version: `cio-ui-asa-${version_1.default}` }, (testCells && { testCells })), cioClientOptions));
         }
         return null;
-    }, [apiKey, cioClient, cioClientOptions]);
+        // options are compared by serializedOptions so inline objects do not rebuild the client
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiKey, cioClient, serializedOptions]);
+    // A caller's client owns its own options, so say so rather than dropping these silently.
+    (0, react_1.useEffect)(() => {
+        if (!cioClient || !testCells || Object.keys(testCells).length === 0)
+            return;
+        // eslint-disable-next-line no-console
+        console.warn('[CioAsa] testCells is ignored when you supply your own cioClient. Set testCells on that client instead.');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cioClient, serializedOptions]);
     return memoizedCioClient;
 };
 exports.default = useCioClient;

package/lib/cjs/version.js

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

package/lib/mjs/components/CioAsa/CioAsa.js

@@ -12,8 +12,8 @@ import Chat from '../Chat/Chat';
 const CioAsa = React.forwardRef((props, ref) => {
     const { 
     // Provider configuration — everything else belongs to Chat.
-    apiKey, cioClient, staticRequestConfigs, formatters, urlHelpers, callbacks, section, ...chatProps } = props;
-    return (React.createElement(CioAsaProvider, { apiKey: apiKey, cioClient: cioClient, staticRequestConfigs: staticRequestConfigs, formatters: formatters, urlHelpers: urlHelpers, callbacks: callbacks, section: section },
+    apiKey, cioClient, testCells, staticRequestConfigs, formatters, urlHelpers, callbacks, section, ...chatProps } = props;
+    return (React.createElement(CioAsaProvider, { apiKey: apiKey, cioClient: cioClient, testCells: testCells, staticRequestConfigs: staticRequestConfigs, formatters: formatters, urlHelpers: urlHelpers, callbacks: callbacks, section: section },
         React.createElement(Chat, { ...chatProps, ref: ref })));
 });
 CioAsa.displayName = 'CioAsa';

package/lib/mjs/components/CioAsaProvider/CioAsaProvider.js

@@ -4,9 +4,14 @@ import { AsaContext } from '../../hooks/useCioAsaContext';
 import * as defaultFormatters from '../../utils/formatters';
 import * as defaultUrlHelpers from '../../utils/urlHelpers';
 export default function CioAsaProvider(props) {
-    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, callbacks, section = 'Products', children, } = props;
+    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, testCells, callbacks, section = 'Products', children, } = props;
     const [cioClientOptions, setCioClientOptions] = useState({});
-    const cioClient = useCioClient({ apiKey, cioClient: customCioClient, cioClientOptions });
+    const cioClient = useCioClient({
+        apiKey,
+        cioClient: customCioClient,
+        cioClientOptions,
+        testCells,
+    });
     const contextValue = useMemo(() => ({
         cioClient,
         cioClientOptions,

package/lib/mjs/hooks/useCioClient.js

@@ -1,10 +1,11 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import version from '../version';
-const useCioClient = ({ apiKey, cioClient, cioClientOptions } = {}) => {
+const useCioClient = ({ apiKey, cioClient, cioClientOptions, testCells } = {}) => {
     if (!apiKey && !cioClient) {
         throw new Error('Api Key or Constructor Client required');
     }
+    const serializedOptions = useMemo(() => JSON.stringify({ cioClientOptions: cioClientOptions ?? null, testCells: testCells ?? null }), [cioClientOptions, testCells]);
     const memoizedCioClient = useMemo(() => {
         if (cioClient)
             return cioClient;
@@ -13,11 +14,22 @@ const useCioClient = ({ apiKey, cioClient, cioClientOptions } = {}) => {
                 apiKey,
                 sendTrackingEvents: true,
                 version: `cio-ui-asa-${version}`,
+                ...(testCells && { testCells }),
                 ...cioClientOptions,
             });
         }
         return null;
-    }, [apiKey, cioClient, cioClientOptions]);
+        // options are compared by serializedOptions so inline objects do not rebuild the client
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiKey, cioClient, serializedOptions]);
+    // A caller's client owns its own options, so say so rather than dropping these silently.
+    useEffect(() => {
+        if (!cioClient || !testCells || Object.keys(testCells).length === 0)
+            return;
+        // eslint-disable-next-line no-console
+        console.warn('[CioAsa] testCells is ignored when you supply your own cioClient. Set testCells on that client instead.');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cioClient, serializedOptions]);
     return memoizedCioClient;
 };
 export default useCioClient;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.6.1';
+export default '1.7.1';

package/lib/types/types.d.ts

@@ -37,11 +37,23 @@ export interface UrlHelpers {
 }
 export interface CioAsaProviderProps extends Omit<Partial<AsaContextValue>, 'setCioClientOptions' | 'cioClientOptions'> {
     apiKey?: string;
+    /**
+     * A/B test cells to attach to tracking events, as `{ [testName]: cellName }`. Each entry is
+     * sent as an `ef-<testName>` parameter. Constructor's docs have the page set
+     * `window.cnstrc.testCell` to a bare cell name, so label it with your test name:
+     * `{ constructorio: window.cnstrc.testCell }`.
+     *
+     * Ignored when you supply your own `cioClient`: that client owns its own options, so set
+     * `testCells` there instead, as a `ConstructorIOClient` constructor option. Passing both
+     * logs a warning.
+     */
+    testCells?: Record<string, string>;
 }
 export interface UseCioClientProps {
     apiKey?: string;
     cioClient?: Nullable<ConstructorIOClient>;
     cioClientOptions?: CioClientOptions;
+    testCells?: Record<string, string>;
 }
 export type DefaultQueryStringMap = {
     intent: 'q';

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.6.1";
+declare const _default: "1.7.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-asa",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "Constructor.io AI Shopping Agent UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -41,6 +41,9 @@
       "require": "./lib/cjs/index.js"
     }
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "lib/**/*",
     "dist/constructorio-ui-asa-bundled.js"