@chat21/chat21-web-widget 5.0.91-rc1 → 5.0.91-rc3

package/CHANGELOG.md

@@ -6,6 +6,12 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.91-rc3
+- **added**: showAudioRecorderFooterButton property variable
+
+# 5.0.91-rc2
+- **changed**: colors for chat-audio-track component managed
+
 # 5.0.91-rc1
 - **changed**: enabled showRegisterAudioFooterButton button 
 

package/package.json

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

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

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

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

@@ -6,9 +6,9 @@
         </span>
       </button>
 
-      <chat-audio-track  *ngIf="audioBlob && audioUrl"
+      <chat-audio-track  class="test" *ngIf="audioBlob && audioUrl"
         [audioBlob] = "audioBlob"
-        [color]="stylesMap.get('themeColor')"
+        [color]="'var(--chat-footer-color)'"
         [fontSize]="stylesMap.get('fontSize')"
         [stylesMap]="stylesMap">
       </chat-audio-track>

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

@@ -20,15 +20,32 @@
     gap: 8px
 }
 
-chat-audio-track {
+::ng-deep chat-audio-track.test {
   display: flex;
   width: 80%;
   margin: 8px 0;
   pointer-events: auto;
   border-radius: var(--chat-footer-border-radius);
   background-color: var(--chat-footer-background-color);
+
+  // --hoverBackgroundColor: var(--textColor);
+  // --hoverTextColor:var(--backgroundColor);
+
+    button.play-pause{
+      svg{
+        fill: var(--chat-footer-color) !important;
+      }
+      &:hover{
+        color: var(--chat-footer-background-color) !important;
+        background-color: var(--chat-footer-color) !important;
+        svg{
+          fill: var(--chat-footer-background-color) !important;
+        }
+      }
+    }
 }
 
+
 button {
     font-size: 16px;
     border: none;

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

@@ -67,7 +67,7 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showRegisterAudioFooterButton" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" 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="showRegisterAudioFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+    <div *ngIf="showAudioRecorderFooterButton && !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.scss

@@ -165,7 +165,7 @@ textarea:active{
     resize: horizontal;
     overflow-y: auto;
     box-sizing: border-box;
-    color: var(--black);
+    color: var(--chat-footer-color);
     min-width: 100%;
     outline: 0;
     resize: none;

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

@@ -29,7 +29,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() userEmail: string;
   @Input() showAttachmentFooterButton: boolean;
   @Input() showEmojiFooterButton: boolean
-  @Input() showRegisterAudioFooterButton: boolean
+  @Input() showAudioRecorderFooterButton: boolean
   // @Input() showContinueConversationButton: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;

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

@@ -12,7 +12,7 @@
             <!-- <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">
+            <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> -->

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

@@ -2,9 +2,8 @@
 :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)};
+    --hoverBackgroundColor: var(--textColor);
+    --hoverTextColor:var(--backgroundColor);
 }
 
 .audio-container{
@@ -39,8 +38,8 @@ button {
     font-size: 16px;
     border: none;
     background-color: transparent;
-    color: var(--icon-fill-color);
-    fill: var(--icon-fill-color);
+    color: var(--textColor);
+    fill: var(--textColor);
 }
 
 .waveformCanvas {
@@ -72,10 +71,11 @@ button {
     .play-pause:hover {
         // background-color: #ddd;
         // background-color: rgb(82, 160, 252);
-        background-color: #fff;
+        background-color: var(--hoverBackgroundColor);
+        color: var(--hoverTextColor);
         svg{
             //fill:#fff;
-            fill: rgb(82, 160, 252);
+            fill: var(--hoverTextColor)
         }
     }
     .duration {

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

@@ -26,7 +26,10 @@ export class AudioTrackComponent implements AfterViewInit {
   currentTime: number = 0;
   isPlaying: boolean = false;
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(
+    private sanitizer: DomSanitizer,
+    private elementRef: ElementRef
+  ) {}
 
   ngAfterViewInit() {
     console.log('stylesssss', this.stylesMap)
@@ -39,6 +42,11 @@ export class AudioTrackComponent implements AfterViewInit {
       this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
       this.setupAudioContext();
     }
+
+    if(this.stylesMap.get('bubbleSentBackground')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--backgroundColor', this.extractFirstColor(this.stylesMap.get('bubbleSentBackground')));
+    if(this.stylesMap.get('bubbleSentTextColor')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--textColor', this.stylesMap.get('bubbleSentTextColor'));
+    if(this.stylesMap.get('bubbleSentBackground')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--hoverBackgroundColor', this.stylesMap.get('bubbleSentTextColor'));
+    if(this.stylesMap.get('bubbleSentTextColor')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--hoverTextColor', this.extractFirstColor(this.stylesMap.get('bubbleSentBackground')));
   }
 
   async setupAudioContext() {
@@ -144,4 +152,11 @@ export class AudioTrackComponent implements AfterViewInit {
       }
     });
   }
+
+  extractFirstColor(gradient: string): string | null {
+    const colorRegex = /rgba?\((\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?)\)/;
+    const match = gradient.match(colorRegex);
+    return match ? match[0] : null;
+  }
+
 }

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

@@ -512,8 +512,8 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('showAttachmentFooterButton')) {
                         globals['showAttachmentFooterButton'] = variables['showAttachmentFooterButton'];
                     }
-                    if (variables.hasOwnProperty('showRegisterAudioFooterButton')) {
-                        globals['showRegisterAudioFooterButton'] = variables['showRegisterAudioFooterButton'];
+                    if (variables.hasOwnProperty('showAudioRecorderFooterButton')) {
+                        globals['showAudioRecorderFooterButton'] = variables['showAudioRecorderFooterButton'];
                     }
                     
                 }
@@ -1056,10 +1056,10 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         } 
-        TEMP = tiledeskSettings['showRegisterAudioFooterButton'];
+        TEMP = tiledeskSettings['showAudioRecorderFooterButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showEmojiFooterButton:: ', TEMP]);
         if (TEMP !== undefined) {
-            globals.showRegisterAudioFooterButton = (TEMP === true) ? true : false;
+            globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
         } 
     }
 
@@ -1335,9 +1335,9 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         }
-        TEMP = el.nativeElement.getAttribute('showRegisterAudioFooterButton');
+        TEMP = el.nativeElement.getAttribute('showAudioRecorderFooterButton');
         if (TEMP !== null) {
-            this.globals.showRegisterAudioFooterButton = (TEMP === true) ? true : false;
+            this.globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
         }
         
         

package/src/app/sass/_variables.scss

@@ -30,6 +30,7 @@
     --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
+    --chat-footer-color: #1a1a1a;
 
     --icon-fill-color: #5f6368
 }

package/src/app/utils/globals.ts

@@ -218,7 +218,7 @@ export class Globals {
 
   showEmojiFooterButton: boolean // *******  new ********
   showAttachmentFooterButton: boolean // *******  new ********
-  showRegisterAudioFooterButton: boolean // *******  new ********
+  showAudioRecorderFooterButton: boolean // *******  new ********
   constructor(
   ) { }
 
@@ -419,7 +419,7 @@ export class Globals {
     /** 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;
+    this.showAudioRecorderFooterButton = true;
 
     // ============ END: SET EXTERNAL PARAMETERS ==============//
 

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

@@ -1352,10 +1352,10 @@
             window.Tiledesk('restart')
         }
 
-        function onClickShowRegisterAudioFooterButton(){
-            let status = document.querySelector('input[name="showRegisterAudioFooterButton"]:checked').value
-            window.tiledeskSettings['showRegisterAudioFooterButton'] = stringToBoolean(status)
-            console.log('onClickShowRegisterAudioFooterButton:', window.tiledeskSettings)
+        function onClickshowAudioRecorderFooterButton(){
+            let status = document.querySelector('input[name="showAudioRecorderFooterButton"]:checked').value
+            window.tiledeskSettings['showAudioRecorderFooterButton'] = stringToBoolean(status)
+            console.log('onClickshowAudioRecorderFooterButton:', window.tiledeskSettings)
             window.Tiledesk('restart')
         }
 
@@ -2402,13 +2402,13 @@
                         </div>
 
                         <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>showRegisterAudioFooterButton</strong></em></span></div>
+                            <div class="col-md-5 formElement"><span><em><strong>showAudioRecorderFooterButton</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>
+                                <input class="form-check-input" type="radio" name="showAudioRecorderFooterButton" value="true" checked><label>True</label>
+                                <input class="form-check-input" type="radio" name="showAudioRecorderFooterButton" 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>
+                                <button class="btn btn-light" onclick="onClickshowAudioRecorderFooterButton()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>