@appbaseio/reactivesearch-vue 3.0.0-rc.6.3 → 3.0.0-rc.6.5

package/dist/cjs/index.js

@@ -33,7 +33,7 @@ require('url-search-params-polyfill');
 var ReactiveBase = require('./ReactiveBase.js');
 require('hotkeys-js');
 require('remarkable');
-var install = require('./install-547d13b9.js');
+var install = require('./install-e8141489.js');
 require('./DropDown-aef75c14.js');
 require('./Input-56eba499.js');
 require('compute-scroll-into-view');

package/dist/cjs/{install-547d13b9.js → install-e8141489.js}

@@ -827,7 +827,7 @@ var resetCSS = function resetCSS(props) {
   // 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: " + (
   // 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\n\t}\n\n\tli{\n\t\tdisplay: unset;\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";
+  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";
 };
 var messageBGColor = function messageBGColor(props) {
   var finalBGColor;
@@ -2546,6 +2546,7 @@ var AIAnswer = vue.defineComponent({
     isLoading: vueTypes.types.boolRequired,
     sessionIdFromStore: VueTypes.string,
     showComponent: vueTypes.types.boolRequired,
+    componentError: vueTypes.types.componentObject,
     style: vueTypes.types.style
   },
   mounted: function mounted() {},
@@ -2572,7 +2573,7 @@ var AIAnswer = vue.defineComponent({
             role: constants.AI_ROLES.ASSISTANT,
             content: response.answer.text
           });
-          this.error = {
+          if (!this.AISessionId) this.error = {
             message: this.errorMessageForMissingSessionId
           };
         }
@@ -2590,7 +2591,6 @@ var AIAnswer = vue.defineComponent({
       });
     },
     isAIResponseLoading: function isAIResponseLoading(newVal) {
-      this.isLoadingState = newVal;
       this.$emit('on-data', {
         data: this.messages,
         rawData: this.$props.rawData,
@@ -2599,7 +2599,6 @@ var AIAnswer = vue.defineComponent({
       });
     },
     isLoading: function isLoading(newVal) {
-      this.isLoadingState = newVal;
       this.$emit('on-data', {
         data: this.messages,
         rawData: this.$props.rawData,
@@ -2631,14 +2630,50 @@ var AIAnswer = vue.defineComponent({
     },
     messages: function messages() {
       this.scrollToBottom();
+    },
+    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;
+        if (!this.AISessionId) {
+          this.generateNewSessionId();
+        }
+        newVal._bodyBlob.text().then(function (textData) {
+          try {
+            var parsedErrorRes = JSON.parse(textData);
+            if (parsedErrorRes.error) {
+              _this.error = parsedErrorRes.error;
+              _this.$emit('on-data', {
+                data: _this.messages,
+                rawData: _this.$props.rawData,
+                loading: _this.$props.isAIResponseLoading || _this.$props.isLoading,
+                error: parsedErrorRes.error
+              });
+            }
+          } catch (error) {
+            console.error('Error parsing component error JSON:', error);
+          }
+        })["catch"](function (error) {
+          console.error('Error reading  component error text data:', error);
+        });
+      }
     }
   },
   methods: {
+    generateNewSessionId: function generateNewSessionId() {
+      var _this2 = this;
+      var newSessionPromise = this.createAISession();
+      newSessionPromise.then(function (res) {
+        _this2.AISessionId = res.AIsessionId;
+      })["catch"](function (e) {
+        console.error(e);
+      });
+    },
     scrollToBottom: function scrollToBottom() {
-      var _this = this;
+      var _this3 = this;
       this.$nextTick(function () {
-        var _this$$refs;
-        var messageContainer = (_this$$refs = _this.$refs) == null ? void 0 : _this$$refs[_this.$props.innerRef];
+        var _this3$$refs;
+        var messageContainer = (_this3$$refs = _this3.$refs) == null ? void 0 : _this3$$refs[_this3.$props.innerRef];
         if (messageContainer && messageContainer.$el) {
           messageContainer.$el.scrollTo({
             top: messageContainer.$el.scrollHeight,
@@ -2705,7 +2740,7 @@ var AIAnswer = vue.defineComponent({
           "class": "--ai-answer-error-container " + (helper.getClassName(this.$props.innerClass, 'ai-error') || '')
         }, [vue.createVNode("div", {
           "class": "--default-error-element"
-        }, [vue.createVNode("span", null, [(_this$error = this.error) != null && _this$error.message ? this.error.message : 'There was an error in generating the response.', ' ', (_this$error2 = this.error) != null && _this$error2.code ? "Code:\n\t\t\t\t\t\t\t" + this.error.code : '']), this.AISessionId && vue.createVNode(Button.Button, {
+        }, [vue.createVNode("span", null, [(_this$error = this.error) != null && _this$error.message ? this.error.message : 'There was an error in generating the response.', ' ', (_this$error2 = this.error) != null && _this$error2.code ? ", Code:\n\t\t\t\t\t\t\t" + this.error.code : '']), this.AISessionId && vue.createVNode(Button.Button, {
           "primary": true,
           "onClick": this.handleRetryRequest
         }, {
@@ -2717,6 +2752,7 @@ var AIAnswer = vue.defineComponent({
       return null;
     },
     handleKeyPress: function handleKeyPress(e) {
+      window.console.log('e', e);
       if (e.key === 'Enter') {
         this.handleSendMessage(e);
         this.inputMessage = '';
@@ -2755,7 +2791,7 @@ var AIAnswer = vue.defineComponent({
       }
     },
     renderIcons: function renderIcons() {
-      var _this2 = this;
+      var _this4 = this;
       var _slot, _slot2;
       var _this$$props = this.$props,
         getMicInstance = _this$$props.getMicInstance,
@@ -2769,12 +2805,12 @@ var AIAnswer = vue.defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [!_this2.isLoadingState && _this2.AISessionId && _this2.shouldMicRender(showVoiceInput) && vue.createVNode(Mic, {
+          return [!_this4.isLoadingState && _this4.AISessionId && _this4.shouldMicRender(showVoiceInput) && vue.createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this2.handleVoiceResults,
+            "handleResult": _this4.handleVoiceResults,
             "class": helper.getClassName(innerClass, 'ai-search-mic') || null
-          }, null), iconPosition === 'right' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot = _this2.renderIcon()) ? _slot : {
+          }, null), iconPosition === 'right' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot = _this4.renderIcon()) ? _slot : {
             "default": function _default() {
               return [_slot];
             }
@@ -2786,7 +2822,7 @@ var AIAnswer = vue.defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [iconPosition === 'left' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot2 = _this2.renderIcon()) ? _slot2 : {
+          return [iconPosition === 'left' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot2 = _this4.renderIcon()) ? _slot2 : {
             "default": function _default() {
               return [_slot2];
             }
@@ -2798,7 +2834,7 @@ var AIAnswer = vue.defineComponent({
       this.handleSendMessage(e);
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this3 = this;
+      var _this5 = this;
       var _this$$props2 = this.$props,
         enterButton = _this$$props2.enterButton,
         innerClass = _this$$props2.innerClass;
@@ -2806,16 +2842,16 @@ var AIAnswer = vue.defineComponent({
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this3.enterButtonOnClick);
+            return renderEnterButton(_this5.enterButtonOnClick);
           }
           return vue.createVNode(SendButton, {
             "primary": true,
             "type": "submit",
             "tabIndex": 0,
-            "onClick": _this3.handleSendMessage,
-            "onKeyPress": _this3.handleKeyPress,
+            "onClick": _this5.handleSendMessage,
+            "onKeyPress": _this5.handleKeyPress,
             "class": "ask-btn " + helper.getClassName(innerClass, 'ai-enter-button'),
-            "disabled": _this3.isLoadingState || !_this3.AISessionId
+            "disabled": _this5.isLoadingState || !_this5.AISessionId
           }, {
             "default": function _default() {
               return [vue.createTextVNode("Send")];
@@ -2838,10 +2874,10 @@ var AIAnswer = vue.defineComponent({
       return index.getComponent(data, this);
     },
     handleTextAreaHeightChange: function handleTextAreaHeightChange() {
-      var _this$$refs2, _this$$refs2$_inputRe, _this$$refs3, _this$$refs3$_inputWr, _this$$refs4;
-      var textArea = (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$_inputRe = _this$$refs2[_inputRef]) == null ? void 0 : _this$$refs2$_inputRe.$el;
-      var inputWrapper = (_this$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$_inputWr = _this$$refs3[_inputWrapperRef]) == null ? void 0 : _this$$refs3$_inputWr.$el;
-      var errorContainer = (_this$$refs4 = this.$refs) == null ? void 0 : _this$$refs4[_errorContainerRef];
+      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 errorContainer = (_this$$refs3 = this.$refs) == null ? void 0 : _this$$refs3[_errorContainerRef];
       if (textArea) {
         textArea.style.height = '42px';
         var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
@@ -2873,21 +2909,20 @@ var AIAnswer = vue.defineComponent({
   },
   render: function render() {
     var _slot3;
-    var _this4 = this;
+    var _this6 = this;
     var props = this.$props;
     if (!this.shouldShowComponent) {
       return null;
     }
     return vue.createVNode(Chatbox, {
-      "style": props.style,
-      "class": "--ai-chat-box-wrapper"
+      "style": props.style || {}
     }, {
       "default": function _default() {
-        return [_this4.$props.title && vue.createVNode(Title.Title, {
-          "class": helper.getClassName(_this4.$props.innerClass, 'title') || ''
+        return [_this6.$props.title && vue.createVNode(Title.Title, {
+          "class": helper.getClassName(_this6.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this4.$props.title];
+            return [_this6.$props.title];
           }
         }), vue.createVNode(ChatContainer, {
           "class": "--ai-chat-container",
@@ -2895,33 +2930,33 @@ var AIAnswer = vue.defineComponent({
           "showInput": props.showInput
         }, {
           "default": function _default() {
-            return [_this4.hasCustomRenderer && vue.createVNode(MessagesContainer, {
-              "themePreset": _this4.themePreset,
+            return [_this6.hasCustomRenderer && vue.createVNode(MessagesContainer, {
+              "themePreset": _this6.themePreset,
               "theme": props.theme,
-              "ref": _this4.$props.innerRef,
+              "ref": _this6.$props.innerRef,
               "class": "--ai-message-container " + (helper.getClassName(props.innerClass, 'ai-message-container') || '')
-            }, _isSlot$1(_slot3 = _this4.getComponent()) ? _slot3 : {
+            }, _isSlot$1(_slot3 = _this6.getComponent()) ? _slot3 : {
               "default": function _default() {
                 return [_slot3];
               }
-            }), !_this4.hasCustomRenderer && vue.createVNode(MessagesContainer, {
-              "themePreset": _this4.themePreset,
+            }), !_this6.hasCustomRenderer && vue.createVNode(MessagesContainer, {
+              "themePreset": _this6.themePreset,
               "theme": props.theme,
-              "ref": _this4.$props.innerRef,
+              "ref": _this6.$props.innerRef,
               "class": "--ai-message-container " + (helper.getClassName(props.innerClass, 'ai-message-container') || '')
             }, {
               "default": function _default() {
-                return [_this4.messages.map(function (message, index) {
+                return [_this6.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": _this4.themePreset,
+                    "themePreset": _this6.themePreset,
                     "theme": props.theme,
                     "class": "--ai-answer-message " + (helper.getClassName(props.innerClass, 'ai-message') || '')
                   }, null);
-                }), _this4.isLoadingState && vue.createVNode(Message, {
-                  "themePreset": _this4.themePreset,
+                }), _this6.isLoadingState && vue.createVNode(Message, {
+                  "themePreset": _this6.themePreset,
                   "theme": props.theme,
                   "isSender": false,
                   "class": "--ai-answer-message " + (helper.getClassName(props.innerClass, 'ai-message') || null)
@@ -2930,31 +2965,31 @@ var AIAnswer = vue.defineComponent({
                     return [vue.createVNode(TypingIndicator, null, {
                       "default": function _default() {
                         return [vue.createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null), vue.createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null), vue.createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null)];
                       }
                     })];
                   }
                 })];
               }
-            }), _this4.renderErrorComponent(), ' ', props.showFeedback && vue.createVNode("div", {
+            }), _this6.renderErrorComponent(), ' ', props.showFeedback && vue.createVNode("div", {
               "class": "--ai-answer-feedback-container " + (helper.getClassName(props.innerClass, 'ai-feedback') || '')
             }, [vue.createVNode(AIFeedback, {
-              "hideUI": _this4.isLoadingState || !_this4.sessionId,
-              "key": _this4.sessionId,
+              "hideUI": _this6.isLoadingState || !_this6.sessionId,
+              "key": _this6.sessionId,
               "onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
-                _this4.trackUsefullness(_this4.sessionId, {
+                _this6.trackUsefullness(_this6.sessionId, {
                   useful: useful,
                   reason: reason
                 });
               }
             }, null)]), props.showInput && vue.createVNode(MessageInputContainer, {
               "class": "--ai-input-container",
-              "onSubmit": _this4.handleSendMessage
+              "onSubmit": _this6.handleSendMessage
             }, {
               "default": function _default() {
                 return [vue.createVNode(InputGroup, {
@@ -2968,23 +3003,21 @@ var AIAnswer = vue.defineComponent({
                       "default": function _default() {
                         return [vue.createVNode(MessageInput, {
                           "ref": _inputRef,
-                          "type": "text",
                           "placeholder": props.placeholder,
                           "enterButton": props.enterButton,
-                          "value": _this4.inputMessage,
-                          "onInput": _this4.handleMessageInputChange,
-                          "onKeyPress": _this4.handleKeyPress,
+                          "value": _this6.inputMessage,
+                          "onInput": _this6.handleMessageInputChange,
                           "id": props.componentId + "-ai-input",
                           "showIcon": props.showIcon,
                           "iconPosition": props.iconPosition,
-                          "themePreset": _this4.themePreset,
-                          "disabled": _this4.isLoadingState || !_this4.AISessionId,
+                          "themePreset": _this6.themePreset,
+                          "disabled": _this6.isLoadingState || !_this6.AISessionId,
                           "class": helper.getClassName(props.innerClass, 'ai-input') || null
-                        }, null), ' ', _this4.renderIcons()];
+                        }, null), ' ', _this6.renderIcons()];
                       }
                     })];
                   }
-                }), _this4.renderEnterButtonElement()];
+                }), _this6.renderEnterButtonElement()];
               }
             }), ' '];
           }
@@ -3011,12 +3044,14 @@ var mapStateToProps$1 = function mapStateToProps(state, props) {
     rawData: state.rawData[props.componentId],
     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 || ''
+    sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || '',
+    componentError: state.error[props.componentId]
   };
 };
 var mapDispatchToProps$1 = {
   getAIResponse: query.fetchAIResponse,
-  trackUsefullness: analytics.recordAISessionUsefulness
+  trackUsefullness: analytics.recordAISessionUsefulness,
+  createAISession: query.createAISession
 };
 var AIConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$1, mapDispatchToProps$1)(AIAnswer), {
   componentType: constants.componentTypes.AIAnswer,

package/dist/cjs/install.js

@@ -33,7 +33,7 @@ require('url-search-params-polyfill');
 require('./ReactiveBase.js');
 require('hotkeys-js');
 require('remarkable');
-var install = require('./install-547d13b9.js');
+var install = require('./install-e8141489.js');
 require('./DropDown-aef75c14.js');
 require('./Input-56eba499.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.6.3";
+var version = "3.0.0-rc.6.5";
 
 exports.default = version;

package/dist/es/index.js

@@ -29,8 +29,8 @@ import 'url-search-params-polyfill';
 export { default as ReactiveBase } from './ReactiveBase.js';
 import 'hotkeys-js';
 import 'remarkable';
-import { i as install } from './install-b0a1fd33.js';
-export { A as AIAnswer, R as ReactiveComponentPrivate, S as SearchBox, T as TreeList, i as install } from './install-b0a1fd33.js';
+import { i as install } from './install-b785dd55.js';
+export { A as AIAnswer, R as ReactiveComponentPrivate, S as SearchBox, T as TreeList, i as install } from './install-b785dd55.js';
 import './DropDown-39fedff8.js';
 import './Input-11d211d2.js';
 import 'compute-scroll-into-view';