vue-intergrall-plugins 0.0.300 → 0.0.500

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

@@ -1,573 +1,1077 @@
-<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}">
-      <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>
-      <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>
-      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
-      <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>
-      <LinkPreview v-if="link && !mapa && status != 'O'" :message="message" />
-      <p v-html="validateInterativity() ? '' : 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' || 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>
-      <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>
-
-      <span class="autor-mensagem" v-html="autor"></span>
-    </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'
-
-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"],
-  created() {
-    if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
-  },
-  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
-      }
-    }
-  },
-  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: {
-    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: 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-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;
-  }
-  /* 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="hasAnyMenu">
+        <!-- <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"
+          v-if="showMenu.reply"
+        >
+          <fa-icon :icon="['fas', 'reply']" />
+        </span>
+        <span
+          class="menu-mensagem"
+          @click="reagirMensagemHandler"
+          v-tippy
+          :content="dictionary.tit_reagir_msg"
+          v-if="showMenu.reaction"
+        >
+          <fa-icon :icon="['fas', 'smile']" />
+        </span>
+      </div>
+      <div
+        class="emoji-message-container"
+        v-if="isEmojisOpen"
+        v-on-clickaway="closeEmojis"
+      >
+        <Picker @insert-emoji="addReaction" />
+      </div>
+      <transition name="fade" mode="out-in" v-if="isMenuOpen">
+        <ul class="menu-flutuante" :class="origem" v-on-clickaway="closeMenu">
+          <li @click="responderMensagemHandler" v-if="showMenu.reply">
+            <span> {{ dictionary.tit_responder_msg }} </span>
+          </li>
+          <li @click="reagirMensagemHandler" v-if="showMenu.reaction">
+            <span> {{ dictionary.tit_reagir_msg }} </span>
+          </li>
+        </ul>
+      </transition>
+      <transition name="fade" mode="out-in" v-if="messageReaction">
+        <span
+          class="reaction"
+          v-tippy
+          :content="`${dictionary.tit_mensagem_reagida} ${messageReaction.finalEmoji}`"
+        >
+          <span v-html="messageReaction.finalEmoji"></span>
+        </span>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import AnexoMensagem from "./AnexoMensagem";
+import InteratividadeBotoes from "./InteratividadeBotoes";
+import InteratividadeFormulario from "./InteratividadeFormulario";
+import Picker from "../Chat/Picker";
+import { formataTimezoneData } from "../../services/textFormatting";
+import LinkPreview from "./LinkPreview";
+import { mixin as clickaway } from "vue-clickaway";
+
+export default {
+  components: {
+    AnexoMensagem,
+    InteratividadeBotoes,
+    InteratividadeFormulario,
+    LinkPreview,
+    Picker,
+  },
+  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",
+    "tipo_origem",
+  ],
+  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,
+      isEmojisOpen: false,
+      messageReaction: "",
+    };
+  },
+  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/>"
+        : "";
+
+      if (tipo_origem) {
+        tooltipStar += `${this.dictionary["tipo_origem"]}: ${
+          this.dictionary[`tipo_origem_${tipo_origem}`]
+            ? this.dictionary[`tipo_origem_${tipo_origem}`]
+            : tipo_origem
+        }<br/>`;
+      }
+
+      return tooltipStar;
+    },
+    validadeSeq() {
+      if (this.seq && this.seq.substring(0, 2) == "HW") return true;
+      this.reply = "reply reply-with-2-icons";
+      return false;
+    },
+    hasAnyMenu() {
+      if (!this.showMenu || typeof this.showMenu !== "object") return false;
+      for (let key in this.showMenu) {
+        if (this.showMenu.hasOwnProperty(key) && this.showMenu[key] === true) return true;
+      }
+      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,
+      });
+    },
+    reagirMensagemHandler() {
+      if (this.isMenuOpen) this.closeMenu();
+      this.isEmojisOpen = !this.isEmojisOpen;
+    },
+    addReaction(emoji) {
+      this.messageReaction =
+        this.messageReaction && this.messageReaction.hexa === emoji.hexa
+          ? ""
+          : { hexa: emoji.hexa, finalEmoji: emoji.finalEmoji };
+      this.isEmojisOpen = false;
+      this.$emit("reagir-mensagem", {
+        emoji,
+        seq: this.seq,
+        id_ext_msg: this.id_ext_msg,
+        hasEmojiReaction: this.messageReaction ? true : false,
+      });
+    },
+    closeEmojis() {
+      this.isEmojisOpen = false;
+    },
+    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 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.mensagem-reply {
+  padding: 5px 10px;
+  font-size: 0.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: 0.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: 0.6rem;
+  color: #67a332;
+  width: 0.9rem;
+  height: 0.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: 0.85em;
+}
+.info-mapa li.address,
+.info-mapa li.url {
+  font-size: 0.85em;
+}
+.info-mapa li.url {
+  font-size: 0.85em;
+}
+
+.tooltip-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.emoji-message-container {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 300px;
+  height: 250px;
+}
+/* .emoji-message-container {
+  z-index: 1;
+  overflow: hidden;
+  width: 300px;
+  height: 250px;
+
+  >.sm-emoji-picker {
+    position: relative;
+    width: 300px;
+    height: 250px;
+  }
+}
+
+.mensagem .reaction {
+  $size: 1.8em;
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+  max-width: $size;
+  max-height: $size;
+} */
+
+.emoji-message-container .sm-emoji-picker {
+  width: 300px;
+  height: 250px;
+}
+.emoji-message-container .sm-emoji-picker .sm-emoji-header {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.reaction {
+  position: absolute;
+  bottom: 0;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(100, 100, 100, 0.4);
+  padding: 5px;
+  font-size: 1.3em;
+  min-width: 1.8em;
+  min-height: 1.8em;
+  max-width: 1.8em;
+  max-height: 1.8em;
+}
+
+.reaction > span {
+  display: block;
+  transform: translateY(-1px);
+}
+
+.mensagem__outros .reaction {
+  right: -30px;
+}
+
+.mensagem__principal .reaction {
+  left: -30px;
+}
+</style>