@chat21/chat21-ionic 3.0.60 → 3.0.61-rc14

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

@@ -54,7 +54,19 @@
 <!-- ----------------------------------------------------------- -->
 
 <div class="conversation-wpr" style="height: 100%;">
-  <div *ngFor="let message of messages; let i = index">
+  <div *ngFor="let message of messages; let i = index; let first = first; trackBy: trackByFn">
+
+    <ng-container *ngIf="first || (messages[i - 1].timestamp | date:'d') !== (message.timestamp | date:'d')">
+      <div class="long-date-divider-wpr">
+          <div class="long-date-divider-border-b"></div>
+          <div class="long-date-divider">
+              <!-- {{message.timestamp | date: 'longDate' : 'it'}} -->
+              {{message.timestamp | amDateFormat:'LL'}}
+              
+          </div>
+          <div class="long-date-divider-border-b"></div>
+      </div>
+  </ng-container>
 
     <div class="align-center" class="ion-text-center" *ngIf="messageType(MESSAGE_TYPE_INFO, message)"
       class="msg_info_container">
@@ -67,13 +79,16 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      <chat-bubble-message  [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}"
+      <chat-bubble-message style="position: relative;"  [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}"
         class="messages msg_sent" id="message_msg_sent"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" [message]="message"
         [textColor]="'col-msg-sent'" 
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)">
+        (onImageRendered)="onImageRenderedFN($event)"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText"
+        [areVisibleCAR]="areVisibleCAR"
+        [support_mode]="support_mode">
       </chat-bubble-message>
 
       <!-- icon status message -->
@@ -99,12 +114,15 @@
 
       <!--backgroundColor non viene ancora usato -->
       
-      <chat-bubble-message [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive" id="message_msg_receive"
+      <chat-bubble-message style="position: relative;" [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive" id="message_msg_receive"
         [message]="message" 
         [textColor]="'black'"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
-        (onImageRendered)="onImageRenderedFN($event)">
+        (onImageRendered)="onImageRenderedFN($event)"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText"
+        [areVisibleCAR]="areVisibleCAR"
+        [support_mode]="support_mode" >
       </chat-bubble-message>
     </div>
 

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

@@ -2,29 +2,30 @@
     color: lightblue;
 }
 
-:host .base_sent .msg_sent ::ng-deep div > div > div > chat-text > p > p  {
-    margin-top:12px !important;
+:host .base_sent .msg_sent ::ng-deep div > div > div > chat-text > p > p {
+    margin-top: 12px !important;
     // white-space: nowrap;
     // overflow: hidden;
     // text-overflow: ellipsis;
 }
 
-:host .base_sent .msg_sent ::ng-deep > div > div > chat-image > div  {
+:host .base_sent .msg_sent ::ng-deep > div > div > chat-image > div {
     // display: none !important;
     // border-radius: unset !important;
-    img, .loader { 
+    img,
+    .loader {
         border-top-right-radius: 6px !important;
         border-top-left-radius: 16px !important;
         border-bottom-left-radius: 16px !important;
         border-bottom-right-radius: 0px;
     }
-    
 }
 
 :host .base_receive .msg_receive ::ng-deep > div > div > chat-image > div > img {
     // display: none !important;
     // border-radius: unset !important;
-    img, .loader { 
+    img,
+    .loader {
         border-top-left-radius: 6px !important;
         border-top-right-radius: 16px !important;
         border-bottom-right-radius: 16px !important;
@@ -38,9 +39,8 @@ ion-item {
     --min-height: 20px;
     --border-style: none;
 
-    .input-wrapper{
-
-        .align-center{
+    .input-wrapper {
+        .align-center {
             display: block;
         }
     }
@@ -53,12 +53,12 @@ ion-item {
     //opacity: 0px;
 }
 
-.msg_info_container{
+.msg_info_container {
     text-align: center;
     padding: 2px 0px 2px 0px;
 }
 
-.message_sender_fullname{
+.message_sender_fullname {
     font-size: 0.7em;
     margin: 0 0 1px 10px;
     color: var(--gray);
@@ -72,15 +72,15 @@ ion-item {
     // padding: 6px 6px 6px 6px;
     // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     // -webkit-animation: heartbeat 1.5s ease-in-out both;
-    // animation: heartbeat 1.5s ease-in-out both;                    
+    // animation: heartbeat 1.5s ease-in-out both;
 }
-                
+
 /* send message */
 .base_sent {
     align-items: flex-end;
     justify-content: flex-end;
-    padding: 2px 0px 4px 40px;
-
+    // padding: 2px 0px 4px 40px;
+    padding: 2px 0px 14px 40px; // edited to display the date at the bottom of the "message bubble"
     .msg_sent {
         background-color: var(--bobble-blue);
         color: var(--col-msg-sent);
@@ -89,18 +89,21 @@ ion-item {
         max-width: calc(100% - 70px);
         min-width: 14px;
         border-top-right-radius: 8px;
-        border-bottom-right-radius: 0px; 
-     
+        border-bottom-right-radius: 0px;
     }
+    // .msg_sent:hover {
+    //     background-color: rgba(0, 153, 255, 0.6);
+    // }
 
     .has-metadata {
         max-width: 100% !important;
     }
 }
-    
+
 /** recive message **/
 .base_receive {
-    padding: 0px 0px 6px 0px;
+    // padding: 0px 0px 6px 0px;
+    padding: 0px 0px 15px 0px; // edited to display the date at the bottom of the "message bubble"
     /* avatar */
     .content-avatar {
         position: relative;
@@ -109,7 +112,7 @@ ion-item {
         height: 28px;
         margin-right: 6px;
 
-        .profile_image{
+        .profile_image {
             position: relative;
             width: 25px;
             height: 25px;
@@ -118,7 +121,7 @@ ion-item {
             background-color: #ffffff;
             border: 1px solid #e2e2e2;
         }
-        .profile_image img{
+        .profile_image img {
             max-width: 100%;
             width: 100%;
             height: 100%;
@@ -139,15 +142,18 @@ ion-item {
         width: auto;
         border-top-left-radius: 8px;
         border-bottom-left-radius: 0px;
+    }
+
+    // .msg_receive:hover {
+    //     background-color: rgba(247, 247, 247, 0.6);
+    // }
 
-    }          
-    
     .has-metadata {
         max-width: 100% !important;
     }
 }
 
-.time{
+.time {
     margin-bottom: 20px;
 }
 
@@ -158,42 +164,129 @@ ion-item {
     min-height: 20px;
     padding: 7px;
     text-align: center;
-  }
-  
-  .spinner > div {
+}
+
+.spinner > div {
     width: 10px;
     height: 10px;
     background-color: rgb(255, 255, 255);
-  
+
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  }
-  
-  .spinner .bounce1 {
+}
+
+.spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
-  }
-  
-  .spinner .bounce2 {
+}
+
+.spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
-  }
-  
-  @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
-  }
-  
-  @keyframes sk-bouncedelay {
-    0%, 80%, 100% { 
-      -webkit-transform: scale(0);
-      transform: scale(0);
-    } 40% { 
-      -webkit-transform: scale(1.0);
-      transform: scale(1.0);
+}
+
+@-webkit-keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0);
+    }
+    40% {
+        -webkit-transform: scale(1);
+    }
+}
+
+@keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    40% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
     }
-  }
+}
+
+// ---------------------------------------------------------
+// Button add canned on the fly
+// ---------------------------------------------------------
+:host .base_sent .msg_sent ::ng-deep div > div > div > ion-button {
+    display: none;
+    position: absolute;
+    top: -3px;
+    left: -31px;
+}
 
+// :host .base_sent .msg_sent:hover ::ng-deep div > div > div > ion-button {
+:host .base_sent:hover .msg_sent ::ng-deep div > div > div > ion-button {
+    display: block;
+    // position: absolute;
+    // top: -11px;
+    // left: -26px;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > ion-button {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -31px;
+}
+
+// :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
+:host .base_receive:hover .msg_receive ::ng-deep div > div > ion-button {
+    display: block;
+    // position: absolute;
+    // top: -11px;
+    // left: 91px;
+}
 
+// ---------------------------------------------------------
+// Long date divider
+// ---------------------------------------------------------
+.long-date-divider-wpr {
+    justify-content: center !important;
+    align-items: center !important;
+    display: flex !important;
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important;
+}
+
+.long-date-divider-border-b {
+    border-bottom: 1px solid #dee5ee !important;
+    flex: 1 1 auto !important;
+    margin-left: 1.1rem !important;
+    margin-right: 1.1rem !important;
+}
+
+.long-date-divider {
+    flex: 0 0 auto !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
+    line-height: 1.25rem !important;
+    margin-left: 1rem !important;
+    margin-right: 1rem !important;
+    color: #64748b;
+}
+
+// ---------------------------------------------------------
+// message date
+// ---------------------------------------------------------
+:host .base_sent .msg_sent ::ng-deep div > div > div > .message-date {
+    position: absolute;
+    bottom: -11px;
+    color: #64748b;
+    font-size: 10px;
+    right: 0px;
+}
+
+:host .base_receive .msg_receive ::ng-deep div > div > .message-date {
+    position: absolute;
+    bottom: -11px;
+    color: #64748b;
+    font-size: 10px;
+    left: 0px;
+}

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

@@ -1,5 +1,5 @@
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
@@ -9,23 +9,29 @@ import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 
 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 { TranslateService } from '@ngx-translate/core';
+import * as moment from 'moment';
+import { AppConfigProvider } from 'src/app/services/app-config';
 @Component({
   selector: 'ion-conversation-detail',
   templateUrl: './ion-conversation-detail.component.html',
   styleUrls: ['./ion-conversation-detail.component.scss'],
 })
 export class IonConversationDetailComponent extends ConversationContentComponent implements OnInit {
- 
+
   @Input() senderId: string;
   @Input() channelType: string;
-  @Output() onImageRendered = new EventEmitter<boolean>() 
+  @Output() onImageRendered = new EventEmitter<boolean>()
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
- 
 
+  public public_Key: any
+  public areVisibleCAR: boolean
+  public support_mode: boolean
   public uploadProgress: number = 100
   public fileType: any
-
+  public browserLang: string;
+  public addAsCannedResponseTooltipText: string;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -47,38 +53,105 @@ export class IonConversationDetailComponent extends ConversationContentComponent
    */
   constructor(
     public cdref: ChangeDetectorRef,
-    public uploadService: UploadService
+    public uploadService: UploadService,
+    public tiledeskAuthService: TiledeskAuthService,
+    private translate: TranslateService,
+    public appConfigProvider: AppConfigProvider,
   ) {
     super(cdref, uploadService)
-   
+
   }
 
-  ngOnInit() { 
-  this.listenToUploadFileProgress()
+  ngOnInit() {
+    this.getOSCODE()
+    this.listenToUploadFileProgress();
+    this.setMomentLocaleAndGetTranslation();
+  }
+
+  getOSCODE() {
+    this.support_mode = this.appConfigProvider.getConfig().supportMode
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] AppConfigService getAppConfig public_Key', this.public_Key)
+
+    if (this.public_Key) {
+      let keys = this.public_Key.split('-')
+      this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - public_Key keys', keys)
+
+      keys.forEach((key) => {
+        if (key.includes('CAR')) {
+          let car = key.split(':')
+          if (car[1] === 'F') {
+            this.areVisibleCAR = false
+            this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+          } else {
+            this.areVisibleCAR = true
+            this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+          }
+        }
+      })
+
+      if (!this.public_Key.includes('CAR')) {
+        this.areVisibleCAR = false
+        console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] PUBLIC-KEY - areVisibleCAR', this.areVisibleCAR)
+      }
+    } else {
+      this.areVisibleCAR = false
+    }
+  }
+
+  setMomentLocaleAndGetTranslation() {
+    this.browserLang = this.translate.getBrowserLang();
+    const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - ngOnInit - currentUser ', currentUser)
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid
+      this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL]] - ngOnInit - currentUserId ', currentUserId)
+    }
+
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] stored_preferred_lang: ', stored_preferred_lang);
+
+
+    let chat_lang = ''
+    if (this.browserLang && !stored_preferred_lang) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang)
+    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
+    //   console.log('[CONVS-DETAIL] translations: ', labels);
+    // });
+    this.translate.get('AddAsCannedResponse')
+      .subscribe((text: string) => {
+        // console.log('[CONVS-DETAIL] AddAsCannedResponse translated: ', text);
+        this.addAsCannedResponseTooltipText = text
+      })
   }
 
   listenToUploadFileProgress() {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - calling BSStateUpload ');
     this.uploadService.BSStateUpload.subscribe((data: any) => {
       this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data', data);
-     
+
       if (data) {
         this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data.upload', data.upload);
         this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data.upload typeof', typeof data.upload);
         this.uploadProgress = data.upload
 
-        if (isNaN(data.upload))  {
+        if (isNaN(data.upload)) {
           this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload data.upload IS NaN (e.g. file size is 0)');
           this.uploadProgress = 100
         }
         // if (data.type.startsWith("application")) {
         // if (!data.type.startsWith("image")) {
-         
-          // this.fileType = 'file'
 
-          this.addUploadingBubblePlaceholder(true)
+        // this.fileType = 'file'
+
+        this.addUploadingBubblePlaceholder(true)
 
-          // this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload this.fileType', this.fileType);
+        // this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] FIREBASE-UPLOAD - BSStateUpload this.fileType', this.fileType);
         // }
       }
     });
@@ -88,10 +161,20 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onAddUploadingBubble.emit(value);
   }
 
-  onImageRenderedFN(event){
+  onImageRenderedFN(event) {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onImageRenderedFN:::ionic', event)
     this.onImageRendered.emit(event)
   }
 
-
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  trackByFn(index: number, item: any): any {
+    // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn index', index)
+    // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn item', item)
+    return item.uid || index;
+  }
 }

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

@@ -1,9 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
-   class="messages primary-color"
-  [class.emoticon]="message?.emoticon">
+<div id="bubble-message"
+  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+  class="messages primary-color" [class.emoticon]="message?.emoticon">
 
 
   <div>
@@ -18,19 +18,13 @@
 
     <!-- [width]="getMetadataSize(message.metadata).width" 
     [height]="getMetadataSize(message.metadata).height" -->
-    <chat-image *ngIf="isImage(message)" 
-      [metadata]="message.metadata"
-     
-      [width]="message.metadata.width" 
-      [height]="message.metadata.height"
-      (onImageRendered)="onImageRenderedFN($event)">
+    <chat-image *ngIf="isImage(message)" [metadata]="message.metadata" [width]="message.metadata.width"
+      [height]="message.metadata.height" (onImageRendered)="onImageRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
-    <chat-frame *ngIf="isFrame(message)" 
-      [metadata]="message.metadata"
-      [width]="message.metadata.width" 
+    <chat-frame *ngIf="isFrame(message)" [metadata]="message.metadata" [width]="message.metadata.width"
       [height]="message.metadata.height">
     </chat-frame>
 
@@ -40,36 +34,26 @@
       [height]="message.metadata.height">
     </chat-frame> -->
 
-    <!-- message type:: text -->
-    <!-- <div *ngIf="message.type == 'text'">  -->
-      
-    <div *ngIf="message?.text" [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left"
-      content-type="template" (click)="handleTooltipEvents($event)">
-      <ng-template #timeTooltipLeft>
-        <!-- <span>{{message.timestamp | amTimeAgo}}</span> -->
-        <!-- <span> {{browserLang === 'it' ? (message.timestamp| amDateFormat:'DD MMM') : (message.timestamp |
-        amDateFormat:'MMM DD')}} </span> amCalendar -->
 
+    <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
+    <div *ngIf="message?.text">
+      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
+      <!-- <ng-template #timeTooltipLeft>
         <span> {{message.timestamp | amCalendar }} </span>
-      </ng-template>
+      </ng-template> -->
 
-      <chat-text 
-        [text]="message?.text" 
-        [color]="textColor" 
-        [message]="message"
+      <chat-text [text]="message?.text" [color]="textColor" [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
-      <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
-      <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
-            is ignored</div>
-        <ng-template #contentPopup>
-            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
-                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
-        </ng-template>
-        <ng-template #contentNewTab>
-            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
-        </ng-template> -->
+
+      <ng-container *ngIf="areVisibleCAR && support_mode === true">
+        <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" 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>
     </div>
   </div>
 

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

@@ -47,5 +47,15 @@
     }
     
 }
+// > .button-native
+.btn-add-msg-as-canned-response  {
+    // padding-left: 5px ;
+    // padding-right: 5px ;
+    border-radius: 50%;
+    --padding-end: 7px ;
+    --padding-start: 7px ;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%)
+
+}