@athoscommerce/snap-preact 1.10.0 → 1.10.1-beta.150

package/dist/cjs/components/src/themes/snapnco/components/templates/index.js

@@ -15,8 +15,12 @@ const searchCollapsible_1 = require("./searchCollapsible");
 const autocompleteSlideout_1 = require("./autocompleteSlideout");
 const autocompleteModal_1 = require("./autocompleteModal");
 const autocompleteFixed_1 = require("./autocompleteFixed");
+const chat_1 = require("./chat");
+const chatButton_1 = require("./chatButton");
 exports.templates = {
     default: {
+        ...chat_1.chat.default,
+        ...chatButton_1.chatButton.default,
         ...autocompleteSlideout_1.autocompleteSlideout.default,
         ...autocompleteModal_1.autocompleteModal.default,
         ...autocompleteFixed_1.autocompleteFixed.default,
@@ -32,6 +36,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.default,
     },
     mobile: {
+        ...chat_1.chat.mobile,
+        ...chatButton_1.chatButton.mobile,
         ...autocompleteSlideout_1.autocompleteSlideout.mobile,
         ...autocompleteModal_1.autocompleteModal.mobile,
         ...autocompleteFixed_1.autocompleteFixed.mobile,
@@ -47,6 +53,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.mobile,
     },
     tablet: {
+        ...chat_1.chat.tablet,
+        ...chatButton_1.chatButton.tablet,
         ...autocompleteSlideout_1.autocompleteSlideout.tablet,
         ...autocompleteModal_1.autocompleteModal.tablet,
         ...autocompleteFixed_1.autocompleteFixed.tablet,
@@ -62,6 +70,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.tablet,
     },
     desktop: {
+        ...chat_1.chat.desktop,
+        ...chatButton_1.chatButton.desktop,
         ...autocompleteSlideout_1.autocompleteSlideout.desktop,
         ...autocompleteModal_1.autocompleteModal.desktop,
         ...autocompleteFixed_1.autocompleteFixed.desktop,

package/dist/cjs/components/src/themes/snappy/components/templates/chat.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chat = void 0;
+const chat_1 = require("../../../themeComponents/chat");
+// Chat component props come from Template export
+exports.chat = chat_1.chatThemeComponentProps;

package/dist/cjs/components/src/themes/snappy/components/templates/chatButton.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButton = void 0;
+const chatButton_1 = require("../../../themeComponents/chatButton");
+// ChatButton component props come from Template export
+exports.chatButton = chatButton_1.chatButtonThemeComponentProps;

package/dist/cjs/components/src/themes/snappy/components/templates/index.js

@@ -15,8 +15,12 @@ const searchCollapsible_1 = require("./searchCollapsible");
 const autocompleteSlideout_1 = require("./autocompleteSlideout");
 const autocompleteModal_1 = require("./autocompleteModal");
 const autocompleteFixed_1 = require("./autocompleteFixed");
+const chat_1 = require("./chat");
+const chatButton_1 = require("./chatButton");
 exports.templates = {
     default: {
+        ...chat_1.chat.default,
+        ...chatButton_1.chatButton.default,
         ...autocompleteSlideout_1.autocompleteSlideout.default,
         ...autocompleteModal_1.autocompleteModal.default,
         ...autocompleteFixed_1.autocompleteFixed.default,
@@ -32,6 +36,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.default,
     },
     mobile: {
+        ...chat_1.chat.mobile,
+        ...chatButton_1.chatButton.mobile,
         ...autocompleteSlideout_1.autocompleteSlideout.mobile,
         ...autocompleteModal_1.autocompleteModal.mobile,
         ...autocompleteFixed_1.autocompleteFixed.mobile,
@@ -47,6 +53,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.mobile,
     },
     tablet: {
+        ...chat_1.chat.tablet,
+        ...chatButton_1.chatButton.tablet,
         ...autocompleteSlideout_1.autocompleteSlideout.tablet,
         ...autocompleteModal_1.autocompleteModal.tablet,
         ...autocompleteFixed_1.autocompleteFixed.tablet,
@@ -62,6 +70,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.tablet,
     },
     desktop: {
+        ...chat_1.chat.desktop,
+        ...chatButton_1.chatButton.desktop,
         ...autocompleteSlideout_1.autocompleteSlideout.desktop,
         ...autocompleteModal_1.autocompleteModal.desktop,
         ...autocompleteFixed_1.autocompleteFixed.desktop,

package/dist/cjs/components/src/themes/themeComponents/chat.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatThemeComponentProps = void 0;
+exports.chatThemeComponentProps = {
+    default: {
+        chat: {
+            position: 'right',
+            offset: '20px',
+        },
+    },
+    mobile: {},
+    tablet: {},
+    desktop: {},
+};

package/dist/cjs/components/src/themes/themeComponents/chatButton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButtonThemeComponentProps = void 0;
+exports.chatButtonThemeComponentProps = {
+    default: {},
+    mobile: {},
+    tablet: {},
+    desktop: {},
+};

package/dist/cjs/components/src/utilities/Colour/Colour.js

@@ -102,6 +102,27 @@ class Colour {
             return this;
         return new Colour(Colour.opacity(this.hex, -offset));
     }
+    /** Returns a hex string mixed linearly toward black. `amount` is a 0-1 proportion of
+     * black in the result — note this differs from `darken(offset)`, which takes a 0-100
+     * offset and returns a chainable `Colour`. 0.9 yields a near-black with a slight tint. */
+    mixBlack(amount = 0.3) {
+        return Colour.mixToward(this.hex, '#000000', amount) ?? this.hex ?? '';
+    }
+    /** Returns a hex string mixed linearly toward white. `amount` is a 0-1 proportion of
+     * white in the result — note this differs from `lighten(offset)`, which takes a 0-100
+     * offset and returns a chainable `Colour`. 0.9 yields a near-white with a slight tint. */
+    mixWhite(amount = 0.3) {
+        return Colour.mixToward(this.hex, '#ffffff', amount) ?? this.hex ?? '';
+    }
+    /** Returns the color only if it is a concrete value that can be manipulated and paired with
+     * other colors. Contextual CSS keywords (currentColor and the CSS-wide keywords) resolve
+     * against surrounding styles, so they would defeat `|| fallback` chains — those return undefined. */
+    static concrete(color) {
+        if (!color || ['currentcolor', 'inherit', 'initial', 'unset', 'revert'].includes(color.toLowerCase())) {
+            return undefined;
+        }
+        return color;
+    }
     static isRgb(color) {
         return Boolean(color.match(/^rgba?\([0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]*\)$/i) ||
             color.match(/^rgba?\([0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+[0-9]{1,3}[\s,\,]+0?\.?[0-9]+%?[\s,\,]*\)$/i));
@@ -170,6 +191,26 @@ class Colour {
         }
         return hexValue;
     }
+    /** Linear RGB mix between two hex colors. `amount` (0-1) is the proportion of `towardHex`
+     * in the result. Returns the source `hex` unchanged when either input is invalid. */
+    static mixToward(hex, towardHex, amount) {
+        if (!hex)
+            return undefined;
+        if (!Colour.isHex(hex) || !Colour.isHex(towardHex))
+            return hex;
+        const clamped = Math.max(0, Math.min(1, amount));
+        const sourceR = parseInt(hex.slice(1, 3), 16);
+        const sourceG = parseInt(hex.slice(3, 5), 16);
+        const sourceB = parseInt(hex.slice(5, 7), 16);
+        const targetR = parseInt(towardHex.slice(1, 3), 16);
+        const targetG = parseInt(towardHex.slice(3, 5), 16);
+        const targetB = parseInt(towardHex.slice(5, 7), 16);
+        const mix = (s, t) => Math.round(s * (1 - clamped) + t * clamped);
+        const r = mix(sourceR, targetR).toString(16).padStart(2, '0');
+        const g = mix(sourceG, targetG).toString(16).padStart(2, '0');
+        const b = mix(sourceB, targetB).toString(16).padStart(2, '0');
+        return `#${r}${g}${b}`;
+    }
     static brightness(color, offset) {
         let isRgb = false;
         if (color && Colour.isRgb(color)) {

package/dist/cjs/components/src/utilities/snapify.js

@@ -45,6 +45,20 @@ class Snapify {
         cntrlr.init();
         return cntrlr;
     }
+    static chat(config) {
+        const id = config.id;
+        if (controllers[id]) {
+            return controllers[id];
+        }
+        const cntrlr = (controllers[id] = createChatController({ client, controller: config }));
+        cntrlr.on('afterStore', async ({ controller }, next) => {
+            controller.log.debug('controller', controller);
+            controller.log.debug('store', controller.store.toJSON());
+            await next();
+        });
+        cntrlr.init();
+        return cntrlr;
+    }
     static search(config) {
         const id = config.id;
         if (controllers[id]) {
@@ -87,6 +101,19 @@ function createRecommendationController(config) {
     });
     return cntrlr;
 }
+function createChatController(config) {
+    const urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker).detach(true);
+    const cntrlr = new snap_controller_1.ChatController(config.controller, {
+        client: new snap_client_1.Client(config.client.globals, config.client.config),
+        store: new snap_store_mobx_1.ChatStore({ ...config.controller, siteId: config.client.globals.siteId }, { urlManager }),
+        urlManager,
+        eventManager: new snap_event_manager_1.EventManager(),
+        profiler: new snap_profiler_1.Profiler(),
+        logger: new snap_logger_1.Logger(),
+        tracker: new snap_tracker_1.Tracker(config.client.globals),
+    });
+    return cntrlr;
+}
 function createAutocompleteController(config) {
     const urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker).detach();
     const cntrlr = new snap_controller_1.AutocompleteController(config.controller, {

package/dist/cjs/src/Snap.js

@@ -101,6 +101,9 @@ class Snap {
                 case snap_controller_1.ControllerTypes.recommendation:
                     importPromise = import('./create/createRecommendationController');
                     break;
+                case snap_controller_1.ControllerTypes.chat:
+                    importPromise = import('./create/createChatController');
+                    break;
                 case snap_controller_1.ControllerTypes.search:
                 default:
                     importPromise = import('./create/createSearchController');
@@ -544,6 +547,73 @@ class Snap {
                     });
                     break;
                 }
+                case 'chat': {
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
+                            return;
+                        }
+                        this._controllerPromises[controller.config.id] = new Promise(async (resolve) => {
+                            try {
+                                // `_initialized` is only set after the awaited init fires, so two chat
+                                // targeters would otherwise both re-run the init middleware
+                                let initialized = false;
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const importPromises = [];
+                                        // dynamically import the component
+                                        importPromises.push(target.component());
+                                        const importResolutions = await Promise.all(importPromises);
+                                        const Component = importResolutions[0];
+                                        setTimeout(() => {
+                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    const cntrlr = await this._createController(snap_controller_1.ControllerTypes.chat, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                        if (cntrlr)
+                                            resolve(cntrlr);
+                                    });
+                                    if (!cntrlr.initialized)
+                                        cntrlr.init();
+                                }
+                                controller?.targeters?.forEach((target, target_index) => {
+                                    if (!target.selector) {
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
+                                    }
+                                    if (!target.component) {
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
+                                    }
+                                    target = (0, utils_1.applyChatTargetInject)(target);
+                                    const targeter = new snap_toolbox_1.DomTargeter([{ ...target }], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(snap_controller_1.ControllerTypes.chat, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
+                                        });
+                                        if (!initialized) {
+                                            initialized = true;
+                                            if (!cntrlr.initialized)
+                                                cntrlr.init();
+                                        }
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
+                                });
+                            }
+                            catch (err) {
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
+                            }
+                        });
+                    });
+                    break;
+                }
                 case 'autocomplete': {
                     this.config.controllers[type].forEach((controller, index) => {
                         if (typeof this._controllerPromises[controller.config.id] != 'undefined') {

package/dist/cjs/src/Templates/SnapTemplates.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
+exports.createChatTargeters = exports.createSearchTargeters = exports.SnapTemplates = exports.applyAutomaticThemeOverrides = exports.DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = exports.DEFAULT_FEATURES = exports.TEMPLATE_EDITOR_UI_PARAM = exports.TEMPLATE_EDITOR_COOKIE = void 0;
 exports.mapBreakpoints = mapBreakpoints;
 exports.createAutocompleteTargeters = createAutocompleteTargeters;
 exports.createRecommendationComponentMapping = createRecommendationComponentMapping;
@@ -194,6 +194,36 @@ const createSearchTargeters = (templateConfig, templatesStore) => {
     });
 };
 exports.createSearchTargeters = createSearchTargeters;
+const createChatTargeters = (templateConfig, templatesStore) => {
+    // initial target configs
+    const targetConfigs = templateConfig.chat?.targets || [];
+    let mergedConfigs;
+    if (templatesStore.settings.editMode) {
+        const overrideConfigs = (templatesStore.storage.get('overrides.targets.chat') || []);
+        mergedConfigs = (0, deepmerge_1.default)(targetConfigs, overrideConfigs, { arrayMerge: utils_1.combineMerge });
+    }
+    else {
+        mergedConfigs = targetConfigs;
+    }
+    return mergedConfigs.map((targetConfig) => {
+        const target = templatesStore.addTarget({ ...targetConfig, type: 'chat' });
+        const targeter = {
+            selector: targetConfig.selector,
+            // inline selectors (e.g. a nav slot) may render after DOMContentLoaded;
+            // re-injection at already-targeted elements is prevented by DomTargeter
+            autoRetarget: true,
+            component: async () => {
+                const componentImportPromises = [];
+                componentImportPromises.push(templatesStore.library.import.component.chat[targetConfig.component]());
+                await Promise.all(componentImportPromises);
+                return TemplateSelect_1.TemplateSelect;
+            },
+            props: { target, templatesStore },
+        };
+        return (0, utils_1.applyChatTargetInject)(targeter);
+    });
+};
+exports.createChatTargeters = createChatTargeters;
 function createAutocompleteTargeters(templateConfig, templatesStore) {
     // initial target configs
     const targetConfigs = templateConfig.autocomplete?.targets || [];
@@ -280,6 +310,7 @@ function createRecommendationComponentMapping(templateConfig, templatesStore) {
 function createSnapConfig(templateConfig, templatesStore) {
     const initiatorPrefix = window?.athos?.managed ? `managed/` : '';
     const snapConfig = {
+        mode: templateConfig.config?.mode,
         features: templateConfig.features || exports.DEFAULT_FEATURES,
         client: {
             globals: {},
@@ -402,6 +433,21 @@ function createSnapConfig(templateConfig, templatesStore) {
         // }
         snapConfig.instantiators.recommendation = recommendationInstantiatorConfig;
     }
+    /* CHAT CONTROLLER */
+    if (templateConfig.chat && snapConfig.controllers) {
+        const chatControllerConfig = {
+            config: {
+                id: 'chat',
+                plugins: createPlugins(templateConfig, templatesStore, 'chat'),
+                settings: {
+                    languageCode: templatesStore.language,
+                    ...(templateConfig.chat.settings || {}),
+                },
+            },
+            targeters: (0, exports.createChatTargeters)(templateConfig, templatesStore),
+        };
+        snapConfig.controllers.chat = [chatControllerConfig];
+    }
     return snapConfig;
 }
 function createPlugins(templateConfig, templatesStore, controllerType) {
@@ -410,10 +456,14 @@ function createPlugins(templateConfig, templatesStore, controllerType) {
     if (controllerType) {
         controllerConfig = templateConfig[controllerType] || {};
     }
-    plugins.push([
-        templatesStore.library.import.plugins.common.backgroundFilters,
-        (0, deepmerge_1.default)(templateConfig.plugins?.common?.backgroundFilters || {}, controllerConfig?.plugins?.common?.backgroundFilters || {}),
-    ]);
+    // backgroundFilters writes `config.globals.filters`, which the chat endpoint has no
+    // field for — chat carries background filters via `settings.bgFilters` instead
+    if (controllerType !== 'chat') {
+        plugins.push([
+            templatesStore.library.import.plugins.common.backgroundFilters,
+            (0, deepmerge_1.default)(templateConfig.plugins?.common?.backgroundFilters || {}, controllerConfig?.plugins?.common?.backgroundFilters || {}),
+        ]);
+    }
     plugins.push([
         templatesStore.library.import.plugins.common.scrollToTop,
         (0, deepmerge_1.default)(templateConfig.plugins?.common?.scrollToTop || {}, controllerConfig?.plugins?.common?.scrollToTop || {}),

package/dist/cjs/src/Templates/Stores/LibraryStore.js

@@ -29,6 +29,26 @@ class LibraryStore {
                 default: {},
                 email: {},
             },
+            chat: {},
+            chatButton: {},
+            chatLoadingIndicator: {},
+            chatAttachmentContext: {},
+            chatInspirationResultMessage: {},
+            chatMessageText: {},
+            chatMessageUser: {},
+            chatProductComparisonMessage: {},
+            chatProductQueryMessage: {},
+            chatResult: {},
+            chatResultsDisplay: {},
+            chatSuggestedQuestions: {},
+            chatComparisonsTray: {},
+            chatComposer: {},
+            chatFacetsBar: {},
+            chatHistory: {},
+            chatMessages: {},
+            chatSessionFeedback: {},
+            chatSideChat: {},
+            chatTopicDrift: {},
             badge: {},
             result: {},
             overlayResult: {},
@@ -207,6 +227,33 @@ class LibraryStore {
                         },
                     },
                 },
+                chat: {
+                    Chat: async () => {
+                        return this.components.chat.Chat || (this.components.chat.Chat = (await import('./library/components/Chat')).Chat);
+                    },
+                    ChatButton: async () => {
+                        return this.components.chat.ChatButton || (this.components.chat.ChatButton = (await import('./library/components/ChatButton')).ChatButton);
+                    },
+                },
+                chatButton: {},
+                chatLoadingIndicator: {},
+                chatAttachmentContext: {},
+                chatInspirationResultMessage: {},
+                chatMessageText: {},
+                chatMessageUser: {},
+                chatProductComparisonMessage: {},
+                chatProductQueryMessage: {},
+                chatResult: {},
+                chatResultsDisplay: {},
+                chatSuggestedQuestions: {},
+                chatComparisonsTray: {},
+                chatComposer: {},
+                chatFacetsBar: {},
+                chatHistory: {},
+                chatMessages: {},
+                chatSessionFeedback: {},
+                chatSideChat: {},
+                chatTopicDrift: {},
                 badge: {},
                 result: {
                     Result: async () => {
@@ -329,7 +376,10 @@ class LibraryStore {
     async addComponentImport(type, name, componentFn) {
         // only allow certain types based on unlocked status
         if (this.allowedComponentTypes.includes(type) && this.components[type]) {
-            this.import.component[type][name] = async () => {
+            // `chat` declares its library entry with literal keys so template targets stay
+            // literal-checked; custom overrides register by arbitrary name, hence the cast
+            const componentImports = this.import.component[type];
+            componentImports[name] = async () => {
                 return (this.components[type][name] ||
                     (this.components[type][name] = await (0, CustomComponent_1.CustomComponent)({
                         type,

package/dist/cjs/src/Templates/Stores/TemplateStore.js

@@ -25,6 +25,7 @@ class TemplatesStore {
         this.targets = {
             search: [],
             autocomplete: [],
+            chat: [],
             recommendation: {
                 bundle: [],
                 default: [],
@@ -219,7 +220,7 @@ function getTargetArray(targets, type) {
     if (category === 'recommendation' && subcategory) {
         return targets.recommendation[subcategory];
     }
-    if (category === 'search' || category === 'autocomplete') {
+    if (category === 'search' || category === 'autocomplete' || category === 'chat') {
         return targets[category];
     }
     return undefined;

package/dist/cjs/src/Templates/Stores/library/components/Chat.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = void 0;
+var Chat_1 = require("../../../../../components/src/components/Templates/Chat");
+Object.defineProperty(exports, "Chat", { enumerable: true, get: function () { return Chat_1.Chat; } });

package/dist/cjs/src/Templates/Stores/library/components/ChatButton.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatButton = void 0;
+var ChatButton_1 = require("../../../../../components/src/components/Templates/ChatButton");
+Object.defineProperty(exports, "ChatButton", { enumerable: true, get: function () { return ChatButton_1.ChatButton; } });