vue-intergrall-plugins 0.0.288 → 0.0.290

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

@@ -1,715 +1,716 @@
-<template>
-  <div 
-    :class="'mensagem__'+origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`"
-  >
-    <InteratividadeFormulario 
-        v-if="interatividade && validateInterativity()"
-        :interatividade="interatividade"
-        :dominio="dominio"
-        :infoCanal="infoCanalTeste"
-        :anexos="anexos"
-        :dictionary="dictionary"
-      />
-    <div 
-      v-else 
-      class="mensagem" 
-      :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}"
-    >
-      <!-- Estilo da mensagem do tipo reply (que foi respondida) -->
-      <div v-if="isReply && replyMessage" class="mensagem-reply" :class="`message-reply-${origem}`">
-        <p v-if="replyMessage" v-html="replyMessage"></p>
-        <span v-else class="mensagem-reply-vazia">
-          <fa-icon :icon="['fas', 'times']" v-if="showReplyIcon" />
-          {{ defaultReplyMessage ? defaultReplyMessage : dictionary.mensagem_reply_padrao }}
-        </span>
-      </div>
-      <!-- Anexos -->
-      <template v-if="anexos && anexos.length">
-        <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
-          <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector" :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
-        </div>
-      </template>
-      <!-- sticker -->
-      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
-      <!-- Mapa -->
-      <div v-if="mapa" class="mensagem-div-mapa">
-        <GmapMap
-          :id="`mapa_${seq}`"
-          class="msg-mapa"
-          :center="center"
-          :zoom="17"
-          :options="mapOptions"
-         >
-          <GmapMarker :position="marker" />
-        </GmapMap>
-        <ul class="info-mapa" v-if="infos.length">
-          <li v-for="(info, index) in infos" :key="index" :class="info.classe">
-            <template v-if="!info.link"> {{ info.value }} </template>
-            <a v-else :href="info.value" @click.prevent="abrirPopup(info.value)"> {{ info.textLink }} <fa-icon :icon="['fas', 'map-marker-alt']" /> </a>
-          </li>
-        </ul>
-      </div>
-      <!-- Preview do link -->
-      <LinkPreview v-if="link && !mapa && status != 'O'" :message="message" />
-      <!-- Mensagem -->
-      <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
-      <!-- Botoes da interatividade -->
-      <InteratividadeBotoes 
-        v-if="interatividade"
-        :interatividade="interatividade"
-      />
-      <!-- Horario da mensagem -->
-      <span class="horario-envio" v-text="horario"></span>
-      <!-- Reenviar mensagem -->
-      <transition name="fade" mode="out-in">
-        <span :class="reply" v-if="hasReply && (status == 'C' || status == 'T' || status == 'ERRO')" 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" v-if="validadeSeq">
-        <span class="star dourado" v-if="iniDialogo > 0" :content="contentTooltipStar" v-tippy key="star-padrao-dourado">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path fill="#FFD700" d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/>
-          </svg>
-        </span>
-        <span class="star cinza" v-if="iniDialogo == 0" :content="contentTooltipStar" v-tippy key="star-padrao-cinza">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path fill="#808080" d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/>
-          </svg>
-        </span>
-      </transition>
-      <!-- Status da mensagem -->
-      <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>
-        <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza"> <fa-icon :icon="['fas', 'check']" /> </span>
-        <span class="check preto" v-else-if="status == 'G'" :content="contentTooltip" v-tippy key="check-preto"> <fa-icon :icon="['fas', 'check']" /> </span>
-        <span class="check preto" v-else-if="status == 'E'" :content="contentTooltip" v-tippy key="double-check-preto"> <fa-icon :icon="['fas', 'check-double']" /> </span>
-        <span class="check visualizado" v-else-if="status == 'L'" :content="contentTooltip" v-tippy key="double-check-visualizado"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- Status finalizador -->
-        <span class="check vermelho" v-else-if="status == 'C' || status == 'ERRO'" :content="contentTooltip" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- Status finalizador -->
-        <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
-        <span class="check vermelho" v-else-if="status == 'O'" :content="contentTooltip" v-tippy key="deleted"> <fa-icon :icon="['fas', 'times']" /> </span> <!-- Status de mensagem deletada -->
-      </transition>
-      <!-- Autor da mensagem -->
-      <span class="autor-mensagem" v-html="autor"></span>
-      <!-- Menu de opcoes da mensagem -->
-      <div class="menu-primario" :class="origem" v-if="showMenu">
-        <!-- <span class="menu-mensagem" @click="toggleIsMenuOpen" v-tippy :content="dictionary.tit_mais_msg">
-          <fa-icon :icon="['fas', 'chevron-down']" />
-        </span> -->
-        <span class="menu-mensagem" @click="responderMensagemHandler" v-tippy :content="dictionary.tit_responder_msg">
-          <fa-icon :icon="['fas', 'reply']" />
-        </span>
-      </div>
-      <transition name="fade" mode="out-in" v-if="isMenuOpen">
-        <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
-          <li @click="responderMensagemHandler">
-            <span> {{ dictionary.tit_responder_msg }} </span>
-          </li>
-        </ul>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script>
-import AnexoMensagem from "./AnexoMensagem"
-import InteratividadeBotoes from "./InteratividadeBotoes"
-import InteratividadeFormulario from "./InteratividadeFormulario"
-import { formataTimezoneData } from "../../services/textFormatting"
-import LinkPreview from './LinkPreview'
-import { mixin as clickaway } from 'vue-clickaway'
-
-export default {
-  components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
-  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", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon", "showControlFiles", "showMenu"],
-  created() {
-    if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
-  },
-  mixins: [clickaway],
-  data(){
-    return{
-      strTooltipAux: "",
-      linkAux: "",
-      urlSticker: "",
-      urlFileName: "",
-      message: "",
-      reply: "reply",
-      center: {},
-      marker: {},
-      infos: [],
-      infoCanalTeste: {PRAZO: "2022-05-05", SITUACAO: {cod: "3", desc: "Em analise pelo fornecedor", cor: "#03A64A"}, DATA_ABERTURA: "2022-05-03 09:43:43"},
-      mapOptions: {
-        zoomControl: true,
-        mapTypeControl: false,
-        scaleControl: false,
-        streetViewControl: false,
-        rotateControl: false,
-        fullscreenControl: false,
-        disableDefaultUI: false
-      },
-      isMenuOpen: false,
-      showMenuOptions: false
-    }
-  },
-  computed: {
-    hrefAnexo(){
-      if(this.docAnexo){
-        if(this.tipoDoc == "erro"){
-          return this.hrefAnexo = "#"
-        }else{
-          return this.docAnexo
-        }
-      }
-    },
-    randomizeValue() {
-      return `${(Math.floor(Math.random() * 7770))}${Date.now()}`
-    },
-    contentTooltip: {
-      get(){
-        if(this.status && !this.msgTooltip){
-          const msgStatus = "msg_status_"+this.status
-          return this.strTooltipAux = this.dictionary[msgStatus]
-        }else if(this.status && this.msgTooltip){
-          return this.strTooltipAux = this.msgTooltip
-        }
-      },
-      set(msg){
-        return this.contentTooltip = msg
-      }
-    },
-    contentTooltipStar() {
-      let tooltipStar = "";
-      if(this.iniDialogo == 1){
-        tooltipStar += this.dictionary['ini_sessao']+"<br/>"
-      }
-      else {
-        tooltipStar += this.dictionary['ini_sessao_padrao']+"<br/>"
-      }
-      tooltipStar += this.dialogoId ? this.dictionary['id_conversa']+" - "+ this.dialogoId +"<br/>" : ""
-      tooltipStar += this.dialogoOrigem ? this.dictionary['origem_conversa']+" - "+ this.dialogoOrigem +"<br/>" : ""
-      tooltipStar += this.expSessao ? this.dictionary['expiracao_sessao']+" - "+ formataTimezoneData(this.expSessao) +"<br/>" : ""
-      return tooltipStar
-    },
-    validadeSeq(){
-      if(this.seq && this.seq.substring(0, 2) == "HW") return true
-      this.reply = "reply reply-with-2-icons"
-      return false;
-    }
-  },
-  mounted() {
-    if(this.mapa) this.setMap()
-    if(this.corMsg) this.setCorMsg()
-    this.validadeUrlToMsg()
-  },
-  methods: {
-    closeMenu() {
-      this.isMenuOpen = false
-    },
-    toggleIsMenuOpen() {
-      this.isMenuOpen = !this.isMenuOpen
-    },
-    responderMensagemHandler() {
-      if(this.isMenuOpen) this.closeMenu()
-      this.$emit('responder-mensagem', {
-        messageIndex: this.messageIndex,
-        autor: this.autor,
-        origem: this.origem,
-        msg: this.msg,
-        anexo: this.anexo,
-        imgAnexo: this.imgAnexo,
-        tipoDoc: this.tipoDoc,
-        docAnexo: this.docAnexo,
-        nomeArquivo: this.nomeArquivo,
-        audio: this.audio,
-        video: this.video,
-        seq: this.seq,
-        mapa: this.mapa,
-        anexos: this.anexos,
-        interatividade: this.interatividade,
-        referenceSelector: this.referenceSelector,
-      })
-    },
-    validateInterativity(){
-      try {
-        if(this.interatividade && (this.interatividade.formulario && this.interatividade.formulario.length) || (this.interatividade.list && this.interatividade.tipo == 'listItem')){
-          return true;
-        }
-        return false;
-      } catch (error) {
-        return false;
-      }
-    },
-    validadeUrlToMsg(){
-      try {
-        this.message = this.msg
-        if(this.validadeIfExistsSticker()){
-          this.urlSticker = this.getUrlSticker()
-          this.urlFileName = this.getUrlFileName()
-          this.message = this.removeUrlStickerByString(this.urlSticker)
-        }
-      } catch (error) {
-        console.error("Error validating url to msg: ", error)
-      }
-    },
-    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://") === 0) return true
-      return false
-    },
-    setCorMsg() {
-      try {
-        const root = document.documentElement
-        root.style.setProperty('--message-color', this.corMsg)
-        this.adjustFontColor(this.corMsg)
-      }catch(e) {
-        console.error("Erro ao atribuir a cor as mensagens")
-        console.error(e)
-      }
-    },
-    setMap() {
-      let objMapa = typeof this.mapa === "string" ? JSON.parse(`${this.mapa}`) : this.mapa
-      if(objMapa.latitude && objMapa.longitude) {
-        objMapa.latitude = parseFloat(objMapa.latitude)
-        objMapa.longitude = parseFloat(objMapa.longitude)
-
-        this.center.lat = objMapa.latitude
-        this.center.lng = objMapa.longitude
-
-        this.marker.lat = objMapa.latitude
-        this.marker.lng = objMapa.longitude
-
-        this.infos.push(
-          { classe: "title", value: objMapa.name },
-          { classe: "address", value: objMapa.address },
-          { classe: "url", value: `https://www.google.com/maps/search/?api=1&query=${this.marker.lat},${this.marker.lng}`, link: true, textLink: this.dictionary.abrir_mapa }
-        )
-      }
-    },
-    abrirPopup(url) {
-      window.open(url, "map-popup", "width=auto,height=auto")
-    },
-    abrirImagem(imagem) {
-      this.$emit("abrir-imagem", imagem)
-    },
-    adjustFontColor(cor) {
-      try {
-        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor);
-
-        if(!result) return
-
-        var r = parseInt(result[1], 16);
-        var g = parseInt(result[2], 16);
-        var b = parseInt(result[3], 16);
-
-        r /= 255, g /= 255, b /= 255;
-        var max = Math.max(r, g, b), min = Math.min(r, g, b);
-        var h, s, l = (max + min) / 2;
-
-        if(max == min){
-            h = s = 0; // achromatic
-        } else {
-            var d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-            switch(max) {
-                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-                case g: h = (b - r) / d + 2; break;
-                case b: h = (r - g) / d + 4; break;
-            }
-            h /= 6;
-        }
-
-        s = s*100;
-        s = Math.round(s);
-        l = l*100;
-        l = Math.round(l);
-        h = Math.round(360*h);
-        
-        const root = document.documentElement
-        root.style.setProperty('--text-color', l <= 50 ? "#FFF" : "#111B21")
-        root.style.setProperty('--files-bg', l <= 50 ? "rgba(255, 255, 255, 0.1)" : "rgba(100, 100, 100, 0.1)")
-        root.style.setProperty('--files-bg-hover', l <= 50 ? "rgba(255, 255, 255, 0.3)" : "rgba(100, 100, 100, 0.3)")
-      }catch(e) {
-        console.error("Erro ao ajustar a cor da mensagem: ", e)
-      }
-    },
-    formatMsg(msg) {
-      if(this.status == 'O') return this.dictionary.msg_excluida ? this.dictionary.msg_excluida : 'MENSAGEM DELETADA'
-      const regex = /(\n|&nbsp;)/g
-      if(regex.test(msg)) msg = msg.replace(regex, "<br>")
-      return msg
-    },
-  }
-}
-</script>
-
-<style>
-  :root {
-    --message-color: #373737;
-    --text-color: #FFF;
-    --files-bg: rgba(255, 255, 255, 0.1);
-    --files-bg-hover: rgba(255, 255, 255, 0.1);
-
-    --light: 80;
-    --threshold: 60;
-  }
-
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .5s;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-
-  .mensagem-reply {
-    padding: 5px 10px;
-    font-size: .75rem;
-    color: #666;
-    transition: background-color 150ms ease-in-out;
-    border-radius: 5px;
-    margin: 5px 0;
-    overflow: hidden;
-    max-width: 100%;
-  }
-  .mensagem-reply p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .message-reply-principal {
-    border-left: 3px solid transparent;
-    background-color: rgba(100, 100, 100, 0.1)
-  }
-  .message-reply-principal:hover {
-    background-color: rgba(100, 100, 100, 0.2);
-  }
-
-  .message-reply-outros {
-    background-color: rgb(245, 245, 245);
-    border-left: 3px solid var(--message-color);
-  }
-  .message-reply-outros:hover {
-    background-color: rgb(235, 235, 235)
-  }
-
-  .mensagem-reply-vazia {
-    display: flex;
-    align-items: center;
-  }
-  .mensagem-reply-vazia svg {
-    margin-right: 5px;
-    color: #ba181b;
-  }
-
-  .mensagem {
-    padding: 20px 7px 14px 7px;
-    border-radius: 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: .75rem;
-    word-break: break-word;
-
-    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-  .mensagem.max-w-60 {
-    max-width: 60%;
-  }
-  .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:hover .menu-primario {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .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: 0.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: 2px;
-    font-size: 0.4rem;
-    width: 11.2px;
-  }
-  .default-stick-size{
-    width: 180px;
-    height: auto;
-  }
-  .horario-envio {
-    margin-right: 15px;
-    font-size: 0.7rem;
-    position: absolute;
-    left: 10px;
-    bottom: 2px;
-  }
-
-  .autor-mensagem {
-    position: absolute;
-    font-size: 0.6rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 90%;
-    font-weight: bold;
-    top: 2px;
-  }
-
-  .menu-primario {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 150ms ease-in-out;
-    position: absolute;
-    font-size: 0.7rem;
-    top: 3px;
-    display: flex;
-    gap: 5px;
-    padding: 2px 4px;
-  }
-  .menu-primario.principal {
-    left: 4px;
-    color: var(--text-color);
-    background-color: var(--message-color);
-  }
-  .menu-primario.outros {
-    right: 4px;
-    color: var(--text-color);
-    background-color: #FFF;
-  }
-
-  .menu-primario.outros > span:nth-child(1) {
-    order: 10;
-  }
-
-  .menu-mensagem {
-    cursor: pointer;
-    padding: 1px;
-  }
-
-  .menu-flutuante {
-    background-color: #FFF;
-    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 10px;
-    position: absolute;
-    top: 20px;
-    width: 120px;
-    min-height: 50px;
-    height: 50px;
-    max-height: 50px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    z-index: 1;
-  }
-
-  .menu-flutuante.principal {
-    left: 3px
-  }
-
-  .menu-flutuante.outros {
-    right: 3px
-  }
-
-  .menu-flutuante li {
-    transition: background-color 300ms ease-in-out;
-    width: 100%;
-    cursor: pointer;
-    padding: 5px 10px;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-flutuante li:hover {
-    background-color: #e9e9e9;
-  }
-
-  /* Principal */
-  .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: var(--text-color);
-  }
-
-  .mensagem__principal > .mensagem .horario-envio {
-    color: var(--text-color);
-  }
-  .mensagem__principal > .mensagem .autor-mensagem { 
-    right: 5px;
-    color: var(--text-color);
-  }
-  /* Outros */
-  .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;
-  }
-  /* Mapa */
-  .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: .85em
-  }
-  .info-mapa li.url {
-    font-size: .85em
-  }
-
-  .tooltip-list {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-  }
-
-</style>
+<template>
+  <div 
+    :class="'mensagem__'+origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`"
+  >
+    <InteratividadeFormulario 
+        v-if="interatividade && validateInterativity()"
+        :interatividade="interatividade"
+        :dominio="dominio"
+        :infoCanal="infoCanalTeste"
+        :anexos="anexos"
+        :dictionary="dictionary"
+      />
+    <div 
+      v-else 
+      class="mensagem" 
+      :class="{mapa, 'hist-msg' : histMsg, 'max-w-60' : link && !mapa}"
+    >
+      <!-- Estilo da mensagem do tipo reply (que foi respondida) -->
+      <div v-if="isReply && replyMessage" class="mensagem-reply" :class="`message-reply-${origem}`">
+        <p v-if="replyMessage" v-html="replyMessage"></p>
+        <span v-else class="mensagem-reply-vazia">
+          <fa-icon :icon="['fas', 'times']" v-if="showReplyIcon" />
+          {{ defaultReplyMessage ? defaultReplyMessage : dictionary.mensagem_reply_padrao }}
+        </span>
+      </div>
+      <!-- Anexos -->
+      <template v-if="anexos && anexos.length">
+        <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
+          <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector" :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
+        </div>
+      </template>
+      <!-- sticker -->
+      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
+      <!-- Mapa -->
+      <div v-if="mapa" class="mensagem-div-mapa">
+        <GmapMap
+          :id="`mapa_${seq}`"
+          class="msg-mapa"
+          :center="center"
+          :zoom="17"
+          :options="mapOptions"
+         >
+          <GmapMarker :position="marker" />
+        </GmapMap>
+        <ul class="info-mapa" v-if="infos.length">
+          <li v-for="(info, index) in infos" :key="index" :class="info.classe">
+            <template v-if="!info.link"> {{ info.value }} </template>
+            <a v-else :href="info.value" @click.prevent="abrirPopup(info.value)"> {{ info.textLink }} <fa-icon :icon="['fas', 'map-marker-alt']" /> </a>
+          </li>
+        </ul>
+      </div>
+      <!-- Preview do link -->
+      <LinkPreview v-if="link && !mapa && status != 'O'" :message="message" />
+      <!-- Mensagem -->
+      <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
+      <!-- Botoes da interatividade -->
+      <InteratividadeBotoes 
+        v-if="interatividade"
+        :interatividade="interatividade"
+      />
+      <!-- Horario da mensagem -->
+      <span class="horario-envio" v-text="horario"></span>
+      <!-- Reenviar mensagem -->
+      <transition name="fade" mode="out-in">
+        <span :class="reply" v-if="hasReply && (status == 'C' || status == 'T' || status == 'ERRO')" 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" v-if="validadeSeq">
+        <span class="star dourado" v-if="iniDialogo > 0" :content="contentTooltipStar" v-tippy key="star-padrao-dourado">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path fill="#FFD700" d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/>
+          </svg>
+        </span>
+        <span class="star cinza" v-if="iniDialogo == 0" :content="contentTooltipStar" v-tippy key="star-padrao-cinza">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path fill="#808080" d="M224 122.8c-72.7 0-131.8 59.1-131.9 131.8 0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6 49.9-13.1 4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8 0-35.2-15.2-68.3-40.1-93.2-25-25-58-38.7-93.2-38.7zm77.5 188.4c-3.3 9.3-19.1 17.7-26.7 18.8-12.6 1.9-22.4.9-47.5-9.9-39.7-17.2-65.7-57.2-67.7-59.8-2-2.6-16.2-21.5-16.2-41s10.2-29.1 13.9-33.1c3.6-4 7.9-5 10.6-5 2.6 0 5.3 0 7.6.1 2.4.1 5.7-.9 8.9 6.8 3.3 7.9 11.2 27.4 12.2 29.4s1.7 4.3.3 6.9c-7.6 15.2-15.7 14.6-11.6 21.6 15.3 26.3 30.6 35.4 53.9 47.1 4 2 6.3 1.7 8.6-1 2.3-2.6 9.9-11.6 12.5-15.5 2.6-4 5.3-3.3 8.9-2 3.6 1.3 23.1 10.9 27.1 12.9s6.6 3 7.6 4.6c.9 1.9.9 9.9-2.4 19.1zM400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM223.9 413.2c-26.6 0-52.7-6.7-75.8-19.3L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5 29.9 30 47.9 69.8 47.9 112.2 0 87.4-72.7 158.5-160.1 158.5z"/>
+          </svg>
+        </span>
+      </transition>
+      <!-- Status da mensagem -->
+      <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>
+        <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza"> <fa-icon :icon="['fas', 'check']" /> </span>
+        <span class="check preto" v-else-if="status == 'G'" :content="contentTooltip" v-tippy key="check-preto"> <fa-icon :icon="['fas', 'check']" /> </span>
+        <span class="check preto" v-else-if="status == 'E'" :content="contentTooltip" v-tippy key="double-check-preto"> <fa-icon :icon="['fas', 'check-double']" /> </span>
+        <span class="check visualizado" v-else-if="status == 'L'" :content="contentTooltip" v-tippy key="double-check-visualizado"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- Status finalizador -->
+        <span class="check vermelho" v-else-if="status == 'C' || status == 'ERRO'" :content="contentTooltip" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- Status finalizador -->
+        <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
+        <span class="check vermelho" v-else-if="status == 'O'" :content="contentTooltip" v-tippy key="deleted"> <fa-icon :icon="['fas', 'times']" /> </span> <!-- Status de mensagem deletada -->
+      </transition>
+      <!-- Autor da mensagem -->
+      <span class="autor-mensagem" v-html="autor"></span>
+      <!-- Menu de opcoes da mensagem -->
+      <div class="menu-primario" :class="origem" v-if="showMenu">
+        <!-- <span class="menu-mensagem" @click="toggleIsMenuOpen" v-tippy :content="dictionary.tit_mais_msg">
+          <fa-icon :icon="['fas', 'chevron-down']" />
+        </span> -->
+        <span class="menu-mensagem" @click="responderMensagemHandler" v-tippy :content="dictionary.tit_responder_msg">
+          <fa-icon :icon="['fas', 'reply']" />
+        </span>
+      </div>
+      <transition name="fade" mode="out-in" v-if="isMenuOpen">
+        <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
+          <li @click="responderMensagemHandler">
+            <span> {{ dictionary.tit_responder_msg }} </span>
+          </li>
+        </ul>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import AnexoMensagem from "./AnexoMensagem"
+import InteratividadeBotoes from "./InteratividadeBotoes"
+import InteratividadeFormulario from "./InteratividadeFormulario"
+import { formataTimezoneData } from "../../services/textFormatting"
+import LinkPreview from './LinkPreview'
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+  components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
+  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", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon", "showControlFiles", "showMenu", "id_ext_msg"],
+  created() {
+    if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
+  },
+  mixins: [clickaway],
+  data(){
+    return{
+      strTooltipAux: "",
+      linkAux: "",
+      urlSticker: "",
+      urlFileName: "",
+      message: "",
+      reply: "reply",
+      center: {},
+      marker: {},
+      infos: [],
+      infoCanalTeste: {PRAZO: "2022-05-05", SITUACAO: {cod: "3", desc: "Em analise pelo fornecedor", cor: "#03A64A"}, DATA_ABERTURA: "2022-05-03 09:43:43"},
+      mapOptions: {
+        zoomControl: true,
+        mapTypeControl: false,
+        scaleControl: false,
+        streetViewControl: false,
+        rotateControl: false,
+        fullscreenControl: false,
+        disableDefaultUI: false
+      },
+      isMenuOpen: false,
+      showMenuOptions: false
+    }
+  },
+  computed: {
+    hrefAnexo(){
+      if(this.docAnexo){
+        if(this.tipoDoc == "erro"){
+          return this.hrefAnexo = "#"
+        }else{
+          return this.docAnexo
+        }
+      }
+    },
+    randomizeValue() {
+      return `${(Math.floor(Math.random() * 7770))}${Date.now()}`
+    },
+    contentTooltip: {
+      get(){
+        if(this.status && !this.msgTooltip){
+          const msgStatus = "msg_status_"+this.status
+          return this.strTooltipAux = this.dictionary[msgStatus]
+        }else if(this.status && this.msgTooltip){
+          return this.strTooltipAux = this.msgTooltip
+        }
+      },
+      set(msg){
+        return this.contentTooltip = msg
+      }
+    },
+    contentTooltipStar() {
+      let tooltipStar = "";
+      if(this.iniDialogo == 1){
+        tooltipStar += this.dictionary['ini_sessao']+"<br/>"
+      }
+      else {
+        tooltipStar += this.dictionary['ini_sessao_padrao']+"<br/>"
+      }
+      tooltipStar += this.dialogoId ? this.dictionary['id_conversa']+" - "+ this.dialogoId +"<br/>" : ""
+      tooltipStar += this.dialogoOrigem ? this.dictionary['origem_conversa']+" - "+ this.dialogoOrigem +"<br/>" : ""
+      tooltipStar += this.expSessao ? this.dictionary['expiracao_sessao']+" - "+ formataTimezoneData(this.expSessao) +"<br/>" : ""
+      return tooltipStar
+    },
+    validadeSeq(){
+      if(this.seq && this.seq.substring(0, 2) == "HW") return true
+      this.reply = "reply reply-with-2-icons"
+      return false;
+    }
+  },
+  mounted() {
+    if(this.mapa) this.setMap()
+    if(this.corMsg) this.setCorMsg()
+    this.validadeUrlToMsg()
+  },
+  methods: {
+    closeMenu() {
+      this.isMenuOpen = false
+    },
+    toggleIsMenuOpen() {
+      this.isMenuOpen = !this.isMenuOpen
+    },
+    responderMensagemHandler() {
+      if(this.isMenuOpen) this.closeMenu()
+      this.$emit('responder-mensagem', {
+        messageIndex: this.messageIndex,
+        autor: this.autor,
+        origem: this.origem,
+        msg: this.msg,
+        anexo: this.anexo,
+        imgAnexo: this.imgAnexo,
+        tipoDoc: this.tipoDoc,
+        docAnexo: this.docAnexo,
+        nomeArquivo: this.nomeArquivo,
+        audio: this.audio,
+        video: this.video,
+        seq: this.seq,
+        mapa: this.mapa,
+        anexos: this.anexos,
+        interatividade: this.interatividade,
+        referenceSelector: this.referenceSelector,
+        id_ext_msg: this.id_ext_msg
+      })
+    },
+    validateInterativity(){
+      try {
+        if(this.interatividade && (this.interatividade.formulario && this.interatividade.formulario.length) || (this.interatividade.list && this.interatividade.tipo == 'listItem')){
+          return true;
+        }
+        return false;
+      } catch (error) {
+        return false;
+      }
+    },
+    validadeUrlToMsg(){
+      try {
+        this.message = this.msg
+        if(this.validadeIfExistsSticker()){
+          this.urlSticker = this.getUrlSticker()
+          this.urlFileName = this.getUrlFileName()
+          this.message = this.removeUrlStickerByString(this.urlSticker)
+        }
+      } catch (error) {
+        console.error("Error validating url to msg: ", error)
+      }
+    },
+    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://") === 0) return true
+      return false
+    },
+    setCorMsg() {
+      try {
+        const root = document.documentElement
+        root.style.setProperty('--message-color', this.corMsg)
+        this.adjustFontColor(this.corMsg)
+      }catch(e) {
+        console.error("Erro ao atribuir a cor as mensagens")
+        console.error(e)
+      }
+    },
+    setMap() {
+      let objMapa = typeof this.mapa === "string" ? JSON.parse(`${this.mapa}`) : this.mapa
+      if(objMapa.latitude && objMapa.longitude) {
+        objMapa.latitude = parseFloat(objMapa.latitude)
+        objMapa.longitude = parseFloat(objMapa.longitude)
+
+        this.center.lat = objMapa.latitude
+        this.center.lng = objMapa.longitude
+
+        this.marker.lat = objMapa.latitude
+        this.marker.lng = objMapa.longitude
+
+        this.infos.push(
+          { classe: "title", value: objMapa.name },
+          { classe: "address", value: objMapa.address },
+          { classe: "url", value: `https://www.google.com/maps/search/?api=1&query=${this.marker.lat},${this.marker.lng}`, link: true, textLink: this.dictionary.abrir_mapa }
+        )
+      }
+    },
+    abrirPopup(url) {
+      window.open(url, "map-popup", "width=auto,height=auto")
+    },
+    abrirImagem(imagem) {
+      this.$emit("abrir-imagem", imagem)
+    },
+    adjustFontColor(cor) {
+      try {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor);
+
+        if(!result) return
+
+        var r = parseInt(result[1], 16);
+        var g = parseInt(result[2], 16);
+        var b = parseInt(result[3], 16);
+
+        r /= 255, g /= 255, b /= 255;
+        var max = Math.max(r, g, b), min = Math.min(r, g, b);
+        var h, s, l = (max + min) / 2;
+
+        if(max == min){
+            h = s = 0; // achromatic
+        } else {
+            var d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch(max) {
+                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                case g: h = (b - r) / d + 2; break;
+                case b: h = (r - g) / d + 4; break;
+            }
+            h /= 6;
+        }
+
+        s = s*100;
+        s = Math.round(s);
+        l = l*100;
+        l = Math.round(l);
+        h = Math.round(360*h);
+        
+        const root = document.documentElement
+        root.style.setProperty('--text-color', l <= 50 ? "#FFF" : "#111B21")
+        root.style.setProperty('--files-bg', l <= 50 ? "rgba(255, 255, 255, 0.1)" : "rgba(100, 100, 100, 0.1)")
+        root.style.setProperty('--files-bg-hover', l <= 50 ? "rgba(255, 255, 255, 0.3)" : "rgba(100, 100, 100, 0.3)")
+      }catch(e) {
+        console.error("Erro ao ajustar a cor da mensagem: ", e)
+      }
+    },
+    formatMsg(msg) {
+      if(this.status == 'O') return this.dictionary.msg_excluida ? this.dictionary.msg_excluida : 'MENSAGEM DELETADA'
+      const regex = /(\n|&nbsp;)/g
+      if(regex.test(msg)) msg = msg.replace(regex, "<br>")
+      return msg
+    },
+  }
+}
+</script>
+
+<style>
+  :root {
+    --message-color: #373737;
+    --text-color: #FFF;
+    --files-bg: rgba(255, 255, 255, 0.1);
+    --files-bg-hover: rgba(255, 255, 255, 0.1);
+
+    --light: 80;
+    --threshold: 60;
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+
+  .mensagem-reply {
+    padding: 5px 10px;
+    font-size: .75rem;
+    color: #666;
+    transition: background-color 150ms ease-in-out;
+    border-radius: 5px;
+    margin: 5px 0;
+    overflow: hidden;
+    max-width: 100%;
+  }
+  .mensagem-reply p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .message-reply-principal {
+    border-left: 3px solid transparent;
+    background-color: rgba(100, 100, 100, 0.1)
+  }
+  .message-reply-principal:hover {
+    background-color: rgba(100, 100, 100, 0.2);
+  }
+
+  .message-reply-outros {
+    background-color: rgb(245, 245, 245);
+    border-left: 3px solid var(--message-color);
+  }
+  .message-reply-outros:hover {
+    background-color: rgb(235, 235, 235)
+  }
+
+  .mensagem-reply-vazia {
+    display: flex;
+    align-items: center;
+  }
+  .mensagem-reply-vazia svg {
+    margin-right: 5px;
+    color: #ba181b;
+  }
+
+  .mensagem {
+    padding: 20px 7px 14px 7px;
+    border-radius: 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: .75rem;
+    word-break: break-word;
+
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+  .mensagem.max-w-60 {
+    max-width: 60%;
+  }
+  .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:hover .menu-primario {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .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: 0.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: 2px;
+    font-size: 0.4rem;
+    width: 11.2px;
+  }
+  .default-stick-size{
+    width: 180px;
+    height: auto;
+  }
+  .horario-envio {
+    margin-right: 15px;
+    font-size: 0.7rem;
+    position: absolute;
+    left: 10px;
+    bottom: 2px;
+  }
+
+  .autor-mensagem {
+    position: absolute;
+    font-size: 0.6rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 90%;
+    font-weight: bold;
+    top: 2px;
+  }
+
+  .menu-primario {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    position: absolute;
+    font-size: 0.7rem;
+    top: 3px;
+    display: flex;
+    gap: 5px;
+    padding: 2px 4px;
+  }
+  .menu-primario.principal {
+    left: 4px;
+    color: var(--text-color);
+    background-color: var(--message-color);
+  }
+  .menu-primario.outros {
+    right: 4px;
+    color: var(--text-color);
+    background-color: #FFF;
+  }
+
+  .menu-primario.outros > span:nth-child(1) {
+    order: 10;
+  }
+
+  .menu-mensagem {
+    cursor: pointer;
+    padding: 1px;
+  }
+
+  .menu-flutuante {
+    background-color: #FFF;
+    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 10px;
+    position: absolute;
+    top: 20px;
+    width: 120px;
+    min-height: 50px;
+    height: 50px;
+    max-height: 50px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+  }
+
+  .menu-flutuante.principal {
+    left: 3px
+  }
+
+  .menu-flutuante.outros {
+    right: 3px
+  }
+
+  .menu-flutuante li {
+    transition: background-color 300ms ease-in-out;
+    width: 100%;
+    cursor: pointer;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-flutuante li:hover {
+    background-color: #e9e9e9;
+  }
+
+  /* Principal */
+  .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: var(--text-color);
+  }
+
+  .mensagem__principal > .mensagem .horario-envio {
+    color: var(--text-color);
+  }
+  .mensagem__principal > .mensagem .autor-mensagem { 
+    right: 5px;
+    color: var(--text-color);
+  }
+  /* Outros */
+  .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;
+  }
+  /* Mapa */
+  .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: .85em
+  }
+  .info-mapa li.url {
+    font-size: .85em
+  }
+
+  .tooltip-list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+</style>