@chat21/chat21-web-widget 5.1.0 → 5.1.2-rc6

package/CHANGELOG.md

@@ -6,7 +6,42 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.1.0
+
+# 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-rc34
+- **bug-fixed**: css fixed carousel
 
 # 5.1.0-rc33
 - **changed**: updated "marked library" from 4.0.16 to 16.3.0 - enabled list and table

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0",
+  "version": "5.1.2-rc6",
   "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,17 +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.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-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/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: 10px 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 {

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

@@ -3,33 +3,38 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize2: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
-    --fontFamily: #{var(--button-in-msg-font-family)};
+    --font-family: #{var(--button-in-msg-font-family)};
+    --buttonBorderColor: #{var(--button-border-color)};
+    --buttonColor: #{var(--button-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
 }
 
 .button-in-msg {
     padding: var(--padding);
-    // position: relative;
-    // max-width: var(--max-width);
+    position: relative;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
-    border-radius: 20px;
-    margin: 3px;
-    background: var(--backgroundColor);
+    border: 1px solid var(--buttonBorderColor);
+    background: var(--buttonBackgroundColor);
+    font-family: var(--font-family);
+    font-size: var(--buttonFontSize2);
+    color: var(--textColor);
     overflow: hidden;
-    font-family: var(--fontFamily);
-    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
-    // // white-space: nowrap;
+    white-space: nowrap;
     word-wrap: break-word;
-    letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor);
     line-height: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    padding: 10px 16px;
+    margin: 3px;
+    transition: background-color .2s ease;
 }
 
 .action {
@@ -39,7 +44,7 @@
     &:hover {
         color: var(--hoverTextColor);
         background:  var(--hoverBackgroundColor);
-        transform: scale(1.05);
+        // transform: scale(1.05);
         .icon-button-action {
             svg {
                 fill: var(--hoverTextColor);

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

@@ -3,32 +3,39 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize2: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
+    --buttonBorderColor: #{var(--button-border-color)};
+    --buttonColor: #{var(--button-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
 }
 
+
 .button-in-msg {
     padding: var(--padding);
     position: relative;
-    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor);
-    border-radius: 20px;
-    margin: 3px;
-    background: var(--backgroundColor);
-    overflow: hidden;
+    border: 1px solid var(--buttonBorderColor);
+    background: var(--buttonBackgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize);
+    font-size: var(--buttonFontSize2);
+    color: var(--textColor);
+    overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
-    letter-spacing: -0.24px;
+    word-wrap: break-word;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor);
     line-height: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    padding: 10px 16px;
+    margin: 3px;
+    transition: background-color .2s ease;
 }
 
 .url {
@@ -52,7 +59,7 @@
     &:hover {
         color: var(--hoverTextColor);
         background:  var(--hoverBackgroundColor);
-        transform: scale(1.05);
+        // transform: scale(1.05);
         .icon-button-action, .icon-button-action-self {
             svg {
                 fill: var(--hoverTextColor);

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

@@ -3,34 +3,43 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize2: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
+    --buttonBorderColor: #{var(--button-border-color)};
+    // --buttonColor: #{var(--buttonColor)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
+    --buttonColor: #{var(--button-color)};
 }
 
 
 .button-in-msg {
     padding: var(--padding);
     position: relative;
-    // max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--textColor); //$blue
-    border-radius: 20px;
-    margin: 3px;
-    background: var(--backgroundColor);
-    overflow: hidden;
+    border: 1px solid var(--buttonBorderColor);
+    background: var(--buttonBackgroundColor);
+    // background: var(--backgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize);
+    font-size: var(--buttonFontSize2);
+    // color: var(--buttonColor);
+    color: var(--textColor);
+    overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     // white-space: nowrap;
     word-wrap: break-word;
-    letter-spacing: -0.24px;
+    // letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--textColor); //$blue
     line-height: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+    padding: 10px 16px;
+    margin: 3px;
+    transition: background-color .2s ease;
 }
 
 .text {
@@ -40,7 +49,7 @@
     &:hover {
         color: var(--hoverTextColor);
         background: var(--hoverBackgroundColor);
-        transform: scale(1.05);
+        // transform: scale(1.05);
         .icon-button-action {
             svg {
                 fill: var(--black);

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

@@ -7,7 +7,8 @@
     <div class="carousel">
         <!-- <div class="card" style="width: 17px;"></div> -->
         <div class="card" *ngFor="let card of gallery; let i = index">
-            <div [style.opacity]="i+1 === activeElement? 1: 0.5">
+            <!-- <div [style.opacity]="i+1 === activeElement? 1: 0.5"> -->
+            <div>
                 <div class="card-image" *ngIf="card?.preview?.src !== ''">
                     <img [src]="card?.preview?.src" alt="img" draggable="false">
                 </div>

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

@@ -3,7 +3,7 @@
     --textColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --buttonFontSize: #{var(--button-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
     --fontFamily: #{var(--font-family)};
 
@@ -54,7 +54,7 @@
     display: grid;
     align-items: start;
     grid-auto-flow: column;
-    grid-auto-columns: calc((100% / 3) - 12px);
+    // grid-auto-columns: calc((100% / 3) - 12px);
     // overflow-x: auto;
     overflow-x: hidden;
     scroll-snap-type: x mandatory;
@@ -85,16 +85,15 @@
     align-items: center;
 }
 .carousel .card { 
-    // padding: 0px 5px;
     scroll-snap-align: start;
     width: var(--cardWidth);
     background: rgb(255, 255, 255);
     list-style: none;
     cursor: pointer;
-    // padding-bottom: 15px;
     flex-direction: column;
     border-radius: 8px;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.23);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.04);
 }
 .carousel .card .card-image {
     height: 150px;
@@ -143,24 +142,33 @@
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
-    padding: 0 20px 30px;
-
+    padding: 20px 20px;
     .card-title{
+        // word-wrap: break-word;
+        // font-size: 13px;
+        // font-weight: 600;
+        // line-height: 20px;
+        // // margin-top: 12px;
+        // white-space: pre-wrap;
+        // width: 100%;
         word-wrap: break-word;
-        font-size: 16px;
-        font-weight: 600;
-        line-height: 20px;
-        margin-top: 12px;
-        white-space: pre-wrap;
-        width: 100%;
+        font-size: 1.1em;
+        font-weight: 500;
+        font-family: var(--font-family);
+        color: #333;
     }
 
     .card-description{
+        // word-wrap: break-word;
+        // font-size: 16px;
+        // line-height: 20px;
+        // margin-top: 12px;
+        // white-space: pre-wrap;
         word-wrap: break-word;
-        font-size: 16px;
-        line-height: 20px;
-        margin-top: 12px;
+        font-size: 1.0em;
+        margin-top: 6px;
         white-space: pre-wrap;
+        font-weight: 300;
     }
 
 }
@@ -190,7 +198,7 @@
         -ms-flex-align: center;
         align-items: center;
         justify-content: center;
-        border-top: 1px solid var(--textColor);
+        border-top: 1px dashed rgba(0, 0, 0, 0.08);
         cursor: pointer;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -218,7 +226,7 @@
         &:hover {
             color: var(--hoverTextColor);
             background:  var(--hoverBackgroundColor);
-            // transform: scale(1.05);
+            transform: scale(1.05);
             .icon-button-action {
                 svg {
                     fill: var(--hoverTextColor);
@@ -270,12 +278,12 @@
 }
 @media screen and (max-width: 900px) {
 .wrapper .carousel {
-    grid-auto-columns: calc((100% / 2) - 9px);
+    // grid-auto-columns: calc((100% / 2) - 9px);
 }
 }
 @media screen and (max-width: 600px) {
 .wrapper .carousel {
-    grid-auto-columns: var(--cardWidth);
+    // grid-auto-columns: var(--cardWidth);
     // grid-auto-columns: 17px repeat(var(--cardWidth)) 17px;
 }
 }

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

@@ -1,6 +1,3 @@
 <p  #messageEl class="message_innerhtml marked" 
     [innerHTML]="printMessage(text, messageEl, this) | marked" 
     [style.color]="color"></p>
-<!-- [style.font-size]="fontSize"></p> -->
-<!-- [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked"  -->
-

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

@@ -3,11 +3,15 @@
 
     <span *ngFor="let button of buttons | slice:0:limit" class="div-button">
       
+      <!-- 
+      // bubbleReceivedBackground
+      // buttonBackgroundColor 
+      -->
       <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
+        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -17,7 +21,7 @@
       <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
         [button]="button"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
+        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -28,7 +32,7 @@
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
+        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"

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

@@ -1,11 +1,12 @@
 #buttons-in-message {
     text-align: right;
     display: block;
-    margin-right: 16px; //align attachment-buttons to bubble sent message
+    // margin-right: 16px; //align attachment-buttons to bubble sent message
     height: auto;
     // width: 85%;
     max-width: 95%;
-    float: right;
+    float: left;
+    padding-left: calc(var(--avatar-width) + 10px);
 
     .buttons-wrapper {
         margin-top: 0px;

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

@@ -2,7 +2,7 @@
 
 <button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right" 
     *ngIf="g.isLogged == true" 
-    [ngStyle]="{ 'background-color': g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
+    [style]="{ 'background-color': g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="onSendPressed($event)"
     tabindex="1000" 
     aria-label="    apri chat"
@@ -12,7 +12,7 @@
     <!-- [@enterBubbleAnimation] -->
     <div class="launcher-button rotate-center" >
         <!-- <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto'}"> -->
-        <svg role="img" [ngStyle]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+        <svg role="img" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
             <!-- <path fill="none" d="M0 0h24v24H0V0z" />
             <path d="M33.57,31A4.58,4.58,0,0,0,29,35.57V58.3a1.94,1.94,0,0,0,3.32,1.38l3-3a.29.29,0,0,1,.21-.09H56.43A4.58,4.58,0,0,0,61,52V35.57A4.58,4.58,0,0,0,56.43,31Z" /> -->

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

@@ -10,21 +10,29 @@ export class MarkedPipe implements PipeTransform {
   transform(value: any): any {
     const renderer = new marked.Renderer();
     renderer.link = function({ href, title, tokens }) {
-        const text = tokens.map(token => token.raw).join('');
-        const link = marked.Renderer.prototype.link.call(this, href, title, text);
-        return link.replace('<a', '<a target="_blank" ');
+      const text = tokens
+        ? tokens.map(token => token.raw).join('')
+        : href; // fallback se tokens non c'è
+      if (!href) return text;
+
+      return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
     };
+
     marked.setOptions({
-        renderer: renderer,
-        gfm: true,
-        breaks: true
+      renderer,
+      gfm: true,
+      breaks: true
     });
+
     if (value && value.length > 0) {
-      const text = marked(value);
-      return text;
+      try {
+        return marked.parse(value);
+      } catch (err) {
+        console.error('Errore nel parsing markdown:', err);
+        return value;
+      }
     }
     return value;
   }
 
-
 }

package/src/app/sass/_variables.scss

@@ -19,10 +19,14 @@
     --col-msg-sent: #ffffff;
 
     --border-radius-bubble-message: 20px;
-    --button-in-msg-font-size: 15px;
+    --button-in-msg-font-size: 13px;
     --button-in-msg-font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --button-in-msg-max-width: 280px;
     --button-in-msg-padding: 8px 16px;
+    --button-color: #5c6c73;
+    --button-background-color: #f5f5f5; // #f9fcff;
+    --button-border-color: #0000000f; //#e4ebf2; 
+    --button-font-size: 13px;
 
     --max-width-images: 230px; //change also MAX_WIDTH_IMAGES in constants.ts
 
@@ -42,8 +46,8 @@
     --content-background-color: #fff;
     --content-text-color: var(--black);
 
-    --avatar-height: 40px;
-    --avatar-width: 40px;
+    --avatar-height: 20px;
+    --avatar-width: 20px;
 
 
     --font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif; //Mulish, sans-serif;

package/src/app/utils/globals.ts

@@ -366,7 +366,7 @@ export class Globals {
     /** set the text color of bubble sent message */
     this.bubbleSentTextColor = convertColorToRGBA('#ffffff', 100); //'#ffffff'
     /** set the background of bubble received message */
-    this.bubbleReceivedBackground= convertColorToRGBA('#f0f2f7', 100); //#f7f7f7;
+    this.bubbleReceivedBackground= convertColorToRGBA('#f5f5f5', 100); //#f7f7f7; //#f0f2f7 //#f5f5f5
     /** set the text color of bubble received message */
     this.bubbleReceivedTextColor = convertColorToRGBA('#06132b', 100); //#1a1a1a
     /** set the text size of bubble messages */

package/src/app/utils/utils.ts

@@ -418,6 +418,8 @@ function getMimeTypeFromExtension(extension: string): string {
       '.txt': 'text/plain',
       '.doc': 'application/msword',
       '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      '.xls': 'application/vnd.ms-excel',
       '.wav' : 'audio/wav'
       // Aggiungi altri tipi MIME se necessario
   };

package/src/iframe-style.css

@@ -16,6 +16,7 @@
     display: none;
     z-index: 3000000000; /*999999*/; 
 }
+
 #tiledesk-container.open.overlay--popup {
     background-color: rgba(0, 0, 0, 0.4);
     position: absolute;
@@ -38,6 +39,7 @@
     display: block;
     position: fixed;
     max-height: calc(100% - 50px);
+    border-radius: 16px;
 }
 
 #tiledeskdiv.fullscreen {
@@ -50,19 +52,33 @@
 }
 
 #tiledeskdiv.top-size {
-    position: fixed;
+    /* transition: width 50ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
+    position: relative;
+    margin: auto;
     top: 0;
     bottom: 0;
-    left: 50%;
-    /* width: calc( var(--iframeMaxWidth) + 180px); */
+    left: 0!important;
+    right: 0!important;
     height: 100%; /*var(--iframeMaxHeight);*/
     /* transform: translate(-50%, -50%);   */
-    transform: translate(-50%, 0%);  
+    /* transform: translate(-50%, 0%);   */
     width: 100%;
     max-width: 1024px;
     max-height: 100%;
+
+    transition: 
+    width 300ms, 
+    height 300ms, 
+    max-height 300ms, 
+    transform 300ms cubic-bezier(0, 1.2, 1, 1), 
+    opacity 300ms ease-out;
+    /* per migliorare le prestazioni quando si usa transform */
+    will-change: transform, opacity, width, height;
 }
- 
+
+/* #tiledesk-container.open #tiledeskdiv.top-size #tiledeskiframe {
+    border-radius: unset;
+} */
 
 @keyframes right-animate {
     0% {
@@ -82,6 +98,7 @@
     left: auto; /* NEW DEPA */ 
     top:auto;
     transform: none;
+    transition: none;
 }
 #tiledesk-container.closed #tiledeskdiv.callout {
     /* width: 400px;
@@ -112,12 +129,21 @@
 #tiledesk-container.open #tiledeskiframe {
     display: block;
     /*width: 376px;*/
-}
-#tiledesk-container.open #tiledeskdiv.shadow {
+    border-radius: 16px;
     transition: box-shadow 0.8s ease-in;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
 }
+/* 
+#tiledesk-container.open #tiledeskdiv.shadow {
+    transition: box-shadow 0.8s ease-in;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px;
+} 
+*/
 
+#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;