@chat21/chat21-ionic 3.0.97-rc.1 → 3.0.97-rc.3

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

@@ -63,16 +63,6 @@ export class ConversationContentComponent implements OnInit {
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
   // ========== end:: check message type functions ======= //
 
-  tooltipOptions = {
-    'show-delay': 1500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   urlBOTImage = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/images/avatar_bot_tiledesk.svg'
   uploadProgress: number;
   showUploadProgress: boolean = false;
@@ -227,34 +217,6 @@ export class ConversationContentComponent implements OnInit {
 
   // ========= END:: functions scroll position ======= //
 
-  /**
-  * function customize tooltip
-  */
-  handleTooltipEvents() {
-    const that = this;
-    const showDelay = this.tooltipOptions['showDelay'];
-    // console.log(this.tooltipOptions);
-    setTimeout(function () {
-      try {
-        const domRepresentation = document.getElementsByClassName('chat-tooltip');
-        if (domRepresentation) {
-          const item = domRepresentation[0] as HTMLInputElement;
-          // console.log(item);
-          if (!item.classList.contains('tooltip-show')) {
-            item.classList.add('tooltip-show');
-          }
-          setTimeout(function () {
-            if (item.classList.contains('tooltip-show')) {
-              item.classList.remove('tooltip-show');
-            }
-          }, that.tooltipOptions['hideDelayAfterClick']);
-        }
-      } catch (err) {
-        this.logger.error('[CONV-CONTENT-W] handleTooltipEvents > Error :' + err);
-      }
-    }, showDelay);
-  }
-
   isLastMessage(idMessage: string):boolean {
     return isLastMessage(this.messages, idMessage)
     // if (idMessage === this.messages[this.messages.length - 1].uid) {

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

@@ -52,21 +52,21 @@
 <!-- ----------------------------------------------------------- -->
 <!--  nk - no tag ionic -->
 <!-- ----------------------------------------------------------- -->
-<div class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
+<div *ngIf="!isMobile" class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
   <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()"
-    [tooltip]="closeGroupTooltip"  [options]="tooltipOptions" placement="bottom"  content-type="template">
+  tooltip="{{translationMap?.get('LABEL_CLOSE_GROUP')}}" placement="bottom">
     <ion-icon name="arrow-forward-outline"></ion-icon>
     <!-- {{translationMap.get('LABEL_CLOSE_GROUP')}} -->
-    <ng-template #closeGroupTooltip>
+    <!-- <ng-template #closeGroupTooltip>
       <span> {{ translationMap?.get('LABEL_CLOSE_GROUP')}} </span>
-    </ng-template>
+    </ng-template> -->
   </ion-button>
   <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()"
-    [tooltip]="openGroupTooltip"  [options]="tooltipOptions" placement="bottom"  content-type="template">
+  tooltip="{{ translationMap?.get('LABEL_OPEN_INFO_CONVERSATION')}}" placement="bottom">
     <ion-icon name="arrow-back-outline"></ion-icon>
-    <ng-template #openGroupTooltip>
+    <!-- <ng-template #openGroupTooltip>
       <span> {{ translationMap?.get('LABEL_OPEN_INFO_CONVERSATION')}} </span>
-    </ng-template>
+    </ng-template> -->
     <!-- {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}} -->
   </ion-button>
 </div>
@@ -110,10 +110,10 @@
       
       <div class="bubble-container">
 
-        <div class="email-logo" *ngIf="message?.attributes?.channel && message?.attributes?.channel.includes(TYPE_MSG_EMAIL)">
+        <div class="email-logo" *ngIf="message?.attributes?.offline_channel && message?.attributes?.offline_channel.includes(TYPE_MSG_EMAIL)">
           <ion-icon name="mail"></ion-icon>
           <ion-icon name="flash" 
-            *ngIf="message?.attributes?.channel.includes('offline_')"
+            *ngIf="message?.attributes?.offline_channel.includes('offline_')"
             [ngStyle]="{'color': stylesMap.get('bubbleSentBackground')}">
           </ion-icon>
         </div>
@@ -186,8 +186,7 @@
 
       <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">
+          (click)="onClickInfoMessage(message, i)" tooltip="{{addAsCannedResponseTooltipText}}" placement="bottom">
           <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
         </ion-button>
       </ng-container>

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

@@ -43,16 +43,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
  // ========== end:: check message type functions ======= //
  
   public browserLang: string;
-
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
+  
   sizeImage : { width: number, height: number}
   fullnameColor: string;
   public logger: LoggerService = LoggerInstance.getInstance()
@@ -165,33 +156,6 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     return sizeImage
   }
 
-  /**
-  * function customize tooltip
-  */
-  handleTooltipEvents(event) {
-    const that = this;
-    const showDelay = this.tooltipOptions['show-delay'];
-    setTimeout(function () {
-      try {
-        const domRepresentation = document.getElementsByClassName('chat-tooltip');
-        if (domRepresentation) {
-          const item = domRepresentation[0] as HTMLInputElement;
-          if (item && !item.classList.contains('tooltip-show')) {
-            item.classList.add('tooltip-show');
-          }
-          setTimeout(function () {
-            if (item && item.classList.contains('tooltip-show')) {
-              item.classList.remove('tooltip-show');
-            }
-          }, that.tooltipOptions['hideDelayAfterClick']);
-        }
-      } catch (err) {
-        that.logger.error('[BUBBLE-MESSAGE] handleTooltipEvents >>>> Error :' + err);
-      }
-    }, showDelay);
-  }
-
-
   // onClickOptionsMessage(event, message){
   //   this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', message);
   //   this.presentPopover(event, message)

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

@@ -1,7 +1,6 @@
 <!-- [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; " -->
 <div [ngStyle]="{'max-height': height +'px' }" class="c21-img-container">
   <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width , 'height': height  }"></div>
-  <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
   <img id="myImg" 
     class="message-contentX message-content-imageX" 
     [ngClass]="{'isLoadingImage': loading}"
@@ -10,7 +9,4 @@
     [src]="metadata.src" 
     (load)="onLoaded($event)" 
     (click)="openImageViewerModal(metadata.src, metadata.name)" />
-  <!-- <ng-template #timeTooltipRight>
-    <span>{{ tooltipMessage }}</span>
-  </ng-template> -->
 </div>

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

@@ -13,33 +13,12 @@ export class ImageComponent implements OnInit {
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 
   loading: boolean = true
-  tooltipMessage: string;
   modal: any
   span: any
 
-  tooltipOptions = {
-    'show-delay': 0,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   constructor() { }
 
   ngOnInit() {
-    this.getBrowserLanguageAndTranslateTooltipMsg()
-  }
-  getBrowserLanguageAndTranslateTooltipMsg() {
-    var userLang = navigator.language;
-    // console.log('Image COMP - userLang ', userLang)
-    if (userLang === 'en') {
-      this.tooltipMessage = "Click to download"
-    } else {
-      this.tooltipMessage = "Clicca per scaricare"
-    }
   }
 
   onLoaded(event) {

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

@@ -6,10 +6,10 @@
     </div>
       
     <div style="max-width: 70%;">
-        <span class="base_info" [innerHTML]="message?.text | marked" [options]="tooltipOptions" [tooltip]="timeTooltipLeft"  placement="left" content-type="template"></span>
-        <ng-template #timeTooltipLeft>
+        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})" placement="left"></span>
+        <!-- <ng-template #timeTooltipLeft>
             <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
-        </ng-template> 
+        </ng-template>  -->
     </div>
     
     <div class="spinner">

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

@@ -16,16 +16,6 @@ export class InfoMessageComponent implements OnInit, OnChanges {
 
   public message_text: string
   private logger: LoggerService = LoggerInstance.getInstance()
-
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
   
   constructor() { }
 

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

@@ -96,24 +96,29 @@
       <div class="conversation_project truncate">
         <!-- DIRECT CONV -->
         <div *ngIf="conversation.channel_type === TYPE_DIRECT">
-          <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+          <img class="channel-icon" src="/assets/images/channel_icons/direct.svg">
           <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
         </div>
         <!-- GROUP CONV -->
         <div *ngIf="conversation.uid.startsWith(TYPE_GROUP)">
-          <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
-          <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
+          <img class="channel-icon" src="/assets/images/channel_icons/group.svg">
+          <span class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
         </div>
         <!-- SUPPORT-GROUP CONV -->
-        <div  *ngIf="conversation.uid.startsWith(TYPE_SUPPORT_GROUP)">
-          <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
+        <div  *ngIf="conversation.uid.startsWith(TYPE_SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
+          <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="conversation?.attributes && ( (conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_CHAT21) ||  !conversation?.attributes?.channel) " >
+          <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_EMAIL" >
+          <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_FORM" >
+          <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_MESSANGER" >
+          <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_WHATSAPP" >
+          <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.channel && conversation?.attributes?.channel === CHANNEL_TYPE_TELEGRAM" >
           <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
           <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
         </div>
       </div>
       <div style="display: flex;">
         <span class="conversation_with truncate" [class.not-read]="conversation.is_new">
-          {{conversation.conversation_with_fullname}}
+          {{conversation?.conversation_with_fullname}}
         </span>
       </div>
       <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
@@ -156,16 +161,13 @@
   </ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
+    <ion-button *ngIf="!conversation.archived" tooltip="{{ translationsMap?.get('Resolve')}}" placement="bottom"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" name="archive-outline" item-end></ion-icon>
-
-      <ng-template #archiveTooltip>
-        <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ translationsMap?.get('Resolve')}} </span>
-        <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ translationsMap?.get('Archive') }} </span>
-      </ng-template>
+      <div *ngIf="conversation?.recipient.startsWith('support-group')" tooltip="{{ translationsMap?.get('Resolve')}}"></div>
+      <div *ngIf="conversation?.recipient.startsWith('support-group')" tooltip="{{ translationsMap?.get('Archive')}}"></div>
     </ion-button>
 
     <!-- <ion-button *ngIf="conversation?.recipient.startsWith('support-group') && !conversation.archived" [tooltip]="joinTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"

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

@@ -99,6 +99,10 @@ ion-item {
             span{
                 padding-left: 5px
             }
+            .channel-icon{
+                vertical-align: sub;
+                filter: brightness(0) saturate(100%) invert(83%) sepia(45%) saturate(1879%) hue-rotate(178deg) brightness(79%) contrast(81%);
+            }
         }
         .conversation_with {
             color: rgba(0, 0, 0, 1);

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

@@ -1,9 +1,9 @@
-import { TYPE_GROUP, TYPE_SUPPORT_GROUP } from './../../../../chat21-core/utils/constants';
+import { CHANNEL_TYPE_CHAT21, CHANNEL_TYPE_EMAIL, CHANNEL_TYPE_FORM, CHANNEL_TYPE_MESSANGER, CHANNEL_TYPE_TELEGRAM, CHANNEL_TYPE_WHATSAPP, TYPE_GROUP, TYPE_SUPPORT_GROUP } from './../../../../chat21-core/utils/constants';
 import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output, SimpleChange } from '@angular/core';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
-import { convertMessage } from 'src/chat21-core/utils/utils';
+import { convertMessage, isOnMobileDevice } from 'src/chat21-core/utils/utils';
 import { ListConversationsComponent } from '../list-conversations/list-conversations.component';
 import { Platform } from '@ionic/angular';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -49,19 +49,19 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl: string;
   public ok_lbl: string;
 
-  tooltip_options = {
-    'show-delay': 0,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 100
-  };
-
   TYPE_DIRECT = TYPE_DIRECT;
   TYPE_GROUP = TYPE_GROUP;
   TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
+
+  //ATTRIBUTES CHANNEL
+  CHANNEL_TYPE_CHAT21 = CHANNEL_TYPE_CHAT21;
+  CHANNEL_TYPE_EMAIL = CHANNEL_TYPE_EMAIL;
+  CHANNEL_TYPE_FORM = CHANNEL_TYPE_FORM;
+  CHANNEL_TYPE_MESSANGER = CHANNEL_TYPE_MESSANGER;
+  CHANNEL_TYPE_WHATSAPP = CHANNEL_TYPE_WHATSAPP;
+  CHANNEL_TYPE_TELEGRAM = CHANNEL_TYPE_TELEGRAM;
+  
+  IS_ON_MOBILE_DEVICE: boolean
   /**
    * 
    * @param iterableDiffers 
@@ -109,7 +109,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   ngOnInit() {
     this.isApp = this.platform.is('ios') || this.platform.is('android')
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp);
-
+    this.IS_ON_MOBILE_DEVICE = isOnMobileDevice()
   }
 
   ngOnChanges(changes: { [property: string]: SimpleChange }) {

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -43,8 +43,13 @@
                 <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
               </div>
               <!-- SUPPORT-GROUP CONV -->
-              <div  *ngIf="conversationUid?.startsWith(TYPE_SUPPORT_GROUP)">
-                <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
+              <div  *ngIf="conversationUid?.startsWith(TYPE_SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
+                <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_CHAT21) ||  !conversationAvatar?.channel) " >
+                <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_EMAIL" >
+                <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_FORM" >
+                <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_MESSANGER" >
+                <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_WHATSAPP" >
+                <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.channel && conversationAvatar?.channel === CHANNEL_TYPE_TELEGRAM" >
                 <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
                 <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
               </div>
@@ -73,7 +78,7 @@
 
     </ion-title>
     <!-- openInfoConversation  {{openInfoConversation}} -->
-    <!-- <ion-buttons slot="end"> -->
+    <ion-buttons slot="end" *ngIf="isMobile">
 
       <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
         <ion-icon name="ticket-outline"></ion-icon>
@@ -86,14 +91,14 @@
         <span style="text-transform: capitalize; margin-left: 5px;"> {{translationsMap?.get('Resolve')}} </span>
       </ion-button> -->
 
-      <!-- <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-       <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
-      </ion-button> -->
-      <!-- <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+      <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+      </ion-button>
+      <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
         <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-      </ion-button> -->
+      </ion-button>
 
-    <!-- </ion-buttons> -->
+    </ion-buttons>
 
   </ion-toolbar>
 </ion-header>

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -208,6 +208,10 @@ ion-header {
         span{
             padding-left: 5px
         }
+        .channel-icon{
+            vertical-align: sub;
+            filter: brightness(0) saturate(100%) invert(83%) sepia(45%) saturate(1879%) hue-rotate(178deg) brightness(79%) contrast(81%);
+        }
     }
 }
 

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.ts

@@ -1,4 +1,4 @@
-import { TYPE_GROUP } from './../../../../chat21-core/utils/constants';
+import { CHANNEL_TYPE_CHAT21, CHANNEL_TYPE_EMAIL, CHANNEL_TYPE_FORM, CHANNEL_TYPE_MESSANGER, CHANNEL_TYPE_TELEGRAM, CHANNEL_TYPE_WHATSAPP, TYPE_GROUP } from './../../../../chat21-core/utils/constants';
 import {
   Component,
   OnInit,
@@ -20,6 +20,7 @@ import { EventsService } from 'src/app/services/events-service'
 import { CreateTicketPage } from 'src/app/modals/create-ticket/create-ticket.page'
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
 import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants'
+import { isOnMobileDevice } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -35,20 +36,29 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() liveInfo: {sourcePage: string, sourceTitle: string}
   @Input() isMobile: boolean
   @Input() translationsMap: Map<string, string>
+  @Output() onOpenInfoConversation = new EventEmitter<boolean>();
   conversationWithFullname: string
-  openInfoConversation = true
+  openInfoConversation = false
   
   isDirect = false
   borderColor = '#ffffff'
   fontColor = '#949494'
   platformName: string
   // conv_closed: boolean = false;
-  IS_ON_IOS_MOBILE_DEVICE: boolean
+  IS_ON_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
   TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP
   TYPE_GROUP = TYPE_GROUP
 
+  //ATTRIBUTES CHANNEL
+  CHANNEL_TYPE_CHAT21 = CHANNEL_TYPE_CHAT21;
+  CHANNEL_TYPE_EMAIL = CHANNEL_TYPE_EMAIL;
+  CHANNEL_TYPE_FORM = CHANNEL_TYPE_FORM;
+  CHANNEL_TYPE_MESSANGER = CHANNEL_TYPE_MESSANGER;
+  CHANNEL_TYPE_WHATSAPP = CHANNEL_TYPE_WHATSAPP;
+  CHANNEL_TYPE_TELEGRAM = CHANNEL_TYPE_TELEGRAM;
+  
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
@@ -56,7 +66,6 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     private router: Router,
     public tiledeskService: TiledeskService,
     public events: EventsService,
-    public modalController: ModalController,
   ) {
     
   }
@@ -69,20 +78,11 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type)
+    this.IS_ON_MOBILE_DEVICE = isOnMobileDevice()
     // this.listenToConversationHasBeenClosed()
     // this.isOniOSMobileDevice()
   }
 
-  isOniOSMobileDevice() {
-    this.IS_ON_IOS_MOBILE_DEVICE = false;
-    if (/iPad|iPhone|iPod/i.test(window.navigator.userAgent)) {
-      this.IS_ON_IOS_MOBILE_DEVICE = true;
-
-    }
-    // console.log('[CONVS-DETAIL][HEADER] IS_ON_IOS_MOBILE_DEVICE ', this.IS_ON_IOS_MOBILE_DEVICE)
-    return this.IS_ON_IOS_MOBILE_DEVICE;
-  }
-
   ngOnChanges() {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
@@ -134,6 +134,11 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.router.navigateByUrl('/conversations-list')
   }
 
+  onOpenCloseInfoConversation(){
+    this.openInfoConversation = !this.openInfoConversation
+    this.onOpenInfoConversation.emit(this.openInfoConversation)
+  }
+
   // -----------------------------------------------------------------
   // PRESENT MODAL CREATE TICKET (MOVED IN ddp-deader.component.ts)
   // -----------------------------------------------------------------
@@ -153,3 +158,4 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   //   return await modal.present();
   // }
 }
+

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

@@ -1,14 +1,14 @@
 <ion-grid>
   <div class="footer-options-container">
     <!-- CHAT-OPTION -->
-    <div class="section-option" id="chat"  tooltip="{{translationMap?.get('LABEL_CHAT')}}" [options]="tooltipOptions" placement="top">
+    <div class="section-option" id="chat"  tooltip="{{translationMap?.get('LABEL_CHAT')}}" placement="top">
       <ion-button fill="clear" (click)="onOpenSection('chat')" [class.active]="section==='chat'">
         <ion-icon name="chatbubbles"></ion-icon>
         {{translationMap.get('LABEL_CHAT')}}
       </ion-button>
     </div>
     <!-- EMAIL-OPTION -->
-    <div *ngIf="emailSection" class="section-option" id="email"  tooltip="{{translationMap?.get('LABEL_EMAIL')}}" [options]="tooltipOptions" placement="top">
+    <div *ngIf="emailSection" class="section-option" id="email"  tooltip="{{translationMap?.get('LABEL_EMAIL')}}" placement="top">
       <ion-button fill="clear" [class.active]="section==='email'" (click)="onOpenSection('email')" [disabled]="channelType === 'direct'">
         <ion-icon name="mail-open"></ion-icon>
         {{translationMap.get('LABEL_EMAIL')}}
@@ -30,34 +30,32 @@
 
   <ion-row id="message-text-area" [style.display]="section==='chat'? 'flex': 'none'">
 
-    <ion-col col-auto>
+    <ion-col col-auto style="display: flex;">
 
-      <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
+      <div class="buttons-left">
 
         <!-- CANNED RESPONSES -->
         <ng-container *ngIf="areVisibleCAR && supportMode">
           <div class="canned-responses-btn-wpr"
-            tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
+            tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
               [disabled]="!conversationWith?.startsWith(TYPE_SUPPORT_GROUP) || disableTextarea">
               <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
             </ion-button>
           </div>
           <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount === 0"
-            tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
+            tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" placement="top"
             class="no-canned-responses-btn-badge">
             <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
-          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount > 0"
-            tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
-            class="canned-responses-btn-badge">
+          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP) && (tagsCannedCount > 0)"
+            tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" placement="top" class="canned-responses-btn-badge">
             <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
         </ng-container>
 
         <!-- UPLOAD ATTACHMENT -->
-        <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"
-          placement="top">
+        <div *ngIf="!IS_ON_MOBILE_DEVICE" class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
             <ion-icon slot="icon-only" lazy="true" name="attach-outline"
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
@@ -68,9 +66,9 @@
 
         <!-- <ion-icon (click)="showEmojiPicker = !showEmojiPicker" color="secondary" name="happy" style="zoom:2;"></ion-icon> -->
         <!-- --------------------------------------------- -->
-        <!-- Emoji Picker Button  tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top" -->
+        <!-- EMOJII PICKER BUTTON  -->
         <!-- --------------------------------------------- -->
-        <div class="emoji-picker-btn-wpr">
+        <div class="emoji-picker-btn-wpr" *ngIf="!IS_ON_MOBILE_DEVICE">
           <ion-button ion-button fill="clear" class="emoji-picker-btn" (click)="showEmojiPicker = !showEmojiPicker"
             [disabled]="disableTextarea">
             <!-- <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon> -->