@chat21/chat21-ionic 3.0.80-rc.1 → 3.0.81-rc.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # chat21-ionic ver 3.0
 
+### 3.0.81-rc.1
+- added: remove bubble-message background if is image or iframe and no text is in message
+- added: new sound if unassigned request arrive
+- added: animation on hover an image
+- added: parameter to /close to forse the closing of a conversation
+- added: v.0.1.12.1 chatclient.js
+- changed: info-message UI, image UI, frame UI
+- bug-fixed: if click on canned icon, then close and clear '/' char, if click again on canned icon, '/' was not added to message text-area
+
+### 3.0.80 in PROD
+- bug-fixed: if search a canned response, after clicked it does not replaced into text-area
 
 ### 3.0.80-rc.1
 - changed: moved sender_fullname inside bubble-message component

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.80-rc.1",
+    "version": "3.0.81-rc.1",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -1,5 +1,5 @@
 
-import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
+import { TYPE_DIRECT, TYPE_SUPPORT_GROUP, URL_SOUND_CONVERSATION_UNASSIGNED } from 'src/chat21-core/utils/constants';
 import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
@@ -89,12 +89,14 @@ export class AppComponent implements OnInit {
 
   private audio: any;
   private audio_NewConv: any;
+  private audio_Unassigned: any;
   private setIntervalTime: any;
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
   public isSoundEnabled: boolean;
   private hasPlayed: boolean;
   private hasPlayedConversation: boolean;
+  private hasPlayedConversationUnassigned: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -838,6 +840,10 @@ export class AppComponent implements OnInit {
     this.audio_NewConv.src = chatBaseUrl + URL_SOUND_CONVERSATION_ADDED;
     this.audio_NewConv.load();
 
+    this.audio_Unassigned = new Audio();
+    this.audio_Unassigned.src = chatBaseUrl + URL_SOUND_CONVERSATION_UNASSIGNED;
+    this.audio_Unassigned.load();
+
     const sound_status = localStorage.getItem('dshbrd----sound')
     if(sound_status && sound_status !== 'undefined'){
       this.isSoundEnabled = sound_status === 'enabled'? true: false
@@ -879,7 +885,24 @@ export class AppComponent implements OnInit {
     }
     this.logger.debug('[APP-COMP] manageTabNotification can saund?', this.isInitialized, this.isSoundEnabled)
     if(this.isInitialized && this.isSoundEnabled) {
-      sound_type === 'conv_added'? this.soundConversationAdded(): this.soundMessage();
+      switch(sound_type){
+        case 'conv_added': {
+          this.soundConversationAdded();
+          break;
+        }
+        case 'new_message': {
+          this.soundMessage();
+          break;
+        }
+        case 'conv_unassigned': {
+          this.soundConversationUnassigned();
+          break;
+        }
+        default:{
+          this.soundMessage();
+          break;
+        }
+      }
     }
   }
 
@@ -923,6 +946,21 @@ export class AppComponent implements OnInit {
       });
     }
   }
+
+  soundConversationUnassigned(){
+    const that = this;
+    if(!this.hasPlayedConversationUnassigned ){
+      that.audio_Unassigned.play().then(() => {
+        that.hasPlayedConversationUnassigned = true
+        that.logger.debug('[APP-COMP] ****** soundConversationUnassigned played *****');
+        setTimeout(() => {
+          that.hasPlayedConversationUnassigned = false
+        }, 4000);
+      }).catch((error: any) => {
+        that.logger.error('[APP-COMP] ***soundConversationUnassigned error*', error);
+      });
+    }
+  }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
@@ -1185,9 +1223,9 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      this.logger.debug("appIsInitialized::::",this.isInitialized)
+      this.logger.debug("subscribeUnservedRequestCount appIsInitialized::::",this.isInitialized)
       if(this.isInitialized){
-        this.manageTabNotification(unservedRequestCount) //sound and alternate title
+        this.manageTabNotification('conv_unassigned', unservedRequestCount) //sound and alternate title
       }
     }
   }

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

@@ -102,6 +102,7 @@
       <!--backgroundColor non viene ancora usato -->
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
+        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
         [class.emoticon]="isEmojii(message?.text)"
         [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
@@ -142,6 +143,7 @@
       <!--backgroundColor non viene ancora usato -->
       <chat-bubble-message class="messages msg_receive" id="message_msg_receive"
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
+        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
         [class.emoticon]="isEmojii(message?.text)"
         [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
         [isSameSender]="isSameSender(message?.sender, i)"

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

@@ -176,6 +176,9 @@ ion-item {
             color: var(--bubble-privateMsgColor)
         }
     }
+    .no-background{
+        background: transparent!important;
+    }
     .emoticon {
         background: unset !important;
         font-size: 4em;
@@ -245,7 +248,9 @@ ion-item {
             color: var(--bubble-privateMsgColor)
         }
     }
-
+    .no-background{
+        background: transparent!important;
+    }
     .emoticon {
         background: unset !important;
         font-size: 4em;

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

@@ -1,16 +1,15 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div id="bubble-message"
-  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px' : null }"
-  class="messages primary-color">
+<!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width : null -->
+<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px' }"  class="messages primary-color">
 
 
   <div>
 
     <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender" 
       [style.color]="convertColorToRGBA(fontColor, 65)"
-      [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 0px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+      [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
       {{message?.sender_fullname}}
     </div>
     <!-- message type:: image -->
@@ -35,8 +34,8 @@
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
     <chat-frame *ngIf="isFrame(message)" 
       [metadata]="message.metadata" 
-      [width]="message.metadata.width"
-      [height]="message.metadata.height"
+      [width]="sizeImage?.width"
+      [height]="sizeImage?.width"
       (onElementRendered)="onElementRenderedFN($event)">
     </chat-frame>
 

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

@@ -1,3 +1,9 @@
-<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height + 'px' }">
-  <iframe  allowfullscreen width = "100%" height = "100%" style= "border:none; border-radius: 8px 8px 0 0 " [src]="url" ></iframe>
+<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height }">
+  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height  }"></div>
+  <iframe  allowfullscreen 
+    [ngClass]="{'isLoadingImage': loading}"
+    width = "100%" height = "100%" 
+    [src]="url" 
+    (load)="onLoaded($event)">
+  </iframe>
 </div>

package/src/app/chatlib/conversation-detail/message/frame/frame.component.scss

@@ -0,0 +1,36 @@
+
+:host{
+    // --borderRadius: #{$border-radius-bubble-message};
+    --borderRadius: 8px 8px 0px 0px;
+}
+
+.loader {
+    float: left;
+    // position: absolute;
+    z-index: 1000;
+    // background-color: #ccc;
+    border-radius: var(--borderRadius);
+    background-image: linear-gradient(90deg, transparent 0px, #e8e8e8 40px, transparent 80px);
+    background-size: 600px;
+    animation: shine-loader 1.6s infinite linear;
+}
+
+.isLoadingImage {
+    // position: relative;
+    // top: 6px;
+    display: none;
+}
+
+iframe {
+    border:none; 
+    border-radius: var(--borderRadius)
+}
+
+@keyframes shine-loader {
+    0% {
+        background-position: -32px;
+    }
+    40%, 100% {
+        background-position: 208px;
+    }
+}

package/src/app/chatlib/conversation-detail/message/frame/frame.component.ts

@@ -9,8 +9,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 export class FrameComponent implements OnInit {
 
   @Input() metadata: any;
-  @Input() width: string;
-  @Input() height: string;
+  @Input() width: number;
+  @Input() height: number;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   
   url: any;

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

@@ -1,5 +1,5 @@
 <!-- [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; " -->
-<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" class="c21-img-container">
+<div [ngStyle]="{'max-height': height +'px' }" class="c21-img-container">
   <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width , 'height': height  }"></div>
   <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
   <img id="myImg" 

package/src/app/chatlib/conversation-detail/message/image/image.component.scss

@@ -1,26 +1,37 @@
+
+:host{
+    // --borderRadius: #{$border-radius-bubble-message};
+    --borderRadius: 8px;
+}
+
 img {
-    border-radius: 8px;
+    border-radius: var(--borderRadius);
     //padding: 3px;
     margin-bottom: 0px;
     max-width: calc(100% - 6px);
     width: auto;
     height: auto;
     object-fit: cover;
+
+    transition: transform 0.3s ease-in-out 0s;
 }
 
-img:hover{
+.c21-img-container img:hover{
     cursor: pointer;
+    transform: scale(1.05);
 }
 
 .c21-img-container {
     text-align: center;
     width: 100%;
+    overflow: hidden;
     // background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2Fb4361ea5-5e37-433c-b727-9034eb5586fe%2F6d74f795-5873-49a8-9165-38f48642df51%2Ffacebook_like%20(3).png?alt=media&token=79afcfe5-ba0c-4573-9263-0877e0225c84");
     // background-repeat: no-repeat;
     // background-position: 50% 0;
     // background-size: cover;
     // border-top-left-radius: $border-radius-bubble-message;
     // border-top-right-radius: $border-radius-bubble-message;
+    border-radius: var(--borderRadius);
 }
 
 .isLoadingImage {
@@ -32,9 +43,10 @@ img:hover{
 .loader {
     float: left;
     // position: absolute;
-    background-color: #ccc;
-    border-radius: 8px;
-    background-image: linear-gradient(90deg, #f7f4f4 0px, #e8e8e8 40px, #f7f4f4 80px);
+    z-index: 1000;
+    // background-color: #ccc;
+    border-radius: var(--borderRadius);
+    background-image: linear-gradient(90deg, transparent 0px, #e8e8e8 40px, transparent 80px);
     background-size: 600px;
     animation: shine-loader 1.6s infinite linear;
 }

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -8,7 +8,7 @@ import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@
 export class ImageComponent implements OnInit {
 
   @Input() metadata: any;
-  @Input() width: string;
+  @Input() width: number;
   @Input() height: number;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 

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

@@ -2,6 +2,7 @@
     display: flex;
     align-content: center;
     justify-content: center;
+    padding: 4px 0px 2px 0px;
 }
 
 .base_info {

package/src/app/components/canned-response/canned-response.component.html

@@ -6,7 +6,7 @@
       (click)="onClickCannedFN(canned, $event)">
       <div class="cannedContent">
         <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [disabled]="canned.disabled"></ion-input>
-        <ion-input [(ngModel)]="canned.text" *ngIf="canned.text" class="text" [disabled]="canned.disabled"></ion-input>
+        <ion-input [(ngModel)]="canned.text" *ngIf="canned.text" class="text truncate" [disabled]="canned.disabled"></ion-input>
       </div>
       <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
       <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>

package/src/app/components/canned-response/canned-response.component.scss

@@ -94,11 +94,12 @@
         width: 100%;
     }
 
-    ion-input {
+    ion-input, ion-textarea {
         --padding-bottom: 0px;
         --padding-top: 0px;
         &.text{
             font-style: italic;
+            margin-top: 2px;
         }
         &.title {
             font-weight: 500;
@@ -106,6 +107,11 @@
     }
     .native-input[disabled] {
         opacity: 10 !important;
+        cursor: pointer;
+    }
+    .native-textarea[disabled] {
+        opacity: 10 !important;
+        cursor: pointer;
     }
     ion-icon {
         zoom: 0.7;

package/src/app/components/canned-response/canned-response.component.ts

@@ -192,17 +192,16 @@ export class CannedResponseComponent implements OnInit {
   }
 
   filterItems(items, searchTerm) {
-    this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
+    // this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
     //this.logger.log("filterItems::: ",searchTerm);
     return items.filter((item) => {
-      //this.logger.log("filterItems::: ", item.title.toString().toLowerCase());
-      this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
+      // this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
       return item.title.toString().toLowerCase().indexOf(searchTerm.toString().toLowerCase()) > -1
     })
   }
 
   replacePlaceholderInCanned(str) {
-    this.logger.log('[CANNED] - replacePlaceholderInCanned str ', str)
+    // this.logger.log('[CANNED] - replacePlaceholderInCanned str ', str)
     str = str.replace('$recipient_name', this.conversationWithFullname)
     if (this.loggedUser && this.loggedUser.fullname) {
       str = str.replace('$agent_name', this.loggedUser.fullname)

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -96,7 +96,8 @@
             [perLine]="emojiPerLine" 
             [style.visibility]="showEmojiPicker?'visible':'hidden'"  
             [include]="emojiiCategories"
-            [color]="emojiColor" 
+            [color]="emojiColor"
+            [custom]="customEmojis"
             [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }"
             (emojiSelect)="addEmoji($event)">
           </emoji-mart>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -64,7 +64,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public toastMsg: string;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
-  public openCanned: boolean = false;
   public IS_ON_MOBILE_DEVICE: boolean;
 
   TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
@@ -85,7 +84,26 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
   emojiColor: string ="#3880ff"
-  emojiiCategories = [ 'recent', 'people', 'nature', 'activity']
+  emojiiCategories = [ 'recent', 'people', 'nature', 'activity'] //, 'custom']
+
+  customEmojis = [
+    {
+      name: 'Customer-Service',
+      shortNames: ['customer'],
+      text: 'ee',
+      emoticons: [],
+      keywords: ['github'],
+      imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/Customer-Service.png',
+    },
+    {
+      name: 'Octocat',
+      shortNames: ['octocat'],
+      text: 'rr',
+      emoticons: [],
+      keywords: ['github'],
+      imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/FAQ-Chatbot.png',
+    }
+  ];
   /**
    * Constructor
    * @param chooser 
@@ -500,8 +518,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   }
 
   openCannedResponses() {
-    this.openCanned = !this.openCanned
-    this.onClickOpenCannedResponses.emit(this.openCanned);
+    this.onClickOpenCannedResponses.emit();
   }
 
 

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

@@ -1271,17 +1271,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                   this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash)
                   this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash)
 
-                  console.log('bbbbbbb', beforeSlash[beforeSlash.length-1].indexOf(' '), afterSlash === '', this.HIDE_CANNED_RESPONSES)
-
                   if(beforeSlash[beforeSlash.length-1].indexOf(' ') >= 0 && afterSlash === ''){
                     this.HIDE_CANNED_RESPONSES = false
-                    console.log('bbbbbbb 1111', beforeSlash[beforeSlash.length-1])
                   } else if(beforeSlash[beforeSlash.length-1].indexOf(' ') < 0 && afterSlash === '' ){
                     this.HIDE_CANNED_RESPONSES = true
-                    console.log('bbbbbbb 22222', beforeSlash[beforeSlash.length-1])
                   } else if(beforeSlash[beforeSlash.length-1].indexOf(' ') >= 0 && afterSlash === ' '){
                     this.HIDE_CANNED_RESPONSES = true
-                    console.log('bbbbbbb 33333', beforeSlash[beforeSlash.length-1])
                     // this.tagsCannedFilter = []
                   }
                 }
@@ -1323,7 +1318,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   replaceTagInMessage(canned, event?) {
     const elTextArea = this.rowTextArea['el']
-    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
+    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0] as HTMLInputElement;
     // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea ', textArea)
     // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea value', textArea.value,)
 
@@ -1336,18 +1331,20 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned text ', canned.text)
 
     // replace text
-    var strTEMP = textArea.value.replace(/\/$/ig, canned.text)
+    var strTEMP = textArea.value.replace(/\/.*/ig, canned.text)
     strTEMP = this.replacePlaceholderInCanned(strTEMP)
     this.logger.log('[CONVS-DETAIL] replaceTagInMessage strSearch ', strTEMP)
     // strTEMP = this.replacePlaceholderInCanned(strTEMP);
     // textArea.value = '';
     // that.messageString = strTEMP;
     textArea.value = strTEMP
-    setTimeout(() => {
-      // textArea.focus();
-      textArea.setFocus()
-      // this.resizeTextArea()
-    }, 200)
+    this.insertAtCursor(textArea, '')
+    this.setCaretPosition(textArea)
+    // setTimeout(() => {
+    //   // textArea.focus();
+    //   textArea.setFocus()
+    //   // this.resizeTextArea()
+    // }, 200)
     
   }
 
@@ -1387,11 +1384,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     if(!this.HIDE_CANNED_RESPONSES){
       const elTextArea = this.rowTextArea['el']
       const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
-      if($event && elTextArea){
-        this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  textArea ', textArea)
+      if(elTextArea){
         // console.log("[CONVS-DETAIL] onClickOpenCannedResponses  textArea value", textArea.value)
         var lastChar = textArea.value[textArea.value.length - 1]
-        // console.log('[CONVS-DETAIL] onClickOpenCannedResponses lastChar', lastChar)
+        this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  lastChar  --- textArea ', lastChar, textArea)
         if (lastChar !== '/') {
           this.insertAtCursor(textArea, '/')
         }

package/src/app/services/tiledesk/tiledesk.service.ts

@@ -40,7 +40,7 @@ export class TiledeskService {
     // console.log('CLOUD FUNCT CLOSE SUPPORT GROUP REQUEST BODY ', body);
     // https://tiledesk-server-pre.herokuapp.com/
     // const url = 'https://tiledesk-server-pre.herokuapp.com/' + this.project_id + '/requests/' + group_id + '/close';
-    const url = this.apiUrl + projectid + '/requests/' + supportgroupid + '/close';
+    const url = this.apiUrl + projectid + '/requests/' + supportgroupid + '/close'+'?forceArchive=true';
 
     this.logger.log('[TILEDESK-SERVICE] - closeSupportGroup URL ', url);
     return this.http.put(url, body, httpOptions).pipe(map((res: any) => {

package/src/assets/js/chat21client.js

@@ -1,7 +1,7 @@
 /*
     Chat21Client
 
-    v0.1.11
+    v0.1.12.1
 
     @Author Andrea Sponziello
     (c) Tiledesk 2020
@@ -22,7 +22,7 @@ class Chat21Client {
         this.client = null;
         this.reconnections = 0 // just to check how many reconnections
         this.client_id = this.uuidv4();
-        this.log = options._log ? true : false;
+        this.log = options.log ? true : false;
         if (options && options.MQTTendpoint) {
             if (options.MQTTendpoint.startsWith('/')) {
                 if (this.log) {
@@ -75,7 +75,7 @@ class Chat21Client {
         this.connected = false
     }
 
-    subscribeToMyConversations() { // MESSAGES ETC.
+    subscribeToMyConversations(subscribedCallback) { // MESSAGES ETC.
         // WILDCARS:
         // MQTT: https://www.hivemq.com/blog/mqtt-essentials-part-5-mqtt-topics-best-practices/
         // RABBITMQ: https://www.cloudamqp.com/blog/2015-09-03-part4-rabbitmq-for-beginners-exchanges-routing-keys-bindings.html#topic-exchange
@@ -84,9 +84,13 @@ class Chat21Client {
             console.log("subscribing to:", this.user_id, "topic", this.topic_inbox);
         }
         this.client.subscribe(this.topic_inbox, (err)  => {
+            if (err) {
+                console.error("An error occurred while subscribing user", this.user_id, "on topic:", this.topic_inbox, "Error:", err);
+            }
             if (this.log) {
                 console.log("subscribed to:", this.topic_inbox, " with err", err)
             }
+            subscribedCallback();
         });
     }
 
@@ -127,7 +131,9 @@ class Chat21Client {
         // callback - function (err)
         // console.log("recipient_id:", recipient_id)
         let dest_topic = `apps/${this.appid}/outgoing/users/${this.user_id}/messages/${recipient_id}/outgoing`
-        // console.log("dest_topic:", dest_topic)
+        if (this.log) {
+            console.log("dest_topic:", dest_topic)
+        }
         // let outgoing_message = {
         //     text: text,
         //     type: type,
@@ -529,172 +535,180 @@ class Chat21Client {
         this.onGroupUpdatedCallbacks.delete(handler);
     }
 
-    start() {
+    start(subscribedCallback) {
         if (this.on_message_handler) {
-            console.log("this.on_message_handler already subscribed. Reconnected num", this.reconnections)
+            if (this.log) {
+                console.log("this.on_message_handler already subscribed. Reconnected num", this.reconnections)
+            }
+            callbsubscribedCallbackack();
             return
         }
-        this.subscribeToMyConversations()
-        // no more then one "on_message" handler, thanks.
-        this.on_message_handler = this.client.on('message', (topic, message) => {
-            // console.log("topic:" + topic + "\nmessage payload:" + message)
-            const _topic = this.parseTopic(topic)
-            if (!_topic) {
+        this.subscribeToMyConversations(() => {
+            // no more than one "on_message" handler, thanks.
+            this.on_message_handler = this.client.on('message', (topic, message) => {
                 if (this.log) {
-                    console.log("Invalid message topic:", topic);
+                    console.log("topic:" + topic + "\nmessage payload:" + message)
                 }
-                return;
-            }
-            const conversWith = _topic.conversWith
-            try {
-                const message_json = JSON.parse(message.toString())
-                
+                const _topic = this.parseTopic(topic)
+                if (!_topic) {
+                    if (this.log) {
+                        console.log("Invalid message topic:", topic);
+                    }
+                    return;
+                }
+                const conversWith = _topic.conversWith
+                try {
+                    const message_json = JSON.parse(message.toString())
+                    
 
-                // TEMPORARILY DISABLED, ADDED-CONVERSATIONS ARE OBSERVED BY NEW MESSAGES.
-                // MOVED TO: this.onMessageAddedCallbacks
-                // if (this.onConversationAddedCallbacks) {
-                //     if (topic.includes("/conversations/") && topic.endsWith(_CLIENTADDED)) {
-                //         // map.forEach((value, key, map) =>)
-                //         this.onConversationAddedCallbacks.forEach((callback, handler, map) => {
-                //             callback(message_json, _topic)
-                //         });
-                //     }
-                // }
+                    // TEMPORARILY DISABLED, ADDED-CONVERSATIONS ARE OBSERVED BY NEW MESSAGES.
+                    // MOVED TO: this.onMessageAddedCallbacks
+                    // if (this.onConversationAddedCallbacks) {
+                    //     if (topic.includes("/conversations/") && topic.endsWith(_CLIENTADDED)) {
+                    //         // map.forEach((value, key, map) =>)
+                    //         this.onConversationAddedCallbacks.forEach((callback, handler, map) => {
+                    //             callback(message_json, _topic)
+                    //         });
+                    //     }
+                    // }
 
-                if (this.onConversationUpdatedCallbacks) {
-                    // example topic: apps.tilechat.users.ME.conversations.CONVERS-WITH.clientdeleted
-                    if (topic.includes("/conversations/") && topic.endsWith(_CLIENTUPDATED)) {
-                        if (this.log) {
-                            console.log("conversation updated! /conversations/, topic:", topic)
+                    if (this.onConversationUpdatedCallbacks) {
+                        // example topic: apps.tilechat.users.ME.conversations.CONVERS-WITH.clientdeleted
+                        if (topic.includes("/conversations/") && topic.endsWith(_CLIENTUPDATED)) {
+                            if (this.log) {
+                                console.log("conversation updated! /conversations/, topic:", topic)
+                            }
+                            // map.forEach((value, key, map) =>)
+                            this.onConversationUpdatedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
                         }
-                        // map.forEach((value, key, map) =>)
-                        this.onConversationUpdatedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
                     }
-                }
 
-                if (this.onConversationDeletedCallbacks) {
-                    if (topic.includes("/conversations/") && topic.endsWith(_CLIENTDELETED)) {
-                        // map.forEach((value, key, map) =>)
-                        if (this.log) {
-                            console.log("conversation deleted! /conversations/, topic:", topic, message.toString() );
+                    if (this.onConversationDeletedCallbacks) {
+                        if (topic.includes("/conversations/") && topic.endsWith(_CLIENTDELETED)) {
+                            // map.forEach((value, key, map) =>)
+                            if (this.log) {
+                                console.log("conversation deleted! /conversations/, topic:", topic, message.toString() );
+                            }
+                            this.onConversationDeletedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
                         }
-                        this.onConversationDeletedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
                     }
-                }
 
-                if (this.onArchivedConversationAddedCallbacks) {
-                    if (topic.includes("/archived_conversations/") && topic.endsWith(_CLIENTADDED)) {
-                        // map.forEach((value, key, map) =>)
-                        this.onArchivedConversationAddedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
+                    if (this.onArchivedConversationAddedCallbacks) {
+                        if (topic.includes("/archived_conversations/") && topic.endsWith(_CLIENTADDED)) {
+                            // map.forEach((value, key, map) =>)
+                            this.onArchivedConversationAddedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
+                        }
                     }
-                }
 
-                if (this.onArchivedConversationDeletedCallbacks) {
-                    if (topic.includes("/archived_conversations/") && topic.endsWith(_CLIENTDELETED)) {
-                        // map.forEach((value, key, map) =>)
-                        this.onArchivedConversationDeletedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
+                    if (this.onArchivedConversationDeletedCallbacks) {
+                        if (topic.includes("/archived_conversations/") && topic.endsWith(_CLIENTDELETED)) {
+                            // map.forEach((value, key, map) =>)
+                            this.onArchivedConversationDeletedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
+                        }
                     }
-                }
 
-                // *********************************************************
-                // This snippet is important to get all messages and notify
-                // conversation > added (to create a conversation entry)
-                // *********************************************************
-                // if (this.onMessageAddedCallbacks) {
-                //     console.log("ttttttttt")
-                if (topic.includes("/messages/") && topic.endsWith(_CLIENTADDED)) {
-                    if (this.onMessageAddedCallbacks) {
-                        this.onMessageAddedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
-                    }
-                    // Observing conversations added from messages
-                    // console.log("Observing conversations added from messages", message_json);
-                    // if (this.onConversationAddedCallbacks) {
-                    // console.log("callbacks ok........");
-                    let update_conversation = true;
-                    if (message_json.attributes && message_json.attributes.updateconversation == false) {
-                        update_conversation = false
-                    }
-                    // console.log("update_conversation........", update_conversation);
-                    if (update_conversation && this.onConversationAddedCallbacks) {
-                        this.onConversationAddedCallbacks.forEach((callback, handler, map) => {
-                            message_json.is_new = true;
-                            const message_for_conv_string = JSON.stringify(message_json);
-                            callback(JSON.parse(message_for_conv_string), _topic)
-                        });
+                    // *********************************************************
+                    // This snippet is important to get all messages and notify
+                    // conversation > added (to create a conversation entry)
+                    // *********************************************************
+                    // if (this.onMessageAddedCallbacks) {
+                    //     console.log("ttttttttt")
+                    if (topic.includes("/messages/") && topic.endsWith(_CLIENTADDED)) {
+                        if (this.onMessageAddedCallbacks) {
+                            this.onMessageAddedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
+                        }
+                        // Observing conversations added from messages
+                        // console.log("Observing conversations added from messages", message_json);
+                        // if (this.onConversationAddedCallbacks) {
+                        // console.log("callbacks ok........");
+                        let update_conversation = true;
+                        if (message_json.attributes && message_json.attributes.updateconversation == false) {
+                            update_conversation = false
+                        }
+                        // console.log("update_conversation........", update_conversation);
+                        if (update_conversation && this.onConversationAddedCallbacks) {
+                            this.onConversationAddedCallbacks.forEach((callback, handler, map) => {
+                                message_json.is_new = true;
+                                const message_for_conv_string = JSON.stringify(message_json);
+                                callback(JSON.parse(message_for_conv_string), _topic)
+                            });
+                        }
+                        // }
                     }
                     // }
-                }
-                // }
 
-                if (this.onMessageUpdatedCallbacks) {
-                    if (topic.includes("/messages/") && topic.endsWith(_CLIENTUPDATED)) {
-                        this.onMessageUpdatedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
+                    if (this.onMessageUpdatedCallbacks) {
+                        if (topic.includes("/messages/") && topic.endsWith(_CLIENTUPDATED)) {
+                            this.onMessageUpdatedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
+                        }
                     }
-                }
 
-                if (this.onGroupUpdatedCallbacks) {
-                    if (topic.includes("/groups/") && topic.endsWith(_CLIENTUPDATED)) {
-                        this.onGroupUpdatedCallbacks.forEach((callback, handler, map) => {
-                            callback(JSON.parse(message.toString()), _topic)
-                        });
+                    if (this.onGroupUpdatedCallbacks) {
+                        if (topic.includes("/groups/") && topic.endsWith(_CLIENTUPDATED)) {
+                            this.onGroupUpdatedCallbacks.forEach((callback, handler, map) => {
+                                callback(JSON.parse(message.toString()), _topic)
+                            });
+                        }
                     }
-                }
 
-                // // ******* NEW!!
-                this.callbackHandlers.forEach((value, key, map) => {
-                    const callback_obj = value
-                    // callback_obj = {
-                    //     "type": "onMessageUpdatedForConversation",
-                    //     "conversWith": conversWith,
-                    //     "callback": callback
-                    // }
-                    const type = callback_obj.type
-                    if (topic.includes("/messages/") && topic.endsWith(_CLIENTADDED)) {
-                        if (this.log) { console.log("/messages/_CLIENTADDED") }
-                        if (type === CALLBACK_TYPE_ON_MESSAGE_ADDED_FOR_CONVERSATION) {
-                            if (conversWith === callback_obj.conversWith) {
-                                if (this.log) { console.log("/messages/_CLIENTADDED on: ", conversWith)}
-                                callback_obj.callback(JSON.parse(message.toString()), _topic)
+                    // // ******* NEW!!
+                    this.callbackHandlers.forEach((value, key, map) => {
+                        const callback_obj = value
+                        // callback_obj = {
+                        //     "type": "onMessageUpdatedForConversation",
+                        //     "conversWith": conversWith,
+                        //     "callback": callback
+                        // }
+                        const type = callback_obj.type
+                        if (topic.includes("/messages/") && topic.endsWith(_CLIENTADDED)) {
+                            if (this.log) { console.log("/messages/_CLIENTADDED") }
+                            if (type === CALLBACK_TYPE_ON_MESSAGE_ADDED_FOR_CONVERSATION) {
+                                if (conversWith === callback_obj.conversWith) {
+                                    if (this.log) { console.log("/messages/_CLIENTADDED on: ", conversWith)}
+                                    callback_obj.callback(JSON.parse(message.toString()), _topic)
+                                }
                             }
                         }
-                    }
-                    if (topic.includes("/messages/") && topic.endsWith(_CLIENTUPDATED)) {
-                        if (this.log) {console.log("/messages/_CLIENTUPDATED")}
-                        if (type === CALLBACK_TYPE_ON_MESSAGE_UPDATED_FOR_CONVERSATION) {
-                            if (conversWith === callback_obj.conversWith) {
-                                console.log("/messages/_CLIENTUPDATED on: ", conversWith)
-                                callback_obj.callback(JSON.parse(message.toString()), _topic)
+                        if (topic.includes("/messages/") && topic.endsWith(_CLIENTUPDATED)) {
+                            if (this.log) {console.log("/messages/_CLIENTUPDATED")}
+                            if (type === CALLBACK_TYPE_ON_MESSAGE_UPDATED_FOR_CONVERSATION) {
+                                if (conversWith === callback_obj.conversWith) {
+                                    if (this.log) {console.log("/messages/_CLIENTUPDATED on: ", conversWith);}
+                                    callback_obj.callback(JSON.parse(message.toString()), _topic)
+                                }
                             }
                         }
-                    }
-                })
-                
-                // if (topic.includes("/messages/") && topic.endsWith(_CLIENTUPDATED)) {
-                //     this.onMessageUpdatedInConversationCallbacks.forEach((obj, handler, map) => {
-                //         if (conversWith === obj.conversWith) {
-                //             callback(message_json, _topic)
-                //         }
-                //     });
-                // }
-                
+                    })
+                    
+                    // if (topic.includes("/messages/") && topic.endsWith(_CLIENTUPDATED)) {
+                    //     this.onMessageUpdatedInConversationCallbacks.forEach((obj, handler, map) => {
+                    //         if (conversWith === obj.conversWith) {
+                    //             callback(message_json, _topic)
+                    //         }
+                    //     });
+                    // }
+                    
 
-            }
-            catch (err) {
-                console.error("ERROR:", err)
-            }
+                }
+                catch (err) {
+                    console.error("ERROR:", err)
+                }
+            })
+            subscribedCallback();
         })
+        
         // console.log("HANDLER_:", this.on_message_handler)
     }
 
@@ -763,14 +777,23 @@ class Chat21Client {
     }
 
     conversationDetail(conversWith, callback) {
+        if (this.log) {
+            console.log("conversationDetail(). searching on user:", this.user_id, " - conversWith:", conversWith)
+        }
         this.crossConversationDetail(conversWith, false, callback);
     }
 
     archivedConversationDetail(conversWith, callback) {
+        if (this.log) {
+            console.log("archivedConversationDetail(). searching on user:", this.user_id, " - conversWith:", conversWith)
+        }
         this.crossConversationDetail(conversWith, true, callback);
     }
 
     crossConversationDetail(conversWith, archived, callback) {
+        if (this.log) {
+            console.log("searching on user:", this.user_id, " - conv of conversWith:", conversWith, " - archived:", archived)
+        }
         let path = "conversations";
         if (archived) {
             path = "archived_conversations"
@@ -778,8 +801,10 @@ class Chat21Client {
         // ex.: http://localhost:8004/tilechat/04-ANDREASPONZIELLO/conversations/CONVERS_WITH
         //const URL = `${this.APIendpoint}/${this.appid}/${this.user_id}/conversations/${conversWith}`
         const URL = `${this.APIendpoint}/${this.appid}/${this.user_id}/${path}/${conversWith}`
-        console.log("getting conversation detail:", URL)
-        console.log("conversWith:", conversWith)
+        if (this.log) {
+            console.log("getting conversation detail:", URL);
+            console.log("conversWith:", conversWith);
+        }
         
         let options = {
             url: URL,
@@ -790,7 +815,9 @@ class Chat21Client {
             method: 'GET'
         }
         Chat21Client.myrequest(options, (err, response, json) => {
-            console.log("JSON...", json)
+            if (this.log) {
+                console.log("JSON...", json);
+            }
             if (json && json.result && Array.isArray(json.result) && json.result.length ==1) {
                 callback(null, json.result[0]);
             }
@@ -964,12 +991,13 @@ class Chat21Client {
         
         this.client.on('connect', // TODO if token is wrong it must reply with an error!
             () => {
-                if (this.log) {console.log("chat client connected...")}
+                if (this.log) {console.log("Chat client connected. User:" + user_id)}
                 if (!this.connected) {
-                    if (this.log) {console.log("Chat client first connection.")}
+                    if (this.log) {console.log("Chat client first connection for:" + user_id)}
                     this.connected = true
-                    this.start()
-                    callback()
+                    this.start( () => {
+                        callback();
+                    });
                 }
             }
         );
@@ -1030,8 +1058,8 @@ class Chat21Client {
 }
 
 function isBrowser() {
-    return true;
-    //return false;
+    // return true;
+    return false;
 }
 
 export { Chat21Client }; // Browser

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

@@ -74,6 +74,7 @@ export const TOUCHING_OPERATOR = "TOUCHING_OPERATOR";
 // export const URL_SOUND = 'assets/sounds/pling.mp3';
 export const URL_SOUND_LIST_CONVERSATION = '/assets/sounds/pling.mp3';
 export const URL_SOUND_CONVERSATION_ADDED = '/assets/sounds/wheep-wheep.mp3';
+export const URL_SOUND_CONVERSATION_UNASSIGNED = '/assets/sounds/interface-start.mp3'
 // export const CHAT_SEND_BY_EMAIL_LINK =
 // 'mailto:?subject=Transcript Chat Conversation&body=Salve,%0D%0A%0D%0Adi
 // seguito potrà scaricare il transcript della conversazione intercorsa con il nostro servizio di

package/src/global.scss

@@ -422,6 +422,11 @@ select:-webkit-autofill:focus {
 .canned-list {
     .native-input[disabled] {
         opacity: 10 !important;
+        cursor: pointer;
+    }
+    .native-textarea[disabled] {
+        opacity: 10 !important;
+        cursor: pointer;
     }
 }