@appbaseio/reactivesearch-vue 3.0.0-rc.5.alpha.4 → 3.0.0-rc.6

package/dist/es/install-8296e8da.js

@@ -0,0 +1,3812 @@
+import { helper, Actions, causes } from '@appbaseio/reactivecore';
+import { SEARCH_COMPONENTS_MODES, componentTypes, AI_LOCAL_CACHE_KEY, AI_ROLES, TREELIST_VALUES_PATH_SEPARATOR } from '@appbaseio/reactivecore/lib/utils/constants';
+import _transformOn from '@vue/babel-helper-vue-transform-on';
+import { _ as _taggedTemplateLiteralLoose, a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-ded08042.js';
+import { createVNode, createTextVNode, defineComponent, ref, watch, isVNode, mergeProps, h } from 'vue';
+import VueTypes from 'vue-types';
+import { getQueryOptions, getObjectFromLocalStorage, suggestionTypes, getClassName as getClassName$2, setObjectInLocalStorage, recLookup, updateCustomQuery as updateCustomQuery$1, updateDefaultQuery as updateDefaultQuery$1, transformTreeListLocalStateIntoQueryComptaibleFormat, isEqual as isEqual$1, transformRawTreeListData, setDeep, getComponent as getComponent$1, getOptionsFromQuery, checkValueChange as checkValueChange$1, getAggsQuery, updateInternalQuery, isFunction as isFunction$1 } from '@appbaseio/reactivecore/lib/utils/helper';
+import { styled, createGlobalStyle } from '@appbaseio/vue-emotion';
+import { css, keyframes } from '@emotion/css';
+import { lighten } from 'polished';
+import { B as Button } from './Button-c2ff5178.js';
+import { t as types } from './vueTypes-09cab4d3.js';
+import { RLConnected as ReactiveList } from './ReactiveList.js';
+import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
+import { g as getComponent, h as hasCustomRenderer, f as decodeHtml, i as isQueryIdentical, u as updateDefaultQuery, j as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-882489e1.js';
+import { C as ComponentWrapper } from './ComponentWrapper-a2635cfc.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-b058d14e.js';
+import { T as Title } from './Title-863dfa42.js';
+import { L as ListItem } from './ListItem-e3c6acf4.js';
+import { F as Flex } from './Flex-25792bc3.js';
+import { recordAISessionUsefulness } from '@appbaseio/reactivecore/lib/actions/analytics';
+import ReactiveBase from './ReactiveBase.js';
+import hotkeys from 'hotkeys-js';
+import { Remarkable } from 'remarkable';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './DropDown-39fedff8.js';
+import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, a as suggestions } from './Input-11d211d2.js';
+import { C as Container } from './Container-d00219f7.js';
+import Highlight from 'vue-highlight-words';
+import { fetchAIResponse } from '@appbaseio/reactivecore/lib/actions/query';
+import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
+import { C as Checkbox, R as Radio } from './FormControlList-fe6eaee4.js';
+import { s as sanitizeObject } from './utils-d7dd4f4e.js';
+import { ListConnected as SingleList } from './SingleList.js';
+import { ListConnected as MultiList } from './MultiList.js';
+import types$1 from '@appbaseio/reactivecore/lib/utils/types';
+import { ListConnected as SingleDropdownList } from './SingleDropdownList.js';
+import { ListConnected as MultiDropdownList } from './MultiDropdownList.js';
+import { TBConnected as ToggleButton } from './ToggleButton.js';
+import ReactiveComponent from './ReactiveComponent.js';
+import { RangeConnected as DynamicRangeSlider } from './DynamicRangeSlider.js';
+import { RangeConnected as SingleRange } from './SingleRange.js';
+import { RangeConnected as MultiRange } from './MultiRange.js';
+import { RangeConnected as RangeSlider } from './RangeSlider.js';
+import { RangeConnected as RangeInput } from './RangeInput.js';
+import SelectedFilters from './SelectedFilters.js';
+import ResultCard from './ResultCard.js';
+import ResultList from './ResultList.js';
+import StateProvider from './StateProvider.js';
+
+var _templateObject;
+var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n"])));
+InputGroup.defaultProps = {
+  className: 'input-group'
+};
+
+var _templateObject$1;
+var InputAddon = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fafafa;\n  border: 1px solid #ccc;\n  border-radius: 2px;\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 = helper.getClassName;
+var SuggestionWrapper = {
+  name: 'SuggestionWrapper',
+  props: {
+    innerClassName: types.string,
+    themePreset: types.themePreset,
+    innerClass: types.style
+  },
+  render: function render() {
+    var _this$$props = this.$props,
+      themePreset = _this$$props.themePreset,
+      innerClass = _this$$props.innerClass,
+      innerClassName = _this$$props.innerClassName;
+    return createVNode("div", {
+      "class": noSuggestions(themePreset) + " " + getClassName(innerClass, innerClassName || '')
+    }, [createVNode("li", null, [this.$slots["default"]()])]);
+  }
+};
+
+var _templateObject$2;
+var highlightStyle = {
+  fontWeight: 600,
+  padding: 0,
+  backgroundColor: 'transparent',
+  color: 'inherit'
+};
+var PredictiveSuggestion = styled('span')(_templateObject$2 || (_templateObject$2 = _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: types.string,
+    suggestion: types.any
+  },
+  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' ? createVNode("div", {
+        "class": "trim"
+      }, [(_category ? false : isPredictiveSuggestion
+      // eslint-disable-next-line
+      || !!_suggestion_type) ? createVNode(PredictiveSuggestion, {
+        "innerHTML": label
+      }, null) : createVNode(Highlight, {
+        "searchWords": _category ? [_category] : this.currentValue.split(' '),
+        "textToHighlight": label,
+        "autoEscape": true,
+        "highlightStyle": highlightStyle
+      }, null)]) : label;
+    }
+    if (title || image || description) {
+      return createVNode(Flex, {
+        "alignItems": "center",
+        "css": {
+          width: '100%'
+        }
+      }, {
+        "default": function _default() {
+          return [image && createVNode("div", {
+            "css": {
+              margin: 'auto',
+              marginRight: 10
+            }
+          }, [createVNode("img", {
+            "src": image,
+            "alt": " ",
+            "height": "50px",
+            "width": "50px",
+            "css": {
+              objectFit: 'contain'
+            }
+          }, null)]), createVNode(Flex, {
+            "direction": "column",
+            "css": {
+              width: image ? 'calc(100% - 60px)' : '100%'
+            }
+          }, {
+            "default": function _default() {
+              return [title && createVNode("div", {
+                "class": "trim"
+              }, [createVNode(Highlight, {
+                "searchWords": _this.currentValue.split(' '),
+                "textToHighlight": title,
+                "highlightStyle": highlightStyle,
+                "class": css({
+                  fontSize: '1rem'
+                })
+              }, null)]), description && createVNode("div", {
+                "class": ['trim', css({
+                  marginTop: 3
+                })]
+              }, [createVNode(Highlight, {
+                "searchWords": _this.currentValue.split(' '),
+                "textToHighlight": description,
+                "highlightStyle": highlightStyle
+              }, null)])];
+            }
+          })];
+        }
+      });
+    }
+    return value;
+  }
+};
+
+var SearchSvg = {
+  name: 'SearchSvg',
+  props: ['styles'],
+  render: function render() {
+    return createVNode("svg", {
+      "alt": "Search",
+      "class": "search-icon",
+      "height": "12",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "viewBox": "0 0 15 15",
+      "style": _extends({
+        transform: 'scale(1.35)',
+        position: 'relative'
+      }, this.$props.styles ? this.$props.styles : {})
+    }, [createVNode("title", null, [createTextVNode("Search")]), 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)]);
+  }
+};
+
+var _templateObject$3;
+
+// eslint-disable-next-line
+createGlobalStyle(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"])));
+var MicSvg = {
+  name: 'MicSvg',
+  props: ['className'],
+  render: function render() {
+    return 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)'
+      }
+    }, [createVNode("g", {
+      "id": "el_TvxDfTAtKp",
+      "fillRule": "evenodd"
+    }, [createVNode("g", {
+      "id": "el_D93PK3GbmJ",
+      "fillRule": "nonzero",
+      "style": {
+        fill: '#595959'
+      }
+    }, [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), 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 _templateObject$4;
+
+// eslint-disable-next-line
+createGlobalStyle(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"])));
+var MuteSvg = {
+  name: 'MuteSvg',
+  props: ['className'],
+  render: function render() {
+    return 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
+    }, [createVNode("g", {
+      "id": "el_X81iT9kZYo",
+      "fillRule": "evenodd"
+    }, [createVNode("g", {
+      "id": "el_gMpyalCphp"
+    }, [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), 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), createVNode("path", {
+      "d": "M11.5,206.5 L142.5,12.5",
+      "id": "el_M8X8g37WOI",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, null)])])]);
+  }
+};
+
+var _templateObject$5;
+
+// eslint-disable-next-line
+createGlobalStyle(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"])));
+var ListenSvg = {
+  name: 'ListenSvg',
+  props: ['className'],
+  render: function render() {
+    return 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)'
+      }
+    }, [createVNode("defs", null, [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), 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), 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), 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), 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), 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), 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), 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)]), createVNode("g", {
+      "id": "el_QJeJ_2CDw5",
+      "fillRule": "evenodd"
+    }, [createVNode("g", {
+      "id": "el_UYYCfubTRf"
+    }, [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), 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), createVNode("g", {
+      "id": "el_6SDP2LAgKC"
+    }, [createVNode("mask", {
+      "id": "mask-2",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-1"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_q04iZcSim4",
+      "mask": "url(#mask-2)",
+      "x": "0.279",
+      "width": "77",
+      "height": "130"
+    }, null)]), createVNode("g", {
+      "id": "el_6WKby7wXqV"
+    }, [createVNode("mask", {
+      "id": "mask-4",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-3"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_NKxqi9eIym",
+      "mask": "url(#mask-4)",
+      "x": "0.279",
+      "width": "77",
+      "height": "115"
+    }, null)]), createVNode("g", {
+      "id": "el_Wi-my975tM"
+    }, [createVNode("mask", {
+      "id": "mask-6",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-5"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_1OsvRT8HkeZ",
+      "mask": "url(#mask-6)",
+      "x": "0.279",
+      "width": "77",
+      "height": "100"
+    }, null)]), createVNode("g", {
+      "id": "el_DkfFFTaFxy8"
+    }, [createVNode("mask", {
+      "id": "mask-8",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-7"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_tea114vWg0J",
+      "mask": "url(#mask-8)",
+      "x": "0.279",
+      "width": "77",
+      "height": "85"
+    }, null)]), createVNode("g", {
+      "id": "el_34IgwiMB5rf"
+    }, [createVNode("mask", {
+      "id": "mask-10",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-9"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_7nfuWmA5Uhy",
+      "mask": "url(#mask-10)",
+      "x": "0.279",
+      "width": "77",
+      "height": "70"
+    }, null)]), createVNode("g", {
+      "id": "el_DeebuCsPTGA"
+    }, [createVNode("mask", {
+      "id": "mask-12",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-11"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_8DnEQnD7VWV",
+      "mask": "url(#mask-12)",
+      "x": "0.279",
+      "width": "77",
+      "height": "55"
+    }, null)]), createVNode("g", {
+      "id": "el_ZOjjrPTvyrv"
+    }, [createVNode("mask", {
+      "id": "mask-14",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-13"
+    }, null)]), 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), createVNode("rect", {
+      "id": "el_XZty4MnTp5Y",
+      "mask": "url(#mask-14)",
+      "x": "0.279",
+      "width": "77",
+      "height": "40"
+    }, null)]), createVNode("g", {
+      "id": "el_2FATegVmf0K"
+    }, [createVNode("mask", {
+      "id": "mask-16",
+      "fill": "#fff"
+    }, [createVNode("use", {
+      "xlink:href": "#path-15"
+    }, null)]), 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), 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: types.title,
+    lang: VueTypes.string.def('en-US'),
+    iconPosition: VueTypes.string.def('left'),
+    handleResult: types.func,
+    onNoMatch: types.func,
+    onError: types.func,
+    getInstance: types.func,
+    render: types.func,
+    className: types.string,
+    applyClearStyle: VueTypes.bool,
+    showIcon: VueTypes.bool
+  },
+  methods: {
+    getComponent: function getComponent$1() {
+      var status = this.$data.status;
+      var data = {
+        handleClick: this.handleClick,
+        status: status
+      };
+      return 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 = true;
+        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$1() {
+      return hasCustomRenderer(this);
+    },
+    Icon: function Icon() {
+      var status = this.$data.status;
+      var className = this.$props.className;
+      switch (status) {
+        case STATUS.active:
+          return createVNode(ListenSvg, {
+            "className": className,
+            "nativeOnClick": this.handleClick
+          }, null);
+        case STATUS.stopped:
+        case STATUS.denied:
+          return createVNode(MuteSvg, {
+            "className": className,
+            "nativeOnClick": this.handleClick
+          }, null);
+        default:
+          return createVNode(MicSvg, {
+            "className": className,
+            "nativeOnClick": 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 createVNode(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 createVNode("div", {
+        "class": this.$props.className
+      }, [this.customIcon]);
+    }
+    if (this.$props.type === 'recent-search-icon') {
+      return 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
+      }, [createVNode("path", {
+        "d": "M0 0h24v24H0z",
+        "fill": "none"
+      }, null), 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 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'
+        }
+      }, [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 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
+      }, [createVNode("path", {
+        "d": "M0 0h24v24H0z",
+        "fill": "none"
+      }, null), 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 createVNode(SearchSvg, {
+      "styles": {
+        position: 'relative',
+        fill: '#707070',
+        left: '3px',
+        marginRight: '8px'
+      }
+    }, null);
+  }
+};
+
+var _templateObject$6;
+var AutofillSvgIcon = styled('button')(_templateObject$6 || (_templateObject$6 = _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 createVNode(AutofillSvgIcon, {
+      "onClick": this.$attrs.click
+    }, {
+      "default": function _default() {
+        return [createVNode("svg", {
+          "viewBox": "0 0 24 24"
+        }, [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$7, _templateObject2;
+var TagsContainer = styled('div')(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
+var TagItem = styled('span')(_templateObject2 || (_templateObject2 = _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$8, _templateObject2$1, _templateObject3;
+var skeletonAnimation = keyframes(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n"])));
+var SkeletonLoader = styled('div')(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n"])));
+var SkeletonLine = styled('div')(_templateObject3 || (_templateObject3 = _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 = defineComponent({
+  name: 'HorizontalSkeletonLoader',
+  render: function render() {
+    return createVNode(SkeletonLoader, null, {
+      "default": function _default() {
+        return [createVNode(SkeletonLine, null, null), createVNode(SkeletonLine, null, null), createVNode(SkeletonLine, null, null), createVNode(SkeletonLine, null, null)];
+      }
+    });
+  }
+});
+
+var _templateObject$9, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var Chatbox = styled('div')(_templateObject$9 || (_templateObject$9 = _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"])), function (props) {
+  return props.theme && props.theme.colors ? props.theme.colors.backgroundColor : '#fff';
+});
+var ChatContainer = styled('div')(_templateObject2$2 || (_templateObject2$2 = _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 = styled('div')(_templateObject3$1 || (_templateObject3$1 = _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 = keyframes(_templateObject4 || (_templateObject4 = _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 = styled('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 5px !important;\n"])));
+var TypingDot = styled('div')(_templateObject6 || (_templateObject6 = _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}\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\t}\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\tul,\n\tol {\n\t\tlist-style-position: inside;\n\n\t}\n\n\tli{\n\t\tdisplay: unset;\n\t\tcursor: default;\n\t\tpadding: initial;\n\n\t\t&:hover{\n\t\t\tbackground-color: initial;\n\t\t}\n\t}\n";
+};
+var messageBGColor = function messageBGColor(props) {
+  var finalBGColor;
+  if (props.isSender) {
+    finalBGColor = props.themePreset !== 'dark' ? props.theme.colors.primaryColor : props.theme.colors.borderColor;
+  } else {
+    finalBGColor = props.themePreset !== 'dark' ? lighten(0.53, props.theme.colors.borderColor) : props.theme.colors.backgroundColor;
+  }
+  return finalBGColor;
+};
+var Message = styled('div')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tborder: 1px solid\n\t\t", ";\n\tpadding: 10px;\n\tborder-radius: 7px;\n\tmargin-bottom: 10px;\n\tmax-width: 80%;\n\talign-self: ", ";\n\tdisplay: inline-block;\n\tposition: relative;\n\toverflow-wrap: anywhere;\n\t", "\n"])), function (props) {
+  return messageBGColor(props);
+}, 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;
+}, function (props) {
+  return props.themePreset === 'dark' ? 'currentColor' : messageBGColor(props);
+}, function (props) {
+  return props.isSender ? 'flex-end' : 'flex-start';
+}, function (props) {
+  return resetCSS(props);
+});
+var MessageInputContainer = styled('form')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tpadding-top: 12px;\n\talign-items: stretch;\n\tmargin-top: 10px;\n\t.ai-enter-button-wrapper {\n\t\talign-self: baseline;\n\t\theight: 41px;\n\t}\n"])));
+var MessageInput = styled(TextArea)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tborder-radius: 5px;\n\tborder: 1px solid #ccc;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\n\t::placeholder {\n\t\tcolor: ", ";\n\t}\n\n\t:-ms-input-placeholder {\n\t\tcolor: ", ";\n\t}\n\n\t::-ms-input-placeholder {\n\t\tcolor: ", ";\n\t}\n\t", "\n"])), function (props) {
+  return props.themePreset === 'dark' ? props.theme.colors.borderColor : '#fff';
+}, function (props) {
+  return props.themePreset === 'dark' ? props.theme.colors.titleColor : props.theme.colors.textColor;
+}, function (props) {
+  return props.theme.colors.textColor;
+}, function (props) {
+  return props.theme.colors.textColor;
+}, function (props) {
+  return props.theme.colors.textColor;
+}, function (_ref) {
+  var enterButton = _ref.enterButton;
+  return enterButton && "\n\t\t    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n\t";
+});
+var SendButton = styled(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n\tborder: none;\n\tcolor: #ffffff;\n\tcursor: pointer;\n\tfont-size: 16px;\n\tmargin-left: 8px;\n\toutline: none;\n\tpadding: 10px;\n\ttext-align: center;\n"])));
+var AIFeedbackContainer = styled('div')(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\t.--feedback-svgs-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\tgap: 5px;\n\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\ttransition: all ease-in 0.1s;\n\t\t\t&.selected {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t\tcursor: default;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t}\n\t\t}\n\t}\n\n\t.--feedback-input-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 7px;\n\t}\n"])));
+
+var _templateObject$a, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
+var fadeInFromBottom = keyframes(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var fadeInFromTop = keyframes(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var SearchBoxAISection = styled('div')(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n\tpadding: 10px;\n\tborder-radius: 4px;\n\tmin-height: 200px;\n\tpadding-top: 20px;\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\t.--ai-answer-error-container {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\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\tgap: 10px;\n\t\t}\n\t}\n"])), function (_ref) {
+  var themePreset = _ref.themePreset,
+    theme = _ref.theme;
+  return themePreset === 'dark' ? '#424242' : theme.colors.backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.textColor;
+});
+var Question = styled('div')(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n\tfont-weight: bold;\n\tmargin-bottom: 5px;\n\tanimation: ", " 0.5s ease-out;\n"])), fadeInFromTop);
+var Answer = styled('div')(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n\t", "\n\tposition: relative;\n\tmargin-bottom: 5px;\n\tmin-height: 100px;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\tpre {\n\t\twhite-space: pre-wrap;\n\t}\n\tcode,\n\tpre {\n\t\tdisplay: revert;\n\t}\n"])), function (props) {
+  return resetCSS(props);
+});
+var Footer = styled('div')(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n\tcolor: #777;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n\tanimation: ", " 0.5s ease-out;\n\tpadding: 10px 0;\n\tbackground: white;\n\tbackground-color: ", ";\n\tcolor: ", ";\n"])), fadeInFromBottom, function (_ref3) {
+  var themePreset = _ref3.themePreset,
+    theme = _ref3.theme;
+  return themePreset === 'dark' ? '#424242' : theme.colors.backgroundColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.textColor;
+});
+var SourceTags = styled('div')(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tgap: 8px;\n\tflex-wrap: wrap;\n\t.--ai-source-tag {\n\t\tdisplay: inline-block;\n\t\tmax-width: 200px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n"])));
+
+var ThumbsUpSvg = {
+  name: 'ThumbsUpSvg',
+  props: ['clickHandler', 'className'],
+  render: function render() {
+    return createVNode("svg", {
+      "stroke": "currentColor",
+      "fill": "none",
+      "strokeWidth": "2",
+      "viewBox": "0 0 24 24",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round",
+      "class": this.$props.className,
+      "height": "1em",
+      "width": "1em",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "onClick": this.$props.clickHandler
+    }, [createVNode("path", {
+      "d": "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+    }, null)]);
+  }
+};
+
+var ThumbsDownSvg = {
+  name: 'ThumbsDownSvg',
+  props: ['clickHandler', 'className'],
+  render: function render() {
+    return createVNode("svg", {
+      "stroke": "currentColor",
+      "fill": "none",
+      "strokeWidth": "2",
+      "viewBox": "0 0 24 24",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round",
+      "class": this.$props.className,
+      "height": "1em",
+      "width": "1em",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "onClick": this.$props.clickHandler
+    }, [createVNode("path", {
+      "d": "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
+    }, null), ' ']);
+  }
+};
+
+var AIFeedback = defineComponent({
+  name: 'FeedbackComponent',
+  props: {
+    onFeedbackSubmit: {
+      type: Function,
+      "default": function _default() {}
+    },
+    hideUI: {
+      type: Boolean,
+      "default": false
+    },
+    overrideState: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    }
+  },
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var showInput = ref(false);
+    var feedbackType = ref(null);
+    var feedbackText = ref('');
+    var feedbackRecorded = ref(false);
+    var handleButtonClick = function handleButtonClick(type) {
+      if (feedbackType.value === type) {
+        feedbackType.value = null;
+        showInput.value = false;
+      } else {
+        feedbackType.value = type;
+        showInput.value = true;
+      }
+    };
+    var handleInputChange = function handleInputChange(e) {
+      feedbackText.value = e.target.value;
+    };
+    var handleSubmit = function handleSubmit() {
+      emit('feedback-submit', feedbackType.value === 'positive', feedbackText.value);
+      feedbackText.value = '';
+      showInput.value = false;
+      feedbackRecorded.value = true;
+    };
+    var handleCancel = function handleCancel() {
+      feedbackType.value = null;
+      feedbackText.value = '';
+      showInput.value = false;
+    };
+    watch(function () {
+      return props.overrideState;
+    }, function (newValue) {
+      if (newValue && newValue.isRecorded) {
+        feedbackRecorded.value = true;
+        feedbackType.value = newValue.feedbackType || 'positive';
+      }
+    });
+    if (props.overrideState && props.overrideState.isRecorded) {
+      feedbackRecorded.value = true;
+      feedbackType.value = props.overrideState.feedbackType || 'positive';
+    }
+    return {
+      showInput: showInput,
+      feedbackType: feedbackType,
+      feedbackText: feedbackText,
+      feedbackRecorded: feedbackRecorded,
+      handleButtonClick: handleButtonClick,
+      handleInputChange: handleInputChange,
+      handleSubmit: handleSubmit,
+      handleCancel: handleCancel
+    };
+  },
+  render: function render() {
+    var _this = this;
+    if (this.$props.hideUI) {
+      return null;
+    }
+    if (this.feedbackRecorded) {
+      return createVNode(AIFeedbackContainer, null, {
+        "default": function _default() {
+          return [createVNode("div", {
+            "class": "--feedback-svgs-wrapper"
+          }, [_this.feedbackType === 'positive' ? createVNode(ThumbsUpSvg, {
+            "class": "selected"
+          }, null) : createVNode(ThumbsDownSvg, {
+            "class": "selected"
+          }, null)])];
+        }
+      });
+    }
+    return createVNode(AIFeedbackContainer, null, {
+      "default": function _default() {
+        return [!_this.showInput && createVNode("div", {
+          "class": "--feedback-svgs-wrapper"
+        }, [createVNode(ThumbsUpSvg, {
+          "class": _this.feedbackType === 'positive' ? 'selected' : '',
+          "onClick": function onClick() {
+            return _this.handleButtonClick('positive');
+          }
+        }, null), createVNode(ThumbsDownSvg, {
+          "class": _this.feedbackType === 'negative' ? 'selected' : '',
+          "onClick": function onClick() {
+            return _this.handleButtonClick('negative');
+          }
+        }, null)]), _this.showInput && createVNode("div", {
+          "class": "--feedback-input-wrapper"
+        }, [createVNode(Input, {
+          "show": _this.showInput,
+          "placeholder": _this.feedbackType === 'positive' ? 'What do you like about the response?' : 'What was the issue with the response? How can it be improved?',
+          "value": _this.feedbackText,
+          "onInput": _this.handleInputChange
+        }, null), createVNode(Button, {
+          "primary": true,
+          "onClick": _this.handleSubmit
+        }, {
+          "default": function _default() {
+            return [createTextVNode("Submit")];
+          }
+        }), createVNode(Button, {
+          "onClick": _this.handleCancel
+        }, {
+          "default": function _default() {
+            return [createTextVNode("Cancel")];
+          }
+        })])];
+      }
+    });
+  }
+});
+
+var _excluded = ["_source"];
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var md = new Remarkable();
+md.set({
+  html: true,
+  breaks: true,
+  xhtmlOut: true
+});
+var _dropdownULRef = 'dropdownULRef';
+var _inputGroupRef = 'inputGroupRef';
+var updateQuery = Actions.updateQuery,
+  setCustomQuery = Actions.setCustomQuery,
+  setDefaultQuery = Actions.setDefaultQuery,
+  recordSuggestionClick = Actions.recordSuggestionClick;
+var _debounce = helper.debounce,
+  checkValueChange = helper.checkValueChange,
+  getClassName$1 = helper.getClassName,
+  isEqual = helper.isEqual,
+  getCompositeAggsQuery = helper.getCompositeAggsQuery,
+  withClickIds = helper.withClickIds,
+  getResultStats = helper.getResultStats;
+var SearchBox = defineComponent({
+  name: 'SearchBox',
+  isTagsMode: false,
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      currentValue: '',
+      selectedTags: [],
+      isOpen: false,
+      normalizedSuggestions: [],
+      showAIScreen: false,
+      showAIScreenFooter: false,
+      showFeedbackComponent: false,
+      feedbackState: null
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
+  },
+  inject: {
+    theme: {
+      from: 'theme_reactivesearch'
+    }
+  },
+  created: function created() {
+    var mode = this.$props.mode;
+    if (mode === SEARCH_COMPONENTS_MODES.TAG) {
+      this.$options.isTagsMode = true;
+    }
+    if (this.$options.isTagsMode) {
+      console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
+    }
+    this.currentValue = decodeHtml(this.selectedValue || this.value || this.defaultValue || '');
+    if (this.$options.isTagsMode) {
+      this.currentValue = '';
+    }
+    this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
+
+    // Set custom and default queries in store
+    this.triggerCustomQuery(this.currentValue, this.selectedCategory);
+    this.triggerDefaultQuery(this.currentValue);
+    if (this.selectedValue) {
+      this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.value) {
+      this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    } else if (this.$props.defaultValue) {
+      this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined);
+    }
+  },
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer$1() {
+      return hasCustomRenderer(this);
+    },
+    stats: function stats() {
+      return getResultStats(this);
+    }
+  },
+  props: {
+    autoFocus: VueTypes.bool,
+    autosuggest: VueTypes.bool.def(true),
+    beforeValueChange: types.func,
+    className: VueTypes.string.def(''),
+    clearIcon: types.children,
+    componentId: types.stringRequired,
+    customHighlight: types.func,
+    customQuery: types.func,
+    defaultQuery: types.func,
+    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    })]),
+    aggregationField: types.string,
+    aggregationSize: VueTypes.number,
+    size: VueTypes.number,
+    debounce: VueTypes.number.def(0),
+    defaultValue: types.string,
+    excludeFields: types.excludeFields,
+    value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), types.value]),
+    defaultSuggestions: types.suggestions,
+    enableSynonyms: VueTypes.bool.def(true),
+    enableQuerySuggestions: VueTypes.bool.def(false),
+    enablePopularSuggestions: VueTypes.bool.def(false),
+    enableRecentSuggestions: VueTypes.bool.def(false),
+    fieldWeights: types.fieldWeights,
+    filterLabel: types.string,
+    fuzziness: types.fuzziness,
+    highlight: VueTypes.bool,
+    highlightField: types.stringOrArray,
+    icon: types.children,
+    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
+    includeFields: types.includeFields,
+    innerClass: types.style,
+    innerRef: VueTypes.string.def('searchInputField'),
+    render: types.func,
+    renderNoSuggestion: types.title,
+    renderError: types.title,
+    placeholder: VueTypes.string.def('Search'),
+    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
+    react: types.react,
+    showClear: VueTypes.bool.def(true),
+    showDistinctSuggestions: VueTypes.bool.def(true),
+    showFilter: VueTypes.bool.def(true),
+    showIcon: VueTypes.bool.def(true),
+    title: types.title,
+    URLParams: VueTypes.bool.def(false),
+    strictSelection: VueTypes.bool.def(false),
+    nestedField: types.string,
+    enablePredictiveSuggestions: VueTypes.bool.def(false),
+    recentSearchesIcon: VueTypes.any,
+    popularSearchesIcon: VueTypes.any,
+    //	mic props
+    showVoiceSearch: VueTypes.bool.def(false),
+    getMicInstance: types.func,
+    renderMic: types.func,
+    distinctField: types.string,
+    distinctFieldConfig: types.props,
+    //
+    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
+    addonBefore: VueTypes.any,
+    addonAfter: VueTypes.any,
+    expandSuggestionsContainer: VueTypes.bool.def(true),
+    index: VueTypes.string,
+    popularSuggestionsConfig: VueTypes.object,
+    recentSuggestionsConfig: VueTypes.object,
+    applyStopwords: VueTypes.bool,
+    customStopwords: types.stringArray,
+    onData: types.func,
+    renderItem: types.func,
+    enterButton: VueTypes.bool.def(false),
+    renderEnterButton: VueTypes.any,
+    mode: VueTypes.oneOf(['select', 'tag']).def('select'),
+    renderSelectedTags: VueTypes.any,
+    searchboxId: VueTypes.string,
+    endpoint: types.endpointConfig,
+    enableAI: VueTypes.bool.def(false),
+    AIConfig: types.AIConfig,
+    AIUIConfig: types.AIUIConfig
+  },
+  mounted: function mounted() {
+    this.listenForFocusShortcuts();
+  },
+  watch: {
+    dataField: function dataField(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.triggerCustomQuery(this.$data.currentValue);
+      }
+    },
+    fieldWeights: function fieldWeights() {
+      this.triggerCustomQuery(this.$data.currentValue);
+    },
+    fuzziness: function fuzziness() {
+      this.triggerCustomQuery(this.$data.currentValue);
+    },
+    queryFormat: function queryFormat() {
+      this.triggerCustomQuery(this.$data.currentValue);
+    },
+    defaultValue: function defaultValue(newVal) {
+      this.setValue(newVal, true, this.$props);
+    },
+    value: function value(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.setValue(newVal, true, this.$props, newVal === '' ? causes.CLEAR_VALUE : undefined, false);
+      }
+    },
+    defaultQuery: function defaultQuery(newVal, oldVal) {
+      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+        this.triggerDefaultQuery(this.$data.currentValue);
+      }
+    },
+    customQuery: function customQuery(newVal, oldVal) {
+      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+        this.triggerCustomQuery(this.$data.currentValue);
+      }
+    },
+    suggestions: function suggestions(newVal) {
+      var suggestionsList = [];
+      if (Array.isArray(newVal) && newVal.length) {
+        suggestionsList = [].concat(withClickIds(newVal));
+      } else if (Array.isArray(this.$props.defaultSuggestions) && this.$props.defaultSuggestions.length) {
+        suggestionsList = [].concat(withClickIds(this.$props.defaultSuggestions));
+      }
+      this.normalizedSuggestions = suggestionsList;
+      this.handleTextAreaHeightChange();
+    },
+    selectedValue: function selectedValue(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
+        if (!newVal && this.$data.currentValue) {
+          // selected value is cleared, call onValueSelected
+          this.onValueSelectedHandler('', causes.CLEAR_VALUE);
+        }
+        if (this.$options.isTagsMode) {
+          // handling reset of tags through SelectedFilters or URL
+          this.selectedTags = [];
+        }
+        var cause = !newVal ? causes.CLEAR_VALUE : undefined;
+        if (this.$options.isTagsMode) {
+          cause = causes.SUGGESTION_SELECT;
+        }
+        this.setValue(newVal || '', true, this.$props, cause);
+      }
+    },
+    focusShortcuts: function focusShortcuts() {
+      this.listenForFocusShortcuts();
+    },
+    rawData: function rawData(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: newVal,
+        aggregationData: this.aggregationData,
+        loading: this.isLoading,
+        error: this.isError
+      });
+    },
+    aggregationData: function aggregationData(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        aggregationData: newVal,
+        loading: this.isLoading,
+        error: this.isError
+      });
+    },
+    loading: function loading(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        aggregationData: this.aggregationData,
+        loading: newVal,
+        error: this.isError
+      });
+    },
+    error: function error(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        aggregationData: this.aggregationData,
+        loading: this.isLoading,
+        error: newVal
+      });
+    },
+    debounce: function debounce(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.handleTextChange = _debounce(this.handleText, newVal);
+      }
+    },
+    isAITyping: function isAITyping(newVal, oldVal) {
+      var _this = this;
+      var scrollAIContainer = function scrollAIContainer() {
+        var dropdownEle = _this.$refs[_dropdownULRef];
+        if (dropdownEle) {
+          dropdownEle.scrollTo({
+            top: dropdownEle.scrollHeight,
+            behavior: 'smooth'
+          });
+        }
+      };
+      if (!newVal && oldVal) {
+        this.showAIScreenFooter = true;
+        if (this.$props.AIUIConfig && typeof this.$props.AIUIConfig.showFeedback === 'boolean' ? this.$props.AIUIConfig.showFeedback : true) {
+          this.showFeedbackComponent = true;
+        }
+        setTimeout(function () {
+          scrollAIContainer();
+        }, 500);
+      } else if (newVal) {
+        this.scrollTimerRef = setTimeout(function () {
+          scrollAIContainer();
+        }, 2000);
+      }
+    },
+    showAIScreen: function showAIScreen(newVal) {
+      if (newVal) {
+        var _this$$refs;
+        if ((_this$$refs = this.$refs) != null && _this$$refs[this.$props.innerRef] && this.$refs[this.$props.innerRef].$el) {
+          this.$refs[this.$props.innerRef].$el.blur();
+        }
+      } else {
+        this.feedbackState = null;
+        this.showFeedbackComponent = false;
+      }
+    },
+    currentValue: function currentValue() {
+      this.handleTextAreaHeightChange();
+    }
+  },
+  methods: {
+    handleText: function handleText(value, cause) {
+      if (cause === causes.CLEAR_VALUE) {
+        this.triggerCustomQuery(value);
+        this.triggerDefaultQuery(value);
+      } else if (this.$props.autosuggest) {
+        this.triggerDefaultQuery(value);
+      } else if (!this.$props.enterButton) {
+        this.triggerCustomQuery(value);
+      }
+    },
+    getComponent: function getComponent$1(downshiftProps) {
+      if (downshiftProps === void 0) {
+        downshiftProps = {};
+      }
+      var currentValue = this.$data.currentValue;
+      var data = {
+        error: this.error,
+        loading: this.isLoading,
+        downshiftProps: downshiftProps,
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        value: currentValue,
+        resultStats: this.stats,
+        AIData: {
+          question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
+          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
+          documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
+          showAIScreen: this.showAIScreen,
+          sources: this.getAISourceObjects(),
+          isAILoading: this.isAIResponseLoading,
+          AIError: this.AIResponseError
+        }
+      };
+      return createVNode("div", {
+        "ref": _dropdownULRef
+      }, [getComponent(data, this)]);
+    },
+    // returns size and aggs property
+    getBasicQueryOptions: function getBasicQueryOptions() {
+      var aggregationField = this.$props.aggregationField;
+      var queryOptions = getQueryOptions(this.$props);
+      if (aggregationField) {
+        queryOptions.aggs = getCompositeAggsQuery({
+          props: this.$props,
+          showTopHits: true
+        }).aggs;
+      }
+      return queryOptions;
+    },
+    handleSearchIconClick: function handleSearchIconClick() {
+      var currentValue = this.currentValue;
+      if (currentValue.trim()) {
+        this.setValue(currentValue, true);
+        this.onValueSelectedHandler(currentValue, causes.SEARCH_ICON_CLICK);
+      }
+    },
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
+      var _this2 = this;
+      if (isDefaultValue === void 0) {
+        isDefaultValue = false;
+      }
+      if (props === void 0) {
+        props = this.$props;
+      }
+      if (toggleIsOpen === void 0) {
+        toggleIsOpen = true;
+      }
+      if (categoryValue === void 0) {
+        categoryValue = undefined;
+      }
+      var performUpdate = function performUpdate() {
+        if (_this2.$options.isTagsMode && isEqual(value, _this2.selectedTags)) {
+          return;
+        }
+        if (_this2.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          if (Array.isArray(_this2.selectedTags) && _this2.selectedTags.length) {
+            // check if value already present in selectedTags
+            if (typeof value === 'string' && _this2.selectedTags.includes(value)) {
+              _this2.isOpen = false;
+              return;
+            }
+            _this2.selectedTags = [].concat(_this2.selectedTags);
+            if (typeof value === 'string' && !!value) {
+              _this2.selectedTags.push(value);
+            } else if (Array.isArray(value) && !isEqual(_this2.selectedTags, value)) {
+              _this2.selectedTags = value;
+            }
+          } else if (value) {
+            _this2.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+          }
+          _this2.currentValue = '';
+        } else {
+          _this2.currentValue = decodeHtml(value);
+        }
+        var queryHandlerValue = value;
+        if (_this2.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          queryHandlerValue = Array.isArray(_this2.selectedTags) && _this2.selectedTags.length ? _this2.selectedTags : undefined;
+        }
+        if (isDefaultValue) {
+          if (_this2.$props.autosuggest) {
+            if (toggleIsOpen) {
+              _this2.isOpen = false;
+            }
+            if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
+              enableAI: true
+            } : {});
+          } // in case of strict selection only SUGGESTION_SELECT should be able
+          // to set the query otherwise the value should reset
+          if (props.strictSelection) {
+            if (cause === causes.SUGGESTION_SELECT || (_this2.$options.isTagsMode ? _this2.selectedTags.length === 0 : value === '')) {
+              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
+            } else {
+              _this2.setValue('', true);
+            }
+          } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
+            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
+          }
+        } else {
+          // debounce for handling text while typing
+          _this2.handleTextChange(value, cause);
+        }
+        _this2.$emit('valueChange', value);
+        _this2.$emit('value-change', value);
+      };
+      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
+    },
+    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta) {
+      if (meta === void 0) {
+        meta = {};
+      }
+      if (!this.$props.autosuggest) {
+        return;
+      }
+      var value = typeof paramValue !== 'string' ? this.currentValue : paramValue;
+      var query = SearchBox.defaultQuery(value, this.$props);
+      if (this.defaultQuery) {
+        var defaultQueryToBeSet = this.defaultQuery(value, this.$props) || {};
+        if (defaultQueryToBeSet.query) {
+          query = defaultQueryToBeSet.query;
+        }
+
+        // Update calculated default query in store
+        updateDefaultQuery(this.$props.componentId, this.setDefaultQuery, this.$props, value);
+      }
+      this.updateQuery({
+        componentId: this.internalComponent,
+        query: query,
+        value: value,
+        componentType: componentTypes.searchBox,
+        meta: meta
+      });
+    },
+    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
+      if (categoryValue === void 0) {
+        categoryValue = undefined;
+      }
+      var _this$$props = this.$props,
+        customQuery = _this$$props.customQuery,
+        filterLabel = _this$$props.filterLabel,
+        showFilter = _this$$props.showFilter,
+        URLParams = _this$$props.URLParams;
+      var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
+      if (this.$options.isTagsMode) {
+        value = paramValue;
+      }
+      var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
+      var query = defaultQueryTobeSet;
+      if (customQuery) {
+        var customQueryTobeSet = customQuery(value, this.$props);
+        var queryTobeSet = customQueryTobeSet.query;
+        if (queryTobeSet) {
+          query = queryTobeSet;
+        }
+        updateCustomQuery(this.$props.componentId, this.setCustomQuery, this.$props, value);
+      }
+      this.updateQuery({
+        componentId: this.$props.componentId,
+        query: query,
+        value: value,
+        label: filterLabel,
+        showFilter: showFilter,
+        URLParams: URLParams,
+        componentType: componentTypes.searchBox,
+        category: categoryValue
+      });
+    },
+    handleFocus: function handleFocus(event) {
+      if (this.$props.autosuggest) {
+        this.isOpen = true;
+      }
+      this.$emit('focus', event);
+    },
+    handleVoiceResults: function handleVoiceResults(_ref) {
+      var results = _ref.results;
+      if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
+        this.setValue(results[0][0].transcript.trim(), true);
+      }
+    },
+    triggerQuery: function triggerQuery(_ref2) {
+      var _ref2$isOpen = _ref2.isOpen,
+        isOpen = _ref2$isOpen === void 0 ? undefined : _ref2$isOpen,
+        _ref2$customQuery = _ref2.customQuery,
+        customQuery = _ref2$customQuery === void 0 ? true : _ref2$customQuery,
+        _ref2$defaultQuery = _ref2.defaultQuery,
+        defaultQuery = _ref2$defaultQuery === void 0 ? true : _ref2$defaultQuery,
+        _ref2$value = _ref2.value,
+        value = _ref2$value === void 0 ? undefined : _ref2$value,
+        _ref2$categoryValue = _ref2.categoryValue,
+        categoryValue = _ref2$categoryValue === void 0 ? undefined : _ref2$categoryValue;
+      if (typeof isOpen === 'boolean') {
+        this.isOpen = isOpen;
+      }
+      if (customQuery) {
+        this.triggerCustomQuery(value, categoryValue);
+      }
+      if (defaultQuery) {
+        this.triggerDefaultQuery(value);
+      }
+    },
+    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
+      // click analytics would only work client side and after javascript loads
+      var docId = documentId;
+      if (!docId) {
+        var hitData = this.normalizedSuggestions.find(function (hit) {
+          return hit._click_id === searchPosition;
+        });
+        if (hitData && hitData.source && hitData.source._id) {
+          docId = hitData.source._id;
+        }
+      }
+      this.recordSuggestionClick(searchPosition, docId);
+    },
+    clearValue: function clearValue() {
+      this.setValue('', false, this.$props, !this.$options.isTagsMode ? causes.CLEAR_VALUE : undefined, false);
+      this.onValueSelectedHandler('', !this.$options.isTagsMode ? causes.CLEAR_VALUE : undefined);
+    },
+    handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+      if (highlightedIndex === void 0) {
+        highlightedIndex = null;
+      }
+      // if a suggestion was selected, delegate the handling to suggestion handler
+      if (event.key === 'Enter') {
+        if (this.$props.autosuggest === false) {
+          this.enterButtonOnClick();
+        } else if (highlightedIndex === null) {
+          this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? causes.SUGGESTION_SELECT : undefined,
+          // to handle tags
+          !this.$props.enableAI);
+          if (this.$props.enableAI && !this.showAIScreen) {
+            this.showAIScreen = true;
+          }
+          this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
+        }
+      }
+
+      // Need to review
+      this.$emit('keyDown', event, this.triggerQuery);
+      this.$emit('key-down', event, this.triggerQuery);
+    },
+    onInputChange: function onInputChange(e) {
+      var _this3 = this;
+      var inputValue = e.target.value;
+      if (!this.$data.isOpen && this.$props.autosuggest) {
+        this.isOpen = true;
+      }
+      if (this.showAIScreen) {
+        this.showAIScreen = false;
+      }
+      var value = this.$props.value;
+      if (value === undefined) {
+        this.setValue(inputValue, false, this.$props, undefined);
+      } else {
+        this.$emit('change', inputValue, function (_ref3) {
+          var isOpen = _ref3.isOpen;
+          return _this3.triggerQuery({
+            defaultQuery: true,
+            customQuery: true,
+            value: inputValue,
+            isOpen: isOpen
+          });
+        }, e);
+      }
+    },
+    onSuggestionSelected: function onSuggestionSelected(suggestion) {
+      var _this4 = this;
+      if (!this.$props.enableAI) this.isOpen = false;else {
+        this.showAIScreen = true;
+      }
+      var value = this.$props.value;
+      // Record analytics for selected suggestions
+      this.triggerClickAnalytics(suggestion._click_id);
+      if (value === undefined) {
+        this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
+      } else {
+        var emitValue = suggestion.value;
+        if (this.$options.isTagsMode) {
+          emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
+          if (this.selectedTags.includes(suggestion.value)) {
+            // avoid duplicates in tags array
+            this.isOpen = false;
+            return;
+          }
+          emitValue.push(suggestion.value);
+        }
+        this.setValue(emitValue, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
+        this.$emit('change', emitValue, function (_ref4) {
+          var isOpen = _ref4.isOpen;
+          return _this4.triggerQuery(_extends({
+            isOpen: isOpen,
+            value: emitValue
+          }, !_this4.$options.isTagsMode && {
+            categoryValue: suggestion._category
+          }));
+        });
+      }
+      this.onValueSelectedHandler(suggestion.value, causes.SUGGESTION_SELECT, suggestion.source);
+    },
+    onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
+      if (currentValue === void 0) {
+        currentValue = this.$data.currentValue;
+      }
+      for (var _len = arguments.length, cause = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        cause[_key - 1] = arguments[_key];
+      }
+      this.$emit.apply(this, ['valueSelected', currentValue].concat(cause));
+      this.$emit.apply(this, ['value-selected', currentValue].concat(cause));
+    },
+    handleStateChange: function handleStateChange(changes) {
+      var isOpen = changes.isOpen;
+      this.isOpen = isOpen;
+    },
+    getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
+      var isDark = this.themePreset === 'dark';
+      if (isDark) {
+        return highlightedIndex === index ? '#555' : '#424242';
+      }
+      return highlightedIndex === index ? '#eee' : '#fff';
+    },
+    renderIcon: function renderIcon() {
+      if (this.$props.showIcon) {
+        return this.$props.icon || createVNode(SearchSvg, null, null);
+      }
+      return null;
+    },
+    renderErrorComponent: function renderErrorComponent(isAIError) {
+      var _this5 = this;
+      if (isAIError === void 0) {
+        isAIError = false;
+      }
+      var renderError = this.$slots.renderError || this.$props.renderError;
+      if (isAIError) {
+        if (this.showAIScreen && this.AIResponseError && !this.isAIResponseLoading) {
+          if (renderError) {
+            return createVNode("div", {
+              "class": "--ai-answer-error-container " + (getClassName$1(this.$props.innerClass, 'ai-error') || '')
+            }, [renderError(this.AIResponseError)]);
+          }
+          return createVNode("div", {
+            "class": "--ai-answer-error-container " + (getClassName$1(this.$props.innerClass, 'ai-error') || '')
+          }, [createVNode("div", {
+            "class": "--default-error-element"
+          }, [createVNode("span", null, [typeof this.AIResponseError === 'string' ? this.AIResponseError : this.AIResponseError.message ? this.AIResponseError.message : 'There was an error in generating the response.', this.AIResponseError.code ? "Code:\n\t\t\t\t\t\t\t" + this.AIResponseError.code : ''])])]);
+        }
+      }
+      if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
+        return createVNode(SuggestionWrapper, {
+          "innerClass": this.$props.innerClass,
+          "innerClassName": "error",
+          "theme": this.theme,
+          "themePreset": this.themePreset
+        }, {
+          "default": function _default() {
+            return [isFunction(renderError) ? renderError(_this5.error) : renderError];
+          }
+        });
+      }
+      return null;
+    },
+    renderCancelIcon: function renderCancelIcon() {
+      if (this.$props.showClear) {
+        return this.$props.clearIcon || createVNode(CancelSvg, null, null);
+      }
+      return null;
+    },
+    renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
+      if (finalSuggestionsList === void 0) {
+        finalSuggestionsList = [];
+      }
+      var innerClass = this.$props.innerClass;
+      var renderNoSuggestion = this.$slots.renderNoSuggestion || this.$props.renderNoSuggestion;
+      var renderError = this.$slots.renderError || this.$props.renderError;
+      var _this$$data = this.$data,
+        isOpen = _this$$data.isOpen,
+        currentValue = _this$$data.currentValue;
+      if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
+        return createVNode(SuggestionWrapper, {
+          "innerClass": innerClass,
+          "themePreset": this.themePreset,
+          "theme": this.theme,
+          "innerClassName": "noSuggestion"
+        }, {
+          "default": function _default() {
+            return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
+          }
+        });
+      }
+      return null;
+    },
+    renderInputAddonBefore: function renderInputAddonBefore() {
+      var addonBefore = this.$slots.addonBefore;
+      if (addonBefore) {
+        var _slot;
+        return createVNode(InputAddon, {
+          "class": "addon-before"
+        }, _isSlot(_slot = addonBefore()) ? _slot : {
+          "default": function _default() {
+            return [_slot];
+          }
+        });
+      }
+      return null;
+    },
+    renderInputAddonAfter: function renderInputAddonAfter() {
+      var addonAfter = this.$slots.addonAfter;
+      if (addonAfter) {
+        var _slot2;
+        return createVNode(InputAddon, {
+          "class": "addon-after"
+        }, _isSlot(_slot2 = addonAfter()) ? _slot2 : {
+          "default": function _default() {
+            return [_slot2];
+          }
+        });
+      }
+      return null;
+    },
+    enterButtonOnClick: function enterButtonOnClick() {
+      this.showAIScreen = false;
+      this.triggerQuery({
+        isOpen: false,
+        value: this.currentValue,
+        customQuery: true
+      });
+    },
+    renderEnterButtonElement: function renderEnterButtonElement() {
+      var _this6 = this;
+      var _this$$props2 = this.$props,
+        enterButton = _this$$props2.enterButton,
+        innerClass = _this$$props2.innerClass;
+      var renderEnterButton = this.$slots.renderEnterButton;
+      if (enterButton) {
+        var getEnterButtonMarkup = function getEnterButtonMarkup() {
+          if (renderEnterButton) {
+            return renderEnterButton(_this6.enterButtonOnClick);
+          }
+          return createVNode(Button, {
+            "class": "enter-btn " + getClassName$1(innerClass, 'enter-button'),
+            "primary": true,
+            "onClick": _this6.enterButtonOnClick
+          }, {
+            "default": function _default() {
+              return [createTextVNode("Search")];
+            }
+          });
+        };
+        return createVNode("div", {
+          "class": "enter-button-wrapper"
+        }, [getEnterButtonMarkup()]);
+      }
+      return null;
+    },
+    renderIcons: function renderIcons() {
+      var _this7 = this;
+      var _slot3, _slot4, _slot5;
+      var _this$$props3 = this.$props,
+        iconPosition = _this$$props3.iconPosition,
+        showClear = _this$$props3.showClear,
+        innerClass = _this$$props3.innerClass,
+        getMicInstance = _this$$props3.getMicInstance,
+        showVoiceSearch = _this$$props3.showVoiceSearch,
+        showIcon = _this$$props3.showIcon;
+      var renderMic = this.$slots.renderMic || this.$props.renderMic;
+      var currentValue = this.$data.currentValue;
+      return createVNode("div", null, [createVNode(IconGroup, {
+        "groupPosition": "right",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [currentValue && showClear && createVNode(IconWrapper, {
+            "onClick": _this7.clearValue,
+            "showIcon": showIcon,
+            "isClearIcon": true
+          }, _isSlot(_slot3 = _this7.renderCancelIcon()) ? _slot3 : {
+            "default": function _default() {
+              return [_slot3];
+            }
+          }), showVoiceSearch && createVNode(Mic, {
+            "getInstance": getMicInstance,
+            "render": renderMic,
+            "handleResult": _this7.handleVoiceResults,
+            "className": getClassName$1(innerClass, 'mic') || null
+          }, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
+            "onClick": _this7.handleSearchIconClick
+          }, _isSlot(_slot4 = _this7.renderIcon()) ? _slot4 : {
+            "default": function _default() {
+              return [_slot4];
+            }
+          })];
+        }
+      }), createVNode(IconGroup, {
+        "groupPosition": "left",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
+            "onClick": _this7.handleSearchIconClick
+          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
+            "default": function _default() {
+              return [_slot5];
+            }
+          })];
+        }
+      })]);
+    },
+    focusSearchBox: function focusSearchBox(event) {
+      var _this$$refs2, _this$$refs2$this$$pr;
+      var elt = event.target || event.srcElement;
+      var tagName = elt.tagName;
+      if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
+        // already in an input
+        return;
+      }
+      (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.focus(); // eslint-disable-line
+    },
+    listenForFocusShortcuts: function listenForFocusShortcuts() {
+      var _this8 = this;
+      var _this$$props$focusSho = this.$props.focusShortcuts,
+        focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
+      if (isEmpty(focusShortcuts)) {
+        return;
+      }
+      var shortcutsString = parseFocusShortcuts(focusShortcuts).join(',');
+
+      // handler for alphabets and other key combinations
+      hotkeys(shortcutsString,
+      // eslint-disable-next-line no-unused-vars
+      /* eslint-disable no-shadow */
+      function (event, handler) {
+        // Prevent the default refresh event under WINDOWS system
+        event.preventDefault();
+        _this8.focusSearchBox(event);
+      });
+
+      // if one of modifier keys are used, they are handled below
+      hotkeys('*', function (event) {
+        var modifierKeys = extractModifierKeysFromFocusShortcuts(focusShortcuts);
+        if (modifierKeys.length === 0) return;
+        for (var index = 0; index < modifierKeys.length; index += 1) {
+          var element = modifierKeys[index];
+          if (hotkeys[element]) {
+            _this8.focusSearchBox(event);
+            break;
+          }
+        }
+      });
+    },
+    onAutofillClick: function onAutofillClick(suggestion) {
+      var value = suggestion.value;
+      this.isOpen = true;
+      this.currentValue = decodeHtml(value);
+      this.triggerDefaultQuery(value);
+    },
+    renderAutoFill: function renderAutoFill(suggestion) {
+      var _this9 = this;
+      var handleAutoFillClick = function handleAutoFillClick(e) {
+        e.stopPropagation();
+        _this9.onAutofillClick(suggestion);
+      };
+      /* 👇 avoid showing autofill for category suggestions👇 */
+      return suggestion._category ? null : createVNode(AutoFillSvg, {
+        "onClick": handleAutoFillClick
+      }, null);
+    },
+    renderTag: function renderTag(item) {
+      var _this10 = this;
+      var innerClass = this.$props.innerClass;
+      return createVNode(TagItem, {
+        "class": getClassName$1(innerClass, 'selected-tag') || ''
+      }, {
+        "default": function _default() {
+          return [createVNode("span", null, [item]), createVNode("span", {
+            "role": "img",
+            "aria-label": "delete-tag",
+            "class": "close-icon",
+            "onClick": function onClick() {
+              return _this10.clearTag(item);
+            }
+          }, [createVNode(CancelSvg, null, null)])];
+        }
+      });
+    },
+    clearAllTags: function clearAllTags() {
+      this.selectedTags = [];
+      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
+      if (this.$props.value !== undefined) {
+        this.$emit('change', this.selectedTags, this.triggerQuery);
+      }
+    },
+    clearTag: function clearTag(tagValue) {
+      this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
+        return tag !== tagValue;
+      }));
+      this.setValue('', true, this.$props, causes.SUGGESTION_SELECT);
+      if (this.$props.value !== undefined) {
+        this.$emit('change', this.selectedTags, this.triggerQuery);
+      }
+    },
+    renderTags: function renderTags() {
+      var _this11 = this;
+      if (!Array.isArray(this.selectedTags)) {
+        return null;
+      }
+      var tagsList = [].concat(this.selectedTags);
+      var shouldRenderClearAllTag = tagsList.length > 1;
+      var renderSelectedTags = this.$slots.renderSelectedTags || this.$props.renderSelectedTags;
+      return renderSelectedTags ? renderSelectedTags({
+        values: this.selectedTags,
+        handleClear: this.clearTag,
+        handleClearAll: this.clearAllTags
+      }) : createVNode(TagsContainer, null, {
+        "default": function _default() {
+          return [tagsList.map(function (item) {
+            return _this11.renderTag(item);
+          }), shouldRenderClearAllTag && createVNode(TagItem, {
+            "class": getClassName$1(_this11.$props.innerClass, 'selected-tag') || ''
+          }, {
+            "default": function _default() {
+              return [createVNode("span", null, [createTextVNode("Clear All")]), createVNode("span", {
+                "role": "img",
+                "aria-label": "delete-tag",
+                "class": "close-icon",
+                "onClick": _this11.clearAllTags
+              }, [createVNode(CancelSvg, null, null)])];
+            }
+          })];
+        }
+      });
+    },
+    getAISourceObjects: function getAISourceObjects() {
+      var localCache = getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) && getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY)[this.componentId];
+      var sourceObjects = [];
+      if (!this.AIResponse) return sourceObjects;
+      var docIds = this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [];
+      if (localCache && localCache.meta && localCache.meta.hits && localCache.meta.hits.hits) {
+        docIds.forEach(function (id) {
+          var foundSourceObj = localCache.meta.hits.hits.find(function (hit) {
+            return hit._id === id;
+          }) || {};
+          if (foundSourceObj) {
+            var _foundSourceObj$_sour = foundSourceObj._source,
+              _source = _foundSourceObj$_sour === void 0 ? {} : _foundSourceObj$_sour,
+              rest = _objectWithoutPropertiesLoose(foundSourceObj, _excluded);
+            sourceObjects.push(_extends({}, rest, _source));
+          }
+        });
+      } else {
+        sourceObjects.push.apply(sourceObjects, docIds.map(function (id) {
+          return {
+            _id: id
+          };
+        }));
+      }
+      return sourceObjects;
+    },
+    renderAIScreenLoader: function renderAIScreenLoader() {
+      var _this$$props$AIUIConf = this.$props.AIUIConfig,
+        AIUIConfig = _this$$props$AIUIConf === void 0 ? {} : _this$$props$AIUIConf;
+      var _ref5 = AIUIConfig || {},
+        loaderMessage = _ref5.loaderMessage;
+      if (loaderMessage) {
+        return loaderMessage;
+      }
+      if (this.$slots.AILoaderMessage) {
+        return this.$slots.AILoaderMessage();
+      }
+      return createVNode(HorizontalSkeletonLoader, null, null);
+    },
+    renderAIScreenFooter: function renderAIScreenFooter() {
+      var _slot6;
+      var _this12 = this;
+      var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
+        AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
+      var _ref6 = AIUIConfig || {},
+        _ref6$showSourceDocum = _ref6.showSourceDocuments,
+        showSourceDocuments = _ref6$showSourceDocum === void 0 ? true : _ref6$showSourceDocum,
+        _ref6$sourceDocumentL = _ref6.sourceDocumentLabel,
+        sourceDocumentLabel = _ref6$sourceDocumentL === void 0 ? '_id' : _ref6$sourceDocumentL,
+        _ref6$onSourceClick = _ref6.onSourceClick,
+        onSourceClick = _ref6$onSourceClick === void 0 ? function () {} : _ref6$onSourceClick;
+      return showSourceDocuments && this.showAIScreenFooter && this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds ? createVNode(Footer, {
+        "themePreset": this.$props.themePreset
+      }, {
+        "default": function _default() {
+          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot6 = _this12.getAISourceObjects().map(function (el) {
+            return createVNode(Button, {
+              "class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
+              "title": el[sourceDocumentLabel],
+              "info": true,
+              "onClick": function onClick() {
+                return onSourceClick && onSourceClick(el);
+              }
+            }, {
+              "default": function _default() {
+                return [el[sourceDocumentLabel]];
+              }
+            });
+          })) ? _slot6 : {
+            "default": function _default() {
+              return [_slot6];
+            }
+          })];
+        }
+      }) : null;
+    },
+    renderAIScreen: function renderAIScreen() {
+      var _this13 = this;
+      var customAIRenderer = this.$props.renderAIAnswer || this.$slots.renderAIAnswer;
+      if (customAIRenderer) {
+        return customAIRenderer({
+          question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
+          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
+          documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
+          loading: this.isAIResponseLoading || this.isLoading,
+          sources: this.getAISourceObjects(),
+          error: this.AIResponseError
+        });
+      }
+      if (this.isAIResponseLoading || this.isLoading) {
+        return this.renderAIScreenLoader();
+      }
+      return createVNode("div", null, [createVNode(Answer, {
+        "innerHTML": md.render(this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text)
+      }, null), this.renderAIScreenFooter(), this.showFeedbackComponent && createVNode("div", {
+        "class": "" + (getClassName$1(this.$props.innerClass, 'ai-feedback') || '')
+      }, [createVNode(AIFeedback, {
+        "overrideState": this.feedbackState,
+        "hideUI": this.isAIResponseLoading || this.isLoading || !this.sessionIdFromStore,
+        "key": this.sessionIdFromStore,
+        "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
+          _this13.feedbackState = {
+            isRecorded: true,
+            feedbackType: useful ? 'positive' : 'negative'
+          };
+          _this13.recordAISessionUsefulness(_this13.sessionIdFromStore, {
+            useful: useful,
+            reason: reason
+          });
+        }
+      }, null)])]);
+    },
+    handleTextAreaHeightChange: function handleTextAreaHeightChange() {
+      var _this$$refs$this$$pro, _this$$refs$_inputGro;
+      var textArea = (_this$$refs$this$$pro = this.$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.$el;
+      var inputGroupEle = (_this$$refs$_inputGro = this.$refs[_inputGroupRef]) == null ? void 0 : _this$$refs$_inputGro.$el;
+      if (textArea) {
+        textArea.style.height = '42px';
+        var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
+        var maxHeight = lineHeight * 4; // max height for 3 lines
+        var height = Math.min(textArea.scrollHeight, maxHeight);
+        textArea.style.height = height + "px";
+        textArea.style.overflowY = height === maxHeight ? 'auto' : 'hidden';
+        var dropdownEle = this.$refs[_dropdownULRef];
+        if (dropdownEle) {
+          dropdownEle.style.top = "" + textArea.style.height;
+        }
+        if (inputGroupEle) {
+          inputGroupEle.style.height = "" + textArea.style.height;
+        }
+      }
+    },
+    askButtonOnClick: function askButtonOnClick() {
+      this.showAIScreen = true;
+      this.isOpen = true;
+      this.triggerDefaultQuery(this.currentValue, {
+        enableAI: true
+      });
+    },
+    renderAskButtonElement: function renderAskButtonElement() {
+      var _this14 = this;
+      var _this$$props4 = this.$props,
+        AIUIConfig = _this$$props4.AIUIConfig,
+        innerClass = _this$$props4.innerClass;
+      var _ref7 = AIUIConfig || {},
+        askButton = _ref7.askButton;
+      var renderAskButton = this.$slots.renderAskButton;
+      if (askButton) {
+        var getEnterButtonMarkup = function getEnterButtonMarkup() {
+          if (renderAskButton) {
+            return renderAskButton(_this14.askButtonOnClick);
+          }
+          return createVNode(Button, {
+            "class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
+            "info": true,
+            "onClick": _this14.askButtonOnClick
+          }, {
+            "default": function _default() {
+              return [createTextVNode("Ask")];
+            }
+          });
+        };
+        return createVNode("div", {
+          "class": "enter-button-wrapper"
+        }, [getEnterButtonMarkup()]);
+      }
+      return null;
+    }
+  },
+  render: function render() {
+    var _this15 = this;
+    var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
+    var _this$$slots = this.$slots,
+      recentSearchesIcon = _this$$slots.recentSearchesIcon,
+      popularSearchesIcon = _this$$slots.popularSearchesIcon;
+    var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
+    var renderItem = this.$slots.renderItem || this.$props.renderItem;
+    return createVNode(Container, {
+      "class": this.$props.className
+    }, {
+      "default": function _default() {
+        return [_this15.$props.title && createVNode(Title, {
+          "class": getClassName$1(_this15.$props.innerClass, 'title') || ''
+        }, {
+          "default": function _default() {
+            return [_this15.$props.title];
+          }
+        }), _this15.$props.autosuggest ? createVNode(Downshift, {
+          "id": _this15.$props.componentId + "-downshift",
+          "handleChange": _this15.onSuggestionSelected,
+          "handleMouseup": _this15.handleStateChange,
+          "isOpen": _this15.$data.isOpen
+        }, {
+          "default": function _default(_ref8) {
+            var getInputEvents = _ref8.getInputEvents,
+              getInputProps = _ref8.getInputProps,
+              getItemProps = _ref8.getItemProps,
+              getItemEvents = _ref8.getItemEvents,
+              isOpen = _ref8.isOpen,
+              highlightedIndex = _ref8.highlightedIndex,
+              setHighlightedIndex = _ref8.setHighlightedIndex;
+            var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
+              var getIcon = function getIcon(iconType) {
+                switch (iconType) {
+                  case suggestionTypes.Recent:
+                    return recentSearchesIcon;
+                  case suggestionTypes.Popular:
+                    return popularSearchesIcon;
+                  default:
+                    return null;
+                }
+              };
+              return createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
+                isOpen: isOpen,
+                getItemProps: getItemProps,
+                getItemEvents: getItemEvents,
+                highlightedIndex: highlightedIndex
+              }), _this15.renderErrorComponent(), !_this15.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
+                "class": suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list'),
+                "ref": _dropdownULRef
+              }, [_this15.showAIScreen && createVNode(SearchBoxAISection, {
+                "themePreset": _this15.$props.themePreset
+              }, {
+                "default": function _default() {
+                  return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
+                }
+              }), !_this15.showAIScreen && _this15.normalizedSuggestions.map(function (item, index) {
+                return renderItem ? createVNode("li", mergeProps(getItemProps({
+                  item: item
+                }), getItemEvents({
+                  item: item
+                }), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [renderItem(item)]) : createVNode("li", mergeProps(getItemProps({
+                  item: item
+                }), _transformOn(getItemEvents({
+                  item: item
+                })), {
+                  "key": index + 1 + "-" + item.value,
+                  "style": {
+                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
+                    justifyContent: 'flex-start',
+                    alignItems: 'center'
+                  }
+                }), [createVNode("div", {
+                  "style": {
+                    padding: '0 10px 0 0',
+                    display: 'flex'
+                  }
+                }, [createVNode(CustomSvg, {
+                  "className": getClassName$1(_this15.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "icon": getIcon(item._suggestion_type),
+                  "type": item._suggestion_type + "-search-icon"
+                }, null)]), createVNode(SuggestionItem, {
+                  "currentValue": _this15.currentValue,
+                  "suggestion": item
+                }, null), _this15.renderAutoFill(item)]);
+              })]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
+            };
+            return createVNode("div", {
+              "class": suggestionsContainer
+            }, [createVNode(InputGroup, {
+              "ref": _inputGroupRef
+            }, {
+              "default": function _default() {
+                return [_this15.renderInputAddonBefore(), createVNode(InputWrapper, null, {
+                  "default": function _default() {
+                    return [createVNode(TextArea, mergeProps(_transformOn(getInputEvents({
+                      onInput: _this15.onInputChange,
+                      onBlur: function onBlur(e) {
+                        _this15.$emit('blur', e, _this15.triggerQuery);
+                      },
+                      onFocus: _this15.handleFocus,
+                      onKeyPress: function onKeyPress(e) {
+                        _this15.$emit('keyPress', e, _this15.triggerQuery);
+                        _this15.$emit('key-press', e, _this15.triggerQuery);
+                      },
+                      onKeyDown: function onKeyDown(e) {
+                        return _this15.handleKeyDown(e, highlightedIndex);
+                      },
+                      onKeyUp: function onKeyUp(e) {
+                        _this15.$emit('keyUp', e, _this15.triggerQuery);
+                        _this15.$emit('key-up', e, _this15.triggerQuery);
+                      },
+                      onClick: function onClick() {
+                        setHighlightedIndex(null);
+                      }
+                    })), {
+                      "id": _this15.$props.componentId + "-input",
+                      "showIcon": _this15.$props.showIcon,
+                      "showClear": _this15.$props.showClear,
+                      "iconPosition": _this15.$props.iconPosition,
+                      "ref": _this15.$props.innerRef,
+                      "class": getClassName$1(_this15.$props.innerClass, 'input'),
+                      "placeholder": _this15.$props.placeholder,
+                      "autoFocus": _this15.$props.autoFocus,
+                      "showFocusShortcutsIcon": _this15.$props.showFocusShortcutsIcon,
+                      "showVoiceSearch": _this15.$props.showVoiceSearch
+                    }, getInputProps({
+                      value: _this15.$data.currentValue === null ? '' : _this15.$data.currentValue
+                    }), {
+                      "themePreset": _this15.themePreset,
+                      "autocomplete": "off"
+                    }), null), _this15.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
+                  }
+                }), _this15.renderInputAddonAfter(), _this15.renderAskButtonElement(), _this15.renderEnterButtonElement()];
+              }
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this15.renderTags()]);
+          }
+        }) : createVNode("div", {
+          "class": suggestionsContainer
+        }, [createVNode(InputGroup, {
+          "ref": _inputGroupRef
+        }, {
+          "default": function _default() {
+            return [_this15.renderInputAddonBefore(), createVNode(InputWrapper, null, {
+              "default": function _default() {
+                return [createVNode(TextArea, mergeProps(_transformOn({
+                  blur: function blur(e) {
+                    _this15.$emit('blur', e, _this15.triggerQuery);
+                  },
+                  keypress: function keypress(e) {
+                    _this15.$emit('keyPress', e, _this15.triggerQuery);
+                    _this15.$emit('key-press', e, _this15.triggerQuery);
+                  },
+                  input: _this15.onInputChange,
+                  focus: function focus(e) {
+                    _this15.$emit('focus', e, _this15.triggerQuery);
+                  },
+                  keydown: _this15.handleKeyDown,
+                  keyup: function keyup(e) {
+                    _this15.$emit('keyUp', e, _this15.triggerQuery);
+                    _this15.$emit('key-up', e, _this15.triggerQuery);
+                  }
+                }), {
+                  "class": getClassName$1(_this15.$props.innerClass, 'input') || '',
+                  "placeholder": _this15.$props.placeholder,
+                  "autofocus": _this15.$props.autoFocus,
+                  "value": _this15.$data.currentValue ? _this15.$data.currentValue : '',
+                  "iconPosition": _this15.$props.iconPosition,
+                  "showIcon": _this15.$props.showIcon,
+                  "showClear": _this15.$props.showClear,
+                  "ref": _this15.$props.innerRef,
+                  "themePreset": _this15.themePreset
+                }), null), _this15.renderIcons()];
+              }
+            }), _this15.renderInputAddonAfter(), _this15.renderEnterButtonElement()];
+          }
+        })])];
+      }
+    });
+  },
+  destroyed: function destroyed() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+});
+SearchBox.hasInternalComponent = function () {
+  return true;
+};
+SearchBox.defaultQuery = function (value, props) {
+  var finalQuery = null;
+  finalQuery = {
+    bool: {
+      should: SearchBox.shouldQuery(value, props),
+      minimum_should_match: '1'
+    }
+  };
+  if (finalQuery && props.nestedField) {
+    return {
+      query: {
+        nested: {
+          path: props.nestedField,
+          query: finalQuery
+        }
+      }
+    };
+  }
+  return finalQuery;
+};
+SearchBox.shouldQuery = function (value, props) {
+  return {
+    query: {
+      queryFormat: props.queryFormat,
+      dataField: props.dataField,
+      value: value,
+      nestedField: props.nestedField,
+      queryString: props.queryString,
+      searchOperators: props.searchOperators
+    }
+  };
+};
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    selectedCategory: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].category || null,
+    suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
+    rawData: state.rawData[props.componentId],
+    aggregationData: state.compositeAggregations[props.componentId] || [],
+    themePreset: state.config.themePreset,
+    isLoading: !!state.isLoading["" + props.componentId],
+    error: state.error[props.componentId],
+    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
+    AIResponse: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response || null,
+    isAIResponseLoading: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].isLoading,
+    AIResponseError: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].error,
+    sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || '',
+    isAITyping: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.isTyping || false
+  };
+};
+var mapDispatchToProps = {
+  updateQuery: updateQuery,
+  setCustomQuery: setCustomQuery,
+  setDefaultQuery: setDefaultQuery,
+  recordSuggestionClick: recordSuggestionClick,
+  recordAISessionUsefulness: recordAISessionUsefulness
+};
+var SBConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
+  componentType: componentTypes.searchBox,
+  internalComponent: true
+}));
+SBConnected.name = SearchBox.name;
+SBConnected.defaultQuery = SearchBox.defaultQuery;
+SBConnected.shouldQuery = SearchBox.shouldQuery;
+SBConnected.hasInternalComponent = SearchBox.hasInternalComponent;
+SBConnected.install = function (Vue) {
+  Vue.component(SBConnected.name, SBConnected);
+};
+// Add componentType for SSR
+SBConnected.componentType = componentTypes.searchBox;
+
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var md$1 = new Remarkable();
+md$1.set({
+  html: true,
+  breaks: true,
+  xhtmlOut: true
+});
+var _inputWrapperRef = 'inputWrapperRef';
+var _inputRef = 'inputRef';
+var _errorContainerRef = 'errorContainerRef';
+var AIAnswer = defineComponent({
+  name: 'AIAnswer',
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      messages: [],
+      inputMessage: '',
+      AISessionId: '',
+      error: null
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
+  },
+  inject: {
+    theme: {
+      from: 'theme_reactivesearch'
+    }
+  },
+  created: function created() {},
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer$1() {
+      return hasCustomRenderer(this);
+    },
+    isLoadingState: function isLoadingState() {
+      return this.isAIResponseLoading || this.isLoading;
+    },
+    shouldShowComponent: function shouldShowComponent() {
+      return this.showComponent;
+    }
+  },
+  props: {
+    componentId: types.string.isRequired,
+    showVoiceInput: VueTypes.bool.def(false),
+    showFeedback: VueTypes.bool.def(true),
+    showIcon: VueTypes.bool.def(true),
+    onData: types.func,
+    innerRef: VueTypes.string.def('AISearchInputField'),
+    react: types.react,
+    enableAI: VueTypes.bool.def(true),
+    AIConfig: types.AIConfig,
+    iconPosition: types.iconPosition.def('left'),
+    themePreset: types.themePreset,
+    theme: types.style,
+    icon: types.children,
+    iconURL: VueTypes.string.def(''),
+    renderMic: types.func,
+    getMicInstance: types.func,
+    innerClass: types.style,
+    placeholder: VueTypes.string.def('Ask a question'),
+    title: types.title,
+    AIResponse: types.componentObject,
+    isAIResponseLoading: VueTypes.bool.def(false),
+    AIResponseError: types.componentObject,
+    getAIResponse: types.func.isRequired,
+    enterButton: types.bool,
+    renderEnterButton: types.title,
+    showInput: VueTypes.bool.def(true),
+    clearSessionOnDestroy: VueTypes.bool.def(true),
+    rawData: types.rawData,
+    render: types.func,
+    onError: types.func,
+    renderError: types.title,
+    isLoading: types.boolRequired,
+    sessionIdFromStore: VueTypes.string,
+    showComponent: types.boolRequired
+  },
+  mounted: function mounted() {},
+  watch: {
+    AIResponse: function AIResponse(newVal) {
+      if (newVal) {
+        this.AISessionId = ((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
+        var messagesHistory = newVal.messages,
+          response = newVal.response;
+        var finalMessages = [];
+        if (response && response.error) {
+          this.error = {
+            message: response.error
+          };
+        }
+
+        // pushing message history so far
+        if (messagesHistory && messagesHistory && Array.isArray(messagesHistory)) {
+          finalMessages.push.apply(finalMessages, messagesHistory.filter(function (msg) {
+            return msg.role !== AI_ROLES.SYSTEM;
+          }));
+        }
+        //  fresh response
+        if (response && response.answer) ;
+        this.messages = finalMessages;
+      } else if (!newVal && !this.error) {
+        this.messages = [];
+      }
+    },
+    rawData: function rawData(newVal) {
+      this.$emit('on-data', {
+        data: this.messages,
+        rawData: newVal,
+        loading: this.$props.isAIResponseLoading || this.$props.isLoading,
+        error: this.$props.AIResponseError
+      });
+    },
+    isAIResponseLoading: function isAIResponseLoading(newVal) {
+      this.isLoadingState = newVal;
+      this.$emit('on-data', {
+        data: this.messages,
+        rawData: this.$props.rawData,
+        loading: newVal || this.$props.isLoading,
+        error: this.$props.AIResponseError
+      });
+    },
+    isLoading: function isLoading(newVal) {
+      this.isLoadingState = newVal;
+      this.$emit('on-data', {
+        data: this.messages,
+        rawData: this.$props.rawData,
+        loading: newVal || this.$props.isLoading,
+        error: this.$props.AIResponseError
+      });
+    },
+    sessionIdFromStore: function sessionIdFromStore(newVal) {
+      if (newVal) {
+        this.sessionId = newVal;
+      }
+    },
+    AIResponseError: function AIResponseError(newVal) {
+      this.error = newVal;
+      this.AISessionId = ((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
+      this.$emit('on-data', {
+        data: this.messages,
+        rawData: this.$props.rawData,
+        loading: this.$props.isAIResponseLoading || this.$props.isLoading,
+        error: newVal
+      });
+    },
+    messages: function messages() {
+      this.scrollToBottom();
+    }
+  },
+  methods: {
+    scrollToBottom: function scrollToBottom() {
+      var _this = this;
+      this.$nextTick(function () {
+        var _this$$refs;
+        var messageContainer = (_this$$refs = _this.$refs) == null ? void 0 : _this$$refs[_this.$props.innerRef];
+        if (messageContainer && messageContainer.$el) {
+          messageContainer.$el.scrollTo({
+            top: messageContainer.$el.scrollHeight,
+            behavior: 'smooth'
+          });
+        }
+      });
+    },
+    handleMessageInputChange: function handleMessageInputChange(e) {
+      this.inputMessage = e.target.value;
+      this.handleTextAreaHeightChange();
+    },
+    handleSendMessage: function handleSendMessage(e, isRetry, text) {
+      if (isRetry === void 0) {
+        isRetry = false;
+      }
+      if (text === void 0) {
+        text = this.inputMessage;
+      }
+      if (typeof e === 'object') e.preventDefault();
+      if (text.trim()) {
+        if (this.isLoadingState) {
+          return;
+        }
+        if (this.AISessionId) {
+          if (!isRetry) this.messages = [].concat(this.messages, [{
+            content: text,
+            role: AI_ROLES.USER
+          }]);
+          this.getAIResponse(this.AISessionId, this.componentId, text);
+        } else {
+          console.error("AISessionId for " + this.$props.componentId + " is missing! AIAnswer component requires an AISession to function. Try reloading the App.");
+          this.error = {
+            message: "AISessionId for " + this.$props.componentId + " is missing! AIAnswer component requires an AISession to function. Trying reloading the App."
+          };
+        }
+        this.inputMessage = '';
+      }
+    },
+    handleRetryRequest: function handleRetryRequest() {
+      if (this.messages && !this.isLoadingState) {
+        var _this$messages;
+        var lastUserRequestMessage = (_this$messages = this.messages[this.messages.length - 1]) == null ? void 0 : _this$messages.content;
+        if (this.AISessionId) {
+          this.getAIResponse(this.AISessionId, this.componentId, lastUserRequestMessage);
+          this.inputMessage = '';
+        } else {
+          console.error("AISessionId for " + this.componentId + " is missing! AIAnswer component requires an AISession to function. Try reloading the App.");
+        }
+      }
+    },
+    renderErrorComponent: function renderErrorComponent() {
+      var renderError = this.$slots.renderError || this.$props.renderError;
+      if (this.error && !this.isLoadingState) {
+        var _this$error, _this$error2;
+        if (renderError) {
+          return createVNode("div", {
+            "ref": _errorContainerRef,
+            "class": "--ai-answer-error-container " + (getClassName$2(this.$props.innerClass, 'ai-error') || '')
+          }, [isFunction(renderError) ? renderError(this.error, this.handleRetryRequest) : renderError]);
+        }
+        return createVNode("div", {
+          "ref": _errorContainerRef,
+          "class": "--ai-answer-error-container " + (getClassName$2(this.$props.innerClass, 'ai-error') || '')
+        }, [createVNode("div", {
+          "class": "--default-error-element"
+        }, [createVNode("span", null, [(_this$error = this.error) != null && _this$error.message ? this.error.message : 'There was an error in generating the response.', ' ', (_this$error2 = this.error) != null && _this$error2.code ? "Code:\n\t\t\t\t\t\t\t" + this.error.code : '']), this.AISessionId && createVNode(Button, {
+          "primary": true,
+          "onClick": this.handleRetryRequest
+        }, {
+          "default": function _default() {
+            return [createTextVNode("Try again")];
+          }
+        })])]);
+      }
+      return null;
+    },
+    handleKeyPress: function handleKeyPress(e) {
+      if (e.key === 'Enter') {
+        this.handleSendMessage(e);
+        this.inputMessage = '';
+      }
+    },
+    renderIcon: function renderIcon() {
+      if (this.$props.showIcon) {
+        if (this.$props.icon) {
+          return this.$props.icon;
+        }
+        if (this.$slots.icon) {
+          return this.$slots.icon();
+        }
+        if (this.$props.iconURL) {
+          return createVNode("img", {
+            "style": {
+              maxHeight: '25px'
+            },
+            "src": this.$props.iconURL,
+            "alt": "search-icon"
+          }, null);
+        }
+        return createVNode(SearchSvg, null, null);
+      }
+      return null;
+    },
+    shouldMicRender: function shouldMicRender(showVoiceSearch) {
+      // checks for SSR
+      if (typeof window === 'undefined') return false;
+      return showVoiceSearch && (window.webkitSpeechRecognition || window.SpeechRecognition);
+    },
+    handleVoiceResults: function handleVoiceResults(_ref) {
+      var results = _ref.results;
+      if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
+        this.handleSendMessage(null, false, results[0][0].transcript.trim());
+      }
+    },
+    renderIcons: function renderIcons() {
+      var _this2 = this;
+      var _slot, _slot2;
+      var _this$$props = this.$props,
+        getMicInstance = _this$$props.getMicInstance,
+        showVoiceInput = _this$$props.showVoiceInput,
+        iconPosition = _this$$props.iconPosition,
+        innerClass = _this$$props.innerClass;
+      var renderMic = this.$slots.renderMic || this.$props.renderMic;
+      return createVNode("div", null, [createVNode(IconGroup, {
+        "enableAI": true,
+        "groupPosition": "right",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [_this2.shouldMicRender(showVoiceInput) && createVNode(Mic, {
+            "getInstance": getMicInstance,
+            "render": renderMic,
+            "onResult": _this2.handleVoiceResults,
+            "class": getClassName$2(innerClass, 'ai-search-mic') || null
+          }, null), iconPosition === 'right' && createVNode(IconWrapper, null, _isSlot$1(_slot = _this2.renderIcon()) ? _slot : {
+            "default": function _default() {
+              return [_slot];
+            }
+          })];
+        }
+      }), createVNode(IconGroup, {
+        "enableAI": true,
+        "groupPosition": "left",
+        "positionType": "absolute"
+      }, {
+        "default": function _default() {
+          return [iconPosition === 'left' && createVNode(IconWrapper, null, _isSlot$1(_slot2 = _this2.renderIcon()) ? _slot2 : {
+            "default": function _default() {
+              return [_slot2];
+            }
+          })];
+        }
+      })]);
+    },
+    enterButtonOnClick: function enterButtonOnClick(e) {
+      this.handleSendMessage(e);
+    },
+    renderEnterButtonElement: function renderEnterButtonElement() {
+      var _this3 = this;
+      var _this$$props2 = this.$props,
+        enterButton = _this$$props2.enterButton,
+        innerClass = _this$$props2.innerClass;
+      var renderEnterButton = this.$slots.renderEnterButton;
+      if (enterButton) {
+        var getEnterButtonMarkup = function getEnterButtonMarkup() {
+          if (renderEnterButton) {
+            return renderEnterButton(_this3.enterButtonOnClick);
+          }
+          return createVNode(SendButton, {
+            "primary": true,
+            "type": "submit",
+            "tabIndex": 0,
+            "onClick": _this3.handleSendMessage,
+            "onKeyPress": _this3.handleKeyPress,
+            "class": "enter-btn " + getClassName$2(innerClass, 'ai-enter-button')
+          }, {
+            "default": function _default() {
+              return [createTextVNode("Send")];
+            }
+          });
+        };
+        return createVNode("div", {
+          "class": "ai-enter-button-wrapper"
+        }, [getEnterButtonMarkup()]);
+      }
+      return null;
+    },
+    getComponent: function getComponent$1() {
+      var data = {
+        error: this.AIResponseError,
+        loading: this.isAIResponseLoading,
+        data: this.messages,
+        rawData: this.rawData
+      };
+      return getComponent(data, this);
+    },
+    handleTextAreaHeightChange: function handleTextAreaHeightChange() {
+      var _this$$refs2, _this$$refs2$_inputRe, _this$$refs3, _this$$refs3$_inputWr, _this$$refs4;
+      var textArea = (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$_inputRe = _this$$refs2[_inputRef]) == null ? void 0 : _this$$refs2$_inputRe.$el;
+      var inputWrapper = (_this$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$_inputWr = _this$$refs3[_inputWrapperRef]) == null ? void 0 : _this$$refs3$_inputWr.$el;
+      var errorContainer = (_this$$refs4 = this.$refs) == null ? void 0 : _this$$refs4[_errorContainerRef];
+      if (textArea) {
+        textArea.style.height = '42px';
+        var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
+        var maxHeight = lineHeight * 11; // max height for 10 lines
+        var height = Math.min(textArea.scrollHeight, maxHeight);
+        textArea.style.height = height + "px";
+        textArea.style.overflowY = height === maxHeight ? 'auto' : 'hidden';
+        // wrapper around input/ textarea
+        inputWrapper.style.height = height + "px";
+        // adjust error-container
+
+        if (errorContainer) {
+          errorContainer.style.bottom = height + "px";
+        }
+        this.$forceUpdate();
+      }
+    }
+  },
+  beforeUnmount: function beforeUnmount() {
+    if (this.$props.clearSessionOnDestroy) {
+      // cleanup logic
+      // final Object to store in local storage cache
+      var finalCacheObj = getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {};
+      // delete current component's cache
+      delete finalCacheObj[this.$props.componentId];
+      // update local cache
+      setObjectInLocalStorage(AI_LOCAL_CACHE_KEY, finalCacheObj);
+    }
+  },
+  render: function render() {
+    var _slot3;
+    var _this4 = this;
+    var props = this.$props;
+    if (!this.shouldShowComponent) {
+      return null;
+    }
+    return createVNode(Chatbox, null, {
+      "default": function _default() {
+        return [_this4.$props.title && createVNode(Title, {
+          "class": getClassName$2(_this4.$props.innerClass, 'title') || ''
+        }, {
+          "default": function _default() {
+            return [_this4.$props.title];
+          }
+        }), createVNode(ChatContainer, {
+          "theme": props.theme,
+          "showInput": props.showInput
+        }, {
+          "default": function _default() {
+            return [_this4.hasCustomRenderer && createVNode(MessagesContainer, {
+              "themePreset": _this4.themePreset,
+              "theme": props.theme,
+              "ref": _this4.$props.innerRef,
+              "class": "--ai-message-container " + (getClassName$2(props.innerClass, 'ai-message-container') || '')
+            }, _isSlot$1(_slot3 = _this4.getComponent()) ? _slot3 : {
+              "default": function _default() {
+                return [_slot3];
+              }
+            }), !_this4.hasCustomRenderer && createVNode(MessagesContainer, {
+              "themePreset": _this4.themePreset,
+              "theme": props.theme,
+              "ref": _this4.$props.innerRef,
+              "class": "--ai-message-container " + (getClassName$2(props.innerClass, 'ai-message-container') || '')
+            }, {
+              "default": function _default() {
+                return [_this4.messages.map(function (message, index) {
+                  return createVNode(Message, {
+                    "key": index,
+                    "isSender": message.role === AI_ROLES.USER,
+                    "innerHTML": md$1.render(message.content),
+                    "themePreset": _this4.themePreset,
+                    "theme": props.theme,
+                    "class": "--ai-answer-message " + (getClassName$2(props.innerClass, 'ai-message') || '')
+                  }, null);
+                }), _this4.isLoadingState && createVNode(Message, {
+                  "themePreset": _this4.themePreset,
+                  "theme": props.theme,
+                  "isSender": false,
+                  "class": "--ai-answer-message " + (getClassName$2(props.innerClass, 'ai-message') || null)
+                }, {
+                  "default": function _default() {
+                    return [createVNode(TypingIndicator, null, {
+                      "default": function _default() {
+                        return [createVNode(TypingDot, {
+                          "themePreset": _this4.themePreset
+                        }, null), createVNode(TypingDot, {
+                          "themePreset": _this4.themePreset
+                        }, null), createVNode(TypingDot, {
+                          "themePreset": _this4.themePreset
+                        }, null)];
+                      }
+                    })];
+                  }
+                })];
+              }
+            }), _this4.renderErrorComponent(), ' ', props.showFeedback && createVNode("div", {
+              "class": "--ai-answer-feedback-container " + (getClassName$2(props.innerClass, 'ai-feedback') || '')
+            }, [createVNode(AIFeedback, {
+              "hideUI": _this4.isLoadingState || !_this4.sessionId,
+              "key": _this4.sessionId,
+              "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
+                _this4.trackUsefullness(_this4.sessionId, {
+                  useful: useful,
+                  reason: reason
+                });
+              }
+            }, null)]), props.showInput && createVNode(MessageInputContainer, {
+              "class": "--ai-input-container",
+              "onSubmit": _this4.handleSendMessage
+            }, {
+              "default": function _default() {
+                return [createVNode(InputGroup, {
+                  "enableAI": true,
+                  "isOpen": false
+                }, {
+                  "default": function _default() {
+                    return [createVNode(InputWrapper, {
+                      "ref": _inputWrapperRef
+                    }, {
+                      "default": function _default() {
+                        return [createVNode(MessageInput, {
+                          "ref": _inputRef,
+                          "type": "text",
+                          "placeholder": props.placeholder,
+                          "enterButton": props.enterButton,
+                          "value": _this4.inputMessage,
+                          "onInput": _this4.handleMessageInputChange,
+                          "onKeyPress": _this4.handleKeyPress,
+                          "id": props.componentId + "-ai-input",
+                          "showIcon": props.showIcon,
+                          "iconPosition": props.iconPosition,
+                          "themePreset": _this4.themePreset,
+                          "disabled": _this4.isLoadingState,
+                          "class": getClassName$2(props.innerClass, 'ai-input') || null
+                        }, null), ' ', _this4.renderIcons()];
+                      }
+                    })];
+                  }
+                }), _this4.renderEnterButtonElement()];
+              }
+            }), ' '];
+          }
+        })];
+      }
+    });
+  }
+});
+AIAnswer.hasInternalComponent = function () {
+  return true;
+};
+var mapStateToProps$1 = function mapStateToProps(state, props) {
+  var dependencyComponent = Object.values(props.react)[0];
+  if (Array.isArray(dependencyComponent)) {
+    // eslint-disable-next-line prefer-destructuring
+    dependencyComponent = dependencyComponent[0];
+  }
+  var showComponent = state.selectedValues[dependencyComponent] && state.selectedValues[dependencyComponent].value;
+  return {
+    showComponent: showComponent,
+    AIResponse: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response,
+    isAIResponseLoading: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].isLoading,
+    AIResponseError: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].error,
+    rawData: state.rawData[props.componentId],
+    themePreset: state.config.themePreset,
+    isLoading: state.isLoading[props.componentId] || false,
+    sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || ''
+  };
+};
+var mapDispatchToProps$1 = {
+  getAIResponse: fetchAIResponse,
+  trackUsefullness: recordAISessionUsefulness
+};
+var AIConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps$1, mapDispatchToProps$1)(AIAnswer), {
+  componentType: componentTypes.AIAnswer,
+  internalComponent: true
+}));
+AIConnected.name = AIAnswer.name;
+AIConnected.hasInternalComponent = AIAnswer.hasInternalComponent;
+AIConnected.install = function (Vue) {
+  Vue.component(AIConnected.name, AIConnected);
+};
+// Add componentType for SSR
+AIConnected.componentType = componentTypes.AIAnswer;
+
+var _templateObject$b, _templateObject2$4;
+var HierarchicalMenuList = styled('ul')(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
+var HierarchicalMenuListItem = styled('li')(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
+  return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
+});
+
+var HierarchicalMenuListItemComponent = {
+  name: 'HierarchicalMenuListItemComponent',
+  data: function data() {
+    return {
+      isExpanded: false,
+      newParentPath: ''
+    };
+  },
+  created: function created() {
+    var listItemLabel = this.listItem.key;
+    var newParentPath = listItemLabel;
+    if (this.parentPath) {
+      newParentPath = "" + this.parentPath + TREELIST_VALUES_PATH_SEPARATOR + listItemLabel;
+    }
+    this.newParentPath = newParentPath;
+    this.isExpanded = !!recLookup(this.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+  },
+  watch: {
+    listItem: function listItem(newVal) {
+      if (newVal.initiallyExpanded) {
+        this.isExpanded = newVal.initiallyExpanded;
+      }
+    },
+    selectedValues: function selectedValues(newVal) {
+      this.isExpanded = !!recLookup(newVal, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+    }
+  },
+  props: {
+    parentPath: types$1.string,
+    selectedValues: types$1.rawData,
+    mode: types$1.string,
+    searchTerm: types$1.string,
+    listItem: types$1.rawData,
+    showLine: types$1.bool,
+    renderItem: types$1.func,
+    handleListItemClick: types$1.func,
+    renderSwitcherIcon: types$1.func,
+    showCheckbox: VueTypes.bool,
+    innerClass: types$1.style,
+    showRadio: VueTypes.bool,
+    renderIcon: types$1.func,
+    showCount: VueTypes.bool,
+    showSwitcherIcon: types$1.bool,
+    switcherIcon: types$1.children
+  },
+  render: function render() {
+    var _this = this;
+    var _this$$props = this.$props,
+      selectedValues = _this$$props.selectedValues,
+      mode = _this$$props.mode,
+      searchTerm = _this$$props.searchTerm,
+      listItem = _this$$props.listItem,
+      parentPath = _this$$props.parentPath,
+      showLine = _this$$props.showLine,
+      renderItem = _this$$props.renderItem,
+      handleListItemClick = _this$$props.handleListItemClick,
+      showCheckbox = _this$$props.showCheckbox,
+      innerClass = _this$$props.innerClass,
+      showRadio = _this$$props.showRadio,
+      renderIcon = _this$$props.renderIcon,
+      showCount = _this$$props.showCount,
+      showSwitcherIcon = _this$$props.showSwitcherIcon;
+    if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
+      return null;
+    }
+    var listItemLabel = listItem.key;
+    var listItemCount = listItem.count;
+    var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
+    var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
+      if (showSwitcherIcon === false) {
+        return null;
+      }
+      var switcherIcon = _this.$props.switcherIcon;
+      if (switcherIcon) return switcherIcon(isExpandedProp);
+      return (
+        /* eslint-disable jsx-a11y/click-events-have-key-events
+        , jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
+        createVNode("span", {
+          "tabIndex": "0",
+          "onClick": function onClick(e) {
+            e.stopPropagation();
+            _this.isExpanded = !_this.isExpanded;
+          },
+          "class": "--switcher-icon"
+        }, [createTextVNode("\u27A4")])
+      );
+    };
+    var isSelected = false;
+    if (mode === 'single') {
+      if (recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR) === true) {
+        isSelected = true;
+      }
+    } else {
+      isSelected = !!recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+    }
+    return createVNode(HierarchicalMenuListItem, {
+      "class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
+      "key": this.newParentPath,
+      "showLine": showLine
+    }, {
+      "default": function _default() {
+        return [createVNode(ListItem, {
+          "isTreeListItem": true,
+          "onClick": function onClick() {
+            handleListItemClick(listItemLabel, parentPath);
+          },
+          "style": {
+            textDecoration: 'none'
+          }
+        }, {
+          "default": function _default() {
+            return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : createVNode(Flex, {
+              "alignItems": "center",
+              "gap": "5px"
+            }, {
+              "default": function _default() {
+                return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && createVNode(Flex, {
+                  "alignItems": "center",
+                  "gap": "5px"
+                }, {
+                  "default": function _default() {
+                    return [createVNode(Checkbox, {
+                      "type": "checkbox",
+                      "class": getClassName$2(innerClass, 'checkbox') || null,
+                      "checked": isSelected,
+                      "id": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "name": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "show": true,
+                      "readOnly": true
+                    }, null), createVNode("label", {
+                      "style": {
+                        width: '26px',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        marginRight: '-9px',
+                        left: '-3px'
+                      },
+                      "htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
+                      "onClick": function onClick(e) {
+                        e.stopPropagation();
+                      }
+                    }, null)];
+                  }
+                }), mode === 'single' && showRadio && createVNode(Flex, {
+                  "alignItems": "center",
+                  "gap": "5px"
+                }, {
+                  "default": function _default() {
+                    return [createVNode(Radio, {
+                      "checked": isSelected,
+                      "class": getClassName$2(innerClass, 'radio') || null,
+                      "id": listItemLabel + "-radio-" + _this.newParentPath,
+                      "name": listItemLabel + "-radio-" + _this.newParentPath,
+                      "show": true,
+                      "readOnly": true,
+                      "type": "radio"
+                    }, null), createVNode("label", {
+                      "style": {
+                        width: '26px',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        marginRight: '-9px',
+                        left: '-3px'
+                      },
+                      "htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
+                      "onClick": function onClick(e) {
+                        e.stopPropagation();
+                      }
+                    }, null)];
+                  }
+                }), ' ', renderIcon(isLeafNode), createVNode("div", {
+                  "class": "--list-item-label-count-wrapper"
+                }, [createVNode("span", {
+                  "class": "--list-item-label " + (getClassName$2(innerClass, 'label') || '')
+                }, [listItemLabel]), showCount && createVNode("span", {
+                  "class": "--list-item-count " + (getClassName$2(innerClass, 'count') || '')
+                }, [listItemCount])])];
+              }
+            })];
+          }
+        }), isLeafNode === false && createVNode("div", {
+          "class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
+        }, [createVNode(HierarchicalMenuComponent, {
+          "key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
+          "listArray": listItem.list,
+          "parentPath": _this.newParentPath,
+          "isExpanded": _this.isExpanded,
+          "listItemProps": {
+            mode: mode,
+            selectedValues: selectedValues,
+            searchTerm: searchTerm,
+            showLine: showLine,
+            renderItem: renderItem,
+            handleListItemClick: handleListItemClick,
+            renderSwitcherIcon: renderSwitcherIcon,
+            showCheckbox: showCheckbox,
+            innerClass: innerClass,
+            showRadio: showRadio,
+            renderIcon: renderIcon,
+            showCount: showCount,
+            showSwitcherIcon: showSwitcherIcon,
+            switcherIcon: _this.$props.switcherIcon
+          }
+        }, null)])];
+      }
+    });
+  }
+};
+
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var HierarchicalMenuComponent = {
+  name: 'HierarchicalMenuComponent',
+  props: {
+    listArray: VueTypes.arrayOf(VueTypes.object),
+    // array of objects
+    parentPath: VueTypes.string.def(''),
+    isExpanded: VueTypes.bool.def(false),
+    listItemProps: types$1.rawData
+  },
+  render: function render() {
+    var _slot;
+    var _this$$props = this.$props,
+      listArray = _this$$props.listArray,
+      isExpanded = _this$$props.isExpanded,
+      parentPath = _this$$props.parentPath,
+      listItemProps = _this$$props.listItemProps;
+    if (!Array.isArray(listArray) || listArray.length === 0) {
+      return null;
+    }
+    return createVNode(HierarchicalMenuList, {
+      "class": "" + (isExpanded ? '--open' : ''),
+      "isSelected": isExpanded
+    }, _isSlot$2(_slot = listArray.map(function (listItem) {
+      return createVNode(HierarchicalMenuListItemComponent, mergeProps({
+        "key": parentPath + "__" + JSON.stringify(listItem),
+        "parentPath": parentPath,
+        "listItem": listItem
+      }, listItemProps), null);
+    })) ? _slot : {
+      "default": function _default() {
+        return [_slot];
+      }
+    });
+  }
+};
+
+function _isSlot$3(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var updateQueryAction = Actions.updateQuery,
+  setQueryOptions = Actions.setQueryOptions;
+var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
+  var valueToSet = {};
+  if (valueArray.length) {
+    var newSelectedValues = {};
+    valueArray.forEach(function (valueItem) {
+      setDeep(newSelectedValues, valueItem.split(' > '), !recLookup(newSelectedValues, valueItem.split(' > '), TREELIST_VALUES_PATH_SEPARATOR), true);
+    });
+    valueToSet = newSelectedValues;
+  }
+  return valueToSet;
+};
+var TreeList = {
+  name: 'TreeList',
+  props: {
+    selectedValue: types.selectedValue,
+    error: types.title,
+    rawData: types.rawData,
+    aggregationData: types.rawData,
+    themePreset: types.themePreset,
+    updateQueryAction: types.funcRequired,
+    setQueryOptions: types.funcRequired,
+    // component props
+    componentId: types.string.isRequired,
+    className: types.string,
+    style: types.style,
+    showRadio: VueTypes.bool.def(false),
+    showCheckbox: types.bool.def(false),
+    mode: VueTypes.oneOf(['single', 'multiple']).def('multiple'),
+    showCount: VueTypes.bool.def(false),
+    showSearch: VueTypes.bool.def(false),
+    showIcon: VueTypes.bool.def(false),
+    icon: types.children,
+    showLeafIcon: VueTypes.bool.def(false),
+    leafIcon: types.children,
+    showLine: VueTypes.bool.def(false),
+    switcherIcon: types.func,
+    render: types.func,
+    renderItem: types.func,
+    innerClass: types.style,
+    placeholder: types.string,
+    title: types.title,
+    isLoading: types.bool,
+    dataField: types.stringArray.isRequired,
+    onQueryChange: types.func,
+    defaultValue: types.stringArray,
+    value: types.stringArray,
+    customQuery: types.func,
+    defaultQuery: types.func,
+    enableAppbase: types.bool,
+    index: types.string,
+    showFilter: types.bool,
+    URLParams: types.bool,
+    filterLabel: types.string,
+    onChange: types.func,
+    onValueChange: types.func,
+    beforeValueChange: types.func,
+    sortBy: types.sortByWithCount.def('count'),
+    onError: types.func,
+    showSwitcherIcon: types.bool.def(true),
+    renderError: types.title,
+    renderNoResults: types.func,
+    loader: types.title,
+    aggergationSize: types.number,
+    endpoint: types.endpoint,
+    queryFormat: types.queryFormatSearch.def('or'),
+    size: types.number.def(100),
+    nestedField: types.string,
+    react: types.react,
+    transformData: types.func,
+    selectAllLabel: types.string,
+    showMissing: VueTypes.bool.def(false),
+    missingLabel: VueTypes.string.def('N/A')
+  },
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      selectedValues: {},
+      searchTerm: '',
+      aggregationData: []
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
+  },
+  created: function created() {
+    var props = this.$props;
+    var componentId = props.componentId;
+    var defaultValue = this.defaultValue || this.value;
+    var currentValueArray = this.selectedValue || defaultValue || [];
+    // update local state for selected values
+    if (currentValueArray.length) {
+      var newSelectedValues = transformValueIntoLocalState(currentValueArray);
+      this.setValue(newSelectedValues, true);
+    }
+
+    // Set custom and default queries in store
+    updateCustomQuery$1(componentId, props, currentValueArray);
+    updateDefaultQuery$1(componentId, props, currentValueArray);
+    this.updateQueryOptions();
+  },
+  mounted: function mounted() {
+    var _this$$props = this.$props,
+      enableAppbase = _this$$props.enableAppbase,
+      index = _this$$props.index;
+    if (!enableAppbase && index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+  },
+  watch: {
+    defaultQuery: function defaultQuery() {
+      this.updateDefaultQuery();
+      this.updateQuery([]);
+    },
+    customQuery: function customQuery() {
+      var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
+      this.updateQuery(valueArray);
+    },
+    sortBy: function sortBy() {
+      this.updateQueryOptions();
+    },
+    dataField: function dataField() {
+      var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
+      this.updateQueryOptions();
+      this.updateQuery(valueArray);
+    },
+    value: function value(newVal, oldVal) {
+      if (!isEqual$1(newVal, oldVal)) {
+        this.setValue(newVal);
+      }
+    },
+    selectedValue: function selectedValue(newVal) {
+      if (!isEqual$1(transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues), newVal)) {
+        var _this$$props2 = this.$props,
+          value = _this$$props2.value,
+          onChange = _this$$props2.onChange;
+        var valueToSet = [];
+        if (Array.isArray(newVal) && newVal.length) {
+          valueToSet = newVal;
+        }
+        if (value === undefined) {
+          this.setValue(valueToSet);
+        } else if (onChange && !isEqual$1(value, valueToSet)) {
+          onChange(valueToSet);
+        }
+      }
+    },
+    aggregationData: function aggregationData(newVal, oldVal) {
+      if (newVal && !isEqual$1(newVal, oldVal)) {
+        this.$data.aggregationData = newVal;
+      }
+    }
+  },
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer$1() {
+      return hasCustomRenderer(this);
+    }
+  },
+  methods: {
+    renderIcon: function renderIcon(isLeafNode) {
+      var _this$$props3 = this.$props,
+        showIcon = _this$$props3.showIcon,
+        showLeafIcon = _this$$props3.showLeafIcon,
+        icon = _this$$props3.icon;
+      if (isLeafNode) {
+        if (!showLeafIcon) return null;
+        var _ref = this.$slots || this.$props,
+          leafIcon = _ref.leafIcon;
+        if (leafIcon) return leafIcon();
+        return createVNode("span", {
+          "role": "img",
+          "aria-label": "file",
+          "class": "--leaf-icon"
+        }, [createVNode("svg", {
+          "viewBox": "64 64 896 896",
+          "focusable": "false",
+          "data-icon": "file",
+          "width": "1em",
+          "height": "1em",
+          "fill": "currentColor",
+          "aria-hidden": "true"
+        }, [createVNode("path", {
+          "d": "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
+        }, null)])]);
+      }
+      if (!showIcon) return null;
+      if (icon) {
+        return icon;
+      }
+      if (this.$slots.icon) {
+        return this.$slots.icon();
+      }
+      return createVNode("span", {
+        "role": "img",
+        "aria-label": "folder-open",
+        "class": "--folder-icon"
+      }, [createVNode("svg", {
+        "viewBox": "64 64 896 896",
+        "focusable": "false",
+        "data-icon": "folder-open",
+        "width": "1em",
+        "height": "1em",
+        "fill": "currentColor",
+        "aria-hidden": "true"
+      }, [createVNode("path", {
+        "d": "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 00-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"
+      }, null)])]);
+    },
+    getTransformedData: function getTransformedData() {
+      var _this$$props4 = this.$props,
+        dataField = _this$$props4.dataField,
+        showSearch = _this$$props4.showSearch;
+      var transformedData = transformRawTreeListData(this.$data.aggregationData, dataField);
+      var filteredData = [];
+      if (showSearch && this.searchTerm) {
+        filteredData = this.filterDataBasedOnSearchTerm(transformedData, '');
+      }
+      return filteredData.length ? filteredData : transformedData;
+    },
+    handleInputChange: function handleInputChange(e) {
+      var value = e.target.value;
+      this.searchTerm = value;
+    },
+    renderSearch: function renderSearch() {
+      var _this$$props5 = this.$props,
+        showSearch = _this$$props5.showSearch,
+        innerClass = _this$$props5.innerClass,
+        placeholder = _this$$props5.placeholder,
+        componentId = _this$$props5.componentId,
+        themePreset = _this$$props5.themePreset;
+      if (showSearch) {
+        return createVNode(Input, {
+          "class": getClassName$2(innerClass, 'input') || null,
+          "onInput": this.handleInputChange,
+          "value": this.searchTerm,
+          "placeholder": placeholder || 'Search',
+          "style": {
+            margin: '0 0 8px'
+          },
+          "aria-label": componentId + "-search",
+          "themePreset": themePreset
+        }, null);
+      }
+      return null;
+    },
+    handleListItemClick: function handleListItemClick(key, parentPath) {
+      var path = key;
+      if (parentPath) {
+        path = "" + parentPath + TREELIST_VALUES_PATH_SEPARATOR + key;
+      }
+      var newSelectedValues = _extends({}, this.selectedValues);
+      if (this.$props.mode === 'single') {
+        newSelectedValues = {};
+        setDeep(newSelectedValues, path.split(TREELIST_VALUES_PATH_SEPARATOR), true, true);
+      } else {
+        var newValue = !recLookup(newSelectedValues, path, TREELIST_VALUES_PATH_SEPARATOR);
+        setDeep(newSelectedValues, path.split(TREELIST_VALUES_PATH_SEPARATOR), newValue, true);
+      }
+      newSelectedValues = sanitizeObject(_extends({}, newSelectedValues));
+      if (this.$props.value === undefined) {
+        this.setValue(newSelectedValues);
+      } else if (this.$props.onChange) {
+        var valueToSet = transformTreeListLocalStateIntoQueryComptaibleFormat(newSelectedValues);
+        this.$props.onChange(valueToSet);
+      }
+    },
+    filterDataBasedOnSearchTerm: function filterDataBasedOnSearchTerm(listArray, parentPath) {
+      var _this = this;
+      if (!(listArray && Array.isArray(listArray) && listArray.length)) {
+        return null;
+      }
+      var result = [];
+      listArray.forEach(function (ele) {
+        var isLeafItem = !ele.list;
+        var newParentPath = ele.key;
+        if (parentPath) {
+          newParentPath = parentPath + "." + ele.key;
+        }
+        var keyHasSearchTerm = replaceDiacritics(ele.key).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm).toLowerCase()) || recLookup(_this.$data.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
+        if (isLeafItem && keyHasSearchTerm) {
+          result.push(_extends({}, ele, {
+            initiallyExpanded: keyHasSearchTerm
+          }));
+        } else if (!isLeafItem) {
+          var filteredChildrenItems = _this.filterDataBasedOnSearchTerm(ele.list, newParentPath);
+          if (keyHasSearchTerm || !!filteredChildrenItems.length) {
+            result.push(_extends({}, ele, {
+              initiallyExpanded: keyHasSearchTerm || !!filteredChildrenItems.length,
+              list: filteredChildrenItems
+            }));
+          }
+        }
+      });
+      return result;
+    },
+    getComponent: function getComponent() {
+      var _this$$props6 = this.$props,
+        rawData = _this$$props6.rawData,
+        error = _this$$props6.error,
+        isLoading = _this$$props6.isLoading;
+      var data = {
+        data: this.getTransformedData(),
+        rawData: rawData,
+        error: error,
+        handleClick: this.handleListItemClick,
+        value: this.$data.selectedValues,
+        loading: isLoading,
+        PATH_SEPARATOR: TREELIST_VALUES_PATH_SEPARATOR
+      };
+      return this.$slots.render(data) || getComponent$1(data, this.$props);
+    },
+    getDefaultQuery: function getDefaultQuery(value) {
+      var _this2 = this;
+      var query = null;
+      var type = 'term';
+      var booleanAggregator = this.$props.queryFormat === 'or' ? 'should' : 'must';
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+      if (value) {
+        var _bool;
+        // adds a sub-query with must as an array of objects for each term/value
+        var queryArray = value.map(function (item) {
+          return {
+            bool: {
+              must: item.split(' > ').map(function (subItem, i) {
+                var _type, _ref2;
+                return _ref2 = {}, _ref2[type] = (_type = {}, _type[_this2.$props.dataField[i]] = subItem, _type), _ref2;
+              })
+            }
+          };
+        });
+        var listQuery = {
+          bool: (_bool = {}, _bool[booleanAggregator] = queryArray, _bool)
+        };
+        query = value.length ? listQuery : null;
+      }
+      if (query && this.$props.nestedField) {
+        return {
+          nested: {
+            path: this.$props.nestedField,
+            query: query
+          }
+        };
+      }
+      return query;
+    },
+    updateQuery: function updateQuery(value) {
+      var customQuery = this.$props.customQuery;
+      var query = this.getDefaultQuery(value);
+      var customQueryOptions;
+      if (customQuery) {
+        var _ref3 = customQuery(value, this.$props) || {};
+        query = _ref3.query;
+        customQueryOptions = getOptionsFromQuery(customQuery(value, this.$props));
+        updateCustomQuery$1(this.$props.componentId, this.$props, value);
+      }
+      this.setQueryOptions(this.$props.componentId, _extends({}, this.generateQueryOptions(), customQueryOptions));
+      this.updateQueryAction({
+        componentId: this.$props.componentId,
+        query: query,
+        value: value,
+        label: this.$props.filterLabel,
+        showFilter: this.$props.showFilter,
+        URLParams: this.$props.URLParams,
+        componentType: componentTypes.treeList
+      });
+    },
+    setValue: function setValue(value, hasMountedParam) {
+      var _this3 = this;
+      if (hasMountedParam === void 0) {
+        hasMountedParam = true;
+      }
+      var finalValues = Array.isArray(value) === false ? transformTreeListLocalStateIntoQueryComptaibleFormat(value) : value;
+      var performUpdate = function performUpdate() {
+        var handleUpdates = function handleUpdates() {
+          _this3.updateQuery(finalValues);
+          if (_this3.$props.onValueChange) _this3.$props.onValueChange(finalValues);
+        };
+        if (hasMountedParam) {
+          _this3.selectedValues = Array.isArray(value) ? transformValueIntoLocalState(value) : value;
+          handleUpdates();
+        } else {
+          handleUpdates();
+        }
+      };
+      checkValueChange$1(this.$props.componentId, finalValues, this.$props.beforeValueChange, performUpdate);
+    },
+    generateQueryOptions: function generateQueryOptions() {
+      var queryOptions = getQueryOptions(this.$props);
+      var valueArray = transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
+      return getAggsQuery(valueArray, queryOptions, this.$props);
+    },
+    updateDefaultQuery: function updateDefaultQuery(queryOptions) {
+      var value = transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
+      // Update default query for RS API
+      updateDefaultQuery$1(this.$props.componentId, this.$props, value);
+      updateInternalQuery(getInternalComponentID(this.$props.componentId), queryOptions, value, this.$props, this.generateQueryOptions(), null);
+    },
+    updateQueryOptions: function updateQueryOptions() {
+      // for a new query due to other changes don't append after to get fresh results
+      var queryOptions = this.generateQueryOptions(this.$props, {}, transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues));
+      if (this.$props.defaultQuery) {
+        // eslint-disable-next-line no-use-before-define
+        this.updateDefaultQuery(queryOptions);
+      } else {
+        this.setQueryOptions(getInternalComponentID(this.$props.componentId), queryOptions);
+      }
+    }
+  },
+  render: function render() {
+    var _this4 = this;
+    var props = this.$props;
+    var style = props.style,
+      className = props.className,
+      mode = props.mode,
+      showLine = props.showLine,
+      renderItem = props.renderItem,
+      showCheckbox = props.showCheckbox,
+      innerClass = props.innerClass,
+      showRadio = props.showRadio,
+      showCount = props.showCount,
+      showSwitcherIcon = props.showSwitcherIcon,
+      switcherIcon = props.switcherIcon,
+      title = props.title,
+      loader = props.loader,
+      renderError = props.renderError;
+    if (this.isLoading) {
+      return (this.$slots.loader ? this.$slots.loader() : loader) || null;
+    }
+    if (this.error) {
+      if (this.$slots.renderError) {
+        return this.$slots.renderError(this.error);
+      }
+      return isFunction$1(renderError) ? renderError(this.error) : renderError;
+    }
+    var transformedData = this.getTransformedData();
+    if (!transformedData || transformedData.length === 0) {
+      return this.$slots.renderNoResults ? this.$slots.renderNoResults() : null;
+    }
+    return createVNode(Container, {
+      "style": style,
+      "class": className
+    }, {
+      "default": function _default() {
+        return [props.title && createVNode(Title, {
+          "class": getClassName$2(innerClass, 'title') || null
+        }, _isSlot$3(title) ? title : {
+          "default": function _default() {
+            return [title];
+          }
+        }), _this4.renderSearch(), _this4.hasCustomRenderer ? _this4.getComponent() : createVNode(HierarchicalMenuComponent, {
+          "key": "initial-node",
+          "listArray": transformedData,
+          "parentPath": "",
+          "isExpanded": true,
+          "listItemProps": {
+            mode: mode,
+            selectedValues: _this4.selectedValues,
+            searchTerm: _this4.searchTerm,
+            showLine: showLine,
+            renderItem: renderItem != null ? renderItem : _this4.$slots.renderItem,
+            handleListItemClick: _this4.handleListItemClick,
+            showCheckbox: showCheckbox,
+            innerClass: innerClass,
+            showRadio: showRadio,
+            renderIcon: _this4.renderIcon,
+            showCount: showCount,
+            showSwitcherIcon: showSwitcherIcon,
+            switcherIcon: switcherIcon != null ? switcherIcon : _this4.$slots.switcherIcon
+          }
+        }, null)];
+      }
+    });
+  }
+};
+var mapStateToProps$2 = function mapStateToProps(state, props) {
+  return {
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    rawData: state.rawData[props.componentId] || {},
+    aggregationData: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId] || {},
+    themePreset: state.config.themePreset,
+    error: state.error[props.componentId],
+    isLoading: state.isLoading[props.componentId],
+    enableAppbase: state.config.enableAppbase
+  };
+};
+var mapDispatchtoProps = {
+  setQueryOptions: setQueryOptions,
+  updateQueryAction: updateQueryAction
+};
+TreeList.hasInternalComponent = function () {
+  return true;
+};
+var TreeListConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps$2, mapDispatchtoProps)(TreeList), {
+  componentType: componentTypes.treeList,
+  internalComponent: TreeList.hasInternalComponent()
+}));
+TreeListConnected.name = TreeList.name;
+TreeListConnected.install = function (Vue) {
+  Vue.component(TreeListConnected.name, TreeListConnected);
+};
+
+// Add componentType for SSR
+TreeListConnected.componentType = componentTypes.treeList;
+
+var RcConnected = PreferencesConsumer({
+  name: 'RcConnected',
+  render: function render() {
+    var component = ReactiveComponent;
+    switch (this.$attrs.componentType) {
+      case componentTypes.reactiveList:
+        component = ReactiveList;
+        break;
+      case componentTypes.searchBox:
+        component = SBConnected;
+        break;
+      // list components
+      case componentTypes.singleList:
+        component = SingleList;
+        break;
+      case componentTypes.multiList:
+        component = MultiList;
+        break;
+      case componentTypes.singleDropdownList:
+        component = SingleDropdownList;
+        break;
+      case componentTypes.multiDropdownList:
+        component = MultiDropdownList;
+        break;
+      // basic components
+      case componentTypes.toggleButton:
+        component = ToggleButton;
+        break;
+      // range components
+      case componentTypes.dynamicRangeSlider:
+        component = DynamicRangeSlider;
+        break;
+      case componentTypes.singleRange:
+        component = SingleRange;
+        break;
+      case componentTypes.multiRange:
+        component = MultiRange;
+        break;
+      case componentTypes.rangeSlider:
+        component = RangeSlider;
+        break;
+      case componentTypes.rangeInput:
+        component = RangeInput;
+        break;
+    }
+    return h(component, null, this.$slots);
+  }
+});
+RcConnected.name = ReactiveComponent.name;
+RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
+// Add componentType for SSR
+RcConnected.componentType = componentTypes.reactiveComponent;
+RcConnected.install = function (Vue) {
+  Vue.component(RcConnected.name, RcConnected);
+};
+
+var components = [ReactiveList, ResultCard, ResultList, ReactiveBase, SBConnected, SingleList, MultiList, SingleRange, MultiRange, RangeSlider, DynamicRangeSlider, ReactiveComponent, RcConnected, SelectedFilters, ToggleButton, SingleDropdownList, MultiDropdownList, StateProvider, RangeInput, TreeListConnected, AIConnected];
+function install (Vue) {
+  components.map(function (component) {
+    Vue.use(component);
+    return null;
+  });
+}
+
+export { AIConnected as A, RcConnected as R, SBConnected as S, TreeListConnected as T, install as i };