react-autoql 3.4.6 → 3.5.0

package/dist/autoql.esm.js

@@ -6,16 +6,17 @@ import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import axios from 'axios';
+import _$1 from 'lodash';
 import React, { Fragment, Component } from 'react';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import PropTypes, { shape, string, number, bool, oneOf, arrayOf, func, instanceOf, oneOfType, array } from 'prop-types';
 import { BsArrowBarDown, BsArrowBarUp } from 'react-icons/bs';
 import { BiLineChart } from 'react-icons/bi';
-import { MdError, MdPlayCircleOutline, MdLock, MdInfoOutline, MdContentCopy, MdClose } from 'react-icons/md';
+import { MdError, MdLockOpen, MdPlayCircleOutline, MdLock, MdInfoOutline, MdContentCopy, MdClose } from 'react-icons/md';
 import { FiAlertTriangle, FiTrash2, FiSettings, FiSend, FiPlus, FiPauseCircle, FiBellOff, FiBell, FiMoreHorizontal, FiMoreVertical, FiFilter, FiEye, FiDownload, FiDatabase, FiCheck, FiCalendar, FiArrowLeft } from 'react-icons/fi';
 import { IoIosSearch, IoIosHourglass, IoIosGlobe, IoIosCloseCircleOutline } from 'react-icons/io';
 import { TiSortNumerically } from 'react-icons/ti';
-import { AiOutlineBook, AiOutlineQuestionCircle, AiOutlineMenu, AiOutlineBulb, AiOutlineEdit, AiOutlineFileText, AiOutlineDashboard, AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
+import { AiOutlineBook, AiOutlineQuestionCircle, AiOutlineMenu, AiOutlineBulb, AiOutlineEdit, AiOutlineFileText, AiOutlineDashboard, AiFillCaretUp, AiFillCaretDown, AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
 import { FaMicrophoneAlt } from 'react-icons/fa';
 import { GoReport } from 'react-icons/go';
 import ReactTooltip from 'react-tooltip';
@@ -23,7 +24,6 @@ import _isEqual from 'lodash.isequal';
 import _cloneDeep from 'lodash.clonedeep';
 import InfiniteScroll from 'react-infinite-scroller';
 import uuid from 'uuid';
-import _$1 from 'lodash';
 import parseNum from 'parse-num';
 import Popover from 'react-tiny-popover';
 import momentTZ from 'moment-timezone';
@@ -31,10 +31,12 @@ import ReactSelect from 'react-select';
 import ReactModal from 'react-modal';
 import _isEmpty from 'lodash.isempty';
 import disableScroll from 'disable-scroll';
+import moment from 'moment';
+import { UnmountClosed } from 'react-collapse';
 import HTMLRenderer from 'react-html-renderer';
 import { scaleOrdinal, scaleBand, scaleLinear } from 'd3-scale';
 import Autosuggest from 'react-autosuggest';
-import RecordRTC, { StereoAudioRecorder } from 'recordrtc';
+import SpeechRecognition from 'react-speech-recognition';
 import { ReactTabulator } from 'react-tabulator';
 import 'react-tabulator/lib/styles.css';
 import 'react-tabulator/css/bootstrap/tabulator_bootstrap.min.css';
@@ -46,18 +48,19 @@ import { symbol, symbolCircle, pie, arc } from 'd3-shape';
 import { entries } from 'd3-collection';
 import 'd3-transition';
 import Drawer from 'rc-drawer';
-import _includes from 'lodash.includes';
+import 'lodash.includes';
 import _has from 'lodash.has';
 import { Scrollbars } from 'react-custom-scrollbars';
 import LocalizedStrings from 'react-localization';
 import 'rc-drawer/assets/index.css';
+import Switch from 'react-switch';
 import sqlFormatter from 'sql-formatter';
 import ReactPaginate from 'react-paginate';
 import RGL, { WidthProvider } from 'react-grid-layout';
 import SplitterLayout from 'react-splitter-layout';
 import 'react-grid-layout/css/styles.css';
 import 'react-splitter-layout/lib/index.css';
-import SpeechRecognition from 'react-speech-recognition';
+import RecordRTC, { StereoAudioRecorder } from 'recordrtc';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -354,6 +357,63 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+
+      var F = function () {};
+
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
+
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ErrorBoundary, _React$Component);
 
@@ -473,13 +533,16 @@ var autoQLConfigDefault = {
   debug: false,
   test: false,
   enableAutocomplete: true,
+  enableQueryInterpretation: true,
+  defaultShowInterpretation: false,
   enableQueryValidation: true,
   enableQuerySuggestions: true,
   enableColumnVisibilityManager: true,
   enableDrilldowns: true,
   enableNotifications: false,
   enableSlackSharing: true,
-  enableTeamsSharing: true
+  enableTeamsSharing: true,
+  enableCSVDownload: false
 };
 var themeConfigDefault = {
   theme: 'light',
@@ -923,7 +986,8 @@ var formatChartLabel = function formatChartLabel(_ref) {
     case 'PERCENT':
       {
         if (Number(d)) {
-          formattedLabel = Numbro(d).format({
+          var p = Number(d) / 100;
+          formattedLabel = Numbro(p).format({
             output: 'percent',
             mantissa: 0
           });
@@ -1050,7 +1114,8 @@ var formatElement = function formatElement(_ref2) {
         case 'PERCENT':
           {
             if (Number(element)) {
-              formattedElement = Numbro(element).format('0.00%');
+              var p = Number(element) / 100;
+              formattedElement = Numbro(p).format('0.00%');
 
               if (htmlElement) {
                 htmlElement.classList.add("comparison-value-".concat(element < 0 ? 'negative' : 'positive'));
@@ -1211,7 +1276,7 @@ var supportsPieChart = function supportsPieChart(columns, chartData) {
 
   return true;
 };
-var getSupportedDisplayTypes = function getSupportedDisplayTypes(response, chartData) {
+var getSupportedDisplayTypes = function getSupportedDisplayTypes(response, chartData, shouldExcludePieChart) {
   try {
     if (!_get(response, 'data.data.display_type')) {
       return [];
@@ -1248,7 +1313,7 @@ var getSupportedDisplayTypes = function getSupportedDisplayTypes(response, chart
       // column, we should be able to chart anything
       var _supportedDisplayTypes = ['table', 'column', 'bar', 'line'];
 
-      if (supportsPieChart(columns, chartData)) {
+      if (supportsPieChart(columns, chartData) && !shouldExcludePieChart) {
         _supportedDisplayTypes.push('pie');
       } // create pivot based on month and year
 
@@ -1656,8 +1721,9 @@ var lang = new LocalizedStrings({
     queryPrompt: 'Type your queries here ',
     seeMore: 'See more',
     dataMessengerOptions: 'Options menu',
-    openConditionLocking: 'Open condition locking menu',
-    closeConditionLocking: 'Close condition locking menu',
+    openFilterLocking: 'Open filter locking menu',
+    closeFilterLocking: 'Close filter menu',
+    noFiltersLocked: 'No Filters are locked yet',
     clearDataResponses: 'Clear all queries & responses',
     closeDataMessenger: 'Close Data Messenger',
     searchQueries: 'Search relevant queries by topic',
@@ -1694,8 +1760,9 @@ var lang = new LocalizedStrings({
     queryPrompt: 'Escribe tus consultas aquí',
     seeMore: 'Ver más',
     dataMessengerOptions: 'Menú de opciones',
-    openConditionLocking: 'Abrir menú de bloqueo de condición',
-    closeConditionLocking: 'Cerrar menú de bloqueo de condición',
+    openFilterLocking: 'Abrir menú de filtrar',
+    closeFilterLocking: 'Cerrar menú de filtrar',
+    noFiltersLocked: 'Ningún filtro está bloqueado todavía',
     clearDataResponses: 'Borrar todas las consultas y respuestas',
     closeDataMessenger: 'Cerrar Data mesenger',
     searchQueries: 'Buscar consultas relevantes por tema',
@@ -2175,6 +2242,18 @@ var Icon = /*#__PURE__*/function (_React$Component) {
             break;
           }
 
+        case 'caret-down':
+          {
+            icon = /*#__PURE__*/React.createElement(AiFillCaretDown, null);
+            break;
+          }
+
+        case 'caret-up':
+          {
+            icon = /*#__PURE__*/React.createElement(AiFillCaretUp, null);
+            break;
+          }
+
         case 'react-autoql-bubbles':
           {
             icon = /*#__PURE__*/React.createElement("img", {
@@ -2514,6 +2593,12 @@ var Icon = /*#__PURE__*/function (_React$Component) {
             break;
           }
 
+        case 'unlock':
+          {
+            icon = /*#__PURE__*/React.createElement(MdLockOpen, null);
+            break;
+          }
+
         case 'warning':
           {
             icon = /*#__PURE__*/React.createElement(MdError, null);
@@ -2715,19 +2800,39 @@ var runQueryOnly = function runQueryOnly() {
       source = _ref4.source,
       AutoAEId = _ref4.AutoAEId;
 
-  var url; // if(window.location.href.includes('localhost') || window.location.href.includes('chata-ai-test-page')) {
-  //   url = `${domain}/autoql/api/v2/query?key=${apiKey}`
-  // } else {
+  var url = "".concat(domain, "/autoql/api/v1/query?key=").concat(apiKey);
+  var finalUserSelection = transformUserSelection(userSelection);
+  var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+  var conditions = {};
+
+  if (sessionConditions !== null) {
+    var _loop = function _loop(i) {
+      if (Object.keys(conditions).some(function (item) {
+        return item === sessionConditions[i].key;
+      })) {
+        item = Object.keys(conditions).find(function (key) {
+          return key === sessionConditions[i].key;
+        });
+        conditions[item].push(sessionConditions[i].value);
+      } else {
+        conditions[sessionConditions[i].key] = [sessionConditions[i].value];
+      }
+    };
+
+    for (var i = 0; i < sessionConditions.length; i++) {
+      var item;
 
-  url = "".concat(domain, "/autoql/api/v1/query?key=").concat(apiKey); // }
+      _loop(i);
+    }
+  }
 
-  var finalUserSelection = transformUserSelection(userSelection);
   var data = {
     text: query,
     source: formatSourceString(source),
     translation: debug ? 'include' : 'exclude',
     user_selection: finalUserSelection,
-    test: test
+    test: test,
+    session_locked_conditions: conditions
   };
 
   if (!query || !query.trim()) {
@@ -2992,10 +3097,9 @@ var fetchConditions = function fetchConditions() {
       token = _ref10.token,
       domain = _ref10.domain;
 
-  if (!domain || !apiKey || !token) {
-    return Promise.reject(new Error('Unauthenticated'));
-  }
-
+  // if (!domain || !apiKey || !token) {
+  //   return Promise.reject(new Error('Unauthenticated'))
+  // }
   var url = "".concat(domain, "/autoql/api/v1/query/condition-locking?key=").concat(apiKey);
   var config = {
     headers: {
@@ -3031,8 +3135,7 @@ var setConditions = function setConditions() {
     array.push({
       key: obj.key,
       keyword: obj.keyword,
-      // lock_flag: obj.lock_flag,
-      lock_flag: 1,
+      lock_flag: obj.lock_flag,
       show_message: obj.show_message,
       value: obj.value
     });
@@ -3305,15 +3408,24 @@ _defineProperty(Dictaphone, "defaultProps", {});
 
 var SpeechToTextButtonBrowser = SpeechRecognition(options$1)(Dictaphone);
 
-var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
-  _inherits(SpeechToTextBtn, _React$Component);
+function LoadingDots() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "response-loading",
+    "data-test": "loading-dots"
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
+}
 
-  var _super = _createSuper(SpeechToTextBtn);
+var autoCompleteArray$2 = [];
 
-  function SpeechToTextBtn() {
+var QueryInput = /*#__PURE__*/function (_React$Component) {
+  _inherits(QueryInput, _React$Component);
+
+  var _super = _createSuper(QueryInput);
+
+  function QueryInput() {
     var _this;
 
-    _classCallCheck(this, SpeechToTextBtn);
+    _classCallCheck(this, QueryInput);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -3321,14 +3433,15 @@ var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "UNIQUE_ID", uuid.v4());
+
+    _defineProperty(_assertThisInitialized(_this), "autoCompleteTimer", undefined);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isRecording: false,
-      currentQuery: 0,
-      resultHistory: [],
-      currentFile: '',
-      currentBlob: '',
-      showPopoverMessage: false,
-      errorMessage: ''
+      inputValue: '',
+      lastQuery: '',
+      suggestions: [],
+      isQueryRunning: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -3336,313 +3449,99 @@ var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-      if (_this.props.finalTranscript !== prevProps.finalTranscript) {
-        _this.props.onFinalTranscript(_this.props.finalTranscript);
-      } else if (_this.props.transcript !== prevProps.transcript) {
-        _this.props.onTranscriptChange(_this.props.transcript);
-      } else if (_this.props.interimTranscript !== prevProps.interimTranscript) {
-        _this.props.onTranscriptChange(_this.props.interimTranscript);
+      if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
+        setCSSVars(getThemeConfig(_this.props.themeConfig));
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "startRecording", function () {
-      _this.setState({
-        isRecording: true
-      });
-
-      navigator.getUserMedia({
-        audio: true
-      }, function (stream) {
-        _this.stream = stream;
-        _this.recordAudio = RecordRTC(_this.stream, {
-          type: 'audio',
-          mimeType: 'audio/webm',
-          desiredSampRate: 16000,
-          recorderType: StereoAudioRecorder,
-          numberOfAudioChannels: 1
-        });
-
-        _this.recordAudio.startRecording();
-      }, function (error) {
-        console.error(JSON.stringify(error));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onRecordStop", function (file, blob) {
-      _this.setState({
-        //  isConfirmingRecording: true,
-        currentFile: file,
-        currentBlob: blob //hasPlayedBack: false,
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      if (_this.autoCompleteTimer) {
+        clearTimeout(_this.autoCompleteTimer);
+      }
 
-      }, function () {
-        _this.sendWavFile(file);
-      });
+      if (_this.queryValidationTimer) {
+        clearTimeout(_this.queryValidationTimer);
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "stopRecording", function () {
-      _this.setState({
-        isRecording: false
-      });
+    _defineProperty(_assertThisInitialized(_this), "animateInputTextAndSubmit", function (_ref) {
+      var query = _ref.query,
+          userSelection = _ref.userSelection;
+          _ref.skipQueryValidation;
+          var source = _ref.source;
 
-      _this.recordAudio.stopRecording(function () {
-        var blob = _this.recordAudio.getBlob();
+      if (typeof query === 'string' && _get(query, 'length')) {
+        var _loop = function _loop(i) {
+          setTimeout(function () {
+            _this.setState({
+              inputValue: query.slice(0, i)
+            });
 
-        _this.onRecordStop(_this.blobToFile(blob), blob);
+            if (i === query.length) {
+              setTimeout(function () {
+                _this.submitQuery({
+                  queryText: query,
+                  userSelection: userSelection,
+                  skipQueryValidation: true,
+                  source: source
+                });
+              }, 300);
+            }
+          }, i * 50);
+        };
 
-        try {
-          _this.stream.getTracks().forEach(function (track) {
-            return track.stop();
-          });
-        } catch (error) {
-          console.error(error);
+        for (var i = 1; i <= query.length; i++) {
+          _loop(i);
         }
-      });
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "blobToFile", function (theBlob) {
-      //A Blob() is almost a File() - it's just missing the two properties below which we will add
-      theBlob.lastModifiedDate = new Date();
-      theBlob.name = 'speech.wav';
-      return theBlob;
-    });
+    _defineProperty(_assertThisInitialized(_this), "submitQuery", function () {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          queryText = _ref2.queryText,
+          userSelection = _ref2.userSelection,
+          skipQueryValidation = _ref2.skipQueryValidation,
+          source = _ref2.source;
 
-    _defineProperty(_assertThisInitialized(_this), "getMediaPermissionStatus", function () {
-      return navigator.permissions.query({
-        name: 'microphone'
-      }).then(function (permissionStatus) {
-        return permissionStatus.state;
+      // Cancel subscription to autocomplete since query was already submitted
+      if (_this.autoCompleteTimer) {
+        clearTimeout(_this.autoCompleteTimer);
+      }
+
+      _this.setState({
+        isQueryRunning: true,
+        inputValue: '',
+        suggestions: [],
+        queryValidationResponse: undefined,
+        queryValidationComponentId: uuid.v4()
       });
-    });
 
-    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function () {
-      ReactTooltip.hide();
+      var query = queryText || _this.state.inputValue;
+      var newSource = [].concat(_toConsumableArray(_this.props.source), [source || 'user']);
 
-      _this.startRecording();
-    });
+      if (query.trim()) {
+        _this.props.onSubmit(query);
+
+        if (skipQueryValidation) {
+          runQueryOnly(_objectSpread2(_objectSpread2(_objectSpread2({
+            query: query,
+            userSelection: userSelection
+          }, getAuthentication(_this.props.authentication)), getAutoQLConfig$1(_this.props.autoQLConfig)), {}, {
+            source: newSource,
+            AutoAEId: _this.props.AutoAEId
+          })).then(function (response) {
+            _this.props.onResponseCallback(response, query);
 
-    _defineProperty(_assertThisInitialized(_this), "sendWavFile", function (file) {
-      var url = "".concat(_this.props.authentication.domain, "/autoql/api/v1/query/speech-to-text?key=").concat(_this.props.authentication.apiKey);
-      var data = new FormData();
-      data.append('file', file, 'speech.wav');
-      var config = {
-        headers: {
-          Authorization: "Bearer ".concat(_this.props.authentication.token)
-        },
-        timeout: 30000
-      };
-      axios.post(url, data, config).then(function (res) {
-        _this.props.onTranscriptChange(res.data.data.transcription);
-      }).catch(function (error) {
-        if (error.response.status === 404) {
-          _this.setState({
-            errorMessage: 'Oops! Speech-to-text has not been enabled. Try typing a query instead.'
-          }, function () {
             _this.setState({
-              showPopoverMessage: true
+              isQueryRunning: false
             });
-          });
-        } else {
-          _this.setState({
-            errorMessage: 'Oops! Something wrong with your account'
-          }, function () {
+          }).catch(function (error) {
+            console.error(error);
+
+            _this.props.onResponseCallback(error);
+
             _this.setState({
-              showPopoverMessage: true
-            });
-          });
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "render", function () {
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Popover, {
-        isOpen: _this.state.showPopoverMessage,
-        padding: 20,
-        content: function content() {
-          return /*#__PURE__*/React.createElement("div", {
-            style: {
-              backgroundColor: '#FFD2D2',
-              opacity: 1,
-              paddingLeft: '10px',
-              paddingRight: '10px'
-            }
-          }, /*#__PURE__*/React.createElement(Icon, {
-            type: "warning-triangle"
-          }), " ", _this.state.errorMessage);
-        },
-        onClickOutside: function onClickOutside() {
-          return _this.setState({
-            showPopoverMessage: false
-          });
-        }
-      }, /*#__PURE__*/React.createElement("button", {
-        id: "react-autoql-voice-record-button",
-        "data-test": "speech-to-text-btn",
-        className: "chat-voice-record-button".concat(_this.state.isRecording ? ' listening' : ''),
-        onMouseDown: _this.onMouseDown,
-        onMouseUp: _this.stopRecording,
-        onMouseLeave: _this.state.isRecording ? _this.stopRecording : undefined,
-        "data-tip": "Hold for voice-to-text",
-        "data-for": "react-autoql-speech-to-text-tooltip",
-        "data-tip-disable": _this.state.isRecording
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "microphone"
-      }))), /*#__PURE__*/React.createElement(ReactTooltip, {
-        className: "react-autoql-tooltip",
-        id: "react-autoql-speech-to-text-tooltip",
-        effect: "solid",
-        delayShow: 800
-      }));
-    });
-
-    return _this;
-  }
-
-  return SpeechToTextBtn;
-}(React.Component);
-
-_defineProperty(SpeechToTextBtn, "propTypes", {
-  authentication: authenticationType,
-  themeConfig: themeConfigType,
-  transcript: PropTypes.string,
-  interimTranscript: PropTypes.string,
-  finalTranscript: PropTypes.string,
-  resetTranscript: PropTypes.func,
-  onTranscriptChange: PropTypes.func,
-  onFinalTranscript: PropTypes.func
-});
-
-_defineProperty(SpeechToTextBtn, "defaultProps", {
-  authentication: authenticationDefault,
-  themeConfig: themeConfigDefault
-});
-
-function LoadingDots() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "response-loading",
-    "data-test": "loading-dots"
-  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
-}
-
-var autoCompleteArray$2 = [];
-
-var QueryInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(QueryInput, _React$Component);
-
-  var _super = _createSuper(QueryInput);
-
-  function QueryInput() {
-    var _this;
-
-    _classCallCheck(this, QueryInput);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "UNIQUE_ID", uuid.v4());
-
-    _defineProperty(_assertThisInitialized(_this), "autoCompleteTimer", undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      inputValue: '',
-      lastQuery: '',
-      suggestions: [],
-      isQueryRunning: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
-      setCSSVars(getThemeConfig(_this.props.themeConfig));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-      if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
-        setCSSVars(getThemeConfig(_this.props.themeConfig));
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
-      if (_this.autoCompleteTimer) {
-        clearTimeout(_this.autoCompleteTimer);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "animateInputTextAndSubmit", function (_ref) {
-      var query = _ref.query,
-          userSelection = _ref.userSelection;
-          _ref.skipQueryValidation;
-          var source = _ref.source;
-
-      if (typeof query === 'string' && _get(query, 'length')) {
-        var _loop = function _loop(i) {
-          setTimeout(function () {
-            _this.setState({
-              inputValue: query.slice(0, i)
-            });
-
-            if (i === query.length) {
-              setTimeout(function () {
-                _this.submitQuery({
-                  queryText: query,
-                  userSelection: userSelection,
-                  skipQueryValidation: true,
-                  source: source
-                });
-              }, 300);
-            }
-          }, i * 50);
-        };
-
-        for (var i = 1; i <= query.length; i++) {
-          _loop(i);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "submitQuery", function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          queryText = _ref2.queryText,
-          userSelection = _ref2.userSelection,
-          skipQueryValidation = _ref2.skipQueryValidation,
-          source = _ref2.source;
-
-      // Cancel subscription to autocomplete since query was already submitted
-      if (_this.autoCompleteTimer) {
-        clearTimeout(_this.autoCompleteTimer);
-      }
-
-      var query = queryText || _this.state.inputValue;
-      var newSource = [].concat(_toConsumableArray(_this.props.source), [source || 'user']);
-
-      _this.setState({
-        isQueryRunning: true,
-        inputValue: ''
-      });
-
-      if (query.trim()) {
-        _this.props.onSubmit(query);
-
-        if (skipQueryValidation) {
-          runQueryOnly(_objectSpread2(_objectSpread2(_objectSpread2({
-            query: query,
-            userSelection: userSelection
-          }, getAuthentication(_this.props.authentication)), getAutoQLConfig$1(_this.props.autoQLConfig)), {}, {
-            source: newSource,
-            AutoAEId: _this.props.AutoAEId
-          })).then(function (response) {
-            _this.props.onResponseCallback(response, query);
-
-            _this.setState({
-              isQueryRunning: false
-            });
-          }).catch(function (error) {
-            console.error(error);
-
-            _this.props.onResponseCallback(error);
-
-            _this.setState({
-              isQueryRunning: false
+              isQueryRunning: false
             });
           });
         } else {
@@ -3712,6 +3611,9 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "focus", function () {
+      // if (this.queryValidationInputRef) {
+      //   this.queryValidationInputRef.focus()
+      // }
       if (_this.inputRef) {
         _this.inputRef.focus();
       } else {
@@ -3734,8 +3636,37 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref3) {
-      var value = _ref3.value;
+    _defineProperty(_assertThisInitialized(_this), "runQueryValidation", function (_ref3) {
+      var text = _ref3.text;
+
+      // Reset validation configuration since text has changed
+      _this.setState({
+        queryValidationResponse: undefined,
+        queryValidationComponentId: uuid.v4()
+      });
+
+      if (_this.queryValidationTimer) {
+        clearTimeout(_this.queryValidationTimer);
+      }
+
+      _this.queryValidationTimer = setTimeout(function () {
+        runQueryValidation(_objectSpread2({
+          text: text
+        }, getAuthentication(_this.props.authentication))).then(function (response) {
+          if (_this.state.inputValue === _get(response, 'data.data.query')) {
+            _this.setState({
+              queryValidationResponse: response,
+              queryValidationComponentId: uuid.v4()
+            });
+          }
+        }).catch(function (error) {
+          console.error(error);
+        });
+      }, 300);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref4) {
+      var value = _ref4.value;
 
       if (_this.autoCompleteTimer) {
         clearTimeout(_this.autoCompleteTimer);
@@ -3787,6 +3718,8 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputChange", function (e) {
+      //WIP
+      // this.runQueryValidation({ text: e.target.value })
       if (_this.userSelectedSuggestion && (e.keyCode === 38 || e.keyCode === 40)) {
         // keyup or keydown
         return; // return to let the component handle it...
@@ -3814,14 +3747,16 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-bar-container ".concat(_this.props.className, " ").concat(_this.props.autoCompletePlacement === 'below' ? 'autosuggest-bottom' : 'autosuggest-top'),
         "data-test": "chat-bar"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-chatbar-input-container"
       }, getAutoQLConfig$1(_this.props.autoQLConfig).enableAutocomplete ? /*#__PURE__*/React.createElement(Autosuggest, {
-        className: "auto-complete-chata",
+        lassName: "auto-complete-chata",
         onSuggestionsFetchRequested: _this.onSuggestionsFetchRequested,
         onSuggestionsClearRequested: _this.onSuggestionsClearRequested,
         getSuggestionValue: _this.userSelectedSuggestionHandler,
         suggestions: _this.state.suggestions,
-        ref: function ref(_ref4) {
-          _this.autoSuggest = _ref4;
+        ref: function ref(_ref5) {
+          _this.autoSuggest = _ref5;
         },
         renderSuggestion: function renderSuggestion(suggestion) {
           return /*#__PURE__*/React.createElement(Fragment, null, suggestion.name);
@@ -3837,9 +3772,24 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
           onFocus: _this.moveCaretAtEnd,
           autoFocus: true
         }
-      }) : /*#__PURE__*/React.createElement("div", {
-        className: "react-autoql-chatbar-input-container"
-      }, /*#__PURE__*/React.createElement("input", {
+      }) // <QueryInputWithValidation
+      //   authentication={getAuthentication(this.props.authentication)}
+      //   themeConfig={getThemeConfig(this.props.themeConfig)}
+      //   ref={(ref) => (this.queryValidationInputRef = ref)}
+      //   key={this.state.queryValidationComponentId}
+      //   response={this.state.queryValidationResponse}
+      //   placeholder={this.props.placeholder}
+      //   disabled={this.props.isDisabled}
+      //   showChataIcon={this.props.showChataIcon}
+      //   showLoadingDots={this.props.showLoadingDots}
+      //   submitQuery={this.submitQuery}
+      //   onKeyDown={this.onKeyDown}
+      //   onQueryValidationSelectOption={(query) => {
+      //     this.setState({ inputValue: query })
+      //     this.focus()
+      //   }}
+      // />
+      : /*#__PURE__*/React.createElement("input", {
         className: "react-autoql-chatbar-input".concat(_this.props.showChataIcon ? ' left-padding' : ''),
         placeholder: _this.props.placeholder || 'Type your queries here',
         value: _this.state.inputValue,
@@ -3861,19 +3811,21 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
         type: "react-autoql-bubbles-outlined"
       })), _this.props.showLoadingDots && _this.state.isQueryRunning && /*#__PURE__*/React.createElement("div", {
         className: "input-response-loading-container"
-      }, /*#__PURE__*/React.createElement(LoadingDots, null)), _this.props.enableVoiceRecord && /*#__PURE__*/React.createElement(SpeechToTextBtn, {
-        onTranscriptChange: _this.onTranscriptChange,
-        onFinalTranscript: _this.onFinalTranscript,
-        themeConfig: _this.props.themeConfig,
-        authentication: getAuthentication(_this.props.authentication)
-      }) // KEEP THIS FOR NOW
-      // <SpeechToTextButtonBrowser
+      }, /*#__PURE__*/React.createElement(LoadingDots, null)), _this.props.enableVoiceRecord &&
+      /*#__PURE__*/
+      // KEEP THIS FOR NOW
+      // <SpeechToTextBtn
       //   onTranscriptChange={this.onTranscriptChange}
       //   onFinalTranscript={this.onFinalTranscript}
       //   themeConfig={this.props.themeConfig}
       //   authentication={getAuthentication(this.props.authentication)}
       // />
-      ));
+      React.createElement(SpeechToTextButtonBrowser, {
+        onTranscriptChange: _this.onTranscriptChange,
+        onFinalTranscript: _this.onFinalTranscript,
+        themeConfig: _this.props.themeConfig,
+        authentication: getAuthentication(_this.props.authentication)
+      })));
     });
 
     return _this;
@@ -3999,7 +3951,7 @@ var ChataTable = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "saveAsCSV", function () {
       if (_this.ref && _this.ref.table) {
         _this.ref.table.download('csv', 'table.csv', {
-          delimiter: '\t'
+          delimiter: ','
         });
       }
     });
@@ -4067,7 +4019,7 @@ var ChataTable = /*#__PURE__*/function (_React$Component) {
         options: options,
         "data-custom-attr": "test-custom-attribute",
         className: "react-autoql-table",
-        height: "100%",
+        height: "98%",
         clipboard: true,
         download: true
       })));
@@ -7522,6 +7474,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("button", {
         className: "react-autoql-btn\n          ".concat(_this.props.className || '', "\n          ").concat(type, "\n          ").concat(size, "\n          ").concat(isDisabled ? ' disabled' : ''),
         "data-test": "react-autoql-btn",
+        "data-multiline": _this.props.multiline,
         style: _objectSpread2({}, _this.props.style),
         onClick: _this.props.onClick,
         "data-tip": _this.props.tooltip,
@@ -7549,6 +7502,7 @@ _defineProperty(Button, "propTypes", {
   onClick: PropTypes.func,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
+  multiline: PropTypes.bool,
   tooltip: PropTypes.string
 });
 
@@ -7557,6 +7511,7 @@ _defineProperty(Button, "defaultProps", {
   loading: false,
   size: 'large',
   disabled: false,
+  multiline: false,
   tooltip: undefined,
   onClick: function onClick() {}
 });
@@ -7938,6 +7893,10 @@ var ChataChart = /*#__PURE__*/function (_Component) {
         _this.updateMargins();
       }
 
+      if (!_isEqual(_this.props.isShowingInterpretation, prevProps.isShowingInterpretation)) {
+        _this.updateMargins();
+      }
+
       if (_this.props.type && _this.props.type !== prevProps.type && _this.props.type !== 'pie') {
         _this.updateMargins();
 
@@ -9241,14 +9200,15 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "supportedDisplayTypes", []);
 
-    _defineProperty(_assertThisInitialized(_this), "SAFETYNET_KEY", uuid.v4());
+    _defineProperty(_assertThisInitialized(_this), "QUERY_VALIDATION_KEY", uuid.v4());
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       displayType: null,
       tableFilters: [],
       suggestionSelection: _this.props.selectedSuggestion,
       QandAResponseCorrect: false,
-      QandASuggestions: []
+      QandASuggestions: [],
+      isShowingInterpretation: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -9270,6 +9230,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
 
 
         _this.setState({
+          isShowingInterpretation: getAutoQLConfig$1(_this.props.autoQLConfig).defaultShowInterpretation,
           displayType: isDisplayTypeValid(_this.props.queryResponse, _this.props.displayType) ? _this.props.displayType : getDefaultDisplayType(_this.props.queryResponse, _this.props.autoChartAggregations)
         });
 
@@ -9345,6 +9306,10 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           disableScroll.off();
         }
 
+        if (prevState.isShowingInterpretation !== _this.state.isShowingInterpretation) {
+          _this.forceUpdate();
+        }
+
         if (_this.props.optionsToolbarRef) {
           _this.props.optionsToolbarRef._isMounted && _this.props.optionsToolbarRef.forceUpdate();
         }
@@ -10266,11 +10231,22 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       }
 
       var formattedColumns = columns.map(function (col, i) {
+        /**
+         * EDIT:
+         * We no longer want to default to one over the other. Howeever, 
+         * I would like to hang onto this code for now incase we do want to
+         * include either/or in some cases in the future
+         */
         // Regardless of the BE response, we want to default to percent
-        if ((col.type === 'RATIO' || col.type === 'NUMBER') && _get(getDataFormatting(_this.props.dataFormatting), 'comparisonDisplay') === 'PERCENT') {
-          col.type = 'PERCENT';
-        }
-
+        // if (
+        //   (col.type === 'RATIO' || col.type === 'NUMBER') &&
+        //   _get(
+        //     getDataFormatting(this.props.dataFormatting),
+        //     'comparisonDisplay'
+        //   ) === 'PERCENT'
+        // ) {
+        //   col.type = 'PERCENT'
+        // }
         col.field = "".concat(i);
         col.title = col.display_name;
         col.id = uuid.v4();
@@ -10659,7 +10635,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       }
 
       if (_this.state.displayType === 'pivot_table') {
-        return /*#__PURE__*/React.createElement(ChataTable, {
+        return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(ChataTable, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
           key: _this.pivotTableID,
           ref: function ref(_ref6) {
@@ -10672,7 +10648,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           onFilterCallback: _this.onTableFilter,
           setFilterTagsCallback: _this.props.setFilterTagsCallback,
           enableColumnHeaderContextMenu: _this.props.enableColumnHeaderContextMenu
-        });
+        }));
       }
 
       return /*#__PURE__*/React.createElement(Fragment, null, _this.renderAllColumnsHiddenMessage(), /*#__PURE__*/React.createElement(ChataTable, {
@@ -10714,6 +10690,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
         columns: _this.chartTableColumns,
         height: height,
         width: width,
+        isShowingInterpretation: _this.state.isShowingInterpretation,
         dataFormatting: getDataFormatting(_this.props.dataFormatting),
         backgroundColor: _this.props.backgroundColor,
         activeChartElementKey: _this.props.activeChartElementKey,
@@ -10848,7 +10825,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       if (_get(queryResponse, 'data.data.replacements')) {
         return /*#__PURE__*/React.createElement(QueryValidationMessage, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
-          key: _this.SAFETYNET_KEY,
+          key: _this.QUERY_VALIDATION_KEY,
           response: _this.props.queryResponse,
           onSuggestionClick: function onSuggestionClick(_ref9) {
             var query = _ref9.query,
@@ -10973,30 +10950,103 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", null));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "render", function () {
-      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY));
-      var height = 0;
-      var width = 0;
+    _defineProperty(_assertThisInitialized(_this), "handleShowHide", function (e) {
+      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY)); // make room in response container for reverse translation text
 
-      if (responseContainer) {
-        height = responseContainer.clientHeight - getPadding(responseContainer).top - getPadding(responseContainer).bottom;
-        width = responseContainer.clientWidth - getPadding(responseContainer).left - getPadding(responseContainer).right;
+      if (document.getElementById("reverse-translation-".concat(_this.COMPONENT_KEY)) && getAutoQLConfig$1(_this.props.autoQLConfig).enableQueryInterpretation) {
+        if (e.isFullyOpened) {
+          responseContainer.style.height = "calc(100% - ".concat(e.contentHeight, "px)");
+        } else {
+          responseContainer.style.height = "calc(100% - 26px)";
+        }
       }
+    });
 
-      if (_this.props.height) {
-        height = _this.props.height;
-      }
+    _defineProperty(_assertThisInitialized(_this), "renderReverseTranslation", function () {
+      var queryResponse = _this.props.queryResponse;
+      var id = "reverse-translation-".concat(_this.COMPONENT_KEY);
+      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY));
 
-      if (_this.props.width) {
-        width = _this.props.width;
-      }
+      if (responseContainer && _get(queryResponse, 'data.data.interpretation')) {
+        // manipulate interpretation string to properly format various substrings
+        var reverseTranslation = _get(queryResponse, 'data.data.interpretation').replace(/(["'])(?:(?=(\\?))\2.)*?\1/gi, function (output) {
+          var text = output.replace(/'/g, '');
 
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
-        key: _this.COMPONENT_KEY,
-        id: "react-autoql-response-content-container-".concat(_this.COMPONENT_KEY),
-        "data-test": "query-response-wrapper",
+          if (_get(queryResponse, 'data.data.persistent_locked_conditions').includes(text) || _get(queryResponse, 'data.data.session_locked_conditions').includes(text)) {
+            return "\n              <a class=\"react-autoql-condition-link-filtered\">\n                <span class=\"material-icons react-autoql-custom-icon\">lock</span>\n                ".concat(' ', text, "\n              </a>\n            ");
+          } else {
+            return "<a class=\"react-autoql-condition-link\">".concat(text, "</a>");
+          }
+        }).replace(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/gi, function (output) {
+          return moment.utc(output).format('ll').toString();
+        });
+
+        return /*#__PURE__*/React.createElement("div", {
+          id: id,
+          className: "condition-lock-reverse-translation"
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            float: 'left',
+            minHeight: 20
+          } // onClick={() => {
+          //   this.setState({ 
+          //     isShowingInterpretation: !this.state.isShowingInterpretation 
+          //   })
+          // }}
+
+        }, /*#__PURE__*/React.createElement(Icon // type={this.state.isShowingInterpretation ? 'caret-down' : 'caret-right' } 
+        // data-tip={this.state.isShowingInterpretation ? "Hide query interpretation" : "Show query interpretation" } 
+        , {
+          type: "info" // data-for="react-autoql-interpretation"
+
+        }), ' '), /*#__PURE__*/React.createElement(UnmountClosed, {
+          onRest: _this.handleShowHide,
+          isOpened: true // isOpened={this.state.isShowingInterpretation}
+
+        }, /*#__PURE__*/React.createElement("strong", null, "Interpreted as:", ' '), /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            return _this.props.onConditionClickCallback();
+          },
+          dangerouslySetInnerHTML: {
+            __html: "".concat(reverseTranslation)
+          }
+        })));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "render", function () {
+      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY));
+      var translationContainer = document.getElementById("reverse-translation-".concat(_this.COMPONENT_KEY));
+      var height = 0;
+      var width = 0;
+
+      if (responseContainer) {
+        height = responseContainer.clientHeight - getPadding(responseContainer).top - getPadding(responseContainer).bottom;
+        width = responseContainer.clientWidth - getPadding(responseContainer).left - getPadding(responseContainer).right;
+      }
+
+      if (_this.props.height) {
+        if (translationContainer && getAutoQLConfig$1(_this.props.autoQLConfig).enableQueryInterpretation && _this.state.isShowingInterpretation) {
+          if (_this.state.isShowingInterpretation) {
+            height = _this.props.height - translationContainer.offsetHeight - 20;
+          } else {
+            height = _this.props.height - translationContainer.offsetHeight - 40;
+          }
+        } else {
+          height = _this.props.height;
+        }
+      }
+
+      if (_this.props.width) {
+        width = _this.props.width;
+      }
+
+      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
+        key: _this.COMPONENT_KEY,
+        id: "react-autoql-response-content-container-".concat(_this.COMPONENT_KEY),
+        "data-test": "query-response-wrapper",
         className: "react-autoql-response-content-container\n          ".concat(isTableType(_this.state.displayType) ? 'table' : '', "\n          ").concat(_this.state.displayType === 'html' ? 'html-content' : '')
-      }, _this.renderResponse(width, height), _get(getAuthentication(_this.props.authentication), 'isQandA') && _this.renderQandAResponseConfirmation()), _this.renderContextMenu());
+      }, _this.renderResponse(width, height), _get(getAuthentication(_this.props.authentication), 'isQandA') && _this.renderQandAResponseConfirmation()), !_this.props.isDashboardQuery && getAutoQLConfig$1(_this.props.autoQLConfig).enableQueryInterpretation ? _this.renderReverseTranslation() : null, _this.renderContextMenu());
     });
 
     return _this;
@@ -11011,13 +11061,13 @@ _defineProperty(QueryOutput, "propTypes", (_defineProperty2$1 = {
   authentication: authenticationType,
   themeConfig: themeConfigType,
   autoQLConfig: autoQLConfigType
-}, _defineProperty(_defineProperty2$1, "authentication", authenticationType), _defineProperty(_defineProperty2$1, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2$1, "dataConfig", shape({})), _defineProperty(_defineProperty2$1, "onSuggestionClick", func), _defineProperty(_defineProperty2$1, "displayType", string), _defineProperty(_defineProperty2$1, "renderTooltips", bool), _defineProperty(_defineProperty2$1, "onQueryValidationSelectOption", func), _defineProperty(_defineProperty2$1, "autoSelectQueryValidationSuggestion", bool), _defineProperty(_defineProperty2$1, "queryValidationSelections", arrayOf(shape({}))), _defineProperty(_defineProperty2$1, "renderSuggestionsAsDropdown", bool), _defineProperty(_defineProperty2$1, "suggestionSelection", string), _defineProperty(_defineProperty2$1, "height", number), _defineProperty(_defineProperty2$1, "width", number), _defineProperty(_defineProperty2$1, "hideColumnCallback", func), _defineProperty(_defineProperty2$1, "activeChartElementKey", string), _defineProperty(_defineProperty2$1, "onTableFilterCallback", func), _defineProperty(_defineProperty2$1, "enableColumnHeaderContextMenu", bool), _defineProperty(_defineProperty2$1, "isResizing", bool), _defineProperty(_defineProperty2$1, "enableDynamicCharting", bool), _defineProperty(_defineProperty2$1, "onDataConfigChange", func), _defineProperty(_defineProperty2$1, "onDisplayTypeUpdate", func), _defineProperty(_defineProperty2$1, "onColumnsUpdate", func), _defineProperty(_defineProperty2$1, "onNoneOfTheseClick", func), _defineProperty(_defineProperty2$1, "autoChartAggregations", bool), _defineProperty(_defineProperty2$1, "onSupportedDisplayTypesChange", func), _defineProperty2$1));
+}, _defineProperty(_defineProperty2$1, "authentication", authenticationType), _defineProperty(_defineProperty2$1, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2$1, "dataConfig", shape({})), _defineProperty(_defineProperty2$1, "onSuggestionClick", func), _defineProperty(_defineProperty2$1, "displayType", string), _defineProperty(_defineProperty2$1, "renderTooltips", bool), _defineProperty(_defineProperty2$1, "onQueryValidationSelectOption", func), _defineProperty(_defineProperty2$1, "autoSelectQueryValidationSuggestion", bool), _defineProperty(_defineProperty2$1, "queryValidationSelections", arrayOf(shape({}))), _defineProperty(_defineProperty2$1, "renderSuggestionsAsDropdown", bool), _defineProperty(_defineProperty2$1, "suggestionSelection", string), _defineProperty(_defineProperty2$1, "height", number), _defineProperty(_defineProperty2$1, "width", number), _defineProperty(_defineProperty2$1, "hideColumnCallback", func), _defineProperty(_defineProperty2$1, "activeChartElementKey", string), _defineProperty(_defineProperty2$1, "onTableFilterCallback", func), _defineProperty(_defineProperty2$1, "enableColumnHeaderContextMenu", bool), _defineProperty(_defineProperty2$1, "isResizing", bool), _defineProperty(_defineProperty2$1, "enableDynamicCharting", bool), _defineProperty(_defineProperty2$1, "onDataConfigChange", func), _defineProperty(_defineProperty2$1, "onDisplayTypeUpdate", func), _defineProperty(_defineProperty2$1, "onColumnsUpdate", func), _defineProperty(_defineProperty2$1, "onNoneOfTheseClick", func), _defineProperty(_defineProperty2$1, "autoChartAggregations", bool), _defineProperty(_defineProperty2$1, "onSupportedDisplayTypesChange", func), _defineProperty(_defineProperty2$1, "onConditionClickCallback", func), _defineProperty(_defineProperty2$1, "isDashboardQuery", bool), _defineProperty(_defineProperty2$1, "enableQueryInterpretation", bool), _defineProperty(_defineProperty2$1, "defaultShowInterpretation", bool), _defineProperty2$1));
 
 _defineProperty(QueryOutput, "defaultProps", (_defineProperty3 = {
   authentication: authenticationDefault,
   themeConfig: themeConfigDefault,
   autoQLConfig: autoQLConfigDefault
-}, _defineProperty(_defineProperty3, "authentication", authenticationDefault), _defineProperty(_defineProperty3, "dataFormatting", dataFormattingDefault), _defineProperty(_defineProperty3, "dataConfig", undefined), _defineProperty(_defineProperty3, "queryResponse", undefined), _defineProperty(_defineProperty3, "displayType", undefined), _defineProperty(_defineProperty3, "queryInputRef", undefined), _defineProperty(_defineProperty3, "onSuggestionClick", undefined), _defineProperty(_defineProperty3, "renderTooltips", true), _defineProperty(_defineProperty3, "autoSelectQueryValidationSuggestion", true), _defineProperty(_defineProperty3, "queryValidationSelections", undefined), _defineProperty(_defineProperty3, "renderSuggestionsAsDropdown", false), _defineProperty(_defineProperty3, "selectedSuggestion", undefined), _defineProperty(_defineProperty3, "height", undefined), _defineProperty(_defineProperty3, "width", undefined), _defineProperty(_defineProperty3, "activeChartElementKey", undefined), _defineProperty(_defineProperty3, "enableColumnHeaderContextMenu", false), _defineProperty(_defineProperty3, "isResizing", false), _defineProperty(_defineProperty3, "enableDynamicCharting", true), _defineProperty(_defineProperty3, "onNoneOfTheseClick", undefined), _defineProperty(_defineProperty3, "autoChartAggregations", true), _defineProperty(_defineProperty3, "onDataClick", function onDataClick() {}), _defineProperty(_defineProperty3, "onQueryValidationSelectOption", function onQueryValidationSelectOption() {}), _defineProperty(_defineProperty3, "onSupportedDisplayTypesChange", function onSupportedDisplayTypesChange() {}), _defineProperty(_defineProperty3, "hideColumnCallback", function hideColumnCallback() {}), _defineProperty(_defineProperty3, "onTableFilterCallback", function onTableFilterCallback() {}), _defineProperty(_defineProperty3, "onDataConfigChange", function onDataConfigChange() {}), _defineProperty(_defineProperty3, "onErrorCallback", function onErrorCallback() {}), _defineProperty(_defineProperty3, "onDisplayTypeUpdate", function onDisplayTypeUpdate() {}), _defineProperty(_defineProperty3, "onColumnsUpdate", function onColumnsUpdate() {}), _defineProperty3));
+}, _defineProperty(_defineProperty3, "authentication", authenticationDefault), _defineProperty(_defineProperty3, "dataFormatting", dataFormattingDefault), _defineProperty(_defineProperty3, "dataConfig", undefined), _defineProperty(_defineProperty3, "queryResponse", undefined), _defineProperty(_defineProperty3, "displayType", undefined), _defineProperty(_defineProperty3, "queryInputRef", undefined), _defineProperty(_defineProperty3, "onSuggestionClick", undefined), _defineProperty(_defineProperty3, "renderTooltips", true), _defineProperty(_defineProperty3, "autoSelectQueryValidationSuggestion", true), _defineProperty(_defineProperty3, "queryValidationSelections", undefined), _defineProperty(_defineProperty3, "renderSuggestionsAsDropdown", false), _defineProperty(_defineProperty3, "selectedSuggestion", undefined), _defineProperty(_defineProperty3, "height", undefined), _defineProperty(_defineProperty3, "width", undefined), _defineProperty(_defineProperty3, "activeChartElementKey", undefined), _defineProperty(_defineProperty3, "enableColumnHeaderContextMenu", false), _defineProperty(_defineProperty3, "isResizing", false), _defineProperty(_defineProperty3, "enableDynamicCharting", true), _defineProperty(_defineProperty3, "onNoneOfTheseClick", undefined), _defineProperty(_defineProperty3, "autoChartAggregations", true), _defineProperty(_defineProperty3, "isDashboardQuery", false), _defineProperty(_defineProperty3, "enableFilterLocking", false), _defineProperty(_defineProperty3, "onDataClick", function onDataClick() {}), _defineProperty(_defineProperty3, "onQueryValidationSelectOption", function onQueryValidationSelectOption() {}), _defineProperty(_defineProperty3, "onSupportedDisplayTypesChange", function onSupportedDisplayTypesChange() {}), _defineProperty(_defineProperty3, "hideColumnCallback", function hideColumnCallback() {}), _defineProperty(_defineProperty3, "onTableFilterCallback", function onTableFilterCallback() {}), _defineProperty(_defineProperty3, "onDataConfigChange", function onDataConfigChange() {}), _defineProperty(_defineProperty3, "onErrorCallback", function onErrorCallback() {}), _defineProperty(_defineProperty3, "onDisplayTypeUpdate", function onDisplayTypeUpdate() {}), _defineProperty(_defineProperty3, "onColumnsUpdate", function onColumnsUpdate() {}), _defineProperty(_defineProperty3, "onConditionClickCallback", function onConditionClickCallback() {}), _defineProperty3));
 
 var VizToolbar = /*#__PURE__*/function (_React$Component) {
   _inherits(VizToolbar, _React$Component);
@@ -12075,8 +12125,18 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
           switch (_context.prev = _context.next) {
             case 0:
               _this._isMounted = true;
-
-              _this.subscribeToNotificationCount();
+              /**
+               * If Data Messenger has enableNotificationsTab = true and
+               * the NotificationIcon is also present, subscribeToNotificationCount()
+               * will occasionally trigger an infinite loop.
+               * 
+               * Data Messenger will first check to see that the NotificationIcon
+               * isn't already present before triggering this function inside.
+               */
+
+              if (!_this.props.isAlreadyMountedInDOM) {
+                _this.subscribeToNotificationCount();
+              }
 
             case 2:
             case "end":
@@ -12210,7 +12270,8 @@ _defineProperty(NotificationIcon, "propTypes", {
   useDot: PropTypes.bool,
   clearCountOnClick: PropTypes.bool,
   onNewNotification: PropTypes.func,
-  onErrorCallback: PropTypes.func
+  onErrorCallback: PropTypes.func,
+  isAlreadyMountedInDOM: PropTypes.bool
 });
 
 _defineProperty(NotificationIcon, "defaultProps", {
@@ -12220,7 +12281,8 @@ _defineProperty(NotificationIcon, "defaultProps", {
   style: {},
   clearCountOnClick: true,
   onNewNotification: function onNewNotification() {},
-  onErrorCallback: function onErrorCallback() {}
+  onErrorCallback: function onErrorCallback() {},
+  isAlreadyMountedInDOM: false
 });
 
 var _excluded$1 = ["icon", "type"];
@@ -12527,7 +12589,7 @@ var RuleSimple = /*#__PURE__*/function (_React$Component) {
             return '<';
           }
 
-        case 'EQUALS':
+        case 'EQUAL_TO':
           {
             return '=';
           }
@@ -12585,9 +12647,9 @@ var RuleSimple = /*#__PURE__*/function (_React$Component) {
           label: '<',
           tooltip: 'Less Than'
         }, {
-          value: 'EQUALS',
+          value: 'EQUAL_TO',
           label: '=',
-          tooltip: 'Equals'
+          tooltip: 'EQUAL_TO'
         }, {
           value: 'EXISTS',
           label: 'Exists',
@@ -12930,8 +12992,8 @@ var NotificationItem = /*#__PURE__*/function (_React$Component) {
         var queryResponse = {
           data: _this.props.activeNotificationData
         };
-        _this.supportedDisplayTypes = getSupportedDisplayTypes(queryResponse);
-        var displayType = _this.supportedDisplayTypes.includes('column') ? 'column' : getDefaultDisplayType(queryResponse, _this.props.autoChartAggregations);
+        _this.supportedDisplayTypes = getSupportedDisplayTypes(queryResponse, undefined, true);
+        var displayType = _this.props.autoChartAggregations && _this.supportedDisplayTypes.includes('column') ? 'column' : getDefaultDisplayType(queryResponse, _this.props.autoChartAggregations);
 
         _this.setState({
           displayType: displayType
@@ -13260,7 +13322,7 @@ _defineProperty(NotificationItem, "defaultProps", {
   themeConfig: themeConfigDefault,
   activeNotificationData: undefined,
   showNotificationDetails: true,
-  autoChartAggregations: true,
+  autoChartAggregations: false,
   onRuleFetchCallback: function onRuleFetchCallback() {},
   onExpandCallback: function onExpandCallback() {},
   onDismissCallback: function onDismissCallback() {},
@@ -14892,7 +14954,7 @@ _defineProperty(NotificationFeed, "defaultProps", {
   themeConfig: themeConfigDefault,
   activeNotificationData: undefined,
   showNotificationDetails: true,
-  autoChartAggregations: true,
+  autoChartAggregations: false,
   showCreateAlertBtn: false,
   onCollapseCallback: function onCollapseCallback() {},
   onExpandCallback: function onExpandCallback() {},
@@ -15179,14 +15241,19 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
           type: "hour-glass"
         }), _this.hasError(notification) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
           type: "primary",
+          tooltip: "This Alert is no longer active. <br /> Click to re-initialze it.",
+          multiline: true,
           className: "react-autoql-re-initialize-btn",
-          tooltip: "Please re-initialize data alert",
           onClick: function onClick() {
-            return _this.props.handleInitialize(notification, _this.props.selectedDemoProjectId, _this.props.authentication);
+            _this.props.onAlertInitializationCallback(notification, _this.props.selectedDemoProjectId, _this.props.authentication);
+
+            _this.getDataAlerts();
           }
         }, /*#__PURE__*/React.createElement("span", {
           className: "react-autoql-re-initialize-btn-text"
-        }, "Re-Initialize")), /*#__PURE__*/React.createElement(Checkbox, {
+        }, /*#__PURE__*/React.createElement(Icon, {
+          type: "warning-triangle"
+        }), ' ', " Resend")), /*#__PURE__*/React.createElement(Checkbox, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
           type: "switch",
           className: "react-autoql-notification-disable-checkbox"
@@ -15273,7 +15340,8 @@ _defineProperty(DataAlerts, "defaultProps", {
   authentication: authenticationDefault,
   themeConfig: themeConfigDefault,
   showCreateAlertBtn: false,
-  onErrorCallback: function onErrorCallback() {}
+  onErrorCallback: function onErrorCallback() {},
+  onAlertInitializationCallback: function onAlertInitializationCallback() {}
 });
 
 var getInitialStateData$2 = function getInitialStateData(initialData) {
@@ -15542,7 +15610,7 @@ var Rule = /*#__PURE__*/function (_React$Component) {
             return '<';
           }
 
-        case 'EQUALS':
+        case 'EQUAL_TO':
           {
             return '=';
           }
@@ -15605,9 +15673,9 @@ var Rule = /*#__PURE__*/function (_React$Component) {
           label: '<',
           tooltip: 'Less Than'
         }, {
-          value: 'EQUALS',
+          value: 'EQUAL_TO',
           label: '=',
-          tooltip: 'Equals'
+          tooltip: 'EQUAL_TO'
         }, {
           value: 'EXISTS',
           label: /*#__PURE__*/React.createElement("span", null, "\u2203"),
@@ -17890,30 +17958,21 @@ var Input = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderToolbar", function () {
+      var _shouldShowButton;
+
       var displayType = _get(_this.props.responseRef, 'state.displayType');
 
       var response = _get(_this.props.responseRef, 'props.queryResponse');
 
       var isDataResponse = _get(response, 'data.data.display_type') === 'data';
-      var shouldShowButton = {
+      var shouldShowButton = (_shouldShowButton = {
         showFilterButton: isTableResponse(response, displayType) && !_this.areAllColumnsHidden() && _get(response, 'data.data.rows.length') > 1,
         showCopyButton: isTableResponse(response, displayType) && !_this.areAllColumnsHidden() && !!_get(response, 'data.data.rows.length'),
         showSaveAsCSVButton: isTableResponse(response, displayType) && !_this.areAllColumnsHidden() && !!_get(response, 'data.data.rows.length'),
         showSaveAsPNGButton: CHART_TYPES.includes(displayType),
         showHideColumnsButton: getAutoQLConfig$1(_this.props.autoQLConfig).enableColumnVisibilityManager && isTableResponse(response, displayType) && displayType !== 'pivot_table' && _get(response, 'data.data.columns.length') > 0,
-        showSQLButton: isDataResponse && getAutoQLConfig$1(_this.props.autoQLConfig).debug,
-        showDeleteButton: _this.props.enableDeleteBtn,
-        showReportProblemButton: !!_get(response, 'data.data.query_id'),
-        showCreateNotificationIcon: isDataResponse && getAutoQLConfig$1(_this.props.autoQLConfig).enableNotifications && !_this.isDrilldownResponse(),
-        showShareToSlackButton: false,
-        // This feature is disabled indefinitely
-        // isDataResponse &&
-        // getAutoQLConfig(this.props.autoQLConfig).enableSlackSharing,
-        showShareToTeamsButton: false // This feature is disabled indefinitely
-        // isDataResponse &&
-        // getAutoQLConfig(this.props.autoQLConfig).enableTeamsSharing,
-
-      };
+        showSQLButton: isDataResponse && getAutoQLConfig$1(_this.props.autoQLConfig).debug
+      }, _defineProperty(_shouldShowButton, "showSaveAsCSVButton", isDataResponse && getAutoQLConfig$1(_this.props.autoQLConfig).enableCSVDownload), _defineProperty(_shouldShowButton, "showDeleteButton", _this.props.enableDeleteBtn), _defineProperty(_shouldShowButton, "showReportProblemButton", !!_get(response, 'data.data.query_id')), _defineProperty(_shouldShowButton, "showCreateNotificationIcon", isDataResponse && getAutoQLConfig$1(_this.props.autoQLConfig).enableNotifications && !_this.isDrilldownResponse()), _defineProperty(_shouldShowButton, "showShareToSlackButton", false), _defineProperty(_shouldShowButton, "showShareToTeamsButton", false), _shouldShowButton);
       shouldShowButton.showMoreOptionsButton = shouldShowButton.showCopyButton || shouldShowButton.showSQLButton || shouldShowButton.showCreateNotificationIcon || shouldShowButton.showSaveAsCSVButton || shouldShowButton.showSaveAsPNGButton || shouldShowButton.showShareToSlackButton || shouldShowButton.showShareToTeamsButton; // If there is nothing to put in the toolbar, don't render it
 
       if (!Object.values(shouldShowButton).find(function (showButton) {
@@ -18220,12 +18279,17 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
           optionsToolbarRef: _this.optionsToolbarRef,
           onNoneOfTheseClick: _this.props.onNoneOfTheseClick,
           autoChartAggregations: _this.props.autoChartAggregations,
+          enableQueryInterpretation: _this.props.enableQueryInterpretation,
+          enableFilterLocking: _this.props.enableFilterLocking,
           reportProblemCallback: function reportProblemCallback() {
             if (_this.optionsToolbarRef) {
               _this.optionsToolbarRef.setState({
                 activeMenu: 'other-problem'
               });
             }
+          },
+          onConditionClickCallback: function onConditionClickCallback() {
+            _this.props.onConditionClickCallback();
           }
         }));
       }
@@ -18379,7 +18443,7 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
       if (_this.props.type === 'text' || _this.state.displayType === 'html') {
         return undefined;
       } else if (chartHeight) {
-        return chartHeight + 40;
+        return chartHeight + 120;
       }
 
       return '85%';
@@ -18400,23 +18464,6 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderLockedConditions", function () {
-      var response = _this.props.response;
-
-      var numRows = _get(response, 'data.data.rows.length');
-
-      var maxRowLimit = _get(response, 'data.data.row_limit');
-
-      if (_get(response, 'data.data.persistent_locked_conditions.length') > 0) {
-        return /*#__PURE__*/React.createElement(Icon, {
-          type: "lock",
-          className: maxRowLimit && numRows === maxRowLimit && !_this.allColumnsAreHidden() ? 'condition-info-icon-left-align' : 'condition-info-icon',
-          "data-tip": response.data.data.persistent_locked_conditions,
-          "data-for": "chart-element-tooltip"
-        });
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "render", function () {
       var _this$getChartDimensi2 = _this.getChartDimensions(),
           chartWidth = _this$getChartDimensi2.chartWidth,
@@ -18441,7 +18488,7 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
             return !col.visible;
           }) || _this.allColumnsAreHidden() ? '400px' : undefined
         }
-      }, _this.renderContent(chartWidth, chartHeight), _this.props.isDataMessengerOpen && _this.renderRightToolbar(), _this.props.isDataMessengerOpen && _this.renderLeftToolbar(), _this.renderDataLimitWarning(), _this.renderLockedConditions())));
+      }, _this.renderContent(chartWidth, chartHeight), _this.props.isDataMessengerOpen && _this.renderRightToolbar(), _this.props.isDataMessengerOpen && _this.renderLeftToolbar(), _this.renderDataLimitWarning())));
     });
 
     return _this;
@@ -18469,7 +18516,7 @@ _defineProperty(ChatMessage, "propTypes", (_defineProperty2 = {
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
   tableOptions: PropTypes.shape({}),
   enableColumnVisibilityManager: PropTypes.bool
-}, _defineProperty(_defineProperty2, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2, "onErrorCallback", PropTypes.func), _defineProperty(_defineProperty2, "onSuccessAlert", PropTypes.func), _defineProperty(_defineProperty2, "isResizing", PropTypes.bool), _defineProperty(_defineProperty2, "enableDynamicCharting", PropTypes.bool), _defineProperty(_defineProperty2, "scrollToBottom", PropTypes.func), _defineProperty(_defineProperty2, "onNoneOfTheseClick", PropTypes.func), _defineProperty(_defineProperty2, "autoChartAggregations", PropTypes.bool), _defineProperty2));
+}, _defineProperty(_defineProperty2, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2, "onErrorCallback", PropTypes.func), _defineProperty(_defineProperty2, "onSuccessAlert", PropTypes.func), _defineProperty(_defineProperty2, "isResizing", PropTypes.bool), _defineProperty(_defineProperty2, "enableDynamicCharting", PropTypes.bool), _defineProperty(_defineProperty2, "scrollToBottom", PropTypes.func), _defineProperty(_defineProperty2, "onNoneOfTheseClick", PropTypes.func), _defineProperty(_defineProperty2, "autoChartAggregations", PropTypes.bool), _defineProperty(_defineProperty2, "onConditionClickCallback", PropTypes.func), _defineProperty2));
 
 _defineProperty(ChatMessage, "defaultProps", {
   authentication: authenticationDefault,
@@ -18494,7 +18541,8 @@ _defineProperty(ChatMessage, "defaultProps", {
   enableDynamicCharting: true,
   autoChartAggregations: true,
   scrollToBottom: function scrollToBottom() {},
-  onNoneOfTheseClick: function onNoneOfTheseClick() {}
+  onNoneOfTheseClick: function onNoneOfTheseClick() {},
+  onConditionClickCallback: function onConditionClickCallback() {}
 });
 
 var QueryTipsTab = /*#__PURE__*/function (_React$Component) {
@@ -18800,11 +18848,22 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       inputValue: '',
       lastQuery: '',
       suggestions: [],
-      selectedConditions: []
+      selectedConditions: [],
+      isFetchingConditions: false,
+      isShowingInfo: false,
+      isShowingSettingInfo: false,
+      showMessage: {
+        type: 'unlock',
+        message: 'filter removed'
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
       try {
+        _this.setState({
+          isFetchingConditions: true
+        });
+
         fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
           var conditions = _get(response, 'data.data.data');
 
@@ -18821,9 +18880,25 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             });
           }
 
+          if (JSON.parse(sessionStorage.getItem("conditions")) !== null) {
+            var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+            for (var _i = 0; _i < sessionConditions.length; _i++) {
+              array.push({
+                id: sessionConditions[_i].id,
+                keyword: sessionConditions[_i].value,
+                value: sessionConditions[_i].value,
+                show_message: sessionConditions[_i].show_message,
+                key: sessionConditions[_i].key,
+                lock_flag: sessionConditions[_i].lock_flag
+              });
+            }
+          }
+
           _this.setState({
-            selectedConditions: array,
-            inputValue: ''
+            selectedConditions: array.sort(),
+            inputValue: '',
+            isFetchingConditions: false
           });
         });
       } catch (error) {
@@ -18831,32 +18906,34 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSuggestions", function (value) {
-      var inputValue = value.trim().toLowerCase();
-      var inputLength = inputValue.length;
-      return inputLength === 0 ? [] : languages.filter(function (lang) {
-        return lang.name.toLowerCase().slice(0, inputLength) === inputValue;
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "getSuggestionValue", function (suggestion) {
       var array = _this.state.selectedConditions;
-      array.push({
-        keyword: suggestion.name.keyword,
-        value: suggestion.name.keyword,
-        show_message: suggestion.name.show_message,
-        key: suggestion.name.canonical,
-        lock_flag: suggestion.name.lock_flag
-      });
+      var tempId = uuid.v4();
 
-      _this.setState({
-        selectedConditions: array,
-        inputValue: ''
-      });
-    });
+      if (array.some(function (item) {
+        return item.key === suggestion.name.canonical && item.value === suggestion.name.keyword;
+      })) {
+        _this.handleShowMessage('warning', 'This condition has already been applied.');
+      } else {
+        array.push({
+          id: tempId,
+          keyword: suggestion.name.keyword,
+          value: suggestion.name.keyword,
+          show_message: suggestion.name.show_message,
+          key: suggestion.name.canonical,
+          lock_flag: 1 // persist by default
+
+        });
+
+        _this.setState({
+          selectedConditions: array,
+          inputValue: ''
+        });
 
-    _defineProperty(_assertThisInitialized(_this), "renderSuggestion", function (suggestion) {
-      return /*#__PURE__*/React.createElement("div", null, _get(suggestion, 'name.keyword'));
+        setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
+          conditions: array
+        }));
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputChange", function (e) {
@@ -18873,27 +18950,62 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "removeCondition", function (item, index) {
-      var isSaved;
-      fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
-        _get(response, 'data.data.data').map(function (r) {
-          if (_includes(r, item.id)) {
-            isSaved = true;
-          }
+      var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+      var sessionIndex;
+
+      if (sessionConditions) {
+        sessionIndex = sessionConditions.findIndex(function (condition) {
+          return _get(condition, 'key') === _get(item, 'key');
         });
+      }
 
-        if (isSaved) {
-          unsetCondition(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
-            condition: item
-          }));
-        }
+      if (sessionIndex !== -1 && sessionIndex !== undefined && sessionIndex !== null) {
+        sessionConditions.splice(sessionIndex, 1);
+        sessionStorage.setItem('conditions', JSON.stringify(sessionConditions));
+      } else {
+        unsetCondition(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
+          condition: item
+        }));
+      }
 
-        var array = _this.state.selectedConditions;
-        array.splice(index, 1);
+      var array = _this.state.selectedConditions;
+      array.splice(index, 1);
 
+      _this.setState({
+        selectedConditions: array
+      });
+
+      _this.handleShowMessage('unlock', 'Filter removed.');
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handlePersistConditionToggle", function (item) {
+      var index = _this.state.selectedConditions.findIndex(function (condition) {
+        return condition.id === item.id;
+      });
+
+      var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+      if (index === -1) ; else {
         _this.setState({
-          selectedConditions: array
+          selectedConditions: [].concat(_toConsumableArray(_this.state.selectedConditions.slice(0, index)), [Object.assign({}, _this.state.selectedConditions[index], item.lock_flag === 1 ? _this.state.selectedConditions[index].lock_flag = 0 : _this.state.selectedConditions[index].lock_flag = 1)], _toConsumableArray(_this.state.selectedConditions.slice(index + 1)))
+        }, function () {
+          setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
+            conditions: _this.state.selectedConditions
+          }));
+
+          if (item.lock_flag === 0) {
+            if (sessionConditions == null) sessionConditions = [];
+            sessionConditions.push(item);
+            sessionStorage.setItem("conditions", JSON.stringify(sessionConditions));
+          } else {
+            var sessionIndex = sessionConditions.findIndex(function (condition) {
+              return condition.id === item.id;
+            });
+            sessionConditions.splice(sessionIndex, 1);
+            sessionStorage.setItem('conditions', JSON.stringify(sessionConditions));
+          }
         });
-      });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref) {
@@ -18917,13 +19029,13 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
           for (var i = 0; i < suggestionsMatchArray.length; i++) {
             sortingArray.push(suggestionsMatchArray[i]);
 
-            if (i === 4) {
+            if (i === 5) {
               break;
             }
           }
 
           sortingArray.sort(function (a, b) {
-            return b.length - a.length;
+            return a.keyword.toUpperCase() < b.keyword.toUpperCase() ? -1 : a.keyword > b.keyword ? 1 : 0;
           });
 
           for (var idx = 0; idx < sortingArray.length; idx++) {
@@ -18948,6 +19060,14 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderShowMessage", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        id: "react-autoql-condition-show-message"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: _this.state.showMessage.type
+      }), " ", _this.state.showMessage.message);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderAcceptConditionsButton", function () {
       return /*#__PURE__*/React.createElement("div", {
         key: "accept-conditions-btn",
@@ -18978,72 +19098,136 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         style: {
           width: containerWidth
         }
-      }, /*#__PURE__*/React.createElement("div", {
+      }, _this.renderShowMessage(), /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-condition-lock-header"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "autoql-condition-locking-menu-container"
-      }, /*#__PURE__*/React.createElement("button", {
+        className: "react-autoql-filter-locking-title-container"
+      }, /*#__PURE__*/React.createElement("h3", null, "Filter Locking ", ' ', /*#__PURE__*/React.createElement(Icon, {
+        type: "info",
+        onMouseEnter: function onMouseEnter() {
+          return setTimeout(function () {
+            _this.setState({
+              isShowingInfo: true
+            });
+          }, 300);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this.setState({
+            isShowingInfo: false
+          });
+        }
+      })), /*#__PURE__*/React.createElement("button", {
         onClick: function onClick() {
           _this.props.onClose();
         },
         className: "autoql-close-button",
-        "data-tip": lang.closeConditionLocking,
+        "data-tip": lang.closeFilterLocking,
         "data-for": "react-autoql-header-tooltip"
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "close"
-      })), /*#__PURE__*/React.createElement(Autosuggest, {
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "autoql-condition-locking-menu-container"
+      }, _this.state.isShowingInfo ? /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-filter-locking-empty-list"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "info"
+      }), /*#__PURE__*/React.createElement("p", null, "Filters can be applied to narrow down your query results. Locking a filter ensures that only the specific data you wish to see is returned.")) : null, /*#__PURE__*/React.createElement(Autosuggest, {
         ref: function ref(_ref2) {
           _this.autoSuggest = _ref2;
         },
+        highlightFirstSuggestion: true,
         suggestions: _this.state.suggestions,
         onSuggestionsFetchRequested: _this.onSuggestionsFetchRequested,
         onSuggestionsClearRequested: _this.onSuggestionsClearRequested,
         getSuggestionValue: _this.getSuggestionValue,
         renderSuggestion: function renderSuggestion(suggestion) {
-          return /*#__PURE__*/React.createElement(Fragment, null, suggestion.name.keyword);
+          return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("table", {
+            className: "autoql-condition-locking-menu-list"
+          }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+            style: {
+              width: 300
+            }
+          }, suggestion.name.keyword), /*#__PURE__*/React.createElement("td", null, suggestion.name.show_message)))));
         },
         inputProps: {
           onChange: _this.onInputChange,
           value: _this.state.inputValue,
-          placeholder: 'Search for a condition.',
+          disabled: _this.state.isFetchingConditions,
+          placeholder: 'Search & select a filter',
           className: 'react-autoql-condition-locking-input'
         }
-      }))), /*#__PURE__*/React.createElement("div", {
+      }), _this.state.isShowingSettingInfo ? /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-filter-setting-info-card"
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Icon, {
+        type: "info"
+      }), ' ', /*#__PURE__*/React.createElement("strong", null, "Persistent"), " filters remain locked at all times, unless the filter is removed.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Icon, {
+        type: "info"
+      }), ' ', /*#__PURE__*/React.createElement("strong", null, "Session"), " filters remain locked until you end your browser session.")) : null)), _this.state.isFetchingConditions ? /*#__PURE__*/React.createElement("div", {
+        className: "condition-list-loading-container"
+      }, /*#__PURE__*/React.createElement(LoadingDots, null)) : /*#__PURE__*/React.createElement("div", {
         className: "condition-list"
       }, _get(_this.state.selectedConditions, 'length') === 0 ? /*#__PURE__*/React.createElement("div", {
         className: "empty-condition-list"
-      }, /*#__PURE__*/React.createElement("p", null, "Condition locking is a tool to help you track a condition across many queries. This is useful if you want to focus on a specific location or timeframe but don't want to have to type it out for every query."), /*#__PURE__*/React.createElement("p", null, "You currently have no conditions locked. Use the search bar to find a condition you would like to track.")) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, lang.noFiltersLocked))) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         style: {
-          minHeight: 100
+          minHeight: 150
         }
       }, /*#__PURE__*/React.createElement("table", {
         className: "condition-table"
       }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("th", {
         scope: "col"
-      }, "Condition"), /*#__PURE__*/React.createElement("th", {
-        scope: "col"
-      }, "Category"), /*#__PURE__*/React.createElement("th", {
+      }, "Filter"), /*#__PURE__*/React.createElement("th", {
+        scope: "col",
+        style: {
+          minWidth: 154
+        }
+      }, "Settings", /*#__PURE__*/React.createElement(Icon, {
+        type: "info",
+        onMouseEnter: function onMouseEnter() {
+          return setTimeout(function () {
+            _this.setState({
+              isShowingSettingInfo: true
+            });
+          }, 300);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this.setState({
+            isShowingSettingInfo: false
+          });
+        }
+      })), /*#__PURE__*/React.createElement("th", {
         scope: "col",
         style: {
           display: 'table-cell',
           verticalAlign: 'middle',
           textAlign: 'right'
         }
-      }, "Actions")), /*#__PURE__*/React.createElement("tbody", null, _this.state.selectedConditions.map(function (item, index) {
+      })), /*#__PURE__*/React.createElement("tbody", null, _this.state.selectedConditions.map(function (item, index) {
         return /*#__PURE__*/React.createElement("tr", {
           key: index
-        }, /*#__PURE__*/React.createElement("td", null, item.keyword), /*#__PURE__*/React.createElement("td", null, item.show_message), /*#__PURE__*/React.createElement("td", {
+        }, /*#__PURE__*/React.createElement("td", {
+          className: "condition-table-list-item"
+        }, item.keyword, ' ', "(".concat(item.show_message, ")")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Switch, {
+          onChange: function onChange() {
+            return _this.handlePersistConditionToggle(item, index);
+          },
+          checked: item.lock_flag,
+          onColor: "#86d3ff",
+          onHandleColor: "#2693e6",
+          uncheckedIcon: false,
+          checkedIcon: false,
+          boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
+          activeBoxShadow: "0px 0px 1px 1px rgba(0, 0, 0, 0.2)",
+          handleDiameter: 16,
+          height: 18,
+          width: 34
+        }), ' ', item.lock_flag ? 'Persistent' : 'Session')), /*#__PURE__*/React.createElement("td", {
           style: {
             display: 'table-cell',
             verticalAlign: 'middle',
             textAlign: 'right'
           }
         }, /*#__PURE__*/React.createElement(ReactTooltip, {
-          className: "react-autoql-chart-tooltip",
-          id: "condition-lock-persist",
-          effect: "solid",
-          html: true
-        }), /*#__PURE__*/React.createElement(ReactTooltip, {
           className: "react-autoql-chart-tooltip",
           id: "react-autoql-remove-condition",
           effect: "solid",
@@ -19053,24 +19237,54 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             paddingLeft: 5,
             color: 'red'
           },
-          "data-tip": "Remove this condition",
+          "data-tip": "Remove filter",
           "data-for": "react-autoql-remove-condition",
           type: "trash",
           onClick: function onClick() {
             return _this.removeCondition(item, index);
           }
         })));
-      })), /*#__PURE__*/React.createElement("tfoot", null)))), _this.renderAcceptConditionsButton())));
+      })), /*#__PURE__*/React.createElement("tfoot", null))))), /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-condition-lock-menu-footer"
+      }, /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        disabled: _this.state.isFetchingConditions,
+        onClick: function onClick() {
+          _this.props.onClose();
+        }
+      }, "Continue"))));
     });
 
     return _this;
   }
 
+  _createClass(ConditionLockMenu, [{
+    key: "handleShowMessage",
+    value: function handleShowMessage(type, message) {
+      var el = document.getElementById('react-autoql-condition-show-message');
+      el.className = 'show';
+      el.style.animation = 'none';
+      setTimeout(function () {
+        el.style.animation = '';
+      }, 10);
+      setTimeout(function () {
+        el.className = el.className.replace('show', '');
+      }, 3000);
+      this.setState({
+        inputValue: '',
+        showMessage: {
+          type: type,
+          message: message
+        }
+      });
+    }
+  }]);
+
   return ConditionLockMenu;
 }(React.Component);
 
 _defineProperty(ConditionLockMenu, "propTypes", {
-  containerWidth: PropTypes.string,
+  containerWidth: PropTypes.number,
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
   authentication: authenticationType
@@ -19135,12 +19349,22 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           hasError: true
         });
       } // WIP
-      // fetchConditions({ ...getAuthentication(this.props.authentication) }).then(
-      //   (response) => {
-      //     this.setState({ conditions: _get(response, 'data.data.data') })
-      //   }
-      // )
 
+
+      try {
+        fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
+          var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+          _this.setState({
+            conditions: {
+              persistent: _get(response, 'data.data.data'),
+              session: sessionConditions
+            }
+          });
+        });
+      } catch (e) {
+        console.error(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps, prevState) {
@@ -19170,6 +19394,25 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         if (thisTheme && thisTheme !== prevTheme) {
           setCSSVars(getThemeConfig(getThemeConfig(_this.props.themeConfig)));
         }
+
+        if (_this.state.isConditionLockingMenuOpen !== prevState.isConditionLockingMenuOpen) {
+          fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
+            var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+            _this.setState({
+              conditions: {
+                persistent: _get(response, 'data.data.data'),
+                session: sessionConditions
+              }
+            });
+          });
+        }
+
+        if (_this.state.activePage !== prevState.activePage) {
+          _this.setState({
+            isConditionLockingMenuOpen: false
+          });
+        }
       } catch (error) {
         console.error(error);
 
@@ -19351,6 +19594,10 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
 
       if (_this.props.onMaskClick) {
         _this.props.onMaskClick();
+
+        _this.setState({
+          isConditionLockingMenuOpen: false
+        });
       }
 
       if (_this.props.onHandleClick) {
@@ -19724,6 +19971,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           },
           overflowCount: 9,
           useDot: true,
+          isAlreadyMountedInDOM: /*#__PURE__*/React.isValidElement( /*#__PURE__*/React.createElement(NotificationIcon, null)),
           onNewNotification: function onNewNotification() {
             // If a new notification is detected, refresh the list
             if (_this.notificationListRef && _this.state.activePage === 'notifications') {
@@ -19737,32 +19985,35 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderOptionsDropdown", function () {
       if (_this.state.activePage === 'data-messenger') {
-        return /*#__PURE__*/React.createElement(Popover, {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          id: "condition-dropdown",
+          style: {
+            justifyContent: 'left',
+            position: 'absolute',
+            right: 30
+          }
+        }, getAutoQLConfig$1(getAutoQLConfig$1(_this.props.autoQLConfig)).enableFilterLocking ? /*#__PURE__*/React.createElement("button", {
+          id: "condition-dropdown",
+          onClick: function onClick() {
+            _this.setState({
+              isConditionLockingMenuOpen: !_this.state.isConditionLockingMenuOpen
+            });
+          },
+          className: "react-autoql-drawer-header-btn clear-all",
+          "data-tip": lang.openFilterLocking,
+          "data-for": "react-autoql-header-tooltip"
+        }, /*#__PURE__*/React.createElement(Icon, {
+          type: _get(_this.state.conditions, 'persistent.length') > 0 || _get(_this.state.conditions, 'session.length') > 0 ? "lock" : "unlock"
+        })) : /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(Popover, {
           isOpen: _this.state.isOptionsDropdownOpen,
           onClickOutside: function onClickOutside() {
-            return _this.setState({
+            _this.setState({
               isOptionsDropdownOpen: false
             });
           },
           position: "bottom" // preferred position
           ,
-          content: /*#__PURE__*/React.createElement("div", null, window.location.href.includes('chata-ai-test-page') && /*#__PURE__*/React.createElement("div", {
-            className: "clear-messages-confirm-popover"
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "react-autoql-menu-text",
-            onClick: function onClick() {
-              _this.setState({
-                isConditionLockingMenuOpen: true,
-                isOptionsDropdownOpen: false
-              });
-            }
-          }, /*#__PURE__*/React.createElement(Icon, {
-            type: "lock"
-          }), /*#__PURE__*/React.createElement("span", {
-            style: {
-              marginLeft: 5
-            }
-          }, lang.openConditionLocking))), /*#__PURE__*/React.createElement("div", {
+          content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
             className: "clear-messages-confirm-popover"
           }, /*#__PURE__*/React.createElement("div", {
             className: "react-autoql-menu-text",
@@ -19800,11 +20051,11 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
             });
           },
           className: "react-autoql-drawer-header-btn clear-all",
-          "data-tip": lang.dataMessengerOptions,
+          "data-tip": lang.clearDataResponses,
           "data-for": "react-autoql-header-tooltip"
         }, /*#__PURE__*/React.createElement(Icon, {
           type: "trash"
-        })));
+        }))));
       }
     });
 
@@ -19828,64 +20079,48 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }, title);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderShowSuccessMessage", function () {
-      return /*#__PURE__*/React.createElement("div", {
-        id: "condition-lock-snackbar-success"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "check"
-      }), " Conditions Applied");
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderHeaderContent", function () {
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-header-left-container"
       }, /*#__PURE__*/React.createElement("button", {
         onClick: function onClick() {
-          _this.props.onHandleClick();
-
           _this.setState({
             isConditionLockingMenuOpen: false
           });
+
+          _this.props.onHandleClick();
         },
         className: "react-autoql-drawer-header-btn close",
         "data-tip": lang.closeDataMessenger,
         "data-for": "react-autoql-header-tooltip"
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "close"
-      }))), /*#__PURE__*/React.createElement(Popover, {
+      }))), !getAutoQLConfig$1(getAutoQLConfig$1(_this.props.autoQLConfig)).enableFilterLocking ? /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-header-center-container"
+      }, _this.renderHeaderTitle()) : /*#__PURE__*/React.createElement(Popover, {
         containerStyle: _this.getConditionMenuPosition(),
         isOpen: _this.state.isConditionLockingMenuOpen,
-        onClickOutside: function onClickOutside(e) {
-          if (_get(e, 'target.innerText') !== lang.openConditionLocking && !_includes(_get(e, 'target.className'), 'react-autosuggest__suggestion') && !_includes(_get(e, 'target.className'), 'condition-list-container')) {
-            _this.setState({
-              isConditionLockingMenuOpen: false
-            });
-          }
-        },
         position: "bottom",
         padding: 2,
         align: "center",
-        content: /*#__PURE__*/React.createElement(ConditionLockMenu, {
+        content: /*#__PURE__*/React.createElement("div", {
+          id: "condition-menu-dropdown",
+          style: {
+            display: 'block'
+          }
+        }, /*#__PURE__*/React.createElement(ConditionLockMenu, {
           authentication: getAuthentication(getAuthentication(_this.props.authentication)),
           containerWidth: _this.getDrawerWidth(),
           isOpen: _this.state.isConditionLockingMenuOpen,
-          onClose: function onClose(isSaved) {
-            if (isSaved) {
-              var el = document.getElementById('condition-lock-snackbar-success');
-              el.className = 'show';
-              setTimeout(function () {
-                el.className = el.className.replace('show', '');
-              }, 3000);
-            }
-
+          onClose: function onClose() {
             _this.setState({
               isConditionLockingMenuOpen: false
             });
           }
-        })
+        }))
       }, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-header-center-container"
-      }, _this.renderHeaderTitle(), _this.renderShowSuccessMessage())), /*#__PURE__*/React.createElement("div", {
+      }, _this.renderHeaderTitle())), /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-header-right-container"
       }, _this.renderOptionsDropdown()));
     });
@@ -19968,7 +20203,12 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           isResizing: _this.state.isResizing,
           enableDynamicCharting: _this.props.enableDynamicCharting,
           onNoneOfTheseClick: _this.onNoneOfTheseClick,
-          autoChartAggregations: _this.props.autoChartAggregations
+          autoChartAggregations: _this.props.autoChartAggregations,
+          onConditionClickCallback: function onConditionClickCallback() {
+            _this.setState({
+              isConditionLockingMenuOpen: !_this.state.isConditionLockingMenuOpen
+            });
+          }
         });
       })), _this.state.isChataThinking && /*#__PURE__*/React.createElement("div", {
         className: "response-loading-container"
@@ -20370,6 +20610,36 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "removeDuplicateMessengerInstance",
+    value:
+    /**
+     * For some indiscernible reason, the Data Messenger drawer duplicates itself in the DOM.
+     * three times when first opened, then a number more times with each and every query 
+     * being made.
+     * 
+     * This function removes unnecessary duplicate instances of the Data Messenger Drawer
+     * and should help improve performance a bit by reducing the amount of renders.
+     * 
+     * https://stackoverflow.com/questions/57946748/remove-duplicate-dom-element-javascript-not-jquery
+     */
+    function removeDuplicateMessengerInstance() {
+      var instance = {};
+
+      var _iterator = _createForOfIteratorHelper(document.querySelectorAll('.ReactModalPortal')),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          if (instance[item]) item.parentNode.removeChild(item);else instance[item] = true;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
   }]);
 
   return DataMessenger;
@@ -20405,6 +20675,9 @@ _defineProperty(DataMessenger, "propTypes", {
   enableDynamicCharting: bool,
   defaultTab: string,
   autoChartAggregations: bool,
+  enableQueryInterpretation: bool,
+  defaultShowInterpretation: bool,
+  enableFilterLocking: bool,
   // Callbacks
   onVisibleChange: func,
   onHandleClick: func,
@@ -20442,6 +20715,9 @@ _defineProperty(DataMessenger, "defaultProps", {
   enableDynamicCharting: true,
   defaultTab: 'data-messenger',
   autoChartAggregations: true,
+  enableQueryInterpretation: false,
+  defaultShowInterpretation: false,
+  enableFilterLocking: false,
   // Callbacks
   onHandleClick: function onHandleClick() {},
   onVisibleChange: function onVisibleChange() {},
@@ -21321,6 +21597,7 @@ var DashboardTile = /*#__PURE__*/function (_React$Component) {
         renderSuggestionsAsDropdown: _this.props.tile.h < 4,
         enableDynamicCharting: _this.props.enableDynamicCharting,
         backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
+        isDashboardQuery: true,
         onDisplayTypeUpdate: function onDisplayTypeUpdate() {
           // This is necessary to update the toolbar with the newly rendered QueryOutput
           setTimeout(function () {
@@ -21964,6 +22241,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
           dataFormatting: getDataFormatting(_this.props.dataFormatting),
           queryResponse: _this.state.activeDrilldownResponse,
           renderTooltips: false,
+          isDashboardQuery: true,
           autoChartAggregations: _this.props.autoChartAggregations,
           backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
           reportProblemCallback: _this.reportProblemCallback,
@@ -21985,6 +22263,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
         dataFormatting: getDataFormatting(_this.props.dataFormatting),
         queryResponse: _this.state.activeDrilldownResponse,
         renderTooltips: false,
+        isDashboardQuery: true,
         autoChartAggregations: _this.props.autoChartAggregations,
         backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
         reportProblemCallback: _this.reportProblemCallback,
@@ -22043,7 +22322,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
           displayType = tile.secondDisplayType;
           dataConfig = tile.secondDataConfig;
         } else if (tile && !_this.state.isDrilldownSecondHalf) {
-          title = tile.query;
+          title = tile.title;
           queryResponse = tile.queryResponse;
           displayType = tile.displayType;
           dataConfig = tile.dataConfig;
@@ -22082,6 +22361,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
           queryResponse: queryResponse,
           displayType: displayType,
           dataConfig: dataConfig,
+          isDashboardQuery: true,
           autoChartAggregations: _this.props.autoChartAggregations,
           onDataClick: function onDataClick(drilldownData, queryID) {
             _this.startDrilldown(drilldownData, queryID, tile.i);
@@ -22262,4 +22542,215 @@ _defineProperty(Dashboard, "defaultProps", {
   onChange: function onChange() {}
 });
 
+var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
+  _inherits(SpeechToTextBtn, _React$Component);
+
+  var _super = _createSuper(SpeechToTextBtn);
+
+  function SpeechToTextBtn() {
+    var _this;
+
+    _classCallCheck(this, SpeechToTextBtn);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isRecording: false,
+      currentQuery: 0,
+      resultHistory: [],
+      currentFile: '',
+      currentBlob: '',
+      showPopoverMessage: false,
+      errorMessage: ''
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      setCSSVars(getThemeConfig(_this.props.themeConfig));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
+      if (_this.props.finalTranscript !== prevProps.finalTranscript) {
+        _this.props.onFinalTranscript(_this.props.finalTranscript);
+      } else if (_this.props.transcript !== prevProps.transcript) {
+        _this.props.onTranscriptChange(_this.props.transcript);
+      } else if (_this.props.interimTranscript !== prevProps.interimTranscript) {
+        _this.props.onTranscriptChange(_this.props.interimTranscript);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "startRecording", function () {
+      _this.setState({
+        isRecording: true
+      });
+
+      navigator.getUserMedia({
+        audio: true
+      }, function (stream) {
+        _this.stream = stream;
+        _this.recordAudio = RecordRTC(_this.stream, {
+          type: 'audio',
+          mimeType: 'audio/webm',
+          desiredSampRate: 16000,
+          recorderType: StereoAudioRecorder,
+          numberOfAudioChannels: 1
+        });
+
+        _this.recordAudio.startRecording();
+      }, function (error) {
+        console.error(JSON.stringify(error));
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRecordStop", function (file, blob) {
+      _this.setState({
+        //  isConfirmingRecording: true,
+        currentFile: file,
+        currentBlob: blob //hasPlayedBack: false,
+
+      }, function () {
+        _this.sendWavFile(file);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "stopRecording", function () {
+      _this.setState({
+        isRecording: false
+      });
+
+      _this.recordAudio.stopRecording(function () {
+        var blob = _this.recordAudio.getBlob();
+
+        _this.onRecordStop(_this.blobToFile(blob), blob);
+
+        try {
+          _this.stream.getTracks().forEach(function (track) {
+            return track.stop();
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "blobToFile", function (theBlob) {
+      //A Blob() is almost a File() - it's just missing the two properties below which we will add
+      theBlob.lastModifiedDate = new Date();
+      theBlob.name = 'speech.wav';
+      return theBlob;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getMediaPermissionStatus", function () {
+      return navigator.permissions.query({
+        name: 'microphone'
+      }).then(function (permissionStatus) {
+        return permissionStatus.state;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function () {
+      ReactTooltip.hide();
+
+      _this.startRecording();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "sendWavFile", function (file) {
+      var url = "".concat(_this.props.authentication.domain, "/autoql/api/v1/query/speech-to-text?key=").concat(_this.props.authentication.apiKey);
+      var data = new FormData();
+      data.append('file', file, 'speech.wav');
+      var config = {
+        headers: {
+          Authorization: "Bearer ".concat(_this.props.authentication.token)
+        },
+        timeout: 30000
+      };
+      axios.post(url, data, config).then(function (res) {
+        _this.props.onTranscriptChange(res.data.data.transcription);
+      }).catch(function (error) {
+        if (error.response.status === 404) {
+          _this.setState({
+            errorMessage: 'Oops! Speech-to-text has not been enabled. Try typing a query instead.'
+          }, function () {
+            _this.setState({
+              showPopoverMessage: true
+            });
+          });
+        } else {
+          _this.setState({
+            errorMessage: 'Oops! Something wrong with your account'
+          }, function () {
+            _this.setState({
+              showPopoverMessage: true
+            });
+          });
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "render", function () {
+      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Popover, {
+        isOpen: _this.state.showPopoverMessage,
+        padding: 20,
+        content: function content() {
+          return /*#__PURE__*/React.createElement("div", {
+            style: {
+              backgroundColor: '#FFD2D2',
+              opacity: 1,
+              paddingLeft: '10px',
+              paddingRight: '10px'
+            }
+          }, /*#__PURE__*/React.createElement(Icon, {
+            type: "warning-triangle"
+          }), " ", _this.state.errorMessage);
+        },
+        onClickOutside: function onClickOutside() {
+          return _this.setState({
+            showPopoverMessage: false
+          });
+        }
+      }, /*#__PURE__*/React.createElement("button", {
+        id: "react-autoql-voice-record-button",
+        "data-test": "speech-to-text-btn",
+        className: "chat-voice-record-button".concat(_this.state.isRecording ? ' listening' : ''),
+        onMouseDown: _this.onMouseDown,
+        onMouseUp: _this.stopRecording,
+        onMouseLeave: _this.state.isRecording ? _this.stopRecording : undefined,
+        "data-tip": "Hold for voice-to-text",
+        "data-for": "react-autoql-speech-to-text-tooltip",
+        "data-tip-disable": _this.state.isRecording
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "microphone"
+      }))), /*#__PURE__*/React.createElement(ReactTooltip, {
+        className: "react-autoql-tooltip",
+        id: "react-autoql-speech-to-text-tooltip",
+        effect: "solid",
+        delayShow: 800
+      }));
+    });
+
+    return _this;
+  }
+
+  return SpeechToTextBtn;
+}(React.Component);
+
+_defineProperty(SpeechToTextBtn, "propTypes", {
+  authentication: authenticationType,
+  themeConfig: themeConfigType,
+  transcript: PropTypes.string,
+  interimTranscript: PropTypes.string,
+  finalTranscript: PropTypes.string,
+  resetTranscript: PropTypes.func,
+  onTranscriptChange: PropTypes.func,
+  onFinalTranscript: PropTypes.func
+});
+
+_defineProperty(SpeechToTextBtn, "defaultProps", {
+  authentication: authenticationDefault,
+  themeConfig: themeConfigDefault
+});
+
 export { Dashboard, DashboardTile, DataAlertModal, DataAlerts, DataMessenger, ExpressionBuilder, ExpressionBuilderSimple, Icon, LoadingDots, NotificationFeed, NotificationIcon, NotificationItem, QueryInput, QueryOutput, ScheduleBuilder, SpeechToTextBtn as SpeechToTextButton, SpeechToTextButtonBrowser, executeDashboard, fetchQueryTips, getDefaultDisplayType, getSupportedDisplayTypes, isDisplayTypeValid, unExecuteDashboard };