npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.222 → 6.0.0-alpha.224 - Mend

@empathyco/x-components 6.0.0-alpha.222 → 6.0.0-alpha.224

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1969) hide show

package/js/x-installer/x-installer.js ADDED Viewed

@@ -0,0 +1,285 @@
+import { isFunction, forEach } from '@empathyco/x-utils';
+import { reactive, createApp } from 'vue';
+import { bus } from '../plugins/x-bus.js';
+import { XPlugin } from '../plugins/x-plugin.js';
+import { BaseXAPI } from './api/base-api.js';
+/**
+ * The purpose of this class is to offer a quick way to initialize the XComponents in a setup
+ * project. It allows to receive all the options in {@link InstallXOptions} which is an extension
+ * of {@link XPluginOptions} with all the options for the plugin and some options more.
+ *
+ * This class does multiple things:
+ * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.
+ * 2. Creates the public {@link XAPI} and add it to global window.
+ * 3. Creates the Vue Application for the customer project.
+ *
+ * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.
+ *
+ * @example The way to use this class is the next:
+ *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:
+ *
+ * ```
+ *        const installer = new XInstaller(installXOptions)
+ * ```
+ *
+ *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.
+ *       There are 3 different ways to do this:
+ *
+ *        2.1 Using the created installer:
+ *
+ * ```
+ *            installer.init(snippetConfig)
+ * ```
+ *
+ *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or
+ *            is not present as the default value is `true`) then this init step can be done with
+ *            the Public API:
+ *
+ * ```
+ *            window.InterfaceX.init(snippetConfig)
+ * ```
+ *
+ *        2.3 When the script of the project build is loaded it searches for a global `initX`
+ *            variable that the customer must have in their website. This variable can be a
+ *            function that returns the {@link SnippetConfig} or an object that contains the
+ *            {@link SnippetConfig} itself:
+ *
+ * ```
+ *            window.initX = function() {
+ *                 return {
+ *                   instance,
+ *                   env,
+ *                   scope,
+ *                   lang,
+ *                   uiLang,
+ *                   currency,
+ *                   consent,
+ *                   documentDirection
+ *                 };
+ *              };
+ * ```
+ *
+ * ```
+ *            window.initX = {
+ *                 instance,
+ *                 env,
+ *                 scope,
+ *                 lang,
+ *                 uiLang,
+ *                 currency,
+ *                 consent,
+ *                 documentDirection
+ *               };
+ * ```
+ *
+ * @public
+ */
+class XInstaller {
+    /**
+     * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also
+     * creates the public {@link XAPI}.
+     *
+     * @remarks Auto initializes the Vue application if window.initX is defined as a function or
+     * object specifying the {@link SnippetConfig | snippet config}.
+     *
+     *
+     * @param options - The {@link InstallXOptions}.
+     *
+     * @public
+     */
+    constructor(options) {
+        this.options = options;
+        this.createAPI();
+    }
+    /**
+     * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this
+     * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API
+     * creation the value `false` must be passed in the `api` option.
+     *
+     * @internal
+     */
+    createAPI() {
+        const { api } = this.options;
+        if (api !== false) {
+            this.api = api ?? new BaseXAPI();
+            // eslint-disable-next-line ts/no-misused-promises
+            this.api.setInitCallback(this.init.bind(this));
+            this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));
+            this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));
+            window.InterfaceX = this.api;
+        }
+    }
+    /**
+     * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.
+     *
+     * @returns The snippet config if it is defined or undefined otherwise.
+     *
+     * @internal
+     */
+    retrieveSnippetConfig() {
+        if (typeof window.initX === 'function') {
+            return window.initX();
+        }
+        else if (typeof window.initX === 'object') {
+            return window.initX;
+        }
+    }
+    async init(snippetConfig = this.retrieveSnippetConfig()) {
+        if (snippetConfig) {
+            this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));
+            this.createApp();
+            const bus = this.createBus();
+            const pluginOptions = this.getPluginOptions();
+            const plugin = this.installPlugin(pluginOptions, bus);
+            await this.installExtraPlugins(bus);
+            this.api?.setBus(bus);
+            this.app.mount(this.getMountingTarget(this.options.domElement));
+            return {
+                api: this.api,
+                app: this.app,
+                bus,
+                plugin,
+            };
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Creates the {@link XPluginOptions} object.
+     *
+     * @returns The {@link XPluginOptions} object.
+     *
+     * @internal
+     */
+    getPluginOptions() {
+        const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;
+        return {
+            adapter,
+            store,
+            xModules,
+            initialXModules,
+            __PRIVATE__xModules,
+        };
+    }
+    /**
+     * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.
+     * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then
+     * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.
+     *
+     * @returns XBus - The bus instance.
+     *
+     * @internal
+     */
+    createBus() {
+        return this.options.bus ?? bus;
+    }
+    /**
+     * Creates and install the Vue Plugin. If `plugin` parameter is passed in the
+     * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is
+     * created and installed.
+     *
+     * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method
+     * of the plugin.
+     * @param bus - The XBus to be used to create the XPlugin.
+     *
+     * @returns Plugin<XPluginOption> - The plugin instance.
+     * @internal
+     */
+    installPlugin(pluginOptions, bus) {
+        const plugin = this.options.plugin ?? new XPlugin(bus);
+        this.app.use(plugin, pluginOptions);
+        return plugin;
+    }
+    /**
+     * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}
+     * to allow the user to install more plugins to the App.
+     *
+     * @param bus - The events bus used in the application.
+     * @returns An empty promise.
+     * @internal
+     */
+    async installExtraPlugins(bus) {
+        return Promise.resolve(this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig, bus }));
+    }
+    /**
+     * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},
+     * then a new Vue application is created using that component as root.
+     *
+     * @internal
+     */
+    createApp() {
+        if (this.options.rootComponent !== undefined) {
+            this.app = createApp(this.options.rootComponent);
+            this.app.provide('snippetConfig', this.snippetConfig);
+            this.options.onCreateApp?.(this.app);
+        }
+    }
+    /**
+     * Transforms the snippet configuration.
+     * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.
+     *
+     * @param snippetConfig - The snippet config to normalise.
+     * @returns The normalised version of the given snippet config.
+     * @internal
+     */
+    normaliseSnippetConfig(snippetConfig) {
+        if (snippetConfig.lang) {
+            snippetConfig.uiLang ?? (snippetConfig.uiLang = snippetConfig.lang);
+        }
+        return snippetConfig;
+    }
+    /**
+     * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in
+     * the {@link InstallXOptions} is an Element or an element selector, then this will be used.
+     * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which
+     * returns an Element or element selector to use.
+     * If it is not present, a new <div> Element is created and appended to the body.
+     *
+     * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+     * used to mount the Vue Application.
+     *
+     * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
+     * @internal
+     */
+    getMountingTarget(domElement) {
+        if (isFunction(domElement)) {
+            domElement = domElement(this.snippetConfig);
+        }
+        if (typeof domElement === 'string') {
+            const target = document.querySelector(domElement);
+            if (!target) {
+                throw new Error(`XComponents app couldn't be mounted: Element "${domElement}" couldn't be found`);
+            }
+            return target;
+        }
+        return domElement ?? document.body.appendChild(document.createElement('div'));
+    }
+    /**
+     * It updates all the provided properties from the current snippet config.
+     *
+     * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.
+     *
+     * @internal
+     */
+    updateSnippetConfig(newSnippetConfig) {
+        if (!this.snippetConfig) {
+            return;
+        }
+        forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {
+            this.snippetConfig[name] = value;
+        });
+    }
+    /**
+     * Getter for the snippet config object.
+     *
+     * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.
+     *
+     * @public
+     */
+    getSnippetConfig() {
+        return this.snippetConfig;
+    }
+}
+export { XInstaller };
+//# sourceMappingURL=x-installer.js.map

package/js/x-installer/x-installer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"x-installer.js","sources":["../../../src/x-installer/x-installer.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport type { XPluginOptions } from '../plugins/x-plugin.types'\nimport type { WireMetadata, XEventsTypes } from '../wiring/index'\nimport type { XBus } from '../x-bus'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api/api.types'\nimport type { InitWrapper, InstallXOptions } from './types'\nimport { forEach, isFunction } from '@empathyco/x-utils'\nimport { createApp, reactive } from 'vue'\nimport { bus } from '../plugins/x-bus'\nimport { XPlugin } from '../plugins/x-plugin'\nimport { BaseXAPI } from './api/base-api'\n\ndeclare global {\n interface Window {\n InterfaceX?: XAPI\n initX?: (() => SnippetConfig) | SnippetConfig\n }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n * const installer = new XInstaller(installXOptions)\n * ```\n *\n * 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n *\n * 2.1 Using the created installer:\n *\n * ```\n * installer.init(snippetConfig)\n * ```\n *\n * 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n *\n * ```\n * window.InterfaceX.init(snippetConfig)\n * ```\n *\n * 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their website. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n *\n * ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n *\n * ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n private app!: App\n private api?: XAPI\n\n /**\n * The configuration coming from the snippet {@link SnippetConfig}.\n *\n * @internal\n */\n protected snippetConfig?: NormalisedSnippetConfig\n\n /**\n * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n *\n * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig | snippet config}.\n *\n *\n * @param options - The {@link InstallXOptions}.\n *\n * @public\n */\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI()\n }\n\n /**\n * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n *\n * @internal\n */\n protected createAPI(): void {\n const { api } = this.options\n if (api !== false) {\n this.api = api ?? new BaseXAPI()\n // eslint-disable-next-line ts/no-misused-promises\n this.api.setInitCallback(this.init.bind(this))\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this))\n this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this))\n window.InterfaceX = this.api\n }\n }\n\n /**\n * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n *\n * @returns The snippet config if it is defined or undefined otherwise.\n *\n * @internal\n */\n private retrieveSnippetConfig(): SnippetConfig | undefined {\n if (typeof window.initX === 'function') {\n return window.initX()\n } else if (typeof window.initX === 'object') {\n return window.initX\n }\n }\n\n /**\n * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n *\n * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n *\n * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the XBus, the {@link XPlugin}\n * and the Vue application instance. Else, a rejected promise is returned.\n *\n * @public\n */\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>\n init(): Promise<InitWrapper | void>\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n if (snippetConfig) {\n this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig))\n this.createApp()\n const bus = this.createBus()\n const pluginOptions = this.getPluginOptions()\n const plugin = this.installPlugin(pluginOptions, bus)\n await this.installExtraPlugins(bus)\n this.api?.setBus(bus)\n this.app.mount(this.getMountingTarget(this.options.domElement))\n\n return {\n api: this.api,\n app: this.app,\n bus,\n plugin,\n }\n }\n\n return Promise.resolve()\n }\n\n /**\n * Creates the {@link XPluginOptions} object.\n *\n * @returns The {@link XPluginOptions} object.\n *\n * @internal\n */\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules,\n }\n }\n\n /**\n * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n *\n * @returns XBus - The bus instance.\n *\n * @internal\n */\n protected createBus(): XBus<XEventsTypes, WireMetadata> {\n return this.options.bus ?? bus\n }\n\n /**\n * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n *\n * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The XBus to be used to create the XPlugin.\n *\n * @returns Plugin<XPluginOption> - The plugin instance.\n * @internal\n */\n protected installPlugin(\n pluginOptions: XPluginOptions,\n bus: XBus<XEventsTypes, WireMetadata>,\n ): Plugin<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus)\n this.app.use(plugin, pluginOptions)\n return plugin\n }\n\n /**\n * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n * to allow the user to install more plugins to the App.\n *\n * @param bus - The events bus used in the application.\n * @returns An empty promise.\n * @internal\n */\n protected async installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n return Promise.resolve(\n this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus }),\n )\n }\n\n /**\n * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n * then a new Vue application is created using that component as root.\n *\n * @internal\n */\n protected createApp(): void {\n if (this.options.rootComponent !== undefined) {\n this.app = createApp(this.options.rootComponent)\n this.app.provide('snippetConfig', this.snippetConfig)\n this.options.onCreateApp?.(this.app)\n }\n }\n\n protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig\n protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>\n /**\n * Transforms the snippet configuration.\n * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n *\n * @param snippetConfig - The snippet config to normalise.\n * @returns The normalised version of the given snippet config.\n * @internal\n */\n protected normaliseSnippetConfig(\n snippetConfig: SnippetConfig | Partial<SnippetConfig>,\n ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n if (snippetConfig.lang) {\n snippetConfig.uiLang ??= snippetConfig.lang\n }\n return snippetConfig\n }\n\n /**\n * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n * returns an Element or element selector to use.\n * If it is not present, a new <div> Element is created and appended to the body.\n *\n * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function\n * used to mount the Vue Application.\n *\n * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n * @internal\n */\n protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {\n if (isFunction(domElement)) {\n domElement = domElement(this.snippetConfig!)\n }\n if (typeof domElement === 'string') {\n const target = document.querySelector(domElement)\n if (!target) {\n throw new Error(\n `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`,\n )\n }\n return target\n }\n return domElement ?? document.body.appendChild(document.createElement('div'))\n }\n\n /**\n * It updates all the provided properties from the current snippet config.\n *\n * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n *\n * @internal\n */\n protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n if (!this.snippetConfig) {\n return\n }\n forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n this.snippetConfig![name] = value\n })\n }\n\n /**\n * Getter for the snippet config object.\n *\n * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n *\n * @public\n */\n protected getSnippetConfig(): NormalisedSnippetConfig {\n return this.snippetConfig!\n }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/ai/components/ai-carousel.vue2.js CHANGED Viewed

@@ -98,13 +98,9 @@ import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import { useState } from '../../../composables/use-state.js';
 import { aiXModule } from '../x-module.js';

package/js/x-modules/ai/components/ai-carousel.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n <DisplayEmitter\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query \|\| 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-display-emitter\"\n >\n <span\n class=\"x-ai-carousel-title\"\n :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n data-test=\"ai-carousel-title\"\n @click=\"toggleTitleExpansion\"\n >\n <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n <ChangeHeight>\n <span\n ref=\"titleRef\"\n class=\"x-ai-carousel-title-text\"\n :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n >\n {{ title }}\n </span>\n </ChangeHeight>\n <button\n v-if=\"isTitleOverflowing\"\n class=\"x-ai-carousel-title-button\"\n data-test=\"ai-carousel-title-button\"\n :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n >\n <ChevronDownIcon\n class=\"x-ai-carousel-title-button-icon\"\n :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n />\n </button>\n </span>\n </DisplayEmitter>\n <slot name=\"sliding-panel\" :suggestions=\"suggestionsSearch\" :tagging=\"tagging\">\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <div class=\"x-flex x-gap-8\">\n <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <li\n v-for=\"result in suggestion.results\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </DisplayClickProvider>\n </ul>\n </div>\n </SlidingPanel>\n </slot>\n <slot name=\"extra-content\" />\n <slot name=\"cta-button\" />\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n SlidingPanel,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n ChangeHeight,\n DisplayClickProvider,\n DisplayEmitter,\n CollapseHeight,\n AIStarIcon,\n ChevronDownIcon,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: {\n type: String,\n },\n / The classes added to the sliding panel. /\n slidingPanelClasses: {\n type: String,\n },\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: {\n type: String,\n },\n / The classes added to the sliding panel buttons. /\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai')\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const titleRef = ref<HTMLElement \| null>(null)\n const titleExpanded = ref(false)\n const isTitleOverflowing = ref(false)\n\n /\n Checks if the title is overflowing and updates the state.\n /\n function updateTitleOverflow() {\n if (titleExpanded.value) {\n return\n }\n if (titleRef.value) {\n isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n }\n }\n\n /\n Toggles the title expanded state if it is overflowing.\n */\n function toggleTitleExpansion() {\n if (isTitleOverflowing.value) {\n titleExpanded.value = !titleExpanded.value\n }\n }\n\n const title = computed(() => {\n if (!props.title) {\n const queriesList = new Intl.ListFormat('en', {\n style: 'long',\n type: 'conjunction',\n }).format(queries.value.map(({ query }) => query))\n return `Searching for ${queriesList}`\n }\n return props.title\n })\n\n watch(queries, () => {\n if (queries.value.length > 0) {\n $x.emit('AiSuggestionsSearchRequestUpdated')\n }\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isNoResults,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-carousel {\n --color: var(--x-ai-carousel-color, #bbc9cf);\n --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n padding: 8px 0;\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n display: flex;\n font-size: 12px;\n gap: 8px;\n align-items: flex-start;\n margin: 0 14px 8px;\n cursor: pointer;\n}\n.x-ai-carousel-title-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n white-space: normal;\n}\n.x-ai-carousel-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color);\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n transform: rotate(180deg);\n}\n.x-ai-carousel-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":"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"}
1	+ {"version":3,"file":"ai-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n <DisplayEmitter\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query \|\| 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-display-emitter\"\n >\n <span\n class=\"x-ai-carousel-title\"\n :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n data-test=\"ai-carousel-title\"\n @click=\"toggleTitleExpansion\"\n >\n <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n <ChangeHeight>\n <span\n ref=\"titleRef\"\n class=\"x-ai-carousel-title-text\"\n :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n >\n {{ title }}\n </span>\n </ChangeHeight>\n <button\n v-if=\"isTitleOverflowing\"\n class=\"x-ai-carousel-title-button\"\n data-test=\"ai-carousel-title-button\"\n :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n >\n <ChevronDownIcon\n class=\"x-ai-carousel-title-button-icon\"\n :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n />\n </button>\n </span>\n </DisplayEmitter>\n <slot name=\"sliding-panel\" :suggestions=\"suggestionsSearch\" :tagging=\"tagging\">\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <div class=\"x-flex x-gap-8\">\n <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <li\n v-for=\"result in suggestion.results\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </DisplayClickProvider>\n </ul>\n </div>\n </SlidingPanel>\n </slot>\n <slot name=\"extra-content\" />\n <slot name=\"cta-button\" />\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n SlidingPanel,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n ChangeHeight,\n DisplayClickProvider,\n DisplayEmitter,\n CollapseHeight,\n AIStarIcon,\n ChevronDownIcon,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: {\n type: String,\n },\n / The classes added to the sliding panel. /\n slidingPanelClasses: {\n type: String,\n },\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: {\n type: String,\n },\n / The classes added to the sliding panel buttons. /\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai')\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const titleRef = ref<HTMLElement \| null>(null)\n const titleExpanded = ref(false)\n const isTitleOverflowing = ref(false)\n\n /\n Checks if the title is overflowing and updates the state.\n /\n function updateTitleOverflow() {\n if (titleExpanded.value) {\n return\n }\n if (titleRef.value) {\n isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n }\n }\n\n /\n Toggles the title expanded state if it is overflowing.\n */\n function toggleTitleExpansion() {\n if (isTitleOverflowing.value) {\n titleExpanded.value = !titleExpanded.value\n }\n }\n\n const title = computed(() => {\n if (!props.title) {\n const queriesList = new Intl.ListFormat('en', {\n style: 'long',\n type: 'conjunction',\n }).format(queries.value.map(({ query }) => query))\n return `Searching for ${queriesList}`\n }\n return props.title\n })\n\n watch(queries, () => {\n if (queries.value.length > 0) {\n $x.emit('AiSuggestionsSearchRequestUpdated')\n }\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isNoResults,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-carousel {\n --color: var(--x-ai-carousel-color, #bbc9cf);\n --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n padding: 8px 0;\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n display: flex;\n font-size: 12px;\n gap: 8px;\n align-items: flex-start;\n margin: 0 14px 8px;\n cursor: pointer;\n}\n.x-ai-carousel-title-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n white-space: normal;\n}\n.x-ai-carousel-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color);\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n transform: rotate(180deg);\n}\n.x-ai-carousel-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":"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"}

package/js/x-modules/ai/components/ai-overview.vue2.js CHANGED Viewed

@@ -99,15 +99,11 @@ import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
 import { useGetter } from '../../../composables/use-getter.js';
 import '@vueuse/core';
+import 'rxjs';
 import { useState } from '../../../composables/use-state.js';
 import { typing } from '../../../directives/typing.js';
 import { aiXModule } from '../x-module.js';

package/js/x-modules/ai/components/ai-overview.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query \|\| 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content-wrapper\">\n <span\n v-if=\"title\"\n class=\"x-ai-overview-content-title\"\n data-test=\"ai-overview-content-title\"\n >{{ suggestionText }}\n </span>\n <div\n :class=\"contentClasses\"\n data-test=\"ai-overview-content\"\n v-html=\"parsedResponseText\"\n />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <div v-show=\"expanded\">\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div\n v-else\n class=\"x-ai-overview-suggestions\"\n data-test=\"ai-overview-suggestions-container\"\n >\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n \"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query \|\| 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </div>\n </CollapseHeight>\n\n <Fade>\n <div\n v-if=\"queries.length\"\n class=\"x-ai-overview-toggle-btn-wrapper x-cursor-pointer\"\n data-test=\"ai-overview-toggle-button-wrapper\"\n @click=\"!$slots['cta-button'] && emitAndSetExpand(!expanded)\"\n >\n <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n <slot name=\"cta-button\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click.stop=\"emitAndSetExpand(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n />\n </button>\n </slot>\n </div>\n </Fade>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChevronDownIcon,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading /\n title: {\n type: String,\n },\n / The text displayed when the question is loading. /\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n / The text displayed on the toggle button when collapsed. /\n expandText: {\n type: String,\n default: 'Show more',\n },\n / The text displayed on the toggle button when expanded. /\n collapseText: {\n type: String,\n default: 'Show less',\n },\n / Auto expand the AI Overview when there are queries in AI and no-results in search. /\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n / The classes added to the parsed response text container. /\n contentClasses: {\n type: String,\n },\n / The classes added to each sliding panel for each query. /\n slidingPanelsClasses: {\n type: String,\n },\n / The classes added to each sliding panel container of each query. /\n slidingPanelContainersClasses: {\n type: String,\n },\n / The classes added to each sliding panel button of each query. /\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n isNoResults,\n queries,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement \| null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function emitAndSetExpand(isExpanded: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n\n expanded.value = isExpanded\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n / Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n the request for suggestions has ended; there are queries in AI and no-results in search. */\n watch([suggestionsLoading, () => $x.noResults], () => {\n if (\n props.autoExpandInSearchNoResults &&\n !suggestionsLoading.value &&\n queries.value.length &&\n $x.noResults\n ) {\n emitAndSetExpand(true)\n }\n })\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n emitAndSetExpand,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n max-width: var(--x-ai-overview-main-max-width, none);\n margin: 0 auto;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content-wrapper {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n}\n\n.x-ai-overview-content-title {\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-btn-wrapper {\n display: flex;\n justify-content: center;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n\n<docs lang=\"mdx\">\n## AI Overview Examples\n\nThe `ai-overview` component provides an AI-generated summary and suggestions for queries.\n\n### Basic usage\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Generating with Empathy AI'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n :content-classes=\"'my-content-class'\"\n :sliding-panels-classes=\"'my-sliding-panel-class'\"\n :sliding-panel-containers-classes=\"'my-sliding-panel-container-class'\"\n :sliding-panel-buttons-classes=\"'my-sliding-panel-button-class'\"\n >\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n\n### Customizing slots\n\nYou can customize the loading title, extra content, and sliding panel slots:\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Loading... Please wait'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n >\n <template #title-loading>\n <span>Custom loading title...</span>\n </template>\n <template #extra-content>\n <div>Extra content below the main overview</div>\n </template>\n <template #sliding-panels-addons=\"{ arrivedState }\">\n <span v-if=\"arrivedState.left\">Left end reached</span>\n <span v-if=\"arrivedState.right\">Right end reached</span>\n </template>\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n</docs>\n"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}
1	+ {"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query \|\| 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content-wrapper\">\n <span\n v-if=\"title\"\n class=\"x-ai-overview-content-title\"\n data-test=\"ai-overview-content-title\"\n >{{ suggestionText }}\n </span>\n <div\n :class=\"contentClasses\"\n data-test=\"ai-overview-content\"\n v-html=\"parsedResponseText\"\n />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <div v-show=\"expanded\">\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div\n v-else\n class=\"x-ai-overview-suggestions\"\n data-test=\"ai-overview-suggestions-container\"\n >\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n \"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query \|\| 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </div>\n </CollapseHeight>\n\n <Fade>\n <div\n v-if=\"queries.length\"\n class=\"x-ai-overview-toggle-btn-wrapper x-cursor-pointer\"\n data-test=\"ai-overview-toggle-button-wrapper\"\n @click=\"!$slots['cta-button'] && emitAndSetExpand(!expanded)\"\n >\n <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n <slot name=\"cta-button\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click.stop=\"emitAndSetExpand(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n />\n </button>\n </slot>\n </div>\n </Fade>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChevronDownIcon,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading /\n title: {\n type: String,\n },\n / The text displayed when the question is loading. /\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n / The text displayed on the toggle button when collapsed. /\n expandText: {\n type: String,\n default: 'Show more',\n },\n / The text displayed on the toggle button when expanded. /\n collapseText: {\n type: String,\n default: 'Show less',\n },\n / Auto expand the AI Overview when there are queries in AI and no-results in search. /\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n / The classes added to the parsed response text container. /\n contentClasses: {\n type: String,\n },\n / The classes added to each sliding panel for each query. /\n slidingPanelsClasses: {\n type: String,\n },\n / The classes added to each sliding panel container of each query. /\n slidingPanelContainersClasses: {\n type: String,\n },\n / The classes added to each sliding panel button of each query. /\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n isNoResults,\n queries,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement \| null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function emitAndSetExpand(isExpanded: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n\n expanded.value = isExpanded\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n / Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n the request for suggestions has ended; there are queries in AI and no-results in search. */\n watch([suggestionsLoading, () => $x.noResults], () => {\n if (\n props.autoExpandInSearchNoResults &&\n !suggestionsLoading.value &&\n queries.value.length &&\n $x.noResults\n ) {\n emitAndSetExpand(true)\n }\n })\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n emitAndSetExpand,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n max-width: var(--x-ai-overview-main-max-width, none);\n margin: 0 auto;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content-wrapper {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n}\n\n.x-ai-overview-content-title {\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-btn-wrapper {\n display: flex;\n justify-content: center;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n\n<docs lang=\"mdx\">\n## AI Overview Examples\n\nThe `ai-overview` component provides an AI-generated summary and suggestions for queries.\n\n### Basic usage\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Generating with Empathy AI'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n :content-classes=\"'my-content-class'\"\n :sliding-panels-classes=\"'my-sliding-panel-class'\"\n :sliding-panel-containers-classes=\"'my-sliding-panel-container-class'\"\n :sliding-panel-buttons-classes=\"'my-sliding-panel-button-class'\"\n >\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n\n### Customizing slots\n\nYou can customize the loading title, extra content, and sliding panel slots:\n\n```vue\n<template>\n <AiOverview\n :title=\"'AI Overview'\"\n :title-loading=\"'Loading... Please wait'\"\n :expand-text=\"'Show more'\"\n :collapse-text=\"'Show less'\"\n >\n <template #title-loading>\n <span>Custom loading title...</span>\n </template>\n <template #extra-content>\n <div>Extra content below the main overview</div>\n </template>\n <template #sliding-panels-addons=\"{ arrivedState }\">\n <span v-if=\"arrivedState.left\">Left end reached</span>\n <span v-if=\"arrivedState.right\">Right end reached</span>\n </template>\n <template #result=\"{ result }\">\n <ResultCard :result=\"result\" />\n </template>\n </AiOverview>\n</template>\n\n<script setup>\nimport AiOverview from '@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue'\nimport ResultCard from './ResultCard.vue'\n</script>\n```\n</docs>\n"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4MA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;IACD,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,cAAc;QACd,eAAe;QACf,eAAe;QACf,cAAc;QACd,YAAY;QACZ,IAAI;QACJ,YAAY;QACZ,WAAW;wBACXA,WAAc;8BACdC,WAAoB;AACrB,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,4BAA4B;AACtC,SAAA;;AAED,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,2BAA2B,EAAE;AAC3B,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,cAAc,EAAE;AACd,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,6BAA6B,EAAE;AAC7B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,0BAA0B,EAAE;AAC1B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QACjB,MAAM,EAAE,KAAI,EAAE,GAAI,SAAS,CAAC,IAAI,CAAA;QAChC,MAAM,EACJ,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,WAAW,EACX,OAAO,GACT,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEjB,MAAM,mBAAmB,GAAmB,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAC,EAAE;AAElE,QAAA,MAAM,gBAAgB,GAAG,CAAwB,IAAI,CAAA;AACrD,QAAA,MAAM,QAAO,GAAI,GAAG,CAAC,KAAK,CAAA;AAC1B,QAAA,MAAM,uBAAsB,GAAI,GAAG,CAAC,IAAI,CAAA;AACxC,QAAA,MAAM,qBAAqB,QAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;QAE1E,MAAM,UAAS,GAAI,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,YAAW,GAAI,KAAK,CAAC,UAAU,CAAC,CAAA;QAE1F,SAAS,gBAAgB,CAAC,UAAmB,EAAA;YAC3C,EAAE,CAAC,IAAI,CAAC,mCAAmC,EAAE,QAAQ,CAAC,KAAK,EAAE;gBAC3D,cAAc,EAAE,cAAc,CAAC,KAAK;AACpC,gBAAA,mBAAmB,EAAE,OAAO,CAAC,KAAK,EAAE,mBAAmB;AACxD,aAAA,CAAA;AAED,YAAA,QAAQ,CAAC,KAAI,GAAI,UAAS;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;gBACnB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAO,EAAG,CAAA;AAC1D,gBAAA,uBAAuB,CAAC,KAAI,GAAI,KAAI;YACtC;QACF;AAEA;AAC0F;AAC1F,QAAA,KAAK,CAAC,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,MAAI;YAClD,IACE,KAAK,CAAC;gBACN,CAAC,kBAAkB,CAAC,KAAI;gBACxB,OAAO,CAAC,KAAK,CAAC;gBACd,EAAE,CAAC,SAAQ,EACX;gBACA,gBAAgB,CAAC,IAAI,CAAA;YACvB;AACF,QAAA,CAAC,CAAA;QAED,EAAE,CAAC,EAAE,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAI;AACxD,YAAA,QAAQ,CAAC,KAAI,GAAI,KAAI;AACrB,YAAA,uBAAuB,CAAC,KAAI,GAAI,IAAG;AACrC,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,UAAS,EAAG,CAAA;AAClE,QAAA,CAAC,CAAA;QAED,OAAO;YACL,aAAa;YACb,UAAU;YACV,mBAAmB;YACnB,QAAQ;YACR,kBAAkB;YAClB,kBAAkB;YAClB,iBAAiB;YACjB,cAAc;YACd,gBAAgB;YAChB,uBAAuB;YACvB,KAAK;YACL,OAAO;YACP,WAAW;YACX,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.js CHANGED Viewed

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../../plugins/devtools/colors.utils.js';
 import '../../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../../../plugins/x-plugin.js';
 /**

package/js/x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fetch-and-save-ai-suggestions-search.action.js","sources":["../../../../../../src/x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.ts"],"sourcesContent":["import type { AiXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/*\n Default implementation for the `AiActions.fetchAndSaveAiSuggestionsSearch`.\n \n @param _ - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the commits and\n * getters provided by Vuex.\n * @returns The AI search response.\n * @public\n */\nexport const fetchAndSaveAiSuggestionsSearch: AiXStoreModule['actions']['fetchAndSaveAiSuggestionsSearch'] =\n async ({ commit, getters }) => {\n const request = getters.suggestionsSearchRequest\n if (!request) {\n return\n }\n commit('setSuggestionsSearchLoading', true)\n\n return XPlugin.adapter\n .aiSuggestionsSearch(request)\n .then(response => {\n if (response) {\n commit('setSuggestionsSearch', response.suggestions)\n }\n })\n .catch(error => {\n console.error(error)\n })\n .finally(() => {\n commit('setSuggestionsSearchLoading', false)\n })\n }\n"],"names":[],"mappings":"~~;;;;;;;;;~~AAGA;;;;;;;AAOG;AACI,MAAM,+BAA+B,GAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAI;AAC5B,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,wBAAwB;IAChD,IAAI,CAAC,OAAO,EAAE;QACZ;IACF;AACA,IAAA,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC;IAE3C,OAAO,OAAO,CAAC;SACZ,mBAAmB,CAAC,OAAO;SAC3B,IAAI,CAAC,QAAQ,IAAG;QACf,IAAI,QAAQ,EAAE;AACZ,YAAA,MAAM,CAAC,sBAAsB,EAAE,QAAQ,CAAC,WAAW,CAAC;QACtD;AACF,IAAA,CAAC;SACA,KAAK,CAAC,KAAK,IAAG;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC;SACA,OAAO,CAAC,MAAK;AACZ,QAAA,MAAM,CAAC,6BAA6B,EAAE,KAAK,CAAC;AAC9C,IAAA,CAAC,CAAC;AACN;;;;"}
1	+ {"version":3,"file":"fetch-and-save-ai-suggestions-search.action.js","sources":["../../../../../../src/x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.ts"],"sourcesContent":["import type { AiXStoreModule } from '../types'\nimport { XPlugin } from '../../../../plugins'\n\n/*\n Default implementation for the `AiActions.fetchAndSaveAiSuggestionsSearch`.\n \n @param _ - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the commits and\n * getters provided by Vuex.\n * @returns The AI search response.\n * @public\n */\nexport const fetchAndSaveAiSuggestionsSearch: AiXStoreModule['actions']['fetchAndSaveAiSuggestionsSearch'] =\n async ({ commit, getters }) => {\n const request = getters.suggestionsSearchRequest\n if (!request) {\n return\n }\n commit('setSuggestionsSearchLoading', true)\n\n return XPlugin.adapter\n .aiSuggestionsSearch(request)\n .then(response => {\n if (response) {\n commit('setSuggestionsSearch', response.suggestions)\n }\n })\n .catch(error => {\n console.error(error)\n })\n .finally(() => {\n commit('setSuggestionsSearchLoading', false)\n })\n }\n"],"names":[],"mappings":";;;;AAGA;;;;;;;AAOG;AACI,MAAM,+BAA+B,GAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAI;AAC5B,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,wBAAwB;IAChD,IAAI,CAAC,OAAO,EAAE;QACZ;IACF;AACA,IAAA,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC;IAE3C,OAAO,OAAO,CAAC;SACZ,mBAAmB,CAAC,OAAO;SAC3B,IAAI,CAAC,QAAQ,IAAG;QACf,IAAI,QAAQ,EAAE;AACZ,YAAA,MAAM,CAAC,sBAAsB,EAAE,QAAQ,CAAC,WAAW,CAAC;QACtD;AACF,IAAA,CAAC;SACA,KAAK,CAAC,KAAK,IAAG;AACb,QAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC;SACA,OAAO,CAAC,MAAK;AACZ,QAAA,MAAM,CAAC,6BAA6B,EAAE,KAAK,CAAC;AAC9C,IAAA,CAAC,CAAC;AACN;;;;"}

package/js/x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.js CHANGED Viewed

@@ -1,11 +1,6 @@
 import { getTaggingInfoFromUrl } from '@empathyco/x-adapter-platform';
-import '@vue/devtools-api';
-import '../../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../../plugins/devtools/colors.utils.js';
 import '../../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../../../plugins/x-plugin.js';
 /**

package/js/x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fetch-and-save-ai-suggestions.action.js","sources":["../../../../../../src/x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.ts"],"sourcesContent":["import type { AiSuggestionQuery, AiSuggestionTagging } from '@empathyco/x-types'\nimport type { AiActionContext, AiXStoreModule } from '../types'\nimport { getTaggingInfoFromUrl } from '@empathyco/x-adapter-platform'\nimport { XPlugin } from '../../../../plugins'\n\ninterface TaggingData {\n tagging: {\n toolingDisplay: string\n toolingDisplayClick: string\n searchQueries: Record<\n string,\n {\n toolingDisplay: string\n toolingDisplayClick: string\n toolingDisplayAdd2Cart: string\n }\n >\n }[]\n}\n\ntype AnswerData =\n \| { responseText: string }\n \| { suggestionText: string }\n \| { queries: AiSuggestionQuery[] }\n \| TaggingData\n\n/*\n Default implementation for the {@link AiActions.fetchAndSaveAiSuggestions}.\n \n @param _ - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param request - The AI request to make.\n * @returns The AI response.\n * @public\n */\nexport const fetchAndSaveAiSuggestions: AiXStoreModule['actions']['fetchAndSaveAiSuggestions'] =\n async ({ commit }, request) => {\n if (!request) {\n return\n }\n commit('setSuggestionsLoading', true)\n\n const queryWords = request.query.split(/\\s+/).filter(Boolean).length\n\n const endpointAdapterFn =\n queryWords >= 2 ? XPlugin.adapter.aiSuggestions : XPlugin.adapter.aiSummarize\n\n return endpointAdapterFn(request).then(({ body, status }) => {\n if (status !== 200) {\n return\n }\n if (body) {\n const reader = body.getReader()\n readAnswer(reader, commit)\n }\n })\n }\n\nfunction mapTaggingData(tangingData: TaggingData): AiSuggestionTagging {\n const { toolingDisplay, toolingDisplayClick, searchQueries } = tangingData.tagging[0]\n // TODO: Using the getTaggingInfoFromUrl util here is a temporary solution.\n // It creates a dependency with the x-adapter-platform project that should be avoided.\n return {\n toolingDisplay: getTaggingInfoFromUrl(toolingDisplay),\n toolingDisplayClick: getTaggingInfoFromUrl(toolingDisplayClick),\n searchQueries: Object.fromEntries(\n Object.entries(searchQueries).map(\n ([query, { toolingDisplay, toolingDisplayClick, toolingDisplayAdd2Cart }]) => [\n query,\n {\n toolingDisplay: getTaggingInfoFromUrl(toolingDisplay),\n toolingDisplayClick: getTaggingInfoFromUrl(toolingDisplayClick),\n toolingDisplayAdd2Cart: getTaggingInfoFromUrl(toolingDisplayAdd2Cart),\n },\n ],\n ),\n ),\n }\n}\n\nfunction readAnswer(\n reader: ReadableStreamDefaultReader<Uint8Array>,\n commit: AiActionContext['commit'],\n): void {\n reader\n .read()\n .then(({ value, done }) => {\n if (done) {\n commit('setSuggestionsLoading', false)\n return\n }\n\n const result = new TextDecoder().decode(value, { stream: true })\n const parts = result.split('\\n\\n')\n for (const part of parts) {\n const lines = part.split('\\n')\n\n for (const line of lines) {\n // line.length check to avoid event lines or empty lines\n if (line.length <= 5 \|\| line.startsWith('event:')) continue\n\n const raw = line.startsWith('data:') ? line.slice(5).trim() : line.trim()\n const data = JSON.parse(raw) as AnswerData\n\n if ('suggestionText' in data) {\n commit('setIsNoResults', false)\n commit('setSuggestionText', data.suggestionText)\n }\n if ('responseText' in data) {\n commit('setIsNoResults', false)\n commit('setResponseText', data.responseText)\n }\n if ('queries' in data) {\n commit('setQueries', data.queries)\n }\n if ('tagging' in data) {\n commit('setTagging', mapTaggingData(data))\n }\n }\n }\n readAnswer(reader, commit)\n })\n .catch((error: { code: number }) => {\n commit('setSuggestionsLoading', false)\n // AbortError code === 20\n if (error.code !== 20) {\n console.error(error)\n }\n })\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"fetch-and-save-ai-suggestions.action.js","sources":["../../../../../../src/x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.ts"],"sourcesContent":["import type { AiSuggestionQuery, AiSuggestionTagging } from '@empathyco/x-types'\nimport type { AiActionContext, AiXStoreModule } from '../types'\nimport { getTaggingInfoFromUrl } from '@empathyco/x-adapter-platform'\nimport { XPlugin } from '../../../../plugins'\n\ninterface TaggingData {\n tagging: {\n toolingDisplay: string\n toolingDisplayClick: string\n searchQueries: Record<\n string,\n {\n toolingDisplay: string\n toolingDisplayClick: string\n toolingDisplayAdd2Cart: string\n }\n >\n }[]\n}\n\ntype AnswerData =\n \| { responseText: string }\n \| { suggestionText: string }\n \| { queries: AiSuggestionQuery[] }\n \| TaggingData\n\n/*\n Default implementation for the {@link AiActions.fetchAndSaveAiSuggestions}.\n \n @param _ - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param request - The AI request to make.\n * @returns The AI response.\n * @public\n */\nexport const fetchAndSaveAiSuggestions: AiXStoreModule['actions']['fetchAndSaveAiSuggestions'] =\n async ({ commit }, request) => {\n if (!request) {\n return\n }\n commit('setSuggestionsLoading', true)\n\n const queryWords = request.query.split(/\\s+/).filter(Boolean).length\n\n const endpointAdapterFn =\n queryWords >= 2 ? XPlugin.adapter.aiSuggestions : XPlugin.adapter.aiSummarize\n\n return endpointAdapterFn(request).then(({ body, status }) => {\n if (status !== 200) {\n return\n }\n if (body) {\n const reader = body.getReader()\n readAnswer(reader, commit)\n }\n })\n }\n\nfunction mapTaggingData(tangingData: TaggingData): AiSuggestionTagging {\n const { toolingDisplay, toolingDisplayClick, searchQueries } = tangingData.tagging[0]\n // TODO: Using the getTaggingInfoFromUrl util here is a temporary solution.\n // It creates a dependency with the x-adapter-platform project that should be avoided.\n return {\n toolingDisplay: getTaggingInfoFromUrl(toolingDisplay),\n toolingDisplayClick: getTaggingInfoFromUrl(toolingDisplayClick),\n searchQueries: Object.fromEntries(\n Object.entries(searchQueries).map(\n ([query, { toolingDisplay, toolingDisplayClick, toolingDisplayAdd2Cart }]) => [\n query,\n {\n toolingDisplay: getTaggingInfoFromUrl(toolingDisplay),\n toolingDisplayClick: getTaggingInfoFromUrl(toolingDisplayClick),\n toolingDisplayAdd2Cart: getTaggingInfoFromUrl(toolingDisplayAdd2Cart),\n },\n ],\n ),\n ),\n }\n}\n\nfunction readAnswer(\n reader: ReadableStreamDefaultReader<Uint8Array>,\n commit: AiActionContext['commit'],\n): void {\n reader\n .read()\n .then(({ value, done }) => {\n if (done) {\n commit('setSuggestionsLoading', false)\n return\n }\n\n const result = new TextDecoder().decode(value, { stream: true })\n const parts = result.split('\\n\\n')\n for (const part of parts) {\n const lines = part.split('\\n')\n\n for (const line of lines) {\n // line.length check to avoid event lines or empty lines\n if (line.length <= 5 \|\| line.startsWith('event:')) continue\n\n const raw = line.startsWith('data:') ? line.slice(5).trim() : line.trim()\n const data = JSON.parse(raw) as AnswerData\n\n if ('suggestionText' in data) {\n commit('setIsNoResults', false)\n commit('setSuggestionText', data.suggestionText)\n }\n if ('responseText' in data) {\n commit('setIsNoResults', false)\n commit('setResponseText', data.responseText)\n }\n if ('queries' in data) {\n commit('setQueries', data.queries)\n }\n if ('tagging' in data) {\n commit('setTagging', mapTaggingData(data))\n }\n }\n }\n readAnswer(reader, commit)\n })\n .catch((error: { code: number }) => {\n commit('setSuggestionsLoading', false)\n // AbortError code === 20\n if (error.code !== 20) {\n console.error(error)\n }\n })\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/ai/x-module.js CHANGED Viewed

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { aiEmitters } from './store/emitters.js';
 import { aiXStoreModule } from './store/module.js';

package/js/x-modules/ai/x-module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/ai/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { AiXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins'\nimport { aiEmitters } from './store/emitters'\nimport { aiXStoreModule } from './store/module'\nimport { aiWiring } from './wiring'\n\n/*\n Ai {@link XModule} alias.\n \n @public\n /\nexport type AiXModule = XModule<AiXStoreModule>\n\n/\n AI {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `AI` entry point.\n \n @public\n */\nexport const aiXModule: AiXModule = {\n name: 'ai',\n storeModule: aiXStoreModule,\n storeEmitters: aiEmitters,\n wiring: aiWiring,\n}\n\nXPlugin.registerXModule(aiXModule)\n"],"names":[],"mappings":"~~;;;;;;;;;;;;~~AAcA;;;;;AAKG;AACI,MAAM,SAAS,GAAc;AAClC,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,WAAW,EAAE,cAAc;AAC3B,IAAA,aAAa,EAAE,UAAU;AACzB,IAAA,MAAM,EAAE,QAAQ;;AAGlB,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC;;;;"}
1	+ {"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/ai/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { AiXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins'\nimport { aiEmitters } from './store/emitters'\nimport { aiXStoreModule } from './store/module'\nimport { aiWiring } from './wiring'\n\n/*\n Ai {@link XModule} alias.\n \n @public\n /\nexport type AiXModule = XModule<AiXStoreModule>\n\n/\n AI {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `AI` entry point.\n \n @public\n */\nexport const aiXModule: AiXModule = {\n name: 'ai',\n storeModule: aiXStoreModule,\n storeEmitters: aiEmitters,\n wiring: aiWiring,\n}\n\nXPlugin.registerXModule(aiXModule)\n"],"names":[],"mappings":";;;;;;;AAcA;;;;;AAKG;AACI,MAAM,SAAS,GAAc;AAClC,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,WAAW,EAAE,cAAc;AAC3B,IAAA,aAAa,EAAE,UAAU;AACzB,IAAA,MAAM,EAAE,QAAQ;;AAGlB,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC;;;;"}