@chat21/chat21-web-widget 5.1.33-rc11 → 5.1.33-rc9

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -264,9 +264,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CLOSE',
       'VOICE_CONNECTING',
       'VOICE_LISTENING',
-      'VOICE_PROCESSING',
-      'STREAM_AUDIO',
-      'MAX_ATTACHMENT'
+      'VOICE_PROCESSING'
     ];
 
     const keysContent = [

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.spec.ts

@@ -264,4 +264,11 @@ describe('ConversationContentComponent', () => {
     });
   });
 
+  describe('ngAfterContentChecked', () => {
+    it('should trigger change detection', () => {
+      spyOn((component as any).cdref, 'detectChanges');
+      component.ngAfterContentChecked();
+      expect((component as any).cdref.detectChanges).toHaveBeenCalled();
+    });
+  });
 });

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { MAX_WIDTH_IMAGES, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT, MSG_STATUS_SENT_SERVER } from 'src/app/utils/constants';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -13,7 +12,7 @@ import { isCarousel, isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastM
   templateUrl: './conversation-content.component.html',
   styleUrls: ['./conversation-content.component.scss']
 })
-export class ConversationContentComponent implements OnInit, OnDestroy {
+export class ConversationContentComponent implements OnInit {
   @ViewChild('scrollMe') public scrollMe: ElementRef;
   
   @Input() messages: MessageModel[]
@@ -74,7 +73,6 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
   showUploadProgress: boolean = false;
   fileType: string;
   private logger: LoggerService = LoggerInstance.getInstance();
-  private uploadSub?: Subscription;
 
   constructor(private cdref: ChangeDetectorRef,
               private elementRef: ElementRef,
@@ -84,8 +82,8 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
     this.listenToUploadFileProgress();
   }
 
-  ngOnDestroy() {
-    this.uploadSub?.unsubscribe();
+  ngAfterContentChecked() {
+    this.cdref.detectChanges();
   }
 
   ngOnChanges(changes: SimpleChanges){
@@ -123,7 +121,7 @@ export class ConversationContentComponent implements OnInit, OnDestroy {
 
   // ENABLE HTML SECTION 'FILE PENDING UPLOAD'
   listenToUploadFileProgress() {
-    this.uploadSub = this.uploadService.BSStateUpload.subscribe((data: any) => {
+    this.uploadService.BSStateUpload.subscribe((data: any) => {
       this.logger.debug('[CONV-CONTENT] BSStateUpload', data);
       // && data.type.startsWith("application")
       if (data) { 

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -59,9 +59,7 @@
                 <span class="v-align-center">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
-                        <title id="altIconTitle">{{ maxAttachmentLabel }}</title>
-                    </svg>
-                    
+                    </svg> 
                 </span>
                 <input
                     [attr.disabled]="(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
@@ -175,7 +173,8 @@
             class="chat21-textarea-button chat21-stream-button"
             [class.active]="isStreamAudioActive || isStreamAudioConnecting || (!textInputTextArea && !hideTextReply)"
             [class.chat21-stream-button--expanded]="isStreamAudioActive || isStreamAudioConnecting"
-            (click)="onStreamPressed($event)" [attr.aria-label]="(isStreamAudioActive || isStreamAudioConnecting) ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')">
+            (click)="onStreamPressed($event)" [attr.aria-label]="(isStreamAudioActive || isStreamAudioConnecting) ? (translationMap?.get('CLOSE') || 'Chiudi stream') : (translationMap?.get('STREAM_AUDIO') || 'Stream audio')"
+            [ngStyle]="{ 'background-color': stylesMap?.get('iconColor') || stylesMap?.get('themeColor') }">
             <chat-stream-audio-spectrum
                 mode="button"
                 [active]="isStreamAudioActive || isStreamAudioConnecting"

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -105,19 +105,28 @@
     box-sizing: border-box;
     flex-shrink: 0;
     color: #ffffff;
-    transition: min-width 220ms ease, border-radius 180ms ease, padding 180ms ease;
+    transition:
+        min-width 220ms ease,
+        border-radius 180ms ease,
+        padding 180ms ease;
 
-    &:hover{
-        background: rgba(240, 240, 240, 0.4) !important;
-        transition: all 0.45s ease-in-out 0s !important;
-        -moz-transition: all 0.45s ease-in-out 0s !important;
-        -webkit-transition: all 0.45s ease-in-out 0s !important;
+    .chat21-stream-button__icon svg {
+        width: 20px;
+        height: 20px;
+        path {
+            fill: #ffffff;
+        }
+    }
+
+    &.chat21-textarea-button span svg:hover {
+        background: rgba(255, 255, 255, 0.2) !important;
+        border-radius: 50%;
     }
 
     &.chat21-stream-button--expanded {
-        min-width: 110px;
+        min-width: 120px;
         border-radius: 999px;
-        // padding: 0 14px;
+        padding: 0 14px;
         justify-content: center;
 
         // stop the circle-hover background from looking odd on pill
@@ -418,7 +427,7 @@ textarea:active{
     flex-direction: column;
     justify-content: center;
     position: absolute;
-    // padding: 8px 16px;
+    padding: 8px 16px;
     overflow: hidden;
     background-color: color-mix(in srgb, var(--content-background-color) 34%, transparent);
     backdrop-filter: blur(20px) saturate(1.2);

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -124,12 +124,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges, OnDestroy
     return this.translationMap?.get('VOICE_LISTENING') || 'Listening...';
   }
 
-  get maxAttachmentLabel(): string {
-    const template = this.translationMap?.get('MAX_ATTACHMENT')
-      || `Max allowed size {{FILE_SIZE_LIMIT}}Mb`;
-    return template.replace(/\{\{FILE_SIZE_LIMIT\}\}/g, String(this.file_size_limit));
-  }
-
   file_size_limit = FILE_SIZE_LIMIT;
   attachmentTooltip: string = '';
   isErrorNetwork: boolean = false;

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.html

@@ -22,14 +22,11 @@
     <!-- BUTTON: inactive icon / expanded pill content -->
     <ng-container *ngSwitchCase="'button'">
         <span class="stream-audio-button__icon" *ngIf="!active" aria-hidden="true">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 23 23" aria-labelledby="altIconTitle">
-                <rect x="0" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="4" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="8" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="12" y="5.5" height="10px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="16" y="2.5" height="16px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <rect x="20" y="7.5" height="6px" fill-opacity="1" width="2px" rx="0.75" ry="0.75"></rect>
-                <title id="altIconTitle">{{ translationMap.get('STREAM_AUDIO') }}</title>
+            <svg role="img" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 30 30" fill="currentColor" preserveAspectRatio="xMidYMid meet">
+                <path class="s0" d="m5.21 7.41c-1.21 0-2.21 0.99-2.21 2.21v8.14c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.14c0-1.21-0.99-2.21-2.21-2.21z"/>
+                <path class="s0" d="m11.64 3.01c-1.22 0-2.21 0.99-2.21 2.2v16.94c0 1.21 0.99 2.2 2.21 2.2 1.22 0 2.21-0.98 2.21-2.2v-16.94c0-1.21-0.99-2.21-2.21-2.21z"/>
+                <path class="s0" d="m15.86 9.25v8.88c0 1.21 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-8.88c0-1.22-0.99-2.21-2.21-2.21-1.22 0-2.21 0.99-2.21 2.21z"/>
+                <path class="s0" d="m24.5 8.97c-1.22 0-2.21 0.99-2.21 2.21v5.02c0 1.22 0.99 2.21 2.21 2.21 1.22 0 2.21-0.99 2.21-2.21v-5.02c0-1.21-0.99-2.21-2.21-2.21z"/>
             </svg>
         </span>
 

package/src/app/component/conversation-detail/stream-audio-spectrum/stream-audio-spectrum.component.scss

@@ -39,9 +39,6 @@
   width: 20px;
   height: 20px;
   display: block;
-  rect {
-    fill: var(--icon-fill-color);
-  }
 }
 
 .stream-audio-button__expanded {
@@ -51,7 +48,6 @@
   gap: 12px;
   width: 100%;
   user-select: none;
-  color: var(--icon-fill-color);
 }
 
 .stream-audio-button__label {
@@ -78,6 +74,6 @@
   width: 3px;
   height: 100%;
   border-radius: 2px;
-  background: var(--icon-fill-color);
+  background: rgba(255, 255, 255, 0.92);
   transform-origin: center;
 }

package/src/app/component/form/inputs/form-text/form-text.component.ts

@@ -1,6 +1,5 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChange, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, ViewChild } from '@angular/core';
 import { FormGroup, FormGroupDirective } from '@angular/forms';
-import { Subscription } from 'rxjs';
 import { FormArray } from '../../../../../chat21-core/models/formArray';
 
 @Component({
@@ -8,7 +7,7 @@ import { FormArray } from '../../../../../chat21-core/models/formArray';
   templateUrl: './form-text.component.html',
   styleUrls: ['./form-text.component.scss']
 })
-export class FormTextComponent implements OnInit, OnDestroy {
+export class FormTextComponent implements OnInit {
 
   @Input() element: FormArray;
   @Input() controlName: string;
@@ -20,7 +19,6 @@ export class FormTextComponent implements OnInit, OnDestroy {
   @ViewChild('div_input') input: ElementRef;
   form: FormGroup<any>;
   inputType: string = 'text'
-  private valueChangesSub?: Subscription;
 
   get fieldBaseId(): string {
     const raw = this.element?.name || this.controlName || 'field';
@@ -53,17 +51,13 @@ export class FormTextComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
-      this.valueChangesSub = this.form.controls[this.controlName].valueChanges.subscribe((value) => {
+      this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;
         this.setFormStyle();
       })
     }
   }
 
-  ngOnDestroy() {
-    this.valueChangesSub?.unsubscribe();
-  }
-
   ngOnChanges(changes: SimpleChange){
     if(this.controlName && (this.controlName.toLowerCase().includes('email') || this.controlName.toLowerCase().includes('e-mail')) ){
       this.inputType = 'email';

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

@@ -1,10 +1,5 @@
 /* ====== SET MESSAGES ====== */
 
-:host(.hidden-bubble) {
-    display: none !important;
-}
-
-
 .messages {
     border-radius: var(--border-radius-bubble-message);
     padding: 0;

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

@@ -40,18 +40,6 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
 
   @HostBinding('class.no-background') get hostNoBackground() { return this.jsonSources !== null && this.jsonSources.length > 0; }
   @HostBinding('class.json-resources') get hostIsJsonResources() { return this.jsonSources !== null && this.jsonSources.length > 0; }
-  @HostBinding('class.hidden-bubble') get hostHiddenBubble() { return !this.hasRenderableContent(); }
-
-  hasRenderableContent(): boolean {
-    const msg = this.message;
-    if (!msg) return false;
-    if (isImage(msg) || isFile(msg) || isFrame(msg) || isAudio(msg)) return true;
-    if (this.jsonSources && this.jsonSources.length > 0) return true;
-    // For url_preview messages, `text` may carry the raw JSON payload (not display text):
-    // if sources parsing yielded nothing, the bubble must stay hidden.
-    if (this.isUrlPreviewMessage) return false;
-    return !!(msg.text && String(msg.text).trim().length > 0);
-  }
 
   readonly isImage = isImage;
   readonly isFile = isFile;
@@ -67,7 +55,6 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
   sizeImage: { width: number; height: number } = { width: 0, height: 0 };
   fullnameColor: string = '';
   jsonSources: JsonSourceItem[] | null = null;
-  isUrlPreviewMessage = false;
 
   private urlPreviewReqId = 0;
 
@@ -152,7 +139,6 @@ export class BubbleMessageComponent implements OnInit, OnDestroy {
       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();
   }
 

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

@@ -1,5 +1,5 @@
 :host {
-  --panel-bck: #ffffff; // #f7f8fa;
+  --panel-bck: #f7f8fa;
   --row-sep: rgba(66, 133, 244, 0.18);
   --text: rgba(0, 0, 0, 0.90);
   --muted: rgba(0, 0, 0, 0.62);
@@ -22,7 +22,7 @@
 }
 
 .sources-header {
-  display: none;
+  display: flex;
   align-items: center;
   gap: 8px;
   padding: 2px 4px 8px 4px;
@@ -56,7 +56,7 @@
 .sources-panel {
   display: flex;
   flex-direction: column;
-  padding: 18px 12px 10px 12px;
+  padding: 12px 12px 10px 12px;
   background: var(--panel-bck);
   border-radius: 18px;
   font-size: 14px;
@@ -79,10 +79,6 @@
   width: 100%;
   box-sizing: border-box;
 
-  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 {
@@ -90,11 +86,11 @@
     }
   }
 
-  // & + & {
-  //   border-top: 1px solid var(--row-sep);
-  //   border-top-left-radius: 0;
-  //   border-top-right-radius: 0;
-  // }
+  & + & {
+    border-top: 1px solid var(--row-sep);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 
   .source-row__left {
     min-width: 0;

package/src/app/pipe/marked.pipe.ts

@@ -5,71 +5,61 @@ import { marked, Tokens } from 'marked';
   name: 'marked'
 })
 export class MarkedPipe implements PipeTransform {
-  private static renderer: any = null;
 
-  private static getRenderer(): any {
-    if (!MarkedPipe.renderer) {
-      const renderer = new marked.Renderer();
-
-      /* --------------------------------------------------
-         🔐 1. NON renderizzare HTML raw
-      -------------------------------------------------- */
-      renderer.html = function(token: Tokens.HTML | Tokens.Tag): string {
-        const html = 'text' in token ? token.text : '';
-
-        return html
-          .replace(/&/g, '&')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;');
-      };
+  transform(value: any): string {
 
-      /* --------------------------------------------------
-         🔐 2. Link sicuri
-      -------------------------------------------------- */
-      const originalLinkRenderer = renderer.link.bind(renderer);
+    const input =
+      typeof value === 'string'
+        ? value
+        : (value === null || value === undefined) ? '' : String(value);
 
-      const dangerousProtocols = [
-        /^javascript:/i,
-        /^data:/i,
-        /^vbscript:/i
-      ];
+    const inputWithNewlines = input.replace(/\\n/g, '\n');
 
-      renderer.link = function({ href, title, tokens }: any) {
+    const renderer = new marked.Renderer();
 
-        const normalized = (href || '').trim();
+    /* --------------------------------------------------
+       🔐 1. NON renderizzare HTML raw
+    -------------------------------------------------- */
+    renderer.html = function(token: Tokens.HTML | Tokens.Tag): string {
+      const html = 'text' in token ? token.text : '';
 
-        const isDangerous = dangerousProtocols.some(pattern =>
-          pattern.test(normalized)
-        );
+      return html
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    };
 
-        if (isDangerous) {
-          return tokens ? tokens.map((t: any) => t.raw).join('') : href || '';
-        }
+    /* --------------------------------------------------
+       🔐 2. Link sicuri
+    -------------------------------------------------- */
+    const originalLinkRenderer = renderer.link.bind(renderer);
 
-        const html = originalLinkRenderer({ href, title, tokens });
+    const dangerousProtocols = [
+      /^javascript:/i,
+      /^data:/i,
+      /^vbscript:/i
+    ];
 
-        // aggiunge sicurezza ai link
-        return html.replace(
-          '<a ',
-          '<a target="_blank" rel="noopener noreferrer" '
-        );
-      };
+    renderer.link = function({ href, title, tokens }) {
 
-      MarkedPipe.renderer = renderer;
-    }
-    return MarkedPipe.renderer;
-  }
+      const normalized = (href || '').trim();
 
-  transform(value: any): string {
+      const isDangerous = dangerousProtocols.some(pattern =>
+        pattern.test(normalized)
+      );
 
-    const input =
-      typeof value === 'string'
-        ? value
-        : (value === null || value === undefined) ? '' : String(value);
+      if (isDangerous) {
+        return tokens ? tokens.map(t => t.raw).join('') : href || '';
+      }
 
-    const inputWithNewlines = input.replace(/\\n/g, '\n');
+      const html = originalLinkRenderer({ href, title, tokens });
 
-    const renderer = MarkedPipe.getRenderer();
+      // aggiunge sicurezza ai link
+      return html.replace(
+        '<a ',
+        '<a target="_blank" rel="noopener noreferrer" '
+      );
+    };
 
     marked.setOptions({
       renderer,

package/src/app/providers/global-settings.service.ts

@@ -596,9 +596,6 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('allowedUploadExtentions')) {
                         globals['fileUploadAccept'] = variables['allowedUploadExtentions'];
                     }
-                    if(variables.hasOwnProperty('showAudioStreamFooterButton')) {
-                        globals['showAudioStreamFooterButton'] = variables['showAudioStreamFooterButton'];
-                    }
                     
                 }
             }
@@ -950,14 +947,6 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.soundEnabled = TEMP;
         }
-        TEMP = tiledeskSettings['keyboardSoundVolume'];
-        if (TEMP !== undefined) {
-            globals.keyboardSoundVolume = +TEMP;
-        }
-        TEMP = tiledeskSettings['keyboardSoundFile'];
-        if (TEMP !== undefined) {
-            globals.keyboardSoundFile = TEMP;
-        }
         TEMP = tiledeskSettings['openExternalLinkButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > openExternalLinkButton:: ', TEMP]);
         if (TEMP !== undefined) {
@@ -1347,14 +1336,6 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.soundEnabled = TEMP;
         }
-        TEMP = el.nativeElement.getAttribute('keyboardSoundVolume');
-        if (TEMP !== null) {
-            this.globals.keyboardSoundVolume = +TEMP;
-        }
-        TEMP = el.nativeElement.getAttribute('keyboardSoundFile');
-        if (TEMP !== null) {
-            this.globals.keyboardSoundFile = TEMP;
-        }
         TEMP = el.nativeElement.getAttribute('openExternalLinkButton');
         if (TEMP !== null) {
             this.globals.openExternalLinkButton = TEMP;
@@ -1754,16 +1735,6 @@ export class GlobalSettingsService {
             globals.soundEnabled = stringToBoolean(TEMP); 
         }
 
-        TEMP = getParameterByName(windowContext, 'tiledesk_keyboardSoundVolume');
-        if (TEMP) {
-            globals.keyboardSoundVolume = +TEMP;
-        }
-
-        TEMP = getParameterByName(windowContext, 'tiledesk_keyboardSoundFile');
-        if (TEMP) {
-            globals.keyboardSoundFile = TEMP;
-        }
-
         TEMP = getParameterByName(windowContext, 'tiledesk_openExternalLinkButton');
         if (TEMP) {
             globals.openExternalLinkButton = stringToBoolean(TEMP); 

package/src/app/providers/json-sources-parser.service.ts

@@ -7,19 +7,25 @@ import { mergeJsonSourcesMissingFields } from 'src/app/utils/json-sources-utils'
 
 export type UrlPreviewMessage = {
   type?: string; // "url_preview"
+  activeMode?: 'form' | 'list' | 'text' | string;
+  form?: { sources?: any[] };
+  list?: string;
   text?: string;
 };
 
 /**
  * Parse and enrich "url_preview" messages into `JsonSourceItem[]`.
  *
+ * This service is intentionally isolated so it can be replaced/removed easily.
+ *
  * Rules:
- * - The payload is always read from `msg.text`, regardless of `activeMode`.
- * - `msg.text` may be either:
- *     - a JSON array of source objects (`{source_name, source_file_name, ...}`), or
- *     - a plain string from which URLs are extracted (split by whitespace/punctuation).
- * - After building the initial array, `url-preview` is called only for items that miss
- *   title or description, and missing fields are merged in (never overwriting).
+ * - It expects the full url_preview message object: `{ type: 'url_preview', activeMode: 'form'|'list'|'text', ... }`
+ * - `activeMode` selects the source field to use:
+ *   - `form`: reads `msg.form.sources` (array of `{source_name, source_file_name, ...}`)
+ *   - `list`: reads `msg.list` (free text) and extracts URLs (max 10)
+ *   - `text`: reads `msg.text` (a JSON array string with the same schema as `form.sources`)
+ * - After building the initial array, it calls `url-preview` only for items that miss title or description,
+ *   and merges the missing fields only (never overwriting existing values).
  */
 @Injectable({ providedIn: 'root' })
 export class JsonSourcesParserService {
@@ -92,11 +98,23 @@ export class JsonSourcesParserService {
   private parseBaseJsonSources(msg?: UrlPreviewMessage | null): JsonSourceItem[] | null {
     if (!msg || msg.type !== 'url_preview') return null;
 
-    // Regardless of `activeMode`, the payload is always read from `msg.text`.
-    // It can be either a JSON array of source objects, or a plain string with URLs.
-    return this.isJsonArrayOfObjects(msg.text)
-      ? this.mapTextToSources(msg.text)
-      : this.mapListToSources(msg.text);
+    const mode = (msg.activeMode || '').toString().trim();
+    const normalizedMode = mode === 'json_sources' ? 'form' : mode; // backward compat
+
+    if (normalizedMode === 'form') {
+      return this.mapSourcesArray(msg.form?.sources);
+    }
+    if (normalizedMode === 'list') {
+      return this.mapListToSources(msg.list);
+    }
+    if (normalizedMode === 'text') {
+      return this.mapTextToSources(msg.text);
+    }
+
+    // best-effort fallback order
+    return this.mapSourcesArray(msg.form?.sources)
+      || this.mapTextToSources(msg.text)
+      || this.mapListToSources(msg.list);
   }
 
   private mapListToSources(listValue?: string): JsonSourceItem[] | null {
@@ -104,16 +122,6 @@ export class JsonSourcesParserService {
     return urls.length ? urls.map(u => ({ link: u, title: u })) : null;
   }
 
-  private isJsonArrayOfObjects(text?: string): boolean {
-    if (!text) return false;
-    try {
-      const parsed = this.parseJsonLenient(text);
-      return Array.isArray(parsed) && parsed.some(it => it && typeof it === 'object' && !Array.isArray(it));
-    } catch {
-      return false;
-    }
-  }
-
   private mapTextToSources(text?: string): JsonSourceItem[] | null {
     if (!text) return null;
     try {
@@ -129,10 +137,9 @@ export class JsonSourcesParserService {
     if (!arr || arr.length === 0) return null;
     const mapped = arr
       .filter((s: any) => s && typeof s === 'object' && typeof s[JSON_SOURCE_FIELD_URL] === 'string')
-      .map((s: any): JsonSourceItem | null => {
+      .map((s: any): JsonSourceItem => {
         const rawUrl = (s[JSON_SOURCE_FIELD_URL] || '').toString().trim();
-        const normalized = extractUrlsFromText(rawUrl, 1)[0];
-        if (!normalized) return null;
+        const normalized = extractUrlsFromText(rawUrl, 1)[0] || rawUrl;
         return {
           link: normalized,
           title: (s[JSON_SOURCE_FIELD_TITLE] || rawUrl).toString(),
@@ -140,7 +147,7 @@ export class JsonSourcesParserService {
           image: typeof s.source_image === 'string' ? s.source_image : undefined
         };
       })
-      .filter((x: JsonSourceItem | null): x is JsonSourceItem => !!x && !!x.link);
+      .filter((x: JsonSourceItem) => !!x.link);
     return mapped.length ? mapped : null;
   }