vue-intergrall-plugins 1.2.0 → 1.2.18

package/dist/vue-intergrall-plugins.ssr.js

@@ -6779,10 +6779,10 @@ var __vue_component__$u = __vue_component__$t;var textoLongo = {
     if (!type || !mku || !name || !mkuDownload) {
       if (anexos.anexo) {
         ignoreMku = true;
-        imgAnexo = anexos.imgAnexo ? anexos.imgAnexo : '';
-        tipoDoc = anexos.tipoDoc ? anexos.tipoDoc : '';
-        docAnexo = anexos.docAnexo ? anexos.docAnexo : '';
-        nomeArquivo = anexos.nomeArquivo ? anexos.nomeArquivo : '';
+        imgAnexo = anexos.imgAnexo ? anexos.imgAnexo : "";
+        tipoDoc = anexos.tipoDoc ? anexos.tipoDoc : "";
+        docAnexo = anexos.docAnexo ? anexos.docAnexo : "";
+        nomeArquivo = anexos.nomeArquivo ? anexos.nomeArquivo : "";
         audio = anexos.audio ? anexos.audio : false;
       } else {
         return anexos;
@@ -6861,7 +6861,7 @@ var __vue_component__$u = __vue_component__$t;var textoLongo = {
         }
         break;
     }
-    return Object.assign(anexos, {
+    return Object.assign({}, anexos, {
       anexo: anexo,
       imgAnexo: imgAnexo,
       tipoDoc: tipoDoc,
@@ -8339,19 +8339,39 @@ var script$d = {
     return {
       imgErro: false,
       imgMsgErro: "",
-      fileAccessError: false
+      fileAccessError: false,
+      hideTranscription: false
     };
   },
+  watch: {
+    anexo: function anexo(newAnexo) {
+      var _this = this;
+      this.fileAccessError = false;
+      this.imgErro = false;
+      this.imgMsgErro = "";
+      if (this.validarAnexo()) {
+        this.setFileVars(newAnexo, {
+          dominio: this.dominio
+        });
+        this.$nextTick(function () {
+          var hasValidFile = _this.imageURL || _this.docURL || _this.audio || _this.video;
+          if (!hasValidFile) {
+            _this.fileAccessError = true;
+          }
+        });
+      }
+    }
+  },
   mounted: function mounted() {
-    var _this = this;
+    var _this2 = this;
     if (this.validarAnexo()) {
       this.setFileVars(this.anexo, {
         dominio: this.dominio
       });
       this.$nextTick(function () {
-        var hasValidFile = _this.imageURL || _this.docURL || _this.audio || _this.video;
+        var hasValidFile = _this2.imageURL || _this2.docURL || _this2.audio || _this2.video;
         if (!hasValidFile) {
-          _this.fileAccessError = true;
+          _this2.fileAccessError = true;
         }
       });
     }
@@ -8407,7 +8427,7 @@ var __vue_render__$d = function __vue_render__() {
     attrs: {
       "icon": ['fas', 'exclamation-triangle']
     }
-  }), _vm._ssrNode(" <p>" + _vm._ssrEscape(_vm._s(_vm.filename || _vm.dictionary.arquivo_sem_nome || 'Arquivo sem nome')) + "</p>")], 2) : [_vm.imageURL ? _vm._ssrNode("<img" + _vm._ssrAttr("src", _vm.imageURL) + _vm._ssrAttr("alt", _vm.dictionary.alt_msg_img) + ">", "</img>") : _vm.audio ? _vm._ssrNode("<div class=\"divAudioPai\">", "</div>", [_vm._ssrNode("<audio controls=\"controls\" class=\"audioStyle\"><source" + _vm._ssrAttr("src", _vm.docURL) + _vm._ssrAttr("type", _vm.fileType) + ">\n          Sem suporte para o elemento audio\n        </audio> "), _c('audio-speed-control', {
+  }), _vm._ssrNode(" <p>" + _vm._ssrEscape("\n        " + _vm._s(_vm.filename || _vm.dictionary.arquivo_sem_nome || "Arquivo sem nome") + "\n      ") + "</p>")], 2) : [_vm.imageURL ? _vm._ssrNode("<img" + _vm._ssrAttr("src", _vm.imageURL) + _vm._ssrAttr("alt", _vm.dictionary.alt_msg_img) + ">", "</img>") : _vm.audio ? _vm._ssrNode("<div class=\"divAudioPai\">", "</div>", [_vm._ssrNode("<audio controls=\"controls\" class=\"audioStyle\"><source" + _vm._ssrAttr("src", _vm.docURL) + _vm._ssrAttr("type", _vm.fileType) + ">\n          Sem suporte para o elemento audio\n        </audio> "), _c('audio-speed-control', {
     on: {
       "change-speed": _vm.changeAudioSpeed
     }
@@ -8421,11 +8441,11 @@ var __vue_render__$d = function __vue_render__() {
     attrs: {
       "icon": ['fas', 'file-alt']
     }
-  }), _vm._ssrNode(" <p" + _vm._ssrAttr("title", _vm.filename) + ">" + _vm._ssrEscape(_vm._s(_vm.filename)) + "</p>")], 2), _vm._ssrNode(" " + (_vm.audio && _vm.hasTranscription ? "<div class=\"transcription-controls\">" + _vm._ssrEscape("\n        " + _vm._s(_vm.dictionary.transcricaoControl || 'Transcrever') + "\n      ") + "</div>" : "<!---->") + " "), _vm.audio && _vm.transcriptionText ? _vm._ssrNode("<div class=\"transcription-container\">", "</div>", [_vm._ssrNode("<div class=\"transcription-header\">", "</div>", [_vm._ssrNode((!_vm.hideTranscription ? "<p>" + _vm._ssrEscape(_vm._s("" + (_vm.dictionary.transcricaoLabel ? _vm.dictionary.transcricaoLabel + ":" : ''))) + "</p>" : "<!---->") + " "), _vm._ssrNode("<button class=\"transcription-button\">", "</button>", [_c('fa-icon', {
+  }), _vm._ssrNode(" <p" + _vm._ssrAttr("title", _vm.filename) + ">" + _vm._ssrEscape(_vm._s(_vm.filename)) + "</p>")], 2), _vm._ssrNode(" " + (_vm.audio && _vm.hasTranscription ? "<div class=\"transcription-controls\">" + _vm._ssrEscape("\n        " + _vm._s(_vm.dictionary.transcricaoControl || "Transcrever") + "\n      ") + "</div>" : "<!---->") + " "), _vm.audio && _vm.transcriptionText ? _vm._ssrNode("<div class=\"transcription-container\">", "</div>", [_vm._ssrNode("<div class=\"transcription-header\">", "</div>", [_vm._ssrNode((!_vm.hideTranscription ? "<p>" + _vm._ssrEscape(_vm._s("" + (_vm.dictionary.transcricaoLabel ? _vm.dictionary.transcricaoLabel + ":" : ''))) + "</p>" : "<!---->") + " "), _vm._ssrNode("<button class=\"transcription-button\">", "</button>", [_c('fa-icon', {
     attrs: {
       "icon": ['fas', "caret-" + (_vm.hideTranscription ? 'down' : 'up')]
     }
-  })], 1)], 2), _vm._ssrNode(" "), _vm.transcriptionLoading ? _vm._ssrNode("<div class=\"transcription-loader\">", "</div>", [_c('VueLoader')], 1) : !_vm.hideTranscription ? _vm._ssrNode("<p class=\"transcription-text\">" + _vm._ssrEscape(_vm._s(_vm.transcriptionText)) + "</p>") : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" "), _vm.showControlFiles ? _vm._ssrNode("<div class=\"file-actions\">", "</div>", [_vm.imageURL ? _vm._ssrNode("<span lass=\"file-action-button\">", "</span>", [_c('fa-icon', {
+  })], 1)], 2), _vm._ssrNode(" "), _vm.transcriptionLoading ? _vm._ssrNode("<div class=\"transcription-loader\">", "</div>", [_c('VueLoader')], 1) : !_vm.hideTranscription ? _vm._ssrNode("<p class=\"transcription-text\">" + _vm._ssrEscape("\n          " + _vm._s(_vm.transcriptionText) + "\n        ") + "</p>") : _vm._e()], 2) : _vm._e(), _vm._ssrNode(" "), _vm.showControlFiles ? _vm._ssrNode("<div class=\"file-actions\">", "</div>", [_vm.imageURL ? _vm._ssrNode("<span lass=\"file-action-button\">", "</span>", [_c('fa-icon', {
     directives: [{
       name: "tippy",
       rawName: "v-tippy"
@@ -8511,7 +8531,7 @@ var __vue_render__$d = function __vue_render__() {
     on: {
       "click": _vm.closeTippy
     }
-  }, [_vm._v("Cancelar")]), _vm._v(" "), _c('button', {
+  }, [_vm._v("\n                Cancelar\n              ")]), _vm._v(" "), _c('button', {
     staticClass: "confirm box-shadow",
     on: {
       "click": function click($event) {
@@ -8525,11 +8545,11 @@ var __vue_staticRenderFns__$d = [];
 /* style */
 var __vue_inject_styles__$d = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-14e512bc_0", {
+  inject("data-v-00e864df_0", {
     source: ".transcription-container{display:flex;flex-wrap:wrap;width:100%}.transcription-header{display:flex;justify-content:flex-end;align-items:center;gap:10px;width:100%}.transcription-header>p{flex:1}.transcription-button{background-color:transparent;border:none;cursor:pointer;transition:background 150ms ease-in-out;border-radius:5px;display:flex;justify-content:center;align-items:center}.transcription-button:hover{background:rgba(0,0,0,.1)}.transcription-controls{margin-top:10px;color:#00f;cursor:pointer}.transcription-controls:hover{text-decoration:underline}.transcription-loader{position:relative;height:30px;width:100%}.transcription-text{white-space:break-spaces;color:rgba(0,0,0,.6)}.tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme{background-color:#fff;border:1px solid #ccc;color:#333;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.tippy-confirmation p{margin-bottom:3px}.tippy-confirmation button{border:unset;background-color:#f1f1f1;border-radius:3px;padding:5px 8px;cursor:pointer;font-size:12px}.tippy-confirmation button.cancel{border-bottom:2px solid red;margin-right:15px}.tippy-confirmation button.confirm{border-bottom:2px solid green}",
     map: undefined,
     media: undefined
-  }), inject("data-v-14e512bc_1", {
+  }), inject("data-v-00e864df_1", {
     source: ".mensagem__principal .default-doc{background-color:var(--files-bg)}.mensagem__principal .default-doc:hover{background-color:var(--files-bg-hover)}.mensagem__outros .default-doc{background-color:rgba(100,100,100,.1)}.mensagem__outros .default-doc:hover{background-color:rgba(100,100,100,.3)}.default-doc:hover p{text-decoration:underline}.default-doc{display:flex;align-items:center;padding:10px;border-radius:5px;width:100%;max-width:100%;cursor:pointer;transition:background-color 150ms ease-in-out}.default-doc svg{font-size:19.2px;margin:0 5px}.default-doc p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;justify-content:flex-end;width:100%;padding:5px}.file-actions a{margin-right:0}.mensagem__principal .file-action-button{background-color:var(--files-bg)}.mensagem__outros .file-action-button{background-color:rgba(100,100,100,.1)}.mensagem__principal .file-action-button:hover{background-color:var(--files-bg-hover)}.mensagem__outros .file-action-button:hover{background-color:rgba(100,100,100,.3)}.file-action-button{display:flex;justify-content:center;align-items:center;margin-left:12px;cursor:pointer;padding:5px;border-radius:5px;transition:background-color 150ms ease-in-out}.file-action-button a{margin:0}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem-div-anexo{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden}.anexo-container{width:100%;margin-top:5px;overflow:hidden;display:flex;max-height:300px}.anexo-container .arquivo-erro,.anexo-container a{padding:10px 15px 15px 15px;display:flex;justify-content:center;align-items:center}.anexo-container p{text-overflow:ellipsis;overflow:hidden}.anexo-container .arquivo-erro,.anexo-container p{margin:0;margin-left:15px;font-size:14.4px}.anexo-container svg{font-size:32px}.anexo-mensagem audio .divAudioPai{outline:0;width:100%;margin-bottom:5px}.audioStyle{width:370px;min-width:calc(100% - 45px)}.divAudioPai{display:flex;background-color:#f1f3f4;border-radius:50%;width:100%;border-bottom-right-radius:26px;border-top-right-radius:26px}.anexo-mensagem video{flex:1;width:100%;max-width:350px;cursor:pointer;margin-bottom:5px}.anexos-links-container{width:100%;display:flex;justify-content:center;align-items:center}.anexos-links-container a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.anexos-links-container svg{cursor:pointer}.mensagem-div-anexo img{cursor:pointer;margin:10px 0;min-width:35px;width:100%;max-width:250px}.anexo-transition{width:100%;height:100%}.anexo-mensagem{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert{position:relative;padding:10.4px 19.2px;margin:5px 0;border:1px solid transparent;border-radius:4px;text-align:center}.alert svg{font-size:16.4px;margin-right:2px}.pdf{color:#e74c3c}.doc{color:#006bc9}.file-unavailable{opacity:.6;cursor:not-allowed;border:1px dashed rgba(255,0,0,.3);pointer-events:none;background-color:rgba(255,0,0,.05)}.file-unavailable:hover{background-color:rgba(255,0,0,.05)}.file-unavailable svg{color:#e74c3c;font-size:24px}.file-unavailable p{color:rgba(0,0,0,.5);text-decoration:line-through}",
     map: undefined,
     media: undefined
@@ -8538,7 +8558,7 @@ var __vue_inject_styles__$d = function __vue_inject_styles__(inject) {
 /* scoped */
 var __vue_scope_id__$d = undefined;
 /* module identifier */
-var __vue_module_identifier__$d = "data-v-14e512bc";
+var __vue_module_identifier__$d = "data-v-00e864df";
 /* functional template */
 var __vue_is_functional_template__$d = false;
 /* style inject shadow dom */
@@ -9253,10 +9273,10 @@ var LinkPreview = __vue_component__$e;var script$8 = {
         if (REACTION) {
           var hexa = REACTION.split("u").slice(1).map(function (code) {
             return "&#x".concat(code, ";");
-          }).join('');
+          }).join("");
           var finalEmoji = REACTION.split("u").slice(1).map(function (code) {
             return String.fromCodePoint(parseInt(code, 16));
-          }).join('');
+          }).join("");
           this.messageReaction = {
             hexa: hexa,
             finalEmoji: finalEmoji
@@ -9272,12 +9292,12 @@ var LinkPreview = __vue_component__$e;var script$8 = {
         finalEmoji: emoji.finalEmoji
       };
       this.isEmojisOpen = false;
-      var ckEditorContext = document.querySelector('.ck-editor');
+      var ckEditorContext = document.querySelector(".ck-editor");
       if (ckEditorContext) {
         this.$emit("insert-emoji", {
           finalEmoji: emoji.finalEmoji,
           hexa: emoji.hexa,
-          editorType: 'ckeditor'
+          editorType: "ckeditor"
         });
       } else {
         this.$emit("insert-emoji", emoji);
@@ -9513,7 +9533,7 @@ var __vue_render__$8 = function __vue_render__() {
     }
   }) : _vm._e(), _vm._v("\n        " + _vm._s(_vm.defaultReplyMessage ? _vm.defaultReplyMessage : _vm.dictionary.mensagem_reply_padrao) + "\n      ")], 1)]) : _vm._e(), _vm._v(" "), _vm.anexos && _vm.anexos.length ? _vm._l(_vm.anexos, function (anexo, index) {
     return _c('div', {
-      key: index + "_" + _vm.transcriptionLoading,
+      key: anexo.mku || index,
       staticClass: "mensagem-anexo"
     }, [_c('AnexoMensagem', {
       attrs: {
@@ -9934,7 +9954,7 @@ var __vue_inject_styles__$8 = undefined;
 /* scoped */
 var __vue_scope_id__$8 = undefined;
 /* module identifier */
-var __vue_module_identifier__$8 = "data-v-663b80d0";
+var __vue_module_identifier__$8 = "data-v-7fcf61b8";
 /* functional template */
 var __vue_is_functional_template__$8 = false;
 /* style inject */

package/package.json

@@ -1,61 +1,61 @@
-{
-  "name": "vue-intergrall-plugins",
-  "version": "1.2.0",
-  "description": "",
-  "main": "dist/vue-intergrall-plugins.ssr.js",
-  "browser": "dist/vue-intergrall-plugins.esm.js",
-  "module": "dist/vue-intergrall-plugins.esm.js",
-  "unpkg": "dist/vue-intergrall-plugins.min.js",
-  "files": [
-    "dist/*",
-    "src/**/*.vue"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "serve": "vue-cli-service serve dev/serve.js",
-    "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
-    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
-    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.15.6",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^10.4.14",
-    "cross-env": "^7.0.3",
-    "cssnano": "^5.1.15",
-    "minimist": "^1.2.5",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.6.14"
-  },
-  "peerDependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "@popperjs/core": "^2.11.2",
-    "core-js": "^3.18.1",
-    "vue": "^2.6.14",
-    "vue-select": "^3.13.0",
-    "vue-tippy": "^4.12.0",
-    "vue-toasted": "^1.1.28",
-    "vue2-google-maps": "^0.10.7"
-  },
-  "engines": {
-    "node": ">=12"
-  },
-  "dependencies": {
-    "vue-html2pdf": "^1.8.0"
-  }
-}
+{
+  "name": "vue-intergrall-plugins",
+  "version": "1.2.18",
+  "description": "",
+  "main": "dist/vue-intergrall-plugins.ssr.js",
+  "browser": "dist/vue-intergrall-plugins.esm.js",
+  "module": "dist/vue-intergrall-plugins.esm.js",
+  "unpkg": "dist/vue-intergrall-plugins.min.js",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.15.6",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.1.15",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.58.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "vue": "^2.6.14"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@popperjs/core": "^2.11.2",
+    "core-js": "^3.18.1",
+    "vue": "^2.6.14",
+    "vue-select": "^3.13.0",
+    "vue-tippy": "^4.12.0",
+    "vue-toasted": "^1.1.28",
+    "vue2-google-maps": "^0.10.7"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "vue-html2pdf": "^1.8.0"
+  }
+}

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

@@ -1,70 +1,137 @@
 <template>
   <div class="mensagem-div-anexo">
     <div class="anexo-mensagem">
-      <span v-if="fileAccessError" class="default-doc file-unavailable" 
-          :title="dictionary.arquivo_indisponivel || 'Arquivo indisponível ou foi removido'">
+      <span
+        v-if="fileAccessError"
+        class="default-doc file-unavailable"
+        :title="
+          dictionary.arquivo_indisponivel ||
+          'Arquivo indisponível ou foi removido'
+        "
+      >
         <fa-icon :icon="['fas', 'exclamation-triangle']" />
-        <p>{{ filename || dictionary.arquivo_sem_nome || 'Arquivo sem nome' }}</p>
+        <p>
+          {{ filename || dictionary.arquivo_sem_nome || "Arquivo sem nome" }}
+        </p>
       </span>
 
       <template v-else>
-        <img v-if="imageURL" @click="showImage(imageURL)" :src="imageURL" :alt="dictionary.alt_msg_img" />
+        <img
+          v-if="imageURL"
+          @click="showImage(imageURL)"
+          :src="imageURL"
+          :alt="dictionary.alt_msg_img"
+        />
         <div class="divAudioPai" v-else-if="audio">
           <audio ref="audioPlayer" class="audioStyle" controls="controls">
             <source :src="docURL" :type="fileType" />
             Sem suporte para o elemento audio
           </audio>
-          <audio-speed-control @change-speed="changeAudioSpeed"></audio-speed-control>
+          <audio-speed-control
+            @change-speed="changeAudioSpeed"
+          ></audio-speed-control>
         </div>
 
         <video v-else-if="video" controls="controls">
           <source :src="docURL" :type="fileType" />
           Sem suporte para o elemento video
         </video>
-        <span v-else-if="docURL" @click="openWindowFromURL(docURL)" class="default-doc">
+        <span
+          v-else-if="docURL"
+          @click="openWindowFromURL(docURL)"
+          class="default-doc"
+        >
           <fa-icon :class="[iconClass]" :icon="icon" />
           <p v-text="filename" :title="filename"></p>
         </span>
         <span v-else class="default-doc">
-          <fa-icon :class="[iconClass ? iconClass : '']" :icon="['fas', 'file-alt']" />
+          <fa-icon
+            :class="[iconClass ? iconClass : '']"
+            :icon="['fas', 'file-alt']"
+          />
           <p v-text="filename" :title="filename"></p>
         </span>
 
         <!-- Transcricao -->
-        <div v-if="audio && hasTranscription" class="transcription-controls" @click="emitTranscription">
-          {{ dictionary.transcricaoControl || 'Transcrever' }}
+        <div
+          v-if="audio && hasTranscription"
+          class="transcription-controls"
+          @click="emitTranscription"
+        >
+          {{ dictionary.transcricaoControl || "Transcrever" }}
         </div>
         <div v-if="audio && transcriptionText" class="transcription-container">
           <div class="transcription-header">
-            <p v-if="!hideTranscription" v-text="`${dictionary.transcricaoLabel ? `${dictionary.transcricaoLabel}:` : ''}`"></p>
-            <button @click="toggleHideTranscription" class="transcription-button">
-            <fa-icon :icon="['fas', `caret-${hideTranscription ? 'down' : 'up'}`]" />
-          </button>
+            <p
+              v-if="!hideTranscription"
+              v-text="
+                `${
+                  dictionary.transcricaoLabel
+                    ? `${dictionary.transcricaoLabel}:`
+                    : ''
+                }`
+              "
+            ></p>
+            <button
+              @click="toggleHideTranscription"
+              class="transcription-button"
+            >
+              <fa-icon
+                :icon="['fas', `caret-${hideTranscription ? 'down' : 'up'}`]"
+              />
+            </button>
           </div>
-            <div v-if="transcriptionLoading" class="transcription-loader">
-              <VueLoader />
-            </div>
-            <p v-else-if="!hideTranscription" class="transcription-text">{{ transcriptionText }}</p>
+          <div v-if="transcriptionLoading" class="transcription-loader">
+            <VueLoader />
+          </div>
+          <p v-else-if="!hideTranscription" class="transcription-text">
+            {{ transcriptionText }}
+          </p>
         </div>
 
         <!-- Acoes -->
         <div v-if="showControlFiles" class="file-actions">
-        <span v-if="imageURL" lass="file-action-button" @click="showImage(imageURL)">
-            <fa-icon :icon="['fas', 'search-plus']" v-tippy :content="`${dictionary.titulo_visualizar_img}`" />
+          <span
+            v-if="imageURL"
+            lass="file-action-button"
+            @click="showImage(imageURL)"
+          >
+            <fa-icon
+              :icon="['fas', 'search-plus']"
+              v-tippy
+              :content="`${dictionary.titulo_visualizar_img}`"
+            />
           </span>
-          <span v-if="docURL" @click="openWindowFromURL(docURL)" v-tippy :content="`Visualizar anexo`"
-            class="file-action-button">
+          <span
+            v-if="docURL"
+            @click="openWindowFromURL(docURL)"
+            v-tippy
+            :content="`Visualizar anexo`"
+            class="file-action-button"
+          >
             <fa-icon :icon="['fas', 'search-plus']" />
           </span>
-          <a v-if="imageURL || docURL" :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank"
-            rel="noreferrer noopener" v-tippy :content="`Fazer o download do anexo`" class="file-action-button">
+          <a
+            v-if="imageURL || docURL"
+            :href="imageURL ? imageURL : docURL"
+            :download="`${filename}`"
+            target="_blank"
+            rel="noreferrer noopener"
+            v-tippy
+            :content="`Fazer o download do anexo`"
+            class="file-action-button"
+          >
             <fa-icon :icon="['fas', 'download']" />
           </a>
           <template v-if="imageURL || docURL">
             <tippy interactive theme="light" trigger="click">
               <template v-slot:trigger>
-                <span class="file-action-button" ref="download-multiple-trigger" v-tippy
-                  :content="`Fazer o download de todos anexos da conversa`">
+                <span
+                  class="file-action-button"
+                  ref="download-multiple-trigger"
+                  v-tippy
+                  :content="`Fazer o download de todos anexos da conversa`"
+                >
                   <fa-icon :icon="['fas', 'download']" />
                   <fa-icon :icon="['fas', 'download']" />
                   <fa-icon :icon="['fas', 'download']" />
@@ -73,8 +140,13 @@
 
               <div class="tippy-confirmation">
                 <p>Deseja fazer download de todos anexos da tela?</p>
-                <button class="cancel box-shadow" @click="closeTippy">Cancelar</button>
-                <button class="confirm box-shadow" @click="downloadAllFilesHandler(referenceSelector)">
+                <button class="cancel box-shadow" @click="closeTippy">
+                  Cancelar
+                </button>
+                <button
+                  class="confirm box-shadow"
+                  @click="downloadAllFilesHandler(referenceSelector)"
+                >
                   Confirmar
                 </button>
               </div>
@@ -154,8 +226,8 @@
     0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
     0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 
 .tippy-confirmation p {
@@ -213,21 +285,40 @@ export default {
     showControlFiles: { type: Boolean },
     hasTranscription: { type: Boolean, default: false },
     transcriptionText: { type: String, default: "" },
-    transcriptionLoading: { type: Boolean, default: false }
+    transcriptionLoading: { type: Boolean, default: false },
   },
   data() {
     return {
       imgErro: false,
       imgMsgErro: "",
       fileAccessError: false,
+      hideTranscription: false,
     };
   },
+  watch: {
+    anexo(newAnexo) {
+      this.fileAccessError = false;
+      this.imgErro = false;
+      this.imgMsgErro = "";
+      if (this.validarAnexo()) {
+        this.setFileVars(newAnexo, { dominio: this.dominio });
+        this.$nextTick(() => {
+          const hasValidFile =
+            this.imageURL || this.docURL || this.audio || this.video;
+          if (!hasValidFile) {
+            this.fileAccessError = true;
+          }
+        });
+      }
+    },
+  },
   mounted() {
     if (this.validarAnexo()) {
       this.setFileVars(this.anexo, { dominio: this.dominio });
-      
+
       this.$nextTick(() => {
-        const hasValidFile = this.imageURL || this.docURL || this.audio || this.video;
+        const hasValidFile =
+          this.imageURL || this.docURL || this.audio || this.video;
         if (!hasValidFile) {
           this.fileAccessError = true;
         }