vue-intergrall-plugins 0.0.1085 → 1.0.0

package/src/lib-components/Chat/TextFooter.vue

@@ -1,7 +1,19 @@
 <template>
-  <div class="text-footer-container" :class="{'bigger' : cssStyle.height}" v-on-clickaway="away" v-if="textId" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent>
-    <div class="text-footer" :class="cssStyle.width ? cssStyle.width: ''" :style="`background-color: ${cssStyle.backgroundColor}`">
-      <BtnEmojis 
+  <div
+    class="text-footer-container"
+    :class="{ bigger: cssStyle.height }"
+    v-on-clickaway="away"
+    v-if="textId"
+    @drop.stop="dropFile"
+    @dragenter.prevent
+    @dragover.prevent
+  >
+    <div
+      class="text-footer"
+      :class="cssStyle.width ? cssStyle.width : ''"
+      :style="`background-color: ${cssStyle.backgroundColor}`"
+    >
+      <BtnEmojis
         v-show="buttons.hasEmojis && !audioFile"
         :ref="`${this.textId}`"
         :emojiId="`${this.textId}`"
@@ -13,7 +25,7 @@
       <transition name="fade">
         <Loader v-if="isSending" />
       </transition>
-      <textarea 
+      <textarea
         class="js-autoresize"
         v-if="!audioFile"
         v-model="message"
@@ -21,119 +33,249 @@
         :disabled="textareaSettings.disabled"
         :placeholder="textareaSettings.placeholderMessage"
         @input="sendFinalMessage"
-        @keydown.up="toggleHSM"
-        @keydown.down="toggleHSM"
+        @keydown.up="toggleStandardMessages"
+        @keydown.down="toggleStandardMessages"
         @keydown.esc="closeEmojis"
         @keydown.enter="sendMessageHandler"
         @paste="pasteImage"
       ></textarea>
       <div class="text-footer-audio" v-else>
-        <audio :src="audioSource" controls="controls"></audio>
+        <div>
+          <audio :src="audioSource" controls="controls"></audio>
+        </div>
+
         <span class="delete-audio" title="Cancelar" @click="deleteAudio">
           <fa-icon :icon="['fas', 'times']" />
         </span>
       </div>
-      <RemainingCharacters 
-        :class="{'d-none' : audioFile}"
+      <RemainingCharacters
+        :class="{ 'd-none': audioFile }"
         :message="message"
         :maxCharacters="textareaSettings.maxCharacters"
       />
-      <div class="text-footer-actions" v-if="buttons.hasSendButton">
-        <span class="text-footer-actions--btn" :title="dictionary.title_enviar_msg" @click="sendMessageHandler">
-          <fa-icon :icon="['fas', 'paper-plane']" />
-        </span>
-      </div>
-      <div v-if="buttons.hasFiles || buttons.hasAudio || buttons.hasExpand" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
-        <BtnMic 
+      <div
+        v-if="
+          buttons.hasFiles ||
+          buttons.hasAudio ||
+          buttons.hasExpand ||
+          formattedMessageSettings.hasStandardMessages ||
+          buttons.hasScreenShare ||
+          buttons.hasDownloadAll
+        "
+        class="text-footer-actions"
+        :class="{ 'outside-buttons': cssStyle.outsideButtons && !audioFile }"
+      >
+        <BtnDownloadAllFiles
+          v-show="buttons.hasDownloadAll && !audioFile"
+          @click-trigger="$emit('handle-download-files')"
+          :dictionary="dictionary"
+          :ref="`${textId}-download-files`"
+        />
+        <BtnScreenShare
+          v-show="buttons.hasScreenShare && !audioFile"
+          @handle-screen-share="handleScreenShare"
+          :dictionary="dictionary"
+          :ref="`${textId}-screen-share`"
+        />
+        <BtnMic
           v-show="buttons.hasAudio && !audioFile"
           :dictionary="dictionary"
           @set-audio="setAudio"
-          :ref="`${textId}-mic`" 
+          :ref="`${textId}-mic`"
         />
-        <BtnFiles 
-          v-show="buttons.hasFiles && !audioFile" 
+        <BtnStandardMessages
+          v-show="formattedMessageSettings.hasStandardMessages && !audioFile"
+          :dictionary="dictionary"
+          :ref="`${textId}-standard-messages`"
+          @toggle-standard-messages="toggleStandardMessages"
+        />
+        <BtnFiles
+          v-show="buttons.hasFiles && !audioFile"
           :textId="textId"
           :dictionary="dictionary"
           :fileSettings="fileSettings"
           :cssStyle="cssStyle"
           :ref="`${textId}-file`"
+          :hasButtonFiles="hasButtonFiles"
+          :externalFiles="externalFiles"
           @set-file-vars="setFileVars"
           @open-image="openImage"
+          @open-file-system="openFileSystem"
+          @reset-file-system="resetFileSystem"
+          @handle-file-preview="$emit('handle-file-preview')"
+          @handle-file-click="$emit('handle-file-click')"
         />
-        <BtnExpand 
+        <BtnExpand
           v-show="buttons.hasExpand && !audioFile"
+          :ref="`${textId}-expand`"
           @expand-textarea="$emit('expand-textarea')"
           :dictionary="dictionary"
         />
       </div>
+      <div class="text-footer-actions" v-if="buttons.hasSendButton">
+        <span
+          class="text-footer-actions--btn"
+          :title="dictionary.title_enviar_msg"
+          @click="sendMessageHandler"
+        >
+          <fa-icon :icon="['fas', 'paper-plane']" />
+        </span>
+      </div>
     </div>
+    <transition name="fade">
+      <StandardMessages
+        v-if="showStandardMessages"
+        :class="cssStyle.width ? cssStyle.width : ''"
+        :dictionary="dictionary"
+        :backgroundColor="cssStyle.backgroundColor"
+        :token_cliente="
+          formattedMessageSettings.token_cliente
+            ? formattedMessageSettings.token_cliente
+            : ''
+        "
+        :message="message"
+        :messageType="messageType"
+        :hasStandardMessages="
+          formattedMessageSettings.hasStandardMessages && showStandardMessages
+        "
+        @close-standard-messages="closeStandardMessages"
+        @open-blocker-standard-message="openBlockerStandardMessage"
+        @close-blocker-standard-message="closeBlockerStandardMessage"
+        @set-message-type="setMessageType"
+        @set-standard-infos="setStandardInfos"
+        @add-standard-message="addStandardMessage"
+        @error-standard-message="$emit('error-standard-message')"
+      />
+    </transition>
   </div>
 </template>
 
 <script>
-import { setResizeListeners, resetTargets } from "@/services/autoResize"
-import { mixin as clickaway } from "vue-clickaway"
-import { returnMessageWithHexa } from "@/services/textFormatting"
+import { setResizeListeners, resetTargets } from "../../services/autoResize";
+import { mixin as clickaway } from "vue-clickaway";
+import { returnMessageWithHexa } from "../../services/textFormatting";
 
-import BtnEmojis from "./BtnEmojis"
-import Loader from "../Loader/Loader"
-import RemainingCharacters from "./RemainingCharacters"
-import BtnMic from "./BtnMic"
-import BtnFiles from "./BtnFiles"
-import BtnExpand from "./BtnExpand"
+import BtnEmojis from "./BtnEmojis";
+import Loader from "../Loader/Loader";
+import RemainingCharacters from "./RemainingCharacters";
+import BtnMic from "./BtnMic";
+import BtnFiles from "./BtnFiles";
+import BtnExpand from "./BtnExpand";
+import BtnStandardMessages from "./BtnStandardMessages";
+import StandardMessages from "./StandardMessages";
+import BtnScreenShare from "./BtnScreenShare";
+import BtnDownloadAllFiles from "./BtnDownloadAllFiles";
 
 export default {
-  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters },
-  mixins: [ clickaway ],
+  components: {
+    BtnEmojis,
+    Loader,
+    BtnMic,
+    BtnFiles,
+    BtnExpand,
+    RemainingCharacters,
+    BtnStandardMessages,
+    StandardMessages,
+    BtnScreenShare,
+    BtnDownloadAllFiles,
+  },
+  mixins: [clickaway],
   props: {
     buttons: {
       type: Object,
-      default: () => { return { hasEmojis: false, hasSendButton: false, hasFiles: false, hasAudio: false, hasExpand: false } },
-      required: false
+      default: () => {
+        return {
+          hasEmojis: false,
+          hasSendButton: false,
+          hasFiles: false,
+          hasAudio: false,
+          hasExpand: false,
+          hasScreenShare: false,
+        };
+      },
+      required: false,
     },
     cssStyle: {
       type: Object,
-      default: () => { return { height: false, width: "full", backgroundColor: "#FFF", outsideButtons: false } },
-      required: false
+      default: () => {
+        return {
+          height: false,
+          width: "full",
+          backgroundColor: "#FFF",
+          outsideButtons: false,
+        };
+      },
+      required: false,
     },
     textareaSettings: {
       type: Object,
-      default: () => { return { placeholderMessage: "", maxCharacters: 0, sendOnEnter: false, disabled: false } },
-      required: false
+      default: () => {
+        return {
+          placeholderMessage: "",
+          maxCharacters: 0,
+          sendOnEnter: false,
+          disabled: false,
+        };
+      },
+      required: false,
     },
     emojiSettings: {
       type: Object,
-      default: () => { return { openEmojisFrom: "top", smallEmojis: false } },
-      required: false
+      default: () => {
+        return { openEmojisFrom: "top", smallEmojis: false };
+      },
+      required: false,
     },
     formattedMessageSettings: {
       type: Object,
-      default: () => { return { hasHsm: false, msgType: 0 } },
-      required: false
+      default: () => {
+        return { hasStandardMessages: false, msgType: 0, token_cliente: "" };
+      },
+      required: false,
     },
     fileSettings: {
       type: Object,
-      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
-      required: false
+      default: () => {
+        return {
+          docsExtensions: "",
+          imagesExtensions: "",
+          multiple: false,
+          systemButton: false,
+          max: 3,
+          handleFilePreview: false,
+          filePreviewStyle: 1,
+          stackFiles: false,
+          handleFileClick: false,
+        };
+      },
+      required: false,
     },
     textId: {
       type: String,
-      required: true
+      required: true,
     },
     isMainChat: {
       type: Boolean,
       default: false,
-      required: false
+      required: false,
     },
     isSending: {
       type: Boolean,
       default: false,
-      required: false
+      required: false,
     },
     dictionary: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
+    hasButtonFiles: {
+      type: Boolean,
+      required: false,
+    },
+    externalFiles: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
@@ -145,255 +287,347 @@ export default {
       isDoc: false,
       fileFormatError: false,
       audioFile: "",
-      audioSource: ""
-    }
+      audioSource: "",
+      showStandardMessages: false,
+      messageType: 1,
+    };
   },
   created() {
-    this.$root.$refs[`tf-${this.textId}`] = this
+    this.$root.$refs[`tf-${this.textId}`] = this;
   },
   mounted() {
-    setResizeListeners(this.$el, ".js-autoresize", ".js-parentresize")
+    setResizeListeners(this.$el, ".js-autoresize", ".js-parentresize");
+    window.addEventListener("message", this.listenerPostMessage, false);
 
     // this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
-    // this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
+    // this.$root.$on("toggle-msg-formatada", () => { this.toggleStandardMessages() })
     // this.$root.$on("textarea-focus", () => { this.focusTextarea() })
     // this.$root.$on("resize-footer-template", () => { this.adjustChatHeight() })
     // this.$root.$on("clear-footer-message", () => { this.message = "" })
     // if(this.cssStyle.outsideButtons) if(this.$root.$refs.chatCorpo) this.$root.$refs.chatCorpo.setOutsideButtons(this.cssStyle.outsideButtons)
   },
   methods: {
+    listenerPostMessage(event) {
+      const baseURL =
+        window.location.hostname == "localhost"
+          ? `https://linux07`
+          : `https://${window.location.hostname}`;
+      if (!this.formattedMessageSettings.hasStandardMessages) return;
+      if (
+        event.data.gerenciador ||
+        event.data.abrirFishing ||
+        event.data.multiplos_contatos ||
+        event.data.inserir_cliente_omni ||
+        event.data.multiple_contatos
+      )
+        return;
+      if (event.origin == baseURL) {
+        if (event.data == "" && this.showStandardMessages) {
+          this.closeBlockerStandardMessage();
+          this.toggleStandardMessages();
+          this.$toasted.global.defaultInfo({
+            msg: this.dictionary.msg_erro_sem_msg_formatada,
+          });
+        } else if (typeof event.data === "string" && this.showStandardMessages) {
+          this.message = event.data;
+          this.focusTextarea();
+          this.closeBlockerStandardMessage();
+          this.toggleStandardMessages();
+        }
+      }
+    },
     closeEmojis() {
       try {
-        this.$root.$refs[`etf-${this.textId}`].showEmojis ? this.$root.$refs[`etf-${this.textId}`].away() : ''
-      }catch(e) {
-        console.error("Nao foi possivel fechar os emojis")
-        console.error(e)
+        this.$root.$refs[`etf-${this.textId}`].showEmojis
+          ? this.$root.$refs[`etf-${this.textId}`].away()
+          : "";
+      } catch (e) {
+        console.error("Nao foi possivel fechar os emojis");
+        console.error(e);
       }
     },
     away() {
-      if(this.$refs[`${this.textId}-file`]) this.$refs[`${this.textId}-file`].openFiles = false
+      if (this.$refs[`${this.textId}-file`])
+        this.$refs[`${this.textId}-file`].openFiles = false;
     },
     setDefaultMessage(msg) {
-      this.message = msg
-      this.sendFinalMessage()
+      this.message = msg;
+      this.sendFinalMessage();
     },
     insertEmoji(emoji) {
       try {
-        const textarea = document.querySelector(`#text-footer-${this.textId}`)
-        console.log("emoji: ", emoji)
-        console.log(textarea)
+        if (!emoji) return;
+        const textarea = document.querySelector(`#text-footer-${this.textId}`);
         if (document.activeElement === textarea) {
-          const cursorStart = textarea.selectionStart
-          const cursorEnd = textarea.selectionEnd
+          const cursorStart = textarea.selectionStart;
+          const cursorEnd = textarea.selectionEnd;
           if (cursorEnd == textarea.value.length) {
-            this.message += emoji.finalEmoji
+            this.message += emoji.finalEmoji;
             textarea.setSelectionRange(textarea.value.length, textarea.value.length);
           } else {
             const initValue = textarea.value.slice(0, cursorStart) + emoji.finalEmoji;
-            const endValue = textarea.value.slice(cursorEnd)
-            this.message = initValue + endValue
+            const endValue = textarea.value.slice(cursorEnd);
+            this.message = initValue + endValue;
             textarea.setSelectionRange(initValue.length, initValue.length);
           }
         } else {
-          this.message += emoji.finalEmoji
+          this.message += emoji.finalEmoji;
         }
-        this.sendFinalMessage()
-      }catch(e) {
-        console.error("Erro ao inserir emoji")
-        console.error(e)
+        this.sendFinalMessage();
+      } catch (e) {
+        console.error("Erro ao inserir emoji");
+        console.error(e);
       }
     },
     verifyMessage() {
-      if(this.textareaSettings.maxCharacters && this.message) {
-        if(this.message.length > this.textareaSettings.maxCharacters) {
-          if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.limiteCaracter()
-          return false
+      if (this.textareaSettings.maxCharacters && this.message) {
+        if (this.message.length > this.textareaSettings.maxCharacters) {
+          if (!document.querySelector(".toasted.toasted-primary.error"))
+            this.$toasted.global.limiteCaracter();
+          return false;
         }
       }
 
-      if((!this.message || !this.message.trim()) && !this.hasAnyFile && !this.audioFile) return false
+      if ((!this.message || !this.message.trim()) && !this.hasAnyFile && !this.audioFile)
+        return false;
 
-      if(this.textareaSettings.disabled) return false
+      if (this.textareaSettings.disabled) return false;
 
-      if(this.fileFormatError) {
-        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+      if (this.fileFormatError && this.hasAnyFile) {
+        if (!document.querySelector(".toasted.toasted-primary.error"))
+          this.$toasted.global.defaultError({
+            msg: this.dictionary.msg_formato_invalido,
+          });
         const str = {
           img: this.fileSettings.imagesExtensions.split("|").join(", "),
-          doc: this.fileSettings.docsExtensions.split("|").join(", ")
-        }
-        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
-        return false
+          doc: this.fileSettings.docsExtensions.split("|").join(", "),
+        };
+        if (!document.querySelector(".toasted.toasted-primary.info"))
+          this.$toasted.global.showValidFormats({
+            msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}`,
+          });
+        return false;
       }
 
-      return true
+      return true;
     },
     removeHTMLElementsFromMessage(message) {
-      const regexTags = /<\/?[\d\w\s=\-:./'";]+>/gi
-      if(message.match(regexTags)) message = message.replace(regexTags, ' ')
-      return message
+      const regexTags = /<\/?[\d\w\s=\-:./'";]+>/gi;
+      if (message.match(regexTags)) message = message.replace(regexTags, " ");
+      return message;
     },
     formatMessage(message) {
-      if(!message) return ""
-      message = message.trim()
-      message = message.replace(/\n$/, "", message)
-      message = returnMessageWithHexa(message)
-      message = this.removeHTMLElementsFromMessage(message)
-      return message
+      if (!message) return "";
+      message = message.trim();
+      message = message.replace(/\n$/, "", message);
+      message = returnMessageWithHexa(message);
+      message = this.removeHTMLElementsFromMessage(message);
+      return message;
     },
     sendFinalMessage() {
-      const messageAux = this.formatMessage(this.message)
-      this.$emit("final-message", messageAux)
+      const messageAux = this.formatMessage(this.message);
+      this.$emit("final-message", messageAux);
     },
     sendMessageHandler(event) {
-      this.sendMessage(event)
+      this.sendMessage(event);
     },
     sendMessage(event) {
-      if(this.isSending) return
+      if (this.isSending) return;
 
-      if(this.isMainChat && event){
-        if(this.textareaSettings.sendOnEnter){
-          if(event.keyCode == 13 && !event.shiftKey) event.preventDefault()
-          if(event.shiftKey) return
-        }else{
-          if(event.keyCode == 13) {
-            if(!event.shiftKey) return
-            event.preventDefault()
+      if (this.isMainChat && event) {
+        if (this.textareaSettings.sendOnEnter) {
+          if (event.keyCode == 13 && !event.shiftKey) event.preventDefault();
+          if (event.shiftKey) return;
+        } else {
+          if (event.keyCode == 13) {
+            if (!event.shiftKey) return;
+            event.preventDefault();
           }
         }
       }
 
-      if(!this.buttons.hasSendButton) return
+      if (!this.buttons.hasSendButton) return;
 
-      const messageAux = this.formatMessage(this.message)
-      if(this.verifyMessage()){
-        if(messageAux || this.hasAnyFile || this.audioFile) {
-          this.$emit("send-message", messageAux)
-          const objMessage = this.returnObjectMessage(messageAux)
-          this.$emit("obj-message", objMessage)
+      const messageAux = this.formatMessage(this.message);
+      if (this.verifyMessage()) {
+        if (messageAux || this.hasAnyFile || this.audioFile) {
+          this.$emit("send-message", messageAux);
+          const objMessage = this.returnObjectMessage(messageAux);
+          this.$emit("obj-message", objMessage);
 
-          if(this.$refs[`emoji-text-${this.textId}`] && this.$refs[`emoji-text-${this.textId}`].showEmojis) this.$refs[`emoji-text-${this.textId}`].toggleEmojiSelection()
+          if (
+            this.$refs[`emoji-text-${this.textId}`] &&
+            this.$refs[`emoji-text-${this.textId}`].showEmojis
+          )
+            this.$refs[`emoji-text-${this.textId}`].toggleEmojiSelection();
 
-          this.resetFooterData()
+          this.resetFooterData();
         }
       }
     },
     focusTextarea() {
-      const textarea = document.querySelector(`#text-footer-${this.textId}`)
-      if(textarea) textarea.focus()
+      const textarea = document.querySelector(`#text-footer-${this.textId}`);
+      if (textarea) textarea.focus();
     },
     resetFooterData() {
-      if(this.audioFile) this.deleteAudio()
-      if(this.hasAnyFile) this.$refs[`${this.textId}-file`].deleteFile()
-      this.message = ""
-      this.sendFinalMessage()
-      resetTargets(this.$el, ".js-autoresize", ".js-parentresize", "38px")
-      this.focusTextarea()
+      if (this.audioFile) this.deleteAudio();
+      if (this.hasAnyFile) this.$refs[`${this.textId}-file`].deleteFile();
+      this.message = "";
+      this.sendFinalMessage();
+      resetTargets(this.$el, ".js-autoresize", ".js-parentresize", "38px");
+      this.focusTextarea();
     },
     returnObjectMessage(message) {
       return {
         message,
-        attachment: this.hasAnyFile ? this.file  : false,
+        attachment: this.hasAnyFile ? this.file : false,
         isDoc: this.isDoc,
         imagePreview: this.imagePreview,
         isAudio: this.audioFile ? true : false,
-        audioAttachment: this.audioSource
-      }
+        audioAttachment: this.audioSource,
+      };
     },
     setFileVars(fileObj) {
       const { file, imagePreview, isDoc, fileFormatError, hasAnyFile } = fileObj;
 
-      this.file = file
-      this.imagePreview = imagePreview ? imagePreview : ""
-      this.isDoc = isDoc
-      this.fileFormatError = fileFormatError
-      this.hasAnyFile = hasAnyFile
+      this.file = file;
+      this.imagePreview = imagePreview ? imagePreview : "";
+      this.isDoc = isDoc;
+      this.fileFormatError = fileFormatError;
+      this.hasAnyFile = hasAnyFile;
 
-      this.$emit("set-file-vars", fileObj)
+      this.$emit("set-file-vars", fileObj);
     },
     openImage(imagePreview) {
-      this.$emit("open-image", imagePreview)
+      this.$emit("open-image", imagePreview);
+    },
+    openFileSystem() {
+      this.$emit("open-file-system");
+    },
+    resetFileSystem() {
+      this.$emit("reset-file-system");
     },
     setAudio(audioObj) {
-      const { audioFile, audioSource } = audioObj
-      this.audioFile = audioFile
-      this.audioSource = audioSource
+      const { audioFile, audioSource } = audioObj;
+      this.audioFile = audioFile;
+      this.audioSource = audioSource;
     },
     deleteAudio() {
-      this.$refs[`${this.textId}-mic`].deleteMediaRecorder()
-      this.audioFile = ""
-      this.audioSource = ""
+      this.$refs[`${this.textId}-mic`].deleteMediaRecorder();
+      this.audioFile = "";
+      this.audioSource = "";
     },
     returnFileType(file, stopAlert) {
-      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
-      if(imgRegex.test(file.name)) return "img"
+      if (!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions)
+        return false;
+      const imgRegex = new RegExp("\.(" + this.fileSettings.imagesExtensions + ")", "i");
+      if (imgRegex.test(file.name)) return "img";
 
-      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
-      if(docRegex.test(file.name)) return "doc"
+      const docRegex = new RegExp("\.(" + this.fileSettings.docsExtensions + ")", "i");
+      if (docRegex.test(file.name)) return "doc";
 
-      if(!stopAlert) return
-      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+      if (!stopAlert) return false;
+      if (!document.querySelector(".toasted.toasted-primary.error"))
+        this.$toasted.global.defaultError({
+          msg: this.dictionary.msg_formato_invalido,
+        });
       const str = {
         img: this.fileSettings.imagesExtensions.split("|").join(", "),
-        doc: this.fileSettings.docsExtensions.split("|").join(", ")
-      }
-      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
-      return false
+        doc: this.fileSettings.docsExtensions.split("|").join(", "),
+      };
+      if (!document.querySelector(".toasted.toasted-primary.info"))
+        this.$toasted.global.showValidFormats({
+          msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}`,
+        });
+      return false;
     },
     filesHandler(files) {
-      if(!Array.isArray(files)) files = Array.from(files)
-      const fileType = this.returnFileType(files[0], true)
-      let invalidFile = false
+      if (!Array.isArray(files)) files = Array.from(files);
+      const fileType = this.returnFileType(files[0], true);
+      let invalidFile = false;
       try {
-        files.forEach(file => {
-          const singleFileType = this.returnFileType(file, true)
-          if(!singleFileType) {
-            invalidFile = true
-            file.invalid = true
+        files.forEach((file) => {
+          const singleFileType = this.returnFileType(file, true);
+          if (!singleFileType) {
+            invalidFile = true;
+            file.invalid = true;
           }
-          file.imgOrDoc = singleFileType ? singleFileType : ""
-        })
-      }catch(e) {
-        console.error("Erro ao tentar percorrer os arquivos")
-        console.error(e)
-        invalidFile = true
+          file.imgOrDoc = singleFileType ? singleFileType : "";
+        });
+      } catch (e) {
+        console.error("Erro ao tentar percorrer os arquivos");
+        console.error(e);
+        invalidFile = true;
       }
 
-      if(!invalidFile) {
-        this.$refs[`${this.textId}-file`].fileUpload(files, fileType, true)
-      }else {
-        if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+      if (!invalidFile) {
+        this.$refs[`${this.textId}-file`].fileUpload(files, fileType, true);
+      } else {
+        if (!document.querySelector(".toasted.toasted-primary.error"))
+          this.$toasted.global.defaultError({
+            msg: this.dictionary.msg_formato_invalido,
+          });
         const str = {
           img: this.fileSettings.imagesExtensions.split("|").join(", "),
-          doc: this.fileSettings.docsExtensions.split("|").join(", ")
-        }
-        if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+          doc: this.fileSettings.docsExtensions.split("|").join(", "),
+        };
+        if (!document.querySelector(".toasted.toasted-primary.info"))
+          this.$toasted.global.showValidFormats({
+            msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}`,
+          });
       }
     },
     dropFile(e) {
       try {
-        e.stopPropagation()
-        e.preventDefault()
-        const files = e.dataTransfer.files.length ? e.dataTransfer.files : ""
-        this.filesHandler(files)
-      }catch(e) {
-        console.error("Erro drop file")
-        console.error(e)
+        e.stopPropagation();
+        e.preventDefault();
+        if (!this.buttons.hasFiles || this.fileSettings.handleFileClick) return false;
+        const files = e.dataTransfer.files.length ? e.dataTransfer.files : "";
+        this.filesHandler(files);
+      } catch (e) {
+        console.error("Erro drop file");
+        console.error(e);
       }
     },
     pasteImage(e) {
       try {
-        if(e.clipboardData.files.length && !this.buttons.hasFiles) {
-          e.preventDefault()
-          return
-        }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
-          const files = e.clipboardData.files
-          this.filesHandler(files)
+        if (e.clipboardData.files.length && !this.buttons.hasFiles) {
+          e.preventDefault();
+          return;
+        } else if (e.clipboardData.files.length && this.buttons.hasFiles) {
+          const files = e.clipboardData.files;
+          this.filesHandler(files);
         }
-      }catch(e) {
-        console.error("Nao foi possivel colar a/o imagem/documento")
-        console.error(e)
+      } catch (e) {
+        console.error("Nao foi possivel colar a/o imagem/documento");
+        console.error(e);
       }
     },
+    handleScreenShare() {
+      this.$emit("handle-screen-share");
+    },
+    toggleStandardMessages() {
+      this.showStandardMessages = !this.showStandardMessages;
+    },
+    openBlockerStandardMessage() {
+      this.$emit("open-blocker-standard-message");
+    },
+    closeBlockerStandardMessage() {
+      this.$emit("close-blocker-standard-message");
+    },
+    setMessageType(type) {
+      this.messageType = type;
+    },
+    setStandardInfos(infos) {
+      this.$emit("set-standard-infos", infos);
+    },
+    addStandardMessage(message) {
+      this.message = message;
+      this.sendFinalMessage();
+    },
+    closeStandardMessages() {
+      this.showStandardMessages = false;
+    },
   },
   destroyed() {
     // this.$root.$off("drop-file")
@@ -401,19 +635,24 @@ export default {
     // this.$root.$off("textarea-focus")
     // this.$root.$off("clear-footer-message")
     // this.$root.$off("resize-footer-template")
-  }
-}
+
+    window.removeEventListener("message", this.listenerPostMessage);
+  },
+};
 </script>
 
 <style>
 .toasted svg {
-  margin-right: 10px; }
+  margin-right: 10px;
+}
 
 .d-none {
-  display: none; }
+  display: none;
+}
 
 ul {
-  list-style-type: none; }
+  list-style-type: none;
+}
 
 .text-footer-container {
   display: flex;
@@ -421,270 +660,371 @@ ul {
   align-items: center;
   flex-direction: column;
   width: 100%;
-  position: relative; }
-  .text-footer-container .text-footer {
-    min-height: 48px;
-    box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.45);
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #ccc;
-    padding: 5px 2px 5px 5px;
-    border-radius: 5px; }
-    .text-footer-container .text-footer.full {
-      width: 100%; }
-    .text-footer-container .text-footer.almostFull {
-      width: 95%; }
-    .text-footer-container .text-footer.medium {
-      width: 75%; }
-  .text-footer-container.bigger .text-footer {
-    height: 80px;
-  }
-  .text-footer-container.bigger .text-footer > textarea {
-    font-size: .875rem;
-    height: 75px;
-    max-height: 75px;
-    min-height: 75px;
-  }
-  .text-footer-container textarea {
-    margin: 0 5px;
-    border: unset;
-    flex: 1;
-    resize: none;
-    min-height: 30px;
-    max-height: 60px;
-    font-size: .875rem;
-    font-family: inherit;
-    background: inherit; }
-    .text-footer-container textarea:focus {
-      outline: unset; }
-    .text-footer-container textarea::placeholder {
-      font-size: .75rem;
-    }
-  .text-footer-container .text-footer-audio {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center; }
-  .text-footer-container audio {
-    flex: 1;
-    outline: unset;
-    width: auto;
-    height: 38px; }
-  .text-footer-container .delete-audio {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #E74C3C;
-    transition: background 300ms;
-    border-radius: 50%;
-    font-size: 1rem;
-    padding: 10px;
-    cursor: pointer;
-    margin: 0 5px;
-    width: 31px;
-    height: 31px; }
-    .text-footer-container .delete-audio:hover {
-      background-color: rgba(208, 0, 0, 0.2); }
-  .text-footer-container .max-characters {
-    font-size: .575rem;
-    z-index: 1;
-    color: #444;
-    position: relative;
-    top: 30px;
-    left: -30px; }
-    .text-footer-container .max-characters.no-width {
-      width: 0; }
-  .text-footer-container .text-footer-actions {
-    display: flex; }
-    .text-footer-container .text-footer-actions.outside-buttons {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      position: absolute;
-      top: -42px;
-      right: 2px;
-      background-color: #DDD;
-      box-shadow: inset 0px -10px 5px -11px rgba(0, 0, 0, 0.5); }
-    .text-footer-container .text-footer-actions .text-footer-actions--btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #777;
-      border-radius: 50%;
-      transition: background 300ms;
-      padding: 10px;
-      font-size: 1rem;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-      margin-right: 2.5px; }
-      .text-footer-container .text-footer-actions .text-footer-actions--btn:last-child {
-        margin-right: unset; }
-      .text-footer-container .text-footer-actions .text-footer-actions--btn:hover {
-        background-color: rgba(0, 0, 0, 0.1); }
-      .text-footer-container .text-footer-actions .text-footer-actions--btn.files-activated {
-        background-color: rgba(0, 0, 0, 0.1); }
-      .text-footer-container .text-footer-actions .text-footer-actions--btn.audio-activated {
-        background-color: rgba(208, 0, 0, 0.7);
-        color: #fff; }
-      .text-footer-container .text-footer-actions .text-footer-actions--btn.left-button {
-        position: absolute;
-        left: 0; }
-  .text-footer-container .text-footer-hsm-container {
-    margin: 12px 0 7px 0; }
-    .text-footer-container .text-footer-hsm-container.full {
-      width: 100%; }
-    .text-footer-container .text-footer-hsm-container.almostFull {
-      width: 95%; }
-    .text-footer-container .text-footer-hsm-container.medium {
-      width: 75%; }
-    .text-footer-container .text-footer-hsm-container .text-footer-v-select {
-      border-radius: 5px;
-      margin-bottom: 5px; }
-    .text-footer-container .text-footer-hsm-container .text-footer-select-03 {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      width: 100%; }
-      .text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer-v-select {
-        flex: 1; }
-      .text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03 {
-        transition-duration: 300ms;
-        user-select: none;
-        cursor: pointer;
-        box-shadow: inset 0 -3px rgba(0, 0, 0, 0.2);
-        opacity: 0.9;
-        border-radius: 2.5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-left: 5px;
-        margin-bottom: 5px;
-        background-color: #F7FE72;
-        width: 32px;
-        height: 32px; }
-        .text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:hover {
-          opacity: 1; }
-        .text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03:active {
-          opacity: 1;
-          box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
-          -webkit-transform: translateY(1px);
-          -moz-transform: translateY(1px);
-          -o-transform: translateY(1px);
-          -ms-transform: translateY(1px);
-          transform: translateY(1px); }
-        .text-footer-container .text-footer-hsm-container .text-footer-select-03 .text-footer--btn-select-03 svg {
-          font-size: 1rem; }
-  .text-footer-container .text-footer-files-container {
-    position: absolute;
-    right: 0;
-    top: -55px;
-    padding: 5px;
-    background-color: rgba(0, 0, 0, 0.4);
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    z-index: 1; }
-    .text-footer-container .text-footer-files-container.horizontal {
-      right: -55px;
-      flex-direction: column; }
-    .text-footer-container .text-footer-files-container .files-btn {
-      transition-duration: 300ms;
-      transition-property: opacity;
-      opacity: .8;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 10px;
-      padding: 3px;
-      width: 40px;
-      height: 40px;
-      font-size: 1rem;
-      color: #FFF; }
-      .text-footer-container .text-footer-files-container .files-btn:hover {
-        opacity: 1; }
-      .text-footer-container .text-footer-files-container .files-btn svg {
-        color: #FFF; }
-      .text-footer-container .text-footer-files-container .files-btn.images {
-        background-color: #9575cd;
-        margin-right: 5px; }
-        .text-footer-container .text-footer-files-container .files-btn.images.margin-bottom {
-          margin-right: unset;
-          margin-bottom: 5px; }
-      .text-footer-container .text-footer-files-container .files-btn.docs {
-        background-color: #7986cb; }
-  .text-footer-container .text-footer-preview-container {
-    cursor: default;
-    position: absolute;
-    left: 0;
-    background-color: #F1f1f1;
-    border: 2px solid #CCC;
-    border-bottom: unset;
-    border-top-left-radius: 2.5px;
-    border-top-right-radius: 2.5px; }
-    .text-footer-container .text-footer-preview-container.isDoc {
-      top: -50px;
-      width: 100%;
-      height: 45px; }
-    .text-footer-container .text-footer-preview-container.isImg, .text-footer-container .text-footer-preview-container.isMultiple {
-      top: -205px;
-      width: 100%;
-      height: 200px; }
-      .text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
-        height: 170px; }
-    .text-footer-container .text-footer-preview-container.isError {
-      top: -80px;
-      width: 100%;
-      height: 75px; }
-    
-  .text-footer-container .text-footer-alt {
-    margin-top: -12px;
-    width: 100%;
-    padding: 0 10px; }
-    .text-footer-container .text-footer-alt .text-footer-out-session {
-      margin-top: 12px; }
-    .text-footer-container .text-footer-alt .text-footer-sem-24h {
-      font-size: .8rem;
-      text-align: right;
-      font-weight: 600;
-      letter-spacing: -0.5px;
-      color: #dd7f0c;
-      margin-top: 5px;
-      position: absolute;
-      right: 0; }
-    .text-footer-container .text-footer-alt .sem-templates {
-      margin-top: 10px;
-      font-size: .8rem;
-      text-align: right;
-      font-weight: 600;
-      letter-spacing: -0.5px;
-      color: #921e12; }
-    .text-footer-container .text-footer-alt .text-footer-templates {
-      position: relative;
-      width: 100%; }
-      .text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection {
-        width: 100%;
-        display: flex;
-        align-items: center; }
-        .text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection h4 {
-          margin-right: 5px; }
-        .text-footer-container .text-footer-alt .text-footer-templates .text-footer-group-selection .sm__select {
-          flex: 1; }
+  position: relative;
+}
+.text-footer-container .text-footer {
+  min-height: 48px;
+  box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.45);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ccc;
+  padding: 5px 2px 5px 5px;
+  border-radius: 5px;
+}
+.text-footer-container .text-footer.full {
+  width: 100%;
+}
+.text-footer-container .text-footer.almostFull {
+  width: 95%;
+}
+.text-footer-container .text-footer.medium {
+  width: 75%;
+}
+.text-footer-container.bigger .text-footer {
+  height: 80px;
+}
+.text-footer-container.bigger .text-footer > textarea {
+  font-size: 14px;
+  height: 75px;
+  max-height: 75px;
+  min-height: 75px;
+}
+.text-footer-container textarea {
+  margin: 0 5px;
+  border: unset;
+  flex: 1;
+  resize: none;
+  min-height: 30px;
+  max-height: 60px;
+  font-size: 14px;
+  font-family: inherit;
+  background: inherit;
+}
+.text-footer-container textarea:focus {
+  outline: unset;
+}
+.text-footer-container textarea::placeholder {
+  font-size: 12px;
+}
+.text-footer-container .text-footer-audio {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.text-footer-container audio {
+  flex: 1;
+  outline: unset;
+  width: auto;
+  height: 38px;
+}
+.text-footer-container .delete-audio {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e74c3c;
+  transition: background 300ms;
+  border-radius: 50%;
+  font-size: 16px;
+  padding: 10px;
+  cursor: pointer;
+  margin: 0 5px;
+  width: 31px;
+  height: 31px;
+}
+.text-footer-container .delete-audio:hover {
+  background-color: rgba(208, 0, 0, 0.2);
+}
+.text-footer-container .max-characters {
+  font-size: 9.2px;
+  z-index: 1;
+  color: #444;
+  position: relative;
+  top: 30px;
+  left: -30px;
+}
+.text-footer-container .max-characters.no-width {
+  width: 0;
+}
+.text-footer-container .text-footer-actions {
+  display: flex;
+}
+.text-footer-container .text-footer-actions.outside-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  top: -30px;
+  right: 35px;
+  background-color: #fafafa;
+}
+.text-footer-container .text-footer-actions .text-footer-actions--btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #777;
+  border-radius: 50%;
+  transition: background 300ms;
+  padding: 10px;
+  font-size: 16px;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  margin-right: 2.5px;
+}
+.text-footer-container .text-footer-actions .text-footer-actions--btn:last-child {
+  margin-right: unset;
+}
+.text-footer-container .text-footer-actions .text-footer-actions--btn:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.text-footer-container .text-footer-actions .text-footer-actions--btn.files-activated {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.text-footer-container .text-footer-actions .text-footer-actions--btn.audio-activated {
+  background-color: rgba(208, 0, 0, 0.7);
+  color: #fff;
+}
+.text-footer-container .text-footer-actions .text-footer-actions--btn.left-button {
+  position: absolute;
+  left: 0;
+}
+.text-footer-container .text-footer-hsm-container {
+  margin: 12px 0 7px 0;
+}
+.text-footer-container .text-footer-hsm-container.full {
+  width: 100%;
+}
+.text-footer-container .text-footer-hsm-container.almostFull {
+  width: 95%;
+}
+.text-footer-container .text-footer-hsm-container.medium {
+  width: 75%;
+}
+.text-footer-container .text-footer-hsm-container .text-footer-v-select {
+  border-radius: 5px;
+  margin-bottom: 5px;
+}
+.text-footer-container .text-footer-hsm-container .text-footer-select-03 {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+}
+.text-footer-container
+  .text-footer-hsm-container
+  .text-footer-select-03
+  .text-footer-v-select {
+  flex: 1;
+}
+.text-footer-container
+  .text-footer-hsm-container
+  .text-footer-select-03
+  .text-footer--btn-select-03 {
+  transition-duration: 300ms;
+  user-select: none;
+  cursor: pointer;
+  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+  border-radius: 2.5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+  margin-bottom: 5px;
+  background-color: #f7fe72;
+  width: 32px;
+  height: 32px;
+}
+.text-footer-container
+  .text-footer-hsm-container
+  .text-footer-select-03
+  .text-footer--btn-select-03:hover {
+  opacity: 1;
+}
+.text-footer-container
+  .text-footer-hsm-container
+  .text-footer-select-03
+  .text-footer--btn-select-03:active {
+  opacity: 1;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
+  -webkit-transform: translateY(1px);
+  -moz-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+.text-footer-container
+  .text-footer-hsm-container
+  .text-footer-select-03
+  .text-footer--btn-select-03
+  svg {
+  font-size: 16px;
+}
+.text-footer-container .text-footer-files-container {
+  position: absolute;
+  right: 0;
+  top: -55px;
+  padding: 5px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+}
+.text-footer-container .text-footer-files-container.horizontal {
+  right: -55px;
+  flex-direction: column;
+}
+.text-footer-container .text-footer-files-container .files-btn {
+  transition-duration: 300ms;
+  transition-property: opacity;
+  opacity: 0.8;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  padding: 3px;
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  color: #fff;
+}
+.text-footer-container .text-footer-files-container .files-btn:hover {
+  opacity: 1;
+}
+.text-footer-container .text-footer-files-container .files-btn svg {
+  color: #fff;
+}
+.text-footer-container .text-footer-files-container .files-btn.images {
+  background-color: #9575cd;
+  margin-right: 5px;
+}
+.text-footer-container .text-footer-files-container .files-btn.images.margin-bottom {
+  margin-right: unset;
+  margin-bottom: 5px;
+}
+.text-footer-container .text-footer-files-container .files-btn.docs {
+  background-color: #7986cb;
+}
+.text-footer-container .text-footer-files-container .files-btn.system {
+  background-color: #49a349;
+  margin-left: 5px;
+}
+.text-footer-container .text-footer-files-container .files-btn.both {
+  font-size: 15.2px;
+  background-color: rgb(85, 85, 236);
+  flex-direction: column;
+}
+.text-footer-container .text-footer-files-container .files-btn.both svg:nth-child(1) {
+  transform: translateX(5px);
+}
+.text-footer-container .text-footer-files-container .files-btn.both svg:nth-child(2) {
+  transform: translateX(-5px);
+}
+
+.text-footer-container .text-footer-preview-container {
+  width: 100%;
+  cursor: default;
+  position: absolute;
+  left: 0;
+  background-color: #f1f1f1;
+  border: 2px solid #ccc;
+  border-bottom: unset;
+  border-top-left-radius: 2.5px;
+  border-top-right-radius: 2.5px;
+}
+.text-footer-container .text-footer-preview-container.isDoc {
+  top: -50px;
+  width: 100%;
+  height: 45px;
+}
+.text-footer-container .text-footer-preview-container.isImg,
+.text-footer-container .text-footer-preview-container.isMultiple {
+  top: -205px;
+  width: 100%;
+  height: 200px;
+}
+.text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
+  height: 170px;
+}
+.text-footer-container .text-footer-preview-container.isError {
+  top: -80px;
+  width: 100%;
+  height: 75px;
+}
+
+.text-footer-container .text-footer-alt {
+  margin-top: -12px;
+  width: 100%;
+  padding: 0 10px;
+}
+.text-footer-container .text-footer-alt .text-footer-out-session {
+  margin-top: 12px;
+}
+.text-footer-container .text-footer-alt .text-footer-sem-24h {
+  font-size: 12.8px;
+  text-align: right;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  color: #dd7f0c;
+  margin-top: 5px;
+  position: absolute;
+  right: 0;
+}
+.text-footer-container .text-footer-alt .sem-templates {
+  margin-top: 10px;
+  font-size: 12.8px;
+  text-align: right;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  color: #921e12;
+}
+.text-footer-container .text-footer-alt .text-footer-templates {
+  position: relative;
+  width: 100%;
+}
+.text-footer-container
+  .text-footer-alt
+  .text-footer-templates
+  .text-footer-group-selection {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.text-footer-container
+  .text-footer-alt
+  .text-footer-templates
+  .text-footer-group-selection
+  h4 {
+  margin-right: 5px;
+}
+.text-footer-container
+  .text-footer-alt
+  .text-footer-templates
+  .text-footer-group-selection
+  .sm__select {
+  flex: 1;
+}
 
 .vs__dropdown-menu {
-  font-size: 0.85rem !important; }
+  font-size: 13.6px !important;
+}
 
-.emoji-mart-anchor, .emoji-mart-emoji span {
-  cursor: pointer !important; }
+.emoji-mart-anchor,
+.emoji-mart-emoji span {
+  cursor: pointer !important;
+}
 
 .emoji-mart {
-  z-index: 2 !important; }
+  z-index: 2 !important;
+}
 
 .emoji-mart-scroll {
-  overflow-x: hidden; }
-
+  overflow-x: hidden;
+}
 </style>