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

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # chat21-ionic ver 3.0
 
+### 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-rc3",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -132,7 +132,7 @@
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
-          (onOptionsMessage)="onClickOptionsMessage($event)">
+          (onOptionsDataReturned)="onClickBubbleOptions($event)">
         </chat-bubble-message>
       </div>
 
@@ -177,7 +177,7 @@
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
-          (onOptionsMessage)="onClickOptionsMessage($event)">
+          (onOptionsDataReturned)="onClickBubbleOptions($event)">
         </chat-bubble-message>
 
       </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',
@@ -73,7 +73,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 +155,20 @@ 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'){
+      console.log('hereeeeeee', event)
+      this.eventService.publish('copilot:new_question', {text: event.data.text})
+
     }
   }
 

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

@@ -12,7 +12,7 @@
   <chat-options
     [message]="message"
     [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

@@ -29,7 +29,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @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 +54,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 +161,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 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',
@@ -14,7 +15,7 @@ export class OptionsComponent implements OnInit {
 
   @Input() message: MessageModel;
   @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 +23,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 +53,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
 
@@ -123,17 +124,21 @@ export class CannedResponseComponent implements OnInit {
     this.logger.log('[CANNED] - loadTagsCanned tagsCanned.length', this.tagsCanned.length)
     //if(this.tagsCanned.length <= 0 ){
     this.tagsCanned = []
+    this.showLoading = true;
     this.cannedResponsesService.getAll(tiledeskToken, 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 +168,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

@@ -31,7 +31,7 @@
     <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-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/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>

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

@@ -0,0 +1,101 @@
+#copilot-container{
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+
+    ion-header{
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        .main-title{
+            background: linear-gradient(135deg, #217bfe 0, #078efb 33%, #ac87eb 100%);
+            background-clip: text;
+            inline-size: fit-content;
+            color: transparent;
+            font-weight: 500;
+        }
+
+        .title{
+            font-weight: 500;
+        }
+    }
+
+    ion-content{
+
+
+        .content-container{
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+
+
+        .text-message {
+            position: relative;
+            // margin: 0 35px;
+            // width: calc(100% - 70px);
+            // ----- new after adding canned open /close canned responses
+            // margin: 0 70px;
+            // width: calc(100% - 100px);
+            // ----- new after adding emoji picker
+            // margin: 0 108px;
+            width: 100%; //calc(100% - 140px);
+            ion-textarea {
+                // border-radius: 4px;
+                border-radius: 20px; // NK edited
+                padding: 0;
+                margin: 0;
+                height: auto;
+                overflow: auto;
+                // min-height: 30px;
+                min-height: 74px; // NK edited
+                max-height: 184px;
+                background-color: var(--textarea-background);
+                color: var(--textarea-color);
+                --placeholder-color: var(--textarea-placeholder-color);
+                // --padding-top: 5px; // NK edited
+                --padding-top: 8px;
+                --padding-bottom: 5px;
+                --padding-end: 5px;
+                // --padding-start: 5px; // NK edited
+                --padding-start: 10px;
+                line-height: 1.34;
+                font-size: 13px;
+            }
+        }
+    }
+
+
+    ion-footer{
+        display: flex;
+        justify-content: center;
+
+        ion-button{
+            background-color: var(--icon-color);
+            color: var(--bacis-white);
+            font-size: 11px;
+            margin: 2px;
+            padding-bottom: 0px;
+            --padding-start: 0px;
+            --ripple-color: transparent;
+            text-transform: unset;
+            height: 25px;
+            border-radius: 4px;
+            &.active{
+                color: var(--basic-blue);
+                fill: var(--basic-blue);
+            }
+            ion-icon{
+                margin-right: 4px;
+                margin-left: 4px;
+            }
+        }
+    }
+
+
+}

package/src/app/components/copilot-popover/copilot-popover.component.spec.ts

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

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

@@ -0,0 +1,81 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+import { MessageModel } from 'src/chat21-core/models/message';
+import { UserModel } from 'src/chat21-core/models/user';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+
+@Component({
+  selector: 'app-copilot-popover',
+  templateUrl: './copilot-popover.component.html',
+  styleUrls: ['./copilot-popover.component.scss'],
+})
+export class CopilotPopoverComponent implements OnInit {
+
+  @Input() message: MessageModel
+  
+  text: string;
+  loggedUser: UserModel
+
+  public translationsMap: Map<string, string>;
+  private logger: LoggerService = LoggerInstance.getInstance()
+
+  constructor(
+    private ctr: PopoverController,
+    private tiledeskAuthService: TiledeskAuthService,
+    private customTranslateService: CustomTranslateService,
+  ) { }
+
+  ngOnInit() {
+    this.logger.debug('[COPILOT-POPOVER] ngOnInit message data:', this.message)
+    this.loggedUser = this.tiledeskAuthService.getCurrentUser();
+    this.text = this.message.text
+    this.initTranslations();
+  }
+
+  onClose(){
+    this.ctr.dismiss()
+  }
+
+  initTranslations(){
+    let keys= [
+      "HELLO",
+      "COPILOT.ASK_AI",
+      "COPILOT.INSERT_PROMPT_HERE",
+      "COPILOT.HOW_CAN_I_HELP_YOU"
+    ]
+    this.translationsMap = this.customTranslateService.translateLanguage(keys)
+  }
+
+  onClickCopilot(){
+    this.logger.debug('[COPILOT-POPOVER] onClickCopilot')
+    this.ctr.dismiss({text: this.text})
+  }
+
+
+  ionChange(e: any) {
+    this.logger.log("[COPILOT-POPOVER] ionChange event ", e);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ionChange detail.value ", e.detail.value);
+
+    const message = e.detail.value
+    this.logger.log("[COPILOT-POPOVER] [MSG-TEXT-AREA] ionChange message ", message);
+    // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange  this.messageString ", this.messageString);
+    const footerSelectionHeight = 33 
+    const height = e.target.offsetHeight + footerSelectionHeight + 20; // nk added +20
+
+    // this.eventChangeTextArea.emit({ msg: message, offsetHeight: height });
+  }
+
+  ionFocus(){
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ionFocus event ");
+  }
+
+  onKeydown(e: any, text: string) {
+    this.logger.log("[COPILOT-POPOVER] - returnChangeTextArea - onKeydown in MSG-TEXT-AREA event", e)
+    this.logger.log("[COPILOT-POPOVER] - returnChangeTextArea - onKeydown in MSG-TEXT-AREA text", text)
+  }
+
+
+}

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

@@ -16,6 +16,7 @@ import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils';
 export class CopilotSuggestionsComponent implements OnInit {
 
    // @Input() tagsCannedFilter: any = []
+  @Input() question: string;
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
@@ -94,17 +95,31 @@ export class CopilotSuggestionsComponent implements OnInit {
     //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)
-    })
+    if(this.question && this.question !== ''){
+      this.copilotService.getAllFromQuestion(this.question, 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)
+      })
+    } else {
+      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)
+      })
+    }
   }
 
 

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

@@ -44,6 +44,7 @@ import { OptionsComponent } from 'src/app/chatlib/conversation-detail/message/op
 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';
+import { CopilotPopoverComponent } from 'src/app/components/copilot-popover/copilot-popover.component';
 
 
 @NgModule({
@@ -66,7 +67,7 @@ import { CopilotSuggestionsComponent } from 'src/app/components/copilot-suggesti
     MomentModule
   ],
   // entryComponents: [MessageTextAreaComponent],
-  entryComponents: [ BubbleInfoPopoverComponent],
+  entryComponents: [ BubbleInfoPopoverComponent, CopilotPopoverComponent],
   declarations: [
     ConversationDetailPage,
     //******** COMPONENTS - init ********//
@@ -90,6 +91,7 @@ import { CopilotSuggestionsComponent } from 'src/app/components/copilot-suggesti
     ReturnReceiptComponent,
     OptionsComponent,
     BubbleInfoPopoverComponent,
+    CopilotPopoverComponent,
     UserTypingComponent,
     // --------- footer --------- //
     MessageTextAreaComponent,

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

@@ -61,7 +61,7 @@
               here is ignored
             </span>
 
-            <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>
+            <div class="overlay" *ngIf="SHOW_CANNED_RESPONSES || SHOW_COPILOT_SUGGESTIONS" (click)="this.SHOW_COPILOT_SUGGESTIONS=false; this.SHOW_CANNED_RESPONSES=false"></div>
 
             <ng-template #content_welcome>
               <!-- <div class="messageFirst">
@@ -183,6 +183,7 @@
 
             <copilot-suggestions *ngIf="SHOW_COPILOT_SUGGESTIONS"
               id="copilot"
+              [question]="copilotQuestion"
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"

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

@@ -162,6 +162,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   conversation: ConversationModel;
   USER_ROLE: string;
 
+  /**COPILOT : start */
+  copilotQuestion: string = '';
+  /**COPILOT : end */
+
   isMine = isMine
   isInfo = isInfo
   isFirstMessage = isFirstMessage
@@ -258,7 +262,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.getConversations();
     this.watchToConnectionStatus();
     this.getOSCODE();
-    this.getStoredProjectAndUserRole();
+    this.listenToEventServiceEvents();
     this.listenToDsbrdPostMsgs();
   }
 
@@ -297,7 +301,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
 
-  getStoredProjectAndUserRole() {
+  listenToEventServiceEvents() {
     this.events.subscribe('storage:last_project', project => {
       this.logger.log('[CONVS-DETAIL] stored_project ', project)
       if (project && project !== 'undefined') {
@@ -305,6 +309,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.logger.log('[CONVS-DETAIL]  USER_ROLE ', this.USER_ROLE)
       }
     });
+
+    this.events.subscribe('copilot:new_question', data => {
+      this.logger.log('[CONVS-DETAIL] copilot:new_question ', data)
+      if(data?.text){
+        this.copilotQuestion = data.text
+        this.SHOW_COPILOT_SUGGESTIONS = !this.SHOW_COPILOT_SUGGESTIONS
+      }
+    })
   }
 
   getConversations() {
@@ -1641,6 +1653,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   onClickOpenCannedResponses($event) {
     this.logger.log('[CONVS-DETAIL] - onClickOpenCannedResponses ', $event)
     this.SHOW_CANNED_RESPONSES = !this.SHOW_CANNED_RESPONSES
+    this.SHOW_COPILOT_SUGGESTIONS = false;
 
     //HIDE_CANNED_RESPONSES: true --> not show CANNED component
     //HIDE_CANNED_RESPONSES: false --> show CANNED component and place '/' char in textarea
@@ -1886,6 +1899,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
     if(event === 'copilot'){
       this.SHOW_COPILOT_SUGGESTIONS = !this.SHOW_COPILOT_SUGGESTIONS
+      this.SHOW_CANNED_RESPONSES = false
+      this.copilotQuestion = ''
     }
   }
 

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

@@ -24,8 +24,8 @@ export class CopilotService {
   }
 
   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 url = this.apiUrl + projectid + "/copilot?request_id=" + conversWith;
+      this.logger.log('[COPILOT-SERVICE] getAllSuggestions - URL ', url);
   
       const httpOptions = {
         headers: new HttpHeaders({
@@ -34,11 +34,34 @@ export class CopilotService {
         })
       };
       
-      return this.http.get(cannedResponsesURL, httpOptions).pipe(map((res: [any]) => {
+      return this.http.get(url, 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
       }))
-    }
+  }
+
+  public getAllFromQuestion(question: string, token: string, projectid: string, conversWith: string) {
+    const url = this.apiUrl + projectid + "/copilot?request_id=" + conversWith;
+    this.logger.log('[COPILOT-SERVICE] getAllSuggestions - URL ', url);
+
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: token
+      })
+    };
+
+    console.log('questionnnn', question)
+    const body = {
+      text: question
+    };
+    
+    return this.http.post(url, body, 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

@@ -305,8 +305,11 @@
     "SUBJECT_OFFLINE_MESSAGE":"Tiledesk Offline message  💬",
     "SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE":"Message also sent by email 📩"
   },
+  "HELLO":"Hello",
   "COPILOT": {
     "ASK_AI":"Ask to AI",
-    "NO_SUGGESTIONS_PRESENT":"No suggestions found"
+    "NO_SUGGESTIONS_PRESENT":"No suggestions found",
+    "INSERT_PROMPT_HERE":"Inster a prompt here",
+    "HOW_CAN_I_HELP_YOU":"How can i help you?"
   }
 }

package/src/assets/i18n/it.json

@@ -305,8 +305,11 @@
         "SUBJECT_OFFLINE_MESSAGE":"Messaggio offline di Tiledesk 💬",
         "SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE":"Messaggio inviato anche via mail 📩"
     },
+    "HELLO":"Ciao",
     "COPILOT": {
         "ASK_AI":"Chiedi all'AI",
-        "NO_SUGGESTIONS_PRESENT":"Nessun suggerimento trovato"
+        "NO_SUGGESTIONS_PRESENT":"Nessun suggerimento trovato",
+        "INSERT_PROMPT_HERE":"Inserisci un prompt qui",
+        "HOW_CAN_I_HELP_YOU":"Come posso aiutarti?"
   }
 }

package/src/global.scss

@@ -715,6 +715,12 @@ ul.dropdown-menu > li > a {
     }
 }
 
+.copilot-popover{
+    .popover-content{ 
+        width: 450px; 
+    }
+}
+
 
 //TOOLTIP
 .tooltip-container {

package/src/variables.scss

@@ -24,6 +24,7 @@ body {
     --icon-color: rgb(135, 150, 175);
     --basic-blue: #2a69c1;
     --basic-red: #EB1E23;
+    --bacis-white: #fff;
 
     // ***** Conversation-list: start ***** //
     --list-bkg-color: #f8fafc;