diff --git a/.env.example b/.env.example index 67f39f7fbd..098f3f62db 100644 --- a/.env.example +++ b/.env.example @@ -4,17 +4,9 @@ OPENAI_API_KEY=XXXXXXXX # Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32` AUTH_SECRET=XXXXXXXX -# Create a GitHub OAuth app here: https://github.com/settings/applications/new -# For info on authorization callback URL visit here: https://authjs.dev/reference/core/providers_github#callback-url -AUTH_GITHUB_ID=XXXXXXXX -AUTH_GITHUB_SECRET=XXXXXXXX -# Support OAuth login on preview deployments, see: https://authjs.dev/guides/basics/deployment#securing-a-preview-deployment -# Set the following only when deployed. In this example, we can reuse the same OAuth app, but if you are storing users, we recommend using a different OAuth app for development/production so that you don't mix your test and production user base. -# AUTH_REDIRECT_PROXY_URL=https://YOURAPP.vercel.app/api/auth # Instructions to create kv database here: https://vercel.com/docs/storage/vercel-kv/quickstart and KV_URL=XXXXXXXX KV_REST_API_URL=XXXXXXXX KV_REST_API_TOKEN=XXXXXXXX -KV_REST_API_READ_ONLY_TOKEN=XXXXXXXX - +KV_REST_API_READ_ONLY_TOKEN=XXXXXXXX \ No newline at end of file diff --git a/README.md b/README.md index 9884fa3692..79a6701071 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ This template ships with OpenAI `gpt-3.5-turbo` as the default. However, thanks You can deploy your own version of the Next.js AI Chatbot to Vercel with one click: -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js+Chat&demo-description=A+full-featured%2C+hackable+Next.js+AI+chatbot+built+by+Vercel+Labs&demo-url=https%3A%2F%2Fchat.vercel.ai%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4aVPvWuTmBvzM5cEdRdqeW%2F4234f9baf160f68ffb385a43c3527645%2FCleanShot_2023-06-16_at_17.09.21.png&project-name=Next.js+Chat&repository-name=nextjs-chat&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot&from=templates&skippable-integrations=1&env=OPENAI_API_KEY%2CAUTH_GITHUB_ID%2CAUTH_GITHUB_SECRET%2CAUTH_SECRET&envDescription=How+to+get+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&teamCreateStatus=hidden&stores=[{"type":"kv"}]) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js+Chat&demo-description=A+full-featured%2C+hackable+Next.js+AI+chatbot+built+by+Vercel+Labs&demo-url=https%3A%2F%2Fchat.vercel.ai%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4aVPvWuTmBvzM5cEdRdqeW%2F4234f9baf160f68ffb385a43c3527645%2FCleanShot_2023-06-16_at_17.09.21.png&project-name=Next.js+Chat&repository-name=nextjs-chat&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot&from=templates&skippable-integrations=1&env=OPENAI_API_KEY%2CAUTH_SECRET&envDescription=How+to+get+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&teamCreateStatus=hidden&stores=[{"type":"kv"}]) ## Creating a KV Database Instance diff --git a/app/(chat)/chat/[id]/page.tsx b/app/(chat)/chat/[id]/page.tsx index 0ca46b1398..c8de380442 100644 --- a/app/(chat)/chat/[id]/page.tsx +++ b/app/(chat)/chat/[id]/page.tsx @@ -2,8 +2,10 @@ import { type Metadata } from 'next' import { notFound, redirect } from 'next/navigation' import { auth } from '@/auth' -import { getChat } from '@/app/actions' +import { getChat, getMissingKeys } from '@/app/actions' import { Chat } from '@/components/chat' +import { AI } from '@/lib/chat/actions' +import { Session } from '@/lib/types' export interface ChatPageProps { params: { @@ -27,21 +29,32 @@ export async function generateMetadata({ } export default async function ChatPage({ params }: ChatPageProps) { - const session = await auth() + const session = (await auth()) as Session + const missingKeys = await getMissingKeys() if (!session?.user) { - redirect(`/sign-in?next=/chat/${params.id}`) + redirect(`/login?next=/chat/${params.id}`) } - const chat = await getChat(params.id, session.user.id) + const userId = session.user.id as string + const chat = await getChat(params.id, userId) if (!chat) { - notFound() + redirect('/') } if (chat?.userId !== session?.user?.id) { notFound() } - return + return ( + + + + ) } diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx index bbdb186531..2825d593ce 100644 --- a/app/(chat)/layout.tsx +++ b/app/(chat)/layout.tsx @@ -8,9 +8,7 @@ export default async function ChatLayout({ children }: ChatLayoutProps) { return (
-
- {children} -
+ {children}
) } diff --git a/app/(chat)/page.tsx b/app/(chat)/page.tsx index c464137e5f..51bdedaedc 100644 --- a/app/(chat)/page.tsx +++ b/app/(chat)/page.tsx @@ -1,8 +1,22 @@ import { nanoid } from '@/lib/utils' import { Chat } from '@/components/chat' +import { AI } from '@/lib/chat/actions' +import { auth } from '@/auth' +import { Session } from '@/lib/types' +import { getMissingKeys } from '../actions' -export default function IndexPage() { +export const metadata = { + title: 'Next.js AI Chatbot' +} + +export default async function IndexPage() { const id = nanoid() + const session = (await auth()) as Session + const missingKeys = await getMissingKeys() - return + return ( + + + + ) } diff --git a/app/actions.ts b/app/actions.ts index 312312ec66..c624f561ee 100644 --- a/app/actions.ts +++ b/app/actions.ts @@ -49,7 +49,8 @@ export async function removeChat({ id, path }: { id: string; path: string }) { } } - const uid = await kv.hget(`chat:${id}`, 'userId') + //Convert uid to string for consistent comparison with session.user.id + const uid = String(await kv.hget(`chat:${id}`, 'userId')) if (uid !== session?.user?.id) { return { @@ -126,3 +127,30 @@ export async function shareChat(id: string) { return payload } + +export async function saveChat(chat: Chat) { + const session = await auth() + + if (session && session.user) { + const pipeline = kv.pipeline() + pipeline.hmset(`chat:${chat.id}`, chat) + pipeline.zadd(`user:chat:${chat.userId}`, { + score: Date.now(), + member: `chat:${chat.id}` + }) + await pipeline.exec() + } else { + return + } +} + +export async function refreshHistory(path: string) { + redirect(path) +} + +export async function getMissingKeys() { + const keysRequired = ['OPENAI_API_KEY'] + return keysRequired + .map(key => (process.env[key] ? '' : key)) + .filter(key => key !== '') +} diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts deleted file mode 100644 index 883210bb21..0000000000 --- a/app/api/auth/[...nextauth]/route.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { GET, POST } from '@/auth' -export const runtime = 'edge' diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts deleted file mode 100644 index 8d9b3c5466..0000000000 --- a/app/api/chat/route.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { kv } from '@vercel/kv' -import { OpenAIStream, StreamingTextResponse } from 'ai' -import OpenAI from 'openai' - -import { auth } from '@/auth' -import { nanoid } from '@/lib/utils' - -export const runtime = 'edge' - -const openai = new OpenAI({ - apiKey: process.env.OPENAI_API_KEY -}) - -export async function POST(req: Request) { - const json = await req.json() - const { messages, previewToken } = json - const userId = (await auth())?.user.id - - if (!userId) { - return new Response('Unauthorized', { - status: 401 - }) - } - - if (previewToken) { - openai.apiKey = previewToken - } - - const res = await openai.chat.completions.create({ - model: 'gpt-3.5-turbo', - messages, - temperature: 0.7, - stream: true - }) - - const stream = OpenAIStream(res, { - async onCompletion(completion) { - const title = json.messages[0].content.substring(0, 100) - const id = json.id ?? nanoid() - const createdAt = Date.now() - const path = `/chat/${id}` - const payload = { - id, - title, - userId, - createdAt, - path, - messages: [ - ...messages, - { - content: completion, - role: 'assistant' - } - ] - } - await kv.hmset(`chat:${id}`, payload) - await kv.zadd(`user:chat:${userId}`, { - score: createdAt, - member: `chat:${id}` - }) - } - }) - - return new StreamingTextResponse(stream) -} diff --git a/app/globals.css b/app/globals.css index 9beeb2c943..0b46ea13c8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,73 +1,71 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; - - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; - + --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; - + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; - --accent-foreground: ; - + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --ring: 240 5% 64.9%; - + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 10% 3.9%; + --radius: 0.5rem; } - + .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; - - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - + --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; - - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - + + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; - + --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; - --accent-foreground: ; - + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - - --ring: 240 3.7% 15.9%; + --destructive-foreground: 0 0% 98%; + + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; } } - + @layer base { * { @apply border-border; @@ -75,4 +73,4 @@ body { @apply bg-background text-foreground; } -} +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index d9d70d91e2..a32b2230f3 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,3 @@ -import { Toaster } from 'react-hot-toast' import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' @@ -7,9 +6,12 @@ import { cn } from '@/lib/utils' import { TailwindIndicator } from '@/components/tailwind-indicator' import { Providers } from '@/components/providers' import { Header } from '@/components/header' +import { Toaster } from '@/components/ui/sonner' export const metadata = { - metadataBase: new URL(`https://${process.env.VERCEL_URL}`), + metadataBase: process.env.VERCEL_URL + ? new URL(`https://${process.env.VERCEL_URL}`) + : undefined, title: { default: 'Next.js AI Chatbot', template: `%s - Next.js AI Chatbot` @@ -43,7 +45,7 @@ export default function RootLayout({ children }: RootLayoutProps) { GeistMono.variable )} > - + (`user:${email}`) + return user +} + +interface Result { + type: string + resultCode: ResultCode +} + +export async function authenticate( + _prevState: Result | undefined, + formData: FormData +): Promise { + try { + const email = formData.get('email') + const password = formData.get('password') + + const parsedCredentials = z + .object({ + email: z.string().email(), + password: z.string().min(6) + }) + .safeParse({ + email, + password + }) + + if (parsedCredentials.success) { + await signIn('credentials', { + email, + password, + redirect: false + }) + + return { + type: 'success', + resultCode: ResultCode.UserLoggedIn + } + } else { + return { + type: 'error', + resultCode: ResultCode.InvalidCredentials + } + } + } catch (error) { + if (error instanceof AuthError) { + switch (error.type) { + case 'CredentialsSignin': + return { + type: 'error', + resultCode: ResultCode.InvalidCredentials + } + default: + return { + type: 'error', + resultCode: ResultCode.UnknownError + } + } + } + } +} diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000000..1fba27bea2 --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,18 @@ +import { auth } from '@/auth' +import LoginForm from '@/components/login-form' +import { Session } from '@/lib/types' +import { redirect } from 'next/navigation' + +export default async function LoginPage() { + const session = (await auth()) as Session + + if (session) { + redirect('/') + } + + return ( +
+ +
+ ) +} diff --git a/app/new/page.tsx b/app/new/page.tsx new file mode 100644 index 0000000000..d235894813 --- /dev/null +++ b/app/new/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from 'next/navigation' + +export default async function NewPage() { + redirect('/') +} diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx index 638fed5b5d..d80f0c842e 100644 --- a/app/share/[id]/page.tsx +++ b/app/share/[id]/page.tsx @@ -1,10 +1,14 @@ import { type Metadata } from 'next' -import { notFound } from 'next/navigation' +import { notFound, redirect } from 'next/navigation' import { formatDate } from '@/lib/utils' import { getSharedChat } from '@/app/actions' import { ChatList } from '@/components/chat-list' import { FooterText } from '@/components/footer' +import { AI, UIState, getUIStateFromAIState } from '@/lib/chat/actions' + +export const runtime = 'edge' +export const preferredRegion = 'home' interface SharePageProps { params: { @@ -29,11 +33,13 @@ export default async function SharePage({ params }: SharePageProps) { notFound() } + const uiState: UIState = getUIStateFromAIState(chat) + return ( <>
-
-
+
+

{chat.title}

@@ -42,7 +48,9 @@ export default async function SharePage({ params }: SharePageProps) {
- + + +
diff --git a/app/sign-in/page.tsx b/app/sign-in/page.tsx deleted file mode 100644 index a1383fffd0..0000000000 --- a/app/sign-in/page.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { auth } from '@/auth' -import { LoginButton } from '@/components/login-button' -import { redirect } from 'next/navigation' - -export default async function SignInPage() { - const session = await auth() - // redirect to home if user is already logged in - if (session?.user) { - redirect('/') - } - - return ( -
- -
- ) -} diff --git a/app/signup/actions.ts b/app/signup/actions.ts new file mode 100644 index 0000000000..492586ae46 --- /dev/null +++ b/app/signup/actions.ts @@ -0,0 +1,111 @@ +'use server' + +import { signIn } from '@/auth' +import { ResultCode, getStringFromBuffer } from '@/lib/utils' +import { z } from 'zod' +import { kv } from '@vercel/kv' +import { getUser } from '../login/actions' +import { AuthError } from 'next-auth' + +export async function createUser( + email: string, + hashedPassword: string, + salt: string +) { + const existingUser = await getUser(email) + + if (existingUser) { + return { + type: 'error', + resultCode: ResultCode.UserAlreadyExists + } + } else { + const user = { + id: crypto.randomUUID(), + email, + password: hashedPassword, + salt + } + + await kv.hmset(`user:${email}`, user) + + return { + type: 'success', + resultCode: ResultCode.UserCreated + } + } +} + +interface Result { + type: string + resultCode: ResultCode +} + +export async function signup( + _prevState: Result | undefined, + formData: FormData +): Promise { + const email = formData.get('email') as string + const password = formData.get('password') as string + + const parsedCredentials = z + .object({ + email: z.string().email(), + password: z.string().min(6) + }) + .safeParse({ + email, + password + }) + + if (parsedCredentials.success) { + const salt = crypto.randomUUID() + + const encoder = new TextEncoder() + const saltedPassword = encoder.encode(password + salt) + const hashedPasswordBuffer = await crypto.subtle.digest( + 'SHA-256', + saltedPassword + ) + const hashedPassword = getStringFromBuffer(hashedPasswordBuffer) + + try { + const result = await createUser(email, hashedPassword, salt) + + if (result.resultCode === ResultCode.UserCreated) { + await signIn('credentials', { + email, + password, + redirect: false + }) + } + + return result + } catch (error) { + if (error instanceof AuthError) { + switch (error.type) { + case 'CredentialsSignin': + return { + type: 'error', + resultCode: ResultCode.InvalidCredentials + } + default: + return { + type: 'error', + resultCode: ResultCode.UnknownError + } + } + } else { + return { + type: 'error', + resultCode: ResultCode.UnknownError + } + } + } + } else { + return { + type: 'error', + resultCode: ResultCode.InvalidCredentials + } + } +} diff --git a/app/signup/page.tsx b/app/signup/page.tsx new file mode 100644 index 0000000000..dbac96428e --- /dev/null +++ b/app/signup/page.tsx @@ -0,0 +1,18 @@ +import { auth } from '@/auth' +import SignupForm from '@/components/signup-form' +import { Session } from '@/lib/types' +import { redirect } from 'next/navigation' + +export default async function SignupPage() { + const session = (await auth()) as Session + + if (session) { + redirect('/') + } + + return ( +
+ +
+ ) +} diff --git a/auth.config.ts b/auth.config.ts new file mode 100644 index 0000000000..6e74c18bbd --- /dev/null +++ b/auth.config.ts @@ -0,0 +1,42 @@ +import type { NextAuthConfig } from 'next-auth' + +export const authConfig = { + secret: process.env.AUTH_SECRET, + pages: { + signIn: '/login', + newUser: '/signup' + }, + callbacks: { + async authorized({ auth, request: { nextUrl } }) { + const isLoggedIn = !!auth?.user + const isOnLoginPage = nextUrl.pathname.startsWith('/login') + const isOnSignupPage = nextUrl.pathname.startsWith('/signup') + + if (isLoggedIn) { + if (isOnLoginPage || isOnSignupPage) { + return Response.redirect(new URL('/', nextUrl)) + } + } + + return true + }, + async jwt({ token, user }) { + if (user) { + token = { ...token, id: user.id } + } + + return token + }, + async session({ session, token }) { + if (token) { + const { id } = token as { id: string } + const { user } = session + + session = { ...session, user: { ...user, id } } + } + + return session + } + }, + providers: [] +} satisfies NextAuthConfig diff --git a/auth.ts b/auth.ts index 7c0c6a03f1..7542992bdd 100644 --- a/auth.ts +++ b/auth.ts @@ -1,39 +1,45 @@ -import NextAuth, { type DefaultSession } from 'next-auth' -import GitHub from 'next-auth/providers/github' +import NextAuth from 'next-auth' +import Credentials from 'next-auth/providers/credentials' +import { authConfig } from './auth.config' +import { z } from 'zod' +import { getStringFromBuffer } from './lib/utils' +import { getUser } from './app/login/actions' -declare module 'next-auth' { - interface Session { - user: { - /** The user's id. */ - id: string - } & DefaultSession['user'] - } -} +export const { auth, signIn, signOut } = NextAuth({ + ...authConfig, + providers: [ + Credentials({ + async authorize(credentials) { + const parsedCredentials = z + .object({ + email: z.string().email(), + password: z.string().min(6) + }) + .safeParse(credentials) -export const { - handlers: { GET, POST }, - auth -} = NextAuth({ - providers: [GitHub], - callbacks: { - jwt({ token, profile }) { - if (profile) { - token.id = profile.id - token.image = profile.avatar_url || profile.picture - } - return token - }, - session: ({ session, token }) => { - if (session?.user && token?.id) { - session.user.id = String(token.id) + if (parsedCredentials.success) { + const { email, password } = parsedCredentials.data + const user = await getUser(email) + + if (!user) return null + + const encoder = new TextEncoder() + const saltedPassword = encoder.encode(password + user.salt) + const hashedPasswordBuffer = await crypto.subtle.digest( + 'SHA-256', + saltedPassword + ) + const hashedPassword = getStringFromBuffer(hashedPasswordBuffer) + + if (hashedPassword === user.password) { + return user + } else { + return null + } + } + + return null } - return session - }, - authorized({ auth }) { - return !!auth?.user // this ensures there is a logged in user for -every- request - } - }, - pages: { - signIn: '/sign-in' // overrides the next-auth default signin page https://authjs.dev/guides/basics/pages - } + }) + ] }) diff --git a/components.json b/components.json new file mode 100644 index 0000000000..58b812d037 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "zinc", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/components/button-scroll-to-bottom.tsx b/components/button-scroll-to-bottom.tsx index 436a6c0a7f..3988e73b3f 100644 --- a/components/button-scroll-to-bottom.tsx +++ b/components/button-scroll-to-bottom.tsx @@ -3,13 +3,20 @@ import * as React from 'react' import { cn } from '@/lib/utils' -import { useAtBottom } from '@/lib/hooks/use-at-bottom' import { Button, type ButtonProps } from '@/components/ui/button' import { IconArrowDown } from '@/components/ui/icons' -export function ButtonScrollToBottom({ className, ...props }: ButtonProps) { - const isAtBottom = useAtBottom() +interface ButtonScrollToBottomProps extends ButtonProps { + isAtBottom: boolean + scrollToBottom: () => void +} +export function ButtonScrollToBottom({ + className, + isAtBottom, + scrollToBottom, + ...props +}: ButtonScrollToBottomProps) { return ( - ) : ( - messages?.length >= 2 && ( -
- - {id && title ? ( - <> - - setShareDialogOpen(false)} - shareChat={shareChat} - chat={{ - id, - title, - messages - }} - /> - - ) : null} +
+ {messages.length === 0 && + exampleMessages.map((example, index) => ( +
1 && 'hidden md:block' + }`} + onClick={async () => { + setMessages(currentMessages => [ + ...currentMessages, + { + id: nanoid(), + display: {example.message} + } + ]) + + const responseMessage = await submitUserMessage( + example.message + ) + + setMessages(currentMessages => [ + ...currentMessages, + responseMessage + ]) + }} + > +
{example.heading}
+
+ {example.subheading} +
- ) - )} + ))}
-
- { - await append({ - id, - content: value, - role: 'user' - }) - }} - input={input} - setInput={setInput} - isLoading={isLoading} - /> + + {messages?.length >= 2 ? ( +
+
+ {id && title ? ( + <> + + setShareDialogOpen(false)} + shareChat={shareChat} + chat={{ + id, + title, + messages: aiState.messages + }} + /> + + ) : null} +
+
+ ) : null} + +
+
diff --git a/components/chat-scroll-anchor.tsx b/components/chat-scroll-anchor.tsx deleted file mode 100644 index ac809f4486..0000000000 --- a/components/chat-scroll-anchor.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client' - -import * as React from 'react' -import { useInView } from 'react-intersection-observer' - -import { useAtBottom } from '@/lib/hooks/use-at-bottom' - -interface ChatScrollAnchorProps { - trackVisibility?: boolean -} - -export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) { - const isAtBottom = useAtBottom() - const { ref, entry, inView } = useInView({ - trackVisibility, - delay: 100, - rootMargin: '0px 0px -150px 0px' - }) - - React.useEffect(() => { - if (isAtBottom && trackVisibility && !inView) { - entry?.target.scrollIntoView({ - block: 'start' - }) - } - }, [inView, entry, isAtBottom, trackVisibility]) - - return
-} diff --git a/components/chat-share-dialog.tsx b/components/chat-share-dialog.tsx index 83bac71cbf..2e5f8e27b1 100644 --- a/components/chat-share-dialog.tsx +++ b/components/chat-share-dialog.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { type DialogProps } from '@radix-ui/react-dialog' -import { toast } from 'react-hot-toast' +import { toast } from 'sonner' import { ServerActionResult, type Chat } from '@/lib/types' import { Button } from '@/components/ui/button' @@ -42,18 +42,7 @@ export function ChatShareDialog({ url.pathname = chat.sharePath copyToClipboard(url.toString()) onCopy() - toast.success('Share link copied to clipboard', { - style: { - borderRadius: '10px', - background: '#333', - color: '#fff', - fontSize: '14px' - }, - iconTheme: { - primary: 'white', - secondary: 'black' - } - }) + toast.success('Share link copied to clipboard') }, [copyToClipboard, onCopy] ) diff --git a/components/chat.tsx b/components/chat.tsx index e8d85b3f66..a8d188f806 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -1,119 +1,85 @@ 'use client' -import { useChat, type Message } from 'ai/react' - import { cn } from '@/lib/utils' import { ChatList } from '@/components/chat-list' import { ChatPanel } from '@/components/chat-panel' import { EmptyScreen } from '@/components/empty-screen' -import { ChatScrollAnchor } from '@/components/chat-scroll-anchor' import { useLocalStorage } from '@/lib/hooks/use-local-storage' -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle -} from '@/components/ui/dialog' -import { useState } from 'react' -import { Button } from './ui/button' -import { Input } from './ui/input' -import { toast } from 'react-hot-toast' +import { useEffect, useState } from 'react' +import { useUIState, useAIState } from 'ai/rsc' +import { Session } from '@/lib/types' import { usePathname, useRouter } from 'next/navigation' +import { Message } from '@/lib/chat/actions' +import { useScrollAnchor } from '@/lib/hooks/use-scroll-anchor' +import { toast } from 'sonner' -const IS_PREVIEW = process.env.VERCEL_ENV === 'preview' export interface ChatProps extends React.ComponentProps<'div'> { initialMessages?: Message[] id?: string + session?: Session + missingKeys: string[] } -export function Chat({ id, initialMessages, className }: ChatProps) { +export function Chat({ id, className, session, missingKeys }: ChatProps) { const router = useRouter() const path = usePathname() - const [previewToken, setPreviewToken] = useLocalStorage( - 'ai-token', - null - ) - const [previewTokenDialog, setPreviewTokenDialog] = useState(IS_PREVIEW) - const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '') - const { messages, append, reload, stop, isLoading, input, setInput } = - useChat({ - initialMessages, - id, - body: { - id, - previewToken - }, - onResponse(response) { - if (response.status === 401) { - toast.error(response.statusText) - } - }, - onFinish() { - if (!path.includes('chat')) { - window.history.pushState({}, '', `/chat/${id}`) - } + const [input, setInput] = useState('') + const [messages] = useUIState() + const [aiState] = useAIState() + + const [_, setNewChatId] = useLocalStorage('newChatId', id) + + useEffect(() => { + if (session?.user) { + if (!path.includes('chat') && messages.length === 1) { + window.history.replaceState({}, '', `/chat/${id}`) } + } + }, [id, path, session?.user, messages]) + + useEffect(() => { + const messagesLength = aiState.messages?.length + if (messagesLength === 2) { + router.refresh() + } + }, [aiState.messages, router]) + + useEffect(() => { + setNewChatId(id) + }) + + useEffect(() => { + missingKeys.map(key => { + toast.error(`Missing ${key} environment variable!`) }) + }, [missingKeys]) + + const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } = + useScrollAnchor() + return ( - <> -
+
+
{messages.length ? ( - <> - - - + ) : ( - + )} +
- - - - - Enter your OpenAI Key - - If you have not obtained your OpenAI API key, you can do so by{' '} - - signing up - {' '} - on the OpenAI website. This is only necessary for preview - environments so that the open source community can test the app. - The token will be saved to your browser's local storage under - the name ai-token. - - - setPreviewTokenInput(e.target.value)} - /> - - - - - - +
) } diff --git a/components/clear-history.tsx b/components/clear-history.tsx index 553d2db3c9..69cf70ec39 100644 --- a/components/clear-history.tsx +++ b/components/clear-history.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { useRouter } from 'next/navigation' -import { toast } from 'react-hot-toast' +import { toast } from 'sonner' import { ServerActionResult } from '@/lib/types' import { Button } from '@/components/ui/button' @@ -54,16 +54,14 @@ export function ClearHistory({ disabled={isPending} onClick={event => { event.preventDefault() - startTransition(() => { - clearChats().then(result => { - if (result && 'error' in result) { - toast.error(result.error) - return - } + startTransition(async () => { + const result = await clearChats() + if (result && 'error' in result) { + toast.error(result.error) + return + } - setOpen(false) - router.push('/') - }) + setOpen(false) }) }} > diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx index 90859309b3..bb70d957bc 100644 --- a/components/empty-screen.tsx +++ b/components/empty-screen.tsx @@ -19,37 +19,34 @@ const exampleMessages = [ } ] -export function EmptyScreen({ setInput }: Pick) { +export function EmptyScreen() { return (
-
-

+
+

Welcome to Next.js AI Chatbot!

-

+

This is an open source AI chatbot app template built with{' '} - Next.js and{' '} + Next.js, the{' '} + + Vercel AI SDK + + , and{' '} Vercel KV .

- You can start a conversation here or try the following examples: + It uses{' '} + + React Server Components + {' '} + to combine text with generative UI as output of the LLM. The UI state + is synced through the SDK so the model is aware of your interactions + as they happen.

-
- {exampleMessages.map((message, index) => ( - - ))} -

) diff --git a/components/footer.tsx b/components/footer.tsx index 0a8fce3c29..5ed21579a4 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -14,8 +14,8 @@ export function FooterText({ className, ...props }: React.ComponentProps<'p'>) { > Open source AI chatbot built with{' '} Next.js and{' '} - - Vercel KV + + Vercel AI SDK .

diff --git a/components/header.tsx b/components/header.tsx index 3242e9a091..3b41a04a4b 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -14,9 +14,10 @@ import { UserMenu } from '@/components/user-menu' import { SidebarMobile } from './sidebar-mobile' import { SidebarToggle } from './sidebar-toggle' import { ChatHistory } from './chat-history' +import { Session } from '@/lib/types' async function UserOrLogin() { - const session = await auth() + const session = (await auth()) as Session return ( <> {session?.user ? ( @@ -27,7 +28,7 @@ async function UserOrLogin() { ) : ( - + @@ -38,7 +39,7 @@ async function UserOrLogin() { ) : ( )}
@@ -65,7 +66,7 @@ export function Header() { GitHub diff --git a/components/login-form.tsx b/components/login-form.tsx new file mode 100644 index 0000000000..0a6910d631 --- /dev/null +++ b/components/login-form.tsx @@ -0,0 +1,97 @@ +'use client' + +import { useFormState, useFormStatus } from 'react-dom' +import { authenticate } from '@/app/login/actions' +import Link from 'next/link' +import { useEffect } from 'react' +import { toast } from 'sonner' +import { IconSpinner } from './ui/icons' +import { getMessageFromCode } from '@/lib/utils' +import { useRouter } from 'next/navigation' + +export default function LoginForm() { + const router = useRouter() + const [result, dispatch] = useFormState(authenticate, undefined) + + useEffect(() => { + if (result) { + if (result.type === 'error') { + toast.error(getMessageFromCode(result.resultCode)) + } else { + toast.success(getMessageFromCode(result.resultCode)) + router.refresh() + } + } + }, [result, router]) + + return ( +
+
+

Please log in to continue.

+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ + + No account yet?
Sign up
+ +
+ ) +} + +function LoginButton() { + const { pending } = useFormStatus() + + return ( + + ) +} diff --git a/components/prompt-form.tsx b/components/prompt-form.tsx index 1b2011ae91..2271edbd51 100644 --- a/components/prompt-form.tsx +++ b/components/prompt-form.tsx @@ -1,32 +1,36 @@ +'use client' + import * as React from 'react' import Textarea from 'react-textarea-autosize' -import { UseChatHelpers } from 'ai/react' -import { useEnterSubmit } from '@/lib/hooks/use-enter-submit' -import { cn } from '@/lib/utils' -import { Button, buttonVariants } from '@/components/ui/button' + +import { useActions, useUIState } from 'ai/rsc' + +import { UserMessage } from './stocks/message' +import { type AI } from '@/lib/chat/actions' +import { Button } from '@/components/ui/button' +import { IconArrowElbow, IconPlus } from '@/components/ui/icons' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' -import { IconArrowElbow, IconPlus } from '@/components/ui/icons' +import { useEnterSubmit } from '@/lib/hooks/use-enter-submit' +import { nanoid } from 'nanoid' import { useRouter } from 'next/navigation' -export interface PromptProps - extends Pick { - onSubmit: (value: string) => void - isLoading: boolean -} - export function PromptForm({ - onSubmit, input, - setInput, - isLoading -}: PromptProps) { + setInput +}: { + input: string + setInput: (value: string) => void +}) { + const router = useRouter() const { formRef, onKeyDown } = useEnterSubmit() const inputRef = React.useRef(null) - const router = useRouter() + const { submitUserMessage } = useActions() + const [_, setMessages] = useUIState() + React.useEffect(() => { if (inputRef.current) { inputRef.current.focus() @@ -35,33 +39,47 @@ export function PromptForm({ return (
{ + ref={formRef} + onSubmit={async (e: any) => { e.preventDefault() - if (!input?.trim()) { - return + + // Blur focus on mobile + if (window.innerWidth < 600) { + e.target['message']?.blur() } + + const value = input.trim() setInput('') - await onSubmit(input) + if (!value) return + + // Optimistically add user message UI + setMessages(currentMessages => [ + ...currentMessages, + { + id: nanoid(), + display: {value} + } + ]) + + // Submit and get response message + const responseMessage = await submitUserMessage(value) + setMessages(currentMessages => [...currentMessages, responseMessage]) }} - ref={formRef} > -
+
- + New Chat @@ -69,21 +87,21 @@ export function PromptForm({ ref={inputRef} tabIndex={0} onKeyDown={onKeyDown} + placeholder="Send a message." + className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm" + autoFocus + spellCheck={false} + autoComplete="off" + autoCorrect="off" + name="message" rows={1} value={input} onChange={e => setInput(e.target.value)} - placeholder="Send a message." - spellCheck={false} - className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm" /> -
+
- diff --git a/components/sidebar-actions.tsx b/components/sidebar-actions.tsx index bfcde3a646..4f90f2d5da 100644 --- a/components/sidebar-actions.tsx +++ b/components/sidebar-actions.tsx @@ -2,7 +2,7 @@ import { useRouter } from 'next/navigation' import * as React from 'react' -import { toast } from 'react-hot-toast' +import { toast } from 'sonner' import { ServerActionResult, type Chat } from '@/lib/types' import { @@ -42,12 +42,12 @@ export function SidebarActions({ return ( <> -
+
Toggle Sidebar - + {children} diff --git a/components/signup-form.tsx b/components/signup-form.tsx new file mode 100644 index 0000000000..f5b78a9668 --- /dev/null +++ b/components/signup-form.tsx @@ -0,0 +1,95 @@ +'use client' + +import { useFormState, useFormStatus } from 'react-dom' +import { signup } from '@/app/signup/actions' +import Link from 'next/link' +import { useEffect } from 'react' +import { toast } from 'sonner' +import { IconSpinner } from './ui/icons' +import { getMessageFromCode } from '@/lib/utils' +import { useRouter } from 'next/navigation' + +export default function SignupForm() { + const router = useRouter() + const [result, dispatch] = useFormState(signup, undefined) + + useEffect(() => { + if (result) { + if (result.type === 'error') { + toast.error(getMessageFromCode(result.resultCode)) + } else { + toast.success(getMessageFromCode(result.resultCode)) + router.refresh() + } + } + }, [result, router]) + + return ( + +
+

Sign up for an account!

+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ + + Already have an account? +
Log in
+ + + ) +} + +function LoginButton() { + const { pending } = useFormStatus() + + return ( + + ) +} diff --git a/components/stocks/events-skeleton.tsx b/components/stocks/events-skeleton.tsx new file mode 100644 index 0000000000..74515cb0cf --- /dev/null +++ b/components/stocks/events-skeleton.tsx @@ -0,0 +1,31 @@ +const placeholderEvents = [ + { + date: '2022-10-01', + headline: 'NVIDIA releases new AI-powered graphics card', + description: + 'NVIDIA unveils the latest graphics card infused with AI capabilities, revolutionizing gaming and rendering experiences.' + } +] + +export const EventsSkeleton = () => { + return ( +
+ {placeholderEvents.map(event => ( +
+
+ {event.date} +
+
+ {event.headline} +
+
+ {event.description.slice(0, 70)}... +
+
+ ))} +
+ ) +} diff --git a/components/stocks/events.tsx b/components/stocks/events.tsx new file mode 100644 index 0000000000..37652cb581 --- /dev/null +++ b/components/stocks/events.tsx @@ -0,0 +1,30 @@ +import { format, parseISO } from 'date-fns' + +interface Event { + date: string + headline: string + description: string +} + +export function Events({ props: events }: { props: Event[] }) { + return ( +
+ {events.map(event => ( +
+
+ {format(parseISO(event.date), 'dd LLL, yyyy')} +
+
+ {event.headline} +
+
+ {event.description.slice(0, 70)}... +
+
+ ))} +
+ ) +} diff --git a/components/stocks/index.tsx b/components/stocks/index.tsx new file mode 100644 index 0000000000..13dedbe255 --- /dev/null +++ b/components/stocks/index.tsx @@ -0,0 +1,36 @@ +'use client' + +import dynamic from 'next/dynamic' +import { StockSkeleton } from './stock-skeleton' +import { StocksSkeleton } from './stocks-skeleton' +import { EventsSkeleton } from './events-skeleton' + +export { spinner } from './spinner' +export { BotCard, BotMessage, SystemMessage } from './message' + +const Stock = dynamic(() => import('./stock').then(mod => mod.Stock), { + ssr: false, + loading: () => +}) + +const Purchase = dynamic( + () => import('./stock-purchase').then(mod => mod.Purchase), + { + ssr: false, + loading: () => ( +
+ ) + } +) + +const Stocks = dynamic(() => import('./stocks').then(mod => mod.Stocks), { + ssr: false, + loading: () => +}) + +const Events = dynamic(() => import('./events').then(mod => mod.Events), { + ssr: false, + loading: () => +}) + +export { Stock, Purchase, Stocks, Events } diff --git a/components/stocks/message.tsx b/components/stocks/message.tsx new file mode 100644 index 0000000000..5c7e7caf11 --- /dev/null +++ b/components/stocks/message.tsx @@ -0,0 +1,134 @@ +'use client' + +import { IconOpenAI, IconUser } from '@/components/ui/icons' +import { cn } from '@/lib/utils' +import { spinner } from './spinner' +import { CodeBlock } from '../ui/codeblock' +import { MemoizedReactMarkdown } from '../markdown' +import remarkGfm from 'remark-gfm' +import remarkMath from 'remark-math' +import { StreamableValue } from 'ai/rsc' +import { useStreamableText } from '@/lib/hooks/use-streamable-text' + +// Different types of message bubbles. + +export function UserMessage({ children }: { children: React.ReactNode }) { + return ( +
+
+ +
+
+ {children} +
+
+ ) +} + +export function BotMessage({ + content, + className +}: { + content: string | StreamableValue + className?: string +}) { + const text = useStreamableText(content) + + return ( +
+
+ +
+
+ {children}

+ }, + code({ node, inline, className, children, ...props }) { + if (children.length) { + if (children[0] == '▍') { + return ( + ▍ + ) + } + + children[0] = (children[0] as string).replace('`▍`', '▍') + } + + const match = /language-(\w+)/.exec(className || '') + + if (inline) { + return ( + + {children} + + ) + } + + return ( + + ) + } + }} + > + {text} + +
+
+ ) +} + +export function BotCard({ + children, + showAvatar = true +}: { + children: React.ReactNode + showAvatar?: boolean +}) { + return ( +
+
+ +
+
{children}
+
+ ) +} + +export function SystemMessage({ children }: { children: React.ReactNode }) { + return ( +
+
{children}
+
+ ) +} + +export function SpinnerMessage() { + return ( +
+
+ +
+
+ {spinner} +
+
+ ) +} diff --git a/components/stocks/spinner.tsx b/components/stocks/spinner.tsx new file mode 100644 index 0000000000..8eab1d31b5 --- /dev/null +++ b/components/stocks/spinner.tsx @@ -0,0 +1,16 @@ +'use client' + +export const spinner = ( + + + +) diff --git a/components/stocks/stock-purchase.tsx b/components/stocks/stock-purchase.tsx new file mode 100644 index 0000000000..8acb8e377a --- /dev/null +++ b/components/stocks/stock-purchase.tsx @@ -0,0 +1,146 @@ +'use client' + +import { useId, useState } from 'react' +import { useActions, useAIState, useUIState } from 'ai/rsc' +import { formatNumber } from '@/lib/utils' + +import type { AI } from '@/lib/chat/actions' + +interface Purchase { + numberOfShares?: number + symbol: string + price: number + status: 'requires_action' | 'completed' | 'expired' +} + +export function Purchase({ + props: { numberOfShares, symbol, price, status = 'requires_action' } +}: { + props: Purchase +}) { + const [value, setValue] = useState(numberOfShares || 100) + const [purchasingUI, setPurchasingUI] = useState(null) + const [aiState, setAIState] = useAIState() + const [, setMessages] = useUIState() + const { confirmPurchase } = useActions() + + // Unique identifier for this UI component. + const id = useId() + + // Whenever the slider changes, we need to update the local value state and the history + // so LLM also knows what's going on. + function onSliderChange(e: React.ChangeEvent) { + const newValue = Number(e.target.value) + setValue(newValue) + + // Insert a hidden history info to the list. + const message = { + role: 'system' as const, + content: `[User has changed to purchase ${newValue} shares of ${name}. Total cost: $${( + newValue * price + ).toFixed(2)}]`, + + // Identifier of this UI component, so we don't insert it many times. + id + } + + // If last history state is already this info, update it. This is to avoid + // adding every slider change to the history. + if (aiState.messages[aiState.messages.length - 1]?.id === id) { + setAIState({ + ...aiState, + messages: [...aiState.messages.slice(0, -1), message] + }) + + return + } + + // If it doesn't exist, append it to history. + setAIState({ ...aiState, messages: [...aiState.messages, message] }) + } + + return ( +
+
+ +1.23% ↑ +
+
{symbol}
+
${price}
+ {purchasingUI ? ( +
{purchasingUI}
+ ) : status === 'requires_action' ? ( + <> +
+

Shares to purchase

+ + + 10 + + + 100 + + + 500 + + + 1000 + +
+ +
+

Total cost

+
+
+ {value} + + shares + +
+
×
+ + ${price} + + per share + + +
+ = {formatNumber(value * price)} +
+
+
+ + + + ) : status === 'completed' ? ( +

+ You have successfully purchased {value} ${symbol}. Total cost:{' '} + {formatNumber(value * price)} +

+ ) : status === 'expired' ? ( +

Your checkout session has expired!

+ ) : null} +
+ ) +} diff --git a/components/stocks/stock-skeleton.tsx b/components/stocks/stock-skeleton.tsx new file mode 100644 index 0000000000..e7b7a93baf --- /dev/null +++ b/components/stocks/stock-skeleton.tsx @@ -0,0 +1,22 @@ +export const StockSkeleton = () => { + return ( +
+
+ xxxxxxx +
+
+ xxxx +
+
+ xxxx +
+
+ xxxxxx xxx xx xxxx xx xxx +
+ +
+
+
+
+ ) +} diff --git a/components/stocks/stock.tsx b/components/stocks/stock.tsx new file mode 100644 index 0000000000..aef249bc62 --- /dev/null +++ b/components/stocks/stock.tsx @@ -0,0 +1,210 @@ +'use client' + +import { useState, useRef, useEffect, useId } from 'react' +import { scaleLinear } from 'd3-scale' +import { subMonths, format } from 'date-fns' +import { useResizeObserver } from 'usehooks-ts' +import { useAIState } from 'ai/rsc' + +interface Stock { + symbol: string + price: number + delta: number +} + +export function Stock({ props: { symbol, price, delta } }: { props: Stock }) { + const [aiState, setAIState] = useAIState() + const id = useId() + + const [priceAtTime, setPriceAtTime] = useState({ + time: '00:00', + value: price.toFixed(2), + x: 0 + }) + + const [startHighlight, setStartHighlight] = useState(0) + const [endHighlight, setEndHighlight] = useState(0) + + const chartRef = useRef(null) + const { width = 0 } = useResizeObserver({ + ref: chartRef, + box: 'border-box' + }) + + const xToDate = scaleLinear( + [0, width], + [subMonths(new Date(), 6), new Date()] + ) + const xToValue = scaleLinear( + [0, width], + [price - price / 2, price + price / 2] + ) + + useEffect(() => { + if (startHighlight && endHighlight) { + const message = { + id, + role: 'system' as const, + content: `[User has highlighted dates between between ${format( + xToDate(startHighlight), + 'd LLL' + )} and ${format(xToDate(endHighlight), 'd LLL, yyyy')}` + } + + if (aiState.messages[aiState.messages.length - 1]?.id === id) { + setAIState({ + ...aiState, + messages: [...aiState.messages.slice(0, -1), message] + }) + } else { + setAIState({ + ...aiState, + messages: [...aiState.messages, message] + }) + } + } + }, [startHighlight, endHighlight]) + + return ( +
+
+ {`${delta > 0 ? '+' : ''}${((delta / price) * 100).toFixed(2)}% ${ + delta > 0 ? '↑' : '↓' + }`} +
+
{symbol}
+
${price}
+
+ Closed: Feb 27, 4:59 PM EST +
+ +
{ + if (chartRef.current) { + const { clientX } = event + const { left } = chartRef.current.getBoundingClientRect() + + setStartHighlight(clientX - left) + setEndHighlight(0) + + setPriceAtTime({ + time: format(xToDate(clientX), 'dd LLL yy'), + value: xToValue(clientX).toFixed(2), + x: clientX - left + }) + } + }} + onPointerUp={event => { + if (chartRef.current) { + const { clientX } = event + const { left } = chartRef.current.getBoundingClientRect() + + setEndHighlight(clientX - left) + } + }} + onPointerMove={event => { + if (chartRef.current) { + const { clientX } = event + const { left } = chartRef.current.getBoundingClientRect() + + setPriceAtTime({ + time: format(xToDate(clientX), 'dd LLL yy'), + value: xToValue(clientX).toFixed(2), + x: clientX - left + }) + } + }} + onPointerLeave={() => { + setPriceAtTime({ + time: '00:00', + value: price.toFixed(2), + x: 0 + }) + }} + ref={chartRef} + > + {priceAtTime.x > 0 ? ( +
+
${priceAtTime.value}
+
+ {priceAtTime.time} +
+
+ ) : null} + + {startHighlight ? ( +
+ ) : null} + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ) +} diff --git a/components/stocks/stocks-skeleton.tsx b/components/stocks/stocks-skeleton.tsx new file mode 100644 index 0000000000..d19ed69675 --- /dev/null +++ b/components/stocks/stocks-skeleton.tsx @@ -0,0 +1,9 @@ +export const StocksSkeleton = () => { + return ( +
+
+
+
+
+ ) +} diff --git a/components/stocks/stocks.tsx b/components/stocks/stocks.tsx new file mode 100644 index 0000000000..a5f78262ba --- /dev/null +++ b/components/stocks/stocks.tsx @@ -0,0 +1,67 @@ +'use client' + +import { useActions, useUIState } from 'ai/rsc' + +import type { AI } from '@/lib/chat/actions' + +interface Stock { + symbol: string + price: number + delta: number +} + +export function Stocks({ props: stocks }: { props: Stock[] }) { + const [, setMessages] = useUIState() + const { submitUserMessage } = useActions() + + return ( +
+
+ {stocks.map(stock => ( + + ))} +
+
+ Note: Data and latency are simulated for illustrative purposes and + should not be considered as financial advice. +
+
+ ) +} diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx index 2302ff2d3d..57760f2ee4 100644 --- a/components/ui/alert-dialog.tsx +++ b/components/ui/alert-dialog.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import * as React from 'react' -import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" -import { cn } from '@/lib/utils' -import { buttonVariants } from '@/components/ui/button' +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root @@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef< >(({ className, ...props }, ref) => ( ) => (
) -AlertDialogHeader.displayName = 'AlertDialogHeader' +AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, @@ -65,13 +65,13 @@ const AlertDialogFooter = ({ }: React.HTMLAttributes) => (
) -AlertDialogFooter.displayName = 'AlertDialogFooter' +AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, @@ -79,7 +79,7 @@ const AlertDialogTitle = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -91,7 +91,7 @@ const AlertDialogDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -117,8 +117,8 @@ const AlertDialogCancel = React.forwardRef< = memo(({ language, value }) => { padding: '1.5rem 1rem' }} lineNumberStyle={{ - userSelect: "none", + userSelect: 'none' }} codeTagProps={{ style: { diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index 7649a101a3..5ad11c87d8 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import * as React from 'react' -import * as DialogPrimitive from '@radix-ui/react-dialog' +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { Cross2Icon } from "@radix-ui/react-icons" -import { cn } from '@/lib/utils' -import { IconClose } from '@/components/ui/icons' +import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root @@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef< {children} - + Close @@ -59,13 +59,13 @@ const DialogHeader = ({ }: React.HTMLAttributes) => (
) -DialogHeader.displayName = 'DialogHeader' +DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, @@ -73,13 +73,13 @@ const DialogFooter = ({ }: React.HTMLAttributes) => (
) -DialogFooter.displayName = 'DialogFooter' +DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, @@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -112,11 +112,11 @@ export { Dialog, DialogPortal, DialogOverlay, - DialogClose, DialogTrigger, + DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, - DialogDescription + DialogDescription, } diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index 184d4e6007..1ff35de900 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -1,9 +1,14 @@ -'use client' +"use client" -import * as React from 'react' -import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { + CheckIcon, + ChevronRightIcon, + DotFilledIcon, +} from "@radix-ui/react-icons" -import { cn } from '@/lib/utils' +import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root @@ -17,6 +22,28 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -24,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef< , + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { @@ -78,8 +152,8 @@ const DropdownMenuLabel = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -105,18 +179,20 @@ const DropdownMenuShortcut = ({ }: React.HTMLAttributes) => { return ( ) } -DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, @@ -124,5 +200,6 @@ export { DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, - DropdownMenuRadioGroup + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, } diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 684a857f3d..a92b8e0e58 100644 --- a/components/ui/input.tsx +++ b/components/ui/input.tsx @@ -1,6 +1,6 @@ -import * as React from 'react' +import * as React from "react" -import { cn } from '@/lib/utils' +import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} @@ -11,7 +11,7 @@ const Input = React.forwardRef( ( ) } ) -Input.displayName = 'Input' +Input.displayName = "Input" export { Input } diff --git a/components/ui/select.tsx b/components/ui/select.tsx index c9986a66d3..f489242110 100644 --- a/components/ui/select.tsx +++ b/components/ui/select.tsx @@ -1,14 +1,15 @@ -'use client' +"use client" -import * as React from 'react' -import * as SelectPrimitive from '@radix-ui/react-select' - -import { cn } from '@/lib/utils' +import * as React from "react" import { - IconArrowDown, - IconCheck, - IconChevronUpDown -} from '@/components/ui/icons' + CaretSortIcon, + CheckIcon, + ChevronDownIcon, + ChevronUpIcon, +} from "@radix-ui/react-icons" +import * as SelectPrimitive from "@radix-ui/react-select" + +import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root @@ -23,43 +24,81 @@ const SelectTrigger = React.forwardRef< span]:line-clamp-1", className )} {...props} > {children} - + )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName + const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, position = 'popper', ...props }, ref) => ( +>(({ className, children, position = "popper", ...props }, ref) => ( + {children} + )) @@ -71,7 +110,7 @@ const SelectLabel = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -84,14 +123,14 @@ const SelectItem = React.forwardRef< - + - + {children} @@ -105,7 +144,7 @@ const SelectSeparator = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -119,5 +158,7 @@ export { SelectContent, SelectLabel, SelectItem, - SelectSeparator + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, } diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx index 6c55e0b2ca..12d81c4a85 100644 --- a/components/ui/separator.tsx +++ b/components/ui/separator.tsx @@ -1,16 +1,16 @@ -'use client' +"use client" -import * as React from 'react' -import * as SeparatorPrimitive from '@radix-ui/react-separator' +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" -import { cn } from '@/lib/utils' +import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( - { className, orientation = 'horizontal', decorative = true, ...props }, + { className, orientation = "horizontal", decorative = true, ...props }, ref ) => ( (({ className, ...props }, ref) => ( , SheetContentProps ->(({ side = 'left', className, children, ...props }, ref) => ( +>(({ side = "right", className, children, ...props }, ref) => ( {children} - + Close @@ -80,13 +80,13 @@ const SheetHeader = ({ }: React.HTMLAttributes) => (
) -SheetHeader.displayName = 'SheetHeader' +SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, @@ -94,13 +94,13 @@ const SheetFooter = ({ }: React.HTMLAttributes) => (
) -SheetFooter.displayName = 'SheetFooter' +SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, @@ -108,7 +108,7 @@ const SheetTitle = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -120,7 +120,7 @@ const SheetDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -136,5 +136,5 @@ export { SheetHeader, SheetFooter, SheetTitle, - SheetDescription + SheetDescription, } diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx new file mode 100644 index 0000000000..452f4d9f0d --- /dev/null +++ b/components/ui/sonner.tsx @@ -0,0 +1,31 @@ +"use client" + +import { useTheme } from "next-themes" +import { Toaster as Sonner } from "sonner" + +type ToasterProps = React.ComponentProps + +const Toaster = ({ ...props }: ToasterProps) => { + const { theme = "system" } = useTheme() + + return ( + + ) +} + +export { Toaster } diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx index 29b8c29d10..37d61e4bf7 100644 --- a/components/ui/switch.tsx +++ b/components/ui/switch.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import * as React from 'react' -import * as SwitchPrimitives from '@radix-ui/react-switch' +import * as React from "react" +import * as SwitchPrimitives from "@radix-ui/react-switch" -import { cn } from '@/lib/utils' +import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, @@ -11,7 +11,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx index e25af722c7..d1258e47a4 100644 --- a/components/ui/textarea.tsx +++ b/components/ui/textarea.tsx @@ -1,6 +1,6 @@ -import * as React from 'react' +import * as React from "react" -import { cn } from '@/lib/utils' +import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} @@ -10,7 +10,7 @@ const Textarea = React.forwardRef( return (