@chat21/chat21-ionic 3.0.76-rc.1 → 3.0.76-rc.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-ionic ver 3.0
 
+### 3.0.76-rc.2
+- added: canned component to manage canned responses
+- bug-fixed: if more than oe '/' is present in message-text-area and a canned is selected, replace canned text on the last '/' character in the message string
+- bug-fixed: close canned component if user click again on canned-icon-button
+
 ### 3.0.76-rc.1
 - changed: senderFullName in list conversation for guest users with guest#uuid[0..5]
 - added: multi-language to MEMBER_LEFT_GROUP and LEAD_UPDATED info messages

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.76-rc.1",
+    "version": "3.0.76-rc.2",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -1,4 +1,4 @@
-<div class="c21-body" (click)="hideMenuOption()">
+<div class="c21-body" (click)="hideOutsideElements()">
 
   <div class="c21-body-container">
   

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

@@ -256,7 +256,21 @@ export class ConversationContentComponent implements OnInit {
     return false;
   }
 
-  hideMenuOption() {
+  isSameSender(senderId, index):boolean{
+    if(senderId && this.messages[index - 1] && (senderId === this.messages[index - 1].sender)){
+      return true;
+    }
+    return false;
+  }
+
+  isFirstMessage(senderId, index):boolean{
+    if(senderId && index == 0 && this.messages[index] && (this.messages[index] !== senderId)){
+      return true;
+    }
+    return false;
+  }
+
+  hideOutsideElements() {
     this.onMenuOptionShow.emit(false)
   }
 

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

@@ -102,7 +102,7 @@
     </div>
 
     <!-- message RECIPIENT:: -->
-    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType)"
+    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)"
       class="message_sender_fullname">
       {{message.sender_fullname}}
     </div>

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -245,15 +245,22 @@ ion-item {
     // left: -26px;
 }
 
-:host .base_receive .msg_receive ::ng-deep div > div > ion-button {
+:host .base_receive .msg_receive ::ng-deep div > div > div > ion-button.canned {
     display: none;
     position: absolute;
     top: -3px;
     right: -31px;
 }
 
+:host .base_receive .msg_receive ::ng-deep div > div > div >ion-button.emoji {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -51px;
+}
+
 // :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
-:host .base_receive:hover .msg_receive ::ng-deep div > div > ion-button {
+:host .base_receive:hover .msg_receive ::ng-deep div > div > div > ion-button {
     display: block;
     // position: absolute;
     // top: -11px;

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -61,12 +61,19 @@
       </chat-html>
 
       <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
+        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
           [options]="tooltipOptions" placement="bottom">
           <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
         </ion-button>
       </ng-container>
+      <!-- <ng-container *ngIf="supportMode">
+        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
+          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
+          [options]="tooltipOptions" placement="bottom">
+          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
+        </ion-button>
+      </ng-container> -->
     </div>
   </div>
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -48,13 +48,15 @@
 
 }
 // > .button-native
-.btn-add-msg-as-canned-response {
-    // padding-left: 5px ;
-    // padding-right: 5px ;
+.btn-add-msg {
     border-radius: 50%;
     --padding-end: 7px;
     --padding-start: 7px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
+
+    ion-icon{
+        font-size: 1.2em;
+    }
 }
 
 

package/src/app/components/canned-response/canned-response.component.html

@@ -0,0 +1,26 @@
+<div id="canned">
+  <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0">
+    <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
+      class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
+      *ngFor="let canned of tagsCannedFilter; let i = index;"
+      (click)="onClickCannedFN(canned, $event)">
+      <div class="cannedContent">
+        <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [disabled]="canned.disabled"></ion-input>
+        <ion-input [(ngModel)]="canned.text" *ngIf="canned.text" class="text" [disabled]="canned.disabled"></ion-input>
+      </div>
+      <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
+      <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>
+      <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="canned.createdBy === loggedUser.uid" (click)="onDeleteCanned(canned, $event)"></ion-icon>
+    </ion-item>
+    <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
+      <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
+      <span class="add-canned-response-add-icon">+</span>
+     <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
+    </ion-item>
+  </ion-list>
+  <!-- <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
+    <ion-item button="true" >
+      There are no canned responses available
+    </ion-item>
+  </ion-list> -->
+</div>

package/src/app/components/canned-response/canned-response.component.scss

@@ -0,0 +1,141 @@
+.canned-item.add-canned-response-wpr:hover > span {
+    color: #1877f2;
+}
+
+.canned-item.add-canned-response-wpr:hover > ion-icon {
+    color: #1877f2;
+}
+
+.canned-item.add-canned-response-wpr:hover > label {
+    color: #1877f2;
+}
+
+.is_active_item {
+    // background-color: #eaf1fd!important;
+    --background: #eaf1fd !important;
+}
+
+
+
+.header {
+    display: flex;
+    flex-direction: row;
+    -webkit-box-pack: start;
+    justify-content: flex-end;
+    -webkit-box-align: center;
+    align-items: center;
+    border-bottom: 1px solid rgb(239, 242, 246);
+    padding: 0px 10px;
+    background: white;
+    width: 100%;
+    box-shadow: rgb(0, 27, 71, .24) 0px 8px 20px;
+    .canned-response-icon-header{
+        color: #3880ff !important;
+        font-size: 1.4em;
+        margin: 8px 5px;
+    }
+    
+}
+    
+.add-canned-response-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    font-size: 18px;
+}
+.add-canned-response-label {
+    color: #b3bfd0;
+    cursor: pointer;
+}
+.add-canned-response-add-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    left: -6px;
+}   
+
+.canned-list {
+    // position: absolute;
+    // bottom: 0;
+    background-color: white !important;
+    width: 100%;
+    max-height: 310px;
+    overflow-y: auto;
+    // padding: 10px 0;
+    // margin: 0;
+    margin-bottom: 1px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #080f1a;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // list-style: none;
+    z-index: 999999;
+
+    .cannedContent{
+        width: 100%;
+    }
+
+    ion-input {
+        --padding-bottom: 0px;
+        --padding-top: 0px;
+        &.text{
+            font-style: italic;
+        }
+        &.title {
+            font-weight: 500;
+        }
+    }
+    .native-input[disabled] {
+        opacity: 10 !important;
+    }
+    ion-icon {
+        zoom: 0.7;
+    }
+    .no-ripple {
+        --ripple-color: transparent;
+        --background-activated: transparent;
+    }
+
+    .border{
+        border-bottom: 1px dashed rgb(211, 219, 229) !important;
+        margin: 0px 4px
+    }
+
+
+}
+
+.canned-item {
+    -webkit-tap-highlight-color: transparent;
+    font-family: Lato, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    list-style: none;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // margin: 0 10px;
+    position: relative;
+    outline: none;
+    color: #434a54;
+    // padding: 10px;
+    padding: 5px;
+    width: auto;
+    cursor: pointer;
+    // .item-inner{
+    //     border: none!important;
+    // }
+}
+
+ion-item {
+    --background-hover: #1877f2 !important;
+    
+    .nocannedTitle {
+        color: #f44336;
+    }
+    .no-canned-available-text {
+        color: #1877f2 !important;
+    }
+    .no-canned-available-text:hover {
+        text-decoration: underline;
+    }
+}

package/src/app/components/canned-response/canned-response.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CannedResponseComponent } from './canned-response.component';
+
+describe('CannedResponseComponent', () => {
+  let component: CannedResponseComponent;
+  let fixture: ComponentFixture<CannedResponseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CannedResponseComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CannedResponseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/canned-response/canned-response.component.ts

@@ -0,0 +1,281 @@
+import { Component, Input, OnInit, SimpleChange, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
+import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { UserModel } from 'src/chat21-core/models/user';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { compareValues, htmlEntities } from 'src/chat21-core/utils/utils';
+
+@Component({
+  selector: 'app-canned-response',
+  templateUrl: './canned-response.component.html',
+  styleUrls: ['./canned-response.component.scss'],
+})
+export class CannedResponseComponent implements OnInit {
+
+  // @Input() tagsCannedFilter: any = []
+  @Input() conversationWith: string;
+  @Input() conversationWithFullname: string;
+  @Input() currentString: string;
+  @Input() translationMap: Map<string, string>;
+  @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
+  @Output() onClickCanned = new EventEmitter<any>();
+  @Output() onClickAddCannedResponse = new EventEmitter();
+  public loggedUser: UserModel
+  
+  public tagsCanned: any = []
+  public tagsCannedCount: number
+  public tagsCannedFilter: any = []
+
+  public arrowkeyLocation = -1
+  
+  private logger: LoggerService = LoggerInstance.getInstance();
+  constructor(
+    public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService,
+    public cannedResponsesService: CannedResponsesService,
+    public el: ElementRef
+  ) { }
+
+  ngOnInit() {
+    this.loggedUser = this.tiledeskAuthService.getCurrentUser()
+  }
+
+  ngOnChanges(changes: SimpleChange){
+    this.logger.debug('[CANNED] - loadTagsCanned strSearch ', this.currentString)
+    if(this.currentString !== undefined){
+      this.loadTagsCanned(this.currentString, this.conversationWith)
+    }
+  }
+
+  // ----------------------------------------------------------
+  // @ CANNED RESPONSES methods
+  // ----------------------------------------------------------
+  loadTagsCanned(strSearch, conversationWith) {
+    this.logger.log('[CANNED] - loadTagsCanned strSearch ', strSearch)
+    this.logger.log('[CANNED] - loadTagsCanned conversationWith ', conversationWith)
+
+    const conversationWith_segments = conversationWith.split('-')
+    // Removes the last element of the array if is = to the separator
+    if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
+      conversationWith_segments.pop()
+    }
+
+    this.logger.log('[CANNED] - loadTagsCanned conversationWith_segments ', conversationWith_segments)
+    let projectId = ''
+
+    if (conversationWith_segments.length === 4) {
+      projectId = conversationWith_segments[2]
+      this.logger.log('[CANNED] - loadTagsCanned projectId ', projectId)
+      this.getAndShowCannedResponses(strSearch, projectId)
+    } else {
+      this.getProjectIdByConversationWith(strSearch, this.conversationWith)
+    }
+  }
+
+  getProjectIdByConversationWith(strSearch, conversationWith: string) {
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+
+    this.tiledeskService.getProjectIdByConvRecipient(tiledeskToken, conversationWith).subscribe((res) => {
+      this.logger.log('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT RES', res)
+      if (res) {
+        const projectId = res.id_project
+        this.logger.log('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT projectId ', projectId)
+        if (projectId) {
+          this.getAndShowCannedResponses(strSearch, projectId)
+        }
+      }
+    }, (error) => {
+      this.logger.error('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - loadTagsCanned - GET PROJECTID BY CONV RECIPIENT * COMPLETE *')
+    })
+  }
+
+  getAndShowCannedResponses(strSearch, projectId) {
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CANNED] - loadTagsCanned tagsCanned.length', this.tagsCanned.length)
+    //if(this.tagsCanned.length <= 0 ){
+    this.tagsCanned = []
+    this.cannedResponsesService.getAll(tiledeskToken, projectId).subscribe((res) => {
+      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses RES', res)
+
+      this.tagsCanned = res
+      this.tagsCannedCount = res.length
+      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses tagsCannedCount', this.tagsCannedCount)
+      // if (this.HIDE_CANNED_RESPONSES === false) {
+        this.showTagsCanned(strSearch)
+      // }
+    }, (error) => {
+      this.logger.error('[CANNED] - loadTagsCanned  getCannedResponses - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - loadTagsCanned  getCannedResponses * COMPLETE *')
+    })
+  }
+
+  showTagsCanned(strSearch) {
+    this.logger.log('[CANNED] - showTagsCanned strSearch ', strSearch)
+    this.tagsCannedFilter = []
+    var tagsCannedClone = JSON.parse(JSON.stringify(this.tagsCanned))
+    this.logger.log('[CANNED] - showTagsCanned tagsCannedClone ', tagsCannedClone)
+    //this.logger.log("that.contacts lenght:: ", strSearch);
+    this.tagsCannedFilter = this.filterItems(tagsCannedClone, strSearch)
+    this.logger.log('[CANNED] - showTagsCanned tagsCannedFilter ', this.tagsCannedFilter)
+
+    this.tagsCannedFilter.sort(compareValues('title', 'asc'))
+    var strReplace = strSearch
+    if (strSearch.length > 0) {
+      strReplace = "<b class='highlight-search-string'>" + strSearch + '</b>'
+    }
+    // for (var i = 0; i < this.tagsCannedFilter.length; i++) {
+    //   let text = htmlEntities(this.tagsCannedFilter[i].text);
+    //   // const textCanned = "<div class='cannedText'>" + this.replacePlaceholderInCanned(this.tagsCannedFilter[i].text) + '</div>'
+    //   const textCanned = "<div class='cannedText'>" + this.replacePlaceholderInCanned(text) + '</div>'
+    //   let title = htmlEntities(this.tagsCannedFilter[i].title)
+    //   // this.tagsCannedFilter[i].title = "<div class='cannedContent'><div class='cannedTitle'>" + this.tagsCannedFilter[i].title.toString().replace(strSearch, strReplace.trim()) + '</div>' + textCanned + '</div>'
+    //   this.tagsCannedFilter[i].title = "<div class='cannedContent'><div class='cannedTitle'>" + title.toString().replace(strSearch, strReplace.trim()) + '</div>' + textCanned + '</div>'
+    // }
+    this.tagsCannedFilter.forEach(canned => {
+      canned.text = this.replacePlaceholderInCanned(canned.text);
+      canned.disabled = true
+    });
+    if (this.tagsCannedCount === 0) {
+      // const button = this.renderer.createElement('button');
+      // const buttonText = this.renderer.createText('Click me');
+      // this.renderer.appendChild(button, buttonText);
+      // console.log('[CANNED] - this.el.nativeElement ', this.el.nativeElement)
+      // this.renderer.listen(button, 'click', () => { alert('hi'); });
+      // let nocanned = {}
+      // if (this.USER_ROLE !== 'agent') {
+      const nocanned = {
+        // "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div><div class='cannedText'>" + this.translationMap.get('TO_CREATE_THEM_GO_TO_THE_PROJECT') + '</div></div>'
+        // <div class='cannedText no-canned-available-text'>" + this.translationMap.get('AddNewCannedResponse') + '</div>
+        title: this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') ,
+        text: '',
+      }
+      // } else if (this.USER_ROLE === 'agent') {
+      //   nocanned = {
+      //     // "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div><div class='cannedText'>" + this.translationMap.get('TO_CREATE_THEM_GO_TO_THE_PROJECT') + '</div></div>'
+      //     title:
+      //       "<div class='cannedContent'><div class='cannedTitle nocannedTitle #noCannedTitle'>" + this.translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE') + ".</div></div>",
+      //     text: 'There are no canned responses available',
+      //   }
+      // }
+      this.tagsCannedFilter.push(nocanned)
+    }
+    this.onLoadedCannedResponses.emit(this.tagsCannedFilter)
+  }
+
+  filterItems(items, searchTerm) {
+    this.logger.log('[CANNED] filterItems tagsCannedClone ', items, ' searchTerm: ', searchTerm)
+    //this.logger.log("filterItems::: ",searchTerm);
+    return items.filter((item) => {
+      //this.logger.log("filterItems::: ", item.title.toString().toLowerCase());
+      this.logger.log('[CANNED] filtered tagsCannedClone item ', item)
+      return item.title.toString().toLowerCase().indexOf(searchTerm.toString().toLowerCase()) > -1
+    })
+  }
+
+  replacePlaceholderInCanned(str) {
+    this.logger.log('[CANNED] - replacePlaceholderInCanned str ', str)
+    str = str.replace('$recipient_name', this.conversationWithFullname)
+    if (this.loggedUser && this.loggedUser.fullname) {
+      str = str.replace('$agent_name', this.loggedUser.fullname)
+    }
+    return str
+  }
+
+
+  onEditCanned(canned, ev){
+    ev.preventDefault()
+    ev.stopPropagation()
+    canned.disabled = false
+    this.logger.log('[CANNED] onEditCanned ', canned)
+    setTimeout(() => {
+      this.el.nativeElement.querySelector('#titleCanned_'+canned._id).setFocus()
+    }, 500);
+  }
+
+  onConfirmEditCanned(canned, ev){
+    ev.preventDefault()
+    ev.stopPropagation()
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CANNED] onConfirmEditCanned ', canned, ev)
+    this.cannedResponsesService.edit(tiledeskToken, canned.id_project, canned).subscribe(cannedRes=> {
+      canned.disabled = true
+    }, (error) => {
+      this.logger.error('[CANNED] - onConfirmEditCanned - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - onConfirmEditCanned * COMPLETE *')
+    })
+  }
+  
+  onDeleteCanned(canned, ev){
+    ev.preventDefault()
+    ev.stopPropagation()
+    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CANNED] onDeleteCanned ', canned)
+    this.cannedResponsesService.delete(tiledeskToken, canned.id_project, canned._id).subscribe(cannedRes=> {
+      if(cannedRes.status === 1000){
+        this.tagsCannedFilter.splice(this.tagsCannedFilter.findIndex(el => el._id === canned._id), 1)
+      }
+    }, (error) => {
+      this.logger.error('[CANNED] - onConfirmEditCanned - ERROR  ', error)
+    }, () => {
+      this.logger.log('[CANNED] - onConfirmEditCanned * COMPLETE *')
+    })
+  }
+
+  onClickCannedFN(canned, event){
+    if(!canned.disabled){
+      event.preventDefault();
+      event.stopPropagation();
+    } else if(this.tagsCannedCount > 0){
+      this.onClickCanned.emit(canned)
+    } else {
+      this.logger.log('[CANNED] THERE IS NOT CANNED ', canned.text)
+    }
+  }
+
+  onClickAddCannedResponseFN(){
+    this.onClickAddCannedResponse.emit()
+  }
+
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    this.logger.log("CONVERSATION-DETAIL handleKeyboardEvent  event.key ", event);
+
+    if (this.tagsCannedFilter.length > 0) {
+      if (event.key === 'ArrowDown') {
+        this.arrowkeyLocation++
+        if (this.arrowkeyLocation === this.tagsCannedFilter.length) {
+          this.arrowkeyLocation--
+        }
+        // this.replaceTagInMessage(this.tagsCannedFilter[this.arrowkeyLocation])
+      } else if (event.key === 'ArrowUp') {
+        if (this.arrowkeyLocation > 0) {
+          this.arrowkeyLocation--
+        } else if (this.arrowkeyLocation < 0) {
+          this.arrowkeyLocation++
+        }
+        // this.replaceTagInMessage(this.tagsCannedFilter[this.arrowkeyLocation])
+      }
+
+      if (event.key === 'Enter') {
+        const canned_selected = this.tagsCannedFilter[this.arrowkeyLocation]
+        this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned_selected ',canned_selected)
+        if (canned_selected) {
+          this.arrowkeyLocation = -1
+          this.tagsCannedFilter = []
+          this.onClickCanned.emit(canned_selected)
+          // event.preventDefault();
+          // return false;
+        }
+      }
+    }
+  }
+
+}

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

@@ -1,5 +1,5 @@
 import { UserModel } from 'src/chat21-core/models/user';
-import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, HostListener, Renderer2 } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, HostListener, Renderer2, SimpleChange, SimpleChanges } from '@angular/core';
 
 import { Chooser } from '@ionic-native/chooser/ngx';
 import { IonTextarea, ModalController, ToastController } from '@ionic/angular';
@@ -43,7 +43,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
-  @Input() tagsCannedFilter: any = [];
+  @Input() tagsCannedFilter: any;
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
@@ -54,8 +54,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() dropEvent: any;
   @Input() disableTextarea: boolean;
   @Output() eventChangeTextArea = new EventEmitter<object>();
-  @Output() hasClickedOpenCannedResponses = new EventEmitter<boolean>();
   @Output() eventSendMessage = new EventEmitter<object>();
+  @Output() onClickOpenCannedResponses = new EventEmitter<boolean>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
 
   public conversationEnabled = false;
@@ -69,6 +69,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
+  public openCanned: boolean = false;
   public IS_SUPPORT_GROUP_CONVERSATION: boolean;
   public IS_ON_MOBILE_DEVICE: boolean;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
@@ -140,9 +141,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   }
 
 
-
-
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
     if (this.translationMap) {
       // this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
       // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
@@ -580,7 +579,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   }
 
   openCannedResponses() {
-    this.hasClickedOpenCannedResponses.emit(true);
+    this.openCanned = !this.openCanned
+    this.onClickOpenCannedResponses.emit(this.openCanned);
   }
 
 
@@ -698,8 +698,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
     // 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() !== '') {