@chat21/chat21-ionic 3.0.59 → 3.0.60-rc8

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

@@ -1,64 +1,89 @@
-<ion-grid>
+<!-- <ion-grid>
   <ion-row id="message-text-area">
-
     <ion-col col-auto>
-
       <div class="buttons-left">
-    
-        <!-- <ion-button class="attach-button" ion-button fill="clear" style="display: none;">
-          <input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput" />
-          <label for="fileInput" icon-only ion-button>
-            <ion-icon slot="icon-only" name="attach"></ion-icon>
-          </label>
-        </ion-button> -->
 
         <ion-button ion-button fill="clear" class="upload-image-btn">
-          
-          <ion-icon slot="icon-only" lazy="true" name="attach-outline" style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
-          <!-- <ion-label slot="end">Upload Image</ion-label> -->
-          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, .pdf,.zip"> -->
-          <!-- https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv?rq=1 -->
-          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, audio/* ,video/*, text/html, text/plain, .csv, .pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .scss, .css, .json"> -->
+          <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"
             [accept]="fileUploadAccept">
-
         </ion-button>
       </div>
 
-
       <div class="text-message">
-        <!-- [value]=""  -->
-        <!-- placeholder="{{ 'LABEL_ENTER_MSG' | translate }}" -->
-        <!-- (ionBlur)="txtfocus(0)" -->
-        <!-- autofocus="true" -->
-        <!-- autoFocus="true" // directive -->
-
-        <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);"
-          (keydown.enter)="onKeydown($event, messageString)"
-          (paste)="onPaste($event)">
+        <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);"
+          (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
         </ion-textarea>
-        <!-- (ionInput)="onChange($event);" -->
       </div>
 
       <div class="buttons-right">
-        <!-- [disabled]="conversationEnabled === false" -->
-        <ion-button [disabled]="conversationEnabled === false"  class="send-button right active" ion-button fill="clear"
+        <ion-button [disabled]="conversationEnabled === false" class="send-button right active" ion-button fill="clear"
           (click)="sendMessage(messageString)">
-          <ion-icon [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }" slot="icon-only" name="send"></ion-icon>
+          <ion-icon
+            [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }"
+            slot="icon-only" name="send"></ion-icon>
         </ion-button>
       </div>
     </ion-col>
+  </ion-row>
+</ion-grid> -->
 
+<!-- --------------------------------------------------------------------------------------------------------------------- -->
+<!-- ----------new -->
+<ion-grid>
+  <ion-row id="message-text-area">
 
+    <ion-col col-auto>
 
+      <div class="start-buttons" style="position: absolute;display: flex;"> 
+      
+        <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-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
+          </ion-button>
+        </div>
+        <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0" tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="no-canned-responses-btn-badge">
+          <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
+        </div>
+        <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0" tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="canned-responses-btn-badge">
+          <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
+        </div>
+      </ng-container>
 
-  </ion-row>
+ 
+        <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-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"
+              [accept]="fileUploadAccept">
+             
+          </ion-button>
+         
+        </div>
+      </div>
+
+      <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);"
+          (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
+        </ion-textarea>
+      </div>
 
+      <div class="buttons-right">
+        <ion-button [disabled]="conversationEnabled === false" class="send-button right active" ion-button fill="clear"
+          (click)="sendMessage(messageString)">
+          <ion-icon
+            [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }"
+            slot="icon-only" name="send"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-col>
+
+  </ion-row>
 </ion-grid>

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

@@ -42,8 +42,10 @@
     }
     .text-message {
         position: relative;
-        margin: 0 35px;
-        width: calc(100% - 70px);
+        // margin: 0 35px;
+        // width: calc(100% - 70px);
+        margin: 0 70px;
+        width: calc(100% - 100px);
         ion-textarea {
             // border-radius: 4px;
             border-radius: 20px; // NK edited
@@ -65,6 +67,10 @@
             font-size: 15px;
         }
     }
+    .text-message-no-cr {
+         margin: 0 35px !important;
+        width: calc(100% - 70px) !important;
+    }
 }
 
 #fileInput {
@@ -97,10 +103,52 @@
     --border-radius: 50%;
     --padding-end: 1px;
     --padding-start: 1px;
+    height: 33px !important;
+}
 
+
+.canned-responses-btn {
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 2px;
+    --padding-start: 2px;
     height: 33px !important;
+    width: 33px;
+} 
+
+.no-canned-responses-btn-badge {
+    position: absolute;
+    font-size: 12px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 1px 2px;
+    top: 4px;
+    color: red;
+    left: -3px;
+    cursor: pointer;
+}
+.no-canned-responses-btn-badge:hover {
+    background-color: rgba(0, 0, 0, 0.05);;
 }
 
+.canned-responses-btn-badge {
+    position: absolute;
+    font-size: 12px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 1px 2px;
+    top: 4px;
+    color: #92949c;
+    left: -3px;
+    cursor: pointer;
+}
+
+.canned-responses-btn-badge:hover {
+    background-color: rgba(0, 0, 0, 0.05);;
+}
+
+
 .upload-image-btn .button-native {
     border-radius: 50%;
 }

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

@@ -43,13 +43,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
-
+  @Input() tagsCannedCount: number;
+  @Input() areVisibleCAR: 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>();
 
@@ -64,9 +66,21 @@ 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;
 
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
 
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+
+
   /**
    * Constructor
    * @param chooser 
@@ -103,15 +117,25 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
 
   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 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 +144,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 +171,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 +183,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 +206,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;
-    // }
   }
 
   // -------------------------------------------------------------------------------------------
@@ -228,36 +216,20 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   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;
-
-
-    } 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) {
@@ -459,7 +431,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 +448,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       this.conversationEnabled = false;
     }
 
-
     this.eventChangeTextArea.emit({ msg: message, offsetHeight: height });
   }
 
@@ -530,7 +501,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 +510,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);
@@ -565,15 +536,34 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       }
     }
   }
+  openCannedResponses() {
+    // console.log('[MSG-TEXT-AREA] has clicked OPEN-CANNED-RESPONSES messageString ', this.messageString)
+    // if (this.messageString) {
+    //   console.log('[MSG-TEXT-AREA] has clicked OPEN-CANNED-RESPONSES messageString.trim ', this.messageString.trim)
+    // }  
+    // if (this.messageString === undefined) {
+    //   this.messageString = '/'
+    // } else {
+
+    // }
+
+    // const elTextArea = this.message_text_area['el'];
+    // console.log('[MSG-TEXT-AREA]   textArea elTextArea ', elTextArea)
+    // const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
+    // console.log("[MSG-TEXT-AREA]   textArea textArea ", textArea);
+    // this.logger.log("[MSG-TEXT-AREA]   textArea value", textArea.value)
+
+    this.hasClickedOpenCannedResponses.emit(true);
+  }
 
 
   sendMessage(text: string) {
-    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] sendMessage', text);
+    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 });
     }
   }
@@ -625,11 +615,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/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);
     }
   }