@chat21/chat21-ionic 3.0.61-rc5 → 3.0.61-rc7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # chat21-ionic ver 3.0
 
+### 3.0.61-rc7
+- Fixes the bug: while loading the app, the conversation list changes size and becomes wider
+- Changes the style of the left sidebar
+- Display in the "user data drawer" an avatar constructed with the initials of the logged in teammate if his profile picture is not available
+
+### 3.0.61-rc6
+- Enhances the style of the sidebar tooltips
+- Fixed bug: for direct conversations opening the "info sidebar" by clicking on the teammate avatar available in the conversation detail header does not work correctly
+- Fixes the bug: not all chat strings are translated into the browser language or into the selected language
+- Fixes the bug: Email is broken on dashes in user details sidebar
+- Displays an alert when a teammate archives a conversation from a project they are no longer a part of
+- Disable the "send message" textarea when a teammate replies to a support conversation of a project he is no longer a part of
+- Adds, when an image is pasted in the "send message" text area, the text of the text area as a caption of the image preview modal window
+- Adds, when an image is uploaded, the text of the "send message" text area as a caption of the image preview modal window
+
 ### 3.0.61-rc5
 - Fixes the bug: on mobile devices the chat content is shifted to the right
 - Adds the ability to open and close the "user detail sidebar" by clicking on the avatar of the logged teammate present on the sidebar

package/config.xml

@@ -100,19 +100,19 @@
         <splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
     </platform>
     <engine name="android" spec="^6.2.3" />
-    <engine name="browser" spec="5.0.4" />
+    <engine name="browser" spec="^5.0.4" />
     <engine name="ios" spec="6.1.1" />
     <plugin name="cordova-android-support-gradle-release" spec="^3.0.1">
         <variable name="ANDROID_SUPPORT_VERSION" value="27.+" />
     </plugin>
     <plugin name="cordova-plugin-chooser" spec="^1.3.2" />
-    <plugin name="cordova-plugin-device" spec="^2.0.2" />
+    <plugin name="cordova-plugin-device" spec="^2.0.3" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.2.0" />
     <plugin name="cordova-plugin-ionic-webview" spec="^4.2.1">
         <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
     </plugin>
     <plugin name="cordova-plugin-network-information" spec="^2.0.2" />
-    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
-    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
-    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
+    <plugin name="cordova-plugin-splashscreen" spec="^5.0.4" />
+    <plugin name="cordova-plugin-statusbar" spec="^2.4.3" />
+    <plugin name="cordova-plugin-whitelist" spec="^1.3.5" />
 </widget>

package/deploy_pre.sh

@@ -24,15 +24,15 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 # ng build --prod --base-href /$NEW_BUILD/
 #ionic cordova build browser --prod
-#ionic cordova build browser --prod --release
-# ionic cordova build --env=pre browser --prod  #--verbose
 
 ionic cordova platform add browser --save
+#ionic cordova build browser --prod --release
+# ionic cordova build --env=pre browser --prod  #--verbose
 ionic cordova build -c=pre  browser --prod
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
-cp config.xml platforms/browser/www/
+
  
 ######### chat-ionic5 - the good one - publish in pre
 cd platforms/browser/www
@@ -47,18 +47,18 @@ echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat
 echo available on https://support-pre.tiledesk.com/chat-ionic5/$version/index.html
 echo available on https://support-pre.tiledesk.com/chat-ionic5/index.html
 
-######### chat-ionic5-test - publish in pre with the projects right panel 
+######### chat-ionic5-panel - publish in pre with the projects right panel 
 # cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
-# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-test/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
+# aws s3 sync . s3://tiledesk-dashboard-pre/chat-ionic5-panel/
 # cd ../../../
 
 # aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
 
-# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-test/$version/
-# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-test/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/$version/index.html
-# echo available on https://support-pre.tiledesk.com/chat-ionic5-test/index.html
+# echo new version deployed on s3://tiledesk-dashboard-pre/chat-ionic5-panel/$version/
+# echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-dashboard-pre/chat-ionic5-panel/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/$version/index.html
+# echo available on https://support-pre.tiledesk.com/chat-ionic5-panel/index.html
 
 
 ####### chat ionic MQTT in pre da aggiungere in deploy_pre.sh

package/deploy_prod.sh

@@ -25,9 +25,13 @@ cp -p config.xml platforms/browser/www/
 
 ###### CHAT in prod
 cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
+aws s3 sync . s3://tiledesk-dashboard/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
 cd ../../../
+# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
+
+# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
+echo new version deployed on s3://tiledesk-console/v2/chat/$version/
 echo new version deployed on s3://tiledesk-console/v2/chat/
 echo available on https://console.tiledesk.com/v2/chat/$version/index.html
 echo available on https://console.tiledesk.com/v2/chat/index.html

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.61-rc5",
+    "version": "3.0.61-rc7",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {
@@ -39,16 +39,16 @@
         "autolinker": "^3.14.2",
         "cordova-android": "^6.2.3",
         "cordova-android-support-gradle-release": "^3.0.1",
-        "cordova-browser": "5.0.4",
+        "cordova-browser": "^5.0.4",
         "cordova-ios": "6.1.1",
         "cordova-plugin-chooser": "^1.3.2",
-        "cordova-plugin-device": "^2.0.2",
+        "cordova-plugin-device": "^2.0.3",
         "cordova-plugin-ionic-keyboard": "^2.2.0",
         "cordova-plugin-ionic-webview": "^4.2.1",
         "cordova-plugin-network-information": "^2.0.2",
-        "cordova-plugin-splashscreen": "^5.0.2",
-        "cordova-plugin-statusbar": "^2.4.2",
-        "cordova-plugin-whitelist": "^1.3.3",
+        "cordova-plugin-splashscreen": "^5.0.4",
+        "cordova-plugin-statusbar": "^2.4.3",
+        "cordova-plugin-whitelist": "^1.3.5",
         "cordova-res": "^0.15.1",
         "core-js": "^2.5.4",
         "firebase": "^8.6.7",

package/src/app/app.component.html

@@ -12,8 +12,8 @@
     </div>
  
     <ion-split-pane when="md" contentId="main">
-
-      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true,  'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
+      <!-- 'sidebar-visible': IS_ONLINE === true && SUPPORT_MODE === true, -->
+      <ion-nav #sidebarNav [root]="sidebarPage" [ngClass]="{'sidebar-hidden': IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}"></ion-nav>
       <!--  our side menu  -->
       <!-- <ion-router-outlet id="sidebar" name='sidebar' animated="false" #masterNav> -->
       <!-- <app-conversations-list></app-conversations-list> -->

package/src/app/app.component.scss

@@ -1,6 +1,7 @@
 .split-pane-md.split-pane-visible > .split-pane-side {
     min-width: 312px;
     display: block; // Safari bug fix
+    margin-left: 60px;
 }
 
 .sidebar-visible {
@@ -8,7 +9,7 @@
 }
 
 .sidebar-hidden {
-    margin-left: 0px;
+    margin-left: 0px !important;
 }
 
 .hide-sidebar {

package/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -549,8 +549,8 @@ export class AppComponent implements OnInit {
       currentUserId = currentUser.uid;
       this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUserId);
     }
-    this.translate.setDefaultLang('en');
-    this.translate.use('en');
+    // this.translate.setDefaultLang('en');
+    //   this.translate.use('en');
 
     const browserLang = this.translate.getBrowserLang();
     this.logger.log('[APP-COMP] browserLang: ', browserLang);
@@ -563,8 +563,19 @@ export class AppComponent implements OnInit {
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
     }
-
-    this.translate.use(chat_lang);
+  
+    this.logger.log('[APP-COMP] - chat_lang', chat_lang)
+  
+    if (tranlatedLanguage.includes(chat_lang)) {
+      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.translate.setDefaultLang(chat_lang)
+      this.translate.use(chat_lang);
+    }
+    else {
+      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.translate.setDefaultLang('en');
+      this.translate.use('en');
+    }
 
     // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
     // let language;
@@ -894,12 +905,12 @@ export class AppComponent implements OnInit {
   }
 
   /**
- * goOnLine:
- * 1 - nascondo splashscreen
- * 2 - recupero il tiledeskToken e lo salvo in chat manager
- * 3 - carico in d
- * @param user
- */
+  * goOnLine:
+  * 1 - nascondo splashscreen
+  * 2 - recupero il tiledeskToken e lo salvo in chat manager
+  * 3 - carico in d
+  * @param user
+  */
   goOnLine = () => {
     this.logger.log('[APP-COMP]- GO-ONLINE ');
     // this.isOnline = true;

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output, SimpleChange } from '@angular/core';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { convertMessage } from 'src/chat21-core/utils/utils';
@@ -13,7 +13,7 @@ import { NetworkService } from '../../../services/network-service/network.servic
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
-
+import { AlertController } from '@ionic/angular';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -24,8 +24,10 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 })
 export class IonListConversationsComponent extends ListConversationsComponent implements OnInit {
 
+  @Input() archiveActionNotAllowed: boolean;
   @Input() uidConvSelected: string;
   @Output() onCloseConversation = new EventEmitter<ConversationModel>();
+  @Output() onCloseAlert = new EventEmitter();
 
   convertMessage = convertMessage;
   isApp: boolean = false;
@@ -36,6 +38,10 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public PROJECT_FOR_PANEL: any;
   public archive_btn_tooltip: string;
   public resolve_btn_tooltip: string;
+  public alert_lbl: string;
+  public actionNotAllowed_lbl: string;
+  public youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl: string;
+public ok_lbl: string;
 
   tooltip_options = {
     'show-delay': 0,
@@ -61,7 +67,8 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
     public tiledeskAuthService: TiledeskAuthService,
-  
+    public alertController: AlertController
+
   ) {
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
@@ -88,23 +95,58 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     // 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');
     this.translateLbls();
-    
+
+  }
+  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());
+
+  }
+
+  ngOnChanges(changes: { [property: string]: SimpleChange }) {
+    // Extract changes to the input property by its name
+    let change: SimpleChange = changes['archiveActionNotAllowed'];
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnChanges change ', change);
+    // console.log('[ION-LIST-CONVS-COMP] - ngOnChanges change currentValue ', change.currentValue)
+    if (change && change.currentValue === true) {
+      this.pesentAlertActionNotAllowed()
+    }
+    // Whenever the data in the parent changes, this method gets triggered. You 
+    // can act on the changes here. You will have both the previous value and the 
+    // current value here.
   }
 
 
   translateLbls() {
     this.translate.get('Resolve')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
         this.resolve_btn_tooltip = text;
-        //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
-
       });
-      this.translate.get('Archive')
+
+    this.translate.get('Archive')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
         this.archive_btn_tooltip = text;
-        //  console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', text)
+      });
+
+    this.translate.get('ALERT_TITLE')
+      .subscribe((text: string) => {
+        this.alert_lbl = text;
+      });
+
+      this.translate.get('ActionNotAllowed')
+      .subscribe((text: string) => {
+        this.actionNotAllowed_lbl = text;
+      });
+
+      this.translate.get('YouAreNoLongerAmongTheTeammatesManagingThisConversation')
+      .subscribe((text: string) => {
+        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = text;
+      });
+
+      this.translate.get('CLOSE_ALERT_CONFIRM_LABEL')
+      .subscribe((text: string) => {
+        this.ok_lbl = text;
       });
   }
 
@@ -131,10 +173,29 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     moment.locale(chat_lang)
   }
 
-  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());
+
+
+  async pesentAlertActionNotAllowed() {
+
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: this.alert_lbl,
+      subHeader: this.actionNotAllowed_lbl,
+      message: this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl,
+      buttons: [
+        {
+          text: this.ok_lbl,
+          handler: () => {
+            this.alertClosed();
+            // console.log('Confirm Okay');
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+
+
   }
 
 
@@ -158,7 +219,9 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   //   });
   // }
 
-
+  alertClosed() {
+    this.onCloseAlert.emit(true)
+  }
 
   closeConversation(conversation: ConversationModel) {
     var conversationId = conversation.uid;

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

@@ -8,9 +8,9 @@
 
     <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
 
-      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container"
+        <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
           [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
           <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
         </div>
@@ -29,7 +29,8 @@
 
       </div>
       <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()"
+      <!-- (click)="onOpenCloseInfoConversation()" -->
+      <div *ngIf="conversationAvatar" class="tile-info-with" 
         [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
         <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
         <span class="tile-username">{{ conversation_with_fullname }} </span>

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

@@ -58,7 +58,7 @@ ion-header {
         top: 0;
         left: 50px;
         vertical-align: middle;
-        cursor: pointer;
+        // cursor: pointer;
     }
     .tile-point {
         width: 10px;

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

@@ -42,7 +42,7 @@
       
         <ng-container *ngIf="areVisibleCAR">
         <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top">
-          <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION">
+          <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION || disableTextarea">
             <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
           </ion-button>
         </div>
@@ -56,7 +56,7 @@
 
  
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"  placement="top">
-          <ion-button ion-button fill="clear" class="upload-image-btn">
+          <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
             <ion-icon slot="icon-only" lazy="true" name="attach-outline"
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
             <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
@@ -70,7 +70,7 @@
       <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
-          [(ngModel)]="messageString" (ionChange)="ionChange($event);"
+          [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"
           (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
         </ion-textarea>
       </div>

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

@@ -54,6 +54,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
+  @Input() disableTextarea: boolean;
 
   public conversationEnabled = false;
   public messageString: string;
@@ -69,6 +70,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public IS_SUPPORT_GROUP_CONVERSATION: boolean;
 
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
+  msg : string
 
   tooltipOptions = {
     'show-delay': 500,
@@ -123,6 +125,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
       this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
+   
     }
 
     if (this.conversationWith.startsWith("support-group")) {
@@ -130,7 +133,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       this.IS_SUPPORT_GROUP_CONVERSATION = false
     }
-
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     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][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
@@ -269,6 +272,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
         let content = event.clipboardData.getData('text/plain');
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onPaste content ", content);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onPaste this.messageString ", this.messageString);
+        this.msg = this.messageString
         setTimeout(() => {
           this.messageString = "";
         }, 100);
@@ -301,6 +306,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   onFileSelected(e: any) {
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected event', e);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected this.messageString ", this.messageString);
+    this.msg = this.messageString
+    setTimeout(() => {
+      this.messageString = "";
+    }, 100);
     this.presentModal(e);
 
   }
@@ -339,7 +349,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
     // this.logger.log('presentModal e.target.files.length', e.target.files.length);
 
-    const attributes = { files: dataFiles, enableBackdropDismiss: false };
+    const attributes = { files: dataFiles, enableBackdropDismiss: false , msg: this.msg};
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] attributes', attributes);
     const modal: HTMLIonModalElement =
       await this.modalController.create({