vue-intergrall-plugins 0.0.300 → 0.0.500

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

@@ -1,817 +1,1075 @@
-<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 
-        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>
-        <audio :src="audioSource" controls="controls"></audio>
-        <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" 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"
-        />
-      </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 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, BtnStandardMessages, StandardMessages, BtnScreenShare, BtnDownloadAllFiles },
-  mixins: [ 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
-    }
-  },
-  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() {
-      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")
-    // 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>
-.toasted svg {
-  margin-right: 10px; }
-
-.d-none {
-  display: none; }
-
-ul {
-  list-style-type: none; }
-
-.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: .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: -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: 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-files-container .files-btn.system {
-        background-color: #49a349;
-        margin-left: 5px }
-      .text-footer-container .text-footer-files-container .files-btn.both {
-        font-size: .95rem;
-        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: .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; }
-
-.vs__dropdown-menu {
-  font-size: 0.85rem !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-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}`"
+        :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
+        "
+        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"
+        />
+      </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 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,
+    BtnStandardMessages,
+    StandardMessages,
+    BtnScreenShare,
+    BtnDownloadAllFiles,
+  },
+  mixins: [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,
+    },
+  },
+  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() {
+      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")
+    // 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>
+.toasted svg {
+  margin-right: 10px;
+}
+
+.d-none {
+  display: none;
+}
+
+ul {
+  list-style-type: none;
+}
+
+.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: 0.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: 0.875rem;
+  font-family: inherit;
+  background: inherit;
+}
+.text-footer-container textarea:focus {
+  outline: unset;
+}
+.text-footer-container textarea::placeholder {
+  font-size: 0.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: 0.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: -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: 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: 0.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-files-container .files-btn.system {
+  background-color: #49a349;
+  margin-left: 5px;
+}
+.text-footer-container .text-footer-files-container .files-btn.both {
+  font-size: 0.95rem;
+  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: 0.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: 0.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;
+}
+
+.vs__dropdown-menu {
+  font-size: 0.85rem !important;
+}
+
+.emoji-mart-anchor,
+.emoji-mart-emoji span {
+  cursor: pointer !important;
+}
+
+.emoji-mart {
+  z-index: 2 !important;
+}
+
+.emoji-mart-scroll {
+  overflow-x: hidden;
+}
+</style>