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

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 +8 -0
  2. package/docs/API-reference/api/x-components.aioverview.md +6 -0
  3. package/docs/API-reference/components/ai/x-components.ai-overview.md +1 -0
  4. package/js/x-modules/ai/components/ai-overview.vue.js +30 -25
  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 +4 -0
  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 +21 -3
  11. package/report/x-components.api.md +7 -1
  12. package/types/x-modules/ai/components/ai-overview.vue.d.ts +6 -0
  13. package/types/x-modules/ai/components/ai-overview.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.175 (2025-11-04)
7
+
8
+ * feat(ai): add `contentClasses` prop and styling improvements to ai-overview component ([6f887c9](https://github.com/empathyco/x/commit/6f887c9))
9
+
10
+
11
+
12
+
13
+
6
14
  ## 6.0.0-alpha.174 (2025-11-04)
7
15
 
8
16
  **Note:** Version bump only for package @empathyco/x-components
package/docs/API-reference/api/x-components.aioverview.md CHANGED
@@ -27,6 +27,9 @@ _default: import("vue").DefineComponent<{
27
27
  type: BooleanConstructor;
28
28
  default: boolean;
29
29
  };
30
+ contentClasses: {
31
+ type: StringConstructor;
32
+ };
30
33
  slidingPanelsClasses: {
31
34
  type: StringConstructor;
32
35
  };
@@ -71,6 +74,9 @@ _default: import("vue").DefineComponent<{
71
74
  type: BooleanConstructor;
72
75
  default: boolean;
73
76
  };
77
+ contentClasses: {
78
+ type: StringConstructor;
79
+ };
74
80
  slidingPanelsClasses: {
75
81
  type: StringConstructor;
76
82
  };
package/docs/API-reference/components/ai/x-components.ai-overview.md CHANGED
@@ -15,6 +15,7 @@ title: AiOverview
15
15
  | <code>expandText</code> | | <code>string</code> | <code>'Show more'</code> |
16
16
  | <code>collapseText</code> | | <code>string</code> | <code>'Show less'</code> |
17
17
  | <code>autoExpandInSearchNoResults</code> | | <code>boolean</code> | <code>true</code> |
18
+ | <code>contentClasses</code> | | <code>string</code> | <code></code> |
18
19
  | <code>slidingPanelsClasses</code> | | <code>string</code> | <code></code> |
19
20
  | <code>slidingPanelContainersClasses</code> | | <code>string</code> | <code></code> |
20
21
  | <code>slidingPanelButtonsClasses</code> | | <code>string</code> | <code></code> |
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, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, withDirectives, Fragment, renderList, normalizeClass, vShow, withModifiers } from 'vue';
2
+ import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, renderSlot, createTextVNode, toDisplayString, normalizeClass, createCommentVNode, normalizeStyle, withDirectives, Fragment, renderList, 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
 
@@ -30,23 +30,19 @@ const _hoisted_6 = {
30
30
  class: "x-ai-overview-title",
31
31
  "data-test": "ai-overview-title"
32
32
  };
33
- const _hoisted_7 = {
34
- class: "x-ai-overview-content",
35
- "data-test": "ai-overview-content"
36
- };
37
- const _hoisted_8 = { key: 0 };
38
- const _hoisted_9 = ["innerHTML"];
39
- const _hoisted_10 = {
33
+ const _hoisted_7 = { key: 0 };
34
+ const _hoisted_8 = ["innerHTML"];
35
+ const _hoisted_9 = {
40
36
  key: 1,
41
37
  class: "x-ai-overview-suggestions",
42
38
  "data-test": "ai-overview-suggestions-container"
43
39
  };
44
- const _hoisted_11 = { class: "x-ai-overview-suggestion-results" };
45
- const _hoisted_12 = {
40
+ const _hoisted_10 = { class: "x-ai-overview-suggestion-results" };
41
+ const _hoisted_11 = {
46
42
  class: "x-ai-overview-gradient",
47
43
  "data-test": "ai-overview-gradient"
48
44
  };
49
- const _hoisted_13 = { class: "x-ai-overview-toggle-wrapper" };
45
+ const _hoisted_12 = { class: "x-ai-overview-toggle-wrapper" };
50
46
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
51
47
  const _component_AIStarIcon = resolveComponent("AIStarIcon");
52
48
  const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
@@ -108,16 +104,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
108
104
  }),
109
105
  createVNode(_component_ChangeHeight, null, {
110
106
  default: withCtx(() => [
111
- createElementVNode("div", _hoisted_7, [
112
- _ctx.title ? (openBlock(), createElementBlock(
113
- "span",
114
- _hoisted_8,
115
- toDisplayString(_ctx.suggestionText),
116
- 1
117
- /* TEXT */
118
- )) : createCommentVNode("v-if", true),
119
- createElementVNode("div", { innerHTML: _ctx.parsedResponseText }, null, 8, _hoisted_9)
120
- ])
107
+ createElementVNode(
108
+ "div",
109
+ {
110
+ class: normalizeClass(["x-ai-overview-content", _ctx.contentClasses]),
111
+ "data-test": "ai-overview-content"
112
+ },
113
+ [
114
+ _ctx.title ? (openBlock(), createElementBlock(
115
+ "span",
116
+ _hoisted_7,
117
+ toDisplayString(_ctx.suggestionText),
118
+ 1
119
+ /* TEXT */
120
+ )) : createCommentVNode("v-if", true),
121
+ createElementVNode("div", { innerHTML: _ctx.parsedResponseText }, null, 8, _hoisted_8)
122
+ ],
123
+ 2
124
+ /* CLASS */
125
+ )
121
126
  ]),
122
127
  _: 1
123
128
  /* STABLE */
@@ -139,7 +144,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
139
144
  key: 0,
140
145
  class: "x-ai-overview-suggestions-loading",
141
146
  "data-test": "ai-overview-suggestions-loading"
142
- })) : (openBlock(), createElementBlock("div", _hoisted_10, [
147
+ })) : (openBlock(), createElementBlock("div", _hoisted_9, [
143
148
  (openBlock(true), createElementBlock(
144
149
  Fragment,
145
150
  null,
@@ -203,7 +208,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
203
208
  renderSlot(_ctx.$slots, "sliding-panels-right-button")
204
209
  ]),
205
210
  default: withCtx(() => [
206
- createElementVNode("ul", _hoisted_11, [
211
+ createElementVNode("ul", _hoisted_10, [
207
212
  (openBlock(true), createElementBlock(
208
213
  Fragment,
209
214
  null,
@@ -274,14 +279,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
274
279
  }, [
275
280
  withDirectives(createElementVNode(
276
281
  "div",
277
- _hoisted_12,
282
+ _hoisted_11,
278
283
  null,
279
284
  512
280
285
  /* NEED_PATCH */
281
286
  ), [
282
287
  [vShow, !_ctx.expanded]
283
288
  ]),
284
- createElementVNode("div", _hoisted_13, [
289
+ createElementVNode("div", _hoisted_12, [
285
290
  createElementVNode("button", {
286
291
  class: "x-ai-overview-toggle-btn",
287
292
  "data-test": "ai-overview-toggle-button",
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 <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span v-if=\"title\">{{ suggestionText }}</span>\n <div v-html=\"parsedResponseText\" />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <div v-show=\"expanded\">\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div\n v-else\n class=\"x-ai-overview-suggestions\"\n data-test=\"ai-overview-suggestions-container\"\n >\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n \"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </div>\n </CollapseHeight>\n\n <Fade>\n <div\n v-if=\"queries.length\"\n class=\"x-cursor-pointer\"\n data-test=\"ai-overview-toggle-button-wrapper\"\n @click=\"emitAndSetExpand(!expanded)\"\n >\n <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click.stop=\"emitAndSetExpand(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n />\n </button>\n </div>\n </div>\n </Fade>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChevronDownIcon,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading */\n title: {\n type: String,\n },\n /* The text displayed when the question is loading. */\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n /* The text displayed on the toggle button when collapsed. */\n expandText: {\n type: String,\n default: 'Show more',\n },\n /* The text displayed on the toggle button when expanded. */\n collapseText: {\n type: String,\n default: 'Show less',\n },\n /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n /* The classes added to each sliding panel for each query. */\n slidingPanelsClasses: {\n type: String,\n },\n /* The classes added to each sliding panel container of each query. */\n slidingPanelContainersClasses: {\n type: String,\n },\n /* The classes added to each sliding panel button of each query. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n isNoResults,\n queries,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement | null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function emitAndSetExpand(isExpanded: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n\n expanded.value = isExpanded\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n the request for suggestions has ended; there are queries in AI and no-results in search. */\n watch([suggestionsLoading, () => $x.noResults], () => {\n if (\n props.autoExpandInSearchNoResults &&\n !suggestionsLoading.value &&\n queries.value.length &&\n $x.noResults\n ) {\n emitAndSetExpand(true)\n }\n })\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiOverviewMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n emitAndSetExpand,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-wrapper {\n display: flex;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n"],"names":["_createElementVNode","_createBlock","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_withCtx","_createCommentVNode","_normalizeStyle","_withDirectives","_Fragment","_renderList","_normalizeClass","_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 <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div\n class=\"x-ai-overview-content\"\n :class=\"contentClasses\"\n data-test=\"ai-overview-content\"\n >\n <span v-if=\"title\">{{ suggestionText }}</span>\n <div v-html=\"parsedResponseText\" />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <div v-show=\"expanded\">\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div\n v-else\n class=\"x-ai-overview-suggestions\"\n data-test=\"ai-overview-suggestions-container\"\n >\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n \"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </div>\n </CollapseHeight>\n\n <Fade>\n <div\n v-if=\"queries.length\"\n class=\"x-cursor-pointer\"\n data-test=\"ai-overview-toggle-button-wrapper\"\n @click=\"emitAndSetExpand(!expanded)\"\n >\n <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click.stop=\"emitAndSetExpand(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n />\n </button>\n </div>\n </div>\n </Fade>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChevronDownIcon,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading */\n title: {\n type: String,\n },\n /* The text displayed when the question is loading. */\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n /* The text displayed on the toggle button when collapsed. */\n expandText: {\n type: String,\n default: 'Show more',\n },\n /* The text displayed on the toggle button when expanded. */\n collapseText: {\n type: String,\n default: 'Show less',\n },\n /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n /* The classes added to the parsed response text container. */\n contentClasses: {\n type: String,\n },\n /* The classes added to each sliding panel for each query. */\n slidingPanelsClasses: {\n type: String,\n },\n /* The classes added to each sliding panel container of each query. */\n slidingPanelContainersClasses: {\n type: String,\n },\n /* The classes added to each sliding panel button of each query. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n isNoResults,\n queries,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement | null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function emitAndSetExpand(isExpanded: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n\n expanded.value = isExpanded\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n the request for suggestions has ended; there are queries in AI and no-results in search. */\n watch([suggestionsLoading, () => $x.noResults], () => {\n if (\n props.autoExpandInSearchNoResults &&\n !suggestionsLoading.value &&\n queries.value.length &&\n $x.noResults\n ) {\n emitAndSetExpand(true)\n }\n })\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiOverviewMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n emitAndSetExpand,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n max-width: var(--x-ai-overview-main-max-width, none);\n margin: 0 auto;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-wrapper {\n display: flex;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n"],"names":["_createElementVNode","_createBlock","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_withCtx","_normalizeClass","_createCommentVNode","_normalizeStyle","_withDirectives","_Fragment","_renderList","_vShow","_withModifiers"],"mappings":"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"}
package/js/x-modules/ai/components/ai-overview.vue2.js CHANGED
@@ -155,6 +155,10 @@ var _sfc_main = defineComponent({
155
155
  type: Boolean,
156
156
  default: true,
157
157
  },
158
+ /* The classes added to the parsed response text container. */
159
+ contentClasses: {
160
+ type: String,
161
+ },
158
162
  /* The classes added to each sliding panel for each query. */
159
163
  slidingPanelsClasses: {
160
164
  type: String,
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 <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div class=\"x-ai-overview-content\" data-test=\"ai-overview-content\">\n <span v-if=\"title\">{{ suggestionText }}</span>\n <div v-html=\"parsedResponseText\" />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <div v-show=\"expanded\">\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div\n v-else\n class=\"x-ai-overview-suggestions\"\n data-test=\"ai-overview-suggestions-container\"\n >\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n \"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </div>\n </CollapseHeight>\n\n <Fade>\n <div\n v-if=\"queries.length\"\n class=\"x-cursor-pointer\"\n data-test=\"ai-overview-toggle-button-wrapper\"\n @click=\"emitAndSetExpand(!expanded)\"\n >\n <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click.stop=\"emitAndSetExpand(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n />\n </button>\n </div>\n </div>\n </Fade>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChevronDownIcon,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading */\n title: {\n type: String,\n },\n /* The text displayed when the question is loading. */\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n /* The text displayed on the toggle button when collapsed. */\n expandText: {\n type: String,\n default: 'Show more',\n },\n /* The text displayed on the toggle button when expanded. */\n collapseText: {\n type: String,\n default: 'Show less',\n },\n /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n /* The classes added to each sliding panel for each query. */\n slidingPanelsClasses: {\n type: String,\n },\n /* The classes added to each sliding panel container of each query. */\n slidingPanelContainersClasses: {\n type: String,\n },\n /* The classes added to each sliding panel button of each query. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n isNoResults,\n queries,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement | null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function emitAndSetExpand(isExpanded: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n\n expanded.value = isExpanded\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n the request for suggestions has ended; there are queries in AI and no-results in search. */\n watch([suggestionsLoading, () => $x.noResults], () => {\n if (\n props.autoExpandInSearchNoResults &&\n !suggestionsLoading.value &&\n queries.value.length &&\n $x.noResults\n ) {\n emitAndSetExpand(true)\n }\n })\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiOverviewMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n emitAndSetExpand,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-wrapper {\n display: flex;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}
1
+ {"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div\n v-if=\"!isNoResults\"\n ref=\"aiOverviewRef\"\n class=\"x-ai-overview\"\n data-test=\"ai-overview-wrapper\"\n >\n <div class=\"x-ai-overview-main\">\n <Fade mode=\"out-in\">\n <span\n v-if=\"suggestionsLoading\"\n class=\"x-ai-overview-title-loading\"\n data-test=\"ai-overview-title-loading\"\n >\n <span class=\"x-ai-overview-title-loading-indicator\" />\n <span\n class=\"x-ai-overview-title-loading-text\"\n data-test=\"ai-overview-title-loading-text\"\n >\n <slot name=\"title-loading\">\n {{ titleLoading }}\n </slot>\n </span>\n </span>\n <DisplayEmitter\n v-else\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-display-emitter\"\n >\n <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n </span>\n </DisplayEmitter>\n </Fade>\n <ChangeHeight>\n <div\n class=\"x-ai-overview-content\"\n :class=\"contentClasses\"\n data-test=\"ai-overview-content\"\n >\n <span v-if=\"title\">{{ suggestionText }}</span>\n <div v-html=\"parsedResponseText\" />\n </div>\n </ChangeHeight>\n <slot name=\"extra-content\" />\n </div>\n <CollapseHeight\n :style=\"{\n '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n }\"\n data-test=\"ai-overview-collapse-height-suggestions\"\n >\n <div v-show=\"expanded\">\n <SpinnerIcon\n v-if=\"!suggestionsSearch.length\"\n class=\"x-ai-overview-suggestions-loading\"\n data-test=\"ai-overview-suggestions-loading\"\n />\n <div\n v-else\n class=\"x-ai-overview-suggestions\"\n data-test=\"ai-overview-suggestions-container\"\n >\n <DisplayEmitter\n v-for=\"(\n { query: suggestionQuery, results: queriesResults }, suggestionIndex\n ) in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n \"\n :event-metadata=\"{\n feature: 'overview',\n displayOriginalQuery: query || 'overview-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-overview-query-display-emitter\"\n >\n <div\n class=\"x-ai-overview-suggestion\"\n data-test=\"ai-overview-suggestion\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n >\n <BaseEventButton\n class=\"x-ai-overview-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"overview\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-overview-suggestion-results\">\n <li\n v-for=\"(result, resultIndex) in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-overview-suggestion-result\"\n :class=\"{\n 'x-ai-overview-result-animation': shouldAnimateSuggestion,\n }\"\n :style=\"{\n animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n }\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n </div>\n </CollapseHeight>\n\n <Fade>\n <div\n v-if=\"queries.length\"\n class=\"x-cursor-pointer\"\n data-test=\"ai-overview-toggle-button-wrapper\"\n @click=\"emitAndSetExpand(!expanded)\"\n >\n <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click.stop=\"emitAndSetExpand(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n />\n </button>\n </div>\n </div>\n </Fade>\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n directives: {\n typing,\n },\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChevronDownIcon,\n CollapseHeight,\n ChangeHeight,\n Fade,\n SlidingPanel,\n SpinnerIcon,\n DisplayEmitter,\n DisplayClickProvider,\n },\n props: {\n /* The text displayed when the question ended loading */\n title: {\n type: String,\n },\n /* The text displayed when the question is loading. */\n titleLoading: {\n type: String,\n default: 'Generating with Empathy AI',\n },\n /* The text displayed on the toggle button when collapsed. */\n expandText: {\n type: String,\n default: 'Show more',\n },\n /* The text displayed on the toggle button when expanded. */\n collapseText: {\n type: String,\n default: 'Show less',\n },\n /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n autoExpandInSearchNoResults: {\n type: Boolean,\n default: true,\n },\n /* The classes added to the parsed response text container. */\n contentClasses: {\n type: String,\n },\n /* The classes added to each sliding panel for each query. */\n slidingPanelsClasses: {\n type: String,\n },\n /* The classes added to each sliding panel container of each query. */\n slidingPanelContainersClasses: {\n type: String,\n },\n /* The classes added to each sliding panel button of each query. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n isNoResults,\n queries,\n } = useState('ai')\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const aiOverviewRef = ref<HTMLDivElement | null>(null)\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function emitAndSetExpand(isExpanded: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n\n expanded.value = isExpanded\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n the request for suggestions has ended; there are queries in AI and no-results in search. */\n watch([suggestionsLoading, () => $x.noResults], () => {\n if (\n props.autoExpandInSearchNoResults &&\n !suggestionsLoading.value &&\n queries.value.length &&\n $x.noResults\n ) {\n emitAndSetExpand(true)\n }\n })\n\n $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n onMounted(() => {\n $x.emit('AiOverviewMounted', undefined, { feature: 'overview' })\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n parsedResponseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n emitAndSetExpand,\n shouldAnimateSuggestion,\n query,\n tagging,\n isNoResults,\n queries,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n --color: var(--x-ai-overview-color, #bbc9cf);\n --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n padding: 1rem;\n max-width: var(--x-ai-overview-main-max-width, none);\n margin: 0 auto;\n}\n\n.x-ai-overview-title {\n display: flex;\n font-size: 0.875rem;\n font-weight: 700;\n gap: 0.25rem;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n width: 0.75rem;\n height: 0.75rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n border-radius: 9999px;\n background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n}\n\n.x-ai-overview-content {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\n}\n\n.x-ai-overview-gradient {\n border-radius: 1.5rem;\n cursor: pointer;\n content: none;\n position: absolute;\n width: 100%;\n height: 100%;\n bottom: 0;\n background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-wrapper {\n display: flex;\n position: relative;\n}\n\n.x-ai-overview-toggle-btn {\n border-color: var(--button-color-50, #283034);\n background-color: #ffffff;\n color: var(--button-color-50, #283034);\n border-radius: 9999px;\n width: 100%;\n margin: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n border-style: solid;\n border-width: 1px;\n font-weight: 700;\n min-height: 2.5rem;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n\n.x-ai-overview-toggle-btn:hover {\n border-color: var(--button-color-50, #283034);\n background-color: var(--button-color-50, #283034);\n color: #ffffff;\n}\n\n@media (min-width: 640px) {\n .x-ai-overview-toggle-btn {\n transition-property: all;\n transition-duration: 500ms;\n transform: translateY(50%);\n width: var(--expand-button-width, 200px);\n }\n}\n\n.x-ai-overview-toggle-btn-icon {\n transform: rotate(0deg);\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition-property: all;\n transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n width: 2.5rem;\n height: 2.5rem;\n margin: auto;\n animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n@keyframes x-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n</style>\n"],"names":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}
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{padding:1rem}.x-ai-overview-title{font-size:.875rem;font-weight:700;gap:.25rem}.x-ai-overview-title,.x-ai-overview-title-loading{align-items:center;display:flex;margin-bottom:.5rem}.x-ai-overview-title-loading{gap:.375rem}.x-ai-overview-title-loading-indicator{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}.x-ai-overview-title-loading-text{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:.75rem}.x-ai-overview-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem}.x-ai-overview-content{display:flex;flex-direction:column;gap:.5rem;line-height:1.25rem;text-align:left}.x-ai-overview-content span{font-weight:500}.x-ai-overview-gradient{background-image:linear-gradient(to bottom,transparent 0,var(--color-lighter) 100%);border-radius:1.5rem;bottom:0;content:none;cursor:pointer;height:100%;position:absolute;width:100%}.x-ai-overview-toggle-wrapper{display:flex;position:relative}.x-ai-overview-toggle-btn{align-items:center;background-color:#fff;border-color:var(--button-color-50,#283034);border-radius:9999px;border-style:solid;border-width:1px;color:var(--button-color-50,#283034);display:flex;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;margin:auto;min-height:2.5rem;padding-left:1rem;padding-right:1rem;width:100%}.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}@media (min-width:640px){.x-ai-overview-toggle-btn{transform:translateY(50%);transition-duration:.5s;transition-property:all;width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{aspect-ratio:1/1;height:1rem;transform:rotate(0deg);transition-duration:.3s;transition-property:all}.x-ai-overview-toggle-btn-icon-expanded{transform:rotate(180deg)}.x-ai-overview-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:.5rem}.x-ai-overview-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}@keyframes x-spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}";
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{margin:0 auto;max-width:var(--x-ai-overview-main-max-width,none);padding:1rem}.x-ai-overview-title{font-size:.875rem;font-weight:700;gap:.25rem}.x-ai-overview-title,.x-ai-overview-title-loading{align-items:center;display:flex;margin-bottom:.5rem}.x-ai-overview-title-loading{gap:.375rem}.x-ai-overview-title-loading-indicator{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color);border-radius:9999px;height:.75rem;width:.75rem}.x-ai-overview-title-loading-text{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;font-size:.75rem}.x-ai-overview-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem}.x-ai-overview-content{display:flex;flex-direction:column;gap:.5rem;line-height:1.25rem;text-align:left}.x-ai-overview-content span{font-weight:500}.x-ai-overview-gradient{background-image:linear-gradient(to bottom,transparent 0,var(--color-lighter) 100%);border-radius:1.5rem;bottom:0;content:none;cursor:pointer;height:100%;position:absolute;width:100%}.x-ai-overview-toggle-wrapper{display:flex;position:relative}.x-ai-overview-toggle-btn{align-items:center;background-color:#fff;border-color:var(--button-color-50,#283034);border-radius:9999px;border-style:solid;border-width:1px;color:var(--button-color-50,#283034);display:flex;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;margin:auto;min-height:2.5rem;padding-left:1rem;padding-right:1rem;width:100%}.x-ai-overview-toggle-btn:hover{background-color:var(--button-color-50,#283034);border-color:var(--button-color-50,#283034);color:#fff}@media (min-width:640px){.x-ai-overview-toggle-btn{transform:translateY(50%);transition-duration:.5s;transition-property:all;width:var(--expand-button-width,200px)}}.x-ai-overview-toggle-btn-icon{aspect-ratio:1/1;height:1rem;transform:rotate(0deg);transition-duration:.3s;transition-property:all}.x-ai-overview-toggle-btn-icon-expanded{transform:rotate(180deg)}.x-ai-overview-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-overview-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-overview-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-overview-suggestions-loading{animation:x-spin 1s linear infinite;height:2.5rem;margin:auto;width:2.5rem}.x-ai-overview-suggestion{display:flex;flex-direction:column;gap:.5rem}.x-ai-overview-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}@keyframes x-spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}";
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.174",
3
+ "version": "6.0.0-alpha.175",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -143,5 +143,5 @@
143
143
  "access": "public",
144
144
  "directory": "dist"
145
145
  },
146
- "gitHead": "0805e85de84e25804f7391363b521b6807743bde"
146
+ "gitHead": "c89d8cd2d9133d07df0102d6388cc59b23147559"
147
147
  }
package/report/x-components.api.json CHANGED
@@ -1654,7 +1654,16 @@
1654
1654
  },
1655
1655
  {
1656
1656
  "kind": "Content",
1657
- "text": ";\n default: boolean;\n };\n slidingPanelsClasses: {\n type: "
1657
+ "text": ";\n default: boolean;\n };\n contentClasses: {\n type: "
1658
+ },
1659
+ {
1660
+ "kind": "Reference",
1661
+ "text": "StringConstructor",
1662
+ "canonicalReference": "!StringConstructor:interface"
1663
+ },
1664
+ {
1665
+ "kind": "Content",
1666
+ "text": ";\n };\n slidingPanelsClasses: {\n type: "
1658
1667
  },
1659
1668
  {
1660
1669
  "kind": "Reference",
@@ -1933,7 +1942,16 @@
1933
1942
  },
1934
1943
  {
1935
1944
  "kind": "Content",
1936
- "text": ";\n default: boolean;\n };\n slidingPanelsClasses: {\n type: "
1945
+ "text": ";\n default: boolean;\n };\n contentClasses: {\n type: "
1946
+ },
1947
+ {
1948
+ "kind": "Reference",
1949
+ "text": "StringConstructor",
1950
+ "canonicalReference": "!StringConstructor:interface"
1951
+ },
1952
+ {
1953
+ "kind": "Content",
1954
+ "text": ";\n };\n slidingPanelsClasses: {\n type: "
1937
1955
  },
1938
1956
  {
1939
1957
  "kind": "Reference",
@@ -1969,7 +1987,7 @@
1969
1987
  "name": "AiOverview",
1970
1988
  "variableTypeTokenRange": {
1971
1989
  "startIndex": 1,
1972
- "endIndex": 82
1990
+ "endIndex": 86
1973
1991
  }
1974
1992
  },
1975
1993
  {
package/report/x-components.api.md CHANGED
@@ -242,6 +242,9 @@ autoExpandInSearchNoResults: {
242
242
  type: BooleanConstructor;
243
243
  default: boolean;
244
244
  };
245
+ contentClasses: {
246
+ type: StringConstructor;
247
+ };
245
248
  slidingPanelsClasses: {
246
249
  type: StringConstructor;
247
250
  };
@@ -286,6 +289,9 @@ autoExpandInSearchNoResults: {
286
289
  type: BooleanConstructor;
287
290
  default: boolean;
288
291
  };
292
+ contentClasses: {
293
+ type: StringConstructor;
294
+ };
289
295
  slidingPanelsClasses: {
290
296
  type: StringConstructor;
291
297
  };
@@ -9308,7 +9314,7 @@ export type XStoreModuleOptions<StoreModule extends AnyXStoreModule> = StoreModu
9308
9314
  // dist/types/components/filters/labels/base-rating-filter-label.vue.d.ts:16:9 - (ae-forgotten-export) The symbol "BooleanFilter" needs to be exported by the entry point index.d.ts
9309
9315
  // dist/types/components/page-selector.vue.d.ts:65:5 - (ae-forgotten-export) The symbol "PageItem" needs to be exported by the entry point index.d.ts
9310
9316
  // dist/types/components/suggestions/base-suggestion.vue.d.ts:31:9 - (ae-forgotten-export) The symbol "Suggestion" needs to be exported by the entry point index.d.ts
9311
- // dist/types/x-modules/ai/components/ai-overview.vue.d.ts:34:5 - (ae-forgotten-export) The symbol "TaggingRequest" needs to be exported by the entry point index.d.ts
9317
+ // dist/types/x-modules/ai/components/ai-overview.vue.d.ts:37:5 - (ae-forgotten-export) The symbol "TaggingRequest" needs to be exported by the entry point index.d.ts
9312
9318
  // dist/types/x-modules/device/components/device-detector.vue.d.ts:21:9 - (ae-forgotten-export) The symbol "Device" needs to be exported by the entry point index.d.ts
9313
9319
  // dist/types/x-modules/device/components/device-detector.vue.d.ts:21:9 - (ae-forgotten-export) The symbol "MaxWidth" needs to be exported by the entry point index.d.ts
9314
9320
  // dist/types/x-modules/facets/components/facets/facets.vue.d.ts:56:5 - (ae-forgotten-export) The symbol "RenderFacet" needs to be exported by the entry point index.d.ts
package/types/x-modules/ai/components/ai-overview.vue.d.ts CHANGED
@@ -19,6 +19,9 @@ declare const _default: import("vue").DefineComponent<{
19
19
  type: BooleanConstructor;
20
20
  default: boolean;
21
21
  };
22
+ contentClasses: {
23
+ type: StringConstructor;
24
+ };
22
25
  slidingPanelsClasses: {
23
26
  type: StringConstructor;
24
27
  };
@@ -63,6 +66,9 @@ declare const _default: import("vue").DefineComponent<{
63
66
  type: BooleanConstructor;
64
67
  default: boolean;
65
68
  };
69
+ contentClasses: {
70
+ type: StringConstructor;
71
+ };
66
72
  slidingPanelsClasses: {
67
73
  type: StringConstructor;
68
74
  };
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,cAAc,EAAE,MAAM,oBAAoB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAkGd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA9EjD,wBAkIE"}
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,cAAc,EAAE,MAAM,oBAAoB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAsGd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlFjD,wBAsIE"}