@assistant-ui/react-hook-form 0.0.2 → 0.0.4

package/.turbo/turbo-build.log

@@ -0,0 +1,20 @@
+
+> @assistant-ui/react-hook-form@0.0.4 build /home/runner/work/assistant-ui/assistant-ui/packages/react-hook-form
+> tsup src/index.ts --format cjs,esm --dts --sourcemap
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.1.0
+CLI Target: esnext
+CJS Build start
+ESM Build start
+ESM dist/index.js     2.69 KB
+ESM dist/index.js.map 5.69 KB
+ESM ⚡️ Build success in 63ms
+CJS dist/index.cjs     3.88 KB
+CJS dist/index.cjs.map 5.82 KB
+CJS ⚡️ Build success in 68ms
+DTS Build start
+DTS ⚡️ Build success in 3910ms
+DTS dist/index.d.cts 1.68 KB
+DTS dist/index.d.ts  1.68 KB

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @assistant-ui/react-hook-form
+
+## 0.0.4
+
+### Patch Changes
+
+- 671dc86: feat: Tool Render functions
+- Updated dependencies [671dc86]
+  - @assistant-ui/react@0.1.5
+
+## 0.0.3
+
+### Patch Changes
+
+- 6e9528d: build: add changesets
+- 6e9528d: feat: add useAssistantTool API
+- Updated dependencies [6e9528d]
+- Updated dependencies [6e9528d]
+  - @assistant-ui/react@0.1.3

package/dist/index.cjs

@@ -54,45 +54,63 @@ var useAssistantForm = (props) => {
     (c) => c.registerModelConfigProvider
   );
   (0, import_react.useEffect)(() => {
-    return registerModelConfigProvider(() => {
-      return {
-        system: `Form State:
+    const value = {
+      system: `Form State:
 ${JSON.stringify(form.getValues())}`,
-        tools: {
-          set_form_field: {
-            ...formTools.set_form_field,
-            execute: (args) => {
-              form.setValue(args.name, args.value);
-              return { success: true };
-            }
-          },
-          submit_form: {
-            ...formTools.submit_form,
-            execute: () => {
-              const { _names, _fields } = form.control;
-              for (const name of _names.mount) {
-                const field = _fields[name];
-                if (field?._f) {
-                  const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
-                  if (fieldReference instanceof HTMLElement) {
-                    const form2 = fieldReference.closest("form");
-                    if (form2) {
-                      form2.requestSubmit();
-                      return { success: true };
-                    }
+      tools: {
+        set_form_field: {
+          ...formTools.set_form_field,
+          execute: async (args) => {
+            form.setValue(args.name, args.value);
+            return { success: true };
+          }
+        },
+        submit_form: {
+          ...formTools.submit_form,
+          execute: async () => {
+            const { _names, _fields } = form.control;
+            for (const name of _names.mount) {
+              const field = _fields[name];
+              if (field?._f) {
+                const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
+                if (fieldReference instanceof HTMLElement) {
+                  const form2 = fieldReference.closest("form");
+                  if (form2) {
+                    form2.requestSubmit();
+                    return { success: true };
                   }
                 }
               }
-              return {
-                success: false,
-                message: "Unable retrieve the form element. This is a coding error."
-              };
             }
+            return {
+              success: false,
+              message: "Unable retrieve the form element. This is a coding error."
+            };
           }
         }
-      };
-    });
-  }, [form, registerModelConfigProvider]);
+      }
+    };
+    return registerModelConfigProvider(() => value);
+  }, [
+    form.control,
+    form.setValue,
+    form.getValues,
+    registerModelConfigProvider
+  ]);
+  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;
+  (0, import_experimental.useAssistantToolRenderer)(
+    renderFormFieldTool ? {
+      name: "set_form_field",
+      render: renderFormFieldTool
+    } : null
+  );
+  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;
+  (0, import_experimental.useAssistantToolRenderer)(
+    renderSubmitFormTool ? {
+      name: "submit_form",
+      render: renderSubmitFormTool
+    } : null
+  );
   return form;
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/useAssistantForm.tsx","../src/formTools.tsx"],"sourcesContent":["export { useAssistantForm } from \"./useAssistantForm\";\nexport { formTools } from \"./formTools\";\n","\"use client\";\n\nimport { useAssistantContext } from \"@assistant-ui/react/experimental\";\nimport { useEffect } from \"react\";\nimport {\n  type FieldValues,\n  type UseFormProps,\n  type UseFormReturn,\n  useForm,\n} from \"react-hook-form\";\nimport { formTools } from \"./formTools\";\n\nexport const useAssistantForm = <\n  TFieldValues extends FieldValues = FieldValues,\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = undefined,\n>(\n  props?: UseFormProps<TFieldValues, TContext>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (c) => c.registerModelConfigProvider,\n  );\n\n  useEffect(() => {\n    return registerModelConfigProvider(() => {\n      return {\n        system: `Form State:\\n${JSON.stringify(form.getValues())}`,\n\n        tools: {\n          set_form_field: {\n            ...formTools.set_form_field,\n            execute: (args) => {\n              // biome-ignore lint/suspicious/noExplicitAny: TODO\n              form.setValue(args.name as any, args.value as any);\n\n              return { success: true };\n            },\n          },\n          submit_form: {\n            ...formTools.submit_form,\n            execute: () => {\n              const { _names, _fields } = form.control;\n              for (const name of _names.mount) {\n                const field = _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        },\n      };\n    });\n  }, [form, registerModelConfigProvider]);\n\n  return form;\n};\n","import { z } from \"zod\";\n\nexport const formTools = {\n  set_form_field: {\n    description:\n      \"Sets a form field. Call this function as soon as the user provides the data for each field.\",\n    parameters: z.object({\n      name: z.string(),\n      value: z.string(),\n    }),\n  },\n  submit_form: {\n    description: \"Submits the form. Confirm with user before submitting.\",\n    parameters: z.object({}),\n  },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,0BAAoC;AACpC,mBAA0B;AAC1B,6BAKO;;;ACTP,iBAAkB;AAEX,IAAM,YAAY;AAAA,EACvB,gBAAgB;AAAA,IACd,aACE;AAAA,IACF,YAAY,aAAE,OAAO;AAAA,MACnB,MAAM,aAAE,OAAO;AAAA,MACf,OAAO,aAAE,OAAO;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EACA,aAAa;AAAA,IACX,aAAa;AAAA,IACb,YAAY,aAAE,OAAO,CAAC,CAAC;AAAA,EACzB;AACF;;;ADHO,IAAM,mBAAmB,CAM9B,UAC8D;AAC9D,QAAM,WAAO,gCAAoD,KAAK;AAEtE,QAAM,EAAE,eAAe,QAAI,yCAAoB;AAC/C,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AAEA,8BAAU,MAAM;AACd,WAAO,4BAA4B,MAAM;AACvC,aAAO;AAAA,QACL,QAAQ;AAAA,EAAgB,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC;AAAA,QAExD,OAAO;AAAA,UACL,gBAAgB;AAAA,YACd,GAAG,UAAU;AAAA,YACb,SAAS,CAAC,SAAS;AAEjB,mBAAK,SAAS,KAAK,MAAa,KAAK,KAAY;AAEjD,qBAAO,EAAE,SAAS,KAAK;AAAA,YACzB;AAAA,UACF;AAAA,UACA,aAAa;AAAA,YACX,GAAG,UAAU;AAAA,YACb,SAAS,MAAM;AACb,oBAAM,EAAE,QAAQ,QAAQ,IAAI,KAAK;AACjC,yBAAW,QAAQ,OAAO,OAAO;AAC/B,sBAAM,QAAQ,QAAQ,IAAI;AAC1B,oBAAI,OAAO,IAAI;AACb,wBAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAC9C,MAAM,GAAG,KAAK,CAAC,IACf,MAAM,GAAG;AAEb,sBAAI,0BAA0B,aAAa;AACzC,0BAAMA,QAAO,eAAe,QAAQ,MAAM;AAC1C,wBAAIA,OAAM;AACR,sBAAAA,MAAK,cAAc;AAEnB,6BAAO,EAAE,SAAS,KAAK;AAAA,oBACzB;AAAA,kBACF;AAAA,gBACF;AAAA,cACF;AAEA,qBAAO;AAAA,gBACL,SAAS;AAAA,gBACT,SACE;AAAA,cACJ;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,2BAA2B,CAAC;AAEtC,SAAO;AACT;","names":["form"]}
+{"version":3,"sources":["../src/index.ts","../src/useAssistantForm.tsx","../src/formTools.tsx"],"sourcesContent":["export { useAssistantForm } from \"./useAssistantForm\";\nexport { formTools } from \"./formTools\";\n","\"use client\";\n\nimport {\n  type ModelConfig,\n  useAssistantContext,\n  useAssistantToolRenderer,\n} from \"@assistant-ui/react/experimental\";\nimport { useEffect } from \"react\";\nimport {\n  type FieldValues,\n  type UseFormProps,\n  type UseFormReturn,\n  useForm,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport type { ToolRenderComponent } from \"../../react/src/model-config/ToolRenderComponent\";\nimport { formTools } from \"./formTools\";\n\ntype UseAssistantFormProps<\n  TFieldValues extends FieldValues,\n  TContext,\n> = UseFormProps<TFieldValues, TContext> & {\n  assistant?: {\n    tools?: {\n      set_form_field?: {\n        render?: ToolRenderComponent<\n          z.ZodType<typeof formTools.set_form_field>,\n          unknown\n        >;\n      };\n      submit_form?: {\n        render?: ToolRenderComponent<\n          z.ZodType<typeof formTools.submit_form>,\n          unknown\n        >;\n      };\n    };\n  };\n};\n\nexport const useAssistantForm = <\n  TFieldValues extends FieldValues = FieldValues,\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = undefined,\n>(\n  props?: UseAssistantFormProps<TFieldValues, TContext>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (c) => c.registerModelConfigProvider,\n  );\n\n  useEffect(() => {\n    const value: ModelConfig = {\n      system: `Form State:\\n${JSON.stringify(form.getValues())}`,\n\n      tools: {\n        set_form_field: {\n          ...formTools.set_form_field,\n          execute: async (args) => {\n            // biome-ignore lint/suspicious/noExplicitAny: TODO\n            form.setValue(args.name as any, args.value as any);\n\n            return { success: true };\n          },\n        },\n        submit_form: {\n          ...formTools.submit_form,\n          execute: async () => {\n            const { _names, _fields } = form.control;\n            for (const name of _names.mount) {\n              const field = _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      },\n    };\n    return registerModelConfigProvider(() => value);\n  }, [\n    form.control,\n    form.setValue,\n    form.getValues,\n    registerModelConfigProvider,\n  ]);\n\n  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;\n  useAssistantToolRenderer(\n    renderFormFieldTool\n      ? {\n          name: \"set_form_field\",\n          render: renderFormFieldTool,\n        }\n      : null,\n  );\n\n  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;\n  useAssistantToolRenderer(\n    renderSubmitFormTool\n      ? {\n          name: \"submit_form\",\n          render: renderSubmitFormTool,\n        }\n      : null,\n  );\n\n  return form;\n};\n","import { z } from \"zod\";\n\nexport const formTools = {\n  set_form_field: {\n    description:\n      \"Sets a form field. Call this function as soon as the user provides the data for each field.\",\n    parameters: z.object({\n      name: z.string(),\n      value: z.string(),\n    }),\n  },\n  submit_form: {\n    description: \"Submits the form. Confirm with user before submitting.\",\n    parameters: z.object({}),\n  },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,0BAIO;AACP,mBAA0B;AAC1B,6BAKO;;;ACbP,iBAAkB;AAEX,IAAM,YAAY;AAAA,EACvB,gBAAgB;AAAA,IACd,aACE;AAAA,IACF,YAAY,aAAE,OAAO;AAAA,MACnB,MAAM,aAAE,OAAO;AAAA,MACf,OAAO,aAAE,OAAO;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EACA,aAAa;AAAA,IACX,aAAa;AAAA,IACb,YAAY,aAAE,OAAO,CAAC,CAAC;AAAA,EACzB;AACF;;;ADyBO,IAAM,mBAAmB,CAM9B,UAC8D;AAC9D,QAAM,WAAO,gCAAoD,KAAK;AAEtE,QAAM,EAAE,eAAe,QAAI,yCAAoB;AAC/C,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AAEA,8BAAU,MAAM;AACd,UAAM,QAAqB;AAAA,MACzB,QAAQ;AAAA,EAAgB,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC;AAAA,MAExD,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd,GAAG,UAAU;AAAA,UACb,SAAS,OAAO,SAAS;AAEvB,iBAAK,SAAS,KAAK,MAAa,KAAK,KAAY;AAEjD,mBAAO,EAAE,SAAS,KAAK;AAAA,UACzB;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX,GAAG,UAAU;AAAA,UACb,SAAS,YAAY;AACnB,kBAAM,EAAE,QAAQ,QAAQ,IAAI,KAAK;AACjC,uBAAW,QAAQ,OAAO,OAAO;AAC/B,oBAAM,QAAQ,QAAQ,IAAI;AAC1B,kBAAI,OAAO,IAAI;AACb,sBAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAC9C,MAAM,GAAG,KAAK,CAAC,IACf,MAAM,GAAG;AAEb,oBAAI,0BAA0B,aAAa;AACzC,wBAAMA,QAAO,eAAe,QAAQ,MAAM;AAC1C,sBAAIA,OAAM;AACR,oBAAAA,MAAK,cAAc;AAEnB,2BAAO,EAAE,SAAS,KAAK;AAAA,kBACzB;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAEA,mBAAO;AAAA,cACL,SAAS;AAAA,cACT,SACE;AAAA,YACJ;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,WAAO,4BAA4B,MAAM,KAAK;AAAA,EAChD,GAAG;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,OAAO,WAAW,OAAO,gBAAgB;AACrE;AAAA,IACE,sBACI;AAAA,MACE,MAAM;AAAA,MACN,QAAQ;AAAA,IACV,IACA;AAAA,EACN;AAEA,QAAM,uBAAuB,OAAO,WAAW,OAAO,aAAa;AACnE;AAAA,IACE,uBACI;AAAA,MACE,MAAM;AAAA,MACN,QAAQ;AAAA,IACV,IACA;AAAA,EACN;AAEA,SAAO;AACT;","names":["form"]}

package/dist/index.d.cts

@@ -1,7 +1,19 @@
-import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn, UseFormProps } from 'react-hook-form';
 import { z } from 'zod';
+import { ComponentType } from 'react';
 
-declare const useAssistantForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseFormProps<TFieldValues, TContext>) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+type ToolCallContentPart<TArgs = unknown, TResult = unknown> = {
+    type: "tool-call";
+    toolCallId: string;
+    toolName: string;
+    args: TArgs;
+    result?: TResult;
+};
+
+type ToolRenderComponent<TArgs, TResult> = ComponentType<{
+    part: ToolCallContentPart<TArgs, TResult>;
+    status: "done" | "in_progress" | "error";
+}>;
 
 declare const formTools: {
     set_form_field: {
@@ -10,11 +22,11 @@ declare const formTools: {
             name: z.ZodString;
             value: z.ZodString;
         }, "strip", z.ZodTypeAny, {
-            value: string;
             name: string;
-        }, {
             value: string;
+        }, {
             name: string;
+            value: string;
         }>;
     };
     submit_form: {
@@ -23,4 +35,18 @@ declare const formTools: {
     };
 };
 
+type UseAssistantFormProps<TFieldValues extends FieldValues, TContext> = UseFormProps<TFieldValues, TContext> & {
+    assistant?: {
+        tools?: {
+            set_form_field?: {
+                render?: ToolRenderComponent<z.ZodType<typeof formTools.set_form_field>, unknown>;
+            };
+            submit_form?: {
+                render?: ToolRenderComponent<z.ZodType<typeof formTools.submit_form>, unknown>;
+            };
+        };
+    };
+};
+declare const useAssistantForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseAssistantFormProps<TFieldValues, TContext>) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+
 export { formTools, useAssistantForm };

package/dist/index.d.ts

@@ -1,7 +1,19 @@
-import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn, UseFormProps } from 'react-hook-form';
 import { z } from 'zod';
+import { ComponentType } from 'react';
 
-declare const useAssistantForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseFormProps<TFieldValues, TContext>) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+type ToolCallContentPart<TArgs = unknown, TResult = unknown> = {
+    type: "tool-call";
+    toolCallId: string;
+    toolName: string;
+    args: TArgs;
+    result?: TResult;
+};
+
+type ToolRenderComponent<TArgs, TResult> = ComponentType<{
+    part: ToolCallContentPart<TArgs, TResult>;
+    status: "done" | "in_progress" | "error";
+}>;
 
 declare const formTools: {
     set_form_field: {
@@ -10,11 +22,11 @@ declare const formTools: {
             name: z.ZodString;
             value: z.ZodString;
         }, "strip", z.ZodTypeAny, {
-            value: string;
             name: string;
-        }, {
             value: string;
+        }, {
             name: string;
+            value: string;
         }>;
     };
     submit_form: {
@@ -23,4 +35,18 @@ declare const formTools: {
     };
 };
 
+type UseAssistantFormProps<TFieldValues extends FieldValues, TContext> = UseFormProps<TFieldValues, TContext> & {
+    assistant?: {
+        tools?: {
+            set_form_field?: {
+                render?: ToolRenderComponent<z.ZodType<typeof formTools.set_form_field>, unknown>;
+            };
+            submit_form?: {
+                render?: ToolRenderComponent<z.ZodType<typeof formTools.submit_form>, unknown>;
+            };
+        };
+    };
+};
+declare const useAssistantForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseAssistantFormProps<TFieldValues, TContext>) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+
 export { formTools, useAssistantForm };

package/dist/index.js

@@ -1,5 +1,8 @@
 // src/useAssistantForm.tsx
-import { useAssistantContext } from "@assistant-ui/react/experimental";
+import {
+  useAssistantContext,
+  useAssistantToolRenderer
+} from "@assistant-ui/react/experimental";
 import { useEffect } from "react";
 import {
   useForm
@@ -29,45 +32,63 @@ var useAssistantForm = (props) => {
     (c) => c.registerModelConfigProvider
   );
   useEffect(() => {
-    return registerModelConfigProvider(() => {
-      return {
-        system: `Form State:
+    const value = {
+      system: `Form State:
 ${JSON.stringify(form.getValues())}`,
-        tools: {
-          set_form_field: {
-            ...formTools.set_form_field,
-            execute: (args) => {
-              form.setValue(args.name, args.value);
-              return { success: true };
-            }
-          },
-          submit_form: {
-            ...formTools.submit_form,
-            execute: () => {
-              const { _names, _fields } = form.control;
-              for (const name of _names.mount) {
-                const field = _fields[name];
-                if (field?._f) {
-                  const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
-                  if (fieldReference instanceof HTMLElement) {
-                    const form2 = fieldReference.closest("form");
-                    if (form2) {
-                      form2.requestSubmit();
-                      return { success: true };
-                    }
+      tools: {
+        set_form_field: {
+          ...formTools.set_form_field,
+          execute: async (args) => {
+            form.setValue(args.name, args.value);
+            return { success: true };
+          }
+        },
+        submit_form: {
+          ...formTools.submit_form,
+          execute: async () => {
+            const { _names, _fields } = form.control;
+            for (const name of _names.mount) {
+              const field = _fields[name];
+              if (field?._f) {
+                const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
+                if (fieldReference instanceof HTMLElement) {
+                  const form2 = fieldReference.closest("form");
+                  if (form2) {
+                    form2.requestSubmit();
+                    return { success: true };
                   }
                 }
               }
-              return {
-                success: false,
-                message: "Unable retrieve the form element. This is a coding error."
-              };
             }
+            return {
+              success: false,
+              message: "Unable retrieve the form element. This is a coding error."
+            };
           }
         }
-      };
-    });
-  }, [form, registerModelConfigProvider]);
+      }
+    };
+    return registerModelConfigProvider(() => value);
+  }, [
+    form.control,
+    form.setValue,
+    form.getValues,
+    registerModelConfigProvider
+  ]);
+  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;
+  useAssistantToolRenderer(
+    renderFormFieldTool ? {
+      name: "set_form_field",
+      render: renderFormFieldTool
+    } : null
+  );
+  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;
+  useAssistantToolRenderer(
+    renderSubmitFormTool ? {
+      name: "submit_form",
+      render: renderSubmitFormTool
+    } : null
+  );
   return form;
 };
 export {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useAssistantForm.tsx","../src/formTools.tsx"],"sourcesContent":["\"use client\";\n\nimport { useAssistantContext } from \"@assistant-ui/react/experimental\";\nimport { useEffect } from \"react\";\nimport {\n  type FieldValues,\n  type UseFormProps,\n  type UseFormReturn,\n  useForm,\n} from \"react-hook-form\";\nimport { formTools } from \"./formTools\";\n\nexport const useAssistantForm = <\n  TFieldValues extends FieldValues = FieldValues,\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = undefined,\n>(\n  props?: UseFormProps<TFieldValues, TContext>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (c) => c.registerModelConfigProvider,\n  );\n\n  useEffect(() => {\n    return registerModelConfigProvider(() => {\n      return {\n        system: `Form State:\\n${JSON.stringify(form.getValues())}`,\n\n        tools: {\n          set_form_field: {\n            ...formTools.set_form_field,\n            execute: (args) => {\n              // biome-ignore lint/suspicious/noExplicitAny: TODO\n              form.setValue(args.name as any, args.value as any);\n\n              return { success: true };\n            },\n          },\n          submit_form: {\n            ...formTools.submit_form,\n            execute: () => {\n              const { _names, _fields } = form.control;\n              for (const name of _names.mount) {\n                const field = _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        },\n      };\n    });\n  }, [form, registerModelConfigProvider]);\n\n  return form;\n};\n","import { z } from \"zod\";\n\nexport const formTools = {\n  set_form_field: {\n    description:\n      \"Sets a form field. Call this function as soon as the user provides the data for each field.\",\n    parameters: z.object({\n      name: z.string(),\n      value: z.string(),\n    }),\n  },\n  submit_form: {\n    description: \"Submits the form. Confirm with user before submitting.\",\n    parameters: z.object({}),\n  },\n};\n"],"mappings":";AAEA,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B;AAAA,EAIE;AAAA,OACK;;;ACTP,SAAS,SAAS;AAEX,IAAM,YAAY;AAAA,EACvB,gBAAgB;AAAA,IACd,aACE;AAAA,IACF,YAAY,EAAE,OAAO;AAAA,MACnB,MAAM,EAAE,OAAO;AAAA,MACf,OAAO,EAAE,OAAO;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EACA,aAAa;AAAA,IACX,aAAa;AAAA,IACb,YAAY,EAAE,OAAO,CAAC,CAAC;AAAA,EACzB;AACF;;;ADHO,IAAM,mBAAmB,CAM9B,UAC8D;AAC9D,QAAM,OAAO,QAAoD,KAAK;AAEtE,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AAEA,YAAU,MAAM;AACd,WAAO,4BAA4B,MAAM;AACvC,aAAO;AAAA,QACL,QAAQ;AAAA,EAAgB,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC;AAAA,QAExD,OAAO;AAAA,UACL,gBAAgB;AAAA,YACd,GAAG,UAAU;AAAA,YACb,SAAS,CAAC,SAAS;AAEjB,mBAAK,SAAS,KAAK,MAAa,KAAK,KAAY;AAEjD,qBAAO,EAAE,SAAS,KAAK;AAAA,YACzB;AAAA,UACF;AAAA,UACA,aAAa;AAAA,YACX,GAAG,UAAU;AAAA,YACb,SAAS,MAAM;AACb,oBAAM,EAAE,QAAQ,QAAQ,IAAI,KAAK;AACjC,yBAAW,QAAQ,OAAO,OAAO;AAC/B,sBAAM,QAAQ,QAAQ,IAAI;AAC1B,oBAAI,OAAO,IAAI;AACb,wBAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAC9C,MAAM,GAAG,KAAK,CAAC,IACf,MAAM,GAAG;AAEb,sBAAI,0BAA0B,aAAa;AACzC,0BAAMA,QAAO,eAAe,QAAQ,MAAM;AAC1C,wBAAIA,OAAM;AACR,sBAAAA,MAAK,cAAc;AAEnB,6BAAO,EAAE,SAAS,KAAK;AAAA,oBACzB;AAAA,kBACF;AAAA,gBACF;AAAA,cACF;AAEA,qBAAO;AAAA,gBACL,SAAS;AAAA,gBACT,SACE;AAAA,cACJ;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,2BAA2B,CAAC;AAEtC,SAAO;AACT;","names":["form"]}
+{"version":3,"sources":["../src/useAssistantForm.tsx","../src/formTools.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ModelConfig,\n  useAssistantContext,\n  useAssistantToolRenderer,\n} from \"@assistant-ui/react/experimental\";\nimport { useEffect } from \"react\";\nimport {\n  type FieldValues,\n  type UseFormProps,\n  type UseFormReturn,\n  useForm,\n} from \"react-hook-form\";\nimport type { z } from \"zod\";\nimport type { ToolRenderComponent } from \"../../react/src/model-config/ToolRenderComponent\";\nimport { formTools } from \"./formTools\";\n\ntype UseAssistantFormProps<\n  TFieldValues extends FieldValues,\n  TContext,\n> = UseFormProps<TFieldValues, TContext> & {\n  assistant?: {\n    tools?: {\n      set_form_field?: {\n        render?: ToolRenderComponent<\n          z.ZodType<typeof formTools.set_form_field>,\n          unknown\n        >;\n      };\n      submit_form?: {\n        render?: ToolRenderComponent<\n          z.ZodType<typeof formTools.submit_form>,\n          unknown\n        >;\n      };\n    };\n  };\n};\n\nexport const useAssistantForm = <\n  TFieldValues extends FieldValues = FieldValues,\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  TContext = any,\n  TTransformedValues extends FieldValues | undefined = undefined,\n>(\n  props?: UseAssistantFormProps<TFieldValues, TContext>,\n): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {\n  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);\n\n  const { useModelConfig } = useAssistantContext();\n  const registerModelConfigProvider = useModelConfig(\n    (c) => c.registerModelConfigProvider,\n  );\n\n  useEffect(() => {\n    const value: ModelConfig = {\n      system: `Form State:\\n${JSON.stringify(form.getValues())}`,\n\n      tools: {\n        set_form_field: {\n          ...formTools.set_form_field,\n          execute: async (args) => {\n            // biome-ignore lint/suspicious/noExplicitAny: TODO\n            form.setValue(args.name as any, args.value as any);\n\n            return { success: true };\n          },\n        },\n        submit_form: {\n          ...formTools.submit_form,\n          execute: async () => {\n            const { _names, _fields } = form.control;\n            for (const name of _names.mount) {\n              const field = _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      },\n    };\n    return registerModelConfigProvider(() => value);\n  }, [\n    form.control,\n    form.setValue,\n    form.getValues,\n    registerModelConfigProvider,\n  ]);\n\n  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;\n  useAssistantToolRenderer(\n    renderFormFieldTool\n      ? {\n          name: \"set_form_field\",\n          render: renderFormFieldTool,\n        }\n      : null,\n  );\n\n  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;\n  useAssistantToolRenderer(\n    renderSubmitFormTool\n      ? {\n          name: \"submit_form\",\n          render: renderSubmitFormTool,\n        }\n      : null,\n  );\n\n  return form;\n};\n","import { z } from \"zod\";\n\nexport const formTools = {\n  set_form_field: {\n    description:\n      \"Sets a form field. Call this function as soon as the user provides the data for each field.\",\n    parameters: z.object({\n      name: z.string(),\n      value: z.string(),\n    }),\n  },\n  submit_form: {\n    description: \"Submits the form. Confirm with user before submitting.\",\n    parameters: z.object({}),\n  },\n};\n"],"mappings":";AAEA;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B;AAAA,EAIE;AAAA,OACK;;;ACbP,SAAS,SAAS;AAEX,IAAM,YAAY;AAAA,EACvB,gBAAgB;AAAA,IACd,aACE;AAAA,IACF,YAAY,EAAE,OAAO;AAAA,MACnB,MAAM,EAAE,OAAO;AAAA,MACf,OAAO,EAAE,OAAO;AAAA,IAClB,CAAC;AAAA,EACH;AAAA,EACA,aAAa;AAAA,IACX,aAAa;AAAA,IACb,YAAY,EAAE,OAAO,CAAC,CAAC;AAAA,EACzB;AACF;;;ADyBO,IAAM,mBAAmB,CAM9B,UAC8D;AAC9D,QAAM,OAAO,QAAoD,KAAK;AAEtE,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAC/C,QAAM,8BAA8B;AAAA,IAClC,CAAC,MAAM,EAAE;AAAA,EACX;AAEA,YAAU,MAAM;AACd,UAAM,QAAqB;AAAA,MACzB,QAAQ;AAAA,EAAgB,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC;AAAA,MAExD,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd,GAAG,UAAU;AAAA,UACb,SAAS,OAAO,SAAS;AAEvB,iBAAK,SAAS,KAAK,MAAa,KAAK,KAAY;AAEjD,mBAAO,EAAE,SAAS,KAAK;AAAA,UACzB;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX,GAAG,UAAU;AAAA,UACb,SAAS,YAAY;AACnB,kBAAM,EAAE,QAAQ,QAAQ,IAAI,KAAK;AACjC,uBAAW,QAAQ,OAAO,OAAO;AAC/B,oBAAM,QAAQ,QAAQ,IAAI;AAC1B,kBAAI,OAAO,IAAI;AACb,sBAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAC9C,MAAM,GAAG,KAAK,CAAC,IACf,MAAM,GAAG;AAEb,oBAAI,0BAA0B,aAAa;AACzC,wBAAMA,QAAO,eAAe,QAAQ,MAAM;AAC1C,sBAAIA,OAAM;AACR,oBAAAA,MAAK,cAAc;AAEnB,2BAAO,EAAE,SAAS,KAAK;AAAA,kBACzB;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAEA,mBAAO;AAAA,cACL,SAAS;AAAA,cACT,SACE;AAAA,YACJ;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,WAAO,4BAA4B,MAAM,KAAK;AAAA,EAChD,GAAG;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,OAAO,WAAW,OAAO,gBAAgB;AACrE;AAAA,IACE,sBACI;AAAA,MACE,MAAM;AAAA,MACN,QAAQ;AAAA,IACV,IACA;AAAA,EACN;AAEA,QAAM,uBAAuB,OAAO,WAAW,OAAO,aAAa;AACnE;AAAA,IACE,uBACI;AAAA,MACE,MAAM;AAAA,MACN,QAAQ;AAAA,IACV,IACA;AAAA,EACN;AAEA,SAAO;AACT;","names":["form"]}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@assistant-ui/react-hook-form",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "MIT",
   "type": "module",
   "peerDependencies": {
-    "@assistant-ui/react": "^0.1",
+    "@assistant-ui/react": "^0.1.5",
     "react-hook-form": "^7.x.x",
     "@types/react": "*",
     "react": "^18"
@@ -19,11 +19,20 @@
   },
   "devDependencies": {
     "tsup": "^8.1.0",
-    "@assistant-ui/react": "0.1.1",
+    "@assistant-ui/react": "0.1.5",
     "@assistant-ui/tsconfig": "0.0.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
+  },
+  "homepage": "https://assistant-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yonom/assistant-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Yonom/assistant-ui/issues"
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"

package/src/useAssistantForm.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { useAssistantContext } from "@assistant-ui/react/experimental";
+import {
+  type ModelConfig,
+  useAssistantContext,
+  useAssistantToolRenderer,
+} from "@assistant-ui/react/experimental";
 import { useEffect } from "react";
 import {
   type FieldValues,
@@ -8,15 +12,39 @@ import {
   type UseFormReturn,
   useForm,
 } from "react-hook-form";
+import type { z } from "zod";
+import type { ToolRenderComponent } from "../../react/src/model-config/ToolRenderComponent";
 import { formTools } from "./formTools";
 
+type UseAssistantFormProps<
+  TFieldValues extends FieldValues,
+  TContext,
+> = UseFormProps<TFieldValues, TContext> & {
+  assistant?: {
+    tools?: {
+      set_form_field?: {
+        render?: ToolRenderComponent<
+          z.ZodType<typeof formTools.set_form_field>,
+          unknown
+        >;
+      };
+      submit_form?: {
+        render?: ToolRenderComponent<
+          z.ZodType<typeof formTools.submit_form>,
+          unknown
+        >;
+      };
+    };
+  };
+};
+
 export const useAssistantForm = <
   TFieldValues extends FieldValues = FieldValues,
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   TContext = any,
   TTransformedValues extends FieldValues | undefined = undefined,
 >(
-  props?: UseFormProps<TFieldValues, TContext>,
+  props?: UseAssistantFormProps<TFieldValues, TContext>,
 ): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {
   const form = useForm<TFieldValues, TContext, TTransformedValues>(props);
 
@@ -26,53 +54,77 @@ export const useAssistantForm = <
   );
 
   useEffect(() => {
-    return registerModelConfigProvider(() => {
-      return {
-        system: `Form State:\n${JSON.stringify(form.getValues())}`,
+    const value: ModelConfig = {
+      system: `Form State:\n${JSON.stringify(form.getValues())}`,
 
-        tools: {
-          set_form_field: {
-            ...formTools.set_form_field,
-            execute: (args) => {
-              // biome-ignore lint/suspicious/noExplicitAny: TODO
-              form.setValue(args.name as any, args.value as any);
+      tools: {
+        set_form_field: {
+          ...formTools.set_form_field,
+          execute: async (args) => {
+            // biome-ignore lint/suspicious/noExplicitAny: TODO
+            form.setValue(args.name as any, args.value as any);
 
-              return { success: true };
-            },
+            return { success: true };
           },
-          submit_form: {
-            ...formTools.submit_form,
-            execute: () => {
-              const { _names, _fields } = form.control;
-              for (const name of _names.mount) {
-                const field = _fields[name];
-                if (field?._f) {
-                  const fieldReference = Array.isArray(field._f.refs)
-                    ? field._f.refs[0]
-                    : field._f.ref;
+        },
+        submit_form: {
+          ...formTools.submit_form,
+          execute: async () => {
+            const { _names, _fields } = form.control;
+            for (const name of _names.mount) {
+              const field = _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();
+                if (fieldReference instanceof HTMLElement) {
+                  const form = fieldReference.closest("form");
+                  if (form) {
+                    form.requestSubmit();
 
-                      return { success: true };
-                    }
+                    return { success: true };
                   }
                 }
               }
+            }
 
-              return {
-                success: false,
-                message:
-                  "Unable retrieve the form element. This is a coding error.",
-              };
-            },
+            return {
+              success: false,
+              message:
+                "Unable retrieve the form element. This is a coding error.",
+            };
           },
         },
-      };
-    });
-  }, [form, registerModelConfigProvider]);
+      },
+    };
+    return registerModelConfigProvider(() => value);
+  }, [
+    form.control,
+    form.setValue,
+    form.getValues,
+    registerModelConfigProvider,
+  ]);
+
+  const renderFormFieldTool = props?.assistant?.tools?.set_form_field?.render;
+  useAssistantToolRenderer(
+    renderFormFieldTool
+      ? {
+          name: "set_form_field",
+          render: renderFormFieldTool,
+        }
+      : null,
+  );
+
+  const renderSubmitFormTool = props?.assistant?.tools?.submit_form?.render;
+  useAssistantToolRenderer(
+    renderSubmitFormTool
+      ? {
+          name: "submit_form",
+          render: renderSubmitFormTool,
+        }
+      : null,
+  );
 
   return form;
 };