@webless/agent 0.13.2 → 0.14.0

package/dist/react.css

@@ -9,7 +9,7 @@
   --as-surface-muted: #f4f6fb;
   --as-text: #171b2a;
   --as-text-muted: #5a6378;
-  --as-text-subtle: #8a94a8;
+  --as-text-subtle: #6b7280;
   --as-border: rgb(42 51 70 / 0.1);
   --as-visitor-bubble: #6f16ff;
   --as-visitor-text: #ffffff;
@@ -578,142 +578,6 @@ html.webless-agent-page-shift {
   }
 }
 
-/* src/react/components/LearnMore/LearnMore.css */
-.learn-more {
-  width: 100%;
-  min-width: 0;
-}
-.learn-more__heading {
-  margin: 0;
-  font-size: 12.5px;
-  font-weight: 650;
-  line-height: 1.5;
-}
-.learn-more__toggle {
-  appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 4px;
-  min-height: 44px;
-  margin: 0;
-  padding: 10px 16px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--as-text-muted);
-  font: inherit;
-  font-size: 12.5px;
-  font-weight: 650;
-  text-align: left;
-  cursor: pointer;
-  transition: background 150ms ease, color 150ms ease;
-}
-.learn-more .learn-more__toggle {
-  width: auto;
-  background: transparent;
-}
-.learn-more .learn-more__toggle:hover {
-  color: var(--as-brand);
-  background: var(--as-brand-soft);
-}
-.learn-more__toggle:focus-visible {
-  outline: 2px solid var(--as-brand);
-  outline-offset: 2px;
-}
-.learn-more__chevron {
-  width: 14px;
-  height: 14px;
-  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.learn-more__toggle[aria-expanded=true] .learn-more__chevron {
-  transform: rotate(180deg);
-}
-.learn-more__panel {
-  display: grid;
-  grid-template-rows: 0fr;
-  visibility: hidden;
-  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
-}
-.learn-more__panel--open {
-  grid-template-rows: 1fr;
-  visibility: visible;
-  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.learn-more__panel-inner {
-  min-height: 0;
-  overflow: hidden;
-}
-.learn-more__questions {
-  margin: 0;
-  padding: 0 0 4px;
-  list-style: none;
-}
-.learn-more__questions li {
-  border-bottom: 1px solid var(--as-border);
-}
-.learn-more__questions li:last-child {
-  border-bottom: 0;
-}
-.learn-more__questions button {
-  appearance: none;
-  display: flex;
-  align-items: center;
-  gap: var(--as-discovery-row-gap);
-  width: 100%;
-  min-height: var(--as-discovery-row-min-height);
-  padding: var(--as-discovery-row-padding);
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--as-text);
-  text-align: left;
-  font: inherit;
-  font-size: var(--as-discovery-row-font-size);
-  font-weight: var(--as-discovery-row-font-weight);
-  line-height: var(--as-discovery-row-line-height);
-  cursor: pointer;
-}
-.learn-more__question-icon {
-  display: inline-flex;
-  flex: 0 0 18px;
-  color: var(--as-text-muted);
-}
-.learn-more__question-text {
-  min-width: 0;
-  flex: 1;
-  overflow-wrap: anywhere;
-}
-.learn-more__question-arrow {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  color: var(--as-text-muted);
-}
-.learn-more .learn-more__questions button:hover:not(:disabled) {
-  background: var(--as-brand-soft);
-  color: var(--as-brand);
-}
-.learn-more .learn-more__questions button:hover:not(:disabled) .learn-more__question-arrow {
-  color: var(--as-brand);
-}
-.learn-more__questions button:focus-visible {
-  outline: none;
-  box-shadow: var(--as-focus-inset-ring);
-}
-.learn-more__questions button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-@media (prefers-reduced-motion: reduce) {
-  .learn-more__panel {
-    transition: none;
-  }
-  .learn-more__chevron {
-    transition: none;
-  }
-}
-
 /* src/react/components/SearchReferences/SearchReferences.css */
 .search-references {
   display: grid;
@@ -739,15 +603,13 @@ html.webless-agent-page-shift {
 }
 .search-references__list {
   display: grid;
+  gap: 0;
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.search-references__list > li {
-  border-bottom: 1px solid var(--as-border);
-}
-.search-references__list > li:last-child {
-  border-bottom: 0;
+.search-references__list > li + li {
+  border-top: 1px solid color-mix(in srgb, var(--as-text) 6%, transparent);
 }
 .search-references__source {
   display: flex;
@@ -835,6 +697,94 @@ html.webless-agent-page-shift {
   color: var(--as-text-muted);
 }
 
+/* src/react/components/ExploreMore/ExploreMore.css */
+.explore-more {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 16px;
+}
+.explore-more__section {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+.explore-more__section .search-references {
+  margin-top: 0;
+}
+.explore-more__label {
+  margin: 0;
+  padding: 0 16px 2px;
+  color: var(--as-text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+.explore-more__section .search-references__list > li:first-child > .search-references__source,
+.explore-more__section .explore-more__questions > li:first-child > button {
+  padding-top: 6px;
+}
+.explore-more__questions {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.explore-more__questions > li + li {
+  border-top: 1px solid color-mix(in srgb, var(--as-text) 6%, transparent);
+}
+.explore-more__questions button {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: var(--as-discovery-row-gap);
+  width: 100%;
+  min-height: var(--as-discovery-row-min-height);
+  padding: var(--as-discovery-row-padding);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--as-text);
+  text-align: left;
+  font: inherit;
+  font-size: var(--as-discovery-row-font-size);
+  font-weight: var(--as-discovery-row-font-weight);
+  line-height: var(--as-discovery-row-line-height);
+  cursor: pointer;
+}
+.explore-more__question-icon {
+  display: inline-flex;
+  flex: 0 0 18px;
+  color: var(--as-text-muted);
+}
+.explore-more__question-text {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+.explore-more__question-arrow {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--as-text-muted);
+}
+.explore-more .explore-more__questions button:hover:not(:disabled) {
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
+}
+.explore-more .explore-more__questions button:hover:not(:disabled) .explore-more__question-arrow {
+  color: var(--as-brand);
+}
+.explore-more__questions button:focus-visible {
+  outline: none;
+  box-shadow: var(--as-focus-inset-ring);
+}
+.explore-more__questions button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 /* src/react/components/AnswerReceiptDialog/AnswerReceiptDialog.css */
 .agent-receipt-dialog {
   position: absolute;
@@ -1252,48 +1202,55 @@ html.webless-agent-page-shift {
     transition: none;
   }
 }
-.composer__resume {
+.composer__actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  gap: 8px 10px;
+  flex-wrap: wrap;
+  gap: 8px;
   padding: 0 2px;
-  color: var(--as-text-muted);
-  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;
+.composer__action-badge {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  min-height: 26px;
+  box-sizing: border-box;
+  padding: 2px 10px;
+  border: 1px solid var(--as-border);
+  border-radius: 999px;
+  background: var(--as-surface);
   color: var(--as-text);
-  flex-shrink: 0;
-  padding: 4px 0;
   font: inherit;
-  font-size: 11px;
+  font-size: 11.5px;
   font-weight: 600;
-  line-height: 1.25;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  white-space: nowrap;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  text-decoration: none;
   cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background 150ms ease,
+    color 150ms ease;
 }
-.composer__resume button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
+.composer__actions .composer__action-badge {
+  width: auto;
+  background: var(--as-surface);
+}
+.composer__actions .composer__action-badge:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
 }
-.composer__resume button:focus-visible {
+.composer__action-badge:focus-visible {
   outline: 2px solid var(--as-brand);
   outline-offset: 2px;
 }
+.composer__action-badge:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
 
 /* src/react/components/FollowUpChips/FollowUpChips.css */
 .followups {
@@ -1852,6 +1809,12 @@ html.webless-agent-page-shift {
 .message-bubble__markdown ul {
   list-style: disc outside;
 }
+.message-bubble__text .message-bubble__markdown :is(ol, ul) li::marker {
+  color: var(--as-text-muted);
+  font-size: 1em;
+  font-style: normal;
+  font-weight: 650;
+}
 .message-bubble__markdown [data-streamdown=strong] {
   font-weight: 650;
 }
@@ -3011,9 +2974,6 @@ 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;
@@ -3082,11 +3042,7 @@ html.webless-agent-page-shift {
 }
 .agent-rail__disclaimer {
   flex-shrink: 0;
-  padding: 8px 16px 6px;
-  background: var(--as-surface);
-}
-.agent-rail__handoff + .agent-rail__disclaimer {
-  border-top: 1px solid var(--as-hairline);
+  margin-top: 8px;
 }
 .agent-rail__disclaimer p {
   margin: 0;
@@ -3291,7 +3247,6 @@ html.webless-agent-page-shift {
   color: var(--as-text);
   font-weight: 650;
 }
-.agent-rail__handoff-cta,
 .agent-rail__handoff-action {
   appearance: none;
   flex: 0 0 auto;
@@ -3307,17 +3262,14 @@ html.webless-agent-page-shift {
   cursor: pointer;
   transition: border-color 150ms ease, background 150ms ease;
 }
-.agent-rail__handoff-cta:hover:not(:disabled),
 .agent-rail__handoff-action:hover:not(:disabled) {
   border-color: color-mix(in srgb, var(--as-brand) 40%, var(--as-border));
   background: var(--as-surface-muted);
 }
-.agent-rail__handoff-cta:focus-visible,
 .agent-rail__handoff-action:focus-visible {
   outline: 2px solid var(--as-brand);
   outline-offset: 2px;
 }
-.agent-rail__handoff-cta:disabled,
 .agent-rail__handoff-action:disabled {
   opacity: 0.55;
   cursor: default;
@@ -3350,16 +3302,17 @@ html.webless-agent-page-shift {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 3px;
+  gap: 4px;
   margin-left: auto;
-  min-height: 44px;
-  padding: 10px 16px;
+  min-height: 28px;
+  box-sizing: border-box;
+  padding: 4px 8px;
   border: 0;
   border-radius: 8px;
   background: transparent;
-  color: var(--as-text-muted);
+  color: var(--as-text-subtle);
   font: inherit;
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 650;
   cursor: pointer;
   transition: background 150ms ease, color 150ms ease;
@@ -3369,8 +3322,8 @@ html.webless-agent-page-shift {
   background: transparent;
 }
 .agent-rail__answer-actions .agent-rail__sources-button:hover {
-  color: var(--as-brand);
-  background: var(--as-brand-soft);
+  color: var(--as-text);
+  background: var(--as-surface-muted);
 }
 .agent-rail__sources-button:focus-visible {
   outline: 2px solid var(--as-brand);
@@ -3381,8 +3334,8 @@ html.webless-agent-page-shift {
   transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 .agent-rail__sources-button-chevron svg {
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
 }
 .agent-rail__sources-button[aria-expanded=true] .agent-rail__sources-button-chevron {
   transform: rotate(180deg);
@@ -3403,17 +3356,8 @@ html.webless-agent-page-shift {
   min-height: 0;
   overflow: hidden;
 }
-.agent-rail__sources-panel-inner > .search-references {
-  margin-top: 2px;
-}
-.agent-rail .learn-more .learn-more__toggle {
-  width: auto;
-  background: transparent;
-  padding-left: 0;
-}
-.agent-rail .learn-more .learn-more__toggle:hover {
-  color: var(--as-brand);
-  background: var(--as-brand-soft);
+.agent-rail__sources-panel-inner > .explore-more {
+  margin-top: 14px;
 }
 
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */