@chat21/chat21-web-widget 5.0.90 → 5.0.91-rc2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html +2 -2
  4. package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss +18 -1
  5. package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss +1 -1
  6. package/src/app/component/message/audio-track/audio-track.component.html +1 -1
  7. package/src/app/component/message/audio-track/audio-track.component.scss +7 -7
  8. package/src/app/component/message/audio-track/audio-track.component.ts +16 -1
  9. package/src/app/sass/_variables.scss +1 -0
  10. package/src/app/utils/globals.ts +1 -1
  11. package/src/assets/twp/index-dev.html +3 -6
  12. package/src/assets/twp/index.html +4 -6
package/CHANGELOG.md CHANGED
@@ -6,6 +6,12 @@
6
6
  ### **Copyrigth**:
7
7
  *Tiledesk SRL*
8
8
 
9
+ # 5.0.91-rc2
10
+ - **changed**: colors for chat-audio-track component managed
11
+
12
+ # 5.0.91-rc1
13
+ - **changed**: enabled showRegisterAudioFooterButton button
14
+
9
15
  # 5.0.90 in PROD
10
16
 
11
17
  # 5.0.90-rc.4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@chat21/chat21-web-widget",
3
3
  "author": "Tiledesk SRL",
4
- "version": "5.0.90",
4
+ "version": "5.0.91-rc2",
5
5
  "license": "MIT",
6
6
  "homepage": "https://www.tiledesk.com",
7
7
  "repository": {
package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html CHANGED
@@ -6,9 +6,9 @@
6
6
  </span>
7
7
  </button>
8
8
 
9
- <chat-audio-track *ngIf="audioBlob && audioUrl"
9
+ <chat-audio-track class="test" *ngIf="audioBlob && audioUrl"
10
10
  [audioBlob] = "audioBlob"
11
- [color]="stylesMap.get('themeColor')"
11
+ [color]="'var(--chat-footer-color)'"
12
12
  [fontSize]="stylesMap.get('fontSize')"
13
13
  [stylesMap]="stylesMap">
14
14
  </chat-audio-track>
package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss CHANGED
@@ -20,15 +20,32 @@
20
20
  gap: 8px
21
21
  }
22
22
 
23
- chat-audio-track {
23
+ ::ng-deep chat-audio-track.test {
24
24
  display: flex;
25
25
  width: 80%;
26
26
  margin: 8px 0;
27
27
  pointer-events: auto;
28
28
  border-radius: var(--chat-footer-border-radius);
29
29
  background-color: var(--chat-footer-background-color);
30
+
31
+ // --hoverBackgroundColor: var(--textColor);
32
+ // --hoverTextColor:var(--backgroundColor);
33
+
34
+ button.play-pause{
35
+ svg{
36
+ fill: var(--chat-footer-color) !important;
37
+ }
38
+ &:hover{
39
+ color: var(--chat-footer-background-color) !important;
40
+ background-color: var(--chat-footer-color) !important;
41
+ svg{
42
+ fill: var(--chat-footer-background-color) !important;
43
+ }
44
+ }
45
+ }
30
46
  }
31
47
 
48
+
32
49
  button {
33
50
  font-size: 16px;
34
51
  border: none;
package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss CHANGED
@@ -165,7 +165,7 @@ textarea:active{
165
165
  resize: horizontal;
166
166
  overflow-y: auto;
167
167
  box-sizing: border-box;
168
- color: var(--black);
168
+ color: var(--chat-footer-color);
169
169
  min-width: 100%;
170
170
  outline: 0;
171
171
  resize: none;
package/src/app/component/message/audio-track/audio-track.component.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <!-- <i class="material-icons">play_arrow</i> -->
13
13
  </button>
14
14
  <button *ngIf="isPlaying" class="play-pause" (click)="playPauseAudio()">
15
- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
15
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" >
16
16
  <path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/>
17
17
  </svg>
18
18
  <!-- <i class="material-icons">pause</i> -->
package/src/app/component/message/audio-track/audio-track.component.scss CHANGED
@@ -2,9 +2,8 @@
2
2
  :host {
3
3
  --backgroundColor: #{var(--blue)};
4
4
  --textColor: #{var(--bck-msg-sent)};
5
- --hoverBackgroundColor: #{var(--bck-msg-sent)};
6
- --hoverTextColor: #{var(--blue)};
7
- --max-width: #{var(--button-in-msg-max-width)};
5
+ --hoverBackgroundColor: var(--textColor);
6
+ --hoverTextColor:var(--backgroundColor);
8
7
  }
9
8
 
10
9
  .audio-container{
@@ -39,8 +38,8 @@ button {
39
38
  font-size: 16px;
40
39
  border: none;
41
40
  background-color: transparent;
42
- color: var(--icon-fill-color);
43
- fill: var(--icon-fill-color);
41
+ color: var(--textColor);
42
+ fill: var(--textColor);
44
43
  }
45
44
 
46
45
  .waveformCanvas {
@@ -72,10 +71,11 @@ button {
72
71
  .play-pause:hover {
73
72
  // background-color: #ddd;
74
73
  // background-color: rgb(82, 160, 252);
75
- background-color: #fff;
74
+ background-color: var(--hoverBackgroundColor);
75
+ color: var(--hoverTextColor);
76
76
  svg{
77
77
  //fill:#fff;
78
- fill: rgb(82, 160, 252);
78
+ fill: var(--hoverTextColor)
79
79
  }
80
80
  }
81
81
  .duration {
package/src/app/component/message/audio-track/audio-track.component.ts CHANGED
@@ -26,7 +26,10 @@ export class AudioTrackComponent implements AfterViewInit {
26
26
  currentTime: number = 0;
27
27
  isPlaying: boolean = false;
28
28
 
29
- constructor(private sanitizer: DomSanitizer) {}
29
+ constructor(
30
+ private sanitizer: DomSanitizer,
31
+ private elementRef: ElementRef
32
+ ) {}
30
33
 
31
34
  ngAfterViewInit() {
32
35
  console.log('stylesssss', this.stylesMap)
@@ -39,6 +42,11 @@ export class AudioTrackComponent implements AfterViewInit {
39
42
  this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
40
43
  this.setupAudioContext();
41
44
  }
45
+
46
+ if(this.stylesMap.get('bubbleSentBackground')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--backgroundColor', this.extractFirstColor(this.stylesMap.get('bubbleSentBackground')));
47
+ if(this.stylesMap.get('bubbleSentTextColor')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--textColor', this.stylesMap.get('bubbleSentTextColor'));
48
+ if(this.stylesMap.get('bubbleSentBackground')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--hoverBackgroundColor', this.stylesMap.get('bubbleSentTextColor'));
49
+ if(this.stylesMap.get('bubbleSentTextColor')) this.elementRef.nativeElement.querySelector('.audio-container').style.setProperty('--hoverTextColor', this.extractFirstColor(this.stylesMap.get('bubbleSentBackground')));
42
50
  }
43
51
 
44
52
  async setupAudioContext() {
@@ -144,4 +152,11 @@ export class AudioTrackComponent implements AfterViewInit {
144
152
  }
145
153
  });
146
154
  }
155
+
156
+ extractFirstColor(gradient: string): string | null {
157
+ const colorRegex = /rgba?\((\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?)\)/;
158
+ const match = gradient.match(colorRegex);
159
+ return match ? match[0] : null;
160
+ }
161
+
147
162
  }
package/src/app/sass/_variables.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  --chat-footer-logo-height: 30px;
31
31
  --chat-footer-border-radius: 16px;
32
32
  --chat-footer-background-color: #f6f7fb;
33
+ --chat-footer-color: #1a1a1a;
33
34
 
34
35
  --icon-fill-color: #5f6368
35
36
  }
package/src/app/utils/globals.ts CHANGED
@@ -419,7 +419,7 @@ export class Globals {
419
419
  /** show/hide attachment option in footer chat-detail page */
420
420
  this.showAttachmentFooterButton = true;
421
421
  /** show/hide rec audio option in footer chat-detail page */
422
- this.showRegisterAudioFooterButton = false;
422
+ this.showRegisterAudioFooterButton = true;
423
423
 
424
424
  // ============ END: SET EXTERNAL PARAMETERS ==============//
425
425
 
package/src/assets/twp/index-dev.html CHANGED
@@ -507,8 +507,8 @@
507
507
  document.getElementById('events').scrollTop = document.getElementById('events').scrollHeight
508
508
  }
509
509
 
510
- document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
511
- document.getElementById("project_name").value = project_name;
510
+ document.getElementById("project_id").innerText = '"' + tiledesk_projectid + '"';
511
+ document.getElementById("project_name").innerText = project_name;
512
512
  });
513
513
 
514
514
  window.Tiledesk('onBeforeInit', function(event_data) {
@@ -521,7 +521,7 @@
521
521
 
522
522
  var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
523
523
  document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
524
- document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
524
+ document.getElementById("base_url").innerText = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
525
525
 
526
526
  baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
527
527
  }
@@ -702,9 +702,6 @@
702
702
 
703
703
  function goToConsole(){
704
704
  var url = new URL(currentUrl);
705
- var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
706
- var project_name = url.searchParams.get("project_name");
707
-
708
705
  var urlConsole = baseUrlConsole + "#/project/"+tiledesk_projectid+"/home";
709
706
  //var urlConsole = "dashboard/#/project/"+tiledesk_projectid+"/home";
710
707
  window.open(
package/src/assets/twp/index.html CHANGED
@@ -300,7 +300,7 @@
300
300
 
301
301
  var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
302
302
  document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
303
- document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
303
+ document.getElementById("base_url").innerText = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
304
304
 
305
305
  baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
306
306
  }
@@ -383,8 +383,6 @@
383
383
 
384
384
  function goToConsole(){
385
385
  var url = new URL(currentUrl);
386
- var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
387
- var project_name = url.searchParams.get("project_name");
388
386
  var urlConsole = baseUrlConsole + "#/project/"+tiledesk_projectid+"/home";
389
387
  //var urlConsole = "dashboard/#/project/"+tiledesk_projectid+"/home";
390
388
  window.open(
@@ -439,8 +437,8 @@
439
437
  // console.log('project_name: ', project_name);
440
438
 
441
439
  window.onload = function() {
442
- document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
443
- document.getElementById("project_name").value = project_name;
440
+ document.getElementById("project_id").innerText = '"' + tiledesk_projectid + '"';
441
+ document.getElementById("project_name").innerText = project_name;
444
442
 
445
443
  if(role !== 'agent'){
446
444
  document.getElementById("testPageButton").style.display = 'block'
@@ -540,7 +538,7 @@
540
538
  &nbsp;&nbsp;&nbsp;&nbsp;window.tiledeskSettings = <br>
541
539
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ <br>
542
540
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;projectid: </span>
543
- <span id="project_id"> </span>
541
+ <span id="project_id"></span>
544
542
  <span style="border:none !important">
545
543
  <br>
546
544
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; <br>