@paymanai/payman-ask-sdk 2.0.5 → 4.0.0

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
@@ -108,10 +108,10 @@
108
108
  }
109
109
  @keyframes payman-v2-thinking-shimmer {
110
110
  0% {
111
- background-position: 300% 0;
111
+ background-position: 220% 0;
112
112
  }
113
113
  100% {
114
- background-position: -300% 0;
114
+ background-position: -220% 0;
115
115
  }
116
116
  }
117
117
  @keyframes payman-v2-fade-in {
@@ -173,17 +173,17 @@
173
173
  linear-gradient(
174
174
  90deg,
175
175
  var(--payman-v2-thinking-shimmer-dim) 0%,
176
- var(--payman-v2-thinking-shimmer-dim) 32%,
177
- var(--payman-v2-thinking-shimmer-mid) 46%,
176
+ var(--payman-v2-thinking-shimmer-dim) 36%,
177
+ var(--payman-v2-thinking-shimmer-mid) 48%,
178
178
  var(--payman-v2-thinking-shimmer-bright) 50%,
179
- var(--payman-v2-thinking-shimmer-mid) 54%,
180
- var(--payman-v2-thinking-shimmer-dim) 68%,
179
+ var(--payman-v2-thinking-shimmer-mid) 52%,
180
+ var(--payman-v2-thinking-shimmer-dim) 64%,
181
181
  var(--payman-v2-thinking-shimmer-dim) 100%);
182
- background-size: 280% 100%;
182
+ background-size: 220% 100%;
183
183
  -webkit-background-clip: text;
184
184
  -webkit-text-fill-color: transparent;
185
185
  background-clip: text;
186
- animation: payman-v2-thinking-shimmer 1.85s linear infinite;
186
+ animation: payman-v2-thinking-shimmer 2.8s ease-in-out infinite;
187
187
  }
188
188
  .payman-v2-scrollbar::-webkit-scrollbar {
189
189
  width: 6px;
@@ -275,7 +275,7 @@
275
275
  }
276
276
  }
277
277
  .payman-v2-message-scroll-inner > * + * {
278
- margin-top: 1.5rem;
278
+ margin-top: 2.25rem;
279
279
  }
280
280
  .payman-v2-scroll-to-bottom {
281
281
  position: absolute;
@@ -457,7 +457,7 @@
457
457
  flex-direction: column;
458
458
  align-items: flex-start;
459
459
  width: 100%;
460
- min-width: 0;
460
+ padding-bottom: 2rem;
461
461
  }
462
462
  .payman-v2-assistant-msg-thinking-only {
463
463
  font-size: var(--payman-v2-body-font-size);
@@ -479,10 +479,7 @@
479
479
  border-radius: var(--payman-v2-radius-xl);
480
480
  background: var(--payman-v2-error-bg);
481
481
  border: 1px solid var(--payman-v2-error-border);
482
- box-sizing: border-box;
483
- width: 100%;
484
- max-width: min(24rem, 100%);
485
- min-width: 0;
482
+ max-width: 24rem;
486
483
  }
487
484
  .payman-v2-assistant-msg-error-icon {
488
485
  color: rgba(239, 68, 68, 0.7);
@@ -494,13 +491,6 @@
494
491
  color: var(--payman-v2-text-1);
495
492
  line-height: 1.625;
496
493
  margin: 0;
497
- overflow-wrap: anywhere;
498
- word-break: break-word;
499
- }
500
- .payman-v2-assistant-msg-error > div,
501
- .payman-v2-assistant-msg-partial-error > div {
502
- min-width: 0;
503
- flex: 1 1 0%;
504
494
  }
505
495
  .payman-v2-assistant-msg-retry-btn {
506
496
  display: inline-flex;
@@ -560,10 +550,7 @@
560
550
  border-radius: var(--payman-v2-radius-xl);
561
551
  background: var(--payman-v2-error-bg);
562
552
  border: 1px solid var(--payman-v2-error-border);
563
- box-sizing: border-box;
564
- width: 100%;
565
- max-width: min(24rem, 100%);
566
- min-width: 0;
553
+ max-width: 24rem;
567
554
  }
568
555
  .payman-v2-assistant-msg-actions {
569
556
  display: flex;
@@ -598,6 +585,15 @@
598
585
  color: var(--payman-v2-text-1);
599
586
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
600
587
  }
588
+ .payman-v2-assistant-msg-elapsed {
589
+ font-size: var(--payman-v2-small-font-size);
590
+ color: var(--payman-v2-text-4);
591
+ font-variant-numeric: tabular-nums;
592
+ margin-left: 0.25rem;
593
+ -webkit-user-select: none;
594
+ -moz-user-select: none;
595
+ user-select: none;
596
+ }
601
597
  .payman-v2-thinking {
602
598
  margin-bottom: 0.75rem;
603
599
  }
@@ -629,55 +625,6 @@
629
625
  .payman-v2-thinking-chevron-open {
630
626
  transform: rotate(90deg);
631
627
  }
632
- .payman-v2-thinking-header-label {
633
- display: inline-flex;
634
- align-items: center;
635
- gap: 0.5rem;
636
- }
637
- .payman-v2-thinking-seconds {
638
- display: inline-flex;
639
- align-items: center;
640
- gap: 1px;
641
- font-variant-numeric: tabular-nums;
642
- font-feature-settings: "tnum" 1;
643
- }
644
- .payman-v2-thinking-seconds-track {
645
- display: grid;
646
- place-items: center;
647
- min-width: 1.4ch;
648
- overflow: hidden;
649
- }
650
- .payman-v2-thinking-seconds-value {
651
- grid-area: 1 / 1;
652
- display: inline-block;
653
- will-change:
654
- transform,
655
- opacity,
656
- filter;
657
- }
658
- .payman-v2-thinking-seconds-suffix {
659
- display: inline-block;
660
- }
661
- .payman-v2-thinking-timer {
662
- display: inline-flex;
663
- align-items: center;
664
- min-width: 1.75rem;
665
- padding: 1px 7px;
666
- border-radius: 9999px;
667
- background: var(--payman-v2-hover);
668
- color: var(--payman-v2-text-4);
669
- font-size: 10.5px;
670
- font-weight: 500;
671
- letter-spacing: 0.02em;
672
- line-height: 1.4;
673
- transition: color 0.2s ease, background-color 0.2s ease;
674
- }
675
- .payman-v2-thinking-duration {
676
- color: currentColor;
677
- }
678
- .payman-v2-thinking-toggle:hover .payman-v2-thinking-timer {
679
- color: var(--payman-v2-text-3);
680
- }
681
628
  .payman-v2-thinking-content {
682
629
  overflow: hidden;
683
630
  }
@@ -726,16 +673,18 @@
726
673
  .payman-v2-thinking-cursor {
727
674
  display: flex;
728
675
  align-items: center;
729
- gap: 0.5rem;
676
+ gap: 0.375rem;
730
677
  margin-top: 0.25rem;
731
678
  height: 18px;
732
679
  }
733
- .payman-v2-thinking-mark {
734
- width: 16px;
735
- height: 16px;
680
+ .payman-v2-thinking-cursor-bar {
681
+ display: inline-block;
682
+ width: 5px;
683
+ height: 12px;
684
+ background: var(--payman-v2-thinking-cursor-color);
685
+ border-radius: 2px;
736
686
  flex-shrink: 0;
737
- color: var(--payman-v2-thinking-mark-color-override, #7AE5E0);
738
- overflow: visible;
687
+ animation: payman-v2-cursor-blink 1s ease-in-out infinite;
739
688
  }
740
689
  .payman-v2-thinking-cursor-label {
741
690
  font-size: var(--payman-v2-small-font-size);
@@ -744,6 +693,15 @@
744
693
  -moz-user-select: none;
745
694
  user-select: none;
746
695
  }
696
+ .payman-v2-thinking-sticky {
697
+ font-size: var(--payman-v2-small-font-size);
698
+ line-height: 1.5;
699
+ color: var(--payman-v2-thinking-statement-color);
700
+ -webkit-user-select: text;
701
+ -moz-user-select: text;
702
+ user-select: text;
703
+ margin-bottom: 0.125rem;
704
+ }
747
705
  .payman-v2-markdown p {
748
706
  margin-bottom: 1rem;
749
707
  font-size: var(--payman-v2-body-font-size);
@@ -802,31 +760,36 @@
802
760
  padding-left: 0.25rem;
803
761
  }
804
762
  .payman-v2-markdown h1 {
805
- font-size: 1.25rem;
806
- font-weight: 600;
807
- color: var(--payman-v2-text-1);
808
- margin-top: 1.5rem;
809
- margin-bottom: 0.75rem;
763
+ font-size: 0.8125rem !important;
764
+ font-weight: 700 !important;
765
+ line-height: 1.4 !important;
766
+ color: var(--payman-v2-text-1) !important;
767
+ margin-top: 1rem !important;
768
+ margin-bottom: 0.4rem !important;
810
769
  }
811
770
  .payman-v2-markdown h1:first-child {
812
771
  margin-top: 0;
813
772
  }
814
773
  .payman-v2-markdown h2 {
815
- font-size: 1.125rem;
816
- font-weight: 600;
817
- color: var(--payman-v2-text-1);
818
- margin-top: 1.5rem;
819
- margin-bottom: 0.75rem;
774
+ font-size: 0.8125rem !important;
775
+ font-weight: 700 !important;
776
+ line-height: 1.4 !important;
777
+ color: var(--payman-v2-text-1) !important;
778
+ text-decoration: none !important;
779
+ margin-top: 0.875rem !important;
780
+ margin-bottom: 0.35rem !important;
820
781
  }
821
782
  .payman-v2-markdown h2:first-child {
822
783
  margin-top: 0;
823
784
  }
824
785
  .payman-v2-markdown h3 {
825
- font-size: 1rem;
826
- font-weight: 600;
827
- color: var(--payman-v2-text-1);
828
- margin-top: 1.25rem;
829
- margin-bottom: 0.5rem;
786
+ font-size: 0.8125rem !important;
787
+ font-weight: 700 !important;
788
+ line-height: 1.4 !important;
789
+ color: var(--payman-v2-text-1) !important;
790
+ text-decoration: none !important;
791
+ margin-top: 0.75rem !important;
792
+ margin-bottom: 0.3rem !important;
830
793
  }
831
794
  .payman-v2-markdown h3:first-child {
832
795
  margin-top: 0;
@@ -864,8 +827,8 @@
864
827
  margin: 1rem 0;
865
828
  width: 100%;
866
829
  overflow-x: auto;
867
- border-radius: var(--payman-v2-radius-xl);
868
- border: 1px solid var(--payman-v2-code-border);
830
+ border-radius: var(--payman-v2-radius-sm);
831
+ border: 1px solid color-mix(in srgb, var(--payman-v2-code-border) 40%, transparent) !important;
869
832
  }
870
833
  .payman-v2-markdown-table {
871
834
  min-width: 100%;
@@ -889,10 +852,40 @@
889
852
  }
890
853
  .payman-v2-markdown-td {
891
854
  padding: 0.75rem 1rem;
892
- font-size: 0.875rem;
855
+ font-size: 0.8125rem !important;
893
856
  color: var(--payman-v2-text-1);
894
857
  white-space: nowrap;
895
858
  }
859
+ .payman-v2-streaming-indicator {
860
+ display: flex;
861
+ justify-content: flex-start;
862
+ align-items: center;
863
+ gap: 0.5rem;
864
+ width: 100%;
865
+ max-width: var(--payman-v2-max-content-width);
866
+ margin: 0 auto;
867
+ padding: 0.125rem 1rem 0.375rem;
868
+ pointer-events: none;
869
+ }
870
+ @media (min-width: 640px) {
871
+ .payman-v2-streaming-indicator {
872
+ padding-left: 1.25rem;
873
+ padding-right: 1.25rem;
874
+ }
875
+ }
876
+ .payman-v2-streaming-indicator-glyph {
877
+ display: flex;
878
+ align-items: center;
879
+ justify-content: center;
880
+ }
881
+ .payman-v2-streaming-indicator-elapsed {
882
+ font-size: var(--payman-v2-small-font-size);
883
+ color: var(--payman-v2-text-3);
884
+ font-variant-numeric: tabular-nums;
885
+ -webkit-user-select: none;
886
+ -moz-user-select: none;
887
+ user-select: none;
888
+ }
896
889
  .payman-v2-input-container {
897
890
  width: 100%;
898
891
  max-width: var(--payman-v2-max-content-width);
@@ -1074,6 +1067,12 @@
1074
1067
  opacity: 1;
1075
1068
  transform: translateX(-50%) translateY(0);
1076
1069
  }
1070
+ .payman-v2-input-mode-toggle[data-mode=deep] {
1071
+ color: var(--payman-v2-accent, #2F81F7);
1072
+ }
1073
+ .payman-v2-input-mode-toggle[data-mode=deep]:hover:not(:disabled) {
1074
+ background: color-mix(in srgb, var(--payman-v2-accent, #2F81F7) 12%, transparent);
1075
+ }
1077
1076
  .payman-v2-input-attach-btn {
1078
1077
  padding: 0.375rem;
1079
1078
  border-radius: var(--payman-v2-radius-full);
@@ -1251,20 +1250,6 @@
1251
1250
  border: 1px solid var(--payman-v2-verification-border);
1252
1251
  background: var(--payman-v2-verification-bg);
1253
1252
  overflow: hidden;
1254
- position: relative;
1255
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1256
- }
1257
- .payman-v2-verification-card-busy {
1258
- animation: payman-v2-verification-card-pulse 1.25s ease-in-out infinite;
1259
- border-color: rgba(10, 59, 68, 0.42);
1260
- }
1261
- @keyframes payman-v2-verification-card-pulse {
1262
- 0%, 100% {
1263
- box-shadow: 0 0 0 0 rgba(10, 59, 68, 0.08), 0 8px 20px rgba(0, 0, 0, 0.04);
1264
- }
1265
- 50% {
1266
- box-shadow: 0 0 0 4px rgba(10, 59, 68, 0.12), 0 12px 28px rgba(0, 0, 0, 0.07);
1267
- }
1268
1253
  }
1269
1254
  .payman-v2-verification-header {
1270
1255
  padding: 0.875rem 1rem 0.75rem;
@@ -1308,18 +1293,29 @@
1308
1293
  line-height: 1.4;
1309
1294
  margin: 0 0 0.75rem;
1310
1295
  }
1296
+ .payman-v2-verification-submitting {
1297
+ display: flex;
1298
+ align-items: center;
1299
+ justify-content: center;
1300
+ gap: 0.375rem;
1301
+ margin-top: 0.5rem;
1302
+ }
1303
+ .payman-v2-verification-submitting-text {
1304
+ font-size: 11px;
1305
+ color: var(--payman-v2-text-3);
1306
+ }
1311
1307
  .payman-v2-verification-actions {
1312
1308
  display: flex;
1313
- align-items: stretch;
1309
+ align-items: center;
1314
1310
  border-top: 1px solid var(--payman-v2-verification-border);
1315
1311
  }
1312
+ .payman-v2-verification-resend-btn,
1316
1313
  .payman-v2-verification-cancel-btn {
1317
1314
  flex: 1;
1318
1315
  display: flex;
1319
1316
  align-items: center;
1320
1317
  justify-content: center;
1321
1318
  gap: 0.25rem;
1322
- width: 100%;
1323
1319
  padding: 0.5rem;
1324
1320
  font-size: 11px;
1325
1321
  font-weight: 500;
@@ -1328,38 +1324,27 @@
1328
1324
  cursor: pointer;
1329
1325
  transition: color 0.15s, background-color 0.15s;
1330
1326
  font-family: inherit;
1327
+ }
1328
+ .payman-v2-verification-resend-btn {
1329
+ color: var(--payman-v2-text-3);
1330
+ border-right: 1px solid var(--payman-v2-verification-border);
1331
+ }
1332
+ .payman-v2-verification-resend-btn:hover {
1333
+ color: var(--payman-v2-text-2);
1334
+ background: var(--payman-v2-hover);
1335
+ }
1336
+ .payman-v2-verification-cancel-btn {
1331
1337
  color: rgba(239, 68, 68, 0.7);
1332
1338
  }
1333
1339
  .payman-v2-verification-cancel-btn:hover {
1334
1340
  color: var(--payman-v2-error-color);
1335
1341
  background: var(--payman-v2-error-bg);
1336
1342
  }
1343
+ .payman-v2-verification-resend-btn:disabled,
1337
1344
  .payman-v2-verification-cancel-btn:disabled {
1338
1345
  opacity: 0.4;
1339
1346
  cursor: not-allowed;
1340
1347
  }
1341
- .payman-v2-verification-resend-link {
1342
- display: block;
1343
- width: 100%;
1344
- margin-top: 0.5rem;
1345
- padding: 0;
1346
- font-size: 11px;
1347
- font-weight: 500;
1348
- font-family: inherit;
1349
- text-align: center;
1350
- color: var(--payman-v2-text-3);
1351
- background: none;
1352
- border: none;
1353
- cursor: pointer;
1354
- transition: color 0.15s;
1355
- }
1356
- .payman-v2-verification-resend-link:hover:not(:disabled) {
1357
- color: var(--payman-v2-text-2);
1358
- }
1359
- .payman-v2-verification-resend-link:disabled {
1360
- opacity: 0.4;
1361
- cursor: not-allowed;
1362
- }
1363
1348
  .payman-v2-otp {
1364
1349
  display: flex;
1365
1350
  justify-content: center;
@@ -1733,7 +1718,6 @@
1733
1718
  align-items: center;
1734
1719
  justify-content: center;
1735
1720
  gap: 0.5rem;
1736
- pointer-events: none;
1737
1721
  }
1738
1722
  .payman-v2-md-image-placeholder {
1739
1723
  display: flex;
@@ -1932,31 +1916,22 @@
1932
1916
  .payman-v2-toast-inner {
1933
1917
  display: inline-flex;
1934
1918
  align-items: center;
1935
- gap: 0.5rem;
1919
+ gap: 0.375rem;
1936
1920
  border-radius: 9999px;
1937
- border: none;
1938
- padding: 0.5rem 1rem;
1939
- font-size: 0.875rem;
1940
- backdrop-filter: blur(12px);
1941
- box-shadow: var(--payman-v2-shadow-input);
1921
+ border: 1px solid;
1922
+ padding: 0.375rem 0.75rem;
1923
+ font-size: 0.75rem;
1924
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06);
1942
1925
  }
1943
1926
  .payman-v2-toast-success {
1944
- background: rgba(255, 255, 255, 0.95);
1945
- color: var(--payman-v2-text-1);
1927
+ border-color: rgba(5, 150, 105, 0.3);
1928
+ background: rgba(33, 33, 33, 1);
1929
+ color: rgba(255, 255, 255, 0.9);
1946
1930
  }
1947
1931
  .payman-v2-toast-error {
1948
- background: rgba(255, 255, 255, 0.95);
1949
- color: var(--payman-v2-text-1);
1950
- }
1951
- @media (prefers-color-scheme: dark) {
1952
- .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-success,
1953
- .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-error {
1954
- background: rgba(33, 33, 33, 0.95);
1955
- }
1956
- }
1957
- .payman-v2-root.payman-v2-dark .payman-v2-toast-success,
1958
- .payman-v2-root.payman-v2-dark .payman-v2-toast-error {
1959
- background: rgba(33, 33, 33, 0.95);
1932
+ border-color: rgba(239, 68, 68, 0.3);
1933
+ background: rgba(33, 33, 33, 1);
1934
+ color: rgba(255, 255, 255, 0.9);
1960
1935
  }
1961
1936
  .payman-v2-response-files {
1962
1937
  display: flex;
@@ -1964,451 +1939,6 @@
1964
1939
  gap: 0.5rem;
1965
1940
  width: 100%;
1966
1941
  }
1967
- .payman-sidebar {
1968
- position: relative;
1969
- min-height: 0;
1970
- background:
1971
- linear-gradient(
1972
- 180deg,
1973
- color-mix(in srgb, var(--payman-v2-bg-secondary) 62%, transparent),
1974
- var(--payman-v2-bg));
1975
- color: var(--payman-v2-text-1);
1976
- }
1977
- .payman-sidebar-desktop {
1978
- flex: 0 0 auto;
1979
- border-right: 1px solid var(--payman-v2-border-1);
1980
- }
1981
- .payman-sidebar-popover {
1982
- border: 1px solid var(--payman-v2-border-1);
1983
- border-radius: var(--payman-v2-radius-xl);
1984
- background: color-mix(in srgb, var(--payman-v2-bg) 96%, transparent);
1985
- backdrop-filter: blur(18px);
1986
- box-shadow: 0 20px 40px -28px rgba(15, 23, 42, 0.35);
1987
- }
1988
- .payman-sidebar-topbar {
1989
- display: flex;
1990
- flex-direction: column;
1991
- align-items: stretch;
1992
- border-bottom: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 85%, transparent);
1993
- color: var(--payman-v2-text-2);
1994
- }
1995
- .payman-sidebar-header {
1996
- display: flex;
1997
- align-items: center;
1998
- justify-content: space-between;
1999
- gap: 0.5rem;
2000
- padding: 0.45rem 0.5rem 0.4rem;
2001
- border-bottom: none;
2002
- font-size: 1rem;
2003
- font-weight: 600;
2004
- letter-spacing: 0.01em;
2005
- color: inherit;
2006
- text-transform: none;
2007
- }
2008
- .payman-sidebar-header-title {
2009
- text-transform: none;
2010
- letter-spacing: 0.02em;
2011
- font-size: 0.875rem;
2012
- }
2013
- .payman-sidebar-topbar.has-new-session .payman-sidebar-header {
2014
- padding-bottom: 0.25rem;
2015
- }
2016
- .payman-sidebar-header-icon-button,
2017
- .payman-sidebar-collapsed-button {
2018
- display: inline-flex;
2019
- align-items: center;
2020
- justify-content: center;
2021
- width: 1.45rem;
2022
- height: 1.45rem;
2023
- border: 1px solid transparent;
2024
- border-radius: var(--payman-v2-radius-full);
2025
- background: transparent;
2026
- color: var(--payman-v2-text-3);
2027
- cursor: pointer;
2028
- transition:
2029
- background-color 0.16s ease,
2030
- border-color 0.16s ease,
2031
- color 0.16s ease,
2032
- transform 0.16s ease;
2033
- }
2034
- .payman-sidebar-header-icon-button:hover,
2035
- .payman-sidebar-collapsed-button:hover {
2036
- background: var(--payman-v2-hover);
2037
- border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
2038
- color: var(--payman-v2-text-1);
2039
- }
2040
- .payman-sidebar-header-icon-button:active,
2041
- .payman-sidebar-collapsed-button:active {
2042
- transform: scale(0.96);
2043
- }
2044
- .payman-sidebar-new-session-wrap {
2045
- display: flex;
2046
- padding: 0.375rem 0.5rem 0.5rem;
2047
- }
2048
- .payman-sidebar-new-session-button {
2049
- -webkit-appearance: none;
2050
- -moz-appearance: none;
2051
- appearance: none;
2052
- box-sizing: border-box;
2053
- flex: 0 0 auto;
2054
- align-self: stretch;
2055
- display: inline-flex;
2056
- align-items: center;
2057
- justify-content: center;
2058
- gap: 0.3rem;
2059
- width: 100%;
2060
- min-width: 0;
2061
- height: auto;
2062
- min-height: 1.75rem;
2063
- padding: 0 0.55rem;
2064
- border: 1px solid var(--payman-v2-btn-primary);
2065
- border-radius: var(--payman-v2-radius-md);
2066
- background: var(--payman-v2-btn-primary);
2067
- color: var(--payman-v2-btn-primary-text);
2068
- cursor: pointer;
2069
- font: inherit;
2070
- font-size: 0.7rem;
2071
- font-weight: 600;
2072
- line-height: 1;
2073
- white-space: nowrap;
2074
- box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
2075
- transition:
2076
- background-color 0.16s ease,
2077
- border-color 0.16s ease,
2078
- opacity 0.16s ease,
2079
- transform 0.16s ease;
2080
- }
2081
- .payman-sidebar-new-session-button span {
2082
- min-width: 0;
2083
- overflow: hidden;
2084
- text-overflow: ellipsis;
2085
- }
2086
- .payman-sidebar-new-session-button:hover:not(:disabled) {
2087
- background: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
2088
- border-color: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
2089
- }
2090
- .payman-sidebar-new-session-button:active:not(:disabled) {
2091
- transform: scale(0.98);
2092
- }
2093
- .payman-sidebar-new-session-button:disabled {
2094
- cursor: not-allowed;
2095
- opacity: 0.48;
2096
- }
2097
- .payman-sidebar-mobile-trigger,
2098
- .payman-sidebar-collapsed {
2099
- position: relative;
2100
- z-index: 3;
2101
- }
2102
- .payman-sidebar-mobile-trigger {
2103
- display: flex;
2104
- width: 100%;
2105
- flex-shrink: 0;
2106
- align-items: center;
2107
- justify-content: flex-start;
2108
- padding: 0.35rem 0.5rem 0.1rem;
2109
- }
2110
- .payman-sidebar-mobile-trigger-button {
2111
- width: 1.75rem;
2112
- height: 1.75rem;
2113
- border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
2114
- background: color-mix(in srgb, var(--payman-v2-bg) 92%, transparent);
2115
- box-shadow: 0 10px 25px -18px rgba(15, 23, 42, 0.45);
2116
- }
2117
- .payman-sidebar-collapsed {
2118
- padding: 0.5rem 0 0 0.5rem;
2119
- }
2120
- .payman-sidebar-collapsed-mount {
2121
- overflow: visible;
2122
- }
2123
- .payman-sidebar-list {
2124
- --payman-sidebar-list-padding-x: 0.375rem;
2125
- --payman-sidebar-row-padding-x: 0.5rem;
2126
- display: flex;
2127
- flex-direction: column;
2128
- gap: 0.35rem;
2129
- padding: 0.25rem var(--payman-sidebar-list-padding-x) 0.5rem;
2130
- box-shadow: inset -22px 0 26px -12px color-mix(in srgb, var(--payman-v2-bg) 72%, transparent), inset -10px 0 18px -6px color-mix(in srgb, var(--payman-v2-btn-primary) 14%, transparent);
2131
- }
2132
- .payman-sidebar-group {
2133
- display: flex;
2134
- flex-direction: column;
2135
- gap: 0.15rem;
2136
- }
2137
- .payman-sidebar-group + .payman-sidebar-group {
2138
- position: relative;
2139
- padding-top: 0.35rem;
2140
- }
2141
- .payman-sidebar-group + .payman-sidebar-group::before {
2142
- content: "";
2143
- position: absolute;
2144
- top: 0;
2145
- left: calc(var(--payman-sidebar-list-padding-x) * -1);
2146
- right: calc(var(--payman-sidebar-list-padding-x) * -1);
2147
- height: 1px;
2148
- background: color-mix(in srgb, var(--payman-v2-border-1) 78%, transparent);
2149
- }
2150
- .payman-sidebar-group-label {
2151
- position: sticky;
2152
- top: 0;
2153
- z-index: 1;
2154
- margin: 0 calc(var(--payman-sidebar-list-padding-x) * -1);
2155
- padding: 0.3rem calc(var(--payman-sidebar-list-padding-x) + var(--payman-sidebar-row-padding-x)) 0.15rem;
2156
- font-size: 0.6rem;
2157
- font-weight: 700;
2158
- letter-spacing: 0.02em;
2159
- color: var(--payman-v2-text-3);
2160
- background:
2161
- linear-gradient(
2162
- 180deg,
2163
- color-mix(in srgb, var(--payman-v2-bg) 96%, transparent),
2164
- color-mix(in srgb, var(--payman-v2-bg) 84%, transparent));
2165
- backdrop-filter: blur(4px);
2166
- }
2167
- .payman-sidebar-group-items {
2168
- display: flex;
2169
- flex-direction: column;
2170
- gap: 0.075rem;
2171
- }
2172
- .payman-sidebar-row {
2173
- display: flex;
2174
- width: 100%;
2175
- flex-direction: column;
2176
- align-items: flex-start;
2177
- gap: 0;
2178
- padding: 0.35rem var(--payman-sidebar-row-padding-x);
2179
- border: 1px solid transparent;
2180
- border-radius: var(--payman-v2-radius-md);
2181
- background: transparent;
2182
- color: inherit;
2183
- cursor: pointer;
2184
- text-align: left;
2185
- transition:
2186
- background-color 0.16s ease,
2187
- border-color 0.16s ease,
2188
- transform 0.16s ease,
2189
- box-shadow 0.16s ease;
2190
- }
2191
- .payman-sidebar-row:hover {
2192
- background: color-mix(in srgb, var(--payman-v2-hover) 90%, var(--payman-v2-bg));
2193
- border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
2194
- }
2195
- .payman-sidebar-row.is-active {
2196
- background: color-mix(in srgb, var(--payman-v2-bg-secondary) 88%, var(--payman-v2-bg));
2197
- border-color: transparent;
2198
- }
2199
- .payman-sidebar-row-main {
2200
- display: flex;
2201
- align-items: center;
2202
- width: 100%;
2203
- gap: 0.5rem;
2204
- min-width: 0;
2205
- }
2206
- .payman-sidebar-row-title {
2207
- flex: 1 1 auto;
2208
- min-width: 0;
2209
- overflow: hidden;
2210
- text-overflow: ellipsis;
2211
- white-space: nowrap;
2212
- font-size: 0.75rem;
2213
- font-weight: 500;
2214
- color: var(--payman-v2-text-1);
2215
- }
2216
- .payman-sidebar-row-spinner {
2217
- flex: 0 0 auto;
2218
- width: 12px;
2219
- height: 12px;
2220
- border-radius: 50%;
2221
- border: 1.5px solid var(--payman-v2-border-1);
2222
- border-top-color: var(--payman-v2-text-2);
2223
- animation: payman-v2-spin 0.7s linear infinite;
2224
- display: inline-block;
2225
- }
2226
- .payman-sidebar-row-status {
2227
- flex: 0 0 auto;
2228
- box-sizing: border-box;
2229
- display: inline-flex;
2230
- align-items: center;
2231
- justify-content: center;
2232
- width: 14px;
2233
- height: 14px;
2234
- opacity: 0.85;
2235
- transition:
2236
- opacity 200ms ease,
2237
- color 200ms ease,
2238
- transform 200ms ease;
2239
- }
2240
- .payman-sidebar-row-status-done {
2241
- color: var(--payman-v2-text-3);
2242
- animation: payman-v2-status-pop 220ms ease-out both;
2243
- }
2244
- @keyframes payman-v2-status-pop {
2245
- 0% {
2246
- opacity: 0;
2247
- transform: scale(0.7);
2248
- }
2249
- 100% {
2250
- opacity: 0.85;
2251
- transform: scale(1);
2252
- }
2253
- }
2254
- .payman-v2-message-list-loading {
2255
- display: flex;
2256
- align-items: center;
2257
- justify-content: center;
2258
- width: 100%;
2259
- min-height: 120px;
2260
- flex: 1 1 auto;
2261
- padding: 2rem 1rem;
2262
- }
2263
- .payman-v2-message-list-spinner {
2264
- width: 22px;
2265
- height: 22px;
2266
- border-radius: 50%;
2267
- border: 2px solid var(--payman-v2-border-1);
2268
- border-top-color: var(--payman-v2-text-2);
2269
- animation: payman-v2-spin 0.7s linear infinite;
2270
- display: inline-block;
2271
- }
2272
- .payman-sidebar-row-meta {
2273
- font-size: 0.75rem;
2274
- line-height: 1.3;
2275
- color: var(--payman-v2-text-3);
2276
- }
2277
- .payman-sidebar-loading,
2278
- .payman-sidebar-empty,
2279
- .payman-sidebar-error,
2280
- .payman-sidebar-notice {
2281
- display: flex;
2282
- flex-direction: column;
2283
- align-items: center;
2284
- justify-content: center;
2285
- gap: 0.5rem;
2286
- padding: 1rem 0.75rem;
2287
- text-align: center;
2288
- }
2289
- .payman-sidebar-loading {
2290
- min-height: 6.5rem;
2291
- }
2292
- .payman-sidebar-empty,
2293
- .payman-sidebar-error,
2294
- .payman-sidebar-notice {
2295
- border: 1px dashed color-mix(in srgb, var(--payman-v2-border-1) 85%, transparent);
2296
- border-radius: var(--payman-v2-radius-xl);
2297
- background: color-mix(in srgb, var(--payman-v2-bg-secondary) 52%, var(--payman-v2-bg));
2298
- }
2299
- .payman-sidebar-notice-shell {
2300
- flex: 1 1 0%;
2301
- min-height: 0;
2302
- display: flex;
2303
- flex-direction: column;
2304
- padding: 0.55rem 0.45rem 0.65rem;
2305
- box-sizing: border-box;
2306
- }
2307
- .payman-sidebar-notice-shell .payman-sidebar-notice {
2308
- flex: 1 1 auto;
2309
- min-height: 0;
2310
- width: 100%;
2311
- box-sizing: border-box;
2312
- }
2313
- .payman-sidebar-empty-icon,
2314
- .payman-sidebar-error-icon {
2315
- display: inline-flex;
2316
- align-items: center;
2317
- justify-content: center;
2318
- width: 2rem;
2319
- height: 2rem;
2320
- border-radius: var(--payman-v2-radius-full);
2321
- background: color-mix(in srgb, var(--payman-v2-bg-secondary) 90%, transparent);
2322
- color: var(--payman-v2-text-2);
2323
- }
2324
- .payman-sidebar-empty-title,
2325
- .payman-sidebar-error-title {
2326
- font-size: 0.8125rem;
2327
- font-weight: 600;
2328
- color: var(--payman-v2-text-1);
2329
- }
2330
- .payman-sidebar-empty-desc,
2331
- .payman-sidebar-error-desc,
2332
- .payman-sidebar-notice {
2333
- font-size: 0.76rem;
2334
- line-height: 1.45;
2335
- color: var(--payman-v2-text-2);
2336
- }
2337
- .payman-sidebar-load-more {
2338
- display: inline-flex;
2339
- align-items: center;
2340
- justify-content: center;
2341
- gap: 0.35rem;
2342
- align-self: center;
2343
- min-height: 2rem;
2344
- margin-top: 0.125rem;
2345
- padding: 0.45rem 0.75rem;
2346
- border: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 92%, transparent);
2347
- border-radius: var(--payman-v2-radius-full);
2348
- background: color-mix(in srgb, var(--payman-v2-bg) 94%, transparent);
2349
- color: var(--payman-v2-text-2);
2350
- font-size: 0.74rem;
2351
- font-weight: 500;
2352
- cursor: pointer;
2353
- transition:
2354
- background-color 0.16s ease,
2355
- border-color 0.16s ease,
2356
- color 0.16s ease;
2357
- }
2358
- .payman-sidebar-load-more:hover:not(:disabled) {
2359
- background: var(--payman-v2-bg-secondary);
2360
- color: var(--payman-v2-text-1);
2361
- }
2362
- .payman-sidebar-load-more:disabled {
2363
- cursor: not-allowed;
2364
- opacity: 0.65;
2365
- }
2366
- .payman-sidebar-backdrop {
2367
- position: fixed;
2368
- inset: 0;
2369
- z-index: 80;
2370
- display: flex;
2371
- align-items: flex-end;
2372
- justify-content: stretch;
2373
- background: color-mix(in srgb, #000 32%, transparent);
2374
- backdrop-filter: blur(8px);
2375
- }
2376
- .payman-sidebar-sheet {
2377
- position: relative;
2378
- width: 100%;
2379
- height: min(78vh, 40rem);
2380
- max-height: calc(100dvh - 0.5rem);
2381
- display: flex;
2382
- flex-direction: column;
2383
- overflow: hidden;
2384
- border: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 92%, transparent);
2385
- border-bottom: none;
2386
- border-radius: calc(var(--payman-v2-radius-xl) + 6px) calc(var(--payman-v2-radius-xl) + 6px) 0 0;
2387
- background:
2388
- linear-gradient(
2389
- 180deg,
2390
- color-mix(in srgb, var(--payman-v2-bg-secondary) 62%, var(--payman-v2-bg)),
2391
- var(--payman-v2-bg));
2392
- box-shadow: 0 -18px 50px -28px rgba(15, 23, 42, 0.45);
2393
- padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
2394
- }
2395
- .payman-sidebar-sheet .payman-sidebar-topbar,
2396
- .payman-sidebar-sheet .payman-sidebar-header,
2397
- .payman-sidebar-sheet .payman-sidebar-group-label {
2398
- background:
2399
- linear-gradient(
2400
- 180deg,
2401
- color-mix(in srgb, var(--payman-v2-bg-secondary) 62%, var(--payman-v2-bg)),
2402
- var(--payman-v2-bg));
2403
- backdrop-filter: none;
2404
- }
2405
- .payman-sidebar-sheet-grabber {
2406
- width: 2.5rem;
2407
- height: 0.24rem;
2408
- margin: 0.5rem auto 0;
2409
- border-radius: var(--payman-v2-radius-full);
2410
- background: color-mix(in srgb, var(--payman-v2-text-4) 70%, transparent);
2411
- }
2412
1942
 
2413
1943
  /* src/styles.css */
2414
1944
  .payman-chat-root {