@salesforcedevs/docs-components 0.0.11-chat → 0.0.11-edit
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/lwc.config.json +1 -0
- package/package.json +1 -1
- package/src/modules/doc/chat/README.md +179 -0
- package/src/modules/doc/chat/chat.css +638 -62
- package/src/modules/doc/chat/chat.html +192 -14
- package/src/modules/doc/chat/chat.ts +456 -33
- package/src/modules/doc/contentLayout/contentLayout.html +17 -17
- package/src/modules/doc/editFile/editFile.css +613 -0
- package/src/modules/doc/editFile/editFile.html +225 -0
- package/src/modules/doc/editFile/editFile.ts +294 -0
|
@@ -1,45 +1,259 @@
|
|
|
1
|
+
/* Fixed positioned chat with full viewport height */
|
|
2
|
+
:host {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
right: 0;
|
|
6
|
+
height: 100vh;
|
|
7
|
+
z-index: 100000;
|
|
8
|
+
font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
|
|
9
|
+
"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
|
|
10
|
+
sans-serif;
|
|
11
|
+
pointer-events: none; /* Allow clicks to pass through when chat is closed */
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Apply content shift to main page content when chat is open */
|
|
15
|
+
body.chat-open .content {
|
|
16
|
+
transform: translateX(-400px);
|
|
17
|
+
transition: transform 0.3s ease-in-out;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body.chat-closed .content {
|
|
21
|
+
transform: translateX(0);
|
|
22
|
+
transition: transform 0.3s ease-in-out;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Also shift the global header if it exists */
|
|
26
|
+
body.chat-open dx-global-header,
|
|
27
|
+
body.chat-open .global-header {
|
|
28
|
+
transform: translateX(-400px);
|
|
29
|
+
transition: transform 0.3s ease-in-out;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
body.chat-closed dx-global-header,
|
|
33
|
+
body.chat-closed .global-header {
|
|
34
|
+
transform: translateX(0);
|
|
35
|
+
transition: transform 0.3s ease-in-out;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Floating trigger button */
|
|
39
|
+
.chat-trigger-button {
|
|
40
|
+
position: fixed;
|
|
41
|
+
bottom: 20px;
|
|
42
|
+
right: 20px;
|
|
43
|
+
background: transparent;
|
|
44
|
+
color: white;
|
|
45
|
+
border: none;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
z-index: 1001;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
52
|
+
animation: pulse 3s infinite;
|
|
53
|
+
padding: 0;
|
|
54
|
+
pointer-events: auto; /* Enable clicks on trigger button */
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Tooltip styling */
|
|
58
|
+
.chat-trigger-button::before {
|
|
59
|
+
content: attr(data-tooltip);
|
|
60
|
+
position: absolute;
|
|
61
|
+
right: 100%;
|
|
62
|
+
top: 50%;
|
|
63
|
+
transform: translateY(-50%);
|
|
64
|
+
background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
|
|
65
|
+
color: white;
|
|
66
|
+
padding: 12px 16px;
|
|
67
|
+
border-radius: 12px;
|
|
68
|
+
font-size: 14px;
|
|
69
|
+
font-weight: 500;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
opacity: 0;
|
|
72
|
+
visibility: hidden;
|
|
73
|
+
margin-right: 16px;
|
|
74
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
75
|
+
box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
|
|
76
|
+
backdrop-filter: blur(10px);
|
|
77
|
+
z-index: 1002;
|
|
78
|
+
pointer-events: none;
|
|
79
|
+
letter-spacing: 0.02em;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Tooltip arrow */
|
|
83
|
+
.chat-trigger-button::after {
|
|
84
|
+
content: "";
|
|
85
|
+
position: absolute;
|
|
86
|
+
right: 100%;
|
|
87
|
+
top: 50%;
|
|
88
|
+
transform: translateY(-50%);
|
|
89
|
+
margin-right: 8px;
|
|
90
|
+
width: 0;
|
|
91
|
+
height: 0;
|
|
92
|
+
border-left: 8px solid #0176d3;
|
|
93
|
+
border-top: 8px solid transparent;
|
|
94
|
+
border-bottom: 8px solid transparent;
|
|
95
|
+
opacity: 0;
|
|
96
|
+
visibility: hidden;
|
|
97
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
98
|
+
z-index: 1002;
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Show tooltip on hover */
|
|
103
|
+
.chat-trigger-button:hover::before,
|
|
104
|
+
.chat-trigger-button:hover::after {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
visibility: visible;
|
|
107
|
+
transform: translateY(-50%) translateX(-4px);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.chat-trigger-button:hover .chat-gif {
|
|
111
|
+
transform: scale(1.1);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.chat-trigger-button:active .chat-gif {
|
|
115
|
+
transform: scale(0.95);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.chat-gif {
|
|
119
|
+
width: 155px;
|
|
120
|
+
height: 218px;
|
|
121
|
+
object-fit: cover;
|
|
122
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@keyframes pulse {
|
|
126
|
+
0% {
|
|
127
|
+
transform: scale(1);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
70% {
|
|
131
|
+
transform: scale(1.05);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
100% {
|
|
135
|
+
transform: scale(1);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Chat container */
|
|
1
140
|
.chat-container {
|
|
141
|
+
height: 100vh;
|
|
142
|
+
width: 700px;
|
|
143
|
+
background-color: #fff;
|
|
144
|
+
box-shadow: -8px 0 32px rgb(0 0 0 / 12%), -2px 0 8px rgb(0 0 0 / 8%);
|
|
145
|
+
transform: translateX(100%);
|
|
146
|
+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
2
147
|
display: flex;
|
|
3
148
|
flex-direction: column;
|
|
4
|
-
border: 1px solid #
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
149
|
+
border-left: 1px solid #d8dde6;
|
|
150
|
+
backdrop-filter: blur(20px);
|
|
151
|
+
pointer-events: auto; /* Enable clicks on chat container */
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.chat-container_open {
|
|
155
|
+
transform: translateX(0);
|
|
11
156
|
}
|
|
12
157
|
|
|
13
|
-
.chat-
|
|
158
|
+
.chat-container_disabled {
|
|
14
159
|
opacity: 0.6;
|
|
15
160
|
pointer-events: none;
|
|
16
161
|
}
|
|
17
162
|
|
|
18
163
|
.chat-header {
|
|
19
|
-
background
|
|
20
|
-
padding:
|
|
21
|
-
border-bottom: 1px solid
|
|
164
|
+
background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
|
|
165
|
+
padding: 18px 24px;
|
|
166
|
+
border-bottom: 1px solid rgb(1 118 211 / 20%);
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
justify-content: space-between;
|
|
170
|
+
flex-shrink: 0;
|
|
171
|
+
backdrop-filter: blur(10px);
|
|
172
|
+
position: relative;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.chat-header::before {
|
|
176
|
+
content: "";
|
|
177
|
+
position: absolute;
|
|
178
|
+
top: 0;
|
|
179
|
+
left: 0;
|
|
180
|
+
right: 0;
|
|
181
|
+
bottom: 0;
|
|
182
|
+
background: linear-gradient(
|
|
183
|
+
135deg,
|
|
184
|
+
rgb(255 255 255 / 5%) 0%,
|
|
185
|
+
rgb(255 255 255 / 1%) 100%
|
|
186
|
+
);
|
|
187
|
+
pointer-events: none;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.chat-header-actions {
|
|
191
|
+
display: flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
gap: 8px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.chat-close-button,
|
|
197
|
+
.chat-clear-button {
|
|
198
|
+
width: 36px;
|
|
199
|
+
height: 36px;
|
|
200
|
+
border: none;
|
|
201
|
+
background: rgb(255 255 255 / 15%);
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
display: flex;
|
|
204
|
+
align-items: center;
|
|
205
|
+
justify-content: center;
|
|
206
|
+
border-radius: 8px;
|
|
207
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
208
|
+
color: white;
|
|
209
|
+
position: relative;
|
|
210
|
+
z-index: 1;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.chat-close-button:hover,
|
|
214
|
+
.chat-clear-button:hover {
|
|
215
|
+
background: rgb(255 255 255 / 25%);
|
|
216
|
+
transform: scale(1.05);
|
|
217
|
+
color: white;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.chat-clear-button:hover {
|
|
221
|
+
background: rgb(255 82 82 / 20%);
|
|
222
|
+
color: #ff6b6b;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.close-icon,
|
|
226
|
+
.clear-icon {
|
|
227
|
+
width: 18px;
|
|
228
|
+
height: 18px;
|
|
22
229
|
}
|
|
23
230
|
|
|
24
231
|
.chat-title {
|
|
25
232
|
margin: 0;
|
|
26
|
-
font-size:
|
|
27
|
-
font-weight:
|
|
28
|
-
color:
|
|
233
|
+
font-size: 20px;
|
|
234
|
+
font-weight: 700;
|
|
235
|
+
color: white;
|
|
236
|
+
flex: 1;
|
|
237
|
+
position: relative;
|
|
238
|
+
z-index: 1;
|
|
239
|
+
letter-spacing: -0.02em;
|
|
29
240
|
}
|
|
30
241
|
|
|
31
242
|
.chat-messages {
|
|
32
243
|
flex: 1;
|
|
33
244
|
overflow-y: auto;
|
|
34
|
-
padding:
|
|
35
|
-
max-height: 300px;
|
|
245
|
+
padding: 24px 20px;
|
|
36
246
|
scroll-behavior: smooth;
|
|
247
|
+
min-height: 0;
|
|
248
|
+
background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
|
|
37
249
|
}
|
|
38
250
|
|
|
39
251
|
.message-wrapper {
|
|
40
|
-
margin-bottom:
|
|
252
|
+
margin-bottom: 20px;
|
|
41
253
|
display: flex;
|
|
42
254
|
align-items: flex-start;
|
|
255
|
+
animation: message-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
256
|
+
gap: 12px;
|
|
43
257
|
}
|
|
44
258
|
|
|
45
259
|
.message-wrapper[data-sender="user"] {
|
|
@@ -50,6 +264,133 @@
|
|
|
50
264
|
justify-content: flex-start;
|
|
51
265
|
}
|
|
52
266
|
|
|
267
|
+
/* Avatar styling */
|
|
268
|
+
.message-avatar-wrapper {
|
|
269
|
+
flex-shrink: 0;
|
|
270
|
+
display: flex;
|
|
271
|
+
align-items: flex-start;
|
|
272
|
+
margin-top: 2px;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* Hide avatar for user messages */
|
|
276
|
+
.message-wrapper[data-sender="user"] .message-avatar-wrapper {
|
|
277
|
+
display: none;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* Show avatar for assistant messages */
|
|
281
|
+
.message-wrapper[data-sender="assistant"] .message-avatar-wrapper {
|
|
282
|
+
display: flex;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.avatar-container {
|
|
286
|
+
width: 36px;
|
|
287
|
+
height: 36px;
|
|
288
|
+
background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
|
|
289
|
+
border-radius: 50%;
|
|
290
|
+
display: flex;
|
|
291
|
+
align-items: center;
|
|
292
|
+
justify-content: center;
|
|
293
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
|
294
|
+
position: relative;
|
|
295
|
+
overflow: hidden;
|
|
296
|
+
animation: thinking-avatar-pulse 3s ease-in-out infinite;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.avatar-container::before {
|
|
300
|
+
content: "";
|
|
301
|
+
position: absolute;
|
|
302
|
+
inset: 0;
|
|
303
|
+
background: linear-gradient(
|
|
304
|
+
135deg,
|
|
305
|
+
rgb(255 255 255 / 20%) 0%,
|
|
306
|
+
rgb(255 255 255 / 10%) 100%
|
|
307
|
+
);
|
|
308
|
+
border-radius: 50%;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.avatar-icon {
|
|
312
|
+
width: 32px;
|
|
313
|
+
height: 32px;
|
|
314
|
+
color: white;
|
|
315
|
+
position: relative;
|
|
316
|
+
z-index: 1;
|
|
317
|
+
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 15%));
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Thinking Bot SVG Animations */
|
|
321
|
+
.thinking-body {
|
|
322
|
+
animation: thinking-breathe 2s ease-in-out infinite;
|
|
323
|
+
transform-origin: center;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.thinking-smile {
|
|
327
|
+
animation: thinking-smile-animation 3s ease-in-out infinite;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.thinking-eye {
|
|
331
|
+
animation: think-blink 6s infinite;
|
|
332
|
+
transform-origin: center;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
@keyframes thinking-avatar-pulse {
|
|
336
|
+
0%,
|
|
337
|
+
100% {
|
|
338
|
+
transform: scale(1);
|
|
339
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
50% {
|
|
343
|
+
transform: scale(1.08);
|
|
344
|
+
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
@keyframes thinking-breathe {
|
|
349
|
+
0%,
|
|
350
|
+
100% {
|
|
351
|
+
transform: scale(1);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
50% {
|
|
355
|
+
transform: scale(1.05);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
@keyframes thinking-smile-animation {
|
|
360
|
+
0%,
|
|
361
|
+
100% {
|
|
362
|
+
transform: translateY(0);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
50% {
|
|
366
|
+
transform: translateY(-2px);
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
@keyframes think-blink {
|
|
371
|
+
0%,
|
|
372
|
+
85%,
|
|
373
|
+
100% {
|
|
374
|
+
transform: scaleY(1);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
90% {
|
|
378
|
+
transform: scaleY(0.6);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
92% {
|
|
382
|
+
transform: scaleY(0.2);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
94% {
|
|
386
|
+
transform: scaleY(0.6);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
96% {
|
|
390
|
+
transform: scaleY(1);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
|
|
53
394
|
.message-content {
|
|
54
395
|
max-width: 80%;
|
|
55
396
|
display: flex;
|
|
@@ -62,35 +403,105 @@
|
|
|
62
403
|
}
|
|
63
404
|
|
|
64
405
|
.message-bubble {
|
|
65
|
-
padding:
|
|
66
|
-
border-radius:
|
|
406
|
+
padding: 14px 18px;
|
|
407
|
+
border-radius: 20px;
|
|
67
408
|
word-wrap: break-word;
|
|
68
409
|
max-width: 100%;
|
|
410
|
+
position: relative;
|
|
411
|
+
backdrop-filter: blur(10px);
|
|
412
|
+
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
|
69
413
|
}
|
|
70
414
|
|
|
71
415
|
.message-wrapper[data-sender="user"] .message-bubble {
|
|
72
|
-
background
|
|
416
|
+
background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
|
|
73
417
|
color: white;
|
|
418
|
+
border-bottom-right-radius: 8px;
|
|
74
419
|
}
|
|
75
420
|
|
|
76
421
|
.message-wrapper[data-sender="assistant"] .message-bubble {
|
|
77
|
-
background
|
|
78
|
-
color: #
|
|
422
|
+
background: white;
|
|
423
|
+
color: #181818;
|
|
424
|
+
border: 1px solid #e5e7ea;
|
|
425
|
+
border-bottom-left-radius: 8px;
|
|
79
426
|
}
|
|
80
427
|
|
|
81
428
|
.message-text {
|
|
82
429
|
margin: 0;
|
|
83
|
-
line-height: 1.
|
|
430
|
+
line-height: 1.5;
|
|
431
|
+
font-size: 15px;
|
|
432
|
+
font-weight: 400;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/* HTML content styling for rich messages */
|
|
436
|
+
.message-text .chat-link {
|
|
437
|
+
color: #0176d3;
|
|
438
|
+
text-decoration: none;
|
|
439
|
+
border-bottom: 1px solid transparent;
|
|
440
|
+
transition: all 0.2s ease;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.message-text .chat-link:hover {
|
|
444
|
+
color: #005fb2;
|
|
445
|
+
border-bottom-color: #005fb2;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.message-text .chat-list {
|
|
449
|
+
margin: 12px 0;
|
|
450
|
+
padding-left: 20px;
|
|
451
|
+
counter-reset: none;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.message-text .chat-list li {
|
|
455
|
+
margin: 12px 0;
|
|
456
|
+
line-height: 1.6;
|
|
457
|
+
font-weight: 500;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.message-text .chat-description {
|
|
461
|
+
font-weight: 400;
|
|
462
|
+
color: #666;
|
|
84
463
|
font-size: 14px;
|
|
464
|
+
line-height: 1.5;
|
|
465
|
+
margin-top: 4px;
|
|
466
|
+
display: block;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.message-text strong {
|
|
470
|
+
font-weight: 600;
|
|
471
|
+
color: #181818;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.message-text em {
|
|
475
|
+
font-style: italic;
|
|
476
|
+
color: #555;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
/* Style for line breaks in HTML content */
|
|
480
|
+
.message-text br {
|
|
481
|
+
margin: 4px 0;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
/* Ensure proper spacing for HTML content */
|
|
485
|
+
.message-text p {
|
|
486
|
+
margin: 8px 0;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.message-text p:first-child {
|
|
490
|
+
margin-top: 0;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.message-text p:last-child {
|
|
494
|
+
margin-bottom: 0;
|
|
85
495
|
}
|
|
86
496
|
|
|
87
497
|
.message-timestamp {
|
|
88
498
|
font-size: 12px;
|
|
89
|
-
color: #
|
|
90
|
-
margin-top:
|
|
499
|
+
color: #706e6b;
|
|
500
|
+
margin-top: 6px;
|
|
91
501
|
display: flex;
|
|
92
502
|
align-items: center;
|
|
93
503
|
gap: 4px;
|
|
504
|
+
font-weight: 400;
|
|
94
505
|
}
|
|
95
506
|
|
|
96
507
|
.message-sender {
|
|
@@ -113,7 +524,7 @@
|
|
|
113
524
|
width: 8px;
|
|
114
525
|
height: 8px;
|
|
115
526
|
border-radius: 50%;
|
|
116
|
-
background-color: #
|
|
527
|
+
background-color: #0176d3;
|
|
117
528
|
animation: typing 1.4s infinite ease-in-out both;
|
|
118
529
|
}
|
|
119
530
|
|
|
@@ -126,20 +537,37 @@
|
|
|
126
537
|
}
|
|
127
538
|
|
|
128
539
|
@keyframes typing {
|
|
129
|
-
0%,
|
|
540
|
+
0%,
|
|
541
|
+
80%,
|
|
542
|
+
100% {
|
|
130
543
|
transform: scale(0);
|
|
131
544
|
opacity: 0.5;
|
|
132
545
|
}
|
|
546
|
+
|
|
133
547
|
40% {
|
|
134
548
|
transform: scale(1);
|
|
135
549
|
opacity: 1;
|
|
136
550
|
}
|
|
137
551
|
}
|
|
138
552
|
|
|
553
|
+
@keyframes message-slide-in {
|
|
554
|
+
from {
|
|
555
|
+
opacity: 0;
|
|
556
|
+
transform: translateY(12px);
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
to {
|
|
560
|
+
opacity: 1;
|
|
561
|
+
transform: translateY(0);
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
|
|
139
565
|
.chat-input-area {
|
|
140
|
-
border-top: 1px solid #
|
|
141
|
-
padding:
|
|
142
|
-
background
|
|
566
|
+
border-top: 1px solid #e5e7ea;
|
|
567
|
+
padding: 20px 24px;
|
|
568
|
+
background: white;
|
|
569
|
+
flex-shrink: 0;
|
|
570
|
+
backdrop-filter: blur(20px);
|
|
143
571
|
}
|
|
144
572
|
|
|
145
573
|
.chat-input-container {
|
|
@@ -150,18 +578,22 @@
|
|
|
150
578
|
|
|
151
579
|
.chat-input {
|
|
152
580
|
flex: 1;
|
|
153
|
-
padding:
|
|
154
|
-
border:
|
|
155
|
-
border-radius:
|
|
156
|
-
font-size:
|
|
581
|
+
padding: 14px 18px;
|
|
582
|
+
border: 2px solid #d8dde6;
|
|
583
|
+
border-radius: 24px;
|
|
584
|
+
font-size: 15px;
|
|
157
585
|
outline: none;
|
|
158
|
-
background-color: #
|
|
159
|
-
transition:
|
|
586
|
+
background-color: #fafbfc;
|
|
587
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
588
|
+
font-family: inherit;
|
|
589
|
+
line-height: 1.4;
|
|
160
590
|
}
|
|
161
591
|
|
|
162
592
|
.chat-input:focus {
|
|
163
|
-
border-color: #
|
|
164
|
-
background-color: #
|
|
593
|
+
border-color: #0176d3;
|
|
594
|
+
background-color: #fff;
|
|
595
|
+
box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
|
|
596
|
+
transform: translateY(-1px);
|
|
165
597
|
}
|
|
166
598
|
|
|
167
599
|
.chat-input:disabled {
|
|
@@ -170,26 +602,32 @@
|
|
|
170
602
|
}
|
|
171
603
|
|
|
172
604
|
.chat-send-button {
|
|
173
|
-
width:
|
|
174
|
-
height:
|
|
605
|
+
width: 44px;
|
|
606
|
+
height: 44px;
|
|
175
607
|
border: none;
|
|
176
608
|
border-radius: 50%;
|
|
177
|
-
background
|
|
609
|
+
background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
|
|
178
610
|
color: white;
|
|
179
611
|
cursor: pointer;
|
|
180
612
|
display: flex;
|
|
181
613
|
align-items: center;
|
|
182
614
|
justify-content: center;
|
|
183
|
-
transition:
|
|
615
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
616
|
+
box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
|
|
617
|
+
margin-left: 12px;
|
|
184
618
|
}
|
|
185
619
|
|
|
186
620
|
.chat-send-button:hover:not(:disabled) {
|
|
187
|
-
background
|
|
621
|
+
background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
|
|
622
|
+
transform: scale(1.05);
|
|
623
|
+
box-shadow: 0 6px 16px rgb(1 118 211 / 35%);
|
|
188
624
|
}
|
|
189
625
|
|
|
190
626
|
.chat-send-button:disabled {
|
|
191
|
-
background
|
|
627
|
+
background: #d8dde6;
|
|
192
628
|
cursor: not-allowed;
|
|
629
|
+
transform: none;
|
|
630
|
+
box-shadow: none;
|
|
193
631
|
}
|
|
194
632
|
|
|
195
633
|
.send-icon {
|
|
@@ -199,47 +637,185 @@
|
|
|
199
637
|
|
|
200
638
|
/* Responsive design */
|
|
201
639
|
@media (max-width: 768px) {
|
|
640
|
+
.chat-trigger-button {
|
|
641
|
+
bottom: 16px;
|
|
642
|
+
right: 16px;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.chat-gif {
|
|
646
|
+
width: 56px;
|
|
647
|
+
height: 56px;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
/* Adjust tooltip for mobile */
|
|
651
|
+
.chat-trigger-button::before {
|
|
652
|
+
font-size: 13px;
|
|
653
|
+
padding: 10px 14px;
|
|
654
|
+
margin-right: 12px;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.chat-trigger-button::after {
|
|
658
|
+
margin-right: 6px;
|
|
659
|
+
border-left-width: 6px;
|
|
660
|
+
border-top-width: 6px;
|
|
661
|
+
border-bottom-width: 6px;
|
|
662
|
+
}
|
|
663
|
+
|
|
202
664
|
.chat-container {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
border-right: none;
|
|
665
|
+
width: 100%;
|
|
666
|
+
right: 0;
|
|
667
|
+
transform: translateX(100%);
|
|
207
668
|
}
|
|
208
|
-
|
|
669
|
+
|
|
670
|
+
.chat-container_open {
|
|
671
|
+
transform: translateX(0);
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.chat-header {
|
|
675
|
+
padding: 16px 20px;
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.chat-title {
|
|
679
|
+
font-size: 18px;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.chat-messages {
|
|
683
|
+
padding: 20px 16px;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
.chat-input-area {
|
|
687
|
+
padding: 16px 20px;
|
|
688
|
+
}
|
|
689
|
+
|
|
209
690
|
.message-content {
|
|
210
|
-
max-width:
|
|
691
|
+
max-width: 85%;
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
.avatar-container {
|
|
695
|
+
width: 32px;
|
|
696
|
+
height: 32px;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.avatar-icon {
|
|
700
|
+
width: 28px;
|
|
701
|
+
height: 28px;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
.message-wrapper {
|
|
705
|
+
gap: 10px;
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
@media (max-width: 480px) {
|
|
710
|
+
.chat-trigger-button {
|
|
711
|
+
bottom: 10px;
|
|
712
|
+
right: 10px;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.chat-gif {
|
|
716
|
+
width: 48px;
|
|
717
|
+
height: 48px;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
/* Smaller tooltip for small screens */
|
|
721
|
+
.chat-trigger-button::before {
|
|
722
|
+
font-size: 12px;
|
|
723
|
+
padding: 8px 12px;
|
|
724
|
+
margin-right: 10px;
|
|
725
|
+
border-radius: 8px;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
.chat-trigger-button::after {
|
|
729
|
+
margin-right: 4px;
|
|
730
|
+
border-left-width: 5px;
|
|
731
|
+
border-top-width: 5px;
|
|
732
|
+
border-bottom-width: 5px;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.chat-container {
|
|
736
|
+
width: 100%;
|
|
211
737
|
}
|
|
212
|
-
|
|
738
|
+
|
|
739
|
+
.chat-header {
|
|
740
|
+
padding: 12px;
|
|
741
|
+
}
|
|
742
|
+
|
|
213
743
|
.chat-messages {
|
|
214
|
-
|
|
744
|
+
padding: 12px;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.chat-input-area {
|
|
748
|
+
padding: 12px;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.avatar-container {
|
|
752
|
+
width: 28px;
|
|
753
|
+
height: 28px;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.avatar-icon {
|
|
757
|
+
width: 24px;
|
|
758
|
+
height: 24px;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.message-wrapper {
|
|
762
|
+
gap: 8px;
|
|
763
|
+
margin-bottom: 16px;
|
|
215
764
|
}
|
|
216
765
|
}
|
|
217
766
|
|
|
218
767
|
/* Accessibility improvements */
|
|
219
768
|
@media (prefers-reduced-motion: reduce) {
|
|
769
|
+
.chat-trigger-button {
|
|
770
|
+
animation: none;
|
|
771
|
+
}
|
|
772
|
+
|
|
220
773
|
.typing-dot {
|
|
221
774
|
animation: none;
|
|
222
775
|
}
|
|
223
|
-
|
|
776
|
+
|
|
224
777
|
.chat-messages {
|
|
225
778
|
scroll-behavior: auto;
|
|
226
779
|
}
|
|
780
|
+
|
|
781
|
+
.avatar-container {
|
|
782
|
+
animation: none;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
/* Disable all thinking bot animations for reduced motion users */
|
|
786
|
+
.thinking-body {
|
|
787
|
+
animation: none !important;
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
.thinking-smile {
|
|
791
|
+
animation: none !important;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.thinking-eye {
|
|
795
|
+
animation: none !important;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
/* Disable tooltip animations for reduced motion users */
|
|
799
|
+
.chat-trigger-button::before,
|
|
800
|
+
.chat-trigger-button::after {
|
|
801
|
+
transition: none;
|
|
802
|
+
}
|
|
227
803
|
}
|
|
228
804
|
|
|
229
805
|
/* High contrast mode support */
|
|
230
806
|
@media (prefers-contrast: high) {
|
|
231
807
|
.chat-container {
|
|
232
|
-
border: 2px solid #
|
|
808
|
+
border: 2px solid #000;
|
|
233
809
|
}
|
|
234
|
-
|
|
810
|
+
|
|
235
811
|
.message-wrapper[data-sender="user"] .message-bubble {
|
|
236
|
-
background-color: #
|
|
237
|
-
color: #
|
|
812
|
+
background-color: #000;
|
|
813
|
+
color: #fff;
|
|
238
814
|
}
|
|
239
|
-
|
|
815
|
+
|
|
240
816
|
.message-wrapper[data-sender="assistant"] .message-bubble {
|
|
241
|
-
background-color: #
|
|
242
|
-
color: #
|
|
243
|
-
border: 1px solid #
|
|
817
|
+
background-color: #fff;
|
|
818
|
+
color: #000;
|
|
819
|
+
border: 1px solid #000;
|
|
244
820
|
}
|
|
245
|
-
}
|
|
821
|
+
}
|