@chat21/chat21-web-widget 5.1.34-rc1 → 5.1.34

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

@@ -1,222 +1,41 @@
-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 { 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 { Globals } from '../../utils/globals';
-import { MIN_WIDTH_IMAGES } from '../../utils/constants';
-import { LastMessageComponent } from './last-message.component';
 
-@Injectable()
-class ImageRepoStub extends ImageRepoService {
-  getImagePhotoUrl(): string {
-    return '';
-  }
-  checkImageExists(_uid: string, callback: (exist: boolean) => void): void {
-    callback(false);
-  }
-}
+import { LastMessageComponent } from './last-message.component';
+import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
 
 describe('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;
-  }
+  let fixture: ComponentFixture<LastMessageComponent>;
 
-  beforeEach(waitForAsync(() => {
-    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LastMessageComponent, MarkedPipe, HtmlEntitiesEncodePipe],
-      providers: [Globals, EventsService, { provide: ImageRepoService, useClass: ImageRepoStub }],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+      declarations: [ 
+        LastMessageComponent,
+        MarkedPipe,
+        HtmlEntitiesEncodePipe
+      ],
+      imports: [  
+      ],
+      providers: [
+        Globals,
+        ImageRepoService,
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LastMessageComponent);
     component = fixture.componentInstance;
-    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']]);
+    fixture.detectChanges();
   });
 
   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/last-message/last-message.component.ts

@@ -12,7 +12,7 @@ import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isMine, isSameSender, isSender } from 'src/chat21-core/utils/utils-message';
+import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isSameSender } from 'src/chat21-core/utils/utils-message';
 
 
 @Component({
@@ -59,9 +59,6 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnChanges(changes: SimpleChanges) {
     this.logger.debug('[LASTMESSAGE] onChanges', changes)
     if(this.conversation){
-      
-      /** if the message is sent by the logged user, do not add it to the messages array */
-      if(isSender(this.conversation.sender, this.g.senderId)) return;
 
       if(this.conversation.attributes && this.conversation.attributes.commands){
         this.addCommandMessage(this.conversation)

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

@@ -1,15 +1,20 @@
-<button aflauncherbutton #aflauncherbutton type="button" id="c21-launcher-button" class="c21-button-clean scale-in-center"
-    *ngIf="g.isOpen == false"
+<!-- tabindex="000"-->
+
+<button aflauncherbutton #aflauncherbutton 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()"
-    [attr.aria-label]="g.BUTTON_OPEN_CHAT || 'Open chat'"
-    [attr.aria-expanded]="g.isOpen ? 'true' : 'false'">
+    tabindex="1000" 
+    aria-label="    apri chat"
+    >
+
+    <!-- <div *ngIf="g.conversationsBadge>0" class="c21-divBudge">{{g.conversationsBadge}}</div> -->
 
     <!-- OPEN ICON -->
     <div *ngIf="!g.isOpen" class="launcher-button rotate-center" [@enterBubbleAnimation]>
-        <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%"
+        <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%"
             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" />
@@ -23,11 +28,11 @@
 
     <!-- CLOSE ICON -->
     <div *ngIf="g.isOpen" class="launcher-button rotate-center" [@enterCloseAnimation]>
-        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <svg role="img" [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,124 +1,28 @@
-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 { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 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 {}
-}
+import { LauncherButtonComponent } from './launcher-button.component';
 
 describe('LauncherButtonComponent', () => {
-  let fixture: ComponentFixture<LauncherButtonComponent>;
   let component: LauncherButtonComponent;
-  let globals: Globals;
+  let fixture: ComponentFixture<LauncherButtonComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [LauncherButtonComponent],
-      imports: [NoopAnimationsModule],
-      providers: [Globals, { provide: AppStorageService, useClass: AppStorageStub }],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+      declarations: [ LauncherButtonComponent ],
+      providers: [ Globals, AppStorageService]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LauncherButtonComponent);
     component = fixture.componentInstance;
-    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 = '';
+    fixture.detectChanges();
   });
 
   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,6 +1,5 @@
-<div id='c21-app-list-all-conversations'
-    role="region"
-    [attr.aria-label]="g?.project?.widgetTitle || 'Conversations history'">
+<div id='c21-app-list-all-conversations'>
+<!-- tabindex="1300"-->
 
   <!-- HEADER -->
   <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
@@ -8,11 +7,12 @@
       <!-- CONTENT HEADER -->
       <div class="c21-header-content">
         <!-- ICON CLOSE CHAT -->
-        <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"
+        <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"
             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,21 +54,26 @@
                     </div> -->
 
         <!-- ICON BACK -->
-        <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"
+        <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"
             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}">
-          <h2 class="titleText">{{g.project.widgetTitle}}</h2>
+          <!-- <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> -->
         </div>
+        <!-- <p class="c21-header-writing">{{writingMessage}}</p> -->
 
       </div>
 
@@ -77,7 +82,7 @@
   </div>
 
   <!-- CONTENT -->
-  <div class="c21-body">
+  <div class="c21-body" tabindex="1311" onFocus="document.querySelector('[start-focus]').focus()">
 
     <chat-list-conversations
       [listConversations]="allConversations"

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

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

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

@@ -1,16 +1,12 @@
-<div id='c21-app-list-conversations' role="list">
-  <div *ngFor="let conversation of listConversations | slice:0:limit" role="listitem">
-    <button type="button"
-      class="c21-item-conversation"
-      [attr.aria-label]="conversation?.sender_fullname + ': ' + conversation.last_message_text"
-      (click)="openConversationByID(conversation)">
+<div id='c21-app-list-conversations'>
+  <div *ngFor="let conversation of listConversations | slice:0:limit">
+    <button tabindex="1103" class="c21-item-conversation" (click)="openConversationByID(conversation)">
       <div class="c21-body-conv">
         <div class="c21-left-conv">
           <div class="c21-ball" [ngStyle]="{'background': isImageLoaded(conversation) ? 'transparent' : 'linear-gradient(rgb(255,255,255) -125%, ' + conversation.color + ')'}">
-            <span *ngIf="!isImageLoaded(conversation)" class="c21-ball-label" aria-hidden="true">{{conversation?.avatar}}</span>
-            <img *ngIf="conversation?.image"
-                 [src]="conversation.image"
-                 alt=""
+            <span *ngIf="!isImageLoaded(conversation)" class="c21-ball-label">{{conversation?.avatar}}</span>
+            <img *ngIf="conversation?.image" 
+                 [src]="conversation.image" 
                  style="display: none;"
                  (load)="onImageLoad(conversation)"
                  (error)="onImageError(conversation)">
@@ -20,19 +16,21 @@
         <div class="c21-right-conv">
           <div class="c21-last-time">{{conversation?.timestamp | dateAgo}}</div>
           <div class="truncate c21-name">{{conversation?.sender_fullname }}</div>
-
+          
           <!-- --- IMAGE PREVIEW ICON ---- -->
           <div *ngIf="conversation?.type ==='image'" [class.not-read]="conversation?.is_new" class="c21-msg" style="float: left; margin-right: 5px;">
-            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="#000000"
+            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" fill="#000000"
               width="20px" height="20px" viewBox="0 0 24 24">
               <path d="M0 0h24v24H0V0z" fill="none"/>
               <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
             </svg>
           </div>
-
+            <!-- <div [class.not-read]="conversation.is_new" [class.archived]="conversation.archived" class="truncate c21-msg">{{conversation.last_message_text}}</div> -->
+            <!-- <div [class.not-read]="conversation.is_new" class="truncate c21-msg" [innerHTML]="conversation.last_message_text"></div> -->
+          
           <!-- --- ATTACHMENT ICON ---- -->
           <div *ngIf="conversation.type !== 'image' && conversation.type !== 'text'" [class.not-read]="conversation.is_new" class="c21-msg" style="float: left; margin-right: 5px;">
-            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="#000000"
+            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" fill="#000000"
               width="20px" height="20px" viewBox="0 0 24 24" transform="rotate(45)">
               <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
             </svg>
@@ -40,23 +38,25 @@
 
           <!-- --- LAST MESSAGE ---- -->
           <div [class.not-read]="conversation.is_new" [class.archived]="conversation.archived" class="truncate c21-msg">{{conversation.last_message_text}}</div>
+          <!-- <div *ngIf="conversation.type !=='image'" [class.not-read]="conversation.is_new" [class.archived]="conversation.archived" class="truncate c21-msg" [innerHTML]="conversation.last_message_text"></div> -->
         </div>
-
-        <div *ngIf="conversation.is_new" [ngStyle]="{ 'background-color': stylesMap.get('themeColor') }" class="c21-divBudge" aria-hidden="true">{{conversation.badge}}</div>
-        <div class="c21-icon-archived-chat" *ngIf="conversation.archived">
-          <span class="c21-header-button c21-right c21-close" [attr.aria-label]="translationMap.get('CLOSED')" role="img">
-            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="#aaaaaa"
+        
+        <div *ngIf="conversation.is_new" [ngStyle] = "{ 'background-color': stylesMap.get('themeColor') }" class="c21-divBudge">{{conversation.badge}}</div>
+        <div  class="c21-icon-archived-chat" *ngIf="conversation.archived">
+          <!-- ICON ARCHIVED CHAT  -->
+          <button  tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean">
+            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" fill="#aaaaaa"
               width="24px" height="24px" viewBox="0 0 24 24">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+              <title id="altIconTitle">{{ translationMap.get('CLOSED') }}</title>
             </svg>
-          </span>
+          </button>
         </div>
       </div>
       <div class="clear"></div>
     </button>
-
+    
   </div>
 </div>
 
-