@appbaseio/reactivesearch-vue 3.0.0-rc.9 → 3.0.0

package/dist/cjs/{install-e8141489.js → install-08b8d6e7.js}

@@ -13,21 +13,22 @@ var vueEmotion = require('@appbaseio/vue-emotion');
 var css = require('@emotion/css');
 var polished = require('polished');
 var Button = require('./Button-f96a0570.js');
-var vueTypes = require('./vueTypes-a5f1745e.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 var ReactiveList = require('./ReactiveList.js');
 var transform = require('@appbaseio/reactivecore/lib/utils/transform');
-var index = require('./index-779ed366.js');
-var ComponentWrapper = require('./ComponentWrapper-0b9ffb1a.js');
-var PreferencesConsumer = require('./PreferencesConsumer-85dee673.js');
+var index = require('./index-1f41363f.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
+var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var Title = require('./Title-8802a218.js');
 var ListItem = require('./ListItem-7a682970.js');
 var Flex = require('./Flex-ddde6d26.js');
 var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
 var ReactiveBase = require('./ReactiveBase.js');
 var hotkeys = _interopDefault(require('hotkeys-js'));
+var xss = _interopDefault(require('xss'));
 var remarkable = require('remarkable');
-var DropDown = require('./DropDown-aef75c14.js');
-var Input = require('./Input-56eba499.js');
+var DropDown = require('./DropDown-26666911.js');
+var Input = require('./Input-3ecdb905.js');
 var Container = require('./Container-29f049b2.js');
 var Highlight = _interopDefault(require('vue-highlight-words'));
 var query = require('@appbaseio/reactivecore/lib/actions/query');
@@ -52,7 +53,13 @@ var ResultList = require('./ResultList.js');
 var StateProvider = require('./StateProvider.js');
 
 var _templateObject;
-var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n"])));
+var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  \tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\n\t", "\n\t", "\n\t};\n"])), function (_ref) {
+  var theme = _ref.theme,
+    searchBox = _ref.searchBox;
+  return searchBox && "background-color: " + (theme.colors.backgroundColor || '#fafafa') + ";\n\t\tcolor: " + (theme.colors.textColor || '#fff') + ";\n\n\t\t&:focus-within {\n\t\t\tbackground-color: " + (theme.colors.backgroundColor || '#fff') + ";\n\t\t}";
+}, function (props) {
+  return props.isOpen && "box-shadow: rgb(0 0 0 / 20%) 0px 0px 15px;\n\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;";
+});
 InputGroup.defaultProps = {
   className: 'input-group'
 };
@@ -782,8 +789,11 @@ var _templateObject$4, _templateObject2;
 var TagsContainer = vueEmotion.styled('div')(_templateObject$4 || (_templateObject$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
 var TagItem = vueEmotion.styled('span')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcursor: default;\n\tbox-sizing: border-box;\n\tmargin: 0 4px 4px 0;\n\tcolor: #000000d9;\n\tfont-size: 14px;\n\tfont-variant: tabular-nums;\n\tline-height: 1.5715;\n\tlist-style: none;\n\tfont-feature-settings: 'tnum';\n\tdisplay: inline-block;\n\theight: auto;\n\tpadding: 0 2px 0 7px;\n\tfont-size: 12px;\n\tline-height: 22px;\n\twhite-space: nowrap;\n\tbackground: #fafafa;\n\tborder: 1px solid #d9d9d9;\n\tborder-radius: 2px;\n\topacity: 1;\n\ttransition: all 0.3s;\n\n\tspan.close-icon {\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\theight: 15px;\n\t\t\tposition: relative;\n\t\t\ttop: 4px;\n\t\t\tfill: #262626;\n\t\t}\n\t}\n"])));
 
-var _templateObject$5, _templateObject2$1, _templateObject3;
-var skeletonAnimation = css.keyframes(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n"])));
+var _templateObject$5;
+var AutosuggestFooterContainer = vueEmotion.styled('div')(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: #8792a2;\n\tbackground: #f7fafc;\n\tpadding: 10px;\n\theight: 40px;\n"])));
+
+var _templateObject$6, _templateObject2$1, _templateObject3;
+var skeletonAnimation = css.keyframes(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n"])));
 var SkeletonLoader = vueEmotion.styled('div')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n"])));
 var SkeletonLine = vueEmotion.styled('div')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 20px;\n\tbackground: linear-gradient(\n\t\t90deg,\n\t\trgba(220, 220, 220, 0.5) 25%,\n\t\trgba(240, 240, 240, 0.9) 50%,\n\t\trgba(220, 220, 220, 0.5) 75%\n\t);\n\tbackground-size: 200% 100%;\n\tanimation: ", " 1.5s infinite;\n"])), skeletonAnimation);
 var HorizontalSkeletonLoader = vue.defineComponent({
@@ -797,8 +807,8 @@ var HorizontalSkeletonLoader = vue.defineComponent({
   }
 });
 
-var _templateObject$6, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var Chatbox = vueEmotion.styled('div')(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n"])), function (props) {
+var _templateObject$7, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var Chatbox = vueEmotion.styled('div')(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n\n\t.--trigger-message-wrapper {\n\t\tcursor: pointer;\n\t}\n"])), function (props) {
   return props.theme && props.theme.colors ? props.theme.colors.backgroundColor : '#fff';
 });
 var ChatContainer = vueEmotion.styled('div')(_templateObject2$2 || (_templateObject2$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tposition: relative;\n\t.--ai-answer-error-container {\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tbottom: 0px;\n\t\t", ";\n\t\tz-index: 1;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 100%;\n\n\t\t.--default-error-element {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tpadding: 10px;\n\t\t\tbackground-color: ", ";\n\t\t\tbox-shadow: 0 -5px 5px -2px\n\t\t\t\t", ";\n\n\t\t\tspan {\n\t\t\t\tmargin-bottom: 5px;\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t}\n\t\t}\n\t}\n\n\t", ";\n"])), function (props) {
@@ -823,11 +833,15 @@ var TypingDot = vueEmotion.styled('div')(_templateObject6 || (_templateObject6 =
   return finalColor;
 }, typingDots);
 var resetCSS = function resetCSS(props) {
-  return "\n\thtml,\n\tbody,\n\tdiv,\n\tspan,\n\tapplet,\n\tobject,\n\tiframe,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tp,\n\tblockquote,\n\tpre,\n\ta,\n\tabbr,\n\tacronym,\n\taddress,\n\tbig,\n\tcite,\n\tcode,\n\tdel,\n\tdfn,\n\tem,\n\timg,\n\tins,\n\tkbd,\n\tq,\n\ts,\n\tsamp,\n\tsmall,\n\tstrike,\n\tstrong,\n\tsub,\n\tsup,\n\ttt,\n\tvar,\n\tb,\n\tu,\n\ti,\n\tcenter,\n\tdl,\n\tdt,\n\tdd,\n\tol,\n\tul,\n\tli,\n\tfieldset,\n\tform,\n\tlabel,\n\tlegend,\n\ttable,\n\tcaption,\n\ttbody,\n\ttfoot,\n\tthead,\n\ttr,\n\tth,\n\ttd,\n\tarticle,\n\taside,\n\tcanvas,\n\tdetails,\n\tembed,\n\tfigure,\n\tfigcaption,\n\tfooter,\n\theader,\n\thgroup,\n\tmenu,\n\tnav,\n\toutput,\n\truby,\n\tsection,\n\tsummary,\n\ttime,\n\tmark,\n\taudio,\n\tvideo {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: 0;\n\t\tfont-size: 100%;\n\t\tfont: inherit;\n\t\tvertical-align: baseline;\n\t\toverflow-wrap: anywhere;\n\t}\n\tpre {\n\t\tmargin: 10px auto;\n\t}\n\ttable {\n\t\tmargin: 10px auto;\n\t\tborder-collapse: collapse;\n\t\tborder-spacing: 0;\n\t}\n\ttr {\n\t\tborder-bottom: 1px solid #ccc;\n\t}\n\tth,\n\ttd {\n\t\ttext-align: left;\n\t\tpadding: 4px;\n\t\tborder: 1px solid;\n\t\tborder-collapse: collapse;\n\t}\n\tpre,\n\tcode {\n\t\tpadding: 0.6em 0.4em;\n\t\tbackground: " + (
+  return "\n\thtml,\n\tbody,\n\tdiv,\n\tspan,\n\tapplet,\n\tobject,\n\tiframe,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tp,\n\tblockquote,\n\tpre,\n\ta,\n\tabbr,\n\tacronym,\n\taddress,\n\tbig,\n\tcite,\n\tcode,\n\tdel,\n\tdfn,\n\tem,\n\timg,\n\tins,\n\tkbd,\n\tq,\n\ts,\n\tsamp,\n\tsmall,\n\tstrike,\n\tstrong,\n\tsub,\n\tsup,\n\ttt,\n\tvar,\n\tb,\n\tu,\n\ti,\n\tcenter,\n\tdl,\n\tdt,\n\tdd,\n\tol,\n\tul,\n\tli,\n\tfieldset,\n\tform,\n\tlabel,\n\tlegend,\n\ttable,\n\tcaption,\n\ttbody,\n\ttfoot,\n\tthead,\n\ttr,\n\tth,\n\ttd,\n\tarticle,\n\taside,\n\tcanvas,\n\tdetails,\n\tembed,\n\tfigure,\n\tfigcaption,\n\tfooter,\n\theader,\n\thgroup,\n\tmenu,\n\tnav,\n\toutput,\n\truby,\n\tsection,\n\tsummary,\n\ttime,\n\tmark,\n\taudio,\n\tvideo {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: 0;\n\t\tfont-size: 100%;\n\t\tfont: inherit;\n\t\tvertical-align: baseline;\n\t\toverflow-wrap: anywhere;\n\t}\n\tpre {\n\t\tmargin: 10px auto;\n\t\twhite-space: pre-wrap;\n\n\t}\n\ttable {\n\t\tmargin: 10px auto;\n\t\tborder-collapse: collapse;\n\t\tborder-spacing: 0;\n\t}\n\ttr {\n\t\tborder-bottom: 1px solid #ccc;\n\t}\n\tth,\n\ttd {\n\t\ttext-align: left;\n\t\tpadding: 4px;\n\t\tborder: 1px solid;\n\t\tborder-collapse: collapse;\n\t}\n\tpre,\n\tcode {\n\t\tpadding: 0.6em 0.4em;\n\t\tbackground: " + (
+  // eslint-disable-next-line no-nested-ternary
+  props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryColor : props.theme.colors.borderColor : props.theme.colors.borderColor) + ";\n\n\t}\n\n\tpre{\n\t\tcolor: " + (
+  // eslint-disable-next-line no-nested-ternary
+  props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";}\n\n\tcode {\n\t\tline-height: normal;\n\n\t\tcolor: " + (
   // eslint-disable-next-line no-nested-ternary
-  props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryColor : props.theme.colors.borderColor : props.theme.colors.borderColor) + ";\n\t}\n\n\tcode {\n\t\tline-height: normal;\n\n\t\tcolor: " + (
+  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\tborder-radius: 3px;\n\t\tfont-size: 85%;\n\t\tpadding: 0.2em 0.4em;\n\t\tmargin-top: 5px;\n\t\tdisplay: inline-block;\n\t\toverflow: auto;\n\t\twidth: fit-content;\n\t\tmax-width: 100%;\n\t}\n\tul,\n\tol {\n\t\tlist-style-position: inside;\n\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";
+  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;
@@ -856,7 +870,7 @@ var Message = vueEmotion.styled('div')(_templateObject7 || (_templateObject7 = _
   return resetCSS(props);
 });
 var MessageInputContainer = vueEmotion.styled('form')(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._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 = vueEmotion.styled(Input.TextArea)(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tborder-radius: 5px;\n\tborder: 1px solid #ccc;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\n\t::placeholder {\n\t\tcolor: ", ";\n\t}\n\n\t:-ms-input-placeholder {\n\t\tcolor: ", ";\n\t}\n\n\t::-ms-input-placeholder {\n\t\tcolor: ", ";\n\t}\n\t", "\n"])), function (props) {
+var MessageInput = vueEmotion.styled(Input.TextArea)(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._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;
@@ -873,8 +887,8 @@ var MessageInput = vueEmotion.styled(Input.TextArea)(_templateObject9 || (_templ
 var SendButton = vueEmotion.styled(Button.Button)(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers._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 = vueEmotion.styled('div')(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers._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 = css.keyframes(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._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 = css.keyframes(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 var fadeInFromTop = css.keyframes(_templateObject2$3 || (_templateObject2$3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 var SearchBoxAISection = vueEmotion.styled('div')(_templateObject3$2 || (_templateObject3$2 = _rollupPluginBabelHelpers._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,
@@ -1078,7 +1092,9 @@ var md = new remarkable.Remarkable();
 md.set({
   html: true,
   breaks: true,
-  xhtmlOut: true
+  xhtmlOut: true,
+  linkify: true,
+  linkTarget: '_blank'
 });
 var _dropdownULRef = 'dropdownULRef';
 var _inputGroupRef = 'inputGroupRef';
@@ -1106,7 +1122,9 @@ var SearchBox = vue.defineComponent({
       showAIScreen: false,
       showAIScreenFooter: false,
       showFeedbackComponent: false,
-      feedbackState: null
+      feedbackState: null,
+      faqAnswer: '',
+      faqQuestion: ''
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -1142,11 +1160,55 @@ var SearchBox = vue.defineComponent({
     }
   },
   computed: {
+    currentTriggerMode: function currentTriggerMode() {
+      return this.$props.AIUIConfig && this.$props.AIUIConfig.triggerOn || constants.AI_TRIGGER_MODES.MANUAL;
+    },
     hasCustomRenderer: function hasCustomRenderer() {
       return index.hasCustomRenderer(this);
     },
     stats: function stats() {
       return getResultStats(this);
+    },
+    mergedAIQuestion: function mergedAIQuestion() {
+      return this.faqQuestion || this.AIResponse && this.AIResponse.response && this.AIResponse.response.question;
+    },
+    mergedAIAnswer: function mergedAIAnswer() {
+      return this.faqAnswer || 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));
+      }
+      if (this.renderTriggerMessage() && this.currentValue && !this.isLoading) {
+        suggestionsArray.unshift({
+          label: this.renderTriggerMessage(),
+          value: 'AI_TRIGGER_MESSAGE',
+          _suggestion_type: '_internal_a_i_trigger'
+        });
+      }
+      suggestionsArray = suggestionsArray.map(function (s) {
+        if (s.sectionId) {
+          return s;
+        }
+        return _rollupPluginBabelHelpers._extends({}, s, {
+          sectionId: s._suggestion_type
+        });
+      });
+      var sectionsAccumulated = [];
+      var sectionisedSuggestions = suggestionsArray.reduce(function (acc, d, currentIndex) {
+        if (sectionsAccumulated.includes(d.sectionId)) return acc;
+        if (d.sectionId) {
+          acc[currentIndex] = suggestionsArray.filter(function (g) {
+            return g.sectionId === d.sectionId;
+          });
+          sectionsAccumulated.push(d.sectionId);
+        } else {
+          acc[currentIndex] = d;
+        }
+        return acc;
+      }, {});
+      return Object.values(sectionisedSuggestions);
     }
   },
   props: {
@@ -1156,6 +1218,7 @@ var SearchBox = vue.defineComponent({
     className: VueTypes.string.def(''),
     clearIcon: vueTypes.types.children,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customHighlight: vueTypes.types.func,
     customQuery: vueTypes.types.func,
     defaultQuery: vueTypes.types.func,
@@ -1178,6 +1241,11 @@ var SearchBox = vue.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: vueTypes.types.fieldWeights,
     filterLabel: vueTypes.types.string,
     fuzziness: vueTypes.types.fuzziness,
@@ -1213,12 +1281,20 @@ var SearchBox = vue.defineComponent({
     distinctFieldConfig: vueTypes.types.props,
     //
     focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
+    showFocusShortcutsIcon: VueTypes.bool.def(true),
     addonBefore: VueTypes.any,
     addonAfter: VueTypes.any,
+    showSuggestionsFooter: VueTypes.bool.def(true),
     expandSuggestionsContainer: VueTypes.bool.def(true),
+    renderSuggestionsFooter: VueTypes.func,
     index: VueTypes.string,
     popularSuggestionsConfig: VueTypes.object,
     recentSuggestionsConfig: VueTypes.object,
+    featuredSuggestionsConfig: VueTypes.shape({
+      maxSuggestionsPerSection: VueTypes.number,
+      sectionsOrder: VueTypes.arrayOf(VueTypes.string)
+    }),
+    customEvents: VueTypes.object,
     applyStopwords: VueTypes.bool,
     customStopwords: vueTypes.types.stringArray,
     onData: vueTypes.types.func,
@@ -1293,7 +1369,11 @@ var SearchBox = vue.defineComponent({
         if (this.$options.isTagsMode) {
           cause = reactivecore.causes.SUGGESTION_SELECT;
         }
-        this.setValue(newVal || '', true, this.$props, cause);
+        if (this.$props.value === undefined) {
+          this.setValue(newVal, newVal === '', this.$props, cause, false);
+        } else {
+          this.setValue(newVal || '', true, this.$props, cause);
+        }
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -1381,6 +1461,20 @@ var SearchBox = vue.defineComponent({
     }
   },
   methods: {
+    renderTriggerMessage: function renderTriggerMessage() {
+      if (this.$props.enableAI) {
+        if (this.$props.AIUIConfig && this.$props.AIUIConfig.renderTriggerMessage) {
+          return this.$props.AIUIConfig.renderTriggerMessage;
+        }
+        if (this.$slots.renderTriggerMessage) {
+          return this.$slots.renderTriggerMessage();
+        }
+        if (this.currentTriggerMode === constants.AI_TRIGGER_MODES.MANUAL && (this.$props.AIUIConfig ? !this.$props.AIUIConfig.askButton : true)) {
+          return 'Click to trigger AIAnswer';
+        }
+      }
+      return null;
+    },
     handleText: function handleText(value, cause) {
       if (cause === reactivecore.causes.CLEAR_VALUE) {
         this.triggerCustomQuery(value);
@@ -1405,8 +1499,8 @@ var SearchBox = vue.defineComponent({
         value: currentValue,
         resultStats: this.stats,
         AIData: {
-          question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
-          answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
+          question: this.mergedAIQuestion,
+          answer: this.mergedAIAnswer,
           documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
           showAIScreen: this.showAIScreen,
           sources: this.getAISourceObjects(),
@@ -1437,7 +1531,7 @@ var SearchBox = vue.defineComponent({
         this.onValueSelectedHandler(currentValue, reactivecore.causes.SEARCH_ICON_CLICK);
       }
     },
-    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue, shouldExecuteQuery) {
       var _this2 = this;
       if (isDefaultValue === void 0) {
         isDefaultValue = false;
@@ -1451,6 +1545,9 @@ var SearchBox = vue.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;
@@ -1479,24 +1576,31 @@ var SearchBox = vue.defineComponent({
         if (_this2.$options.isTagsMode && cause === reactivecore.causes.SUGGESTION_SELECT) {
           queryHandlerValue = Array.isArray(_this2.selectedTags) && _this2.selectedTags.length ? _this2.selectedTags : undefined;
         }
+        if ((_this2.faqAnswer || _this2.faqQuestion) && value === '') {
+          // Empty the previous state
+          _this2.faqAnswer = '';
+          _this2.faqQuestion = '';
+          _this2.showAIScreen = false;
+        }
         if (isDefaultValue) {
           if (_this2.$props.autosuggest) {
             if (toggleIsOpen) {
               _this2.isOpen = false;
             }
-            if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
+            if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI && _this2.currentTriggerMode === constants.AI_TRIGGER_MODES.QUESTION && _this2.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 === reactivecore.causes.SUGGESTION_SELECT || (_this2.$options.isTagsMode ? _this2.selectedTags.length === 0 : value === '')) {
-              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
+              _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
             } else {
               _this2.setValue('', true);
             }
           } else if (props.value === undefined || cause === reactivecore.causes.SUGGESTION_SELECT || cause === reactivecore.causes.CLEAR_VALUE) {
-            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
+            _this2.showAIScreen = false;
+            _this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue, shouldExecuteQuery);
           }
         } else {
           // debounce for handling text while typing
@@ -1507,10 +1611,13 @@ var SearchBox = vue.defineComponent({
       };
       checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
     },
-    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta) {
+    triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta, shouldExecuteQuery) {
       if (meta === void 0) {
         meta = {};
       }
+      if (shouldExecuteQuery === void 0) {
+        shouldExecuteQuery = true;
+      }
       if (!this.$props.autosuggest) {
         return;
       }
@@ -1531,12 +1638,15 @@ var SearchBox = vue.defineComponent({
         value: value,
         componentType: constants.componentTypes.searchBox,
         meta: meta
-      });
+      }, shouldExecuteQuery);
     },
-    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
+    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue, shouldExecuteQuery) {
       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,
@@ -1565,7 +1675,7 @@ var SearchBox = vue.defineComponent({
         URLParams: URLParams,
         componentType: constants.componentTypes.searchBox,
         category: categoryValue
-      });
+      }, shouldExecuteQuery);
     },
     handleFocus: function handleFocus(event) {
       if (this.$props.autosuggest) {
@@ -1576,7 +1686,9 @@ var SearchBox = vue.defineComponent({
     handleVoiceResults: function handleVoiceResults(_ref) {
       var results = _ref.results;
       if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
+        var _this$$refs2;
         this.setValue(results[0][0].transcript.trim(), true);
+        (_this$$refs2 = this.$refs) == null || (_this$$refs2 = _this$$refs2[this.$props.innerRef]) == null || (_this$$refs2 = _this$$refs2.$el) == null ? void 0 : _this$$refs2.focus(); // eslint-disable-line
       }
     },
     triggerQuery: function triggerQuery(_ref2) {
@@ -1616,6 +1728,8 @@ var SearchBox = vue.defineComponent({
     clearValue: function clearValue() {
       this.setValue('', false, this.$props, !this.$options.isTagsMode ? reactivecore.causes.CLEAR_VALUE : undefined, false);
       this.onValueSelectedHandler('', !this.$options.isTagsMode ? reactivecore.causes.CLEAR_VALUE : undefined);
+      this.showAIScreen = false;
+      this.isOpen = false;
     },
     handleKeyDown: function handleKeyDown(event, highlightedIndex) {
       if (highlightedIndex === void 0) {
@@ -1628,9 +1742,10 @@ var SearchBox = vue.defineComponent({
         } else if (highlightedIndex === null) {
           this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? reactivecore.causes.SUGGESTION_SELECT : undefined,
           // to handle tags
-          !this.$props.enableAI);
-          if (this.$props.enableAI && !this.showAIScreen) {
+          !(this.$props.enableAI && this.currentTriggerMode === constants.AI_TRIGGER_MODES.QUESTION && event.target.value.endsWith('?')));
+          if (this.$props.enableAI && !this.showAIScreen && this.currentTriggerMode === constants.AI_TRIGGER_MODES.QUESTION && event.target.value.endsWith('?')) {
             this.showAIScreen = true;
+            this.isOpen = true;
           }
           this.onValueSelectedHandler(event.target.value, reactivecore.causes.ENTER_PRESS);
         }
@@ -1651,7 +1766,7 @@ var SearchBox = vue.defineComponent({
       }
       var value = this.$props.value;
       if (value === undefined) {
-        this.setValue(inputValue, false, this.$props, undefined);
+        this.setValue(inputValue, inputValue === '', this.$props, undefined, false);
       } else {
         this.$emit('change', inputValue, function (_ref3) {
           var isOpen = _ref3.isOpen;
@@ -1664,12 +1779,72 @@ var SearchBox = vue.defineComponent({
         }, e);
       }
     },
+    handleFeaturedSuggestionClicked: function handleFeaturedSuggestionClicked(suggestion) {
+      try {
+        var _this$$refs3;
+        if (suggestion.action === helper.featuredSuggestionsActionTypes.NAVIGATE) {
+          var _JSON$parse = JSON.parse(suggestion.subAction),
+            _JSON$parse$target = _JSON$parse.target,
+            target = _JSON$parse$target === void 0 ? '_self' : _JSON$parse$target,
+            _JSON$parse$link = _JSON$parse.link,
+            link = _JSON$parse$link === void 0 ? '/' : _JSON$parse$link;
+          if (typeof window !== 'undefined') {
+            window.open(link, target);
+          }
+        }
+        if (suggestion.action === helper.featuredSuggestionsActionTypes.FUNCTION) {
+          var matchedValues = suggestion.subAction.match(/function\s*\(.*\)(.|\n)*/);
+          var functionStr = matchedValues && matchedValues[0];
+          // eslint-disable-next-line no-new-func
+          var func = new Function("return " + functionStr)();
+          func(suggestion, this.$data.currentValue, this.$props.customEvents);
+        }
+        if (suggestion.action === helper.featuredSuggestionsActionTypes.SELECT) {
+          this.setValue(suggestion.value, true, this.$props, this.$options.isTagsMode.current ? reactivecore.causes.SUGGESTION_SELECT : reactivecore.causes.ENTER_PRESS, false);
+          this.onValueSelectedHandler(suggestion.value, reactivecore.causes.SUGGESTION_SELECT);
+        }
+        // blur is important to close the dropdown
+        // on selecting one of featured suggestions
+        // else Downshift probably is focusing the dropdown
+        // and not letting it close
+        // eslint-disable-next-line no-unused-expressions
+        (_this$$refs3 = this.$refs) == null || (_this$$refs3 = _this$$refs3[this.$props.innerRef]) == null || (_this$$refs3 = _this$$refs3.el) == null ? void 0 : _this$$refs3.blur();
+      } catch (e) {
+        console.error("Error: There was an error parsing the subAction for the featured suggestion with label, \"" + suggestion.label + "\"", e);
+      }
+    },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
       var _this4 = this;
-      if (!this.$props.enableAI) this.isOpen = false;else {
+      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
+      if (suggestion && suggestion._suggestion_type === helper.suggestionTypes.FAQ) {
+        this.currentValue = suggestion.value;
+        // Handle AI
+        // Independent of enableAI.
+        this.faqAnswer = suggestion._answer;
+        this.faqQuestion = suggestion.value;
+        this.isOpen = true;
         this.showAIScreen = true;
+        if (value !== undefined) this.$emit('change', suggestion.value, function () {});
+        this.onValueSelectedHandler(suggestion.value);
+        return;
+      }
+      if (suggestion && suggestion._suggestion_type === '_internal_a_i_trigger') {
+        this.showAIScreen = true;
+        this.askButtonOnClick();
+        return;
+      }
+
+      // handle featured suggestions click event
+      if (suggestion._suggestion_type === helper.suggestionTypes.Featured) {
+        this.handleFeaturedSuggestionClicked(suggestion);
+        // Handle AI
+        if (!this.$props.enableAI) this.isOpen = false;else {
+          this.showAIScreen = true;
+        }
+        return;
       }
-      var value = this.$props.value;
       // Record analytics for selected suggestions
       this.triggerClickAnalytics(suggestion._click_id);
       if (value === undefined) {
@@ -1697,6 +1872,11 @@ var SearchBox = vue.defineComponent({
         });
       }
       this.onValueSelectedHandler(suggestion.value, reactivecore.causes.SUGGESTION_SELECT, suggestion.source);
+
+      // Handle AI
+      if (!this.$props.enableAI) this.isOpen = false;else if (this.currentTriggerMode === constants.AI_TRIGGER_MODES.QUESTION && suggestion.value.endsWith('?')) {
+        this.showAIScreen = true;
+      }
     },
     onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
       if (currentValue === void 0) {
@@ -1825,6 +2005,13 @@ var SearchBox = vue.defineComponent({
         customQuery: true
       });
     },
+    suggestionsFooter: function suggestionsFooter() {
+      return typeof renderSuggestionsFooter === 'function' ? this.$props.renderSuggestionsFooter() : vue.createVNode(AutosuggestFooterContainer, null, {
+        "default": function _default() {
+          return [vue.createVNode("div", null, [vue.createTextVNode("\u2191\u2193 Navigate")]), vue.createVNode("div", null, [vue.createTextVNode("\u21A9 Go")])];
+        }
+      });
+    },
     renderEnterButtonElement: function renderEnterButtonElement() {
       var _this6 = this;
       var _this$$props2 = this.$props,
@@ -1852,71 +2039,98 @@ var SearchBox = vue.defineComponent({
       }
       return null;
     },
-    renderIcons: function renderIcons() {
+    renderShortcut: function renderShortcut() {
+      if (this.$props.focusShortcuts && this.$props.focusShortcuts.length) {
+        var shortcut = this.$props.focusShortcuts[0];
+        shortcut = shortcut.toLowerCase();
+        shortcut = shortcut.replace('shift', '⬆️');
+        shortcut = shortcut.replace('command', 'cmd');
+        shortcut = shortcut.replace('control', 'ctrl');
+        shortcut = shortcut.replace('option', 'alt');
+        return shortcut.toUpperCase();
+      }
+      return '/';
+    },
+    renderLeftIcons: function renderLeftIcons() {
       var _this7 = this;
-      var _slot3, _slot4, _slot5;
+      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;
+      return vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
+        "groupPosition": "left"
+      }, {
+        "default": function _default() {
+          return [iconPosition === 'left' && showIcon && vue.createVNode(DropDown.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 vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
-        "groupPosition": "right",
-        "positionType": "absolute"
+        "groupPosition": "right"
       }, {
         "default": function _default() {
           return [currentValue && showClear && vue.createVNode(DropDown.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 && vue.createVNode(DropDown.ButtonIconWrapper, {
+            "onClick": function onClick(e) {
+              return _this8.focusSearchBox(e);
+            }
+          }, _isSlot(_slot5 = _this8.renderShortcut()) ? _slot5 : {
+            "default": function _default() {
+              return [_slot5];
             }
           }), showVoiceSearch && vue.createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this7.handleVoiceResults,
+            "handleResult": _this8.handleVoiceResults,
             "className": getClassName$1(innerClass, 'mic') || null
           }, null), iconPosition === 'right' && showIcon && vue.createVNode(DropDown.IconWrapper, {
-            "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot4 = _this7.renderIcon()) ? _slot4 : {
-            "default": function _default() {
-              return [_slot4];
-            }
-          })];
-        }
-      }), vue.createVNode(DropDown.IconGroup, {
-        "groupPosition": "left",
-        "positionType": "absolute"
-      }, {
-        "default": function _default() {
-          return [iconPosition === 'left' && showIcon && vue.createVNode(DropDown.IconWrapper, {
-            "onClick": _this7.handleSearchIconClick
-          }, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
+            "onClick": _this8.handleSearchIconClick
+          }, _isSlot(_slot6 = _this8.renderIcon()) ? _slot6 : {
             "default": function _default() {
-              return [_slot5];
+              return [_slot6];
             }
           })];
         }
       })]);
     },
     focusSearchBox: function focusSearchBox(event) {
-      var _this$$refs2, _this$$refs2$this$$pr;
+      var _this$$refs4;
       var elt = event.target || event.srcElement;
       var tagName = elt.tagName;
       if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
         // already in an input
         return;
       }
-      (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.focus(); // eslint-disable-line
+      (_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 _this8 = this;
+      var _this9 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (index.isEmpty(focusShortcuts)) {
@@ -1931,7 +2145,7 @@ var SearchBox = vue.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
@@ -1941,7 +2155,7 @@ var SearchBox = vue.defineComponent({
         for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
           var element = modifierKeys[index$1];
           if (hotkeys[element]) {
-            _this8.focusSearchBox(event);
+            _this9.focusSearchBox(event);
             break;
           }
         }
@@ -1953,19 +2167,34 @@ var SearchBox = vue.defineComponent({
       this.currentValue = index.decodeHtml(value);
       this.triggerDefaultQuery(value);
     },
-    renderAutoFill: function renderAutoFill(suggestion) {
-      var _this9 = this;
+    renderActionIcon: function renderActionIcon(suggestion) {
+      var _this10 = this;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this9.onAutofillClick(suggestion);
+        _this10.onAutofillClick(suggestion);
       };
-      /* 👇 avoid showing autofill for category suggestions👇 */
-      return suggestion._category ? null : vue.createVNode(AutoFillSvg, {
-        "onClick": handleAutoFillClick
-      }, null);
+      if (suggestion._suggestion_type === helper.suggestionTypes.Featured) {
+        if (suggestion.action === helper.featuredSuggestionsActionTypes.FUNCTION) {
+          return vue.createVNode(AutoFillSvg, {
+            "style": {
+              transform: 'rotate(135deg)',
+              pointerEvents: 'none'
+            }
+          }, null);
+        }
+        return null;
+      }
+      if (!suggestion._category) {
+        /* 👇 avoid showing autofill for category suggestions👇 */
+
+        return vue.createVNode(AutoFillSvg, {
+          "onClick": handleAutoFillClick
+        }, null);
+      }
+      return null;
     },
     renderTag: function renderTag(item) {
-      var _this10 = this;
+      var _this11 = this;
       var innerClass = this.$props.innerClass;
       return vue.createVNode(TagItem, {
         "class": getClassName$1(innerClass, 'selected-tag') || ''
@@ -1976,7 +2205,7 @@ var SearchBox = vue.defineComponent({
             "aria-label": "delete-tag",
             "class": "close-icon",
             "onClick": function onClick() {
-              return _this10.clearTag(item);
+              return _this11.clearTag(item);
             }
           }, [vue.createVNode(DropDown.CancelSvg, null, null)])];
         }
@@ -1999,7 +2228,7 @@ var SearchBox = vue.defineComponent({
       }
     },
     renderTags: function renderTags() {
-      var _this11 = this;
+      var _this12 = this;
       if (!Array.isArray(this.selectedTags)) {
         return null;
       }
@@ -2013,16 +2242,16 @@ var SearchBox = vue.defineComponent({
       }) : vue.createVNode(TagsContainer, null, {
         "default": function _default() {
           return [tagsList.map(function (item) {
-            return _this11.renderTag(item);
+            return _this12.renderTag(item);
           }), shouldRenderClearAllTag && vue.createVNode(TagItem, {
-            "class": getClassName$1(_this11.$props.innerClass, 'selected-tag') || ''
+            "class": getClassName$1(_this12.$props.innerClass, 'selected-tag') || ''
           }, {
             "default": function _default() {
               return [vue.createVNode("span", null, [vue.createTextVNode("Clear All")]), vue.createVNode("span", {
                 "role": "img",
                 "aria-label": "delete-tag",
                 "class": "close-icon",
-                "onClick": _this11.clearAllTags
+                "onClick": _this12.clearAllTags
               }, [vue.createVNode(DropDown.CancelSvg, null, null)])];
             }
           })];
@@ -2069,49 +2298,56 @@ var SearchBox = vue.defineComponent({
       return vue.createVNode(HorizontalSkeletonLoader, null, null);
     },
     renderAIScreenFooter: function renderAIScreenFooter() {
-      var _slot6;
-      var _this12 = this;
+      var _slot8;
+      var _this13 = this;
       var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
         AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
       var _ref6 = AIUIConfig || {},
         _ref6$showSourceDocum = _ref6.showSourceDocuments,
         showSourceDocuments = _ref6$showSourceDocum === void 0 ? true : _ref6$showSourceDocum,
-        _ref6$sourceDocumentL = _ref6.sourceDocumentLabel,
-        sourceDocumentLabel = _ref6$sourceDocumentL === void 0 ? '_id' : _ref6$sourceDocumentL,
         _ref6$onSourceClick = _ref6.onSourceClick,
         onSourceClick = _ref6$onSourceClick === void 0 ? function () {} : _ref6$onSourceClick;
+      var renderSourceDocumentLabel = function renderSourceDocumentLabel(sourceObj) {
+        if (_this13.$props.AIUIConfig && _this13.$props.AIUIConfig.renderSourceDocument) {
+          return _this13.$props.AIUIConfig.renderSourceDocument(sourceObj);
+        }
+        if (_this13.$slots.renderSourceDocument) {
+          return _this13.$slots.renderSourceDocument(sourceObj);
+        }
+        return sourceObj._id;
+      };
       return showSourceDocuments && this.showAIScreenFooter && this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds ? vue.createVNode(Footer, {
         "themePreset": this.$props.themePreset
       }, {
         "default": function _default() {
-          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot6 = _this12.getAISourceObjects().map(function (el) {
+          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot8 = _this13.getAISourceObjects().map(function (el) {
+            var _slot7;
             return vue.createVNode(Button.Button, {
-              "class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
-              "title": el[sourceDocumentLabel],
+              "class": "--ai-source-tag " + (getClassName$1(_this13.$props.innerClass, 'ai-source-tag') || ''),
               "info": true,
               "onClick": function onClick() {
                 return onSourceClick && onSourceClick(el);
               }
-            }, {
+            }, _isSlot(_slot7 = renderSourceDocumentLabel(el)) ? _slot7 : {
               "default": function _default() {
-                return [el[sourceDocumentLabel]];
+                return [_slot7];
               }
             });
-          })) ? _slot6 : {
+          })) ? _slot8 : {
             "default": function _default() {
-              return [_slot6];
+              return [_slot8];
             }
           })];
         }
       }) : 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.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
+          question: this.mergedAIQuestion,
+          answer: this.mergedAIAnswer,
           documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
           loading: this.isAIResponseLoading || this.isLoading,
           sources: this.getAISourceObjects(),
@@ -2122,7 +2358,7 @@ var SearchBox = vue.defineComponent({
         return this.renderAIScreenLoader();
       }
       return vue.createVNode("div", null, [vue.createVNode(Answer, {
-        "innerHTML": md.render(this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text)
+        "innerHTML": md.render(this.mergedAIAnswer)
       }, null), this.renderAIScreenFooter(), this.showFeedbackComponent && vue.createVNode("div", {
         "class": "" + (getClassName$1(this.$props.innerClass, 'ai-feedback') || '')
       }, [vue.createVNode(AIFeedback, {
@@ -2130,11 +2366,11 @@ var SearchBox = vue.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
           });
@@ -2169,22 +2405,22 @@ var SearchBox = vue.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 vue.createVNode(Button.Button, {
             "class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
             "info": true,
-            "onClick": _this14.askButtonOnClick
+            "onClick": _this15.askButtonOnClick
           }, {
             "default": function _default() {
               return [vue.createTextVNode("Ask")];
@@ -2199,7 +2435,7 @@ var SearchBox = vue.defineComponent({
     }
   },
   render: function render() {
-    var _this15 = this;
+    var _this16 = this;
     var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
     var _this$$slots = this.$slots,
       recentSearchesIcon = _this$$slots.recentSearchesIcon,
@@ -2210,17 +2446,17 @@ var SearchBox = vue.defineComponent({
       "class": this.$props.className
     }, {
       "default": function _default() {
-        return [_this15.$props.title && vue.createVNode(Title.Title, {
-          "class": getClassName$1(_this15.$props.innerClass, 'title') || ''
+        return [_this16.$props.title && vue.createVNode(Title.Title, {
+          "class": getClassName$1(_this16.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this15.$props.title];
+            return [_this16.$props.title];
           }
-        }), _this15.$props.autosuggest ? vue.createVNode(DropDown.Downshift, {
-          "id": _this15.$props.componentId + "-downshift",
-          "handleChange": _this15.onSuggestionSelected,
-          "handleMouseup": _this15.handleStateChange,
-          "isOpen": _this15.$data.isOpen
+        }), _this16.$props.autosuggest ? vue.createVNode(DropDown.Downshift, {
+          "id": _this16.$props.componentId + "-downshift",
+          "handleChange": _this16.onSuggestionSelected,
+          "handleMouseup": _this16.handleStateChange,
+          "isOpen": _this16.$data.isOpen
         }, {
           "default": function _default(_ref8) {
             var getInputEvents = _ref8.getInputEvents,
@@ -2231,156 +2467,249 @@ var SearchBox = vue.defineComponent({
               highlightedIndex = _ref8.highlightedIndex,
               setHighlightedIndex = _ref8.setHighlightedIndex;
             var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
-              var getIcon = function getIcon(iconType) {
+              var getIcon = function getIcon(iconType, item, leaveSpaceForIcon) {
                 switch (iconType) {
                   case helper.suggestionTypes.Recent:
                     return recentSearchesIcon;
                   case helper.suggestionTypes.Popular:
                     return popularSearchesIcon;
+                  case helper.suggestionTypes.Featured:
+                    if (item.icon) {
+                      return function () {
+                        return vue.createVNode("div", {
+                          "style": {
+                            display: 'flex'
+                          },
+                          "innerHTML": xss(item.icon)
+                        }, null);
+                      };
+                    }
+                    if (item.iconURL) {
+                      return function () {
+                        return (// When you change below also change the empty icon below
+                          vue.createVNode("img", {
+                            "style": {
+                              maxWidth: '30px'
+                            },
+                            "src": xss(item.iconURL),
+                            "alt": item.value
+                          }, null)
+                        );
+                      };
+                    }
+                    // Render an empty icon when no icon is provided from the dashboard
+                    return function () {
+                      return vue.createVNode("span", {
+                        "style": {
+                          display: 'inline-block',
+                          height: '30px',
+                          width: leaveSpaceForIcon ? '30px' : 0
+                        }
+                      }, null);
+                    };
                   default:
                     return null;
                 }
               };
-              return vue.createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
+              var indexOffset = 0;
+              return vue.createVNode("div", null, [_this16.hasCustomRenderer && _this16.getComponent({
                 isOpen: isOpen,
                 getItemProps: getItemProps,
                 getItemEvents: getItemEvents,
                 highlightedIndex: highlightedIndex
-              }), _this15.renderErrorComponent(), !_this15.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
-                "class": Input.suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list'),
+              }), _this16.renderErrorComponent(), !_this16.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
+                "class": Input.suggestions(_this16.themePreset, _this16.theme) + " " + getClassName$1(_this16.$props.innerClass, 'list') + " " + Input.searchboxSuggestions(_this16.themePreset, _this16.theme) + "\n\t\t\t\t\t\t\t\t\t\t\t\t\t",
                 "ref": _dropdownULRef
-              }, [_this15.showAIScreen && vue.createVNode(SearchBoxAISection, {
-                "themePreset": _this15.$props.themePreset
+              }, [_this16.showAIScreen && vue.createVNode(SearchBoxAISection, {
+                "themePreset": _this16.$props.themePreset
               }, {
                 "default": function _default() {
-                  return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
+                  return [_this16.renderAIScreen(), ' ', _this16.renderErrorComponent(true)];
                 }
-              }), !_this15.showAIScreen && _this15.normalizedSuggestions.map(function (item, index) {
-                return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
-                  item: item
-                }), getItemEvents({
-                  item: item
-                }), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [renderItem(item)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
-                  item: item
-                }), _transformOn(getItemEvents({
-                  item: item
-                })), {
-                  "key": index + 1 + "-" + item.value,
-                  "style": {
-                    backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
-                    justifyContent: 'flex-start',
-                    alignItems: 'center'
-                  }
-                }), [vue.createVNode("div", {
-                  "style": {
-                    padding: '0 10px 0 0',
-                    display: 'flex'
-                  }
-                }, [vue.createVNode(CustomSvg, {
-                  "className": getClassName$1(_this15.$props.innerClass, item._suggestion_type + "-search-icon") || null,
-                  "icon": getIcon(item._suggestion_type),
-                  "type": item._suggestion_type + "-search-icon"
-                }, null)]), vue.createVNode(SuggestionItem, {
-                  "currentValue": _this15.currentValue,
-                  "suggestion": item
-                }, null), _this15.renderAutoFill(item)]);
-              })]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
+              }), !_this16.showAIScreen && _this16.parsedSuggestions.map(function (item, itemIndex) {
+                var index = indexOffset + itemIndex;
+                if (Array.isArray(item)) {
+                  var sectionHtml = xss(item[0].sectionLabel);
+                  indexOffset += item.length - 1;
+                  return vue.createVNode("div", {
+                    "key": "section-" + itemIndex,
+                    "class": "section-container"
+                  }, [sectionHtml ? vue.createVNode("div", {
+                    "class": "section-header " + getClassName$1(_this16.$props.innerClass, 'section-label'),
+                    "key": "" + item[0].sectionId,
+                    "innerHTML": sectionHtml
+                  }, null) : null, vue.createVNode("ul", {
+                    "class": "section-list"
+                  }, [item.map(function (sectionItem, sectionIndex) {
+                    var suggestionsHaveIcon = item.some(function (s) {
+                      return s.icon || s.iconURL;
+                    });
+                    if (renderItem) {
+                      return vue.createVNode("li", vue.mergeProps(getItemProps({
+                        item: sectionItem
+                      }), _transformOn(getItemEvents({
+                        item: sectionItem
+                      })), {
+                        "key": sectionItem._id + "_" + index + "_" + sectionIndex,
+                        "style": {
+                          justifyContent: 'flex-start',
+                          alignItems: 'center'
+                        },
+                        "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)]);
+                    }
+                    if (sectionItem._suggestion_type === '_internal_a_i_trigger') {
+                      return vue.createVNode("li", vue.mergeProps(getItemProps({
+                        item: sectionItem
+                      }), _transformOn(getItemEvents({
+                        item: sectionItem
+                      })), {
+                        "key": sectionItem._id + "_" + index + "_" + sectionIndex,
+                        "style": {
+                          justifyContent: 'flex-start',
+                          alignItems: 'center'
+                        },
+                        "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this16.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this16.$props.innerClass, 'suggestion-item'))
+                      }), [vue.createVNode(SuggestionItem, {
+                        "currentValue": _this16.currentValue,
+                        "suggestion": sectionItem
+                      }, null)]);
+                    }
+                    return vue.createVNode("li", vue.mergeProps(getItemProps({
+                      item: sectionItem
+                    }), _transformOn(getItemEvents({
+                      item: sectionItem
+                    })), {
+                      "key": sectionItem._id + "_" + index + "_" + sectionIndex,
+                      "style": {
+                        justifyContent: 'flex-start',
+                        alignItems: 'center'
+                      },
+                      "class": "" + (highlightedIndex === index + sectionIndex ? "active-li-item " + getClassName$1(_this16.$props.innerClass, 'active-suggestion-item') : "li-item " + getClassName$1(_this16.$props.innerClass, 'suggestion-item'))
+                    }), [vue.createVNode("div", {
+                      "style": {
+                        padding: '0 10px 0 0',
+                        display: 'flex'
+                      }
+                    }, [vue.createVNode(CustomSvg, {
+                      "key": sectionItem._suggestion_type + "-" + sectionIndex,
+                      "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)]), vue.createVNode(SuggestionItem, {
+                      "currentValue": _this16.currentValue,
+                      "suggestion": sectionItem
+                    }, null), _this16.renderActionIcon(sectionItem)]);
+                  })])]);
+                }
+                return vue.createVNode("div", null, [vue.createTextVNode("No suggestions")]);
+              }), !_this16.showAIScreen && _this16.parsedSuggestions.length && _this16.$props.showSuggestionsFooter ? _this16.suggestionsFooter() : null]) : _this16.renderNoSuggestions(_this16.normalizedSuggestions)]);
             };
             return vue.createVNode("div", {
               "class": Input.suggestionsContainer
             }, [vue.createVNode(InputGroup, {
-              "ref": _inputGroupRef
+              "searchBox": true,
+              "ref": _inputGroupRef,
+              "isOpen": _this16.$data.isOpen
             }, {
               "default": function _default() {
-                return [_this15.renderInputAddonBefore(), vue.createVNode(DropDown.InputWrapper, null, {
+                return [vue.createVNode(Input.Actions, null, {
+                  "default": function _default() {
+                    return [_this16.renderInputAddonBefore(), _this16.renderLeftIcons()];
+                  }
+                }), vue.createVNode(DropDown.InputWrapper, null, {
                   "default": function _default() {
                     return [vue.createVNode(Input.TextArea, vue.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,
+                      "isOpen": _this16.$data.isOpen,
+                      "id": _this16.$props.componentId + "-input",
+                      "ref": _this16.$props.innerRef,
+                      "class": getClassName$1(_this16.$props.innerClass, 'input'),
+                      "placeholder": _this16.$props.placeholder,
+                      "autoFocus": _this16.$props.autoFocus
                     }, 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()];
                   }
-                }), _this15.renderInputAddonAfter(), _this15.renderAskButtonElement(), _this15.renderEnterButtonElement()];
+                }), vue.createVNode(Input.Actions, null, {
+                  "default": function _default() {
+                    return [_this16.renderRightIcons(), _this16.renderInputAddonAfter(), _this16.renderAskButtonElement(), _this16.renderEnterButtonElement()];
+                  }
+                })];
               }
-            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this15.renderTags()]);
+            }), expandSuggestionsContainer && renderSuggestionsDropdown(), _this16.renderTags()]);
           }
         }) : vue.createVNode("div", {
           "class": Input.suggestionsContainer
         }, [vue.createVNode(InputGroup, {
+          "searchBox": true,
           "ref": _inputGroupRef
         }, {
           "default": function _default() {
-            return [_this15.renderInputAddonBefore(), vue.createVNode(DropDown.InputWrapper, null, {
+            return [vue.createVNode(Input.Actions, null, {
+              "default": function _default() {
+                return [_this16.renderInputAddonBefore(), _this16.renderLeftIcons()];
+              }
+            }), vue.createVNode(DropDown.InputWrapper, null, {
               "default": function _default() {
                 return [vue.createVNode(Input.TextArea, vue.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()];
+                  "searchBox": true,
+                  "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)];
+              }
+            }), vue.createVNode(Input.Actions, null, {
+              "default": function _default() {
+                return [_this16.renderRightIcons(), _this16.renderInputAddonAfter(), _this16.renderEnterButtonElement()];
               }
-            }), _this15.renderInputAddonAfter(), _this15.renderEnterButtonElement()];
+            })];
           }
         })])];
       }
@@ -2466,6 +2795,7 @@ SBConnected.install = function (Vue) {
 // Add componentType for SSR
 SBConnected.componentType = constants.componentTypes.searchBox;
 
+var _excluded$1 = ["_source"];
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
@@ -2473,7 +2803,9 @@ var md$1 = new remarkable.Remarkable();
 md$1.set({
   html: true,
   breaks: true,
-  xhtmlOut: true
+  xhtmlOut: true,
+  linkify: true,
+  linkTarget: '_blank'
 });
 var _inputWrapperRef = 'inputWrapperRef';
 var _inputRef = 'inputRef';
@@ -2486,7 +2818,10 @@ var AIAnswer = vue.defineComponent({
       messages: [],
       inputMessage: '',
       AISessionId: '',
-      error: null
+      error: null,
+      sourceDocIds: null,
+      initialHits: null,
+      isTriggered: false
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -2496,7 +2831,16 @@ var AIAnswer = vue.defineComponent({
       from: 'theme_reactivesearch'
     }
   },
-  created: function created() {},
+  created: function created() {
+    if (this.$props.triggerOn === constants.AI_TRIGGER_MODES.ALWAYS) {
+      this.isTriggered = true;
+    } else if (this.$props.triggerOn === constants.AI_TRIGGER_MODES.QUESTION && this.dependentComponentValue && this.dependentComponentValue.endsWith('?')) {
+      this.isTriggered = true;
+      if (this.AISessionId) {
+        this.handleSendMessage(null, false, '', true);
+      }
+    }
+  },
   computed: {
     hasCustomRenderer: function hasCustomRenderer() {
       return index.hasCustomRenderer(this);
@@ -2509,6 +2853,9 @@ var AIAnswer = vue.defineComponent({
     },
     errorMessageForMissingSessionId: function errorMessageForMissingSessionId() {
       return "AISessionId for " + this.$props.componentId + " is missing! AIAnswer component requires an AISessionId to function. Try reloading the App.";
+    },
+    hasTriggered: function hasTriggered() {
+      return this.isTriggered;
     }
   },
   props: {
@@ -2547,13 +2894,26 @@ var AIAnswer = vue.defineComponent({
     sessionIdFromStore: VueTypes.string,
     showComponent: vueTypes.types.boolRequired,
     componentError: vueTypes.types.componentObject,
-    style: vueTypes.types.style
+    style: vueTypes.types.style,
+    showSourceDocuments: VueTypes.bool.def(false),
+    renderSourceDocument: vueTypes.types.func,
+    onSourceClick: vueTypes.types.func,
+    isAITyping: vueTypes.types.boolRequired,
+    triggerOn: VueTypes.string.def(constants.AI_TRIGGER_MODES.ALWAYS),
+    renderTriggerMessage: vueTypes.types.func
   },
   mounted: function mounted() {},
   watch: {
     AIResponse: function AIResponse(newVal) {
       if (newVal) {
-        this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
+        if (this.$props.showSourceDocuments && newVal.response && newVal.response.answer && Array.isArray(newVal.response.answer.documentIds)) {
+          this.sourceDocIds = newVal.response.answer.documentIds;
+          var localCache = helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) && helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY)[this.$props.componentId];
+          if (localCache && localCache.meta && localCache.meta.hits) {
+            this.initialHits = localCache.meta.hits;
+          }
+        }
+        this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || (((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).response || {}).sessionId;
         var messagesHistory = newVal.messages,
           response = newVal.response;
         var finalMessages = [];
@@ -2564,7 +2924,7 @@ var AIAnswer = vue.defineComponent({
         }
 
         // pushing message history so far
-        if (messagesHistory && messagesHistory && Array.isArray(messagesHistory)) {
+        if (messagesHistory && Array.isArray(messagesHistory)) {
           finalMessages.push.apply(finalMessages, messagesHistory.filter(function (msg) {
             return msg.role !== constants.AI_ROLES.SYSTEM;
           }));
@@ -2589,6 +2949,9 @@ var AIAnswer = vue.defineComponent({
         loading: this.$props.isAIResponseLoading || this.$props.isLoading,
         error: this.$props.AIResponseError
       });
+      if (newVal && newVal.hits && newVal.hits.hits) {
+        this.initialHits = newVal.hits.hits;
+      }
     },
     isAIResponseLoading: function isAIResponseLoading(newVal) {
       this.$emit('on-data', {
@@ -2613,7 +2976,7 @@ var AIAnswer = vue.defineComponent({
     },
     AIResponseError: function AIResponseError(newVal) {
       this.error = newVal;
-      this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
+      this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || (((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).response || {}).sessionId;
       if (this.error && !this.AISessionId) {
         var errorMessage = this.errorMessageForMissingSessionId;
         this.error = {
@@ -2634,7 +2997,7 @@ var AIAnswer = vue.defineComponent({
     componentError: function componentError(newVal) {
       var _this = this;
       if (newVal && newVal._bodyBlob) {
-        this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
+        this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || (((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).response || {}).sessionId;
         if (!this.AISessionId) {
           this.generateNewSessionId();
         }
@@ -2657,23 +3020,154 @@ var AIAnswer = vue.defineComponent({
           console.error('Error reading  component error text data:', error);
         });
       }
+    },
+    showComponent: function showComponent() {
+      if (this.$props.triggerOn === constants.AI_TRIGGER_MODES.QUESTION && this.$props.dependentComponentValue.endsWith('?')) {
+        this.isTriggered = true;
+      }
+    },
+    dependentComponentValue: function dependentComponentValue(newVal) {
+      if (this.$props.triggerOn === constants.AI_TRIGGER_MODES.QUESTION && newVal && newVal.endsWith('?')) {
+        this.isTriggered = true;
+        if (this.AISessionId) {
+          this.handleSendMessage(null, false, '', true);
+        }
+      } else if (this.hasTriggered && this.$props.triggerOn !== constants.AI_TRIGGER_MODES.ALWAYS) {
+        this.isTriggered = false;
+      }
+    },
+    AISessionId: function AISessionId(newVal) {
+      if (newVal) {
+        if (this.$props.triggerOn === constants.AI_TRIGGER_MODES.QUESTION && this.dependentComponentValue && this.dependentComponentValue.endsWith('?') || this.$props.triggerOn === constants.AI_TRIGGER_MODES.ALWAYS) {
+          this.handleSendMessage(null, false, '', true);
+        }
+      }
+    },
+    triggerOn: function triggerOn(newVal) {
+      if (newVal === constants.AI_TRIGGER_MODES.ALWAYS) {
+        this.isTriggered = true;
+      }
     }
   },
   methods: {
-    generateNewSessionId: function generateNewSessionId() {
+    renderTriggerMessageFunc: function renderTriggerMessageFunc() {
+      var triggerOn = this.$props.triggerOn;
+      if (this.$props.renderTriggerMessage) {
+        return this.$props.renderTriggerMessage;
+      }
+      if (this.$slots.renderTriggerMessage) {
+        return this.$slots.renderTriggerMessage();
+      }
+      if (triggerOn === constants.AI_TRIGGER_MODES.QUESTION) {
+        if (!this.dependentComponentValue.endsWith('?')) {
+          return vue.createVNode("span", null, [vue.createVNode("span", {
+            "role": "img",
+            "aria-label": "bulb"
+          }, [vue.createTextVNode("\uD83D\uDCA1")]), vue.createTextVNode("End your question with a question mark (?)")]);
+        }
+      } else if (triggerOn === constants.AI_TRIGGER_MODES.MANUAL) {
+        return vue.createVNode("span", null, [vue.createTextVNode("Click here to ask AI"), ' ', vue.createVNode("span", {
+          "role": "img",
+          "aria-label": "bulb"
+        }, [vue.createTextVNode("\uD83E\uDD16")])]);
+      }
+      return null;
+    },
+    handleTriggerClick: function handleTriggerClick() {
+      if (this.$props.triggerOn === constants.AI_TRIGGER_MODES.MANUAL) {
+        this.handleSendMessage(null, false, '', true);
+        this.isTriggered = true;
+      }
+    },
+    getAISourceObjects: function getAISourceObjects() {
       var _this2 = this;
+      var sourceObjects = [];
+      if (!this.AIResponse) return sourceObjects;
+      var docIds = this.sourceDocIds || [];
+      if (this.initialHits) {
+        docIds.forEach(function (id) {
+          var foundSourceObj = _this2.initialHits.find(function (hit) {
+            return hit._id === id;
+          }) || {};
+          if (foundSourceObj) {
+            var _foundSourceObj$_sour = foundSourceObj._source,
+              _source = _foundSourceObj$_sour === void 0 ? {} : _foundSourceObj$_sour,
+              rest = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(foundSourceObj, _excluded$1);
+            sourceObjects.push(_rollupPluginBabelHelpers._extends({}, rest, _source));
+          }
+        });
+      } else {
+        sourceObjects.push.apply(sourceObjects, docIds.map(function (id) {
+          return {
+            _id: id
+          };
+        }));
+      }
+      return sourceObjects;
+    },
+    renderAIScreenFooter: function renderAIScreenFooter() {
+      var _slot2;
+      var _this3 = this;
+      var _ref = this.$props || {},
+        _ref$showSourceDocume = _ref.showSourceDocuments,
+        showSourceDocuments = _ref$showSourceDocume === void 0 ? true : _ref$showSourceDocume,
+        _ref$onSourceClick = _ref.onSourceClick,
+        onSourceClick = _ref$onSourceClick === void 0 ? function () {} : _ref$onSourceClick,
+        renderSourceDocument = _ref.renderSourceDocument;
+      var customRenderSourceDoc = renderSourceDocument || this.$slots.renderSourceDocument;
+      if (this.isLoadingState || this.isAITyping) {
+        return null;
+      }
+      var renderSourceDocumentLabel = function renderSourceDocumentLabel(sourceObj) {
+        if (customRenderSourceDoc) {
+          return customRenderSourceDoc(sourceObj);
+        }
+        return sourceObj._id;
+      };
+      return showSourceDocuments && Array.isArray(this.sourceDocIds) && this.sourceDocIds.length ? vue.createVNode(Footer, {
+        "themePreset": this.$props.themePreset,
+        "style": {
+          marginTop: '1.5rem',
+          background: 'inherit'
+        }
+      }, {
+        "default": function _default() {
+          return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot$1(_slot2 = _this3.getAISourceObjects().map(function (el) {
+            var _slot;
+            return vue.createVNode(Button.Button, {
+              "class": "--ai-source-tag " + (helper.getClassName(_this3.$props.innerClass, 'ai-source-tag') || ''),
+              "info": true,
+              "onClick": function onClick() {
+                return onSourceClick && onSourceClick(el);
+              },
+              "key": el._id
+            }, _isSlot$1(_slot = renderSourceDocumentLabel(el)) ? _slot : {
+              "default": function _default() {
+                return [_slot];
+              }
+            });
+          })) ? _slot2 : {
+            "default": function _default() {
+              return [_slot2];
+            }
+          })];
+        }
+      }) : null;
+    },
+    generateNewSessionId: function generateNewSessionId() {
+      var _this4 = this;
       var newSessionPromise = this.createAISession();
       newSessionPromise.then(function (res) {
-        _this2.AISessionId = res.AIsessionId;
+        _this4.AISessionId = res.AIsessionId;
       })["catch"](function (e) {
         console.error(e);
       });
     },
     scrollToBottom: function scrollToBottom() {
-      var _this3 = this;
+      var _this5 = this;
       this.$nextTick(function () {
-        var _this3$$refs;
-        var messageContainer = (_this3$$refs = _this3.$refs) == null ? void 0 : _this3$$refs[_this3.$props.innerRef];
+        var _this5$$refs;
+        var messageContainer = (_this5$$refs = _this5.$refs) == null ? void 0 : _this5$$refs[_this5.$props.innerRef];
         if (messageContainer && messageContainer.$el) {
           messageContainer.$el.scrollTo({
             top: messageContainer.$el.scrollHeight,
@@ -2686,24 +3180,33 @@ var AIAnswer = vue.defineComponent({
       this.inputMessage = e.target.value;
       this.handleTextAreaHeightChange();
     },
-    handleSendMessage: function handleSendMessage(e, isRetry, text) {
+    handleSendMessage: function handleSendMessage(e, isRetry, text, fetchMeta) {
       if (isRetry === void 0) {
         isRetry = false;
       }
       if (text === void 0) {
         text = this.inputMessage;
       }
+      if (fetchMeta === void 0) {
+        fetchMeta = false;
+      }
       if (typeof e === 'object' && e !== null) e.preventDefault();
-      if (text.trim()) {
+      if (text.trim() || !text && !e) {
         if (this.isLoadingState) {
           return;
         }
         if (this.AISessionId) {
-          if (!isRetry) this.messages = [].concat(this.messages, [{
-            content: text,
-            role: constants.AI_ROLES.USER
-          }]);
-          this.getAIResponse(this.AISessionId, this.componentId, text);
+          if (!isRetry) {
+            var finalMessages = [].concat(this.messages);
+            if (text) {
+              finalMessages.push({
+                content: text,
+                role: constants.AI_ROLES.USER
+              });
+            }
+            this.messages = [].concat(finalMessages);
+          }
+          this.getAIResponse(this.AISessionId, this.componentId, text, fetchMeta);
         } else {
           console.error(this.errorMessageForMissingSessionId);
           this.error = {
@@ -2752,7 +3255,6 @@ var AIAnswer = vue.defineComponent({
       return null;
     },
     handleKeyPress: function handleKeyPress(e) {
-      window.console.log('e', e);
       if (e.key === 'Enter') {
         this.handleSendMessage(e);
         this.inputMessage = '';
@@ -2784,15 +3286,15 @@ var AIAnswer = vue.defineComponent({
       if (typeof window === 'undefined') return false;
       return showVoiceSearch && (window.webkitSpeechRecognition || window.SpeechRecognition);
     },
-    handleVoiceResults: function handleVoiceResults(_ref) {
-      var results = _ref.results;
+    handleVoiceResults: function handleVoiceResults(_ref2) {
+      var results = _ref2.results;
       if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
         this.handleSendMessage(null, false, results[0][0].transcript.trim());
       }
     },
     renderIcons: function renderIcons() {
-      var _this4 = this;
-      var _slot, _slot2;
+      var _this6 = this;
+      var _slot3, _slot4;
       var _this$$props = this.$props,
         getMicInstance = _this$$props.getMicInstance,
         showVoiceInput = _this$$props.showVoiceInput,
@@ -2805,14 +3307,14 @@ var AIAnswer = vue.defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [!_this4.isLoadingState && _this4.AISessionId && _this4.shouldMicRender(showVoiceInput) && vue.createVNode(Mic, {
+          return [!_this6.isLoadingState && _this6.AISessionId && _this6.shouldMicRender(showVoiceInput) && vue.createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this4.handleVoiceResults,
+            "handleResult": _this6.handleVoiceResults,
             "class": helper.getClassName(innerClass, 'ai-search-mic') || null
-          }, null), iconPosition === 'right' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot = _this4.renderIcon()) ? _slot : {
+          }, null), iconPosition === 'right' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot3 = _this6.renderIcon()) ? _slot3 : {
             "default": function _default() {
-              return [_slot];
+              return [_slot3];
             }
           })];
         }
@@ -2822,9 +3324,9 @@ var AIAnswer = vue.defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [iconPosition === 'left' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot2 = _this4.renderIcon()) ? _slot2 : {
+          return [iconPosition === 'left' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot4 = _this6.renderIcon()) ? _slot4 : {
             "default": function _default() {
-              return [_slot2];
+              return [_slot4];
             }
           })];
         }
@@ -2834,7 +3336,7 @@ var AIAnswer = vue.defineComponent({
       this.handleSendMessage(e);
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this5 = this;
+      var _this7 = this;
       var _this$$props2 = this.$props,
         enterButton = _this$$props2.enterButton,
         innerClass = _this$$props2.innerClass;
@@ -2842,16 +3344,16 @@ var AIAnswer = vue.defineComponent({
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this5.enterButtonOnClick);
+            return renderEnterButton(_this7.enterButtonOnClick);
           }
           return vue.createVNode(SendButton, {
             "primary": true,
             "type": "submit",
             "tabIndex": 0,
-            "onClick": _this5.handleSendMessage,
-            "onKeyPress": _this5.handleKeyPress,
+            "onClick": _this7.handleSendMessage,
+            "onKeyPress": _this7.handleKeyPress,
             "class": "ask-btn " + helper.getClassName(innerClass, 'ai-enter-button'),
-            "disabled": _this5.isLoadingState || !_this5.AISessionId
+            "disabled": _this7.isLoadingState || !_this7.AISessionId
           }, {
             "default": function _default() {
               return [vue.createTextVNode("Send")];
@@ -2874,9 +3376,9 @@ var AIAnswer = vue.defineComponent({
       return index.getComponent(data, this);
     },
     handleTextAreaHeightChange: function handleTextAreaHeightChange() {
-      var _this$$refs, _this$$refs$_inputRef, _this$$refs2, _this$$refs2$_inputWr, _this$$refs3;
-      var textArea = (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$_inputRef = _this$$refs[_inputRef]) == null ? void 0 : _this$$refs$_inputRef.$el;
-      var inputWrapper = (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$_inputWr = _this$$refs2[_inputWrapperRef]) == null ? void 0 : _this$$refs2$_inputWr.$el;
+      var _this$$refs, _this$$refs2, _this$$refs3;
+      var textArea = (_this$$refs = this.$refs) == null || (_this$$refs = _this$$refs[_inputRef]) == null ? void 0 : _this$$refs.$el;
+      var inputWrapper = (_this$$refs2 = this.$refs) == null || (_this$$refs2 = _this$$refs2[_inputWrapperRef]) == null ? void 0 : _this$$refs2.$el;
       var errorContainer = (_this$$refs3 = this.$refs) == null ? void 0 : _this$$refs3[_errorContainerRef];
       if (textArea) {
         textArea.style.height = '42px';
@@ -2894,6 +3396,20 @@ var AIAnswer = vue.defineComponent({
         }
         this.$forceUpdate();
       }
+    },
+    getTitle: function getTitle() {
+      var _this8 = this;
+      var hasTitle = this.$props.title || this.$slots.title || null;
+      if (hasTitle) {
+        return vue.createVNode(Title.Title, {
+          "class": helper.getClassName(this.$props.innerClass, 'ai-title') || null
+        }, {
+          "default": function _default() {
+            return [_this8.$props.title || _this8.$slots.title()];
+          }
+        });
+      }
+      return null;
     }
   },
   beforeUnmount: function beforeUnmount() {
@@ -2908,55 +3424,62 @@ var AIAnswer = vue.defineComponent({
     }
   },
   render: function render() {
-    var _slot3;
-    var _this6 = this;
+    var _slot5;
+    var _this9 = this;
     var props = this.$props;
     if (!this.shouldShowComponent) {
       return null;
     }
+    if (!this.isTriggered) {
+      return vue.createVNode(Chatbox, {
+        "style": props.style || {}
+      }, {
+        "default": function _default() {
+          return [_this9.getTitle(), vue.createVNode("div", {
+            "class": "--trigger-message-wrapper",
+            "onClick": _this9.handleTriggerClick,
+            "aria-hidden": "true"
+          }, [_this9.renderTriggerMessageFunc()])];
+        }
+      });
+    }
     return vue.createVNode(Chatbox, {
       "style": props.style || {}
     }, {
       "default": function _default() {
-        return [_this6.$props.title && vue.createVNode(Title.Title, {
-          "class": helper.getClassName(_this6.$props.innerClass, 'title') || ''
-        }, {
-          "default": function _default() {
-            return [_this6.$props.title];
-          }
-        }), vue.createVNode(ChatContainer, {
+        return [_this9.getTitle(), vue.createVNode(ChatContainer, {
           "class": "--ai-chat-container",
           "theme": props.theme,
           "showInput": props.showInput
         }, {
           "default": function _default() {
-            return [_this6.hasCustomRenderer && vue.createVNode(MessagesContainer, {
-              "themePreset": _this6.themePreset,
+            return [_this9.hasCustomRenderer && vue.createVNode(MessagesContainer, {
+              "themePreset": _this9.themePreset,
               "theme": props.theme,
-              "ref": _this6.$props.innerRef,
+              "ref": _this9.$props.innerRef,
               "class": "--ai-message-container " + (helper.getClassName(props.innerClass, 'ai-message-container') || '')
-            }, _isSlot$1(_slot3 = _this6.getComponent()) ? _slot3 : {
+            }, _isSlot$1(_slot5 = _this9.getComponent()) ? _slot5 : {
               "default": function _default() {
-                return [_slot3];
+                return [_slot5];
               }
-            }), !_this6.hasCustomRenderer && vue.createVNode(MessagesContainer, {
-              "themePreset": _this6.themePreset,
+            }), !_this9.hasCustomRenderer && vue.createVNode(MessagesContainer, {
+              "themePreset": _this9.themePreset,
               "theme": props.theme,
-              "ref": _this6.$props.innerRef,
+              "ref": _this9.$props.innerRef,
               "class": "--ai-message-container " + (helper.getClassName(props.innerClass, 'ai-message-container') || '')
             }, {
               "default": function _default() {
-                return [_this6.messages.map(function (message, index) {
+                return [_this9.messages.map(function (message, index) {
                   return vue.createVNode(Message, {
                     "key": index,
                     "isSender": message.role === constants.AI_ROLES.USER,
                     "innerHTML": md$1.render(message.content),
-                    "themePreset": _this6.themePreset,
+                    "themePreset": _this9.themePreset,
                     "theme": props.theme,
                     "class": "--ai-answer-message " + (helper.getClassName(props.innerClass, 'ai-message') || '')
                   }, null);
-                }), _this6.isLoadingState && vue.createVNode(Message, {
-                  "themePreset": _this6.themePreset,
+                }), _this9.isLoadingState && vue.createVNode(Message, {
+                  "themePreset": _this9.themePreset,
                   "theme": props.theme,
                   "isSender": false,
                   "class": "--ai-answer-message " + (helper.getClassName(props.innerClass, 'ai-message') || null)
@@ -2965,31 +3488,31 @@ var AIAnswer = vue.defineComponent({
                     return [vue.createVNode(TypingIndicator, null, {
                       "default": function _default() {
                         return [vue.createVNode(TypingDot, {
-                          "themePreset": _this6.themePreset
+                          "themePreset": _this9.themePreset
                         }, null), vue.createVNode(TypingDot, {
-                          "themePreset": _this6.themePreset
+                          "themePreset": _this9.themePreset
                         }, null), vue.createVNode(TypingDot, {
-                          "themePreset": _this6.themePreset
+                          "themePreset": _this9.themePreset
                         }, null)];
                       }
                     })];
                   }
                 })];
               }
-            }), _this6.renderErrorComponent(), ' ', props.showFeedback && vue.createVNode("div", {
+            }), _this9.renderErrorComponent(), ' ', props.showFeedback && !_this9.isLoadingState && !_this9.isAITyping && vue.createVNode("div", {
               "class": "--ai-answer-feedback-container " + (helper.getClassName(props.innerClass, 'ai-feedback') || '')
             }, [vue.createVNode(AIFeedback, {
-              "hideUI": _this6.isLoadingState || !_this6.sessionId,
-              "key": _this6.sessionId,
+              "hideUI": _this9.isLoadingState || !_this9.sessionId,
+              "key": _this9.sessionId,
               "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-                _this6.trackUsefullness(_this6.sessionId, {
+                _this9.trackUsefullness(_this9.sessionId, {
                   useful: useful,
                   reason: reason
                 });
               }
-            }, null)]), props.showInput && vue.createVNode(MessageInputContainer, {
+            }, null)]), ' ', _this9.renderAIScreenFooter(), props.showInput && !_this9.isLoadingState && !_this9.isAITyping && vue.createVNode(MessageInputContainer, {
               "class": "--ai-input-container",
-              "onSubmit": _this6.handleSendMessage
+              "onSubmit": _this9.handleSendMessage
             }, {
               "default": function _default() {
                 return [vue.createVNode(InputGroup, {
@@ -3005,19 +3528,19 @@ var AIAnswer = vue.defineComponent({
                           "ref": _inputRef,
                           "placeholder": props.placeholder,
                           "enterButton": props.enterButton,
-                          "value": _this6.inputMessage,
-                          "onInput": _this6.handleMessageInputChange,
+                          "value": _this9.inputMessage,
+                          "onInput": _this9.handleMessageInputChange,
                           "id": props.componentId + "-ai-input",
                           "showIcon": props.showIcon,
                           "iconPosition": props.iconPosition,
-                          "themePreset": _this6.themePreset,
-                          "disabled": _this6.isLoadingState || !_this6.AISessionId,
+                          "themePreset": _this9.themePreset,
+                          "disabled": _this9.isLoadingState || !_this9.AISessionId,
                           "class": helper.getClassName(props.innerClass, 'ai-input') || null
-                        }, null), ' ', _this6.renderIcons()];
+                        }, null), ' ', _this9.renderIcons()];
                       }
                     })];
                   }
-                }), _this6.renderEnterButtonElement()];
+                }), _this9.renderEnterButtonElement()];
               }
             }), ' '];
           }
@@ -3035,9 +3558,11 @@ var mapStateToProps$1 = function mapStateToProps(state, props) {
     // eslint-disable-next-line prefer-destructuring
     dependencyComponent = dependencyComponent[0];
   }
-  var showComponent = state.selectedValues[dependencyComponent] && state.selectedValues[dependencyComponent].value;
+  var showComponent = !!(state.selectedValues[dependencyComponent] && state.selectedValues[dependencyComponent].value);
+  var dependentComponentValue = state.selectedValues[dependencyComponent] && state.selectedValues[dependencyComponent].value || '';
   return {
     showComponent: showComponent,
+    dependentComponentValue: dependentComponentValue,
     AIResponse: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response,
     isAIResponseLoading: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].isLoading,
     AIResponseError: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].error,
@@ -3045,11 +3570,17 @@ var mapStateToProps$1 = function mapStateToProps(state, props) {
     themePreset: state.config.themePreset,
     isLoading: state.isLoading[props.componentId] || false,
     sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || '',
-    componentError: state.error[props.componentId]
+    componentError: state.error[props.componentId] || null,
+    isAITyping: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.isTyping || false
   };
 };
 var mapDispatchToProps$1 = {
-  getAIResponse: query.fetchAIResponse,
+  getAIResponse: function getAIResponse(sessionId, componentId, message, shouldFetchMeta) {
+    if (shouldFetchMeta === void 0) {
+      shouldFetchMeta = false;
+    }
+    return query.fetchAIResponse(sessionId, componentId, message, null, shouldFetchMeta);
+  },
   trackUsefullness: analytics.recordAISessionUsefulness,
   createAISession: query.createAISession
 };
@@ -3065,8 +3596,8 @@ AIConnected.install = function (Vue) {
 // Add componentType for SSR
 AIConnected.componentType = constants.componentTypes.AIAnswer;
 
-var _templateObject$8, _templateObject2$4;
-var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
+var _templateObject$9, _templateObject2$4;
+var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$9 || (_templateObject$9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
 var HierarchicalMenuListItem = vueEmotion.styled('li')(_templateObject2$4 || (_templateObject2$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
   return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
 });