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

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 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
 

package/package.json

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

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

@@ -28,7 +28,7 @@ export class CopilotSuggestionsComponent implements OnInit {
   public projectID: string;
 
   public suggestions: any = []
-  public suggestionsCount: number
+  public showLoading: boolean = false
 
   public arrowkeyLocation = -1
 
@@ -93,15 +93,16 @@ export class CopilotSuggestionsComponent implements OnInit {
     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.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.showLoading = false
       this.onLoadedSuggestions.emit(this.suggestions)
     })
   }
@@ -111,10 +112,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.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=!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"
@@ -192,46 +192,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 +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.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;
@@ -686,7 +685,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 +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);
@@ -1521,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) {
@@ -1543,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 = []
                 }
               }
@@ -1583,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
     }
   }
 
@@ -1619,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]
@@ -1648,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) {
@@ -1671,30 +1663,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;

package/src/assets/i18n/en.json

@@ -306,6 +306,7 @@
     "SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE":"Message also sent by email 📩"
   },
   "COPILOT": {
-    "ASK_AI":"Ask to AI"
+    "ASK_AI":"Ask to AI",
+    "NO_SUGGESTIONS_PRESENT":"No suggestions found"
   }
 }

package/src/assets/i18n/it.json

@@ -306,6 +306,7 @@
         "SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE":"Messaggio inviato anche via mail 📩"
     },
     "COPILOT": {
-        "ASK_AI":"Chiedi all'AI"
+        "ASK_AI":"Chiedi all'AI",
+        "NO_SUGGESTIONS_PRESENT":"Nessun suggerimento trovato"
   }
 }