vue-intergrall-plugins 1.1.39 → 1.1.40

package/package.json

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

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

@@ -22,6 +22,21 @@
         <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>
+      <div v-if="audio && transcriptionText" class="transcription-container">
+        <div class="transcription-header">
+          <p v-if="!hideTranscription" v-text="`${dictionary.transcricaoLabel || 'Transcricao'}: `"></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>
+
       <!-- Acoes -->
       <div v-if="showControlFiles" class="file-actions">
         <span v-if="imageURL" class="file-action-button" @click="showImage(imageURL)">
@@ -61,6 +76,54 @@
 </template>
 
 <style>
+.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, 0.1);
+}
+
+.transcription-controls {
+  margin-top: 10px;
+  color: blue;
+  cursor: pointer;
+}
+
+.transcription-controls:hover {
+  text-decoration: underline;
+}
+
+.transcription-text {
+  white-space: break-spaces;
+  color: rgba(0, 0, 0, 0.6);
+}
+
 .tippy-tooltip.light-theme .tippy-backdrop {
   background-color: #fff;
 }
@@ -131,11 +194,14 @@ export default {
       required: true,
     },
     showControlFiles: { type: Boolean },
+    hasTranscription: { type: Boolean, default: false },
+    transcriptionText: { type: String, default: "" }
   },
   data() {
     return {
       imgErro: false,
       imgMsgErro: "",
+      hideTranscription: false
     };
   },
   mounted() {
@@ -144,6 +210,12 @@ export default {
     }
   },
   methods: {
+    toggleHideTranscription() {
+      this.hideTranscription = !this.hideTranscription;
+    },
+    emitTranscription() {
+      this.$emit("transcribe-audio", this.anexo);
+    },
     changeAudioSpeed(newSpeed) {
       // Aplique a velocidade ao elemento de áudio
       this.$refs.audioPlayer.playbackRate = newSpeed;

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="'mensagem__' + origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`">
+  <div :class="'mensagem__' + origem" v-if="origem && !erro" :id="`a${messageIndex ? messageIndex : randomizeValue}`">  
     <InteratividadeFormulario v-if="interatividade && validateInterativity()" :interatividade="interatividade"
       :dominio="dominio" :anexos="anexos" :dictionary="dictionary" />
     <div v-else class="mensagem" :class="{ mapa, 'hist-msg': histMsg, 'max-w-60': link && !mapa }">
@@ -18,7 +18,11 @@
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
           <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector"
             :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio"
-            @abrir-imagem="abrirImagem" @download-all="$emit('download-all')" />
+            @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"
+            :hasTranscription="hasTranscription"
+            :transcriptionText="transcriptionText"
+            @transcribe-audio="emitTranscription"
+            />
         </div>
       </template>
       <!-- sticker -->
@@ -173,6 +177,9 @@ export default {
     Picker,
   },
   props: [
+    "hasTranscription",
+    "transcriptionText",
+    "grupoAtendimento",
     "emitContactClick",
     "smartchannel",
     "messageIndex",
@@ -327,6 +334,10 @@ export default {
     this.validadeUrlToMsg();
   },
   methods: {
+    emitTranscription(anexo) {
+      const deepCopyData = JSON.parse(JSON.stringify({ anexo, grupo: this.grupoAtendimento, seq: this.seq }));
+      this.$emit("transcribe-audio", deepCopyData);
+    },
     closeMenu() {
       this.isMenuOpen = false;
     },