@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc8

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

@@ -10,14 +10,17 @@
           <span>View more</span>
         </div> -->
   
-        <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
+        <button type="button"
+          aria-label="Dismiss"
+          class="buttonClose c21-button-clean"
+          (click)="closeMessagePreview()">
           <span>
-            <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
+            <svg aria-hidden="true" focusable="false" height="20px" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
               <path d="M0 0h24v24H0V0z" fill="none"></path>
               <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"></path>
             </svg>
           </span>
-        </div>
+        </button>
   
       </div>
   
@@ -26,8 +29,11 @@
   
     <div class="container">
 
-      <div class="previewNewMessagge" (click)="openConversationByID(conversation)"
-        [class.left-indicator]="isFirst && (!isImage(message) || isFrame(message))" 
+      <button type="button"
+        class="previewNewMessagge c21-button-clean"
+        [attr.aria-label]="g.START_A_CONVERSATION"
+        (click)="openConversationByID(conversation)"
+        [class.left-indicator]="isFirst && (!isImage(message) || isFrame(message))"
         [class.no-background]="(isImage(message) || isFrame(message)) && message?.text?.trim() === ''">
   
         <chat-bubble-message class="messages no-background"
@@ -49,9 +55,9 @@
             </chat-avatar-image>
           </div> 
         </div>
-  
-      </div>
-  
+
+      </button>
+
       <div *ngIf="message?.attributes && message?.attributes?.attachment && last" class="conversations-buttons">
         <chat-message-attachment 
           style="height: 100%; display: block;"
@@ -64,6 +70,6 @@
       </div>
      
     </div>
-  
+
   </div>
 </div>

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

@@ -7,8 +7,9 @@
         min-height: 38px;
     }  
 }
-:host .previewNewMessagge ::ng-deep > chat-bubble-message > #bubble-message > div > div > chat-text {
-    p {
+:host .previewNewMessagge ::ng-deep > chat-bubble-message > .bubble-message > div > div > chat-text {
+    p,
+    .message_innerhtml {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -111,6 +112,19 @@
     padding: 0px 5px;
 }
 
+button.previewNewMessagge {
+    display: block;
+    align-self: stretch;
+    max-width: 100%;
+    text-align: left;
+    font: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+}
+
 .previewNewMessagge.no-background{
     background-color: transparent;
     box-shadow: unset;

package/src/app/component/last-message/last-message.component.spec.ts

@@ -1,41 +1,222 @@
-import { MarkedPipe } from './../../pipe/marked.pipe';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ImageRepoService } from '../../../chat21-core/providers/abstract/image-repo.service';
+import { Injectable, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NGXLogger } from 'ngx-logger';
+import { ConversationModel } from 'src/chat21-core/models/conversation';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { EventsService } from '../../providers/events.service';
+import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
+import { MarkedPipe } from '../../pipe/marked.pipe';
 import { Globals } from '../../utils/globals';
-
+import { MIN_WIDTH_IMAGES } from '../../utils/constants';
 import { LastMessageComponent } from './last-message.component';
-import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
+
+@Injectable()
+class ImageRepoStub extends ImageRepoService {
+  getImagePhotoUrl(): string {
+    return '';
+  }
+  checkImageExists(_uid: string, callback: (exist: boolean) => void): void {
+    callback(false);
+  }
+}
 
 describe('LastMessageComponent', () => {
-  let component: LastMessageComponent;
   let fixture: ComponentFixture<LastMessageComponent>;
+  let component: LastMessageComponent;
+  let globals: Globals;
+  let events: EventsService;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+
+  function makeConversation(overrides: Partial<ConversationModel> = {}): ConversationModel {
+    return {
+      uid: 'conv-1',
+      attributes: {},
+      channel_type: 'direct',
+      conversation_with_fullname: 'Agent',
+      conversation_with: 'agent-1',
+      recipient: 'user-1',
+      recipient_fullname: 'User',
+      image: '',
+      is_new: true,
+      last_message_text: 'Messaggio mock in anteprima',
+      text: '',
+      sender: 'agent-1',
+      senderAuthInfo: null,
+      sender_fullname: 'Agent Name',
+      status: '200',
+      timestamp: '1',
+      selected: false,
+      color: '',
+      avatar: '',
+      archived: false,
+      type: 'text',
+      sound: true,
+      ...overrides,
+    } as ConversationModel;
+  }
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [ 
-        LastMessageComponent,
-        MarkedPipe,
-        HtmlEntitiesEncodePipe
-      ],
-      imports: [  
-      ],
-      providers: [
-        Globals,
-        ImageRepoService,
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-    .compileComponents();
+      declarations: [LastMessageComponent, MarkedPipe, HtmlEntitiesEncodePipe],
+      providers: [Globals, EventsService, { provide: ImageRepoService, useClass: ImageRepoStub }],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LastMessageComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    globals = TestBed.inject(Globals);
+    events = TestBed.inject(EventsService);
+    globals.initDefafultParameters();
+    globals.senderId = 'user-1';
+    globals.isOpen = false;
+    globals.isOpenNewMessage = true;
+    spyOn(globals, 'setWidgetPreviewContainerSize').and.stub();
+    component.baseLocation = 'https://widget.test/';
+    component.stylesMap = new Map([['bubbleReceivedTextColor', '#111']]);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('con widget chiuso (isOpen=false) e anteprima attiva: mostra il bubble con il testo del messaggio mockato', fakeAsync(() => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.ngOnChanges({
+      conversation: new SimpleChange(undefined, conv, true),
+    });
+    fixture.detectChanges();
+
+    const preview = fixture.debugElement.query(By.css('#messagePreview'));
+    expect(preview).toBeTruthy();
+    expect(component.messages.length).toBe(1);
+    expect(component.messages[0].text).toContain('Messaggio mock in anteprima');
+    expect(globals.isOpen).toBe(false);
+    flush();
+  }));
+
+  it('closeMessagePreview azzera conversazione, isOpenNewMessage e emette onCloseMessagePreview', () => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    fixture.detectChanges();
+
+    spyOn(component.onCloseMessagePreview, 'emit');
+    component.closeMessagePreview();
+    expect(component.conversation).toBeNull();
+    expect(globals.isOpenNewMessage).toBe(false);
+    expect(component.onCloseMessagePreview.emit).toHaveBeenCalled();
+  });
+
+  it('openConversationByID emette onSelectedConversation e azzera isOpenNewMessage', () => {
+    const conv = makeConversation();
+    spyOn(component.onSelectedConversation, 'emit');
+    component.openConversationByID(conv);
+    expect(component.onSelectedConversation.emit).toHaveBeenCalledWith(conv as any);
+    expect(globals.isOpenNewMessage).toBe(false);
+    expect(component.conversation).toBeNull();
+  });
+
+  it('onAttachmentButtonClicked apre la conversazione e pubblica lastMessage:attachmentButtonClicked', fakeAsync(() => {
+    spyOn(events, 'publish');
+    const conv = makeConversation({
+      attributes: { attachment: { a: 1 } },
+      last_message_text: 'file',
+    });
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    fixture.detectChanges();
+
+    const payload = { kind: 'test' };
+    component.onAttachmentButtonClicked(payload);
+    tick(600);
+    expect(events.publish).toHaveBeenCalledWith('lastMessage:attachmentButtonClicked', payload);
+  }));
+
+  it('conversation con attributes.commands usa addCommandMessage', fakeAsync(() => {
+    const conv = makeConversation({
+      attributes: {
+        commands: [
+          {
+            type: 'message',
+            message: { text: ' cmd-a ', type: 'text', metadata: {} },
+          },
+          { type: 'wait', time: 5 },
+          {
+            type: 'message',
+            message: { text: ' cmd-b ', type: 'text', metadata: {} },
+          },
+        ],
+      },
+      last_message_text: 'ignored',
+    });
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    tick(0);
+    expect(component.messages.length).toBe(1);
+    tick(5);
+    expect(component.messages.length).toBe(2);
+    expect(component.messages[0].text).toContain('cmd-a');
+    expect(component.messages[1].text).toContain('cmd-b');
+  }));
+
+  it('getMetadataSize scala larghezza oltre il massimo', () => {
+    const meta = { width: 400, height: 100 };
+    const out = component.getMetadataSize(meta);
+    expect(out.width).toBe(230);
+    expect(out.height).toBeLessThan(100);
+  });
+
+  it('getMetadataSize alza immagini molto strette al minimo', () => {
+    const meta = { width: 40, height: 80 };
+    const out = component.getMetadataSize(meta);
+    expect(out.width).toBe(MIN_WIDTH_IMAGES);
+  });
+
+  it('getMetadataSize scala altezza oltre il massimo verticale', () => {
+    const meta = { width: 100, height: 400 };
+    const out = component.getMetadataSize(meta);
+    expect(out.height).toBe(150);
+  });
+
+  it('isSameSender delega a utils-message', () => {
+    component.messages = [{ sender: 'a' } as any, { sender: 'a' } as any];
+    expect(component.isSameSender('a', 1)).toBe(true);
+  });
+
+  it('onElementRenderedFN con messaggi renderizzati agenda setWidgetPreviewContainerSize', fakeAsync(() => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.ngOnChanges({ conversation: new SimpleChange(undefined, conv, true) });
+    fixture.detectChanges();
+    component.onElementRenderedFN({});
+    tick(100);
+    flush();
+    expect(globals.setWidgetPreviewContainerSize).toHaveBeenCalled();
+  }));
+
+  it('ngOnDestroy pulisce stato', () => {
+    const conv = makeConversation();
+    component.conversation = conv;
+    component.messages = [{} as any];
+    globals.isOpenNewMessage = true;
+    component.ngOnDestroy();
+    expect(component.conversation).toBeNull();
+    expect(globals.isOpenNewMessage).toBe(false);
+    expect(component.messages.length).toBe(0);
+  });
+
+  it('unsubscribe svuota subscriptions', () => {
+    const sub = jasmine.createSpyObj('Subscription', ['unsubscribe']);
+    component.subscriptions = [sub];
+    component.unsubscribe();
+    expect(sub.unsubscribe).toHaveBeenCalled();
+    expect(component.subscriptions.length).toBe(0);
+  });
 });

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

@@ -1,20 +1,15 @@
-<!-- tabindex="000"-->
-
-<button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center" 
-    *ngIf="g.isOpen == false" 
+<button aflauncherbutton #aflauncherbutton type="button" id="c21-launcher-button" class="c21-button-clean scale-in-center"
+    *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()"
-    tabindex="1000" 
-    aria-label="    apri chat"
-    >
-
-    <!-- <div *ngIf="g.conversationsBadge>0" class="c21-divBudge">{{g.conversationsBadge}}</div> -->
+    [attr.aria-label]="g.BUTTON_OPEN_CHAT || 'Open chat'"
+    [attr.aria-expanded]="g.isOpen ? 'true' : 'false'">
 
     <!-- OPEN ICON -->
     <div *ngIf="!g.isOpen" class="launcher-button rotate-center" [@enterBubbleAnimation]>
-        <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto', 'border-radius': g.baloonShape}">
-        <svg role="img" [ngStyle]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" alt="" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto', 'border-radius': g.baloonShape}">
+        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M33.57,31A4.58,4.58,0,0,0,29,35.57V58.3a1.94,1.94,0,0,0,3.32,1.38l3-3a.29.29,0,0,1,.21-.09H56.43A4.58,4.58,0,0,0,61,52V35.57A4.58,4.58,0,0,0,56.43,31Z" />
@@ -28,11 +23,11 @@
 
     <!-- CLOSE ICON -->
     <div *ngIf="g.isOpen" class="launcher-button rotate-center" [@enterCloseAnimation]>
-        <svg role="img" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path class="cls-1" d="M54.92,37.08l-2-2L45,43l-7.92-7.92-2,2L43,45l-7.92,7.92,2,2L45,47l7.92,7.92,2-2L47,45Z" />
         </svg>
     </div>
 
-</button>
+</button>

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

@@ -1,28 +1,124 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Injectable, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { AppStorageService } from '../../../chat21-core/providers/abstract/app-storage.service';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 import { Globals } from '../../utils/globals';
-
 import { LauncherButtonComponent } from './launcher-button.component';
 
+@Injectable()
+class AppStorageStub extends AppStorageService {
+  initialize(): void {}
+  getItem(): any {
+    return null;
+  }
+  setItem(): void {}
+  getItemWithoutProjectID(): any {
+    return null;
+  }
+  setItemWithoutProjectID(): void {}
+  removeItem(): void {}
+  clear(): void {}
+}
+
 describe('LauncherButtonComponent', () => {
-  let component: LauncherButtonComponent;
   let fixture: ComponentFixture<LauncherButtonComponent>;
+  let component: LauncherButtonComponent;
+  let globals: Globals;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ LauncherButtonComponent ],
-      providers: [ Globals, AppStorageService]
-    })
-    .compileComponents();
+      declarations: [LauncherButtonComponent],
+      imports: [NoopAnimationsModule],
+      providers: [Globals, { provide: AppStorageService, useClass: AppStorageStub }],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LauncherButtonComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    globals = TestBed.inject(Globals);
+    globals.initDefafultParameters();
+    globals.isOpen = false;
+    globals.align = 'right';
+    globals.marginX = '20px';
+    globals.marginY = '24px';
+    globals.themeColor = '#2a6ac1';
+    globals.themeForegroundColor = '#ffffff';
+    globals.launcherWidth = '60px';
+    globals.launcherHeight = '60px';
+    globals.baloonShape = '50%';
+    globals.baloonImage = '';
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('mostra il pulsante quando il widget è chiuso (isOpen=false)', () => {
+    fixture.detectChanges();
+    const btn = fixture.debugElement.query(By.css('#c21-launcher-button'));
+    expect(btn).toBeTruthy();
+  });
+
+  it('non mostra il launcher quando il widget è aperto', () => {
+    globals.isOpen = true;
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('#c21-launcher-button'))).toBeNull();
+  });
+
+  it('applica border-radius da baloonShape e dimensioni da launcherWidth/Height', () => {
+    globals.baloonShape = '12px 4px 18px 8px';
+    globals.launcherWidth = '72px';
+    globals.launcherHeight = '80px';
+    fixture.detectChanges();
+    const btn = fixture.debugElement.query(By.css('#c21-launcher-button')).nativeElement as HTMLElement;
+    expect(btn.style.borderRadius).toBe('12px 4px 18px 8px');
+    expect(btn.style.width).toBe('72px');
+    expect(btn.style.height).toBe('80px');
+  });
+
+  it('con baloonImage: sfondo pulsante null e immagine con stesso border-radius', () => {
+    globals.baloonImage = 'https://cdn.example/launcher.svg';
+    globals.baloonShape = '8px';
+    fixture.detectChanges();
+    const btn = fixture.debugElement.query(By.css('#c21-launcher-button')).nativeElement as HTMLElement;
+    expect(btn.style.backgroundColor === '' || btn.style.backgroundColor === 'rgba(0, 0, 0, 0)').toBe(true);
+    const img = fixture.debugElement.query(By.css('img')).nativeElement as HTMLImageElement;
+    expect(img.src).toContain('launcher.svg');
+    expect(img.style.borderRadius).toBe('8px');
+  });
+
+  it('senza baloonImage: usa themeColor come background e classe allineamento sinistro', () => {
+    globals.baloonImage = '';
+    globals.align = 'left';
+    globals.themeColor = '#ff0000';
+    fixture.detectChanges();
+    const btn = fixture.debugElement.query(By.css('#c21-launcher-button')).nativeElement as HTMLElement;
+    expect(btn.style.backgroundColor).not.toBe('');
+    expect(btn.classList.contains('c21-align-left')).toBe(true);
+  });
+
+  it('ngAfterViewInit imposta box-shadow quando widget chiuso', fakeAsync(() => {
+    globals.isOpen = false;
+    fixture.detectChanges();
+    tick(0);
+    const btn = fixture.debugElement.query(By.css('#c21-launcher-button'))?.nativeElement as HTMLElement;
+    expect(btn).toBeTruthy();
+    const shadow = btn.style.boxShadow.replace(/\s/g, '');
+    expect(shadow).toContain('0px4px20px');
+    expect(shadow).toContain(convertColorToRGBA(globals.themeColor, 50).replace(/\s/g, ''));
+  }));
+
+  it('openCloseWidget emette lo stato corrente di isOpen', () => {
+    globals.isOpen = false;
+    spyOn(component.onButtonClicked, 'emit');
+    component.openCloseWidget();
+    expect(component.onButtonClicked.emit).toHaveBeenCalledWith(false);
+    globals.isOpen = true;
+    component.openCloseWidget();
+    expect(component.onButtonClicked.emit).toHaveBeenCalledWith(true);
+  });
 });

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

@@ -1,5 +1,6 @@
-<div id='c21-app-list-all-conversations'>
-<!-- tabindex="1300"-->
+<div id='c21-app-list-all-conversations'
+    role="region"
+    [attr.aria-label]="g?.project?.widgetTitle || 'Conversations history'">
 
   <!-- HEADER -->
   <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
@@ -7,12 +8,11 @@
       <!-- CONTENT HEADER -->
       <div class="c21-header-content">
         <!-- ICON CLOSE CHAT -->
-        <div class="c21-header-button c21-right c21-close">
-          <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg"
+        <div class="c21-header-button c21-right c21-close" [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON" role="img">
+          <svg aria-hidden="true" focusable="false" [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="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">{{g.BUTTON_CLOSE_TO_ICON}}</title>
           </svg>
         </div>
 
@@ -54,26 +54,21 @@
                     </div> -->
 
         <!-- ICON BACK -->
-        <button tabindex="1310" aria-label="indietro" class="c21-header-button c21-left c21-button-clean" (click)="returnClosePage()">
-          <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg"
+        <button type="button"
+          [attr.aria-label]="g.PREV_CONVERSATIONS"
+          class="c21-header-button c21-left c21-button-clean"
+          (click)="returnClosePage()">
+          <svg aria-hidden="true" focusable="false" [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 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">{{g.PREV_CONVERSATIONS}}</title>
           </svg>
         </button>
 
         <!-- TITLE HEADER -->
         <div class="c21-title" [ngStyle]="{'color': g.themeForegroundColor}">
-          <!-- <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">{{g.project.widgetTitle}}</div>
-          <!-- <span id="agent-available-status">{{areAgentsAvailableText}}</span> -->
+          <h2 class="titleText">{{g.project.widgetTitle}}</h2>
         </div>
-        <!-- <p class="c21-header-writing">{{writingMessage}}</p> -->
 
       </div>
 
@@ -82,7 +77,7 @@
   </div>
 
   <!-- CONTENT -->
-  <div class="c21-body" tabindex="1311" onFocus="document.querySelector('[start-focus]').focus()">
+  <div class="c21-body">
 
     <chat-list-conversations
       [listConversations]="allConversations"

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

@@ -42,6 +42,8 @@
             font-size: 1em;
             line-height: 40px;
             text-align: left;
+            margin: 0;
+            font-weight: inherit;
         }
         .avatar-project {
             position: relative;