vue-intergrall-plugins 1.1.90 → 1.2.0

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

@@ -1,1007 +1,1007 @@
-<template>
-  <div class="text-footer-container" :class="{ bigger: cssStyle.height }" v-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}`"
-        :down="emojiSettings.openEmojisFrom == 'top' ? false : true" :small="emojiSettings.smallEmojis"
-        :biggerTextarea="cssStyle.height ? true : false" @insert-emoji="insertEmoji" />
-      <transition name="fade">
-        <Loader v-if="isSending" />
-      </transition>
-      <textarea class="js-autoresize" v-if="!audioFile" v-model="message" :id="`text-footer-${this.textId}`"
-        :disabled="textareaSettings.disabled" :placeholder="textareaSettings.placeholderMessage"
-        @input="sendFinalMessage" @keydown.up="toggleStandardMessages" @keydown.down="toggleStandardMessages"
-        @keydown.esc="closeEmojis" @keydown.enter="sendMessageHandler" @paste="pasteImage"></textarea>
-      <div class="text-footer-audio" v-else>
-        <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 }" :message="message"
-        :maxCharacters="textareaSettings.maxCharacters" />
-      <div v-if="
-        buttons.hasFiles ||
-        buttons.hasAudio ||
-        buttons.hasExpand ||
-        formattedMessageSettings.hasStandardMessages ||
-        buttons.hasScreenShare ||
-        buttons.hasDownloadAll ||
-        (customButtons && customButtons.length)
-      " 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`" />
-        <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 v-show="buttons.hasExpand && !audioFile" :ref="`${textId}-expand`"
-          @expand-textarea="$emit('expand-textarea')" :dictionary="dictionary" />
-        <template v-if="customButtons && customButtons.length">
-          <div v-for="(button, index) in customButtons" :key="button.id || index" class="text-footer-actions--btn"
-            @click="button.callback(returnParams(button.params))" :title="button.title">
-            <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>
-          </div>
-        </template>
-      </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 Clickaway from '@/directives/clickaway';
-import { resetTargets, setResizeListeners } from "../../services/autoResize";
-import { returnMessageWithHexa } from "../../services/textFormatting";
-
-import Loader from "../Loader/Loader";
-import BtnDownloadAllFiles from "./BtnDownloadAllFiles";
-import BtnEmojis from "./BtnEmojis";
-import BtnExpand from "./BtnExpand";
-import BtnFiles from "./BtnFiles";
-import BtnMic from "./BtnMic";
-import BtnScreenShare from "./BtnScreenShare";
-import BtnStandardMessages from "./BtnStandardMessages";
-import RemainingCharacters from "./RemainingCharacters";
-import StandardMessages from "./StandardMessages";
-
-export default {
-  components: {
-    BtnEmojis,
-    Loader,
-    BtnMic,
-    BtnFiles,
-    BtnExpand,
-    RemainingCharacters,
-    BtnStandardMessages,
-    StandardMessages,
-    BtnScreenShare,
-    BtnDownloadAllFiles,
-  },
-  directives: {
-    clickaway: Clickaway
-  },
-  props: {
-    buttons: {
-      type: Object,
-      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,
-    },
-    textareaSettings: {
-      type: Object,
-      default: () => {
-        return {
-          placeholderMessage: "",
-          maxCharacters: 0,
-          sendOnEnter: false,
-          disabled: false,
-        };
-      },
-      required: false,
-    },
-    emojiSettings: {
-      type: Object,
-      default: () => {
-        return { openEmojisFrom: "top", smallEmojis: false };
-      },
-      required: false,
-    },
-    formattedMessageSettings: {
-      type: Object,
-      default: () => {
-        return { hasStandardMessages: false, msgType: 0, token_cliente: "" };
-      },
-      required: false,
-    },
-    fileSettings: {
-      type: Object,
-      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,
-    },
-    isMainChat: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isSending: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    dictionary: {
-      type: Object,
-      required: true,
-    },
-    hasButtonFiles: {
-      type: Boolean,
-      required: false,
-    },
-    externalFiles: {
-      type: Array,
-      required: false,
-    },
-    customButtons: {
-      type: Array,
-      required: false
-    }
-  },
-  data() {
-    return {
-      message: "",
-      openFiles: false,
-      file: [],
-      hasAnyFile: false,
-      imagePreview: "",
-      isDoc: false,
-      fileFormatError: false,
-      audioFile: "",
-      audioSource: "",
-      showStandardMessages: false,
-      messageType: 1,
-    };
-  },
-  created() {
-    this.$root.$refs[`tf-${this.textId}`] = this;
-  },
-  mounted() {
-    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.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);
-      }
-    },
-    away() {
-      if (this.$refs[`${this.textId}-file`])
-        this.$refs[`${this.textId}-file`].openFiles = false;
-    },
-    setDefaultMessage(msg) {
-      this.message = msg;
-      this.sendFinalMessage();
-    },
-    insertEmoji(emoji) {
-      try {
-        if (!emoji) return;
-        const textarea = document.querySelector(`#text-footer-${this.textId}`);
-        if (document.activeElement === textarea) {
-          const cursorStart = textarea.selectionStart;
-          const cursorEnd = textarea.selectionEnd;
-          if (cursorEnd == textarea.value.length) {
-            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;
-            textarea.setSelectionRange(initValue.length, initValue.length);
-          }
-        } else {
-          this.message += emoji.finalEmoji;
-        }
-        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.message || !this.message.trim()) && !this.hasAnyFile && !this.audioFile)
-        return false;
-
-      if (this.textareaSettings.disabled) return false;
-
-      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;
-      }
-
-      return true;
-    },
-    removeHTMLElementsFromMessage(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;
-    },
-    sendFinalMessage() {
-      const messageAux = this.formatMessage(this.message);
-      this.$emit("final-message", messageAux);
-    },
-    sendMessageHandler(event) {
-      this.sendMessage(event);
-    },
-    sendMessage(event) {
-      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.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);
-
-          if (
-            this.$refs[`emoji-text-${this.textId}`] &&
-            this.$refs[`emoji-text-${this.textId}`].showEmojis
-          )
-            this.$refs[`emoji-text-${this.textId}`].toggleEmojiSelection();
-
-          this.resetFooterData();
-        }
-      }
-    },
-    focusTextarea() {
-      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();
-    },
-    returnObjectMessage(message) {
-      return {
-        message,
-        attachment: this.hasAnyFile ? this.file : false,
-        isDoc: this.isDoc,
-        imagePreview: this.imagePreview,
-        isAudio: this.audioFile ? true : false,
-        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.$emit("set-file-vars", fileObj);
-    },
-    openImage(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;
-    },
-    deleteAudio() {
-      this.$refs[`${this.textId}-mic`].deleteMediaRecorder();
-      this.audioFile = "";
-      this.audioSource = "";
-    },
-    returnFileType(file, stopAlert) {
-      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";
-
-      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;
-    },
-    filesHandler(files) {
-      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;
-          }
-          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,
-          });
-        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}`,
-          });
-      }
-    },
-    dropFile(e) {
-      try {
-        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);
-        }
-      } catch (e) {
-        console.error("Nao foi possivel colar a/o imagem/documento");
-        console.error(e);
-      }
-    },
-    handleScreenShare() {
-      this.$emit("handle-screen-share");
-    },
-    toggleStandardMessages() {
-      if (this.formattedMessageSettings.hasStandardMessages) {
-        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;
-    },
-    returnParams(params) {
-      const defaultParams = {
-        message: this.message,
-      };
-
-      if (!params) return defaultParams;
-
-      const keys = params.instanceKeys.split("|");
-      if (!keys || !keys.length)
-        return {
-          defaultParams,
-          ...params.values,
-        };
-
-      const customParams = { ...params.values };
-      keys.forEach((key) => {
-        if (this[key]) customParams[key] = this[key];
-        else console.warn(`Cant find ${key} on 'this' instance`);
-      });
-
-      return Object.keys(customParams).length ? customParams : defaultParams;
-    }
-  },
-  destroyed() {
-    // this.$root.$off("drop-file")
-    // this.$root.$off("toggle-msg-formatada")
-    // this.$root.$off("textarea-focus")
-    // this.$root.$off("clear-footer-message")
-    // this.$root.$off("resize-footer-template")
-
-    window.removeEventListener("message", this.listenerPostMessage);
-  },
-};
-</script>
-
-<style>
-.text-footer-container {
-  display: flex;
-  justify-content: center;
-  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: 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;
-  height: 38px;
-}
-
-.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;
-  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 .old-footer-preview-container {
-  width: 100%;
-  cursor: default;
-  position: absolute;
-  right: 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 .old-footer-preview-container.isDoc {
-  top: -50px;
-  width: 100%;
-  height: 45px;
-}
-
-.text-footer-container .old-footer-preview-container.isImg,
-.text-footer-container .old-footer-preview-container.isMultiple {
-  top: -205px;
-  width: 100%;
-  height: 200px;
-  min-width: 300px;
-}
-
-.text-footer-container .old-footer-preview-container.isImg .text-footer-image-preview {
-  height: 170px;
-}
-
-.text-footer-container .old-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: 13.6px !important;
-}
-
-.emoji-mart-anchor,
-.emoji-mart-emoji span {
-  cursor: pointer !important;
-}
-
-.emoji-mart {
-  z-index: 2 !important;
-}
-
-.emoji-mart-scroll {
-  overflow-x: hidden;
-}
-</style>
+<template>
+  <div class="text-footer-container" :class="{ bigger: cssStyle.height }" v-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}`"
+        :down="emojiSettings.openEmojisFrom == 'top' ? false : true" :small="emojiSettings.smallEmojis"
+        :biggerTextarea="cssStyle.height ? true : false" @insert-emoji="insertEmoji" />
+      <transition name="fade">
+        <Loader v-if="isSending" />
+      </transition>
+      <textarea class="js-autoresize" v-if="!audioFile" v-model="message" :id="`text-footer-${this.textId}`"
+        :disabled="textareaSettings.disabled" :placeholder="textareaSettings.placeholderMessage"
+        @input="sendFinalMessage" @keydown.up="toggleStandardMessages" @keydown.down="toggleStandardMessages"
+        @keydown.esc="closeEmojis" @keydown.enter="sendMessageHandler" @paste="pasteImage"></textarea>
+      <div class="text-footer-audio" v-else>
+        <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 }" :message="message"
+        :maxCharacters="textareaSettings.maxCharacters" />
+      <div v-if="
+        buttons.hasFiles ||
+        buttons.hasAudio ||
+        buttons.hasExpand ||
+        formattedMessageSettings.hasStandardMessages ||
+        buttons.hasScreenShare ||
+        buttons.hasDownloadAll ||
+        (customButtons && customButtons.length)
+      " 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`" />
+        <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 v-show="buttons.hasExpand && !audioFile" :ref="`${textId}-expand`"
+          @expand-textarea="$emit('expand-textarea')" :dictionary="dictionary" />
+        <template v-if="customButtons && customButtons.length">
+          <div v-for="(button, index) in customButtons" :key="button.id || index" class="text-footer-actions--btn"
+            @click="button.callback(returnParams(button.params))" :title="button.title">
+            <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>
+          </div>
+        </template>
+      </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 Clickaway from '@/directives/clickaway';
+import { resetTargets, setResizeListeners } from "../../services/autoResize";
+import { returnMessageWithHexa } from "../../services/textFormatting";
+
+import Loader from "../Loader/Loader";
+import BtnDownloadAllFiles from "./BtnDownloadAllFiles";
+import BtnEmojis from "./BtnEmojis";
+import BtnExpand from "./BtnExpand";
+import BtnFiles from "./BtnFiles";
+import BtnMic from "./BtnMic";
+import BtnScreenShare from "./BtnScreenShare";
+import BtnStandardMessages from "./BtnStandardMessages";
+import RemainingCharacters from "./RemainingCharacters";
+import StandardMessages from "./StandardMessages";
+
+export default {
+  components: {
+    BtnEmojis,
+    Loader,
+    BtnMic,
+    BtnFiles,
+    BtnExpand,
+    RemainingCharacters,
+    BtnStandardMessages,
+    StandardMessages,
+    BtnScreenShare,
+    BtnDownloadAllFiles,
+  },
+  directives: {
+    clickaway: Clickaway
+  },
+  props: {
+    buttons: {
+      type: Object,
+      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,
+    },
+    textareaSettings: {
+      type: Object,
+      default: () => {
+        return {
+          placeholderMessage: "",
+          maxCharacters: 0,
+          sendOnEnter: false,
+          disabled: false,
+        };
+      },
+      required: false,
+    },
+    emojiSettings: {
+      type: Object,
+      default: () => {
+        return { openEmojisFrom: "top", smallEmojis: false };
+      },
+      required: false,
+    },
+    formattedMessageSettings: {
+      type: Object,
+      default: () => {
+        return { hasStandardMessages: false, msgType: 0, token_cliente: "" };
+      },
+      required: false,
+    },
+    fileSettings: {
+      type: Object,
+      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,
+    },
+    isMainChat: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    isSending: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    hasButtonFiles: {
+      type: Boolean,
+      required: false,
+    },
+    externalFiles: {
+      type: Array,
+      required: false,
+    },
+    customButtons: {
+      type: Array,
+      required: false
+    }
+  },
+  data() {
+    return {
+      message: "",
+      openFiles: false,
+      file: [],
+      hasAnyFile: false,
+      imagePreview: "",
+      isDoc: false,
+      fileFormatError: false,
+      audioFile: "",
+      audioSource: "",
+      showStandardMessages: false,
+      messageType: 1,
+    };
+  },
+  created() {
+    this.$root.$refs[`tf-${this.textId}`] = this;
+  },
+  mounted() {
+    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.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);
+      }
+    },
+    away() {
+      if (this.$refs[`${this.textId}-file`])
+        this.$refs[`${this.textId}-file`].openFiles = false;
+    },
+    setDefaultMessage(msg) {
+      this.message = msg;
+      this.sendFinalMessage();
+    },
+    insertEmoji(emoji) {
+      try {
+        if (!emoji) return;
+        const textarea = document.querySelector(`#text-footer-${this.textId}`);
+        if (document.activeElement === textarea) {
+          const cursorStart = textarea.selectionStart;
+          const cursorEnd = textarea.selectionEnd;
+          if (cursorEnd == textarea.value.length) {
+            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;
+            textarea.setSelectionRange(initValue.length, initValue.length);
+          }
+        } else {
+          this.message += emoji.finalEmoji;
+        }
+        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.message || !this.message.trim()) && !this.hasAnyFile && !this.audioFile)
+        return false;
+
+      if (this.textareaSettings.disabled) return false;
+
+      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;
+      }
+
+      return true;
+    },
+    removeHTMLElementsFromMessage(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;
+    },
+    sendFinalMessage() {
+      const messageAux = this.formatMessage(this.message);
+      this.$emit("final-message", messageAux);
+    },
+    sendMessageHandler(event) {
+      this.sendMessage(event);
+    },
+    sendMessage(event) {
+      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.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);
+
+          if (
+            this.$refs[`emoji-text-${this.textId}`] &&
+            this.$refs[`emoji-text-${this.textId}`].showEmojis
+          )
+            this.$refs[`emoji-text-${this.textId}`].toggleEmojiSelection();
+
+          this.resetFooterData();
+        }
+      }
+    },
+    focusTextarea() {
+      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();
+    },
+    returnObjectMessage(message) {
+      return {
+        message,
+        attachment: this.hasAnyFile ? this.file : false,
+        isDoc: this.isDoc,
+        imagePreview: this.imagePreview,
+        isAudio: this.audioFile ? true : false,
+        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.$emit("set-file-vars", fileObj);
+    },
+    openImage(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;
+    },
+    deleteAudio() {
+      this.$refs[`${this.textId}-mic`].deleteMediaRecorder();
+      this.audioFile = "";
+      this.audioSource = "";
+    },
+    returnFileType(file, stopAlert) {
+      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";
+
+      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;
+    },
+    filesHandler(files) {
+      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;
+          }
+          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,
+          });
+        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}`,
+          });
+      }
+    },
+    dropFile(e) {
+      try {
+        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);
+        }
+      } catch (e) {
+        console.error("Nao foi possivel colar a/o imagem/documento");
+        console.error(e);
+      }
+    },
+    handleScreenShare() {
+      this.$emit("handle-screen-share");
+    },
+    toggleStandardMessages() {
+      if (this.formattedMessageSettings.hasStandardMessages) {
+        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;
+    },
+    returnParams(params) {
+      const defaultParams = {
+        message: this.message,
+      };
+
+      if (!params) return defaultParams;
+
+      const keys = params.instanceKeys.split("|");
+      if (!keys || !keys.length)
+        return {
+          defaultParams,
+          ...params.values,
+        };
+
+      const customParams = { ...params.values };
+      keys.forEach((key) => {
+        if (this[key]) customParams[key] = this[key];
+        else console.warn(`Cant find ${key} on 'this' instance`);
+      });
+
+      return Object.keys(customParams).length ? customParams : defaultParams;
+    }
+  },
+  destroyed() {
+    // this.$root.$off("drop-file")
+    // this.$root.$off("toggle-msg-formatada")
+    // this.$root.$off("textarea-focus")
+    // this.$root.$off("clear-footer-message")
+    // this.$root.$off("resize-footer-template")
+
+    window.removeEventListener("message", this.listenerPostMessage);
+  },
+};
+</script>
+
+<style>
+.text-footer-container {
+  display: flex;
+  justify-content: center;
+  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: 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;
+  height: 38px;
+}
+
+.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;
+  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 .old-footer-preview-container {
+  width: 100%;
+  cursor: default;
+  position: absolute;
+  right: 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 .old-footer-preview-container.isDoc {
+  top: -50px;
+  width: 100%;
+  height: 45px;
+}
+
+.text-footer-container .old-footer-preview-container.isImg,
+.text-footer-container .old-footer-preview-container.isMultiple {
+  top: -205px;
+  width: 100%;
+  height: 200px;
+  min-width: 300px;
+}
+
+.text-footer-container .old-footer-preview-container.isImg .text-footer-image-preview {
+  height: 170px;
+}
+
+.text-footer-container .old-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: 13.6px !important;
+}
+
+.emoji-mart-anchor,
+.emoji-mart-emoji span {
+  cursor: pointer !important;
+}
+
+.emoji-mart {
+  z-index: 2 !important;
+}
+
+.emoji-mart-scroll {
+  overflow-x: hidden;
+}
+</style>