@chat21/chat21-web-widget 5.0.66 → 5.0.68

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.68 in PROD
+- bug-fixed: metadata.includes is not a function at isAudio function
+
+### 5.0.67 in PROD
+- bug-fixed: when refresh the page and an already open conversation is selected, footer is blocked 
+- bug-fix: pdf preview image is not contained into its container
+- bug-fixed: cannot push isHere() for presence management if user is disconnected and a notification is received
+
 ### 5.0.66 in PROD
 - added: LWT e imHere() for presence management
 

package/package.json

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

package/src/app/app.component.ts

@@ -432,7 +432,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         const subUserLogOut = this.messagingAuthService.BSSignOut.subscribe((state) => {
             // that.ngZone.run(() => {
-            console.log('[FORCE] messagingAuthService BSSignOut', state, this.forceDisconnect)
+            this.logger.log('[FORCE] messagingAuthService BSSignOut', state, this.forceDisconnect)
             if (state === true && !this.forceDisconnect) { //state = true -> user has logged out
                 /** ho effettuato il logout: nascondo il widget */
                 that.logger.debug('[APP-COMP] sono nel caso logout -1');
@@ -1507,7 +1507,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             // this.g.windowContext.window.document.title = this.tabTitle
         } else {
             // TAB IS ACTIVE --> restore title and DO NOT SOUND
-            this.presenceService.imHere()
+            if(!this.forceDisconnect){
+                this.presenceService.imHere()
+            }
             clearInterval(this.setIntervalTime)
             this.setIntervalTime = null;
             this.isTabVisible = true;
@@ -1587,7 +1589,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.debug('[APP-COMP] openCloseWidget', recipientId, this.g.isOpen, this.g.startFromHome);
         if (this.g.isOpen === false) {
             if(this.forceDisconnect){
-                console.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
+                this.logger.log('[FORCE] onOpenCloseWidget --> reconnect', this.forceDisconnect)
                 this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
                 this.forceDisconnect = false;
             }
@@ -1729,7 +1731,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             if (this.g.isOpen === false) {
 
                 if(this.forceDisconnect){
-                    console.log('[FORCE] onSelectedConversation --> reconnect', this.forceDisconnect)
+                    this.logger.log('[FORCE] onSelectedConversation --> reconnect', this.forceDisconnect)
                     this.messagingAuthService.createCustomToken(this.g.tiledeskToken)
                     this.forceDisconnect = false;
                 }
@@ -2095,14 +2097,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
     private listenToWidgetClick(){
+        const that = this
         let clickTimeout = setTimeout(() => {
-            console.log('[FORCE] --> NO INTERACTION: disconnection... <--- ')
+            that.logger.log('[FORCE] --> NO INTERACTION: disconnection... <--- ')
             //disconnect 
-            this.forceDisconnect = true
-            this.messagingAuthService.logout()
-        }, this.g.disconnetTime * 1000);
+            that.forceDisconnect = true
+            that.messagingAuthService.logout()
+        }, that.g.disconnetTime * 1000);
         window.addEventListener("click", function(){
-            console.log('[FORCE] <<INTERACTION>> within 1 minute')
+            that.logger.log('[FORCE] <<INTERACTION>> within 1 minute')
             clearTimeout(clickTimeout)
         })
     }

package/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { ImageComponent } from './component/message/image/image.component';
 import { InfoMessageComponent } from './component/message/info-message/info-message.component';
 import { HtmlComponent } from './component/message/html/html.component';
 import { FrameComponent } from './component/message/frame/frame.component';
+import { AudioComponent } from './component/message/audio/audio.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -130,6 +131,8 @@ import { StarRatingWidgetService } from './providers/star-rating-widget.service'
 import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike.component';
 import { Rules } from './utils/rules';
 import { ScriptService } from 'src/chat21-core/providers/scripts/script.service';
+import { CarouselComponent } from './component/message/carousel/carousel.component';
+
 
 
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
@@ -287,7 +290,9 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     DateAgoPipe,
     SafeHtmlPipe,
     LikeUnlikeComponent,
-    TooltipDirective
+    TooltipDirective,
+    AudioComponent,
+    CarouselComponent
   ],
   imports: [
     BrowserModule,

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

@@ -107,6 +107,16 @@
                                   (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
                               </chat-message-attachment>
                           </div>
+
+                          <!-- carousel -->
+                          <!-- <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"
+                              [stylesMap]="stylesMap"
+                              (onElementRendered)="onElementRenderedFN($event)"
+                              (onAttachmentButtonClicked)="onAttachmentButtonClickedFN($event)">
+                            </chat-carousel>
+                          </div> -->
     
                       </div>
 

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

@@ -135,6 +135,10 @@
                     align-content: center;
                     justify-content: flex-end;
                 }
+                .carousel_container{
+                    margin: 0px 20px; 
+                }
+            
                 .msg_info_container{
                     text-align: center;
                     padding: 0px 0px 6px 0px

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

@@ -1 +1,11 @@
-<p>conversation-emojii works!</p>
+<emoji-mart id="emoji-mart"
+    class="emoji-mart"
+    [showPreview]="emojiiOptions?.showPreview"
+    [color]="stylesMap?.get('themeColor')" 
+    [perLine]="emojiiOptions?.emojiPerLine"
+    [totalFrequentLines]="emojiiOptions?.totalFrequentLines"
+    [enableSearch]="emojiiOptions?.enableSearch"
+    [darkMode]="emojiiOptions?.darkMode"
+    [include]="emojiiOptions?.include"
+    (emojiSelect)="addEmojiFN($event)">
+</emoji-mart>

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

@@ -0,0 +1,8 @@
+.emoji-mart {
+    position: absolute;
+    // bottom: 40px;
+    // left: 10px;
+    border: none;
+    margin: -2px -2px 0px;
+
+}

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

@@ -1,10 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'chat-conversation-emojii',
   templateUrl: './conversation-emojii.component.html',
   styleUrls: ['./conversation-emojii.component.scss']
 })
-export class ConversationEmojiiComponent {
+export class ConversationEmojiiComponent implements OnInit {
+
+  @Input() var: string;
+  @Output() addEmoji = new EventEmitter();
+  
+  emojiiOptions = {
+    emojiPerLine : 9,
+    totalFrequentLines: 1,
+    showPreview: false,
+    darkMode: false,
+    enableSearch: false,
+    include: [ 'recent', 'people', 'nature', 'activity', 'flags']
+  }
+
+  constructor(){}
+
+  ngOnInit(): void {
+    console.log('varrrrr', this.var)
+  }
+
+  addEmojiFN(event){
+    this.addEmoji.emit(event)
+  }
 
 }

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

@@ -31,11 +31,11 @@
         <!-- ICON EMOJII -->
         <label 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" width="24" height="24" viewBox="0 0 28 28" >
-                    <path d="M0 0h24v24H0V0z" fill="none"/>
-                    <circle cx="15.5" cy="9.5" r="1.5"/>
-                    <circle cx="8.5" cy="9.5" r="1.5"/>
-                    <path d="M12 16c-1.48 0-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5s4.32-1.45 5.12-3.5h-1.67c-.7 1.19-1.97 2-3.45 2zm-.01-14C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
+                    <circle cx="15.02" cy="9.86" r="1.29"/>
+                    <circle cx="9.02" cy="9.86" r="1.29"/>
+                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/>
                 </svg>
             </span>
         </label>
@@ -79,6 +79,7 @@
 
 <!-- EMOJII PICKER-->
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container"  id="emoji-mart-container" #emoji_mart_container>
+    <!-- <ng-container #emojii_container></ng-container> -->
     <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"

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

@@ -48,6 +48,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onBackButton = new EventEmitter()
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
+  // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
   @ViewChild('emoji_mart_container', {read: ViewContainerRef}) public divEmojiiContainer: ViewContainerRef;
   // ========= begin:: send image ======= //
   selectedFiles: FileList;
@@ -454,12 +455,18 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   async onEmojiiPickerClicked(){
     // if(this.loadPickerModule){
     //   this.loadPickerModule = false;
-    //   const { default: PickerModule} = await import("@ctrl/ngx-emoji-mart");
+    //   // this.divEmojiiContainer.clear();
+    //   this.vcref.clear();
+    //   const { PickerModule } = await import("@ctrl/ngx-emoji-mart");
     //   import('../conversation-emojii/conversation-emojii.component').then(({ConversationEmojiiComponent})=> {
-    //     this.divEmojiiContainer.clear();
-    //     const instance = this.divEmojiiContainer.createComponent(ConversationEmojiiComponent);
-    //     this.divEmojiiContainer.createEmbeddedView()
-    //     this.divEmojiiContainer.insert(instance.hostView);
+    //     // const instance = this.divEmojiiContainer.createComponent(ConversationEmojiiComponent);
+    //     // // this.divEmojiiContainer.createEmbeddedView(instance.hostView)
+    //     // this.divEmojiiContainer.insert(instance.hostView);
+    //     // this.divEmojiiContainer = this.selector.createComponent(ConversationEmojiiComponent);
+    //     let greetcomp = this.vcref.createComponent(
+    //       this.cfr.resolveComponentFactory(ConversationEmojiiComponent)
+    //     );
+    //     greetcomp.instance.var = 'ssssss'
     //   });
     //   // this.divEmojiiContainer.nativeElement.insertAdjacentHTML('afterbegin', '<emoji-mart id="emoji-mart"' +
     //   // //  '*ngIf="showEmojiPicker"'+

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

@@ -148,8 +148,8 @@ export class ConversationPreviewComponent implements OnInit {
         const metadata = {
           'name': imageXLoad.title,
           'src': that.sanitizer.bypassSecurityTrustUrl(imageXLoad.src),
-          'width': 80,
-          'height': 106,
+          'width': '80px',
+          'height': '106px',
           'type': attachment.metadata.type,
           'uid': attachment.metadata.uid
         };
@@ -158,6 +158,7 @@ export class ConversationPreviewComponent implements OnInit {
         that.arrayFiles.push({metadata});
         if (!that.fileSelected) {
           that.fileSelected = Object.assign({}, metadata)
+          that.fileSelected = Object.assign(that.fileSelected, that.getMetadataSize(that.fileSelected))
         }
       };
     }

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

@@ -0,0 +1,20 @@
+
+
+<div id="audio_container" #audio_container> 
+
+    <audio aria-label="traccia audio" #audio_msg controls controlsList="nodownload" id="audio_msg" (pause)="pauseAudioMsg($event)" (play)="playAudioMsg($event)" (timeupdate)="updateTimeAudioMsg($event)">
+        <source [src]="metadata?.src" [type]="metadata?.type">
+        <!-- {{metadata?.src}} -->
+        <!-- controlsList="nodownload" -->
+    </audio>
+
+    <!-- <button id="play-icon" (click)="onPlayPause('play')" *ngIf="status === 'play'">
+        <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 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>
+    </button> 
+    <button id="pause-icon" (click)="onPlayPause('pause')" *ngIf="status === 'pause'">
+        <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="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+    </button>
+    <div id="duration" #duration>0:00</div>
+    <input type="range" id="seek-slider" max="100" value="0"> -->
+</div>
+

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

@@ -0,0 +1,122 @@
+#audio_container{
+    display: flex;
+}
+
+#play-icon,
+#pause-icon {
+    margin: 20px 2.5% 10px 2.5%;
+}
+
+.time {
+    display: inline-block;
+    width: 37px;
+    text-align: center;
+    font-size: 20px;
+    margin: 28.5px 0 18.5px 0;
+    float: left;
+}
+output {
+    display: inline-block;
+    width: 32px;
+    text-align: center;
+    font-size: 20px;
+    margin: 10px 2.5% 0 5%;
+    float: left;
+    clear: left;
+}
+
+input[type="range"] {
+    position: relative;
+    -webkit-appearance: none;
+    width: 48%;
+    margin: 0;
+    padding: 0;
+    height: 19px;
+    margin: 30px 2.5% 20px 2.5%;
+    float: left;
+    outline: none;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::before {
+    position: absolute;
+    content: "";
+    top: 8px;
+    left: 0;
+    width: var(--seek-before-width);
+    height: 3px;
+    background-color: #007db5;
+    cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    margin: -7px 0 0 0;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-moz-range-progress {
+    background-color: #007db5;
+}
+input[type="range"]::-moz-focus-outer {
+    border: 0;
+}
+input[type="range"]::-moz-range-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: transparent;
+    border: solid transparent;
+    color: transparent;
+}
+input[type="range"]::-ms-fill-lower {
+    background-color: #007db5;
+}
+input[type="range"]::-ms-fill-upper {
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-ms-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-ms-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}

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

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

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

@@ -0,0 +1,123 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+// import lottieWeb from 'https://cdn.skypack.dev/lottie-web';
+
+@Component({
+  selector: 'chat-audio',
+  templateUrl: './audio.component.html',
+  styleUrls: ['./audio.component.scss']
+})
+export class AudioComponent implements OnInit {
+
+  @Input() metadata: any;
+  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
+
+  uidAudioPlayng: string = ''
+  divPlay: HTMLAudioElement
+  playState: HTMLElement
+  status: 'play' | 'pause' = 'play'
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    // console.log('metadataaaaaa', this.metadata)
+    // this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
+    // this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
+  }
+
+  onPlayPause(status: string){
+    // const divPlay = (<HTMLAudioElement>document.getElementById('audio_msg'));
+    if(status === 'play') {
+      this.divPlay.play();
+      this.status = 'pause'
+    } else {
+      this.divPlay.pause();
+      this.status = 'play'
+    }
+  }
+  
+  pauseAudioMsg(e) {
+    try {
+      // stop all audio
+      if (this.uidAudioPlayng) {
+        const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
+        divPlay.pause();
+        // console.log('> pausa: ', divPlay);
+      }
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+
+    try {
+      // console.log(e.target.id);
+      if (this.uidAudioPlayng) {
+        this.uidAudioPlayng = '';
+      }
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+  playAudioMsg(e) {
+    // stop all audio
+    if (this.uidAudioPlayng) {
+      const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
+      divPlay.pause();
+      // console.log('> pausa: ', divPlay);
+    }
+    try {
+      // console.log(e.target.id);
+      // set uid audio playng
+      this.uidAudioPlayng = e.target.id;
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+  updateTimeAudioMsg(ev){
+    var currTime = Math.floor(ev.target.currentTime); 
+    var duration = Math.floor(ev.target.duration);
+
+    let minutes = 0;
+    if(currTime > 60){
+      minutes = Math.floor(currTime / 60);
+    }
+    const seconds = currTime - minutes * 60
+    // console.log('timeeee', minutes + ':' + seconds )
+    // this.playState.innerHTML = minutes + ':' + seconds
+  }
+
+
+
+  /**
+   *
+   * @param uid
+   */
+  playPausaAudioMsg(uid: string) {
+    // console.log('playPausaAudioMsg: ', uid);
+    const that = this;
+    try {
+      const divPause = (<HTMLAudioElement>document.getElementById(that.uidAudioPlayng));
+      const divPlay = (<HTMLAudioElement>document.getElementById(uid));
+      if (divPause) {
+        divPause.pause();
+      }
+
+      if (that.uidAudioPlayng === uid) {
+        that.uidAudioPlayng = '';
+      } else {
+        if (divPlay) {
+          setTimeout(function() {
+            // if (that.g.autoplay_activated) {
+            //   divPlay.play();
+            // }
+            this.uidAudioPlayng = uid;
+          }, 300);
+        }
+      }
+
+    } catch (error) {
+      console.log('> Error is: ', error);
+    }
+  }
+
+}

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

@@ -36,6 +36,11 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
+      <chat-audio *ngIf="isAudio(message)"
+        [metadata]="message.metadata" 
+        (onElementRendered)="onElementRenderedFN($event)">
+      </chat-audio>
+
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
         [width]="message.metadata.width"

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -5,7 +5,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
+import { isAudio, isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
@@ -27,6 +27,7 @@ export class BubbleMessageComponent implements OnInit {
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
+  isAudio = isAudio;
   convertColorToRGBA = convertColorToRGBA
 
  // ========== begin:: check message type functions ======= //

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

@@ -0,0 +1,29 @@
+<div class="wrapper">
+    <div id="left" class="arrow" (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>
+            </div>
+        </div>
+    </div>
+    <div id="right" class="arrow" (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>