@chat21/chat21-ionic 3.0.78 → 3.0.79-rc.2

package/CHANGELOG.md

@@ -1,9 +1,49 @@
 # chat21-ionic ver 3.0
 
-## 3.0.78 in PROD
+### 3.0.79-rc.2
+- added: new sound if new conversation is triggered in agent's chat
+- changed: header UI of header-conversation-detail and unassigned-conversations components
+
+### 3.0.79-rc.1
+- added: LABEL_ONLINE, LABEL_OFFLINE translations
+- changed: renamed ddp-header with conversations-list-header
+- changed: unified control to mobile/desktop app
+- changed: LABEL_AVAILABLE/NOT_AVAILABLE with LABEL_ONLINE/OFFLINE in user-presence component	
+- changed: icon to user-presence
+- changed: UI for conversation-list, conversation-detail and info-group for desktop and mobile
+- changed: renamed option-header component with header-conversations-list-archived
+- changed: contacts-directory UI
+- bug-fixed: if app is opened and user press width expand, move correctly the right position
+
+## 3.0.78 in PROD 
 - bug-fixed: unassigned request not sound the if is the first at all
 - bug-fixed: canned responses opens in incorrect mode
 
+### 3.0.78-rc.4
+- bug-fixed: unassigned request not sound the if is the first at all
+- bug-fixed: translations missed
+- bug-fixed: direct info not showed in conversation-header component
+- removed: conversation-footer border top
+- changed: colors to message-text-area icons and message-attachment components
+
+### 3.0.78-rc.3
+- changed: user-typing location moved from conversation-header to conversation-detail component
+- changed: replace includes with startsWith for check what type of conversation is in project info conversation-list component
+- added: styleMap integrations to some elements	
+- bug-fixed: no tooltip showed if no unserved request are present
+
+### 3.0.78-rc.2
+- changed: project item UI and tooltip msg
+- changed: conversation UI in conversations list component
+- changed: conversation detail header component
+- added: open/close info-conversation moved from conversation-header to conversation detail component
+- bug-fixed: canned responses opens in incorrect mode
+
+### 3.0.78-rc.1
+- changed: conversation-list page width increased
+- changed: background changed in info-message component
+- changed: project-item UI
+- changed: conversation-list page UI
 
 ## 3.0.77 in PROD
 

package/package.json

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

package/src/app/app.component.scss

@@ -1,7 +1,8 @@
 .split-pane-md.split-pane-visible > .split-pane-side {
-    min-width: 312px;
+    min-width: 360px; //312px;
     display: block; // Safari bug fix
     margin-left: 60px;
+    --border: 0px;
 }
 
 .sidebar-visible {

package/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -86,11 +86,13 @@ export class AppComponent implements OnInit {
   public authModal: any;
 
   private audio: any;
+  private audio_NewConv: any;
   private setIntervalTime: any;
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
   private isSoundEnabled: boolean;
   private hasPlayed: boolean;
+  private hasPlayedConversation: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -831,6 +833,10 @@ export class AppComponent implements OnInit {
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
     this.audio.load();
 
+    this.audio_NewConv = new Audio();
+    this.audio_NewConv.src = chatBaseUrl + URL_SOUND_CONVERSATION_ADDED;
+    this.audio_NewConv.load();
+
     const sound_status = localStorage.getItem('dshbrd----sound')
     if(sound_status && sound_status !== 'undefined'){
       this.isSoundEnabled = sound_status === 'enabled'? true: false
@@ -840,7 +846,7 @@ export class AppComponent implements OnInit {
 
   }
 
-  private manageTabNotification(badgeNotificationCount?: number) {
+  private manageTabNotification(sound_type: string, badgeNotificationCount?: number) {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
       let badgeNewConverstionNumber = badgeNotificationCount? badgeNotificationCount : this.conversationsHandlerService.countIsNew()
@@ -864,7 +870,9 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = sound_status === 'enabled'? true: false
     }
     this.logger.debug('[APP-COMP] manageTabNotification can saund?', this.isInitialized, this.isSoundEnabled)
-    if(this.isInitialized && this.isSoundEnabled) this.soundMessage()
+    if(this.isInitialized && this.isSoundEnabled) {
+      sound_type === 'conv_added'? this.soundConversationAdded(): this.soundMessage();
+    }
   }
 
   soundMessage() {
@@ -880,7 +888,7 @@ export class AppComponent implements OnInit {
     // }, 4000);
 
     //play sound every 4s from the fist time you receive a conversation added/changed
-    if(!this.hasPlayed){
+    if(!this.hasPlayed && !this.hasPlayedConversation){
       that.audio.play().then(() => {
         that.hasPlayed = true
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
@@ -892,6 +900,22 @@ export class AppComponent implements OnInit {
       });
     }
   }
+
+  soundConversationAdded(){
+    const that = this;
+    console.log('soundConversationAdded ENABLEDDDD-->', this.hasPlayed)
+    if(!this.hasPlayedConversation ){
+      that.audio_NewConv.play().then(() => {
+        that.hasPlayedConversation = true
+        that.logger.debug('[APP-COMP] ****** soundConversationAdded played *****');
+        setTimeout(() => {
+          that.hasPlayedConversation = false
+        }, 4000);
+      }).catch((error: any) => {
+        that.logger.error('[APP-COMP] ***soundConversationAdded error*', error);
+      });
+    }
+  }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
@@ -943,7 +967,7 @@ export class AppComponent implements OnInit {
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
       // this.logger.log('[APP-COMP] ***** subscribeConversationAdded *****', conversation);
       if (conversation && conversation.is_new === true) {
-        this.manageTabNotification()
+        this.manageTabNotification('conv_added')
       }
       if(conversation) this.updateConversationsOnStorage()
     });
@@ -961,7 +985,7 @@ export class AppComponent implements OnInit {
         this.logger.log('[APP-COMP] ***** subscribeConversationChangedDetailed currentUser: ', currentUser);
         if (changes.value && changes.value.sender !== currentUser.uid) {
           if(changes.value.is_new === changes.previousValue.is_new){
-            this.manageTabNotification();
+            this.manageTabNotification('new_message');
           }
         }
       }
@@ -1148,7 +1172,7 @@ export class AppComponent implements OnInit {
 
   subscribeUnservedRequestCount = (unservedRequestCount) => {
     if(unservedRequestCount && unservedRequestCount > 0){
-      this.logger.debug("hasToSoundUnservedRequestCount::::", this.isInitialized)
+      this.logger.debug("appIsInitialized::::",this.isInitialized)
       if(this.isInitialized){
         this.manageTabNotification(unservedRequestCount) //sound and alternate title
       }
@@ -1325,5 +1349,26 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = event.newValue === 'enabled'? true: false
     }
   }
+
+
+  // @HostListener('mouseenter', ['$event']) 
+  // onMouseEnter(event: any) {
+  //   console.log('HostListener onMouseEnter-->', event)
+  // }
+
+  // @HostListener('mouseleave', ['$event']) 
+  // onMouseLeave(event: any) {
+  //   console.log('HostListener onMouseLeave-->', event)
+  // }
+
+  // @HostListener('focus', ['$event']) 
+  // onFocus(event: any) {
+  //   console.log('HostListener onFocus-->', event)
+  // }
+
+  // @HostListener('blur', ['$event']) 
+  // onBlur(event: any) {
+  //   console.log('HostListener onBlur-->', event)
+  // }
 }
 

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

@@ -17,11 +17,18 @@ export class ConversationContentComponent implements OnInit {
   @Input() messages: MessageModel[]
   @Input() senderId: string;
   @Input() baseLocation: string;
+  @Input() isConversationArchived: boolean;
+  @Input() isTypings: boolean;
+  @Input() idUserTypingNow: string;
+  @Input() nameUserTypingNow: string;
+  @Input() typingLocation: string;
+  @Input() fullscreenMode: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onMenuOptionShow = new EventEmitter();
+  @Output() onMenuOptionShow = new EventEmitter<boolean>();
+  @Output() onEmojiiPickerShow = new EventEmitter<boolean>()
   @Output() onAttachmentButtonClicked = new EventEmitter();
   @Output() onScrollContent = new EventEmitter();
 

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

@@ -52,8 +52,19 @@
 <!-- ----------------------------------------------------------- -->
 <!--  nk - no tag ionic -->
 <!-- ----------------------------------------------------------- -->
+<div class="manage_conversation_info_container" [ngClass]="{'close': !openInfoConversation, 'mobile': isMobile}">
+  <ion-button fill="clear" *ngIf="openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
+    <ion-icon name="arrow-forward-outline"></ion-icon>
+    {{translationMap.get('LABEL_CLOSE_GROUP')}}
+  </ion-button>
+  <ion-button fill="clear" *ngIf="!openInfoConversation" (click)="onOpenCloseInfoConversationFN()">
+    <ion-icon name="arrow-back-outline"></ion-icon>
+    {{translationMap.get('LABEL_OPEN_INFO_CONVERSATION')}}
+  </ion-button>
+</div>
 
 <div class="conversation-wpr" style="height: 100%;">
+  
   <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')">
@@ -81,9 +92,12 @@
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
+        [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
         [message]="message" 
-        [textColor]="'col-msg-sent'"
+        [fontColor]="stylesMap.get('bubbleSentTextColor')"
+        [fontSize]="stylesMap.get('fontSize')"
+        [fontFamily]="stylesMap.get('fontFamily')"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
@@ -106,8 +120,6 @@
       class="message_sender_fullname">
       {{message.sender_fullname}}
     </div>
-
-
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
 
       <!-- <chat-avatar-image class="slide-in-left"  
@@ -121,8 +133,11 @@
       <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
+        [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
         [message]="message" 
-        [textColor]="'black'"
+        [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
+        [fontSize]="stylesMap?.get('fontSize')"
+        [fontFamily]="stylesMap?.get('fontFamily')"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
@@ -147,15 +162,26 @@
 
   <!-- uploadProgress -> {{ uploadProgress }} -->
   <div *ngIf="uploadProgress !== 100" class="msg_container base_sent" style="margin-right: 20px;">
-    <div class="messages msg_sent">
-      <div class="spinner">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
-        <div class="bounce3"></div>
-      </div>
+    <div class="chat21-spinner active" id="chat21-spinner" style="margin: 0px 6px 0px;">
+      <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
+      <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'opacity': 0.4}"></div>
+      <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'opacity': 0.6}"></div>
+      <!-- <span [ngStyle]="{'color': stylesMap.get('themeColor')}">{{translationMap.get('LABEL_LOADING')}}</span> -->
     </div>
   </div>
 
+  <div *ngIf="isTypings" class="msg_container base_receive typing_container">
+    <!-- !isSameSender(idUserTypingNow, i) -->
+    <!-- <div *ngIf="nameUserTypingNow">{{nameUserTypingNow}}</div> -->
+    <user-typing
+      [themeColor]="stylesMap?.get('themeColor')"
+      [translationMap]="translationMap"
+      [idUserTypingNow]="idUserTypingNow"
+      [nameUserTypingNow]="nameUserTypingNow">
+    </user-typing>
+    <div class="typing_info" *ngIf="nameUserTypingNow"> {{nameUserTypingNow}} {{translationMap.get('LABEL_IS_WRITING')}}</div>
+  </div>
+
 </div>
 
 <!-- fileType > {{fileType }} uploadProgress {{uploadProgress}} -->

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

@@ -33,6 +33,56 @@
     }
 }
 
+.manage_conversation_info_container{
+    height: 34px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: fixed;
+    transition: transform 300ms ease-in-out 0s;
+    transform: translate(0px);
+    right: 300px;
+    top: 60px;
+    z-index:10;
+    background: linear-gradient(to right, rgba(226, 232, 239, 0) 128px, rgb(226, 232, 239) 128px);
+    
+    &.close{
+        right: 0px;
+    }
+
+    &.mobile{
+        right: 0px;
+    }
+    &:not(.mobile){
+        right: calc(300px + var(--padding-conversation-detail));
+        top: calc(60px + var(--padding-conversation-detail));
+    }
+    &::before{
+        content: "";
+        width: 102px;
+        height: 34px;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMTAyIDM0IiB3aWR0aD0iMTAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMiAwaC0xMDJsLjA3MTQwOC40MTk3NTNjMTEuMzE5MTkyLS4wMTU1NTggMjIuMjg4MTkyIDMuOTIwMzM3IDMxLjAxMjA5MiAxMS4xMjc2NDdsNy40ODk0IDYuNTAyIDEuNjUwOCAxLjQyMjkgNi42OTU1IDUuNzhjNi41Mzc0IDUuNjQwNSAxNC44ODU3IDguNzQ1MSAyMy41MjI3IDguNzQ3N2gzMS41NTQxeiIKICAgICAgICAgIGZpbGw9IiNlMmU4ZWYiLz4KPC9zdmc+);
+        position: relative;
+        left: 50px;
+        z-index: -1;
+    }
+
+    ion-button {
+        text-transform: unset;
+        color: var(--basic-blue);
+        &:hover {
+            --background-hover: transparent;
+            text-decoration: underline;
+            text-decoration-color: var(--basic-blue);
+        }
+    }
+
+    ion-icon{
+        margin: 5px;
+    }
+}
+
+
 ion-item {
     --padding-end: 0px;
     --inner-padding-end: 0px;
@@ -60,12 +110,33 @@ ion-item {
 
 .message_sender_fullname {
     font-size: 0.9em;
-    margin: 0 0 1px 10px;
+    margin: 0 0 1px 20px;
     // color: var(--gray);
     font-weight: 500;
     color: #080f1a;
 }
 
+.typing_container{
+    display:flex;
+    align-items: center;
+
+    user-typing {
+        text-align: right;
+    }
+    .typing_info{  
+        color: var(--basic-gray);
+        margin-left: 10px;
+        font-size: 12px;
+        animation: blinker 1s linear infinite;
+
+        @keyframes blinker {
+            50% {
+              opacity: 0;
+            }
+          }
+    }
+}
+
 .messages {
     border-radius: 18px;
     padding: 0;
@@ -113,7 +184,7 @@ ion-item {
 /** recive message **/
 .base_receive {
     // padding: 0px 0px 6px 0px;
-    padding: 0px 0px 15px 0px; // edited to display the date at the bottom of the "message bubble"
+    padding: 0px 0px 15px 10px; // edited to display the date at the bottom of the "message bubble"
     /* avatar */
     .content-avatar {
         position: relative;
@@ -142,8 +213,8 @@ ion-item {
     }
     /* message */
     .msg_receive {
-        background-color: var(--light-white);
-        color: #1a1a1a;
+        background-color: var(--bck-msg-received);
+        color: var(--col-msg-received);
         // max-width: 260px;
         max-width: calc(100% - 70px);
         min-width: 14px;
@@ -167,63 +238,64 @@ ion-item {
     .has-metadata {
         max-width: 100% !important;
     }
+
 }
 
 .time {
     margin-bottom: 20px;
 }
 
-// Loading Spinner
-.spinner {
-    // margin: 100px auto 0;
-    width: 90px;
+ /* LOADING */
+/*http://tobiasahlin.com/spinkit/*/
+#chat21-spinner {
+    display: none;
+    width: 70px;
     min-height: 20px;
-    padding: 7px;
+    margin: 20px auto 0;
     text-align: center;
 }
-
-.spinner > div {
-    width: 10px;
-    height: 10px;
-    background-color: rgb(255, 255, 255);
-
+#chat21-spinner.active {
+    display: block;
+}
+#chat21-spinner > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--bubble-blue);
     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 {
+#chat21-spinner .chat21-bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
 }
-
-.spinner .bounce2 {
+#chat21-spinner .chat21-bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }
-
+#chat21-spinner span {
+    display: block;
+    margin: 0.5em 0 0 0;
+    color: var(--col-msg-sent);
+    /* text-transform: uppercase; */
+    font-family: 'Roboto', sans-serif;
+    -webkit-animation: pulse 2000ms linear infinite;
+    -moz-animation: pulse 2000ms linear infinite;
+    animation: pulse 2000ms linear infinite;
+    text-align: center;
+}
 @-webkit-keyframes sk-bouncedelay {
-    0%,
-    80%,
-    100% {
-        -webkit-transform: scale(0);
-    }
-    40% {
-        -webkit-transform: scale(1);
-    }
+    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);
-        transform: scale(1);
+    0%, 80%, 100% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    } 40% { 
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     }
 }
 

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, SimpleChange, SimpleChanges } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
@@ -24,14 +24,17 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
+  @Input() isMobile: boolean;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
-
+  @Output() onOpenCloseInfoConversation = new EventEmitter<boolean>();
+  
   public public_Key: any
   public uploadProgress: number = 100
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
+  public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -66,6 +69,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   ngOnInit() {
     this.listenToUploadFileProgress();
     this.setMomentLocaleAndGetTranslation();
+    
+  }
+
+  ngOnChanges(changes: SimpleChanges){
+    this.isMobile? this.openInfoConversation = false: null;
   }
 
 
@@ -136,6 +144,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onElementRendered.emit(event)
   }
 
+  onOpenCloseInfoConversationFN(){
+    this.openInfoConversation = !this.openInfoConversation
+    this.onOpenCloseInfoConversation.emit(this.openInfoConversation)
+  }
+
   /**
    * Track by function for ngFor loops
    *

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

@@ -50,7 +50,7 @@
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
-        [color]="textColor" 
+        [color]="fontColor" 
         [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">

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

@@ -18,7 +18,9 @@ import { ModalController } from '@ionic/angular';
 export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
-  @Input() textColor: string;
+  @Input() fontColor: string;
+  @Input() fontSize: string;
+  @Input() fontFamily: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.html

@@ -1,3 +1,7 @@
-<div #actionButton id="actionButton" class="button-in-msg action" (click)="actionButtonAction()" title="{{button?.value}}">
+<div #actionButton id="actionButton" class="button-in-msg action" 
+title="{{button?.value}}"
+(click)="actionButtonAction()"
+(mouseover)="onMouseOver($event)" 
+(mouseout)="onMouseOut($event)">
   {{button.value}}
 </div>

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.scss

@@ -1,12 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 .button-in-msg {
@@ -15,32 +14,32 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor);
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor);
     line-height: 16px;
 }
 
 .action {
-    background: white;
+    background: var(--backgroundColor);
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: white;
-        background:  var(--blue);
+        color: var(--hoverTextColor);
+        background:  var(--hoverBackgroundColor);
         .icon-button-action {
             svg {
-                fill: white;
+                fill:  var(--hoverTextColor);
             }
         }
     }
@@ -80,4 +79,12 @@ div {
     //         height: 200px;
     //     }
     // }
-}
+}
+
+
+.disabled {
+    // border: 1px solid #999999;
+    // background-color: #cccccc;
+    // color: #666666;
+    pointer-events: none;
+}