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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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
+
 ### 3.4.13-rc.1
 - added: copilot suggestions for agent responses
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.13-rc1",
+    "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

@@ -31,8 +31,8 @@ export class CannedResponseComponent implements OnInit {
   public projectID: string;
   
   public tagsCanned: any = []
-  public tagsCannedCount: number
   public tagsCannedFilter: any = []
+  public showLoading: boolean = false
 
   public arrowkeyLocation = -1
 
@@ -124,19 +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
-      this.tagsCannedCount = res.length
-      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses tagsCannedCount', this.tagsCannedCount)
       // 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);
     })
   }
 
@@ -166,32 +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: '',
-      }
-      // } 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) {
@@ -269,10 +248,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

@@ -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/conversation-detail/message-text-area/message-text-area.component.ts

@@ -51,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: {}};

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.html

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

@@ -202,4 +202,31 @@ 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/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;
@@ -28,7 +29,7 @@ export class CopilotSuggestionsComponent implements OnInit {
   public projectID: string;
 
   public suggestions: any = []
-  public suggestionsCount: number
+  public showLoading: boolean = false
 
   public arrowkeyLocation = -1
 
@@ -93,17 +94,32 @@ export class CopilotSuggestionsComponent implements OnInit {
     this.logger.log('[COPILOT] - loadTagsCanned tagsCanned.length', this.suggestions.length)
     //if(this.tagsCanned.length <= 0 ){
     this.suggestions = []
-    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.suggestionsCount = res.length
-      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.onLoadedSuggestions.emit(this.suggestions)
-    })
+    this.showLoading = true;
+    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)
+      })
+    }
   }
 
 
@@ -111,10 +127,9 @@ export class CopilotSuggestionsComponent implements OnInit {
     if(!suggestion.disabled){
       event.preventDefault();
       event.stopPropagation();
-    } else if(this.suggestionsCount > 0){
-      this.onClickSuggestion.emit(suggestion)
     } else {
       this.logger.log('[CANNED] THERE IS NOT CANNED ', suggestion.text)
+      this.onClickSuggestion.emit(suggestion)
     }
   }
 

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="!HIDE_CANNED_RESPONSES || SHOW_COPILOT_SUGGESTIONS"></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">
@@ -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"
@@ -183,6 +183,7 @@
 
             <copilot-suggestions *ngIf="SHOW_COPILOT_SUGGESTIONS"
               id="copilot"
+              [question]="copilotQuestion"
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"
@@ -192,46 +193,7 @@
               (onClickSuggestion)="replaceSuggestionInMessage($event)">
             </copilot-suggestions>
             
-            
-            <!-- <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> -->
-
-
-
-
+          
             <!-- (eventReplaceMessageWithCanned)="replaceTagInMessage($event)" -->
             <!-- [tagsCannedFilter]="tagsCannedFilter" -->
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
@@ -241,7 +203,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.ts

@@ -132,8 +132,7 @@ 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;
@@ -163,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
@@ -259,7 +262,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.getConversations();
     this.watchToConnectionStatus();
     this.getOSCODE();
-    this.getStoredProjectAndUserRole();
+    this.listenToEventServiceEvents();
     this.listenToDsbrdPostMsgs();
   }
 
@@ -298,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') {
@@ -306,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() {
@@ -686,7 +697,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       "WHATSAPP.ERROR_WHATSAPP_NOT_INSTALLED",
       "WHATSAPP.ERROR_WHATSAPP_GENERIC_ERROR",
 
-      "COPILOT.ASK_AI"
+      "COPILOT.ASK_AI",
+      "COPILOT.NO_SUGGESTIONS_PRESENT"
 
     ]
 
@@ -1492,7 +1504,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);
@@ -1521,12 +1533,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) {
@@ -1543,11 +1555,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 = []
                 }
               }
@@ -1583,7 +1595,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
     }
   }
 
@@ -1619,13 +1630,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]
@@ -1648,11 +1652,12 @@ 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
+    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
-    if (!this.HIDE_CANNED_RESPONSES) {
+    if (this.SHOW_CANNED_RESPONSES) {
       const elTextArea = this.rowTextArea['el']
       const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
       if (elTextArea) {
@@ -1671,30 +1676,18 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   /** COPILOT SUGGGESTIONS : start */
   onLoadedSuggestions(event){
     this.logger.log('[CONVS-DETAIL] onLoadedSuggestions --> ', event)
-    if (event && event.length > 0) {
-      // this.tagsCannedFilter = event
-      // this.tagsCannedCount = event.length
-    }
   }
 
   replaceSuggestionInMessage(suggestion, event?) {
     const elTextArea = this.rowTextArea['el']
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0] as HTMLInputElement;
-    // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea ', textArea)
-    // console.log('[CONVS-DETAIL] replaceTagInMessage  textArea value', textArea.value,)
 
-    // var lastChar =  textArea.value.substr(-1); // Selects the last character
-    // if (lastChar === '/') {
-    //   textArea.value = textArea.value.substring(0, textArea.value.length() - 1);
-    // }
-    // this.insertAtCursor(this.textArea, textArea.value)
-
-    this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned text ', suggestion.text)
+    this.logger.log('[CONVS-DETAIL] replaceSuggestionInMessage  canned text ', suggestion.text)
 
     // replace text
-    var strTEMP = textArea.value + ' ' +  suggestion.text
+    var strTEMP = textArea.value + suggestion.text
     strTEMP = this.replacePlaceholderInCanned(strTEMP)
-    this.logger.log('[CONVS-DETAIL] replaceTagInMessage strSearch ', strTEMP)
+    this.logger.log('[CONVS-DETAIL] replaceSuggestionInMessage strSearch ', strTEMP)
     // strTEMP = this.replacePlaceholderInCanned(strTEMP);
     // textArea.value = '';
     // that.messageString = strTEMP;
@@ -1906,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,7 +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"
+    "ASK_AI":"Ask to AI",
+    "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,7 +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"
+        "ASK_AI":"Chiedi all'AI",
+        "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;