@chat21/chat21-web-widget 5.1.16 → 5.1.18
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.
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,15 @@
|
|
|
6
6
|
### **Copyrigth**:
|
|
7
7
|
*Tiledesk SRL*
|
|
8
8
|
|
|
9
|
+
# 5.1.18
|
|
10
|
+
- **added**: Implemented Shadow DOM in the text component to isolate HTML and Markdown rendering in a safe and protected context
|
|
11
|
+
- **changed**: Adapted text component styles to support Shadow DOM (removed ::ng-deep, added styles for common markdown elements)
|
|
12
|
+
- **security**: HTML/Markdown content is now rendered in an isolated Shadow DOM, improving security and preventing interference with the rest of the application
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
# 5.1.17
|
|
16
|
+
- **bug-fixed**: set the maximum width on a message with iframe
|
|
17
|
+
|
|
9
18
|
# 5.1.16
|
|
10
19
|
- **changed**: "close chat" header conversation menu button enabled in chatbot-panel.html
|
|
11
20
|
|
package/package.json
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
[class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"
|
|
65
65
|
[class.emoticon]="isEmojii(message?.text)"
|
|
66
66
|
[style.margin-left]="isSameSender(message?.sender, i)? 'calc(var(--avatar-width) + 10px)': null"
|
|
67
|
-
[ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
|
|
67
|
+
[ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor'), 'width':isFrame(message) ?'100%' : null}"
|
|
68
68
|
[isSameSender]="isSameSender(message?.sender, i)"
|
|
69
69
|
[message]="message"
|
|
70
70
|
[fontColor]="stylesMap.get('bubbleReceivedTextColor')"
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
// Shadow DOM styles - isolati dal resto dell'applicazione
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
// Le variabili CSS custom properties possono attraversare il boundary del Shadow DOM
|
|
5
|
+
font-size: var(--font-size-bubble-message, 14px);
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
.message_innerhtml {
|
|
2
9
|
margin: 0px;
|
|
3
10
|
// padding: 0px 14px;
|
|
@@ -13,9 +20,9 @@
|
|
|
13
20
|
}
|
|
14
21
|
|
|
15
22
|
p {
|
|
16
|
-
font-size:
|
|
23
|
+
font-size: inherit;
|
|
17
24
|
margin: 0;
|
|
18
|
-
padding: 14px;
|
|
25
|
+
// padding: 14px;
|
|
19
26
|
line-height: 1.4em;
|
|
20
27
|
font-style: normal;
|
|
21
28
|
letter-spacing: normal;
|
|
@@ -23,26 +30,80 @@ p {
|
|
|
23
30
|
font-variant: normal;
|
|
24
31
|
font-weight: 300;
|
|
25
32
|
overflow: hidden;
|
|
26
|
-
|
|
27
33
|
}
|
|
28
34
|
|
|
29
|
-
p ::ng-deep a
|
|
35
|
+
p ::ng-deep a,
|
|
36
|
+
p a {
|
|
30
37
|
word-break: break-word;
|
|
38
|
+
color: inherit; // Eredita il colore dal parent
|
|
39
|
+
text-decoration: underline;
|
|
31
40
|
}
|
|
32
41
|
|
|
33
|
-
p ::ng-deep p
|
|
42
|
+
p ::ng-deep p,
|
|
43
|
+
p a:hover{
|
|
34
44
|
margin-block-end: 0em;
|
|
35
|
-
margin-block-start: 0em
|
|
45
|
+
margin-block-start: 0em;
|
|
36
46
|
}
|
|
37
47
|
|
|
38
|
-
p
|
|
48
|
+
p ol {
|
|
39
49
|
margin-block-end: 0em;
|
|
40
50
|
margin-block-start: 0em;
|
|
41
51
|
padding-inline-start: 15px;
|
|
42
52
|
|
|
43
|
-
li
|
|
44
|
-
content:"";
|
|
53
|
+
li::before {
|
|
54
|
+
content: "";
|
|
45
55
|
font-size: 1.4em;
|
|
46
|
-
vertical-align:middle;
|
|
56
|
+
vertical-align: middle;
|
|
47
57
|
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Stili aggiuntivi per elementi markdown comuni
|
|
61
|
+
p h1, p h2, p h3, p h4, p h5, p h6 {
|
|
62
|
+
margin-block-start: 0.5em;
|
|
63
|
+
margin-block-end: 0.5em;
|
|
64
|
+
font-weight: bold;
|
|
65
|
+
color: inherit; // Eredita il colore dal parent
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
p ul {
|
|
69
|
+
margin-block-end: 0em;
|
|
70
|
+
margin-block-start: 0em;
|
|
71
|
+
padding-inline-start: 15px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
p code {
|
|
75
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
76
|
+
padding: 2px 4px;
|
|
77
|
+
border-radius: 3px;
|
|
78
|
+
font-family: monospace;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
p pre {
|
|
82
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
83
|
+
padding: 10px;
|
|
84
|
+
border-radius: 3px;
|
|
85
|
+
overflow-x: auto;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
p blockquote {
|
|
89
|
+
border-left: 3px solid rgba(0, 0, 0, 0.1);
|
|
90
|
+
padding-left: 10px;
|
|
91
|
+
margin-left: 0;
|
|
92
|
+
font-style: italic;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
p table {
|
|
96
|
+
border-collapse: collapse;
|
|
97
|
+
width: 100%;
|
|
98
|
+
margin: 10px 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
p table td, p table th {
|
|
102
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
103
|
+
padding: 8px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
p table th {
|
|
107
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
108
|
+
font-weight: bold;
|
|
48
109
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
|
1
|
+
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
|
|
2
2
|
|
|
3
3
|
@Component({
|
|
4
4
|
selector: 'chat-text',
|
|
5
5
|
templateUrl: './text.component.html',
|
|
6
|
-
styleUrls: ['./text.component.scss']
|
|
6
|
+
styleUrls: ['./text.component.scss'],
|
|
7
|
+
encapsulation: ViewEncapsulation.ShadowDom
|
|
7
8
|
})
|
|
8
9
|
export class TextComponent implements OnInit {
|
|
9
10
|
|