@chat21/chat21-ionic 3.0.61-rc11 → 3.0.61-rc12

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({
@@ -45,6 +46,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() tagsCannedFilter: any = [];
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
+  @Input() support_mode: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -68,9 +70,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   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
+  msg: string
 
   tooltipOptions = {
     'show-delay': 500,
@@ -82,7 +84,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     'hide-delay': 200
   };
 
-
+  showEmojiPicker: boolean = false; //To show/hide emoji picker
+  addWhiteSpaceBefore: boolean;
+  emojiPerLine: number = 9
   /**
    * Constructor
    * @param chooser 
@@ -96,6 +100,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     public uploadService: UploadService,
     public toastController: ToastController,
     private renderer: Renderer2,
+    public eventsService: EventsService
   ) { }
 
   // ---------------------------------------------------------
@@ -112,12 +117,24 @@ 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() {
     if (this.translationMap) {
       // this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
@@ -125,7 +142,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")) {
@@ -133,11 +150,12 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } 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)
 
@@ -218,8 +236,8 @@ 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);
-    
+  //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
+
 
 
     // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
@@ -349,7 +367,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 , msg: this.msg};
+    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({
@@ -546,28 +564,21 @@ 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)
+  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.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, "")
@@ -578,6 +589,64 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
+  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 !
   // --------------------------------

package/src/app/components/project-item/project-item.component.scss

@@ -477,7 +477,7 @@
     width: 22px;
     height: 22px;
     color: #fff;
-    // left: 28px;
+   
     left: 34px;
     border: 1px solid #fff;
 }

package/src/app/components/sidebar/sidebar.component.html

@@ -52,7 +52,7 @@
         #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center; ">
         <a class="customAncor" style="margin-right: 0px !important">
           <!-- <i class="material-icons sidebar-icons">chat</i> -->
-          <span id="openchat-span" style="position: relative;top: 10px;vertical-align: middle;">
+          <span id="openchat-span" style="position: relative;top: 9px;vertical-align: middle;">
             <svg id="openchat-svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23 21"
               style="enable-background:new 0 0 23 21;" xml:space="preserve"
@@ -93,7 +93,7 @@
             <span class="bot-icon-wpr">
               <svg version="1.1" id="Objects" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30"
-                style="enable-background:new 0 0 30 30;" xml:space="preserve" style="width: 25px;height: 25px;margin-top: 6px;">
+                style="enable-background:new 0 0 30 30;" xml:space="preserve" style="width: 25px;height: 25px;margin-top: 7px;">
                 <g>
                   <g>
                     <path class="chat-bot-icon-st0" d="M24.6,12.6c-0.1,0-0.2,0-0.3,0c-1.6-2.9-4.5-5.8-9.2-5.8c-4.7,0-7.6,2.9-9.2,5.8c-0.2,0-0.4-0.1-0.6-0.1
@@ -124,7 +124,7 @@
             <span  class="realtime-icon-wpr" >
 
               <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 30px;height: 30px;margin-top: 6px;">
+                viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 30px;height: 30px;margin-top: 5px;">
             
               <path class="realtime-icon-st3" d="M17.9,11.6l-1.4,1.9l-3.2-5.6l-1-2l-0.2,0.2l-3.7,6.4l-3-4.8L2.7,9.9v2.4l2.4-1.8L9,16.2l3.3-6.2l4,6.7l2.7-3.3
                 l0.9,0c0.5-0.7,1-1.4,1.4-2L17.9,11.6z"/>
@@ -156,7 +156,7 @@
             <!-- <i class="material-icons sidebar-icons">dashboard_customize</i> -->
             <span class="dashboard-customize-icon-wpr"> 
               <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 9px;">
+              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 10px;">
                 <path class="dashboard_customize-st0" d="M0,0h24v24H0V0z"/>
                 <path class="dashboard_customize-st1" d="M3,3h8v8H3V3z M13,3h8v8h-8V3z M3,13h8v8H3V13z M18,13h-2v3h-3v2h3v3h2v-3h3v-2h-3V13z"/>
               </svg>
@@ -177,7 +177,7 @@
             <!-- <i class="material-icons sidebar-icons">  bar_chart </i> -->
             <span class="bar-chart-icon-wpr"> 
               <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 9px;">
+              viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;margin-top: 10px;">
                 <path class="bar-chart-icon-st0" d="M0,0h24v24H0V0z"/>
                 <path class="bar-chart-icon-st1" d="M5,9.2h3V19H5V9.2z M10.6,5h2.8v14h-2.8V5z M16.2,13H19v6h-2.8V13z"/>
               </svg>
@@ -209,10 +209,10 @@
         </a>
       </li>
 
-      <!-- ------------------------------------------- -->
-      <!-- SETTINGS -->
-      <!-- ------------------------------------------- -->
-      <li *ngIf="USER_ROLE !== 'agent'" (click)="goToSettings_CannedResponses()" matTooltipClass="custom-mat-tooltip"
+      <!-- ----------------------------------------------------------------------------------- -->
+      <!-- SETTINGS // old: goToSettings_CannedResponses()  *ngIf="USER_ROLE !== 'agent'" -->
+      <!-- ----------------------------------------------------------------------------------- -->
+      <li (click)="goToWidgetSetUp()" matTooltipClass="custom-mat-tooltip"
         matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
         <a class="customAncor">
           <i class="material-icons sidebar-icons">settings</i>

package/src/app/components/sidebar/sidebar.component.ts

@@ -13,7 +13,7 @@ import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
 
 // utils
-import { avatarPlaceholder,  getColorBck} from 'src/chat21-core/utils/utils-user';
+import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
   selector: 'app-sidebar',
@@ -59,13 +59,13 @@ export class SidebarComponent implements OnInit {
     public appConfigProvider: AppConfigProvider,
     private translate: TranslateService,
     public events: EventsService,
-   
+
   ) { }
 
   ngOnInit() {
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl + '#/project/';
     // console.log('[SIDEBAR] DASHBOARD_URL ', this.DASHBOARD_URL)
-    this.getStoredProjectAndDashboardBaseUrl()
+    this.getStoredProjectAndUserRole()
     this.subcribeToAuthStateChanged()
     this.listenTocurrentProjectUserUserAvailability$()
     this.getOSCODE();
@@ -106,12 +106,12 @@ export class SidebarComponent implements OnInit {
   }
 
   checkIfExistPhotoProfile(imageUrl) {
-    this.verifyImageURL(imageUrl,  (imageExists) => {
+    this.verifyImageURL(imageUrl, (imageExists) => {
 
       if (imageExists === true) {
         this.USER_PHOTO_PROFILE_EXIST = true;
         this.logger.log('[SIDEBAR] photo_profile_URL IMAGE EXIST ', imageExists)
-      
+
       } else {
         this.USER_PHOTO_PROFILE_EXIST = false;
         this.logger.log('[SIDEBAR] photo_profile_URL IMAGE EXIST ', imageExists)
@@ -134,7 +134,7 @@ export class SidebarComponent implements OnInit {
       currentUser['fullname_initial'] = 'N/A'
       currentUser['fillColour'] = 'rgb(98, 100, 167)'
     }
-}
+  }
 
   verifyImageURL(image_url, callBack) {
     const img = new Image();
@@ -378,10 +378,7 @@ export class SidebarComponent implements OnInit {
   // }
   // }
 
-
-
-
-  getStoredProjectAndDashboardBaseUrl() {
+  getStoredProjectAndUserRole() {
     const stored_project = localStorage.getItem('last_project')
     // console.log('[SIDEBAR] stored_project ', stored_project)
     if (stored_project) {
@@ -452,6 +449,12 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
+  goToWidgetSetUp() {
+    let url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
   public translations() {
     const keys = [
       'Available',

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -107,4 +107,11 @@
         <div> Logout</div>
     </section>
 
+    <section class="user-details-footer-chat-version">
+        <div class="chat-version"> 
+        <!-- &copy; {{test | date: 'yyyy'}} {{company_name}} ver {{version}} -->
+        ver {{version}}
+        </div>
+    </section>
+
 </div>

package/src/app/components/sidebar-user-details/sidebar-user-details.component.scss

@@ -275,6 +275,18 @@ button.user-details-btn-close {
     color: #fff;
 }
 
+.user-details-footer-chat-version {
+    position: absolute;
+    bottom: 11px;
+    text-align: center;
+    margin: auto;
+    transform: translateX(-50%);
+    left: 50%;
+    margin: auto;
+    font-size: 12px;
+    font-weight: 400;
+}
+
 :host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
     background-color: #a9afbb;
     margin-left: 30px;
@@ -315,4 +327,4 @@ button.user-details-btn-close {
     font-weight: 400;
     font-family: "Poppins";
     font-size: 32px;
-}
+}

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -11,7 +11,8 @@ import { skip } from 'rxjs/operators';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { EventsService } from 'src/app/services/events-service';
 import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
-import { avatarPlaceholder,  getColorBck} from 'src/chat21-core/utils/utils-user';
+import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
+import * as PACKAGE from 'package.json';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
@@ -53,8 +54,10 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   public_Key: any
   plan_name: string;
   plan_subscription_is_active: boolean;
-   USER_PHOTO_PROFILE_EXIST: boolean;
- 
+  USER_PHOTO_PROFILE_EXIST: boolean;
+  version: string
+  test: Date = new Date();
+  company_name: string = 'Tiledesk'
   constructor(
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -68,6 +71,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
+    this.version = PACKAGE.version;
     this.getCurrentChatLangAndTranslateLabels();
     this.subcribeToAuthStateChanged();
     this.listenTocurrentProjectUserUserAvailability$();
@@ -95,12 +99,12 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   }
 
   checkIfExistPhotoProfile(imageUrl) {
-    this.verifyImageURL(imageUrl,  (imageExists) => {
+    this.verifyImageURL(imageUrl, (imageExists) => {
 
       if (imageExists === true) {
         this.USER_PHOTO_PROFILE_EXIST = true;
         this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
-      
+
       } else {
         this.USER_PHOTO_PROFILE_EXIST = false;
         this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
@@ -124,7 +128,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       currentUser['fullname_initial'] = 'N/A'
       currentUser['fillColour'] = 'rgb(98, 100, 167)'
     }
-}
+  }
 
   verifyImageURL(image_url, callBack) {
     const img = new Image();
@@ -198,7 +202,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
     }
 
-   
+
     if (tranlatedLanguage.includes(this.chat_lang)) {
       this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
       this.translate.use(this.chat_lang);

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

@@ -35,6 +35,9 @@ import { SharedModule } from 'src/app/shared/shared.module';
 // import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
 import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
+import { PickerModule } from '@ctrl/ngx-emoji-mart';
+
+
 @NgModule({
   imports: [
     CommonModule,
@@ -43,6 +46,7 @@ import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
     TooltipModule,
     ConversationDetailPageRoutingModule,
     ScrollbarThemeModule,
+    PickerModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,
@@ -58,7 +62,7 @@ import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,
-    MessageTextAreaComponent,
+    MessageTextAreaComponent
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,

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

@@ -1,7 +1,7 @@
 <span *ngIf="conversationWith && loggedUser; then showConversation else showPlaceholder"></span>
 <ng-template #showPlaceholder>
   <!-- class="splash-page" -->
-  <ion-content  padding >
+  <ion-content padding>
     <!-- <div padding class="image-splash-page"></div>
     <div padding class="title-splash-page">
       text new conversation + button
@@ -9,7 +9,8 @@
 
     <ion-grid style="height: 100%;">
       <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
-        <span *ngIf="isOnline === true  && !showSpinner" style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+        <span *ngIf="isOnline === true  && !showSpinner"
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
           <span *ngIf="conversation_count > 0 ">
             {{'PleaseSelectChatToStartMessaging' | translate }}
           </span>
@@ -34,8 +35,7 @@
   <app-header-conversation-detail [isMobile]="isMobile" [idLoggedUser]="loggedUser.uid"
     [conversationAvatar]="conversationAvatar" [translationMap]="translationMap"
     (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)"
-    [isOpenInfoConversation]="isOpenInfoConversation"
-    [conv_type]="conv_type">
+    [isOpenInfoConversation]="isOpenInfoConversation" [conv_type]="conv_type">
   </app-header-conversation-detail>
 
   <ion-content id="conv-details">
@@ -137,15 +137,24 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-
-            <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
-              <ion-list class="canned-list">
+            <div id="canned">
+              <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
                 <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
                   class="canned-item" id="{{'canned-item_'+ i }}"
                   *ngFor="let canned of tagsCannedFilter; let i = index;" [innerHtml]="canned.title"
                   (click)="replaceTagInMessage(canned, $event)">
                 </ion-item>
+                <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="presentCreateCannedResponseModal()">
+                  <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>
 
 
@@ -156,15 +165,14 @@
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [loggedUser]="loggedUser"
-              [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
+              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [support_mode]="support_mode"
+              [loggedUser]="loggedUser" [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
               (eventChangeTextArea)="returnChangeTextArea($event)"
               (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
               (eventSendMessage)="returnSendMessage($event)" [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
               [isOpenInfoConversation]="isOpenInfoConversation" [dropEvent]="dropEvent"
-              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)"
-              [disableTextarea]="disableTextarea">
+              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)" [disableTextarea]="disableTextarea">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
           </ion-row>

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

@@ -25,6 +25,34 @@
     font-size: 24px;
 }
 
+.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 > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
+    color: #1877f2;
+}
+
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > ion-icon {
+    color: #1877f2;
+}
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > label {
+    color: #1877f2;
+}
+
 // ion-back-button{
 //     display: none!important;
 // }