@assistant-ui/react-hook-form 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Simon Farshid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# `assistant-ui`
+
+`assistant-ui` is a set of React components for AI chat.
+
+- [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>
+  );
+}
+```

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@assistant-ui/react-hook-form",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "peerDependencies": {
+    "@assistant-ui/react": "^0.1",
+    "react-hook-form": "^7.x.x",
+    "@types/react": "*",
+    "react": "^18"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@assistant-ui/react": "0.1.1",
+    "@assistant-ui/tsconfig": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublish": "cp ../../README.md ./README.md"
+  }
+}

package/src/formTools.tsx

@@ -0,0 +1,16 @@
+import { z } from "zod";
+
+export const 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({}),
+  },
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { useAssistantForm } from "./useAssistantForm";
+export { formTools } from "./formTools";

package/src/useAssistantForm.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useAssistantContext } from "@assistant-ui/react/experimental";
+import { useEffect } from "react";
+import {
+  type FieldValues,
+  type UseFormProps,
+  type UseFormReturn,
+  useForm,
+} from "react-hook-form";
+import { formTools } from "./formTools";
+
+export const useAssistantForm = <
+  TFieldValues extends FieldValues = FieldValues,
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  TContext = any,
+  TTransformedValues extends FieldValues | undefined = undefined,
+>(
+  props?: UseFormProps<TFieldValues, TContext>,
+): UseFormReturn<TFieldValues, TContext, TTransformedValues> => {
+  const form = useForm<TFieldValues, TContext, TTransformedValues>(props);
+
+  const { useModelConfig } = useAssistantContext();
+  const registerModelConfigProvider = useModelConfig(
+    (c) => c.registerModelConfigProvider,
+  );
+
+  useEffect(() => {
+    return registerModelConfigProvider(() => {
+      return {
+        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);
+
+              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 form = fieldReference.closest("form");
+                    if (form) {
+                      form.requestSubmit();
+
+                      return { success: true };
+                    }
+                  }
+                }
+              }
+
+              return {
+                success: false,
+                message:
+                  "Unable retrieve the form element. This is a coding error.",
+              };
+            },
+          },
+        },
+      };
+    });
+  }, [form, registerModelConfigProvider]);
+
+  return form;
+};

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@assistant-ui/tsconfig/base.json",
+  "compilerOptions": {
+    "paths": {
+      "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/react/*": ["../../packages/react/src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}