@chat21/chat21-web-widget 5.1.4 → 5.1.7-rc14

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

@@ -223,6 +223,7 @@
                     .msg_receive {
                         background-color: var(--light-white);
                         color: var(--black);
+                        min-height: 38px;
                         // max-width: 260px;
                         max-width: calc(100% - 70px);
                         min-width: 14px;

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

@@ -4,7 +4,7 @@
         <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
     </div>
 
-    <!-- ALERT EMOJI & URLS -->
+    <!-- ALERT EMOJI -->
     <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertEmoji" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
         <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
             <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
@@ -12,12 +12,6 @@
         <div tabindex="-1" class="alertText">{{translationMap.get('EMOJI_NOT_ELLOWED')}}</div>
     </div>
 
-    <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertUrl" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
-        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
-            <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
-          </svg>
-        <div tabindex="-1" class="alertText">{{translationMap.get('DOMAIN_NOT_ALLOWED')}}</div>
-    </div>
 </div>
 
 <!-- TEXTAREA + ICONS: conv active-->
@@ -27,9 +21,11 @@
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentFooterButton" 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="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
                     <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
+                    <title id="altIconTitle">{{ 'MAX_ATTACHMENT' | translate: { FILE_SIZE_LIMIT: file_size_limit } }}</title>
                 </svg>
+                
             </span>
              <input
                 [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
@@ -47,11 +43,12 @@
         <!-- ICON EMOJII -->
         <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                     <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
                     <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
                     <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
                     <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <title id="altIconTitle">{{ translationMap?.get('EMOJI') }}</title>
 
                     <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
                     <circle cx="15.02" cy="9.86" r="1.29"/>
@@ -65,7 +62,7 @@
 
 
 
-    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji || showAlertUrl" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
         <!-- isFilePendingToUpload || -->
       <textarea 
         [attr.disabled] = "(hideTextReply)? true : null"
@@ -88,7 +85,7 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji || showAlertUrl" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <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" fill="currentColor">
                 <path d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>

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

@@ -418,3 +418,28 @@ textarea:active{
     border: none;
     // margin: -2px -2px 0px;
 }
+
+
+// aggiungi un'animazione di fade in e fade out quando .star-rating-widget è visibile con transition
+.star-rating-widget {
+    transition: all 0.5s ease-in-out;
+}
+
+.star-rating-widget {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -52px;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+    flex-wrap: nowrap;
+    &.active {
+        bottom: 0px;
+    }
+    &.inactive {
+        bottom: -52px;
+    }
+}

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

@@ -1,4 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { error } from 'console';
+import { FILE_SIZE_LIMIT } from 'src/app/utils/constants';
 import { Globals } from 'src/app/utils/globals';
 import { checkAcceptedFile } from 'src/app/utils/utils';
 import { MessageModel } from 'src/chat21-core/models/message';
@@ -82,7 +84,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   showAlertEmoji: boolean = false
-  showAlertUrl: boolean = false;
+
+  file_size_limit = FILE_SIZE_LIMIT;
+  attachmentTooltip: string = '';
+  isErrorNetwork: boolean = false;
+
 
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
@@ -91,8 +97,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
               private uploadService: UploadService) { }
 
   ngOnInit() {
+    // this.updateAttachmentTooltip();
   }
 
+
   ngOnChanges(changes: SimpleChanges){
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
@@ -105,6 +113,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       this.onDrop(this.dropEvent)
     }
 
+    // if(changes['translationMap'] && changes['translationMap'].currentValue !== undefined){
+    //   this.updateAttachmentTooltip();
+    // }
+
   }
   
   ngAfterViewInit() {
@@ -112,8 +124,25 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     // setTimeout(() => {
       this.showEmojiPicker = true
     // }, 500);
+    // this.updateAttachmentTooltip();
   }
 
+
+  // updateAttachmentTooltip() {
+  //   // Use setTimeout to wait for the async translation map to be populated
+  //   setTimeout(() => {
+  //     this.logger.log('[CONV-FOOTER] updateAttachmentTooltip - translationMap:', this.translationMap);
+  //     if (this.translationMap && this.translationMap.has('MAX_ATTACHMENT')) {
+  //       const template = this.translationMap.get('MAX_ATTACHMENT');
+  //       this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT template:', template);
+  //       // this.attachmentTooltip = template.replace('{{file_size_limit}}', this.file_size_limit.toString());
+  //       this.logger.log('[CONV-FOOTER] attachmentTooltip:', this.attachmentTooltip);
+  //     } else {
+  //       this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT not found in translationMap');
+  //     }
+  //   }, 500);
+  // }
+
   // ========= begin:: functions send image ======= //
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
@@ -202,7 +231,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
             const fileXLoad = this.arrayFilesLoad[0].file;
             const uid = this.arrayFilesLoad[0].uid;
             const type = this.arrayFilesLoad[0].type;
-            const size = this.arrayFilesLoad[0].size
+            const size = this.arrayFilesLoad[0].size;
+            if(size > this.file_size_limit * 1024 * 1024){
+              this.logger.error('[CONV-FOOTER] file size is greater than the limit: ', size, this.file_size_limit * 1024 * 1024);
+              this.showErrorNetwork();
+              return;
+            }
             this.logger.log('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
@@ -239,6 +273,17 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
 
 
+    private showErrorNetwork() {
+      // posso anche passare solo keyMessage, nel caso non voglio passare un messaggio custom posso passare message e params(se il messaggio possiede dei parametri),
+      //window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: true, message: 'File size is greater than the limit {{file_size_limit}}', keyMessage: null, params: { file_size_limit: this.file_size_limit } } }));
+      window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: true,  keyMessage: 'MAX_ATTACHMENT' } }));
+      setTimeout(() => {
+        this.isFilePendingToUpload = false;
+        this.hideTextReply = false;
+        window.dispatchEvent(new CustomEvent('tooltipErrorMessage', { detail: { error: false, message: '', keyMessage: null } }));
+      }, 5000);
+    }
+
     uploadSingle(metadata, file, messageText?: string) {
       const that = this;
       try {
@@ -319,14 +364,14 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
    * @param additional_attributes
    */
   sendMessage(msg: string, type: string, metadata?: any, additional_attributes?: any) { // sponziello
+
     (metadata) ? metadata = metadata : metadata = '';
     this.onEmojiiPickerShow.emit(false)
     this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
 
-
-    let checkUrlDomain = this.checkForUrlDomain(this.textInputTextArea)
-    if(!checkUrlDomain){
-      return
+    let check = this.checkForEmojii(this.textInputTextArea)
+    if(!check){
+      return;
     }
 
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
@@ -536,22 +581,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.showAlertEmoji = false;
     return true
   }
-
-  checkForUrlDomain(text){
-    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
-      }
-      this.showAlertUrl = false
-      return true
-    }
-    this.showAlertUrl = false
-    return true
-
-
-  }
-
   
 
   onTextAreaChange(){
@@ -560,7 +589,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
     //reset alert to defalt values before checking again
     this.showAlertEmoji= false;
-    this.showAlertUrl = false;
     let check = this.checkForEmojii(this.textInputTextArea)
     if(!check){
       return;
@@ -570,6 +598,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onSendPressed(event) {
     this.logger.log('[CONV-FOOTER] onSendPressed:event', event);
     event.preventDefault();
+    if(this.showAlertEmoji){
+      return; 
+    }
     this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     if (this.isFilePendingToUpload) {
       this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
@@ -697,6 +728,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     const keyCode = event.which || event.keyCode;
     this.textInputTextArea = ((document.getElementById('chat21-main-message-context') as HTMLInputElement).value);
     if (keyCode === 13) { // ENTER pressed
+      if(this.showAlertEmoji){
+        return; 
+      }
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
         //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
         // this.resizeInputField();

package/src/app/component/{network-offline/network-offline.component.html → error-alert/error-alert.component.html}

@@ -3,6 +3,8 @@
         <path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
     </svg>
     <div class="alert-content">
-        {{ translationMap.get('CONNECTION_NETWORK_ERROR')}}
+        {{ errorMessage }}
     </div>
-</div>
+</div>
+
+

package/src/app/component/{network-offline/network-offline.component.scss → error-alert/error-alert.component.scss}

@@ -28,4 +28,6 @@ span.material-icons-outlined{
     font-size: 11px;
     line-height: 18px;
     /* // letter-spacing: -0.01em; */
-}
+}
+
+

package/src/app/component/{network-offline/network-offline.component.spec.ts → error-alert/error-alert.component.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NetworkOfflineComponent } from './network-offline.component';
+import { ErrorAlertComponent } from './error-alert.component';
 
-describe('NetworkOfflineComponent', () => {
-  let component: NetworkOfflineComponent;
-  let fixture: ComponentFixture<NetworkOfflineComponent>;
+describe('ErrorAlertComponent', () => {
+  let component: ErrorAlertComponent;
+  let fixture: ComponentFixture<ErrorAlertComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NetworkOfflineComponent ]
+      declarations: [ ErrorAlertComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(NetworkOfflineComponent);
+    fixture = TestBed.createComponent(ErrorAlertComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -21,3 +21,5 @@ describe('NetworkOfflineComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+
+

package/src/app/component/error-alert/error-alert.component.ts

@@ -0,0 +1,47 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import * as CONSTANTS from 'src/app/utils/constants';
+
+@Component({
+  selector: 'chat-error-alert',
+  templateUrl: './error-alert.component.html',
+  styleUrls: ['./error-alert.component.scss']
+})
+export class ErrorAlertComponent implements OnInit {
+
+  @Input() errorMessage: string = '';
+  @Input() errorKeyMessage: string = '';
+  @Input() errorParams: Record<string, any> = {}; 
+
+  translationMap: Map<string, string>;
+
+  constructor(
+    private customTranslateService: CustomTranslateService,
+  ){}
+
+  ngOnInit(): void {
+    let rawMessage: string = '';
+    // Combina costanti globali + parametri passati come input
+    const replacements = { ...CONSTANTS, ...this.errorParams };
+    if (this.errorKeyMessage) {
+      // Traduci il messaggio e sostituisci i placeholder
+        rawMessage = this.customTranslateService
+        .translateLanguage([this.errorKeyMessage])
+        .get(this.errorKeyMessage);
+    } else if (this.errorMessage) {
+      rawMessage = this.errorMessage;
+    }
+    this.errorMessage = this.interpolate(rawMessage, replacements);
+  }
+
+  /** Sostituisce {{placeholders}} con i valori corrispondenti */
+  private interpolate(template: string, variables: Record<string, any>): string {
+    return template.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+      const trimmedKey = key.trim();
+      return variables[trimmedKey] ?? `{{${trimmedKey}}}`;
+    });
+  }
+
+}
+
+

package/src/app/component/launcher-button/launcher-button.component.html

@@ -1,7 +1,7 @@
 <!-- tabindex="000"-->
 
 <button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center" 
-    *ngIf="g.isLogged == true && g.isOpen == false" 
+    *ngIf="g.isOpen == false" 
     [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'background-color': g.baloonImage? null: g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="openCloseWidget()"

package/src/app/component/launcher-button/launcher-button.component.ts

@@ -67,8 +67,9 @@ export class LauncherButtonComponent implements OnInit, AfterViewInit {
       // this.g.isOpen = !this.g.isOpen;
       // this.g.setIsOpen(!this.g.isOpen);
       // this.appStorageService.setItem('isOpen', this.g.isOpen);
-      this.onButtonClicked.emit( this.g.isOpen );
-    }
+     
+    } 
+    this.onButtonClicked.emit( this.g.isOpen );
   }
 
 }

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

@@ -1,15 +1,15 @@
 :host {
     --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
+    --buttonTextColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize2: #{var(--button-font-size)};
+    --buttonFontSize: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
     --buttonBorderColor: #{var(--button-border-color)};
     --buttonColor: #{var(--button-color)};
-    --buttonBackgroundColor: #ffffff; //#{var(--button-background-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
 }
 
 .button-in-msg {
@@ -20,8 +20,8 @@
     border: 1px solid var(--buttonBorderColor);
     background: var(--buttonBackgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize2);
-    color: var(--textColor);
+    font-size: var(--buttonFontSize);
+    color: var(--buttonTextColor);
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
@@ -38,7 +38,7 @@
 }
 
 .action {
-    background: var(--backgroundColor);
+    // background: var(--backgroundColor);
     transition: background-color .6s ease;
     &:focus,
     &:hover {

package/src/app/component/message/buttons/action-button/action-button.component.ts

@@ -25,7 +25,7 @@ export class ActionButtonComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--backgroundColor', this.backgroundColor);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
     if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
     if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
     if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -1,15 +1,15 @@
 :host {
     --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
+    --buttonTextColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize2: #{var(--button-font-size)};
+    --buttonFontSize: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
     --buttonBorderColor: #{var(--button-border-color)};
     --buttonColor: #{var(--button-color)};
-    --buttonBackgroundColor: #ffffff; //#{var(--button-background-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
 }
 
 
@@ -21,8 +21,8 @@
     border: 1px solid var(--buttonBorderColor);
     background: var(--buttonBackgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize2);
-    color: var(--textColor);
+    font-size: var(--buttonFontSize);
+    color: var(--buttonTextColor);
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/buttons/link-button/link-button.component.ts

@@ -23,8 +23,8 @@ export class LinkButtonComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--textColor', this.textColor);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonTextColor', this.textColor);
     if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
     if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverTextColor', this.hoverTextColor);
   }

package/src/app/component/message/buttons/text-button/text-button.component.scss

@@ -1,15 +1,14 @@
 :host {
     --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
-    --hoverBackgroundColor: #{var(--bck-msg-sent)};
-    --hoverTextColor: #{var(--blue)};
-    --buttonFontSize2: #{var(--button-font-size)};
+    --buttonTextColor: #{var(--bck-msg-sent)};
+    --buttonHoverBackgroundColor: #{var(--bck-msg-sent)};
+    --buttonHoverTextColor: #{var(--blue)};
+    --buttonFontSize: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
     --buttonBorderColor: #{var(--button-border-color)};
-    // --buttonColor: #{var(--buttonColor)};
-    --buttonBackgroundColor: #ffffff; //#{var(--button-background-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
     --buttonColor: #{var(--button-color)};
 }
 
@@ -21,11 +20,9 @@
     cursor: pointer;
     border: 1px solid var(--buttonBorderColor);
     background: var(--buttonBackgroundColor);
-    // background: var(--backgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize2);
-    // color: var(--buttonColor);
-    color: var(--textColor);
+    font-size: var(--buttonFontSize);
+    color: var(--buttonTextColor);
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
@@ -47,8 +44,8 @@
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background: var(--hoverBackgroundColor);
+        color: var(--buttonHoverTextColor);
+        background: var(--buttonHoverBackgroundColor);
         // transform: scale(1.05);
         .icon-button-action {
             svg {

package/src/app/component/message/buttons/text-button/text-button.component.ts

@@ -26,10 +26,10 @@ export class TextButtonComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverTextColor', this.hoverTextColor);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonTextColor', this.textColor);
+    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonHoverBackgroundColor', this.hoverBackgroundColor);
+    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonHoverTextColor', this.hoverTextColor);
   }
 
   onMouseOver(event){

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

@@ -3,15 +3,11 @@
 
     <span *ngFor="let button of buttons | slice:0:limit" class="div-button">
       
-      <!-- 
-      // bubbleReceivedBackground
-      // buttonBackgroundColor 
-      -->
       <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
+        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -21,7 +17,7 @@
       <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
         [button]="button"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
+        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -32,7 +28,7 @@
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
+        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"

package/src/app/providers/global-settings.service.ts

@@ -1936,7 +1936,7 @@ export class GlobalSettingsService {
         if (this.globals.departmentID) {
             this.globals.departments.forEach(department => {
                 if (department._id === this.globals.departmentID) {
-                    this.logger.debug('[GLOBAL-SET] setDepartmentFromExternal > EXTERNAL DEPARTMENT ::::' + department._id);
+                    console.log('[GLOBAL-SET] setDepartmentFromExternal > EXTERNAL DEPARTMENT ::::' + department._id);
                     this.globals.setParameter('departmentDefault', department);
                     this.setDepartment(department);
                     isValidID = true;
@@ -1964,7 +1964,7 @@ export class GlobalSettingsService {
      * save attributes in this.appStorageService
     */
     setDepartment(department) {
-        this.logger.debug('[GLOBAL-SET] setDepartment: ', JSON.stringify(department));
+        this.logger.log('[GLOBAL-SET] setDepartment: ', JSON.stringify(department));
         this.globals.setParameter('departmentSelected', department);
         // let attributes = this.globals.attributes;
         let attributes: any = JSON.parse(this.appStorageService.getItem('attributes'));
@@ -1983,7 +1983,7 @@ export class GlobalSettingsService {
         this.logger.debug('[GLOBAL-SET] setDepartment > setAttributes: ', JSON.stringify(attributes));
         this.globals.setParameter('departmentSelected', department);
         this.globals.setParameter('attributes', attributes);
-        // this.appStorageService.setItem('attributes', JSON.stringify(attributes));
+        this.appStorageService.setItem('attributes', JSON.stringify(attributes));
 
     }
     // ========= end:: GET DEPARTEMENTS ============//

package/src/app/providers/translator.service.ts

@@ -99,7 +99,7 @@ export class TranslatorService {
 
   // https://github.com/ngx-translate/core/issues/282
   initI18n(): Promise<any> {
-    this._translate.addLangs(['en', 'it']);
+    this._translate.addLangs(['en', 'it', 'es', 'fr']);
     this.logger.debug('[TRANSLATOR-SERV]»»»» initI18n getLangs ', this._translate.getLangs());
 
     // Set the default language for translation strings.
@@ -261,7 +261,10 @@ export class TranslatorService {
       'WAITING_TIME_FOUND',
       'WAITING_TIME_NOT_FOUND',
       'CLOSED',
-      'LABEL_PREVIEW'
+      'LABEL_PREVIEW',
+      'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
+      'EMOJI'
     ];
 
 
@@ -316,6 +319,9 @@ export class TranslatorService {
       globals.CLOSED = res['CLOSED'];
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
+      globals.MAX_ATTACHMENT = res['MAX_ATTACHMENT']
+      globals.MAX_ATTACHMENT_ERROR = res['MAX_ATTACHMENT_ERROR']
+      globals.EMOJI = res['EMOJI']
       
       
       if(globals.WELCOME_TITLE === 'WELLCOME_TITLE') globals.WELCOME_TITLE = res['WELCOME_TITLE']