@chat21/chat21-web-widget 5.0.90-rc.3 → 5.0.90-rc.4

package/CHANGELOG.md

@@ -6,7 +6,8 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.0.90-rc.3
+# 5.0.90-rc.4
+- **added**: ability to manage footer audioRecord button
 
 # 5.0.90-rc.2
 - **added**: ability to manage footer attachment and emoji buttons

package/package.json

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

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

@@ -119,6 +119,7 @@
             [userEmail]="g?.userEmail"
             [showAttachmentFooterButton]="g?.showAttachmentFooterButton"
             [showEmojiFooterButton]="g?.showEmojiFooterButton"
+            [showRegisterAudioFooterButton]="g?.showRegisterAudioFooterButton"
             [hideTextAreaContent]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)"
             [isConversationArchived]="isConversationArchived"
             [hideTextReply]="hideFooterTextReply"

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

@@ -11,8 +11,8 @@
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentFooterButton" 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">
-                <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 28 28" transform="rotate(45)">
-                    <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" >
+                    <path d="M18.4,13.2l-2.6,4.5c-1.5,2.6-4.9,3.6-7.6,2c-2.6-1.5-3.6-4.9-2-7.6l3.9-6.7c1.1-1.9,3.6-2.6,5.5-1.5 c1.9,1.1,2.6,3.6,1.5,5.5l-3.3,5.7c-0.7,1.3-2.3,1.7-3.6,1c-1.3-0.7-1.7-2.3-1-3.6l2-3.4c0.2-0.3,0.6-0.5,1-0.3s0.5,0.6,0.3,1 l-2,3.4c-0.3,0.5-0.2,1.1,0.3,1.5c0.4,0.4,1.1,0.4,1.5,0c0.1-0.1,0.2-0.2,0.2-0.3l3.3-5.7c0.7-1.2,0.3-2.8-1-3.5 c-1.2-0.7-2.8-0.3-3.5,1l-3.9,6.7C6.4,14.9,7,17.4,9,18.5c1.9,1.1,4.4,0.5,5.6-1.5l2.6-4.5c0.2-0.3,0.6-0.5,1-0.3 C18.5,12.5,18.6,12.9,18.4,13.2L18.4,13.2z"/>
                 </svg>
             </span>
              <input
@@ -51,7 +51,7 @@
         [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
         start-focus-chat21-conversation-component
         inputTextArea
-        #textbox 
+        #textbox
         tabindex="1501"
         aria-labelledby="altTextArea"
         rows="1"
@@ -67,7 +67,7 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="textInputTextArea && !isStopRec" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showRegisterAudioFooterButton" 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"/>
@@ -76,7 +76,7 @@
     </div>
 
     <!-- ICON REC -->
-    <div *ngIf="!textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+    <div *ngIf="showRegisterAudioFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
         <chat-audio-recorder
             (startRecordingEvent)="onStartRecording()"
             (deleteRecordingEvent)="onDeleteRecording()"

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

@@ -29,6 +29,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() userEmail: string;
   @Input() showAttachmentFooterButton: boolean;
   @Input() showEmojiFooterButton: boolean
+  @Input() showRegisterAudioFooterButton: boolean
   // @Input() showContinueConversationButton: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;
@@ -318,83 +319,75 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       // msg = replaceEndOfLine(msg);
       // msg = msg.trim();
 
-        let recipientFullname = this.translationMap.get('GUEST_LABEL');
-          // sponziello: adds ADDITIONAL ATTRIBUTES TO THE MESSAGE
-        const g_attributes = this.attributes;
-        // added <any> to resolve the Error occurred during the npm installation: Property 'userFullname' does not exist on type '{}'
-        const attributes = <any>{};
-        if (g_attributes) {
-          for (const [key, value] of Object.entries(g_attributes)) {
-            attributes[key] = value;
-          }
+      let recipientFullname = this.translationMap.get('GUEST_LABEL');
+        // sponziello: adds ADDITIONAL ATTRIBUTES TO THE MESSAGE
+      const g_attributes = this.attributes;
+      // added <any> to resolve the Error occurred during the npm installation: Property 'userFullname' does not exist on type '{}'
+      const attributes = <any>{};
+      if (g_attributes) {
+        for (const [key, value] of Object.entries(g_attributes)) {
+          attributes[key] = value;
         }
-        if (additional_attributes) {
-          for (const [key, value] of Object.entries(additional_attributes)) {
-            attributes[key] = value;
-          }
+      }
+      if (additional_attributes) {
+        for (const [key, value] of Object.entries(additional_attributes)) {
+          attributes[key] = value;
         }
-          // fine-sponziello
-        // this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith)
-        const senderId = this.senderId;
-        const projectid = this.projectid;
-        const channelType = this.channelType;
-        const userFullname = this.userFullname;
-        const userEmail = this.userEmail;
-        const conversationWith = this.conversationWith;
+      }
+        // fine-sponziello
+      // this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith)
+      const senderId = this.senderId;
+      const projectid = this.projectid;
+      const channelType = this.channelType;
+      const userFullname = this.userFullname;
+      const userEmail = this.userEmail;
+      const conversationWith = this.conversationWith;
         
 
-        if (userFullname) {
-          recipientFullname = userFullname;
-        } else if (userEmail) {
-          recipientFullname = userEmail;
-        } else if (attributes && attributes['userFullname']) {
-          recipientFullname = attributes['userFullname'];
-        } else {
-          recipientFullname = this.translationMap.get('GUEST_LABEL');
-        }
+      if (userFullname) {
+        recipientFullname = userFullname;
+      } else if (userEmail) {
+        recipientFullname = userEmail;
+      } else if (attributes && attributes['userFullname']) {
+        recipientFullname = attributes['userFullname'];
+      } else {
+        recipientFullname = this.translationMap.get('GUEST_LABEL');
+      }
 
-        this.onBeforeMessageSent.emit({
-          senderFullname: recipientFullname,
-          text: msg,
-          type: type,
-          metadata: metadata,
-          conversationWith: conversationWith,
-          recipientFullname: recipientFullname,
-          attributes : attributes,
-          projectid: projectid,
-          channelType: channelType
-        })
+      this.onBeforeMessageSent.emit({
+        senderFullname: recipientFullname,
+        text: msg,
+        type: type,
+        metadata: metadata,
+        conversationWith: conversationWith,
+        recipientFullname: recipientFullname,
+        attributes : attributes,
+        projectid: projectid,
+        channelType: channelType
+      })
         
-        this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
-        const messageSent = this.conversationHandlerService.sendMessage(
-          msg,
-          type,
-          metadata,
-          conversationWith,
-          recipientFullname,
-          senderId,
-          recipientFullname,
-          channelType ,    
-          attributes
-        );
-
-        this.onAfterSendMessage.emit(messageSent)
-        // this.isNewConversation = false;
-
-        //TODO-GAB: da rivedere
-        try {
-          const target = document.getElementById('chat21-main-message-context') as HTMLInputElement;
-          target.value = '';
-          target.style.height = this.HEIGHT_DEFAULT;
-        } catch (e) {
-          this.logger.error('[CONV-FOOTER] > Error :' + e);
-        }
-        this.restoreTextArea();
+      this.conversationHandlerService = this.chatManager.getConversationHandlerByConversationId(this.conversationWith);
+      const messageSent = this.conversationHandlerService.sendMessage(
+        msg,
+        type,
+        metadata,
+        conversationWith,
+        recipientFullname,
+        senderId,
+        recipientFullname,
+        channelType ,    
+        attributes
+      );
+
+      this.onAfterSendMessage.emit(messageSent)
+      // this.isNewConversation = false;
+
+      this.restoreTextArea();
     }
   }
 
   private restoreTextArea() {
-    //   that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
+    // that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
     this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context'));
     this.textInputTextArea = ''; // clear the textarea
@@ -407,6 +400,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       this.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
     }
     this.setFocusOnId('chat21-main-message-context');
+    this.isStopRec= false;
   }
 
   /**
@@ -418,18 +412,18 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     try {
       const target = document.getElementById('chat21-main-message-context') as HTMLInputElement;
       // tslint:disable-next-line:max-line-length
-      //   that.logger.log('[CONV-FOOTER] H:: this.textInputTextArea', (document.getElementById('chat21-main-message-context') as HTMLInputElement).value , target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
       target? target.style.height = '100%': null;
       if (target && target.value === '\n') {
-          target.value = '';
-          target.style.height = this.HEIGHT_DEFAULT;
-        } else if (target && target.scrollHeight > target.offsetHeight) {
-          target.style.height = target.scrollHeight + 2 + 'px';
-          target.style.minHeight = this.HEIGHT_DEFAULT;
-        } else if (target) {
-          target.style.height = this.HEIGHT_DEFAULT;
-          // segno sto scrivendo
-          // target.offsetHeight - 15 + 'px';
+        this.textInputTextArea = ''; // clear the textarea
+        target.value = '';
+        target.style.height = this.HEIGHT_DEFAULT;
+      } else if (target && target.scrollHeight > target.offsetHeight) {
+        target.style.height = target.scrollHeight + 2 + 'px';
+        target.style.minHeight = this.HEIGHT_DEFAULT;
+      } else if (target) {
+        target.style.height = this.HEIGHT_DEFAULT;
+        // segno sto scrivendo
+        // target.offsetHeight - 15 + 'px';
       }
       //this.setWritingMessages(target.value);
       this.onChangeTextArea.emit({textAreaEl: target, minHeightDefault: this.HEIGHT_DEFAULT})
@@ -610,7 +604,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         const textarea = document.getElementById(id);
         if (textarea) {
             //   that.logger.log('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
-            textarea.setAttribute('value', ' ');
+            textarea.setAttribute('value', '');
             textarea.focus();
         }
       }, 500);

package/src/app/providers/global-settings.service.ts

@@ -506,6 +506,15 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('onPageChangeVisibilityMobile')) {
                         globals['onPageChangeVisibilityMobile'] = variables['onPageChangeVisibilityMobile'];
                     }
+                    if (variables.hasOwnProperty('showEmojiFooterButton')) {
+                        globals['showEmojiFooterButton'] = variables['showEmojiFooterButton'];
+                    }
+                    if (variables.hasOwnProperty('showAttachmentFooterButton')) {
+                        globals['showAttachmentFooterButton'] = variables['showAttachmentFooterButton'];
+                    }
+                    if (variables.hasOwnProperty('showRegisterAudioFooterButton')) {
+                        globals['showRegisterAudioFooterButton'] = variables['showRegisterAudioFooterButton'];
+                    }
                     
                 }
             }
@@ -1047,6 +1056,11 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         } 
+        TEMP = tiledeskSettings['showRegisterAudioFooterButton'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showEmojiFooterButton:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.showRegisterAudioFooterButton = (TEMP === true) ? true : false;
+        } 
     }
 
     /**
@@ -1321,6 +1335,10 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         }
+        TEMP = el.nativeElement.getAttribute('showRegisterAudioFooterButton');
+        if (TEMP !== null) {
+            this.globals.showRegisterAudioFooterButton = (TEMP === true) ? true : false;
+        }
         
         
     }

package/src/app/utils/globals.ts

@@ -218,6 +218,7 @@ export class Globals {
 
   showEmojiFooterButton: boolean // *******  new ********
   showAttachmentFooterButton: boolean // *******  new ********
+  showRegisterAudioFooterButton: boolean // *******  new ********
   constructor(
   ) { }
 
@@ -417,6 +418,8 @@ export class Globals {
     this.showEmojiFooterButton = true;
     /** show/hide attachment option in footer chat-detail page */
     this.showAttachmentFooterButton = true;
+    /** show/hide rec audio option in footer chat-detail page */
+    this.showRegisterAudioFooterButton = true;
 
     // ============ END: SET EXTERNAL PARAMETERS ==============//
 

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

@@ -1355,6 +1355,13 @@
             window.Tiledesk('restart')
         }
 
+        function onClickShowRegisterAudioFooterButton(){
+            let status = document.querySelector('input[name="showRegisterAudioFooterButton"]:checked').value
+            window.tiledeskSettings['showRegisterAudioFooterButton'] = stringToBoolean(status)
+            console.log('onClickShowRegisterAudioFooterButton:', window.tiledeskSettings)
+            window.Tiledesk('restart')
+        }
+
 
 
 
@@ -2397,6 +2404,17 @@
                             </div>
                         </div>
 
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>showRegisterAudioFooterButton</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="showRegisterAudioFooterButton" value="true" checked><label>True</label>
+                                <input class="form-check-input" type="radio" name="showRegisterAudioFooterButton" value="false"><label>False</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickShowRegisterAudioFooterButton()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+
 
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>BUBBLE MESSAGE STYLES</strong></em></h3></div>
                         <div class="row">