@chat21/chat21-web-widget 5.1.24-rc1 → 5.1.25-rc1

package/CHANGELOG.md

@@ -6,6 +6,12 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.25-rc1
+- **bug fixed**: attachment buttons in messages now respect the container max width and wrap/break long labels instead of being clipped
+
+# 5.1.24-rc2
+- **bug fixed**: minor fix in marked pipe to avoid rendering html tags
+
 # 5.1.24-rc1
 - **security**: hardened Markdown link rendering by blocking dangerous protocols (e.g. `javascript:`, `data:`, `vbscript:`) and preventing unsafe links from being rendered as anchors
 - **changed**: refactored `MarkedPipe` to simplify Markdown parsing, improve link rendering via a custom `marked` renderer, and streamline newline handling (`\\n` → `\n`)

package/package.json

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

package/src/app/component/message/buttons/action-button/action-button.component.scss

@@ -22,11 +22,10 @@
     font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     color: var(--buttonTextColor);
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-wrap: break-word;
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
     -webkit-font-smoothing: antialiased;
     line-height: 16px;
     font-weight: 500;

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -23,11 +23,11 @@
     font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     color: var(--buttonTextColor);
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-wrap: break-word;
+    max-width: 100%;
+    padding-right: 40px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
     -webkit-font-smoothing: antialiased;
     line-height: 16px;
     font-weight: 500;
@@ -42,15 +42,18 @@
     transition: background-color .6s ease;
     .icon-button-action {
         position: absolute;
-        top: -1px;
-        right: 1px;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
         svg {
             fill: var(--textColor);
         }
     }
     .icon-button-action-self{
         position: absolute;
-        right: 1px;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
         svg {
             fill: var(--textColor);
         }

package/src/app/component/message/buttons/text-button/text-button.component.scss

@@ -23,11 +23,10 @@
     font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     color: var(--buttonTextColor);
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-    text-overflow: ellipsis;
-    // white-space: nowrap;
-    word-wrap: break-word;
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
     // letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
     line-height: 16px;

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

@@ -4,9 +4,11 @@
     // margin-right: 16px; //align attachment-buttons to bubble sent message
     height: auto;
     // width: 85%;
-    max-width: 95%;
+    width: 100%;
+    max-width: 100%;
     float: left;
     padding-left: calc(var(--avatar-width) + 10px);
+    box-sizing: border-box;
 
     .buttons-wrapper {
         margin-top: 0px;
@@ -16,6 +18,7 @@
         // justify-content: flex-end;
         justify-content: flex-start;
         width: 100%;
+        max-width: 100%;
         border: none;
     }
 
@@ -24,6 +27,8 @@
         // overflow: hidden;
         // text-overflow: ellipsis;
         // min-width: inherit;
+        max-width: 100%;
+        min-width: 0;
         .button-in-msg {
             padding: 8px 16px!important;
         }

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

@@ -1,46 +1,66 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { marked } from 'marked';
+import { marked, Tokens } from 'marked';
 
 @Pipe({
   name: 'marked'
 })
 export class MarkedPipe implements PipeTransform {
 
-  transform(value: any): any {
-    // Convertiamo tutto in stringa sicura
+  transform(value: any): string {
+
     const input =
       typeof value === 'string'
         ? value
         : (value === null || value === undefined) ? '' : String(value);
 
-    // Converti \n letterali in newline reali
     const inputWithNewlines = input.replace(/\\n/g, '\n');
 
-    // Renderer custom solo per i link
     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;');
+    };
+
+    /* --------------------------------------------------
+       🔐 2. Link sicuri
+    -------------------------------------------------- */
     const originalLinkRenderer = renderer.link.bind(renderer);
 
-    // Lista protocolli / pattern pericolosi
-    const dangerousPatterns = [
+    const dangerousProtocols = [
       /^javascript:/i,
       /^data:/i,
       /^vbscript:/i
     ];
 
     renderer.link = function({ href, title, tokens }) {
+
       const normalized = (href || '').trim();
 
-      // Se il link è pericoloso, restituisci solo il testo
-      const isDangerous = dangerousPatterns.some(pattern => pattern.test(normalized));
+      const isDangerous = dangerousProtocols.some(pattern =>
+        pattern.test(normalized)
+      );
+
       if (isDangerous) {
         return tokens ? tokens.map(t => t.raw).join('') : href || '';
       }
 
-      // Altrimenti delega al renderer originale di marked
-      return originalLinkRenderer({ href, title, tokens });
+      const html = originalLinkRenderer({ href, title, tokens });
+
+      // aggiunge sicurezza ai link
+      return html.replace(
+        '<a ',
+        '<a target="_blank" rel="noopener noreferrer" '
+      );
     };
 
-    // Opzioni marked
     marked.setOptions({
       renderer,
       gfm: true,
@@ -48,9 +68,9 @@ export class MarkedPipe implements PipeTransform {
     });
 
     try {
-      return marked.parse(inputWithNewlines);
+      return marked.parse(inputWithNewlines) as string;
     } catch (err) {
-      console.error('Errore nel parsing markdown:', err);
+      console.error('Errore parsing markdown:', err);
       return inputWithNewlines;
     }
   }