@chat21/chat21-ionic 3.0.75 → 3.0.76-rc.2

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # chat21-ionic ver 3.0
 
-### 3.0.75 in PROD
+### 3.0.76-rc.2
+- added: canned component to manage canned responses
+- bug-fixed: if more than oe '/' is present in message-text-area and a canned is selected, replace canned text on the last '/' character in the message string
+- bug-fixed: close canned component if user click again on canned-icon-button
+
+### 3.0.76-rc.1
+- changed: senderFullName in list conversation for guest users with guest#uuid[0..5]
+- added: multi-language to MEMBER_LEFT_GROUP and LEAD_UPDATED info messages
+- added: onElementRendered event to image/frame/mesagge-attachment to scroll content after element is rendered
+- added: enabled possibility to edit or delete a canned response created by yourself
+- added: disable footer component of an archived conversation if it's been more than 10 days
+- removed: scrollBar from conversation-detail page
+
+## 3.0.75 in PROD
 
 ### 3.0.75-rc.2
 - bug-fixed: unserved request count not updated correctly after a request is assigned

package/deploy_amazon_beta.sh

@@ -12,7 +12,7 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 ionic cordova platform add browser --save
 #ionic cordova build browser --prod --release
-ionic cordova build --env=pre browser #--prod  --verbose
+ionic cordova build --env=pre browser #--prod  --verbose 
 
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/

package/package.json

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

package/src/app/app.component.ts

@@ -798,7 +798,7 @@ export class AppComponent implements OnInit {
         pageUrl += IDConv + '/' + FullNameConv + '/' + Convtype
       }
       // replace(/\(/g, '%28').replace(/\)/g, '%29') -> used for the encoder of any round brackets
-      this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29'));
+      this.router.navigateByUrl(pageUrl.replace(/\(/g, '%28').replace(/\)/g, '%29').replace( /#/g, "%23" ));
 
 
       // const DASHBOARD_URL = this.appConfigProvider.getConfig().DASHBOARD_URL;

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

@@ -1,4 +1,4 @@
-<div class="c21-body" (click)="hideMenuOption()">
+<div class="c21-body" (click)="hideOutsideElements()">
 
   <div class="c21-body-container">
   

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.ts

@@ -256,36 +256,50 @@ export class ConversationContentComponent implements OnInit {
     return false;
   }
 
-  hideMenuOption() {
+  isSameSender(senderId, index):boolean{
+    if(senderId && this.messages[index - 1] && (senderId === this.messages[index - 1].sender)){
+      return true;
+    }
+    return false;
+  }
+
+  isFirstMessage(senderId, index):boolean{
+    if(senderId && index == 0 && this.messages[index] && (this.messages[index] !== senderId)){
+      return true;
+    }
+    return false;
+  }
+
+  hideOutsideElements() {
     this.onMenuOptionShow.emit(false)
   }
 
 
   // ========= begin:: event emitter function ============//
 
-  returnOnAttachmentButtonClicked(event: any) {
+  onAttachmentButtonClickedFN(event: any) {
     this.onAttachmentButtonClicked.emit(event)
   }
 
-  returnOnBeforeMessageRender(event) {
+  onBeforeMessageRenderFN(event) {
     //decommentare se in html c'è solamente component tiledesk-text
     //const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
     this.onBeforeMessageRender.emit(event)
   }
 
-  returnOnAfterMessageRender(event) {
+  onAfterMessageRenderFN(event) {
     this.onAfterMessageRender.emit(event)
   }
 
-  onImageRenderedFN(event) {
-    const imageRendered = event;
-    if (imageRendered && this.scrollMe) {
+  onElementRenderedFN(event) {
+    const elementRendered = event;
+    if (elementRendered.status && this.scrollMe) {
       const divScrollMe = this.scrollMe.nativeElement;
       const checkContentScrollPosition = this.checkContentScrollPosition(divScrollMe);
       this.scrollToBottom() // SCROLLO SEMPRE
       // if (!checkContentScrollPosition) { // SE NON SONO ALLA FINE, SCROLLO CONTENT
       // }
-
+ 
     }
   }
 

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

@@ -87,9 +87,9 @@
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
-        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)">
+        (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+        (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
+        (onElementRendered)="onElementRenderedFN($event)">
       </chat-bubble-message>
 
       <!-- icon status message -->
@@ -102,7 +102,7 @@
     </div>
 
     <!-- message RECIPIENT:: -->
-    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType)"
+    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)"
       class="message_sender_fullname">
       {{message.sender_fullname}}
     </div>
@@ -126,10 +126,9 @@
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
-        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)"
-        >
+        (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+        (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
+        (onElementRendered)="onElementRenderedFN($event)">
       </chat-bubble-message>
     </div>
 
@@ -139,7 +138,8 @@
         [message]="message"
         [isLastMessage]="isLastMessage(message?.uid)" 
         [stylesMap]="stylesMap"
-        (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
+        (onElementRendered)="onElementRenderedFN($event)"
+        (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
       </chat-message-attachment>
     </div>
   </div>

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

@@ -245,15 +245,22 @@ ion-item {
     // left: -26px;
 }
 
-:host .base_receive .msg_receive ::ng-deep div > div > ion-button {
+:host .base_receive .msg_receive ::ng-deep div > div > div > ion-button.canned {
     display: none;
     position: absolute;
     top: -3px;
     right: -31px;
 }
 
+:host .base_receive .msg_receive ::ng-deep div > div > div >ion-button.emoji {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -51px;
+}
+
 // :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
-:host .base_receive:hover .msg_receive ::ng-deep div > div > ion-button {
+:host .base_receive:hover .msg_receive ::ng-deep div > div > div > ion-button {
     display: block;
     // position: absolute;
     // top: -11px;

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

@@ -24,7 +24,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
-  @Output() onImageRendered = new EventEmitter<boolean>()
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
 
   public public_Key: any
@@ -94,8 +94,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
     //   console.log('[CONVS-DETAIL] translations: ', labels);
     // });
-    this.translate.get('AddAsCannedResponse')
-      .subscribe((text: string) => {
+    this.translate.get('AddAsCannedResponse').subscribe((text: string) => {
         // console.log('[CONVS-DETAIL] AddAsCannedResponse translated: ', text);
         this.addAsCannedResponseTooltipText = text
       })
@@ -132,9 +131,9 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onAddUploadingBubble.emit(value);
   }
 
-  onImageRenderedFN(event) {
-    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onImageRenderedFN:::ionic', event)
-    this.onImageRendered.emit(event)
+  onElementRenderedFN(event) {
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onElementRenderedFN:::ionic', event)
+    this.onElementRendered.emit(event)
   }
 
   /**

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

@@ -3,7 +3,7 @@
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
 <div id="bubble-message"
   [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px' : null }"
-  class="messages primary-color" [class.emoticon]="message?.emoticon">
+  class="messages primary-color">
 
 
   <div>
@@ -22,7 +22,7 @@
       [metadata]="message.metadata" 
       [width]="sizeImage?.width"
       [height]="sizeImage?.height"
-      (onImageRendered)="onImageRenderedFN($event)">
+      (onElementRendered)="onElementRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
@@ -30,7 +30,8 @@
     <chat-frame *ngIf="isFrame(message)" 
       [metadata]="message.metadata" 
       [width]="message.metadata.width"
-      [height]="message.metadata.height">
+      [height]="message.metadata.height"
+      (onElementRendered)="onElementRenderedFN($event)">
     </chat-frame>
 
     <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
@@ -51,7 +52,6 @@
         [text]="message?.text" 
         [color]="textColor" 
         [message]="message"
-        [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
@@ -61,12 +61,19 @@
       </chat-html>
 
       <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
+        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
           [options]="tooltipOptions" placement="bottom">
           <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
         </ion-button>
       </ng-container>
+      <!-- <ng-container *ngIf="supportMode">
+        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
+          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
+          [options]="tooltipOptions" placement="bottom">
+          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
+        </ion-button>
+      </ng-container> -->
     </div>
   </div>
 

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

@@ -46,26 +46,18 @@
         }
     }
 
-    // &:hover .message-date{
-    //     display: flex;
-    // }
-
-    // .message-date {
-    //     display: none;
-    // }
 }
 // > .button-native
-.btn-add-msg-as-canned-response {
-    // padding-left: 5px ;
-    // padding-right: 5px ;
+.btn-add-msg {
     border-radius: 50%;
     --padding-end: 7px;
     --padding-start: 7px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
+
+    ion-icon{
+        font-size: 1.2em;
+    }
 }
 
-// .emoticon {
-//     padding: 35px 0px !important;
-// }
 
 

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

@@ -23,7 +23,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onImageRendered = new EventEmitter<boolean>()
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -53,7 +53,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    this.setMomentLocale()
+    // this.setMomentLocale()
   }
 
 
@@ -140,14 +140,9 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
       sizeImage.width = MAX_WIDTH_IMAGES;
       sizeImage.height = MAX_WIDTH_IMAGES / ratio;
     }
-    // metadata.width = sizeImage.width
-    // metadata.height = sizeImage.height
     return sizeImage
   }
 
-
-
-
   /**
   * function customize tooltip
   */
@@ -195,8 +190,8 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onAfterMessageRender.emit(messageOBJ)
   }
 
-  onImageRenderedFN(event) {
-    this.onImageRendered.emit(event)
+  onElementRenderedFN(event){
+    this.onElementRendered.emit({element: event.element, status: event.status})
   }
 
   async presentCreateCannedResponseModal(): Promise<any> {

package/src/app/chatlib/conversation-detail/message/frame/frame.component.ts

@@ -1,5 +1,5 @@
 import { DomSanitizer } from '@angular/platform-browser';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-frame',
@@ -11,8 +11,10 @@ export class FrameComponent implements OnInit {
   @Input() metadata: any;
   @Input() width: string;
   @Input() height: string;
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   
   url: any;
+  loading: boolean = true
   constructor(private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
@@ -23,11 +25,14 @@ export class FrameComponent implements OnInit {
     // this.height = this.getSizeImg(this.metadata).height;
   }
   
-
-
   ngOnDestroy(){
     this.url = null;
   }
 
+  onLoaded(event){
+    this.loading = false
+    this.onElementRendered.emit({element: "image", status:true})
+  }
+
 
 }

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -10,7 +10,7 @@ export class ImageComponent implements OnInit {
   @Input() metadata: any;
   @Input() width: string;
   @Input() height: number;
-  @Output() onImageRendered = new EventEmitter<boolean>();
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 
   loading: boolean = true
   tooltipMessage: string;
@@ -44,7 +44,7 @@ export class ImageComponent implements OnInit {
 
   onLoaded(event) {
     this.loading = false
-    this.onImageRendered.emit(true)
+    this.onElementRendered.emit({element: "image", status:true})
   }
 
   _downloadImage(url: string, fileName: string) {

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.ts

@@ -11,10 +11,11 @@ import { MessageModel } from 'src/chat21-core/models/message';
 export class MessageAttachmentComponent implements OnInit {
 
   // ========= begin:: Input/Output values ============//
-  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Input() message: MessageModel;
   @Input() isLastMessage: boolean;
   @Input() stylesMap: Map<string, string>;
+  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()
   // ========= end:: Input/Output values ============//
 
   public type: string;
@@ -45,6 +46,10 @@ export class MessageAttachmentComponent implements OnInit {
     }
   }
 
+  ngAfterViewInit(){
+    this.onElementRendered.emit({element: 'attachment', status: true})
+  }
+
   returnOnAttachmentButtonClicked(event: any){
     if ( event && event.target ) {
       const ev = {target: event.target, message: this.message, currentTarget: this }

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

@@ -0,0 +1,26 @@
+<div id="canned">
+  <ion-list 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;"
+      (click)="onClickCannedFN(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" *ngIf="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-bin-outline" 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)="onClickAddCannedResponseFN()">
+      <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
+      <span class="add-canned-response-add-icon">+</span>
+     <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
+    </ion-item>
+  </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>

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

@@ -0,0 +1,141 @@
+.canned-item.add-canned-response-wpr:hover > span {
+    color: #1877f2;
+}
+
+.canned-item.add-canned-response-wpr:hover > ion-icon {
+    color: #1877f2;
+}
+
+.canned-item.add-canned-response-wpr:hover > label {
+    color: #1877f2;
+}
+
+.is_active_item {
+    // background-color: #eaf1fd!important;
+    --background: #eaf1fd !important;
+}
+
+
+
+.header {
+    display: flex;
+    flex-direction: row;
+    -webkit-box-pack: start;
+    justify-content: flex-end;
+    -webkit-box-align: center;
+    align-items: center;
+    border-bottom: 1px solid rgb(239, 242, 246);
+    padding: 0px 10px;
+    background: white;
+    width: 100%;
+    box-shadow: rgb(0, 27, 71, .24) 0px 8px 20px;
+    .canned-response-icon-header{
+        color: #3880ff !important;
+        font-size: 1.4em;
+        margin: 8px 5px;
+    }
+    
+}
+    
+.add-canned-response-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    font-size: 18px;
+}
+.add-canned-response-label {
+    color: #b3bfd0;
+    cursor: pointer;
+}
+.add-canned-response-add-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    left: -6px;
+}   
+
+.canned-list {
+    // position: absolute;
+    // bottom: 0;
+    background-color: white !important;
+    width: 100%;
+    max-height: 310px;
+    overflow-y: auto;
+    // padding: 10px 0;
+    // margin: 0;
+    margin-bottom: 1px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #080f1a;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // list-style: none;
+    z-index: 999999;
+
+    .cannedContent{
+        width: 100%;
+    }
+
+    ion-input {
+        --padding-bottom: 0px;
+        --padding-top: 0px;
+        &.text{
+            font-style: italic;
+        }
+        &.title {
+            font-weight: 500;
+        }
+    }
+    .native-input[disabled] {
+        opacity: 10 !important;
+    }
+    ion-icon {
+        zoom: 0.7;
+    }
+    .no-ripple {
+        --ripple-color: transparent;
+        --background-activated: transparent;
+    }
+
+    .border{
+        border-bottom: 1px dashed rgb(211, 219, 229) !important;
+        margin: 0px 4px
+    }
+
+
+}
+
+.canned-item {
+    -webkit-tap-highlight-color: transparent;
+    font-family: Lato, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    list-style: none;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // margin: 0 10px;
+    position: relative;
+    outline: none;
+    color: #434a54;
+    // padding: 10px;
+    padding: 5px;
+    width: auto;
+    cursor: pointer;
+    // .item-inner{
+    //     border: none!important;
+    // }
+}
+
+ion-item {
+    --background-hover: #1877f2 !important;
+    
+    .nocannedTitle {
+        color: #f44336;
+    }
+    .no-canned-available-text {
+        color: #1877f2 !important;
+    }
+    .no-canned-available-text:hover {
+        text-decoration: underline;
+    }
+}

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

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