vue-intergrall-plugins 0.0.141 → 0.0.145

package/dist/vue-intergrall-plugins.ssr.js

@@ -6518,11 +6518,15 @@ var script$3 = {
     AnexoMensagem: AnexoMensagem,
     InteratividadeBotoes: InteratividadeBotoes
   },
-  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply"],
+  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao"],
   data: function data() {
     return {
       strTooltipAux: "",
       linkAux: "",
+      urlSticker: "",
+      urlFileName: "",
+      message: "",
+      reply: "reply",
       center: {},
       marker: {},
       infos: [],
@@ -6562,13 +6566,63 @@ var script$3 = {
       set: function set(msg) {
         return this.contentTooltip = msg;
       }
+    },
+    contentTooltipStar: function contentTooltipStar() {
+      var tooltipStar = "";
+
+      if (this.iniDialogo == 1) {
+        tooltipStar += this.dictionary['ini_sessao'] + "<br/>";
+        tooltipStar += this.dictionary['id_conversa'] + " - " + this.dialogoId + "<br/>";
+        tooltipStar += this.dictionary['origem_conversa'] + " - " + this.dialogoOrigem + "<br/>";
+        tooltipStar += this.dictionary['expiracao_sessao'] + " - " + formataTimezoneData(this.expSessao) + "<br/>";
+        return tooltipStar;
+      }
+
+      return tooltipStar;
     }
   },
   mounted: function mounted() {
     if (this.mapa) this.setMap();
     if (this.corMsg) this.setCorMsg();
+    this.setClasses();
+    this.validadeUrlToMsg();
   },
   methods: {
+    validadeUrlToMsg: function validadeUrlToMsg() {
+      this.message = this.msg;
+
+      if (this.validadeIfExistsSticker()) {
+        this.urlSticker = this.getUrlSticker();
+        this.urlFileName = this.getUrlFileName();
+        this.message = this.removeUrlStickerByString(this.urlSticker);
+      }
+    },
+    getUrlFileName: function getUrlFileName() {
+      var urlRegex = /(?<=\/)[^\/\?#]+(?=[^\/]*$)/;
+      var urlName = this.urlSticker.match(urlRegex)[0];
+      return urlName;
+    },
+    removeUrlStickerByString: function removeUrlStickerByString(url) {
+      var msg = this.message.replace("STICKER ".concat(url), '');
+      return msg;
+    },
+    getUrlSticker: function getUrlSticker() {
+      var urlRegex = /(https?:\/\/[^ ]*)/;
+      var url = this.message.match(urlRegex)[1];
+      return url;
+    },
+    validadeIfExistsSticker: function validadeIfExistsSticker() {
+      if (this.message && this.message.indexOf("STICKER https://smarters") === 0) {
+        return true;
+      }
+
+      return false;
+    },
+    setClasses: function setClasses() {
+      if (this.hasReply && (this.status == "C" || this.status == "T") && this.iniDialogo == 0) {
+        this.reply = "reply reply-with-2-icons";
+      }
+    },
     setCorMsg: function setCorMsg() {
       try {
         var root = document.documentElement;
@@ -6645,7 +6699,7 @@ var __vue_render__$3 = function __vue_render__() {
         "abrir-imagem": _vm.abrirImagem
       }
     })], 1);
-  }) : _vm._e(), _vm._ssrNode(" "), _vm.mapa ? _vm._ssrNode("<div class=\"mensagem-div-mapa\">", "</div>", [_c('GmapMap', {
+  }) : _vm._e(), _vm._ssrNode(" " + (_vm.urlSticker ? "<img" + _vm._ssrAttr("src", _vm.urlSticker) + _vm._ssrAttr("title", _vm.urlFileName) + " class=\"default-stick-size\">" : "<!---->") + " "), _vm.mapa ? _vm._ssrNode("<div class=\"mensagem-div-mapa\">", "</div>", [_c('GmapMap', {
     staticClass: "msg-mapa",
     attrs: {
       "id": "mapa_" + _vm.seq,
@@ -6663,7 +6717,7 @@ var __vue_render__$3 = function __vue_render__() {
         "icon": ['fas', 'map-marker-alt']
       }
     })], 2)], 2);
-  }), 0) : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" <p>" + _vm._s(_vm.formatMsg(_vm.msg)) + "</p> "), _vm.interatividade ? _c('InteratividadeBotoes', {
+  }), 0) : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" <p>" + _vm._s(_vm.formatMsg(_vm.message)) + "</p> "), _vm.interatividade ? _c('InteratividadeBotoes', {
     attrs: {
       "interatividade": _vm.interatividade
     }
@@ -6677,7 +6731,7 @@ var __vue_render__$3 = function __vue_render__() {
       name: "tippy",
       rawName: "v-tippy"
     }],
-    staticClass: "reply",
+    class: _vm.reply,
     attrs: {
       "content": _vm.msgReply ? _vm.msgReply : 'Fazer reenvio da mensagem'
     },
@@ -6695,6 +6749,25 @@ var __vue_render__$3 = function __vue_render__() {
       "name": "fade",
       "mode": "out-in"
     }
+  }, [_vm.iniDialogo == 1 ? _c('span', {
+    directives: [{
+      name: "tippy",
+      rawName: "v-tippy"
+    }],
+    key: "star-padrao",
+    staticClass: "star dourado",
+    attrs: {
+      "content": _vm.contentTooltipStar
+    }
+  }, [_c('fa-icon', {
+    attrs: {
+      "icon": ['fas', 'star']
+    }
+  })], 1) : _vm._e()]), _vm._ssrNode(" "), _c('transition', {
+    attrs: {
+      "name": "fade",
+      "mode": "out-in"
+    }
   }, [_vm.status == 'D' ? _c('span', {
     directives: [{
       name: "tippy",
@@ -6801,8 +6874,8 @@ var __vue_staticRenderFns__$3 = [];
 
 var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-8155b550_0", {
-    source: ":root{--message-color:#373737}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem{padding:14px 7px;border-radius:2.5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.85rem;word-break:break-word}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:30px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:#fff}.mensagem__principal>.mensagem .horario-envio{color:#fff}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:#fff}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros .check{display:none}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.7em}.info-mapa li.url{font-size:.7em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
+  inject("data-v-12c3ee62_0", {
+    source: ":root{--message-color:#373737}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem{padding:14px 7px;border-radius:2.5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:.85rem;word-break:break-word}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:.6rem;color:#67a332;width:.9rem;height:.9rem;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:.7rem}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:3px;font-size:.7rem}.star.dourado svg{color:gold}.default-stick-size{width:250px;height:auto}.horario-envio{margin-right:15px;font-size:.7rem;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:.6rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:#fff}.mensagem__principal>.mensagem .horario-envio{color:#fff}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:#fff}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros .check{display:none}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:.85em}.info-mapa li.address,.info-mapa li.url{font-size:.7em}.info-mapa li.url{font-size:.7em}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}",
     map: undefined,
     media: undefined
   });
@@ -6813,7 +6886,7 @@ var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$3 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$3 = "data-v-8155b550";
+var __vue_module_identifier__$3 = "data-v-12c3ee62";
 /* functional template */
 
 var __vue_is_functional_template__$3 = false;

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "vue-intergrall-plugins",
-  "version": "0.0.141",
-  "description": "",
-  "main": "dist/vue-intergrall-plugins.ssr.js",
-  "browser": "dist/vue-intergrall-plugins.esm.js",
-  "module": "dist/vue-intergrall-plugins.esm.js",
-  "unpkg": "dist/vue-intergrall-plugins.min.js",
-  "files": [
-    "dist/*",
-    "src/**/*.vue"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "serve": "vue-cli-service serve dev/serve.js",
-    "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
-    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
-    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^10.3.6",
-    "cross-env": "^7.0.3",
-    "cssnano": "^5.0.8",
-    "minimist": "^1.2.5",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.14",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "@popperjs/core": "^2.10.2",
-    "core-js": "^3.18.1",
-    "postcss": "^8.3.8",
-    "vue-clickaway": "^2.2.2",
-    "vue-select": "^3.13.0",
-    "vue-tippy": "^4.12.0",
-    "vue-toasted": "^1.1.28",
-    "vue2-google-maps": "^0.10.7"
-  },
-  "engines": {
-    "node": ">=12"
-  }
-}
+{
+  "name": "vue-intergrall-plugins",
+  "version": "0.0.145",
+  "description": "",
+  "main": "dist/vue-intergrall-plugins.ssr.js",
+  "browser": "dist/vue-intergrall-plugins.esm.js",
+  "module": "dist/vue-intergrall-plugins.esm.js",
+  "unpkg": "dist/vue-intergrall-plugins.min.js",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^10.3.6",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.0.8",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.58.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.14",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@popperjs/core": "^2.10.2",
+    "core-js": "^3.18.1",
+    "postcss": "^8.3.8",
+    "vue-clickaway": "^2.2.2",
+    "vue-select": "^3.13.0",
+    "vue-tippy": "^4.12.0",
+    "vue-toasted": "^1.1.28",
+    "vue2-google-maps": "^0.10.7"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

package/src/lib-components/Messages/ChatMessages.vue

@@ -6,6 +6,7 @@
           <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem"/>
         </div>
       </template>
+      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
       <div v-if="mapa" class="mensagem-div-mapa">
         <GmapMap
           :id="`mapa_${seq}`"
@@ -23,14 +24,17 @@
           </li>
         </ul>
       </div>
-      <p v-html="formatMsg(msg)"></p>
+      <p v-html="formatMsg(message)"></p>
       <InteratividadeBotoes 
         v-if="interatividade"
         :interatividade="interatividade"
       />
       <span class="horario-envio" v-text="horario"></span>
       <transition name="fade" mode="out-in">
-        <span class="reply" v-if="hasReply && (status == 'C' || status == 'T')" v-tippy :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'" @click="$emit('replyMsg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
+        <span :class="reply" v-if="hasReply && (status == 'C' || status == 'T')" v-tippy :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'" @click="$emit('replyMsg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
+      </transition>
+      <transition name="fade" mode="out-in">
+        <span class="star dourado" v-if="iniDialogo == 1" :content="contentTooltipStar" v-tippy key="star-padrao"> <fa-icon :icon="['fas', 'star']" /> </span>
       </transition>
       <transition name="fade" mode="out-in">
         <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
@@ -50,14 +54,19 @@
 <script>
 import AnexoMensagem from "./AnexoMensagem"
 import InteratividadeBotoes from "./InteratividadeBotoes"
+import { formataTimezoneData } from "../../services/textFormatting"
 
 export default {
   components: { AnexoMensagem, InteratividadeBotoes },
-  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply"],
+  props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao"],
   data(){
     return{
       strTooltipAux: "",
       linkAux: "",
+      urlSticker: "",
+      urlFileName: "",
+      message: "",
+      reply: "reply",
       center: {},
       marker: {},
       infos: [],
@@ -97,13 +106,59 @@ export default {
       set(msg){
         return this.contentTooltip = msg
       }
+    },
+    contentTooltipStar() {
+      let tooltipStar = "";
+      if(this.iniDialogo == 1){
+        tooltipStar += this.dictionary['ini_sessao']+"<br/>"
+        tooltipStar += this.dictionary['id_conversa']+" - "+this.dialogoId+"<br/>"
+        tooltipStar += this.dictionary['origem_conversa']+" - "+this.dialogoOrigem+"<br/>"
+        tooltipStar += this.dictionary['expiracao_sessao']+" - "+formataTimezoneData(this.expSessao)+"<br/>"
+        return tooltipStar
+      }
+      return tooltipStar
     }
   },
   mounted() {
     if(this.mapa) this.setMap()
     if(this.corMsg) this.setCorMsg()
+    this.setClasses()
+    this.validadeUrlToMsg()
   },
   methods: {
+    validadeUrlToMsg(){
+      this.message = this.msg
+      if(this.validadeIfExistsSticker()){
+        this.urlSticker = this.getUrlSticker()
+        this.urlFileName = this.getUrlFileName()
+        this.message = this.removeUrlStickerByString(this.urlSticker)
+      }
+    },
+    getUrlFileName(){
+      let urlRegex = /(?<=\/)[^\/\?#]+(?=[^\/]*$)/;
+      let urlName = this.urlSticker.match(urlRegex)[0];
+      return urlName;
+    },
+    removeUrlStickerByString(url){
+      let msg = this.message.replace(`KSTICKERK ${url}`, '')
+      return msg;
+    },
+    getUrlSticker(){
+      let urlRegex = /(https?:\/\/[^ ]*)/;
+      let url = this.message.match(urlRegex)[1];
+      return url;
+    },
+    validadeIfExistsSticker(){
+      if(this.message && this.message.indexOf("KSTICKERK https://smarters") === 0){
+        return true;
+      }
+      return false;
+    },
+    setClasses(){
+      if(this.hasReply && (this.status == "C" || this.status == "T") && this.iniDialogo == 0){
+        this.reply = "reply reply-with-2-icons"
+      }
+    },
     setCorMsg() {
       try {
         const root = document.documentElement
@@ -201,7 +256,7 @@ export default {
   .reply {
     cursor: pointer;
     position: absolute;
-    right: 30px;
+    right: 53px;
     bottom: 5px;
     font-size: .6rem;
     color: #67a332;
@@ -217,6 +272,9 @@ export default {
     margin-top: -1px;
     margin-right: -1px;
   }
+  .reply-with-2-icons{
+    right: 30px;
+  }
 
   .check{
     cursor: pointer;
@@ -240,7 +298,20 @@ export default {
   .check.preto, .check.preto svg{
     color: #666
   }
-
+  .star{
+    cursor: pointer;
+    position: absolute;
+    right: 30px;
+    bottom: 3px;
+    font-size: 0.7rem;
+  }
+  .star.dourado svg{
+    color: gold
+  }
+  .default-stick-size{
+    width: 250px;
+    height: auto;
+  }
   .horario-envio {
     margin-right: 15px;
     font-size: 0.7rem;