@appbaseio/reactivesearch-vue 3.0.6 → 3.1.0-alpha.1

package/dist/es/{install-df2e75f3.js → install-2b5814e0.js}

@@ -97,7 +97,30 @@ var SuggestionItem = {
   name: 'SuggestionItem',
   props: {
     currentValue: types.string,
-    suggestion: types.any
+    suggestion: types.any,
+    innerHTML: types.string.isRequired
+  },
+  data: function data() {
+    return {
+      isOverflowing: false
+    };
+  },
+  methods: {
+    updateOverflowing: function updateOverflowing() {
+      if (this.$refs.container && this.$refs.content) {
+        var _this$$refs = this.$refs,
+          container = _this$$refs.container,
+          content = _this$$refs.content;
+        var containerWidth = container.offsetWidth;
+        var contentWidth = content.scrollWidth;
+        this.isOverflowing = contentWidth > containerWidth;
+      } else {
+        this.isOverflowing = false;
+      }
+    }
+  },
+  mounted: function mounted() {
+    this.updateOverflowing();
   },
   render: function render() {
     var _this = this;
@@ -113,7 +136,11 @@ var SuggestionItem = {
     if (label) {
       // label has highest precedence
       return typeof label === 'string' ? createVNode("div", {
-        "class": "trim"
+        "ref": "container",
+        "class": "trim",
+        "title": this.isOverflowing ? label : ''
+      }, [createVNode("div", {
+        "ref": "content"
       }, [(_category ? false : isPredictiveSuggestion
       // eslint-disable-next-line
       || !!_suggestion_type) ? createVNode(PredictiveSuggestion, {
@@ -123,7 +150,7 @@ var SuggestionItem = {
         "textToHighlight": label,
         "autoEscape": true,
         "highlightStyle": highlightStyle
-      }, null)]) : label;
+      }, null)])]) : label;
     }
     if (title || image || description) {
       return createVNode(Flex, {
@@ -1074,6 +1101,42 @@ var AIFeedback = defineComponent({
   }
 });
 
+// eslint-disable-next-line import/prefer-default-export
+var innerText = function innerText(jsx) {
+  // Empty
+  if (jsx === null || typeof jsx === 'boolean' || typeof jsx === 'undefined') {
+    return '';
+  }
+
+  // Numeric children.
+  if (typeof jsx === 'number') {
+    return jsx.toString();
+  }
+
+  // String literals.
+  if (typeof jsx === 'string') {
+    return jsx;
+  }
+
+  // Array of JSX.
+  if (Array.isArray(jsx)) {
+    // eslint-disable-next-line no-use-before-define
+    return jsx.reduce(reduceJsxToString, '');
+  }
+
+  // Children prop.
+  if (Object.prototype.hasOwnProperty.call(jsx, 'children')) {
+    return innerText(jsx.children);
+  }
+
+  // Default
+  return '';
+};
+innerText["default"] = innerText;
+function reduceJsxToString(previous, current) {
+  return previous + innerText(current);
+}
+
 var _excluded = ["_source"];
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
@@ -1167,6 +1230,7 @@ var SearchBox = defineComponent({
       return this.faqAnswer || this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text;
     },
     parsedSuggestions: function parsedSuggestions() {
+      var _this = this;
       var suggestionsArray = [];
       if (Array.isArray(this.suggestions) && this.suggestions.length) {
         suggestionsArray = [].concat(withClickIds(this.suggestions));
@@ -1185,6 +1249,20 @@ var SearchBox = defineComponent({
         return _extends({}, s, {
           sectionId: s._suggestion_type
         });
+      }).map(function (suggestion) {
+        if (suggestion._suggestion_type === 'document') {
+          // Document suggestions don't have a meaningful label and value
+          var newSuggestion = _extends({}, suggestion);
+          newSuggestion.label = 'For recent document suggestion, please implement a renderItem method to display label.';
+          var renderItem = _this.$slots.renderItem || _this.$props.renderItem;
+          if (typeof renderItem === 'function') {
+            var jsxEl = renderItem(newSuggestion);
+            var innerValue = innerText(jsxEl);
+            newSuggestion.value = xss(innerValue);
+          }
+          return newSuggestion;
+        }
+        return suggestion;
       });
       var sectionsAccumulated = [];
       var sectionisedSuggestions = suggestionsArray.reduce(function (acc, d, currentIndex) {
@@ -1233,6 +1311,12 @@ var SearchBox = defineComponent({
     enablePopularSuggestions: VueTypes.bool.def(false),
     enableRecentSuggestions: VueTypes.bool.def(false),
     enableFAQSuggestions: VueTypes.bool.def(false),
+    enableDocumentSuggestions: VueTypes.bool.def(false),
+    documentSuggestionsConfig: VueTypes.shape({
+      size: VueTypes.number,
+      from: VueTypes.number,
+      maxChars: VueTypes.number
+    }),
     FAQSuggestionsConfig: VueTypes.shape({
       sectionLabel: VueTypes.string,
       size: VueTypes.number
@@ -1301,20 +1385,20 @@ var SearchBox = defineComponent({
     AIUIConfig: types.AIUIConfig
   },
   mounted: function mounted() {
-    var _this = this;
+    var _this2 = this;
     this.listenForFocusShortcuts();
     var dropdownEle = this.$refs[_dropdownULRef];
     if (dropdownEle) {
       var handleScroll = function handleScroll() {
         var scrollTop = dropdownEle.scrollTop;
-        _this.lastScrollTop = scrollTop;
-        if (scrollTop < _this.lastScrollTop) {
+        _this2.lastScrollTop = scrollTop;
+        if (scrollTop < _this2.lastScrollTop) {
           // User is scrolling up
-          clearInterval(_this.scrollTimerRef);
-          _this.isUserScrolling = true;
+          clearInterval(_this2.scrollTimerRef);
+          _this2.isUserScrolling = true;
         }
         // Update lastScrollTop with the current scroll position
-        _this.lastScrollTop = scrollTop;
+        _this2.lastScrollTop = scrollTop;
       };
       dropdownEle.addEventListener('scroll', handleScroll);
     }
@@ -1453,10 +1537,10 @@ var SearchBox = defineComponent({
       }
     },
     isAITyping: function isAITyping(newVal, oldVal) {
-      var _this2 = this;
+      var _this3 = this;
       var scrollAIContainer = function scrollAIContainer() {
-        if (_this2.isUserScrolling) return;
-        var dropdownEle = _this2.$refs[_dropdownULRef];
+        if (_this3.isUserScrolling) return;
+        var dropdownEle = _this3.$refs[_dropdownULRef];
         if (dropdownEle) {
           dropdownEle.scrollTo({
             top: dropdownEle.scrollHeight,
@@ -1566,7 +1650,7 @@ var SearchBox = defineComponent({
       }
     },
     setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue, shouldExecuteQuery) {
-      var _this3 = this;
+      var _this4 = this;
       if (isDefaultValue === void 0) {
         isDefaultValue = false;
       }
@@ -1583,65 +1667,65 @@ var SearchBox = defineComponent({
         shouldExecuteQuery = true;
       }
       var performUpdate = function performUpdate() {
-        if (_this3.$options.isTagsMode && isEqual(value, _this3.selectedTags)) {
+        if (_this4.$options.isTagsMode && isEqual(value, _this4.selectedTags)) {
           return;
         }
-        if (_this3.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
-          if (Array.isArray(_this3.selectedTags) && _this3.selectedTags.length) {
+        if (_this4.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          if (Array.isArray(_this4.selectedTags) && _this4.selectedTags.length) {
             // check if value already present in selectedTags
-            if (typeof value === 'string' && _this3.selectedTags.includes(value)) {
-              _this3.isOpen = false;
+            if (typeof value === 'string' && _this4.selectedTags.includes(value)) {
+              _this4.isOpen = false;
               return;
             }
-            _this3.selectedTags = [].concat(_this3.selectedTags);
+            _this4.selectedTags = [].concat(_this4.selectedTags);
             if (typeof value === 'string' && !!value) {
-              _this3.selectedTags.push(value);
-            } else if (Array.isArray(value) && !isEqual(_this3.selectedTags, value)) {
-              _this3.selectedTags = value;
+              _this4.selectedTags.push(value);
+            } else if (Array.isArray(value) && !isEqual(_this4.selectedTags, value)) {
+              _this4.selectedTags = value;
             }
           } else if (value) {
-            _this3.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+            _this4.selectedTags = typeof value !== 'string' ? value : [].concat(value);
           }
-          _this3.currentValue = '';
+          _this4.currentValue = '';
         } else {
-          _this3.currentValue = decodeHtml(value);
+          _this4.currentValue = decodeHtml(value);
         }
         var queryHandlerValue = value;
-        if (_this3.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
-          queryHandlerValue = Array.isArray(_this3.selectedTags) && _this3.selectedTags.length ? _this3.selectedTags : undefined;
+        if (_this4.$options.isTagsMode && cause === causes.SUGGESTION_SELECT) {
+          queryHandlerValue = Array.isArray(_this4.selectedTags) && _this4.selectedTags.length ? _this4.selectedTags : undefined;
         }
-        if ((_this3.faqAnswer || _this3.faqQuestion) && value === '') {
+        if ((_this4.faqAnswer || _this4.faqQuestion) && value === '') {
           // Empty the previous state
-          _this3.faqAnswer = '';
-          _this3.faqQuestion = '';
-          _this3.showAIScreen = false;
+          _this4.faqAnswer = '';
+          _this4.faqQuestion = '';
+          _this4.showAIScreen = false;
         }
         if (isDefaultValue) {
-          if (_this3.$props.autosuggest) {
+          if (_this4.$props.autosuggest) {
             if (toggleIsOpen) {
-              _this3.isOpen = false;
+              _this4.isOpen = false;
             }
-            if (typeof _this3.currentValue === 'string') _this3.triggerDefaultQuery(_this3.currentValue, props.enableAI && _this3.currentTriggerMode === AI_TRIGGER_MODES.QUESTION && _this3.currentValue.endsWith('?') ? {
+            if (typeof _this4.currentValue === 'string') _this4.triggerDefaultQuery(_this4.currentValue, props.enableAI && _this4.currentTriggerMode === AI_TRIGGER_MODES.QUESTION && _this4.currentValue.endsWith('?') ? {
               enableAI: true
             } : {}, shouldExecuteQuery);
           } // 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 || (_this3.$options.isTagsMode ? _this3.selectedTags.length === 0 : value === '')) {
-              _this3.triggerCustomQuery(queryHandlerValue, _this3.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
+            if (cause === causes.SUGGESTION_SELECT || (_this4.$options.isTagsMode ? _this4.selectedTags.length === 0 : value === '')) {
+              _this4.triggerCustomQuery(queryHandlerValue, _this4.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
             } else {
-              _this3.setValue('', true);
+              _this4.setValue('', true);
             }
           } else if (props.value === undefined || cause === causes.SUGGESTION_SELECT || cause === causes.CLEAR_VALUE) {
-            _this3.showAIScreen = false;
-            _this3.triggerCustomQuery(queryHandlerValue, _this3.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
+            _this4.showAIScreen = false;
+            _this4.triggerCustomQuery(queryHandlerValue, _this4.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
           }
         } else {
           // debounce for handling text while typing
-          _this3.handleTextChange(value, cause);
+          _this4.handleTextChange(value, cause);
         }
-        _this3.$emit('valueChange', value);
-        _this3.$emit('value-change', value);
+        _this4.$emit('valueChange', value);
+        _this4.$emit('value-change', value);
       };
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
@@ -1790,7 +1874,7 @@ var SearchBox = defineComponent({
       this.$emit('key-down', event, this.triggerQuery);
     },
     onInputChange: function onInputChange(e) {
-      var _this4 = this;
+      var _this5 = this;
       var inputValue = e.target.value;
       if (!this.$data.isOpen && this.$props.autosuggest) {
         this.isOpen = true;
@@ -1804,7 +1888,7 @@ var SearchBox = defineComponent({
       } else {
         this.$emit('change', inputValue, function (_ref3) {
           var isOpen = _ref3.isOpen;
-          return _this4.triggerQuery({
+          return _this5.triggerQuery({
             defaultQuery: true,
             customQuery: true,
             value: inputValue,
@@ -1848,7 +1932,7 @@ var SearchBox = defineComponent({
       }
     },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
-      var _this5 = this;
+      var _this6 = this;
       var value = this.$props.value;
       // The state of the suggestion is open by the time it reaches here. i.e. isOpen = true
       // handle when FAQ suggestion is clicked
@@ -1897,10 +1981,10 @@ var SearchBox = defineComponent({
         this.setValue(emitValue, true, this.$props, causes.SUGGESTION_SELECT, false, suggestion._category);
         this.$emit('change', emitValue, function (_ref4) {
           var isOpen = _ref4.isOpen;
-          return _this5.triggerQuery(_extends({
+          return _this6.triggerQuery(_extends({
             isOpen: isOpen,
             value: emitValue
-          }, !_this5.$options.isTagsMode && {
+          }, !_this6.$options.isTagsMode && {
             categoryValue: suggestion._category
           }));
         });
@@ -1940,7 +2024,7 @@ var SearchBox = defineComponent({
       return null;
     },
     renderErrorComponent: function renderErrorComponent(isAIError) {
-      var _this6 = this;
+      var _this7 = this;
       if (isAIError === void 0) {
         isAIError = false;
       }
@@ -1967,7 +2051,7 @@ var SearchBox = defineComponent({
           "themePreset": this.themePreset
         }, {
           "default": function _default() {
-            return [isFunction(renderError) ? renderError(_this6.error) : renderError];
+            return [isFunction(renderError) ? renderError(_this7.error) : renderError];
           }
         });
       }
@@ -2047,7 +2131,7 @@ var SearchBox = defineComponent({
       });
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this7 = this;
+      var _this8 = this;
       var _this$$props2 = this.$props,
         enterButton = _this$$props2.enterButton,
         innerClass = _this$$props2.innerClass;
@@ -2055,12 +2139,12 @@ var SearchBox = defineComponent({
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this7.enterButtonOnClick);
+            return renderEnterButton(_this8.enterButtonOnClick);
           }
           return createVNode(Button, {
             "class": "enter-btn " + getClassName$1(innerClass, 'enter-button'),
             "primary": true,
-            "onClick": _this7.enterButtonOnClick
+            "onClick": _this8.enterButtonOnClick
           }, {
             "default": function _default() {
               return [createTextVNode("Search")];
@@ -2086,7 +2170,7 @@ var SearchBox = defineComponent({
       return '/';
     },
     renderLeftIcons: function renderLeftIcons() {
-      var _this8 = this;
+      var _this9 = this;
       var _slot3;
       var _this$$props3 = this.$props,
         iconPosition = _this$$props3.iconPosition,
@@ -2096,8 +2180,8 @@ var SearchBox = defineComponent({
       }, {
         "default": function _default() {
           return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
-            "onClick": _this8.handleSearchIconClick
-          }, _isSlot(_slot3 = _this8.renderIcon()) ? _slot3 : {
+            "onClick": _this9.handleSearchIconClick
+          }, _isSlot(_slot3 = _this9.renderIcon()) ? _slot3 : {
             "default": function _default() {
               return [_slot3];
             }
@@ -2106,7 +2190,7 @@ var SearchBox = defineComponent({
       })]);
     },
     renderRightIcons: function renderRightIcons() {
-      var _this9 = this;
+      var _this10 = this;
       var _slot4, _slot5, _slot6;
       var _this$$props4 = this.$props,
         iconPosition = _this$$props4.iconPosition,
@@ -2123,29 +2207,29 @@ var SearchBox = defineComponent({
       }, {
         "default": function _default() {
           return [currentValue && showClear && createVNode(IconWrapper, {
-            "onClick": _this9.clearValue,
+            "onClick": _this10.clearValue,
             "showIcon": showIcon,
             "isClearIcon": true
-          }, _isSlot(_slot4 = _this9.renderCancelIcon()) ? _slot4 : {
+          }, _isSlot(_slot4 = _this10.renderCancelIcon()) ? _slot4 : {
             "default": function _default() {
               return [_slot4];
             }
           }), showFocusShortcutsIcon && createVNode(ButtonIconWrapper, {
             "onClick": function onClick(e) {
-              return _this9.focusSearchBox(e);
+              return _this10.focusSearchBox(e);
             }
-          }, _isSlot(_slot5 = _this9.renderShortcut()) ? _slot5 : {
+          }, _isSlot(_slot5 = _this10.renderShortcut()) ? _slot5 : {
             "default": function _default() {
               return [_slot5];
             }
           }), showVoiceSearch && createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this9.handleVoiceResults,
+            "handleResult": _this10.handleVoiceResults,
             "className": getClassName$1(innerClass, 'mic') || null
           }, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
-            "onClick": _this9.handleSearchIconClick
-          }, _isSlot(_slot6 = _this9.renderIcon()) ? _slot6 : {
+            "onClick": _this10.handleSearchIconClick
+          }, _isSlot(_slot6 = _this10.renderIcon()) ? _slot6 : {
             "default": function _default() {
               return [_slot6];
             }
@@ -2164,7 +2248,7 @@ var SearchBox = defineComponent({
       (_this$$refs4 = this.$refs) == null || (_this$$refs4 = _this$$refs4[this.$props.innerRef]) == null || (_this$$refs4 = _this$$refs4.$el) == null ? void 0 : _this$$refs4.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this10 = this;
+      var _this11 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (isEmpty(focusShortcuts)) {
@@ -2179,7 +2263,7 @@ var SearchBox = defineComponent({
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this10.focusSearchBox(event);
+        _this11.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -2189,7 +2273,7 @@ var SearchBox = defineComponent({
         for (var index = 0; index < modifierKeys.length; index += 1) {
           var element = modifierKeys[index];
           if (hotkeys[element]) {
-            _this10.focusSearchBox(event);
+            _this11.focusSearchBox(event);
             break;
           }
         }
@@ -2202,10 +2286,10 @@ var SearchBox = defineComponent({
       this.triggerDefaultQuery(value);
     },
     renderActionIcon: function renderActionIcon(suggestion) {
-      var _this11 = this;
+      var _this12 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this11.onAutofillClick(suggestion);
+        _this12.onAutofillClick(suggestion);
       };
       if (suggestion._suggestion_type === suggestionTypes.Featured) {
         if (suggestion.action === featuredSuggestionsActionTypes.FUNCTION) {
@@ -2228,7 +2312,7 @@ var SearchBox = defineComponent({
       return null;
     },
     renderTag: function renderTag(item) {
-      var _this12 = this;
+      var _this13 = this;
       var innerClass = this.$props.innerClass;
       return createVNode(TagItem, {
         "class": getClassName$1(innerClass, 'selected-tag') || ''
@@ -2239,7 +2323,7 @@ var SearchBox = defineComponent({
             "aria-label": "delete-tag",
             "class": "close-icon",
             "onClick": function onClick() {
-              return _this12.clearTag(item);
+              return _this13.clearTag(item);
             }
           }, [createVNode(CancelSvg, null, null)])];
         }
@@ -2262,7 +2346,7 @@ var SearchBox = defineComponent({
       }
     },
     renderTags: function renderTags() {
-      var _this13 = this;
+      var _this14 = this;
       if (!Array.isArray(this.selectedTags)) {
         return null;
       }
@@ -2276,16 +2360,16 @@ var SearchBox = defineComponent({
       }) : createVNode(TagsContainer, null, {
         "default": function _default() {
           return [tagsList.map(function (item) {
-            return _this13.renderTag(item);
+            return _this14.renderTag(item);
           }), shouldRenderClearAllTag && createVNode(TagItem, {
-            "class": getClassName$1(_this13.$props.innerClass, 'selected-tag') || ''
+            "class": getClassName$1(_this14.$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": _this13.clearAllTags
+                "onClick": _this14.clearAllTags
               }, [createVNode(CancelSvg, null, null)])];
             }
           })];
@@ -2293,13 +2377,13 @@ var SearchBox = defineComponent({
       });
     },
     getAISourceObjects: function getAISourceObjects() {
-      var _this14 = this;
+      var _this15 = this;
       var sourceObjects = [];
       if (!this.AIResponse) return sourceObjects;
       var docIds = this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [];
       if (this.initialHits) {
         docIds.forEach(function (id) {
-          var foundSourceObj = _this14.initialHits.find(function (hit) {
+          var foundSourceObj = _this15.initialHits.find(function (hit) {
             return hit._id === id;
           }) || {};
           if (foundSourceObj) {
@@ -2333,7 +2417,7 @@ var SearchBox = defineComponent({
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
       var _slot8;
-      var _this15 = this;
+      var _this16 = this;
       var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
         AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
       var _ref6 = AIUIConfig || {},
@@ -2342,11 +2426,11 @@ var SearchBox = defineComponent({
         _ref6$onSourceClick = _ref6.onSourceClick,
         onSourceClick = _ref6$onSourceClick === void 0 ? function () {} : _ref6$onSourceClick;
       var renderSourceDocumentLabel = function renderSourceDocumentLabel(sourceObj) {
-        if (_this15.$props.AIUIConfig && _this15.$props.AIUIConfig.renderSourceDocument) {
-          return _this15.$props.AIUIConfig.renderSourceDocument(sourceObj);
+        if (_this16.$props.AIUIConfig && _this16.$props.AIUIConfig.renderSourceDocument) {
+          return _this16.$props.AIUIConfig.renderSourceDocument(sourceObj);
         }
-        if (_this15.$slots.renderSourceDocument) {
-          return _this15.$slots.renderSourceDocument(sourceObj);
+        if (_this16.$slots.renderSourceDocument) {
+          return _this16.$slots.renderSourceDocument(sourceObj);
         }
         return sourceObj._id;
       };
@@ -2354,10 +2438,10 @@ var SearchBox = defineComponent({
         "themePreset": this.$props.themePreset
       }, {
         "default": function _default() {
-          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot8 = _this15.getAISourceObjects().map(function (el) {
+          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot8 = _this16.getAISourceObjects().map(function (el) {
             var _slot7;
             return createVNode(Button, {
-              "class": "--ai-source-tag " + (getClassName$1(_this15.$props.innerClass, 'ai-source-tag') || ''),
+              "class": "--ai-source-tag " + (getClassName$1(_this16.$props.innerClass, 'ai-source-tag') || ''),
               "info": true,
               "onClick": function onClick() {
                 return onSourceClick && onSourceClick(el);
@@ -2376,7 +2460,7 @@ var SearchBox = defineComponent({
       }) : null;
     },
     renderAIScreen: function renderAIScreen() {
-      var _this16 = this;
+      var _this17 = this;
       var customAIRenderer = this.$props.renderAIAnswer || this.$slots.renderAIAnswer;
       if (customAIRenderer) {
         return customAIRenderer({
@@ -2400,11 +2484,11 @@ var SearchBox = defineComponent({
         "hideUI": this.isAIResponseLoading || this.isLoading || !this.sessionIdFromStore,
         "key": this.sessionIdFromStore,
         "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-          _this16.feedbackState = {
+          _this17.feedbackState = {
             isRecorded: true,
             feedbackType: useful ? 'positive' : 'negative'
           };
-          _this16.recordAISessionUsefulness(_this16.sessionIdFromStore, {
+          _this17.recordAISessionUsefulness(_this17.sessionIdFromStore, {
             useful: useful,
             reason: reason
           });
@@ -2439,7 +2523,7 @@ var SearchBox = defineComponent({
       });
     },
     renderAskButtonElement: function renderAskButtonElement() {
-      var _this17 = this;
+      var _this18 = this;
       var _this$$props5 = this.$props,
         AIUIConfig = _this$$props5.AIUIConfig,
         innerClass = _this$$props5.innerClass;
@@ -2449,12 +2533,12 @@ var SearchBox = defineComponent({
       if (askButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderAskButton) {
-            return renderAskButton(_this17.askButtonOnClick);
+            return renderAskButton(_this18.askButtonOnClick);
           }
           return createVNode(Button, {
             "class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
             "info": true,
-            "onClick": _this17.askButtonOnClick
+            "onClick": _this18.askButtonOnClick
           }, {
             "default": function _default() {
               return [createTextVNode("Ask")];
@@ -2469,7 +2553,7 @@ var SearchBox = defineComponent({
     }
   },
   render: function render() {
-    var _this18 = this;
+    var _this19 = this;
     var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
     var _this$$slots = this.$slots,
       recentSearchesIcon = _this$$slots.recentSearchesIcon,
@@ -2480,17 +2564,17 @@ var SearchBox = defineComponent({
       "class": this.$props.className
     }, {
       "default": function _default() {
-        return [_this18.$props.title && createVNode(Title, {
-          "class": getClassName$1(_this18.$props.innerClass, 'title') || ''
+        return [_this19.$props.title && createVNode(Title, {
+          "class": getClassName$1(_this19.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this18.$props.title];
+            return [_this19.$props.title];
           }
-        }), _this18.$props.autosuggest ? createVNode(Downshift, {
-          "id": _this18.$props.componentId + "-downshift",
-          "handleChange": _this18.onSuggestionSelected,
-          "handleMouseup": _this18.handleStateChange,
-          "isOpen": _this18.$data.isOpen
+        }), _this19.$props.autosuggest ? createVNode(Downshift, {
+          "id": _this19.$props.componentId + "-downshift",
+          "handleChange": _this19.onSuggestionSelected,
+          "handleMouseup": _this19.handleStateChange,
+          "isOpen": _this19.$data.isOpen
         }, {
           "default": function _default(_ref8) {
             var getInputEvents = _ref8.getInputEvents,
@@ -2546,21 +2630,21 @@ var SearchBox = defineComponent({
                 }
               };
               var indexOffset = 0;
-              return createVNode("div", null, [_this18.hasCustomRenderer && _this18.getComponent({
+              return createVNode("div", null, [_this19.hasCustomRenderer && _this19.getComponent({
                 isOpen: isOpen,
                 getItemProps: getItemProps,
                 getItemEvents: getItemEvents,
                 highlightedIndex: highlightedIndex
-              }), _this18.renderErrorComponent(), !_this18.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
-                "class": suggestions(_this18.themePreset, _this18.theme) + " " + getClassName$1(_this18.$props.innerClass, 'list') + " " + searchboxSuggestions(_this18.themePreset, _this18.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
+              }), _this19.renderErrorComponent(), !_this19.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
+                "class": suggestions(_this19.themePreset, _this19.theme) + " " + getClassName$1(_this19.$props.innerClass, 'list') + " " + searchboxSuggestions(_this19.themePreset, _this19.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
                 "ref": _dropdownULRef
-              }, [_this18.showAIScreen && createVNode(SearchBoxAISection, {
-                "themePreset": _this18.$props.themePreset
+              }, [_this19.showAIScreen && createVNode(SearchBoxAISection, {
+                "themePreset": _this19.$props.themePreset
               }, {
                 "default": function _default() {
-                  return [_this18.renderAIScreen(), ' ', _this18.renderErrorComponent(true)];
+                  return [_this19.renderAIScreen(), ' ', _this19.renderErrorComponent(true)];
                 }
-              }), !_this18.showAIScreen && _this18.parsedSuggestions.map(function (item, itemIndex) {
+              }), !_this19.showAIScreen && _this19.parsedSuggestions.map(function (item, itemIndex) {
                 var index = indexOffset + itemIndex;
                 if (Array.isArray(item)) {
                   var sectionHtml = xss(item[0].sectionLabel);
@@ -2569,7 +2653,7 @@ var SearchBox = defineComponent({
                     "key": "section-" + itemIndex,
                     "class": "section-container"
                   }, [sectionHtml ? createVNode("div", {
-                    "class": "section-header " + getClassName$1(_this18.$props.innerClass, 'section-label'),
+                    "class": "section-header " + getClassName$1(_this19.$props.innerClass, 'section-label'),
                     "key": "" + item[0].sectionId,
                     "innerHTML": sectionHtml
                   }, null) : null, createVNode("ul", {
@@ -2589,7 +2673,7 @@ var SearchBox = defineComponent({
                           justifyContent: 'flex-start',
                           alignItems: 'center'
                         },
-                        "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this18.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this18.$props.innerClass, 'suggestion-item'))
+                        "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this19.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this19.$props.innerClass, 'suggestion-item'))
                       }), [renderItem(sectionItem)]);
                     }
                     if (sectionItem._suggestion_type === '_internal_a_i_trigger') {
@@ -2603,9 +2687,9 @@ var SearchBox = defineComponent({
                           justifyContent: 'flex-start',
                           alignItems: 'center'
                         },
-                        "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this18.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this18.$props.innerClass, 'suggestion-item'))
+                        "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this19.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this19.$props.innerClass, 'suggestion-item'))
                       }), [createVNode(SuggestionItem, {
-                        "currentValue": _this18.currentValue,
+                        "currentValue": _this19.currentValue,
                         "suggestion": sectionItem
                       }, null)]);
                     }
@@ -2619,7 +2703,7 @@ var SearchBox = defineComponent({
                         justifyContent: 'flex-start',
                         alignItems: 'center'
                       },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this18.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this18.$props.innerClass, 'suggestion-item'))
+                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this19.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this19.$props.innerClass, 'suggestion-item'))
                     }), [createVNode("div", {
                       "style": {
                         padding: '0 10px 0 0',
@@ -2627,74 +2711,74 @@ var SearchBox = defineComponent({
                       }
                     }, [createVNode(CustomSvg, {
                       "key": sectionItem._suggestion_type + "-" + sectionIndex,
-                      "className": getClassName$1(_this18.$props.innerClass, sectionItem._suggestion_type + "-search-icon") || null,
+                      "className": getClassName$1(_this19.$props.innerClass, sectionItem._suggestion_type + "-search-icon") || null,
                       "icon": getIcon(sectionItem._suggestion_type, sectionItem, suggestionsHaveIcon),
                       "type": sectionItem._suggestion_type + "-search-icon"
                     }, null)]), createVNode(SuggestionItem, {
-                      "currentValue": _this18.currentValue,
+                      "currentValue": _this19.currentValue,
                       "suggestion": sectionItem
-                    }, null), _this18.renderActionIcon(sectionItem)]);
+                    }, null), _this19.renderActionIcon(sectionItem)]);
                   })])]);
                 }
                 return createVNode("div", null, [createTextVNode("No suggestions")]);
-              }), !_this18.showAIScreen && _this18.parsedSuggestions.length && _this18.$props.showSuggestionsFooter ? _this18.suggestionsFooter() : null]) : _this18.renderNoSuggestions(_this18.normalizedSuggestions)]);
+              }), !_this19.showAIScreen && _this19.parsedSuggestions.length && _this19.$props.showSuggestionsFooter ? _this19.suggestionsFooter() : null]) : _this19.renderNoSuggestions(_this19.normalizedSuggestions)]);
             };
             return createVNode("div", {
               "class": suggestionsContainer
             }, [createVNode(InputGroup, {
               "searchBox": true,
               "ref": _inputGroupRef,
-              "isOpen": _this18.$data.isOpen
+              "isOpen": _this19.$data.isOpen
             }, {
               "default": function _default() {
                 return [createVNode(Actions$1, null, {
                   "default": function _default() {
-                    return [_this18.renderInputAddonBefore(), _this18.renderLeftIcons()];
+                    return [_this19.renderInputAddonBefore(), _this19.renderLeftIcons()];
                   }
                 }), createVNode(InputWrapper, null, {
                   "default": function _default() {
                     return [createVNode(TextArea, mergeProps(_transformOn(getInputEvents({
-                      onInput: _this18.onInputChange,
+                      onInput: _this19.onInputChange,
                       onBlur: function onBlur(e) {
-                        _this18.$emit('blur', e, _this18.triggerQuery);
+                        _this19.$emit('blur', e, _this19.triggerQuery);
                       },
-                      onFocus: _this18.handleFocus,
+                      onFocus: _this19.handleFocus,
                       onKeyPress: function onKeyPress(e) {
-                        _this18.$emit('keyPress', e, _this18.triggerQuery);
-                        _this18.$emit('key-press', e, _this18.triggerQuery);
+                        _this19.$emit('keyPress', e, _this19.triggerQuery);
+                        _this19.$emit('key-press', e, _this19.triggerQuery);
                       },
                       onKeyDown: function onKeyDown(e) {
-                        return _this18.handleKeyDown(e, highlightedIndex);
+                        return _this19.handleKeyDown(e, highlightedIndex);
                       },
                       onKeyUp: function onKeyUp(e) {
-                        _this18.$emit('keyUp', e, _this18.triggerQuery);
-                        _this18.$emit('key-up', e, _this18.triggerQuery);
+                        _this19.$emit('keyUp', e, _this19.triggerQuery);
+                        _this19.$emit('key-up', e, _this19.triggerQuery);
                       },
                       onClick: function onClick() {
                         setHighlightedIndex(null);
                       }
                     })), {
                       "searchBox": true,
-                      "isOpen": _this18.$data.isOpen,
-                      "id": _this18.$props.componentId + "-input",
-                      "ref": _this18.$props.innerRef,
-                      "class": getClassName$1(_this18.$props.innerClass, 'input'),
-                      "placeholder": _this18.$props.placeholder,
-                      "autoFocus": _this18.$props.autoFocus
+                      "isOpen": _this19.$data.isOpen,
+                      "id": _this19.$props.componentId + "-input",
+                      "ref": _this19.$props.innerRef,
+                      "class": getClassName$1(_this19.$props.innerClass, 'input'),
+                      "placeholder": _this19.$props.placeholder,
+                      "autoFocus": _this19.$props.autoFocus
                     }, getInputProps({
-                      value: _this18.$data.currentValue === null ? '' : _this18.$data.currentValue
+                      value: _this19.$data.currentValue === null ? '' : _this19.$data.currentValue
                     }), {
-                      "themePreset": _this18.themePreset,
+                      "themePreset": _this19.themePreset,
                       "autocomplete": "off"
                     }), null), !expandSuggestionsContainer && renderSuggestionsDropdown()];
                   }
                 }), createVNode(Actions$1, null, {
                   "default": function _default() {
-                    return [_this18.renderRightIcons(), _this18.renderInputAddonAfter(), _this18.renderAskButtonElement(), _this18.renderEnterButtonElement()];
+                    return [_this19.renderRightIcons(), _this19.renderInputAddonAfter(), _this19.renderAskButtonElement(), _this19.renderEnterButtonElement()];
                   }
                 })];
               }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this18.renderTags()]);
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this19.renderTags()]);
           }
         }) : createVNode("div", {
           "class": suggestionsContainer
@@ -2705,43 +2789,43 @@ var SearchBox = defineComponent({
           "default": function _default() {
             return [createVNode(Actions$1, null, {
               "default": function _default() {
-                return [_this18.renderInputAddonBefore(), _this18.renderLeftIcons()];
+                return [_this19.renderInputAddonBefore(), _this19.renderLeftIcons()];
               }
             }), createVNode(InputWrapper, null, {
               "default": function _default() {
                 return [createVNode(TextArea, mergeProps(_transformOn({
                   blur: function blur(e) {
-                    _this18.$emit('blur', e, _this18.triggerQuery);
+                    _this19.$emit('blur', e, _this19.triggerQuery);
                   },
                   keypress: function keypress(e) {
-                    _this18.$emit('keyPress', e, _this18.triggerQuery);
-                    _this18.$emit('key-press', e, _this18.triggerQuery);
+                    _this19.$emit('keyPress', e, _this19.triggerQuery);
+                    _this19.$emit('key-press', e, _this19.triggerQuery);
                   },
-                  input: _this18.onInputChange,
+                  input: _this19.onInputChange,
                   focus: function focus(e) {
-                    _this18.$emit('focus', e, _this18.triggerQuery);
+                    _this19.$emit('focus', e, _this19.triggerQuery);
                   },
-                  keydown: _this18.handleKeyDown,
+                  keydown: _this19.handleKeyDown,
                   keyup: function keyup(e) {
-                    _this18.$emit('keyUp', e, _this18.triggerQuery);
-                    _this18.$emit('key-up', e, _this18.triggerQuery);
+                    _this19.$emit('keyUp', e, _this19.triggerQuery);
+                    _this19.$emit('key-up', e, _this19.triggerQuery);
                   }
                 }), {
                   "searchBox": true,
-                  "class": getClassName$1(_this18.$props.innerClass, 'input') || '',
-                  "placeholder": _this18.$props.placeholder,
-                  "autofocus": _this18.$props.autoFocus,
-                  "value": _this18.$data.currentValue ? _this18.$data.currentValue : '',
-                  "iconPosition": _this18.$props.iconPosition,
-                  "showIcon": _this18.$props.showIcon,
-                  "showClear": _this18.$props.showClear,
-                  "ref": _this18.$props.innerRef,
-                  "themePreset": _this18.themePreset
+                  "class": getClassName$1(_this19.$props.innerClass, 'input') || '',
+                  "placeholder": _this19.$props.placeholder,
+                  "autofocus": _this19.$props.autoFocus,
+                  "value": _this19.$data.currentValue ? _this19.$data.currentValue : '',
+                  "iconPosition": _this19.$props.iconPosition,
+                  "showIcon": _this19.$props.showIcon,
+                  "showClear": _this19.$props.showClear,
+                  "ref": _this19.$props.innerRef,
+                  "themePreset": _this19.themePreset
                 }), null)];
               }
             }), createVNode(Actions$1, null, {
               "default": function _default() {
-                return [_this18.renderRightIcons(), _this18.renderInputAddonAfter(), _this18.renderEnterButtonElement()];
+                return [_this19.renderRightIcons(), _this19.renderInputAddonAfter(), _this19.renderEnterButtonElement()];
               }
             })];
           }