@chat21/chat21-web-widget 5.0.66 → 5.0.68

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

@@ -0,0 +1,257 @@
+@import 'src/app/sass/variables';
+
+:host {
+    --backgroundColor: #{var(--blue)};
+    --textColor: #{var(--bck-msg-sent)};
+    --hoverBackgroundColor: #{var(--bck-msg-sent)};
+    --hoverTextColor: #{var(--blue)};
+    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --max-width: #{var(--button-in-msg-max-width)};
+
+    --cardWidth: 240px;
+}
+
+
+.wrapper {
+    // max-width: 1100px;
+    width: 100%;
+    position: relative;
+    display: flex;
+
+    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;
+
+        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;
+        // 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);
+    }
+
+    .carousel .card-image {
+        height: 170px;
+        width: var(--cardWidth);
+    }
+
+    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;
+    }
+
+    .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;
+        }
+    }
+
+    .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%;
+
+
+        .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;
+
+            color: var(--textColor);
+            background: var(--backgroundColor);
+            font-family: 'Muli', sans-serif;
+            font-size: var(--buttonFontSize);
+
+
+            div{
+                overflow: hidden!important;
+                text-align: center;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 100%; 
+            }
+
+            &: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;
+            }
+
+
+        }
+
+        .single-button:last-child{
+            border-radius: 0px 0px 8px 8px;
+        }
+    }
+//   .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 {
+    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%;
+    }
+  }

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarouselComponent } from './carousel.component';
+
+describe('CarouselComponent', () => {
+  let component: CarouselComponent;
+  let fixture: ComponentFixture<CarouselComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CarouselComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CarouselComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,111 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChildren } from '@angular/core';
+import { MessageModel } from 'src/chat21-core/models/message';
+
+@Component({
+  selector: 'chat-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements OnInit{
+
+  // ========= begin:: Input/Output values ============//
+  @Input() message: MessageModel;
+  @Input() stylesMap: Map<string, string>;
+  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()
+  // ========= end:: Input/Output values ============//
+  gallery: any[]
+
+  wrapper: HTMLElement;
+  carousel: HTMLElement;
+  firstCardWidth: number;
+  activeElement: number = 1;
+
+  fontSize: string;
+  backgroundColor: string;
+  textColor: string;
+  hoverBackgroundColor: string;
+  hoverTextColor: string;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    console.log('[CAROUSEL-MESSAGE] hello', this.message)
+
+    
+    this.wrapper = this.elementRef.nativeElement.querySelector('.wrapper')
+    this.carousel = this.elementRef.nativeElement.querySelector('.carousel') 
+
+    
+    // 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);
+
+    // Insert copies of the last few cards to beginning of carousel for infinite scrolling
+    // const carouselChildrens = [...this.carousel.children];
+    // carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
+    //   this.carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
+    // });
+    // // Insert copies of the first few cards to end of carousel for infinite scrolling
+    // carouselChildrens.slice(0, cardPerView).forEach(card => {
+    //   this.carousel.insertAdjacentHTML("beforeend", card.outerHTML);
+    // });
+
+    // Scroll the carousel at appropriate postition to hide first few duplicate cards on Firefox
+    this.carousel.classList.add("no-transition");
+    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
+      // });
+    });
+
+  }
+
+  ngOnChanges(changes: SimpleChanges){
+    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"))
+    
+    }
+
+    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'));
+    }
+
+    
+  }
+
+  goTo(direction: 'next' | 'previous' ){
+    let width = (this.carousel.querySelector(".card") as HTMLElement).offsetWidth
+    let gap = Math.round( 16 / 2)
+    let cardPerView = Math.round(this.carousel.offsetWidth / width);
+
+    console.log('go to -->', direction, width, cardPerView, this.carousel.offsetWidth)
+
+    this.carousel.scrollLeft += direction == "previous" ? -(width+gap) : width+gap;
+    // this.activeElement += direction == "previous" ? -1 : 1;
+
+    // this.carousel.classList.add("no-transition");
+    // this.carousel.scrollLeft += width;
+    // this.carousel.classList.remove("no-transition");
+
+
+  }
+}

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

@@ -997,7 +997,7 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['participants'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > participants:: ', TEMP]);
         if (TEMP !== undefined) {
-            globals.participants = TEMP.split(',').map(key => { return key.trim()});;
+            globals.participants = TEMP.split(',').map(key => { return key.trim()});
         }
         TEMP = tiledeskSettings['whatsappNumber'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > whatsappNumber:: ', TEMP]);

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

@@ -105,14 +105,14 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         this.logger.debug('[FIREBASEConversationHandlerSERVICE] urlNodeFirebase *****', this.urlNodeFirebase);
         const firebaseMessages = this.firebase.database().ref(this.urlNodeFirebase);
         this.ref = firebaseMessages.orderByChild('timestamp').limitToLast(100);
-        this.ref.on('child_added', (childSnapshot) => {
+        this.ref.on('child_added', async (childSnapshot) => {
             that.logger.debug('[FIREBASEConversationHandlerSERVICE] >>>>>>>>>>>>>> child_added: ', childSnapshot.val())
             const msg: MessageModel = childSnapshot.val();        
             msg.uid = childSnapshot.key;
 
             if (msg.attributes && msg.attributes.commands) {
                 this.logger.debug('[FIREBASEConversationHandlerSERVICE] splitted message::::', msg)
-                that.addCommandMessage(msg)
+                await that.addCommandMessage(msg)
             } else {
                 this.logger.debug('[FIREBASEConversationHandlerSERVICE] NOT splitted message::::', msg)
                 that.addedNew(msg)
@@ -255,6 +255,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
 
     
 
+            
             this.addRepalceMessageInArray(msg.uid, msg);
             this.messageAdded.next(msg);
         } else {
@@ -468,59 +469,63 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
     }
 
 
-    private addCommandMessage(msg: MessageModel){
+    private async addCommandMessage(msg: MessageModel): Promise<boolean> {
         const that = this;
         const commands = msg.attributes.commands;
         let i=0;
-        function execute(command){
-            if(command.type === "message"){
-                that.logger.debug('[FIREBASEConversationHandlerSERVICE] 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
-                    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 */
-                    if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
-                        let previewsTimeMsg = msg.timestamp;
-                        commands[i-2]? previewsTimeMsg = commands[i-2].message.timestamp : null;
-                        command.message.timestamp = previewsTimeMsg + 100
-                        commands[i+1]? commands[i+1].time = 0 : null
-                    }
-                } 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, function () {
-                    i += 1
-                    if (i < commands.length) {
-                        execute(commands[i])
+        return new Promise((resolve, reject)=>{
+            function execute(command){
+                if(command.type === "message"){
+                    that.logger.debug('[FIREBASEConversationHandlerSERVICE] 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
+                        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 */
+                        if(!isJustRecived(that.startTime.getTime(), msg.timestamp)){
+                            let previewsTimeMsg = msg.timestamp;
+                            commands[i-2]? previewsTimeMsg = commands[i-2].message.timestamp : null;
+                            command.message.timestamp = previewsTimeMsg + 100
+                            commands[i+1]? commands[i+1].time = 0 : null
+                        }
+                    } 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
+                        }
                     }
-                    else {
-                        that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> last command executed (wait), exit') 
+                    that.generateMessageObject(msg, command.message, function () {
+                        i += 1
+                        if (i < commands.length) {
+                            execute(commands[i])
+                        }
+                        else {
+                            that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> last command executed (wait), exit')
+                            resolve(true)
+                        }
+                    })
+                }else if(command.type === "wait"){
+                    that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> type="wait"', command, i, commands.length)
+                    //publish waiting event to simulate user typing
+                    if(isJustRecived(that.startTime.getTime(), msg.timestamp)){
+                        that.messageWait.next({uid: that.conversationWith, uidUserTypingNow: msg.sender, nameUserTypingNow: msg.sender_fullname, waitTime: command.time, command: command})
                     }
-                })
-            }else if(command.type === "wait"){
-                that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> type="wait"', command, i, commands.length)
-                //publish waiting event to simulate user typing
-                if(isJustRecived(that.startTime.getTime(), msg.timestamp)){
-                    that.messageWait.next({uid: that.conversationWith, uidUserTypingNow: msg.sender, nameUserTypingNow: msg.sender_fullname, waitTime: command.time, command: command})
+                    setTimeout(function() {
+                        i += 1
+                        if (i < commands.length) {
+                            execute(commands[i])
+                        }
+                        else {
+                            that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> last command executed (send message), exit')
+                            resolve(true)
+                        }
+                    },command.time)
                 }
-                setTimeout(function() {
-                    i += 1
-                    if (i < commands.length) {
-                        execute(commands[i])
-                    }
-                    else {
-                        that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> last command executed (send message), exit') 
-                    }
-                },command.time)
             }
-        }
-        execute(commands[0]) //START render first message
+            execute(commands[0]) //START render first message
+        })
     }
 
     private generateMessageObject(message, command_message, callback) {