@chat21/chat21-web-widget 5.0.71-rc.7 → 5.0.71-rc.9
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 +8 -0
- package/package.json +1 -1
- package/src/app/component/conversation-detail/conversation/conversation.component.html +3 -2
- package/src/app/component/conversation-detail/conversation/conversation.component.scss +3 -2
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss +1 -1
- package/src/app/sass/_variables.scss +1 -1
- package/src/app/utils/globals.ts +0 -1
- package/src/assets/twp/chatbot-panel.html +193 -6
- package/src/assets/twp/index-dev.html +54 -16
- package/src/assets/twp/index.html +110 -37
- package/src/chat21-core/providers/firebase/firebase-conversations-handler.ts +1 -0
- package/src/chat21-core/providers/mqtt/mqtt-conversations-handler.ts +2 -1
- package/src/widget-config-template.json +2 -2
- package/src/widget-config.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# chat21-web-widget ver 5.0
|
|
2
2
|
|
|
3
|
+
### 5.0.71-rc.9
|
|
4
|
+
- added: brandSrc env property
|
|
5
|
+
|
|
6
|
+
### 5.0.71-rc.8
|
|
7
|
+
- chaged: chatbot-panel.html page UI (added header as style)
|
|
8
|
+
- bug-fixed: drop-zone area wrong height if footer in not visible
|
|
9
|
+
- bug-fixed: set archived conversations as read always
|
|
10
|
+
|
|
3
11
|
### 5.0.71-rc.5
|
|
4
12
|
- bug-fixed: last-message box is visible also if text is empty
|
|
5
13
|
|
package/package.json
CHANGED
|
@@ -37,9 +37,10 @@
|
|
|
37
37
|
(onMenuOptionShow)="onMenuOption($event)">
|
|
38
38
|
</chat-conversation-header>
|
|
39
39
|
|
|
40
|
-
<div id="dropZone_container" *ngIf="isHovering"
|
|
40
|
+
<div id="dropZone_container" *ngIf="isHovering"
|
|
41
|
+
[class.hideTextReply]="hideFooterTextReply && g?.poweredBy">
|
|
41
42
|
<div class="drop">
|
|
42
|
-
drop zone
|
|
43
|
+
<!-- drop zone -->
|
|
43
44
|
</div>
|
|
44
45
|
</div>
|
|
45
46
|
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
--foregroundColor: var(--col-msg-sent);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content
|
|
12
|
+
:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content,
|
|
13
|
+
:host #dropZone_container.hideTextReply{
|
|
13
14
|
|
|
14
15
|
bottom: var(--chat-footer-height) !important
|
|
15
16
|
}
|
|
@@ -143,7 +144,7 @@
|
|
|
143
144
|
#dropZone_container{
|
|
144
145
|
position: absolute;
|
|
145
146
|
top: 52px;
|
|
146
|
-
bottom:
|
|
147
|
+
bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
|
|
147
148
|
left: 0;
|
|
148
149
|
right: 0;
|
|
149
150
|
background-color: rgba(240,248,255,0.6);
|
package/src/app/utils/globals.ts
CHANGED
|
@@ -14,11 +14,26 @@
|
|
|
14
14
|
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
|
|
15
15
|
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
|
|
16
16
|
|
|
17
|
+
:root {
|
|
18
|
+
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body{
|
|
22
|
+
--font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
|
|
23
|
+
--blu: #506493;
|
|
24
|
+
--gray-light-02: rgb(223, 227, 237);
|
|
25
|
+
--base-company-logo: rgb(224,106,88);
|
|
26
|
+
--header-height: 60px;
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
|
|
17
30
|
#preloader {
|
|
18
31
|
background: #fff;
|
|
19
32
|
position: fixed;
|
|
20
33
|
top: 0;
|
|
21
34
|
left: 0;
|
|
35
|
+
bottom: 0;
|
|
36
|
+
right: 0;
|
|
22
37
|
height: 100%;
|
|
23
38
|
width: 100%;
|
|
24
39
|
z-index: 999999;
|
|
@@ -51,6 +66,52 @@
|
|
|
51
66
|
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
|
|
52
67
|
}
|
|
53
68
|
|
|
69
|
+
.loader{
|
|
70
|
+
display: block;
|
|
71
|
+
z-index: 99;
|
|
72
|
+
position: absolute;
|
|
73
|
+
top: calc( 50% - 50px);
|
|
74
|
+
left: calc( 50% - 50px);
|
|
75
|
+
width: 100px;
|
|
76
|
+
height: 100px;
|
|
77
|
+
border: 3px solid rgb(224, 106, 88);
|
|
78
|
+
border-radius: 50%;
|
|
79
|
+
|
|
80
|
+
animation: spin 7s ease-in-out;
|
|
81
|
+
animation-iteration-count: infinite;
|
|
82
|
+
transition-duration: 0.1s;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.loader:hover {
|
|
86
|
+
scale: 0.95;
|
|
87
|
+
/*Loader on hover effect*/
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.loader:active {
|
|
91
|
+
scale: 1.2;
|
|
92
|
+
/*Loader on click effect*/
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@keyframes spin {
|
|
96
|
+
0% {
|
|
97
|
+
transform: rotate(0deg);
|
|
98
|
+
border-bottom: solid 3px transparent;
|
|
99
|
+
border-top: solid 3px transparent;
|
|
100
|
+
}
|
|
101
|
+
50% {
|
|
102
|
+
transform: rotate(1800deg);
|
|
103
|
+
border: 3px solid white;
|
|
104
|
+
border-left: solid 3px transparent;
|
|
105
|
+
border-right: solid 3px transparent;
|
|
106
|
+
}
|
|
107
|
+
100% {
|
|
108
|
+
/*Reversed spinning*/
|
|
109
|
+
transform: rotate(0deg);
|
|
110
|
+
border-bottom: solid 3px transparent;
|
|
111
|
+
border-top: solid 3px transparent;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
54
115
|
#deferred-styles {
|
|
55
116
|
display: none;
|
|
56
117
|
}
|
|
@@ -162,6 +223,71 @@
|
|
|
162
223
|
z-index: 2;
|
|
163
224
|
position: absolute;
|
|
164
225
|
cursor: pointer;
|
|
226
|
+
font-size: 21px;
|
|
227
|
+
height: var(--header-height);
|
|
228
|
+
font-family: var(--font-family-poppins);
|
|
229
|
+
color: var(--blu);
|
|
230
|
+
background: white;
|
|
231
|
+
border-bottom: 1px solid var(--gray-light-02);
|
|
232
|
+
display: flex;
|
|
233
|
+
width: 100%;
|
|
234
|
+
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.header-left{
|
|
238
|
+
max-width: var(--header-height);
|
|
239
|
+
width: 100%;
|
|
240
|
+
transition: 0.3s;
|
|
241
|
+
border-right: 1px solid transparent;
|
|
242
|
+
/* border-right: 1px solid var(--gray-light-02); */
|
|
243
|
+
padding: 10px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.header-left div {
|
|
247
|
+
display: flex;
|
|
248
|
+
justify-content: center;
|
|
249
|
+
align-items: center;
|
|
250
|
+
position: relative;
|
|
251
|
+
width: 100%;
|
|
252
|
+
height: 100%;
|
|
253
|
+
border-radius: 50%;
|
|
254
|
+
box-shadow: rgba(17, 49, 96, 0.16) 0px 8px 16px 0px, rgba(17, 49, 96, 0.06) 0px 0px 0px 1px; ;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.header-left div .logo {
|
|
258
|
+
opacity: 1;
|
|
259
|
+
width: 25px;
|
|
260
|
+
position: absolute;
|
|
261
|
+
transition: opacity 0.2s ease-in-out;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.header-right {
|
|
265
|
+
display: flex;
|
|
266
|
+
align-items: center;
|
|
267
|
+
justify-content: start;
|
|
268
|
+
width: 100%;
|
|
269
|
+
padding: 0px 10px;
|
|
270
|
+
box-sizing: border-box;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.header-right .header-go-back {
|
|
274
|
+
cursor: pointer;
|
|
275
|
+
position: relative;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.header-right .header-go-back .cds-text {
|
|
279
|
+
font-weight: 700;
|
|
280
|
+
color: var(--base-company-logo);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.header-right .header-title{
|
|
284
|
+
display: flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
justify-content: center;
|
|
287
|
+
gap: 5px;
|
|
288
|
+
font-weight: 300;
|
|
289
|
+
width: 80%;
|
|
290
|
+
|
|
165
291
|
}
|
|
166
292
|
|
|
167
293
|
.share-btn{
|
|
@@ -198,7 +324,9 @@
|
|
|
198
324
|
}
|
|
199
325
|
|
|
200
326
|
.b-agent-demo_powered_by a {
|
|
201
|
-
display: inline-
|
|
327
|
+
display: inline-flex;
|
|
328
|
+
align-items: center;
|
|
329
|
+
gap: 10px;
|
|
202
330
|
margin-top: 30px;
|
|
203
331
|
margin-bottom: 30px;
|
|
204
332
|
text-decoration: none;
|
|
@@ -212,8 +340,7 @@
|
|
|
212
340
|
}
|
|
213
341
|
.b-agent-demo_powered_by img {
|
|
214
342
|
display: inline-block;
|
|
215
|
-
height:
|
|
216
|
-
/* margin-left: 20px; */
|
|
343
|
+
height: 40px;
|
|
217
344
|
}
|
|
218
345
|
|
|
219
346
|
/* The snackbar - position it at the bottom and in the middle of the screen */
|
|
@@ -263,6 +390,12 @@
|
|
|
263
390
|
to {bottom: 0; opacity: 0;}
|
|
264
391
|
}
|
|
265
392
|
|
|
393
|
+
@media (max-width: 451px) {
|
|
394
|
+
.cds-text{
|
|
395
|
+
display: none;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
|
|
266
399
|
</style>
|
|
267
400
|
|
|
268
401
|
<!-- <script type="text/javascript">
|
|
@@ -369,6 +502,8 @@
|
|
|
369
502
|
|
|
370
503
|
window.Tiledesk('onBeforeInit', function(event_data) {
|
|
371
504
|
// console.log("onBeforeInit Tiledesk FN", event_data);
|
|
505
|
+
var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
|
|
506
|
+
|
|
372
507
|
setTimeout(() => {
|
|
373
508
|
document.getElementById("preloader").style.display = "none";
|
|
374
509
|
if(event_data && event_data.detail && event_data.detail.appConfigs){
|
|
@@ -440,6 +575,7 @@
|
|
|
440
575
|
|
|
441
576
|
var url = new URL(currentUrl);
|
|
442
577
|
var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
|
|
578
|
+
var tiledesk_widgetTitle = url.searchParams.get("tiledesk_widgetTitle");
|
|
443
579
|
var project_name = url.searchParams.get("project_name");
|
|
444
580
|
var role = url.searchParams.get("role")
|
|
445
581
|
var urlConsole = baseUrlConsole + "#/projects/"+tiledesk_projectid+"/home";
|
|
@@ -456,6 +592,36 @@
|
|
|
456
592
|
return(false);
|
|
457
593
|
}
|
|
458
594
|
|
|
595
|
+
window.onload = function() {
|
|
596
|
+
document.getElementById("tiledesk_widgetTitle").innerHTML = tiledesk_widgetTitle;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
|
|
600
|
+
function getBrandResources(url) {
|
|
601
|
+
var xhr = new XMLHttpRequest();
|
|
602
|
+
xhr.onreadystatechange = function () {
|
|
603
|
+
if (xhr.readyState === 4) {
|
|
604
|
+
var brandJson = JSON.parse(xhr.response)
|
|
605
|
+
if(brandJson){
|
|
606
|
+
/** TITLE AND FAVICON **/
|
|
607
|
+
brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
|
|
608
|
+
brandJson['WIDGET'].FAVICON_URL? document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
|
|
609
|
+
/** FOOTER-LOGO **/
|
|
610
|
+
brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
|
|
611
|
+
brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
|
|
612
|
+
brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
|
|
613
|
+
/** HEADER-LOGO **/
|
|
614
|
+
brandJson['COMMON'].BASE_LOGO_NO_TEXT? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_NO_TEXT: null;
|
|
615
|
+
brandJson['COMMON'].BRAND_PRIMARY_COLOR? document.body.style.setProperty('--base-company-logo', brandJson['COMMON'].BRAND_PRIMARY_COLOR): null;
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
}
|
|
620
|
+
xhr.open('GET', url, true);
|
|
621
|
+
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
622
|
+
xhr.send();
|
|
623
|
+
}
|
|
624
|
+
|
|
459
625
|
|
|
460
626
|
|
|
461
627
|
</script>
|
|
@@ -464,15 +630,36 @@
|
|
|
464
630
|
|
|
465
631
|
<body class="website white" >
|
|
466
632
|
|
|
633
|
+
<!-- <div id="preloader">
|
|
634
|
+
<div class="logo"></div>
|
|
635
|
+
</div> -->
|
|
467
636
|
|
|
468
637
|
<div id="preloader">
|
|
469
|
-
<div class="
|
|
638
|
+
<div class="loader"></div>
|
|
470
639
|
</div>
|
|
471
640
|
|
|
472
641
|
<header id="header">
|
|
473
642
|
<!-- <ul class="nav navbar-nav navbar-left">
|
|
474
643
|
<li class="sign-up"><button class="share-btn" onclick="copyLink()">SHARE THIS PROTOTYPE</button></li>
|
|
475
644
|
</ul> -->
|
|
645
|
+
<div class="header-left">
|
|
646
|
+
<div>
|
|
647
|
+
<img id="header-logo" class="logo" src="./tiledesk_widget_files/logo-short.png">
|
|
648
|
+
</div>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="header-right">
|
|
651
|
+
<div class="header-go-back">
|
|
652
|
+
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#006cff">
|
|
653
|
+
<path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/>
|
|
654
|
+
</svg> -->
|
|
655
|
+
<span class="cds-text">
|
|
656
|
+
Design Studio
|
|
657
|
+
</span>
|
|
658
|
+
|
|
659
|
+
</div>
|
|
660
|
+
<div class="header-title ellips" id="tiledesk_widgetTitle"></div>
|
|
661
|
+
</div>
|
|
662
|
+
|
|
476
663
|
</header>
|
|
477
664
|
<!-- The actual snackbar -->
|
|
478
665
|
<div id="snackbar">Copied to clipboard...</div>
|
|
@@ -482,9 +669,9 @@
|
|
|
482
669
|
|
|
483
670
|
<footer id="footer">
|
|
484
671
|
<div class="b-agent-demo_powered_by">
|
|
485
|
-
<a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;">
|
|
672
|
+
<a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;" id="footer-link">
|
|
486
673
|
<span style="position: relative; top: 2px;">Powered by</span>
|
|
487
|
-
<img src="./tiledesk_widget_files/logo@2x-black.png">
|
|
674
|
+
<img src="./tiledesk_widget_files/logo@2x-black.png" id="footer-logo">
|
|
488
675
|
</a>
|
|
489
676
|
</div>
|
|
490
677
|
</footer>
|
|
@@ -86,6 +86,16 @@
|
|
|
86
86
|
height: 100%;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
+
.container{
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
width: 100% !important;
|
|
93
|
+
justify-content: space-around;
|
|
94
|
+
}
|
|
95
|
+
#header-logo{
|
|
96
|
+
height: 50px;
|
|
97
|
+
}
|
|
98
|
+
|
|
89
99
|
#wrapper {
|
|
90
100
|
/* display: block!important; */
|
|
91
101
|
min-height: 100%;
|
|
@@ -112,6 +122,8 @@
|
|
|
112
122
|
left: 0px;
|
|
113
123
|
right: 0px;
|
|
114
124
|
width: 100%;
|
|
125
|
+
justify-content: flex-start;
|
|
126
|
+
flex-direction: row;
|
|
115
127
|
}
|
|
116
128
|
|
|
117
129
|
.row {
|
|
@@ -180,7 +192,9 @@
|
|
|
180
192
|
}
|
|
181
193
|
|
|
182
194
|
.b-agent-demo_powered_by a {
|
|
183
|
-
display: inline-
|
|
195
|
+
display: inline-flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
gap: 10px;
|
|
184
198
|
margin-top: 30px;
|
|
185
199
|
margin-bottom: 30px;
|
|
186
200
|
text-decoration: none;
|
|
@@ -436,6 +450,8 @@
|
|
|
436
450
|
window.Tiledesk('onBeforeInit', function(event_data) {
|
|
437
451
|
console.log("onBeforeInit Tiledesk FN", event_data);
|
|
438
452
|
|
|
453
|
+
var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
|
|
454
|
+
|
|
439
455
|
setTimeout(() => {
|
|
440
456
|
if(event_data && event_data.detail && event_data.detail.appConfigs){
|
|
441
457
|
|
|
@@ -633,6 +649,32 @@
|
|
|
633
649
|
);
|
|
634
650
|
}
|
|
635
651
|
|
|
652
|
+
function getBrandResources(url) {
|
|
653
|
+
var xhr = new XMLHttpRequest();
|
|
654
|
+
xhr.onreadystatechange = function () {
|
|
655
|
+
if (xhr.readyState === 4) {
|
|
656
|
+
var brandJson = JSON.parse(xhr.response)
|
|
657
|
+
if(brandJson){
|
|
658
|
+
/** TITLE AND FAVICON **/
|
|
659
|
+
brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
|
|
660
|
+
brandJson['WIDGET'].FAVICON_URL? document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
|
|
661
|
+
/** FOOTER-LOGO **/
|
|
662
|
+
brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
|
|
663
|
+
brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
|
|
664
|
+
brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
|
|
665
|
+
/** HEADER-LOGO **/
|
|
666
|
+
brandJson['COMMON'].BASE_LOGO_WHITE? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_WHITE : null;
|
|
667
|
+
/** HEADER-DOCS RESOURCES **/
|
|
668
|
+
document.getElementsByClassName('docs')[0].style.display = 'none'
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
xhr.open('GET', url, true);
|
|
673
|
+
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
674
|
+
xhr.send();
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
|
|
636
678
|
function onClickTestButton(event){
|
|
637
679
|
console.log('onClickTestButton: event-->',event)
|
|
638
680
|
if(event ==='hide'){
|
|
@@ -1566,7 +1608,7 @@
|
|
|
1566
1608
|
<span class="icon-bar"></span>
|
|
1567
1609
|
<span class="icon-bar"></span>
|
|
1568
1610
|
</button>
|
|
1569
|
-
<
|
|
1611
|
+
<img src="tiledesk_widget_files/logo.png" id="header-logo">
|
|
1570
1612
|
</div>
|
|
1571
1613
|
|
|
1572
1614
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
@@ -1586,7 +1628,7 @@
|
|
|
1586
1628
|
|
|
1587
1629
|
<div id="main" class="container">
|
|
1588
1630
|
<div class="row">
|
|
1589
|
-
<div class="col-md-
|
|
1631
|
+
<div class="col-md-12">
|
|
1590
1632
|
<h1 style="min-height: 39px;">TEST ACTIONS</h1>
|
|
1591
1633
|
<h3 id="project_name" style="min-height: 39px;"></h3>
|
|
1592
1634
|
<div class="row method_container">
|
|
@@ -2375,20 +2417,16 @@
|
|
|
2375
2417
|
</div>
|
|
2376
2418
|
</div>
|
|
2377
2419
|
|
|
2378
|
-
<div class="col-md-6"></div>
|
|
2379
2420
|
</div>
|
|
2380
2421
|
|
|
2381
|
-
<div class="row">
|
|
2382
|
-
<
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
<
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
<a href="" data-toggle="modal" data-target="#shareModal"><i class="fa-reply fa"></i>Share</a>
|
|
2389
|
-
</div>
|
|
2422
|
+
<div class="row" style="width: 100%;">
|
|
2423
|
+
<h1 id="project_name" style="min-height: 39px;"></h1>
|
|
2424
|
+
<h2></h2>
|
|
2425
|
+
<div class="b_integrations_agent_links">
|
|
2426
|
+
<a href="" data-toggle="modal" data-target="#embedModal" id="enbed" style="display: none;"><i class="fa-code fa"></i>Embed</a>
|
|
2427
|
+
<!-- <a href="mailto:?subject=Tiledesk%20widget%20test%20page"><i class="fa-envelope-o fa" target="_blank"></i>Email</a> -->
|
|
2428
|
+
<a href="" data-toggle="modal" data-target="#shareModal"><i class="fa-reply fa"></i>Share</a>
|
|
2390
2429
|
</div>
|
|
2391
|
-
<div class="col-md-6"></div>
|
|
2392
2430
|
</div>
|
|
2393
2431
|
|
|
2394
2432
|
|
|
@@ -2469,9 +2507,9 @@
|
|
|
2469
2507
|
|
|
2470
2508
|
<footer id="footer">
|
|
2471
2509
|
<div class="b-agent-demo_powered_by">
|
|
2472
|
-
<a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;">
|
|
2510
|
+
<a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;" id="footer-link">
|
|
2473
2511
|
<span style="position: relative; top: 2px;">Powered by</span>
|
|
2474
|
-
<img src="./tiledesk_widget_files/logo@2x-black.png">
|
|
2512
|
+
<img src="./tiledesk_widget_files/logo@2x-black.png" id="footer-logo">
|
|
2475
2513
|
</a>
|
|
2476
2514
|
</div>
|
|
2477
2515
|
</footer>
|
|
@@ -16,9 +16,11 @@
|
|
|
16
16
|
|
|
17
17
|
#preloader {
|
|
18
18
|
background: #fff;
|
|
19
|
-
position:
|
|
19
|
+
position: absolute;
|
|
20
20
|
top: 0;
|
|
21
21
|
left: 0;
|
|
22
|
+
bottom: 0;
|
|
23
|
+
right: 0;
|
|
22
24
|
height: 100%;
|
|
23
25
|
width: 100%;
|
|
24
26
|
z-index: 999999;
|
|
@@ -51,6 +53,52 @@
|
|
|
51
53
|
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
|
|
52
54
|
}
|
|
53
55
|
|
|
56
|
+
.loader{
|
|
57
|
+
display: block;
|
|
58
|
+
z-index: 99;
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: calc( 50% - 50px);
|
|
61
|
+
left: calc( 50% - 50px);
|
|
62
|
+
width: 100px;
|
|
63
|
+
height: 100px;
|
|
64
|
+
border: 3px solid rgb(224, 106, 88);
|
|
65
|
+
border-radius: 50%;
|
|
66
|
+
|
|
67
|
+
animation: spin 7s ease-in-out;
|
|
68
|
+
animation-iteration-count: infinite;
|
|
69
|
+
transition-duration: 0.1s;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.loader:hover {
|
|
73
|
+
scale: 0.95;
|
|
74
|
+
/*Loader on hover effect*/
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.loader:active {
|
|
78
|
+
scale: 1.2;
|
|
79
|
+
/*Loader on click effect*/
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@keyframes spin {
|
|
83
|
+
0% {
|
|
84
|
+
transform: rotate(0deg);
|
|
85
|
+
border-bottom: solid 3px transparent;
|
|
86
|
+
border-top: solid 3px transparent;
|
|
87
|
+
}
|
|
88
|
+
50% {
|
|
89
|
+
transform: rotate(1800deg);
|
|
90
|
+
border: 3px solid white;
|
|
91
|
+
border-left: solid 3px transparent;
|
|
92
|
+
border-right: solid 3px transparent;
|
|
93
|
+
}
|
|
94
|
+
100% {
|
|
95
|
+
/*Reversed spinning*/
|
|
96
|
+
transform: rotate(0deg);
|
|
97
|
+
border-bottom: solid 3px transparent;
|
|
98
|
+
border-top: solid 3px transparent;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
54
102
|
#deferred-styles {
|
|
55
103
|
display: none;
|
|
56
104
|
}
|
|
@@ -86,6 +134,17 @@
|
|
|
86
134
|
height: 100%;
|
|
87
135
|
}
|
|
88
136
|
|
|
137
|
+
|
|
138
|
+
.container{
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
width: 100% !important;
|
|
142
|
+
justify-content: space-around;
|
|
143
|
+
}
|
|
144
|
+
#header-logo{
|
|
145
|
+
height: 50px;
|
|
146
|
+
}
|
|
147
|
+
|
|
89
148
|
#wrapper {
|
|
90
149
|
/* display: block!important; */
|
|
91
150
|
min-height: 100%;
|
|
@@ -95,6 +154,8 @@
|
|
|
95
154
|
#main {
|
|
96
155
|
padding-bottom:100px;
|
|
97
156
|
margin: 20px auto 0 auto;
|
|
157
|
+
width: 970px !important;
|
|
158
|
+
justify-content: start;
|
|
98
159
|
}
|
|
99
160
|
|
|
100
161
|
.row {
|
|
@@ -102,22 +163,6 @@
|
|
|
102
163
|
margin-right: 0;
|
|
103
164
|
}
|
|
104
165
|
|
|
105
|
-
.b_frame {
|
|
106
|
-
-webkit-box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
|
|
107
|
-
-moz-box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
|
|
108
|
-
box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
|
|
109
|
-
border: 0;
|
|
110
|
-
width: 400px;
|
|
111
|
-
height: 530px;
|
|
112
|
-
display: block;
|
|
113
|
-
margin: 0 auto;
|
|
114
|
-
margin-bottom: 40px;
|
|
115
|
-
}
|
|
116
|
-
.col-md-6 {
|
|
117
|
-
margin-top: 30px;
|
|
118
|
-
padding: 0;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
166
|
|
|
122
167
|
.b_integrations_agent_links {
|
|
123
168
|
margin-top: 50px;
|
|
@@ -159,7 +204,9 @@
|
|
|
159
204
|
}
|
|
160
205
|
|
|
161
206
|
.b-agent-demo_powered_by a {
|
|
162
|
-
display: inline-
|
|
207
|
+
display: inline-flex;
|
|
208
|
+
align-items: center;
|
|
209
|
+
gap: 10px;
|
|
163
210
|
margin-top: 30px;
|
|
164
211
|
margin-bottom: 30px;
|
|
165
212
|
text-decoration: none;
|
|
@@ -173,8 +220,7 @@
|
|
|
173
220
|
}
|
|
174
221
|
.b-agent-demo_powered_by img {
|
|
175
222
|
display: inline-block;
|
|
176
|
-
height:
|
|
177
|
-
/* margin-left: 20px; */
|
|
223
|
+
height: 40px;
|
|
178
224
|
}
|
|
179
225
|
|
|
180
226
|
|
|
@@ -230,7 +276,9 @@
|
|
|
230
276
|
|
|
231
277
|
window.Tiledesk('onBeforeInit', function(event_data) {
|
|
232
278
|
console.log("onBeforeInit Tiledesk FN", event_data);
|
|
233
|
-
|
|
279
|
+
|
|
280
|
+
var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
|
|
281
|
+
|
|
234
282
|
setTimeout(() => {
|
|
235
283
|
if(event_data && event_data.detail && event_data.detail.appConfigs){
|
|
236
284
|
|
|
@@ -274,7 +322,6 @@
|
|
|
274
322
|
}
|
|
275
323
|
|
|
276
324
|
|
|
277
|
-
|
|
278
325
|
var currentUrl = window.location.href
|
|
279
326
|
var baseUrl = window.location.origin
|
|
280
327
|
function shareOnFacebook() {
|
|
@@ -337,6 +384,32 @@
|
|
|
337
384
|
'_blank'
|
|
338
385
|
);
|
|
339
386
|
}
|
|
387
|
+
|
|
388
|
+
function getBrandResources(url) {
|
|
389
|
+
var xhr = new XMLHttpRequest();
|
|
390
|
+
xhr.onreadystatechange = function () {
|
|
391
|
+
if (xhr.readyState === 4) {
|
|
392
|
+
var brandJson = JSON.parse(xhr.response)
|
|
393
|
+
if(brandJson){
|
|
394
|
+
/** TITLE AND FAVICON **/
|
|
395
|
+
brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
|
|
396
|
+
brandJson['WIDGET'].FAVICON_URL? document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
|
|
397
|
+
/** FOOTER-LOGO **/
|
|
398
|
+
brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
|
|
399
|
+
brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
|
|
400
|
+
brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
|
|
401
|
+
/** HEADER-LOGO **/
|
|
402
|
+
brandJson['COMMON'].BASE_LOGO_WHITE? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_WHITE : null;
|
|
403
|
+
/** HEADER-DOCS RESOURCES **/
|
|
404
|
+
document.getElementsByClassName('docs')[0].style.display = 'none'
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
xhr.open('GET', url, true);
|
|
410
|
+
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
411
|
+
xhr.send();
|
|
412
|
+
}
|
|
340
413
|
|
|
341
414
|
var url = new URL(currentUrl);
|
|
342
415
|
var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
|
|
@@ -383,8 +456,12 @@
|
|
|
383
456
|
</head>
|
|
384
457
|
|
|
385
458
|
<body class="website white" >
|
|
386
|
-
<div id="preloader">
|
|
459
|
+
<!-- <div id="preloader">
|
|
387
460
|
<div class="logo"></div>
|
|
461
|
+
</div> -->
|
|
462
|
+
|
|
463
|
+
<div id="preloader">
|
|
464
|
+
<div class="loader"></div>
|
|
388
465
|
</div>
|
|
389
466
|
|
|
390
467
|
<div id="wrapper">
|
|
@@ -399,11 +476,11 @@
|
|
|
399
476
|
<span class="icon-bar"></span>
|
|
400
477
|
<span class="icon-bar"></span>
|
|
401
478
|
</button>
|
|
402
|
-
<
|
|
479
|
+
<img src="tiledesk_widget_files/logo.png" id="header-logo">
|
|
403
480
|
</div>
|
|
404
481
|
|
|
405
482
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
406
|
-
<ul class="nav navbar-nav">
|
|
483
|
+
<ul class="nav navbar-nav docs">
|
|
407
484
|
<li><a href="https://developer.tiledesk.com/widget/web-sdk" target="_blank">WEB SDK & Docs<span></span></a></li>
|
|
408
485
|
<li><a href="https://www.tiledesk.com/pricing-cloud/" target="_blank">Pricing<span></span></a></li>
|
|
409
486
|
<li><a href="https://www.tiledesk.com/blog/" target="_blank">Blog<span></span></a></li>
|
|
@@ -422,16 +499,12 @@
|
|
|
422
499
|
</header>
|
|
423
500
|
|
|
424
501
|
<div id="main" class="container">
|
|
425
|
-
<div class="row">
|
|
426
|
-
<
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
<
|
|
430
|
-
|
|
431
|
-
<a href="" data-toggle="modal" data-target="#shareModal"><em class="fa-reply fa"></em>Share</a>
|
|
432
|
-
</div>
|
|
433
|
-
</div>
|
|
434
|
-
<div class="col-md-6">
|
|
502
|
+
<div class="row" style="width: 100%;">
|
|
503
|
+
<h1 id="project_name" style="min-height: 39px;"></h1>
|
|
504
|
+
<h2></h2>
|
|
505
|
+
<div class="b_integrations_agent_links">
|
|
506
|
+
<a href="" data-toggle="modal" data-target="#embedModal" id="enbed" style="display: none;"><em class="fa-code fa"></em>Embed</a>
|
|
507
|
+
<a href="" data-toggle="modal" data-target="#shareModal"><em class="fa-reply fa"></em>Share</a>
|
|
435
508
|
</div>
|
|
436
509
|
</div>
|
|
437
510
|
|
|
@@ -512,9 +585,9 @@
|
|
|
512
585
|
|
|
513
586
|
<footer id="footer">
|
|
514
587
|
<div class="b-agent-demo_powered_by">
|
|
515
|
-
<a href="https://
|
|
588
|
+
<a href="https://tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;" id="footer-link">
|
|
516
589
|
<span style="position: relative; top: 2px;">Powered by</span>
|
|
517
|
-
<img src="./tiledesk_widget_files/logo@2x-black.png" alt="Tiledesk">
|
|
590
|
+
<img src="./tiledesk_widget_files/logo@2x-black.png" alt="Tiledesk" id="footer-logo">
|
|
518
591
|
</a>
|
|
519
592
|
</div>
|
|
520
593
|
</footer>
|
|
@@ -230,6 +230,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
|
|
|
230
230
|
archiveConversation(conversationId: string) {
|
|
231
231
|
const that = this
|
|
232
232
|
this.setClosingConversation(conversationId, true);
|
|
233
|
+
this.setConversationRead(conversationId)
|
|
233
234
|
const index = searchIndexInArrayForUid(this.conversations, conversationId);
|
|
234
235
|
// if (index > -1) {
|
|
235
236
|
// this.conversations.splice(index, 1);
|
|
@@ -384,7 +384,8 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
|
|
|
384
384
|
this.isConversationClosingMap.delete(conversationId);
|
|
385
385
|
}
|
|
386
386
|
|
|
387
|
-
archiveConversation(conversationId: string) {
|
|
387
|
+
archiveConversation(conversationId: string) {
|
|
388
|
+
this.setConversationRead(conversationId)
|
|
388
389
|
this.chat21Service.chatClient.archiveConversation(conversationId);
|
|
389
390
|
}
|
|
390
391
|
|