@chat21/chat21-web-widget 5.0.65 → 5.0.67

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.67 in PROD
+- bug-fixed: when refresh the page and an already open conversation is selected, footer is blocked 
+- bug-fix: pdf preview image is not contained into its container
+- bug-fixed: cannot push isHere() for presence management if user is disconnected and a notification is received
+
+### 5.0.66 in PROD
+- added: LWT e imHere() for presence management
+
 ### 5.0.65 in PROD
 
 ### 5.0.65-rc.1

package/package.json

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

package/src/app/app.component.ts

@@ -432,7 +432,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         const subUserLogOut = this.messagingAuthService.BSSignOut.subscribe((state) => {
             // that.ngZone.run(() => {
-            console.log('[FORCE] messagingAuthService BSSignOut', state, this.forceDisconnect)
+            this.logger.log('[FORCE] messagingAuthService BSSignOut', state, this.forceDisconnect)
             if (state === true && !this.forceDisconnect) { //state = true -> user has logged out
                 /** ho effettuato il logout: nascondo il widget */
                 that.logger.debug('[APP-COMP] sono nel caso logout -1');
@@ -1507,7 +1507,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             // this.g.windowContext.window.document.title = this.tabTitle
         } else {
             // TAB IS ACTIVE --> restore title and DO NOT SOUND
-            this.presenceService.imHere()
+            if(!this.forceDisconnect){
+                this.presenceService.imHere()
+            }
             clearInterval(this.setIntervalTime)
             this.setIntervalTime = null;
             this.isTabVisible = true;
@@ -1587,7 +1589,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.debug('[APP-COMP] openCloseWidget', recipientId, this.g.isOpen, this.g.startFromHome);
         if (this.g.isOpen === false) {
             if(this.forceDisconnect){
-                console.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
+                this.logger.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
                 this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
                 this.forceDisconnect = false;
             }
@@ -1729,7 +1731,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             if (this.g.isOpen === false) {
 
                 if(this.forceDisconnect){
-                    console.log('[FORCE] onSelectedConversation --> reconnect', this.forceDisconnect)
+                    this.logger.log('[FORCE] onSelectedConversation --> reconnect', this.forceDisconnect)
                     this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
                     this.forceDisconnect = false;
                 }
@@ -2095,14 +2097,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
     private listenToWidgetClick(){
+        const that = this
         let clickTimeout = setTimeout(() => {
-            console.log('[FORCE] --> NO INTERACTION: disconnection... <--- ')
+            that.logger.log('[FORCE] --> NO INTERACTION: disconnection... <--- ')
             //disconnect 
-            this.forceDisconnect = true
-            this.messagingAuthService.logout()
-        }, this.g.disconnetTime * 1000);
+            that.forceDisconnect = true
+            that.messagingAuthService.logout()
+        }, that.g.disconnetTime * 1000);
         window.addEventListener("click", function(){
-            console.log('[FORCE] <<INTERACTION>> within 1 minute')
+            that.logger.log('[FORCE] <<INTERACTION>> within 1 minute')
             clearTimeout(clickTimeout)
         })
     }

package/src/app/app.module.ts

@@ -23,6 +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 { 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';
@@ -132,6 +133,7 @@ import { Rules } from './utils/rules';
 import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
 
 
+
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
   return () => {
     let customLogger = new CustomLogger(logger)
@@ -287,7 +289,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     DateAgoPipe,
     SafeHtmlPipe,
     LikeUnlikeComponent,
-    TooltipDirective
+    TooltipDirective,
+    AudioComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,11 @@
+<emoji-mart id="emoji-mart"
+    class="emoji-mart"
+    [showPreview]="emojiiOptions?.showPreview"
+    [color]="stylesMap?.get('themeColor')" 
+    [perLine]="emojiiOptions?.emojiPerLine"
+    [totalFrequentLines]="emojiiOptions?.totalFrequentLines"
+    [enableSearch]="emojiiOptions?.enableSearch"
+    [darkMode]="emojiiOptions?.darkMode"
+    [include]="emojiiOptions?.include"
+    (emojiSelect)="addEmojiFN($event)">
+</emoji-mart>

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

@@ -0,0 +1,8 @@
+.emoji-mart {
+    position: absolute;
+    // bottom: 40px;
+    // left: 10px;
+    border: none;
+    margin: -2px -2px 0px;
+
+}

package/src/app/component/conversation-detail/conversation-emojii/conversation-emojii.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConversationEmojiiComponent } from './conversation-emojii.component';
+
+describe('ConversationEmojiiComponent', () => {
+  let component: ConversationEmojiiComponent;
+  let fixture: ComponentFixture<ConversationEmojiiComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConversationEmojiiComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConversationEmojiiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'chat-conversation-emojii',
+  templateUrl: './conversation-emojii.component.html',
+  styleUrls: ['./conversation-emojii.component.scss']
+})
+export class ConversationEmojiiComponent implements OnInit {
+
+  @Input() var: string;
+  @Output() addEmoji = new EventEmitter();
+  
+  emojiiOptions = {
+    emojiPerLine : 9,
+    totalFrequentLines: 1,
+    showPreview: false,
+    darkMode: false,
+    enableSearch: false,
+    include: [ 'recent', 'people', 'nature', 'activity', 'flags']
+  }
+
+  constructor(){}
+
+  ngOnInit(): void {
+    console.log('varrrrr', this.var)
+  }
+
+  addEmojiFN(event){
+    this.addEmoji.emit(event)
+  }
+
+}

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

@@ -78,7 +78,8 @@
 
 
 <!-- EMOJII PICKER-->
-<div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container">
+<div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container"  id="emoji-mart-container" #emoji_mart_container>
+    <!-- <ng-container #emojii_container></ng-container> -->
     <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { UploadModel } from 'src/chat21-core/models/upload';
@@ -48,7 +48,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onBackButton = new EventEmitter()
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
-
+  // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
+  @ViewChild('emoji_mart_container', {read: ViewContainerRef}) public divEmojiiContainer: ViewContainerRef;
   // ========= begin:: send image ======= //
   selectedFiles: FileList;
   isFilePendingToUpload: Boolean = false;
@@ -62,6 +63,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   conversationHandlerService: ConversationHandlerService
 
   showEmojiPicker: boolean = false; //To show/hide emoji picker
+  loadPickerModule: boolean = true;
   emojiiOptions = {
     emojiPerLine : 9,
     totalFrequentLines: 1,
@@ -450,7 +452,36 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
-  onEmojiiPickerClicked(){
+  async onEmojiiPickerClicked(){
+    // if(this.loadPickerModule){
+    //   this.loadPickerModule = false;
+    //   // this.divEmojiiContainer.clear();
+    //   this.vcref.clear();
+    //   const { PickerModule } = await import("@ctrl/ngx-emoji-mart");
+    //   import('../conversation-emojii/conversation-emojii.component').then(({ConversationEmojiiComponent})=> {
+    //     // const instance = this.divEmojiiContainer.createComponent(ConversationEmojiiComponent);
+    //     // // this.divEmojiiContainer.createEmbeddedView(instance.hostView)
+    //     // this.divEmojiiContainer.insert(instance.hostView);
+    //     // this.divEmojiiContainer = this.selector.createComponent(ConversationEmojiiComponent);
+    //     let greetcomp = this.vcref.createComponent(
+    //       this.cfr.resolveComponentFactory(ConversationEmojiiComponent)
+    //     );
+    //     greetcomp.instance.var = 'ssssss'
+    //   });
+    //   // this.divEmojiiContainer.nativeElement.insertAdjacentHTML('afterbegin', '<emoji-mart id="emoji-mart"' +
+    //   // //  '*ngIf="showEmojiPicker"'+
+    //   //  'class="emoji-mart"'+
+    //   // '[showPreview]="emojiiOptions?.showPreview"'+
+    //   // // '[color]="stylesMap?.get("themeColor")"' +
+    //   // '[perLine]="emojiiOptions?.emojiPerLine"'+
+    //   // '[totalFrequentLines]="emojiiOptions?.totalFrequentLines"'+
+    //   // '[enableSearch]="emojiiOptions?.enableSearch"'+
+    //   // '[darkMode]="emojiiOptions?.darkMode"'+
+    //   // '[include]="emojiiOptions?.include"'+
+    //   // '(emojiSelect)="addEmoji($event)">'+
+    //   // '</emoji-mart>')
+
+    // }
     //OPEN EMOJII PICKER
     this.onEmojiiPickerShow.emit(!this.isEmojiiPickerShow)
   }

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

@@ -148,8 +148,8 @@ export class ConversationPreviewComponent implements OnInit {
         const metadata = {
           'name': imageXLoad.title,
           'src': that.sanitizer.bypassSecurityTrustUrl(imageXLoad.src),
-          'width': 80,
-          'height': 106,
+          'width': '80px',
+          'height': '106px',
           'type': attachment.metadata.type,
           'uid': attachment.metadata.uid
         };
@@ -158,6 +158,7 @@ export class ConversationPreviewComponent implements OnInit {
         that.arrayFiles.push({metadata});
         if (!that.fileSelected) {
           that.fileSelected = Object.assign({}, metadata)
+          that.fileSelected = Object.assign(that.fileSelected, that.getMetadataSize(that.fileSelected))
         }
       };
     }

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,118 @@
+#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;
+}

package/src/app/component/message/audio/audio.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioComponent } from './audio.component';
+
+describe('AudioComponent', () => {
+  let component: AudioComponent;
+  let fixture: ComponentFixture<AudioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AudioComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AudioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,123 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+// import lottieWeb from 'https://cdn.skypack.dev/lottie-web';
+
+@Component({
+  selector: 'chat-audio',
+  templateUrl: './audio.component.html',
+  styleUrls: ['./audio.component.scss']
+})
+export class AudioComponent implements OnInit {
+
+  @Input() metadata: any;
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
+
+  uidAudioPlayng: string = ''
+  divPlay: HTMLAudioElement
+  playState: HTMLElement
+  status: 'play' | 'pause' = 'play'
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    // console.log('metadataaaaaa', this.metadata)
+    // this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
+    // this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
+  }
+
+  onPlayPause(status: string){
+    // const divPlay = (<HTMLAudioElement>document.getElementById('audio_msg'));
+    if(status === 'play') {
+      this.divPlay.play();
+      this.status = 'pause'
+    } else {
+      this.divPlay.pause();
+      this.status = 'play'
+    }
+  }
+  
+  pauseAudioMsg(e) {
+    try {
+      // stop all audio
+      if (this.uidAudioPlayng) {
+        const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
+        divPlay.pause();
+        // console.log('> pausa: ', divPlay);
+      }
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+
+    try {
+      // console.log(e.target.id);
+      if (this.uidAudioPlayng) {
+        this.uidAudioPlayng = '';
+      }
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+  playAudioMsg(e) {
+    // stop all audio
+    if (this.uidAudioPlayng) {
+      const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
+      divPlay.pause();
+      // console.log('> pausa: ', divPlay);
+    }
+    try {
+      // console.log(e.target.id);
+      // set uid audio playng
+      this.uidAudioPlayng = e.target.id;
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+  updateTimeAudioMsg(ev){
+    var currTime = Math.floor(ev.target.currentTime); 
+    var duration = Math.floor(ev.target.duration);
+
+    let minutes = 0;
+    if(currTime > 60){
+      minutes = Math.floor(currTime / 60);
+    }
+    const seconds = currTime - minutes * 60
+    // console.log('timeeee', minutes + ':' + seconds )
+    // this.playState.innerHTML = minutes + ':' + seconds
+  }
+
+
+
+  /**
+   *
+   * @param uid
+   */
+  playPausaAudioMsg(uid: string) {
+    // console.log('playPausaAudioMsg: ', uid);
+    const that = this;
+    try {
+      const divPause = (<HTMLAudioElement>document.getElementById(that.uidAudioPlayng));
+      const divPlay = (<HTMLAudioElement>document.getElementById(uid));
+      if (divPause) {
+        divPause.pause();
+      }
+
+      if (that.uidAudioPlayng === uid) {
+        that.uidAudioPlayng = '';
+      } else {
+        if (divPlay) {
+          setTimeout(function() {
+            // if (that.g.autoplay_activated) {
+            //   divPlay.play();
+            // }
+            this.uidAudioPlayng = uid;
+          }, 300);
+        }
+      }
+
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+}

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -36,6 +36,11 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
+      <chat-audio *ngIf="isAudio(message)"
+        [metadata]="message.metadata" 
+        (onElementRendered)="onElementRenderedFN($event)">
+      </chat-audio>
+
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
         [width]="message.metadata.width"

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -5,7 +5,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
+import { isAudio, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
@@ -27,6 +27,7 @@ export class BubbleMessageComponent implements OnInit {
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
+  isAudio = isAudio;
   convertColorToRGBA = convertColorToRGBA
 
  // ========== begin:: check message type functions ======= //

package/src/app/utils/globals.ts

@@ -389,7 +389,7 @@ export class Globals {
     /**enable user to set a telegram number to chat with */
     this.fileUploadAccept = "image/*,.pdf,.txt"
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
-    this.disconnetTime = 10
+    this.disconnetTime = 60
 
     this.showWaitTime = true;
 

package/src/assets/js/chat21client.js

@@ -979,12 +979,12 @@ class Chat21Client {
             // clean: true,
             reconnectPeriod: 1000,
             // connectTimeout: 30 * 1000,
-            // will: {
-            //     topic: this.presence_topic,
-            //     payload: '{"disconnected":true}',
-            //     qos: 1,
-            //     retain: true
-            // },
+            will: {
+                topic: this.presence_topic,
+                payload: '{"disconnected":true}',
+                qos: 1,
+                retain: true
+            },
             clientId: this.client_id,
             username: 'JWT',
             password: jwt,

package/src/chat21-core/providers/mqtt/mqtt-conversation-handler.ts

@@ -101,11 +101,14 @@ export class MQTTConversationHandler extends ConversationHandlerService {
             this.logger.error('[MQTTConversationHandlerSERVICE] cant connect invalid this.conversationWith', this.conversationWith);
             return;
         }
-        this.chat21Service.chatClient.lastMessages(this.conversationWith, (err, messages) => {
+        this.chat21Service.chatClient.lastMessages(this.conversationWith, async (err, messages) => {
             if (!err) {
                 this.logger.log('[MQTTConversationHandlerSERVICE] message lastMessages:', messages);
                 messages.sort(compareValues('timestamp', 'asc'));
-                messages.forEach(async (message) => {
+                const that = this
+                
+                // messages.forEach(async (message) => {
+                for (const message of messages){
                     // this.addedMessage(msg);
                     const msg: MessageModel = message;
                     msg.uid = message.message_id;
@@ -115,18 +118,18 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                         return;
                     }
 
-                    if (msg.attributes && msg.attributes.commands && msg.attributes.commands.lenght > 0 ) {
+                    if (msg.attributes && msg.attributes.commands) {
                         this.logger.debug('[MQTTConversationHandlerSERVICE] splitted message::::', this.messages, msg)
-                        this.addCommandMessage(msg)
+                        await this.addCommandMessage(msg)
                     } else {
                         this.logger.debug('[MQTTConversationHandlerSERVICE] NOT splitted message::::', msg)
                         this.addedMessage(msg)
                     }
-                });
+                };
             }
         });
         const handler_message_added = this.chat21Service.chatClient.onMessageAddedInConversation(
-            this.conversationWith, (message, topic) => {
+            this.conversationWith, async (message, topic) => {
                 this.logger.log('[MQTTConversationHandlerSERVICE] message added:', message, 'on topic:', topic, this.messages);
                 // this.addedMessage(msg);
                 const msg: MessageModel = message;
@@ -143,9 +146,9 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                 //     return;
                 // }
                 
-                if (msg.attributes && msg.attributes.commands && msg.attributes.commands.lenght > 0) {
+                if (msg.attributes && msg.attributes.commands) {
                     this.logger.debug('[MQTTConversationHandlerSERVICE] splitted message::::', msg)
-                    this.addCommandMessage(msg)
+                    await this.addCommandMessage(msg)
                 } else {
                     this.logger.debug('[MQTTConversationHandlerSERVICE] NOT splitted message::::', msg)
                     this.addedMessage(msg)
@@ -264,7 +267,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
     }
 
     /** */
-    private addedMessage(messageSnapshot: MessageModel) {
+    private addedMessage(messageSnapshot: MessageModel): Promise<boolean> {
         const msg = this.messageGenerate(messageSnapshot);
         let isInfoMessage = messageType(MESSAGE_TYPE_INFO, msg)
         if(isInfoMessage){
@@ -461,60 +464,64 @@ export class MQTTConversationHandler extends ConversationHandlerService {
         });
     }
 
-    private addCommandMessage(msg: MessageModel){
+    private async addCommandMessage(msg: MessageModel): Promise<boolean>{
         const that = this;
         const commands = msg.attributes.commands;
         let i=0;
-        function execute(command){
-            if(command.type === "message"){
-                that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> type="message"', command, i)
-                if (i >= 2) {
-                    
-                    //check if previus wait message type has time value, otherwize set to 1000ms
-                    !commands[i-1].time? commands[i-1].time= 1000 : commands[i-1].time
-                    command.message.timestamp = commands[i-2].message.timestamp + commands[i-1].time;
-                    
-                    /** CHECK IF MESSAGE IS JUST RECEIVED: IF false, set next message time (if object exist) to 0 -> this allow to show it immediately */
-                    if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
-                        let previewsTimeMsg = msg.timestamp;
-                        commands[i-2]? previewsTimeMsg = commands[i-2].message.timestamp : null;
-                        command.message.timestamp = previewsTimeMsg + 100
-                        commands[i+1]? commands[i+1].time = 0 : null
-                    }
-                } else { /**MANAGE FIRST MESSAGE */
-                    command.message.timestamp = msg.timestamp;
-                    if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
-                        commands[i+1]? commands[i+1].time = 0 : null
-                    }
-                }
-                that.generateMessageObject(msg, command.message, i, function () {
-                    i += 1
-                    if (i < commands.length) {
-                        execute(commands[i])
+        return new Promise((resolve, reject)=>{
+            function execute(command){
+                if(command.type === "message"){
+                    that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> type="message"', command, i)
+                    if (i >= 2) {
+                        
+                        //check if previus wait message type has time value, otherwize set to 1000ms
+                        !commands[i-1].time? commands[i-1].time= 1000 : commands[i-1].time
+                        command.message.timestamp = commands[i-2].message.timestamp + commands[i-1].time;
+                        
+                        /** CHECK IF MESSAGE IS JUST RECEIVED: IF false, set next message time (if object exist) to 0 -> this allow to show it immediately */
+                        if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
+                            let previewsTimeMsg = msg.timestamp;
+                            commands[i-2]? previewsTimeMsg = commands[i-2].message.timestamp : null;
+                            command.message.timestamp = previewsTimeMsg + 100
+                            commands[i+1]? commands[i+1].time = 0 : null
+                        }
+                    } else { /**MANAGE FIRST MESSAGE */
+                        command.message.timestamp = msg.timestamp;
+                        if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
+                            commands[i+1]? commands[i+1].time = 0 : null
+                        }
                     }
-                    else {
-                        that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> last command executed (wait), exit') 
+                    that.generateMessageObject(msg, command.message, i, function () {
+                        i += 1
+                        if (i < commands.length) {
+                            execute(commands[i])
+                        }
+                        else {
+                            that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> last command executed (wait), exit') 
+                            resolve(true)
+                        }
+                    })
+                }else if(command.type === "wait"){
+                    that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> type="wait"', command, i, commands.length)
+                    //publish waiting event to simulate user typing
+                    if(isJustRecived(that.startTime.getTime(), msg.timestamp)){
+                        // console.log('message just received::', command, i, commands)
+                        that.messageWait.next({uid: that.conversationWith, uidUserTypingNow: msg.sender, nameUserTypingNow: msg.sender_fullname, waitTime: command.time, command: command})
                     }
-                })
-            }else if(command.type === "wait"){
-                that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> type="wait"', command, i, commands.length)
-                //publish waiting event to simulate user typing
-                if(isJustRecived(that.startTime.getTime(), msg.timestamp)){
-                    // console.log('message just received::', command, i, commands)
-                    that.messageWait.next({uid: that.conversationWith, uidUserTypingNow: msg.sender, nameUserTypingNow: msg.sender_fullname, waitTime: command.time, command: command})
+                    setTimeout(function() {
+                        i += 1
+                        if (i < commands.length) {
+                            execute(commands[i])
+                        }
+                        else {
+                            that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> last command executed (send message), exit') 
+                            resolve(true)
+                        }
+                    },command.time)
                 }
-                setTimeout(function() {
-                    i += 1
-                    if (i < commands.length) {
-                        execute(commands[i])
-                    }
-                    else {
-                        that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> last command executed (send message), exit') 
-                    }
-                },command.time)
             }
-        }
-        execute(commands[0]) //START render first message
+            execute(commands[0]) //START render first message
+        })
     }
     
     private generateMessageObject(message, command_message, index, callback) {

package/src/chat21-core/providers/mqtt/mqtt-presence.service.ts

@@ -72,9 +72,9 @@ export class MQTTPresenceService extends PresenceService {
 
   public imHere(): void {
     this.logger.debug('[MQTT-PRESENCE] imHere', this.tenant);
-    // setTimeout(() => {
-    //   this.chat21Service.chatClient.ImHere()
-    // }, 2000);
+    setTimeout(() => {
+      this.chat21Service.chatClient.ImHere()
+    }, 2000);
   }
 
   /**

package/src/chat21-core/utils/utils-message.ts

@@ -12,14 +12,14 @@ import {
 
 /** */
 export function isImage(message: any) {
-  if (message && message.type && message.metadata && message.metadata.src && message.type === 'image') {
+  if (message && message.type && message.type === 'image' && message.metadata && message.metadata.src) {
     return true;
   }
   return false;
 }
 
 export function isFrame(message: any) {
-  if (message && message.type && message.metadata && message.metadata.src && message.type === 'frame') {
+  if (message && message.type && message.type === 'frame' && message.metadata && message.metadata.src) {
     return true;
   }
   return false;
@@ -27,10 +27,17 @@ export function isFrame(message: any) {
 
 /** */
 export function isFile(message: any) {
-    if (message && message.type && message.metadata && message.metadata.src && message.type === 'file') {
-      return true;
-    }
-    return false;
+  if (message && message.type && message.type === 'file' && message.metadata && message.metadata.src && !message.metadata.includes('audio')) {
+    return true;
+  }
+  return false;
+}
+
+export function isAudio(message: any) {
+  if (message && message.type && message.type === 'file' && message.metadata && message.metadata.src && message.metadata.includes('audio') ) {
+    return true;
+  }
+  return false;
 }
 
 /** */