@chat21/chat21-web-widget 5.1.6 → 5.1.7-rc7

package/.github/workflows/docker-community-push-latest.yml

@@ -1,10 +1,10 @@
 name: Docker Image Community latest CI
 
-on:	
-  push:	 
+on:  
+  push:  
     branches: [ master ]
-  pull_request:	
-    branches: [ master ]	
+  pull_request:  
+    branches: [ master ]  
 
 jobs:
   push_to_registry:
@@ -12,12 +12,22 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2	     
-      name: Check out the repo
-    - uses: docker/build-push-action@v1
-      with:	    
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-        repository: chat21/chat21-web-widget
-        push: true
-        tags: latest
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push multiarch Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: chat21/chat21-web-widget:latest

package/.github/workflows/docker-image-tag-community-tag-push.yml

@@ -3,20 +3,30 @@ name: Publish Docker Community image tags
 on:
   push:
     tags:
-      - '**'           # Push events to every tag including hierarchical tags like
-jobs:
+      - '**'  # Trigger su qualsiasi tag
 
+jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
+
     steps:
-     - name: Check out the repo
-       uses: actions/checkout@v2
-     - name: Push to Docker Hub
-       uses: docker/build-push-action@v1
-       with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
-        repository: chat21/chat21-web-widget
-        push: true
-        tag_with_ref: true
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push multiarch Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: chat21/chat21-web-widget:${{ github.ref_name }}

package/CHANGELOG.md

@@ -6,6 +6,32 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.7-rc7
+- **bug-fixed**: button new_conversation always appear. added subscription to conversationAdded
+
+# 5.1.7-rc6
+- **added**: Added MAX_ATTACHMENT_ERROR error message when uploading a file larger than 10 MB
+
+# 5.1.7-rc5
+- **bug-fixed**: bug fixed BUTTON STYLES
+
+# 5.1.7-rc4
+- **bug-fixed**: bug fixed widget fullscreen style
+
+# 5.1.7-rc3
+- **changed**: replace extractUrls
+
+# 5.1.7-rc2
+- **bug-fixed**: translations completed
+- **changed**: set wait to 0 if messages have already been read
+
+# 5.1.7-rc1
+- **changed**: replace fullname with firstname
+- **added**: added tooltip on attachment an emoji
+- **bug-fixed**: bug fixed button color
+- **bug-fixed**: bug fixed min-height message-receive
+- **bug-fixed**: bug-fixed css footer
+
 # 5.1.6
 
 # 5.1.5

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:20.12.2-alpine3.19 as builder
+FROM --platform=$BUILDPLATFORM node:20.12.2-alpine3.19 as builder
 
 COPY package.json package-lock.json ./
 
@@ -15,12 +15,11 @@ COPY . .
 
 ## Build the angular app in production mode and store the artifacts in dist folder
 
-RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
+RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
 ### STAGE 2: Setup ###
-
-FROM nginx:1.14.1-alpine
+FROM --platform=$BUILDPLATFORM nginx:1.14.1-alpine
 
 ## Copy our default nginx config
 COPY nginx.conf /etc/nginx/nginx.conf
@@ -33,4 +32,4 @@ COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 
 RUN echo "Chat21 Web Widget Started!!"
 
-CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]
+CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/widget-config-template.json > /usr/share/nginx/html/widget-config.json && exec nginx -g 'daemon off;'"]

package/angular.json

@@ -44,7 +44,8 @@
               "src/environments/real_data/widget-config-docker.json",
               "src/environments/real_data/widget-config-native-mqtt.json",
               "src/environments/real_data/widget-config-native-prod.json",
-              "src/environments/real_data/widget-config-aws-stage.json"
+              "src/environments/real_data/widget-config-aws-stage.json",
+              "src/environments/real_data/widget-config-aws-aruba.json"
             ],
             "styles": [
               "src/app/sass/styles.scss"

package/package.json

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

package/src/app/app.component.ts

@@ -2189,12 +2189,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         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,7 +89,7 @@
     left: 0px;
     right: 0px;
     margin: 0px;
-    padding: 12px;
+    padding: 0 12px 12px 12px;
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
     background: white;
     min-height: 40px;

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

@@ -234,7 +234,10 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_START_NW_CONV',
       'CONTINUE',
       'EMOJI_NOT_ELLOWED',
-      'DOMAIN_NOT_ALLOWED'
+      'DOMAIN_NOT_ALLOWED',
+      'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
+      'EMOJI'
     ];
 
     const keysContent = [
@@ -456,12 +459,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived;
     }
 
-    //FALLBACK TO TILEDESK
+    //   //FALLBACK TO TILEDESK
     const requests_list = await this.tiledeskRequestService.getMyRequests().catch(err => {
       this.logger.error('[CONV-COMP] getConversationDetail: error getting request from Tiledesk', err);
       this.isConversationArchived=true
       return { requests: [] }
     });
+    console.log('requesttttttt', requests_list)
     if (requests_list && requests_list.requests.length > 0) {
       this.logger.debug('[CONV-COMP] getConversationDetail: request exist on Tiledesk', requests_list);
       let conversation = requests_list.requests.find((request)=> request.request_id === this.conversationId)
@@ -474,9 +478,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       return this.isConversationArchived
     }
 
-    this.isConversationArchived = true;
-    return null;
-  }
+      this.isConversationArchived = false;
+      return null;
+    }
 
   /**
     * this.g.recipientId:
@@ -826,6 +830,30 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.subscriptions.push(subscribe);
     }
 
+    subscribtionKey = 'conversationsAdded';
+    subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
+    if(!subscribtion){
+
+      subscribtion = this.chatManager.conversationsHandlerService.conversationChanged.pipe(takeUntil(this.unsubscribe$)).subscribe((conversation) => {
+        this.logger.debug('[CONV-COMP] ***** DATAIL conversationsChanged *****', conversation, this.conversationWith, this.isConversationArchived);
+        // if(conversation && conversation.recipient === this.g.senderId && isUserBanned(conversation)){
+        //   return;
+        // }
+        // if(conversation && conversation.sender !== this.senderId){
+        //   const checkContentScrollPosition = that.conversationContent.checkContentScrollPosition();
+        //   if(checkContentScrollPosition && conversation.is_new){ //update conversation if scroolToBottom is to the end
+        //     this.logger.debug('[CONV-COMP] updateConversationBadge...')
+        //     that.updateConversationBadge();
+        //   }
+        // }
+        if(conversation && conversation.recipient === this.conversationId){
+          this.isConversationArchived = false
+        }
+      });
+      const subscribe = {key: subscribtionKey, value: subscribtion };
+      this.subscriptions.push(subscribe);
+    }
+
     subscribtionKey = 'messageWait';
     subscribtion = this.subscriptions.find(item => item.key === subscribtionKey);
     if (!subscribtion) {

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

@@ -223,6 +223,7 @@
                     .msg_receive {
                         background-color: var(--light-white);
                         color: var(--black);
+                        min-height: 38px;
                         // max-width: 260px;
                         max-width: calc(100% - 70px);
                         min-width: 14px;

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

@@ -27,9 +27,11 @@
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
                     <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
+                    <title id="altIconTitle">{{ attachmentTooltip || translationMap?.get('MAX_ATTACHMENT') }}</title>
                 </svg>
+                
             </span>
              <input
                 [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
@@ -47,11 +49,12 @@
         <!-- ICON EMOJII -->
         <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                     <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
                     <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
                     <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
                     <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <title id="altIconTitle">{{ translationMap?.get('EMOJI') }}</title>
 
                     <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
                     <circle cx="15.02" cy="9.86" r="1.29"/>
@@ -146,3 +149,14 @@
         <div class="clear"></div>
     </button> -->
 </div>
+
+
+    <!-- 
+    ****************************************
+    ******* MODALE OFFLINE NETWORK *********
+    ****************************************
+    -->
+    
+<div class="star-rating-widget" [class.active]="isErrorNetwork" [class.inactive]="!isErrorNetwork">
+    <chat-network-offline [keyErrorMessage]="'MAX_ATTACHMENT_ERROR'"></chat-network-offline>
+</div>

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

@@ -418,3 +418,28 @@ textarea:active{
     border: none;
     // margin: -2px -2px 0px;
 }
+
+
+// aggiungi un'animazione di fade in e fade out quando .star-rating-widget è visibile con transition
+.star-rating-widget {
+    transition: all 0.5s ease-in-out;
+}
+
+.star-rating-widget {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -52px;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    justify-content: center;
+    background-color: rgb(255, 255, 255);
+    flex-wrap: nowrap;
+    &.active {
+        bottom: 0px;
+    }
+    &.inactive {
+        bottom: -52px;
+    }
+}

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

@@ -84,6 +84,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   showAlertEmoji: boolean = false
   showAlertUrl: boolean = false;
 
+  file_size_limit: number = 10;
+  attachmentTooltip: string = '';
+  isErrorNetwork: boolean = false;
+
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(private chatManager: ChatManager,
@@ -91,8 +95,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
               private uploadService: UploadService) { }
 
   ngOnInit() {
+    this.updateAttachmentTooltip();
   }
 
+
   ngOnChanges(changes: SimpleChanges){
     if(changes['conversationWith'] && changes['conversationWith'].currentValue !== undefined){
       this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
@@ -105,6 +111,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       this.onDrop(this.dropEvent)
     }
 
+    if(changes['translationMap'] && changes['translationMap'].currentValue !== undefined){
+      this.updateAttachmentTooltip();
+    }
+
   }
   
   ngAfterViewInit() {
@@ -112,6 +122,23 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     // setTimeout(() => {
       this.showEmojiPicker = true
     // }, 500);
+    this.updateAttachmentTooltip();
+  }
+
+
+  updateAttachmentTooltip() {
+    // Use setTimeout to wait for the async translation map to be populated
+    setTimeout(() => {
+      this.logger.log('[CONV-FOOTER] updateAttachmentTooltip - translationMap:', this.translationMap);
+      if (this.translationMap && this.translationMap.has('MAX_ATTACHMENT')) {
+        const template = this.translationMap.get('MAX_ATTACHMENT');
+        this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT template:', template);
+        this.attachmentTooltip = template.replace('{{file_size_limit}}', this.file_size_limit.toString());
+        this.logger.log('[CONV-FOOTER] attachmentTooltip:', this.attachmentTooltip);
+      } else {
+        this.logger.log('[CONV-FOOTER] MAX_ATTACHMENT not found in translationMap');
+      }
+    }, 0);
   }
 
   // ========= begin:: functions send image ======= //
@@ -202,7 +229,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
             const fileXLoad = this.arrayFilesLoad[0].file;
             const uid = this.arrayFilesLoad[0].uid;
             const type = this.arrayFilesLoad[0].type;
-            const size = this.arrayFilesLoad[0].size
+            const size = this.arrayFilesLoad[0].size;
+            if(size > this.file_size_limit * 1024 * 1024){
+              this.logger.error('[CONV-FOOTER] file size is greater than the limit: ', size, this.file_size_limit * 1024 * 1024);
+              this.showErrorNetwork();
+              return;
+            }
             this.logger.log('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
@@ -239,6 +271,15 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
 
 
+    private showErrorNetwork() {
+      this.isErrorNetwork = true;
+      setTimeout(() => {
+        this.isErrorNetwork = false;
+        this.isFilePendingToUpload = false;
+        this.hideTextReply = false;
+      }, 5000);
+    }
+
     uploadSingle(metadata, file, messageText?: string) {
       const that = this;
       try {
@@ -319,6 +360,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
    * @param additional_attributes
    */
   sendMessage(msg: string, type: string, metadata?: any, additional_attributes?: any) { // sponziello
+
     (metadata) ? metadata = metadata : metadata = '';
     this.onEmojiiPickerShow.emit(false)
     this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);

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

@@ -1,15 +1,15 @@
 :host {
     --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
+    --buttonTextColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize2: #{var(--button-font-size)};
+    --buttonFontSize: #{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: #ffffff; //#{var(--button-background-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
 }
 
 .button-in-msg {
@@ -20,8 +20,8 @@
     border: 1px solid var(--buttonBorderColor);
     background: var(--buttonBackgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize2);
-    color: var(--textColor);
+    font-size: var(--buttonFontSize);
+    color: var(--buttonTextColor);
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
@@ -38,7 +38,7 @@
 }
 
 .action {
-    background: var(--backgroundColor);
+    // background: var(--backgroundColor);
     transition: background-color .6s ease;
     &:focus,
     &:hover {

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

@@ -25,7 +25,7 @@ export class ActionButtonComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--backgroundColor', this.backgroundColor);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
     if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
     if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
     if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);

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

@@ -1,15 +1,15 @@
 :host {
     --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
+    --buttonTextColor: #{var(--bck-msg-sent)};
     --hoverBackgroundColor: #{var(--bck-msg-sent)};
     --hoverTextColor: #{var(--blue)};
-    --buttonFontSize2: #{var(--button-font-size)};
+    --buttonFontSize: #{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: #ffffff; //#{var(--button-background-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
 }
 
 
@@ -21,8 +21,8 @@
     border: 1px solid var(--buttonBorderColor);
     background: var(--buttonBackgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize2);
-    color: var(--textColor);
+    font-size: var(--buttonFontSize);
+    color: var(--buttonTextColor);
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

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

@@ -23,8 +23,8 @@ export class LinkButtonComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--textColor', this.textColor);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--buttonTextColor', this.textColor);
     if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
     if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.url').style.setProperty('--hoverTextColor', this.hoverTextColor);
   }

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

@@ -1,15 +1,14 @@
 :host {
     --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
-    --hoverBackgroundColor: #{var(--bck-msg-sent)};
-    --hoverTextColor: #{var(--blue)};
-    --buttonFontSize2: #{var(--button-font-size)};
+    --buttonTextColor: #{var(--bck-msg-sent)};
+    --buttonHoverBackgroundColor: #{var(--bck-msg-sent)};
+    --buttonHoverTextColor: #{var(--blue)};
+    --buttonFontSize: #{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: #ffffff; //#{var(--button-background-color)};
+    --buttonBackgroundColor: #{var(--button-background-color)};
     --buttonColor: #{var(--button-color)};
 }
 
@@ -21,11 +20,9 @@
     cursor: pointer;
     border: 1px solid var(--buttonBorderColor);
     background: var(--buttonBackgroundColor);
-    // background: var(--backgroundColor);
     font-family: var(--font-family);
-    font-size: var(--buttonFontSize2);
-    // color: var(--buttonColor);
-    color: var(--textColor);
+    font-size: var(--buttonFontSize);
+    color: var(--buttonTextColor);
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
@@ -47,8 +44,8 @@
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: var(--hoverTextColor);
-        background: var(--hoverBackgroundColor);
+        color: var(--buttonHoverTextColor);
+        background: var(--buttonHoverBackgroundColor);
         // transform: scale(1.05);
         .icon-button-action {
             svg {

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

@@ -26,10 +26,10 @@ export class TextButtonComponent implements OnInit {
   ngOnChanges(changes: SimpleChanges){
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonFontSize', this.fontSize);
-    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--backgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--textColor', this.textColor);
-    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
-    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--hoverTextColor', this.hoverTextColor);
+    if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonTextColor', this.textColor);
+    if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonHoverBackgroundColor', this.hoverBackgroundColor);
+    if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.text').style.setProperty('--buttonHoverTextColor', this.hoverTextColor);
   }
 
   onMouseOver(event){

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

@@ -3,15 +3,11 @@
 
     <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('bubbleReceivedBackground')"
+        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -21,7 +17,7 @@
       <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
         [button]="button"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
+        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"
@@ -32,7 +28,7 @@
         [button]="button"
         [isConversationArchived]="isConversationArchived"
         [fontSize]="stylesMap.get('buttonFontSize')"
-        [backgroundColor]="stylesMap.get('bubbleReceivedBackground')"
+        [backgroundColor]="stylesMap.get('buttonBackgroundColor')"
         [textColor]="stylesMap.get('buttonTextColor')"
         [hoverBackgroundColor]="stylesMap.get('buttonHoverBackgroundColor')"
         [hoverTextColor]="stylesMap.get('buttonHoverTextColor')"

package/src/app/component/network-offline/network-offline.component.html

@@ -3,6 +3,6 @@
         <path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
     </svg>
     <div class="alert-content">
-        {{ translationMap.get('CONNECTION_NETWORK_ERROR')}}
+        {{ translationMap.get(keyErrorMessage)}}
     </div>
 </div>

package/src/app/component/network-offline/network-offline.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 
 @Component({
@@ -8,6 +8,7 @@ import { CustomTranslateService } from 'src/chat21-core/providers/custom-transla
 })
 export class NetworkOfflineComponent implements OnInit {
 
+  @Input() keyErrorMessage: string = 'CONNECTION_NETWORK_ERROR';
   translationMap: Map< string, string>;
 
   constructor(
@@ -16,7 +17,7 @@ export class NetworkOfflineComponent implements OnInit {
 
   ngOnInit(): void {
     let keys = [
-      'CONNECTION_NETWORK_ERROR'
+      this.keyErrorMessage
     ]
     this.translationMap = this.customTranslateService.translateLanguage(keys)
   }

package/src/app/providers/translator.service.ts

@@ -99,7 +99,7 @@ export class TranslatorService {
 
   // https://github.com/ngx-translate/core/issues/282
   initI18n(): Promise<any> {
-    this._translate.addLangs(['en', 'it']);
+    this._translate.addLangs(['en', 'it', 'es', 'fr']);
     this.logger.debug('[TRANSLATOR-SERV]»»»» initI18n getLangs ', this._translate.getLangs());
 
     // Set the default language for translation strings.
@@ -261,7 +261,10 @@ export class TranslatorService {
       'WAITING_TIME_FOUND',
       'WAITING_TIME_NOT_FOUND',
       'CLOSED',
-      'LABEL_PREVIEW'
+      'LABEL_PREVIEW',
+      'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
+      'EMOJI'
     ];
 
 
@@ -316,6 +319,9 @@ export class TranslatorService {
       globals.CLOSED = res['CLOSED'];
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
+      globals.MAX_ATTACHMENT = res['MAX_ATTACHMENT']
+      globals.MAX_ATTACHMENT_ERROR = res['MAX_ATTACHMENT_ERROR']
+      globals.EMOJI = res['EMOJI']
       
       
       if(globals.WELCOME_TITLE === 'WELLCOME_TITLE') globals.WELCOME_TITLE = res['WELCOME_TITLE']

package/src/app/sass/_variables.scss

@@ -24,7 +24,7 @@
     --button-in-msg-max-width: 280px;
     --button-in-msg-padding: 8px 16px;
     --button-color: #5c6c73;
-    --button-background-color: #f5f5f5; // #f9fcff;
+    --button-background-color: #ffffff;//#f5f5f5; // #f9fcff;
     --button-border-color: #0000000f; //#e4ebf2; 
     --button-font-size: 13px;
 

package/src/app/utils/utils.ts

@@ -396,7 +396,7 @@ export function checkAcceptedFile(nameFile, fileType, fileUploadAccept): boolean
   return acceptedTypes.some((accept) => {
     accept = accept.trim();
     
-    // Controlla per i tipi MIME con wildcard, come image/*
+    // Controlla wildcard MIME type (es. "image/*")
     if (accept.endsWith('/*')) {
       const baseMimeType = fileType.split('/')[0]; // Ottieni la parte principale del MIME type
       return accept.replace('/*', '') === baseMimeType;
@@ -413,19 +413,17 @@ export function checkAcceptedFile(nameFile, fileType, fileUploadAccept): boolean
       return true;
     }
 
-    // // Controlla se l'estensione del file corrisponde direttamente
-    // if (accept.startsWith('.') && fileExtension === accept.substring(1)) {
-    //   return true;
-    // }
+    // Controlla estensione con punto (es. ".pdf")
+    if (accept.startsWith('.')) {
+      return fileExtension === accept.slice(1);
+    }
 
-    // Controlla se l'estensione del file corrisponde direttamente
-    // Dividi la stringa fileUploadAccept in un array di tipi accettati
-    const acceptedTypes = fileUploadAccept.split(',');
-    //verifica se l'estensione del file è accettata
-    if (acceptedTypes.includes(fileExtension)) {
+    // Controlla se accept è un'estensione senza punto (es. "pdf")
+    if (!accept.includes('/') && fileExtension === accept) {
       return true;
     }
 
+
     return false;
   });
 }

package/src/assets/i18n/en.json

@@ -94,5 +94,8 @@
     "SWITCH_TO": "Or switch to:",
     "CONNECTION_NETWORK_ERROR": "Our apologies. There was some trouble connecting to network",
     "EMOJI_NOT_ELLOWED":"Emoji not allowed",
-    "DOMAIN_NOT_ALLOWED":"URL contains a non-allowed domain"
+    "DOMAIN_NOT_ALLOWED":"URL contains a non-allowed domain",
+    "MAX_ATTACHMENT_ERROR": "The file exceeds the maximum allowed size",
+    "MAX_ATTACHMENT": "Max allowed size {{file_size_limit}}Mb",
+    "EMOJI": "Emoji"
 }

package/src/assets/i18n/es.json

@@ -92,5 +92,10 @@
 
     "LABEL_PREVIEW": "Avance",
     "SWITCH_TO":"O cambiar a:",
-    "CONNECTION_NETWORK_ERROR": "Nuestras disculpas. Hubo algunos problemas para conectarse a la red"
+    "CONNECTION_NETWORK_ERROR": "Nuestras disculpas. Hubo algunos problemas para conectarse a la red",
+    "EMOJI_NOT_ELLOWED":"Emoji no permitido",
+    "DOMAIN_NOT_ALLOWED":"La URL contiene un dominio no permitido",
+    "MAX_ATTACHMENT_ERROR": "El archivo supera el tamaño máximo permitido",
+    "MAX_ATTACHMENT": "Tamaño máximo permitido {{file_size_limit}}Mb",
+    "EMOJI": "Emoji"
 }

package/src/assets/i18n/fr.json

@@ -92,5 +92,10 @@
 
     "LABEL_PREVIEW": "Aperçu",
     "SWITCH_TO":"Ou passer à:",
-    "CONNECTION_NETWORK_ERROR": "Nos excuses. Il y a eu des problèmes de connexion au réseau"
+    "CONNECTION_NETWORK_ERROR": "Nos excuses. Il y a eu des problèmes de connexion au réseau",
+    "EMOJI_NOT_ELLOWED":"Emoji non autorisé",
+    "DOMAIN_NOT_ALLOWED":"L'URL contient un domaine non autorisé",
+    "MAX_ATTACHMENT_ERROR": "Le fichier dépasse la taille maximale autorisée",
+    "MAX_ATTACHMENT": "Taille maximale autorisée {{file_size_limit}}Mo",
+    "EMOJI": "Emoji"
 }

package/src/assets/i18n/it.json

@@ -86,11 +86,14 @@
     "LABEL_LAST_ACCESS": "ultimo accesso",
     "LABEL_TO": "a",
     "ARRAY_DAYS": ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"],
-    
     "SENT_AN_ATTACHMENT": "ha inviato un allegato",
     "SENT_AN_IMAGE":"ha inviato un'immagine",
-    
     "LABEL_PREVIEW": "Anteprima",
     "SWITCH_TO":"Oppure passa a:",
-    "CONNECTION_NETWORK_ERROR": "Ci scusiamo. Si sono verificati problemi di connessione di rete"
+    "CONNECTION_NETWORK_ERROR": "Ci scusiamo. Si sono verificati problemi di connessione di rete",
+    "EMOJI_NOT_ELLOWED":"Emoji non consentiti",
+    "DOMAIN_NOT_ALLOWED":"L'URL contiene un dominio non consentito",
+    "MAX_ATTACHMENT_ERROR": "Il file supera la dimensione massima consentita",
+    "MAX_ATTACHMENT": "Dimensione massima consentita {{file_size_limit}}Mb",
+    "EMOJI": "Emoji"
 }

package/src/chat21-core/providers/firebase/firebase-conversation-handler.ts

@@ -413,8 +413,8 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
             message.text = INFO_SUPPORT_LEAD_UPDATED;
         } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.MEMBER_LEFT_GROUP) {
             let subject: string = '';
-            if (message.attributes.messagelabel.parameters.fullname) {
-                subject = message.attributes.messagelabel.parameters.fullname;
+            if (message.attributes.messagelabel.parameters.firstname) {
+                subject = message.attributes.messagelabel.parameters.firstname;
             }else{
                 subject = message.attributes.messagelabel.parameters.member_id;
             }

package/src/chat21-core/providers/mqtt/mqtt-conversation-handler.ts

@@ -410,8 +410,8 @@ export class MQTTConversationHandler extends ConversationHandlerService {
             message.text = INFO_SUPPORT_LEAD_UPDATED;
         } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.MEMBER_LEFT_GROUP) {
            let subject: string;
-           if (message.attributes.messagelabel.parameters.fullname) {
-               subject = message.attributes.messagelabel.parameters.fullname;
+           if (message.attributes.messagelabel.parameters.firstname) {
+               subject = message.attributes.messagelabel.parameters.firstname;
            }else{
                subject = message.attributes.messagelabel.parameters.member_id;
            }
@@ -464,16 +464,17 @@ export class MQTTConversationHandler extends ConversationHandlerService {
     private async addCommandMessage(msg: MessageModel): Promise<boolean>{
         const that = this;
         const commands = msg.attributes.commands;
+        that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage: ', commands)
         let i=0;
         if(commands.length === 0) return;
         return new Promise((resolve, reject)=>{
             function execute(command){
+                that.logger.debug('[MQTTConversationHandlerSERVICE] command: ', command, i)
                 if(command.type === "message"){
                     that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> type="message"', command, i)
                     if (i >= 2) {
-                        
                         //check if previus wait message type has time value, otherwize set to 1000ms
-                        !commands[i-1].time? commands[i-1].time= 1000 : commands[i-1].time
+                        !commands[i-1].time? commands[i-1].time= 1000 : commands[i-1].time;
                         command.message.timestamp = commands[i-2].message.timestamp + commands[i-1].time;
                         
                         /** CHECK IF MESSAGE IS JUST RECEIVED: IF false, set next message time (if object exist) to 0 -> this allow to show it immediately */
@@ -483,12 +484,14 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                             command.message.timestamp = previewsTimeMsg + 100
                             commands[i+1]? commands[i+1].time = 0 : null
                         }
-                    } else { /**MANAGE FIRST MESSAGE */
+                    } 
+                    else { /**MANAGE FIRST MESSAGE */
                         command.message.timestamp = msg.timestamp;
                         if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
                             commands[i+1]? commands[i+1].time = 0 : null
                         }
                     }
+
                     that.generateMessageObject(msg, command.message, i, function () {
                         i += 1
                         if (i < commands.length) {
@@ -499,28 +502,36 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                             resolve(true)
                         }
                     })
-                }else if(command.type === "wait"){
-                    that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> type="wait"', command, i, commands.length)
+                } else if(command.type === "wait"){
                     //publish waiting event to simulate user typing
                     if(isJustRecived(that.startTime.getTime(), msg.timestamp)){
                         // console.log('message just received::', command, i, commands)
                         that.messageWait.next({uid: that.conversationWith, uidUserTypingNow: msg.sender, nameUserTypingNow: msg.sender_fullname, waitTime: command.time, command: command})
                     }
-                    setTimeout(function() {
+                    that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage: --> msg.status: ', msg.status)
+                    
+                    const executeNext = () => {
                         i += 1
                         if (i < commands.length) {
                             execute(commands[i])
-                        }
-                        else {
+                        } else {
                             that.logger.debug('[MQTTConversationHandlerSERVICE] addCommandMessage --> last command executed (send message), exit') 
                             resolve(true)
                         }
-                    },command.time)
+                    }
+
+                    if(msg.status === MSG_STATUS_RECEIVED){
+                        executeNext()
+                    } else {
+                        setTimeout(executeNext, command.time)
+                    }
                 }
             }
             execute(commands[0]) //START render first message
         })
     }
+
+    
     
     private generateMessageObject(message, command_message, index, callback) {
         let parentUid = message.uid

package/src/chat21-core/providers/tiledesk/tiledesk-requests.service.ts

@@ -71,7 +71,7 @@ export class TiledeskRequestsService {
 
   public getMyRequests(): Promise<{ requests: Array<any>}> {
     this.tiledeskToken = this.appStorage.getItem('tiledeskToken')
-    const url = this.URL_TILEDESK_REQUEST + '/me?preflight=true'
+    const url = this.URL_TILEDESK_REQUEST + 'me?preflight=true'
     this.logger.log('[TILEDESK-SERVICE] - GET REQUEST url ', url);
     const httpOptions = {
       headers: new HttpHeaders({

package/src/chat21-core/utils/utils.ts

@@ -661,11 +661,22 @@ export function isAllowedUrlInText(text: string, allowedUrls: string[]) {
   return nonWhitelistedDomains.length === 0;
 }
 
+// function extractUrls(text: string): string[] {
+//   const urlRegex = /https?:\/\/[^\s]+/g;
+//   return text.match(urlRegex) || [];
+// }
+
 function extractUrls(text: string): string[] {
-  const urlRegex = /https?:\/\/[^\s]+/g;
-  return text.match(urlRegex) || [];
+  // Rileva URL con o senza protocollo (http/https)
+  const urlRegex = /\b((https?:\/\/)?(www\.)?[a-z0-9.-]+\.[a-z]{2,})(\/[^\s]*)?/gi;
+  const matches = text.match(urlRegex) || [];
+  // Normalizza: aggiunge https:// se manca, così il parsing con new URL() funziona
+  return matches.map((url) => {
+    if (!/^https?:\/\//i.test(url)) {
+      return 'https://' + url;
+    }
+    return url;
+  });
 }
 
 
-
-

package/src/iframe-style.css

@@ -19,7 +19,7 @@
 
 #tiledesk-container.open.overlay--popup {
     background-color: rgba(0, 0, 0, 0.4);
-    position: absolute;
+    position: fixed;
     width: 100%;
     height: 100vh;
 }