From 86d4f7f70d40e67f57fa1574164cfd5660ac27d5 Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Thu, 20 Jun 2024 11:51:10 -0700
Subject: [PATCH] feat: add UseAssistantFormProps type (#261)

---
 .changeset/ten-brooms-rhyme.md                |  5 ++
 apps/www/components/docs/ParametersTable.tsx  | 59 +++++++++++--------
 .../integrations/react-hook-form.mdx          |  1 +
 packages/react-hook-form/src/index.ts         |  5 +-
 .../react-hook-form/src/useAssistantForm.tsx  |  2 +-
 5 files changed, 47 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/ten-brooms-rhyme.md

diff --git a/.changeset/ten-brooms-rhyme.md b/.changeset/ten-brooms-rhyme.md
new file mode 100644
index 000000000..f1f3d6f5d
--- /dev/null
+++ b/.changeset/ten-brooms-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-hook-form": patch
+---
+
+feat: add UseAssistantFormProps type
diff --git a/apps/www/components/docs/ParametersTable.tsx b/apps/www/components/docs/ParametersTable.tsx
index 24240c92e..ff3080657 100644
--- a/apps/www/components/docs/ParametersTable.tsx
+++ b/apps/www/components/docs/ParametersTable.tsx
@@ -5,10 +5,7 @@ type ParameterDef = {
   type: string;
   description: string;
   required?: boolean;
-  children?: Array<{
-    type: string;
-    parameters: Array<ParameterDef>;
-  }>;
+  children?: Array<ParametersTableProps>;
 };
 
 type ParameterProps = {
@@ -35,36 +32,52 @@ const Parameter: FC<ParameterProps> = ({ parameter, isLast }) => {
         <p className="text-foreground/70 text-sm">{parameter.description}</p>
       </div>
       {parameter.children?.map((property) => (
-        <div
-          key={property.type}
-          className="relative m-2 flex flex-col rounded-lg border px-3"
-        >
-          {!!property.type && (
-            <h3 className="bg-secondary p-2 font-mono text-foreground/70 text-xs">
-              {property.type}
-            </h3>
-          )}
-          <ParametersTable parameters={property.parameters} />
-        </div>
+        <ParametersBox key={property.type} {...property} />
       ))}
     </div>
   );
 };
 
+const ParametersList = ({
+  parameters,
+}: { parameters: Array<ParameterDef> }) => {
+  return parameters.map((parameter, idx) => (
+    <Parameter
+      key={parameter.name}
+      parameter={parameter}
+      isLast={idx === parameters.length - 1}
+    />
+  ));
+};
+const ParametersBox: FC<ParametersTableProps> = ({ type, parameters }) => {
+  return (
+    <div className="relative m-2 mb-0 flex flex-col rounded-lg border">
+      {!!type && (
+        <h3 className="-translate-y-1/2 absolute right-3 z-10 rounded-md border bg-background px-4 py-2 font-mono font-semibold text-foreground/70 text-xs">
+          {type}
+        </h3>
+      )}
+      <ParametersList parameters={parameters} />
+    </div>
+  );
+};
+
 type ParametersTableProps = {
+  type?: string;
   parameters: Array<ParameterDef>;
 };
 
-export const ParametersTable: FC<ParametersTableProps> = ({ parameters }) => {
+export const ParametersTable: FC<ParametersTableProps> = ({
+  type,
+  parameters,
+}) => {
   return (
     <div className="-mx-3">
-      {parameters.map((parameter, idx) => (
-        <Parameter
-          key={parameter.name}
-          parameter={parameter}
-          isLast={idx === parameters.length - 1}
-        />
-      ))}
+      {type ? (
+        <ParametersBox type={type} parameters={parameters} />
+      ) : (
+        <ParametersList parameters={parameters} />
+      )}
     </div>
   );
 };
diff --git a/apps/www/pages/reference/integrations/react-hook-form.mdx b/apps/www/pages/reference/integrations/react-hook-form.mdx
index d7188ccbc..4e5ca3504 100644
--- a/apps/www/pages/reference/integrations/react-hook-form.mdx
+++ b/apps/www/pages/reference/integrations/react-hook-form.mdx
@@ -24,6 +24,7 @@ Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/reac
 #### Properties
 
 <ParametersTable
+  type="UseAssistantFormProps"
   parameters={[
     {
       name: "assistant",
diff --git a/packages/react-hook-form/src/index.ts b/packages/react-hook-form/src/index.ts
index f9cb0e585..edbea09ed 100644
--- a/packages/react-hook-form/src/index.ts
+++ b/packages/react-hook-form/src/index.ts
@@ -1,2 +1,5 @@
-export { useAssistantForm } from "./useAssistantForm";
+export {
+  useAssistantForm,
+  type UseAssistantFormProps,
+} from "./useAssistantForm";
 export { formTools } from "./formTools";
diff --git a/packages/react-hook-form/src/useAssistantForm.tsx b/packages/react-hook-form/src/useAssistantForm.tsx
index dda54ed83..d400e5f26 100644
--- a/packages/react-hook-form/src/useAssistantForm.tsx
+++ b/packages/react-hook-form/src/useAssistantForm.tsx
@@ -16,7 +16,7 @@ import {
 import type { z } from "zod";
 import { formTools } from "./formTools";
 
-type UseAssistantFormProps<
+export type UseAssistantFormProps<
   TFieldValues extends FieldValues,
   TContext,
 > = UseFormProps<TFieldValues, TContext> & {