@chat21/chat21-ionic 3.0.86-rc.3 → 3.0.86-rc.5

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 ### 3.0.86 in PROD
 
+### 3.0.86-rc.6
+- bug-fixed: do not change showSourceInfo status if sourcePage info not exist
+- bug-fixed: last_project is undefined
+
+### 3.0.86-rc.5
+- added: header-conversations-list-unassigned component
+- added: toast after text is copied
+- added: unassigned header to conversations-list page and joinConversation options icon
+- removed: "Open" - "Close info detail" string from close/open info conversation detail
+
+### 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
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.86-rc.3",
+    "version": "3.0.86-rc.5",
     "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;
@@ -44,3 +46,5 @@
 //         display: block; // Safari bug fix
 //     }
 // }
+
+

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

@@ -53,13 +53,21 @@
 <!--  nk - no tag ionic -->
 <!-- ----------------------------------------------------------- -->
 <div class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
-  <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
+  <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()"
+    [tooltip]="closeGroupTooltip"  [options]="tooltipOptions" placement="bottom"  content-type="template">
     <ion-icon name="arrow-forward-outline"></ion-icon>
-    {{translationMap.get('LABEL_CLOSE_GROUP')}}
+    <!-- {{translationMap.get('LABEL_CLOSE_GROUP')}} -->
+    <ng-template #closeGroupTooltip>
+      <span> {{ translationMap?.get('LABEL_CLOSE_GROUP')}} </span>
+    </ng-template>
   </ion-button>
-  <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
+  <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()"
+    [tooltip]="openGroupTooltip"  [options]="tooltipOptions" placement="bottom"  content-type="template">
     <ion-icon name="arrow-back-outline"></ion-icon>
-    {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}}
+    <ng-template #openGroupTooltip>
+      <span> {{ translationMap?.get('LABEL_OPEN_INFO_CONVERSATION')}} </span>
+    </ng-template>
+    <!-- {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}} -->
   </ion-button>
 </div>
 
@@ -99,26 +107,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 +158,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, message, 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 +206,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"><a target="_blank" href="{{message?.attributes?.sourcePage}}">{{message?.attributes?.sourcePage}}</a></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,77 @@ 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;
+    width: 75%;
+    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, ToastController } 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,8 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     private translate: TranslateService,
     public appConfigProvider: AppConfigProvider,
     public modalController: ModalController,
+    public popoverController: PopoverController,
+    public toastController: ToastController
   ) {
     super(cdref, uploadService)
 
@@ -145,6 +151,24 @@ 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)
+    this.presentToast()
+  }
+
+  onBubbleMessageClick(event: any, message: MessageModel, index: number){
+    if(message && message.attributes && message.attributes.sourcePage){
+      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 +195,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 +211,40 @@ 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();
+  }
+
+  async presentToast(){
+    const toast = await this.toastController.create({
+      message: '<div style="display: flex">'+
+                '<ion-icon name="copy"></ion-icon> '+
+                `<span>${this.translationMap.get("COPY_MESSAGE_TOAST")}</span>`+
+              '</div>',
+      duration: 3000,
+      color: 'light',
+      position: 'bottom',
+      cssClass: 'toast-copy'
+    });
+    toast.present();
+  }
 }

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -167,6 +167,19 @@
         <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ translationsMap?.get('Archive') }} </span>
       </ng-template>
     </ion-button>
+
+    <!-- <ion-button *ngIf="conversation?.recipient.startsWith('support-group') && !conversation.archived" [tooltip]="joinTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
+      [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
+      id="{{ 'join_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
+      item-end (click)="joinConversation(conversation);$event.stopPropagation();" padding>
+      <ion-icon slot="icon-only" style="display:block;" id="{{ 'join_button_icon' + conversation.uid }}" name="link-outline" item-end></ion-icon>
+
+      <ng-template #joinTooltip>
+        <span>{{ translationsMap?.get('JOIN_CONVERSATION')}} </span>
+      </ng-template>
+    </ion-button> -->
+
+
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->
       <i class="material-icons" id="{{ 'close_button_icon' + conversation.uid }}"  item-end> history </i>

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -30,6 +30,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   @Input() archiveActionNotAllowed: boolean;
   @Input() uidConvSelected: string;
   @Output() onCloseConversation = new EventEmitter<ConversationModel>();
+  @Output() onJoinConversation = new EventEmitter<ConversationModel>();
   @Output() onCloseAlert = new EventEmitter();
 
   convertMessage = convertMessage;
@@ -129,6 +130,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     const translationKeys = [
       'Resolve',
       'Archive',
+      'JOIN_CONVERSATION',
       'ALERT_TITLE',
       'ActionNotAllowed',
       'CLOSE_ALERT_CONFIRM_LABEL',
@@ -219,5 +221,12 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     let currentIndex = this.listConversations.findIndex(conv => conv.uid === conversation.uid)
   }
 
+  joinConversation(conversation: ConversationModel) {
+    var conversationId = conversation.uid;
+    this.logger.log('[ION-LIST-CONVS-COMP] - joinConversation - conversationId ', conversationId)
+    this.onJoinConversation.emit(conversation)
+    let currentIndex = this.listConversations.findIndex(conv => conv.uid === conversation.uid)
+  }
+
 
 }

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.text && form.text.trim() !== '') {
-        const text = '**' + form.subject + '**\r\n' + form.text
-        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{

package/src/app/components/conversations-list/header-conversations-list-unassigned/header-conversations-list-unassigned.component.html

@@ -0,0 +1,11 @@
+<ion-toolbar [class.mobile]="isMobile">
+  
+  <ion-buttons slot="start">
+    <ion-button ion-button (click)="onBackButtonHandler()">
+      <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+  <ion-title> {{headerTitle}}</ion-title>
+
+</ion-toolbar>

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

@@ -0,0 +1,14 @@
+ion-toolbar {
+    height: var(--header-height);   
+    &:not(.mobile){
+        --background: var(--list-bkg-color);
+        border: none;
+    }
+    &.mobile{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    ion-button{
+        --color: var(--basic-blue);
+    }
+}