@chat21/chat21-web-widget 5.0.89-rc.2 → 5.0.89

package/CHANGELOG.md

@@ -6,11 +6,13 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.0.89-rc.2
-- minor fix
+# 5.0.89 in PROD
 
-# 5.0.89-rc.1
-- **added**: remove recipientId from storage after conversation is closed
+# 5.0.88 in PROD
+
+# 5.0.87 in PROD
+
+# 5.0.86 in PROD
 
 # 5.0.85-rc.2
 - **added**: loading progress indicator while closing a conversation
@@ -19,7 +21,7 @@
 - **added**: hide header restart menu option if conversation is closed
 - **removed**: continueConversationBeforeTime settings property
 
-# 5.0.85 in PROD
+# 5.0.84 in PROD
 
 # 5.0.84-rc.4
 - **added**: checkAcceptedFile fn on dragleave event conversation-content component

package/package.json

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

package/src/app/app.module.ts

@@ -15,7 +15,6 @@ import { ConversationContentComponent } from './component/conversation-detail/co
 import { ConversationFooterComponent } from './component/conversation-detail/conversation-footer/conversation-footer.component';
 import { ConversationInternalFrameComponent } from './component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component';
 import { ConversationPreviewComponent } from './component/conversation-detail/conversation-preview/conversation-preview.component';
-import { ConversationAudioRecorderComponent } from './component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component';
 /** CONVERSATION-DETAIL COMPONENTS */
 import { BubbleMessageComponent } from './component/message/bubble-message/bubble-message.component';
 import { AvatarComponent } from './component/message/avatar/avatar.component';
@@ -24,7 +23,7 @@ import { ImageComponent } from './component/message/image/image.component';
 import { InfoMessageComponent } from './component/message/info-message/info-message.component';
 import { HtmlComponent } from './component/message/html/html.component';
 import { FrameComponent } from './component/message/frame/frame.component';
-import { AudioTrackComponent } from './component/message/audio-track/audio-track.component';
+import { AudioComponent } from './component/message/audio/audio.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -139,7 +138,6 @@ import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.comp
 
 
 
-
 const appInitializerFn = (appConfig: AppConfigService, brandService: BrandService, logger: NGXLogger) => {
   return async() => {
     let customLogger = new CustomLogger(logger)
@@ -278,7 +276,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationFooterComponent,
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
-    ConversationAudioRecorderComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,
@@ -290,7 +287,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ActionButtonComponent,
     LinkButtonComponent,
     TextButtonComponent,
-    AudioTrackComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
@@ -299,6 +295,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     SafeHtmlPipe,
     LikeUnlikeComponent,
     TooltipDirective,
+    AudioComponent,
     CarouselComponent,
     NetworkOfflineComponent,
     ConfirmCloseComponent

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

@@ -7,7 +7,7 @@
 <!-- TEXTAREA + ICONS: conv active-->
 <div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
     
-    <div *ngIf="!isStopRec" class="icons-container">
+    <div class="icons-container">
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentButton == true" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
             <span class="v-align-center">
@@ -44,7 +44,7 @@
 
 
 
-    <div *ngIf="!isStopRec" class="visible-text-area"  [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+    <div class="visible-text-area"  [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
         <!-- isFilePendingToUpload || -->
       <textarea 
         [attr.disabled] = "(hideTextReply)? true : null"
@@ -67,24 +67,13 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="textInputTextArea && !isStopRec" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
                 <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
             </svg>
         </span>
     </div>
-
-    <!-- ICON REC -->
-    <div *ngIf="!textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
-        <chat-audio-recorder
-            (startRecordingEvent)="onStartRecording()"
-            (deleteRecordingEvent)="onDeleteRecording()"
-            (endRecordingEvent)="onEndRecording($event)"
-            (sendRecordingEvent)="onSendRecording($event)"
-            [stylesMap]="stylesMap">
-        </chat-audio-recorder>
-    </div>
 </div>
 
 

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

@@ -7,16 +7,14 @@
     display: flex;
     width: 100%;
     align-items: center;
-    gap: 0px;
+    gap: 10px;
     justify-content: space-between;
 }
 
 .icons-container{
     display: flex;
     align-self: flex-end;
-    margin-left: 8px;
-    gap: 2px;
-    margin-right: 8px;
+    margin-left: 8px
 }
 
 .visible-text-area {
@@ -33,6 +31,7 @@
 .chat21-textarea-button {
     fill: var(--icon-fill-color);
     pointer-events: auto;
+
     height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
@@ -186,29 +185,11 @@ textarea:active{
 }
 
 #chat21-button-send {
+    // right: 8px;
+    // bottom: 0;
     display: flex;
     align-self: flex-end;
-    margin: 0 8px;
-    width: 34px;
-    text-align: center;
-    justify-content: center;
-}
-
-#chat21-button-rec {
-    display: flex;
-    width: 34px;
-    text-align: center;
-    justify-content: center;
-    height: var(--chat-footer-height);
-    &.active{
-        width: 100%;
-    }
-    chat-audio-recorder {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+    margin: 0 8px
 }
 
 #chat21-file{
@@ -356,4 +337,7 @@ textarea:active{
     // left: 10px;
     border: none;
     margin: -2px -2px 0px;
-}
+
+}
+
+

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

@@ -60,8 +60,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   // ========= end:: send image ========= //
 
   // isNewConversation = true;
-  isStartRec: boolean = false;
-  isStopRec: boolean = false;
   textInputTextArea: string;
   conversationHandlerService: ConversationHandlerService
 
@@ -101,7 +99,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
   
   ngAfterViewInit() {
-    this.logger.log('[CONV-FOOTER] --------ngAfterViewInit: conversation-footer-------- '); 
+    this.logger.debug('[CONV-FOOTER] --------ngAfterViewInit: conversation-footer-------- '); 
     // setTimeout(() => {
       this.showEmojiPicker = true
     // }, 500);
@@ -111,18 +109,19 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
   detectFiles(event) {
-    this.logger.log('[CONV-FOOTER] detectFiles: ', event);
+    this.logger.debug('[CONV-FOOTER] detectFiles: ', event);
+
     if (event) {
         this.selectedFiles = event.target.files;
-        this.logger.log('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles', this.selectedFiles);
+        this.logger.debug('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles', this.selectedFiles);
         // this.onAttachmentButtonClicked.emit(this.selectedFiles)
         if (this.selectedFiles == null) {
           this.isFilePendingToUpload = false;
         } else {
           this.isFilePendingToUpload = true;
         }
-        this.logger.log('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
-        this.logger.log('[CONV-FOOTER] fileChange: ', event.target.files);
+        this.logger.debug('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
+        this.logger.debug('[CONV-FOOTER] fileChange: ', event.target.files);
         if (event.target.files.length <= 0) {
           this.isFilePendingToUpload = false;
         } else {
@@ -185,18 +184,16 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
-  
-
 
   loadFile() {
-    this.logger.log('[CONV-FOOTER] that.fileXLoad: ', this.arrayFilesLoad);
+    this.logger.debug('[CONV-FOOTER] that.fileXLoad: ', this.arrayFilesLoad);
         // at the moment I only manage the upload of one image at a time
         if (this.arrayFilesLoad[0] && this.arrayFilesLoad[0].file) {
             const fileXLoad = this.arrayFilesLoad[0].file;
             const uid = this.arrayFilesLoad[0].uid;
             const type = this.arrayFilesLoad[0].type;
             const size = this.arrayFilesLoad[0].size
-            this.logger.log('[CONV-FOOTER] that.fileXLoad: ', type);
+            this.logger.debug('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
                 metadata = {
@@ -217,7 +214,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
                     'size': size
                 };
             }
-            this.logger.log('[CONV-FOOTER] metadata -------> ', metadata);
+            this.logger.debug('[CONV-FOOTER] metadata -------> ', metadata);
             // this.scrollToBottom();
             // 1 - aggiungo messaggio localmente
             // this.addLocalMessageImage(metadata);
@@ -234,20 +231,17 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
     uploadSingle(metadata, file, messageText?: string) {
       const that = this;
-      try {
-        const send_order_btn = <HTMLInputElement>document.getElementById('chat21-start-upload-doc');
-        send_order_btn.disabled = true;
-      } catch (error) {
-        that.logger.log('[CONV-FOOTER] error::', error);
-      }
-      that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle::', metadata, file);
+      const send_order_btn = <HTMLInputElement>document.getElementById('chat21-start-upload-doc');
+      send_order_btn.disabled = true;
+      that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle::', metadata, file);
       // const file = this.selectedFiles.item(0);
       const currentUpload = new UploadModel(file);
+
       // const uploadTask = this.upSvc.pushUpload(currentUpload);
       // uploadTask.then(snapshot => {
       //     return snapshot.ref.getDownloadURL();   // Will return a promise with the download link
       // }).then(downloadURL => {
-      //     that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
+      //     that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
       //     that.g.wdLog([`Successfully uploaded file and got download link - ${downloadURL}`]);
 
       //     metadata.src = downloadURL;
@@ -267,8 +261,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       // this.resetLoadImage();
       
       this.uploadService.upload(this.senderId, currentUpload).then(data => {
-        that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
-        that.logger.log(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
+        that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
+        that.logger.debug(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
 
         metadata.src = data.src;
         metadata.downloadURL = data.downloadURL;
@@ -297,7 +291,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         that.logger.error(`[CONV-FOOTER] uploadSingle:: Failed to upload file and get link - ${error}`);
         that.isFilePendingToUpload = false;
       });
-      that.logger.log('[CONV-FOOTER] reader-result: ', file);
+      that.logger.debug('[CONV-FOOTER] reader-result: ', file);
     }
 
   /**
@@ -310,7 +304,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   sendMessage(msg: string, type: string, metadata?: any, additional_attributes?: any) { // sponziello
     (metadata) ? metadata = metadata : metadata = '';
     this.onEmojiiPickerShow.emit(false)
-    this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
+    this.logger.debug('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
 
       // msg = htmlEntities(msg);
@@ -393,7 +387,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   private restoreTextArea() {
-    //   that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
+    //   that.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
     this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context'));
     this.textInputTextArea = ''; // clear the textarea
@@ -403,7 +397,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       if(textArea.style.height > this.HEIGHT_DEFAULT){
         document.getElementById('chat21-button-send').style.removeProperty('right')
       }
-      this.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
+      this.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
     }
     this.setFocusOnId('chat21-main-message-context');
   }
@@ -417,7 +411,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     try {
       const target = document.getElementById('chat21-main-message-context') as HTMLInputElement;
       // tslint:disable-next-line:max-line-length
-      //   that.logger.log('[CONV-FOOTER] H:: this.textInputTextArea', (document.getElementById('chat21-main-message-context') as HTMLInputElement).value , target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
+      //   that.logger.debug('[CONV-FOOTER] H:: this.textInputTextArea', (document.getElementById('chat21-main-message-context') as HTMLInputElement).value , target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
       target? target.style.height = '100%': null;
       if (target && target.value === '\n') {
           target.value = '';
@@ -437,104 +431,28 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
-
-
-  onStartRecording() {
-    this.isStartRec = true;
-    this.isStopRec = false;
-  }
-
-  onDeleteRecording(){
-    this.isStartRec = false;
-    this.isStopRec = false;
-  }
-
-  onEndRecording(audioBlob: Blob | null) {
-    this.isStartRec = false;
-    this.isStopRec = true;
-  }
-
-
-
-  onSendRecording(audioBlob: Blob | null) {
-    this.isStartRec = false;
-    if (audioBlob) {
-      this.convertBlobToBase64(audioBlob);
-      this.isStopRec = false;
-    } else {
-      this.isStopRec = false;
-    }
-  }
-
-
-
-  // Funzione per convertire Blob in Base64 usando FileReader
-  async convertBlobToBase64(audioBlob: Blob) {
-    let that = this;
-    if (audioBlob) {
-      this.isFilePendingToUpload = true;
-    } else {
-      this.isFilePendingToUpload = false;
-    }
-    const type = audioBlob.type;
-    const size = audioBlob.size;
-    const reader = new FileReader();
-    reader.readAsDataURL(audioBlob);
-    //reader.addEventListener('load', function () {
-    reader.onloadend = () => {
-      that.isFileSelected = true;
-      // const base64data = reader.result as string;
-      that.logger.log('[CONV-FOOTER] onload file');
-      const fileXLoad = {
-        src: reader.result.toString(),
-        title: 'audio-file'
-      };
-      const uid = (new Date().getTime()).toString(36);
-      that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: type, size: size };
-      that.logger.log('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
-      // SEND MESSAGE
-      let metadata = {
-        'name': 'audio-file',
-        'src': fileXLoad.src,
-        'type': type,
-        'uid': uid,
-        'size': size
-      };
-      
-      const file = new File([audioBlob], "audio-file.mp3", {
-        type: audioBlob.type,     
-        lastModified: Date.now()
-      });
-
-      that.uploadSingle(metadata, file, '');
-    };
-    //}, false);
-  }
-
-  
-
   onTextAreaChange(){
     this.resizeInputField()
     this.setWritingMessages(this.textInputTextArea)
   }
 
   onSendPressed(event) {
-    this.logger.log('[CONV-FOOTER] onSendPressed:event', event);
+    this.logger.debug('[CONV-FOOTER] onSendPressed:event', event);
     event.preventDefault();
-    this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
+    this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     if (this.isFilePendingToUpload) {
-      this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
+      this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
       // its a file
       this.loadFile();
       this.isFilePendingToUpload = false;
       // disabilito pulsanti
-      this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
+      this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     } else {
       if ( this.textInputTextArea && this.textInputTextArea.length > 0 ) {
-        this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a message');
+        this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed', 'is a message');
         // its a message
         if (this.textInputTextArea.trim() !== '') {
-          //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+          //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
           // this.resizeInputField();
           // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
           // this.setDepartment();
@@ -608,7 +526,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       setTimeout(function () {
         const textarea = document.getElementById(id);
         if (textarea) {
-            //   that.logger.log('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
+            //   that.logger.debug('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
             textarea.setAttribute('value', ' ');
             textarea.focus();
         }
@@ -648,7 +566,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.textInputTextArea = ((document.getElementById('chat21-main-message-context') as HTMLInputElement).value);
     if (keyCode === 13) { // ENTER pressed
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
-        //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+        //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
         // this.resizeInputField();
         // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
         // this.setDepartment();
@@ -680,14 +598,14 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.resizeInputField()
     const items = (event.clipboardData || event.originalEvent.clipboardData).items;
     let file = null;
-    this.logger.log('[CONV-FOOTER] onPaste items ', items);
+    this.logger.debug('[CONV-FOOTER] onPaste items ', items);
     for (const item of items) {
-      this.logger.log('[CONV-FOOTER] onPaste item ', item);
-      this.logger.log('[CONV-FOOTER] onPaste item.type ', item.type);
+      this.logger.debug('[CONV-FOOTER] onPaste item ', item);
+      this.logger.debug('[CONV-FOOTER] onPaste item.type ', item.type);
       if (item.type.startsWith("image")) {
         // SEND TEXT MESSAGE IF EXIST
         // if(this.textInputTextArea){
-        //   this.logger.log('[CONV-FOOTER] onPaste texttt ', this.textInputTextArea);
+        //   this.logger.debug('[CONV-FOOTER] onPaste texttt ', this.textInputTextArea);
         //   this.sendMessage(this.textInputTextArea, TYPE_MSG_TEXT)
         // }
 
@@ -697,12 +615,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
           this.logger.error('[CONV-FOOTER] onPaste - error while restoring textArea:',e)
         }
         
-        this.logger.log('[CONV-FOOTER] onPaste item.type', item.type);
+        this.logger.debug('[CONV-FOOTER] onPaste item.type', item.type);
         file = item.getAsFile();
         const data = {target: new ClipboardEvent('').clipboardData || new DataTransfer()};
         data.target.items.add(new File([file], file.name, { type: file.type }));
-        this.logger.log('[CONV-FOOTER] onPaste data', data);
-        this.logger.log('[CONV-FOOTER] onPaste file ', file);
+        this.logger.debug('[CONV-FOOTER] onPaste data', data);
+        this.logger.debug('[CONV-FOOTER] onPaste file ', file);
         this.detectFiles(data)
       }
     }
@@ -711,15 +629,15 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onDrop(event){
     const items = event.dataTransfer.files;
     let file = null;
-    this.logger.log('[CONV-FOOTER] onDrop items ', items);
+    this.logger.debug('[CONV-FOOTER] onDrop items ', items);
     for (const item of items) {
-      this.logger.log('[CONV-FOOTER] onDrop item ', item);
-      this.logger.log('[CONV-FOOTER] onDrop item.type ', item.type);
+      this.logger.debug('[CONV-FOOTER] onDrop item ', item);
+      this.logger.debug('[CONV-FOOTER] onDrop item.type ', item.type);
 
       const data = {target: {files: new DataTransfer()}}
       data.target.files = items
-      this.logger.log('[CONV-FOOTER] onDrop data', data);
-      this.logger.log('[CONV-FOOTER] onDrop file ', file);
+      this.logger.debug('[CONV-FOOTER] onDrop data', data);
+      this.logger.debug('[CONV-FOOTER] onDrop file ', file);
       this.detectFiles(data)
     }
   }

package/src/app/component/message/audio/audio.component.html

@@ -0,0 +1,20 @@
+
+
+<div id="audio_container" #audio_container> 
+
+    <audio aria-label="traccia audio" #audio_msg controls controlsList="nodownload" id="audio_msg" (pause)="pauseAudioMsg($event)" (play)="playAudioMsg($event)" (timeupdate)="updateTimeAudioMsg($event)">
+        <source [src]="metadata?.src" [type]="metadata?.type">
+        <!-- {{metadata?.src}} -->
+        <!-- controlsList="nodownload" -->
+    </audio>
+
+    <!-- <button id="play-icon" (click)="onPlayPause('play')" *ngIf="status === 'play'">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>
+    </button> 
+    <button id="pause-icon" (click)="onPlayPause('pause')" *ngIf="status === 'pause'">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+    </button>
+    <div id="duration" #duration>0:00</div>
+    <input type="range" id="seek-slider" max="100" value="0"> -->
+</div>
+

package/src/app/component/message/audio/audio.component.scss

@@ -0,0 +1,122 @@
+#audio_container{
+    display: flex;
+}
+
+#play-icon,
+#pause-icon {
+    margin: 20px 2.5% 10px 2.5%;
+}
+
+.time {
+    display: inline-block;
+    width: 37px;
+    text-align: center;
+    font-size: 20px;
+    margin: 28.5px 0 18.5px 0;
+    float: left;
+}
+output {
+    display: inline-block;
+    width: 32px;
+    text-align: center;
+    font-size: 20px;
+    margin: 10px 2.5% 0 5%;
+    float: left;
+    clear: left;
+}
+
+input[type="range"] {
+    position: relative;
+    -webkit-appearance: none;
+    width: 48%;
+    margin: 0;
+    padding: 0;
+    height: 19px;
+    margin: 30px 2.5% 20px 2.5%;
+    float: left;
+    outline: none;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::before {
+    position: absolute;
+    content: "";
+    top: 8px;
+    left: 0;
+    width: var(--seek-before-width);
+    height: 3px;
+    background-color: #007db5;
+    cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    margin: -7px 0 0 0;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-moz-range-progress {
+    background-color: #007db5;
+}
+input[type="range"]::-moz-focus-outer {
+    border: 0;
+}
+input[type="range"]::-moz-range-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: transparent;
+    border: solid transparent;
+    color: transparent;
+}
+input[type="range"]::-ms-fill-lower {
+    background-color: #007db5;
+}
+input[type="range"]::-ms-fill-upper {
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-ms-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-ms-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}