UNPKG

@empathyco/x-components

Version:
233 lines (230 loc) • 10.1 kB
import { defineComponent, ref, computed, watch } from 'vue'; import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js'; import '../../../components/animations/animate-scale/animate-scale.style.scss.js'; import '../../../components/animations/animate-translate/animate-translate.style.scss.js'; import '../../../components/animations/animate-width.vue2.js'; import '../../../components/animations/animate-width.vue3.js'; import ChangeHeight from '../../../components/animations/change-height.vue.js'; import CollapseHeight from '../../../components/animations/collapse-height.vue.js'; import '../../../components/animations/collapse-width.vue2.js'; import '../../../components/animations/collapse-width.vue3.js'; import '../../../components/animations/cross-fade.vue2.js'; import '../../../components/animations/cross-fade.vue3.js'; import '../../../components/animations/fade-and-slide.vue2.js'; import '../../../components/animations/fade-and-slide.vue3.js'; import Fade from '../../../components/animations/fade.vue.js'; import '../../../components/animations/no-animation.vue.js'; import '../../../components/animations/staggered-fade-and-slide.vue2.js'; import '../../../components/animations/staggered-fade-and-slide.vue3.js'; import '../../../components/auto-progress-bar.vue2.js'; import '../../../components/auto-progress-bar.vue3.js'; import '../../../components/base-dropdown.vue2.js'; import '../../../components/base-dropdown.vue3.js'; import BaseEventButton from '../../../components/base-event-button.vue.js'; import '../../../components/base-grid.vue2.js'; import '../../../components/base-grid.vue3.js'; import '../../../components/base-keyboard-navigation.vue2.js'; import '../../../components/base-rating.vue2.js'; import '../../../components/base-rating.vue3.js'; import '../../../components/base-slider.vue2.js'; import '../../../components/base-slider.vue3.js'; import '../../../components/base-switch.vue2.js'; import '../../../components/base-switch.vue3.js'; import '../../../components/base-teleport.vue2.js'; import '../../../components/base-variable-column-grid.vue2.js'; import '../../../components/column-picker/base-column-picker-dropdown.vue2.js'; import '../../../components/column-picker/base-column-picker-list.vue2.js'; import '../../../components/currency/base-currency.vue2.js'; import '../../../components/display-click-provider.vue.js'; import _sfc_main$1 from '../../../components/display-emitter.vue.js'; import '../../../components/filters/labels/base-price-filter-label.vue.js'; import '../../../components/filters/labels/base-rating-filter-label.vue2.js'; import '../../../components/global-x-bus.vue.js'; import '../../../components/highlight.vue2.js'; import AIStarIcon from '../../../components/icons/ai-star.vue.js'; import ArrowRightIcon from '../../../components/icons/arrow-right.vue.js'; import ChevronDownIcon from '../../../components/icons/chevron-down.vue.js'; import '../../../components/items-list.vue2.js'; import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js'; import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js'; import '../../../components/layouts/multi-column-max-width-layout.vue2.js'; import '../../../components/layouts/multi-column-max-width-layout.vue3.js'; import '../../../components/layouts/multi-column-max-width-layout.vue4.js'; import '../../../components/layouts/single-column-layout.vue2.js'; import '../../../components/layouts/single-column-layout.vue3.js'; import '../../../components/location-provider.vue.js'; import '../../../components/modals/base-events-modal-close.vue2.js'; import '../../../components/modals/base-events-modal-open.vue2.js'; import '../../../components/modals/base-events-modal.vue2.js'; import '../../../components/modals/base-id-modal-close.vue2.js'; import '../../../components/modals/base-id-modal-open.vue2.js'; import '../../../components/modals/base-id-modal.vue2.js'; import '../../../components/modals/base-modal.vue2.js'; import '../../../components/modals/base-modal.vue3.js'; import '../../../components/modals/close-main-modal.vue2.js'; import '../../../components/modals/main-modal.vue2.js'; import '../../../components/modals/open-main-modal.vue2.js'; import '../../../components/page-loader-button.vue2.js'; import '../../../components/page-loader-button.vue3.js'; import '../../../components/page-selector.vue2.js'; import '../../../components/page-selector.vue3.js'; import '../../../components/panels/base-header-toggle-panel.vue2.js'; import '../../../components/panels/base-header-toggle-panel.vue3.js'; import '../../../components/panels/base-id-toggle-panel-button.vue2.js'; import '../../../components/panels/base-id-toggle-panel.vue2.js'; import '../../../components/panels/base-tabs-panel.vue2.js'; import '../../../components/panels/base-tabs-panel.vue3.js'; import '../../../components/panels/base-toggle-panel.vue2.js'; import '../../../components/result/base-result-add-to-cart.vue2.js'; import '../../../components/result/base-result-current-price.vue2.js'; import '../../../components/result/base-result-image.vue2.js'; import '../../../components/result/base-result-image.vue3.js'; import '../../../components/result/base-result-link.vue2.js'; import '../../../components/result/base-result-link.vue3.js'; import '../../../components/result/base-result-previous-price.vue2.js'; import '../../../components/result/base-result-rating.vue2.js'; import '../../../components/result/base-result-rating.vue3.js'; import '../../../components/result/result-variant-selector.vue2.js'; import '../../../components/result/result-variant-selector.vue3.js'; import '../../../components/result/result-variants-provider.vue.js'; import '../../../components/scroll/base-scroll.vue2.js'; import '@empathyco/x-utils'; import { use$x } from '../../../composables/use-_x.js'; import SlidingPanel from '../../../components/sliding-panel.vue.js'; import '../../../components/snippet-callbacks.vue2.js'; import '../../../components/suggestions/base-suggestion.vue2.js'; import '../../../components/suggestions/base-suggestions.vue2.js'; import '../../../components/suggestions/base-suggestions.vue3.js'; import '../../../composables/create-use-device.js'; import 'vuex'; import '@vue/devtools-api'; import '../../../plugins/devtools/timeline.devtools.js'; import 'rxjs/operators'; import 'rxjs'; import '../../../plugins/devtools/colors.utils.js'; import '../../../plugins/x-bus.js'; import '../../../plugins/x-plugin.js'; import { useGetter } from '../../../composables/use-getter.js'; import '@vueuse/core'; import { useState } from '../../../composables/use-state.js'; import { typing } from '../../../directives/typing.js'; import { aiXModule } from '../x-module.js'; var _sfc_main = defineComponent({ directives: { typing, }, xModule: aiXModule.name, components: { AIStarIcon, ArrowRightIcon, BaseEventButton, ChevronDownIcon, CollapseHeight, ChangeHeight, Fade, SlidingPanel, DisplayEmitter: _sfc_main$1, }, props: { /** * The text displayed when the question ended loading * * @public */ title: { type: String, default: 'Empathy AI Overview', }, /** * The text displayed when the question is loading. * * @public */ titleLoading: { type: String, default: 'Generating with Empathy AI', }, /** * The text displayed on the toggle button when collapsed. * * @public */ expandText: { type: String, default: 'Show more', }, /** * The text displayed on the toggle button when expanded. * * @public */ collapseText: { type: String, default: 'Show less', }, /** * The classes added to each sliding panel for each query. * * @public */ slidingPanelsClasses: { type: String, }, /** * The classes added to each sliding panel container of each query. * * @public */ slidingPanelContainersClasses: { type: String, }, /** * The classes added to each sliding panel buttons of each query. * * @public */ slidingPanelButtonsClasses: { type: String, }, }, setup(props) { const $x = use$x(); const { query } = useGetter('ai'); const { suggestionText, responseText, queries, suggestionsSearch, suggestionsLoading, tagging, } = useState('ai'); const expanded = ref(false); const queriesResults = computed(() => { return suggestionsSearch.value.reduce((acc, { query, results, numFound }) => { acc[query] = { results, numFound }; return acc; }, {}); }); const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText)); function onExpandButtonClick(newValue) { $x.emit('UserClickedAiOverviewExpandButton', expanded.value, { suggestionText: suggestionText.value, toolingDisplayClick: tagging.value?.toolingDisplayClick, }); setExpanded(newValue); } function setExpanded(newValue) { expanded.value = newValue; } watch(query, () => (expanded.value = false)); return { buttonText, expanded, queries, responseText, suggestionsLoading, queriesResults, suggestionsSearch, suggestionText, setExpanded, onExpandButtonClick, query, tagging, }; }, }); export { _sfc_main as default }; //# sourceMappingURL=ai-overview.vue2.js.map