@chat21/chat21-ionic 3.4.29 → 3.4.30-rc1

package/CHANGELOG.md

@@ -8,6 +8,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.29-rc1
+- **changed**: API for upload a file/image into chat
+
 # 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)`
 
@@ -17,6 +20,99 @@
 # 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
@@ -25,6 +121,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
@@ -47,6 +144,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
@@ -60,8 +175,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.29",
+    "version": "3.4.30-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') {
@@ -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}) => {
@@ -1145,6 +1159,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
       }
     });
@@ -1178,6 +1194,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)
 
@@ -1185,11 +1202,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);
@@ -1211,6 +1231,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: () => {
+
+      }});
+    }
   }
 
 
@@ -1251,9 +1289,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
+    );
   }
 
 
@@ -1352,7 +1402,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)
     }
   }
 
@@ -1428,6 +1479,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());
     });
 
   }
@@ -1710,6 +1764,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/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;
-
     }
 }

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

@@ -9,6 +9,7 @@ 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',
@@ -21,7 +22,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
-  @Input() canShowCanned: boolean = true;
+  @Input() roles: Array<string>;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
@@ -36,6 +37,7 @@ export class CannedResponseComponent implements OnInit {
 
   public arrowkeyLocation = -1
 
+  PERMISSIONS = PERMISSIONS
   
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(

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

@@ -22,6 +22,13 @@
           {{translationMap?.get('WHATSAPP.LABEL_TEMPLATES')}}
         </ion-button>
       </div>
+      <!-- OPEN TICKET -->
+      <div *ngIf="ticketSection" class="section-option" id="template" tooltip="{{translationMap?.get('TICKET.OPEN_TICKET')}}" placement="top">
+        <ion-button fill="clear" [class.active]="section==='ticket'" (click)="onOpenSection('ticket')" [disabled]="channelType === 'direct'">
+          <ion-icon name="ticket"></ion-icon>
+          {{translationMap?.get('TICKET.OPEN_TICKET')}}
+        </ion-button>
+      </div>
     </div>
 
     <div class="footerContainerAlert">
@@ -50,6 +57,22 @@
     </ion-col>
   </ion-row>
 
+  <ion-row id="ticket" [style.display]="section==='ticket'? 'flex': 'none'">
+    <ion-col col-auto>
+      <div class="placeholder">{{translationMap.get('TICKET.DESCRIPTION')}}</div>
+      <div class="buttons-container">
+          <ion-button name="add" size="small" (click)="onClickTicket('open')">
+            <ion-icon name="add"></ion-icon>
+            {{translationMap?.get('TICKET.CONFIRM')}}
+          </ion-button>
+          <ion-button size="small" color="danger" (click)="onClickTicket('close')">
+            <ion-icon name="close"></ion-icon>
+            {{translationMap?.get('TICKET.CLOSE')}}
+          </ion-button>
+      </div>
+    </ion-col>
+  </ion-row>
+
   <ion-row id="message-text-area" [style.display]="section==='chat' || section ==='templates' || section ==='copilot'? 'flex': 'none'">
 
     <ion-col col-auto style="display: flex;">
@@ -57,7 +80,7 @@
       <div class="buttons-left">
 
         <!-- CANNED RESPONSES -->
-        <ng-container *ngIf="areVisibleCAR && supportMode">
+        <ng-container *ngIf="areVisibleCAR && supportMode && cannedSection">
           <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">

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

@@ -183,6 +183,36 @@
     }
 }
 
+#ticket{
+    text-align: center;
+    font-size: 12px;
+
+    .buttons-container{
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+
+        ion-button{
+            font-size: 12px;
+            --padding-top: 4px;
+            --padding-bottom: 4px;
+            --padding-start: 6px;
+            --padding-end: 6px;
+            --ripple-color: transparent;
+            text-transform: unset;
+            height: auto;
+
+            ion-icon{
+                margin-right: 4px;
+            }
+
+            &[name="add"]{
+                --background: var(--basic-blue);
+            }
+        }
+    }
+}
+
 #fileInput {
     position: absolute;
     opacity: 0;