@chat21/chat21-ionic 3.0.98 → 3.0.99

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # chat21-ionic ver 3.0
 
+### 3.0.99 in PROD
+
+### 3.0.99-rc.2
+- bug-fixed: after tiledesk closes a conversation, call archiveConversation's conversationsHandler method to manually remote it from active conversations list
+
+### 3.0.99-rc.1
+- added: audio file enabled
+- added: audio icon if audio message is received in ion-list-conversations component
+- bug-fixed: do not copy user if on mobile from profile-info modal
+- bug-fixed: if lead email is deleted, leadInfo is not updated and can send email
+- removed: PACKAGE.version in favour of environment.version
+
 ### 3.0.98 in PROD
 
 ### 3.0.98-rc.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.98",
+    "version": "3.0.99",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {
@@ -23,7 +23,7 @@
         "@angular/common": "~8.2.14",
         "@angular/core": "~8.2.14",
         "@angular/forms": "~8.2.14",
-        "@angular/google-maps": "^8.2.14",
+        "@angular/google-maps": "~9.0.0",
         "@angular/material": "^8.2.3",
         "@angular/platform-browser": "~8.2.14",
         "@angular/platform-browser-dynamic": "~8.2.14",
@@ -80,6 +80,7 @@
         "@ionic/angular-toolkit": "^2.1.1",
         "@types/jasmine": "~3.3.8",
         "@types/jasminewd2": "~2.0.3",
+        "@types/node": "^12.20.55",
         "codelyzer": "^5.0.0",
         "cordova-plugin-add-swift-support": "^2.0.2",
         "jasmine-core": "~4.4.0",
@@ -92,7 +93,7 @@
         "protractor": "~5.4.0",
         "ts-node": "~7.0.0",
         "tslint": "~5.15.0",
-        "typescript": "~3.4.3"
+        "typescript": "^3.4.5"
     },
     "description": "An Ionic project",
     "cordova": {

package/src/app/app.component.ts

@@ -56,7 +56,6 @@ import { getImageUrlThumbFromFirebasestorage } from 'src/chat21-core/utils/utils
 // import { mapTo } from 'rxjs/operators';
 import { TiledeskService } from './services/tiledesk/tiledesk.service';
 import { NetworkService } from './services/network-service/network.service';
-import * as PACKAGE from 'package.json';
 import { filter } from 'rxjs/operators'
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { Location } from '@angular/common'
@@ -450,7 +449,7 @@ export class AppComponent implements OnInit {
 
     const appconfig = this.appConfigProvider.getConfig();
     // this.logger.info('[APP-COMP] appconfig: ', appconfig)
-    this.version = PACKAGE.version;
+    this.version = environment.version;
     this.logger.info('[APP-COMP] version: ', this.version)
 
     this.logger.setLoggerConfig(true, appconfig.logLevel)
@@ -473,7 +472,7 @@ export class AppComponent implements OnInit {
       if (this.splashScreen) {
         this.splashScreen.hide();
       }
-      this.statusBar.styleDefault();
+      this.statusBar.styleLightContent();
       this.navService.init(this.sidebarNav, this.detailNav);
       // this.persistence = appconfig.authPersistence;
       // this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -5,6 +5,11 @@
 :host .base_sent .msg_sent ::ng-deep > div > div > chat-image > div {
     // display: none !important;
     // border-radius: unset !important;
+    border-top-right-radius: 6px !important;
+    border-top-left-radius: 16px !important;
+    border-bottom-left-radius: 16px !important;
+    border-bottom-right-radius: 0px;
+
     img,
     .loader {
         border-top-right-radius: 6px !important;
@@ -17,6 +22,10 @@
 :host .base_receive .msg_receive ::ng-deep > div > div > chat-image > div > img {
     // display: none !important;
     // border-radius: unset !important;
+    border-top-left-radius: 6px !important;
+    border-top-right-radius: 16px !important;
+    border-bottom-right-radius: 16px !important;
+    border-bottom-left-radius: 0px;
     img,
     .loader {
         border-top-left-radius: 6px !important;

package/src/app/chatlib/conversation-detail/message/audio/audio.component.html

@@ -0,0 +1,21 @@
+
+
+<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>
+<div id="example"></div>
+

package/src/app/chatlib/conversation-detail/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;
+}

package/src/app/chatlib/conversation-detail/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/chatlib/conversation-detail/message/audio/audio.component.ts

@@ -0,0 +1,166 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+// import * as WaveSurfer from 'wavesurfer.js';
+
+// declare var WaveSurfer
+@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'
+
+  // wavesurfer: any;
+  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')
+    this.loadLib()
+  }
+
+  // ionViewWillEnter(){
+  //   this.loadLib()
+  // }
+
+  private async loadLib(){
+    // const SiriWave = await import("siriwave");
+    // console.log('elementttt', document.getElementById("example"), this.elementRef.nativeElement.querySelector("#example"))
+    // var instance = new SiriWave({
+    //   // container: this.elementRef.nativeElement.querySelector("#example"),
+    //   container: document.getElementById("example"),
+    //   width: 300,
+    //   height: 120,
+    // });
+    // instance.start();
+    // this.wavesurfer = WaveSurfer.create({
+    //   container: "#" + 'example',
+    //   waveColor: "#e1f5fe",
+    //   progressColor: "#03a9f4",
+    //   cursorColor: "rgb(255 255 255 / 50%)",
+    //   barWidth: 4,
+    //   barHeight: 1,
+    //   barRadius: 2,
+    //   cursorWidth: 1,
+    //   // height: 150,
+    //   fillParent: true,
+    //   barGap: 0,
+    //   // backend: 'MediaElement',
+    //   // mediaType:'audio',
+    //   normalize: true,
+    //   // url: this.metadata.url
+    // })
+
+    // this.wavesurfer.load('https://eu.rtmv3.tiledesk.com/api/files/download?path=uploads/public/files/2f715ae1-6dc6-4cbf-a94c-42be26f1a723/media-2b92sy.ogg');
+
+    // this.wavesurfer.on('ready', function () {
+    //   console.log('readyyyyy')
+    //   // wavesurfer.play();
+    // });
+
+  }
+
+  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/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -49,6 +49,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/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -3,7 +3,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-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 { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
@@ -33,6 +33,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
+  isAudio = isAudio;
   convertColorToRGBA = convertColorToRGBA
 
   // ========== begin:: check message type functions ======= //

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.html

@@ -6,7 +6,7 @@
     </div>
       
     <div style="max-width: 70%;">
-        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})" placement="left"></span>
+        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})" placement="bottom"></span>
         <!-- <ng-template #timeTooltipLeft>
             <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
         </ng-template>  -->

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -133,10 +133,9 @@
           [innerHTML]="conversation.last_message_text"></p> -->
   
         <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
-        <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
-          class="icon-image-before-msg"></ion-icon>
-        <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
-          class="icon-attach-before-msg"></ion-icon>
+        <ion-icon *ngIf="isImage(conversation)" name="image-outline" class="icon-image-before-msg"></ion-icon>
+        <ion-icon *ngIf="isFile(conversation)" name="attach-outline" class="icon-attach-before-msg"></ion-icon>
+        <ion-icon *ngIf="isAudio(conversation)" name="mic-outline" class="icon-mic-before-msg"></ion-icon>
         <!-- </div> -->
         <!-- [innerHTML]="conversation.last_message_text" -->
         <span [class.not-read]="conversation.is_new">

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.scss

@@ -236,11 +236,13 @@ ion-item:hover {
     font-size: 12px;
 }
 
-.icon-image-before-msg-wpr {
+.icon-image-before-msg-wpr{
     float: left;
     margin-right: 3px;
 }
-.icon-image-before-msg {
+
+.icon-image-before-msg,
+.icon-mic-before-msg {
     vertical-align: middle;
     color: #999999;
     padding-right: 3px;

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -17,6 +17,7 @@ import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AlertController } from '@ionic/angular';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { isAudio, isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -34,6 +35,11 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   @Output() onCloseAlert = new EventEmitter();
 
   convertMessage = convertMessage;
+  isImage = isImage
+  isFrame = isFrame
+  isFile = isFile
+  isAudio = isAudio
+
   isApp: boolean = false;
   public logger: LoggerService = LoggerInstance.getInstance();
   public currentYear: any;

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -12,7 +12,7 @@ import { AppConfigProvider } from 'src/app/services/app-config';
 import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
-import * as PACKAGE from 'package.json';
+import { environment } from 'src/environments/environment';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
@@ -70,7 +70,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/project/';
-    this.version = PACKAGE.version;
+    this.version = environment.version;
     this.subcribeToAuthStateChanged();
     this.listenTocurrentProjectUserUserAvailability$();
     this.listenToCurrentStoredProject();

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -941,8 +941,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         that.logger.debug('[CONVS-DETAIL] getLeadDetail - selected REQUEST detail', request)
         if(request && request.channel){
           this.conversation.attributes['request_channel'] = request.channel.name
-        }
-        if (request.lead && request.lead.email) {
+        } 
+        if (request.lead && request.lead.email) { //LEAD has an email
           that.leadInfo = {
             lead_id: request.lead.lead_id,
             hasEmail: true,
@@ -954,6 +954,16 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
           }
           that.presenceService.userIsOnline(this.leadInfo.lead_id);
           that.webSocketService.subscribeToWS_RequesterPresence(projectId, that.leadInfo.lead_id)
+        } else{ // LEAD not has an email
+          that.leadInfo = {
+            lead_id: request.lead.lead_id,
+            hasEmail: false,
+            email: null,
+            projectId: projectId,
+            presence: {
+              status: 'offline'
+            }
+          }
         }
       }, (error) => {
         this.logger.error('[CONVS-DETAIL] - getLeadDetail - GET REQUEST DETAIL - ERROR  ', error)
@@ -1286,8 +1296,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.conversation.attributes['project_name'],
         this.conversation.attributes['request_channel']
       )
-      this.getLeadDetail()
     }
+    this.getLeadDetail()
   }
 
   updateLiveInfo(msg) {

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -46,7 +46,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { NetworkService } from 'src/app/services/network-service/network.service'
 import { Subject } from 'rxjs'
 import { skip, takeUntil } from 'rxjs/operators'
-import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
+import { REQUEST_ARCHIVED, TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils-message';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 
@@ -791,7 +791,7 @@ export class ConversationListPage implements OnInit {
   }
 
   onConversationLoaded(conversation: ConversationModel) {
-    // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
+    this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
     // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded is new? ', conversation.is_new)
     // if (conversation.is_new === false) {
     //   this.ionContentConvList.scrollToTop(0);
@@ -802,7 +802,7 @@ export class ConversationListPage implements OnInit {
     // Fixes the bug: if a snippet of code is pasted and sent it is not displayed correctly in the convesations list
 
     var regex = /<br\s*[\/]?>/gi
-    if (conversation && conversation.last_message_text) {
+    if (conversation ) { //&& conversation.last_message_text
       conversation.last_message_text = conversation.last_message_text.replace(regex, '',)
 
       //FIX-BUG: 'YOU: YOU: YOU: text' on last-message-text in conversation-list
@@ -900,13 +900,13 @@ export class ConversationListPage implements OnInit {
     if (checkPlatformIsMobile()) {
       this.logger.log('[CONVS-LIST-PAGE] checkPlatformIsMobile(): ', checkPlatformIsMobile())
       this.logger.log('[CONVS-LIST-PAGE] DESKTOP (window < 768)', this.navService)
-      this.logger.log('[CONVS-LIST-PAGE] navigateByUrl this.conversationSelected conversation_with_fullname ', this.conversationSelected.conversation_with_fullname)
+      this.logger.log('[CONVS-LIST-PAGE] navigateByUrl this.conversationSelected conversation_with_fullname ', this.conversationSelected)
       let pageUrl = 'conversation-detail/' + this.uidConvSelected + '/' + this.conversationSelected.conversation_with_fullname + '/' + converationType
       this.logger.log('[CONVS-LIST-PAGE] pageURL', pageUrl)
         // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
       this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29').replace( /#/g, "%23" ), {replaceUrl: true})
     } else {
-      this.logger.log('[CONVS-LIST-PAGE] navigateByUrl this.conversationSelected conversation_with_fullname ', this.conversationSelected.conversation_with_fullname)
+      this.logger.log('[CONVS-LIST-PAGE] navigateByUrl this.conversationSelected conversation_with_fullname ', this.conversationSelected)
       this.logger.log('[CONVS-LIST-PAGE] checkPlatformIsMobile(): ', checkPlatformIsMobile())
       this.logger.log('[CONVS-LIST-PAGE] MOBILE (window >= 768) ', this.navService)
       let pageUrl = 'conversation-detail/' + this.uidConvSelected
@@ -1058,6 +1058,8 @@ export class ConversationListPage implements OnInit {
     this.tiledeskService.closeSupportGroup(tiledeskToken, project_id, conversationId).subscribe((res) => {
       this.archiveActionNotAllowed = false
       this.logger.log('[CONVS-LIST-PAGE] - onCloseConversation closeSupportGroup RES',res)
+      if(res.status === REQUEST_ARCHIVED)
+        this.conversationsHandlerService.archiveConversation(conversationId)
     },(error) => {
       this.logger.error('[CONVS-LIST-PAGE] - onCloseConversation closeSupportGroup - ERROR  ',error)
       this.logger.error('[CONVS-LIST-PAGE] - onCloseConversation closeSupportGroup - ERROR  error.error.msg ',error.error.msg)

package/src/app/pages/profile-info/profile-info.page.html

@@ -1,12 +1,22 @@
+<!-- <ion-header no-border class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button ion-button fill="clear" (click)="onClose()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header> -->
+
 <ion-content class="current-user-profile">
 
-  <div class="buttons-header">
+  <ion-toolbar>
     <ion-buttons slot="end">
       <ion-button ion-button fill="clear" (click)="onClose()">
         <ion-icon slot="icon-only" name="close"></ion-icon>
       </ion-button>
     </ion-buttons>
-  </div>
+  </ion-toolbar>
 
   <div *ngIf="loggedUser" class="content-user-profile">
     <div class="user">

package/src/app/pages/profile-info/profile-info.page.scss

@@ -68,6 +68,12 @@
 //         }
 //     }
 
+ion-toolbar{
+    position: absolute;
+    z-index: 2;
+    --ion-toolbar-background: transparent;
+}
+
 .availability-section {
     // top: 320px;
     text-align: center;
@@ -310,6 +316,7 @@
         direction: ltr;
         -webkit-font-feature-settings: 'liga';
         -webkit-font-smoothing: antialiased;
+        font-feature-settings: 'liga'
     }
 
     .sidebar-labels {

package/src/app/pages/profile-info/profile-info.page.ts

@@ -1,3 +1,4 @@
+import { environment } from 'src/environments/environment';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { Component, OnInit, Input, EventEmitter, Output, ViewChild, Renderer2 } from '@angular/core';
@@ -14,16 +15,13 @@ import { PresenceService } from 'src/chat21-core/providers/abstract/presence.ser
 import { UserModel } from 'src/chat21-core/models/user';
 
 // utils
-import { isInArray, setLastDateWithLabels } from 'src/chat21-core/utils/utils';
-import * as PACKAGE from 'package.json';
 import { EventsService } from 'src/app/services/events-service';
 
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
-import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
-import { skip } from 'rxjs/operators';
+import { checkPlatformIsMobile, setLastDateWithLabels } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'app-profile-info',
@@ -39,6 +37,7 @@ export class ProfileInfoPage implements OnInit {
   public translationsMap: Map<string, string>;
   private logger: LoggerService = LoggerInstance.getInstance();
 
+  isMobile: boolean = false;
   private subscriptions = [];
   borderColor = '#2d323e';
   fontColor = '#949494';
@@ -70,8 +69,19 @@ export class ProfileInfoPage implements OnInit {
 
   /** */
   ngOnInit() {
-    this.version = PACKAGE.version;
+    this.version = environment.version;
     this.translations();
+
+    if (checkPlatformIsMobile()) {
+      this.isMobile = true
+      // this.openInfoConversation = false; // indica se è aperto il box info conversazione
+      this.logger.log('[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
+    } else {
+      this.isMobile = false
+      this.logger.log('[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
+      // this.openInfoConversation = true;
+    }
+    
   }
 
   /** */
@@ -280,17 +290,22 @@ export class ProfileInfoPage implements OnInit {
   }
 
   copyLoggedUserUID() {
-    var copyText = document.createElement("input");
-    copyText.setAttribute("type", "text");
-    copyText.setAttribute("value", this.loggedUser.uid);
-
-    document.body.appendChild(copyText);
-    copyText.select();
-    copyText.setSelectionRange(0, 99999); /*For mobile devices*/
-    document.execCommand("copy");
-    this.logger.log("Copied the text: " + copyText.value);
-    const tootipElem = <HTMLElement>document.querySelector('.chat-tooltip');
-    this.renderer.appendChild(tootipElem, this.renderer.createText('Copied!'))
 
+    if(!this.isMobile){
+      var copyText = document.createElement("input");
+      copyText.setAttribute("type", "text");
+      copyText.setAttribute("value", this.loggedUser.uid);
+
+      document.body.appendChild(copyText);
+      copyText.select();
+      copyText.setSelectionRange(0, 99999); /*For mobile devices*/
+      document.execCommand("copy");
+      this.logger.log("Copied the text: " + copyText.value);
+      const tootipElem = <HTMLElement>document.querySelector('.chat-tooltip');
+      this.renderer.appendChild(tootipElem, this.renderer.createText('Copied!'))
+    }else{
+      navigator.clipboard.writeText(this.loggedUser.uid)
+    }
+    
   }
 }

package/src/app/shared/shared.module.ts

@@ -50,6 +50,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SafeHtmlPipe } from '../directives/safe-html.pipe';
+import { AudioComponent } from '../chatlib/conversation-detail/message/audio/audio.component';
 
 // import { MessageTextAreaComponent } from '../components/conversation-detail/message-text-area/message-text-area.component'; // MessageTextAreaComponent is part of the declarations ConversationDetailPageModule
 
@@ -77,6 +78,7 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     ActionButtonComponent,
     FrameComponent,
     ImageComponent,
+    AudioComponent,
     InfoMessageComponent,
     ReturnReceiptComponent,
     TextComponent,
@@ -120,6 +122,7 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     ActionButtonComponent,
     FrameComponent,
     ImageComponent,
+    AudioComponent,
     InfoMessageComponent,
     ReturnReceiptComponent,
     TextComponent,

package/src/chat21-core/providers/abstract/notifications.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { UserModel } from 'src/chat21-core/models/user';
-import * as PACKAGE from '../../../../package.json';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
@@ -8,7 +8,7 @@ import * as PACKAGE from '../../../../package.json';
 export abstract class NotificationsService {
   
   private _tenant: string;
-  public BUILD_VERSION = PACKAGE.version
+  public BUILD_VERSION = environment.version
 
   public setTenant(tenant): void {
     this._tenant = tenant;

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

@@ -25,6 +25,9 @@ export const MSG_STATUS_RECEIVED = 200;
 export const MSG_STATUS_RETURN_RECEIPT = 250;
 export const MSG_STATUS_SEEN = 300;
 
+//REQUEST STATUS
+export const REQUEST_ARCHIVED = 1000
+
 // constans messages detail
 export const MIN_HEIGHT_TEXTAREA = 24;
 export const MAX_HEIGHT_TEXTAREA = 180;

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,7 +27,14 @@ export function isFrame(message: any) {
 
 /** */
 export function isFile(message: any) {
-  if (message && message.type && message.metadata && message.metadata.src && message.type === 'file') {
+    if (message && message.type && message.type === 'file' && message.metadata && message.metadata.src && !message.metadata.type.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.type.includes('audio') ) {
     return true;
   }
   return false;