tchao 0.1.2 → 0.1.3
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 +43 -33
- package/dist/npm.d.mts +13 -73
- package/dist/npm.d.ts +13 -73
- package/dist/npm.js +1 -1440
- package/dist/npm.js.map +1 -1
- package/dist/npm.mjs +1 -1440
- package/dist/npm.mjs.map +1 -1
- package/package.json +1 -13
package/dist/npm.js
CHANGED
|
@@ -1,1441 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
:host {
|
|
3
|
-
all: initial;
|
|
4
|
-
display: block;
|
|
5
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
6
|
-
font-size: 14px;
|
|
7
|
-
line-height: 1.5;
|
|
8
|
-
color: ${o.text};
|
|
9
|
-
-webkit-text-size-adjust: 100%;
|
|
10
|
-
-webkit-font-smoothing: antialiased;
|
|
11
|
-
-moz-osx-font-smoothing: grayscale;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
*, *::before, *::after {
|
|
15
|
-
box-sizing: border-box;
|
|
16
|
-
margin: 0;
|
|
17
|
-
padding: 0;
|
|
18
|
-
font-family: inherit;
|
|
19
|
-
font-size: inherit;
|
|
20
|
-
line-height: inherit;
|
|
21
|
-
color: inherit;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.tchao-container {
|
|
25
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
26
|
-
font-size: 14px;
|
|
27
|
-
line-height: 1.5;
|
|
28
|
-
color: ${o.text};
|
|
29
|
-
position: fixed;
|
|
30
|
-
bottom: 20px;
|
|
31
|
-
${i?"right: 20px;":"left: 20px;"}
|
|
32
|
-
z-index: 2147483647;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.tchao-bubble {
|
|
36
|
-
position: relative;
|
|
37
|
-
width: 56px;
|
|
38
|
-
height: 56px;
|
|
39
|
-
border-radius: 50%;
|
|
40
|
-
background: ${t};
|
|
41
|
-
border: none;
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
display: flex;
|
|
44
|
-
align-items: center;
|
|
45
|
-
justify-content: center;
|
|
46
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
47
|
-
transition: transform 0.2s, box-shadow 0.2s;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.tchao-bubble:hover {
|
|
51
|
-
transform: scale(1.05);
|
|
52
|
-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.tchao-bubble svg {
|
|
56
|
-
width: 28px;
|
|
57
|
-
height: 28px;
|
|
58
|
-
fill: white;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.tchao-unread-badge {
|
|
62
|
-
position: absolute;
|
|
63
|
-
top: -4px;
|
|
64
|
-
right: -4px;
|
|
65
|
-
min-width: 20px;
|
|
66
|
-
height: 20px;
|
|
67
|
-
padding: 0 6px;
|
|
68
|
-
background: #ef4444;
|
|
69
|
-
color: white;
|
|
70
|
-
font-size: 11px;
|
|
71
|
-
font-weight: 600;
|
|
72
|
-
border-radius: 10px;
|
|
73
|
-
display: flex;
|
|
74
|
-
align-items: center;
|
|
75
|
-
justify-content: center;
|
|
76
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.tchao-window {
|
|
80
|
-
position: absolute;
|
|
81
|
-
bottom: 70px;
|
|
82
|
-
${i?"right: 0;":"left: 0;"}
|
|
83
|
-
width: 380px;
|
|
84
|
-
height: 560px;
|
|
85
|
-
background: ${o.bg};
|
|
86
|
-
border-radius: 16px;
|
|
87
|
-
box-shadow: 0 8px 32px ${o.shadow};
|
|
88
|
-
display: flex;
|
|
89
|
-
flex-direction: column;
|
|
90
|
-
overflow: hidden;
|
|
91
|
-
animation: tchao-slide-in 0.2s ease-out;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.tchao-window.hidden {
|
|
95
|
-
display: none;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
@keyframes tchao-slide-in {
|
|
99
|
-
from {
|
|
100
|
-
opacity: 0;
|
|
101
|
-
transform: translateY(10px) scale(0.95);
|
|
102
|
-
}
|
|
103
|
-
to {
|
|
104
|
-
opacity: 1;
|
|
105
|
-
transform: translateY(0) scale(1);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.tchao-header {
|
|
110
|
-
padding: 16px 20px;
|
|
111
|
-
background: ${t};
|
|
112
|
-
color: white;
|
|
113
|
-
display: flex;
|
|
114
|
-
align-items: center;
|
|
115
|
-
gap: 12px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.tchao-header-avatar {
|
|
119
|
-
width: 40px;
|
|
120
|
-
height: 40px;
|
|
121
|
-
border-radius: 50%;
|
|
122
|
-
background: rgba(255, 255, 255, 0.2);
|
|
123
|
-
display: flex;
|
|
124
|
-
align-items: center;
|
|
125
|
-
justify-content: center;
|
|
126
|
-
overflow: hidden;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.tchao-header-avatar img {
|
|
130
|
-
width: 100%;
|
|
131
|
-
height: 100%;
|
|
132
|
-
object-fit: cover;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.tchao-header-info {
|
|
136
|
-
flex: 1;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.tchao-header-name-row {
|
|
140
|
-
display: flex;
|
|
141
|
-
align-items: center;
|
|
142
|
-
gap: 8px;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.tchao-header-name {
|
|
146
|
-
font-weight: 600;
|
|
147
|
-
font-size: 16px;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.tchao-header-tagline {
|
|
151
|
-
font-size: 12px;
|
|
152
|
-
opacity: 0.9;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.tchao-header-status {
|
|
156
|
-
display: flex;
|
|
157
|
-
align-items: center;
|
|
158
|
-
gap: 4px;
|
|
159
|
-
font-size: 11px;
|
|
160
|
-
font-weight: 500;
|
|
161
|
-
padding: 3px 8px;
|
|
162
|
-
border-radius: 9999px;
|
|
163
|
-
background: rgba(255, 255, 255, 0.15);
|
|
164
|
-
color: rgba(255, 255, 255, 0.9);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.tchao-header-status.online {
|
|
168
|
-
background: rgba(34, 197, 94, 0.2);
|
|
169
|
-
color: #4ade80;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.tchao-header-status.idle {
|
|
173
|
-
background: rgba(234, 179, 8, 0.2);
|
|
174
|
-
color: #facc15;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.tchao-header-status-dot {
|
|
178
|
-
width: 6px;
|
|
179
|
-
height: 6px;
|
|
180
|
-
border-radius: 50%;
|
|
181
|
-
background: rgba(255, 255, 255, 0.6);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.tchao-header-status.online .tchao-header-status-dot {
|
|
185
|
-
background: #22c55e;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.tchao-header-status.idle .tchao-header-status-dot {
|
|
189
|
-
background: #eab308;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.tchao-close {
|
|
193
|
-
background: none;
|
|
194
|
-
border: none;
|
|
195
|
-
cursor: pointer;
|
|
196
|
-
padding: 4px;
|
|
197
|
-
display: flex;
|
|
198
|
-
align-items: center;
|
|
199
|
-
justify-content: center;
|
|
200
|
-
opacity: 0.8;
|
|
201
|
-
transition: opacity 0.2s;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.tchao-close:hover {
|
|
205
|
-
opacity: 1;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.tchao-close svg {
|
|
209
|
-
width: 20px;
|
|
210
|
-
height: 20px;
|
|
211
|
-
fill: white;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.tchao-maximize {
|
|
215
|
-
background: none;
|
|
216
|
-
border: none;
|
|
217
|
-
cursor: pointer;
|
|
218
|
-
padding: 4px;
|
|
219
|
-
display: flex;
|
|
220
|
-
align-items: center;
|
|
221
|
-
justify-content: center;
|
|
222
|
-
opacity: 0.8;
|
|
223
|
-
transition: opacity 0.2s;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.tchao-maximize:hover {
|
|
227
|
-
opacity: 1;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.tchao-maximize svg {
|
|
231
|
-
width: 20px;
|
|
232
|
-
height: 20px;
|
|
233
|
-
fill: white;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.tchao-messages {
|
|
237
|
-
flex: 1;
|
|
238
|
-
overflow-y: auto;
|
|
239
|
-
overflow-x: hidden;
|
|
240
|
-
padding: 16px;
|
|
241
|
-
display: flex;
|
|
242
|
-
flex-direction: column;
|
|
243
|
-
gap: 12px;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.tchao-message {
|
|
247
|
-
max-width: 80%;
|
|
248
|
-
padding: 10px 14px;
|
|
249
|
-
border-radius: 16px;
|
|
250
|
-
word-wrap: break-word;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.tchao-message.visitor {
|
|
254
|
-
align-self: flex-end;
|
|
255
|
-
background: ${t};
|
|
256
|
-
color: white;
|
|
257
|
-
border-bottom-right-radius: 4px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.tchao-message.agent,
|
|
261
|
-
.tchao-message.ai {
|
|
262
|
-
align-self: flex-start;
|
|
263
|
-
background: ${o.bgTertiary};
|
|
264
|
-
color: ${o.text};
|
|
265
|
-
border-bottom-left-radius: 4px;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.tchao-message.ai {
|
|
269
|
-
background: ${a?"#064e3b":"#ecfdf5"};
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.tchao-message a {
|
|
273
|
-
color: inherit;
|
|
274
|
-
text-decoration: underline;
|
|
275
|
-
cursor: pointer;
|
|
276
|
-
transition: opacity 0.2s;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.tchao-message a:hover {
|
|
280
|
-
opacity: 0.7;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.tchao-message-time {
|
|
284
|
-
font-size: 10px;
|
|
285
|
-
opacity: 0.7;
|
|
286
|
-
margin-top: 4px;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.tchao-reactions {
|
|
290
|
-
display: flex;
|
|
291
|
-
flex-wrap: wrap;
|
|
292
|
-
gap: 4px;
|
|
293
|
-
margin-top: 4px;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.tchao-reactions {
|
|
297
|
-
position: absolute;
|
|
298
|
-
bottom: -10px;
|
|
299
|
-
display: flex;
|
|
300
|
-
align-items: center;
|
|
301
|
-
gap: 2px;
|
|
302
|
-
background: ${o.bg};
|
|
303
|
-
border-radius: 9999px;
|
|
304
|
-
padding: 2px 4px;
|
|
305
|
-
box-shadow: 0 4px 6px -1px ${o.shadow}, 0 2px 4px -2px ${o.shadow};
|
|
306
|
-
border: 1px solid ${o.border};
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
.tchao-message-group-visitor .tchao-reactions {
|
|
310
|
-
left: 4px;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
.tchao-message-group-agent .tchao-reactions {
|
|
314
|
-
right: 4px;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.tchao-reaction {
|
|
318
|
-
display: flex;
|
|
319
|
-
align-items: center;
|
|
320
|
-
justify-content: center;
|
|
321
|
-
width: 20px;
|
|
322
|
-
height: 20px;
|
|
323
|
-
border: none;
|
|
324
|
-
background: transparent;
|
|
325
|
-
cursor: pointer;
|
|
326
|
-
font-size: 12px;
|
|
327
|
-
border-radius: 50%;
|
|
328
|
-
transition: transform 0.15s;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.tchao-reaction:hover {
|
|
332
|
-
transform: scale(1.25);
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
.tchao-reaction-count {
|
|
336
|
-
font-size: 10px;
|
|
337
|
-
font-weight: 500;
|
|
338
|
-
color: ${o.textMuted};
|
|
339
|
-
padding-right: 2px;
|
|
340
|
-
padding-left: 1px;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.tchao-message-bubble-wrapper {
|
|
344
|
-
position: relative;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
.tchao-message-row {
|
|
348
|
-
position: relative;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.tchao-message-actions {
|
|
352
|
-
position: absolute;
|
|
353
|
-
top: 50%;
|
|
354
|
-
transform: translateY(-50%);
|
|
355
|
-
display: flex;
|
|
356
|
-
align-items: center;
|
|
357
|
-
gap: 2px;
|
|
358
|
-
opacity: 0;
|
|
359
|
-
transition: opacity 0.15s;
|
|
360
|
-
pointer-events: none;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
.tchao-message-row:hover .tchao-message-actions {
|
|
364
|
-
opacity: 1;
|
|
365
|
-
pointer-events: auto;
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.tchao-message-group-visitor .tchao-message-actions {
|
|
369
|
-
left: -52px;
|
|
370
|
-
flex-direction: row;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
.tchao-message-group-agent .tchao-message-actions {
|
|
374
|
-
right: -52px;
|
|
375
|
-
flex-direction: row-reverse;
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
.tchao-message-action-btn {
|
|
379
|
-
width: 24px;
|
|
380
|
-
height: 24px;
|
|
381
|
-
border-radius: 4px;
|
|
382
|
-
background: transparent;
|
|
383
|
-
border: none;
|
|
384
|
-
cursor: pointer;
|
|
385
|
-
display: flex;
|
|
386
|
-
align-items: center;
|
|
387
|
-
justify-content: center;
|
|
388
|
-
transition: background 0.15s;
|
|
389
|
-
position: relative;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
.tchao-message-action-btn:hover {
|
|
393
|
-
background: ${a?"rgba(255, 255, 255, 0.1)":"rgba(0, 0, 0, 0.05)"};
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
.tchao-message-action-btn svg {
|
|
397
|
-
width: 14px;
|
|
398
|
-
height: 14px;
|
|
399
|
-
fill: ${o.textMuted};
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
.tchao-reaction-picker {
|
|
403
|
-
position: absolute;
|
|
404
|
-
bottom: calc(100% + 4px);
|
|
405
|
-
left: 50%;
|
|
406
|
-
transform: translateX(-50%);
|
|
407
|
-
background: ${o.bg};
|
|
408
|
-
border-radius: 8px;
|
|
409
|
-
box-shadow: 0 4px 12px ${o.shadow};
|
|
410
|
-
padding: 4px;
|
|
411
|
-
display: flex;
|
|
412
|
-
gap: 2px;
|
|
413
|
-
z-index: 10;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.tchao-reaction-picker.hidden {
|
|
417
|
-
display: none;
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.tchao-reaction-picker-btn {
|
|
421
|
-
width: 28px;
|
|
422
|
-
height: 28px;
|
|
423
|
-
border: none;
|
|
424
|
-
background: transparent;
|
|
425
|
-
cursor: pointer;
|
|
426
|
-
font-size: 16px;
|
|
427
|
-
border-radius: 4px;
|
|
428
|
-
transition: background 0.15s;
|
|
429
|
-
display: flex;
|
|
430
|
-
align-items: center;
|
|
431
|
-
justify-content: center;
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
.tchao-reaction-picker-btn:hover {
|
|
435
|
-
background: ${o.bgTertiary};
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
.tchao-message-dropdown {
|
|
439
|
-
position: absolute;
|
|
440
|
-
top: calc(100% + 4px);
|
|
441
|
-
right: 0;
|
|
442
|
-
background: ${o.bg};
|
|
443
|
-
border-radius: 8px;
|
|
444
|
-
box-shadow: 0 4px 12px ${o.shadow};
|
|
445
|
-
min-width: 120px;
|
|
446
|
-
z-index: 10;
|
|
447
|
-
overflow: hidden;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
.tchao-message-dropdown.hidden {
|
|
451
|
-
display: none;
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.tchao-dropdown-item {
|
|
455
|
-
display: flex;
|
|
456
|
-
align-items: center;
|
|
457
|
-
gap: 8px;
|
|
458
|
-
width: 100%;
|
|
459
|
-
padding: 8px 12px;
|
|
460
|
-
border: none;
|
|
461
|
-
background: none;
|
|
462
|
-
cursor: pointer;
|
|
463
|
-
font-size: 13px;
|
|
464
|
-
color: ${o.text};
|
|
465
|
-
text-align: left;
|
|
466
|
-
transition: background 0.15s;
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
.tchao-dropdown-item:hover {
|
|
470
|
-
background: ${o.bgTertiary};
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.tchao-dropdown-item svg {
|
|
474
|
-
width: 14px;
|
|
475
|
-
height: 14px;
|
|
476
|
-
fill: ${o.textSecondary};
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
.tchao-toast {
|
|
480
|
-
position: fixed;
|
|
481
|
-
bottom: 100px;
|
|
482
|
-
left: 50%;
|
|
483
|
-
transform: translateX(-50%);
|
|
484
|
-
background: #1f2937;
|
|
485
|
-
color: white;
|
|
486
|
-
padding: 8px 14px;
|
|
487
|
-
border-radius: 6px;
|
|
488
|
-
font-size: 13px;
|
|
489
|
-
z-index: 2147483647;
|
|
490
|
-
animation: tchao-toast-in 0.2s ease-out;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
@keyframes tchao-toast-in {
|
|
494
|
-
from {
|
|
495
|
-
opacity: 0;
|
|
496
|
-
transform: translateX(-50%) translateY(10px);
|
|
497
|
-
}
|
|
498
|
-
to {
|
|
499
|
-
opacity: 1;
|
|
500
|
-
transform: translateX(-50%) translateY(0);
|
|
501
|
-
}
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
.tchao-message-content {
|
|
505
|
-
display: flex;
|
|
506
|
-
flex-direction: column;
|
|
507
|
-
gap: 8px;
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
.tchao-message-image {
|
|
511
|
-
max-width: 100%;
|
|
512
|
-
max-height: 200px;
|
|
513
|
-
border-radius: 12px;
|
|
514
|
-
cursor: pointer;
|
|
515
|
-
object-fit: cover;
|
|
516
|
-
transition: opacity 0.2s;
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
.tchao-message-image:hover {
|
|
520
|
-
opacity: 0.9;
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
.tchao-message-with-avatar {
|
|
524
|
-
display: flex;
|
|
525
|
-
gap: 8px;
|
|
526
|
-
align-items: flex-start;
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
.tchao-message-avatar {
|
|
530
|
-
width: 28px;
|
|
531
|
-
height: 28px;
|
|
532
|
-
border-radius: 50%;
|
|
533
|
-
background: rgba(0, 0, 0, 0.1);
|
|
534
|
-
display: flex;
|
|
535
|
-
align-items: center;
|
|
536
|
-
justify-content: center;
|
|
537
|
-
flex-shrink: 0;
|
|
538
|
-
overflow: hidden;
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
.tchao-message-avatar img {
|
|
542
|
-
width: 100%;
|
|
543
|
-
height: 100%;
|
|
544
|
-
object-fit: cover;
|
|
545
|
-
}
|
|
546
|
-
|
|
547
|
-
.tchao-message-avatar svg {
|
|
548
|
-
width: 16px;
|
|
549
|
-
height: 16px;
|
|
550
|
-
fill: #6b7280;
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
.tchao-message-group {
|
|
554
|
-
display: flex;
|
|
555
|
-
gap: 8px;
|
|
556
|
-
align-items: flex-end;
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
.tchao-message-group-agent {
|
|
560
|
-
flex-direction: row;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
.tchao-message-group-visitor {
|
|
564
|
-
flex-direction: row-reverse;
|
|
565
|
-
}
|
|
566
|
-
|
|
567
|
-
.tchao-bubbles-container {
|
|
568
|
-
display: flex;
|
|
569
|
-
flex-direction: column;
|
|
570
|
-
gap: 2px;
|
|
571
|
-
max-width: 80%;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
.tchao-message-group-agent .tchao-bubbles-container {
|
|
575
|
-
align-items: flex-start;
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
.tchao-message-group-visitor .tchao-bubbles-container {
|
|
579
|
-
align-items: flex-end;
|
|
580
|
-
}
|
|
581
|
-
|
|
582
|
-
.tchao-message-group .tchao-message {
|
|
583
|
-
max-width: 100%;
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
.tchao-message-group-agent .tchao-message {
|
|
587
|
-
border-bottom-left-radius: 4px;
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
.tchao-message-group-agent .tchao-message:first-child {
|
|
591
|
-
border-top-left-radius: 16px;
|
|
592
|
-
border-bottom-left-radius: 4px;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
.tchao-message-group-agent .tchao-message:last-of-type {
|
|
596
|
-
border-bottom-left-radius: 16px;
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
.tchao-message-group-visitor .tchao-message {
|
|
600
|
-
border-bottom-right-radius: 4px;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
.tchao-message-group-visitor .tchao-message:first-child {
|
|
604
|
-
border-top-right-radius: 16px;
|
|
605
|
-
border-bottom-right-radius: 4px;
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
.tchao-message-group-visitor .tchao-message:last-of-type {
|
|
609
|
-
border-bottom-right-radius: 16px;
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
.tchao-group-time {
|
|
613
|
-
font-size: 10px;
|
|
614
|
-
color: #9ca3af;
|
|
615
|
-
margin-top: 4px;
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
.tchao-message-group-visitor .tchao-group-time {
|
|
619
|
-
text-align: right;
|
|
620
|
-
}
|
|
621
|
-
|
|
622
|
-
.tchao-typing-indicator {
|
|
623
|
-
display: flex;
|
|
624
|
-
gap: 8px;
|
|
625
|
-
align-items: flex-start;
|
|
626
|
-
padding: 4px 0;
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
.tchao-typing-bubble {
|
|
630
|
-
display: flex;
|
|
631
|
-
align-items: center;
|
|
632
|
-
gap: 4px;
|
|
633
|
-
padding: 8px 12px;
|
|
634
|
-
background: ${o.bgTertiary};
|
|
635
|
-
border-radius: 12px;
|
|
636
|
-
color: ${o.textSecondary};
|
|
637
|
-
font-size: 13px;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
.tchao-typing-text {
|
|
641
|
-
font-style: italic;
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
.tchao-typing-dots {
|
|
645
|
-
display: flex;
|
|
646
|
-
gap: 2px;
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
.tchao-typing-dots span {
|
|
650
|
-
width: 4px;
|
|
651
|
-
height: 4px;
|
|
652
|
-
background: ${o.textMuted};
|
|
653
|
-
border-radius: 50%;
|
|
654
|
-
animation: tchao-typing-bounce 1.4s infinite ease-in-out;
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
.tchao-typing-dots span:nth-child(1) {
|
|
658
|
-
animation-delay: -0.32s;
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
.tchao-typing-dots span:nth-child(2) {
|
|
662
|
-
animation-delay: -0.16s;
|
|
663
|
-
}
|
|
664
|
-
|
|
665
|
-
@keyframes tchao-typing-bounce {
|
|
666
|
-
0%, 80%, 100% {
|
|
667
|
-
transform: scale(0.8);
|
|
668
|
-
opacity: 0.5;
|
|
669
|
-
}
|
|
670
|
-
40% {
|
|
671
|
-
transform: scale(1);
|
|
672
|
-
opacity: 1;
|
|
673
|
-
}
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
.tchao-welcome {
|
|
677
|
-
padding: 24px 20px;
|
|
678
|
-
color: ${o.textSecondary};
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
.tchao-welcome-card {
|
|
682
|
-
background: ${o.bgSecondary};
|
|
683
|
-
border-radius: 16px;
|
|
684
|
-
padding: 20px;
|
|
685
|
-
}
|
|
686
|
-
|
|
687
|
-
.tchao-welcome-quote {
|
|
688
|
-
font-size: 16px;
|
|
689
|
-
font-style: italic;
|
|
690
|
-
color: ${o.text};
|
|
691
|
-
margin-bottom: 16px;
|
|
692
|
-
}
|
|
693
|
-
|
|
694
|
-
.tchao-welcome-agent {
|
|
695
|
-
display: flex;
|
|
696
|
-
align-items: center;
|
|
697
|
-
gap: 12px;
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
.tchao-welcome-avatar {
|
|
701
|
-
width: 40px;
|
|
702
|
-
height: 40px;
|
|
703
|
-
border-radius: 50%;
|
|
704
|
-
background: ${o.border};
|
|
705
|
-
overflow: hidden;
|
|
706
|
-
flex-shrink: 0;
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
.tchao-welcome-avatar img {
|
|
710
|
-
width: 100%;
|
|
711
|
-
height: 100%;
|
|
712
|
-
object-fit: cover;
|
|
713
|
-
}
|
|
714
|
-
|
|
715
|
-
.tchao-welcome-info {
|
|
716
|
-
flex: 1;
|
|
717
|
-
}
|
|
718
|
-
|
|
719
|
-
.tchao-welcome-name {
|
|
720
|
-
font-size: 14px;
|
|
721
|
-
font-weight: 600;
|
|
722
|
-
color: ${o.text};
|
|
723
|
-
}
|
|
724
|
-
|
|
725
|
-
.tchao-welcome-name span {
|
|
726
|
-
font-weight: 400;
|
|
727
|
-
color: ${o.textSecondary};
|
|
728
|
-
}
|
|
729
|
-
|
|
730
|
-
.tchao-welcome-status {
|
|
731
|
-
display: flex;
|
|
732
|
-
align-items: center;
|
|
733
|
-
gap: 6px;
|
|
734
|
-
font-size: 13px;
|
|
735
|
-
color: #10b981;
|
|
736
|
-
}
|
|
737
|
-
|
|
738
|
-
.tchao-welcome-status.idle {
|
|
739
|
-
color: #eab308;
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
.tchao-welcome-status.away {
|
|
743
|
-
color: #9ca3af;
|
|
744
|
-
}
|
|
745
|
-
|
|
746
|
-
.tchao-welcome-status-dot {
|
|
747
|
-
width: 8px;
|
|
748
|
-
height: 8px;
|
|
749
|
-
border-radius: 50%;
|
|
750
|
-
background: #10b981;
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
.tchao-welcome-status.idle .tchao-welcome-status-dot {
|
|
754
|
-
background: #eab308;
|
|
755
|
-
}
|
|
756
|
-
|
|
757
|
-
.tchao-welcome-status.away .tchao-welcome-status-dot {
|
|
758
|
-
background: #9ca3af;
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
.tchao-input-area {
|
|
762
|
-
padding: 16px;
|
|
763
|
-
border-top: 1px solid ${o.border};
|
|
764
|
-
background: ${o.bg};
|
|
765
|
-
display: flex;
|
|
766
|
-
flex-direction: column;
|
|
767
|
-
gap: 8px;
|
|
768
|
-
}
|
|
769
|
-
|
|
770
|
-
.tchao-input-row {
|
|
771
|
-
display: flex;
|
|
772
|
-
gap: 8px;
|
|
773
|
-
align-items: flex-end;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
.tchao-image-btn {
|
|
777
|
-
width: 40px;
|
|
778
|
-
height: 40px;
|
|
779
|
-
border-radius: 50%;
|
|
780
|
-
background: ${o.bgTertiary};
|
|
781
|
-
border: none;
|
|
782
|
-
cursor: pointer;
|
|
783
|
-
display: flex;
|
|
784
|
-
align-items: center;
|
|
785
|
-
justify-content: center;
|
|
786
|
-
transition: background 0.2s;
|
|
787
|
-
flex-shrink: 0;
|
|
788
|
-
}
|
|
789
|
-
|
|
790
|
-
.tchao-image-btn:hover {
|
|
791
|
-
background: ${o.border};
|
|
792
|
-
}
|
|
793
|
-
|
|
794
|
-
.tchao-image-btn svg {
|
|
795
|
-
width: 20px;
|
|
796
|
-
height: 20px;
|
|
797
|
-
fill: ${o.textSecondary};
|
|
798
|
-
}
|
|
799
|
-
|
|
800
|
-
.tchao-mic-btn {
|
|
801
|
-
width: 40px;
|
|
802
|
-
height: 40px;
|
|
803
|
-
border-radius: 50%;
|
|
804
|
-
background: ${o.bgTertiary};
|
|
805
|
-
border: none;
|
|
806
|
-
cursor: pointer;
|
|
807
|
-
display: flex;
|
|
808
|
-
align-items: center;
|
|
809
|
-
justify-content: center;
|
|
810
|
-
transition: background 0.2s, transform 0.2s;
|
|
811
|
-
flex-shrink: 0;
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
.tchao-mic-btn:hover {
|
|
815
|
-
background: ${o.border};
|
|
816
|
-
}
|
|
817
|
-
|
|
818
|
-
.tchao-mic-btn svg {
|
|
819
|
-
width: 20px;
|
|
820
|
-
height: 20px;
|
|
821
|
-
fill: ${o.textSecondary};
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
.tchao-mic-btn.recording {
|
|
825
|
-
background: #ef4444;
|
|
826
|
-
animation: pulse-recording 1.5s ease-in-out infinite;
|
|
827
|
-
}
|
|
828
|
-
|
|
829
|
-
.tchao-mic-btn.recording svg {
|
|
830
|
-
fill: white;
|
|
831
|
-
}
|
|
832
|
-
|
|
833
|
-
@keyframes pulse-recording {
|
|
834
|
-
0%, 100% {
|
|
835
|
-
transform: scale(1);
|
|
836
|
-
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
|
|
837
|
-
}
|
|
838
|
-
50% {
|
|
839
|
-
transform: scale(1.05);
|
|
840
|
-
box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
|
|
841
|
-
}
|
|
842
|
-
}
|
|
843
|
-
|
|
844
|
-
.tchao-emoji-container {
|
|
845
|
-
position: relative;
|
|
846
|
-
}
|
|
847
|
-
|
|
848
|
-
.tchao-emoji-btn {
|
|
849
|
-
width: 40px;
|
|
850
|
-
height: 40px;
|
|
851
|
-
border-radius: 50%;
|
|
852
|
-
background: ${o.bgTertiary};
|
|
853
|
-
border: none;
|
|
854
|
-
cursor: pointer;
|
|
855
|
-
display: flex;
|
|
856
|
-
align-items: center;
|
|
857
|
-
justify-content: center;
|
|
858
|
-
transition: background 0.2s;
|
|
859
|
-
flex-shrink: 0;
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
.tchao-emoji-btn:hover {
|
|
863
|
-
background: ${o.border};
|
|
864
|
-
}
|
|
865
|
-
|
|
866
|
-
.tchao-emoji-btn svg {
|
|
867
|
-
width: 20px;
|
|
868
|
-
height: 20px;
|
|
869
|
-
fill: ${o.textSecondary};
|
|
870
|
-
}
|
|
871
|
-
|
|
872
|
-
.tchao-emoji-picker {
|
|
873
|
-
position: absolute;
|
|
874
|
-
bottom: 48px;
|
|
875
|
-
left: 0;
|
|
876
|
-
background: ${o.bg};
|
|
877
|
-
border-radius: 12px;
|
|
878
|
-
box-shadow: 0 4px 12px ${o.shadow};
|
|
879
|
-
padding: 8px;
|
|
880
|
-
display: flex;
|
|
881
|
-
gap: 4px;
|
|
882
|
-
z-index: 10;
|
|
883
|
-
}
|
|
884
|
-
|
|
885
|
-
.tchao-emoji-picker.hidden {
|
|
886
|
-
display: none;
|
|
887
|
-
}
|
|
888
|
-
|
|
889
|
-
.tchao-emoji-picker-btn {
|
|
890
|
-
width: 36px;
|
|
891
|
-
height: 36px;
|
|
892
|
-
border: none;
|
|
893
|
-
background: transparent;
|
|
894
|
-
cursor: pointer;
|
|
895
|
-
font-size: 20px;
|
|
896
|
-
border-radius: 8px;
|
|
897
|
-
transition: background 0.2s;
|
|
898
|
-
display: flex;
|
|
899
|
-
align-items: center;
|
|
900
|
-
justify-content: center;
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
.tchao-emoji-picker-btn:hover {
|
|
904
|
-
background: ${o.bgTertiary};
|
|
905
|
-
}
|
|
906
|
-
|
|
907
|
-
.tchao-image-preview {
|
|
908
|
-
display: flex;
|
|
909
|
-
gap: 8px;
|
|
910
|
-
padding: 8px;
|
|
911
|
-
background: ${o.bgSecondary};
|
|
912
|
-
border-radius: 12px;
|
|
913
|
-
}
|
|
914
|
-
|
|
915
|
-
.tchao-image-preview-item {
|
|
916
|
-
position: relative;
|
|
917
|
-
display: inline-block;
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
.tchao-image-preview-item img {
|
|
921
|
-
width: 60px;
|
|
922
|
-
height: 60px;
|
|
923
|
-
border-radius: 8px;
|
|
924
|
-
object-fit: cover;
|
|
925
|
-
}
|
|
926
|
-
|
|
927
|
-
.tchao-image-preview-remove {
|
|
928
|
-
position: absolute;
|
|
929
|
-
top: -6px;
|
|
930
|
-
right: -6px;
|
|
931
|
-
width: 20px;
|
|
932
|
-
height: 20px;
|
|
933
|
-
border-radius: 50%;
|
|
934
|
-
background: #ef4444;
|
|
935
|
-
border: none;
|
|
936
|
-
cursor: pointer;
|
|
937
|
-
display: flex;
|
|
938
|
-
align-items: center;
|
|
939
|
-
justify-content: center;
|
|
940
|
-
}
|
|
941
|
-
|
|
942
|
-
.tchao-image-preview-remove svg {
|
|
943
|
-
width: 12px;
|
|
944
|
-
height: 12px;
|
|
945
|
-
fill: white;
|
|
946
|
-
}
|
|
947
|
-
|
|
948
|
-
.tchao-drag-over {
|
|
949
|
-
position: relative;
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
.tchao-drag-over::after {
|
|
953
|
-
content: 'Drop image here';
|
|
954
|
-
position: absolute;
|
|
955
|
-
inset: 0;
|
|
956
|
-
background: rgba(99, 102, 241, 0.9);
|
|
957
|
-
color: white;
|
|
958
|
-
display: flex;
|
|
959
|
-
align-items: center;
|
|
960
|
-
justify-content: center;
|
|
961
|
-
font-size: 16px;
|
|
962
|
-
font-weight: 500;
|
|
963
|
-
z-index: 100;
|
|
964
|
-
border-radius: 16px;
|
|
965
|
-
pointer-events: none;
|
|
966
|
-
}
|
|
967
|
-
|
|
968
|
-
.tchao-drop-error {
|
|
969
|
-
background: #ef4444;
|
|
970
|
-
color: white;
|
|
971
|
-
padding: 8px 16px;
|
|
972
|
-
border-radius: 8px;
|
|
973
|
-
text-align: center;
|
|
974
|
-
margin: 8px;
|
|
975
|
-
font-size: 13px;
|
|
976
|
-
animation: tchao-fade-in 0.2s ease;
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
@keyframes tchao-fade-in {
|
|
980
|
-
from { opacity: 0; transform: translateY(-4px); }
|
|
981
|
-
to { opacity: 1; transform: translateY(0); }
|
|
982
|
-
}
|
|
983
|
-
|
|
984
|
-
.tchao-image-modal {
|
|
985
|
-
position: fixed;
|
|
986
|
-
top: 0;
|
|
987
|
-
left: 0;
|
|
988
|
-
right: 0;
|
|
989
|
-
bottom: 0;
|
|
990
|
-
background: rgba(0, 0, 0, 0.9);
|
|
991
|
-
display: flex;
|
|
992
|
-
align-items: center;
|
|
993
|
-
justify-content: center;
|
|
994
|
-
z-index: 2147483647;
|
|
995
|
-
padding: 20px;
|
|
996
|
-
}
|
|
997
|
-
|
|
998
|
-
.tchao-image-modal img {
|
|
999
|
-
max-width: 100%;
|
|
1000
|
-
max-height: 100%;
|
|
1001
|
-
object-fit: contain;
|
|
1002
|
-
border-radius: 8px;
|
|
1003
|
-
}
|
|
1004
|
-
|
|
1005
|
-
.tchao-image-modal-close {
|
|
1006
|
-
position: absolute;
|
|
1007
|
-
top: 20px;
|
|
1008
|
-
right: 20px;
|
|
1009
|
-
width: 40px;
|
|
1010
|
-
height: 40px;
|
|
1011
|
-
border-radius: 50%;
|
|
1012
|
-
background: rgba(255, 255, 255, 0.2);
|
|
1013
|
-
border: none;
|
|
1014
|
-
cursor: pointer;
|
|
1015
|
-
display: flex;
|
|
1016
|
-
align-items: center;
|
|
1017
|
-
justify-content: center;
|
|
1018
|
-
}
|
|
1019
|
-
|
|
1020
|
-
.tchao-image-modal-close svg {
|
|
1021
|
-
width: 24px;
|
|
1022
|
-
height: 24px;
|
|
1023
|
-
fill: white;
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
.tchao-input {
|
|
1027
|
-
flex: 1;
|
|
1028
|
-
border: 1px solid ${o.border};
|
|
1029
|
-
border-radius: 20px;
|
|
1030
|
-
padding: 10px 16px;
|
|
1031
|
-
font-size: 14px;
|
|
1032
|
-
resize: none;
|
|
1033
|
-
max-height: 100px;
|
|
1034
|
-
font-family: inherit;
|
|
1035
|
-
outline: none;
|
|
1036
|
-
transition: border-color 0.2s;
|
|
1037
|
-
overflow-y: auto;
|
|
1038
|
-
scrollbar-width: none;
|
|
1039
|
-
-ms-overflow-style: none;
|
|
1040
|
-
background: ${o.bg};
|
|
1041
|
-
color: ${o.text};
|
|
1042
|
-
}
|
|
1043
|
-
|
|
1044
|
-
.tchao-input::-webkit-scrollbar {
|
|
1045
|
-
display: none;
|
|
1046
|
-
}
|
|
1047
|
-
|
|
1048
|
-
.tchao-input:focus {
|
|
1049
|
-
border-color: ${t};
|
|
1050
|
-
}
|
|
1051
|
-
|
|
1052
|
-
.tchao-send {
|
|
1053
|
-
width: 40px;
|
|
1054
|
-
height: 40px;
|
|
1055
|
-
border-radius: 50%;
|
|
1056
|
-
background: ${t};
|
|
1057
|
-
border: none;
|
|
1058
|
-
cursor: pointer;
|
|
1059
|
-
display: flex;
|
|
1060
|
-
align-items: center;
|
|
1061
|
-
justify-content: center;
|
|
1062
|
-
transition: opacity 0.2s;
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
.tchao-send:disabled {
|
|
1066
|
-
opacity: 0.5;
|
|
1067
|
-
cursor: not-allowed;
|
|
1068
|
-
}
|
|
1069
|
-
|
|
1070
|
-
.tchao-send svg {
|
|
1071
|
-
width: 20px;
|
|
1072
|
-
height: 20px;
|
|
1073
|
-
fill: white;
|
|
1074
|
-
}
|
|
1075
|
-
|
|
1076
|
-
.tchao-powered {
|
|
1077
|
-
text-align: center;
|
|
1078
|
-
padding: 8px;
|
|
1079
|
-
font-size: 11px;
|
|
1080
|
-
color: ${o.textMuted};
|
|
1081
|
-
background: ${o.bgSecondary};
|
|
1082
|
-
}
|
|
1083
|
-
|
|
1084
|
-
.tchao-powered a {
|
|
1085
|
-
color: ${o.textSecondary};
|
|
1086
|
-
text-decoration: none;
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
|
-
.tchao-powered a:hover {
|
|
1090
|
-
text-decoration: underline;
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
.tchao-email-popup {
|
|
1094
|
-
background: ${o.bgSecondary};
|
|
1095
|
-
border-radius: 12px;
|
|
1096
|
-
padding: 8px;
|
|
1097
|
-
margin-bottom: 4px;
|
|
1098
|
-
position: relative;
|
|
1099
|
-
animation: tchao-slide-in 0.2s ease-out;
|
|
1100
|
-
}
|
|
1101
|
-
|
|
1102
|
-
.tchao-email-popup-text {
|
|
1103
|
-
font-size: 13px;
|
|
1104
|
-
color: ${o.text};
|
|
1105
|
-
margin-bottom: 4px;
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
.tchao-email-popup-row {
|
|
1109
|
-
display: flex;
|
|
1110
|
-
gap: 8px;
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
.tchao-email-popup-input {
|
|
1114
|
-
flex: 1;
|
|
1115
|
-
border: 1px solid ${o.border};
|
|
1116
|
-
border-radius: 8px;
|
|
1117
|
-
padding: 8px 12px;
|
|
1118
|
-
font-size: 13px;
|
|
1119
|
-
outline: none;
|
|
1120
|
-
transition: border-color 0.2s;
|
|
1121
|
-
background: ${o.bg};
|
|
1122
|
-
color: ${o.text};
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
|
-
.tchao-email-popup-input:focus {
|
|
1126
|
-
border-color: ${t};
|
|
1127
|
-
}
|
|
1128
|
-
|
|
1129
|
-
.tchao-email-popup-submit {
|
|
1130
|
-
background: ${t};
|
|
1131
|
-
color: white;
|
|
1132
|
-
border: none;
|
|
1133
|
-
border-radius: 8px;
|
|
1134
|
-
padding: 8px 16px;
|
|
1135
|
-
font-size: 13px;
|
|
1136
|
-
font-weight: 500;
|
|
1137
|
-
cursor: pointer;
|
|
1138
|
-
transition: opacity 0.2s;
|
|
1139
|
-
}
|
|
1140
|
-
|
|
1141
|
-
.tchao-email-popup-submit:hover {
|
|
1142
|
-
opacity: 0.9;
|
|
1143
|
-
}
|
|
1144
|
-
|
|
1145
|
-
.tchao-email-popup-submit:disabled {
|
|
1146
|
-
opacity: 0.5;
|
|
1147
|
-
cursor: not-allowed;
|
|
1148
|
-
}
|
|
1149
|
-
|
|
1150
|
-
.tchao-email-popup-close {
|
|
1151
|
-
position: absolute;
|
|
1152
|
-
top: 8px;
|
|
1153
|
-
right: 8px;
|
|
1154
|
-
background: none;
|
|
1155
|
-
border: none;
|
|
1156
|
-
cursor: pointer;
|
|
1157
|
-
padding: 4px;
|
|
1158
|
-
display: flex;
|
|
1159
|
-
align-items: center;
|
|
1160
|
-
justify-content: center;
|
|
1161
|
-
opacity: 0.5;
|
|
1162
|
-
transition: opacity 0.2s;
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
.tchao-email-popup-close:hover {
|
|
1166
|
-
opacity: 1;
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
|
-
.tchao-email-popup-close svg {
|
|
1170
|
-
width: 14px;
|
|
1171
|
-
height: 14px;
|
|
1172
|
-
fill: ${o.textSecondary};
|
|
1173
|
-
}
|
|
1174
|
-
|
|
1175
|
-
@media (max-width: 480px) {
|
|
1176
|
-
.tchao-window {
|
|
1177
|
-
position: fixed;
|
|
1178
|
-
top: 0;
|
|
1179
|
-
left: 0;
|
|
1180
|
-
right: 0;
|
|
1181
|
-
bottom: 0;
|
|
1182
|
-
width: 100%;
|
|
1183
|
-
height: 100%;
|
|
1184
|
-
border-radius: 0;
|
|
1185
|
-
}
|
|
1186
|
-
}
|
|
1187
|
-
|
|
1188
|
-
.tchao-window.maximized {
|
|
1189
|
-
position: fixed;
|
|
1190
|
-
top: 0;
|
|
1191
|
-
right: 0;
|
|
1192
|
-
bottom: 0;
|
|
1193
|
-
left: auto;
|
|
1194
|
-
width: 100%;
|
|
1195
|
-
max-width: 420px;
|
|
1196
|
-
height: 100%;
|
|
1197
|
-
border-radius: 0;
|
|
1198
|
-
animation: tchao-maximize-in 0.2s ease-out;
|
|
1199
|
-
}
|
|
1200
|
-
|
|
1201
|
-
@keyframes tchao-maximize-in {
|
|
1202
|
-
from {
|
|
1203
|
-
opacity: 0.9;
|
|
1204
|
-
transform: translateX(20px);
|
|
1205
|
-
}
|
|
1206
|
-
to {
|
|
1207
|
-
opacity: 1;
|
|
1208
|
-
transform: translateX(0);
|
|
1209
|
-
}
|
|
1210
|
-
}
|
|
1211
|
-
|
|
1212
|
-
@media (max-width: 480px) {
|
|
1213
|
-
.tchao-window.maximized {
|
|
1214
|
-
max-width: 100%;
|
|
1215
|
-
}
|
|
1216
|
-
}
|
|
1217
|
-
|
|
1218
|
-
/* Name Line Launcher Style */
|
|
1219
|
-
.tchao-launcher-name-line {
|
|
1220
|
-
display: flex;
|
|
1221
|
-
align-items: center;
|
|
1222
|
-
gap: 12px;
|
|
1223
|
-
background: ${t};
|
|
1224
|
-
padding: 8px 16px 8px 8px;
|
|
1225
|
-
border-radius: 50px;
|
|
1226
|
-
cursor: pointer;
|
|
1227
|
-
box-shadow: 0 4px 12px ${o.shadow};
|
|
1228
|
-
transition: transform 0.2s, box-shadow 0.2s;
|
|
1229
|
-
border: none;
|
|
1230
|
-
}
|
|
1231
|
-
|
|
1232
|
-
.tchao-launcher-name-line:hover {
|
|
1233
|
-
transform: scale(1.02);
|
|
1234
|
-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
1235
|
-
}
|
|
1236
|
-
|
|
1237
|
-
.tchao-launcher-name-line-avatar {
|
|
1238
|
-
width: 48px;
|
|
1239
|
-
height: 48px;
|
|
1240
|
-
border-radius: 50%;
|
|
1241
|
-
background: rgba(255, 255, 255, 0.2);
|
|
1242
|
-
overflow: hidden;
|
|
1243
|
-
flex-shrink: 0;
|
|
1244
|
-
}
|
|
1245
|
-
|
|
1246
|
-
.tchao-launcher-name-line-avatar img {
|
|
1247
|
-
width: 100%;
|
|
1248
|
-
height: 100%;
|
|
1249
|
-
object-fit: cover;
|
|
1250
|
-
}
|
|
1251
|
-
|
|
1252
|
-
.tchao-launcher-name-line-info {
|
|
1253
|
-
display: flex;
|
|
1254
|
-
flex-direction: column;
|
|
1255
|
-
gap: 2px;
|
|
1256
|
-
color: white;
|
|
1257
|
-
}
|
|
1258
|
-
|
|
1259
|
-
.tchao-launcher-name-line-name {
|
|
1260
|
-
display: flex;
|
|
1261
|
-
align-items: center;
|
|
1262
|
-
gap: 6px;
|
|
1263
|
-
font-weight: 600;
|
|
1264
|
-
font-size: 14px;
|
|
1265
|
-
}
|
|
1266
|
-
|
|
1267
|
-
.tchao-launcher-name-line-status {
|
|
1268
|
-
width: 8px;
|
|
1269
|
-
height: 8px;
|
|
1270
|
-
border-radius: 50%;
|
|
1271
|
-
background: #22c55e;
|
|
1272
|
-
}
|
|
1273
|
-
|
|
1274
|
-
.tchao-launcher-name-line-role {
|
|
1275
|
-
font-size: 12px;
|
|
1276
|
-
opacity: 0.9;
|
|
1277
|
-
}
|
|
1278
|
-
|
|
1279
|
-
.tchao-launcher-name-line-cta {
|
|
1280
|
-
background: white;
|
|
1281
|
-
color: ${t};
|
|
1282
|
-
border: none;
|
|
1283
|
-
border-radius: 20px;
|
|
1284
|
-
padding: 8px 16px;
|
|
1285
|
-
font-size: 13px;
|
|
1286
|
-
font-weight: 600;
|
|
1287
|
-
cursor: pointer;
|
|
1288
|
-
margin-left: 8px;
|
|
1289
|
-
transition: opacity 0.2s;
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
|
-
.tchao-launcher-name-line-cta:hover {
|
|
1293
|
-
opacity: 0.9;
|
|
1294
|
-
}
|
|
1295
|
-
|
|
1296
|
-
/* Question CTA Launcher Style */
|
|
1297
|
-
.tchao-launcher-question-cta {
|
|
1298
|
-
display: flex;
|
|
1299
|
-
flex-direction: column;
|
|
1300
|
-
gap: 10px;
|
|
1301
|
-
background: ${o.bg};
|
|
1302
|
-
padding: 14px;
|
|
1303
|
-
border-radius: 12px;
|
|
1304
|
-
box-shadow: 0 4px 16px ${o.shadow};
|
|
1305
|
-
border: 1px solid ${o.border};
|
|
1306
|
-
max-width: 224px;
|
|
1307
|
-
cursor: default;
|
|
1308
|
-
}
|
|
1309
|
-
|
|
1310
|
-
.tchao-launcher-question-cta-header {
|
|
1311
|
-
display: flex;
|
|
1312
|
-
justify-content: space-between;
|
|
1313
|
-
align-items: flex-start;
|
|
1314
|
-
gap: 8px;
|
|
1315
|
-
}
|
|
1316
|
-
|
|
1317
|
-
.tchao-launcher-question-cta-text {
|
|
1318
|
-
flex: 1;
|
|
1319
|
-
}
|
|
1320
|
-
|
|
1321
|
-
.tchao-launcher-question-cta-title {
|
|
1322
|
-
font-weight: 700;
|
|
1323
|
-
font-size: 14px;
|
|
1324
|
-
color: ${o.text};
|
|
1325
|
-
margin-bottom: 2px;
|
|
1326
|
-
}
|
|
1327
|
-
|
|
1328
|
-
.tchao-launcher-question-cta-subtitle {
|
|
1329
|
-
font-size: 12px;
|
|
1330
|
-
color: ${o.textSecondary};
|
|
1331
|
-
}
|
|
1332
|
-
|
|
1333
|
-
.tchao-launcher-question-cta-avatars {
|
|
1334
|
-
display: flex;
|
|
1335
|
-
align-items: center;
|
|
1336
|
-
flex-shrink: 0;
|
|
1337
|
-
}
|
|
1338
|
-
|
|
1339
|
-
.tchao-launcher-question-cta-avatar {
|
|
1340
|
-
width: 28px;
|
|
1341
|
-
height: 28px;
|
|
1342
|
-
border-radius: 50%;
|
|
1343
|
-
background: ${o.bgTertiary};
|
|
1344
|
-
overflow: hidden;
|
|
1345
|
-
margin-left: -6px;
|
|
1346
|
-
border: 2px solid ${o.bg};
|
|
1347
|
-
}
|
|
1348
|
-
|
|
1349
|
-
.tchao-launcher-question-cta-avatar:first-child {
|
|
1350
|
-
margin-left: 0;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
|
-
.tchao-launcher-question-cta-avatar img {
|
|
1354
|
-
width: 100%;
|
|
1355
|
-
height: 100%;
|
|
1356
|
-
object-fit: cover;
|
|
1357
|
-
}
|
|
1358
|
-
|
|
1359
|
-
.tchao-launcher-question-cta-icon {
|
|
1360
|
-
width: 28px;
|
|
1361
|
-
height: 28px;
|
|
1362
|
-
border-radius: 50%;
|
|
1363
|
-
background: ${t};
|
|
1364
|
-
display: flex;
|
|
1365
|
-
align-items: center;
|
|
1366
|
-
justify-content: center;
|
|
1367
|
-
margin-left: -6px;
|
|
1368
|
-
border: 2px solid ${o.bg};
|
|
1369
|
-
}
|
|
1370
|
-
|
|
1371
|
-
.tchao-launcher-question-cta-icon svg {
|
|
1372
|
-
width: 12px;
|
|
1373
|
-
height: 12px;
|
|
1374
|
-
fill: white;
|
|
1375
|
-
}
|
|
1376
|
-
|
|
1377
|
-
.tchao-launcher-question-cta-buttons {
|
|
1378
|
-
display: flex;
|
|
1379
|
-
gap: 8px;
|
|
1380
|
-
}
|
|
1381
|
-
|
|
1382
|
-
.tchao-launcher-question-cta-btn {
|
|
1383
|
-
flex: 1;
|
|
1384
|
-
padding: 8px 16px;
|
|
1385
|
-
border-radius: 9999px;
|
|
1386
|
-
font-size: 12px;
|
|
1387
|
-
font-weight: 600;
|
|
1388
|
-
cursor: pointer;
|
|
1389
|
-
transition: opacity 0.2s;
|
|
1390
|
-
border: none;
|
|
1391
|
-
display: flex;
|
|
1392
|
-
align-items: center;
|
|
1393
|
-
justify-content: center;
|
|
1394
|
-
gap: 6px;
|
|
1395
|
-
}
|
|
1396
|
-
|
|
1397
|
-
.tchao-launcher-question-cta-btn.primary {
|
|
1398
|
-
background: ${t};
|
|
1399
|
-
color: white;
|
|
1400
|
-
}
|
|
1401
|
-
|
|
1402
|
-
.tchao-launcher-question-cta-btn.primary svg {
|
|
1403
|
-
width: 14px;
|
|
1404
|
-
height: 14px;
|
|
1405
|
-
fill: white;
|
|
1406
|
-
}
|
|
1407
|
-
|
|
1408
|
-
.tchao-launcher-question-cta-btn.secondary {
|
|
1409
|
-
background: ${o.bgTertiary};
|
|
1410
|
-
color: ${o.text};
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1413
|
-
.tchao-launcher-question-cta-btn:hover {
|
|
1414
|
-
opacity: 0.9;
|
|
1415
|
-
}
|
|
1416
|
-
|
|
1417
|
-
/* Bubble with badge - ensure it shows for all launcher types */
|
|
1418
|
-
.tchao-launcher-badge {
|
|
1419
|
-
position: absolute;
|
|
1420
|
-
top: -4px;
|
|
1421
|
-
right: -4px;
|
|
1422
|
-
min-width: 20px;
|
|
1423
|
-
height: 20px;
|
|
1424
|
-
padding: 0 6px;
|
|
1425
|
-
background: #ef4444;
|
|
1426
|
-
color: white;
|
|
1427
|
-
font-size: 11px;
|
|
1428
|
-
font-weight: 600;
|
|
1429
|
-
border-radius: 10px;
|
|
1430
|
-
display: flex;
|
|
1431
|
-
align-items: center;
|
|
1432
|
-
justify-content: center;
|
|
1433
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
1434
|
-
}
|
|
1435
|
-
`}var v={chat:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>',close:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',send:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',image:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',maximize:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>',minimize:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>',emoji:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>',smile:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>',more:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>',copy:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>',mic:'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>'},dn=["\u{1F44D}","\u2764\uFE0F","\u{1F602}","\u{1F62E}","\u{1F622}"],pn=/\b(https?:\/\/[^\s<>[\]{}|\\^`"']+|www\.[^\s<>[\]{}|\\^`"']+\.[^\s<>[\]{}|\\^`"']+)/gi;function un(t){return t.replace(/[.,;:!?)]+$/,"")}function lt(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML.replace(pn,i=>{let a=un(i),o=i.slice(a.length);return`<a href="${a.startsWith("http")?a:`https://${a}`}" target="_blank" rel="noopener noreferrer">${a}</a>${o}`})}var de=class{constructor(){this.shadowRoot=null;this.container=null;this.elements={messagesContainer:null,inputElement:null,imagePreviewContainer:null,emailPopupContainer:null,typingIndicator:null,honeypotInput:null,unreadBadge:null,micButton:null};this.pendingImageUrl=null;this.callbacks=null;this.speechState={recognition:null,isRecording:!1}}create(e){this.callbacks=e,this.container=document.createElement("div"),this.container.id="tchao-widget",document.body.appendChild(this.container),this.shadowRoot=this.container.attachShadow({mode:"closed"});let n=at(),i=document.createElement("style");i.textContent=ct(g.primaryColor??"#6366f1",g.position??"bottom-right",n),this.shadowRoot.appendChild(i);let a=document.createElement("div");a.className="tchao-container",this.shadowRoot.appendChild(a);let o=g.widgetStyle??"bubble";this.renderLauncher(a,e.onToggle,o),this.renderWindow(a,e)}destroy(){this.speechState.recognition?.abort(),this.container?.remove(),this.container=null,this.shadowRoot=null,this.elements={messagesContainer:null,inputElement:null,imagePreviewContainer:null,emailPopupContainer:null,typingIndicator:null,honeypotInput:null,unreadBadge:null,micButton:null},this.pendingImageUrl=null,this.callbacks=null}setWindowVisible(e){if(!this.shadowRoot)return;if(this.shadowRoot.querySelector(".tchao-window")?.classList.toggle("hidden",!e),e){this.elements.inputElement?.focus();let i=this.elements.messagesContainer;i&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{i.scrollTop=i.scrollHeight})})}}setMaximized(e){if(!this.shadowRoot)return;let n=this.shadowRoot.querySelector(".tchao-window"),i=this.shadowRoot.querySelector(".tchao-maximize");n?.classList.toggle("maximized",e),i&&(i.innerHTML=e?v.minimize:v.maximize,i.setAttribute("aria-label",e?"Minimize chat":"Maximize chat"))}appendMessage(e){let n=this.elements.messagesContainer;if(!n)return;n.querySelector(".tchao-welcome")?.remove();let i=e.senderType==="AGENT"||e.senderType==="AI",a=e.senderType==="VISITOR",o=n.querySelector(".tchao-message-group:last-child"),s=o?.classList.contains("tchao-message-group-agent"),c=o?.classList.contains("tchao-message-group-visitor");if((i&&s||a&&c)&&o){let l=o.querySelector(".tchao-bubbles-container");if(l){let p=l.querySelector(".tchao-group-time");p&&p.remove();let m=document.createElement("div");m.className="tchao-message-row";let b=document.createElement("div");b.className="tchao-message-bubble-wrapper";let y=document.createElement("div");y.dataset.messageId=e.id,y.className=`tchao-message ${e.senderType.toLowerCase()}`,e.status==="sending"&&(y.style.opacity="0.7"),this.appendMessageContent(y,e,!0),b.appendChild(y),e.reactions&&e.reactions.length>0&&b.appendChild(this.createReactionsDisplay(e)),m.appendChild(b),m.appendChild(this.createMessageActions(e)),l.appendChild(m);let F=document.createElement("div");F.className="tchao-group-time",F.textContent=this.formatTime(e.timestamp),l.appendChild(F)}}else this.renderMessageGroup([e],n);n.scrollTop=n.scrollHeight}renderExistingMessages(e){let n=this.elements.messagesContainer;if(!n)return;if(n.innerHTML="",e.length===0){n.appendChild(this.createWelcomeScreen());return}this.groupMessagesBySender(e).forEach(a=>this.renderMessageGroup(a,n)),requestAnimationFrame(()=>{requestAnimationFrame(()=>{n.scrollTop=n.scrollHeight})})}updateMessageStatus(e,n){let i=this.elements.messagesContainer;if(!i)return;let a=i.querySelector(`[data-message-id="${e}"]`);a&&(n==="sent"?a.style.opacity="1":n==="failed"&&(a.style.opacity="1",a.style.borderColor="#ef4444"))}showTypingIndicator(){let e=this.elements.messagesContainer;if(!e||this.elements.typingIndicator)return;let n=document.createElement("div");n.className="tchao-typing-indicator",n.appendChild(this.createAvatar());let i=document.createElement("div");i.className="tchao-typing-bubble",i.innerHTML=`
|
|
1436
|
-
<span class="tchao-typing-text">is typing</span>
|
|
1437
|
-
<span class="tchao-typing-dots">
|
|
1438
|
-
<span></span><span></span><span></span>
|
|
1439
|
-
</span>
|
|
1440
|
-
`,n.appendChild(i),this.elements.typingIndicator=n,e.appendChild(n),e.scrollTop=e.scrollHeight}hideTypingIndicator(){this.elements.typingIndicator?.remove(),this.elements.typingIndicator=null}updateAgentPresenceUI(e){if(!this.shadowRoot)return;let i={online:"Available now",idle:"Idle",away:"Away"}[e];this.updateStatusElement("#tchao-header-status",e,i),this.updateStatusElement("#tchao-welcome-status",e,i)}showEmailPopup(){this.elements.emailPopupContainer&&(this.elements.emailPopupContainer.style.display="block")}hideEmailPopup(){this.elements.emailPopupContainer&&(this.elements.emailPopupContainer.style.display="none")}getHoneypotValue(){return this.elements.honeypotInput?.value??""}updateUnreadBadge(e){this.elements.unreadBadge&&(e>0?(this.elements.unreadBadge.textContent=e>99?"99+":String(e),this.elements.unreadBadge.style.display="flex"):this.elements.unreadBadge.style.display="none")}updateMessageReactions(e,n){let i=this.elements.messagesContainer;if(!i)return;let a=i.querySelector(`[data-message-id="${e}"]`);if(!a)return;let o=a.parentElement;if(!o?.classList.contains("tchao-message-bubble-wrapper"))return;let s=o.querySelector(".tchao-reactions");if(s&&s.remove(),n.length>0){let c=n.reduce((l,p)=>l+p.userIds.length,0),d=document.createElement("div");if(d.className="tchao-reactions",d.dataset.messageReactions=e,n.forEach(l=>{let p=document.createElement("button");p.type="button",p.className="tchao-reaction",p.textContent=l.emoji,p.addEventListener("click",()=>{this.callbacks?.onReaction?.(e,l.emoji)}),d.appendChild(p)}),c>1){let l=document.createElement("span");l.className="tchao-reaction-count",l.textContent=String(c),d.appendChild(l)}o.appendChild(d)}}updateMessageContent(e,n){let i=this.elements.messagesContainer;if(!i)return;let a=i.querySelector(`[data-message-id="${e}"]`);if(!a)return;let o=a.querySelector("div[style*='white-space']");o&&(o.innerHTML=lt(n))}updateMessageId(e,n){let i=this.elements.messagesContainer;if(!i)return;let a=i.querySelector(`[data-message-id="${e}"]`);a&&(a.dataset.messageId=n)}groupMessagesBySender(e){let n=[],i=[];for(let a of e)i.length===0||i[0].senderType===a.senderType?i.push(a):(n.push(i),i=[a]);return i.length>0&&n.push(i),n}renderMessageGroup(e,n){let i=e[0],a=e[e.length-1],o=i.senderType==="AGENT"||i.senderType==="AI",s=document.createElement("div");s.className=o?"tchao-message-group tchao-message-group-agent":"tchao-message-group tchao-message-group-visitor",o&&s.appendChild(this.createAvatar());let c=document.createElement("div");c.className="tchao-bubbles-container",e.forEach(l=>{let p=document.createElement("div");p.className="tchao-message-row";let m=document.createElement("div");m.className="tchao-message-bubble-wrapper";let b=document.createElement("div");b.dataset.messageId=l.id,b.className=`tchao-message ${l.senderType.toLowerCase()}`,l.status==="sending"&&(b.style.opacity="0.7"),this.appendMessageContent(b,l,!0),m.appendChild(b),l.reactions&&l.reactions.length>0&&m.appendChild(this.createReactionsDisplay(l)),p.appendChild(m),p.appendChild(this.createMessageActions(l)),c.appendChild(p)});let d=document.createElement("div");d.className="tchao-group-time",d.textContent=this.formatTime(a.timestamp),c.appendChild(d),s.appendChild(c),n.appendChild(s)}renderLauncher(e,n,i){switch(i){case"name_line":this.renderNameLineLauncher(e,n);break;case"question_cta":this.renderQuestionCtaLauncher(e,n);break;default:this.renderBubbleLauncher(e,n);break}}renderBubbleLauncher(e,n){let i=document.createElement("button");i.className="tchao-bubble",i.innerHTML=v.chat,i.setAttribute("aria-label","Open chat"),i.addEventListener("click",n),this.elements.unreadBadge=document.createElement("span"),this.elements.unreadBadge.className="tchao-unread-badge",this.elements.unreadBadge.style.display="none",i.appendChild(this.elements.unreadBadge),e.appendChild(i)}renderNameLineLauncher(e,n){let i=document.createElement("button");i.className="tchao-launcher-name-line",i.setAttribute("aria-label","Open chat"),i.addEventListener("click",n);let a=document.createElement("div");if(a.className="tchao-launcher-name-line-avatar",h?.agentImage){let p=document.createElement("img");p.src=h.agentImage,p.alt=h.agentName??"Agent",a.appendChild(p)}i.appendChild(a);let o=document.createElement("div");o.className="tchao-launcher-name-line-info";let s=document.createElement("div");s.className="tchao-launcher-name-line-name";let c=document.createElement("span");c.className="tchao-launcher-name-line-status",s.appendChild(c);let d=document.createTextNode(h?.agentName??"Support");if(s.appendChild(d),o.appendChild(s),h?.agentRole){let p=document.createElement("div");p.className="tchao-launcher-name-line-role",p.textContent=h.agentRole,o.appendChild(p)}i.appendChild(o);let l=document.createElement("span");l.className="tchao-launcher-name-line-cta",l.textContent="Chat",i.appendChild(l),this.elements.unreadBadge=document.createElement("span"),this.elements.unreadBadge.className="tchao-launcher-badge",this.elements.unreadBadge.style.display="none",i.appendChild(this.elements.unreadBadge),e.appendChild(i)}renderQuestionCtaLauncher(e,n){let i=document.createElement("div");i.className="tchao-launcher-question-cta";let a=document.createElement("div");a.className="tchao-launcher-question-cta-header";let o=document.createElement("div");o.className="tchao-launcher-question-cta-text";let s=document.createElement("div");s.className="tchao-launcher-question-cta-title",s.textContent="Questions? Chat with us.",o.appendChild(s);let c=document.createElement("div");c.className="tchao-launcher-question-cta-subtitle",c.textContent=L==="online"?"We're online":"We'll reply soon",o.appendChild(c),a.appendChild(o);let d=document.createElement("div");if(d.className="tchao-launcher-question-cta-avatars",h?.agentImage){let b=document.createElement("div");b.className="tchao-launcher-question-cta-avatar";let y=document.createElement("img");y.src=h.agentImage,y.alt=h.agentName??"Agent",b.appendChild(y),d.appendChild(b)}let l=document.createElement("div");l.className="tchao-launcher-question-cta-icon",l.innerHTML=v.chat,d.appendChild(l),a.appendChild(d),i.appendChild(a);let p=document.createElement("div");p.className="tchao-launcher-question-cta-buttons";let m=document.createElement("button");m.className="tchao-launcher-question-cta-btn primary",m.textContent="Start Chat",m.addEventListener("click",n),p.appendChild(m),i.appendChild(p),this.elements.unreadBadge=document.createElement("span"),this.elements.unreadBadge.className="tchao-launcher-badge",this.elements.unreadBadge.style.display="none",i.appendChild(this.elements.unreadBadge),e.appendChild(i)}renderWindow(e,n){let i=document.createElement("div");i.className="tchao-window hidden",i.setAttribute("role","dialog"),i.setAttribute("aria-label","Chat window"),this.renderHeader(i,n.onToggle,n.onMaximize),this.renderMessages(i),this.renderInputArea(i,n),this.renderPoweredBy(i),this.setupDragDrop(i,n),e.appendChild(i)}renderHeader(e,n,i){let a=document.createElement("div");a.className="tchao-header",a.appendChild(this.createAvatar("tchao-header-avatar"));let o=document.createElement("div");o.className="tchao-header-info";let s=document.createElement("div");s.className="tchao-header-name-row";let c=document.createElement("div");if(c.className="tchao-header-name",c.textContent=h?.agentName??h?.name??"Support",s.appendChild(c),s.appendChild(this.createStatusBadge("tchao-header-status",L)),o.appendChild(s),h?.agentRole){let p=document.createElement("div");p.className="tchao-header-tagline",p.textContent=h.agentRole,o.appendChild(p)}a.appendChild(o);let d=document.createElement("button");d.className="tchao-maximize",d.innerHTML=v.maximize,d.setAttribute("aria-label","Maximize chat"),d.addEventListener("click",i),a.appendChild(d);let l=document.createElement("button");l.className="tchao-close",l.innerHTML=v.close,l.setAttribute("aria-label","Close chat"),l.addEventListener("click",n),a.appendChild(l),e.appendChild(a)}renderMessages(e){this.elements.messagesContainer=document.createElement("div"),this.elements.messagesContainer.className="tchao-messages",r.messages.length===0?this.elements.messagesContainer.appendChild(this.createWelcomeScreen()):r.messages.forEach(n=>this.appendMessage(n)),e.appendChild(this.elements.messagesContainer)}renderInputArea(e,n){let i=document.createElement("div");i.className="tchao-input-area",this.elements.emailPopupContainer=document.createElement("div"),this.elements.emailPopupContainer.className="tchao-email-popup",this.elements.emailPopupContainer.style.display="none",this.renderEmailPopupContent(this.elements.emailPopupContainer,n),i.appendChild(this.elements.emailPopupContainer),this.elements.imagePreviewContainer=document.createElement("div"),this.elements.imagePreviewContainer.className="tchao-image-preview",this.elements.imagePreviewContainer.style.display="none",i.appendChild(this.elements.imagePreviewContainer),this.elements.honeypotInput=document.createElement("input"),this.elements.honeypotInput.type="text",this.elements.honeypotInput.name="website",this.elements.honeypotInput.autocomplete="one-time-code",this.elements.honeypotInput.tabIndex=-1,this.elements.honeypotInput.setAttribute("aria-hidden","true"),this.elements.honeypotInput.style.cssText="position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none;",i.appendChild(this.elements.honeypotInput);let a=document.createElement("div");a.className="tchao-input-row";let o=document.createElement("input");o.type="file",o.accept="image/*",o.style.display="none",o.addEventListener("change",async()=>this.handleFileSelect(o,n)),a.appendChild(o);let s=document.createElement("button");s.className="tchao-image-btn",s.innerHTML=v.image,s.setAttribute("aria-label","Attach image"),s.addEventListener("click",()=>o.click()),a.appendChild(s),this.elements.inputElement=document.createElement("textarea"),this.elements.inputElement.className="tchao-input",this.elements.inputElement.placeholder="Type a message...",this.elements.inputElement.rows=1,this.elements.inputElement.addEventListener("input",()=>{n.onInput(this.elements.inputElement?.value??""),this.autoResizeTextarea()}),this.elements.inputElement.addEventListener("keydown",d=>{d.key==="Enter"&&!d.shiftKey&&(d.preventDefault(),this.handleSend(n.onSend))}),a.appendChild(this.elements.inputElement),this.isSpeechRecognitionSupported()&&(this.elements.micButton=document.createElement("button"),this.elements.micButton.className="tchao-mic-btn",this.elements.micButton.innerHTML=v.mic,this.elements.micButton.setAttribute("aria-label","Voice input"),this.elements.micButton.addEventListener("click",()=>this.toggleSpeechRecognition()),a.appendChild(this.elements.micButton));let c=document.createElement("button");c.className="tchao-send",c.innerHTML=v.send,c.setAttribute("aria-label","Send message"),c.addEventListener("click",()=>this.handleSend(n.onSend)),a.appendChild(c),i.appendChild(a),e.appendChild(i)}renderEmailPopupContent(e,n){let i=document.createElement("div");i.className="tchao-email-popup-text",i.textContent="Enter your email to receive notifications",e.appendChild(i);let a=document.createElement("div");a.className="tchao-email-popup-row";let o=document.createElement("input");o.type="email",o.className="tchao-email-popup-input",o.placeholder="your@email.com",a.appendChild(o);let s=document.createElement("button");s.className="tchao-email-popup-submit",s.textContent="Save";let c=async()=>{let l=o.value.trim();if(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(l)){s.disabled=!0,s.textContent="...";try{await n.onEmailSubmit?.(l),this.hideEmailPopup()}finally{s.disabled=!1,s.textContent="Save"}}};o.addEventListener("keydown",l=>{l.key==="Enter"&&(l.preventDefault(),c())}),s.addEventListener("click",c),a.appendChild(s),e.appendChild(a);let d=document.createElement("button");d.className="tchao-email-popup-close",d.innerHTML=v.close,d.addEventListener("click",()=>{n.onEmailDismiss?.(),this.hideEmailPopup()}),e.appendChild(d)}renderPoweredBy(e){if(h?.hidePoweredBy)return;let n=document.createElement("div");n.className="tchao-powered",n.innerHTML='Powered by <a href="https://tchao.app" target="_blank" rel="noopener">Tchao</a>',e.appendChild(n)}createAvatar(e="tchao-message-avatar"){let n=document.createElement("div");if(n.className=e,h?.agentImage){let i=document.createElement("img");i.src=h.agentImage,i.alt=h.agentName??"Agent",n.appendChild(i)}else n.innerHTML=v.chat;return n}createReactionsDisplay(e){let n=document.createElement("div");n.className="tchao-reactions",n.dataset.messageReactions=e.id;let i=e.reactions??[],a=i.reduce((o,s)=>o+s.userIds.length,0);if(i.forEach(o=>{let s=document.createElement("button");s.type="button",s.className="tchao-reaction",s.textContent=o.emoji,s.addEventListener("click",()=>{this.callbacks?.onReaction?.(e.id,o.emoji)}),n.appendChild(s)}),a>1){let o=document.createElement("span");o.className="tchao-reaction-count",o.textContent=String(a),n.appendChild(o)}return n}createMessageActions(e){let n=document.createElement("div");n.className="tchao-message-actions";let i=document.createElement("button");i.className="tchao-message-action-btn",i.innerHTML=v.smile,i.setAttribute("aria-label","Add reaction");let a=document.createElement("div");a.className="tchao-reaction-picker hidden",dn.forEach(d=>{let l=document.createElement("button");l.type="button",l.className="tchao-reaction-picker-btn",l.textContent=d,l.addEventListener("click",p=>{p.stopPropagation(),a.classList.add("hidden"),this.callbacks?.onReaction?.(e.id,d)}),a.appendChild(l)}),i.addEventListener("click",d=>{d.stopPropagation(),this.closeAllPopovers(),a.classList.toggle("hidden")}),n.appendChild(i),n.appendChild(a);let o=document.createElement("button");o.className="tchao-message-action-btn",o.innerHTML=v.more,o.setAttribute("aria-label","More actions");let s=document.createElement("div");s.className="tchao-message-dropdown hidden";let c=document.createElement("button");return c.className="tchao-dropdown-item",c.innerHTML=`${v.copy}<span>Copy</span>`,c.addEventListener("click",d=>{d.stopPropagation(),s.classList.add("hidden"),navigator.clipboard.writeText(e.content),this.showToast("Message copied")}),s.appendChild(c),o.addEventListener("click",d=>{d.stopPropagation(),this.closeAllPopovers(),s.classList.toggle("hidden")}),n.appendChild(o),n.appendChild(s),n}closeAllPopovers(){this.shadowRoot&&this.shadowRoot.querySelectorAll(".tchao-reaction-picker, .tchao-message-dropdown").forEach(e=>e.classList.add("hidden"))}showToast(e){if(!this.shadowRoot)return;let n=this.shadowRoot.querySelector(".tchao-toast");n&&n.remove();let i=document.createElement("div");i.className="tchao-toast",i.textContent=e,this.shadowRoot.appendChild(i),setTimeout(()=>i.remove(),2e3)}createStatusBadge(e,n){let i={online:"Available now",idle:"Idle",away:"Away"},a=document.createElement("div");a.className=`${e.replace("#","")} ${n}`,a.id=e.replace("#","");let o=document.createElement("span");o.className=`${e.replace("#","")}-dot`,a.appendChild(o);let s=document.createElement("span");return s.className=`${e.replace("#","")}-text`,s.textContent=i[n],a.appendChild(s),a}updateStatusElement(e,n,i){let a=this.shadowRoot?.querySelector(e);if(!a)return;let o=e.replace("#","");a.className=`${o} ${n}`;let s=a.querySelector(`.${o}-text`);s&&(s.textContent=i)}createMessageBubble(e,n){let i=document.createElement("div");return i.className=`tchao-message ${n}`,this.appendMessageContent(i,e),i}appendMessageContent(e,n,i=!1){if(n.image){let a=n.image,o=document.createElement("img");o.src=a,o.alt="Attached image",o.className="tchao-message-image",o.addEventListener("click",()=>this.showImageModal(a)),e.appendChild(o)}if(n.content&&n.content!=="\u{1F4F7}"){let a=document.createElement("div");a.style.whiteSpace="pre-wrap",a.innerHTML=lt(n.content),e.appendChild(a)}if(!i){let a=document.createElement("div");a.className="tchao-message-time",a.textContent=this.formatTime(n.timestamp),e.appendChild(a)}}createWelcomeScreen(){let e=document.createElement("div");e.className="tchao-welcome";let n=document.createElement("div");n.className="tchao-welcome-card";let i=document.createElement("div");i.className="tchao-welcome-quote";let a=h?.agentWelcomeMessage??"Hey there! Ask me anything, I'm here to help.";i.textContent=`"${a}"`,n.appendChild(i);let o=document.createElement("div");o.className="tchao-welcome-agent";let s=document.createElement("div");if(s.className="tchao-welcome-avatar",h?.agentImage){let m=document.createElement("img");m.src=h.agentImage,m.alt=h.agentName??"Agent",s.appendChild(m)}o.appendChild(s);let c=document.createElement("div");c.className="tchao-welcome-info";let d=document.createElement("div");d.className="tchao-welcome-name";let l=h?.agentName??"Support",p=h?.agentRole;return d.innerHTML=p?`${l} <span>- ${p}</span>`:l,c.appendChild(d),c.appendChild(this.createWelcomeStatusBadge(L)),o.appendChild(c),n.appendChild(o),e.appendChild(n),e}createWelcomeStatusBadge(e){let n={online:"Available now",idle:"Idle",away:"Away"},i=document.createElement("div");i.className=`tchao-welcome-status ${e}`,i.id="tchao-welcome-status";let a=document.createElement("div");a.className="tchao-welcome-status-dot",i.appendChild(a);let o=document.createElement("span");return o.className="tchao-welcome-status-text",o.textContent=n[e],i.appendChild(o),i}showImageModal(e){if(!this.shadowRoot)return;let n=document.createElement("div");n.className="tchao-image-modal";let i=document.createElement("img");i.src=e,i.alt="Full size image",n.appendChild(i);let a=document.createElement("button");a.className="tchao-image-modal-close",a.innerHTML=v.close,a.addEventListener("click",()=>n.remove()),n.appendChild(a),n.addEventListener("click",o=>{o.target===n&&n.remove()}),this.shadowRoot.appendChild(n)}async handleFileSelect(e,n){let i=e.files?.[0];if(i&&n.onImageSelect){this.showImagePreview(i);let a=await n.onImageSelect(i);a?this.pendingImageUrl=a:this.clearImagePreview()}e.value=""}showImagePreview(e){let n=this.elements.imagePreviewContainer;if(!n)return;let i=new FileReader;i.onload=a=>{n.innerHTML="",n.style.display="flex";let o=document.createElement("div");o.className="tchao-image-preview-item";let s=document.createElement("img");s.src=a.target?.result,s.alt="Preview",o.appendChild(s);let c=document.createElement("button");c.className="tchao-image-preview-remove",c.innerHTML=v.close,c.addEventListener("click",()=>this.clearImagePreview()),o.appendChild(c),n.appendChild(o)},i.readAsDataURL(e)}clearImagePreview(){let e=this.elements.imagePreviewContainer;e&&(e.innerHTML="",e.style.display="none"),this.pendingImageUrl=null}setupDragDrop(e,n){let i=0;e.addEventListener("dragenter",a=>{a.preventDefault(),a.stopPropagation(),i++,i===1&&e.classList.add("tchao-drag-over")}),e.addEventListener("dragleave",a=>{a.preventDefault(),a.stopPropagation(),i--,i===0&&e.classList.remove("tchao-drag-over")}),e.addEventListener("dragover",a=>{a.preventDefault(),a.stopPropagation()}),e.addEventListener("drop",a=>{a.preventDefault(),a.stopPropagation(),i=0,e.classList.remove("tchao-drag-over");let o=a.dataTransfer?.files;if(!o||o.length===0)return;let s=o[0];this.handleDroppedFile(s,n)})}async handleDroppedFile(e,n){if(!e.type.startsWith("image/")){this.showDropError("Only images are allowed");return}if(e.size>2097152){this.showDropError("Image too large (max 2MB)");return}if(!n.onImageSelect)return;this.showImagePreview(e);let a=await n.onImageSelect(e);a?this.pendingImageUrl=a:this.clearImagePreview()}showDropError(e){let n=this.elements.messagesContainer;if(!n)return;let i=n.querySelector(".tchao-drop-error");i&&i.remove();let a=document.createElement("div");a.className="tchao-drop-error",a.textContent=e,n.appendChild(a),setTimeout(()=>a.remove(),3e3)}handleSend(e){let n=this.elements.inputElement;if(!n)return;let i=n.value.trim(),a=this.pendingImageUrl;!i&&!a||(e(i||"\u{1F4F7}",a),n.value="",this.autoResizeTextarea(),this.clearImagePreview())}autoResizeTextarea(){let e=this.elements.inputElement;e&&(e.style.height="auto",e.style.height=`${Math.min(e.scrollHeight,100)}px`)}formatTime(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}isSpeechRecognitionSupported(){return!!(window.SpeechRecognition||window.webkitSpeechRecognition)}toggleSpeechRecognition(){this.speechState.isRecording?this.stopSpeechRecognition():this.startSpeechRecognition()}startSpeechRecognition(){let e=window.SpeechRecognition||window.webkitSpeechRecognition;if(!e)return;let n=new e;n.continuous=!1,n.interimResults=!0,n.lang=navigator.language||"en-US",n.onstart=()=>{this.speechState.isRecording=!0,this.elements.micButton?.classList.add("recording")},n.onresult=i=>{let a="";for(let o=i.resultIndex;o<i.results.length;o++)a+=i.results[o][0].transcript;if(this.elements.inputElement){let o=this.elements.inputElement.value,s=o.lastIndexOf("\u2588"),c=s>=0?o.substring(0,s):o;i.results[i.results.length-1].isFinal?this.elements.inputElement.value=`${c+a} `:this.elements.inputElement.value=`${c+a}\u2588`,this.autoResizeTextarea(),this.callbacks?.onInput(this.elements.inputElement.value)}},n.onerror=i=>{let a={network:"Voice service unavailable - try disabling ad blocker","not-allowed":"Microphone access denied","service-not-allowed":"Speech service not available","audio-capture":"No microphone found","language-not-supported":"Language not supported"};if(i.error!=="no-speech"&&i.error!=="aborted"){let o=a[i.error]??`Voice input error: ${i.error}`;this.showToast(o)}this.stopSpeechRecognition()},n.onend=()=>{this.elements.inputElement&&(this.elements.inputElement.value=this.elements.inputElement.value.replace(/█/g,"")),this.speechState.isRecording=!1,this.elements.micButton?.classList.remove("recording")},this.speechState.recognition=n;try{n.start()}catch{this.showToast("Could not start voice input")}}stopSpeechRecognition(){this.speechState.recognition&&(this.speechState.recognition.stop(),this.speechState.recognition=null),this.speechState.isRecording=!1,this.elements.micButton?.classList.remove("recording")}},x=new de;function dt(t){x.create(t)}function pt(){x.destroy()}function $(t){x.setWindowVisible(t)}function pe(t){x.appendMessage(t)}function z(t){x.renderExistingMessages(t)}function D(t,e){x.updateMessageStatus(t,e)}function ut(){x.showTypingIndicator()}function ue(){x.hideTypingIndicator()}function H(t){x.updateAgentPresenceUI(t)}function gt(){x.showEmailPopup()}function ht(t){x.setMaximized(t)}function ge(){return x.getHoneypotValue()}function U(t){x.updateUnreadBadge(t)}function mt(t,e){x.updateMessageReactions(t,e)}function ft(t,e){x.updateMessageContent(t,e)}function vt(t,e){x.updateMessageId(t,e)}async function C(t,e){try{let n=await fetch(`${g.apiBaseUrl}${t}`,{...e,headers:{"Content-Type":"application/json",...e?.headers}});return n.ok?{data:await n.json()}:{error:(await n.json().catch(()=>({}))).message??"Request failed"}}catch(n){return{error:n instanceof Error?n.message:"Network error"}}}async function xt(t){if(f())try{let n=await Pe(t);return n?{data:n}:{error:"Website not found"}}catch(n){return{error:n instanceof Error?n.message:"Convex error"}}return C(`/api/widget/config/${t}`)}async function he(t,e){if(f())try{let i=await Ae(t,e);return i?{data:i}:{error:"Conversation not found"}}catch(i){return{error:i instanceof Error?i.message:"Convex error"}}return C(`/api/widget/conversation/${t}?visitorId=${encodeURIComponent(e)}`)}async function bt(t,e,n,i){if(f())try{let o=await Le(t,e,n,i);return o?{data:o}:{error:"Failed to create conversation"}}catch(o){return{error:o instanceof Error?o.message:"Convex error"}}return C("/api/widget/conversation",{method:"POST",body:JSON.stringify({websiteId:t,visitorId:e,url:n,visitorMeta:i,honeypot:ge(),loadedAt:ce})})}async function wt(t,e,n,i,a,o){if(f())try{let c=await Ne(t,e,n,i,a,o);return c?{data:{message:c}}:{error:"Failed to send message"}}catch(c){return{error:c instanceof Error?c.message:"Convex error"}}return C("/api/widget/message",{method:"POST",body:JSON.stringify({conversationId:t,content:n,screenshot:i,url:a,image:o,honeypot:ge(),loadedAt:ce})})}async function yt(t){try{let e=new FormData;e.append("file",t);let n=await fetch(`${g.apiBaseUrl}/api/widget/upload`,{method:"POST",body:e});return n.ok?{data:await n.json()}:{error:(await n.json().catch(()=>({}))).error??"Upload failed"}}catch(e){return{error:e instanceof Error?e.message:"Upload error"}}}async function me(t,e){if(f())try{return{data:{success:await $e(t,e)}}}catch(i){return{error:i instanceof Error?i.message:"Convex error"}}return C("/api/widget/draft",{method:"POST",body:JSON.stringify({conversationId:t,draft:e})})}async function Ct(t,e,n){if(f())try{return{data:await X(t,e,n)}}catch(a){return{error:a instanceof Error?a.message:"Convex error"}}return C("/api/widget/identify",{method:"POST",body:JSON.stringify({conversationId:t,...n})})}async function St(t,e,n){if(f())try{return{data:await X(t,e,{email:n})}}catch(a){return{error:a instanceof Error?a.message:"Convex error"}}return C("/api/widget/identify",{method:"POST",body:JSON.stringify({conversationId:t,email:n,generateName:!0})})}async function Et(t,e){if(f())try{return{data:{success:await ze(t,e)}}}catch(i){return{error:i instanceof Error?i.message:"Convex error"}}return C("/api/widget/navigation",{method:"POST",body:JSON.stringify({conversationId:t,url:e})})}async function fe(t,e){if(f())try{return{data:await De(t,e)}}catch(i){return{error:i instanceof Error?i.message:"Convex error"}}return C("/api/widget/read",{method:"POST",body:JSON.stringify({conversationId:t,visitorId:e})})}async function Mt(t,e,n){if(f())try{return{data:{success:await Be(t,e,n)}}}catch(a){return{error:a instanceof Error?a.message:"Convex error"}}return{error:"Convex client not available"}}var gn=5e3,k=class{constructor(e){this.interval=null;this.lastSentDraft="";this.currentDraft="";this.conversationId=e,this.startInterval()}track(e){this.currentDraft=e}clear(){this.currentDraft="",this.lastSentDraft!==""&&(this.lastSentDraft="",me(this.conversationId,""))}destroy(){this.interval&&(clearInterval(this.interval),this.interval=null)}startInterval(){this.interval=setInterval(()=>{this.sendIfChanged()},gn)}sendIfChanged(){this.currentDraft!==this.lastSentDraft&&(this.lastSentDraft=this.currentDraft,me(this.conversationId,this.currentDraft))}};var ve=!1,A=null,xe=!1;function It(){if(!A){let t=`${g.apiBaseUrl}/sounds/notification.mp3`;A=new Audio(t),A.volume=.5}return A}function hn(){if(ve)return;let t=It();t&&t.play().then(()=>{t.pause(),t.currentTime=0,ve=!0}).catch(()=>{})}function kt(){if(xe)return;xe=!0;let t=["click","touchstart","keydown"],e=()=>{hn(),t.forEach(n=>{document.removeEventListener(n,e)})};t.forEach(n=>{document.addEventListener(n,e,{once:!1})})}function Tt(){if(!mn())return;let t=It();t&&(t.currentTime=0,t.play().catch(()=>{}))}function mn(){return!(r.isOpen&&!document.hidden)}function Rt(){A=null,ve=!1,xe=!1}var V=class{constructor(e){this.callbacks=new Set;this.disposed=!1;this.unsubscribe=null;this.websiteId=e}connect(){this.disposed||!f()||(this.unsubscribe=Oe(this.websiteId,n=>{re(n),this.callbacks.forEach(i=>i(n))}))}on(e){this.callbacks.add(e)}off(e){this.callbacks.delete(e)}disconnect(){this.disposed=!0,this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null)}},W=class{constructor(e){this.callbacks=new Set;this.lastMessageCount=0;this.lastMessages=[];this.lastStatus=null;this.unsubscribe=null;this.conversationId=e,this.visitorId=r.visitorId}connect(){f()&&(this.unsubscribe=We(this.conversationId,this.visitorId,n=>{if(!n)return;let i=n.messages;if(i.length>this.lastMessageCount){let a=i.slice(this.lastMessageCount);for(let o of a)this.callbacks.forEach(s=>s({type:"message.new",data:o}))}for(let a of i){let o=this.lastMessages.find(s=>s.id===a.id);o&&(o.content!==a.content&&this.callbacks.forEach(s=>s({type:"message.update",data:{id:a.id,conversationId:this.conversationId,content:a.content,updatedAt:Date.now()}})),JSON.stringify(o.reactions)!==JSON.stringify(a.reactions)&&this.callbacks.forEach(s=>s({type:"message.reaction",data:{id:a.id,conversationId:this.conversationId,reactions:a.reactions??[]}})))}this.lastMessageCount=i.length,this.lastMessages=i,n.conversation.status!==this.lastStatus&&(this.lastStatus=n.conversation.status,this.callbacks.forEach(a=>a({type:"conversation.status",data:{conversationId:this.conversationId,status:n.conversation.status}})))}))}on(e){this.callbacks.add(e)}off(e){this.callbacks.delete(e)}disconnect(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=null)}},fn=3e4,B=null;async function T(t,e,n){if(f())try{await Ue(t,n)}catch{}}function Pt(t,e){O(),T(t,e,"online"),B=setInterval(()=>{T(t,e,"online")},fn)}function O(){B&&(clearInterval(B),B=null)}async function Lt(t){if(!f())return"away";try{let n=await He(t);return re(n),n}catch{return"away"}}var At=require("modern-screenshot");function vn(){return{url:window.location.href,title:document.title,referrer:document.referrer,viewport:{width:window.innerWidth,height:window.innerHeight},screenResolution:{width:window.screen.width,height:window.screen.height},userAgent:navigator.userAgent,language:navigator.language,timestamp:new Date().toISOString()}}async function Nt(){try{return await(0,At.domToJpeg)(document.body,{scale:.5,quality:.7,filter:e=>!(e instanceof HTMLElement&&e.id==="tchao-widget")})}catch{return JSON.stringify(vn())}}var R=class{constructor(){this.listeners={message:new Set,open:new Set,close:new Set,ready:new Set};this.showCallback=null;this.hideCallback=null;this.toggleCallback=null;this.openCallback=null;this.identifyCallback=null;this.configCallback=null}setCallbacks(e){this.showCallback=e.show,this.hideCallback=e.hide,this.toggleCallback=e.toggle,this.openCallback=e.open,this.identifyCallback=e.identify,this.configCallback=e.config}show(){this.showCallback?.()}hide(){this.hideCallback?.()}toggle(){this.toggleCallback?.()}open(){this.openCallback?.()}identify(e){this.identifyCallback?.(e)}config(e){this.configCallback?.(e)}on(e,n){this.listeners[e].add(n)}off(e,n){this.listeners[e].delete(n)}emit(e,...n){this.listeners[e].forEach(i=>{i(...n)})}};var q=!1,_=new Set,be="";function we(t){t!==be&&(be=t,_.forEach(e=>e(t)))}function $t(){we(window.location.href)}var zt=history.pushState.bind(history),Dt=history.replaceState.bind(history);function xn(t,e,n){zt(t,e,n),setTimeout(()=>we(window.location.href),0)}function bn(t,e,n){Dt(t,e,n),setTimeout(()=>we(window.location.href),0)}function Ht(t){return _.add(t),be=window.location.href,q||(q=!0,window.addEventListener("popstate",$t),history.pushState=xn,history.replaceState=bn),()=>{_.delete(t),_.size===0&&q&&(q=!1,window.removeEventListener("popstate",$t),history.pushState=zt,history.replaceState=Dt)}}function ye(){return window.location.href}var S=null,P=null,M=null,Ut=null,Ce=!1,j={cleanup:null},N={promise:null},E=new R;function yn(t){P&&P.disconnect(),P=new V(t),P.on(e=>{H(e)}),P.connect()}async function Bt(t){if(Ce)return E;let{websiteId:e,host:n}=t;if(!e)throw new Error("websiteId is required");n&&(g.apiBaseUrl=n),g.websiteId=e,Fe(e),tt(e);let i=await xt(e);if("error"in i)throw new Error(i.error);return Je(i.data),g.convexUrl&&ke(g.convexUrl),Lt(e).then(a=>{H(a)}),yn(e),E.setCallbacks({show:()=>$(!0),hide:()=>{$(!1),ee(!1)},toggle:Me,open:In,identify:An,config:a=>Ge(a)}),dt({onSend:Rn,onInput:Ln,onToggle:Me,onMaximize:kn,onImageSelect:Pn,onEmailSubmit:Nn,onEmailDismiss:$n,onReaction:zn}),kt(),U(le()),r.id&&En(),Ce=!0,E.emit("ready"),E}function Cn(){let t=g.convexUrl;return t?t.replace(".cloud",".site"):""}function Sn(){j.cleanup&&j.cleanup();let t=()=>{r.id&&(document.visibilityState==="hidden"?T(r.id,g.websiteId,"idle"):T(r.id,g.websiteId,"online"))},e=()=>{if(!r.id)return;let n=Cn();if(n){let i=JSON.stringify({conversationId:r.id,status:"away"}),a=new Blob([i],{type:"application/json"});navigator.sendBeacon(`${n}/presence/visitor`,a)}};document.addEventListener("visibilitychange",t),window.addEventListener("beforeunload",e),j.cleanup=()=>{document.removeEventListener("visibilitychange",t),window.removeEventListener("beforeunload",e)}}async function En(){if(!r.id||S)return;let t=await he(r.id,r.visitorId);if("error"in t){ie();return}ae(t.data.messages),Se(r.id),Ee(r.id),M=new k(r.id)}async function Mn(){if(r.id){if(S)return z(r.messages),r.id;let e=await he(r.id,r.visitorId);return"error"in e?(ie(),z([]),null):(ae(e.data.messages),z(e.data.messages),Se(r.id),Ee(r.id),M=new k(r.id),r.id)}let t=await bt(g.websiteId,r.visitorId,ye(),Dn());return"error"in t?null:(Xe(t.data.conversationId),se(t.data.lastVisitorMessageAt??null),Se(t.data.conversationId),Ee(t.data.conversationId),M=new k(t.data.conversationId),t.data.conversationId)}async function K(){return N.promise||(N.promise=Mn().finally(()=>{N.promise=null})),N.promise}function Se(t){S&&(S.disconnect(),O()),S=new W(t),S.on(e=>{if(e.type==="message.new")if(e.data.senderType==="VISITOR"){let n=r.messages.find(i=>i.id.startsWith("temp_")&&i.content===e.data.content);if(n){let i=n.id;Qe(i,e.data.id),vt(i,e.data.id)}}else ue(),Q(e.data),pe(e.data),E.emit("message",e.data),(e.data.senderType==="AGENT"||e.data.senderType==="AI")&&(Tt(),r.isOpen?r.id&&fe(r.id,r.visitorId):(nt(e.data.id),U(le())));e.type==="agent.draft"&&(e.data.draft?ut():ue()),e.type==="presence.agent"&&H(e.data.status),e.type==="message.reaction"&&mt(e.data.id,e.data.reactions),e.type==="message.update"&&ft(e.data.id,e.data.content)}),S.connect(),Pt(t,g.websiteId),Sn()}function Ee(t){Ut=Ht(e=>{Et(t,e)})}function Me(){let t=!r.isOpen;ee(t),$(t),t?(it(),U(0),E.emit("open"),r.id&&(K(),fe(r.id,r.visitorId))):E.emit("close")}function In(){r.isOpen||Me()}function kn(){let t=!te;ne(t),ht(t)}function Tn(){let t=r.lastVisitorMessageAt;return t===null?!0:Date.now()-t>1728e5}async function Rn(t,e){let n=r.messages.length===0,i=Tn(),o=!st()&&(n||i),s={id:`temp_${Date.now()}`,content:t,senderType:"VISITOR",senderId:r.visitorId,image:e??null,timestamp:Date.now(),status:"sending"};Q(s),pe(s);let c=await K();if(!c){Ye(s.id),D(s.id,"failed");return}M?.clear();let d=null;o&&(d=await Nt(),d&&rt());try{await wt(c,r.visitorId,t,d,ye(),e),Z(s.id,"sent"),D(s.id,"sent"),se(Date.now())}catch{Z(s.id,"failed"),D(s.id,"failed")}n&&!r.emailCaptured&>()}async function Pn(t){let e=await yt(t);return"error"in e?null:e.data.url}function Ln(t){r.id&&M&&M.track(t)}async function An(t){let e=await K();e&&await Ct(e,r.visitorId,t)}async function Nn(t){let e=await K();if(!e)return;"error"in await St(e,r.visitorId,t)||oe(!0)}function $n(){oe(!0)}async function zn(t,e){await Mt(t,e,r.visitorId)}function Dn(){return{userAgent:navigator.userAgent,language:navigator.language,screenWidth:window.screen.width,screenHeight:window.screen.height,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone}}function Vt(){r.id&&T(r.id,g.websiteId,"away"),O(),j.cleanup?.(),S?.disconnect(),P?.disconnect(),M?.destroy(),Ut?.(),Rt(),Te(),pt(),ne(!1),Ce=!1}async function Wt(t){if(!t.websiteId)throw new Error("websiteId is required");let e=await Bt(t);return Object.assign(e,{destroy:Vt})}var Ot={init:Wt};var Hn=Ot;0&&(module.exports={Tchao,TchaoSDK,init});
|
|
1
|
+
"use strict";var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},f=(e,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of h(o))!l.call(e,r)&&r!==t&&c(e,r,{get:()=>o[r],enumerable:!(i=g(o,r))||i.enumerable});return e};var u=e=>f(c({},"__esModule",{value:!0}),e);var y={};p(y,{Tchao:()=>w,default:()=>v,init:()=>s});module.exports=u(y);var m="https://tchao.app/widget.js",d=!1,a=null;function T(e,o){return a||(a=new Promise((t,i)=>{if(d&&window.Tchao){t();return}if(document.querySelector("script[data-tchao-widget]")){d=!0,t();return}let n=document.createElement("script");n.src=o?`${o}/widget.js`:m,n.async=!0,n.dataset.websiteId=e,n.dataset.tchaoWidget="true",n.onload=()=>{d=!0,t()},n.onerror=()=>{i(new Error("Failed to load Tchao widget script"))},document.head.appendChild(n)}),a)}async function s(e){if(!e.websiteId)throw new Error("websiteId is required");await T(e.websiteId,e.host);let o=0;for(;!window.Tchao&&o<50;)await new Promise(t=>setTimeout(t,100)),o++;if(!window.Tchao)throw new Error("Tchao widget failed to initialize");return{show:()=>window.Tchao?.show(),hide:()=>window.Tchao?.hide(),toggle:()=>window.Tchao?.toggle(),open:()=>window.Tchao?.open(),identify:t=>window.Tchao?.identify(t),config:t=>window.Tchao?.config(t),on:(t,i)=>window.Tchao?.on(t,i),off:(t,i)=>window.Tchao?.off(t,i),destroy:()=>{let t=document.querySelector("script[data-tchao-widget]");t&&t.remove();let i=document.getElementById("tchao-widget");i&&i.remove(),d=!1,a=null}}}var w={init:s},v=w;0&&(module.exports={Tchao,init});
|
|
1441
2
|
//# sourceMappingURL=npm.js.map
|