@chat21/chat21-web-widget 5.0.68 → 5.0.69-rc.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.69-rc.1
+- added: display/dispose widget on mobile/desktop behavior
+- added: open/close widget on page change behavior
+- added: 'redirect' action link on message type 'redirect'
+
 ### 5.0.68 in PROD
 - bug-fixed: metadata.includes is not a function at isAudio function
 

package/package.json

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

package/src/app/app.component.ts

@@ -258,8 +258,26 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.logger.setLoggerConfig(this.g.isLogEnabled, this.g.logLevel)
                 this.tabTitle = this.g.windowContext.window.document.title
                 this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
-                this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
+                
+                //set visibility
+                if((this.g.isMobile && !this.g.displayOnMobile) || (!this.g.isMobile && !this.g.displayOnDesktop)){
+                    this.disposeWidget()
+                    return;
+                }
+                //set status (open /close)
+                if(this.g.isMobile && this.g.onPageChangeVisibilityMobile !== 'last'){
+                    let isOpen = this.g.onPageChangeVisibilityMobile === 'open'? true: false
+                    this.g.setIsOpen(isOpen)
+                    this.appStorageService.setItem('isOpen', isOpen)
+                }
+                if(!this.g.isMobile && this.g.onPageChangeVisibilityDesktop !== 'last'){
+                    let isOpen = this.g.onPageChangeVisibilityDesktop === 'open'? true: false
+                    this.g.setIsOpen(isOpen)
+                    this.appStorageService.setItem('isOpen', isOpen)
+                }
+                
                 /**CHECK IF JWT IS IN URL PARAMETERS */
+                this.logger.debug('[APP-COMP] check if token is passed throw url: ', this.g.jwt);
                 if (this.g.jwt) {
                     // logging in with custom token from url
                     // add JWY token to localstorage and authenticate with it           this.logger.debug('[APP-COMP] token from url. isShown:', this.g.isShown, 'autostart:', this.g.autoStart)
@@ -488,40 +506,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             this.logger.debug('[APP-COMP]  ---------------- 13 ---------------- ');
             this.logger.debug('[APP-COMP]  ----------- sono già loggato ------- ');
             this.signInWithCustomToken(tiledeskToken)
-            // this.tiledeskAuthService.signInWithCustomToken(tiledeskToken).then(user => {
-            //     this.messagingAuthService.createCustomToken(tiledeskToken)
-            // }).catch(error => { console.error('SIGNINWITHCUSTOMTOKEN error::' + error) })
-
-
-            // const currentUser = this.authService2.getCurrentUser();
-            //     this.g.senderId = currentUser.uid;
-            //     this.g.setParameter('senderId', currentUser.uid);
-
-            // const fullName = currentUser.firstname + ' ' + currentUser.lastname;
-            // this.g.setParameter('userFullname', fullName);
-            // this.g.setAttributeParameter('userFullname', fullName);
-            // this.g.setParameter('userEmail', currentUser.email);
-            // this.g.setAttributeParameter('userEmail', currentUser.email);
-
-            //     // if(currentUser.firstname || currentUser.lastname){
-            //     //     this.g.wdLog([' ---------------- 13 fullname ---------------- ']);
-            //     //     const fullName = currentUser.firstname + ' ' + currentUser.lastname;
-            //     //     this.g.setParameter('userFullname', fullName);
-            //     //     this.g.setAttributeParameter('userFullname', fullName);
-            //     // }
-            //     // if(currentUser.email){
-            //     //     this.g.wdLog([' ---------------- 13 email ---------------- ']);
-            //     //     this.g.setParameter('userEmail', currentUser.email);
-            //     //     this.g.setAttributeParameter('userEmail', currentUser.email);
-            //     // }
-
-            //     // this.g.setParameter('isLogged', true);
-            //     // this.g.setParameter('attributes', this.setAttributesFromStorageService());
-            //     // this.startNwConversation();
-            //     //this.startUI();
-            //     // this.g.wdLog([' 13 - IMPOSTO STATO CONNESSO UTENTE ']);
-            //     // this.presenceService.setPresence(currentUser.uid);
-            // 
+
         } else {
             //  AUTENTICAZIONE ANONIMA
             this.logger.debug('[APP-COMP]  ---------------- 14 ---------------- ');
@@ -543,9 +528,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     this.g.setAttributeParameter('userEmail', user.email);
                 }
             });
-            // this.authService.anonymousAuthentication();
-            // this.g.wdLog([' authenticateFirebaseAnonymously']);
-            // this.authService.authenticateFirebaseAnonymously();
         }
     }
 
@@ -599,8 +581,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             this.logger.error('[APP-COMP] signInAnonymous ERR', error);
             return Promise.reject(error);
         });
-        // this.authService.anonymousAuthentication();
-        // this.authService.authenticateFirebaseAnonymously();
     }
     // ========= end:: AUTHENTICATION ============//
 

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

@@ -42,7 +42,7 @@ 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 { isUserBanned } from 'src/chat21-core/utils/utils-message';
+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';
@@ -165,6 +165,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   public isButtonUrl: boolean = false;
   public buttonClicked: any;
+  public startTime: Date = new Date(); 
   private logger: LoggerService = LoggerInstance.getInstance();
 
   constructor(
@@ -890,6 +891,12 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       }else {
         this.footerMessagePlaceholder = '';
       }
+
+      //check if redirect message is present inside message object 
+      if(msg.type === 'redirect' && isJustRecived(this.startTime.getTime(), msg.timestamp)){
+        let button = { link: msg.metadata.src, target: msg.metadata.target}
+        this.openLink(button)
+      }
     }
 
   }

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

@@ -109,14 +109,17 @@
                           </div>
 
                           <!-- carousel -->
-                          <!-- <div *ngIf="message?.attributes && message?.attributes?.attachment && message?.attributes?.attachment?.gallery" [ngClass]="{'slide-in-left': false}" class="carousel_container">
+                          <div *ngIf="message?.attributes && message?.attributes?.attachment 
+                                        && message?.attributes?.attachment?.gallery" [ngClass]="{'slide-in-left': false}" class="carousel_container">
                             <chat-carousel class="carousel_container"
                               [message]="message"
+                              [isConversationArchived]="isConversationArchived"
+                              [isLastMessage] = "isLastMessage(message?.uid)"
                               [stylesMap]="stylesMap"
                               (onElementRendered)="onElementRenderedFN($event)"
                               (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
                             </chat-carousel>
-                          </div> -->
+                          </div>
     
                       </div>
 

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

@@ -1,29 +1,35 @@
 <div class="wrapper">
-    <div id="left" class="arrow" (click)="goTo('previous')" >
-        <!-- *ngIf="activeElement > 1" -->
+    <div id="left" class="arrow left" (click)="goTo('previous')" *ngIf="activeElement > 1">
         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/>
         </svg>
     </div>
     <div class="carousel">
-        <div class="card" *ngFor="let card of gallery">
-            <div class="card-image">
-                <img [src]="card?.preview?.src" alt="img" draggable="false">
-            </div>
-            <div class="card-content">
-                <div class="card-title">{{card?.title}}</div>
-                <div class="card-description">{{card?.description}}</div>
-            </div>
-            <div class="buttons" *ngIf="card?.buttons && card?.buttons.length > 0">
-                <div class="single-button action" *ngFor="let button of card?.buttons">
-                    <div>{{button.value}}</div>
+        <!-- <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 class="card-image">
+                    <img [src]="card?.preview?.src" alt="img" draggable="false">
+                </div>
+                <div class="card-content">
+                    <div class="card-title">{{card?.title}}</div>
+                    <div class="card-description">{{card?.description}}</div>
+                </div>
+                <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}"
+                        (click)="actionButtonClick($event, button, i)" >
+                        {{button.value}}
+                    </div>
                 </div>
             </div>
         </div>
+        <!-- <div class="card" style="width: 17px;"></div> -->
     </div>
-    <div id="right" class="arrow" (click)="goTo('next')" *ngIf="activeElement !== gallery.length">
+    <div id="right" class="arrow right" (click)="goTo('next')" *ngIf="activeElement !== gallery.length">
         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"/>
         </svg>
     </div>
-</div>
+</div>

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

@@ -8,7 +8,7 @@
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
 
-    --cardWidth: 240px;
+    --cardWidth: 220px;
 }
 
 
@@ -18,240 +18,243 @@
     position: relative;
     display: flex;
 
-    overflow: scroll;
+    // overflow: scroll;
     gap: 10px;
     margin: 0;
     width: 100%;
     font-size: 14px;
-    margin: 0 25px;
-  }
-    .wrapper .cards-scroll-spacer{
-        -ms-flex-negative: 0;
-        content: "";
-        flex-shrink: 0;
-        width: 17px;
-    }
-    .wrapper div.arrow {
-        top: 50%;
-        height: 40px;
-        width: 40px;
-        cursor: pointer;
-        font-size: 1.25rem;
-        position: absolute;
-        text-align: center;
-        line-height: 50px;
-        background: #fff;
-        border-radius: 50%;
-        box-shadow: 0 3px 6px rgba(0,0,0,0.23);
-        transform: translateY(-50%);
-        transition: transform 0.1s linear;
+    // margin: 0 25px;
+}
+.wrapper div.arrow {
+    top: 50%;
+    height: 40px;
+    width: 40px;
+    cursor: pointer;
+    position: absolute;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.23);
+    transform: translateY(-50%);
+    transition: transform 0.1s linear;
+    z-index: 2;
 
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .wrapper div.arrow:active{
-        transform: translateY(-50%) scale(0.85);
-    }
-    .wrapper div.arrow:first-child{
-        left: 5px;
-    }
-    .wrapper div.arrow:last-child{
-        // right: -22px;
-        // right: 22px;
-        left: calc(var(--cardWidth) - -15px);
-    }
-    .wrapper .carousel{
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: calc((100% / 3) - 12px);
-        align-items: start;
-        overflow: hidden;
-        // scroll-snap-type: x mandatory;
-        gap: 16px;
-        border-radius: 8px;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.wrapper div.arrow:active{
+    transform: translateY(-50%) scale(0.85);
+}
+.wrapper div.arrow:first-child{
+    left: -22px;
+}
+.wrapper div.arrow:last-child{
+    right: -22px;
+}
+.wrapper .carousel{
+    display: grid;
+    align-items: start;
+    grid-auto-flow: column;
+    grid-auto-columns: calc((100% / 3) - 12px);
+    // overflow-x: auto;
+    overflow-x: hidden;
+    scroll-snap-type: x mandatory;
+    gap: 10px;
+    border-radius: 8px;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
 
-        // display: flex;
-        // align-items: flex-start;
-    }
-    .carousel::-webkit-scrollbar {
-        display: none;
-    }
-    .carousel.no-transition {
-        scroll-behavior: auto;
-    }
-    .carousel.dragging {
-        scroll-snap-type: none;
-        scroll-behavior: auto;
-    }
-    .carousel.dragging .card {
-        cursor: grab;
-        user-select: none;
-    }
-    .carousel :where(.card, .card-imgage) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .carousel .card {
-        scroll-snap-align: start;
-        width: var(--cardWidth);
-        background: rgb(255, 255, 255);
-        box-shadow: 0 3px 6px rgba(0,0,0,0.23);
-        cursor: pointer;
-        // padding-bottom: 15px;
-        flex-direction: column;
-        border-radius: 8px;
-        border: 1px solid;
-        border-color: rgb(219, 225, 232);
-    }
+    padding: 10px 0px
+}
+.carousel::-webkit-scrollbar {
+    display: none;
+}
+.carousel.no-transition {
+    scroll-behavior: auto;
+}
+.carousel.dragging {
+    scroll-snap-type: none;
+    scroll-behavior: auto;
+}
+.carousel.dragging .card {
+    cursor: grab;
+    user-select: none;
+}
+.carousel :where(.card, .img) {
+    display: flex;
+    justify-content: center;
+    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);
+}
+.carousel .card .card-image {
+    height: 150px;
+    width: var(--cardWidth);
+}
+.card .card-image img {
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
 
-    .carousel .card-image {
-        height: 170px;
-        width: var(--cardWidth);
-    }
+    background: transparent!important;
+    display: block;
+    max-width: 100% !important;
+    border-radius: 8px 8px 0px 0px;
+}
+.carousel .card .card-content {
+    // font-weight: 500;
+    // font-size: 1.56rem;
+    // margin: 30px 0 5px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding: 0 20px 30px;
 
-    img {
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-    
-        background: transparent!important;
-        display: block;
-        max-width: 100% !important;
-        border-radius: 8px 8px 0px 0px;
+    .card-title{
+        word-wrap: break-word;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 20px;
+        margin-top: 12px;
+        white-space: pre-wrap;
+        width: 100%;
     }
 
-    .carousel .card-content{
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        padding: 0 20px 30px;
-
-        .card-title{
-            word-wrap: break-word;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin-top: 12px;
-            white-space: pre-wrap;
-            width: 100%;
-        }
-
-        .card-description{
-            word-wrap: break-word;
-            font-size: 16px;
-            line-height: 20px;
-            margin-top: 12px;
-            white-space: pre-wrap;
-        }
+    .card-description{
+        word-wrap: break-word;
+        font-size: 16px;
+        line-height: 20px;
+        margin-top: 12px;
+        white-space: pre-wrap;
     }
 
-    .carousel .buttons{
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        width: 100%;
+}
 
+.cards-scroll-spacer{
+    -ms-flex-negative: 0;
+    content: "";
+    flex-shrink: 0;
+    width: 17px;
+}
 
-        .single-button{
-            // border-top-color: rgb(219, 225, 232);
+.carousel .card .buttons{
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    width: 100%;
 
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-            justify-content: center;
-            border-top: 1px solid var(--textColor);
-            cursor: pointer;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            font-weight: 600;
-            height: 45px;
-            padding: 0 10px;
-            -webkit-transition: all .3s;
-            transition: all .3s;
 
-            color: var(--textColor);
-            background: var(--backgroundColor);
-            font-family: 'Muli', sans-serif;
-            font-size: var(--buttonFontSize);
+    .single-button{
+        // border-top-color: rgb(219, 225, 232);
 
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid var(--textColor);
+        cursor: pointer;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        font-weight: 600;
+        // height: 45px;
+        // padding: 0 10px;
+        -webkit-transition: all .3s;
+        transition: all .3s;
 
-            div{
-                overflow: hidden!important;
-                text-align: center;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                width: 100%; 
-            }
+        background: var(--backgroundColor);
+        font-family: 'Muli', sans-serif;
+        font-size: var(--buttonFontSize);
+        -o-text-overflow: ellipsis;
+        text-overflow: ellipsis;
+        // // white-space: nowrap;
+        word-wrap: break-word;
+        letter-spacing: -0.24px;
+        -webkit-font-smoothing: antialiased;
+        color: var(--textColor);
+        line-height: 16px;
+        padding: 8px 16px!important;
 
-            &:focus,
-            &:hover {
-                color: var(--hoverTextColor);
-                background:  var(--hoverBackgroundColor);
-                transform: scale(1.05);
-                .icon-button-action {
-                    svg {
-                        fill: var(--hoverTextColor);
-                    }
+        &:focus,
+        &:hover {
+            color: var(--hoverTextColor);
+            background:  var(--hoverBackgroundColor);
+            // transform: scale(1.05);
+            .icon-button-action {
+                svg {
+                    fill: var(--hoverTextColor);
                 }
             }
-            &:after {
-                content: "";
-                position: absolute;
-                width: 0;
-                height: 0;
-                top: 50%;
-                left: 50%;
-                transform-style: flat;
-                transform: translate3d(-50%,-50%,0);
-                background: rgba(white,.2);
-                border-radius: 100%;
-                transition: width .5s ease, height .5s ease;
+        }
+        &:after {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            top: 50%;
+            left: 50%;
+            transform-style: flat;
+            transform: translate3d(-50%,-50%,0);
+            background: rgba(white,.2);
+            border-radius: 100%;
+            transition: width .5s ease, height .5s ease;
+        }
+        &.active{
+            color: var(--hoverTextColor);
+            background:  var(--hoverBackgroundColor);
+            .icon-button-action {
+                svg {
+                    fill: var(--hoverTextColor);
+                }
             }
+        }
 
 
-        }
+    }
 
-        .single-button:last-child{
-            border-radius: 0px 0px 8px 8px;
-        }
+    .disabled {
+        // border: 1px solid #999999;
+        // background-color: #cccccc;
+        // color: #666666;
+        cursor: default;
+        pointer-events: none;
     }
-//   .card .card-image img {
-//     width: 140px;
-//     height: 140px;
-//     border-radius: 50%;
-//     object-fit: cover;
-//     border: 4px solid #fff;
-//   }
-  .carousel .card h2 {
-    font-weight: 500;
-    font-size: 1.56rem;
-    margin: 30px 0 5px;
-  }
-  .carousel .card span {
+
+    .single-button:last-child{
+        border-radius: 0px 0px 8px 8px;
+    }
+}
+
+.carousel .card span {
     color: #6A6D78;
     font-size: 1.31rem;
-  }
-  @media screen and (max-width: 900px) {
-    .wrapper .carousel {
-      grid-auto-columns: calc((100% / 2) - 9px);
-    }
-  }
-  @media screen and (max-width: 600px) {
-    .wrapper .carousel {
-    //   grid-auto-columns: 100%;
-      grid-auto-columns: 75%;
-    }
-  }
+}
+@media screen and (max-width: 900px) {
+.wrapper .carousel {
+    grid-auto-columns: calc((100% / 2) - 9px);
+}
+}
+@media screen and (max-width: 600px) {
+.wrapper .carousel {
+    grid-auto-columns: var(--cardWidth);
+    // grid-auto-columns: 17px repeat(var(--cardWidth)) 17px;
+}
+}

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

@@ -10,6 +10,8 @@ export class CarouselComponent implements OnInit{
 
   // ========= begin:: Input/Output values ============//
   @Input() message: MessageModel;
+  @Input() isConversationArchived: boolean;
+  @Input() isLastMessage: boolean;
   @Input() stylesMap: Map<string, string>;
   @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()
@@ -26,6 +28,8 @@ export class CarouselComponent implements OnInit{
   textColor: string;
   hoverBackgroundColor: string;
   hoverTextColor: string;
+  type: string;
+  button: any;
 
   constructor(private elementRef: ElementRef) { }
 
@@ -38,9 +42,8 @@ export class CarouselComponent implements OnInit{
 
     
     // this.firstCardWidth = (this.elementRef.nativeElement.querySelector(".card") as HTMLElement).offsetWidth
-    console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
-    // Get the number of cards that can fit in the carousel at once
-    let cardPerView = Math.round(this.carousel.offsetWidth / this.firstCardWidth);
+    // // Get the number of cards that can fit in the carousel at once
+    // let cardPerView = Math.round(this.carousel.offsetWidth / this.firstCardWidth);
 
     // Insert copies of the last few cards to beginning of carousel for infinite scrolling
     // const carouselChildrens = [...this.carousel.children];
@@ -57,15 +60,11 @@ export class CarouselComponent implements OnInit{
     this.carousel.scrollLeft = this.carousel.offsetWidth;
     this.carousel.classList.remove("no-transition");
 
-    
-    console.log('[CAROUSEL-MESSAGE] cardPerView -->', cardPerView, this.carousel.querySelectorAll('.card') )
-
     let currentItem = 0
     // Store items as an array of objects
     const items = this.carousel.querySelectorAll('.card')
 
     this.carousel.addEventListener("scroll", function(el){
-      // console.log('elementttt', el)
       // Find item closest to the goal
       // currentItem = items.reduce((prev, curr) => {
       //   return (Math.abs(curr.offsetY - scrollY - goal) < Math.abs(prev.offsetY - scrollY - goal) ? curr : prev); // return the closest to the goal
@@ -78,34 +77,63 @@ export class CarouselComponent implements OnInit{
     if(this.message && this.message.attributes && this.message.attributes?.attachment && this.message.attributes?.attachment?.gallery){
       this.gallery = this.message.attributes.attachment.gallery
       console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
-    
+      // this.firstCardWidth = (this.elementRef.nativeElement.querySelector(".card") as HTMLElement).offsetWidth
     }
 
-    if(this.stylesMap){
-      if(this.stylesMap.has('buttonFontSize')) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.stylesMap.has('buttonFontSize'));
-      if(this.stylesMap.has('buttonBackgroundColor')) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--backgroundColor', this.stylesMap.has('buttonBackgroundColor'));
-      if(this.stylesMap.has('buttonTextColor')) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.stylesMap.has('buttonTextColor'));
-      if(this.stylesMap.has('buttonHoverBackgroundColor')) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.stylesMap.has('buttonHoverBackgroundColor'));
-      if(this.stylesMap.has('buttonHoverTextColor')) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.stylesMap.has('buttonHoverTextColor'));
+    if(this.stylesMap ){
+      if(this.stylesMap.has('buttonFontSize')) this.elementRef.nativeElement.querySelector('.wrapper').style.setProperty('--buttonFontSize', this.stylesMap.get('buttonFontSize'));
+      if(this.stylesMap.has('buttonBackgroundColor')) this.elementRef.nativeElement.querySelector('.wrapper').style.setProperty('--backgroundColor', this.stylesMap.get('buttonBackgroundColor'));
+      if(this.stylesMap.has('buttonTextColor')) this.elementRef.nativeElement.querySelector('.wrapper').style.setProperty('--textColor', this.stylesMap.get('buttonTextColor'));
+      if(this.stylesMap.has('buttonHoverBackgroundColor')) this.elementRef.nativeElement.querySelector('.wrapper').style.setProperty('--hoverBackgroundColor', this.stylesMap.get('buttonHoverBackgroundColor'));
+      if(this.stylesMap.has('buttonHoverTextColor')) this.elementRef.nativeElement.querySelector('.wrapper').style.setProperty('--hoverTextColor', this.stylesMap.get('buttonHoverTextColor'));
     }
-
-    
+  
   }
 
   goTo(direction: 'next' | 'previous' ){
-    let width = (this.carousel.querySelector(".card") as HTMLElement).offsetWidth
-    let gap = Math.round( 16 / 2)
+    let width = (this.carousel.querySelectorAll(".card")[1] as HTMLElement).offsetWidth
+    let gap = 17
     let cardPerView = Math.round(this.carousel.offsetWidth / width);
 
-    console.log('go to -->', direction, width, 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.activeElement += direction == "previous" ? -1 : 1;
+    // this.carousel.scrollLeft += direction == "previous" ? -(width+gap) : width+gap;
+    this.carousel.scrollLeft += direction == "previous" ? -width : width;
+    this.activeElement += direction == "previous" ? -1 : 1;
 
     // this.carousel.classList.add("no-transition");
     // this.carousel.scrollLeft += width;
     // this.carousel.classList.remove("no-transition");
 
+  }
 
+  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
+      this.gallery[index].buttons.find((element)=> { return element === button}).active = true
+      const spanCheck = this.elementRef.nativeElement.querySelector('.action');
+      if (spanCheck) {
+        // const item = domRepresentation[0] as HTMLInputElement;
+        // if (!spanCheck.classList.contains('active')) {
+        //   spanCheck.classList.add('active');
+        // }
+        // setTimeout(function() {
+        //   if (spanCheck.classList.contains('active')) {
+        //     spanCheck.classList.remove('active');
+        //   }
+        // }, 400);
+        ev.target.classList.add('active')
+        // event.target.classList
+      }
+      const event = { target: this, currentTarget: this}
+      if ( event && event.target ) {
+        const ev = {target: event.target, message: this.message, currentTarget: this }
+        this.onAttachmentButtonClicked.emit(ev);
+      }
+    }
   }
 }

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

@@ -507,6 +507,18 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('fileUploadAccept')) {
                         globals['fileUploadAccept'] = variables['fileUploadAccept'];
                     }
+                    if (variables.hasOwnProperty('displayOnDesktop')) {
+                        globals['displayOnDesktop'] = variables['displayOnDesktop'];
+                    }
+                    if (variables.hasOwnProperty('displayOnMobile')) {
+                        globals['displayOnMobile'] = variables['displayOnMobile'];
+                    }
+                    if (variables.hasOwnProperty('onPageChangeVisibilityDesktop')) {
+                        globals['onPageChangeVisibilityDesktop'] = variables['onPageChangeVisibilityDesktop'];
+                    }
+                    if (variables.hasOwnProperty('onPageChangeVisibilityMobile')) {
+                        globals['onPageChangeVisibilityMobile'] = variables['onPageChangeVisibilityMobile'];
+                    }
                     
                 }
             }
@@ -1023,6 +1035,26 @@ export class GlobalSettingsService {
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > disconnetTime:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.disconnetTime = +TEMP;
+        }
+        TEMP = tiledeskSettings['displayOnDesktop'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > displayOnDesktop:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.displayOnDesktop = (TEMP === true) ? true : false;
+        }
+        TEMP = tiledeskSettings['displayOnMobile'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > displayOnMobile:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.displayOnMobile = (TEMP === true) ? true : false;
+        }
+        TEMP = tiledeskSettings['onPageChangeVisibilityDesktop'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > onPageChangeVisibilityDesktop:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.onPageChangeVisibilityDesktop = TEMP;
+        }
+        TEMP = tiledeskSettings['onPageChangeVisibilityMobile'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > onPageChangeVisibilityMobile:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.onPageChangeVisibilityMobile = TEMP;
         }     
     }
 

package/src/app/utils/globals.ts

@@ -213,6 +213,11 @@ export class Globals {
    telegramUsername: string; // *******  new ********
    fileUploadAccept: string; // *******  new ********
    disconnetTime: number; // *******  new ********
+
+   onPageChangeVisibilityMobile: 'open' | 'close' | 'last'; // *******  new ********
+   onPageChangeVisibilityDesktop: 'open' | 'close' | 'last'; // *******  new ********
+   displayOnMobile: boolean; // *******  new ********
+   displayOnDesktop: boolean; // *******  new ********
   constructor(
   ) { }
 
@@ -402,6 +407,14 @@ export class Globals {
     this.showAttachmentButton = true;
     this.showAllConversations = true;
 
+    //WIDGET VISIBILITY - desktop
+    this.displayOnDesktop = true
+    this.onPageChangeVisibilityDesktop ='close'
+    //WIDGET VISIBILITY - mobile
+    this.displayOnMobile = true
+    this.onPageChangeVisibilityMobile = 'close'
+
+
     // ============ END: SET EXTERNAL PARAMETERS ==============//