Merge commit '6b23df8d532fafbbda2300164911f4d1e3cd9f6b'

Author: Gabriele Panico

.gitignore

@@ -50,3 +50,4 @@ src/widget-config-docker.json
 src/widget-config-native-mqtt.json
 
 .angular/cache/
+docs/agents

CHANGELOG.md

@@ -6,12 +6,21 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+
+# 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-lock.json

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

package.json

@@ -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%;

src/app/app.component.scss

@@ -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);

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

@@ -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;

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

@@ -447,20 +447,19 @@ 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')
       }
       this.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
     }
     this.setFocusOnId('chat21-main-message-context');
     this.isStopRec= false;
+    this.resizeInputField();
   }
 
   /**

src/app/component/conversation-detail/conversation-footer/conversation-footer.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){

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

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