vue-intergrall-plugins 1.0.27 → 1.0.28

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

@@ -1,28 +1,10 @@
 <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 :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}`"
-      >
+      <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" />
@@ -34,34 +16,16 @@
       <!-- 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')"
-          />
+          <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"
-      />
+      <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"
-        >
+        <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">
@@ -83,122 +47,56 @@
       <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')"
-        >
+        <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"
-        >
+        <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"
-            />
+            <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"
-        >
+        <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"
-            />
+            <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"
-        >
+        <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"
-        >
+        <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"
-        >
+        <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"
-        >
+        <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"
-        >
+        <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"
-        >
+        <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"
-        >
+        <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"
-        >
+        <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 -->
@@ -210,48 +108,26 @@
         <!-- <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"
-        >
+        <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"
-        >
+        <span class="menu-mensagem" @click="reagirMensagemHandler" v-tippy :content="dictionary.tit_reagir_msg"
+          v-if="showMenu.reaction">
           <fa-icon :icon="['fas', 'smile']" />
         </span>
         <template v-if="showMenu.customButtons && showMenu.customButtons.length">
-          <span
-            v-for="(button, index) in showMenu.customButtons"
-            :key="button.id || index"
-            v-show="button.use"
-            @click="button.callback(returnParams(button.params))"
-            :class="`${button.customClass || 'menu-mensagem'}`"
-            v-tippy
-            :content="button.tippyContent"
-          >
-            <fa-icon :icon="['fas', button.icon || 'question-circle']" />
+          <span v-for="(button, index) in showMenu.customButtons" :key="button.id || index" v-show="button.use"
+            @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
+            v-tippy :content="button.tippyContent">
+            <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+            <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
           </span>
         </template>
       </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"
-        />
+      <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">
@@ -265,11 +141,7 @@
         </ul>
       </transition>
       <transition name="fade" mode="out-in" v-if="messageReaction">
-        <span
-          class="reaction"
-          v-tippy
-          :content="`${dictionary.tit_mensagem_reagida} ${messageReaction.finalEmoji}`"
-        >
+        <span class="reaction" v-tippy :content="`${dictionary.tit_mensagem_reagida} ${messageReaction.finalEmoji}`">
           <span v-html="messageReaction.finalEmoji"></span>
         </span>
       </transition>
@@ -415,17 +287,16 @@ export default {
         : "";
       tooltipStar += this.expSessao
         ? this.dictionary["expiracao_sessao"] +
-          " - " +
-          formataTimezoneData(this.expSessao) +
-          "<br/>"
+        " - " +
+        formataTimezoneData(this.expSessao) +
+        "<br/>"
         : "";
 
       if (this.tipo_origem) {
-        tooltipStar += `${this.dictionary["tipo_origem"]}: ${
-          this.dictionary[`tipo_origem_${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/>`;
+          }<br/>`;
       }
 
       return tooltipStar;
@@ -693,6 +564,7 @@ export default {
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
@@ -708,6 +580,7 @@ export default {
   overflow: hidden;
   max-width: 100%;
 }
+
 .mensagem-reply p {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -718,6 +591,7 @@ export default {
   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);
 }
@@ -726,6 +600,7 @@ export default {
   background-color: rgb(245, 245, 245);
   border-left: 3px solid var(--message-color);
 }
+
 .message-reply-outros:hover {
   background-color: rgb(235, 235, 235);
 }
@@ -734,6 +609,7 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .mensagem-reply-vazia svg {
   margin-right: 5px;
   color: #ba181b;
@@ -760,27 +636,34 @@ export default {
   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;
@@ -808,10 +691,12 @@ export default {
   border-radius: 50%;
   background-color: #fff;
 }
+
 .reply svg {
   margin-top: -1px;
   margin-right: -1px;
 }
+
 .reply-with-2-icons {
   right: 30px;
 }
@@ -823,26 +708,32 @@ export default {
   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;
@@ -851,10 +742,12 @@ export default {
   font-size: 6.4px;
   width: 11.2px;
 }
+
 .default-stick-size {
   width: 180px;
   height: auto;
 }
+
 .horario-envio {
   margin-right: 15px;
   font-size: 11.2px;
@@ -885,18 +778,20 @@ export default {
   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) {
+.menu-primario.outros>span:nth-child(1) {
   order: 10;
 }
 
@@ -956,7 +851,8 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
-.mensagem__principal > .mensagem::after {
+
+.mensagem__principal>.mensagem::after {
   content: "";
   width: 0;
   height: 0;
@@ -968,28 +864,33 @@ export default {
   right: -10px;
   transform: rotate(-90deg);
 }
-.mensagem__principal > .mensagem {
+
+.mensagem__principal>.mensagem {
   background-color: var(--message-color);
   color: var(--text-color);
 }
 
-.mensagem__principal > .mensagem .horario-envio {
+.mensagem__principal>.mensagem .horario-envio {
   color: var(--text-color);
 }
-.mensagem__principal > .mensagem .autor-mensagem {
+
+.mensagem__principal>.mensagem .autor-mensagem {
   right: 5px;
   color: var(--text-color);
 }
+
 /* Outros */
 .mensagem__outros {
   width: 100%;
   display: flex;
 }
-.mensagem__outros > .mensagem {
+
+.mensagem__outros>.mensagem {
   background-color: #fff;
   color: #333;
 }
-.mensagem__outros > .mensagem::after {
+
+.mensagem__outros>.mensagem::after {
   content: "";
   width: 0;
   height: 0;
@@ -1001,13 +902,15 @@ export default {
   left: -10px;
   transform: rotate(90deg);
 }
+
 /* .mensagem__outros .check{
     display: none
   } */
-.mensagem__outros > .autor-mensagem {
+.mensagem__outros>.autor-mensagem {
   left: 5px;
   color: #333;
 }
+
 /* Mapa */
 .mensagem-div-mapa {
   width: 100%;
@@ -1024,6 +927,7 @@ export default {
   height: 100%;
   box-sizing: initial;
 }
+
 .msg-mapa img {
   max-width: none !important;
 }
@@ -1031,13 +935,16 @@ export default {
 .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;
 }
@@ -1058,6 +965,7 @@ export default {
   width: 300px;
   height: 250px;
 }
+
 /* .emoji-message-container {
   z-index: 1;
   overflow: hidden;
@@ -1085,6 +993,7 @@ export default {
   width: 300px;
   height: 250px;
 }
+
 .emoji-message-container .sm-emoji-picker .sm-emoji-header {
   overflow-x: auto;
   overflow-y: hidden;
@@ -1106,7 +1015,7 @@ export default {
   max-height: 1.8em;
 }
 
-.reaction > span {
+.reaction>span {
   display: block;
   transform: translateY(-1px);
 }