@portnet/ui 5.0.24 → 5.0.25

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.
@@ -1,621 +0,0 @@
1
- .help-widget-button {
2
- position: fixed;
3
- right: 0;
4
- top: 30%;
5
- transform: translateY(-50%);
6
- z-index: 1000;
7
- transition: all 0.3s ease;
8
- }
9
-
10
- .help-widget-button.open {
11
- right: 380px;
12
- }
13
-
14
- .help-trigger {
15
- writing-mode: vertical-rl;
16
- text-orientation: mixed;
17
- transform: rotate(180deg);
18
- border-radius: 0 15px 15px 0;
19
- padding: 19px 8px;
20
- font-weight: 700 !important;
21
- font-size: 13px;
22
- box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
23
- border: 1px solid #e9ecef;
24
- border-right: none;
25
- white-space: nowrap;
26
- background-color: white !important;
27
- min-height: 150px;
28
- transition: all 0.3s ease;
29
- display: flex;
30
- align-items: center;
31
- justify-content: center;
32
- color: #545cd8 !important;
33
- gap: 10px;
34
- }
35
-
36
- .help-trigger:active {
37
- background-color: white !important;
38
- box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
39
- }
40
-
41
- .help-trigger .arrow-icon {
42
- writing-mode: horizontal-tb;
43
- font-size: 14px;
44
- margin: 0px 0;
45
- font-weight: 900 !important;
46
- color: #282828 !important;
47
- }
48
-
49
- .help-trigger:focus,
50
- .help-trigger:focus-visible {
51
- outline: 3px solid var(--primary-color, #222f67) !important;
52
- outline-offset: 3px !important;
53
- box-shadow: 0 0 0 5px var(--primary-alpha-20, rgba(34, 47, 103, 0.2)) !important;
54
- }
55
-
56
- .help-trigger:focus:not(:focus-visible) {
57
- outline: none;
58
- }
59
-
60
- .help-widget-sidebar {
61
- position: fixed;
62
- top: 0;
63
- right: 0;
64
- right: -400px;
65
- width: 380px;
66
- height: 100vh;
67
- height: 100dvh;
68
- z-index: 1001;
69
- transition: right 0.3s ease;
70
- display: flex;
71
- flex-direction: column;
72
- background-color: white;
73
- }
74
-
75
- .help-widget-sidebar.open {
76
- right: 0px;
77
- }
78
-
79
- .help-widget-sidebar .card {
80
- height: 100vh;
81
- border-radius: 0;
82
- height: 100dvh;
83
- border-radius: 0;
84
- flex: 1;
85
- display: flex;
86
- flex-direction: column;
87
- }
88
-
89
- .help-widget-sidebar .card-body {
90
- flex: 1;
91
- display: flex;
92
- flex-direction: column;
93
- min-height: 0;
94
- height: 100%;
95
- }
96
-
97
- @media (max-width: 768px) {
98
- .help-widget-sidebar {
99
- width: 100vw;
100
- right: -100vw;
101
- overflow: hidden;
102
- }
103
- .help-widget-sidebar.open {
104
- right: 0;
105
- }
106
- .help-widget-button.open {
107
- right: 20px;
108
- }
109
- }
110
-
111
- @media (max-width: 485px) {
112
- .help-widget-button {
113
- top: 20vh !important;
114
- bottom: auto;
115
- transform: none;
116
- right: 0 !important;
117
- }
118
- }
119
-
120
- .help-widget-sidebar button:focus-visible,
121
- .help-widget-sidebar [role="button"]:focus-visible,
122
- .help-widget-sidebar a:focus-visible {
123
- outline: 3px solid var(--primary-color, #222f67) !important;
124
- outline-offset: 2px !important;
125
- box-shadow: 0 0 0 4px var(--primary-alpha-10, rgba(34, 47, 103, 0.1)) !important;
126
- }
127
-
128
- .help-widget-sidebar button:focus,
129
- .help-widget-sidebar [role="button"]:focus,
130
- .help-widget-sidebar a:focus {
131
- outline: none;
132
- }
133
-
134
- .help-widget-sidebar:not(.open) {
135
- visibility: hidden;
136
- }
137
-
138
- .help-widget-sidebar.open {
139
- visibility: visible;
140
- }
141
-
142
- .help-widget-overlay {
143
- position: fixed;
144
- top: 0;
145
- left: 0;
146
- width: 100vw;
147
- height: 100vh;
148
- background-color: rgba(0, 0, 0, 0.3);
149
- z-index: 999;
150
- transition: opacity 0.3s ease;
151
- }
152
-
153
- .help-widget-sidebar .h-100 {
154
- height: 100vh !important;
155
- }
156
-
157
- .MuiDialog-paper .MuiDialogContent-root::-webkit-scrollbar {
158
- width: 3px;
159
- }
160
-
161
- .MuiDialog-paper .MuiDialogContent-root::-webkit-scrollbar-track {
162
- background: transparent;
163
- }
164
-
165
- .MuiDialog-paper .MuiDialogContent-root::-webkit-scrollbar-thumb {
166
- background: #d0d0d0;
167
- border-radius: 4px;
168
- }
169
-
170
- .MuiDialog-paper .MuiDialogContent-root::-webkit-scrollbar-thumb:hover {
171
- background: #b0b0b0;
172
- }
173
-
174
- .MuiDialog-paper .MuiDialogContent-root::-webkit-scrollbar-button {
175
- height: 0;
176
- width: 0;
177
- display: none;
178
- }
179
-
180
- .MuiDialog-paper .MuiDialogContent-root {
181
- scrollbar-width: thin;
182
- scrollbar-color: #d0d0d0 transparent;
183
- }
184
-
185
- .help-content {
186
- padding: 20px;
187
- height: 100%;
188
- overflow-y: auto;
189
- }
190
-
191
- .help-header h5 {
192
- color: #495057;
193
- font-weight: 600;
194
- }
195
-
196
- .help-option {
197
- padding: 15px;
198
- border-radius: 10px;
199
- cursor: pointer;
200
- transition: all 0.2s ease;
201
- border: 1px solid #e9ecef;
202
- margin-bottom: 10px;
203
- }
204
-
205
- .help-option:hover {
206
- background-color: #f8f9fa;
207
- border-color: #007bff;
208
- transform: translateY(-1px);
209
- box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
210
- }
211
-
212
- .help-option-icon {
213
- width: 40px;
214
- height: 40px;
215
- background: linear-gradient(135deg, #007bff, #0056b3);
216
- border-radius: 10px;
217
- display: flex;
218
- align-items: center;
219
- justify-content: center;
220
- color: white;
221
- margin-right: 15px;
222
- font-size: 16px;
223
- }
224
-
225
- .help-option-content h6 {
226
- color: #495057;
227
- font-weight: 600;
228
- margin-bottom: 4px;
229
- }
230
-
231
- .chat-options {
232
- border-top: 1px solid #e9ecef;
233
- padding-top: 20px;
234
- }
235
-
236
- .chat-button {
237
- border-radius: 12px;
238
- padding: 15px;
239
- border: none;
240
- transition: all 0.2s ease;
241
- text-align: left;
242
- }
243
-
244
- .chat-button:hover {
245
- transform: translateY(-1px);
246
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
247
- }
248
-
249
- .chat-avatar {
250
- width: 40px;
251
- height: 40px;
252
- border-radius: 50%;
253
- display: flex;
254
- align-items: center;
255
- justify-content: center;
256
- font-weight: bold;
257
- color: white;
258
- flex-shrink: 0;
259
- }
260
-
261
- .tijaria-avatar {
262
- background: linear-gradient(135deg, #ff6b6b, #ee5a52);
263
- }
264
-
265
- .live-avatar {
266
- background: linear-gradient(135deg, #28a745, #20c997);
267
- }
268
-
269
- .chat-status {
270
- font-size: 10px;
271
- padding: 4px 8px;
272
- }
273
-
274
- .chat-container {
275
- display: flex;
276
- flex-direction: column;
277
- height: 100%;
278
- }
279
-
280
- .chat-header {
281
- padding: 20px;
282
- border-bottom: 1px solid #e9ecef;
283
- display: flex;
284
- align-items: center;
285
- background-color: #f8f9fa;
286
- }
287
-
288
- .back-button {
289
- color: #6c757d !important;
290
- font-size: 18px;
291
- }
292
-
293
- .back-button:hover {
294
- color: #007bff !important;
295
- }
296
-
297
- .chat-messages {
298
- flex: 1;
299
- overflow-y: auto;
300
- padding: 20px;
301
- background-color: #f8f9fa;
302
- }
303
-
304
- .message {
305
- display: flex;
306
- margin-bottom: 15px;
307
- align-items: flex-start;
308
- }
309
-
310
- .message.user {
311
- justify-content: flex-end;
312
- }
313
-
314
- .message.user .message-content {
315
- align-items: flex-end;
316
- }
317
-
318
- .message-avatar {
319
- width: 32px;
320
- height: 32px;
321
- border-radius: 50%;
322
- display: flex;
323
- align-items: center;
324
- justify-content: center;
325
- font-weight: bold;
326
- color: white;
327
- font-size: 12px;
328
- margin-right: 10px;
329
- flex-shrink: 0;
330
- }
331
-
332
- .message-content {
333
- display: flex;
334
- flex-direction: column;
335
- max-width: 70%;
336
- }
337
-
338
- .message-agent {
339
- font-size: 12px;
340
- color: #6c757d;
341
- margin-bottom: 4px;
342
- font-weight: 500;
343
- }
344
-
345
- .message-bubble {
346
- padding: 12px 16px;
347
- border-radius: 18px;
348
- position: relative;
349
- word-wrap: break-word;
350
- line-height: 1.4;
351
- }
352
-
353
- .message.bot .message-bubble,
354
- .message.agent .message-bubble {
355
- background-color: white;
356
- border: 1px solid #e9ecef;
357
- color: #495057;
358
- }
359
-
360
- .message.user .message-bubble {
361
- background: linear-gradient(135deg, #007bff, #0056b3);
362
- color: white;
363
- }
364
-
365
- .message-time {
366
- font-size: 11px;
367
- color: #6c757d;
368
- margin-top: 4px;
369
- text-align: right;
370
- }
371
-
372
- .message.bot .message-time,
373
- .message.agent .message-time {
374
- text-align: left;
375
- }
376
-
377
- .typing .message-bubble {
378
- padding: 16px 20px;
379
- }
380
-
381
- .typing-indicator {
382
- display: flex;
383
- align-items: center;
384
- gap: 4px;
385
- }
386
-
387
- .typing-indicator span {
388
- width: 6px;
389
- height: 6px;
390
- background-color: #6c757d;
391
- border-radius: 50%;
392
- animation: typing 1.4s infinite ease-in-out;
393
- }
394
-
395
- .typing-indicator span:nth-child(1) {
396
- animation-delay: -0.32s;
397
- }
398
-
399
- .typing-indicator span:nth-child(2) {
400
- animation-delay: -0.16s;
401
- }
402
-
403
- @keyframes typing {
404
- 0%, 80%, 100% {
405
- transform: scale(0.8);
406
- opacity: 0.5;
407
- }
408
- 40% {
409
- transform: scale(1);
410
- opacity: 1;
411
- }
412
- }
413
-
414
- .chat-input {
415
- padding: 20px;
416
- border-top: 1px solid #e9ecef;
417
- background-color: white;
418
- }
419
-
420
- .message-input {
421
- border: none;
422
- resize: none;
423
- max-height: 120px;
424
- padding: 12px 16px;
425
- border-radius: 20px;
426
- background-color: #f8f9fa;
427
- }
428
-
429
- .message-input:focus {
430
- background-color: white;
431
- border-color: #007bff;
432
- box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
433
- }
434
-
435
- .emoji-button,
436
- .attach-button {
437
- color: #6c757d !important;
438
- border: none !important;
439
- padding: 8px 12px;
440
- }
441
-
442
- .emoji-button:hover,
443
- .attach-button:hover {
444
- color: #007bff !important;
445
- }
446
-
447
- @media (max-width: 768px) {
448
- .help-widget-sidebar {
449
- width: 100vw;
450
- right: -100vw;
451
- border-radius: 0;
452
- overflow: hidden;
453
- }
454
-
455
- .help-widget-sidebar.open {
456
- right: 0;
457
- }
458
-
459
- .help-widget-button.open {
460
- right: 20px;
461
- }
462
-
463
- .help-widget-sidebar .card {
464
- border-radius: 0;
465
- }
466
-
467
- .message-content {
468
- max-width: 85%;
469
- }
470
- }
471
-
472
- @media (max-width: 480px) {
473
- .help-widget-button {
474
- right: 15px;
475
- bottom: 15px;
476
- }
477
-
478
- .help-trigger {
479
- padding: 10px 16px;
480
- font-size: 14px;
481
- }
482
-
483
- .chat-messages {
484
- padding: 15px;
485
- }
486
-
487
- .help-content {
488
- padding: 15px;
489
- }
490
- }
491
-
492
- .chat-messages::-webkit-scrollbar,
493
- .help-content::-webkit-scrollbar {
494
- width: 6px;
495
- }
496
-
497
- .chat-messages::-webkit-scrollbar-track,
498
- .help-content::-webkit-scrollbar-track {
499
- background: #f1f1f1;
500
- border-radius: 3px;
501
- }
502
-
503
- .chat-messages::-webkit-scrollbar-thumb,
504
- .help-content::-webkit-scrollbar-thumb {
505
- background: #c1c1c1;
506
- border-radius: 3px;
507
- }
508
-
509
- .chat-messages::-webkit-scrollbar-thumb:hover,
510
- .help-content::-webkit-scrollbar-thumb:hover {
511
- background: #a8a8a8;
512
- }
513
-
514
-
515
- .help-widget-sidebar.open .alochat-container {
516
- height: calc(100% - 80px);
517
- overflow: hidden;
518
- }
519
-
520
- .help-widget-sidebar.open .alochat-embedded {
521
- height: 100%;
522
- width: 100%;
523
- }
524
-
525
- .help-widget-sidebar.open .tijaria-container {
526
- height: calc(100% - 80px);
527
- overflow: hidden;
528
- }
529
-
530
- .tijaria-embedded {
531
- height: 100%;
532
- width: 100%;
533
- }
534
-
535
- .tijaria-embedded iframe {
536
- border-radius: 0 !important;
537
- box-shadow: none !important;
538
- }
539
-
540
- .alochat-embedded .alotech-chat-widget iframe {
541
- width: 100% !important;
542
- height: 100% !important;
543
- border: none !important;
544
- border-radius: 0 !important;
545
- }
546
-
547
- .alochat-embedded .alotech-chat-interface,
548
- .alochat-embedded [class*="chat-interface"],
549
- .alochat-embedded [class*="widget-content"] {
550
- width: 100% !important;
551
- height: 100% !important;
552
- max-width: none !important;
553
- max-height: none !important;
554
- border-radius: 0 !important;
555
- box-shadow: none !important;
556
- }
557
-
558
- .alochat-container .spinner-border,
559
- .tijaria-container .spinner-border {
560
- width: 3rem;
561
- height: 3rem;
562
- }
563
-
564
- .chat-container {
565
- display: flex;
566
- flex-direction: column;
567
- height: 100%;
568
- }
569
-
570
- .chat-header {
571
- flex-shrink: 0;
572
- padding: 1rem;
573
- border-bottom: 1px solid #e9ecef;
574
- }
575
-
576
- .alochat-container,
577
- .tijaria-container {
578
- flex: 1;
579
- min-height: 0;
580
- position: relative;
581
- }
582
-
583
- .alochat-embedded,
584
- .tijaria-embedded {
585
- overflow: hidden;
586
- }
587
-
588
- @media (max-width: 768px) {
589
- .help-widget-sidebar.open .alochat-container,
590
- .help-widget-sidebar.open .tijaria-container {
591
- height: calc(100% - 70px);
592
- }
593
- }
594
-
595
- .alochat-container {
596
- flex: 1;
597
- position: relative;
598
- overflow: hidden;
599
- }
600
-
601
- .tijaria-embedded {
602
- flex: 1;
603
- position: relative;
604
- overflow: hidden;
605
- }
606
-
607
- @media (max-width: 768px) {
608
- .help-widget-sidebar.open .alochat-container,
609
- .help-widget-sidebar.open .tijaria-embedded {
610
- width: 100%;
611
- flex: unset;
612
- }
613
- }
614
-
615
- .alotech-chat-widget {
616
- bottom: 55px !important;
617
- right: 25px !important;
618
- transition: bottom 0.3s ease;
619
- z-index: 1000 !important;
620
- }
621
-