@chat21/chat21-web-widget 5.1.0-rc9 → 5.1.1-rc1

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

@@ -1,6 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
-import { checkAcceptedFile, isEmoji, isAllowedUrlInText } from 'src/app/utils/utils';
+import { checkAcceptedFile } from 'src/app/utils/utils';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
@@ -10,7 +10,7 @@ import { UploadService } from 'src/chat21-core/providers/abstract/upload.service
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 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';
+import { convertColorToRGBA, isAllowedUrlInText, isEmoji } from 'src/chat21-core/utils/utils';
 import { findAndRemoveEmoji, isImage } from 'src/chat21-core/utils/utils-message';
 import { ProjectModel } from 'src/models/project';
 
@@ -50,7 +50,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
-  @Output() onBackButton = new EventEmitter()
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -325,6 +324,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
 
 
+    let checkUrlDomain = this.checkForUrlDomain(this.textInputTextArea)
+    if(!checkUrlDomain){
+      return
+    }
+
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
 
       // msg = htmlEntities(msg);
@@ -534,7 +538,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   checkForUrlDomain(text){
-    if(this.project && this.project.settings?.allowed_urls === true){
+    if(this.project && this.project.settings?.allowed_urls === true && this.project.settings?.allowed_urls_list){
       this.showAlertUrl = !isAllowedUrlInText(text, this.project.settings?.allowed_urls_list);
       if(this.showAlertUrl){
         return false
@@ -554,16 +558,13 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.resizeInputField()
     this.setWritingMessages(this.textInputTextArea)
 
+    //reset alert to defalt values before checking again
+    this.showAlertEmoji= false;
+    this.showAlertUrl = false;
     let check = this.checkForEmojii(this.textInputTextArea)
     if(!check){
       return;
     }
-
-    let checkUrlDomain = this.checkForUrlDomain(this.textInputTextArea)
-    if(!checkUrlDomain){
-      return
-    }
-
   }
 
   onSendPressed(event) {
@@ -634,7 +635,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.onEmojiiPickerShow.emit(false); //de-activate emojii picker on select
 
     let check = this.checkForEmojii(this.textInputTextArea)
-    console.log('chekkkkkkk', check)
     if(!check){
       return;
     }
@@ -654,10 +654,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   //   this.restoreTextArea()
   // }
 
-  onBackButtonFN(){
-    this.onBackButton.emit(false)
-  }
-
   setFocusOnId(id) {
     if(!this.isMobile){
       setTimeout(function () {

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

@@ -8,19 +8,13 @@
 
         <!-- 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()">
-            <!-- <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                <title id="altIconTitle">{{ translationMap?.get('BUTTON_CLOSE_TO_ICON') }}</title>
-            </svg> -->
             <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 d="M19.35,9.21c.2-.2.2-.51,0-.71l-.71-.71c-.2-.2-.51-.2-.71,0l-5.94,5.94-5.94-5.94c-.2-.2-.51-.2-.71,0l-.71.71c-.2.2-.2.51,0,.71l7,7c.2.2.51.2.71,0l7-7Z"/>
                 <title id="altIconTitle">{{ translationMap?.get('BUTTON_CLOSE_TO_ICON') }}</title>
             </svg>
         </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()" >
             <svg aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
@@ -31,6 +25,38 @@
             </svg>
         </button>
 
+
+    <!-- ICON MAXIMIZE -->
+    <button *ngIf="size === 'min' && !fullscreenMode" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
+        <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z"></path>
+            <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
+        </svg>
+    </button>
+
+     <!-- ICON MINIMIZE -->
+    <button *ngIf="size==='top' && !fullscreenMode" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
+        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85"></path>
+            <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
+        </svg>
+    </button>
+
+    <!-- ICON TOP -->
+    <button *ngIf="size==='max' && !fullscreenMode" [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-header-button c21-right c21-button-clean" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
+        <svg  role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>
+            <path d="M13.3,7.6l1.2-1.2c0.4-0.4,0.3-0.8,0-1.1s-0.9-0.4-1.2-0.1L10,8.4l3.3,3.3c0.4,0.4,0.8,0.3,1.1,0s0.4-0.9,0.1-1.2l-1.2-1.2 h2.2l0-1.7H13.3z"/>
+            <path d="M8.5,14.5L8.5,14.5c-0.5,0-0.9-0.4-0.9-0.8V3.3c0-0.5,0.4-0.8,0.8-0.8h0c0.5,0,0.8,0.4,0.8,0.8v10.4 C9.4,14.2,9,14.5,8.5,14.5z"/>
+            <title id="altIconTitle">{{ translationMap?.get('CENTER') }}</title>
+        </svg>
+    </button>
+
+
+
         <!-- ICON BACK -->
         <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"
@@ -123,23 +149,34 @@
     </div> -->
     
     <!-- ICON MAXIMIZE -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='min'" (click)="maximizeMinimize('max')">
-        <svg role="img" aria-labelledby="altIconTitle" [class="icon-menu" xmlns="http://www.w3.org/2000/svg" 
-            width="17" height="17" viewBox="0 0 62 62">
-            <path d="M61,2H33a1,1,0,0,0-1,1V9a1,1,0,0,0,1,1H48.344L2.293,56.051a1,1,0,0,0,0,1.414l4.243,4.242a1,1,0,0,0,1.414,0L54,15.656V31a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2Z"></path>
+    <div class="c21-header-button c21-right" *ngIf="size === 'min' && !fullscreenMode" (click)="onChangeSize('max')">
+        <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z" fill="currentColor"></path>
             <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MAXIMIZE') }}</span>
-    </div> -->
+    </div>
     <!-- ICON MINIMIZE -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='max'" (click)="maximizeMinimize('min')">
-        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" transform="rotate(180)" xmlns="http://www.w3.org/2000/svg" 
-            width="17" height="17" viewBox="0 0 62 62">
-            <path d="M61,2H33a1,1,0,0,0-1,1V9a1,1,0,0,0,1,1H48.344L2.293,56.051a1,1,0,0,0,0,1.414l4.243,4.242a1,1,0,0,0,1.414,0L54,15.656V31a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2Z"></path>
+    <div class="c21-header-button c21-right" *ngIf="(size==='max' || size==='top') && !fullscreenMode" (click)="onChangeSize('min')">
+        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85" fill="currentColor"></path>
             <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MINIMIZE') }}</span>
-    </div> -->
+    </div>
+    <!-- ICON TOP -->
+    <div class="c21-header-button c21-right" *ngIf="size!=='top' && !fullscreenMode" (click)="onChangeSize('top')">
+        <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path fill="currentColor" d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>
+            <path fill="currentColor" d="M13.3,7.6l1.2-1.2c0.4-0.4,0.3-0.8,0-1.1s-0.9-0.4-1.2-0.1L10,8.4l3.3,3.3c0.4,0.4,0.8,0.3,1.1,0s0.4-0.9,0.1-1.2l-1.2-1.2 h2.2l0-1.7H13.3z"/>
+            <path fill="currentColor" d="M8.5,14.5L8.5,14.5c-0.5,0-0.9-0.4-0.9-0.8V3.3c0-0.5,0.4-0.8,0.8-0.8h0c0.5,0,0.8,0.4,0.8,0.8v10.4 C9.4,14.2,9,14.5,8.5,14.5z"/>
+            <title id="altIconTitle">{{ translationMap?.get('CENTER') }}</title>
+        </svg>
+        <span class="label-menu-item">{{ translationMap?.get('CENTER') }}</span>
+    </div>
 
     <!-- ICON LOGOUT -->
     <div class="c21-header-button c21-right"  *ngIf="!hideSignOutOptionMenu" (click)="signOut()">

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

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
  /* SET SCROLLBAR */
 // ============= CSS c21-header ================= // 
@@ -24,7 +23,7 @@
             .c21-title {
                 position: absolute;
                 left: 50px;
-                right: 100px;
+                right: 140px;
                 display: flex;
                 align-items: center;
                 width: auto;

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

@@ -22,6 +22,8 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() nameUserTypingNow: string;
   @Input() typingLocation: string;
   @Input() isTrascriptDownloadEnabled: boolean;
+  @Input() fullscreenMode: boolean;
+  @Input() size: 'min' | 'max' | 'top';
   @Input() hideCloseConversationOptionMenu: boolean;
   @Input() hideHeaderCloseButton: boolean;
   @Input() hideHeaderBackButton: boolean;
@@ -57,8 +59,8 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   private API_URL: string;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(
-    public g: Globals,
-    public appConfigService: AppConfigService,) {
+    public appConfigService: AppConfigService
+  ) {
       this.API_URL = this.appConfigService.getConfig().apiUrl;
   }
 
@@ -103,12 +105,12 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     this.onMenuOptionClick.emit(HEADER_MENU_OPTION.LOGOUT)
   }
   /**
-   * @param status : string 'max' || 'min'
+   * @param status : string 'max' || 'min' || 'top'
    */
-  maximizeMinimize(status){
-    this.heightStatus = status
+  onChangeSize(status){
     if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
     if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
+    if(status === 'top') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.TOP)
     this.onMenuOptionShow.emit(false)
   }
   toggleSound() {

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

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-
-
 :host .c21-content ::ng-deep > chat-image  {
 
     div { 

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.scss

@@ -3,8 +3,6 @@
 * EYE-CATCHER CARD & EYE-CATCHER CARD CLOSE BTN
 * *********************************************  
 */ 
-// @import 'src/app/sass/variables';
-
 
 
 
@@ -182,7 +180,7 @@
     width: 100%;
     height: auto;
     vertical-align: middle;
-    font-family: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
+    font-family: var(--font-family-callout);
     font-weight: normal;
     word-wrap: break-word;
     margin: 0px;

package/src/app/component/form/form-builder/form-builder.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 .c21-label-button {
     font-size: 1.2em !important;

package/src/app/component/form/inputs/form-text/form-text.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;

package/src/app/component/form/inputs/form-textarea/form-textarea.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;

package/src/app/component/form/prechat-form/prechat-form.component.scss

@@ -1,5 +1,3 @@
-// @import '../../../sass/variables';
-// @import '../../../sass/normalize.css';
 
 #chat21-prechat-form {
         background-color: #ffffff;
@@ -8,7 +6,7 @@
         .c21-header {
             overflow: hidden;
             width: 100%;
-            height: 52px;
+            height: var(--chat-header-height);
             .c21-header-button {
                 .c21-close-button.c21-small {
                     width: 31px;

package/src/app/component/home/home.component.html

@@ -6,8 +6,49 @@
     <div class="c21-header" (click)="hideMenuOptions()" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient }" >
 
         <div class="c21-header-container">
+
+            
+
+            
             <!-- ICON CLOSE CHAT -->
             <div class="c21-header-button" [ngStyle]="{'display': (g.hideHeaderCloseButton)?'none':'block'}">
+
+                <!-- ICON MAXIMIZE -->
+                <div *ngIf="size === 'min' && !fullscreenMode" class="c21-size-button">
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
+                        <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                            width="17" height="17" viewBox="0 0 17 17">
+                            <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z"></path>
+                            <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- ICON MINIMIZE -->
+                <div *ngIf="size==='top' && !fullscreenMode" class="c21-size-button">
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
+                        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                            width="17" height="17" viewBox="0 0 17 17">
+                            <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85"></path>
+                            <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- ICON TOP -->
+                <div *ngIf="size==='max' && !fullscreenMode" class="c21-size-button">
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
+                        <svg  role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                            width="17" height="17" viewBox="0 0 17 17">
+                            <path d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>
+                            <path d="M13.3,7.6l1.2-1.2c0.4-0.4,0.3-0.8,0-1.1s-0.9-0.4-1.2-0.1L10,8.4l3.3,3.3c0.4,0.4,0.8,0.3,1.1,0s0.4-0.9,0.1-1.2l-1.2-1.2 h2.2l0-1.7H13.3z"/>
+                            <path d="M8.5,14.5L8.5,14.5c-0.5,0-0.9-0.4-0.9-0.8V3.3c0-0.5,0.4-0.8,0.8-0.8h0c0.5,0,0.8,0.4,0.8,0.8v10.4 C9.4,14.2,9,14.5,8.5,14.5z"/>
+                            <title id="altIconTitle">{{ translationMap?.get('CENTER') }}</title>
+                        </svg>
+                    </button>
+                </div>
+
+
                 <div class="c21-close-button">
                     <button tabindex="2001" aria-label="    chiudi chat" class="c21-close-button-body" (click)="f21_close()">
                         <!-- <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">

package/src/app/component/home/home.component.scss

@@ -1,8 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
-
-
 #chat21-home-component {
     position: absolute;
     width: 100%;
@@ -89,7 +84,6 @@
                 }
 
                 .c21-text {
-                    font-family: 'Google Sans';
                     .c21-text-welcome {
                         overflow: hidden;
                         line-height: 1.2em;
@@ -130,7 +124,6 @@
                     }
                 }
                 .c21-text {
-                    font-family: 'Roboto';
                     margin: 0 0 0 15px;
 
                     .c21-text-welcome {
@@ -150,6 +143,39 @@
                     }
                 }
             }
+
+            .c21-size-button {
+                position: absolute;
+                width: 35px;
+                height: 35px;
+                top: 0;
+                right: 35px;
+                margin: 10px;
+                z-index: 10;
+                justify-content: center;
+                button {
+                    display: flex;
+                    cursor: pointer;
+                    width: 35px;
+                    height: 35px;
+                    border-radius: 8px;
+                    padding: 0px;
+                    margin: 0px;
+                    display: flex;
+                    align-items: center;
+                    border: none;
+                    background-color: rgba(0, 0, 0, 0);
+                    &:hover {
+                        background-color: rgba(0, 0, 0, 0.4);
+                    }
+                    svg {
+                        margin: 0 auto;
+                        fill: #ffffff;
+                    }
+                }
+                
+            }
+
         }
 
         // .c21-header-container::after{
@@ -308,7 +334,7 @@
                 font-weight: 500;
                 line-height: 22px;
 
-                font-family: Mulish, sans-serif;
+                font-family: var(--font-family-powered-by);
                 letter-spacing: 0.24px;
                 -webkit-font-smoothing: antialiased;
     

package/src/app/component/home/home.component.ts

@@ -6,6 +6,7 @@ import { LoggerService } from '../../../chat21-core/providers/abstract/logger.se
 import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInstance';
 import { convertColorToRGBA } from '../../../chat21-core/utils/utils';
 import { Globals } from '../../utils/globals';
+import { HEADER_MENU_OPTION } from '../../utils/constants';
 
 @Component({
   selector: 'chat-home',
@@ -23,6 +24,11 @@ export class HomeComponent implements OnInit, AfterViewInit {
   @Input() hideSettings: boolean;
   @Input() hideNewConversationButton: boolean;
   @Input() stylesMap: Map<string, string>
+  @Input() size: 'min' | 'max' | 'top';
+  @Input() fullscreenMode: boolean;
+  @Input() hideHeaderConversationOptionsMenu: boolean;
+  @Input() isButtonsDisabled: boolean;
+  @Input() translationMap: Map<string, string>;
   @Output() onNewConversation = new EventEmitter<string>();
   @Output() onConversationSelected = new EventEmitter<ConversationModel>();
   @Output() onOpenAllConvesations = new EventEmitter();
@@ -30,6 +36,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
   @Output() onSignOut = new EventEmitter();
   @Output() onImageLoaded = new EventEmitter<ConversationModel>();
   @Output() onConversationLoaded = new EventEmitter<ConversationModel>();
+  @Output() onMenuOptionClick = new EventEmitter<string>();
+
   // ========= end:: Input/Output values ===========/
 
 
@@ -197,6 +205,15 @@ export class HomeComponent implements OnInit, AfterViewInit {
     this.onSignOut.emit();
   }
 
+  /**
+   * @param status : string 'max' || 'min' || 'top'
+   */
+  onChangeSize(status) {
+    if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
+    if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
+    if(status === 'top') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.TOP)
+  }
+
   // ========= end:: ACTIONS ============//
 
   addAnimation() {

package/src/app/component/home-conversations/home-conversations.component.scss

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
 #c21-app-list-conversations{
     position: relative;
     display: block;

package/src/app/component/last-message/last-message.component.html

@@ -36,8 +36,6 @@
           [message]="message"
           [isSameSender]="isSameSender(message?.sender, i)"
           [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-          [fontSize]="stylesMap.get('fontSize')"
-          [fontFamily]="stylesMap.get('fontFamily')"
           [stylesMap]="stylesMap"
           (onElementRendered)="onElementRenderedFN($event)">
         </chat-bubble-message>

package/src/app/component/last-message/last-message.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 

package/src/app/component/list-all-conversations/list-all-conversations.component.scss

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
 #c21-app-list-all-conversations {
     position: relative;
     display: block;
@@ -18,7 +15,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -67,7 +64,7 @@
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 

package/src/app/component/list-conversations/list-conversations.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host .c21-msg ::ng-deep > a > img {
     max-width: 24% !important;
     vertical-align: middle;

package/src/app/component/menu-options/menu-options.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 #c21-menu-options{
     
     .modal-menu-options {

package/src/app/component/message/audio/audio.component.html

@@ -17,7 +17,7 @@
             </svg>
             <!-- <i class="material-icons">pause</i> -->
         </button>
-        <div class="duration" [style.color]="color" [style.font-size]="fontSize" >
+        <div class="duration" [style.color]="color">
             <span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
             <span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
         </div>

package/src/app/component/message/audio/audio.component.scss

@@ -80,6 +80,7 @@ button {
     }
     .duration {
         padding: 0 3px;
+        font-size: var(--font-size-bubble-message);
     }
 }
 

package/src/app/component/message/audio/audio.component.ts

@@ -17,7 +17,6 @@ export class AudioComponent implements AfterViewInit {
   @Input() audioBlob: Blob | null = null;
   @Input() metadata: any | null = null;
   @Input() color: string;
-  @Input() fontSize: string;
   @Input() stylesMap: Map<string, string>;
 
   audioUrl: SafeUrl | null = null;

package/src/app/component/message/avatar/avatar.component.scss

@@ -3,10 +3,10 @@
     position: relative;
     padding: 0;
     margin: 0;
-    height: 40px;
-    width: 40px;
-    min-height: 40px;
-    min-width: 40px;
+    height: var(--avatar-height);
+    width: var(--avatar-width);
+    min-height: var(--avatar-height);
+    min-width: var(--avatar-width);
     line-height: 40px;
     border-radius: 50%;
     overflow: hidden;

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -25,7 +25,7 @@
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
         [style.color]="fullnameColor"
-        [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+        [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
         {{message?.sender_fullname}}
       </div>
       <!-- message type:: image -->
@@ -61,7 +61,6 @@
       <chat-audio  *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
-        [fontSize]="fontSize"
         [stylesMap]="stylesMap">
       </chat-audio>
 
@@ -82,8 +81,6 @@
         <chat-text *ngIf="message?.type !=='html'"
           [text]="message?.text"
           [color]="fontColor"
-          [fontSize]="fontSize"
-          [fontFamily]="fontFamily"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)">
         </chat-text>

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 /* ====== SET MESSAGES ====== */
 
 .messages {

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -18,8 +18,6 @@ export class BubbleMessageComponent implements OnInit {
   @Input() message: MessageModel;
   @Input() isSameSender: boolean;
   @Input() fontColor: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();