@appbaseio/reactivesearch-vue 3.0.5 → 3.1.0-alpha

package/dist/es/{install-49240941.js → install-7615abec.js}

@@ -1,10 +1,10 @@
 import { helper, Actions, causes } from '@appbaseio/reactivecore';
-import { SEARCH_COMPONENTS_MODES, AI_TRIGGER_MODES, AI_LOCAL_CACHE_KEY, componentTypes, AI_ROLES, TREELIST_VALUES_PATH_SEPARATOR } from '@appbaseio/reactivecore/lib/utils/constants';
+import { SEARCH_COMPONENTS_MODES, AI_TRIGGER_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 { getObjectFromLocalStorage, getQueryOptions, featuredSuggestionsActionTypes, 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 { getQueryOptions, featuredSuggestionsActionTypes, suggestionTypes, getObjectFromLocalStorage, 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 } from '@appbaseio/vue-emotion';
 import { css, keyframes } from '@emotion/css';
 import { lighten } from 'polished';
@@ -23,8 +23,8 @@ import ReactiveBase from './ReactiveBase.js';
 import hotkeys from 'hotkeys-js';
 import xss from 'xss';
 import { Remarkable } from 'remarkable';
-import { I as IconWrapper, C as CancelSvg, a as IconGroup, B as ButtonIconWrapper, D as Downshift, b as InputWrapper } from './DropDown-6d1dddde.js';
-import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, A as Actions$1, a as suggestions, b as searchboxSuggestions } from './Input-1f6207bc.js';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, B as ButtonIconWrapper, D as Downshift, b as InputWrapper } from './DropDown-48045fde.js';
+import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, A as Actions$1, a as suggestions, b as searchboxSuggestions } from './Input-83dee8c5.js';
 import { C as Container } from './Container-d00219f7.js';
 import Highlight from 'vue-highlight-words';
 import { fetchAIResponse, createAISession } from '@appbaseio/reactivecore/lib/actions/query';
@@ -61,7 +61,7 @@ InputGroup.defaultProps = {
 };
 
 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 transparent;\n  border-radius: 6px;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-weight: 400;\n  padding: 0 11px;\n  position: relative;\n  transition: all 0.3s;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  &:first-of-type {\n    border-right: none;\n  }\n  &:last-of-type {\n    border-left: none;\n  }\n"])));
+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'
 };
@@ -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, {
@@ -805,7 +832,7 @@ var HorizontalSkeletonLoader = defineComponent({
 
 var _templateObject$7, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 var Chatbox = styled('div')(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n\n\t.--trigger-message-wrapper {\n\t\tcursor: pointer;\n\t}\n"])), function (props) {
-  return props.theme && props.theme.colors && props.theme.colors.backgroundColor ? lighten(0.1, props.theme.colors.backgroundColor) : '#fff';
+  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;' : '';
@@ -837,7 +864,7 @@ var resetCSS = function resetCSS(props) {
   // eslint-disable-next-line no-nested-ternary
   props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";\n\t\tborder-radius: 3px;\n\t\tfont-size: 85%;\n\t\tpadding: 0.2em 0.4em;\n\t\tmargin-top: 5px;\n\t\tdisplay: inline-block;\n\t\toverflow: auto;\n\t\twidth: fit-content;\n\t\tmax-width: 100%;\n\t}\n\ncode[class*='language-'],\n\tpre[class*='language-'] {\n\t\tcolor: " + (
   // eslint-disable-next-line no-nested-ternary
-  props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";\n\t\ttext-shadow: none;\n\t}\n\n\tul,\n\tol {\n\t\tlist-style-position: inside;\n\t\tpadding-left: 10px;\n\n\t}\n\n\tli{\n\t\tdisplay: list-item;\n\t\tcursor: default;\n\t\tpadding: initial;\n\n\t\t&:hover{\n\t\t\tbackground-color: initial;\n\t\t}\n\t}\n\tp {\n\t\tmargin: inherit;\n\t}\n\n\t" + (props.themePreset === 'dark' && "a{\n\t\tcolor: cornflowerblue\n\t\t}") + ";\n";
+  props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";\n\t\ttext-shadow: none;\n\t}\n\n\tul,\n\tol {\n\t\tlist-style-position: inside;\n\t\tpadding-left: 10px;\n\n\t}\n\n\tli{\n\t\tdisplay: list-item;\n\t\tcursor: default;\n\t\tpadding: initial;\n\n\t\t&:hover{\n\t\t\tbackground-color: initial;\n\t\t}\n\t}\n\tp {\n\t\tmargin: inherit;\n\t}\n";
 };
 var messageBGColor = function messageBGColor(props) {
   var finalBGColor;
@@ -866,10 +893,16 @@ var Message = styled('div')(_templateObject7 || (_templateObject7 = _taggedTempl
   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", "\n\tpadding-left: 35px;\n"])), function (props) {
+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\tpadding-left: 35px;\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";
@@ -1074,6 +1107,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);
@@ -1114,8 +1183,7 @@ var SearchBox = defineComponent({
       showFeedbackComponent: false,
       feedbackState: null,
       faqAnswer: '',
-      faqQuestion: '',
-      initialHits: null
+      faqQuestion: ''
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -1167,11 +1235,12 @@ 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));
       }
-      if (this.renderTriggerMessage() && this.currentValue) {
+      if (this.renderTriggerMessage() && this.currentValue && !this.isLoading) {
         suggestionsArray.unshift({
           label: this.renderTriggerMessage(),
           value: 'AI_TRIGGER_MESSAGE',
@@ -1185,6 +1254,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 +1316,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,47 +1390,9 @@ var SearchBox = defineComponent({
     AIUIConfig: types.AIUIConfig
   },
   mounted: function mounted() {
-    var _this = 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) {
-          // User is scrolling up
-          clearInterval(_this.scrollTimerRef);
-          _this.isUserScrolling = true;
-        }
-        // Update lastScrollTop with the current scroll position
-        _this.lastScrollTop = scrollTop;
-      };
-      dropdownEle.addEventListener('scroll', handleScroll);
-    }
-  },
-  updated: function updated() {
-    if (this.$props.mode === SEARCH_COMPONENTS_MODES.SELECT && this.$options.isTagsMode === true) {
-      this.$options.isTagsMode = false;
-      this.selectedTags = [];
-    } else if (this.$props.mode === SEARCH_COMPONENTS_MODES.TAG && this.$options.isTagsMode === false) {
-      this.$options.isTagsMode = true;
-    }
   },
   watch: {
-    AIResponse: function AIResponse(newVal) {
-      if (newVal) {
-        if (this.$props.AIUIConfig && this.$props.AIUIConfig.showSourceDocuments && newVal.response && newVal.response.answer && Array.isArray(newVal.response.answer.documentIds)) {
-          this.sourceDocIds = newVal.response.answer.documentIds;
-          var localCache = getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) && getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY)[this.$props.componentId];
-          if (localCache && localCache.meta && localCache.meta.hits && localCache.meta.hits.hits) {
-            this.initialHits = localCache.meta.hits.hits;
-          }
-          if (!this.showAIScreenFooter) {
-            this.showAIScreenFooter = true;
-          }
-        }
-      }
-    },
     dataField: function dataField(newVal, oldVal) {
       if (!isEqual(newVal, oldVal)) {
         this.triggerCustomQuery(this.$data.currentValue);
@@ -1416,9 +1467,6 @@ var SearchBox = defineComponent({
         loading: this.isLoading,
         error: this.isError
       });
-      if (newVal && newVal.hits && newVal.hits.hits) {
-        this.initialHits = newVal.hits.hits;
-      }
     },
     aggregationData: function aggregationData(newVal) {
       this.$emit('on-data', {
@@ -1455,7 +1503,6 @@ var SearchBox = defineComponent({
     isAITyping: function isAITyping(newVal, oldVal) {
       var _this2 = this;
       var scrollAIContainer = function scrollAIContainer() {
-        if (_this2.isUserScrolling) return;
         var dropdownEle = _this2.$refs[_dropdownULRef];
         if (dropdownEle) {
           dropdownEle.scrollTo({
@@ -1465,7 +1512,6 @@ var SearchBox = defineComponent({
         }
       };
       if (!newVal && oldVal) {
-        clearInterval(this.scrollTimerRef);
         this.showAIScreenFooter = true;
         if (this.$props.AIUIConfig && typeof this.$props.AIUIConfig.showFeedback === 'boolean' ? this.$props.AIUIConfig.showFeedback : true) {
           this.showFeedbackComponent = true;
@@ -1474,7 +1520,7 @@ var SearchBox = defineComponent({
           scrollAIContainer();
         }, 500);
       } else if (newVal) {
-        this.scrollTimerRef = setInterval(function () {
+        this.scrollTimerRef = setTimeout(function () {
           scrollAIContainer();
         }, 2000);
       }
@@ -1491,7 +1537,7 @@ var SearchBox = defineComponent({
       }
     },
     currentValue: function currentValue() {
-      this.$nextTick(this.handleTextAreaHeightChange);
+      this.handleTextAreaHeightChange();
     }
   },
   methods: {
@@ -2293,13 +2339,13 @@ var SearchBox = defineComponent({
       });
     },
     getAISourceObjects: function getAISourceObjects() {
-      var _this14 = this;
+      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 (this.initialHits) {
+      if (localCache && localCache.meta && localCache.meta.hits && localCache.meta.hits.hits) {
         docIds.forEach(function (id) {
-          var foundSourceObj = _this14.initialHits.find(function (hit) {
+          var foundSourceObj = localCache.meta.hits.hits.find(function (hit) {
             return hit._id === id;
           }) || {};
           if (foundSourceObj) {
@@ -2333,20 +2379,20 @@ var SearchBox = defineComponent({
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
       var _slot8;
-      var _this15 = this;
+      var _this14 = 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 ? false : _ref6$showSourceDocum,
+        showSourceDocuments = _ref6$showSourceDocum === void 0 ? true : _ref6$showSourceDocum,
         _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 (_this14.$props.AIUIConfig && _this14.$props.AIUIConfig.renderSourceDocument) {
+          return _this14.$props.AIUIConfig.renderSourceDocument(sourceObj);
         }
-        if (_this15.$slots.renderSourceDocument) {
-          return _this15.$slots.renderSourceDocument(sourceObj);
+        if (_this14.$slots.renderSourceDocument) {
+          return _this14.$slots.renderSourceDocument(sourceObj);
         }
         return sourceObj._id;
       };
@@ -2354,10 +2400,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 = _this14.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(_this14.$props.innerClass, 'ai-source-tag') || ''),
               "info": true,
               "onClick": function onClick() {
                 return onSourceClick && onSourceClick(el);
@@ -2376,7 +2422,7 @@ var SearchBox = defineComponent({
       }) : null;
     },
     renderAIScreen: function renderAIScreen() {
-      var _this16 = this;
+      var _this15 = this;
       var customAIRenderer = this.$props.renderAIAnswer || this.$slots.renderAIAnswer;
       if (customAIRenderer) {
         return customAIRenderer({
@@ -2400,11 +2446,11 @@ var SearchBox = defineComponent({
         "hideUI": this.isAIResponseLoading || this.isLoading || !this.sessionIdFromStore,
         "key": this.sessionIdFromStore,
         "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-          _this16.feedbackState = {
+          _this15.feedbackState = {
             isRecorded: true,
             feedbackType: useful ? 'positive' : 'negative'
           };
-          _this16.recordAISessionUsefulness(_this16.sessionIdFromStore, {
+          _this15.recordAISessionUsefulness(_this15.sessionIdFromStore, {
             useful: useful,
             reason: reason
           });
@@ -2439,7 +2485,7 @@ var SearchBox = defineComponent({
       });
     },
     renderAskButtonElement: function renderAskButtonElement() {
-      var _this17 = this;
+      var _this16 = this;
       var _this$$props5 = this.$props,
         AIUIConfig = _this$$props5.AIUIConfig,
         innerClass = _this$$props5.innerClass;
@@ -2449,12 +2495,12 @@ var SearchBox = defineComponent({
       if (askButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderAskButton) {
-            return renderAskButton(_this17.askButtonOnClick);
+            return renderAskButton(_this16.askButtonOnClick);
           }
           return createVNode(Button, {
             "class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
             "info": true,
-            "onClick": _this17.askButtonOnClick
+            "onClick": _this16.askButtonOnClick
           }, {
             "default": function _default() {
               return [createTextVNode("Ask")];
@@ -2469,28 +2515,28 @@ var SearchBox = defineComponent({
     }
   },
   render: function render() {
-    var _this18 = this;
+    var _this17 = this;
     var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
     var _this$$slots = this.$slots,
       recentSearchesIcon = _this$$slots.recentSearchesIcon,
       popularSearchesIcon = _this$$slots.popularSearchesIcon;
-    var hasSuggestions = Array.isArray(this.parsedSuggestions) && this.parsedSuggestions.length;
+    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 [_this18.$props.title && createVNode(Title, {
-          "class": getClassName$1(_this18.$props.innerClass, 'title') || ''
+        return [_this17.$props.title && createVNode(Title, {
+          "class": getClassName$1(_this17.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this18.$props.title];
+            return [_this17.$props.title];
           }
-        }), _this18.$props.autosuggest ? createVNode(Downshift, {
-          "id": _this18.$props.componentId + "-downshift",
-          "handleChange": _this18.onSuggestionSelected,
-          "handleMouseup": _this18.handleStateChange,
-          "isOpen": _this18.$data.isOpen
+        }), _this17.$props.autosuggest ? createVNode(Downshift, {
+          "id": _this17.$props.componentId + "-downshift",
+          "handleChange": _this17.onSuggestionSelected,
+          "handleMouseup": _this17.handleStateChange,
+          "isOpen": _this17.$data.isOpen
         }, {
           "default": function _default(_ref8) {
             var getInputEvents = _ref8.getInputEvents,
@@ -2546,21 +2592,21 @@ var SearchBox = defineComponent({
                 }
               };
               var indexOffset = 0;
-              return createVNode("div", null, [_this18.hasCustomRenderer && _this18.getComponent({
+              return createVNode("div", null, [_this17.hasCustomRenderer && _this17.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",
+              }), _this17.renderErrorComponent(), !_this17.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
+                "class": suggestions(_this17.themePreset, _this17.theme) + " " + getClassName$1(_this17.$props.innerClass, 'list') + " " + searchboxSuggestions(_this17.themePreset, _this17.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
+              }, [_this17.showAIScreen && createVNode(SearchBoxAISection, {
+                "themePreset": _this17.$props.themePreset
               }, {
                 "default": function _default() {
-                  return [_this18.renderAIScreen(), ' ', _this18.renderErrorComponent(true)];
+                  return [_this17.renderAIScreen(), ' ', _this17.renderErrorComponent(true)];
                 }
-              }), !_this18.showAIScreen && _this18.parsedSuggestions.map(function (item, itemIndex) {
+              }), !_this17.showAIScreen && _this17.parsedSuggestions.map(function (item, itemIndex) {
                 var index = indexOffset + itemIndex;
                 if (Array.isArray(item)) {
                   var sectionHtml = xss(item[0].sectionLabel);
@@ -2569,7 +2615,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(_this17.$props.innerClass, 'section-label'),
                     "key": "" + item[0].sectionId,
                     "innerHTML": sectionHtml
                   }, null) : null, createVNode("ul", {
@@ -2589,7 +2635,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(_this17.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this17.$props.innerClass, 'suggestion-item'))
                       }), [renderItem(sectionItem)]);
                     }
                     if (sectionItem._suggestion_type === '_internal_a_i_trigger') {
@@ -2603,9 +2649,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(_this17.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this17.$props.innerClass, 'suggestion-item'))
                       }), [createVNode(SuggestionItem, {
-                        "currentValue": _this18.currentValue,
+                        "currentValue": _this17.currentValue,
                         "suggestion": sectionItem
                       }, null)]);
                     }
@@ -2619,7 +2665,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(_this17.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this17.$props.innerClass, 'suggestion-item'))
                     }), [createVNode("div", {
                       "style": {
                         padding: '0 10px 0 0',
@@ -2627,74 +2673,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(_this17.$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": _this17.currentValue,
                       "suggestion": sectionItem
-                    }, null), _this18.renderActionIcon(sectionItem)]);
+                    }, null), _this17.renderActionIcon(sectionItem)]);
                   })])]);
                 }
                 return createVNode("div", null, [createTextVNode("No suggestions")]);
-              }), !_this18.showAIScreen && _this18.parsedSuggestions.length && _this18.$props.showSuggestionsFooter ? _this18.suggestionsFooter() : null]) : _this18.renderNoSuggestions(_this18.normalizedSuggestions)]);
+              }), !_this17.showAIScreen && _this17.parsedSuggestions.length && _this17.$props.showSuggestionsFooter ? _this17.suggestionsFooter() : null]) : _this17.renderNoSuggestions(_this17.normalizedSuggestions)]);
             };
             return createVNode("div", {
               "class": suggestionsContainer
             }, [createVNode(InputGroup, {
               "searchBox": true,
               "ref": _inputGroupRef,
-              "isOpen": _this18.$data.isOpen
+              "isOpen": _this17.$data.isOpen
             }, {
               "default": function _default() {
                 return [createVNode(Actions$1, null, {
                   "default": function _default() {
-                    return [_this18.renderInputAddonBefore(), _this18.renderLeftIcons()];
+                    return [_this17.renderInputAddonBefore(), _this17.renderLeftIcons()];
                   }
                 }), createVNode(InputWrapper, null, {
                   "default": function _default() {
                     return [createVNode(TextArea, mergeProps(_transformOn(getInputEvents({
-                      onInput: _this18.onInputChange,
+                      onInput: _this17.onInputChange,
                       onBlur: function onBlur(e) {
-                        _this18.$emit('blur', e, _this18.triggerQuery);
+                        _this17.$emit('blur', e, _this17.triggerQuery);
                       },
-                      onFocus: _this18.handleFocus,
+                      onFocus: _this17.handleFocus,
                       onKeyPress: function onKeyPress(e) {
-                        _this18.$emit('keyPress', e, _this18.triggerQuery);
-                        _this18.$emit('key-press', e, _this18.triggerQuery);
+                        _this17.$emit('keyPress', e, _this17.triggerQuery);
+                        _this17.$emit('key-press', e, _this17.triggerQuery);
                       },
                       onKeyDown: function onKeyDown(e) {
-                        return _this18.handleKeyDown(e, highlightedIndex);
+                        return _this17.handleKeyDown(e, highlightedIndex);
                       },
                       onKeyUp: function onKeyUp(e) {
-                        _this18.$emit('keyUp', e, _this18.triggerQuery);
-                        _this18.$emit('key-up', e, _this18.triggerQuery);
+                        _this17.$emit('keyUp', e, _this17.triggerQuery);
+                        _this17.$emit('key-up', e, _this17.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": _this17.$data.isOpen,
+                      "id": _this17.$props.componentId + "-input",
+                      "ref": _this17.$props.innerRef,
+                      "class": getClassName$1(_this17.$props.innerClass, 'input'),
+                      "placeholder": _this17.$props.placeholder,
+                      "autoFocus": _this17.$props.autoFocus
                     }, getInputProps({
-                      value: _this18.$data.currentValue === null ? '' : _this18.$data.currentValue
+                      value: _this17.$data.currentValue === null ? '' : _this17.$data.currentValue
                     }), {
-                      "themePreset": _this18.themePreset,
+                      "themePreset": _this17.themePreset,
                       "autocomplete": "off"
                     }), null), !expandSuggestionsContainer && renderSuggestionsDropdown()];
                   }
                 }), createVNode(Actions$1, null, {
                   "default": function _default() {
-                    return [_this18.renderRightIcons(), _this18.renderInputAddonAfter(), _this18.renderAskButtonElement(), _this18.renderEnterButtonElement()];
+                    return [_this17.renderRightIcons(), _this17.renderInputAddonAfter(), _this17.renderAskButtonElement(), _this17.renderEnterButtonElement()];
                   }
                 })];
               }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this18.renderTags()]);
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this17.renderTags()]);
           }
         }) : createVNode("div", {
           "class": suggestionsContainer
@@ -2705,43 +2751,43 @@ var SearchBox = defineComponent({
           "default": function _default() {
             return [createVNode(Actions$1, null, {
               "default": function _default() {
-                return [_this18.renderInputAddonBefore(), _this18.renderLeftIcons()];
+                return [_this17.renderInputAddonBefore(), _this17.renderLeftIcons()];
               }
             }), createVNode(InputWrapper, null, {
               "default": function _default() {
                 return [createVNode(TextArea, mergeProps(_transformOn({
                   blur: function blur(e) {
-                    _this18.$emit('blur', e, _this18.triggerQuery);
+                    _this17.$emit('blur', e, _this17.triggerQuery);
                   },
                   keypress: function keypress(e) {
-                    _this18.$emit('keyPress', e, _this18.triggerQuery);
-                    _this18.$emit('key-press', e, _this18.triggerQuery);
+                    _this17.$emit('keyPress', e, _this17.triggerQuery);
+                    _this17.$emit('key-press', e, _this17.triggerQuery);
                   },
-                  input: _this18.onInputChange,
+                  input: _this17.onInputChange,
                   focus: function focus(e) {
-                    _this18.$emit('focus', e, _this18.triggerQuery);
+                    _this17.$emit('focus', e, _this17.triggerQuery);
                   },
-                  keydown: _this18.handleKeyDown,
+                  keydown: _this17.handleKeyDown,
                   keyup: function keyup(e) {
-                    _this18.$emit('keyUp', e, _this18.triggerQuery);
-                    _this18.$emit('key-up', e, _this18.triggerQuery);
+                    _this17.$emit('keyUp', e, _this17.triggerQuery);
+                    _this17.$emit('key-up', e, _this17.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(_this17.$props.innerClass, 'input') || '',
+                  "placeholder": _this17.$props.placeholder,
+                  "autofocus": _this17.$props.autoFocus,
+                  "value": _this17.$data.currentValue ? _this17.$data.currentValue : '',
+                  "iconPosition": _this17.$props.iconPosition,
+                  "showIcon": _this17.$props.showIcon,
+                  "showClear": _this17.$props.showClear,
+                  "ref": _this17.$props.innerRef,
+                  "themePreset": _this17.themePreset
                 }), null)];
               }
             }), createVNode(Actions$1, null, {
               "default": function _default() {
-                return [_this18.renderRightIcons(), _this18.renderInputAddonAfter(), _this18.renderEnterButtonElement()];
+                return [_this17.renderRightIcons(), _this17.renderInputAddonAfter(), _this17.renderEnterButtonElement()];
               }
             })];
           }
@@ -2956,14 +3002,12 @@ var AIAnswer = defineComponent({
             message: response.error
           };
         }
+
         // pushing message history so far
         if (messagesHistory && Array.isArray(messagesHistory)) {
           finalMessages.push.apply(finalMessages, messagesHistory.filter(function (msg) {
             return msg.role !== AI_ROLES.SYSTEM;
           }));
-          if (finalMessages[0].role === AI_ROLES.USER) {
-            finalMessages.shift();
-          }
         } else if (response && response.answer && response.answer.text) {
           finalMessages.push({
             role: AI_ROLES.ASSISTANT,