@chat21/chat21-web-widget 5.0.81 → 5.0.82-rc.2

package/package.json

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

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

@@ -18,6 +18,7 @@
         [hideRestartConversationOptionsMenu]="((!g?.singleConversation && !hideTextAreaContent) || g?.hideRestartConversationOptionsMenu)"
         [hideHeaderConversationOptionsMenu]="g?.hideHeaderConversationOptionsMenu"
         [hideSignOutOptionMenu]="(!g?.singleConversation || !g?.showLogoutOption)"
+        [hideChatDetailOptionMenu]="(!g?.isDevMode)"
         [stylesMap]="stylesMap"
         [translationMap]="translationMapHeader"
         [widgetTitle]="g?.project?.widgetTitle"
@@ -29,11 +30,7 @@
         [typingLocation]="g?.typingLocation"
         (onBack)="onBackHomeFN()"
         (onCloseWidget)="onCloseWidgetFN()"
-        (onSoundChange)="onSoundChangeFN($event)"
-        (onCloseChat)="onCloseChat($event)"
-        (onRestartChat)="onRestartChat($event)"
-        (onWidgetHeightChange)="onWidgetHeightChange($event)"
-        (onSignOut)="onSignOutFN($event)"
+        (onMenuOptionClick)="onMenuOptionClick($event)"
         (onMenuOptionShow)="onMenuOption($event)">
     </chat-conversation-header>
 

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

@@ -14,7 +14,7 @@ import { ConversationModel } from 'src/chat21-core/models/conversation';
 
 // utils
 import { v4 as uuidv4 } from 'uuid';
-import { UID_SUPPORT_GROUP_MESSAGES } from 'src/app/utils/constants';
+import { HEADER_MENU_OPTION, UID_SUPPORT_GROUP_MESSAGES } from 'src/app/utils/constants';
 import { CHANNEL_TYPE, INFO_MESSAGE_TYPE, TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
 import { getDateDifference } from 'src/chat21-core/utils/utils';
 import { isJustRecived, isUserBanned } from 'src/chat21-core/utils/utils-message';
@@ -219,7 +219,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'MINIMIZE',
       'CLOSE_CHAT',
       'RESTART',
-      'LOGOUT'
+      'LOGOUT',
+      'OPEN_DETAIL'
     ];
 
     const keysFooter = [
@@ -976,7 +977,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.onSoundChange.emit(soundEnabled)
   }
   /** CALLED BY: conv-header component */
-  onCloseChat(event){
+  onCloseChat(){
     this.logger.debug('[CONV-COMP] close chat with uid ', this.conversation.uid)
     this.tiledeskRequestService.closeSupportGroup(this.conversation.uid).then(data => {
       if(data === 'closed'){
@@ -988,7 +989,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     })
   }
   /** CALLED BY: conv-header component */
-  onRestartChat(event){
+  onRestartChat(){
     this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
@@ -1005,6 +1006,42 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   onSignOutFN(event){
     this.onSignOut.emit(true)
   }
+
+  /** CALLED BY: conv-header conv-content component */
+  onMenuOptionClick(event){
+    switch(event){
+      case HEADER_MENU_OPTION.LOGOUT:
+        this.onSignOut.emit(true)
+        break;
+      case HEADER_MENU_OPTION.VOLUME_ON:{
+        let soundEnabled = true
+        this.onSoundChange.emit(soundEnabled)
+        break;
+      }
+      case HEADER_MENU_OPTION.VOLUME_OFF:{
+        let soundEnabled = false
+        this.onSoundChange.emit(soundEnabled)
+        break;
+      }
+      case HEADER_MENU_OPTION.TRANSCRIPT:
+        break;
+      case HEADER_MENU_OPTION.CLOSE:
+        this.onCloseChat()
+        break;
+      case HEADER_MENU_OPTION.DETAIL:
+        //TODO
+        break;
+      case HEADER_MENU_OPTION.RESTART:
+        this.onRestartChat()
+        break;
+      case HEADER_MENU_OPTION.MAXIMIZE:
+        this.onWidgetHeightChange('max')
+        break;
+      case HEADER_MENU_OPTION.MINIMIZE:
+        this.onWidgetHeightChange('min')
+        break;
+    }
+  }
   /** CALLED BY: conv-header conv-content component */
   onMenuOption(event:boolean){
     this.isMenuShow = event;

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

@@ -92,6 +92,20 @@
         <span class="label-menu-item">{{ translationMap?.get('CLOSE_CHAT') }}</span>
     </div>
 
+    <!-- ICON OPEN CHAT DETAIL -->
+    <!-- <div class="c21-header-button c21-right" *ngIf="!hideChatDetailOptionMenu"(click)="openDetail()">
+        <svg role="img" id="archive" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg"  
+            width="20px" height="20px" viewBox="0 0 18.17 18.12">
+            <path d="M13.1,15.54H2.03c-.92,0-1.66-.74-1.66-1.66V2.81c0-.92.74-1.66,1.66-1.66h6.09v1.11H2.03c-.31,0-.55.25-.55.55v11.07c0,.3.25.55.55.55h11.07c.31,0,.55-.25.55-.55v-6.09h1.11v6.09c0,.92-.74,1.66-1.66,1.66"/>
+            <rect stroke-width="0" x="9.55" y="0" width="6.13" height="1.75"/>
+            <rect stroke-width="0" x="11.82" y="2.19" width="6.13" height="1.75" transform="translate(11.82 17.94) rotate(-90)"/>
+            <rect stroke-width="0" x="4.69" y="4.06" width="11.52" height="1.75" transform="translate(-.43 8.83) rotate(-45)"/>
+            <title id="altIconTitle">{{ translationMap?.get('OPEN_DETAIL') }}</title>
+        </svg>
+        <span class="label-menu-item">{{ translationMap?.get('OPEN_DETAIL') }}</span>
+    </div> -->
+
+
     <!-- ICON RESTART CONVERSATION -->
     <div class="c21-header-button c21-right"  *ngIf="!hideRestartConversationOptionsMenu" (click)="restartChat()">
         <svg role="img" id="refresh" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg" 

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

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { Globals } from 'src/app//utils/globals';
 import { AppConfigService } from 'src/app/providers/app-config.service';
+import { HEADER_MENU_OPTION } from 'src/app/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
@@ -27,6 +28,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() hideHeaderBackButton: boolean;
   @Input() hideHeaderConversationOptionsMenu: boolean;
   @Input() hideSignOutOptionMenu: boolean;
+  @Input() hideChatDetailOptionMenu: boolean;
   @Input() windowContext;
   @Input() stylesMap: Map<string, string>
   @Input() translationMap: Map< string, string>;
@@ -34,11 +36,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() build_version: string;
   @Output() onBack = new EventEmitter();
   @Output() onCloseWidget = new EventEmitter();
-  @Output() onSoundChange = new EventEmitter();
-  @Output() onCloseChat =  new EventEmitter();
-  @Output() onRestartChat =  new EventEmitter();
-  @Output() onWidgetHeightChange = new EventEmitter<string>();
-  @Output() onSignOut = new EventEmitter();
+  @Output() onMenuOptionClick = new EventEmitter();
   @Output() onMenuOptionShow = new EventEmitter();
   // ========= end:: Input/Output values
 
@@ -63,12 +61,11 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     public g: Globals,
     public appConfigService: AppConfigService,) {
       this.API_URL = this.appConfigService.getConfig().apiUrl;
-     }
+  }
 
   ngOnInit() {
     this.logger.debug('[CONV-HEADER] ngOnInit: conversation-header COMPONENT ', this.translationMap);
     this.membersConversation.push(this.senderId)
-    //this.initializeTyping();
   }
 
   ngOnChanges(changes: SimpleChanges){
@@ -88,17 +85,38 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     this.onBack.emit();
   }
 
-  closeChat(){
-    this.onCloseChat.emit();
+  closeWidget() {
+    this.onCloseWidget.emit();
   }
 
+
+  closeChat(){
+    this.onMenuOptionClick.emit(HEADER_MENU_OPTION.CLOSE)
+  }
   restartChat(){
-    this.onRestartChat.emit();
+    this.onMenuOptionClick.emit(HEADER_MENU_OPTION.RESTART)
     this.onMenuOptionShow.emit(false)
   }
-
-  closeWidget() {
-    this.onCloseWidget.emit();
+  openDetail(){
+    this.onMenuOptionClick.emit(HEADER_MENU_OPTION.DETAIL)
+  }
+  signOut(){
+    this.onMenuOptionClick.emit(HEADER_MENU_OPTION.LOGOUT)
+  }
+  /**
+   * @param status : string 'max' || 'min'
+   */
+  maximizeMinimize(status){
+    this.heightStatus = status
+    if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
+    if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
+    this.onMenuOptionShow.emit(false)
+  }
+  toggleSound() {
+    this.soundEnabled = !this.soundEnabled
+    if(this.soundEnabled) this.onMenuOptionClick.emit(HEADER_MENU_OPTION.VOLUME_ON)
+    if(!this.soundEnabled) this.onMenuOptionClick.emit(HEADER_MENU_OPTION.VOLUME_OFF)
+    this.onMenuOptionShow.emit(false)
   }
   // =========== END: event emitter function ====== //
 
@@ -108,28 +126,11 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     windowContext.open(url, '_blank');
     this.onMenuOptionShow.emit(false)
   }
-  
-  toggleSound() {
-    this.onMenuOptionShow.emit(false)
-    this.onSoundChange.emit(!this.soundEnabled)
-  }
-
-  signOut(){
-    this.onSignOut.emit(true)
-  }
 
   toggleMenu() {
     this.onMenuOptionShow.emit(!this.isMenuShow)
   }
 
-  /**
-   * 
-   * @param status : string 'max' || 'min'
-   */
-  maximizeMinimize(status){
-    this.heightStatus = status
-    this.onWidgetHeightChange.emit(status)
-  }
 
 
 

package/src/app/providers/global-settings.service.ts

@@ -1779,6 +1779,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.hiddenMessage = TEMP;
         }
+
+        TEMP = getParameterByName(windowContext, 'td_draft');
+        if (TEMP) {
+            globals.isDevMode = stringToBoolean(TEMP);
+        }
         
     }
 

package/src/app/utils/constants.ts

@@ -64,3 +64,15 @@ export const IMG_PROFILE_DEFAULT = '/assets/images/avatar_male_tiledesk.svg';
 // start conversation bot (proxy)
 export const PROXY_MSG_START = '__start';
 
+export const HEADER_MENU_OPTION = {
+    LOGOUT      :   'logout',
+    VOLUME_ON   :   'volume_on',
+    VOLUME_OFF  :   'volume_off',
+    TRANSCRIPT  :   'transcript',
+    CLOSE       :   'close',
+    DETAIL      :   'detail',
+    RESTART     :   'restart',
+    MAXIMIZE    :   'maximize',
+    MINIMIZE    :   'minimize'
+}
+

package/src/app/utils/globals.ts

@@ -215,6 +215,7 @@ export class Globals {
   displayOnDesktop: boolean; // *******  new ********
 
   hiddenMessage: string; // *******  new ********
+  isDevMode: boolean; // *******  new ********
   constructor(
   ) { }
 
@@ -465,6 +466,8 @@ export class Globals {
 
     this.newConversationStart = true;
 
+    this.isDevMode = false;
+
   }
 
 

package/src/launch.js

@@ -7,36 +7,44 @@ ready(function() {
     initWidget();
 });
 
+
 /** */
 function ready(callbackFunction){
-    // if(document.readyState != 'loading'){
-    //   console.log('in ifffffff', document.readyState)
-    //   callbackFunction()
-    // }
-    // else{
-    //   document.addEventListener("DOMContentLoaded", callbackFunction)
-    // }
-    document.addEventListener('scroll', start);
-    document.addEventListener('mousedown', start);
-    document.addEventListener('mousemove', start);
-    document.addEventListener('touchstart', start);
-    document.addEventListener('keydown', start);
-
-    function start(){
-      if(document.readyState==='complete'){
-        callbackFunction()
-      }else if(window.attachEvent){
-        window.attachEvent('onload',callbackFunction);
-      }else{
-        window.addEventListener('load',callbackFunction,false);
-      }
-      
-      document.removeEventListener('scroll', start);
-      document.removeEventListener('mousedown', start);
-      document.removeEventListener('mousemove', start);
-      document.removeEventListener('touchstart', start);
-      document.removeEventListener('keydown', start);
+  // if(document.readyState != 'loading'){
+  //   console.log('in ifffffff', document.readyState)
+  //   callbackFunction()
+  // }
+  // else{
+  //   document.addEventListener("DOMContentLoaded", callbackFunction)
+  // }
+  document.addEventListener('scroll', start);
+  document.addEventListener('mousedown', start);
+  document.addEventListener('mousemove', start);
+  document.addEventListener('touchstart', start);
+  document.addEventListener('keydown', start);
+
+  let time = 5000;
+  let timeout = setTimeout(()=> {
+    console.log('in timeout')
+    start();
+  }, time)
+  
+  function start(){
+    clearTimeout(timeout);
+    if(document.readyState==='complete'){
+      callbackFunction()
+    }else if(window.attachEvent){
+      window.attachEvent('onload',callbackFunction);
+    }else{
+      window.addEventListener('load',callbackFunction,false);
     }
+    
+    document.removeEventListener('scroll', start);
+    document.removeEventListener('mousedown', start);
+    document.removeEventListener('mousemove', start);
+    document.removeEventListener('touchstart', start);
+    document.removeEventListener('keydown', start);
+  }
 
     
 }

package/src/launch_template.js

@@ -7,37 +7,44 @@ ready(function() {
     initWidget();
 });
 
+
 /** */
 function ready(callbackFunction){
-    // if(document.readyState != 'loading'){
-    //   console.log('in ifffffff', document.readyState)
-    //   callbackFunction()
-    // }
-    // else{
-    //   document.addEventListener("DOMContentLoaded", callbackFunction)
-    // }
-    document.addEventListener('scroll', start);
-    document.addEventListener('mousedown', start);
-    document.addEventListener('mousemove', start);
-    document.addEventListener('touchstart', start);
-    document.addEventListener('keydown', start);
-
-    function start(){
-      if(document.readyState==='complete'){
-        callbackFunction()
-      }else if(window.attachEvent){
-        window.attachEvent('onload',callbackFunction);
-      }else{
-        window.addEventListener('load',callbackFunction,false);
-      }
-      
-      document.removeEventListener('scroll', start);
-      document.removeEventListener('mousedown', start);
-      document.removeEventListener('mousemove', start);
-      document.removeEventListener('touchstart', start);
-      document.removeEventListener('scroll', start);
-      document.removeEventListener('keydown', start);
+  // if(document.readyState != 'loading'){
+  //   console.log('in ifffffff', document.readyState)
+  //   callbackFunction()
+  // }
+  // else{
+  //   document.addEventListener("DOMContentLoaded", callbackFunction)
+  // }
+  document.addEventListener('scroll', start);
+  document.addEventListener('mousedown', start);
+  document.addEventListener('mousemove', start);
+  document.addEventListener('touchstart', start);
+  document.addEventListener('keydown', start);
+
+  let time = 5000;
+  let timeout = setTimeout(()=> {
+    console.log('in timeout')
+    start();
+  }, time)
+
+  function start(){
+    if(document.readyState==='complete'){
+      callbackFunction()
+    }else if(window.attachEvent){
+      window.attachEvent('onload',callbackFunction);
+    }else{
+      window.addEventListener('load',callbackFunction,false);
     }
+    
+    document.removeEventListener('scroll', start);
+    document.removeEventListener('mousedown', start);
+    document.removeEventListener('mousemove', start);
+    document.removeEventListener('touchstart', start);
+    document.removeEventListener('scroll', start);
+    document.removeEventListener('keydown', start);
+  }
 
     
 }