@chat21/chat21-ionic 3.0.55-RC12 → 3.0.55-RC20

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

@@ -214,4 +214,145 @@ 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

@@ -8,9 +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 { 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';
 
@@ -29,7 +29,8 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public logger: LoggerService = LoggerInstance.getInstance();
   public currentYear: any;
   public browserLang: string;
-  public isOnline: true;
+  public isOnline: boolean = true;
+  public checkInternet: boolean;
 
   /**
    * 
@@ -42,7 +43,9 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
-    private events: EventsService
+    // private events: EventsService,
+    // private tiledeskService: TiledeskService,
+    private networkService: NetworkService
   ) {
     super(iterableDiffers, kvDiffers)
     this.browserLang = this.translate.getBrowserLang();
@@ -65,20 +68,41 @@ 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.subdcribeToWatchToConnectionStatus();
+    this.watchToConnectionStatus();
   }
 
-      // --------------------------------------------------
-    // 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);
-    //   });
-    // }
+
+  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;
+  //     }
+  //   });
+  // }
 
 
 

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

@@ -458,6 +458,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
           });
 
         }
+      } else {
+        that.fileInput.nativeElement.value = '';
       }
     });
 

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-group/info-group.component.ts

@@ -77,10 +77,10 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
         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")) {
+        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/user-presence/user-presence.component.ts

@@ -47,7 +47,9 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
 
   /** */
   initialize() {
-    this.status = this.translationMap.get('LABEL_ACTIVE_NOW');
+    if (this.translationMap) {
+      this.status = this.translationMap.get('LABEL_ACTIVE_NOW');
+    }
     this.logger.log('[USER-PRESENCE-COMP] - initialize - this.translationMap', this.translationMap);
     this.logger.log('[USER-PRESENCE-COMP] - initialize - this.status', this.status);
     this.logger.log('[USER-PRESENCE-COMP] - initialize - idUser ->', this.idUser);
@@ -68,7 +70,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
     subscribtionKey = 'BSIsOnline';
     subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
     if (!subscribtion) {
-      subscribtion =  this.presenceService.BSIsOnline.subscribe((data: any) => {
+      subscribtion = this.presenceService.BSIsOnline.subscribe((data: any) => {
         this.logger.log('[USER-PRESENCE-COMP] $subs to BSIsOnline - data ', data);
         if (data) {
           const userId = data.uid;
@@ -78,7 +80,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
           }
         }
       });
-      const subscribe = {key: subscribtionKey, value: subscribtion };
+      const subscribe = { key: subscribtionKey, value: subscribtion };
       this.subscriptions.push(subscribe);
     }
 
@@ -86,7 +88,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
     subscribtionKey = 'BSLastOnline';
     subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
     if (!subscribtion) {
-      subscribtion =  this.presenceService.BSLastOnline.subscribe((data: any) => {
+      subscribtion = this.presenceService.BSLastOnline.subscribe((data: any) => {
         this.logger.log('[USER-PRESENCE-COMP] $subs to BSLastOnline - data ', data);
         if (data) {
           const userId = data.uid;
@@ -96,7 +98,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
           }
         }
       });
-      const subscribe = {key: subscribtionKey, value: subscribtion };
+      const subscribe = { key: subscribtionKey, value: subscribtion };
       this.subscriptions.push(subscribe);
     }
 
@@ -138,7 +140,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
       const lastConnectionDate = setLastDateWithLabels(this.translationMap, timestamp);
       this.logger.log('[USER-PRESENCE-COMP] userLastConnection - lastConnectionDate', lastConnectionDate);
       this.lastConnectionDate = lastConnectionDate;
-      if (this.online === false ) {
+      if (this.online === false) {
         this.status = this.lastConnectionDate;
       }
     }

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -9,9 +9,12 @@
 
     <ion-grid style="height: 100%;">
       <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
-        <span
+        <span *ngIf="isOnline === true"
           style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">{{'PleaseSelectChatToStartMessaging'
           | translate }}</span>
+
+          <span *ngIf="isOnline === false"
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">Internet is slow or not working</span>
       </ion-row>
     </ion-grid>
   </ion-content>

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -35,9 +35,11 @@ import { isFirstMessage, isInfo, isMine, messageType } from 'src/chat21-core/uti
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service';
+import { NetworkService } from '../../services/network-service/network.service';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -112,6 +114,11 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   messageType = messageType;
   // info_content_child_enabled: boolean = false
   private logger: LoggerService = LoggerInstance.getInstance();
+
+
+  public isOnline: boolean = true;
+  public checkInternet: boolean;
+  public msgCount: number
   /**
    * Constructor
    * @param route 
@@ -156,7 +163,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     public imageRepoService: ImageRepoService,
     public presenceService: PresenceService,
     public toastController: ToastController,
-    public tiledeskService: TiledeskService
+    public tiledeskService: TiledeskService,
+    private networkService: NetworkService
   ) {
 
     // Change list on date change
@@ -189,7 +197,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     //   }
     // });
+    this.watchToConnectionStatus();
+  }
+
+  watchToConnectionStatus() {
+
+    this.networkService.checkInternetFunc().subscribe(isOnline => {
+      this.checkInternet = isOnline
+      // console.log('[CONVS-LIST-PAGE] - watchToConnectionStatus - isOnline', this.checkInternet)
+
+      // checking internet connection
+      if (this.checkInternet == true) {
 
+        this.isOnline = true;
+      } else {
+        this.isOnline = false;
+      }
+    });
   }
 
   ngAfterViewInit() {
@@ -441,6 +465,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       const that = this;
       this.logger.log('[CONVS-DETAIL] - initConversationHandler that.messages  ', that.messages);
       this.logger.log('[CONVS-DETAIL] - initConversationHandler that.messages.length  ', that.messages.length);
+      this.msgCount = that.messages.length
       setTimeout(() => {
         if (!that.messages || that.messages.length === 0) {
           this.showIonContent = true;
@@ -586,8 +611,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       }
     }
 
-
-    if (type === 'file' || type === 'image') {
+    // || type === 'image'
+    if (type === 'file') {
 
       if (msg) {
         // msg = msg + '<br>' + 'File: ' + metadata.src;
@@ -603,12 +628,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         msg = `[${metadata.name}](${metadata.src})`
       }
     }
-    //     <a href="/images/myw3schoolsimage.jpg" download>
-    //   <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
-    // </a>
+    
+    // else if (type === 'image') {
+    //   if (msg) {
+    //     // msg = msg + '<br>' + 'File: ' + metadata.src;
+    //     msg = metadata.name + '\n' + msg
+
+    //   } else {
+  
+    //     msg = metadata.name
+    //   }
+ 
+    // }
+ 
 
     (metadata) ? metadata = metadata : metadata = '';
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE msg: ', msg, ' - messages: ', this.messages, ' - loggedUser: ', this.loggedUser);
+ 
     if (msg && msg.trim() !== '' || type !== TYPE_MSG_TEXT) {
       this.conversationHandlerService.sendMessage(
         msg,

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -60,7 +60,7 @@ export class ConversationListPage implements OnInit {
 
   public conversationType = 'active'
   headerTitle: string;
- 
+
 
   constructor(
     private router: Router,
@@ -213,9 +213,6 @@ export class ConversationListPage implements OnInit {
   }
 
 
-
-
-
   // ------------------------------------------------------------------ 
   //  SUBSCRIPTIONS
   // ------------------------------------------------------------------
@@ -248,7 +245,7 @@ export class ConversationListPage implements OnInit {
     // });
 
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
-      this.logger.log('[CONVS-LIST-PAGE] ***** conversationsAdded *****', conversation);
+      // this.logger.log('[CONVS-LIST-PAGE] ***** conversationsAdded *****', conversation);
       // that.conversationsChanged(conversations);
       if (conversation) {
         this.onImageLoaded(conversation)
@@ -257,7 +254,7 @@ export class ConversationListPage implements OnInit {
     });
 
     this.conversationsHandlerService.conversationChanged.subscribe((conversation: ConversationModel) => {
-      this.logger.log('[CONVS-LIST-PAGE] ***** subscribeConversationChanged *****', conversation);
+      // this.logger.log('[CONVS-LIST-PAGE] ***** subscribeConversationChanged *****', conversation);
       // that.conversationsChanged(conversations)
       if (conversation) {
         this.onImageLoaded(conversation)
@@ -426,13 +423,15 @@ export class ConversationListPage implements OnInit {
     this.logger.log('[CONVS-LIST-PAGE] tenant:: ' + this.tenant);
     if (this.route.component['name'] !== "ConversationListPage") {
 
-      const IDConv = this.route.snapshot.firstChild.paramMap.get('IDConv');
-      this.logger.log('[CONVS-LIST-PAGE] conversationWith 2: ', IDConv);
-      if (IDConv) {
-        this.setUidConvSelected(IDConv);
-      } else {
+      if (this.route && this.route.snapshot && this.route.snapshot.firstChild) {
+        const IDConv = this.route.snapshot.firstChild.paramMap.get('IDConv');
+        this.logger.log('[CONVS-LIST-PAGE] conversationWith 2: ', IDConv);
+        if (IDConv) {
+          this.setUidConvSelected(IDConv);
+        } else {
 
-        this.logger.log('[CONVS-LIST-PAGE] conversationWith 2 (else): ', IDConv);
+          this.logger.log('[CONVS-LIST-PAGE] conversationWith 2 (else): ', IDConv);
+        }
       }
     }
   }
@@ -493,7 +492,7 @@ export class ConversationListPage implements OnInit {
   }
 
   onConversationLoaded(conversation: ConversationModel) {
-    // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
+    this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
     const keys = ['YOU', 'SENT_AN_IMAGE', 'SENT_AN_ATTACHMENT'];
     const translationMap = this.translateService.translateLanguage(keys);
     // Fixes the bug: if a snippet of code is pasted and sent it is not displayed correctly in the convesations list
@@ -518,14 +517,41 @@ export class ConversationListPage implements OnInit {
           conversation.last_message_text = translationMap.get('YOU') + ': ' + SENT_AN_IMAGE;
 
         } else if (conversation.type === "file") {
-          this.logger.log('[CONVS-LIST-PAGE] HAS SENT FILE')
+          // this.logger.log('[CONVS-LIST-PAGE] HAS SENT FILE')
           const SENT_AN_ATTACHMENT = conversation['last_message_text'] = translationMap.get('SENT_AN_ATTACHMENT')
           conversation.last_message_text = translationMap.get('YOU') + ': ' + SENT_AN_ATTACHMENT;
         }
-      } 
+      } else {
+        if (conversation.type === "image") {
+
+          // this.logger.log('[CONVS-LIST-PAGE] HAS SENT AN IMAGE');
+          // this.logger.log("[CONVS-LIST-PAGE] translationMap.get('YOU')")
+          const SENT_AN_IMAGE = conversation['last_message_text'] = translationMap.get('SENT_AN_IMAGE')
+
+          conversation.last_message_text = SENT_AN_IMAGE;
+
+        } 
+        // else if (conversation.type !== "text" && conversation.type !== "image") {
+        //   // this.logger.log('[CONVS-LIST-PAGE] HAS SENT FILE')
+        //   const SENT_AN_ATTACHMENT = conversation['last_message_text'] = translationMap.get('SENT_AN_ATTACHMENT')
+        //   conversation.last_message_text = SENT_AN_ATTACHMENT;
+
+        // } 
+      }
     }
   }
 
+// isMarkdownLink(last_message_text) {
+//   this.logger.log('[CONVS-LIST-PAGE] isMarkdownLink 1')
+//   var regex = /^(^|[\n\r])\s*1\.\s.*\s+1\.\s$/
+//   let matchRegex = false
+//   if (regex.test(last_message_text)) { 
+//     this.logger.log('[CONVS-LIST-PAGE] isMarkdownLink 2')
+//     matchRegex = true
+//     return matchRegex
+//   }
+// }
+
 
   navigateByUrl(converationType: string, uidConvSelected: string) {
     this.logger.log('[CONVS-LIST-PAGE] navigateByUrl uidConvSelected: ', uidConvSelected);
@@ -655,11 +681,11 @@ export class ConversationListPage implements OnInit {
 
     }, () => {
       this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *');
-     
+
     });
   }
 
-  archiveSupportGroupConv(tiledeskToken, project_id,conversationId) {
+  archiveSupportGroupConv(tiledeskToken, project_id, conversationId) {
     this.logger.log('[CONVS-LIST-PAGE] - onCloseConversation projectId: ', project_id)
     this.tiledeskService.closeSupportGroup(tiledeskToken, project_id, conversationId).subscribe(res => {
 
@@ -675,9 +701,6 @@ export class ConversationListPage implements OnInit {
   }
 
 
-
-
-
   public generateFake(count: number): Array<number> {
     const indexes = [];
     for (let i = 0; i < count; i++) {

package/src/app/pages/loader-preview/loader-preview.page.html

@@ -27,7 +27,7 @@
     <ion-item>
       <ion-label color="primary" position="floating" floating> {{'AddACaption' | translate}}...</ion-label>
       <!-- <ion-input clearInput></ion-input> -->
-      <ion-textarea #messageTextArea rows="1" autosize="false" auto-grow="true" [(ngModel)]="messageString"
+      <ion-textarea #messageTextArea #imageCaptionTexarea rows="1" autosize="false" auto-grow="true" [(ngModel)]="messageString"
         (ionInput)="onChangeTextArea($event);" (keyup.enter)="pressedOnKeyboard($event, messageString);">
       </ion-textarea>
     </ion-item>

package/src/app/pages/loader-preview/loader-preview.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, ViewChild, ElementRef, EventEmitter, HostListener } from '@angular/core';
+import { Component, OnInit, Input, Output, ViewChild, ElementRef, EventEmitter, HostListener, AfterViewInit } from '@angular/core';
 import { TYPE_MSG_IMAGE } from 'src/chat21-core/utils/constants';
 import { NavParams, ModalController } from '@ionic/angular';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -12,9 +12,10 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
   templateUrl: './loader-preview.page.html',
   styleUrls: ['./loader-preview.page.scss'],
 })
-export class LoaderPreviewPage implements OnInit {
+export class LoaderPreviewPage implements OnInit, AfterViewInit {
   @ViewChild('thumbnailsPreview', { static: false }) thumbnailsPreview: ElementRef;
   @ViewChild('messageTextArea', { static: false }) messageTextArea: ElementRef;
+  @ViewChild('imageCaptionTexarea', { static: false }) imageCaptionTexarea: any
   // @Output() eventSendMessage = new EventEmitter<object>();
   @Input() files: [any];
 
@@ -43,6 +44,17 @@ export class LoaderPreviewPage implements OnInit {
       //this.fileChange(this.files[i]);
     }
   }
+  ngAfterViewInit() {
+    if (this.imageCaptionTexarea) {
+      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.imageCaptionTexarea ", this.imageCaptionTexarea);
+        this.imageCaptionTexarea.setFocus();
+
+      }, 1000); //a least 150ms.
+    }
+  }
 
   ionViewDidEnter() {
     this.logger.log('[LOADER-PREVIEW-PAGE] ionViewDidEnter thumbnailsPreview.nativeElement.offsetHeight', this.thumbnailsPreview.nativeElement.offsetHeight);
@@ -126,7 +138,7 @@ export class LoaderPreviewPage implements OnInit {
 
   start_and_end(str) {
     if (str.length > 70) {
-      return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
+      return str.substr(0, 20) + '...' + str.substr(str.length - 10, str.length);
     }
     return str;
   }
@@ -270,7 +282,7 @@ export class LoaderPreviewPage implements OnInit {
 
   /** */
   onChangeTextArea(e: any) {
-    // this.logger.log('onChangeTextArea', e.target.clientHeight);
+    this.logger.log('onChangeTextArea', e.target.clientHeight);
     this.calculateHeightPreviewArea();
     // try {
     //   let height: number = e.target.offsetHeight;
@@ -315,7 +327,7 @@ export class LoaderPreviewPage implements OnInit {
   /** */
   onSendMessage() {
     this.logger.log('[LOADER-PREVIEW-PAGE] onSendMessage messageString:', this.messageString);
-    const file = this.selectedFiles.item(0);
+    let file = this.selectedFiles.item(0);
     const file4Load = new Image;
     const nameImg = file.name;
     const typeFile = file.type;
@@ -332,6 +344,7 @@ export class LoaderPreviewPage implements OnInit {
       'uid': uid
     };
     this.viewCtrl.dismiss({ fileSelected: file, messageString: this.messageString, metadata: metadata, type: TYPE_MSG_IMAGE });
+  
   }
 
   async onClose() {