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

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/docs/API-reference/api/x-components.aioverview.md +1 -3
  3. package/docs/API-reference/components/ai/x-components.ai-overview.md +2 -1
  4. package/js/x-modules/ai/components/ai-overview.vue.js +133 -108
  5. package/js/x-modules/ai/components/ai-overview.vue.js.map +1 -1
  6. package/js/x-modules/ai/components/ai-overview.vue2.js +7 -2
  7. package/js/x-modules/ai/components/ai-overview.vue2.js.map +1 -1
  8. package/js/x-modules/ai/components/ai-overview.vue3.js +1 -1
  9. package/package.json +2 -2
  10. package/report/x-components.api.json +14 -5
  11. package/report/x-components.api.md +1 -3
  12. package/types/x-modules/ai/components/ai-overview.vue.d.ts +1 -3
  13. package/types/x-modules/ai/components/ai-overview.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.149 (2025-09-22)
7
+
8
+ * 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)
9
+
10
+
11
+
12
+
13
+
14
+ ## 6.0.0-alpha.148 (2025-09-18)
15
+
16
+ * 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)
17
+
18
+
19
+
20
+
21
+
6
22
  ## 6.0.0-alpha.147 (2025-09-18)
7
23
 
8
24
  * fix(ai-overview): expose setExpanded function ([30baae2](https://github.com/empathyco/x/commit/30baae2))
package/docs/API-reference/api/x-components.aioverview.md CHANGED
@@ -10,7 +10,6 @@
10
10
  _default: import("vue").DefineComponent<{
11
11
  title: {
12
12
  type: PropType<string>;
13
- default: string;
14
13
  };
15
14
  titleLoading: {
16
15
  type: PropType<string>;
@@ -42,12 +41,12 @@ _default: import("vue").DefineComponent<{
42
41
  suggestionText: import("vue").ComputedRef<string>;
43
42
  setExpanded: (newValue: boolean) => void;
44
43
  onExpandButtonClick: (newValue: boolean) => void;
44
+ shouldAnimateSuggestion: import("vue").Ref<boolean>;
45
45
  query: import("vue").ComputedRef<string>;
46
46
  tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
47
47
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
48
48
  title: {
49
49
  type: PropType<string>;
50
- default: string;
51
50
  };
52
51
  titleLoading: {
53
52
  type: PropType<string>;
@@ -71,7 +70,6 @@ _default: import("vue").DefineComponent<{
71
70
  type: PropType<string>;
72
71
  };
73
72
  }>>, {
74
- title: string;
75
73
  titleLoading: string;
76
74
  expandText: string;
77
75
  collapseText: string;
package/docs/API-reference/components/ai/x-components.ai-overview.md CHANGED
@@ -10,7 +10,7 @@ title: AiOverview
10
10
 
11
11
  | Name | Description | Type | Default |
12
12
  | ------------------------------------------ | ---------------------------------------------------------------- | ------------------- | ----------------------------------------- |
13
- | <code>title</code> | The text displayed when the question ended loading | <code>string</code> | <code>'Empathy AI Overview'</code> |
13
+ | <code>title</code> | The text displayed when the question ended loading | <code>string</code> | <code></code> |
14
14
  | <code>titleLoading</code> | The text displayed when the question is loading. | <code>string</code> | <code>'Generating with Empathy AI'</code> |
15
15
  | <code>expandText</code> | The text displayed on the toggle button when collapsed. | <code>string</code> | <code>'Show more'</code> |
16
16
  | <code>collapseText</code> | The text displayed on the toggle button when expanded. | <code>string</code> | <code>'Show less'</code> |
@@ -22,6 +22,7 @@ title: AiOverview
22
22
 
23
23
  | Name | Description | Bindings<br />(name - type - description) |
24
24
  | ---------------------------------------- | ---------------------- | ----------------------------------------- |
25
+ | <code>sliding-panel</code> | | |
25
26
  | <code>sliding-panels-addons</code> | | |
26
27
  | <code>sliding-panels-left-button</code> | | None |
27
28
  | <code>sliding-panels-right-button</code> | | None |
package/js/x-modules/ai/components/ai-overview.vue.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _sfc_main from './ai-overview.vue2.js';
2
- import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, withDirectives, createBlock, createTextVNode, toDisplayString, normalizeStyle, Fragment, renderList, normalizeClass, renderSlot, createCommentVNode, vShow, withModifiers } from 'vue';
2
+ import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, toDisplayString, createBlock, createTextVNode, createCommentVNode, normalizeStyle, withDirectives, Fragment, renderList, normalizeClass, renderSlot, vShow, withModifiers } from 'vue';
3
3
  import './ai-overview.vue3.js';
4
4
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
5
 
@@ -29,17 +29,18 @@ const _hoisted_7 = {
29
29
  class: "x-ai-overview-content",
30
30
  "data-test": "ai-overview-content"
31
31
  };
32
- const _hoisted_8 = {
32
+ const _hoisted_8 = { key: 0 };
33
+ const _hoisted_9 = {
33
34
  key: 1,
34
35
  class: "x-ai-overview-suggestions",
35
36
  "data-test": "ai-overview-suggestions-container"
36
37
  };
37
- const _hoisted_9 = { class: "x-ai-overview-suggestion-results" };
38
- const _hoisted_10 = {
38
+ const _hoisted_10 = { class: "x-ai-overview-suggestion-results" };
39
+ const _hoisted_11 = {
39
40
  class: "x-ai-overview-gradient",
40
41
  "data-test": "ai-overview-gradient"
41
42
  };
42
- const _hoisted_11 = {
43
+ const _hoisted_12 = {
43
44
  class: "x-ai-overview-toggle-wrapper",
44
45
  "data-test": "ai-overview-toggle-button-wrapper"
45
46
  };
@@ -54,25 +55,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
54
55
  const _component_SlidingPanel = resolveComponent("SlidingPanel");
55
56
  const _component_CollapseHeight = resolveComponent("CollapseHeight");
56
57
  const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
57
- const _directive_typing = resolveDirective("typing");
58
58
  return openBlock(), createElementBlock("div", _hoisted_1, [
59
59
  createElementVNode("div", _hoisted_2, [
60
60
  createVNode(_component_Fade, { mode: "out-in" }, {
61
61
  default: withCtx(() => [
62
62
  _ctx.suggestionsLoading ? (openBlock(), createElementBlock("span", _hoisted_3, [
63
63
  _hoisted_4,
64
- withDirectives(createElementVNode(
64
+ createElementVNode(
65
65
  "span",
66
66
  _hoisted_5,
67
- null,
68
- 512
69
- /* NEED_PATCH */
70
- ), [
71
- [_directive_typing, { text: _ctx.titleLoading, speed: 50 }]
72
- ])
67
+ toDisplayString(_ctx.titleLoading),
68
+ 1
69
+ /* TEXT */
70
+ )
73
71
  ])) : (openBlock(), createBlock(_component_DisplayEmitter, {
74
72
  key: 1,
75
- payload: _ctx.tagging?.toolingDisplay ?? {},
73
+ payload: _ctx.tagging?.toolingDisplay ?? { url: "", params: {} },
76
74
  "event-metadata": {
77
75
  feature: "overview",
78
76
  displayOriginalQuery: _ctx.query,
@@ -83,7 +81,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
83
81
  createElementVNode("span", _hoisted_6, [
84
82
  createVNode(_component_AIStarIcon, { class: "x-ai-overview-title-icon" }),
85
83
  createTextVNode(
86
- toDisplayString(_ctx.title),
84
+ toDisplayString(!!_ctx.title ? _ctx.title : _ctx.suggestionText),
87
85
  1
88
86
  /* TEXT */
89
87
  )
@@ -99,13 +97,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
99
97
  createVNode(_component_ChangeHeight, null, {
100
98
  default: withCtx(() => [
101
99
  createElementVNode("div", _hoisted_7, [
102
- createElementVNode(
100
+ _ctx.title ? (openBlock(), createElementBlock(
103
101
  "span",
104
- null,
102
+ _hoisted_8,
105
103
  toDisplayString(_ctx.suggestionText),
106
104
  1
107
105
  /* TEXT */
108
- ),
106
+ )) : createCommentVNode("v-if", true),
109
107
  createElementVNode(
110
108
  "p",
111
109
  null,
@@ -132,70 +130,91 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
132
130
  [
133
131
  !_ctx.suggestionsSearch.length ? (openBlock(), createBlock(_component_SpinnerIcon, {
134
132
  key: 0,
135
- class: "x-m-auto x-size-10 x-animate-spin",
133
+ class: "x-ai-overview-suggestions-loading",
136
134
  "data-test": "ai-overview-suggestions-loading"
137
- })) : (openBlock(), createElementBlock("div", _hoisted_8, [
135
+ })) : (openBlock(), createElementBlock("div", _hoisted_9, [
138
136
  (openBlock(true), createElementBlock(
139
137
  Fragment,
140
138
  null,
141
- renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }) => {
142
- return openBlock(), createElementBlock("div", {
143
- key: suggestionQuery,
144
- class: "x-ai-overview-suggestion"
145
- }, [
146
- createVNode(_component_BaseEventButton, {
147
- class: "x-ai-overview-suggestion-query-btn",
148
- events: { UserAcceptedAQuery: suggestionQuery }
149
- }, {
150
- default: withCtx(() => [
151
- createTextVNode(
152
- toDisplayString(suggestionQuery),
153
- 1
154
- /* TEXT */
155
- ),
156
- createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
157
- ]),
158
- _: 2
159
- /* DYNAMIC */
160
- }, 1032, ["events"]),
161
- queriesResults ? (openBlock(), createBlock(_component_SlidingPanel, {
162
- key: 0,
163
- class: normalizeClass(_ctx.slidingPanelsClasses),
164
- "scroll-container-class": _ctx.slidingPanelContainersClasses,
165
- "button-class": _ctx.slidingPanelButtonsClasses,
166
- "reset-on-content-change": false
167
- }, {
168
- "sliding-panel-addons": withCtx(({ arrivedState }) => [
169
- renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
170
- ]),
171
- "sliding-panel-left-button": withCtx(() => [
172
- renderSlot(_ctx.$slots, "sliding-panels-left-button")
173
- ]),
174
- "sliding-panel-right-button": withCtx(() => [
175
- renderSlot(_ctx.$slots, "sliding-panels-right-button")
176
- ]),
177
- default: withCtx(() => [
178
- createElementVNode("ul", _hoisted_9, [
179
- (openBlock(true), createElementBlock(
180
- Fragment,
181
- null,
182
- renderList(queriesResults, (result) => {
183
- return openBlock(), createElementBlock("li", {
184
- key: result.id,
185
- "data-test": "ai-overview-suggestion-result"
186
- }, [
187
- renderSlot(_ctx.$slots, "result", { result })
188
- ]);
189
- }),
190
- 128
191
- /* KEYED_FRAGMENT */
192
- ))
193
- ])
194
- ]),
195
- _: 2
196
- /* DYNAMIC */
197
- }, 1032, ["class", "scroll-container-class", "button-class"])) : createCommentVNode("v-if", true)
198
- ]);
139
+ renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }, suggestionIndex) => {
140
+ return openBlock(), createElementBlock(
141
+ "div",
142
+ {
143
+ key: suggestionQuery,
144
+ class: normalizeClass(["x-ai-overview-suggestion", {
145
+ "x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
146
+ }]),
147
+ "data-test": "ai-overview-suggestion",
148
+ style: normalizeStyle({ animationDelay: `${suggestionIndex * 300}ms` })
149
+ },
150
+ [
151
+ createVNode(_component_BaseEventButton, {
152
+ class: "x-ai-overview-suggestion-query-btn",
153
+ events: { UserAcceptedAQuery: suggestionQuery }
154
+ }, {
155
+ default: withCtx(() => [
156
+ createTextVNode(
157
+ toDisplayString(suggestionQuery) + " ",
158
+ 1
159
+ /* TEXT */
160
+ ),
161
+ createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
162
+ ]),
163
+ _: 2
164
+ /* DYNAMIC */
165
+ }, 1032, ["events"]),
166
+ renderSlot(_ctx.$slots, "sliding-panel", { results: queriesResults }, () => [
167
+ createVNode(_component_SlidingPanel, {
168
+ class: normalizeClass(_ctx.slidingPanelsClasses),
169
+ "scroll-container-class": _ctx.slidingPanelContainersClasses,
170
+ "button-class": _ctx.slidingPanelButtonsClasses,
171
+ "reset-on-content-change": false
172
+ }, {
173
+ "sliding-panel-addons": withCtx(({ arrivedState }) => [
174
+ renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
175
+ ]),
176
+ "sliding-panel-left-button": withCtx(() => [
177
+ renderSlot(_ctx.$slots, "sliding-panels-left-button")
178
+ ]),
179
+ "sliding-panel-right-button": withCtx(() => [
180
+ renderSlot(_ctx.$slots, "sliding-panels-right-button")
181
+ ]),
182
+ default: withCtx(() => [
183
+ createElementVNode("ul", _hoisted_10, [
184
+ (openBlock(true), createElementBlock(
185
+ Fragment,
186
+ null,
187
+ renderList(queriesResults, (result, resultIndex) => {
188
+ return openBlock(), createElementBlock(
189
+ "li",
190
+ {
191
+ key: result.id,
192
+ "data-test": "ai-overview-suggestion-result",
193
+ class: normalizeClass({
194
+ "x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
195
+ }),
196
+ style: normalizeStyle({ animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms` })
197
+ },
198
+ [
199
+ renderSlot(_ctx.$slots, "result", { result })
200
+ ],
201
+ 6
202
+ /* CLASS, STYLE */
203
+ );
204
+ }),
205
+ 128
206
+ /* KEYED_FRAGMENT */
207
+ ))
208
+ ])
209
+ ]),
210
+ _: 2
211
+ /* DYNAMIC */
212
+ }, 1032, ["class", "scroll-container-class", "button-class"])
213
+ ])
214
+ ],
215
+ 6
216
+ /* CLASS, STYLE */
217
+ );
199
218
  }),
200
219
  128
201
220
  /* KEYED_FRAGMENT */
@@ -211,37 +230,43 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
211
230
  _: 3
212
231
  /* FORWARDED */
213
232
  }, 8, ["style"]),
214
- _ctx.responseText ? (openBlock(), createElementBlock("div", {
215
- key: 0,
216
- class: "x-cursor-pointer",
217
- onClick: _cache[1] || (_cache[1] = ($event) => _ctx.onExpandButtonClick(!_ctx.expanded))
218
- }, [
219
- withDirectives(createElementVNode(
220
- "div",
221
- _hoisted_10,
222
- null,
223
- 512
224
- /* NEED_PATCH */
225
- ), [
226
- [vShow, !_ctx.expanded]
227
- ]),
228
- createElementVNode("div", _hoisted_11, [
229
- createElementVNode("button", {
230
- class: "x-ai-overview-toggle-btn",
231
- "data-test": "ai-overview-toggle-button",
232
- onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.onExpandButtonClick(!_ctx.expanded), ["stop"]))
233
+ createVNode(_component_Fade, null, {
234
+ default: withCtx(() => [
235
+ _ctx.responseText ? (openBlock(), createElementBlock("div", {
236
+ key: 0,
237
+ class: "x-cursor-pointer",
238
+ onClick: _cache[1] || (_cache[1] = ($event) => _ctx.onExpandButtonClick(!_ctx.expanded))
233
239
  }, [
234
- createTextVNode(
235
- toDisplayString(_ctx.buttonText) + " ",
236
- 1
237
- /* TEXT */
238
- ),
239
- createVNode(_component_ChevronDownIcon, {
240
- class: normalizeClass(["x-ai-overview-toggle-btn-icon", { "x-ai-overview-toggle-btn-icon-expanded": _ctx.expanded }])
241
- }, null, 8, ["class"])
242
- ])
243
- ])
244
- ])) : createCommentVNode("v-if", true)
240
+ withDirectives(createElementVNode(
241
+ "div",
242
+ _hoisted_11,
243
+ null,
244
+ 512
245
+ /* NEED_PATCH */
246
+ ), [
247
+ [vShow, !_ctx.expanded]
248
+ ]),
249
+ createElementVNode("div", _hoisted_12, [
250
+ createElementVNode("button", {
251
+ class: "x-ai-overview-toggle-btn",
252
+ "data-test": "ai-overview-toggle-button",
253
+ onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.onExpandButtonClick(!_ctx.expanded), ["stop"]))
254
+ }, [
255
+ createTextVNode(
256
+ toDisplayString(_ctx.buttonText) + " ",
257
+ 1
258
+ /* TEXT */
259
+ ),
260
+ createVNode(_component_ChevronDownIcon, {
261
+ class: normalizeClass(["x-ai-overview-toggle-btn-icon", { "x-ai-overview-toggle-btn-icon-expanded": _ctx.expanded }])
262
+ }, null, 8, ["class"])
263
+ ])
264
+ ])
265
+ ])) : createCommentVNode("v-if", true)
266
+ ]),
267
+ _: 1
268
+ /* STABLE */
269
+ })
245
270
  ]);
246
271
  }
247
272
  var aiOverview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
package/js/x-modules/ai/components/ai-overview.vue.js.map CHANGED
@@ -1 +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 ?? {}\"\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 }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span>{{ 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-m-auto x-size-10 x-animate-spin\"\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 <SlidingPanel\n v-if=\"queriesResults\"\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 </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 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 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</style>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_createVNode","_withDirectives","_createBlock","_withCtx","_createTextVNode","_toDisplayString","_normalizeStyle","_Fragment","_renderList","_normalizeClass","_renderSlot","_createCommentVNode","_vShow","_withModifiers"],"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 <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 CHANGED
@@ -136,7 +136,6 @@ var _sfc_main = defineComponent({
136
136
  */
137
137
  title: {
138
138
  type: String,
139
- default: 'Empathy AI Overview',
140
139
  },
141
140
  /**
142
141
  * The text displayed when the question is loading.
@@ -195,6 +194,7 @@ var _sfc_main = defineComponent({
195
194
  const { query } = useGetter('ai');
196
195
  const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging } = useState('ai');
197
196
  const expanded = ref(false);
197
+ const shouldAnimateSuggestion = ref(true);
198
198
  const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText));
199
199
  function onExpandButtonClick(newValue) {
200
200
  $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {
@@ -205,8 +205,12 @@ var _sfc_main = defineComponent({
205
205
  }
206
206
  function setExpanded(newValue) {
207
207
  expanded.value = newValue;
208
+ !expanded.value && (shouldAnimateSuggestion.value = false);
208
209
  }
209
- watch(query, () => (expanded.value = false));
210
+ watch(query, () => {
211
+ expanded.value = false;
212
+ shouldAnimateSuggestion.value = true;
213
+ });
210
214
  return {
211
215
  buttonText,
212
216
  expanded,
@@ -216,6 +220,7 @@ var _sfc_main = defineComponent({
216
220
  suggestionText,
217
221
  setExpanded,
218
222
  onExpandButtonClick,
223
+ shouldAnimateSuggestion,
219
224
  query,
220
225
  tagging,
221
226
  };
package/js/x-modules/ai/components/ai-overview.vue2.js.map CHANGED
@@ -1 +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 ?? {}\"\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 }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span>{{ 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-m-auto x-size-10 x-animate-spin\"\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 <SlidingPanel\n v-if=\"queriesResults\"\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 </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 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 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</style>\n"],"names":["DisplayEmitter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoIA,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;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;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;;;;"}
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 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import injectCss from '../../../../tools/inject-css.js';
2
2
 
3
- 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}";
3
+ 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}}";
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.147",
3
+ "version": "6.0.0-alpha.149",
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": "2944076ce066e3b6315548923acf822382cc1a32"
145
+ "gitHead": "674a475f15468a2c674955ce60f46ac5da2cac13"
146
146
  }
package/report/x-components.api.json CHANGED
@@ -1492,7 +1492,7 @@
1492
1492
  },
1493
1493
  {
1494
1494
  "kind": "Content",
1495
- "text": "<string>;\n default: string;\n };\n titleLoading: {\n type: "
1495
+ "text": "<string>;\n };\n titleLoading: {\n type: "
1496
1496
  },
1497
1497
  {
1498
1498
  "kind": "Reference",
@@ -1609,7 +1609,16 @@
1609
1609
  },
1610
1610
  {
1611
1611
  "kind": "Content",
1612
- "text": "<string>;\n setExpanded: (newValue: boolean) => void;\n onExpandButtonClick: (newValue: boolean) => void;\n query: import(\"vue\")."
1612
+ "text": "<string>;\n setExpanded: (newValue: boolean) => void;\n onExpandButtonClick: (newValue: boolean) => void;\n shouldAnimateSuggestion: import(\"vue\")."
1613
+ },
1614
+ {
1615
+ "kind": "Reference",
1616
+ "text": "Ref",
1617
+ "canonicalReference": "@vue/reactivity!Ref:interface"
1618
+ },
1619
+ {
1620
+ "kind": "Content",
1621
+ "text": "<boolean>;\n query: import(\"vue\")."
1613
1622
  },
1614
1623
  {
1615
1624
  "kind": "Reference",
@@ -1690,7 +1699,7 @@
1690
1699
  },
1691
1700
  {
1692
1701
  "kind": "Content",
1693
- "text": "<string>;\n default: string;\n };\n titleLoading: {\n type: "
1702
+ "text": "<string>;\n };\n titleLoading: {\n type: "
1694
1703
  },
1695
1704
  {
1696
1705
  "kind": "Reference",
@@ -1744,7 +1753,7 @@
1744
1753
  },
1745
1754
  {
1746
1755
  "kind": "Content",
1747
- "text": "<string>;\n };\n}>>, {\n title: string;\n titleLoading: string;\n expandText: string;\n collapseText: string;\n}, {}>"
1756
+ "text": "<string>;\n };\n}>>, {\n titleLoading: string;\n expandText: string;\n collapseText: string;\n}, {}>"
1748
1757
  }
1749
1758
  ],
1750
1759
  "fileUrlPath": "dist/types/x-modules/ai/components/ai-overview.vue.d.ts",
@@ -1753,7 +1762,7 @@
1753
1762
  "name": "AiOverview",
1754
1763
  "variableTypeTokenRange": {
1755
1764
  "startIndex": 1,
1756
- "endIndex": 62
1765
+ "endIndex": 64
1757
1766
  }
1758
1767
  },
1759
1768
  {
package/report/x-components.api.md CHANGED
@@ -221,7 +221,6 @@ export interface AiMutations extends ConfigMutations<AiState>, QueryMutations {
221
221
  export const AiOverview: DefineComponent< {
222
222
  title: {
223
223
  type: PropType<string>;
224
- default: string;
225
224
  };
226
225
  titleLoading: {
227
226
  type: PropType<string>;
@@ -253,12 +252,12 @@ suggestionsSearch: ComputedRef<AiSuggestionSearch[]>;
253
252
  suggestionText: ComputedRef<string>;
254
253
  setExpanded: (newValue: boolean) => void;
255
254
  onExpandButtonClick: (newValue: boolean) => void;
255
+ shouldAnimateSuggestion: Ref<boolean>;
256
256
  query: ComputedRef<string>;
257
257
  tagging: ComputedRef<AiSuggestionTagging | undefined>;
258
258
  }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
259
259
  title: {
260
260
  type: PropType<string>;
261
- default: string;
262
261
  };
263
262
  titleLoading: {
264
263
  type: PropType<string>;
@@ -282,7 +281,6 @@ slidingPanelButtonsClasses: {
282
281
  type: PropType<string>;
283
282
  };
284
283
  }>>, {
285
- title: string;
286
284
  titleLoading: string;
287
285
  expandText: string;
288
286
  collapseText: string;
package/types/x-modules/ai/components/ai-overview.vue.d.ts CHANGED
@@ -7,7 +7,6 @@ declare const _default: import("vue").DefineComponent<{
7
7
  */
8
8
  title: {
9
9
  type: PropType<string>;
10
- default: string;
11
10
  };
12
11
  /**
13
12
  * The text displayed when the question is loading.
@@ -69,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
69
68
  suggestionText: import("vue").ComputedRef<string>;
70
69
  setExpanded: (newValue: boolean) => void;
71
70
  onExpandButtonClick: (newValue: boolean) => void;
71
+ shouldAnimateSuggestion: import("vue").Ref<boolean>;
72
72
  query: import("vue").ComputedRef<string>;
73
73
  tagging: import("vue").ComputedRef<import("@empathyco/x-types").AiSuggestionTagging | undefined>;
74
74
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -79,7 +79,6 @@ declare const _default: import("vue").DefineComponent<{
79
79
  */
80
80
  title: {
81
81
  type: PropType<string>;
82
- default: string;
83
82
  };
84
83
  /**
85
84
  * The text displayed when the question is loading.
@@ -133,7 +132,6 @@ declare const _default: import("vue").DefineComponent<{
133
132
  type: PropType<string>;
134
133
  };
135
134
  }>>, {
136
- title: string;
137
135
  titleLoading: string;
138
136
  expandText: string;
139
137
  collapseText: string;
package/types/x-modules/ai/components/ai-overview.vue.d.ts.map CHANGED
@@ -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;;IAoC/B;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;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;;;;IAxE9C;;;;OAIG;;cAEe,QAAQ,CAAC,MAAM,CAAC;;;IAGlC;;;;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;;;;;;;;AA7EtC,wBAqHE"}
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;;;;;;;;;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"}