docs: new migrate everything to new website (#424)

.gitignore

@@ -30,7 +30,7 @@ out/
 # production
 build
 dist
-apps/www/public/registry/
+apps/docs/public/registry/
 
 # turbo
 .turbo

apps/docs/.map.ts

@@ -0,0 +1,4 @@
+/** Auto-generated **/
+declare const map: Record<string, unknown>
+
+export { map }

apps/docs/app/(home)/examples/page.tsx

@@ -0,0 +1,89 @@
+const Examples = () => {
+  return (
+    <div className="prose self-center py-12">
+      <h1>Examples</h1>
+
+      <h3>RSC Example</h3>
+      <p>This is an example of how to use the Vercel AI SDK RSC Runtime.</p>
+      <ul>
+        <li>
+          <a href="https://assistant-ui-rsc-example.vercel.app/">
+            RSC Example App
+          </a>
+        </li>
+        <li>
+          <a href="https://github.com/Yonom/assistant-ui-rsc-example">Code</a>
+        </li>
+      </ul>
+
+      <h3>eCommerce Example</h3>
+      <p>
+        This is an example of an eCommerce chatbot that can help users find
+        products. Built with Vercel AI SDK RSC Runtime.
+      </p>
+      <ul>
+        <li>
+          <a href="https://x.com/MatthewHeartful/status/1803317502933606698">
+            Demo
+          </a>
+        </li>
+        <li>
+          <a href="https://github.com/Yonom/assistant-ui/tree/main/examples/search-agent-for-e-commerce">
+            Code
+          </a>
+        </li>
+      </ul>
+
+      <h3>Inline Suggestions Example</h3>
+      <p>This is an example of how to use inline suggestions.</p>
+      <ul>
+        <li>
+          <a href="https://github.com/Yonom/assistant-ui/tree/main/examples/with-inline-suggestions">
+            Code
+          </a>
+        </li>
+      </ul>
+
+      <h3>React Hook Form Example</h3>
+      <p>This is an example of how to use @assistant-ui/react-hook-form.</p>
+      <ul>
+        <li>
+          <a href="https://assistant-ui-form-demo.vercel.app/">
+            React Hook Form Example App
+          </a>
+        </li>
+        <li>
+          <a href="https://github.com/Yonom/assistant-ui/tree/main/examples/with-react-hook-form">
+            Code
+          </a>
+        </li>
+      </ul>
+
+      <h3>Custom REST API Example</h3>
+      <p>
+        This is an example of how to use @assistant-ui/react with a custom REST
+        API.
+      </p>
+      <ul>
+        <li>
+          <a href="https://github.com/Yonom/assistant-ui-custom-api">Code</a>
+        </li>
+      </ul>
+
+      <h3>Thread History Persistence example</h3>
+      <p>
+        This is an example of how to restore the thread history using
+        @assistant-ui/react-ai-sdk and Vercel AI SDK.
+      </p>
+      <ul>
+        <li>
+          <a href="https://github.com/Yonom/assistant-ui-assistant-api-history">
+            Code
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Examples;

apps/docs/app/(home)/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Layout } from "fumadocs-ui/layout";
+import { baseOptions } from "../docs/layout.config";
+
+export default function HomeLayout({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  return <Layout {...baseOptions}>{children}</Layout>;
+}

apps/docs/app/(home)/page.tsx

@@ -0,0 +1,5 @@
+import Home from "@/components/Home";
+
+export default function HomePage() {
+  return <Home />;
+}

apps/docs/app/api/chat/route.ts

@@ -0,0 +1,24 @@
+import { createOpenAI } from "@ai-sdk/openai";
+import { streamText } from "ai";
+
+const openai = createOpenAI({
+  baseURL: process.env["OPENAI_BASE_URL"] as string,
+});
+
+export const runtime = "edge";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = await streamText({
+    model: openai("gpt-3.5-turbo"),
+    messages: [
+      {
+        role: "system",
+        content: "You are a helpful assistant.",
+      },
+      ...messages,
+    ],
+  });
+
+  return result.toAIStreamResponse();
+}

apps/docs/app/api/search/route.ts

@@ -1,10 +1,10 @@
-import { getPages } from '@/app/source';
-import { createSearchAPI } from 'fumadocs-core/search/server';
+import { getPages } from "@/app/source";
+import { createSearchAPI } from "fumadocs-core/search/server";
 
-export const { GET } = createSearchAPI('advanced', {
+export const { GET } = createSearchAPI("advanced", {
   indexes: getPages().map((page) => ({
-    title: page.data.title,
-    structuredData: page.data.exports.structuredData,
+    title: (page.data as any).title,
+    structuredData: (page.data as any).exports.structuredData,
     id: page.url,
     url: page.url,
   })),

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -1,44 +1,73 @@
-import { getPage, getPages } from '@/app/source';
-import type { Metadata } from 'next';
-import { DocsPage, DocsBody } from 'fumadocs-ui/page';
-import { notFound } from 'next/navigation';
+import { getPages, getPage } from "@/app/source";
+import type { Metadata } from "next";
+import { DocsPage, DocsBody } from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { EditIcon } from "lucide-react";
 
 export default async function Page({
   params,
 }: {
   params: { slug?: string[] };
 }) {
-  const page = getPage(params.slug);
+  const page = getPage(["docs", ...(params.slug ?? [])]);
 
   if (page == null) {
     notFound();
   }
 
-  const MDX = page.data.exports.default;
+  const path = `apps/docs/content/docs/${page.file.path}`;
+
+  const footer = (
+    <a
+      href={`https://github.com/Yonom/assistant-ui/blob/main/${path}`}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={cn(
+        buttonVariants({
+          variant: "secondary",
+          size: "sm",
+          className: "gap-1.5 text-xs",
+        }),
+      )}
+    >
+      <EditIcon className="size-3" />
+      Edit on Github
+    </a>
+  );
+
+  const MDX = (page.data as any).exports.default;
 
   return (
-    <DocsPage toc={page.data.exports.toc} full={page.data.full}>
+    <DocsPage
+      toc={(page.data as any).exports.toc}
+      full={(page.data as any).full}
+      tableOfContent={{ footer }}
+    >
       <DocsBody>
-        <h1>{page.data.title}</h1>
+        <h1>{(page.data as any).title}</h1>
         <MDX />
       </DocsBody>
     </DocsPage>
   );
 }
 
 export async function generateStaticParams() {
-  return getPages().map((page) => ({
-    slug: page.slugs,
-  }));
+  return getPages()
+    .filter((page) => page.slugs[0] === "docs")
+    .map((page) => ({
+      slug: page.slugs.slice(1),
+    }));
 }
 
 export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-  const page = getPage(params.slug);
+  const page = getPage(["docs", ...(params.slug ?? [])]);
 
   if (page == null) notFound();
 
   return {
-    title: page.data.title,
-    description: page.data.description,
+    title: (page.data as any).title,
+    description: (page.data as any).description,
   } satisfies Metadata;
 }

apps/docs/app/docs/layout.config.tsx

@@ -0,0 +1,102 @@
+import { type BaseLayoutProps, type DocsLayoutProps } from "fumadocs-ui/layout";
+import { pageTree } from "@/app/source";
+import { RootToggle } from "fumadocs-ui/components/layout/root-toggle";
+import { BookIcon, LayoutTemplateIcon, UserIcon } from "lucide-react";
+import { LibraryIcon, type LucideIcon } from "lucide-react";
+import icon from "@/public/favicon/favicon.svg";
+import Image from "next/image";
+
+type Mode = {
+  url: string;
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  param: string;
+};
+
+export const modes: Mode[] = [
+  {
+    icon: LibraryIcon,
+    title: "Documentation",
+    description: "@assistant-ui/react",
+    url: "/docs",
+    param: "docs",
+  },
+  {
+    icon: LibraryIcon,
+    title: "Reference",
+    description: "@assistant-ui/react",
+    url: "/reference",
+    param: "reference",
+  },
+];
+
+// shared configuration
+export const baseOptions: BaseLayoutProps = {
+  githubUrl: "https://github.com/Yonom/assistant-ui",
+  nav: {
+    title: (
+      <>
+        <Image src={icon} alt="logo" className="inline size-4" />
+        <span className="font-medium">assistant-ui</span>
+      </>
+    ),
+    transparentMode: "none",
+  },
+  links: [
+    {
+      text: "Documentation",
+      url: "/docs",
+      icon: <BookIcon />,
+      active: "nested-url",
+    },
+    {
+      text: "Reference",
+      url: "/reference",
+      icon: <BookIcon />,
+      active: "nested-url",
+    },
+    {
+      text: "Examples",
+      url: "/examples",
+      icon: <LayoutTemplateIcon />,
+    },
+    {
+      text: "Discord",
+      url: "https://discord.gg/S9dwgCNEFs",
+      icon: <UserIcon />,
+      external: true,
+    },
+  ],
+};
+
+export const sharedDocsOptions: Partial<DocsLayoutProps> = {
+  ...baseOptions,
+  sidebar: {
+    defaultOpenLevel: 0,
+    banner: (
+      <RootToggle
+        options={modes.map((mode) => ({
+          url: mode.url,
+          icon: (
+            <mode.icon
+              className="from-background/80 size-9 shrink-0 rounded-md bg-gradient-to-t p-1.5"
+              style={{
+                backgroundColor: `hsl(var(--${mode.param}-color)/.3)`,
+                color: `hsl(var(--${mode.param}-color))`,
+              }}
+            />
+          ),
+          title: mode.title,
+          description: mode.description,
+        }))}
+      />
+    ),
+  },
+};
+
+// docs layout configuration
+export const docsOptions: DocsLayoutProps = {
+  ...sharedDocsOptions,
+  tree: pageTree,
+};

apps/docs/app/docs/layout.tsx

@@ -1,6 +1,6 @@
-import { DocsLayout } from 'fumadocs-ui/layout';
-import type { ReactNode } from 'react';
-import { docsOptions } from '../layout.config';
+import { DocsLayout } from "fumadocs-ui/layout";
+import type { ReactNode } from "react";
+import { docsOptions } from "./layout.config";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return <DocsLayout {...docsOptions}>{children}</DocsLayout>;