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

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

@@ -0,0 +1,147 @@
+import { Component, ElementRef, AfterViewInit, Input, ViewChild } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
+
+@Component({
+  selector: 'chat-audio-track',
+  templateUrl: './audio-track.component.html',
+  styleUrls: ['./audio-track.component.scss']
+})
+export class AudioTrackComponent implements AfterViewInit {
+
+  @ViewChild('audioElement', { static: true }) audioElement!: ElementRef<HTMLAudioElement>;
+  @ViewChild('canvasElement', { static: true }) waveformCanvas!: ElementRef<HTMLCanvasElement>;
+
+  @Input() audioBlob: Blob | null = null;
+  @Input() metadata: any | null = null;
+  @Input() color: string;
+  @Input() fontSize: string;
+  @Input() stylesMap: Map<string, string>;
+
+  audioUrl: SafeUrl | null = null;
+  rawAudioUrl: string | null = null;
+  audioContext!: AudioContext;
+  audioBuffer!: AudioBuffer;
+  audioDuration: number | null = null;
+  currentTime: number = 0;
+  isPlaying: boolean = false;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngAfterViewInit() {
+    console.log('stylesssss', this.stylesMap)
+    if (this.audioBlob) {
+      this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
+      this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
+      this.setupAudioContext();
+    } else {
+      this.rawAudioUrl = this.metadata.src;
+      this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
+      this.setupAudioContext();
+    }
+  }
+
+  async setupAudioContext() {
+    this.audioContext = new AudioContext();
+    if (this.rawAudioUrl) {
+      const response = await fetch(this.rawAudioUrl);
+      const audioData = await response.arrayBuffer();
+      this.audioBuffer = await this.audioContext.decodeAudioData(audioData);
+      this.getAudioDuration();
+      this.drawWaveform(this.audioBuffer);
+    }
+  }
+
+  drawWaveform(audioBuffer: AudioBuffer) {
+    const canvas = this.waveformCanvas.nativeElement;
+    const canvasCtx = canvas.getContext('2d');
+    if (!canvasCtx) return;
+    const width = canvas.width;
+    const height = canvas.height;
+    const rawData = audioBuffer.getChannelData(0);
+
+    const samples = 60;
+    const blockSize = Math.floor(rawData.length / samples);
+    const waveform = new Float32Array(samples);
+  
+    for (let i = 0; i < samples; i++) {
+      let sum = 0;
+      for (let j = 0; j < blockSize; j++) {
+        sum += Math.abs(rawData[i * blockSize + j]);
+      }
+      waveform[i] = sum / blockSize;
+    }
+
+    canvasCtx.clearRect(0, 0, width, height);
+    const padding = 1;
+    const barWidth = (width / samples) - padding * 2;
+    const audio = this.audioElement.nativeElement;
+    const playedPercent = audio.currentTime / this.audioDuration;
+    // console.log('playedPercent: ', audio.currentTime, this.audioDuration);
+    
+    for (let i = 0; i < samples; i++) {
+      var barHeight = waveform[i] * height * 4;
+      if (barHeight < 4) barHeight = 4;
+      const x = i * (barWidth + padding * 2) + padding;
+
+      if (i / samples < playedPercent) {
+        canvasCtx.fillStyle = this.color;
+      } else {
+        canvasCtx.fillStyle = convertColorToRGBA(this.color, 50);;
+      }
+      canvasCtx.fillRect(x, height / 2 - barHeight, barWidth, barHeight);
+      canvasCtx.fillRect(x, height / 2, barWidth, barHeight);
+    }
+  }
+
+  playPauseAudio() {
+    const audio = this.audioElement.nativeElement;
+    if (audio.paused) {
+      this.isPlaying = true;
+      this.updateWaveform();
+      audio.play();
+      this.audioContext.resume();
+    } else {
+      audio.pause();
+      this.isPlaying = false;
+    }
+    audio.ontimeupdate = () => {
+      this.currentTime = audio.currentTime;
+      this.updateWaveform(); 
+    };
+    audio.onended = () => {
+      this.isPlaying = false;
+    };
+  }
+
+
+  updateWaveform() {
+    this.drawWaveform(this.audioBuffer);
+    if (this.isPlaying) {
+      requestAnimationFrame(() => this.updateWaveform());
+    }
+  }
+
+  formatTime(seconds: number): string {
+    const minutes = Math.floor(seconds / 60);
+    const sec = Math.floor(seconds % 60);
+    return `${minutes}:${sec < 10 ? '0' + sec : sec}`;
+  }
+
+  getAudioDuration() {
+    const audio = new Audio();
+    audio.src = this.rawAudioUrl!;
+    audio.addEventListener('loadedmetadata', () => {
+      if (audio.duration === Infinity) {
+        audio.currentTime = Number.MAX_SAFE_INTEGER;
+        audio.ontimeupdate = () => {
+          audio.ontimeupdate = null; 
+          audio.currentTime = 0;
+          this.audioDuration = audio.duration;
+        };
+      } else {
+        this.audioDuration = audio.duration;
+      }
+    });
+  }
+}

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

@@ -1,9 +1,26 @@
 <!-- [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"
@@ -36,10 +53,18 @@
         (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> -->
+
+      <chat-audio-track  *ngIf="isAudio(message)"
+        [metadata]="message.metadata"
+        [color]="fontColor"
+        [fontSize]="fontSize"
+        [stylesMap]="stylesMap">
+      </chat-audio-track>
+
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
         [metadata]="message.metadata"
@@ -51,7 +76,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" >
+      <div *ngIf="message?.text && !isAudio(message)" >
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"
@@ -69,16 +94,7 @@
           [themeColor]="stylesMap.get('themeColor')"
           [foregroundColor]="stylesMap.get('foregroundColor')">
         </chat-html>
-        <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
-        <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
-            is ignored</div>
-        <ng-template #contentPopup>
-            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
-                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
-        </ng-template>
-        <ng-template #contentNewTab>
-            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
-        </ng-template> -->
+
       </div>
   
     </div>

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

@@ -5,6 +5,9 @@
     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);
@@ -26,4 +29,8 @@
         height: auto;
         object-fit: cover;
     }
+
+    chat-audio-track {
+        display: flex;
+    }
 }

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

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

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"
+    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
     this.disconnetTime = 0
 

package/src/assets/twp/blank.html

@@ -148,6 +148,9 @@
     <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
     <meta property="og:locale" content="en">
     
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+
 
     <script type="application/javascript">
         window.tiledeskSettings = {
@@ -307,11 +310,5 @@
     <div id="preloader">
         <div class="loader"></div>
     </div>
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-</div>
 </body>
 </html>

package/src/assets/twp/chatbot-panel.html

@@ -438,10 +438,12 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
-
+  
     <!-- <script type="application/javascript">
         window.tiledeskSettings = {
             marginX: "100px",
@@ -592,7 +594,7 @@
         }
 
         window.onload = function() {
-            document.getElementById("tiledesk_widgetTitle").innerHTML = tiledesk_widgetTitle;
+            document.getElementById("tiledesk_widgetTitle").value = tiledesk_widgetTitle;
         }
 
 
@@ -712,15 +714,5 @@
 </script>
 
 <!-- Google Analytics -->
-
-
-
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
-</div>
 </body>
 </html>

package/src/assets/twp/index-dev.html

@@ -469,8 +469,10 @@
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
-    <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
+    <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
 
     <script type="application/javascript">
         window.tiledeskSettings = {
@@ -504,8 +506,8 @@
                 document.getElementById('events').scrollTop = document.getElementById('events').scrollHeight
             }
 
-            document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
-            document.getElementById("project_name").innerHTML = project_name;
+            document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
+            document.getElementById("project_name").value = project_name;
         });
 
         window.Tiledesk('onBeforeInit', function(event_data) {
@@ -518,7 +520,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
+                    document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -1444,8 +1446,8 @@
         // console.log('project_name: ', project_name);
         
         // window.onload = function() {
-        //     document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
-        //     document.getElementById("project_name").innerHTML = project_name;
+        //     document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
+        //     document.getElementById("project_name").value = project_name;
         // }
 
 
@@ -2616,15 +2618,5 @@
 </script> -->
 
 <!-- Google Analytics -->
-
-
-
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
-</div>
 </body>
 </html>

package/src/assets/twp/index.html

@@ -245,7 +245,10 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
+    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
@@ -297,7 +300,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
+                    document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -436,8 +439,8 @@
         // console.log('project_name: ', project_name);
 
         window.onload = function() {
-            document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
-            document.getElementById("project_name").innerHTML = project_name;
+            document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
+            document.getElementById("project_name").value = project_name;
             
             if(role !== 'agent'){
                 document.getElementById("testPageButton").style.display = 'block'
@@ -629,14 +632,5 @@
 </script> -->
 
 <!-- Google Analytics -->
-
-
-
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-</div>
 </body>
 </html>