@salesforcedevs/docs-components 0.0.33-chat → 0.0.35-chat
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
CHANGED
|
Binary file
|
|
@@ -37,58 +37,47 @@ body.chat-closed .global-header {
|
|
|
37
37
|
position: fixed;
|
|
38
38
|
bottom: 20px;
|
|
39
39
|
right: 20px;
|
|
40
|
-
|
|
41
|
-
height: 64px;
|
|
42
|
-
border-radius: 50%;
|
|
43
|
-
background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
|
|
40
|
+
background: transparent;
|
|
44
41
|
color: white;
|
|
45
42
|
border: none;
|
|
46
43
|
cursor: pointer;
|
|
47
|
-
box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
|
|
48
44
|
z-index: 1001;
|
|
49
45
|
display: flex;
|
|
50
46
|
align-items: center;
|
|
51
47
|
justify-content: center;
|
|
52
48
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
53
49
|
animation: pulse 3s infinite;
|
|
50
|
+
padding: 0;
|
|
54
51
|
}
|
|
55
52
|
|
|
56
|
-
.chat-trigger-button:hover {
|
|
57
|
-
|
|
58
|
-
transform: scale(1.05);
|
|
59
|
-
box-shadow: 0 12px 32px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
|
|
53
|
+
.chat-trigger-button:hover .chat-gif {
|
|
54
|
+
transform: scale(1.1);
|
|
60
55
|
}
|
|
61
56
|
|
|
62
|
-
.chat-trigger-button:active {
|
|
57
|
+
.chat-trigger-button:active .chat-gif {
|
|
63
58
|
transform: scale(0.95);
|
|
64
59
|
}
|
|
65
60
|
|
|
66
|
-
.chat-
|
|
67
|
-
width:
|
|
68
|
-
height:
|
|
69
|
-
|
|
61
|
+
.chat-gif {
|
|
62
|
+
width: 155px;
|
|
63
|
+
height: 218px;
|
|
64
|
+
object-fit: cover;
|
|
65
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
70
66
|
}
|
|
71
67
|
|
|
72
|
-
|
|
73
|
-
font-size: 10px;
|
|
74
|
-
font-weight: 600;
|
|
75
|
-
text-transform: uppercase;
|
|
76
|
-
letter-spacing: 0.5px;
|
|
77
|
-
margin-top: 20px;
|
|
78
|
-
opacity: 0.9;
|
|
79
|
-
}
|
|
68
|
+
|
|
80
69
|
|
|
81
70
|
@keyframes pulse {
|
|
82
71
|
0% {
|
|
83
|
-
|
|
72
|
+
transform: scale(1);
|
|
84
73
|
}
|
|
85
74
|
|
|
86
75
|
70% {
|
|
87
|
-
|
|
76
|
+
transform: scale(1.05);
|
|
88
77
|
}
|
|
89
78
|
|
|
90
79
|
100% {
|
|
91
|
-
|
|
80
|
+
transform: scale(1);
|
|
92
81
|
}
|
|
93
82
|
}
|
|
94
83
|
|
|
@@ -117,7 +106,7 @@ body.chat-closed .global-header {
|
|
|
117
106
|
|
|
118
107
|
.chat-header {
|
|
119
108
|
background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
|
|
120
|
-
padding:
|
|
109
|
+
padding: 18px 24px;
|
|
121
110
|
border-bottom: 1px solid rgb(1 118 211 / 20%);
|
|
122
111
|
display: flex;
|
|
123
112
|
align-items: center;
|
|
@@ -204,6 +193,7 @@ body.chat-closed .global-header {
|
|
|
204
193
|
display: flex;
|
|
205
194
|
align-items: flex-start;
|
|
206
195
|
animation: message-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
196
|
+
gap: 12px;
|
|
207
197
|
}
|
|
208
198
|
|
|
209
199
|
.message-wrapper[data-sender="user"] {
|
|
@@ -214,6 +204,124 @@ body.chat-closed .global-header {
|
|
|
214
204
|
justify-content: flex-start;
|
|
215
205
|
}
|
|
216
206
|
|
|
207
|
+
/* Avatar styling */
|
|
208
|
+
.message-avatar-wrapper {
|
|
209
|
+
flex-shrink: 0;
|
|
210
|
+
display: flex;
|
|
211
|
+
align-items: flex-start;
|
|
212
|
+
margin-top: 2px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* Hide avatar for user messages */
|
|
216
|
+
.message-wrapper[data-sender="user"] .message-avatar-wrapper {
|
|
217
|
+
display: none;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* Show avatar for assistant messages */
|
|
221
|
+
.message-wrapper[data-sender="assistant"] .message-avatar-wrapper {
|
|
222
|
+
display: flex;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.avatar-container {
|
|
226
|
+
width: 36px;
|
|
227
|
+
height: 36px;
|
|
228
|
+
background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
|
|
229
|
+
border-radius: 50%;
|
|
230
|
+
display: flex;
|
|
231
|
+
align-items: center;
|
|
232
|
+
justify-content: center;
|
|
233
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
|
234
|
+
position: relative;
|
|
235
|
+
overflow: hidden;
|
|
236
|
+
animation: thinking-avatar-pulse 3s ease-in-out infinite;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.avatar-container::before {
|
|
240
|
+
content: "";
|
|
241
|
+
position: absolute;
|
|
242
|
+
inset: 0;
|
|
243
|
+
background: linear-gradient(135deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 10%) 100%);
|
|
244
|
+
border-radius: 50%;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.avatar-icon {
|
|
248
|
+
width: 32px;
|
|
249
|
+
height: 32px;
|
|
250
|
+
color: white;
|
|
251
|
+
position: relative;
|
|
252
|
+
z-index: 1;
|
|
253
|
+
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 15%));
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Thinking Bot SVG Animations */
|
|
257
|
+
.thinking-body {
|
|
258
|
+
animation: thinking-breathe 2s ease-in-out infinite;
|
|
259
|
+
transform-origin: center;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.thinking-smile {
|
|
263
|
+
animation: thinking-smile-animation 3s ease-in-out infinite;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.thinking-eye {
|
|
267
|
+
animation: think-blink 6s infinite;
|
|
268
|
+
transform-origin: center;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
@keyframes thinking-avatar-pulse {
|
|
272
|
+
0%, 100% {
|
|
273
|
+
transform: scale(1);
|
|
274
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
50% {
|
|
278
|
+
transform: scale(1.08);
|
|
279
|
+
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
@keyframes thinking-breathe {
|
|
284
|
+
0%, 100% {
|
|
285
|
+
transform: scale(1);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
50% {
|
|
289
|
+
transform: scale(1.05);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
@keyframes thinking-smile-animation {
|
|
294
|
+
0%, 100% {
|
|
295
|
+
transform: translateY(0);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
50% {
|
|
299
|
+
transform: translateY(-2px);
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
@keyframes think-blink {
|
|
304
|
+
0%, 85%, 100% {
|
|
305
|
+
transform: scaleY(1);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
90% {
|
|
309
|
+
transform: scaleY(0.6);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
92% {
|
|
313
|
+
transform: scaleY(0.2);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
94% {
|
|
317
|
+
transform: scaleY(0.6);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
96% {
|
|
321
|
+
transform: scaleY(1);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
217
325
|
.message-content {
|
|
218
326
|
max-width: 80%;
|
|
219
327
|
display: flex;
|
|
@@ -399,21 +507,16 @@ body.chat-closed .global-header {
|
|
|
399
507
|
/* Responsive design */
|
|
400
508
|
@media (max-width: 768px) {
|
|
401
509
|
.chat-trigger-button {
|
|
402
|
-
width: 56px;
|
|
403
|
-
height: 56px;
|
|
404
510
|
bottom: 16px;
|
|
405
511
|
right: 16px;
|
|
406
512
|
}
|
|
407
513
|
|
|
408
|
-
.chat-
|
|
409
|
-
width:
|
|
410
|
-
height:
|
|
514
|
+
.chat-gif {
|
|
515
|
+
width: 56px;
|
|
516
|
+
height: 56px;
|
|
411
517
|
}
|
|
412
518
|
|
|
413
|
-
|
|
414
|
-
font-size: 8px;
|
|
415
|
-
margin-top: 18px;
|
|
416
|
-
}
|
|
519
|
+
|
|
417
520
|
|
|
418
521
|
.chat-container {
|
|
419
522
|
width: 100%;
|
|
@@ -444,25 +547,34 @@ body.chat-closed .global-header {
|
|
|
444
547
|
.message-content {
|
|
445
548
|
max-width: 85%;
|
|
446
549
|
}
|
|
550
|
+
|
|
551
|
+
.avatar-container {
|
|
552
|
+
width: 32px;
|
|
553
|
+
height: 32px;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.avatar-icon {
|
|
557
|
+
width: 28px;
|
|
558
|
+
height: 28px;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.message-wrapper {
|
|
562
|
+
gap: 10px;
|
|
563
|
+
}
|
|
447
564
|
}
|
|
448
565
|
|
|
449
566
|
@media (max-width: 480px) {
|
|
450
567
|
.chat-trigger-button {
|
|
451
|
-
width: 45px;
|
|
452
|
-
height: 45px;
|
|
453
568
|
bottom: 10px;
|
|
454
569
|
right: 10px;
|
|
455
570
|
}
|
|
456
571
|
|
|
457
|
-
.chat-
|
|
458
|
-
width:
|
|
459
|
-
height:
|
|
572
|
+
.chat-gif {
|
|
573
|
+
width: 48px;
|
|
574
|
+
height: 48px;
|
|
460
575
|
}
|
|
461
576
|
|
|
462
|
-
|
|
463
|
-
font-size: 7px;
|
|
464
|
-
margin-top: 16px;
|
|
465
|
-
}
|
|
577
|
+
|
|
466
578
|
|
|
467
579
|
.chat-container {
|
|
468
580
|
width: 100%;
|
|
@@ -479,6 +591,21 @@ body.chat-closed .global-header {
|
|
|
479
591
|
.chat-input-area {
|
|
480
592
|
padding: 12px;
|
|
481
593
|
}
|
|
594
|
+
|
|
595
|
+
.avatar-container {
|
|
596
|
+
width: 28px;
|
|
597
|
+
height: 28px;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.avatar-icon {
|
|
601
|
+
width: 24px;
|
|
602
|
+
height: 24px;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.message-wrapper {
|
|
606
|
+
gap: 8px;
|
|
607
|
+
margin-bottom: 16px;
|
|
608
|
+
}
|
|
482
609
|
}
|
|
483
610
|
|
|
484
611
|
/* Accessibility improvements */
|
|
@@ -494,6 +621,23 @@ body.chat-closed .global-header {
|
|
|
494
621
|
.chat-messages {
|
|
495
622
|
scroll-behavior: auto;
|
|
496
623
|
}
|
|
624
|
+
|
|
625
|
+
.avatar-container {
|
|
626
|
+
animation: none;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
/* Disable all thinking bot animations for reduced motion users */
|
|
630
|
+
.thinking-body {
|
|
631
|
+
animation: none !important;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.thinking-smile {
|
|
635
|
+
animation: none !important;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.thinking-eye {
|
|
639
|
+
animation: none !important;
|
|
640
|
+
}
|
|
497
641
|
}
|
|
498
642
|
|
|
499
643
|
/* High contrast mode support */
|
|
@@ -6,19 +6,11 @@
|
|
|
6
6
|
onclick={handleOpenClick}
|
|
7
7
|
aria-label="Open chat"
|
|
8
8
|
>
|
|
9
|
-
<
|
|
10
|
-
class="chat-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
>
|
|
15
|
-
<path
|
|
16
|
-
stroke-linecap="round"
|
|
17
|
-
stroke-linejoin="round"
|
|
18
|
-
stroke-width="2"
|
|
19
|
-
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
20
|
-
/>
|
|
21
|
-
</svg>
|
|
9
|
+
<img
|
|
10
|
+
class="chat-gif"
|
|
11
|
+
src="/hi_bot.gif"
|
|
12
|
+
alt="Hi Bot"
|
|
13
|
+
/>
|
|
22
14
|
<!-- <span class="chat-trigger-text">Chat</span> -->
|
|
23
15
|
</button>
|
|
24
16
|
</template>
|
|
@@ -77,6 +69,45 @@
|
|
|
77
69
|
class="message-wrapper"
|
|
78
70
|
data-sender={message.sender}
|
|
79
71
|
>
|
|
72
|
+
<!-- AI Avatar for assistant messages only -->
|
|
73
|
+
<div class="message-avatar-wrapper" data-sender={message.sender}>
|
|
74
|
+
<div class="avatar-container">
|
|
75
|
+
<svg
|
|
76
|
+
class="avatar-icon"
|
|
77
|
+
viewBox="0 0 300 320"
|
|
78
|
+
fill="none"
|
|
79
|
+
stroke="none"
|
|
80
|
+
>
|
|
81
|
+
<!-- Antennas -->
|
|
82
|
+
<g stroke="#999" stroke-width="6">
|
|
83
|
+
<line x1="70" y1="20" x2="70" y2="60" />
|
|
84
|
+
<line x1="230" y1="20" x2="230" y2="60" />
|
|
85
|
+
</g>
|
|
86
|
+
<circle cx="70" cy="20" r="10" fill="#3A98D8" />
|
|
87
|
+
<circle cx="230" cy="20" r="10" fill="#3A98D8" />
|
|
88
|
+
|
|
89
|
+
<!-- Robot Body -->
|
|
90
|
+
<g class="thinking-body">
|
|
91
|
+
<rect x="40" y="60" width="220" height="240" rx="110" ry="110" fill="#3A98D8" />
|
|
92
|
+
|
|
93
|
+
<!-- Forehead Dots -->
|
|
94
|
+
<circle cx="150" cy="90" r="6" fill="#9ED4E6" />
|
|
95
|
+
<rect x="135" y="100" width="30" height="10" rx="5" ry="5" fill="#9ED4E6" />
|
|
96
|
+
|
|
97
|
+
<!-- Face Panel -->
|
|
98
|
+
<rect x="70" y="130" width="160" height="80" rx="40" ry="40" fill="#577C86" />
|
|
99
|
+
|
|
100
|
+
<!-- Eyes (Thinking animation) -->
|
|
101
|
+
<circle class="thinking-eye" cx="115" cy="170" r="10" fill="#86D3BD" />
|
|
102
|
+
<circle class="thinking-eye" cx="185" cy="170" r="10" fill="#86D3BD" />
|
|
103
|
+
|
|
104
|
+
<!-- Thinking Smile -->
|
|
105
|
+
<path class="thinking-smile" d="M110 240 Q150 260 190 240" stroke="#2F435A" stroke-width="6" fill="none" stroke-linecap="round" />
|
|
106
|
+
</g>
|
|
107
|
+
</svg>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
80
111
|
<div class="message-content">
|
|
81
112
|
<div class="message-bubble">
|
|
82
113
|
<template lwc:if={message.isTyping}>
|
|
@@ -58,6 +58,7 @@ export default class Chat extends LightningElement {
|
|
|
58
58
|
private static readonly OPEN_STATE_KEY = "doc-chat-should-open";
|
|
59
59
|
|
|
60
60
|
connectedCallback() {
|
|
61
|
+
console.log('---- Connected callback ------');
|
|
61
62
|
// Load existing messages from localStorage
|
|
62
63
|
this.loadMessages();
|
|
63
64
|
|