@chat21/chat21-ionic 3.0.76-rc.3 → 3.0.76-rc.4

package/CHANGELOG.md

@@ -1,4 +1,10 @@
 # chat21-ionic ver 3.0
+ù
+### 3.0.76-rc.4
+- bug-fixed: if canned component is opened and press twice the canned icon, canned-component not opens
+- bug-fixed: bot images not resized
+- added: caching of canned responses per project
+- aded: loader in canned-component
 
 ### 3.0.76-rc.3
 - bug-fixed: image-preview when agent click on image, don't fit the screen size

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.76-rc.3",
+    "version": "3.0.76-rc.4",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -1,5 +1,5 @@
-<div id="canned">
-  <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0">
+<div>
+  <div class="canned-list" *ngIf="tagsCannedFilter.length > 0">
     <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
       class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
       *ngFor="let canned of tagsCannedFilter; let i = index;"
@@ -17,10 +17,17 @@
       <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>
+  <!--  -->
+  <div  class="loader" *ngIf="tagsCannedFilter.length === 0">
+    <div class="box">
+      <div class="container">
+        <span class="circle"></span>
+        <span class="circle"></span>
+        <span class="circle"></span>
+        <span class="circle"></span>
+      </div>
+      <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
+    </div>
+  </div>
 </div>

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

@@ -72,6 +72,24 @@
     // list-style: none;
     z-index: 999999;
 
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: #f9f9f9;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #b9b9b9;
+        border-radius: 0px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #727272;
+    }
+
     .cannedContent{
         width: 100%;
     }
@@ -138,4 +156,69 @@ ion-item {
     .no-canned-available-text:hover {
         text-decoration: underline;
     }
+}
+
+
+.loader {
+    height: 310px;
+
+    .box{
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+    }
+
+    .container{
+        height: 15px;
+        width: 105px;
+        display: flex;
+        position: relative;
+
+        .circle{
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background-color: #1877f2;
+            animation: move 500ms linear 0ms infinite;
+            margin-right: 30px;
+            
+            &:first-child{
+            position: absolute;
+            top:0;
+            left:0;
+            animation: grow 500ms linear 0ms infinite;
+            }
+            
+            &:last-child{
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin-right: 0;
+            animation: grow 500ms linear 0s infinite reverse;
+            }
+        }
+    }
+
+    .label{
+        text-align: center;
+        margin-top: 10px;
+        animation: blinker 1s linear infinite;
+    }
+      
+    @keyframes grow {
+        from {transform: scale(0,0); opacity: 0;}
+        to {transform: scale(1,1); opacity: 1;}
+    }
+    
+    @keyframes move {
+        from {transform: translateX(0px)}
+        to {transform: translateX(45px)}
+    }
+
+    @keyframes blinker {
+        50% {
+          opacity: 0;
+        }
+      }
 }

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

@@ -1,3 +1,4 @@
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { Component, Input, OnInit, SimpleChange, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';
 import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
 import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
@@ -24,6 +25,7 @@ export class CannedResponseComponent implements OnInit {
   @Output() onClickCanned = new EventEmitter<any>();
   @Output() onClickAddCannedResponse = new EventEmitter();
   public loggedUser: UserModel
+  public projectID: string;
   
   public tagsCanned: any = []
   public tagsCannedCount: number
@@ -36,6 +38,7 @@ export class CannedResponseComponent implements OnInit {
     public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
     public cannedResponsesService: CannedResponsesService,
+    public appStorageService: AppStorageService,
     public el: ElementRef
   ) { }
 
@@ -45,31 +48,49 @@ export class CannedResponseComponent implements OnInit {
 
   ngOnChanges(changes: SimpleChange){
     this.logger.debug('[CANNED] - loadTagsCanned strSearch ', this.currentString)
+    if(changes && changes['conversationWith'] && (changes['conversationWith'].previousValue !== changes['conversationWith'].currentValue)){
+      this.projectID = this.getProjectIdSelectedConversation(this.conversationWith)
+      this.loadStoredCanned(this.projectID)
+    }
     if(this.currentString !== undefined){
       this.loadTagsCanned(this.currentString, this.conversationWith)
     }
   }
 
-  // ----------------------------------------------------------
-  // @ CANNED RESPONSES methods
-  // ----------------------------------------------------------
-  loadTagsCanned(strSearch, conversationWith) {
-    this.logger.log('[CANNED] - loadTagsCanned strSearch ', strSearch)
-    this.logger.log('[CANNED] - loadTagsCanned conversationWith ', conversationWith)
-
+  getProjectIdSelectedConversation(conversationWith: string): string{
     const conversationWith_segments = conversationWith.split('-')
     // Removes the last element of the array if is = to the separator
     if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
       conversationWith_segments.pop()
     }
 
-    this.logger.log('[CANNED] - loadTagsCanned conversationWith_segments ', conversationWith_segments)
+    this.logger.log('[CANNED] - getProjectIdSelectedConversation conversationWith_segments ', conversationWith_segments)
     let projectId = ''
-
     if (conversationWith_segments.length === 4) {
       projectId = conversationWith_segments[2]
-      this.logger.log('[CANNED] - loadTagsCanned projectId ', projectId)
-      this.getAndShowCannedResponses(strSearch, projectId)
+      this.logger.log('[CANNED] - getProjectIdSelectedConversation projectId ', projectId)
+    }
+    return projectId
+  }
+
+
+  loadStoredCanned(projectId){
+    let storedCanned = this.appStorageService.getItem(projectId+'_canned')
+    if(storedCanned){
+      this.tagsCannedFilter = JSON.parse(storedCanned)
+    }
+  }
+
+  // ----------------------------------------------------------
+  // @ CANNED RESPONSES methods
+  // ----------------------------------------------------------
+  loadTagsCanned(strSearch, conversationWith) {
+    this.logger.log('[CANNED] - loadTagsCanned strSearch ', strSearch)
+    this.logger.log('[CANNED] - loadTagsCanned conversationWith ', conversationWith)
+
+    if (this.projectID) {
+      this.logger.log('[CANNED] - loadTagsCanned projectId ', this.projectID)
+      this.getAndShowCannedResponses(strSearch, this.projectID)
     } else {
       this.getProjectIdByConversationWith(strSearch, this.conversationWith)
     }
@@ -165,6 +186,7 @@ export class CannedResponseComponent implements OnInit {
       // }
       this.tagsCannedFilter.push(nocanned)
     }
+    this.appStorageService.setItem(this.projectID+'_canned', JSON.stringify(this.tagsCannedFilter))
     this.onLoadedCannedResponses.emit(this.tagsCannedFilter)
   }
 

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

@@ -235,7 +235,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   // @ Lifehooks
   // -----------------------------------------------------------
   ngOnInit() {
-    // this.logger.log('[CONVS-DETAIL] > ngOnInit - window.location: ', window.location);
+    this.logger.log('[CONVS-DETAIL] > ngOnInit - window.location: ', window.location);
     // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept: ', this.appConfigProvider.getConfig().fileUploadAccept);
     // const accept_files = this.appConfigProvider.getConfig().fileUploadAccept;
     // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept typeof accept_files ', typeof accept_files);
@@ -256,6 +256,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.getOSCODE();
     this.getStoredProjectAndUserRole();
     this.listenToDsbrdPostMsgs();
+    
   }
 
   listenToDsbrdPostMsgs() {
@@ -613,14 +614,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'YES_CANNED_RESPONSES',
       'THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE',
       'TO_CREATE_THEM_GO_TO_THE_PROJECT',
-      "AddNewCannedResponse"
+      "AddNewCannedResponse",
+      "LABEL_LOADING"
     ]
 
     this.translationMap = this.customTranslateService.translateLanguage(keys)
-    this.logger.log(
-      '[CONVS-DETAIL] x this.translationMap ',
-      this.translationMap,
-    )
+    this.logger.log('[CONVS-DETAIL] x this.translationMap ',this.translationMap)
   }
 
   // --------------------------------------------------------
@@ -1305,19 +1304,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   onClickOpenCannedResponses($event) {
     this.logger.log('[CONVS-DETAIL] - onClickOpenCannedResponses ', $event)
-    const elTextArea = this.rowTextArea['el']
-    const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
-    if($event && elTextArea){
-      this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  textArea ', textArea)
-      // console.log("[CONVS-DETAIL] onClickOpenCannedResponses  textArea value", textArea.value)
-      var lastChar = textArea.value[textArea.value.length - 1]
-      // console.log('[CONVS-DETAIL] onClickOpenCannedResponses lastChar', lastChar)
-      if (lastChar !== '/') {
-        this.insertAtCursor(textArea, '/')
+    this.HIDE_CANNED_RESPONSES = !this.HIDE_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){
+      const elTextArea = this.rowTextArea['el']
+      const textArea = elTextArea.getElementsByTagName('ion-textarea')[0]
+      if($event && elTextArea){
+        this.logger.log('[CONVS-DETAIL] onClickOpenCannedResponses  textArea ', textArea)
+        // console.log("[CONVS-DETAIL] onClickOpenCannedResponses  textArea value", textArea.value)
+        var lastChar = textArea.value[textArea.value.length - 1]
+        // console.log('[CONVS-DETAIL] onClickOpenCannedResponses lastChar', lastChar)
+        if (lastChar !== '/') {
+          this.insertAtCursor(textArea, '/')
+        }
+        this.setCaretPosition(textArea)
       }
-      this.setCaretPosition(textArea)
-    }else{
-      this.HIDE_CANNED_RESPONSES = true
     }
   }
 

package/src/global.scss

@@ -393,7 +393,7 @@ app-info-support-group {
 ion-conversation-detail {
     img {
         border-style: none;
-        max-width: 100% !important;
+        max-width: 300px !important;
     }
 }