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

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # chat21-ionic ver 3.0
 
+### 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.3",
     "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();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { PopoverController } from '@ionic/angular';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { BubbleInfoPopoverComponent } from 'src/app/components/bubbleMessageInfo-popover/bubbleinfo-popover.component';
+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';
+
+@Component({
+  selector: 'chat-options',
+  templateUrl: './options.component.html',
+  styleUrls: ['./options.component.scss'],
+})
+export class OptionsComponent implements OnInit {
+
+  @Input() message: MessageModel 
+  @Output() onOptionsMessage = new EventEmitter<{option: string, message: MessageModel}>();
+
+  private logger: LoggerService = LoggerInstance.getInstance()
+  
+  constructor(private popoverController: PopoverController) { }
+
+  ngOnInit() {}
+
+  onClickOptionsMessage(event, message){
+      this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', message);
+      this.presentPopover(event, 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();
+  }
+
+}

package/src/app/components/bubbleMessageInfo-popover/bubbleinfo-popover.component.html

@@ -1,3 +1,15 @@
-<p>
-  popover works!
-</p>
+<ion-list lines="none" class="ion-no-padding">
+  <ion-item button="true" (click)="onClickOption('copy')">
+    <ion-icon name="copy-outline" slot="start"></ion-icon>
+    <ion-label>{{translationsMap?.get('COPY')}}</ion-label>
+  </ion-item>
+  <ion-item button="true" (click)="onClickOption('addCanned')">
+    <ion-icon name="flash-outline" slot="start"></ion-icon>
+    <!-- <span class="add-canned-response-add-icon">+</span> -->
+    <ion-label>{{translationsMap?.get('AddAsCannedResponse')}}</ion-label>
+  </ion-item>
+  <ion-item button="true" (click)="onClickOption('jsonInfo')">
+    <ion-icon src="assets/images/json-file.svg" slot="start"></ion-icon>
+    <ion-label>{{translationsMap?.get('JSON_RESPONSE')}}</ion-label>
+  </ion-item>
+</ion-list>

package/src/app/components/bubbleMessageInfo-popover/bubbleinfo-popover.component.scss

@@ -0,0 +1,26 @@
+ion-list{
+    background-color: var(--bck-msg-received);
+    padding: 0px;
+}
+
+ion-item{
+    --background: transparent;
+    --padding-start: 0px;
+    --padding-end: 0px;
+    --background-hover: #000000 !important;
+    font-size: 12px;
+
+    ion-icon{
+        margin-right: 5px;
+        margin-left: 10px;
+        font-size: 20px;
+    }
+
+    &:hover{
+        font-weight: bold;
+        ion-icon {
+            color: black;
+        }
+    }
+
+}

package/src/app/components/bubbleMessageInfo-popover/bubbleinfo-popover.component.ts

@@ -3,6 +3,7 @@ import { LoggerInstance } from './../../../chat21-core/providers/logger/loggerIn
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { MessageModel } from './../../../chat21-core/models/message';
 import { Component, Input, OnInit } from '@angular/core';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 
 @Component({
   selector: 'ion-bubbleinfo-popover',
@@ -12,17 +13,37 @@ import { Component, Input, OnInit } from '@angular/core';
 export class BubbleInfoPopoverComponent implements OnInit {
 
   @Input() message: MessageModel
-
+  
+  public translationsMap: Map<string, string>;
   private logger: LoggerService = LoggerInstance.getInstance()
   
-  constructor(private ctr: PopoverController) { }
+  constructor(
+    private ctr: PopoverController,
+    private customTranslateService: CustomTranslateService,
+  ) { }
 
   ngOnInit() {
     this.logger.debug('[BUBBLE-INFO-POPOVER] ngOnInit message data:', this.message)
+    this.initTranslations()
   }
 
   onClose(){
     this.ctr.dismiss()
   }
 
+  initTranslations(){
+    let keys= [
+      "AddAsCannedResponse",
+      "COPY",
+      "JSON_RESPONSE"
+    ]
+    this.translationsMap = this.customTranslateService.translateLanguage(keys)
+  
+  }
+
+  onClickOption(option: 'copy' | 'addCanned' | 'jsonInfo'){
+    this.logger.debug('[BUBBLE-INFO-POPOVER] clicked option:', option)
+    this.ctr.dismiss({option: option})
+  }
+
 }

package/src/app/modals/json-message/json-message-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { JsonMessagePage } from './json-message.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: JsonMessagePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class JsonMessagePageRoutingModule {}

package/src/app/modals/json-message/json-message.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { JsonMessagePageRoutingModule } from './json-message-routing.module';
+
+import { JsonMessagePage } from './json-message.page';
+import { TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { createTranslateLoader } from 'src/chat21-core/utils/utils';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    JsonMessagePageRoutingModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateModule,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    }),
+  ],
+  declarations: [JsonMessagePage]
+})
+export class JsonMessagePageModule {}

package/src/app/modals/json-message/json-message.page.html

@@ -0,0 +1,15 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>{{'JSON_RESPONSE' | translate}}</ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button ion-button fill="clear" (click)="closeModal()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <pre class="json" id=json></pre>
+</ion-content>

package/src/app/modals/json-message/json-message.page.scss

@@ -0,0 +1,17 @@
+ion-content{
+
+    .json{
+        background: #354552;
+        color: #d6e5db;
+        line-height: 18px;
+        margin-bottom: 30px;
+        padding: 10px;
+        overflow-x: auto;
+        margin: 10px;
+
+    }
+
+
+        
+}
+

package/src/app/modals/json-message/json-message.page.spec.ts

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

package/src/app/modals/json-message/json-message.page.ts

@@ -0,0 +1,50 @@
+import { MessageModel } from './../../../chat21-core/models/message';
+import { Component, Input, OnInit, ElementRef } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-json-message',
+  templateUrl: './json-message.page.html',
+  styleUrls: ['./json-message.page.scss'],
+})
+export class JsonMessagePage implements OnInit {
+
+  @Input() message: MessageModel
+  @Input() translationsMap: Map<string, string>;
+
+  
+  constructor(
+    public viewCtrl: ModalController,
+    public el: ElementRef
+  ) { }
+
+  ngOnInit() {
+    var str = JSON.stringify(this.message, undefined, 4);
+    this.el.nativeElement.querySelector('#json').innerHTML = this.syntaxHighlight(str)
+  }
+
+  closeModal(){
+    this.viewCtrl.dismiss()
+  }
+
+
+  syntaxHighlight(json) {
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'key';
+            } else {
+                cls = 'string';
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'boolean';
+        } else if (/null/.test(match)) {
+            cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+    });
+}
+
+}

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

@@ -57,7 +57,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     NgxLinkifyjsModule,
   ],
   // entryComponents: [MessageTextAreaComponent],
-  entryComponents: [],
+  entryComponents: [ BubbleInfoPopoverComponent],
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,

package/src/app/shared/shared.module.ts

@@ -1,3 +1,4 @@
+import { OptionsComponent } from './../chatlib/conversation-detail/message/options/options.component';
 import { HeaderConversationsListUnassigned } from './../components/conversations-list/header-conversations-list-unassigned/header-conversations-list-unassigned.component';
 import { NavbarComponent } from './../components/navbar/navbar.component';
 import { FormsModule } from '@angular/forms';
@@ -80,6 +81,7 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     InfoMessageComponent,
     ReturnReceiptComponent,
     TextComponent,
+    OptionsComponent,
     HtmlComponent,
     InfoContentComponent,
     InfoSupportGroupComponent,
@@ -120,6 +122,7 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     InfoMessageComponent,
     ReturnReceiptComponent,
     TextComponent,
+    OptionsComponent,
     InfoContentComponent,
     InfoSupportGroupComponent,
     InfoDirectComponent,

package/src/assets/i18n/ar.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"أضف المشروع",
     "RECENT_PROJECTS":"مشاريع حديثه",
     "OTHER_PROJECTS":"مشاريع أخرى"
-  }
+  },
+  "JSON_RESPONSE":"استجابة JSON"
 }

package/src/assets/i18n/az.json

@@ -289,5 +289,6 @@
         "ADD_PROJECT":"Layihə əlavə edin",
         "RECENT_PROJECTS":"Son layihələr",
         "OTHER_PROJECTS":"Digər layihələr"
-      }
+    },
+    "JSON_RESPONSE":"JSON cavabı"
 }

package/src/assets/i18n/de.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Projekt hinzufügen",
     "RECENT_PROJECTS":"Letzte Projekte",
     "OTHER_PROJECTS":"Weitere Projekte"
-  }
+  },
+  "JSON_RESPONSE":"JSON Response"
 }

package/src/assets/i18n/en.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Add project",
     "RECENT_PROJECTS":"Recent projects",
     "OTHER_PROJECTS":"Other projects"
-  }
+  },
+  "JSON_RESPONSE":"JSON Response"
 }

package/src/assets/i18n/es.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Agregar proyecto",
     "RECENT_PROJECTS":"Proyectos recientes",
     "OTHER_PROJECTS":"Otros proyectos"
-  }
+  },
+  "JSON_RESPONSE":"Respuesta JSON"
 }

package/src/assets/i18n/fr.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Ajouter un projet",
     "RECENT_PROJECTS":"Les projets récents",
     "OTHER_PROJECTS":"Autres projets"
-  }
+  },
+  "JSON_RESPONSE":"Réponse JSON"
 }

package/src/assets/i18n/it.json

@@ -289,5 +289,6 @@
         "ADD_PROJECT":"Aggiungi progetto",
         "RECENT_PROJECTS":"Progetti recenti",
         "OTHER_PROJECTS":"Altri progetti"
-    }
+    },
+    "JSON_RESPONSE":"JSON di risposta"
 }

package/src/assets/i18n/kk.json

@@ -289,5 +289,6 @@
         "ADD_PROJECT":"Жоба қосу",
         "RECENT_PROJECTS":"Соңғы жобалар",
         "OTHER_PROJECTS":"Басқа жобалар"
-    }
+    },
+    "JSON_RESPONSE":"JSON жауабы"
 }

package/src/assets/i18n/pt.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Adicionar projeto",
     "RECENT_PROJECTS":"Projetos Recentes",
     "OTHER_PROJECTS":"Outros projetos"
-  }
+  },
+  "JSON_RESPONSE":"Resposta JSON"
 }

package/src/assets/i18n/ru.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Добавить проект",
     "RECENT_PROJECTS":"Недавние Проекты",
     "OTHER_PROJECTS":"Другие проекты"
-  }
+  },
+  "JSON_RESPONSE":"JSON-ответ"
 }

package/src/assets/i18n/sr.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Додајте пројекат",
     "RECENT_PROJECTS":"Недавни пројекти",
     "OTHER_PROJECTS":"Остали пројекти"
-  }
+  },
+  "JSON_RESPONSE":"ЈСОН одговор"
 }

package/src/assets/i18n/sv.json

@@ -289,5 +289,6 @@
         "ADD_PROJECT":"Lägg till projekt",
         "RECENT_PROJECTS":"Nyliga projekt",
         "OTHER_PROJECTS":"Andra projekt"
-    }
+    },
+    "JSON_RESPONSE":"JSON-svar"
 }

package/src/assets/i18n/tr.json

@@ -289,5 +289,6 @@
     "ADD_PROJECT":"Proje ekle",
     "RECENT_PROJECTS":"Son Projeler",
     "OTHER_PROJECTS":"Diğer projeler"
-  }
+  },
+  "JSON_RESPONSE":"JSON Yanıtı"
 }

package/src/assets/i18n/uk.json

@@ -289,5 +289,6 @@
         "ADD_PROJECT":"Додати проект",
         "RECENT_PROJECTS":"Останні проекти",
         "OTHER_PROJECTS":"Інші проекти"
-    }
+    },
+    "JSON_RESPONSE":"Відповідь JSON"
 }

package/src/assets/i18n/uz.json

@@ -290,5 +290,6 @@
         "ADD_PROJECT":"Loyiha qo'shish",
         "RECENT_PROJECTS":"So'nggi loyihalar",
         "OTHER_PROJECTS":"Boshqa loyihalar"
-    }
+    },
+    "JSON_RESPONSE":"JSON javobi"
 }

package/src/assets/images/json-file.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.93 34.1"><path d="M15.34,25.33V18.51A1.74,1.74,0,0,1,17.1,16.8a1.71,1.71,0,1,0,0-3.41,5.21,5.21,0,0,0-5.28,5.12v6.82A3.47,3.47,0,0,1,8.3,28.74a1.71,1.71,0,1,0,0,3.41,3.47,3.47,0,0,1,3.52,3.41v6.82a5.2,5.2,0,0,0,5.28,5.11,1.71,1.71,0,1,0,0-3.41,1.73,1.73,0,0,1-1.76-1.7V35.56a6.69,6.69,0,0,0-2.43-5.12A6.68,6.68,0,0,0,15.34,25.33Z" transform="translate(-6.54 -13.39)"/><ellipse cx="22.89" cy="11.08" rx="2.64" ry="2.56"/><path d="M29.43,33.85a1.74,1.74,0,0,0-1.76,1.71v5.11a1.76,1.76,0,0,0,3.52,0V35.56A1.74,1.74,0,0,0,29.43,33.85Z" transform="translate(-6.54 -13.39)"/><path d="M45.09,30.44a6.69,6.69,0,0,0-2.43,5.12v6.82a1.73,1.73,0,0,1-1.76,1.7,1.71,1.71,0,1,0,0,3.41,5.2,5.2,0,0,0,5.28-5.11V35.56a3.47,3.47,0,0,1,3.52-3.41,1.71,1.71,0,1,0,0-3.41,3.47,3.47,0,0,1-3.52-3.41V18.51a5.21,5.21,0,0,0-5.28-5.12,1.71,1.71,0,1,0,0,3.41,1.74,1.74,0,0,1,1.76,1.71v6.82A6.68,6.68,0,0,0,45.09,30.44Z" transform="translate(-6.54 -13.39)"/></svg>

package/src/global.scss

@@ -748,6 +748,17 @@ ul.dropdown-menu > li > a {
 //MODALS
 .modal-wrapper{
     border-radius: 16px !important;
+
+}
+
+.json-modal-class .modal-wrapper{
+    --height: 90%;
+    --width: 70%;
+    span.key{ color: red; }
+    span.number { color:#6eb4bc; }
+    span.boolean { color:#a693e0; }
+    span.null { color:#e09393; }
+    span.key { color: #a9d18f; }
 }
 
 
@@ -760,3 +771,10 @@ ul.dropdown-menu > li > a {
     }
 }
 
+
+//POPOVER
+.info-popover{
+    .popover-content{ 
+        width: 250px; 
+    }
+}

package/src/variables.scss

@@ -50,4 +50,6 @@ body {
     --sidebar-width: 60px;
     --nav-bar-heigth: 60px;
 
+    --icon-color: rgb(135, 150, 175)
+
 }