@chat21/chat21-web-widget 5.0.56-rc.1 → 5.0.56-rc.3

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

@@ -4,7 +4,7 @@
   
     <div class="c21-body-content" tabindex="1520" aria-label=" messaggi della conversazione: ">
   
-      <!-- CONTENT !isNewConversation && [class.active]="isShowSpinner"  -->
+      <!-- USER TYPING (WAIT MESSAGE)  -->
       <span *ngIf="messages && this.messages.length === 0 && !isTypings">
         <user-typing class="loading"
           [color]="stylesMap?.get('iconColor')"
@@ -12,12 +12,6 @@
           [idUserTypingNow]="idUserTypingNow"
           [nameUserTypingNow]="nameUserTypingNow">
         </user-typing>
-        <!-- <div class="chat21-spinner active" id="chat21-spinner">
-            <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
-            <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
-            <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('themeColor')}"></div>
-            <span [ngStyle]="{'color': stylesMap.get('themeColor')}">{{translationMap.get('LABEL_LOADING')}}</span>
-        </div> -->
       </span>
       
     
@@ -56,7 +50,6 @@
                           </div>
     
                           <!-- message RECIPIENT:: -->
-                          <!-- <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender(message?.sender, i)" class="message_sender_fullname" [ngClass]="{'slide-in-left': false}" >{{message?.sender_fullname}}</div> -->
                           <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message)" class="msg_container base_receive">
                             
                             <chat-avatar-image *ngIf="!isSameSender(message?.sender, i)" 
@@ -87,7 +80,7 @@
 
                           </div>
                           
-                          <!-- message INFO/SUPPORT:: message.attributes['subtype'] === 'info/support' -->
+                          <!-- message INFO/SUPPORT-->
                           <!-- !hideBubbleInfoMessage && && message.text.indexOf('INFO_SUPPORT_USER_ADDED_VERB') === -1 -->
                           <div *ngIf="messageType(MESSAGE_TYPE_INFO, message)" class="msg_info_container">
                             <chat-info-message class="messages"
@@ -95,53 +88,10 @@
                             </chat-info-message>
                           </div>
                           
-                          <!-- <div role="messaggio" *ngIf="message.sender != senderId;" class="msg_container base_receive slide-in-left">
-                              
-                              <div class="messages msg_receive" [class.emoticon]="message.emoticon">
-                  
-                                <div>
-
-                                    <chat-image *ngIf="message.type == 'image' && message.metadata"
-                                      [metadata]="message.metadata"
-                                      [width]="getMetadataSize(message.metadata).width"
-                                      [height]="getMetadataSize(message.metadata).height">
-                                    </chat-image>
-  
-                                    <chat-frame *ngIf="message.type == 'frame' && message.metadata"
-                                      [metadata]="message.metadata"
-                                      [width]="getMetadataSize(message.metadata).width"
-                                      [height]="getMetadataSize(message.metadata).height">
-                                    </chat-frame>
-
-                                    <!- - <div *ngIf="message.type == 'frame' && message.metadata"   [ngStyle] = "{ 'max-width': '100%', 'width': message.metadata.width, 'height': message.metadata.height }">
-                                        <iframe width = "100%" height = "100%" style= "border:none;" [src] = "message.metadata.src" ></iframe>
-                                    </div> -- >
-                                   
-  
-                                    <! -- message type:: text - ->
-                                    <! -- <div *ngIf="message.type == 'text';">  {{message.timestamp  | amTimeAgo}}- ->
-                                    <div *ngIf="message.text" [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="right" content-type="template" (click)="handleTooltipEvents($event)">
-                                        <ng-template #timeTooltipRight>
-                                            <span>{{message.timestamp  | amTimeAgo}}</span>
-                                        </ng-template>
-
-                                        <chat-text
-                                              [text]="message.text"
-                                              [color]="'black'"
-                                              (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-                                              (onAfterMessageRender)="returnOnAfterMessageRender($event)">
-                                        </chat-text>
-
-                                    </div>
-                                </div>
-  
-                            </div>
-    
-                          </div> -->
-    
     
                           <div class="time slide-in-left" [ngClass]="{'sender' : message?.sender == senderId}">
-                            <time #timeTooltip *ngIf="message?.sender!=='' && message?.timestamp !== '{.sv: timestamp}'" >{{message?.timestamp  | amTimeAgo}} </time>
+                            <!-- <time #timeTooltip *ngIf="message?.sender!=='' && message?.timestamp !== '{.sv: timestamp}'" >{{message?.timestamp  | amTimeAgo}} </time> -->
+                            <time #timeTooltip *ngIf="message?.sender!=='' && message?.timestamp !== '{.sv: timestamp}'" >{{message?.timestamp  | dateAgo}} </time>
                           </div>
     
     
@@ -160,22 +110,13 @@
     
                       </div>
 
-                      <!-- CHAT CLOSED HARD-CODED INFO-MESSAGE -->
-                      <!-- <div *ngIf="isConversationArchived" class="msg_info_container">
-                        <chat-info-message class="messages"
-                          [message]="{text: 'Chat closed. Click to open new conversation!'}">
-                        </chat-info-message>
-                      </div> -->
-
                       <!-- FILE PENDING UPLOAD -->
                       <!--  -->
                       <div *ngIf="showUploadProgress" class="msg_container base_sent" >
-                        <!-- class="slide-in-right" -->
                         <div class="chat21-spinner active" id="chat21-spinner" style="margin: 0px 6px 0px;">
                           <div class="chat21-bounce1" [ngStyle]="{'background-color': stylesMap.get('iconColor')}"></div>
                           <div class="chat21-bounce2" [ngStyle]="{'background-color': stylesMap.get('iconColor'), 'opacity': 0.4}"></div>
                           <div class="chat21-bounce3" [ngStyle]="{'background-color': stylesMap.get('iconColor'), 'opacity': 0.6}"></div>
-                          <!-- <span [ngStyle]="{'color': stylesMap.get('themeColor')}">{{translationMap.get('LABEL_LOADING')}}</span> -->
                         </div>
 
                         

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.scss

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 
 #scroll-me {
@@ -9,8 +9,8 @@
 }
 
 :host {
-    --textColorSent: #{$col-msg-sent};
-    --textColorReceive: #{$black};
+    --textColorSent: #{var(--col-msg-sent)};
+    --textColorReceive: #{var(--black)};
 }
 
 :host .base_receive .msg_receive ::ng-deep > div > div > div > chat-text a {
@@ -66,7 +66,7 @@
                 top: 0;
                 right: 0;
                 left: 0;
-                bottom: $chat-footer-height; //43px;
+                bottom: var(--chat-footer-height); //43px;
                 overflow: hidden;
                 .time{
                     margin-bottom: 20px;
@@ -141,7 +141,7 @@
                 }
                 /* ====== SET MESSAGES ====== */
                 .messages {
-                    border-radius: $border-radius-bubble-message;
+                    border-radius: var(--border-radius-bubble-message);
                     padding: 0;
                     word-wrap: break-word;
                     // padding: 14px;
@@ -203,8 +203,8 @@
                     padding: 2px 0px 4px 0px; //2px 0px 4px 40px;
     
                     .msg_sent {
-                        background-color: $bck-msg-sent;
-                        color: $col-msg-sent;
+                        background-color: var(--bck-msg-sent);
+                        color: var(--col-msg-sent);
                         margin-right: 0;
                         margin-left: 4px;
                         max-width: calc(100% - 30px);
@@ -238,29 +238,7 @@
                         //     }
                         // }
                     }                        
-                    
-                    .status-message {
-                        width: 16px;
-                        height: 16px;
-                        margin-left: 4px;
-                        .icon {
-                            width: 13px;
-                            height: 13px;
-                            background-repeat: no-repeat;
-                            background-position: center;
-                            background-size: cover;
-                            overflow-x: hidden;
-                        }
-                        .c21-ico-schedule {
-                            background-image: url("../../../../assets/images/f21ico-schedule.svg");
-                        }
-                        .c21-ico-done {
-                            background-image: url("../../../../assets/images/f21ico-done.svg");
-                        }
-                        .c21-ico-done_all {
-                            background-image: url("../../../../assets/images/f21ico-done_all.svg");
-                        }
-                    }       
+                          
                 }
     
                 /** recive message **/
@@ -294,8 +272,8 @@
                     }
                     /* message */
                     .msg_receive {
-                        background-color: $light-white;
-                        color: $black;
+                        background-color: var(--light-white);
+                        color: var(--black);
                         // max-width: 260px;
                         max-width: calc(100% - 70px);
                         min-width: 14px;
@@ -328,7 +306,7 @@
     
                 .message_sender_fullname{
                     font-size: 12px;
-                    color: $dark-gray;
+                    color: var(--dark-gray);
                     margin: 0 auto 4px auto;
                 }
                 
@@ -341,54 +319,6 @@
 
 // ============= END CSS c21-body ================= //
 
-
-/* SET ICON AVATAR */
-.c21-icon-avatar {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 40px;
-    width: 40px;
-    min-height: 40px;
-    min-width: 40px;
-    line-height: 40px;
-    border-radius: 50%;
-    overflow: hidden;
-    background-color: #ffffff;
-    .c21-avatar-placeholder {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        text-align: center;
-        font-size: 1.4em;
-        color: #ffffff;
-        font-weight: 500;
-    }
-    .c21-avatar-image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        border-radius: 50%;
-    }
-    .c21-avatar-image img{
-        max-width: 100%;
-        width: 100%;
-        height: 100%;
-        min-width: 25px;
-        min-height: 25px;
-        object-fit: cover;
-    }
-}
-
 @-webkit-keyframes sk-bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0) }
     40% { -webkit-transform: scale(1.0) }

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

@@ -1,4 +1,3 @@
-import { MomentModule } from 'ngx-moment';
 import { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
 
 import { ConversationContentComponent } from './conversation-content.component';
@@ -35,7 +34,6 @@ describe('ConversationContentComponent', () => {
         HtmlEntitiesEncodePipe,
       ],
       imports: [
-        MomentModule
       ],
       providers: [ 
         UploadService,
@@ -48,7 +46,6 @@ describe('ConversationContentComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ConversationContentComponent);
-    component = fixture.componentInstance;
     let upload = fixture.debugElement.injector.get(UploadService) as UploadService
     upload.BSStateUpload.next({ upload: 100, type: 'image' })
     fixture.detectChanges();

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

@@ -1,12 +1,12 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { MAX_WIDTH_IMAGES, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT, MSG_STATUS_SENT_SERVER } from 'src/app/utils/constants';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { isPopupUrl, popupUrl } from 'src/chat21-core/utils/utils';
-import { MSG_STATUS_SENT, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT_SERVER, MAX_WIDTH_IMAGES} from 'src/app/utils/constants';
-import { isInfo, isMine, messageType, isEmojii, isImage, isFrame } from 'src/chat21-core/utils/utils-message';
-import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
+import { isPopupUrl, popupUrl } from 'src/chat21-core/utils/utils';
+import { isEmojii, isFrame, isImage, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-conversation-content',

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -36,7 +36,6 @@
     (keypress)="onkeypress($event)"
     (keydown)="onkeydown($event)"
     (paste)="onPaste($event)">
-    <!-- placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER') }}"> -->
   </textarea>
 
 </div>
@@ -46,12 +45,10 @@
     <label *ngIf="showAttachmentButton == true" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 28 28" transform="rotate(45)">
-                <!-- <path [ngStyle]="{'fill': stylesMap?.get('themeColor') }" d="M0 0h24v24H0V0z"/> -->
                 <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
             </svg>
         </span>
-        <!-- accept="image/*, audio/* ,video/*, .pdf, .zip" -->
-        <input
+         <input
             [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
             tabindex="1503" 
             type="file" 
@@ -65,13 +62,7 @@
             (change)="detectFiles($event)"/>
     </label>
     <!-- ICON SEND -->
-    <!-- <div [class.active]="isFileSelected && !isFilePendingToUpload &&" class="chat21-textarea-button" id="chat21-button-reset" (click)="resetLoadImage()"></div> -->
     <div tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
-        <!-- <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" width="24" height="24" viewBox="0 0 28 28">
-                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-            </svg>
-        </span>  -->
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
                 <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
@@ -90,14 +81,6 @@
         </span>
     </label>
 </div>
-<!-- <div id="button" data-testid="widgetButton" class="chat-open">
-    <button type="button" id="button-body" tabindex="0" [ngStyle]="{'background':  'linear-gradient( 180grad,' + stylesMap.get('themeColor')+','+ convertColorToRGBA(stylesMap.get('themeColor'), 50)+')'}">
-        <svg fill="#FFFFFF" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
-            <path d="M0 0h24v24H0z" fill="none"></path>
-        </svg>
-    </button>
-</div> -->
 
 
 <!-- <div #div_mic *ngIf="g.showMicButton" id="playbutton">
@@ -119,25 +102,17 @@
   </button>
 </div> -->
 
-
-<!-- <div [class.active]="isFileSelected" class="name-image" id="chat21-file-selected">
-  <span>{{nameFile}}</span>
-</div> -->
-<!-- <span id="testFocus" tabindex="1599" *ngIf="!isConversationArchived" onFocus="document.querySelector('[start-focus-chat21-conversation-component]').focus()"></span> -->
-<!-- <span id="altTextArea" style="display: none">scrivi la tua domanda</span> -->
-
-
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container">
     <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"
-        [showPreview]="emojiiOptions.showPreview"
+        [showPreview]="emojiiOptions?.showPreview"
         [color]="stylesMap?.get('themeColor')" 
-        [perLine]="emojiiOptions.emojiPerLine"
-        [totalFrequentLines]="emojiiOptions.totalFrequentLines"
-        [enableSearch]="emojiiOptions.enableSearch"
-        [darkMode]="emojiiOptions.darkMode"
-        [include]="emojiiOptions.include"
+        [perLine]="emojiiOptions?.emojiPerLine"
+        [totalFrequentLines]="emojiiOptions?.totalFrequentLines"
+        [enableSearch]="emojiiOptions?.enableSearch"
+        [darkMode]="emojiiOptions?.darkMode"
+        [include]="emojiiOptions?.include"
         (emojiSelect)="addEmoji($event)">
     </emoji-mart>
 </div>

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -1,16 +1,16 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 .visible-text-area {
     pointer-events: auto;
-    border-radius: $chat-footer-border-radius;
-    background-color: $chat-footer-background-color;
+    border-radius: var(--chat-footer-border-radius);
+    background-color: var(--chat-footer-background-color);
     &.disabled {
         background-color: rgb(232, 233, 237);
     }
 }
 
 .chat21-textarea-button {
-    fill: $icon-fill-color;
+    fill: var(--icon-fill-color);
     pointer-events: auto;
 }
 
@@ -86,17 +86,17 @@ textarea:active{
     z-index: 1;
     cursor: pointer;
     background-color: #ffffff;
-    border: 1px solid $trasp-light-gray;
+    border: 1px solid var(--trasp-light-gray);
     // -webkit-box-shadow: 0 3px 2px $trasp-light-black;
     // box-shadow: 0 3px 2px $trasp-light-black;
     text-align: center;
     svg {
         margin: auto;
-        fill: $gray;
+        fill: var(--gray);
     }
 }
 #chat21-buttonToBottom:hover {
-    background-color: $blue;
+    background-color: var(--blue);
     opacity: 1!important;
     transition: all .45s ease-in-out!important;
     -moz-transition: all .45s ease-in-out!important;
@@ -121,7 +121,7 @@ textarea:active{
     resize: horizontal;
     overflow-y: auto;
     box-sizing: border-box;
-    color: $black;
+    color: var(--black);
     min-width: 100%;
     outline: 0;
     resize: none;
@@ -155,7 +155,7 @@ textarea:active{
 .chat21-textarea-button {
     position: absolute;
     display: block;
-    height: $chat-footer-height;
+    height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
     cursor: initial;
@@ -179,7 +179,7 @@ textarea:active{
 .chat21-back-button{
     position: absolute;
     display: block;
-    height: $chat-footer-height;
+    height: var(--chat-footer-height);
     cursor: pointer;
 }
 
@@ -223,7 +223,7 @@ textarea:active{
     // height: 46px;
     // position: absolute;
     // bottom: 0px;
-    border-top: 0px solid $light-gray;
+    border-top: 0px solid var(--light-gray);
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -1,15 +1,15 @@
-import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
-import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
-import { TYPE_MSG_TEXT, TYPE_MSG_IMAGE, TYPE_MSG_FILE } from 'src/chat21-core/utils/constants';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
+import { MessageModel } from 'src/chat21-core/models/message';
 import { UploadModel } from 'src/chat21-core/models/upload';
-import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
+import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
+import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
-import { MessageModel } from 'src/chat21-core/models/message';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TYPE_MSG_FILE, TYPE_MSG_IMAGE, TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'chat-conversation-footer',

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.html

@@ -3,8 +3,8 @@
 
   <div class="c21-header-container">
 
-      <!-- CONTENT HEADER -->
-      <div class="c21-header-content">
+    <!-- CONTENT HEADER -->
+    <div class="c21-header-content">
 
         <!-- ICON CLOSE CHAT -->
         <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean" [ngStyle]="{'display': (hideHeaderCloseButton)?'none':'flex'}" (click)="closeWidget()">
@@ -17,7 +17,7 @@
         </button>
 
         <!-- ICON MENU OPTION -->
-        <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="toggleMenu()" > <!--(blur)="onBlurMenuOption($event)"-->
+        <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="toggleMenu()" >
             <svg aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
                 width="24" height="24" viewBox="0 0 24 24">
                 <path fill="none" d="M0 0h24v24H0V0z" />
@@ -30,7 +30,6 @@
         <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="1530" aria-label=" indietro " class="c21-header-button c21-left c21-button-clean" [ngStyle]="{'display': (hideHeaderBackButton)?'none':'flex'}" (click)="returnHome()">
             <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
                 width="24px" height="24px" viewBox="0 0 24 24">
-                <!-- <path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/> -->
                 <path fill="none" d="M0 0h24v24H0V0z" />
                 <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
                 <title id="altIconTitle">{{ translationMap?.get('PREV_CONVERSATIONS') }}</title>
@@ -39,10 +38,6 @@
 
         <!-- TITLE HEADER -->
         <div class="c21-title" [ngStyle]="{'color': stylesMap?.get('foregroundColor') }">
-            <!-- <div *ngIf="g.project.logoChat !== 'nologo'" class='avatar-project' item-start>
-                <div *ngIf="g.project.logoChat == 'tiledesklogo'" #avatarPlaceholder class="avatar-placeholder" [style.background-color]="g.project.color" [innerHTML]="g.project.avatar"></div>
-                <div *ngIf="g.project.logoChat !== 'tiledesklogo'" #avatarImage class="avatar-image" [style.background-image]="'url(' + g.project.logoChat + ')'"></div>
-            </div> -->
             <div class="titleText">{{widgetTitle}}</div>
         </div>
         
@@ -52,8 +47,7 @@
             [nameUserTypingNow]="nameUserTypingNow"
             [typingLocation]="typingLocation">
         </user-typing>
-        <!-- <p *ngIf="isTypings" class="c21-header-writing" [ngStyle]="{'color': g.themeForegroundColor}">{{writingMessage}}</p> -->
-      </div>
+    </div>
 
   </div>
 
@@ -79,7 +73,6 @@
     <!-- ICON TRANSCRIPT -->
     <div class="c21-header-button c21-right" *ngIf="isTrascriptDownloadEnabled" (click)="dowloadTranscript()">
         <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
-            <!-- <path fill="none" d="M0 0h24v24H0V0z"/><path d="M13 5v6h1.17L12 13.17 9.83 11H11V5h2m2-2H9v6H5l7 7 7-7h-4V3zm4 15H5v2h14v-2z"/> -->
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z" />
             <title id="altIconTitle">{{ translationMap?.get('DOWNLOAD_TRANSCRIPT') }}</title>
@@ -141,21 +134,7 @@
 
     <!-- BUILD VERSION -->
     <div class="c21-button build_version_menu" *ngIf="build_version">
-        <!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" class="icon-menu">
-          <path d="M0 0h24v24H0z" fill="none"/>
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-          <title id="altIconTitle">{{g.LOGOUT}}</title>
-        </svg> -->
         <span class="label-menu-item">{{build_version}}</span>
     </div>
 
-
-
-  <!-- ICON EDIT PROFILE -->
-  <!-- <div class="c21-header-button c21-right" *ngIf="messages && messages.length > 1">
-      <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
-          <path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-          <title id="altIconTitle">{{BUTTON_EDIT_PROFILE}}</title>
-      </svg>
-  </div> -->
 </div>

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.scss

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
  /* SET SCROLLBAR */
 // ============= CSS c21-header ================= // 
@@ -101,7 +101,7 @@
     line-height: normal;
     overflow: hidden;
     // border: 1px solid #d7d7d7;
-    color: $blue;
+    color: var(--blue);
     box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0  rgba(0, 0, 0, 0.2);
     background-color: #ffffff;
     // padding: 10px 0px 10px 0px;
@@ -124,14 +124,14 @@
         margin: 0 10px 0px 10px;
     }
     .icon-menu {
-        fill: $icon-fill-color;
+        fill: var(--icon-fill-color);
     }
     .icon-menu#archive{
-        stroke: $icon-fill-color;
+        stroke: var(--icon-fill-color);
     }
 
     .build_version_menu {
-        color: $gray;
+        color: var(--gray);
         justify-content: center;
         font-size: 0.8em;
     }