@chat21/chat21-web-widget 5.1.1-rc1 → 5.1.4

package/CHANGELOG.md

@@ -6,9 +6,59 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+
+# 5.1.4
+
+# 5.1.3-rc1
+- **changed** Check if the uploaded file extension directly matches one of those allowed in the control panel (e.g. .xls)
+
+# 5.1.3
+
+# 5.1.2-rc9
+- **added** .xls and .xlsx to file Upload Accept
+
+# 5.1.2-rc8
+- **bug-fixed**: css margin icon
+- **added**: added text verification to delete dangerous patterns
+
+# 5.1.2-rc7
+- **bug-fixed**: ctest button color (#ffffff)
+
+# 5.1.2-rc6
+- **bug-fixed**: cannot upload xlsx files
+
+# 5.1.2-rc5
+- **bug-fixed**: css buttons and bubble sender 
+
+# 5.1.2-rc4
+- **changed**: css sender fullname 
+
+# 5.1.2-rc3
+- **changed**: disabled badge on launcher-button
+- **bug-fixed**: fullscreen widget position
+- **bug-fixed**: handleIframeHeight disappears when the widget is closed and a new message arrives
+- **changed**: changed avatar size
+
+# 5.1.2-rc2
+- **bug-fixed**: set css carousel
+- **changed**: set css top-size
+
+# 5.1.2-rc1
+- **bug-fixed**: set left alignment, border-round as uipath, removed animation on over
+- **changed**: Leave the same text area in the intermediate size
+- **bug-fixed**: shadow that appears suddenly
+- **bug-fixed**: missing animation from intermediate to large
+- **changed**: reduce and update padding and resolution of text area icons
+- **bug-fixed**: check button padding in the header
+
+# 5.1.1-rc2
+- **bug-fixed**: marked update @types/marked
+
 # 5.1.1-rc1
 - **bug-fixed**: marked pipe not renders urls
 
+# 5.1.0
+
 # 5.1.0-rc34
 - **bug-fixed**: css fixed carousel
 

package/deploy_amazon_prod.sh

@@ -2,8 +2,18 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
+npm i
+
+cp src/environments/real_data/environment.prod.ts src/environments/environment.prod.ts
+
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
 ng build --configuration="prod" --aot=true
+##--base-href='./v5/' --output-hashing none
+
+### SET HASHING : START ###
+cp ./src/launch_template.js ./dist/browser/launch.js
+node ./src/build_launch.js
+### SET HASHING : END ###
 
 #### FIREBASE #####
 # cd dist
@@ -13,15 +23,19 @@ ng build --configuration="prod" --aot=true
 # cd ..
 
 # #### MQTT #####
-cd dist
+cd dist/browser
 # aws s3 sync . s3://tiledesk-widget/v5/latest/
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=300
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=300
-cd ..
-
+aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=86400 --exclude='launch.js' #8days
+aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=86400 --exclude='launch.js' #8days
+aws s3 sync . s3://tiledesk-widget/v6/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+cd ../..
 
 aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
+
+git restore src/environments/environment.pre.ts
+
 echo new version deployed $version on s3://tiledesk-widget/v5
 echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v5/index.html
 echo https://widget.tiledesk.com/v5/index.html
-echo https://widget.tiledesk.com/v5/$version/index.html
+echo https://widget.tiledesk.com/v5/$version/index.html

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.1-rc1",
+  "version": "5.1.4",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -32,7 +32,6 @@
     "@ctrl/ngx-emoji-mart": "^9.2.0",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
-    "@types/marked": "^4.0.3",
     "accept-language-parser": "^1.5.0",
     "bootstrap": "^5.1.3",
     "dayjs": "^1.11.7",
@@ -55,6 +54,7 @@
     "@angular/language-service": "^18.2.13",
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "~2.0.3",
+    "@types/marked": "^6.0.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "^3.8.0",

package/src/app/app.component.scss

@@ -484,11 +484,11 @@ chat-root {
         /* CSS BOX CONTAINER */
         #chat21-conversations {
             position: absolute;
-            left: 1px;
-            right: 1px;
-            top: 1px;
-            bottom: 1px;
-            border-radius: 16px;
+            left: 0px;
+            right: 0px;
+            top: 0px;
+            bottom: 0px;
+            // border-radius: 16px;
             overflow: hidden;
             background-color: transparent;
             // border: 1px solid #cccccc; //NEW GAB
@@ -510,9 +510,10 @@ chat-root {
                 border-radius: 0px;
             }
             &.shadow{
-                transition: box-shadow 0.8s ease-in;
-                box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
+                // transition: box-shadow 0.8s ease-in;
+                // box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
             }
+            
         }
 
 
@@ -620,8 +621,9 @@ chat-root {
                 position: absolute;
                 top: 0;
                 left: 0;
-                width: 100%;
+                width: calc(100% - 18px);
                 height: 100%;
+                padding: 0 9px;
 
                 .c21-header-button{
                     display: block;
@@ -690,7 +692,6 @@ chat-root {
         padding: 0px;
         margin: 0px auto;
         overflow: auto;
-        
         .c21-body-container {
             position: absolute;
             top: 0;

package/src/app/app.component.ts

@@ -134,6 +134,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     public uploadService: UploadService
   ){}
 
+
+
+
     ngOnInit(): void {
         this.logger.info('[APP-CONF]---------------- ngOnInit: APP.COMPONENT ---------------- ')
         this.initWidgetParamiters();
@@ -168,9 +171,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     }
                 } else {
                     //widget closed
-
-                    let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
+                    let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew() 
                     that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
+                    // that.setBadgeNewConverstionNumber();
                 }
                 // that.manageTabNotification()
                 // });
@@ -213,14 +216,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                             that.g.isOpenNewMessage = true;
                             that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
                         }
-                        
-
                         let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                         that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
+                        // that.setBadgeNewConverstionNumber();
                         // }
                     }
-
                     that.triggerOnConversationUpdated(conversation);
+
                 } else {
                     this.logger.debug('[APP-COMP] oBSconversationChanged null: errorrr')
                     return;
@@ -260,6 +262,22 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.uploadService.initialize();
     }
 
+
+    saveBadgeNewConverstionNumber(){
+        let badgeNewConverstionNumber = this.conversationsHandlerService.countIsNew() 
+        this.appStorageService.setItem('hiddenConversationsBadge', badgeNewConverstionNumber)
+    }
+
+    setBadgeNewConverstionNumber(){
+        let badgeNewConverstionNumber = this.conversationsHandlerService.countIsNew();
+        let hiddenConversationsBadge = this.appStorageService.getItem('hiddenConversationsBadge')
+        let newNumberBadge = badgeNewConverstionNumber - hiddenConversationsBadge;
+        this.logger.debug('[APP-COMP] setBadgeNewConverstionNumber: ', newNumberBadge, badgeNewConverstionNumber, hiddenConversationsBadge)
+        this.g.conversationsBadge = newNumberBadge;
+        this.g.setParameter('conversationsBadge', newNumberBadge);
+    }
+
+
     private initWidgetParamiters(){
         const that = this;
         const obsSettingsService = this.globalSettingsService.obsSettingsService.subscribe((resp) => {
@@ -1578,6 +1596,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.debug('[APP-COMP] widgetclosed:::', this.g.conversationsBadge, this.conversationsHandlerService.countIsNew())
         // this.g.isOpen = false;
         // this.g.setIsOpen(false);
+        // this.setBadgeNewConverstionNumber();
         this.f21_close();
     }
 
@@ -1629,12 +1648,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             // }
             // this.g.startFromHome = true;
             this.triggerOnOpenEvent();
+            
         } else {
             this.triggerOnCloseEvent();
         }
         //change status to the widget
         this.g.setIsOpen(!this.g.isOpen);
         this.appStorageService.setItem('isOpen', this.g.isOpen);
+
+        // this.saveBadgeNewConverstionNumber();
     }
 
     /**
@@ -2013,8 +2035,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
     onWidgetSizeChange(mode: 'min' | 'max' | 'top') {
         var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv');
-        this.g.size = mode 
-        const parent = tiledeskDiv.parentElement as HTMLElement | null;
+        this.g.size = mode;
+        let parent = tiledeskDiv.parentElement as HTMLElement | null;
+
         if(mode==='max'){
             tiledeskDiv.classList.add('max-size')
             tiledeskDiv.classList.remove('min-size')
@@ -2158,16 +2181,21 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.styleMapConversation.set('buttonTextColor', this.g.buttonTextColor)
         this.styleMapConversation.set('buttonHoverBackgroundColor',this.g.buttonHoverBackgroundColor)
         this.styleMapConversation.set('buttonHoverTextColor', this.g.buttonHoverTextColor)
-
         this.styleMapConversation.set('iconColor', '#5f6368')
 
         this.el.nativeElement.style.setProperty('--button-in-msg-background-color', this.g.bubbleSentBackground)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
+        this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
+        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
         this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
-        this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
         
-        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
+
+        this.styleMapConversation.set('buttonBackgroundColor', this.g.bubbleReceivedBackground)
+        this.styleMapConversation.set('buttonTextColor', this.g.bubbleReceivedTextColor)
+        this.styleMapConversation.set('buttonHoverBackgroundColor',this.g.bubbleSentBackground)
+        this.styleMapConversation.set('buttonHoverTextColor', this.g.bubbleSentTextColor)
+
     }
 
 

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

@@ -89,9 +89,7 @@
     left: 0px;
     right: 0px;
     margin: 0px;
-    margin: 12px 8px;
-    // padding: 0;
-    
+    padding: 12px;
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
     background: white;
     min-height: 40px;
@@ -185,11 +183,7 @@ dialog:-internal-dialog-in-top-layer{
 
 @media(min-width:688px){
     
-    #chat21-footer{
-        left: 20%;
-        right: 20%;
-        margin: 12px 0px 30px;
-    }
+    
 
     :host-context(#chat21-conversations.full-screen-mode){
         --button-in-msg-padding: 10px 16px;
@@ -214,6 +208,21 @@ dialog:-internal-dialog-in-top-layer{
      
     }
 
+
+
+
+    ::ng-deep .chat21-sheet-content{
+        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
+    }
+    
+}
+
+@media(min-width:689px){
+    #chat21-footer{
+        left: 20%;
+        right: 20%;
+        margin: 12px 0px 30px;
+    }
     chat-conversation-footer ::ng-deep {
         .textarea-container {
             padding: 8px 24px;
@@ -229,9 +238,7 @@ dialog:-internal-dialog-in-top-layer{
             border-radius: 2rem;
             background-color: #ffffff;
             box-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #0000000a)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #0000009e));
-            transition: border-color 0.2s 
-            ease, box-shadow 0.2s 
-            ease;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease;
 
             .visible-text-area {
                 background-color: #ffffff;
@@ -242,11 +249,4 @@ dialog:-internal-dialog-in-top-layer{
             bottom: calc(100% + 6px);
         }
     }
-
-
-
-    ::ng-deep .chat21-sheet-content{
-        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
-    }
-    
 }

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

@@ -1414,7 +1414,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.log('[CONV-COMP] ----> FILE - (dragleave) drag ev ', event)
     if (event.dataTransfer && event.dataTransfer.files) {
       const files = event.dataTransfer.files;
-      const canUploadFile = checkAcceptedFile(files[0].type, this.g.fileUploadAccept)
+      const nameFile = files[0].name;
+      const typeFile = files[0].type;
+      const canUploadFile = checkAcceptedFile(nameFile, typeFile, this.g.fileUploadAccept)
       if(!canUploadFile){
         this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.g.fileUploadAccept)
         return;

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

@@ -157,6 +157,7 @@
                         margin-left: 4px;
                         max-width: calc(100% - 30px);
                         min-width: 14px;
+                        border: 0.1px solid #0000000f;
                     }
                     .message_innerhtml {
                         padding: 8px;

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

@@ -43,13 +43,19 @@
 }
 
 .chat21-textarea-button {
-    // fill: var(--icon-fill-color);
     color: var(--icon-fill-color);
     pointer-events: auto;
-    // height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
     cursor: initial;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    // background-color: aquamarine;
+    width: 25px;
+    height: 25px;
+
     &.active {
         opacity: 1;
         cursor: pointer;
@@ -58,7 +64,10 @@
         opacity: 0.3 !important;
         pointer-events: none !important;
         cursor: not-allowed !important;
-
+    }
+    span svg {
+        width: 20px;
+        height: 20px; 
     }
 }
 

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

@@ -138,19 +138,19 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         
         const that = this;
         if (event.target.files && event.target.files[0]) {
+          const nameFile = event.target.files[0].name;
+          const typeFile = event.target.files[0].type;
+          const size = event.target.files[0].size;
 
-          const canUploadFile = checkAcceptedFile(event.target.files[0].type, this.fileUploadAccept)
+          const canUploadFile = checkAcceptedFile(nameFile, typeFile, this.fileUploadAccept)
           if(!canUploadFile){
             this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.fileUploadAccept)
             this.isFilePendingToUpload = false;
             return;
           }
-
-          const nameFile = event.target.files[0].name;
-          const typeFile = event.target.files[0].type;
-          const size = event.target.files[0].size
+          
           const reader = new FileReader();
-            that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
+            // that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
             reader.addEventListener('load', function () {
               that.logger.debug('[CONV-FOOTER] addEventListener load', reader.result);
               that.isFileSelected = true;

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.ts

@@ -90,23 +90,48 @@ export class EyeeyeCatcherCardComponent implements OnInit {
       }
   }
 
+  // checkIsEmoji() {
+  //   let title = this.g.CALLOUT_TITLE_PLACEHOLDER.trim();
+  //   if (this.g.calloutTitle && this.g.calloutTitle !== '') {
+  //     title = this.g.calloutTitle.trim();
+  //   }
+  //   this.title = title;
+  //   const regex = emojiRegex();
+  //   let match: any;
+  //   // this.logger.debug('[EYEEYE-CATCHER-CARD]-->regex, emojiRegex', regex, emojiRegex)
+  //   while (match = regex.exec(title)) {
+  //     const emoji = match[0];
+  //     this.logger.debug('[EYEEYE-CATCHER-CARD]--> match', match)
+  //     if (title.indexOf(emoji) === 0) {
+  //       this.title = title.replace(emoji, '');
+  //       this.emoticon = emoji;
+  //     }
+  //     break;
+  //   }
+  // }
+
+
   checkIsEmoji() {
     let title = this.g.CALLOUT_TITLE_PLACEHOLDER.trim();
     if (this.g.calloutTitle && this.g.calloutTitle !== '') {
       title = this.g.calloutTitle.trim();
     }
+    
+    // Reset emoticon
+    this.emoticon = null;
     this.title = title;
-    const regex = emojiRegex();
-    let match: any;
-    // this.logger.debug('[EYEEYE-CATCHER-CARD]-->regex, emojiRegex', regex, emojiRegex)
-    while (match = regex.exec(title)) {
+    
+    // Regex per emoji Unicode (compatibile)
+    const regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/;
+    const match = title.match(regex);
+    
+    if (match) {
       const emoji = match[0];
-      this.logger.debug('[EYEEYE-CATCHER-CARD]--> match', match)
-      if (title.indexOf(emoji) === 0) {
-        this.title = title.replace(emoji, '');
-        this.emoticon = emoji;
-      }
-      break;
+      this.logger.debug('[EYEEYE-CATCHER-CARD]--> emoji trovata:', emoji);
+      
+      // Estrai la prima emoji trovata e rimuovila dal testo
+      this.title = title.replace(emoji, '').trim();
+      this.emoticon = emoji;
     }
   }
 
@@ -164,6 +189,3 @@ export class EyeeyeCatcherCardComponent implements OnInit {
 }
 
 
-export default function emojiRegex(): RegExp {
-  return /(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2700-\u27BF])|(?:\u24C2)|(?:[\u1F680-\u1F6FF])/g;
-}

package/src/app/component/home/home.component.scss

@@ -2,7 +2,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-
+    background-color: #ffffff;
     /*********  Animations **********/
     &.start-animation .fade-in-top {
         -webkit-animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.3s both;
@@ -242,8 +242,10 @@
                         line-height: 1.4;
                         color: var(--black);
                         overflow: hidden;
-                        -webkit-box-shadow: 0 4px 15px 0 var(--trasp-light-black), 0 1px 2px 0 var(--trasp-light-black);
-                        box-shadow: 0 4px 15px 0 var(--trasp-light-black), 0 1px 2px 0 var(--trasp-light-black);
+                        // -webkit-box-shadow: 0 4px 15px 0 var(--trasp-light-black), 0 1px 2px 0 var(--trasp-light-black);
+                        // box-shadow: 0 4px 15px 0 var(--trasp-light-black), 0 1px 2px 0 var(--trasp-light-black);
+
+                        box-shadow:rgba(0, 0, 0, 0.16) 0px 8px 36px 0px;
                         z-index: 20;
                         text-align: left;
 

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

@@ -142,16 +142,65 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }
     execute(commands[0])
+  }
+
+
+
+
 
+  private manageIframeHeight(retryCount = 0) {
+    const maxRetries = 5;
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        const element = this.messageListWRP.last?.nativeElement;
+        if (!element) {
+          this.retryIfNeeded(retryCount, maxRetries);
+          return;
+        }
+        const height = this.getElementHeight(element);
+        if (height === 0 && retryCount < maxRetries) {
+          this.retryIfNeeded(retryCount, maxRetries);
+        } else {
+          this.g.setWidgetPreviewContainerSize(0, height);
+        }
+      }, 100);
+    });
   }
 
-  private manageIframeHeight(){
-    setTimeout(() => {
-      if(this.messageListWRP.get(this.messages.length-1)){
-        let height = getComputedStyle(this.messageListWRP.get(this.messages.length-1).nativeElement).height
-        this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
-      }
-    }, 50);
+  private getElementHeight(element: HTMLElement): number {
+    // Forza il calcolo dell'altezza
+    const originalHeight = element.style.height;
+    element.style.height = 'auto';
+    let height = element.getBoundingClientRect().height;
+    // Prova diverse proprietà di altezza
+    if (height === 0) height = element.offsetHeight;
+    if (height === 0) height = element.scrollHeight;
+    if (height === 0) height = element.clientHeight;
+    // Se ancora 0, calcola l'altezza dai figli
+    if (height === 0) {
+      height = this.calculateHeightFromChildren(element);
+    }
+    // Ripristina l'altezza originale
+    element.style.height = originalHeight;
+    return height;
+  }
+
+  private calculateHeightFromChildren(element: HTMLElement): number {
+    let totalHeight = 0;
+    for (let i = 0; i < element.children.length; i++) {
+      totalHeight += element.children[i].getBoundingClientRect().height;
+    }
+    return totalHeight;
+  }
+
+  private retryIfNeeded(retryCount: number, maxRetries: number) {
+    if (retryCount < maxRetries) {
+      setTimeout(() => {
+        this.manageIframeHeight(retryCount + 1);
+      }, 100 * (retryCount + 1));
+    } else {
+      console.warn('Element not found after maximum retries');
+    }
   }
 
   isSameSender(senderId: string, index: number){
@@ -191,10 +240,13 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
 
   onElementRenderedFN(event){
     this.messageListWRP.forEach((item, index)=> {
+      console.log('messageListWRP ---------------------> ', item);
       setTimeout(() => {
         if(this.messageListWRP.get(index)){
-          let height = getComputedStyle(this.messageListWRP.get(index).nativeElement).height
-          this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
+          // let height = getComputedStyle(this.messageListWRP.get(index).nativeElement).height
+          // this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
+          let height = this.messageListWRP.get(this.messages.length-1).nativeElement.offsetHeight
+          this.g.setWidgetPreviewContainerSize(0, height)
         }
       }, 50);
     })

package/src/app/component/launcher-button/launcher-button.component.html

@@ -9,7 +9,7 @@
     aria-label="    apri chat"
     >
 
-    <div *ngIf="g.conversationsBadge>0 " class="c21-divBudge">{{g.conversationsBadge}}</div>
+    <!-- <div *ngIf="g.conversationsBadge>0" class="c21-divBudge">{{g.conversationsBadge}}</div> -->
 
     <!-- OPEN ICON -->
     <div *ngIf="!g.isOpen" class="launcher-button rotate-center" [@enterBubbleAnimation]>

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

@@ -2,7 +2,7 @@
 .c21-icon-avatar {
     position: relative;
     padding: 0;
-    margin: 0;
+    margin: 0px 0 0 0;
     height: var(--avatar-height);
     width: var(--avatar-width);
     min-height: var(--avatar-height);

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

@@ -16,7 +16,7 @@
 
     .message_sender_fullname{
         font-size: 12px;
-        font-weight: 600;
+        font-weight: 400;
     }
     
     img {