From b33d7f5b987139b3e23ea03c4dc924be8c91b7a3 Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Wed, 19 Jun 2024 20:56:29 -0700
Subject: [PATCH] docs: add examples tab (#257)

---
 apps/www/components/Home.tsx                  |  2 +-
 apps/www/pages/_meta.tsx                      |  7 ++++
 apps/www/pages/docs/getting-started.mdx       |  2 +-
 apps/www/pages/examples.mdx                   | 36 +++++++++++++++++++
 apps/www/pages/onboarding.mdx                 |  4 ---
 apps/www/tsconfig.json                        |  2 +-
 .../src/primitives/composer/ComposerInput.tsx |  3 +-
 7 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 apps/www/pages/examples.mdx
 delete mode 100644 apps/www/pages/onboarding.mdx

diff --git a/apps/www/components/Home.tsx b/apps/www/components/Home.tsx
index e1ca11e2a..4b6c1e38f 100644
--- a/apps/www/components/Home.tsx
+++ b/apps/www/components/Home.tsx
@@ -53,7 +53,7 @@ export default function Home() {
 
       <div className="mb-8 flex justify-center gap-2">
         <Button asChild>
-          <Link href="/onboarding">Get Started</Link>
+          <Link href="/docs/getting-started">Get Started</Link>
         </Button>
       </div>
       <div className="mx-auto flex w-full max-w-screen-xl flex-col">
diff --git a/apps/www/pages/_meta.tsx b/apps/www/pages/_meta.tsx
index 827ef5023..c3e43d6f0 100644
--- a/apps/www/pages/_meta.tsx
+++ b/apps/www/pages/_meta.tsx
@@ -28,4 +28,11 @@ export default {
       breadcrumb: false,
     },
   },
+  examples: {
+    title: "Examples",
+    type: "page",
+    theme: {
+      breadcrumb: false,
+    },
+  },
 };
diff --git a/apps/www/pages/docs/getting-started.mdx b/apps/www/pages/docs/getting-started.mdx
index 3fa228a5a..c473a1225 100644
--- a/apps/www/pages/docs/getting-started.mdx
+++ b/apps/www/pages/docs/getting-started.mdx
@@ -12,10 +12,10 @@ import architecture from "../../assets/docs/architecture.png";
 
 <Image src={architecture} height={300} className="dark:invert dark:hue-rotate-180 my-2 mx-auto" />
 
+The Runtime and UI Components each require independent setup and both must be set up.
 
 ## Setup
 
-
 The recommended way to get started is with the following stack:
 
 - NextJS
diff --git a/apps/www/pages/examples.mdx b/apps/www/pages/examples.mdx
new file mode 100644
index 000000000..8f6349371
--- /dev/null
+++ b/apps/www/pages/examples.mdx
@@ -0,0 +1,36 @@
+---
+title: Examples
+---
+
+### RSC Example
+
+This is an example of how to use the Vercel AI SDK RSC Runtime.
+
+- [RSC Example App](https://assistant-ui-rsc-example.vercel.app/)
+- [Code](https://github.com/Yonom/assistant-ui-rsc-example)
+
+### eCommerce Example
+
+This is an example of an eCommerce chatbot that can help users find products. Built with Vercel AI SDK RSC Runtime.
+
+- [Demo](https://x.com/MatthewHeartful/status/1803317502933606698)
+- [Code](https://github.com/Yonom/assistant-ui/tree/main/examples/search-agent-for-e-commerce)
+
+### React Hook Form Example
+
+This is an example of how to use `@assistant-ui/react-hook-form`.
+
+- [React Hook Form Example App](https://assistant-ui-form-demo.vercel.app/)
+- [Code](https://github.com/Yonom/assistant-ui/tree/main/examples/with-react-hook-form)
+
+### Custom REST API Example
+
+This is an example of how to use `@assistant-ui/react` with a custom REST API.
+
+- [Code](https://github.com/Yonom/assistant-ui-custom-api)
+
+### Thread History Persistence example
+
+This is an example of how to restore the thread history using `@assistant-ui/react-ai-sdk` and Vercel AI SDK.
+
+- [Code](https://github.com/Yonom/assistant-ui-assistant-api-history)
\ No newline at end of file
diff --git a/apps/www/pages/onboarding.mdx b/apps/www/pages/onboarding.mdx
deleted file mode 100644
index 183a5598a..000000000
--- a/apps/www/pages/onboarding.mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-import Onboarding from '../components/Onboarding'
-
-
-<Onboarding />
\ No newline at end of file
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index 4945b6755..4c278e056 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -17,6 +17,6 @@
     "strictNullChecks": true,
     "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "pages/examples.mdx"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/react/src/primitives/composer/ComposerInput.tsx b/packages/react/src/primitives/composer/ComposerInput.tsx
index 9faa51e08..01ce50bfa 100644
--- a/packages/react/src/primitives/composer/ComposerInput.tsx
+++ b/packages/react/src/primitives/composer/ComposerInput.tsx
@@ -64,7 +64,7 @@ export const ComposerInput = forwardRef<
     const focus = useCallback(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
-
+      console.log("focus");
       textarea.focus();
       textarea.setSelectionRange(
         textareaRef.current.value.length,
@@ -85,6 +85,7 @@ export const ComposerInput = forwardRef<
         value={value}
         {...rest}
         ref={ref}
+        autoFocus={autoFocus}
         disabled={disabled}
         onChange={composeEventHandlers(onChange, (e) => {
           const composerState = useComposer.getState();