@chat21/chat21-ionic 3.0.58 → 3.0.59-rc4

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

@@ -5,6 +5,8 @@ import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TranslateService } from '@ngx-translate/core';
+import * as moment from 'moment';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -21,6 +23,8 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   isFile = isFile;
   isFrame = isFrame;
 
+  public browserLang: string;
+
   tooltipOptions = {
     'show-delay': 500,
     'tooltip-class': 'chat-tooltip',
@@ -32,17 +36,58 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   };
 
   private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(public sanitizer: DomSanitizer) {
+  constructor(
+    public sanitizer: DomSanitizer,
+    private translate: TranslateService) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
 
   ngOnInit() {
+    this.browserLang = this.translate.getBrowserLang();
+    // console.log('BUBBLE-MSG ngOnInit browserLang ', this.browserLang)
+    if (this.browserLang) {
+      if (this.browserLang === 'it') {
+        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
+        // moment.locale('it')
+
+        moment.locale('it', {
+          calendar: {
+            lastDay: '[Ieri alle] LT',
+            sameDay: '[Oggi alle] LT',
+            nextDay: '[Domani alle] LT',
+            lastWeek: '[Ultimo] dddd [alle] LT',
+            nextWeek: 'dddd [alle] LT',
+            sameElse: 'lll'
+          }
+        });
+
+      } else {
+        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
+        // moment.locale('en')
+
+        moment.locale('en', {
+          calendar: {
+            lastDay: '[Yesterday at] LT',
+            sameDay: '[Today at] LT',
+            nextDay: '[Tomorrow at] LT',
+            lastWeek: '[last] dddd [at] LT',
+            nextWeek: 'dddd [at] LT',
+            sameElse: 'lll'
+          }
+        });
+      }
+    }
+
+
+
+    // const yesterday = moment().subtract(1, 'day')
+    // console.log('BUBBLE-MSG yesterday ', yesterday)
 
   }
 
   ngOnChanges() {
     // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
-    if (this.message && this.message.metadata) {
+    if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
       // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
     }

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

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

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

@@ -14,6 +14,8 @@ export class ImageComponent implements OnInit {
 
   loading: boolean = true
   tooltipMessage: string;
+  modal: any
+  span: any
 
   tooltipOptions = {
     'show-delay': 0,
@@ -45,7 +47,7 @@ export class ImageComponent implements OnInit {
     this.onImageRendered.emit(true)
   }
 
-  downloadImage(url: string, fileName: string) {
+  _downloadImage(url: string, fileName: string) {
     // console.log('Image COMP - IMAGE URL ', url) 
     // console.log('Image COMP - IMAGE FILENAME ', fileName) 
     const a: any = document.createElement('a');
@@ -56,4 +58,21 @@ export class ImageComponent implements OnInit {
     a.click();
     a.remove();
   }
+
+  openImageViewerModal(url: string, fileName: string) {
+    this.modal = document.getElementById("image-viewer-modal");
+    // console.log('has clicked open image-viewer modal ',  this.modal)
+    this.modal.style.display = "block";
+    var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img");
+    var captionText = document.getElementById("caption");
+    modalImg.src = url
+    captionText.innerHTML = fileName;
+   
+  }
+
+ 
+
+
 }
+
+

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

@@ -25,7 +25,8 @@
 <!-- -------------------------------------------------------------------------- -->
 <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
 <!-- -------------------------------------------------------------------------- -->
-<ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+<!-- <ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+  <div tabindex="0"></div>
   <ion-avatar item-start>
     <div class="sk-fading-circle">
       <div class="sk-circle1 sk-circle"></div>
@@ -43,10 +44,38 @@
     </div>
   </ion-avatar>
   <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
-</ion-item>
+</ion-item> -->
+
+<!-- <ion-item>
+  <div tabindex="0"></div>
+  <iframe loading="lazy" width="100%" height="70px" style="border: unset;" [src]="PROJECT_FOR_PANEL"></iframe>
+</ion-item>  -->
+<!-- <ion-item button="true" (click)="openUnsevedConversationIframe()">
+  <app-project-item
+  (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+</ion-item> -->
+
+
+<!-- <ion-item-sliding disabled>
+  <ion-item>
+    <ion-label>
+      Sliding Item, Icons Start
+    </ion-label>
+  </ion-item>
+  <ion-item-options>
+    <ion-item-option color="primary">
+      <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      More
+    </ion-item-option>
+    <ion-item-option color="secondary">
+      <ion-icon slot="start" name="archive"></ion-icon>
+      Archive
+    </ion-item-option>
+  </ion-item-options>
+</ion-item-sliding> -->
 
 <ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation.uid === uidConvSelected"
-  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)">
+  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)" detail=false>
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
@@ -88,7 +117,7 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived" [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp  }"
+    <ion-button *ngIf="!conversation.archived" [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 }}"
@@ -117,7 +146,7 @@
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp }"
+  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
     *ngIf="conversation.is_new">
   </div>
 

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

@@ -142,6 +142,10 @@ ion-item {
     .notification_point-on-desktop {
         bottom: 29px !important;
     }
+    .notification_point-on-mobile {
+        bottom: 29px !important;
+        right: 8px;
+    }
 }
 
 // ion-item {
@@ -171,6 +175,10 @@ ion-item:hover {
     }
 }
 
+.button-on-mobile {
+    margin-right: 31px !important; 
+}
+
 .truncate-on-desktop {
     width: 88% !important
 }
@@ -212,147 +220,3 @@ ion-item:hover {
 }
 
 
-.waiting-for-connection {
-    --background:  #fdd764;
-}
-
-// -------------------------------
-// Spinner
-// -------------------------------
-.sk-fading-circle {
-    // margin: 100px auto;
-    width: 40px;
-    height: 40px;
-    position: relative;
-    margin-left: 5px;
-    margin-top: 5px;
-  }
-  
-  .sk-fading-circle .sk-circle {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-  
-  .sk-fading-circle .sk-circle:before {
-    content: '';
-    display: block;
-    margin: 0 auto;
-    width: 15%;
-    height: 15%;
-    background-color: #333;
-    border-radius: 100%;
-    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-  }
-  .sk-fading-circle .sk-circle2 {
-    -webkit-transform: rotate(30deg);
-        -ms-transform: rotate(30deg);
-            transform: rotate(30deg);
-  }
-  .sk-fading-circle .sk-circle3 {
-    -webkit-transform: rotate(60deg);
-        -ms-transform: rotate(60deg);
-            transform: rotate(60deg);
-  }
-  .sk-fading-circle .sk-circle4 {
-    -webkit-transform: rotate(90deg);
-        -ms-transform: rotate(90deg);
-            transform: rotate(90deg);
-  }
-  .sk-fading-circle .sk-circle5 {
-    -webkit-transform: rotate(120deg);
-        -ms-transform: rotate(120deg);
-            transform: rotate(120deg);
-  }
-  .sk-fading-circle .sk-circle6 {
-    -webkit-transform: rotate(150deg);
-        -ms-transform: rotate(150deg);
-            transform: rotate(150deg);
-  }
-  .sk-fading-circle .sk-circle7 {
-    -webkit-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-            transform: rotate(180deg);
-  }
-  .sk-fading-circle .sk-circle8 {
-    -webkit-transform: rotate(210deg);
-        -ms-transform: rotate(210deg);
-            transform: rotate(210deg);
-  }
-  .sk-fading-circle .sk-circle9 {
-    -webkit-transform: rotate(240deg);
-        -ms-transform: rotate(240deg);
-            transform: rotate(240deg);
-  }
-  .sk-fading-circle .sk-circle10 {
-    -webkit-transform: rotate(270deg);
-        -ms-transform: rotate(270deg);
-            transform: rotate(270deg);
-  }
-  .sk-fading-circle .sk-circle11 {
-    -webkit-transform: rotate(300deg);
-        -ms-transform: rotate(300deg);
-            transform: rotate(300deg); 
-  }
-  .sk-fading-circle .sk-circle12 {
-    -webkit-transform: rotate(330deg);
-        -ms-transform: rotate(330deg);
-            transform: rotate(330deg); 
-  }
-  .sk-fading-circle .sk-circle2:before {
-    -webkit-animation-delay: -1.1s;
-            animation-delay: -1.1s; 
-  }
-  .sk-fading-circle .sk-circle3:before {
-    -webkit-animation-delay: -1s;
-            animation-delay: -1s; 
-  }
-  .sk-fading-circle .sk-circle4:before {
-    -webkit-animation-delay: -0.9s;
-            animation-delay: -0.9s; 
-  }
-  .sk-fading-circle .sk-circle5:before {
-    -webkit-animation-delay: -0.8s;
-            animation-delay: -0.8s; 
-  }
-  .sk-fading-circle .sk-circle6:before {
-    -webkit-animation-delay: -0.7s;
-            animation-delay: -0.7s; 
-  }
-  .sk-fading-circle .sk-circle7:before {
-    -webkit-animation-delay: -0.6s;
-            animation-delay: -0.6s; 
-  }
-  .sk-fading-circle .sk-circle8:before {
-    -webkit-animation-delay: -0.5s;
-            animation-delay: -0.5s; 
-  }
-  .sk-fading-circle .sk-circle9:before {
-    -webkit-animation-delay: -0.4s;
-            animation-delay: -0.4s;
-  }
-  .sk-fading-circle .sk-circle10:before {
-    -webkit-animation-delay: -0.3s;
-            animation-delay: -0.3s;
-  }
-  .sk-fading-circle .sk-circle11:before {
-    -webkit-animation-delay: -0.2s;
-            animation-delay: -0.2s;
-  }
-  .sk-fading-circle .sk-circle12:before {
-    -webkit-animation-delay: -0.1s;
-            animation-delay: -0.1s;
-  }
-  
-  @-webkit-keyframes sk-circleFadeDelay {
-    0%, 39%, 100% { opacity: 0; }
-    40% { opacity: 1; }
-  }
-  
-  @keyframes sk-circleFadeDelay {
-    0%, 39%, 100% { opacity: 0; }
-    40% { opacity: 1; } 
-  }

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

@@ -7,10 +7,13 @@ import { Platform } from '@ionic/angular';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
+
 import * as moment from 'moment';
 // import { EventsService } from 'src/app/services/events-service';
 // import { TiledeskService } from '../../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../../services/network-service/network.service';
+import { AppConfigProvider } from 'src/app/services/app-config';
+import { DomSanitizer } from '@angular/platform-browser'
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -29,8 +32,8 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public logger: LoggerService = LoggerInstance.getInstance();
   public currentYear: any;
   public browserLang: string;
-  public isOnline: boolean = true;
-  public checkInternet: boolean;
+ 
+  public PROJECT_FOR_PANEL: any;
 
   /**
    * 
@@ -45,7 +48,9 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     private translate: TranslateService,
     // private events: EventsService,
     // private tiledeskService: TiledeskService,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    private appConfigProvider: AppConfigProvider,
+    private sanitizer: DomSanitizer,
   ) {
     super(iterableDiffers, kvDiffers)
     this.browserLang = this.translate.getBrowserLang();
@@ -62,31 +67,22 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
     this.currentYear = moment().format('YYYY');
     this.logger.log('[ION-LIST-CONVS-COMP] - currentYear ', this.currentYear)
+
+    const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
+
+    // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
+    this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
   }
 
   ngOnInit() {
     this.isApp = this.platform.is('ios') || this.platform.is('android')
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
-    this.watchToConnectionStatus();
+   
   }
 
 
-  watchToConnectionStatus() {
-
-    this.networkService.checkInternetFunc().subscribe(isOnline => {
-      this.checkInternet = isOnline
-      this.logger.log('[ION-LIST-CONVS-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
 
-      // checking internet connection
-      if (this.checkInternet == true) {
-
-        this.isOnline = true;
-      } else {
-        this.isOnline = false;
-      }
-    });
-  }
   // --------------------------------------------------
   // subdsribe to event
   // --------------------------------------------------

package/src/app/components/authentication/login/login.component.html

@@ -42,12 +42,12 @@
           <ion-spinner *ngIf="showSpinnerInLoginBtn === true" name="bubbles" color="white" duration="2" ></ion-spinner>
         </button>
 
-        <p style="color: #666666; font-size: 1.1em; text-align: center; margin-top: 16px;">
+        <!-- <p style="color: #666666; font-size: 1.1em; text-align: center; margin-top: 16px;">
           {{ translationMap.get('LABEL_DONT_HAVE_AN_ACCOUNT_YET') }}
           <span style="color: #03a5e8; cursor:pointer" (click)="goToSignupPage()">
               {{ translationMap.get('LABEL_SIGNUP') }}
           </span>
-        </p>
+        </p> -->
 
         <p style="color: #666666; font-size: 1.1em; text-align: center; margin-top: 16px;">
            {{ translationMap.get('LABEL_FORGOT_YOUR_PASSWORD') }}

package/src/app/components/authentication/login/login.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ToastController, IonInput } from '@ionic/angular';
 import { AppConfigProvider } from '../../../services/app-config';
 
+
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -59,7 +60,7 @@ export class LoginComponent implements OnInit {
     this.buildForm();
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl;
     this.logger.log('LOGIN-COMP OnInit DASHBOARD_URL', this.DASHBOARD_URL)
-    this.showSpinnerInLoginBtn = false;
+    // this.showSpinnerInLoginBtn = false;
   }
   // ngAfterViewChecked() {
   //   this.emailInputEl.setFocus()

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

@@ -61,7 +61,7 @@ export class BubbleMyMessageComponent implements OnInit {
   * alla chiusura controllo su quale opzione ho premuto e attivo l'azione corrispondete
   */
  presentPopover(event, msg) {
-  console.log('presentPopover');
+  // console.log('presentPopover');
   // let popover = this.popoverCtrl.create(PopoverPage, { typePopup: TYPE_POPUP_DETAIL_MESSAGE, message: msg });
   // popover.present({
   //   ev: event

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

@@ -62,7 +62,7 @@ export class BubbleOthersMessageComponent implements OnInit {
   }
 
   presentPopover(event, msg) {
-    console.log('presentPopover');
+    // console.log('presentPopover');
   }
 
 }

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

@@ -1,25 +1,27 @@
+
 <ion-header no-border class="ion-no-border">
   <ion-toolbar>
     
     <ion-buttons slot="start">
-      <ion-back-button *ngIf="isMobile"
-          defaultHref="conversations-list"
-          (click)="pushPage('conversations-list')">
+      <!-- (click)="pushPage('conversations-list')" -->
+      <ion-back-button text="" *ngIf="isMobile"
+          defaultHref="/conversations-list"
+         >
       </ion-back-button> 
     </ion-buttons>
 
     <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
 
-      <div *ngIf="conversationAvatar" class="">
-        
-        <div *ngIf="conversationAvatar" class="avatar-container">
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
+        <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+        <div *ngIf="conversationAvatar" class="avatar-container" [ngClass] = "{ 'avatar-container-ios': platformName === 'ios' }">
           <app-avatar-profile
             [itemAvatar] = conversationAvatar
           ></app-avatar-profile>
         </div>
-
-        <div *ngIf="isDirect" class="user-presence">
-          <app-user-presence
+        <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
+        <div *ngIf="isDirect" class="user-presence" [ngClass] = "{ 'user-presence-ios': platformName === 'ios' }">
+          <app-user-presence 
             [idUser] = conversationAvatar.conversation_with
             [translationMap] = translationMap
             [borderColor] = borderColor
@@ -39,9 +41,12 @@
         </div>
 
       </div>
-
-      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
-        <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span>
+      <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()" 
+      [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' }">        
+        <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
+        <span class="tile-username">{{ conversation_with_fullname }} </span>
+        
       </div>
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        

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

@@ -146,4 +146,16 @@ ion-header {
     margin: 0;
     height: 16px;
     width: 140px;
+}
+
+.tile-info-with-ios {
+    left: 82px !important;
+}
+
+.user-presence-ios {
+    left: 63px;
+}
+
+.avatar-container-ios {
+    left: 55px;
 }

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

@@ -6,7 +6,7 @@ import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { setConversationAvatar, setChannelType } from 'src/chat21-core/utils/utils';
-
+import { Platform } from '@ionic/angular';
 @Component({
   selector: 'app-header-conversation-detail',
   templateUrl: './header-conversation-detail.component.html',
@@ -31,7 +31,9 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   membersConversation = ['SYSTEM'];
   fullNameConv: string;
   idConv: string;
- 
+  conversation_with_fullname: string;
+  platformName: string;
+
   private logger: LoggerService = LoggerInstance.getInstance();
 
   /**
@@ -41,6 +43,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
+    public platform: Platform
   ) {
     this.route.paramMap.subscribe(params => {
 
@@ -59,7 +62,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // ----------------------------------------------------
   ngOnInit() {
     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) - conversationAvatar', this.conversationAvatar);
+    this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
 
     this.initialize();
   }
@@ -79,7 +83,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
       if (this.conversationAvatar) {
         this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
       }
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar',  this.conversationAvatar);
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar);
     }
 
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation', this.isOpenInfoConversation);
@@ -91,7 +95,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // @ Initialize (called in ngOnInit)
   // ----------------------------------------------------
   initialize() {
-
+    this.getPlatformName()
     if (this.conversationAvatar && this.conversationAvatar.channelType === this.DIRECT) {
       this.isDirect = true;
     } else if (this.idLoggedUser) {
@@ -99,6 +103,18 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     }
   }
 
+  getPlatformName() {
+    this.logger.log('getPlatformName this.platform', this.platform) 
+    if (this.platform.is('ios')) {
+      this.platformName = 'ios'
+      this.logger.log('getPlatformName platformName', this.platformName) 
+    } else if (this.platform.is('android')){
+      this.platformName = 'android'
+      this.logger.log('getPlatformName platformName', this.platformName) 
+    }
+
+  }
+
   onOpenCloseInfoConversation() {
     this.openInfoMessage = false;
     this.openInfoConversation = !this.openInfoConversation;

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

@@ -48,9 +48,10 @@
       </div>
 
       <div class="buttons-right">
-        <ion-button [disabled]="!conversationEnabled" class="send-button right active" ion-button fill="clear"
+        <!-- [disabled]="conversationEnabled === false" -->
+        <ion-button [disabled]="conversationEnabled === false"  class="send-button right active" ion-button fill="clear"
           (click)="sendMessage(messageString)">
-          <ion-icon slot="icon-only" name="send"></ion-icon>
+          <ion-icon [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }" slot="icon-only" name="send"></ion-icon>
         </ion-button>
       </div>
     </ion-col>