@chat21/chat21-ionic 3.0.59-rc2 → 3.0.59-rc21

package/src/app/app.module.ts

@@ -94,7 +94,8 @@ import { TooltipModule } from 'ng2-tooltip-directive';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Network } from '@ionic-native/network/ngx';
 import { ConnectionService } from 'ng-connection-service';
-
+import { WebSocketJs } from './services/websocket/websocket-js';
+import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -102,7 +103,7 @@ export function createTranslateLoader(http: HttpClient) {
 
 }
 
-export function authenticationFactory(http: HttpClient, appConfig: AppConfigProvider, chat21Service: Chat21Service, appSorage: AppStorageService, network: Network, connectionService:ConnectionService) {
+export function authenticationFactory(http: HttpClient, appConfig: AppConfigProvider, chat21Service: Chat21Service, appSorage: AppStorageService, network: Network, connectionService: ConnectionService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
 
@@ -111,8 +112,13 @@ export function authenticationFactory(http: HttpClient, appConfig: AppConfigProv
 
     const auth = new MQTTAuthService(http, chat21Service, appSorage);
 
-    auth.setBaseUrl(appConfig.getConfig().apiUrl)
-    
+    auth.setBaseUrl(appConfig.getConfig().apiUrl);
+
+    if (config.pushEngine = PUSH_ENGINE_MQTT) {
+      // FOR PUSH NOTIFICATIONS INIT FIREBASE APP
+      FirebaseInitService.initFirebase(config.firebaseConfig);
+    }
+
     return auth
   } else {
 
@@ -120,7 +126,7 @@ export function authenticationFactory(http: HttpClient, appConfig: AppConfigProv
     // console.log('[APP-MOD] FirebaseInitService config ', config)
     const auth = new FirebaseAuthService(http, network, connectionService);
     auth.setBaseUrl(config.apiUrl)
-  
+
     return auth
   }
 }
@@ -216,12 +222,12 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigProvider, ap
   }
 }
 
-export function notificationsServiceFactory(appConfig: AppConfigProvider) {
+export function notificationsServiceFactory(appConfig: AppConfigProvider, chat21Service: Chat21Service) {
   const config = appConfig.getConfig()
   if (config.pushEngine === PUSH_ENGINE_FIREBASE) {
     return new FirebaseNotifications();
   } else if (config.pushEngine === PUSH_ENGINE_MQTT) {
-    return new MQTTNotifications();
+    return new MQTTNotifications(chat21Service);
   } else {
     return;
   }
@@ -253,6 +259,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     LoginPageModule,
     ConversationListPageModule,
     ConversationDetailPageModule,
+    UnassignedConversationsPageModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -338,7 +345,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     {
       provide: NotificationsService,
       useFactory: notificationsServiceFactory,
-      deps: [AppConfigProvider]
+      deps: [AppConfigProvider, Chat21Service]
     },
     {
       provide: AppStorageService,
@@ -352,6 +359,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     EventsService,
     Chooser,
     Chat21Service,
+    WebSocketJs
   ]
 })
 export class AppModule { }

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

@@ -10,7 +10,7 @@
             <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
             <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
             <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
-            <span>{{translationMap.get('LABEL_LOADING')}}</span>
+            <span>{{translationMap?.get('LABEL_LOADING')}}</span>
         </div>
       </span>
       

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,7 +44,17 @@
     </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>
@@ -63,6 +74,7 @@
   </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)" detail=false>
   <div tabindex="0"></div>
@@ -106,7 +118,8 @@
   <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, 'button-on-mobile': 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 }}"
@@ -121,21 +134,20 @@
 
   <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
 
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
     </span>
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD YYYY')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
     <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': 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

@@ -220,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,23 @@ 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/chatlib/list-conversations-component/list-conversations/list-conversations.component.html

@@ -34,7 +34,7 @@
               width="24px" height="24px" viewBox="0 0 24 24">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
-              <title id="altIconTitle">{{ translationMap.get('CLOSED') }}</title>
+              <title id="altIconTitle">{{ translationMap?.get('CLOSED') }}</title>
             </svg>
           </button>
         </div>

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

@@ -8,25 +8,25 @@
 
     <div class="signin-title" style="text-align:center">
       <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 400;">
-        {{ translationMap.get('LABEL_SIGNIN_TO') }}
+        {{ translationMap?.get('LABEL_SIGNIN_TO') }}
         {{companyName}}
       </h2>
     </div>
     <div class="login-container">
       <form [formGroup]="userForm" (ngSubmit)="signInWithEmailAndPassword()" novalidate>
 
-        <ion-label stacked for="email">{{ translationMap.get('LABEL_EMAIL') }}</ion-label>
+        <ion-label stacked for="email">{{ translationMap?.get('LABEL_EMAIL') }}</ion-label>
         <ion-input #email formControlName="email" type="email" id="email" required autocapitalize="off" spellcheck="false"
-        placeholder="{{ translationMap.get('LABEL_PLACEHOLDER_EMAIL') }}"
+        placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER_EMAIL') }}"
         [class.invalid]="!userForm.controls.email.valid" ></ion-input>
         <div *ngIf="formErrors.email" class="is-danger">
           {{ formErrors.email }}
         </div>
 
        
-        <ion-label stacked for="password">{{ translationMap.get('LABEL_PASSWORD') }}</ion-label>
+        <ion-label stacked for="password">{{ translationMap?.get('LABEL_PASSWORD') }}</ion-label>
         <ion-input #password formControlName="password" type="password" id="password" required
-        placeholder="{{ translationMap.get('LABEL_PLACEHOLDER_PASSWORD') }}"
+        placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER_PASSWORD') }}"
         [class.invalid]="!userForm.controls.password.valid"></ion-input>
 
         <div *ngIf="formErrors.password" class="is-danger">
@@ -36,23 +36,23 @@
         
         <button type="submit" class="btn signin-button ion-activatable ripple-parent" [ngClass]="{'signin-button-is-disabled': !userForm.valid}" [disabled]="!userForm.valid">
           <span class="signin-button-label" *ngIf="showSpinnerInLoginBtn === false" >
-            {{ translationMap.get('LABEL_SIGNIN') }}
+            {{ translationMap?.get('LABEL_SIGNIN') }}
           </span>
           <ion-ripple-effect type="unbounded"></ion-ripple-effect>
           <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') }}
+           {{ translationMap?.get('LABEL_FORGOT_YOUR_PASSWORD') }}
           <span style="color: #03a5e8; cursor:pointer" (click)="goToResetPsw()">
-             {{ translationMap.get('LABEL_CLICK_HERE') }} 
+             {{ translationMap?.get('LABEL_CLICK_HERE') }} 
           </span>
         </p>
 

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/header-conversation-detail/header-conversation-detail.component.html

@@ -3,10 +3,8 @@
   <ion-toolbar>
     
     <ion-buttons slot="start">
-      <!-- (click)="pushPage('conversations-list')" -->
-      <ion-back-button text="" *ngIf="isMobile"
-          defaultHref="/conversations-list"
-         >
+      <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
+      <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
       </ion-back-button> 
     </ion-buttons>
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 
 // Logger
@@ -43,7 +43,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
-    public platform: Platform
+    public platform: Platform,
+    private router: Router
   ) {
     this.route.paramMap.subscribe(params => {
 
@@ -125,4 +126,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   /** */
   pushPage(event) { }
 
+  goBackToConversationList() {
+    this.router.navigateByUrl('/conversations-list');
+  }
+
 }

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

@@ -112,8 +112,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     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);
-    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length ) 
-    
+    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)
+
     // use case drop
     if (this.dropEvent) {
       this.presentModal(this.dropEvent)
@@ -507,7 +507,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
 
 
-    const message = e.target.textContent.trim();
+    let message = e.target.textContent.trim();
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target textContent (message): ', message);
     // e.inputType === 'insertLineBreak' && 
     if (e.inputType === 'insertLineBreak' && message === '') {
@@ -525,17 +525,29 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.messageString = '';
         this.sendMessage(text);
         this.countClicks = 0
-      } else if (text.includes("/") && pos >= 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
+      } else if (text.includes("/") && pos === 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 2: ', this.tagsCannedFilter.length);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 message: ", message);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message value: ', message.value);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 text: ', text);
-        var lastChar = message.value.substr(-1); // Selects the last character
-        if (lastChar === '/') {
-          message.value = message.value.substring(0, message.value.length() - 1);
-        }
+      
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.tagsCannedFilter.length: ", this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
+        this.messageString = '';
+
+        this.sendMessage(text);
+        this.countClicks = 0
+      } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/' ) {
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
+        // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message value: ', message.value);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 text: ', text);
 
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.tagsCannedFilter.length: ", this.tagsCannedFilter.length);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
         this.messageString = '';
 
@@ -551,13 +563,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.countClicks = 0
 
       }
-
-
-
-
-
-
-      // }
     }
   }
 

package/src/app/components/ddp-header/ddp-header.component.html

@@ -14,7 +14,7 @@
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="!supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
     </ion-button>
 

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -7,14 +7,16 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 })
 export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
-  @Input() supportMode = false;
+  @Input() supportMode: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
 
   constructor(
   ) { }
 
-  ngOnInit() {}
+  ngOnInit() {
+    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+  }
 
   // START @Output() //
   /** */