@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
1,169 lines (1,163 loc) • 69.2 kB
JavaScript
import { Actions } from '@appbaseio/reactivecore';
import { AI_TRIGGER_MODES, AI_LOCAL_CACHE_KEY, AI_ROLES, componentTypes, TREELIST_VALUES_PATH_SEPARATOR } from '@appbaseio/reactivecore/lib/utils/constants';
import { b as _objectWithoutPropertiesLoose, a as _extends, _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { defineComponent, createVNode, createTextVNode, isVNode, mergeProps, h } from 'vue';
import VueTypes from 'vue-types';
import { getObjectFromLocalStorage, getClassName, setObjectInLocalStorage, recLookup, updateCustomQuery, updateDefaultQuery, transformTreeListLocalStateIntoQueryComptaibleFormat, isEqual, transformRawTreeListData, setDeep, getComponent as getComponent$1, getOptionsFromQuery, checkValueChange, getQueryOptions, getAggsQuery, updateInternalQuery, isFunction as isFunction$1 } from '@appbaseio/reactivecore/lib/utils/helper';
import { styled } from '@appbaseio/vue-emotion';
import { B as Button } from './Button-8178e39a.js';
import { t as types } from './vueTypes-5d575822.js';
import { RLConnected as ReactiveList } from './ReactiveList.js';
import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
import { h as hasCustomRenderer, a as isFunction, g as getComponent, c as connect } from './index-3af85a74.js';
import { C as ComponentWrapper } from './ComponentWrapper-90d42a29.js';
import { P as PreferencesConsumer } from './PreferencesConsumer-a2bd59db.js';
import { T as Title } from './Title-100fe896.js';
import { L as ListItem } from './ListItem-beea18db.js';
import { F as Flex } from './Flex-5d11362e.js';
import { recordAISessionUsefulness } from '@appbaseio/reactivecore/lib/actions/analytics';
import ReactiveBase from './ReactiveBase.js';
import { Remarkable } from 'remarkable';
import { F as Footer, b as SourceTags, c as SearchSvg, M as Mic, C as Chatbox, d as ChatContainer, e as MessagesContainer, f as Message, T as TypingIndicator, g as TypingDot, A as AIFeedback, h as MessageInputContainer, I as InputGroup, i as MessageInput, j as SendButton, S as SearchBox } from './SearchBox-559e0865.js';
import { a as IconGroup, I as IconWrapper, b as InputWrapper } from './CancelSvg-5b82ad4f.js';
import { I as Input } from './Input-cda7f4ad.js';
import { C as Container } from './Container-e2261542.js';
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-968ff972.js';
import { s as sanitizeObject } from './utils-badbb2a8.js';
import { ListConnected as SingleList } from './SingleList.js';
import { ListConnected as MultiList } from './MultiList.js';
import types$1 from '@appbaseio/reactivecore/lib/utils/types';
import { ListConnected as SingleDropdownList } from './SingleDropdownList.js';
import { ListConnected as MultiDropdownList } from './MultiDropdownList.js';
import { TBConnected as ToggleButton } from './ToggleButton.js';
import ReactiveComponent from './ReactiveComponent.js';
import { RangeConnected as DynamicRangeSlider } from './DynamicRangeSlider.js';
import { RangeConnected as SingleRange } from './SingleRange.js';
import { RangeConnected as MultiRange } from './MultiRange.js';
import { RangeConnected as RangeSlider } from './RangeSlider.js';
import { RangeConnected as RangeInput } from './RangeInput.js';
import SelectedFilters from './SelectedFilters.js';
import ResultCard from './ResultCard.js';
import ResultList from './ResultList.js';
import StateProvider from './StateProvider.js';
var _excluded = ["_source"];
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var md = new Remarkable();
md.set({
html: true,
breaks: true,
xhtmlOut: true,
linkify: true,
linkTarget: '_blank'
});
var _inputWrapperRef = 'inputWrapperRef';
var _inputRef = 'inputRef';
var _errorContainerRef = 'errorContainerRef';
var AIAnswer = defineComponent({
name: 'AIAnswer',
data: function data() {
var props = this.$props;
this.__state = {
messages: [],
inputMessage: '',
AISessionId: '',
error: null,
sourceDocIds: null,
initialHits: null,
isTriggered: false
};
this.internalComponent = props.componentId + "__internal";
return this.__state;
},
inject: {
theme: {
from: 'theme_reactivesearch'
}
},
created: function created() {
if (this.$props.triggerOn === AI_TRIGGER_MODES.ALWAYS) {
this.isTriggered = true;
} else if (this.$props.triggerOn === AI_TRIGGER_MODES.QUESTION && this.dependentComponentValue && this.dependentComponentValue.endsWith('?')) {
this.isTriggered = true;
if (this.AISessionId) {
this.handleSendMessage(null, false, '', true);
}
}
},
computed: {
hasCustomRenderer: function hasCustomRenderer$1() {
return hasCustomRenderer(this);
},
isLoadingState: function isLoadingState() {
return this.isAIResponseLoading || this.isLoading;
},
shouldShowComponent: function shouldShowComponent() {
return this.showComponent;
},
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: {
componentId: types.string.isRequired,
showVoiceInput: VueTypes.bool.def(false),
showFeedback: VueTypes.bool.def(true),
showIcon: VueTypes.bool.def(true),
onData: types.func,
innerRef: VueTypes.string.def('AISearchInputField'),
react: types.react,
enableAI: VueTypes.bool.def(true),
AIConfig: types.AIConfig,
iconPosition: types.iconPosition.def('left'),
icon: types.children,
iconURL: VueTypes.string.def(''),
renderMic: types.func,
getMicInstance: types.func,
innerClass: types.style,
placeholder: VueTypes.string.def('Ask a question'),
title: types.title,
enterButton: types.bool,
renderEnterButton: types.title,
showInput: VueTypes.bool.def(true),
clearSessionOnDestroy: VueTypes.bool.def(true),
render: types.func,
onError: types.func,
renderError: types.title,
style: types.style,
showSourceDocuments: VueTypes.bool.def(false),
renderSourceDocument: types.func,
onSourceClick: types.func,
triggerOn: VueTypes.string.def(AI_TRIGGER_MODES.ALWAYS),
renderTriggerMessage: types.func
},
mounted: function mounted() {},
watch: {
AIResponse: function AIResponse(newVal) {
if (newVal) {
if (this.$props.showSourceDocuments && newVal.response && newVal.response.answer && Array.isArray(newVal.response.answer.documentIds)) {
this.sourceDocIds = newVal.response.answer.documentIds;
var localCache = getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) && getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY)[this.$props.componentId];
if (localCache && localCache.meta && localCache.meta.hits) {
this.initialHits = localCache.meta.hits;
}
}
this.AISessionId = ((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || (((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).response || {}).sessionId;
var messagesHistory = newVal.messages,
response = newVal.response;
var finalMessages = [];
if (response && response.error) {
this.error = {
message: response.error
};
}
// pushing message history so far
if (messagesHistory && Array.isArray(messagesHistory)) {
finalMessages.push.apply(finalMessages, messagesHistory.filter(function (msg) {
return msg.role !== AI_ROLES.SYSTEM;
}));
if (finalMessages[0].role === AI_ROLES.USER) {
finalMessages.shift();
}
} else if (response && response.answer && response.answer.text) {
finalMessages.push({
role: AI_ROLES.ASSISTANT,
content: response.answer.text
});
if (!this.AISessionId) this.error = {
message: this.errorMessageForMissingSessionId
};
}
this.messages = finalMessages;
} else if (!newVal && !this.error) {
this.messages = [];
}
},
rawData: function rawData(newVal) {
this.$emit('on-data', {
data: this.messages,
rawData: newVal,
loading: this.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', {
data: this.messages,
rawData: this.$props.rawData,
loading: newVal || this.isLoading,
error: this.$props.AIResponseError
});
},
isLoading: function isLoading(newVal) {
this.$emit('on-data', {
data: this.messages,
rawData: this.$props.rawData,
loading: newVal || this.isAIResponseLoading,
error: this.$props.AIResponseError
});
},
sessionIdFromStore: function sessionIdFromStore(newVal) {
if (newVal) {
this.sessionId = newVal;
}
},
AIResponseError: function AIResponseError(newVal) {
this.error = newVal;
this.AISessionId = ((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || (((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).response || {}).sessionId;
if (this.error && !this.AISessionId) {
var errorMessage = this.errorMessageForMissingSessionId;
this.error = {
message: errorMessage
};
console.error(errorMessage);
}
this.$emit('on-data', {
data: this.messages,
rawData: this.$props.rawData,
loading: this.isAIResponseLoading || this.isLoading,
error: newVal
});
},
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 || (((getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).response || {}).sessionId;
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);
});
}
},
showComponent: function showComponent() {
if (this.$props.triggerOn === AI_TRIGGER_MODES.QUESTION && this.$props.dependentComponentValue.endsWith('?')) {
this.isTriggered = true;
}
},
dependentComponentValue: function dependentComponentValue(newVal) {
if (this.$props.triggerOn === 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 !== AI_TRIGGER_MODES.ALWAYS) {
this.isTriggered = false;
}
},
AISessionId: function AISessionId(newVal) {
if (newVal) {
if (this.$props.triggerOn === AI_TRIGGER_MODES.QUESTION && this.dependentComponentValue && this.dependentComponentValue.endsWith('?') || this.$props.triggerOn === AI_TRIGGER_MODES.ALWAYS) {
this.handleSendMessage(null, false, '', true);
}
}
},
triggerOn: function triggerOn(newVal) {
if (newVal === AI_TRIGGER_MODES.ALWAYS) {
this.isTriggered = true;
}
}
},
methods: {
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 === AI_TRIGGER_MODES.QUESTION) {
if (!this.dependentComponentValue.endsWith('?')) {
return createVNode("span", null, [createVNode("span", {
"role": "img",
"aria-label": "bulb"
}, [createTextVNode("\uD83D\uDCA1")]), createTextVNode("End your question with a question mark (?)")]);
}
} else if (triggerOn === AI_TRIGGER_MODES.MANUAL) {
return createVNode("span", null, [createTextVNode("Click here to ask AI"), ' ', createVNode("span", {
"role": "img",
"aria-label": "bulb"
}, [createTextVNode("\uD83E\uDD16")])]);
}
return null;
},
handleTriggerClick: function handleTriggerClick() {
if (this.$props.triggerOn === 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 = _objectWithoutPropertiesLoose(foundSourceObj, _excluded);
sourceObjects.push(_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 ? createVNode(Footer, {
"themePreset": this.$props.themePreset,
"style": {
marginTop: '1.5rem',
background: 'inherit'
}
}, {
"default": function _default() {
return [createTextVNode("Summary generated using the following sources:"), ' ', createVNode(SourceTags, null, _isSlot(_slot2 = _this3.getAISourceObjects().map(function (el) {
var _slot;
return createVNode(Button, {
"class": "--ai-source-tag " + (getClassName(_this3.$props.innerClass, 'ai-source-tag') || ''),
"info": true,
"onClick": function onClick() {
return onSourceClick && onSourceClick(el);
},
"key": el._id
}, _isSlot(_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) {
_this4.AISessionId = res.AIsessionId;
})["catch"](function (e) {
console.error(e);
});
},
scrollToBottom: function scrollToBottom() {
var _this5 = this;
this.$nextTick(function () {
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,
behavior: 'smooth'
});
}
});
},
handleMessageInputChange: function handleMessageInputChange(e) {
this.inputMessage = e.target.value;
this.handleTextAreaHeightChange();
},
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() || !text && !e) {
if (this.isLoadingState) {
return;
}
if (this.AISessionId) {
if (!isRetry) {
var finalMessages = [].concat(this.messages);
if (text) {
finalMessages.push({
content: text,
role: AI_ROLES.USER
});
}
this.messages = [].concat(finalMessages);
}
this.getAIResponse(this.AISessionId, this.componentId, text, fetchMeta);
} else {
console.error(this.errorMessageForMissingSessionId);
this.error = {
message: "AISessionId for " + this.$props.componentId + " is missing! AIAnswer component requires an AISessionId to function. Trying reloading the App."
};
}
this.inputMessage = '';
}
},
handleRetryRequest: function handleRetryRequest() {
if (this.messages && !this.isLoadingState) {
var _this$messages;
var lastUserRequestMessage = (_this$messages = this.messages[this.messages.length - 1]) == null ? void 0 : _this$messages.content;
if (this.AISessionId) {
this.getAIResponse(this.AISessionId, this.componentId, lastUserRequestMessage);
this.inputMessage = '';
} else {
console.error("AISessionId for " + this.componentId + " is missing! AIAnswer component requires an AISessionId to function. Try reloading the App.");
}
}
},
renderErrorComponent: function renderErrorComponent() {
var renderError = this.$slots.renderError || this.$props.renderError;
if (this.error && !this.isLoadingState) {
var _this$error, _this$error2;
if (renderError) {
return createVNode("div", {
"ref": _errorContainerRef,
"class": "--ai-answer-error-container " + (getClassName(this.$props.innerClass, 'ai-error') || '')
}, [isFunction(renderError) ? renderError(this.error, this.handleRetryRequest) : renderError]);
}
return createVNode("div", {
"ref": _errorContainerRef,
"class": "--ai-answer-error-container " + (getClassName(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, {
"primary": true,
"onClick": this.handleRetryRequest
}, {
"default": function _default() {
return [createTextVNode("Try again")];
}
})])]);
}
return null;
},
handleKeyPress: function handleKeyPress(e) {
if (e.key === 'Enter') {
this.handleSendMessage(e);
this.inputMessage = '';
}
},
renderIcon: function renderIcon() {
if (this.$props.showIcon) {
if (this.$props.icon) {
return this.$props.icon;
}
if (this.$slots.icon) {
return this.$slots.icon();
}
if (this.$props.iconURL) {
return createVNode("img", {
"style": {
maxHeight: '25px'
},
"src": this.$props.iconURL,
"alt": "search-icon"
}, null);
}
return createVNode(SearchSvg, null, null);
}
return null;
},
shouldMicRender: function shouldMicRender(showVoiceSearch) {
// checks for SSR
if (typeof window === 'undefined') return false;
return showVoiceSearch && (window.webkitSpeechRecognition || window.SpeechRecognition);
},
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 _this6 = this;
var _slot3, _slot4;
var _this$$props = this.$props,
getMicInstance = _this$$props.getMicInstance,
showVoiceInput = _this$$props.showVoiceInput,
iconPosition = _this$$props.iconPosition,
innerClass = _this$$props.innerClass;
var renderMic = this.$slots.renderMic || this.$props.renderMic;
return createVNode("div", null, [createVNode(IconGroup, {
"enableAI": true,
"groupPosition": "right",
"positionType": "absolute"
}, {
"default": function _default() {
return [!_this6.isLoadingState && _this6.AISessionId && _this6.shouldMicRender(showVoiceInput) && createVNode(Mic, {
"getInstance": getMicInstance,
"render": renderMic,
"handleResult": _this6.handleVoiceResults,
"class": getClassName(innerClass, 'ai-search-mic') || null
}, null), iconPosition === 'right' && createVNode(IconWrapper, null, _isSlot(_slot3 = _this6.renderIcon()) ? _slot3 : {
"default": function _default() {
return [_slot3];
}
})];
}
}), createVNode(IconGroup, {
"enableAI": true,
"groupPosition": "left",
"positionType": "absolute"
}, {
"default": function _default() {
return [iconPosition === 'left' && createVNode(IconWrapper, null, _isSlot(_slot4 = _this6.renderIcon()) ? _slot4 : {
"default": function _default() {
return [_slot4];
}
})];
}
})]);
},
enterButtonOnClick: function enterButtonOnClick(e) {
this.handleSendMessage(e);
},
renderEnterButtonElement: function renderEnterButtonElement() {
var _this7 = this;
var _this$$props2 = this.$props,
enterButton = _this$$props2.enterButton,
innerClass = _this$$props2.innerClass;
var renderEnterButton = this.$slots.renderEnterButton;
if (enterButton) {
var getEnterButtonMarkup = function getEnterButtonMarkup() {
if (renderEnterButton) {
return renderEnterButton(_this7.enterButtonOnClick);
}
return createVNode(SendButton, {
"primary": true,
"type": "submit",
"tabIndex": 0,
"onClick": _this7.handleSendMessage,
"onKeyPress": _this7.handleKeyPress,
"class": "ask-btn " + getClassName(innerClass, 'ai-enter-button'),
"disabled": _this7.isLoadingState || !_this7.AISessionId
}, {
"default": function _default() {
return [createTextVNode("Send")];
}
});
};
return createVNode("div", {
"class": "ai-enter-button-wrapper"
}, [getEnterButtonMarkup()]);
}
return null;
},
getComponent: function getComponent$1() {
var data = {
error: this.AIResponseError,
loading: this.isAIResponseLoading,
data: this.messages,
rawData: this.rawData
};
return getComponent(data, this);
},
handleTextAreaHeightChange: function handleTextAreaHeightChange() {
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';
var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
var maxHeight = lineHeight * 11; // max height for 10 lines
var height = Math.min(textArea.scrollHeight, maxHeight);
textArea.style.height = height + "px";
textArea.style.overflowY = height === maxHeight ? 'auto' : 'hidden';
// wrapper around input/ textarea
inputWrapper.style.height = height + "px";
// adjust error-container
if (errorContainer) {
errorContainer.style.bottom = height + "px";
}
this.$forceUpdate();
}
},
getTitle: function getTitle() {
var _this8 = this;
var hasTitle = this.$props.title || this.$slots.title || null;
if (hasTitle) {
return createVNode(Title, {
"class": getClassName(this.$props.innerClass, 'ai-title') || null
}, {
"default": function _default() {
return [_this8.$props.title || _this8.$slots.title()];
}
});
}
return null;
}
},
beforeUnmount: function beforeUnmount() {
if (this.$props.clearSessionOnDestroy) {
// cleanup logic
// final Object to store in local storage cache
var finalCacheObj = getObjectFromLocalStorage(AI_LOCAL_CACHE_KEY) || {};
// delete current component's cache
delete finalCacheObj[this.$props.componentId];
// update local cache
setObjectInLocalStorage(AI_LOCAL_CACHE_KEY, finalCacheObj);
}
},
render: function render() {
var _slot5;
var _this9 = this;
var props = this.$props;
if (!this.shouldShowComponent) {
return null;
}
if (!this.isTriggered) {
return createVNode(Chatbox, {
"style": props.style || {}
}, {
"default": function _default() {
return [_this9.getTitle(), createVNode("div", {
"class": "--trigger-message-wrapper",
"onClick": _this9.handleTriggerClick,
"aria-hidden": "true"
}, [_this9.renderTriggerMessageFunc()])];
}
});
}
return createVNode(Chatbox, {
"style": props.style || {}
}, {
"default": function _default() {
return [_this9.getTitle(), createVNode(ChatContainer, {
"class": "--ai-chat-container",
"theme": props.theme,
"showInput": props.showInput
}, {
"default": function _default() {
return [_this9.hasCustomRenderer && createVNode(MessagesContainer, {
"themePreset": _this9.themePreset,
"theme": props.theme,
"ref": _this9.$props.innerRef,
"class": "--ai-message-container " + (getClassName(props.innerClass, 'ai-message-container') || '')
}, _isSlot(_slot5 = _this9.getComponent()) ? _slot5 : {
"default": function _default() {
return [_slot5];
}
}), !_this9.hasCustomRenderer && createVNode(MessagesContainer, {
"themePreset": _this9.themePreset,
"theme": props.theme,
"ref": _this9.$props.innerRef,
"class": "--ai-message-container " + (getClassName(props.innerClass, 'ai-message-container') || '')
}, {
"default": function _default() {
return [_this9.messages.map(function (message, index) {
return createVNode(Message, {
"key": index,
"isSender": message.role === AI_ROLES.USER,
"innerHTML": md.render(message.content),
"themePreset": _this9.themePreset,
"theme": props.theme,
"class": "--ai-answer-message " + (getClassName(props.innerClass, 'ai-message') || '')
}, null);
}), _this9.isLoadingState && createVNode(Message, {
"themePreset": _this9.themePreset,
"theme": props.theme,
"isSender": false,
"class": "--ai-answer-message " + (getClassName(props.innerClass, 'ai-message') || null)
}, {
"default": function _default() {
return [createVNode(TypingIndicator, null, {
"default": function _default() {
return [createVNode(TypingDot, {
"themePreset": _this9.themePreset
}, null), createVNode(TypingDot, {
"themePreset": _this9.themePreset
}, null), createVNode(TypingDot, {
"themePreset": _this9.themePreset
}, null)];
}
})];
}
})];
}
}), _this9.renderErrorComponent(), ' ', props.showFeedback && !_this9.isLoadingState && !_this9.isAITyping && createVNode("div", {
"class": "--ai-answer-feedback-container " + (getClassName(props.innerClass, 'ai-feedback') || '')
}, [createVNode(AIFeedback, {
"hideUI": _this9.isLoadingState || !_this9.sessionId,
"key": _this9.sessionId,
"onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
_this9.trackUsefullness(_this9.sessionId, {
useful: useful,
reason: reason
});
}
}, null)]), ' ', _this9.renderAIScreenFooter(), props.showInput && !_this9.isLoadingState && !_this9.isAITyping && createVNode(MessageInputContainer, {
"class": "--ai-input-container",
"onSubmit": _this9.handleSendMessage
}, {
"default": function _default() {
return [createVNode(InputGroup, {
"enableAI": true,
"isOpen": false
}, {
"default": function _default() {
return [createVNode(InputWrapper, {
"ref": _inputWrapperRef
}, {
"default": function _default() {
return [createVNode(MessageInput, {
"ref": _inputRef,
"placeholder": props.placeholder,
"enterButton": props.enterButton,
"value": _this9.inputMessage,
"onInput": _this9.handleMessageInputChange,
"id": props.componentId + "-ai-input",
"showIcon": props.showIcon,
"iconPosition": props.iconPosition,
"themePreset": _this9.themePreset,
"disabled": _this9.isLoadingState || !_this9.AISessionId,
"class": getClassName(props.innerClass, 'ai-input') || null
}, null), ' ', _this9.renderIcons()];
}
})];
}
}), _this9.renderEnterButtonElement()];
}
}), ' '];
}
})];
}
});
}
});
AIAnswer.hasInternalComponent = function () {
return true;
};
var mapStateToProps = function mapStateToProps(state, props) {
var dependencyComponent = Object.values(props.react)[0];
if (Array.isArray(dependencyComponent)) {
// eslint-disable-next-line prefer-destructuring
dependencyComponent = dependencyComponent[0];
}
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,
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 || '',
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 = {
getAIResponse: function getAIResponse(sessionId, componentId, message, shouldFetchMeta) {
if (shouldFetchMeta === void 0) {
shouldFetchMeta = false;
}
return fetchAIResponse(sessionId, componentId, message, null, shouldFetchMeta);
},
trackUsefullness: recordAISessionUsefulness,
createAISession: createAISession
};
var AIConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(AIAnswer), {
componentType: componentTypes.AIAnswer,
internalComponent: true
}));
AIConnected.name = AIAnswer.name;
AIConnected.hasInternalComponent = AIAnswer.hasInternalComponent;
AIConnected.install = function (Vue) {
Vue.component(AIConnected.name, AIConnected);
};
// Add componentType for SSR
AIConnected.componentType = componentTypes.AIAnswer;
var _templateObject, _templateObject2;
var HierarchicalMenuList = styled('ul')(_templateObject || (_templateObject = _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 = styled('li')(_templateObject2 || (_templateObject2 = _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";
});
var HierarchicalMenuListItemComponent = {
name: 'HierarchicalMenuListItemComponent',
data: function data() {
return {
isExpanded: false,
newParentPath: ''
};
},
created: function created() {
var listItemLabel = this.listItem.key;
var newParentPath = listItemLabel;
if (this.parentPath) {
newParentPath = "" + this.parentPath + TREELIST_VALUES_PATH_SEPARATOR + listItemLabel;
}
this.newParentPath = newParentPath;
this.isExpanded = !!recLookup(this.selectedValues, newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
},
watch: {
listItem: function listItem(newVal) {
if (newVal.initiallyExpanded) {
this.isExpanded = newVal.initiallyExpanded;
}
},
selectedValues: function selectedValues(newVal) {
this.isExpanded = !!recLookup(newVal, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
}
},
props: {
parentPath: types$1.string,
selectedValues: types$1.rawData,
mode: types$1.string,
searchTerm: types$1.string,
listItem: types$1.rawData,
showLine: types$1.bool,
renderItem: types$1.func,
handleListItemClick: types$1.func,
renderSwitcherIcon: types$1.func,
showCheckbox: VueTypes.bool,
innerClass: types$1.style,
showRadio: VueTypes.bool,
renderIcon: types$1.func,
showCount: VueTypes.bool,
showSwitcherIcon: types$1.bool,
switcherIcon: types$1.children
},
render: function render() {
var _this = this;
var _this$$props = this.$props,
selectedValues = _this$$props.selectedValues,
mode = _this$$props.mode,
searchTerm = _this$$props.searchTerm,
listItem = _this$$props.listItem,
parentPath = _this$$props.parentPath,
showLine = _this$$props.showLine,
renderItem = _this$$props.renderItem,
handleListItemClick = _this$$props.handleListItemClick,
showCheckbox = _this$$props.showCheckbox,
innerClass = _this$$props.innerClass,
showRadio = _this$$props.showRadio,
renderIcon = _this$$props.renderIcon,
showCount = _this$$props.showCount,
showSwitcherIcon = _this$$props.showSwitcherIcon;
if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
return null;
}
var listItemLabel = listItem.key;
var listItemCount = listItem.count;
var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
if (showSwitcherIcon === false) {
return null;
}
var switcherIcon = _this.$props.switcherIcon;
if (switcherIcon) return switcherIcon(isExpandedProp);
return (
/* eslint-disable jsx-a11y/click-events-have-key-events
, jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
createVNode("span", {
"tabIndex": "0",
"onClick": function onClick(e) {
e.stopPropagation();
_this.isExpanded = !_this.isExpanded;
},
"class": "--switcher-icon"
}, [createTextVNode("\u27A4")])
);
};
var isSelected = false;
if (mode === 'single') {
if (recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR) === true) {
isSelected = true;
}
} else {
isSelected = !!recLookup(selectedValues, this.newParentPath, TREELIST_VALUES_PATH_SEPARATOR);
}
return createVNode(HierarchicalMenuListItem, {
"class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
"key": this.newParentPath,
"showLine": showLine
}, {
"default": function _default() {
return [createVNode(ListItem, {
"isTreeListItem": true,
"onClick": function onClick() {
handleListItemClick(listItemLabel, parentPath);
},
"style": {
textDecoration: 'none'
}
}, {
"default": function _default() {
return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : createVNode(Flex, {
"alignItems": "center",
"gap": "5px"
}, {
"default": function _default() {
return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && createVNode(Flex, {
"alignItems": "center",
"gap": "5px"
}, {
"default": function _default() {
return [createVNode(Checkbox, {
"type": "checkbox",
"class": getClassName(innerClass, 'checkbox') || null,
"checked": isSelected,
"id": listItemLabel + "-checkbox-" + _this.newParentPath,
"name": listItemLabel + "-checkbox-" + _this.newParentPath,
"show": true,
"readOnly": true
}, null), createVNode("label", {
"style": {
width: '26px',
marginTop: 0,
marginBottom: 0,
marginRight: '-9px',
left: '-3px'
},
"htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
"onClick": function onClick(e) {
e.stopPropagation();
}
}, null)];
}
}), mode === 'single' && showRadio && createVNode(Flex, {
"alignItems": "center",
"gap": "5px"
}, {
"default": function _default() {
return [createVNode(Radio, {
"checked": isSelected,
"class": getClassName(innerClass, 'radio') || null,
"id": listItemLabel + "-radio-" + _this.newParentPath,
"name": listItemLabel + "-radio-" + _this.newParentPath,
"show": true,
"readOnly": true,
"type": "radio"
}, null), createVNode("label", {
"style": {
width: '26px',
marginTop: 0,
marginBottom: 0,
marginRight: '-9px',
left: '-3px'
},
"htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
"onClick": function onClick(e) {
e.stopPropagation();
}
}, null)];
}
}), ' ', renderIcon(isLeafNode), createVNode("div", {
"class": "--list-item-label-count-wrapper"
}, [createVNode("span", {
"class": "--list-item-label " + (getClassName(innerClass, 'label') || '')
}, [listItemLabel]), showCount && createVNode("span", {
"class": "--list-item-count " + (getClassName(innerClass, 'count') || '')
}, [listItemCount])])];
}
})];
}
}), isLeafNode === false && createVNode("div", {
"class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
}, [createVNode(HierarchicalMenuComponent, {
"key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
"listArray": listItem.list,
"parentPath": _this.newParentPath,
"isExpanded": _this.isExpanded,
"listItemProps": {
mode: mode,
selectedValues: selectedValues,
searchTerm: searchTerm,
showLine: showLine,
renderItem: renderItem,
handleListItemClick: handleListItemClick,
renderSwitcherIcon: renderSwitcherIcon,
showCheckbox: showCheckbox,
innerClass: innerClass,
showRadio: showRadio,
renderIcon: renderIcon,
showCount: showCount,
showSwitcherIcon: showSwitcherIcon,
switcherIcon: _this.$props.switcherIcon
}
}, null)])];
}
});
}
};
function _isSlot$1(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var HierarchicalMenuComponent = {
name: 'HierarchicalMenuComponent',
props: {
listArray: VueTypes.arrayOf(VueTypes.object),
// array of objects
parentPath: VueTypes.string.def(''),
isExpanded: VueTypes.bool.def(false),
listItemProps: types$1.rawData
},
render: function render() {
var _slot;
var _this$$props = this.$props,
listArray = _this$$props.listArray,
isExpanded = _this$$props.isExpanded,
parentPath = _this$$props.parentPath,
listItemProps = _this$$props.listItemProps;
if (!Array.isArray(listArray) || listArray.length === 0) {
return null;
}
return createVNode(HierarchicalMenuList, {
"class": "" + (isExpanded ? '--open' : ''),
"isSelected": isExpanded
}, _isSlot$1(_slot = listArray.map(function (listItem) {
return createVNode(HierarchicalMenuListItemComponent, mergeProps({
"key": parentPath + "__" + JSON.stringify(listItem),
"parentPath": parentPath,
"listItem": listItem
}, listItemProps), null);
})) ? _slot : {
"default": function _default() {
return [_slot];
}
});
}
};
function _isSlot$2(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var updateQueryAction = Actions.updateQuery,
setQueryOptions = Actions.setQueryOptions;
var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
var valueToSet = {};
if (valueArray.length) {
var newSelectedValues = {};
valueArray.forEach(function (valueItem) {
setDeep(newSelectedValues, valueItem.split(' > '), !recLookup(newSelectedValues, valueItem.split(' > '), TREELIST_VALUES_PATH_SEPARATOR), true);
});
valueToSet = newSelectedValues;
}
return valueToSet;
};
var TreeList = {
name: 'TreeList',
props: {
selectedValue: types.selectedValue,
error: types.title,
rawData: types.rawData,
aggregationData: types.rawData,
themePreset: types.themePreset,
updateQueryAction: types.funcRequired,
setQueryOptions: types.funcRequired,
// component props
componentId: types.string.isRequired,
className: types.string,
style: types.style,
showRadio: VueTypes.bool.def(false),
showCheckbox: types.bool.def(false),
mode: VueTypes.oneOf(['single', 'multiple']).def('multiple'),
showCount: VueTypes.bool.def(false),
showSearch: VueTypes.bool.def(false),
showIcon: VueTypes.bool.def(false),
icon: types.children,
showLeafIcon: VueTypes.bool.def(false),
leafIcon: types.children,
showLine: VueTypes.bool.def(false),
switcherIcon: types.func,
render: types.func,
renderItem: types.func,
innerClass: types.style,
placeholder: types.string,
title: types.title,
isLoading: types.bool,
dataField: types.stringArray.isRequired,
onQueryChange: types.func,
defaultValue: types.stringArray,
value: types.stringArray,
customQuery: types.func,
defaultQuery: types.func,
enableAppbase: types.bool,
index: types.string,
showFilter: types.bool,
URLParams: types.bool,
filterLabel: types.string,
onChange: types.func,
onValueChange: types.func,
beforeValueChange: types.func,
sortBy: types.sortByWithCount.def('count'),
onError: types.func,
showSwitcherIcon: types.bool.def(true),
renderError: types.title,
renderNoResults: types.func,
loader: types.title,
aggergationSize: types.number,
endpoint: types.endpoint,
queryFormat: types.queryFormatSearch.def('or'),
size: types.number.def(100),
nestedField: types.string,
react: types.react,
transformData: types.func,
selectAllLabel: types.string,
showMissing: VueTypes.bool.def(false),
missingLabel: VueTypes.string.def('N/A')
},
data: funct