@chat21/chat21-web-widget 5.0.91-rc1 → 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 (9) hide show
  1. package/CHANGELOG.md +3 -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
package/CHANGELOG.md CHANGED
@@ -6,6 +6,9 @@
6
6
  ### **Copyrigth**:
7
7
  *Tiledesk SRL*
8
8
 
9
+ # 5.0.91-rc2
10
+ - **changed**: colors for chat-audio-track component managed
11
+
9
12
  # 5.0.91-rc1
10
13
  - **changed**: enabled showRegisterAudioFooterButton button
11
14
 
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.91-rc1",
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
  }