@webless/agent 0.7.2 → 0.7.4

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, {})
+            }
+          )
+        ] })
       ] })
     }
   );
@@ -6336,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
               ] })