@webless/agent 0.5.0 → 0.6.0

package/dist/embed.css

@@ -106,23 +106,6 @@
   pointer-events: none;
   z-index: 1;
 }
-.webless-agent-root__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  border: none;
-  padding: 0;
-  margin: 0;
-  background: color-mix(in srgb, var(--as-text) 18%, transparent);
-  cursor: pointer;
-  pointer-events: auto;
-}
-.webless-agent-root__backdrop--mobile {
-  background: color-mix(in srgb, var(--as-text) 24%, transparent);
-  -webkit-backdrop-filter: blur(1.5px);
-  backdrop-filter: blur(1.5px);
-  touch-action: none;
-}
 .webless-agent-root__shell--expanded:not(.webless-agent-root__shell--collapsed) .agent-rail {
   pointer-events: auto;
 }
@@ -291,113 +274,140 @@ html.webless-agent-page-shift {
   flex-direction: column;
   align-self: flex-start;
   align-items: stretch;
-  gap: 9px;
+  gap: 7px;
 }
 .agent-activity-bubble__status {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 8px;
   margin: 0;
   color: var(--as-text-muted);
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 650;
   line-height: 1.4;
 }
 .agent-activity-bubble__pulse {
-  width: 8px;
-  height: 8px;
-  flex: 0 0 8px;
+  position: relative;
+  display: grid;
+  width: 15px;
+  height: 15px;
+  flex: 0 0 15px;
+  place-items: center;
   border-radius: 999px;
   background: var(--as-success);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-success) 10%, transparent);
+  color: #fff;
+}
+.agent-activity-bubble__pulse::after {
+  content: "\2713";
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1;
 }
 .agent-activity-bubble__pulse.is-active {
   background: var(--as-brand);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--as-brand) 12%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 11%, transparent);
   animation: agent-activity-pulse 1.8s ease-in-out infinite;
 }
+.agent-activity-bubble__pulse.is-active::after {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: inherit;
+  background: currentColor;
+}
 .agent-activity-bubble__pulse.is-error {
   background: var(--as-danger);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-danger) 10%, transparent);
+}
+.agent-activity-bubble__pulse.is-error::after {
+  content: "!";
 }
 .agent-activity-bubble__details {
-  overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--as-border) 72%, var(--as-surface));
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--as-surface-muted) 72%, var(--as-surface));
+  border: 0;
+  background: transparent;
 }
-.agent-activity-bubble__details summary {
+.agent-activity-bubble__summary {
+  appearance: none;
   display: flex;
-  min-height: 42px;
+  width: 100%;
+  min-height: 34px;
   align-items: center;
-  padding: 0 13px;
+  gap: 9px;
+  margin: 0;
+  padding: 0 2px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
   color: var(--as-text-muted);
   cursor: pointer;
+  font-family: inherit;
   font-size: 12px;
   font-weight: 650;
-  list-style: none;
-}
-.agent-activity-bubble__details summary::-webkit-details-marker {
-  display: none;
+  text-align: left;
 }
-.agent-activity-bubble__details summary::after {
-  width: 20px;
-  height: 20px;
-  margin-left: auto;
-  border-radius: 999px;
+.agent-activity-bubble__summary::before {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
   color: var(--as-text-subtle);
-  content: "+";
-  font-size: 17px;
-  font-weight: 400;
-  line-height: 19px;
-  text-align: center;
+  content: "";
+  transform: rotate(45deg) translate(-1px, -1px);
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
-.agent-activity-bubble__details summary:hover::after {
-  background: var(--as-surface-muted);
+.agent-activity-bubble__summary:hover {
   color: var(--as-text);
 }
-.agent-activity-bubble__details[open] summary::after {
-  content: "\2212";
+.agent-activity-bubble__summary:focus-visible {
+  outline: none;
+  color: var(--as-text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--as-text) 46%, transparent);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+.agent-activity-bubble__summary[aria-expanded=true]::before {
+  transform: rotate(225deg) translate(-1px, -1px);
 }
 .agent-activity-bubble__steps {
   display: grid;
   gap: 0;
   margin: 0;
-  padding: 1px 13px 13px;
+  padding: 3px 0 2px 24px;
   list-style: none;
 }
 .agent-activity-bubble__step {
   position: relative;
   display: grid;
-  min-height: 48px;
-  grid-template-columns: 28px minmax(0, 1fr);
+  min-height: 50px;
+  grid-template-columns: 26px minmax(0, 1fr);
   align-items: flex-start;
   gap: 10px;
-  padding: 6px 0;
+  padding: 5px 0;
 }
 .agent-activity-bubble__step:not(:last-child)::after {
   position: absolute;
-  top: 32px;
-  bottom: -8px;
-  left: 13px;
+  top: 30px;
+  bottom: -6px;
+  left: 12px;
   width: 1px;
-  background: var(--as-border);
+  background: color-mix(in srgb, var(--as-text) 11%, transparent);
   content: "";
 }
 .agent-activity-bubble__step-icon {
   position: relative;
   z-index: 1;
   display: inline-flex;
-  width: 28px;
-  height: 28px;
+  width: 25px;
+  height: 25px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 1px solid var(--as-border);
-  border-radius: 9px;
-  background: var(--as-surface);
+  border: 0;
+  border-radius: 8px;
+  background: var(--as-surface-muted);
   color: var(--as-text-muted);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 750;
 }
 .agent-activity-bubble__step-icon svg {
@@ -414,46 +424,28 @@ html.webless-agent-page-shift {
   object-fit: contain;
 }
 .agent-activity-bubble__step[data-kind=specialist] .agent-activity-bubble__step-icon {
-  border-color: color-mix(in srgb, var(--as-brand) 18%, var(--as-border));
   background: var(--as-brand-soft);
   color: var(--as-brand);
 }
 .agent-activity-bubble__step[data-state=active] .agent-activity-bubble__step-icon {
-  border-color: color-mix(in srgb, var(--as-brand) 36%, var(--as-border));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 8%, transparent);
 }
-.agent-activity-bubble__step[data-state=completed] .agent-activity-bubble__step-icon::after {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  display: grid;
-  width: 11px;
-  height: 11px;
-  place-items: center;
-  border: 2px solid var(--as-surface);
-  border-radius: 999px;
-  background: var(--as-success);
-  color: #fff;
-  content: "\2713";
-  font-size: 7px;
-  line-height: 1;
-}
 .agent-activity-bubble__step[data-state=error] .agent-activity-bubble__step-icon {
-  border-color: color-mix(in srgb, var(--as-danger) 30%, var(--as-border));
   background: color-mix(in srgb, var(--as-danger) 7%, var(--as-surface));
   color: var(--as-danger);
 }
 .agent-activity-bubble__step-copy {
   display: grid;
   min-width: 0;
-  gap: 3px;
+  gap: 2px;
   padding-top: 2px;
 }
 .agent-activity-bubble__step-heading {
   display: flex;
   min-width: 0;
   align-items: baseline;
-  gap: 7px;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 .agent-activity-bubble__step-heading strong {
   overflow: hidden;
@@ -466,14 +458,14 @@ html.webless-agent-page-shift {
 }
 .agent-activity-bubble__step-heading small {
   flex: 0 0 auto;
-  color: var(--as-text-subtle);
-  font-size: 10px;
+  color: var(--as-text-muted);
+  font-size: 10.5px;
   font-weight: 550;
   line-height: 1.35;
 }
 .agent-activity-bubble__step-detail {
-  color: var(--as-text-subtle);
-  font-size: 11px;
+  color: var(--as-text-muted);
+  font-size: 11.5px;
   line-height: 1.4;
 }
 @keyframes agent-activity-pulse {
@@ -481,6 +473,14 @@ html.webless-agent-page-shift {
     opacity: 0.55;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .agent-activity-bubble__pulse.is-active {
+    animation: none;
+  }
+  .agent-activity-bubble__summary::before {
+    transition: none;
+  }
+}
 
 /* src/react/components/Composer/Composer.css */
 .composer {
@@ -493,9 +493,9 @@ html.webless-agent-page-shift {
   align-items: flex-end;
   gap: 6px;
   padding: 6px;
-  border: 1px solid color-mix(in srgb, var(--as-border) 72%, var(--as-surface));
+  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
   border-radius: 16px;
-  background: color-mix(in srgb, var(--as-surface-muted) 72%, var(--as-surface));
+  background: color-mix(in srgb, var(--as-surface-muted) 42%, var(--as-surface));
   box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
 }
 .composer__field:focus-within {
@@ -516,7 +516,7 @@ html.webless-agent-page-shift {
   max-height: 96px;
 }
 .composer__input::placeholder {
-  color: var(--as-text-subtle);
+  color: var(--as-text-muted);
 }
 .composer__input:focus {
   outline: none;
@@ -549,8 +549,8 @@ html.webless-agent-page-shift {
 .composer--dock .composer__field {
   align-items: center;
   padding: 5px 5px 5px 13px;
-  background: color-mix(in srgb, var(--as-surface-muted) 72%, var(--as-surface));
-  border: 1px solid color-mix(in srgb, var(--as-border) 72%, var(--as-surface));
+  background: color-mix(in srgb, var(--as-surface-muted) 42%, var(--as-surface));
+  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
   border-radius: 999px;
   box-shadow: none;
 }
@@ -564,8 +564,8 @@ html.webless-agent-page-shift {
   max-height: 48px;
 }
 .composer--dock .composer__send {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
 }
 .composer--dock .composer__send svg {
   width: 15px;
@@ -890,8 +890,37 @@ html.webless-agent-page-shift {
 .message-bubble--agent {
   align-self: flex-start;
   align-items: flex-start;
+  width: 100%;
   max-width: 100%;
 }
+.message-bubble__agent-row {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 24px minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 10px;
+}
+.message-bubble__agent-avatar {
+  position: relative;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-top: 1px;
+  border-radius: 8px;
+  background: var(--as-surface-muted);
+}
+.message-bubble__agent-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--as-surface);
+  object-fit: contain;
+}
 .message-bubble__text {
   margin: 0;
   padding: 10px 12px;
@@ -906,11 +935,12 @@ html.webless-agent-page-shift {
   border-bottom-right-radius: 5px;
 }
 .message-bubble--agent .message-bubble__text {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid color-mix(in srgb, var(--as-border) 72%, var(--as-surface));
-  border-radius: 11px;
-  background: color-mix(in srgb, var(--as-surface-muted) 72%, var(--as-surface));
+  min-width: 0;
+  width: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: var(--as-text);
 }
 .message-bubble__markdown > :first-child {
@@ -963,6 +993,8 @@ html.webless-agent-page-shift {
 /* src/react/components/AgentRail/AgentRail.css */
 .agent-rail {
   --rail-width: var(--as-rail-max-width);
+  --as-hairline: color-mix(in srgb, var(--as-text) 9%, transparent);
+  --as-control-border: color-mix(in srgb, var(--as-text) 14%, transparent);
   position: relative;
   z-index: var(--as-z-rail);
   display: flex;
@@ -973,7 +1005,7 @@ html.webless-agent-page-shift {
   max-height: 100dvh;
   flex-direction: column;
   overflow: hidden;
-  border-left: 1px solid var(--as-border);
+  border-left: 1px solid var(--as-hairline);
   background: var(--as-surface);
   box-shadow: var(--as-shadow-rail);
   color: var(--as-text);
@@ -986,9 +1018,9 @@ html.webless-agent-page-shift {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--as-border);
-  background: color-mix(in srgb, var(--as-surface) 96%, var(--as-surface-muted));
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--as-hairline);
+  background: var(--as-surface);
 }
 .agent-rail__brand-row {
   display: grid;
@@ -1023,9 +1055,7 @@ html.webless-agent-page-shift {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background: var(--as-brand);
-  color: var(--as-visitor-text);
-  font-weight: 750;
+  background: var(--as-surface-muted);
 }
 .agent-rail__brand-mark {
   width: 25px;
@@ -1124,15 +1154,15 @@ html.webless-agent-page-shift {
   width: 100%;
   min-height: 100%;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
   margin: 0 auto;
-  padding: 20px 16px 26px;
+  padding: 24px 20px 32px;
 }
 .agent-rail__welcome {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  gap: 16px;
+  gap: 18px;
 }
 .agent-rail__timeline-slot,
 .agent-rail__followups-slot {
@@ -1187,9 +1217,9 @@ html.webless-agent-page-shift {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  padding: 12px 14px 13px;
-  border-top: 1px solid var(--as-border);
-  background: color-mix(in srgb, var(--as-surface) 96%, var(--as-surface-muted));
+  padding: 13px 20px 14px;
+  border-top: 1px solid var(--as-hairline);
+  background: var(--as-surface);
 }
 .agent-rail__footer {
   margin-top: 7px;
@@ -1198,69 +1228,72 @@ html.webless-agent-page-shift {
   display: grid;
   gap: 2px;
   margin: 0;
-  color: var(--as-text-subtle);
-  font-size: 10.5px;
+  color: var(--as-text-muted);
+  font-size: 11px;
   line-height: 1.35;
   text-align: center;
 }
 .agent-rail--expanded {
   position: fixed;
-  top: 50%;
-  left: 50%;
+  inset: 0;
   z-index: calc(var(--as-z-mobile) + 1);
-  width: min(var(--rail-width), calc(100vw - 48px));
-  min-width: 0;
-  max-width: var(--rail-width);
-  height: min(720px, calc(100dvh - 48px));
-  max-height: calc(100dvh - 48px);
+  width: 100vw;
+  min-width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
   overflow: hidden;
-  transform: translate(-50%, -50%);
-  border: 1px solid var(--as-border);
-  border-radius: 22px;
+  transform: none;
+  border: 0;
+  border-radius: 0;
   background: var(--as-surface);
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 8%, transparent), 0 32px 90px -30px color-mix(in srgb, var(--as-text) 46%, transparent);
-  transition:
-    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
-    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
-    border-radius 320ms cubic-bezier(0.22, 1, 0.36, 1),
-    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: none;
+  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-rail--expanded .agent-rail__brand-row {
+  max-width: 1120px;
+  margin: 0 auto;
 }
 .agent-rail--expanded .agent-rail__thread {
-  max-width: none;
-  padding: 20px 16px 26px;
+  max-width: 760px;
+  padding: 36px 24px 48px;
 }
 .agent-rail--expanded .agent-rail__welcome {
   width: 100%;
 }
 .agent-rail--expanded .agent-rail__composer-wrap {
-  padding: 12px 14px 13px;
+  padding: 16px 24px 18px;
+}
+.agent-rail--expanded .composer,
+.agent-rail--expanded .agent-rail__footer {
+  width: min(760px, 100%);
+  margin-right: auto;
+  margin-left: auto;
 }
 .agent-rail--expanded .agent-rail__footer {
   margin-top: 7px;
 }
 .agent-rail--mobile-fullscreen {
   position: fixed;
-  inset: auto 0 0;
+  inset: 0;
   z-index: calc(var(--as-z-mobile) + 1);
   width: 100%;
   min-width: 0;
   max-width: none;
-  height: min(78dvh, 720px);
-  min-height: min(520px, calc(100dvh - 12px));
-  max-height: calc(100dvh - 8px);
+  height: 100dvh;
+  min-height: 100dvh;
+  max-height: 100dvh;
   overflow: hidden;
-  border: 1px solid var(--as-border);
-  border-bottom: none;
-  border-radius: 22px 22px 0 0;
+  border: 0;
+  border-radius: 0;
   background: var(--as-surface);
-  box-shadow: 0 -24px 72px -28px color-mix(in srgb, var(--as-text) 42%, transparent);
+  box-shadow: none;
 }
 .agent-rail--mobile-fullscreen .agent-rail__header {
-  padding-top: 16px;
+  padding-top: max(12px, env(safe-area-inset-top));
 }
 .agent-rail--mobile-fullscreen .agent-rail__brand-row {
-  grid-template-columns: minmax(0, 1fr) auto 40px;
+  grid-template-columns: minmax(0, 1fr) auto 44px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__identity {
   grid-column: 1;
@@ -1276,26 +1309,18 @@ html.webless-agent-page-shift {
 }
 .agent-rail--mobile-fullscreen .agent-rail__close,
 .agent-rail--mobile-fullscreen .agent-rail__new-chat {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__header::before {
-  position: absolute;
-  top: 7px;
-  left: 50%;
-  width: 34px;
-  height: 4px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--as-text) 16%, transparent);
-  content: "";
-  transform: translateX(-50%);
+  content: none;
 }
 .agent-rail--mobile-fullscreen .agent-rail__thread {
-  padding: 20px 16px 24px;
+  padding: 24px 16px 32px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__welcome {
-  padding-top: 20px;
-  padding-bottom: 12px;
+  padding-top: 0;
+  padding-bottom: 8px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__composer-wrap {
   padding: 11px 12px max(12px, env(safe-area-inset-bottom));
@@ -1326,11 +1351,17 @@ html.webless-agent-page-shift {
 }
 @media (max-width: 767px) and (max-height: 620px) {
   .agent-rail--mobile-fullscreen {
-    height: calc(100dvh - 8px);
+    height: 100dvh;
   }
   .agent-rail--mobile-fullscreen .agent-rail__welcome {
     justify-content: flex-start;
   }
+  .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;
+  }
 }
 @media (min-width: 768px) {
   .agent-rail .agent-rail__close {
@@ -1346,8 +1377,8 @@ html.webless-agent-page-shift {
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */
 .assist-edge-tab {
   --tab-ink: var(--as-brand);
-  --tab-fill: #fff;
-  --tab-line: rgb(111 22 255 / 0.35);
+  --tab-fill: var(--as-surface);
+  --tab-line: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
   --tab-along: 50%;
   --tab-inset: 0px;
   position: fixed;
@@ -1495,8 +1526,8 @@ html.webless-agent-page-shift {
   transform: translateX(-50%) translateY(-2px);
 }
 .assist-edge-tab--outline {
-  --tab-fill: #f7f6fa;
-  --tab-line: rgb(111 22 255 / 0.45);
+  --tab-fill: color-mix(in srgb, var(--as-surface) 96%, var(--as-text) 4%);
+  --tab-line: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));
 }
 .assist-edge-tab--outline.assist-edge-tab--right,
 .assist-edge-tab--outline.assist-edge-tab--left {
@@ -1512,7 +1543,7 @@ html.webless-agent-page-shift {
   border-bottom: 1px solid var(--tab-line);
 }
 .assist-edge-tab--ask {
-  --tab-fill: #efe8fb;
+  --tab-fill: color-mix(in srgb, var(--as-brand) 10%, var(--as-surface));
   --tab-line: transparent;
 }
 .assist-edge-tab--ask.assist-edge-tab--right,