@chat21/chat21-web-widget 5.1.0-rc1 → 5.1.0-rc11

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

@@ -39,6 +39,9 @@
     &.disabled {
         background-color: rgb(232, 233, 237);
     }
+    &.hasError{
+        box-shadow: 0 0 0 1px var(--chat-footer-border-color-error) inset;
+    }
 }
 
 .chat21-textarea-button {
@@ -52,6 +55,12 @@
         opacity: 1;
         cursor: pointer;
     }
+    &.disabled{
+        opacity: 0.3 !important;
+        pointer-events: none !important;
+        cursor: not-allowed !important;
+
+    }
 }
 
 .chat21-textarea-button span svg:hover {
@@ -273,16 +282,18 @@ textarea:active{
 
 }
 
+.footerContainerAlert{
+    position: relative;
+}
 
 #hiddenFooter{
-    // position: absolute;
+    position: absolute;
     bottom: 100%;
     width: 100%;
     height: var(--chat-footer-logo-height);
     display: flex;
     align-items: center;
     justify-content: center;
-    // position: absolute;
     // box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
     &.hideTextReply{
         height: var(--chat-footer-height);
@@ -344,6 +355,37 @@ textarea:active{
     }
 }
 
+#textAlert{
+    bottom: 100%;
+    width: 100%;
+    height: var(--chat-footer-logo-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--content-background-color);
+    position: absolute;
+    svg{
+        fill: var(--chat-footer-border-color-error);
+    }
+    // box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
+    div.alertText{
+        color: var(--dark-gray);
+        font-size: 1.2em;
+        font-weight: 500;
+        line-height: 22px;
+        font-family: Mulish, sans-serif;
+        letter-spacing: 0.24px;
+        -webkit-font-smoothing: antialiased;
+        padding: 4px 12px;
+        color: var(--chat-footer-border-color-error);
+    }
+    &.hideTextReply{
+        height: var(--chat-footer-height);
+        position: unset;
+        box-shadow: none;
+    }
+}
+
 .fade-in-bottom {
     -webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
     animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
@@ -367,4 +409,4 @@ textarea:active{
     // left: 10px;
     border: none;
     margin: -2px -2px 0px;
-}
+}

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

@@ -10,8 +10,9 @@ 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 { isImage } from 'src/chat21-core/utils/utils-message';
+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';
 
 @Component({
   selector: 'chat-conversation-footer',
@@ -24,7 +25,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() attributes: string;
   @Input() senderId: string;
   @Input() tenant: string;
-  @Input() projectid: string;
+  @Input() project: ProjectModel;
   @Input() channelType: string;
   @Input() userFullname: string;
   @Input() userEmail: string;
@@ -81,10 +82,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     include: [ 'recent', 'people', 'nature', 'activity', 'flags']
   }
 
+  showAlertEmoji: boolean = false
+  showAlertUrl: boolean = false;
+
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(public g: Globals,
-              private chatManager: ChatManager,
+  constructor(private chatManager: ChatManager,
               private typingService: TypingService,
               private uploadService: UploadService) { }
 
@@ -253,7 +256,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       //     return snapshot.ref.getDownloadURL();   // Will return a promise with the download link
       // }).then(downloadURL => {
       //     that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
-      //     that.g.wdLog([`Successfully uploaded file and got download link - ${downloadURL}`]);
 
       //     metadata.src = downloadURL;
       //     let type_message = TYPE_MSG_TEXT;
@@ -321,6 +323,13 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     (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
+    }
+
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
 
       // msg = htmlEntities(msg);
@@ -345,7 +354,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         // fine-sponziello
       // this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith)
       const senderId = this.senderId;
-      const projectid = this.projectid;
+      const projectid = this.project.id;
       const channelType = this.channelType;
       const userFullname = this.userFullname;
       const userEmail = this.userEmail;
@@ -514,11 +523,49 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     //}, false);
   }
 
+
+  checkForEmojii(text){
+    //remove emojii only if "emojii" exist and is set to false
+    if(this.project && this.project.settings?.allow_send_emoji === false){
+      this.showAlertEmoji = isEmoji(text);
+      if(this.showAlertEmoji){
+        return false
+      }
+      this.showAlertEmoji = false;
+      return true
+    }
+    this.showAlertEmoji = false;
+    return true
+  }
+
+  checkForUrlDomain(text){
+    if(this.project && this.project.settings?.allowed_urls === true){
+      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(){
     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;
+    }
   }
 
   onSendPressed(event) {
@@ -587,6 +634,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   addEmoji(event){
     this.onEmojiiPickerShow.emit(false); //de-activate emojii picker on select
+
+    let check = this.checkForEmojii(this.textInputTextArea)
+    if(!check){
+      return;
+    }
+
     this.textInputTextArea = this.textInputTextArea.trimStart() + event.emoji.native + " "
     this.setFocusOnId('chat21-main-message-context')
   }
@@ -632,7 +685,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
    * @param str
    */
   setWritingMessages(str) {
-    //this.messagingService.setWritingMessages(str, this.g.channelType);
     this.typingService.setTyping(this.conversationWith, str, this.senderId, this.userFullname )
   }
 

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

@@ -112,7 +112,7 @@
 
 
     <!-- ICON RESTART CONVERSATION -->
-    <div class="c21-header-button c21-right"  *ngIf="!hideRestartConversationOptionsMenu" (click)="restartChat()">
+    <!-- <div class="c21-header-button c21-right"  *ngIf="!hideRestartConversationOptionsMenu" (click)="restartChat()">
         <svg role="img" id="refresh" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg" 
             width="20px" height="20px" viewBox="0 0 20 20">
             <path d="M9.6,18.2c0.6,0,1-0.7,1-1.5s-0.5-1.5-1-1.5H6c-0.6,0-1-0.7-1-1.5V7.8h1c0.4,0,0.8-0.4,1-0.9c0.2-0.6,0.1-1.2-0.2-1.6  l-2.1-3c-0.4-0.6-1.1-0.6-1.5,0l-2.1,3C0.9,5.7,0.8,6.3,1,6.9s0.5,0.9,1,0.9h1v5.9c0,2.5,1.4,4.4,3.1,4.4H9.6z"/>
@@ -120,7 +120,7 @@
             <title id="altIconTitle">{{ translationMap?.get('RESTART') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('RESTART') }}</span>
-    </div>
+    </div> -->
     
     <!-- ICON MAXIMIZE -->
     <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='min'" (click)="maximizeMinimize('max')">

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

@@ -1,8 +1,8 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './../../../providers/app-config.service';
 import { Globals } from './../../../utils/globals';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ConversationHeaderComponent } from './conversation-header.component';
 import { TypingService } from '../../../../chat21-core/providers/abstract/typing.service';
@@ -18,17 +18,16 @@ describe('ConversationHeaderComponent', () => {
   
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ConversationHeaderComponent ],
-      imports: [
-        HttpClientModule
-      ],
-      providers: [ 
+    declarations: [ConversationHeaderComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [],
+    providers: [
         Globals,
         TypingService,
-        AppConfigService
-      ],
-      schemas: [NO_ERRORS_SCHEMA],
-    })
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
     .compileComponents();
   }));
 

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

@@ -23,7 +23,6 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() typingLocation: string;
   @Input() isTrascriptDownloadEnabled: boolean;
   @Input() hideCloseConversationOptionMenu: boolean;
-  @Input() hideRestartConversationOptionsMenu: boolean;
   @Input() hideHeaderCloseButton: boolean;
   @Input() hideHeaderBackButton: boolean;
   @Input() hideHeaderConversationOptionsMenu: boolean;

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

@@ -96,7 +96,6 @@ export class EyeeyeCatcherCardComponent implements OnInit {
       title = this.g.calloutTitle.trim();
     }
     this.title = title;
-    const emojiRegex = require('emoji-regex');
     const regex = emojiRegex();
     let match: any;
     // this.logger.debug('[EYEEYE-CATCHER-CARD]-->regex, emojiRegex', regex, emojiRegex)
@@ -163,3 +162,8 @@ export class EyeeyeCatcherCardComponent implements OnInit {
   //     this.displayEyeCatcherCardCloseBtnIsMobileWrapper = 'none';
   // }
 }
+
+
+export default function emojiRegex(): RegExp {
+  return /(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2700-\u27BF])|(?:\u24C2)|(?:[\u1F680-\u1F6FF])/g;
+}

package/src/app/component/home-conversations/home-conversations.component.spec.ts

@@ -1,6 +1,6 @@
 import { CustomTranslateService } from './../../../chat21-core/providers/custom-translate.service';
 import { TranslatorService } from './../../providers/translator.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './../../providers/app-config.service';
 import { WaitingService } from './../../providers/waiting.service';
 import { ChatManager } from './../../../chat21-core/providers/chat-manager';
@@ -25,12 +25,10 @@ describe('HomeConversationsComponent', () => {
   
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ HomeConversationsComponent ],
-      imports: [
-        HttpClientModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
+    declarations: [HomeConversationsComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [TranslateModule.forRoot()],
+    providers: [
         Globals,
         ImageRepoService,
         ChatManager,
@@ -39,10 +37,10 @@ describe('HomeConversationsComponent', () => {
         WaitingService,
         AppConfigService,
         TranslatorService,
-        CustomTranslateService
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
+        CustomTranslateService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
     .compileComponents();
   }));
 

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

@@ -1,5 +1,7 @@
 import { Component, ElementRef, AfterViewInit, Input, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
@@ -26,13 +28,13 @@ export class AudioComponent implements AfterViewInit {
   currentTime: number = 0;
   isPlaying: boolean = false;
 
+  private logger: LoggerService = LoggerInstance.getInstance();
   constructor(
     private sanitizer: DomSanitizer,
     private elementRef: ElementRef
   ) {}
 
   ngAfterViewInit() {
-    console.log('stylesssss', this.stylesMap)
     if (this.audioBlob) {
       this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
       this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
@@ -136,21 +138,33 @@ export class AudioComponent implements AfterViewInit {
     return `${minutes}:${sec < 10 ? '0' + sec : sec}`;
   }
 
-  getAudioDuration() {
-    const audio = new Audio();
-    audio.src = this.rawAudioUrl!;
-    audio.addEventListener('loadedmetadata', () => {
-      if (audio.duration === Infinity) {
-        audio.currentTime = Number.MAX_SAFE_INTEGER;
-        audio.ontimeupdate = () => {
-          audio.ontimeupdate = null; 
-          audio.currentTime = 0;
-          this.audioDuration = audio.duration;
-        };
-      } else {
-        this.audioDuration = audio.duration;
-      }
-    });
+  async getAudioDuration() {
+    // const audio = new Audio();
+    // audio.src = this.rawAudioUrl!;
+    // audio.addEventListener('loadedmetadata', () => {
+    //   if (audio.duration === Infinity) {
+    //     audio.currentTime = Number.MAX_SAFE_INTEGER;
+    //     audio.ontimeupdate = () => {
+    //       audio.ontimeupdate = null; 
+    //       audio.currentTime = 0;
+    //       this.audioDuration = audio.duration;
+    //     };
+    //   } else {
+    //     this.audioDuration = audio.duration;
+    //   }
+    // });
+
+    const response = await fetch(this.rawAudioUrl!);
+    this.logger.debug('getAudioDuration: response ---> ', response)
+    const arrayBuffer = await response.arrayBuffer();
+    this.logger.debug('getAudioDuration: arrayBuffer ---> ', arrayBuffer)
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    this.logger.debug('getAudioDuration: audioContext ---> ', audioContext)
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    this.logger.debug('getAudioDuration: audioBuffer ---> ', audioBuffer)
+    this.audioDuration = audioBuffer.duration;
+    this.logger.debug('getAudioDuration: audioDuration ---> ', this.audioDuration)
+
   }
 
   extractFirstColor(gradient: string): string | null {

package/src/app/component/star-rating-widget/star-rating-widget.component.spec.ts

@@ -1,27 +1,26 @@
 import { AppConfigService } from './../../providers/app-config.service';
 import { StarRatingWidgetService } from './../../providers/star-rating-widget.service';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { StarRatingWidgetComponent } from './star-rating-widget.component';
 import { Globals } from '../../utils/globals';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('StarRatingWidgetComponent', () => {
   let component: StarRatingWidgetComponent;
   let fixture: ComponentFixture<StarRatingWidgetComponent>;
 
-  beforeEach(async(() => {
+  beforeEach((() => {
     TestBed.configureTestingModule({
-      declarations: [ StarRatingWidgetComponent ],
-      imports: [
-        HttpClientModule
-      ],
-      providers: [
+    declarations: [StarRatingWidgetComponent],
+    imports: [],
+    providers: [
         Globals,
         AppConfigService,
-        StarRatingWidgetService
-      ]
-    })
+        StarRatingWidgetService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
     .compileComponents();
   }));
 

package/src/app/pipe/date-ago.pipe.ts

@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-import * as dayjs from 'dayjs'
-import * as relativeTime from 'dayjs/plugin/relativeTime'
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 dayjs.extend(relativeTime)
 
 @Pipe({

package/src/app/providers/app-config.service.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
 import { Globals } from '../utils/globals';
 
@@ -6,13 +6,12 @@ import { AppConfigService } from './app-config.service';
 
 describe('AppConfigService', () => {
   beforeEach(() => TestBed.configureTestingModule({
-    imports: [
-      HttpClientModule,
-    ],
+    imports: [],
     providers: [
-      Globals
+        Globals,
+        provideHttpClient(withInterceptorsFromDi())
     ]
-  }));
+}));
 
   it('should be created', () => {
     const service: AppConfigService = TestBed.get(AppConfigService);

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

@@ -1,5 +1,5 @@
 import { Globals } from './../utils/globals';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TestBed, inject } from '@angular/core/testing';
 import { AppStorageService } from '../../chat21-core/providers/abstract/app-storage.service';
 import { AppConfigService } from './app-config.service';
@@ -9,16 +9,15 @@ import { GlobalSettingsService } from './global-settings.service';
 describe('GlobalSettingsService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         GlobalSettingsService,
         AppStorageService,
         AppConfigService,
-        Globals
-      ]
-    });
+        Globals,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([GlobalSettingsService], (service: GlobalSettingsService) => {

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

@@ -93,6 +93,7 @@ export class GlobalSettingsService {
                     project['trialDaysLeft'],
                     project['trialExpired'],
                     project['updatedAt'],
+                    project['settings'],
                     project['versions']
                 );
             }
@@ -865,11 +866,6 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.hideCloseConversationOptionMenu = (TEMP === true) ? true : false;;
         }
-        TEMP = tiledeskSettings['hideRestartConversationOptionsMenu'];
-        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderConversationOptionsMenu:: ', TEMP]);
-        if (TEMP !== undefined) {
-            globals.hideRestartConversationOptionsMenu = (TEMP === true) ? true : false;;
-        }
         TEMP = tiledeskSettings['hideHeaderConversationOptionsMenu'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderConversationOptionsMenu:: ', TEMP]);
         if (TEMP !== undefined) {
@@ -1240,10 +1236,6 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.hideCloseConversationOptionMenu = TEMP;
         }
-        TEMP = el.nativeElement.getAttribute('hideRestartConversationOptionsMenu');
-        if (TEMP !== null) {
-            this.globals.hideRestartConversationOptionsMenu = TEMP;
-        }
         TEMP = el.nativeElement.getAttribute('hideSettings');
         if (TEMP !== null) {
             this.globals.hideSettings = TEMP;
@@ -1637,11 +1629,6 @@ export class GlobalSettingsService {
             globals.hideCloseConversationOptionMenu = stringToBoolean(TEMP); 
         }
 
-        TEMP = getParameterByName(windowContext, 'tiledesk_hideRestartConversationOptionsMenu');
-        if (TEMP) {
-            globals.hideRestartConversationOptionsMenu = stringToBoolean(TEMP); 
-        }
-
         TEMP = getParameterByName(windowContext, 'tiledesk_hideSettings');
         if (TEMP) {
             globals.hideSettings = stringToBoolean(TEMP); 

package/src/app/providers/star-rating-widget.service.spec.ts

@@ -3,20 +3,19 @@ import { Globals } from '../utils/globals';
 import { TestBed, inject } from '@angular/core/testing';
 
 import { StarRatingWidgetService } from './star-rating-widget.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('StarRatingWidgetService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule
-      ],
-      providers: [
+    imports: [],
+    providers: [
         StarRatingWidgetService,
         Globals,
-        AppConfigService
-      ]
-    });
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([StarRatingWidgetService], (service: StarRatingWidgetService) => {

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

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './app-config.service';
 import { Globals } from './../utils/globals';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -9,16 +9,14 @@ import { TranslatorService } from './translator.service';
 describe('TranslatorService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-        TranslateModule.forRoot(),
-      ],
-      providers: [
+    imports: [TranslateModule.forRoot()],
+    providers: [
         TranslatorService,
         Globals,
-        AppConfigService
-      ]
-    });
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([TranslatorService], (service: TranslatorService) => {

package/src/app/providers/waiting.service.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppConfigService } from './app-config.service';
 import { Globals } from './../utils/globals';
 import { TestBed, inject } from '@angular/core/testing';
@@ -8,15 +8,14 @@ import { WaitingService } from './waiting.service';
 describe('WaitingService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule
-      ],
-      providers: [
+    imports: [],
+    providers: [
         WaitingService,
         Globals,
-        AppConfigService
-      ]
-    });
+        AppConfigService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
   });
 
   it('should be created', inject([WaitingService], (service: WaitingService) => {

package/src/app/sass/_variables.scss

@@ -31,8 +31,13 @@
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
     --chat-footer-color: #1a1a1a;
+    --chat-footer-border-color-error: #aa0404;
 
-    --icon-fill-color: #5f6368
+    --icon-fill-color: #5f6368;
+
+
+    --content-background-color: #fff;
+    --content-text-color: var(--black);
 }
 
 $trasp-black:rgba(0,0,0,0.8);