quikchat 1.1.17 → 1.2.4

package/dist/quikchat.umd.js

@@ -9,37 +9,76 @@
     for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
     return n;
   }
-  function _arrayWithoutHoles(r) {
-    if (Array.isArray(r)) return _arrayLikeToArray(r);
-  }
   function _classCallCheck(a, n) {
     if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
   }
   function _defineProperties(e, r) {
     for (var t = 0; t < r.length; t++) {
       var o = r[t];
-      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+      o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
     }
   }
   function _createClass(e, r, t) {
     return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
-      writable: !1
+      writable: false
     }), e;
   }
+  function _createForOfIteratorHelper(r, e) {
+    var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (!t) {
+      if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+        t && (r = t);
+        var n = 0,
+          F = function () {};
+        return {
+          s: F,
+          n: function () {
+            return n >= r.length ? {
+              done: true
+            } : {
+              done: false,
+              value: r[n++]
+            };
+          },
+          e: function (r) {
+            throw r;
+          },
+          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 o,
+      a = true,
+      u = false;
+    return {
+      s: function () {
+        t = t.call(r);
+      },
+      n: function () {
+        var r = t.next();
+        return a = r.done, r;
+      },
+      e: function (r) {
+        u = true, o = r;
+      },
+      f: function () {
+        try {
+          a || null == t.return || t.return();
+        } finally {
+          if (u) throw o;
+        }
+      }
+    };
+  }
   function _defineProperty(e, r, t) {
     return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
       value: t,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
+      enumerable: true,
+      configurable: true,
+      writable: true
     }) : e[r] = t, e;
   }
-  function _iterableToArray(r) {
-    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-  }
-  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 ownKeys(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -53,7 +92,7 @@
   function _objectSpread2(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
         _defineProperty(e, r, t[r]);
       }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
@@ -61,18 +100,15 @@
     }
     return e;
   }
-  function _toConsumableArray(r) {
-    return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
-  }
   function _toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
     if (void 0 !== e) {
-      var i = e.call(t, r || "default");
+      var i = e.call(t, r);
       if ("object" != typeof i) return i;
       throw new TypeError("@@toPrimitive must return a primitive value.");
     }
-    return ("string" === r ? String : Number)(t);
+    return (String )(t);
   }
   function _toPropertyKey(t) {
     var i = _toPrimitive(t, "string");
@@ -86,378 +122,11 @@
     }
   }
 
-  // Auto-generated version file - DO NOT EDIT MANUALLY
-  // This file is automatically updated by tools/updateVersion.js
-
-  var quikchatVersion = {
-    version: "1.1.17",
-    license: "BSD-2",
-    url: "https://github/deftio/quikchat",
-    fun: true
-  };
-
-  /**
-   * Simplified virtual scrolling implementation for QuikChat
-   * @private
-   */
-  var SimpleVirtualScroller = /*#__PURE__*/function () {
-    function SimpleVirtualScroller(container) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      _classCallCheck(this, SimpleVirtualScroller);
-      this.container = container;
-      this.items = [];
-      this.itemHeight = options.itemHeight || 80; // Default/estimate height
-      this.buffer = options.buffer || 5;
-      this.visibleRange = {
-        start: 0,
-        end: 0
-      };
-      this.renderedElements = new Map();
-      this.itemHeights = new Map(); // Cache actual heights
-      this.itemPositions = new Map(); // Cache positions
-      this.totalHeight = 0;
-      this.onRenderItem = options.onRenderItem || function () {};
-      this.sanitizer = options.sanitizer || null; // Content sanitizer
-
-      this._initStructure();
-      this._attachScrollListener();
-    }
-    return _createClass(SimpleVirtualScroller, [{
-      key: "_initStructure",
-      value: function _initStructure() {
-        var _this = this;
-        var existingClasses = this.container.className;
-        this.container.innerHTML = '';
-        this.container.className = existingClasses;
-        this.container.style.position = 'relative';
-        this.container.style.overflow = 'auto';
-
-        // Ensure container has height
-        if (this.container.offsetHeight === 0) {
-          // Try to get height from computed style or parent
-          var computedHeight = window.getComputedStyle(this.container).height;
-          if (computedHeight === '0px' || computedHeight === 'auto') {
-            // If still no height, use a reasonable default
-            this.container.style.height = '400px';
-            console.warn('QuikChat Virtual Scrolling: Container has no height, setting to 400px');
-          }
-        }
-        this.spacer = document.createElement('div');
-        this.spacer.style.cssText = 'position: absolute; top: 0; left: 0; width: 1px; pointer-events: none; z-index: -1;';
-        this.content = document.createElement('div');
-        this.content.style.cssText = 'position: relative; width: 100%;';
-        this.container.appendChild(this.spacer);
-        this.container.appendChild(this.content);
-
-        // Initial render after structure is set up
-        setTimeout(function () {
-          _this._updateVisibleRange();
-          _this._renderVisibleItems();
-        }, 0);
-      }
-    }, {
-      key: "_attachScrollListener",
-      value: function _attachScrollListener() {
-        var _this2 = this;
-        var ticking = false;
-        this.container.addEventListener('scroll', function () {
-          if (!ticking) {
-            requestAnimationFrame(function () {
-              _this2._updateVisibleRange();
-              _this2._renderVisibleItems();
-              ticking = false;
-            });
-            ticking = true;
-          }
-        });
-      }
-    }, {
-      key: "_getItemHeight",
-      value: function _getItemHeight(index) {
-        // Return cached height or estimate
-        return this.itemHeights.get(index) || this.itemHeight;
-      }
-    }, {
-      key: "_getItemPosition",
-      value: function _getItemPosition(index) {
-        // Return cached position or calculate
-        if (this.itemPositions.has(index)) {
-          return this.itemPositions.get(index);
-        }
-
-        // Calculate position based on previous items
-        var position = 0;
-        for (var i = 0; i < index; i++) {
-          position += this._getItemHeight(i);
-        }
-        this.itemPositions.set(index, position);
-        return position;
-      }
-    }, {
-      key: "_recalculatePositions",
-      value: function _recalculatePositions(fromIndex) {
-        // Recalculate positions from a specific index onwards
-        var position = fromIndex > 0 ? this._getItemPosition(fromIndex) : 0;
-        for (var i = fromIndex; i < this.items.length; i++) {
-          this.itemPositions.set(i, position);
-          position += this._getItemHeight(i);
-
-          // Update position of rendered elements
-          var element = this.renderedElements.get(i);
-          if (element) {
-            element.style.top = "".concat(this.itemPositions.get(i), "px");
-          }
-        }
-
-        // Update total height
-        this.totalHeight = position;
-        this.spacer.style.height = "".concat(this.totalHeight, "px");
-      }
-    }, {
-      key: "_updateVisibleRange",
-      value: function _updateVisibleRange() {
-        var scrollTop = this.container.scrollTop;
-        var viewportHeight = this.container.clientHeight;
-
-        // If container has no height, don't render anything (avoid infinite loop)
-        if (viewportHeight === 0) {
-          this.visibleRange = {
-            start: 0,
-            end: 0
-          };
-          return;
-        }
-
-        // Find first visible item based on positions
-        var startIndex = 0;
-        var endIndex = this.items.length;
-
-        // Use cached positions when available
-        if (this.itemPositions.size > 0) {
-          // Find start index
-          for (var i = 0; i < this.items.length; i++) {
-            var pos = this._getItemPosition(i);
-            if (pos + this._getItemHeight(i) > scrollTop) {
-              startIndex = Math.max(0, i - this.buffer);
-              break;
-            }
-          }
-
-          // Find end index
-          for (var _i = startIndex; _i < this.items.length; _i++) {
-            var _pos = this._getItemPosition(_i);
-            if (_pos > scrollTop + viewportHeight) {
-              endIndex = Math.min(this.items.length, _i + this.buffer);
-              break;
-            }
-          }
-        } else {
-          // Fallback to estimate if no positions cached yet
-          startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.buffer);
-          endIndex = Math.min(this.items.length, Math.ceil((scrollTop + viewportHeight) / this.itemHeight) + this.buffer);
-        }
-        this.visibleRange = {
-          start: startIndex,
-          end: endIndex
-        };
-      }
-    }, {
-      key: "_renderVisibleItems",
-      value: function _renderVisibleItems() {
-        var _this3 = this;
-        var _this$visibleRange = this.visibleRange,
-          start = _this$visibleRange.start,
-          end = _this$visibleRange.end;
-
-        // Remove elements outside range
-        this.renderedElements.forEach(function (element, index) {
-          if (index < start || index >= end) {
-            element.remove();
-            _this3.renderedElements["delete"](index);
-            // Don't clear height cache - we might need it again
-          }
-        });
-
-        // Add new visible elements
-        var _loop = function _loop(i) {
-          var item = _this3.items[i];
-          if (!item || _this3.renderedElements.has(i)) return 1; // continue
-          var element = _this3._createItemElement(item, i);
-          element.style.position = 'absolute';
-          element.style.top = "".concat(_this3._getItemPosition(i), "px");
-          element.style.left = '0';
-          element.style.right = '0';
-          _this3.renderedElements.set(i, element);
-          _this3.content.appendChild(element);
-
-          // Measure actual height after rendering
-          requestAnimationFrame(function () {
-            if (_this3.renderedElements.has(i)) {
-              var actualHeight = element.offsetHeight;
-              if (actualHeight && actualHeight !== _this3._getItemHeight(i)) {
-                _this3.itemHeights.set(i, actualHeight);
-                _this3._recalculatePositions(i);
-              }
-            }
-          });
-        };
-        for (var i = start; i < end; i++) {
-          if (_loop(i)) continue;
-        }
-        this.onRenderItem(this.content);
-      }
-    }, {
-      key: "_createItemElement",
-      value: function _createItemElement(item, index) {
-        var messageDiv = document.createElement('div');
-        messageDiv.className = "quikchat-message quikchat-message-".concat(item.align || 'left', " quikchat-msgid-").concat(String(item.msgid).padStart(10, '0'));
-        messageDiv.setAttribute('data-index', index);
-        messageDiv.setAttribute('data-msgid', item.msgid);
-        messageDiv.setAttribute('role', 'article');
-        messageDiv.setAttribute('aria-label', "Message from ".concat(item.userString || 'user'));
-        if (item.tags && item.tags.length > 0) {
-          item.tags.forEach(function (tag) {
-            return messageDiv.classList.add("quikchat-tag-".concat(tag));
-          });
-        }
-        var userDiv = document.createElement('div');
-        userDiv.className = 'quikchat-message-user';
-        userDiv.innerHTML = this.sanitizer ? this.sanitizer(item.userString || '') : item.userString || '';
-        userDiv.setAttribute('aria-label', 'User');
-        var contentDiv = document.createElement('div');
-        contentDiv.className = 'quikchat-message-content';
-        contentDiv.innerHTML = this.sanitizer ? this.sanitizer(item.content || '') : item.content || '';
-        contentDiv.setAttribute('aria-label', 'Message content');
-        messageDiv.appendChild(userDiv);
-        messageDiv.appendChild(contentDiv);
-        if (!item.visible) {
-          messageDiv.style.display = 'none';
-        }
-        return messageDiv;
-      }
-    }, {
-      key: "addItem",
-      value: function addItem(item) {
-        this.items.push(item);
-        var index = this.items.length - 1;
-
-        // Calculate position for new item
-        var position = index > 0 ? this._getItemPosition(index - 1) + this._getItemHeight(index - 1) : 0;
-        this.itemPositions.set(index, position);
-
-        // Update total height (using estimate for new item)
-        this.totalHeight = position + this.itemHeight;
-        this.spacer.style.height = "".concat(this.totalHeight, "px");
-        if (index >= this.visibleRange.start && index < this.visibleRange.end) {
-          this._renderVisibleItems();
-        }
-        if (item.scrollIntoView) {
-          this.container.scrollTop = this.container.scrollHeight;
-        }
-        return index;
-      }
-    }, {
-      key: "addItems",
-      value: function addItems(items) {
-        var _this$items;
-        // Batch add items for better performance
-        var startLength = this.items.length;
-        (_this$items = this.items).push.apply(_this$items, _toConsumableArray(items));
-
-        // Calculate positions for new items
-        var position = startLength > 0 ? this._getItemPosition(startLength - 1) + this._getItemHeight(startLength - 1) : 0;
-        for (var i = startLength; i < this.items.length; i++) {
-          this.itemPositions.set(i, position);
-          position += this.itemHeight; // Use estimate for new items
-        }
-        this.totalHeight = position;
-        this.spacer.style.height = "".concat(this.totalHeight, "px");
-
-        // Update visible range and render
-        this._updateVisibleRange();
-        this._renderVisibleItems();
-
-        // Handle scrollIntoView for last item if needed
-        if (items.length > 0 && items[items.length - 1].scrollIntoView) {
-          this.container.scrollTop = this.container.scrollHeight;
-        }
-      }
-    }, {
-      key: "clear",
-      value: function clear() {
-        this.items = [];
-        this.renderedElements.clear();
-        this.itemHeights.clear();
-        this.itemPositions.clear();
-        this.totalHeight = 0;
-        this.content.innerHTML = '';
-        this.spacer.style.height = '0px';
-        this.visibleRange = {
-          start: 0,
-          end: 0
-        };
-
-        // Force update after clear
-        this._updateVisibleRange();
-        this._renderVisibleItems();
-      }
-    }, {
-      key: "updateItem",
-      value: function updateItem(index, updates) {
-        if (index >= 0 && index < this.items.length) {
-          this.items[index] = _objectSpread2(_objectSpread2({}, this.items[index]), updates);
-          if (this.renderedElements.has(index)) {
-            this._renderVisibleItems();
-          }
-        }
-      }
-    }, {
-      key: "destroy",
-      value: function destroy() {
-        this.container.innerHTML = '';
-        this.items = [];
-        this.renderedElements.clear();
-      }
-    }]);
-  }();
-  /**
-   * QuikChat - A zero-dependency JavaScript chat widget for modern web applications
-   * @class quikchat
-   */
   var quikchat = /*#__PURE__*/function () {
     /**
-     * Creates a new QuikChat instance
-     * @constructor
-     * @param {string|HTMLElement} parentElement - CSS selector or DOM element to attach the chat widget to
-     * @param {Function} [onSend] - Callback function triggered when user sends a message
-     * @param {Object} [options] - Configuration options
-     * @param {string} [options.theme='quikchat-theme-light'] - CSS theme class name
-     * @param {boolean} [options.trackHistory=true] - Whether to track message history
-     * @param {Object} [options.titleArea] - Title area configuration
-     * @param {string} [options.titleArea.title='Chat'] - Title text/HTML
-     * @param {boolean} [options.titleArea.show=false] - Whether to show title area initially
-     * @param {'left'|'center'|'right'} [options.titleArea.align='center'] - Title alignment
-     * @param {Object} [options.messagesArea] - Messages area configuration
-     * @param {boolean} [options.messagesArea.alternating=true] - Alternate message colors
-     * @param {Object} [options.inputArea] - Input area configuration
-     * @param {boolean} [options.inputArea.show=true] - Whether to show input area initially
-     * @param {boolean} [options.sendOnEnter=true] - Send message on Enter key
-     * @param {boolean} [options.sendOnShiftEnter=false] - Send message on Shift+Enter
-     * @param {string} [options.instanceClass=''] - Additional CSS class for the widget instance
-     * @example
-     * // Basic usage
-     * const chat = new quikchat('#chat-container', (instance, message) => {
-     *   console.log('User sent:', message);
-     * });
-     * 
-     * @example
-     * // With options
-     * const chat = new quikchat('#chat', handleMessage, {
-     *   theme: 'quikchat-theme-dark',
-     *   titleArea: { title: 'Support Chat', show: true },
-     *   sendOnEnter: false,
-     *   sendOnShiftEnter: true
-     * });
+     *
+     * @param string or DOM element  parentElement
+     * @param {*} meta
      */
     function quikchat(parentElement) {
       var onSend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -466,6 +135,7 @@
       var defaultOpts = {
         theme: 'quikchat-theme-light',
         trackHistory: true,
+        showTimestamps: false,
         titleArea: {
           title: "Chat",
           show: false,
@@ -473,55 +143,19 @@
         },
         messagesArea: {
           alternating: true
-        },
-        inputArea: {
-          show: true
-        },
-        sendOnEnter: true,
-        sendOnShiftEnter: false,
-        instanceClass: '',
-        virtualScrolling: true,
-        // Default to true for better performance
-        virtualScrollingThreshold: 500,
-        // Lower threshold since it performs so well
-        // i18n support
-        lang: 'en',
-        dir: 'ltr',
-        // 'ltr' or 'rtl'
-        translations: {
-          'en': {
-            sendButton: 'Send',
-            inputPlaceholder: 'Type a message...',
-            titleDefault: 'Chat'
-          }
-        },
-        // Security: content sanitizer callback
-        sanitizer: null // null = no sanitization (backward compatible)
+        }
       };
       var meta = _objectSpread2(_objectSpread2({}, defaultOpts), options); // merge options with defaults
 
-      // Merge user translations with defaults
-      if (options.translations) {
-        meta.translations = _objectSpread2(_objectSpread2({}, defaultOpts.translations), options.translations);
-      }
       if (typeof parentElement === 'string') {
         parentElement = document.querySelector(parentElement);
       }
-      //console.log(parentElement, meta);
       this._parentElement = parentElement;
       this._theme = meta.theme;
       this._onSend = onSend ? onSend : function () {}; // call back function for onSend
-
-      // i18n settings
-      this.lang = meta.lang;
-      this.dir = meta.dir;
-      this.translations = meta.translations;
-      this.currentTranslations = this.translations[this.lang] || this.translations['en'];
+      this._messageFormatter = meta.messageFormatter || null;
+      this._sanitize = meta.sanitize || false;
       this._createWidget();
-      if (meta.instanceClass) {
-        this._chatWidget.classList.add(meta.instanceClass);
-      }
-
       // title area
       if (meta.titleArea) {
         this.titleAreaSetContents(meta.titleArea.title, meta.titleArea.align);
@@ -535,176 +169,34 @@
       if (meta.messagesArea) {
         this.messagesAreaAlternateColors(meta.messagesArea.alternating);
       }
-
-      // input area
-      if (meta.inputArea) {
-        if (meta.inputArea.show === true) this.inputAreaShow();else this.inputAreaHide();
+      // timestamps
+      if (meta.showTimestamps) {
+        this.messagesAreaShowTimestamps(true);
+      }
+      // direction (ltr/rtl)
+      if (meta.direction) {
+        this.setDirection(meta.direction);
       }
       // plumbing
       this._attachEventListeners();
-      this.trackHistory = meta.trackHistory || true;
+      this.trackHistory = meta.trackHistory !== false;
       this._historyLimit = 10000000;
       this._history = [];
-      this._activeTags = new Set();
-
-      // send on enter / shift enter
-      this.sendOnEnter = meta.sendOnEnter;
-      this.sendOnShiftEnter = meta.sendOnShiftEnter;
-
-      // Virtual scrolling setup
-      this.virtualScrollingEnabled = meta.virtualScrolling;
-      this.virtualScrollingThreshold = meta.virtualScrollingThreshold;
-      this.virtualScroller = null;
-
-      // Sanitizer setup
-      this._sanitizer = meta.sanitizer || null;
-
-      // Don't initialize virtual scrolling immediately - wait for threshold
-      // Virtual scrolling will be initialized when message count exceeds threshold
     }
-
-    /**
-     * Initialize virtual scrolling
-     * @private
-     */
     return _createClass(quikchat, [{
-      key: "_initVirtualScrolling",
-      value: function _initVirtualScrolling() {
-        var _this4 = this;
-        if (this.virtualScrollingEnabled && this._messagesArea && !this.virtualScroller) {
-          // Check if we've hit the threshold (or about to with the next message)
-          if (this._history.length >= this.virtualScrollingThreshold - 1) {
-            this.virtualScroller = new SimpleVirtualScroller(this._messagesArea, {
-              itemHeight: 80,
-              buffer: 5,
-              sanitizer: this._sanitizer,
-              // Pass sanitizer to virtual scroller
-              onRenderItem: function onRenderItem(content) {
-                // Apply alternating colors if enabled
-                if (_this4._messagesArea.classList.contains('quikchat-messages-area-alt')) {
-                  _this4._updateMessageStyles();
-                }
-              }
-            });
-
-            // Migrate existing messages to virtual scroller
-            this._migrateToVirtualScrolling();
-          }
-        }
-      }
-
-      /**
-       * Migrate existing messages to virtual scrolling
-       * @private
-       */
-    }, {
-      key: "_migrateToVirtualScrolling",
-      value: function _migrateToVirtualScrolling() {
-        var _this5 = this;
-        if (!this.virtualScroller) return;
-
-        // Don't clear DOM here - virtual scroller will do it in _initStructure
-
-        // Add all messages to virtual scroller
-        var items = this._history.map(function (msg) {
-          return {
-            msgid: msg.msgid,
-            content: msg.content,
-            userString: msg.userString,
-            align: msg.align,
-            role: msg.role,
-            visible: msg.visible,
-            tags: msg.tags || [],
-            scrollIntoView: false
-          };
-        });
-        this.virtualScroller.addItems(items);
-
-        // Force a render in case container needs time to get dimensions
-        setTimeout(function () {
-          if (_this5.virtualScroller) {
-            _this5.virtualScroller._updateVisibleRange();
-            _this5.virtualScroller._renderVisibleItems();
-          }
-        }, 10);
-      }
-    }, {
       key: "_createWidget",
       value: function _createWidget() {
-        var sendButtonText = this.currentTranslations.sendButton || 'Send';
-        var inputPlaceholder = this.currentTranslations.inputPlaceholder || 'Type a message...';
-        var widgetHTML = "\n            <div class=\"quikchat-base ".concat(this._theme, "\" dir=\"").concat(this.dir, "\" lang=\"").concat(this.lang, "\" role=\"region\" aria-label=\"Chat widget\">\n                <div class=\"quikchat-title-area\" role=\"heading\" aria-level=\"2\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\" role=\"log\" aria-live=\"polite\" aria-label=\"Chat messages\"></div>\n                <div class=\"quikchat-input-area\" role=\"form\" aria-label=\"Message input\">\n                    <textarea class=\"quikchat-input-textbox\" \n                              placeholder=\"").concat(inputPlaceholder, "\"\n                              aria-label=\"Type your message\"\n                              autocomplete=\"off\"\n                              autocapitalize=\"sentences\"></textarea>\n                    <button class=\"quikchat-input-send-btn\" \n                            aria-label=\"Send message\"\n                            type=\"button\">").concat(sendButtonText, "</button>\n                </div>\n            </div>\n            ");
+        var widgetHTML = "\n            <div class=\"quikchat-base ".concat(this.theme, "\">\n                <div class=\"quikchat-title-area\"></div>\n                <div class=\"quikchat-messages-wrapper\"><div class=\"quikchat-messages-area\" role=\"log\" aria-live=\"polite\" aria-label=\"Chat messages\"></div><button class=\"quikchat-scroll-bottom\" aria-label=\"Scroll to bottom\"></button></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\" rows=\"1\" aria-label=\"Type a message\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            ");
         this._parentElement.innerHTML = widgetHTML;
         this._chatWidget = this._parentElement.querySelector('.quikchat-base');
         this._titleArea = this._chatWidget.querySelector('.quikchat-title-area');
+        this._messagesWrapper = this._chatWidget.querySelector('.quikchat-messages-wrapper');
         this._messagesArea = this._chatWidget.querySelector('.quikchat-messages-area');
+        this._scrollBottomBtn = this._messagesWrapper.querySelector('.quikchat-scroll-bottom');
         this._inputArea = this._chatWidget.querySelector('.quikchat-input-area');
         this._textEntry = this._inputArea.querySelector('.quikchat-input-textbox');
         this._sendButton = this._inputArea.querySelector('.quikchat-input-send-btn');
         this.msgid = 0;
-
-        // Add mobile viewport handling
-        this._setupMobileSupport();
-      }
-
-      /**
-       * Setup mobile support - prevent zoom on input focus and handle virtual keyboard
-       * @private
-       */
-    }, {
-      key: "_setupMobileSupport",
-      value: function _setupMobileSupport() {
-        var _this6 = this;
-        // Prevent zoom on input focus for mobile
-        var meta = document.querySelector('meta[name="viewport"]');
-        if (!meta) {
-          meta = document.createElement('meta');
-          meta.name = 'viewport';
-          document.head.appendChild(meta);
-        }
-
-        // Store original content
-        this._originalViewport = meta.content;
-
-        // Prevent zoom on focus
-        this._textEntry.addEventListener('focus', function () {
-          if (window.innerWidth <= 768) {
-            // Mobile device width
-            meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0';
-          }
-        });
-        this._textEntry.addEventListener('blur', function () {
-          if (_this6._originalViewport) {
-            meta.content = _this6._originalViewport;
-          } else {
-            meta.content = 'width=device-width, initial-scale=1.0';
-          }
-        });
-
-        // Handle virtual keyboard resize
-        if ('visualViewport' in window) {
-          window.visualViewport.addEventListener('resize', function () {
-            _this6._handleVirtualKeyboard();
-          });
-        }
-      }
-
-      /**
-       * Handle virtual keyboard appearance/disappearance
-       * @private
-       */
-    }, {
-      key: "_handleVirtualKeyboard",
-      value: function _handleVirtualKeyboard() {
-        // Adjust layout when virtual keyboard appears
-        var keyboardHeight = window.innerHeight - window.visualViewport.height;
-        if (keyboardHeight > 0) {
-          // Keyboard is visible - adjust chat widget height
-          this._chatWidget.style.paddingBottom = "".concat(keyboardHeight, "px");
-        } else {
-          // Keyboard hidden - restore original padding
-          this._chatWidget.style.paddingBottom = '';
-        }
       }
 
       /**
@@ -713,40 +205,55 @@
     }, {
       key: "_attachEventListeners",
       value: function _attachEventListeners() {
-        var _this7 = this;
-        this._sendButton.addEventListener('click', function (event) {
-          event.preventDefault();
-          _this7._onSend(_this7, _this7._textEntry.value.trim());
-        });
-        window.addEventListener('resize', function () {
-          return _this7._handleContainerResize();
-        });
-        this._chatWidget.addEventListener('resize', function () {
-          return _this7._handleContainerResize();
+        var _this = this;
+        this._sendButton.addEventListener('click', function () {
+          var text = _this._textEntry.value.trim();
+          if (text === '') return;
+          _this._onSend(_this, text);
         });
         this._textEntry.addEventListener('keydown', function (event) {
-          // Check if Shift + Enter is pressed then we just do carraige
+          // Check if Shift + Enter is pressed
           if (event.shiftKey && event.keyCode === 13) {
-            // Prevent default behavior (adding new line)
-            if (_this7.sendOnShiftEnter) {
-              event.preventDefault();
-              _this7._onSend(_this7, _this7._textEntry.value.trim());
-            }
-          } else if (event.keyCode === 13) {
-            // Enter but not Shift + Enter
-            if (_this7.sendOnEnter) {
-              event.preventDefault();
-              _this7._onSend(_this7, _this7._textEntry.value.trim());
-            }
+            event.preventDefault();
+            var text = _this._textEntry.value.trim();
+            if (text === '') return;
+            _this._onSend(_this, text);
           }
         });
+
+        // Auto-grow textarea
+        this._textEntry.addEventListener('input', function () {
+          return _this._autoGrowTextarea();
+        });
         this._messagesArea.addEventListener('scroll', function () {
-          var _this7$_messagesArea = _this7._messagesArea,
-            scrollTop = _this7$_messagesArea.scrollTop,
-            scrollHeight = _this7$_messagesArea.scrollHeight,
-            clientHeight = _this7$_messagesArea.clientHeight;
-          _this7.userScrolledUp = scrollTop + clientHeight < scrollHeight;
+          var _this$_messagesArea = _this._messagesArea,
+            scrollTop = _this$_messagesArea.scrollTop,
+            scrollHeight = _this$_messagesArea.scrollHeight,
+            clientHeight = _this$_messagesArea.clientHeight;
+          _this.userScrolledUp = scrollTop + clientHeight < scrollHeight - 1;
+          _this._updateScrollBottomBtn();
+        });
+
+        // Scroll-to-bottom button
+        this._scrollBottomBtn.addEventListener('click', function () {
+          return _this.scrollToBottom();
+        });
+
+        // Ctrl+End to scroll to bottom
+        this._chatWidget.addEventListener('keydown', function (event) {
+          if (event.ctrlKey && event.key === 'End') {
+            event.preventDefault();
+            _this.scrollToBottom();
+          }
         });
+
+        // Use ResizeObserver to detect parent container resize
+        if (typeof ResizeObserver !== 'undefined') {
+          this._resizeObserver = new ResizeObserver(function () {
+            return _this._handleContainerResize();
+          });
+          this._resizeObserver.observe(this._parentElement);
+        }
       }
 
       // set the onSend function callback.
@@ -761,54 +268,16 @@
       value: function setCallbackonMessageAdded(callback) {
         this._onMessageAdded = callback;
       }
-
-      /**
-       * Sets the callback function for when content is appended to a message
-       * @param {Function} callback - Function to call when content is appended
-       * @param {quikchat} callback.instance - The QuikChat instance
-       * @param {number} callback.msgId - The ID of the message being appended to
-       * @param {string} callback.content - The content being appended
-       * @since 1.1.15
-       * @example
-       * chat.setCallbackonMessageAppend((instance, msgId, content) => {
-       *   console.log(`Appended "${content}" to message ${msgId}`);
-       * });
-       */
     }, {
       key: "setCallbackonMessageAppend",
       value: function setCallbackonMessageAppend(callback) {
         this._onMessageAppend = callback;
       }
-
-      /**
-       * Sets the callback function for when a message's content is replaced
-       * @param {Function} callback - Function to call when content is replaced
-       * @param {quikchat} callback.instance - The QuikChat instance
-       * @param {number} callback.msgId - The ID of the message being replaced
-       * @param {string} callback.content - The new content
-       * @since 1.1.15
-       * @example
-       * chat.setCallbackonMessageReplace((instance, msgId, content) => {
-       *   console.log(`Message ${msgId} replaced with: ${content}`);
-       * });
-       */
     }, {
       key: "setCallbackonMessageReplace",
       value: function setCallbackonMessageReplace(callback) {
         this._onMessageReplace = callback;
       }
-
-      /**
-       * Sets the callback function for when a message is deleted
-       * @param {Function} callback - Function to call when a message is deleted
-       * @param {quikchat} callback.instance - The QuikChat instance
-       * @param {number} callback.msgId - The ID of the deleted message
-       * @since 1.1.15
-       * @example
-       * chat.setCallbackonMessageDelete((instance, msgId) => {
-       *   console.log(`Message ${msgId} was deleted`);
-       * });
-       */
     }, {
       key: "setCallbackonMessageDelete",
       value: function setCallbackonMessageDelete(callback) {
@@ -816,58 +285,32 @@
       }
 
       // Public methods
-      /**
-       * Toggles the visibility of the title area
-       * @returns {void}
-       */
     }, {
       key: "titleAreaToggle",
       value: function titleAreaToggle() {
-        this._titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();
+        if (this._titleArea.style.display === 'none') {
+          this.titleAreaShow();
+        } else {
+          this.titleAreaHide();
+        }
       }
-
-      /**
-       * Shows the title area
-       * @returns {void}
-       */
     }, {
       key: "titleAreaShow",
       value: function titleAreaShow() {
         this._titleArea.style.display = '';
-        this._adjustMessagesAreaHeight();
       }
-
-      /**
-       * Hides the title area
-       * @returns {void}
-       */
     }, {
       key: "titleAreaHide",
       value: function titleAreaHide() {
         this._titleArea.style.display = 'none';
-        this._adjustMessagesAreaHeight();
       }
-
-      /**
-       * Sets the contents of the title area
-       * @param {string} title - HTML content to display in the title area
-       * @param {'left'|'center'|'right'} [align='center'] - Text alignment
-       * @returns {void}
-       * @example
-       * chat.titleAreaSetContents('<h2>Support Chat</h2>', 'center');
-       */
     }, {
       key: "titleAreaSetContents",
       value: function titleAreaSetContents(title) {
         var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
-        this._titleArea.innerHTML = this._sanitizeContent(title);
+        this._titleArea.innerHTML = title;
         this._titleArea.style.textAlign = align;
       }
-
-      /**
-       * Gets the current contents of the title area
-       * @returns {string} The HTML content of the title area
-       */
     }, {
       key: "titleAreaGetContents",
       value: function titleAreaGetContents() {
@@ -876,48 +319,133 @@
     }, {
       key: "inputAreaToggle",
       value: function inputAreaToggle() {
-        this._inputArea.classList.toggle('hidden');
-        this._inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();
+        if (this._inputArea.style.display === 'none') {
+          this.inputAreaShow();
+        } else {
+          this.inputAreaHide();
+        }
       }
     }, {
       key: "inputAreaShow",
       value: function inputAreaShow() {
         this._inputArea.style.display = '';
-        this._adjustMessagesAreaHeight();
       }
     }, {
       key: "inputAreaHide",
       value: function inputAreaHide() {
         this._inputArea.style.display = 'none';
-        this._adjustMessagesAreaHeight();
       }
     }, {
-      key: "_adjustMessagesAreaHeight",
-      value: function _adjustMessagesAreaHeight() {
-        var hiddenElements = _toConsumableArray(this._chatWidget.children).filter(function (child) {
-          return child.classList.contains('hidden');
-        });
-        var totalHiddenHeight = hiddenElements.reduce(function (sum, child) {
-          return sum + child.offsetHeight;
-        }, 0);
-        var containerHeight = this._chatWidget.offsetHeight;
-        this._messagesArea.style.height = "calc(100% - ".concat(containerHeight - totalHiddenHeight, "px)");
+      key: "inputAreaSetEnabled",
+      value: function inputAreaSetEnabled(enabled) {
+        this._textEntry.disabled = !enabled;
+        this._sendButton.disabled = !enabled;
+      }
+    }, {
+      key: "inputAreaSetButtonText",
+      value: function inputAreaSetButtonText(text) {
+        this._sendButton.textContent = text;
+      }
+    }, {
+      key: "inputAreaGetButtonText",
+      value: function inputAreaGetButtonText() {
+        return this._sendButton.textContent;
+      }
+    }, {
+      key: "setDirection",
+      value: function setDirection(dir) {
+        var d = dir === 'rtl' ? 'rtl' : 'ltr';
+        this._chatWidget.setAttribute('dir', d);
+        if (d === 'rtl') {
+          this._chatWidget.classList.add('quikchat-rtl');
+        } else {
+          this._chatWidget.classList.remove('quikchat-rtl');
+        }
+      }
+    }, {
+      key: "getDirection",
+      value: function getDirection() {
+        return this._chatWidget.getAttribute('dir') || 'ltr';
       }
     }, {
       key: "_handleContainerResize",
       value: function _handleContainerResize() {
-        this._adjustMessagesAreaHeight();
-        this._adjustSendButtonWidth();
-        return true;
+        // Layout is handled by CSS flexbox — no JS height calculation needed.
+        // This hook exists for future use or custom resize callbacks.
       }
     }, {
-      key: "_adjustSendButtonWidth",
-      value: function _adjustSendButtonWidth() {
-        var sendButtonText = this._sendButton.textContent.trim();
-        var fontSize = parseFloat(getComputedStyle(this._sendButton).fontSize);
-        var minWidth = fontSize * sendButtonText.length + 16;
-        this._sendButton.style.minWidth = "".concat(minWidth, "px");
-        return true;
+      key: "scrollToBottom",
+      value: function scrollToBottom() {
+        this._messagesArea.scrollTop = this._messagesArea.scrollHeight;
+        this.userScrolledUp = false;
+        this._updateScrollBottomBtn();
+      }
+    }, {
+      key: "_updateScrollBottomBtn",
+      value: function _updateScrollBottomBtn() {
+        if (this.userScrolledUp) {
+          this._scrollBottomBtn.classList.add('quikchat-scroll-bottom-visible');
+        } else {
+          this._scrollBottomBtn.classList.remove('quikchat-scroll-bottom-visible');
+        }
+      }
+    }, {
+      key: "_autoGrowTextarea",
+      value: function _autoGrowTextarea() {
+        var el = this._textEntry;
+        el.style.height = 'auto';
+        var maxHeight = parseInt(getComputedStyle(el).getPropertyValue('--quikchat-input-max-height')) || 120;
+        el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px';
+        el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+      }
+    }, {
+      key: "_formatTimestamp",
+      value: function _formatTimestamp(isoString) {
+        var d = new Date(isoString);
+        var h = d.getHours();
+        var m = String(d.getMinutes()).padStart(2, '0');
+        var ampm = h >= 12 ? 'PM' : 'AM';
+        var h12 = h % 12 || 12;
+        return h12 + ':' + m + ' ' + ampm;
+      }
+    }, {
+      key: "messagesAreaShowTimestamps",
+      value: function messagesAreaShowTimestamps(show) {
+        if (show) {
+          this._messagesArea.classList.add('quikchat-show-timestamps');
+        } else {
+          this._messagesArea.classList.remove('quikchat-show-timestamps');
+        }
+      }
+    }, {
+      key: "messagesAreaShowTimestampsGet",
+      value: function messagesAreaShowTimestampsGet() {
+        return this._messagesArea.classList.contains('quikchat-show-timestamps');
+      }
+    }, {
+      key: "messagesAreaShowTimestampsToggle",
+      value: function messagesAreaShowTimestampsToggle() {
+        this._messagesArea.classList.toggle('quikchat-show-timestamps');
+      }
+    }, {
+      key: "_escapeHTML",
+      value: function _escapeHTML(str) {
+        var div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+    }, {
+      key: "_processContent",
+      value: function _processContent(content) {
+        if (this._sanitize === true) {
+          content = this._escapeHTML(content);
+        } else if (typeof this._sanitize === 'function') {
+          content = this._sanitize(content);
+        }
+        if (this._messageFormatter) {
+          content = this._messageFormatter(content);
+        }
+        return content;
       }
 
       //messagesArea functions
@@ -942,151 +470,67 @@
       value: function messagesAreaAlternateColorsGet() {
         return this._messagesArea.classList.contains('quikchat-messages-area-alt');
       }
-      /**
-       * Adds a new message to the chat with full configuration options
-       * @param {Object} input - Message configuration object
-       * @param {string} [input.content=''] - Message content (HTML allowed)
-       * @param {string} [input.userString='user'] - Display name for the message sender
-       * @param {'left'|'right'|'center'} [input.align='right'] - Message alignment
-       * @param {string} [input.role='user'] - Role identifier (user, assistant, system)
-       * @param {number} [input.userID=-1] - User ID for the message
-       * @param {string|false} [input.timestamp=false] - ISO timestamp or false for auto
-       * @param {string|false} [input.updatedtime=false] - Last updated timestamp
-       * @param {boolean|'smart'} [input.scrollIntoView=true] - Scroll behavior (true/false/'smart')
-       * @param {boolean} [input.visible=true] - Whether message is initially visible
-       * @param {string[]} [input.tags=[]] - Tags for message categorization
-       * @returns {number} Message ID for the newly added message
-       * @example
-       * const msgId = chat.messageAddFull({
-       *   content: 'Hello!',
-       *   userString: 'Bot',
-       *   align: 'left',
-       *   scrollIntoView: 'smart',
-       *   tags: ['greeting']
-       * });
-       */
+      // message functions
     }, {
       key: "messageAddFull",
       value: function messageAddFull() {
-        var _this8 = this;
         var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
           content: "",
           userString: "user",
           align: "right",
           role: "user",
-          userID: -1,
-          timestamp: false,
-          updatedtime: false,
-          scrollIntoView: true,
-          visible: true,
-          tags: []
+          userID: -1
         };
         var msgid = this.msgid;
+        var messageDiv = document.createElement('div');
+        var msgidClass = 'quikchat-msgid-' + String(msgid).padStart(10, '0');
+        messageDiv.classList.add('quikchat-message', msgidClass);
+        messageDiv.classList.add('quikchat-role-' + (input.role || 'user'));
+        messageDiv.classList.add('quikchat-align-' + (input.align || 'right'));
         this.msgid++;
-        var messageDiv = null; // Initialize messageDiv to null
+        messageDiv.classList.add(this._messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');
 
-        // Check if we should initialize virtual scrolling
-        if (this.virtualScrollingEnabled && !this.virtualScroller && this._history.length >= this.virtualScrollingThreshold - 1) {
-          this._initVirtualScrolling();
+        // Visibility: default true, hidden messages get display:none
+        var visible = input.visible !== false;
+        if (!visible) {
+          messageDiv.style.display = 'none';
         }
 
-        // If virtual scrolling is enabled, use the virtual scroller
-        if (this.virtualScroller) {
-          var messageData = {
-            msgid: msgid,
-            content: input.content,
-            userString: input.userString,
-            align: input.align,
-            role: input.role,
-            visible: input.visible !== undefined ? input.visible : true,
-            tags: input.tags || [],
-            scrollIntoView: input.scrollIntoView
-          };
-
-          // Add tags to active tags set
-          if (Array.isArray(input.tags)) {
-            input.tags.forEach(function (tag) {
-              if (typeof tag === 'string' && /^[a-zA-Z0-9-]+$/.test(tag)) {
-                _this8._activeTags.add(tag);
-              }
-            });
-          }
-
-          // Add to virtual scroller
-          this.virtualScroller.addItem(messageData);
-
-          // Clear text entry
-          this._textEntry.value = '';
-          this._adjustMessagesAreaHeight();
-        } else {
-          // Original DOM-based implementation
-          messageDiv = document.createElement('div');
-          var msgidClass = 'quikchat-msgid-' + String(msgid).padStart(10, '0');
-          'quikchat-userid-' + String(input.userString).padStart(10, '0'); // hash this..
-          messageDiv.classList.add('quikchat-message', msgidClass, 'quikchat-structure');
-          messageDiv.setAttribute('role', 'article');
-          messageDiv.setAttribute('aria-label', "Message from ".concat(input.userString || 'user'));
-          if (Array.isArray(input.tags)) {
-            input.tags.forEach(function (tag) {
-              if (typeof tag === 'string' && /^[a-zA-Z0-9-]+$/.test(tag)) {
-                messageDiv.classList.add("quikchat-tag-".concat(tag));
-                _this8._activeTags.add(tag);
-              }
-            });
-          }
-          var userDiv = document.createElement('div');
-          userDiv.innerHTML = this._sanitizeContent(input.userString);
-          userDiv.classList.add('quikchat-user-label');
-          userDiv.style.textAlign = input.align;
-          var contentDiv = document.createElement('div');
-          contentDiv.classList.add('quikchat-message-content');
-
-          // Determine text alignment for right-aligned messages
-          if (input.align === "right") {
-            var isMultiLine = input.content.includes("\n");
-            var isLong = input.content.length > 50; // Adjust length threshold
-
-            if (isMultiLine || isLong) {
-              contentDiv.classList.add("quikchat-right-multiline");
-            } else {
-              contentDiv.classList.add("quikchat-right-singleline");
-            }
-          }
-          contentDiv.innerHTML = this._sanitizeContent(input.content);
-          messageDiv.appendChild(userDiv);
-          messageDiv.appendChild(contentDiv);
-          this._messagesArea.appendChild(messageDiv);
-          if (input.visible === false) {
-            messageDiv.style.display = 'none';
-          }
-
-          // Handle scroll behavior based on scrollIntoView parameter
-          // 'smart' = only scroll if near bottom, true = always scroll, false = never scroll
-          if (input.scrollIntoView === true) {
-            this.messageScrollToBottom();
-          } else if (input.scrollIntoView === 'smart' && !this.userScrolledUp) {
-            this.messageScrollToBottom();
-          }
-          // If scrollIntoView is false, don't scroll at all
+        // Tags: array of strings for group-based visibility control
+        var tags = Array.isArray(input.tags) ? input.tags.slice() : [];
+        var userDiv = document.createElement('div');
+        userDiv.classList.add('quikchat-user-label');
+        userDiv.style.textAlign = input.align;
+        userDiv.innerHTML = input.userString;
+        var contentDiv = document.createElement('div');
+        contentDiv.classList.add('quikchat-message-content');
+        contentDiv.style.textAlign = input.align;
+        contentDiv.innerHTML = this._processContent(input.content);
+        var timestamp = new Date().toISOString();
+        var timestampSpan = document.createElement('span');
+        timestampSpan.classList.add('quikchat-timestamp');
+        timestampSpan.textContent = this._formatTimestamp(timestamp);
+        messageDiv.appendChild(userDiv);
+        messageDiv.appendChild(contentDiv);
+        messageDiv.appendChild(timestampSpan);
+        this._messagesArea.appendChild(messageDiv);
 
-          this._textEntry.value = '';
-          this._adjustMessagesAreaHeight();
-          this._handleShortLongMessageCSS(messageDiv, input.align); // Handle CSS for short/long messages
-          this._updateMessageStyles();
+        // Scroll to the last message only if the user is not actively scrolling up
+        if (!this.userScrolledUp) {
+          this._messagesArea.scrollTop = this._messagesArea.scrollHeight;
         }
-
-        // Add timestamp now, unless it is passed in 
-        var timestamp = input.timestamp ? input.timestamp : new Date().toISOString();
-        var updatedtime = input.updatedtime ? input.updatedtime : timestamp;
-        var visible = input.visible !== undefined ? input.visible : true;
+        this._textEntry.value = '';
+        this._autoGrowTextarea();
+        var updatedtime = timestamp;
         if (this.trackHistory) {
           this._history.push(_objectSpread2(_objectSpread2({
             msgid: msgid
           }, input), {}, {
             visible: visible,
+            tags: tags,
             timestamp: timestamp,
             updatedtime: updatedtime,
-            messageDiv: messageDiv || null
+            messageDiv: messageDiv
           }));
           if (this._history.length > this._historyLimit) {
             this._history.shift();
@@ -1097,24 +541,6 @@
         }
         return msgid;
       }
-
-      /**
-       * Adds a new message to the chat (simplified version of messageAddFull)
-       * @param {string} [content=''] - Message content (HTML allowed)
-       * @param {string} [userString='user'] - Display name for the message sender
-       * @param {'left'|'right'|'center'} [align='right'] - Message alignment
-       * @param {string} [role='user'] - Role identifier (user, assistant, system)
-       * @param {boolean|'smart'} [scrollIntoView=true] - Scroll behavior
-       * @param {boolean} [visible=true] - Whether message is initially visible
-       * @param {string[]} [tags=[]] - Tags for message categorization
-       * @returns {number} Message ID for the newly added message
-       * @example
-       * // Simple message
-       * chat.messageAddNew('Hello!', 'User', 'right');
-       * 
-       * // Bot message with smart scroll
-       * chat.messageAddNew('Hi there!', 'Bot', 'left', 'assistant', 'smart');
-       */
     }, {
       key: "messageAddNew",
       value: function messageAddNew() {
@@ -1122,115 +548,125 @@
         var userString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "user";
         var align = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "right";
         var role = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "user";
-        var scrollIntoView = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-        var visible = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-        var tags = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
-        var retvalue = this.messageAddFull({
+        return this.messageAddFull({
           content: content,
           userString: userString,
           align: align,
-          role: role,
-          scrollIntoView: scrollIntoView,
-          visible: visible,
-          tags: tags
+          role: role
         });
-        // this.messageScrollToBottom();
-        return retvalue;
       }
-
-      /**
-       * Removes a message from the chat by its ID
-       * @param {number} n - Message ID to remove
-       * @returns {boolean} True if message was removed, false if not found
-       * @example
-       * const success = chat.messageRemove(5);
-       */
     }, {
       key: "messageRemove",
       value: function messageRemove(n) {
-        // use css selector to remove the message
-        var sucess = false;
+        var success = false;
         try {
           this._messagesArea.removeChild(this._messagesArea.querySelector(".quikchat-msgid-".concat(String(n).padStart(10, '0'))));
-          sucess = true;
-        } catch (error) {
-          console.log("{String(n)} : Message ID not found");
+          success = true;
+        } catch (_error) {
+          // Message ID not found
         }
-        if (sucess) {
-          // slow way to remove from history
-          //this._history = this._history.filter((item) => item.msgid !== n); // todo make this more efficient
-
-          // better way to delete this from history
+        if (success) {
           this._history.splice(this._history.findIndex(function (item) {
             return item.msgid === n;
           }), 1);
-
-          // Call the onMessageDelete callback if it exists
           if (this._onMessageDelete) {
             this._onMessageDelete(this, n);
           }
         }
-        return sucess;
+        return success;
       }
       /* returns the message html object from the DOM
       */
-      /**
-       * Gets the DOM element for a message by its ID
-       * @param {number} n - Message ID
-       * @returns {HTMLElement|null} The message DOM element or null if not found
-       */
     }, {
       key: "messageGetDOMObject",
       value: function messageGetDOMObject(n) {
         var msg = null;
-        // now use css selector to get the message 
         try {
           msg = this._messagesArea.querySelector(".quikchat-msgid-".concat(String(n).padStart(10, '0')));
-        } catch (error) {
-          console.log("{String(n)} : Message ID not found");
+        } catch (_error) {
+          // Message ID not found
         }
         return msg;
       }
       /* returns the message content only
       */
-      /**
-       * Gets the content of a message by its ID
-       * @param {number} n - Message ID
-       * @returns {string} The message content or empty string if not found
-       */
     }, {
       key: "messageGetContent",
       value: function messageGetContent(n) {
         var content = "";
-        // now use css selector to get the message 
         try {
-          // get from history..
           content = this._history.filter(function (item) {
             return item.msgid === n;
           })[0].content;
-          //content =  this._messagesArea.querySelector(`.quikchat-msgid-${String(n).padStart(10, '0')}`).lastChild.textContent;
-        } catch (error) {
-          console.log("{String(n)} : Message ID not found");
+        } catch (_error) {
+          // Message ID not found
         }
         return content;
       }
-
-      /* returns the DOM Content element of a given message
-      */
     }, {
-      key: "messageGetContentDOMElement",
-      value: function messageGetContentDOMElement(n) {
-        var contentElement = null;
-        // now use css selector to get the message
+      key: "messageSetVisible",
+      value: function messageSetVisible(n, visible) {
+        var msgEl = this.messageGetDOMObject(n);
+        if (!msgEl) return false;
+        msgEl.style.display = visible ? '' : 'none';
+        var item = this._history.find(function (entry) {
+          return entry.msgid === n;
+        });
+        if (item) item.visible = visible;
+        return true;
+      }
+    }, {
+      key: "messageGetVisible",
+      value: function messageGetVisible(n) {
+        var item = this._history.find(function (entry) {
+          return entry.msgid === n;
+        });
+        return item ? item.visible !== false : false;
+      }
+    }, {
+      key: "messageToggleVisible",
+      value: function messageToggleVisible(n) {
+        var current = this.messageGetVisible(n);
+        return this.messageSetVisible(n, !current);
+      }
+    }, {
+      key: "messageSetVisibleByTag",
+      value: function messageSetVisibleByTag(tag, visible) {
+        var count = 0;
+        var _iterator = _createForOfIteratorHelper(this._history),
+          _step;
         try {
-          //contentElement = this._messagesArea.querySelector(`.quikchat-msgid-${String(n).padStart(10, '0')}`).lastChild;
-          contentElement = this._history.filter(function (item) {
-            return item.msgid === n;
-          })[0].messageDiv.lastChild;
-        } catch (error) {
-          console.log("{String(n)} : Message ID not found");
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var item = _step.value;
+            if (item.tags && item.tags.includes(tag)) {
+              this.messageSetVisible(item.msgid, visible);
+              count++;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
         }
-        return contentElement;
+        return count;
+      }
+    }, {
+      key: "messageGetTags",
+      value: function messageGetTags(n) {
+        var item = this._history.find(function (entry) {
+          return entry.msgid === n;
+        });
+        return item && item.tags ? item.tags.slice() : [];
+      }
+    }, {
+      key: "messageSetTags",
+      value: function messageSetTags(n, tags) {
+        var item = this._history.find(function (entry) {
+          return entry.msgid === n;
+        });
+        if (!item) return false;
+        item.tags = Array.isArray(tags) ? tags.slice() : [];
+        return true;
       }
 
       /* append message to the message content
@@ -1240,41 +676,23 @@
       value: function messageAppendContent(n, content) {
         var success = false;
         try {
-          // Update history first
-          var item = this._history.filter(function (item) {
-            return item.msgid === n;
+          var msgEl = this._messagesArea.querySelector(".quikchat-msgid-".concat(String(n).padStart(10, '0')));
+          var item = this._history.filter(function (entry) {
+            return entry.msgid === n;
           })[0];
           item.content += content;
           item.updatedtime = new Date().toISOString();
-
-          // If virtual scrolling is active, update the virtual scroller
-          if (this.virtualScroller) {
-            // Find the item index in virtual scroller
-            var index = this.virtualScroller.items.findIndex(function (item) {
-              return item.msgid === n;
-            });
-            if (index >= 0) {
-              this.virtualScroller.items[index].content += content; // Don't double-sanitize, it's done on render
-              // Re-render if the item is currently visible
-              this.virtualScroller.updateItem(index, {
-                content: this.virtualScroller.items[index].content
-              });
-            }
-          } else {
-            // Regular DOM manipulation
-            this._messagesArea.querySelector(".quikchat-msgid-".concat(String(n).padStart(10, '0'))).lastChild.innerHTML += this._sanitizeContent(content);
-          }
+          msgEl.querySelector('.quikchat-message-content').innerHTML = this._processContent(item.content);
+          msgEl.classList.remove('quikchat-typing');
           success = true;
-
-          // Call the onMessageAppend callback if it exists
+          if (!this.userScrolledUp) {
+            this._messagesArea.scrollTop = this._messagesArea.scrollHeight;
+          }
           if (this._onMessageAppend) {
             this._onMessageAppend(this, n, content);
           }
-
-          // Don't auto-scroll on append - let user control this
-          // Users can call messageScrollToBottom() if they want to scroll
-        } catch (error) {
-          console.log("".concat(String(n), " : Message ID not found"));
+        } catch (_error) {
+          // Message ID not found
         }
         return success;
       }
@@ -1286,405 +704,80 @@
       value: function messageReplaceContent(n, content) {
         var success = false;
         try {
-          // Update history first
-          var item = this._history.filter(function (item) {
-            return item.msgid === n;
+          var msgEl = this._messagesArea.querySelector(".quikchat-msgid-".concat(String(n).padStart(10, '0')));
+          var item = this._history.filter(function (entry) {
+            return entry.msgid === n;
           })[0];
           item.content = content;
           item.updatedtime = new Date().toISOString();
-
-          // If virtual scrolling is active, update the virtual scroller
-          if (this.virtualScroller) {
-            // Find the item index in virtual scroller
-            var index = this.virtualScroller.items.findIndex(function (item) {
-              return item.msgid === n;
-            });
-            if (index >= 0) {
-              this.virtualScroller.items[index].content = content; // Don't double-sanitize, it's done on render
-              // Re-render if the item is currently visible
-              this.virtualScroller.updateItem(index, {
-                content: content
-              });
-            }
-          } else {
-            // Regular DOM manipulation
-            this._messagesArea.querySelector(".quikchat-msgid-".concat(String(n).padStart(10, '0'))).lastChild.innerHTML = this._sanitizeContent(content);
-          }
+          msgEl.querySelector('.quikchat-message-content').innerHTML = this._processContent(content);
+          msgEl.classList.remove('quikchat-typing');
           success = true;
-
-          // Call the onMessageReplace callback if it exists
+          if (!this.userScrolledUp) {
+            this._messagesArea.scrollTop = this._messagesArea.scrollHeight;
+          }
           if (this._onMessageReplace) {
             this._onMessageReplace(this, n, content);
           }
-
-          // Don't auto-scroll on append - let user control this
-          // Users can call messageScrollToBottom() if they want to scroll
-        } catch (error) {
-          console.log("".concat(String(n), " : Message ID not found"));
+        } catch (_error) {
+          // Message ID not found
         }
         return success;
       }
-
-      /**
-       * Scrolls the messages area to the bottom.
-       */
-    }, {
-      key: "messageScrollToBottom",
-      value: function messageScrollToBottom() {
-        // Always use scrollTop to avoid page jumping
-        // This ensures only the chat container scrolls, not the entire page
-        this._messagesArea.scrollTop = this._messagesArea.scrollHeight;
-      }
-
-      /**
-       * Removes the last message from the messages area.
-       */
-    }, {
-      key: "messageRemoveLast",
-      value: function messageRemoveLast() {
-        // find the last message by id:
-        if (this._history.length >= 0) {
-          var lastMsgId = this._history[this._history.length - 1].msgid;
-          return this.messageRemove(lastMsgId);
-        }
-        return false;
-      }
     }, {
-      key: "messageSetVisibility",
-      value: function messageSetVisibility(msgid, isVisible) {
-        var message = this._history.find(function (item) {
-          return item.msgid === msgid;
+      key: "messageAddTypingIndicator",
+      value: function messageAddTypingIndicator() {
+        var userString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+        var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left';
+        var msgid = this.messageAddFull({
+          content: '',
+          userString: userString,
+          align: align,
+          role: 'assistant'
         });
-        if (message && message.messageDiv) {
-          message.messageDiv.style.display = isVisible ? '' : 'none';
-          message.visible = isVisible;
-          this._updateMessageStyles();
-          return true;
-        }
-        return false;
+        var msgEl = this.messageGetDOMObject(msgid);
+        msgEl.classList.add('quikchat-typing');
+        var contentDiv = msgEl.querySelector('.quikchat-message-content');
+        contentDiv.innerHTML = '<span class="quikchat-typing-dots"><span>.</span><span>.</span><span>.</span></span>';
+        return msgid;
       }
     }, {
-      key: "messageGetVisibility",
-      value: function messageGetVisibility(msgid) {
-        var message = this._history.find(function (item) {
-          return item.msgid === msgid;
-        });
-        if (message && message.messageDiv) {
-          return message.messageDiv.style.display !== 'none';
-        }
-        return false; // Return false if not found or no messageDiv
+      key: "setMessageFormatter",
+      value: function setMessageFormatter(formatter) {
+        this._messageFormatter = formatter;
       }
     }, {
-      key: "_updateMessageStyles",
-      value: function _updateMessageStyles() {
-        var visibleMessages = _toConsumableArray(this._messagesArea.children).filter(function (child) {
-          return child.style.display !== 'none';
-        });
-        visibleMessages.forEach(function (messageDiv, index) {
-          messageDiv.classList.remove('quikchat-message-1', 'quikchat-message-2');
-          messageDiv.classList.add(index % 2 === 0 ? 'quikchat-message-1' : 'quikchat-message-2');
-        });
+      key: "setSanitize",
+      value: function setSanitize(sanitize) {
+        this._sanitize = sanitize;
       }
 
-      /**
-       * For right sided or centered messages, we need to handle the CSS for short and long messages.
-       * for short messages we use simple justifying, for long messages we need to wrap and perform multiline
-       * formatting. 
-       * 
-       * @param {*} messageElement 
-       * @returns nothing
-       */
-    }, {
-      key: "_handleShortLongMessageCSS",
-      value: function _handleShortLongMessageCSS(messageElement, align) {
-        // console.log(messageElement);
-        // Reset classes
-        messageElement.classList.remove('left-singleline', 'left-multiline', 'center-singleline', 'center-multiline', 'right-singleline', 'right-multiline');
-        var contentDiv = messageElement.lastChild;
-        window.lastDiv = contentDiv; // for debugging   
-        // Determine if the message is short or long
-
-        var computedStyle = window.getComputedStyle(contentDiv);
-
-        // Get the element's height
-        var elementHeight = contentDiv.offsetHeight;
-
-        // Calculate or estimate line height
-        var lineHeight;
-        if (computedStyle.lineHeight === "normal") {
-          var fontSize = parseFloat(computedStyle.fontSize);
-          lineHeight = fontSize * 1.2; // approximate "normal" as 1.2 times font-size
-        } else {
-          lineHeight = parseFloat(computedStyle.lineHeight);
-        }
-
-        // Check if the element height is more than one line-height
-        var isMultiLine = elementHeight > lineHeight;
-
-        // Using scrollHeight and clientHeight to check for overflow (multi-line)
-        switch (align) {
-          case 'center':
-            if (isMultiLine) {
-              messageElement.classList.add('center-multiline');
-            } else {
-              messageElement.classList.add('center-singleline');
-            }
-            break;
-          case 'right':
-            if (isMultiLine) {
-              messageElement.classList.add('right-multiline');
-            } else {
-              messageElement.classList.add('right-singleline');
-            }
-            break;
-          case 'left':
-          default:
-            if (isMultiLine) {
-              messageElement.classList.add('left-multiline');
-            } else {
-              messageElement.classList.add('left-singleline');
-            }
-            break;
-        }
-      }
       // history functions
       /**
-       * 
-       * @param {*} n 
-       * @param {*} m 
+       *
+       * @param {*} n
+       * @param {*} m
        * @returns array of history messages
        */
-      /**
-       * Gets a slice of message history
-       * @param {number} [n] - Start index (defaults to 0)
-       * @param {number} [m] - End index (defaults to history length)
-       * @returns {Array} Array of message objects
-       * @example
-       * // Get first 10 messages
-       * const messages = chat.historyGet(0, 10);
-       * 
-       * // Get all messages
-       * const allMessages = chat.historyGet();
-       */
     }, {
       key: "historyGet",
       value: function historyGet(n, m) {
-        if (n == undefined) {
-          n = 0;
-          m = this._history.length;
+        if (n === undefined) {
+          return this._history.slice();
         }
         if (m === undefined) {
-          m = n < 0 ? m : n + 1;
-        }
-        // remember that entries could be deleted.  TODO: So we need to return the actual history entries
-        // so now we need to find the array index that correspondes to messageIds n (start) and m (end)
-
-        return this._history.slice(n, m);
-      }
-
-      /**
-       * Gets a copy of the entire message history
-       * @returns {Array} Complete array of all message objects
-       * @example
-       * const history = chat.historyGetAllCopy();
-       * console.log(`Total messages: ${history.length}`);
-       */
-    }, {
-      key: "historyGetAllCopy",
-      value: function historyGetAllCopy() {
-        return this._history.slice();
-      }
-
-      /**
-       * Get a page of history messages with pagination support
-       * @param {number} page - Page number (1-based)
-       * @param {number} pageSize - Number of messages per page (default 50)
-       * @param {string} order - 'asc' for oldest first, 'desc' for newest first (default 'asc')
-       * @returns {object} Object with messages array, pagination info
-       */
-    }, {
-      key: "historyGetPage",
-      value: function historyGetPage() {
-        var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-        var pageSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
-        var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'asc';
-        var totalMessages = this._history.length;
-        var totalPages = Math.ceil(totalMessages / pageSize);
-        var currentPage = Math.max(1, Math.min(page, totalPages || 1));
-        var start, end;
-        if (order === 'desc') {
-          // For descending order, page 1 shows the newest messages
-          start = Math.max(0, totalMessages - currentPage * pageSize);
-          end = totalMessages - (currentPage - 1) * pageSize;
-        } else {
-          // For ascending order, page 1 shows the oldest messages
-          start = (currentPage - 1) * pageSize;
-          end = Math.min(start + pageSize, totalMessages);
-        }
-        var messages = this._history.slice(start, end);
-
-        // Reverse messages array if descending order requested
-        if (order === 'desc') {
-          messages.reverse();
-        }
-        return {
-          messages: messages,
-          pagination: {
-            currentPage: currentPage,
-            pageSize: pageSize,
-            totalPages: totalPages,
-            totalMessages: totalMessages,
-            hasNext: currentPage < totalPages,
-            hasPrevious: currentPage > 1,
-            order: order
+          if (n < 0) {
+            return this._history.slice(n);
           }
-        };
-      }
-
-      /**
-       * Get information about history size and pagination
-       * @param {number} pageSize - Size to calculate pages for (default 50)
-       * @returns {object} History metadata
-       */
-      /**
-       * Search history for messages matching criteria
-       * @param {object} criteria - Search criteria object
-       * @param {string} criteria.text - Text to search for in message content
-       * @param {string} criteria.userString - Filter by user name
-       * @param {string} criteria.role - Filter by role
-       * @param {array} criteria.tags - Filter by tags (messages with any of these tags)
-       * @param {number} criteria.limit - Maximum results to return (default 100)
-       * @returns {array} Array of matching messages
-       */
-      /**
-       * Searches through message history with various filters
-       * @param {Object} [criteria={}] - Search criteria
-       * @param {string} [criteria.text] - Text to search for in message content
-       * @param {string} [criteria.userString] - Filter by specific user
-       * @param {string} [criteria.role] - Filter by role (user, assistant, system)
-       * @param {string[]} [criteria.tags] - Filter by tags (messages must have at least one)
-       * @param {number} [criteria.limit=100] - Maximum number of results
-       * @returns {Array} Array of matching messages
-       * @since 1.1.15
-       * @example
-       * // Search for messages containing 'error'
-       * const errors = chat.historySearch({ text: 'error' });
-       * 
-       * // Find all bot messages
-       * const botMessages = chat.historySearch({ role: 'assistant' });
-       * 
-       * // Complex search
-       * const results = chat.historySearch({
-       *   text: 'help',
-       *   userString: 'Support',
-       *   tags: ['urgent'],
-       *   limit: 20
-       * });
-       */
-    }, {
-      key: "historySearch",
-      value: function historySearch() {
-        var criteria = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        var results = this._history;
-
-        // Filter by text content (case-insensitive)
-        if (criteria.text) {
-          var searchText = criteria.text.toLowerCase();
-          results = results.filter(function (msg) {
-            return msg.content.toLowerCase().includes(searchText);
-          });
+          return this._history.slice(n, n + 1);
         }
-
-        // Filter by user
-        if (criteria.userString) {
-          results = results.filter(function (msg) {
-            return msg.userString === criteria.userString;
-          });
-        }
-
-        // Filter by role
-        if (criteria.role) {
-          results = results.filter(function (msg) {
-            return msg.role === criteria.role;
-          });
-        }
-
-        // Filter by tags (match any tag)
-        if (criteria.tags && criteria.tags.length > 0) {
-          results = results.filter(function (msg) {
-            return msg.tags && msg.tags.some(function (tag) {
-              return criteria.tags.includes(tag);
-            });
-          });
-        }
-
-        // Limit results
-        var limit = criteria.limit || 100;
-        if (results.length > limit) {
-          results = results.slice(0, limit);
-        }
-        return results;
-      }
-
-      /**
-       * Gets metadata and statistics about the message history
-       * @param {number} [pageSize=50] - Page size for calculating total pages
-       * @returns {Object} History information object
-       * @returns {number} returns.totalMessages - Total number of messages
-       * @returns {number} returns.totalPages - Total pages based on page size
-       * @returns {Object|null} returns.oldestMessage - First message info
-       * @returns {Object|null} returns.newestMessage - Last message info
-       * @returns {Object} returns.memoryUsage - Memory usage statistics
-       * @since 1.1.15
-       * @example
-       * const info = chat.historyGetInfo();
-       * console.log(`Messages: ${info.totalMessages}`);
-       * console.log(`Memory: ${info.memoryUsage.estimatedSize} bytes`);
-       */
-    }, {
-      key: "historyGetInfo",
-      value: function historyGetInfo() {
-        var pageSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
-        var totalMessages = this._history.length;
-        return {
-          totalMessages: totalMessages,
-          totalPages: Math.ceil(totalMessages / pageSize),
-          oldestMessage: totalMessages > 0 ? {
-            msgid: this._history[0].msgid,
-            timestamp: this._history[0].timestamp,
-            userString: this._history[0].userString
-          } : null,
-          newestMessage: totalMessages > 0 ? {
-            msgid: this._history[totalMessages - 1].msgid,
-            timestamp: this._history[totalMessages - 1].timestamp,
-            userString: this._history[totalMessages - 1].userString
-          } : null,
-          memoryUsage: {
-            estimatedSize: JSON.stringify(this._history).length,
-            averageMessageSize: totalMessages > 0 ? Math.round(JSON.stringify(this._history).length / totalMessages) : 0
-          }
-        };
+        return this._history.slice(n, m);
       }
-
-      /**
-       * Clears all messages and resets the chat
-       * @returns {void}
-       * @example
-       * chat.historyClear(); // Removes all messages
-       */
     }, {
       key: "historyClear",
       value: function historyClear() {
         this.msgid = 0;
-
-        // Handle virtual scroller
-        if (this.virtualScroller) {
-          this.virtualScroller.clear();
-        } else {
-          this._messagesArea.innerHTML = "";
-        }
         this._history = [];
-        this._activeTags.clear();
       }
     }, {
       key: "historyGetLength",
@@ -1702,29 +795,57 @@
     }, {
       key: "historyGetMessageContent",
       value: function historyGetMessageContent(n) {
-        if (n >= 0 && n < this._history.length) return this._history[n].content;else return "";
+        if (n >= 0 && n < this._history.length) {
+          return this._history[n].content;
+        }
+        return "";
       }
-
-      // expects an array of messages to be in the format of the history object
     }, {
-      key: "historyRestoreAll",
-      value: function historyRestoreAll(messageList) {
-        var _this9 = this;
-        // clear all messages and history
-        this.historyClear();
-
-        // clear the messages div 
-        this._messagesArea.innerHTML = "";
-
-        // add all messages
-        messageList.forEach(function (message) {
-          _this9.messageAddFull(message);
+      key: "historyExport",
+      value: function historyExport() {
+        return this._history.map(function (item) {
+          return {
+            msgid: item.msgid,
+            content: item.content,
+            userString: item.userString,
+            align: item.align,
+            role: item.role,
+            userID: item.userID,
+            visible: item.visible,
+            tags: item.tags ? item.tags.slice() : [],
+            timestamp: item.timestamp,
+            updatedtime: item.updatedtime
+          };
         });
       }
-      /**
-       * 
-       * @param {string} newTheme 
-       */
+    }, {
+      key: "historyImport",
+      value: function historyImport(data) {
+        // Clear existing messages from DOM and history
+        this._messagesArea.innerHTML = '';
+        this._history = [];
+        this.msgid = 0;
+        var _iterator2 = _createForOfIteratorHelper(data),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var entry = _step2.value;
+            this.messageAddFull({
+              content: entry.content || '',
+              userString: entry.userString || 'user',
+              align: entry.align || 'right',
+              role: entry.role || 'user',
+              userID: entry.userID,
+              visible: entry.visible,
+              tags: entry.tags
+            });
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
     }, {
       key: "changeTheme",
       value: function changeTheme(newTheme) {
@@ -1732,323 +853,46 @@
         this._chatWidget.classList.add(newTheme);
         this._theme = newTheme;
       }
-
-      /**
-       *  Get the current theme
-       * @returns {string} - The current theme
-       */
     }, {
       key: "theme",
       get: function get() {
         return this._theme;
       }
-
-      /**
-       * 
-       * @returns {object} - Returns the version and license information for the library.
-       */
-      /**
-       * Gets the QuikChat version information
-       * @static
-       * @returns {Object} Version information object
-       * @returns {string} returns.version - Version number (e.g., '1.1.15')
-       * @returns {string} returns.license - License type (e.g., 'BSD-2')
-       * @returns {string} returns.url - Project URL
-       * @returns {boolean} returns.fun - Easter egg flag
-       * @example
-       * const version = quikchat.version();
-       * console.log(`QuikChat v${version.version}`);
-       */
-    }, {
-      key: "setTagVisibility",
-      value:
-      /**
-       * Sets visibility for all messages with a specific tag
-       * @param {string} tagName - Tag name to control
-       * @param {boolean} isVisible - Whether to show or hide messages with this tag
-       * @returns {boolean} True if successful, false if invalid tag name
-       * @since 1.1.14
-       * @example
-       * // Hide all system messages
-       * chat.setTagVisibility('system', false);
-       * 
-       * // Show urgent messages
-       * chat.setTagVisibility('urgent', true);
-       */
-      function setTagVisibility(tagName, isVisible) {
-        if (typeof tagName !== 'string' || !/^[a-zA-Z0-9-]+$/.test(tagName)) {
-          return false;
-        }
-        var className = "quikchat-show-tag-".concat(tagName);
-        if (isVisible) {
-          this._chatWidget.classList.add(className);
-        } else {
-          this._chatWidget.classList.remove(className);
-        }
-        this._updateMessageStyles();
-        return true;
-      }
-
-      /**
-       * Gets the visibility state of a tag
-       * @param {string} tagName - Tag name to check
-       * @returns {boolean} True if tag is visible, false otherwise
-       * @since 1.1.14
-       * @example
-       * const isVisible = chat.getTagVisibility('system');
-       */
-    }, {
-      key: "getTagVisibility",
-      value: function getTagVisibility(tagName) {
-        if (typeof tagName !== 'string' || !/^[a-zA-Z0-9-]+$/.test(tagName)) {
-          return false;
-        }
-        return this._chatWidget.classList.contains("quikchat-show-tag-".concat(tagName));
-      }
-
-      /**
-       * Gets all active tags in the chat
-       * @returns {string[]} Array of all tags currently in use
-       * @since 1.1.14
-       * @example
-       * const tags = chat.getActiveTags();
-       * console.log('Active tags:', tags);
-       */
-    }, {
-      key: "getActiveTags",
-      value: function getActiveTags() {
-        return Array.from(this._activeTags);
-      }
-
-      /**
-       * Checks if virtual scrolling is currently enabled
-       * @returns {boolean} True if virtual scrolling is enabled, false otherwise
-       * @since 1.1.16
-       * @example
-       * if (chat.isVirtualScrollingEnabled()) {
-       *     console.log('Virtual scrolling is active');
-       * }
-       */
-    }, {
-      key: "isVirtualScrollingEnabled",
-      value: function isVirtualScrollingEnabled() {
-        return this.virtualScrollingEnabled && this.virtualScroller !== null;
-      }
-
-      /**
-       * Gets the virtual scrolling configuration
-       * @returns {Object} Virtual scrolling configuration with enabled status and threshold
-       * @since 1.1.16
-       * @example
-       * const config = chat.getVirtualScrollingConfig();
-       * console.log(`Virtual scrolling: ${config.enabled}, threshold: ${config.threshold}`);
-       */
-    }, {
-      key: "getVirtualScrollingConfig",
-      value: function getVirtualScrollingConfig() {
-        return {
-          enabled: this.virtualScrollingEnabled,
-          active: this.virtualScroller !== null,
-          threshold: this.virtualScrollingThreshold
-        };
-      }
-
-      /**
-       * Set the language for the widget
-       * @param {string} lang - Language code (e.g., 'en', 'es', 'fr')
-       * @param {Object} [translations] - Optional translations object for the language
-       * @example
-       * chat.setLanguage('es', {
-       *   sendButton: 'Enviar',
-       *   inputPlaceholder: 'Escribe un mensaje...',
-       *   titleDefault: 'Chat'
-       * });
-       */
-    }, {
-      key: "setLanguage",
-      value: function setLanguage(lang, translations) {
-        this.lang = lang;
-
-        // Add translations if provided
-        if (translations) {
-          this.translations[lang] = _objectSpread2(_objectSpread2({}, this.translations[lang]), translations);
-        }
-
-        // Update current translations
-        this.currentTranslations = this.translations[lang] || this.translations['en'];
-
-        // Update UI elements
-        this._updateUITranslations();
-      }
-
-      /**
-       * Get current language
-       * @returns {string} Current language code
-       */
-    }, {
-      key: "getLanguage",
-      value: function getLanguage() {
-        return this.lang;
-      }
-
-      /**
-       * Set text direction (LTR or RTL)
-       * @param {string} dir - Direction ('ltr' or 'rtl')
-       */
-    }, {
-      key: "setDirection",
-      value: function setDirection(dir) {
-        if (dir === 'ltr' || dir === 'rtl') {
-          this.dir = dir;
-          this._chatWidget.setAttribute('dir', dir);
-        }
-      }
-
-      /**
-       * Get current text direction
-       * @returns {string} Current direction ('ltr' or 'rtl')
-       */
-    }, {
-      key: "getDirection",
-      value: function getDirection() {
-        return this.dir;
-      }
-
-      /**
-       * Update UI elements with current translations
-       * @private
-       */
-    }, {
-      key: "_updateUITranslations",
-      value: function _updateUITranslations() {
-        // Update send button text
-        if (this._sendButton) {
-          this._sendButton.textContent = this.currentTranslations.sendButton || 'Send';
-        }
-
-        // Update input placeholder
-        if (this._textEntry) {
-          this._textEntry.placeholder = this.currentTranslations.inputPlaceholder || 'Type a message...';
-        }
-
-        // Update widget language attribute
-        if (this._chatWidget) {
-          this._chatWidget.setAttribute('lang', this.lang);
-        }
-      }
-
-      /**
-       * Sets the content sanitizer function
-       * @param {Function|null} sanitizer - Function to sanitize content or null to disable
-       * @returns {void}
-       * @example
-       * // Use built-in HTML escaper
-       * chat.setSanitizer(quikchat.sanitizers.escapeHTML);
-       * 
-       * // Use custom sanitizer (e.g., DOMPurify)
-       * chat.setSanitizer((content) => DOMPurify.sanitize(content));
-       * 
-       * // Disable sanitization
-       * chat.setSanitizer(null);
-       */
-    }, {
-      key: "setSanitizer",
-      value: function setSanitizer(sanitizer) {
-        if (sanitizer === null || typeof sanitizer === 'function') {
-          this._sanitizer = sanitizer;
-        } else {
-          console.warn('Sanitizer must be a function or null');
-        }
-      }
-
-      /**
-       * Gets the current content sanitizer function
-       * @returns {Function|null} The current sanitizer function or null
-       * @example
-       * const sanitizer = chat.getSanitizer();
-       * if (sanitizer) {
-       *   console.log('Sanitization is enabled');
-       * }
-       */
-    }, {
-      key: "getSanitizer",
-      value: function getSanitizer() {
-        return this._sanitizer;
-      }
-
-      /**
-       * Internal method to apply sanitizer to content
-       * @private
-       * @param {string} content - Content to sanitize
-       * @returns {string} Sanitized content
-       */
-    }, {
-      key: "_sanitizeContent",
-      value: function _sanitizeContent(content) {
-        if (this._sanitizer && typeof this._sanitizer === 'function') {
-          return this._sanitizer(content);
-        }
-        return content;
-      }
     }], [{
       key: "version",
       value: function version() {
-        return quikchatVersion;
+        return {
+          "version": "1.2.4",
+          "license": "BSD-2",
+          "url": "https://github/deftio/quikchat"
+        };
       }
 
-      /**
-       * Built-in content sanitizers for XSS protection
-       * @static
-       * @type {Object}
-       * @property {Function} escapeHTML - Escapes HTML entities
-       * @property {Function} stripHTML - Removes all HTML tags
-       * @example
-       * // Use built-in HTML escaper
-       * const chat = new quikchat('#chat', onSend, {
-       *   sanitizer: quikchat.sanitizers.escapeHTML
-       * });
-       */
-    }, {
-      key: "loremIpsum",
-      value:
       /**
        * quikchat.loremIpsum() - Generate a simple string of Lorem Ipsum text (sample typographer's text) of numChars in length.
        * borrowed from github.com/deftio/bitwrench.js
-       * @param {number} numChars - The number of characters to generate (random btw 25 and 150 if undefined).    
+       * @param {number} numChars - The number of characters to generate (random btw 25 and 150 if undefined).
        * @param {number} [startSpot=0] - The starting index in the Lorem Ipsum text. If undefined, a random startSpot will be generated.
        * @param {boolean} [startWithCapitalLetter=true] - If true, capitalize the first character or inject a capital letter if the first character isn't a capital letter.
-       * 
+       *
        * @returns {string} A string of Lorem Ipsum text.
-       * 
-       * @example 
+       *
+       * @example
        * // Returns 200 characters of Lorem Ipsum starting from index 50
        * loremIpsum(200, 50);
-       * 
-       * @example 
+       *
+       * @example
        * //Returns a 200 Lorem Ipsum characters starting from a random index
        * loremIpsum(200);
        */
-
-      /**
-       * Generates Lorem Ipsum placeholder text
-       * @static
-       * @param {number} [numChars] - Length of text to generate (random if not specified)
-       * @param {number} [startSpot] - Starting offset in Lorem text (random if not specified)
-       * @param {boolean} [startWithCapitalLetter=true] - Whether to capitalize first letter
-       * @returns {string} Generated Lorem Ipsum text
-       * @example
-       * // Generate 100 characters
-       * const text = quikchat.loremIpsum(100);
-       * 
-       * // Generate random length
-       * const randomText = quikchat.loremIpsum();
-       */
-      function loremIpsum(numChars) {
+    }, {
+      key: "loremIpsum",
+      value: function loremIpsum(numChars) {
         var startSpot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
         var startWithCapitalLetter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
         var loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ";
         if (typeof numChars !== "number") {
-          numChars = Math.floor(Math.random() * 150) + 25;
+          numChars = Math.floor(Math.random() * 126) + 25;
         }
         if (startSpot === undefined) {
           startSpot = Math.floor(Math.random() * loremText.length);
@@ -2060,9 +904,6 @@
           startSpot = (startSpot + 1) % loremText.length;
         }
         var l = loremText.substring(startSpot) + loremText.substring(0, startSpot);
-        if (typeof numChars !== "number") {
-          numChars = l.length;
-        }
         var s = "";
         while (numChars > 0) {
           s += numChars < l.length ? l.substring(0, numChars) : l;
@@ -2072,128 +913,12 @@
           s = s.substring(0, s.length - 1) + "."; // always end on non-whitespace. "." was chosen arbitrarily.
         }
         if (startWithCapitalLetter) {
-          var c = s[0].toUpperCase();
-          c = /[A-Z]/.test(c) ? c : "M";
-          s = c + s.substring(1);
+          s = s[0].toUpperCase() + s.substring(1);
         }
         return s;
       }
-    }, {
-      key: "tempMessageGenerator",
-      value:
-      /**
-       * Creates a temporary message that updates periodically
-       * @static
-       * @param {string|HTMLElement} domElement - Element selector or DOM element
-       * @param {string} content - Initial message content
-       * @param {number} interval - Update interval in milliseconds (min 100ms)
-       * @param {Function} [cb=null] - Callback to generate new content
-       * @param {string} cb.message - Current message
-       * @param {number} cb.count - Update count
-       * @returns {void}
-       * @example
-       * // Simple loading indicator
-       * quikchat.tempMessageGenerator('#loading', 'Loading', 500);
-       * 
-       * // Custom update function
-       * quikchat.tempMessageGenerator('#status', 'Processing', 1000, (msg, count) => {
-       *   return `Processing... ${count}%`;
-       * });
-       */
-      function tempMessageGenerator(domElement, content, interval) {
-        var cb = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-        interval = Math.max(interval, 100); // Ensure at least 100ms interval
-
-        var count = 0;
-        var defaultCB = function defaultCB(msg, count) {
-          msg += ".";
-          return msg;
-        };
-        if (cb && typeof cb !== 'function') {
-          cb = null;
-        }
-        cb = cb || defaultCB;
-
-        // if its a string, then get the element (css sel) or its an DOM element already 
-        var el = domElement;
-        if (typeof el === 'string') {
-          el = document.querySelector(el);
-        }
-        var element = el;
-
-        // Ensure the element exists
-        if (!element) return;
-        element.innerHTML = content;
-        var currentMsg = content;
-        var intervalId = setInterval(function () {
-          if (element.innerHTML !== currentMsg) {
-            clearInterval(intervalId); // Stop updating if content is changed externally
-            return;
-          }
-          currentMsg = String(cb(currentMsg, count)); // Use callback return value if provided
-
-          count++;
-          element.innerHTML = currentMsg;
-        }, interval);
-      }
-    }, {
-      key: "createTempMessageDOMStr",
-      value: function createTempMessageDOMStr(initialContent) {
-        var updateInterval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
-        var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-        var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-        // Make sure the interval is at least 100ms
-        updateInterval = Math.max(updateInterval, 100);
-
-        // Validate callback; if not a function, ignore it.
-        if (callback && typeof callback !== 'function') {
-          callback = null;
-        }
-        // Default callback simply appends a dot.
-        callback = callback || function (msg, count) {
-          return msg + ".";
-        };
-
-        // Allow an optional CSS class for the container element
-        var containerClass = options.containerClass ? options.containerClass : '';
-
-        // Generate a unique id so that the inline script can reliably find the container.
-        var uniqueId = "tempMsg_" + Date.now() + "_" + Math.floor(Math.random() * 1000000);
-
-        // Build and return the HTML string.
-        // Note the use of <\/script> (with a backslash) so that the inline script is not terminated early.
-        return "\n          <span id=\"".concat(uniqueId, "\" ").concat(containerClass ? "class=\"".concat(containerClass, "\"") : '', ">\n            ").concat(initialContent, "\n          </span>\n          <script>\n            (function(){\n              // Get our container element by its unique id.\n              var container = document.getElementById(\"").concat(uniqueId, "\");\n              if (!container) return;\n              var count = 0;\n              var currentMsg = container.innerHTML;\n              var interval = ").concat(updateInterval, ";\n              // Convert the callback function into its string representation.\n              var cb = ").concat(callback.toString(), ";\n              var intervalId = setInterval(function(){\n                // If the content has been replaced, stop updating.\n                if(container.innerHTML !== currentMsg){\n                  clearInterval(intervalId);\n                  return;\n                }\n                // Use the callback to generate the new message.\n                currentMsg = String(cb(currentMsg, count));\n                count++;\n                container.innerHTML = currentMsg;\n              }, interval);\n            })();\n          </script>\n        ");
-      }
     }]);
   }();
-  _defineProperty(quikchat, "sanitizers", {
-    /**
-     * Escapes HTML entities to prevent XSS
-     * @param {string} str - String to escape
-     * @returns {string} Escaped string
-     */
-    escapeHTML: function escapeHTML(str) {
-      if (typeof str !== 'string') return str;
-      return str.replace(/[&<>"']/g, function (m) {
-        return {
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          '"': '&quot;',
-          "'": '&#39;'
-        }[m];
-      });
-    },
-    /**
-     * Strips all HTML tags but keeps text content
-     * @param {string} str - String to strip
-     * @returns {string} Text without HTML tags
-     */
-    stripHTML: function stripHTML(str) {
-      if (typeof str !== 'string') return str;
-      return str.replace(/<[^>]*>/g, '');
-    }
-  });
 
   return quikchat;