Merge remote-tracking branch 'upstream/main'

.github/workflows/playwright.yml

@@ -0,0 +1,72 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    env:
+      AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+      POSTGRES_URL: ${{ secrets.POSTGRES_URL }}
+      BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: pnpm test
+
+      - uses: actions/upload-artifact@v4
+        if: always() && !cancelled()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -36,3 +36,10 @@ yarn-error.log*
 .vercel
 .vscode
 .env*.local
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

app/(auth)/login/page.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useActionState, useEffect, useState } from 'react';
-import { toast } from 'sonner';
+import { toast } from '@/components/toast';
 
 import { AuthForm } from '@/components/auth-form';
 import { SubmitButton } from '@/components/submit-button';
@@ -25,9 +25,15 @@ export default function Page() {
 
   useEffect(() => {
     if (state.status === 'failed') {
-      toast.error('Invalid credentials!');
+      toast({
+        type: 'error',
+        description: 'Invalid credentials!',
+      });
     } else if (state.status === 'invalid_data') {
-      toast.error('Failed validating your submission!');
+      toast({
+        type: 'error',
+        description: 'Failed validating your submission!',
+      });
     } else if (state.status === 'success') {
       setIsSuccessful(true);
       router.refresh();

app/(auth)/register/page.tsx

@@ -3,12 +3,12 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useActionState, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 
 import { AuthForm } from '@/components/auth-form';
 import { SubmitButton } from '@/components/submit-button';
 
 import { register, type RegisterActionState } from '../actions';
+import { toast } from '@/components/toast';
 
 export default function Page() {
   const router = useRouter();
@@ -25,13 +25,17 @@ export default function Page() {
 
   useEffect(() => {
     if (state.status === 'user_exists') {
-      toast.error('Account already exists');
+      toast({ type: 'error', description: 'Account already exists!' });
     } else if (state.status === 'failed') {
-      toast.error('Failed to create account');
+      toast({ type: 'error', description: 'Failed to create account!' });
     } else if (state.status === 'invalid_data') {
-      toast.error('Failed validating your submission!');
+      toast({
+        type: 'error',
+        description: 'Failed validating your submission!',
+      });
     } else if (state.status === 'success') {
-      toast.success('Account created successfully');
+      toast({ type: 'success', description: 'Account created successfully!' });
+
       setIsSuccessful(true);
       router.refresh();
     }

app/(chat)/actions.ts

@@ -9,7 +9,7 @@ import {
   updateChatVisiblityById,
 } from '@/lib/db/queries';
 import { VisibilityType } from '@/components/visibility-selector';
-import { myProvider } from '@/lib/ai/models';
+import { myProvider } from '@/lib/ai/providers';
 
 export async function saveChatModelAsCookie(model: string) {
   const cookieStore = await cookies();

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

@@ -4,9 +4,7 @@
   smoothStream,
   streamText,
 } from 'ai';
-
 import { auth } from '@/app/(auth)/auth';
-import { myProvider } from '@/lib/ai/models';
 import { systemPrompt } from '@/lib/ai/prompts';
 import {
   deleteChatById,
@@ -19,7 +17,6 @@ import {
   getMostRecentUserMessage,
   sanitizeResponseMessages,
 } from '@/lib/utils';
-
 import { generateTitleFromUserMessage } from '../../actions';
 import { createDocument } from '@/lib/ai/tools/create-document';
 import { updateDocument } from '@/lib/ai/tools/update-document';
@@ -30,37 +27,46 @@ import {updateFunctionDesign} from '@/lib/ai/tools/update-functionDesign'
 import {generateServiceInterfaces} from '@/lib/ai/tools/generate-serviceInterfaces'
 import {updateServiceInterfaces} from '@/lib/ai/tools/update-serviceInterfaces'
 import { createMermaid } from '@/lib/ai/tools/create-mermaid';
+import { isProductionEnvironment } from '@/lib/constants';
+import { NextResponse } from 'next/server';
+import { myProvider } from '@/lib/ai/providers';
 
 export async function POST(request: Request) {
-  const {
-    id,
-    messages,
-    selectedChatModel,
-  }: { id: string; messages: Array<Message>; selectedChatModel: string } =
-    await request.json();
-
-  const session = await auth();
-
-  if (!session || !session.user || !session.user.id) {
-    return new Response('Unauthorized', { status: 401 });
-  }
+  try {
+    const {
+      id,
+      messages,
+      selectedChatModel,
+    }: {
+      id: string;
+      messages: Array<Message>;
+      selectedChatModel: string;
+    } = await request.json();
+
+    const session = await auth();
+
+    if (!session || !session.user || !session.user.id) {
+      return new Response('Unauthorized', { status: 401 });
+    }
 
-  const userMessage = getMostRecentUserMessage(messages);
+    const userMessage = getMostRecentUserMessage(messages);
 
-  if (!userMessage) {
-    return new Response('No user message found', { status: 400 });
-  }
+    if (!userMessage) {
+      return new Response('No user message found', { status: 400 });
+    }
 
-  const chat = await getChatById({ id });
+    const chat = await getChatById({ id });
 
-  if (!chat) {
-    const title = await generateTitleFromUserMessage({ message: userMessage });
-    await saveChat({ id, userId: session.user.id, title });
-  }
+    if (!chat) {
+      const title = await generateTitleFromUserMessage({
+        message: userMessage,
+      });
+      await saveChat({ id, userId: session.user.id, title });
+    }
 
-  await saveMessages({
-    messages: [{ ...userMessage, createdAt: new Date(), chatId: id }],
-  });
+    await saveMessages({
+      messages: [{ ...userMessage, createdAt: new Date(), chatId: id }],
+    });
 
   return createDataStreamResponse({
     execute: (dataStream) => {
@@ -103,38 +109,41 @@ export async function POST(request: Request) {
                 reasoning,
               });
 
-              await saveMessages({
-                messages: sanitizedResponseMessages.map((message) => {
-                  return {
-                    id: message.id,
-                    chatId: id,
-                    role: message.role,
-                    content: message.content,
-                    createdAt: new Date(),
-                  };
-                }),
-              });
-            } catch (error) {
-              console.error('Failed to save chat');
+                await saveMessages({
+                  messages: sanitizedResponseMessages.map((message) => {
+                    return {
+                      id: message.id,
+                      chatId: id,
+                      role: message.role,
+                      content: message.content,
+                      createdAt: new Date(),
+                    };
+                  }),
+                });
+              } catch (error) {
+                console.error('Failed to save chat');
+              }
             }
-          }
-        },
-        experimental_telemetry: {
-          isEnabled: true,
-          functionId: 'stream-text',
-        },
-      });
-
-      result.consumeStream();
-
-      result.mergeIntoDataStream(dataStream, {
-        sendReasoning: true,
-      });
-    },
-    onError: () => {
-      return 'Oops, an error occured!';
-    },
-  });
+          },
+          experimental_telemetry: {
+            isEnabled: isProductionEnvironment,
+            functionId: 'stream-text',
+          },
+        });
+
+        result.consumeStream();
+
+        result.mergeIntoDataStream(dataStream, {
+          sendReasoning: true,
+        });
+      },
+      onError: () => {
+        return 'Oops, an error occured!';
+      },
+    });
+  } catch (error) {
+    return NextResponse.json({ error }, { status: 400 });
+  }
 }
 
 export async function DELETE(request: Request) {

artifacts/code/server.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import { streamObject } from 'ai';
-import { myProvider } from '@/lib/ai/models';
+import { myProvider } from '@/lib/ai/providers';
 import { codePrompt, updateDocumentPrompt } from '@/lib/ai/prompts';
 import { createDocumentHandler } from '@/lib/artifacts/server';
 

artifacts/image/server.ts

@@ -1,4 +1,4 @@
-import { myProvider } from '@/lib/ai/models';
+import { myProvider } from '@/lib/ai/providers';
 import { createDocumentHandler } from '@/lib/artifacts/server';
 import { experimental_generateImage } from 'ai';
 

artifacts/sheet/server.ts

@@ -1,4 +1,4 @@
-import { myProvider } from '@/lib/ai/models';
+import { myProvider } from '@/lib/ai/providers';
 import { sheetPrompt, updateDocumentPrompt } from '@/lib/ai/prompts';
 import { createDocumentHandler } from '@/lib/artifacts/server';
 import { streamObject } from 'ai';

artifacts/text/server.ts

@@ -1,5 +1,5 @@
 import { smoothStream, streamText } from 'ai';
-import { myProvider } from '@/lib/ai/models';
+import { myProvider } from '@/lib/ai/providers';
 import { createDocumentHandler } from '@/lib/artifacts/server';
 import { updateDocumentPrompt } from '@/lib/ai/prompts';
 

components/artifact-messages.tsx

@@ -44,6 +44,7 @@ function PureArtifactMessages({
           key={message.id}
           message={message}
           isLoading={isLoading && index === messages.length - 1}
+          index={index}
           vote={
             votes
               ? votes.find((vote) => vote.messageId === message.id)

components/chat.tsx

@@ -1,14 +1,12 @@
 'use client';
 
 import type { Attachment, Message } from 'ai';
-import { useChat } from 'ai/react';
+import { useChat } from '@ai-sdk/react';
 import { useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
-
 import { ChatHeader } from '@/components/chat-header';
 import type { Vote } from '@/lib/db/schema';
 import { fetcher, generateUUID } from '@/lib/utils';
-
 import { Artifact } from './artifact';
 import { MultimodalInput } from './multimodal-input';
 import { Messages } from './messages';
@@ -51,7 +49,7 @@ export function Chat({
     onFinish: () => {
       mutate('/api/history');
     },
-    onError: (error) => {
+    onError: () => {
       toast.error('An error occured, please try again!');
     },
   });

components/console.tsx

@@ -155,7 +155,7 @@ export function Console({ consoleOutputs, setConsoleOutputs }: ConsoleProps) {
                         <img
                           src={content.value}
                           alt="output"
-                          className="rounded-md max-w-[600px] w-full"
+                          className="rounded-md max-w-screen-toast-mobile w-full"
                         />
                       </picture>
                     ) : (

components/create-artifact.tsx

@@ -1,5 +1,5 @@
 import { Suggestion } from '@/lib/db/schema';
-import { UseChatHelpers } from 'ai/react';
+import { UseChatHelpers } from '@ai-sdk/react';
 import { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
 import { DataStreamDelta } from './data-stream-handler';
 import { UIArtifact } from './artifact';