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

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

@@ -1,34 +1,32 @@
 <div id='c21-app-list-conversations'>
+<!-- tabindex="1100"-->
 
   <div class="c21-header">
     <div *ngIf="checkShowAllConversation()">
         <div class="c21-title">{{g.PREV_CONVERSATIONS}}</div>
 
-        <button *ngIf="g.showAllConversations == true"
-            type="button"
-            class="c21-button c21-button-clean"
-            [attr.aria-label]="g.SHOW_ALL_CONV"
-            (click)="returnOpenAllConversation()">
-          <span style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}} </span>
-          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
-            <path d="M1.9,15.4h16.2v-1.8H1.9V15.4z M1.9,10.9h16.2V9.1H1.9V10.9z M1.9,4.6v1.8h16.2V4.6H1.9z"/>
-          </svg>
-        </button>
+        <div *ngIf="g.showAllConversations == true" class="c21-button" (click)="returnOpenAllConversation()">
+          <div style="display:inline-block; line-height: 40px; margin-right: 10px;" (click)="returnOpenAllConversation()">{{g.SHOW_ALL_CONV}} </div>
+          <button tabindex="1101" aria-label=" tutte le conversazioni" class="c21-button-clean">
+            <!-- <svg xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor }" width="18" height="18" viewBox="0 0 24 24">
+              <path fill="none" d="M0 0h24v24H0V0z" />
+              <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+            </svg> -->
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+              <path d="M1.9,15.4h16.2v-1.8H1.9V15.4z M1.9,10.9h16.2V9.1H1.9V10.9z M1.9,4.6v1.8h16.2V4.6H1.9z"/>
+            </svg>
+          </button>
+        </div>
 
     </div>
     <div *ngIf="!checkShowAllConversation()">
       <div class="c21-title">{{g.NO_CONVERSATION}}</div>
-      <div *ngIf="listConversations && listConversations.length > 0">
-        <button type="button"
-            class="c21-button c21-button-clean"
-            [attr.aria-label]="g.SHOW_ALL_CONV"
-            (click)="returnOpenAllConversation()">
-          <span style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}}</span>
-          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+      <div *ngIf="listConversations && listConversations.length > 0" class="c21-button" (click)="returnOpenAllConversation()">
+          <div style="display:inline-block; line-height: 40px; margin-right: 10px;">{{g.SHOW_ALL_CONV}}</div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
             <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
           </svg>
-        </button>
       </div>
     </div>
   </div>
@@ -65,18 +63,15 @@
           <div *ngIf="isImageLoaded(agent)" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + agent.imageurl + ')'"></div>
         </div>
       </div>
-      <button type="button" aflistconv #aflistconv class="c21-button-primary"
-          [attr.aria-label]="g.LABEL_START_NW_CONV"
-          (click)="openNewConversation()"
-          [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+      <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
         <span class="v-align-center">
-            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
               <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
             </svg>
           </span>
           <span class="v-align-center c21-label-button">
             {{g.LABEL_START_NW_CONV}}
-          </span>
+          </span> 
           <div class="clear"></div>
       </button>
     </div>
@@ -93,15 +88,16 @@
         (onConversationLoaded)="onConversationLoadedFN($event)">
       </chat-list-conversations>
 
-      <div class="c21-new-conversation">
-        <button type="button" aflistconv #aflistconv class="c21-button-primary"
-            [attr.aria-label]="g.LABEL_START_NW_CONV"
-            (click)="openNewConversation()"
-            [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+      <div class="c21-new-conversation" > 
+        <!--  *ngIf="this.g.supportMode" -->
+        <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
           <span class="v-align-center">
-              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+              <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
               </svg>
+              <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"  width="20" height="20" style="enable-background:new 0 0 20 20;" xml:space="preserve" >
+                <path d="M16.3,10.9h-5.4v5.4H9.1v-5.4H3.7V9.1h5.4V3.7h1.8v5.4h5.4V10.9z" [ngStyle]="{'fill': g.themeForegroundColor}"/>
+              </svg> -->
             </span>
             <span class="v-align-center c21-label-button">
               <!-- {{LABEL_START_NW_CONV}} -->

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

@@ -31,9 +31,6 @@
             padding: 0px 5px;
             float: right;
             fill: var(--blue);
-            color: var(--dark-gray);
-            font-weight: 300;
-            align-items: center;
             button {
                 width: 40px;
                 height: 40px;

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

@@ -1,235 +1,59 @@
+import { CustomTranslateService } from './../../../chat21-core/providers/custom-translate.service';
+import { TranslatorService } from './../../providers/translator.service';
+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';
+import { Globals } from './../../utils/globals';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { of, Subscription } from 'rxjs';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
-import { TranslatorService } from 'src/app/providers/translator.service';
-import { ChatManager } from 'src/chat21-core/providers/chat-manager';
-import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import { HomeConversationsComponent } from './home-conversations.component';
+import { ImageRepoService } from '../../../chat21-core/providers/abstract/image-repo.service';
+import { ConversationsHandlerService } from '../../../chat21-core/providers/abstract/conversations-handler.service';
+import { ArchivedConversationsHandlerService } from '../../../chat21-core/providers/abstract/archivedconversations-handler.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { ConversationModel } from 'src/chat21-core/models/conversation';
-import { UserAgent } from 'src/models/userAgent';
-
-import { WaitingService } from 'src/app/providers/waiting.service';
-import { Globals } from '../../utils/globals';
-import { HomeConversationsComponent } from './home-conversations.component';
 
 describe('HomeConversationsComponent', () => {
   let component: HomeConversationsComponent;
   let fixture: ComponentFixture<HomeConversationsComponent>;
-  let globals: Globals;
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-
-  const waitingStub = {
-    getCurrent: jasmine.createSpy('getCurrent').and.returnValue(of([{ waiting_time_avg: 45000 }])),
-  };
-
-  const imageRepoStub = {
-    getImagePhotoUrl: jasmine.createSpy('getImagePhotoUrl').and.returnValue('https://cdn.example/photo.png'),
-    checkImageExists: jasmine.createSpy('checkImageExists'),
-  };
-
-  const translateStub = {
-    translateLanguage: jasmine.createSpy('translateLanguage').and.callFake((keys: string[]) => {
-      const m = new Map<string, string>();
-      keys.forEach((k) => m.set(k, `T:${k}`));
-      return m;
-    }),
-  };
-
+  let ngxlogger: NGXLogger;
+  let customLogger = new CustomLogger(ngxlogger)
+  
   beforeEach(waitForAsync(() => {
-    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [HomeConversationsComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [
+    declarations: [HomeConversationsComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [TranslateModule.forRoot()],
+    providers: [
         Globals,
-        { provide: ImageRepoService, useValue: imageRepoStub },
-        { provide: ChatManager, useValue: {} },
-        { provide: TranslatorService, useValue: { getLanguage: () => 'en' } },
-        { provide: CustomTranslateService, useValue: translateStub },
-        { provide: WaitingService, useValue: waitingStub },
-      ],
-    }).compileComponents();
+        ImageRepoService,
+        ChatManager,
+        ConversationsHandlerService,
+        ArchivedConversationsHandlerService,
+        WaitingService,
+        AppConfigService,
+        TranslatorService,
+        CustomTranslateService,
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
+    .compileComponents();
   }));
 
   beforeEach(() => {
-    globals = TestBed.inject(Globals);
-    globals.initDefafultParameters();
-    globals.projectid = 'proj-1';
-    globals.WAITING_TIME_FOUND = 'Tempo stimato $reply_time';
-    globals.dynamicWaitTimeReply = true;
-    globals.showWaitTime = true;
-    globals.PREV_CONVERSATIONS = 'Le tue conversazioni';
-    globals.NO_CONVERSATION = 'Nessuna';
-    globals.SHOW_ALL_CONV = 'Vedi tutte';
-    globals.LABEL_START_NW_CONV = 'Nuova';
-    globals.themeColor = '#00f';
-    globals.themeForegroundColor = '#fff';
-    globals.showAllConversations = true;
-    globals.showAvailableAgents = false;
-    globals.availableAgents = [{ id: 'a1', firstname: 'Ada', imageurl: '' } as UserAgent];
-
     fixture = TestBed.createComponent(HomeConversationsComponent);
     component = fixture.componentInstance;
-    component.stylesMap = new Map();
-    component.listConversations = [];
-    component.archivedConversations = [];
-    component.hideNewConversationButton = false;
-
+    LoggerInstance.setInstance(customLogger)
+    let logger = LoggerInstance.getInstance()
+    component['logger']= logger
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('initialize and waiting time', () => {
-    it('should load translations and agent image URLs', () => {
-      expect(translateStub.translateLanguage).toHaveBeenCalled();
-      expect(imageRepoStub.getImagePhotoUrl).toHaveBeenCalledWith('a1');
-      expect(component.availableAgents.length).toBe(1);
-    });
-
-    it('should set waitingTime and placeholder when API returns averages', fakeAsync(() => {
-      tick(0);
-      expect(waitingStub.getCurrent).toHaveBeenCalledWith('proj-1');
-      expect(component.waitingTime).toBe(45000);
-      expect(component.humanWaitingTime).toBeTruthy();
-      expect(component.WAITING_TIME_FOUND_WITH_REPLYTIME_PLACEHOLDER).toContain(component.humanWaitingTime);
-    }));
-
-    it('should render root container id', () => {
-      const root = fixture.debugElement.query(By.css('#c21-app-list-conversations'));
-      expect(root).toBeTruthy();
-    });
-  });
-
-  /** Allineato a twp/index + tiledesk_open: lista vuota, CTA primaria, footer tempo attesa */
-  describe('empty state UI (widget integration)', () => {
-    beforeEach(() => {
-      globals.NO_CONVERSATION = 'Nessuna conversazione attiva';
-      globals.LABEL_START_NW_CONV = 'Nuova conversazione';
-      globals.showAvailableAgents = false;
-      globals.availableAgents = [{ id: 'solo', firstname: 'Ada', imageurl: 'https://cdn.example/photo.png' } as UserAgent];
-      component.listConversations = [];
-      component.archivedConversations = [];
-      fixture.detectChanges();
-    });
-
-    it('should show NO_CONVERSATION title in header when both lists are empty', () => {
-      const titleEl = fixture.nativeElement.querySelector('.c21-header .c21-title') as HTMLElement;
-      expect(titleEl.textContent?.trim()).toBe('Nessuna conversazione attiva');
-    });
-
-    it('should render primary new-conversation button with theme label and paper-plane icon', () => {
-      const btn = fixture.nativeElement.querySelector('.c21-new-conversation .c21-button-primary') as HTMLButtonElement;
-      expect(btn).toBeTruthy();
-      expect(btn.getAttribute('aria-label')).toBe('Nuova conversazione');
-      expect(btn.textContent).toContain('Nuova conversazione');
-      expect(btn.querySelector('svg')).toBeTruthy();
-    });
-
-    it('should surface waiting footer copy when showWaitTime and API returned average', fakeAsync(() => {
-      tick(0);
-      fixture.detectChanges();
-      const footer = fixture.nativeElement.querySelector('.c21-footer .c21-waiting-time') as HTMLElement;
-      expect(footer).toBeTruthy();
-      expect(footer.textContent).toContain(component.humanWaitingTime);
-    }));
-  });
-
-  describe('checkShowAllConversation', () => {
-    it('should return true when archived list has items', () => {
-      component.archivedConversations = [{ uid: 'x' } as ConversationModel];
-      expect(component.checkShowAllConversation()).toBe(true);
-    });
-
-    it('should return true when active list has items', () => {
-      component.archivedConversations = [];
-      component.listConversations = [{ uid: 'y' } as ConversationModel];
-      expect(component.checkShowAllConversation()).toBe(true);
-    });
-
-    it('should return false when both lists are empty', () => {
-      component.archivedConversations = [];
-      component.listConversations = [];
-      expect(component.checkShowAllConversation()).toBe(false);
-    });
-  });
-
-  describe('outputs and selection', () => {
-    it('openNewConversation should emit onNewConversation', () => {
-      spyOn(component.onNewConversation, 'emit');
-      component.openNewConversation();
-      expect(component.onNewConversation.emit).toHaveBeenCalled();
-    });
-
-    it('returnOpenAllConversation should emit onOpenAllConvesations', () => {
-      spyOn(component.onOpenAllConvesations, 'emit');
-      component.returnOpenAllConversation();
-      expect(component.onOpenAllConvesations.emit).toHaveBeenCalled();
-    });
-
-    it('onConversationSelectedFN should emit when conversation is defined', () => {
-      spyOn(component.onConversationSelected, 'emit');
-      const c = { uid: 'c1' } as ConversationModel;
-      component.onConversationSelectedFN(c);
-      expect(component.onConversationSelected.emit).toHaveBeenCalledWith(c);
-    });
-
-    it('onConversationSelectedFN should not emit for falsy conversation', () => {
-      spyOn(component.onConversationSelected, 'emit');
-      component.onConversationSelectedFN(null as any);
-      expect(component.onConversationSelected.emit).not.toHaveBeenCalled();
-    });
-
-    it('onImageLoadedFN / onConversationLoadedFN should forward', () => {
-      spyOn(component.onImageLoaded, 'emit');
-      spyOn(component.onConversationLoaded, 'emit');
-      const c = { uid: 'z' } as ConversationModel;
-      component.onImageLoadedFN(c);
-      component.onConversationLoadedFN(c);
-      expect(component.onImageLoaded.emit).toHaveBeenCalledWith(c);
-      expect(component.onConversationLoaded.emit).toHaveBeenCalledWith(c);
-    });
-  });
-
-  describe('agent image map', () => {
-    it('isImageLoaded should be false without url or before load', () => {
-      const agent = { id: 'x2', firstname: 'B', imageurl: '' } as UserAgent;
-      expect(component.isImageLoaded(agent)).toBe(false);
-    });
-
-    it('onImageLoad should mark agent as loaded', () => {
-      const agent = { id: 'x3', imageurl: 'https://x' } as UserAgent;
-      component.onImageLoad(agent);
-      expect(component.isImageLoaded(agent)).toBe(true);
-    });
-
-    it('onImageError should mark agent as not loaded', () => {
-      const agent = { id: 'x4', imageurl: 'https://x' } as UserAgent;
-      component.onImageError(agent);
-      expect(component.imageLoadedMap.get('x4')).toBe(false);
-    });
-  });
-
-  describe('ngOnDestroy and unsubscribe', () => {
-    it('unsubscribe should clear subscription list', () => {
-      const sub = new Subscription();
-      spyOn(sub, 'unsubscribe');
-      component.subscriptions.push(sub);
-      component.unsubscribe();
-      expect(sub.unsubscribe).toHaveBeenCalled();
-      expect(component.subscriptions.length).toBe(0);
-    });
-
-    it('ngOnDestroy should call unsubscribe', () => {
-      spyOn(component, 'unsubscribe');
-      component.ngOnDestroy();
-      expect(component.unsubscribe).toHaveBeenCalled();
-    });
-  });
 });

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

@@ -10,17 +10,14 @@
           <span>View more</span>
         </div> -->
   
-        <button type="button"
-          aria-label="Dismiss"
-          class="buttonClose c21-button-clean"
-          (click)="closeMessagePreview()">
+        <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
           <span>
-            <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);">
+            <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);">
               <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>
-        </button>
+        </div>
   
       </div>
   
@@ -29,11 +26,8 @@
   
     <div class="container">
 
-      <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))"
+      <div class="previewNewMessagge" (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"
@@ -55,9 +49,9 @@
             </chat-avatar-image>
           </div> 
         </div>
-
-      </button>
-
+  
+      </div>
+  
       <div *ngIf="message?.attributes && message?.attributes?.attachment && last" class="conversations-buttons">
         <chat-message-attachment 
           style="height: 100%; display: block;"
@@ -70,6 +64,6 @@
       </div>
      
     </div>
-
+  
   </div>
 </div>

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

@@ -7,9 +7,8 @@
         min-height: 38px;
     }  
 }
-:host .previewNewMessagge ::ng-deep > chat-bubble-message > .bubble-message > div > div > chat-text {
-    p,
-    .message_innerhtml {
+:host .previewNewMessagge ::ng-deep > chat-bubble-message > #bubble-message > div > div > chat-text {
+    p {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -112,19 +111,6 @@
     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;