@chat21/chat21-ionic 3.4.27-rc2 → 3.4.27-rc20

package/CHANGELOG.md

@@ -8,6 +8,67 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 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
 

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.27-rc2",
+    "version": "3.4.27-rc20",
     "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,8 @@ 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({
@@ -299,6 +301,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'])
       }
 
     });
@@ -867,7 +873,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, {});
@@ -891,6 +898,11 @@ export class AppComponent implements OnInit {
       if (IDConv && FullNameConv) {
         pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
       }
+
+      const queryParams = this.route.snapshot.queryParams;
+      const queryString = new URLSearchParams(queryParams).toString();
+      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" ));
 
@@ -1113,14 +1125,19 @@ export class AppComponent implements OnInit {
       if (conversation && conversation.is_new === true && this.isInitialized) {
         this.manageTabNotification('conv_added', conversation.sound)
         this.manageEventNewConversation(conversation)
-        this.setNotification();
+        //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}) => {
@@ -1144,6 +1161,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,11 +1201,14 @@ export class AppComponent implements OnInit {
     this.contactsService.initialize(serverBaseURL)
     // 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);
@@ -1208,6 +1230,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: () => {
+
+      }});
+    }
   }
 
 
@@ -1248,9 +1288,24 @@ 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,
+      undefined,
+      undefined,
+      undefined
+    );
   }
 
 
@@ -1351,8 +1406,6 @@ export class AppComponent implements OnInit {
     if(conversation && conversation.is_new){
       this.audio_NewConv.pause();
       this.conversationsHandlerService.setConversationRead(conversation.uid)
-      //UPDATE NOTIFICATION FOR NEW CONVERSATION COUNT 
-      this.setNotification();
     }
   }
 
@@ -1430,7 +1483,7 @@ export class AppComponent implements OnInit {
       }
 
       //INIT NOTIFICATION FOR NEW CONVERSATION COUNT 
-      this.setNotification();
+      this.triggerOnUpdateNewConversationBadge(this.conversationsHandlerService.countIsNew());
     });
 
   }
@@ -1647,14 +1700,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() {
@@ -1721,6 +1766,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/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

@@ -9,8 +9,8 @@
           <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="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>

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/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

@@ -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;">

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;