@empathyco/x-components 6.0.0-alpha.127 → 6.0.0-alpha.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 6.0.0-alpha.128 (2025-08-22)
7
+
8
+ * fix: fixed test ([e202a8d](https://github.com/empathyco/x/commit/e202a8d))
9
+ * test: AIOverview tested gradient div ([2f7b634](https://github.com/empathyco/x/commit/2f7b634))
10
+ * style(ai-overview): improved gradient in AiOverview ([42bb328](https://github.com/empathyco/x/commit/42bb328))
11
+ * feat(ai): AIOverview reset on query change ([cd11378](https://github.com/empathyco/x/commit/cd11378))
12
+ * feat(ai): AIOverview slot expansion transition ([c87e086](https://github.com/empathyco/x/commit/c87e086))
13
+
14
+
15
+
16
+
17
+
6
18
  ## 6.0.0-alpha.127 (2025-08-21)
7
19
 
8
20
  * fix(ai): register module to use ai overview ([59cfbd7](https://github.com/empathyco/x/commit/59cfbd7))
@@ -1 +1 @@
1
- {"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n <transition\n name=\"x-collapse-height-\"\n :appear=\"appear\"\n @enter=\"expand\"\n @after-enter=\"cleanUpAnimationStyles\"\n @leave=\"collapse\"\n >\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\nexport default defineComponent({\n name: 'CollapseHeight',\n props: {\n /**\n * Indicates if the transition must be applied on the initial render of the node.\n */\n appear: {\n type: Boolean,\n default: true,\n },\n },\n setup() {\n return useCollapseAnimation('height')\n },\n // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n transition: height 0.3s ease-out;\n overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,oBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AANZ,IAAA,OAAA,EAAAC,OAAA,CASI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AATZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,SAAA,CAAA,CAAA,CAAA;;;;;;"}
1
+ {"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n <transition\n name=\"x-collapse-height-\"\n :appear=\"appear\"\n @enter=\"expand\"\n @after-enter=\"cleanUpAnimationStyles\"\n @leave=\"collapse\"\n >\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\nexport default defineComponent({\n name: 'CollapseHeight',\n props: {\n /**\n * Indicates if the transition must be applied on the initial render of the node.\n */\n appear: {\n type: Boolean,\n default: true,\n },\n },\n setup() {\n return useCollapseAnimation('height')\n },\n // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":["_createBlock","_Transition","_withCtx","_renderSlot"],"mappings":";;;;;;sBACEA,WASa,CAAAC,UAAA,EAAA;AAAA,IARX,IAAK,EAAA,oBAAA;AAAA,IACJ,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,IACR,OAAO,EAAA,IAAA,CAAA,MAAA;AAAA,IACP,YAAa,EAAA,IAAA,CAAA,sBAAA;AAAA,IACb,OAAO,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AANZ,IAAA,OAAA,EAAAC,OAAA,CASI,MAAQ;AAAA,MAARC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;AATZ,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,SAAA,CAAA,CAAA,CAAA;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"collapse-height.vue2.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n <transition\n name=\"x-collapse-height-\"\n :appear=\"appear\"\n @enter=\"expand\"\n @after-enter=\"cleanUpAnimationStyles\"\n @leave=\"collapse\"\n >\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\nexport default defineComponent({\n name: 'CollapseHeight',\n props: {\n /**\n * Indicates if the transition must be applied on the initial render of the node.\n */\n appear: {\n type: Boolean,\n default: true,\n },\n },\n setup() {\n return useCollapseAnimation('height')\n },\n // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n transition: height 0.3s ease-out;\n overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAA,CAAA;KACrC;;AAEF,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"collapse-height.vue2.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n <transition\n name=\"x-collapse-height-\"\n :appear=\"appear\"\n @enter=\"expand\"\n @after-enter=\"cleanUpAnimationStyles\"\n @leave=\"collapse\"\n >\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useCollapseAnimation } from './use-collapse-animation'\n\n/**\n * Renders a transition wrapping the element passed in the default slot and animating\n * it with a height animation.\n *\n * @public\n */\nexport default defineComponent({\n name: 'CollapseHeight',\n props: {\n /**\n * Indicates if the transition must be applied on the initial render of the node.\n */\n appear: {\n type: Boolean,\n default: true,\n },\n },\n setup() {\n return useCollapseAnimation('height')\n },\n // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAA,CAAA;KACrC;;AAEF,CAAA,CAAA;;;;"}
@@ -1,6 +1,6 @@
1
1
  import injectCss from '../../../tools/inject-css.js';
2
2
 
3
- var css = ".x-collapse-height--enter-active,.x-collapse-height--leave-active{overflow:hidden;transition:height .3s ease-out}";
3
+ var css = ".x-collapse-height--enter-active,.x-collapse-height--leave-active{overflow:hidden;transition:height var(--x-collapse-height-transition-duration,.3s) ease-out}";
4
4
  injectCss(css);
5
5
 
6
6
  export { css, css as default };
@@ -1,5 +1,5 @@
1
1
  import _sfc_main from './ai-overview.vue2.js';
2
- import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, withDirectives, createElementVNode, normalizeClass, createVNode, createElementBlock, createTextVNode, toDisplayString, Fragment, renderList, renderSlot, createCommentVNode, vShow } from 'vue';
2
+ import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, withDirectives, createElementVNode, normalizeClass, createVNode, createElementBlock, createTextVNode, toDisplayString, Fragment, renderList, normalizeStyle, renderSlot, createCommentVNode, vShow } from 'vue';
3
3
  import './ai-overview.vue3.js';
4
4
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
5
 
@@ -35,14 +35,8 @@ const _hoisted_7 = {
35
35
  class: "x-ai-overview-content",
36
36
  "data-test": "ai-overview-content"
37
37
  };
38
- const _hoisted_8 = {
39
- key: 0,
40
- "data-test": "ai-overview-slot"
41
- };
42
- const _hoisted_9 = {
43
- key: 0,
44
- class: "x-ai-overview-expand-wrapper"
45
- };
38
+ const _hoisted_8 = { "data-test": "ai-overview-slot" };
39
+ const _hoisted_9 = { class: "x-ai-overview-expand-wrapper" };
46
40
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
47
41
  const _component_AIStarIcon = resolveComponent("AIStarIcon");
48
42
  const _component_Fade = resolveComponent("Fade");
@@ -118,34 +112,60 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
118
112
  /* STABLE */
119
113
  })
120
114
  ]),
121
- createVNode(_component_CollapseHeight, null, {
115
+ _ctx.question?.content.searchQueries.length ? (openBlock(), createBlock(_component_CollapseHeight, {
116
+ key: 0,
117
+ style: normalizeStyle({
118
+ "--x-collapse-height-transition-duration": `${300 * _ctx.question.content.searchQueries.length}ms`
119
+ })
120
+ }, {
122
121
  default: withCtx(() => [
123
- _ctx.expanded ? (openBlock(), createElementBlock("div", _hoisted_8, [
124
- renderSlot(_ctx.$slots, "default", { question: _ctx.question }, () => [
125
- _ctx.question ? (openBlock(), createBlock(_component_AiQuestionResults, {
126
- key: 0,
127
- question: _ctx.question
128
- }, null, 8, ["question"])) : createCommentVNode("v-if", true)
129
- ])
130
- ])) : createCommentVNode("v-if", true)
122
+ withDirectives(createElementVNode(
123
+ "div",
124
+ _hoisted_8,
125
+ [
126
+ renderSlot(_ctx.$slots, "default", { question: _ctx.question }, () => [
127
+ _ctx.question ? (openBlock(), createBlock(_component_AiQuestionResults, {
128
+ key: 0,
129
+ question: _ctx.question
130
+ }, null, 8, ["question"])) : createCommentVNode("v-if", true)
131
+ ])
132
+ ],
133
+ 512
134
+ /* NEED_PATCH */
135
+ ), [
136
+ [vShow, _ctx.expanded]
137
+ ])
131
138
  ]),
132
139
  _: 3
133
140
  /* FORWARDED */
134
- }),
135
- !_ctx.loading && !_ctx.expanded ? (openBlock(), createElementBlock("div", _hoisted_9, [
136
- createElementVNode("button", {
137
- class: "x-ai-overview-expand-btn",
138
- "data-test": "ai-overview-expand-btn",
139
- onClick: _cache[0] || (_cache[0] = (...args) => _ctx.open && _ctx.open(...args))
140
- }, [
141
- createTextVNode(
142
- toDisplayString(_ctx.buttonText) + " ",
143
- 1
144
- /* TEXT */
145
- ),
146
- createVNode(_component_ChevronDownIcon, { class: "x-ai-overview-expand-btn-icon" })
147
- ])
148
- ])) : createCommentVNode("v-if", true)
141
+ }, 8, ["style"])) : createCommentVNode("v-if", true),
142
+ !_ctx.loading && !_ctx.expanded ? (openBlock(), createElementBlock(
143
+ Fragment,
144
+ { key: 1 },
145
+ [
146
+ createElementVNode("div", {
147
+ class: "x-ai-overview-gradient",
148
+ "data-test": "ai-overview-gradient",
149
+ onClick: _cache[0] || (_cache[0] = (...args) => _ctx.open && _ctx.open(...args))
150
+ }),
151
+ createElementVNode("div", _hoisted_9, [
152
+ createElementVNode("button", {
153
+ class: "x-ai-overview-expand-btn",
154
+ "data-test": "ai-overview-expand-btn",
155
+ onClick: _cache[1] || (_cache[1] = (...args) => _ctx.open && _ctx.open(...args))
156
+ }, [
157
+ createTextVNode(
158
+ toDisplayString(_ctx.buttonText) + " ",
159
+ 1
160
+ /* TEXT */
161
+ ),
162
+ createVNode(_component_ChevronDownIcon, { class: "x-ai-overview-expand-btn-icon" })
163
+ ])
164
+ ])
165
+ ],
166
+ 64
167
+ /* STABLE_FRAGMENT */
168
+ )) : createCommentVNode("v-if", true)
149
169
  ],
150
170
  2
151
171
  /* CLASS */
@@ -1 +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-show=\"loading || question\"\n class=\"x-ai-overview\"\n :class=\"{ 'x-ai-overview--expanded': expanded, 'x-ai-overview--loading': loading }\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"loading\"\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 <span v-else class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ title }}\n </span>\n </Fade>\n <ChangeHeight>\n <div\n v-if=\"loading\"\n class=\"x-ai-overview-loading-content\"\n data-test=\"ai-overview-loading-content\"\n >\n <span v-for=\"i in 4\" :key=\"i\" />\n </div>\n <div v-else class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span>{{ question?.suggestionText }}</span>\n <p>{{ question?.content.responseText }}</p>\n </div>\n </ChangeHeight>\n </div>\n <CollapseHeight>\n <div v-if=\"expanded\" data-test=\"ai-overview-slot\">\n <slot :question=\"question\">\n <AiQuestionResults v-if=\"question\" :question=\"question\" />\n </slot>\n </div>\n </CollapseHeight>\n <div v-if=\"!loading && !expanded\" class=\"x-ai-overview-expand-wrapper\">\n <button class=\"x-ai-overview-expand-btn\" data-test=\"ai-overview-expand-btn\" @click=\"open\">\n {{ buttonText }}\n <ChevronDownIcon class=\"x-ai-overview-expand-btn-icon\" />\n </button>\n </div>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\nimport { ChangeHeight, CollapseHeight, Fade } from '../../../components'\nimport { AIStarIcon, ChevronDownIcon } from '../../../components/icons'\nimport { useGetter } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\nimport AiQuestionResults from './ai-question-results.vue'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AiQuestionResults,\n ChangeHeight,\n AIStarIcon,\n ChevronDownIcon,\n CollapseHeight,\n Fade,\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 default: 'Empathy AI Overview',\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 expand button.\n *\n * @public\n */\n buttonText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n },\n setup() {\n const { currentQuestion: question, currentQuestionLoading: loading } = useGetter('ai')\n\n const expanded = ref(false)\n\n function open() {\n expanded.value = true\n }\n\n watch(loading, () => {\n if (loading.value) {\n expanded.value = false\n }\n })\n\n return {\n expanded,\n question,\n open,\n loading,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-overview {\n @apply x-relative x-rounded-lg;\n}\n.x-ai-overview--expanded,\n.x-ai-overview--loading .x-ai-overview-main {\n @apply x-bg-lead-25;\n}\n\n.x-ai-overview-main {\n @apply x-p-16 x-rounded-lg x-bg-gradient-to-b x-from-lead-25 x-from-85% x-to-transparent x-to-100%;\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-lead-50;\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-lead-50;\n}\n\n.x-ai-overview-loading-content {\n @apply x-flex x-w-full x-flex-col x-gap-4 x-animate-pulse;\n}\n.x-ai-overview-loading-content > span:first-child {\n @apply x-h-16 x-w-full x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(2) {\n @apply x-h-16 x-w-3/4 x-rounded-full x-bg-gradient-to-r x-from-lead-75 x-to-lead-50 x-opacity-50;\n}\n.x-ai-overview-loading-content > span:nth-child(3) {\n @apply x-h-16 x-w-11/12 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(4) {\n @apply x-h-16 x-w-1/2 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75 x-opacity-75;\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-expand-wrapper {\n @apply x-flex;\n}\n.x-ai-overview-expand-btn {\n @apply x-button x-button-outlined x-rounded-full x-w-full;\n}\n.x-ai-overview-expand-btn-icon {\n @apply x-icon;\n}\n</style>\n"],"names":["_createElementVNode","_createBlock","_withDirectives","_normalizeClass","_createVNode","_openBlock","_createElementBlock","_createTextVNode","_toDisplayString","_Fragment","_renderList","_renderSlot","_createCommentVNode","_vShow"],"mappings":"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"}
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-show=\"loading || question\"\n class=\"x-ai-overview\"\n :class=\"{ 'x-ai-overview--expanded': expanded, 'x-ai-overview--loading': loading }\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"loading\"\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 <span v-else class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ title }}\n </span>\n </Fade>\n <ChangeHeight>\n <div\n v-if=\"loading\"\n class=\"x-ai-overview-loading-content\"\n data-test=\"ai-overview-loading-content\"\n >\n <span v-for=\"i in 4\" :key=\"i\" />\n </div>\n <div v-else class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span>{{ question?.suggestionText }}</span>\n <p>{{ question?.content.responseText }}</p>\n </div>\n </ChangeHeight>\n </div>\n <CollapseHeight\n v-if=\"question?.content.searchQueries.length\"\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * question.content.searchQueries.length}ms`,\n }\"\n >\n <div v-show=\"expanded\" data-test=\"ai-overview-slot\">\n <slot :question=\"question\">\n <AiQuestionResults v-if=\"question\" :question=\"question\" />\n </slot>\n </div>\n </CollapseHeight>\n <template v-if=\"!loading && !expanded\">\n <div class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" @click=\"open\" />\n <div class=\"x-ai-overview-expand-wrapper\">\n <button class=\"x-ai-overview-expand-btn\" data-test=\"ai-overview-expand-btn\" @click=\"open\">\n {{ buttonText }}\n <ChevronDownIcon class=\"x-ai-overview-expand-btn-icon\" />\n </button>\n </div>\n </template>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\nimport { ChangeHeight, CollapseHeight, Fade } from '../../../components'\nimport { AIStarIcon, ChevronDownIcon } from '../../../components/icons'\nimport { useGetter } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\nimport AiQuestionResults from './ai-question-results.vue'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AiQuestionResults,\n ChangeHeight,\n AIStarIcon,\n ChevronDownIcon,\n CollapseHeight,\n Fade,\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 default: 'Empathy AI Overview',\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 expand button.\n *\n * @public\n */\n buttonText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n },\n setup() {\n const { currentQuestion: question, currentQuestionLoading: loading, query } = useGetter('ai')\n\n const expanded = ref(false)\n\n function open() {\n expanded.value = true\n }\n\n watch(query, () => (expanded.value = false))\n\n return {\n expanded,\n question,\n open,\n loading,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-overview {\n @apply x-relative x-rounded-lg x-bg-lead-25;\n}\n\n.x-ai-overview:not(.x-ai-overview--loading, .x-ai-overview--expanded) {\n @apply x-rounded-b-3xl;\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-lead-50;\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-lead-50;\n}\n\n.x-ai-overview-loading-content {\n @apply x-flex x-w-full x-flex-col x-gap-4 x-animate-pulse;\n}\n.x-ai-overview-loading-content > span:first-child {\n @apply x-h-16 x-w-full x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(2) {\n @apply x-h-16 x-w-3/4 x-rounded-full x-bg-gradient-to-r x-from-lead-75 x-to-lead-50 x-opacity-50;\n}\n.x-ai-overview-loading-content > span:nth-child(3) {\n @apply x-h-16 x-w-11/12 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(4) {\n @apply x-h-16 x-w-1/2 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75 x-opacity-75;\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-transparent x-to-lead-25;\n}\n\n.x-ai-overview-expand-wrapper {\n @apply x-flex x-relative x-z-[1];\n}\n.x-ai-overview-expand-btn {\n @apply x-button x-button-outlined x-rounded-full x-w-full;\n}\n.x-ai-overview-expand-btn-icon {\n @apply x-icon;\n}\n</style>\n"],"names":["_createElementVNode","_createBlock","_withDirectives","_normalizeClass","_createVNode","_openBlock","_createElementBlock","_createTextVNode","_toDisplayString","_Fragment","_renderList","_normalizeStyle","_withCtx","_renderSlot","_createCommentVNode","_vShow"],"mappings":"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"}
@@ -152,16 +152,12 @@ var _sfc_main = defineComponent({
152
152
  },
153
153
  },
154
154
  setup() {
155
- const { currentQuestion: question, currentQuestionLoading: loading } = useGetter('ai');
155
+ const { currentQuestion: question, currentQuestionLoading: loading, query } = useGetter('ai');
156
156
  const expanded = ref(false);
157
157
  function open() {
158
158
  expanded.value = true;
159
159
  }
160
- watch(loading, () => {
161
- if (loading.value) {
162
- expanded.value = false;
163
- }
164
- });
160
+ watch(query, () => (expanded.value = false));
165
161
  return {
166
162
  expanded,
167
163
  question,
@@ -1 +1 @@
1
- {"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div\n v-show=\"loading || question\"\n class=\"x-ai-overview\"\n :class=\"{ 'x-ai-overview--expanded': expanded, 'x-ai-overview--loading': loading }\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"loading\"\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 <span v-else class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ title }}\n </span>\n </Fade>\n <ChangeHeight>\n <div\n v-if=\"loading\"\n class=\"x-ai-overview-loading-content\"\n data-test=\"ai-overview-loading-content\"\n >\n <span v-for=\"i in 4\" :key=\"i\" />\n </div>\n <div v-else class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span>{{ question?.suggestionText }}</span>\n <p>{{ question?.content.responseText }}</p>\n </div>\n </ChangeHeight>\n </div>\n <CollapseHeight>\n <div v-if=\"expanded\" data-test=\"ai-overview-slot\">\n <slot :question=\"question\">\n <AiQuestionResults v-if=\"question\" :question=\"question\" />\n </slot>\n </div>\n </CollapseHeight>\n <div v-if=\"!loading && !expanded\" class=\"x-ai-overview-expand-wrapper\">\n <button class=\"x-ai-overview-expand-btn\" data-test=\"ai-overview-expand-btn\" @click=\"open\">\n {{ buttonText }}\n <ChevronDownIcon class=\"x-ai-overview-expand-btn-icon\" />\n </button>\n </div>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\nimport { ChangeHeight, CollapseHeight, Fade } from '../../../components'\nimport { AIStarIcon, ChevronDownIcon } from '../../../components/icons'\nimport { useGetter } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\nimport AiQuestionResults from './ai-question-results.vue'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AiQuestionResults,\n ChangeHeight,\n AIStarIcon,\n ChevronDownIcon,\n CollapseHeight,\n Fade,\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 default: 'Empathy AI Overview',\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 expand button.\n *\n * @public\n */\n buttonText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n },\n setup() {\n const { currentQuestion: question, currentQuestionLoading: loading } = useGetter('ai')\n\n const expanded = ref(false)\n\n function open() {\n expanded.value = true\n }\n\n watch(loading, () => {\n if (loading.value) {\n expanded.value = false\n }\n })\n\n return {\n expanded,\n question,\n open,\n loading,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-overview {\n @apply x-relative x-rounded-lg;\n}\n.x-ai-overview--expanded,\n.x-ai-overview--loading .x-ai-overview-main {\n @apply x-bg-lead-25;\n}\n\n.x-ai-overview-main {\n @apply x-p-16 x-rounded-lg x-bg-gradient-to-b x-from-lead-25 x-from-85% x-to-transparent x-to-100%;\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-lead-50;\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-lead-50;\n}\n\n.x-ai-overview-loading-content {\n @apply x-flex x-w-full x-flex-col x-gap-4 x-animate-pulse;\n}\n.x-ai-overview-loading-content > span:first-child {\n @apply x-h-16 x-w-full x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(2) {\n @apply x-h-16 x-w-3/4 x-rounded-full x-bg-gradient-to-r x-from-lead-75 x-to-lead-50 x-opacity-50;\n}\n.x-ai-overview-loading-content > span:nth-child(3) {\n @apply x-h-16 x-w-11/12 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(4) {\n @apply x-h-16 x-w-1/2 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75 x-opacity-75;\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-expand-wrapper {\n @apply x-flex;\n}\n.x-ai-overview-expand-btn {\n @apply x-button x-button-outlined x-rounded-full x-w-full;\n}\n.x-ai-overview-expand-btn-icon {\n @apply x-icon;\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;IACD,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,iBAAiB;QACjB,YAAY;QACZ,UAAU;QACV,eAAe;QACf,cAAc;QACd,IAAI;AACL,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,qBAAqB;AAC/B,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;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,sBAAsB,EAAE,SAAU,GAAE,SAAS,CAAC,IAAI,CAAA,CAAA;AAErF,QAAA,MAAM,QAAS,GAAE,GAAG,CAAC,KAAK,CAAA,CAAA;AAE1B,QAAA,SAAS,IAAI,GAAA;AACX,YAAA,QAAQ,CAAC,KAAI,GAAI,IAAG,CAAA;SACtB;AAEA,QAAA,KAAK,CAAC,OAAO,EAAE,MAAM;AACnB,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,gBAAA,QAAQ,CAAC,KAAI,GAAI,KAAI,CAAA;aACvB;AACF,SAAC,CAAA,CAAA;QAED,OAAO;YACL,QAAQ;YACR,QAAQ;YACR,IAAI;YACJ,OAAO;SACT,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
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-show=\"loading || question\"\n class=\"x-ai-overview\"\n :class=\"{ 'x-ai-overview--expanded': expanded, 'x-ai-overview--loading': loading }\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"loading\"\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 <span v-else class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ title }}\n </span>\n </Fade>\n <ChangeHeight>\n <div\n v-if=\"loading\"\n class=\"x-ai-overview-loading-content\"\n data-test=\"ai-overview-loading-content\"\n >\n <span v-for=\"i in 4\" :key=\"i\" />\n </div>\n <div v-else class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span>{{ question?.suggestionText }}</span>\n <p>{{ question?.content.responseText }}</p>\n </div>\n </ChangeHeight>\n </div>\n <CollapseHeight\n v-if=\"question?.content.searchQueries.length\"\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * question.content.searchQueries.length}ms`,\n }\"\n >\n <div v-show=\"expanded\" data-test=\"ai-overview-slot\">\n <slot :question=\"question\">\n <AiQuestionResults v-if=\"question\" :question=\"question\" />\n </slot>\n </div>\n </CollapseHeight>\n <template v-if=\"!loading && !expanded\">\n <div class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" @click=\"open\" />\n <div class=\"x-ai-overview-expand-wrapper\">\n <button class=\"x-ai-overview-expand-btn\" data-test=\"ai-overview-expand-btn\" @click=\"open\">\n {{ buttonText }}\n <ChevronDownIcon class=\"x-ai-overview-expand-btn-icon\" />\n </button>\n </div>\n </template>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\nimport { ChangeHeight, CollapseHeight, Fade } from '../../../components'\nimport { AIStarIcon, ChevronDownIcon } from '../../../components/icons'\nimport { useGetter } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\nimport AiQuestionResults from './ai-question-results.vue'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AiQuestionResults,\n ChangeHeight,\n AIStarIcon,\n ChevronDownIcon,\n CollapseHeight,\n Fade,\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 default: 'Empathy AI Overview',\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 expand button.\n *\n * @public\n */\n buttonText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n },\n setup() {\n const { currentQuestion: question, currentQuestionLoading: loading, query } = useGetter('ai')\n\n const expanded = ref(false)\n\n function open() {\n expanded.value = true\n }\n\n watch(query, () => (expanded.value = false))\n\n return {\n expanded,\n question,\n open,\n loading,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-overview {\n @apply x-relative x-rounded-lg x-bg-lead-25;\n}\n\n.x-ai-overview:not(.x-ai-overview--loading, .x-ai-overview--expanded) {\n @apply x-rounded-b-3xl;\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-lead-50;\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-lead-50;\n}\n\n.x-ai-overview-loading-content {\n @apply x-flex x-w-full x-flex-col x-gap-4 x-animate-pulse;\n}\n.x-ai-overview-loading-content > span:first-child {\n @apply x-h-16 x-w-full x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(2) {\n @apply x-h-16 x-w-3/4 x-rounded-full x-bg-gradient-to-r x-from-lead-75 x-to-lead-50 x-opacity-50;\n}\n.x-ai-overview-loading-content > span:nth-child(3) {\n @apply x-h-16 x-w-11/12 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75;\n}\n.x-ai-overview-loading-content > span:nth-child(4) {\n @apply x-h-16 x-w-1/2 x-rounded-full x-bg-gradient-to-r x-from-lead-50 x-to-lead-75 x-opacity-75;\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-transparent x-to-lead-25;\n}\n\n.x-ai-overview-expand-wrapper {\n @apply x-flex x-relative x-z-[1];\n}\n.x-ai-overview-expand-btn {\n @apply x-button x-button-outlined x-rounded-full x-w-full;\n}\n.x-ai-overview-expand-btn-icon {\n @apply x-icon;\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;IACD,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,iBAAiB;QACjB,YAAY;QACZ,UAAU;QACV,eAAe;QACf,cAAc;QACd,IAAI;AACL,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,qBAAqB;AAC/B,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;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAE,KAAI,KAAM,SAAS,CAAC,IAAI,CAAA,CAAA;AAE5F,QAAA,MAAM,QAAS,GAAE,GAAG,CAAC,KAAK,CAAA,CAAA;AAE1B,QAAA,SAAS,IAAI,GAAA;AACX,YAAA,QAAQ,CAAC,KAAI,GAAI,IAAG,CAAA;SACtB;AAEA,QAAA,KAAK,CAAC,KAAK,EAAE,OAAO,QAAQ,CAAC,KAAI,GAAI,KAAK,CAAC,CAAA,CAAA;QAE3C,OAAO;YACL,QAAQ;YACR,QAAQ;YACR,IAAI;YACJ,OAAO;SACT,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
@@ -1,6 +1,6 @@
1
1
  import injectCss from '../../../../tools/inject-css.js';
2
2
 
3
- var css = ".x-ai-overview{border-radius:.5rem;position:relative}.x-ai-overview--expanded,.x-ai-overview--loading .x-ai-overview-main{--tw-bg-opacity:1;background-color:rgb(187 201 207/var(--tw-bg-opacity))}.x-ai-overview-main{--tw-gradient-from:#bbc9cf var(--tw-gradient-from-position);--tw-gradient-to:rgba(187,201,207,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-from-position:85%;--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-to-position:100%;background-image:linear-gradient(to bottom,var(--tw-gradient-stops));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{--tw-bg-opacity:1;animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:rgb(94 119 130/var(--tw-bg-opacity));border-radius:9999px;height:.75rem;width:.75rem}.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;--tw-text-opacity:1;align-items:center;aspect-ratio:1/1;color:rgb(94 119 130/var(--tw-text-opacity));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-loading-content{display:flex;width:100%}@keyframes x-pulse{50%{opacity:.5}}.x-ai-overview-loading-content{animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;flex-direction:column;gap:4px}.x-ai-overview-loading-content>span:first-child{--tw-gradient-from:#5e7782 var(--tw-gradient-from-position);--tw-gradient-to:rgba(94,119,130,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#243d48 var(--tw-gradient-to-position);width:100%}.x-ai-overview-loading-content>span:first-child,.x-ai-overview-loading-content>span:nth-child(2){background-image:linear-gradient(to right,var(--tw-gradient-stops));border-radius:9999px;height:16px}.x-ai-overview-loading-content>span:nth-child(2){--tw-gradient-from:#243d48 var(--tw-gradient-from-position);--tw-gradient-to:rgba(36,61,72,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#5e7782 var(--tw-gradient-to-position);opacity:.5;width:75%}.x-ai-overview-loading-content>span:nth-child(3){width:91.666667%}.x-ai-overview-loading-content>span:nth-child(3),.x-ai-overview-loading-content>span:nth-child(4){--tw-gradient-from:#5e7782 var(--tw-gradient-from-position);--tw-gradient-to:rgba(94,119,130,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#243d48 var(--tw-gradient-to-position);background-image:linear-gradient(to right,var(--tw-gradient-stops));border-radius:9999px;height:16px}.x-ai-overview-loading-content>span:nth-child(4){opacity:.75;width:50%}.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-expand-wrapper{display:flex}.x-ai-overview-expand-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-expand-btn:active,.x-ai-overview-expand-btn:hover{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}[dir=ltr] .x-ai-overview-expand-btn{padding-left:16px}[dir=ltr] .x-ai-overview-expand-btn,[dir=rtl] .x-ai-overview-expand-btn{padding-right:16px}[dir=rtl] .x-ai-overview-expand-btn{padding-left:16px}.x-ai-overview-expand-btn{font-size:14px;gap:8px;min-height:40px}.x-ai-overview-expand-btn.x-selected{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}.x-ai-overview-expand-btn.x-selected:active,.x-ai-overview-expand-btn.x-selected:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034)}.x-ai-overview-expand-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-expand-btn.x-selected,.x-ai-overview-expand-btn:active,.x-ai-overview-expand-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}.x-ai-overview-expand-btn.x-selected:active,.x-ai-overview-expand-btn.x-selected:hover{background-color:#fff;color:var(--button-color-50,#283034)}.x-ai-overview-expand-btn:disabled{cursor:not-allowed}.x-ai-overview-expand-btn:disabled,.x-ai-overview-expand-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-expand-btn+.x-button{border-left:unset}.x-ai-overview-expand-btn{border-radius:9999px;width:100%}.x-ai-overview-expand-btn-icon{vector-effect:non-scaling-stroke;--enableIconOffset:var(--OFF);--fontSize:14px;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)));width:auto}";
3
+ var css = ".x-ai-overview{--tw-bg-opacity:1;background-color:rgb(187 201 207/var(--tw-bg-opacity));border-radius:.5rem;position:relative}.x-ai-overview:not(.x-ai-overview--loading,.x-ai-overview--expanded){border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem}.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{--tw-bg-opacity:1;animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:rgb(94 119 130/var(--tw-bg-opacity));border-radius:9999px;height:.75rem;width:.75rem}.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;--tw-text-opacity:1;align-items:center;aspect-ratio:1/1;color:rgb(94 119 130/var(--tw-text-opacity));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-loading-content{display:flex;width:100%}@keyframes x-pulse{50%{opacity:.5}}.x-ai-overview-loading-content{animation:x-pulse 2s cubic-bezier(.4,0,.6,1) infinite;flex-direction:column;gap:4px}.x-ai-overview-loading-content>span:first-child{--tw-gradient-from:#5e7782 var(--tw-gradient-from-position);--tw-gradient-to:rgba(94,119,130,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#243d48 var(--tw-gradient-to-position);width:100%}.x-ai-overview-loading-content>span:first-child,.x-ai-overview-loading-content>span:nth-child(2){background-image:linear-gradient(to right,var(--tw-gradient-stops));border-radius:9999px;height:16px}.x-ai-overview-loading-content>span:nth-child(2){--tw-gradient-from:#243d48 var(--tw-gradient-from-position);--tw-gradient-to:rgba(36,61,72,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#5e7782 var(--tw-gradient-to-position);opacity:.5;width:75%}.x-ai-overview-loading-content>span:nth-child(3){width:91.666667%}.x-ai-overview-loading-content>span:nth-child(3),.x-ai-overview-loading-content>span:nth-child(4){--tw-gradient-from:#5e7782 var(--tw-gradient-from-position);--tw-gradient-to:rgba(94,119,130,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#243d48 var(--tw-gradient-to-position);background-image:linear-gradient(to right,var(--tw-gradient-stops));border-radius:9999px;height:16px}.x-ai-overview-loading-content>span:nth-child(4){opacity:.75;width:50%}.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-to:#bbc9cf var(--tw-gradient-to-position);--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-expand-wrapper{display:flex;position:relative;z-index:1}.x-ai-overview-expand-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-expand-btn:active,.x-ai-overview-expand-btn:hover{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}[dir=ltr] .x-ai-overview-expand-btn{padding-left:16px}[dir=ltr] .x-ai-overview-expand-btn,[dir=rtl] .x-ai-overview-expand-btn{padding-right:16px}[dir=rtl] .x-ai-overview-expand-btn{padding-left:16px}.x-ai-overview-expand-btn{font-size:14px;gap:8px;min-height:40px}.x-ai-overview-expand-btn.x-selected{background-color:var(--button-color-75,#000);border-color:var(--button-color-75,#000)}.x-ai-overview-expand-btn.x-selected:active,.x-ai-overview-expand-btn.x-selected:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034)}.x-ai-overview-expand-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-expand-btn.x-selected,.x-ai-overview-expand-btn:active,.x-ai-overview-expand-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}.x-ai-overview-expand-btn.x-selected:active,.x-ai-overview-expand-btn.x-selected:hover{background-color:#fff;color:var(--button-color-50,#283034)}.x-ai-overview-expand-btn:disabled{cursor:not-allowed}.x-ai-overview-expand-btn:disabled,.x-ai-overview-expand-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-expand-btn+.x-button{border-left:unset}.x-ai-overview-expand-btn{border-radius:9999px;width:100%}.x-ai-overview-expand-btn-icon{vector-effect:non-scaling-stroke;--enableIconOffset:var(--OFF);--fontSize:14px;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)));width:auto}";
4
4
  injectCss(css);
5
5
 
6
6
  export { css, css as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.127",
3
+ "version": "6.0.0-alpha.128",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -142,5 +142,5 @@
142
142
  "access": "public",
143
143
  "directory": "dist"
144
144
  },
145
- "gitHead": "63f4811c7b623e2e321e61d24ce109daa3122e14"
145
+ "gitHead": "e6488aec2e9792d13022a7e8ed684d2624edc408"
146
146
  }
@@ -1 +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;;IAuB/B;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;IAxBlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;AAtCtC,wBAgEE"}
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;;IAuB/B;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;IAxBlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;;;;;;AAtCtC,wBA4DE"}