@chat21/chat21-web-widget 5.0.94-rc4 → 5.0.94-rc7

package/CHANGELOG.md

@@ -6,6 +6,15 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.94-rc7
+- **added**: touchstart and touchend events for mobile mic footer button
+
+# 5.0.94-rc6
+- **bug-fixed**: logoChat is not rendered if contains special characters (ex. "(" or ")" ) in the name of the resource
+
+# 5.0.94-rc5
+- **bug-fixed**: onNewConversationWithMessage create new conv and not use che current one just created
+
 # 5.0.94-rc4
 - **added**: publish onMessageCreated only if status is >= 100
 

package/package.json

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

package/src/app/app.component.scss

@@ -128,47 +128,6 @@ body {
 // 	// -webkit-animation: fade-in-dw-up 0.7s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.8s;
 // 	//         animation: fade-in-dw-up 0.7s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.8s;
 // }
-.avatar-project {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 70px;//52px;
-    width: 80px; //100%;
-    line-height: 52px;
-
-    .avatar-placeholder {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        max-width: 52px;
-        text-align: center;
-        font-size: 20px;
-        color: #ffffff;
-        font-weight: 500;
-    }
-    .avatar-image {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        margin: 0px;
-        left: 0;
-        width: 100%; //90%;
-        height: 100%; //80%;
-        // max-width: 42px;
-        max-height: 100%; //32px;
-        text-align: left;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-attachment: initial;
-        background-position: left;
-        background-origin: content-box;
-    }
-}
-
 
 textarea::placeholder {
     color: var(--gray);  

package/src/app/app.component.ts

@@ -728,7 +728,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         /** allow to start conversation with an hidden message (without publishing 'new_conversation' event) */
         this.logger.debug('[APP-COMP] AppComponent::startNewConversation hiddenMessage',this.g.hiddenMessage );
         if(this.g.hiddenMessage){
-            this.onNewConversationWithMessage(this.g.hiddenMessage)
+            this.onNewConversationWithMessage(newConvId, this.g.hiddenMessage)
         }
 
         this.triggerNewConversationEvent(newConvId);
@@ -1791,24 +1791,20 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
 
-    onNewConversationWithMessage(text: string, subType: string = 'info'){
+    onNewConversationWithMessage(recipientId: string, text: string, subType: string = 'info'){
         this.logger.log('[APP-COMP] onNewConversationWithMessage in APP COMPONENT', text);
 
-        const newConvId = this.generateNewUidConversation();
-        this.g.setParameter('recipientId', newConvId);
-        this.appStorageService.setItem('recipientId', newConvId)
-
         let message: any = {}
         message.attributes = { subtype: subType, ...this.g.attributes}
         message.userAgent = this.g.attributes['client']
-        message.request_id = newConvId
+        message.request_id = recipientId
         message.sourcePage = this.g.attributes['sourcePage']
         message.language = this.g.lang
         message.text = '/'+ text
         message.participants = this.g.participants
         message.departmentid = this.g.attributes.departmentId
         // this.sendMessage(message)
-        this.tiledeskRequestsService.sendMessageToRequest(newConvId, this.g.tiledeskToken, message)
+        this.tiledeskRequestsService.sendMessageToRequest(recipientId, this.g.tiledeskToken, message)
         return;
     }
 

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

@@ -1,31 +1,31 @@
 <div class="audio-recorder">
-      <button *ngIf="audioUrl" (click)="deleteRecording()">
-        <span class="v-align-center">
-          <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> -->
-        </span>
-      </button>
+  <button *ngIf="audioUrl" (click)="deleteRecording()">
+    <span class="v-align-center">
+      <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> -->
+    </span>
+  </button>
 
-      <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
-        [audioBlob] = "audioBlob"
-        [color]="'var(--chat-footer-color)'"
-        [fontSize]="stylesMap.get('fontSize')"
-        [stylesMap]="stylesMap">
-      </chat-audio>
-     
-    <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> -->
+  <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
+    [audioBlob] = "audioBlob"
+    [color]="'var(--chat-footer-color)'"
+    [fontSize]="stylesMap.get('fontSize')"
+    [stylesMap]="stylesMap">
+  </chat-audio>
     
-    <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>
+  <button *ngIf="!audioUrl" class="mic-button" (mousedown)="startRecording($event)" (mouseup)="stopRecording($event)" (touchstart)="startRecording($event)" (touchend)="stopRecording($event)">
+    <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.ts

@@ -29,8 +29,12 @@ export class ConversationAudioRecorderComponent {
   constructor(private sanitizer: DomSanitizer) {}
 
 
-  startRecording() {
+  startRecording(event: Event) {
     // console.log('startRecording');
+    if (event.type === 'touchstart') {
+      event.preventDefault(); // Blocca il successivo mousedown
+    }
+
     this.startTime = Date.now();
     navigator.mediaDevices.getUserMedia({ audio: true })
       .then(stream => {
@@ -55,7 +59,12 @@ export class ConversationAudioRecorderComponent {
       });
   }
 
-  stopRecording() {
+  stopRecording(event: Event) {
+
+    if (event.type === 'touchend') {
+      event.preventDefault(); // Previene il mouseup successivo
+    }
+
     let endTime = Date.now();
     let time = endTime - this.startTime;
     if(time > 500){

package/src/app/component/home/home.component.html

@@ -27,9 +27,7 @@
             <div class="c21-header-content">
                 <!-- LOGO HEADER -->
                 <div *ngIf="g.project.logoChat !== 'nologo'" class='avatar-project' item-start>
-                    <!-- <div *ngIf="g.project.logoChat == 'tiledesklogo'" #avatarPlaceholder class="avatar-placeholder" [style.background-color]="g.project.color" [innerHTML]="g.project.avatar"></div>
-                    <div *ngIf="g.project.logoChat !== 'tiledesklogo'" #avatarImage class="avatar-image" [style.background-image]="'url(' + g.project.logoChat + ')'"></div> -->
-                    <div #avatarImage class="avatar-image" [style.background-image]="'url(' + g.project.logoChat + ')'"></div>
+                     <img #avatarImage class="avatar-image" [src]="g.project.logoChat"/>
                 </div>
 
                 <!-- MESSAGE HEADER -->

package/src/app/component/home/home.component.scss

@@ -39,6 +39,36 @@
             width: 100%;
             height: 100%;
             position: absolute;
+
+            .avatar-project {
+                position: relative;
+                padding: 0;
+                margin: 0;
+                height: 70px;//52px;
+                width: 80px; //100%;
+                line-height: 52px;
+            
+                .avatar-placeholder {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    max-width: 52px;
+                    text-align: center;
+                    font-size: 20px;
+                    color: #ffffff;
+                    font-weight: 500;
+                }
+                .avatar-image {
+                    max-width: 100%;
+                    max-height: 100%;
+                    height: auto;
+                    width: auto;
+                }
+            }
+            
             .c21-header-button {
                 display: block;
                 width: 100%;