@webless/agent 0.6.10 → 0.7.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/embed.css CHANGED
@@ -542,6 +542,119 @@ html.webless-agent-page-shift {
542
542
  }
543
543
  }
544
544
 
545
+ /* src/react/components/AnswerReceiptDialog/AnswerReceiptDialog.css */
546
+ .agent-receipt-dialog {
547
+ position: absolute;
548
+ inset: 0;
549
+ z-index: 1;
550
+ pointer-events: none;
551
+ }
552
+ .agent-receipt-dialog__backdrop {
553
+ appearance: none;
554
+ position: absolute;
555
+ inset: 0;
556
+ margin: 0;
557
+ padding: 0;
558
+ border: 0;
559
+ background: color-mix(in srgb, var(--as-text) 28%, transparent);
560
+ cursor: default;
561
+ pointer-events: auto;
562
+ }
563
+ .agent-receipt-dialog__card {
564
+ position: absolute;
565
+ right: 10px;
566
+ bottom: 10px;
567
+ left: 10px;
568
+ display: flex;
569
+ max-height: min(58vh, 420px);
570
+ flex-direction: column;
571
+ overflow: hidden;
572
+ border: 1px solid var(--as-border);
573
+ border-radius: 16px;
574
+ background: var(--as-surface);
575
+ box-shadow: 0 18px 50px color-mix(in srgb, var(--as-text) 22%, transparent);
576
+ color: var(--as-text);
577
+ font-family: var(--as-font-body);
578
+ pointer-events: auto;
579
+ animation: agent-receipt-sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
580
+ }
581
+ .agent-receipt-dialog__header {
582
+ display: flex;
583
+ flex-shrink: 0;
584
+ align-items: center;
585
+ justify-content: space-between;
586
+ gap: 12px;
587
+ padding: 14px 16px;
588
+ border-bottom: 1px solid var(--as-border);
589
+ }
590
+ .agent-receipt-dialog__title {
591
+ margin: 0;
592
+ font-family: var(--as-font-display);
593
+ font-size: 13.5px;
594
+ font-weight: 650;
595
+ letter-spacing: -0.01em;
596
+ }
597
+ .agent-receipt-dialog__close {
598
+ appearance: none;
599
+ display: inline-flex;
600
+ width: 28px;
601
+ height: 28px;
602
+ flex-shrink: 0;
603
+ align-items: center;
604
+ justify-content: center;
605
+ margin: 0;
606
+ padding: 0;
607
+ border: none;
608
+ border-radius: 8px;
609
+ background: transparent;
610
+ color: var(--as-text-muted);
611
+ cursor: pointer;
612
+ transition: background 150ms ease, color 150ms ease;
613
+ }
614
+ .agent-receipt-dialog__close:hover {
615
+ background: var(--as-surface-muted);
616
+ color: var(--as-text);
617
+ }
618
+ .agent-receipt-dialog__close:focus-visible {
619
+ outline: 2px solid var(--as-brand);
620
+ outline-offset: 1px;
621
+ }
622
+ .agent-receipt-dialog__close svg {
623
+ width: 15px;
624
+ height: 15px;
625
+ }
626
+ .agent-receipt-dialog__summary {
627
+ margin: 0;
628
+ padding: 12px 16px 0;
629
+ color: var(--as-text-muted);
630
+ font-size: 12.5px;
631
+ font-weight: 650;
632
+ line-height: 1.4;
633
+ }
634
+ .agent-receipt-dialog__body {
635
+ min-height: 0;
636
+ overflow-y: auto;
637
+ padding: 4px 16px 16px;
638
+ }
639
+ .agent-receipt-dialog__body .agent-activity-bubble__steps {
640
+ padding-left: 2px;
641
+ }
642
+ @keyframes agent-receipt-sheet-in {
643
+ from {
644
+ opacity: 0;
645
+ transform: translateY(100%);
646
+ }
647
+ to {
648
+ opacity: 1;
649
+ transform: translateY(0);
650
+ }
651
+ }
652
+ @media (prefers-reduced-motion: reduce) {
653
+ .agent-receipt-dialog__card {
654
+ animation: none;
655
+ }
656
+ }
657
+
545
658
  /* src/react/components/Composer/Composer.css */
546
659
  .composer {
547
660
  display: flex;
@@ -1096,6 +1209,13 @@ html.webless-agent-page-shift {
1096
1209
  .booking-card__submit:hover {
1097
1210
  filter: brightness(1.04);
1098
1211
  }
1212
+ .booking-card__time:disabled,
1213
+ .booking-card__field input:disabled,
1214
+ .booking-card__field select:disabled,
1215
+ .booking-card__submit:disabled {
1216
+ cursor: wait;
1217
+ opacity: 0.68;
1218
+ }
1099
1219
  @media (prefers-reduced-motion: reduce) {
1100
1220
  .booking-card__time {
1101
1221
  transition: none;
@@ -1262,6 +1382,153 @@ html.webless-agent-page-shift {
1262
1382
  font-size: 0.92em;
1263
1383
  }
1264
1384
 
1385
+ /* src/react/components/MessageActions/MessageActions.css */
1386
+ .agent-message-actions {
1387
+ display: flex;
1388
+ align-items: center;
1389
+ gap: 2px;
1390
+ animation: agent-message-actions-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
1391
+ }
1392
+ .agent-message-actions__button {
1393
+ appearance: none;
1394
+ display: inline-flex;
1395
+ width: 28px;
1396
+ height: 28px;
1397
+ align-items: center;
1398
+ justify-content: center;
1399
+ margin: 0;
1400
+ padding: 0;
1401
+ border: none;
1402
+ border-radius: 8px;
1403
+ background: transparent;
1404
+ color: var(--as-text-subtle);
1405
+ cursor: pointer;
1406
+ transition: background 150ms ease, color 150ms ease;
1407
+ }
1408
+ .agent-message-actions__button:hover:not(:disabled) {
1409
+ background: var(--as-surface-muted);
1410
+ color: var(--as-text);
1411
+ }
1412
+ .agent-message-actions__button:focus-visible {
1413
+ outline: 2px solid var(--as-brand);
1414
+ outline-offset: 1px;
1415
+ }
1416
+ .agent-message-actions__button:disabled {
1417
+ opacity: 0.4;
1418
+ cursor: default;
1419
+ }
1420
+ .agent-message-actions__button.is-active {
1421
+ background: var(--as-brand-soft);
1422
+ color: var(--as-brand);
1423
+ }
1424
+ .agent-message-actions__button.is-copied {
1425
+ color: var(--as-success);
1426
+ }
1427
+ .agent-message-actions__button svg {
1428
+ width: 15px;
1429
+ height: 15px;
1430
+ }
1431
+ .agent-message-actions__more {
1432
+ position: relative;
1433
+ display: inline-flex;
1434
+ }
1435
+ .agent-message-actions__button.is-menu-open {
1436
+ background: var(--as-surface-muted);
1437
+ color: var(--as-text);
1438
+ }
1439
+ .agent-message-actions__menu {
1440
+ position: absolute;
1441
+ z-index: 25;
1442
+ display: grid;
1443
+ min-width: 190px;
1444
+ padding: 5px;
1445
+ border: 1px solid var(--as-border);
1446
+ border-radius: 12px;
1447
+ background: var(--as-surface);
1448
+ box-shadow: 0 12px 32px color-mix(in srgb, var(--as-text) 16%, transparent);
1449
+ animation: agent-message-actions-menu-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
1450
+ }
1451
+ .agent-message-actions__menu--portal {
1452
+ position: absolute;
1453
+ z-index: 31;
1454
+ margin: 0;
1455
+ pointer-events: auto;
1456
+ }
1457
+ .agent-message-actions__menu-meta {
1458
+ margin: 0;
1459
+ padding: 6px 9px 7px;
1460
+ border-bottom: 1px solid var(--as-border);
1461
+ color: var(--as-text-subtle);
1462
+ font-size: 11.5px;
1463
+ font-weight: 650;
1464
+ line-height: 1.3;
1465
+ }
1466
+ .agent-message-actions__menu-item {
1467
+ appearance: none;
1468
+ display: flex;
1469
+ width: 100%;
1470
+ align-items: center;
1471
+ gap: 8px;
1472
+ margin: 0;
1473
+ padding: 7px 9px;
1474
+ border: 0;
1475
+ border-radius: 8px;
1476
+ background: transparent;
1477
+ color: var(--as-text);
1478
+ cursor: pointer;
1479
+ font-family: inherit;
1480
+ font-size: 12.5px;
1481
+ font-weight: 600;
1482
+ line-height: 1.3;
1483
+ text-align: left;
1484
+ }
1485
+ .agent-message-actions__menu-item:hover {
1486
+ background: var(--as-surface-muted);
1487
+ }
1488
+ .agent-message-actions__menu-item:focus-visible {
1489
+ outline: 2px solid var(--as-brand);
1490
+ outline-offset: 1px;
1491
+ }
1492
+ .agent-message-actions__menu-item svg {
1493
+ width: 15px;
1494
+ height: 15px;
1495
+ flex-shrink: 0;
1496
+ color: var(--as-text-muted);
1497
+ }
1498
+ @keyframes agent-message-actions-menu-in {
1499
+ from {
1500
+ opacity: 0;
1501
+ transform: translateY(3px);
1502
+ }
1503
+ to {
1504
+ opacity: 1;
1505
+ transform: none;
1506
+ }
1507
+ }
1508
+ @media (prefers-reduced-motion: reduce) {
1509
+ .agent-message-actions__menu {
1510
+ animation: none;
1511
+ }
1512
+ }
1513
+ @keyframes agent-message-actions-in {
1514
+ from {
1515
+ opacity: 0;
1516
+ transform: translateY(2px);
1517
+ }
1518
+ to {
1519
+ opacity: 1;
1520
+ transform: none;
1521
+ }
1522
+ }
1523
+ @media (prefers-reduced-motion: reduce) {
1524
+ .agent-message-actions {
1525
+ animation: none;
1526
+ }
1527
+ .agent-message-actions__button {
1528
+ transition: none;
1529
+ }
1530
+ }
1531
+
1265
1532
  /* src/react/components/ConfirmationCard/ConfirmationCard.css */
1266
1533
  .confirmation-card {
1267
1534
  display: grid;
@@ -1814,6 +2081,12 @@ html.webless-agent-page-shift {
1814
2081
  .agent-rail:focus {
1815
2082
  outline: none;
1816
2083
  }
2084
+ .agent-rail__surface {
2085
+ display: flex;
2086
+ min-height: 0;
2087
+ flex: 1 1 auto;
2088
+ flex-direction: column;
2089
+ }
1817
2090
  .agent-rail__header {
1818
2091
  position: relative;
1819
2092
  z-index: 1;
@@ -1944,7 +2217,6 @@ html.webless-agent-page-shift {
1944
2217
  overflow-y: auto;
1945
2218
  overscroll-behavior: contain;
1946
2219
  background: var(--as-surface);
1947
- scroll-behavior: smooth;
1948
2220
  scrollbar-color: color-mix(in srgb, var(--as-text) 18%, transparent) transparent;
1949
2221
  scrollbar-width: thin;
1950
2222
  -webkit-overflow-scrolling: touch;
@@ -2027,6 +2299,84 @@ html.webless-agent-page-shift {
2027
2299
  border-top: 1px solid var(--as-hairline);
2028
2300
  background: var(--as-surface);
2029
2301
  }
2302
+ .agent-rail__overlay {
2303
+ position: absolute;
2304
+ inset: 0;
2305
+ z-index: 30;
2306
+ overflow: hidden;
2307
+ contain: strict;
2308
+ pointer-events: none;
2309
+ }
2310
+ .agent-rail--receipt-open .agent-rail__header,
2311
+ .agent-rail--receipt-open .agent-rail__transcript,
2312
+ .agent-rail--receipt-open .agent-rail__disclaimer,
2313
+ .agent-rail--receipt-open .agent-rail__composer-wrap {
2314
+ animation: none;
2315
+ transition: none;
2316
+ transform: none;
2317
+ }
2318
+ .agent-rail--receipt-open .agent-rail__transcript {
2319
+ overflow: hidden;
2320
+ }
2321
+ .agent-rail--receipt-open.agent-rail--expanded {
2322
+ transition: none;
2323
+ }
2324
+ .agent-rail__jump-to-latest {
2325
+ appearance: none;
2326
+ position: absolute;
2327
+ bottom: calc(100% + 10px);
2328
+ left: 0;
2329
+ right: 0;
2330
+ display: inline-flex;
2331
+ width: 32px;
2332
+ height: 32px;
2333
+ align-items: center;
2334
+ justify-content: center;
2335
+ margin: 0 auto;
2336
+ padding: 0;
2337
+ border: 1px solid var(--as-control-border);
2338
+ border-radius: 999px;
2339
+ background: var(--as-surface);
2340
+ box-shadow: 0 4px 14px color-mix(in srgb, var(--as-text) 14%, transparent);
2341
+ color: var(--as-text-muted);
2342
+ cursor: pointer;
2343
+ animation: agent-rail-jump-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
2344
+ transition: background 150ms ease, color 150ms ease;
2345
+ }
2346
+ .agent-rail__jump-to-latest:hover {
2347
+ background: var(--as-surface-muted);
2348
+ color: var(--as-text);
2349
+ }
2350
+ .agent-rail__jump-to-latest:focus-visible {
2351
+ outline: 2px solid var(--as-brand);
2352
+ outline-offset: 1px;
2353
+ }
2354
+ .agent-rail__jump-to-latest svg {
2355
+ width: 16px;
2356
+ height: 16px;
2357
+ }
2358
+ @keyframes agent-rail-jump-in {
2359
+ from {
2360
+ opacity: 0;
2361
+ transform: translateY(4px);
2362
+ }
2363
+ to {
2364
+ opacity: 1;
2365
+ transform: none;
2366
+ }
2367
+ }
2368
+ .agent-rail__disclaimer {
2369
+ flex-shrink: 0;
2370
+ padding: 10px 20px 8px;
2371
+ background: var(--as-surface);
2372
+ }
2373
+ .agent-rail__disclaimer p {
2374
+ margin: 0;
2375
+ color: var(--as-text-muted);
2376
+ font-size: 11px;
2377
+ line-height: 1.35;
2378
+ text-align: center;
2379
+ }
2030
2380
  .agent-rail__footer {
2031
2381
  margin-top: 7px;
2032
2382
  }
@@ -2070,6 +2420,7 @@ html.webless-agent-page-shift {
2070
2420
  .agent-rail--expanded .agent-rail__composer-wrap {
2071
2421
  padding: 16px 24px 18px;
2072
2422
  }
2423
+ .agent-rail--expanded .agent-rail__disclaimer,
2073
2424
  .agent-rail--expanded .composer,
2074
2425
  .agent-rail--expanded .agent-rail__footer {
2075
2426
  width: min(760px, 100%);
@@ -2165,8 +2516,9 @@ html.webless-agent-page-shift {
2165
2516
  .agent-rail--mobile-fullscreen .agent-rail__composer-wrap {
2166
2517
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
2167
2518
  }
2168
- .agent-rail--mobile-fullscreen .agent-rail__footer p span:first-child {
2169
- display: none;
2519
+ .agent-rail--mobile-fullscreen .agent-rail__disclaimer p {
2520
+ font-size: 10px;
2521
+ line-height: 1.3;
2170
2522
  }
2171
2523
  }
2172
2524
  @media (min-width: 768px) {
@@ -2178,6 +2530,10 @@ html.webless-agent-page-shift {
2178
2530
  .agent-rail--expanded {
2179
2531
  transition: none;
2180
2532
  }
2533
+ .agent-rail__jump-to-latest {
2534
+ animation: none;
2535
+ transition: none;
2536
+ }
2181
2537
  }
2182
2538
 
2183
2539
  /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */