@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue2.js

Empathy X Components

import { marked } from 'marked';
import { defineComponent, ref, computed, watch, onMounted } 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 _sfc_main$2 from '../../../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 SpinnerIcon from '../../../components/icons/spinner.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,
        SpinnerIcon,
        DisplayEmitter: _sfc_main$1,
        DisplayClickProvider: _sfc_main$2,
    },
    props: {
        /* The text displayed when the question ended loading */
        title: {
            type: String,
        },
        /* The text displayed when the question is loading. */
        titleLoading: {
            type: String,
            default: 'Generating with Empathy AI',
        },
        /* The text displayed on the toggle button when collapsed. */
        expandText: {
            type: String,
            default: 'Show more',
        },
        /* The text displayed on the toggle button when expanded. */
        collapseText: {
            type: String,
            default: 'Show less',
        },
        /* Auto expand the AI Overview when there are queries in AI and no-results in search. */
        autoExpandInSearchNoResults: {
            type: Boolean,
            default: true,
        },
        /* The classes added to the parsed response text container. */
        contentClasses: {
            type: String,
        },
        /* The classes added to each sliding panel for each query. */
        slidingPanelsClasses: {
            type: String,
        },
        /* The classes added to each sliding panel container of each query. */
        slidingPanelContainersClasses: {
            type: String,
        },
        /* The classes added to each sliding panel button of each query. */
        slidingPanelButtonsClasses: {
            type: String,
        },
    },
    setup(props) {
        const $x = use$x();
        const { query } = useGetter('ai');
        const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging, isNoResults, queries, } = useState('ai');
        const emptyTaggingRequest = { url: '', params: {} };
        const aiOverviewRef = ref(null);
        const expanded = ref(false);
        const shouldAnimateSuggestion = ref(true);
        const parsedResponseText = computed(() => marked.parse(responseText.value));
        const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText));
        function emitAndSetExpand(isExpanded) {
            $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {
                suggestionText: suggestionText.value,
                toolingDisplayClick: tagging.value?.toolingDisplayClick,
            });
            expanded.value = isExpanded;
            if (!expanded.value) {
                aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' });
                shouldAnimateSuggestion.value = false;
            }
        }
        /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,
        the request for suggestions has ended; there are queries in AI and no-results in search. */
        watch([suggestionsLoading, () => $x.noResults], () => {
            if (props.autoExpandInSearchNoResults &&
                !suggestionsLoading.value &&
                queries.value.length &&
                $x.noResults) {
                emitAndSetExpand(true);
            }
        });
        $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {
            expanded.value = false;
            shouldAnimateSuggestion.value = true;
        });
        onMounted(() => {
            $x.emit('AiOverviewMounted', undefined, { feature: 'overview' });
        });
        return {
            aiOverviewRef,
            buttonText,
            emptyTaggingRequest,
            expanded,
            parsedResponseText,
            suggestionsLoading,
            suggestionsSearch,
            suggestionText,
            emitAndSetExpand,
            shouldAnimateSuggestion,
            query,
            tagging,
            isNoResults,
            queries,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=ai-overview.vue2.js.map