@chat21/chat21-web-widget 5.0.82 → 5.0.83-rc.2

package/CHANGELOG.md

@@ -6,6 +6,12 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.83-rc.2
+- **changed**: ui improvements on audio elements 
+
+# 5.0.83-rc.1
+- **added**: ability to send and receive voice message into the conversation
+
 # 5.0.82 in PROD
 
 # 5.0.82-rc.4

package/package.json

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

package/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ConversationContentComponent } from './component/conversation-detail/co
 import { ConversationFooterComponent } from './component/conversation-detail/conversation-footer/conversation-footer.component';
 import { ConversationInternalFrameComponent } from './component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component';
 import { ConversationPreviewComponent } from './component/conversation-detail/conversation-preview/conversation-preview.component';
+import { ConversationAudioRecorderComponent } from './component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component';
 /** CONVERSATION-DETAIL COMPONENTS */
 import { BubbleMessageComponent } from './component/message/bubble-message/bubble-message.component';
 import { AvatarComponent } from './component/message/avatar/avatar.component';
@@ -23,7 +24,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 { AudioTrackComponent } from './component/message/audio-track/audio-track.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -137,6 +138,7 @@ import { NetworkOfflineComponent } from './component/network-offline/network-off
 
 
 
+
 const appInitializerFn = (appConfig: AppConfigService, brandService: BrandService, logger: NGXLogger) => {
   return async() => {
     let customLogger = new CustomLogger(logger)
@@ -275,6 +277,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationFooterComponent,
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
+    ConversationAudioRecorderComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,
@@ -286,6 +289,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ActionButtonComponent,
     LinkButtonComponent,
     TextButtonComponent,
+    AudioTrackComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
@@ -294,9 +298,9 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     SafeHtmlPipe,
     LikeUnlikeComponent,
     TooltipDirective,
-    AudioComponent,
     CarouselComponent,
-    NetworkOfflineComponent
+    NetworkOfflineComponent,
+    
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,103 @@
+
+@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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,96 @@
+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/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -7,7 +7,7 @@
 <!-- TEXTAREA + ICONS: conv active-->
 <div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
     
-    <div class="icons-container">
+    <div *ngIf="!isStopRec" class="icons-container">
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentButton == true" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
             <span class="v-align-center">
@@ -44,7 +44,7 @@
 
 
 
-    <div class="visible-text-area"  [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+    <div *ngIf="!isStopRec" class="visible-text-area"  [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
         <!-- isFilePendingToUpload || -->
       <textarea 
         [attr.disabled] = "(hideTextReply)? true : null"
@@ -67,13 +67,24 @@
     </div>
 
     <!-- ICON SEND -->
-    <div tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="textInputTextArea && !isStopRec" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" 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>
     </div>
+
+    <!-- ICON REC -->
+    <div *ngIf="!textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+        <chat-audio-recorder
+            (startRecordingEvent)="onStartRecording()"
+            (deleteRecordingEvent)="onDeleteRecording()"
+            (endRecordingEvent)="onEndRecording($event)"
+            (sendRecordingEvent)="onSendRecording($event)"
+            [stylesMap]="stylesMap">
+        </chat-audio-recorder>
+    </div>
 </div>
 
 

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

@@ -7,14 +7,16 @@
     display: flex;
     width: 100%;
     align-items: center;
-    gap: 10px;
+    gap: 0px;
     justify-content: space-between;
 }
 
 .icons-container{
     display: flex;
     align-self: flex-end;
-    margin-left: 8px
+    margin-left: 8px;
+    gap: 2px;
+    margin-right: 8px;
 }
 
 .visible-text-area {
@@ -31,7 +33,6 @@
 .chat21-textarea-button {
     fill: var(--icon-fill-color);
     pointer-events: auto;
-
     height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
@@ -185,11 +186,29 @@ textarea:active{
 }
 
 #chat21-button-send {
-    // right: 8px;
-    // bottom: 0;
     display: flex;
     align-self: flex-end;
-    margin: 0 8px
+    margin: 0 8px;
+    width: 34px;
+    text-align: center;
+    justify-content: center;
+}
+
+#chat21-button-rec {
+    display: flex;
+    width: 34px;
+    text-align: center;
+    justify-content: center;
+    height: var(--chat-footer-height);
+    &.active{
+        width: 100%;
+    }
+    chat-audio-recorder {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 #chat21-file{
@@ -337,7 +356,4 @@ textarea:active{
     // left: 10px;
     border: none;
     margin: -2px -2px 0px;
-
-}
-
-
+}