@assistant-ui/react-hook-form 0.12.27 → 0.12.29

package/README.md

@@ -36,4 +36,4 @@ The assistant gets two built-in tools: `set_form_field` to write values into fie
 
 - `@assistant-ui/react-lexical` if you also want a rich-text composer with `@`-mention support inside the same chat.
 
-Full API reference at [assistant-ui.com/docs/api-reference/integrations/react-hook-form](https://www.assistant-ui.com/docs/api-reference/integrations/react-hook-form). See [`examples/with-react-hook-form`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-react-hook-form) for a complete app.
+A guided walkthrough lives at [assistant-ui.com/examples/form-demo](https://www.assistant-ui.com/examples/form-demo). See [`examples/with-react-hook-form`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-react-hook-form) for a complete app.

package/dist/useAssistantForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAssistantForm.d.ts","names":[],"sources":["../src/useAssistantForm.ts"],"mappings":";;;;;KAoBY,sBACV,qBAAqB,aACrB,UACA,sBACE,aAAa,cAAc,UAAU;EACvC;IAEM;MAEM;QAEM,SACI,6BACE,EAAE,cACQ,UAAU;;MAOhC;QAEM,SACI,6BACE,EAAE,cAAc,UAAU;;MAMtC;QAEM,SACI,6BACE,EAAE,cAAc,UAAU;;;;;cAYvC,mBACX,qBAAqB,cAAc,aACnC,gBACA,qBAAqB,cAErB,QAAQ,sBAAsB,cAAc,UAAU,wBACrD,cAAc,cAAc,UAAU"}
+{"version":3,"file":"useAssistantForm.d.ts","names":[],"sources":["../src/useAssistantForm.ts"],"mappings":";;;;;KA6BY,sBACV,qBAAqB,aACrB,UACA,sBACE,aAAa,cAAc,UAAU;EACvC;IAEM;MAEM;QAEM,SACI,6BACE,EAAE,cACQ,UAAU;;MAOhC;QAEM,SACI,6BACE,EAAE,cAAc,UAAU;;MAMtC;QAEM,SACI,6BACE,EAAE,cAAc,UAAU;;;;;cAYvC,mBACX,qBAAqB,cAAc,aACnC,gBACA,qBAAqB,cAErB,QAAQ,sBAAsB,cAAc,UAAU,wBACrD,cAAc,cAAc,UAAU"}

package/dist/useAssistantForm.js

@@ -3,12 +3,66 @@ import { formTools } from "./formTools.js";
 import { tool } from "@assistant-ui/core";
 import "@assistant-ui/core/react";
 import { useAui } from "@assistant-ui/store";
-import { useEffect } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { get, useForm } from "react-hook-form";
 //#region src/useAssistantForm.ts
 const useAssistantForm = (props) => {
 	const form = useForm(props);
-	const { control, getValues, setValue, reset, formState: { isSubmitting } } = form;
+	const { control, getValues, setValue, reset, handleSubmit: baseHandleSubmit, formState: { isSubmitting } } = form;
+	const pendingAssistantSubmitRef = useRef(null);
+	const settleAssistantSubmit = useCallback((outcome) => {
+		const pending = pendingAssistantSubmitRef.current;
+		if (!pending) return;
+		pendingAssistantSubmitRef.current = null;
+		pending.resolve(outcome);
+	}, []);
+	const rejectAssistantSubmit = useCallback((error) => {
+		const pending = pendingAssistantSubmitRef.current;
+		if (!pending) return;
+		pendingAssistantSubmitRef.current = null;
+		pending.reject(error);
+	}, []);
+	const handleSubmit = useCallback((onValid, onInvalid) => {
+		const submit = baseHandleSubmit((...args) => {
+			const pending = pendingAssistantSubmitRef.current;
+			const event = args[1]?.nativeEvent ?? args[1];
+			if (pending && pending.event === event) pending.outcome = true;
+			return onValid(...args);
+		}, (...args) => {
+			const pending = pendingAssistantSubmitRef.current;
+			const event = args[1]?.nativeEvent ?? args[1];
+			if (pending && pending.event === event) pending.outcome = false;
+			return onInvalid?.(...args);
+		});
+		return (async (event) => {
+			const pending = pendingAssistantSubmitRef.current;
+			const nativeEvent = event?.nativeEvent ?? event;
+			const assistantSubmit = pending && (pending.event === nativeEvent || pending.dispatching && pending.event === void 0 && nativeEvent !== void 0) ? pending : null;
+			if (assistantSubmit) {
+				assistantSubmit.event = nativeEvent;
+				assistantSubmit.handlerInvoked = true;
+			}
+			try {
+				const result = await submit(event);
+				if (assistantSubmit && pendingAssistantSubmitRef.current === assistantSubmit) settleAssistantSubmit(assistantSubmit.outcome ?? true);
+				return result;
+			} catch (error) {
+				if (pendingAssistantSubmitRef.current === assistantSubmit) rejectAssistantSubmit(error);
+				throw error;
+			}
+		});
+	}, [
+		baseHandleSubmit,
+		rejectAssistantSubmit,
+		settleAssistantSubmit
+	]);
+	const assistantForm = useMemo(() => ({
+		...form,
+		handleSubmit,
+		get formState() {
+			return form.formState;
+		}
+	}), [form, handleSubmit]);
 	const aui = useAui();
 	useEffect(() => {
 		const value = { tools: {
@@ -23,24 +77,66 @@ const useAssistantForm = (props) => {
 			submit_form: tool({
 				...formTools.submit_form,
 				execute: async () => {
-					if (isSubmitting) return {
+					if (isSubmitting || pendingAssistantSubmitRef.current) return {
 						success: false,
 						message: "The form is already submitting."
 					};
 					const { _names, _fields } = control;
+					let formElement = null;
 					for (const name of _names.mount) {
 						const field = get(_fields, name);
 						if (field?._f) {
 							const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
 							if (fieldReference instanceof HTMLElement) {
-								const form = fieldReference.closest("form");
-								if (form) {
-									form.requestSubmit();
-									return { success: true };
-								}
+								formElement = fieldReference.closest("form");
+								if (formElement) break;
 							}
 						}
 					}
+					if (formElement) {
+						if (!formElement.noValidate && !formElement.reportValidity()) return {
+							success: false,
+							message: "The form contains invalid fields and was not submitted."
+						};
+						let resolveSubmission = () => {};
+						let rejectSubmission = () => {};
+						const submissionResult = new Promise((resolve, reject) => {
+							resolveSubmission = resolve;
+							rejectSubmission = reject;
+						});
+						const assistantSubmit = {
+							dispatching: true,
+							event: void 0,
+							handlerInvoked: false,
+							outcome: void 0,
+							resolve: resolveSubmission,
+							reject: rejectSubmission
+						};
+						pendingAssistantSubmitRef.current = assistantSubmit;
+						const onSubmit = (event) => {
+							if (pendingAssistantSubmitRef.current === assistantSubmit && assistantSubmit.event === void 0) assistantSubmit.event = event;
+							queueMicrotask(() => {
+								if (pendingAssistantSubmitRef.current === assistantSubmit && !assistantSubmit.handlerInvoked) settleAssistantSubmit(true);
+							});
+						};
+						formElement.addEventListener("submit", onSubmit, { once: true });
+						try {
+							formElement.requestSubmit();
+						} catch (error) {
+							settleAssistantSubmit(false);
+							throw error;
+						} finally {
+							assistantSubmit.dispatching = false;
+							formElement.removeEventListener("submit", onSubmit);
+						}
+						const dispatched = assistantSubmit.event !== void 0;
+						if (!dispatched) settleAssistantSubmit(false);
+						if (await submissionResult) return { success: true };
+						return {
+							success: false,
+							message: dispatched ? "The form contains invalid fields and was not submitted." : "The form did not accept the submission."
+						};
+					}
 					return {
 						success: false,
 						message: "Unable retrieve the form element. This is a coding error."
@@ -65,7 +161,9 @@ const useAssistantForm = (props) => {
 		getValues,
 		aui,
 		reset,
-		isSubmitting
+		isSubmitting,
+		rejectAssistantSubmit,
+		settleAssistantSubmit
 	]);
 	const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;
 	useEffect(() => {
@@ -82,7 +180,7 @@ const useAssistantForm = (props) => {
 		if (!renderResetFormTool) return void 0;
 		return aui.tools.setToolUI("reset_form", renderResetFormTool);
 	}, [aui, renderResetFormTool]);
-	return form;
+	return assistantForm;
 };
 //#endregion
 export { useAssistantForm };

package/dist/useAssistantForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAssistantForm.js","names":[],"sources":["../src/useAssistantForm.ts"],"sourcesContent":["\"use client\";\n\nimport { type ModelContext, tool } from \"@assistant-ui/core\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { type ToolCallMessagePartComponent } from \"@assistant-ui/core/react\";\nimport { useAui } from \"@assistant-ui/store\";\nimport { useEffect } from \"react\";\nimport {\n  type Field,\n  type FieldValues,\n  type Path,\n  type PathValue,\n  type UseFormProps,\n  type UseFormReturn,\n  get,\n  useForm,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport { formTools } from \"./formTools\";\n\nexport type UseAssistantFormProps<\n  TFieldValues extends FieldValues,\n  TContext,\n  TTransformedValues,\n> = UseFormProps<TFieldValues, TContext, TTransformedValues> & {\n  assistant?:\n    | {\n        tools?:\n          | {\n              set_form_field?:\n                | {\n                    render?:\n                      | ToolCallMessagePartComponent<\n                          z.infer<\n                            (typeof formTools.set_form_field)[\"parameters\"]\n                          >,\n                          unknown\n                        >\n                      | undefined;\n                  }\n                | undefined;\n              submit_form?:\n                | {\n                    render?:\n                      | ToolCallMessagePartComponent<\n                          z.infer<(typeof formTools.submit_form)[\"parameters\"]>,\n                          unknown\n                        >\n                      | undefined;\n                  }\n                | undefined;\n              reset_form?:\n                | {\n                    render?:\n                      | ToolCallMessagePartComponent<\n                          z.infer<(typeof formTools.reset_form)[\"parameters\"]>,\n                          unknown\n                        >\n                      | undefined;\n                  }\n                | undefined;\n            }\n          | undefined;\n      }\n    | undefined;\n};\n\nexport const useAssistantForm = <\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = any,\n  TTransformedValues = TFieldValues,\n>(\n  props?: UseAssistantFormProps<TFieldValues, TContext, TTransformedValues>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n  const {\n    control,\n    getValues,\n    setValue,\n    reset,\n    formState: { isSubmitting },\n  } = form;\n\n  const aui = useAui();\n  useEffect(() => {\n    const value: ModelContext = {\n      tools: {\n        set_form_field: tool({\n          ...formTools.set_form_field,\n          parameters: formTools.set_form_field.parameters,\n          execute: async (args) => {\n            setValue(\n              args.name as Path<TFieldValues>,\n              args.value as PathValue<TFieldValues, Path<TFieldValues>>,\n            );\n\n            return { success: true };\n          },\n        }),\n        submit_form: tool({\n          ...formTools.submit_form,\n          execute: async () => {\n            if (isSubmitting) {\n              return {\n                success: false,\n                message: \"The form is already submitting.\",\n              };\n            }\n            const { _names, _fields } = control;\n            for (const name of _names.mount) {\n              const field: Field | undefined = get(_fields, name);\n              if (field?._f) {\n                const fieldReference = Array.isArray(field._f.refs)\n                  ? field._f.refs[0]\n                  : field._f.ref;\n\n                if (fieldReference instanceof HTMLElement) {\n                  const form = fieldReference.closest(\"form\");\n                  if (form) {\n                    form.requestSubmit();\n\n                    return { success: true };\n                  }\n                }\n              }\n            }\n\n            return {\n              success: false,\n              message:\n                \"Unable retrieve the form element. This is a coding error.\",\n            };\n          },\n        }),\n        reset_form: tool({\n          ...formTools.reset_form,\n          execute: async () => {\n            reset();\n            return { success: true };\n          },\n        }),\n      },\n    };\n\n    return aui.modelContext.register({\n      getModelContext: () => ({\n        ...value,\n        system: `Form State:\\n${JSON.stringify(getValues())}`,\n      }),\n    });\n  }, [control, setValue, getValues, aui, reset, isSubmitting]);\n\n  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;\n  useEffect(() => {\n    if (!renderFormFieldTool) return undefined;\n    return aui.tools.setToolUI(\"set_form_field\", renderFormFieldTool);\n  }, [aui, renderFormFieldTool]);\n\n  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;\n  useEffect(() => {\n    if (!renderSubmitFormTool) return undefined;\n    return aui.tools.setToolUI(\"submit_form\", renderSubmitFormTool);\n  }, [aui, renderSubmitFormTool]);\n\n  const renderResetFormTool = props?.assistant?.tools?.reset_form?.render;\n  useEffect(() => {\n    if (!renderResetFormTool) return undefined;\n    return aui.tools.setToolUI(\"reset_form\", renderResetFormTool);\n  }, [aui, renderResetFormTool]);\n\n  return form;\n};\n"],"mappings":";;;;;;;;AAmEA,MAAa,oBAKX,UAC8D;CAC9D,MAAM,OAAO,QAAoD,KAAK;CACtE,MAAM,EACJ,SACA,WACA,UACA,OACA,WAAW,EAAE,mBACX;CAEJ,MAAM,MAAM,OAAO;CACnB,gBAAgB;EACd,MAAM,QAAsB,EAC1B,OAAO;GACL,gBAAgB,KAAK;IACnB,GAAG,UAAU;IACb,YAAY,UAAU,eAAe;IACrC,SAAS,OAAO,SAAS;KACvB,SACE,KAAK,MACL,KAAK,KACP;KAEA,OAAO,EAAE,SAAS,KAAK;IACzB;GACF,CAAC;GACD,aAAa,KAAK;IAChB,GAAG,UAAU;IACb,SAAS,YAAY;KACnB,IAAI,cACF,OAAO;MACL,SAAS;MACT,SAAS;KACX;KAEF,MAAM,EAAE,QAAQ,YAAY;KAC5B,KAAK,MAAM,QAAQ,OAAO,OAAO;MAC/B,MAAM,QAA2B,IAAI,SAAS,IAAI;MAClD,IAAI,OAAO,IAAI;OACb,MAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAC9C,MAAM,GAAG,KAAK,KACd,MAAM,GAAG;OAEb,IAAI,0BAA0B,aAAa;QACzC,MAAM,OAAO,eAAe,QAAQ,MAAM;QAC1C,IAAI,MAAM;SACR,KAAK,cAAc;SAEnB,OAAO,EAAE,SAAS,KAAK;QACzB;OACF;MACF;KACF;KAEA,OAAO;MACL,SAAS;MACT,SACE;KACJ;IACF;GACF,CAAC;GACD,YAAY,KAAK;IACf,GAAG,UAAU;IACb,SAAS,YAAY;KACnB,MAAM;KACN,OAAO,EAAE,SAAS,KAAK;IACzB;GACF,CAAC;EACH,EACF;EAEA,OAAO,IAAI,aAAa,SAAS,EAC/B,wBAAwB;GACtB,GAAG;GACH,QAAQ,gBAAgB,KAAK,UAAU,UAAU,CAAC;EACpD,GACF,CAAC;CACH,GAAG;EAAC;EAAS;EAAU;EAAW;EAAK;EAAO;CAAY,CAAC;CAE3D,MAAM,sBAAsB,OAAO,WAAW,OAAO,gBAAgB;CACrE,gBAAgB;EACd,IAAI,CAAC,qBAAqB,OAAO,KAAA;EACjC,OAAO,IAAI,MAAM,UAAU,kBAAkB,mBAAmB;CAClE,GAAG,CAAC,KAAK,mBAAmB,CAAC;CAE7B,MAAM,uBAAuB,OAAO,WAAW,OAAO,aAAa;CACnE,gBAAgB;EACd,IAAI,CAAC,sBAAsB,OAAO,KAAA;EAClC,OAAO,IAAI,MAAM,UAAU,eAAe,oBAAoB;CAChE,GAAG,CAAC,KAAK,oBAAoB,CAAC;CAE9B,MAAM,sBAAsB,OAAO,WAAW,OAAO,YAAY;CACjE,gBAAgB;EACd,IAAI,CAAC,qBAAqB,OAAO,KAAA;EACjC,OAAO,IAAI,MAAM,UAAU,cAAc,mBAAmB;CAC9D,GAAG,CAAC,KAAK,mBAAmB,CAAC;CAE7B,OAAO;AACT"}
+{"version":3,"file":"useAssistantForm.js","names":[],"sources":["../src/useAssistantForm.ts"],"sourcesContent":["\"use client\";\n\nimport { type ModelContext, tool } from \"@assistant-ui/core\";\nimport type {} from \"@assistant-ui/core/store\";\nimport { type ToolCallMessagePartComponent } from \"@assistant-ui/core/react\";\nimport { useAui } from \"@assistant-ui/store\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport {\n  type Field,\n  type FieldValues,\n  type Path,\n  type PathValue,\n  type UseFormProps,\n  type UseFormReturn,\n  get,\n  useForm,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport { formTools } from \"./formTools\";\n\ntype PendingAssistantSubmit = {\n  dispatching: boolean;\n  event: unknown;\n  handlerInvoked: boolean;\n  outcome: boolean | undefined;\n  resolve: (outcome: boolean) => void;\n  reject: (error: unknown) => void;\n};\n\nexport type UseAssistantFormProps<\n  TFieldValues extends FieldValues,\n  TContext,\n  TTransformedValues,\n> = UseFormProps<TFieldValues, TContext, TTransformedValues> & {\n  assistant?:\n    | {\n        tools?:\n          | {\n              set_form_field?:\n                | {\n                    render?:\n                      | ToolCallMessagePartComponent<\n                          z.infer<\n                            (typeof formTools.set_form_field)[\"parameters\"]\n                          >,\n                          unknown\n                        >\n                      | undefined;\n                  }\n                | undefined;\n              submit_form?:\n                | {\n                    render?:\n                      | ToolCallMessagePartComponent<\n                          z.infer<(typeof formTools.submit_form)[\"parameters\"]>,\n                          unknown\n                        >\n                      | undefined;\n                  }\n                | undefined;\n              reset_form?:\n                | {\n                    render?:\n                      | ToolCallMessagePartComponent<\n                          z.infer<(typeof formTools.reset_form)[\"parameters\"]>,\n                          unknown\n                        >\n                      | undefined;\n                  }\n                | undefined;\n            }\n          | undefined;\n      }\n    | undefined;\n};\n\nexport const useAssistantForm = <\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = any,\n  TTransformedValues = TFieldValues,\n>(\n  props?: UseAssistantFormProps<TFieldValues, TContext, TTransformedValues>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n  const {\n    control,\n    getValues,\n    setValue,\n    reset,\n    handleSubmit: baseHandleSubmit,\n    formState: { isSubmitting },\n  } = form;\n\n  const pendingAssistantSubmitRef = useRef<PendingAssistantSubmit | null>(null);\n  const settleAssistantSubmit = useCallback((outcome: boolean) => {\n    const pending = pendingAssistantSubmitRef.current;\n    if (!pending) return;\n\n    pendingAssistantSubmitRef.current = null;\n    pending.resolve(outcome);\n  }, []);\n  const rejectAssistantSubmit = useCallback((error: unknown) => {\n    const pending = pendingAssistantSubmitRef.current;\n    if (!pending) return;\n\n    pendingAssistantSubmitRef.current = null;\n    pending.reject(error);\n  }, []);\n\n  const handleSubmit = useCallback<\n    UseFormReturn<TFieldValues, TContext, TTransformedValues>[\"handleSubmit\"]\n  >(\n    (onValid, onInvalid) => {\n      const submit = baseHandleSubmit(\n        (...args) => {\n          const pending = pendingAssistantSubmitRef.current;\n          const event = args[1]?.nativeEvent ?? args[1];\n          if (pending && pending.event === event) pending.outcome = true;\n          return onValid(...args);\n        },\n        (...args) => {\n          const pending = pendingAssistantSubmitRef.current;\n          const event = args[1]?.nativeEvent ?? args[1];\n          if (pending && pending.event === event) pending.outcome = false;\n          return onInvalid?.(...args);\n        },\n      );\n\n      return (async (event) => {\n        const pending = pendingAssistantSubmitRef.current;\n        const nativeEvent = event?.nativeEvent ?? event;\n        const assistantSubmit =\n          pending &&\n          (pending.event === nativeEvent ||\n            (pending.dispatching &&\n              pending.event === undefined &&\n              nativeEvent !== undefined))\n            ? pending\n            : null;\n        if (assistantSubmit) {\n          assistantSubmit.event = nativeEvent;\n          assistantSubmit.handlerInvoked = true;\n        }\n\n        try {\n          const result = await submit(event);\n          if (\n            assistantSubmit &&\n            pendingAssistantSubmitRef.current === assistantSubmit\n          ) {\n            settleAssistantSubmit(assistantSubmit.outcome ?? true);\n          }\n          return result;\n        } catch (error) {\n          if (pendingAssistantSubmitRef.current === assistantSubmit) {\n            rejectAssistantSubmit(error);\n          }\n          throw error;\n        }\n      }) as typeof submit;\n    },\n    [baseHandleSubmit, rejectAssistantSubmit, settleAssistantSubmit],\n  );\n  const assistantForm = useMemo<\n    UseFormReturn<TFieldValues, TContext, TTransformedValues>\n  >(\n    () => ({\n      ...form,\n      handleSubmit,\n      get formState() {\n        return form.formState;\n      },\n    }),\n    [form, handleSubmit],\n  );\n\n  const aui = useAui();\n  useEffect(() => {\n    const value: ModelContext = {\n      tools: {\n        set_form_field: tool({\n          ...formTools.set_form_field,\n          parameters: formTools.set_form_field.parameters,\n          execute: async (args) => {\n            setValue(\n              args.name as Path<TFieldValues>,\n              args.value as PathValue<TFieldValues, Path<TFieldValues>>,\n            );\n\n            return { success: true };\n          },\n        }),\n        submit_form: tool({\n          ...formTools.submit_form,\n          execute: async () => {\n            if (isSubmitting || pendingAssistantSubmitRef.current) {\n              return {\n                success: false,\n                message: \"The form is already submitting.\",\n              };\n            }\n            const { _names, _fields } = control;\n            let formElement: HTMLFormElement | null = null;\n            for (const name of _names.mount) {\n              const field: Field | undefined = get(_fields, name);\n              if (field?._f) {\n                const fieldReference = Array.isArray(field._f.refs)\n                  ? field._f.refs[0]\n                  : field._f.ref;\n\n                if (fieldReference instanceof HTMLElement) {\n                  formElement = fieldReference.closest(\"form\");\n                  if (formElement) break;\n                }\n              }\n            }\n\n            if (formElement) {\n              if (!formElement.noValidate && !formElement.reportValidity()) {\n                return {\n                  success: false,\n                  message:\n                    \"The form contains invalid fields and was not submitted.\",\n                };\n              }\n\n              let resolveSubmission: (outcome: boolean) => void = () => {};\n              let rejectSubmission: (error: unknown) => void = () => {};\n              const submissionResult = new Promise<boolean>(\n                (resolve, reject) => {\n                  resolveSubmission = resolve;\n                  rejectSubmission = reject;\n                },\n              );\n              const assistantSubmit: PendingAssistantSubmit = {\n                dispatching: true,\n                event: undefined,\n                handlerInvoked: false,\n                outcome: undefined,\n                resolve: resolveSubmission,\n                reject: rejectSubmission,\n              };\n              pendingAssistantSubmitRef.current = assistantSubmit;\n              const onSubmit = (event: SubmitEvent) => {\n                if (\n                  pendingAssistantSubmitRef.current === assistantSubmit &&\n                  assistantSubmit.event === undefined\n                ) {\n                  assistantSubmit.event = event;\n                }\n                queueMicrotask(() => {\n                  if (\n                    pendingAssistantSubmitRef.current === assistantSubmit &&\n                    !assistantSubmit.handlerInvoked\n                  ) {\n                    settleAssistantSubmit(true);\n                  }\n                });\n              };\n\n              formElement.addEventListener(\"submit\", onSubmit, { once: true });\n              try {\n                formElement.requestSubmit();\n              } catch (error) {\n                settleAssistantSubmit(false);\n                throw error;\n              } finally {\n                assistantSubmit.dispatching = false;\n                formElement.removeEventListener(\"submit\", onSubmit);\n              }\n\n              const dispatched = assistantSubmit.event !== undefined;\n              if (!dispatched) {\n                settleAssistantSubmit(false);\n              }\n\n              if (await submissionResult) return { success: true };\n              return {\n                success: false,\n                message: dispatched\n                  ? \"The form contains invalid fields and was not submitted.\"\n                  : \"The form did not accept the submission.\",\n              };\n            }\n\n            return {\n              success: false,\n              message:\n                \"Unable retrieve the form element. This is a coding error.\",\n            };\n          },\n        }),\n        reset_form: tool({\n          ...formTools.reset_form,\n          execute: async () => {\n            reset();\n            return { success: true };\n          },\n        }),\n      },\n    };\n\n    return aui.modelContext.register({\n      getModelContext: () => ({\n        ...value,\n        system: `Form State:\\n${JSON.stringify(getValues())}`,\n      }),\n    });\n  }, [\n    control,\n    setValue,\n    getValues,\n    aui,\n    reset,\n    isSubmitting,\n    rejectAssistantSubmit,\n    settleAssistantSubmit,\n  ]);\n\n  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;\n  useEffect(() => {\n    if (!renderFormFieldTool) return undefined;\n    return aui.tools.setToolUI(\"set_form_field\", renderFormFieldTool);\n  }, [aui, renderFormFieldTool]);\n\n  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;\n  useEffect(() => {\n    if (!renderSubmitFormTool) return undefined;\n    return aui.tools.setToolUI(\"submit_form\", renderSubmitFormTool);\n  }, [aui, renderSubmitFormTool]);\n\n  const renderResetFormTool = props?.assistant?.tools?.reset_form?.render;\n  useEffect(() => {\n    if (!renderResetFormTool) return undefined;\n    return aui.tools.setToolUI(\"reset_form\", renderResetFormTool);\n  }, [aui, renderResetFormTool]);\n\n  return assistantForm;\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-hook-form",
-  "version": "0.12.27",
+  "version": "0.12.29",
   "description": "React Hook Form integration for assistant-ui",
   "keywords": [
     "react-hook-form",
@@ -29,8 +29,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.10",
-    "@assistant-ui/store": "^0.3.8",
+    "@assistant-ui/core": "^0.3.15",
+    "@assistant-ui/store": "^0.3.10",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
@@ -49,9 +49,9 @@
     "@types/react-dom": "^19.2.4",
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
-    "react-hook-form": "^7.84.0",
+    "react-hook-form": "^7.85.0",
     "vitest": "^4.1.10",
-    "@assistant-ui/x-buildutils": "0.0.22"
+    "@assistant-ui/x-buildutils": "0.0.23"
   },
   "publishConfig": {
     "access": "public",

package/src/useAssistantForm.test.tsx

@@ -1,7 +1,14 @@
 /** @vitest-environment jsdom */
-import { act, render, renderHook } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  waitFor,
+} from "@testing-library/react";
 import type { ModelContext } from "@assistant-ui/core";
 import type { FormEvent, ReactNode } from "react";
+import type { Resolver, ResolverResult } from "react-hook-form";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => {
@@ -36,6 +43,19 @@ beforeEach(() => {
   });
 });
 
+const executeSubmitForm = () => {
+  const submitTool = provider.getModelContext().tools?.submit_form;
+  if (!submitTool?.execute) throw new Error("submit_form is not registered");
+  return submitTool.execute({}, {} as never);
+};
+
+const expectSubmitBlocked = async () => {
+  await expect(executeSubmitForm()).resolves.toEqual({
+    success: false,
+    message: "The form contains invalid fields and was not submitted.",
+  });
+};
+
 const expectRegisteredFieldsToSubmit = async (Fields: () => ReactNode) => {
   const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -47,10 +67,7 @@ const expectRegisteredFieldsToSubmit = async (Fields: () => ReactNode) => {
     </form>,
   );
 
-  const submitTool = provider.getModelContext().tools?.submit_form;
-  if (!submitTool?.execute) throw new Error("submit_form is not registered");
-
-  await expect(submitTool.execute({}, {} as never)).resolves.toEqual({
+  await expect(executeSubmitForm()).resolves.toEqual({
     success: true,
   });
   expect(onSubmit).toHaveBeenCalledOnce();
@@ -100,4 +117,246 @@ describe("useAssistantForm", () => {
       );
     });
   });
+
+  it("reports when native form validation blocks submission", async () => {
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+
+    render(
+      <form onSubmit={onSubmit}>
+        <NativeRequiredField />
+      </form>,
+    );
+
+    await expectSubmitBlocked();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("submits when native form validation is disabled", async () => {
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+
+    render(
+      <form noValidate onSubmit={onSubmit}>
+        <NativeRequiredField />
+      </form>,
+    );
+
+    await expect(executeSubmitForm()).resolves.toEqual({
+      success: true,
+    });
+    expect(onSubmit).toHaveBeenCalledOnce();
+  });
+
+  it("submits a form with react-hook-form rules and a plain onSubmit", async () => {
+    const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    });
+
+    const Fields = () => {
+      const form = useAssistantForm<{ name: string }>();
+      return <input {...form.register("name", { required: true })} />;
+    };
+
+    render(
+      <form onSubmit={onSubmit}>
+        <Fields />
+      </form>,
+    );
+
+    await expect(executeSubmitForm()).resolves.toEqual({ success: true });
+    expect(onSubmit).toHaveBeenCalledOnce();
+  });
+
+  it("reports when react-hook-form validation blocks submission", async () => {
+    const onValid = vi.fn();
+    const onInvalid = vi.fn();
+
+    const { getByTestId } = render(
+      <ReactHookFormRequiredForm onInvalid={onInvalid} onValid={onValid} />,
+    );
+
+    await expectSubmitBlocked();
+    expect(onValid).not.toHaveBeenCalled();
+    expect(onInvalid).toHaveBeenCalledOnce();
+    await waitFor(() => {
+      expect(getByTestId("submit-count").textContent).toBe("1");
+      expect(getByTestId("name-error").textContent).toBe("invalid");
+    });
+
+    fireEvent.change(getByTestId("name-input"), {
+      target: { value: "Ada" },
+    });
+    await waitFor(() => {
+      expect(getByTestId("name-error").textContent).toBe("valid");
+    });
+  });
+
+  it("reports validation blocked by a capture-phase handler", async () => {
+    const onValid = vi.fn();
+
+    render(<ReactHookFormRequiredForm capture onValid={onValid} />);
+
+    await expectSubmitBlocked();
+    expect(onValid).not.toHaveBeenCalled();
+  });
+
+  it("reports react-hook-form errors when native validation is disabled", async () => {
+    const onValid = vi.fn();
+
+    render(<ReactHookFormRequiredForm noValidate onValid={onValid} />);
+
+    await expectSubmitBlocked();
+    expect(onValid).not.toHaveBeenCalled();
+  });
+
+  it("submits forms that pass react-hook-form validation", async () => {
+    const onValid = vi.fn();
+
+    render(<ReactHookFormRequiredForm defaultName="Ada" onValid={onValid} />);
+
+    await expect(executeSubmitForm()).resolves.toEqual({ success: true });
+    await waitFor(() => expect(onValid).toHaveBeenCalledOnce());
+  });
+
+  it("does not let user submissions settle a pending assistant submission", async () => {
+    type FormValues = { name: string };
+    let validationCount = 0;
+    let resolveAssistantValidation: (
+      result: ResolverResult<FormValues>,
+    ) => void = () => {};
+    const resolver: Resolver<FormValues> = (values) => {
+      validationCount += 1;
+      if (validationCount === 1) {
+        return new Promise((resolve) => {
+          resolveAssistantValidation = resolve;
+        });
+      }
+      return Promise.resolve({ values, errors: {} });
+    };
+    const onValid = vi.fn();
+
+    const Form = () => {
+      const form = useAssistantForm<FormValues>({
+        defaultValues: { name: "" },
+        resolver,
+      });
+      return (
+        <form
+          data-testid="concurrent-form"
+          onSubmit={form.handleSubmit(onValid)}
+        >
+          <input data-testid="concurrent-name" {...form.register("name")} />
+        </form>
+      );
+    };
+    const { getByTestId } = render(<Form />);
+
+    let assistantSubmitSettled = false;
+    const assistantSubmit = executeSubmitForm().finally(() => {
+      assistantSubmitSettled = true;
+    });
+    await waitFor(() => expect(validationCount).toBe(1));
+
+    fireEvent.change(getByTestId("concurrent-name"), {
+      target: { value: "Ada" },
+    });
+    fireEvent.submit(getByTestId("concurrent-form"));
+    await waitFor(() => {
+      expect(validationCount).toBe(2);
+      expect(onValid).toHaveBeenCalledOnce();
+    });
+    expect(assistantSubmitSettled).toBe(false);
+
+    resolveAssistantValidation({
+      values: {},
+      errors: { name: { type: "required", message: "Name is required" } },
+    });
+    await expect(assistantSubmit).resolves.toEqual({
+      success: false,
+      message: "The form contains invalid fields and was not submitted.",
+    });
+  });
+
+  it("reports when requestSubmit does not dispatch a submit event", async () => {
+    const requestSubmit = vi
+      .spyOn(HTMLFormElement.prototype, "requestSubmit")
+      .mockImplementation(() => {});
+    try {
+      render(
+        <form noValidate>
+          <NativeRequiredField />
+        </form>,
+      );
+
+      await expect(executeSubmitForm()).resolves.toEqual({
+        success: false,
+        message: "The form did not accept the submission.",
+      });
+    } finally {
+      requestSubmit.mockRestore();
+    }
+  });
+
+  it("propagates errors when requestSubmit throws", async () => {
+    const error = new Error("requestSubmit unavailable");
+    const requestSubmit = vi
+      .spyOn(HTMLFormElement.prototype, "requestSubmit")
+      .mockImplementation(() => {
+        throw error;
+      });
+    try {
+      render(
+        <form noValidate>
+          <NativeRequiredField />
+        </form>,
+      );
+
+      await expect(executeSubmitForm()).rejects.toBe(error);
+    } finally {
+      requestSubmit.mockRestore();
+    }
+  });
 });
+
+const NativeRequiredField = () => {
+  const form = useAssistantForm<{ name: string }>();
+  return <input required {...form.register("name")} />;
+};
+
+const ReactHookFormRequiredForm = ({
+  capture = false,
+  defaultName = "",
+  onInvalid,
+  onValid,
+  noValidate,
+}: {
+  capture?: boolean | undefined;
+  defaultName?: string | undefined;
+  onInvalid?: (() => void) | undefined;
+  onValid: () => void;
+  noValidate?: boolean | undefined;
+}) => {
+  const form = useAssistantForm<{ name: string }>({
+    defaultValues: { name: defaultName },
+  });
+  const handleSubmit = form.handleSubmit(onValid, onInvalid);
+  return (
+    <form
+      noValidate={noValidate}
+      onSubmit={capture ? undefined : handleSubmit}
+      onSubmitCapture={capture ? handleSubmit : undefined}
+    >
+      <input
+        data-testid="name-input"
+        {...form.register("name", { required: true })}
+      />
+      <output data-testid="submit-count">{form.formState.submitCount}</output>
+      <output data-testid="name-error">
+        {form.formState.errors.name ? "invalid" : "valid"}
+      </output>
+    </form>
+  );
+};

package/src/useAssistantForm.ts

@@ -4,7 +4,7 @@ import { type ModelContext, tool } from "@assistant-ui/core";
 import type {} from "@assistant-ui/core/store";
 import { type ToolCallMessagePartComponent } from "@assistant-ui/core/react";
 import { useAui } from "@assistant-ui/store";
-import { useEffect } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   type Field,
   type FieldValues,
@@ -18,6 +18,15 @@ import {
 import type { z } from "zod";
 import { formTools } from "./formTools";
 
+type PendingAssistantSubmit = {
+  dispatching: boolean;
+  event: unknown;
+  handlerInvoked: boolean;
+  outcome: boolean | undefined;
+  resolve: (outcome: boolean) => void;
+  reject: (error: unknown) => void;
+};
+
 export type UseAssistantFormProps<
   TFieldValues extends FieldValues,
   TContext,
@@ -78,9 +87,93 @@ export const useAssistantForm = <
     getValues,
     setValue,
     reset,
+    handleSubmit: baseHandleSubmit,
     formState: { isSubmitting },
   } = form;
 
+  const pendingAssistantSubmitRef = useRef<PendingAssistantSubmit | null>(null);
+  const settleAssistantSubmit = useCallback((outcome: boolean) => {
+    const pending = pendingAssistantSubmitRef.current;
+    if (!pending) return;
+
+    pendingAssistantSubmitRef.current = null;
+    pending.resolve(outcome);
+  }, []);
+  const rejectAssistantSubmit = useCallback((error: unknown) => {
+    const pending = pendingAssistantSubmitRef.current;
+    if (!pending) return;
+
+    pendingAssistantSubmitRef.current = null;
+    pending.reject(error);
+  }, []);
+
+  const handleSubmit = useCallback<
+    UseFormReturn<TFieldValues, TContext, TTransformedValues>["handleSubmit"]
+  >(
+    (onValid, onInvalid) => {
+      const submit = baseHandleSubmit(
+        (...args) => {
+          const pending = pendingAssistantSubmitRef.current;
+          const event = args[1]?.nativeEvent ?? args[1];
+          if (pending && pending.event === event) pending.outcome = true;
+          return onValid(...args);
+        },
+        (...args) => {
+          const pending = pendingAssistantSubmitRef.current;
+          const event = args[1]?.nativeEvent ?? args[1];
+          if (pending && pending.event === event) pending.outcome = false;
+          return onInvalid?.(...args);
+        },
+      );
+
+      return (async (event) => {
+        const pending = pendingAssistantSubmitRef.current;
+        const nativeEvent = event?.nativeEvent ?? event;
+        const assistantSubmit =
+          pending &&
+          (pending.event === nativeEvent ||
+            (pending.dispatching &&
+              pending.event === undefined &&
+              nativeEvent !== undefined))
+            ? pending
+            : null;
+        if (assistantSubmit) {
+          assistantSubmit.event = nativeEvent;
+          assistantSubmit.handlerInvoked = true;
+        }
+
+        try {
+          const result = await submit(event);
+          if (
+            assistantSubmit &&
+            pendingAssistantSubmitRef.current === assistantSubmit
+          ) {
+            settleAssistantSubmit(assistantSubmit.outcome ?? true);
+          }
+          return result;
+        } catch (error) {
+          if (pendingAssistantSubmitRef.current === assistantSubmit) {
+            rejectAssistantSubmit(error);
+          }
+          throw error;
+        }
+      }) as typeof submit;
+    },
+    [baseHandleSubmit, rejectAssistantSubmit, settleAssistantSubmit],
+  );
+  const assistantForm = useMemo<
+    UseFormReturn<TFieldValues, TContext, TTransformedValues>
+  >(
+    () => ({
+      ...form,
+      handleSubmit,
+      get formState() {
+        return form.formState;
+      },
+    }),
+    [form, handleSubmit],
+  );
+
   const aui = useAui();
   useEffect(() => {
     const value: ModelContext = {
@@ -100,13 +193,14 @@ export const useAssistantForm = <
         submit_form: tool({
           ...formTools.submit_form,
           execute: async () => {
-            if (isSubmitting) {
+            if (isSubmitting || pendingAssistantSubmitRef.current) {
               return {
                 success: false,
                 message: "The form is already submitting.",
               };
             }
             const { _names, _fields } = control;
+            let formElement: HTMLFormElement | null = null;
             for (const name of _names.mount) {
               const field: Field | undefined = get(_fields, name);
               if (field?._f) {
@@ -115,14 +209,78 @@ export const useAssistantForm = <
                   : field._f.ref;
 
                 if (fieldReference instanceof HTMLElement) {
-                  const form = fieldReference.closest("form");
-                  if (form) {
-                    form.requestSubmit();
+                  formElement = fieldReference.closest("form");
+                  if (formElement) break;
+                }
+              }
+            }
 
-                    return { success: true };
-                  }
+            if (formElement) {
+              if (!formElement.noValidate && !formElement.reportValidity()) {
+                return {
+                  success: false,
+                  message:
+                    "The form contains invalid fields and was not submitted.",
+                };
+              }
+
+              let resolveSubmission: (outcome: boolean) => void = () => {};
+              let rejectSubmission: (error: unknown) => void = () => {};
+              const submissionResult = new Promise<boolean>(
+                (resolve, reject) => {
+                  resolveSubmission = resolve;
+                  rejectSubmission = reject;
+                },
+              );
+              const assistantSubmit: PendingAssistantSubmit = {
+                dispatching: true,
+                event: undefined,
+                handlerInvoked: false,
+                outcome: undefined,
+                resolve: resolveSubmission,
+                reject: rejectSubmission,
+              };
+              pendingAssistantSubmitRef.current = assistantSubmit;
+              const onSubmit = (event: SubmitEvent) => {
+                if (
+                  pendingAssistantSubmitRef.current === assistantSubmit &&
+                  assistantSubmit.event === undefined
+                ) {
+                  assistantSubmit.event = event;
                 }
+                queueMicrotask(() => {
+                  if (
+                    pendingAssistantSubmitRef.current === assistantSubmit &&
+                    !assistantSubmit.handlerInvoked
+                  ) {
+                    settleAssistantSubmit(true);
+                  }
+                });
+              };
+
+              formElement.addEventListener("submit", onSubmit, { once: true });
+              try {
+                formElement.requestSubmit();
+              } catch (error) {
+                settleAssistantSubmit(false);
+                throw error;
+              } finally {
+                assistantSubmit.dispatching = false;
+                formElement.removeEventListener("submit", onSubmit);
               }
+
+              const dispatched = assistantSubmit.event !== undefined;
+              if (!dispatched) {
+                settleAssistantSubmit(false);
+              }
+
+              if (await submissionResult) return { success: true };
+              return {
+                success: false,
+                message: dispatched
+                  ? "The form contains invalid fields and was not submitted."
+                  : "The form did not accept the submission.",
+              };
             }
 
             return {
@@ -148,7 +306,16 @@ export const useAssistantForm = <
         system: `Form State:\n${JSON.stringify(getValues())}`,
       }),
     });
-  }, [control, setValue, getValues, aui, reset, isSubmitting]);
+  }, [
+    control,
+    setValue,
+    getValues,
+    aui,
+    reset,
+    isSubmitting,
+    rejectAssistantSubmit,
+    settleAssistantSubmit,
+  ]);
 
   const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;
   useEffect(() => {
@@ -168,5 +335,5 @@ export const useAssistantForm = <
     return aui.tools.setToolUI("reset_form", renderResetFormTool);
   }, [aui, renderResetFormTool]);
 
-  return form;
+  return assistantForm;
 };