@empathyco/x-components 6.0.0-alpha.148 → 6.0.0-alpha.149

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 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.149 (2025-09-22)
+
+* style(ai-overview): fade animation to show results (#1880) ([84ee675](https://github.com/empathyco/x/commit/84ee675)), closes [#1880](https://github.com/empathyco/x/issues/1880)
+
+
+
+
+
 ## 6.0.0-alpha.148 (2025-09-18)
 
 * feat(ai-overview): make component more configurable (#1884) ([8b4b579](https://github.com/empathyco/x/commit/8b4b579)), closes [#1884](https://github.com/empathyco/x/issues/1884)

package/docs/API-reference/api/x-components.aioverview.md

@@ -41,6 +41,7 @@ _default: import("vue").DefineComponent<{
     suggestionText: import("vue").ComputedRef<string>;
     setExpanded: (newValue: boolean) => void;
     onExpandButtonClick: (newValue: boolean) => void;
+    shouldAnimateSuggestion: import("vue").Ref<boolean>;
     query: import("vue").ComputedRef<string>;
     tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -1,5 +1,5 @@
 import _sfc_main from './ai-overview.vue2.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, withDirectives, createBlock, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, Fragment, renderList, renderSlot, normalizeClass, vShow, withModifiers } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, toDisplayString, createBlock, createTextVNode, createCommentVNode, normalizeStyle, withDirectives, Fragment, renderList, normalizeClass, renderSlot, vShow, withModifiers } from 'vue';
 import './ai-overview.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -55,22 +55,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SlidingPanel = resolveComponent("SlidingPanel");
   const _component_CollapseHeight = resolveComponent("CollapseHeight");
   const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
-  const _directive_typing = resolveDirective("typing");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createElementVNode("div", _hoisted_2, [
       createVNode(_component_Fade, { mode: "out-in" }, {
         default: withCtx(() => [
           _ctx.suggestionsLoading ? (openBlock(), createElementBlock("span", _hoisted_3, [
             _hoisted_4,
-            withDirectives(createElementVNode(
+            createElementVNode(
               "span",
               _hoisted_5,
-              null,
-              512
-              /* NEED_PATCH */
-            ), [
-              [_directive_typing, { text: _ctx.titleLoading, speed: 50 }]
-            ])
+              toDisplayString(_ctx.titleLoading),
+              1
+              /* TEXT */
+            )
           ])) : (openBlock(), createBlock(_component_DisplayEmitter, {
             key: 1,
             payload: _ctx.tagging?.toolingDisplay ?? { url: "", params: {} },
@@ -133,71 +130,91 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           [
             !_ctx.suggestionsSearch.length ? (openBlock(), createBlock(_component_SpinnerIcon, {
               key: 0,
-              class: "ai-overview-suggestions-loading",
+              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 }) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: suggestionQuery,
-                    class: "x-ai-overview-suggestion"
-                  }, [
-                    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"]),
-                    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
+                renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }, suggestionIndex) => {
+                  return openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: suggestionQuery,
+                      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 }
                       }, {
-                        "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) => {
-                                return openBlock(), createElementBlock("li", {
-                                  key: result.id,
-                                  "data-test": "ai-overview-suggestion-result"
-                                }, [
-                                  renderSlot(_ctx.$slots, "result", { result })
-                                ]);
-                              }),
-                              128
-                              /* KEYED_FRAGMENT */
-                            ))
-                          ])
+                          createTextVNode(
+                            toDisplayString(suggestionQuery) + " ",
+                            1
+                            /* TEXT */
+                          ),
+                          createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
                         ]),
                         _: 2
                         /* DYNAMIC */
-                      }, 1032, ["class", "scroll-container-class", "button-class"])
-                    ])
-                  ]);
+                      }, 1032, ["events"]),
+                      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"])
+                      ])
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  );
                 }),
                 128
                 /* KEYED_FRAGMENT */
@@ -213,37 +230,43 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3
       /* FORWARDED */
     }, 8, ["style"]),
-    _ctx.responseText ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: "x-cursor-pointer",
-      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.onExpandButtonClick(!_ctx.expanded))
-    }, [
-      withDirectives(createElementVNode(
-        "div",
-        _hoisted_11,
-        null,
-        512
-        /* NEED_PATCH */
-      ), [
-        [vShow, !_ctx.expanded]
-      ]),
-      createElementVNode("div", _hoisted_12, [
-        createElementVNode("button", {
-          class: "x-ai-overview-toggle-btn",
-          "data-test": "ai-overview-toggle-button",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.onExpandButtonClick(!_ctx.expanded), ["stop"]))
+    createVNode(_component_Fade, null, {
+      default: withCtx(() => [
+        _ctx.responseText ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "x-cursor-pointer",
+          onClick: _cache[1] || (_cache[1] = ($event) => _ctx.onExpandButtonClick(!_ctx.expanded))
         }, [
-          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)
+          withDirectives(createElementVNode(
+            "div",
+            _hoisted_11,
+            null,
+            512
+            /* NEED_PATCH */
+          ), [
+            [vShow, !_ctx.expanded]
+          ]),
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("button", {
+              class: "x-ai-overview-toggle-btn",
+              "data-test": "ai-overview-toggle-button",
+              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.onExpandButtonClick(!_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)
+      ]),
+      _: 1
+      /* STABLE */
+    })
   ]);
 }
 var aiOverview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

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  <div class=\"x-ai-overview\">\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            v-typing=\"{ text: titleLoading, speed: 50 }\"\n            class=\"x-ai-overview-title-loading-text\"\n            data-test=\"ai-overview-title-loading-text\"\n          />\n        </span>\n        <DisplayEmitter\n          v-else\n          :payload=\"tagging?.toolingDisplay ?? { url: '', params: {} }\"\n          :event-metadata=\"{\n            feature: 'overview',\n            displayOriginalQuery: query,\n            replaceable: false,\n          }\"\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\" data-test=\"ai-overview-content\">\n          <span v-if=\"title\">{{ suggestionText }}</span>\n          <p>{{ responseText }}</p>\n        </div>\n      </ChangeHeight>\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=\"ai-overview-suggestions-loading\"\n          data-test=\"ai-overview-suggestions-loading\"\n        />\n        <div v-else class=\"x-ai-overview-suggestions\" data-test=\"ai-overview-suggestions-container\">\n          <div\n            v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n            :key=\"suggestionQuery\"\n            class=\"x-ai-overview-suggestion\"\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            <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 in queriesResults\"\n                    :key=\"result.id\"\n                    data-test=\"ai-overview-suggestion-result\"\n                  >\n                    <!-- @slot (required) result card -->\n                    <slot name=\"result\" :result=\"result\" />\n                  </li>\n                </ul>\n              </SlidingPanel>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </CollapseHeight>\n    <div v-if=\"responseText\" class=\"x-cursor-pointer\" @click=\"onExpandButtonClick(!expanded)\">\n      <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n      <div class=\"x-ai-overview-toggle-wrapper\" data-test=\"ai-overview-toggle-button-wrapper\">\n        <button\n          class=\"x-ai-overview-toggle-btn\"\n          data-test=\"ai-overview-toggle-button\"\n          @click.stop=\"onExpandButtonClick(!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  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\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  },\n  props: {\n    /**\n     * The text displayed when the question ended loading\n     *\n     * @public\n     */\n    title: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The text displayed when the question is loading.\n     *\n     * @public\n     */\n    titleLoading: {\n      type: String as PropType<string>,\n      default: 'Generating with Empathy AI',\n    },\n    /**\n     * The text displayed on the toggle button when collapsed.\n     *\n     * @public\n     */\n    expandText: {\n      type: String as PropType<string>,\n      default: 'Show more',\n    },\n    /**\n     * The text displayed on the toggle button when expanded.\n     *\n     * @public\n     */\n    collapseText: {\n      type: String as PropType<string>,\n      default: 'Show less',\n    },\n\n    /**\n     * The classes added to each sliding panel for each query.\n     *\n     * @public\n     */\n    slidingPanelsClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel container of each query.\n     *\n     * @public\n     */\n    slidingPanelContainersClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel buttons of each query.\n     *\n     * @public\n     */\n    slidingPanelButtonsClasses: {\n      type: String as PropType<string>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query } = useGetter('ai')\n    const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging } =\n      useState('ai')\n\n    const expanded = ref(false)\n\n    const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n    function onExpandButtonClick(newValue: boolean) {\n      $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n        suggestionText: suggestionText.value,\n        toolingDisplayClick: tagging.value?.toolingDisplayClick,\n      })\n      setExpanded(newValue)\n    }\n\n    function setExpanded(newValue: boolean) {\n      expanded.value = newValue\n    }\n\n    watch(query, () => (expanded.value = false))\n\n    return {\n      buttonText,\n      expanded,\n      responseText,\n      suggestionsLoading,\n      suggestionsSearch,\n      suggestionText,\n      setExpanded,\n      onExpandButtonClick,\n      query,\n      tagging,\n    }\n  },\n})\n</script>\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  @apply x-relative x-rounded-3xl x-bg-[var(--color-lighter)];\n}\n\n.x-ai-overview-main {\n  @apply x-p-16 x-rounded-lg;\n}\n\n.x-ai-overview-title-loading {\n  @apply x-flex x-items-center x-gap-1.5 x-mb-8;\n}\n.x-ai-overview-title-loading-indicator {\n  @apply x-size-3 x-animate-pulse x-rounded-full x-bg-[var(--color)];\n}\n.x-ai-overview-title-loading-text {\n  @apply x-animate-pulse x-text-xs;\n}\n\n.x-ai-overview-title {\n  @apply x-flex x-text-sm x-font-bold x-gap-4 x-items-center x-mb-8;\n}\n.x-ai-overview-title-icon {\n  @apply x-icon x-text-[var(--color)];\n}\n\n.x-ai-overview-content {\n  @apply x-flex x-flex-col x-text-left x-leading-5 x-gap-2;\n}\n.x-ai-overview-content span {\n  @apply x-font-medium;\n}\n\n.x-ai-overview-gradient {\n  @apply x-cursor-pointer x-content-none x-absolute x-w-full x-h-80 x-bottom-5 x-bg-gradient-to-b x-from-0% x-from-transparent x-to-100% x-to-[var(--color-lighter)];\n}\n\n.x-ai-overview-toggle-wrapper {\n  @apply x-flex x-relative x-z-[1];\n}\n.x-ai-overview-toggle-btn {\n  @apply x-button x-button-outlined x-rounded-full x-w-full x-mx-auto sm:x-translate-y-1/2 sm:x-w-[var(--expand-button-width,200px)];\n}\n.x-ai-overview-toggle-btn-icon {\n  @apply x-rotate-0 x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n  @apply x-rotate-180;\n}\n\n.x-ai-overview-suggestion-query-btn {\n  @apply x-button-tight x-mx-16 x-font-bold x-text-gray-900 x-w-fit x-min-h-fit x-flex x-gap-16 x-items-center;\n}\n.x-ai-overview-suggestion-query-btn-icon {\n  @apply x-icon-md;\n}\n.x-ai-overview-suggestions {\n  @apply x-flex x-flex-col x-gap-16 x-pb-16;\n}\n.x-ai-overview-suggestion {\n  @apply x-flex x-flex-col x-gap-8;\n}\n.x-ai-overview-suggestion-results {\n  @apply x-flex x-gap-16 x-px-16;\n}\n\n.ai-overview-suggestions-loading {\n  width: 2.5rem /* 40px */;\n  height: 2.5rem /* 40px */;\n  margin: auto;\n  animation: x-spin 1s linear infinite;\n\n  @keyframes x-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n</style>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_createVNode","_withDirectives","_createBlock","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeStyle","_Fragment","_renderList","_renderSlot","_normalizeClass","_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  <div class=\"x-ai-overview\">\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 class=\"x-ai-overview-title-loading-text\" data-test=\"ai-overview-title-loading-text\">\n            {{ titleLoading }}\n          </span>\n        </span>\n        <DisplayEmitter\n          v-else\n          :payload=\"tagging?.toolingDisplay ?? { url: '', params: {} }\"\n          :event-metadata=\"{\n            feature: 'overview',\n            displayOriginalQuery: query,\n            replaceable: false,\n          }\"\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\" data-test=\"ai-overview-content\">\n          <span v-if=\"title\">{{ suggestionText }}</span>\n          <p>{{ responseText }}</p>\n        </div>\n      </ChangeHeight>\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 v-else class=\"x-ai-overview-suggestions\" data-test=\"ai-overview-suggestions-container\">\n          <div\n            v-for=\"(\n              { query: suggestionQuery, results: queriesResults }, suggestionIndex\n            ) in suggestionsSearch\"\n            :key=\"suggestionQuery\"\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            <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=\"{ animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms` }\"\n                  >\n                    <!-- @slot (required) result card -->\n                    <slot name=\"result\" :result=\"result\" />\n                  </li>\n                </ul>\n              </SlidingPanel>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </CollapseHeight>\n\n    <Fade>\n      <div v-if=\"responseText\" class=\"x-cursor-pointer\" @click=\"onExpandButtonClick(!expanded)\">\n        <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n\n        <div class=\"x-ai-overview-toggle-wrapper\" data-test=\"ai-overview-toggle-button-wrapper\">\n          <button\n            class=\"x-ai-overview-toggle-btn\"\n            data-test=\"ai-overview-toggle-button\"\n            @click.stop=\"onExpandButtonClick(!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</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\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  },\n  props: {\n    /**\n     * The text displayed when the question ended loading\n     *\n     * @public\n     */\n    title: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The text displayed when the question is loading.\n     *\n     * @public\n     */\n    titleLoading: {\n      type: String as PropType<string>,\n      default: 'Generating with Empathy AI',\n    },\n    /**\n     * The text displayed on the toggle button when collapsed.\n     *\n     * @public\n     */\n    expandText: {\n      type: String as PropType<string>,\n      default: 'Show more',\n    },\n    /**\n     * The text displayed on the toggle button when expanded.\n     *\n     * @public\n     */\n    collapseText: {\n      type: String as PropType<string>,\n      default: 'Show less',\n    },\n\n    /**\n     * The classes added to each sliding panel for each query.\n     *\n     * @public\n     */\n    slidingPanelsClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel container of each query.\n     *\n     * @public\n     */\n    slidingPanelContainersClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel buttons of each query.\n     *\n     * @public\n     */\n    slidingPanelButtonsClasses: {\n      type: String as PropType<string>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query } = useGetter('ai')\n    const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging } =\n      useState('ai')\n\n    const expanded = ref(false)\n    const shouldAnimateSuggestion = ref(true)\n\n    const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n    function onExpandButtonClick(newValue: boolean) {\n      $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n        suggestionText: suggestionText.value,\n        toolingDisplayClick: tagging.value?.toolingDisplayClick,\n      })\n      setExpanded(newValue)\n    }\n\n    function setExpanded(newValue: boolean) {\n      expanded.value = newValue\n      !expanded.value && (shouldAnimateSuggestion.value = false)\n    }\n\n    watch(query, () => {\n      expanded.value = false\n      shouldAnimateSuggestion.value = true\n    })\n\n    return {\n      buttonText,\n      expanded,\n      responseText,\n      suggestionsLoading,\n      suggestionsSearch,\n      suggestionText,\n      setExpanded,\n      onExpandButtonClick,\n      shouldAnimateSuggestion,\n      query,\n      tagging,\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  @apply x-relative x-rounded-3xl x-bg-[var(--color-lighter)];\n}\n\n.x-ai-overview-main {\n  @apply x-p-16 x-rounded-lg;\n}\n\n.x-ai-overview-title-loading {\n  @apply x-flex x-items-center x-gap-1.5 x-mb-8;\n}\n.x-ai-overview-title-loading-indicator {\n  @apply x-size-3 x-animate-pulse x-rounded-full x-bg-[var(--color)];\n}\n.x-ai-overview-title-loading-text {\n  @apply x-animate-pulse x-text-xs;\n}\n\n.x-ai-overview-title {\n  @apply x-flex x-text-sm x-font-bold x-gap-4 x-items-center x-mb-8;\n}\n.x-ai-overview-title-icon {\n  @apply x-icon x-text-[var(--color)];\n}\n\n.x-ai-overview-content {\n  @apply x-flex x-flex-col x-text-left x-leading-5 x-gap-2;\n}\n.x-ai-overview-content span {\n  @apply x-font-medium;\n}\n\n.x-ai-overview-gradient {\n  @apply x-cursor-pointer x-content-none x-absolute x-w-full x-h-80 x-bottom-5 x-bg-gradient-to-b x-from-0% x-from-transparent x-to-100% x-to-[var(--color-lighter)];\n}\n\n.x-ai-overview-toggle-wrapper {\n  @apply x-flex x-relative x-z-[1];\n}\n.x-ai-overview-toggle-btn {\n  @apply x-button x-button-outlined x-rounded-full x-w-full x-mx-auto sm:x-transition-all sm:x-duration-500 sm:x-translate-y-1/2 sm:x-w-[var(--expand-button-width,200px)];\n}\n.x-ai-overview-toggle-btn-icon {\n  @apply x-rotate-0 x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n  @apply x-rotate-180;\n}\n\n.x-ai-overview-suggestion-query-btn {\n  @apply x-button-tight x-mx-16 x-font-bold x-text-gray-900 x-w-fit x-min-h-fit x-flex x-gap-16 x-items-center;\n}\n.x-ai-overview-suggestion-query-btn-icon {\n  @apply x-icon-md;\n}\n.x-ai-overview-suggestions {\n  @apply x-flex x-flex-col x-gap-16 x-pb-16;\n}\n.x-ai-overview-suggestion {\n  @apply x-flex x-flex-col x-gap-8;\n}\n.x-ai-overview-suggestion-results {\n  @apply x-flex x-gap-16 x-px-16;\n}\n\n.x-ai-overview-suggestions-loading {\n  width: 2.5rem /* 40px */;\n  height: 2.5rem /* 40px */;\n  margin: auto;\n  animation: x-spin 1s linear infinite;\n\n  @keyframes x-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n\n.x-ai-overview-result-animation {\n  opacity: 0;\n  animation: x-fade 0.3s ease-in-out forwards;\n\n  @keyframes x-fade {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n</style>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_createVNode","_toDisplayString","_createBlock","_withCtx","_createTextVNode","_createCommentVNode","_normalizeStyle","_withDirectives","_Fragment","_renderList","_normalizeClass","_renderSlot","_vShow","_withModifiers"],"mappings":"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"}

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

@@ -194,6 +194,7 @@ var _sfc_main = defineComponent({
         const { query } = useGetter('ai');
         const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging } = useState('ai');
         const expanded = ref(false);
+        const shouldAnimateSuggestion = ref(true);
         const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText));
         function onExpandButtonClick(newValue) {
             $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {
@@ -204,8 +205,12 @@ var _sfc_main = defineComponent({
         }
         function setExpanded(newValue) {
             expanded.value = newValue;
+            !expanded.value && (shouldAnimateSuggestion.value = false);
         }
-        watch(query, () => (expanded.value = false));
+        watch(query, () => {
+            expanded.value = false;
+            shouldAnimateSuggestion.value = true;
+        });
         return {
             buttonText,
             expanded,
@@ -215,6 +220,7 @@ var _sfc_main = defineComponent({
             suggestionText,
             setExpanded,
             onExpandButtonClick,
+            shouldAnimateSuggestion,
             query,
             tagging,
         };

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  <div class=\"x-ai-overview\">\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            v-typing=\"{ text: titleLoading, speed: 50 }\"\n            class=\"x-ai-overview-title-loading-text\"\n            data-test=\"ai-overview-title-loading-text\"\n          />\n        </span>\n        <DisplayEmitter\n          v-else\n          :payload=\"tagging?.toolingDisplay ?? { url: '', params: {} }\"\n          :event-metadata=\"{\n            feature: 'overview',\n            displayOriginalQuery: query,\n            replaceable: false,\n          }\"\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\" data-test=\"ai-overview-content\">\n          <span v-if=\"title\">{{ suggestionText }}</span>\n          <p>{{ responseText }}</p>\n        </div>\n      </ChangeHeight>\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=\"ai-overview-suggestions-loading\"\n          data-test=\"ai-overview-suggestions-loading\"\n        />\n        <div v-else class=\"x-ai-overview-suggestions\" data-test=\"ai-overview-suggestions-container\">\n          <div\n            v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n            :key=\"suggestionQuery\"\n            class=\"x-ai-overview-suggestion\"\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            <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 in queriesResults\"\n                    :key=\"result.id\"\n                    data-test=\"ai-overview-suggestion-result\"\n                  >\n                    <!-- @slot (required) result card -->\n                    <slot name=\"result\" :result=\"result\" />\n                  </li>\n                </ul>\n              </SlidingPanel>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </CollapseHeight>\n    <div v-if=\"responseText\" class=\"x-cursor-pointer\" @click=\"onExpandButtonClick(!expanded)\">\n      <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n      <div class=\"x-ai-overview-toggle-wrapper\" data-test=\"ai-overview-toggle-button-wrapper\">\n        <button\n          class=\"x-ai-overview-toggle-btn\"\n          data-test=\"ai-overview-toggle-button\"\n          @click.stop=\"onExpandButtonClick(!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  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\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  },\n  props: {\n    /**\n     * The text displayed when the question ended loading\n     *\n     * @public\n     */\n    title: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The text displayed when the question is loading.\n     *\n     * @public\n     */\n    titleLoading: {\n      type: String as PropType<string>,\n      default: 'Generating with Empathy AI',\n    },\n    /**\n     * The text displayed on the toggle button when collapsed.\n     *\n     * @public\n     */\n    expandText: {\n      type: String as PropType<string>,\n      default: 'Show more',\n    },\n    /**\n     * The text displayed on the toggle button when expanded.\n     *\n     * @public\n     */\n    collapseText: {\n      type: String as PropType<string>,\n      default: 'Show less',\n    },\n\n    /**\n     * The classes added to each sliding panel for each query.\n     *\n     * @public\n     */\n    slidingPanelsClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel container of each query.\n     *\n     * @public\n     */\n    slidingPanelContainersClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel buttons of each query.\n     *\n     * @public\n     */\n    slidingPanelButtonsClasses: {\n      type: String as PropType<string>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query } = useGetter('ai')\n    const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging } =\n      useState('ai')\n\n    const expanded = ref(false)\n\n    const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n    function onExpandButtonClick(newValue: boolean) {\n      $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n        suggestionText: suggestionText.value,\n        toolingDisplayClick: tagging.value?.toolingDisplayClick,\n      })\n      setExpanded(newValue)\n    }\n\n    function setExpanded(newValue: boolean) {\n      expanded.value = newValue\n    }\n\n    watch(query, () => (expanded.value = false))\n\n    return {\n      buttonText,\n      expanded,\n      responseText,\n      suggestionsLoading,\n      suggestionsSearch,\n      suggestionText,\n      setExpanded,\n      onExpandButtonClick,\n      query,\n      tagging,\n    }\n  },\n})\n</script>\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  @apply x-relative x-rounded-3xl x-bg-[var(--color-lighter)];\n}\n\n.x-ai-overview-main {\n  @apply x-p-16 x-rounded-lg;\n}\n\n.x-ai-overview-title-loading {\n  @apply x-flex x-items-center x-gap-1.5 x-mb-8;\n}\n.x-ai-overview-title-loading-indicator {\n  @apply x-size-3 x-animate-pulse x-rounded-full x-bg-[var(--color)];\n}\n.x-ai-overview-title-loading-text {\n  @apply x-animate-pulse x-text-xs;\n}\n\n.x-ai-overview-title {\n  @apply x-flex x-text-sm x-font-bold x-gap-4 x-items-center x-mb-8;\n}\n.x-ai-overview-title-icon {\n  @apply x-icon x-text-[var(--color)];\n}\n\n.x-ai-overview-content {\n  @apply x-flex x-flex-col x-text-left x-leading-5 x-gap-2;\n}\n.x-ai-overview-content span {\n  @apply x-font-medium;\n}\n\n.x-ai-overview-gradient {\n  @apply x-cursor-pointer x-content-none x-absolute x-w-full x-h-80 x-bottom-5 x-bg-gradient-to-b x-from-0% x-from-transparent x-to-100% x-to-[var(--color-lighter)];\n}\n\n.x-ai-overview-toggle-wrapper {\n  @apply x-flex x-relative x-z-[1];\n}\n.x-ai-overview-toggle-btn {\n  @apply x-button x-button-outlined x-rounded-full x-w-full x-mx-auto sm:x-translate-y-1/2 sm:x-w-[var(--expand-button-width,200px)];\n}\n.x-ai-overview-toggle-btn-icon {\n  @apply x-rotate-0 x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n  @apply x-rotate-180;\n}\n\n.x-ai-overview-suggestion-query-btn {\n  @apply x-button-tight x-mx-16 x-font-bold x-text-gray-900 x-w-fit x-min-h-fit x-flex x-gap-16 x-items-center;\n}\n.x-ai-overview-suggestion-query-btn-icon {\n  @apply x-icon-md;\n}\n.x-ai-overview-suggestions {\n  @apply x-flex x-flex-col x-gap-16 x-pb-16;\n}\n.x-ai-overview-suggestion {\n  @apply x-flex x-flex-col x-gap-8;\n}\n.x-ai-overview-suggestion-results {\n  @apply x-flex x-gap-16 x-px-16;\n}\n\n.ai-overview-suggestions-loading {\n  width: 2.5rem /* 40px */;\n  height: 2.5rem /* 40px */;\n  margin: auto;\n  animation: x-spin 1s linear infinite;\n\n  @keyframes x-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n</style>\n"],"names":["DisplayEmitter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqIA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;IACD,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,cAAc;QACd,eAAe;QACf,eAAe;QACf,cAAc;QACd,YAAY;QACZ,IAAI;QACJ,YAAY;QACZ,WAAW;wBACXA,WAAc;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAA0B;AACjC,SAAA;AACD;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,4BAA4B;AACtC,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;AACD;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;AAED;;;;AAIE;AACF,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,MAA0B;AACjC,SAAA;AACD;;;;AAIE;AACF,QAAA,6BAA6B,EAAE;AAC7B,YAAA,IAAI,EAAE,MAA0B;AACjC,SAAA;AACD;;;;AAIE;AACF,QAAA,0BAA0B,EAAE;AAC1B,YAAA,IAAI,EAAE,MAA0B;AACjC,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;QACjB,MAAM,EAAE,KAAI,EAAI,GAAE,SAAS,CAAC,IAAI,CAAA,CAAA;AAChC,QAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,SAAU,GACrF,QAAQ,CAAC,IAAI,CAAA,CAAA;AAEf,QAAA,MAAM,QAAS,GAAE,GAAG,CAAC,KAAK,CAAA,CAAA;QAE1B,MAAM,UAAW,GAAE,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAM,GAAE,KAAK,CAAC,YAAW,GAAI,KAAK,CAAC,UAAU,CAAC,CAAA,CAAA;QAE1F,SAAS,mBAAmB,CAAC,QAAiB,EAAA;YAC5C,EAAE,CAAC,IAAI,CAAC,mCAAmC,EAAE,QAAQ,CAAC,KAAK,EAAE;gBAC3D,cAAc,EAAE,cAAc,CAAC,KAAK;AACpC,gBAAA,mBAAmB,EAAE,OAAO,CAAC,KAAK,EAAE,mBAAmB;AACxD,aAAA,CAAA,CAAA;YACD,WAAW,CAAC,QAAQ,CAAA,CAAA;SACtB;QAEA,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,QAAQ,CAAC,KAAI,GAAI,QAAO,CAAA;SAC1B;AAEA,QAAA,KAAK,CAAC,KAAK,EAAE,OAAO,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,CAAA,CAAA;QAE3C,OAAO;YACL,UAAU;YACV,QAAQ;YACR,YAAY;YACZ,kBAAkB;YAClB,iBAAiB;YACjB,cAAc;YACd,WAAW;YACX,mBAAmB;YACnB,KAAK;YACL,OAAO;SACT,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n  <div class=\"x-ai-overview\">\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 class=\"x-ai-overview-title-loading-text\" data-test=\"ai-overview-title-loading-text\">\n            {{ titleLoading }}\n          </span>\n        </span>\n        <DisplayEmitter\n          v-else\n          :payload=\"tagging?.toolingDisplay ?? { url: '', params: {} }\"\n          :event-metadata=\"{\n            feature: 'overview',\n            displayOriginalQuery: query,\n            replaceable: false,\n          }\"\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\" data-test=\"ai-overview-content\">\n          <span v-if=\"title\">{{ suggestionText }}</span>\n          <p>{{ responseText }}</p>\n        </div>\n      </ChangeHeight>\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 v-else class=\"x-ai-overview-suggestions\" data-test=\"ai-overview-suggestions-container\">\n          <div\n            v-for=\"(\n              { query: suggestionQuery, results: queriesResults }, suggestionIndex\n            ) in suggestionsSearch\"\n            :key=\"suggestionQuery\"\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            <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=\"{ animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms` }\"\n                  >\n                    <!-- @slot (required) result card -->\n                    <slot name=\"result\" :result=\"result\" />\n                  </li>\n                </ul>\n              </SlidingPanel>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </CollapseHeight>\n\n    <Fade>\n      <div v-if=\"responseText\" class=\"x-cursor-pointer\" @click=\"onExpandButtonClick(!expanded)\">\n        <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n\n        <div class=\"x-ai-overview-toggle-wrapper\" data-test=\"ai-overview-toggle-button-wrapper\">\n          <button\n            class=\"x-ai-overview-toggle-btn\"\n            data-test=\"ai-overview-toggle-button\"\n            @click.stop=\"onExpandButtonClick(!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</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\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  },\n  props: {\n    /**\n     * The text displayed when the question ended loading\n     *\n     * @public\n     */\n    title: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The text displayed when the question is loading.\n     *\n     * @public\n     */\n    titleLoading: {\n      type: String as PropType<string>,\n      default: 'Generating with Empathy AI',\n    },\n    /**\n     * The text displayed on the toggle button when collapsed.\n     *\n     * @public\n     */\n    expandText: {\n      type: String as PropType<string>,\n      default: 'Show more',\n    },\n    /**\n     * The text displayed on the toggle button when expanded.\n     *\n     * @public\n     */\n    collapseText: {\n      type: String as PropType<string>,\n      default: 'Show less',\n    },\n\n    /**\n     * The classes added to each sliding panel for each query.\n     *\n     * @public\n     */\n    slidingPanelsClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel container of each query.\n     *\n     * @public\n     */\n    slidingPanelContainersClasses: {\n      type: String as PropType<string>,\n    },\n    /**\n     * The classes added to each sliding panel buttons of each query.\n     *\n     * @public\n     */\n    slidingPanelButtonsClasses: {\n      type: String as PropType<string>,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query } = useGetter('ai')\n    const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging } =\n      useState('ai')\n\n    const expanded = ref(false)\n    const shouldAnimateSuggestion = ref(true)\n\n    const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n    function onExpandButtonClick(newValue: boolean) {\n      $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n        suggestionText: suggestionText.value,\n        toolingDisplayClick: tagging.value?.toolingDisplayClick,\n      })\n      setExpanded(newValue)\n    }\n\n    function setExpanded(newValue: boolean) {\n      expanded.value = newValue\n      !expanded.value && (shouldAnimateSuggestion.value = false)\n    }\n\n    watch(query, () => {\n      expanded.value = false\n      shouldAnimateSuggestion.value = true\n    })\n\n    return {\n      buttonText,\n      expanded,\n      responseText,\n      suggestionsLoading,\n      suggestionsSearch,\n      suggestionText,\n      setExpanded,\n      onExpandButtonClick,\n      shouldAnimateSuggestion,\n      query,\n      tagging,\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  @apply x-relative x-rounded-3xl x-bg-[var(--color-lighter)];\n}\n\n.x-ai-overview-main {\n  @apply x-p-16 x-rounded-lg;\n}\n\n.x-ai-overview-title-loading {\n  @apply x-flex x-items-center x-gap-1.5 x-mb-8;\n}\n.x-ai-overview-title-loading-indicator {\n  @apply x-size-3 x-animate-pulse x-rounded-full x-bg-[var(--color)];\n}\n.x-ai-overview-title-loading-text {\n  @apply x-animate-pulse x-text-xs;\n}\n\n.x-ai-overview-title {\n  @apply x-flex x-text-sm x-font-bold x-gap-4 x-items-center x-mb-8;\n}\n.x-ai-overview-title-icon {\n  @apply x-icon x-text-[var(--color)];\n}\n\n.x-ai-overview-content {\n  @apply x-flex x-flex-col x-text-left x-leading-5 x-gap-2;\n}\n.x-ai-overview-content span {\n  @apply x-font-medium;\n}\n\n.x-ai-overview-gradient {\n  @apply x-cursor-pointer x-content-none x-absolute x-w-full x-h-80 x-bottom-5 x-bg-gradient-to-b x-from-0% x-from-transparent x-to-100% x-to-[var(--color-lighter)];\n}\n\n.x-ai-overview-toggle-wrapper {\n  @apply x-flex x-relative x-z-[1];\n}\n.x-ai-overview-toggle-btn {\n  @apply x-button x-button-outlined x-rounded-full x-w-full x-mx-auto sm:x-transition-all sm:x-duration-500 sm:x-translate-y-1/2 sm:x-w-[var(--expand-button-width,200px)];\n}\n.x-ai-overview-toggle-btn-icon {\n  @apply x-rotate-0 x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n  @apply x-rotate-180;\n}\n\n.x-ai-overview-suggestion-query-btn {\n  @apply x-button-tight x-mx-16 x-font-bold x-text-gray-900 x-w-fit x-min-h-fit x-flex x-gap-16 x-items-center;\n}\n.x-ai-overview-suggestion-query-btn-icon {\n  @apply x-icon-md;\n}\n.x-ai-overview-suggestions {\n  @apply x-flex x-flex-col x-gap-16 x-pb-16;\n}\n.x-ai-overview-suggestion {\n  @apply x-flex x-flex-col x-gap-8;\n}\n.x-ai-overview-suggestion-results {\n  @apply x-flex x-gap-16 x-px-16;\n}\n\n.x-ai-overview-suggestions-loading {\n  width: 2.5rem /* 40px */;\n  height: 2.5rem /* 40px */;\n  margin: auto;\n  animation: x-spin 1s linear infinite;\n\n  @keyframes x-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n\n.x-ai-overview-result-animation {\n  opacity: 0;\n  animation: x-fade 0.3s ease-in-out forwards;\n\n  @keyframes x-fade {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n</style>\n"],"names":["DisplayEmitter"],"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{border-radius:.5rem;padding:16px}.x-ai-overview-title-loading{align-items:center;display:flex;gap:.375rem;margin-bottom:8px}.x-ai-overview-title-loading-indicator{animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}@keyframes x-pulse{50%{opacity:.5}}.x-ai-overview-title-loading-text{animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:12px}.x-ai-overview-title{align-items:center;display:flex;font-size:14px;font-weight:700;gap:4px;margin-bottom:8px}.x-ai-overview-title-icon{vector-effect:non-scaling-stroke;--enableIconOffset:var(--OFF);--fontSize:14px;align-items:center;aspect-ratio:1/1;color:var(--color);display:flex;flex:0 0 auto;font-family:font-awesome;font-size:var(--enableIconOffset) var(--fontSize);height:16px;justify-content:center;margin-top:var(--enableIconOffset,calc(var(--iconVerticalOffset)*-1));transform:var(--enableIconOffset,translateY(var(--iconVerticalOffset,0)));width:auto}.x-ai-overview-content{display:flex;flex-direction:column;gap:2px;line-height:1.25rem;text-align:left}.x-ai-overview-content span{font-weight:500}.x-ai-overview-gradient{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-from-position:0%;--tw-gradient-to:var(--color-lighter) var(--tw-gradient-to-position);--tw-gradient-to-position:100%;--tw-content:none;background-image:linear-gradient(to bottom,var(--tw-gradient-stops));bottom:1.25rem;content:var(--tw-content);cursor:pointer;height:80px;position:absolute;width:100%}.x-ai-overview-toggle-wrapper{display:flex;position:relative;z-index:1}.x-ai-overview-toggle-btn{align-content:center;align-items:center;background-color:var(--button-color-50,#283034);border-style:solid;border-width:1px;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;flex-flow:row nowrap;font-family:Inter,sans-serif;font-weight:700;justify-content:center;letter-spacing:0;line-height:1.4}.x-ai-overview-toggle-btn:active,.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}[dir=ltr] .x-ai-overview-toggle-btn{padding-left:16px}[dir=ltr] .x-ai-overview-toggle-btn,[dir=rtl] .x-ai-overview-toggle-btn{padding-right:16px}[dir=rtl] .x-ai-overview-toggle-btn{padding-left:16px}.x-ai-overview-toggle-btn{font-size:14px;gap:8px;min-height:40px}.x-ai-overview-toggle-btn.x-selected{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}.x-ai-overview-toggle-btn.x-selected:active,.x-ai-overview-toggle-btn.x-selected:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034)}.x-ai-overview-toggle-btn{--button-disabled-border-color:#dbe2e5;background-color:#fff;border-color:var(--button-color-50,#283034);color:var(--button-color-50,#283034)}.x-ai-overview-toggle-btn.x-selected,.x-ai-overview-toggle-btn:active,.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}.x-ai-overview-toggle-btn.x-selected:active,.x-ai-overview-toggle-btn.x-selected:hover{background-color:#fff;color:var(--button-color-50,#283034)}.x-ai-overview-toggle-btn:disabled{cursor:not-allowed}.x-ai-overview-toggle-btn:disabled,.x-ai-overview-toggle-btn:disabled.x-selected{background-color:var(--button-disabled-background-color,#eef1f2);border-color:var(--button-disabled-border-color,#eef1f2);color:#dbe2e5}.x-button-group:not([class*=gap])>.x-ai-overview-toggle-btn+.x-button{border-left:unset}.x-ai-overview-toggle-btn{border-radius:9999px;margin-left:auto;margin-right:auto;width:100%}@media (min-width:640px){.x-ai-overview-toggle-btn{--tw-translate-y:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{vector-effect:non-scaling-stroke;--enableIconOffset:var(--OFF);--fontSize:14px;--tw-rotate:0deg;align-items:center;aspect-ratio:1/1;display:flex;flex:0 0 auto;font-family:font-awesome;font-size:var(--enableIconOffset) var(--fontSize);height:16px;justify-content:center;margin-top:var(--enableIconOffset,calc(var(--iconVerticalOffset)*-1));transform:var(--enableIconOffset,translateY(var(--iconVerticalOffset,0)));transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:auto}.x-ai-overview-toggle-btn-icon,.x-ai-overview-toggle-btn-icon-expanded{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.x-ai-overview-toggle-btn-icon-expanded{--tw-rotate:180deg}.x-ai-overview-suggestion-query-btn{--button-disabled-border-color:transparent;--button-disabled-background-color:transparent;background-color:transparent;border-color:transparent;color:var(--button-color-50,#283034)}.x-ai-overview-suggestion-query-btn:active,.x-ai-overview-suggestion-query-btn:hover{background-color:transparent;border-color:transparent;color:var(--button-color-75,#000)}[dir=ltr] .x-ai-overview-suggestion-query-btn{padding-left:0}[dir=ltr] .x-ai-overview-suggestion-query-btn,[dir=rtl] .x-ai-overview-suggestion-query-btn{padding-right:0}[dir=rtl] .x-ai-overview-suggestion-query-btn{padding-left:0}.x-ai-overview-suggestion-query-btn.x-selected{background-color:transparent;border-color:transparent;color:var(--button-color-75,#000)}.x-ai-overview-suggestion-query-btn.x-selected:active,.x-ai-overview-suggestion-query-btn.x-selected:hover{background-color:transparent;border-color:transparent;color:var(--button-color-50,#283034)}.x-ai-overview-suggestion-query-btn{--tw-text-opacity:1;align-items:center;color:rgb(17 24 39/var(--tw-text-opacity));display:flex;font-weight:700;gap:16px;margin-left:16px;margin-right:16px;min-height:fit-content;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{--fontSize:14px;height:16px}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:16px;padding-bottom:16px}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:8px}.x-ai-overview-suggestion-results{display:flex;gap:16px;padding-left:16px;padding-right:16px}.ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}@keyframes x-spin{to{transform:rotate(1turn)}}";
+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{border-radius:.5rem;padding:16px}.x-ai-overview-title-loading{align-items:center;display:flex;gap:.375rem;margin-bottom:8px}.x-ai-overview-title-loading-indicator{animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}@keyframes x-pulse{50%{opacity:.5}}.x-ai-overview-title-loading-text{animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:12px}.x-ai-overview-title{align-items:center;display:flex;font-size:14px;font-weight:700;gap:4px;margin-bottom:8px}.x-ai-overview-title-icon{vector-effect:non-scaling-stroke;--enableIconOffset:var(--OFF);--fontSize:14px;align-items:center;aspect-ratio:1/1;color:var(--color);display:flex;flex:0 0 auto;font-family:font-awesome;font-size:var(--enableIconOffset) var(--fontSize);height:16px;justify-content:center;margin-top:var(--enableIconOffset,calc(var(--iconVerticalOffset)*-1));transform:var(--enableIconOffset,translateY(var(--iconVerticalOffset,0)));width:auto}.x-ai-overview-content{display:flex;flex-direction:column;gap:2px;line-height:1.25rem;text-align:left}.x-ai-overview-content span{font-weight:500}.x-ai-overview-gradient{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-from-position:0%;--tw-gradient-to:var(--color-lighter) var(--tw-gradient-to-position);--tw-gradient-to-position:100%;--tw-content:none;background-image:linear-gradient(to bottom,var(--tw-gradient-stops));bottom:1.25rem;content:var(--tw-content);cursor:pointer;height:80px;position:absolute;width:100%}.x-ai-overview-toggle-wrapper{display:flex;position:relative;z-index:1}.x-ai-overview-toggle-btn{align-content:center;align-items:center;background-color:var(--button-color-50,#283034);border-style:solid;border-width:1px;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;flex-flow:row nowrap;font-family:Inter,sans-serif;font-weight:700;justify-content:center;letter-spacing:0;line-height:1.4}.x-ai-overview-toggle-btn:active,.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}[dir=ltr] .x-ai-overview-toggle-btn{padding-left:16px}[dir=ltr] .x-ai-overview-toggle-btn,[dir=rtl] .x-ai-overview-toggle-btn{padding-right:16px}[dir=rtl] .x-ai-overview-toggle-btn{padding-left:16px}.x-ai-overview-toggle-btn{font-size:14px;gap:8px;min-height:40px}.x-ai-overview-toggle-btn.x-selected{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}.x-ai-overview-toggle-btn.x-selected:active,.x-ai-overview-toggle-btn.x-selected:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034)}.x-ai-overview-toggle-btn{--button-disabled-border-color:#dbe2e5;background-color:#fff;border-color:var(--button-color-50,#283034);color:var(--button-color-50,#283034)}.x-ai-overview-toggle-btn.x-selected,.x-ai-overview-toggle-btn:active,.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}.x-ai-overview-toggle-btn.x-selected:active,.x-ai-overview-toggle-btn.x-selected:hover{background-color:#fff;color:var(--button-color-50,#283034)}.x-ai-overview-toggle-btn:disabled{cursor:not-allowed}.x-ai-overview-toggle-btn:disabled,.x-ai-overview-toggle-btn:disabled.x-selected{background-color:var(--button-disabled-background-color,#eef1f2);border-color:var(--button-disabled-border-color,#eef1f2);color:#dbe2e5}.x-button-group:not([class*=gap])>.x-ai-overview-toggle-btn+.x-button{border-left:unset}.x-ai-overview-toggle-btn{border-radius:9999px;margin-left:auto;margin-right:auto;width:100%}@media (min-width:640px){.x-ai-overview-toggle-btn{--tw-translate-y:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{vector-effect:non-scaling-stroke;--enableIconOffset:var(--OFF);--fontSize:14px;--tw-rotate:0deg;align-items:center;aspect-ratio:1/1;display:flex;flex:0 0 auto;font-family:font-awesome;font-size:var(--enableIconOffset) var(--fontSize);height:16px;justify-content:center;margin-top:var(--enableIconOffset,calc(var(--iconVerticalOffset)*-1));transform:var(--enableIconOffset,translateY(var(--iconVerticalOffset,0)));transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:auto}.x-ai-overview-toggle-btn-icon,.x-ai-overview-toggle-btn-icon-expanded{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.x-ai-overview-toggle-btn-icon-expanded{--tw-rotate:180deg}.x-ai-overview-suggestion-query-btn{--button-disabled-border-color:transparent;--button-disabled-background-color:transparent;background-color:transparent;border-color:transparent;color:var(--button-color-50,#283034)}.x-ai-overview-suggestion-query-btn:active,.x-ai-overview-suggestion-query-btn:hover{background-color:transparent;border-color:transparent;color:var(--button-color-75,#000)}[dir=ltr] .x-ai-overview-suggestion-query-btn{padding-left:0}[dir=ltr] .x-ai-overview-suggestion-query-btn,[dir=rtl] .x-ai-overview-suggestion-query-btn{padding-right:0}[dir=rtl] .x-ai-overview-suggestion-query-btn{padding-left:0}.x-ai-overview-suggestion-query-btn.x-selected{background-color:transparent;border-color:transparent;color:var(--button-color-75,#000)}.x-ai-overview-suggestion-query-btn.x-selected:active,.x-ai-overview-suggestion-query-btn.x-selected:hover{background-color:transparent;border-color:transparent;color:var(--button-color-50,#283034)}.x-ai-overview-suggestion-query-btn{--tw-text-opacity:1;align-items:center;color:rgb(17 24 39/var(--tw-text-opacity));display:flex;font-weight:700;gap:16px;margin-left:16px;margin-right:16px;min-height:fit-content;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{--fontSize:14px;height:16px}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:16px;padding-bottom:16px}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:8px}.x-ai-overview-suggestion-results{display:flex;gap:16px;padding-left:16px;padding-right:16px}.x-ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}@keyframes x-spin{to{transform:rotate(1turn)}}.x-ai-overview-result-animation{animation:x-fade .3s ease-in-out forwards;opacity:0}@keyframes x-fade{0%{opacity:0}to{opacity:1}}";
 injectCss(css);
 
 export { css, css as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.148",
+  "version": "6.0.0-alpha.149",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -142,5 +142,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "c7a91e21ba1ad85ae694e8145dbc438084390b80"
+  "gitHead": "674a475f15468a2c674955ce60f46ac5da2cac13"
 }

package/report/x-components.api.json

@@ -1609,7 +1609,16 @@
             },
             {
               "kind": "Content",
-              "text": "<string>;\n    setExpanded: (newValue: boolean) => void;\n    onExpandButtonClick: (newValue: boolean) => void;\n    query: import(\"vue\")."
+              "text": "<string>;\n    setExpanded: (newValue: boolean) => void;\n    onExpandButtonClick: (newValue: boolean) => void;\n    shouldAnimateSuggestion: import(\"vue\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "@vue/reactivity!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean>;\n    query: import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -1753,7 +1762,7 @@
           "name": "AiOverview",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 62
+            "endIndex": 64
           }
         },
         {

package/report/x-components.api.md

@@ -252,6 +252,7 @@ suggestionsSearch: ComputedRef<AiSuggestionSearch[]>;
 suggestionText: ComputedRef<string>;
 setExpanded: (newValue: boolean) => void;
 onExpandButtonClick: (newValue: boolean) => void;
+shouldAnimateSuggestion: Ref<boolean>;
 query: ComputedRef<string>;
 tagging: ComputedRef<AiSuggestionTagging | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {

package/types/x-modules/ai/components/ai-overview.vue.d.ts

@@ -68,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     suggestionText: import("vue").ComputedRef<string>;
     setExpanded: (newValue: boolean) => void;
     onExpandButtonClick: (newValue: boolean) => void;
+    shouldAnimateSuggestion: import("vue").Ref<boolean>;
     query: import("vue").ComputedRef<string>;
     tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/types/x-modules/ai/components/ai-overview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-overview.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAoC/B;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAIlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;4BAqBH,OAAO;oCARC,OAAO;;;;IAvE9C;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAIlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;AA5EtC,wBAoHE"}
+{"version":3,"file":"ai-overview.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAoC/B;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAIlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;4BAsBH,OAAO;oCARC,OAAO;;;;;IAxE9C;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAIlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;IAElC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;AA5EtC,wBA0HE"}