Upload folder using huggingface_hub

.env.example

@@ -0,0 +1,19 @@
+# Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32`
+AUTH_SECRET=****
+
+# The following keys below are automatically created and
+# added to your environment when you deploy on vercel
+
+# Get your xAI API Key here for chat and image models: https://console.x.ai/
+XAI_API_KEY=****
+
+# Instructions to create a Vercel Blob Store here: https://vercel.com/docs/storage/vercel-blob
+BLOB_READ_WRITE_TOKEN=****
+
+# Instructions to create a PostgreSQL database here: https://vercel.com/docs/storage/vercel-postgres/quickstart
+POSTGRES_URL=****
+
+
+# Instructions to create a Redis store here:
+# https://vercel.com/docs/redis
+REDIS_URL=****

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "rules": {
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    }
+  },
+  "ignorePatterns": ["**/components/ui/**"]
+}

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+app/(chat)/opengraph-image.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+.env
+.vercel
+.env*.local
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/*

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome"]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.workingDirectories": [
+    { "pattern": "app/*" },
+    { "pattern": "packages/*" }
+  ]
+}

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-alpine
+USER root
+
+USER 1000
+WORKDIR /usr/src/app
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+
+RUN npm install
+RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2024 Vercel, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -1,10 +1,62 @@
----
-title: Next Chat
-emoji: 👀
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<a href="https://chat.vercel.ai/">
+  <img alt="Next.js 14 and App Router-ready AI chatbot." src="app/(chat)/opengraph-image.png">
+  <h1 align="center">Chat SDK</h1>
+</a>
+
+<p align="center">
+    Chat SDK is a free, open-source template built with Next.js and the AI SDK that helps you quickly build powerful chatbot applications.
+</p>
+
+<p align="center">
+  <a href="https://chat-sdk.dev"><strong>Read Docs</strong></a> ·
+  <a href="#features"><strong>Features</strong></a> ·
+  <a href="#model-providers"><strong>Model Providers</strong></a> ·
+  <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
+  <a href="#running-locally"><strong>Running locally</strong></a>
+</p>
+<br/>
+
+## Features
+
+- [Next.js](https://nextjs.org) App Router
+  - Advanced routing for seamless navigation and performance
+  - React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
+- [AI SDK](https://sdk.vercel.ai/docs)
+  - Unified API for generating text, structured objects, and tool calls with LLMs
+  - Hooks for building dynamic chat and generative user interfaces
+  - Supports xAI (default), OpenAI, Fireworks, and other model providers
+- [shadcn/ui](https://ui.shadcn.com)
+  - Styling with [Tailwind CSS](https://tailwindcss.com)
+  - Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility
+- Data Persistence
+  - [Neon Serverless Postgres](https://vercel.com/marketplace/neon) for saving chat history and user data
+  - [Vercel Blob](https://vercel.com/storage/blob) for efficient file storage
+- [Auth.js](https://authjs.dev)
+  - Simple and secure authentication
+
+## Model Providers
+
+This template ships with [xAI](https://x.ai) `grok-2-1212` as the default chat model. However, with the [AI SDK](https://sdk.vercel.ai/docs), you can switch LLM providers to [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://sdk.vercel.ai/providers/ai-sdk-providers) with just a few lines of code.
+
+## Deploy Your Own
+
+You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET&envDescription=Learn+more+about+how+to+get+the+API+Keys+for+the+application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI+Chatbot&demo-description=An+Open-Source+AI+Chatbot+Template+Built+With+Next.js+and+the+AI+SDK+by+Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22ai%22%2C%22productSlug%22%3A%22grok%22%2C%22integrationSlug%22%3A%22xai%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22upstash-kv%22%2C%22integrationSlug%22%3A%22upstash%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
+
+## Running locally
+
+You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.
+
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
+3. Download your environment variables: `vercel env pull`
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Your app template should now be running on [localhost:3000](http://localhost:3000).

app/(auth)/actions.ts

@@ -0,0 +1,84 @@
+'use server';
+
+import { z } from 'zod';
+
+import { createUser, getUser } from '@/lib/db/queries';
+
+import { signIn } from './auth';
+
+const authFormSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(6),
+});
+
+export interface LoginActionState {
+  status: 'idle' | 'in_progress' | 'success' | 'failed' | 'invalid_data';
+}
+
+export const login = async (
+  _: LoginActionState,
+  formData: FormData,
+): Promise<LoginActionState> => {
+  try {
+    const validatedData = authFormSchema.parse({
+      email: formData.get('email'),
+      password: formData.get('password'),
+    });
+
+    await signIn('credentials', {
+      email: validatedData.email,
+      password: validatedData.password,
+      redirect: false,
+    });
+
+    return { status: 'success' };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return { status: 'invalid_data' };
+    }
+
+    return { status: 'failed' };
+  }
+};
+
+export interface RegisterActionState {
+  status:
+    | 'idle'
+    | 'in_progress'
+    | 'success'
+    | 'failed'
+    | 'user_exists'
+    | 'invalid_data';
+}
+
+export const register = async (
+  _: RegisterActionState,
+  formData: FormData,
+): Promise<RegisterActionState> => {
+  try {
+    const validatedData = authFormSchema.parse({
+      email: formData.get('email'),
+      password: formData.get('password'),
+    });
+
+    const [user] = await getUser(validatedData.email);
+
+    if (user) {
+      return { status: 'user_exists' } as RegisterActionState;
+    }
+    await createUser(validatedData.email, validatedData.password);
+    await signIn('credentials', {
+      email: validatedData.email,
+      password: validatedData.password,
+      redirect: false,
+    });
+
+    return { status: 'success' };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return { status: 'invalid_data' };
+    }
+
+    return { status: 'failed' };
+  }
+};

app/(auth)/api/auth/[...nextauth]/route.ts

@@ -0,0 +1 @@
+export { GET, POST } from '@/app/(auth)/auth';

app/(auth)/api/auth/guest/route.ts

@@ -0,0 +1,21 @@
+import { signIn } from '@/app/(auth)/auth';
+import { isDevelopmentEnvironment } from '@/lib/constants';
+import { getToken } from 'next-auth/jwt';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const redirectUrl = searchParams.get('redirectUrl') || '/';
+
+  const token = await getToken({
+    req: request,
+    secret: process.env.AUTH_SECRET,
+    secureCookie: !isDevelopmentEnvironment,
+  });
+
+  if (token) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return signIn('guest', { redirect: true, redirectTo: redirectUrl });
+}

app/(auth)/auth.config.ts

@@ -0,0 +1,13 @@
+import type { NextAuthConfig } from 'next-auth';
+
+export const authConfig = {
+  pages: {
+    signIn: '/login',
+    newUser: '/',
+  },
+  providers: [
+    // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
+    // while this file is also used in non-Node.js environments
+  ],
+  callbacks: {},
+} satisfies NextAuthConfig;

app/(auth)/auth.ts

@@ -0,0 +1,92 @@
+import { compare } from 'bcrypt-ts';
+import NextAuth, { type DefaultSession } from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import { createGuestUser, getUser } from '@/lib/db/queries';
+import { authConfig } from './auth.config';
+import { DUMMY_PASSWORD } from '@/lib/constants';
+import type { DefaultJWT } from 'next-auth/jwt';
+
+export type UserType = 'guest' | 'regular';
+
+declare module 'next-auth' {
+  interface Session extends DefaultSession {
+    user: {
+      id: string;
+      type: UserType;
+    } & DefaultSession['user'];
+  }
+
+  interface User {
+    id?: string;
+    email?: string | null;
+    type: UserType;
+  }
+}
+
+declare module 'next-auth/jwt' {
+  interface JWT extends DefaultJWT {
+    id: string;
+    type: UserType;
+  }
+}
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
+  ...authConfig,
+  providers: [
+    Credentials({
+      credentials: {},
+      async authorize({ email, password }: any) {
+        const users = await getUser(email);
+
+        if (users.length === 0) {
+          await compare(password, DUMMY_PASSWORD);
+          return null;
+        }
+
+        const [user] = users;
+
+        if (!user.password) {
+          await compare(password, DUMMY_PASSWORD);
+          return null;
+        }
+
+        const passwordsMatch = await compare(password, user.password);
+
+        if (!passwordsMatch) return null;
+
+        return { ...user, type: 'regular' };
+      },
+    }),
+    Credentials({
+      id: 'guest',
+      credentials: {},
+      async authorize() {
+        const [guestUser] = await createGuestUser();
+        return { ...guestUser, type: 'guest' };
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id as string;
+        token.type = user.type;
+      }
+
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id;
+        session.user.type = token.type;
+      }
+
+      return session;
+    },
+  },
+});

app/(auth)/login/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useActionState, useEffect, useState } from 'react';
+import { toast } from '@/components/toast';
+
+import { AuthForm } from '@/components/auth-form';
+import { SubmitButton } from '@/components/submit-button';
+
+import { login, type LoginActionState } from '../actions';
+import { useSession } from 'next-auth/react';
+
+export default function Page() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState('');
+  const [isSuccessful, setIsSuccessful] = useState(false);
+
+  const [state, formAction] = useActionState<LoginActionState, FormData>(
+    login,
+    {
+      status: 'idle',
+    },
+  );
+
+  const { update: updateSession } = useSession();
+
+  useEffect(() => {
+    if (state.status === 'failed') {
+      toast({
+        type: 'error',
+        description: 'Invalid credentials!',
+      });
+    } else if (state.status === 'invalid_data') {
+      toast({
+        type: 'error',
+        description: 'Failed validating your submission!',
+      });
+    } else if (state.status === 'success') {
+      setIsSuccessful(true);
+      updateSession();
+      router.refresh();
+    }
+  }, [state.status]);
+
+  const handleSubmit = (formData: FormData) => {
+    setEmail(formData.get('email') as string);
+    formAction(formData);
+  };
+
+  return (
+    <div className="flex h-dvh w-screen items-start pt-12 md:pt-0 md:items-center justify-center bg-background">
+      <div className="w-full max-w-md overflow-hidden rounded-2xl flex flex-col gap-12">
+        <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
+          <h3 className="text-xl font-semibold dark:text-zinc-50">Sign In</h3>
+          <p className="text-sm text-gray-500 dark:text-zinc-400">
+            Use your email and password to sign in
+          </p>
+        </div>
+        <AuthForm action={handleSubmit} defaultEmail={email}>
+          <SubmitButton isSuccessful={isSuccessful}>Sign in</SubmitButton>
+          <p className="text-center text-sm text-gray-600 mt-4 dark:text-zinc-400">
+            {"Don't have an account? "}
+            <Link
+              href="/register"
+              className="font-semibold text-gray-800 hover:underline dark:text-zinc-200"
+            >
+              Sign up
+            </Link>
+            {' for free.'}
+          </p>
+        </AuthForm>
+      </div>
+    </div>
+  );
+}

app/(auth)/register/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useActionState, useEffect, useState } from 'react';
+
+import { AuthForm } from '@/components/auth-form';
+import { SubmitButton } from '@/components/submit-button';
+
+import { register, type RegisterActionState } from '../actions';
+import { toast } from '@/components/toast';
+import { useSession } from 'next-auth/react';
+
+export default function Page() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState('');
+  const [isSuccessful, setIsSuccessful] = useState(false);
+
+  const [state, formAction] = useActionState<RegisterActionState, FormData>(
+    register,
+    {
+      status: 'idle',
+    },
+  );
+
+  const { update: updateSession } = useSession();
+
+  useEffect(() => {
+    if (state.status === 'user_exists') {
+      toast({ type: 'error', description: 'Account already exists!' });
+    } else if (state.status === 'failed') {
+      toast({ type: 'error', description: 'Failed to create account!' });
+    } else if (state.status === 'invalid_data') {
+      toast({
+        type: 'error',
+        description: 'Failed validating your submission!',
+      });
+    } else if (state.status === 'success') {
+      toast({ type: 'success', description: 'Account created successfully!' });
+
+      setIsSuccessful(true);
+      updateSession();
+      router.refresh();
+    }
+  }, [state]);
+
+  const handleSubmit = (formData: FormData) => {
+    setEmail(formData.get('email') as string);
+    formAction(formData);
+  };
+
+  return (
+    <div className="flex h-dvh w-screen items-start pt-12 md:pt-0 md:items-center justify-center bg-background">
+      <div className="w-full max-w-md overflow-hidden rounded-2xl gap-12 flex flex-col">
+        <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
+          <h3 className="text-xl font-semibold dark:text-zinc-50">Sign Up</h3>
+          <p className="text-sm text-gray-500 dark:text-zinc-400">
+            Create an account with your email and password
+          </p>
+        </div>
+        <AuthForm action={handleSubmit} defaultEmail={email}>
+          <SubmitButton isSuccessful={isSuccessful}>Sign Up</SubmitButton>
+          <p className="text-center text-sm text-gray-600 mt-4 dark:text-zinc-400">
+            {'Already have an account? '}
+            <Link
+              href="/login"
+              className="font-semibold text-gray-800 hover:underline dark:text-zinc-200"
+            >
+              Sign in
+            </Link>
+            {' instead.'}
+          </p>
+        </AuthForm>
+      </div>
+    </div>
+  );
+}

app/(chat)/actions.ts

@@ -0,0 +1,53 @@
+'use server';
+
+import { generateText, type UIMessage } from 'ai';
+import { cookies } from 'next/headers';
+import {
+  deleteMessagesByChatIdAfterTimestamp,
+  getMessageById,
+  updateChatVisiblityById,
+} from '@/lib/db/queries';
+import type { VisibilityType } from '@/components/visibility-selector';
+import { myProvider } from '@/lib/ai/providers';
+
+export async function saveChatModelAsCookie(model: string) {
+  const cookieStore = await cookies();
+  cookieStore.set('chat-model', model);
+}
+
+export async function generateTitleFromUserMessage({
+  message,
+}: {
+  message: UIMessage;
+}) {
+  const { text: title } = await generateText({
+    model: myProvider.languageModel('title-model'),
+    system: `\n
+    - you will generate a short title based on the first message a user begins a conversation with
+    - ensure it is not more than 80 characters long
+    - the title should be a summary of the user's message
+    - do not use quotes or colons`,
+    prompt: JSON.stringify(message),
+  });
+
+  return title;
+}
+
+export async function deleteTrailingMessages({ id }: { id: string }) {
+  const [message] = await getMessageById({ id });
+
+  await deleteMessagesByChatIdAfterTimestamp({
+    chatId: message.chatId,
+    timestamp: message.createdAt,
+  });
+}
+
+export async function updateChatVisibility({
+  chatId,
+  visibility,
+}: {
+  chatId: string;
+  visibility: VisibilityType;
+}) {
+  await updateChatVisiblityById({ chatId, visibility });
+}

app/(chat)/api/chat/[id]/stream/route.ts

@@ -0,0 +1,112 @@
+import { auth } from '@/app/(auth)/auth';
+import {
+  getChatById,
+  getMessagesByChatId,
+  getStreamIdsByChatId,
+} from '@/lib/db/queries';
+import type { Chat } from '@/lib/db/schema';
+import { ChatSDKError } from '@/lib/errors';
+import type { ChatMessage } from '@/lib/types';
+import { createUIMessageStream, JsonToSseTransformStream } from 'ai';
+import { getStreamContext } from '../../route';
+import { differenceInSeconds } from 'date-fns';
+
+export async function GET(
+  _: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id: chatId } = await params;
+
+  const streamContext = getStreamContext();
+  const resumeRequestedAt = new Date();
+
+  if (!streamContext) {
+    return new Response(null, { status: 204 });
+  }
+
+  if (!chatId) {
+    return new ChatSDKError('bad_request:api').toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:chat').toResponse();
+  }
+
+  let chat: Chat;
+
+  try {
+    chat = await getChatById({ id: chatId });
+  } catch {
+    return new ChatSDKError('not_found:chat').toResponse();
+  }
+
+  if (!chat) {
+    return new ChatSDKError('not_found:chat').toResponse();
+  }
+
+  if (chat.visibility === 'private' && chat.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:chat').toResponse();
+  }
+
+  const streamIds = await getStreamIdsByChatId({ chatId });
+
+  if (!streamIds.length) {
+    return new ChatSDKError('not_found:stream').toResponse();
+  }
+
+  const recentStreamId = streamIds.at(-1);
+
+  if (!recentStreamId) {
+    return new ChatSDKError('not_found:stream').toResponse();
+  }
+
+  const emptyDataStream = createUIMessageStream<ChatMessage>({
+    execute: () => {},
+  });
+
+  const stream = await streamContext.resumableStream(recentStreamId, () =>
+    emptyDataStream.pipeThrough(new JsonToSseTransformStream()),
+  );
+
+  /*
+   * For when the generation is streaming during SSR
+   * but the resumable stream has concluded at this point.
+   */
+  if (!stream) {
+    const messages = await getMessagesByChatId({ id: chatId });
+    const mostRecentMessage = messages.at(-1);
+
+    if (!mostRecentMessage) {
+      return new Response(emptyDataStream, { status: 200 });
+    }
+
+    if (mostRecentMessage.role !== 'assistant') {
+      return new Response(emptyDataStream, { status: 200 });
+    }
+
+    const messageCreatedAt = new Date(mostRecentMessage.createdAt);
+
+    if (differenceInSeconds(resumeRequestedAt, messageCreatedAt) > 15) {
+      return new Response(emptyDataStream, { status: 200 });
+    }
+
+    const restoredStream = createUIMessageStream<ChatMessage>({
+      execute: ({ writer }) => {
+        writer.write({
+          type: 'data-appendMessage',
+          data: JSON.stringify(mostRecentMessage),
+          transient: true,
+        });
+      },
+    });
+
+    return new Response(
+      restoredStream.pipeThrough(new JsonToSseTransformStream()),
+      { status: 200 },
+    );
+  }
+
+  return new Response(stream, { status: 200 });
+}

app/(chat)/api/chat/route.ts

@@ -0,0 +1,251 @@
+import {
+  convertToModelMessages,
+  createUIMessageStream,
+  JsonToSseTransformStream,
+  smoothStream,
+  stepCountIs,
+  streamText,
+} from 'ai';
+import { auth, type UserType } from '@/app/(auth)/auth';
+import { type RequestHints, systemPrompt } from '@/lib/ai/prompts';
+import {
+  createStreamId,
+  deleteChatById,
+  getChatById,
+  getMessageCountByUserId,
+  getMessagesByChatId,
+  saveChat,
+  saveMessages,
+} from '@/lib/db/queries';
+import { convertToUIMessages, generateUUID } from '@/lib/utils';
+import { generateTitleFromUserMessage } from '../../actions';
+import { createDocument } from '@/lib/ai/tools/create-document';
+import { updateDocument } from '@/lib/ai/tools/update-document';
+import { requestSuggestions } from '@/lib/ai/tools/request-suggestions';
+import { getWeather } from '@/lib/ai/tools/get-weather';
+import { isProductionEnvironment } from '@/lib/constants';
+import { myProvider } from '@/lib/ai/providers';
+import { entitlementsByUserType } from '@/lib/ai/entitlements';
+import { postRequestBodySchema, type PostRequestBody } from './schema';
+import { geolocation } from '@vercel/functions';
+import {
+  createResumableStreamContext,
+  type ResumableStreamContext,
+} from 'resumable-stream';
+import { after } from 'next/server';
+import { ChatSDKError } from '@/lib/errors';
+import type { ChatMessage } from '@/lib/types';
+import type { ChatModel } from '@/lib/ai/models';
+import type { VisibilityType } from '@/components/visibility-selector';
+
+export const maxDuration = 60;
+
+let globalStreamContext: ResumableStreamContext | null = null;
+
+export function getStreamContext() {
+  if (!globalStreamContext) {
+    try {
+      globalStreamContext = createResumableStreamContext({
+        waitUntil: after,
+      });
+    } catch (error: any) {
+      if (error.message.includes('REDIS_URL')) {
+        console.log(
+          ' > Resumable streams are disabled due to missing REDIS_URL',
+        );
+      } else {
+        console.error(error);
+      }
+    }
+  }
+
+  return globalStreamContext;
+}
+
+export async function POST(request: Request) {
+  let requestBody: PostRequestBody;
+
+  try {
+    const json = await request.json();
+    requestBody = postRequestBodySchema.parse(json);
+  } catch (_) {
+    return new ChatSDKError('bad_request:api').toResponse();
+  }
+
+  try {
+    const {
+      id,
+      message,
+      selectedChatModel,
+      selectedVisibilityType,
+    }: {
+      id: string;
+      message: ChatMessage;
+      selectedChatModel: ChatModel['id'];
+      selectedVisibilityType: VisibilityType;
+    } = requestBody;
+
+    const session = await auth();
+
+    if (!session?.user) {
+      return new ChatSDKError('unauthorized:chat').toResponse();
+    }
+
+    const userType: UserType = session.user.type;
+
+    const messageCount = await getMessageCountByUserId({
+      id: session.user.id,
+      differenceInHours: 24,
+    });
+
+    if (messageCount > entitlementsByUserType[userType].maxMessagesPerDay) {
+      return new ChatSDKError('rate_limit:chat').toResponse();
+    }
+
+    const chat = await getChatById({ id });
+
+    if (!chat) {
+      const title = await generateTitleFromUserMessage({
+        message,
+      });
+
+      await saveChat({
+        id,
+        userId: session.user.id,
+        title,
+        visibility: selectedVisibilityType,
+      });
+    } else {
+      if (chat.userId !== session.user.id) {
+        return new ChatSDKError('forbidden:chat').toResponse();
+      }
+    }
+
+    const messagesFromDb = await getMessagesByChatId({ id });
+    const uiMessages = [...convertToUIMessages(messagesFromDb), message];
+
+    const { longitude, latitude, city, country } = geolocation(request);
+
+    const requestHints: RequestHints = {
+      longitude,
+      latitude,
+      city,
+      country,
+    };
+
+    await saveMessages({
+      messages: [
+        {
+          chatId: id,
+          id: message.id,
+          role: 'user',
+          parts: message.parts,
+          attachments: [],
+          createdAt: new Date(),
+        },
+      ],
+    });
+
+    const streamId = generateUUID();
+    await createStreamId({ streamId, chatId: id });
+
+    const stream = createUIMessageStream({
+      execute: ({ writer: dataStream }) => {
+        const result = streamText({
+          model: myProvider.languageModel(selectedChatModel),
+          system: systemPrompt({ selectedChatModel, requestHints }),
+          messages: convertToModelMessages(uiMessages),
+          stopWhen: stepCountIs(5),
+          experimental_activeTools:
+            selectedChatModel === 'chat-model-reasoning'
+              ? []
+              : [
+                  'getWeather',
+                  'createDocument',
+                  'updateDocument',
+                  'requestSuggestions',
+                ],
+          experimental_transform: smoothStream({ chunking: 'word' }),
+          tools: {
+            getWeather,
+            createDocument: createDocument({ session, dataStream }),
+            updateDocument: updateDocument({ session, dataStream }),
+            requestSuggestions: requestSuggestions({
+              session,
+              dataStream,
+            }),
+          },
+          experimental_telemetry: {
+            isEnabled: isProductionEnvironment,
+            functionId: 'stream-text',
+          },
+        });
+
+        result.consumeStream();
+
+        dataStream.merge(
+          result.toUIMessageStream({
+            sendReasoning: true,
+          }),
+        );
+      },
+      generateId: generateUUID,
+      onFinish: async ({ messages }) => {
+        await saveMessages({
+          messages: messages.map((message) => ({
+            id: message.id,
+            role: message.role,
+            parts: message.parts,
+            createdAt: new Date(),
+            attachments: [],
+            chatId: id,
+          })),
+        });
+      },
+      onError: () => {
+        return 'Oops, an error occurred!';
+      },
+    });
+
+    const streamContext = getStreamContext();
+
+    if (streamContext) {
+      return new Response(
+        await streamContext.resumableStream(streamId, () =>
+          stream.pipeThrough(new JsonToSseTransformStream()),
+        ),
+      );
+    } else {
+      return new Response(stream.pipeThrough(new JsonToSseTransformStream()));
+    }
+  } catch (error) {
+    if (error instanceof ChatSDKError) {
+      return error.toResponse();
+    }
+  }
+}
+
+export async function DELETE(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get('id');
+
+  if (!id) {
+    return new ChatSDKError('bad_request:api').toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:chat').toResponse();
+  }
+
+  const chat = await getChatById({ id });
+
+  if (chat.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:chat').toResponse();
+  }
+
+  const deletedChat = await deleteChatById({ id });
+
+  return Response.json(deletedChat, { status: 200 });
+}

app/(chat)/api/chat/schema.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+const textPartSchema = z.object({
+  type: z.enum(['text']),
+  text: z.string().min(1).max(2000),
+});
+
+const filePartSchema = z.object({
+  type: z.enum(['file']),
+  mediaType: z.enum(['image/jpeg', 'image/png']),
+  name: z.string().min(1).max(100),
+  url: z.string().url(),
+});
+
+const partSchema = z.union([textPartSchema, filePartSchema]);
+
+export const postRequestBodySchema = z.object({
+  id: z.string().uuid(),
+  message: z.object({
+    id: z.string().uuid(),
+    role: z.enum(['user']),
+    parts: z.array(partSchema),
+  }),
+  selectedChatModel: z.enum(['chat-model', 'chat-model-reasoning']),
+  selectedVisibilityType: z.enum(['public', 'private']),
+});
+
+export type PostRequestBody = z.infer<typeof postRequestBodySchema>;

app/(chat)/api/document/route.ts

@@ -0,0 +1,126 @@
+import { auth } from '@/app/(auth)/auth';
+import type { ArtifactKind } from '@/components/artifact';
+import {
+  deleteDocumentsByIdAfterTimestamp,
+  getDocumentsById,
+  saveDocument,
+} from '@/lib/db/queries';
+import { ChatSDKError } from '@/lib/errors';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get('id');
+
+  if (!id) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameter id is missing',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:document').toResponse();
+  }
+
+  const documents = await getDocumentsById({ id });
+
+  const [document] = documents;
+
+  if (!document) {
+    return new ChatSDKError('not_found:document').toResponse();
+  }
+
+  if (document.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:document').toResponse();
+  }
+
+  return Response.json(documents, { status: 200 });
+}
+
+export async function POST(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get('id');
+
+  if (!id) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameter id is required.',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('not_found:document').toResponse();
+  }
+
+  const {
+    content,
+    title,
+    kind,
+  }: { content: string; title: string; kind: ArtifactKind } =
+    await request.json();
+
+  const documents = await getDocumentsById({ id });
+
+  if (documents.length > 0) {
+    const [document] = documents;
+
+    if (document.userId !== session.user.id) {
+      return new ChatSDKError('forbidden:document').toResponse();
+    }
+  }
+
+  const document = await saveDocument({
+    id,
+    content,
+    title,
+    kind,
+    userId: session.user.id,
+  });
+
+  return Response.json(document, { status: 200 });
+}
+
+export async function DELETE(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get('id');
+  const timestamp = searchParams.get('timestamp');
+
+  if (!id) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameter id is required.',
+    ).toResponse();
+  }
+
+  if (!timestamp) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameter timestamp is required.',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:document').toResponse();
+  }
+
+  const documents = await getDocumentsById({ id });
+
+  const [document] = documents;
+
+  if (document.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:document').toResponse();
+  }
+
+  const documentsDeleted = await deleteDocumentsByIdAfterTimestamp({
+    id,
+    timestamp: new Date(timestamp),
+  });
+
+  return Response.json(documentsDeleted, { status: 200 });
+}

app/(chat)/api/files/upload/route.ts

@@ -0,0 +1,68 @@
+import { put } from '@vercel/blob';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import { auth } from '@/app/(auth)/auth';
+
+// Use Blob instead of File since File is not available in Node.js environment
+const FileSchema = z.object({
+  file: z
+    .instanceof(Blob)
+    .refine((file) => file.size <= 5 * 1024 * 1024, {
+      message: 'File size should be less than 5MB',
+    })
+    // Update the file type based on the kind of files you want to accept
+    .refine((file) => ['image/jpeg', 'image/png'].includes(file.type), {
+      message: 'File type should be JPEG or PNG',
+    }),
+});
+
+export async function POST(request: Request) {
+  const session = await auth();
+
+  if (!session) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  if (request.body === null) {
+    return new Response('Request body is empty', { status: 400 });
+  }
+
+  try {
+    const formData = await request.formData();
+    const file = formData.get('file') as Blob;
+
+    if (!file) {
+      return NextResponse.json({ error: 'No file uploaded' }, { status: 400 });
+    }
+
+    const validatedFile = FileSchema.safeParse({ file });
+
+    if (!validatedFile.success) {
+      const errorMessage = validatedFile.error.errors
+        .map((error) => error.message)
+        .join(', ');
+
+      return NextResponse.json({ error: errorMessage }, { status: 400 });
+    }
+
+    // Get filename from formData since Blob doesn't have name property
+    const filename = (formData.get('file') as File).name;
+    const fileBuffer = await file.arrayBuffer();
+
+    try {
+      const data = await put(`${filename}`, fileBuffer, {
+        access: 'public',
+      });
+
+      return NextResponse.json(data);
+    } catch (error) {
+      return NextResponse.json({ error: 'Upload failed' }, { status: 500 });
+    }
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to process request' },
+      { status: 500 },
+    );
+  }
+}

app/(chat)/api/history/route.ts

@@ -0,0 +1,34 @@
+import { auth } from '@/app/(auth)/auth';
+import type { NextRequest } from 'next/server';
+import { getChatsByUserId } from '@/lib/db/queries';
+import { ChatSDKError } from '@/lib/errors';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+
+  const limit = Number.parseInt(searchParams.get('limit') || '10');
+  const startingAfter = searchParams.get('starting_after');
+  const endingBefore = searchParams.get('ending_before');
+
+  if (startingAfter && endingBefore) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Only one of starting_after or ending_before can be provided.',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:chat').toResponse();
+  }
+
+  const chats = await getChatsByUserId({
+    id: session.user.id,
+    limit,
+    startingAfter,
+    endingBefore,
+  });
+
+  return Response.json(chats);
+}

app/(chat)/api/suggestions/route.ts

@@ -0,0 +1,37 @@
+import { auth } from '@/app/(auth)/auth';
+import { getSuggestionsByDocumentId } from '@/lib/db/queries';
+import { ChatSDKError } from '@/lib/errors';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const documentId = searchParams.get('documentId');
+
+  if (!documentId) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameter documentId is required.',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:suggestions').toResponse();
+  }
+
+  const suggestions = await getSuggestionsByDocumentId({
+    documentId,
+  });
+
+  const [suggestion] = suggestions;
+
+  if (!suggestion) {
+    return Response.json([], { status: 200 });
+  }
+
+  if (suggestion.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:api').toResponse();
+  }
+
+  return Response.json(suggestions, { status: 200 });
+}

app/(chat)/api/vote/route.ts

@@ -0,0 +1,75 @@
+import { auth } from '@/app/(auth)/auth';
+import { getChatById, getVotesByChatId, voteMessage } from '@/lib/db/queries';
+import { ChatSDKError } from '@/lib/errors';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const chatId = searchParams.get('chatId');
+
+  if (!chatId) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameter chatId is required.',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:vote').toResponse();
+  }
+
+  const chat = await getChatById({ id: chatId });
+
+  if (!chat) {
+    return new ChatSDKError('not_found:chat').toResponse();
+  }
+
+  if (chat.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:vote').toResponse();
+  }
+
+  const votes = await getVotesByChatId({ id: chatId });
+
+  return Response.json(votes, { status: 200 });
+}
+
+export async function PATCH(request: Request) {
+  const {
+    chatId,
+    messageId,
+    type,
+  }: { chatId: string; messageId: string; type: 'up' | 'down' } =
+    await request.json();
+
+  if (!chatId || !messageId || !type) {
+    return new ChatSDKError(
+      'bad_request:api',
+      'Parameters chatId, messageId, and type are required.',
+    ).toResponse();
+  }
+
+  const session = await auth();
+
+  if (!session?.user) {
+    return new ChatSDKError('unauthorized:vote').toResponse();
+  }
+
+  const chat = await getChatById({ id: chatId });
+
+  if (!chat) {
+    return new ChatSDKError('not_found:vote').toResponse();
+  }
+
+  if (chat.userId !== session.user.id) {
+    return new ChatSDKError('forbidden:vote').toResponse();
+  }
+
+  await voteMessage({
+    chatId,
+    messageId,
+    type: type,
+  });
+
+  return new Response('Message voted', { status: 200 });
+}

app/(chat)/chat/[id]/page.tsx

@@ -0,0 +1,76 @@
+import { cookies } from 'next/headers';
+import { notFound, redirect } from 'next/navigation';
+
+import { auth } from '@/app/(auth)/auth';
+import { Chat } from '@/components/chat';
+import { getChatById, getMessagesByChatId } from '@/lib/db/queries';
+import { DataStreamHandler } from '@/components/data-stream-handler';
+import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models';
+import { convertToUIMessages } from '@/lib/utils';
+
+export default async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const { id } = params;
+  const chat = await getChatById({ id });
+
+  if (!chat) {
+    notFound();
+  }
+
+  const session = await auth();
+
+  if (!session) {
+    redirect('/api/auth/guest');
+  }
+
+  if (chat.visibility === 'private') {
+    if (!session.user) {
+      return notFound();
+    }
+
+    if (session.user.id !== chat.userId) {
+      return notFound();
+    }
+  }
+
+  const messagesFromDb = await getMessagesByChatId({
+    id,
+  });
+
+  const uiMessages = convertToUIMessages(messagesFromDb);
+
+  const cookieStore = await cookies();
+  const chatModelFromCookie = cookieStore.get('chat-model');
+
+  if (!chatModelFromCookie) {
+    return (
+      <>
+        <Chat
+          id={chat.id}
+          initialMessages={uiMessages}
+          initialChatModel={DEFAULT_CHAT_MODEL}
+          initialVisibilityType={chat.visibility}
+          isReadonly={session?.user?.id !== chat.userId}
+          session={session}
+          autoResume={true}
+        />
+        <DataStreamHandler />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Chat
+        id={chat.id}
+        initialMessages={uiMessages}
+        initialChatModel={chatModelFromCookie.value}
+        initialVisibilityType={chat.visibility}
+        isReadonly={session?.user?.id !== chat.userId}
+        session={session}
+        autoResume={true}
+      />
+      <DataStreamHandler />
+    </>
+  );
+}

app/(chat)/layout.tsx

@@ -0,0 +1,33 @@
+import { cookies } from 'next/headers';
+
+import { AppSidebar } from '@/components/app-sidebar';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { auth } from '../(auth)/auth';
+import Script from 'next/script';
+import { DataStreamProvider } from '@/components/data-stream-provider';
+
+export const experimental_ppr = true;
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [session, cookieStore] = await Promise.all([auth(), cookies()]);
+  const isCollapsed = cookieStore.get('sidebar:state')?.value !== 'true';
+
+  return (
+    <>
+      <Script
+        src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
+        strategy="beforeInteractive"
+      />
+      <DataStreamProvider>
+        <SidebarProvider defaultOpen={!isCollapsed}>
+          <AppSidebar user={session?.user} />
+          <SidebarInset>{children}</SidebarInset>
+        </SidebarProvider>
+      </DataStreamProvider>
+    </>
+  );
+}

app/(chat)/page.tsx

@@ -0,0 +1,55 @@
+import { cookies } from 'next/headers';
+
+import { Chat } from '@/components/chat';
+import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models';
+import { generateUUID } from '@/lib/utils';
+import { DataStreamHandler } from '@/components/data-stream-handler';
+import { auth } from '../(auth)/auth';
+import { redirect } from 'next/navigation';
+
+export default async function Page() {
+  const session = await auth();
+
+  if (!session) {
+    redirect('/api/auth/guest');
+  }
+
+  const id = generateUUID();
+
+  const cookieStore = await cookies();
+  const modelIdFromCookie = cookieStore.get('chat-model');
+
+  if (!modelIdFromCookie) {
+    return (
+      <>
+        <Chat
+          key={id}
+          id={id}
+          initialMessages={[]}
+          initialChatModel={DEFAULT_CHAT_MODEL}
+          initialVisibilityType="private"
+          isReadonly={false}
+          session={session}
+          autoResume={false}
+        />
+        <DataStreamHandler />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Chat
+        key={id}
+        id={id}
+        initialMessages={[]}
+        initialChatModel={modelIdFromCookie.value}
+        initialVisibilityType="private"
+        isReadonly={false}
+        session={session}
+        autoResume={false}
+      />
+      <DataStreamHandler />
+    </>
+  );
+}

app/globals.css

@@ -0,0 +1,164 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --foreground-rgb: 255, 255, 255;
+        --background-start-rgb: 0, 0, 0;
+        --background-end-rgb: 0, 0, 0;
+    }
+}
+
+@layer utilities {
+    .text-balance {
+        text-wrap: balance;
+    }
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 240 10% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --ring: 240 4.9% 83.9%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.skeleton {
+    * {
+        pointer-events: none !important;
+    }
+
+    *[class^="text-"] {
+        color: transparent;
+        @apply rounded-md bg-foreground/20 select-none animate-pulse;
+    }
+
+    .skeleton-bg {
+        @apply bg-foreground/10;
+    }
+
+    .skeleton-div {
+        @apply bg-foreground/20 animate-pulse;
+    }
+}
+
+.ProseMirror {
+    outline: none;
+}
+
+.cm-editor,
+.cm-gutters {
+    @apply bg-background dark:bg-zinc-800 outline-none selection:bg-zinc-900 !important;
+}
+
+.ͼo.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
+.ͼo.cm-selectionBackground,
+.ͼo.cm-content::selection {
+    @apply bg-zinc-200 dark:bg-zinc-900 !important;
+}
+
+.cm-activeLine,
+.cm-activeLineGutter {
+    @apply bg-transparent !important;
+}
+
+.cm-activeLine {
+    @apply rounded-r-sm !important;
+}
+
+.cm-lineNumbers {
+    @apply min-w-7;
+}
+
+.cm-foldGutter {
+    @apply min-w-3;
+}
+
+.cm-lineNumbers .cm-activeLineGutter {
+    @apply rounded-l-sm !important;
+}
+
+.suggestion-highlight {
+    @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
+}

app/layout.tsx

@@ -0,0 +1,86 @@
+import { Toaster } from 'sonner';
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import { ThemeProvider } from '@/components/theme-provider';
+
+import './globals.css';
+import { SessionProvider } from 'next-auth/react';
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://chat.vercel.ai'),
+  title: 'Next.js Chatbot Template',
+  description: 'Next.js chatbot template using the AI SDK.',
+};
+
+export const viewport = {
+  maximumScale: 1, // Disable auto-zoom on mobile Safari
+};
+
+const geist = Geist({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-geist',
+});
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-geist-mono',
+});
+
+const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
+const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
+const THEME_COLOR_SCRIPT = `\
+(function() {
+  var html = document.documentElement;
+  var meta = document.querySelector('meta[name="theme-color"]');
+  if (!meta) {
+    meta = document.createElement('meta');
+    meta.setAttribute('name', 'theme-color');
+    document.head.appendChild(meta);
+  }
+  function updateThemeColor() {
+    var isDark = html.classList.contains('dark');
+    meta.setAttribute('content', isDark ? '${DARK_THEME_COLOR}' : '${LIGHT_THEME_COLOR}');
+  }
+  var observer = new MutationObserver(updateThemeColor);
+  observer.observe(html, { attributes: true, attributeFilter: ['class'] });
+  updateThemeColor();
+})();`;
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      // `next-themes` injects an extra classname to the body element to avoid
+      // visual flicker before hydration. Hence the `suppressHydrationWarning`
+      // prop is necessary to avoid the React hydration mismatch warning.
+      // https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
+      suppressHydrationWarning
+      className={`${geist.variable} ${geistMono.variable}`}
+    >
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: THEME_COLOR_SCRIPT,
+          }}
+        />
+      </head>
+      <body className="antialiased">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Toaster position="top-center" />
+          <SessionProvider>{children}</SessionProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

artifacts/actions.ts

@@ -0,0 +1,8 @@
+'use server';
+
+import { getSuggestionsByDocumentId } from '@/lib/db/queries';
+
+export async function getSuggestions({ documentId }: { documentId: string }) {
+  const suggestions = await getSuggestionsByDocumentId({ documentId });
+  return suggestions ?? [];
+}

artifacts/code/client.tsx

@@ -0,0 +1,280 @@
+import { Artifact } from '@/components/create-artifact';
+import { CodeEditor } from '@/components/code-editor';
+import {
+  CopyIcon,
+  LogsIcon,
+  MessageIcon,
+  PlayIcon,
+  RedoIcon,
+  UndoIcon,
+} from '@/components/icons';
+import { toast } from 'sonner';
+import { generateUUID } from '@/lib/utils';
+import {
+  Console,
+  type ConsoleOutput,
+  type ConsoleOutputContent,
+} from '@/components/console';
+
+const OUTPUT_HANDLERS = {
+  matplotlib: `
+    import io
+    import base64
+    from matplotlib import pyplot as plt
+
+    # Clear any existing plots
+    plt.clf()
+    plt.close('all')
+
+    # Switch to agg backend
+    plt.switch_backend('agg')
+
+    def setup_matplotlib_output():
+        def custom_show():
+            if plt.gcf().get_size_inches().prod() * plt.gcf().dpi ** 2 > 25_000_000:
+                print("Warning: Plot size too large, reducing quality")
+                plt.gcf().set_dpi(100)
+
+            png_buf = io.BytesIO()
+            plt.savefig(png_buf, format='png')
+            png_buf.seek(0)
+            png_base64 = base64.b64encode(png_buf.read()).decode('utf-8')
+            print(f'data:image/png;base64,{png_base64}')
+            png_buf.close()
+
+            plt.clf()
+            plt.close('all')
+
+        plt.show = custom_show
+  `,
+  basic: `
+    # Basic output capture setup
+  `,
+};
+
+function detectRequiredHandlers(code: string): string[] {
+  const handlers: string[] = ['basic'];
+
+  if (code.includes('matplotlib') || code.includes('plt.')) {
+    handlers.push('matplotlib');
+  }
+
+  return handlers;
+}
+
+interface Metadata {
+  outputs: Array<ConsoleOutput>;
+}
+
+export const codeArtifact = new Artifact<'code', Metadata>({
+  kind: 'code',
+  description:
+    'Useful for code generation; Code execution is only available for python code.',
+  initialize: async ({ setMetadata }) => {
+    setMetadata({
+      outputs: [],
+    });
+  },
+  onStreamPart: ({ streamPart, setArtifact }) => {
+    if (streamPart.type === 'data-codeDelta') {
+      setArtifact((draftArtifact) => ({
+        ...draftArtifact,
+        content: streamPart.data,
+        isVisible:
+          draftArtifact.status === 'streaming' &&
+          draftArtifact.content.length > 300 &&
+          draftArtifact.content.length < 310
+            ? true
+            : draftArtifact.isVisible,
+        status: 'streaming',
+      }));
+    }
+  },
+  content: ({ metadata, setMetadata, ...props }) => {
+    return (
+      <>
+        <div className="px-1">
+          <CodeEditor {...props} />
+        </div>
+
+        {metadata?.outputs && (
+          <Console
+            consoleOutputs={metadata.outputs}
+            setConsoleOutputs={() => {
+              setMetadata({
+                ...metadata,
+                outputs: [],
+              });
+            }}
+          />
+        )}
+      </>
+    );
+  },
+  actions: [
+    {
+      icon: <PlayIcon size={18} />,
+      label: 'Run',
+      description: 'Execute code',
+      onClick: async ({ content, setMetadata }) => {
+        const runId = generateUUID();
+        const outputContent: Array<ConsoleOutputContent> = [];
+
+        setMetadata((metadata) => ({
+          ...metadata,
+          outputs: [
+            ...metadata.outputs,
+            {
+              id: runId,
+              contents: [],
+              status: 'in_progress',
+            },
+          ],
+        }));
+
+        try {
+          // @ts-expect-error - loadPyodide is not defined
+          const currentPyodideInstance = await globalThis.loadPyodide({
+            indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.23.4/full/',
+          });
+
+          currentPyodideInstance.setStdout({
+            batched: (output: string) => {
+              outputContent.push({
+                type: output.startsWith('data:image/png;base64')
+                  ? 'image'
+                  : 'text',
+                value: output,
+              });
+            },
+          });
+
+          await currentPyodideInstance.loadPackagesFromImports(content, {
+            messageCallback: (message: string) => {
+              setMetadata((metadata) => ({
+                ...metadata,
+                outputs: [
+                  ...metadata.outputs.filter((output) => output.id !== runId),
+                  {
+                    id: runId,
+                    contents: [{ type: 'text', value: message }],
+                    status: 'loading_packages',
+                  },
+                ],
+              }));
+            },
+          });
+
+          const requiredHandlers = detectRequiredHandlers(content);
+          for (const handler of requiredHandlers) {
+            if (OUTPUT_HANDLERS[handler as keyof typeof OUTPUT_HANDLERS]) {
+              await currentPyodideInstance.runPythonAsync(
+                OUTPUT_HANDLERS[handler as keyof typeof OUTPUT_HANDLERS],
+              );
+
+              if (handler === 'matplotlib') {
+                await currentPyodideInstance.runPythonAsync(
+                  'setup_matplotlib_output()',
+                );
+              }
+            }
+          }
+
+          await currentPyodideInstance.runPythonAsync(content);
+
+          setMetadata((metadata) => ({
+            ...metadata,
+            outputs: [
+              ...metadata.outputs.filter((output) => output.id !== runId),
+              {
+                id: runId,
+                contents: outputContent,
+                status: 'completed',
+              },
+            ],
+          }));
+        } catch (error: any) {
+          setMetadata((metadata) => ({
+            ...metadata,
+            outputs: [
+              ...metadata.outputs.filter((output) => output.id !== runId),
+              {
+                id: runId,
+                contents: [{ type: 'text', value: error.message }],
+                status: 'failed',
+              },
+            ],
+          }));
+        }
+      },
+    },
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+      isDisabled: ({ currentVersionIndex }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+      isDisabled: ({ isCurrentVersion }) => {
+        if (isCurrentVersion) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <CopyIcon size={18} />,
+      description: 'Copy code to clipboard',
+      onClick: ({ content }) => {
+        navigator.clipboard.writeText(content);
+        toast.success('Copied to clipboard!');
+      },
+    },
+  ],
+  toolbar: [
+    {
+      icon: <MessageIcon />,
+      description: 'Add comments',
+      onClick: ({ sendMessage }) => {
+        sendMessage({
+          role: 'user',
+          parts: [
+            {
+              type: 'text',
+              text: 'Add comments to the code snippet for understanding',
+            },
+          ],
+        });
+      },
+    },
+    {
+      icon: <LogsIcon />,
+      description: 'Add logs',
+      onClick: ({ sendMessage }) => {
+        sendMessage({
+          role: 'user',
+          parts: [
+            {
+              type: 'text',
+              text: 'Add logs to the code snippet for debugging',
+            },
+          ],
+        });
+      },
+    },
+  ],
+});

artifacts/code/server.ts

@@ -0,0 +1,75 @@
+import { z } from 'zod';
+import { streamObject } from 'ai';
+import { myProvider } from '@/lib/ai/providers';
+import { codePrompt, updateDocumentPrompt } from '@/lib/ai/prompts';
+import { createDocumentHandler } from '@/lib/artifacts/server';
+
+export const codeDocumentHandler = createDocumentHandler<'code'>({
+  kind: 'code',
+  onCreateDocument: async ({ title, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamObject({
+      model: myProvider.languageModel('artifact-model'),
+      system: codePrompt,
+      prompt: title,
+      schema: z.object({
+        code: z.string(),
+      }),
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'object') {
+        const { object } = delta;
+        const { code } = object;
+
+        if (code) {
+          dataStream.write({
+            type: 'data-codeDelta',
+            data: code ?? '',
+            transient: true,
+          });
+
+          draftContent = code;
+        }
+      }
+    }
+
+    return draftContent;
+  },
+  onUpdateDocument: async ({ document, description, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamObject({
+      model: myProvider.languageModel('artifact-model'),
+      system: updateDocumentPrompt(document.content, 'code'),
+      prompt: description,
+      schema: z.object({
+        code: z.string(),
+      }),
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'object') {
+        const { object } = delta;
+        const { code } = object;
+
+        if (code) {
+          dataStream.write({
+            type: 'data-codeDelta',
+            data: code ?? '',
+            transient: true,
+          });
+
+          draftContent = code;
+        }
+      }
+    }
+
+    return draftContent;
+  },
+});

artifacts/image/client.tsx

@@ -0,0 +1,76 @@
+import { Artifact } from '@/components/create-artifact';
+import { CopyIcon, RedoIcon, UndoIcon } from '@/components/icons';
+import { ImageEditor } from '@/components/image-editor';
+import { toast } from 'sonner';
+
+export const imageArtifact = new Artifact({
+  kind: 'image',
+  description: 'Useful for image generation',
+  onStreamPart: ({ streamPart, setArtifact }) => {
+    if (streamPart.type === 'data-imageDelta') {
+      setArtifact((draftArtifact) => ({
+        ...draftArtifact,
+        content: streamPart.data,
+        isVisible: true,
+        status: 'streaming',
+      }));
+    }
+  },
+  content: ImageEditor,
+  actions: [
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+      isDisabled: ({ currentVersionIndex }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+      isDisabled: ({ isCurrentVersion }) => {
+        if (isCurrentVersion) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <CopyIcon size={18} />,
+      description: 'Copy image to clipboard',
+      onClick: ({ content }) => {
+        const img = new Image();
+        img.src = `data:image/png;base64,${content}`;
+
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const ctx = canvas.getContext('2d');
+          ctx?.drawImage(img, 0, 0);
+          canvas.toBlob((blob) => {
+            if (blob) {
+              navigator.clipboard.write([
+                new ClipboardItem({ 'image/png': blob }),
+              ]);
+            }
+          }, 'image/png');
+        };
+
+        toast.success('Copied image to clipboard!');
+      },
+    },
+  ],
+  toolbar: [],
+});

artifacts/image/server.ts

@@ -0,0 +1,45 @@
+import { myProvider } from '@/lib/ai/providers';
+import { createDocumentHandler } from '@/lib/artifacts/server';
+import { experimental_generateImage } from 'ai';
+
+export const imageDocumentHandler = createDocumentHandler<'image'>({
+  kind: 'image',
+  onCreateDocument: async ({ title, dataStream }) => {
+    let draftContent = '';
+
+    const { image } = await experimental_generateImage({
+      model: myProvider.imageModel('small-model'),
+      prompt: title,
+      n: 1,
+    });
+
+    draftContent = image.base64;
+
+    dataStream.write({
+      type: 'data-imageDelta',
+      data: image.base64,
+      transient: true,
+    });
+
+    return draftContent;
+  },
+  onUpdateDocument: async ({ description, dataStream }) => {
+    let draftContent = '';
+
+    const { image } = await experimental_generateImage({
+      model: myProvider.imageModel('small-model'),
+      prompt: description,
+      n: 1,
+    });
+
+    draftContent = image.base64;
+
+    dataStream.write({
+      type: 'data-imageDelta',
+      data: image.base64,
+      transient: true,
+    });
+
+    return draftContent;
+  },
+});

artifacts/sheet/client.tsx

@@ -0,0 +1,121 @@
+import { Artifact } from '@/components/create-artifact';
+import {
+  CopyIcon,
+  LineChartIcon,
+  RedoIcon,
+  SparklesIcon,
+  UndoIcon,
+} from '@/components/icons';
+import { SpreadsheetEditor } from '@/components/sheet-editor';
+import { parse, unparse } from 'papaparse';
+import { toast } from 'sonner';
+
+type Metadata = any;
+
+export const sheetArtifact = new Artifact<'sheet', Metadata>({
+  kind: 'sheet',
+  description: 'Useful for working with spreadsheets',
+  initialize: async () => {},
+  onStreamPart: ({ setArtifact, streamPart }) => {
+    if (streamPart.type === 'data-sheetDelta') {
+      setArtifact((draftArtifact) => ({
+        ...draftArtifact,
+        content: streamPart.data,
+        isVisible: true,
+        status: 'streaming',
+      }));
+    }
+  },
+  content: ({
+    content,
+    currentVersionIndex,
+    isCurrentVersion,
+    onSaveContent,
+    status,
+  }) => {
+    return (
+      <SpreadsheetEditor
+        content={content}
+        currentVersionIndex={currentVersionIndex}
+        isCurrentVersion={isCurrentVersion}
+        saveContent={onSaveContent}
+        status={status}
+      />
+    );
+  },
+  actions: [
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+      isDisabled: ({ currentVersionIndex }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+      isDisabled: ({ isCurrentVersion }) => {
+        if (isCurrentVersion) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <CopyIcon />,
+      description: 'Copy as .csv',
+      onClick: ({ content }) => {
+        const parsed = parse<string[]>(content, { skipEmptyLines: true });
+
+        const nonEmptyRows = parsed.data.filter((row) =>
+          row.some((cell) => cell.trim() !== ''),
+        );
+
+        const cleanedCsv = unparse(nonEmptyRows);
+
+        navigator.clipboard.writeText(cleanedCsv);
+        toast.success('Copied csv to clipboard!');
+      },
+    },
+  ],
+  toolbar: [
+    {
+      description: 'Format and clean data',
+      icon: <SparklesIcon />,
+      onClick: ({ sendMessage }) => {
+        sendMessage({
+          role: 'user',
+          parts: [
+            { type: 'text', text: 'Can you please format and clean the data?' },
+          ],
+        });
+      },
+    },
+    {
+      description: 'Analyze and visualize data',
+      icon: <LineChartIcon />,
+      onClick: ({ sendMessage }) => {
+        sendMessage({
+          role: 'user',
+          parts: [
+            {
+              type: 'text',
+              text: 'Can you please analyze and visualize the data by creating a new code artifact in python?',
+            },
+          ],
+        });
+      },
+    },
+  ],
+});

artifacts/sheet/server.ts

@@ -0,0 +1,81 @@
+import { myProvider } from '@/lib/ai/providers';
+import { sheetPrompt, updateDocumentPrompt } from '@/lib/ai/prompts';
+import { createDocumentHandler } from '@/lib/artifacts/server';
+import { streamObject } from 'ai';
+import { z } from 'zod';
+
+export const sheetDocumentHandler = createDocumentHandler<'sheet'>({
+  kind: 'sheet',
+  onCreateDocument: async ({ title, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamObject({
+      model: myProvider.languageModel('artifact-model'),
+      system: sheetPrompt,
+      prompt: title,
+      schema: z.object({
+        csv: z.string().describe('CSV data'),
+      }),
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'object') {
+        const { object } = delta;
+        const { csv } = object;
+
+        if (csv) {
+          dataStream.write({
+            type: 'data-sheetDelta',
+            data: csv,
+            transient: true,
+          });
+
+          draftContent = csv;
+        }
+      }
+    }
+
+    dataStream.write({
+      type: 'data-sheetDelta',
+      data: draftContent,
+      transient: true,
+    });
+
+    return draftContent;
+  },
+  onUpdateDocument: async ({ document, description, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamObject({
+      model: myProvider.languageModel('artifact-model'),
+      system: updateDocumentPrompt(document.content, 'sheet'),
+      prompt: description,
+      schema: z.object({
+        csv: z.string(),
+      }),
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'object') {
+        const { object } = delta;
+        const { csv } = object;
+
+        if (csv) {
+          dataStream.write({
+            type: 'data-sheetDelta',
+            data: csv,
+            transient: true,
+          });
+
+          draftContent = csv;
+        }
+      }
+    }
+
+    return draftContent;
+  },
+});

artifacts/text/client.tsx

@@ -0,0 +1,181 @@
+import { Artifact } from '@/components/create-artifact';
+import { DiffView } from '@/components/diffview';
+import { DocumentSkeleton } from '@/components/document-skeleton';
+import { Editor } from '@/components/text-editor';
+import {
+  ClockRewind,
+  CopyIcon,
+  MessageIcon,
+  PenIcon,
+  RedoIcon,
+  UndoIcon,
+} from '@/components/icons';
+import type { Suggestion } from '@/lib/db/schema';
+import { toast } from 'sonner';
+import { getSuggestions } from '../actions';
+
+interface TextArtifactMetadata {
+  suggestions: Array<Suggestion>;
+}
+
+export const textArtifact = new Artifact<'text', TextArtifactMetadata>({
+  kind: 'text',
+  description: 'Useful for text content, like drafting essays and emails.',
+  initialize: async ({ documentId, setMetadata }) => {
+    const suggestions = await getSuggestions({ documentId });
+
+    setMetadata({
+      suggestions,
+    });
+  },
+  onStreamPart: ({ streamPart, setMetadata, setArtifact }) => {
+    if (streamPart.type === 'data-suggestion') {
+      setMetadata((metadata) => {
+        return {
+          suggestions: [...metadata.suggestions, streamPart.data],
+        };
+      });
+    }
+
+    if (streamPart.type === 'data-textDelta') {
+      setArtifact((draftArtifact) => {
+        return {
+          ...draftArtifact,
+          content: draftArtifact.content + streamPart.data,
+          isVisible:
+            draftArtifact.status === 'streaming' &&
+            draftArtifact.content.length > 400 &&
+            draftArtifact.content.length < 450
+              ? true
+              : draftArtifact.isVisible,
+          status: 'streaming',
+        };
+      });
+    }
+  },
+  content: ({
+    mode,
+    status,
+    content,
+    isCurrentVersion,
+    currentVersionIndex,
+    onSaveContent,
+    getDocumentContentById,
+    isLoading,
+    metadata,
+  }) => {
+    if (isLoading) {
+      return <DocumentSkeleton artifactKind="text" />;
+    }
+
+    if (mode === 'diff') {
+      const oldContent = getDocumentContentById(currentVersionIndex - 1);
+      const newContent = getDocumentContentById(currentVersionIndex);
+
+      return <DiffView oldContent={oldContent} newContent={newContent} />;
+    }
+
+    return (
+      <>
+        <div className="flex flex-row py-8 md:p-20 px-4">
+          <Editor
+            content={content}
+            suggestions={metadata ? metadata.suggestions : []}
+            isCurrentVersion={isCurrentVersion}
+            currentVersionIndex={currentVersionIndex}
+            status={status}
+            onSaveContent={onSaveContent}
+          />
+
+          {metadata?.suggestions && metadata.suggestions.length > 0 ? (
+            <div className="md:hidden h-dvh w-12 shrink-0" />
+          ) : null}
+        </div>
+      </>
+    );
+  },
+  actions: [
+    {
+      icon: <ClockRewind size={18} />,
+      description: 'View changes',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('toggle');
+      },
+      isDisabled: ({ currentVersionIndex, setMetadata }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+      isDisabled: ({ currentVersionIndex }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+      isDisabled: ({ isCurrentVersion }) => {
+        if (isCurrentVersion) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <CopyIcon size={18} />,
+      description: 'Copy to clipboard',
+      onClick: ({ content }) => {
+        navigator.clipboard.writeText(content);
+        toast.success('Copied to clipboard!');
+      },
+    },
+  ],
+  toolbar: [
+    {
+      icon: <PenIcon />,
+      description: 'Add final polish',
+      onClick: ({ sendMessage }) => {
+        sendMessage({
+          role: 'user',
+          parts: [
+            {
+              type: 'text',
+              text: 'Please add final polish and check for grammar, add section titles for better structure, and ensure everything reads smoothly.',
+            },
+          ],
+        });
+      },
+    },
+    {
+      icon: <MessageIcon />,
+      description: 'Request suggestions',
+      onClick: ({ sendMessage }) => {
+        sendMessage({
+          role: 'user',
+          parts: [
+            {
+              type: 'text',
+              text: 'Please add suggestions you have that could improve the writing.',
+            },
+          ],
+        });
+      },
+    },
+  ],
+});

artifacts/text/server.ts

@@ -0,0 +1,73 @@
+import { smoothStream, streamText } from 'ai';
+import { myProvider } from '@/lib/ai/providers';
+import { createDocumentHandler } from '@/lib/artifacts/server';
+import { updateDocumentPrompt } from '@/lib/ai/prompts';
+
+export const textDocumentHandler = createDocumentHandler<'text'>({
+  kind: 'text',
+  onCreateDocument: async ({ title, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamText({
+      model: myProvider.languageModel('artifact-model'),
+      system:
+        'Write about the given topic. Markdown is supported. Use headings wherever appropriate.',
+      experimental_transform: smoothStream({ chunking: 'word' }),
+      prompt: title,
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'text-delta') {
+        const { text } = delta;
+
+        draftContent += text;
+
+        dataStream.write({
+          type: 'data-textDelta',
+          data: text,
+          transient: true,
+        });
+      }
+    }
+
+    return draftContent;
+  },
+  onUpdateDocument: async ({ document, description, dataStream }) => {
+    let draftContent = '';
+
+    const { fullStream } = streamText({
+      model: myProvider.languageModel('artifact-model'),
+      system: updateDocumentPrompt(document.content, 'text'),
+      experimental_transform: smoothStream({ chunking: 'word' }),
+      prompt: description,
+      providerOptions: {
+        openai: {
+          prediction: {
+            type: 'content',
+            content: document.content,
+          },
+        },
+      },
+    });
+
+    for await (const delta of fullStream) {
+      const { type } = delta;
+
+      if (type === 'text-delta') {
+        const { text } = delta;
+
+        draftContent += text;
+
+        dataStream.write({
+          type: 'data-textDelta',
+          data: text,
+          transient: true,
+        });
+      }
+    }
+
+    return draftContent;
+  },
+});

biome.jsonc

@@ -0,0 +1,135 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": [
+      "**/pnpm-lock.yaml",
+      "lib/db/migrations",
+      "lib/editor/react-renderer.tsx",
+      "node_modules",
+      ".next",
+      "public",
+      ".vercel"
+    ]
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "defaultBranch": "main",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useHtmlLang": "warn", // Not in recommended ruleset, turning on manually
+        "noHeaderScope": "warn", // Not in recommended ruleset, turning on manually
+        "useValidAriaRole": {
+          "level": "warn",
+          "options": {
+            "ignoreNonDom": false,
+            "allowInvalidRoles": ["none", "text"]
+          }
+        },
+        "useSemanticElements": "off", // Rule is buggy, revisit later
+        "noSvgWithoutTitle": "off", // We do not intend to adhere to this rule
+        "useMediaCaption": "off", // We would need a cultural change to turn this on
+        "noAutofocus": "off", // We're highly intentional about when we use autofocus
+        "noBlankTarget": "off", // Covered by Conformance
+        "useFocusableInteractive": "off", // Disable focusable interactive element requirement
+        "useAriaPropsForRole": "off", // Disable required ARIA attributes check
+        "useKeyWithClickEvents": "off" // Disable keyboard event requirement with click events
+      },
+      "complexity": {
+        "noUselessStringConcat": "warn", // Not in recommended ruleset, turning on manually
+        "noForEach": "off", // forEach is too familiar to ban
+        "noUselessSwitchCase": "off", // Turned off due to developer preferences
+        "noUselessThisAlias": "off", // Turned off due to developer preferences
+        "noBannedTypes": "off"
+      },
+      "correctness": {
+        "noUnusedImports": "warn", // Not in recommended ruleset, turning on manually
+        "useArrayLiterals": "warn", // Not in recommended ruleset, turning on manually
+        "noNewSymbol": "warn", // Not in recommended ruleset, turning on manually
+        "useJsxKeyInIterable": "off", // Rule is buggy, revisit later
+        "useExhaustiveDependencies": "off", // Community feedback on this rule has been poor, we will continue with ESLint
+        "noUnnecessaryContinue": "off" // Turned off due to developer preferences
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off" // Covered by Conformance
+      },
+      "style": {
+        "useFragmentSyntax": "warn", // Not in recommended ruleset, turning on manually
+        "noYodaExpression": "warn", // Not in recommended ruleset, turning on manually
+        "useDefaultParameterLast": "warn", // Not in recommended ruleset, turning on manually
+        "useExponentiationOperator": "off", // Obscure and arguably not easily readable
+        "noUnusedTemplateLiteral": "off", // Stylistic opinion
+        "noUselessElse": "off" // Stylistic opinion
+      },
+      "suspicious": {
+        "noExplicitAny": "off" // We trust Vercelians to use any only when necessary
+      },
+      "nursery": {
+        "noStaticElementInteractions": "warn",
+        "noHeadImportInDocument": "warn",
+        "noDocumentImportInPage": "warn",
+        "noDuplicateElseIf": "warn",
+        "noIrregularWhitespace": "warn",
+        "useValidAutocomplete": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "jsxRuntime": "reactClassic",
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto"
+    }
+  },
+  "json": {
+    "formatter": {
+      "enabled": true,
+      "trailingCommas": "none"
+    },
+    "parser": {
+      "allowComments": true,
+      "allowTrailingCommas": false
+    }
+  },
+  "css": {
+    "formatter": { "enabled": false },
+    "linter": { "enabled": false }
+  },
+  "organizeImports": { "enabled": false },
+  "overrides": [
+    // Playwright requires an object destructure, even if empty
+    // https://github.com/microsoft/playwright/issues/30007
+    {
+      "include": ["playwright/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noEmptyPattern": "off"
+          }
+        }
+      }
+    }
+  ]
+}

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

components/app-sidebar.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import type { User } from 'next-auth';
+import { useRouter } from 'next/navigation';
+
+import { PlusIcon } from '@/components/icons';
+import { SidebarHistory } from '@/components/sidebar-history';
+import { SidebarUserNav } from '@/components/sidebar-user-nav';
+import { Button } from '@/components/ui/button';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  useSidebar,
+} from '@/components/ui/sidebar';
+import Link from 'next/link';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+export function AppSidebar({ user }: { user: User | undefined }) {
+  const router = useRouter();
+  const { setOpenMobile } = useSidebar();
+
+  return (
+    <Sidebar className="group-data-[side=left]:border-r-0">
+      <SidebarHeader>
+        <SidebarMenu>
+          <div className="flex flex-row justify-between items-center">
+            <Link
+              href="/"
+              onClick={() => {
+                setOpenMobile(false);
+              }}
+              className="flex flex-row gap-3 items-center"
+            >
+              <span className="text-lg font-semibold px-2 hover:bg-muted rounded-md cursor-pointer">
+                Chatbot
+              </span>
+            </Link>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  type="button"
+                  className="p-2 h-fit"
+                  onClick={() => {
+                    setOpenMobile(false);
+                    router.push('/');
+                    router.refresh();
+                  }}
+                >
+                  <PlusIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent align="end">New Chat</TooltipContent>
+            </Tooltip>
+          </div>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarHistory user={user} />
+      </SidebarContent>
+      <SidebarFooter>{user && <SidebarUserNav user={user} />}</SidebarFooter>
+    </Sidebar>
+  );
+}

components/artifact-actions.tsx

@@ -0,0 +1,100 @@
+import { Button } from './ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { artifactDefinitions, UIArtifact } from './artifact';
+import { Dispatch, memo, SetStateAction, useState } from 'react';
+import { ArtifactActionContext } from './create-artifact';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+interface ArtifactActionsProps {
+  artifact: UIArtifact;
+  handleVersionChange: (type: 'next' | 'prev' | 'toggle' | 'latest') => void;
+  currentVersionIndex: number;
+  isCurrentVersion: boolean;
+  mode: 'edit' | 'diff';
+  metadata: any;
+  setMetadata: Dispatch<SetStateAction<any>>;
+}
+
+function PureArtifactActions({
+  artifact,
+  handleVersionChange,
+  currentVersionIndex,
+  isCurrentVersion,
+  mode,
+  metadata,
+  setMetadata,
+}: ArtifactActionsProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const artifactDefinition = artifactDefinitions.find(
+    (definition) => definition.kind === artifact.kind,
+  );
+
+  if (!artifactDefinition) {
+    throw new Error('Artifact definition not found!');
+  }
+
+  const actionContext: ArtifactActionContext = {
+    content: artifact.content,
+    handleVersionChange,
+    currentVersionIndex,
+    isCurrentVersion,
+    mode,
+    metadata,
+    setMetadata,
+  };
+
+  return (
+    <div className="flex flex-row gap-1">
+      {artifactDefinition.actions.map((action) => (
+        <Tooltip key={action.description}>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              className={cn('h-fit dark:hover:bg-zinc-700', {
+                'p-2': !action.label,
+                'py-1.5 px-2': action.label,
+              })}
+              onClick={async () => {
+                setIsLoading(true);
+
+                try {
+                  await Promise.resolve(action.onClick(actionContext));
+                } catch (error) {
+                  toast.error('Failed to execute action');
+                } finally {
+                  setIsLoading(false);
+                }
+              }}
+              disabled={
+                isLoading || artifact.status === 'streaming'
+                  ? true
+                  : action.isDisabled
+                    ? action.isDisabled(actionContext)
+                    : false
+              }
+            >
+              {action.icon}
+              {action.label}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{action.description}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
+
+export const ArtifactActions = memo(
+  PureArtifactActions,
+  (prevProps, nextProps) => {
+    if (prevProps.artifact.status !== nextProps.artifact.status) return false;
+    if (prevProps.currentVersionIndex !== nextProps.currentVersionIndex)
+      return false;
+    if (prevProps.isCurrentVersion !== nextProps.isCurrentVersion) return false;
+    if (prevProps.artifact.content !== nextProps.artifact.content) return false;
+
+    return true;
+  },
+);

components/artifact-close-button.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+import { CrossIcon } from './icons';
+import { Button } from './ui/button';
+import { initialArtifactData, useArtifact } from '@/hooks/use-artifact';
+
+function PureArtifactCloseButton() {
+  const { setArtifact } = useArtifact();
+
+  return (
+    <Button
+      data-testid="artifact-close-button"
+      variant="outline"
+      className="h-fit p-2 dark:hover:bg-zinc-700"
+      onClick={() => {
+        setArtifact((currentArtifact) =>
+          currentArtifact.status === 'streaming'
+            ? {
+                ...currentArtifact,
+                isVisible: false,
+              }
+            : { ...initialArtifactData, status: 'idle' },
+        );
+      }}
+    >
+      <CrossIcon size={18} />
+    </Button>
+  );
+}
+
+export const ArtifactCloseButton = memo(PureArtifactCloseButton, () => true);

components/artifact-messages.tsx

@@ -0,0 +1,99 @@
+import { PreviewMessage, ThinkingMessage } from './message';
+import type { Vote } from '@/lib/db/schema';
+import { memo } from 'react';
+import equal from 'fast-deep-equal';
+import type { UIArtifact } from './artifact';
+import type { UseChatHelpers } from '@ai-sdk/react';
+import { motion } from 'framer-motion';
+import { useMessages } from '@/hooks/use-messages';
+import type { ChatMessage } from '@/lib/types';
+
+interface ArtifactMessagesProps {
+  chatId: string;
+  status: UseChatHelpers<ChatMessage>['status'];
+  votes: Array<Vote> | undefined;
+  messages: ChatMessage[];
+  setMessages: UseChatHelpers<ChatMessage>['setMessages'];
+  regenerate: UseChatHelpers<ChatMessage>['regenerate'];
+  isReadonly: boolean;
+  artifactStatus: UIArtifact['status'];
+}
+
+function PureArtifactMessages({
+  chatId,
+  status,
+  votes,
+  messages,
+  setMessages,
+  regenerate,
+  isReadonly,
+}: ArtifactMessagesProps) {
+  const {
+    containerRef: messagesContainerRef,
+    endRef: messagesEndRef,
+    onViewportEnter,
+    onViewportLeave,
+    hasSentMessage,
+  } = useMessages({
+    chatId,
+    status,
+  });
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className="flex flex-col gap-4 h-full items-center overflow-y-scroll px-4 pt-20"
+    >
+      {messages.map((message, index) => (
+        <PreviewMessage
+          chatId={chatId}
+          key={message.id}
+          message={message}
+          isLoading={status === 'streaming' && index === messages.length - 1}
+          vote={
+            votes
+              ? votes.find((vote) => vote.messageId === message.id)
+              : undefined
+          }
+          setMessages={setMessages}
+          regenerate={regenerate}
+          isReadonly={isReadonly}
+          requiresScrollPadding={
+            hasSentMessage && index === messages.length - 1
+          }
+        />
+      ))}
+
+      {status === 'submitted' &&
+        messages.length > 0 &&
+        messages[messages.length - 1].role === 'user' && <ThinkingMessage />}
+
+      <motion.div
+        ref={messagesEndRef}
+        className="shrink-0 min-w-[24px] min-h-[24px]"
+        onViewportLeave={onViewportLeave}
+        onViewportEnter={onViewportEnter}
+      />
+    </div>
+  );
+}
+
+function areEqual(
+  prevProps: ArtifactMessagesProps,
+  nextProps: ArtifactMessagesProps,
+) {
+  if (
+    prevProps.artifactStatus === 'streaming' &&
+    nextProps.artifactStatus === 'streaming'
+  )
+    return true;
+
+  if (prevProps.status !== nextProps.status) return false;
+  if (prevProps.status && nextProps.status) return false;
+  if (prevProps.messages.length !== nextProps.messages.length) return false;
+  if (!equal(prevProps.votes, nextProps.votes)) return false;
+
+  return true;
+}
+
+export const ArtifactMessages = memo(PureArtifactMessages, areEqual);

components/artifact.tsx

@@ -0,0 +1,511 @@
+import { formatDistance } from 'date-fns';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  type Dispatch,
+  memo,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import useSWR, { useSWRConfig } from 'swr';
+import { useDebounceCallback, useWindowSize } from 'usehooks-ts';
+import type { Document, Vote } from '@/lib/db/schema';
+import { fetcher } from '@/lib/utils';
+import { MultimodalInput } from './multimodal-input';
+import { Toolbar } from './toolbar';
+import { VersionFooter } from './version-footer';
+import { ArtifactActions } from './artifact-actions';
+import { ArtifactCloseButton } from './artifact-close-button';
+import { ArtifactMessages } from './artifact-messages';
+import { useSidebar } from './ui/sidebar';
+import { useArtifact } from '@/hooks/use-artifact';
+import { imageArtifact } from '@/artifacts/image/client';
+import { codeArtifact } from '@/artifacts/code/client';
+import { sheetArtifact } from '@/artifacts/sheet/client';
+import { textArtifact } from '@/artifacts/text/client';
+import equal from 'fast-deep-equal';
+import type { UseChatHelpers } from '@ai-sdk/react';
+import type { VisibilityType } from './visibility-selector';
+import type { Attachment, ChatMessage } from '@/lib/types';
+
+export const artifactDefinitions = [
+  textArtifact,
+  codeArtifact,
+  imageArtifact,
+  sheetArtifact,
+];
+export type ArtifactKind = (typeof artifactDefinitions)[number]['kind'];
+
+export interface UIArtifact {
+  title: string;
+  documentId: string;
+  kind: ArtifactKind;
+  content: string;
+  isVisible: boolean;
+  status: 'streaming' | 'idle';
+  boundingBox: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  };
+}
+
+function PureArtifact({
+  chatId,
+  input,
+  setInput,
+  status,
+  stop,
+  attachments,
+  setAttachments,
+  sendMessage,
+  messages,
+  setMessages,
+  regenerate,
+  votes,
+  isReadonly,
+  selectedVisibilityType,
+}: {
+  chatId: string;
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+  status: UseChatHelpers<ChatMessage>['status'];
+  stop: UseChatHelpers<ChatMessage>['stop'];
+  attachments: Attachment[];
+  setAttachments: Dispatch<SetStateAction<Attachment[]>>;
+  messages: ChatMessage[];
+  setMessages: UseChatHelpers<ChatMessage>['setMessages'];
+  votes: Array<Vote> | undefined;
+  sendMessage: UseChatHelpers<ChatMessage>['sendMessage'];
+  regenerate: UseChatHelpers<ChatMessage>['regenerate'];
+  isReadonly: boolean;
+  selectedVisibilityType: VisibilityType;
+}) {
+  const { artifact, setArtifact, metadata, setMetadata } = useArtifact();
+
+  const {
+    data: documents,
+    isLoading: isDocumentsFetching,
+    mutate: mutateDocuments,
+  } = useSWR<Array<Document>>(
+    artifact.documentId !== 'init' && artifact.status !== 'streaming'
+      ? `/api/document?id=${artifact.documentId}`
+      : null,
+    fetcher,
+  );
+
+  const [mode, setMode] = useState<'edit' | 'diff'>('edit');
+  const [document, setDocument] = useState<Document | null>(null);
+  const [currentVersionIndex, setCurrentVersionIndex] = useState(-1);
+
+  const { open: isSidebarOpen } = useSidebar();
+
+  useEffect(() => {
+    if (documents && documents.length > 0) {
+      const mostRecentDocument = documents.at(-1);
+
+      if (mostRecentDocument) {
+        setDocument(mostRecentDocument);
+        setCurrentVersionIndex(documents.length - 1);
+        setArtifact((currentArtifact) => ({
+          ...currentArtifact,
+          content: mostRecentDocument.content ?? '',
+        }));
+      }
+    }
+  }, [documents, setArtifact]);
+
+  useEffect(() => {
+    mutateDocuments();
+  }, [artifact.status, mutateDocuments]);
+
+  const { mutate } = useSWRConfig();
+  const [isContentDirty, setIsContentDirty] = useState(false);
+
+  const handleContentChange = useCallback(
+    (updatedContent: string) => {
+      if (!artifact) return;
+
+      mutate<Array<Document>>(
+        `/api/document?id=${artifact.documentId}`,
+        async (currentDocuments) => {
+          if (!currentDocuments) return undefined;
+
+          const currentDocument = currentDocuments.at(-1);
+
+          if (!currentDocument || !currentDocument.content) {
+            setIsContentDirty(false);
+            return currentDocuments;
+          }
+
+          if (currentDocument.content !== updatedContent) {
+            await fetch(`/api/document?id=${artifact.documentId}`, {
+              method: 'POST',
+              body: JSON.stringify({
+                title: artifact.title,
+                content: updatedContent,
+                kind: artifact.kind,
+              }),
+            });
+
+            setIsContentDirty(false);
+
+            const newDocument = {
+              ...currentDocument,
+              content: updatedContent,
+              createdAt: new Date(),
+            };
+
+            return [...currentDocuments, newDocument];
+          }
+          return currentDocuments;
+        },
+        { revalidate: false },
+      );
+    },
+    [artifact, mutate],
+  );
+
+  const debouncedHandleContentChange = useDebounceCallback(
+    handleContentChange,
+    2000,
+  );
+
+  const saveContent = useCallback(
+    (updatedContent: string, debounce: boolean) => {
+      if (document && updatedContent !== document.content) {
+        setIsContentDirty(true);
+
+        if (debounce) {
+          debouncedHandleContentChange(updatedContent);
+        } else {
+          handleContentChange(updatedContent);
+        }
+      }
+    },
+    [document, debouncedHandleContentChange, handleContentChange],
+  );
+
+  function getDocumentContentById(index: number) {
+    if (!documents) return '';
+    if (!documents[index]) return '';
+    return documents[index].content ?? '';
+  }
+
+  const handleVersionChange = (type: 'next' | 'prev' | 'toggle' | 'latest') => {
+    if (!documents) return;
+
+    if (type === 'latest') {
+      setCurrentVersionIndex(documents.length - 1);
+      setMode('edit');
+    }
+
+    if (type === 'toggle') {
+      setMode((mode) => (mode === 'edit' ? 'diff' : 'edit'));
+    }
+
+    if (type === 'prev') {
+      if (currentVersionIndex > 0) {
+        setCurrentVersionIndex((index) => index - 1);
+      }
+    } else if (type === 'next') {
+      if (currentVersionIndex < documents.length - 1) {
+        setCurrentVersionIndex((index) => index + 1);
+      }
+    }
+  };
+
+  const [isToolbarVisible, setIsToolbarVisible] = useState(false);
+
+  /*
+   * NOTE: if there are no documents, or if
+   * the documents are being fetched, then
+   * we mark it as the current version.
+   */
+
+  const isCurrentVersion =
+    documents && documents.length > 0
+      ? currentVersionIndex === documents.length - 1
+      : true;
+
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
+  const isMobile = windowWidth ? windowWidth < 768 : false;
+
+  const artifactDefinition = artifactDefinitions.find(
+    (definition) => definition.kind === artifact.kind,
+  );
+
+  if (!artifactDefinition) {
+    throw new Error('Artifact definition not found!');
+  }
+
+  useEffect(() => {
+    if (artifact.documentId !== 'init') {
+      if (artifactDefinition.initialize) {
+        artifactDefinition.initialize({
+          documentId: artifact.documentId,
+          setMetadata,
+        });
+      }
+    }
+  }, [artifact.documentId, artifactDefinition, setMetadata]);
+
+  return (
+    <AnimatePresence>
+      {artifact.isVisible && (
+        <motion.div
+          data-testid="artifact"
+          className="flex flex-row h-dvh w-dvw fixed top-0 left-0 z-50 bg-transparent"
+          initial={{ opacity: 1 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { delay: 0.4 } }}
+        >
+          {!isMobile && (
+            <motion.div
+              className="fixed bg-background h-dvh"
+              initial={{
+                width: isSidebarOpen ? windowWidth - 256 : windowWidth,
+                right: 0,
+              }}
+              animate={{ width: windowWidth, right: 0 }}
+              exit={{
+                width: isSidebarOpen ? windowWidth - 256 : windowWidth,
+                right: 0,
+              }}
+            />
+          )}
+
+          {!isMobile && (
+            <motion.div
+              className="relative w-[400px] bg-muted dark:bg-background h-dvh shrink-0"
+              initial={{ opacity: 0, x: 10, scale: 1 }}
+              animate={{
+                opacity: 1,
+                x: 0,
+                scale: 1,
+                transition: {
+                  delay: 0.2,
+                  type: 'spring',
+                  stiffness: 200,
+                  damping: 30,
+                },
+              }}
+              exit={{
+                opacity: 0,
+                x: 0,
+                scale: 1,
+                transition: { duration: 0 },
+              }}
+            >
+              <AnimatePresence>
+                {!isCurrentVersion && (
+                  <motion.div
+                    className="left-0 absolute h-dvh w-[400px] top-0 bg-zinc-900/50 z-50"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                  />
+                )}
+              </AnimatePresence>
+
+              <div className="flex flex-col h-full justify-between items-center">
+                <ArtifactMessages
+                  chatId={chatId}
+                  status={status}
+                  votes={votes}
+                  messages={messages}
+                  setMessages={setMessages}
+                  regenerate={regenerate}
+                  isReadonly={isReadonly}
+                  artifactStatus={artifact.status}
+                />
+
+                <div className="flex flex-row gap-2 relative items-end w-full px-4 pb-4">
+                  <MultimodalInput
+                    chatId={chatId}
+                    input={input}
+                    setInput={setInput}
+                    status={status}
+                    stop={stop}
+                    attachments={attachments}
+                    setAttachments={setAttachments}
+                    messages={messages}
+                    sendMessage={sendMessage}
+                    className="bg-background dark:bg-muted"
+                    setMessages={setMessages}
+                    selectedVisibilityType={selectedVisibilityType}
+                  />
+                </div>
+              </div>
+            </motion.div>
+          )}
+
+          <motion.div
+            className="fixed dark:bg-muted bg-background h-dvh flex flex-col overflow-y-scroll md:border-l dark:border-zinc-700 border-zinc-200"
+            initial={
+              isMobile
+                ? {
+                    opacity: 1,
+                    x: artifact.boundingBox.left,
+                    y: artifact.boundingBox.top,
+                    height: artifact.boundingBox.height,
+                    width: artifact.boundingBox.width,
+                    borderRadius: 50,
+                  }
+                : {
+                    opacity: 1,
+                    x: artifact.boundingBox.left,
+                    y: artifact.boundingBox.top,
+                    height: artifact.boundingBox.height,
+                    width: artifact.boundingBox.width,
+                    borderRadius: 50,
+                  }
+            }
+            animate={
+              isMobile
+                ? {
+                    opacity: 1,
+                    x: 0,
+                    y: 0,
+                    height: windowHeight,
+                    width: windowWidth ? windowWidth : 'calc(100dvw)',
+                    borderRadius: 0,
+                    transition: {
+                      delay: 0,
+                      type: 'spring',
+                      stiffness: 200,
+                      damping: 30,
+                      duration: 5000,
+                    },
+                  }
+                : {
+                    opacity: 1,
+                    x: 400,
+                    y: 0,
+                    height: windowHeight,
+                    width: windowWidth
+                      ? windowWidth - 400
+                      : 'calc(100dvw-400px)',
+                    borderRadius: 0,
+                    transition: {
+                      delay: 0,
+                      type: 'spring',
+                      stiffness: 200,
+                      damping: 30,
+                      duration: 5000,
+                    },
+                  }
+            }
+            exit={{
+              opacity: 0,
+              scale: 0.5,
+              transition: {
+                delay: 0.1,
+                type: 'spring',
+                stiffness: 600,
+                damping: 30,
+              },
+            }}
+          >
+            <div className="p-2 flex flex-row justify-between items-start">
+              <div className="flex flex-row gap-4 items-start">
+                <ArtifactCloseButton />
+
+                <div className="flex flex-col">
+                  <div className="font-medium">{artifact.title}</div>
+
+                  {isContentDirty ? (
+                    <div className="text-sm text-muted-foreground">
+                      Saving changes...
+                    </div>
+                  ) : document ? (
+                    <div className="text-sm text-muted-foreground">
+                      {`Updated ${formatDistance(
+                        new Date(document.createdAt),
+                        new Date(),
+                        {
+                          addSuffix: true,
+                        },
+                      )}`}
+                    </div>
+                  ) : (
+                    <div className="w-32 h-3 mt-2 bg-muted-foreground/20 rounded-md animate-pulse" />
+                  )}
+                </div>
+              </div>
+
+              <ArtifactActions
+                artifact={artifact}
+                currentVersionIndex={currentVersionIndex}
+                handleVersionChange={handleVersionChange}
+                isCurrentVersion={isCurrentVersion}
+                mode={mode}
+                metadata={metadata}
+                setMetadata={setMetadata}
+              />
+            </div>
+
+            <div className="dark:bg-muted bg-background h-full overflow-y-scroll !max-w-full items-center">
+              <artifactDefinition.content
+                title={artifact.title}
+                content={
+                  isCurrentVersion
+                    ? artifact.content
+                    : getDocumentContentById(currentVersionIndex)
+                }
+                mode={mode}
+                status={artifact.status}
+                currentVersionIndex={currentVersionIndex}
+                suggestions={[]}
+                onSaveContent={saveContent}
+                isInline={false}
+                isCurrentVersion={isCurrentVersion}
+                getDocumentContentById={getDocumentContentById}
+                isLoading={isDocumentsFetching && !artifact.content}
+                metadata={metadata}
+                setMetadata={setMetadata}
+              />
+
+              <AnimatePresence>
+                {isCurrentVersion && (
+                  <Toolbar
+                    isToolbarVisible={isToolbarVisible}
+                    setIsToolbarVisible={setIsToolbarVisible}
+                    sendMessage={sendMessage}
+                    status={status}
+                    stop={stop}
+                    setMessages={setMessages}
+                    artifactKind={artifact.kind}
+                  />
+                )}
+              </AnimatePresence>
+            </div>
+
+            <AnimatePresence>
+              {!isCurrentVersion && (
+                <VersionFooter
+                  currentVersionIndex={currentVersionIndex}
+                  documents={documents}
+                  handleVersionChange={handleVersionChange}
+                />
+              )}
+            </AnimatePresence>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export const Artifact = memo(PureArtifact, (prevProps, nextProps) => {
+  if (prevProps.status !== nextProps.status) return false;
+  if (!equal(prevProps.votes, nextProps.votes)) return false;
+  if (prevProps.input !== nextProps.input) return false;
+  if (!equal(prevProps.messages, nextProps.messages.length)) return false;
+  if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType)
+    return false;
+
+  return true;
+});

components/auth-form.tsx

@@ -0,0 +1,60 @@
+import Form from 'next/form';
+
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+export function AuthForm({
+  action,
+  children,
+  defaultEmail = '',
+}: {
+  action: NonNullable<
+    string | ((formData: FormData) => void | Promise<void>) | undefined
+  >;
+  children: React.ReactNode;
+  defaultEmail?: string;
+}) {
+  return (
+    <Form action={action} className="flex flex-col gap-4 px-4 sm:px-16">
+      <div className="flex flex-col gap-2">
+        <Label
+          htmlFor="email"
+          className="text-zinc-600 font-normal dark:text-zinc-400"
+        >
+          Email Address
+        </Label>
+
+        <Input
+          id="email"
+          name="email"
+          className="bg-muted text-md md:text-sm"
+          type="email"
+          placeholder="user@acme.com"
+          autoComplete="email"
+          required
+          autoFocus
+          defaultValue={defaultEmail}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label
+          htmlFor="password"
+          className="text-zinc-600 font-normal dark:text-zinc-400"
+        >
+          Password
+        </Label>
+
+        <Input
+          id="password"
+          name="password"
+          className="bg-muted text-md md:text-sm"
+          type="password"
+          required
+        />
+      </div>
+
+      {children}
+    </Form>
+  );
+}