@webless/agent 0.6.9 → 0.6.11

package/dist/embed.cjs

@@ -2302,6 +2302,30 @@ function bookingPresenter(kind) {
     }
   };
 }
+function providerErrorPresenter() {
+  return {
+    kind: "provider_error",
+    present: ({ envelope }) => {
+      const output = asRecord3(envelope.output);
+      const providerError = asRecord3(output?.providerError);
+      const message = safeText(providerError?.message);
+      const action = safeText(providerError?.action);
+      if (!message || !action) return null;
+      const resourceLabels = Array.isArray(providerError?.resourceLabels) ? providerError.resourceLabels.map(safeText).filter(Boolean).slice(0, MAX_DETAILS) : [];
+      return {
+        kind: "summary",
+        status: "failed",
+        title: message,
+        description: action,
+        ...resourceLabels.length ? {
+          details: [
+            { label: "Affected", value: resourceLabels.join(", ") }
+          ]
+        } : {}
+      };
+    }
+  };
+}
 function asRecord3(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
 }
@@ -2419,6 +2443,7 @@ function fallbackTitleFromKind(kind) {
   return "Saved";
 }
 var builtInVisitorToolResultRegistry = [
+  providerErrorPresenter(),
   bookingPresenter("booking_offer"),
   bookingPresenter("booking_confirmed"),
   bookingPresenter("booking_canceled"),
@@ -2468,7 +2493,7 @@ function finalizeSummaryPresentation(result, proposed) {
   return {
     id: result.callId,
     toolName: result.toolName,
-    status: result.status,
+    status: proposed.status ?? result.status,
     kind: "summary",
     title,
     ...description && description !== title ? { description } : {},
@@ -2477,7 +2502,7 @@ function finalizeSummaryPresentation(result, proposed) {
   };
 }
 function presentVisitorToolResult(result, registry = []) {
-  const envelope = parseAgentToolResultEnvelope(result.output) ?? legacyBookingEnvelope(result.output);
+  const envelope = parseAgentToolResultEnvelope(result.output) ?? providerErrorEnvelope(result.output) ?? legacyBookingEnvelope(result.output);
   const proposed = envelope ? resolvePresenterOutput(result, envelope, registry) : null;
   if (proposed?.kind === "booking") {
     return {
@@ -2540,6 +2565,25 @@ function presentVisitorToolResult(result, registry = []) {
   }
   return finalizeSummaryPresentation(result, proposed);
 }
+function providerErrorEnvelope(output) {
+  const record = asRecord3(output);
+  const providerError = asRecord3(record?.providerError);
+  const message = safeText(providerError?.message);
+  const action = safeText(providerError?.action);
+  if (!message || !action) return null;
+  const resourceLabels = Array.isArray(providerError?.resourceLabels) ? providerError.resourceLabels.map(safeText).filter(Boolean).slice(0, MAX_DETAILS) : [];
+  return {
+    schemaVersion: "webless.tool-result.v1",
+    output: {
+      providerError: {
+        action,
+        message,
+        ...resourceLabels.length ? { resourceLabels } : {}
+      }
+    },
+    presentationKinds: ["provider_error"]
+  };
+}
 function legacyBookingEnvelope(output) {
   const card = bookingCardFromActionOutput(output);
   return card ? {
@@ -2847,6 +2891,7 @@ function useAgentChat({
         let streamStarted = Boolean(initialText);
         let streamed = initialText;
         const capturedOffers = [];
+        let bookingConfirmed = false;
         let capturedInputCount = 0;
         const handlers = {
           onWork: (item) => {
@@ -2871,6 +2916,7 @@ function useAgentChat({
               }
               if (!isActiveRun()) return;
               if (card.type === "booking_confirmed") {
+                bookingConfirmed = true;
                 pendingBookingRef.current = card;
                 savePendingWidgetBooking(
                   resolvedStorageKeyPrefix,
@@ -2946,7 +2992,10 @@ function useAgentChat({
           initialText,
           message: visitorText,
           signal
-        }) : await clientRef.current.sendTurn(visitorText, { handlers, signal });
+        }) : await clientRef.current.sendTurn(visitorText, {
+          handlers,
+          signal
+        });
         if (resume && finalText === null) {
           finalText = await clientRef.current.sendTurn(visitorText, {
             handlers,
@@ -2965,6 +3014,7 @@ function useAgentChat({
         const parsedCards = extractToolCards(displayText);
         for (const card of parsedCards) {
           if (card.type === "booking_confirmed") {
+            bookingConfirmed = true;
             pendingBookingRef.current = card;
             savePendingWidgetBooking(resolvedStorageKeyPrefix, visitorId, card);
           }
@@ -2979,7 +3029,7 @@ function useAgentChat({
           messages: appendAgentTurnMessage(prev.messages, displayText),
           toolSteps: completeActivePlanning(prev.toolSteps),
           streamingText: "",
-          pendingOffer: capturedOffers.at(-1) ?? prev.pendingOffer,
+          pendingOffer: bookingConfirmed ? null : capturedOffers.at(-1) ?? prev.pendingOffer,
           pendingInputs: (prev.pendingInputs ?? []).filter(
             isChatCollectibleInputRequest
           ),
@@ -3005,7 +3055,6 @@ function useAgentChat({
             } : step
           ),
           streamingText: "",
-          pendingOffer: null,
           error: message
         }));
         runRef.current = null;
@@ -3113,7 +3162,7 @@ ${outgoing}` : outgoing;
         journey: null,
         followUps: [],
         streamingText: "",
-        pendingOffer: null,
+        pendingOffer: options?.preservePendingOffer ? prev.pendingOffer : null,
         pendingInputs: [],
         toolResults: [],
         error: null
@@ -3149,7 +3198,6 @@ ${outgoing}` : outgoing;
       journey: null,
       followUps: [],
       streamingText: "",
-      pendingOffer: null,
       pendingInputs: [],
       toolResults: [],
       error: null
@@ -3767,6 +3815,7 @@ function BookingCardLoader() {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { className: "booking-card", "aria-label": "Book a meeting", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__loading", role: "status", children: "Finding available times\u2026" }) });
 }
 function BookingCard({
+  disabled = false,
   offer,
   onBook
 }) {
@@ -3778,7 +3827,14 @@ function BookingCard({
   const [startTime, setStartTime] = (0, import_react7.useState)("");
   const [name, setName] = (0, import_react7.useState)("");
   const [email, setEmail] = (0, import_react7.useState)("");
+  const activeStepRef = (0, import_react7.useRef)(null);
+  const previousStepRef = (0, import_react7.useRef)(step);
   const stepIndex = BOOKING_STEPS.findIndex((item) => item.id === step);
+  (0, import_react7.useEffect)(() => {
+    if (previousStepRef.current === step) return;
+    previousStepRef.current = step;
+    activeStepRef.current?.scrollIntoView({ block: "nearest" });
+  }, [step]);
   const slots = (0, import_react7.useMemo)(
     () => bookingSlotsForEventType(offer.slots, eventTypeUri),
     [eventTypeUri, offer.slots]
@@ -3855,216 +3911,230 @@ function BookingCard({
       })
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { className: "booking-card", "aria-label": "Book a meeting", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { className: "booking-card__form", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ol", { className: "booking-card__steps", "aria-label": "Booking steps", children: BOOKING_STEPS.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "li",
-      {
-        className: [
-          "booking-card__step-indicator",
-          index === stepIndex ? "booking-card__step-indicator--active" : "",
-          index < stepIndex ? "booking-card__step-indicator--complete" : ""
-        ].filter(Boolean).join(" "),
-        "aria-current": index === stepIndex ? "step" : void 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: index + 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: item.label })
-        ]
-      },
-      item.id
-    )) }),
-    step === "date" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: selectedType?.name || "Pick a date" }),
-      timeZone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "booking-card__tz", children: [
-        "Times in ",
-        timeZone
-      ] }) : null,
-      offer.eventTypes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "label",
-        {
-          className: "booking-card__field",
-          htmlFor: `${fieldId}-type`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Meeting" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "section",
+    {
+      className: "booking-card",
+      "aria-busy": disabled || void 0,
+      "aria-label": "Book a meeting",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { className: "booking-card__form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ol", { className: "booking-card__steps", "aria-label": "Booking steps", children: BOOKING_STEPS.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "li",
+          {
+            className: [
+              "booking-card__step-indicator",
+              index === stepIndex ? "booking-card__step-indicator--active" : "",
+              index < stepIndex ? "booking-card__step-indicator--complete" : ""
+            ].filter(Boolean).join(" "),
+            "aria-current": index === stepIndex ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: index + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: item.label })
+            ]
+          },
+          item.id
+        )) }),
+        step === "date" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", ref: activeStepRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: selectedType?.name || "Pick a date" }),
+          timeZone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "booking-card__tz", children: [
+            "Times in ",
+            timeZone
+          ] }) : null,
+          offer.eventTypes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "label",
+            {
+              className: "booking-card__field",
+              htmlFor: `${fieldId}-type`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Meeting" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "select",
+                  {
+                    id: `${fieldId}-type`,
+                    value: eventTypeUri,
+                    disabled,
+                    onChange: (event) => selectEventType(event.target.value),
+                    children: offer.eventTypes.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: item.uri, children: item.name }, item.uri))
+                  }
+                )
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__month", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "select",
+              "button",
               {
-                id: `${fieldId}-type`,
-                value: eventTypeUri,
-                onChange: (event) => selectEventType(event.target.value),
-                children: offer.eventTypes.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: item.uri, children: item.name }, item.uri))
+                type: "button",
+                className: "booking-card__nav",
+                "aria-label": "Previous month",
+                disabled: disabled || !canPrevMonth,
+                onClick: () => goToMonth(-1),
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__month-title", children: formatMonthTitle(visibleMonth.year, visibleMonth.month) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "booking-card__nav",
+                "aria-label": "Next month",
+                disabled: disabled || !canNextMonth,
+                onClick: () => goToMonth(1),
+                children: "\u203A"
               }
             )
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__month", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "booking-card__nav",
-            "aria-label": "Previous month",
-            disabled: !canPrevMonth,
-            onClick: () => goToMonth(-1),
-            children: "\u2039"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__month-title", children: formatMonthTitle(visibleMonth.year, visibleMonth.month) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "booking-card__nav",
-            "aria-label": "Next month",
-            disabled: !canNextMonth,
-            onClick: () => goToMonth(1),
-            children: "\u203A"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__weekdays", children: weekdays.map((label) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label }, label)) }),
-      offer.slots.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__loading", role: "status", children: "Finding available times\u2026" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          className: "booking-card__calendar",
-          role: "grid",
-          "aria-label": "Available dates",
-          children: cells.map((cell, index) => {
-            if (!cell) {
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "span",
-                {
-                  className: "booking-card__day"
-                },
-                `empty-${index}`
-              );
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__weekdays", children: weekdays.map((label) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label }, label)) }),
+          offer.slots.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__loading", role: "status", children: "Finding available times\u2026" }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "booking-card__calendar",
+              role: "grid",
+              "aria-label": "Available dates",
+              children: cells.map((cell, index) => {
+                if (!cell) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      className: "booking-card__day"
+                    },
+                    `empty-${index}`
+                  );
+                }
+                const available = availableByDate.has(cell.key);
+                const selected = cell.key === selectedDate;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: [
+                      "booking-card__day",
+                      available ? "booking-card__day--available" : "",
+                      selected ? "booking-card__day--selected" : ""
+                    ].filter(Boolean).join(" "),
+                    disabled: disabled || !available,
+                    "aria-pressed": selected,
+                    onClick: () => selectDate(cell.key),
+                    children: cell.day
+                  },
+                  cell.key
+                );
+              })
             }
-            const available = availableByDate.has(cell.key);
-            const selected = cell.key === selectedDate;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          )
+        ] }, "date") : null,
+        step === "time" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", ref: activeStepRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step-bar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 type: "button",
-                className: [
-                  "booking-card__day",
-                  available ? "booking-card__day--available" : "",
-                  selected ? "booking-card__day--selected" : ""
-                ].filter(Boolean).join(" "),
-                disabled: !available,
-                "aria-pressed": selected,
-                onClick: () => selectDate(cell.key),
-                children: cell.day
-              },
-              cell.key
-            );
-          })
-        }
-      )
-    ] }, "date") : null,
-    step === "time" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step-bar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "booking-card__nav",
-            "aria-label": "Back to dates",
-            onClick: () => setStep("date"),
-            children: "\u2039"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: selectedSample ? formatLongDate(selectedSample) : "Pick a time" }),
-          timeZone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "booking-card__tz", children: [
-            "Times in ",
-            timeZone
-          ] }) : null
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__times", children: daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          type: "button",
-          className: startTime === slot.startTime ? "booking-card__time booking-card__time--selected" : "booking-card__time",
-          onClick: () => selectTime(slot.startTime),
-          children: formatTimeChip(slot.startTime)
-        },
-        slot.startTime
-      )) })
-    ] }, "time") : null,
-    step === "details" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step-bar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "booking-card__nav",
-            "aria-label": "Back to times",
-            onClick: () => setStep("time"),
-            children: "\u2039"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: "Enter details" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__tz", children: formatSlotLabel(startTime) }),
-          selectedType?.location ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__tz", children: selectedType.location }) : null
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__identity", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "label",
-          {
-            className: "booking-card__field",
-            htmlFor: `${fieldId}-name`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Name" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "input",
-                {
-                  id: `${fieldId}-name`,
-                  autoComplete: "name",
-                  value: name,
-                  onChange: (event) => setName(event.target.value),
-                  required: true
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "label",
-          {
-            className: "booking-card__field",
-            htmlFor: `${fieldId}-email`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Email" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "input",
-                {
-                  id: `${fieldId}-email`,
-                  type: "email",
-                  autoComplete: "email",
-                  value: email,
-                  onChange: (event) => setEmail(event.target.value),
-                  required: true
-                }
-              )
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          type: "submit",
-          className: "booking-card__submit",
-          disabled: !name.trim() || !email.trim(),
-          children: "Book this time"
-        }
-      )
-    ] }, "details") : null
-  ] }) });
+                className: "booking-card__nav",
+                "aria-label": "Back to dates",
+                disabled,
+                onClick: () => setStep("date"),
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: selectedSample ? formatLongDate(selectedSample) : "Pick a time" }),
+              timeZone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "booking-card__tz", children: [
+                "Times in ",
+                timeZone
+              ] }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__times", children: daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              className: startTime === slot.startTime ? "booking-card__time booking-card__time--selected" : "booking-card__time",
+              disabled,
+              onClick: () => selectTime(slot.startTime),
+              children: formatTimeChip(slot.startTime)
+            },
+            slot.startTime
+          )) })
+        ] }, "time") : null,
+        step === "details" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", ref: activeStepRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step-bar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "booking-card__nav",
+                "aria-label": "Back to times",
+                disabled,
+                onClick: () => setStep("time"),
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: "Enter details" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__tz", children: formatSlotLabel(startTime) }),
+              selectedType?.location ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__tz", children: selectedType.location }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__identity", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "label",
+              {
+                className: "booking-card__field",
+                htmlFor: `${fieldId}-name`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "input",
+                    {
+                      id: `${fieldId}-name`,
+                      autoComplete: "name",
+                      disabled,
+                      value: name,
+                      onChange: (event) => setName(event.target.value),
+                      required: true
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "label",
+              {
+                className: "booking-card__field",
+                htmlFor: `${fieldId}-email`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Email" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "input",
+                    {
+                      id: `${fieldId}-email`,
+                      type: "email",
+                      autoComplete: "email",
+                      disabled,
+                      value: email,
+                      onChange: (event) => setEmail(event.target.value),
+                      required: true
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "submit",
+              className: "booking-card__submit",
+              disabled: disabled || !name.trim() || !email.trim(),
+              children: disabled ? "Booking\u2026" : "Book this time"
+            }
+          )
+        ] }, "details") : null
+      ] })
+    }
+  );
 }
 
 // src/react/components/MessageBubble/MessageBubble.tsx
@@ -4081,9 +4151,7 @@ function paragraphsAreNearDuplicates(first, second) {
   if (left === right) return true;
   const shorter = left.length <= right.length ? left : right;
   const longer = left.length <= right.length ? right : left;
-  return longer.startsWith(
-    shorter.slice(0, Math.floor(shorter.length * 0.85))
-  );
+  return longer.startsWith(shorter.slice(0, Math.floor(shorter.length * 0.85)));
 }
 function paragraphsShareOpening(first, second) {
   const opening = first.split("\n")[0]?.trim();
@@ -4111,6 +4179,7 @@ function collapseRepeatedText(text) {
 function MessageBubble({
   message,
   brandLogoUrl,
+  bookingDisabled = false,
   offer,
   onBook
 }) {
@@ -4146,18 +4215,17 @@ function MessageBubble({
         children: displayText
       }
     ),
-    citations.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "message-bubble__sources", "aria-label": "Sources", children: citations.map((citation) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "a",
-      {
-        href: citation.url,
-        target: "_blank",
-        rel: "noreferrer",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "message-bubble__source-icon", "aria-hidden": "true", children: "\u25A6" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: citation.label })
-        ]
-      }
-    ) }, citation.id)) }) : null
+    citations.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "message-bubble__sources", "aria-label": "Sources", children: citations.map((citation) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("a", { href: citation.url, target: "_blank", rel: "noreferrer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "span",
+        {
+          className: "message-bubble__source-icon",
+          "aria-hidden": "true",
+          children: "\u25A6"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: citation.label })
+    ] }) }, citation.id)) }) : null
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("article", { className: "message-bubble message-bubble--agent", children: [
     displayText ? showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "message-bubble__agent-row", children: [
@@ -4176,6 +4244,7 @@ function MessageBubble({
     offers.map((nextOffer, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       BookingCard,
       {
+        disabled: bookingDisabled,
         offer: nextOffer,
         onBook
       },
@@ -5155,6 +5224,7 @@ function AgentRail({
               MessageBubble,
               {
                 message: greeting,
+                bookingDisabled: isBusy,
                 brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
                 onBook
               }
@@ -5200,6 +5270,7 @@ function AgentRail({
               MessageBubble,
               {
                 message,
+                bookingDisabled: isBusy,
                 brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
                 offer: index === lastAgentIndex ? state.pendingOffer : void 0,
                 onBook
@@ -5238,6 +5309,7 @@ function AgentRail({
             MessageBubble,
             {
               message: streamingMessage,
+              bookingDisabled: isBusy,
               brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
               offer: state.pendingOffer,
               onBook
@@ -5624,7 +5696,10 @@ function AgentWidget({
                 onInputResponse: (response) => void respondToInput(response),
                 onToolInput: (surface, values) => void respondToToolInput(surface, values),
                 onFollowUpSelect: (label) => void handleSubmit(label),
-                onBook: (input) => void submit(input.displayText, { runtimeText: input.runtimeText })
+                onBook: (input) => void submit(input.displayText, {
+                  preservePendingOffer: true,
+                  runtimeText: input.runtimeText
+                })
               }
             )
           }