@webless/agent 0.4.1 → 0.5.0

package/dist/embed.css

@@ -322,9 +322,9 @@ html.webless-agent-page-shift {
 }
 .agent-activity-bubble__details {
   overflow: hidden;
-  border: 1px solid var(--as-border);
+  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) 48%, var(--as-surface));
+  background: color-mix(in srgb, var(--as-surface-muted) 72%, var(--as-surface));
 }
 .agent-activity-bubble__details summary {
   display: flex;
@@ -493,9 +493,9 @@ html.webless-agent-page-shift {
   align-items: flex-end;
   gap: 6px;
   padding: 6px;
-  border: 1px solid var(--as-border);
+  border: 1px solid color-mix(in srgb, var(--as-border) 72%, var(--as-surface));
   border-radius: 16px;
-  background: var(--as-surface);
+  background: color-mix(in srgb, var(--as-surface-muted) 72%, var(--as-surface));
   box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
 }
 .composer__field:focus-within {
@@ -549,8 +549,8 @@ html.webless-agent-page-shift {
 .composer--dock .composer__field {
   align-items: center;
   padding: 5px 5px 5px 13px;
-  background: var(--as-surface);
-  border: 1px solid var(--as-border);
+  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));
   border-radius: 999px;
   box-shadow: none;
 }
@@ -661,6 +661,211 @@ html.webless-agent-page-shift {
   display: none;
 }
 
+/* src/react/components/BookingCard/BookingCard.css */
+.booking-card {
+  width: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
+}
+.booking-card__form,
+.booking-card__step,
+.booking-card__identity,
+.booking-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.booking-card__form {
+  padding: 16px;
+}
+.booking-card__step {
+  gap: 16px;
+}
+.booking-card__identity,
+.booking-card__field {
+  gap: 8px;
+}
+.booking-card__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--as-text);
+  text-wrap: balance;
+}
+.booking-card__tz,
+.booking-card__field span {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--as-text-muted, var(--as-text));
+}
+.booking-card__step-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.booking-card__month {
+  display: grid;
+  grid-template-columns: 32px 1fr 32px;
+  align-items: center;
+  gap: 8px;
+}
+.booking-card__month-title {
+  margin: 0;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--as-text);
+}
+.booking-card__nav {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text);
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.booking-card__nav:hover:not(:disabled) {
+  background: var(--as-surface-muted, #f4f6fb);
+}
+.booking-card__nav:disabled {
+  color: var(--as-text-subtle);
+  cursor: default;
+}
+.booking-card__nav:focus-visible,
+.booking-card__day:focus-visible,
+.booking-card__time:focus-visible,
+.booking-card__field input:focus-visible,
+.booking-card__field select:focus-visible,
+.booking-card__submit:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.booking-card__weekdays,
+.booking-card__calendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+.booking-card__calendar {
+  min-height: calc((36px * 6) + (4px * 5));
+}
+.booking-card__weekdays span {
+  min-height: 24px;
+  color: var(--as-text-muted, var(--as-text));
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+}
+.booking-card__day {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  aspect-ratio: 1;
+  min-height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--as-text-subtle);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: default;
+}
+.booking-card__day--available {
+  background: var(--as-brand-soft);
+  color: var(--as-text);
+  cursor: pointer;
+}
+.booking-card__day--available:hover {
+  background: var(--as-brand-light);
+}
+.booking-card__day--selected,
+.booking-card__day--selected:hover {
+  background: var(--as-visitor-bubble, var(--as-brand));
+  color: var(--as-visitor-text, #fff);
+}
+.booking-card__times {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.booking-card__times:has(:nth-child(7)) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.booking-card__time {
+  appearance: none;
+  width: 100%;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 1px solid var(--as-brand);
+  border-radius: var(--as-radius-sm);
+  background: var(--as-surface);
+  color: var(--as-text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 650;
+  cursor: pointer;
+  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.booking-card__time:hover {
+  background: var(--as-brand-soft);
+}
+.booking-card__time--selected {
+  background: var(--as-visitor-bubble, var(--as-brand));
+  color: var(--as-visitor-text, #fff);
+}
+.booking-card__field input,
+.booking-card__field select {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
+  color: var(--as-text);
+  font: inherit;
+  font-size: 13px;
+}
+.booking-card__submit {
+  width: 100%;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--as-radius-md);
+  background: var(--as-visitor-bubble, #111);
+  color: var(--as-visitor-text, #fff);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.booking-card__submit:hover {
+  filter: brightness(1.04);
+}
+@media (prefers-reduced-motion: reduce) {
+  .booking-card__time {
+    transition: none;
+  }
+}
+
 /* src/react/components/MessageBubble/MessageBubble.css */
 .message-bubble {
   display: flex;
@@ -668,6 +873,16 @@ html.webless-agent-page-shift {
   gap: 8px;
   max-width: 86%;
 }
+.message-bubble--agent:has(.booking-card) {
+  align-self: stretch;
+  width: 100%;
+  max-width: 100%;
+}
+.message-bubble .booking-card {
+  width: 100%;
+  max-width: none;
+  box-sizing: border-box;
+}
 .message-bubble--visitor {
   align-self: flex-end;
   align-items: flex-end;
@@ -692,10 +907,10 @@ html.webless-agent-page-shift {
 }
 .message-bubble--agent .message-bubble__text {
   width: 100%;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
+  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));
   color: var(--as-text);
 }
 .message-bubble__markdown > :first-child {
@@ -802,8 +1017,7 @@ html.webless-agent-page-shift {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.agent-rail__brand-mark,
-.agent-rail__welcome-mark {
+.agent-rail__brand-mark {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -820,8 +1034,7 @@ html.webless-agent-page-shift {
   border-radius: 8px;
   font-size: 11px;
 }
-.agent-rail__brand-logo,
-.agent-rail__welcome-logo {
+.agent-rail__brand-logo {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -917,39 +1130,9 @@ html.webless-agent-page-shift {
 }
 .agent-rail__welcome {
   display: flex;
-  min-height: 100%;
-  flex: 1 0 auto;
   flex-direction: column;
-  justify-content: center;
-  gap: 22px;
-  padding: 28px 2px 18px;
-}
-.agent-rail__welcome-mark {
-  width: 42px;
-  height: 42px;
-  border-radius: 13px;
-  box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--as-brand) 70%, transparent);
-  font-size: 16px;
-}
-.agent-rail__welcome-copy {
-  display: grid;
-  gap: 9px;
-}
-.agent-rail__welcome-copy h2 {
-  margin: 0;
-  color: var(--as-text);
-  font-family: var(--as-font-display);
-  font-size: clamp(21px, 3vw, 25px);
-  font-weight: 650;
-  letter-spacing: -0.035em;
-  line-height: 1.15;
-}
-.agent-rail__welcome-copy p {
-  max-width: 42ch;
-  margin: 0;
-  color: var(--as-text-muted);
-  font-size: 13px;
-  line-height: 1.55;
+  flex-shrink: 0;
+  gap: 16px;
 }
 .agent-rail__timeline-slot,
 .agent-rail__followups-slot {
@@ -1012,6 +1195,8 @@ html.webless-agent-page-shift {
   margin-top: 7px;
 }
 .agent-rail__footer p {
+  display: grid;
+  gap: 2px;
   margin: 0;
   color: var(--as-text-subtle);
   font-size: 10.5px;
@@ -1023,10 +1208,10 @@ html.webless-agent-page-shift {
   top: 50%;
   left: 50%;
   z-index: calc(var(--as-z-mobile) + 1);
-  width: min(960px, calc(100vw - 48px));
+  width: min(var(--rail-width), calc(100vw - 48px));
   min-width: 0;
-  max-width: 960px;
-  height: min(860px, calc(100dvh - 48px));
+  max-width: var(--rail-width);
+  height: min(720px, calc(100dvh - 48px));
   max-height: calc(100dvh - 48px);
   overflow: hidden;
   transform: translate(-50%, -50%);
@@ -1042,25 +1227,17 @@ html.webless-agent-page-shift {
     box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 .agent-rail--expanded .agent-rail__thread {
-  max-width: 760px;
-  padding: 28px 24px 36px;
+  max-width: none;
+  padding: 20px 16px 26px;
 }
 .agent-rail--expanded .agent-rail__welcome {
   width: 100%;
-  max-width: 680px;
-  margin: 0 auto;
 }
 .agent-rail--expanded .agent-rail__composer-wrap {
-  padding: 16px 24px 18px;
-}
-.agent-rail--expanded .agent-rail__composer-wrap > .composer,
-.agent-rail--expanded .agent-rail__footer {
-  width: min(712px, 100%);
-  margin-right: auto;
-  margin-left: auto;
+  padding: 12px 14px 13px;
 }
 .agent-rail--expanded .agent-rail__footer {
-  margin-top: 8px;
+  margin-top: 7px;
 }
 .agent-rail--mobile-fullscreen {
   position: fixed;
@@ -1142,9 +1319,6 @@ html.webless-agent-page-shift {
   .agent-rail .agent-rail__expand {
     display: none;
   }
-  .agent-rail__welcome-copy h2 {
-    font-size: 23px;
-  }
   .agent-rail__error {
     align-items: flex-start;
     flex-direction: column;
@@ -1234,6 +1408,12 @@ html.webless-agent-page-shift {
   background: var(--tab-fill);
   object-fit: contain;
 }
+.assist-edge-tab__custom-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
 .assist-edge-tab__label {
   font-family: var(--as-font-display);
   font-size: 13px;