@empathyco/x-components 6.1.4 → 6.2.1

package/js/x-modules/ai/components/ai-grouped-carousel.vue.js

@@ -0,0 +1,68 @@
+import _sfc_main from './ai-grouped-carousel.vue2.js';
+import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, createElementBlock, Fragment, renderList, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+
+const _hoisted_1 = { class: "x-ai-carousel-suggestion-results" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
+  const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  return openBlock(), createBlock(_component_SlidingPanel, {
+    class: normalizeClass(_ctx.slidingPanelClasses),
+    "scroll-container-class": _ctx.slidingPanelContainerClasses,
+    "button-class": _ctx.slidingPanelButtonsClasses,
+    "reset-on-content-change": false
+  }, {
+    "sliding-panel-addons": withCtx(({ arrivedState }) => [
+      renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
+    ]),
+    "sliding-panel-left-button": withCtx(() => [
+      renderSlot(_ctx.$slots, "sliding-panels-left-button")
+    ]),
+    "sliding-panel-right-button": withCtx(() => [
+      renderSlot(_ctx.$slots, "sliding-panels-right-button")
+    ]),
+    default: withCtx(() => [
+      createElementVNode("ul", _hoisted_1, [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.suggestionsSearch, (suggestion) => {
+            return openBlock(), createBlock(_component_DisplayClickProvider, {
+              key: suggestion.query,
+              "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayClick,
+              "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart,
+              "result-feature": "ai_carousel"
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(suggestion.results, (result) => {
+                    return openBlock(), createElementBlock("li", {
+                      key: result.id,
+                      "data-test": "ai-carousel-suggestion-result"
+                    }, [
+                      renderSlot(_ctx.$slots, "result", { result })
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "scroll-container-class", "button-class"]);
+}
+var AiGroupedCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { AiGroupedCarousel as default };
+//# sourceMappingURL=ai-grouped-carousel.vue.js.map

package/js/x-modules/ai/components/ai-grouped-carousel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-grouped-carousel.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\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    <ul class=\"x-ai-carousel-suggestion-results\">\n      <DisplayClickProvider\n        v-for=\"suggestion in suggestionsSearch\"\n        :key=\"suggestion.query\"\n        :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n        :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\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  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n  components: {\n    DisplayClickProvider,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: String,\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: String,\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: String,\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: String,\n  },\n  setup() {\n    const { suggestionsSearch, tagging } = useState('ai')\n\n    return {\n      suggestionsSearch,\n      tagging,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_normalizeClass","_withCtx","_renderSlot","_createElementVNode","_openBlock","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;AAgBQ,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,kCAAA,EAAkC;;;;sBAf9CA,WAAA,CAiCe,uBAAA,EAAA;AAAA,IAhCZ,KAAA,EAAKC,eAAE,IAAA,CAAA,mBAAmB,CAAA;AAAA,IAC1B,wBAAA,EAAwB,IAAA,CAAA,4BAAA;AAAA,IACxB,cAAA,EAAc,IAAA,CAAA,0BAAA;AAAA,IACd,yBAAA,EAAyB;AAAA,GAAA,EAAA;IAEf,sBAAA,EAAoBC,OAAA,CAC7B,CAAmE,EADlC,YAAA,EAAY,KAAA;AAAA,MAC7CC,UAAA,CAAmE,wCAA/B,YAAA,EAA2B;AAAA,KAAA,CAAA;AAEtD,IAAA,2BAAA,EAAyBD,QAClC,MAA0C;AAAA,MAA1CC,UAAA,CAA0C,IAAA,CAAA,MAAA,EAAA,4BAAA;AAAA,KAAA,CAAA;AAEjC,IAAA,4BAAA,EAA0BD,QACnC,MAA2C;AAAA,MAA3CC,UAAA,CAA2C,IAAA,CAAA,MAAA,EAAA,6BAAA;AAAA,KAAA,CAAA;qBAE7C,MAiBK;AAAA,MAjBLC,kBAAA,CAiBK,MAjBL,UAAA,EAiBK;AAAA,SAAAC,SAAA,CAAA,IAAA,CAAA,EAhBHC,kBAAA;AAAA,UAeuBC,QAAA;AAAA,UAAA,IAAA;AAAA,UAAAC,UAAA,CAdA,IAAA,CAAA,iBAAA,EAAiB,CAA/B,UAAA,KAAU;gCADnBR,WAAA,CAeuB,+BAAA,EAAA;AAAA,cAbpB,KAAK,UAAA,CAAW,KAAA;AAAA,cAChB,yBAAA,EAAyB,IAAA,CAAA,OAAA,EAAS,aAAA,CAAc,UAAA,CAAW,KAAK,CAAA,CAAE,mBAAA;AAAA,cAClE,2BAAA,EAA2B,IAAA,CAAA,OAAA,EAAS,aAAA,CAAc,UAAA,CAAW,KAAK,CAAA,CAAE,sBAAA;AAAA,cACrE,gBAAA,EAAe;AAAA,aAAA,EAAA;+BAGb,MAAoC;AAAA,iBAAAK,SAAA,CAAA,IAAA,CAAA,EADtCC,kBAAA;AAAA,kBAOKC,QAAA;AAAA,kBAAA,IAAA;AAAA,kBAAAC,UAAA,CANc,UAAA,CAAW,OAAA,EAAO,CAA5B,MAAA,KAAM;wCADfF,kBAAA,CAOK,IAAA,EAAA;AAAA,sBALF,KAAK,MAAA,CAAO,EAAA;AAAA,sBACb,WAAA,EAAU;AAAA,qBAAA,EAAA;AAGV,sBAAAH,UAAA,CAAuC,yBAAlB,MAAA,EAAc;AAAA,qBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/ai/components/{ai-overview.vue2.js → ai-grouped-carousel.vue2.js}

@@ -1,19 +1,21 @@
-import { marked } from 'marked';
-import { defineComponent, ref, computed, onMounted } from 'vue';
+import { defineComponent } from 'vue';
 import '../../../components/animations/animate-clip-path.vue2.js';
 import '../../../components/animations/animate-scale.vue2.js';
 import '../../../components/animations/animate-translate.vue2.js';
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
-import ChangeHeight from '../../../components/animations/change-height.vue.js';
-import CollapseHeight from '../../../components/animations/collapse-height.vue.js';
+import '../../../components/animations/change-height.vue2.js';
+import '../../../components/animations/change-height.vue3.js';
+import '../../../components/animations/collapse-height.vue2.js';
+import '../../../components/animations/collapse-height.vue3.js';
 import '../../../components/animations/collapse-width.vue2.js';
 import '../../../components/animations/collapse-width.vue3.js';
 import '../../../components/animations/cross-fade.vue2.js';
 import '../../../components/animations/cross-fade.vue3.js';
 import '../../../components/animations/fade-and-slide.vue2.js';
 import '../../../components/animations/fade-and-slide.vue3.js';
-import Fade from '../../../components/animations/fade.vue.js';
+import '../../../components/animations/fade.vue2.js';
+import '../../../components/animations/fade.vue3.js';
 import '../../../components/animations/no-animation.vue.js';
 import '../../../components/animations/staggered-fade-and-slide.vue2.js';
 import '../../../components/animations/staggered-fade-and-slide.vue3.js';
@@ -21,7 +23,7 @@ import '../../../components/auto-progress-bar.vue2.js';
 import '../../../components/auto-progress-bar.vue3.js';
 import '../../../components/base-dropdown.vue2.js';
 import '../../../components/base-dropdown.vue3.js';
-import BaseEventButton from '../../../components/base-event-button.vue.js';
+import '../../../components/base-event-button.vue2.js';
 import '../../../components/base-grid.vue2.js';
 import '../../../components/base-grid.vue3.js';
 import '../../../components/base-keyboard-navigation.vue2.js';
@@ -37,14 +39,11 @@ import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
 import '../../../components/column-picker/base-column-picker-list.vue2.js';
 import '../../../components/currency/base-currency.vue2.js';
 import _sfc_main$1 from '../../../components/display-click-provider.vue.js';
-import _sfc_main$2 from '../../../components/display-emitter.vue.js';
+import '../../../components/display-emitter.vue.js';
 import '../../../components/filters/labels/base-price-filter-label.vue.js';
 import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
 import '../../../components/global-x-bus.vue.js';
 import '../../../components/highlight.vue2.js';
-import AIStarIcon from '../../../components/icons/ai-star.vue.js';
-import ArrowRightIcon from '../../../components/icons/arrow-right.vue.js';
-import SpinnerIcon from '../../../components/icons/spinner.vue.js';
 import '../../../components/items-list.vue2.js';
 import '../../../components/location-provider.vue.js';
 import '../../../components/modals/base-events-modal-close.vue2.js';
@@ -83,103 +82,42 @@ import '../../../components/result/result-variant-selector.vue3.js';
 import '../../../components/result/result-variants-provider.vue.js';
 import '../../../components/scroll/base-scroll.vue2.js';
 import '@empathyco/x-utils';
-import { use$x } from '../../../composables/use-_x.js';
+import 'vuex';
+import '../../../plugins/x-bus.js';
+import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/suggestions/base-suggestion.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';
 import '../../../composables/create-use-device.js';
-import 'vuex';
-import '../../../plugins/x-bus.js';
-import '../../../plugins/x-plugin.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';
 
 var _sfc_main = defineComponent({
-    directives: {
-        typing,
-    },
-    xModule: aiXModule.name,
     components: {
-        AIStarIcon,
-        ArrowRightIcon,
-        BaseEventButton,
-        CollapseHeight,
-        ChangeHeight,
-        Fade,
-        SlidingPanel,
-        SpinnerIcon,
-        DisplayEmitter: _sfc_main$2,
         DisplayClickProvider: _sfc_main$1,
+        SlidingPanel,
     },
     props: {
-        /* The text displayed when the question ended loading */
-        title: {
-            type: String,
-        },
-        /* The text displayed when the question is loading. */
-        titleLoading: {
-            type: String,
-            default: 'Generating with Empathy AI',
-        },
-        /* Auto expand the AI Overview when there are queries in AI and no-results in search. */
-        autoExpandInSearchNoResults: {
-            type: Boolean,
-            default: true,
-        },
-        /* The classes added to the parsed response text container. */
-        contentClasses: {
-            type: String,
-        },
-        /* The classes added to each sliding panel for each query. */
-        slidingPanelsClasses: {
-            type: String,
-        },
-        /* The classes added to each sliding panel container of each query. */
-        slidingPanelContainersClasses: {
-            type: String,
-        },
-        /* The classes added to each sliding panel button of each query. */
-        slidingPanelButtonsClasses: {
-            type: String,
-        },
+        /* The title text displayed */
+        title: String,
+        /* The classes added to the sliding panel. */
+        slidingPanelClasses: String,
+        /* The classes added to the sliding panel container. */
+        slidingPanelContainerClasses: String,
+        /* The classes added to the sliding panel buttons. */
+        slidingPanelButtonsClasses: String,
     },
     setup() {
-        const $x = use$x();
-        const { suggestionText, responseText, suggestionsSearch, suggestionsStatus, tagging, isNoResults, queries, query, } = useState('ai');
-        const emptyTaggingRequest = { url: '', params: {} };
-        const aiOverviewRef = ref(null);
-        const expanded = ref(false);
-        const shouldAnimateSuggestion = ref(true);
-        const parsedResponseText = computed(() => marked.parse(responseText.value));
-        const suggestionsLoading = computed(() => suggestionsStatus.value !== 'success' && suggestionsStatus.value !== 'error');
-        $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {
-            expanded.value = false;
-            shouldAnimateSuggestion.value = true;
-        });
-        onMounted(() => {
-            $x.emit('AiComponentMounted', undefined, { feature: 'overview' });
-        });
+        const { suggestionsSearch, tagging } = useState('ai');
         return {
-            aiOverviewRef,
-            emptyTaggingRequest,
-            expanded,
-            parsedResponseText,
-            suggestionsLoading,
             suggestionsSearch,
-            suggestionText,
-            shouldAnimateSuggestion,
-            query,
             tagging,
-            isNoResults,
-            queries,
         };
     },
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=ai-overview.vue2.js.map
+//# sourceMappingURL=ai-grouped-carousel.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-grouped-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\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    <ul class=\"x-ai-carousel-suggestion-results\">\n      <DisplayClickProvider\n        v-for=\"suggestion in suggestionsSearch\"\n        :key=\"suggestion.query\"\n        :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n        :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\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  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n  components: {\n    DisplayClickProvider,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: String,\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: String,\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: String,\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: String,\n  },\n  setup() {\n    const { suggestionsSearch, tagging } = useState('ai')\n\n    return {\n      suggestionsSearch,\n      tagging,\n    }\n  },\n})\n</script>\n"],"names":["DisplayClickProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;8BACVA,WAAoB;QACpB,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE,MAAM;;AAEb,QAAA,mBAAmB,EAAE,MAAM;;AAE3B,QAAA,4BAA4B,EAAE,MAAM;;AAEpC,QAAA,0BAA0B,EAAE,MAAM;AACnC,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,iBAAiB,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEpD,OAAO;YACL,iBAAiB;YACjB,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -27,8 +27,8 @@ const fetchAndSaveAiSuggestions = async ({ commit }, request) => {
         }
     });
 };
-function mapTaggingData(tangingData) {
-    const { toolingDisplay, toolingDisplayClick, searchQueries } = tangingData.tagging[0];
+function mapTaggingData(taggingData) {
+    const { toolingDisplay, toolingDisplayClick, searchQueries } = taggingData.tagging[0];
     // TODO: Using the getTaggingInfoFromUrl util here is a temporary solution.
     // It creates a dependency with the x-adapter-platform project that should be avoided.
     return {
@@ -62,14 +62,6 @@ function readAnswer(reader, commit) {
                     continue;
                 const raw = line.startsWith('data:') ? line.slice(5).trim() : line.trim();
                 const data = JSON.parse(raw);
-                if ('suggestionText' in data) {
-                    commit('setIsNoResults', false);
-                    commit('setSuggestionText', data.suggestionText);
-                }
-                if ('responseText' in data) {
-                    commit('setIsNoResults', false);
-                    commit('setResponseText', data.responseText);
-                }
                 if ('queries' in data) {
                     commit('setQueries', data.queries);
                 }

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

@@ -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('setSuggestionsStatus', 'loading')\n\n    return XPlugin.adapter.aiSuggestions(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('setSuggestionsStatus', 'success')\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('setSuggestionsStatus', 'error')\n      // AbortError code === 20\n      if (error.code !== 20) {\n        console.error(error)\n      }\n    })\n}\n"],"names":[],"mappings":"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"}
+{"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 = { queries: AiSuggestionQuery[] } | 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('setSuggestionsStatus', 'loading')\n\n    return XPlugin.adapter.aiSuggestions(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(taggingData: TaggingData): AiSuggestionTagging {\n  const { toolingDisplay, toolingDisplayClick, searchQueries } = taggingData.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('setSuggestionsStatus', 'success')\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 ('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('setSuggestionsStatus', 'error')\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/store/module.js

@@ -27,6 +27,9 @@ const aiXStoreModule = {
         origin: null,
         relatedTags: [],
         searchTotalResults: 0,
+        excludeOptions: {
+            resultIds: [],
+        },
     }),
     getters: {
         suggestionsRequest,
@@ -34,18 +37,9 @@ const aiXStoreModule = {
     },
     mutations: {
         /* Streamed fields */
-        setResponseText: (state, responseText) => {
-            state.responseText = responseText;
-        },
-        setSuggestionText: (state, suggestionText) => {
-            state.suggestionText = suggestionText;
-        },
         setQueries: (state, queries) => {
             state.queries = queries;
         },
-        setExcludedResultIds: (state, resultIds) => {
-            state.excludeOptions.resultIds = resultIds;
-        },
         setTagging: (state, tagging) => {
             state.tagging = tagging;
         },
@@ -59,6 +53,9 @@ const aiXStoreModule = {
         setSuggestionsSearchStatus: (state, status) => {
             state.suggestionsSearchStatus = status;
         },
+        setExcludedResultIds: (state, resultIds) => {
+            state.excludeOptions.resultIds = resultIds;
+        },
         setQuery,
         setParams(state, params) {
             state.params = params;
@@ -72,9 +69,6 @@ const aiXStoreModule = {
         setAiRelatedTags(state, relatedTags) {
             state.relatedTags = relatedTags;
         },
-        setIsNoResults(state, isNoResults) {
-            state.isNoResults = isNoResults;
-        },
         setSelectedFilters(state, selectedFilters) {
             state.selectedFilters = groupItemsBy(selectedFilters, filter => isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY);
         },
@@ -101,17 +95,11 @@ const aiXStoreModule = {
  */
 function resettableAiState() {
     return {
-        responseText: '',
-        suggestionText: '',
         queries: [],
-        excludeOptions: {
-            resultIds: [],
-        },
         tagging: undefined,
         suggestionsSearch: [],
         suggestionsStatus: 'initial',
         suggestionsSearchStatus: 'initial',
-        isNoResults: true,
     };
 }
 

package/js/x-modules/ai/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/ai/store/module.ts"],"sourcesContent":["import type { AiSuggestionQuery, AiSuggestionSearch, Result } from '@empathyco/x-types'\nimport type { RequestStatus } from '../../../store/utils/status-store.utils'\nimport type { AiState, AiXStoreModule } from './types'\nimport { isFacetFilter } from '@empathyco/x-types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { setQuery } from '../../../store/utils/query.utils'\nimport { groupItemsBy } from '../../../utils/array'\nimport { UNKNOWN_FACET_KEY } from '../../facets/store/constants'\nimport { fetchAndSaveAiSuggestionsSearch } from './actions/fetch-and-save-ai-suggestions-search.action'\nimport { fetchAndSaveAiSuggestions } from './actions/fetch-and-save-ai-suggestions.action'\nimport { saveOrigin } from './actions/save-origin.action'\nimport { setUrlParams } from './actions/set-url-params.action'\nimport {\n  aiSuggestionsRequest as suggestionsRequest,\n  aiSuggestionsSearchRequest as suggestionsSearchRequest,\n} from './getters'\n\n/**\n * {@link XStoreModule} For the ai module.\n *\n * @internal\n */\nexport const aiXStoreModule: AiXStoreModule = {\n  state: () => ({\n    ...resettableAiState(),\n    selectedFilters: {},\n    query: '',\n    config: {\n      lowResultsThreshold: 50,\n    },\n    params: {},\n    origin: null,\n    relatedTags: [],\n    searchTotalResults: 0,\n  }),\n  getters: {\n    suggestionsRequest,\n    suggestionsSearchRequest,\n  },\n  mutations: {\n    /* Streamed fields */\n    setResponseText: (state, responseText: string) => {\n      state.responseText = responseText\n    },\n    setSuggestionText: (state, suggestionText: string) => {\n      state.suggestionText = suggestionText\n    },\n    setQueries: (state, queries: AiSuggestionQuery[]) => {\n      state.queries = queries\n    },\n    setExcludedResultIds: (state, resultIds: Result['id'][]) => {\n      state.excludeOptions.resultIds = resultIds\n    },\n    setTagging: (state, tagging) => {\n      state.tagging = tagging\n    },\n    /* END Streamed fields */\n    setSuggestionsSearch: (state, suggestionsSearch: AiSuggestionSearch[]) => {\n      state.suggestionsSearch = suggestionsSearch\n    },\n    setSuggestionsStatus: (state, status: RequestStatus) => {\n      state.suggestionsStatus = status\n    },\n    setSuggestionsSearchStatus: (state, status: RequestStatus) => {\n      state.suggestionsSearchStatus = status\n    },\n    setQuery,\n    setParams(state, params) {\n      state.params = params\n    },\n    setOrigin(state, origin = null) {\n      state.origin = origin\n    },\n    resetAiState(state) {\n      Object.assign(state, resettableAiState())\n    },\n    setAiRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags\n    },\n    setIsNoResults(state, isNoResults: boolean) {\n      state.isNoResults = isNoResults\n    },\n    setSelectedFilters(state, selectedFilters) {\n      state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n        isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY,\n      )\n    },\n    setSearchTotalResults(state, totalResults) {\n      state.searchTotalResults = totalResults\n    },\n    setConfig,\n    mergeConfig,\n  },\n  actions: {\n    fetchAndSaveAiSuggestions,\n    fetchAndSaveAiSuggestionsSearch,\n    setUrlParams,\n    saveOrigin,\n  },\n}\n\n/**\n * Function to return the \"resettable\" part of the state. This will be used in the `resetState`\n * mutation to reset to the initial state.\n *\n * @returns The \"resettable\" part of the {@link AiState}.\n *\n * @internal\n */\nfunction resettableAiState() {\n  return {\n    responseText: '',\n    suggestionText: '',\n    queries: [],\n    excludeOptions: {\n      resultIds: [],\n    },\n    tagging: undefined,\n    suggestionsSearch: [],\n    suggestionsStatus: 'initial' as RequestStatus,\n    suggestionsSearchStatus: 'initial' as RequestStatus,\n    isNoResults: true,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/ai/store/module.ts"],"sourcesContent":["import type { AiSuggestionQuery, AiSuggestionSearch, Result } from '@empathyco/x-types'\nimport type { RequestStatus } from '../../../store/utils/status-store.utils'\nimport type { AiState, AiXStoreModule } from './types'\nimport { isFacetFilter } from '@empathyco/x-types'\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'\nimport { setQuery } from '../../../store/utils/query.utils'\nimport { groupItemsBy } from '../../../utils/array'\nimport { UNKNOWN_FACET_KEY } from '../../facets/store/constants'\nimport { fetchAndSaveAiSuggestionsSearch } from './actions/fetch-and-save-ai-suggestions-search.action'\nimport { fetchAndSaveAiSuggestions } from './actions/fetch-and-save-ai-suggestions.action'\nimport { saveOrigin } from './actions/save-origin.action'\nimport { setUrlParams } from './actions/set-url-params.action'\nimport {\n  aiSuggestionsRequest as suggestionsRequest,\n  aiSuggestionsSearchRequest as suggestionsSearchRequest,\n} from './getters'\n\n/**\n * {@link XStoreModule} For the ai module.\n *\n * @internal\n */\nexport const aiXStoreModule: AiXStoreModule = {\n  state: () => ({\n    ...resettableAiState(),\n    selectedFilters: {},\n    query: '',\n    config: {\n      lowResultsThreshold: 50,\n    },\n    params: {},\n    origin: null,\n    relatedTags: [],\n    searchTotalResults: 0,\n    excludeOptions: {\n      resultIds: [],\n    },\n  }),\n  getters: {\n    suggestionsRequest,\n    suggestionsSearchRequest,\n  },\n  mutations: {\n    /* Streamed fields */\n    setQueries: (state, queries: AiSuggestionQuery[]) => {\n      state.queries = queries\n    },\n    setTagging: (state, tagging) => {\n      state.tagging = tagging\n    },\n    /* END Streamed fields */\n    setSuggestionsSearch: (state, suggestionsSearch: AiSuggestionSearch[]) => {\n      state.suggestionsSearch = suggestionsSearch\n    },\n    setSuggestionsStatus: (state, status: RequestStatus) => {\n      state.suggestionsStatus = status\n    },\n    setSuggestionsSearchStatus: (state, status: RequestStatus) => {\n      state.suggestionsSearchStatus = status\n    },\n    setExcludedResultIds: (state, resultIds: Result['id'][]) => {\n      state.excludeOptions.resultIds = resultIds\n    },\n    setQuery,\n    setParams(state, params) {\n      state.params = params\n    },\n    setOrigin(state, origin = null) {\n      state.origin = origin\n    },\n    resetAiState(state) {\n      Object.assign(state, resettableAiState())\n    },\n    setAiRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags\n    },\n    setSelectedFilters(state, selectedFilters) {\n      state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n        isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY,\n      )\n    },\n    setSearchTotalResults(state, totalResults) {\n      state.searchTotalResults = totalResults\n    },\n    setConfig,\n    mergeConfig,\n  },\n  actions: {\n    fetchAndSaveAiSuggestions,\n    fetchAndSaveAiSuggestionsSearch,\n    setUrlParams,\n    saveOrigin,\n  },\n}\n\n/**\n * Function to return the \"resettable\" part of the state. This will be used in the `resetState`\n * mutation to reset to the initial state.\n *\n * @returns The \"resettable\" part of the {@link AiState}.\n *\n * @internal\n */\nfunction resettableAiState() {\n  return {\n    queries: [],\n    tagging: undefined,\n    suggestionsSearch: [],\n    suggestionsStatus: 'initial' as RequestStatus,\n    suggestionsSearchStatus: 'initial' as RequestStatus,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA;;;;AAIG;AACI,MAAM,cAAc,GAAmB;AAC5C,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,GAAG,iBAAiB,EAAE;AACtB,QAAA,eAAe,EAAE,EAAE;AACnB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE;AACN,YAAA,mBAAmB,EAAE,EAAE;AACxB,SAAA;AACD,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,kBAAkB,EAAE,CAAC;AACrB,QAAA,cAAc,EAAE;AACd,YAAA,SAAS,EAAE,EAAE;AACd,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE;QACP,kBAAkB;QAClB,wBAAwB;AACzB,KAAA;AACD,IAAA,SAAS,EAAE;;AAET,QAAA,UAAU,EAAE,CAAC,KAAK,EAAE,OAA4B,KAAI;AAClD,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;AACD,QAAA,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAI;AAC7B,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO;QACzB,CAAC;;AAED,QAAA,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAuC,KAAI;AACvE,YAAA,KAAK,CAAC,iBAAiB,GAAG,iBAAiB;QAC7C,CAAC;AACD,QAAA,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAqB,KAAI;AACrD,YAAA,KAAK,CAAC,iBAAiB,GAAG,MAAM;QAClC,CAAC;AACD,QAAA,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAqB,KAAI;AAC3D,YAAA,KAAK,CAAC,uBAAuB,GAAG,MAAM;QACxC,CAAC;AACD,QAAA,oBAAoB,EAAE,CAAC,KAAK,EAAE,SAAyB,KAAI;AACzD,YAAA,KAAK,CAAC,cAAc,CAAC,SAAS,GAAG,SAAS;QAC5C,CAAC;QACD,QAAQ;QACR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM;QACvB,CAAC;AACD,QAAA,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAA;AAC5B,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM;QACvB,CAAC;AACD,QAAA,YAAY,CAAC,KAAK,EAAA;YAChB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC;QAC3C,CAAC;QACD,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAA;AACjC,YAAA,KAAK,CAAC,WAAW,GAAG,WAAW;QACjC,CAAC;QACD,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAA;YACvC,KAAK,CAAC,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,MAAM,IAC1D,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,iBAAiB,CAC3D;QACH,CAAC;QACD,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAA;AACvC,YAAA,KAAK,CAAC,kBAAkB,GAAG,YAAY;QACzC,CAAC;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,yBAAyB;QACzB,+BAA+B;QAC/B,YAAY;QACZ,UAAU;AACX,KAAA;;AAGH;;;;;;;AAOG;AACH,SAAS,iBAAiB,GAAA;IACxB,OAAO;AACL,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,iBAAiB,EAAE,EAAE;AACrB,QAAA,iBAAiB,EAAE,SAA0B;AAC7C,QAAA,uBAAuB,EAAE,SAA0B;KACpD;AACH;;;;"}

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js

@@ -10,6 +10,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SlidingPanel = resolveComponent("SlidingPanel");
   return openBlock(), createBlock(_component_SlidingPanel, {
     key: _ctx.x.query.search,
+    fade: _ctx.selectedPromptIndex === -1,
     "reset-on-content-change": false,
     "button-class": _ctx.buttonClass,
     "show-buttons": _ctx.showButtons && _ctx.selectedPromptIndex === -1,
@@ -93,7 +94,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["button-class", "show-buttons", "scroll-container-class"]);
+  }, 8, ["fade", "button-class", "show-buttons", "scroll-container-class"]);
 }
 var relatedPromptsTagList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || '',\n    ]\"\n  >\n    <template #sliding-panel-left-button>\n      <!--\n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"{\n          ...(selectedPromptIndex === index && { width: '100%' }),\n          ...(isAnimating && { pointerEvents: 'none' }),\n        }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging!\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <!--\n                 @slot related-prompt-extra-content - The slot to render related prompt extra information.\n                 @prop {Object} relatedPrompt - The related prompt object.\n                -->\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\n          </DisplayEmitter>\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!--\n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport RelatedPrompt from './related-prompt.vue'\n\n/**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedPromptsTagList',\n  xModule: relatedPromptsXModule.name,\n  components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n  props: {\n    /**\n     * The CSS class for the left and right button of the sliding panel.\n     *\n     * @public\n     */\n    buttonClass: String,\n    /**\n     * The boolean prop to handle the visiblity of sliding pannel buttons.\n     *\n     * @public\n     */\n    showButtons: { type: Boolean, default: true },\n    /**\n     * The CSS class for the wrapper of all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    scrollContainerClass: String,\n    /**\n     * The CSS class for all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    tagClass: String,\n    /**\n     * Array of colors to apply to the related prompts. It will be applied to tag\n     * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n     *\n     * @public\n     */\n    tagColors: Array as PropType<string[]>,\n    /**\n     * The duration of the total animation in milliseconds.\n     *\n     * @public\n     */\n    animationDurationInMs: {\n      type: Number,\n      default: 700,\n    },\n  },\n  setup(props) {\n    const x = use$x()\n    const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts')\n\n    const clickedListItemIndex = ref<number | null>(null)\n    const initialOffsetLefts: Record<number, number> = {}\n    const isAnimating = ref(false)\n    const listItems = ref<HTMLElement[]>([])\n\n    const sortedListItems = computed<HTMLElement[]>(() =>\n      [...listItems.value].sort(\n        (a: HTMLElement, b: HTMLElement) =>\n          Number.parseInt(b.getAttribute('data-index')!) -\n          Number.parseInt(a.getAttribute('data-index')!),\n      ),\n    )\n\n    // The duration of a single animation (enter or leave) in milliseconds\n    // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n    // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n    const singleAnimationDurationInMs = computed(\n      () =>\n        props.animationDurationInMs /\n        (clickedListItemIndex.value !== null\n          ? relatedPrompts.value.length - 1\n          : relatedPrompts.value.length),\n    )\n\n    const indexRelatedPrompts = computed(() =>\n      relatedPrompts.value.map((relatedPrompt, index) => ({ ...relatedPrompt, index })),\n    )\n\n    const visibleRelatedPrompts = computed(() =>\n      selectedPromptIndex.value !== -1\n        ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n        : indexRelatedPrompts.value,\n    )\n\n    let timeOutId: number\n    const resetTransitionStyle = (excludedProperties: Array<string> = ['width']) => {\n      if (timeOutId) {\n        clearTimeout(timeOutId)\n      }\n\n      isAnimating.value = true\n      timeOutId = +setTimeout(() => {\n        isAnimating.value = false\n        clickedListItemIndex.value = null\n\n        sortedListItems.value.forEach(element => {\n          element.style.cssText\n            .split(';')\n            .map(rule => rule.split(':')[0]?.trim())\n            .forEach(property => {\n              if (!excludedProperties.includes(property)) {\n                element.style.removeProperty(property)\n              }\n            })\n        })\n      }, props.animationDurationInMs)\n    }\n\n    const onSelect = (selectedIndex: number): void => {\n      resetTransitionStyle()\n\n      clickedListItemIndex.value = selectedIndex\n      const selected: HTMLElement = sortedListItems.value.find(\n        element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex,\n      )!\n\n      // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n      if (selectedPromptIndex.value === -1) {\n        // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n        // sorted in descending order by index.\n        sortedListItems.value.forEach(element => {\n          const index = Number.parseInt(element.getAttribute('data-index')!)\n\n          initialOffsetLefts[index] = element.offsetLeft\n          element.style.left = `${element.offsetLeft}px`\n          element.style.position = 'absolute'\n          element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n\n          if (index !== selectedIndex) {\n            element.style.opacity = '1'\n            element.style.transitionDelay = `${\n              (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n            }ms`\n          }\n        })\n\n        // Synchronize the transition delay of the selected element with the last\n        // element to leave\n        selected.style.transitionDelay = `${\n          (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n          singleAnimationDurationInMs.value\n        }ms`\n\n        // Trigger the animation (selecting) for the selected element\n        requestAnimationFrame(() => {\n          const maxWidth = getComputedStyle(selected).maxWidth\n\n          selected.style.left = '0px'\n          selected.style.setProperty(\n            'width',\n            `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n            'important',\n          )\n        })\n      } else {\n        // Prepare the selected element for the deselecting animation\n        selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n        selected.style.left = '0px'\n        selected.style.position = 'absolute'\n\n        // Trigger the animation (deselecting) for the selected element\n        selected.style.removeProperty('width')\n        requestAnimationFrame(() => {\n          selected.style.left = `${initialOffsetLefts[selectedIndex]}px`\n        })\n      }\n\n      x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n        relatedPrompt: relatedPrompts.value[selectedIndex],\n        selectedPrompt: selectedPromptIndex.value,\n      })\n    }\n\n    const onBeforeEnter = (el: Element) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Prepare the element for the enter animation\n      element.style.opacity = '0'\n      element.style.transform = 'translateY(5px)'\n      element.style.transitionDelay = `${\n        (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n          ? index - 1\n          : index) * singleAnimationDurationInMs.value\n      }ms`\n      element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n    }\n\n    const onEnter = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Also part of the preparation for the enter animation, but it needs to be done\n      // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n      element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`\n\n      // trigger enter animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '1'\n        element.style.position = 'absolute'\n        element.style.transform = 'translateY(0)'\n      })\n\n      done()\n    }\n\n    const onLeave = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n\n      // trigger leave animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '0'\n        element.style.transform = 'translateY(5px)'\n      })\n\n      // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n      setTimeout(done, props.animationDurationInMs)\n    }\n\n    // Changing the request will trigger the appear animation, so we need to reset the\n    // style after it finishes\n    x.on('SearchRequestChanged', false).subscribe(() => {\n      resetTransitionStyle([])\n    })\n\n    onBeforeUnmount(() => {\n      x.emit('RelatedPromptsUnmounted')\n    })\n\n    return {\n      onSelect,\n      onBeforeEnter,\n      onEnter,\n      onLeave,\n      selectedPromptIndex,\n      visibleRelatedPrompts,\n      listItems,\n      isAnimating,\n      x,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-related-prompts-tag-list-scroll-container {\n  height: 100%;\n  position: relative;\n}\n.x-related-prompts-tag-list {\n  display: flex;\n  gap: 16px;\n  min-width: 100%;\n  width: 100%;\n}\n.x-related-prompts-tag-list-item {\n  height: 100%;\n  flex-shrink: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n### Basic usage\n\n```vue live\n<template>\n  <RelatedPromptsTagList />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing tag colors and classes\n\n```vue live\n<template>\n  <RelatedPromptsTagList :tagColors=\"['x-bg-neutral-50', 'x-bg-lead-50']\" tagClass=\"rounded\" />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Using the default slot to customize prompt rendering\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #default=\"{ relatedPrompt, onSelect, isSelected }\">\n      <button :class=\"{ selected: isSelected }\" @click=\"onSelect()\">\n        {{ relatedPrompt.suggestionText }}\n      </button>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing extra content in RelatedPrompt\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #related-prompt-extra-content=\"{ relatedPrompt }\">\n      <span>Extra: {{ relatedPrompt.suggestionText }}</span>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_createVNode","_TransitionGroup","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;;;;sBACEA,WAAA,CAgFe,uBAAA,EAAA;AAAA,IA/EZ,GAAA,EAAK,OAAE,KAAA,CAAM,MAAA;AAAA,IACb,yBAAA,EAAyB,KAAA;AAAA,IACzB,cAAA,EAAc,IAAA,CAAA,WAAA;AAAA,IACd,cAAA,EAAc,oBAAe,IAAA,CAAA,mBAAA,KAAmB,EAAA;AAAA,IAChD,wBAAA,EAAsB;AAAA,MAAA,6CAAA;MAA+D,IAAA,CAAA,oBAAA,IAAoB;AAAA;;AAK/F,IAAA,2BAAA,EAAyBC,QAIlC,MAAyC;AAAA,MAAzCC,UAAA,CAAyC,IAAA,CAAA,MAAA,EAAA,2BAAA;AAAA,KAAA,CAAA;AA4DhC,IAAA,4BAAA,EAA0BD,QAInC,MAA0C;AAAA,MAA1CC,UAAA,CAA0C,IAAA,CAAA,MAAA,EAAA,4BAAA;AAAA,KAAA,CAAA;qBA9D5C,MAyDmB;AAAA,MAzDnBC,WAAA,CAyDmBC,eAAA,EAAA;AAAA,QAxDjB,KAAA,EAAM,4BAAA;AAAA,QACL,GAAA,EAAK,KAAA;AAAA,QACN,GAAA,EAAI,IAAA;AAAA,QACJ,MAAA,EAAA,EAAA;AAAA,QACC,aAAA,EAAc,IAAA,CAAA,aAAA;AAAA,QACd,OAAA,EAAO,IAAA,CAAA,OAAA;AAAA,QACP,OAAA,EAAO,IAAA,CAAA;AAAA,OAAA,EAAA;yBAGN,MAA4D;AAAA,WAAAC,SAAA,CAAA,IAAA,CAAA,EAD9DC,kBAAA;AAAA,YA+CKC,QAAA;AAAA,YAAA,IAAA;AAAA,YAAAC,UAAA,CA9CmC,IAAA,CAAA,qBAAA,EAAqB,CAAA,EAAlD,KAAA,EAAK,GAAK,aAAA,EAAa,KAAA;kCADlCF,kBAAA,CA+CK,IAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,IAAA;gBA7CH,GAAA,EAAI,WAAA;AAAA,gBACH,KAAK,aAAA,CAAc,cAAA;AAAA,gBACpB,KAAA,EAAKG,gBAAC,iCAAA,EAAiC,CAC9B,eAAU,IAAA,CAAA,SAAA,IAAa,IAAA,CAAA,SAAA,CAAU,KAAA,GAAQ,IAAA,CAAA,SAAA,CAAU,MAAM,CAAA,CAAA,CAAA,CAAA;AAAA,gBACjE,YAAA,EAAY,KAAA;AAAA,gBACZ,KAAA,EAAKC,cAAA,CAAA;AAAA,kBAAA,GAAkB,6BAAwB,KAAA,IAAK,EAAA,KAAA,EAAA,MAAA,EAAA;AAAA,kBAAA,GAAsC,IAAA,CAAA,WAAA,IAAW,EAAA,aAAA,EAAA,MAAA;AAAA,iBAAA,CAAA;gBAItG,WAAA,EAAU;AAAA,eAAA,EAAA;gBAQVR,UAAA,CA2BO,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,kBA1BJ,aAAA;AAAA,kBACA,QAAA,EAAS,MAAQ,IAAA,CAAA,QAAA,CAAS,KAAK,CAAA;AAAA,kBAC/B,YAAa,IAAA,CAAA,mBAAA,KAAwB;AAAA,iBAAA,EAHxC,MA2BO;AAAA,kBAtBLC,WAAA,CAqBiB,yBAAA,EAAA;AAAA,oBApBd,OAAA,EAAS,cAAc,OAAA,EAAS,qBAAA;AAAA,oBAChC,gBAAA,EAAc;AAAA,sBAAA,OAAA,EAAA,iBAAA;AAAkF,sBAAA,oBAAA,EAAA,IAAA,CAAA,CAAA,CAAE,KAAA,CAAM,SAAA;AAAA,sBAAA,WAAA,EAAA;;;qCAMzG,MAYgB;AAAA,sBAZhBA,WAAA,CAYgB,wBAAA,EAAA;AAAA,wBAXb,gBAAA,EAAgB,aAAA;AAAA,wBAChB,UAAU,IAAA,CAAA,mBAAA,KAAwB,KAAA;AAAA,wBAClC,OAAA,EAAK,CAAA,MAAA,KAAE,IAAA,CAAA,QAAA,CAAS,KAAK;AAAA,uBAAA,EAAA;AAEX,wBAAA,8BAAA,EAA4BF,QAKrC,MAA4E;AAAA,0BAA5EC,UAAA,CAA4E,+CAAjC,aAAA,EAA6B;AAAA,yBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :fade=\"selectedPromptIndex === -1\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || '',\n    ]\"\n  >\n    <template #sliding-panel-left-button>\n      <!--\n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"{\n          ...(selectedPromptIndex === index && { width: '100%' }),\n          ...(isAnimating && { pointerEvents: 'none' }),\n        }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging!\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <!--\n                 @slot related-prompt-extra-content - The slot to render related prompt extra information.\n                 @prop {Object} relatedPrompt - The related prompt object.\n                -->\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\n          </DisplayEmitter>\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!--\n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport RelatedPrompt from './related-prompt.vue'\n\n/**\n * This component shows the list of `RelatedPrompts` components.\n *\n * If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedPromptsTagList',\n  xModule: relatedPromptsXModule.name,\n  components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n  props: {\n    /**\n     * The CSS class for the left and right button of the sliding panel.\n     *\n     * @public\n     */\n    buttonClass: String,\n    /**\n     * The boolean prop to handle the visiblity of sliding pannel buttons.\n     *\n     * @public\n     */\n    showButtons: { type: Boolean, default: true },\n    /**\n     * The CSS class for the wrapper of all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    scrollContainerClass: String,\n    /**\n     * The CSS class for all the related prompt wrapper elements.\n     *\n     * @public\n     */\n    tagClass: String,\n    /**\n     * Array of colors to apply to the related prompts. It will be applied to tag\n     * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n     *\n     * @public\n     */\n    tagColors: Array as PropType<string[]>,\n    /**\n     * The duration of the total animation in milliseconds.\n     *\n     * @public\n     */\n    animationDurationInMs: {\n      type: Number,\n      default: 700,\n    },\n  },\n  setup(props) {\n    const x = use$x()\n    const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts')\n\n    const clickedListItemIndex = ref<number | null>(null)\n    const initialOffsetLefts: Record<number, number> = {}\n    const isAnimating = ref(false)\n    const listItems = ref<HTMLElement[]>([])\n\n    const sortedListItems = computed<HTMLElement[]>(() =>\n      [...listItems.value].sort(\n        (a: HTMLElement, b: HTMLElement) =>\n          Number.parseInt(b.getAttribute('data-index')!) -\n          Number.parseInt(a.getAttribute('data-index')!),\n      ),\n    )\n\n    // The duration of a single animation (enter or leave) in milliseconds\n    // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n    // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n    const singleAnimationDurationInMs = computed(\n      () =>\n        props.animationDurationInMs /\n        (clickedListItemIndex.value !== null\n          ? relatedPrompts.value.length - 1\n          : relatedPrompts.value.length),\n    )\n\n    const indexRelatedPrompts = computed(() =>\n      relatedPrompts.value.map((relatedPrompt, index) => ({ ...relatedPrompt, index })),\n    )\n\n    const visibleRelatedPrompts = computed(() =>\n      selectedPromptIndex.value !== -1\n        ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n        : indexRelatedPrompts.value,\n    )\n\n    let timeOutId: number\n    const resetTransitionStyle = (excludedProperties: Array<string> = ['width']) => {\n      if (timeOutId) {\n        clearTimeout(timeOutId)\n      }\n\n      isAnimating.value = true\n      timeOutId = +setTimeout(() => {\n        isAnimating.value = false\n        clickedListItemIndex.value = null\n\n        sortedListItems.value.forEach(element => {\n          element.style.cssText\n            .split(';')\n            .map(rule => rule.split(':')[0]?.trim())\n            .forEach(property => {\n              if (!excludedProperties.includes(property)) {\n                element.style.removeProperty(property)\n              }\n            })\n        })\n      }, props.animationDurationInMs)\n    }\n\n    const onSelect = (selectedIndex: number): void => {\n      resetTransitionStyle()\n\n      clickedListItemIndex.value = selectedIndex\n      const selected: HTMLElement = sortedListItems.value.find(\n        element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex,\n      )!\n\n      // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n      if (selectedPromptIndex.value === -1) {\n        // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n        // sorted in descending order by index.\n        sortedListItems.value.forEach(element => {\n          const index = Number.parseInt(element.getAttribute('data-index')!)\n\n          initialOffsetLefts[index] = element.offsetLeft\n          element.style.left = `${element.offsetLeft}px`\n          element.style.position = 'absolute'\n          element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n\n          if (index !== selectedIndex) {\n            element.style.opacity = '1'\n            element.style.transitionDelay = `${\n              (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n            }ms`\n          }\n        })\n\n        // Synchronize the transition delay of the selected element with the last\n        // element to leave\n        selected.style.transitionDelay = `${\n          (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n          singleAnimationDurationInMs.value\n        }ms`\n\n        // Trigger the animation (selecting) for the selected element\n        requestAnimationFrame(() => {\n          const maxWidth = getComputedStyle(selected).maxWidth\n\n          selected.style.left = '0px'\n          selected.style.setProperty(\n            'width',\n            `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n            'important',\n          )\n        })\n      } else {\n        // Prepare the selected element for the deselecting animation\n        selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n        selected.style.left = '0px'\n        selected.style.position = 'absolute'\n\n        // Trigger the animation (deselecting) for the selected element\n        selected.style.removeProperty('width')\n        requestAnimationFrame(() => {\n          selected.style.left = `${initialOffsetLefts[selectedIndex]}px`\n        })\n      }\n\n      x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n        relatedPrompt: relatedPrompts.value[selectedIndex],\n        selectedPrompt: selectedPromptIndex.value,\n      })\n    }\n\n    const onBeforeEnter = (el: Element) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Prepare the element for the enter animation\n      element.style.opacity = '0'\n      element.style.transform = 'translateY(5px)'\n      element.style.transitionDelay = `${\n        (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n          ? index - 1\n          : index) * singleAnimationDurationInMs.value\n      }ms`\n      element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`\n    }\n\n    const onEnter = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n      const index = Number.parseInt(element.getAttribute('data-index')!)\n\n      // Also part of the preparation for the enter animation, but it needs to be done\n      // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n      element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`\n\n      // trigger enter animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '1'\n        element.style.position = 'absolute'\n        element.style.transform = 'translateY(0)'\n      })\n\n      done()\n    }\n\n    const onLeave = (el: Element, done: () => void) => {\n      const element = el as HTMLElement\n\n      // trigger leave animation\n      requestAnimationFrame(() => {\n        element.style.opacity = '0'\n        element.style.transform = 'translateY(5px)'\n      })\n\n      // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n      setTimeout(done, props.animationDurationInMs)\n    }\n\n    // Changing the request will trigger the appear animation, so we need to reset the\n    // style after it finishes\n    x.on('SearchRequestChanged', false).subscribe(() => {\n      resetTransitionStyle([])\n    })\n\n    onBeforeUnmount(() => {\n      x.emit('RelatedPromptsUnmounted')\n    })\n\n    return {\n      onSelect,\n      onBeforeEnter,\n      onEnter,\n      onLeave,\n      selectedPromptIndex,\n      visibleRelatedPrompts,\n      listItems,\n      isAnimating,\n      x,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-related-prompts-tag-list-scroll-container {\n  height: 100%;\n  position: relative;\n}\n.x-related-prompts-tag-list {\n  display: flex;\n  gap: 16px;\n  min-width: 100%;\n  width: 100%;\n}\n.x-related-prompts-tag-list-item {\n  height: 100%;\n  flex-shrink: 0;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n### Basic usage\n\n```vue live\n<template>\n  <RelatedPromptsTagList />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing tag colors and classes\n\n```vue live\n<template>\n  <RelatedPromptsTagList :tagColors=\"['x-bg-neutral-50', 'x-bg-lead-50']\" tagClass=\"rounded\" />\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Using the default slot to customize prompt rendering\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #default=\"{ relatedPrompt, onSelect, isSelected }\">\n      <button :class=\"{ selected: isSelected }\" @click=\"onSelect()\">\n        {{ relatedPrompt.suggestionText }}\n      </button>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n\n### Customizing extra content in RelatedPrompt\n\n```vue live\n<template>\n  <RelatedPromptsTagList>\n    <template #related-prompt-extra-content=\"{ relatedPrompt }\">\n      <span>Extra: {{ relatedPrompt.suggestionText }}</span>\n    </template>\n  </RelatedPromptsTagList>\n</template>\n\n<script setup>\nimport { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_createVNode","_TransitionGroup","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle"],"mappings":"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"}