@empathyco/x-components 6.0.0-alpha.175 → 6.0.0-alpha.177

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.177 (2025-11-05)
+
+* feat(ai): refactor title styling and add margin to content title in ai-overview component ([9d8dc8d](https://github.com/empathyco/x/commit/9d8dc8d))
+
+
+
+
+
+## 6.0.0-alpha.176 (2025-11-04)
+
+* refactor(ai): rename `x-ai-overview-content` to `x-ai-overview-conten… (#1922) ([3908d74](https://github.com/empathyco/x/commit/3908d74)), closes [#1922](https://github.com/empathyco/x/issues/1922)
+
+
+
+
+
 ## 6.0.0-alpha.175 (2025-11-04)
 
 * feat(ai): add `contentClasses` prop and styling improvements to ai-overview component ([6f887c9](https://github.com/empathyco/x/commit/6f887c9))

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

@@ -1,5 +1,5 @@
 import _sfc_main from './ai-overview.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, renderSlot, createTextVNode, toDisplayString, normalizeClass, createCommentVNode, normalizeStyle, withDirectives, Fragment, renderList, vShow, withModifiers } from 'vue';
+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';
 
@@ -30,19 +30,24 @@ const _hoisted_6 = {
   class: "x-ai-overview-title",
   "data-test": "ai-overview-title"
 };
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = ["innerHTML"];
-const _hoisted_9 = {
+const _hoisted_7 = { class: "x-ai-overview-content-wrapper" };
+const _hoisted_8 = {
+  key: 0,
+  class: "x-ai-overview-content-title",
+  "data-test": "ai-overview-content-title"
+};
+const _hoisted_9 = ["innerHTML"];
+const _hoisted_10 = {
   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 = {
+const _hoisted_11 = { class: "x-ai-overview-suggestion-results" };
+const _hoisted_12 = {
   class: "x-ai-overview-gradient",
   "data-test": "ai-overview-gradient"
 };
-const _hoisted_12 = { class: "x-ai-overview-toggle-wrapper" };
+const _hoisted_13 = { class: "x-ai-overview-toggle-wrapper" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_AIStarIcon = resolveComponent("AIStarIcon");
   const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
@@ -104,25 +109,20 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             createVNode(_component_ChangeHeight, null, {
               default: withCtx(() => [
-                createElementVNode(
-                  "div",
-                  {
-                    class: normalizeClass(["x-ai-overview-content", _ctx.contentClasses]),
-                    "data-test": "ai-overview-content"
-                  },
-                  [
-                    _ctx.title ? (openBlock(), createElementBlock(
-                      "span",
-                      _hoisted_7,
-                      toDisplayString(_ctx.suggestionText),
-                      1
-                      /* TEXT */
-                    )) : createCommentVNode("v-if", true),
-                    createElementVNode("div", { innerHTML: _ctx.parsedResponseText }, null, 8, _hoisted_8)
-                  ],
-                  2
-                  /* CLASS */
-                )
+                createElementVNode("div", _hoisted_7, [
+                  _ctx.title ? (openBlock(), createElementBlock(
+                    "span",
+                    _hoisted_8,
+                    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_9)
+                ])
               ]),
               _: 1
               /* STABLE */
@@ -144,7 +144,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     key: 0,
                     class: "x-ai-overview-suggestions-loading",
                     "data-test": "ai-overview-suggestions-loading"
-                  })) : (openBlock(), createElementBlock("div", _hoisted_9, [
+                  })) : (openBlock(), createElementBlock("div", _hoisted_10, [
                     (openBlock(true), createElementBlock(
                       Fragment,
                       null,
@@ -208,7 +208,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                                           renderSlot(_ctx.$slots, "sliding-panels-right-button")
                                         ]),
                                         default: withCtx(() => [
-                                          createElementVNode("ul", _hoisted_10, [
+                                          createElementVNode("ul", _hoisted_11, [
                                             (openBlock(true), createElementBlock(
                                               Fragment,
                                               null,
@@ -279,14 +279,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, [
                 withDirectives(createElementVNode(
                   "div",
-                  _hoisted_11,
+                  _hoisted_12,
                   null,
                   512
                   /* NEED_PATCH */
                 ), [
                   [vShow, !_ctx.expanded]
                 ]),
-                createElementVNode("div", _hoisted_12, [
+                createElementVNode("div", _hoisted_13, [
                   createElementVNode("button", {
                     class: "x-ai-overview-toggle-btn",
                     "data-test": "ai-overview-toggle-button",

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

@@ -1 +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\n            class=\"x-ai-overview-content\"\n            :class=\"contentClasses\"\n            data-test=\"ai-overview-content\"\n          >\n            <span v-if=\"title\">{{ suggestionText }}</span>\n            <div v-html=\"parsedResponseText\" />\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-cursor-pointer\"\n          data-test=\"ai-overview-toggle-button-wrapper\"\n          @click=\"emitAndSetExpand(!expanded)\"\n        >\n          <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n          <div class=\"x-ai-overview-toggle-wrapper\">\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          </div>\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('AiOverviewMounted', 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 {\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  line-height: 1.25rem;\n  gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n  font-weight: 500;\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-wrapper {\n  display: flex;\n  position: relative;\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}\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"],"names":["_createElementVNode","_createBlock","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_withCtx","_normalizeClass","_createCommentVNode","_normalizeStyle","_withDirectives","_Fragment","_renderList","_vShow","_withModifiers"],"mappings":"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"}
+{"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-cursor-pointer\"\n          data-test=\"ai-overview-toggle-button-wrapper\"\n          @click=\"emitAndSetExpand(!expanded)\"\n        >\n          <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n          <div class=\"x-ai-overview-toggle-wrapper\">\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          </div>\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('AiOverviewMounted', 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-wrapper {\n  display: flex;\n  position: relative;\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}\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"],"names":["_createElementVNode","_createBlock","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_withCtx","_createCommentVNode","_normalizeClass","_normalizeStyle","_withDirectives","_Fragment","_renderList","_vShow","_withModifiers"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div\n      v-if=\"!isNoResults\"\n      ref=\"aiOverviewRef\"\n      class=\"x-ai-overview\"\n      data-test=\"ai-overview-wrapper\"\n    >\n      <div class=\"x-ai-overview-main\">\n        <Fade mode=\"out-in\">\n          <span\n            v-if=\"suggestionsLoading\"\n            class=\"x-ai-overview-title-loading\"\n            data-test=\"ai-overview-title-loading\"\n          >\n            <span class=\"x-ai-overview-title-loading-indicator\" />\n            <span\n              class=\"x-ai-overview-title-loading-text\"\n              data-test=\"ai-overview-title-loading-text\"\n            >\n              <slot name=\"title-loading\">\n                {{ titleLoading }}\n              </slot>\n            </span>\n          </span>\n          <DisplayEmitter\n            v-else\n            :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n            :event-metadata=\"{\n              feature: 'overview',\n              displayOriginalQuery: query || 'overview-without-query',\n              replaceable: false,\n            }\"\n            data-test=\"ai-overview-display-emitter\"\n          >\n            <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n              <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n            </span>\n          </DisplayEmitter>\n        </Fade>\n        <ChangeHeight>\n          <div\n            class=\"x-ai-overview-content\"\n            :class=\"contentClasses\"\n            data-test=\"ai-overview-content\"\n          >\n            <span v-if=\"title\">{{ suggestionText }}</span>\n            <div v-html=\"parsedResponseText\" />\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-cursor-pointer\"\n          data-test=\"ai-overview-toggle-button-wrapper\"\n          @click=\"emitAndSetExpand(!expanded)\"\n        >\n          <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n          <div class=\"x-ai-overview-toggle-wrapper\">\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          </div>\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('AiOverviewMounted', 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 {\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  line-height: 1.25rem;\n  gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n  font-weight: 500;\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-wrapper {\n  display: flex;\n  position: relative;\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}\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"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}
+{"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div\n      v-if=\"!isNoResults\"\n      ref=\"aiOverviewRef\"\n      class=\"x-ai-overview\"\n      data-test=\"ai-overview-wrapper\"\n    >\n      <div class=\"x-ai-overview-main\">\n        <Fade mode=\"out-in\">\n          <span\n            v-if=\"suggestionsLoading\"\n            class=\"x-ai-overview-title-loading\"\n            data-test=\"ai-overview-title-loading\"\n          >\n            <span class=\"x-ai-overview-title-loading-indicator\" />\n            <span\n              class=\"x-ai-overview-title-loading-text\"\n              data-test=\"ai-overview-title-loading-text\"\n            >\n              <slot name=\"title-loading\">\n                {{ titleLoading }}\n              </slot>\n            </span>\n          </span>\n          <DisplayEmitter\n            v-else\n            :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n            :event-metadata=\"{\n              feature: 'overview',\n              displayOriginalQuery: query || 'overview-without-query',\n              replaceable: false,\n            }\"\n            data-test=\"ai-overview-display-emitter\"\n          >\n            <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n              <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n            </span>\n          </DisplayEmitter>\n        </Fade>\n        <ChangeHeight>\n          <div class=\"x-ai-overview-content-wrapper\">\n            <span\n              v-if=\"title\"\n              class=\"x-ai-overview-content-title\"\n              data-test=\"ai-overview-content-title\"\n              >{{ suggestionText }}\n            </span>\n            <div\n              :class=\"contentClasses\"\n              data-test=\"ai-overview-content\"\n              v-html=\"parsedResponseText\"\n            />\n          </div>\n        </ChangeHeight>\n        <slot name=\"extra-content\" />\n      </div>\n      <CollapseHeight\n        :style=\"{\n          '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n        }\"\n        data-test=\"ai-overview-collapse-height-suggestions\"\n      >\n        <div v-show=\"expanded\">\n          <SpinnerIcon\n            v-if=\"!suggestionsSearch.length\"\n            class=\"x-ai-overview-suggestions-loading\"\n            data-test=\"ai-overview-suggestions-loading\"\n          />\n          <div\n            v-else\n            class=\"x-ai-overview-suggestions\"\n            data-test=\"ai-overview-suggestions-container\"\n          >\n            <DisplayEmitter\n              v-for=\"(\n                { query: suggestionQuery, results: queriesResults }, suggestionIndex\n              ) in suggestionsSearch\"\n              :key=\"suggestionQuery\"\n              :payload=\"\n                tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n              \"\n              :event-metadata=\"{\n                feature: 'overview',\n                displayOriginalQuery: query || 'overview-without-query',\n                replaceable: false,\n              }\"\n              data-test=\"ai-overview-query-display-emitter\"\n            >\n              <div\n                class=\"x-ai-overview-suggestion\"\n                data-test=\"ai-overview-suggestion\"\n                :class=\"{\n                  'x-ai-overview-result-animation': shouldAnimateSuggestion,\n                }\"\n                :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n              >\n                <BaseEventButton\n                  class=\"x-ai-overview-suggestion-query-btn\"\n                  :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n                >\n                  {{ suggestionQuery }}\n                  <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n                </BaseEventButton>\n\n                <DisplayClickProvider\n                  :tooling-display-tagging=\"\n                    tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n                  \"\n                  :tooling-add2-cart-tagging=\"\n                    tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n                  \"\n                  result-feature=\"overview\"\n                >\n                  <slot name=\"sliding-panel\" :results=\"queriesResults\">\n                    <SlidingPanel\n                      :class=\"slidingPanelsClasses\"\n                      :scroll-container-class=\"slidingPanelContainersClasses\"\n                      :button-class=\"slidingPanelButtonsClasses\"\n                      :reset-on-content-change=\"false\"\n                    >\n                      <template #sliding-panel-addons=\"{ arrivedState }\">\n                        <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n                      </template>\n                      <template #sliding-panel-left-button>\n                        <slot name=\"sliding-panels-left-button\" />\n                      </template>\n                      <template #sliding-panel-right-button>\n                        <slot name=\"sliding-panels-right-button\" />\n                      </template>\n                      <ul class=\"x-ai-overview-suggestion-results\">\n                        <li\n                          v-for=\"(result, resultIndex) in queriesResults\"\n                          :key=\"result.id\"\n                          data-test=\"ai-overview-suggestion-result\"\n                          :class=\"{\n                            'x-ai-overview-result-animation': shouldAnimateSuggestion,\n                          }\"\n                          :style=\"{\n                            animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n                          }\"\n                        >\n                          <!-- @slot (required) result card -->\n                          <slot name=\"result\" :result=\"result\" />\n                        </li>\n                      </ul>\n                    </SlidingPanel>\n                  </slot>\n                </DisplayClickProvider>\n              </div>\n            </DisplayEmitter>\n            <slot name=\"suggestions-extra-content\" />\n          </div>\n        </div>\n      </CollapseHeight>\n\n      <Fade>\n        <div\n          v-if=\"queries.length\"\n          class=\"x-cursor-pointer\"\n          data-test=\"ai-overview-toggle-button-wrapper\"\n          @click=\"emitAndSetExpand(!expanded)\"\n        >\n          <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n          <div class=\"x-ai-overview-toggle-wrapper\">\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          </div>\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('AiOverviewMounted', 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-wrapper {\n  display: flex;\n  position: relative;\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}\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"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-ai-overview{--color:var(--x-ai-overview-color,#bbc9cf);--color-lighter:var(--x-ai-overview-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;position:relative}.x-ai-overview-main{margin:0 auto;max-width:var(--x-ai-overview-main-max-width,none);padding:1rem}.x-ai-overview-title{font-size:.875rem;font-weight:700;gap:.25rem}.x-ai-overview-title,.x-ai-overview-title-loading{align-items:center;display:flex;margin-bottom:.5rem}.x-ai-overview-title-loading{gap:.375rem}.x-ai-overview-title-loading-indicator{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}.x-ai-overview-title-loading-text{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:.75rem}.x-ai-overview-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem}.x-ai-overview-content{display:flex;flex-direction:column;gap:.5rem;line-height:1.25rem;text-align:left}.x-ai-overview-content span{font-weight:500}.x-ai-overview-gradient{background-image:linear-gradient(to bottom,transparent 0,var(--color-lighter) 100%);border-radius:1.5rem;bottom:0;content:none;cursor:pointer;height:100%;position:absolute;width:100%}.x-ai-overview-toggle-wrapper{display:flex;position:relative}.x-ai-overview-toggle-btn{align-items:center;background-color:#fff;border-color:var(--button-color-50,#283034);border-radius:9999px;border-style:solid;border-width:1px;color:var(--button-color-50,#283034);display:flex;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;margin:auto;min-height:2.5rem;padding-left:1rem;padding-right:1rem;width:100%}.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}@media (min-width:640px){.x-ai-overview-toggle-btn{transform:translateY(50%);transition-duration:.5s;transition-property:all;width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{aspect-ratio:1/1;height:1rem;transform:rotate(0deg);transition-duration:.3s;transition-property:all}.x-ai-overview-toggle-btn-icon-expanded{transform:rotate(180deg)}.x-ai-overview-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:.5rem}.x-ai-overview-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}@keyframes x-spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}";
+var css = ".x-ai-overview{--color:var(--x-ai-overview-color,#bbc9cf);--color-lighter:var(--x-ai-overview-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;position:relative}.x-ai-overview-main{margin:0 auto;max-width:var(--x-ai-overview-main-max-width,none);padding:1rem}.x-ai-overview-title{font-size:.875rem;font-weight:700;gap:.25rem}.x-ai-overview-title,.x-ai-overview-title-loading{align-items:center;display:flex;margin-bottom:.5rem}.x-ai-overview-title-loading{gap:.375rem}.x-ai-overview-title-loading-indicator{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}.x-ai-overview-title-loading-text{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:.75rem}.x-ai-overview-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem}.x-ai-overview-content-wrapper{display:flex;flex-direction:column;line-height:1.25rem;text-align:left}.x-ai-overview-content-title{font-weight:500;margin-bottom:8px}.x-ai-overview-gradient{background-image:linear-gradient(to bottom,transparent 0,var(--color-lighter) 100%);border-radius:1.5rem;bottom:0;content:none;cursor:pointer;height:100%;position:absolute;width:100%}.x-ai-overview-toggle-wrapper{display:flex;position:relative}.x-ai-overview-toggle-btn{align-items:center;background-color:#fff;border-color:var(--button-color-50,#283034);border-radius:9999px;border-style:solid;border-width:1px;color:var(--button-color-50,#283034);display:flex;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;margin:auto;min-height:2.5rem;padding-left:1rem;padding-right:1rem;width:100%}.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}@media (min-width:640px){.x-ai-overview-toggle-btn{transform:translateY(50%);transition-duration:.5s;transition-property:all;width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{aspect-ratio:1/1;height:1rem;transform:rotate(0deg);transition-duration:.3s;transition-property:all}.x-ai-overview-toggle-btn-icon-expanded{transform:rotate(180deg)}.x-ai-overview-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:.5rem}.x-ai-overview-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}@keyframes x-spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}";
 injectCss(css);
 
 export { css, css as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.175",
+  "version": "6.0.0-alpha.177",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "c89d8cd2d9133d07df0102d6388cc59b23147559"
+  "gitHead": "27055b9422f326df0b4e1474c1ddb9508f734d08"
 }