vue-intergrall-plugins 1.1.41 → 1.1.43

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

@@ -8258,6 +8258,10 @@ var script$c = {
     transcriptionText: {
       type: String,
       default: ""
+    },
+    transcriptionLoading: {
+      type: Boolean,
+      default: false
     }
   },
   data: function data() {
@@ -8335,11 +8339,11 @@ var __vue_render__$c = 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 || 'Transcricao') + ": ")) + "</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.hideTranscription ? "<p class=\"transcription-text\">" + _vm._ssrEscape(_vm._s(_vm.transcriptionText)) + "</p>" : "<!---->"))], 2) : _vm._e(), _vm._ssrNode(" "), _vm.showControlFiles ? _vm._ssrNode("<div class=\"file-actions\">", "</div>", [_vm.imageURL ? _vm._ssrNode("<span class=\"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(_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 class=\"file-action-button\">", "</span>", [_c('fa-icon', {
     directives: [{
       name: "tippy",
       rawName: "v-tippy"
@@ -8439,11 +8443,11 @@ var __vue_staticRenderFns__$c = [];
 /* style */
 var __vue_inject_styles__$c = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-0bd81928_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-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}",
+  inject("data-v-68d8e846_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-0bd81928_1", {
+  }), inject("data-v-68d8e846_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}",
     map: undefined,
     media: undefined
@@ -8452,7 +8456,7 @@ var __vue_inject_styles__$c = function __vue_inject_styles__(inject) {
 /* scoped */
 var __vue_scope_id__$c = undefined;
 /* module identifier */
-var __vue_module_identifier__$c = "data-v-0bd81928";
+var __vue_module_identifier__$c = "data-v-68d8e846";
 /* functional template */
 var __vue_is_functional_template__$c = false;
 /* style inject shadow dom */
@@ -9022,7 +9026,7 @@ var LinkPreview = __vue_component__$d;var script$7 = {
     LinkPreview: LinkPreview,
     Picker: Picker
   },
-  props: ["hasTranscription", "transcriptionText", "emitContactClick", "smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon", "showControlFiles", "showMenu", "id_ext_msg", "tipo_origem"],
+  props: ["hasTranscription", "transcriptionText", "transcriptionLoading", "emitContactClick", "smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon", "showControlFiles", "showMenu", "id_ext_msg", "tipo_origem"],
   created: function created() {
     if (!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this;
   },
@@ -9397,7 +9401,7 @@ var __vue_render__$7 = 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,
+      key: index + "_" + _vm.transcriptionLoading,
       staticClass: "mensagem-anexo"
     }, [_c('AnexoMensagem', {
       attrs: {
@@ -9408,7 +9412,8 @@ var __vue_render__$7 = function __vue_render__() {
         "origemExterna": _vm.origemExterna,
         "dominio": _vm.dominio,
         "hasTranscription": _vm.hasTranscription,
-        "transcriptionText": _vm.transcriptionText
+        "transcriptionText": _vm.transcriptionText,
+        "transcriptionLoading": _vm.transcriptionLoading
       },
       on: {
         "abrir-imagem": _vm.abrirImagem,
@@ -9811,7 +9816,7 @@ var __vue_staticRenderFns__$7 = [];
 /* style */
 var __vue_inject_styles__$7 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-6de49822_0", {
+  inject("data-v-f181c1ea_0", {
     source: ":root{--message-color:#373737;--text-color:#fff;--files-bg:rgba(255, 255, 255, 0.1);--files-bg-hover:rgba(255, 255, 255, 0.1);--light:80;--threshold:60}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.mensagem-reply{padding:5px 10px;font-size:12px;color:#666;transition:background-color 150ms ease-in-out;border-radius:5px;margin:5px 0;overflow:hidden;max-width:100%}.mensagem-reply p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-reply-principal{border-left:3px solid transparent;background-color:rgba(100,100,100,.1)}.message-reply-principal:hover{background-color:rgba(100,100,100,.2)}.message-reply-outros{background-color:#f5f5f5;border-left:3px solid var(--message-color)}.message-reply-outros:hover{background-color:#ebebeb}.mensagem-reply-vazia{display:flex;align-items:center}.mensagem-reply-vazia svg{margin-right:5px;color:#ba181b}.mensagem{padding:20px 7px 14px 7px;border-radius:5px;min-width:150px;min-height:60px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;max-width:80%;margin-bottom:10px;font-size:12px;word-break:break-word;-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)}.mensagem.max-w-60{max-width:60%}.mensagem.mapa{width:100%}.mensagem.hist-msg{animation:show 1s}.mensagem a{margin-right:5px;font-weight:550;color:inherit;text-decoration:none}.mensagem a:hover{text-decoration:underline}.message p{white-space:pre-wrap}.mensagem-anexo a,.mensagem-div-mapa a{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.reply{cursor:pointer;position:absolute;right:53px;bottom:5px;font-size:9.6px;color:#67a332;width:14.4px;height:14.4px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.reply svg{margin-top:-1px;margin-right:-1px}.reply-with-2-icons{right:30px}.check{cursor:pointer;position:absolute;right:10px;bottom:2px;font-size:11.2px}.check.visualizado,.check.visualizado svg{color:#006daa}.check.verde,.check.verde svg{color:#4f772d}.check.vermelho,.check.vermelho svg{color:#ba181b}.check.cinza,.check.cinza svg{color:#999}.check.preto,.check.preto svg{color:#666}.star{cursor:pointer;position:absolute;right:30px;bottom:2px;font-size:6.4px;width:11.2px}.default-stick-size{width:180px;height:auto}.horario-envio{margin-right:15px;font-size:11.2px;position:absolute;left:10px;bottom:2px}.autor-mensagem{position:absolute;font-size:9.6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:90%;font-weight:700;top:2px}.menu-primario{transition:opacity 150ms ease-in-out;height:20px;position:absolute;font-size:11.2px;top:2px;display:flex;gap:5px;padding:2px 4px}.menu-primario.principal{left:2px;color:var(--text-color);background-color:var(--message-color)}.menu-primario.outros{right:2px;color:var(--text-color);background-color:#fff}.menu-primario.outros>span:nth-child(1){order:10}.menu-mensagem{cursor:pointer;padding:1px;opacity:.7;transition:opacity .1s ease-in-out}.menu-mensagem:active,.menu-mensagem:focus,.menu-mensagem:hover{opacity:1}.menu-flutuante{background-color:#fff;-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);border-radius:10px;position:absolute;top:20px;width:120px;min-height:50px;height:50px;max-height:50px;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;display:flex;flex-direction:column;z-index:1}.menu-flutuante.principal{left:3px}.menu-flutuante.outros{right:3px}.menu-flutuante li{transition:background-color .3s ease-in-out;width:100%;cursor:pointer;padding:5px 10px;display:flex;align-items:center}.menu-flutuante li:hover{background-color:#e9e9e9}.mensagem__principal{width:100%;display:flex;justify-content:flex-end}.mensagem__principal>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--message-color);bottom:5px;right:-10px;transform:rotate(-90deg)}.mensagem__principal>.mensagem{background-color:var(--message-color);color:var(--text-color)}.mensagem__principal>.mensagem .horario-envio{color:var(--text-color)}.mensagem__principal>.mensagem .autor-mensagem{right:5px;color:var(--text-color)}.mensagem__outros{width:100%;display:flex}.mensagem__outros>.mensagem{background-color:#fff;color:#333}.mensagem__outros>.mensagem::after{content:\"\";width:0;height:0;position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #fff;bottom:5px;left:-10px;transform:rotate(90deg)}.mensagem__outros>.autor-mensagem{left:5px;color:#333}.mensagem-div-mapa{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:5px}.msg-mapa{width:100%;min-height:225px;height:100%;box-sizing:initial}.msg-mapa img{max-width:none!important}.info-mapa{list-style-type:none}.info-mapa li.title{font-size:13.6px}.info-mapa li.address,.info-mapa li.url{font-size:13.6px}.info-mapa li.url{font-size:13.6px}.tooltip-list{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.emoji-message-container{position:absolute;top:0;z-index:1;width:300px;height:250px}.emoji-message-container .sm-emoji-picker{width:300px;height:250px}.emoji-message-container .sm-emoji-picker .sm-emoji-header{overflow-x:auto;overflow-y:hidden}.reaction{position:absolute;bottom:0;border-radius:50%;display:flex;justify-content:center;align-items:center;background-color:rgba(100,100,100,.4);padding:5px;font-size:20.8px;min-width:28.8px;min-height:28.8px;max-width:28.8px;max-height:28.8px}.reaction>span{display:block;transform:translateY(-1px)}.mensagem__outros .reaction{right:-30px}.mensagem__principal .reaction{left:-30px}",
     map: undefined,
     media: undefined
@@ -9820,7 +9825,7 @@ var __vue_inject_styles__$7 = function __vue_inject_styles__(inject) {
 /* scoped */
 var __vue_scope_id__$7 = undefined;
 /* module identifier */
-var __vue_module_identifier__$7 = "data-v-6de49822";
+var __vue_module_identifier__$7 = "data-v-f181c1ea";
 /* functional template */
 var __vue_is_functional_template__$7 = false;
 /* style inject shadow dom */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

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

@@ -29,12 +29,15 @@
       </div>
       <div v-if="audio && transcriptionText" class="transcription-container">
         <div class="transcription-header">
-          <p v-if="!hideTranscription" v-text="`${dictionary.transcricaoLabel || 'Transcricao'}: `"></p>
+          <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>
-          <p v-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 -->
@@ -119,6 +122,12 @@
   text-decoration: underline;
 }
 
+.transcription-loader {
+  position: relative;
+  height: 30px;
+  width: 100%;
+}
+
 .transcription-text {
   white-space: break-spaces;
   color: rgba(0, 0, 0, 0.6);
@@ -195,7 +204,8 @@ export default {
     },
     showControlFiles: { type: Boolean },
     hasTranscription: { type: Boolean, default: false },
-    transcriptionText: { type: String, default: "" }
+    transcriptionText: { type: String, default: "" },
+    transcriptionLoading: { type: Boolean, default: false }
   },
   data() {
     return {

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

@@ -15,12 +15,13 @@
       </div>
       <!-- Anexos -->
       <template v-if="anexos && anexos.length">
-        <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
+        <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="`${index}_${transcriptionLoading}`">
           <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector"
             :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio"
             @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"
             :hasTranscription="hasTranscription"
             :transcriptionText="transcriptionText"
+            :transcriptionLoading="transcriptionLoading"
             @transcribe-audio="emitTranscription"
             />
         </div>
@@ -179,6 +180,7 @@ export default {
   props: [
     "hasTranscription",
     "transcriptionText",
+    "transcriptionLoading",
     "emitContactClick",
     "smartchannel",
     "messageIndex",