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

package/dist/es/{install-b0a1fd33.js → install-b785dd55.js}

@@ -26,7 +26,7 @@ import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as
 import { n as noSuggestions, T as TextArea, I as Input, s as suggestionsContainer, a as suggestions } from './Input-11d211d2.js';
 import { C as Container } from './Container-d00219f7.js';
 import Highlight from 'vue-highlight-words';
-import { fetchAIResponse } from '@appbaseio/reactivecore/lib/actions/query';
+import { fetchAIResponse, createAISession } from '@appbaseio/reactivecore/lib/actions/query';
 import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 import { C as Checkbox, R as Radio } from './FormControlList-fe6eaee4.js';
 import { s as sanitizeObject } from './utils-d7dd4f4e.js';
@@ -823,7 +823,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;
@@ -2542,6 +2542,7 @@ var AIAnswer = defineComponent({
     isLoading: types.boolRequired,
     sessionIdFromStore: VueTypes.string,
     showComponent: types.boolRequired,
+    componentError: types.componentObject,
     style: types.style
   },
   mounted: function mounted() {},
@@ -2568,7 +2569,7 @@ var AIAnswer = defineComponent({
             role: AI_ROLES.ASSISTANT,
             content: response.answer.text
           });
-          this.error = {
+          if (!this.AISessionId) this.error = {
             message: this.errorMessageForMissingSessionId
           };
         }
@@ -2586,7 +2587,6 @@ var AIAnswer = defineComponent({
       });
     },
     isAIResponseLoading: function isAIResponseLoading(newVal) {
-      this.isLoadingState = newVal;
       this.$emit('on-data', {
         data: this.messages,
         rawData: this.$props.rawData,
@@ -2595,7 +2595,6 @@ var AIAnswer = defineComponent({
       });
     },
     isLoading: function isLoading(newVal) {
-      this.isLoadingState = newVal;
       this.$emit('on-data', {
         data: this.messages,
         rawData: this.$props.rawData,
@@ -2627,14 +2626,50 @@ var AIAnswer = defineComponent({
     },
     messages: function messages() {
       this.scrollToBottom();
+    },
+    componentError: function componentError(newVal) {
+      var _this = this;
+      if (newVal && newVal._bodyBlob) {
+        this.AISessionId = ((getObjectFromLocalStorage(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,
@@ -2701,7 +2736,7 @@ var AIAnswer = defineComponent({
           "class": "--ai-answer-error-container " + (getClassName$2(this.$props.innerClass, 'ai-error') || '')
         }, [createVNode("div", {
           "class": "--default-error-element"
-        }, [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 && createVNode(Button, {
+        }, [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 && createVNode(Button, {
           "primary": true,
           "onClick": this.handleRetryRequest
         }, {
@@ -2713,6 +2748,7 @@ var AIAnswer = defineComponent({
       return null;
     },
     handleKeyPress: function handleKeyPress(e) {
+      window.console.log('e', e);
       if (e.key === 'Enter') {
         this.handleSendMessage(e);
         this.inputMessage = '';
@@ -2751,7 +2787,7 @@ var AIAnswer = defineComponent({
       }
     },
     renderIcons: function renderIcons() {
-      var _this2 = this;
+      var _this4 = this;
       var _slot, _slot2;
       var _this$$props = this.$props,
         getMicInstance = _this$$props.getMicInstance,
@@ -2765,12 +2801,12 @@ var AIAnswer = defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [!_this2.isLoadingState && _this2.AISessionId && _this2.shouldMicRender(showVoiceInput) && createVNode(Mic, {
+          return [!_this4.isLoadingState && _this4.AISessionId && _this4.shouldMicRender(showVoiceInput) && createVNode(Mic, {
             "getInstance": getMicInstance,
             "render": renderMic,
-            "handleResult": _this2.handleVoiceResults,
+            "handleResult": _this4.handleVoiceResults,
             "class": getClassName$2(innerClass, 'ai-search-mic') || null
-          }, null), iconPosition === 'right' && createVNode(IconWrapper, null, _isSlot$1(_slot = _this2.renderIcon()) ? _slot : {
+          }, null), iconPosition === 'right' && createVNode(IconWrapper, null, _isSlot$1(_slot = _this4.renderIcon()) ? _slot : {
             "default": function _default() {
               return [_slot];
             }
@@ -2782,7 +2818,7 @@ var AIAnswer = defineComponent({
         "positionType": "absolute"
       }, {
         "default": function _default() {
-          return [iconPosition === 'left' && createVNode(IconWrapper, null, _isSlot$1(_slot2 = _this2.renderIcon()) ? _slot2 : {
+          return [iconPosition === 'left' && createVNode(IconWrapper, null, _isSlot$1(_slot2 = _this4.renderIcon()) ? _slot2 : {
             "default": function _default() {
               return [_slot2];
             }
@@ -2794,7 +2830,7 @@ var AIAnswer = 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;
@@ -2802,16 +2838,16 @@ var AIAnswer = defineComponent({
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this3.enterButtonOnClick);
+            return renderEnterButton(_this5.enterButtonOnClick);
           }
           return createVNode(SendButton, {
             "primary": true,
             "type": "submit",
             "tabIndex": 0,
-            "onClick": _this3.handleSendMessage,
-            "onKeyPress": _this3.handleKeyPress,
+            "onClick": _this5.handleSendMessage,
+            "onKeyPress": _this5.handleKeyPress,
             "class": "ask-btn " + getClassName$2(innerClass, 'ai-enter-button'),
-            "disabled": _this3.isLoadingState || !_this3.AISessionId
+            "disabled": _this5.isLoadingState || !_this5.AISessionId
           }, {
             "default": function _default() {
               return [createTextVNode("Send")];
@@ -2834,10 +2870,10 @@ var AIAnswer = defineComponent({
       return 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);
@@ -2869,21 +2905,20 @@ var AIAnswer = defineComponent({
   },
   render: function render() {
     var _slot3;
-    var _this4 = this;
+    var _this6 = this;
     var props = this.$props;
     if (!this.shouldShowComponent) {
       return null;
     }
     return createVNode(Chatbox, {
-      "style": props.style,
-      "class": "--ai-chat-box-wrapper"
+      "style": props.style || {}
     }, {
       "default": function _default() {
-        return [_this4.$props.title && createVNode(Title, {
-          "class": getClassName$2(_this4.$props.innerClass, 'title') || ''
+        return [_this6.$props.title && createVNode(Title, {
+          "class": getClassName$2(_this6.$props.innerClass, 'title') || ''
         }, {
           "default": function _default() {
-            return [_this4.$props.title];
+            return [_this6.$props.title];
           }
         }), createVNode(ChatContainer, {
           "class": "--ai-chat-container",
@@ -2891,33 +2926,33 @@ var AIAnswer = defineComponent({
           "showInput": props.showInput
         }, {
           "default": function _default() {
-            return [_this4.hasCustomRenderer && createVNode(MessagesContainer, {
-              "themePreset": _this4.themePreset,
+            return [_this6.hasCustomRenderer && createVNode(MessagesContainer, {
+              "themePreset": _this6.themePreset,
               "theme": props.theme,
-              "ref": _this4.$props.innerRef,
+              "ref": _this6.$props.innerRef,
               "class": "--ai-message-container " + (getClassName$2(props.innerClass, 'ai-message-container') || '')
-            }, _isSlot$1(_slot3 = _this4.getComponent()) ? _slot3 : {
+            }, _isSlot$1(_slot3 = _this6.getComponent()) ? _slot3 : {
               "default": function _default() {
                 return [_slot3];
               }
-            }), !_this4.hasCustomRenderer && createVNode(MessagesContainer, {
-              "themePreset": _this4.themePreset,
+            }), !_this6.hasCustomRenderer && createVNode(MessagesContainer, {
+              "themePreset": _this6.themePreset,
               "theme": props.theme,
-              "ref": _this4.$props.innerRef,
+              "ref": _this6.$props.innerRef,
               "class": "--ai-message-container " + (getClassName$2(props.innerClass, 'ai-message-container') || '')
             }, {
               "default": function _default() {
-                return [_this4.messages.map(function (message, index) {
+                return [_this6.messages.map(function (message, index) {
                   return createVNode(Message, {
                     "key": index,
                     "isSender": message.role === AI_ROLES.USER,
                     "innerHTML": md$1.render(message.content),
-                    "themePreset": _this4.themePreset,
+                    "themePreset": _this6.themePreset,
                     "theme": props.theme,
                     "class": "--ai-answer-message " + (getClassName$2(props.innerClass, 'ai-message') || '')
                   }, null);
-                }), _this4.isLoadingState && createVNode(Message, {
-                  "themePreset": _this4.themePreset,
+                }), _this6.isLoadingState && createVNode(Message, {
+                  "themePreset": _this6.themePreset,
                   "theme": props.theme,
                   "isSender": false,
                   "class": "--ai-answer-message " + (getClassName$2(props.innerClass, 'ai-message') || null)
@@ -2926,31 +2961,31 @@ var AIAnswer = defineComponent({
                     return [createVNode(TypingIndicator, null, {
                       "default": function _default() {
                         return [createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null), createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null), createVNode(TypingDot, {
-                          "themePreset": _this4.themePreset
+                          "themePreset": _this6.themePreset
                         }, null)];
                       }
                     })];
                   }
                 })];
               }
-            }), _this4.renderErrorComponent(), ' ', props.showFeedback && createVNode("div", {
+            }), _this6.renderErrorComponent(), ' ', props.showFeedback && createVNode("div", {
               "class": "--ai-answer-feedback-container " + (getClassName$2(props.innerClass, 'ai-feedback') || '')
             }, [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 && createVNode(MessageInputContainer, {
               "class": "--ai-input-container",
-              "onSubmit": _this4.handleSendMessage
+              "onSubmit": _this6.handleSendMessage
             }, {
               "default": function _default() {
                 return [createVNode(InputGroup, {
@@ -2964,23 +2999,21 @@ var AIAnswer = defineComponent({
                       "default": function _default() {
                         return [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": getClassName$2(props.innerClass, 'ai-input') || null
-                        }, null), ' ', _this4.renderIcons()];
+                        }, null), ' ', _this6.renderIcons()];
                       }
                     })];
                   }
-                }), _this4.renderEnterButtonElement()];
+                }), _this6.renderEnterButtonElement()];
               }
             }), ' '];
           }
@@ -3007,12 +3040,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: fetchAIResponse,
-  trackUsefullness: recordAISessionUsefulness
+  trackUsefullness: recordAISessionUsefulness,
+  createAISession: createAISession
 };
 var AIConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps$1, mapDispatchToProps$1)(AIAnswer), {
   componentType: componentTypes.AIAnswer,

package/dist/es/install.js

@@ -29,7 +29,7 @@ import 'url-search-params-polyfill';
 import './ReactiveBase.js';
 import 'hotkeys-js';
 import 'remarkable';
-export { i as default } from './install-b0a1fd33.js';
+export { i as default } from './install-b785dd55.js';
 import './DropDown-39fedff8.js';
 import './Input-11d211d2.js';
 import 'compute-scroll-into-view';

package/dist/es/version.js

@@ -1,3 +1,3 @@
-var version = "3.0.0-rc.6.3";
+var version = "3.0.0-rc.6.5";
 
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@appbaseio/reactivesearch-vue",
-    "version": "3.0.0-rc.6.3",
+    "version": "3.0.0-rc.6.5",
     "private": false,
     "main": "dist/cjs/index.js",
     "jsnext:main": "dist/es/index.js",
@@ -35,7 +35,7 @@
     "sideEffects": false,
     "dependencies": {
         "@appbaseio/analytics": "^1.2.0-alpha.1",
-        "@appbaseio/reactivecore": "10.0.0-alpha.24",
+        "@appbaseio/reactivecore": "10.0.0-alpha.26",
         "@appbaseio/vue-emotion": "0.6.0-alpha.6",
         "@emotion/css": "^11.10.5",
         "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",