@chat21/chat21-ionic 3.4.30 → 3.4.32-rc1

package/CHANGELOG.md

@@ -8,18 +8,128 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.32-rc1
+- **added**: ability to change availability status for each project the logged-in user belongs to.
+- **changed**: unserved-request.page refactor html and ts refactor
+
+# 3.4.31 in PROD
+- **changed**: enhance HTML entities encoding by normalizing line breaks and handling null/undefined inputs
+- **changed**: API for upload a file/image into chat
+
 # 3.4.30 in PROD
+
+# 3.4.30-rc3
 - **changed**: when the app is in background, play a sound whenever a new message arrives.
 
 # 3.4.29 in PROD
 - **bug-fixed**: web (Chrome >= 144) `ion-content` stopped scrolling on some pages (conversation list / contacts directory / unassigned); removed the forced `--overflow: hidden` and handled scrolling on Ionic’s internal scroll container via `ion-content::part(scroll)`
 
+# 3.4.29-rc2
+- **changed**: minor updates on API to upload file/image into chat
+
+# 3.4.29-rc1
+- **changed**: API for upload a file/image into chat
+
+
 # 3.4.28 in PROD
 - **bug-fixed**: cannot do project subscription if last_project object is not a project_user obj
 
 # 3.4.27 in PROD
 - **bug-fixed**: cannot find route if userFullname contains /
 
+# 3.4.29-rc1
+- **bug-fixed**: web (Chrome >= 144) `ion-content` stopped scrolling on some pages (conversation list / contacts directory / unassigned); removed the forced `--overflow: hidden` and handled scrolling on Ionic’s internal scroll container via `ion-content::part(scroll)`
+
+# 3.4.28-rc1
+- **bug-fixed**: cannot do project subscription if last_project object is not a project_user obj
+
+# 3.4.27-rc26
+- **bug-fixed**: wss push requests twice 
+
+# 3.4.27-rc25
+- **bug-fixed**: projectUserService is not initialized
+
+# 3.4.27-rc24
+- **added**: implementation of multiple message in wss onmessage
+
+# 3.4.27-rc23
+- **added**: keepAlive worker for MQTT connection
+
+# 3.4.27-rc22
+- **added**: new WsWorker to manage iframe chrome throttling while tab is in background or hidden
+
+# 3.4.27-rc21
+- **changed**: new wss reconnect and timeout keepalive 
+- **bug-fixed**: cannot route if senderFullaname contains /
+
+# 3.4.27-rc20
+- **added**: onOpenTicketExternally event in triggerEvents service
+
+# 3.4.27-rc19
+- **added**: window.parent['openTicketOnHDA']
+
+# 3.4.27-rc18
+- **added**: triggerOnUpdateNewConversationBadge to update conversation badge count in parent component
+
+# 3.4.27-rc17
+- **bug-fixed**: setNotification not called when click on a conversation
+
+# 3.4.27-rc16
+- **bug-fixed**: setNotification not called when resolve a conversation
+
+# 3.4.27-rc15
+- **changed**: /images with /img in assets folder
+
+# 3.4.27-rc14
+- **added**: DISPLAY_EDIT_PROFILE brand variable
+- **bug-fixed**: emojii is sent also if is not allowed
+
+# 3.4.27-rc13
+- **added**: ability to mantain logout parameter when redirect to dashboard urls from sidebar component
+
+# 3.4.27-rc12
+- **added**: ability to manage logOut option in sidebar-user-detail with tiledesk_logOut url query params
+
+# 3.4.27-rc11
+- **bug-fixed**: fixed infinite loading in contact list
+
+# 3.4.27-rc10
+- **added**: ability to manage header-conversation-list with roles
+- **bug-fixed**: members in group list not loaded
+
+# 3.4.27-rc9
+- **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-rc8
+- **added**: ability to open ticket to external service
+- **added**: ticketSection env var
+
+# 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.26 in PROD
 
 # 3.4.26-rc2
@@ -28,6 +138,7 @@
 # 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
@@ -50,6 +161,24 @@
 # 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
@@ -63,8 +192,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/angular.json

@@ -32,6 +32,7 @@
               "src/chat-config-template.json",
               "src/chat-config.json",
               "src/chat-config-dev.json",
+              "src/chat-config-native-ar.json",
               {
                 "glob": "**/*",
                 "input": "src/assets",

package/package.json

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

package/src/app/app.component.html

@@ -21,7 +21,9 @@
     </div> -->
     
     <div class="user-details-sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE || SUPPORT_MODE === false}">
-      <app-sidebar-user-details> </app-sidebar-user-details>
+      <app-sidebar-user-details
+        [logOut]="g?.logOut">
+      </app-sidebar-user-details>
     </div>
  
     <ion-split-pane when="md" contentId="main" [ngClass]="{'mobile': IS_ON_MOBILE_DEVICE, 'sidebar-hidden': IS_ON_MOBILE_DEVICE || SUPPORT_MODE === false}">

package/src/app/app.component.ts

@@ -44,6 +44,9 @@ 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 { BRAND_BASE_INFO } from './utils/utils-resources';
+import { ProjectUsersService } from './services/project_users/project-users.service';
 
 @Component({
   selector: 'app-root',
@@ -119,7 +122,6 @@ export class AppComponent implements OnInit {
     private navService: NavProxyService,
     // public chatPresenceHandler: ChatPresenceHandler,
     public typingService: TypingService,
-    public uploadService: UploadService,
     public appStorageService: AppStorageService,
 
     // public chatConversationsHandler: ChatConversationsHandler,
@@ -142,6 +144,7 @@ export class AppComponent implements OnInit {
     /**TILEDESK SERVICES */
     private tiledeskService: TiledeskService,
     private projectService: ProjectService,
+    private projectUsersService: ProjectUsersService,
     private contactsService: ContactsService
   ) {
 
@@ -168,6 +171,7 @@ 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)
@@ -296,6 +300,10 @@ 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)
+
+        BRAND_BASE_INFO['LOGOUT_ENABLED'] = this.g.logOut
+        this.logger.info('[APP-COMP] this.logOut', BRAND_BASE_INFO['LOGOUT_ENABLED'])
       }
 
     });
@@ -332,7 +340,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') {
@@ -342,7 +350,7 @@ export class AppComponent implements OnInit {
 
       if (event && event.data && event.data.action && event.data.parameter) {
         if (event.data.action === 'resolveConversation') {
-          this.conversationsHandlerService.archiveConversation(event.data.patameter)
+          this.conversationsHandlerService.archiveConversation(event.data.parameter)
         }
       }
       // if (event && event.data && event.data.action && event.data.parameter) {
@@ -534,10 +542,10 @@ export class AppComponent implements OnInit {
       this.statusBar.styleLightContent();
       this.navService.init(this.sidebarNav, this.detailNav);
       this.tiledeskAuthService.initialize(this.appConfigProvider.getConfig().apiUrl);
-      this.messagingAuthService.initialize();
-
+      
       // this.currentUserService.initialize();
       this.chatManager.initialize();
+      this.messagingAuthService.initialize();
       this.presenceService.initialize(this.tenant);
       this.typingService.initialize(this.tenant);
 
@@ -547,7 +555,6 @@ export class AppComponent implements OnInit {
       if (pushEngine && pushEngine !== 'none') {
         this.notificationsService.initialize(this.tenant, vap_id_Key, platform)
       }
-      this.uploadService.initialize();
 
       this.setLanguage(null)
       this.initAuthentication();
@@ -864,7 +871,8 @@ 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');
-        this.router.navigateByUrl('conversations-list')
+        const queryString = window.location.search; // restituisce ad es. "?jwt=...&tiledesk_supportMode=false"
+        this.router.navigateByUrl('conversations-list' + queryString);
       }
       // this.router.navigateByUrl(pageUrl);
       // this.navService.setRoot(ConversationListPage, {});
@@ -1115,13 +1123,19 @@ export class AppComponent implements OnInit {
       if (conversation && conversation.is_new === true && this.isInitialized) {
         this.manageTabNotification('conv_added', conversation.sound)
         this.manageEventNewConversation(conversation)
+        //UPDATE NOTIFICATION FOR NEW CONVERSATION COUNT 
+        this.triggerOnUpdateNewConversationBadge(this.conversationsHandlerService.countIsNew());
       }
       if(conversation) this.updateConversationsOnStorage()
     });
 
     this.conversationsHandlerService.conversationChanged.subscribe((conversation: ConversationModel) => {
       // console.log('[APP-COMP] ***** subscribeConversationChanged conversation: ', conversation);
-      if(conversation)  this.updateConversationsOnStorage();
+      if(conversation){
+        this.updateConversationsOnStorage();
+        //UPDATE NOTIFICATION FOR NEW CONVERSATION COUNT 
+        this.triggerOnUpdateNewConversationBadge(this.conversationsHandlerService.countIsNew());
+      }  
     });
 
     this.conversationsHandlerService.conversationChangedDetailed.subscribe((changes: {value: ConversationModel, previousValue: ConversationModel}) => {
@@ -1149,6 +1163,8 @@ export class AppComponent implements OnInit {
       if(conversation) { 
         this.updateConversationsOnStorage();
         this.segmentResolved(conversation);
+        //UPDATE NOTIFICATION FOR NEW CONVERSATION COUNT 
+        this.triggerOnUpdateNewConversationBadge(this.conversationsHandlerService.countIsNew());
         this.router.navigateByUrl('conversation-detail/'); //redirect to basePage
       }
     });
@@ -1182,6 +1198,7 @@ export class AppComponent implements OnInit {
     this.chatManager.setCurrentUser(currentUser);
 
     this.tiledeskService.initialize(serverBaseURL)
+    this.projectUsersService.initialize(serverBaseURL)
     this.projectService.initialize(serverBaseURL)
     this.contactsService.initialize(serverBaseURL)
 
@@ -1189,11 +1206,14 @@ export class AppComponent implements OnInit {
     this.events.publish('go:online', true);
     // this.chatManager.startApp();
 
+
+    //INIT WEBSOCKET
+    this.connetWebsocket(tiledeskToken)
+
     // ----------------------------------------------
     // PUSH NOTIFICATIONS
     // ----------------------------------------------
     const pushEngine = this.appConfigProvider.getConfig().pushEngine
-
     if (currentUser) {
       if (pushEngine && pushEngine !== 'none') {
         this.notificationsService.getNotificationPermissionAndSaveToken(currentUser.uid);
@@ -1215,6 +1235,24 @@ 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: () => {
+
+      }});
+    }
   }
 
 
@@ -1255,9 +1293,21 @@ export class AppComponent implements OnInit {
   }
 
   goToDashboardLogin(){
-    let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
-    const myWindow = window.open(DASHBOARD_URL, '_self');
-    myWindow.focus();
+    // let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
+    // const myWindow = window.open(DASHBOARD_URL, '_self');
+    // 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
+    );
   }
 
 
@@ -1356,7 +1406,8 @@ export class AppComponent implements OnInit {
 
   subscribeConversationSelected= (conversation: ConversationModel) => {
     if(conversation && conversation.is_new){
-      this.audio_NewConv.pause()
+      this.audio_NewConv.pause();
+      this.conversationsHandlerService.setConversationRead(conversation.uid)
     }
   }
 
@@ -1432,6 +1483,9 @@ 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.triggerOnUpdateNewConversationBadge(this.conversationsHandlerService.countIsNew());
     });
 
   }
@@ -1714,6 +1768,11 @@ export class AppComponent implements OnInit {
     this.triggerEvents.triggerOnInit(detailOBJ)
   }
 
+  private triggerOnUpdateNewConversationBadge(count: number){
+    const detailOBJ = { event: 'onUpdateNewConversationBadge', count: count.toString() }
+    this.triggerEvents.triggerOnUpdateNewConversationBadge(detailOBJ)
+  }
+
 
   // @HostListener('mouseenter', ['$event']) 
   // onMouseEnter(event: any) {

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

@@ -8,5 +8,6 @@
     [height]="height"
     [src]="metadata.src" 
     (load)="onLoaded($event)" 
+    (error)="onError($event)"
     (click)="openImageViewerModal(metadata.src, metadata.name)" />
 </div>

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

@@ -15,6 +15,7 @@ export class ImageComponent implements OnInit {
   loading: boolean = true
   modal: any
   span: any
+  private readonly fallbackSrc = 'assets/img/no_data_found.png'
 
   constructor() { }
 
@@ -26,6 +27,24 @@ export class ImageComponent implements OnInit {
     this.onElementRendered.emit({element: "image", status:true})
   }
 
+  onError(event: Event) {
+    this.loading = false
+    const img = event?.target as HTMLImageElement | null
+    if (!img) {
+      return
+    }
+    // avoid infinite loop if fallback image fails too
+    if (img.src && img.src.includes(this.fallbackSrc)) {
+      return
+    }
+    img.src = this.fallbackSrc
+    // also update metadata so click-to-open uses the fallback consistently
+    if (this.metadata) {
+      this.metadata.src = this.fallbackSrc
+    }
+    this.onElementRendered.emit({ element: 'image', status: true })
+  }
+
   _downloadImage(url: string, fileName: string) {
     // console.log('Image COMP - IMAGE URL ', url) 
     // console.log('Image COMP - IMAGE FILENAME ', fileName) 

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

@@ -77,6 +77,8 @@
 
 <ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation?.uid === uidConvSelected"
   *ngFor="let conversation of listConversations; let index= index" (click)="openConversationByID(conversation)" detail=false>
+  <div class="conv-item-wrapper">
+    <div class="conv-item-top">
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
@@ -170,9 +172,9 @@
       <div *ngIf="conversation?.recipient.startsWith('support-group')" tooltip="{{ translationsMap?.get('Archive')}}"></div> -->
     </ion-button>
 
-    <!-- <ion-button *ngIf="conversation?.recipient.startsWith('support-group') && !conversation.archived" [tooltip]="joinTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
+    <!-- <ion-button *ngIf="conversation?.recipient.startsWith('support-group') && !conversation.archived" 
       [ngClass]="{'hide': !IS_ON_MOBILE_DEVICE, 'button-on-desktop': !IS_ON_MOBILE_DEVICE, 'button-on-mobile': IS_ON_MOBILE_DEVICE  }"
-      id="{{ 'join_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
+      id="{{ 'join_conversation_button' + conversation.uid }}" class="join-conversation-button" ion-button clear
       item-end (click)="joinConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'join_button_icon' + conversation.uid }}" name="link-outline" item-end></ion-icon>
 
@@ -196,5 +198,15 @@
     [ngClass]="{'notification_point-on-desktop': !IS_ON_MOBILE_DEVICE, 'notification_point-on-mobile': IS_ON_MOBILE_DEVICE }"
     *ngIf="conversation.is_new">
   </div>
+    </div>
+    <div class="conv-item-actions" *ngIf="!conversation.archived && conversation.status ===100" (click)="$event.stopPropagation()">
+      <ion-button size="small" class="join-button" (click)="joinConversation(conversation)">
+        {{ translationsMap?.get('JOIN_CONVERSATION') || 'Join' }}
+      </ion-button>
+      <ion-button size="small" class="resolve-button" (click)="closeConversation(conversation)">
+        {{ translationsMap?.get('Resolve') || 'Resolve' }}
+      </ion-button>
+    </div>
+  </div>
 
 </ion-item>

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

@@ -9,8 +9,9 @@
 }
 ion-item {
     cursor: pointer;
-    height: 90px; //70px;
-    --min-height: 90px; //70px;
+    min-height: 90px;
+    height: auto;
+    --min-height: auto;
     position: relative;
     display: flex;
     text-decoration: none;
@@ -23,6 +24,42 @@ ion-item {
     border-radius: var(--border-radius-item);
     margin: 4px 5px;
     transition: none;
+    .conv-item-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding-bottom: 8px;
+    }
+    .conv-item-top {
+        display: flex;
+        flex: 1;
+        position: relative;
+    }
+    .conv-item-actions {
+        display: flex;
+        justify-content: space-around;
+        gap: 8px;
+        margin-top: 4px;
+        ion-button {
+            --padding-start: 12px;
+            --padding-end: 12px;
+            font-size: 12px;
+            margin: 0;
+            --border-radius: var(--button-border-radius);
+            &.join-button {
+                --background: var(--join-button-background);
+                --background-hover: #e4e6eb;
+                --background-activated: #d8dae0;
+                --color: var(--bacis-white);
+            }
+            &.resolve-button {
+                --background: var(--resolve-button-background);
+                --background-hover: #e4e6eb;
+                --background-activated: #d8dae0;
+                --color: #1c1e21;
+            }
+        }
+    }
     .conv-container{
         width: 84%;
         height: 100%;

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { MomentModule } from 'ngx-moment';
+
+import { ListConversationsComponent } from './list-conversations/list-conversations.component';
+import { IonListConversationsComponent } from './ion-list-conversations/ion-list-conversations.component';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, MomentModule],
+  declarations: [ListConversationsComponent, IonListConversationsComponent],
+  exports: [ListConversationsComponent, IonListConversationsComponent],
+})
+export class ListConversationsModule {}

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

@@ -1,20 +1,30 @@
 <div>
-  <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 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/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) && 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>
-      <!-- <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()">
+    </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="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> 
@@ -33,12 +43,5 @@
       <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,7 +278,5 @@ ion-item {
         display: flex;
         justify-content: center;
         flex-direction: column;
-        align-items: center;
-
     }
 }