diff --git a/README.md b/README.md
index 8f21205..73486d6 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,8 @@ quikchat is a simple vanilla (no dependancies) JavaScript chat control that can
 ## Features
 * Callback function for message events.
 * Responsive design for various screen sizes.
-* Themeable
+* Themeable with css
+* Hideable/Showable Title and Text Entry areas allows flexibility of usage
 
 ## Demo
 [Example Code and Demo](https://deftio.github.io/quikchat/example.html)
@@ -19,7 +20,7 @@ html
 
 ```html
 <script src="./path/to/quikchat.umd.min.js"></script>
-<link rel="stylesheet" href="quikchat.css">
+<link rel="stylesheet" href="./path/to/quikchat.css">
 ```
 
 Create a container element in your HTML where you want the chat interface to appear:
@@ -36,7 +37,64 @@ const chat = new quikchat('#chat-container', messageCallback);
 chat.addMessage('Hello!', 'User', 'left');  // user should appear left or right justified
 
 ```
+## Theming
+QuikChat also allows theming using CSS of all the messages, and user area, and overal widget.
 
+Below is the prebuilt 'light' theme.  To change the theme, make a new set of classes with different values but the same css selector naming (e.g. change "quikchat-theme-light" to "my-theme") and save as a style.  Then pass the "my-theme" to the constructor.
+
+Themes can be changed at anytime by calling
+myChatWidget.changeTheme(newTheme) where myChatWidget is the instance of your widget. 
+
+If several widgets are on the same page, each can have a separate theme.
+
+```css
+
+.quikchat-theme-light {
+    border: 1px solid #cccccc;
+    border-radius: 10px;
+    padding: 5px;
+    background-color: #f9f9f9;
+  }
+
+.quikchat-theme-light .quikchat-title-area {
+color: #333;
+}
+
+.quikchat-theme-light .quikchat-messages-area {
+background-color: #ffffffe2;
+color: #333;
+}
+
+.quikchat-theme-light .quikchat-message-1 {
+background-color: #fffffff0;
+color: #005662;
+}
+
+.quikchat-theme-light .quikchat-message-2 {
+background-color: #eeeeeee9;
+color: #353535;
+}
+
+.quikchat-theme-light .quikchat-input-area {
+background-color: #f0f0f0;
+}
+
+.quikchat-theme-light .quikchat-input-textbox {
+background-color: #ffffff;
+border: 1px solid #ccc;
+border-radius: 4px;
+font-size: 14px;
+color: #333;
+}
+
+.quikchat-theme-light .quikchat-input-send-btn {
+background-color: #4caf50;
+color: white;
+border: none;
+border-radius: 4px;
+}
+
+```
 
 ## Building from Source
 Make sure to run npm install.  Then run npm run build.
diff --git a/dist/quikchat.cjs.js b/dist/quikchat.cjs.js
index 5bc611a..b0ab1aa 100644
--- a/dist/quikchat.cjs.js
+++ b/dist/quikchat.cjs.js
@@ -193,11 +193,11 @@ var quikchat = /*#__PURE__*/function () {
       messageDiv.classList.add('quikchat-message');
       messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');
       var userDiv = document.createElement('div');
-      userDiv.textContent = user;
+      userDiv.innerHTML = user;
       userDiv.style = "width: 100%; text-align: ".concat(align, "; font-size: 1em; font-weight:700; color: #444;");
       var contentDiv = document.createElement('div');
       contentDiv.style = "width: 100%; text-align: ".concat(align, ";");
-      contentDiv.textContent = message;
+      contentDiv.innerHTML = message;
       messageDiv.appendChild(userDiv);
       messageDiv.appendChild(contentDiv);
       this.messagesArea.appendChild(messageDiv);
diff --git a/dist/quikchat.cjs.js.map b/dist/quikchat.cjs.js.map
index a1164f8..aed25c1 100644
--- a/dist/quikchat.cjs.js.map
+++ b/dist/quikchat.cjs.js.map
@@ -1 +1 @@
-{"version":3,"file":"quikchat.cjs.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.textContent = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.textContent = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","_createClass","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","titleAreaToggle","style","display","adjustMessagesAreaHeight","textContent","textAlign","titleAreaGet","inputAreaToggle","classList","toggle","inputAreaShow","inputAreaHide","hiddenElements","_toConsumableArray","children","filter","child","contains","totalHiddenHeight","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","fontSize","parseFloat","getComputedStyle","minWidth","addMessage","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","removeMesssage","n","removeChild","getMessage","appendMessage","updateMessage","changeTheme","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"quikchat.cjs.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.innerHTML = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.innerHTML = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","_createClass","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","titleAreaToggle","style","display","adjustMessagesAreaHeight","textContent","textAlign","titleAreaGet","inputAreaToggle","classList","toggle","inputAreaShow","inputAreaHide","hiddenElements","_toConsumableArray","children","filter","child","contains","totalHiddenHeight","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","fontSize","parseFloat","getComputedStyle","minWidth","addMessage","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","removeMesssage","n","removeChild","getMessage","appendMessage","updateMessage","changeTheme","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/quikchat.cjs.min.js b/dist/quikchat.cjs.min.js
index 4328d3a..40acdd5 100644
--- a/dist/quikchat.cjs.min.js
+++ b/dist/quikchat.cjs.min.js
@@ -1,2 +1,2 @@
-"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function t(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,n(a.key),a)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,i){if(t){if("string"==typeof t)return e(t,i);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,i):void 0}}(t)||function(){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 n(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var a=function(){return t((function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{theme:"quikchat-theme-light",onSend:function(){}};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.parentElement=t,this.theme=i.theme,this.onSend=i.onSend?i.onSend:function(){},this.createWidget(),i.titleArea&&(this.titleAreaSet(i.titleArea.title,i.titleArea.align),i.titleArea.show?this.titleAreaShow():this.titleAreaHide()),this.attachEventListeners()}),[{key:"createWidget",value:function(){var e='\n            <div class="quikchat-base '.concat(this.theme,'">\n                <div class="quikchat-title-area">\n                    <span style="font-size: 1.5em; font-weight: 600;">Title Area</span>\n                </div>\n                <div class="quikchat-messages-area"></div>\n                <div class="quikchat-input-area">\n                    <textarea class="quikchat-input-textbox"></textarea>\n                    <button class="quikchat-input-send-btn">Send</button>\n                </div>\n            </div>\n            ');this.parentElement.innerHTML=e,this.chatWidget=this.parentElement.querySelector(".quikchat-base"),this.titleArea=this.chatWidget.querySelector(".quikchat-title-area"),this.messagesArea=this.chatWidget.querySelector(".quikchat-messages-area"),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")}},{key:"attachEventListeners",value:function(){var e=this;this.sendButton.addEventListener("click",(function(){return e.onSend(e,e.textEntry.value.trim())})),window.addEventListener("resize",(function(){return e.handleContainerResize()})),this.chatWidget.addEventListener("resize",(function(){return e.handleContainerResize()})),this.textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e.onSend(e,e.textEntry.value.trim()))}))}},{key:"titleAreaToggle",value:function(){"none"===this.titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this.titleArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"titleAreaHide",value:function(){this.titleArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"titleAreaSet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this.titleArea.textContent=e,this.titleArea.style.textAlign=t}},{key:"titleAreaGet",value:function(){return this.titleArea.textContent}},{key:"inputAreaToggle",value:function(){this.inputArea.classList.toggle("hidden"),"none"===this.inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this.inputArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this.inputArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"adjustMessagesAreaHeight",value:function(){var e=i(this.chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this.chatWidget.offsetHeight;this.messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"handleContainerResize",value:function(){this.adjustMessagesAreaHeight(),this.adjustSendButtonWidth(),console.log("Container resized")}},{key:"adjustSendButtonWidth",value:function(){var e=this.sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this.sendButton).fontSize)*e.length+16;this.sendButton.style.minWidth="".concat(t,"px")}},{key:"addMessage",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"foo",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"left",n=document.createElement("div");n.classList.add("quikchat-message"),n.classList.add(this.messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var a=document.createElement("div");a.textContent=t,a.style="width: 100%; text-align: ".concat(i,"; font-size: 1em; font-weight:700; color: #444;");var s=document.createElement("div");s.style="width: 100%; text-align: ".concat(i,";"),s.textContent=e,n.appendChild(a),n.appendChild(s),this.messagesArea.appendChild(n),this.messagesArea.lastChild.scrollIntoView(),this.textEntry.value="",this.adjustMessagesAreaHeight()}},{key:"removeMesssage",value:function(e){this.messagesArea.removeChild(this.messagesArea.children[e])}},{key:"getMessage",value:function(e){return this.messagesArea.children[e].lastChild.textContent}},{key:"appendMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent+=t}},{key:"updateMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent=t}},{key:"changeTheme",value:function(e){this.chatWidget.classList.remove(this.theme),this.chatWidget.classList.add(e),this.theme=e}}])}();module.exports=a;
+"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function t(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,n(a.key),a)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,i){if(t){if("string"==typeof t)return e(t,i);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,i):void 0}}(t)||function(){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 n(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var a=function(){return t((function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{theme:"quikchat-theme-light",onSend:function(){}};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.parentElement=t,this.theme=i.theme,this.onSend=i.onSend?i.onSend:function(){},this.createWidget(),i.titleArea&&(this.titleAreaSet(i.titleArea.title,i.titleArea.align),i.titleArea.show?this.titleAreaShow():this.titleAreaHide()),this.attachEventListeners()}),[{key:"createWidget",value:function(){var e='\n            <div class="quikchat-base '.concat(this.theme,'">\n                <div class="quikchat-title-area">\n                    <span style="font-size: 1.5em; font-weight: 600;">Title Area</span>\n                </div>\n                <div class="quikchat-messages-area"></div>\n                <div class="quikchat-input-area">\n                    <textarea class="quikchat-input-textbox"></textarea>\n                    <button class="quikchat-input-send-btn">Send</button>\n                </div>\n            </div>\n            ');this.parentElement.innerHTML=e,this.chatWidget=this.parentElement.querySelector(".quikchat-base"),this.titleArea=this.chatWidget.querySelector(".quikchat-title-area"),this.messagesArea=this.chatWidget.querySelector(".quikchat-messages-area"),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")}},{key:"attachEventListeners",value:function(){var e=this;this.sendButton.addEventListener("click",(function(){return e.onSend(e,e.textEntry.value.trim())})),window.addEventListener("resize",(function(){return e.handleContainerResize()})),this.chatWidget.addEventListener("resize",(function(){return e.handleContainerResize()})),this.textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e.onSend(e,e.textEntry.value.trim()))}))}},{key:"titleAreaToggle",value:function(){"none"===this.titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this.titleArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"titleAreaHide",value:function(){this.titleArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"titleAreaSet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this.titleArea.textContent=e,this.titleArea.style.textAlign=t}},{key:"titleAreaGet",value:function(){return this.titleArea.textContent}},{key:"inputAreaToggle",value:function(){this.inputArea.classList.toggle("hidden"),"none"===this.inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this.inputArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this.inputArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"adjustMessagesAreaHeight",value:function(){var e=i(this.chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this.chatWidget.offsetHeight;this.messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"handleContainerResize",value:function(){this.adjustMessagesAreaHeight(),this.adjustSendButtonWidth(),console.log("Container resized")}},{key:"adjustSendButtonWidth",value:function(){var e=this.sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this.sendButton).fontSize)*e.length+16;this.sendButton.style.minWidth="".concat(t,"px")}},{key:"addMessage",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"foo",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"left",n=document.createElement("div");n.classList.add("quikchat-message"),n.classList.add(this.messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var a=document.createElement("div");a.innerHTML=t,a.style="width: 100%; text-align: ".concat(i,"; font-size: 1em; font-weight:700; color: #444;");var s=document.createElement("div");s.style="width: 100%; text-align: ".concat(i,";"),s.innerHTML=e,n.appendChild(a),n.appendChild(s),this.messagesArea.appendChild(n),this.messagesArea.lastChild.scrollIntoView(),this.textEntry.value="",this.adjustMessagesAreaHeight()}},{key:"removeMesssage",value:function(e){this.messagesArea.removeChild(this.messagesArea.children[e])}},{key:"getMessage",value:function(e){return this.messagesArea.children[e].lastChild.textContent}},{key:"appendMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent+=t}},{key:"updateMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent=t}},{key:"changeTheme",value:function(e){this.chatWidget.classList.remove(this.theme),this.chatWidget.classList.add(e),this.theme=e}}])}();module.exports=a;
 //# sourceMappingURL=quikchat.cjs.min.js.map
diff --git a/dist/quikchat.cjs.min.js.map b/dist/quikchat.cjs.min.js.map
index 832e439..d1cfdc8 100644
--- a/dist/quikchat.cjs.min.js.map
+++ b/dist/quikchat.cjs.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"quikchat.cjs.min.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.textContent = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.textContent = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","_createClass","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","this","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","style","display","adjustMessagesAreaHeight","textContent","textAlign","classList","toggle","inputAreaShow","inputAreaHide","totalHiddenHeight","_toConsumableArray","children","filter","child","contains","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","minWidth","parseFloat","getComputedStyle","fontSize","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","n","removeChild","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"quikchat.cjs.min.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.innerHTML = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.innerHTML = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","_createClass","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","this","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","style","display","adjustMessagesAreaHeight","textContent","textAlign","classList","toggle","inputAreaShow","inputAreaHide","totalHiddenHeight","_toConsumableArray","children","filter","child","contains","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","minWidth","parseFloat","getComputedStyle","fontSize","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","n","removeChild","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/quikchat.css b/dist/quikchat.css
index 8df0711..b10be44 100644
--- a/dist/quikchat.css
+++ b/dist/quikchat.css
@@ -9,11 +9,10 @@
 }
 
 .quikchat-title-area {
-    width: 100%;
-    padding-left: 2px;
-    padding-right:2px;
     margin-left: 8px;
-    margin-right: 28px;
+    margin-right: 8px;
+    padding-left : 2px;
+    padding-right : 2px;
     font-weight: 600;
     font-size: 1.3em;
 }
@@ -67,6 +66,7 @@
     color: #333;
     font-size: 1.1em;
     font-weight: 700;
+    margin-right: 10px;
 }
 
 .quikchat-theme-debug .quikchat-messages-area {
diff --git a/dist/quikchat.esm.js b/dist/quikchat.esm.js
index ee449d4..5e57bd0 100644
--- a/dist/quikchat.esm.js
+++ b/dist/quikchat.esm.js
@@ -191,11 +191,11 @@ var quikchat = /*#__PURE__*/function () {
       messageDiv.classList.add('quikchat-message');
       messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');
       var userDiv = document.createElement('div');
-      userDiv.textContent = user;
+      userDiv.innerHTML = user;
       userDiv.style = "width: 100%; text-align: ".concat(align, "; font-size: 1em; font-weight:700; color: #444;");
       var contentDiv = document.createElement('div');
       contentDiv.style = "width: 100%; text-align: ".concat(align, ";");
-      contentDiv.textContent = message;
+      contentDiv.innerHTML = message;
       messageDiv.appendChild(userDiv);
       messageDiv.appendChild(contentDiv);
       this.messagesArea.appendChild(messageDiv);
diff --git a/dist/quikchat.esm.js.map b/dist/quikchat.esm.js.map
index 16a2b9b..ab624d0 100644
--- a/dist/quikchat.esm.js.map
+++ b/dist/quikchat.esm.js.map
@@ -1 +1 @@
-{"version":3,"file":"quikchat.esm.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.textContent = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.textContent = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","_createClass","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","titleAreaToggle","style","display","adjustMessagesAreaHeight","textContent","textAlign","titleAreaGet","inputAreaToggle","classList","toggle","inputAreaShow","inputAreaHide","hiddenElements","_toConsumableArray","children","filter","child","contains","totalHiddenHeight","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","fontSize","parseFloat","getComputedStyle","minWidth","addMessage","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","removeMesssage","n","removeChild","getMessage","appendMessage","updateMessage","changeTheme","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"quikchat.esm.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.innerHTML = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.innerHTML = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","_createClass","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","titleAreaToggle","style","display","adjustMessagesAreaHeight","textContent","textAlign","titleAreaGet","inputAreaToggle","classList","toggle","inputAreaShow","inputAreaHide","hiddenElements","_toConsumableArray","children","filter","child","contains","totalHiddenHeight","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","fontSize","parseFloat","getComputedStyle","minWidth","addMessage","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","removeMesssage","n","removeChild","getMessage","appendMessage","updateMessage","changeTheme","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/quikchat.esm.min.js b/dist/quikchat.esm.min.js
index be6fd2d..f806bf6 100644
--- a/dist/quikchat.esm.min.js
+++ b/dist/quikchat.esm.min.js
@@ -1,2 +1,2 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function t(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,n(a.key),a)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,i){if(t){if("string"==typeof t)return e(t,i);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,i):void 0}}(t)||function(){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 n(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var a=function(){return t((function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{theme:"quikchat-theme-light",onSend:function(){}};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.parentElement=t,this.theme=i.theme,this.onSend=i.onSend?i.onSend:function(){},this.createWidget(),i.titleArea&&(this.titleAreaSet(i.titleArea.title,i.titleArea.align),i.titleArea.show?this.titleAreaShow():this.titleAreaHide()),this.attachEventListeners()}),[{key:"createWidget",value:function(){var e='\n            <div class="quikchat-base '.concat(this.theme,'">\n                <div class="quikchat-title-area">\n                    <span style="font-size: 1.5em; font-weight: 600;">Title Area</span>\n                </div>\n                <div class="quikchat-messages-area"></div>\n                <div class="quikchat-input-area">\n                    <textarea class="quikchat-input-textbox"></textarea>\n                    <button class="quikchat-input-send-btn">Send</button>\n                </div>\n            </div>\n            ');this.parentElement.innerHTML=e,this.chatWidget=this.parentElement.querySelector(".quikchat-base"),this.titleArea=this.chatWidget.querySelector(".quikchat-title-area"),this.messagesArea=this.chatWidget.querySelector(".quikchat-messages-area"),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")}},{key:"attachEventListeners",value:function(){var e=this;this.sendButton.addEventListener("click",(function(){return e.onSend(e,e.textEntry.value.trim())})),window.addEventListener("resize",(function(){return e.handleContainerResize()})),this.chatWidget.addEventListener("resize",(function(){return e.handleContainerResize()})),this.textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e.onSend(e,e.textEntry.value.trim()))}))}},{key:"titleAreaToggle",value:function(){"none"===this.titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this.titleArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"titleAreaHide",value:function(){this.titleArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"titleAreaSet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this.titleArea.textContent=e,this.titleArea.style.textAlign=t}},{key:"titleAreaGet",value:function(){return this.titleArea.textContent}},{key:"inputAreaToggle",value:function(){this.inputArea.classList.toggle("hidden"),"none"===this.inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this.inputArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this.inputArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"adjustMessagesAreaHeight",value:function(){var e=i(this.chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this.chatWidget.offsetHeight;this.messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"handleContainerResize",value:function(){this.adjustMessagesAreaHeight(),this.adjustSendButtonWidth(),console.log("Container resized")}},{key:"adjustSendButtonWidth",value:function(){var e=this.sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this.sendButton).fontSize)*e.length+16;this.sendButton.style.minWidth="".concat(t,"px")}},{key:"addMessage",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"foo",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"left",n=document.createElement("div");n.classList.add("quikchat-message"),n.classList.add(this.messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var a=document.createElement("div");a.textContent=t,a.style="width: 100%; text-align: ".concat(i,"; font-size: 1em; font-weight:700; color: #444;");var s=document.createElement("div");s.style="width: 100%; text-align: ".concat(i,";"),s.textContent=e,n.appendChild(a),n.appendChild(s),this.messagesArea.appendChild(n),this.messagesArea.lastChild.scrollIntoView(),this.textEntry.value="",this.adjustMessagesAreaHeight()}},{key:"removeMesssage",value:function(e){this.messagesArea.removeChild(this.messagesArea.children[e])}},{key:"getMessage",value:function(e){return this.messagesArea.children[e].lastChild.textContent}},{key:"appendMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent+=t}},{key:"updateMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent=t}},{key:"changeTheme",value:function(e){this.chatWidget.classList.remove(this.theme),this.chatWidget.classList.add(e),this.theme=e}}])}();export{a as default};
+function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function t(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,n(a.key),a)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,i){if(t){if("string"==typeof t)return e(t,i);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,i):void 0}}(t)||function(){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 n(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var a=function(){return t((function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{theme:"quikchat-theme-light",onSend:function(){}};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.parentElement=t,this.theme=i.theme,this.onSend=i.onSend?i.onSend:function(){},this.createWidget(),i.titleArea&&(this.titleAreaSet(i.titleArea.title,i.titleArea.align),i.titleArea.show?this.titleAreaShow():this.titleAreaHide()),this.attachEventListeners()}),[{key:"createWidget",value:function(){var e='\n            <div class="quikchat-base '.concat(this.theme,'">\n                <div class="quikchat-title-area">\n                    <span style="font-size: 1.5em; font-weight: 600;">Title Area</span>\n                </div>\n                <div class="quikchat-messages-area"></div>\n                <div class="quikchat-input-area">\n                    <textarea class="quikchat-input-textbox"></textarea>\n                    <button class="quikchat-input-send-btn">Send</button>\n                </div>\n            </div>\n            ');this.parentElement.innerHTML=e,this.chatWidget=this.parentElement.querySelector(".quikchat-base"),this.titleArea=this.chatWidget.querySelector(".quikchat-title-area"),this.messagesArea=this.chatWidget.querySelector(".quikchat-messages-area"),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")}},{key:"attachEventListeners",value:function(){var e=this;this.sendButton.addEventListener("click",(function(){return e.onSend(e,e.textEntry.value.trim())})),window.addEventListener("resize",(function(){return e.handleContainerResize()})),this.chatWidget.addEventListener("resize",(function(){return e.handleContainerResize()})),this.textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e.onSend(e,e.textEntry.value.trim()))}))}},{key:"titleAreaToggle",value:function(){"none"===this.titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this.titleArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"titleAreaHide",value:function(){this.titleArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"titleAreaSet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this.titleArea.textContent=e,this.titleArea.style.textAlign=t}},{key:"titleAreaGet",value:function(){return this.titleArea.textContent}},{key:"inputAreaToggle",value:function(){this.inputArea.classList.toggle("hidden"),"none"===this.inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this.inputArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this.inputArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"adjustMessagesAreaHeight",value:function(){var e=i(this.chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this.chatWidget.offsetHeight;this.messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"handleContainerResize",value:function(){this.adjustMessagesAreaHeight(),this.adjustSendButtonWidth(),console.log("Container resized")}},{key:"adjustSendButtonWidth",value:function(){var e=this.sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this.sendButton).fontSize)*e.length+16;this.sendButton.style.minWidth="".concat(t,"px")}},{key:"addMessage",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"foo",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"left",n=document.createElement("div");n.classList.add("quikchat-message"),n.classList.add(this.messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var a=document.createElement("div");a.innerHTML=t,a.style="width: 100%; text-align: ".concat(i,"; font-size: 1em; font-weight:700; color: #444;");var s=document.createElement("div");s.style="width: 100%; text-align: ".concat(i,";"),s.innerHTML=e,n.appendChild(a),n.appendChild(s),this.messagesArea.appendChild(n),this.messagesArea.lastChild.scrollIntoView(),this.textEntry.value="",this.adjustMessagesAreaHeight()}},{key:"removeMesssage",value:function(e){this.messagesArea.removeChild(this.messagesArea.children[e])}},{key:"getMessage",value:function(e){return this.messagesArea.children[e].lastChild.textContent}},{key:"appendMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent+=t}},{key:"updateMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent=t}},{key:"changeTheme",value:function(e){this.chatWidget.classList.remove(this.theme),this.chatWidget.classList.add(e),this.theme=e}}])}();export{a as default};
 //# sourceMappingURL=quikchat.esm.min.js.map
diff --git a/dist/quikchat.esm.min.js.map b/dist/quikchat.esm.min.js.map
index 83678bb..26c7f02 100644
--- a/dist/quikchat.esm.min.js.map
+++ b/dist/quikchat.esm.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"quikchat.esm.min.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.textContent = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.textContent = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","_createClass","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","this","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","style","display","adjustMessagesAreaHeight","textContent","textAlign","classList","toggle","inputAreaShow","inputAreaHide","totalHiddenHeight","_toConsumableArray","children","filter","child","contains","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","minWidth","parseFloat","getComputedStyle","fontSize","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","n","removeChild","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"quikchat.esm.min.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.innerHTML = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.innerHTML = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","_createClass","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","this","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","style","display","adjustMessagesAreaHeight","textContent","textAlign","classList","toggle","inputAreaShow","inputAreaHide","totalHiddenHeight","_toConsumableArray","children","filter","child","contains","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","minWidth","parseFloat","getComputedStyle","fontSize","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","n","removeChild","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/quikchat.umd.js b/dist/quikchat.umd.js
index ce4e42f..6e222bb 100644
--- a/dist/quikchat.umd.js
+++ b/dist/quikchat.umd.js
@@ -197,11 +197,11 @@
         messageDiv.classList.add('quikchat-message');
         messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');
         var userDiv = document.createElement('div');
-        userDiv.textContent = user;
+        userDiv.innerHTML = user;
         userDiv.style = "width: 100%; text-align: ".concat(align, "; font-size: 1em; font-weight:700; color: #444;");
         var contentDiv = document.createElement('div');
         contentDiv.style = "width: 100%; text-align: ".concat(align, ";");
-        contentDiv.textContent = message;
+        contentDiv.innerHTML = message;
         messageDiv.appendChild(userDiv);
         messageDiv.appendChild(contentDiv);
         this.messagesArea.appendChild(messageDiv);
diff --git a/dist/quikchat.umd.js.map b/dist/quikchat.umd.js.map
index 9eb4c9b..57e9d1b 100644
--- a/dist/quikchat.umd.js.map
+++ b/dist/quikchat.umd.js.map
@@ -1 +1 @@
-{"version":3,"file":"quikchat.umd.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.textContent = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.textContent = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","_createClass","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","titleAreaToggle","style","display","adjustMessagesAreaHeight","textContent","textAlign","titleAreaGet","inputAreaToggle","classList","toggle","inputAreaShow","inputAreaHide","hiddenElements","_toConsumableArray","children","filter","child","contains","totalHiddenHeight","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","fontSize","parseFloat","getComputedStyle","minWidth","addMessage","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","removeMesssage","n","removeChild","getMessage","appendMessage","updateMessage","changeTheme","newTheme","remove"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAA;AAAA,MAEMA,QAAQ,gBAAA,YAAA;IACV,SAAAA,QAAAA,CAAYC,aAAa,EAA+D;MAAA,IAA7DC,IAAI,GAAAC,SAAA,CAAAC,MAAA,GAAAD,CAAAA,IAAAA,SAAA,CAAAE,CAAAA,CAAAA,KAAAA,SAAA,GAAAF,SAAA,CAAG,CAAA,CAAA,GAAA;EAAEG,MAAAA,KAAK,EAAE,sBAAsB;EAAEC,MAAAA,MAAM,EAAE,SAAAA,MAAA,GAAM,EAAE;OAAG,CAAA;EAAAC,IAAAA,eAAA,OAAAR,QAAA,CAAA,CAAA;MAClF,IAAI,CAACC,aAAa,GAAGA,aAAa,CAAA;EAClC,IAAA,IAAI,CAACK,KAAK,GAAGJ,IAAI,CAACI,KAAK,CAAA;EACvB,IAAA,IAAI,CAACC,MAAM,GAAGL,IAAI,CAACK,MAAM,GAAGL,IAAI,CAACK,MAAM,GAAG,YAAM,EAAG,CAAA;MACnD,IAAI,CAACE,YAAY,EAAE,CAAA;EACnB;MACA,IAAIP,IAAI,CAACQ,SAAS,EAAE;EAChB,MAAA,IAAI,CAACC,YAAY,CAACT,IAAI,CAACQ,SAAS,CAACE,KAAK,EAAEV,IAAI,CAACQ,SAAS,CAACG,KAAK,CAAC,CAAA;EAC7D,MAAA,IAAIX,IAAI,CAACQ,SAAS,CAACI,IAAI,EAAE;UACrB,IAAI,CAACC,aAAa,EAAE,CAAA;EACxB,OAAC,MAAM;UACH,IAAI,CAACC,aAAa,EAAE,CAAA;EACxB,OAAA;EACJ,KAAA;MACA,IAAI,CAACC,oBAAoB,EAAE,CAAA;EAC/B,GAAA;IAAC,OAAAC,YAAA,CAAAlB,QAAA,EAAA,CAAA;MAAAmB,GAAA,EAAA,cAAA;MAAAC,KAAA,EAED,SAAAX,YAAAA,GAAe;EACX,MAAA,IAAMY,UAAU,GAAAC,2CAAAA,CAAAA,MAAA,CAEgB,IAAI,CAAChB,KAAK,EAUrC,mfAAA,CAAA,CAAA;EAEL,MAAA,IAAI,CAACL,aAAa,CAACsB,SAAS,GAAGF,UAAU,CAAA;QACzC,IAAI,CAACG,UAAU,GAAG,IAAI,CAACvB,aAAa,CAACwB,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACpE,IAAI,CAACf,SAAS,GAAG,IAAI,CAACc,UAAU,CAACC,aAAa,CAAC,sBAAsB,CAAC,CAAA;QACtE,IAAI,CAACC,YAAY,GAAG,IAAI,CAACF,UAAU,CAACC,aAAa,CAAC,yBAAyB,CAAC,CAAA;QAC5E,IAAI,CAACE,SAAS,GAAG,IAAI,CAACH,UAAU,CAACC,aAAa,CAAC,sBAAsB,CAAC,CAAA;QACtE,IAAI,CAACG,SAAS,GAAG,IAAI,CAACD,SAAS,CAACF,aAAa,CAAC,yBAAyB,CAAC,CAAA;QACxE,IAAI,CAACI,UAAU,GAAG,IAAI,CAACF,SAAS,CAACF,aAAa,CAAC,0BAA0B,CAAC,CAAA;EAC9E,KAAA;EAAC,GAAA,EAAA;MAAAN,GAAA,EAAA,sBAAA;MAAAC,KAAA,EAED,SAAAH,oBAAAA,GAAuB;EAAA,MAAA,IAAAa,KAAA,GAAA,IAAA,CAAA;EACnB,MAAA,IAAI,CAACD,UAAU,CAACE,gBAAgB,CAAC,OAAO,EAAE,YAAA;EAAA,QAAA,OAAMD,KAAI,CAACvB,MAAM,CAACuB,KAAI,EAAEA,KAAI,CAACF,SAAS,CAACR,KAAK,CAACY,IAAI,EAAE,CAAC,CAAA;SAAC,CAAA,CAAA;EAC/FC,MAAAA,MAAM,CAACF,gBAAgB,CAAC,QAAQ,EAAE,YAAA;EAAA,QAAA,OAAMD,KAAI,CAACI,qBAAqB,EAAE,CAAA;SAAC,CAAA,CAAA;EACrE,MAAA,IAAI,CAACV,UAAU,CAACO,gBAAgB,CAAC,QAAQ,EAAE,YAAA;EAAA,QAAA,OAAMD,KAAI,CAACI,qBAAqB,EAAE,CAAA;SAAC,CAAA,CAAA;QAC9E,IAAI,CAACN,SAAS,CAACG,gBAAgB,CAAC,SAAS,EAAE,UAACI,KAAK,EAAK;EAClD;UACA,IAAIA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;EACxC;YACAF,KAAK,CAACG,cAAc,EAAE,CAAA;EACtBR,UAAAA,KAAI,CAACvB,MAAM,CAACuB,KAAI,EAAEA,KAAI,CAACF,SAAS,CAACR,KAAK,CAACY,IAAI,EAAE,CAAC,CAAA;EAClD,SAAA;EACJ,OAAC,CAAC,CAAA;EACN,KAAA;EAAC,GAAA,EAAA;MAAAb,GAAA,EAAA,iBAAA;MAAAC,KAAA,EAED,SAAAmB,eAAAA,GAAkB;EACd,MAAA,IAAI,CAAC7B,SAAS,CAAC8B,KAAK,CAACC,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC1B,aAAa,EAAE,GAAG,IAAI,CAACC,aAAa,EAAE,CAAA;EACzF,KAAA;EAAC,GAAA,EAAA;MAAAG,GAAA,EAAA,eAAA;MAAAC,KAAA,EAED,SAAAL,aAAAA,GAAgB;EACZ,MAAA,IAAI,CAACL,SAAS,CAAC8B,KAAK,CAACC,OAAO,GAAG,EAAE,CAAA;QACjC,IAAI,CAACC,wBAAwB,EAAE,CAAA;EACnC,KAAA;EAAC,GAAA,EAAA;MAAAvB,GAAA,EAAA,eAAA;MAAAC,KAAA,EAED,SAAAJ,aAAAA,GAAgB;EACZ,MAAA,IAAI,CAACN,SAAS,CAAC8B,KAAK,CAACC,OAAO,GAAG,MAAM,CAAA;QACrC,IAAI,CAACC,wBAAwB,EAAE,CAAA;EACnC,KAAA;EAAC,GAAA,EAAA;MAAAvB,GAAA,EAAA,cAAA;EAAAC,IAAAA,KAAA,EAED,SAAAT,YAAaC,CAAAA,KAAK,EAAoB;EAAA,MAAA,IAAlBC,KAAK,GAAAV,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,QAAQ,CAAA;EAChC,MAAA,IAAI,CAACO,SAAS,CAACiC,WAAW,GAAG/B,KAAK,CAAA;EAClC,MAAA,IAAI,CAACF,SAAS,CAAC8B,KAAK,CAACI,SAAS,GAAG/B,KAAK,CAAA;EAC1C,KAAA;EAAC,GAAA,EAAA;MAAAM,GAAA,EAAA,cAAA;MAAAC,KAAA,EAED,SAAAyB,YAAAA,GAAe;EACX,MAAA,OAAO,IAAI,CAACnC,SAAS,CAACiC,WAAW,CAAA;EACrC,KAAA;EAAC,GAAA,EAAA;MAAAxB,GAAA,EAAA,iBAAA;MAAAC,KAAA,EAED,SAAA0B,eAAAA,GAAkB;QACd,IAAI,CAACnB,SAAS,CAACoB,SAAS,CAACC,MAAM,CAAC,QAAQ,CAAC,CAAA;EACzC,MAAA,IAAI,CAACrB,SAAS,CAACa,KAAK,CAACC,OAAO,KAAK,MAAM,GAAG,IAAI,CAACQ,aAAa,EAAE,GAAG,IAAI,CAACC,aAAa,EAAE,CAAA;EACzF,KAAA;EAAC,GAAA,EAAA;MAAA/B,GAAA,EAAA,eAAA;MAAAC,KAAA,EAED,SAAA6B,aAAAA,GAAgB;EACZ,MAAA,IAAI,CAACtB,SAAS,CAACa,KAAK,CAACC,OAAO,GAAG,EAAE,CAAA;QACjC,IAAI,CAACC,wBAAwB,EAAE,CAAA;EACnC,KAAA;EAAC,GAAA,EAAA;MAAAvB,GAAA,EAAA,eAAA;MAAAC,KAAA,EAED,SAAA8B,aAAAA,GAAgB;EACZ,MAAA,IAAI,CAACvB,SAAS,CAACa,KAAK,CAACC,OAAO,GAAG,MAAM,CAAA;QACrC,IAAI,CAACC,wBAAwB,EAAE,CAAA;EACnC,KAAA;EAAC,GAAA,EAAA;MAAAvB,GAAA,EAAA,0BAAA;MAAAC,KAAA,EAED,SAAAsB,wBAAAA,GAA2B;EACvB,MAAA,IAAMS,cAAc,GAAGC,kBAAA,CAAI,IAAI,CAAC5B,UAAU,CAAC6B,QAAQ,CAAA,CAAEC,MAAM,CAAC,UAAAC,KAAK,EAAA;EAAA,QAAA,OAAIA,KAAK,CAACR,SAAS,CAACS,QAAQ,CAAC,QAAQ,CAAC,CAAA;SAAC,CAAA,CAAA;QACxG,IAAMC,iBAAiB,GAAGN,cAAc,CAACO,MAAM,CAAC,UAACC,GAAG,EAAEJ,KAAK,EAAA;EAAA,QAAA,OAAKI,GAAG,GAAGJ,KAAK,CAACK,YAAY,CAAA;EAAA,OAAA,EAAE,CAAC,CAAC,CAAA;EAC5F,MAAA,IAAMC,eAAe,GAAG,IAAI,CAACrC,UAAU,CAACoC,YAAY,CAAA;EACpD,MAAA,IAAI,CAAClC,YAAY,CAACc,KAAK,CAACsB,MAAM,GAAAxC,cAAAA,CAAAA,MAAA,CAAkBuC,eAAe,GAAGJ,iBAAiB,EAAK,KAAA,CAAA,CAAA;EAC5F,KAAA;EAAC,GAAA,EAAA;MAAAtC,GAAA,EAAA,uBAAA;MAAAC,KAAA,EAED,SAAAc,qBAAAA,GAAwB;QACpB,IAAI,CAACQ,wBAAwB,EAAE,CAAA;QAC/B,IAAI,CAACqB,qBAAqB,EAAE,CAAA;EAC5BC,MAAAA,OAAO,CAACC,GAAG,CAAC,mBAAmB,CAAC,CAAA;EACpC,KAAA;EAAC,GAAA,EAAA;MAAA9C,GAAA,EAAA,uBAAA;MAAAC,KAAA,EAED,SAAA2C,qBAAAA,GAAwB;QACpB,IAAMG,cAAc,GAAG,IAAI,CAACrC,UAAU,CAACc,WAAW,CAACX,IAAI,EAAE,CAAA;EACzD,MAAA,IAAMmC,QAAQ,GAAGC,UAAU,CAACC,gBAAgB,CAAC,IAAI,CAACxC,UAAU,CAAC,CAACsC,QAAQ,CAAC,CAAA;QACvE,IAAMG,QAAQ,GAAGH,QAAQ,GAAGD,cAAc,CAAC9D,MAAM,GAAG,EAAE,CAAA;QACtD,IAAI,CAACyB,UAAU,CAACW,KAAK,CAAC8B,QAAQ,GAAAhD,EAAAA,CAAAA,MAAA,CAAMgD,QAAQ,EAAI,IAAA,CAAA,CAAA;EACpD,KAAA;EAAC,GAAA,EAAA;MAAAnD,GAAA,EAAA,YAAA;EAAAC,IAAAA,KAAA,EAED,SAAAmD,UAAWC,CAAAA,OAAO,EAAgC;EAAA,MAAA,IAA9BC,IAAI,GAAAtE,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK,CAAA;EAAA,MAAA,IAAEU,KAAK,GAAAV,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,MAAM,CAAA;EAC5C,MAAA,IAAMuE,UAAU,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,CAAA;EAChDF,MAAAA,UAAU,CAAC3B,SAAS,CAAC8B,GAAG,CAAC,kBAAkB,CAAC,CAAA;QAC5CH,UAAU,CAAC3B,SAAS,CAAC8B,GAAG,CAAC,IAAI,CAACnD,YAAY,CAAC2B,QAAQ,CAACjD,MAAM,GAAG,CAAC,KAAK,CAAC,GAAG,oBAAoB,GAAG,oBAAoB,CAAC,CAAA;EAEnH,MAAA,IAAM0E,OAAO,GAAGH,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC7CE,OAAO,CAACnC,WAAW,GAAG8B,IAAI,CAAA;EAC1BK,MAAAA,OAAO,CAACtC,KAAK,GAAA,2BAAA,CAAAlB,MAAA,CAA+BT,KAAK,EAAiD,iDAAA,CAAA,CAAA;EAElG,MAAA,IAAMkE,UAAU,GAAGJ,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,CAAA;EAChDG,MAAAA,UAAU,CAACvC,KAAK,GAAA,2BAAA,CAAAlB,MAAA,CAA+BT,KAAK,EAAG,GAAA,CAAA,CAAA;QACvDkE,UAAU,CAACpC,WAAW,GAAG6B,OAAO,CAAA;EAEhCE,MAAAA,UAAU,CAACM,WAAW,CAACF,OAAO,CAAC,CAAA;EAC/BJ,MAAAA,UAAU,CAACM,WAAW,CAACD,UAAU,CAAC,CAAA;EAClC,MAAA,IAAI,CAACrD,YAAY,CAACsD,WAAW,CAACN,UAAU,CAAC,CAAA;EACzC,MAAA,IAAI,CAAChD,YAAY,CAACuD,SAAS,CAACC,cAAc,EAAE,CAAA;EAE5C,MAAA,IAAI,CAACtD,SAAS,CAACR,KAAK,GAAG,EAAE,CAAA;QACzB,IAAI,CAACsB,wBAAwB,EAAE,CAAA;EACnC,KAAA;EAAC,GAAA,EAAA;MAAAvB,GAAA,EAAA,gBAAA;EAAAC,IAAAA,KAAA,EAED,SAAA+D,cAAeC,CAAAA,CAAC,EAAE;EACd,MAAA,IAAI,CAAC1D,YAAY,CAAC2D,WAAW,CAAC,IAAI,CAAC3D,YAAY,CAAC2B,QAAQ,CAAC+B,CAAC,CAAC,CAAC,CAAA;EAChE,KAAA;EAAC,GAAA,EAAA;MAAAjE,GAAA,EAAA,YAAA;EAAAC,IAAAA,KAAA,EAED,SAAAkE,UAAWF,CAAAA,CAAC,EAAE;QACV,OAAO,IAAI,CAAC1D,YAAY,CAAC2B,QAAQ,CAAC+B,CAAC,CAAC,CAACH,SAAS,CAACtC,WAAW,CAAA;EAC9D,KAAA;EAAC,GAAA,EAAA;MAAAxB,GAAA,EAAA,eAAA;EAAAC,IAAAA,KAAA,EAED,SAAAmE,aAAAA,CAAcH,CAAC,EAAEZ,OAAO,EAAE;EACtB,MAAA,IAAI,CAAC9C,YAAY,CAAC2B,QAAQ,CAAC+B,CAAC,CAAC,CAACH,SAAS,CAACtC,WAAW,IAAI6B,OAAO,CAAA;EAClE,KAAA;EAAC,GAAA,EAAA;MAAArD,GAAA,EAAA,eAAA;EAAAC,IAAAA,KAAA,EAED,SAAAoE,aAAAA,CAAcJ,CAAC,EAAEZ,OAAO,EAAE;EACtB,MAAA,IAAI,CAAC9C,YAAY,CAAC2B,QAAQ,CAAC+B,CAAC,CAAC,CAACH,SAAS,CAACtC,WAAW,GAAG6B,OAAO,CAAA;EACjE,KAAA;EAAC,GAAA,EAAA;MAAArD,GAAA,EAAA,aAAA;EAAAC,IAAAA,KAAA,EAED,SAAAqE,WAAYC,CAAAA,QAAQ,EAAE;QAClB,IAAI,CAAClE,UAAU,CAACuB,SAAS,CAAC4C,MAAM,CAAC,IAAI,CAACrF,KAAK,CAAC,CAAA;QAC5C,IAAI,CAACkB,UAAU,CAACuB,SAAS,CAAC8B,GAAG,CAACa,QAAQ,CAAC,CAAA;QACvC,IAAI,CAACpF,KAAK,GAAGoF,QAAQ,CAAA;EACzB,KAAA;EAAC,GAAA,CAAA,CAAA,CAAA;EAAA,CAAA;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"quikchat.umd.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.innerHTML = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.innerHTML = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","_createClass","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","titleAreaToggle","style","display","adjustMessagesAreaHeight","textContent","textAlign","titleAreaGet","inputAreaToggle","classList","toggle","inputAreaShow","inputAreaHide","hiddenElements","_toConsumableArray","children","filter","child","contains","totalHiddenHeight","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","fontSize","parseFloat","getComputedStyle","minWidth","addMessage","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","removeMesssage","n","removeChild","getMessage","appendMessage","updateMessage","changeTheme","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/quikchat.umd.min.js b/dist/quikchat.umd.min.js
index 09c0a1a..ca03058 100644
--- a/dist/quikchat.umd.min.js
+++ b/dist/quikchat.umd.min.js
@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).quikchat=t()}(this,(function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function t(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,n(a.key),a)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,i){if(t){if("string"==typeof t)return e(t,i);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,i):void 0}}(t)||function(){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 n(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var a=function(){return t((function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{theme:"quikchat-theme-light",onSend:function(){}};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.parentElement=t,this.theme=i.theme,this.onSend=i.onSend?i.onSend:function(){},this.createWidget(),i.titleArea&&(this.titleAreaSet(i.titleArea.title,i.titleArea.align),i.titleArea.show?this.titleAreaShow():this.titleAreaHide()),this.attachEventListeners()}),[{key:"createWidget",value:function(){var e='\n            <div class="quikchat-base '.concat(this.theme,'">\n                <div class="quikchat-title-area">\n                    <span style="font-size: 1.5em; font-weight: 600;">Title Area</span>\n                </div>\n                <div class="quikchat-messages-area"></div>\n                <div class="quikchat-input-area">\n                    <textarea class="quikchat-input-textbox"></textarea>\n                    <button class="quikchat-input-send-btn">Send</button>\n                </div>\n            </div>\n            ');this.parentElement.innerHTML=e,this.chatWidget=this.parentElement.querySelector(".quikchat-base"),this.titleArea=this.chatWidget.querySelector(".quikchat-title-area"),this.messagesArea=this.chatWidget.querySelector(".quikchat-messages-area"),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")}},{key:"attachEventListeners",value:function(){var e=this;this.sendButton.addEventListener("click",(function(){return e.onSend(e,e.textEntry.value.trim())})),window.addEventListener("resize",(function(){return e.handleContainerResize()})),this.chatWidget.addEventListener("resize",(function(){return e.handleContainerResize()})),this.textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e.onSend(e,e.textEntry.value.trim()))}))}},{key:"titleAreaToggle",value:function(){"none"===this.titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this.titleArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"titleAreaHide",value:function(){this.titleArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"titleAreaSet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this.titleArea.textContent=e,this.titleArea.style.textAlign=t}},{key:"titleAreaGet",value:function(){return this.titleArea.textContent}},{key:"inputAreaToggle",value:function(){this.inputArea.classList.toggle("hidden"),"none"===this.inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this.inputArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this.inputArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"adjustMessagesAreaHeight",value:function(){var e=i(this.chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this.chatWidget.offsetHeight;this.messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"handleContainerResize",value:function(){this.adjustMessagesAreaHeight(),this.adjustSendButtonWidth(),console.log("Container resized")}},{key:"adjustSendButtonWidth",value:function(){var e=this.sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this.sendButton).fontSize)*e.length+16;this.sendButton.style.minWidth="".concat(t,"px")}},{key:"addMessage",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"foo",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"left",n=document.createElement("div");n.classList.add("quikchat-message"),n.classList.add(this.messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var a=document.createElement("div");a.textContent=t,a.style="width: 100%; text-align: ".concat(i,"; font-size: 1em; font-weight:700; color: #444;");var s=document.createElement("div");s.style="width: 100%; text-align: ".concat(i,";"),s.textContent=e,n.appendChild(a),n.appendChild(s),this.messagesArea.appendChild(n),this.messagesArea.lastChild.scrollIntoView(),this.textEntry.value="",this.adjustMessagesAreaHeight()}},{key:"removeMesssage",value:function(e){this.messagesArea.removeChild(this.messagesArea.children[e])}},{key:"getMessage",value:function(e){return this.messagesArea.children[e].lastChild.textContent}},{key:"appendMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent+=t}},{key:"updateMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent=t}},{key:"changeTheme",value:function(e){this.chatWidget.classList.remove(this.theme),this.chatWidget.classList.add(e),this.theme=e}}])}();return a}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).quikchat=t()}(this,(function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function t(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,n(a.key),a)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function i(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,i){if(t){if("string"==typeof t)return e(t,i);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,i):void 0}}(t)||function(){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 n(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var a=function(){return t((function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{theme:"quikchat-theme-light",onSend:function(){}};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.parentElement=t,this.theme=i.theme,this.onSend=i.onSend?i.onSend:function(){},this.createWidget(),i.titleArea&&(this.titleAreaSet(i.titleArea.title,i.titleArea.align),i.titleArea.show?this.titleAreaShow():this.titleAreaHide()),this.attachEventListeners()}),[{key:"createWidget",value:function(){var e='\n            <div class="quikchat-base '.concat(this.theme,'">\n                <div class="quikchat-title-area">\n                    <span style="font-size: 1.5em; font-weight: 600;">Title Area</span>\n                </div>\n                <div class="quikchat-messages-area"></div>\n                <div class="quikchat-input-area">\n                    <textarea class="quikchat-input-textbox"></textarea>\n                    <button class="quikchat-input-send-btn">Send</button>\n                </div>\n            </div>\n            ');this.parentElement.innerHTML=e,this.chatWidget=this.parentElement.querySelector(".quikchat-base"),this.titleArea=this.chatWidget.querySelector(".quikchat-title-area"),this.messagesArea=this.chatWidget.querySelector(".quikchat-messages-area"),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")}},{key:"attachEventListeners",value:function(){var e=this;this.sendButton.addEventListener("click",(function(){return e.onSend(e,e.textEntry.value.trim())})),window.addEventListener("resize",(function(){return e.handleContainerResize()})),this.chatWidget.addEventListener("resize",(function(){return e.handleContainerResize()})),this.textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e.onSend(e,e.textEntry.value.trim()))}))}},{key:"titleAreaToggle",value:function(){"none"===this.titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this.titleArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"titleAreaHide",value:function(){this.titleArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"titleAreaSet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this.titleArea.textContent=e,this.titleArea.style.textAlign=t}},{key:"titleAreaGet",value:function(){return this.titleArea.textContent}},{key:"inputAreaToggle",value:function(){this.inputArea.classList.toggle("hidden"),"none"===this.inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this.inputArea.style.display="",this.adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this.inputArea.style.display="none",this.adjustMessagesAreaHeight()}},{key:"adjustMessagesAreaHeight",value:function(){var e=i(this.chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this.chatWidget.offsetHeight;this.messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"handleContainerResize",value:function(){this.adjustMessagesAreaHeight(),this.adjustSendButtonWidth(),console.log("Container resized")}},{key:"adjustSendButtonWidth",value:function(){var e=this.sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this.sendButton).fontSize)*e.length+16;this.sendButton.style.minWidth="".concat(t,"px")}},{key:"addMessage",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"foo",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"left",n=document.createElement("div");n.classList.add("quikchat-message"),n.classList.add(this.messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var a=document.createElement("div");a.innerHTML=t,a.style="width: 100%; text-align: ".concat(i,"; font-size: 1em; font-weight:700; color: #444;");var s=document.createElement("div");s.style="width: 100%; text-align: ".concat(i,";"),s.innerHTML=e,n.appendChild(a),n.appendChild(s),this.messagesArea.appendChild(n),this.messagesArea.lastChild.scrollIntoView(),this.textEntry.value="",this.adjustMessagesAreaHeight()}},{key:"removeMesssage",value:function(e){this.messagesArea.removeChild(this.messagesArea.children[e])}},{key:"getMessage",value:function(e){return this.messagesArea.children[e].lastChild.textContent}},{key:"appendMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent+=t}},{key:"updateMessage",value:function(e,t){this.messagesArea.children[e].lastChild.textContent=t}},{key:"changeTheme",value:function(e){this.chatWidget.classList.remove(this.theme),this.chatWidget.classList.add(e),this.theme=e}}])}();return a}));
 //# sourceMappingURL=quikchat.umd.min.js.map
diff --git a/dist/quikchat.umd.min.js.map b/dist/quikchat.umd.min.js.map
index a646030..05b5466 100644
--- a/dist/quikchat.umd.min.js.map
+++ b/dist/quikchat.umd.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"quikchat.umd.min.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.textContent = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.textContent = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","_createClass","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","this","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","style","display","adjustMessagesAreaHeight","textContent","textAlign","classList","toggle","inputAreaShow","inputAreaHide","totalHiddenHeight","_toConsumableArray","children","filter","child","contains","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","minWidth","parseFloat","getComputedStyle","fontSize","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","n","removeChild","newTheme","remove"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"quikchat.umd.min.js","sources":["../src/quikchat.js"],"sourcesContent":["// quikchat.js\n\nclass quikchat {\n    constructor(parentElement, meta = { theme: 'quikchat-theme-light', onSend: () => { } }) {\n        this.parentElement = parentElement;\n        this.theme = meta.theme;\n        this.onSend = meta.onSend ? meta.onSend : () => { };\n        this.createWidget();\n        // title area\n        if (meta.titleArea) {\n            this.titleAreaSet(meta.titleArea.title, meta.titleArea.align);\n            if (meta.titleArea.show) {\n                this.titleAreaShow();\n            } else {\n                this.titleAreaHide();\n            }\n        }\n        this.attachEventListeners();\n    }\n\n    createWidget() {\n        const widgetHTML =\n            `\n            <div class=\"quikchat-base ${this.theme}\">\n                <div class=\"quikchat-title-area\">\n                    <span style=\"font-size: 1.5em; font-weight: 600;\">Title Area</span>\n                </div>\n                <div class=\"quikchat-messages-area\"></div>\n                <div class=\"quikchat-input-area\">\n                    <textarea class=\"quikchat-input-textbox\"></textarea>\n                    <button class=\"quikchat-input-send-btn\">Send</button>\n                </div>\n            </div>\n            `;\n\n        this.parentElement.innerHTML = widgetHTML;\n        this.chatWidget = this.parentElement.querySelector('.quikchat-base');\n        this.titleArea = this.chatWidget.querySelector('.quikchat-title-area');\n        this.messagesArea = this.chatWidget.querySelector('.quikchat-messages-area');\n        this.inputArea = this.chatWidget.querySelector('.quikchat-input-area');\n        this.textEntry = this.inputArea.querySelector('.quikchat-input-textbox');\n        this.sendButton = this.inputArea.querySelector('.quikchat-input-send-btn');\n    }\n\n    attachEventListeners() {\n        this.sendButton.addEventListener('click', () => this.onSend(this, this.textEntry.value.trim()));\n        window.addEventListener('resize', () => this.handleContainerResize());\n        this.chatWidget.addEventListener('resize', () => this.handleContainerResize());\n        this.textEntry.addEventListener('keydown', (event) => {\n            // Check if Shift + Enter is pressed\n            if (event.shiftKey && event.keyCode === 13) {\n                // Prevent default behavior (adding new line)\n                event.preventDefault();\n                this.onSend(this, this.textEntry.value.trim())\n            }\n        });\n    }\n\n    titleAreaToggle() {\n        this.titleArea.style.display === 'none' ? this.titleAreaShow() : this.titleAreaHide();\n    }\n\n    titleAreaShow() {\n        this.titleArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaHide() {\n        this.titleArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    titleAreaSet(title, align = 'center') {\n        this.titleArea.textContent = title;\n        this.titleArea.style.textAlign = align;\n    }\n\n    titleAreaGet() {\n        return this.titleArea.textContent;\n    }\n\n    inputAreaToggle() {\n        this.inputArea.classList.toggle('hidden');\n        this.inputArea.style.display === 'none' ? this.inputAreaShow() : this.inputAreaHide();\n    }\n\n    inputAreaShow() {\n        this.inputArea.style.display = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    inputAreaHide() {\n        this.inputArea.style.display = 'none';\n        this.adjustMessagesAreaHeight();\n    }\n\n    adjustMessagesAreaHeight() {\n        const hiddenElements = [...this.chatWidget.children].filter(child => child.classList.contains('hidden'));\n        const totalHiddenHeight = hiddenElements.reduce((sum, child) => sum + child.offsetHeight, 0);\n        const containerHeight = this.chatWidget.offsetHeight;\n        this.messagesArea.style.height = `calc(100% - ${containerHeight - totalHiddenHeight}px)`;\n    }\n\n    handleContainerResize() {\n        this.adjustMessagesAreaHeight();\n        this.adjustSendButtonWidth();\n        console.log('Container resized');\n    }\n\n    adjustSendButtonWidth() {\n        const sendButtonText = this.sendButton.textContent.trim();\n        const fontSize = parseFloat(getComputedStyle(this.sendButton).fontSize);\n        const minWidth = fontSize * sendButtonText.length + 16;\n        this.sendButton.style.minWidth = `${minWidth}px`;\n    }\n\n    addMessage(message, user = \"foo\", align = 'left') {\n        const messageDiv = document.createElement('div');\n        messageDiv.classList.add('quikchat-message');\n        messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');\n\n        const userDiv = document.createElement('div');\n        userDiv.innerHTML = user;\n        userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;\n\n        const contentDiv = document.createElement('div');\n        contentDiv.style = `width: 100%; text-align: ${align};`;\n        contentDiv.innerHTML = message;\n\n        messageDiv.appendChild(userDiv);\n        messageDiv.appendChild(contentDiv);\n        this.messagesArea.appendChild(messageDiv);\n        this.messagesArea.lastChild.scrollIntoView();\n\n        this.textEntry.value = '';\n        this.adjustMessagesAreaHeight();\n    }\n\n    removeMesssage(n) {\n        this.messagesArea.removeChild(this.messagesArea.children[n]);\n    }\n\n    getMessage(n) {\n        return this.messagesArea.children[n].lastChild.textContent;\n    }\n\n    appendMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent += message;\n    }\n\n    updateMessage(n, message) {\n        this.messagesArea.children[n].lastChild.textContent = message;\n    }\n\n    changeTheme(newTheme) {\n        this.chatWidget.classList.remove(this.theme);\n        this.chatWidget.classList.add(newTheme);\n        this.theme = newTheme;\n    }\n}\n\nexport default quikchat;\n"],"names":["quikchat","_createClass","parentElement","meta","arguments","length","undefined","theme","onSend","_classCallCheck","this","createWidget","titleArea","titleAreaSet","title","align","show","titleAreaShow","titleAreaHide","attachEventListeners","key","value","widgetHTML","concat","innerHTML","chatWidget","querySelector","messagesArea","inputArea","textEntry","sendButton","_this","addEventListener","trim","window","handleContainerResize","event","shiftKey","keyCode","preventDefault","style","display","adjustMessagesAreaHeight","textContent","textAlign","classList","toggle","inputAreaShow","inputAreaHide","totalHiddenHeight","_toConsumableArray","children","filter","child","contains","reduce","sum","offsetHeight","containerHeight","height","adjustSendButtonWidth","console","log","sendButtonText","minWidth","parseFloat","getComputedStyle","fontSize","message","user","messageDiv","document","createElement","add","userDiv","contentDiv","appendChild","lastChild","scrollIntoView","n","removeChild","newTheme","remove"],"mappings":"k/CAEMA,IAAAA,EAAQ,WAgBT,OAAAC,GAfD,SAAAD,EAAYE,GAA4E,IAA7DC,EAAIC,UAAAC,OAAAD,QAAAE,IAAAF,UAAAE,GAAAF,UAAG,GAAA,CAAEG,MAAO,uBAAwBC,OAAQ,WAAQ,gGAAGC,MAAAT,GAClFU,KAAKR,cAAgBA,EACrBQ,KAAKH,MAAQJ,EAAKI,MAClBG,KAAKF,OAASL,EAAKK,OAASL,EAAKK,OAAS,aAC1CE,KAAKC,eAEDR,EAAKS,YACLF,KAAKG,aAAaV,EAAKS,UAAUE,MAAOX,EAAKS,UAAUG,OACnDZ,EAAKS,UAAUI,KACfN,KAAKO,gBAELP,KAAKQ,iBAGbR,KAAKS,sBACT,GAAC,CAAA,CAAAC,IAAA,eAAAC,MAED,WACI,IAAMC,EAAUC,2CAAAA,OAEgBb,KAAKH,MAUhC,weAELG,KAAKR,cAAcsB,UAAYF,EAC/BZ,KAAKe,WAAaf,KAAKR,cAAcwB,cAAc,kBACnDhB,KAAKE,UAAYF,KAAKe,WAAWC,cAAc,wBAC/ChB,KAAKiB,aAAejB,KAAKe,WAAWC,cAAc,2BAClDhB,KAAKkB,UAAYlB,KAAKe,WAAWC,cAAc,wBAC/ChB,KAAKmB,UAAYnB,KAAKkB,UAAUF,cAAc,2BAC9ChB,KAAKoB,WAAapB,KAAKkB,UAAUF,cAAc,2BACnD,GAAC,CAAAN,IAAA,uBAAAC,MAED,WAAuB,IAAAU,EAAArB,KACnBA,KAAKoB,WAAWE,iBAAiB,SAAS,WAAA,OAAMD,EAAKvB,OAAOuB,EAAMA,EAAKF,UAAUR,MAAMY,WACvFC,OAAOF,iBAAiB,UAAU,WAAA,OAAMD,EAAKI,2BAC7CzB,KAAKe,WAAWO,iBAAiB,UAAU,WAAA,OAAMD,EAAKI,2BACtDzB,KAAKmB,UAAUG,iBAAiB,WAAW,SAACI,GAEpCA,EAAMC,UAA8B,KAAlBD,EAAME,UAExBF,EAAMG,iBACNR,EAAKvB,OAAOuB,EAAMA,EAAKF,UAAUR,MAAMY,QAE/C,GACJ,GAAC,CAAAb,IAAA,kBAAAC,MAED,WACqC,SAAjCX,KAAKE,UAAU4B,MAAMC,QAAqB/B,KAAKO,gBAAkBP,KAAKQ,eAC1E,GAAC,CAAAE,IAAA,gBAAAC,MAED,WACIX,KAAKE,UAAU4B,MAAMC,QAAU,GAC/B/B,KAAKgC,0BACT,GAAC,CAAAtB,IAAA,gBAAAC,MAED,WACIX,KAAKE,UAAU4B,MAAMC,QAAU,OAC/B/B,KAAKgC,0BACT,GAAC,CAAAtB,IAAA,eAAAC,MAED,SAAaP,GAAyB,IAAlBC,EAAKX,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,SACxBM,KAAKE,UAAU+B,YAAc7B,EAC7BJ,KAAKE,UAAU4B,MAAMI,UAAY7B,CACrC,GAAC,CAAAK,IAAA,eAAAC,MAED,WACI,OAAOX,KAAKE,UAAU+B,WAC1B,GAAC,CAAAvB,IAAA,kBAAAC,MAED,WACIX,KAAKkB,UAAUiB,UAAUC,OAAO,UACC,SAAjCpC,KAAKkB,UAAUY,MAAMC,QAAqB/B,KAAKqC,gBAAkBrC,KAAKsC,eAC1E,GAAC,CAAA5B,IAAA,gBAAAC,MAED,WACIX,KAAKkB,UAAUY,MAAMC,QAAU,GAC/B/B,KAAKgC,0BACT,GAAC,CAAAtB,IAAA,gBAAAC,MAED,WACIX,KAAKkB,UAAUY,MAAMC,QAAU,OAC/B/B,KAAKgC,0BACT,GAAC,CAAAtB,IAAA,2BAAAC,MAED,WACI,IACM4B,EADiBC,EAAIxC,KAAKe,WAAW0B,UAAUC,QAAO,SAAAC,GAAK,OAAIA,EAAMR,UAAUS,SAAS,aACrDC,QAAO,SAACC,EAAKH,GAAK,OAAKG,EAAMH,EAAMI,YAAY,GAAE,GACpFC,EAAkBhD,KAAKe,WAAWgC,aACxC/C,KAAKiB,aAAaa,MAAMmB,OAAMpC,eAAAA,OAAkBmC,EAAkBT,EAAsB,MAC5F,GAAC,CAAA7B,IAAA,wBAAAC,MAED,WACIX,KAAKgC,2BACLhC,KAAKkD,wBACLC,QAAQC,IAAI,oBAChB,GAAC,CAAA1C,IAAA,wBAAAC,MAED,WACI,IAAM0C,EAAiBrD,KAAKoB,WAAWa,YAAYV,OAE7C+B,EADWC,WAAWC,iBAAiBxD,KAAKoB,YAAYqC,UAClCJ,EAAe1D,OAAS,GACpDK,KAAKoB,WAAWU,MAAMwB,SAAQzC,GAAAA,OAAMyC,EAAY,KACpD,GAAC,CAAA5C,IAAA,aAAAC,MAED,SAAW+C,GAAuC,IAA9BC,EAAIjE,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,MAAOW,EAAKX,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,OAChCkE,EAAaC,SAASC,cAAc,OAC1CF,EAAWzB,UAAU4B,IAAI,oBACzBH,EAAWzB,UAAU4B,IAAI/D,KAAKiB,aAAawB,SAAS9C,OAAS,GAAM,EAAI,qBAAuB,sBAE9F,IAAMqE,EAAUH,SAASC,cAAc,OACvCE,EAAQlD,UAAY6C,EACpBK,EAAQlC,MAAK,4BAAAjB,OAA+BR,EAAsD,mDAElG,IAAM4D,EAAaJ,SAASC,cAAc,OAC1CG,EAAWnC,MAAK,4BAAAjB,OAA+BR,EAAQ,KACvD4D,EAAWnD,UAAY4C,EAEvBE,EAAWM,YAAYF,GACvBJ,EAAWM,YAAYD,GACvBjE,KAAKiB,aAAaiD,YAAYN,GAC9B5D,KAAKiB,aAAakD,UAAUC,iBAE5BpE,KAAKmB,UAAUR,MAAQ,GACvBX,KAAKgC,0BACT,GAAC,CAAAtB,IAAA,iBAAAC,MAED,SAAe0D,GACXrE,KAAKiB,aAAaqD,YAAYtE,KAAKiB,aAAawB,SAAS4B,GAC7D,GAAC,CAAA3D,IAAA,aAAAC,MAED,SAAW0D,GACP,OAAOrE,KAAKiB,aAAawB,SAAS4B,GAAGF,UAAUlC,WACnD,GAAC,CAAAvB,IAAA,gBAAAC,MAED,SAAc0D,EAAGX,GACb1D,KAAKiB,aAAawB,SAAS4B,GAAGF,UAAUlC,aAAeyB,CAC3D,GAAC,CAAAhD,IAAA,gBAAAC,MAED,SAAc0D,EAAGX,GACb1D,KAAKiB,aAAawB,SAAS4B,GAAGF,UAAUlC,YAAcyB,CAC1D,GAAC,CAAAhD,IAAA,cAAAC,MAED,SAAY4D,GACRvE,KAAKe,WAAWoB,UAAUqC,OAAOxE,KAAKH,OACtCG,KAAKe,WAAWoB,UAAU4B,IAAIQ,GAC9BvE,KAAKH,MAAQ0E,CACjB,IAAC,CA5JS"}
\ No newline at end of file
diff --git a/example.html b/example.html
index 2519838..5c589d3 100644
--- a/example.html
+++ b/example.html
@@ -59,14 +59,18 @@ <h2>Component Styles and Resize Checks</h2>
                 theme: 'quikchat-theme-light',
                 titleArea: { title: 'QuikChatJS', align: 'left', show: true },
                 onSend: (chat, msg) => {
+
                     chat.addMessage(msg, 'me', 'right'); // echo the message to the chat area
+
                     // do something with the message
-                    
+                    chat.addMessage(bw.loremIpsum(bw.random(0,50),bw.random(33,100)), 'bot', 'left');
                 }
             });
             chatBox.addMessage('Hello, how are you?', 'bot', 'left');
             chatBox.addMessage('I am fine, thank you.', 'user', 'right');
             chatBox.addMessage('How can I help you today?', 'bot', 'left');
+            chatBox.changeTheme("quikchat-theme-debug");
+
         });
     </script>
 </body>
diff --git a/src/quikchat.js b/src/quikchat.js
index a7fb37e..bf4d19d 100644
--- a/src/quikchat.js
+++ b/src/quikchat.js
@@ -120,12 +120,12 @@ class quikchat {
         messageDiv.classList.add(this.messagesArea.children.length % 2 === 1 ? 'quikchat-message-1' : 'quikchat-message-2');
 
         const userDiv = document.createElement('div');
-        userDiv.textContent = user;
+        userDiv.innerHTML = user;
         userDiv.style = `width: 100%; text-align: ${align}; font-size: 1em; font-weight:700; color: #444;`;
 
         const contentDiv = document.createElement('div');
         contentDiv.style = `width: 100%; text-align: ${align};`;
-        contentDiv.textContent = message;
+        contentDiv.innerHTML = message;
 
         messageDiv.appendChild(userDiv);
         messageDiv.appendChild(contentDiv);