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

package/src/app/component/message/audio-sync/audio-sync.component.ts

@@ -51,8 +51,11 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   private destroyed = false;
   private playbackRequested = false;
   private playbackStarted = false;
+  private micInterrupted = false;
   private streamAbort?: AbortController;
   private mediaSourceObjectUrl?: string;
+  private cancelAllSub?: Subscription;
+  private micSpeechSub?: Subscription;
   private stopAllSub?: Subscription;
   private preemptSub?: Subscription;
 
@@ -93,6 +96,28 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       (this.message?.uid && String(this.message.uid).trim()) ||
       `tts-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 
+    // Se l’utente parla al microfono mentre sta ascoltando, interrompi TUTTO (corrente + coda).
+    this.micSpeechSub = this.voiceService.speechStart$.subscribe(() => {
+      if (this.destroyed) {
+        return;
+      }
+      // interrompi solo se questo messaggio era in riproduzione o in attesa
+      if (this.playbackStarted || this.playbackRequested) {
+        this.micInterrupted = true;
+        this.ttsPlayback.cancelAll();
+        this.interruptPlaybackAndRevealText();
+      }
+    });
+
+    // Stop globale (es. mic) notificato dal coordinatore: ogni istanza deve fermarsi e mostrare testo intero.
+    this.cancelAllSub = this.ttsPlayback.cancelAll$.subscribe(() => {
+      if (this.destroyed) {
+        return;
+      }
+      this.micInterrupted = true;
+      this.interruptPlaybackAndRevealText();
+    });
+
     this.onPlaybackEnded = () => {
       this.playbackStarted = false;
       this.cleanupStreaming();
@@ -144,12 +169,19 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.cdr.detectChanges();
 
     setTimeout(() => {
-      if (this.playbackRequested || this.destroyed) {
+      if (this.playbackRequested || this.destroyed || this.micInterrupted) {
+        if (this.micInterrupted) {
+          this.markAllWordsPast();
+          if (this.message) {
+            this.message.isJustRecived = false;
+          }
+          this.cdr.detectChanges();
+        }
         return;
       }
       this.playbackRequested = true;
       this.ttsPlayback.requestStart(this.playbackOwnerId, () => {
-        if (this.destroyed) {
+        if (this.destroyed || this.micInterrupted) {
           this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
           return;
         }
@@ -208,6 +240,8 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.destroyed = true;
     this.playbackStarted = false;
     this.cleanupStreaming();
+    this.cancelAllSub?.unsubscribe();
+    this.micSpeechSub?.unsubscribe();
     this.stopAllSub?.unsubscribe();
     this.stopAllSub = undefined;
     this.preemptSub?.unsubscribe();
@@ -235,6 +269,31 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  private interruptPlaybackAndRevealText(): void {
+    this.playbackStarted = false;
+    this.cleanupStreaming();
+
+    const audio = this.audioRef?.nativeElement;
+    if (audio) {
+      try {
+        audio.pause();
+        audio.currentTime = 0;
+      } catch {
+        /* ignore */
+      }
+    }
+
+    // Rimuove se era in coda (o rilascia se era corrente).
+    this.ttsPlayback.releaseIfCurrent(this.playbackOwnerId);
+
+    // Mostra tutto il testo (niente "future" invisibili).
+    this.markAllWordsPast();
+    if (this.message) {
+      this.message.isJustRecived = false;
+    }
+    this.cdr.detectChanges();
+  }
+
   private startPlayback(audio: HTMLAudioElement): void {
     const messageSrc = (this.message as any)?.metadata?.src as string | undefined;
 
@@ -332,8 +391,10 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
       try {
         const headers: Record<string, string> = {
           'Content-Type': 'application/json',
-          'Authorization': `${jwt}`
         };
+        if (jwt) {
+          headers['Authorization'] = jwt;
+        }
         
         const response = await fetch(endpoint, {
           method: 'POST',
@@ -464,8 +525,21 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   private getJwtToken(): string | null {
-    const token = (this.globals?.tiledeskToken || this.globals?.jwt || '').trim();
-    return token.length > 0 ? token : null;
+    const raw = (this.globals?.tiledeskToken || this.globals?.jwt || '')
+      .trim()
+      .replace(/^(JWT|Bearer)\s+/i, '')
+      .trim();
+    return raw.length > 0 ? `JWT ${raw}` : null;
+  }
+
+  /**
+   * Extracts the Tiledesk requestId from a Chat21 recipient string.
+   * Format: `support-group-<projectId>-<requestId>`
+   */
+  private parseRequestId(recipient: string): string | null {
+    const parts = recipient.split('-');
+    if (parts.length < 4) return null;
+    return parts.slice(3).join('-') || null;
   }
 
   private getVoiceSettingsBody(): unknown {
@@ -495,8 +569,10 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
     try {
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
-        'Authorization': `${jwt}`
       };
+      if (jwt) {
+        headers['Authorization'] = jwt;
+      }
 
       const response = await fetch(endpoint, {
         method: 'POST',
@@ -526,30 +602,25 @@ export class AudioSyncComponent implements AfterViewInit, OnChanges, OnDestroy {
   private fetchFullFileFromEndpoint(audio: HTMLAudioElement, endpoint: string): void {
     const jwt = this.getJwtToken();
     const voiceSettings = this.getVoiceSettingsBody();
-    const requestBody = this.buildTtsRequestBody(voiceSettings, false);
+    const requestBody = this.buildTtsRequestBody(voiceSettings);
     void this.fetchAsBlobAndPlay(audio, endpoint, jwt, requestBody);
   }
 
-  private buildTtsRequestBody(voiceSettings: unknown, streaming = true): unknown {
+  private buildTtsRequestBody(voiceSettings: unknown): unknown {
     const text = this.message?.text ?? '';
-    if (
-      voiceSettings &&
-      typeof voiceSettings === 'object' &&
-      !Array.isArray(voiceSettings)
-    ) {
-      return {
-        outputFormat: BROWSER_TTS_OUTPUT_FORMAT,
-        ...(voiceSettings as Record<string, unknown>),
-        text,
-        streaming,
-      };
+    const projectId = String(this.globals?.projectid ?? '').trim();
+    const requestId = this.parseRequestId(this.globals?.recipientId ?? '');
+    const base: Record<string, unknown> = { outputFormat: BROWSER_TTS_OUTPUT_FORMAT, text };
+    if (projectId) base['projectId'] = projectId;
+    if (requestId) {
+      base['requestId'] = requestId;
     }
-    return {
-      voiceSettings,
-      text,
-      streaming,
-      outputFormat: BROWSER_TTS_OUTPUT_FORMAT,
-    };
+    if (voiceSettings && typeof voiceSettings === 'object' && !Array.isArray(voiceSettings)) {
+      // Spread provider-specific fields (provider, voiceId, model, language, …) at top level.
+      // Keep `text` last so it cannot be overridden by voiceSettings.
+      return { ...base, ...(voiceSettings as Record<string, unknown>), text };
+    }
+    return base;
   }
 
   private markAllWordsPast(): void {

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

@@ -1,4 +1,4 @@
-<div class="bubble-message messages primary-color">
+<div class="bubble-message messages primary-color" *ngIf="hasRenderableContent()">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -28,12 +28,7 @@
         [stylesMap]="stylesMap"
         [translationMap]="translationMap">
       </chat-audio>
-      
-      <!-- Json sources -->
-      <chat-json-sources *ngIf="jsonSources !== null && jsonSources.length > 0"
-        [items]="jsonSources"
-        (onElementRendered)="onElementRenderedFN($event)">
-      </chat-json-sources> 
+
       <!-- TTS player: only when voice proxy is NOT active (avoids double playback)
            and the message was not already played by the proxy (avoids replay on session end) -->
       <chat-audio-sync *ngIf="isAudioTTS(message) && !(voiceService.isWssVoiceActive$ | async) && !voiceService.wasProxyHandled(message?.uid)"
@@ -41,6 +36,13 @@
         [color]="fontColor">
       </chat-audio-sync>
 
+      <chat-json-sources *ngIf="jsonSources !== null && jsonSources.length > 0"
+        [items]="jsonSources"
+        [displayFields]="jsonSourcesDisplayFields"
+        [backgroundColor]="jsonSourcesBackgroundColor"
+        (onElementRendered)="onElementRenderedFN($event)">
+      </chat-json-sources>
+
       <!-- Karaoke display for TTS messages while a WSS voice session is active -->
       <p *ngIf="isAudioTTS(message) && (voiceService.isWssVoiceActive$ | async) && _wssKaraokeWords$"
          class="wss-karaoke"
@@ -58,6 +60,7 @@
         [color]="fontColor">
       </chat-text>
 
+
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
         [width]="message.metadata.width"
@@ -68,7 +71,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && (!isAudio(message) && !isAudioTTS(message)) && !isJsonSources(message)" >
+      <div *ngIf="(message?.text && !isAudio(message) && !isAudioTTS(message)) && !isJsonSources(message)">
 
         <!-- Word-by-word streaming reveal during an active voice session -->
         <p *ngIf="_isStreaming" class="streaming-text" [style.color]="fontColor">
@@ -78,7 +81,7 @@
         </p>
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
-        <chat-text *ngIf="message?.type !=='html'"
+        <chat-text *ngIf="jsonSources === null && message?.type !=='html' && !_isStreaming"
           [text]="message?.text"
           [color]="fontColor"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"

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

@@ -1,10 +1,10 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { of } from 'rxjs';
 import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
-import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { calcImageSize } from 'src/chat21-core/utils/utils-message';
 import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
 
 import { BubbleMessageComponent } from './bubble-message.component';
 
@@ -12,15 +12,20 @@ describe('BubbleMessageComponent', () => {
   let component: BubbleMessageComponent;
   let fixture: ComponentFixture<BubbleMessageComponent>;
 
+  const jsonSourcesParserMock = {
+    getUrlPreviewPayload: () => null,
+    parseBaseFromMessage: () => null,
+    enrichSources: jasmine.createSpy('enrichSources').and.resolveTo([]),
+  };
+
   const voiceServiceMock = {
     isWssVoiceActive: false,
     markProxyHandled: jasmine.createSpy('markProxyHandled'),
-    voiceTtsKaraoke$: of({ text: '', words: [], activeIndex: -1 }),
-  };
-
-  const jsonSourcesParserMock = {
-    parseBaseFromMessage: jasmine.createSpy('parseBaseFromMessage').and.returnValue(null),
-    enrichSources: jasmine.createSpy('enrichSources').and.resolveTo(null),
+    voiceTtsKaraoke$: {
+      pipe: () => ({
+        subscribe: () => ({ unsubscribe: () => undefined }),
+      }),
+    },
   };
 
   const textMessage: any = {
@@ -43,8 +48,8 @@ describe('BubbleMessageComponent', () => {
       declarations: [BubbleMessageComponent],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
-        { provide: VoiceService, useValue: voiceServiceMock },
         { provide: JsonSourcesParserService, useValue: jsonSourcesParserMock },
+        { provide: VoiceService, useValue: voiceServiceMock },
       ],
     }).compileComponents();
   }));
@@ -77,59 +82,47 @@ describe('BubbleMessageComponent', () => {
     expect(textChild.properties.text).toEqual(textMessage.text);
   });
 
-  describe('ngOnChanges', () => {
-    it('should compute sizeImage from message metadata object', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: 100, height: 50 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(100);
+  describe('calcImageSize', () => {
+    it('should scale down when width exceeds MAX_WIDTH_IMAGES', () => {
+      const meta = { width: MAX_WIDTH_IMAGES * 2, height: 100 };
+      const s = calcImageSize(meta);
+      expect(s.width).toBe(MAX_WIDTH_IMAGES);
     });
 
-    it('should cap width when metadata exceeds MAX_WIDTH_IMAGES (calcImageSize)', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: MAX_WIDTH_IMAGES * 2, height: 100 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(MAX_WIDTH_IMAGES);
+    it('should apply MIN_WIDTH when thumbnail width is small', () => {
+      const meta = { width: 40, height: 80 };
+      const s = calcImageSize(meta);
+      expect(s.width).toBe(MIN_WIDTH_IMAGES);
     });
 
-    it('should scale up narrow thumbnails when width <= 55 (calcImageSize)', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: 40, height: 80 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(MIN_WIDTH_IMAGES);
-      expect(component.sizeImage.height).toBe(MIN_WIDTH_IMAGES / (40 / 80));
+    it('should keep metadata dimensions for mid-sized images', () => {
+      const meta = { width: 120, height: 60 };
+      const s = calcImageSize(meta);
+      expect(s.width).toBe(120);
+      expect(s.height).toBe(60);
     });
 
-    it('should keep metadata dimensions for mid-sized images', () => {
-      component.message = {
-        ...textMessage,
-        metadata: { width: 120, height: 60 },
-      };
-      component.ngOnChanges();
-      expect(component.sizeImage.width).toBe(120);
-      expect(component.sizeImage.height).toBe(60);
+    it('should return raw metadata when width branch not matched', () => {
+      const s = calcImageSize({ width: undefined, height: 10 });
+      expect(s.width).toBeUndefined();
+      expect(s.height).toBe(10);
     });
+  });
 
-    it('should leave width undefined when metadata has no width (calcImageSize)', () => {
+  describe('ngOnChanges', () => {
+    it('should compute sizeImage from message metadata object', () => {
       component.message = {
         ...textMessage,
-        metadata: { width: undefined, height: 10 },
+        metadata: { width: 100, height: 50 },
       };
       component.ngOnChanges();
-      expect(component.sizeImage.width).toBeUndefined();
-      expect(component.sizeImage.height).toBe(10);
+      expect(component.sizeImage.width).toBe(100);
     });
 
     it('should ignore non-object metadata', () => {
       component.message = { ...textMessage, metadata: 'x' as any };
       component.ngOnChanges();
-      expect(component.sizeImage).toEqual({ width: 0, height: 0 });
+      expect(component.sizeImage).toBeUndefined();
     });
 
     it('should derive fullnameColor from fontColor', () => {

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -3,13 +3,13 @@ import { Observable, Subscription } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, TYPE_MSG_URL_PREVIEW } from 'src/chat21-core/utils/constants';
+import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
 import { calcImageSize, isAudio, isAudioTTS, isFile, isFrame, isImage, isJsonSources, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
-import { VoiceService } from 'src/app/providers/voice/voice.service';
+import { JsonSourcesParserService, UrlPreviewDisplayFields } from 'src/app/providers/json-sources-parser.service';
 import { JsonSourceItem } from '../json-sources/json-sources.component';
+import { VoiceService } from 'src/app/providers/voice/voice.service';
 import { VoiceTtsKaraokeWord } from 'src/app/providers/voice/voice-streaming.types';
 
 @Component({
@@ -24,6 +24,7 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
   @Input() fontColor: string;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
+
   /** When true, a newly-arrived bot text message reveals its words one by one. */
   @Input() streamOnArrival = false;
   /** One-shot flag: set once in ngOnChanges, never reverts so animation isn't replayed. */
@@ -53,30 +54,6 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
     return !!(msg.text && String(msg.text).trim().length > 0);
   }
 
-  readonly isImage = isImage;
-  readonly isFile = isFile;
-  readonly isFrame = isFrame;
-  readonly isAudio = isAudio;
-  readonly isJsonSources = isJsonSources;
-  readonly isAudioTTS = isAudioTTS;
-  readonly messageType = messageType;
-  readonly convertColorToRGBA = convertColorToRGBA;
-  readonly MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
-  readonly MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
-
-  sizeImage: { width: number; height: number } = { width: 0, height: 0 };
-  fullnameColor: string = '';
-  jsonSources: JsonSourceItem[] | null = null;
-  isUrlPreviewMessage = false;
-
-  private urlPreviewReqId = 0;
-
-  constructor(
-    public sanitizer: DomSanitizer, 
-    public voiceService: VoiceService, 
-    private jsonSourcesParser: JsonSourcesParserService
-  ) { }
-
   ngOnInit() {
     // If this TTS message arrived while the voice proxy was active, mark it so
     // audio-sync never replays it after the session ends.
@@ -109,6 +86,32 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
     this._kSub = undefined;
   }
 
+  readonly isImage = isImage;
+  readonly isFile = isFile;
+  readonly isFrame = isFrame;
+  readonly isAudio = isAudio;
+  readonly isAudioTTS = isAudioTTS;
+  readonly isJsonSources = isJsonSources;
+  readonly messageType = messageType;
+  readonly convertColorToRGBA = convertColorToRGBA;
+  readonly MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
+  readonly MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
+
+  sizeImage: { width: number; height: number };
+  fullnameColor: string;
+  jsonSources: JsonSourceItem[] | null = null;
+  isUrlPreviewMessage = false;
+  jsonSourcesDisplayFields?: UrlPreviewDisplayFields;
+  jsonSourcesBackgroundColor?: string;
+
+  private urlPreviewReqId = 0;
+
+  constructor(
+    public sanitizer: DomSanitizer,
+    private jsonSourcesParser: JsonSourcesParserService,
+    public voiceService: VoiceService,
+  ) {}
+
   ngOnChanges(): void {
     if (this.message?.metadata && typeof this.message.metadata === 'object') {
       this.sizeImage = calcImageSize(this.message.metadata);
@@ -142,18 +145,27 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
       this.message.isJustRecived = false;
     }
 
-    if (this.message?.type !== TYPE_MSG_URL_PREVIEW) {
-      this.jsonSources = null;
-      return;
-    }
+    // Reset on every message change: we must not "leak" sources across different messages.
+    this.jsonSources = null;
+    this.jsonSourcesDisplayFields = undefined;
+    this.jsonSourcesBackgroundColor = undefined;
 
     // url_preview payload can live on message root OR inside metadata/attributes depending on the integration.
-    const urlPreviewLike =
-      this.message?.type === TYPE_MSG_URL_PREVIEW
-      || this.message?.metadata?.type === TYPE_MSG_URL_PREVIEW
-      || this.message?.attributes?.type === TYPE_MSG_URL_PREVIEW;
-    this.isUrlPreviewMessage = !!urlPreviewLike;
-    if (urlPreviewLike) this.loadJsonSourcesFromUrlPreviewMessage();
+    const urlPreviewPayload = this.jsonSourcesParser.getUrlPreviewPayload(this.message);
+    this.isUrlPreviewMessage = !!urlPreviewPayload;
+    if (urlPreviewPayload) {
+      this.jsonSourcesDisplayFields = urlPreviewPayload.displayFields;
+      this.jsonSourcesBackgroundColor = urlPreviewPayload.previewBackgroundColor;
+      this.loadJsonSourcesFromUrlPreviewMessage();
+    }
+  }
+
+  trackWord(_index: number, item: { word: string; index: number }): number {
+    return item.index;
+  }
+
+  trackKaraokeWord(index: number): number {
+    return index;
   }
 
   private async loadJsonSourcesFromUrlPreviewMessage(): Promise<void> {
@@ -169,14 +181,6 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
     this.jsonSources = enriched;
   }
 
-  trackWord(_index: number, item: { word: string; index: number }): number {
-    return item.index;
-  }
-
-  trackKaraokeWord(index: number): number {
-    return index;
-  }
-
   onBeforeMessageRenderFN(event: any): void {
     this.onBeforeMessageRender.emit({ message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component });
   }

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

@@ -1,4 +1,5 @@
-<div class="sources-panel" *ngIf="items && items.length > 0">
+<div class="sources-panel" *ngIf="items && items.length > 0"
+     [style.background]="backgroundColor || null">
 
   <div class="sources-header">
     <div class="sources-favicons">
@@ -18,16 +19,16 @@
      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__title">{{ getTitleText(item) }}</div>
+      <div class="source-row__desc" *ngIf="isFieldVisible('description') && 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 class="source-row__thumb" *ngIf="isFieldVisible('image') && item.image">
+      <img [src]="getThumbUrl(item)" alt="" loading="lazy" (error)="$event.target.closest('.source-row__thumb').remove()" />
     </div>
   </a>
 

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 {