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

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ### 3.0.86 in PROD
 
+### 3.0.86-rc.4
+- bug-fixed: close emoji-picker if focus is on message-text-area
+- bug-fixed: removed hover background bell icon
+- bug-fixed: input field not focused on click
+- bug-fixed: set list-bkg-color as default background color for ion-split--pane component
+- changed: create-canned-response UI
+- added: sourcePage info to incoming messages
+- added: copy icon to copy text to clipboard
+- added: popover option to incoming messages
+
+### 3.0.86-rc.3
+- bug-fixed: cannot send message after email is queued successfully
+
 ### 3.0.86-rc.2
 - bug-fixed: undefined reading 'channel' while render email icon in ion-conversation-detail component
 

package/package.json

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

package/src/app/app.component.scss

@@ -5,6 +5,7 @@
     display: block; // Safari bug fix
     margin-left: var(--sidebar-width);
     --border: 0px;
+    background-color: var(--list-bkg-color);
 }
 
 .split-pane-md:not(.mobile){
@@ -12,6 +13,7 @@
     margin-top: var(--nav-bar-heigth);
 }
 
+
 .navbar{
     display: flex;
     position: fixed;

package/src/app/app.module.ts

@@ -1,4 +1,3 @@
-import { SendEmailModal } from './modals/send-email/send-email.page';
 import { ConvertRequestToConversation } from './../chat21-core/utils/convertRequestToConversation';
 import { LogLevel, PUSH_ENGINE_FIREBASE, PUSH_ENGINE_MQTT } from './../chat21-core/utils/constants';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';

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

@@ -99,26 +99,27 @@
         </ion-button>
       </ng-container>
 
-      <!--backgroundColor non viene ancora usato -->
-      <div style="display: contents;">
+      
+      <div class="bubble-container">
 
         <div class="email-logo" *ngIf="message?.attributes?.channel && message?.attributes?.channel === TYPE_MSG_EMAIL">
           <ion-icon name="mail"></ion-icon>
         </div>
 
+        <!--backgroundColor non viene ancora usato -->
         <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
-        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
-        [class.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
-        [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
-        [message]="message" 
-        [fontColor]="stylesMap.get('bubbleSentTextColor')"
-        [fontSize]="stylesMap.get('fontSize')"
-        [fontFamily]="stylesMap.get('fontFamily')"
-        (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
-        (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
-        (onElementRendered)="onElementRenderedFN($event)">
+          [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
+          [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
+          [class.emoticon]="isEmojii(message?.text)"
+          [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
+          [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
+          [message]="message" 
+          [fontColor]="stylesMap.get('bubbleSentTextColor')"
+          [fontSize]="stylesMap.get('fontSize')"
+          [fontFamily]="stylesMap.get('fontFamily')"
+          (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+          (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
+          (onElementRendered)="onElementRenderedFN($event)">
       </chat-bubble-message>
       </div>
 
@@ -149,21 +150,35 @@
           [baseLocation]="baseLocation">
       </chat-avatar-image> -->
 
-      <!--backgroundColor non viene ancora usato -->
-      <chat-bubble-message class="messages msg_receive" id="message_msg_receive"
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
-        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
-        [class.emoticon]="isEmojii(message?.text)"
-        [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
-        [isSameSender]="isSameSender(message?.sender, i)"
-        [message]="message" 
-        [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
-        [fontSize]="stylesMap?.get('fontSize')"
-        [fontFamily]="stylesMap?.get('fontFamily')"
-        (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
-        (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
-        (onElementRendered)="onElementRenderedFN($event)">
-      </chat-bubble-message>
+      <div class="bubble-container">
+        
+        <!--backgroundColor non viene ancora usato -->
+        <chat-bubble-message class="messages msg_receive" id="message_msg_receive"
+          [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
+          [class.no-background]="(isImage(message) || isFrame(message)) && message?.text.trim() === '' "  
+          [class.emoticon]="isEmojii(message?.text)"
+          [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
+          [isSameSender]="isSameSender(message?.sender, i)"
+          [message]="message" 
+          [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
+          [fontSize]="stylesMap?.get('fontSize')"
+          [fontFamily]="stylesMap?.get('fontFamily')"
+          (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
+          (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
+          (onElementRendered)="onElementRenderedFN($event)"
+          (click)="onBubbleMessageClick($event, i)">
+        </chat-bubble-message>
+
+        <div class="options-container">
+          <div class="copy-logo" (click)="onClickCopyMesage($event, message)" *ngIf="message.text.trim() !== ''">
+            <ion-icon name="copy-outline"></ion-icon>
+          </div>
+          <!-- <div class="menu-logo" (click)="onClickBubbleMenu($event, message)">
+            <ion-icon name="caret-down"></ion-icon>
+          </div> -->
+        </div>
+
+      </div>
 
       <ng-container *ngIf="areVisibleCAR && supportMode">
         <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
@@ -183,6 +198,11 @@
 
       <div class="message-date-hover" *ngIf="isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
     </div>
+    
+    <div class="base_receive sourcePage-container" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && message?.attributes?.sourcePage" [class.show]="showSourceInfo && showSourceInfoIndex===i">
+      <svg xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" viewBox="0 0 24 24"  fill="none"><path _ngcontent-wrg-c96="" d="M0 0h24v24H0V0z" fill="none"></path><path _ngcontent-wrg-c96="" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm13.89 5.4c-.26-.81-1-1.4-1.9-1.4h-1v-3c0-.55-.45-1-1-1h-6v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C17.92 5.77 20 8.65 20 12c0 2.08-.81 3.98-2.11 5.4z"></path></svg>
+      <span title="{{message?.attributes?.sourcePage}}" class="truncate">{{message?.attributes?.sourcePage}}</span>
+    </div>
 
     <!-- message type:: button &&  -->
     <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left">

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

@@ -152,6 +152,11 @@ ion-item {
     // animation: heartbeat 1.5s ease-in-out both;
 }
 
+.bubble-container{
+    display: flex;
+    max-width: calc(100% - 85px);
+}
+
 /* send message */
 .base_sent {
     align-items: flex-end;
@@ -167,7 +172,7 @@ ion-item {
         background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
         margin: 0px 0px 0px 0px;
-        max-width: calc(100% - 85px);
+        // max-width: calc(100% - 85px); //--> moved to bubble-container
         min-width: 14px;
         border-top-right-radius: 8px;
         border-bottom-right-radius: 0px;
@@ -207,11 +212,13 @@ ion-item {
         border-radius: 3px;
         color: rgb(135, 150, 175);
     }
+
 }
 
 /** recive message **/
 .base_receive {
     padding: 0px 20px 6px 0px;
+
     .message-date{
         color: #647491;
         font-size: 12px;
@@ -219,7 +226,9 @@ ion-item {
     }
     
 
-    &:hover .message-date-hover, &:hover .btn-add-msg{
+    &:hover .message-date-hover, 
+    &:hover .btn-add-msg, 
+    &:hover .options-container{
         display: block;
     }
     /* avatar */
@@ -253,7 +262,7 @@ ion-item {
         background-color: var(--bck-msg-received);
         color: var(--col-msg-received);
         // max-width: 260px;
-        max-width: calc(100% - 85px);
+        // max-width: calc(100% - 85px); //--> moved to bubble-container
         min-width: 14px;
         margin: 0 0px 0px 10px;
         height: fit-content;
@@ -278,6 +287,76 @@ 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;
+        }
+    }
+
+    .copy-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: 50px;
+        // z-index: 2;
+        width: 20px;
+        border-radius: 3px;
+        color: rgb(135, 150, 175);
+    
+        &:hover{
+            cursor: pointer;
+        }
+    }
+
+}
+
+.sourcePage-container{
+    margin: 0 0px 0px 10px;
+    display: none;
+    align-items: center;
+    color: rgb(135, 150, 175);
+    font-size: 12px;
+    svg{
+        fill: rgb(135, 150, 175);
+        margin-right: 5px;
+    }
+    &.show{
+        display: flex;
+    }
 }
 
 .message-date-hover{

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

@@ -1,3 +1,4 @@
+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';
 import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
@@ -14,8 +15,9 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { TranslateService } from '@ngx-translate/core';
 import * as moment from 'moment';
 import { AppConfigProvider } from 'src/app/services/app-config';
-import { ModalController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
 import { CreateCannedResponsePage } from 'src/app/modals/create-canned-response/create-canned-response.page';
+
 @Component({
   selector: 'ion-conversation-detail',
   templateUrl: './ion-conversation-detail.component.html',
@@ -38,6 +40,8 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
+  public showSourceInfo: boolean = false;
+  public showSourceInfoIndex: number = 0;
   // public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
@@ -67,6 +71,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     private translate: TranslateService,
     public appConfigProvider: AppConfigProvider,
     public modalController: ModalController,
+    public popoverController: PopoverController
   ) {
     super(cdref, uploadService)
 
@@ -145,6 +150,21 @@ 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)
+  }
+
+  onClickCopyMesage(event, message: MessageModel){
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickCopyMesage');
+    navigator.clipboard.writeText(message.text)
+  }
+
+  onBubbleMessageClick(event: any, index: number){
+    this.showSourceInfo = !this.showSourceInfo
+    this.showSourceInfoIndex = index
+  }
+
   onElementRenderedFN(event) {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onElementRenderedFN:::ionic', event)
     this.onElementRendered.emit(event)
@@ -171,7 +191,8 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   async presentCreateCannedResponseModal(message: MessageModel): Promise<any> {
     this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
     const attributes = {
-       message: message,
+       message: message.text,
+       conversationWith: message.recipient
     }
     const modal: HTMLIonModalElement = await this.modalController.create({
       component: CreateCannedResponsePage,
@@ -186,4 +207,26 @@ export class IonConversationDetailComponent extends ConversationContentComponent
 
     return await modal.present()
   }
+
+  async presentPopover(ev: any, message: MessageModel) {
+    const attributes = {
+      message: message,
+      conversationWith: message.recipient
+   }
+    const popover = await this.popoverController.create({
+      component: BubbleInfoPopoverComponent,
+      cssClass: 'my-custom-class',
+      componentProps: attributes,
+      event: ev,
+      translucent: true,
+      keyboardClose: true,
+      showBackdrop: true
+    });
+    popover.onDidDismiss().then((dataReturned: any) => {
+      // 
+      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
+    })
+
+    return await popover.present();
+  }
 }

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

@@ -0,0 +1,3 @@
+<p>
+  popover works!
+</p>

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

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

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

@@ -0,0 +1,28 @@
+import { PopoverController } from '@ionic/angular';
+import { LoggerInstance } from './../../../chat21-core/providers/logger/loggerInstance';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { MessageModel } from './../../../chat21-core/models/message';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ion-bubbleinfo-popover',
+  templateUrl: './bubbleinfo-popover.component.html',
+  styleUrls: ['./bubbleinfo-popover.component.scss'],
+})
+export class BubbleInfoPopoverComponent implements OnInit {
+
+  @Input() message: MessageModel
+
+  private logger: LoggerService = LoggerInstance.getInstance()
+  
+  constructor(private ctr: PopoverController) { }
+
+  ngOnInit() {
+    this.logger.debug('[BUBBLE-INFO-POPOVER] ngOnInit message data:', this.message)
+  }
+
+  onClose(){
+    this.ctr.dismiss()
+  }
+
+}

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

@@ -1,6 +1,5 @@
 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/modals/create-canned-response/create-canned-response.page';
 import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { UserModel } from 'src/chat21-core/models/user';

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -87,6 +87,7 @@
             [include]="emojiiCategories"
             [color]="emojiColor"
             [custom]="customEmojis"
+            class="emoji-picker"
             [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }"
             (emojiSelect)="addEmoji($event)">
           </emoji-mart>
@@ -109,6 +110,7 @@
           [disabled]="disableTextarea"
           [(ngModel)]="messageString" 
           (ionChange)="ionChange($event);" 
+          (ionFocus)="ionFocus()"
           (keydown.enter)="onKeydown($event, messageString)" 
           (paste)="onPaste($event)">
         </ion-textarea>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -417,13 +417,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       });
     modal.onDidDismiss().then((detail: any) => {
       this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] send Email detail returned-->', detail);
-      const form = detail.data.form
-      if (form&& form.message && form.message.trim() !== '') {
-        const text = '**' + form.subject + '**\r\n' + form.message
-        const attributes = {
-          channel: TYPE_MSG_EMAIL
+      if(detail && detail.data){
+        const form = detail.data.form
+        if (form && form.text && form.text.trim() !== '') {
+          const text = '**' + form.subject + '**\r\n' + form.text
+          const attributes = {
+            channel: TYPE_MSG_EMAIL
+          }
+          this.eventSendMessage.emit({ msg: text, type: TYPE_MSG_TEXT, metadata: null, attributes: attributes });
         }
-        this.eventSendMessage.emit({ msg: text, type: TYPE_MSG_TEXT, metadata: null, attributes: attributes });
       }
     });
 
@@ -457,6 +459,13 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.eventChangeTextArea.emit({ msg: message, offsetHeight: height });
   }
 
+  ionFocus(){
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ionFocus event ");
+    if(this.showEmojiPicker){
+      this.showEmojiPicker = false;
+    }
+  }
+
   // ------------------------------------------------------------------------
   // invoked by pressing the enter key on the message input field
   // if the message is not empty it is passed  to the control method

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.scss

@@ -1,8 +1,8 @@
-
 ion-toolbar {
     height: var(--header-height);   
+    --background: transparent;
     &:not(.mobile){
-        --background: var(--list-bkg-color);
+        // --background: var(--list-bkg-color);
         border: none;
     }
     &.mobile{