@chat21/chat21-web-widget 5.0.83-rc.3 → 5.0.83

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

@@ -1,26 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
 <!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null  -->
-
-
+<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0 0px':'0 8px'}" class="messages primary-color">
+  
     
-<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
-  <div>
-    <chat-audio-track  *ngIf="isAudio(message)"
-      [metadata]="message.metadata" 
-    ></chat-audio-track>
-  </div>
-</div> 
-
-
-[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
--->
-
-
-
-
-
-<div id="bubble-message"  class="messages primary-color">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -53,18 +36,10 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
-      <!-- <chat-audio *ngIf="isAudio(message)"
+      <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata" 
         (onElementRendered)="onElementRenderedFN($event)">
-      </chat-audio> -->
-
-      <chat-audio-track  *ngIf="isAudio(message)"
-        [metadata]="message.metadata"
-        [color]="fontColor"
-        [fontSize]="fontSize"
-        [stylesMap]="stylesMap">
-      </chat-audio-track>
-
+      </chat-audio>
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -76,7 +51,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && !isAudio(message)" >
+      <div *ngIf="message?.text" >
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

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

@@ -5,9 +5,6 @@
     border-radius: var(--border-radius-bubble-message);
     padding: 0;
     word-wrap: break-word;
-
-    background: transparent;
-    
     // padding: 14px;
     // padding: 6px 6px 6px 6px;
     // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -29,8 +26,4 @@
         height: auto;
         object-fit: cover;
     }
-
-    chat-audio-track {
-        display: flex;
-    }
 }

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

@@ -42,7 +42,6 @@ export class BubbleMessageComponent implements OnInit {
   constructor(public sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    // console.log("---- > MSG:", this.message);
   }
 
   ngOnChanges() {

package/src/app/modals/confirm-close/confirm-close.component.html

@@ -1,5 +1,32 @@
 <div class="modal-container">
-    CLOSE CONVERSATION MODAL
+    <div class="header">
+        <!-- ICON CLOSE CHAT -->
+        <button tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean" (click)="onBack()">
+            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+                <path fill="none" d="M0 0h24v24H0V0z" />
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                <title id="altIconTitle">{{ translationMap?.get('CLOSE') }}</title>
+            </svg>
+        </button>
+    </div>
+    <div class="content">
+        <div class="text">Are you sure you wanna close this chat?</div>
+        <div class="options">
+
+            <!-- BUTTON CANCEL-->
+            <span class="v-align-center c21-label-button back-button" (click)="onBack()">
+                {{translationMap?.get('BACK')}}
+            </span> 
+
+            <!-- BUTTON CLOSE-->
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('themeForegroundColor') }">
+                <span class="v-align-center c21-label-button">
+                    {{translationMap?.get('CLOSE_CHAT')}}
+                </span> 
+                <div class="clear"></div>
+            </button>
+        </div>
+    </div>
 </div>
 
 

package/src/app/modals/confirm-close/confirm-close.component.scss

@@ -0,0 +1,51 @@
+.modal-container{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.header{
+    display: flex;
+    justify-content: flex-end;
+}
+
+.content{
+    font-size: 1.2em;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    .text{
+        max-width: calc(100% - 30px);
+    }
+    .options{
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 15px;
+
+        &:hover{
+            cursor: pointer;
+        }
+
+        .back-button{
+            color: #777777
+        }
+
+    }
+
+    
+}
+
+.c21-header-button{
+    width: 30px;
+    height: 30px;
+}
+
+button.c21-button-primary{
+    margin: 0 !important;
+    height: 30px !important;
+
+    .c21-label-button{
+        margin: 0 !important;
+    }
+}

package/src/app/modals/confirm-close/confirm-close.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+
 
 @Component({
   selector: 'chat-confirm-close',
@@ -7,18 +8,26 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 })
 export class ConfirmCloseComponent implements OnInit{
   
-  @ViewChild('mydialog') mydialog: ElementRef;
+  @Input() translationMap: Map< string, string>;
+  @Input() stylesMap: Map<string, string>;
+  @Output() onDiaglogClosed = new EventEmitter<{type: string, data: any}>();
 
   constructor() { }
 
   ngOnInit(): void {
-    // console.log('[CONFIRM CLOSE MODAL] onInit-->', this.dialog);
+    console.log('[CONFIRM CLOSE MODAL] onInit');
     // this.dialog.showModal();
   }
 
   ngAfterViewInit(){
-    // console.log('[CONFIRM CLOSE MODAL] ngAfterViewInit-->', this.mydialog);
-    // this.mydialog.nativeElement.showModal()
+  }
+
+  onBack(){
+    this.onDiaglogClosed.emit({type: 'back', data: null});
+  }
+
+  onConfirm(){
+    this.onDiaglogClosed.emit({type: 'confirm', data: null});
   }
 
 }

package/src/app/utils/globals.ts

@@ -388,7 +388,7 @@ export class Globals {
     /**enable user to set a facebook messanger page to chat with */
     this.telegramUsername = ''
     /**enable user to set a telegram number to chat with */
-    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
+    this.fileUploadAccept = "image/*,.pdf,.txt"
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
     this.disconnetTime = 0
 

package/src/assets/i18n/en.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Close chat",
     "MINIMIZE":"Minimize",
     "MAXIMIZE":"Maximize",
+    "CONFIRM_CLOSE_CHAT":"Are you sure you wanna close this chat?",
     
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"you",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"have been added to ",

package/src/assets/i18n/es.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Cerrar chat",
     "MINIMIZE":"Minimizar",
     "MAXIMIZE":"Maximizar",
+    "CONFIRM_CLOSE_CHAT":"¿Estás segura de que quieres cerrar este chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"han sido agregados a ",

package/src/assets/i18n/fr.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Fermer le chat",
     "MINIMIZE":"Minimiser",
     "MAXIMIZE":"Maximiser",
+    "CONFIRM_CLOSE_CHAT":"Etes-vous sûr de vouloir fermer cette discussion?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"toi",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"ont été ajoutés à ",

package/src/assets/i18n/it.json

@@ -55,6 +55,7 @@
     "CLOSE_CHAT": "Chiudi chat",
     "MINIMIZE":"Minimizza",
     "MAXIMIZE":"Massimizza",
+    "CONFIRM_CLOSE_CHAT":"Vuoi davvero chiudere questa chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"sei stato aggiunto ",

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

@@ -1,29 +0,0 @@
-<div class="audio-recorder">
-      <button *ngIf="audioUrl" (click)="deleteRecording()">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
-        <!-- <i class="material-icons">delete_outline</i> -->
-      </button>
-
-      <chat-audio-track  *ngIf="audioBlob && audioUrl"
-        [audioBlob] = "audioBlob"
-        [color]="stylesMap.get('themeColor')"
-        [fontSize]="stylesMap.get('fontSize')"
-        [stylesMap]="stylesMap">
-      </chat-audio-track>
-     
-    <button *ngIf="!audioUrl" class="mic-button" (mousedown)="startRecording()" (mouseup)="stopRecording()">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-        <path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/>
-      </svg>
-    </button>
-    <!-- <button *ngIf="isRecording" (click)="stopRecording()"><i class="material-icons">pause_circle_outline</i></button> -->
-    
-    <button *ngIf="audioUrl" (click)="sendMessage()">
-      <span class="v-align-center">
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="20" width="24" viewBox="0 0 24 20" xml:space="preserve">
-              <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
-          </svg>
-      </span>
-    </button>
-
-</div>

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

@@ -1,103 +0,0 @@
-
-@font-face {
-    font-family: 'Material Icons';
-    src: url('https://fonts.googleapis.com/icon?family=Material+Icons');
-  }
-  
-  .material-icons.mic_none::before {
-    content: 'mic_none';
-  }
-
-.audio-recorder {
-    text-align: center;
-    margin: 0px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    float: left;
-    gap: 10px
-}
-
-chat-audio-track {
-  display: flex;
-  width: 70%;
-  margin: 8px 0;
-  pointer-events: auto;
-  border-radius: var(--chat-footer-border-radius);
-  background-color: var(--chat-footer-background-color);
-}
-
-button {
-    margin: 0px;
-    padding: 0px;
-    font-size: 16px;
-    border: none;
-    background-color: transparent;
-    color: var(--icon-fill-color);
-    fill: var(--icon-fill-color);
-    height: var(--chat-footer-height);
-}
-
-.mic-button {
-    position: relative;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    padding: 20px;
-    border-radius: 50%;
-    overflow: hidden;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .mic-button svg {
-    width: 24px;
-    height: 24px;
-    fill: var(--icon-fill-color);
-  }
-  
-  .mic-button::before {
-    content: '';
-    position: absolute;
-    top: auto;
-    left: auto;
-    width: 35px;
-    height: 35px;
-    background-color: var(--icon-fill-color);
-    border-radius: 50%;
-    transform: scale(0);
-    transition: transform 0.3s ease;
-    transform-origin: center;
-    z-index: -1;
-  }
-  
-  .mic-button:active::before {
-    transform: scale(0.5);
-    animation: pulse 1s infinite ease-in-out;
-  }
-  
-  .mic-button:active {
-    svg {
-        color: #fff;
-        fill: #fff;
-    }
-  }
-
-  @keyframes pulse {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    50% {
-      transform: scale(0.9);
-      opacity: 0.7;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.spec.ts

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

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

@@ -1,96 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-
-@Component({
-  selector: 'chat-audio-recorder',
-  templateUrl: './conversation-audio-recorder.component.html',
-  styleUrls: ['./conversation-audio-recorder.component.scss']
-})
-export class ConversationAudioRecorderComponent {
-
-  @Input() stylesMap: Map<string, string>;
-  @Output() startRecordingEvent = new EventEmitter<void>();
-  @Output() deleteRecordingEvent = new EventEmitter<void>();
-  @Output() endRecordingEvent = new EventEmitter<Blob | null>();
-  @Output() sendRecordingEvent = new EventEmitter<Blob | null>();
-
-  mediaRecorder: MediaRecorder | null = null;
-  audioChunks: Blob[] = [];
-  audioBlob: Blob | null = null;
-  audioUrl: SafeUrl | null = null;
-
-  isRecording = false;
-  rawAudioUrl: string | null = null;
-  isPlaying: boolean = false;
-  startTime: number;
-
-  
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-
-  startRecording() {
-    // console.log('startRecording');
-    this.startTime = Date.now();
-    navigator.mediaDevices.getUserMedia({ audio: true })
-      .then(stream => {
-        this.mediaRecorder = new MediaRecorder(stream);
-        this.mediaRecorder.start();
-        this.isRecording = true;
-        this.startRecordingEvent.emit();
-        this.mediaRecorder.addEventListener('dataavailable', (event) => {
-          this.audioChunks.push(event.data);
-        });
-
-        this.mediaRecorder.addEventListener('stop', () => {
-          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/mpeg' });
-          this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
-          this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
-          this.audioChunks = []; 
-          this.endRecordingEvent.emit(this.audioBlob);
-        });
-      })
-      .catch(error => {
-        console.error('Errore nell’accesso al microfono:', error);
-      });
-  }
-
-  stopRecording() {
-    let endTime = Date.now();
-    let time = endTime - this.startTime;
-    if(time > 500){
-      setTimeout(() => {
-        if (this.mediaRecorder) {
-          this.mediaRecorder.stop();
-          this.isRecording = false;
-        }
-      }, 300);
-      
-    } else {
-      this.audioUrl = null;
-      this.isPlaying = false;
-      this.rawAudioUrl = null;
-      this.audioUrl = null;
-      this.audioBlob = null;
-    }
-
-   
-  }
-
-  deleteRecording() {
-    this.audioUrl = null;
-    this.isPlaying = false;
-    this.rawAudioUrl = null;
-    this.audioUrl = null;
-    this.audioBlob = null;
-    this.deleteRecordingEvent.emit(null);
-  }
-
-  sendMessage(){
-    if (this.audioUrl) {
-      this.sendRecordingEvent.emit(this.audioBlob);
-      this.audioUrl = null;
-    }
-  }
-
-}

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

@@ -1,32 +0,0 @@
-
-<!-- <audio *ngIf="metadata" controls>
-    <source [src]="metadata.src" type="audio/mpeg">
-</audio>  *ngIf="!metadata"-->
-<div class="audio-container">
-  
-    <div class="audio-track">
-        <button *ngIf="!isPlaying" class="play-pause" (click)="playPauseAudio()">
-            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                <path d="M320-200v-560l440 280-440 280Z"/>
-            </svg>
-            <!-- <i class="material-icons">play_arrow</i> -->
-        </button>
-        <button *ngIf="isPlaying" class="play-pause" (click)="playPauseAudio()">
-            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                <path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/>
-            </svg>
-            <!-- <i class="material-icons">pause</i> -->
-        </button>
-        <div class="duration" [style.color]="color" [style.font-size]="fontSize" >
-            <span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
-            <span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
-        </div>
-
-    </div>
-
-    <div class="audio-player-custom">
-        <audio #audioElement [src]="audioUrl"></audio>
-        <canvas #canvasElement class="waveformCanvas"></canvas> 
-    </div>
-
-</div>

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

@@ -1,107 +0,0 @@
-    
-:host {
-    --backgroundColor: #{var(--blue)};
-    --textColor: #{var(--bck-msg-sent)};
-    --hoverBackgroundColor: #{var(--bck-msg-sent)};
-    --hoverTextColor: #{var(--blue)};
-    --max-width: #{var(--button-in-msg-max-width)};
-}
-
-.audio-container{
-    position: relative; 
-    display: inline-flex;
-    width: 100%;
-    padding: 0px 12px;
-    margin: 6px 0px;
-}
-
-audio {
-    width: 272px;
-    height: 30px;
-    margin: 0;
-    padding: 10px;
-}
-
-.audio-recorder {
-    text-align: center;
-    margin: 0px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    float: left;
-}
-
-button {
-    margin: 0px;
-    padding: 0px;
-    font-size: 16px;
-    border: none;
-    background-color: transparent;
-    color: var(--icon-fill-color);
-    fill: var(--icon-fill-color);
-}
-
-.waveformCanvas {
-    width: 100%;
-    height: 28px;
-    z-index: 1;
-    padding: 0px;
-    margin: 0%;
-}
-
-.audio-track {
-    // width: 247px;//272px;
-    // height: 30px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    // margin: 0 13px;
-    margin: 0px;
-    .play-pause {
-        font-size: 20px;
-        width: 30px;
-        background-color: transparent;
-        border-radius: 50%;
-        height: 30px;
-        margin: 0px;
-        transition: background-color 0.5s ease;
-        
-    }
-    .play-pause:hover {
-        // background-color: #ddd;
-        // background-color: rgb(82, 160, 252);
-        background-color: #fff;
-        svg{
-            //fill:#fff;
-            fill: rgb(82, 160, 252);
-        }
-    }
-    .duration {
-        padding: 0 3px;
-    }
-}
-
-.audio-player-custom {
-    // width: 200px;
-    // height: 32px;
-    // margin-left: 75px;
-    // position: absolute;
-    // overflow: hidden;
-    // z-index: 1;
-    // display: flex;
-    // align-items: center;
-
-    // width: calc(100% - 75px);
-    // height: 32px;
-    // margin-left: 65px;
-    // position: absolute;
-    overflow: hidden;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-
-