@webless/agent 0.7.0 → 0.7.3

package/dist/react.cjs

@@ -3801,42 +3801,72 @@ function emptyValues(form) {
   for (const field of form?.fields ?? []) values[field.id] = "";
   return values;
 }
+function createDraft(form) {
+  return {
+    form,
+    values: emptyValues(form),
+    expanded: Boolean(form),
+    submitted: false,
+    dismissalSent: false,
+    attempted: false
+  };
+}
 function Composer({
   disabled = false,
   placeholder = "Ask anything\u2026",
   variant = "default",
   form = null,
+  allowFormResume = true,
   onSubmit
 }) {
   const [value, setValue] = (0, import_react8.useState)("");
-  const [values, setValues] = (0, import_react8.useState)(
-    () => emptyValues(form)
-  );
-  const [blurred, setBlurred] = (0, import_react8.useState)({});
+  const [draft, setDraft] = (0, import_react8.useState)(() => createDraft(form));
   const inputRef = (0, import_react8.useRef)(null);
   const firstFieldRef = (0, import_react8.useRef)(null);
+  const formRef = (0, import_react8.useRef)(null);
   const formId = (0, import_react8.useId)();
-  const activeForm = form;
-  const canSendForm = activeForm ? isComposerFormComplete(activeForm, values) : Boolean(value.trim());
-  (0, import_react8.useEffect)(() => {
-    setValues(emptyValues(form));
-    setBlurred({});
-  }, [form?.id]);
+  if (form && form.id !== draft.form?.id) setDraft(createDraft(form));
+  const savedForm = allowFormResume && !draft.submitted ? draft.form : null;
+  const activeForm = !disabled && draft.expanded ? savedForm : null;
+  const hasDraft = Object.values(draft.values).some((value2) => value2.trim());
   (0, import_react8.useEffect)(() => {
     if (activeForm) firstFieldRef.current?.focus();
-  }, [activeForm?.id]);
+    else if ((savedForm || draft.submitted) && !disabled)
+      inputRef.current?.focus();
+  }, [activeForm?.id, disabled, savedForm?.id, draft.submitted]);
   function submitChat() {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
-    onSubmit?.(trimmed);
+    const shareDismissal = savedForm && !draft.dismissalSent;
+    onSubmit?.(
+      shareDismissal ? `I'd like to keep chatting without sharing the requested details for now. Please don't ask for them again unless I choose to proceed with something that needs them.
+
+${trimmed}` : trimmed
+    );
+    if (shareDismissal)
+      setDraft((current) => ({ ...current, dismissalSent: true }));
     setValue("");
     inputRef.current?.focus();
   }
   function submitForm() {
-    if (!activeForm || disabled || !canSendForm) return;
-    onSubmit?.(formatComposerFormMessage(activeForm, values));
-    setValues(emptyValues(activeForm));
-    setBlurred({});
+    if (!activeForm || disabled) return;
+    if (!isComposerFormComplete(activeForm, draft.values)) {
+      setDraft((current) => ({ ...current, attempted: true }));
+      const invalidField = activeForm.fields.find(
+        (field) => !isValidComposerFieldValue(field, draft.values[field.id] ?? "")
+      );
+      const control = invalidField && formRef.current?.elements.namedItem(invalidField.id);
+      if (control instanceof HTMLElement) control.focus();
+      return;
+    }
+    onSubmit?.(formatComposerFormMessage(activeForm, draft.values));
+    setDraft((current) => ({
+      ...current,
+      values: emptyValues(activeForm),
+      expanded: false,
+      submitted: true,
+      attempted: false
+    }));
   }
   function handleSubmit(event) {
     event.preventDefault();
@@ -3860,112 +3890,151 @@ function Composer({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "form",
     {
+      ref: formRef,
+      noValidate: true,
       className: [
         "composer",
         variant === "dock" ? "composer--dock" : "",
         activeForm ? "composer--form" : ""
       ].filter(Boolean).join(" "),
       onSubmit: handleSubmit,
-      children: activeForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__sheet", role: "group", "aria-label": "Required details", children: [
-        activeForm.fields.map((field, index) => {
-          const fieldId = `${formId}-${field.id}`;
-          const invalid = Boolean(blurred[field.id]) && !isValidComposerFieldValue(field, values[field.id] ?? "");
-          const controlProps = {
-            id: fieldId,
-            name: field.id,
-            disabled,
-            required: field.required,
-            autoComplete: field.autocomplete,
-            placeholder: field.placeholder,
-            spellCheck: false,
-            value: values[field.id] ?? "",
-            "aria-invalid": invalid || void 0,
-            "aria-describedby": invalid ? `${fieldId}-error` : void 0,
-            onBlur: () => setBlurred((current) => ({ ...current, [field.id]: true })),
-            onChange: (event) => {
-              const next = readComposerControlValue(event);
-              setValues((current) => ({
-                ...current,
-                [field.id]: next
-              }));
-            },
-            onKeyDown: handleFormKeyDown
-          };
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
+      children: activeForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: "composer__sheet",
+          role: "group",
+          "aria-label": "Contact details",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__form-heading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Share your details" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Optional" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "You can also keep chatting." })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "composer__fields", children: activeForm.fields.map((field, index) => {
+              const fieldId = `${formId}-${field.id}`;
+              const invalid = draft.attempted && !isValidComposerFieldValue(field, draft.values[field.id] ?? "");
+              const controlProps = {
+                id: fieldId,
+                name: field.id,
+                disabled,
+                required: field.required,
+                autoComplete: field.autocomplete,
+                placeholder: field.placeholder,
+                spellCheck: false,
+                value: draft.values[field.id] ?? "",
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": invalid ? `${fieldId}-error` : void 0,
+                onChange: (event) => {
+                  const next = readComposerControlValue(event);
+                  setDraft((current) => ({
+                    ...current,
+                    values: { ...current.values, [field.id]: next }
+                  }));
+                },
+                onKeyDown: handleFormKeyDown
+              };
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  className: [
+                    "composer__row",
+                    field.kind === "textarea" ? "composer__row--grow" : ""
+                  ].filter(Boolean).join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "composer__label", htmlFor: fieldId, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "composer__field-label", children: field.label }),
+                      field.kind === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "textarea",
+                        {
+                          ...controlProps,
+                          ref: index === 0 ? (node) => {
+                            firstFieldRef.current = node;
+                          } : void 0,
+                          className: "composer__control composer__control--area",
+                          rows: 3
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "input",
+                        {
+                          ...controlProps,
+                          ref: index === 0 ? (node) => {
+                            firstFieldRef.current = node;
+                          } : void 0,
+                          className: "composer__control",
+                          type: field.kind,
+                          inputMode: field.kind === "tel" ? "tel" : void 0
+                        }
+                      )
+                    ] }),
+                    invalid ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "composer__error", id: `${fieldId}-error`, children: field.kind === "email" ? "Enter a valid email to share your details." : `Add your ${field.label.toLowerCase()} to share your details.` }) : null
+                  ]
+                },
+                field.id
+              );
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__toolbar", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "submit",
+                  className: "composer__action composer__action--primary",
+                  disabled,
+                  children: "Share details"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "composer__action",
+                  disabled,
+                  onClick: () => setDraft((current) => ({ ...current, expanded: false })),
+                  children: "Keep chatting"
+                }
+              )
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        savedForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__resume", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: hasDraft ? "Your details aren\u2019t shared yet" : "Contact details are optional" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
             {
-              className: [
-                "composer__row",
-                field.kind === "textarea" ? "composer__row--grow" : ""
-              ].filter(Boolean).join(" "),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "composer__label", htmlFor: fieldId, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "composer__sr-only", children: field.label }),
-                  field.kind === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "textarea",
-                    {
-                      ...controlProps,
-                      ref: index === 0 ? (node) => {
-                        firstFieldRef.current = node;
-                      } : void 0,
-                      className: "composer__control composer__control--area",
-                      rows: 3
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "input",
-                    {
-                      ...controlProps,
-                      ref: index === 0 ? (node) => {
-                        firstFieldRef.current = node;
-                      } : void 0,
-                      className: "composer__control",
-                      type: field.kind,
-                      inputMode: field.kind === "tel" ? "tel" : void 0
-                    }
-                  )
-                ] }),
-                invalid ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "composer__error", id: `${fieldId}-error`, children: field.kind === "email" ? "Enter a valid email to continue." : `Add your ${field.label.toLowerCase()} to continue.` }) : null
-              ]
-            },
-            field.id
-          );
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "composer__toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            type: "submit",
-            className: "composer__send",
-            disabled: disabled || !canSendForm,
-            "aria-label": "Send details",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SendIcon, {})
-          }
-        ) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "textarea",
-          {
-            ref: inputRef,
-            className: "composer__input",
-            rows: 1,
-            value,
-            placeholder,
-            disabled,
-            spellCheck: false,
-            "aria-label": "Message",
-            onChange: (event) => setValue(event.target.value),
-            onKeyDown: handleChatKeyDown
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            type: "submit",
-            className: "composer__send",
-            disabled: disabled || !value.trim(),
-            "aria-label": "Send message",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SendIcon, {})
-          }
-        )
+              type: "button",
+              disabled,
+              onClick: () => setDraft((current) => ({ ...current, expanded: true })),
+              children: hasDraft ? "Resume details" : "Add details"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
+            {
+              ref: inputRef,
+              className: "composer__input",
+              rows: 1,
+              value,
+              placeholder,
+              disabled,
+              spellCheck: false,
+              "aria-label": "Message",
+              onChange: (event) => setValue(event.target.value),
+              onKeyDown: handleChatKeyDown
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "submit",
+              className: "composer__send",
+              disabled: disabled || !value.trim(),
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SendIcon, {})
+            }
+          )
+        ] })
       ] })
     }
   );
@@ -4514,6 +4583,126 @@ function toSpeechText(text) {
 function isSpeechSupported() {
   return typeof window !== "undefined" && "speechSynthesis" in window && typeof window.SpeechSynthesisUtterance === "function";
 }
+function stopSpeech() {
+  if (!isSpeechSupported()) return;
+  window.speechSynthesis.cancel();
+}
+var speechInterruptListeners = /* @__PURE__ */ new Set();
+var pageListenersAttached = false;
+var lastPathname = "";
+var originalPushState = null;
+var originalReplaceState = null;
+var patchedPushState = null;
+var patchedReplaceState = null;
+function currentPathname() {
+  return window.location.pathname;
+}
+function notifySpeechInterrupts() {
+  if (speechInterruptListeners.size === 0) return;
+  stopSpeech();
+  for (const listener of speechInterruptListeners) {
+    listener();
+  }
+}
+function interruptIfPathChanged(nextPath) {
+  if (nextPath === lastPathname) return;
+  lastPathname = nextPath;
+  notifySpeechInterrupts();
+}
+function patchHistoryMethod(original) {
+  return function patched(data, unused, url) {
+    const result = original.call(this, data, unused, url);
+    interruptIfPathChanged(currentPathname());
+    return result;
+  };
+}
+function historyMethodState(name) {
+  return name === "pushState" ? {
+    original: originalPushState,
+    patched: patchedPushState,
+    set(original, patched) {
+      originalPushState = original;
+      patchedPushState = patched;
+    }
+  } : {
+    original: originalReplaceState,
+    patched: patchedReplaceState,
+    set(original, patched) {
+      originalReplaceState = original;
+      patchedReplaceState = patched;
+    }
+  };
+}
+function patchHistoryNamed(name) {
+  const state = historyMethodState(name);
+  const current = history[name];
+  if (state.patched && current === state.patched) return;
+  const patched = patchHistoryMethod(current);
+  state.set(current, patched);
+  history[name] = patched;
+}
+function restoreHistoryMethod(name) {
+  const state = historyMethodState(name);
+  if (!state.patched || !state.original || typeof history === "undefined") {
+    return false;
+  }
+  if (history[name] !== state.patched) return false;
+  history[name] = state.original;
+  state.set(null, null);
+  return true;
+}
+function handlePageHide() {
+  notifySpeechInterrupts();
+}
+function handlePopState() {
+  interruptIfPathChanged(currentPathname());
+}
+function handleVisibilityChange() {
+  if (document.visibilityState === "hidden") {
+    notifySpeechInterrupts();
+  }
+}
+function attachPageListeners() {
+  if (pageListenersAttached || typeof window === "undefined") return;
+  pageListenersAttached = true;
+  window.addEventListener("pagehide", handlePageHide);
+  window.addEventListener("popstate", handlePopState);
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+}
+function detachPageListeners() {
+  if (!pageListenersAttached || typeof window === "undefined") return;
+  window.removeEventListener("pagehide", handlePageHide);
+  window.removeEventListener("popstate", handlePopState);
+  document.removeEventListener("visibilitychange", handleVisibilityChange);
+  pageListenersAttached = false;
+}
+function ensureSpeechInterruptsPatched() {
+  if (typeof window === "undefined") return;
+  lastPathname = currentPathname();
+  patchHistoryNamed("pushState");
+  patchHistoryNamed("replaceState");
+  attachPageListeners();
+}
+function teardownSpeechInterrupts() {
+  detachPageListeners();
+  restoreHistoryMethod("pushState");
+  restoreHistoryMethod("replaceState");
+  if (!patchedPushState && !patchedReplaceState) {
+    lastPathname = "";
+  }
+}
+function subscribeSpeechInterrupts(onInterrupt) {
+  if (typeof window === "undefined") return () => {
+  };
+  ensureSpeechInterruptsPatched();
+  speechInterruptListeners.add(onInterrupt);
+  return () => {
+    speechInterruptListeners.delete(onInterrupt);
+    if (speechInterruptListeners.size === 0) {
+      teardownSpeechInterrupts();
+    }
+  };
+}
 
 // src/react/components/MessageActions/MessageActions.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -4769,15 +4958,20 @@ function MessageActions({
   const [menuOpen, setMenuOpen] = (0, import_react11.useState)(false);
   const [menuPosition, setMenuPosition] = (0, import_react11.useState)(null);
   const [speaking, setSpeaking] = (0, import_react11.useState)(false);
+  const [speechSupported, setSpeechSupported] = (0, import_react11.useState)(null);
   const copyTimerRef = (0, import_react11.useRef)(null);
   const menuRef = (0, import_react11.useRef)(null);
   const portaledMenuRef = (0, import_react11.useRef)(null);
   const moreButtonRef = (0, import_react11.useRef)(null);
   const answeredLabel = formatAnsweredAt(answeredAt ?? 0);
   const resolvedSpeechText = speechText ?? toSpeechText(copyText);
-  const canReadAloud = readAloud && isSpeechSupported() && resolvedSpeechText;
-  const showMenu = Boolean(answeredLabel) || Boolean(receiptSteps) || canReadAloud;
   const canOpenReceipt = Boolean(receiptSteps) && Boolean(onOpenReceipt);
+  const readAloudEligible = Boolean(readAloud && resolvedSpeechText);
+  const canReadAloud = readAloudEligible && speechSupported === true;
+  const showMenu = canOpenReceipt || (speechSupported === null ? readAloudEligible : canReadAloud);
+  (0, import_react11.useLayoutEffect)(() => {
+    setSpeechSupported(isSpeechSupported());
+  }, []);
   (0, import_react11.useLayoutEffect)(() => {
     if (!menuOpen || !moreButtonRef.current || !portaledMenuRef.current) {
       setMenuPosition(null);
@@ -4795,17 +4989,16 @@ function MessageActions({
       })
     );
   }, [menuOpen, menuPortalRoot]);
-  (0, import_react11.useEffect)(
-    () => () => {
+  (0, import_react11.useEffect)(() => {
+    const unsubscribe = subscribeSpeechInterrupts(() => setSpeaking(false));
+    return () => {
+      unsubscribe();
       if (copyTimerRef.current !== null) {
         window.clearTimeout(copyTimerRef.current);
       }
-      if (speaking) window.speechSynthesis.cancel();
-    },
-    // Cancel speech only when this answer's actions unmount.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+      stopSpeech();
+    };
+  }, []);
   (0, import_react11.useEffect)(() => {
     if (!menuOpen) return;
     const handlePointerDown = (event) => {
@@ -4844,14 +5037,14 @@ function MessageActions({
     if (!canReadAloud) return;
     setMenuOpen(false);
     if (speaking) {
-      window.speechSynthesis.cancel();
+      stopSpeech();
       setSpeaking(false);
       return;
     }
     const utterance = new SpeechSynthesisUtterance(resolvedSpeechText);
     utterance.onend = () => setSpeaking(false);
     utterance.onerror = () => setSpeaking(false);
-    window.speechSynthesis.cancel();
+    stopSpeech();
     window.speechSynthesis.speak(utterance);
     setSpeaking(true);
   }
@@ -5749,8 +5942,9 @@ function AgentRail({
   colorScheme = "auto",
   brandLabel = "",
   brandLogoUrl,
-  poweredByLabel = "Powered by Webless",
+  poweredByLabel,
   disclaimerLabel,
+  disclaimerLink,
   answerReceipt = false,
   readAloud = false,
   composerPlaceholder = "Ask anything\u2026",
@@ -6185,7 +6379,15 @@ function AgentRail({
                   onRetry ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: onRetry, children: "Try again" }) : null
                 ] }) : null
               ] }) }),
-              showDisclaimerLabel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "agent-rail__disclaimer", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: resolvedDisclaimerLabel }) }) : null,
+              showDisclaimerLabel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "agent-rail__disclaimer", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: disclaimerLink ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "a",
+                {
+                  href: disclaimerLink,
+                  rel: "noopener noreferrer",
+                  target: "_blank",
+                  children: resolvedDisclaimerLabel
+                }
+              ) : resolvedDisclaimerLabel }) }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
                 showJumpToLatest ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
@@ -6203,10 +6405,12 @@ function AgentRail({
                   {
                     variant: expanded || mobileFullscreen ? "dock" : "default",
                     disabled: isBusy,
-                    form: composerForm,
+                    form: composerForm && lastMessage ? { ...composerForm, id: `${lastMessage.id}:${composerForm.id}` } : null,
+                    allowFormResume: !state.pendingOffer && !waitingForBooking && !hasPendingConfirmation,
                     placeholder: composerPlaceholder,
                     onSubmit: handleSubmit
-                  }
+                  },
+                  state.messages.find((message) => message.role === "visitor")?.id ?? "empty"
                 ),
                 poweredByLabel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "agent-rail__footer", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: poweredByLabel }) }) }) : null
               ] })
@@ -6650,8 +6854,9 @@ function AgentWidget({
                 brandLabel: agentName,
                 brandLogoUrl: branding?.logoUrl,
                 composerPlaceholder: branding?.composerPlaceholder ?? "Ask a question\u2026",
-                poweredByLabel: branding?.poweredByLabel ?? "Powered by Webless",
+                poweredByLabel: branding?.poweredByLabel,
                 disclaimerLabel: branding?.disclaimer,
+                disclaimerLink: branding?.disclaimerLink,
                 answerReceipt: branding?.answerReceipt,
                 readAloud: branding?.readAloud,
                 state,