@empathyco/x-components 6.0.0-alpha.23 → 6.0.0-alpha.231

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

@@ -0,0 +1,198 @@
+import { useResizeObserver } from '@vueuse/core';
+import { defineComponent, ref, computed, watch, onMounted } 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/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 '../../../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';
+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 '../../../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';
+import '../../../components/base-rating.vue2.js';
+import '../../../components/base-rating.vue3.js';
+import '../../../components/base-slider.vue2.js';
+import '../../../components/base-slider.vue3.js';
+import '../../../components/base-switch.vue2.js';
+import '../../../components/base-switch.vue3.js';
+import '../../../components/base-teleport.vue2.js';
+import '../../../components/base-variable-column-grid.vue2.js';
+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$2 from '../../../components/display-click-provider.vue.js';
+import _sfc_main$1 from '../../../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 ChevronDownIcon from '../../../components/icons/chevron-down.vue.js';
+import '../../../components/items-list.vue2.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue2.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue3.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue4.js';
+import '../../../components/layouts/single-column-layout.vue2.js';
+import '../../../components/layouts/single-column-layout.vue3.js';
+import '../../../components/location-provider.vue.js';
+import '../../../components/modals/base-events-modal-close.vue2.js';
+import '../../../components/modals/base-events-modal-open.vue2.js';
+import '../../../components/modals/base-events-modal.vue2.js';
+import '../../../components/modals/base-id-modal-close.vue2.js';
+import '../../../components/modals/base-id-modal-open.vue2.js';
+import '../../../components/modals/base-id-modal.vue2.js';
+import '../../../components/modals/base-modal.vue2.js';
+import '../../../components/modals/base-modal.vue3.js';
+import '../../../components/modals/close-main-modal.vue2.js';
+import '../../../components/modals/main-modal.vue2.js';
+import '../../../components/modals/open-main-modal.vue2.js';
+import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
+import '../../../components/page-selector.vue2.js';
+import '../../../components/page-selector.vue3.js';
+import '../../../components/panels/base-header-toggle-panel.vue2.js';
+import '../../../components/panels/base-header-toggle-panel.vue3.js';
+import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
+import '../../../components/panels/base-id-toggle-panel.vue2.js';
+import '../../../components/panels/base-tabs-panel.vue2.js';
+import '../../../components/panels/base-tabs-panel.vue3.js';
+import '../../../components/panels/base-toggle-panel.vue2.js';
+import '../../../components/result/base-result-add-to-cart.vue2.js';
+import '../../../components/result/base-result-current-price.vue2.js';
+import '../../../components/result/base-result-image.vue2.js';
+import '../../../components/result/base-result-image.vue3.js';
+import '../../../components/result/base-result-link.vue2.js';
+import '../../../components/result/base-result-link.vue3.js';
+import '../../../components/result/base-result-previous-price.vue2.js';
+import '../../../components/result/base-result-rating.vue2.js';
+import '../../../components/result/base-result-rating.vue3.js';
+import '../../../components/result/result-variant-selector.vue2.js';
+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 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 'rxjs';
+import { useState } from '../../../composables/use-state.js';
+import { aiXModule } from '../x-module.js';
+
+var _sfc_main = defineComponent({
+    xModule: aiXModule.name,
+    components: {
+        ChangeHeight,
+        DisplayClickProvider: _sfc_main$2,
+        DisplayEmitter: _sfc_main$1,
+        CollapseHeight,
+        AIStarIcon,
+        ChevronDownIcon,
+        SlidingPanel,
+    },
+    props: {
+        /* The title text displayed */
+        title: {
+            type: String,
+        },
+        /* The classes added to the sliding panel. */
+        slidingPanelClasses: {
+            type: String,
+        },
+        /* The classes added to the sliding panel container. */
+        slidingPanelContainerClasses: {
+            type: String,
+        },
+        /* The classes added to the sliding panel buttons. */
+        slidingPanelButtonsClasses: {
+            type: String,
+        },
+    },
+    setup(props) {
+        const $x = use$x();
+        const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai');
+        const emptyTaggingRequest = { url: '', params: {} };
+        const titleRef = ref(null);
+        const titleExpanded = ref(false);
+        const isTitleOverflowing = ref(false);
+        /**
+         * Checks if the title is overflowing and updates the state.
+         */
+        function updateTitleOverflow() {
+            if (titleExpanded.value) {
+                return;
+            }
+            if (titleRef.value) {
+                isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth;
+            }
+        }
+        /**
+         * Toggles the title expanded state if it is overflowing.
+         */
+        function toggleTitleExpansion() {
+            if (isTitleOverflowing.value) {
+                titleExpanded.value = !titleExpanded.value;
+            }
+        }
+        const title = computed(() => {
+            if (!props.title) {
+                const queriesList = new Intl.ListFormat('en', {
+                    style: 'long',
+                    type: 'conjunction',
+                }).format(queries.value.map(({ query }) => query));
+                return `Searching for ${queriesList}`;
+            }
+            return props.title;
+        });
+        watch(queries, () => {
+            if (queries.value.length > 0) {
+                $x.emit('AiSuggestionsSearchRequestUpdated');
+            }
+        });
+        onMounted(() => {
+            $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' });
+        });
+        useResizeObserver(titleRef, updateTitleOverflow);
+        return {
+            emptyTaggingRequest,
+            isNoResults,
+            isTitleOverflowing,
+            queries,
+            query,
+            suggestionsSearch,
+            tagging,
+            title,
+            titleExpanded,
+            titleRef,
+            toggleTitleExpansion,
+        };
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=ai-carousel.vue2.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,gBAAe,eAAe,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,YAAY;8BACZA,WAAoB;wBACpBC,WAAc;QACd,cAAc;QACd,UAAU;QACV,eAAe;QACf,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,4BAA4B,EAAE;AAC5B,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;AACjB,QAAA,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QACjF,MAAM,mBAAmB,GAAmB,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAC,EAAE;AAElE,QAAA,MAAM,QAAO,GAAI,GAAG,CAAqB,IAAI,CAAA;AAC7C,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,KAAK,CAAA;AAC/B,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;AAEE;AACF,QAAA,SAAS,mBAAmB,GAAA;AAC1B,YAAA,IAAI,aAAa,CAAC,KAAK,EAAE;gBACvB;YACF;AACA,YAAA,IAAI,QAAQ,CAAC,KAAK,EAAE;AAClB,gBAAA,kBAAkB,CAAC,KAAI,GAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,WAAU;YACnF;QACF;AAEA;;AAEE;AACF,QAAA,SAAS,oBAAoB,GAAA;AAC3B,YAAA,IAAI,kBAAkB,CAAC,KAAK,EAAE;AAC5B,gBAAA,aAAa,CAAC,KAAI,GAAI,CAAC,aAAa,CAAC,KAAI;YAC3C;QACF;AAEA,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAI;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBAChB,MAAM,WAAU,GAAI,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AAC5C,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,aAAa;AACpB,iBAAA,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,CAAA;gBACjD,OAAO,CAAA,cAAA,EAAiB,WAAW,CAAA,CAAC;YACtC;YACA,OAAO,KAAK,CAAC,KAAI;AACnB,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CAAC,OAAO,EAAE,MAAI;YACjB,IAAI,OAAO,CAAC,KAAK,CAAC,MAAK,GAAI,CAAC,EAAE;AAC5B,gBAAA,EAAE,CAAC,IAAI,CAAC,mCAAmC,CAAA;YAC7C;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,aAAY,EAAG,CAAA;AACrE,QAAA,CAAC,CAAA;AAED,QAAA,iBAAiB,CAAC,QAAQ,EAAE,mBAAmB,CAAA;QAE/C,OAAO;YACL,mBAAmB;YACnB,WAAW;YACX,kBAAkB;YAClB,OAAO;YACP,KAAK;YACL,iBAAiB;YACjB,OAAO;YACP,KAAK;YACL,aAAa;YACb,QAAQ;YACR,oBAAoB;SACtB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/ai/components/ai-carousel.vue3.js

@@ -0,0 +1,7 @@
+import injectCss from '../../../../tools/inject-css.js';
+
+var css = ".x-ai-carousel{--color:var(--x-ai-carousel-color,#bbc9cf);--color-lighter:var(--x-ai-carousel-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;padding:8px 0;position:relative}.x-ai-carousel-title{align-items:flex-start;cursor:pointer;display:flex;font-size:12px;gap:8px;margin:0 14px 8px}.x-ai-carousel-title-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-ai-carousel-title-text--expanded{white-space:normal}.x-ai-carousel-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem;margin-bottom:auto}.x-ai-carousel-title-button{align-items:center;background:none;border:none;color:var(--color);cursor:pointer;display:flex;justify-content:center;margin-bottom:auto;padding:0}.x-ai-carousel-title-button-icon{aspect-ratio:1/1;height:1rem;transition:transform .3s ease}.x-ai-carousel-title-button-icon--expanded{transform:rotate(180deg)}.x-ai-carousel-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}";
+injectCss(css);
+
+export { css };
+//# sourceMappingURL=ai-carousel.vue3.js.map

package/js/x-modules/ai/components/ai-carousel.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-carousel.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/ai/components/ai-overview.vue.js

@@ -0,0 +1,320 @@
+import _sfc_main from './ai-overview.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, normalizeStyle, withDirectives, Fragment, renderList, vShow, withModifiers } from 'vue';
+import './ai-overview.vue3.js';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+
+const _hoisted_1 = {
+  key: 0,
+  ref: "aiOverviewRef",
+  class: "x-ai-overview",
+  "data-test": "ai-overview-wrapper"
+};
+const _hoisted_2 = { class: "x-ai-overview-main" };
+const _hoisted_3 = {
+  key: 0,
+  class: "x-ai-overview-title-loading",
+  "data-test": "ai-overview-title-loading"
+};
+const _hoisted_4 = {
+  class: "x-ai-overview-title-loading-text",
+  "data-test": "ai-overview-title-loading-text"
+};
+const _hoisted_5 = {
+  class: "x-ai-overview-title",
+  "data-test": "ai-overview-title"
+};
+const _hoisted_6 = { class: "x-ai-overview-content-wrapper" };
+const _hoisted_7 = {
+  key: 0,
+  class: "x-ai-overview-content-title",
+  "data-test": "ai-overview-content-title"
+};
+const _hoisted_8 = ["innerHTML"];
+const _hoisted_9 = {
+  key: 1,
+  class: "x-ai-overview-suggestions",
+  "data-test": "ai-overview-suggestions-container"
+};
+const _hoisted_10 = { class: "x-ai-overview-suggestion-results" };
+const _hoisted_11 = {
+  class: "x-ai-overview-gradient",
+  "data-test": "ai-overview-gradient"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_AIStarIcon = resolveComponent("AIStarIcon");
+  const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
+  const _component_Fade = resolveComponent("Fade");
+  const _component_ChangeHeight = resolveComponent("ChangeHeight");
+  const _component_SpinnerIcon = resolveComponent("SpinnerIcon");
+  const _component_ArrowRightIcon = resolveComponent("ArrowRightIcon");
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
+  const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
+  const _component_CollapseHeight = resolveComponent("CollapseHeight");
+  const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
+  return openBlock(), createBlock(_component_CollapseHeight, null, {
+    default: withCtx(() => [
+      !_ctx.isNoResults ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_1,
+        [
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_component_Fade, { mode: "out-in" }, {
+              default: withCtx(() => [
+                _ctx.suggestionsLoading ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                  _cache[2] || (_cache[2] = createElementVNode(
+                    "span",
+                    { class: "x-ai-overview-title-loading-indicator" },
+                    null,
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode("span", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "title-loading", {}, () => [
+                      createTextVNode(
+                        toDisplayString(_ctx.titleLoading),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ])
+                ])) : (openBlock(), createBlock(_component_DisplayEmitter, {
+                  key: 1,
+                  payload: _ctx.tagging?.toolingDisplay ?? _ctx.emptyTaggingRequest,
+                  "event-metadata": {
+                    feature: "overview",
+                    displayOriginalQuery: _ctx.query || "overview-without-query",
+                    replaceable: false
+                  },
+                  "data-test": "ai-overview-display-emitter"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", _hoisted_5, [
+                      createVNode(_component_AIStarIcon, { class: "x-ai-overview-title-icon" }),
+                      createTextVNode(
+                        toDisplayString(!!_ctx.title ? _ctx.title : _ctx.suggestionText),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["payload", "event-metadata"]))
+              ]),
+              _: 3
+              /* FORWARDED */
+            }),
+            createVNode(_component_ChangeHeight, null, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_6, [
+                  _ctx.title ? (openBlock(), createElementBlock(
+                    "span",
+                    _hoisted_7,
+                    toDisplayString(_ctx.suggestionText),
+                    1
+                    /* TEXT */
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode("div", {
+                    class: normalizeClass(_ctx.contentClasses),
+                    "data-test": "ai-overview-content",
+                    innerHTML: _ctx.parsedResponseText
+                  }, null, 10, _hoisted_8)
+                ])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            renderSlot(_ctx.$slots, "extra-content")
+          ]),
+          createVNode(_component_CollapseHeight, {
+            style: normalizeStyle({
+              "--x-collapse-height-transition-duration": `${300 * _ctx.suggestionsSearch.length}ms`
+            }),
+            "data-test": "ai-overview-collapse-height-suggestions"
+          }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                null,
+                [
+                  !_ctx.suggestionsSearch.length ? (openBlock(), createBlock(_component_SpinnerIcon, {
+                    key: 0,
+                    class: "x-ai-overview-suggestions-loading",
+                    "data-test": "ai-overview-suggestions-loading"
+                  })) : (openBlock(), createElementBlock("div", _hoisted_9, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }, suggestionIndex) => {
+                        return openBlock(), createBlock(_component_DisplayEmitter, {
+                          key: suggestionQuery,
+                          payload: _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplay ?? _ctx.emptyTaggingRequest,
+                          "event-metadata": {
+                            feature: "overview",
+                            displayOriginalQuery: _ctx.query || "overview-without-query",
+                            replaceable: false
+                          },
+                          "data-test": "ai-overview-query-display-emitter"
+                        }, {
+                          default: withCtx(() => [
+                            createElementVNode(
+                              "div",
+                              {
+                                class: normalizeClass(["x-ai-overview-suggestion", {
+                                  "x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
+                                }]),
+                                "data-test": "ai-overview-suggestion",
+                                style: normalizeStyle({ animationDelay: `${suggestionIndex * 300}ms` })
+                              },
+                              [
+                                createVNode(_component_BaseEventButton, {
+                                  class: "x-ai-overview-suggestion-query-btn",
+                                  events: { UserAcceptedAQuery: suggestionQuery }
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(
+                                      toDisplayString(suggestionQuery) + " ",
+                                      1
+                                      /* TEXT */
+                                    ),
+                                    createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
+                                  ]),
+                                  _: 2
+                                  /* DYNAMIC */
+                                }, 1032, ["events"]),
+                                createVNode(_component_DisplayClickProvider, {
+                                  "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayClick,
+                                  "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart,
+                                  "result-feature": "overview"
+                                }, {
+                                  default: withCtx(() => [
+                                    renderSlot(_ctx.$slots, "sliding-panel", { results: queriesResults }, () => [
+                                      createVNode(_component_SlidingPanel, {
+                                        class: normalizeClass(_ctx.slidingPanelsClasses),
+                                        "scroll-container-class": _ctx.slidingPanelContainersClasses,
+                                        "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_10, [
+                                            (openBlock(true), createElementBlock(
+                                              Fragment,
+                                              null,
+                                              renderList(queriesResults, (result, resultIndex) => {
+                                                return openBlock(), createElementBlock(
+                                                  "li",
+                                                  {
+                                                    key: result.id,
+                                                    "data-test": "ai-overview-suggestion-result",
+                                                    class: normalizeClass({
+                                                      "x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
+                                                    }),
+                                                    style: normalizeStyle({
+                                                      animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`
+                                                    })
+                                                  },
+                                                  [
+                                                    renderSlot(_ctx.$slots, "result", { result })
+                                                  ],
+                                                  6
+                                                  /* CLASS, STYLE */
+                                                );
+                                              }),
+                                              128
+                                              /* KEYED_FRAGMENT */
+                                            ))
+                                          ])
+                                        ]),
+                                        _: 2
+                                        /* DYNAMIC */
+                                      }, 1032, ["class", "scroll-container-class", "button-class"])
+                                    ])
+                                  ]),
+                                  _: 2
+                                  /* DYNAMIC */
+                                }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"])
+                              ],
+                              6
+                              /* CLASS, STYLE */
+                            )
+                          ]),
+                          _: 2
+                          /* DYNAMIC */
+                        }, 1032, ["payload", "event-metadata"]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    )),
+                    renderSlot(_ctx.$slots, "suggestions-extra-content")
+                  ]))
+                ],
+                512
+                /* NEED_PATCH */
+              ), [
+                [vShow, _ctx.expanded]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["style"]),
+          createVNode(_component_Fade, null, {
+            default: withCtx(() => [
+              _ctx.queries.length ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "x-ai-overview-toggle-btn-wrapper x-cursor-pointer",
+                "data-test": "ai-overview-toggle-button-wrapper",
+                onClick: _cache[1] || (_cache[1] = ($event) => !_ctx.$slots["cta-button"] && _ctx.emitAndSetExpand(!_ctx.expanded))
+              }, [
+                withDirectives(createElementVNode(
+                  "div",
+                  _hoisted_11,
+                  null,
+                  512
+                  /* NEED_PATCH */
+                ), [
+                  [vShow, !_ctx.expanded]
+                ]),
+                renderSlot(_ctx.$slots, "cta-button", {}, () => [
+                  createElementVNode("button", {
+                    class: "x-ai-overview-toggle-btn",
+                    "data-test": "ai-overview-toggle-button",
+                    onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.emitAndSetExpand(!_ctx.expanded), ["stop"]))
+                  }, [
+                    createTextVNode(
+                      toDisplayString(_ctx.buttonText) + " ",
+                      1
+                      /* TEXT */
+                    ),
+                    createVNode(_component_ChevronDownIcon, {
+                      class: normalizeClass(["x-ai-overview-toggle-btn-icon", { "x-ai-overview-toggle-btn-icon-expanded": _ctx.expanded }])
+                    }, null, 8, ["class"])
+                  ])
+                ])
+              ])) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+            /* FORWARDED */
+          })
+        ],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var aiOverview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { aiOverview as default };
+//# sourceMappingURL=ai-overview.vue.js.map

package/js/x-modules/ai/components/ai-overview.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-overview.vue.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":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_normalizeStyle","_withDirectives","_Fragment","_renderList","_vShow","_withModifiers"],"mappings":"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"}