{children}
39 | ), 40 | heading2: (node, children) => ( 41 |{children}
42 | ), 43 | heading3: (node, children) => ( 44 |{children}
45 | ), 46 | heading4: (node, children) => ( 47 |{children}
48 | ), 49 | heading5: (node, children) => ( 50 |{children}
51 | ), 52 | heading6: (node, children) => ( 53 |{children}
54 | ), 55 | code: (node, children, parent) => { 56 | return parent.length > 1 ? ( 57 |
58 | {children}
59 |
60 | ) : (
61 |
62 | {children}
63 |
64 | );
65 | },
66 | list_item: (node, children) => - {children}
- {children}
{node.content}
; 88 | }, 89 | body: (node, children) => { 90 | return{children}
;
91 | },
92 | };
93 |
94 | export function CustomMarkdown({ content }) {
95 | return /opengraph-image.png)
3 | Next.js AI Chatbot
4 | 5 | 6 |7 | An Open-Source AI Chatbot Template Built With Next.js and the AI SDK by Vercel. 8 |
9 | 10 |11 | Features · 12 | Model Providers · 13 | Deploy Your Own · 14 | Running locally 15 |
16 |17 | 18 | ## Features 19 | 20 | - [Next.js](https://nextjs.org) App Router 21 | - Advanced routing for seamless navigation and performance 22 | - React Server Components (RSCs) and Server Actions for server-side rendering and increased performance 23 | - [AI SDK](https://sdk.vercel.ai/docs) 24 | - Unified API for generating text, structured objects, and tool calls with LLMs 25 | - Hooks for building dynamic chat and generative user interfaces 26 | - Supports OpenAI (default), Anthropic, Cohere, and other model providers 27 | - [shadcn/ui](https://ui.shadcn.com) 28 | - Styling with [Tailwind CSS](https://tailwindcss.com) 29 | - Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility 30 | - Data Persistence 31 | - [Vercel Postgres powered by Neon](https://vercel.com/storage/postgres) for saving chat history and user data 32 | - [Vercel Blob](https://vercel.com/storage/blob) for efficient file storage 33 | - [NextAuth.js](https://github.com/nextauthjs/next-auth) 34 | - Simple and secure authentication 35 | 36 | ## Model Providers 37 | 38 | This template ships with OpenAI `gpt-4o` as the default. 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. 39 | 40 | ## Deploy Your Own 41 | 42 | You can deploy your own version of the Next.js AI Chatbot to Vercel with one click: 43 | 44 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=[{%22type%22:%22postgres%22},{%22type%22:%22blob%22}]) 45 | 46 | ## Running locally 47 | 48 | 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. 49 | 50 | > Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts. 51 | 52 | 1. Install Vercel CLI: `npm i -g vercel` 53 | 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link` 54 | 3. Download your environment variables: `vercel env pull` 55 | 56 | ```bash 57 | pnpm install 58 | pnpm dev 59 | ``` 60 | 61 | Your app template should now be running on [localhost:3000](http://localhost:3000/). 62 | -------------------------------------------------------------------------------- /nextjs-ai-chatbot/app/(auth)/actions.ts: -------------------------------------------------------------------------------- 1 | 'use server'; 2 | 3 | import { z } from 'zod'; 4 | 5 | import { createUser, getUser } from '@/lib/db/queries'; 6 | 7 | import { signIn } from './auth'; 8 | 9 | const authFormSchema = z.object({ 10 | email: z.string().email(), 11 | password: z.string().min(6), 12 | }); 13 | 14 | export interface LoginActionState { 15 | status: 'idle' | 'in_progress' | 'success' | 'failed' | 'invalid_data'; 16 | } 17 | 18 | export const login = async ( 19 | _: LoginActionState, 20 | formData: FormData, 21 | ): Promise
44 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(auth)/register/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Link from 'next/link';
4 | import { useRouter } from 'next/navigation';
5 | import { useActionState, useEffect, useState } from 'react';
6 | import { toast } from 'sonner';
7 |
8 | import { AuthForm } from '@/components/auth-form';
9 | import { SubmitButton } from '@/components/submit-button';
10 |
11 | import { register, type RegisterActionState } from '../actions';
12 |
13 | export default function Page() {
14 | const router = useRouter();
15 |
16 | const [email, setEmail] = useState('');
17 | const [isSuccessful, setIsSuccessful] = useState(false);
18 |
19 | const [state, formAction] = useActionState
45 |
52 | Sign in
53 |
64 |
65 |
46 |
51 | Sign In
47 |48 | Use your email and password to sign in 49 |
50 |54 | {"Don't have an account? "} 55 | 59 | Sign up 60 | 61 | {' for free.'} 62 |
63 |
48 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(chat)/actions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { type CoreUserMessage, generateText } from 'ai';
4 | import { cookies } from 'next/headers';
5 |
6 | import { customModel } from '@/lib/ai';
7 | import {
8 | deleteMessagesByChatIdAfterTimestamp,
9 | getMessageById,
10 | updateChatVisiblityById,
11 | } from '@/lib/db/queries';
12 | import { VisibilityType } from '@/components/visibility-selector';
13 |
14 | export async function saveModelId(model: string) {
15 | const cookieStore = await cookies();
16 | cookieStore.set('model-id', model);
17 | }
18 |
19 | export async function generateTitleFromUserMessage({
20 | message,
21 | }: {
22 | message: CoreUserMessage;
23 | }) {
24 | const { text: title } = await generateText({
25 | model: customModel('gpt-4o-mini'),
26 | system: `\n
27 | - you will generate a short title based on the first message a user begins a conversation with
28 | - ensure it is not more than 80 characters long
29 | - the title should be a summary of the user's message
30 | - do not use quotes or colons`,
31 | prompt: JSON.stringify(message),
32 | });
33 |
34 | return title;
35 | }
36 |
37 | export async function deleteTrailingMessages({ id }: { id: string }) {
38 | const [message] = await getMessageById({ id });
39 |
40 | await deleteMessagesByChatIdAfterTimestamp({
41 | chatId: message.chatId,
42 | timestamp: message.createdAt,
43 | });
44 | }
45 |
46 | export async function updateChatVisibility({
47 | chatId,
48 | visibility,
49 | }: {
50 | chatId: string;
51 | visibility: VisibilityType;
52 | }) {
53 | await updateChatVisiblityById({ chatId, visibility });
54 | }
55 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(chat)/api/chat-open/route.ts:
--------------------------------------------------------------------------------
1 | import {
2 | type Message,
3 | convertToCoreMessages,
4 | createDataStreamResponse,
5 | streamText,
6 | } from 'ai';
7 | import { customModel } from '@/lib/ai';
8 | import { models } from '@/lib/ai/models';
9 | import { systemPrompt } from '@/lib/ai/prompts';
10 | import { generateUUID } from '@/lib/utils';
11 |
12 | export async function POST(request: Request) {
13 | try {
14 | console.log(">> Request received");
15 | const { messages, modelId = 'gpt-4' } = await request.json();
16 | console.log(">> Messages:", messages);
17 |
18 | const model = models.find((m) => m.id === modelId) || models[0];
19 | const coreMessages = convertToCoreMessages(messages);
20 | const userMessageId = generateUUID();
21 |
22 | return createDataStreamResponse({
23 | execute: (dataStream) => {
24 | dataStream.writeData({
25 | type: 'user-message-id',
26 | content: userMessageId,
27 | });
28 |
29 | const result = streamText({
30 | model: customModel(model.apiIdentifier),
31 | system: systemPrompt,
32 | messages: coreMessages,
33 | maxSteps: 5,
34 | });
35 |
36 | result.mergeIntoDataStream(dataStream);
37 | },
38 | });
39 |
40 | } catch (error) {
41 | console.error("API Error:", error);
42 | return new Response(
43 | JSON.stringify({ error: "Failed to generate response" }),
44 | {
45 | status: 500,
46 | headers: {
47 | 'Content-Type': 'application/json',
48 | }
49 | }
50 | );
51 | }
52 | }
53 |
54 | export async function GET() {
55 | return new Response('Ready', { status: 200 });
56 | }
57 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(chat)/api/files/upload/route.ts:
--------------------------------------------------------------------------------
1 | import { put } from '@vercel/blob';
2 | import { NextResponse } from 'next/server';
3 | import { z } from 'zod';
4 |
5 | import { auth } from '@/app/(auth)/auth';
6 |
7 | // Use Blob instead of File since File is not available in Node.js environment
8 | const FileSchema = z.object({
9 | file: z
10 | .instanceof(Blob)
11 | .refine((file) => file.size <= 5 * 1024 * 1024, {
12 | message: 'File size should be less than 5MB',
13 | })
14 | // Update the file type based on the kind of files you want to accept
15 | .refine((file) => ['image/jpeg', 'image/png'].includes(file.type), {
16 | message: 'File type should be JPEG or PNG',
17 | }),
18 | });
19 |
20 | export async function POST(request: Request) {
21 | const session = await auth();
22 |
23 | if (!session) {
24 | return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
25 | }
26 |
27 | if (request.body === null) {
28 | return new Response('Request body is empty', { status: 400 });
29 | }
30 |
31 | try {
32 | const formData = await request.formData();
33 | const file = formData.get('file') as Blob;
34 |
35 | if (!file) {
36 | return NextResponse.json({ error: 'No file uploaded' }, { status: 400 });
37 | }
38 |
39 | const validatedFile = FileSchema.safeParse({ file });
40 |
41 | if (!validatedFile.success) {
42 | const errorMessage = validatedFile.error.errors
43 | .map((error) => error.message)
44 | .join(', ');
45 |
46 | return NextResponse.json({ error: errorMessage }, { status: 400 });
47 | }
48 |
49 | // Get filename from formData since Blob doesn't have name property
50 | const filename = (formData.get('file') as File).name;
51 | const fileBuffer = await file.arrayBuffer();
52 |
53 | try {
54 | const data = await put(`${filename}`, fileBuffer, {
55 | access: 'public',
56 | });
57 |
58 | return NextResponse.json(data);
59 | } catch (error) {
60 | return NextResponse.json({ error: 'Upload failed' }, { status: 500 });
61 | }
62 | } catch (error) {
63 | return NextResponse.json(
64 | { error: 'Failed to process request' },
65 | { status: 500 },
66 | );
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(chat)/api/history/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@/app/(auth)/auth';
2 | import { getChatsByUserId } from '@/lib/db/queries';
3 |
4 | export async function GET() {
5 | const session = await auth();
6 |
7 | if (!session || !session.user) {
8 | return Response.json('Unauthorized!', { status: 401 });
9 | }
10 |
11 | // biome-ignore lint: Forbidden non-null assertion.
12 | const chats = await getChatsByUserId({ id: session.user.id! });
13 | return Response.json(chats);
14 | }
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(chat)/api/suggestions/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@/app/(auth)/auth';
2 | import { getSuggestionsByDocumentId } from '@/lib/db/queries';
3 |
4 | export async function GET(request: Request) {
5 | const { searchParams } = new URL(request.url);
6 | const documentId = searchParams.get('documentId');
7 |
8 | if (!documentId) {
9 | return new Response('Not Found', { status: 404 });
10 | }
11 |
12 | const session = await auth();
13 |
14 | if (!session || !session.user) {
15 | return new Response('Unauthorized', { status: 401 });
16 | }
17 |
18 | const suggestions = await getSuggestionsByDocumentId({
19 | documentId,
20 | });
21 |
22 | const [suggestion] = suggestions;
23 |
24 | if (!suggestion) {
25 | return Response.json([], { status: 200 });
26 | }
27 |
28 | if (suggestion.userId !== session.user.id) {
29 | return new Response('Unauthorized', { status: 401 });
30 | }
31 |
32 | return Response.json(suggestions, { status: 200 });
33 | }
34 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/app/(chat)/api/vote/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@/app/(auth)/auth';
2 | import { getVotesByChatId, voteMessage } from '@/lib/db/queries';
3 | import { verifyToken, extractTokenFromHeader } from '@/lib/auth/token';
4 |
5 | export async function GET(request: Request) {
6 | const { searchParams } = new URL(request.url);
7 | const chatId = searchParams.get('chatId');
8 |
9 | if (!chatId) {
10 | return new Response('chatId is required', { status: 400 });
11 | }
12 |
13 | // Try token auth first
14 | let userId: string | undefined;
15 | const authHeader = request.headers.get('authorization');
16 | if (authHeader) {
17 | const token = extractTokenFromHeader(authHeader);
18 | if (token) {
19 | const payload = await verifyToken(token);
20 | if (payload) {
21 | userId = payload.id;
22 | }
23 | }
24 | }
25 |
26 | // If no token or invalid token, try session auth
27 | if (!userId) {
28 | const session = await auth();
29 | if (session?.user?.id) {
30 | userId = session.user.id;
31 | }
32 | }
33 |
34 | // If no valid auth found
35 | if (!userId) {
36 | return new Response('Unauthorized', { status: 401 });
37 | }
38 |
39 | try {
40 | const votes = await getVotesByChatId({ id: chatId });
41 | return Response.json(votes, { status: 200 });
42 | } catch (error) {
43 | return Response.json([], { status: 200 });
44 | }
45 | }
46 |
47 | export async function PATCH(request: Request) {
48 | const {
49 | chatId,
50 | messageId,
51 | type,
52 | }: { chatId: string; messageId: string; type: 'up' | 'down' } =
53 | await request.json();
54 |
55 | if (!chatId || !messageId || !type) {
56 | return new Response('messageId and type are required', { status: 400 });
57 | }
58 |
59 | // Try token auth first
60 | let userId: string | undefined;
61 | const authHeader = request.headers.get('authorization');
62 | if (authHeader) {
63 | const token = extractTokenFromHeader(authHeader);
64 | if (token) {
65 | const payload = await verifyToken(token);
66 | if (payload) {
67 | userId = payload.id;
68 | }
69 | }
70 | }
71 |
72 | // If no token or invalid token, try session auth
73 | if (!userId) {
74 | const session = await auth();
75 | if (session?.user?.id) {
76 | userId = session.user.id;
77 | }
78 | }
79 |
80 | // If no valid auth found
81 | if (!userId) {
82 | return new Response('Unauthorized', { status: 401 });
83 | }
84 |
85 | try {
86 | await voteMessage({
87 | chatId,
88 | messageId,
89 | type: type,
90 | });
91 | return new Response('Message voted', { status: 200 });
92 | } catch (error) {
93 | return new Response('Vote failed', { status: 200 }); // Return 200 even if vote fails
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/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 { DEFAULT_MODEL_NAME, models } from '@/lib/ai/models';
7 | import { getChatById, getMessagesByChatId } from '@/lib/db/queries';
8 | import { convertToUIMessages } from '@/lib/utils';
9 | import { DataStreamHandler } from '@/components/data-stream-handler';
10 |
11 | export default async function Page(props: { params: Promise<{ id: string }> }) {
12 | const params = await props.params;
13 | const { id } = params;
14 | const chat = await getChatById({ id });
15 |
16 | if (!chat) {
17 | notFound();
18 | }
19 |
20 | const session = await auth();
21 |
22 | if (chat.visibility === 'private') {
23 | if (!session || !session.user) {
24 | return notFound();
25 | }
26 |
27 | if (session.user.id !== chat.userId) {
28 | return notFound();
29 | }
30 | }
31 |
32 | const messagesFromDb = await getMessagesByChatId({
33 | id,
34 | });
35 |
36 | const cookieStore = await cookies();
37 | const modelIdFromCookie = cookieStore.get('model-id')?.value;
38 | const selectedModelId =
39 | models.find((model) => model.id === modelIdFromCookie)?.id ||
40 | DEFAULT_MODEL_NAME;
41 |
42 | return (
43 | <>
44 |
49 |
56 | Sign Up
57 |
68 |
69 |
50 |
55 | Sign Up
51 |52 | Create an account with your email and password 53 |
54 |58 | {'Already have an account? '} 59 | 63 | Sign in 64 | 65 | {' instead.'} 66 |
67 |
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 |
41 | {messages.map((message, index) => (
42 | vote.messageId === message.id)
50 | : undefined
51 | }
52 | setMessages={setMessages}
53 | reload={reload}
54 | isReadonly={isReadonly}
55 | />
56 | ))}
57 |
58 |
62 |
63 | );
64 | }
65 |
66 | function areEqual(
67 | prevProps: BlockMessagesProps,
68 | nextProps: BlockMessagesProps,
69 | ) {
70 | if (
71 | prevProps.blockStatus === 'streaming' &&
72 | nextProps.blockStatus === 'streaming'
73 | )
74 | return true;
75 |
76 | if (prevProps.isLoading !== nextProps.isLoading) return false;
77 | if (prevProps.isLoading && nextProps.isLoading) return false;
78 | if (prevProps.messages.length !== nextProps.messages.length) return false;
79 | if (!equal(prevProps.votes, nextProps.votes)) return false;
80 |
81 | return true;
82 | }
83 |
84 | export const BlockMessages = memo(PureBlockMessages, areEqual);
85 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/chat-header.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Link from 'next/link';
4 | import { useRouter } from 'next/navigation';
5 | import { useWindowSize } from 'usehooks-ts';
6 |
7 | import { ModelSelector } from '@/components/model-selector';
8 | import { SidebarToggle } from '@/components/sidebar-toggle';
9 | import { Button } from '@/components/ui/button';
10 | import { PlusIcon, VercelIcon } from './icons';
11 | import { useSidebar } from './ui/sidebar';
12 | import { memo } from 'react';
13 | import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
14 | import { VisibilityType, VisibilitySelector } from './visibility-selector';
15 |
16 | function PureChatHeader({
17 | chatId,
18 | selectedModelId,
19 | selectedVisibilityType,
20 | isReadonly,
21 | }: {
22 | chatId: string;
23 | selectedModelId: string;
24 | selectedVisibilityType: VisibilityType;
25 | isReadonly: boolean;
26 | }) {
27 | const router = useRouter();
28 | const { open } = useSidebar();
29 |
30 | const { width: windowWidth } = useWindowSize();
31 |
32 | return (
33 |
64 |
100 |
101 |
33 | {tab === 'code' && (
34 |
48 | );
49 | } else {
50 | return (
51 |
38 | {children}
39 |
40 | )}
41 |
42 | {tab === 'run' && output && (
43 |
44 |
46 | )}
47 | {output}
45 |
55 | {children}
56 |
57 | );
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/code-editor.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { EditorView } from '@codemirror/view';
4 | import { EditorState, Transaction } from '@codemirror/state';
5 | import { python } from '@codemirror/lang-python';
6 | import { oneDark } from '@codemirror/theme-one-dark';
7 | import { basicSetup } from 'codemirror';
8 | import React, { memo, useEffect, useRef } from 'react';
9 | import { Suggestion } from '@/lib/db/schema';
10 |
11 | type EditorProps = {
12 | content: string;
13 | saveContent: (updatedContent: string, debounce: boolean) => void;
14 | status: 'streaming' | 'idle';
15 | isCurrentVersion: boolean;
16 | currentVersionIndex: number;
17 | suggestions: Array
8 |
9 |
10 | ) : (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | };
22 |
23 | export const InlineDocumentSkeleton = () => {
24 | return (
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/image-editor.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderIcon } from './icons';
2 | import cn from 'classnames';
3 |
4 | interface ImageEditorProps {
5 | title: string;
6 | content: string;
7 | isCurrentVersion: boolean;
8 | currentVersionIndex: number;
9 | status: string;
10 | isInline: boolean;
11 | }
12 |
13 | export function ImageEditor({
14 | title,
15 | content,
16 | isCurrentVersion,
17 | currentVersionIndex,
18 | status,
19 | isInline,
20 | }: ImageEditorProps) {
21 | return (
22 |
28 | {status === 'streaming' ? (
29 |
39 | 
46 |
47 | )}
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/markdown.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React, { memo, useMemo, useState } from 'react';
3 | import ReactMarkdown, { type Components } from 'react-markdown';
4 | import remarkGfm from 'remark-gfm';
5 | import { CodeBlock } from './code-block';
6 |
7 | const components: Partial
30 | {!isInline && (
31 |
37 | ) : (
38 |
32 |
34 | )}
35 | Generating Image...
36 | -
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 |
54 |
60 |
61 |
112 | );
113 | }
114 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/messages.tsx:
--------------------------------------------------------------------------------
1 | import { ChatRequestOptions, Message } from 'ai';
2 | import { PreviewMessage, ThinkingMessage } from './message';
3 | import { useScrollToBottom } from './use-scroll-to-bottom';
4 | import { Overview } from './overview';
5 | import { memo } from 'react';
6 | import { Vote } from '@/lib/db/schema';
7 | import equal from 'fast-deep-equal';
8 |
9 | interface MessagesProps {
10 | chatId: string;
11 | isLoading: boolean;
12 | votes: Array
62 |
71 |
110 |
111 |
41 | {/* {messages.length === 0 && vote.messageId === message.id)
52 | : undefined
53 | }
54 | setMessages={setMessages}
55 | reload={reload}
56 | isReadonly={isReadonly}
57 | />
58 | ))}
59 |
60 | {isLoading &&
61 | messages.length > 0 &&
62 | messages[messages.length - 1].role === 'user' &&
69 | );
70 | }
71 |
72 | export const Messages = memo(PureMessages, (prevProps, nextProps) => {
73 | if (prevProps.isBlockVisible && nextProps.isBlockVisible) return true;
74 |
75 | if (prevProps.isLoading !== nextProps.isLoading) return false;
76 | if (prevProps.isLoading && nextProps.isLoading) return false;
77 | if (prevProps.messages.length !== nextProps.messages.length) return false;
78 | if (!equal(prevProps.messages, nextProps.messages)) return false;
79 | if (!equal(prevProps.votes, nextProps.votes)) return false;
80 |
81 | return true;
82 | });
83 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/model-selector.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { startTransition, useMemo, useOptimistic, useState } from 'react';
4 |
5 | import { saveModelId } 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 { models } 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
63 | {model.label}
64 | {model.description && (
65 |
70 |
66 | {model.description}
67 |
68 | )}
69 |
71 |
73 |
17 |
50 |
18 |
23 | This is an{' '}
24 |
29 | open source
30 | {' '}
31 | chatbot template built with Next.js and the AI SDK by Vercel. It uses
32 | the{' '}
33 | streamText{' '}
34 | function in the server and the{' '}
35 | useChat hook
36 | on the client to create a seamless chat experience.
37 |
39 | You can learn more about the AI SDK by visiting the{' '} 40 | 45 | docs 46 | 47 | . 48 |
49 |
16 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/components/sidebar-toggle.tsx:
--------------------------------------------------------------------------------
1 | import type { ComponentProps } from 'react';
2 |
3 | import { type SidebarTrigger, useSidebar } from '@/components/ui/sidebar';
4 | import {
5 | Tooltip,
6 | TooltipContent,
7 | TooltipTrigger,
8 | } from '@/components/ui/tooltip';
9 |
10 | import { SidebarLeftIcon } from './icons';
11 | import { Button } from './ui/button';
12 |
13 | export function SidebarToggle({
14 | className,
15 | }: ComponentProps
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 |
40 |
36 |
38 | )}
39 | {name}
41 |
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 |
--------------------------------------------------------------------------------
/nextjs-ai-chatbot/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 { BlockKind } from './block';
13 |
14 | export const Suggestion = ({
15 | suggestion,
16 | onApply,
17 | blockKind,
18 | }: {
19 | suggestion: UISuggestion;
20 | onApply: () => void;
21 | blockKind: BlockKind;
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 |
47 |
52 |
53 | You are viewing a previous version
48 |
49 | Restore this version to make edits
50 |
51 |
54 |
97 |
105 |
106 |
94 | {visibility.label}
95 | {visibility.description && (
96 |
101 |
97 | {visibility.description}
98 |
99 | )}
100 |
102 |
104 |