@constructor-io/constructorio-ui-asa 1.6.0 → 1.7.0

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const CioAsaProvider_1 = tslib_1.__importDefault(require("../CioAsaProvider/CioAsaProvider"));
+const Chat_1 = tslib_1.__importDefault(require("../Chat/Chat"));
+/**
+ * The whole agent in one component: the provider and the chat UI composed together.
+ *
+ * Consumers that need to place `Chat` inside their own tree, or render several
+ * components against one client, should compose `CioAsaProvider` and `Chat`
+ * directly. This is the single-entry-point convenience wrapper, and it is what the
+ * standalone browser bundle (`src/bundled.jsx`) mounts.
+ */
+const CioAsa = react_1.default.forwardRef((props, ref) => {
+    const { 
+    // Provider configuration — everything else belongs to Chat.
+    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';
+exports.default = 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/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConstructorIOClient = exports.normalizeItemToProduct = exports.useCioAsaContext = exports.useAsaTracking = exports.useAsaResults = exports.Button = exports.ResultsBlock = exports.Chat = exports.CioAsaProvider = void 0;
+exports.ConstructorIOClient = exports.normalizeItemToProduct = exports.useCioAsaContext = exports.useAsaTracking = exports.useAsaResults = exports.Button = exports.ResultsBlock = exports.Chat = exports.CioAsaProvider = exports.CioAsa = void 0;
 // Components
+var CioAsa_1 = require("./components/CioAsa/CioAsa");
+Object.defineProperty(exports, "CioAsa", { enumerable: true, get: function () { return __importDefault(CioAsa_1).default; } });
 var CioAsaProvider_1 = require("./components/CioAsaProvider/CioAsaProvider");
 Object.defineProperty(exports, "CioAsaProvider", { enumerable: true, get: function () { return __importDefault(CioAsaProvider_1).default; } });
 var Chat_1 = require("./components/Chat/Chat");

package/lib/cjs/version.js

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import CioAsaProvider from '../CioAsaProvider/CioAsaProvider';
+import Chat from '../Chat/Chat';
+/**
+ * The whole agent in one component: the provider and the chat UI composed together.
+ *
+ * Consumers that need to place `Chat` inside their own tree, or render several
+ * components against one client, should compose `CioAsaProvider` and `Chat`
+ * directly. This is the single-entry-point convenience wrapper, and it is what the
+ * standalone browser bundle (`src/bundled.jsx`) mounts.
+ */
+const CioAsa = React.forwardRef((props, ref) => {
+    const { 
+    // Provider configuration — everything else belongs to Chat.
+    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';
+export default 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/index.js

@@ -1,4 +1,5 @@
 // Components
+export { default as CioAsa } from './components/CioAsa/CioAsa';
 export { default as CioAsaProvider } from './components/CioAsaProvider/CioAsaProvider';
 export { default as Chat } from './components/Chat/Chat';
 export { default as ResultsBlock } from './components/ResultsBlock/ResultsBlock';

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.6.0';
+export default '1.7.0';

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

@@ -12,7 +12,7 @@ export interface ChatHandle {
     /** Cancel any active response, then reset the conversation and the thread. */
     clearHistory: () => void;
 }
-interface ChatProps {
+export interface ChatProps {
     /** Called when the close button (✕) is clicked. The consumer controls visibility. */
     onClose?: () => void;
     /** Additional CSS class name for the root container */

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ChatHandle, ChatProps } from '../Chat/Chat';
+import { CioAsaProviderProps } from '../../types';
+export type CioAsaProps = CioAsaProviderProps & ChatProps;
+/**
+ * The whole agent in one component: the provider and the chat UI composed together.
+ *
+ * Consumers that need to place `Chat` inside their own tree, or render several
+ * components against one client, should compose `CioAsaProvider` and `Chat`
+ * directly. This is the single-entry-point convenience wrapper, and it is what the
+ * standalone browser bundle (`src/bundled.jsx`) mounts.
+ */
+declare const CioAsa: React.ForwardRefExoticComponent<CioAsaProviderProps & ChatProps & React.RefAttributes<ChatHandle>>;
+export default CioAsa;

package/lib/types/index.d.ts

@@ -1,6 +1,8 @@
+export { default as CioAsa } from './components/CioAsa/CioAsa';
+export type { CioAsaProps } from './components/CioAsa/CioAsa';
 export { default as CioAsaProvider } from './components/CioAsaProvider/CioAsaProvider';
 export { default as Chat } from './components/Chat/Chat';
-export type { ChatHandle } from './components/Chat/Chat';
+export type { ChatHandle, ChatProps } from './components/Chat/Chat';
 export { default as ResultsBlock } from './components/ResultsBlock/ResultsBlock';
 export type { AspectRatio } from './components/ResultsBlock/ResultsBlock';
 export { default as Button } from './components/Button/Button';

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.0";
+declare const _default: "1.7.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-asa",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Constructor.io AI Shopping Agent UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",