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

package/README.md

@@ -1,39 +1,5 @@
-# `assistant-ui`
+# `@assistant-ui/react-hook-form`
 
-`assistant-ui` is a set of React components for AI chat.
+React Hook Form integration for `@assistant-ui/react`.
 
-- [Discord](https://discord.gg/S9dwgCNEFs)
-- [Website](https://assistant-ui.com/)
-- [Demo](https://assistant-ui-rsc-example.vercel.app/)
-
-## Documentation
-
-- [Documentation](https://www.assistant-ui.com/docs/getting-started)
-
-## Minimal Example with Vercel AI SDK
-
-```sh
-npx assistant-ui@latest add modal
-```
-
-```tsx
-"use client";
-
-import { useChat } from "@ai-sdk/react";
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
-import { AssistantModal } from "@/components/ui/assistant-ui/assistant-modal";
-
-export default const MyApp = () => {
-  const chat = useChat({ 
-    api: "/api/chat" // your backend route
-  });
-  const runtime = useVercelUseChatRuntime(chat);
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <AssistantModal />
-    </AssistantRuntimeProvider>
-  );
-}
-```
+Simply replace `useForm` with `useAssistantForm` to give the chatbot the ability to interact with your form.

package/dist/index.cjs

@@ -0,0 +1,103 @@
+"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)(() => {
+    return registerModelConfigProvider(() => {
+      return {
+        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 };
+                    }
+                  }
+                }
+              }
+              return {
+                success: false,
+                message: "Unable retrieve the form element. This is a coding error."
+              };
+            }
+          }
+        }
+      };
+    });
+  }, [form, registerModelConfigProvider]);
+  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 { 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"]}

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+
+declare const useAssistantForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseFormProps<TFieldValues, TContext>) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+
+declare const formTools: {
+    set_form_field: {
+        description: string;
+        parameters: z.ZodObject<{
+            name: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            value: string;
+            name: string;
+        }, {
+            value: string;
+            name: string;
+        }>;
+    };
+    submit_form: {
+        description: string;
+        parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    };
+};
+
+export { formTools, useAssistantForm };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+
+declare const useAssistantForm: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseFormProps<TFieldValues, TContext>) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+
+declare const formTools: {
+    set_form_field: {
+        description: string;
+        parameters: z.ZodObject<{
+            name: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            value: string;
+            name: string;
+        }, {
+            value: string;
+            name: string;
+        }>;
+    };
+    submit_form: {
+        description: string;
+        parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+    };
+};
+
+export { formTools, useAssistantForm };

package/dist/index.js

@@ -0,0 +1,77 @@
+// src/useAssistantForm.tsx
+import { useAssistantContext } 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(() => {
+    return registerModelConfigProvider(() => {
+      return {
+        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 };
+                    }
+                  }
+                }
+              }
+              return {
+                success: false,
+                message: "Unable retrieve the form element. This is a coding error."
+              };
+            }
+          }
+        }
+      };
+    });
+  }, [form, registerModelConfigProvider]);
+  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 { 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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-hook-form",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "type": "module",
   "peerDependencies": {
@@ -18,6 +18,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "tsup": "^8.1.0",
     "@assistant-ui/react": "0.1.1",
     "@assistant-ui/tsconfig": "0.0.0"
   },
@@ -25,6 +26,6 @@
     "access": "public"
   },
   "scripts": {
-    "prepublish": "cp ../../README.md ./README.md"
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap"
   }
 }