@appbaseio/reactivesearch-vue 3.0.0-rc.15 → 3.0.0-rc.17

package/dist/cjs/index.js

@@ -32,9 +32,9 @@ require('@appbaseio/analytics');
 require('url-search-params-polyfill');
 var ReactiveBase = require('./ReactiveBase.js');
 require('hotkeys-js');
-require('remarkable');
 require('xss');
-var install = require('./install-5513d650.js');
+require('remarkable');
+var install = require('./install-a773d7d3.js');
 require('./DropDown-e8216602.js');
 require('./Input-3ecdb905.js');
 require('compute-scroll-into-view');

package/dist/cjs/{install-5513d650.js → install-a773d7d3.js}

@@ -25,8 +25,8 @@ 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 remarkable = require('remarkable');
 var xss = _interopDefault(require('xss'));
+var remarkable = require('remarkable');
 var DropDown = require('./DropDown-e8216602.js');
 var Input = require('./Input-3ecdb905.js');
 var Container = require('./Container-29f049b2.js');
@@ -1088,7 +1088,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';
@@ -1116,7 +1118,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;
@@ -1158,6 +1162,12 @@ var SearchBox = vue.defineComponent({
     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) {
@@ -1216,6 +1226,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,
@@ -1339,7 +1354,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() {
@@ -1451,8 +1470,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(),
@@ -1483,7 +1502,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;
@@ -1497,6 +1516,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;
@@ -1525,6 +1547,12 @@ 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) {
@@ -1532,17 +1560,18 @@ var SearchBox = vue.defineComponent({
             }
             if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
               enableAI: true
-            } : {});
+            } : {}, shouldExecuteQuery);
           } // in case of strict selection only SUGGESTION_SELECT should be able
           // to set the query otherwise the value should reset
           if (props.strictSelection) {
             if (cause === 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
@@ -1553,10 +1582,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;
       }
@@ -1577,12 +1609,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,
@@ -1611,7 +1646,7 @@ var SearchBox = vue.defineComponent({
         URLParams: URLParams,
         componentType: constants.componentTypes.searchBox,
         category: categoryValue
-      });
+      }, shouldExecuteQuery);
     },
     handleFocus: function handleFocus(event) {
       if (this.$props.autosuggest) {
@@ -1622,7 +1657,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) {
@@ -1662,6 +1699,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) {
@@ -1697,7 +1736,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;
@@ -1712,7 +1751,7 @@ var SearchBox = vue.defineComponent({
     },
     handleFeaturedSuggestionClicked: function handleFeaturedSuggestionClicked(suggestion) {
       try {
-        var _this$$refs2, _this$$refs2$this$$pr;
+        var _this$$refs3;
         if (suggestion.action === helper.featuredSuggestionsActionTypes.NAVIGATE) {
           var _JSON$parse = JSON.parse(suggestion.subAction),
             _JSON$parse$target = _JSON$parse.target,
@@ -1731,7 +1770,7 @@ var SearchBox = vue.defineComponent({
           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);
+          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
@@ -1739,21 +1778,36 @@ var SearchBox = vue.defineComponent({
         // else Downshift probably is focusing the dropdown
         // and not letting it close
         // eslint-disable-next-line no-unused-expressions
-        (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.blur();
+        (_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;
       }
-      var value = this.$props.value;
 
       // 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;
       }
       // Record analytics for selected suggestions
@@ -1783,6 +1837,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 {
+        this.showAIScreen = true;
+      }
     },
     onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
       if (currentValue === void 0) {
@@ -2026,14 +2085,14 @@ var SearchBox = vue.defineComponent({
       })]);
     },
     focusSearchBox: function focusSearchBox(event) {
-      var _this$$refs3, _this$$refs3$this$$pr, _this$$refs3$this$$pr2;
+      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$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$this$$pr = _this$$refs3[this.$props.innerRef]) == null ? void 0 : (_this$$refs3$this$$pr2 = _this$$refs3$this$$pr.$el) == null ? void 0 : _this$$refs3$this$$pr2.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 _this9 = this;
@@ -2252,8 +2311,8 @@ var SearchBox = vue.defineComponent({
       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(),
@@ -2264,7 +2323,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, {
@@ -2455,7 +2514,7 @@ var SearchBox = vue.defineComponent({
                     }), _transformOn(getItemEvents({
                       item: sectionItem
                     })), {
-                      "key": index + sectionIndex,
+                      "key": sectionItem._id + "_" + index + "_" + sectionIndex,
                       "style": {
                         justifyContent: 'flex-start',
                         alignItems: 'center'
@@ -2466,7 +2525,7 @@ var SearchBox = vue.defineComponent({
                     }), _transformOn(getItemEvents({
                       item: sectionItem
                     })), {
-                      "key": index + sectionIndex,
+                      "key": sectionItem._id + "_" + index + "_" + sectionIndex,
                       "style": {
                         justifyContent: 'flex-start',
                         alignItems: 'center'
@@ -2688,7 +2747,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';
@@ -3089,9 +3150,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';

package/dist/cjs/install.js

@@ -32,9 +32,9 @@ require('@appbaseio/analytics');
 require('url-search-params-polyfill');
 require('./ReactiveBase.js');
 require('hotkeys-js');
-require('remarkable');
 require('xss');
-var install = require('./install-5513d650.js');
+require('remarkable');
+var install = require('./install-a773d7d3.js');
 require('./DropDown-e8216602.js');
 require('./Input-3ecdb905.js');
 require('compute-scroll-into-view');

package/dist/cjs/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.0.0-rc.15";
+var version = "3.0.0-rc.17";
 
 exports.default = version;

package/dist/es/index.js

@@ -28,10 +28,10 @@ import '@appbaseio/analytics';
 import 'url-search-params-polyfill';
 export { default as ReactiveBase } from './ReactiveBase.js';
 import 'hotkeys-js';
-import 'remarkable';
 import 'xss';
-import { i as install } from './install-74c9185a.js';
-export { A as AIAnswer, R as ReactiveComponentPrivate, S as SearchBox, T as TreeList, i as install } from './install-74c9185a.js';
+import 'remarkable';
+import { i as install } from './install-45c35093.js';
+export { A as AIAnswer, R as ReactiveComponentPrivate, S as SearchBox, T as TreeList, i as install } from './install-45c35093.js';
 import './DropDown-845623df.js';
 import './Input-83dee8c5.js';
 import 'compute-scroll-into-view';