@webless/agent 0.7.2 → 0.7.3

package/dist/{chunk-HZUPH5Z7.js → chunk-GS65OJFL.js}

@@ -4273,7 +4273,7 @@ import {
   useRef as useRef4,
   useState as useState4
 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function SendIcon() {
   return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
     "path",
@@ -4291,42 +4291,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] = useState4("");
-  const [values, setValues] = useState4(
-    () => emptyValues(form)
-  );
-  const [blurred, setBlurred] = useState4({});
+  const [draft, setDraft] = useState4(() => createDraft(form));
   const inputRef = useRef4(null);
   const firstFieldRef = useRef4(null);
+  const formRef = useRef4(null);
   const formId = useId();
-  const activeForm = form;
-  const canSendForm = activeForm ? isComposerFormComplete(activeForm, values) : Boolean(value.trim());
-  useEffect4(() => {
-    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());
   useEffect4(() => {
     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();
@@ -4350,112 +4380,151 @@ function Composer({
   return /* @__PURE__ */ jsx4(
     "form",
     {
+      ref: formRef,
+      noValidate: true,
       className: [
         "composer",
         variant === "dock" ? "composer--dock" : "",
         activeForm ? "composer--form" : ""
       ].filter(Boolean).join(" "),
       onSubmit: handleSubmit,
-      children: activeForm ? /* @__PURE__ */ jsxs4("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__ */ jsxs4(
-            "div",
+      children: activeForm ? /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "composer__sheet",
+          role: "group",
+          "aria-label": "Contact details",
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "composer__form-heading", children: [
+              /* @__PURE__ */ jsx4("strong", { children: "Share your details" }),
+              /* @__PURE__ */ jsx4("span", { children: "Optional" }),
+              /* @__PURE__ */ jsx4("p", { children: "You can also keep chatting." })
+            ] }),
+            /* @__PURE__ */ jsx4("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__ */ jsxs4(
+                "div",
+                {
+                  className: [
+                    "composer__row",
+                    field.kind === "textarea" ? "composer__row--grow" : ""
+                  ].filter(Boolean).join(" "),
+                  children: [
+                    /* @__PURE__ */ jsxs4("label", { className: "composer__label", htmlFor: fieldId, children: [
+                      /* @__PURE__ */ jsx4("span", { className: "composer__field-label", children: field.label }),
+                      field.kind === "textarea" ? /* @__PURE__ */ jsx4(
+                        "textarea",
+                        {
+                          ...controlProps,
+                          ref: index === 0 ? (node) => {
+                            firstFieldRef.current = node;
+                          } : void 0,
+                          className: "composer__control composer__control--area",
+                          rows: 3
+                        }
+                      ) : /* @__PURE__ */ jsx4(
+                        "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__ */ jsx4("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__ */ jsxs4("div", { className: "composer__toolbar", children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "submit",
+                  className: "composer__action composer__action--primary",
+                  disabled,
+                  children: "Share details"
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "composer__action",
+                  disabled,
+                  onClick: () => setDraft((current) => ({ ...current, expanded: false })),
+                  children: "Keep chatting"
+                }
+              )
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+        savedForm ? /* @__PURE__ */ jsxs4("div", { className: "composer__resume", children: [
+          /* @__PURE__ */ jsx4("span", { children: hasDraft ? "Your details aren\u2019t shared yet" : "Contact details are optional" }),
+          /* @__PURE__ */ jsx4(
+            "button",
             {
-              className: [
-                "composer__row",
-                field.kind === "textarea" ? "composer__row--grow" : ""
-              ].filter(Boolean).join(" "),
-              children: [
-                /* @__PURE__ */ jsxs4("label", { className: "composer__label", htmlFor: fieldId, children: [
-                  /* @__PURE__ */ jsx4("span", { className: "composer__sr-only", children: field.label }),
-                  field.kind === "textarea" ? /* @__PURE__ */ jsx4(
-                    "textarea",
-                    {
-                      ...controlProps,
-                      ref: index === 0 ? (node) => {
-                        firstFieldRef.current = node;
-                      } : void 0,
-                      className: "composer__control composer__control--area",
-                      rows: 3
-                    }
-                  ) : /* @__PURE__ */ jsx4(
-                    "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__ */ jsx4("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__ */ jsx4("div", { className: "composer__toolbar", children: /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "submit",
-            className: "composer__send",
-            disabled: disabled || !canSendForm,
-            "aria-label": "Send details",
-            children: /* @__PURE__ */ jsx4(SendIcon, {})
-          }
-        ) })
-      ] }) : /* @__PURE__ */ jsxs4("div", { className: "composer__field", children: [
-        /* @__PURE__ */ jsx4(
-          "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__ */ jsx4(
-          "button",
-          {
-            type: "submit",
-            className: "composer__send",
-            disabled: disabled || !value.trim(),
-            "aria-label": "Send message",
-            children: /* @__PURE__ */ jsx4(SendIcon, {})
-          }
-        )
+              type: "button",
+              disabled,
+              onClick: () => setDraft((current) => ({ ...current, expanded: true })),
+              children: hasDraft ? "Resume details" : "Add details"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs4("div", { className: "composer__field", children: [
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4(
+            "button",
+            {
+              type: "submit",
+              className: "composer__send",
+              disabled: disabled || !value.trim(),
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx4(SendIcon, {})
+            }
+          )
+        ] })
       ] })
     }
   );
@@ -5680,7 +5749,7 @@ function isRenderableVisitorToolResult(result) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-import { Fragment, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function MinimizeIcon() {
   return /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx16(
     "path",
@@ -6147,7 +6216,7 @@ function AgentRail({
                       onFeedback: onFeedback ? (rating) => onFeedback(rating, message) : void 0
                     }
                   ) : null,
-                  index === lastVisitorIndex ? /* @__PURE__ */ jsxs15(Fragment, { children: [
+                  index === lastVisitorIndex ? /* @__PURE__ */ jsxs15(Fragment2, { children: [
                     showActivity ? /* @__PURE__ */ jsx16(
                       AgentActivityBubble,
                       {
@@ -6221,10 +6290,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__ */ jsx16("div", { className: "agent-rail__footer", children: /* @__PURE__ */ jsx16("p", { children: /* @__PURE__ */ jsx16("span", { children: poweredByLabel }) }) }) : null
               ] })
@@ -6246,7 +6317,7 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function SparklesIcon() {
   return /* @__PURE__ */ jsxs16(
     "svg",
@@ -6379,7 +6450,7 @@ function AssistEdgeTab({
       tabIndex: visible ? 0 : -1,
       onClick: onOpen,
       children: [
-        mobile ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+        mobile ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           /* @__PURE__ */ jsxs16(
             "span",
             {
@@ -6402,7 +6473,7 @@ function AssistEdgeTab({
             }
           ),
           /* @__PURE__ */ jsx17("span", { className: "assist-edge-tab__label", children: visibleLabel })
-        ] }) : variant === "outline" ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+        ] }) : variant === "outline" ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           /* @__PURE__ */ jsxs16("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx17(TabMarkIcon, { customIconUrl }),
             showLogo ? /* @__PURE__ */ jsx17(
@@ -6420,12 +6491,12 @@ function AssistEdgeTab({
           /* @__PURE__ */ jsx17("span", { className: "assist-edge-tab__label", children: visibleLabel }),
           /* @__PURE__ */ jsx17(ChevronDownIcon2, {})
         ] }) : null,
-        variant === "ask" ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+        variant === "ask" ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           /* @__PURE__ */ jsx17(ChevronLeftIcon, {}),
           /* @__PURE__ */ jsx17("span", { className: "assist-edge-tab__label", children: visibleLabel }),
           /* @__PURE__ */ jsx17(DragDots, {})
         ] }) : null,
-        variant === "fill" ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+        variant === "fill" ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           /* @__PURE__ */ jsxs16("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx17(TabMarkIcon, { customIconUrl }),
             showLogo ? /* @__PURE__ */ jsx17(
@@ -6850,4 +6921,4 @@ export {
   sendAgentAnswerFeedback,
   AgentWidget
 };
-//# sourceMappingURL=chunk-HZUPH5Z7.js.map
+//# sourceMappingURL=chunk-GS65OJFL.js.map