diff --git a/README.md b/README.md
index ce92335..b5b3ef7 100755
--- a/README.md
+++ b/README.md
@@ -16,6 +16,9 @@ Demo page is coming soon.
 
 ```bash
 yarn add vue-bot-ui
+
+// or
+npm install vue-bot-ui
 ```
 
 ## Usage
@@ -76,14 +79,14 @@ Many things...
 Usage
 ```vue
 <template slot="header>
-...
+  ...
 </template>
 ```
 
-- *header* -- Board header, that contains Bot name. You can add icon or customize by this slot
-- *actions* -- The slot beside Send button in the board footer. You can add some actions here (emoji, attach,...)
-- *sendButton* -- The slot to customize Send button in the board footer.
-- *bubbleButton* -- Customize the Bubble button
+- **header** -- Board header, that contains Bot name. You can add icon or customize by this slot
+- **actions** -- The slot beside Send button in the board footer. You can add some actions here (emoji, attach,...)
+- **sendButton** -- The slot to customize Send button in the board footer.
+- **bubbleButton** -- Customize the Bubble button
 
 The more details for slots is coming soon.
 
@@ -108,8 +111,8 @@ yarn build-bundle
 ```
 
 ---
-The icons and images from [FlatIcon](https://www.flaticon.com/)
-Placeholder image from [Placehold.it](http://placehold.it)
+- The icons and images from [FlatIcon](https://www.flaticon.com/)
+- Placeholder image from [Placehold.it](http://placehold.it)
 
 
 **Thank you!** :tada:
diff --git a/dist/demo.html b/dist/demo.html
index b85c7d7..921e560 100644
--- a/dist/demo.html
+++ b/dist/demo.html
@@ -2,8 +2,6 @@
 <title>vue-bot-ui demo</title>
 <script src="./vue-bot-ui.umd.js"></script>
 
-<link rel="stylesheet" href="./vue-bot-ui.css">
-
 
 <script>
 console.log(vue-bot-ui)
diff --git a/dist/vue-bot-ui.common.js b/dist/vue-bot-ui.common.js
index 3dad9a6..f36d16a 100644
--- a/dist/vue-bot-ui.common.js
+++ b/dist/vue-bot-ui.common.js
@@ -87,10 +87,363 @@ module.exports =
 /************************************************************************/
 /******/ ({
 
-/***/ "767f":
+/***/ "24fb":
 /***/ (function(module, exports, __webpack_require__) {
 
-// extracted by mini-css-extract-plugin
+"use strict";
+
+
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+// eslint-disable-next-line func-names
+module.exports = function (useSourceMap) {
+  var list = []; // return the list of modules as css string
+
+  list.toString = function toString() {
+    return this.map(function (item) {
+      var content = cssWithMappingToString(item, useSourceMap);
+
+      if (item[2]) {
+        return "@media ".concat(item[2], " {").concat(content, "}");
+      }
+
+      return content;
+    }).join('');
+  }; // import a list of modules into the list
+  // eslint-disable-next-line func-names
+
+
+  list.i = function (modules, mediaQuery) {
+    if (typeof modules === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      modules = [[null, modules, '']];
+    }
+
+    for (var i = 0; i < modules.length; i++) {
+      var item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
+          item[2] = mediaQuery;
+        } else {
+          item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
+        }
+      }
+
+      list.push(item);
+    }
+  };
+
+  return list;
+};
+
+function cssWithMappingToString(item, useSourceMap) {
+  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
+
+  var cssMapping = item[3];
+
+  if (!cssMapping) {
+    return content;
+  }
+
+  if (useSourceMap && typeof btoa === 'function') {
+    var sourceMapping = toComment(cssMapping);
+    var sourceURLs = cssMapping.sources.map(function (source) {
+      return "/*# sourceURL=".concat(cssMapping.sourceRoot).concat(source, " */");
+    });
+    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+  }
+
+  return [content].join('\n');
+} // Adapted from convert-source-map (MIT)
+
+
+function toComment(sourceMap) {
+  // eslint-disable-next-line no-undef
+  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+  var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
+  return "/*# ".concat(data, " */");
+}
+
+/***/ }),
+
+/***/ "499e":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+
+// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
+/**
+ * Translates the list format produced by css-loader into something
+ * easier to manipulate.
+ */
+function listToStyles (parentId, list) {
+  var styles = []
+  var newStyles = {}
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i]
+    var id = item[0]
+    var css = item[1]
+    var media = item[2]
+    var sourceMap = item[3]
+    var part = {
+      id: parentId + ':' + i,
+      css: css,
+      media: media,
+      sourceMap: sourceMap
+    }
+    if (!newStyles[id]) {
+      styles.push(newStyles[id] = { id: id, parts: [part] })
+    } else {
+      newStyles[id].parts.push(part)
+    }
+  }
+  return styles
+}
+
+// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return addStylesClient; });
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+  Modified by Evan You @yyx990803
+*/
+
+
+
+var hasDocument = typeof document !== 'undefined'
+
+if (typeof DEBUG !== 'undefined' && DEBUG) {
+  if (!hasDocument) {
+    throw new Error(
+    'vue-style-loader cannot be used in a non-browser environment. ' +
+    "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
+  ) }
+}
+
+/*
+type StyleObject = {
+  id: number;
+  parts: Array<StyleObjectPart>
+}
+
+type StyleObjectPart = {
+  css: string;
+  media: string;
+  sourceMap: ?string
+}
+*/
+
+var stylesInDom = {/*
+  [id: number]: {
+    id: number,
+    refs: number,
+    parts: Array<(obj?: StyleObjectPart) => void>
+  }
+*/}
+
+var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
+var singletonElement = null
+var singletonCounter = 0
+var isProduction = false
+var noop = function () {}
+var options = null
+var ssrIdKey = 'data-vue-ssr-id'
+
+// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+// tags it will allow on a page
+var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
+
+function addStylesClient (parentId, list, _isProduction, _options) {
+  isProduction = _isProduction
+
+  options = _options || {}
+
+  var styles = listToStyles(parentId, list)
+  addStylesToDom(styles)
+
+  return function update (newList) {
+    var mayRemove = []
+    for (var i = 0; i < styles.length; i++) {
+      var item = styles[i]
+      var domStyle = stylesInDom[item.id]
+      domStyle.refs--
+      mayRemove.push(domStyle)
+    }
+    if (newList) {
+      styles = listToStyles(parentId, newList)
+      addStylesToDom(styles)
+    } else {
+      styles = []
+    }
+    for (var i = 0; i < mayRemove.length; i++) {
+      var domStyle = mayRemove[i]
+      if (domStyle.refs === 0) {
+        for (var j = 0; j < domStyle.parts.length; j++) {
+          domStyle.parts[j]()
+        }
+        delete stylesInDom[domStyle.id]
+      }
+    }
+  }
+}
+
+function addStylesToDom (styles /* Array<StyleObject> */) {
+  for (var i = 0; i < styles.length; i++) {
+    var item = styles[i]
+    var domStyle = stylesInDom[item.id]
+    if (domStyle) {
+      domStyle.refs++
+      for (var j = 0; j < domStyle.parts.length; j++) {
+        domStyle.parts[j](item.parts[j])
+      }
+      for (; j < item.parts.length; j++) {
+        domStyle.parts.push(addStyle(item.parts[j]))
+      }
+      if (domStyle.parts.length > item.parts.length) {
+        domStyle.parts.length = item.parts.length
+      }
+    } else {
+      var parts = []
+      for (var j = 0; j < item.parts.length; j++) {
+        parts.push(addStyle(item.parts[j]))
+      }
+      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
+    }
+  }
+}
+
+function createStyleElement () {
+  var styleElement = document.createElement('style')
+  styleElement.type = 'text/css'
+  head.appendChild(styleElement)
+  return styleElement
+}
+
+function addStyle (obj /* StyleObjectPart */) {
+  var update, remove
+  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
+
+  if (styleElement) {
+    if (isProduction) {
+      // has SSR styles and in production mode.
+      // simply do nothing.
+      return noop
+    } else {
+      // has SSR styles but in dev mode.
+      // for some reason Chrome can't handle source map in server-rendered
+      // style tags - source maps in <style> only works if the style tag is
+      // created and inserted dynamically. So we remove the server rendered
+      // styles and inject new ones.
+      styleElement.parentNode.removeChild(styleElement)
+    }
+  }
+
+  if (isOldIE) {
+    // use singleton mode for IE9.
+    var styleIndex = singletonCounter++
+    styleElement = singletonElement || (singletonElement = createStyleElement())
+    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
+    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
+  } else {
+    // use multi-style-tag mode in all other cases
+    styleElement = createStyleElement()
+    update = applyToTag.bind(null, styleElement)
+    remove = function () {
+      styleElement.parentNode.removeChild(styleElement)
+    }
+  }
+
+  update(obj)
+
+  return function updateStyle (newObj /* StyleObjectPart */) {
+    if (newObj) {
+      if (newObj.css === obj.css &&
+          newObj.media === obj.media &&
+          newObj.sourceMap === obj.sourceMap) {
+        return
+      }
+      update(obj = newObj)
+    } else {
+      remove()
+    }
+  }
+}
+
+var replaceText = (function () {
+  var textStore = []
+
+  return function (index, replacement) {
+    textStore[index] = replacement
+    return textStore.filter(Boolean).join('\n')
+  }
+})()
+
+function applyToSingletonTag (styleElement, index, remove, obj) {
+  var css = remove ? '' : obj.css
+
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = replaceText(index, css)
+  } else {
+    var cssNode = document.createTextNode(css)
+    var childNodes = styleElement.childNodes
+    if (childNodes[index]) styleElement.removeChild(childNodes[index])
+    if (childNodes.length) {
+      styleElement.insertBefore(cssNode, childNodes[index])
+    } else {
+      styleElement.appendChild(cssNode)
+    }
+  }
+}
+
+function applyToTag (styleElement, obj) {
+  var css = obj.css
+  var media = obj.media
+  var sourceMap = obj.sourceMap
+
+  if (media) {
+    styleElement.setAttribute('media', media)
+  }
+  if (options.ssrId) {
+    styleElement.setAttribute(ssrIdKey, obj.id)
+  }
+
+  if (sourceMap) {
+    // https://developer.chrome.com/devtools/docs/javascript-debugging
+    // this makes source maps inside style tags work properly in Chrome
+    css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
+    // http://stackoverflow.com/a/26603875
+    css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
+  }
+
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = css
+  } else {
+    while (styleElement.firstChild) {
+      styleElement.removeChild(styleElement.firstChild)
+    }
+    styleElement.appendChild(document.createTextNode(css))
+  }
+}
+
+
+/***/ }),
+
+/***/ "59d2":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".qkb-bot-ui{position:fixed;z-index:1000;bottom:1.5rem;right:1.5rem;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;font-size:1rem}.qkb-bot-ui *{box-sizing:border-box}.qkb-preload-image{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}.qkb-bot-ui--animate .qkb-fadeUp-enter-active,.qkb-bot-ui--animate .qkb-fadeUp-leave-active{opacity:1;-webkit-transform:translate(0);transform:translate(0);-webkit-transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-fadeUp-enter,.qkb-bot-ui--animate .qkb-fadeUp-leave-to{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}.qkb-bot-ui--animate .qkb-scaleUp-enter-active,.qkb-bot-ui--animate .qkb-scaleUp-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-scaleUp-enter,.qkb-bot-ui--animate .qkb-scaleUp-leave-to{-webkit-transform:scale(0);transform:scale(0);opacity:0}.qkb-bot-bubble{align-self:flex-end}.qkb-bubble-btn{display:block;padding:0;outline:none;border:0;box-shadow:none;border-radius:50%;color:#fff;fill:#fff;cursor:pointer;box-shadow:0 3px 5px 0 rgba(0,0,0,.15);-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.qkb-bubble-btn:hover{opacity:.85}.qkb-bubble-btn-icon{display:block;position:absolute;top:50%;left:50%;width:27px;height:auto;margin:-11px 0 0 -13px;line-height:1em}.qkb-bubble-btn-icon.qkb-bubble-btn-icon--close{width:15px;margin:-7px 0 0 -7px}.qkb-board{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:absolute;right:0;overflow:hidden;width:376px;height:80vh;margin-bottom:10px;border-radius:8px;background-color:#fff;box-shadow:0 3px 30px 0 rgba(0,0,0,.15)}.qkb-board,.qkb-board-header{display:-webkit-box;display:flex}.qkb-board-header{-webkit-box-flex:0;flex:none;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;height:50px;padding:5px 15px}.qkb-board-header__title{font-weight:700;font-size:.875rem}.qkb-board-content{-webkit-box-flex:1;flex-grow:1;overflow:hidden scroll}.qkb-board-content__bubbles{min-height:100%;padding:1.5rem 1.25rem 1rem}.qkb-msg-bubble{display:-webkit-box;display:flex;position:relative}.qkb-msg-avatar{-webkit-box-flex:1;flex-grow:1;flex:none;position:relative;overflow:hidden;border-radius:50%}.qkb-msg-avatar__img{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;background-size:cover;background-repeat:no-repeat}.qkb-msg-bubble__time{display:none;position:absolute;right:0;top:0;padding:2px 5px;margin-top:-5px;border-radius:5px;font-size:.625rem;color:#fff;background-color:#222;-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0;-webkit-transition:opacity .1s linear 1s;transition:opacity .1s linear 1s}.qkb-msg-bubble--user .qkb-msg-bubble__time{display:block}.qkb-msg-bubble-component{font-size:.875rem}.qkb-msg-bubble-component:hover~.qkb-msg-bubble__time{opacity:.8}.qkb-msg-bubble{padding-bottom:1rem}.qkb-msg-bubble.qkb-msg-bubble--bot .qkb-msg-bubble-component{margin-right:2.5rem;margin-left:.5rem}.qkb-msg-bubble.qkb-msg-bubble--user{-webkit-box-pack:end;justify-content:flex-end}.qkb-msg-bubble.qkb-msg-bubble--user .qkb-msg-bubble-component{margin-left:5rem}.qkb-msg-bubble-component__text{position:relative;padding:.75rem 1rem;border-radius:6px}.qkb-msg-bubble-component__options-wrapper{display:-webkit-box;display:flex;flex-wrap:wrap}.qkb-mb-button-options__item{-webkit-box-flex:0;flex:0 0 auto}.qkb-mb-button-options__btn{display:block;overflow:hidden;position:relative;margin:.5rem .375rem 0 0;padding:.25rem 1rem;cursor:pointer;outline:0;border:1px solid transparent;border-radius:13px;color:inherit;font-size:.875rem;font-family:inherit;text-decoration:none;background-color:transparent;-webkit-transition:background-color .15s linear,color .1s linear;transition:background-color .15s linear,color .1s linear}.qkb-mb-button-options__btn span{position:relative;z-index:10}.qkb-board-action{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;height:46px;padding:.45rem 1.25rem .5rem;border-top:1px solid #e6e6e6}.qkb-board-action__wrapper{display:-webkit-box;display:flex;width:100%;background-color:#fff}.qkb-board-action__input{-webkit-box-flex:1;flex-grow:1;height:100%;padding:0 1rem 0 0;font-size:.875rem;border:0;background-color:transparent;box-shadow:none;outline:0}.qkb-board-action__box{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;-webkit-box-pack:center;justify-content:center}.qkb-action-item{display:block;padding:0;outline:0;border:0;box-shadow:none;background-color:transparent;cursor:pointer;opacity:.6;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.qkb-action-item:hover{opacity:1}.qkb-action-icon{width:16px;height:16px;line-height:1;fill:#666;color:#666;vertical-align:middle}.qkb-board-aciton--typing .qkb-action-item--send{opacity:1}", ""]);
+// Exports
+module.exports = exports;
+
 
 /***/ }),
 
@@ -101,14 +454,29 @@ module.exports = require("vue");
 
 /***/ }),
 
+/***/ "b4c3":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("59d2");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("7d102d35", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ "de67":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("767f");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b4c3");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
 /* unused harmony reexport * */
- /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default.a); 
+ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default.a); 
 
 /***/ }),
 
diff --git a/dist/vue-bot-ui.css b/dist/vue-bot-ui.css
deleted file mode 100644
index c5e407f..0000000
--- a/dist/vue-bot-ui.css
+++ /dev/null
@@ -1 +0,0 @@
-.qkb-bot-ui{position:fixed;z-index:1000;bottom:1.5rem;right:1.5rem;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;font-size:1rem}.qkb-bot-ui *{box-sizing:border-box}.qkb-preload-image{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}.qkb-bot-ui--animate .qkb-fadeUp-enter-active,.qkb-bot-ui--animate .qkb-fadeUp-leave-active{opacity:1;-webkit-transform:translate(0);transform:translate(0);-webkit-transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-fadeUp-enter,.qkb-bot-ui--animate .qkb-fadeUp-leave-to{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}.qkb-bot-ui--animate .qkb-scaleUp-enter-active,.qkb-bot-ui--animate .qkb-scaleUp-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-scaleUp-enter,.qkb-bot-ui--animate .qkb-scaleUp-leave-to{-webkit-transform:scale(0);transform:scale(0);opacity:0}.qkb-bot-bubble{align-self:flex-end}.qkb-bubble-btn{display:block;padding:0;outline:none;border:0;box-shadow:none;border-radius:50%;color:#fff;fill:#fff;cursor:pointer;box-shadow:0 3px 5px 0 rgba(0,0,0,.15);-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.qkb-bubble-btn:hover{opacity:.85}.qkb-bubble-btn-icon{display:block;position:absolute;top:50%;left:50%;width:27px;height:auto;margin:-11px 0 0 -13px;line-height:1em}.qkb-bubble-btn-icon.qkb-bubble-btn-icon--close{width:15px;margin:-7px 0 0 -7px}.qkb-board{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:absolute;right:0;overflow:hidden;width:376px;height:80vh;margin-bottom:10px;border-radius:8px;background-color:#fff;box-shadow:0 3px 30px 0 rgba(0,0,0,.15)}.qkb-board,.qkb-board-header{display:-webkit-box;display:flex}.qkb-board-header{-webkit-box-flex:0;flex:none;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;height:50px;padding:5px 15px}.qkb-board-header__title{font-weight:700;font-size:.875rem}.qkb-board-content{-webkit-box-flex:1;flex-grow:1;overflow:hidden scroll}.qkb-board-content__bubbles{min-height:100%;padding:1.5rem 1.25rem 1rem}.qkb-msg-bubble{display:-webkit-box;display:flex;position:relative}.qkb-msg-avatar{-webkit-box-flex:1;flex-grow:1;flex:none;position:relative;overflow:hidden;border-radius:50%}.qkb-msg-avatar__img{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;background-size:cover;background-repeat:no-repeat}.qkb-msg-bubble__time{display:none;position:absolute;right:0;top:0;padding:2px 5px;margin-top:-5px;border-radius:5px;font-size:.625rem;color:#fff;background-color:#222;-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0;-webkit-transition:opacity .1s linear 1s;transition:opacity .1s linear 1s}.qkb-msg-bubble--user .qkb-msg-bubble__time{display:block}.qkb-msg-bubble-component{font-size:.875rem}.qkb-msg-bubble-component:hover~.qkb-msg-bubble__time{opacity:.8}.qkb-msg-bubble{padding-bottom:1rem}.qkb-msg-bubble.qkb-msg-bubble--bot .qkb-msg-bubble-component{margin-right:2.5rem;margin-left:.5rem}.qkb-msg-bubble.qkb-msg-bubble--user{-webkit-box-pack:end;justify-content:flex-end}.qkb-msg-bubble.qkb-msg-bubble--user .qkb-msg-bubble-component{margin-left:5rem}.qkb-msg-bubble-component__text{position:relative;padding:.75rem 1rem;border-radius:6px}.qkb-msg-bubble-component__options-wrapper{display:-webkit-box;display:flex;flex-wrap:wrap}.qkb-mb-button-options__item{-webkit-box-flex:0;flex:0 0 auto}.qkb-mb-button-options__btn{display:block;overflow:hidden;position:relative;margin:.5rem .375rem 0 0;padding:.25rem 1rem;cursor:pointer;outline:0;border:1px solid transparent;border-radius:13px;color:inherit;font-size:.875rem;font-family:inherit;text-decoration:none;background-color:transparent;-webkit-transition:background-color .15s linear,color .1s linear;transition:background-color .15s linear,color .1s linear}.qkb-mb-button-options__btn span{position:relative;z-index:10}.qkb-board-action{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;height:46px;padding:.45rem 1.25rem .5rem;border-top:1px solid #e6e6e6}.qkb-board-action__wrapper{display:-webkit-box;display:flex;width:100%;background-color:#fff}.qkb-board-action__input{-webkit-box-flex:1;flex-grow:1;height:100%;padding:0 1rem 0 0;font-size:.875rem;border:0;background-color:transparent;box-shadow:none;outline:0}.qkb-board-action__box{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;-webkit-box-pack:center;justify-content:center}.qkb-action-item{display:block;padding:0;outline:0;border:0;box-shadow:none;background-color:transparent;cursor:pointer;opacity:.6;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.qkb-action-item:hover{opacity:1}.qkb-action-icon{width:16px;height:16px;line-height:1;fill:#666;color:#666;vertical-align:middle}.qkb-board-aciton--typing .qkb-action-item--send{opacity:1}
\ No newline at end of file
diff --git a/dist/vue-bot-ui.umd.js b/dist/vue-bot-ui.umd.js
index 939b258..bdbcf39 100644
--- a/dist/vue-bot-ui.umd.js
+++ b/dist/vue-bot-ui.umd.js
@@ -96,10 +96,363 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ({
 
-/***/ "767f":
+/***/ "24fb":
 /***/ (function(module, exports, __webpack_require__) {
 
-// extracted by mini-css-extract-plugin
+"use strict";
+
+
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+// eslint-disable-next-line func-names
+module.exports = function (useSourceMap) {
+  var list = []; // return the list of modules as css string
+
+  list.toString = function toString() {
+    return this.map(function (item) {
+      var content = cssWithMappingToString(item, useSourceMap);
+
+      if (item[2]) {
+        return "@media ".concat(item[2], " {").concat(content, "}");
+      }
+
+      return content;
+    }).join('');
+  }; // import a list of modules into the list
+  // eslint-disable-next-line func-names
+
+
+  list.i = function (modules, mediaQuery) {
+    if (typeof modules === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      modules = [[null, modules, '']];
+    }
+
+    for (var i = 0; i < modules.length; i++) {
+      var item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
+          item[2] = mediaQuery;
+        } else {
+          item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
+        }
+      }
+
+      list.push(item);
+    }
+  };
+
+  return list;
+};
+
+function cssWithMappingToString(item, useSourceMap) {
+  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
+
+  var cssMapping = item[3];
+
+  if (!cssMapping) {
+    return content;
+  }
+
+  if (useSourceMap && typeof btoa === 'function') {
+    var sourceMapping = toComment(cssMapping);
+    var sourceURLs = cssMapping.sources.map(function (source) {
+      return "/*# sourceURL=".concat(cssMapping.sourceRoot).concat(source, " */");
+    });
+    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+  }
+
+  return [content].join('\n');
+} // Adapted from convert-source-map (MIT)
+
+
+function toComment(sourceMap) {
+  // eslint-disable-next-line no-undef
+  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+  var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
+  return "/*# ".concat(data, " */");
+}
+
+/***/ }),
+
+/***/ "499e":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+
+// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
+/**
+ * Translates the list format produced by css-loader into something
+ * easier to manipulate.
+ */
+function listToStyles (parentId, list) {
+  var styles = []
+  var newStyles = {}
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i]
+    var id = item[0]
+    var css = item[1]
+    var media = item[2]
+    var sourceMap = item[3]
+    var part = {
+      id: parentId + ':' + i,
+      css: css,
+      media: media,
+      sourceMap: sourceMap
+    }
+    if (!newStyles[id]) {
+      styles.push(newStyles[id] = { id: id, parts: [part] })
+    } else {
+      newStyles[id].parts.push(part)
+    }
+  }
+  return styles
+}
+
+// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return addStylesClient; });
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+  Modified by Evan You @yyx990803
+*/
+
+
+
+var hasDocument = typeof document !== 'undefined'
+
+if (typeof DEBUG !== 'undefined' && DEBUG) {
+  if (!hasDocument) {
+    throw new Error(
+    'vue-style-loader cannot be used in a non-browser environment. ' +
+    "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
+  ) }
+}
+
+/*
+type StyleObject = {
+  id: number;
+  parts: Array<StyleObjectPart>
+}
+
+type StyleObjectPart = {
+  css: string;
+  media: string;
+  sourceMap: ?string
+}
+*/
+
+var stylesInDom = {/*
+  [id: number]: {
+    id: number,
+    refs: number,
+    parts: Array<(obj?: StyleObjectPart) => void>
+  }
+*/}
+
+var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
+var singletonElement = null
+var singletonCounter = 0
+var isProduction = false
+var noop = function () {}
+var options = null
+var ssrIdKey = 'data-vue-ssr-id'
+
+// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+// tags it will allow on a page
+var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
+
+function addStylesClient (parentId, list, _isProduction, _options) {
+  isProduction = _isProduction
+
+  options = _options || {}
+
+  var styles = listToStyles(parentId, list)
+  addStylesToDom(styles)
+
+  return function update (newList) {
+    var mayRemove = []
+    for (var i = 0; i < styles.length; i++) {
+      var item = styles[i]
+      var domStyle = stylesInDom[item.id]
+      domStyle.refs--
+      mayRemove.push(domStyle)
+    }
+    if (newList) {
+      styles = listToStyles(parentId, newList)
+      addStylesToDom(styles)
+    } else {
+      styles = []
+    }
+    for (var i = 0; i < mayRemove.length; i++) {
+      var domStyle = mayRemove[i]
+      if (domStyle.refs === 0) {
+        for (var j = 0; j < domStyle.parts.length; j++) {
+          domStyle.parts[j]()
+        }
+        delete stylesInDom[domStyle.id]
+      }
+    }
+  }
+}
+
+function addStylesToDom (styles /* Array<StyleObject> */) {
+  for (var i = 0; i < styles.length; i++) {
+    var item = styles[i]
+    var domStyle = stylesInDom[item.id]
+    if (domStyle) {
+      domStyle.refs++
+      for (var j = 0; j < domStyle.parts.length; j++) {
+        domStyle.parts[j](item.parts[j])
+      }
+      for (; j < item.parts.length; j++) {
+        domStyle.parts.push(addStyle(item.parts[j]))
+      }
+      if (domStyle.parts.length > item.parts.length) {
+        domStyle.parts.length = item.parts.length
+      }
+    } else {
+      var parts = []
+      for (var j = 0; j < item.parts.length; j++) {
+        parts.push(addStyle(item.parts[j]))
+      }
+      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
+    }
+  }
+}
+
+function createStyleElement () {
+  var styleElement = document.createElement('style')
+  styleElement.type = 'text/css'
+  head.appendChild(styleElement)
+  return styleElement
+}
+
+function addStyle (obj /* StyleObjectPart */) {
+  var update, remove
+  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
+
+  if (styleElement) {
+    if (isProduction) {
+      // has SSR styles and in production mode.
+      // simply do nothing.
+      return noop
+    } else {
+      // has SSR styles but in dev mode.
+      // for some reason Chrome can't handle source map in server-rendered
+      // style tags - source maps in <style> only works if the style tag is
+      // created and inserted dynamically. So we remove the server rendered
+      // styles and inject new ones.
+      styleElement.parentNode.removeChild(styleElement)
+    }
+  }
+
+  if (isOldIE) {
+    // use singleton mode for IE9.
+    var styleIndex = singletonCounter++
+    styleElement = singletonElement || (singletonElement = createStyleElement())
+    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
+    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
+  } else {
+    // use multi-style-tag mode in all other cases
+    styleElement = createStyleElement()
+    update = applyToTag.bind(null, styleElement)
+    remove = function () {
+      styleElement.parentNode.removeChild(styleElement)
+    }
+  }
+
+  update(obj)
+
+  return function updateStyle (newObj /* StyleObjectPart */) {
+    if (newObj) {
+      if (newObj.css === obj.css &&
+          newObj.media === obj.media &&
+          newObj.sourceMap === obj.sourceMap) {
+        return
+      }
+      update(obj = newObj)
+    } else {
+      remove()
+    }
+  }
+}
+
+var replaceText = (function () {
+  var textStore = []
+
+  return function (index, replacement) {
+    textStore[index] = replacement
+    return textStore.filter(Boolean).join('\n')
+  }
+})()
+
+function applyToSingletonTag (styleElement, index, remove, obj) {
+  var css = remove ? '' : obj.css
+
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = replaceText(index, css)
+  } else {
+    var cssNode = document.createTextNode(css)
+    var childNodes = styleElement.childNodes
+    if (childNodes[index]) styleElement.removeChild(childNodes[index])
+    if (childNodes.length) {
+      styleElement.insertBefore(cssNode, childNodes[index])
+    } else {
+      styleElement.appendChild(cssNode)
+    }
+  }
+}
+
+function applyToTag (styleElement, obj) {
+  var css = obj.css
+  var media = obj.media
+  var sourceMap = obj.sourceMap
+
+  if (media) {
+    styleElement.setAttribute('media', media)
+  }
+  if (options.ssrId) {
+    styleElement.setAttribute(ssrIdKey, obj.id)
+  }
+
+  if (sourceMap) {
+    // https://developer.chrome.com/devtools/docs/javascript-debugging
+    // this makes source maps inside style tags work properly in Chrome
+    css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
+    // http://stackoverflow.com/a/26603875
+    css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
+  }
+
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = css
+  } else {
+    while (styleElement.firstChild) {
+      styleElement.removeChild(styleElement.firstChild)
+    }
+    styleElement.appendChild(document.createTextNode(css))
+  }
+}
+
+
+/***/ }),
+
+/***/ "59d2":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".qkb-bot-ui{position:fixed;z-index:1000;bottom:1.5rem;right:1.5rem;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;font-size:1rem}.qkb-bot-ui *{box-sizing:border-box}.qkb-preload-image{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}.qkb-bot-ui--animate .qkb-fadeUp-enter-active,.qkb-bot-ui--animate .qkb-fadeUp-leave-active{opacity:1;-webkit-transform:translate(0);transform:translate(0);-webkit-transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-fadeUp-enter,.qkb-bot-ui--animate .qkb-fadeUp-leave-to{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}.qkb-bot-ui--animate .qkb-scaleUp-enter-active,.qkb-bot-ui--animate .qkb-scaleUp-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-scaleUp-enter,.qkb-bot-ui--animate .qkb-scaleUp-leave-to{-webkit-transform:scale(0);transform:scale(0);opacity:0}.qkb-bot-bubble{align-self:flex-end}.qkb-bubble-btn{display:block;padding:0;outline:none;border:0;box-shadow:none;border-radius:50%;color:#fff;fill:#fff;cursor:pointer;box-shadow:0 3px 5px 0 rgba(0,0,0,.15);-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.qkb-bubble-btn:hover{opacity:.85}.qkb-bubble-btn-icon{display:block;position:absolute;top:50%;left:50%;width:27px;height:auto;margin:-11px 0 0 -13px;line-height:1em}.qkb-bubble-btn-icon.qkb-bubble-btn-icon--close{width:15px;margin:-7px 0 0 -7px}.qkb-board{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:absolute;right:0;overflow:hidden;width:376px;height:80vh;margin-bottom:10px;border-radius:8px;background-color:#fff;box-shadow:0 3px 30px 0 rgba(0,0,0,.15)}.qkb-board,.qkb-board-header{display:-webkit-box;display:flex}.qkb-board-header{-webkit-box-flex:0;flex:none;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;height:50px;padding:5px 15px}.qkb-board-header__title{font-weight:700;font-size:.875rem}.qkb-board-content{-webkit-box-flex:1;flex-grow:1;overflow:hidden scroll}.qkb-board-content__bubbles{min-height:100%;padding:1.5rem 1.25rem 1rem}.qkb-msg-bubble{display:-webkit-box;display:flex;position:relative}.qkb-msg-avatar{-webkit-box-flex:1;flex-grow:1;flex:none;position:relative;overflow:hidden;border-radius:50%}.qkb-msg-avatar__img{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;background-size:cover;background-repeat:no-repeat}.qkb-msg-bubble__time{display:none;position:absolute;right:0;top:0;padding:2px 5px;margin-top:-5px;border-radius:5px;font-size:.625rem;color:#fff;background-color:#222;-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0;-webkit-transition:opacity .1s linear 1s;transition:opacity .1s linear 1s}.qkb-msg-bubble--user .qkb-msg-bubble__time{display:block}.qkb-msg-bubble-component{font-size:.875rem}.qkb-msg-bubble-component:hover~.qkb-msg-bubble__time{opacity:.8}.qkb-msg-bubble{padding-bottom:1rem}.qkb-msg-bubble.qkb-msg-bubble--bot .qkb-msg-bubble-component{margin-right:2.5rem;margin-left:.5rem}.qkb-msg-bubble.qkb-msg-bubble--user{-webkit-box-pack:end;justify-content:flex-end}.qkb-msg-bubble.qkb-msg-bubble--user .qkb-msg-bubble-component{margin-left:5rem}.qkb-msg-bubble-component__text{position:relative;padding:.75rem 1rem;border-radius:6px}.qkb-msg-bubble-component__options-wrapper{display:-webkit-box;display:flex;flex-wrap:wrap}.qkb-mb-button-options__item{-webkit-box-flex:0;flex:0 0 auto}.qkb-mb-button-options__btn{display:block;overflow:hidden;position:relative;margin:.5rem .375rem 0 0;padding:.25rem 1rem;cursor:pointer;outline:0;border:1px solid transparent;border-radius:13px;color:inherit;font-size:.875rem;font-family:inherit;text-decoration:none;background-color:transparent;-webkit-transition:background-color .15s linear,color .1s linear;transition:background-color .15s linear,color .1s linear}.qkb-mb-button-options__btn span{position:relative;z-index:10}.qkb-board-action{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;height:46px;padding:.45rem 1.25rem .5rem;border-top:1px solid #e6e6e6}.qkb-board-action__wrapper{display:-webkit-box;display:flex;width:100%;background-color:#fff}.qkb-board-action__input{-webkit-box-flex:1;flex-grow:1;height:100%;padding:0 1rem 0 0;font-size:.875rem;border:0;background-color:transparent;box-shadow:none;outline:0}.qkb-board-action__box{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;-webkit-box-pack:center;justify-content:center}.qkb-action-item{display:block;padding:0;outline:0;border:0;box-shadow:none;background-color:transparent;cursor:pointer;opacity:.6;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.qkb-action-item:hover{opacity:1}.qkb-action-icon{width:16px;height:16px;line-height:1;fill:#666;color:#666;vertical-align:middle}.qkb-board-aciton--typing .qkb-action-item--send{opacity:1}", ""]);
+// Exports
+module.exports = exports;
+
 
 /***/ }),
 
@@ -110,14 +463,29 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
 
 /***/ }),
 
+/***/ "b4c3":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("59d2");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("7d102d35", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ "de67":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("767f");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b4c3");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
 /* unused harmony reexport * */
- /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default.a); 
+ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_app_scss_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default.a); 
 
 /***/ }),
 
diff --git a/dist/vue-bot-ui.umd.min.js b/dist/vue-bot-ui.umd.min.js
index 549e13e..482fb19 100644
--- a/dist/vue-bot-ui.umd.min.js
+++ b/dist/vue-bot-ui.umd.min.js
@@ -1 +1 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-bot-ui"]=e(require("vue")):t["vue-bot-ui"]=e(t["Vue"])})("undefined"!==typeof self?self:this,(function(t){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"767f":function(t,e,n){},"8bbf":function(e,n){e.exports=t},de67:function(t,e,n){"use strict";var o=n("767f"),r=n.n(o);r.a},f6fd:function(t,e){(function(t){var e="currentScript",n=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(o){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(o.stack)||[!1])[1];for(t in n)if(n[t].src==e||"interactive"==n[t].readyState)return n[t];return null}}})})(document)},fb15:function(t,e,n){"use strict";var o;(n.r(e),"undefined"!==typeof window)&&(n("f6fd"),(o=window.document.currentScript)&&(o=o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=o[1]));var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-bot-ui",class:t.uiClasses},[n("transition",{attrs:{name:"qkb-fadeUp"}},[t.botActive?n("div",{staticClass:"qkb-board"},[n("BoardHeader",{attrs:{"bot-title":t.optionsMain.botTitle},on:{"close-bot":t.botToggle}}),n("BoardContent",{attrs:{"main-data":t.messageData}}),n("BoardAction",{attrs:{"input-placeholder":t.optionsMain.inputPlaceholder},on:{"msg-send":t.sendMessage}})],1):t._e()]),n("div",{staticClass:"qkb-bot-bubble"},[n("button",{staticClass:"qkb-bubble-btn",on:{click:t.botToggle}},[t._t("bubbleButton",[n("transition",{attrs:{name:"qkb-scaleUp"}},[t.botActive?n("CloseIcon",{key:"2",staticClass:"qkb-bubble-btn-icon qkb-bubble-btn-icon--close"}):n("BubbleIcon",{key:"1",staticClass:"qkb-bubble-btn-icon"})],1)])],2)]),n("AppStyle",{attrs:{options:t.optionsMain}}),n("div",{staticClass:"qkb-preload-image"},[t.optionsMain.botAvatarImg?n("div",{staticClass:"qkb-msg-avatar__img"}):t._e()])],1)},a=[],s=n("8bbf"),i=n.n(s),c=new i.a,l=c,u=[{type:"text",text:"Hello. Have a nice day!",disableInput:!1},{type:"button",text:"How can we help you today?",data:[{title:"Search Suport Articles",value:"search",action:"postback"},{title:"Submit Support Ticket",value:"submit_ticket",action:"postback"}],disableInput:!1},{type:"text",text:"Please type your problem",disableInput:!1},{type:"button",text:"Here are the results from our knowledgebase.",data:[{title:"How to create a menu",value:"https://google.com",action:"url"},{title:"How to add a submenu to a menu",value:"https://google.com",action:"url"},{title:"Not what I'm looking for",value:"result_not_match",action:"postback"}],disableInput:!1},{type:"text",text:"Sorry to hear that. Please type your problem and we will create a ticket for you.",disableInput:!1},{type:"button",text:"All done! Your support ticket is created.",data:[{title:"View ticket",value:"https://google.com",action:"url"}],disableInput:!1}],b={getAllMessages:p,createMessage:f,getMessage:d};function p(){return new Promise((function(t,e){setTimeout((function(){var e=Math.floor(Math.random()*u.length);t(u[e])}),1e3)}))}function f(t){return new Promise((function(t,e){setTimeout((function(){var e=Math.floor(Math.random()*u.length);t(u[e])}),1e3)}))}function d(){return new Promise((function(t,e){setTimeout((function(){var e=Math.floor(Math.random()*u.length);t(u[e])}),1e3)}))}var m=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-board-header"},[t._t("header",[n("div",{staticClass:"qkb-board-header__title"},[t._v(t._s(t.botTitle))])])],2)},g=[],v={props:{botTitle:{type:String,default:"Chatbot"}}},y=v;function h(t,e,n,o,r,a,s,i){var c,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),o&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),s?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):r&&(c=i?function(){r.call(this,this.$root.$options.shadowRoot)}:r),c)if(l.functional){l._injectStyles=c;var u=l.render;l.render=function(t,e){return c.call(e),u(t,e)}}else{var b=l.beforeCreate;l.beforeCreate=b?[].concat(b,c):[c]}return{exports:t,options:l}}var O=h(y,m,g,!1,null,null,null),_=O.exports,k=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"boardContent",staticClass:"qkb-board-content"},[t.mainData.length?n("div",{staticClass:"qkb-board-content__bubbles"},t._l(t.mainData,(function(t,e){return n("message-bubble",{key:e,attrs:{message:t}})})),1):t._e()])},j=[],w=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-msg-bubble",class:t.bubbleClass},["bot"===t.message.agent?n("div",{staticClass:"qkb-msg-avatar"},[n("div",{staticClass:"qkb-msg-avatar__img"})]):t._e(),t.componentType?n(t.componentType,{tag:"component",attrs:{"main-data":t.message}}):t._e(),n("div",{staticClass:"qkb-msg-bubble__time"},[t._v("2 mins ago")])],1)},x=[],C=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-msg-bubble-component qkb-msg-bubble-component--single-text"},[n("div",{staticClass:"qkb-msg-bubble-component__text"},[t._v(t._s(t.mainData.text))])])},q=[],P={props:{mainData:{type:Object}}},S=P,B=h(S,C,q,!1,null,null,null),M=B.exports,T=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-msg-bubble-component qkb-msg-bubble-component--button-options"},[n("div",{staticClass:"qkb-msg-bubble-component__text"},[t._v(t._s(t.mainData.text))]),n("div",{staticClass:"qkb-msg-bubble-component__options-wrapper"},t._l(t.mainData.data,(function(e,o){return n("div",{key:o,staticClass:"qkb-mb-button-options__item",class:{active:t.selectedItem===e.value}},["postback"===e.action?n("button",{staticClass:"qkb-mb-button-options__btn",on:{click:function(n){return t.selectOption(e.value)}}},[n("span",[t._v(t._s(e.title))])]):n("a",{staticClass:"qkb-mb-button-options__btn qkb-mb-button-options__url",attrs:{target:"_blank",href:e.value}},[n("span",[t._v(t._s(e.title))])])])})),0)])},I=[],D={props:{mainData:{type:Object}},data:function(){return{selectedItem:null}},methods:{selectOption:function(t){this.selectedItem=t,l.$emit("select-button-option",t)}}},E=D,$=h(E,T,I,!1,null,null,null),A=$.exports,z={components:{SingleText:M,ButtonOptions:A},props:{message:{type:Object}},computed:{bubbleClass:function(){return"bot"===this.message.agent?"qkb-msg-bubble--bot":"qkb-msg-bubble--user"},componentType:function(){var t="";switch(this.message.type){case"button":t="ButtonOptions";break;default:t="SingleText"}return t}}},H=z,L=h(H,w,x,!1,null,null,null),U=L.exports,V={components:{MessageBubble:U},props:{mainData:{type:Array,required:!0}},watch:{mainData:function(t){var e=this;this.$nextTick((function(){e.updateScroll()}))}},methods:{updateScroll:function(){var t=this.$refs.boardContent,e=t.offsetHeight;t.scrollTop=e}}},N=V,R=h(N,k,j,!1,null,null,null),X=R.exports,F=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-board-action",class:t.actionClass},[n("div",{staticClass:"qkb-board-action__wrapper"},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.messageText,expression:"messageText"}],ref:"qkbMessageInput",staticClass:"qkb-board-action__input",attrs:{type:"text",disabled:t.disableInput,placeholder:t.inputPlaceholder},domProps:{value:t.messageText},on:{keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.sendMessage(e)},input:function(e){e.target.composing||(t.messageText=e.target.value)}}}),n("div",{staticClass:"qkb-board-action__box"},[t._t("actions",[n("button",{staticClass:"qkb-action-item qkb-action-item--emo"})]),n("button",{staticClass:"qkb-action-item qkb-action-item--send",on:{click:t.sendMessage}},[t._t("sendButton",[n("IconSend",{staticClass:"qkb-action-icon qkb-action-icon--send"})])],2)],2)])])},Y=[];function G(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function J(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?G(Object(n),!0).forEach((function(e){K(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):G(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function K(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function Q(t,e){if(null==t)return{};var n,o,r=W(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}function W(t,e){if(null==t)return{};var n,o,r={},a=Object.keys(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}var Z={functional:!0,render:function(t,e){var n=e._c,o=(e._v,e.data),r=e.children,a=void 0===r?[]:r,s=o["class"],i=o.staticClass,c=o.style,l=o.staticStyle,u=o.attrs,b=void 0===u?{}:u,p=Q(o,["class","staticClass","style","staticStyle","attrs"]);return n("svg",J({class:[s,i],style:[c,l],attrs:Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 488.721 488.721"},b)},p),a.concat([n("path",{attrs:{d:"M483.589 222.024a51.197 51.197 0 00-23.762-23.762L73.522 11.331C48.074-.998 17.451 9.638 5.122 35.086A51.2 51.2 0 003.669 76.44l67.174 167.902L3.669 412.261c-10.463 26.341 2.409 56.177 28.75 66.639a51.314 51.314 0 0018.712 3.624c7.754 0 15.408-1.75 22.391-5.12l386.304-186.982c25.45-12.326 36.089-42.949 23.763-68.398zM58.657 446.633c-8.484 4.107-18.691.559-22.798-7.925a17.065 17.065 0 01-.481-13.784l65.399-163.516h340.668L58.657 446.633zm42.121-219.358L35.379 63.759a16.64 16.64 0 014.215-18.773 16.537 16.537 0 0119.063-2.884l382.788 185.173H100.778z"}})]))}},tt={components:{IconSend:Z},props:{inputPlaceholder:{type:String}},data:function(){return{messageText:null,disableInput:!1}},computed:{actionClass:function(){var t=[];return this.disableInput&&t.push("qkb-board-action--disabled"),this.messageText&&t.push("qkb-board-aciton--typing"),t}},mounted:function(){this.$refs.qkbMessageInput.focus()},methods:{sendMessage:function(){this.messageText&&(this.$emit("msg-send",this.messageText),this.messageText=null)}}},et=tt,nt=h(et,F,Y,!1,null,null,null),ot=nt.exports,rt=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-bot-style",staticStyle:{display:"none"},domProps:{innerHTML:t._s(t.style)}})},at=[],st={props:["options"],computed:{style:function(){if(!this.options)return"";var t=this.options,e=t.colorScheme,n=t.textColor,o=t.boardContentBg,r=t.bubbleBtnSize,a=t.botAvatarImg,s=t.botAvatarSize,i=t.msgBubbleBgBot,c=t.msgBubbleColorBot,l=t.msgBubbleBgUser,u=t.msgBubbleColorUser,b='\n<style type="text/css" id="qkb-bot-style">\n.qkb-bubble-btn {\n  background-color: '.concat(e,";\n  width: ").concat(r,"px;\n  height: ").concat(r,"px;\n}\n.qkb-bubble-btn-icon {\n  fill: ").concat(n,";\n  color: ").concat(n,";\n}\n.qkb-board {\n  bottom: ").concat(r,"px;\n}\n.qkb-board-header {\n  background-color: ").concat(e,";\n}\n.qkb-board-header__title {\n  color: ").concat(n,";\n}\n.qkb-board-content {\n  background-color: ").concat(o,";\n}\n").concat(a?".qkb-msg-avatar {\n      width: ".concat(s,"px;\n      height: ").concat(s,"px;\n    }\n    .qkb-msg-avatar__img {\n      background-image: url(").concat(a,");\n    }"):"","\n.qkb-msg-bubble--bot .qkb-msg-bubble-component__text {\n  color: ").concat(c,";\n  background-color: ").concat(i,";\n}\n.qkb-mb-button-options__btn::before {\n  background-color: ").concat(l,";\n}\n.qkb-msg-bubble--user .qkb-msg-bubble-component__text {\n  color: ").concat(u,";\n  background-color: ").concat(l,";\n}\n.qkb-mb-button-options__btn {\n  color: ").concat(l,";\n  border-color: ").concat(l,";\n}\n.qkb-mb-button-options__btn:hover {\n  color: ").concat(u,";\n  background-color: ").concat(l,";\n}\n</style>\n      ");return b}}},it=st,ct=h(it,rt,at,!1,null,null,null),lt=ct.exports;function ut(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function bt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ut(Object(n),!0).forEach((function(e){pt(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ut(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function pt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function ft(t,e){if(null==t)return{};var n,o,r=dt(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}function dt(t,e){if(null==t)return{};var n,o,r={},a=Object.keys(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}var mt={functional:!0,render:function(t,e){var n=e._c,o=(e._v,e.data),r=e.children,a=void 0===r?[]:r,s=o["class"],i=o.staticClass,c=o.style,l=o.staticStyle,u=o.attrs,b=void 0===u?{}:u,p=ft(o,["class","staticClass","style","staticStyle","attrs"]);return n("svg",bt({class:[s,i],style:[c,l],attrs:Object.assign({height:"511pt",viewBox:"1 -31 512 511",width:"511pt",xmlns:"http://www.w3.org/2000/svg"},b)},p),a.concat([n("path",{attrs:{d:"M128 448.5c-8.836 0-16-7.164-16-16v-80H48c-26.512 0-48-21.492-48-48v-256C0 21.988 21.488.5 48 .5h416c26.512 0 48 21.488 48 48v256c0 26.508-21.488 48-48 48H230.625l-91.313 91.313c-3 3-7.07 4.687-11.312 4.687zm-80-416c-8.836 0-16 7.164-16 16v256c0 8.836 7.164 16 16 16h80c8.836 0 16 7.164 16 16v57.375l68.688-68.688c3-3 7.07-4.687 11.312-4.687h240c8.836 0 16-7.164 16-16v-256c0-8.836-7.164-16-16-16zm0 0"}}),n("path",{attrs:{d:"M160 144.5c-17.672 0-32-14.328-32-32s14.328-32 32-32 32 14.328 32 32-14.328 32-32 32zm0 0M352 144.5c-17.672 0-32-14.328-32-32s14.328-32 32-32 32 14.328 32 32-14.328 32-32 32zm0 0M256 288.5c-52.996-.05-95.945-43.004-96-96 0-8.836 7.164-16 16-16s16 7.164 16 16c0 35.348 28.652 64 64 64s64-28.652 64-64c0-8.836 7.164-16 16-16s16 7.164 16 16c-.055 52.996-43.004 95.945-96 96zm0 0"}})]))}};function gt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function vt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?gt(Object(n),!0).forEach((function(e){yt(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):gt(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function yt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function ht(t,e){if(null==t)return{};var n,o,r=Ot(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}function Ot(t,e){if(null==t)return{};var n,o,r={},a=Object.keys(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}var _t={functional:!0,render:function(t,e){var n=e._c,o=(e._v,e.data),r=e.children,a=void 0===r?[]:r,s=o["class"],i=o.staticClass,c=o.style,l=o.staticStyle,u=o.attrs,b=void 0===u?{}:u,p=ht(o,["class","staticClass","style","staticStyle","attrs"]);return n("svg",vt({class:[s,i],style:[c,l],attrs:Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512.001 512.001"},b)},p),a.concat([n("path",{attrs:{d:"M284.286 256.002L506.143 34.144c7.811-7.811 7.811-20.475 0-28.285-7.811-7.81-20.475-7.811-28.285 0L256 227.717 34.143 5.859c-7.811-7.811-20.475-7.811-28.285 0-7.81 7.811-7.811 20.475 0 28.285l221.857 221.857L5.858 477.859c-7.811 7.811-7.811 20.475 0 28.285a19.938 19.938 0 0014.143 5.857 19.94 19.94 0 0014.143-5.857L256 284.287l221.857 221.857c3.905 3.905 9.024 5.857 14.143 5.857s10.237-1.952 14.143-5.857c7.811-7.811 7.811-20.475 0-28.285L284.286 256.002z"}})]))}};function kt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function jt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?kt(Object(n),!0).forEach((function(e){wt(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):kt(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function wt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var xt={name:"VBotUI",components:{BoardHeader:_,BoardContent:X,BoardAction:ot,BubbleIcon:mt,CloseIcon:_t,AppStyle:lt},props:{options:{type:Object,default:function(){return{}}}},data:function(){return{botActive:!0,messageData:[],defaultOptions:{inputPlaceholder:"Message",botTitle:"Chatbot",colorScheme:"#1b53d0",boardContentBg:"#fff",textColor:"#fff",bubbleBtnSize:56,animation:!0,botAvatarSize:32,botAvatarImg:"http://placehold.it/200x200",msgBubbleBgBot:"#f0f0f0",msgBubbleColorBot:"#000",msgBubbleBgUser:"#4356e0",msgBubbleColorUser:"#fff"}}},computed:{optionsMain:function(){return jt({},this.defaultOptions,{},this.options)},uiClasses:function(){var t=[];return this.optionsMain.animation&&t.push("qkb-bot-ui--animate"),t}},created:function(){l.$on("select-button-option",this.selectOption)},destroyed:function(){l.$off("select-button-option")},methods:{botToggle:function(){this.botActive=!this.botActive,this.botActive&&this.init()},init:function(){var t=this;b.getMessage().then((function(e){var n=jt({agent:"bot"},e,{avatar:"https://placehold.it/200x200"});t.disableInput=e.disableInput,t.messageData.push(n)}))},sendMessage:function(t){var e=this,n={agent:"customer",type:"text",text:t};this.messageData.push(n),b.createMessage(n).then((function(t){var n=jt({agent:"bot"},t,{avatar:"https://placehold.it/200x200"});e.disableInput=t.disableInput,e.messageData.push(n)}))},selectOption:function(t){}}},Ct=xt,qt=(n("de67"),h(Ct,r,a,!1,null,null,null)),Pt=qt.exports,St={install:function(t,e){t.component("VueBotUI",Pt),e&&console.log("options",e)}},Bt=St;e["default"]=Bt}})}));
\ No newline at end of file
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-bot-ui"]=e(require("vue")):t["vue-bot-ui"]=e(t["Vue"])})("undefined"!==typeof self?self:this,(function(t){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"24fb":function(t,e,n){"use strict";function o(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"===typeof btoa){var a=r(o),i=o.sources.map((function(t){return"/*# sourceURL=".concat(o.sourceRoot).concat(t," */")}));return[n].concat(i).concat([a]).join("\n")}return[n].join("\n")}function r(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(e);return"/*# ".concat(n," */")}t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=o(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n){"string"===typeof t&&(t=[[null,t,""]]);for(var o=0;o<t.length;o++){var r=[].concat(t[o]);n&&(r[2]?r[2]="".concat(n," and ").concat(r[2]):r[2]=n),e.push(r)}},e}},"499e":function(t,e,n){"use strict";function o(t,e){for(var n=[],o={},r=0;r<e.length;r++){var a=e[r],i=a[0],s=a[1],c=a[2],l=a[3],b={id:t+":"+r,css:s,media:c,sourceMap:l};o[i]?o[i].parts.push(b):n.push(o[i]={id:i,parts:[b]})}return n}n.r(e),n.d(e,"default",(function(){return f}));var r="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},i=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,c=0,l=!1,b=function(){},u=null,p="data-vue-ssr-id",d="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(t,e,n,r){l=n,u=r||{};var i=o(t,e);return m(i),function(e){for(var n=[],r=0;r<i.length;r++){var s=i[r],c=a[s.id];c.refs--,n.push(c)}e?(i=o(t,e),m(i)):i=[];for(r=0;r<n.length;r++){c=n[r];if(0===c.refs){for(var l=0;l<c.parts.length;l++)c.parts[l]();delete a[c.id]}}}}function m(t){for(var e=0;e<t.length;e++){var n=t[e],o=a[n.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](n.parts[r]);for(;r<n.parts.length;r++)o.parts.push(h(n.parts[r]));o.parts.length>n.parts.length&&(o.parts.length=n.parts.length)}else{var i=[];for(r=0;r<n.parts.length;r++)i.push(h(n.parts[r]));a[n.id]={id:n.id,refs:1,parts:i}}}}function g(){var t=document.createElement("style");return t.type="text/css",i.appendChild(t),t}function h(t){var e,n,o=document.querySelector("style["+p+'~="'+t.id+'"]');if(o){if(l)return b;o.parentNode.removeChild(o)}if(d){var r=c++;o=s||(s=g()),e=k.bind(null,o,r,!1),n=k.bind(null,o,r,!0)}else o=g(),e=y.bind(null,o),n=function(){o.parentNode.removeChild(o)};return e(t),function(o){if(o){if(o.css===t.css&&o.media===t.media&&o.sourceMap===t.sourceMap)return;e(t=o)}else n()}}var v=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}();function k(t,e,n,o){var r=n?"":o.css;if(t.styleSheet)t.styleSheet.cssText=v(e,r);else{var a=document.createTextNode(r),i=t.childNodes;i[e]&&t.removeChild(i[e]),i.length?t.insertBefore(a,i[e]):t.appendChild(a)}}function y(t,e){var n=e.css,o=e.media,r=e.sourceMap;if(o&&t.setAttribute("media",o),u.ssrId&&t.setAttribute(p,e.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},"59d2":function(t,e,n){var o=n("24fb");e=o(!1),e.push([t.i,".qkb-bot-ui{position:fixed;z-index:1000;bottom:1.5rem;right:1.5rem;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;font-size:1rem}.qkb-bot-ui *{box-sizing:border-box}.qkb-preload-image{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}.qkb-bot-ui--animate .qkb-fadeUp-enter-active,.qkb-bot-ui--animate .qkb-fadeUp-leave-active{opacity:1;-webkit-transform:translate(0);transform:translate(0);-webkit-transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,-webkit-transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out;transition:opacity .15s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-fadeUp-enter,.qkb-bot-ui--animate .qkb-fadeUp-leave-to{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}.qkb-bot-ui--animate .qkb-scaleUp-enter-active,.qkb-bot-ui--animate .qkb-scaleUp-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,-webkit-transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out;transition:opacity .1s linear,transform .2s ease-out,-webkit-transform .2s ease-out}.qkb-bot-ui--animate .qkb-scaleUp-enter,.qkb-bot-ui--animate .qkb-scaleUp-leave-to{-webkit-transform:scale(0);transform:scale(0);opacity:0}.qkb-bot-bubble{align-self:flex-end}.qkb-bubble-btn{display:block;padding:0;outline:none;border:0;box-shadow:none;border-radius:50%;color:#fff;fill:#fff;cursor:pointer;box-shadow:0 3px 5px 0 rgba(0,0,0,.15);-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.qkb-bubble-btn:hover{opacity:.85}.qkb-bubble-btn-icon{display:block;position:absolute;top:50%;left:50%;width:27px;height:auto;margin:-11px 0 0 -13px;line-height:1em}.qkb-bubble-btn-icon.qkb-bubble-btn-icon--close{width:15px;margin:-7px 0 0 -7px}.qkb-board{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:absolute;right:0;overflow:hidden;width:376px;height:80vh;margin-bottom:10px;border-radius:8px;background-color:#fff;box-shadow:0 3px 30px 0 rgba(0,0,0,.15)}.qkb-board,.qkb-board-header{display:-webkit-box;display:flex}.qkb-board-header{-webkit-box-flex:0;flex:none;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;height:50px;padding:5px 15px}.qkb-board-header__title{font-weight:700;font-size:.875rem}.qkb-board-content{-webkit-box-flex:1;flex-grow:1;overflow:hidden scroll}.qkb-board-content__bubbles{min-height:100%;padding:1.5rem 1.25rem 1rem}.qkb-msg-bubble{display:-webkit-box;display:flex;position:relative}.qkb-msg-avatar{-webkit-box-flex:1;flex-grow:1;flex:none;position:relative;overflow:hidden;border-radius:50%}.qkb-msg-avatar__img{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;background-size:cover;background-repeat:no-repeat}.qkb-msg-bubble__time{display:none;position:absolute;right:0;top:0;padding:2px 5px;margin-top:-5px;border-radius:5px;font-size:.625rem;color:#fff;background-color:#222;-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0;-webkit-transition:opacity .1s linear 1s;transition:opacity .1s linear 1s}.qkb-msg-bubble--user .qkb-msg-bubble__time{display:block}.qkb-msg-bubble-component{font-size:.875rem}.qkb-msg-bubble-component:hover~.qkb-msg-bubble__time{opacity:.8}.qkb-msg-bubble{padding-bottom:1rem}.qkb-msg-bubble.qkb-msg-bubble--bot .qkb-msg-bubble-component{margin-right:2.5rem;margin-left:.5rem}.qkb-msg-bubble.qkb-msg-bubble--user{-webkit-box-pack:end;justify-content:flex-end}.qkb-msg-bubble.qkb-msg-bubble--user .qkb-msg-bubble-component{margin-left:5rem}.qkb-msg-bubble-component__text{position:relative;padding:.75rem 1rem;border-radius:6px}.qkb-msg-bubble-component__options-wrapper{display:-webkit-box;display:flex;flex-wrap:wrap}.qkb-mb-button-options__item{-webkit-box-flex:0;flex:0 0 auto}.qkb-mb-button-options__btn{display:block;overflow:hidden;position:relative;margin:.5rem .375rem 0 0;padding:.25rem 1rem;cursor:pointer;outline:0;border:1px solid transparent;border-radius:13px;color:inherit;font-size:.875rem;font-family:inherit;text-decoration:none;background-color:transparent;-webkit-transition:background-color .15s linear,color .1s linear;transition:background-color .15s linear,color .1s linear}.qkb-mb-button-options__btn span{position:relative;z-index:10}.qkb-board-action{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;height:46px;padding:.45rem 1.25rem .5rem;border-top:1px solid #e6e6e6}.qkb-board-action__wrapper{display:-webkit-box;display:flex;width:100%;background-color:#fff}.qkb-board-action__input{-webkit-box-flex:1;flex-grow:1;height:100%;padding:0 1rem 0 0;font-size:.875rem;border:0;background-color:transparent;box-shadow:none;outline:0}.qkb-board-action__box{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:none;-webkit-box-pack:center;justify-content:center}.qkb-action-item{display:block;padding:0;outline:0;border:0;box-shadow:none;background-color:transparent;cursor:pointer;opacity:.6;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.qkb-action-item:hover{opacity:1}.qkb-action-icon{width:16px;height:16px;line-height:1;fill:#666;color:#666;vertical-align:middle}.qkb-board-aciton--typing .qkb-action-item--send{opacity:1}",""]),t.exports=e},"8bbf":function(e,n){e.exports=t},b4c3:function(t,e,n){var o=n("59d2");"string"===typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);var r=n("499e").default;r("7d102d35",o,!0,{sourceMap:!1,shadowMode:!1})},de67:function(t,e,n){"use strict";var o=n("b4c3"),r=n.n(o);r.a},f6fd:function(t,e){(function(t){var e="currentScript",n=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(o){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(o.stack)||[!1])[1];for(t in n)if(n[t].src==e||"interactive"==n[t].readyState)return n[t];return null}}})})(document)},fb15:function(t,e,n){"use strict";var o;(n.r(e),"undefined"!==typeof window)&&(n("f6fd"),(o=window.document.currentScript)&&(o=o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=o[1]));var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-bot-ui",class:t.uiClasses},[n("transition",{attrs:{name:"qkb-fadeUp"}},[t.botActive?n("div",{staticClass:"qkb-board"},[n("BoardHeader",{attrs:{"bot-title":t.optionsMain.botTitle},on:{"close-bot":t.botToggle}}),n("BoardContent",{attrs:{"main-data":t.messageData}}),n("BoardAction",{attrs:{"input-placeholder":t.optionsMain.inputPlaceholder},on:{"msg-send":t.sendMessage}})],1):t._e()]),n("div",{staticClass:"qkb-bot-bubble"},[n("button",{staticClass:"qkb-bubble-btn",on:{click:t.botToggle}},[t._t("bubbleButton",[n("transition",{attrs:{name:"qkb-scaleUp"}},[t.botActive?n("CloseIcon",{key:"2",staticClass:"qkb-bubble-btn-icon qkb-bubble-btn-icon--close"}):n("BubbleIcon",{key:"1",staticClass:"qkb-bubble-btn-icon"})],1)])],2)]),n("AppStyle",{attrs:{options:t.optionsMain}}),n("div",{staticClass:"qkb-preload-image"},[t.optionsMain.botAvatarImg?n("div",{staticClass:"qkb-msg-avatar__img"}):t._e()])],1)},a=[],i=n("8bbf"),s=n.n(i),c=new s.a,l=c,b=[{type:"text",text:"Hello. Have a nice day!",disableInput:!1},{type:"button",text:"How can we help you today?",data:[{title:"Search Suport Articles",value:"search",action:"postback"},{title:"Submit Support Ticket",value:"submit_ticket",action:"postback"}],disableInput:!1},{type:"text",text:"Please type your problem",disableInput:!1},{type:"button",text:"Here are the results from our knowledgebase.",data:[{title:"How to create a menu",value:"https://google.com",action:"url"},{title:"How to add a submenu to a menu",value:"https://google.com",action:"url"},{title:"Not what I'm looking for",value:"result_not_match",action:"postback"}],disableInput:!1},{type:"text",text:"Sorry to hear that. Please type your problem and we will create a ticket for you.",disableInput:!1},{type:"button",text:"All done! Your support ticket is created.",data:[{title:"View ticket",value:"https://google.com",action:"url"}],disableInput:!1}],u={getAllMessages:p,createMessage:d,getMessage:f};function p(){return new Promise((function(t,e){setTimeout((function(){var e=Math.floor(Math.random()*b.length);t(b[e])}),1e3)}))}function d(t){return new Promise((function(t,e){setTimeout((function(){var e=Math.floor(Math.random()*b.length);t(b[e])}),1e3)}))}function f(){return new Promise((function(t,e){setTimeout((function(){var e=Math.floor(Math.random()*b.length);t(b[e])}),1e3)}))}var m=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-board-header"},[t._t("header",[n("div",{staticClass:"qkb-board-header__title"},[t._v(t._s(t.botTitle))])])],2)},g=[],h={props:{botTitle:{type:String,default:"Chatbot"}}},v=h;function k(t,e,n,o,r,a,i,s){var c,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),o&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),i?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},l._ssrRegister=c):r&&(c=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),c)if(l.functional){l._injectStyles=c;var b=l.render;l.render=function(t,e){return c.call(e),b(t,e)}}else{var u=l.beforeCreate;l.beforeCreate=u?[].concat(u,c):[c]}return{exports:t,options:l}}var y=k(v,m,g,!1,null,null,null),x=y.exports,w=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"boardContent",staticClass:"qkb-board-content"},[t.mainData.length?n("div",{staticClass:"qkb-board-content__bubbles"},t._l(t.mainData,(function(t,e){return n("message-bubble",{key:e,attrs:{message:t}})})),1):t._e()])},_=[],q=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-msg-bubble",class:t.bubbleClass},["bot"===t.message.agent?n("div",{staticClass:"qkb-msg-avatar"},[n("div",{staticClass:"qkb-msg-avatar__img"})]):t._e(),t.componentType?n(t.componentType,{tag:"component",attrs:{"main-data":t.message}}):t._e(),n("div",{staticClass:"qkb-msg-bubble__time"},[t._v("2 mins ago")])],1)},O=[],j=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-msg-bubble-component qkb-msg-bubble-component--single-text"},[n("div",{staticClass:"qkb-msg-bubble-component__text"},[t._v(t._s(t.mainData.text))])])},C=[],S={props:{mainData:{type:Object}}},P=S,M=k(P,j,C,!1,null,null,null),B=M.exports,T=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-msg-bubble-component qkb-msg-bubble-component--button-options"},[n("div",{staticClass:"qkb-msg-bubble-component__text"},[t._v(t._s(t.mainData.text))]),n("div",{staticClass:"qkb-msg-bubble-component__options-wrapper"},t._l(t.mainData.data,(function(e,o){return n("div",{key:o,staticClass:"qkb-mb-button-options__item",class:{active:t.selectedItem===e.value}},["postback"===e.action?n("button",{staticClass:"qkb-mb-button-options__btn",on:{click:function(n){return t.selectOption(e.value)}}},[n("span",[t._v(t._s(e.title))])]):n("a",{staticClass:"qkb-mb-button-options__btn qkb-mb-button-options__url",attrs:{target:"_blank",href:e.value}},[n("span",[t._v(t._s(e.title))])])])})),0)])},I=[],D={props:{mainData:{type:Object}},data:function(){return{selectedItem:null}},methods:{selectOption:function(t){this.selectedItem=t,l.$emit("select-button-option",t)}}},E=D,U=k(E,T,I,!1,null,null,null),z=U.exports,A={components:{SingleText:B,ButtonOptions:z},props:{message:{type:Object}},computed:{bubbleClass:function(){return"bot"===this.message.agent?"qkb-msg-bubble--bot":"qkb-msg-bubble--user"},componentType:function(){var t="";switch(this.message.type){case"button":t="ButtonOptions";break;default:t="SingleText"}return t}}},$=A,L=k($,q,O,!1,null,null,null),H=L.exports,N={components:{MessageBubble:H},props:{mainData:{type:Array,required:!0}},watch:{mainData:function(t){var e=this;this.$nextTick((function(){e.updateScroll()}))}},methods:{updateScroll:function(){var t=this.$refs.boardContent,e=t.offsetHeight;t.scrollTop=e}}},R=N,V=k(R,w,_,!1,null,null,null),Y=V.exports,G=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-board-action",class:t.actionClass},[n("div",{staticClass:"qkb-board-action__wrapper"},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.messageText,expression:"messageText"}],ref:"qkbMessageInput",staticClass:"qkb-board-action__input",attrs:{type:"text",disabled:t.disableInput,placeholder:t.inputPlaceholder},domProps:{value:t.messageText},on:{keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.sendMessage(e)},input:function(e){e.target.composing||(t.messageText=e.target.value)}}}),n("div",{staticClass:"qkb-board-action__box"},[t._t("actions",[n("button",{staticClass:"qkb-action-item qkb-action-item--emo"})]),n("button",{staticClass:"qkb-action-item qkb-action-item--send",on:{click:t.sendMessage}},[t._t("sendButton",[n("IconSend",{staticClass:"qkb-action-icon qkb-action-icon--send"})])],2)],2)])])},J=[];function X(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function F(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?X(Object(n),!0).forEach((function(e){W(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):X(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function W(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function K(t,e){if(null==t)return{};var n,o,r=Q(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}function Q(t,e){if(null==t)return{};var n,o,r={},a=Object.keys(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}var Z={functional:!0,render:function(t,e){var n=e._c,o=(e._v,e.data),r=e.children,a=void 0===r?[]:r,i=o["class"],s=o.staticClass,c=o.style,l=o.staticStyle,b=o.attrs,u=void 0===b?{}:b,p=K(o,["class","staticClass","style","staticStyle","attrs"]);return n("svg",F({class:[i,s],style:[c,l],attrs:Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 488.721 488.721"},u)},p),a.concat([n("path",{attrs:{d:"M483.589 222.024a51.197 51.197 0 00-23.762-23.762L73.522 11.331C48.074-.998 17.451 9.638 5.122 35.086A51.2 51.2 0 003.669 76.44l67.174 167.902L3.669 412.261c-10.463 26.341 2.409 56.177 28.75 66.639a51.314 51.314 0 0018.712 3.624c7.754 0 15.408-1.75 22.391-5.12l386.304-186.982c25.45-12.326 36.089-42.949 23.763-68.398zM58.657 446.633c-8.484 4.107-18.691.559-22.798-7.925a17.065 17.065 0 01-.481-13.784l65.399-163.516h340.668L58.657 446.633zm42.121-219.358L35.379 63.759a16.64 16.64 0 014.215-18.773 16.537 16.537 0 0119.063-2.884l382.788 185.173H100.778z"}})]))}},tt={components:{IconSend:Z},props:{inputPlaceholder:{type:String}},data:function(){return{messageText:null,disableInput:!1}},computed:{actionClass:function(){var t=[];return this.disableInput&&t.push("qkb-board-action--disabled"),this.messageText&&t.push("qkb-board-aciton--typing"),t}},mounted:function(){this.$refs.qkbMessageInput.focus()},methods:{sendMessage:function(){this.messageText&&(this.$emit("msg-send",this.messageText),this.messageText=null)}}},et=tt,nt=k(et,G,J,!1,null,null,null),ot=nt.exports,rt=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"qkb-bot-style",staticStyle:{display:"none"},domProps:{innerHTML:t._s(t.style)}})},at=[],it={props:["options"],computed:{style:function(){if(!this.options)return"";var t=this.options,e=t.colorScheme,n=t.textColor,o=t.boardContentBg,r=t.bubbleBtnSize,a=t.botAvatarImg,i=t.botAvatarSize,s=t.msgBubbleBgBot,c=t.msgBubbleColorBot,l=t.msgBubbleBgUser,b=t.msgBubbleColorUser,u='\n<style type="text/css" id="qkb-bot-style">\n.qkb-bubble-btn {\n  background-color: '.concat(e,";\n  width: ").concat(r,"px;\n  height: ").concat(r,"px;\n}\n.qkb-bubble-btn-icon {\n  fill: ").concat(n,";\n  color: ").concat(n,";\n}\n.qkb-board {\n  bottom: ").concat(r,"px;\n}\n.qkb-board-header {\n  background-color: ").concat(e,";\n}\n.qkb-board-header__title {\n  color: ").concat(n,";\n}\n.qkb-board-content {\n  background-color: ").concat(o,";\n}\n").concat(a?".qkb-msg-avatar {\n      width: ".concat(i,"px;\n      height: ").concat(i,"px;\n    }\n    .qkb-msg-avatar__img {\n      background-image: url(").concat(a,");\n    }"):"","\n.qkb-msg-bubble--bot .qkb-msg-bubble-component__text {\n  color: ").concat(c,";\n  background-color: ").concat(s,";\n}\n.qkb-mb-button-options__btn::before {\n  background-color: ").concat(l,";\n}\n.qkb-msg-bubble--user .qkb-msg-bubble-component__text {\n  color: ").concat(b,";\n  background-color: ").concat(l,";\n}\n.qkb-mb-button-options__btn {\n  color: ").concat(l,";\n  border-color: ").concat(l,";\n}\n.qkb-mb-button-options__btn:hover {\n  color: ").concat(b,";\n  background-color: ").concat(l,";\n}\n</style>\n      ");return u}}},st=it,ct=k(st,rt,at,!1,null,null,null),lt=ct.exports;function bt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function ut(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?bt(Object(n),!0).forEach((function(e){pt(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):bt(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function pt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function dt(t,e){if(null==t)return{};var n,o,r=ft(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}function ft(t,e){if(null==t)return{};var n,o,r={},a=Object.keys(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}var mt={functional:!0,render:function(t,e){var n=e._c,o=(e._v,e.data),r=e.children,a=void 0===r?[]:r,i=o["class"],s=o.staticClass,c=o.style,l=o.staticStyle,b=o.attrs,u=void 0===b?{}:b,p=dt(o,["class","staticClass","style","staticStyle","attrs"]);return n("svg",ut({class:[i,s],style:[c,l],attrs:Object.assign({height:"511pt",viewBox:"1 -31 512 511",width:"511pt",xmlns:"http://www.w3.org/2000/svg"},u)},p),a.concat([n("path",{attrs:{d:"M128 448.5c-8.836 0-16-7.164-16-16v-80H48c-26.512 0-48-21.492-48-48v-256C0 21.988 21.488.5 48 .5h416c26.512 0 48 21.488 48 48v256c0 26.508-21.488 48-48 48H230.625l-91.313 91.313c-3 3-7.07 4.687-11.312 4.687zm-80-416c-8.836 0-16 7.164-16 16v256c0 8.836 7.164 16 16 16h80c8.836 0 16 7.164 16 16v57.375l68.688-68.688c3-3 7.07-4.687 11.312-4.687h240c8.836 0 16-7.164 16-16v-256c0-8.836-7.164-16-16-16zm0 0"}}),n("path",{attrs:{d:"M160 144.5c-17.672 0-32-14.328-32-32s14.328-32 32-32 32 14.328 32 32-14.328 32-32 32zm0 0M352 144.5c-17.672 0-32-14.328-32-32s14.328-32 32-32 32 14.328 32 32-14.328 32-32 32zm0 0M256 288.5c-52.996-.05-95.945-43.004-96-96 0-8.836 7.164-16 16-16s16 7.164 16 16c0 35.348 28.652 64 64 64s64-28.652 64-64c0-8.836 7.164-16 16-16s16 7.164 16 16c-.055 52.996-43.004 95.945-96 96zm0 0"}})]))}};function gt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function ht(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?gt(Object(n),!0).forEach((function(e){vt(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):gt(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function vt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function kt(t,e){if(null==t)return{};var n,o,r=yt(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}function yt(t,e){if(null==t)return{};var n,o,r={},a=Object.keys(t);for(o=0;o<a.length;o++)n=a[o],e.indexOf(n)>=0||(r[n]=t[n]);return r}var xt={functional:!0,render:function(t,e){var n=e._c,o=(e._v,e.data),r=e.children,a=void 0===r?[]:r,i=o["class"],s=o.staticClass,c=o.style,l=o.staticStyle,b=o.attrs,u=void 0===b?{}:b,p=kt(o,["class","staticClass","style","staticStyle","attrs"]);return n("svg",ht({class:[i,s],style:[c,l],attrs:Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512.001 512.001"},u)},p),a.concat([n("path",{attrs:{d:"M284.286 256.002L506.143 34.144c7.811-7.811 7.811-20.475 0-28.285-7.811-7.81-20.475-7.811-28.285 0L256 227.717 34.143 5.859c-7.811-7.811-20.475-7.811-28.285 0-7.81 7.811-7.811 20.475 0 28.285l221.857 221.857L5.858 477.859c-7.811 7.811-7.811 20.475 0 28.285a19.938 19.938 0 0014.143 5.857 19.94 19.94 0 0014.143-5.857L256 284.287l221.857 221.857c3.905 3.905 9.024 5.857 14.143 5.857s10.237-1.952 14.143-5.857c7.811-7.811 7.811-20.475 0-28.285L284.286 256.002z"}})]))}};function wt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function _t(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?wt(Object(n),!0).forEach((function(e){qt(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):wt(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function qt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var Ot={name:"VBotUI",components:{BoardHeader:x,BoardContent:Y,BoardAction:ot,BubbleIcon:mt,CloseIcon:xt,AppStyle:lt},props:{options:{type:Object,default:function(){return{}}}},data:function(){return{botActive:!0,messageData:[],defaultOptions:{inputPlaceholder:"Message",botTitle:"Chatbot",colorScheme:"#1b53d0",boardContentBg:"#fff",textColor:"#fff",bubbleBtnSize:56,animation:!0,botAvatarSize:32,botAvatarImg:"http://placehold.it/200x200",msgBubbleBgBot:"#f0f0f0",msgBubbleColorBot:"#000",msgBubbleBgUser:"#4356e0",msgBubbleColorUser:"#fff"}}},computed:{optionsMain:function(){return _t({},this.defaultOptions,{},this.options)},uiClasses:function(){var t=[];return this.optionsMain.animation&&t.push("qkb-bot-ui--animate"),t}},created:function(){l.$on("select-button-option",this.selectOption)},destroyed:function(){l.$off("select-button-option")},methods:{botToggle:function(){this.botActive=!this.botActive,this.botActive&&this.init()},init:function(){var t=this;u.getMessage().then((function(e){var n=_t({agent:"bot"},e,{avatar:"https://placehold.it/200x200"});t.disableInput=e.disableInput,t.messageData.push(n)}))},sendMessage:function(t){var e=this,n={agent:"customer",type:"text",text:t};this.messageData.push(n),u.createMessage(n).then((function(t){var n=_t({agent:"bot"},t,{avatar:"https://placehold.it/200x200"});e.disableInput=t.disableInput,e.messageData.push(n)}))},selectOption:function(t){}}},jt=Ot,Ct=(n("de67"),k(jt,r,a,!1,null,null,null)),St=Ct.exports,Pt={install:function(t,e){t.component("VueBotUI",St),e&&console.log("options",e)}},Mt=Pt;e["default"]=Mt}})}));
\ No newline at end of file
diff --git a/package.json b/package.json
index f629c61..1357509 100755
--- a/package.json
+++ b/package.json
@@ -14,8 +14,10 @@
   ],
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "BUILD_TYPE=modular vue-cli-service build",
+    "build": "vue-cli-service build --dest demo",
     "build-bundle": "vue-cli-service build --target lib --name vue-bot-ui ./src/vue-bot-ui.js",
+    "release": "standard-version && git push --follow-tags && npm publish",
+    "release:next": "standard-version --prerelease next && git push --follow-tags origin dev && npm publish --tag next",
     "lint": "vue-cli-service lint --fix"
   },
   "keywords": [
diff --git a/vue.config.js b/vue.config.js
index ab5cd28..30d742b 100755
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,6 +2,11 @@ module.exports = {
   devServer: {
     port: 1901
   },
+
+  css: {
+    extract: false
+  },
+
   chainWebpack: (config) => {
     const svgRule = config.module.rule('svg')