vue-intergrall-plugins 0.0.280 → 0.0.281

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

@@ -1,817 +1,817 @@
-<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>
+        <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>