@webless/agent 0.9.3 → 0.10.0

package/dist/react.css

@@ -721,6 +721,10 @@ html.webless-agent-page-shift {
   width: 14px;
   height: 14px;
 }
+.composer__send:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
 .composer--dock .composer__field {
   align-items: center;
   padding: 5px 5px 5px 14px;
@@ -751,83 +755,181 @@ html.webless-agent-page-shift {
   max-height: min(560px, calc(100dvh - 160px));
   flex-direction: column;
   overflow: hidden;
-  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
+  border: 1px solid transparent;
   border-radius: 22px;
-  background: var(--as-surface);
+  background:
+    linear-gradient(var(--as-surface), var(--as-surface)) padding-box,
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--as-brand) 42%, transparent) 0%,
+      color-mix(in srgb, var(--as-brand) 10%, transparent) 38%,
+      color-mix(in srgb, var(--as-text) 10%, transparent) 62%,
+      color-mix(in srgb, var(--as-brand) 26%, transparent) 100%) border-box;
   box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
   animation: composer-form-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 .composer--form .composer__sheet:focus-within {
-  border-color: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 10%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
+}
+.composer__form-heading {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+  padding: 11px 12px 7px 16px;
+  font-size: 13px;
+  color: var(--as-text);
+}
+.composer__form-heading > span {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--as-text-muted);
+  background: var(--as-surface-muted);
+  border-radius: 5px;
+  padding: 3px 7px;
+}
+.composer__collapse {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--as-text-muted);
+  cursor: pointer;
+}
+.composer__collapse:hover:not(:disabled) {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
+}
+.composer__collapse:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 1px;
+}
+.composer__collapse:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.composer__collapse svg {
+  width: 14px;
+  height: 14px;
+}
+.composer__fields {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-bottom: 4px;
 }
 .composer__row {
-  padding: 0 16px 12px;
+  padding: 2px 16px;
 }
-.composer__row--grow {
-  padding-bottom: 8px;
+.composer__row:not(:last-child) {
+  border-bottom: 1px solid color-mix(in srgb, var(--as-text) 7%, transparent);
 }
-.composer__label {
-  display: block;
-  min-width: 0;
+.composer__line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 38px;
 }
-.composer__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.composer__line:focus-within .composer__label {
+  color: var(--as-brand);
+}
+.composer__label {
+  flex: 0 0 auto;
+  min-width: 84px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--as-text);
+  cursor: text;
 }
 .composer__control {
-  display: block;
-  width: 100%;
+  flex: 1;
   min-width: 0;
-  border: 1px solid var(--as-control-border, var(--as-border));
-  border-radius: 10px;
+  border: none;
   background: transparent;
-  padding: 10px 12px;
+  padding: 6px 0;
   color: var(--as-text);
   font: inherit;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.45;
+  text-align: right;
+}
+.composer__control:focus {
+  outline: none;
+}
+.composer__control::placeholder {
+  color: color-mix(in srgb, var(--as-text) 55%, transparent);
 }
 .composer__control--area {
   resize: none;
-  min-height: 72px;
+  min-height: 48px;
   field-sizing: content;
-  max-height: 140px;
+  max-height: 120px;
+  text-align: left;
 }
-.composer__control::placeholder {
-  color: color-mix(in srgb, var(--as-text) 62%, transparent);
+.composer__row--area .composer__line {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  padding: 4px 0;
 }
-.composer__control:focus {
-  outline: 2px solid var(--as-brand);
-  outline-offset: 1px;
+.composer__row--area .composer__label {
+  min-width: 0;
+}
+.composer__check {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--as-success);
+  color: var(--as-surface);
+}
+.composer__check svg {
+  width: 11px;
+  height: 11px;
 }
 .composer__error {
-  margin: 6px 0 0;
+  margin: 0;
+  padding: 0 0 7px;
   color: var(--as-danger);
   font-size: 12px;
   line-height: 1.35;
 }
-.composer__toolbar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 2px 16px 16px;
+.composer__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
-.composer__send:focus-visible {
-  outline: 2px solid var(--as-brand);
-  outline-offset: 2px;
+.composer--form .composer__field--inset {
+  flex-shrink: 0;
+  border: none;
+  border-top: 1px solid color-mix(in srgb, var(--as-text) 8%, transparent);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.composer--form .composer__field--inset:focus-within {
+  border-top-color: color-mix(in srgb, var(--as-text) 8%, transparent);
+  box-shadow: none;
 }
 .composer--form .composer__send {
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
+}
+.composer--dock.composer--form .composer__send {
+  width: 40px;
+  height: 40px;
 }
 @keyframes composer-form-in {
   from {
@@ -847,70 +949,6 @@ html.webless-agent-page-shift {
     transition: none;
   }
 }
-.composer--dock.composer--form .composer__control {
-  font-size: 15px;
-}
-.composer--dock.composer--form .composer__send {
-  width: 44px;
-  height: 44px;
-}
-.composer__form-heading {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 16px 16px 14px;
-  font-size: 14px;
-  color: var(--as-text);
-}
-.composer__form-heading > span {
-  margin-left: auto;
-  font-size: 11px;
-  color: var(--as-text-muted);
-  background: var(--as-surface-muted);
-  border-radius: 5px;
-  padding: 3px 7px;
-}
-.composer__form-heading > p {
-  flex-basis: 100%;
-  margin: 0;
-  font-size: 12px;
-  color: var(--as-text-muted);
-}
-.composer__field-label {
-  display: block;
-  margin-bottom: 5px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--as-text);
-}
-.composer__action {
-  flex: 1 1 140px;
-  min-width: 0;
-  min-height: 42px;
-  padding: 9px 12px;
-  border: 1px solid var(--as-control-border, var(--as-border));
-  border-radius: 10px;
-  background: var(--as-surface);
-  color: var(--as-text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.composer__action--primary {
-  border-color: var(--as-brand);
-  background: var(--as-brand);
-  color: var(--as-on-brand, var(--as-surface));
-}
-.composer__action:hover:not(:disabled) {
-  filter: brightness(0.96);
-}
-.composer__action:focus-visible,
-.composer__resume button:focus-visible {
-  outline: 2px solid var(--as-brand);
-  outline-offset: 2px;
-}
 .composer__resume {
   display: flex;
   align-items: center;
@@ -933,19 +971,13 @@ html.webless-agent-page-shift {
   text-underline-offset: 3px;
   cursor: pointer;
 }
-.composer__resume button:disabled,
-.composer__action:disabled {
+.composer__resume button:disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
-.composer__fields {
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-.composer__form-heading,
-.composer__toolbar {
-  flex-shrink: 0;
+.composer__resume button:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
 }
 
 /* src/react/components/FollowUpChips/FollowUpChips.css */
@@ -2794,12 +2826,14 @@ html.webless-agent-page-shift {
 }
 
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */
+@property --as-tab-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
 .assist-edge-tab {
   --tab-ink: var(--as-brand);
   --tab-fill: var(--as-surface);
   --tab-line: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
   --tab-along: 50%;
   --tab-inset: 0px;
+  --as-tab-beam: 0deg;
   position: fixed;
   top: auto;
   right: auto;
@@ -2836,9 +2870,9 @@ html.webless-agent-page-shift {
   height: 16px;
   flex-shrink: 0;
 }
-.assist-edge-tab__sparkles {
-  width: 18px;
-  height: 16px;
+.assist-edge-tab svg.assist-edge-tab__chat-spark {
+  width: 21px;
+  height: 21px;
 }
 .assist-edge-tab__mark {
   position: relative;
@@ -2854,8 +2888,8 @@ html.webless-agent-page-shift {
   inset: 0;
   width: 100%;
   height: 100%;
-  border-radius: 6px;
-  background: var(--tab-fill);
+  border-radius: inherit;
+  background: var(--pill-orb-from, var(--tab-fill));
   object-fit: contain;
 }
 .assist-edge-tab__custom-icon {
@@ -2872,6 +2906,24 @@ html.webless-agent-page-shift {
   line-height: 1;
   white-space: nowrap;
 }
+.assist-edge-tab__text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+.assist-edge-tab__sublabel {
+  max-width: 180px;
+  overflow: hidden;
+  font-family: var(--as-font-display);
+  font-size: 11.5px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .assist-edge-tab--right,
 .assist-edge-tab--left {
   flex-direction: column;
@@ -2887,7 +2939,7 @@ html.webless-agent-page-shift {
 .assist-edge-tab--top,
 .assist-edge-tab--bottom {
   flex-direction: row;
-  height: 40px;
+  min-height: 40px;
   min-width: 168px;
   width: auto;
   padding: 0 14px;
@@ -2934,6 +2986,11 @@ html.webless-agent-page-shift {
 .assist-edge-tab--bottom {
   left: var(--tab-along);
   bottom: max(calc(var(--tab-inset) + 24px), env(safe-area-inset-bottom));
+  justify-content: flex-start;
+  gap: 11px;
+  min-width: 0;
+  min-height: 56px;
+  padding: 6px 20px 6px 6px;
   border-radius: 999px;
   transform: translateX(-50%) translateY(calc(100% + 18px));
 }
@@ -2943,6 +3000,9 @@ html.webless-agent-page-shift {
 .assist-edge-tab--bottom.is-visible:hover {
   transform: translateX(-50%) translateY(-2px);
 }
+.assist-edge-tab--bottom.is-visible:active {
+  transform: translateX(-50%) translateY(0);
+}
 .assist-edge-tab--bottom.assist-edge-tab--align-start {
   left: max(calc(var(--tab-inset) + 24px), env(safe-area-inset-left));
   transform: translateY(calc(100% + 42px));
@@ -2960,6 +3020,10 @@ html.webless-agent-page-shift {
 .assist-edge-tab--bottom.assist-edge-tab--align-end.is-visible:hover {
   transform: translateY(-2px);
 }
+.assist-edge-tab--bottom.assist-edge-tab--align-start.is-visible:active,
+.assist-edge-tab--bottom.assist-edge-tab--align-end.is-visible:active {
+  transform: translateY(0);
+}
 .assist-edge-tab--outline {
   --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));
@@ -2971,8 +3035,7 @@ html.webless-agent-page-shift {
   border-right: 1px solid var(--tab-line);
   border-left: 1px solid var(--tab-line);
 }
-.assist-edge-tab--outline.assist-edge-tab--top,
-.assist-edge-tab--outline.assist-edge-tab--bottom {
+.assist-edge-tab--outline.assist-edge-tab--top {
   border-radius: 999px;
   border-top: 1px solid var(--tab-line);
   border-bottom: 1px solid var(--tab-line);
@@ -3002,13 +3065,182 @@ html.webless-agent-page-shift {
 .assist-edge-tab--fill.assist-edge-tab--left {
   min-height: 180px;
 }
+.assist-edge-tab.assist-edge-tab--bottom,
+.assist-edge-tab.assist-edge-tab--mobile {
+  isolation: isolate;
+  box-sizing: border-box;
+  --pill-brand: var(--as-brand, #6f16ff);
+  --pill-fill: #ffffff;
+  --pill-label: #5f6673;
+  --pill-title: #171717;
+  --pill-mark: #fff;
+  --pill-wash-light: color-mix(in srgb, var(--pill-brand) 24%, #fff);
+  --pill-wash-cool: color-mix(in oklab, var(--pill-brand) 32%, #d4e4ff);
+  --pill-wash-deep: color-mix(in srgb, var(--pill-brand) 38%, #fff);
+  --pill-orb-base: color-mix(in srgb, var(--pill-brand) 30%, #fff);
+  --pill-beam-soft: color-mix(in srgb, var(--pill-brand) 22%, #fff);
+  --pill-beam-mid: color-mix(in srgb, var(--pill-brand) 38%, #fff);
+  --pill-beam-bright: color-mix(in srgb, var(--pill-brand) 54%, #fff);
+  border: 2px solid transparent;
+  background: var(--pill-fill);
+  background:
+    linear-gradient(var(--pill-fill), var(--pill-fill)) padding-box,
+    conic-gradient(
+      from var(--as-tab-beam),
+      var(--pill-beam-soft) 0deg,
+      var(--pill-beam-soft) 215deg,
+      var(--pill-beam-mid) 252deg,
+      var(--pill-beam-bright) 278deg,
+      var(--pill-beam-mid) 304deg,
+      var(--pill-beam-soft) 360deg) border-box;
+  color: var(--pill-title);
+  box-shadow: 0 10px 24px -10px rgb(15 23 42 / 10%), 0 2px 6px rgb(15 23 42 / 4%);
+  transition:
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 220ms ease,
+    box-shadow 180ms ease;
+  animation: assist-edge-tab-beam 9s linear infinite;
+}
+.assist-edge-tab.assist-edge-tab--bottom.is-visible:hover,
+.assist-edge-tab.assist-edge-tab--mobile.is-visible:hover {
+  box-shadow: 0 12px 26px -8px rgb(15 23 42 / 16%), 0 3px 8px rgb(15 23 42 / 6%);
+}
+.assist-edge-tab--bottom .assist-edge-tab__text,
+.assist-edge-tab--mobile .assist-edge-tab__text {
+  gap: 2px;
+  padding-right: 2px;
+  font-family: var(--as-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+.assist-edge-tab--bottom .assist-edge-tab__label,
+.assist-edge-tab--mobile .assist-edge-tab__label {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.008em;
+  line-height: 1.25;
+  color: var(--pill-label);
+}
+.assist-edge-tab--bottom .assist-edge-tab__sublabel,
+.assist-edge-tab--mobile .assist-edge-tab__sublabel {
+  max-width: none;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.014em;
+  line-height: 1.25;
+  color: var(--pill-title);
+}
+.assist-edge-tab--bottom:not(:has(.assist-edge-tab__sublabel)) .assist-edge-tab__label,
+.assist-edge-tab--mobile:not(:has(.assist-edge-tab__sublabel)) .assist-edge-tab__label {
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.012em;
+  color: var(--pill-title);
+}
+.assist-edge-tab__mark--chip {
+  isolation: isolate;
+  overflow: hidden;
+  width: 36px;
+  height: 36px;
+  flex-basis: 36px;
+  border: 0;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      ellipse 88% 52% at 50% 94%,
+      color-mix(in srgb, var(--pill-brand) 22%, transparent) 0%,
+      transparent 68%),
+    radial-gradient(
+      120% 100% at 22% 12%,
+      var(--pill-wash-light) 0%,
+      transparent 55%),
+    radial-gradient(
+      110% 95% at 88% 88%,
+      var(--pill-wash-cool) 0%,
+      transparent 58%),
+    var(--pill-orb-base);
+  color: var(--pill-mark);
+  box-shadow: inset 0 1px 2px rgb(255 255 255 / 28%);
+}
+.assist-edge-tab__wash {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
+}
+.assist-edge-tab__wash--light,
+.assist-edge-tab__wash--cool {
+  inset: -32%;
+  filter: blur(4px);
+  opacity: 0.85;
+  -webkit-mask:
+    radial-gradient(
+      farthest-side,
+      transparent 40%,
+      #000 58%);
+  mask:
+    radial-gradient(
+      farthest-side,
+      transparent 40%,
+      #000 58%);
+}
+.assist-edge-tab__wash--light {
+  background:
+    radial-gradient(
+      closest-side at 16% 50%,
+      var(--pill-wash-light) 0%,
+      transparent 58%);
+  animation: assist-edge-tab-spin 7s linear infinite;
+}
+.assist-edge-tab__wash--cool {
+  background:
+    radial-gradient(
+      closest-side at 84% 50%,
+      var(--pill-wash-cool) 0%,
+      transparent 58%);
+  animation: assist-edge-tab-spin 9.5s linear infinite reverse;
+}
+.assist-edge-tab__mark--chip > svg,
+.assist-edge-tab__mark--chip > .assist-edge-tab__custom-icon,
+.assist-edge-tab__mark--chip > .assist-edge-tab__logo {
+  position: relative;
+  z-index: 2;
+  filter: drop-shadow(0 0.5px 0 rgb(255 255 255 / 45%));
+}
+.assist-edge-tab svg.assist-edge-tab__chat-spark .assist-edge-tab__spark {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: assist-edge-tab-twinkle 3.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
+}
+.assist-edge-tab svg.assist-edge-tab__chat-spark .assist-edge-tab__spark--b {
+  animation-duration: 4.2s;
+  animation-delay: -1.4s;
+}
+@keyframes assist-edge-tab-beam {
+  to {
+    --as-tab-beam: 360deg;
+  }
+}
+@keyframes assist-edge-tab-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes assist-edge-tab-twinkle {
+  0%, 100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 1;
+  }
+}
 .assist-edge-tab__dots {
   display: grid;
   grid-template-columns: repeat(3, 3px);
   gap: 3px;
 }
-.assist-edge-tab--top .assist-edge-tab__dots,
-.assist-edge-tab--bottom .assist-edge-tab__dots {
+.assist-edge-tab--top .assist-edge-tab__dots {
   grid-template-columns: repeat(4, 3px);
   grid-template-rows: repeat(3, 3px);
 }
@@ -3039,48 +3271,41 @@ html.webless-agent-page-shift {
     left: auto;
     width: auto;
     min-width: 0;
-    max-width: min(220px, calc(100vw - 28px));
-    height: 48px;
-    min-height: 48px;
-    padding: 0 17px 0 13px;
+    max-width: min(240px, calc(100vw - 28px));
+    height: auto;
+    min-height: 54px;
+    padding: 6px 16px 6px 6px;
     flex-direction: row;
-    justify-content: center;
-    gap: 9px;
-    border: 1px solid color-mix(in srgb, var(--as-brand) 18%, var(--as-border));
+    justify-content: flex-start;
+    gap: 10px;
     border-radius: 999px;
-    background: var(--as-surface);
-    color: var(--as-text);
-    box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 8%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--as-text) 32%, transparent);
     transform: translateY(calc(100% + 24px));
   }
   .assist-edge-tab--mobile.is-visible,
   .assist-edge-tab--mobile.is-visible:hover {
     transform: translateY(0);
   }
-  .assist-edge-tab--mobile.is-visible:hover {
-    box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 8%, transparent), 0 14px 36px -12px color-mix(in srgb, var(--as-text) 38%, transparent);
-  }
   .assist-edge-tab--mobile .assist-edge-tab__mark {
-    width: 22px;
-    height: 22px;
-    flex-basis: 22px;
-    border-radius: 7px;
-    background: var(--as-brand);
-    color: var(--as-visitor-text);
+    width: 34px;
+    height: 34px;
+    flex-basis: 34px;
+    border-radius: 50%;
     font-size: 10px;
     font-weight: 750;
   }
   .assist-edge-tab--mobile .assist-edge-tab__label {
     min-width: 0;
     overflow: hidden;
-    color: var(--as-text);
-    font-size: 14px;
-    letter-spacing: -0.01em;
     text-overflow: ellipsis;
     white-space: nowrap;
     writing-mode: initial;
     transform: none;
   }
+  .assist-edge-tab--mobile .assist-edge-tab__sublabel {
+    max-width: min(170px, calc(100vw - 150px));
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .assist-edge-tab,
@@ -3088,6 +3313,12 @@ html.webless-agent-page-shift {
   .assist-edge-tab.is-visible:hover {
     transition: none;
   }
+  .assist-edge-tab.assist-edge-tab--bottom,
+  .assist-edge-tab.assist-edge-tab--mobile,
+  .assist-edge-tab .assist-edge-tab__wash,
+  .assist-edge-tab .assist-edge-tab__spark {
+    animation: none;
+  }
 }
 
 /* src/react/components/AgentTranscript/AgentTranscript.css */