From d8a3abecc7abbcee5c0d51e9b14200ed21926575 Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Wed, 19 Jun 2024 23:46:06 -0700
Subject: [PATCH] docs: add parameters table component and document
 react-hook-form parameters (#258)

---
 apps/www/components/docs/ParametersTable.tsx  | 70 +++++++++++++++++++
 apps/www/components/docs/index.ts             |  1 +
 .../pages/docs/runtimes/pick-a-runtime.mdx    |  2 +-
 .../integrations/react-hook-form.mdx          | 66 ++++++++++++++++-
 4 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 apps/www/components/docs/ParametersTable.tsx

diff --git a/apps/www/components/docs/ParametersTable.tsx b/apps/www/components/docs/ParametersTable.tsx
new file mode 100644
index 000000000..8d21bfbe0
--- /dev/null
+++ b/apps/www/components/docs/ParametersTable.tsx
@@ -0,0 +1,70 @@
+import type { FC } from "react";
+
+type ParameterDef = {
+  name: string;
+  type: string;
+  description: string;
+  isOptional?: boolean;
+  children?: Array<{
+    type: string;
+    parameters: Array<ParameterDef>;
+  }>;
+};
+
+type ParameterProps = {
+  parameter: ParameterDef;
+  isLast: boolean;
+};
+
+const Parameter: FC<ParameterProps> = ({ parameter, isLast }) => {
+  return (
+    <div
+      className={`flex flex-col gap-1 px-3 py-3${!isLast ? " border-b" : ""}`}
+    >
+      <div className="relative flex gap-2">
+        <h3 className="font-mono font-semibold text-sm">
+          {parameter.name}
+          {parameter.isOptional && "?"}:
+        </h3>
+        <div className="no-scrollbar w-full overflow-x-scroll text-nowrap pr-12 font-mono text-foreground/70 text-sm">
+          {parameter.type}
+        </div>
+        <div className="pointer-events-none absolute top-0 right-0 h-5 w-12 bg-gradient-to-r from-white/0 to-white/100" />
+      </div>
+      <div>
+        <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>
+      ))}
+    </div>
+  );
+};
+
+type ParametersTableProps = {
+  parameters: Array<ParameterDef>;
+};
+
+export const ParametersTable: FC<ParametersTableProps> = ({ parameters }) => {
+  return (
+    <div className="-mx-3">
+      {parameters.map((parameter, idx) => (
+        <Parameter
+          key={parameter.name}
+          parameter={parameter}
+          isLast={idx === parameters.length - 1}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/apps/www/components/docs/index.ts b/apps/www/components/docs/index.ts
index 2fba08ce1..15a370a8d 100644
--- a/apps/www/components/docs/index.ts
+++ b/apps/www/components/docs/index.ts
@@ -1,3 +1,4 @@
 export { PropsTable } from "./PropsTable";
 export { KeyboardTable } from "./KeyboardTable";
 export { DataAttributesTable } from "./DataAttributesTable";
+export { ParametersTable } from "./ParametersTable";
diff --git a/apps/www/pages/docs/runtimes/pick-a-runtime.mdx b/apps/www/pages/docs/runtimes/pick-a-runtime.mdx
index 456d22296..e51d443f2 100644
--- a/apps/www/pages/docs/runtimes/pick-a-runtime.mdx
+++ b/apps/www/pages/docs/runtimes/pick-a-runtime.mdx
@@ -4,4 +4,4 @@ title: Picking a Runtime
 
 If you are already using the Vercel AI SDK, assistant-ui can be used as a drop-in replacement for your existing UI. Simply follow the instructions for the API you are using (`useChat`, `useAssistant` or `ai/rsc`).
 
-If you are not using the Vercel AI SDK, it is currently recommended to start with Vercel AI SDK UI `useChat`. Simply follow the [useChat](/docs/runtimes/vercel-ai-sdk-ui/use-chat) guide.
\ No newline at end of file
+If you are not using the Vercel AI SDK, it is currently recommended to start with Vercel AI SDK UI `useChat`. Simply follow the [useChat](/docs/runtimes/vercel-ai-sdk/use-chat) guide.
\ No newline at end of file
diff --git a/apps/www/pages/reference/integrations/react-hook-form.mdx b/apps/www/pages/reference/integrations/react-hook-form.mdx
index 076593bdd..7182ba064 100644
--- a/apps/www/pages/reference/integrations/react-hook-form.mdx
+++ b/apps/www/pages/reference/integrations/react-hook-form.mdx
@@ -3,6 +3,8 @@ title: "@assistant-ui/react-hook-form"
 description: A React Hook Form integration for @assistant-ui.
 --- 
 
+import { ParametersTable } from "@/components/docs";
+
 ## API Reference
 
 ### `useAssistantForm`
@@ -19,7 +21,69 @@ Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/reac
   });
 ```
 
-{/** TODO document assistant.tools property */}
+#### Properties
+
+<ParametersTable
+  parameters={[
+    {
+      name: "assistant",
+      type: 'object',
+      description: "Configuration for useAssistantForm",
+      children: [
+        {
+          parameters: [
+            {
+              name: "tools",
+              type: 'object',
+              description: "Tools configuration for useAssistantForm",
+              children: [
+                {
+                  parameters: [
+                    {
+                      name: "set_form_field",
+                      type: 'object',
+                      description:
+                        "Configuration for the set_form_field tool",
+                      children: [
+                        {
+                          parameters: [
+                            {
+                              name: "renderer",
+                              type: "ToolContentPartRenderer<{ name: string; value: string; }, {}>",
+                              description:
+                                "The component to render when set_form_field is called.",
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                    {
+                      name: "submit_form",
+                      type: 'object',
+                      description: "Configuration for the submit_form tool",
+                      children: [
+                        {
+                          parameters: [
+                            {
+                              name: "renderer",
+                              type: "ToolContentPartRenderer<{}, {}>",
+                              description:
+                                "The component to render when submit_form is called.",
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+/>
 
 ### `formTools`