@chat21/chat21-web-widget 5.1.33 → 5.1.34

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.34
+- **bug fixed**: if last message is ulr_preview shows previous message buttons
+
 # 5.1.33
 - **bug fixed**: widget not loaded because blob block loading in lauch.js
 

package/angular.json

@@ -44,7 +44,9 @@
               "src/environments/real_data/widget-config-docker.json",
               "src/environments/real_data/widget-config-native-mqtt.json",
               "src/environments/real_data/widget-config-native-prod.json",
-              "src/environments/real_data/widget-config-aws-stage.json"
+              "src/environments/real_data/widget-config-aws-stage.json",
+              "src/environments/real_data/widget-config-aws-aruba.json",
+              "src/environments/real_data/widget-config-regione-puglia.json"
             ],
             "styles": [
               "src/app/sass/styles.scss"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.33",
+  "version": "5.1.34",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.module.ts

@@ -138,6 +138,7 @@ import { CarouselComponent } from './component/message/carousel/carousel.compone
 import { BrandService } from './providers/brand.service';
 import { ErrorAlertComponent } from './component/error-alert/error-alert.component';
 import { ConfirmCloseComponent } from './modals/confirm-close/confirm-close.component';
+import { JsonSourcesComponent } from './component/message/json-sources/json-sources.component';
 
 
 
@@ -309,6 +310,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     LikeUnlikeComponent,
     TooltipDirective,
     CarouselComponent,
+    JsonSourcesComponent,
     ErrorAlertComponent,
     ConfirmCloseComponent
   ],

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

@@ -164,6 +164,12 @@
                         min-width: 14px;
                         border: 0.1px solid #0000000f;
                     }
+                    .msg_sent.json-resources{
+                        border: 0 !important;
+                        width: 100%;
+                        max-width: 652px;
+                        flex: 1 1 auto;
+                    }
                     .message_innerhtml {
                         padding: 8px;
                     }
@@ -237,6 +243,13 @@
                         width: auto;
 
                     }
+                    .msg_receive.json-resources{
+                        min-height: unset;
+                        padding: 0;
+                        width: 100%;
+                        max-width: 652px;
+                        flex: 1 1 auto;
+                    }
                     
 
                     .message_innerhtml {
@@ -332,4 +345,4 @@
     }
 }
 
-// ============= END CSS c21-body ================= //
+// ============= END CSS c21-body ================= //

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

@@ -92,7 +92,6 @@ export class ConversationContentComponent implements OnInit {
 
   }
 
-
   /**
    *
    * @param message

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

@@ -20,7 +20,7 @@
 
 
 
-<div id="bubble-message"  class="messages primary-color">
+<div id="bubble-message" *ngIf="hasRenderableContent()" class="messages primary-color">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -58,12 +58,17 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-audio> -->
 
-      <chat-audio  *ngIf="isAudio(message)"
+      <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
         [stylesMap]="stylesMap">
       </chat-audio>
 
+      <chat-json-sources *ngIf="jsonSources !== null && jsonSources.length > 0"
+        [items]="jsonSources"
+        (onElementRendered)="onElementRenderedFN($event)">
+      </chat-json-sources> 
+
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -75,17 +80,17 @@
       <!-- <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)" >
+      <div *ngIf="(message?.text && !isAudio(message)) && !isJsonSources(message)">
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
-        <chat-text *ngIf="message?.type !=='html'"
+        <chat-text *ngIf="jsonSources === null && message?.type !=='html'"
           [text]="message?.text"
           [color]="fontColor"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)">
         </chat-text>
 
-        <chat-html *ngIf="message?.type==='html'"
+        <chat-html *ngIf="jsonSources === null && message?.type==='html'"
           [htmlText]="message?.text"
           [fontSize]="stylesMap.get('buttonFontSize')"
           [themeColor]="stylesMap.get('themeColor')"

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

@@ -1,5 +1,10 @@
 /* ====== 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

@@ -1,148 +1,113 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, TYPE_MSG_URL_PREVIEW } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { isAudio, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
+import { calcImageSize, isAudio, isFile, isFrame, isImage, isJsonSources, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
+import { JsonSourcesParserService } from 'src/app/providers/json-sources-parser.service';
+import { JsonSourceItem } from '../json-sources/json-sources.component';
 
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
   styleUrls: ['./bubble-message.component.scss']
 })
-export class BubbleMessageComponent implements OnInit {
+export class BubbleMessageComponent {
 
   @Input() message: MessageModel;
   @Input() isSameSender: boolean;
   @Input() fontColor: string;
   @Input() stylesMap: Map<string, string>;
+
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
-  isImage = isImage;
-  isFile = isFile;
-  isFrame = isFrame;
-  isAudio = isAudio;
-  convertColorToRGBA = convertColorToRGBA
-
- // ========== begin:: check message type functions ======= //
-  messageType = messageType;
-
-  MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
-  MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
- // ========== end:: check message type functions ======= //
-  sizeImage : { width: number, height: number}
-  fullnameColor: string;
-  private logger: LoggerService = LoggerInstance.getInstance()
-  constructor(public sanitizer: DomSanitizer) { }
-
-  ngOnInit() {
-    // console.log("---- > MSG:", this.message);
+  @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
+
+  @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);
   }
 
-  ngOnChanges() {
-    if (this.message && this.message.metadata && typeof this.message.metadata === 'object' ) {
-      this.sizeImage = this.getMetadataSize(this.message.metadata)
-    }
+  readonly isImage = isImage;
+  readonly isFile = isFile;
+  readonly isFrame = isFrame;
+  readonly isAudio = isAudio;
+  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;
 
-    if(this.fontColor){
-      this.fullnameColor = convertColorToRGBA(this.fontColor, 65)
-    }
-    if(this.message && this.message.sender_fullname && this.message.sender_fullname.trim() !== ''){
-      this.fullnameColor = getColorBck(this.message.sender_fullname)
-    }
+  private urlPreviewReqId = 0;
 
-  }
+  constructor(
+    public sanitizer: DomSanitizer,
+    private jsonSourcesParser: JsonSourcesParserService
+  ) {}
 
-  /**
-   *
-   * @param message
-   */
-  // getMetadataSize(metadata): any {
-  //   if(metadata.width === undefined){
-  //     metadata.width= MAX_WIDTH_IMAGES
-  //   }
-  //   if(metadata.height === undefined){
-  //     metadata.height = MAX_WIDTH_IMAGES
-  //   }
-  //   // const MAX_WIDTH_IMAGES = 300;
-  //   const sizeImage = {
-  //       width: metadata.width,
-  //       height: metadata.height
-  //   };
-  //   //   that.g.wdLog(['message::: ', metadata);
-  //   if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
-  //       const rapporto = (metadata['width'] / metadata['height']);
-  //       sizeImage.width = MAX_WIDTH_IMAGES;
-  //       sizeImage.height = MAX_WIDTH_IMAGES / rapporto;
-  //   }
-  //   return sizeImage; // h.toString();
-  // }
-
-  /**
-   *
-   * @param message
-   */
-  getMetadataSize(metadata): {width, height} {
-    // if (metadata.width === undefined) {
-    //   metadata.width = MAX_WIDTH_IMAGES
-    // }
-    // if (metadata.height === undefined) {
-    //   metadata.height = MAX_WIDTH_IMAGES
-    // }
-
-    const sizeImage = {
-      width: metadata.width,
-      height: metadata.height
-    };
-
-
-    if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
-      if (metadata.width <= 55) {
-        const ratio = (metadata['width'] / metadata['height']);
-        sizeImage.width = MIN_WIDTH_IMAGES;
-        sizeImage.height = MIN_WIDTH_IMAGES / ratio;
-      } else if (metadata.width > 55) {
-        sizeImage.width = metadata.width;
-        sizeImage.height = metadata.height
-      }
-    } else if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
-      const ratio = (metadata['width'] / metadata['height']);
-      sizeImage.width = MAX_WIDTH_IMAGES;
-      sizeImage.height = MAX_WIDTH_IMAGES / ratio;
+  ngOnChanges(): void {
+    if (this.message?.metadata && typeof this.message.metadata === 'object') {
+      this.sizeImage = calcImageSize(this.message.metadata);
     }
-    return sizeImage
-  }
 
-  // ========= begin:: event emitter function ============//
+    this.fullnameColor = this.fontColor
+      ? convertColorToRGBA(this.fontColor, 65)
+      : this.fullnameColor;
 
-  // returnOpenAttachment(event: String) {
-  //   this.onOpenAttachment.emit(event)
-  // }
+    if (this.message?.sender_fullname?.trim()) {
+      this.fullnameColor = getColorBck(this.message.sender_fullname);
+    }
 
-  // /** */
-  // returnClickOnAttachmentButton(event: any) {
-  //   this.onClickAttachmentButton.emit(event)
-  // }
+    // Reset on every message change: we must not "leak" sources across different messages.
+    this.jsonSources = null;
 
-  onBeforeMessageRenderFN(event){
-    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
-    this.onBeforeMessageRender.emit(messageOBJ)
+    // 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();
   }
 
-  onAfterMessageRenderFN(event){
-    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component}
-    this.onAfterMessageRender.emit(messageOBJ)
+  private async loadJsonSourcesFromUrlPreviewMessage(): Promise<void> {
+    // Protect the UI from out-of-order async responses when the input `message` changes quickly.
+    const reqId = ++this.urlPreviewReqId;
+    // 1) Parse-only, so the UI can render immediately (no url-preview calls).
+    const baseSources = this.jsonSourcesParser.parseBaseFromMessage(this.message);
+    this.jsonSources = baseSources;
+
+    // 2) Enrich in background via url-preview, then merge missing fields.
+    const enriched = await this.jsonSourcesParser.enrichSources(baseSources);
+    if (reqId !== this.urlPreviewReqId) return;
+    this.jsonSources = enriched;
   }
 
-  onElementRenderedFN(event){
-    this.onElementRendered.emit({element: event.element, status: event.status})
+  onBeforeMessageRenderFN(event: any): void {
+    this.onBeforeMessageRender.emit({ message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component });
   }
 
-  // ========= END:: event emitter function ============//
-
+  onAfterMessageRenderFN(event: any): void {
+    this.onAfterMessageRender.emit({ message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component });
+  }
 
+  onElementRenderedFN(event: any): void {
+    this.onElementRendered.emit({ element: event.element, status: event.status });
+  }
 }

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>
+

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

@@ -0,0 +1,201 @@
+:host {
+  --panel-bck: #ffffff; // #f7f8fa;
+  --row-sep: rgba(66, 133, 244, 0.18);
+  --text: rgba(0, 0, 0, 0.90);
+  --muted: rgba(0, 0, 0, 0.62);
+  --accent: #1a73e8;
+  --pill-bck: #eaebf1;
+
+  font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --title-line-height: 1.4;
+  --title-font-size: 14px;
+
+  --desc-line-height: 1.3;
+  --desc-font-size: 12px;
+
+  display: block;
+  width: 100%;
+  max-width: 652px;
+}
+
+.sources-header {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 8px 4px;
+  border-bottom: 1px solid var(--row-sep);
+}
+
+.sources-favicons {
+  display: flex;
+  align-items: center;
+}
+
+.header-favicon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: rgba(255, 255, 255, 0.7);
+  object-fit: cover;
+
+  & + & {
+    margin-left: -2px;
+  }
+}
+
+.sources-count {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.sources-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 18px 12px 10px 12px;
+  background: var(--panel-bck);
+  border-radius: 18px;
+  font-size: 14px;
+  width: 100%;
+  max-width: 652px;
+  box-sizing: border-box;
+}
+
+.source-row {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 14px;
+  text-decoration: none;
+  color: inherit;
+  padding: 10px 10px;
+  border-radius: 12px;
+  transition: background 140ms ease;
+  font-family: 'Google Sans', Arial, sans-serif;
+  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 {
+      text-decoration: underline;
+    }
+  }
+
+  // & + & {
+  //   border-top: 1px solid var(--row-sep);
+  //   border-top-left-radius: 0;
+  //   border-top-right-radius: 0;
+  // }
+
+  .source-row__left {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1 1 auto;
+  }
+
+  .source-row__title {
+    font-weight: 500;
+    color: var(--text);
+    font-size: var(--title-font-size);
+    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);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: #56595e;
+    margin: 0;
+  }
+
+  .source-row__meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+    padding-top: 2px;
+  }
+
+  .source-row__favicon {
+    width: 16px;
+    height: 16px;
+    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);
+  }
+
+  .source-row__host {
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .source-row__thumb {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+    overflow: hidden;
+    flex: 0 0 auto;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.65);
+    align-self: flex-start;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .source-row__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.show-all {
+  margin-top: 10px;
+  border: 0;
+  background: var(--pill-bck);
+  color: rgba(0, 0, 0, 0.78);
+  font-weight: 500;
+  padding: 10px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: filter 140ms ease, transform 140ms ease;
+}
+
+.show-all:hover {
+  filter: brightness(0.98);
+  transform: translateY(-1px);
+}
+

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

@@ -0,0 +1,89 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { getTopLevelDomainFromUrl } from 'src/app/utils/url-utils';
+
+export type JsonSourceItem = {
+  title?: string;
+  link?: string;
+  description?: string;
+  favicon?: string;
+  favicon_hd?: string;
+  image?: string;
+};
+
+@Component({
+  selector: 'chat-json-sources',
+  templateUrl: './json-sources.component.html',
+  styleUrls: ['./json-sources.component.scss']
+})
+export class JsonSourcesComponent {
+  @Input() items: JsonSourceItem[] = [];
+  @Input() themeColor?: string;
+  @Input() limit = 3;
+
+  @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
+
+  showAll = false;
+
+  trackByLink = (_: number, item: JsonSourceItem) => item?.link || item?.title || _;
+
+  ngAfterViewInit() {
+    this.onElementRendered.emit({ element: 'json_sources', status: true });
+  }
+
+  getFavicon(item: JsonSourceItem): string | null {
+    const domain = getTopLevelDomainFromUrl(item?.link || '');
+    if (!domain) return null;
+    const explicit = (item?.favicon_hd || item?.favicon || '').trim();
+    if (explicit) {
+      try {
+        const faviconDomain = getTopLevelDomainFromUrl(explicit);
+        return faviconDomain ? explicit.replace(new URL(explicit).hostname, faviconDomain) : explicit;
+      } catch {
+        return explicit;
+      }
+    }
+    return `https://favicon.im/${domain}`;
+    //return `https://${domain}/favicon.ico`;
+  }
+
+  getHostname(item: JsonSourceItem): string {
+    const hostname = this.safeHostname(item?.link || '');
+    return hostname || '';
+  }
+
+  private safeHostname(url: string): string {
+    try {
+      return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+      return '';
+    }
+  }
+
+  get visibleItems(): JsonSourceItem[] {
+    if (!this.items) return [];
+    const normalizedLimit = Math.max(1, this.limit || 1);
+    return this.showAll ? this.items : this.items.slice(0, normalizedLimit);
+  }
+
+  get headerFavicons(): JsonSourceItem[] {
+    const seen = new Set<string>();
+    return (this.items || []).reduce<JsonSourceItem[]>((acc, item) => {
+      const url = this.getFavicon(item);
+      if (url && !seen.has(url)) {
+        seen.add(url);
+        acc.push(item);
+      }
+      return acc;
+    }, []).slice(0, 3);
+  }
+
+  get canExpand(): boolean {
+    const normalizedLimit = Math.max(1, this.limit || 1);
+    return (this.items?.length || 0) > normalizedLimit;
+  }
+
+  toggleShowAll() {
+    this.showAll = !this.showAll;
+  }
+}
+

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

@@ -0,0 +1,175 @@
+import { Injectable } from '@angular/core';
+import { JSON_SOURCE_FIELD_TITLE, JSON_SOURCE_FIELD_URL } from 'src/chat21-core/utils/constants';
+import { UrlPreviewService } from 'src/app/providers/url-preview.service';
+import { extractUrlsFromText } from 'src/app/utils/url-utils';
+import { JsonSourceItem } from 'src/app/component/message/json-sources/json-sources.component';
+import { mergeJsonSourcesMissingFields } from 'src/app/utils/json-sources-utils';
+
+export type UrlPreviewMessage = {
+  type?: string; // "url_preview"
+  text?: string;
+};
+
+/**
+ * Parse and enrich "url_preview" messages into `JsonSourceItem[]`.
+ *
+ * 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).
+ */
+@Injectable({ providedIn: 'root' })
+export class JsonSourcesParserService {
+  constructor(private urlPreviewService: UrlPreviewService) {}
+
+  /**
+   * Parse-only: returns sources immediately (no url-preview calls).
+   * Use this to render the list instantly, then call `enrichSources()` in background.
+   */
+  parseBaseFromMessage(messageLike?: any): JsonSourceItem[] | null {
+    const payload = this.getUrlPreviewPayload(messageLike);
+    return this.parseBaseJsonSources(payload);
+  }
+
+  /**
+   * Parse + enrich: kept for backward compatibility with older callers.
+   * If you need instant rendering, prefer `parseBaseFromMessage()` + `enrichSources()`.
+   */
+  /**
+   * Best-practice entrypoint for UI components:
+   * accepts a full `MessageModel`/message-like object, and supports url_preview payload
+   * living either on the root message OR inside `metadata` OR inside `attributes`.
+   */
+  async parseFromMessage(messageLike?: any): Promise<JsonSourceItem[] | null> {
+    const base = this.parseBaseFromMessage(messageLike);
+    return this.enrichSources(base);
+  }
+
+  async enrichSources(baseSources?: JsonSourceItem[] | null): Promise<JsonSourceItem[] | null> {
+    const sources = (baseSources || []).filter((s) => !!s?.link);
+    if (sources.length === 0) return baseSources || null;
+
+    // Only call url-preview for items missing the most relevant fields.
+    const incompleteUrls = sources
+      .filter(s => !!s.link && (!s.title || !s.description))
+      .map(s => s.link!)
+      .slice(0, 10);
+
+    if (incompleteUrls.length === 0) return sources;
+
+    const previews = await this.urlPreviewService.previewUrls(incompleteUrls);
+    const previewItems: JsonSourceItem[] = (previews || []).map(p => ({
+      link: p.url,
+      title: p.title || p.siteName || p.url,
+      description: p.description,
+      image: p.image,
+      favicon: p.favicon,
+      favicon_hd: p.favicon_hd
+    }));
+
+    if (previewItems.length === 0) return sources;
+    return mergeJsonSourcesMissingFields(sources, previewItems);
+  }
+
+  async parseJsonSources(msg?: UrlPreviewMessage | null): Promise<JsonSourceItem[] | null> {
+    const base = this.parseBaseJsonSources(msg);
+    return this.enrichSources(base);
+  }
+
+  private getUrlPreviewPayload(messageLike?: any): UrlPreviewMessage | null {
+    if (!messageLike) return null;
+    const candidates: any[] = [
+      messageLike,
+      (messageLike?.metadata && typeof messageLike.metadata === 'object') ? messageLike.metadata : null,
+      (messageLike?.attributes && typeof messageLike.attributes === 'object') ? messageLike.attributes : null
+    ].filter(Boolean);
+    return (candidates.find((c) => c?.type === 'url_preview') || null) as UrlPreviewMessage | null;
+  }
+
+  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);
+  }
+
+  private mapListToSources(listValue?: string): JsonSourceItem[] | null {
+    const urls = extractUrlsFromText((listValue || '').toString(), 10);
+    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 {
+      const parsed = this.parseJsonLenient(text);
+      return this.mapSourcesArray(parsed);
+    } catch {
+      return null;
+    }
+  }
+
+  private mapSourcesArray(input: any): JsonSourceItem[] | null {
+    const arr = Array.isArray(input) ? input : null;
+    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 => {
+        const rawUrl = (s[JSON_SOURCE_FIELD_URL] || '').toString().trim();
+        const normalized = extractUrlsFromText(rawUrl, 1)[0];
+        if (!normalized) return null;
+        return {
+          link: normalized,
+          title: (s[JSON_SOURCE_FIELD_TITLE] || rawUrl).toString(),
+          description: typeof s.source_description === 'string' ? s.source_description : undefined,
+          image: typeof s.source_image === 'string' ? s.source_image : undefined
+        };
+      })
+      .filter((x: JsonSourceItem | null): x is JsonSourceItem => !!x && !!x.link);
+    return mapped.length ? mapped : null;
+  }
+
+  private parseJsonLenient(input: string): any {
+    const trimmed = (input || '').trim();
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (typeof parsed === 'string') {
+        const inner = parsed.trim();
+        if ((inner.startsWith('[') && inner.endsWith(']')) || (inner.startsWith('{') && inner.endsWith('}'))) {
+          return this.parseJsonLenient(inner);
+        }
+      }
+      return parsed;
+    } catch {
+      const cleaned = trimmed
+        .replace(/^```(?:json)?\s*/i, '')
+        .replace(/```$/i, '')
+        .trim()
+        .replace(/,\s*([}\]])/g, '$1');
+      const parsed = JSON.parse(cleaned);
+      if (typeof parsed === 'string') {
+        const inner = parsed.trim();
+        if ((inner.startsWith('[') && inner.endsWith(']')) || (inner.startsWith('{') && inner.endsWith('}'))) {
+          return this.parseJsonLenient(inner);
+        }
+      }
+      return parsed;
+    }
+  }
+}
+

package/src/app/providers/url-preview.service.ts

@@ -0,0 +1,82 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { AppConfigService } from './app-config.service';
+import { Globals } from '../utils/globals';
+
+export type UrlPreviewItem = {
+  url: string;
+  title?: string;
+  description?: string;
+  image?: string;
+  siteName?: string;
+  favicon?: string;
+  favicon_hd?: string;
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UrlPreviewService {
+  constructor(
+    private http: HttpClient,
+    private appConfigService: AppConfigService,
+    private g: Globals
+  ) {}
+
+  async previewUrls(urls: string[]): Promise<UrlPreviewItem[]> {
+    const apiUrl = this.appConfigService.getConfig()?.apiUrl;
+    const projectId = this.g.projectid;
+
+    const cleaned = (urls || []).map((u) => (u || '').trim()).filter(Boolean).slice(0, 10);
+    if (!apiUrl || !projectId || cleaned.length === 0) return [];
+
+    const base = apiUrl.endsWith('/') ? apiUrl : apiUrl + '/';
+    const url = `${base}${projectId}/url-preview`;
+
+    const token = this.g.tiledeskToken;
+    const headers = new HttpHeaders({
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: token || ''
+    });
+
+    const body = { urls: cleaned };
+
+    try {
+      const res = await firstValueFrom(
+        this.http.post<any>(url, body, { headers })
+      );
+
+      // Expected response:
+      // [
+      //   { url: "...", success: true, data: { url,title,description,image,siteName,... } },
+      //   ...
+      // ]
+      // But we stay liberal and accept some alternative wrappers.
+      const items: any[] = Array.isArray(res)
+        ? res
+        : (Array.isArray(res?.items) ? res.items : (Array.isArray(res?.data) ? res.data : []));
+
+      return (items || [])
+        .filter((x) => x && typeof x === 'object')
+        .filter((x) => x.success !== false) // keep true/undefined, drop explicit failures
+        .map((x) => {
+          const d = x.data && typeof x.data === 'object' ? x.data : x;
+          return {
+            url: (d.url || x.url || x.link || '').toString(),
+            title: typeof d.title === 'string' ? d.title : (typeof x.title === 'string' ? x.title : undefined),
+            description: typeof d.description === 'string' ? d.description : (typeof x.description === 'string' ? x.description : undefined),
+            image: typeof d.image === 'string' ? d.image : (typeof x.image === 'string' ? x.image : undefined),
+            siteName: typeof d.siteName === 'string' ? d.siteName : undefined,
+            favicon: typeof d.favicon === 'string' ? d.favicon : (typeof x.favicon === 'string' ? x.favicon : undefined),
+            favicon_hd: typeof d.favicon_hd === 'string' ? d.favicon_hd : (typeof x.favicon_hd === 'string' ? x.favicon_hd : undefined)
+          } as UrlPreviewItem;
+        })
+        .filter((x) => !!x.url);
+    } catch {
+      return [];
+    }
+  }
+}
+

package/src/app/utils/json-sources-utils.ts

@@ -0,0 +1,27 @@
+import { JsonSourceItem } from 'src/app/component/message/json-sources/json-sources.component';
+
+export function extractUrlsFromJsonSources(sources: JsonSourceItem[] | null | undefined): string[] {
+  return (sources || [])
+    .map((s) => (s?.link || '').trim())
+    .filter(Boolean);
+}
+
+export function mergeJsonSourcesMissingFields(
+  base: JsonSourceItem[],
+  previews: JsonSourceItem[]
+): JsonSourceItem[] {
+  const byUrl = new Map(previews.map((p) => [p.link, p]));
+  return base.map((cur) => {
+    const p = cur?.link ? byUrl.get(cur.link) : undefined;
+    if (!p) return cur;
+    return {
+      ...cur,
+      title: cur.title || p.title,
+      description: cur.description || p.description,
+      image: cur.image || p.image,
+      favicon: cur.favicon || p.favicon,
+      favicon_hd: cur.favicon_hd || p.favicon_hd
+    };
+  });
+}
+

package/src/app/utils/url-utils.ts

@@ -0,0 +1,98 @@
+export function extractUrlsFromText(text?: string, maxUrls = 20): string[] {
+  if (!text) return [];
+  const input = text.toString();
+  // Match candidates:
+  // - https?://...
+  // - www....
+  // - naked domains like google.it/path
+  // We later normalize + validate.
+  const candidateRegex =
+    /\b(?:https?:\/\/[^\s<>"'`)\]]+|www\.[^\s<>"'`)\]]+|[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)+[^\s<>"'`)\]]*)/gi;
+  const matches = input.match(candidateRegex) || [];
+
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const raw of matches) {
+    const normalized = normalizeAndValidateUrlCandidate(raw);
+    if (!normalized) continue;
+    if (seen.has(normalized)) continue;
+    seen.add(normalized);
+    out.push(normalized);
+    if (out.length >= maxUrls) break;
+  }
+  return out;
+}
+
+function normalizeAndValidateUrlCandidate(candidate: string): string | null {
+  if (!candidate) return null;
+  let s = candidate.trim();
+
+  // Drop surrounding punctuation/brackets commonly attached in text
+  s = s.replace(/^[("'<\[]+/, '').replace(/[)"'>\]]+$/, '');
+  // Drop trailing punctuation
+  s = s.replace(/[.,;:!?]+$/g, '').trim();
+  if (!s) return null;
+
+  // Reject emails quickly
+  if (s.includes('@')) return null;
+
+  // Add scheme if missing
+  if (/^www\./i.test(s)) {
+    s = `https://${s}`;
+  } else if (!/^https?:\/\//i.test(s)) {
+    s = `https://${s}`;
+  }
+
+  try {
+    const url = new URL(s);
+    const hostname = url.hostname.toLowerCase();
+
+    // must look like a real domain: contain a dot and a plausible TLD
+    if (!hostname.includes('.')) return null;
+    const tld = hostname.split('.').pop() || '';
+    if (tld.length < 2) return null;
+    if (!/^[a-z0-9-]+$/.test(tld)) return null;
+
+    // normalize: remove default port and trailing slash when path is '/'
+    url.hash = ''; // do not include fragments in "identity"
+    if (url.pathname === '/') url.pathname = '';
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Best-effort "registrable domain" extractor.
+ * Examples:
+ * - "docs.example.com" -> "example.com"
+ * - "www.example.co.uk" -> "example.co.uk"
+ *
+ * This is a heuristic (no publicsuffix list) but works well for common cases.
+ */
+export function getTopLevelDomainFromHostname(hostname: string): string {
+  const host = (hostname || '').trim().toLowerCase().replace(/\.+$/, '');
+  const parts = host.split('.').filter(Boolean);
+  if (parts.length <= 2) return host;
+
+  const tld = parts[parts.length - 1];
+  const sld = parts[parts.length - 2];
+
+  // Heuristic for common ccTLD second-level domains (co.uk, com.au, etc.)
+  const commonSecondLevel = new Set(['co', 'com', 'org', 'net', 'gov', 'ac', 'edu']);
+  const isCcTld = tld.length === 2;
+  if (isCcTld && commonSecondLevel.has(sld) && parts.length >= 3) {
+    return parts.slice(-3).join('.');
+  }
+  return parts.slice(-2).join('.');
+}
+
+export function getTopLevelDomainFromUrl(url: string): string {
+  try {
+    const hostname = new URL(url).hostname.replace(/^www\./, '');
+    return getTopLevelDomainFromHostname(hostname);
+  } catch {
+    return '';
+  }
+}
+

package/src/assets/twp/chatbot-panel.html

@@ -508,7 +508,9 @@
             customAttributes: { sound: false },
             displayOnDesktop: true,
             displayOnMobile: true,
-            soundEnabled: false
+            soundEnabled: false,
+            onPageChangeVisibilityDesktop: 'open',
+            onPageChangeVisibilityMobile: 'open',
             // autostart: false
 
         };

package/src/chat21-core/utils/constants.ts

@@ -56,6 +56,10 @@ export const TYPE_MSG_FILE = 'file';
 export const TYPE_MSG_BUTTON = 'button';
 export const TYPE_MSG_EMAIL = 'email';
 export const TYPE_MSG_FORM = 'form';
+export const TYPE_MSG_URL_PREVIEW = 'url_preview';
+
+export const JSON_SOURCE_FIELD_URL   = 'source_name';
+export const JSON_SOURCE_FIELD_TITLE = 'source_file_name';
 
 export const MAX_WIDTH_IMAGES = 230;
 export const MIN_WIDTH_IMAGES = 130;

package/src/chat21-core/utils/utils-message.ts

@@ -6,9 +6,11 @@ import {
   MESSAGE_TYPE_MINE,
   MESSAGE_TYPE_OTHERS,
   MAX_WIDTH_IMAGES,
+  MIN_WIDTH_IMAGES,
   INFO_MESSAGE_TYPE,
   CHANNEL_TYPE,
-  MESSAGE_TYPE_PRIVATE
+  MESSAGE_TYPE_PRIVATE,
+  TYPE_MSG_URL_PREVIEW
 } from '../../chat21-core/utils/constants';
 /** */
 export function isCarousel(message: any) {
@@ -48,6 +50,13 @@ export function isAudio(message: any) {
   return false;
 }
 
+export function isJsonSources(message: any) {
+  if (message && message.type && message.type === 'url_preview') {
+    return true;
+  }
+  return false;
+}
+
 /** */
 export function isInfo(message: any) {
     if (message && message.attributes && (message.attributes.subtype === 'info' || message.attributes.subtype === 'info/support')) {
@@ -91,10 +100,19 @@ export function isSameSender(messages, senderId, index):boolean{
 }
 
 export function isLastMessage(messages, idMessage):boolean {
-  if (idMessage === messages[messages.length - 1].uid) {
-    return true;
-  }
-  return false;
+  // url_preview messages are auxiliary (citations card): they must not "steal"
+  // last-message status from the preceding interactive message, otherwise its
+  // text/action buttons would disappear as soon as a url_preview arrives.
+  const interactive = (messages || []).filter((m: any) => !isUrlPreviewMessage(m));
+  const last = interactive[interactive.length - 1] || messages[messages.length - 1];
+  return !!last && idMessage === last.uid;
+}
+
+function isUrlPreviewMessage(m: any): boolean {
+  if (!m) return false;
+  return m.type === TYPE_MSG_URL_PREVIEW
+    || m.metadata?.type === TYPE_MSG_URL_PREVIEW
+    || m.attributes?.type === TYPE_MSG_URL_PREVIEW;
 }
 
 export function isFirstMessage(messages, senderId, index):boolean{
@@ -314,7 +332,21 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.type = msg['type']
   message.isSender = isSender(message.sender, currentUserId)
   message.attributes = { ...conversation.attributes, ...msg['attributes']}
-  
 
   return message as MessageModel
 }
+
+export function calcImageSize(metadata: any): { width: number; height: number } {
+  const size = { width: metadata.width, height: metadata.height };
+  if (!metadata.width) return size;
+  if (metadata.width <= 55) {
+    const ratio = metadata.width / metadata.height;
+    size.width = MIN_WIDTH_IMAGES;
+    size.height = MIN_WIDTH_IMAGES / ratio;
+  } else if (metadata.width > MAX_WIDTH_IMAGES) {
+    const ratio = metadata.width / metadata.height;
+    size.width = MAX_WIDTH_IMAGES;
+    size.height = MAX_WIDTH_IMAGES / ratio;
+  }
+  return size;
+}

package/.github/workflows/build.yml

@@ -1,22 +0,0 @@
-name: Build
-on:
-  push:
-    branches:
-      - master # The default branch
-      - (branch|release)-.*   # The other branches to be analyzed
-      - (features|release)/.*
-  pull_request:
-    types: [opened, synchronize, reopened]
-jobs:
-  sonarcloud:
-    name: SonarCloud
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
-      - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}