@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
847 lines (825 loc) • 141 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var reactivecore = require('@appbaseio/reactivecore');
var constants = require('@appbaseio/reactivecore/lib/utils/constants');
var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
var helper = require('@appbaseio/reactivecore/lib/utils/helper');
var vueEmotion = require('@appbaseio/vue-emotion');
var css = require('@emotion/css');
var polished = require('polished');
var Button = require('./Button-7aee17e3.js');
var vueTypes = require('./vueTypes-adf43075.js');
var index = require('./index-7ca9570e.js');
var ComponentWrapper = require('./ComponentWrapper-3bedbe57.js');
var PreferencesConsumer = require('./PreferencesConsumer-37cab7a0.js');
var Title = require('./Title-d513ac26.js');
var Flex = require('./Flex-f7af0673.js');
var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
var hotkeys = _interopDefault(require('hotkeys-js'));
var DOMPurify = _interopDefault(require('isomorphic-dompurify'));
var remarkable = require('remarkable');
var CancelSvg = require('./CancelSvg-6094cd37.js');
var Input = require('./Input-55fbd8e1.js');
var Container = require('./Container-1c05785a.js');
var Highlight = _interopDefault(require('vue-highlight-words'));
var _templateObject;
var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n \tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\n\t", "\n\t", "\n\t};\n"])), function (_ref) {
var theme = _ref.theme,
searchBox = _ref.searchBox;
return searchBox && "background-color: " + (theme.colors.backgroundColor || '#fafafa') + ";\n\t\tcolor: " + (theme.colors.textColor || '#fff') + ";\n\n\t\t&:focus-within {\n\t\t\tbackground-color: " + (theme.colors.backgroundColor || '#fff') + ";\n\t\t}";
}, function (props) {
return props.isOpen && "box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px;\n\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;";
});
InputGroup.defaultProps = {
className: 'input-group'
};
var _templateObject$1;
var InputAddon = vueEmotion.styled('span')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #fafafa;\n border: 1px solid transparent;\n border-radius: 6px;\n color: rgba(0, 0, 0, 0.85);\n font-size: 14px;\n font-weight: 400;\n padding: 0 11px;\n position: relative;\n transition: all 0.3s;\n box-sizing: border-box;\n overflow: hidden;\n\n &:first-of-type {\n border-right: none;\n }\n &:last-of-type {\n border-left: none;\n }\n"])));
InputAddon.defaultProps = {
className: 'input-addon'
};
var getClassName = reactivecore.helper.getClassName;
var SuggestionWrapper = {
name: 'SuggestionWrapper',
props: {
innerClassName: vueTypes.types.string,
themePreset: vueTypes.types.themePreset,
innerClass: vueTypes.types.style
},
render: function render() {
var _this$$props = this.$props,
themePreset = _this$$props.themePreset,
innerClass = _this$$props.innerClass,
innerClassName = _this$$props.innerClassName;
return vue.createVNode("div", {
"class": Input.noSuggestions(themePreset) + " " + getClassName(innerClass, innerClassName || '')
}, [vue.createVNode("li", null, [this.$slots["default"]()])]);
}
};
var _templateObject$2;
var highlightStyle = {
fontWeight: 600,
padding: 0,
backgroundColor: 'transparent',
color: 'inherit'
};
var PredictiveSuggestion = vueEmotion.styled('span')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
var SuggestionItem = {
name: 'SuggestionItem',
props: {
currentValue: vueTypes.types.string,
suggestion: vueTypes.types.any,
innerHTML: vueTypes.types.string.isRequired
},
data: function data() {
return {
isOverflowing: false
};
},
methods: {
updateOverflowing: function updateOverflowing() {
if (this.$refs.container && this.$refs.content) {
var _this$$refs = this.$refs,
container = _this$$refs.container,
content = _this$$refs.content;
var containerWidth = container.offsetWidth;
var contentWidth = content.scrollWidth;
this.isOverflowing = contentWidth > containerWidth;
} else {
this.isOverflowing = false;
}
}
},
mounted: function mounted() {
this.updateOverflowing();
},
render: function render() {
var _this = this;
var _this$suggestion = this.suggestion,
label = _this$suggestion.label,
value = _this$suggestion.value,
title = _this$suggestion.title,
description = _this$suggestion.description,
image = _this$suggestion.image,
isPredictiveSuggestion = _this$suggestion.isPredictiveSuggestion,
_suggestion_type = _this$suggestion._suggestion_type,
_category = _this$suggestion._category;
if (label) {
// label has highest precedence
return typeof label === 'string' ? vue.createVNode("div", {
"ref": "container",
"class": "trim",
"title": this.isOverflowing ? label : ''
}, [vue.createVNode("div", {
"ref": "content"
}, [(_category ? false : isPredictiveSuggestion
// eslint-disable-next-line
|| !!_suggestion_type) ? vue.createVNode(PredictiveSuggestion, {
"innerHTML": label
}, null) : vue.createVNode(Highlight, {
"searchWords": _category ? [_category] : this.currentValue.split(' '),
"textToHighlight": label,
"autoEscape": true,
"highlightStyle": highlightStyle
}, null)])]) : label;
}
if (title || image || description) {
return vue.createVNode(Flex.Flex, {
"alignItems": "center",
"css": {
width: '100%'
}
}, {
"default": function _default() {
return [image && vue.createVNode("div", {
"css": {
margin: 'auto',
marginRight: 10
}
}, [vue.createVNode("img", {
"src": image,
"alt": " ",
"height": "50px",
"width": "50px",
"css": {
objectFit: 'contain'
}
}, null)]), vue.createVNode(Flex.Flex, {
"direction": "column",
"css": {
width: image ? 'calc(100% - 60px)' : '100%'
}
}, {
"default": function _default() {
return [title && vue.createVNode("div", {
"class": "trim"
}, [vue.createVNode(Highlight, {
"searchWords": _this.currentValue.split(' '),
"textToHighlight": title,
"highlightStyle": highlightStyle,
"class": css.css({
fontSize: '1rem'
})
}, null)]), description && vue.createVNode("div", {
"class": ['trim', css.css({
marginTop: 3
})]
}, [vue.createVNode(Highlight, {
"searchWords": _this.currentValue.split(' '),
"textToHighlight": description,
"highlightStyle": highlightStyle
}, null)])];
}
})];
}
});
}
return value;
}
};
var SearchSvg = {
name: 'SearchSvg',
props: ['styles'],
render: function render() {
return vue.createVNode("svg", {
"alt": "Search",
"class": "search-icon",
"height": "12",
"xmlns": "http://www.w3.org/2000/svg",
"viewBox": "0 0 15 15",
"style": _rollupPluginBabelHelpers._extends({
transform: 'scale(1.35)',
position: 'relative'
}, this.$props.styles ? this.$props.styles : {})
}, [vue.createVNode("title", null, [vue.createTextVNode("Search")]), vue.createVNode("path", {
"d": 'M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'
}, null)]);
}
};
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "#el_TvxDfTAtKp {\n stroke: none;\n stroke-width: 1;\n fill: none;\n}\n#el_D93PK3GbmJ {\n -webkit-transform: translate(163px, 131px);\n transform: translate(163px, 131px);\n fill: #d8d8d8;\n}\n";
styleInject(css_248z);
var MicSvg = {
name: 'MicSvg',
props: ['className'],
render: function render() {
return vue.createVNode("svg", {
"viewBox": "0 0 480 480",
"xmlns": "http://www.w3.org/2000/svg",
"id": "el_xS0FRzQjJ",
"width": 28,
"height": 28,
"className": this.$props.className,
"style": {
transform: 'scale(1.5)'
}
}, [vue.createVNode("g", {
"id": "el_TvxDfTAtKp",
"fillRule": "evenodd"
}, [vue.createVNode("g", {
"id": "el_D93PK3GbmJ",
"fillRule": "nonzero",
"style": {
fill: '#595959'
}
}, [vue.createVNode("path", {
"d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
"id": "el_uly3EwA2O3"
}, null), vue.createVNode("path", {
"d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,-2.84217094e-14 76.9864699,-2.84217094e-14 C55.8825877,-2.84217094e-14 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
"id": "el_tnDbR4ytu4"
}, null)])])]);
}
};
var css_248z$1 = "#el_X81iT9kZYo {\n stroke: none;\n stroke-width: 1;\n fill: none;\n}\n#el_gMpyalCphp {\n -webkit-transform: translate(163px, 131px);\n transform: translate(163px, 131px);\n}\n#el_c7H-3u-D4l {\n fill: #d8d8d8;\n}\n#el_qhFcdAAFwo {\n fill: #d8d8d8;\n}\n#el_M8X8g37WOI {\n stroke: #e83137;\n stroke-width: 21;\n}\n";
styleInject(css_248z$1);
var MuteSvg = {
name: 'MuteSvg',
props: ['className'],
render: function render() {
return vue.createVNode("svg", {
"style": {
transform: 'scale(1.5)'
},
"viewBox": "0 0 480 480",
"xmlns": "http://www.w3.org/2000/svg",
"id": "el_D1rEpH2zj",
"width": 28,
"height": 28,
"className": this.$props.className
}, [vue.createVNode("g", {
"id": "el_X81iT9kZYo",
"fillRule": "evenodd"
}, [vue.createVNode("g", {
"id": "el_gMpyalCphp"
}, [vue.createVNode("path", {
"d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
"id": "el_c7H-3u-D4l",
"fillRule": "nonzero",
"style": {
fill: '#595959'
}
}, null), vue.createVNode("path", {
"d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,-2.84217094e-14 76.9864699,-2.84217094e-14 C55.8825877,-2.84217094e-14 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
"id": "el_qhFcdAAFwo",
"fillRule": "nonzero",
"style": {
fill: '#595959'
}
}, null), vue.createVNode("path", {
"d": "M11.5,206.5 L142.5,12.5",
"id": "el_M8X8g37WOI",
"strokeLinecap": "round",
"strokeLinejoin": "round"
}, null)])])]);
}
};
var css_248z$2 = "@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n 0% {\n opacity: 0;\n }\n 13.89% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n 0% {\n opacity: 0;\n }\n 13.89% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n 0% {\n opacity: 0;\n }\n 27.78% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n 0% {\n opacity: 0;\n }\n 27.78% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n 0% {\n opacity: 0;\n }\n 41.67% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n 0% {\n opacity: 0;\n }\n 41.67% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n 0% {\n opacity: 0;\n }\n 55.56% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n 0% {\n opacity: 0;\n }\n 55.56% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n 0% {\n opacity: 0;\n }\n 69.44% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n 0% {\n opacity: 0;\n }\n 69.44% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n 0% {\n opacity: 0;\n }\n 83.33% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n 0% {\n opacity: 0;\n }\n 83.33% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n 0% {\n opacity: 0;\n }\n 97.22% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n 0% {\n opacity: 0;\n }\n 97.22% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n#el_hiibMG0x- * {\n -webkit-animation-duration: 1.2s;\n animation-duration: 1.2s;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n animation-timing-function: cubic-bezier(0, 0, 1, 1);\n}\n#el_QJeJ_2CDw5 {\n stroke: none;\n stroke-width: 1;\n fill: none;\n}\n#el_UYYCfubTRf {\n -webkit-transform: translate(163px, 123px);\n transform: translate(163px, 123px);\n}\n#el_uzZNtK32Zi {\n fill: #d8d8d8;\n}\n#el_EYKQ2N9Kgy {\n fill: #d8d8d8;\n}\n#el_6SDP2LAgKC {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n}\n#el_-Vm65Ltfy7 {\n fill: #0B6AFF;\n}\n#el_q04iZcSim4 {\n fill: #d8d8d8;\n}\n#el_6WKby7wXqV {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el_9bggsfQOtU {\n fill: #0B6AFF;\n}\n#el_NKxqi9eIym {\n fill: #d8d8d8;\n}\n#el_Wi-my975tM {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el_zclQ34fvf7 {\n fill: #0B6AFF;\n}\n#el_1OsvRT8HkeZ {\n fill: #d8d8d8;\n}\n#el_DkfFFTaFxy8 {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el_aa9sjx4H0vA {\n fill: #0B6AFF;\n}\n#el_tea114vWg0J {\n fill: #d8d8d8;\n}\n#el_34IgwiMB5rf {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el_z5u6RAFhx7d {\n fill: #0B6AFF;\n}\n#el_7nfuWmA5Uhy {\n fill: #d8d8d8;\n}\n#el_DeebuCsPTGA {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el__ZcqlS20zcw {\n fill: #0B6AFF;\n}\n#el_8DnEQnD7VWV {\n fill: #d8d8d8;\n}\n#el_ZOjjrPTvyrv {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el_FYYKCI_u24e {\n fill: #0B6AFF;\n}\n#el_XZty4MnTp5Y {\n fill: #d8d8d8;\n}\n#el_2FATegVmf0K {\n -webkit-transform: translate(37.846924px, 0px);\n transform: translate(37.846924px, 0px);\n -webkit-animation-fill-mode: backwards;\n animation-fill-mode: backwards;\n opacity: 0;\n -webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n}\n#el_RMT1KUfbdF8 {\n fill: #0B6AFF;\n}\n#el_RgLcovvFiO1 {\n fill: #d8d8d8;\n}\n";
styleInject(css_248z$2);
var ListenSvg = {
name: 'ListenSvg',
props: ['className'],
render: function render() {
return vue.createVNode("svg", {
"viewBox": "0 0 480 480",
"xmlns": "http://www.w3.org/2000/svg",
"xmlnsXlink": "http://www.w3.org/1999/xlink",
"id": "el_hiibMG0x-",
"width": 28,
"height": 29,
"className": this.$props.className,
"style": {
transform: 'scale(1.5)'
}
}, [vue.createVNode("defs", null, [vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-1"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-3"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-5"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-7"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-9"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-11"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-13"
}, null), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "path-15"
}, null)]), vue.createVNode("g", {
"id": "el_QJeJ_2CDw5",
"fillRule": "evenodd"
}, [vue.createVNode("g", {
"id": "el_UYYCfubTRf"
}, [vue.createVNode("path", {
"d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
"id": "el_uzZNtK32Zi",
"fillRule": "nonzero",
"style": {
fill: '#0B6AFF'
}
}, null), vue.createVNode("path", {
"d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,0 76.9864699,0 C55.8825877,0 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
"id": "el_EYKQ2N9Kgy",
"fillRule": "nonzero"
}, null), vue.createVNode("g", {
"id": "el_6SDP2LAgKC"
}, [vue.createVNode("mask", {
"id": "mask-2",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-1"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_-Vm65Ltfy7",
"fillRule": "nonzero",
"mask": "url(#mask-2)"
}, null), vue.createVNode("rect", {
"id": "el_q04iZcSim4",
"mask": "url(#mask-2)",
"x": "0.279",
"width": "77",
"height": "130"
}, null)]), vue.createVNode("g", {
"id": "el_6WKby7wXqV"
}, [vue.createVNode("mask", {
"id": "mask-4",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-3"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_9bggsfQOtU",
"fillRule": "nonzero",
"mask": "url(#mask-4)"
}, null), vue.createVNode("rect", {
"id": "el_NKxqi9eIym",
"mask": "url(#mask-4)",
"x": "0.279",
"width": "77",
"height": "115"
}, null)]), vue.createVNode("g", {
"id": "el_Wi-my975tM"
}, [vue.createVNode("mask", {
"id": "mask-6",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-5"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_zclQ34fvf7",
"fillRule": "nonzero",
"mask": "url(#mask-6)"
}, null), vue.createVNode("rect", {
"id": "el_1OsvRT8HkeZ",
"mask": "url(#mask-6)",
"x": "0.279",
"width": "77",
"height": "100"
}, null)]), vue.createVNode("g", {
"id": "el_DkfFFTaFxy8"
}, [vue.createVNode("mask", {
"id": "mask-8",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-7"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_aa9sjx4H0vA",
"fillRule": "nonzero",
"mask": "url(#mask-8)"
}, null), vue.createVNode("rect", {
"id": "el_tea114vWg0J",
"mask": "url(#mask-8)",
"x": "0.279",
"width": "77",
"height": "85"
}, null)]), vue.createVNode("g", {
"id": "el_34IgwiMB5rf"
}, [vue.createVNode("mask", {
"id": "mask-10",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-9"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_z5u6RAFhx7d",
"fillRule": "nonzero",
"mask": "url(#mask-10)"
}, null), vue.createVNode("rect", {
"id": "el_7nfuWmA5Uhy",
"mask": "url(#mask-10)",
"x": "0.279",
"width": "77",
"height": "70"
}, null)]), vue.createVNode("g", {
"id": "el_DeebuCsPTGA"
}, [vue.createVNode("mask", {
"id": "mask-12",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-11"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el__ZcqlS20zcw",
"fillRule": "nonzero",
"mask": "url(#mask-12)"
}, null), vue.createVNode("rect", {
"id": "el_8DnEQnD7VWV",
"mask": "url(#mask-12)",
"x": "0.279",
"width": "77",
"height": "55"
}, null)]), vue.createVNode("g", {
"id": "el_ZOjjrPTvyrv"
}, [vue.createVNode("mask", {
"id": "mask-14",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-13"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_FYYKCI_u24e",
"fillRule": "nonzero",
"mask": "url(#mask-14)"
}, null), vue.createVNode("rect", {
"id": "el_XZty4MnTp5Y",
"mask": "url(#mask-14)",
"x": "0.279",
"width": "77",
"height": "40"
}, null)]), vue.createVNode("g", {
"id": "el_2FATegVmf0K"
}, [vue.createVNode("mask", {
"id": "mask-16",
"fill": "#fff"
}, [vue.createVNode("use", {
"xlink:href": "#path-15"
}, null)]), vue.createVNode("path", {
"d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
"id": "el_RMT1KUfbdF8",
"fillRule": "nonzero",
"mask": "url(#mask-16)"
}, null), vue.createVNode("rect", {
"id": "el_RgLcovvFiO1",
"mask": "url(#mask-16)",
"x": "0.279",
"width": "77",
"height": "25"
}, null)])])])]);
}
};
var STATUS = {
inactive: 'INACTIVE',
stopped: 'STOPPED',
active: 'ACTIVE',
denied: 'DENIED'
};
var Mic = {
name: 'Mic',
props: {
children: vueTypes.types.title,
lang: VueTypes.string.def('en-US'),
iconPosition: VueTypes.string.def('left'),
handleResult: vueTypes.types.func,
onNoMatch: vueTypes.types.func,
onError: vueTypes.types.func,
getInstance: vueTypes.types.func,
render: vueTypes.types.func,
className: vueTypes.types.string,
applyClearStyle: VueTypes.bool,
showIcon: VueTypes.bool
},
methods: {
getComponent: function getComponent() {
var status = this.$data.status;
var data = {
handleClick: this.handleClick,
status: status
};
return index.getComponent(data, this);
},
stopMic: function stopMic() {
if (this.instance) {
this.status = STATUS.inactive;
this.instance.stop();
this.instance = null;
}
},
handleClick: function handleClick() {
var _this = this;
this.results = [];
if (window && window.SpeechRecognition) {
var status = this.$data.status;
if (status === STATUS.active) {
this.status = STATUS.inactive;
}
var _this$$props = this.$props,
handleResult = _this$$props.handleResult,
onNoMatch = _this$$props.onNoMatch,
onError = _this$$props.onError,
lang = _this$$props.lang,
getInstance = _this$$props.getInstance;
var _window = window,
SpeechRecognition = _window.SpeechRecognition;
if (this.instance && this.status !== STATUS.denied) {
this.status = STATUS.inactive;
this.instance.stop();
this.instance = null;
return;
}
this.instance = new SpeechRecognition();
this.instance.continuous = true;
this.instance.interimResults = false;
this.instance.lang = lang;
if (getInstance) {
getInstance(this.instance);
}
this.instance.start();
this.instance.onstart = function () {
_this.status = STATUS.active;
};
this.instance.onresult = function (_ref) {
var results = _ref.results,
timeStamp = _ref.timeStamp;
_this.stopMic();
if (handleResult) {
handleResult({
results: results,
timeStamp: timeStamp
});
}
_this.results.push({
results: results,
timeStamp: timeStamp
});
};
this.instance.onnomatch = function (e) {
return onNoMatch ? onNoMatch(e) : console.warn(e);
};
this.instance.onerror = function (e) {
if (e.error === 'no-speech' || e.error === 'audio-capture') {
_this.status = STATUS.inactive;
} else if (e.error === 'not-allowed') {
_this.status = STATUS.denied;
}
console.error(e);
if (onError) {
onError(e);
}
};
/* Below Two methods run when Continuous is False */
this.instance.onspeechend = function () {
_this.status = STATUS.inactive;
};
this.instance.onaudioend = function () {
_this.status = STATUS.inactive;
};
}
}
},
computed: {
hasCustomRenderer: function hasCustomRenderer() {
return index.hasCustomRenderer(this);
},
Icon: function Icon() {
var status = this.$data.status;
var className = this.$props.className;
switch (status) {
case STATUS.active:
return vue.createVNode(ListenSvg, {
"className": className,
"onClick": this.handleClick
}, null);
case STATUS.stopped:
case STATUS.denied:
return vue.createVNode(MuteSvg, {
"className": className,
"onClick": this.handleClick
}, null);
default:
return vue.createVNode(MicSvg, {
"className": className,
"onClick": this.handleClick
}, null);
}
}
},
data: function data() {
return {
status: STATUS.inactive
};
},
created: function created() {
this.results = [];
if (typeof window !== 'undefined') {
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition || null;
if (!window.SpeechRecognition) {
console.error('SpeechRecognition is not supported in this browser. Please check the browser compatibility at https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility.');
}
}
},
render: function render() {
var _this2 = this;
if (this.hasCustomRenderer) {
return this.getComponent();
}
return vue.createVNode(CancelSvg.IconWrapper, null, {
"default": function _default() {
return [_this2.Icon];
}
});
}
};
var CustomSvg = {
name: 'CustomSvg',
props: {
className: String,
icon: Function,
type: String
},
data: function data() {
return {
customIcon: this.$props.icon && typeof this.$props.icon === 'function' ? this.$props.icon() : null
};
},
render: function render() {
if (this.customIcon) {
return vue.createVNode("div", {
"class": this.$props.className
}, [this.customIcon]);
}
if (this.$props.type === 'recent-search-icon') {
return vue.createVNode("svg", {
"xmlns": "http://www.w3.org/2000/svg",
"alt": "Recent Search",
"height": "20",
"width": "20",
"viewBox": "0 0 24 24",
"style": {
fill: '#707070'
},
"class": this.$props.className
}, [vue.createVNode("path", {
"d": "M0 0h24v24H0z",
"fill": "none"
}, null), vue.createVNode("path", {
"d": "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
}, null)]);
}
if (this.$props.type === 'promoted-search-icon') {
return vue.createVNode("svg", {
"xmlns": "http://www.w3.org/2000/svg",
"width": "20",
"alt": "promoted search",
"height": "20",
"viewBox": "0 0 24 24",
"class": this.$props.className,
"style": {
fill: '#707070'
}
}, [vue.createVNode("path", {
"d": "M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
}, null)]);
}
if (this.$props.type === 'popular-search-icon') {
return vue.createVNode("svg", {
"xmlns": "http://www.w3.org/2000/svg",
"alt": "Popular Search",
"height": "20",
"width": "20",
"viewBox": "0 0 24 24",
"style": {
fill: '#707070'
},
"class": this.$props.className
}, [vue.createVNode("path", {
"d": "M0 0h24v24H0z",
"fill": "none"
}, null), vue.createVNode("path", {
"d": "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"
}, null)]);
}
return vue.createVNode(SearchSvg, {
"styles": {
position: 'relative',
fill: '#707070',
left: '3px',
marginRight: '8px'
}
}, null);
}
};
var _templateObject$3;
var AutofillSvgIcon = vueEmotion.styled('button')(_templateObject$3 || (_templateObject$3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
var AutoFillSvg = {
name: 'AutoFillSvg',
render: function render() {
return vue.createVNode(AutofillSvgIcon, {
"onClick": this.$attrs.click
}, {
"default": function _default() {
return [vue.createVNode("svg", {
"viewBox": "0 0 24 24"
}, [vue.createVNode("path", {
"d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
}, null)])];
}
});
},
methods: {
clicked: function clicked(e) {
e.stopPropagation();
window.console.log('hey', e);
}
}
};
var _templateObject$4, _templateObject2;
var TagsContainer = vueEmotion.styled('div')(_templateObject$4 || (_templateObject$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
var TagItem = vueEmotion.styled('span')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcursor: default;\n\tbox-sizing: border-box;\n\tmargin: 0 4px 4px 0;\n\tcolor: #000000d9;\n\tfont-size: 14px;\n\tfont-variant: tabular-nums;\n\tline-height: 1.5715;\n\tlist-style: none;\n\tfont-feature-settings: 'tnum';\n\tdisplay: inline-block;\n\theight: auto;\n\tpadding: 0 2px 0 7px;\n\tfont-size: 12px;\n\tline-height: 22px;\n\twhite-space: nowrap;\n\tbackground: #fafafa;\n\tborder: 1px solid #d9d9d9;\n\tborder-radius: 2px;\n\topacity: 1;\n\ttransition: all 0.3s;\n\n\tspan.close-icon {\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\theight: 15px;\n\t\t\tposition: relative;\n\t\t\ttop: 4px;\n\t\t\tfill: #262626;\n\t\t}\n\t}\n"])));
var _templateObject$5;
var AutosuggestFooterContainer = vueEmotion.styled('div')(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: #8792a2;\n\tbackground: #f7fafc;\n\tpadding: 10px;\n\theight: 40px;\n"])));
var _templateObject$6, _templateObject2$1, _templateObject3;
var skeletonAnimation = css.keyframes(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n 0% {\n background-position: 100% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n"])));
var SkeletonLoader = vueEmotion.styled('div')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n"])));
var SkeletonLine = vueEmotion.styled('div')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 20px;\n\tbackground: linear-gradient(\n\t\t90deg,\n\t\trgba(220, 220, 220, 0.5) 25%,\n\t\trgba(240, 240, 240, 0.9) 50%,\n\t\trgba(220, 220, 220, 0.5) 75%\n\t);\n\tbackground-size: 200% 100%;\n\tanimation: ", " 1.5s infinite;\n"])), skeletonAnimation);
var HorizontalSkeletonLoader = vue.defineComponent({
name: 'HorizontalSkeletonLoader',
render: function render() {
return vue.createVNode(SkeletonLoader, null, {
"default": function _default() {
return [vue.createVNode(SkeletonLine, null, null), vue.createVNode(SkeletonLine, null, null), vue.createVNode(SkeletonLine, null, null), vue.createVNode(SkeletonLine, null, null)];
}
});
}
});
var _templateObject$7, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
var Chatbox = vueEmotion.styled('div')(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n\n\t.--trigger-message-wrapper {\n\t\tcursor: pointer;\n\t}\n"])), function (props) {
return props.theme && props.theme.colors && props.theme.colors.backgroundColor ? polished.lighten(0.1, props.theme.colors.backgroundColor) : '#fff';
});
var ChatContainer = vueEmotion.styled('div')(_templateObject2$2 || (_templateObject2$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tposition: relative;\n\t.--ai-answer-error-container {\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tbottom: 0px;\n\t\t", ";\n\t\tz-index: 1;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 100%;\n\n\t\t.--default-error-element {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tpadding: 10px;\n\t\t\tbackground-color: ", ";\n\t\t\tbox-shadow: 0 -5px 5px -2px\n\t\t\t\t", ";\n\n\t\t\tspan {\n\t\t\t\tmargin-bottom: 5px;\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t}\n\t\t}\n\t}\n\n\t", ";\n"])), function (props) {
return props.showInput ? 'bottom: 48px;' : '';
}, function (props) {
return props.theme && props.theme.colors && props.theme.colors.backgroundColor ? props.theme.colors.backgroundColor : '#fff';
}, function (props) {
return props.theme && props.theme.colors && props.theme.colors.backgroundColor ? props.theme.colors.backgroundColor : '#fff';
}, function (props) {
return props.showInput ? ".--ai-answer-feedback-container {\n\t\tmargin-top: 15px;\n\t\tmargin-bottom: -10px;\n\t}" : ".--ai-answer-feedback-container {\n\t\tmargin-top: 4px;\n\t}";
});
var MessagesContainer = vueEmotion.styled('div')(_templateObject3$1 || (_templateObject3$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmax-height: 400px;\n overflow-y: auto;\n\tpadding: 10px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 200px;\n\n}};\n"])));
var typingDots = css.keyframes(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-70%);\n }\n 100% {\n transform: translateY(0);\n }\n"])));
var TypingIndicator = vueEmotion.styled('div')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 5px !important;\n"])));
var TypingDot = vueEmotion.styled('div')(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 6px;\n\theight: 6px;\n\tbackground-color: ", ";\n\tborder-radius: 50%;\n\tmargin: 0 2px !important;\n\tanimation: ", " 1s infinite;\n\t&:nth-child(2) {\n\t\tanimation-delay: 0.2s;\n\t}\n\t&:nth-child(3) {\n\t\tanimation-delay: 0.4s;\n\t}\n"])), function (props) {
var finalColor;
if (props.isSender) {
finalColor = props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor;
} else {
finalColor = props.themePreset !== 'dark' ? props.theme.colors.borderColor : props.theme.colors.textColor;
}
return finalColor;
}, typingDots);
var resetCSS = function resetCSS(props) {
return "\n\thtml,\n\tbody,\n\tdiv,\n\tspan,\n\tapplet,\n\tobject,\n\tiframe,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tp,\n\tblockquote,\n\tpre,\n\ta,\n\tabbr,\n\tacronym,\n\taddress,\n\tbig,\n\tcite,\n\tcode,\n\tdel,\n\tdfn,\n\tem,\n\timg,\n\tins,\n\tkbd,\n\tq,\n\ts,\n\tsamp,\n\tsmall,\n\tstrike,\n\tstrong,\n\tsub,\n\tsup,\n\ttt,\n\tvar,\n\tb,\n\tu,\n\ti,\n\tcenter,\n\tdl,\n\tdt,\n\tdd,\n\tol,\n\tul,\n\tli,\n\tfieldset,\n\tform,\n\tlabel,\n\tlegend,\n\ttable,\n\tcaption,\n\ttbody,\n\ttfoot,\n\tthead,\n\ttr,\n\tth,\n\ttd,\n\tarticle,\n\taside,\n\tcanvas,\n\tdetails,\n\tembed,\n\tfigure,\n\tfigcaption,\n\tfooter,\n\theader,\n\thgroup,\n\tmenu,\n\tnav,\n\toutput,\n\truby,\n\tsection,\n\tsummary,\n\ttime,\n\tmark,\n\taudio,\n\tvideo {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: 0;\n\t\tfont-size: 100%;\n\t\tfont: inherit;\n\t\tvertical-align: baseline;\n\t\toverflow-wrap: anywhere;\n\t}\n\tpre {\n\t\tmargin: 10px auto;\n\t\twhite-space: pre-wrap;\n\n\t}\n\ttable {\n\t\tmargin: 10px auto;\n\t\tborder-collapse: collapse;\n\t\tborder-spacing: 0;\n\t}\n\ttr {\n\t\tborder-bottom: 1px solid #ccc;\n\t}\n\tth,\n\ttd {\n\t\ttext-align: left;\n\t\tpadding: 4px;\n\t\tborder: 1px solid;\n\t\tborder-collapse: collapse;\n\t}\n\tpre,\n\tcode {\n\t\tpadding: 0.6em 0.4em;\n\t\tbackground: " + (
// eslint-disable-next-line no-nested-ternary
props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryColor : props.theme.colors.borderColor : props.theme.colors.borderColor) + ";\n\n\t}\n\n\tpre{\n\t\tcolor: " + (
// eslint-disable-next-line no-nested-ternary
props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";}\n\n\tcode {\n\t\tline-height: normal;\n\n\t\tcolor: " + (
// eslint-disable-next-line no-nested-ternary
props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";\n\t\tborder-radius: 3px;\n\t\tfont-size: 85%;\n\t\tpadding: 0.2em 0.4em;\n\t\tmargin-top: 5px;\n\t\tdisplay: inline-block;\n\t\toverflow: auto;\n\t\twidth: fit-content;\n\t\tmax-width: 100%;\n\t}\n\ncode[class*='language-'],\n\tpre[class*='language-'] {\n\t\tcolor: " + (
// eslint-disable-next-line no-nested-ternary
props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";\n\t\ttext-shadow: none;\n\t}\n\n\tul,\n\tol {\n\t\tlist-style-position: inside;\n\t\tpadding-left: 10px;\n\n\t}\n\n\tli{\n\t\tdisplay: list-item;\n\t\tcursor: default