@webless/agent 0.10.2 → 0.10.4

package/dist/react.css

@@ -326,9 +326,13 @@ html.webless-agent-page-shift {
   margin: 0;
   color: var(--as-text-muted);
   font-size: 12.5px;
+  font-weight: 650;
+  font-style: normal;
+  line-height: 1.4;
+}
+.agent-activity-bubble__status--soft {
   font-weight: 400;
   font-style: italic;
-  line-height: 1.4;
 }
 .agent-activity-bubble__pulse {
   position: relative;
@@ -954,22 +958,34 @@ html.webless-agent-page-shift {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  padding: 0 8px;
+  flex-wrap: nowrap;
+  gap: 8px 10px;
+  padding: 0 2px;
   color: var(--as-text-muted);
-  font-size: 12px;
+  font-size: 11px;
+  line-height: 1.25;
+}
+.composer__resume > span {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .composer__resume button {
   border: none;
   border-radius: 4px;
   background: transparent;
   color: var(--as-text);
-  padding: 8px 0;
+  flex-shrink: 0;
+  padding: 4px 0;
   font: inherit;
+  font-size: 11px;
   font-weight: 600;
+  line-height: 1.25;
   text-decoration: underline;
   text-underline-offset: 3px;
+  white-space: nowrap;
   cursor: pointer;
 }
 .composer__resume button:disabled {
@@ -1573,6 +1589,23 @@ html.webless-agent-page-shift {
   color: var(--as-brand);
   font-size: 11px;
 }
+.message-bubble__text .message-bubble__markdown :where(h1, h2, h3, h4, h5, h6) {
+  margin: 16px 0 8px;
+  padding: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: 1em;
+  font-style: normal;
+  font-weight: 650;
+  line-height: 1.4;
+  letter-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  overflow-wrap: anywhere;
+}
+.message-bubble__text .message-bubble__markdown :where(h1, h2) {
+  font-size: 1.125em;
+}
 .message-bubble__markdown > :first-child {
   margin-top: 0;
 }
@@ -2584,6 +2617,9 @@ html.webless-agent-page-shift {
   border-top: 1px solid var(--as-hairline);
   background: var(--as-surface);
 }
+.agent-rail__composer-wrap:has(.composer__resume) {
+  padding-inline: 12px;
+}
 .agent-rail__overlay {
   position: absolute;
   inset: 0;
@@ -2827,14 +2863,12 @@ 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;
@@ -2999,9 +3033,9 @@ html.webless-agent-page-shift {
   justify-content: flex-start;
   gap: 11px;
   min-width: 0;
-  min-height: 56px;
-  padding: 6px 20px 6px 6px;
-  border-radius: 999px;
+  min-height: 0;
+  padding: 12px 20px 12px 12px;
+  border-radius: 48px;
   transform: translateX(-50%) translateY(calc(100% + 18px));
 }
 .assist-edge-tab--bottom.is-visible {
@@ -3065,6 +3099,16 @@ html.webless-agent-page-shift {
 .assist-edge-tab--ask.assist-edge-tab--left {
   border-radius: 0 18px 18px 0;
 }
+.assist-edge-tab--ask.assist-edge-tab--bottom,
+.assist-edge-tab--ask.assist-edge-tab--mobile,
+.assist-edge-tab--fill.assist-edge-tab--bottom,
+.assist-edge-tab--fill.assist-edge-tab--mobile,
+.assist-edge-tab--outline.assist-edge-tab--bottom,
+.assist-edge-tab--outline.assist-edge-tab--mobile {
+  --tab-fill: #ffffff;
+  background-color: #ffffff;
+  background-image: none;
+}
 .assist-edge-tab--fill {
   --tab-fill: var(--as-brand);
   --tab-ink: #fff;
@@ -3079,49 +3123,27 @@ html.webless-agent-page-shift {
 .webless-agent-root > .assist-edge-tab.assist-edge-tab--mobile,
 .assist-edge-tab.assist-edge-tab--bottom,
 .assist-edge-tab.assist-edge-tab--mobile {
-  isolation: isolate;
   box-sizing: border-box;
   color-scheme: light;
   --tab-fill: #ffffff;
-  --tab-ink: #171717;
+  --tab-ink: #1f2937;
   --tab-line: transparent;
-  --pill-brand: var(--as-brand, #6f16ff);
+  --pill-brand: var(--as-brand, #6366f1);
   --pill-fill: #ffffff;
-  --pill-label: #5f6673;
-  --pill-title: #171717;
-  --pill-mark: var(--pill-brand);
-  --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-color: var(--pill-fill);
-  background-image:
-    linear-gradient(var(--pill-fill), var(--pill-fill)),
-    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);
-  background-origin: border-box;
-  background-clip: padding-box, border-box;
+  --pill-title: #1f2937;
+  --pill-subtitle: #9ca3af;
+  --pill-glow-strong: color-mix(in srgb, var(--pill-brand) 40%, transparent);
+  --pill-glow-soft: color-mix(in srgb, var(--pill-brand) 10%, transparent);
+  --pill-glow-shadow: color-mix(in srgb, var(--pill-brand) 15%, transparent);
+  --pill-orb-end: color-mix(in srgb, var(--pill-brand) 45%, #3b82f6);
+  gap: 12px;
+  border: 1.5px solid var(--pill-brand);
+  background-color: #ffffff;
+  background-image: none;
   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%);
+  box-shadow: 0 0 0 0 var(--pill-glow-strong), 0 4px 20px var(--pill-glow-shadow);
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
+  animation: assist-edge-tab-border-flow 2s ease-in-out infinite;
 }
 .assist-edge-tab--bottom .assist-edge-tab__text,
 .assist-edge-tab--mobile .assist-edge-tab__text {
@@ -3133,99 +3155,51 @@ html.webless-agent-page-shift {
 .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);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1;
+  color: var(--pill-title);
 }
 .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);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1;
+  color: var(--pill-subtitle);
 }
 .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;
+  font-size: 13px;
+  font-weight: 600;
   color: var(--pill-title);
 }
 .assist-edge-tab__mark--chip {
-  isolation: isolate;
   overflow: hidden;
   width: 36px;
   height: 36px;
   flex-basis: 36px;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
   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;
+    linear-gradient(
+      135deg,
+      var(--pill-brand) 0%,
+      var(--pill-orb-end) 100%);
+  color: #ffffff;
+  box-shadow: none;
 }
 .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%));
+  z-index: 1;
+}
+.assist-edge-tab__mark--chip > .assist-edge-tab__chat-spark {
+  color: #ffffff;
 }
 .assist-edge-tab svg.assist-edge-tab__chat-spark .assist-edge-tab__spark {
   transform-box: fill-box;
@@ -3236,14 +3210,12 @@ html.webless-agent-page-shift {
   animation-duration: 4.2s;
   animation-delay: -1.4s;
 }
-@keyframes assist-edge-tab-beam {
-  to {
-    --as-tab-beam: 360deg;
+@keyframes assist-edge-tab-border-flow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 var(--pill-glow-strong), 0 4px 20px var(--pill-glow-shadow);
   }
-}
-@keyframes assist-edge-tab-spin {
-  to {
-    transform: rotate(360deg);
+  50% {
+    box-shadow: 0 0 0 6px var(--pill-glow-soft), 0 4px 20px var(--pill-glow-shadow);
   }
 }
 @keyframes assist-edge-tab-twinkle {
@@ -3292,18 +3264,20 @@ html.webless-agent-page-shift {
     min-width: 0;
     max-width: min(240px, calc(100vw - 28px));
     height: auto;
-    min-height: 54px;
-    padding: 6px 16px 6px 6px;
+    min-height: 0;
+    padding: 12px 16px 12px 12px;
     flex-direction: row;
     justify-content: flex-start;
     gap: 10px;
     border-radius: 999px;
     transform: translateY(calc(100% + 24px));
   }
-  .assist-edge-tab--mobile.is-visible,
-  .assist-edge-tab--mobile.is-visible:hover {
+  .assist-edge-tab--mobile.is-visible {
     transform: translateY(0);
   }
+  .assist-edge-tab--mobile.is-visible:hover {
+    transform: translateY(-2px);
+  }
   .assist-edge-tab--mobile .assist-edge-tab__mark {
     width: 34px;
     height: 34px;
@@ -3334,7 +3308,6 @@ html.webless-agent-page-shift {
   }
   .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;
   }