@chat21/chat21-ionic 3.4.13-rc2 → 3.4.13-rc4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-ionic ver 3.0
 
+### 3.4.13-rc.4
+- added: management for copilot option in project.profile obj
+- removed: token in each tiledesk Service method calls and added initialize method for each services
+ 
+### 3.4.13-rc.3
+- added: copilot-popover on each received message
+- changed: canned-responsed no data ui
+
 ### 3.4.13-rc.2
 - added: no-suggestions in copilot component
 - changed: HIDE_CANNED_RESPONSES with SHOW CANNED_RESPONSES

package/package.json

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

package/src/app/app.component.ts

@@ -40,7 +40,8 @@ import { Deeplinks } from '@ionic-native/deeplinks/ngx';
 import { TriggerEvents } from './services/triggerEvents/triggerEvents';
 import { Globals } from './utils/globals';
 import { GlobalSettingsService } from './services/global-settings/global-settings.service';
-import { commandToMessage, conversationToMessage, isSender } from 'src/chat21-core/utils/utils-message';
+import { conversationToMessage } from 'src/chat21-core/utils/utils-message';
+import { ProjectService } from './services/projects/project.service';
 
 @Component({
   selector: 'app-root',
@@ -103,13 +104,10 @@ export class AppComponent implements OnInit {
     private appConfigProvider: AppConfigProvider,
     public events: EventsService,
     public triggerEvents: TriggerEvents,
-    public config: Config,
     public chatManager: ChatManager,
     public translate: TranslateService,
     public alertController: AlertController,
     public navCtrl: NavController,
-    // public userService: UserService,
-    // public currentUserService: CurrentUserService,
     public modalController: ModalController,
     public messagingAuthService: MessagingAuthService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -137,7 +135,8 @@ export class AppComponent implements OnInit {
     public fcm: FCM,
     public el: ElementRef,
     public g: Globals,
-    public globalSettingsService: GlobalSettingsService
+    public globalSettingsService: GlobalSettingsService,
+    public projectService: ProjectService
   ) {
 
     this.saveInStorageNumberOfOpenedChatTab();
@@ -1153,7 +1152,7 @@ export class AppComponent implements OnInit {
     // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO-ONLINE isOnline ', this.isOnline);
     // clearTimeout(this.timeModalLogin);
     const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
-
+    const serverBaseURL = this.appConfigProvider.getConfig().apiUrl 
     // const supportmode = this.appConfigProvider.getConfig().supportMode;
     // this.logger.log('[APP-COMP] - GO-ONLINE - supportmode ', supportmode);
     // if (supportmode === true) {
@@ -1166,6 +1165,8 @@ export class AppComponent implements OnInit {
     this.logger.log('[APP-COMP] - GO-ONLINE - currentUser ', currentUser);
     this.chatManager.setTiledeskToken(tiledeskToken);
     this.chatManager.setCurrentUser(currentUser);
+
+    this.projectService.initialize(serverBaseURL)
     // this.chatManager.startApp();
 
     // ----------------------------------------------

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

@@ -97,16 +97,6 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <div class="message-date-hover"> {{message.timestamp | date:'HH:mm' }} </div>
-
-      <!-- <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal(message)" [tooltip]="addAsCannedResponseTooltipText"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-          <span class="add-canned-response-add-icon">+</span>
-        </ion-button>
-      </ng-container> -->
-
       
       <div class="bubble-container">
 
@@ -132,7 +122,7 @@
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
-          (onOptionsMessage)="onClickOptionsMessage($event)">
+          (onOptionsDataReturned)="onClickBubbleOptions($event)">
         </chat-bubble-message>
       </div>
 
@@ -174,10 +164,11 @@
           [fontSize]="stylesMap?.get('fontSize')"
           [fontFamily]="stylesMap?.get('fontFamily')"
           [stylesMap]="stylesMap"
+          [isCopilotEnabled]="isCopilotEnabled"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
-          (onOptionsMessage)="onClickOptionsMessage($event)">
+          (onOptionsDataReturned)="onClickBubbleOptions($event)">
         </chat-bubble-message>
 
       </div>
@@ -189,22 +180,6 @@
         </ion-button>
       </ng-container>
 
-      <!-- <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal(message)" [tooltip]="addAsCannedResponseTooltipText"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-          <span class="add-canned-response-add-icon">+</span>
-        </ion-button>
-      </ng-container> -->
-      <!-- <ng-container *ngIf="supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
-          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container> -->
-
       <div class="message-date-hover" *ngIf="isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
     </div>
     

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

@@ -1,5 +1,4 @@
 import { JsonMessagePage } from './../../../modals/json-message/json-message.page';
-import { BubbleInfoPopoverComponent } from '../../../components/bubbleMessageInfo-popover/bubbleinfo-popover.component';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
 import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
@@ -18,6 +17,7 @@ import * as moment from 'moment';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { ModalController, PopoverController, ToastController } from '@ionic/angular';
 import { CreateCannedResponsePage } from 'src/app/modals/create-canned-response/create-canned-response.page';
+import { EventsService } from 'src/app/services/events-service';
 
 @Component({
   selector: 'ion-conversation-detail',
@@ -29,6 +29,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() senderId: string;
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
+  @Input() isCopilotEnabled: boolean = false
   @Input() supportMode: boolean;
   @Input() isMobile: boolean;
   @Input() openInfoConversation: boolean;
@@ -73,7 +74,8 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     public appConfigProvider: AppConfigProvider,
     public modalController: ModalController,
     public popoverController: PopoverController,
-    public toastController: ToastController
+    public toastController: ToastController,
+    private eventService: EventsService
   ) {
     super(cdref, uploadService)
 
@@ -154,16 +156,19 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onAddUploadingBubble.emit(value);
   }
 
-  onClickOptionsMessage(event:{option: string, message: MessageModel}){
-    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickBubbleMenu', event);
+  onClickBubbleOptions(event:{option: string, data: any}){
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickBubbleOptions', event);
     if(event.option==='copy'){
-      this.onClickCopyMessage(event.message)
+      this.onClickCopyMessage(event.data.message)
     }else if(event.option === 'addCanned'){
       if(this.areVisibleCAR && this.supportMode){
-        this.presentCreateCannedResponseModal(event.message)
+        this.presentCreateCannedResponseModal(event.data.message)
       }
     }else if(event.option === 'jsonInfo'){
-      this.presentJsonMessageModal(event.message)
+      this.presentJsonMessageModal(event.data.message)
+    } else if(event.option === 'copilot_question'){
+      this.eventService.publish('copilot:new_question', {text: event.data.text})
+
     }
   }
 

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

@@ -11,8 +11,9 @@
   </div> -->
   <chat-options
     [message]="message"
+    [isCopilotEnabled]="isCopilotEnabled"
     [logLevel]="logger.getLoggerConfig().logLevel"
-    (onOptionsMessage)="onOptionsMessageFN($event)">
+    (onOptionsDataReturned)="onOptionsDataReturnedFN($event)">
   </chat-options>
 
   <div>

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

@@ -26,10 +26,11 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() fontFamily: string;
   @Input() stylesMap: Map<string, string>;
   @Input() supportMode: boolean;
+  @Input() isCopilotEnabled: boolean = false;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
-  @Output() onOptionsMessage = new EventEmitter<{option: string, message: MessageModel}>();
+  @Output() onOptionsDataReturned = new EventEmitter<{option: string, message: MessageModel}>();
   
   isImage = isImage;
   isFile = isFile;
@@ -54,8 +55,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     public sanitizer: DomSanitizer,
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
-    public modalController: ModalController,
-    private popoverController: PopoverController
+    public modalController: ModalController
     ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
@@ -162,34 +162,9 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   //   this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', message);
   //   this.presentPopover(event, message)
   // }
-  onOptionsMessageFN(event){
-    this.onOptionsMessage.emit(event)
+  onOptionsDataReturnedFN(event){
+    this.onOptionsDataReturned.emit(event)
   }
-
-
-  // async presentPopover(ev: any, message: MessageModel) {
-  //   const attributes = {
-  //     message: message,
-  //     conversationWith: message.recipient
-  //  }
-  //   const popover = await this.popoverController.create({
-  //     component: BubbleInfoPopoverComponent,
-  //     cssClass: 'info-popover',
-  //     componentProps: attributes,
-  //     event: ev,
-  //     translucent: true,
-  //     keyboardClose: true,
-  //     showBackdrop: false
-  //   });
-  //   popover.onDidDismiss().then((dataReturned: any) => {
-  //     this.logger.log('[BUBBLE-MESSAGE] presentPopover dismissed. Returned value::', dataReturned.data)
-  //     if(dataReturned.data){
-  //       this.onOptionsMessage.emit({option: dataReturned.data.option, message: message})
-  //     }
-  //   })
-
-  //   return await popover.present();
-  // }
   // ========= begin:: event emitter function ============//
 
   // returnOpenAttachment(event: String) {

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

@@ -1,5 +1,8 @@
 <div class="options-container" >
-  <div class="options-logo" (click)="onClickOptionsMessage($event, message)" >
+  <div class="options-logo" (click)="onClickOptionsMessage($event)" >
     <ion-icon name="chevron-down"></ion-icon>
   </div>
+  <div *ngIf="isCopilotEnabled" class="options-logo" (click)="onClickOptionsCopilot($event)">
+    <ion-icon id="copilot" src="assets/images/icons/copilot.svg"></ion-icon>
+  </div>
 </div>

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

@@ -28,6 +28,13 @@
         
         &:hover{
             cursor: pointer;
+            ion-icon#copilot{
+                
+                    transition: transform 1s ease-in-out;   
+                    transform: rotate(180deg);
+                    color: #ac87eb;
+                
+            }
         }
     }
 

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

@@ -4,6 +4,7 @@ import { BubbleInfoPopoverComponent } from 'src/app/components/bubbleMessageInfo
 import { MessageModel } from 'src/chat21-core/models/message';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CopilotPopoverComponent } from 'src/app/components/copilot-popover/copilot-popover.component';
 
 @Component({
   selector: 'chat-options',
@@ -13,8 +14,9 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 export class OptionsComponent implements OnInit {
 
   @Input() message: MessageModel;
+  @Input() isCopilotEnabled: boolean = false;
   @Input() logLevel: number;
-  @Output() onOptionsMessage = new EventEmitter<{option: string, message: MessageModel}>();
+  @Output() onOptionsDataReturned = new EventEmitter<{option: string, data: any}>();
 
   private logger: LoggerService = LoggerInstance.getInstance()
   
@@ -22,17 +24,23 @@ export class OptionsComponent implements OnInit {
 
   ngOnInit() {}
 
-  onClickOptionsMessage(event, message){
-      this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', message);
-      this.presentPopover(event, message)
+  onClickOptionsMessage(event){
+      this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', this.message);
+      this.presentPopover(event)
   }
+
+  onClickOptionsCopilot(event){
+    this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsCopilot', this.message);
+    this.presentCopilotPopover(event)
+  }
+
   
   
-  async presentPopover(ev: any, message: MessageModel) {
+  async presentPopover(ev: any) {
     const attributes = {
-      message: message,
+      message: this.message,
       logLevel: this.logLevel,
-      conversationWith: message.recipient
+      conversationWith: this.message.recipient
     }
     const popover = await this.popoverController.create({
       component: BubbleInfoPopoverComponent,
@@ -46,7 +54,32 @@ export class OptionsComponent implements OnInit {
     popover.onDidDismiss().then((dataReturned: any) => {
       this.logger.log('[BUBBLE-MESSAGE] presentPopover dismissed. Returned value::', dataReturned.data)
       if(dataReturned.data){
-        this.onOptionsMessage.emit({option: dataReturned.data.option, message: message})
+        this.onOptionsDataReturned.emit({option: dataReturned.data.option, data: {message: this.message}})
+      }
+    })
+
+    return await popover.present();
+  }
+
+  async presentCopilotPopover(ev: any) {
+    const attributes = {
+      message: this.message,
+      logLevel: this.logLevel,
+      conversationWith: this.message.recipient
+    }
+    const popover = await this.popoverController.create({
+      component: CopilotPopoverComponent,
+      cssClass: 'copilot-popover',
+      componentProps: attributes,
+      event: ev,
+      translucent: true,
+      keyboardClose: true,
+      showBackdrop: false,
+    });
+    popover.onDidDismiss().then((dataReturned: any) => {
+      this.logger.log('[BUBBLE-MESSAGE] presentCopilotPopover dismissed. Returned value::', dataReturned.data)
+      if(dataReturned.data){
+        this.onOptionsDataReturned.emit({option: 'copilot_question', data: {text: dataReturned.data.text}})
       }
     })
 

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

@@ -21,7 +21,7 @@
     </ion-item>
   </div>
   <!-- LOADER -->
-  <div class="loader" *ngIf="tagsCannedFilter.length === 0">
+  <div class="loader" *ngIf="showLoading">
     <div class="box">
       <!-- <div class="container">
         <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
@@ -33,7 +33,12 @@
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>
   </div>
-  <div *ngIf="!canShowCanned">
-    
+  <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

@@ -255,4 +255,30 @@ ion-item {
           opacity: 0;
         }
       }
+}
+
+.no-data{
+
+    background-color: white !important;
+    width: 100%;
+    max-height: 310px;
+    overflow-y: auto;
+    // padding: 10px 0;
+    // margin: 0;
+    margin-bottom: 1px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #080f1a;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // list-style: none;
+    z-index: 999999;
+
+    .container{
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+
+    }
 }

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

@@ -32,6 +32,7 @@ export class CannedResponseComponent implements OnInit {
   
   public tagsCanned: any = []
   public tagsCannedFilter: any = []
+  public showLoading: boolean = false
 
   public arrowkeyLocation = -1
 
@@ -119,21 +120,24 @@ export class CannedResponseComponent implements OnInit {
   }
 
   getAndShowCannedResponses(strSearch, projectId) {
-    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
     this.logger.log('[CANNED] - loadTagsCanned tagsCanned.length', this.tagsCanned.length)
     //if(this.tagsCanned.length <= 0 ){
     this.tagsCanned = []
-    this.cannedResponsesService.getAll(tiledeskToken, projectId).subscribe((res) => {
+    this.showLoading = true;
+    this.cannedResponsesService.getAll(projectId).subscribe((res) => {
       this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses RES', res)
 
       this.tagsCanned = res
       // if (this.HIDE_CANNED_RESPONSES === false) {
-        this.showTagsCanned(strSearch)
+      this.showTagsCanned(strSearch)
       // }
     }, (error) => {
       this.logger.error('[CANNED] - loadTagsCanned  getCannedResponses - ERROR  ', error)
     }, () => {
       this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses * COMPLETE *')
+      setTimeout(() => {
+        this.showLoading = false
+      }, 1000);
     })
   }
 
@@ -163,33 +167,9 @@ export class CannedResponseComponent implements OnInit {
       canned.text = this.replacePlaceholderInCanned(canned.text);
       canned.disabled = true
     });
-    if (this.tagsCannedFilter && this.tagsCannedFilter.length === 0) {
-      // const button = this.renderer.createElement('button');
-      // const buttonText = this.renderer.createText('Click me');
-      // this.renderer.appendChild(button, buttonText);
-      // console.log('[CANNED] - this.el.nativeElement ', this.el.nativeElement)
-      // this.renderer.listen(button, 'click', () => { alert('hi'); });
-      // let nocanned = {}
-      // if (this.USER_ROLE !== 'agent') {
-      const nocanned = {
-        // "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div><div class='cannedText'>" + this.translationMap.get('TO_CREATE_THEM_GO_TO_THE_PROJECT') + '</div></div>'
-        // <div class='cannedText no-canned-available-text'>" + this.translationMap.get('AddNewCannedResponse') + '</div>
-        title: this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') ,
-        text: '',
-        disabled: true
-      }
-      // } else if (this.USER_ROLE === 'agent') {
-      //   nocanned = {
-      //     // "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div><div class='cannedText'>" + this.translationMap.get('TO_CREATE_THEM_GO_TO_THE_PROJECT') + '</div></div>'
-      //     title:
-      //       "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div></div>",
-      //     text: 'There are no canned responses available',
-      //   }
-      // }
-      this.tagsCannedFilter.push(nocanned)
-    }
     this.appStorageService.setItem(this.projectID+'_canned', JSON.stringify(this.tagsCannedFilter))
     this.onLoadedCannedResponses.emit(this.tagsCannedFilter)
+    
   }
 
   filterItems(items, searchTerm) {

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

@@ -28,10 +28,10 @@
       </div>
     </div>
 
-    <div>
+    <div *ngIf="isCopilotEnabled">
       <!-- COPILOT-OPTION -->
       <div class="section-option" id="copilot" tooltip="{{translationMap?.get('COPILOT.ASK_AI')}}" placement="top">
-        <ion-button fill="clear" [class.active]="section ==='copilot'" (click)="onOpenSection('copilot')">
+        <ion-button id="copilot" fill="clear" [class.active]="section ==='copilot'" (click)="onOpenSection('copilot')">
           <ion-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
           {{translationMap?.get('COPILOT.ASK_AI')}}
         </ion-button>
@@ -55,8 +55,7 @@
 
         <!-- CANNED RESPONSES -->
         <ng-container *ngIf="areVisibleCAR && supportMode">
-          <div class="canned-responses-btn-wpr"
-            tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" placement="top">
+          <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">
               <ion-icon slot="icon-only" name="flash-outline" style="font-size: 24px;"></ion-icon>

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

@@ -38,6 +38,17 @@
                 margin-right: 4px;
                 margin-left: 4px;
             }
+
+            &#copilot {  
+                &:hover{
+                    ion-icon {
+                        transition: transform 1s ease-in-out;   
+                        transform: rotate(180deg);
+                        color: #ac87eb;
+                    }
+                }              
+                
+            }
         }
     }
 

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

@@ -52,6 +52,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() channel: string;
   @Input() tagsCannedFilter: any;
   @Input() areVisibleCAR: boolean;
+  @Input() isCopilotEnabled: boolean = false;
   @Input() supportMode: boolean;
   @Input() leadInfo: {lead_id: string, hasEmail: boolean, email: string, projectId: string, presence: {}};
   @Input() fileUploadAccept: string;

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -225,17 +225,15 @@ export class InfoContentComponent implements OnInit {
 
     this.member = null;
 
-    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
-    this.contactsService.loadContactDetail(tiledeskToken, this.conversationWith)
-      .subscribe(res => {
-        this.logger.log('[INFO-CONTENT-COMP] - setInfoDirect loadContactDetail RES', res);
-        this.member = res
-        this.logger.log('[INFO-CONTENT-COMP] - setInfoDirect member', this.member);
-      }, (error) => {
-        this.logger.error('[INFO-CONTENT-COMP] - setInfoDirect loadContactDetail - ERROR  ', error);
-      }, () => {
-        this.logger.log('I[INFO-CONTENT-COMP] - setInfoDirect loadContactDetail * COMPLETE *');
-      });
+    this.contactsService.loadContactDetail(this.conversationWith).subscribe(res => {
+      this.logger.log('[INFO-CONTENT-COMP] - setInfoDirect loadContactDetail RES', res);
+      this.member = res
+      this.logger.log('[INFO-CONTENT-COMP] - setInfoDirect member', this.member);
+    }, (error) => {
+      this.logger.error('[INFO-CONTENT-COMP] - setInfoDirect loadContactDetail - ERROR  ', error);
+    }, () => {
+      this.logger.log('I[INFO-CONTENT-COMP] - setInfoDirect loadContactDetail * COMPLETE *');
+    });
   }
 
   // ---------------------------------------------------

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -38,7 +38,6 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
   constructor(
     public imageRepoService: ImageRepoService,
     public presenceService: PresenceService,
-    public tiledeskAuthService: TiledeskAuthService,
     public contactsService: ContactsService,
     public renderer: Renderer2,
     private router: Router,
@@ -56,10 +55,7 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
     // const currentUrl = this.router.url;
     // this.logger.log('InfoGroupComponent current_url ', currentUrl);
     // .pipe(takeUntil(this.unsubscribe$))
-    router.events
-      .pipe(filter(event => event instanceof NavigationEnd))
-
-      .subscribe((event: NavigationEnd) => {
+    router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
         // console.log('InfoGroupComponent -  router.events prev url :', event.url);
         this.previousUrl = event.url;
 
@@ -122,8 +118,6 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
 
     if (this.groupDetail) {
       if (this.groupDetail.uid.startsWith('group-')) {
-        const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
-
         this.member_array = []
         const members_isonline_array = []
 
@@ -156,9 +150,7 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
 
             });
 
-          this.contactsService.loadContactDetail(tiledeskToken, key)
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(user => {
+          this.contactsService.loadContactDetail(key).pipe(takeUntil(this.unsubscribe$)).subscribe(user => {
               this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
               // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
 

package/src/app/components/copilot-popover/copilot-popover.component.html

@@ -0,0 +1,25 @@
+<div id="copilot-container">
+  <ion-header class="ion-no-border">
+    <ion-label class="main-title">{{translationsMap.get('HELLO')}}<span *ngIf="loggedUser?.firstname">, {{loggedUser?.firstname}}</span></ion-label>
+    <ion-label class="title">{{translationsMap.get('COPILOT.HOW_CAN_I_HELP_YOU')}}</ion-label>
+  </ion-header>
+  <ion-content>
+    <div class="content-container">
+      <div class="text-message">
+        <ion-textarea 
+          [placeholder]="translationsMap.get('COPILOT.ASK_ME_SOMETHING')"
+          [(ngModel)]="text" 
+          (ionChange)="ionChange($event);" 
+          (ionFocus)="ionFocus()"
+          (keydown.enter)="onKeydown($event, messageString)">
+        </ion-textarea>
+      </div>
+    </div>
+  </ion-content>
+  <ion-footer class="ion-no-border">
+    <ion-button fill="clear" (click)="onClickCopilot()">
+      <ion-icon src="assets/images/icons/copilot.svg"></ion-icon>
+      {{translationsMap.get('COPILOT.ASK_AI') }}
+    </ion-button>
+  </ion-footer>
+</div>