@webless/agent 0.6.11 → 0.7.0

package/dist/embed.css

@@ -542,6 +542,119 @@ html.webless-agent-page-shift {
   }
 }
 
+/* src/react/components/AnswerReceiptDialog/AnswerReceiptDialog.css */
+.agent-receipt-dialog {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+.agent-receipt-dialog__backdrop {
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: color-mix(in srgb, var(--as-text) 28%, transparent);
+  cursor: default;
+  pointer-events: auto;
+}
+.agent-receipt-dialog__card {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  display: flex;
+  max-height: min(58vh, 420px);
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--as-border);
+  border-radius: 16px;
+  background: var(--as-surface);
+  box-shadow: 0 18px 50px color-mix(in srgb, var(--as-text) 22%, transparent);
+  color: var(--as-text);
+  font-family: var(--as-font-body);
+  pointer-events: auto;
+  animation: agent-receipt-sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-receipt-dialog__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--as-border);
+}
+.agent-receipt-dialog__title {
+  margin: 0;
+  font-family: var(--as-font-display);
+  font-size: 13.5px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.agent-receipt-dialog__close {
+  appearance: none;
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text-muted);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+.agent-receipt-dialog__close:hover {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
+}
+.agent-receipt-dialog__close:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 1px;
+}
+.agent-receipt-dialog__close svg {
+  width: 15px;
+  height: 15px;
+}
+.agent-receipt-dialog__summary {
+  margin: 0;
+  padding: 12px 16px 0;
+  color: var(--as-text-muted);
+  font-size: 12.5px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+.agent-receipt-dialog__body {
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 16px 16px;
+}
+.agent-receipt-dialog__body .agent-activity-bubble__steps {
+  padding-left: 2px;
+}
+@keyframes agent-receipt-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agent-receipt-dialog__card {
+    animation: none;
+  }
+}
+
 /* src/react/components/Composer/Composer.css */
 .composer {
   display: flex;
@@ -1269,6 +1382,153 @@ html.webless-agent-page-shift {
   font-size: 0.92em;
 }
 
+/* src/react/components/MessageActions/MessageActions.css */
+.agent-message-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  animation: agent-message-actions-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-message-actions__button {
+  appearance: none;
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text-subtle);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+.agent-message-actions__button:hover:not(:disabled) {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
+}
+.agent-message-actions__button:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 1px;
+}
+.agent-message-actions__button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.agent-message-actions__button.is-active {
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
+}
+.agent-message-actions__button.is-copied {
+  color: var(--as-success);
+}
+.agent-message-actions__button svg {
+  width: 15px;
+  height: 15px;
+}
+.agent-message-actions__more {
+  position: relative;
+  display: inline-flex;
+}
+.agent-message-actions__button.is-menu-open {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
+}
+.agent-message-actions__menu {
+  position: absolute;
+  z-index: 25;
+  display: grid;
+  min-width: 190px;
+  padding: 5px;
+  border: 1px solid var(--as-border);
+  border-radius: 12px;
+  background: var(--as-surface);
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--as-text) 16%, transparent);
+  animation: agent-message-actions-menu-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-message-actions__menu--portal {
+  position: absolute;
+  z-index: 31;
+  margin: 0;
+  pointer-events: auto;
+}
+.agent-message-actions__menu-meta {
+  margin: 0;
+  padding: 6px 9px 7px;
+  border-bottom: 1px solid var(--as-border);
+  color: var(--as-text-subtle);
+  font-size: 11.5px;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.agent-message-actions__menu-item {
+  appearance: none;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: left;
+}
+.agent-message-actions__menu-item:hover {
+  background: var(--as-surface-muted);
+}
+.agent-message-actions__menu-item:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 1px;
+}
+.agent-message-actions__menu-item svg {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  color: var(--as-text-muted);
+}
+@keyframes agent-message-actions-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agent-message-actions__menu {
+    animation: none;
+  }
+}
+@keyframes agent-message-actions-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agent-message-actions {
+    animation: none;
+  }
+  .agent-message-actions__button {
+    transition: none;
+  }
+}
+
 /* src/react/components/ConfirmationCard/ConfirmationCard.css */
 .confirmation-card {
   display: grid;
@@ -1821,6 +2081,12 @@ html.webless-agent-page-shift {
 .agent-rail:focus {
   outline: none;
 }
+.agent-rail__surface {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
 .agent-rail__header {
   position: relative;
   z-index: 1;
@@ -1951,7 +2217,6 @@ html.webless-agent-page-shift {
   overflow-y: auto;
   overscroll-behavior: contain;
   background: var(--as-surface);
-  scroll-behavior: smooth;
   scrollbar-color: color-mix(in srgb, var(--as-text) 18%, transparent) transparent;
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
@@ -2034,6 +2299,84 @@ html.webless-agent-page-shift {
   border-top: 1px solid var(--as-hairline);
   background: var(--as-surface);
 }
+.agent-rail__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  overflow: hidden;
+  contain: strict;
+  pointer-events: none;
+}
+.agent-rail--receipt-open .agent-rail__header,
+.agent-rail--receipt-open .agent-rail__transcript,
+.agent-rail--receipt-open .agent-rail__disclaimer,
+.agent-rail--receipt-open .agent-rail__composer-wrap {
+  animation: none;
+  transition: none;
+  transform: none;
+}
+.agent-rail--receipt-open .agent-rail__transcript {
+  overflow: hidden;
+}
+.agent-rail--receipt-open.agent-rail--expanded {
+  transition: none;
+}
+.agent-rail__jump-to-latest {
+  appearance: none;
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 0;
+  right: 0;
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 0;
+  border: 1px solid var(--as-control-border);
+  border-radius: 999px;
+  background: var(--as-surface);
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--as-text) 14%, transparent);
+  color: var(--as-text-muted);
+  cursor: pointer;
+  animation: agent-rail-jump-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: background 150ms ease, color 150ms ease;
+}
+.agent-rail__jump-to-latest:hover {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
+}
+.agent-rail__jump-to-latest:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 1px;
+}
+.agent-rail__jump-to-latest svg {
+  width: 16px;
+  height: 16px;
+}
+@keyframes agent-rail-jump-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.agent-rail__disclaimer {
+  flex-shrink: 0;
+  padding: 10px 20px 8px;
+  background: var(--as-surface);
+}
+.agent-rail__disclaimer p {
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 11px;
+  line-height: 1.35;
+  text-align: center;
+}
 .agent-rail__footer {
   margin-top: 7px;
 }
@@ -2077,6 +2420,7 @@ html.webless-agent-page-shift {
 .agent-rail--expanded .agent-rail__composer-wrap {
   padding: 16px 24px 18px;
 }
+.agent-rail--expanded .agent-rail__disclaimer,
 .agent-rail--expanded .composer,
 .agent-rail--expanded .agent-rail__footer {
   width: min(760px, 100%);
@@ -2172,8 +2516,9 @@ html.webless-agent-page-shift {
   .agent-rail--mobile-fullscreen .agent-rail__composer-wrap {
     padding: 8px 12px max(8px, env(safe-area-inset-bottom));
   }
-  .agent-rail--mobile-fullscreen .agent-rail__footer p span:first-child {
-    display: none;
+  .agent-rail--mobile-fullscreen .agent-rail__disclaimer p {
+    font-size: 10px;
+    line-height: 1.3;
   }
 }
 @media (min-width: 768px) {
@@ -2185,6 +2530,10 @@ html.webless-agent-page-shift {
   .agent-rail--expanded {
     transition: none;
   }
+  .agent-rail__jump-to-latest {
+    animation: none;
+    transition: none;
+  }
 }
 
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */