@assistant-ui/react-hook-form 0.0.3 → 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

@@ -1,5 +1,13 @@
 # @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

package/dist/index.cjs

@@ -0,0 +1,121 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  formTools: () => formTools,
+  useAssistantForm: () => useAssistantForm
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useAssistantForm.tsx
+var import_experimental = require("@assistant-ui/react/experimental");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+
+// src/formTools.tsx
+var import_zod = require("zod");
+var formTools = {
+  set_form_field: {
+    description: "Sets a form field. Call this function as soon as the user provides the data for each field.",
+    parameters: import_zod.z.object({
+      name: import_zod.z.string(),
+      value: import_zod.z.string()
+    })
+  },
+  submit_form: {
+    description: "Submits the form. Confirm with user before submitting.",
+    parameters: import_zod.z.object({})
+  }
+};
+
+// src/useAssistantForm.tsx
+var useAssistantForm = (props) => {
+  const form = (0, import_react_hook_form.useForm)(props);
+  const { useModelConfig } = (0, import_experimental.useAssistantContext)();
+  const registerModelConfigProvider = useModelConfig(
+    (c) => c.registerModelConfigProvider
+  );
+  (0, import_react.useEffect)(() => {
+    const value = {
+      system: `Form State:
+${JSON.stringify(form.getValues())}`,
+      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 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:
+0 && (module.exports = {
+  formTools,
+  useAssistantForm
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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 {\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

@@ -0,0 +1,52 @@
+import { FieldValues, UseFormReturn, UseFormProps } from 'react-hook-form';
+import { z } from 'zod';
+import { ComponentType } from 'react';
+
+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: {
+        description: string;
+        parameters: z.ZodObject<{
+            name: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            name: string;
+            value: string;
+        }, {
+            name: string;
+            value: string;
+        }>;
+    };
+    submit_form: {
+        description: string;
+        parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    };
+};
+
+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

@@ -0,0 +1,52 @@
+import { FieldValues, UseFormReturn, UseFormProps } from 'react-hook-form';
+import { z } from 'zod';
+import { ComponentType } from 'react';
+
+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: {
+        description: string;
+        parameters: z.ZodObject<{
+            name: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            name: string;
+            value: string;
+        }, {
+            name: string;
+            value: string;
+        }>;
+    };
+    submit_form: {
+        description: string;
+        parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    };
+};
+
+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

@@ -0,0 +1,98 @@
+// src/useAssistantForm.tsx
+import {
+  useAssistantContext,
+  useAssistantToolRenderer
+} from "@assistant-ui/react/experimental";
+import { useEffect } from "react";
+import {
+  useForm
+} from "react-hook-form";
+
+// src/formTools.tsx
+import { z } from "zod";
+var formTools = {
+  set_form_field: {
+    description: "Sets a form field. Call this function as soon as the user provides the data for each field.",
+    parameters: z.object({
+      name: z.string(),
+      value: z.string()
+    })
+  },
+  submit_form: {
+    description: "Submits the form. Confirm with user before submitting.",
+    parameters: z.object({})
+  }
+};
+
+// src/useAssistantForm.tsx
+var useAssistantForm = (props) => {
+  const form = useForm(props);
+  const { useModelConfig } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (c) => c.registerModelConfigProvider
+  );
+  useEffect(() => {
+    const value = {
+      system: `Form State:
+${JSON.stringify(form.getValues())}`,
+      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 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 {
+  formTools,
+  useAssistantForm
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"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.3",
+  "version": "0.0.4",
   "license": "MIT",
   "type": "module",
   "peerDependencies": {
-    "@assistant-ui/react": "^0.1.3",
+    "@assistant-ui/react": "^0.1.5",
     "react-hook-form": "^7.x.x",
     "@types/react": "*",
     "react": "^18"
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "tsup": "^8.1.0",
-    "@assistant-ui/react": "0.1.3",
+    "@assistant-ui/react": "0.1.5",
     "@assistant-ui/tsconfig": "0.0.0"
   },
   "publishConfig": {

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: async (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: 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;
+        },
+        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;
 };