@chat21/chat21-ionic 3.0.90-rc.2 → 3.0.90-rc.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # chat21-ionic ver 3.0
 
+### 3.0.90-rc.4
+- added: splitMessage in MQTTConversationHandler service
+- changed: aligned FirebaseConversationHandler service to widget
+- removed: MESSAGE_TYPE_DATE
+
+### 3.0.90-rc.3
+- added: options menu and popover on click to show copy, canned and Json response options 
+- changed: icon-button moved outside bubble-message only for the first message of each sender
+
 ### 3.0.90-rc.2
 - added: info and copy icon on received messages
 - added: flash icon to distinguish chat offline message sent also by email

package/package.json

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

package/src/app/app-routing.module.ts

@@ -64,7 +64,11 @@ const routes: Routes = [
   {
     path: 'send-email',
     loadChildren: () => import('./modals/send-email/send-email.module').then( m => m.SendEmailModalModule)
-  }
+  },
  {
+    path: 'json-message',
+    loadChildren: () => import('./modals/json-message/json-message.module').then( m => m.JsonMessagePageModule)
+  }
+
 
 
 

package/src/app/app.module.ts

@@ -88,6 +88,7 @@ import { LoaderPreviewPageModule } from './modals/loader-preview/loader-preview.
 import { CreateTicketPageModule } from './modals/create-ticket/create-ticket.module';
 import { CreateCannedResponsePageModule } from './modals/create-canned-response/create-canned-response.module';
 import { SendEmailModalModule } from './modals/send-email/send-email.module';
+import { JsonMessagePageModule } from './modals/json-message/json-message.module';
 // UTILS
 import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
 import { SharedModule } from 'src/app/shared/shared.module';
@@ -294,7 +295,8 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     SendEmailModalModule,
     CreateTicketPageModule,
     CreateRequesterPageModule,
-    CreateCannedResponsePageModule
+    CreateCannedResponsePageModule,
+    JsonMessagePageModule
   ],
   bootstrap: [AppComponent],
 

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

@@ -98,14 +98,14 @@
 
       <div class="message-date-hover"> {{message.timestamp | date:'HH:mm' }} </div>
 
-      <ng-container *ngIf="areVisibleCAR && supportMode">
+      <!-- <ng-container *ngIf="areVisibleCAR && supportMode">
         <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal(message)" [tooltip]="addAsCannedResponseTooltipText"
           [options]="tooltipOptions" placement="bottom">
           <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
           <span class="add-canned-response-add-icon">+</span>
         </ion-button>
-      </ng-container>
+      </ng-container> -->
 
       
       <div class="bubble-container">
@@ -131,7 +131,8 @@
           [fontFamily]="stylesMap.get('fontFamily')"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
-          (onElementRendered)="onElementRenderedFN($event)">
+          (onElementRendered)="onElementRenderedFN($event)"
+          (onOptionsMessage)="onClickOptionsMessage($event)">
       </chat-bubble-message>
       </div>
 
@@ -178,20 +179,27 @@
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
-          (onCopy)="onClickCopyMesage($event)"
-          (onInfo)="onClickInfoMesage($event, i)">
+          (onOptionsMessage)="onClickOptionsMessage($event)">
         </chat-bubble-message>
 
       </div>
 
-      <ng-container *ngIf="areVisibleCAR && supportMode">
+      <ng-container *ngIf="message?.attributes && message?.attributes?.sourcePage && !isSameSender(message?.sender, i)">
+        <ion-button shape="round" size="small" class="btn-info-msg " ion-button fill="clear"
+          (click)="onClickInfoMessage(message, i)" [tooltip]="addAsCannedResponseTooltipText"
+          [options]="tooltipOptions" placement="bottom">
+          <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+        </ion-button>
+      </ng-container>
+
+      <!-- <ng-container *ngIf="areVisibleCAR && supportMode">
         <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal(message)" [tooltip]="addAsCannedResponseTooltipText"
           [options]="tooltipOptions" placement="bottom">
           <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
           <span class="add-canned-response-add-icon">+</span>
         </ion-button>
-      </ng-container>
+      </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}}"

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

@@ -33,6 +33,46 @@
     }
 }
 
+
+//------- MANAGE CHAT-OPTIONS component :: INIT ------- //
+:host .base_sent .msg_sent.no-background ::ng-deep > div{
+    .options-container{
+        background: transparent;
+
+        .options-logo{
+            color:var(--bck-msg-sent);
+        }
+    }
+    
+}
+
+:host .base_receive .msg_receive.no-background ::ng-deep > div{
+    .options-container{
+        background: transparent;
+
+        .options-logo{
+            color: var(--bck-msg-received);
+        }
+    }
+    
+}
+
+:host .base_sent .msg_sent ::ng-deep > div {
+    .options-container{
+        right: unset;
+        left: 1;
+        border-top-right-radius: unset;
+        border-top-left-radius: 16px;
+        background: radial-gradient(at top left,rgba(#2a6ac1,1) 60%,rgba(#2a6ac1,0) 80%);
+        flex-direction: row;
+
+        .options-logo{
+            color: #ffffff;
+        }
+    }
+}
+//------- MANAGE CHAT-OPTIONS component :: END ------- //
+
 .manage_conversation_info_container{
     height: 34px;
     display: flex;
@@ -235,7 +275,8 @@ ion-item {
     
 
     &:hover .message-date-hover, 
-    &:hover .btn-add-msg, 
+    &:hover .btn-add-msg,
+    &:hover .btn-options-msg,
     &:hover .options-container{
         display: block;
     }
@@ -295,39 +336,6 @@ ion-item {
         max-width: 100% !important;
     }
 
-    .options-container{
-        position: relative;
-        display: none;
-        -webkit-box-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        justify-content: center;
-        top: 0px;
-        right: 30px;
-        height: 16px;
-        margin: 5px;
-        z-index: 2;
-    }
-    .menu-logo{
-        // background-color: var(--list-bkg-color);
-        // box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
-        // position: relative;
-        // display: flex;
-        // -webkit-box-align: center;
-        // align-items: center;
-        // -webkit-box-pack: center;
-        // justify-content: center;
-        // top: 0px;
-        // right: 30px;
-        // z-index: 2;
-        width: 20px;
-        border-radius: 3px;
-        color: rgb(135, 150, 175);
-    
-        &:hover{
-            cursor: pointer;
-        }
-    }
 
 }
 
@@ -336,10 +344,10 @@ ion-item {
     display: none;
     width: 75%;
     align-items: center;
-    color: rgb(135, 150, 175);
+    color: var(--icon-color);
     font-size: 12px;
     svg{
-        fill: rgb(135, 150, 175);
+        fill: var(--icon-color);
         margin-right: 5px;
     }
     &.show{
@@ -351,23 +359,28 @@ ion-item {
     color: #647491;
     font-size: 12px;
     align-self: center;
-
+    margin: 0px 5px;
     display: none;
     
 }
 
-.btn-add-msg {
+
+.btn-add-msg, .btn-info-msg, .btn-options-msg {
     border-radius: 50%;
     --padding-end: 5px;
     --padding-start: 5px;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
+    // box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
     display: none;
     align-self: center;
     margin: 0px 5px;
 
+    :hover{
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
+    }
+
     ion-icon{
         font-size: 1.2em;
-        color: var(--basic-blue)
+        color: var(--icon-color)
     }
 
     .add-canned-response-add-icon{
@@ -380,6 +393,12 @@ ion-item {
     }
 }
 
+.btn-info-msg{
+    display: block;
+    height: 25px;
+    width: 25px;
+}
+
  /* LOADING */
 /*http://tobiasahlin.com/spinkit/*/
 #chat21-spinner {

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

@@ -1,3 +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';
@@ -151,18 +152,26 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onAddUploadingBubble.emit(value);
   }
 
-  onClickBubbleMenu(event, message: MessageModel){
-    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickBubbleMenu');
-    this.presentPopover(event, message)
+  onClickOptionsMessage(event:{option: string, message: MessageModel}){
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickBubbleMenu', event);
+    if(event.option==='copy'){
+      this.onClickCopyMessage(event.message)
+    }else if(event.option === 'addCanned'){
+      if(this.areVisibleCAR && this.supportMode){
+        this.presentCreateCannedResponseModal(event.message)
+      }
+    }else if(event.option === 'jsonInfo'){
+      this.presentJsonMessageModal(event.message)
+    }
   }
 
-  onClickCopyMesage(message: MessageModel){
-    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickCopyMesage');
+  onClickCopyMessage(message: MessageModel){
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickCopyMessage');
     navigator.clipboard.writeText(message.text)
     this.presentToast()
   }
 
-  onClickInfoMesage(message: MessageModel, index: number){
+  onClickInfoMessage(message: MessageModel, index: number){
     if(message && message.attributes && message.attributes.sourcePage){
       this.showSourceInfo = !this.showSourceInfo
       this.showSourceInfoIndex = index
@@ -212,26 +221,25 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     return await modal.present()
   }
 
-  async presentPopover(ev: any, message: MessageModel) {
+  async presentJsonMessageModal(message: MessageModel): Promise<any> {
+    this.logger.log('[BUBBLE-MESSAGE] PRESENT JSON MESSAGE MODAL ')
     const attributes = {
-      message: message,
-      conversationWith: message.recipient
-   }
-    const popover = await this.popoverController.create({
-      component: BubbleInfoPopoverComponent,
-      cssClass: 'my-custom-class',
+       message: message
+    }
+    const modal: HTMLIonModalElement = await this.modalController.create({
+      component: JsonMessagePage,
+      cssClass: 'json-modal-class',
       componentProps: attributes,
-      event: ev,
-      translucent: true,
+      swipeToClose: false,
+      backdropDismiss: false,
       keyboardClose: true,
-      showBackdrop: true
-    });
-    popover.onDidDismiss().then((dataReturned: any) => {
+    })
+    modal.onDidDismiss().then((dataReturned: any) => {
       // 
       this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
     })
 
-    return await popover.present();
+    return await modal.present()
   }
 
   async presentToast(){

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

@@ -4,20 +4,21 @@
 <!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width : null -->
 <div id="bubble-message"  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px' }" class="messages primary-color">
 
-  <div class="options-container" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)">
-    <div class="info-logo" (click)="onClickInfoMessage($event, message)" *ngIf="message?.attributes && message?.attributes?.sourcePage">
-      <ion-icon name="information-circle-outline"></ion-icon>
+  <!-- <div class="options-container" >
+    <div class="options-logo" (click)="onClickOptionsMessage($event, message)" >
+      <ion-icon name="chevron-down"></ion-icon>
     </div>
-    <div class="copy-logo" (click)="onClickCopyMesage($event, message)" *ngIf="message.text.trim() !== '' && (!isImage(message) || !isFrame(message))">
-      <ion-icon name="copy-outline"></ion-icon>
-    </div>
-  </div>
+  </div> -->
+  <chat-options
+    [message]="message"
+    (onOptionsMessage)="onOptionsMessageFN($event)">
+  </chat-options>
 
-  <div >
+  <div>
 
     <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender" 
       [style.color]="convertColorToRGBA(fontColor, 65)"
-      [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+      [ngStyle]="{'padding': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
       {{message?.sender_fullname}}
     </div>
     <!-- message type:: image -->
@@ -57,6 +58,10 @@
     <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
     <div *ngIf="message?.text" style="display: flex; margin: 0px 0px 0px 0px;"> 
 
+      <!-- <ng-template #timeTooltipLeft>
+        <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
+      </ng-template>  -->
+
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
         [color]="fontColor" 
@@ -70,6 +75,7 @@
       </chat-html>
 
     </div>
+
   </div>
 
 </div>

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

@@ -13,47 +13,50 @@
     // animation: heartbeat 1.5s ease-in-out both;
 
     &:hover{
-        .options-container > .copy-logo{
+        chat-options{
             // display: flex;
             visibility: visible;
         }
     }
 
-    .options-container{
-        display: flex;
-        position: absolute;
-        top: 0px;
-        right: -40px;
-        height: 16px;
-        // margin: 5px;
-        z-index: 2;
+    chat-options{
+        visibility: hidden;
+    }
 
-        .copy-logo,
-        .info-logo{
-            // display: none;
-            display: flex;
-            visibility: hidden;
-            -webkit-box-align: center;
-            align-items: center;
-            -webkit-box-pack: center;
-            /* width: 20px; */
-            height: 16px;
-            border-radius: 3px;
-            color: rgb(135, 150, 175);
-            text-align: left;
-            justify-content: center;
-            font-size: initial;
+    // .options-container{
+    //     display: flex;
+    //     visibility: hidden;
+    //     flex-direction: row-reverse;
+    //     position: absolute;
+    //     top: 0px;
+    //     right: 0px;
+    //     height: 25px;
+    //     width: 40px;
+    //     padding: 5px;
+    //     z-index: 2;
+    //     background: radial-gradient(at top right,rgba(240, 242, 247,1) 60%,rgba(240, 242, 247,0) 80%);
+    //     border-top-right-radius: 16px;
+        
+    //     .options-logo{
+    //         // display: none;
+    //         display: flex;
+    //         -webkit-box-align: center;
+    //         align-items: center;
+    //         -webkit-box-pack: center;
+    //         /* width: 20px; */
+    //         height: 16px;
+    //         border-radius: 3px;
+    //         color: rgb(135, 150, 175);
+    //         text-align: left;
+    //         justify-content: center;
+    //         font-size: initial;
             
-            &:hover{
-                cursor: pointer;
-            }
-        }
+    //         &:hover{
+    //             cursor: pointer;
+    //         }
+    //     }
 
-        .info-logo{
-            display: flex;
-            visibility: visible;
-        }
-    }
+    // }
 
     .message_sender_fullname{
         font-size: 12px;

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

@@ -8,8 +8,9 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
-import { ModalController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
+import { BubbleInfoPopoverComponent } from 'src/app/components/bubbleMessageInfo-popover/bubbleinfo-popover.component';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -25,8 +26,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
-  @Output() onCopy = new EventEmitter<MessageModel>();
-  @Output() onInfo = new EventEmitter<MessageModel>();
+  @Output() onOptionsMessage = new EventEmitter<{option: string, message: MessageModel}>();
   
   isImage = isImage;
   isFile = isFile;
@@ -60,6 +60,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
     public modalController: ModalController,
+    private popoverController: PopoverController
     ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
@@ -182,14 +183,38 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   }
 
 
-  onClickCopyMesage(event, message){
-    this.onCopy.emit(message)
+  // onClickOptionsMessage(event, message){
+  //   this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', message);
+  //   this.presentPopover(event, message)
+  // }
+  onOptionsMessageFN(event){
+    this.onOptionsMessage.emit(event)
   }
 
-  onClickInfoMessage(event, message){
-    this.onInfo.emit(message)
-  }
 
+  // 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

@@ -0,0 +1,5 @@
+<div class="options-container" >
+  <div class="options-logo" (click)="onClickOptionsMessage($event, message)" >
+    <ion-icon name="chevron-down"></ion-icon>
+  </div>
+</div>

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

@@ -0,0 +1,34 @@
+.options-container{
+    display: flex;
+    // visibility: hidden;
+    flex-direction: row-reverse;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 25px;
+    width: 40px;
+    padding: 5px;
+    z-index: 2;
+    background: radial-gradient(at top right,rgba(240, 242, 247,1) 60%,rgba(240, 242, 247,0) 80%);
+    border-top-right-radius: 16px;
+    
+    .options-logo{
+        // display: none;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        /* width: 20px; */
+        height: 16px;
+        border-radius: 3px;
+        color: rgb(135, 150, 175);
+        text-align: left;
+        justify-content: center;
+        font-size: initial;
+        
+        &:hover{
+            cursor: pointer;
+        }
+    }
+
+}

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

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