@appbaseio/reactivesearch-vue 3.0.0-rc.7.1 → 3.0.0-rc.8

package/dist/es/{install-af4c53c4.js → install-f4f2557b.js}

@@ -21,10 +21,10 @@ 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 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-bede2a41.js';
-import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, a as suggestions, b as searchboxSuggestions } from './Input-4376ac1f.js';
+import xss from 'xss';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, B as ButtonIconWrapper, D as Downshift, b as InputWrapper } from './DropDown-8075451b.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-4cd74b38.js';
 import { C as Container } from './Container-d00219f7.js';
 import Highlight from 'vue-highlight-words';
 import { fetchAIResponse, createAISession } from '@appbaseio/reactivecore/lib/actions/query';
@@ -49,7 +49,11 @@ 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\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\n\t", "\n};\n"])), function (props) {
+var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  \tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\n\t", "\n\t", "\n\t};\n"])), function (_ref) {
+  var theme = _ref.theme,
+    searchBox = _ref.searchBox;
+  return searchBox && "background-color: " + (theme.colors.backgroundColor || '#fafafa') + ";\n\t\tcolor: " + (theme.colors.textColor || '#fff') + ";\n\n\t\t&:focus-within {\n\t\t\tbackground-color: " + (theme.colors.backgroundColor || '#fff') + ";\n\t\t}";
+}, function (props) {
   return props.isOpen && 'box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px;';
 });
 InputGroup.defaultProps = {
@@ -781,8 +785,11 @@ var _templateObject$4, _templateObject2;
 var TagsContainer = styled('div')(_templateObject$4 || (_templateObject$4 = _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$5, _templateObject2$1, _templateObject3;
-var skeletonAnimation = keyframes(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n"])));
+var _templateObject$5;
+var AutosuggestFooterContainer = styled('div')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: #8792a2;\n\tbackground: #f7fafc;\n\tpadding: 10px;\n\theight: 40px;\n"])));
+
+var _templateObject$6, _templateObject2$1, _templateObject3;
+var skeletonAnimation = keyframes(_templateObject$6 || (_templateObject$6 = _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({
@@ -796,8 +803,8 @@ var HorizontalSkeletonLoader = defineComponent({
   }
 });
 
-var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var Chatbox = styled('div')(_templateObject$6 || (_templateObject$6 = _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) {
+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"])), 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) {
@@ -872,8 +879,8 @@ var MessageInput = styled(TextArea)(_templateObject9 || (_templateObject9 = _tag
 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\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t}\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$7, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
-var fadeInFromBottom = keyframes(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var _templateObject$8, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
+var fadeInFromBottom = keyframes(_templateObject$8 || (_templateObject$8 = _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,
@@ -1069,9 +1076,6 @@ var AIFeedback = defineComponent({
   }
 });
 
-var _templateObject$8;
-var AutosuggestFooterContainer = styled('div')(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: #8792a2;\n\tbackground: #f7fafc;\n\tpadding: 10px;\n\theight: 40px;\n"])));
-
 var _excluded = ["_source"];
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
@@ -1108,8 +1112,7 @@ var SearchBox = defineComponent({
       showAIScreen: false,
       showAIScreenFooter: false,
       showFeedbackComponent: false,
-      feedbackState: null,
-      prefilledAIAnswer: ''
+      feedbackState: null
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -1151,22 +1154,11 @@ var SearchBox = defineComponent({
     stats: function stats() {
       return getResultStats(this);
     },
-    mergedAIAnswer: function mergedAIAnswer() {
-      return this.prefilledAIAnswer || this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text;
-    },
     parsedSuggestions: function parsedSuggestions() {
       var suggestionsArray = [];
       if (Array.isArray(this.suggestions) && this.suggestions.length) {
         suggestionsArray = [].concat(withClickIds(this.suggestions));
       }
-      suggestionsArray = suggestionsArray.map(function (s) {
-        if (s.sectionId) {
-          return s;
-        }
-        return _extends({}, s, {
-          sectionId: s._suggestion_type
-        });
-      });
       var sectionsAccumulated = [];
       var sectionisedSuggestions = suggestionsArray.reduce(function (acc, d, currentIndex) {
         if (sectionsAccumulated.includes(d.sectionId)) return acc;
@@ -1212,11 +1204,6 @@ var SearchBox = defineComponent({
     enableQuerySuggestions: VueTypes.bool.def(false),
     enablePopularSuggestions: VueTypes.bool.def(false),
     enableRecentSuggestions: VueTypes.bool.def(false),
-    enableFAQSuggestions: VueTypes.bool.def(false),
-    FAQSuggestionsConfig: VueTypes.shape({
-      sectionLabel: VueTypes.string,
-      size: VueTypes.number
-    }),
     fieldWeights: types.fieldWeights,
     filterLabel: types.string,
     fuzziness: types.fuzziness,
@@ -1453,7 +1440,7 @@ var SearchBox = defineComponent({
         resultStats: this.stats,
         AIData: {
           question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
-          answer: this.mergedAIAnswerc,
+          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(),
@@ -1484,7 +1471,7 @@ var SearchBox = defineComponent({
         this.onValueSelectedHandler(currentValue, causes.SEARCH_ICON_CLICK);
       }
     },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue, shouldExecuteQuery) {
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
       var _this2 = this;
       if (isDefaultValue === void 0) {
         isDefaultValue = false;
@@ -1498,9 +1485,6 @@ var SearchBox = defineComponent({
       if (categoryValue === void 0) {
         categoryValue = undefined;
       }
-      if (shouldExecuteQuery === void 0) {
-        shouldExecuteQuery = true;
-      }
       var performUpdate = function performUpdate() {
         if (_this2.$options.isTagsMode && isEqual(value, _this2.selectedTags)) {
           return;
@@ -1536,18 +1520,17 @@ var SearchBox = defineComponent({
             }
             if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
               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 || (_this2.$options.isTagsMode ? _this2.selectedTags.length === 0 : value === '')) {
-              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
+              _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.showAIScreen = false;
-            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
+            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
           }
         } else {
           // debounce for handling text while typing
@@ -1558,13 +1541,10 @@ var SearchBox = defineComponent({
       };
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
-    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta, shouldExecuteQuery) {
+    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta) {
       if (meta === void 0) {
         meta = {};
       }
-      if (shouldExecuteQuery === void 0) {
-        shouldExecuteQuery = true;
-      }
       if (!this.$props.autosuggest) {
         return;
       }
@@ -1585,15 +1565,12 @@ var SearchBox = defineComponent({
         value: value,
         componentType: componentTypes.searchBox,
         meta: meta
-      }, shouldExecuteQuery);
+      });
     },
-    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue, shouldExecuteQuery) {
+    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
       if (categoryValue === void 0) {
         categoryValue = undefined;
       }
-      if (shouldExecuteQuery === void 0) {
-        shouldExecuteQuery = true;
-      }
       var _this$$props = this.$props,
         customQuery = _this$$props.customQuery,
         filterLabel = _this$$props.filterLabel,
@@ -1622,7 +1599,7 @@ var SearchBox = defineComponent({
         URLParams: URLParams,
         componentType: componentTypes.searchBox,
         category: categoryValue
-      }, shouldExecuteQuery);
+      });
     },
     handleFocus: function handleFocus(event) {
       if (this.$props.autosuggest) {
@@ -1757,14 +1734,6 @@ var SearchBox = defineComponent({
     },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
       var _this4 = this;
-      // handle when FAQ suggestion is clicked
-      if (suggestion && suggestion._suggestion_type === suggestionTypes.FAQ) {
-        this.prefilledAIAnswer = suggestion._answer;
-        this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT, true, false, suggestion._category, false);
-        this.isOpen = true;
-        this.showAIScreen = true;
-        return;
-      }
       if (!this.$props.enableAI) this.isOpen = false;else {
         this.showAIScreen = true;
       }
@@ -1976,61 +1945,67 @@ var SearchBox = defineComponent({
       }
       return '/';
     },
-    renderIcons: function renderIcons() {
+    renderLeftIcons: function renderLeftIcons() {
       var _this7 = this;
-      var _slot3, _slot4, _slot5, _slot6;
+      var _slot3;
       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,
-        showFocusShortcutsIcon = _this$$props3.showFocusShortcutsIcon;
+        showIcon = _this$$props3.showIcon;
+      return createVNode("div", null, [createVNode(IconGroup, {
+        "groupPosition": "left"
+      }, {
+        "default": function _default() {
+          return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
+            "onClick": _this7.handleSearchIconClick
+          }, _isSlot(_slot3 = _this7.renderIcon()) ? _slot3 : {
+            "default": function _default() {
+              return [_slot3];
+            }
+          })];
+        }
+      })]);
+    },
+    renderRightIcons: function renderRightIcons() {
+      var _this8 = this;
+      var _slot4, _slot5, _slot6;
+      var _this$$props4 = this.$props,
+        iconPosition = _this$$props4.iconPosition,
+        showClear = _this$$props4.showClear,
+        innerClass = _this$$props4.innerClass,
+        getMicInstance = _this$$props4.getMicInstance,
+        showVoiceSearch = _this$$props4.showVoiceSearch,
+        showIcon = _this$$props4.showIcon,
+        showFocusShortcutsIcon = _this$$props4.showFocusShortcutsIcon;
       var renderMic = this.$slots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
       return createVNode("div", null, [createVNode(IconGroup, {
-        "groupPosition": "right",
-        "positionType": "absolute"
+        "groupPosition": "right"
       }, {
         "default": function _default() {
           return [currentValue && showClear && createVNode(IconWrapper, {
-            "onClick": _this7.clearValue,
+            "onClick": _this8.clearValue,
             "showIcon": showIcon,
             "isClearIcon": true
-          }, _isSlot(_slot3 = _this7.renderCancelIcon()) ? _slot3 : {
+          }, _isSlot(_slot4 = _this8.renderCancelIcon()) ? _slot4 : {
             "default": function _default() {
-              return [_slot3];
+              return [_slot4];
             }
           }), showFocusShortcutsIcon && createVNode(ButtonIconWrapper, {
             "onClick": function onClick(e) {
-              return _this7.focusSearchBox(e);
+              return _this8.focusSearchBox(e);
             }
-          }, _isSlot(_slot4 = _this7.renderShortcut()) ? _slot4 : {
+          }, _isSlot(_slot5 = _this8.renderShortcut()) ? _slot5 : {
             "default": function _default() {
-              return [_slot4];
+              return [_slot5];
             }
           }), showVoiceSearch && createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this7.handleVoiceResults,
+            "handleResult": _this8.handleVoiceResults,
             "className": getClassName$1(innerClass, 'mic') || null
           }, null), iconPosition === 'right' && showIcon && createVNode(IconWrapper, {
-            "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
-            "default": function _default() {
-              return [_slot5];
-            }
-          })];
-        }
-      }), createVNode(IconGroup, {
-        "groupPosition": "left",
-        "positionType": "absolute"
-      }, {
-        "default": function _default() {
-          return [iconPosition === 'left' && showIcon && createVNode(IconWrapper, {
-            "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot6 = _this7.renderIcon()) ? _slot6 : {
+            "onClick": _this8.handleSearchIconClick
+          }, _isSlot(_slot6 = _this8.renderIcon()) ? _slot6 : {
             "default": function _default() {
               return [_slot6];
             }
@@ -2049,7 +2024,7 @@ var SearchBox = defineComponent({
       (_this$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$this$$pr = _this$$refs3[this.$props.innerRef]) == null ? void 0 : _this$$refs3$this$$pr.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this8 = this;
+      var _this9 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (isEmpty(focusShortcuts)) {
@@ -2064,7 +2039,7 @@ var SearchBox = defineComponent({
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this8.focusSearchBox(event);
+        _this9.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -2074,7 +2049,7 @@ var SearchBox = defineComponent({
         for (var index = 0; index < modifierKeys.length; index += 1) {
           var element = modifierKeys[index];
           if (hotkeys[element]) {
-            _this8.focusSearchBox(event);
+            _this9.focusSearchBox(event);
             break;
           }
         }
@@ -2087,10 +2062,10 @@ var SearchBox = defineComponent({
       this.triggerDefaultQuery(value);
     },
     renderActionIcon: function renderActionIcon(suggestion) {
-      var _this9 = this;
+      var _this10 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this9.onAutofillClick(suggestion);
+        _this10.onAutofillClick(suggestion);
       };
       if (suggestion._suggestion_type === suggestionTypes.Featured) {
         if (suggestion.action === featuredSuggestionsActionTypes.FUNCTION) {
@@ -2113,7 +2088,7 @@ var SearchBox = defineComponent({
       return null;
     },
     renderTag: function renderTag(item) {
-      var _this10 = this;
+      var _this11 = this;
       var innerClass = this.$props.innerClass;
       return createVNode(TagItem, {
         "class": getClassName$1(innerClass, 'selected-tag') || ''
@@ -2124,7 +2099,7 @@ var SearchBox = defineComponent({
             "aria-label": "delete-tag",
             "class": "close-icon",
             "onClick": function onClick() {
-              return _this10.clearTag(item);
+              return _this11.clearTag(item);
             }
           }, [createVNode(CancelSvg, null, null)])];
         }
@@ -2147,7 +2122,7 @@ var SearchBox = defineComponent({
       }
     },
     renderTags: function renderTags() {
-      var _this11 = this;
+      var _this12 = this;
       if (!Array.isArray(this.selectedTags)) {
         return null;
       }
@@ -2161,16 +2136,16 @@ var SearchBox = defineComponent({
       }) : createVNode(TagsContainer, null, {
         "default": function _default() {
           return [tagsList.map(function (item) {
-            return _this11.renderTag(item);
+            return _this12.renderTag(item);
           }), shouldRenderClearAllTag && createVNode(TagItem, {
-            "class": getClassName$1(_this11.$props.innerClass, 'selected-tag') || ''
+            "class": getClassName$1(_this12.$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
+                "onClick": _this12.clearAllTags
               }, [createVNode(CancelSvg, null, null)])];
             }
           })];
@@ -2218,7 +2193,7 @@ var SearchBox = defineComponent({
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
       var _slot7;
-      var _this12 = this;
+      var _this13 = this;
       var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
         AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
       var _ref6 = AIUIConfig || {},
@@ -2232,9 +2207,9 @@ var SearchBox = defineComponent({
         "themePreset": this.$props.themePreset
       }, {
         "default": function _default() {
-          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot7 = _this12.getAISourceObjects().map(function (el) {
+          return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot7 = _this13.getAISourceObjects().map(function (el) {
             return createVNode(Button, {
-              "class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
+              "class": "--ai-source-tag " + (getClassName$1(_this13.$props.innerClass, 'ai-source-tag') || ''),
               "title": el[sourceDocumentLabel],
               "info": true,
               "onClick": function onClick() {
@@ -2254,12 +2229,12 @@ var SearchBox = defineComponent({
       }) : null;
     },
     renderAIScreen: function renderAIScreen() {
-      var _this13 = this;
+      var _this14 = 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.mergedAIAnswer,
+          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(),
@@ -2270,7 +2245,7 @@ var SearchBox = defineComponent({
         return this.renderAIScreenLoader();
       }
       return createVNode("div", null, [createVNode(Answer, {
-        "innerHTML": md.render(this.mergedAIAnswer)
+        "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, {
@@ -2278,11 +2253,11 @@ var SearchBox = defineComponent({
         "hideUI": this.isAIResponseLoading || this.isLoading || !this.sessionIdFromStore,
         "key": this.sessionIdFromStore,
         "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-          _this13.feedbackState = {
+          _this14.feedbackState = {
             isRecorded: true,
             feedbackType: useful ? 'positive' : 'negative'
           };
-          _this13.recordAISessionUsefulness(_this13.sessionIdFromStore, {
+          _this14.recordAISessionUsefulness(_this14.sessionIdFromStore, {
             useful: useful,
             reason: reason
           });
@@ -2317,22 +2292,22 @@ var SearchBox = defineComponent({
       });
     },
     renderAskButtonElement: function renderAskButtonElement() {
-      var _this14 = this;
-      var _this$$props4 = this.$props,
-        AIUIConfig = _this$$props4.AIUIConfig,
-        innerClass = _this$$props4.innerClass;
+      var _this15 = this;
+      var _this$$props5 = this.$props,
+        AIUIConfig = _this$$props5.AIUIConfig,
+        innerClass = _this$$props5.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 renderAskButton(_this15.askButtonOnClick);
           }
           return createVNode(Button, {
             "class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
             "info": true,
-            "onClick": _this14.askButtonOnClick
+            "onClick": _this15.askButtonOnClick
           }, {
             "default": function _default() {
               return [createTextVNode("Ask")];
@@ -2347,7 +2322,7 @@ var SearchBox = defineComponent({
     }
   },
   render: function render() {
-    var _this15 = this;
+    var _this16 = this;
     var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
     var _this$$slots = this.$slots,
       recentSearchesIcon = _this$$slots.recentSearchesIcon,
@@ -2358,17 +2333,17 @@ var SearchBox = defineComponent({
       "class": this.$props.className
     }, {
       "default": function _default() {
-        return [_this15.$props.title && createVNode(Title, {
-          "class": getClassName$1(_this15.$props.innerClass, 'title') || ''
+        return [_this16.$props.title && createVNode(Title, {
+          "class": getClassName$1(_this16.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this15.$props.title];
+            return [_this16.$props.title];
           }
-        }), _this15.$props.autosuggest ? createVNode(Downshift, {
-          "id": _this15.$props.componentId + "-downshift",
-          "handleChange": _this15.onSuggestionSelected,
-          "handleMouseup": _this15.handleStateChange,
-          "isOpen": _this15.$data.isOpen
+        }), _this16.$props.autosuggest ? createVNode(Downshift, {
+          "id": _this16.$props.componentId + "-downshift",
+          "handleChange": _this16.onSuggestionSelected,
+          "handleMouseup": _this16.handleStateChange,
+          "isOpen": _this16.$data.isOpen
         }, {
           "default": function _default(_ref8) {
             var getInputEvents = _ref8.getInputEvents,
@@ -2424,21 +2399,21 @@ var SearchBox = defineComponent({
                 }
               };
               var indexOffset = 0;
-              return createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
+              return createVNode("div", null, [_this16.hasCustomRenderer && _this16.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') + " " + searchboxSuggestions(_this15.themePreset, _this15.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
+              }), _this16.renderErrorComponent(), !_this16.hasCustomRenderer && isOpen && hasSuggestions ? createVNode("ul", {
+                "class": suggestions(_this16.themePreset, _this16.theme) + " " + getClassName$1(_this16.$props.innerClass, 'list') + " " + searchboxSuggestions(_this16.themePreset, _this16.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
                 "ref": _dropdownULRef
-              }, [_this15.showAIScreen && createVNode(SearchBoxAISection, {
-                "themePreset": _this15.$props.themePreset
+              }, [_this16.showAIScreen && createVNode(SearchBoxAISection, {
+                "themePreset": _this16.$props.themePreset
               }, {
                 "default": function _default() {
-                  return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
+                  return [_this16.renderAIScreen(), ' ', _this16.renderErrorComponent(true)];
                 }
-              }), !_this15.showAIScreen && _this15.parsedSuggestions.map(function (item, itemIndex) {
+              }), !_this16.showAIScreen && _this16.parsedSuggestions.map(function (item, itemIndex) {
                 var index = indexOffset + itemIndex;
                 if (Array.isArray(item)) {
                   var sectionHtml = xss(item[0].sectionLabel);
@@ -2446,7 +2421,7 @@ var SearchBox = defineComponent({
                   return createVNode("div", {
                     "class": "section-container"
                   }, [sectionHtml ? createVNode("div", {
-                    "class": "section-header " + getClassName$1(_this15.$props.innerClass, 'section-label'),
+                    "class": "section-header " + getClassName$1(_this16.$props.innerClass, 'section-label'),
                     "key": "" + item[0].sectionId,
                     "innerHTML": sectionHtml
                   }, null) : null, createVNode("ul", {
@@ -2465,7 +2440,7 @@ var SearchBox = defineComponent({
                         justifyContent: 'flex-start',
                         alignItems: 'center'
                       },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this15.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this15.$props.innerClass, 'suggestion-item'))
+                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this16.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this16.$props.innerClass, 'suggestion-item'))
                     }), [renderItem(sectionItem)]) : createVNode("li", mergeProps(getItemProps({
                       item: sectionItem
                     }), _transformOn(getItemEvents({
@@ -2476,115 +2451,132 @@ var SearchBox = defineComponent({
                         justifyContent: 'flex-start',
                         alignItems: 'center'
                       },
-                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this15.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this15.$props.innerClass, 'suggestion-item'))
+                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this16.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this16.$props.innerClass, 'suggestion-item'))
                     }), [createVNode("div", {
                       "style": {
                         padding: '0 10px 0 0',
                         display: 'flex'
                       }
                     }, [createVNode(CustomSvg, {
-                      "key": sectionItem._suggestion_type + "-" + sectionIndex,
-                      "className": getClassName$1(_this15.$props.innerClass, sectionItem._suggestion_type + "-search-icon") || null,
+                      "className": getClassName$1(_this16.$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": _this15.currentValue,
+                      "currentValue": _this16.currentValue,
                       "suggestion": sectionItem
-                    }, null), _this15.renderActionIcon(sectionItem)]);
+                    }, null), _this16.renderActionIcon(sectionItem)]);
                   })])]);
                 }
                 return createVNode("div", null, [createTextVNode("No suggestions")]);
-              }), _this15.$props.showSuggestionsFooter ? _this15.suggestionsFooter() : null]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
+              }), _this16.$props.showSuggestionsFooter ? _this16.suggestionsFooter() : null]) : _this16.renderNoSuggestions(_this16.normalizedSuggestions)]);
             };
             return createVNode("div", {
               "class": suggestionsContainer
             }, [createVNode(InputGroup, {
+              "searchBox": true,
               "ref": _inputGroupRef
             }, {
               "default": function _default() {
-                return [_this15.renderInputAddonBefore(), createVNode(InputWrapper, null, {
+                return [createVNode(Actions$1, null, {
+                  "default": function _default() {
+                    return [_this16.renderInputAddonBefore(), _this16.renderLeftIcons()];
+                  }
+                }), createVNode(InputWrapper, null, {
                   "default": function _default() {
                     return [createVNode(TextArea, mergeProps(_transformOn(getInputEvents({
-                      onInput: _this15.onInputChange,
+                      onInput: _this16.onInputChange,
                       onBlur: function onBlur(e) {
-                        _this15.$emit('blur', e, _this15.triggerQuery);
+                        _this16.$emit('blur', e, _this16.triggerQuery);
                       },
-                      onFocus: _this15.handleFocus,
+                      onFocus: _this16.handleFocus,
                       onKeyPress: function onKeyPress(e) {
-                        _this15.$emit('keyPress', e, _this15.triggerQuery);
-                        _this15.$emit('key-press', e, _this15.triggerQuery);
+                        _this16.$emit('keyPress', e, _this16.triggerQuery);
+                        _this16.$emit('key-press', e, _this16.triggerQuery);
                       },
                       onKeyDown: function onKeyDown(e) {
-                        return _this15.handleKeyDown(e, highlightedIndex);
+                        return _this16.handleKeyDown(e, highlightedIndex);
                       },
                       onKeyUp: function onKeyUp(e) {
-                        _this15.$emit('keyUp', e, _this15.triggerQuery);
-                        _this15.$emit('key-up', e, _this15.triggerQuery);
+                        _this16.$emit('keyUp', e, _this16.triggerQuery);
+                        _this16.$emit('key-up', e, _this16.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,
-                      "searchBox": true
+                      "id": _this16.$props.componentId + "-input",
+                      "showIcon": _this16.$props.showIcon,
+                      "showClear": _this16.$props.showClear,
+                      "iconPosition": _this16.$props.iconPosition,
+                      "ref": _this16.$props.innerRef,
+                      "class": getClassName$1(_this16.$props.innerClass, 'input'),
+                      "placeholder": _this16.$props.placeholder,
+                      "autoFocus": _this16.$props.autoFocus,
+                      "searchBox": true,
+                      "showFocusShortcutsIcon": _this16.$props.showFocusShortcutsIcon,
+                      "showVoiceSearch": _this16.$props.showVoiceSearch
                     }, getInputProps({
-                      value: _this15.$data.currentValue === null ? '' : _this15.$data.currentValue
+                      value: _this16.$data.currentValue === null ? '' : _this16.$data.currentValue
                     }), {
-                      "themePreset": _this15.themePreset,
+                      "themePreset": _this16.themePreset,
                       "autocomplete": "off"
-                    }), null), _this15.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
+                    }), null), !expandSuggestionsContainer && renderSuggestionsDropdown()];
+                  }
+                }), createVNode(Actions$1, null, {
+                  "default": function _default() {
+                    return [_this16.renderRightIcons(), _this16.renderInputAddonAfter(), _this16.renderAskButtonElement(), _this16.renderEnterButtonElement()];
                   }
-                }), _this15.renderInputAddonAfter(), _this15.renderAskButtonElement(), _this15.renderEnterButtonElement()];
+                })];
               }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this15.renderTags()]);
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this16.renderTags()]);
           }
         }) : createVNode("div", {
           "class": suggestionsContainer
         }, [createVNode(InputGroup, {
+          "searchBox": true,
           "ref": _inputGroupRef
         }, {
           "default": function _default() {
-            return [_this15.renderInputAddonBefore(), createVNode(InputWrapper, null, {
+            return [createVNode(Actions$1, null, {
+              "default": function _default() {
+                return [_this16.renderInputAddonBefore(), _this16.renderLeftIcons()];
+              }
+            }), createVNode(InputWrapper, null, {
               "default": function _default() {
                 return [createVNode(TextArea, mergeProps(_transformOn({
                   blur: function blur(e) {
-                    _this15.$emit('blur', e, _this15.triggerQuery);
+                    _this16.$emit('blur', e, _this16.triggerQuery);
                   },
                   keypress: function keypress(e) {
-                    _this15.$emit('keyPress', e, _this15.triggerQuery);
-                    _this15.$emit('key-press', e, _this15.triggerQuery);
+                    _this16.$emit('keyPress', e, _this16.triggerQuery);
+                    _this16.$emit('key-press', e, _this16.triggerQuery);
                   },
-                  input: _this15.onInputChange,
+                  input: _this16.onInputChange,
                   focus: function focus(e) {
-                    _this15.$emit('focus', e, _this15.triggerQuery);
+                    _this16.$emit('focus', e, _this16.triggerQuery);
                   },
-                  keydown: _this15.handleKeyDown,
+                  keydown: _this16.handleKeyDown,
                   keyup: function keyup(e) {
-                    _this15.$emit('keyUp', e, _this15.triggerQuery);
-                    _this15.$emit('key-up', e, _this15.triggerQuery);
+                    _this16.$emit('keyUp', e, _this16.triggerQuery);
+                    _this16.$emit('key-up', e, _this16.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()];
+                  "class": getClassName$1(_this16.$props.innerClass, 'input') || '',
+                  "placeholder": _this16.$props.placeholder,
+                  "autofocus": _this16.$props.autoFocus,
+                  "value": _this16.$data.currentValue ? _this16.$data.currentValue : '',
+                  "iconPosition": _this16.$props.iconPosition,
+                  "showIcon": _this16.$props.showIcon,
+                  "showClear": _this16.$props.showClear,
+                  "ref": _this16.$props.innerRef,
+                  "themePreset": _this16.themePreset
+                }), null)];
+              }
+            }), createVNode(Actions$1, null, {
+              "default": function _default() {
+                return [_this16.renderRightIcons(), _this16.renderInputAddonAfter(), _this16.renderEnterButtonElement()];
               }
-            }), _this15.renderInputAddonAfter(), _this15.renderEnterButtonElement()];
+            })];
           }
         })])];
       }