@chat21/chat21-web-widget 5.1.34 → 5.2.1

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

@@ -56,7 +56,7 @@
 .sources-panel {
   display: flex;
   flex-direction: column;
-  padding: 18px 12px 10px 12px;
+  padding: 10px 12px 10px 12px;
   background: var(--panel-bck);
   border-radius: 18px;
   font-size: 14px;
@@ -79,15 +79,14 @@
   width: 100%;
   box-sizing: border-box;
 
-  border-bottom: 1px solid var(--row-sep);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--row-sep);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
   &:hover {
     background: rgba(255, 255, 255, 0.55);
-    .source-row__title {
-      text-decoration: underline;
-    }
   }
 
   // & + & {
@@ -105,31 +104,40 @@
   }
 
   .source-row__title {
+    font-size: 14px;
+    color: #0a0a0a;
     font-weight: 500;
-    color: var(--text);
-    font-size: var(--title-font-size);
+    font-family: Arial, sans-serif;
+    white-space: normal;
+    -webkit-font-smoothing: auto;
+    font-style: normal;
+    text-decoration: none;
     line-height: var(--title-line-height);
     margin: 0px;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    white-space: normal;
   }
 
   .source-row__desc {
-    font-size: var(--desc-font-size);
-    line-height: var(--desc-line-height);
+    font-size: 12px;
+    color: #56595e;
+    /* font-weight: bold; */
+    font-family: Arial, sans-serif;
+    white-space: normal;
+    /* -webkit-font-smoothing: auto; */
+    font-style: normal;
+    text-decoration: none;
+    line-height: 1.3;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    color: #56595e;
     margin: 0;
   }
 
@@ -144,11 +152,11 @@
   .source-row__favicon {
     width: 16px;
     height: 16px;
-    border-radius: 50%;
+    // border-radius: 50%;
     flex: 0 0 auto;
-    border: 2px solid #fff;
-    background: rgba(255, 255, 255, 0.7);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+    // border: 2px solid #fff;
+    // background: rgba(255, 255, 255, 0.7);
+    // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
   }
 
   .source-row__host {

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

@@ -10,6 +10,12 @@ export type JsonSourceItem = {
   image?: string;
 };
 
+export type JsonSourcesDisplayFields = {
+  title?: boolean;
+  description?: boolean;
+  image?: boolean;
+};
+
 @Component({
   selector: 'chat-json-sources',
   templateUrl: './json-sources.component.html',
@@ -19,11 +25,30 @@ export class JsonSourcesComponent {
   @Input() items: JsonSourceItem[] = [];
   @Input() themeColor?: string;
   @Input() limit = 3;
+  // Optional: per-field visibility. Missing/undefined fields default to visible
+  // (only an explicit `false` hides the field).
+  @Input() displayFields?: JsonSourcesDisplayFields;
+  // Optional: background color override for the sources panel.
+  @Input() backgroundColor?: string;
 
   @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
 
   showAll = false;
 
+  isFieldVisible(field: keyof JsonSourcesDisplayFields): boolean {
+    return this.displayFields?.[field] !== false;
+  }
+
+  // Title is always rendered: when its content is missing or the field is
+  // hidden via displayFields, we fall back to the item URL so the row is never
+  // left without a label.
+  getTitleText(item: JsonSourceItem): string {
+    const titleVisible = this.isFieldVisible('title');
+    const title = (item?.title || '').trim();
+    if (titleVisible && title) return title;
+    return (item?.link || '').trim();
+  }
+
   trackByLink = (_: number, item: JsonSourceItem) => item?.link || item?.title || _;
 
   ngAfterViewInit() {
@@ -51,6 +76,22 @@ export class JsonSourcesComponent {
     return hostname || '';
   }
 
+  // Route large source images through wsrv.nl which downsamples them server-side
+  // to a thumbnail-sized version. Rendering at ~3x the CSS size keeps the result
+  // sharp on retina displays. Falls back to the original URL on any error.
+  getThumbUrl(item: JsonSourceItem): string {
+    const raw = (item?.image || '').trim();
+    if (!raw) return '';
+    if (!/^https?:\/\//i.test(raw)) return raw;
+    try {
+      const stripped = raw.replace(/^https?:\/\//i, '');
+      const encoded = encodeURIComponent(stripped);
+      return `https://wsrv.nl/?url=${encoded}&w=120&h=120&fit=cover&output=webp&n=-1`;
+    } catch {
+      return raw;
+    }
+  }
+
   private safeHostname(url: string): string {
     try {
       return new URL(url).hostname.replace(/^www\./, '');

package/src/app/component/message/like-unlike/like-unlike.component.html

@@ -1,21 +1,19 @@
 <div class="like-container">
     <div class="menu">
         <!-- LIKE -->
-        <button class="c21-button-clean c21-like" (click)="onClick('like')">
-            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
+        <button type="button" class="c21-button-clean c21-like" (click)="onClick('like')" aria-label="Like message">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
                 <path fill="black" d="M4.5,9h-3C0.7,9,0,9.6,0,10.4v10.4c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5V10.5C6,9.7,5.3,9,4.5,9z"/>
                 <path fill="black" d="M24,10.5c-0.1-1.7-1.6-3-3.3-3h-4.5c0,0,0,0,0,0c0.4-1.2,0.7-2.2,0.7-2.7c0-1.6-1.2-3.2-3.3-3.2  c-2.2,0-2.8,1.5-3.3,2.7C8.8,8,7.5,7.4,7.5,8.6c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2c3.6-2.9,2.7-5.8,4.3-5.8  c0.8,0,1,0.6,1,1c0,0.3-0.4,1.9-1.2,3.4c-0.1,0.2-0.1,0.4-0.1,0.5c0,0.7,0.5,1.1,1.1,1.1h6.5c0.5,0,0.9,0.4,0.9,0.9  c0,0.5-0.4,0.8-0.8,0.9c-0.6,0-1,0.5-1,1.1c0,0.7,0.5,0.7,0.5,1.4c0,1.2-1.6,0.6-1.6,2c0,0.5,0.3,0.6,0.3,1c0,1.1-1.4,0.6-1.4,1.9  c0,0.1,0,0.2,0,0.2c0.1,0.6-0.3,1.1-0.9,1.1l-2.4,0c-1.2,0-2.4-0.4-3.4-1.1l-1.7-1.3c-0.2-0.2-0.4-0.2-0.7-0.2  c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.2,0.7,0.4,0.9l1.7,1.3c1.4,1,3,1.6,4.7,1.6h2.5c1.7,0,3-1.3,3.1-2.9c0,0,0,0,0,0  c0.8-0.6,1.3-1.5,1.3-2.6c0-0.1,0-0.3,0-0.4c0.8-0.6,1.4-1.5,1.4-2.6c0-0.2,0-0.5-0.1-0.7C23.5,12.6,24.1,11.6,24,10.5z"/>
-                <title id="altIconTitle">LIKE</title>
-            </svg>  
+            </svg>
         </button>
         <!-- UNLIKE -->
-        <button class="c21-button-clean" (click)="onClick('like')">
-            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
+        <button type="button" class="c21-button-clean" (click)="onClick('unlike')" aria-label="Unlike message">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
                 <path d="M6,13.5V3c0-0.8-0.7-1.5-1.5-1.5h-3C0.7,1.5,0,2.2,0,3v10.5c0,0.8,0.7,1.5,1.5,1.5h3C5.3,15,6,14.3,6,13.5z"/>
                 <path d="M22.6,10.7c0.1-0.2,0.1-0.5,0.1-0.7c0-1.1-0.5-2-1.4-2.6c0-0.1,0-0.3,0-0.4c0-1-0.5-2-1.4-2.6c-0.1-1.6-1.5-2.9-3.1-2.9  h-2.5c-1.7,0-3.4,0.6-4.7,1.6L8,4.4C7.7,4.6,7.5,4.9,7.5,5.3c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2L11,4.9  c1-0.7,2.2-1.1,3.4-1.1h2.5c0.5,0,0.9,0.4,0.9,0.9c0,0.2-0.1,0.2-0.1,0.4c0,1.3,1.4,0.8,1.4,1.9c0,0.4-0.3,0.5-0.3,1  c0,0.7,0.5,1,0.9,1.1c0.4,0.1,0.7,0.4,0.7,0.9c0,0.6-0.5,0.6-0.5,1.4c0,0.6,0.5,1.1,1,1.1c0.5,0,0.8,0.4,0.8,0.8  c0,0.5-0.4,0.9-0.9,0.9h-6.5c-0.6,0-1.1,0.5-1.1,1.1c0,0.2,0,0.4,0.1,0.5c0.8,1.6,1.2,3.1,1.2,3.4c0,0.4-0.3,1-1,1  c-0.6,0-0.7,0-1.2-1.3c-1.2-2.9-2.9-4.7-3.8-4.7c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.1,0.7,0.4,0.9c3.2,2.6,2,6.2,5.7,6.2  c2.1,0,3.3-1.6,3.3-3.2c0-0.6-0.2-1.7-0.7-2.8h4.7c1.7,0,3.1-1.4,3.1-3.2C24,12.3,23.4,11.3,22.6,10.7z"/>
-                <title id="altIconTitle">UNLIKE</title>
             </svg>
         </button>
     </div>

package/src/app/component/message/like-unlike/like-unlike.component.spec.ts

@@ -1,16 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { NGXLogger } from 'ngx-logger';
 
 import { LikeUnlikeComponent } from './like-unlike.component';
 
 describe('LikeUnlikeComponent', () => {
   let component: LikeUnlikeComponent;
   let fixture: ComponentFixture<LikeUnlikeComponent>;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
 
   beforeEach(async () => {
+    LoggerInstance.setInstance(customLogger);
     await TestBed.configureTestingModule({
-      declarations: [ LikeUnlikeComponent ]
-    })
-    .compileComponents();
+      declarations: [LikeUnlikeComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +28,26 @@ describe('LikeUnlikeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('onClick should log icon id', () => {
+    spyOn((component as any).logger, 'debug');
+    component.onClick('like');
+    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
+  });
+
+  it('like button should have accessible name', () => {
+    const btn = fixture.debugElement.queryAll(By.css('button'))[0];
+    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Like message');
+  });
+
+  it('unlike button should have accessible name', () => {
+    const btn = fixture.debugElement.queryAll(By.css('button'))[1];
+    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Unlike message');
+  });
+
+  it('clicking like should invoke logger', () => {
+    spyOn((component as any).logger, 'debug');
+    fixture.debugElement.queryAll(By.css('button'))[0].triggerEventHandler('click', {});
+    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
+  });
 });

package/src/app/component/message/return-receipt/return-receipt.component.spec.ts

@@ -1,6 +1,10 @@
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MSG_STATUS_SENT } from 'src/chat21-core/utils/constants';
+import {
+  MSG_STATUS_RETURN_RECEIPT,
+  MSG_STATUS_SENT,
+  MSG_STATUS_SENT_SERVER,
+} from 'src/app/utils/constants';
 
 import { ReturnReceiptComponent } from './return-receipt.component';
 
@@ -10,31 +14,48 @@ describe('ReturnReceiptComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ReturnReceiptComponent ]
-    })
-    .compileComponents();
+      declarations: [ReturnReceiptComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ReturnReceiptComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
 
-  it('shold render MSG_STATUS_SENT icon', ()=> {
-    component.status= MSG_STATUS_SENT
+  it('should render schedule icon when status is falsy', () => {
+    component.status = 0 as any;
+    fixture.detectChanges();
+    const icons = fixture.debugElement.queryAll(By.css('.icon'));
+    expect(icons.length).toBe(1);
+  });
+
+  it('should render sent icon for MSG_STATUS_SENT', () => {
+    component.status = MSG_STATUS_SENT;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should render server-sent icon for MSG_STATUS_SENT_SERVER', () => {
+    component.status = MSG_STATUS_SENT_SERVER;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should render return receipt icon for MSG_STATUS_RETURN_RECEIPT', () => {
+    component.status = MSG_STATUS_RETURN_RECEIPT;
     fixture.detectChanges();
-    expect(component.status).toBe(MSG_STATUS_SENT)
-  })
-
-  // it('shold render MSG_STATUS_SENT icon', ()=> {
-  //   component.status= MSG_STATUS_SENT
-  //   fixture.detectChanges();
-  //   let element = fixture.debugElement.query(By.css('icon'))
-  //   expect(element.classes).toBeE('icon')
-  // })
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should expose status constants on component', () => {
+    expect(component.MSG_STATUS_SENT).toBe(MSG_STATUS_SENT);
+    expect(component.MSG_STATUS_SENT_SERVER).toBe(MSG_STATUS_SENT_SERVER);
+    expect(component.MSG_STATUS_RETURN_RECEIPT).toBe(MSG_STATUS_RETURN_RECEIPT);
+  });
 });

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

@@ -1,3 +1,3 @@
-<p  #messageEl class="message_innerhtml marked" 
-    [innerHTML]="printMessage(text, messageEl, this) | marked" 
-    [style.color]="color"></p>
+<div #messageEl class="message_innerhtml marked"
+    [innerHTML]="printMessage(text, messageEl, this) | marked"
+    [style.color]="color"></div>

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

@@ -1,113 +1,107 @@
-// Shadow DOM styles - isolati dal resto dell'applicazione
 :host {
     display: block;
-    // Le variabili CSS custom properties possono attraversare il boundary del Shadow DOM
     font-size: var(--font-size-bubble-message, 14px);
 }
 
 .message_innerhtml {
     margin: 0px;
-    // padding: 0px 14px;
-    &.marked{
+
+    &.marked {
         padding: 12px 16px;
-        margin-block-start: 0em!important;
-        margin-block-end: 0em!important;
+        margin-block-start: 0em !important;
+        margin-block-end: 0em !important;
     }
-    
+
     .text-message {
         padding-top: 14px;
     }
-}
 
-p {
-    font-size: inherit;
-    margin: 0;
-    // padding: 14px;
-    line-height: 1.4em;
-    font-style: normal;
-    letter-spacing: normal;
-    font-stretch: normal;
-    font-variant: normal;
-    font-weight: 300;
-    overflow: hidden;
-}
+    p {
+        font-size: inherit;
+        margin: 0;
+        line-height: 1.4em;
+        font-style: normal;
+        letter-spacing: normal;
+        font-stretch: normal;
+        font-variant: normal;
+        font-weight: 300;
+        overflow: hidden;
+    }
 
-p ::ng-deep a,
-p a {
-    word-break: break-word;
-    color: inherit; // Eredita il colore dal parent
-    text-decoration: underline;
-}
+    a {
+        word-break: break-word;
+        color: inherit;
+        text-decoration: underline;
+    }
 
-p ::ng-deep p,
-p a:hover{
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-}
+    a:hover {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+    }
 
-p ol {
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-    padding-inline-start: 15px;
-    
-    li::before {
-        content: "";
-        font-size: 1.4em;
-        vertical-align: middle;
+    ol {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+        padding-inline-start: 15px;
+
+        li::before {
+            content: "";
+            font-size: 1.4em;
+            vertical-align: middle;
+        }
     }
-}
 
-// Stili aggiuntivi per elementi markdown comuni
-p h1, p h2, p h3, p h4, p h5, p h6 {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-    font-weight: bold;
-    color: inherit; // Eredita il colore dal parent
-}
+    h1, h2, h3, h4, h5, h6 {
+        margin-block-start: 0.5em;
+        margin-block-end: 0.5em;
+        font-weight: bold;
+        color: inherit;
+    }
 
-.message_innerhtml.marked h1 {
-    line-height: normal;
-}
+    &.marked h1 {
+        line-height: normal;
+    }
 
-p ul {
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-    padding-inline-start: 15px;
-}
+    ul {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+        padding-inline-start: 15px;
+    }
 
-p code {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 2px 4px;
-    border-radius: 3px;
-    font-family: monospace;
-}
+    code {
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: 2px 4px;
+        border-radius: 3px;
+        font-family: monospace;
+    }
 
-p pre {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 10px;
-    border-radius: 3px;
-    overflow-x: auto;
-}
+    pre {
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: 10px;
+        border-radius: 3px;
+        overflow-x: auto;
+    }
 
-p blockquote {
-    border-left: 3px solid rgba(0, 0, 0, 0.1);
-    padding-left: 10px;
-    margin-left: 0;
-    font-style: italic;
-}
+    blockquote {
+        border-left: 3px solid rgba(0, 0, 0, 0.1);
+        padding-left: 10px;
+        margin-left: 0;
+        font-style: italic;
+    }
 
-p table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 10px 0;
-}
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 10px 0;
+    }
 
-p table td, p table th {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 8px;
-}
+    table td, table th {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 8px;
+    }
 
-p table th {
-    background-color: rgba(0, 0, 0, 0.05);
-    font-weight: bold;
+    table th {
+        background-color: rgba(0, 0, 0, 0.05);
+        font-weight: bold;
+    }
 }

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

@@ -1,33 +1,126 @@
-import { HtmlEntitiesEncodePipe } from './../../../pipe/html-entities-encode.pipe';
-import { MarkedPipe } from './../../../pipe/marked.pipe';
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
+import { MarkedPipe } from '../../../pipe/marked.pipe';
 import { TextComponent } from './text.component';
 
-describe('TextComponent', () => {
+/**
+ * Il template usa solo `| marked` su ciò che ritorna `printMessage(...)`:
+ * `[innerHTML]="printMessage(text, messageEl, this) | marked"`
+ * I test qui riproducono gli stessi use case (XSS / HTML grezzo / markdown) sulla pipeline reale del componente.
+ */
+describe('TextComponent (render via MarkedPipe)', () => {
   let component: TextComponent;
   let fixture: ComponentFixture<TextComponent>;
+  let markedPipe: MarkedPipe;
+
+  function shadowInnerHtml(): string {
+    const host = fixture.nativeElement as HTMLElement;
+    const root = host.shadowRoot;
+    if (!root) {
+      throw new Error('Expected ShadowDom root');
+    }
+    return (root.querySelector('.message_innerhtml') as HTMLElement).innerHTML;
+  }
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
-        TextComponent,
-        MarkedPipe,
-        HtmlEntitiesEncodePipe
-      ]
-    })
-    .compileComponents();
+      declarations: [TextComponent, MarkedPipe],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextComponent);
     component = fixture.componentInstance;
-    component.text = 'Msg text'
-    component.color= 'black'
+    markedPipe = new MarkedPipe();
+    component.text = 'Msg text';
+    component.color = 'black';
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('printMessage should emit before and after and return text (input grezzo per la pipe)', () => {
+    spyOn(component.onBeforeMessageRender, 'emit');
+    spyOn(component.onAfterMessageRender, 'emit');
+    const out = component.printMessage('Hello', {} as any, component);
+    expect(out).toBe('Hello');
+    expect(component.onBeforeMessageRender.emit).toHaveBeenCalled();
+    expect(component.onAfterMessageRender.emit).toHaveBeenCalled();
+  });
+
+  it('should render message container with color style', () => {
+    const host = fixture.nativeElement as HTMLElement;
+    const el = host.shadowRoot!.querySelector('div.message_innerhtml') as HTMLElement;
+    expect(el).toBeTruthy();
+    expect(el.style.color).toBe('black');
+  });
+
+  describe('markdown (use case contenuto legittimo)', () => {
+    it('should render heading and bold from markdown', () => {
+      component.text = '# Title\n\n**Bold**';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).toMatch(/<h1|<h2/i);
+      expect(html).toMatch(/<strong>|<b>/i);
+    });
+
+    it('should render unordered list from markdown', () => {
+      component.text = '- uno\n- due';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).toMatch(/<ul/i);
+      expect(html).toMatch(/<li/i);
+    });
+
+    it('should render safe https link with rel=noopener (MarkedPipe renderer)', () => {
+      component.text = '[label](https://example.com/path)';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).toContain('https://example.com/path');
+      expect(html).toContain('rel="noopener noreferrer"');
+      expect(html).toContain('target="_blank"');
+    });
+  });
+
+  describe('sicurezza / anti code-injection (stesso use case, solo marked)', () => {
+    it('should not leave raw script tags in DOM innerHTML', () => {
+      component.text = '<script>alert(1)</script>testo';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html.toLowerCase()).not.toContain('<script');
+      expect(html).toContain('&lt;');
+    });
+
+    it('should escape inline HTML img/onerror so it is not a live <img> node', () => {
+      component.text = 'Hi <img src=x onerror="alert(1)">';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html.toLowerCase()).not.toContain('<img');
+      expect(html).toContain('&lt;');
+    });
+
+    it('should not emit javascript: href for markdown link', () => {
+      component.text = '[bad](javascript:void(0))';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).not.toMatch(/href=["']javascript:/i);
+    });
+
+    it('should not emit data: href for markdown link', () => {
+      component.text = '[bad](data:text/html,<script>alert(1)</script>)';
+      fixture.detectChanges();
+      const html = shadowInnerHtml();
+      expect(html).not.toMatch(/href=["']data:/i);
+    });
+
+    it('DOM innerHTML should match MarkedPipe applied to printMessage output (stessa pipeline del template)', () => {
+      component.text = 'Line1\n\n**x**';
+      fixture.detectChanges();
+      const raw = component.printMessage(component.text, {} as any, component);
+      const viaPipe = markedPipe.transform(raw) as string;
+      expect(shadowInnerHtml()).toBe(viaPipe);
+    });
+  });
 });