@product7/product7-js 0.2.7 → 0.3.0
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/README.md +40 -39
- package/dist/README.md +40 -39
- package/dist/product7-js.js +183 -41
- package/dist/product7-js.js.map +1 -1
- package/dist/product7-js.min.js +1 -1
- package/dist/product7-js.min.js.map +1 -1
- package/package.json +1 -1
- package/src/styles/design-tokens.js +3 -3
- package/src/styles/messenger-components.js +85 -4
- package/src/styles/messenger-core.js +2 -2
- package/src/widgets/MessengerWidget.js +25 -4
- package/src/widgets/messenger/MessengerState.js +3 -1
- package/src/widgets/messenger/views/ChatView.js +61 -17
- package/src/widgets/messenger/views/HomeView.js +4 -10
package/README.md
CHANGED
|
@@ -31,12 +31,12 @@ npm install @product7/product7-js
|
|
|
31
31
|
import { Product7 } from '@product7/product7-js';
|
|
32
32
|
|
|
33
33
|
const sdk = new Product7({
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
workspace: 'your-workspace',
|
|
35
|
+
metadata: {
|
|
36
|
+
user_id: 'user_123',
|
|
37
|
+
email: 'user@example.com',
|
|
38
|
+
name: 'Jane Doe',
|
|
39
|
+
},
|
|
40
40
|
});
|
|
41
41
|
|
|
42
42
|
await sdk.init();
|
|
@@ -50,19 +50,19 @@ widget.mount();
|
|
|
50
50
|
```html
|
|
51
51
|
<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
|
|
52
52
|
<script>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
const sdk = new window.Product7.Product7SDK({
|
|
54
|
+
workspace: 'your-workspace',
|
|
55
|
+
metadata: {
|
|
56
|
+
user_id: 'user_123',
|
|
57
|
+
email: 'user@example.com',
|
|
58
|
+
name: 'Jane Doe',
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
await sdk.init();
|
|
63
|
+
|
|
64
|
+
const widget = sdk.createWidget('button', { position: 'bottom-right' });
|
|
65
|
+
widget.mount();
|
|
66
66
|
</script>
|
|
67
67
|
```
|
|
68
68
|
|
|
@@ -72,27 +72,27 @@ widget.mount();
|
|
|
72
72
|
|
|
73
73
|
## Widgets
|
|
74
74
|
|
|
75
|
-
| Widget
|
|
76
|
-
|
|
77
|
-
| Feedback button | `'button'`
|
|
78
|
-
| Messenger
|
|
79
|
-
| Survey
|
|
80
|
-
| Inline
|
|
75
|
+
| Widget | Type string | Description |
|
|
76
|
+
| --------------- | ------------- | ----------------------------------------------------- |
|
|
77
|
+
| Feedback button | `'button'` | Floating button that opens a feedback panel or modal |
|
|
78
|
+
| Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
|
|
79
|
+
| Survey | `'survey'` | NPS, CSAT, CES, and custom multi-step surveys |
|
|
80
|
+
| Inline | `'inline'` | Embed feedback directly into a page element |
|
|
81
81
|
|
|
82
82
|
```javascript
|
|
83
83
|
// Messenger
|
|
84
84
|
const messenger = sdk.createWidget('messenger', {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
position: 'bottom-right',
|
|
86
|
+
teamName: 'Support Team',
|
|
87
|
+
enableHelp: true,
|
|
88
|
+
enableChangelog: true,
|
|
89
89
|
});
|
|
90
90
|
messenger.mount();
|
|
91
91
|
|
|
92
92
|
// Survey — fetch active surveys and show on load
|
|
93
93
|
const surveys = await sdk.getActiveSurveys({ includeEligibility: true });
|
|
94
94
|
if (surveys.length > 0) {
|
|
95
|
-
|
|
95
|
+
sdk.showSurveyById(surveys[0].surveyId, { position: 'center' });
|
|
96
96
|
}
|
|
97
97
|
```
|
|
98
98
|
|
|
@@ -102,15 +102,16 @@ if (surveys.length > 0) {
|
|
|
102
102
|
|
|
103
103
|
```javascript
|
|
104
104
|
new Product7({
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
workspace: 'your-workspace', // required
|
|
106
|
+
metadata: {
|
|
107
|
+
// recommended — identifies the user
|
|
108
|
+
user_id: 'user_123',
|
|
109
|
+
email: 'user@example.com',
|
|
110
|
+
name: 'Jane Doe',
|
|
111
|
+
custom_fields: { plan: 'pro' },
|
|
112
|
+
},
|
|
113
|
+
debug: false, // enable console logging
|
|
114
|
+
mock: false, // run without a backend (dev/testing)
|
|
114
115
|
});
|
|
115
116
|
```
|
|
116
117
|
|
package/dist/README.md
CHANGED
|
@@ -31,12 +31,12 @@ npm install @product7/product7-js
|
|
|
31
31
|
import { Product7 } from '@product7/product7-js';
|
|
32
32
|
|
|
33
33
|
const sdk = new Product7({
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
workspace: 'your-workspace',
|
|
35
|
+
metadata: {
|
|
36
|
+
user_id: 'user_123',
|
|
37
|
+
email: 'user@example.com',
|
|
38
|
+
name: 'Jane Doe',
|
|
39
|
+
},
|
|
40
40
|
});
|
|
41
41
|
|
|
42
42
|
await sdk.init();
|
|
@@ -50,19 +50,19 @@ widget.mount();
|
|
|
50
50
|
```html
|
|
51
51
|
<script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
|
|
52
52
|
<script>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
const sdk = new window.Product7.Product7SDK({
|
|
54
|
+
workspace: 'your-workspace',
|
|
55
|
+
metadata: {
|
|
56
|
+
user_id: 'user_123',
|
|
57
|
+
email: 'user@example.com',
|
|
58
|
+
name: 'Jane Doe',
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
await sdk.init();
|
|
63
|
+
|
|
64
|
+
const widget = sdk.createWidget('button', { position: 'bottom-right' });
|
|
65
|
+
widget.mount();
|
|
66
66
|
</script>
|
|
67
67
|
```
|
|
68
68
|
|
|
@@ -72,27 +72,27 @@ widget.mount();
|
|
|
72
72
|
|
|
73
73
|
## Widgets
|
|
74
74
|
|
|
75
|
-
| Widget
|
|
76
|
-
|
|
77
|
-
| Feedback button | `'button'`
|
|
78
|
-
| Messenger
|
|
79
|
-
| Survey
|
|
80
|
-
| Inline
|
|
75
|
+
| Widget | Type string | Description |
|
|
76
|
+
| --------------- | ------------- | ----------------------------------------------------- |
|
|
77
|
+
| Feedback button | `'button'` | Floating button that opens a feedback panel or modal |
|
|
78
|
+
| Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
|
|
79
|
+
| Survey | `'survey'` | NPS, CSAT, CES, and custom multi-step surveys |
|
|
80
|
+
| Inline | `'inline'` | Embed feedback directly into a page element |
|
|
81
81
|
|
|
82
82
|
```javascript
|
|
83
83
|
// Messenger
|
|
84
84
|
const messenger = sdk.createWidget('messenger', {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
position: 'bottom-right',
|
|
86
|
+
teamName: 'Support Team',
|
|
87
|
+
enableHelp: true,
|
|
88
|
+
enableChangelog: true,
|
|
89
89
|
});
|
|
90
90
|
messenger.mount();
|
|
91
91
|
|
|
92
92
|
// Survey — fetch active surveys and show on load
|
|
93
93
|
const surveys = await sdk.getActiveSurveys({ includeEligibility: true });
|
|
94
94
|
if (surveys.length > 0) {
|
|
95
|
-
|
|
95
|
+
sdk.showSurveyById(surveys[0].surveyId, { position: 'center' });
|
|
96
96
|
}
|
|
97
97
|
```
|
|
98
98
|
|
|
@@ -102,15 +102,16 @@ if (surveys.length > 0) {
|
|
|
102
102
|
|
|
103
103
|
```javascript
|
|
104
104
|
new Product7({
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
workspace: 'your-workspace', // required
|
|
106
|
+
metadata: {
|
|
107
|
+
// recommended — identifies the user
|
|
108
|
+
user_id: 'user_123',
|
|
109
|
+
email: 'user@example.com',
|
|
110
|
+
name: 'Jane Doe',
|
|
111
|
+
custom_fields: { plan: 'pro' },
|
|
112
|
+
},
|
|
113
|
+
debug: false, // enable console logging
|
|
114
|
+
mock: false, // run without a backend (dev/testing)
|
|
114
115
|
});
|
|
115
116
|
```
|
|
116
117
|
|
package/dist/product7-js.js
CHANGED
|
@@ -2977,8 +2977,8 @@
|
|
|
2977
2977
|
--msg-bg-elevated: #FFFFFF;
|
|
2978
2978
|
--msg-bg-hover: #F9FAFB;
|
|
2979
2979
|
--msg-bg-input: rgba(255, 255, 255, 0.7);
|
|
2980
|
-
--msg-bg-bubble-own: #
|
|
2981
|
-
--msg-bg-bubble-received:
|
|
2980
|
+
--msg-bg-bubble-own: #F3F4F6;
|
|
2981
|
+
--msg-bg-bubble-received: rgba(21, 94, 239, 0.06);
|
|
2982
2982
|
--msg-bg-header-gradient: linear-gradient(180deg, #e0e7ff 0%, #f0f4ff 35%, #FFFFFF 65%);
|
|
2983
2983
|
--msg-bg-header-glow1: radial-gradient(circle, rgba(21, 94, 239, 0.08) 0%, transparent 70%);
|
|
2984
2984
|
--msg-bg-header-glow2: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
|
|
@@ -2987,7 +2987,7 @@
|
|
|
2987
2987
|
--msg-text-tertiary: #6B7280;
|
|
2988
2988
|
--msg-text-muted: #9CA3AF;
|
|
2989
2989
|
--msg-border: #E5E7EB;
|
|
2990
|
-
--msg-border-bubble:
|
|
2990
|
+
--msg-border-bubble: transparent;
|
|
2991
2991
|
--msg-shadow-card: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
|
|
2992
2992
|
--msg-shadow-card-hover: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
|
|
2993
2993
|
|
|
@@ -3391,6 +3391,84 @@
|
|
|
3391
3391
|
max-width: 85%;
|
|
3392
3392
|
}
|
|
3393
3393
|
|
|
3394
|
+
.messenger-message-system {
|
|
3395
|
+
align-self: center;
|
|
3396
|
+
display: flex;
|
|
3397
|
+
align-items: center;
|
|
3398
|
+
gap: var(--spacing-2);
|
|
3399
|
+
padding: var(--spacing-2) 0;
|
|
3400
|
+
width: 100%;
|
|
3401
|
+
}
|
|
3402
|
+
|
|
3403
|
+
.messenger-message-system::before,
|
|
3404
|
+
.messenger-message-system::after {
|
|
3405
|
+
content: '';
|
|
3406
|
+
flex: 1;
|
|
3407
|
+
height: 1px;
|
|
3408
|
+
background: var(--msg-border);
|
|
3409
|
+
}
|
|
3410
|
+
|
|
3411
|
+
.messenger-message-system-text {
|
|
3412
|
+
font-size: 0.6875rem;
|
|
3413
|
+
color: var(--msg-text-tertiary);
|
|
3414
|
+
white-space: nowrap;
|
|
3415
|
+
padding: 0 var(--spacing-2);
|
|
3416
|
+
letter-spacing: 0.01em;
|
|
3417
|
+
}
|
|
3418
|
+
|
|
3419
|
+
/* Rich join/leave system event */
|
|
3420
|
+
.messenger-message-system-event {
|
|
3421
|
+
align-self: center;
|
|
3422
|
+
display: flex;
|
|
3423
|
+
flex-direction: column;
|
|
3424
|
+
align-items: center;
|
|
3425
|
+
gap: var(--spacing-2);
|
|
3426
|
+
padding: var(--spacing-4) 0;
|
|
3427
|
+
width: 100%;
|
|
3428
|
+
text-align: center;
|
|
3429
|
+
}
|
|
3430
|
+
|
|
3431
|
+
.messenger-message-system-event-avatar {
|
|
3432
|
+
width: 3rem;
|
|
3433
|
+
height: 3rem;
|
|
3434
|
+
border-radius: var(--radius-full);
|
|
3435
|
+
border: 2px solid var(--msg-border);
|
|
3436
|
+
display: flex;
|
|
3437
|
+
align-items: center;
|
|
3438
|
+
justify-content: center;
|
|
3439
|
+
font-size: 1.125rem;
|
|
3440
|
+
font-weight: var(--font-weight-semibold);
|
|
3441
|
+
color: #ffffff;
|
|
3442
|
+
overflow: hidden;
|
|
3443
|
+
flex-shrink: 0;
|
|
3444
|
+
}
|
|
3445
|
+
|
|
3446
|
+
.messenger-message-system-event-avatar img {
|
|
3447
|
+
width: 100%;
|
|
3448
|
+
height: 100%;
|
|
3449
|
+
object-fit: cover;
|
|
3450
|
+
}
|
|
3451
|
+
|
|
3452
|
+
.messenger-message-system-event-name {
|
|
3453
|
+
font-size: 0.875rem;
|
|
3454
|
+
font-weight: var(--font-weight-semibold);
|
|
3455
|
+
color: var(--msg-text);
|
|
3456
|
+
line-height: 1.3;
|
|
3457
|
+
}
|
|
3458
|
+
|
|
3459
|
+
.messenger-message-system-event-action {
|
|
3460
|
+
font-size: 0.875rem;
|
|
3461
|
+
font-weight: 500;
|
|
3462
|
+
color: var(--msg-text-secondary);
|
|
3463
|
+
margin-top: -2px;
|
|
3464
|
+
}
|
|
3465
|
+
|
|
3466
|
+
.messenger-message-system-event-time {
|
|
3467
|
+
font-size: 0.875rem;
|
|
3468
|
+
font-weight: 500;
|
|
3469
|
+
color: var(--msg-text-tertiary);
|
|
3470
|
+
}
|
|
3471
|
+
|
|
3394
3472
|
.messenger-message-own {
|
|
3395
3473
|
align-self: flex-end;
|
|
3396
3474
|
flex-direction: column;
|
|
@@ -3431,7 +3509,6 @@
|
|
|
3431
3509
|
.messenger-message-own .messenger-message-bubble {
|
|
3432
3510
|
background: var(--msg-bg-bubble-own);
|
|
3433
3511
|
color: var(--msg-text);
|
|
3434
|
-
border: 1px solid var(--msg-border-bubble);
|
|
3435
3512
|
border-bottom-right-radius: 0.25rem;
|
|
3436
3513
|
}
|
|
3437
3514
|
|
|
@@ -3442,8 +3519,8 @@
|
|
|
3442
3519
|
}
|
|
3443
3520
|
|
|
3444
3521
|
.messenger-message-content {
|
|
3445
|
-
font-size:
|
|
3446
|
-
font-weight:
|
|
3522
|
+
font-size: 0.875rem;
|
|
3523
|
+
font-weight: 500;
|
|
3447
3524
|
line-height: var(--line-height-relaxed);
|
|
3448
3525
|
}
|
|
3449
3526
|
|
|
@@ -3468,10 +3545,14 @@
|
|
|
3468
3545
|
gap: 0.375rem;
|
|
3469
3546
|
font-size: var(--font-size-xs);
|
|
3470
3547
|
color: var(--msg-text-tertiary);
|
|
3471
|
-
margin-top: 0.
|
|
3548
|
+
margin-top: 0.25rem;
|
|
3472
3549
|
padding: 0 var(--spacing-1);
|
|
3473
3550
|
}
|
|
3474
3551
|
|
|
3552
|
+
.messenger-message-meta-own {
|
|
3553
|
+
justify-content: flex-end;
|
|
3554
|
+
}
|
|
3555
|
+
|
|
3475
3556
|
.messenger-message-image {
|
|
3476
3557
|
max-width: 220px;
|
|
3477
3558
|
max-height: 200px;
|
|
@@ -4257,8 +4338,8 @@
|
|
|
4257
4338
|
--msg-bg-elevated: #232930;
|
|
4258
4339
|
--msg-bg-hover: #232930;
|
|
4259
4340
|
--msg-bg-input: #1a1e24;
|
|
4260
|
-
--msg-bg-bubble-own: #
|
|
4261
|
-
--msg-bg-bubble-received:
|
|
4341
|
+
--msg-bg-bubble-own: #1e2330;
|
|
4342
|
+
--msg-bg-bubble-received: rgba(21, 94, 239, 0.12);
|
|
4262
4343
|
--msg-bg-header-gradient: linear-gradient(180deg, #1a1e2e 0%, #141720 50%, #0f1317 100%);
|
|
4263
4344
|
--msg-bg-header-glow1: radial-gradient(circle, rgba(21, 94, 239, 0.07) 0%, transparent 70%);
|
|
4264
4345
|
--msg-bg-header-glow2: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
|
|
@@ -8347,7 +8428,9 @@
|
|
|
8347
8428
|
|
|
8348
8429
|
this.agentsOnline = false;
|
|
8349
8430
|
this.onlineCount = 0;
|
|
8350
|
-
this.
|
|
8431
|
+
this.onlineMessage = options.onlineMessage || "We're online now";
|
|
8432
|
+
this.responseTime =
|
|
8433
|
+
options.responseTime || 'We typically reply within a few minutes';
|
|
8351
8434
|
|
|
8352
8435
|
this.typingUsers = {};
|
|
8353
8436
|
|
|
@@ -9356,6 +9439,10 @@
|
|
|
9356
9439
|
}
|
|
9357
9440
|
|
|
9358
9441
|
_renderMessage(message) {
|
|
9442
|
+
if (message.isSystem) {
|
|
9443
|
+
return this._renderSystemMessage(message);
|
|
9444
|
+
}
|
|
9445
|
+
|
|
9359
9446
|
const isOwn = message.isOwn;
|
|
9360
9447
|
const messageClass = isOwn
|
|
9361
9448
|
? 'messenger-message-own'
|
|
@@ -9375,12 +9462,11 @@
|
|
|
9375
9462
|
<div class="messenger-message ${messageClass}">
|
|
9376
9463
|
${bubbleHtml}
|
|
9377
9464
|
${attachmentsHtml}
|
|
9465
|
+
${timeStr ? `<div class="messenger-message-meta messenger-message-meta-own"><span>${timeStr}</span></div>` : ''}
|
|
9378
9466
|
</div>
|
|
9379
9467
|
`;
|
|
9380
9468
|
}
|
|
9381
9469
|
|
|
9382
|
-
const senderName = message.sender?.name || 'Support';
|
|
9383
|
-
const senderRole = message.sender?.role || 'Agent';
|
|
9384
9470
|
const avatarHtml = this._renderSenderAvatar(message.sender);
|
|
9385
9471
|
return `
|
|
9386
9472
|
<div class="messenger-message ${messageClass}">
|
|
@@ -9391,13 +9477,53 @@
|
|
|
9391
9477
|
${attachmentsHtml}
|
|
9392
9478
|
</div>
|
|
9393
9479
|
</div>
|
|
9394
|
-
|
|
9395
|
-
|
|
9396
|
-
|
|
9397
|
-
|
|
9398
|
-
|
|
9399
|
-
|
|
9480
|
+
${timeStr ? `<div class="messenger-message-meta"><span>${timeStr}</span></div>` : ''}
|
|
9481
|
+
</div>
|
|
9482
|
+
`;
|
|
9483
|
+
}
|
|
9484
|
+
|
|
9485
|
+
_renderSystemMessage(message) {
|
|
9486
|
+
const content = message.content || '';
|
|
9487
|
+
const isJoinLeave =
|
|
9488
|
+
content.includes('joined the chat') ||
|
|
9489
|
+
content.includes('left the chat') ||
|
|
9490
|
+
content.includes('joined the conversation') ||
|
|
9491
|
+
content.includes('left the conversation');
|
|
9492
|
+
|
|
9493
|
+
if (isJoinLeave && message.sender) {
|
|
9494
|
+
const rawName = message.sender.name || '';
|
|
9495
|
+
const name = rawName
|
|
9496
|
+
.split(' ')
|
|
9497
|
+
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
|
9498
|
+
.join(' ');
|
|
9499
|
+
const avatarUrl = message.sender.avatarUrl;
|
|
9500
|
+
const initial = name.charAt(0).toUpperCase() || '?';
|
|
9501
|
+
const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
|
|
9502
|
+
const colorIndex = rawName.charCodeAt(0) % colors.length;
|
|
9503
|
+
const avatarHtml = avatarUrl
|
|
9504
|
+
? `<img src="${this._escapeHtml(avatarUrl)}" alt="${this._escapeHtml(name)}" />`
|
|
9505
|
+
: initial;
|
|
9506
|
+
const avatarStyle = avatarUrl
|
|
9507
|
+
? ''
|
|
9508
|
+
: `style="background: ${colors[colorIndex]};"`;
|
|
9509
|
+
const timeStr = this._formatMessageTime(message.timestamp);
|
|
9510
|
+
|
|
9511
|
+
const rawAction = content.replace(rawName, '').trim();
|
|
9512
|
+
const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
|
|
9513
|
+
|
|
9514
|
+
return `
|
|
9515
|
+
<div class="messenger-message-system-event">
|
|
9516
|
+
<div class="messenger-message-system-event-avatar" ${avatarStyle}>${avatarHtml}</div>
|
|
9517
|
+
<span class="messenger-message-system-event-name">${this._escapeHtml(name)}</span>
|
|
9518
|
+
<span class="messenger-message-system-event-action">${this._escapeHtml(action)}</span>
|
|
9519
|
+
${timeStr ? `<span class="messenger-message-system-event-time">${timeStr}</span>` : ''}
|
|
9400
9520
|
</div>
|
|
9521
|
+
`;
|
|
9522
|
+
}
|
|
9523
|
+
|
|
9524
|
+
return `
|
|
9525
|
+
<div class="messenger-message-system">
|
|
9526
|
+
<span class="messenger-message-system-text">${this._escapeHtml(content)}</span>
|
|
9401
9527
|
</div>
|
|
9402
9528
|
`;
|
|
9403
9529
|
}
|
|
@@ -9413,12 +9539,7 @@
|
|
|
9413
9539
|
_renderTeamAvatars() {
|
|
9414
9540
|
const avatars = this.state.teamAvatars;
|
|
9415
9541
|
if (!avatars || avatars.length === 0) {
|
|
9416
|
-
return
|
|
9417
|
-
<div class="messenger-avatar-stack">
|
|
9418
|
-
<div class="sdk-avatar sdk-avatar-md">S</div>
|
|
9419
|
-
<div class="sdk-avatar sdk-avatar-md">T</div>
|
|
9420
|
-
</div>
|
|
9421
|
-
`;
|
|
9542
|
+
return '';
|
|
9422
9543
|
}
|
|
9423
9544
|
|
|
9424
9545
|
const avatarItems = avatars
|
|
@@ -9437,11 +9558,17 @@
|
|
|
9437
9558
|
_formatMessageTime(timestamp) {
|
|
9438
9559
|
if (!timestamp) return '';
|
|
9439
9560
|
const date = new Date(timestamp);
|
|
9440
|
-
|
|
9441
|
-
|
|
9561
|
+
const datePart = date.toLocaleDateString('en-GB', {
|
|
9562
|
+
day: '2-digit',
|
|
9563
|
+
month: 'short',
|
|
9564
|
+
year: 'numeric',
|
|
9565
|
+
});
|
|
9566
|
+
const timePart = date.toLocaleTimeString('en-GB', {
|
|
9567
|
+
hour: '2-digit',
|
|
9442
9568
|
minute: '2-digit',
|
|
9443
|
-
hour12:
|
|
9569
|
+
hour12: false,
|
|
9444
9570
|
});
|
|
9571
|
+
return `${datePart}, ${timePart}`;
|
|
9445
9572
|
}
|
|
9446
9573
|
|
|
9447
9574
|
_formatMessageContent(content) {
|
|
@@ -10391,6 +10518,7 @@
|
|
|
10391
10518
|
<div class="messenger-home-welcome">
|
|
10392
10519
|
<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
|
|
10393
10520
|
<span class="messenger-home-question">${this.state.welcomeMessage}</span>
|
|
10521
|
+
${this._renderAvailabilityStatus()}
|
|
10394
10522
|
</div>
|
|
10395
10523
|
</div>
|
|
10396
10524
|
|
|
@@ -10410,12 +10538,7 @@
|
|
|
10410
10538
|
const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
|
|
10411
10539
|
|
|
10412
10540
|
if (!avatars || avatars.length === 0) {
|
|
10413
|
-
return
|
|
10414
|
-
<div class="messenger-avatar-stack">
|
|
10415
|
-
<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[0]};">S</div>
|
|
10416
|
-
<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[1]};">T</div>
|
|
10417
|
-
</div>
|
|
10418
|
-
`;
|
|
10541
|
+
return '';
|
|
10419
10542
|
}
|
|
10420
10543
|
|
|
10421
10544
|
const avatarItems = avatars
|
|
@@ -10433,14 +10556,12 @@
|
|
|
10433
10556
|
|
|
10434
10557
|
_renderAvailabilityStatus() {
|
|
10435
10558
|
const isOnline = this.state.agentsOnline;
|
|
10436
|
-
const responseTime =
|
|
10437
|
-
this.state.responseTime || 'We typically reply within a few minutes';
|
|
10438
10559
|
|
|
10439
10560
|
if (isOnline) {
|
|
10440
10561
|
return `
|
|
10441
10562
|
<div class="messenger-home-availability">
|
|
10442
10563
|
<span class="messenger-availability-dot messenger-availability-online"></span>
|
|
10443
|
-
<span class="messenger-availability-text"
|
|
10564
|
+
<span class="messenger-availability-text">${this.state.onlineMessage}</span>
|
|
10444
10565
|
</div>
|
|
10445
10566
|
`;
|
|
10446
10567
|
}
|
|
@@ -10448,7 +10569,7 @@
|
|
|
10448
10569
|
return `
|
|
10449
10570
|
<div class="messenger-home-availability">
|
|
10450
10571
|
<span class="messenger-availability-dot messenger-availability-away"></span>
|
|
10451
|
-
<span class="messenger-availability-text">${responseTime}</span>
|
|
10572
|
+
<span class="messenger-availability-text">${this.state.responseTime}</span>
|
|
10452
10573
|
</div>
|
|
10453
10574
|
`;
|
|
10454
10575
|
}
|
|
@@ -10791,6 +10912,9 @@
|
|
|
10791
10912
|
teamAvatars: options.teamAvatars || [],
|
|
10792
10913
|
greetingMessage: options.greetingMessage || 'Hi there 👋',
|
|
10793
10914
|
welcomeMessage: options.welcomeMessage || 'How can we help?',
|
|
10915
|
+
onlineMessage: options.onlineMessage || "We're online now",
|
|
10916
|
+
responseTime:
|
|
10917
|
+
options.responseTime || 'We typically reply within a few minutes',
|
|
10794
10918
|
enableHelp: options.enableHelp !== false,
|
|
10795
10919
|
enableChangelog: resolvedEnableChangelog,
|
|
10796
10920
|
autoLoadData: options.autoLoadData !== false,
|
|
@@ -10812,6 +10936,8 @@
|
|
|
10812
10936
|
teamAvatars: this.messengerOptions.teamAvatars,
|
|
10813
10937
|
greetingMessage: this.messengerOptions.greetingMessage,
|
|
10814
10938
|
welcomeMessage: this.messengerOptions.welcomeMessage,
|
|
10939
|
+
onlineMessage: this.messengerOptions.onlineMessage,
|
|
10940
|
+
responseTime: this.messengerOptions.responseTime,
|
|
10815
10941
|
enableHelp: this.messengerOptions.enableHelp,
|
|
10816
10942
|
enableChangelog: this.messengerOptions.enableChangelog,
|
|
10817
10943
|
metadata: this.sdk?.apiService?.getMetadata() || null,
|
|
@@ -11133,6 +11259,7 @@
|
|
|
11133
11259
|
id: message.id,
|
|
11134
11260
|
content: message.content,
|
|
11135
11261
|
isOwn: message.sender_type === 'customer',
|
|
11262
|
+
isSystem: message.sender_type === 'system',
|
|
11136
11263
|
timestamp: message.created_at,
|
|
11137
11264
|
attachments: attachments.length > 0 ? attachments : undefined,
|
|
11138
11265
|
sender: {
|
|
@@ -11318,7 +11445,9 @@
|
|
|
11318
11445
|
if (data.availability && typeof data.availability === 'object') {
|
|
11319
11446
|
const availability = data.availability;
|
|
11320
11447
|
this.messengerState.agentsOnline = Boolean(
|
|
11321
|
-
availability.agentsOnline ??
|
|
11448
|
+
availability.agentsOnline ??
|
|
11449
|
+
availability.agents_online ??
|
|
11450
|
+
availability.is_online
|
|
11322
11451
|
);
|
|
11323
11452
|
this.messengerState.onlineCount =
|
|
11324
11453
|
availability.onlineCount ?? availability.online_count ?? 0;
|
|
@@ -11446,6 +11575,7 @@
|
|
|
11446
11575
|
id: msg.id,
|
|
11447
11576
|
content: msg.content,
|
|
11448
11577
|
isOwn: msg.sender_type === 'customer',
|
|
11578
|
+
isSystem: msg.sender_type === 'system',
|
|
11449
11579
|
timestamp: msg.created_at,
|
|
11450
11580
|
attachments:
|
|
11451
11581
|
attachments && attachments.length > 0 ? attachments : undefined,
|
|
@@ -11496,14 +11626,25 @@
|
|
|
11496
11626
|
|
|
11497
11627
|
this.messengerState.addConversation(newConversation);
|
|
11498
11628
|
|
|
11499
|
-
|
|
11629
|
+
const initialMessages = [
|
|
11500
11630
|
{
|
|
11501
11631
|
id: 'msg_' + Date.now(),
|
|
11502
11632
|
content: message,
|
|
11503
11633
|
isOwn: true,
|
|
11504
11634
|
timestamp: new Date().toISOString(),
|
|
11505
11635
|
},
|
|
11506
|
-
]
|
|
11636
|
+
];
|
|
11637
|
+
|
|
11638
|
+
initialMessages.push({
|
|
11639
|
+
id: 'system_rt_' + Date.now(),
|
|
11640
|
+
content: this.messengerState.agentsOnline
|
|
11641
|
+
? 'One of our customer support agents will be with you shortly.'
|
|
11642
|
+
: this.messengerState.responseTime,
|
|
11643
|
+
isSystem: true,
|
|
11644
|
+
timestamp: new Date().toISOString(),
|
|
11645
|
+
});
|
|
11646
|
+
|
|
11647
|
+
this.messengerState.setMessages(conv.id, initialMessages);
|
|
11507
11648
|
|
|
11508
11649
|
this.messengerState.setActiveConversation(conv.id);
|
|
11509
11650
|
this.messengerState.setView('chat');
|
|
@@ -11529,7 +11670,8 @@
|
|
|
11529
11670
|
try {
|
|
11530
11671
|
const response = await this.apiService.checkAgentsOnline();
|
|
11531
11672
|
if (response.status && response.data) {
|
|
11532
|
-
this.messengerState.agentsOnline =
|
|
11673
|
+
this.messengerState.agentsOnline =
|
|
11674
|
+
response.data.agents_online ?? response.data.is_online ?? false;
|
|
11533
11675
|
this.messengerState.onlineCount = response.data.online_count || 0;
|
|
11534
11676
|
this.messengerState.responseTime = response.data.response_time || '';
|
|
11535
11677
|
|