@chat21/chat21-ionic 3.0.5-9.2 → 3.0.6-2.3

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

@@ -18,6 +18,7 @@ import { checkPlatformIsMobile } from 'src/chat21-core/utils/utils';
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { EventsService } from 'src/app/services/events-service';
 
 
 @Component({
@@ -43,15 +44,19 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
-
+  @Input() tagsCannedCount: number;
+  @Input() areVisibleCAR: boolean;
+  @Input() support_mode: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;
   @Output() eventChangeTextArea = new EventEmitter<object>();
+  @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
+  @Input() disableTextarea: boolean;
 
   public conversationEnabled = false;
   public messageString: string;
@@ -64,9 +69,24 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
-
+  public IS_SUPPORT_GROUP_CONVERSATION: boolean;
+  public IS_ON_MOBILE_DEVICE: boolean;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
-
+  msg: string
+
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+
+  showEmojiPicker: boolean = false; //To show/hide emoji picker
+  addWhiteSpaceBefore: boolean;
+  emojiPerLine: number = 9
   /**
    * Constructor
    * @param chooser 
@@ -80,6 +100,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     public uploadService: UploadService,
     public toastController: ToastController,
     private renderer: Renderer2,
+    public eventsService: EventsService
   ) { }
 
   // ---------------------------------------------------------
@@ -88,7 +109,12 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   ngOnInit() {
     // this.setSubscriptions();
+
     this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] HELLO !!!!! ");
+    this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] areVisibleCAR ", this.areVisibleCAR);
+    if (this.areVisibleCAR === false) {
+      this.emojiPerLine = 7
+    }
     // this.events.subscribe((cannedmessage) => {
     //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] events.subscribe cannedmessage ", cannedmessage);
     // })
@@ -96,22 +122,46 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] LONG_TEXAREA_PLACEHOLDER ", this.LONG_TEXAREA_PLACEHOLDER);
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORT_TEXAREA_PLACEHOLDER ", this.SHORT_TEXAREA_PLACEHOLDER);
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORTER_TEXAREA_PLACEHOLDER ", this.SHORTER_TEXAREA_PLACEHOLDER);
-
+    this.listenToNewCannedResponseCreated()
     this.getWindowWidth();
+    this.isOnMobileDevice()
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+      this.emojiPerLine = 7
+    }
+    // this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
 
 
-  ngOnChanges() {
 
+
+  ngOnChanges() {
     if (this.translationMap) {
-      this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
-      this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
-      this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
+      // this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
+      // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
+      // 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")) {
+      this.IS_SUPPORT_GROUP_CONVERSATION = true
+    } else {
+      this.IS_SUPPORT_GROUP_CONVERSATION = false
+    }
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges support_mode ', this.support_mode)
+    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);
+
+
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)
 
     // use case drop
@@ -120,21 +170,20 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
     // if (this.isOpenInfoConversation === true) {
     // this.getIfTexareaIsEmpty('ngOnChanges')
-    this.getWindowWidth();
+    // this.getWindowWidth();
     // }
   }
 
   // ngAfterViewInit() {
   ngAfterViewInit() {
 
-    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);
+    // console.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit message_text_area ", this.message_text_area);
+    // console.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit messageTextArea ", this.messageTextArea);
     if (this.messageTextArea) {
       setTimeout(() => {
 
-
         const elTextArea = this.message_text_area['el'];
-        // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elTextArea ", elTextArea);
+        // console.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) {
 
@@ -148,10 +197,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
           }
         }
 
-
         // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] set focus on ", this.messageTextArea);
         // Keyboard.show() // for android
-
         this.messageTextArea.setFocus();
 
       }, 1500); //a least 150ms.
@@ -162,46 +209,19 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   getWindowWidth(): any {
     this.currentWindowWidth = window.innerWidth;
 
-    // if ((this.currentWindowWidth < 1045 && this.currentWindowWidth > 835) && this.isOpenInfoConversation === true) {
-    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] DISPLAY SHORT_TEXAREA_PLACEHOLDER ");
-    //   // this.TEXAREA_PLACEHOLDER = '';
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (this.currentWindowWidth < 835 && this.isOpenInfoConversation === true) {
-    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] DISPLAY SHORTER_TEXAREA_PLACEHOLDER ");
-
 
+    // if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    //   this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth', this.currentWindowWidth, ' - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
+    // } else if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
     //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-    //   // this.TEXAREA_PLACEHOLDER = '';
-
-    // } else 
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth ", this.currentWindowWidth);
-    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] isOpenInfoConversation', this.isOpenInfoConversation);
-    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] this.conversationWith.startsWith("support-group")', this.conversationWith.startsWith("support-group"));
-
-
-    if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-
-      this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-
-      this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth', this.currentWindowWidth, ' - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
-
-
-    } else if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-      this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
-
-    } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-
-      this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
-    } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-
-      this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-
-    } else if (!this.conversationWith.startsWith("support-group")) {
-      this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
-    }
+    // } else if (!this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // }
 
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ", checkPlatformIsMobile());
     if (checkPlatformIsMobile() === true) {
@@ -212,13 +232,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       } else if (this.currentWindowWidth <= 273) {
         this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
       }
-
     }
-    // if (checkPlatformIsMobile &&  this.currentWindowWidth <= 430) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (checkPlatformIsMobile &&  this.currentWindowWidth > 430) { 
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    // }
   }
 
   // -------------------------------------------------------------------------------------------
@@ -227,37 +241,21 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     // this.getIfTexareaIsEmpty('onResize')
-    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
-    // if ((event.target.innerWidth < 1045 && event.target.innerWidth > 835) && this.isOpenInfoConversation === true) {
-    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA]  ON RESIZE DISPAY SHORT_TEXAREA_PLACEHOLDER");
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth < 835 && this.isOpenInfoConversation === true) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-    // } else {
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-
-
-    if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-      this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-      // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - else - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
-      // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - else - this.currentWindowWidth ', this.currentWindowWidth);
-
-    } else if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-      this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
+    //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
 
-    } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
 
-      this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
 
-    } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-
-      this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-
-    } else if (!this.conversationWith.startsWith("support-group")) {
-      this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
-    }
+    // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+    // } else if (!this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // }
 
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ', checkPlatformIsMobile());
     if (checkPlatformIsMobile() === true) {
@@ -297,6 +295,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);
@@ -329,6 +329,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);
 
   }
@@ -367,7 +372,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({
@@ -459,7 +464,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ionChange detail.value ", e.detail.value);
 
     const message = e.detail.value
-    // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange message ", message);
+    this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange message ", message);
     // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange  this.messageString ", this.messageString);
     const height = e.target.offsetHeight + 20; // nk added +20
     // this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] ionChange text-area height ", height);
@@ -476,7 +481,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       this.conversationEnabled = false;
     }
 
-
     this.eventChangeTextArea.emit({ msg: message, offsetHeight: height });
   }
 
@@ -530,7 +534,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         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);
-      
+
         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);
@@ -539,7 +543,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
         this.sendMessage(text);
         this.countClicks = 0
-      } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/' ) {
+      } 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);
@@ -566,18 +570,88 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
+  listenToNewCannedResponseCreated() {
+    this.eventsService.subscribe('newcannedresponse:created', (openCannedResponses) => {
+      this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - listenToNewCannedResponseCreated - openUserDetailsSidebar', openCannedResponses);
+      this.openCannedResponses()
+    });
+  }
+
+  openCannedResponses() {
+    this.hasClickedOpenCannedResponses.emit(true);
+  }
+
 
   sendMessage(text: string) {
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage', text);
+    this.showEmojiPicker = false;
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage text', text);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage conve width', this.conversationWith);
     // text.replace(/\s/g, "")
     this.messageString = '';
     // text = text.replace(/(\r\n|\n|\r)/gm, '');
-    if (text.trim() !== '') {
+    if (text && text.trim() !== '') {
       this.eventSendMessage.emit({ message: text, type: TYPE_MSG_TEXT });
     }
   }
 
+  addEmoji($event) {
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI $event', $event)
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI $event > emoji', $event.emoji)
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI $event > emoji  > native', $event.emoji.native)
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI messageString', this.messageString)
+    if (this.messageString === undefined) {
+      this.addWhiteSpaceBefore = false;
+      // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI addWhiteSpaceBefore ',  this.addWhiteSpaceBefore)
+    } else {
+      this.addWhiteSpaceBefore = true
+      // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI addWhiteSpaceBefore ',  this.addWhiteSpaceBefore)
+    }
+    const elTextArea = this.message_text_area['el'];
+    // console.log('[CONVS-DETAIL][MSG-TEXT-AREA] ADD EMOJI elTextArea ',  elTextArea)
+    this.insertAtCursor(elTextArea, $event.emoji.native)
+  }
+
+  insertAtCursor(myField, myValue) {
+    this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - myValue ', myValue);
+
+    if (this.addWhiteSpaceBefore === true) {
+      myValue = ' ' + myValue;
+      this.logger.log('[CANNED-RES-EDIT-CREATE] - GET TEXT AREA - QUI ENTRO myValue ', myValue);
+    }
+
+    //IE support
+    if (myField.selection) {
+      myField.focus();
+      let sel = myField.selection.createRange();
+      sel.text = myValue;
+      // this.cannedResponseMessage = sel.text;
+    }
+    //MOZILLA and others
+    else if (myField.selectionStart || myField.selectionStart == '0') {
+      var startPos = myField.selectionStart;
+      this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - startPos ', startPos);
+
+      var endPos = myField.selectionEnd;
+      this.logger.log('[CANNED-RES-EDIT-CREATE] - insertAtCursor - endPos ', endPos);
+
+      myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
+
+      // place cursor at end of text in text input element
+      myField.focus();
+      var val = myField.value; //store the value of the element
+      myField.value = ''; //clear the value of the element
+      myField.value = val + ' '; //set that value back. 
+
+
+      // myField.select();
+    } else {
+      myField.value += myValue;
+
+    }
+  }
+
+
+
   // --------------------------------
   // on mobile !
   // --------------------------------
@@ -625,11 +699,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     // 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"

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

@@ -1,24 +1,38 @@
+<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
-<ion-toolbar>
-  
-  <ion-buttons slot="start">
+  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <ion-title>
-    <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo">
+    <!-- <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo"> -->
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+    <ion-button ion-button fill="clear" (click)="presentCreateTicketModal()"
+      tooltip="{{translationMap?.get('CreateTicket')}}" [options]="tooltipOptions" placement="bottom">
+      <ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
+    </ion-button>
+
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()" 
+      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" [options]="tooltipOptions" placement="bottom">
+      <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
+      <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
+      <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
+    </ion-button>
+
+    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
+    tooltip="{{translationMap?.get('ViewContactsList')}}" [options]="tooltipOptions" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+      <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->
+
     </ion-button>
 
-    <!-- <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
+    <!--   <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
       <span class="material-icons">history</span>
     </button>
 

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

@@ -23,4 +23,8 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
+}
+
+.bottom-border-on-mobile {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

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

@@ -1,18 +1,77 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+import { EventsService } from 'src/app/services/events-service'
+import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service'
 @Component({
   selector: 'app-ddp-header',
   templateUrl: './ddp-header.component.html',
   styleUrls: ['./ddp-header.component.scss'],
 })
 export class DdpHeaderComponent implements OnInit {
-  @Input() numberOpenConv: number;
-  @Input() supportMode: boolean;
-  @Output() openContactsDirectory = new EventEmitter();
-  @Output() openProfileInfo = new EventEmitter();
-
+  @Input() numberOpenConv: number
+  @Input() supportMode: boolean
+  @Input() archived_btn: boolean
+  @Input() writeto_btn: boolean
+  @Output() openContactsDirectory = new EventEmitter()
+  @Output() openProfileInfo = new EventEmitter()
+  IS_ON_MOBILE_DEVICE: boolean
+  createTicketModal = null
+  public translationMap: Map<string, string>;
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 0
+  };
   constructor(
-  ) { }
+    public events: EventsService,
+    public modalController: ModalController,
+    private translateService: CustomTranslateService,
+  ) {
+    this.isOnMobileDevice();
+    this.translations();
+    // this.listenToCloseCreateTicketModal() // published from create ticket page
+  }
+
+  public translations() {
+    const keys = [
+      'CreateTicket',
+      'ViewArchivedConversations',
+      'ViewContactsList'
+    ];
+    this.translationMap = this.translateService.translateLanguage(keys);
+  }
+
+  // listenToCloseCreateTicketModal() {
+  //   this.events.subscribe('closeModalCreateTicket', (bool) => {
+  //     console.log('[HEADER-CONV] closeModalCreateTicket ', bool)
+  //     if (bool === true) {
+  //       this.closeCreateTicketModal()
+
+  //     }
+  //   })
+  // }
+
+  // closeCreateTicketModal() {
+  //   if (this.createTicketModal) {
+  //     this.createTicketModal.dismiss().then(() => {
+  //       this.createTicketModal = null;
+  //     });
+  //   }
+  // }
+
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true
+    }
+    // console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE
+  }
 
   ngOnInit() {
     // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
@@ -21,13 +80,48 @@ export class DdpHeaderComponent implements OnInit {
   // START @Output() //
   /** */
   onOpenProfileInfo(e: any) {
-    this.openProfileInfo.emit(e);
+    this.openProfileInfo.emit(e)
   }
 
   /** */
   onOpenContactsDirectory(e: any) {
-    this.openContactsDirectory.emit(e);
+    this.openContactsDirectory.emit(e)
   }
   // END @Output() //
 
+  onClickArchivedConversation() {
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived')
+  }
+
+  // PRESENT MODAL CREATE TICKET
+  // async presentCreateTicketModal(): Promise<any>{
+
+  //   // const attributes = {  enableBackdropDismiss: false };
+  //   const modal: HTMLIonModalElement =
+  //     await this.modalController.create({
+  //       component: CreateTicketPage,
+  //       // componentProps: attributes,
+  //       swipeToClose: false,
+  //       backdropDismiss: false
+  //     });
+  //   modal.onDidDismiss().then((detail: any) => {
+  //     console.log('[DDP-HEADER] ', detail.data);
+  //   });
+  //   return await modal.present();
+  // }
+
+  async presentCreateTicketModal() {
+    // const attributes = {  enableBackdropDismiss: false };
+    const modal = await this.modalController.create({
+      component: CreateTicketPage,
+      // componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((detail: any) => {
+      // console.log('[DDP-HEADER] ', detail.data)
+    })
+    modal.present()
+    this.createTicketModal = modal
+  }
 }

package/src/app/components/image-viewer/image-viewer.component.scss

@@ -70,7 +70,7 @@
     text-decoration: none;
     cursor: pointer;
     svg {
-        fill: rgba(255,255,255);
+        fill: rgba(255,255,255, 1);
     }
   }
 
@@ -95,7 +95,7 @@
     text-decoration: none;
     cursor: pointer;
     svg {
-        fill: rgba(255,255,255);
+        fill: rgba(255,255,255, 1);
     }
   }