@chat21/chat21-web-widget 5.1.25-rc1 → 5.1.26-rc1

package/CHANGELOG.md

@@ -6,6 +6,10 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.26-rc1
+- **bug fixed**: improved audio recording/upload flow by ignoring empty recorder chunks, preserving the recorder MIME type when creating the audio blob/file, and uploading audio directly without Base64 conversion
+
+
 # 5.1.25-rc1
 - **bug fixed**: attachment buttons in messages now respect the container max width and wrap/break long labels instead of being clipped
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.25-rc1",
+  "version": "5.1.26-rc1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.ts

@@ -38,19 +38,32 @@ export class ConversationAudioRecorderComponent {
     this.startTime = Date.now();
     navigator.mediaDevices.getUserMedia({ audio: true })
       .then(stream => {
+
+        this.audioChunks = [];
+
         this.mediaRecorder = new MediaRecorder(stream);
         this.mediaRecorder.start();
         this.isRecording = true;
         this.startRecordingEvent.emit();
         this.mediaRecorder.addEventListener('dataavailable', (event) => {
-          this.audioChunks.push(event.data);
+          if (event.data && event.data.size > 0) {
+            this.audioChunks.push(event.data);
+          }
         });
 
         this.mediaRecorder.addEventListener('stop', () => {
-          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/mpeg' });
+          // ✅ MIME REALE del recorder
+          const mimeType = this.mediaRecorder.mimeType;
+          this.audioBlob = new Blob(this.audioChunks, {
+            type: mimeType
+          });
+
+          // ⭐ chiude microfono
+          stream.getTracks().forEach(track => track.stop());
+
+          this.audioChunks = [];
           this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
           this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
-          this.audioChunks = []; 
           this.endRecordingEvent.emit(this.audioBlob);
         });
       })

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -514,14 +514,46 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onSendRecording(audioBlob: Blob | null) {
     this.isStartRec = false;
     if (audioBlob) {
-      this.convertBlobToBase64(audioBlob);
+      this.prepareAndUpload(audioBlob);
+      // this.convertBlobToBase64(audioBlob);
       this.isStopRec = false;
     } else {
       this.isStopRec = false;
     }
   }
 
+  prepareAndUpload(audioBlob: Blob) {
 
+    this.isFilePendingToUpload = true;
+    
+    // ⭐ NON modificare il MIME
+    const mimeType = audioBlob.type;
+
+    const size = audioBlob.size;
+    const uid = Date.now().toString(36);
+
+    // estensione coerente col MIME REALE
+    let ext = 'mp3';
+    const fileName = `audio-${uid}.${ext}`;
+  
+    const file = new File([audioBlob], fileName, {
+      type: mimeType,
+      lastModified: Date.now()
+    });
+  
+    // ✅ metadata SENZA base64
+    const metadata = {
+      name: fileName,
+      type: 'audio/mp3',
+      uid: uid,
+      size: size
+    };
+    
+    this.logger.log('[UPLOAD] metadata:', metadata);
+  
+    // stesso metodo che già usi
+    this.uploadSingle(metadata, file, '');
+  }
 
   // Funzione per convertire Blob in Base64 usando FileReader
   async convertBlobToBase64(audioBlob: Blob) {

package/src/app/component/message-attachment/message-attachment.component.scss

@@ -1,5 +1,5 @@
 #buttons-in-message {
-    text-align: right;
+    // text-align: right;
     display: block;
     // margin-right: 16px; //align attachment-buttons to bubble sent message
     height: auto;