@paymanai/payman-ask-sdk 4.0.27 → 4.0.28

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/dist/styles.css CHANGED
@@ -207,6 +207,7 @@
207
207
  scrollbar-gutter: stable;
208
208
  }
209
209
  .payman-v2-root {
210
+ position: relative;
210
211
  display: flex;
211
212
  flex-direction: column;
212
213
  height: 100%;
@@ -219,6 +220,617 @@
219
220
  flex: 1 1 0%;
220
221
  min-height: 0;
221
222
  }
223
+ .payman-v2-body {
224
+ display: flex;
225
+ flex: 1 1 0%;
226
+ min-height: 0;
227
+ width: 100%;
228
+ }
229
+ .payman-v2-chat-column {
230
+ position: relative;
231
+ display: flex;
232
+ flex-direction: column;
233
+ flex: 1 1 0%;
234
+ min-width: 0;
235
+ min-height: 0;
236
+ }
237
+ .payman-v2-sessions-peek-anchor {
238
+ position: absolute;
239
+ top: 12px;
240
+ left: 12px;
241
+ z-index: 10;
242
+ }
243
+ .payman-v2-sessions-reopen-btn {
244
+ display: inline-flex;
245
+ align-items: center;
246
+ justify-content: center;
247
+ width: 32px;
248
+ height: 32px;
249
+ border: 1px solid var(--payman-v2-border-1);
250
+ border-radius: var(--payman-v2-radius-sm);
251
+ background: var(--payman-v2-bg);
252
+ color: var(--payman-v2-text-2);
253
+ cursor: pointer;
254
+ box-shadow: var(--payman-v2-shadow-input);
255
+ transition: background 0.15s ease, color 0.15s ease;
256
+ }
257
+ .payman-v2-sessions-reopen-btn:hover {
258
+ background: var(--payman-v2-hover);
259
+ color: var(--payman-v2-text-1);
260
+ }
261
+ .payman-v2-sessions-peek {
262
+ position: absolute;
263
+ top: calc(100% + 8px);
264
+ left: 0;
265
+ z-index: 20;
266
+ display: flex;
267
+ flex-direction: column;
268
+ width: 260px;
269
+ max-height: min(420px, 70vh);
270
+ border: 1px solid var(--payman-v2-border-1);
271
+ border-radius: var(--payman-v2-radius-lg);
272
+ background: var(--payman-v2-bg);
273
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
274
+ overflow: hidden;
275
+ animation: payman-v2-sessions-peek-in 0.12s ease-out;
276
+ }
277
+ @keyframes payman-v2-sessions-peek-in {
278
+ from {
279
+ opacity: 0;
280
+ transform: translateY(-2px) scale(0.98);
281
+ }
282
+ to {
283
+ opacity: 1;
284
+ transform: translateY(0) scale(1);
285
+ }
286
+ }
287
+ .payman-v2-sessions-peek-header {
288
+ display: flex;
289
+ align-items: center;
290
+ padding: 10px 12px 6px;
291
+ }
292
+ .payman-v2-sessions-peek-title {
293
+ font-size: 12.5px;
294
+ font-weight: 600;
295
+ color: var(--payman-v2-text-2);
296
+ }
297
+ .payman-v2-sessions-peek-new-btn {
298
+ margin-top: 0;
299
+ }
300
+ .payman-v2-sessions-peek .payman-v2-sessions-list {
301
+ max-height: 320px;
302
+ }
303
+ .payman-v2-sessions-peek .payman-v2-session-row-title {
304
+ font-size: 13px;
305
+ }
306
+ .payman-v2-sessions-sidebar {
307
+ position: relative;
308
+ width: var(--payman-v2-sessions-width, 264px);
309
+ flex-shrink: 0;
310
+ height: 100%;
311
+ overflow: hidden;
312
+ border-right: 1px solid var(--payman-v2-border-1);
313
+ background: var(--payman-v2-bg-secondary);
314
+ transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
315
+ }
316
+ .payman-v2-sessions-sidebar-collapsed {
317
+ width: 0;
318
+ border-right-color: transparent;
319
+ }
320
+ .payman-v2-sessions-sidebar-resizing {
321
+ cursor: col-resize;
322
+ transition: none;
323
+ }
324
+ .payman-v2-sessions-sidebar-inner {
325
+ display: flex;
326
+ flex-direction: column;
327
+ width: var(--payman-v2-sessions-width, 264px);
328
+ height: 100%;
329
+ flex-shrink: 0;
330
+ }
331
+ .payman-v2-sessions-resizer {
332
+ position: absolute;
333
+ top: 0;
334
+ right: -4px;
335
+ width: 8px;
336
+ height: 100%;
337
+ cursor: col-resize;
338
+ z-index: 5;
339
+ touch-action: none;
340
+ }
341
+ .payman-v2-sessions-resizer::after {
342
+ content: "";
343
+ position: absolute;
344
+ top: 0;
345
+ left: 3px;
346
+ width: 2px;
347
+ height: 100%;
348
+ background: var(--payman-primary, #0f766e);
349
+ opacity: 0;
350
+ transition: opacity 0.15s ease;
351
+ }
352
+ .payman-v2-sessions-resizer:hover::after,
353
+ .payman-v2-sessions-sidebar-resizing .payman-v2-sessions-resizer::after {
354
+ opacity: 0.5;
355
+ }
356
+ .payman-v2-sessions-resizer::before {
357
+ content: "";
358
+ position: absolute;
359
+ top: 50%;
360
+ left: 2px;
361
+ transform: translateY(-50%);
362
+ width: 4px;
363
+ height: 32px;
364
+ border-radius: 3px;
365
+ background: var(--payman-v2-border-1);
366
+ transition: background 0.15s ease, height 0.15s ease;
367
+ }
368
+ .payman-v2-sessions-resizer:hover::before,
369
+ .payman-v2-sessions-sidebar-resizing .payman-v2-sessions-resizer::before {
370
+ background: var(--payman-primary, #0f766e);
371
+ height: 44px;
372
+ }
373
+ .payman-v2-sessions-header {
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: space-between;
377
+ height: 52px;
378
+ flex-shrink: 0;
379
+ padding: 0 8px 0 16px;
380
+ }
381
+ .payman-v2-sessions-title {
382
+ font-size: 14px;
383
+ font-weight: 600;
384
+ color: var(--payman-v2-text-1);
385
+ }
386
+ .payman-v2-sessions-close {
387
+ display: inline-flex;
388
+ align-items: center;
389
+ justify-content: center;
390
+ width: 28px;
391
+ height: 28px;
392
+ border: none;
393
+ border-radius: var(--payman-v2-radius-sm);
394
+ background: transparent;
395
+ color: var(--payman-v2-text-3);
396
+ cursor: pointer;
397
+ transition: background 0.15s ease, color 0.15s ease;
398
+ }
399
+ .payman-v2-sessions-close:hover {
400
+ background: var(--payman-v2-hover);
401
+ color: var(--payman-v2-text-1);
402
+ }
403
+ .payman-v2-sessions-list-wrap {
404
+ position: relative;
405
+ flex: 1 1 0%;
406
+ min-height: 0;
407
+ display: flex;
408
+ flex-direction: column;
409
+ }
410
+ .payman-v2-sessions-list-wrap::before,
411
+ .payman-v2-sessions-list-wrap::after {
412
+ content: "";
413
+ position: absolute;
414
+ left: 0;
415
+ right: 0;
416
+ height: 14px;
417
+ pointer-events: none;
418
+ z-index: 3;
419
+ opacity: 0;
420
+ transition: opacity 0.16s ease;
421
+ }
422
+ .payman-v2-sessions-list-wrap::before {
423
+ top: 0;
424
+ background:
425
+ linear-gradient(
426
+ to bottom,
427
+ rgba(0, 0, 0, 0.14),
428
+ transparent);
429
+ }
430
+ .payman-v2-sessions-list-wrap::after {
431
+ bottom: 0;
432
+ background:
433
+ linear-gradient(
434
+ to top,
435
+ rgba(0, 0, 0, 0.14),
436
+ transparent);
437
+ }
438
+ .payman-v2-sessions-list-wrap.payman-v2-scroll-shadow-top::before {
439
+ opacity: 1;
440
+ }
441
+ .payman-v2-sessions-list-wrap.payman-v2-scroll-shadow-bottom::after {
442
+ opacity: 1;
443
+ }
444
+ .payman-v2-sessions-list {
445
+ flex: 1 1 0%;
446
+ min-height: 0;
447
+ overflow-y: auto;
448
+ padding: 2px 8px 8px;
449
+ scrollbar-width: thin;
450
+ scrollbar-color: var(--payman-v2-border-1) transparent;
451
+ scrollbar-gutter: stable;
452
+ }
453
+ .payman-v2-sessions-list::-webkit-scrollbar {
454
+ width: 6px;
455
+ }
456
+ .payman-v2-sessions-list::-webkit-scrollbar-track {
457
+ background: transparent;
458
+ }
459
+ .payman-v2-sessions-list::-webkit-scrollbar-thumb {
460
+ background: var(--payman-v2-border-1);
461
+ border-radius: 3px;
462
+ }
463
+ .payman-v2-sessions-list::-webkit-scrollbar-thumb:hover {
464
+ background: var(--payman-v2-text-4);
465
+ }
466
+ .payman-v2-sessions-list-compact {
467
+ padding: 2px 6px 6px;
468
+ }
469
+ .payman-v2-sessions-empty,
470
+ .payman-v2-sessions-error {
471
+ display: flex;
472
+ flex-direction: column;
473
+ align-items: center;
474
+ justify-content: center;
475
+ gap: 8px;
476
+ min-height: 100%;
477
+ padding: 32px 16px;
478
+ text-align: center;
479
+ color: var(--payman-v2-text-3);
480
+ }
481
+ .payman-v2-sessions-empty p,
482
+ .payman-v2-sessions-error p {
483
+ margin: 0;
484
+ font-size: 13px;
485
+ line-height: 1.5;
486
+ max-width: 200px;
487
+ }
488
+ .payman-v2-sessions-error {
489
+ color: var(--payman-v2-error-color);
490
+ }
491
+ .payman-v2-sessions-error svg {
492
+ opacity: 0.9;
493
+ }
494
+ .payman-v2-sessions-retry-btn {
495
+ margin-top: 2px;
496
+ padding: 6px 14px;
497
+ border: 1px solid var(--payman-v2-border-1);
498
+ border-radius: var(--payman-v2-radius-full);
499
+ background: var(--payman-v2-bg);
500
+ color: var(--payman-v2-text-1);
501
+ font-size: 12px;
502
+ font-weight: 500;
503
+ cursor: pointer;
504
+ transition: background 0.15s ease;
505
+ }
506
+ .payman-v2-sessions-retry-btn:hover {
507
+ background: var(--payman-v2-hover);
508
+ }
509
+ .payman-v2-sessions-load-more-btn {
510
+ display: flex;
511
+ align-items: center;
512
+ justify-content: center;
513
+ width: 100%;
514
+ min-height: 34px;
515
+ margin: 6px 0 2px;
516
+ padding: 7px 14px;
517
+ border: 1px solid var(--payman-v2-border-1);
518
+ border-radius: var(--payman-v2-radius-md);
519
+ background: var(--payman-v2-bg);
520
+ color: var(--payman-v2-text-2);
521
+ font-size: 12px;
522
+ font-weight: 500;
523
+ cursor: pointer;
524
+ transition: background 0.15s ease;
525
+ }
526
+ .payman-v2-sessions-load-more-btn:hover:not(:disabled) {
527
+ background: var(--payman-v2-hover);
528
+ }
529
+ .payman-v2-sessions-load-more-btn:disabled {
530
+ cursor: default;
531
+ }
532
+ .payman-v2-spinner-sm {
533
+ width: 15px;
534
+ height: 15px;
535
+ border-width: 2px;
536
+ }
537
+ @keyframes payman-v2-spin {
538
+ to {
539
+ transform: rotate(360deg);
540
+ }
541
+ }
542
+ .payman-v2-spinner {
543
+ display: inline-block;
544
+ width: 22px;
545
+ height: 22px;
546
+ border-radius: 50%;
547
+ border: 2px solid var(--payman-v2-border-1);
548
+ border-top-color: var(--payman-primary, #0f766e);
549
+ animation: payman-v2-spin 0.7s linear infinite;
550
+ }
551
+ .payman-v2-chat-loading {
552
+ flex: 1 1 0%;
553
+ display: flex;
554
+ align-items: center;
555
+ justify-content: center;
556
+ min-height: 0;
557
+ }
558
+ .payman-v2-messages-loading-overlay {
559
+ position: absolute;
560
+ inset: 0;
561
+ z-index: 6;
562
+ display: flex;
563
+ align-items: center;
564
+ justify-content: center;
565
+ background: var(--payman-v2-bg);
566
+ }
567
+ .payman-v2-sessions-skeleton {
568
+ display: flex;
569
+ flex-direction: column;
570
+ gap: 2px;
571
+ padding: 4px 4px 0;
572
+ }
573
+ .payman-v2-sessions-skeleton-row {
574
+ display: flex;
575
+ flex-direction: column;
576
+ gap: 8px;
577
+ padding: 9px 10px;
578
+ }
579
+ .payman-v2-sessions-skeleton-meta {
580
+ display: flex;
581
+ align-items: center;
582
+ justify-content: space-around;
583
+ }
584
+ .payman-v2-sessions-skeleton-line {
585
+ border-radius: var(--payman-v2-radius-sm);
586
+ background: rgba(128, 128, 128, 0.25);
587
+ animation: payman-v2-sessions-shimmer 1.6s ease-in-out infinite;
588
+ }
589
+ .payman-v2-sessions-skeleton-line-title {
590
+ height: 10px;
591
+ }
592
+ .payman-v2-sessions-skeleton-pill {
593
+ height: 8px;
594
+ width: 38%;
595
+ border-radius: var(--payman-v2-radius-full);
596
+ }
597
+ @keyframes payman-v2-sessions-shimmer {
598
+ 0%, 100% {
599
+ opacity: 0.45;
600
+ }
601
+ 50% {
602
+ opacity: 1;
603
+ }
604
+ }
605
+ .payman-v2-session-row {
606
+ border-radius: var(--payman-v2-radius-md);
607
+ margin-bottom: 1px;
608
+ position: relative;
609
+ display: flex;
610
+ align-items: stretch;
611
+ }
612
+ .payman-v2-session-row-main {
613
+ flex: 1 1 0%;
614
+ min-width: 0;
615
+ display: flex;
616
+ flex-direction: column;
617
+ gap: 3px;
618
+ padding: 6px 8px;
619
+ border: none;
620
+ background: transparent;
621
+ border-radius: var(--payman-v2-radius-md);
622
+ text-align: left;
623
+ cursor: pointer;
624
+ transition: background 0.15s ease;
625
+ }
626
+ .payman-v2-session-row-main:hover {
627
+ background: var(--payman-v2-hover);
628
+ }
629
+ .payman-v2-session-row-selected .payman-v2-session-row-main {
630
+ background: color-mix(in srgb, var(--payman-primary, #0f766e) 12%, transparent);
631
+ }
632
+ .payman-v2-session-row-selected .payman-v2-session-row-main:hover {
633
+ background: color-mix(in srgb, var(--payman-primary, #0f766e) 16%, transparent);
634
+ }
635
+ .payman-v2-session-row-selected .payman-v2-session-row-title {
636
+ color: var(--payman-primary, #0f766e);
637
+ }
638
+ .payman-v2-session-row-title {
639
+ font-size: 13px;
640
+ font-weight: 500;
641
+ line-height: 1.3;
642
+ color: var(--payman-v2-text-1);
643
+ white-space: nowrap;
644
+ overflow: hidden;
645
+ }
646
+ .payman-v2-session-row-title[data-truncated=true] {
647
+ -webkit-mask-image:
648
+ linear-gradient(
649
+ to right,
650
+ #000 calc(100% - 12px),
651
+ transparent 100%);
652
+ mask-image:
653
+ linear-gradient(
654
+ to right,
655
+ #000 calc(100% - 12px),
656
+ transparent 100%);
657
+ }
658
+ .payman-v2-session-row-title[data-truncated=true][data-scrolling=true] {
659
+ -webkit-mask-image:
660
+ linear-gradient(
661
+ to right,
662
+ transparent 0,
663
+ #000 12px,
664
+ #000 calc(100% - 12px),
665
+ transparent 100%);
666
+ mask-image:
667
+ linear-gradient(
668
+ to right,
669
+ transparent 0,
670
+ #000 12px,
671
+ #000 calc(100% - 12px),
672
+ transparent 100%);
673
+ }
674
+ .payman-v2-session-row-title-text {
675
+ display: inline-block;
676
+ white-space: nowrap;
677
+ transition: transform 0.35s linear;
678
+ will-change: transform;
679
+ }
680
+ .payman-v2-session-row-meta {
681
+ display: flex;
682
+ align-items: center;
683
+ gap: 8px;
684
+ }
685
+ .payman-v2-session-row-meta-item {
686
+ display: inline-flex;
687
+ align-items: center;
688
+ gap: 4px;
689
+ font-size: 10.5px;
690
+ color: var(--payman-v2-text-3);
691
+ white-space: nowrap;
692
+ }
693
+ .payman-v2-session-row-meta-item:first-child {
694
+ flex-shrink: 0;
695
+ min-width: 88px;
696
+ }
697
+ .payman-v2-session-row-meta-item svg {
698
+ flex-shrink: 0;
699
+ opacity: 0.85;
700
+ }
701
+ .payman-v2-session-row-menu-wrap {
702
+ position: relative;
703
+ flex-shrink: 0;
704
+ display: flex;
705
+ align-items: center;
706
+ padding-right: 4px;
707
+ }
708
+ .payman-v2-session-row-menu-btn {
709
+ display: inline-flex;
710
+ align-items: center;
711
+ justify-content: center;
712
+ width: 24px;
713
+ height: 24px;
714
+ border: none;
715
+ background: transparent;
716
+ border-radius: var(--payman-v2-radius-sm);
717
+ color: var(--payman-v2-text-3);
718
+ cursor: pointer;
719
+ opacity: 0;
720
+ transition:
721
+ opacity 0.15s ease,
722
+ background 0.15s ease,
723
+ color 0.15s ease;
724
+ }
725
+ .payman-v2-session-row:hover .payman-v2-session-row-menu-btn,
726
+ .payman-v2-session-row-menu-btn-active {
727
+ opacity: 1;
728
+ }
729
+ .payman-v2-session-row-menu-btn:hover {
730
+ background: var(--payman-v2-hover);
731
+ color: var(--payman-v2-text-1);
732
+ }
733
+ .payman-v2-session-row-menu {
734
+ position: absolute;
735
+ right: 4px;
736
+ top: calc(100% + 2px);
737
+ z-index: 20;
738
+ min-width: 140px;
739
+ padding: 4px;
740
+ border-radius: var(--payman-v2-radius-md);
741
+ border: 1px solid var(--payman-v2-border-1);
742
+ background: var(--payman-v2-bg);
743
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
744
+ }
745
+ .payman-v2-session-row-menu-item {
746
+ display: block;
747
+ width: 100%;
748
+ padding: 7px 10px;
749
+ border: none;
750
+ background: transparent;
751
+ border-radius: var(--payman-v2-radius-sm);
752
+ font-size: 13px;
753
+ color: var(--payman-v2-text-1);
754
+ text-align: left;
755
+ cursor: pointer;
756
+ }
757
+ .payman-v2-session-row-menu-item:hover {
758
+ background: var(--payman-v2-hover);
759
+ }
760
+ .payman-v2-session-row-menu-item-destructive {
761
+ color: var(--payman-v2-error-color);
762
+ }
763
+ .payman-v2-sessions-new-btn {
764
+ display: flex;
765
+ align-items: center;
766
+ gap: 8px;
767
+ flex-shrink: 0;
768
+ width: calc(100% - 16px);
769
+ margin: 2px 8px 8px;
770
+ padding: 7px 8px;
771
+ border: none;
772
+ border-radius: var(--payman-v2-radius-md);
773
+ background: var(--payman-primary, #0f766e);
774
+ color: #ffffff;
775
+ font-size: 13px;
776
+ font-weight: 600;
777
+ text-align: left;
778
+ cursor: pointer;
779
+ transition: background 0.15s ease;
780
+ }
781
+ .payman-v2-sessions-new-btn:hover {
782
+ background: color-mix(in srgb, var(--payman-primary, #0f766e) 88%, black);
783
+ }
784
+ .payman-v2-sessions-new-btn:active {
785
+ background: color-mix(in srgb, var(--payman-primary, #0f766e) 78%, black);
786
+ }
787
+ .payman-v2-sessions-new-btn svg {
788
+ flex-shrink: 0;
789
+ display: block;
790
+ }
791
+ .payman-v2-sessions-divider {
792
+ flex-shrink: 0;
793
+ height: 1px;
794
+ margin: 2px 14px 8px;
795
+ background:
796
+ linear-gradient(
797
+ to right,
798
+ transparent,
799
+ var(--payman-v2-border-1) 15%,
800
+ var(--payman-v2-border-1) 85%,
801
+ transparent);
802
+ }
803
+ .payman-v2-sessions-sheet-backdrop {
804
+ position: absolute;
805
+ inset: 0;
806
+ background: rgba(0, 0, 0, 0.4);
807
+ z-index: 40;
808
+ }
809
+ .payman-v2-sessions-sheet {
810
+ position: absolute;
811
+ left: 0;
812
+ right: 0;
813
+ bottom: 0;
814
+ z-index: 41;
815
+ max-height: 75%;
816
+ display: flex;
817
+ flex-direction: column;
818
+ background: var(--payman-v2-bg-secondary);
819
+ border: 1px solid var(--payman-v2-border-1);
820
+ border-bottom: none;
821
+ border-top-left-radius: var(--payman-v2-radius-lg);
822
+ border-top-right-radius: var(--payman-v2-radius-lg);
823
+ box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
824
+ overflow: hidden;
825
+ }
826
+ .payman-v2-sessions-sheet-grabber {
827
+ width: 36px;
828
+ height: 4px;
829
+ border-radius: var(--payman-v2-radius-full);
830
+ background: var(--payman-v2-border-1);
831
+ margin: 10px auto 2px;
832
+ flex-shrink: 0;
833
+ }
222
834
  .payman-v2-empty-state {
223
835
  flex: 1 1 0%;
224
836
  display: flex;
@@ -1097,7 +1709,7 @@
1097
1709
  display: flex;
1098
1710
  align-items: center;
1099
1711
  justify-content: space-between;
1100
- padding: 0.125rem 0.75rem 0.625rem;
1712
+ padding: 0.125rem 0.75rem 0.75rem;
1101
1713
  }
1102
1714
  .payman-v2-input-controls-left {
1103
1715
  display: flex;