vue-intergrall-plugins 0.0.1085 → 1.0.0

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

@@ -0,0 +1,1082 @@
+<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" :title="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"
+      >
+        <fa-icon
+          :icon="['fas', 'times-circle']"
+          class="sc-icone-fechar sc-icone-fechar--externo"
+          @click="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 (this.tipo_origem) {
+        tooltipStar += `${this.dictionary["tipo_origem"]}: ${
+          this.dictionary[`tipo_origem_${this.tipo_origem}`]
+            ? this.dictionary[`tipo_origem_${this.tipo_origem}`]
+            : this.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: 12px;
+  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: 12px;
+  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: 9.6px;
+  color: #67a332;
+  width: 14.4px;
+  height: 14.4px;
+  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: 11.2px;
+}
+.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: 6.4px;
+  width: 11.2px;
+}
+.default-stick-size {
+  width: 180px;
+  height: auto;
+}
+.horario-envio {
+  margin-right: 15px;
+  font-size: 11.2px;
+  position: absolute;
+  left: 10px;
+  bottom: 2px;
+}
+
+.autor-mensagem {
+  position: absolute;
+  font-size: 9.6px;
+  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: 11.2px;
+  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>