9 |
16 | Hello there!
17 |
18 |
25 | How can I help you today?
26 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as SeparatorPrimitive from '@radix-ui/react-separator';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef
20 |
27 | );
28 | } else {
29 | return (
30 |
24 | {children}
25 |
26 |
34 | {children}
35 |
36 | );
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/components/ThemeColorUpdater.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect } from 'react';
4 |
5 | export default function ThemeColorUpdater() {
6 | useEffect(() => {
7 | const html = document.documentElement;
8 | let meta = document.querySelector('meta[name="theme-color"]');
9 | if (!meta) {
10 | meta = document.createElement('meta');
11 | meta.setAttribute('name', 'theme-color');
12 | document.head.appendChild(meta);
13 | }
14 |
15 | const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
16 | const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
17 |
18 | function updateThemeColor() {
19 | const isDark = html.classList.contains('dark');
20 | (meta as HTMLMetaElement).setAttribute('content', isDark ? DARK_THEME_COLOR : LIGHT_THEME_COLOR);
21 | }
22 |
23 | const observer = new MutationObserver(updateThemeColor);
24 | observer.observe(html, { attributes: true, attributeFilter: ['class'] });
25 | updateThemeColor();
26 |
27 | return () => observer.disconnect();
28 | }, []);
29 |
30 | return null;
31 | }
32 |
--------------------------------------------------------------------------------
/app/(chat)/api/history/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@/app/(auth)/auth';
2 | import { NextRequest } from 'next/server';
3 | import { getChatsByUserId } from '@/lib/db/queries';
4 |
5 | export async function GET(request: NextRequest) {
6 | const { searchParams } = request.nextUrl;
7 |
8 | const limit = parseInt(searchParams.get('limit') || '10');
9 | const startingAfter = searchParams.get('starting_after');
10 | const endingBefore = searchParams.get('ending_before');
11 |
12 | if (startingAfter && endingBefore) {
13 | return Response.json(
14 | 'Only one of starting_after or ending_before can be provided!',
15 | { status: 400 },
16 | );
17 | }
18 |
19 | const session = await auth();
20 |
21 | if (!session?.user?.id) {
22 | return Response.json('Unauthorized!', { status: 401 });
23 | }
24 |
25 | try {
26 | const chats = await getChatsByUserId({
27 | id: session.user.id,
28 | limit,
29 | startingAfter,
30 | endingBefore,
31 | });
32 |
33 | return Response.json(chats);
34 | } catch (_) {
35 | return Response.json('Failed to fetch chats!', { status: 500 });
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/lib/ai/providers.ts:
--------------------------------------------------------------------------------
1 | import {
2 | customProvider,
3 | extractReasoningMiddleware,
4 | wrapLanguageModel,
5 | } from 'ai';
6 | import { xai } from '@ai-sdk/xai';
7 | import { isTestEnvironment } from '../constants';
8 | import {
9 | artifactModel,
10 | chatModel,
11 | reasoningModel,
12 | titleModel,
13 | } from './models.test';
14 |
15 | export const myProvider = isTestEnvironment
16 | ? customProvider({
17 | languageModels: {
18 | 'chat-model': chatModel,
19 | 'chat-model-reasoning': reasoningModel,
20 | 'title-model': titleModel,
21 | 'artifact-model': artifactModel,
22 | },
23 | })
24 | : customProvider({
25 | languageModels: {
26 | 'chat-model': xai('grok-2-1212'),
27 | 'chat-model-reasoning': wrapLanguageModel({
28 | model: xai('grok-3-mini-beta'),
29 | middleware: extractReasoningMiddleware({ tagName: 'think' }),
30 | }),
31 | 'title-model': xai('grok-2-1212'),
32 | 'artifact-model': xai('grok-2-1212'),
33 | },
34 | imageModels: {
35 | 'small-model': xai.image('grok-2-image'),
36 | },
37 | });
38 |
--------------------------------------------------------------------------------
/lib/db/migrations/meta/_journal.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "7",
3 | "dialect": "postgresql",
4 | "entries": [
5 | {
6 | "idx": 0,
7 | "version": "7",
8 | "when": 1728598022383,
9 | "tag": "0000_keen_devos",
10 | "breakpoints": true
11 | },
12 | {
13 | "idx": 1,
14 | "version": "7",
15 | "when": 1730207363999,
16 | "tag": "0001_sparkling_blue_marvel",
17 | "breakpoints": true
18 | },
19 | {
20 | "idx": 2,
21 | "version": "7",
22 | "when": 1730725226313,
23 | "tag": "0002_wandering_riptide",
24 | "breakpoints": true
25 | },
26 | {
27 | "idx": 3,
28 | "version": "7",
29 | "when": 1733403031014,
30 | "tag": "0003_cloudy_glorian",
31 | "breakpoints": true
32 | },
33 | {
34 | "idx": 4,
35 | "version": "7",
36 | "when": 1733945232355,
37 | "tag": "0004_odd_slayback",
38 | "breakpoints": true
39 | },
40 | {
41 | "idx": 5,
42 | "version": "7",
43 | "when": 1741934630596,
44 | "tag": "0005_wooden_whistler",
45 | "breakpoints": true
46 | }
47 | ]
48 | }
--------------------------------------------------------------------------------
/app/(chat)/page.tsx:
--------------------------------------------------------------------------------
1 | import { cookies } from 'next/headers';
2 |
3 | import { Chat } from '@/components/chat';
4 | import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models';
5 | import { generateUUID } from '@/lib/utils';
6 | import { DataStreamHandler } from '@/components/data-stream-handler';
7 |
8 | export default async function Page() {
9 | const id = generateUUID();
10 |
11 | const cookieStore = await cookies();
12 | const modelIdFromCookie = cookieStore.get('chat-model');
13 |
14 | if (!modelIdFromCookie) {
15 | return (
16 | <>
17 |
26 | {status === 'streaming' ? (
27 |
37 | 
44 |
45 | )}
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/app/(auth)/auth.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextAuthConfig } from 'next-auth';
2 |
3 | export const authConfig = {
4 | pages: {
5 | signIn: '/login',
6 | newUser: '/',
7 | },
8 | providers: [
9 | // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
10 | // while this file is also used in non-Node.js environments
11 | ],
12 | callbacks: {
13 | authorized({ auth, request: { nextUrl } }) {
14 | const isLoggedIn = !!auth?.user;
15 | const isOnChat = nextUrl.pathname.startsWith('/');
16 | const isOnRegister = nextUrl.pathname.startsWith('/register');
17 | const isOnLogin = nextUrl.pathname.startsWith('/login');
18 |
19 | if (isLoggedIn && (isOnLogin || isOnRegister)) {
20 | return Response.redirect(new URL('/', nextUrl as unknown as URL));
21 | }
22 |
23 | if (isOnRegister || isOnLogin) {
24 | return true; // Always allow access to register and login pages
25 | }
26 |
27 | if (isOnChat) {
28 | if (isLoggedIn) return true;
29 | return false; // Redirect unauthenticated users to login page
30 | }
31 |
32 | if (isLoggedIn) {
33 | return Response.redirect(new URL('/', nextUrl as unknown as URL));
34 | }
35 |
36 | return true;
37 | },
38 | },
39 | } satisfies NextAuthConfig;
40 |
--------------------------------------------------------------------------------
/components/toast.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { ReactNode } from 'react';
4 | import { toast as sonnerToast } from 'sonner';
5 | import { CheckCircleFillIcon, WarningIcon } from './icons';
6 |
7 | const iconsByType: Record<'success' | 'error', ReactNode> = {
8 | success:
28 | {!isInline && (
29 |
35 | ) : (
36 |
30 |
32 | )}
33 | Generating Image...
34 |
23 |
37 | );
38 | }
39 |
40 | interface ToastProps {
41 | id: string | number;
42 | type: 'success' | 'error';
43 | description: string;
44 | }
45 |
--------------------------------------------------------------------------------
/lib/db/migrations/0005_wooden_whistler.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE IF NOT EXISTS "Message_v2" (
2 | "id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
3 | "chatId" uuid NOT NULL,
4 | "role" varchar NOT NULL,
5 | "parts" json NOT NULL,
6 | "attachments" json NOT NULL,
7 | "createdAt" timestamp NOT NULL
8 | );
9 | --> statement-breakpoint
10 | CREATE TABLE IF NOT EXISTS "Vote_v2" (
11 | "chatId" uuid NOT NULL,
12 | "messageId" uuid NOT NULL,
13 | "isUpvoted" boolean NOT NULL,
14 | CONSTRAINT "Vote_v2_chatId_messageId_pk" PRIMARY KEY("chatId","messageId")
15 | );
16 | --> statement-breakpoint
17 | DO $$ BEGIN
18 | ALTER TABLE "Message_v2" ADD CONSTRAINT "Message_v2_chatId_Chat_id_fk" FOREIGN KEY ("chatId") REFERENCES "public"."Chat"("id") ON DELETE no action ON UPDATE no action;
19 | EXCEPTION
20 | WHEN duplicate_object THEN null;
21 | END $$;
22 | --> statement-breakpoint
23 | DO $$ BEGIN
24 | ALTER TABLE "Vote_v2" ADD CONSTRAINT "Vote_v2_chatId_Chat_id_fk" FOREIGN KEY ("chatId") REFERENCES "public"."Chat"("id") ON DELETE no action ON UPDATE no action;
25 | EXCEPTION
26 | WHEN duplicate_object THEN null;
27 | END $$;
28 | --> statement-breakpoint
29 | DO $$ BEGIN
30 | ALTER TABLE "Vote_v2" ADD CONSTRAINT "Vote_v2_messageId_Message_v2_id_fk" FOREIGN KEY ("messageId") REFERENCES "public"."Message_v2"("id") ON DELETE no action ON UPDATE no action;
31 | EXCEPTION
32 | WHEN duplicate_object THEN null;
33 | END $$;
34 |
--------------------------------------------------------------------------------
/app/(auth)/auth.ts:
--------------------------------------------------------------------------------
1 | import { compare } from 'bcrypt-ts';
2 | import NextAuth, { type User, type Session } from 'next-auth';
3 | import Credentials from 'next-auth/providers/credentials';
4 |
5 | import { getUser } from '@/lib/db/queries';
6 |
7 | import { authConfig } from './auth.config';
8 |
9 | interface ExtendedSession extends Session {
10 | user: User;
11 | }
12 |
13 | export const {
14 | handlers: { GET, POST },
15 | auth,
16 | signIn,
17 | signOut,
18 | } = NextAuth({
19 | ...authConfig,
20 | providers: [
21 | Credentials({
22 | credentials: {},
23 | async authorize({ email, password }: any) {
24 | const users = await getUser(email);
25 | if (users.length === 0) return null;
26 | // biome-ignore lint: Forbidden non-null assertion.
27 | const passwordsMatch = await compare(password, users[0].password!);
28 | if (!passwordsMatch) return null;
29 | return users[0] as any;
30 | },
31 | }),
32 | ],
33 | callbacks: {
34 | async jwt({ token, user }) {
35 | if (user) {
36 | token.id = user.id;
37 | }
38 |
39 | return token;
40 | },
41 | async session({
42 | session,
43 | token,
44 | }: {
45 | session: ExtendedSession;
46 | token: any;
47 | }) {
48 | if (session.user) {
49 | session.user.id = token.id as string;
50 | }
51 |
52 | return session;
53 | },
54 | },
55 | });
56 |
--------------------------------------------------------------------------------
/lib/rag/clients.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Centralized Vector DB and Reranking clients initialization.
3 | * Initializes once at the module level for better performance.
4 | */
5 | import { Index } from '@upstash/vector';
6 | import { CohereClient } from 'cohere-ai';
7 |
8 | // Environment variables for client configuration
9 | const upstashVectorUrl = process.env.UPSTASH_VECTOR_REST_URL;
10 | const upstashVectorToken = process.env.UPSTASH_VECTOR_REST_TOKEN;
11 | const cohereApiKey = process.env.COHERE_API_KEY;
12 |
13 | // Singleton Vector client
14 | let vectorIndex: Index | null = null;
15 | if (upstashVectorUrl && upstashVectorToken) {
16 | try {
17 | vectorIndex = new Index({
18 | url: upstashVectorUrl,
19 | token: upstashVectorToken,
20 | });
21 | console.log('Upstash Vector client initialized.');
22 | } catch (error) {
23 | console.error('Failed to initialize Upstash Vector client:', error);
24 | }
25 | } else {
26 | console.warn('Upstash Vector URL or Token not configured. RAG will be disabled.');
27 | }
28 |
29 | // Singleton Cohere client
30 | let cohere: CohereClient | null = null;
31 | if (cohereApiKey) {
32 | try {
33 | cohere = new CohereClient({ token: cohereApiKey });
34 | console.log('Cohere client initialized.');
35 | } catch (error) {
36 | console.error('Failed to initialize Cohere client:', error);
37 | }
38 | } else {
39 | console.log('Cohere API Key not found, reranking will be disabled.');
40 | }
41 |
42 | export { vectorIndex, cohere };
43 |
--------------------------------------------------------------------------------
/lib/db/migrations/0002_wandering_riptide.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE IF NOT EXISTS "Message" (
2 | "id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
3 | "chatId" uuid NOT NULL,
4 | "role" varchar NOT NULL,
5 | "content" json NOT NULL,
6 | "createdAt" timestamp NOT NULL
7 | );
8 | --> statement-breakpoint
9 | CREATE TABLE IF NOT EXISTS "Vote" (
10 | "chatId" uuid NOT NULL,
11 | "messageId" uuid NOT NULL,
12 | "isUpvoted" boolean NOT NULL,
13 | CONSTRAINT "Vote_chatId_messageId_pk" PRIMARY KEY("chatId","messageId")
14 | );
15 | --> statement-breakpoint
16 | ALTER TABLE "Chat" ADD COLUMN "title" text NOT NULL;--> statement-breakpoint
17 | DO $$ BEGIN
18 | ALTER TABLE "Message" ADD CONSTRAINT "Message_chatId_Chat_id_fk" FOREIGN KEY ("chatId") REFERENCES "public"."Chat"("id") ON DELETE no action ON UPDATE no action;
19 | EXCEPTION
20 | WHEN duplicate_object THEN null;
21 | END $$;
22 | --> statement-breakpoint
23 | DO $$ BEGIN
24 | ALTER TABLE "Vote" ADD CONSTRAINT "Vote_chatId_Chat_id_fk" FOREIGN KEY ("chatId") REFERENCES "public"."Chat"("id") ON DELETE no action ON UPDATE no action;
25 | EXCEPTION
26 | WHEN duplicate_object THEN null;
27 | END $$;
28 | --> statement-breakpoint
29 | DO $$ BEGIN
30 | ALTER TABLE "Vote" ADD CONSTRAINT "Vote_messageId_Message_id_fk" FOREIGN KEY ("messageId") REFERENCES "public"."Message"("id") ON DELETE no action ON UPDATE no action;
31 | EXCEPTION
32 | WHEN duplicate_object THEN null;
33 | END $$;
34 | --> statement-breakpoint
35 | ALTER TABLE "Chat" DROP COLUMN IF EXISTS "messages";
--------------------------------------------------------------------------------
/components/preview-attachment.tsx:
--------------------------------------------------------------------------------
1 | import type { Attachment } from 'ai';
2 |
3 | import { LoaderIcon } from './icons';
4 |
5 | export const PreviewAttachment = ({
6 | attachment,
7 | isUploading = false,
8 | }: {
9 | attachment: Attachment;
10 | isUploading?: boolean;
11 | }) => {
12 | const { name, url, contentType } = attachment;
13 |
14 | return (
15 |
28 |
36 |
32 | {iconsByType[type]}
33 |
34 | {description}
35 |
16 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/app/(chat)/actions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { generateText, Message } from 'ai';
4 | import { cookies } from 'next/headers';
5 |
6 | import {
7 | deleteMessagesByChatIdAfterTimestamp,
8 | getMessageById,
9 | updateChatVisiblityById,
10 | } from '@/lib/db/queries';
11 | import { VisibilityType } from '@/components/visibility-selector';
12 | import { myProvider } from '@/lib/ai/providers';
13 |
14 | export async function saveChatModelAsCookie(model: string) {
15 | const cookieStore = await cookies();
16 | cookieStore.set('chat-model', model);
17 | }
18 |
19 | export async function generateTitleFromUserMessage({ message }: { message: Message }) {
20 | const { text: title } = await generateText({
21 | model: myProvider.languageModel('title-model'),
22 | system: `\n
23 | - you will generate a short title based on the first message a user begins a conversation with
24 | - ensure it is not more than 80 characters long
25 | - the title should be a summary of the user's message
26 | - do not use quotes or colons`,
27 | prompt: JSON.stringify(message),
28 | });
29 |
30 | return title;
31 | }
32 |
33 | export async function deleteTrailingMessages({ id }: { id: string }) {
34 | const [message] = await getMessageById({ id });
35 |
36 | await deleteMessagesByChatIdAfterTimestamp({
37 | chatId: message.chatId,
38 | timestamp: message.createdAt,
39 | });
40 | }
41 |
42 | export async function updateChatVisibility({ chatId, visibility }: { chatId: string; visibility: VisibilityType }) {
43 | await updateChatVisiblityById({ chatId, visibility });
44 | }
45 |
--------------------------------------------------------------------------------
/hooks/use-chat-visibility.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useMemo } from 'react';
4 | import useSWR, { useSWRConfig } from 'swr';
5 | import { unstable_serialize } from 'swr/infinite';
6 | import { updateChatVisibility } from '@/app/(chat)/actions';
7 | import {
8 | getChatHistoryPaginationKey,
9 | type ChatHistory,
10 | } from '@/components/sidebar-history';
11 | import type { VisibilityType } from '@/components/visibility-selector';
12 |
13 | export function useChatVisibility({
14 | chatId,
15 | initialVisibility,
16 | }: {
17 | chatId: string;
18 | initialVisibility: VisibilityType;
19 | }) {
20 | const { mutate, cache } = useSWRConfig();
21 | const history: ChatHistory = cache.get('/api/history')?.data;
22 |
23 | const { data: localVisibility, mutate: setLocalVisibility } = useSWR(
24 | `${chatId}-visibility`,
25 | null,
26 | {
27 | fallbackData: initialVisibility,
28 | },
29 | );
30 |
31 | const visibilityType = useMemo(() => {
32 | if (!history) return localVisibility;
33 | const chat = history.chats.find((chat) => chat.id === chatId);
34 | if (!chat) return 'private';
35 | return chat.visibility;
36 | }, [history, chatId, localVisibility]);
37 |
38 | const setVisibilityType = (updatedVisibilityType: VisibilityType) => {
39 | setLocalVisibility(updatedVisibilityType);
40 | mutate(unstable_serialize(getChatHistoryPaginationKey));
41 |
42 | updateChatVisibility({
43 | chatId: chatId,
44 | visibility: updatedVisibilityType,
45 | });
46 | };
47 |
48 | return { visibilityType, setVisibilityType };
49 | }
50 |
--------------------------------------------------------------------------------
/components/auth-form.tsx:
--------------------------------------------------------------------------------
1 | import Form from 'next/form';
2 |
3 | import { Input } from './ui/input';
4 | import { Label } from './ui/label';
5 |
6 | export function AuthForm({
7 | action,
8 | children,
9 | defaultEmail = '',
10 | }: {
11 | action: NonNullable<
12 | string | ((formData: FormData) => void | Promise
17 | {contentType ? (
18 | contentType.startsWith('image') ? (
19 | // NOTE: it is recommended to use next/image for images
20 | // eslint-disable-next-line @next/next/no-img-element
21 | 
27 | ) : (
28 |
29 | )
30 | ) : (
31 |
32 | )}
33 |
34 | {isUploading && (
35 |
43 |
39 |
41 | )}
42 | {name}
44 |
12 |
13 |
14 | ) : (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | export const InlineDocumentSkeleton = () => {
28 | return (
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/lib/ai/tools/update-document.ts:
--------------------------------------------------------------------------------
1 | import { DataStreamWriter, tool } from 'ai';
2 | import { Session } from 'next-auth';
3 | import { z } from 'zod';
4 | import { getDocumentById, saveDocument } from '@/lib/db/queries';
5 | import { documentHandlersByArtifactKind } from '@/lib/artifacts/server';
6 |
7 | interface UpdateDocumentProps {
8 | session: Session;
9 | dataStream: DataStreamWriter;
10 | }
11 |
12 | export const updateDocument = ({ session, dataStream }: UpdateDocumentProps) =>
13 | tool({
14 | description: 'Update a document with the given description.',
15 | parameters: z.object({
16 | id: z.string().describe('The ID of the document to update'),
17 | description: z
18 | .string()
19 | .describe('The description of changes that need to be made'),
20 | }),
21 | execute: async ({ id, description }) => {
22 | const document = await getDocumentById({ id });
23 |
24 | if (!document) {
25 | return {
26 | error: 'Document not found',
27 | };
28 | }
29 |
30 | dataStream.writeData({
31 | type: 'clear',
32 | content: document.title,
33 | });
34 |
35 | const documentHandler = documentHandlersByArtifactKind.find(
36 | (documentHandlerByArtifactKind) =>
37 | documentHandlerByArtifactKind.kind === document.kind,
38 | );
39 |
40 | if (!documentHandler) {
41 | throw new Error(`No document handler found for kind: ${document.kind}`);
42 | }
43 |
44 | await documentHandler.onUpdateDocument({
45 | document,
46 | description,
47 | dataStream,
48 | session,
49 | });
50 |
51 | dataStream.writeData({ type: 'finish', content: '' });
52 |
53 | return {
54 | id,
55 | title: document.title,
56 | kind: document.kind,
57 | content: 'The document has been updated successfully.',
58 | };
59 | },
60 | });
61 |
--------------------------------------------------------------------------------
/app/(chat)/api/vote/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@/app/(auth)/auth';
2 | import { getChatById, getVotesByChatId, voteMessage } from '@/lib/db/queries';
3 |
4 | export async function GET(request: Request) {
5 | const { searchParams } = new URL(request.url);
6 | const chatId = searchParams.get('chatId');
7 |
8 | if (!chatId) {
9 | return new Response('chatId is required', { status: 400 });
10 | }
11 |
12 | const session = await auth();
13 |
14 | if (!session || !session.user || !session.user.email) {
15 | return new Response('Unauthorized', { status: 401 });
16 | }
17 |
18 | const chat = await getChatById({ id: chatId });
19 |
20 | if (!chat) {
21 | return new Response('Chat not found', { status: 404 });
22 | }
23 |
24 | if (chat.userId !== session.user.id) {
25 | return new Response('Unauthorized', { status: 401 });
26 | }
27 |
28 | const votes = await getVotesByChatId({ id: chatId });
29 |
30 | return Response.json(votes, { status: 200 });
31 | }
32 |
33 | export async function PATCH(request: Request) {
34 | const {
35 | chatId,
36 | messageId,
37 | type,
38 | }: { chatId: string; messageId: string; type: 'up' | 'down' } =
39 | await request.json();
40 |
41 | if (!chatId || !messageId || !type) {
42 | return new Response('messageId and type are required', { status: 400 });
43 | }
44 |
45 | const session = await auth();
46 |
47 | if (!session || !session.user || !session.user.email) {
48 | return new Response('Unauthorized', { status: 401 });
49 | }
50 |
51 | const chat = await getChatById({ id: chatId });
52 |
53 | if (!chat) {
54 | return new Response('Chat not found', { status: 404 });
55 | }
56 |
57 | if (chat.userId !== session.user.id) {
58 | return new Response('Unauthorized', { status: 401 });
59 | }
60 |
61 | await voteMessage({
62 | chatId,
63 | messageId,
64 | type: type,
65 | });
66 |
67 | return new Response('Message voted', { status: 200 });
68 | }
69 |
--------------------------------------------------------------------------------
/lib/editor/functions.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { defaultMarkdownSerializer } from 'prosemirror-markdown';
4 | import { DOMParser, type Node } from 'prosemirror-model';
5 | import { Decoration, DecorationSet, type EditorView } from 'prosemirror-view';
6 | import { renderToString } from 'react-dom/server';
7 |
8 | import { Markdown } from '@/components/markdown';
9 |
10 | import { documentSchema } from './config';
11 | import { createSuggestionWidget, type UISuggestion } from './suggestions';
12 |
13 | export const buildDocumentFromContent = (content: string) => {
14 | const parser = DOMParser.fromSchema(documentSchema);
15 | const stringFromMarkdown = renderToString(
30 | {
33 | setOpenMobile(false);
34 | }}
35 | className="flex flex-row gap-3 items-center"
36 | >
37 |
38 | Chatbot
39 |
40 |
41 |
42 |
43 |
55 |
56 | New Chat
57 |
58 |
59 |
36 | {isLoading ? (
37 |
60 | {isExpanded && (
61 |
72 | {reasoning}
73 |
74 | )}
75 |
76 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/tests/reasoning.test.ts:
--------------------------------------------------------------------------------
1 | import { ChatPage } from './pages/chat';
2 | import { test, expect } from '@playwright/test';
3 |
4 | test.describe('chat activity with reasoning', () => {
5 | let chatPage: ChatPage;
6 |
7 | test.beforeEach(async ({ page }) => {
8 | chatPage = new ChatPage(page);
9 | await chatPage.createNewChat();
10 | });
11 |
12 | test('send user message and generate response with reasoning', async () => {
13 | await chatPage.sendUserMessage('Why is the sky blue?');
14 | await chatPage.isGenerationComplete();
15 |
16 | const assistantMessage = await chatPage.getRecentAssistantMessage();
17 | expect(assistantMessage.content).toBe("It's just blue duh!");
18 |
19 | expect(assistantMessage.reasoning).toBe(
20 | 'The sky is blue because of rayleigh scattering!',
21 | );
22 | });
23 |
24 | test('toggle reasoning visibility', async () => {
25 | await chatPage.sendUserMessage('Why is the sky blue?');
26 | await chatPage.isGenerationComplete();
27 |
28 | const assistantMessage = await chatPage.getRecentAssistantMessage();
29 | const reasoningElement =
30 | assistantMessage.element.getByTestId('message-reasoning');
31 | expect(reasoningElement).toBeVisible();
32 |
33 | await assistantMessage.toggleReasoningVisibility();
34 | await expect(reasoningElement).not.toBeVisible();
35 |
36 | await assistantMessage.toggleReasoningVisibility();
37 | await expect(reasoningElement).toBeVisible();
38 | });
39 |
40 | test('edit message and resubmit', async () => {
41 | await chatPage.sendUserMessage('Why is the sky blue?');
42 | await chatPage.isGenerationComplete();
43 |
44 | const assistantMessage = await chatPage.getRecentAssistantMessage();
45 | const reasoningElement =
46 | assistantMessage.element.getByTestId('message-reasoning');
47 | expect(reasoningElement).toBeVisible();
48 |
49 | const userMessage = await chatPage.getRecentUserMessage();
50 |
51 | await userMessage.edit('Why is grass green?');
52 | await chatPage.isGenerationComplete();
53 |
54 | const updatedAssistantMessage = await chatPage.getRecentAssistantMessage();
55 |
56 | expect(updatedAssistantMessage.content).toBe("It's just green duh!");
57 |
58 | expect(updatedAssistantMessage.reasoning).toBe(
59 | 'Grass is green because of chlorophyll absorption!',
60 | );
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/artifacts/image/client.tsx:
--------------------------------------------------------------------------------
1 | import { Artifact } from '@/components/create-artifact';
2 | import { CopyIcon, RedoIcon, UndoIcon } from '@/components/icons';
3 | import { ImageEditor } from '@/components/image-editor';
4 | import { toast } from 'sonner';
5 |
6 | export const imageArtifact = new Artifact({
7 | kind: 'image',
8 | description: 'Useful for image generation',
9 | onStreamPart: ({ streamPart, setArtifact }) => {
10 | if (streamPart.type === 'image-delta') {
11 | setArtifact((draftArtifact) => ({
12 | ...draftArtifact,
13 | content: streamPart.content as string,
14 | isVisible: true,
15 | status: 'streaming',
16 | }));
17 | }
18 | },
19 | content: ImageEditor,
20 | actions: [
21 | {
22 | icon:
38 |
43 | ) : (
44 | Reasoning
39 |
40 |
42 |
45 |
57 | )}
58 |
59 | Reasoned for a few seconds
46 |
56 |
38 | {messages.map((message, index) => (
39 | vote.messageId === message.id)
47 | : undefined
48 | }
49 | setMessages={setMessages}
50 | reload={reload}
51 | isReadonly={isReadonly}
52 | />
53 | ))}
54 |
55 |
59 |
60 | );
61 | }
62 |
63 | function areEqual(
64 | prevProps: ArtifactMessagesProps,
65 | nextProps: ArtifactMessagesProps,
66 | ) {
67 | if (
68 | prevProps.artifactStatus === 'streaming' &&
69 | nextProps.artifactStatus === 'streaming'
70 | )
71 | return true;
72 |
73 | if (prevProps.status !== nextProps.status) return false;
74 | if (prevProps.status && nextProps.status) return false;
75 | if (prevProps.messages.length !== nextProps.messages.length) return false;
76 | if (!equal(prevProps.votes, nextProps.votes)) return false;
77 |
78 | return true;
79 | }
80 |
81 | export const ArtifactMessages = memo(PureArtifactMessages, areEqual);
82 |
--------------------------------------------------------------------------------
/tests/artifacts.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | import { ChatPage } from './pages/chat';
3 | import { ArtifactPage } from './pages/artifact';
4 |
5 | test.describe('artifacts activity', () => {
6 | let chatPage: ChatPage;
7 | let artifactPage: ArtifactPage;
8 |
9 | test.beforeEach(async ({ page }) => {
10 | chatPage = new ChatPage(page);
11 | artifactPage = new ArtifactPage(page);
12 |
13 | await chatPage.createNewChat();
14 | });
15 |
16 | test('create a text artifact', async () => {
17 | await chatPage.createNewChat();
18 |
19 | await chatPage.sendUserMessage(
20 | 'Help me write an essay about Silicon Valley',
21 | );
22 | await artifactPage.isGenerationComplete();
23 |
24 | expect(artifactPage.artifact).toBeVisible();
25 |
26 | const assistantMessage = await chatPage.getRecentAssistantMessage();
27 | expect(assistantMessage.content).toBe(
28 | 'A document was created and is now visible to the user.',
29 | );
30 |
31 | await chatPage.hasChatIdInUrl();
32 | });
33 |
34 | test('toggle artifact visibility', async () => {
35 | await chatPage.createNewChat();
36 |
37 | await chatPage.sendUserMessage(
38 | 'Help me write an essay about Silicon Valley',
39 | );
40 | await artifactPage.isGenerationComplete();
41 |
42 | expect(artifactPage.artifact).toBeVisible();
43 |
44 | const assistantMessage = await chatPage.getRecentAssistantMessage();
45 | expect(assistantMessage.content).toBe(
46 | 'A document was created and is now visible to the user.',
47 | );
48 |
49 | await artifactPage.closeArtifact();
50 | await chatPage.isElementNotVisible('artifact');
51 | });
52 |
53 | test('send follow up message after generation', async () => {
54 | await chatPage.createNewChat();
55 |
56 | await chatPage.sendUserMessage(
57 | 'Help me write an essay about Silicon Valley',
58 | );
59 | await artifactPage.isGenerationComplete();
60 |
61 | expect(artifactPage.artifact).toBeVisible();
62 |
63 | const assistantMessage = await artifactPage.getRecentAssistantMessage();
64 | expect(assistantMessage.content).toBe(
65 | 'A document was created and is now visible to the user.',
66 | );
67 |
68 | await artifactPage.sendUserMessage('Thanks!');
69 | await artifactPage.isGenerationComplete();
70 |
71 | const secondAssistantMessage = await chatPage.getRecentAssistantMessage();
72 | expect(secondAssistantMessage.content).toBe("You're welcome!");
73 | });
74 | });
75 |
--------------------------------------------------------------------------------
/components/suggested-actions.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { motion } from 'framer-motion';
4 | import { Button } from './ui/button';
5 | import { memo } from 'react';
6 | import { UseChatHelpers } from '@ai-sdk/react';
7 |
8 | interface SuggestedActionsProps {
9 | chatId: string;
10 | append: UseChatHelpers['append'];
11 | }
12 |
13 | function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
14 | const suggestedActions = [
15 | {
16 | title: 'What are the advantages',
17 | label: 'of using Next.js?',
18 | action: 'What are the advantages of using Next.js?',
19 | },
20 | {
21 | title: 'Write code to',
22 | label: `demonstrate djikstra's algorithm`,
23 | action: `Write code to demonstrate djikstra's algorithm`,
24 | },
25 | {
26 | title: 'Help me write an essay',
27 | label: `about silicon valley`,
28 | action: `Help me write an essay about silicon valley`,
29 | },
30 | {
31 | title: 'What is the weather',
32 | label: 'in San Francisco?',
33 | action: 'What is the weather in San Francisco?',
34 | },
35 | ];
36 |
37 | return (
38 |
42 | {suggestedActions.map((suggestedAction, index) => (
43 | 1 ? 'hidden sm:block' : 'block'}
50 | >
51 |
68 |
69 | ))}
70 |
71 | );
72 | }
73 |
74 | export const SuggestedActions = memo(PureSuggestedActions, () => true);
75 |
--------------------------------------------------------------------------------
/lib/db/migrations/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "715ec9ec-6715-4d0f-9f6c-9b5c7f09827c",
3 | "prevId": "00000000-0000-0000-0000-000000000000",
4 | "version": "7",
5 | "dialect": "postgresql",
6 | "tables": {
7 | "public.Chat": {
8 | "name": "Chat",
9 | "schema": "",
10 | "columns": {
11 | "id": {
12 | "name": "id",
13 | "type": "uuid",
14 | "primaryKey": true,
15 | "notNull": true,
16 | "default": "gen_random_uuid()"
17 | },
18 | "createdAt": {
19 | "name": "createdAt",
20 | "type": "timestamp",
21 | "primaryKey": false,
22 | "notNull": true
23 | },
24 | "messages": {
25 | "name": "messages",
26 | "type": "json",
27 | "primaryKey": false,
28 | "notNull": true
29 | },
30 | "userId": {
31 | "name": "userId",
32 | "type": "uuid",
33 | "primaryKey": false,
34 | "notNull": true
35 | }
36 | },
37 | "indexes": {},
38 | "foreignKeys": {
39 | "Chat_userId_User_id_fk": {
40 | "name": "Chat_userId_User_id_fk",
41 | "tableFrom": "Chat",
42 | "tableTo": "User",
43 | "columnsFrom": [
44 | "userId"
45 | ],
46 | "columnsTo": [
47 | "id"
48 | ],
49 | "onDelete": "no action",
50 | "onUpdate": "no action"
51 | }
52 | },
53 | "compositePrimaryKeys": {},
54 | "uniqueConstraints": {}
55 | },
56 | "public.User": {
57 | "name": "User",
58 | "schema": "",
59 | "columns": {
60 | "id": {
61 | "name": "id",
62 | "type": "uuid",
63 | "primaryKey": true,
64 | "notNull": true,
65 | "default": "gen_random_uuid()"
66 | },
67 | "email": {
68 | "name": "email",
69 | "type": "varchar(64)",
70 | "primaryKey": false,
71 | "notNull": true
72 | },
73 | "password": {
74 | "name": "password",
75 | "type": "varchar(64)",
76 | "primaryKey": false,
77 | "notNull": false
78 | }
79 | },
80 | "indexes": {},
81 | "foreignKeys": {},
82 | "compositePrimaryKeys": {},
83 | "uniqueConstraints": {}
84 | }
85 | },
86 | "enums": {},
87 | "schemas": {},
88 | "sequences": {},
89 | "_meta": {
90 | "columns": {},
91 | "schemas": {},
92 | "tables": {}
93 | }
94 | }
--------------------------------------------------------------------------------
/app/(chat)/chat/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | import { cookies } from 'next/headers';
2 | import { notFound } from 'next/navigation';
3 |
4 | import { auth } from '@/app/(auth)/auth';
5 | import { Chat } from '@/components/chat';
6 | import { getChatById, getMessagesByChatId } from '@/lib/db/queries';
7 | import { DataStreamHandler } from '@/components/data-stream-handler';
8 | import { DEFAULT_CHAT_MODEL } from '@/lib/ai/models';
9 | import { DBMessage } from '@/lib/db/schema';
10 | import { Attachment, UIMessage } from 'ai';
11 |
12 | export default async function Page(props: { params: Promise<{ id: string }> }) {
13 | const params = await props.params;
14 | const { id } = params;
15 | const chat = await getChatById({ id });
16 |
17 | if (!chat) {
18 | notFound();
19 | }
20 |
21 | const session = await auth();
22 |
23 | if (chat.visibility === 'private') {
24 | if (!session || !session.user) {
25 | return notFound();
26 | }
27 |
28 | if (session.user.id !== chat.userId) {
29 | return notFound();
30 | }
31 | }
32 |
33 | const messagesFromDb = await getMessagesByChatId({
34 | id,
35 | });
36 |
37 | function convertToUIMessages(messages: Array
50 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/components/messages.tsx:
--------------------------------------------------------------------------------
1 | import type { UIMessage } from 'ai';
2 | import { PreviewMessage, ThinkingMessage } from './message';
3 | import { useScrollToBottom } from './use-scroll-to-bottom';
4 | import { Greeting } from './greeting';
5 | import { memo } from 'react';
6 | import type { Vote } from '@/lib/db/schema';
7 | import equal from 'fast-deep-equal';
8 | import type { UseChatHelpers } from '@ai-sdk/react';
9 |
10 | interface MessagesProps {
11 | chatId: string;
12 | status: UseChatHelpers['status'];
13 | votes: Array
51 |
58 | Sign in
59 |
70 |
71 |
52 |
57 | Sign In
53 |54 | Use your email and password to sign in 55 |
56 |60 | {"Don't have an account? "} 61 | 65 | Sign up 66 | 67 | {' for free.'} 68 |
69 |
38 | {messages.length === 0 && vote.messageId === message.id)
49 | : undefined
50 | }
51 | setMessages={setMessages}
52 | reload={reload}
53 | isReadonly={isReadonly}
54 | />
55 | ))}
56 |
57 | {status === 'submitted' &&
58 | messages.length > 0 &&
59 | messages[messages.length - 1].role === 'user' &&
66 | );
67 | }
68 |
69 | export const Messages = memo(PureMessages, (prevProps, nextProps) => {
70 | if (prevProps.isArtifactVisible && nextProps.isArtifactVisible) return true;
71 |
72 | if (prevProps.status !== nextProps.status) return false;
73 | if (prevProps.status && nextProps.status) return false;
74 | if (prevProps.messages.length !== nextProps.messages.length) return false;
75 | if (!equal(prevProps.messages, nextProps.messages)) return false;
76 | if (!equal(prevProps.votes, nextProps.votes)) return false;
77 |
78 | return true;
79 | });
80 |
--------------------------------------------------------------------------------
/lib/ai/models.test.ts:
--------------------------------------------------------------------------------
1 | import { simulateReadableStream } from 'ai';
2 | import { MockLanguageModelV1 } from 'ai/test';
3 | import { getResponseChunksByPrompt } from '@/tests/prompts/utils';
4 |
5 | export const chatModel = new MockLanguageModelV1({
6 | doGenerate: async () => ({
7 | rawCall: { rawPrompt: null, rawSettings: {} },
8 | finishReason: 'stop',
9 | usage: { promptTokens: 10, completionTokens: 20 },
10 | text: `Hello, world!`,
11 | }),
12 | doStream: async ({ prompt }) => ({
13 | stream: simulateReadableStream({
14 | chunkDelayInMs: 50,
15 | initialDelayInMs: 100,
16 | chunks: getResponseChunksByPrompt(prompt),
17 | }),
18 | rawCall: { rawPrompt: null, rawSettings: {} },
19 | }),
20 | });
21 |
22 | export const reasoningModel = new MockLanguageModelV1({
23 | doGenerate: async () => ({
24 | rawCall: { rawPrompt: null, rawSettings: {} },
25 | finishReason: 'stop',
26 | usage: { promptTokens: 10, completionTokens: 20 },
27 | text: `Hello, world!`,
28 | }),
29 | doStream: async ({ prompt }) => ({
30 | stream: simulateReadableStream({
31 | chunkDelayInMs: 50,
32 | initialDelayInMs: 500,
33 | chunks: getResponseChunksByPrompt(prompt, true),
34 | }),
35 | rawCall: { rawPrompt: null, rawSettings: {} },
36 | }),
37 | });
38 |
39 | export const titleModel = new MockLanguageModelV1({
40 | doGenerate: async () => ({
41 | rawCall: { rawPrompt: null, rawSettings: {} },
42 | finishReason: 'stop',
43 | usage: { promptTokens: 10, completionTokens: 20 },
44 | text: `This is a test title`,
45 | }),
46 | doStream: async () => ({
47 | stream: simulateReadableStream({
48 | chunkDelayInMs: 50,
49 | initialDelayInMs: 100,
50 | chunks: [
51 | { type: 'text-delta', textDelta: 'This is a test title' },
52 | {
53 | type: 'finish',
54 | finishReason: 'stop',
55 | logprobs: undefined,
56 | usage: { completionTokens: 10, promptTokens: 3 },
57 | },
58 | ],
59 | }),
60 | rawCall: { rawPrompt: null, rawSettings: {} },
61 | }),
62 | });
63 |
64 | export const artifactModel = new MockLanguageModelV1({
65 | doGenerate: async () => ({
66 | rawCall: { rawPrompt: null, rawSettings: {} },
67 | finishReason: 'stop',
68 | usage: { promptTokens: 10, completionTokens: 20 },
69 | text: `Hello, world!`,
70 | }),
71 | doStream: async ({ prompt }) => ({
72 | stream: simulateReadableStream({
73 | chunkDelayInMs: 50,
74 | initialDelayInMs: 100,
75 | chunks: getResponseChunksByPrompt(prompt),
76 | }),
77 | rawCall: { rawPrompt: null, rawSettings: {} },
78 | }),
79 | });
80 |
--------------------------------------------------------------------------------
/components/suggestion.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { AnimatePresence, motion } from 'framer-motion';
4 | import { useState } from 'react';
5 | import { useWindowSize } from 'usehooks-ts';
6 |
7 | import type { UISuggestion } from '@/lib/editor/suggestions';
8 |
9 | import { CrossIcon, MessageIcon } from './icons';
10 | import { Button } from './ui/button';
11 | import { cn } from '@/lib/utils';
12 | import { ArtifactKind } from './artifact';
13 |
14 | export const Suggestion = ({
15 | suggestion,
16 | onApply,
17 | artifactKind,
18 | }: {
19 | suggestion: UISuggestion;
20 | onApply: () => void;
21 | artifactKind: ArtifactKind;
22 | }) => {
23 | const [isExpanded, setIsExpanded] = useState(false);
24 | const { width: windowWidth } = useWindowSize();
25 |
26 | return (
27 |
52 |
66 |
53 |
54 |
56 |
65 | Assistant
55 | {suggestion.description}
67 |
74 |
51 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss';
2 |
3 | const config: Config = {
4 | darkMode: ['class'],
5 | content: [
6 | './pages/**/*.{js,ts,jsx,tsx,mdx}',
7 | './components/**/*.{js,ts,jsx,tsx,mdx}',
8 | './app/**/*.{js,ts,jsx,tsx,mdx}',
9 | ],
10 | theme: {
11 | extend: {
12 | fontFamily: {
13 | sans: ['var(--font-geist)'],
14 | mono: ['var(--font-geist-mono)'],
15 | },
16 | screens: {
17 | 'toast-mobile': '600px',
18 | },
19 | borderRadius: {
20 | lg: 'var(--radius)',
21 | md: 'calc(var(--radius) - 2px)',
22 | sm: 'calc(var(--radius) - 4px)',
23 | },
24 | colors: {
25 | background: 'hsl(var(--background))',
26 | foreground: 'hsl(var(--foreground))',
27 | card: {
28 | DEFAULT: 'hsl(var(--card))',
29 | foreground: 'hsl(var(--card-foreground))',
30 | },
31 | popover: {
32 | DEFAULT: 'hsl(var(--popover))',
33 | foreground: 'hsl(var(--popover-foreground))',
34 | },
35 | primary: {
36 | DEFAULT: 'hsl(var(--primary))',
37 | foreground: 'hsl(var(--primary-foreground))',
38 | },
39 | secondary: {
40 | DEFAULT: 'hsl(var(--secondary))',
41 | foreground: 'hsl(var(--secondary-foreground))',
42 | },
43 | muted: {
44 | DEFAULT: 'hsl(var(--muted))',
45 | foreground: 'hsl(var(--muted-foreground))',
46 | },
47 | accent: {
48 | DEFAULT: 'hsl(var(--accent))',
49 | foreground: 'hsl(var(--accent-foreground))',
50 | },
51 | destructive: {
52 | DEFAULT: 'hsl(var(--destructive))',
53 | foreground: 'hsl(var(--destructive-foreground))',
54 | },
55 | border: 'hsl(var(--border))',
56 | input: 'hsl(var(--input))',
57 | ring: 'hsl(var(--ring))',
58 | chart: {
59 | '1': 'hsl(var(--chart-1))',
60 | '2': 'hsl(var(--chart-2))',
61 | '3': 'hsl(var(--chart-3))',
62 | '4': 'hsl(var(--chart-4))',
63 | '5': 'hsl(var(--chart-5))',
64 | },
65 | sidebar: {
66 | DEFAULT: 'hsl(var(--sidebar-background))',
67 | foreground: 'hsl(var(--sidebar-foreground))',
68 | primary: 'hsl(var(--sidebar-primary))',
69 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
70 | accent: 'hsl(var(--sidebar-accent))',
71 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
72 | border: 'hsl(var(--sidebar-border))',
73 | ring: 'hsl(var(--sidebar-ring))',
74 | },
75 | },
76 | },
77 | },
78 | plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
79 | };
80 | export default config;
81 |
--------------------------------------------------------------------------------
/components/data-stream-handler.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useChat } from '@ai-sdk/react';
4 | import { useEffect, useRef } from 'react';
5 | import { artifactDefinitions, ArtifactKind } from './artifact';
6 | import { Suggestion } from '@/lib/db/schema';
7 | import { initialArtifactData, useArtifact } from '@/hooks/use-artifact';
8 |
9 | export type DataStreamDelta = {
10 | type:
11 | | 'text-delta'
12 | | 'code-delta'
13 | | 'sheet-delta'
14 | | 'image-delta'
15 | | 'title'
16 | | 'id'
17 | | 'suggestion'
18 | | 'clear'
19 | | 'finish'
20 | | 'kind';
21 | content: string | Suggestion;
22 | };
23 |
24 | export function DataStreamHandler({ id }: { id: string }) {
25 | const { data: dataStream } = useChat({ id });
26 | const { artifact, setArtifact, setMetadata } = useArtifact();
27 | const lastProcessedIndex = useRef(-1);
28 |
29 | useEffect(() => {
30 | if (!dataStream?.length) return;
31 |
32 | const newDeltas = dataStream.slice(lastProcessedIndex.current + 1);
33 | lastProcessedIndex.current = dataStream.length - 1;
34 |
35 | (newDeltas as DataStreamDelta[]).forEach((delta: DataStreamDelta) => {
36 | const artifactDefinition = artifactDefinitions.find(
37 | (artifactDefinition) => artifactDefinition.kind === artifact.kind,
38 | );
39 |
40 | if (artifactDefinition?.onStreamPart) {
41 | artifactDefinition.onStreamPart({
42 | streamPart: delta,
43 | setArtifact,
44 | setMetadata,
45 | });
46 | }
47 |
48 | setArtifact((draftArtifact) => {
49 | if (!draftArtifact) {
50 | return { ...initialArtifactData, status: 'streaming' };
51 | }
52 |
53 | switch (delta.type) {
54 | case 'id':
55 | return {
56 | ...draftArtifact,
57 | documentId: delta.content as string,
58 | status: 'streaming',
59 | };
60 |
61 | case 'title':
62 | return {
63 | ...draftArtifact,
64 | title: delta.content as string,
65 | status: 'streaming',
66 | };
67 |
68 | case 'kind':
69 | return {
70 | ...draftArtifact,
71 | kind: delta.content as ArtifactKind,
72 | status: 'streaming',
73 | };
74 |
75 | case 'clear':
76 | return {
77 | ...draftArtifact,
78 | content: '',
79 | status: 'streaming',
80 | };
81 |
82 | case 'finish':
83 | return {
84 | ...draftArtifact,
85 | status: 'idle',
86 | };
87 |
88 | default:
89 | return draftArtifact;
90 | }
91 | });
92 | });
93 | }, [dataStream, setArtifact, setMetadata, artifact]);
94 |
95 | return null;
96 | }
97 |
--------------------------------------------------------------------------------
/tests/auth.test.ts:
--------------------------------------------------------------------------------
1 | import { generateId } from 'ai';
2 | import { getUnixTime } from 'date-fns';
3 | import { test, expect, Page } from '@playwright/test';
4 |
5 | test.use({ storageState: { cookies: [], origins: [] } });
6 |
7 | const testEmail = `test-${getUnixTime(new Date())}@playwright.com`;
8 | const testPassword = generateId(16);
9 |
10 | class AuthPage {
11 | constructor(private page: Page) {}
12 |
13 | async gotoLogin() {
14 | await this.page.goto('/login');
15 | await expect(this.page.getByRole('heading')).toContainText('Sign In');
16 | }
17 |
18 | async gotoRegister() {
19 | await this.page.goto('/register');
20 | await expect(this.page.getByRole('heading')).toContainText('Sign Up');
21 | }
22 |
23 | async register(email: string, password: string) {
24 | await this.gotoRegister();
25 | await this.page.getByPlaceholder('user@acme.com').click();
26 | await this.page.getByPlaceholder('user@acme.com').fill(email);
27 | await this.page.getByLabel('Password').click();
28 | await this.page.getByLabel('Password').fill(password);
29 | await this.page.getByRole('button', { name: 'Sign Up' }).click();
30 | }
31 |
32 | async login(email: string, password: string) {
33 | await this.gotoLogin();
34 | await this.page.getByPlaceholder('user@acme.com').click();
35 | await this.page.getByPlaceholder('user@acme.com').fill(email);
36 | await this.page.getByLabel('Password').click();
37 | await this.page.getByLabel('Password').fill(password);
38 | await this.page.getByRole('button', { name: 'Sign In' }).click();
39 | }
40 |
41 | async expectToastToContain(text: string) {
42 | await expect(this.page.getByTestId('toast')).toContainText(text);
43 | }
44 | }
45 |
46 | test.describe
47 | .serial('authentication', () => {
48 | let authPage: AuthPage;
49 |
50 | test.beforeEach(async ({ page }) => {
51 | authPage = new AuthPage(page);
52 | });
53 |
54 | test('redirect to login page when unauthenticated', async ({ page }) => {
55 | await page.goto('/');
56 | await expect(page.getByRole('heading')).toContainText('Sign In');
57 | });
58 |
59 | test('register a test account', async ({ page }) => {
60 | await authPage.register(testEmail, testPassword);
61 | await expect(page).toHaveURL('/');
62 | await authPage.expectToastToContain('Account created successfully!');
63 | });
64 |
65 | test('register test account with existing email', async () => {
66 | await authPage.register(testEmail, testPassword);
67 | await authPage.expectToastToContain('Account already exists!');
68 | });
69 |
70 | test('log into account', async ({ page }) => {
71 | await authPage.login(testEmail, testPassword);
72 |
73 | await page.waitForURL('/');
74 | await expect(page).toHaveURL('/');
75 | await expect(page.getByPlaceholder('Send a message...')).toBeVisible();
76 | });
77 | });
78 |
--------------------------------------------------------------------------------
/components/model-selector.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { startTransition, useMemo, useOptimistic, useState } from 'react';
4 |
5 | import { saveChatModelAsCookie } from '@/app/(chat)/actions';
6 | import { Button } from '@/components/ui/button';
7 | import {
8 | DropdownMenu,
9 | DropdownMenuContent,
10 | DropdownMenuItem,
11 | DropdownMenuTrigger,
12 | } from '@/components/ui/dropdown-menu';
13 | import { chatModels } from '@/lib/ai/models';
14 | import { cn } from '@/lib/utils';
15 |
16 | import { CheckCircleFillIcon, ChevronDownIcon } from './icons';
17 |
18 | export function ModelSelector({
19 | selectedModelId,
20 | className,
21 | }: {
22 | selectedModelId: string;
23 | } & React.ComponentProps
52 |
59 | Sign Up
60 |
71 |
72 |
53 |
58 | Sign Up
54 |55 | Create an account with your email and password 56 |
57 |61 | {'Already have an account? '} 62 | 66 | Sign in 67 | 68 | {' instead.'} 69 |
70 |-
14 | {children}
15 |
-
28 | {children}
29 |
55 | {children} 56 |
57 | ); 58 | }, 59 | h2: ({ node, children, ...props }) => { 60 | return ( 61 |62 | {children} 63 |
64 | ); 65 | }, 66 | h3: ({ node, children, ...props }) => { 67 | return ( 68 |69 | {children} 70 |
71 | ); 72 | }, 73 | h4: ({ node, children, ...props }) => { 74 | return ( 75 |76 | {children} 77 |
78 | ); 79 | }, 80 | h5: ({ node, children, ...props }) => { 81 | return ( 82 |83 | {children} 84 |
85 | ); 86 | }, 87 | h6: ({ node, children, ...props }) => { 88 | return ( 89 |90 | {children} 91 |
92 | ); 93 | }, 94 | }; 95 | 96 | const remarkPlugins = [remarkGfm]; 97 | 98 | const NonMemoizedMarkdown = ({ children }: { children: string }) => { 99 | return ( 100 |
48 |
55 |
56 |
103 | );
104 | }
105 |
--------------------------------------------------------------------------------
/artifacts/sheet/client.tsx:
--------------------------------------------------------------------------------
1 | import { Artifact } from '@/components/create-artifact';
2 | import {
3 | CopyIcon,
4 | LineChartIcon,
5 | RedoIcon,
6 | SparklesIcon,
7 | UndoIcon,
8 | } from '@/components/icons';
9 | import { SpreadsheetEditor } from '@/components/sheet-editor';
10 | import { parse, unparse } from 'papaparse';
11 | import { toast } from 'sonner';
12 |
13 | type Metadata = any;
14 |
15 | export const sheetArtifact = new Artifact<'sheet', Metadata>({
16 | kind: 'sheet',
17 | description: 'Useful for working with spreadsheets',
18 | initialize: async () => {},
19 | onStreamPart: ({ setArtifact, streamPart }) => {
20 | if (streamPart.type === 'sheet-delta') {
21 | setArtifact((draftArtifact) => ({
22 | ...draftArtifact,
23 | content: streamPart.content as string,
24 | isVisible: true,
25 | status: 'streaming',
26 | }));
27 | }
28 | },
29 | content: ({
30 | content,
31 | currentVersionIndex,
32 | isCurrentVersion,
33 | onSaveContent,
34 | status,
35 | }) => {
36 | return (
37 |
57 |
66 |
101 |
102 |
50 | {artifactDefinition.actions.map((action) => (
51 |
52 |
53 |
81 |
82 | {action.description}
83 |
84 | ))}
85 |
86 | );
87 | }
88 |
89 | export const ArtifactActions = memo(
90 | PureArtifactActions,
91 | (prevProps, nextProps) => {
92 | if (prevProps.artifact.status !== nextProps.artifact.status) return false;
93 | if (prevProps.currentVersionIndex !== nextProps.currentVersionIndex)
94 | return false;
95 | if (prevProps.isCurrentVersion !== nextProps.isCurrentVersion) return false;
96 | if (prevProps.artifact.content !== nextProps.artifact.content) return false;
97 |
98 | return true;
99 | },
100 | );
101 |
--------------------------------------------------------------------------------
/tests/pages/artifact.ts:
--------------------------------------------------------------------------------
1 | import { expect, Page } from '@playwright/test';
2 |
3 | export class ArtifactPage {
4 | constructor(private page: Page) {}
5 |
6 | public get artifact() {
7 | return this.page.getByTestId('artifact');
8 | }
9 |
10 | public get sendButton() {
11 | return this.artifact.getByTestId('send-button');
12 | }
13 |
14 | public get stopButton() {
15 | return this.page.getByTestId('stop-button');
16 | }
17 |
18 | public get multimodalInput() {
19 | return this.page.getByTestId('multimodal-input');
20 | }
21 |
22 | async isGenerationComplete() {
23 | const response = await this.page.waitForResponse((response) =>
24 | response.url().includes('/api/chat'),
25 | );
26 |
27 | await response.finished();
28 | }
29 |
30 | async sendUserMessage(message: string) {
31 | await this.artifact.getByTestId('multimodal-input').click();
32 | await this.artifact.getByTestId('multimodal-input').fill(message);
33 | await this.artifact.getByTestId('send-button').click();
34 | }
35 |
36 | async getRecentAssistantMessage() {
37 | const messageElements = await this.artifact
38 | .getByTestId('message-assistant')
39 | .all();
40 | const lastMessageElement = messageElements[messageElements.length - 1];
41 |
42 | const content = await lastMessageElement
43 | .getByTestId('message-content')
44 | .innerText()
45 | .catch(() => null);
46 |
47 | const reasoningElement = await lastMessageElement
48 | .getByTestId('message-reasoning')
49 | .isVisible()
50 | .then(async (visible) =>
51 | visible
52 | ? await lastMessageElement
53 | .getByTestId('message-reasoning')
54 | .innerText()
55 | : null,
56 | )
57 | .catch(() => null);
58 |
59 | return {
60 | element: lastMessageElement,
61 | content,
62 | reasoning: reasoningElement,
63 | async toggleReasoningVisibility() {
64 | await lastMessageElement
65 | .getByTestId('message-reasoning-toggle')
66 | .click();
67 | },
68 | };
69 | }
70 |
71 | async getRecentUserMessage() {
72 | const messageElements = await this.artifact
73 | .getByTestId('message-user')
74 | .all();
75 | const lastMessageElement = messageElements[messageElements.length - 1];
76 |
77 | const content = await lastMessageElement.innerText();
78 |
79 | const hasAttachments = await lastMessageElement
80 | .getByTestId('message-attachments')
81 | .isVisible()
82 | .catch(() => false);
83 |
84 | const attachments = hasAttachments
85 | ? await lastMessageElement.getByTestId('message-attachments').all()
86 | : [];
87 |
88 | const page = this.artifact;
89 |
90 | return {
91 | element: lastMessageElement,
92 | content,
93 | attachments,
94 | async edit(newMessage: string) {
95 | await page.getByTestId('message-edit-button').click();
96 | await page.getByTestId('message-editor').fill(newMessage);
97 | await page.getByTestId('message-editor-send-button').click();
98 | await expect(
99 | page.getByTestId('message-editor-send-button'),
100 | ).not.toBeVisible();
101 | },
102 | };
103 | }
104 |
105 | async closeArtifact() {
106 | return this.page.getByTestId('artifact-close-button').click();
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/components/visibility-selector.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ReactNode, useMemo, useState } from 'react';
4 | import { Button } from '@/components/ui/button';
5 | import {
6 | DropdownMenu,
7 | DropdownMenuContent,
8 | DropdownMenuItem,
9 | DropdownMenuTrigger,
10 | } from '@/components/ui/dropdown-menu';
11 | import { cn } from '@/lib/utils';
12 |
13 | import {
14 | CheckCircleFillIcon,
15 | ChevronDownIcon,
16 | GlobeIcon,
17 | LockIcon,
18 | } from './icons';
19 | import { useChatVisibility } from '@/hooks/use-chat-visibility';
20 |
21 | export type VisibilityType = 'private' | 'public';
22 |
23 | const visibilities: Array<{
24 | id: VisibilityType;
25 | label: string;
26 | description: string;
27 | icon: ReactNode;
28 | }> = [
29 | {
30 | id: 'private',
31 | label: 'Private',
32 | description: 'Only you can access this chat',
33 | icon:
94 | {visibility.label}
95 | {visibility.description && (
96 |
101 |
97 | {visibility.description}
98 |
99 | )}
100 |
102 |
104 |
46 |
51 |
52 | You are viewing a previous version
47 |
48 | Restore this version to make edits
49 |
50 |
53 |
96 |
104 |
105 |
70 |
106 |
107 |
79 |
82 | {visibilityType === 'private' ? (
83 |
93 |
96 | {visibilityType === 'public' ?