@chat21/chat21-ionic 3.4.27-rc7 → 3.4.27

package/CHANGELOG.md

@@ -8,31 +8,8 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-
-# 3.4.27-rc7
-- **bug-fixed**: Scrolling to the last message when opening a conversation
-- **bug-fixed**: Loading in the conversation list disabled when removing the last conversation
-
-# 3.4.27-rc6
-- **bug-fixed**: user for dashboard app is incorrect
-
-# 3.4.27-rc5
-- **added**: managed roles in sidebar e navbar
-- **bug-fixed**: projectId and supportMode url is not saved in localstorage
-
-# 3.4.27-rc4
-- **bug-fixed**: extractUrls function is not able to detect url start with www or without https/http
-- **bug-fixed**: if message is sent with keydown, error on domain check is not showed
-
-# 3.4.27-rc3
-- **bug-fixed**: cannot set user availability if supportMode is enabled and tiledesk_projectID url params is set
-
-# 3.4.27-rc2
-- **bug-fixed**: cannede responses role
-
-# 3.4.27-rc1
-- **added**: managed canned responses with roles
-- **changed**: name in info mesage 
+# 3.4.27 in PROD
+- **bug-fixed**: cannot find route if userFullname contains /
 
 # 3.4.26 in PROD
 
@@ -42,7 +19,6 @@
 # 3.4.26-rc1
 - **added**: tiledesk_projectID query param to manage user status
 - **added**: token to managane ticket feature
-- **added**: getOsCode login into utils.ts
 
 # 3.4.25 in PROD
 - **changed**: pipe marked to support malicious text input
@@ -65,24 +41,6 @@
 # 3.4.22 in PROD
 - **added**: managed allowed_upload_extentions from project settings
 
-# 3.4.21-rc6
-- **added**: managed allowed_upload_extentions from project settings
-
-# 3.4.21-rc5
-- **added**: setConversation as read when agent click on it
-
-# 3.4.21-rc4
-- **added**: ability to init and decrement new conversation count badge
-
-# 3.4.21-rc3
-- **changed**: badge notification for agentDesktop
-
-# 3.4.21-rc2
-- **added**: count in newConversation handler event
-
-# 3.4.21-rc1
-- **added**:  implement badge notification for agentDesktop sw when new conversation is assigned to logged agent
-
 # 3.4.21 in PROD
 
 # 3.4.20 in PROD
@@ -96,8 +54,8 @@
 - **bug-fixed**: minor fix on ion-texarea element with allowed url domain
 
 # 3.4.19-rc1
-- **added**: ability to check for if emoji is allowd to be sent in message textarea
-- **added**: ability to check for if url domain  is allowd to be sent in message textarea
+- added: ability to check for if emoji is allowd to be sent in message textarea
+- added: ability to check for if url domain  is allowd to be sent in message textarea
 
 # 3.4.18 in PROD
 

package/package.json

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

package/src/app/app.component.ts

@@ -44,8 +44,6 @@ import { conversationToMessage } from 'src/chat21-core/utils/utils-message';
 import { ProjectService } from './services/projects/project.service';
 import { ContactsService } from './services/contacts/contacts.service';
 import { TiledeskService } from './services/tiledesk/tiledesk.service';
-import { Project } from 'src/chat21-core/models/projects';
-import { ProjectUsersService } from './services/project_users/project-users.service';
 
 @Component({
   selector: 'app-root',
@@ -144,7 +142,6 @@ export class AppComponent implements OnInit {
     /**TILEDESK SERVICES */
     private tiledeskService: TiledeskService,
     private projectService: ProjectService,
-    private projectUsersService: ProjectUsersService,
     private contactsService: ContactsService
   ) {
 
@@ -171,7 +168,6 @@ export class AppComponent implements OnInit {
     }, { capture: true });
   }
 
-
   listenChatAlreadyOpenWithoutParamsInMobileMode() {
     this.events.subscribe('noparams:mobile', (isAlreadyOpenInMobileMode) => {
       // console.log('[APP-COMP] Chat is Already Open In Mobile Mode ', isAlreadyOpenInMobileMode)
@@ -300,7 +296,6 @@ export class AppComponent implements OnInit {
         this.zone = new NgZone({}); // a cosa serve?
 
         this.SUPPORT_MODE = this.g.supportMode
-        this.logger.info('[APP-COMP] this.SUPPORT_MODE', this.SUPPORT_MODE)
       }
 
     });
@@ -337,7 +332,7 @@ export class AppComponent implements OnInit {
 
   listenToPostMsgs() {
     window.addEventListener("message", (event) => {
-      // this.logger.log("[APP-COMP] message event ", event);
+      this.logger.log("[APP-COMP] message event ", event);
 
       if (event && event.data && event.data.action && event.data.parameter) {
         if (event.data.action === 'openJoinConversationModal') {
@@ -869,8 +864,7 @@ export class AppComponent implements OnInit {
       // console.log('[APP-COMP] PLATFORM', PLATFORM_MOBILE, 'route.snapshot', this.route.snapshot);
       if (!IDConv) {
         this.logger.log('[APP-COMP]  navigateByUrl -- conversations-list');
-        const queryString = window.location.search; // restituisce ad es. "?jwt=...&tiledesk_supportMode=false"
-        this.router.navigateByUrl('conversations-list' + queryString);
+        this.router.navigateByUrl('conversations-list')
       }
       // this.router.navigateByUrl(pageUrl);
       // this.navService.setRoot(ConversationListPage, {});
@@ -892,7 +886,7 @@ export class AppComponent implements OnInit {
 
       let pageUrl = 'conversation-detail/'
       if (IDConv && FullNameConv) {
-        pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
+        pageUrl += IDConv + '/' + encodeURIComponent(FullNameConv) + '/' + Convtype
       }
 
       const queryParams = this.route.snapshot.queryParams;
@@ -900,7 +894,7 @@ export class AppComponent implements OnInit {
       pageUrl += queryString ? `?${queryString}` : '';
 
       // 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" ));
+      this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29'));
 
 
       // const DASHBOARD_URL = this.appConfigProvider.getConfig().DASHBOARD_URL;
@@ -1121,7 +1115,6 @@ export class AppComponent implements OnInit {
       if (conversation && conversation.is_new === true && this.isInitialized) {
         this.manageTabNotification('conv_added', conversation.sound)
         this.manageEventNewConversation(conversation)
-        this.setNotification();
       }
       if(conversation) this.updateConversationsOnStorage()
     });
@@ -1176,7 +1169,7 @@ export class AppComponent implements OnInit {
     // if (supportmode === true) {
     //   this.connetWebsocket() // moved in the comp project-item
     // }
-    this.events.publish('go:online', true);
+    
     const currentUser = this.tiledeskAuthService.getCurrentUser();
     this.setLanguage(currentUser);
     // this.logger.printDebug('APP-COMP - goOnLine****', currentUser);
@@ -1186,18 +1179,17 @@ export class AppComponent implements OnInit {
 
     this.tiledeskService.initialize(serverBaseURL)
     this.projectService.initialize(serverBaseURL)
-    this.projectUsersService.initialize(serverBaseURL)
     this.contactsService.initialize(serverBaseURL)
-    // this.chatManager.startApp();
 
 
-    //INIT WEBSOCKET
-    this.connetWebsocket(tiledeskToken)
+    this.events.publish('go:online', true);
+    // this.chatManager.startApp();
 
     // ----------------------------------------------
     // PUSH NOTIFICATIONS
     // ----------------------------------------------
     const pushEngine = this.appConfigProvider.getConfig().pushEngine
+
     if (currentUser) {
       if (pushEngine && pushEngine !== 'none') {
         this.notificationsService.getNotificationPermissionAndSaveToken(currentUser.uid);
@@ -1219,24 +1211,6 @@ export class AppComponent implements OnInit {
     } catch (err) {
       this.logger.error('[APP-COMP] -> error:', err);
     }
-
-    // ----------------------------------------------
-    // LAST PROJECT FROM URL
-    // ----------------------------------------------
-    if(this.g.projectID){
-      this.projectService.getProjects().subscribe({ next: (projects: Project[]) => {
-        const project = projects.find(prjct => prjct.id_project._id === this.g.projectID)
-        if(project){
-          this.logger.log('[APP-COMP] - GET PROJECT - project found with this.projectID', project);
-          localStorage.setItem('last_project', JSON.stringify(project)) 
-          this.events.publish('storage:last_project', project)
-        }
-      }, error: (error) => {
-        this.logger.log('[APP-COMP] - GET PROJECT - project NOT found with this.projectID', this.g.projectID, error);
-      }, complete: () => {
-
-      }});
-    }
   }
 
 
@@ -1282,21 +1256,6 @@ export class AppComponent implements OnInit {
     myWindow.focus();
   }
 
-  connetWebsocket(tiledeskToken) {
-
-    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] tiledeskToken ', tiledeskToken)
-    const appconfig = this.appConfigProvider.getConfig();
-    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] wsUrl ', appconfig.wsUrl)
-    const WS_URL = appconfig.wsUrl + '?token=' + tiledeskToken
-    this.logger.log('[WEBSOCKET-JS] connetWebsocket called in [PROJECT-ITEM] wsUrl ', WS_URL)
-    this.webSocketJs.init(
-      WS_URL,
-      undefined,
-      undefined,
-      undefined
-    );
-  }
-
 
   webSocketClose() {
     this.logger.log('[APP-COMP] - GO-OFFLINE - webSocketClose');
@@ -1345,7 +1304,7 @@ export class AppComponent implements OnInit {
   subscribeChangedConversationSelected = (user: UserModel, type: string) => {
     this.logger.log('[APP-COMP] subscribeUidConvSelectedChanged navigateByUrl', user, type);
     // this.router.navigateByUrl('conversation-detail/' + user.uid + '?conversationWithFullname=' + user.fullname);
-    this.router.navigateByUrl('conversation-detail/' + user.uid + '/' + user.fullname + '/' + type);
+    this.router.navigateByUrl('conversation-detail/' + user.uid + '/' + encodeURIComponent(user.fullname) + '/' + type);
   }
 
   subscribeProfileInfoButtonLogOut = (hasClickedLogout) => {
@@ -1393,10 +1352,7 @@ export class AppComponent implements OnInit {
 
   subscribeConversationSelected= (conversation: ConversationModel) => {
     if(conversation && conversation.is_new){
-      this.audio_NewConv.pause();
-      this.conversationsHandlerService.setConversationRead(conversation.uid)
-      //UPDATE NOTIFICATION FOR NEW CONVERSATION COUNT 
-      this.setNotification();
+      this.audio_NewConv.pause()
     }
   }
 
@@ -1472,9 +1428,6 @@ export class AppComponent implements OnInit {
         this.logger.debug('[APP-COMP]-CONVS - INIT CONV CONVS 2', conversations)
         this.events.publish('appcompSubscribeToConvs:loadingIsActive', false);
       }
-
-      //INIT NOTIFICATION FOR NEW CONVERSATION COUNT 
-      this.setNotification();
     });
 
   }
@@ -1523,10 +1476,10 @@ export class AppComponent implements OnInit {
             let Convtype = 'active'
             
             if (IDConv && FullNameConv) {
-              pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
+              pageUrl += IDConv + '/' + encodeURIComponent(FullNameConv) + '/' + Convtype
             }
             // 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" ));
+            this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29'));
           } else {
             console.log("FCM: Received in foreground", JSON.stringify(data));
             // let IDConv = data.recipient
@@ -1537,7 +1490,7 @@ export class AppComponent implements OnInit {
             //   pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
             // }
             // // 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" ));
+            // this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29'));
           };
         });
     }
@@ -1691,14 +1644,6 @@ export class AppComponent implements OnInit {
     this.triggerEvents.triggerOnNewConversationInit(conversation)
   }
 
-  private setNotification() {
-    this.logger.log('[APP-COMP] setNotification for NEW CONVERSATION');
-    if(window['AGENTDESKTOP']){
-      this.logger.log('[APP-COMP] manageNotification AGENTDESKTOP exist', window['AGENTDESKTOP']);
-      window['AGENTDESKTOP']['TAB'].Badge(this.conversationsHandlerService.countIsNew().toString())
-    }
-  }
-
 
   @HostListener('document:visibilitychange', [])
   visibilitychange() {

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

@@ -205,13 +205,13 @@
 //                             overflow-x: hidden;
 //                         }
 //                         .c21-ico-schedule {
-//                             background-image: url("src/assets/images/f21ico-schedule.svg");
+//                             background-image: url("src/assets/img/f21ico-schedule.svg");
 //                         }
 //                         .c21-ico-done {
-//                             background-image: url("src/assets/images/f21ico-done.svg");
+//                             background-image: url("src/assets/img/f21ico-done.svg");
 //                         }
 //                         .c21-ico-done_all {
-//                             background-image: url("src/assets/images/f21ico-done_all.svg");
+//                             background-image: url("src/assets/img/f21ico-done_all.svg");
 //                         }
 //                     }
                     

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

@@ -58,7 +58,7 @@ export class ConversationContentComponent implements OnInit {
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
   // ========== end:: check message type functions ======= //
 
-  urlBOTImage = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/images/avatar_bot_tiledesk.svg'
+  urlBOTImage = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/img/avatar_bot_tiledesk.svg'
   uploadProgress: number;
   showUploadProgress: boolean = false;
   fileType: string;

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

@@ -184,7 +184,7 @@
       <ng-container *ngIf="isCopilotEnabled">
         <ion-button shape="round" size="small" class="btn-info-msg btn-copilot" ion-button fill="clear"
           (click)="onClickOptionsCopilot(message, i)">
-          <ion-icon id="copilot" src="assets/images/icons/copilot.svg"></ion-icon>
+          <ion-icon id="copilot" src="assets/img/icons/copilot.svg"></ion-icon>
         </ion-button>
       </ng-container>
 

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

@@ -1,6 +1,6 @@
 <div class="c21-icon-avatar">
   <div class="c21-avatar-image profile_image">
-    <!-- <img src="getUrlImgProfile(message.sender) {{getUrlImgProfile(message.sender)}}" onError="this.src = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v2/assets/images/line_avatar_male_tiledesk.svg'" /> -->
+    <!-- <img src="getUrlImgProfile(message.sender) {{getUrlImgProfile(message.sender)}}" onError="this.src = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v2/assets/img/line_avatar_male_tiledesk.svg'" /> -->
     <!-- <img [src]="url" (error)="onBotImgError($event)" /> -->
     <img *ngIf="senderID?.indexOf('bot_') !== -1 || senderFullname === 'Bot'" [src]="url" (error)="onBotImgError($event)" (load)="onLoadedBot($event)"/>
     <!-- is a HUMAN -->

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

@@ -17,18 +17,18 @@ export class AvatarComponent implements OnInit {
     if(this.senderID){
       this.url = this.imageRepoService.getImagePhotoUrl(this.senderID)  
       if(!this.url && (this.senderID.indexOf('bot_') !== -1 || this.senderFullname === 'Bot')){
-        this.url =  this.baseLocation +'/assets/images/avatar_bot_tiledesk.svg'
+        this.url =  this.baseLocation +'/assets/img/avatar_bot_tiledesk.svg'
       }else if(!this.url && this.senderID.indexOf('bot_') == -1){
-        this.url =  this.baseLocation +'/assets/images/light_avatar_placeholder.svg'
+        this.url =  this.baseLocation +'/assets/img/light_avatar_placeholder.svg'
       }
     }
   }
 
   onBotImgError(event){
-    event.target.src = this.baseLocation +'/assets/images/avatar_bot_tiledesk.svg'
+    event.target.src = this.baseLocation +'/assets/img/avatar_bot_tiledesk.svg'
   }
   onHumanImgError(event) {
-    event.target.src = this.baseLocation + "/assets/images/light_avatar_placeholder.svg"
+    event.target.src = this.baseLocation + "/assets/img/light_avatar_placeholder.svg"
   }
 
   onLoadedBot(event){

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

@@ -16,12 +16,12 @@
     }
 
     .c21-ico-schedule {
-        background-image: url("/src/assets/images/f21ico-schedule.svg");
+        background-image: url("/src/assets/img/f21ico-schedule.svg");
     }
     .c21-ico-done {
-        background-image: url("/src/assets/images/f21ico-done.svg");
+        background-image: url("/src/assets/img/f21ico-done.svg");
     }
     .c21-ico-done_all {
-        background-image: url("/src/assets/images/f21ico-done_all.svg");
+        background-image: url("/src/assets/img/f21ico-done_all.svg");
     }
 }

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

@@ -96,23 +96,23 @@
       <div class="conversation_project truncate">
         <!-- DIRECT CONV -->
         <div *ngIf="conversation.channel_type === CHANNEL_TYPE.DIRECT">
-          <img class="channel-icon" src="assets/images/channel_icons/direct.svg">
+          <img class="channel-icon" src="assets/img/channel_icons/direct.svg">
           <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
         </div>
         <!-- GROUP CONV -->
         <div *ngIf="conversation.uid.startsWith(CHANNEL_TYPE.GROUP)">
-          <img class="channel-icon" src="assets/images/channel_icons/group.svg">
+          <img class="channel-icon" src="assets/img/channel_icons/group.svg">
           <span class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
         </div>
         <!-- SUPPORT-GROUP CONV -->
         <div  *ngIf="conversation.uid.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
-          <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="conversation?.attributes && ( (conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.CHAT21) ||  !conversation?.attributes?.request_channel) " >
-          <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.EMAIL" >
-          <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.FORM" >
-          <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.MESSENGER" >
-          <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.WHATSAPP" >
-          <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.TELEGRAM" >
-          <img class="channel-icon" src="assets/images/channel_icons/voice.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
+          <img class="channel-icon" src="assets/img/channel_icons/chat21.svg" *ngIf="conversation?.attributes && ( (conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.CHAT21) ||  !conversation?.attributes?.request_channel) " >
+          <img class="channel-icon" src="assets/img/channel_icons/email-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.EMAIL" >
+          <img class="channel-icon" src="assets/img/channel_icons/form-logo_v2.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.FORM" >
+          <img class="channel-icon" src="assets/img/channel_icons/messenger-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.MESSENGER" >
+          <img class="channel-icon" src="assets/img/channel_icons/whatsapp-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.WHATSAPP" >
+          <img class="channel-icon" src="assets/img/channel_icons/telegram-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.TELEGRAM" >
+          <img class="channel-icon" src="assets/img/channel_icons/voice.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
           <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
           <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
         </div>

package/src/app/components/bubbleMessageInfo-popover/bubbleinfo-popover.component.html

@@ -9,7 +9,7 @@
     <ion-label>{{translationsMap?.get('AddAsCannedResponse')}}</ion-label>
   </ion-item>
   <ion-item button="true" *ngIf="logLevel >= LogLevel.DEBUG" (click)="onClickOption('jsonInfo')">
-    <ion-icon src="assets/images/json-file.svg" slot="start"></ion-icon>
+    <ion-icon src="assets/img/json-file.svg" slot="start"></ion-icon>
     <ion-label>{{translationsMap?.get('JSON_RESPONSE')}}</ion-label>
   </ion-item>
 </ion-list>

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

@@ -1,30 +1,20 @@
 <div>
-  <div class="canned-list" *ngIf="!showLoading">
-    <span *ngIf="tagsCannedFilter.length > 0">
-      <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
-        class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
-        *ngFor="let canned of tagsCannedFilter; let i = index;"
-        (click)="onClickCannedFN(canned, $event)">
-        <div class="cannedContent">
-          <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" #title></ion-input>
-          <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.text"  class="text truncate"></ion-input>
-        </div>
-        <!-- <ion-icon class="canned-item-icon" name="pin" src="assets/images/pin.svg" slot=end *ngIf="canned.pinned" (click)="onPinCanned(canned, $event)"></ion-icon>
-        <ion-icon class="canned-item-icon" name="pin" src="assets/images/pinned.svg" slot=end (click)="onUnPinCanned(canned, $event)"></ion-icon> -->
-        <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="(canned.createdBy === loggedUser.uid && !canned.disabled) && roles[PERMISSIONS.CANNED_RESPONSES_UPDATE]" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
-        <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="(canned.createdBy === loggedUser.uid && canned.disabled) && roles[PERMISSIONS.CANNED_RESPONSES_UPDATE]" (click)="onEditCanned(canned, $event)"></ion-icon>
-        <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="(canned.createdBy === loggedUser.uid) && roles[PERMISSIONS.CANNED_RESPONSES_DELETE]" (click)="onDeleteCanned(canned, $event)"></ion-icon>
-      </ion-item>
-    </span>
-    <div class="no-data" *ngIf="tagsCannedFilter.length === 0">
-      <div class="container">
-        <ion-item button="false" lines="none" class="canned-item no-ripple border">
-          <ion-icon name="cloud-offline" slot="start"></ion-icon>
-          <ion-label>{{translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE')}}</ion-label>
-        </ion-item>
+  <div class="canned-list" *ngIf="tagsCannedFilter.length > 0">
+    <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
+      class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
+      *ngFor="let canned of tagsCannedFilter; let i = index;"
+      (click)="onClickCannedFN(canned, $event)">
+      <div class="cannedContent">
+        <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" #title></ion-input>
+        <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.text"  class="text truncate"></ion-input>
       </div>
-    </div>
-    <ion-item *ngIf="roles[PERMISSIONS.CANNED_RESPONSES_CREATE]" class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
+      <!-- <ion-icon class="canned-item-icon" name="pin" src="assets/img/pin.svg" slot=end *ngIf="canned.pinned" (click)="onPinCanned(canned, $event)"></ion-icon>
+      <ion-icon class="canned-item-icon" name="pin" src="assets/img/pinned.svg" slot=end (click)="onUnPinCanned(canned, $event)"></ion-icon> -->
+      <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>
+      <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="canned.createdBy === loggedUser.uid" (click)="onDeleteCanned(canned, $event)"></ion-icon>
+    </ion-item>
+    <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
       <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
       <span class="add-canned-response-add-icon">+</span>
      <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
@@ -43,5 +33,12 @@
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>
   </div>
-  
+  <div class="no-data" *ngIf="tagsCannedFilter.length === 0 && !showLoading">
+    <div class="container">
+      <ion-item button="false" lines="none" class="canned-item no-ripple border">
+        <ion-icon name="cloud-offline" slot="start"></ion-icon>
+        <ion-label>{{translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE')}}</ion-label>
+      </ion-item>
+    </div>
+  </div>
 </div>

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

@@ -278,5 +278,7 @@ ion-item {
         display: flex;
         justify-content: center;
         flex-direction: column;
+        align-items: center;
+
     }
 }

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

@@ -9,7 +9,6 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { compareValues, htmlEntities } from 'src/chat21-core/utils/utils';
 import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils-message';
 import { PLAN_NAME } from 'src/chat21-core/utils/constants';
-import { PERMISSIONS } from 'src/app/utils/permissions.constants';
 
 @Component({
   selector: 'app-canned-response',
@@ -22,7 +21,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
-  @Input() roles: Array<string>;
+  @Input() canShowCanned: boolean = true;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
@@ -37,7 +36,6 @@ export class CannedResponseComponent implements OnInit {
 
   public arrowkeyLocation = -1
 
-  PERMISSIONS = PERMISSIONS
   
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(

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

@@ -47,13 +47,13 @@
                       </div>
                       <!-- SUPPORT-GROUP CONV -->
                       <div  *ngIf="conversationUid?.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
-                        <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.CHAT21) ||  !conversationAvatar?.request_channel) " >
-                        <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.EMAIL" >
-                        <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.FORM" >
-                        <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.MESSENGER" >
-                        <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.WHATSAPP" >
-                        <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.TELEGRAM" >
-                        <img class="channel-icon" src="assets/images/channel_icons/voice.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
+                        <img class="channel-icon" src="assets/img/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.CHAT21) ||  !conversationAvatar?.request_channel) " >
+                        <img class="channel-icon" src="assets/img/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.EMAIL" >
+                        <img class="channel-icon" src="assets/img/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.FORM" >
+                        <img class="channel-icon" src="assets/img/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.MESSENGER" >
+                        <img class="channel-icon" src="assets/img/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.WHATSAPP" >
+                        <img class="channel-icon" src="assets/img/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.TELEGRAM" >
+                        <img class="channel-icon" src="assets/img/channel_icons/voice.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
                         <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
                         <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
                       </div>
@@ -65,7 +65,7 @@
               <!-- COPILOT-OPTION -->
               <div *ngIf="isCopilotEnabled" class="copilot-container" id="copilot">
                 <ion-button id="copilot" fill="clear" (click)="onOpenSection('copilot')">
-                  <ion-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
+                  <ion-icon class="channel-icon" src="assets/img/icons/copilot.svg"></ion-icon>
                   {{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}
                 </ion-button>
               </div>

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

@@ -57,7 +57,7 @@
       <div class="buttons-left">
 
         <!-- CANNED RESPONSES -->
-        <ng-container *ngIf="areVisibleCAR && supportMode && cannedSection">
+        <ng-container *ngIf="areVisibleCAR && supportMode">
           <div class="canned-responses-btn-wpr" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
               [disabled]="!conversationWith?.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) || disableTextarea">