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

package/src/app/component/message/html/html.component.spec.ts

@@ -1,6 +1,7 @@
-import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
+import { SimpleChange } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
 import { HtmlComponent } from './html.component';
 
 describe('HtmlComponent', () => {
@@ -9,12 +10,8 @@ describe('HtmlComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
-        HtmlComponent,
-        SafeHtmlPipe
-       ]
-    })
-    .compileComponents();
+      declarations: [HtmlComponent, SafeHtmlPipe],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -26,4 +23,24 @@ describe('HtmlComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnChanges should set host CSS variables from inputs', () => {
+    component.fontSize = '15px';
+    component.themeColor = '#abc';
+    component.foregroundColor = '#def';
+    component.ngOnChanges({
+      fontSize: new SimpleChange(null, '15px', true),
+    });
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.style.getPropertyValue('--buttonFontSize').trim()).toBe('15px');
+    expect(host.style.getPropertyValue('--themeColor').trim()).toBe('#abc');
+    expect(host.style.getPropertyValue('--foregroundColor').trim()).toBe('#def');
+  });
+
+  it('should render htmlText as plain text in pre (XSS-safe)', () => {
+    component.htmlText = '<script>bad()</script>';
+    fixture.detectChanges();
+    const pre = fixture.nativeElement.querySelector('pre');
+    expect(pre?.textContent).toContain('<script>');
+  });
 });

package/src/app/component/message/image/image.component.html

@@ -1,12 +1,14 @@
-<!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
 <div class="c21-img-container">
-  <img 
-    class="message-contentX message-content-imageX" 
-    [alt]="metadata?.name"
-    [ngClass]="{'isLoadingImage': loading}"
-    [ngStyle] = "{ 'width': width + 'px', 'height': height+'px' }"
-    [src]="metadata.src" 
-    (load)="onLoaded($event)"
-    (click)="onClickImage()"/>
-    <!-- downloadImage(metadata.src, metadata.name);  -->
+  <button type="button"
+    class="c21-image-trigger c21-button-clean"
+    [attr.aria-label]="metadata?.name ? ('Open image: ' + metadata.name) : 'Open image preview'"
+    (click)="onClickImage()">
+    <img
+      class="message-contentX message-content-imageX"
+      [alt]="metadata?.name || ''"
+      [ngClass]="{'isLoadingImage': loading}"
+      [ngStyle]="{ 'width': width + 'px', 'height': height+'px' }"
+      [src]="metadata.src"
+      (load)="onLoaded($event)"/>
+  </button>
 </div>

package/src/app/component/message/image/image.component.scss

@@ -21,6 +21,22 @@ img {
     transform: scale(1.05);
 }
 
+.c21-image-trigger {
+    display: block;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--borderRadius);
+    width: 100%;
+    cursor: pointer;
+    line-height: 0;
+}
+.c21-image-trigger:focus-visible {
+    outline: 2px solid var(--c21-focus-ring, #1a73e8);
+    outline-offset: 2px;
+}
+
   
 .c21-img-container {
     text-align: center;

package/src/app/component/message/image/image.component.spec.ts

@@ -1,4 +1,5 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import * as FileSaver from 'file-saver';
 
 import { ImageComponent } from './image.component';
 
@@ -6,30 +7,115 @@ describe('ImageComponent', () => {
   let component: ImageComponent;
   let fixture: ComponentFixture<ImageComponent>;
 
-  beforeEach(async(() => {
+  const metadata = {
+    height: 100,
+    name: 'logo_fb.png',
+    src: 'https://cdn.example.com/logo.png',
+    type: 'image/png',
+    uid: 'u1',
+    width: 100,
+  };
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ImageComponent ]
-    })
-    .compileComponents();
+      declarations: [ImageComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ImageComponent);
     component = fixture.componentInstance;
-    component.metadata = {
-      height: 650,
-      name: "logo_fb.png",
-      src: "https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2F42083ab3-3aa6-4507-831c-41c84b09dd83%2F0e8e8562-360e-4407-aa20-a0ccbe99b62d%2Flogo_fb.png?alt=media&token=8125435a-76ac-42f0-9017-cf3d8fb4e8a1",
-      type: "image/png",
-      uid: "ksg7sxnt",
-      width: 650
-    }
-    component.width = 650
-    component.height = 650
+    component.metadata = { ...metadata };
+    component.width = 80;
+    component.height = 80;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit should run', () => {
+    expect(() => component.ngOnInit()).not.toThrow();
+  });
+
+  it('onLoaded should clear loading and emit', () => {
+    spyOn(component.onElementRendered, 'emit');
+    component.loading = true;
+    component.onLoaded({} as any);
+    expect(component.loading).toBe(false);
+    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'image', status: true });
+  });
+
+  it('downloadImage should call saveAs with explicit fileName', () => {
+    spyOn(FileSaver, 'saveAs');
+    component.downloadImage('https://cdn/x/a.png', 'out.png');
+    expect(FileSaver.saveAs).toHaveBeenCalledWith('https://cdn/x/a.png', 'out.png');
+  });
+
+  it('downloadImage should derive fileName from URL when omitted', () => {
+    spyOn(FileSaver, 'saveAs');
+    const url = 'https://cdn/x/my%20file.png';
+    component.downloadImage(url, null as any);
+    expect(FileSaver.saveAs).toHaveBeenCalled();
+    const name = (FileSaver.saveAs as jasmine.Spy).calls.mostRecent().args[1] as string;
+    expect(name).toContain('my');
+  });
+
+  it('onClickImage onload should register keydown on iframe document and close on Escape', () => {
+    const origCreate = document.createElement.bind(document);
+    const origGetById = document.getElementById.bind(document);
+    const fakeIframe: any = {
+      setAttribute: jasmine.createSpy('setAttribute'),
+      style: {},
+      srcdoc: '',
+      onload: null as null | ((ev: Event) => void),
+    };
+    spyOn(document, 'createElement').and.callFake((tag: string) => (tag === 'iframe' ? fakeIframe : origCreate(tag)));
+    spyOn(document, 'getElementById').and.callFake((id: string) =>
+      id === 'tiledesk-image-preview' ? fakeIframe : origGetById(id),
+    );
+    spyOn(document.body, 'appendChild').and.callFake((node: any) => {
+      node.parentNode = document.body;
+      return node;
+    });
+    spyOn(document.body, 'removeChild').and.stub();
+    component.onClickImage();
+    const docMock: any = {
+      getElementById: jasmine.createSpy('getElementById').and.returnValue(null),
+      addEventListener: jasmine.createSpy('addEventListener'),
+    };
+    fakeIframe.contentWindow = { document: docMock };
+    expect(fakeIframe.onload).toBeTruthy();
+    fakeIframe.onload({} as any);
+    expect(docMock.addEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function));
+    const keydownHandler = docMock.addEventListener.calls.mostRecent().args[1] as (e: KeyboardEvent) => void;
+    keydownHandler({ key: 'Escape', keyCode: 27, preventDefault: jasmine.createSpy() } as any);
+    expect(document.body.removeChild).toHaveBeenCalledWith(fakeIframe);
+  });
+
+  it('onClickImage should append iframe with preview markup', () => {
+    const iframes: HTMLIFrameElement[] = [];
+    const origCreate = document.createElement.bind(document);
+    spyOn(document, 'createElement').and.callFake((tag: string) => {
+      const el = origCreate(tag) as HTMLElement;
+      if (tag === 'iframe') {
+        iframes.push(el as HTMLIFrameElement);
+      }
+      return el;
+    });
+    spyOn(document.body, 'appendChild').and.callThrough();
+    component.onClickImage();
+    expect(document.body.appendChild).toHaveBeenCalled();
+    expect(iframes.length).toBe(1);
+    expect(iframes[0].id).toBe('tiledesk-image-preview');
+    expect(iframes[0].srcdoc).toContain('tiledesk-popup');
+    expect(iframes[0].srcdoc).toContain(metadata.src);
+    document.body.removeChild(iframes[0]);
+  });
+
+  it('img should expose alt from metadata name', () => {
+    const img = (fixture.nativeElement as HTMLElement).querySelector('img');
+    expect(img?.getAttribute('alt')).toBe('logo_fb.png');
+  });
 });

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

@@ -42,60 +42,99 @@ export class ImageComponent implements OnInit {
     // this.onClickImage()
   }
 
+  /**
+   * Opens the image in an accessible lightbox.
+   *
+   * Accessibility features (WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2):
+   * - Lightbox container is rendered as role="dialog" aria-modal="true" with aria-label.
+   * - A real <button> with aria-label closes the dialog.
+   * - The dialog can be dismissed via Escape, click on the backdrop, or the close button.
+   * - The previously focused element is restored when the lightbox closes.
+   * - Focus is moved to the close button on open to keep keyboard users inside the dialog.
+   */
   onClickImage(){
-    const that = this;
-    var ifrm = document.createElement("iframe");
-    ifrm.setAttribute("frameborder", "0");
-    // ifrm.setAttribute("border", "0");
-    ifrm.setAttribute('id','tiledesk-image-preview');
-    ifrm.setAttribute('tiledesk_context','parent');
-    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003;')
-    
-    var iframeContent = '<head>'
-    iframeContent += '<style> .tiledesk-popup {position: absolute; inset: 1px; outline-offset: -5px; background-color: rgba(0, 0, 0, 0.35); border-radius:16px; will-change: opacity;}'
-    iframeContent +=    '.tiledesk-popup-content { position: fixed; inset: 0px; width: 100%;  height: 100%; display: flex;  justify-content: center; align-items: center; outline: 0px;}'
-    iframeContent +=    '.tiledesk-popup-button { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; position: absolute; top: 0px; right: 0px; background-color: transparent; border: none; cursor: pointer; margin: 9px; padding: 0px; }'
-    iframeContent +=    '.tiledesk-popup-image { max-height: 80vh; max-width: 80vw; }'
-    iframeContent += '</style>'
-    iframeContent += '</head>';
-    iframeContent += '<body>'
-    iframeContent +=  '<div class="frame-root" id="frame-root">'
-    iframeContent +=    '<div class="frame-content">'
-    iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
-    iframeContent +=      '<div role="button" tabindex="-1" class="tiledesk-popup-content">'
-    // iframeContent +=         '<button id="button" type="button" data-testid="closeButton" class="tiledesk-popup-button">'
-    // iframeContent +=           '<svg id="ic_close" fill="#000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><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 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
-    // iframeContent +=         '</button>'
-    iframeContent +=         '<a href="'+this.metadata.src+'" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
-    iframeContent +=           '<img src="'+this.metadata.src+'" class="tiledesk-popup-image" id="image-popup">'
-    iframeContent +=         '</a>'
-    iframeContent +=      '</div>'
-    iframeContent +=   '</div>'
-    iframeContent +='</body>'
-
-    // ifrm.src = 'data:text/html;charset=utf-8,' + encodeURI(iframeContent);
-    ifrm.srcdoc = iframeContent
-    window.document.body.appendChild(ifrm)
-
-
-    ifrm.onload = function(ev) {
-      var iframe = window.document.getElementById('tiledesk-image-preview')
-      // var button = ifrm.contentWindow.document.getElementById("button");
-      // button.addEventListener("click", function(event){
-      //   window.document.body.removeChild(iframe)
-      // });
-      var div = ifrm.contentWindow.document.getElementById('frame-root')
-      div.addEventListener("click", function(event){
-        window.document.body.removeChild(iframe)
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const altText = this.metadata?.name || 'Image preview';
+    const closeLabel = this.tooltipMessage || 'Close';
+
+    const ifrm = document.createElement('iframe');
+    ifrm.setAttribute('frameborder', '0');
+    ifrm.setAttribute('id', 'tiledesk-image-preview');
+    ifrm.setAttribute('tiledesk_context', 'parent');
+    ifrm.setAttribute('title', altText);
+    ifrm.setAttribute('aria-label', altText);
+    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003; border: 0;');
+
+    let iframeContent = '<!doctype html><html lang="' + (document.documentElement.lang || 'en') + '"><head>';
+    iframeContent += '<meta charset="utf-8"/>';
+    iframeContent += '<title>' + altText.replace(/[<>]/g, '') + '</title>';
+    iframeContent += '<style>';
+    iframeContent += 'html,body{margin:0;padding:0;height:100%;}';
+    iframeContent += '.tiledesk-popup-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,0.6);}';
+    iframeContent += '.tiledesk-popup-content{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;padding:32px;}';
+    iframeContent += '.tiledesk-popup-image{max-height:85vh;max-width:90vw;border-radius:8px;}';
+    iframeContent += '.tiledesk-popup-button{position:fixed;top:16px;right:16px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.1);border-radius:50%;cursor:pointer;padding:0;}';
+    iframeContent += '.tiledesk-popup-button:focus-visible{outline:3px solid #1a73e8;outline-offset:2px;}';
+    iframeContent += '.tiledesk-popup-button svg{width:20px;height:20px;fill:#000;}';
+    iframeContent += '@media (prefers-reduced-motion: reduce){.tiledesk-popup-backdrop{transition:none;}}';
+    iframeContent += '</style></head><body>';
+    iframeContent += '<div role="dialog" aria-modal="true" aria-label="' + altText.replace(/"/g, '&quot;') + '" id="frame-root">';
+    iframeContent += '<div class="tiledesk-popup-backdrop" id="popup-backdrop"></div>';
+    iframeContent += '<div class="tiledesk-popup-content">';
+    iframeContent += '<img src="' + this.metadata.src + '" class="tiledesk-popup-image" id="image-popup" alt="' + altText.replace(/"/g, '&quot;') + '">';
+    iframeContent += '</div>';
+    iframeContent += '<button type="button" id="closeButton" class="tiledesk-popup-button" aria-label="' + closeLabel.replace(/"/g, '&quot;') + '">';
+    iframeContent += '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><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 12z"/></svg>';
+    iframeContent += '</button>';
+    iframeContent += '</div>';
+    iframeContent += '</body></html>';
+
+    ifrm.srcdoc = iframeContent;
+    window.document.body.appendChild(ifrm);
+
+    const closeLightbox = () => {
+      const node = window.document.getElementById('tiledesk-image-preview');
+      if (node && node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+      if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+        try { previouslyFocused.focus(); } catch(e) { /* noop */ }
+      }
+    };
+
+    ifrm.onload = function () {
+      const doc = ifrm.contentWindow?.document;
+      if (!doc) { return; }
+
+      const closeBtn = doc.getElementById('closeButton') as HTMLButtonElement | null;
+      const backdrop = doc.getElementById('popup-backdrop');
+      const image = doc.getElementById('image-popup');
+
+      if (closeBtn) {
+        closeBtn.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          closeLightbox();
+        });
+        closeBtn.focus();
+      }
+
+      if (backdrop) {
+        backdrop.addEventListener('click', () => closeLightbox());
+      }
+
+      if (image) {
+        image.addEventListener('click', (e) => e.stopPropagation());
+      }
+
+      // Escape key handler from inside the lightbox iframe
+      doc.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Escape' || event.keyCode === 27) {
+          event.preventDefault();
+          closeLightbox();
+        }
       });
-      // var image = ifrm.contentWindow.document.getElementById('image-popup')
-      // image.addEventListener("click", function(event){
-      //   event.preventDefault();
-      //   event.stopPropagation();
-      //   that.downloadImage(that.metadata.src, that.metadata.name)
-      // });
     };
-    
   }
 
 

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

@@ -1,36 +1,48 @@
-import { CustomLogger } from './../../../../chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from './../../../../chat21-core/providers/logger/loggerInstance';
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MarkedPipe } from '../../../pipe/marked.pipe';
 
-import { InfoMessageComponent } from './info-message.component';
+import { MessageModel } from 'src/chat21-core/models/message';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { NGXLogger } from 'ngx-logger';
+import { TooltipDirective } from '../../../directives/tooltip.directive';
+import { DateAgoPipe } from '../../../pipe/date-ago.pipe';
+import { MarkedPipe } from '../../../pipe/marked.pipe';
+import { InfoMessageComponent } from './info-message.component';
 
 describe('InfoMessageComponent', () => {
   let component: InfoMessageComponent;
   let fixture: ComponentFixture<InfoMessageComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
 
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(customLogger);
     TestBed.configureTestingModule({
-      declarations: [ InfoMessageComponent, MarkedPipe ],
-      providers: [LoggerService, NGXLogger]
-    })
-    .compileComponents();
+      declarations: [InfoMessageComponent, MarkedPipe, DateAgoPipe, TooltipDirective],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InfoMessageComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
+    component.message = { text: 'hello', timestamp: Date.now() } as MessageModel;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit should replace br tags with newlines in message text', () => {
+    const msg = { text: 'a<br/>b<br>c', timestamp: Date.now() } as MessageModel;
+    component.message = { ...msg };
+    component.ngOnInit();
+    expect(component.message.text).toContain('\n');
+    expect(component.message.text).not.toContain('<br');
+  });
+
+  it('ngOnInit should tolerate missing message', () => {
+    component.message = undefined as any;
+    expect(() => component.ngOnInit()).not.toThrow();
+  });
 });

package/src/app/component/message/json-sources/json-sources.component.html

@@ -0,0 +1,38 @@
+<div class="sources-panel" *ngIf="items && items.length > 0">
+
+  <div class="sources-header">
+    <div class="sources-favicons">
+      <img class="header-favicon"
+           *ngFor="let item of headerFavicons; trackBy: trackByLink"
+           [src]="getFavicon(item)"
+           alt=""
+           loading="lazy" />
+    </div>
+    <span class="sources-count">{{ items.length }} {{ items.length === 1 ? 'sito' : 'siti' }}</span>
+  </div>
+
+  <a class="source-row"
+     *ngFor="let item of visibleItems; trackBy: trackByLink"
+     [href]="item.link"
+     target="_blank"
+     rel="noopener noreferrer">
+
+    <div class="source-row__left">
+      <div class="source-row__title">{{ item.title }}</div>
+      <div class="source-row__desc" *ngIf="item.description">{{ item.description }}</div>
+      <div class="source-row__meta">
+        <img class="source-row__favicon" *ngIf="getFavicon(item)" [src]="getFavicon(item)" alt="" loading="lazy" />
+        <span class="source-row__host">{{ getHostname(item) }}</span>
+      </div>
+    </div>
+
+    <div class="source-row__thumb" *ngIf="item.image">
+      <img [src]="item.image" alt="" loading="lazy" (error)="$event.target.closest('.source-row__thumb').remove()" />
+    </div>
+  </a>
+
+  <button class="show-all" *ngIf="canExpand" type="button" (click)="toggleShowAll()">
+    {{ showAll ? 'Mostra meno' : 'Mostra tutto' }}
+  </button>
+</div>
+