@empathyco/x-components 6.0.0-alpha.140 → 6.0.0-alpha.141

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 +12 -0
  3. package/docs/API-reference/components/ai/x-components.ai-overview.md +15 -12
  4. package/js/x-modules/ai/components/ai-overview.vue.js +66 -70
  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 +16 -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 +39 -3
  10. package/report/x-components.api.md +12 -0
  11. package/types/x-modules/ai/components/ai-overview.vue.d.ts +32 -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.141 (2025-09-11)
7
+
8
+ * feat(ai): enhance sliding panel customization (#1872) ([199a6cc](https://github.com/empathyco/x/commit/199a6cc)), closes [#1872](https://github.com/empathyco/x/issues/1872)
9
+
10
+
11
+
12
+
13
+
6
14
  ## 6.0.0-alpha.140 (2025-09-11)
7
15
 
8
16
  * refactor(sliding-panel): simplify scrolling logic and enhance reactivity (#1870) ([c659e00](https://github.com/empathyco/x/commit/c659e00)), closes [#1870](https://github.com/empathyco/x/issues/1870)
package/docs/API-reference/api/x-components.aioverview.md CHANGED
@@ -24,6 +24,12 @@ _default: import("vue").DefineComponent<{
24
24
  type: PropType<string>;
25
25
  default: string;
26
26
  };
27
+ slidingPanelsClasses: {
28
+ type: PropType<string>;
29
+ };
30
+ slidingPanelContainersClasses: {
31
+ type: PropType<string>;
32
+ };
27
33
  }, {
28
34
  buttonText: import("vue").ComputedRef<string>;
29
35
  expanded: import("vue").Ref<boolean>;
@@ -56,6 +62,12 @@ _default: import("vue").DefineComponent<{
56
62
  type: PropType<string>;
57
63
  default: string;
58
64
  };
65
+ slidingPanelsClasses: {
66
+ type: PropType<string>;
67
+ };
68
+ slidingPanelContainersClasses: {
69
+ type: PropType<string>;
70
+ };
59
71
  }>>, {
60
72
  title: string;
61
73
  titleLoading: string;
package/docs/API-reference/components/ai/x-components.ai-overview.md CHANGED
@@ -8,18 +8,21 @@ title: AiOverview
8
8
 
9
9
  ## Props
10
10
 
11
- | Name | Description | Type | Default |
12
- | ------------------------- | ------------------------------------------------------- | ------------------- | ----------------------------------------- |
13
- | <code>title</code> | The text displayed when the question ended loading | <code>string</code> | <code>'Empathy AI Overview'</code> |
14
- | <code>titleLoading</code> | The text displayed when the question is loading. | <code>string</code> | <code>'Generating with Empathy AI'</code> |
15
- | <code>expandText</code> | The text displayed on the toggle button when collapsed. | <code>string</code> | <code>'Show more'</code> |
16
- | <code>collapseText</code> | The text displayed on the toggle button when expanded. | <code>string</code> | <code>'Show less'</code> |
11
+ | Name | Description | Type | Default |
12
+ | ------------------------------------------ | ---------------------------------------------------------------- | ------------------- | ----------------------------------------- |
13
+ | <code>title</code> | The text displayed when the question ended loading | <code>string</code> | <code>'Empathy AI Overview'</code> |
14
+ | <code>titleLoading</code> | The text displayed when the question is loading. | <code>string</code> | <code>'Generating with Empathy AI'</code> |
15
+ | <code>expandText</code> | The text displayed on the toggle button when collapsed. | <code>string</code> | <code>'Show more'</code> |
16
+ | <code>collapseText</code> | The text displayed on the toggle button when expanded. | <code>string</code> | <code>'Show less'</code> |
17
+ | <code>slidingPanelsClasses</code> | The classes added to each sliding panel for each query. | <code>string</code> | <code></code> |
18
+ | <code>slidingPanelContainersClasses</code> | The classes added to each sliding panel container of each query. | <code>string</code> | <code></code> |
17
19
 
18
20
  ## Slots
19
21
 
20
- | Name | Description | Bindings<br />(name - type - description) |
21
- | -------------------------- | ---------------------------- | ----------------------------------------- |
22
- | <code>default</code> | suggestions-search content | <br /> |
23
- | <code>query-results</code> | suggestion query result list | |
24
- | <code>result</code> | (required) result card | |
25
- | <code>toggle-button</code> | toggle button | <br /><br /> |
22
+ | Name | Description | Bindings<br />(name - type - description) |
23
+ | ---------------------------------------- | ---------------------- | ----------------------------------------- |
24
+ | <code>sliding-panels-addons</code> | | |
25
+ | <code>sliding-panels-left-button</code> | | None |
26
+ | <code>sliding-panels-right-button</code> | | None |
27
+ | <code>result</code> | (required) result card | |
28
+ | <code>toggle-button</code> | toggle button | <br /><br /> |
package/js/x-modules/ai/components/ai-overview.vue.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _sfc_main from './ai-overview.vue2.js';
2
- import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, withDirectives, createBlock, createTextVNode, toDisplayString, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode, vShow, normalizeProps, guardReactiveProps, normalizeClass } from 'vue';
2
+ import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, withDirectives, createBlock, createTextVNode, toDisplayString, normalizeStyle, Fragment, renderList, normalizeClass, renderSlot, createCommentVNode, vShow, normalizeProps, guardReactiveProps } from 'vue';
3
3
  import './ai-overview.vue3.js';
4
4
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
5
 
@@ -120,75 +120,71 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
120
120
  "div",
121
121
  _hoisted_8,
122
122
  [
123
- renderSlot(_ctx.$slots, "default", {
124
- suggestionsSearch: _ctx.suggestionsSearch,
125
- queries: _ctx.queries
126
- }, () => [
127
- createElementVNode("div", _hoisted_9, [
128
- (openBlock(true), createElementBlock(
129
- Fragment,
130
- null,
131
- renderList(_ctx.queries, ({ query: suggestionQuery }) => {
132
- return openBlock(), createElementBlock("div", {
133
- key: suggestionQuery,
134
- class: "x-ai-overview-suggestion"
135
- }, [
136
- createVNode(_component_BaseEventButton, {
137
- class: "x-ai-overview-suggestion-query-btn",
138
- events: { UserAcceptedAQuery: suggestionQuery }
139
- }, {
140
- default: withCtx(() => [
141
- createTextVNode(
142
- toDisplayString(suggestionQuery),
143
- 1
144
- /* TEXT */
145
- ),
146
- createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
147
- ]),
148
- _: 2
149
- /* DYNAMIC */
150
- }, 1032, ["events"]),
151
- renderSlot(_ctx.$slots, "query-results", {
152
- queryResults: _ctx.queriesResults[suggestionQuery]
153
- }, () => [
154
- _ctx.queriesResults[suggestionQuery] ? (openBlock(), createBlock(
155
- _component_SlidingPanel,
156
- {
157
- key: 0,
158
- "reset-on-content-change": false
159
- },
160
- {
161
- default: withCtx(() => [
162
- createElementVNode("ul", _hoisted_10, [
163
- (openBlock(true), createElementBlock(
164
- Fragment,
165
- null,
166
- renderList(_ctx.queriesResults[suggestionQuery].results, (result) => {
167
- return openBlock(), createElementBlock("li", {
168
- key: result.id,
169
- "data-test": "ai-overview-suggestion-result"
170
- }, [
171
- renderSlot(_ctx.$slots, "result", { result })
172
- ]);
173
- }),
174
- 128
175
- /* KEYED_FRAGMENT */
176
- ))
177
- ])
178
- ]),
179
- _: 2
180
- /* DYNAMIC */
181
- },
182
- 1024
183
- /* DYNAMIC_SLOTS */
184
- )) : createCommentVNode("v-if", true)
185
- ])
186
- ]);
187
- }),
188
- 128
189
- /* KEYED_FRAGMENT */
190
- ))
191
- ])
123
+ createElementVNode("div", _hoisted_9, [
124
+ (openBlock(true), createElementBlock(
125
+ Fragment,
126
+ null,
127
+ renderList(_ctx.queries, ({ query: suggestionQuery }) => {
128
+ return openBlock(), createElementBlock("div", {
129
+ key: suggestionQuery,
130
+ class: "x-ai-overview-suggestion"
131
+ }, [
132
+ createVNode(_component_BaseEventButton, {
133
+ class: "x-ai-overview-suggestion-query-btn",
134
+ events: { UserAcceptedAQuery: suggestionQuery }
135
+ }, {
136
+ default: withCtx(() => [
137
+ createTextVNode(
138
+ toDisplayString(suggestionQuery),
139
+ 1
140
+ /* TEXT */
141
+ ),
142
+ createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
143
+ ]),
144
+ _: 2
145
+ /* DYNAMIC */
146
+ }, 1032, ["events"]),
147
+ _ctx.queriesResults[suggestionQuery] ? (openBlock(), createBlock(_component_SlidingPanel, {
148
+ key: 0,
149
+ class: normalizeClass(_ctx.slidingPanelsClasses),
150
+ "scroll-container-class": _ctx.slidingPanelContainersClasses,
151
+ "reset-on-content-change": false
152
+ }, {
153
+ "sliding-panel-addons": withCtx(({ arrivedState }) => [
154
+ renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
155
+ ]),
156
+ "sliding-panel-left-button": withCtx(() => [
157
+ renderSlot(_ctx.$slots, "sliding-panels-left-button")
158
+ ]),
159
+ "sliding-panel-right-button": withCtx(() => [
160
+ renderSlot(_ctx.$slots, "sliding-panels-right-button")
161
+ ]),
162
+ default: withCtx(() => [
163
+ createElementVNode("ul", _hoisted_10, [
164
+ (openBlock(true), createElementBlock(
165
+ Fragment,
166
+ null,
167
+ renderList(_ctx.queriesResults[suggestionQuery].results, (result) => {
168
+ return openBlock(), createElementBlock("li", {
169
+ key: result.id,
170
+ "data-test": "ai-overview-suggestion-result"
171
+ }, [
172
+ renderSlot(_ctx.$slots, "result", { result })
173
+ ]);
174
+ }),
175
+ 128
176
+ /* KEYED_FRAGMENT */
177
+ ))
178
+ ])
179
+ ]),
180
+ _: 2
181
+ /* DYNAMIC */
182
+ }, 1032, ["class", "scroll-container-class"])) : createCommentVNode("v-if", true)
183
+ ]);
184
+ }),
185
+ 128
186
+ /* KEYED_FRAGMENT */
187
+ ))
192
188
  ])
193
189
  ],
194
190
  512
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 <!-- @slot suggestions-search content -->\n <slot :suggestions-search=\"suggestionsSearch\" :queries=\"queries\">\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 <!-- @slot suggestion query result list -->\n <slot name=\"query-results\" :query-results=\"queriesResults[suggestionQuery]\">\n <SlidingPanel\n v-if=\"queriesResults[suggestionQuery]\"\n :reset-on-content-change=\"false\"\n >\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 </slot>\n </div>\n </div>\n </slot>\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=\"setExpanded(!expanded)\"\n />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <!-- @slot toggle button -->\n <slot name=\"toggle-button\" v-bind=\"{ expanded, setExpanded, buttonText }\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click=\"setExpanded(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"\n expanded\n ? 'x-ai-overview-toggle-btn-icon-expanded'\n : 'x-ai-overview-toggle-btn-icon-collapsed'\n \"\n />\n </button>\n </slot>\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 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 setExpanded(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\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 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;\n}\n.x-ai-overview-toggle-btn-icon {\n @apply x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n @apply x-rotate-180;\n}\n.x-ai-overview-toggle-btn-icon-collapsed {\n @apply x-rotate-0;\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","_renderSlot","_Fragment","_renderList","_createCommentVNode","_normalizeProps","_guardReactiveProps","_normalizeClass","_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 :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=\"setExpanded(!expanded)\"\n />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <!-- @slot toggle button -->\n <slot name=\"toggle-button\" v-bind=\"{ expanded, setExpanded, buttonText }\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click=\"setExpanded(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"\n expanded\n ? 'x-ai-overview-toggle-btn-icon-expanded'\n : 'x-ai-overview-toggle-btn-icon-collapsed'\n \"\n />\n </button>\n </slot>\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 setExpanded(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\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 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;\n}\n.x-ai-overview-toggle-btn-icon {\n @apply x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n @apply x-rotate-180;\n}\n.x-ai-overview-toggle-btn-icon-collapsed {\n @apply x-rotate-0;\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","_normalizeProps","_guardReactiveProps","_vShow"],"mappings":"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"}
package/js/x-modules/ai/components/ai-overview.vue2.js CHANGED
@@ -163,6 +163,22 @@ var _sfc_main = defineComponent({
163
163
  type: String,
164
164
  default: 'Show less',
165
165
  },
166
+ /**
167
+ * The classes added to each sliding panel for each query.
168
+ *
169
+ * @public
170
+ */
171
+ slidingPanelsClasses: {
172
+ type: String,
173
+ },
174
+ /**
175
+ * The classes added to each sliding panel container of each query.
176
+ *
177
+ * @public
178
+ */
179
+ slidingPanelContainersClasses: {
180
+ type: String,
181
+ },
166
182
  },
167
183
  setup(props) {
168
184
  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 <!-- @slot suggestions-search content -->\n <slot :suggestions-search=\"suggestionsSearch\" :queries=\"queries\">\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 <!-- @slot suggestion query result list -->\n <slot name=\"query-results\" :query-results=\"queriesResults[suggestionQuery]\">\n <SlidingPanel\n v-if=\"queriesResults[suggestionQuery]\"\n :reset-on-content-change=\"false\"\n >\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 </slot>\n </div>\n </div>\n </slot>\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=\"setExpanded(!expanded)\"\n />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <!-- @slot toggle button -->\n <slot name=\"toggle-button\" v-bind=\"{ expanded, setExpanded, buttonText }\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click=\"setExpanded(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"\n expanded\n ? 'x-ai-overview-toggle-btn-icon-expanded'\n : 'x-ai-overview-toggle-btn-icon-collapsed'\n \"\n />\n </button>\n </slot>\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 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 setExpanded(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\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 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;\n}\n.x-ai-overview-toggle-btn-icon {\n @apply x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n @apply x-rotate-180;\n}\n.x-ai-overview-toggle-btn-icon-collapsed {\n @apply x-rotate-0;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqIA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,MAAM;AACP,KAAA;IACD,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,cAAc;QACd,eAAe;QACf,eAAe;QACf,cAAc;QACd,YAAY;QACZ,IAAI;QACJ,YAAY;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;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,WAAW,CAAC,QAAiB,EAAA;YACpC,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;AACD,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,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 :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=\"setExpanded(!expanded)\"\n />\n <div class=\"x-ai-overview-toggle-wrapper\">\n <!-- @slot toggle button -->\n <slot name=\"toggle-button\" v-bind=\"{ expanded, setExpanded, buttonText }\">\n <button\n class=\"x-ai-overview-toggle-btn\"\n data-test=\"ai-overview-toggle-button\"\n @click=\"setExpanded(!expanded)\"\n >\n {{ buttonText }}\n <ChevronDownIcon\n class=\"x-ai-overview-toggle-btn-icon\"\n :class=\"\n expanded\n ? 'x-ai-overview-toggle-btn-icon-expanded'\n : 'x-ai-overview-toggle-btn-icon-collapsed'\n \"\n />\n </button>\n </slot>\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 setExpanded(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\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 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;\n}\n.x-ai-overview-toggle-btn-icon {\n @apply x-icon x-transition-all x-duration-300;\n}\n.x-ai-overview-toggle-btn-icon-expanded {\n @apply x-rotate-180;\n}\n.x-ai-overview-toggle-btn-icon-collapsed {\n @apply x-rotate-0;\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.140",
3
+ "version": "6.0.0-alpha.141",
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": "723cfeb2cc7a0c5ff32a6236fe6d6d2b98376d9f"
145
+ "gitHead": "26189d713d41b49f6d2d6f32b97db63fe9e926db"
146
146
  }
package/report/x-components.api.json CHANGED
@@ -1523,7 +1523,25 @@
1523
1523
  },
1524
1524
  {
1525
1525
  "kind": "Content",
1526
- "text": "<string>;\n default: string;\n };\n}, {\n buttonText: import(\"vue\")."
1526
+ "text": "<string>;\n default: string;\n };\n slidingPanelsClasses: {\n type: "
1527
+ },
1528
+ {
1529
+ "kind": "Reference",
1530
+ "text": "PropType",
1531
+ "canonicalReference": "@vue/runtime-core!PropType:type"
1532
+ },
1533
+ {
1534
+ "kind": "Content",
1535
+ "text": "<string>;\n };\n slidingPanelContainersClasses: {\n type: "
1536
+ },
1537
+ {
1538
+ "kind": "Reference",
1539
+ "text": "PropType",
1540
+ "canonicalReference": "@vue/runtime-core!PropType:type"
1541
+ },
1542
+ {
1543
+ "kind": "Content",
1544
+ "text": "<string>;\n };\n}, {\n buttonText: import(\"vue\")."
1527
1545
  },
1528
1546
  {
1529
1547
  "kind": "Reference",
@@ -1739,7 +1757,25 @@
1739
1757
  },
1740
1758
  {
1741
1759
  "kind": "Content",
1742
- "text": "<string>;\n default: string;\n };\n}>>, {\n title: string;\n titleLoading: string;\n expandText: string;\n collapseText: string;\n}, {}>"
1760
+ "text": "<string>;\n default: string;\n };\n slidingPanelsClasses: {\n type: "
1761
+ },
1762
+ {
1763
+ "kind": "Reference",
1764
+ "text": "PropType",
1765
+ "canonicalReference": "@vue/runtime-core!PropType:type"
1766
+ },
1767
+ {
1768
+ "kind": "Content",
1769
+ "text": "<string>;\n };\n slidingPanelContainersClasses: {\n type: "
1770
+ },
1771
+ {
1772
+ "kind": "Reference",
1773
+ "text": "PropType",
1774
+ "canonicalReference": "@vue/runtime-core!PropType:type"
1775
+ },
1776
+ {
1777
+ "kind": "Content",
1778
+ "text": "<string>;\n };\n}>>, {\n title: string;\n titleLoading: string;\n expandText: string;\n collapseText: string;\n}, {}>"
1743
1779
  }
1744
1780
  ],
1745
1781
  "fileUrlPath": "dist/types/x-modules/ai/components/ai-overview.vue.d.ts",
@@ -1748,7 +1784,7 @@
1748
1784
  "name": "AiOverview",
1749
1785
  "variableTypeTokenRange": {
1750
1786
  "startIndex": 1,
1751
- "endIndex": 60
1787
+ "endIndex": 68
1752
1788
  }
1753
1789
  },
1754
1790
  {
package/report/x-components.api.md CHANGED
@@ -234,6 +234,12 @@ collapseText: {
234
234
  type: PropType<string>;
235
235
  default: string;
236
236
  };
237
+ slidingPanelsClasses: {
238
+ type: PropType<string>;
239
+ };
240
+ slidingPanelContainersClasses: {
241
+ type: PropType<string>;
242
+ };
237
243
  }, {
238
244
  buttonText: ComputedRef<string>;
239
245
  expanded: Ref<boolean>;
@@ -266,6 +272,12 @@ collapseText: {
266
272
  type: PropType<string>;
267
273
  default: string;
268
274
  };
275
+ slidingPanelsClasses: {
276
+ type: PropType<string>;
277
+ };
278
+ slidingPanelContainersClasses: {
279
+ type: PropType<string>;
280
+ };
269
281
  }>>, {
270
282
  title: string;
271
283
  titleLoading: string;
package/types/x-modules/ai/components/ai-overview.vue.d.ts CHANGED
@@ -37,6 +37,22 @@ declare const _default: import("vue").DefineComponent<{
37
37
  type: PropType<string>;
38
38
  default: string;
39
39
  };
40
+ /**
41
+ * The classes added to each sliding panel for each query.
42
+ *
43
+ * @public
44
+ */
45
+ slidingPanelsClasses: {
46
+ type: PropType<string>;
47
+ };
48
+ /**
49
+ * The classes added to each sliding panel container of each query.
50
+ *
51
+ * @public
52
+ */
53
+ slidingPanelContainersClasses: {
54
+ type: PropType<string>;
55
+ };
40
56
  }, {
41
57
  buttonText: import("vue").ComputedRef<string>;
42
58
  expanded: import("vue").Ref<boolean>;
@@ -89,6 +105,22 @@ declare const _default: import("vue").DefineComponent<{
89
105
  type: PropType<string>;
90
106
  default: string;
91
107
  };
108
+ /**
109
+ * The classes added to each sliding panel for each query.
110
+ *
111
+ * @public
112
+ */
113
+ slidingPanelsClasses: {
114
+ type: PropType<string>;
115
+ };
116
+ /**
117
+ * The classes added to each sliding panel container of each query.
118
+ *
119
+ * @public
120
+ */
121
+ slidingPanelContainersClasses: {
122
+ type: PropType<string>;
123
+ };
92
124
  }>>, {
93
125
  title: string;
94
126
  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;;;;;;;;;;iBAqBG,kBAAkB,CAAC,SAAS,CAAC;kBAAY,MAAM;;;;4BAYrD,OAAO;;;;IAlEtC;;;;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;;;;;;;;;AAlDtC,wBA2GE"}
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;;;;4BAYrD,OAAO;;;;IAnFtC;;;;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,wBA4HE"}