@chat21/chat21-web-widget 5.0.71-rc.1 → 5.0.71-rc.12

package/.github/workflows/build.yml

@@ -3,8 +3,8 @@ on:
   push:
     branches:
       - master # The default branch
-      - branch-*   # The other branches to be analyzed
-      - features/*
+      - (branch|release)-.*   # The other branches to be analyzed
+      - (features|release)/.*
   pull_request:
     types: [opened, synchronize, reopened]
 jobs:

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.71-rc.12
+- changed: index.js, index-dev.js and chatbot-panel.js UI improved 
+
+### 5.0.71-rc.11
+- added: INFO_MESSAGE_TYPE enum added to manage info message keys into message.attributes object
+- changed: translations aligned for all lang
+- changed: index.js, index-dev.js and chatbot-panel.js UI improved
+
+### 5.0.71-rc.10
+- bug-fixed: signInWithCustomToken override tiledesk_token key 
+
+### 5.0.71-rc.9
+- added: brandSrc env property
+
+### 5.0.71-rc.8
+- chaged: chatbot-panel.html page UI (added header as style)
+- bug-fixed: drop-zone area wrong height if footer in not visible
+- bug-fixed: set archived conversations as read always 
+
+### 5.0.71-rc.5
+- bug-fixed: last-message box is visible also if text is empty
+
+### 5.0.71-rc.4
+- added: uploadProfile method into upload.service files
+- bug-fixed: if hiddenMessage is present and user restart conversation from header menu, flow does not restart from beginning
+- bug-fixed: do not disable url buttons on carousel element
+- bug-fixed: do not sound if convAdded is fired and on reconnect event
+- bug-fixed: init Rules only if widget is closed
+- removed: 'Powereb By Tiledesk' on conversation and home components only for cahtbot-panel.html page
+
+### 5.0.71-rc.3
+- added: delete method for firebase-upload service
+- added: size attribute to metadata object while uploading file 
+- bug-fixed: cannot read property of undefined while reading auth() in onOpenCloseWidget method with singleConversation mode active
+
+### 5.0.71-rc.2
+- added: hiddenMessage tiledesk property to start a conversation with an hidden info message
+- added: ability to listen from parent message and start a new Conversation with an hidden intentName info message
+- changed: minor UI fix carousel component
+
 ### 5.0.71-rc.1
 - added: ability to start conversation from an intent hiddenMessage name
 - added: postMessage to notice parent the current message

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:14.21.2-alpine as builder
+FROM node:16.20.2-alpine3.18 as builder
 
 COPY package.json package-lock.json ./
 

package/package.json

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

package/src/app/app.component.ts

@@ -138,6 +138,39 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
         this.ngZone.run(() => {
             const that = this;
+            const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (that.g.isOpen === true && conversation) {
+                    that.g.setParameter('displayEyeCatcherCard', 'none');
+                    that.triggerOnConversationUpdated(conversation);
+                    that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
+                    if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
+                        return;
+                    }
+                    if (conversation.is_new) {
+                        that.manageTabNotification(false, 'conv-added')
+                        // this.soundMessage(); 
+                    }
+                    if(this.g.isOpen === false){
+                        that.lastConversation = conversation;
+                        that.g.isOpenNewMessage = true;
+                    }
+                } else {
+                    //widget closed
+
+                    let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
+                    that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
+                }
+                // that.manageTabNotification()
+                // });
+                if(conversation){
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
+                }
+                
+            });
+            this.subscriptions.push(subAddedConversation);
+
             const subChangedConversation = this.conversationsHandlerService.conversationChanged.subscribe((conversation) => {
                 // that.ngZone.run(() => {
                 if (conversation) {
@@ -148,9 +181,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                         that.disposeWidget();
                         return;
                     }
-    
+
                     if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
-                        that.manageTabNotification();
+                        that.manageTabNotification(conversation.sound, 'conv-changed');
                     }
 
                     if (that.g.isOpen === true) {
@@ -186,39 +219,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             });
             this.subscriptions.push(subChangedConversation);
 
-            const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
-                // that.ngZone.run(() => {
-                if (that.g.isOpen === true && conversation) {
-                    that.g.setParameter('displayEyeCatcherCard', 'none');
-                    that.triggerOnConversationUpdated(conversation);
-                    that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
-                    if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
-                        return;
-                    }
-                    if (conversation.is_new) {
-                        that.manageTabNotification()
-                        // this.soundMessage(); 
-                    }
-                    if(this.g.isOpen === false){
-                        that.lastConversation = conversation;
-                        that.g.isOpenNewMessage = true;
-                    }
-                } else {
-                    //widget closed
-
-                    let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
-                    that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
-                }
-                // that.manageTabNotification()
-                // });
-                if(conversation){
-                    this.onImageLoaded(conversation)
-                    this.onConversationLoaded(conversation)
-                }
-                
-            });
-            this.subscriptions.push(subAddedConversation);
-
             const subAddedArchivedConversations = this.archivedConversationsService.archivedConversationAdded.subscribe((conversation) => {
                 // that.ngZone.run(() => {
                 if (conversation) {
@@ -421,7 +421,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.showWidget();
                 }
 
-                if(this.g.botsRules){
+                if(this.g.botsRules && !this.g.isOpen){
                     const rules = new Rules(that.tiledeskRequestsService, that.appStorageService,that.g)
                     rules.initRules(that.g.windowContext, that.g.tiledeskToken, user, that.generateNewUidConversation(), that.g.botsRules)
                 }
@@ -690,42 +690,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     // ========= end:: START UI ============//
 
-    // private openNewConversation() {
-    //     this.logger.debug('[APP-COMP] openNewConversation in APP COMPONENT');
-    //     this.g.newConversationStart = true;
-    //     // controllo i dipartimenti se sono 1 o 2 seleziono dipartimento e nascondo modale dipartimento
-    //     // altrimenti mostro modale dipartimenti
-    //     const preChatForm = this.g.preChatForm;
-    //     const attributes = this.g.attributes;
-    //     const departments = this.g.departments;
-    //     // that.g.wdLog(['departments: ', departments, departments.length);
-    //     if (preChatForm && (!attributes || !attributes.userFullname || !attributes.userEmail)) {
-    //         // if (preChatForm && (!attributes.userFullname || !attributes.userEmail)) {
-    //         this.isOpenConversation = false;
-    //         this.g.setParameter('isOpenPrechatForm', true);
-    //         // this.settingsSaverService.setVariable('isOpenPrechatForm', true);
-    //         this.isOpenSelectionDepartment = false;
-    //         if (departments && departments.length > 1 && this.g.departmentID == null) {
-    //             this.isOpenSelectionDepartment = true;
-    //         }
-    //     } else {
-    //         // this.g.isOpenPrechatForm = false;
-    //         this.g.setParameter('isOpenPrechatForm', false);
-    //         // this.settingsSaverService.setVariable('isOpenPrechatForm', false);
-    //         this.isOpenConversation = false;
-    //         this.isOpenSelectionDepartment = false;
-    //         if (departments && departments.length > 1 && this.g.departmentID == null) {
-    //             this.isOpenSelectionDepartment = true;
-    //         } else {
-    //             this.isOpenConversation = true;
-    //         }
-    //     }
-
-    //     this.logger.debug('[APP-COMP] isOpenPrechatForm', this.g.isOpenPrechatForm, ' isOpenSelectionDepartment:', this.isOpenSelectionDepartment);
-    //     if (this.g.isOpenPrechatForm === false && this.isOpenSelectionDepartment === false) {
-    //         this.startNewConversation();
-    //     }
-    // }
 
     /**
      * genero un nuovo conversationWith
@@ -749,21 +713,10 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.debug('[APP-COMP]  recipientId: ', this.g.recipientId);
         this.isConversationArchived = false;
         
-        if(window.location.search && window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage')))){
-            let hiddenMessage = window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage'))).split('=')[1]
-            let participant = window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_participants'))).split('=')[1]
-            this.logger.debug('[APP-COMP] startNewConversation ', window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage'))))
-            let message: any = {}
-            message.attributes = { subtype: 'info', ...this.g.attributes}
-            message.userAgent = this.g.attributes['client']
-            message.request_id = newConvId
-            message.sourcePage = this.g.attributes['sourcePage']
-            message.language = this.g.lang
-            message.text = '/'+ hiddenMessage
-            message.participants = [ participant ]
-            message.departmentid = this.g.attributes.departmentId
-            // this.sendMessage(message)
-            this.tiledeskRequestsService.sendMessageToRequest(newConvId, this.g.tiledeskToken, message)
+        /** allow to start conversation with an hidden message (without publishing 'new_conversation' event) */
+        this.logger.debug('[APP-COMP] AppComponent::startNewConversation hiddenMessage',this.g.hiddenMessage );
+        if(this.g.hiddenMessage){
+            this.onNewConversationWithMessage(this.g.hiddenMessage)
             return;
         }
 
@@ -958,7 +911,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             }).then((res)=> { this.showWidget() });
             return;
         }
-
         this.conversationsHandlerService.getLastConversation((conv, error)=> {
             this.logger.debug('[APP-COMP] getConverationRESTApi: conversation from rest API --> ', conv)
             if(error){
@@ -1431,9 +1383,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             };
 
             /** set state reinit */
-            windowContext['tiledesk'].startConversation = function () {
+            windowContext['tiledesk'].startConversation = function (text: string) {
                 ngZone.run(() => {
-                    windowContext['tiledesk']['angularcomponent'].component.onNewConversation();
+                    windowContext['tiledesk']['angularcomponent'].component.onNewConversation(text);
                 });
             };
 
@@ -1521,7 +1473,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    private manageTabNotification() {
+    private manageTabNotification(canSound: boolean, calledby: string) {
         if (!this.isTabVisible) {
             // TAB IS HIDDEN --> manage title and SOUND 
             // this.g.windowContext.parent.title = "HIDDEN"
@@ -1541,7 +1493,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 }
             }, 1000);
         }
-        this.soundMessage()
+        this.logger.debug('[APP-COMP] manageTabNotification canSound:calledby---->', canSound, calledby)
+        if(canSound)
+            this.soundMessage()
     }
 
 
@@ -1600,7 +1554,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 if(this.g.singleConversation){
                     this.isOpenHome = false;
                     this.g.setParameter('isOpenPrechatForm', false)
-                    this.manageWidgetSingleConversation()
+                    this.initConversationsHandler(this.g.tenant, this.g.senderId)
+                    // this.manageWidgetSingleConversation()
                 } else if (this.g.startFromHome) {
                     this.isOpenHome = true;
                     this.isOpenConversation = false;
@@ -1763,8 +1718,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
      * carico conversazione - stack 1
      * home - stack 0
      */
-    onNewConversation() {
+    onNewConversation(text?: string) {
         this.logger.debug('[APP-COMP] returnNewConversation in APP COMPONENT');
+        if(text) this.g.setParameter('hiddenMessage', text);
         this.g.newConversationStart = true;
         // controllo i dipartimenti se sono 1 o 2 seleziono dipartimento e nascondo modale dipartimento
         // altrimenti mostro modale dipartimenti
@@ -1801,6 +1757,28 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
+
+    onNewConversationWithMessage(text: string, subType: string = 'info'){
+        this.logger.log('[APP-COMP] onNewConversationWithMessage in APP COMPONENT', text);
+
+        const newConvId = this.generateNewUidConversation();
+        this.g.setParameter('recipientId', newConvId);
+        this.appStorageService.setItem('recipientId', newConvId)
+
+        let message: any = {}
+        message.attributes = { subtype: subType, ...this.g.attributes}
+        message.userAgent = this.g.attributes['client']
+        message.request_id = newConvId
+        message.sourcePage = this.g.attributes['sourcePage']
+        message.language = this.g.lang
+        message.text = '/'+ text
+        message.participants = this.g.participants
+        message.departmentid = this.g.attributes.departmentId
+        // this.sendMessage(message)
+        this.tiledeskRequestsService.sendMessageToRequest(newConvId, this.g.tiledeskToken, message)
+        return;
+    }
+
     /**
      * MODAL HOME:
      * open all-conversation
@@ -1867,6 +1845,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
      */
     onNewConversationButtonClicked(event){
         this.logger.debug('[APP-COMP] onNewConversationButtonClicked');
+        this.g.setParameter('hiddenMessage', null)
         
         this.isOpenConversation = false;
         this.g.singleConversation? this.isOpenHome = false: null;

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

@@ -37,9 +37,10 @@
         (onMenuOptionShow)="onMenuOption($event)">
     </chat-conversation-header>
 
-    <div id="dropZone_container" *ngIf="isHovering">
+    <div id="dropZone_container" *ngIf="isHovering"
+        [class.hideTextReply]="hideFooterTextReply && g?.poweredBy">
         <div class="drop">
-            drop zone
+            <!-- drop zone -->
         </div>
     </div>
     

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

@@ -9,7 +9,8 @@
     --foregroundColor: var(--col-msg-sent);
 }
 
-:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content{
+:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content,
+:host #dropZone_container.hideTextReply{
 
     bottom: var(--chat-footer-height) !important
 }
@@ -143,7 +144,7 @@
 #dropZone_container{
     position: absolute;
     top: 52px;
-    bottom: 56px;
+    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
     left: 0;
     right: 0;
     background-color: rgba(240,248,255,0.6);

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

@@ -16,7 +16,6 @@ import {
 import { MessageModel } from 'src/chat21-core/models/message';
 
 // utils
-import { isPopupUrl } from 'src/app/utils/utils';
 import { v4 as uuidv4 } from 'uuid';
 
 
@@ -40,10 +39,9 @@ import { TypingService } from 'src/chat21-core/providers/abstract/typing.service
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
-import { LIVE_PAGE } from 'src/chat21-core/utils/constants';
-import { getDateDifference, popupUrl } from 'src/chat21-core/utils/utils';
+import { INFO_MESSAGE_TYPE } from 'src/chat21-core/utils/constants';
+import { getDateDifference } from 'src/chat21-core/utils/utils';
 import { isJustRecived, isUserBanned } from 'src/chat21-core/utils/utils-message';
-import { AppComponent } from '../../../app.component';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
 // import { TranslateService } from '@ngx-translate/core';
 
@@ -113,11 +111,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   isOpenAttachmentPreview: Boolean = false;
   attachments: Array<{ file: Array<any>, metadata: {}}>
 
-  
-  
-  isPopupUrl = isPopupUrl;
-  popupUrl = popupUrl;
-
   // availableAgentsStatus = false; // indica quando è impostato lo stato degli agenti nel subscribe
   messages: Array<MessageModel> = [];
 
@@ -173,7 +166,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     public g: Globals,
     public starRatingWidgetService: StarRatingWidgetService,
     public sanitizer: DomSanitizer,
-    public appComponent: AppComponent,
+    // public appComponent: AppComponent,
     public appStorageService: AppStorageService,
     public conversationHandlerBuilderService: ConversationHandlerBuilderService,
     public appConfigService: AppConfigService,
@@ -634,7 +627,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       const message= 'Moved to: [' + this.g.attributes.sourceTitle + '](' +  this.g.attributes.sourcePage + ')'
       const attributes={
         subtype: 'info/support',
-        messagelabel: {key: LIVE_PAGE}
+        messagelabel: {key: INFO_MESSAGE_TYPE.LIVE_PAGE}
       }
       this.logger.debug('[CONV-COMP] sendLivePage --> attributes+message', attributes, message)
       this.conversationFooter.sendMessage(message, TYPE_MSG_TEXT, null, attributes);

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

@@ -63,7 +63,7 @@
                             <!-- [ngClass]="{'slide-in-left': !isFirstMessage(message?.sender, i)}"  -->
                             <chat-bubble-message class="messages msg_receive"
                               [ngClass]="{'slide-in-left': false}"
-                              [class.no-background]="(isImage(message) || isFrame(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
+                              [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
                               [style.margin-left]="isSameSender(message?.sender, i)? '50px': null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
@@ -109,8 +109,7 @@
                           </div>
 
                           <!-- carousel -->
-                          <div *ngIf="message?.attributes && message?.attributes?.attachment 
-                                        && message?.attributes?.attachment?.gallery" [ngClass]="{'slide-in-left': false}" class="carousel_container">
+                          <div *ngIf="isCarousel(message)" [ngClass]="{'slide-in-left': false}" class="carousel_container">
                             <chat-carousel class="carousel_container"
                               [message]="message"
                               [isConversationArchived]="isConversationArchived"

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

@@ -5,8 +5,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
-import { isPopupUrl, popupUrl } from 'src/chat21-core/utils/utils';
-import { isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastMessage, isMine, isSameSender, messageType } from 'src/chat21-core/utils/utils-message';
+import { isCarousel, isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastMessage, isMine, isSameSender, messageType } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-conversation-content',
@@ -43,8 +42,7 @@ export class ConversationContentComponent implements OnInit {
   // ========= end:: gestione scroll view messaggi ======= //
 
   // ========= begin:: dichiarazione funzioni ======= //
-  isPopupUrl = isPopupUrl;
-  popupUrl = popupUrl;
+  isCarousel = isCarousel;
   // ========= end:: dichiarazione funzioni ======= //
 
   // ========== begin:: set icon status message ======= //

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

@@ -248,7 +248,7 @@ textarea:active{
     // position: absolute;
     bottom: 100%;
     width: 100%;
-    // height: 22px;
+    height: var(--chat-footer-logo-height);
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -131,6 +131,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         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 reader = new FileReader();
               that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
               reader.addEventListener('load', function () {
@@ -146,7 +147,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
                     that.logger.debug('[CONV-FOOTER] onload image');
                     // that.arrayFilesLoad.push(imageXLoad);
                     const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                    that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile };
+                    that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
                     that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
                     // SEND MESSAGE
                     that.loadFile();
@@ -159,7 +160,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
                   };
                   // that.arrayFilesLoad.push(imageXLoad);
                   const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                  that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile };
+                  that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
                   that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
                   // SEND MESSAGE
                   that.loadFile();
@@ -182,6 +183,7 @@ 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
             this.logger.debug('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
@@ -191,14 +193,16 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
                     'width': fileXLoad.width,
                     'height': fileXLoad.height,
                     'type': type,
-                    'uid': uid
+                    'uid': uid,
+                    'size': size
                 };
             } else {
                 metadata = {
                     'name': fileXLoad.title,
                     'src': fileXLoad.src,
                     'type': type,
-                    'uid': uid
+                    'uid': uid,
+                    'size': size
                 };
             }
             this.logger.debug('[CONV-FOOTER] metadata -------> ', metadata);

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

@@ -110,7 +110,7 @@
     margin-left: 45px;
     margin-right: 16px;
     border-radius: 12px 12px 12px 12px;
-    padding: 5px;
+    padding: 0px 5px;
 }
 
 .previewNewMessagge.no-background{

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

@@ -22,7 +22,7 @@
                 <div class="buttons" *ngIf="card?.buttons && card?.buttons.length > 0">
                     <div *ngFor="let button of card?.buttons" 
                         class="single-button action"
-                        [ngClass]="{'disabled': (isConversationArchived || !isLastMessage), 'active': button?.active}"
+                        [ngClass]="{'disabled': (isConversationArchived || button.type !== TYPE_BUTTON.URL), 'active': button?.active}"
                         (click)="actionButtonClick($event, button, i)" >
                         {{button.value}}
                     </div>

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

@@ -129,6 +129,7 @@
     background: transparent!important;
     display: block;
     max-width: 100% !important;
+    width: 100%;
     border-radius: 8px 8px 0px 0px;
     
 }

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

@@ -1,5 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChildren } from '@angular/core';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { TYPE_BUTTON } from 'src/chat21-core/utils/constants';
+import { isCarousel } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-carousel',
@@ -30,11 +32,11 @@ export class CarouselComponent implements OnInit{
   hoverTextColor: string;
   type: string;
   button: any;
-
+  TYPE_BUTTON = TYPE_BUTTON;
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-    console.log('[CAROUSEL-MESSAGE] hello', this.message)
+    console.log('[CAROUSEL-MESSAGE] hello', this.message, isCarousel(this.message))
 
     
     this.wrapper = this.elementRef.nativeElement.querySelector('.wrapper')
@@ -95,7 +97,7 @@ export class CarouselComponent implements OnInit{
     let gap = 17
     let cardPerView = Math.round(this.carousel.offsetWidth / width);
 
-    console.log('go to -->', direction, width, this.firstCardWidth, cardPerView, this.carousel.offsetWidth)
+    // console.log('go to -->', direction, width, this.firstCardWidth, cardPerView, this.carousel.offsetWidth)
 
     // this.carousel.scrollLeft += direction == "previous" ? -(width+gap) : width+gap;
     this.carousel.scrollLeft += direction == "previous" ? -width : width;
@@ -110,7 +112,6 @@ export class CarouselComponent implements OnInit{
   actionButtonClick(ev, button, index){
     this.button = button
     this.type = button.type
-    console.log('buttonnnnnnn', ev, button)
     if ( button && ((button.action && button.action !== '') || (button.link && button.link !== '') || button.text !== '' )) {
       
       //set clicked button as the active one

package/src/app/component/message/image/image.component.ts

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { saveAs } from 'file-saver';
-import { popupUrl } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'chat-image',
@@ -16,9 +15,7 @@ export class ImageComponent implements OnInit {
 
   loading: boolean = true
   tooltipMessage: string;
-  
 
-  popupUrl = popupUrl;
   
   constructor() { }
 

package/src/app/providers/global-settings.service.ts

@@ -1774,6 +1774,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.disconnetTime = stringToNumber(TEMP);
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_hiddenMessage');
+        if (TEMP) {
+            globals.hiddenMessage = TEMP;
+        }
         
     }