@pocketping/widget 1.7.0 → 1.9.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/dist/index.cjs +427 -372
- package/dist/index.d.cts +37 -0
- package/dist/index.d.ts +37 -0
- package/dist/index.js +427 -372
- package/dist/pocketping.min.global.js +387 -367
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6,8 +6,38 @@ import { Fragment as Fragment2 } from "preact";
|
|
|
6
6
|
import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback } from "preact/hooks";
|
|
7
7
|
|
|
8
8
|
// src/components/styles.ts
|
|
9
|
-
function
|
|
9
|
+
function resolveThemeColor(color, isDark, defaultLight, defaultDark) {
|
|
10
|
+
if (!color) {
|
|
11
|
+
return isDark ? defaultDark : defaultLight;
|
|
12
|
+
}
|
|
13
|
+
if (typeof color === "string") {
|
|
14
|
+
return color;
|
|
15
|
+
}
|
|
16
|
+
return isDark ? color.dark : color.light;
|
|
17
|
+
}
|
|
18
|
+
function styles(options) {
|
|
19
|
+
const { primaryColor, theme, headerColor, footerColor, chatBackground, toggleColor } = options;
|
|
10
20
|
const isDark = theme === "dark";
|
|
21
|
+
const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, "#008069", "#202c33");
|
|
22
|
+
const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
|
|
23
|
+
const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
|
|
24
|
+
const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
|
|
25
|
+
const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
|
|
26
|
+
const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
|
|
27
|
+
const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
|
|
28
|
+
const chatBgColor = isDark ? "#0b141a" : "#e5ddd5";
|
|
29
|
+
let chatBgImage = whatsappPattern;
|
|
30
|
+
let chatBgSize = "auto";
|
|
31
|
+
if (resolvedChatBg === "plain") {
|
|
32
|
+
chatBgImage = "none";
|
|
33
|
+
} else if (resolvedChatBg === "dots") {
|
|
34
|
+
chatBgImage = dotsPattern;
|
|
35
|
+
} else if (resolvedChatBg === "whatsapp" || !resolvedChatBg) {
|
|
36
|
+
chatBgImage = whatsappPattern;
|
|
37
|
+
} else if (resolvedChatBg.startsWith("http") || resolvedChatBg.startsWith("/") || resolvedChatBg.startsWith("data:")) {
|
|
38
|
+
chatBgImage = `url("${resolvedChatBg}")`;
|
|
39
|
+
chatBgSize = "cover";
|
|
40
|
+
}
|
|
11
41
|
const colors = {
|
|
12
42
|
bg: isDark ? "#1f2937" : "#ffffff",
|
|
13
43
|
bgSecondary: isDark ? "#374151" : "#f3f4f6",
|
|
@@ -16,6 +46,13 @@ function styles(primaryColor, theme) {
|
|
|
16
46
|
border: isDark ? "#4b5563" : "#e5e7eb",
|
|
17
47
|
messageBg: isDark ? "#374151" : "#f3f4f6"
|
|
18
48
|
};
|
|
49
|
+
function adjustBrightness(hex, percent) {
|
|
50
|
+
const num = parseInt(hex.replace("#", ""), 16);
|
|
51
|
+
const r = Math.min(255, Math.max(0, (num >> 16) + percent));
|
|
52
|
+
const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
|
|
53
|
+
const b = Math.min(255, Math.max(0, (num & 255) + percent));
|
|
54
|
+
return "#" + (16777216 + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
55
|
+
}
|
|
19
56
|
return `
|
|
20
57
|
#pocketping-container {
|
|
21
58
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
@@ -37,29 +74,34 @@ function styles(primaryColor, theme) {
|
|
|
37
74
|
|
|
38
75
|
.pp-toggle {
|
|
39
76
|
position: fixed;
|
|
40
|
-
width:
|
|
41
|
-
height:
|
|
77
|
+
width: 60px;
|
|
78
|
+
height: 60px;
|
|
42
79
|
border-radius: 50%;
|
|
43
|
-
background: ${
|
|
80
|
+
background: ${resolvedToggleColor};
|
|
44
81
|
color: white;
|
|
45
82
|
border: none;
|
|
46
83
|
cursor: pointer;
|
|
47
84
|
display: flex;
|
|
48
85
|
align-items: center;
|
|
49
86
|
justify-content: center;
|
|
50
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
51
|
-
transition: transform 0.2s, box-shadow 0.2s;
|
|
87
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
88
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
52
89
|
z-index: 9999;
|
|
53
90
|
}
|
|
54
91
|
|
|
55
92
|
.pp-toggle:hover {
|
|
56
|
-
transform: scale(1.
|
|
57
|
-
box-shadow: 0 6px
|
|
93
|
+
transform: scale(1.08);
|
|
94
|
+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
95
|
+
background: ${resolvedToggleHoverColor};
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.pp-toggle:active {
|
|
99
|
+
transform: scale(0.95);
|
|
58
100
|
}
|
|
59
101
|
|
|
60
102
|
.pp-toggle svg {
|
|
61
|
-
width:
|
|
62
|
-
height:
|
|
103
|
+
width: 28px;
|
|
104
|
+
height: 28px;
|
|
63
105
|
}
|
|
64
106
|
|
|
65
107
|
.pp-toggle.pp-bottom-right {
|
|
@@ -110,13 +152,13 @@ function styles(primaryColor, theme) {
|
|
|
110
152
|
|
|
111
153
|
.pp-window {
|
|
112
154
|
position: fixed;
|
|
113
|
-
width:
|
|
114
|
-
height:
|
|
155
|
+
width: 375px;
|
|
156
|
+
height: 550px;
|
|
115
157
|
max-height: calc(100vh - 100px);
|
|
116
158
|
max-height: calc(100dvh - 100px);
|
|
117
|
-
background: ${
|
|
118
|
-
border-radius:
|
|
119
|
-
box-shadow: 0
|
|
159
|
+
background: ${isDark ? "#111b21" : "#ffffff"};
|
|
160
|
+
border-radius: 12px;
|
|
161
|
+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15);
|
|
120
162
|
display: flex;
|
|
121
163
|
flex-direction: column;
|
|
122
164
|
overflow: hidden;
|
|
@@ -125,12 +167,12 @@ function styles(primaryColor, theme) {
|
|
|
125
167
|
}
|
|
126
168
|
|
|
127
169
|
.pp-window.pp-bottom-right {
|
|
128
|
-
bottom:
|
|
170
|
+
bottom: 20px;
|
|
129
171
|
right: 20px;
|
|
130
172
|
}
|
|
131
173
|
|
|
132
174
|
.pp-window.pp-bottom-left {
|
|
133
|
-
bottom:
|
|
175
|
+
bottom: 20px;
|
|
134
176
|
left: 20px;
|
|
135
177
|
}
|
|
136
178
|
|
|
@@ -139,9 +181,9 @@ function styles(primaryColor, theme) {
|
|
|
139
181
|
width: calc(100vw - 20px);
|
|
140
182
|
height: auto;
|
|
141
183
|
min-height: 300px;
|
|
142
|
-
max-height: calc(100vh -
|
|
143
|
-
max-height: calc(100svh -
|
|
144
|
-
bottom:
|
|
184
|
+
max-height: calc(100vh - 40px);
|
|
185
|
+
max-height: calc(100svh - 40px); /* svh = small viewport, excludes keyboard */
|
|
186
|
+
bottom: 10px;
|
|
145
187
|
right: 10px;
|
|
146
188
|
left: 10px;
|
|
147
189
|
border-radius: 12px;
|
|
@@ -159,35 +201,38 @@ function styles(primaryColor, theme) {
|
|
|
159
201
|
display: flex;
|
|
160
202
|
align-items: center;
|
|
161
203
|
justify-content: space-between;
|
|
162
|
-
padding:
|
|
163
|
-
background: ${
|
|
204
|
+
padding: 10px 16px;
|
|
205
|
+
background: ${resolvedHeaderColor};
|
|
164
206
|
color: white;
|
|
165
207
|
}
|
|
166
208
|
|
|
167
209
|
.pp-header-info {
|
|
168
210
|
display: flex;
|
|
169
211
|
align-items: center;
|
|
170
|
-
gap:
|
|
212
|
+
gap: 12px;
|
|
171
213
|
}
|
|
172
214
|
|
|
173
215
|
.pp-avatar {
|
|
174
|
-
width:
|
|
175
|
-
height:
|
|
216
|
+
width: 40px;
|
|
217
|
+
height: 40px;
|
|
176
218
|
border-radius: 50%;
|
|
177
219
|
object-fit: cover;
|
|
220
|
+
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
178
221
|
}
|
|
179
222
|
|
|
180
223
|
.pp-header-title {
|
|
181
|
-
font-weight:
|
|
182
|
-
font-size:
|
|
224
|
+
font-weight: 500;
|
|
225
|
+
font-size: 16px;
|
|
226
|
+
letter-spacing: 0.1px;
|
|
183
227
|
}
|
|
184
228
|
|
|
185
229
|
.pp-header-status {
|
|
186
|
-
font-size:
|
|
187
|
-
opacity: 0.
|
|
230
|
+
font-size: 13px;
|
|
231
|
+
opacity: 0.9;
|
|
188
232
|
display: flex;
|
|
189
233
|
align-items: center;
|
|
190
|
-
gap:
|
|
234
|
+
gap: 5px;
|
|
235
|
+
font-weight: 400;
|
|
191
236
|
}
|
|
192
237
|
|
|
193
238
|
.pp-status-dot {
|
|
@@ -198,7 +243,8 @@ function styles(primaryColor, theme) {
|
|
|
198
243
|
}
|
|
199
244
|
|
|
200
245
|
.pp-status-dot.pp-online {
|
|
201
|
-
background: #
|
|
246
|
+
background: #25d366;
|
|
247
|
+
box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
|
|
202
248
|
}
|
|
203
249
|
|
|
204
250
|
.pp-close-btn {
|
|
@@ -206,13 +252,13 @@ function styles(primaryColor, theme) {
|
|
|
206
252
|
border: none;
|
|
207
253
|
color: white;
|
|
208
254
|
cursor: pointer;
|
|
209
|
-
padding:
|
|
210
|
-
border-radius:
|
|
211
|
-
opacity: 0.
|
|
212
|
-
transition: opacity 0.2s;
|
|
255
|
+
padding: 8px;
|
|
256
|
+
border-radius: 50%;
|
|
257
|
+
opacity: 0.9;
|
|
258
|
+
transition: opacity 0.2s, background 0.2s;
|
|
213
259
|
flex-shrink: 0;
|
|
214
|
-
width:
|
|
215
|
-
height:
|
|
260
|
+
width: 36px;
|
|
261
|
+
height: 36px;
|
|
216
262
|
display: flex;
|
|
217
263
|
align-items: center;
|
|
218
264
|
justify-content: center;
|
|
@@ -220,47 +266,59 @@ function styles(primaryColor, theme) {
|
|
|
220
266
|
|
|
221
267
|
.pp-close-btn:hover {
|
|
222
268
|
opacity: 1;
|
|
269
|
+
background: rgba(255, 255, 255, 0.1);
|
|
223
270
|
}
|
|
224
271
|
|
|
225
272
|
.pp-close-btn svg {
|
|
226
|
-
width:
|
|
227
|
-
height:
|
|
273
|
+
width: 18px;
|
|
274
|
+
height: 18px;
|
|
228
275
|
}
|
|
229
276
|
|
|
230
277
|
.pp-messages {
|
|
231
278
|
flex: 1;
|
|
232
279
|
overflow-y: auto;
|
|
233
|
-
padding:
|
|
280
|
+
padding: 16px 12px;
|
|
234
281
|
display: flex;
|
|
235
282
|
flex-direction: column;
|
|
236
|
-
gap:
|
|
283
|
+
gap: 2px;
|
|
237
284
|
overscroll-behavior: contain;
|
|
238
285
|
-webkit-overflow-scrolling: touch;
|
|
239
|
-
/* Ensure proper stacking context for positioned elements */
|
|
240
286
|
position: relative;
|
|
287
|
+
background: ${chatBgColor};
|
|
288
|
+
background-image: ${chatBgImage};
|
|
289
|
+
background-size: ${chatBgSize};
|
|
290
|
+
background-position: center;
|
|
241
291
|
}
|
|
242
292
|
|
|
243
293
|
.pp-welcome {
|
|
244
294
|
text-align: center;
|
|
245
|
-
color: ${
|
|
246
|
-
padding: 24px;
|
|
247
|
-
font-size:
|
|
295
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
296
|
+
padding: 32px 24px;
|
|
297
|
+
font-size: 14px;
|
|
298
|
+
line-height: 1.5;
|
|
299
|
+
background: ${isDark ? "rgba(17, 27, 33, 0.9)" : "rgba(255, 255, 255, 0.95)"};
|
|
300
|
+
margin: 12px;
|
|
301
|
+
border-radius: 8px;
|
|
302
|
+
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
|
|
248
303
|
}
|
|
249
304
|
|
|
250
305
|
.pp-date-separator {
|
|
251
306
|
display: flex;
|
|
252
307
|
align-items: center;
|
|
253
308
|
justify-content: center;
|
|
254
|
-
margin:
|
|
309
|
+
margin: 12px 0;
|
|
255
310
|
}
|
|
256
311
|
|
|
257
312
|
.pp-date-separator span {
|
|
258
|
-
background: ${
|
|
259
|
-
color: ${
|
|
260
|
-
font-size:
|
|
261
|
-
padding:
|
|
262
|
-
border-radius:
|
|
263
|
-
font-weight:
|
|
313
|
+
background: ${isDark ? "rgba(17, 27, 33, 0.9)" : "rgba(255, 255, 255, 0.95)"};
|
|
314
|
+
color: ${isDark ? "#8696a0" : "#54656f"};
|
|
315
|
+
font-size: 12px;
|
|
316
|
+
padding: 6px 12px;
|
|
317
|
+
border-radius: 8px;
|
|
318
|
+
font-weight: 400;
|
|
319
|
+
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
|
|
320
|
+
text-transform: uppercase;
|
|
321
|
+
letter-spacing: 0.3px;
|
|
264
322
|
}
|
|
265
323
|
|
|
266
324
|
/* Swipe container for mobile actions */
|
|
@@ -282,25 +340,32 @@ function styles(primaryColor, theme) {
|
|
|
282
340
|
|
|
283
341
|
.pp-swipe-actions {
|
|
284
342
|
position: absolute;
|
|
285
|
-
right: 0;
|
|
286
343
|
top: 0;
|
|
287
344
|
bottom: 0;
|
|
288
|
-
display:
|
|
345
|
+
display: none; /* Hidden by default - only show on mobile with touch */
|
|
289
346
|
align-items: center;
|
|
290
347
|
gap: 4px;
|
|
291
|
-
|
|
348
|
+
opacity: 0;
|
|
349
|
+
pointer-events: none;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Only show swipe actions on touch devices */
|
|
353
|
+
@media (hover: none) and (pointer: coarse) {
|
|
354
|
+
.pp-swipe-actions {
|
|
355
|
+
display: flex;
|
|
356
|
+
}
|
|
292
357
|
}
|
|
293
358
|
|
|
294
359
|
.pp-swipe-left .pp-swipe-actions {
|
|
295
|
-
right:
|
|
360
|
+
right: -80px; /* Hidden off-screen to the right */
|
|
296
361
|
left: auto;
|
|
362
|
+
padding-right: 8px;
|
|
297
363
|
}
|
|
298
364
|
|
|
299
365
|
.pp-swipe-right .pp-swipe-actions {
|
|
300
|
-
left:
|
|
366
|
+
left: -80px; /* Hidden off-screen to the left */
|
|
301
367
|
right: auto;
|
|
302
368
|
padding-left: 8px;
|
|
303
|
-
padding-right: 0;
|
|
304
369
|
}
|
|
305
370
|
|
|
306
371
|
.pp-swipe-action {
|
|
@@ -333,122 +398,67 @@ function styles(primaryColor, theme) {
|
|
|
333
398
|
}
|
|
334
399
|
|
|
335
400
|
.pp-message {
|
|
336
|
-
max-width:
|
|
337
|
-
padding: 6px
|
|
338
|
-
border-radius:
|
|
401
|
+
max-width: 80%;
|
|
402
|
+
padding: 6px 8px 6px 9px;
|
|
403
|
+
border-radius: 8px;
|
|
339
404
|
word-wrap: break-word;
|
|
405
|
+
overflow-wrap: break-word;
|
|
340
406
|
position: relative;
|
|
341
407
|
user-select: text;
|
|
342
408
|
-webkit-user-select: text;
|
|
343
|
-
font-size:
|
|
344
|
-
line-height: 1.
|
|
345
|
-
display:
|
|
346
|
-
flex-direction: column;
|
|
409
|
+
font-size: 14.2px;
|
|
410
|
+
line-height: 1.4;
|
|
411
|
+
display: block; /* Block for proper float behavior */
|
|
347
412
|
will-change: transform;
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
/* Hover actions container - positioned above message (Slack style) */
|
|
351
|
-
.pp-message-actions {
|
|
352
|
-
position: absolute;
|
|
353
|
-
top: -32px;
|
|
354
|
-
display: flex;
|
|
355
|
-
gap: 2px;
|
|
356
|
-
background: ${colors.bg};
|
|
357
|
-
border: 1px solid ${colors.border};
|
|
358
|
-
border-radius: 6px;
|
|
359
|
-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
360
|
-
padding: 2px;
|
|
361
|
-
opacity: 0;
|
|
362
|
-
animation: pp-actions-fade-in 0.12s ease forwards;
|
|
363
|
-
z-index: 10;
|
|
364
|
-
/* Reset color inheritance from message */
|
|
365
|
-
color: ${colors.textSecondary};
|
|
366
|
-
/* Ensure actions don't interfere with layout */
|
|
367
|
-
pointer-events: auto;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
@keyframes pp-actions-fade-in {
|
|
371
|
-
from { opacity: 0; transform: translateY(4px); }
|
|
372
|
-
to { opacity: 1; transform: translateY(0); }
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
/* Visitor messages: actions aligned right */
|
|
376
|
-
.pp-actions-left {
|
|
377
|
-
right: 0;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
/* Operator messages: actions aligned left */
|
|
381
|
-
.pp-actions-right {
|
|
382
|
-
left: 0;
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
.pp-message-actions .pp-action-btn {
|
|
386
|
-
width: 24px;
|
|
387
|
-
height: 24px;
|
|
388
|
-
border: none;
|
|
389
|
-
background: transparent;
|
|
390
|
-
border-radius: 4px;
|
|
391
|
-
cursor: pointer;
|
|
392
|
-
display: flex;
|
|
393
|
-
align-items: center;
|
|
394
|
-
justify-content: center;
|
|
395
|
-
color: ${colors.textSecondary} !important;
|
|
396
|
-
transition: background 0.1s, color 0.1s;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.pp-message-actions .pp-action-btn:hover {
|
|
400
|
-
background: ${colors.bgSecondary};
|
|
401
|
-
color: ${colors.text} !important;
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
.pp-message-actions .pp-action-btn svg {
|
|
405
|
-
width: 14px;
|
|
406
|
-
height: 14px;
|
|
407
|
-
stroke: ${colors.textSecondary};
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
.pp-message-actions .pp-action-btn:hover svg {
|
|
411
|
-
stroke: ${colors.text};
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
.pp-message-actions .pp-action-delete:hover {
|
|
415
|
-
background: #fef2f2;
|
|
416
|
-
}
|
|
417
|
-
|
|
418
|
-
.pp-message-actions .pp-action-delete:hover svg {
|
|
419
|
-
stroke: #ef4444;
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.pp-theme-dark .pp-message-actions .pp-action-delete:hover {
|
|
423
|
-
background: #7f1d1d;
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
.pp-theme-dark .pp-message-actions .pp-action-delete:hover svg {
|
|
427
|
-
stroke: #fca5a5;
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
/* Hide hover actions on mobile */
|
|
431
|
-
@media (hover: none) and (pointer: coarse) {
|
|
432
|
-
.pp-message-actions {
|
|
433
|
-
display: none;
|
|
434
|
-
}
|
|
413
|
+
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
|
|
435
414
|
}
|
|
436
415
|
|
|
437
416
|
.pp-message-visitor {
|
|
438
417
|
align-self: flex-end;
|
|
439
|
-
background: ${
|
|
440
|
-
color:
|
|
441
|
-
border-
|
|
442
|
-
|
|
418
|
+
background: ${isDark ? "#005c4b" : "#d9fdd3"};
|
|
419
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
420
|
+
border-top-right-radius: 8px;
|
|
421
|
+
border-top-left-radius: 8px;
|
|
422
|
+
border-bottom-left-radius: 8px;
|
|
423
|
+
border-bottom-right-radius: 0;
|
|
424
|
+
margin-left: 48px;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* WhatsApp-style tail for visitor messages */
|
|
428
|
+
.pp-message-visitor::after {
|
|
429
|
+
content: '';
|
|
430
|
+
position: absolute;
|
|
431
|
+
right: -7px;
|
|
432
|
+
bottom: 0;
|
|
433
|
+
width: 8px;
|
|
434
|
+
height: 13px;
|
|
435
|
+
background: ${isDark ? "#005c4b" : "#d9fdd3"};
|
|
436
|
+
clip-path: path('M 0 0 L 0 13 L 8 13 Q 2 10 0 0');
|
|
443
437
|
}
|
|
444
438
|
|
|
445
439
|
.pp-message-operator,
|
|
446
440
|
.pp-message-ai {
|
|
447
441
|
align-self: flex-start;
|
|
448
|
-
background: ${
|
|
449
|
-
color: ${
|
|
450
|
-
border-
|
|
451
|
-
|
|
442
|
+
background: ${isDark ? "#202c33" : "#ffffff"};
|
|
443
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
444
|
+
border-top-right-radius: 8px;
|
|
445
|
+
border-top-left-radius: 8px;
|
|
446
|
+
border-bottom-right-radius: 8px;
|
|
447
|
+
border-bottom-left-radius: 0;
|
|
448
|
+
margin-right: 48px;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
/* WhatsApp-style tail for operator messages */
|
|
452
|
+
.pp-message-operator::after,
|
|
453
|
+
.pp-message-ai::after {
|
|
454
|
+
content: '';
|
|
455
|
+
position: absolute;
|
|
456
|
+
left: -7px;
|
|
457
|
+
bottom: 0;
|
|
458
|
+
width: 8px;
|
|
459
|
+
height: 13px;
|
|
460
|
+
background: ${isDark ? "#202c33" : "#ffffff"};
|
|
461
|
+
clip-path: path('M 8 0 L 8 13 L 0 13 Q 6 10 8 0');
|
|
452
462
|
}
|
|
453
463
|
|
|
454
464
|
/* Add spacing between different senders */
|
|
@@ -460,27 +470,41 @@ function styles(primaryColor, theme) {
|
|
|
460
470
|
}
|
|
461
471
|
|
|
462
472
|
.pp-message-content {
|
|
463
|
-
display:
|
|
464
|
-
flex: 1;
|
|
473
|
+
display: inline;
|
|
465
474
|
}
|
|
466
475
|
|
|
476
|
+
/* WhatsApp-style inline timestamp - floats to the right */
|
|
467
477
|
.pp-message-time {
|
|
468
|
-
font-size:
|
|
469
|
-
|
|
470
|
-
display: flex;
|
|
478
|
+
font-size: 11px;
|
|
479
|
+
display: inline-flex;
|
|
471
480
|
align-items: center;
|
|
472
481
|
gap: 3px;
|
|
482
|
+
float: right;
|
|
483
|
+
margin: 3px 0 0 12px;
|
|
484
|
+
color: ${isDark ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.45)"};
|
|
485
|
+
white-space: nowrap;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.pp-message-visitor .pp-message-time {
|
|
489
|
+
color: ${isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.45)"};
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/* Timestamp for attachment-only messages */
|
|
493
|
+
.pp-attachment-time {
|
|
494
|
+
float: none;
|
|
495
|
+
display: flex;
|
|
473
496
|
justify-content: flex-end;
|
|
474
|
-
margin-top:
|
|
475
|
-
flex-shrink: 0;
|
|
497
|
+
margin-top: 4px;
|
|
476
498
|
}
|
|
477
499
|
|
|
478
500
|
.pp-ai-badge {
|
|
479
|
-
background: rgba(0, 0, 0, 0.
|
|
480
|
-
padding:
|
|
501
|
+
background: ${isDark ? "rgba(255,255,255,0.15)" : "rgba(0, 0, 0, 0.08)"};
|
|
502
|
+
padding: 2px 5px;
|
|
481
503
|
border-radius: 4px;
|
|
482
|
-
font-size:
|
|
504
|
+
font-size: 9px;
|
|
483
505
|
font-weight: 600;
|
|
506
|
+
text-transform: uppercase;
|
|
507
|
+
letter-spacing: 0.3px;
|
|
484
508
|
}
|
|
485
509
|
|
|
486
510
|
.pp-status {
|
|
@@ -496,11 +520,11 @@ function styles(primaryColor, theme) {
|
|
|
496
520
|
|
|
497
521
|
.pp-check,
|
|
498
522
|
.pp-check-double {
|
|
499
|
-
stroke: rgba(255, 255, 255, 0.
|
|
523
|
+
stroke: ${isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.35)"};
|
|
500
524
|
}
|
|
501
525
|
|
|
502
526
|
.pp-check-read {
|
|
503
|
-
stroke: #
|
|
527
|
+
stroke: #53bdeb;
|
|
504
528
|
}
|
|
505
529
|
|
|
506
530
|
.pp-status-sending .pp-check {
|
|
@@ -509,14 +533,15 @@ function styles(primaryColor, theme) {
|
|
|
509
533
|
|
|
510
534
|
.pp-typing {
|
|
511
535
|
display: flex;
|
|
512
|
-
gap:
|
|
513
|
-
padding:
|
|
536
|
+
gap: 4px;
|
|
537
|
+
padding: 12px 14px;
|
|
538
|
+
align-items: center;
|
|
514
539
|
}
|
|
515
540
|
|
|
516
541
|
.pp-typing span {
|
|
517
|
-
width:
|
|
518
|
-
height:
|
|
519
|
-
background: ${
|
|
542
|
+
width: 7px;
|
|
543
|
+
height: 7px;
|
|
544
|
+
background: ${isDark ? "#8696a0" : "#667781"};
|
|
520
545
|
border-radius: 50%;
|
|
521
546
|
animation: pp-bounce 1.4s infinite ease-in-out both;
|
|
522
547
|
}
|
|
@@ -531,57 +556,56 @@ function styles(primaryColor, theme) {
|
|
|
531
556
|
|
|
532
557
|
.pp-input-form {
|
|
533
558
|
display: flex;
|
|
534
|
-
padding: 10px
|
|
559
|
+
padding: 8px 10px;
|
|
535
560
|
gap: 8px;
|
|
536
|
-
|
|
561
|
+
background: ${resolvedFooterColor};
|
|
537
562
|
align-items: center;
|
|
538
563
|
}
|
|
539
564
|
|
|
540
565
|
.pp-input {
|
|
541
566
|
flex: 1;
|
|
542
567
|
min-width: 0;
|
|
543
|
-
height:
|
|
544
|
-
line-height:
|
|
545
|
-
padding: 0
|
|
546
|
-
border:
|
|
547
|
-
border-radius:
|
|
548
|
-
background: ${
|
|
549
|
-
color: ${
|
|
550
|
-
font-size:
|
|
568
|
+
height: 42px;
|
|
569
|
+
line-height: 42px;
|
|
570
|
+
padding: 0 14px;
|
|
571
|
+
border: none;
|
|
572
|
+
border-radius: 8px;
|
|
573
|
+
background: ${isDark ? "#2a3942" : "#ffffff"};
|
|
574
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
575
|
+
font-size: 15px;
|
|
551
576
|
outline: none;
|
|
552
|
-
transition: border-color 0.2s;
|
|
553
577
|
box-sizing: border-box;
|
|
554
578
|
margin: 0;
|
|
555
579
|
}
|
|
556
580
|
|
|
557
581
|
.pp-input:focus {
|
|
558
|
-
|
|
582
|
+
outline: none;
|
|
559
583
|
}
|
|
560
584
|
|
|
561
585
|
.pp-input::placeholder {
|
|
562
|
-
color: ${
|
|
586
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
563
587
|
}
|
|
564
588
|
|
|
565
589
|
.pp-send-btn {
|
|
566
|
-
width:
|
|
567
|
-
height:
|
|
568
|
-
min-width:
|
|
590
|
+
width: 42px;
|
|
591
|
+
height: 42px;
|
|
592
|
+
min-width: 42px;
|
|
569
593
|
border-radius: 50%;
|
|
570
|
-
background:
|
|
594
|
+
background: #00a884;
|
|
571
595
|
color: white;
|
|
572
596
|
border: none;
|
|
573
597
|
cursor: pointer;
|
|
574
598
|
display: flex;
|
|
575
599
|
align-items: center;
|
|
576
600
|
justify-content: center;
|
|
577
|
-
transition:
|
|
601
|
+
transition: background 0.2s, transform 0.1s;
|
|
578
602
|
flex-shrink: 0;
|
|
579
603
|
margin: 0;
|
|
580
604
|
padding: 0;
|
|
581
605
|
}
|
|
582
606
|
|
|
583
607
|
.pp-send-btn:not(:disabled):hover {
|
|
584
|
-
|
|
608
|
+
background: #008f72;
|
|
585
609
|
}
|
|
586
610
|
|
|
587
611
|
.pp-send-btn:not(:disabled):active {
|
|
@@ -589,27 +613,27 @@ function styles(primaryColor, theme) {
|
|
|
589
613
|
}
|
|
590
614
|
|
|
591
615
|
.pp-send-btn:disabled {
|
|
592
|
-
|
|
616
|
+
background: ${isDark ? "#3b4a54" : "#b3b3b3"};
|
|
593
617
|
cursor: not-allowed;
|
|
594
618
|
}
|
|
595
619
|
|
|
596
620
|
.pp-send-btn svg {
|
|
597
|
-
width:
|
|
598
|
-
height:
|
|
621
|
+
width: 20px;
|
|
622
|
+
height: 20px;
|
|
599
623
|
}
|
|
600
624
|
|
|
601
625
|
.pp-footer {
|
|
602
626
|
text-align: center;
|
|
603
|
-
padding: 8px;
|
|
604
|
-
font-size:
|
|
605
|
-
color: ${
|
|
606
|
-
|
|
607
|
-
opacity: 0.7;
|
|
627
|
+
padding: 6px 8px;
|
|
628
|
+
font-size: 10px;
|
|
629
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
630
|
+
background: ${resolvedFooterColor};
|
|
608
631
|
}
|
|
609
632
|
|
|
610
633
|
.pp-footer a {
|
|
611
|
-
color: ${
|
|
634
|
+
color: ${isDark ? "#00a884" : "#008069"};
|
|
612
635
|
text-decoration: none;
|
|
636
|
+
font-weight: 500;
|
|
613
637
|
}
|
|
614
638
|
|
|
615
639
|
.pp-footer a:hover {
|
|
@@ -631,26 +655,26 @@ function styles(primaryColor, theme) {
|
|
|
631
655
|
}
|
|
632
656
|
|
|
633
657
|
.pp-attach-btn {
|
|
634
|
-
width:
|
|
635
|
-
height:
|
|
636
|
-
min-width:
|
|
658
|
+
width: 42px;
|
|
659
|
+
height: 42px;
|
|
660
|
+
min-width: 42px;
|
|
637
661
|
border-radius: 50%;
|
|
638
662
|
background: transparent;
|
|
639
|
-
color: ${
|
|
640
|
-
border:
|
|
663
|
+
color: ${isDark ? "#8696a0" : "#54656f"};
|
|
664
|
+
border: none;
|
|
641
665
|
cursor: pointer;
|
|
642
666
|
display: flex;
|
|
643
667
|
align-items: center;
|
|
644
668
|
justify-content: center;
|
|
645
669
|
margin: 0;
|
|
646
670
|
padding: 0;
|
|
647
|
-
transition: color 0.2s,
|
|
671
|
+
transition: color 0.2s, background 0.2s;
|
|
648
672
|
flex-shrink: 0;
|
|
649
673
|
}
|
|
650
674
|
|
|
651
675
|
.pp-attach-btn:hover:not(:disabled) {
|
|
652
|
-
color: ${
|
|
653
|
-
|
|
676
|
+
color: ${isDark ? "#aebac1" : "#3b4a54"};
|
|
677
|
+
background: ${isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"};
|
|
654
678
|
}
|
|
655
679
|
|
|
656
680
|
.pp-attach-btn:disabled {
|
|
@@ -659,28 +683,27 @@ function styles(primaryColor, theme) {
|
|
|
659
683
|
}
|
|
660
684
|
|
|
661
685
|
.pp-attach-btn svg {
|
|
662
|
-
width:
|
|
663
|
-
height:
|
|
686
|
+
width: 22px;
|
|
687
|
+
height: 22px;
|
|
664
688
|
}
|
|
665
689
|
|
|
666
690
|
.pp-attachments-preview {
|
|
667
691
|
display: flex;
|
|
668
692
|
gap: 8px;
|
|
669
|
-
padding:
|
|
670
|
-
border-top: 1px solid ${colors.border};
|
|
693
|
+
padding: 10px 12px;
|
|
671
694
|
overflow-x: auto;
|
|
672
|
-
background: ${
|
|
695
|
+
background: ${resolvedFooterColor};
|
|
673
696
|
}
|
|
674
697
|
|
|
675
698
|
.pp-attachment-preview {
|
|
676
699
|
position: relative;
|
|
677
|
-
width:
|
|
678
|
-
height:
|
|
679
|
-
border-radius:
|
|
700
|
+
width: 64px;
|
|
701
|
+
height: 64px;
|
|
702
|
+
border-radius: 10px;
|
|
680
703
|
overflow: hidden;
|
|
681
704
|
flex-shrink: 0;
|
|
682
|
-
background: ${
|
|
683
|
-
|
|
705
|
+
background: ${isDark ? "#2a3942" : "#ffffff"};
|
|
706
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
684
707
|
}
|
|
685
708
|
|
|
686
709
|
.pp-preview-img {
|
|
@@ -874,81 +897,86 @@ function styles(primaryColor, theme) {
|
|
|
874
897
|
.pp-drop-overlay {
|
|
875
898
|
position: absolute;
|
|
876
899
|
inset: 0;
|
|
877
|
-
background: ${isDark ? "rgba(
|
|
900
|
+
background: ${isDark ? "rgba(17, 27, 33, 0.95)" : "rgba(255,255,255,0.97)"};
|
|
878
901
|
display: flex;
|
|
879
902
|
flex-direction: column;
|
|
880
903
|
align-items: center;
|
|
881
904
|
justify-content: center;
|
|
882
|
-
gap:
|
|
905
|
+
gap: 16px;
|
|
883
906
|
z-index: 100;
|
|
884
|
-
border: 3px dashed
|
|
885
|
-
border-radius:
|
|
907
|
+
border: 3px dashed #00a884;
|
|
908
|
+
border-radius: 12px;
|
|
886
909
|
margin: 4px;
|
|
887
910
|
pointer-events: none;
|
|
888
911
|
}
|
|
889
912
|
|
|
890
913
|
.pp-drop-icon svg {
|
|
891
|
-
width:
|
|
892
|
-
height:
|
|
893
|
-
color:
|
|
914
|
+
width: 56px;
|
|
915
|
+
height: 56px;
|
|
916
|
+
color: #00a884;
|
|
894
917
|
}
|
|
895
918
|
|
|
896
919
|
.pp-drop-text {
|
|
897
|
-
font-size:
|
|
920
|
+
font-size: 17px;
|
|
898
921
|
font-weight: 500;
|
|
899
|
-
color: ${
|
|
922
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
900
923
|
}
|
|
901
924
|
|
|
902
925
|
/* Message Context Menu */
|
|
903
926
|
.pp-message-menu {
|
|
904
927
|
position: fixed;
|
|
905
|
-
background: ${
|
|
906
|
-
border:
|
|
907
|
-
border-radius:
|
|
908
|
-
box-shadow: 0
|
|
909
|
-
padding:
|
|
928
|
+
background: ${isDark ? "#233138" : "#ffffff"};
|
|
929
|
+
border: none;
|
|
930
|
+
border-radius: 12px;
|
|
931
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
|
|
932
|
+
padding: 6px;
|
|
910
933
|
z-index: 200;
|
|
911
|
-
min-width:
|
|
934
|
+
min-width: 140px;
|
|
912
935
|
}
|
|
913
936
|
|
|
914
937
|
.pp-message-menu button {
|
|
915
938
|
display: flex;
|
|
916
939
|
align-items: center;
|
|
917
|
-
gap:
|
|
940
|
+
gap: 10px;
|
|
918
941
|
width: 100%;
|
|
919
|
-
padding:
|
|
942
|
+
padding: 10px 14px;
|
|
920
943
|
border: none;
|
|
921
944
|
background: transparent;
|
|
922
|
-
color: ${
|
|
923
|
-
font-size:
|
|
945
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
946
|
+
font-size: 14px;
|
|
924
947
|
cursor: pointer;
|
|
925
|
-
border-radius:
|
|
948
|
+
border-radius: 8px;
|
|
926
949
|
text-align: left;
|
|
950
|
+
transition: background 0.15s;
|
|
927
951
|
}
|
|
928
952
|
|
|
929
953
|
.pp-message-menu button:hover {
|
|
930
|
-
background: ${isDark ? "rgba(255,255,255,0.
|
|
954
|
+
background: ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)"};
|
|
931
955
|
}
|
|
932
956
|
|
|
933
957
|
.pp-message-menu button svg {
|
|
934
|
-
width:
|
|
935
|
-
height:
|
|
958
|
+
width: 18px;
|
|
959
|
+
height: 18px;
|
|
936
960
|
}
|
|
937
961
|
|
|
938
962
|
.pp-menu-delete {
|
|
939
963
|
color: #ef4444 !important;
|
|
940
964
|
}
|
|
941
965
|
|
|
966
|
+
.pp-menu-delete:hover {
|
|
967
|
+
background: ${isDark ? "rgba(239,68,68,0.15)" : "rgba(239,68,68,0.08)"} !important;
|
|
968
|
+
}
|
|
969
|
+
|
|
942
970
|
/* Edit Modal */
|
|
943
971
|
.pp-edit-modal {
|
|
944
972
|
position: absolute;
|
|
945
973
|
bottom: 80px;
|
|
946
974
|
left: 12px;
|
|
947
975
|
right: 12px;
|
|
948
|
-
background: ${
|
|
949
|
-
border:
|
|
976
|
+
background: ${isDark ? "#233138" : "#ffffff"};
|
|
977
|
+
border: none;
|
|
950
978
|
border-radius: 12px;
|
|
951
|
-
box-shadow: 0
|
|
979
|
+
box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1);
|
|
952
980
|
z-index: 150;
|
|
953
981
|
overflow: hidden;
|
|
954
982
|
}
|
|
@@ -957,17 +985,24 @@ function styles(primaryColor, theme) {
|
|
|
957
985
|
display: flex;
|
|
958
986
|
justify-content: space-between;
|
|
959
987
|
align-items: center;
|
|
960
|
-
padding:
|
|
961
|
-
border-bottom: 1px solid ${
|
|
988
|
+
padding: 14px 16px;
|
|
989
|
+
border-bottom: 1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
|
|
962
990
|
font-weight: 500;
|
|
991
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
963
992
|
}
|
|
964
993
|
|
|
965
994
|
.pp-edit-header button {
|
|
966
995
|
background: transparent;
|
|
967
996
|
border: none;
|
|
968
|
-
color: ${
|
|
997
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
969
998
|
cursor: pointer;
|
|
970
|
-
padding:
|
|
999
|
+
padding: 6px;
|
|
1000
|
+
border-radius: 50%;
|
|
1001
|
+
transition: background 0.15s;
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
.pp-edit-header button:hover {
|
|
1005
|
+
background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
|
|
971
1006
|
}
|
|
972
1007
|
|
|
973
1008
|
.pp-edit-header button svg {
|
|
@@ -977,46 +1012,62 @@ function styles(primaryColor, theme) {
|
|
|
977
1012
|
|
|
978
1013
|
.pp-edit-input {
|
|
979
1014
|
width: 100%;
|
|
980
|
-
padding:
|
|
1015
|
+
padding: 14px 16px;
|
|
981
1016
|
border: none;
|
|
982
1017
|
background: transparent;
|
|
983
|
-
color: ${
|
|
984
|
-
font-size:
|
|
1018
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
1019
|
+
font-size: 15px;
|
|
985
1020
|
resize: none;
|
|
986
1021
|
min-height: 80px;
|
|
987
1022
|
outline: none;
|
|
1023
|
+
line-height: 1.5;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.pp-edit-input::placeholder {
|
|
1027
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
988
1028
|
}
|
|
989
1029
|
|
|
990
1030
|
.pp-edit-actions {
|
|
991
1031
|
display: flex;
|
|
992
1032
|
justify-content: flex-end;
|
|
993
|
-
gap:
|
|
1033
|
+
gap: 10px;
|
|
994
1034
|
padding: 12px 16px;
|
|
995
|
-
border-top: 1px solid ${
|
|
1035
|
+
border-top: 1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
|
|
996
1036
|
}
|
|
997
1037
|
|
|
998
1038
|
.pp-edit-cancel {
|
|
999
|
-
padding:
|
|
1000
|
-
border:
|
|
1001
|
-
border-radius:
|
|
1002
|
-
background:
|
|
1003
|
-
color: ${
|
|
1004
|
-
font-size:
|
|
1039
|
+
padding: 10px 20px;
|
|
1040
|
+
border: none;
|
|
1041
|
+
border-radius: 8px;
|
|
1042
|
+
background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
|
|
1043
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
1044
|
+
font-size: 14px;
|
|
1005
1045
|
cursor: pointer;
|
|
1046
|
+
transition: background 0.15s;
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
.pp-edit-cancel:hover {
|
|
1050
|
+
background: ${isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.08)"};
|
|
1006
1051
|
}
|
|
1007
1052
|
|
|
1008
1053
|
.pp-edit-save {
|
|
1009
|
-
padding:
|
|
1054
|
+
padding: 10px 20px;
|
|
1010
1055
|
border: none;
|
|
1011
|
-
border-radius:
|
|
1012
|
-
background:
|
|
1056
|
+
border-radius: 8px;
|
|
1057
|
+
background: #00a884;
|
|
1013
1058
|
color: white;
|
|
1014
|
-
font-size:
|
|
1059
|
+
font-size: 14px;
|
|
1060
|
+
font-weight: 500;
|
|
1015
1061
|
cursor: pointer;
|
|
1062
|
+
transition: background 0.15s;
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.pp-edit-save:hover:not(:disabled) {
|
|
1066
|
+
background: #008f72;
|
|
1016
1067
|
}
|
|
1017
1068
|
|
|
1018
1069
|
.pp-edit-save:disabled {
|
|
1019
|
-
|
|
1070
|
+
background: ${isDark ? "#3b4a54" : "#b3b3b3"};
|
|
1020
1071
|
cursor: not-allowed;
|
|
1021
1072
|
}
|
|
1022
1073
|
|
|
@@ -1024,11 +1075,10 @@ function styles(primaryColor, theme) {
|
|
|
1024
1075
|
.pp-reply-preview {
|
|
1025
1076
|
display: flex;
|
|
1026
1077
|
align-items: center;
|
|
1027
|
-
gap:
|
|
1078
|
+
gap: 10px;
|
|
1028
1079
|
padding: 8px 12px;
|
|
1029
|
-
background: ${
|
|
1030
|
-
border-
|
|
1031
|
-
border-left: 3px solid ${primaryColor};
|
|
1080
|
+
background: ${resolvedFooterColor};
|
|
1081
|
+
border-left: 4px solid #00a884;
|
|
1032
1082
|
}
|
|
1033
1083
|
|
|
1034
1084
|
.pp-reply-preview-content {
|
|
@@ -1038,55 +1088,56 @@ function styles(primaryColor, theme) {
|
|
|
1038
1088
|
|
|
1039
1089
|
.pp-reply-label {
|
|
1040
1090
|
display: block;
|
|
1041
|
-
font-size:
|
|
1042
|
-
color:
|
|
1091
|
+
font-size: 12px;
|
|
1092
|
+
color: #00a884;
|
|
1043
1093
|
font-weight: 500;
|
|
1044
1094
|
margin-bottom: 2px;
|
|
1045
1095
|
}
|
|
1046
1096
|
|
|
1047
1097
|
.pp-reply-text {
|
|
1048
1098
|
display: block;
|
|
1049
|
-
font-size:
|
|
1050
|
-
color: ${
|
|
1099
|
+
font-size: 13px;
|
|
1100
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
1051
1101
|
white-space: nowrap;
|
|
1052
1102
|
overflow: hidden;
|
|
1053
1103
|
text-overflow: ellipsis;
|
|
1054
1104
|
}
|
|
1055
1105
|
|
|
1056
1106
|
.pp-reply-cancel {
|
|
1057
|
-
background:
|
|
1107
|
+
background: transparent;
|
|
1058
1108
|
border: none;
|
|
1059
1109
|
border-radius: 50%;
|
|
1060
|
-
color: ${
|
|
1110
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
1061
1111
|
cursor: pointer;
|
|
1062
1112
|
padding: 0;
|
|
1063
|
-
width:
|
|
1064
|
-
height:
|
|
1065
|
-
min-width:
|
|
1113
|
+
width: 28px;
|
|
1114
|
+
height: 28px;
|
|
1115
|
+
min-width: 28px;
|
|
1066
1116
|
display: flex;
|
|
1067
1117
|
align-items: center;
|
|
1068
1118
|
justify-content: center;
|
|
1069
1119
|
flex-shrink: 0;
|
|
1070
|
-
transition: background 0.15s;
|
|
1120
|
+
transition: background 0.15s, color 0.15s;
|
|
1071
1121
|
}
|
|
1072
1122
|
|
|
1073
1123
|
.pp-reply-cancel:hover {
|
|
1074
|
-
background: ${isDark ? "rgba(255,255,255,0.
|
|
1124
|
+
background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
|
|
1125
|
+
color: ${isDark ? "#aebac1" : "#3b4a54"};
|
|
1075
1126
|
}
|
|
1076
1127
|
|
|
1077
1128
|
.pp-reply-cancel svg {
|
|
1078
|
-
width:
|
|
1079
|
-
height:
|
|
1129
|
+
width: 16px;
|
|
1130
|
+
height: 16px;
|
|
1080
1131
|
}
|
|
1081
1132
|
|
|
1082
1133
|
/* Reply Quote in Message */
|
|
1083
1134
|
.pp-reply-quote {
|
|
1084
|
-
background: ${isDark ? "rgba(
|
|
1085
|
-
border-left:
|
|
1086
|
-
padding:
|
|
1087
|
-
margin-bottom:
|
|
1088
|
-
border-radius: 0
|
|
1089
|
-
font-size:
|
|
1135
|
+
background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)"};
|
|
1136
|
+
border-left: 3px solid #00a884;
|
|
1137
|
+
padding: 6px 10px;
|
|
1138
|
+
margin-bottom: 4px;
|
|
1139
|
+
border-radius: 0 6px 6px 0;
|
|
1140
|
+
font-size: 13px;
|
|
1090
1141
|
position: relative;
|
|
1091
1142
|
z-index: 1;
|
|
1092
1143
|
}
|
|
@@ -1094,13 +1145,14 @@ function styles(primaryColor, theme) {
|
|
|
1094
1145
|
.pp-reply-sender {
|
|
1095
1146
|
display: block;
|
|
1096
1147
|
font-weight: 500;
|
|
1097
|
-
color:
|
|
1148
|
+
color: #00a884;
|
|
1098
1149
|
margin-bottom: 2px;
|
|
1150
|
+
font-size: 12px;
|
|
1099
1151
|
}
|
|
1100
1152
|
|
|
1101
1153
|
.pp-reply-content {
|
|
1102
1154
|
display: block;
|
|
1103
|
-
color: ${
|
|
1155
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
1104
1156
|
white-space: nowrap;
|
|
1105
1157
|
overflow: hidden;
|
|
1106
1158
|
text-overflow: ellipsis;
|
|
@@ -1109,30 +1161,33 @@ function styles(primaryColor, theme) {
|
|
|
1109
1161
|
/* Clickable reply quote */
|
|
1110
1162
|
.pp-reply-quote-clickable {
|
|
1111
1163
|
cursor: pointer;
|
|
1112
|
-
transition: background 0.15s
|
|
1164
|
+
transition: background 0.15s;
|
|
1113
1165
|
}
|
|
1114
1166
|
|
|
1115
1167
|
.pp-reply-quote-clickable:hover {
|
|
1116
|
-
background: ${isDark ? "rgba(
|
|
1168
|
+
background: ${isDark ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.08)"};
|
|
1117
1169
|
}
|
|
1118
1170
|
|
|
1119
1171
|
.pp-reply-quote-clickable:active {
|
|
1120
|
-
transform: scale(0.
|
|
1172
|
+
transform: scale(0.99);
|
|
1121
1173
|
}
|
|
1122
1174
|
|
|
1123
1175
|
/* Reply quote in visitor message bubble needs higher contrast */
|
|
1124
1176
|
.pp-message-visitor .pp-reply-quote {
|
|
1125
|
-
background: rgba(
|
|
1126
|
-
border-left-color: rgba(255,
|
|
1177
|
+
background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.08)"};
|
|
1178
|
+
border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#00a884"};
|
|
1127
1179
|
}
|
|
1128
1180
|
|
|
1129
1181
|
.pp-message-visitor .pp-reply-quote-clickable:hover {
|
|
1130
|
-
background: rgba(
|
|
1182
|
+
background: ${isDark ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.12)"};
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
.pp-message-visitor .pp-reply-sender {
|
|
1186
|
+
color: ${isDark ? "rgba(255,255,255,0.9)" : "#00a884"};
|
|
1131
1187
|
}
|
|
1132
1188
|
|
|
1133
|
-
.pp-message-visitor .pp-reply-sender,
|
|
1134
1189
|
.pp-message-visitor .pp-reply-content {
|
|
1135
|
-
color: rgba(255,
|
|
1190
|
+
color: ${isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.6)"};
|
|
1136
1191
|
}
|
|
1137
1192
|
|
|
1138
1193
|
/* Message highlight animation (when scrolling to a message) */
|
|
@@ -1142,13 +1197,13 @@ function styles(primaryColor, theme) {
|
|
|
1142
1197
|
|
|
1143
1198
|
@keyframes pp-highlight-pulse {
|
|
1144
1199
|
0% {
|
|
1145
|
-
box-shadow: 0 0 0 0
|
|
1200
|
+
box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.5);
|
|
1146
1201
|
}
|
|
1147
1202
|
30% {
|
|
1148
|
-
box-shadow: 0 0 0 6px
|
|
1203
|
+
box-shadow: 0 0 0 6px rgba(0, 168, 132, 0.25);
|
|
1149
1204
|
}
|
|
1150
1205
|
100% {
|
|
1151
|
-
box-shadow: 0 0 0 0
|
|
1206
|
+
box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
|
|
1152
1207
|
}
|
|
1153
1208
|
}
|
|
1154
1209
|
|
|
@@ -1172,9 +1227,9 @@ function styles(primaryColor, theme) {
|
|
|
1172
1227
|
/* Edited Badge */
|
|
1173
1228
|
.pp-edited-badge {
|
|
1174
1229
|
font-size: 10px;
|
|
1175
|
-
color: ${colors.textSecondary};
|
|
1176
1230
|
margin-left: 4px;
|
|
1177
1231
|
font-style: italic;
|
|
1232
|
+
opacity: 0.7;
|
|
1178
1233
|
}
|
|
1179
1234
|
|
|
1180
1235
|
/* Pre-Chat Form */
|
|
@@ -1184,19 +1239,21 @@ function styles(primaryColor, theme) {
|
|
|
1184
1239
|
flex-direction: column;
|
|
1185
1240
|
padding: 24px 20px;
|
|
1186
1241
|
overflow-y: auto;
|
|
1242
|
+
background: ${isDark ? "#111b21" : "#ffffff"};
|
|
1187
1243
|
}
|
|
1188
1244
|
|
|
1189
1245
|
.pp-prechat-title {
|
|
1190
|
-
font-size:
|
|
1246
|
+
font-size: 20px;
|
|
1191
1247
|
font-weight: 600;
|
|
1192
1248
|
margin-bottom: 8px;
|
|
1193
|
-
color: ${
|
|
1249
|
+
color: ${isDark ? "#e9edef" : "#111b21"};
|
|
1194
1250
|
}
|
|
1195
1251
|
|
|
1196
1252
|
.pp-prechat-subtitle {
|
|
1197
|
-
font-size:
|
|
1198
|
-
color: ${
|
|
1253
|
+
font-size: 14px;
|
|
1254
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
1199
1255
|
margin-bottom: 24px;
|
|
1256
|
+
line-height: 1.5;
|
|
1200
1257
|
}
|
|
1201
1258
|
|
|
1202
1259
|
.pp-prechat-tabs {
|
|
@@ -1403,20 +1460,20 @@ function styles(primaryColor, theme) {
|
|
|
1403
1460
|
|
|
1404
1461
|
.pp-prechat-submit {
|
|
1405
1462
|
width: 100%;
|
|
1406
|
-
height:
|
|
1407
|
-
margin-top:
|
|
1463
|
+
height: 48px;
|
|
1464
|
+
margin-top: 12px;
|
|
1408
1465
|
border: none;
|
|
1409
1466
|
border-radius: 8px;
|
|
1410
|
-
background:
|
|
1467
|
+
background: #00a884;
|
|
1411
1468
|
color: white;
|
|
1412
|
-
font-size:
|
|
1469
|
+
font-size: 15px;
|
|
1413
1470
|
font-weight: 500;
|
|
1414
1471
|
cursor: pointer;
|
|
1415
|
-
transition:
|
|
1472
|
+
transition: background 0.2s, transform 0.1s;
|
|
1416
1473
|
}
|
|
1417
1474
|
|
|
1418
1475
|
.pp-prechat-submit:hover:not(:disabled) {
|
|
1419
|
-
|
|
1476
|
+
background: #008f72;
|
|
1420
1477
|
}
|
|
1421
1478
|
|
|
1422
1479
|
.pp-prechat-submit:active:not(:disabled) {
|
|
@@ -1424,24 +1481,24 @@ function styles(primaryColor, theme) {
|
|
|
1424
1481
|
}
|
|
1425
1482
|
|
|
1426
1483
|
.pp-prechat-submit:disabled {
|
|
1427
|
-
|
|
1484
|
+
background: ${isDark ? "#3b4a54" : "#b3b3b3"};
|
|
1428
1485
|
cursor: not-allowed;
|
|
1429
1486
|
}
|
|
1430
1487
|
|
|
1431
1488
|
.pp-prechat-skip {
|
|
1432
1489
|
width: 100%;
|
|
1433
|
-
padding:
|
|
1490
|
+
padding: 14px;
|
|
1434
1491
|
margin-top: 8px;
|
|
1435
1492
|
border: none;
|
|
1436
1493
|
background: transparent;
|
|
1437
|
-
color: ${
|
|
1438
|
-
font-size:
|
|
1494
|
+
color: ${isDark ? "#8696a0" : "#667781"};
|
|
1495
|
+
font-size: 14px;
|
|
1439
1496
|
cursor: pointer;
|
|
1440
1497
|
transition: color 0.2s;
|
|
1441
1498
|
}
|
|
1442
1499
|
|
|
1443
1500
|
.pp-prechat-skip:hover {
|
|
1444
|
-
color: ${
|
|
1501
|
+
color: ${isDark ? "#aebac1" : "#3b4a54"};
|
|
1445
1502
|
}
|
|
1446
1503
|
`;
|
|
1447
1504
|
}
|
|
@@ -1822,8 +1879,6 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
1822
1879
|
const [editContent, setEditContent] = useState2("");
|
|
1823
1880
|
const [messageMenu, setMessageMenu] = useState2(null);
|
|
1824
1881
|
const [isDragging, setIsDragging] = useState2(false);
|
|
1825
|
-
const [hoveredMessageId, setHoveredMessageId] = useState2(null);
|
|
1826
|
-
const [longPressTimer, setLongPressTimer] = useState2(null);
|
|
1827
1882
|
const [swipedMessageId, setSwipedMessageId] = useState2(null);
|
|
1828
1883
|
const [swipeOffset, setSwipeOffset] = useState2(0);
|
|
1829
1884
|
const touchStartRef = useRef2(null);
|
|
@@ -2190,20 +2245,28 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2190
2245
|
const theme = getTheme(config.theme ?? "auto");
|
|
2191
2246
|
const primaryColor = config.primaryColor ?? "#6366f1";
|
|
2192
2247
|
const actionIconColor = theme === "dark" ? "#9ca3af" : "#6b7280";
|
|
2248
|
+
const styleOptions = {
|
|
2249
|
+
primaryColor,
|
|
2250
|
+
theme,
|
|
2251
|
+
headerColor: config.headerColor,
|
|
2252
|
+
footerColor: config.footerColor,
|
|
2253
|
+
chatBackground: config.chatBackground,
|
|
2254
|
+
toggleColor: config.toggleColor
|
|
2255
|
+
};
|
|
2193
2256
|
const shouldShowPreChat = preChatForm && preChatForm.enabled && !preChatForm.completed && !preChatSkipped && // Before first message: show immediately
|
|
2194
2257
|
(preChatForm.timing === "before-first-message" && messages.length === 0 || preChatForm.timing === "after-first-message" && messages.some((m) => m.sender === "visitor"));
|
|
2195
2258
|
return /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
|
2196
|
-
/* @__PURE__ */ jsx2("style", { children: styles(
|
|
2197
|
-
/* @__PURE__ */ jsxs2(
|
|
2259
|
+
/* @__PURE__ */ jsx2("style", { children: styles(styleOptions) }),
|
|
2260
|
+
!isOpen && /* @__PURE__ */ jsxs2(
|
|
2198
2261
|
"button",
|
|
2199
2262
|
{
|
|
2200
2263
|
class: `pp-toggle pp-${position}`,
|
|
2201
2264
|
onClick: () => client2.toggleOpen(),
|
|
2202
|
-
"aria-label":
|
|
2265
|
+
"aria-label": "Open chat",
|
|
2203
2266
|
children: [
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2267
|
+
/* @__PURE__ */ jsx2(ChatIcon, {}),
|
|
2268
|
+
unreadCount > 0 && /* @__PURE__ */ jsx2("span", { class: "pp-unread-badge", children: unreadCount > 9 ? "9+" : unreadCount }),
|
|
2269
|
+
unreadCount === 0 && operatorOnline && /* @__PURE__ */ jsx2("span", { class: "pp-online-dot" })
|
|
2207
2270
|
]
|
|
2208
2271
|
}
|
|
2209
2272
|
),
|
|
@@ -2284,8 +2347,6 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2284
2347
|
}
|
|
2285
2348
|
}
|
|
2286
2349
|
}
|
|
2287
|
-
const isHovered = hoveredMessageId === msg.id;
|
|
2288
|
-
const showActions = isHovered && !isDeleted;
|
|
2289
2350
|
const isSwiped = swipedMessageId === msg.id;
|
|
2290
2351
|
const msgSwipeOffset = isSwiped ? swipeOffset : 0;
|
|
2291
2352
|
return /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
|
@@ -2335,44 +2396,11 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2335
2396
|
class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
|
|
2336
2397
|
style: { transform: `translateX(${msgSwipeOffset}px)`, transition: touchStartRef.current ? "none" : "transform 0.2s ease-out" },
|
|
2337
2398
|
onContextMenu: (e) => handleMessageContextMenu(e, msg),
|
|
2338
|
-
onMouseEnter: () => setHoveredMessageId(msg.id),
|
|
2339
|
-
onMouseLeave: () => setHoveredMessageId(null),
|
|
2340
2399
|
onTouchStart: (e) => handleTouchStart(e, msg),
|
|
2341
2400
|
onTouchMove: (e) => handleTouchMove(e, msg),
|
|
2342
2401
|
onTouchEnd: () => handleTouchEnd(msg),
|
|
2343
2402
|
onTouchCancel: () => handleTouchEnd(msg),
|
|
2344
2403
|
children: [
|
|
2345
|
-
showActions && /* @__PURE__ */ jsxs2("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
|
|
2346
|
-
/* @__PURE__ */ jsx2(
|
|
2347
|
-
"button",
|
|
2348
|
-
{
|
|
2349
|
-
class: "pp-action-btn",
|
|
2350
|
-
onClick: () => handleReply(msg),
|
|
2351
|
-
title: "Reply",
|
|
2352
|
-
children: /* @__PURE__ */ jsx2(ReplyIcon, { color: actionIconColor })
|
|
2353
|
-
}
|
|
2354
|
-
),
|
|
2355
|
-
msg.sender === "visitor" && /* @__PURE__ */ jsxs2(Fragment3, { children: [
|
|
2356
|
-
/* @__PURE__ */ jsx2(
|
|
2357
|
-
"button",
|
|
2358
|
-
{
|
|
2359
|
-
class: "pp-action-btn",
|
|
2360
|
-
onClick: () => handleStartEdit(msg),
|
|
2361
|
-
title: "Edit",
|
|
2362
|
-
children: /* @__PURE__ */ jsx2(EditIcon, { color: actionIconColor })
|
|
2363
|
-
}
|
|
2364
|
-
),
|
|
2365
|
-
/* @__PURE__ */ jsx2(
|
|
2366
|
-
"button",
|
|
2367
|
-
{
|
|
2368
|
-
class: "pp-action-btn pp-action-delete",
|
|
2369
|
-
onClick: () => handleDelete(msg),
|
|
2370
|
-
title: "Delete",
|
|
2371
|
-
children: /* @__PURE__ */ jsx2(DeleteIcon, { color: actionIconColor })
|
|
2372
|
-
}
|
|
2373
|
-
)
|
|
2374
|
-
] })
|
|
2375
|
-
] }),
|
|
2376
2404
|
replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ jsxs2(
|
|
2377
2405
|
"div",
|
|
2378
2406
|
{
|
|
@@ -2397,14 +2425,24 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2397
2425
|
/* @__PURE__ */ jsx2("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
|
|
2398
2426
|
" Message deleted"
|
|
2399
2427
|
] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
|
|
2400
|
-
msg.content && /* @__PURE__ */
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2428
|
+
msg.content && /* @__PURE__ */ jsxs2("div", { class: "pp-message-content", children: [
|
|
2429
|
+
msg.content,
|
|
2430
|
+
/* @__PURE__ */ jsxs2("span", { class: "pp-message-time", children: [
|
|
2431
|
+
formatTime(msg.timestamp),
|
|
2432
|
+
isEdited && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),
|
|
2433
|
+
msg.sender === "ai" && /* @__PURE__ */ jsx2("span", { class: "pp-ai-badge", children: "AI" }),
|
|
2434
|
+
msg.sender === "visitor" && /* @__PURE__ */ jsx2("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx2(StatusIcon, { status: msg.status }) })
|
|
2435
|
+
] })
|
|
2436
|
+
] }),
|
|
2437
|
+
msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsxs2("div", { class: "pp-message-attachments", children: [
|
|
2438
|
+
msg.attachments.map((att) => /* @__PURE__ */ jsx2(AttachmentDisplay, { attachment: att }, att.id)),
|
|
2439
|
+
!msg.content && /* @__PURE__ */ jsxs2("span", { class: "pp-message-time pp-attachment-time", children: [
|
|
2440
|
+
formatTime(msg.timestamp),
|
|
2441
|
+
isEdited && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),
|
|
2442
|
+
msg.sender === "ai" && /* @__PURE__ */ jsx2("span", { class: "pp-ai-badge", children: "AI" }),
|
|
2443
|
+
msg.sender === "visitor" && /* @__PURE__ */ jsx2("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx2(StatusIcon, { status: msg.status }) })
|
|
2444
|
+
] })
|
|
2445
|
+
] })
|
|
2408
2446
|
] })
|
|
2409
2447
|
]
|
|
2410
2448
|
}
|
|
@@ -2758,6 +2796,18 @@ var PocketPingClient = class {
|
|
|
2758
2796
|
if (response.primaryColor) {
|
|
2759
2797
|
this.config.primaryColor = response.primaryColor;
|
|
2760
2798
|
}
|
|
2799
|
+
if (response.headerColor) {
|
|
2800
|
+
this.config.headerColor = response.headerColor;
|
|
2801
|
+
}
|
|
2802
|
+
if (response.footerColor) {
|
|
2803
|
+
this.config.footerColor = response.footerColor;
|
|
2804
|
+
}
|
|
2805
|
+
if (response.chatBackground) {
|
|
2806
|
+
this.config.chatBackground = response.chatBackground;
|
|
2807
|
+
}
|
|
2808
|
+
if (response.toggleColor) {
|
|
2809
|
+
this.config.toggleColor = response.toggleColor;
|
|
2810
|
+
}
|
|
2761
2811
|
if (response.welcomeMessage) {
|
|
2762
2812
|
this.config.welcomeMessage = response.welcomeMessage;
|
|
2763
2813
|
}
|
|
@@ -2765,6 +2815,10 @@ var PocketPingClient = class {
|
|
|
2765
2815
|
operatorName: this.config.operatorName,
|
|
2766
2816
|
operatorAvatar: this.config.operatorAvatar,
|
|
2767
2817
|
primaryColor: this.config.primaryColor,
|
|
2818
|
+
headerColor: this.config.headerColor,
|
|
2819
|
+
footerColor: this.config.footerColor,
|
|
2820
|
+
chatBackground: this.config.chatBackground,
|
|
2821
|
+
toggleColor: this.config.toggleColor,
|
|
2768
2822
|
welcomeMessage: this.config.welcomeMessage
|
|
2769
2823
|
});
|
|
2770
2824
|
this.storeSessionId(response.sessionId);
|
|
@@ -3270,6 +3324,7 @@ var PocketPingClient = class {
|
|
|
3270
3324
|
if (handlers) {
|
|
3271
3325
|
handlers.forEach((handler) => handler(event.data, event));
|
|
3272
3326
|
}
|
|
3327
|
+
this.config.onEvent?.(event);
|
|
3273
3328
|
this.emit("event", event);
|
|
3274
3329
|
this.emit(`event:${event.name}`, event);
|
|
3275
3330
|
}
|