@empathyco/x-components
Version:
Empathy X Components
323 lines (320 loc) • 15.5 kB
JavaScript
import _sfc_main from './ai-overview.vue2.js';
import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, createVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, normalizeStyle, withDirectives, Fragment, renderList, vShow, withModifiers } from 'vue';
import './ai-overview.vue3.js';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
const _hoisted_1 = {
key: 0,
ref: "aiOverviewRef",
class: "x-ai-overview",
"data-test": "ai-overview-wrapper"
};
const _hoisted_2 = { class: "x-ai-overview-main" };
const _hoisted_3 = {
key: 0,
class: "x-ai-overview-title-loading",
"data-test": "ai-overview-title-loading"
};
const _hoisted_4 = /* @__PURE__ */ createElementVNode(
"span",
{ class: "x-ai-overview-title-loading-indicator" },
null,
-1
/* HOISTED */
);
const _hoisted_5 = {
class: "x-ai-overview-title-loading-text",
"data-test": "ai-overview-title-loading-text"
};
const _hoisted_6 = {
class: "x-ai-overview-title",
"data-test": "ai-overview-title"
};
const _hoisted_7 = { class: "x-ai-overview-content-wrapper" };
const _hoisted_8 = {
key: 0,
class: "x-ai-overview-content-title",
"data-test": "ai-overview-content-title"
};
const _hoisted_9 = ["innerHTML"];
const _hoisted_10 = {
key: 1,
class: "x-ai-overview-suggestions",
"data-test": "ai-overview-suggestions-container"
};
const _hoisted_11 = { class: "x-ai-overview-suggestion-results" };
const _hoisted_12 = {
class: "x-ai-overview-gradient",
"data-test": "ai-overview-gradient"
};
const _hoisted_13 = { class: "x-ai-overview-toggle-wrapper" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_AIStarIcon = resolveComponent("AIStarIcon");
const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
const _component_Fade = resolveComponent("Fade");
const _component_ChangeHeight = resolveComponent("ChangeHeight");
const _component_SpinnerIcon = resolveComponent("SpinnerIcon");
const _component_ArrowRightIcon = resolveComponent("ArrowRightIcon");
const _component_BaseEventButton = resolveComponent("BaseEventButton");
const _component_SlidingPanel = resolveComponent("SlidingPanel");
const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
const _component_CollapseHeight = resolveComponent("CollapseHeight");
const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
return openBlock(), createBlock(_component_CollapseHeight, null, {
default: withCtx(() => [
!_ctx.isNoResults ? (openBlock(), createElementBlock(
"div",
_hoisted_1,
[
createElementVNode("div", _hoisted_2, [
createVNode(_component_Fade, { mode: "out-in" }, {
default: withCtx(() => [
_ctx.suggestionsLoading ? (openBlock(), createElementBlock("span", _hoisted_3, [
_hoisted_4,
createElementVNode("span", _hoisted_5, [
renderSlot(_ctx.$slots, "title-loading", {}, () => [
createTextVNode(
toDisplayString(_ctx.titleLoading),
1
/* TEXT */
)
])
])
])) : (openBlock(), createBlock(_component_DisplayEmitter, {
key: 1,
payload: _ctx.tagging?.toolingDisplay ?? _ctx.emptyTaggingRequest,
"event-metadata": {
feature: "overview",
displayOriginalQuery: _ctx.query || "overview-without-query",
replaceable: false
},
"data-test": "ai-overview-display-emitter"
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_6, [
createVNode(_component_AIStarIcon, { class: "x-ai-overview-title-icon" }),
createTextVNode(
toDisplayString(!!_ctx.title ? _ctx.title : _ctx.suggestionText),
1
/* TEXT */
)
])
]),
_: 1
/* STABLE */
}, 8, ["payload", "event-metadata"]))
]),
_: 3
/* FORWARDED */
}),
createVNode(_component_ChangeHeight, null, {
default: withCtx(() => [
createElementVNode("div", _hoisted_7, [
_ctx.title ? (openBlock(), createElementBlock(
"span",
_hoisted_8,
toDisplayString(_ctx.suggestionText),
1
/* TEXT */
)) : createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass(_ctx.contentClasses),
"data-test": "ai-overview-content",
innerHTML: _ctx.parsedResponseText
}, null, 10, _hoisted_9)
])
]),
_: 1
/* STABLE */
}),
renderSlot(_ctx.$slots, "extra-content")
]),
createVNode(_component_CollapseHeight, {
style: normalizeStyle({
"--x-collapse-height-transition-duration": `${300 * _ctx.suggestionsSearch.length}ms`
}),
"data-test": "ai-overview-collapse-height-suggestions"
}, {
default: withCtx(() => [
withDirectives(createElementVNode(
"div",
null,
[
!_ctx.suggestionsSearch.length ? (openBlock(), createBlock(_component_SpinnerIcon, {
key: 0,
class: "x-ai-overview-suggestions-loading",
"data-test": "ai-overview-suggestions-loading"
})) : (openBlock(), createElementBlock("div", _hoisted_10, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }, suggestionIndex) => {
return openBlock(), createBlock(_component_DisplayEmitter, {
key: suggestionQuery,
payload: _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplay ?? _ctx.emptyTaggingRequest,
"event-metadata": {
feature: "overview",
displayOriginalQuery: _ctx.query || "overview-without-query",
replaceable: false
},
"data-test": "ai-overview-query-display-emitter"
}, {
default: withCtx(() => [
createElementVNode(
"div",
{
class: normalizeClass(["x-ai-overview-suggestion", {
"x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
}]),
"data-test": "ai-overview-suggestion",
style: normalizeStyle({ animationDelay: `${suggestionIndex * 300}ms` })
},
[
createVNode(_component_BaseEventButton, {
class: "x-ai-overview-suggestion-query-btn",
events: { UserAcceptedAQuery: suggestionQuery }
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(suggestionQuery) + " ",
1
/* TEXT */
),
createVNode(_component_ArrowRightIcon, { class: "x-ai-overview-suggestion-query-btn-icon" })
]),
_: 2
/* DYNAMIC */
}, 1032, ["events"]),
createVNode(_component_DisplayClickProvider, {
"tooling-display-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayClick,
"tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart,
"result-feature": "overview"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "sliding-panel", { results: queriesResults }, () => [
createVNode(_component_SlidingPanel, {
class: normalizeClass(_ctx.slidingPanelsClasses),
"scroll-container-class": _ctx.slidingPanelContainersClasses,
"button-class": _ctx.slidingPanelButtonsClasses,
"reset-on-content-change": false
}, {
"sliding-panel-addons": withCtx(({ arrivedState }) => [
renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
]),
"sliding-panel-left-button": withCtx(() => [
renderSlot(_ctx.$slots, "sliding-panels-left-button")
]),
"sliding-panel-right-button": withCtx(() => [
renderSlot(_ctx.$slots, "sliding-panels-right-button")
]),
default: withCtx(() => [
createElementVNode("ul", _hoisted_11, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(queriesResults, (result, resultIndex) => {
return openBlock(), createElementBlock(
"li",
{
key: result.id,
"data-test": "ai-overview-suggestion-result",
class: normalizeClass({
"x-ai-overview-result-animation": _ctx.shouldAnimateSuggestion
}),
style: normalizeStyle({
animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`
})
},
[
renderSlot(_ctx.$slots, "result", { result })
],
6
/* CLASS, STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["class", "scroll-container-class", "button-class"])
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"])
],
6
/* CLASS, STYLE */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["payload", "event-metadata"]);
}),
128
/* KEYED_FRAGMENT */
)),
renderSlot(_ctx.$slots, "suggestions-extra-content")
]))
],
512
/* NEED_PATCH */
), [
[vShow, _ctx.expanded]
])
]),
_: 3
/* FORWARDED */
}, 8, ["style"]),
createVNode(_component_Fade, null, {
default: withCtx(() => [
_ctx.queries.length ? (openBlock(), createElementBlock("div", {
key: 0,
class: "x-cursor-pointer",
"data-test": "ai-overview-toggle-button-wrapper",
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.emitAndSetExpand(!_ctx.expanded))
}, [
withDirectives(createElementVNode(
"div",
_hoisted_12,
null,
512
/* NEED_PATCH */
), [
[vShow, !_ctx.expanded]
]),
createElementVNode("div", _hoisted_13, [
createElementVNode("button", {
class: "x-ai-overview-toggle-btn",
"data-test": "ai-overview-toggle-button",
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.emitAndSetExpand(!_ctx.expanded), ["stop"]))
}, [
createTextVNode(
toDisplayString(_ctx.buttonText) + " ",
1
/* TEXT */
),
createVNode(_component_ChevronDownIcon, {
class: normalizeClass(["x-ai-overview-toggle-btn-icon", { "x-ai-overview-toggle-btn-icon-expanded": _ctx.expanded }])
}, null, 8, ["class"])
])
])
])) : createCommentVNode("v-if", true)
]),
_: 1
/* STABLE */
})
],
512
/* NEED_PATCH */
)) : createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
});
}
var aiOverview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { aiOverview as default };
//# sourceMappingURL=ai-overview.vue.js.map