@webless/agent 0.7.5 → 0.9.0

package/dist/embed.cjs

@@ -3580,6 +3580,48 @@ var defaultDarkAgentRailTheme = {
   danger: "#ff8da1"
 };
 
+// src/react/lib/agent-theme.ts
+function agentThemeStyle(theme, resolvedColorScheme) {
+  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
+  const resolvedTheme = resolvedColorScheme === "dark" ? {
+    ...brandedTheme,
+    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
+    brandDeep: theme?.brandDeep ?? defaultDarkAgentRailTheme.brandDeep,
+    brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
+    border: theme?.border ?? defaultDarkAgentRailTheme.border,
+    danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
+    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
+    success: theme?.success ?? defaultDarkAgentRailTheme.success,
+    surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
+    surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
+    text: theme?.text ?? defaultDarkAgentRailTheme.text,
+    textMuted: theme?.textMuted ?? defaultDarkAgentRailTheme.textMuted,
+    textSubtle: theme?.textSubtle ?? defaultDarkAgentRailTheme.textSubtle,
+    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
+  } : brandedTheme;
+  return {
+    "--rail-width": resolvedTheme.railMaxWidth,
+    "--as-rail-max-width": resolvedTheme.railMaxWidth,
+    "--as-brand": resolvedTheme.brand,
+    "--as-brand-soft": resolvedTheme.brandSoft,
+    "--as-brand-deep": resolvedTheme.brandDeep,
+    "--as-surface": resolvedTheme.surface,
+    "--as-surface-muted": resolvedTheme.surfaceMuted,
+    "--as-text": resolvedTheme.text,
+    "--as-text-muted": resolvedTheme.textMuted,
+    "--as-text-subtle": resolvedTheme.textSubtle,
+    "--as-border": resolvedTheme.border,
+    "--as-visitor-bubble": resolvedTheme.visitorBubble,
+    "--as-visitor-text": resolvedTheme.visitorText,
+    "--as-on-brand": resolvedTheme.onBrand,
+    "--as-success": resolvedTheme.success,
+    "--as-danger": resolvedTheme.danger,
+    "--as-font-body": resolvedTheme.fontBody,
+    "--as-font-display": resolvedTheme.fontDisplay,
+    colorScheme: resolvedColorScheme
+  };
+}
+
 // src/react/hooks/useAgentColorScheme.ts
 var import_react4 = require("react");
 var DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
@@ -4327,7 +4369,23 @@ function calendarCells(year, month) {
 function BookingCardLoader() {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("section", { className: "booking-card", "aria-label": "Book a meeting", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "booking-card__loading", role: "status", children: "Finding available times\u2026" }) });
 }
-function BookingCard({
+function BookingCard(props) {
+  if (!props.readOnly) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InteractiveBookingCard, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "booking-card", "aria-label": "Recorded available times", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "booking-card__title", children: "Available times offered" }),
+    props.offer.slots.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { children: props.offer.slots.map((slot, index) => {
+      const eventType = props.offer.eventTypes.find(
+        (item) => item.uri === slot.eventTypeUri
+      );
+      const label = Number.isFinite(Date.parse(slot.startTime)) ? formatSlotLabel(slot.startTime) : "Time unavailable";
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { children: [
+        eventType ? `${eventType.name} \xB7 ` : "",
+        label
+      ] }, `${slot.eventTypeUri ?? ""}:${slot.startTime}:${index}`);
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "No available times were recorded." })
+  ] });
+}
+function InteractiveBookingCard({
   disabled = false,
   offer,
   onBook
@@ -4693,6 +4751,7 @@ function MessageBubble({
   message,
   brandLogoUrl,
   bookingDisabled = false,
+  bookingReadOnly = false,
   offer,
   onBook
 }) {
@@ -4759,6 +4818,7 @@ function MessageBubble({
       BookingCard,
       {
         disabled: bookingDisabled,
+        readOnly: bookingReadOnly,
         offer: nextOffer,
         onBook
       },
@@ -6188,44 +6248,7 @@ function AgentRail({
   const [failedLogoUrl, setFailedLogoUrl] = (0, import_react14.useState)(null);
   const showBrandLogo = Boolean(resolvedBrandLogoUrl) && failedLogoUrl !== resolvedBrandLogoUrl;
   const resolvedColorScheme = useAgentColorScheme(colorScheme);
-  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
-  const resolvedTheme = resolvedColorScheme === "dark" ? {
-    ...brandedTheme,
-    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
-    brandDeep: theme?.brandDeep ?? defaultDarkAgentRailTheme.brandDeep,
-    brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
-    border: theme?.border ?? defaultDarkAgentRailTheme.border,
-    danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
-    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
-    success: theme?.success ?? defaultDarkAgentRailTheme.success,
-    surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
-    surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
-    text: theme?.text ?? defaultDarkAgentRailTheme.text,
-    textMuted: theme?.textMuted ?? defaultDarkAgentRailTheme.textMuted,
-    textSubtle: theme?.textSubtle ?? defaultDarkAgentRailTheme.textSubtle,
-    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
-  } : brandedTheme;
-  const railStyle = {
-    "--rail-width": resolvedTheme.railMaxWidth,
-    "--as-rail-max-width": resolvedTheme.railMaxWidth,
-    "--as-brand": resolvedTheme.brand,
-    "--as-brand-soft": resolvedTheme.brandSoft,
-    "--as-brand-deep": resolvedTheme.brandDeep,
-    "--as-surface": resolvedTheme.surface,
-    "--as-surface-muted": resolvedTheme.surfaceMuted,
-    "--as-text": resolvedTheme.text,
-    "--as-text-muted": resolvedTheme.textMuted,
-    "--as-text-subtle": resolvedTheme.textSubtle,
-    "--as-border": resolvedTheme.border,
-    "--as-visitor-bubble": resolvedTheme.visitorBubble,
-    "--as-visitor-text": resolvedTheme.visitorText,
-    "--as-on-brand": resolvedTheme.onBrand,
-    "--as-success": resolvedTheme.success,
-    "--as-danger": resolvedTheme.danger,
-    "--as-font-body": resolvedTheme.fontBody,
-    "--as-font-display": resolvedTheme.fontDisplay,
-    colorScheme: resolvedColorScheme
-  };
+  const railStyle = agentThemeStyle(theme, resolvedColorScheme);
   const pendingInputRequests = (state.pendingInputs ?? []).filter(
     (request) => shouldRenderVisitorInputCard(request) && (!state.pendingOffer || request.kind === "tool-approval")
   );