@empathyco/x-components 6.0.0-alpha.144 → 6.0.0-alpha.145

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 (12) 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 +2 -1
  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 +8 -0
  7. package/js/x-modules/ai/components/ai-overview.vue2.js.map +1 -1
  8. package/package.json +2 -2
  9. package/report/x-components.api.json +19 -1
  10. package/report/x-components.api.md +6 -0
  11. package/types/x-modules/ai/components/ai-overview.vue.d.ts +16 -0
  12. 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.145 (2025-09-12)
7
+
8
+ * feat(AiOverview): allow customisation of SlidingPanel buttons through props (#1876) ([f923ef1](https://github.com/empathyco/x/commit/f923ef1)), closes [#1876](https://github.com/empathyco/x/issues/1876)
9
+
10
+
11
+
12
+
13
+
6
14
  ## 6.0.0-alpha.144 (2025-09-12)
7
15
 
8
16
  * refactor(ai): remove unused titleLoadingText in ai-overview tests ([c09e07d](https://github.com/empathyco/x/commit/c09e07d))
package/docs/API-reference/api/x-components.aioverview.md CHANGED
@@ -30,6 +30,9 @@ _default: import("vue").DefineComponent<{
30
30
  slidingPanelContainersClasses: {
31
31
  type: PropType<string>;
32
32
  };
33
+ slidingPanelButtonsClasses: {
34
+ type: PropType<string>;
35
+ };
33
36
  }, {
34
37
  buttonText: import("vue").ComputedRef<string>;
35
38
  expanded: import("vue").Ref<boolean>;
@@ -69,6 +72,9 @@ _default: import("vue").DefineComponent<{
69
72
  slidingPanelContainersClasses: {
70
73
  type: PropType<string>;
71
74
  };
75
+ slidingPanelButtonsClasses: {
76
+ type: PropType<string>;
77
+ };
72
78
  }>>, {
73
79
  title: string;
74
80
  titleLoading: string;
package/docs/API-reference/components/ai/x-components.ai-overview.md CHANGED
@@ -16,6 +16,7 @@ title: AiOverview
16
16
  | <code>collapseText</code> | The text displayed on the toggle button when expanded. | <code>string</code> | <code>'Show less'</code> |
17
17
  | <code>slidingPanelsClasses</code> | The classes added to each sliding panel for each query. | <code>string</code> | <code></code> |
18
18
  | <code>slidingPanelContainersClasses</code> | The classes added to each sliding panel container of each query. | <code>string</code> | <code></code> |
19
+ | <code>slidingPanelButtonsClasses</code> | The classes added to each sliding panel buttons of each query. | <code>string</code> | <code></code> |
19
20
 
20
21
  ## Slots
21
22
 
package/js/x-modules/ai/components/ai-overview.vue.js CHANGED
@@ -148,6 +148,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
148
148
  key: 0,
149
149
  class: normalizeClass(_ctx.slidingPanelsClasses),
150
150
  "scroll-container-class": _ctx.slidingPanelContainersClasses,
151
+ "button-class": _ctx.slidingPanelButtonsClasses,
151
152
  "reset-on-content-change": false
152
153
  }, {
153
154
  "sliding-panel-addons": withCtx(({ arrivedState }) => [
@@ -179,7 +180,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
179
180
  ]),
180
181
  _: 2
181
182
  /* DYNAMIC */
182
- }, 1032, ["class", "scroll-container-class"])) : createCommentVNode("v-if", true)
183
+ }, 1032, ["class", "scroll-container-class", "button-class"])) : createCommentVNode("v-if", true)
183
184
  ]);
184
185
  }),
185
186
  128
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 v-if=\"queries.length\"\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\" data-test=\"ai-overview-suggestions-container\">\n <div class=\"x-ai-overview-suggestions\">\n <div\n v-for=\"{ query: suggestionQuery } in queries\"\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[suggestionQuery]\"\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\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[suggestionQuery].results\"\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-show=\"queries.length\">\n <div\n v-show=\"!expanded\"\n class=\"x-ai-overview-gradient\"\n data-test=\"ai-overview-gradient\"\n @click=\"onExpandButtonClick(!expanded)\"\n />\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=\"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 { AiSuggestionSearch } from '@empathyco/x-types'\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} 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 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 setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n queries,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n } = useState('ai')\n\n const expanded = ref(false)\n\n const queriesResults = computed(() => {\n return suggestionsSearch.value.reduce(\n (\n acc: Record<string, { results: AiSuggestionSearch['results']; numFound: number }>,\n { query, results, numFound },\n ) => {\n acc[query] = { results, numFound }\n return acc\n },\n {},\n )\n })\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 queries,\n responseText,\n suggestionsLoading,\n queriesResults,\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"],"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\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 v-if=\"queries.length\"\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\" data-test=\"ai-overview-suggestions-container\">\n <div class=\"x-ai-overview-suggestions\">\n <div\n v-for=\"{ query: suggestionQuery } in queries\"\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[suggestionQuery]\"\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[suggestionQuery].results\"\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-show=\"queries.length\">\n <div\n v-show=\"!expanded\"\n class=\"x-ai-overview-gradient\"\n data-test=\"ai-overview-gradient\"\n @click=\"onExpandButtonClick(!expanded)\"\n />\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=\"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 { AiSuggestionSearch } from '@empathyco/x-types'\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} 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 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 {\n suggestionText,\n responseText,\n queries,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n } = useState('ai')\n\n const expanded = ref(false)\n\n const queriesResults = computed(() => {\n return suggestionsSearch.value.reduce(\n (\n acc: Record<string, { results: AiSuggestionSearch['results']; numFound: number }>,\n { query, results, numFound },\n ) => {\n acc[query] = { results, numFound }\n return acc\n },\n {},\n )\n })\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 queries,\n responseText,\n suggestionsLoading,\n queriesResults,\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"],"mappings":"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"}
package/js/x-modules/ai/components/ai-overview.vue2.js CHANGED
@@ -179,6 +179,14 @@ var _sfc_main = defineComponent({
179
179
  slidingPanelContainersClasses: {
180
180
  type: String,
181
181
  },
182
+ /**
183
+ * The classes added to each sliding panel buttons of each query.
184
+ *
185
+ * @public
186
+ */
187
+ slidingPanelButtonsClasses: {
188
+ type: String,
189
+ },
182
190
  },
183
191
  setup(props) {
184
192
  const $x = use$x();
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 v-if=\"queries.length\"\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\" data-test=\"ai-overview-suggestions-container\">\n <div class=\"x-ai-overview-suggestions\">\n <div\n v-for=\"{ query: suggestionQuery } in queries\"\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[suggestionQuery]\"\n :class=\"slidingPanelsClasses\"\n :scroll-container-class=\"slidingPanelContainersClasses\"\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[suggestionQuery].results\"\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-show=\"queries.length\">\n <div\n v-show=\"!expanded\"\n class=\"x-ai-overview-gradient\"\n data-test=\"ai-overview-gradient\"\n @click=\"onExpandButtonClick(!expanded)\"\n />\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=\"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 { AiSuggestionSearch } from '@empathyco/x-types'\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} 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 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 setup(props) {\n const $x = use$x()\n const { query } = useGetter('ai')\n const {\n suggestionText,\n responseText,\n queries,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n } = useState('ai')\n\n const expanded = ref(false)\n\n const queriesResults = computed(() => {\n return suggestionsSearch.value.reduce(\n (\n acc: Record<string, { results: AiSuggestionSearch['results']; numFound: number }>,\n { query, results, numFound },\n ) => {\n acc[query] = { results, numFound }\n return acc\n },\n {},\n )\n })\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 queries,\n responseText,\n suggestionsLoading,\n queriesResults,\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;wBACZA,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;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,EACJ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,GACT,GAAI,QAAQ,CAAC,IAAI,CAAA,CAAA;AAEjB,QAAA,MAAM,QAAS,GAAE,GAAG,CAAC,KAAK,CAAA,CAAA;AAE1B,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAC,MAAM;AACpC,YAAA,OAAO,iBAAiB,CAAC,KAAK,CAAC,MAAM,CACnC,CACE,GAAiF,EACjF,EAAE,KAAK,EAAE,OAAO,EAAE,QAAO,EAAG,KACzB;gBACH,GAAG,CAAC,KAAK,CAAA,GAAI,EAAE,OAAO,EAAE,QAAS,EAAA,CAAA;AACjC,gBAAA,OAAO,GAAE,CAAA;aACV,EACD,EAAE,CACJ,CAAA;AACF,SAAC,CAAA,CAAA;QAED,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,OAAO;YACP,YAAY;YACZ,kBAAkB;YAClB,cAAc;YACd,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\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 v-if=\"queries.length\"\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\" data-test=\"ai-overview-suggestions-container\">\n <div class=\"x-ai-overview-suggestions\">\n <div\n v-for=\"{ query: suggestionQuery } in queries\"\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[suggestionQuery]\"\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[suggestionQuery].results\"\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-show=\"queries.length\">\n <div\n v-show=\"!expanded\"\n class=\"x-ai-overview-gradient\"\n data-test=\"ai-overview-gradient\"\n @click=\"onExpandButtonClick(!expanded)\"\n />\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=\"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 { AiSuggestionSearch } from '@empathyco/x-types'\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} 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 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 {\n suggestionText,\n responseText,\n queries,\n suggestionsSearch,\n suggestionsLoading,\n tagging,\n } = useState('ai')\n\n const expanded = ref(false)\n\n const queriesResults = computed(() => {\n return suggestionsSearch.value.reduce(\n (\n acc: Record<string, { results: AiSuggestionSearch['results']; numFound: number }>,\n { query, results, numFound },\n ) => {\n acc[query] = { results, numFound }\n return acc\n },\n {},\n )\n })\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 queries,\n responseText,\n suggestionsLoading,\n queriesResults,\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":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.144",
3
+ "version": "6.0.0-alpha.145",
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": "de2773d604781813942db28098858c1119482813"
145
+ "gitHead": "7d637dff1db767144460aaea075f497c0c3977a9"
146
146
  }
package/report/x-components.api.json CHANGED
@@ -1535,6 +1535,15 @@
1535
1535
  "text": "PropType",
1536
1536
  "canonicalReference": "@vue/runtime-core!PropType:type"
1537
1537
  },
1538
+ {
1539
+ "kind": "Content",
1540
+ "text": "<string>;\n };\n slidingPanelButtonsClasses: {\n type: "
1541
+ },
1542
+ {
1543
+ "kind": "Reference",
1544
+ "text": "PropType",
1545
+ "canonicalReference": "@vue/runtime-core!PropType:type"
1546
+ },
1538
1547
  {
1539
1548
  "kind": "Content",
1540
1549
  "text": "<string>;\n };\n}, {\n buttonText: import(\"vue\")."
@@ -1769,6 +1778,15 @@
1769
1778
  "text": "PropType",
1770
1779
  "canonicalReference": "@vue/runtime-core!PropType:type"
1771
1780
  },
1781
+ {
1782
+ "kind": "Content",
1783
+ "text": "<string>;\n };\n slidingPanelButtonsClasses: {\n type: "
1784
+ },
1785
+ {
1786
+ "kind": "Reference",
1787
+ "text": "PropType",
1788
+ "canonicalReference": "@vue/runtime-core!PropType:type"
1789
+ },
1772
1790
  {
1773
1791
  "kind": "Content",
1774
1792
  "text": "<string>;\n };\n}>>, {\n title: string;\n titleLoading: string;\n expandText: string;\n collapseText: string;\n}, {}>"
@@ -1780,7 +1798,7 @@
1780
1798
  "name": "AiOverview",
1781
1799
  "variableTypeTokenRange": {
1782
1800
  "startIndex": 1,
1783
- "endIndex": 68
1801
+ "endIndex": 72
1784
1802
  }
1785
1803
  },
1786
1804
  {
package/report/x-components.api.md CHANGED
@@ -240,6 +240,9 @@ type: PropType<string>;
240
240
  slidingPanelContainersClasses: {
241
241
  type: PropType<string>;
242
242
  };
243
+ slidingPanelButtonsClasses: {
244
+ type: PropType<string>;
245
+ };
243
246
  }, {
244
247
  buttonText: ComputedRef<string>;
245
248
  expanded: Ref<boolean>;
@@ -279,6 +282,9 @@ type: PropType<string>;
279
282
  slidingPanelContainersClasses: {
280
283
  type: PropType<string>;
281
284
  };
285
+ slidingPanelButtonsClasses: {
286
+ type: PropType<string>;
287
+ };
282
288
  }>>, {
283
289
  title: string;
284
290
  titleLoading: string;
package/types/x-modules/ai/components/ai-overview.vue.d.ts CHANGED
@@ -53,6 +53,14 @@ declare const _default: import("vue").DefineComponent<{
53
53
  slidingPanelContainersClasses: {
54
54
  type: PropType<string>;
55
55
  };
56
+ /**
57
+ * The classes added to each sliding panel buttons of each query.
58
+ *
59
+ * @public
60
+ */
61
+ slidingPanelButtonsClasses: {
62
+ type: PropType<string>;
63
+ };
56
64
  }, {
57
65
  buttonText: import("vue").ComputedRef<string>;
58
66
  expanded: import("vue").Ref<boolean>;
@@ -122,6 +130,14 @@ declare const _default: import("vue").DefineComponent<{
122
130
  slidingPanelContainersClasses: {
123
131
  type: PropType<string>;
124
132
  };
133
+ /**
134
+ * The classes added to each sliding panel buttons of each query.
135
+ *
136
+ * @public
137
+ */
138
+ slidingPanelButtonsClasses: {
139
+ type: PropType<string>;
140
+ };
125
141
  }>>, {
126
142
  title: string;
127
143
  titleLoading: 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,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAkC/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;;;;;;;;;iBAoBG,kBAAkB,CAAC,SAAS,CAAC;kBAAY,MAAM;;;;4BAoBrD,OAAO;oCARC,OAAO;;;;IAnF9C;;;;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;;;;;;;;AApEtC,wBAiIE"}
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,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;IAkC/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;;;;;;;;;iBAoBG,kBAAkB,CAAC,SAAS,CAAC;kBAAY,MAAM;;;;4BAoBrD,OAAO;oCARC,OAAO;;;;IA3F9C;;;;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;;;;;;;;AA5EtC,wBAyIE"}