@developpement/tp-chatbot-widget 0.0.9 → 0.0.10
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/package.json +1 -1
- package/src/chatbot.css +254 -39
- package/src/chatbot.js +410 -296
package/package.json
CHANGED
package/src/chatbot.css
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
.tp-chatbot-host {
|
|
2
2
|
position: fixed;
|
|
3
3
|
bottom: 24px;
|
|
4
|
-
right: 24px;
|
|
5
4
|
z-index: 9999;
|
|
6
5
|
font-family:
|
|
7
6
|
'Segoe UI',
|
|
@@ -10,6 +9,8 @@
|
|
|
10
9
|
sans-serif;
|
|
11
10
|
}
|
|
12
11
|
|
|
12
|
+
/* ─── Bubble ─────────────────────────────────────────────────────────────── */
|
|
13
|
+
|
|
13
14
|
.tp-chatbot-bubble {
|
|
14
15
|
width: 56px;
|
|
15
16
|
height: 56px;
|
|
@@ -20,15 +21,16 @@
|
|
|
20
21
|
justify-content: center;
|
|
21
22
|
cursor: pointer;
|
|
22
23
|
box-shadow: 0 4px 16px rgba(123, 31, 162, 0.4);
|
|
23
|
-
font-size: 24px;
|
|
24
24
|
transition: transform 0.2s;
|
|
25
25
|
margin-left: auto;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.tp-chatbot-bubble:hover {
|
|
29
|
-
transform: scale(1.
|
|
29
|
+
transform: scale(1.08);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
/* ─── Window ─────────────────────────────────────────────────────────────── */
|
|
33
|
+
|
|
32
34
|
.tp-chatbot-window {
|
|
33
35
|
position: absolute;
|
|
34
36
|
bottom: 70px;
|
|
@@ -52,16 +54,20 @@
|
|
|
52
54
|
pointer-events: all;
|
|
53
55
|
}
|
|
54
56
|
|
|
57
|
+
/* ─── Header ─────────────────────────────────────────────────────────────── */
|
|
58
|
+
|
|
55
59
|
.tp-chatbot-header {
|
|
56
60
|
background: linear-gradient(135deg, #7b1fa2, #9c27b0);
|
|
57
|
-
padding: 14px
|
|
61
|
+
padding: 12px 14px;
|
|
58
62
|
display: flex;
|
|
59
63
|
align-items: center;
|
|
64
|
+
gap: 4px;
|
|
65
|
+
flex-shrink: 0;
|
|
60
66
|
}
|
|
61
67
|
|
|
62
68
|
.tp-chatbot-avatar {
|
|
63
|
-
width:
|
|
64
|
-
height:
|
|
69
|
+
width: 34px;
|
|
70
|
+
height: 34px;
|
|
65
71
|
border-radius: 50%;
|
|
66
72
|
background: white;
|
|
67
73
|
display: flex;
|
|
@@ -69,22 +75,53 @@
|
|
|
69
75
|
justify-content: center;
|
|
70
76
|
font-weight: 700;
|
|
71
77
|
color: #7b1fa2;
|
|
72
|
-
font-size:
|
|
73
|
-
margin-right:
|
|
78
|
+
font-size: 15px;
|
|
79
|
+
margin-right: 8px;
|
|
80
|
+
flex-shrink: 0;
|
|
74
81
|
}
|
|
75
82
|
|
|
76
83
|
.tp-chatbot-title {
|
|
77
84
|
color: white;
|
|
78
85
|
font-weight: 700;
|
|
79
|
-
font-size:
|
|
86
|
+
font-size: 13px;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
overflow: hidden;
|
|
89
|
+
text-overflow: ellipsis;
|
|
80
90
|
}
|
|
81
91
|
|
|
82
92
|
.tp-chatbot-subtitle {
|
|
83
|
-
color: rgba(255, 255, 255, 0.
|
|
93
|
+
color: rgba(255, 255, 255, 0.8);
|
|
84
94
|
font-size: 11px;
|
|
85
|
-
margin-top:
|
|
95
|
+
margin-top: 1px;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Header icon buttons */
|
|
101
|
+
.tp-header-btn {
|
|
102
|
+
background: none;
|
|
103
|
+
border: none;
|
|
104
|
+
color: white;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
padding: 5px;
|
|
107
|
+
border-radius: 6px;
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
opacity: 0.85;
|
|
112
|
+
transition:
|
|
113
|
+
opacity 0.15s,
|
|
114
|
+
background 0.15s;
|
|
115
|
+
flex-shrink: 0;
|
|
86
116
|
}
|
|
87
117
|
|
|
118
|
+
.tp-header-btn:hover {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
background: rgba(255, 255, 255, 0.15);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ─── Messages area ──────────────────────────────────────────────────────── */
|
|
124
|
+
|
|
88
125
|
.tp-chatbot-messages {
|
|
89
126
|
flex: 1;
|
|
90
127
|
overflow-y: auto;
|
|
@@ -93,15 +130,22 @@
|
|
|
93
130
|
flex-direction: column;
|
|
94
131
|
gap: 10px;
|
|
95
132
|
background: #f5f5f7;
|
|
133
|
+
scroll-behavior: smooth;
|
|
96
134
|
}
|
|
97
135
|
|
|
98
|
-
.tp-chatbot-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
136
|
+
.tp-chatbot-messages::-webkit-scrollbar {
|
|
137
|
+
width: 4px;
|
|
138
|
+
}
|
|
139
|
+
.tp-chatbot-messages::-webkit-scrollbar-track {
|
|
140
|
+
background: transparent;
|
|
141
|
+
}
|
|
142
|
+
.tp-chatbot-messages::-webkit-scrollbar-thumb {
|
|
143
|
+
background: #ddd;
|
|
144
|
+
border-radius: 4px;
|
|
103
145
|
}
|
|
104
146
|
|
|
147
|
+
/* ─── Message bubbles ────────────────────────────────────────────────────── */
|
|
148
|
+
|
|
105
149
|
.tp-chatbot-message {
|
|
106
150
|
display: flex;
|
|
107
151
|
}
|
|
@@ -117,12 +161,12 @@
|
|
|
117
161
|
}
|
|
118
162
|
|
|
119
163
|
.tp-chatbot-bubble-msg {
|
|
120
|
-
max-width:
|
|
121
|
-
padding: 10px
|
|
164
|
+
max-width: 82%;
|
|
165
|
+
padding: 10px 13px;
|
|
122
166
|
border-radius: 16px;
|
|
123
167
|
font-size: 13px;
|
|
124
168
|
line-height: 1.5;
|
|
125
|
-
box-shadow: 0 1px
|
|
169
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
126
170
|
}
|
|
127
171
|
|
|
128
172
|
.tp-chatbot-message.user .tp-chatbot-bubble-msg {
|
|
@@ -149,8 +193,9 @@
|
|
|
149
193
|
background: #e8f5e9;
|
|
150
194
|
color: #2e7d32;
|
|
151
195
|
border: 1px solid #c8e6c9;
|
|
152
|
-
border-radius:
|
|
196
|
+
border-radius: 10px;
|
|
153
197
|
font-size: 12px;
|
|
198
|
+
max-width: 90%;
|
|
154
199
|
}
|
|
155
200
|
|
|
156
201
|
.tp-chatbot-role {
|
|
@@ -158,21 +203,26 @@
|
|
|
158
203
|
font-weight: 600;
|
|
159
204
|
margin-bottom: 4px;
|
|
160
205
|
color: #7b1fa2;
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
161
208
|
}
|
|
162
209
|
|
|
163
210
|
.tp-chatbot-message.user .tp-chatbot-role {
|
|
164
|
-
color: rgba(255, 255, 255, 0.
|
|
211
|
+
color: rgba(255, 255, 255, 0.85);
|
|
212
|
+
justify-content: flex-end;
|
|
165
213
|
}
|
|
166
214
|
|
|
215
|
+
/* ─── Typing indicator ───────────────────────────────────────────────────── */
|
|
216
|
+
|
|
167
217
|
.tp-chatbot-typing {
|
|
168
218
|
display: flex;
|
|
169
219
|
gap: 4px;
|
|
170
|
-
padding: 4px
|
|
220
|
+
padding: 4px 2px;
|
|
171
221
|
}
|
|
172
222
|
|
|
173
223
|
.tp-chatbot-typing span {
|
|
174
|
-
width:
|
|
175
|
-
height:
|
|
224
|
+
width: 7px;
|
|
225
|
+
height: 7px;
|
|
176
226
|
border-radius: 50%;
|
|
177
227
|
background: #7b1fa2;
|
|
178
228
|
animation: tp-typing 1.2s infinite;
|
|
@@ -193,20 +243,23 @@
|
|
|
193
243
|
opacity: 0.4;
|
|
194
244
|
}
|
|
195
245
|
30% {
|
|
196
|
-
transform: translateY(-
|
|
246
|
+
transform: translateY(-5px);
|
|
197
247
|
opacity: 1;
|
|
198
248
|
}
|
|
199
249
|
}
|
|
200
250
|
|
|
251
|
+
/* ─── Agent bar ──────────────────────────────────────────────────────────── */
|
|
252
|
+
|
|
201
253
|
.tp-chatbot-agent-bar {
|
|
202
|
-
padding: 8px
|
|
203
|
-
border-top: 1px solid #
|
|
254
|
+
padding: 8px 14px;
|
|
255
|
+
border-top: 1px solid #f0ecf8;
|
|
204
256
|
background: white;
|
|
257
|
+
flex-shrink: 0;
|
|
205
258
|
}
|
|
206
259
|
|
|
207
260
|
.tp-chatbot-agent-btn {
|
|
208
261
|
width: 100%;
|
|
209
|
-
padding:
|
|
262
|
+
padding: 9px;
|
|
210
263
|
background: none;
|
|
211
264
|
border: 1.5px solid #7b1fa2;
|
|
212
265
|
border-radius: 8px;
|
|
@@ -214,7 +267,10 @@
|
|
|
214
267
|
font-size: 13px;
|
|
215
268
|
font-weight: 600;
|
|
216
269
|
cursor: pointer;
|
|
217
|
-
transition: all 0.
|
|
270
|
+
transition: all 0.18s;
|
|
271
|
+
display: flex;
|
|
272
|
+
align-items: center;
|
|
273
|
+
justify-content: center;
|
|
218
274
|
}
|
|
219
275
|
|
|
220
276
|
.tp-chatbot-agent-btn:hover {
|
|
@@ -222,18 +278,40 @@
|
|
|
222
278
|
color: white;
|
|
223
279
|
}
|
|
224
280
|
|
|
281
|
+
/* ─── Input bar ──────────────────────────────────────────────────────────── */
|
|
282
|
+
|
|
225
283
|
.tp-chatbot-input-bar {
|
|
226
|
-
padding: 12px
|
|
227
|
-
border-top: 1px solid #
|
|
284
|
+
padding: 10px 12px;
|
|
285
|
+
border-top: 1px solid #f0ecf8;
|
|
228
286
|
background: white;
|
|
229
287
|
display: flex;
|
|
230
|
-
gap:
|
|
288
|
+
gap: 6px;
|
|
231
289
|
align-items: flex-end;
|
|
290
|
+
flex-shrink: 0;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.tp-attach-btn {
|
|
294
|
+
width: 34px;
|
|
295
|
+
height: 34px;
|
|
296
|
+
border-radius: 8px;
|
|
297
|
+
border: none;
|
|
298
|
+
background: none;
|
|
299
|
+
cursor: pointer;
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
justify-content: center;
|
|
303
|
+
color: #7b1fa2;
|
|
304
|
+
transition: background 0.15s;
|
|
305
|
+
flex-shrink: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.tp-attach-btn:hover {
|
|
309
|
+
background: #f0ecf8;
|
|
232
310
|
}
|
|
233
311
|
|
|
234
312
|
.tp-chatbot-input {
|
|
235
313
|
flex: 1;
|
|
236
|
-
padding:
|
|
314
|
+
padding: 9px 12px;
|
|
237
315
|
border-radius: 10px;
|
|
238
316
|
border: 1.5px solid #ede8f5;
|
|
239
317
|
font-size: 13px;
|
|
@@ -242,6 +320,9 @@
|
|
|
242
320
|
color: #1a1a2e;
|
|
243
321
|
background: #fafafa;
|
|
244
322
|
transition: border 0.2s;
|
|
323
|
+
min-height: 36px;
|
|
324
|
+
max-height: 100px;
|
|
325
|
+
overflow-y: auto;
|
|
245
326
|
}
|
|
246
327
|
|
|
247
328
|
.tp-chatbot-input:focus {
|
|
@@ -250,18 +331,18 @@
|
|
|
250
331
|
}
|
|
251
332
|
|
|
252
333
|
.tp-chatbot-send {
|
|
253
|
-
width:
|
|
254
|
-
height:
|
|
334
|
+
width: 36px;
|
|
335
|
+
height: 36px;
|
|
255
336
|
border-radius: 50%;
|
|
256
337
|
background: linear-gradient(135deg, #7b1fa2, #9c27b0);
|
|
257
338
|
color: white;
|
|
258
339
|
border: none;
|
|
259
|
-
font-size: 16px;
|
|
260
340
|
cursor: pointer;
|
|
261
341
|
display: flex;
|
|
262
342
|
align-items: center;
|
|
263
343
|
justify-content: center;
|
|
264
344
|
transition: opacity 0.2s;
|
|
345
|
+
flex-shrink: 0;
|
|
265
346
|
}
|
|
266
347
|
|
|
267
348
|
.tp-chatbot-send:disabled {
|
|
@@ -272,17 +353,138 @@
|
|
|
272
353
|
.tp-chatbot-send:hover:not(:disabled) {
|
|
273
354
|
opacity: 0.85;
|
|
274
355
|
}
|
|
356
|
+
|
|
357
|
+
/* ─── Close bar ──────────────────────────────────────────────────────────── */
|
|
358
|
+
|
|
359
|
+
.tp-close-btn {
|
|
360
|
+
background: none;
|
|
361
|
+
border: 1px solid #e5e7eb;
|
|
362
|
+
border-radius: 8px;
|
|
363
|
+
padding: 6px 18px;
|
|
364
|
+
font-size: 12px;
|
|
365
|
+
color: #9ca3af;
|
|
366
|
+
cursor: pointer;
|
|
367
|
+
font-weight: 600;
|
|
368
|
+
font-family: inherit;
|
|
369
|
+
transition:
|
|
370
|
+
border-color 0.15s,
|
|
371
|
+
color 0.15s;
|
|
372
|
+
display: inline-flex;
|
|
373
|
+
align-items: center;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.tp-close-btn:hover {
|
|
377
|
+
border-color: #d1d5db;
|
|
378
|
+
color: #6b7280;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/* ─── Conversation list ──────────────────────────────────────────────────── */
|
|
382
|
+
|
|
383
|
+
.tp-conv-item {
|
|
384
|
+
display: flex;
|
|
385
|
+
justify-content: space-between;
|
|
386
|
+
align-items: center;
|
|
387
|
+
padding: 13px 16px;
|
|
388
|
+
border-bottom: 1px solid #f5f5f5;
|
|
389
|
+
cursor: pointer;
|
|
390
|
+
transition: background 0.15s;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.tp-conv-item:hover {
|
|
394
|
+
background: #f9f5ff;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.tp-conv-new-btn {
|
|
398
|
+
width: 100%;
|
|
399
|
+
padding: 12px;
|
|
400
|
+
color: white;
|
|
401
|
+
border: none;
|
|
402
|
+
border-radius: 10px;
|
|
403
|
+
font-size: 13px;
|
|
404
|
+
font-weight: 700;
|
|
405
|
+
cursor: pointer;
|
|
406
|
+
display: flex;
|
|
407
|
+
align-items: center;
|
|
408
|
+
justify-content: center;
|
|
409
|
+
gap: 8px;
|
|
410
|
+
font-family: inherit;
|
|
411
|
+
transition: opacity 0.2s;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.tp-conv-new-btn:hover {
|
|
415
|
+
opacity: 0.9;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/* ─── Feedback buttons ───────────────────────────────────────────────────── */
|
|
419
|
+
|
|
420
|
+
.tp-feedback-bar {
|
|
421
|
+
display: flex;
|
|
422
|
+
gap: 4px;
|
|
423
|
+
margin-top: 7px;
|
|
424
|
+
padding-top: 6px;
|
|
425
|
+
border-top: 1px solid #f0ecf8;
|
|
426
|
+
justify-content: flex-end;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.tp-feedback-btn {
|
|
430
|
+
background: none;
|
|
431
|
+
border: 1px solid #e8e0f0;
|
|
432
|
+
border-radius: 6px;
|
|
433
|
+
padding: 3px 8px;
|
|
434
|
+
cursor: pointer;
|
|
435
|
+
display: flex;
|
|
436
|
+
align-items: center;
|
|
437
|
+
color: #aaa;
|
|
438
|
+
transition:
|
|
439
|
+
color 0.15s,
|
|
440
|
+
border-color 0.15s,
|
|
441
|
+
transform 0.1s;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.tp-feedback-btn[data-rating='positive']:hover {
|
|
445
|
+
color: #22c55e;
|
|
446
|
+
border-color: #22c55e;
|
|
447
|
+
transform: scale(1.1);
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.tp-feedback-btn[data-rating='negative']:hover {
|
|
451
|
+
color: #ef4444;
|
|
452
|
+
border-color: #ef4444;
|
|
453
|
+
transform: scale(1.1);
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/* ─── CSAT buttons ───────────────────────────────────────────────────────── */
|
|
457
|
+
|
|
458
|
+
.tp-csat-btn {
|
|
459
|
+
padding: 10px 22px;
|
|
460
|
+
border-radius: 8px;
|
|
461
|
+
background: white;
|
|
462
|
+
font-size: 13px;
|
|
463
|
+
cursor: pointer;
|
|
464
|
+
font-weight: 700;
|
|
465
|
+
display: inline-flex;
|
|
466
|
+
align-items: center;
|
|
467
|
+
justify-content: center;
|
|
468
|
+
transition: all 0.15s;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.tp-csat-btn:hover {
|
|
472
|
+
transform: scale(1.05);
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
/* ─── Markdown content ───────────────────────────────────────────────────── */
|
|
476
|
+
|
|
275
477
|
.tp-chatbot-markdown h1,
|
|
276
478
|
.tp-chatbot-markdown h2,
|
|
277
479
|
.tp-chatbot-markdown h3 {
|
|
278
|
-
font-size:
|
|
480
|
+
font-size: 13px;
|
|
279
481
|
font-weight: 700;
|
|
280
|
-
margin:
|
|
482
|
+
margin: 8px 0 3px;
|
|
281
483
|
color: #1a1a2e;
|
|
282
484
|
}
|
|
283
485
|
|
|
284
486
|
.tp-chatbot-markdown p {
|
|
285
|
-
margin:
|
|
487
|
+
margin: 3px 0;
|
|
286
488
|
}
|
|
287
489
|
|
|
288
490
|
.tp-chatbot-markdown ul,
|
|
@@ -302,3 +504,16 @@
|
|
|
302
504
|
.tp-chatbot-markdown em {
|
|
303
505
|
font-style: italic;
|
|
304
506
|
}
|
|
507
|
+
|
|
508
|
+
.tp-chatbot-markdown a {
|
|
509
|
+
color: #7b1fa2;
|
|
510
|
+
text-decoration: underline;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.tp-chatbot-markdown code {
|
|
514
|
+
background: #f0ecf8;
|
|
515
|
+
padding: 1px 5px;
|
|
516
|
+
border-radius: 4px;
|
|
517
|
+
font-size: 12px;
|
|
518
|
+
font-family: monospace;
|
|
519
|
+
}
|