@chat21/chat21-ionic 3.0.55-RC6 → 3.0.57

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

@@ -209,4 +209,150 @@ ion-item:hover {
     font-size: 10px;
     position: relative;
     top: -4px;
-}
+}
+
+
+.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

@@ -8,6 +8,9 @@ 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 { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -24,8 +27,11 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   convertMessage = convertMessage;
   isApp: boolean = false;
   public logger: LoggerService = LoggerInstance.getInstance();
-  public currentYear: any
-  public browserLang: string
+  public currentYear: any;
+  public browserLang: string;
+  public isOnline: boolean = true;
+  public checkInternet: boolean;
+
   /**
    * 
    * @param iterableDiffers 
@@ -37,6 +43,9 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
+    // private events: EventsService,
+    // private tiledeskService: TiledeskService,
+    private networkService: NetworkService
   ) {
     super(iterableDiffers, kvDiffers)
     this.browserLang = this.translate.getBrowserLang();
@@ -59,8 +68,44 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     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
+  // --------------------------------------------------
+  // subdcribeToWatchToConnectionStatus() {
+  //   this.logger.log('[ION-LIST-CONVS-COMP] subdcribeToWatchToConnectionStatus ');
+  //   // this.events.subscribe('uidConvSelected:changed', this.subscribeChangedConversationSelected);
+  //   this.events.subscribe('internetisonline', (internetisonline) => {
+  //     // user and time are the same arguments passed in `events.publish(user, time)`
+  //     this.logger.log('[ION-LIST-CONVS-COMP] internetisonline ',internetisonline);
+  //     if (internetisonline === true) {
+  //       this.isOnline = true;
+  //     } else {
+  //       this.isOnline = false;
+  //     }
+  //   });
+  // }
+
+
+
   closeConversation(conversation: ConversationModel) {
     var conversationId = conversation.uid;
     this.logger.log('[ION-LIST-CONVS-COMP] - closeConversation - conversationId ', conversationId)

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

@@ -20,7 +20,7 @@
       font-size: 16px !important;
       margin-bottom: 10px;
       padding: 10px 8px !important;
-      line-height: 56px;
+      // line-height: 56px;
       background: #fff;
       border: 1px solid #d9d9d9 !important;
       border-top: 1px solid silver;

package/src/app/components/contacts-directory/contacts-directory.component.html

@@ -4,9 +4,10 @@
   <ion-list>
     
     <ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
-      <!-- <div [class.selected]="user.uid === uidUserSelected"></div> -->
+      <div tabindex="0"></div>
+      <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
       <ion-avatar slot="start">
-        <div #avatarPlaceholder class="avatar-placeholder" [style.background-color]="user.color" [innerHTML]="user.avatar"></div>
+        <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
         <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
         <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
       </ion-avatar>

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

@@ -23,8 +23,8 @@
             [idUser] = conversationAvatar.conversation_with
             [translationMap] = translationMap
             [borderColor] = borderColor
-            [fontColor] = fontColor
-          ></app-user-presence>
+            [fontColor] = fontColor>
+          </app-user-presence>
         </div>
 
         <div *ngIf="conversationAvatar" class="user-typing">

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

@@ -5,6 +5,7 @@ import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.
 // Logger
 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';
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -28,7 +29,9 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   borderColor = '#ffffff';
   fontColor = '#949494';
   membersConversation = ['SYSTEM'];
-
+  fullNameConv: string;
+  idConv: string;
+ 
   private logger: LoggerService = LoggerInstance.getInstance();
 
   /**
@@ -38,14 +41,17 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
-  ) { 
-    // this.route.paramMap.subscribe(params => {
-      
-     
-    //   this.conversationWithFullname = params.get('FullNameConv');
-    //   this.logger.log('[CONVS-DETAIL][HEADER]- initialize -> params: ', params);
-    //   this.logger.log('[CONVS-DETAIL][HEADER]- initialize -> params > : ',  this.conversationWithFullname);
-    // });
+  ) {
+    this.route.paramMap.subscribe(params => {
+
+
+      // this.conversationWithFullname = params.get('FullNameConv');
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params: ', params);
+      this.fullNameConv = params.get('FullNameConv')
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params > conversation_with_fullname: ', this.fullNameConv);
+      this.idConv = params.get('IDConv');
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params > conversation_with: ', this.idConv);
+    });
   }
 
   // ----------------------------------------------------
@@ -53,7 +59,7 @@ 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.initialize();
   }
@@ -62,6 +68,18 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar);
     if (this.conversationAvatar) {
       this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+    } else {
+      const channelType = setChannelType(this.idConv);
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ', channelType);
+      this.conversationAvatar = setConversationAvatar(
+        this.idConv,
+        this.fullNameConv,
+        channelType,
+      );
+      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) - isOpenInfoConversation', this.isOpenInfoConversation);
@@ -74,9 +92,6 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // ----------------------------------------------------
   initialize() {
 
- 
-
-
     if (this.conversationAvatar && this.conversationAvatar.channelType === this.DIRECT) {
       this.isDirect = true;
     } else if (this.idLoggedUser) {

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

@@ -33,9 +33,8 @@
         <!-- autofocus="true" -->
         <!-- autoFocus="true" // directive -->
 
-        <ion-textarea id="ion-textarea" #messageTextArea #textArea rows="1" 
+        <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1" 
           [placeholder]="TEXAREA_PLACEHOLDER"
-          (ionFocus)="txtfocus('hasFocus')" 
           autosize="false" 
           auto-grow="true" 
           autofocus="true"

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

@@ -7,7 +7,7 @@
     .buttons-left {
         position: absolute;
         left: 0;
-        bottom: 0;
+        bottom: -3px;
         width: 30px;
         height: 100%;
         .attach-button {
@@ -26,7 +26,7 @@
     }
     .buttons-right {
         position: absolute;
-        bottom: 0;
+        bottom: 3px;
         right: 0;
         width: 30px;
         height: 100%;
@@ -47,18 +47,22 @@
         margin: 0 35px;
         width: calc(100% - 70px);
         ion-textarea {
-            border-radius: 4px;
+            // border-radius: 4px;
+            border-radius: 20px; // NK edited
             padding: 0;
             margin: 0;
             height: auto;
             overflow: auto;
-            min-height: 30px;
+            // min-height: 30px;
+            min-height: 37px; // NK edited
             max-height: 184px;
             background-color: rgba(0, 0, 0, .05);
-            --padding-top: 5px;
+            // --padding-top: 5px; // NK edited
+            --padding-top: 8px;
             --padding-bottom: 5px;
             --padding-end: 5px;
-            --padding-start: 5px;
+            // --padding-start: 5px; // NK edited
+            --padding-start: 10px;
             line-height: 1.34;
             font-size: 15px;
         }

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

@@ -2,7 +2,7 @@ import { UserModel } from 'src/chat21-core/models/user';
 import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, HostListener, Renderer2 } from '@angular/core';
 
 import { Chooser } from '@ionic-native/chooser/ngx';
-import { ModalController, ToastController } from '@ionic/angular';
+import { IonTextarea, ModalController, ToastController } from '@ionic/angular';
 
 // Pages
 import { LoaderPreviewPage } from 'src/app/pages/loader-preview/loader-preview.page';
@@ -19,6 +19,7 @@ import { checkPlatformIsMobile } from 'src/chat21-core/utils/utils';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
+
 @Component({
   selector: 'app-message-text-area',
   templateUrl: './message-text-area.component.html',
@@ -26,7 +27,9 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 })
 export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChanges {
 
-  @ViewChild('textArea', { static: false }) messageTextArea: any
+  @ViewChild('textArea', { static: false }) messageTextArea: IonTextarea
+
+  @ViewChild('message_text_area', { static: false }) message_text_area: ElementRef
   //   set textArea(element: ElementRef<HTMLInputElement>) {
   //     if(element) {
   //       this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ViewChild element ", element);
@@ -105,9 +108,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
     }
 
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges this.isOpenInfoConversation ", this.isOpenInfoConversation);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
-
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
     // use case drop
     if (this.dropEvent) {
@@ -122,54 +123,36 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   // ngAfterViewInit() {
   ngAfterViewInit() {
 
-
-    // const element = this.renderer.selectRootElement('#textArea');
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit element get with renderer ", element);
-    // const elemTexarea= <HTMLElement>document.querySelector('#ion-textarea');
-    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] elemTexarea ', elemTexarea) 
-    // elemTexarea.focus()
-    // setTimeout(() => {
-    //   (this.messageTextArea.nativeElement.shadowRoot as ShadowRoot).querySelector('input').focus();
-    // }, 100);
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit this.messageTextArea ", this.messageTextArea);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit message_text_area ", this.message_text_area);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit messageTextArea ", this.messageTextArea);
     if (this.messageTextArea) {
       setTimeout(() => {
-        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] set focus on ", this.messageTextArea);
-        // Keyboard.show() // for android
-        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit this.messageTextArea ", this.messageTextArea);
-        this.messageTextArea.setFocus();
 
 
-        // const el = document.querySelector('textarea');
-        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit el ", el);
-        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit document.activeElement ", document.activeElement);
-        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit el === document.activeElement ", el === document.activeElement);
+        const elTextArea = this.message_text_area['el'];
+        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elTextArea ", elTextArea);
+        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elTextArea children", elTextArea.children);
+        if (elTextArea.children.length === 1) {
 
-        // if (document.activeElement.tagName !== 'BODY') {
-        //   if ((el === document.activeElement) === true) {
-        //     const texAreaHasFocus = true
-        //     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit texAreaHasFocus ", texAreaHasFocus);
-        //   } else {
-        //     const texAreaHasFocus = false
-        //     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit texAreaHasFocus ", texAreaHasFocus);
-        //   }
-        // }
+          const elTextAreaWrapper = elTextArea.children[0]
+          // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elTextAreaWrapper", elTextAreaWrapper);
+          
+          if (elTextAreaWrapper.children.length === 1) {
+            const elNativeTearea = elTextAreaWrapper.children[0]
+            // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elNativeTearea", elNativeTearea);
+             elNativeTearea.setAttribute("style", "height: 37px !important; ");
+          }
+        }
 
-        // el = textarea.native-textarea.sc-ion-textarea-md
-        // dc = textarea.native-textarea.sc-ion-textarea-md
-      }, 1500); //a least 150ms.
-    }
-  }
 
-  txtfocus(string) {
-    // const el = document.querySelector('textarea');
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit txtfocus string ", string);
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit txtfocus document.activeElement ", document.activeElement);
-    // // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit document.activeElement === TEXAREa", document.activeElement === );
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit txtfocus el ", el);
-  }
+        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] set focus on ", this.messageTextArea);
+        // Keyboard.show() // for android
 
+        this.messageTextArea.setFocus();
 
+      }, 1500); //a least 150ms.
+    }
+  }
 
 
   getWindowWidth(): any {
@@ -458,6 +441,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
           });
 
         }
+      } else {
+        that.fileInput.nativeElement.value = '';
       }
     });
 
@@ -594,6 +579,24 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.modalController.dismiss({ confirmed: true });
   }
 
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+
+    // Note: on mac keyboard "metakey" matches "cmd"
+    if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {
+
+
+     
+      this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] HAS PRESSED COMBO KEYS this.messageString', this.messageString);
+
+      if (this.messageString !== undefined && this.messageString.trim() !== '') {
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] HAS PRESSED Enter + ALT this.messageString', this.messageString);
+        this.messageString = this.messageString + "\r\n"
+      }
+    }
+
+  }
+
 
   /* NOT USED */
   // getIfTexareaIsEmpty(calledby: string) {

package/src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component.html

@@ -1,7 +1,7 @@
 <ion-button expand="full" fill="clear" text-left class="advanced-info-accordion" (click)="openAdvancedInfoAccordion()">
   <span class="absolute-text">
 
-    {{ translationMap.get('LABEL_INFO_ADVANCED') }}
+    {{ translationMap?.get('LABEL_INFO_ADVANCED') }}
   </span>
 
   <ion-icon id="{{'absolute-icon_'+ teammateID}}" slot="end" name="chevron-down-outline" class="absolute-icon">
@@ -42,7 +42,7 @@
             <div class="attributes-title-wpr">
               <span class="attributes-title">
                 <!-- {{ attr.key  }} -->
-                {{ translationMap.get(attr.key) }}
+                {{ translationMap?.get(attr.key) }}
               </span>
             </div>
 

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -78,14 +78,24 @@ export class InfoContentComponent implements OnInit {
       this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe conversationWith: ', this.conversationWith);
       this.conversationWithFullname = params.get('FullNameConv');
       this.conv_type = params.get('Convtype');
-     
+
       const conversationWith_segments = this.conversationWith.split('-');
 
       // Removes the last element of the array if is = to the separator 
+      
       if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
         conversationWith_segments.pop();
-     }
-      
+      }
+
+      if (conversationWith_segments.length === 4) {
+        const lastArrayElement = conversationWith_segments[conversationWith_segments.length - 1]
+        this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe lastArrayElement ', lastArrayElement);
+        this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe lastArrayElement length', lastArrayElement.length);
+        if (lastArrayElement.length !== 32) {
+          conversationWith_segments.pop();
+        }
+      }
+
 
       this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe conversationWith_segments: ', conversationWith_segments);
 
@@ -160,7 +170,7 @@ export class InfoContentComponent implements OnInit {
     this.IS_GROUP_PANEL = false;
     this.logger.log('[INFO-CONTENT-COMP] - panelType IS_GROUP_PANEL: ', this.IS_GROUP_PANEL);
     this.logger.log('[INFO-CONTENT-COMP] - panelType: ', this.panelType);
-  } 
+  }
 
   // ---------------------------------------------------
   // START SET INFO COMPONENT
@@ -182,7 +192,7 @@ export class InfoContentComponent implements OnInit {
       //   this.logger.log('[INFO-CONTENT-COMP] - panelType: ', this.panelType);
 
       // } else
-     if (conversationWith.startsWith("group-")) {
+      if (conversationWith.startsWith("group-")) {
         this.panelType = ''
         this.logger.log('[INFO-CONTENT-COMP] - selectInfoContentTypeComponent - GROUP -  conversationWith start with "group-"  ', this.conversationWith.startsWith("group-"));
         this.setInfoGroup();

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -70,18 +70,18 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
       .pipe(filter(event => event instanceof NavigationEnd))
 
       .subscribe((event: NavigationEnd) => {
-        console.log('InfoGroupComponent -  router.events prev url :', event.url);
+        // console.log('InfoGroupComponent -  router.events prev url :', event.url);
         this.previousUrl = event.url;
 
 
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
         this.member_array = []
-        console.log('InfoGroupComponent -  router.events member_array :', this.member_array);
+        // console.log('InfoGroupComponent -  router.events member_array :', this.member_array);
         // this.pleaseDeleteMeEvent.emit();
 
-        if (this.groupDetail.hasOwnProperty("member_array")) {
-          console.log('InfoGroupComponent - router.events has Property member_array  :', this.groupDetail.hasOwnProperty("member_array"));
+        if (this.groupDetail && this.groupDetail.hasOwnProperty("member_array")) {
+          // console.log('InfoGroupComponent - router.events has Property member_array  :', this.groupDetail.hasOwnProperty("member_array"));
           delete this.groupDetail['member_array'];
         }
       });

package/src/app/components/utils/avatar-profile/avatar-profile.component.html

@@ -1,4 +1,5 @@
 <div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
-  <div class="avatar avatar-placeholder" [style.background-color]="itemAvatar.color" [innerHTML]="itemAvatar.avatar" ></div>
+  <!-- [style.background-color]="itemAvatar.color" -->
+  <div class="avatar avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + itemAvatar.color + ')'}" [innerHTML]="itemAvatar.avatar" ></div>
   <div class="avatar avatar-image" [style.background-image]="'url(' + itemAvatar.imageurl + ')'" ></div>    
 </div>