@chat21/chat21-web-widget 5.1.18 → 5.1.20

package/CHANGELOG.md

@@ -6,12 +6,23 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.20
+- **changed**: marked pipe do not render /n 
+
+# 5.1.19 
+- **bug fixed**: show bottom scroll button and unread message badge only when I'm not at the bottom of the page
+- **changed**: allow HTML code to be inserted into messages, but do not parse the code. Ensure coexistence with Markdown.
+- **bug fixed**: after sending a multi-line message, the text area remains open on multiple lines.
+- **bug fixed**: fixed widget animation when opened
+- **bug-fixed**: line-height in markdown
+- **bug-fixed**: when i move to top mode and close the widget, the balloon moves to the right
+- **changed**: saved the widget's size state to local storage. The parameter flow is (default → storage → settings → URL)
+
 # 5.1.18
 - **added**: Implemented Shadow DOM in the text component to isolate HTML and Markdown rendering in a safe and protected context
 - **changed**: Adapted text component styles to support Shadow DOM (removed ::ng-deep, added styles for common markdown elements)
 - **security**: HTML/Markdown content is now rendered in an isolated Shadow DOM, improving security and preventing interference with the rest of the application
 
-
 # 5.1.17
 - **bug-fixed**: set the maximum width on a message with iframe
 

package/package.json

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

package/src/app/app.component.scss

@@ -488,14 +488,11 @@ chat-root {
             right: 0px;
             top: 0px;
             bottom: 0px;
-            // border-radius: 16px;
             overflow: hidden;
             background-color: transparent;
-            // border: 1px solid #cccccc; //NEW GAB
             margin: 0px;
             padding: 0px;
-            // box-shadow:rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; //NEW GAB
-
+            opacity: 0;
             &.full-screen-mode {
                 width: 100%;
                 height: 100%;

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

@@ -298,6 +298,19 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       if (this.afConversationComponent) {
         this.afConversationComponent.nativeElement.focus();
       }
+      // Sync initial "scroll to bottom" button/badge visibility.
+      // The state is normally driven by real scroll events, but on first render
+      // we might not get any scroll event -> stale UI.
+      setTimeout(() => {
+        try {
+          const isAtBottom = this.conversationContent?.checkContentScrollPosition();
+          if (typeof isAtBottom === 'boolean') {
+            this.onScrollContent(isAtBottom);
+          }
+        } catch (e) {
+          this.logger.error('[CONV-COMP] initial scroll state sync error:', e);
+        }
+      }, 0);
       this.isButtonsDisabled = false;
     }, 300);
   }
@@ -1074,29 +1087,76 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
-  onWidgetSizeChange(mode: 'min' | 'max' | 'top'){
-    var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv');
-    this.g.size = mode 
+  onWidgetSizeChange(mode: any){
+    const normalize = (val: any): 'min' | 'max' | 'top' => {
+      const v = (typeof val === 'string') ? val.toLowerCase().trim() : '';
+      return (v === 'min' || v === 'max' || v === 'top') ? (v as any) : 'min';
+    };
+
+    const normalizedMode = normalize(mode);
+    const tiledeskDiv = this.g.windowContext?.window?.document?.getElementById('tiledeskdiv');
+    if(!tiledeskDiv){
+      this.g.size = normalizedMode;
+      this.isMenuShow = false;
+      return;
+    }
+
+    this.g.size = normalizedMode;
     const parent = tiledeskDiv.parentElement as HTMLElement | null;
-    if(mode==='max'){
+    if(normalizedMode==='max'){
+        this.restoreInlinePositionStylesForPopup(tiledeskDiv);
         tiledeskDiv.classList.add('max-size')
         tiledeskDiv.classList.remove('min-size')
         tiledeskDiv.classList.remove('top-size')
         if(parent) parent.classList.remove('overlay--popup');
-    } else if(mode==='min'){
+    } else if(normalizedMode==='min'){
+        this.restoreInlinePositionStylesForPopup(tiledeskDiv);
         tiledeskDiv.classList.add('min-size')
         tiledeskDiv.classList.remove('max-size')
         tiledeskDiv.classList.remove('top-size')
         if(parent) parent.classList.remove('overlay--popup');
-    } else if(mode=== 'top'){
+    } else if(normalizedMode=== 'top'){
+        // Remove inline positioning so CSS can control centering without needing `!important`.
+        // this.clearInlinePositionStylesForPopup(tiledeskDiv);
         tiledeskDiv.classList.add('top-size')
         tiledeskDiv.classList.remove('max-size')
         tiledeskDiv.classList.remove('min-size')
         if(parent) parent.classList.add('overlay--popup');
     }
+
+    // Persist user-driven size changes so, when `size` is not specified via URL/settings,
+    // GlobalSettingsService can restore it from storage (it already loads `size` from storage).
+    try{
+      this.appStorageService.setItem('size', normalizedMode);
+    }catch(e){
+      this.logger.warn('[CONV-COMP] onWidgetSizeChange > cannot persist size', e);
+    }
+
     this.isMenuShow = false;
   }
 
+  // private clearInlinePositionStylesForPopup(tiledeskDiv: HTMLElement) {
+  //   tiledeskDiv.style.removeProperty('left');
+  //   tiledeskDiv.style.removeProperty('right');
+  //   tiledeskDiv.style.removeProperty('top');
+  //   tiledeskDiv.style.removeProperty('bottom');
+  // }
+
+  private restoreInlinePositionStylesForPopup(tiledeskDiv: HTMLElement) {
+    const marginX = this.g.isMobile ? this.g.mobileMarginX : this.g.marginX;
+    const marginY = this.g.isMobile ? this.g.mobileMarginY : this.g.marginY;
+
+    if (this.g.align === 'left') {
+      tiledeskDiv.style.left = marginX;
+      tiledeskDiv.style.removeProperty('right');
+    } else {
+      tiledeskDiv.style.right = marginX;
+      tiledeskDiv.style.removeProperty('left');
+    }
+    tiledeskDiv.style.bottom = marginY;
+    tiledeskDiv.style.removeProperty('top');
+  }
+
 
   /** CALLED BY: conv-header component */
   onSignOutFN(event){

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

@@ -187,6 +187,10 @@ export class ConversationContentComponent implements OnInit {
       objDiv.parentElement.scrollTop = objDiv.scrollHeight;
       objDiv.style.opacity = '1';
       that.firstScroll = false;
+      // Keep parent state in sync even when scroll is programmatic.
+      // Without this, the "scroll to bottom" button/badge can remain visible
+      // because (scroll) event might not fire reliably for programmatic scrollTop.
+      that.onScrollContent.emit(true);
     }, 0);
   } catch (err) {
     this.logger.error('[CONV-CONTENT] scrollToBottom > Error :' + err);

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

@@ -192,9 +192,10 @@ textarea:active{
     max-height: 110px;
     min-height: auto;
     height: 20px;
-    padding: 0px 12px; //0px 40px 0px 70px; //NEW FOR EMOJII BUTTON
+    padding: 0px 12px;
     margin: 10px 0px 10px;
     border: none;
+    display: inline-block;
 
     &::-webkit-scrollbar {
         width: 6px;

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

@@ -447,13 +447,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   private restoreTextArea() {
-    // that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
-    this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context'));
-    this.textInputTextArea = ''; // clear the textarea
+    this.textInputTextArea = '';
     if (textArea) {
-      textArea.value = '';  // clear the textarea
-      textArea.placeholder = this.translationMap.get('LABEL_PLACEHOLDER');  // restore the placholder
+      textArea.value = '';
+      textArea.placeholder = this.translationMap.get('LABEL_PLACEHOLDER');
       if(textArea.style.height > this.HEIGHT_DEFAULT){
         document.getElementById('chat21-button-send').style.removeProperty('right')
       }
@@ -461,6 +459,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
     this.setFocusOnId('chat21-main-message-context');
     this.isStopRec= false;
+    this.resizeInputField();
   }
 
   /**

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

@@ -1 +1,5 @@
-<div id="htmlCode" #htmlCode [innerHTML]="htmlText | safeHtml"></div>
+<!--
+  Security: render HTML messages as plain text (no DOM interpretation).
+  This preserves the exact input (e.g. "<h1>...</h1>") including line breaks.
+-->
+<pre id="htmlCode" #htmlCode [textContent]="htmlText"></pre>

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

@@ -74,4 +74,13 @@
         overflow: hidden;
     }
 
+}
+
+/* Render raw HTML source safely */
+#htmlCode {
+    white-space: pre-wrap; /* preserve newlines, allow wrapping */
+    word-break: break-word;
+    margin: 0;
+    font-size: 1.4em;
+    line-height: 1.4em;
 }

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

@@ -65,6 +65,10 @@ p h1, p h2, p h3, p h4, p h5, p h6 {
     color: inherit; // Eredita il colore dal parent
 }
 
+.message_innerhtml.marked h1 {
+    line-height: normal;
+}
+
 p ul {
     margin-block-end: 0em;
     margin-block-start: 0em;

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

@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { marked } from 'marked';
 import { BLOCKED_DOMAINS } from '../utils/utils';
+import { htmlEntities } from 'src/chat21-core/utils/utils';
 
 
 @Pipe({
@@ -9,6 +10,32 @@ import { BLOCKED_DOMAINS } from '../utils/utils';
 
 export class MarkedPipe implements PipeTransform {
   transform(value: any): any {
+    // Security hardening:
+    // - Do not allow raw HTML from chat messages to be interpreted as DOM.
+    // - Keep Markdown working (marked will generate the needed HTML tags).
+    // This makes inputs like "<h1>Title</h1>" render exactly as typed.
+    const input =
+      typeof value === 'string'
+        ? value
+        : (value === null || value === undefined) ? '' : String(value);
+    
+    // Converti i \n letterali in newline reali prima di htmlEntities
+    // così il markdown con breaks: true li renderizzerà correttamente
+    const inputWithNewlines = input.replace(/\\n/g, '\n');
+    
+    // Proteggi i > usati per i blockquote markdown (all'inizio di riga)
+    // sostituendoli temporaneamente con un placeholder
+    const BLOCKQUOTE_PLACEHOLDER = '___MARKDOWN_BLOCKQUOTE___';
+    const protectedInput = inputWithNewlines.replace(/^(\s*)>/gm, (match, spaces) => {
+      return spaces + BLOCKQUOTE_PLACEHOLDER;
+    });
+    
+    // Applica htmlEntities (che codificherà tutti gli altri >)
+    let safeInput = htmlEntities(protectedInput);
+    
+    // Ripristina i > dei blockquote
+    safeInput = safeInput.replace(new RegExp(BLOCKQUOTE_PLACEHOLDER, 'g'), '>');
+
     const renderer = new marked.Renderer();
     renderer.link = function({ href, title, tokens }) {
       // Normalizza l'href per evitare falsi negativi
@@ -74,15 +101,15 @@ export class MarkedPipe implements PipeTransform {
       breaks: true
     });
 
-    if (value && value.length > 0) {
+    if (safeInput && safeInput.length > 0) {
       try {
-        return marked.parse(value);
+        return marked.parse(safeInput);
       } catch (err) {
         console.error('Errore nel parsing markdown:', err);
-        return value;
+        return safeInput;
       }
     }
-    return value;
+    return safeInput;
   }
 
 

package/src/app/sass/normalize.scss

@@ -40,6 +40,7 @@
   h1 {
     font-size: 2em;
     margin: 0.67em 0;
+    line-height: normal;
   }
   
   /* Grouping content

package/src/iframe-style.css

@@ -17,6 +17,24 @@
     z-index: 3000000000; /*999999*/; 
 }
 
+#tiledesk-container.open {
+    /*
+    Fade-in the whole container when the "open" class is added.
+    This avoids the initial "flash" while the widget is still small.
+    */
+    opacity: 0;
+    animation: tiledesk-container-fade-in 400ms ease-in both;
+    will-change: opacity;
+}
+
+@keyframes tiledesk-container-fade-in {
+    /* Stay invisible, then become visible very fast at the end */
+    0% { opacity: 0; }
+    80% { opacity: 0.15; }
+    92% { opacity: 0.30; }
+    100% { opacity: 1; }
+}
+
 #tiledesk-container.open.overlay--popup {
     background-color: rgba(0, 0, 0, 0.4);
     position: fixed;
@@ -57,8 +75,8 @@
     margin: auto;
     top: 0;
     bottom: 0;
-    left: 0!important;
-    right: 0!important;
+    left: 0;
+    right: 0;
     height: 100%; /*var(--iframeMaxHeight);*/
     /* transform: translate(-50%, -50%);   */
     /* transform: translate(-50%, 0%);   */
@@ -130,9 +148,20 @@
     display: block;
     /*width: 376px;*/
     border-radius: 16px;
+    /*
+    Fade-in: keep content transparent while the widget grows (width/height transition
+    lives on #tiledeskdiv.{min-size|max-size|top-size}), then show it near full size.
+    */
+    opacity: 0;
+    animation: tiledesk-iframe-fade-in 220ms ease-out 140ms both;
     transition: box-shadow 0.8s ease-in;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
 }
+
+@keyframes tiledesk-iframe-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
 /* 
 #tiledesk-container.open #tiledeskdiv.shadow {
     transition: box-shadow 0.8s ease-in;
@@ -140,11 +169,6 @@
 } 
 */
 
-#tiledesk-container.open #tiledeskdiv {
-    /* transition: box-shadow 0.8s ease-in;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; */
-}
-
 #tiledesk-container.closed #tiledeskiframe {
     display: block;
     box-shadow: none;

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "git.ignoreLimitWarning": true
-}