@chat21/chat21-ionic 3.4.12 → 3.4.13-rc2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # chat21-ionic ver 3.0
 
+### 3.4.13-rc.2
+- added: no-suggestions in copilot component
+- changed: HIDE_CANNED_RESPONSES with SHOW CANNED_RESPONSES
+
+### 3.4.13-rc.1
+- added: copilot suggestions for agent responses
+
 ### 3.4.12 in PROD
 
 ### 3.4.12-rc.2

package/Dockerfile

@@ -19,7 +19,7 @@ RUN ionic cordova build browser
 
 ### STAGE 2: Setup ###
 
-FROM nginx:1.14.1-alpine
+FROM nginx:1.14.1-alpine as setup
 
 ## Copy our default nginx config
 COPY nginx.conf /etc/nginx/nginx.conf

package/config.xml

@@ -106,7 +106,6 @@
     <platform name="browser">
         <preference name="ShowSplashScreen" value="false" />
     </platform>
-    <engine name="browser" spec="^5.0.4" />
     <plugin name="cordova-android-support-gradle-release" spec="^3.0.1">
         <variable name="ANDROID_SUPPORT_VERSION" value="27.+" />
     </plugin>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.12",
+    "version": "3.4.13-rc2",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {
@@ -48,7 +48,6 @@
         "autolinker": "^3.14.2",
         "cordova": "^11.1.0",
         "cordova-android-support-gradle-release": "^3.0.1",
-        "cordova-browser": "^5.0.4",
         "cordova-plugin-chooser": "^1.3.2",
         "cordova-plugin-ionic-keyboard": "^2.2.0",
         "cordova-plugin-ionic-webview": "^4.2.1",
@@ -86,6 +85,7 @@
         "@types/node": "^12.20.55",
         "codelyzer": "^6.0.0",
         "cordova-android": "^10.1.2",
+        "cordova-browser": "^6.0.0",
         "cordova-ios": "^6.3.0",
         "cordova-plugin-add-swift-support": "^2.0.2",
         "cordova-plugin-fcm-with-dependecy-updated": "^7.8.0",
@@ -147,9 +147,9 @@
             }
         },
         "platforms": [
-            "browser",
             "android",
-            "ios"
+            "ios",
+            "browser"
         ]
     }
 }

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

@@ -31,7 +31,6 @@ export class CannedResponseComponent implements OnInit {
   public projectID: string;
   
   public tagsCanned: any = []
-  public tagsCannedCount: number
   public tagsCannedFilter: any = []
 
   public arrowkeyLocation = -1
@@ -128,8 +127,6 @@ export class CannedResponseComponent implements OnInit {
       this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses RES', res)
 
       this.tagsCanned = res
-      this.tagsCannedCount = res.length
-      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses tagsCannedCount', this.tagsCannedCount)
       // if (this.HIDE_CANNED_RESPONSES === false) {
         this.showTagsCanned(strSearch)
       // }
@@ -179,6 +176,7 @@ export class CannedResponseComponent implements OnInit {
         // <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 = {
@@ -269,10 +267,9 @@ export class CannedResponseComponent implements OnInit {
     if(!canned.disabled){
       event.preventDefault();
       event.stopPropagation();
-    } else if(this.tagsCannedCount > 0){
-      this.onClickCanned.emit(canned)
     } else {
-      this.logger.log('[CANNED] THERE IS NOT CANNED ', canned.text)
+      this.logger.log('[CANNED] THERE IS CANNED ', canned.text)
+      this.onClickCanned.emit(canned)
     }
   }
 

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

@@ -1,29 +1,41 @@
 <ion-grid>
   <div class="footer-options-container">
-    <!-- CHAT-OPTION -->
-    <div class="section-option" id="chat"  tooltip="{{translationMap?.get('LABEL_CHAT')}}" placement="top">
-      <ion-button fill="clear" (click)="onOpenSection('chat')" [class.active]="section==='chat'">
-        <ion-icon name="chatbubbles"></ion-icon>
-        {{translationMap.get('LABEL_CHAT')}}
-      </ion-button>
-    </div>
-    <!-- EMAIL-OPTION -->
-    <div *ngIf="emailSection" class="section-option" id="email"  tooltip="{{translationMap?.get('EMAIL.LABEL_TOOLTIP')}}" placement="top">
-      <ion-button fill="clear" [class.active]="section==='email'" (click)="onOpenSection('email')" [disabled]="channelType === 'direct' || channel == CHANNEL_TYPE.WHATSAPP || channel == CHANNEL_TYPE.MESSENGER">
-        <ion-icon name="mail-open"></ion-icon>
-        {{translationMap.get('LABEL_EMAIL')}}
-      </ion-button>
+    <div>
+      <!-- CHAT-OPTION -->
+      <div class="section-option" id="chat"  tooltip="{{translationMap?.get('LABEL_CHAT')}}" placement="top">
+        <ion-button fill="clear" (click)="onOpenSection('chat')" [class.active]="section==='chat'">
+          <ion-icon name="chatbubbles"></ion-icon>
+          {{translationMap.get('LABEL_CHAT')}}
+        </ion-button>
+      </div>
+      <!-- EMAIL-OPTION -->
+      <div *ngIf="emailSection" class="section-option" id="email"  tooltip="{{translationMap?.get('EMAIL.LABEL_TOOLTIP')}}" placement="top">
+        <ion-button fill="clear" [class.active]="section==='email'" (click)="onOpenSection('email')" [disabled]="channelType === 'direct' || channel == CHANNEL_TYPE.WHATSAPP || channel == CHANNEL_TYPE.MESSENGER">
+          <ion-icon name="mail-open"></ion-icon>
+          {{translationMap.get('LABEL_EMAIL')}}
+        </ion-button>
+      </div>
+      <!-- WHATSAPP TEMPLATE -->
+      <div *ngIf="whatsappTemplatesSection" class="section-option" id="template" tooltip="{{translationMap?.get('WHATSAPP.LABEL_TOOLTIP')}}" placement="top">
+        <ion-button fill="clear" [class.active]="section==='templates'" (click)="onOpenSection('templates');onOpenTemplateModal()" [disabled]="channel !== CHANNEL_TYPE.WHATSAPP">
+          <ion-icon name="logo-whatsapp"></ion-icon>
+          {{translationMap?.get('WHATSAPP.LABEL_TEMPLATES')}}
+        </ion-button>
+      </div>
+      
+      <div *ngIf="offlineMsgEmail && section==='chat' && channel !== CHANNEL_TYPE.WHATSAPP && messageString && (leadInfo?.presence['status']==='offline' && leadInfo?.hasEmail)" class="section-option offline-lead-tip" >
+        {{translationMap.get('EMAIL.EMAIL_OFFLINE_TIP')}}
+      </div>
     </div>
 
-    <div *ngIf="whatsappTemplatesSection" class="section-option" id="template" tooltip="{{translationMap?.get('WHATSAPP.LABEL_TOOLTIP')}}" placement="top">
-      <ion-button fill="clear" [class.active]="section==='templates'" (click)="onOpenSection('templates');onOpenTemplateModal()" [disabled]="channel !== CHANNEL_TYPE.WHATSAPP">
-        <ion-icon name="logo-whatsapp"></ion-icon>
-        {{translationMap?.get('WHATSAPP.LABEL_TEMPLATES')}}
-      </ion-button>
-    </div>
-    
-    <div *ngIf="offlineMsgEmail && section==='chat' && channel !== CHANNEL_TYPE.WHATSAPP && messageString && (leadInfo?.presence['status']==='offline' && leadInfo?.hasEmail)" class="section-option offline-lead-tip" >
-      {{translationMap.get('EMAIL.EMAIL_OFFLINE_TIP')}}
+    <div>
+      <!-- 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-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
+          {{translationMap?.get('COPILOT.ASK_AI')}}
+        </ion-button>
+      </div>
     </div>
 
   </div>
@@ -35,7 +47,7 @@
     </ion-col>
   </ion-row>
 
-  <ion-row id="message-text-area" [style.display]="section==='chat' || section ==='templates'? 'flex': 'none'">
+  <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

@@ -5,6 +5,12 @@
     padding: 0px 16px 0px;
     border-bottom: 1px solid var(--border-color-base);
     border-top: 3px solid var(--basic-blue);
+    justify-content: space-between;
+
+    & > div{
+        display: flex;
+        align-items: center;
+    }
 
     .section-option{
         line-height: 16px;
@@ -26,6 +32,7 @@
             height: 25px;
             &.active{
                 color: var(--basic-blue);
+                fill: var(--basic-blue);
             }
             ion-icon{
                 margin-right: 4px;
@@ -35,7 +42,7 @@
     }
 
     .offline-lead-tip{
-        font-size: 12px;
+        font-size: 9px;
         width: 100%;
         display: block;
         text-align: right;

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

@@ -22,6 +22,8 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { EventsService } from 'src/app/services/events-service';
 import { isOnMobileDevice } from 'src/chat21-core/utils/utils';
 import { checkAcceptedFile } from 'src/chat21-core/utils/utils';
+import { CopilotService } from 'src/app/services/copilot/copilot.service';
+import { BRAND_BASE_INFO } from 'src/app/utils/utils-resources';
 
 
 @Component({
@@ -49,7 +51,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() channelType: string;
   @Input() channel: string;
   @Input() tagsCannedFilter: any;
-  @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
   @Input() leadInfo: {lead_id: string, hasEmail: boolean, email: string, projectId: string, presence: {}};
@@ -106,6 +107,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/FAQ-Chatbot.png',
     }
   ];
+
+  BRAND_BASE_INFO = BRAND_BASE_INFO
+  
   /**
    * Constructor
    * @param chooser 
@@ -118,7 +122,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     public modalController: ModalController,
     public uploadService: UploadService,
     public toastController: ToastController,
-    private renderer: Renderer2,
     public eventsService: EventsService
   ) { }
 

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

@@ -0,0 +1,41 @@
+<div>
+  <div class="canned-list" *ngIf="suggestions.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 suggestion of suggestions; let i = index;"
+      (click)="onClickSuggestionFN(suggestion, $event)">
+      <div class="cannedContent">
+        <!-- <ion-input [class.readonly]="suggestion?.disabled" [readonly]="suggestion?.disabled" type="text" [(ngModel)]="suggestion.title" class="title" id="{{'titleCanned_'+suggestion._id}}" #title></ion-input> -->
+        <!-- <ion-input [class.readonly]="suggestion?.disabled" [readonly]="suggestion?.disabled" type="text" [(ngModel)]="suggestion.text"  class="text"></ion-input> -->
+        <ion-label [class.readonly]="suggestion?.disabled" class="title" id="{{'titleCanned_'+suggestion._id}}" #title >{{suggestion?.title}}</ion-label>
+        <ion-label [class.readonly]="suggestion?.disabled" class="text">{{suggestion?.text}}</ion-label>
+      </div>
+    </ion-item>
+    <!-- <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
+      <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
+      <span class="add-canned-response-add-icon">+</span>
+     <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
+    </ion-item> -->
+  </div>
+  <!-- LOADER -->
+  <div class="loader" *ngIf="showLoading">
+    <div class="box">
+      <!-- <div class="container">
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+        <span class="circle" [ngStyle]="{'background-color': stylesMap?.get('themeColor')}"></span>
+      </div> -->
+      <div class="spinner" [ngStyle]="{'border-top-color': stylesMap?.get('themeColor')}"></div>
+      <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
+    </div>
+  </div>
+  <div class="no-data" *ngIf="suggestions.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('COPILOT.NO_SUGGESTIONS_PRESENT')}}</ion-label>
+      </ion-item>
+    </div>
+  </div>
+</div>

package/src/app/components/copilot-suggestions/copilot-suggestions.component.scss

@@ -0,0 +1,232 @@
+.canned-list {
+    // position: absolute;
+    // bottom: 0;
+    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;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: #f9f9f9;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #b9b9b9;
+        border-radius: 0px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #727272;
+    }
+
+    .cannedContent{
+        width: 100%;
+    }
+
+    
+    ion-label{
+        white-space: pre-wrap; 
+        word-wrap: break-word;
+
+        --padding-bottom: 0px;
+        --padding-top: 0px;
+        &.text{
+            font-style: italic;
+            margin-top: 2px;
+        }
+        &.title {
+            font-weight: 500;
+        }
+
+        &.readonly{
+            cursor: pointer;
+            pointer-events: none;
+        }
+    }
+    // .native-input[disabled] {
+    //     opacity: 10 !important;
+    //     cursor: pointer;
+    // }
+    // .native-textarea[disabled] {
+    //     opacity: 10 !important;
+    //     cursor: pointer;
+    // }
+    ion-icon {
+        zoom: 0.7;
+        color: var(--icon-color);
+
+        &:hover{
+            opacity: 0.8;
+        }
+    }
+    .no-ripple {
+        --ripple-color: transparent;
+        --background-activated: transparent;
+        --background: transparent;
+    }
+
+    .border{
+        border-bottom: 1px dashed rgb(211, 219, 229) !important;
+        margin: 0px 4px
+    }
+
+
+}
+
+.canned-item {
+    -webkit-tap-highlight-color: transparent;
+    font-family: Lato, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    list-style: none;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // margin: 0 10px;
+    position: relative;
+    outline: none;
+    color: #434a54;
+    // padding: 10px;
+    padding: 5px;
+    width: auto;
+    cursor: pointer;
+    // .item-inner{
+    //     border: none!important;
+    // }
+}
+
+ion-item {
+    --background-hover: var(--canned-hover-background) !important;
+    --color-hover: var(--canned-hover-color);
+    --background: transparent;
+    .nocannedTitle {
+        color: #f44336;
+    }
+    .no-canned-available-text {
+        color: #1877f2 !important;
+    }
+    .no-canned-available-text:hover {
+        text-decoration: underline;
+    }
+}
+
+.loader {
+    height: 310px;
+
+    .box{
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+    }
+
+    .container{
+        height: 15px;
+        width: 105px;
+        display: flex;
+        position: relative;
+
+        .circle{
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background-color: var(--basic-blue);
+            animation: move 500ms linear 0ms infinite;
+            margin-right: 30px;
+            
+            &:first-child{
+            position: absolute;
+            top:0;
+            left:0;
+            animation: grow 500ms linear 0ms infinite;
+            }
+            
+            &:last-child{
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin-right: 0;
+            animation: grow 500ms linear 0s infinite reverse;
+            }
+        }
+
+    }
+
+    .spinner {
+        margin: auto;
+        border: 8px solid #EAF0F6;
+        border-radius: 50%;
+        border-top: 8px solid var(--basic-blue);
+        width: 50px;
+        height: 50px;
+        animation: spinner 1s linear infinite;
+    }
+    
+    @keyframes spinner {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .label{
+        text-align: center;
+        margin-top: 10px;
+        animation: blinker 1s linear infinite;
+    }
+      
+    @keyframes grow {
+        from {transform: scale(0,0); opacity: 0;}
+        to {transform: scale(1,1); opacity: 1;}
+    }
+    
+    @keyframes move {
+        from {transform: translateX(0px)}
+        to {transform: translateX(45px)}
+    }
+
+    @keyframes blinker {
+        50% {
+          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/copilot-suggestions/copilot-suggestions.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CopilotSuggestionsComponent } from './copilot-suggestions.component';
+
+describe('CopilotSuggestionsComponent', () => {
+  let component: CopilotSuggestionsComponent;
+  let fixture: ComponentFixture<CopilotSuggestionsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CopilotSuggestionsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CopilotSuggestionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/copilot-suggestions/copilot-suggestions.component.ts

@@ -0,0 +1,163 @@
+import { filter } from 'rxjs/operators';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, SimpleChange } from '@angular/core';
+import { CopilotService } from 'src/app/services/copilot/copilot.service';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { UserModel } from 'src/chat21-core/models/user';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils';
+
+@Component({
+  selector: 'copilot-suggestions',
+  templateUrl: './copilot-suggestions.component.html',
+  styleUrls: ['./copilot-suggestions.component.scss'],
+})
+export class CopilotSuggestionsComponent implements OnInit {
+
+   // @Input() tagsCannedFilter: any = []
+  @Input() conversationWith: string;
+  @Input() conversationWithFullname: string;
+  @Input() currentString: string;
+  @Input() stylesMap: Map<string, string>;
+  @Input() translationMap: Map<string, string>;
+  @Output() onLoadedSuggestions = new EventEmitter<[any]>();
+  @Output() onClickSuggestion = new EventEmitter<any>();
+
+  public loggedUser: UserModel
+  public projectID: string;
+
+  public suggestions: any = []
+  public showLoading: boolean = false
+
+  public arrowkeyLocation = -1
+
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  constructor(
+    public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService,
+    public copilotService: CopilotService,
+    public el: ElementRef
+  ) { }
+
+  ngOnInit() {
+    this.loggedUser = this.tiledeskAuthService.getCurrentUser()
+  }
+
+  ngOnChanges(changes: SimpleChange){
+      this.logger.debug('[COPILOT] - loadTagsCanned strSearch ', this.currentString)
+      if(changes && changes['conversationWith'] && (changes['conversationWith'].previousValue !== changes['conversationWith'].currentValue)){
+        this.projectID = getProjectIdSelectedConversation(this.conversationWith)
+      }
+      this.loadSuggestions(this.conversationWith)
+  }
+
+
+  // ----------------------------------------------------------
+  // @ CANNED RESPONSES methods
+  // ----------------------------------------------------------
+  loadSuggestions(conversationWith) {
+    this.logger.log('[COPILOT] - loadTagsCanned conversationWith ', conversationWith)
+
+    if (this.projectID) {
+      this.logger.log('[COPILOT] - loadTagsCanned projectId ', this.projectID)
+      this.getAndShowSuggestions(this.projectID)
+    } else {
+      this.getProjectIdByConversationWith(this.conversationWith)
+    }
+  }
+
+  getProjectIdByConversationWith(conversationWith: string) {
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+
+    this.tiledeskService.getProjectIdByConvRecipient(tiledeskToken, conversationWith).subscribe((res) => {
+      this.logger.log('[COPILOT] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT RES', res)
+      if (res) {
+        const projectId = res.id_project
+        this.logger.log('[COPILOT] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT projectId ', projectId)
+        if (projectId) {
+          this.getAndShowSuggestions(projectId)
+        }
+      }
+    }, (error) => {
+      this.logger.error('[COPILOT] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error)
+    }, () => {
+      this.logger.log('[COPILOT] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT * COMPLETE *')
+    })
+  }
+
+
+  getAndShowSuggestions(projectId) {
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[COPILOT] - loadTagsCanned tagsCanned.length', this.suggestions.length)
+    //if(this.tagsCanned.length <= 0 ){
+    this.suggestions = []
+    this.showLoading = true;
+    this.copilotService.getAll(tiledeskToken, projectId, this.conversationWith).subscribe((res) => {
+      this.logger.log('[COPILOT] - loadTagsCanned  getCannedResponses RES', res)
+      this.suggestions = res.map(el => ({ ...el, disabled : true }))
+      this.logger.log('[COPILOT] - loadTagsCanned  getCannedResponses tagsCannedCount', this.suggestions)
+    }, (error) => {
+      this.logger.error('[COPILOT] - loadTagsCanned  getCannedResponses - ERROR  ', error)
+    }, () => {
+      this.logger.log('[COPILOT] - loadTagsCanned  getCannedResponses * COMPLETE *')
+      this.showLoading = false
+      this.onLoadedSuggestions.emit(this.suggestions)
+    })
+  }
+
+
+  onClickSuggestionFN(suggestion, event){
+    if(!suggestion.disabled){
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      this.logger.log('[CANNED] THERE IS NOT CANNED ', suggestion.text)
+      this.onClickSuggestion.emit(suggestion)
+    }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    // this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event);
+
+    if (this.suggestions.length > 0) {
+      if (event.key === 'ArrowDown') {
+        this.arrowkeyLocation++
+        if (this.arrowkeyLocation === this.suggestions.length) {
+          this.arrowkeyLocation--
+        }
+        // this.replaceTagInMessage(this.tagsCannedFilter[this.arrowkeyLocation])
+      } else if (event.key === 'ArrowUp') {
+        if (this.arrowkeyLocation > 0) {
+          this.arrowkeyLocation--
+        } else if (this.arrowkeyLocation < 0) {
+          this.arrowkeyLocation++
+        }
+        // this.replaceTagInMessage(this.tagsCannedFilter[this.arrowkeyLocation])
+      }
+
+      // set the focus on current canned 
+      setTimeout(() => {
+        this.el.nativeElement.querySelector('.canned-list').scrollTop = this.arrowkeyLocation * 59 // 59px is the height of the single element
+        // this.el.nativeElement.querySelector('#canned-item_'+this.arrowkeyLocation).scrollIntoView({ behavior: 'smooth' })
+      }, 0);
+
+      if (event.key === 'Enter') {
+        const canned_selected = this.suggestions[this.arrowkeyLocation]
+        this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned_selected ',canned_selected)
+        if (canned_selected) {
+          this.arrowkeyLocation = -1
+          this.onClickSuggestion.emit(canned_selected)
+          // event.preventDefault();
+          // return false;
+        }
+      }
+    }
+  }
+
+
+
+
+}

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -43,6 +43,7 @@ import { ReturnReceiptComponent } from 'src/app/chatlib/conversation-detail/mess
 import { OptionsComponent } from 'src/app/chatlib/conversation-detail/message/options/options.component';
 import { UserTypingComponent } from 'src/chat21-core/utils/user-typing/user-typing.component';
 import { AvatarProfileComponent } from 'src/app/components/utils/avatar-profile/avatar-profile.component';
+import { CopilotSuggestionsComponent } from 'src/app/components/copilot-suggestions/copilot-suggestions.component';
 
 
 @NgModule({
@@ -93,6 +94,7 @@ import { AvatarProfileComponent } from 'src/app/components/utils/avatar-profile/
     // --------- footer --------- //
     MessageTextAreaComponent,
     CannedResponseComponent,
+    CopilotSuggestionsComponent,
 
 
     TruncatePipe

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -61,7 +61,7 @@
               here is ignored
             </span>
 
-            <div class="overlay" *ngIf="!HIDE_CANNED_RESPONSES"></div>
+            <div class="overlay" *ngIf="SHOW_CANNED_RESPONSES || SHOW_COPILOT_SUGGESTIONS" (click)="this.SHOW_COPILOT_SUGGESTIONS=!this.SHOW_COPILOT_SUGGESTIONS; this.SHOW_CANNED_RESPONSES = !this.SHOW_CANNED_RESPONSES"></div>
 
             <ng-template #content_welcome>
               <!-- <div class="messageFirst">
@@ -168,7 +168,7 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-            <app-canned-response *ngIf="HIDE_CANNED_RESPONSES === false"
+            <app-canned-response *ngIf="SHOW_CANNED_RESPONSES"
               id="canned"
               [canShowCanned]="canShowCanned"
               [conversationWith]="conversationWith"
@@ -180,47 +180,19 @@
               (onClickCanned)="replaceTagInMessage($event)"
               (onClickAddCannedResponse)="presentCreateCannedResponseModal()">
             </app-canned-response>
-            
-            
-            <!-- <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
-              <div class="header">
-                  <ion-item lines="none"> <ion-icon class="canned-response-icon-header"  name="flash-outline"></ion-icon> Canned responses</ion-item>
-                  <ion-item lines="none" (click)="presentCreateCannedResponseModal()">
-                    <ion-icon class="canned-response-icon-header" name="add" slot="start"></ion-icon>
-                     New response
-                  </ion-item>
-                  <ion-item lines="none" (click)="closeListCannedResponse()"> <ion-icon class="canned-response-icon-header" name="close" ></ion-icon></ion-item>
-              </div>
-              <ion-list class="canned-list" >
-                <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)="replaceTagInMessage(canned, $event)">
-                  <div class="cannedContent">
-                    <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [disabled]="canned.disabled"></ion-input>
-                    <ion-input [(ngModel)]="canned.text" class="text" [disabled]="canned.disabled"></ion-input>
-                  </div>
-                  <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-sharp" 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)="presentCreateCannedResponseModal()">
-                  <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> 
-                </ion-item>
-              </ion-list>
-              <!- - <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
-                <ion-item button="true" >
-                  There are no canned responses available
-                </ion-item>
-              </ion-list> - ->
-            </div> -->
-
-
-
 
+            <copilot-suggestions *ngIf="SHOW_COPILOT_SUGGESTIONS"
+              id="copilot"
+              [conversationWith]="conversationWith"
+              [conversationWithFullname]="conversationWithFullname"
+              [currentString]="messageStr"
+              [stylesMap]="styleMap"
+              [translationMap]="translationsMap"
+              (onLoadedSuggestions)="onLoadedSuggestions($event)"
+              (onClickSuggestion)="replaceSuggestionInMessage($event)">
+            </copilot-suggestions>
+            
+          
             <!-- (eventReplaceMessageWithCanned)="replaceTagInMessage($event)" -->
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
@@ -230,7 +202,6 @@
               [channelType]="channelType"
               [channel]="conversation?.attributes?.request_channel"
               [tagsCannedFilter]="tagsCannedFilter"
-              [tagsCannedCount]="tagsCannedCount" 
               [areVisibleCAR]="areVisibleCAR" 
               [supportMode]="supportMode"
               [leadInfo]="leadInfo"

package/src/app/pages/conversation-detail/conversation-detail.page.scss

@@ -152,7 +152,8 @@ ion-content {
         }
     }
 
-    #canned {
+    #canned,
+    #copilot {
         z-index: 99999;
         width: 100%;
         // background: rgba(237,240,244,.9);

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -6,24 +6,15 @@ import {
   AfterViewInit,
   ViewChild,
   ElementRef,
-  Directive,
   HostListener,
-  ChangeDetectorRef,
-  Renderer2,
-  isDevMode
 } from '@angular/core'
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
 import {
   ModalController,
   ToastController,
-  PopoverController,
   Platform,
   ActionSheetController,
-  NavController,
   IonContent,
-  IonTextarea,
-  IonButton,
-  IonInput,
 } from '@ionic/angular'
 
 // models
@@ -56,7 +47,6 @@ import {
   MESSAGE_TYPE_INFO,
   MESSAGE_TYPE_MINE,
   MESSAGE_TYPE_OTHERS,
-  URL_SOUND_LIST_CONVERSATION,
   TYPE_DIRECT,
   TYPE_MSG_EMAIL,
   TYPE_MSG_FORM,
@@ -88,12 +78,9 @@ import { takeUntil } from 'rxjs/operators'
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service'
 import { NetworkService } from '../../services/network-service/network.service'
 import { EventsService } from '../../services/events-service'
-import { ScrollbarThemeDirective } from 'src/app/utils/scrollbar-theme.directive'
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { Project } from 'src/chat21-core/models/projects';
-import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { Globals } from 'src/app/utils/globals';
-import { TriggerEvents } from 'src/app/services/triggerEvents/triggerEvents';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -145,10 +132,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   public messageStr: string;
   public tagsCannedFilter: Array<any> = [];
-  public tagsCannedCount: number;
-  public HIDE_CANNED_RESPONSES: boolean = true
+  public SHOW_CANNED_RESPONSES: boolean = false
   public canShowCanned: boolean = true
 
+  public SHOW_COPILOT_SUGGESTIONS: boolean = false;
+
   public window: any = window
   public styleMap: Map<string, string> = new Map()
 
@@ -695,7 +683,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       "WHATSAPP.LABEL_TOOLTIP",
       "WHATSAPP.SELECT_MESSAGE_TEMPLATE",
       "WHATSAPP.ERROR_WHATSAPP_NOT_INSTALLED",
-      "WHATSAPP.ERROR_WHATSAPP_GENERIC_ERROR"
+      "WHATSAPP.ERROR_WHATSAPP_GENERIC_ERROR",
+
+      "COPILOT.ASK_AI",
+      "COPILOT.NO_SUGGESTIONS_PRESENT"
 
     ]
 
@@ -1501,7 +1492,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
             if (pos === -1) {
               // this.tagsCannedFilter = []
-              this.HIDE_CANNED_RESPONSES = true
+              this.SHOW_CANNED_RESPONSES = false
             }
             // test
             // var rest = message.substring(0, message.lastIndexOf("/") + 1);
@@ -1530,12 +1521,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
               var after_slash = message.substring(message.lastIndexOf('/') + 1, message.length)
               if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
-                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ')
-                this.HIDE_CANNED_RESPONSES = true
+                this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
+                this.SHOW_CANNED_RESPONSES = false
                 // this.tagsCannedFilter = []
               } else if (pos === 0 && after_slash.length === 0) {
                 this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after')
-                this.HIDE_CANNED_RESPONSES = false
+                this.SHOW_CANNED_RESPONSES = true
               }
 
               if (pos > 0) {
@@ -1552,11 +1543,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                 this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash)
 
                 if (beforeSlash[beforeSlash.length - 1].indexOf(' ') >= 0 && afterSlash === '') {
-                  this.HIDE_CANNED_RESPONSES = false
+                  this.SHOW_CANNED_RESPONSES = true
                 } else if (beforeSlash[beforeSlash.length - 1].indexOf(' ') < 0 && afterSlash === '') {
-                  this.HIDE_CANNED_RESPONSES = true
+                  this.SHOW_CANNED_RESPONSES = false
                 } else if (beforeSlash[beforeSlash.length - 1].indexOf(' ') >= 0 && afterSlash === ' ') {
-                  this.HIDE_CANNED_RESPONSES = true
+                  this.SHOW_CANNED_RESPONSES = false
                   // this.tagsCannedFilter = []
                 }
               }
@@ -1592,7 +1583,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.logger.log('[CONVS-DETAIL] onLoadedCannedResponses --> ', event)
     if (event && event.length > 0) {
       this.tagsCannedFilter = event
-      this.tagsCannedCount = event.length
     }
   }
 
@@ -1628,13 +1618,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   }
 
-
-  closeListCannedResponse() {
-    this.logger.log('[CONVS-DETAIL] close list canned . . .  ')
-    this.HIDE_CANNED_RESPONSES = true
-    this.tagsCannedFilter = []
-  }
-
   async presentCreateCannedResponseModal(): Promise<any> {
     const elTextArea = this.rowTextArea['el']
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
@@ -1657,11 +1640,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   onClickOpenCannedResponses($event) {
     this.logger.log('[CONVS-DETAIL] - onClickOpenCannedResponses ', $event)
-    this.HIDE_CANNED_RESPONSES = !this.HIDE_CANNED_RESPONSES
+    this.SHOW_CANNED_RESPONSES = !this.SHOW_CANNED_RESPONSES
 
     //HIDE_CANNED_RESPONSES: true --> not show CANNED component
     //HIDE_CANNED_RESPONSES: false --> show CANNED component and place '/' char in textarea
-    if (!this.HIDE_CANNED_RESPONSES) {
+    if (this.SHOW_CANNED_RESPONSES) {
       const elTextArea = this.rowTextArea['el']
       const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
       if (elTextArea) {
@@ -1676,6 +1659,39 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+
+  /** COPILOT SUGGGESTIONS : start */
+  onLoadedSuggestions(event){
+    this.logger.log('[CONVS-DETAIL] onLoadedSuggestions --> ', event)
+  }
+
+  replaceSuggestionInMessage(suggestion, event?) {
+    const elTextArea = this.rowTextArea['el']
+    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0] as HTMLInputElement;
+
+    this.logger.log('[CONVS-DETAIL] replaceSuggestionInMessage  canned text ', suggestion.text)
+
+    // replace text
+    var strTEMP = textArea.value + suggestion.text
+    strTEMP = this.replacePlaceholderInCanned(strTEMP)
+    this.logger.log('[CONVS-DETAIL] replaceSuggestionInMessage strSearch ', strTEMP)
+    // strTEMP = this.replacePlaceholderInCanned(strTEMP);
+    // textArea.value = '';
+    // that.messageString = strTEMP;
+    textArea.value = strTEMP
+    this.insertAtCursor(textArea, '')
+    this.setCaretPosition(textArea)
+    // setTimeout(() => {
+    //   // textArea.focus();
+    //   textArea.setFocus()
+    //   // this.resizeTextArea()
+    // }, 200)
+    this.SHOW_COPILOT_SUGGESTIONS = !this.SHOW_COPILOT_SUGGESTIONS
+
+  }
+  /** COPILOT SUGGGESTIONS : end */
+
+
   setCaretPosition(ctrl) {
     ctrl.value.trim()
     ctrl.setFocus()
@@ -1868,6 +1884,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     if (event === 'email' || event === 'templates') {
       this.getLeadDetail()
     }
+    if(event === 'copilot'){
+      this.SHOW_COPILOT_SUGGESTIONS = !this.SHOW_COPILOT_SUGGESTIONS
+    }
   }
 
   // -------------- START SCROLL/RESIZE  -------------- //

package/src/app/services/copilot/copilot.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CopilotService } from './copilot.service';
+
+describe('CopilotService', () => {
+  let service: CopilotService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CopilotService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/services/copilot/copilot.service.ts

@@ -0,0 +1,44 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { AppConfigProvider } from '../app-config';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { map, filter } from 'rxjs/operators';
+import * as uuid from 'uuid';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CopilotService {
+
+  private apiUrl: string;
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    public http: HttpClient,
+    public appConfigProvider: AppConfigProvider
+  ) {
+    this.logger.log('[COPILOT-SERVICE] HELLO !');
+    this.apiUrl = appConfigProvider.getConfig().apiUrl;
+    this.logger.log('[COPILOT-SERVICE] apiUrl ', this.apiUrl);
+  }
+
+  public getAll(token: string, projectid: string, conversWith: string) {
+      const cannedResponsesURL = this.apiUrl + projectid + "/copilot?request_id=" + conversWith;
+      this.logger.log('[COPILOT-SERVICE] getAllSuggestions - URL ', cannedResponsesURL);
+  
+      const httpOptions = {
+        headers: new HttpHeaders({
+          'Content-Type': 'application/json',
+          Authorization: token
+        })
+      };
+      
+      return this.http.get(cannedResponsesURL, httpOptions).pipe(map((res: [any]) => {
+          let suggestions = res.filter(el => el !== null).map(el => ({ ...el, _id:  uuid.v4()} ));
+          this.logger.log('[COPILOT-SERVICE] getCannedResponses - RES ', suggestions);
+          return suggestions
+      }))
+    }
+    
+}

package/src/assets/i18n/en.json

@@ -304,5 +304,9 @@
     "SEND_EMAIL_ERROR":"⚠️ ATTENTION ⚠️ Error occurred while sending email. Please retry again",
     "SUBJECT_OFFLINE_MESSAGE":"Tiledesk Offline message  💬",
     "SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE":"Message also sent by email 📩"
+  },
+  "COPILOT": {
+    "ASK_AI":"Ask to AI",
+    "NO_SUGGESTIONS_PRESENT":"No suggestions found"
   }
 }

package/src/assets/i18n/it.json

@@ -304,5 +304,9 @@
         "SEND_EMAIL_ERROR":"⚠️ ATTENZIONE ⚠️Si è verificato un errore durante l'invio dell'email. Si prega di riprovare",
         "SUBJECT_OFFLINE_MESSAGE":"Messaggio offline di Tiledesk 💬",
         "SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE":"Messaggio inviato anche via mail 📩"
-    }
+    },
+    "COPILOT": {
+        "ASK_AI":"Chiedi all'AI",
+        "NO_SUGGESTIONS_PRESENT":"Nessun suggerimento trovato"
+  }
 }

package/src/assets/images/icons/copilot.svg

@@ -0,0 +1,3 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" height="15"  width="15" fill="currentColor">
+  <path d="M8.4,2.8l-.9-2.5-.9,2.5c-.6,1.7-2,3.1-3.7,3.7l-2.5.9,2.5.9c1.7.6,3.1,2,3.7,3.7l.9,2.5.9-2.5c.6-1.7,2-3.1,3.7-3.7l2.5-.9-2.5-.9c-1.7-.6-3.1-2-3.7-3.7Z"/>
+</svg>