├── .eslintrc.json
├── prettier.config.js
├── src
    ├── app
    │   ├── ThemeProvider.tsx
    │   ├── favicon.ico
    │   ├── notes
    │   │   ├── layout.tsx
    │   │   ├── page.tsx
    │   │   └── NavBar.tsx
    │   ├── sign-in
    │   │   └── [[...sign-in]]
    │   │   │   └── page.tsx
    │   ├── sign-up
    │   │   └── [[...sign-up]]
    │   │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── page.tsx
    │   ├── globals.css
    │   └── api
    │   │   ├── chat
    │   │       └── route.ts
    │   │   └── notes
    │   │       └── route.ts
    ├── assets
    │   └── logo.png
    ├── lib
    │   ├── utils.ts
    │   ├── db
    │   │   ├── pinecone.ts
    │   │   └── prisma.ts
    │   ├── validation
    │   │   └── note.ts
    │   └── openai.ts
    ├── middleware.ts
    └── components
    │   ├── ui
    │       ├── loading-button.tsx
    │       ├── label.tsx
    │       ├── textarea.tsx
    │       ├── input.tsx
    │       ├── button.tsx
    │       ├── card.tsx
    │       ├── dialog.tsx
    │       └── form.tsx
    │   ├── AIChatButton.tsx
    │   ├── ThemeToggleButton.tsx
    │   ├── Note.tsx
    │   ├── AIChatBox.tsx
    │   └── AddEditNoteDialog.tsx
├── postcss.config.js
├── next.config.js
├── components.json
├── .gitignore
├── prisma
    └── schema.prisma
├── public
    ├── vercel.svg
    └── next.svg
├── tsconfig.json
├── README.md
├── package.json
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "prettier"]
3 | }
4 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ["prettier-plugin-tailwindcss"],
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/ThemeProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | export { ThemeProvider } from "next-themes";
4 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codinginflow/nextjs-ai-note-app/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codinginflow/nextjs-ai-note-app/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     remotePatterns: [
 5 |       {
 6 |         hostname: "img.clerk.com",
 7 |       },
 8 |     ],
 9 |   },
10 | };
11 | 
12 | module.exports = nextConfig;
13 | 


--------------------------------------------------------------------------------
/src/app/notes/layout.tsx:
--------------------------------------------------------------------------------
 1 | import NavBar from "./NavBar";
 2 | 
 3 | export default function Layout({ children }: { children: React.ReactNode }) {
 4 |   return (
 5 |     <>
 6 |       <NavBar />
 7 |       <main className="m-auto max-w-7xl p-4">{children}</main>
 8 |     </>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/src/lib/db/pinecone.ts:
--------------------------------------------------------------------------------
 1 | import { Pinecone } from "@pinecone-database/pinecone";
 2 | 
 3 | const apiKey = process.env.PINECONE_API_KEY;
 4 | 
 5 | if (!apiKey) {
 6 |   throw Error("PINECONE_API_KEY is not set");
 7 | }
 8 | 
 9 | const pinecone = new Pinecone({
10 |   environment: "gcp-starter",
11 |   apiKey,
12 | });
13 | 
14 | export const notesIndex = pinecone.Index("nextjs-ai-note-app");
15 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/src/app/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignIn } from "@clerk/nextjs";
 2 | import { Metadata } from "next";
 3 | 
 4 | export const metadata: Metadata = {
 5 |   title: "FlowBrain - Sign In",
 6 | };
 7 | 
 8 | export default function SignInPage() {
 9 |   return (
10 |     <div className="flex h-screen items-center justify-center">
11 |       <SignIn appearance={{ variables: { colorPrimary: "#0F172A" } }} />
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/sign-up/[[...sign-up]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignUp } from "@clerk/nextjs";
 2 | import { Metadata } from "next";
 3 | 
 4 | export const metadata: Metadata = {
 5 |   title: "FlowBrain - Sign Up",
 6 | };
 7 | 
 8 | export default function SignUpPage() {
 9 |   return (
10 |     <div className="flex h-screen items-center justify-center">
11 |       <SignUp appearance={{ variables: { colorPrimary: "#0F172A" } }} />
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lib/validation/note.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const createNoteSchema = z.object({
 4 |   title: z.string().min(1, { message: "Title is required" }),
 5 |   content: z.string().optional(),
 6 | });
 7 | 
 8 | export type CreateNoteSchema = z.infer<typeof createNoteSchema>;
 9 | 
10 | export const updateNoteSchema = createNoteSchema.extend({
11 |   id: z.string().min(1),
12 | });
13 | 
14 | export const deleteNoteSchema = z.object({
15 |   id: z.string().min(1),
16 | });
17 | 


--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { authMiddleware } from "@clerk/nextjs";
 2 | 
 3 | // This example protects all routes including api/trpc routes
 4 | // Please edit this to allow other routes to be public as needed.
 5 | // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 6 | export default authMiddleware({
 7 |   publicRoutes: ["/"],
 8 | });
 9 | 
10 | export const config = {
11 |   matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
12 | };
13 | 


--------------------------------------------------------------------------------
/src/components/ui/loading-button.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader2 } from "lucide-react";
 2 | import { Button, ButtonProps } from "./button";
 3 | 
 4 | type LoadingButtonProps = {
 5 |   loading: boolean;
 6 | } & ButtonProps;
 7 | 
 8 | export default function LoadingButton({
 9 |   children,
10 |   loading,
11 |   ...props
12 | }: LoadingButtonProps) {
13 |   return (
14 |     <Button {...props} disabled={props.disabled || loading}>
15 |       {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
16 |       {children}
17 |     </Button>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/lib/db/prisma.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient();
 5 | };
 6 | 
 7 | type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
 8 | 
 9 | const globalForPrisma = globalThis as unknown as {
10 |   prisma: PrismaClientSingleton | undefined;
11 | };
12 | 
13 | const prisma = globalForPrisma.prisma ?? prismaClientSingleton();
14 | 
15 | export default prisma;
16 | 
17 | if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | .env


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "mongodb"
10 |   url      = env("DATABASE_URL")
11 | }
12 | 
13 | model Note {
14 |   id        String   @id @default(auto()) @map("_id") @db.ObjectId
15 |   title     String
16 |   content   String?
17 |   userId    String
18 |   createdAt DateTime @default(now())
19 |   updatedAt DateTime @updatedAt
20 | 
21 |   @@map("notes")
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/AIChatButton.tsx:
--------------------------------------------------------------------------------
 1 | import { Bot } from "lucide-react";
 2 | import { useState } from "react";
 3 | import AIChatBox from "./AIChatBox";
 4 | import { Button } from "./ui/button";
 5 | 
 6 | export default function AIChatButton() {
 7 |   const [chatBoxOpen, setChatBoxOpen] = useState(false);
 8 | 
 9 |   return (
10 |     <>
11 |       <Button onClick={() => setChatBoxOpen(true)}>
12 |         <Bot size={20} className="mr-2" />
13 |         AI Chat
14 |       </Button>
15 |       <AIChatBox open={chatBoxOpen} onClose={() => setChatBoxOpen(false)} />
16 |     </>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/lib/openai.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | 
 3 | const apiKey = process.env.OPENAI_API_KEY;
 4 | 
 5 | if (!apiKey) {
 6 |   throw Error("OPENAI_API_KEY is not set");
 7 | }
 8 | 
 9 | const openai = new OpenAI({ apiKey });
10 | 
11 | export default openai;
12 | 
13 | export async function getEmbedding(text: string) {
14 |   const response = await openai.embeddings.create({
15 |     model: "text-embedding-ada-002",
16 |     input: text,
17 |   });
18 | 
19 |   const embedding = response.data[0].embedding;
20 | 
21 |   if (!embedding) throw Error("Error generating embedding.");
22 | 
23 |   console.log(embedding);
24 | 
25 |   return embedding;
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Next.js 14 AI Note App
 2 | 
 3 | This is a note-taking app with an integrated **AI chatbot**. By using the **ChatGPT API**, **vector embeddings**, and **Pinecone**, the chatbot knows about all notes stored in your user account and can retrieve relevant information to answer your questions and summarize information.
 4 | 
 5 | **Response streaming** is implemented via the **Vercel AI SDK**.
 6 | 
 7 | The app is built with Next.js 14's app router, TailwindCSS, Shadcn UI, and TypeScript. It has a light/dark theme toggle and a fully mobile-responsive layout.
 8 | 
 9 | Learn how to build this app in my tutorial: https://www.youtube.com/watch?v=mkJbEP5GeRA
10 | 
11 | ![thumbnail](https://github.com/codinginflow/nextjs-ai-note-app/assets/52977034/cefc69f2-a486-4072-bf69-d0738f7336af)
12 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { ClerkProvider } from "@clerk/nextjs";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import { ThemeProvider } from "./ThemeProvider";
 5 | import "./globals.css";
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: "FlowBrain",
11 |   description: "The intelligent note-taking app",
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: {
17 |   children: React.ReactNode;
18 | }) {
19 |   return (
20 |     <ClerkProvider>
21 |       <html lang="en">
22 |         <body className={inter.className}>
23 |           <ThemeProvider attribute="class">{children}</ThemeProvider>
24 |         </body>
25 |       </html>
26 |     </ClerkProvider>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/src/components/ThemeToggleButton.tsx:
--------------------------------------------------------------------------------
 1 | import { Moon, Sun } from "lucide-react";
 2 | import { useTheme } from "next-themes";
 3 | import { Button } from "./ui/button";
 4 | 
 5 | export default function ThemeToggleButton() {
 6 |   const { theme, setTheme } = useTheme();
 7 | 
 8 |   return (
 9 |     <Button
10 |       variant="outline"
11 |       size="icon"
12 |       className="rounded-full"
13 |       onClick={() => {
14 |         if (theme === "dark") {
15 |           setTheme("light");
16 |         } else {
17 |           setTheme("dark");
18 |         }
19 |       }}
20 |     >
21 |       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
22 |       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
23 |       <span className="sr-only">Toggle theme</span>
24 |     </Button>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/notes/page.tsx:
--------------------------------------------------------------------------------
 1 | import Note from "@/components/Note";
 2 | import prisma from "@/lib/db/prisma";
 3 | import { auth } from "@clerk/nextjs";
 4 | import { Metadata } from "next";
 5 | 
 6 | export const metadata: Metadata = {
 7 |   title: "FlowBrain - Notes",
 8 | };
 9 | 
10 | export default async function NotesPage() {
11 |   const { userId } = auth();
12 | 
13 |   if (!userId) throw Error("userId undefined");
14 | 
15 |   const allNotes = await prisma.note.findMany({ where: { userId } });
16 | 
17 |   return (
18 |     <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
19 |       {allNotes.map((note) => (
20 |         <Note note={note} key={note.id} />
21 |       ))}
22 |       {allNotes.length === 0 && (
23 |         <div className="col-span-full text-center">
24 |           {"You don't have any notes yet. Why don't you create one?"}
25 |         </div>
26 |       )}
27 |     </div>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import logo from "@/assets/logo.png";
 2 | import { Button } from "@/components/ui/button";
 3 | import { auth } from "@clerk/nextjs";
 4 | import Image from "next/image";
 5 | import Link from "next/link";
 6 | import { redirect } from "next/navigation";
 7 | 
 8 | export default function Home() {
 9 |   const { userId } = auth();
10 | 
11 |   if (userId) redirect("/notes");
12 | 
13 |   return (
14 |     <main className="flex h-screen flex-col items-center justify-center gap-5">
15 |       <div className="flex items-center gap-4">
16 |         <Image src={logo} alt="FlowBrain logo" width={100} height={100} />
17 |         <span className="text-4xl font-extrabold tracking-tight lg:text-5xl">
18 |           FlowBrain
19 |         </span>
20 |       </div>
21 |       <p className="max-w-prose text-center">
22 |         An intelligent note-taking app with AI integration, built with OpenAI,
23 |         Pinecone, Next.js, Shadcn UI, Clerk, and more.
24 |       </p>
25 |       <Button size="lg" asChild>
26 |         <Link href="/notes">Open</Link>
27 |       </Button>
28 |     </main>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/components/Note.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Note as NoteModel } from "@prisma/client";
 4 | import { useState } from "react";
 5 | import AddEditNoteDialog from "./AddEditNoteDialog";
 6 | import {
 7 |   Card,
 8 |   CardContent,
 9 |   CardDescription,
10 |   CardHeader,
11 |   CardTitle,
12 | } from "./ui/card";
13 | 
14 | interface NoteProps {
15 |   note: NoteModel;
16 | }
17 | 
18 | export default function Note({ note }: NoteProps) {
19 |   const [showEditDialog, setShowEditDialog] = useState(false);
20 | 
21 |   const wasUpdated = note.updatedAt > note.createdAt;
22 | 
23 |   const createdUpdatedAtTimestamp = (
24 |     wasUpdated ? note.updatedAt : note.createdAt
25 |   ).toDateString();
26 | 
27 |   return (
28 |     <>
29 |       <Card
30 |         className="cursor-pointer transition-shadow hover:shadow-lg"
31 |         onClick={() => setShowEditDialog(true)}
32 |       >
33 |         <CardHeader>
34 |           <CardTitle>{note.title}</CardTitle>
35 |           <CardDescription>
36 |             {createdUpdatedAtTimestamp}
37 |             {wasUpdated && " (updated)"}
38 |           </CardDescription>
39 |         </CardHeader>
40 |         <CardContent>
41 |           <p className="whitespace-pre-line">{note.content}</p>
42 |         </CardContent>
43 |       </Card>
44 |       <AddEditNoteDialog
45 |         open={showEditDialog}
46 |         setOpen={setShowEditDialog}
47 |         noteToEdit={note}
48 |       />
49 |     </>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-ai-note-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@clerk/nextjs": "^4.26.1",
13 |     "@clerk/themes": "^1.7.9",
14 |     "@hookform/resolvers": "^3.3.2",
15 |     "@pinecone-database/pinecone": "^1.1.2",
16 |     "@prisma/client": "^5.5.2",
17 |     "@radix-ui/react-dialog": "^1.0.5",
18 |     "@radix-ui/react-label": "^2.0.2",
19 |     "@radix-ui/react-slot": "^1.0.2",
20 |     "ai": "^2.2.20",
21 |     "class-variance-authority": "^0.7.0",
22 |     "clsx": "^2.0.0",
23 |     "eslint-config-prettier": "^9.0.0",
24 |     "lucide-react": "^0.290.0",
25 |     "next": "14.0.0",
26 |     "next-themes": "^0.2.1",
27 |     "openai": "^4.14.1",
28 |     "prettier": "^3.0.3",
29 |     "prettier-plugin-tailwindcss": "^0.5.6",
30 |     "prisma": "^5.5.2",
31 |     "react": "^18",
32 |     "react-dom": "^18",
33 |     "react-hook-form": "^7.47.0",
34 |     "tailwind-merge": "^1.14.0",
35 |     "tailwindcss-animate": "^1.0.7",
36 |     "zod": "^3.22.4"
37 |   },
38 |   "devDependencies": {
39 |     "@types/node": "^20",
40 |     "@types/react": "^18",
41 |     "@types/react-dom": "^18",
42 |     "autoprefixer": "^10",
43 |     "eslint": "^8",
44 |     "eslint-config-next": "14.0.0",
45 |     "postcss": "^8",
46 |     "tailwindcss": "^3",
47 |     "typescript": "^5"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 |  
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 |  
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 |  
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 |  
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 |  
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 |  
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 |  
35 |     --radius: 0.5rem;
36 |   }
37 |  
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 |  
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 |  
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 |  
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 |  
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 |  
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 |  
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 |  
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 |  
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 |  
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }


--------------------------------------------------------------------------------
/src/app/notes/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import logo from "@/assets/logo.png";
 4 | import AIChatButton from "@/components/AIChatButton";
 5 | import AddEditNoteDialog from "@/components/AddEditNoteDialog";
 6 | import ThemeToggleButton from "@/components/ThemeToggleButton";
 7 | import { Button } from "@/components/ui/button";
 8 | import { UserButton } from "@clerk/nextjs";
 9 | import { dark } from "@clerk/themes";
10 | import { Plus } from "lucide-react";
11 | import { useTheme } from "next-themes";
12 | import Image from "next/image";
13 | import Link from "next/link";
14 | import { useState } from "react";
15 | 
16 | export default function NavBar() {
17 |   const { theme } = useTheme();
18 | 
19 |   const [showAddEditNoteDialog, setShowAddEditNoteDialog] = useState(false);
20 | 
21 |   return (
22 |     <>
23 |       <div className="p-4 shadow">
24 |         <div className="m-auto flex max-w-7xl flex-wrap items-center justify-between gap-3">
25 |           <Link href="/notes" className="flex items-center gap-1">
26 |             <Image src={logo} alt="FlowBrain logo" width={40} height={40} />
27 |             <span className="font-bold">FlowBrain</span>
28 |           </Link>
29 |           <div className="flex items-center gap-2">
30 |             <UserButton
31 |               afterSignOutUrl="/"
32 |               appearance={{
33 |                 baseTheme: theme === "dark" ? dark : undefined,
34 |                 elements: { avatarBox: { width: "2.5rem", height: "2.5rem" } },
35 |               }}
36 |             />
37 |             <ThemeToggleButton />
38 |             <Button onClick={() => setShowAddEditNoteDialog(true)}>
39 |               <Plus size={20} className="mr-2" />
40 |               Add Note
41 |             </Button>
42 |             <AIChatButton />
43 |           </div>
44 |         </div>
45 |       </div>
46 |       <AddEditNoteDialog
47 |         open={showAddEditNoteDialog}
48 |         setOpen={setShowAddEditNoteDialog}
49 |       />
50 |     </>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/src/app/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { notesIndex } from "@/lib/db/pinecone";
 2 | import prisma from "@/lib/db/prisma";
 3 | import openai, { getEmbedding } from "@/lib/openai";
 4 | import { auth } from "@clerk/nextjs";
 5 | import { OpenAIStream, StreamingTextResponse } from "ai";
 6 | import { ChatCompletionMessage } from "openai/resources/index.mjs";
 7 | 
 8 | export async function POST(req: Request) {
 9 |   try {
10 |     const body = await req.json();
11 |     const messages: ChatCompletionMessage[] = body.messages;
12 | 
13 |     const messagesTruncated = messages.slice(-6);
14 | 
15 |     const embedding = await getEmbedding(
16 |       messagesTruncated.map((message) => message.content).join("\n"),
17 |     );
18 | 
19 |     const { userId } = auth();
20 | 
21 |     const vectorQueryResponse = await notesIndex.query({
22 |       vector: embedding,
23 |       topK: 4,
24 |       filter: { userId },
25 |     });
26 | 
27 |     const relevantNotes = await prisma.note.findMany({
28 |       where: {
29 |         id: {
30 |           in: vectorQueryResponse.matches.map((match) => match.id),
31 |         },
32 |       },
33 |     });
34 | 
35 |     console.log("Relevant notes found: ", relevantNotes);
36 | 
37 |     const systemMessage: ChatCompletionMessage = {
38 |       role: "system",
39 |       content:
40 |         "You are an intelligent note-taking app. You answer the user's question based on their existing notes. " +
41 |         "The relevant notes for this query are:\n" +
42 |         relevantNotes
43 |           .map((note) => `Title: ${note.title}\n\nContent:\n${note.content}`)
44 |           .join("\n\n"),
45 |     };
46 | 
47 |     const response = await openai.chat.completions.create({
48 |       model: "gpt-3.5-turbo",
49 |       stream: true,
50 |       messages: [systemMessage, ...messagesTruncated],
51 |     });
52 | 
53 |     const stream = OpenAIStream(response);
54 |     return new StreamingTextResponse(stream);
55 |   } catch (error) {
56 |     console.error(error);
57 |     return Response.json({ error: "Internal server error" }, { status: 500 });
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }


--------------------------------------------------------------------------------
/src/components/AIChatBox.tsx:
--------------------------------------------------------------------------------
  1 | import { cn } from "@/lib/utils";
  2 | import { useUser } from "@clerk/nextjs";
  3 | import { Message } from "ai";
  4 | import { useChat } from "ai/react";
  5 | import { Bot, Trash, XCircle } from "lucide-react";
  6 | import Image from "next/image";
  7 | import { useEffect, useRef } from "react";
  8 | import { Button } from "./ui/button";
  9 | import { Input } from "./ui/input";
 10 | 
 11 | interface AIChatBoxProps {
 12 |   open: boolean;
 13 |   onClose: () => void;
 14 | }
 15 | 
 16 | export default function AIChatBox({ open, onClose }: AIChatBoxProps) {
 17 |   const {
 18 |     messages,
 19 |     input,
 20 |     handleInputChange,
 21 |     handleSubmit,
 22 |     setMessages,
 23 |     isLoading,
 24 |     error,
 25 |   } = useChat();
 26 | 
 27 |   const inputRef = useRef<HTMLInputElement>(null);
 28 |   const scrollRef = useRef<HTMLDivElement>(null);
 29 | 
 30 |   useEffect(() => {
 31 |     if (scrollRef.current) {
 32 |       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
 33 |     }
 34 |   }, [messages]);
 35 | 
 36 |   useEffect(() => {
 37 |     if (open) {
 38 |       inputRef.current?.focus();
 39 |     }
 40 |   }, [open]);
 41 | 
 42 |   const lastMessageIsUser = messages[messages.length - 1]?.role === "user";
 43 | 
 44 |   return (
 45 |     <div
 46 |       className={cn(
 47 |         "bottom-0 right-0 z-10 w-full max-w-[500px] p-1 xl:right-36",
 48 |         open ? "fixed" : "hidden",
 49 |       )}
 50 |     >
 51 |       <button onClick={onClose} className="mb-1 ms-auto block">
 52 |         <XCircle size={30} />
 53 |       </button>
 54 |       <div className="flex h-[600px] flex-col rounded border bg-background shadow-xl">
 55 |         <div className="mt-3 h-full overflow-y-auto px-3" ref={scrollRef}>
 56 |           {messages.map((message) => (
 57 |             <ChatMessage message={message} key={message.id} />
 58 |           ))}
 59 |           {isLoading && lastMessageIsUser && (
 60 |             <ChatMessage
 61 |               message={{
 62 |                 role: "assistant",
 63 |                 content: "Thinking...",
 64 |               }}
 65 |             />
 66 |           )}
 67 |           {error && (
 68 |             <ChatMessage
 69 |               message={{
 70 |                 role: "assistant",
 71 |                 content: "Something went wrong. Please try again.",
 72 |               }}
 73 |             />
 74 |           )}
 75 |           {!error && messages.length === 0 && (
 76 |             <div className="flex h-full items-center justify-center gap-3">
 77 |               <Bot />
 78 |               Ask the AI a question about your notes
 79 |             </div>
 80 |           )}
 81 |         </div>
 82 |         <form onSubmit={handleSubmit} className="m-3 flex gap-1">
 83 |           <Button
 84 |             title="Clear chat"
 85 |             variant="outline"
 86 |             size="icon"
 87 |             className="shrink-0"
 88 |             type="button"
 89 |             onClick={() => setMessages([])}
 90 |           >
 91 |             <Trash />
 92 |           </Button>
 93 |           <Input
 94 |             value={input}
 95 |             onChange={handleInputChange}
 96 |             placeholder="Say something..."
 97 |             ref={inputRef}
 98 |           />
 99 |           <Button type="submit">Send</Button>
100 |         </form>
101 |       </div>
102 |     </div>
103 |   );
104 | }
105 | 
106 | function ChatMessage({
107 |   message: { role, content },
108 | }: {
109 |   message: Pick<Message, "role" | "content">;
110 | }) {
111 |   const { user } = useUser();
112 | 
113 |   const isAiMessage = role === "assistant";
114 | 
115 |   return (
116 |     <div
117 |       className={cn(
118 |         "mb-3 flex items-center",
119 |         isAiMessage ? "me-5 justify-start" : "ms-5 justify-end",
120 |       )}
121 |     >
122 |       {isAiMessage && <Bot className="mr-2 shrink-0" />}
123 |       <p
124 |         className={cn(
125 |           "whitespace-pre-line rounded-md border px-3 py-2",
126 |           isAiMessage ? "bg-background" : "bg-primary text-primary-foreground",
127 |         )}
128 |       >
129 |         {content}
130 |       </p>
131 |       {!isAiMessage && user?.imageUrl && (
132 |         <Image
133 |           src={user.imageUrl}
134 |           alt="User image"
135 |           width={100}
136 |           height={100}
137 |           className="ml-2 h-10 w-10 rounded-full object-cover"
138 |         />
139 |       )}
140 |     </div>
141 |   );
142 | }
143 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/app/api/notes/route.ts:
--------------------------------------------------------------------------------
  1 | import { notesIndex } from "@/lib/db/pinecone";
  2 | import prisma from "@/lib/db/prisma";
  3 | import { getEmbedding } from "@/lib/openai";
  4 | import {
  5 |   createNoteSchema,
  6 |   deleteNoteSchema,
  7 |   updateNoteSchema,
  8 | } from "@/lib/validation/note";
  9 | import { auth } from "@clerk/nextjs";
 10 | 
 11 | export async function POST(req: Request) {
 12 |   try {
 13 |     const body = await req.json();
 14 | 
 15 |     const parseResult = createNoteSchema.safeParse(body);
 16 | 
 17 |     if (!parseResult.success) {
 18 |       console.error(parseResult.error);
 19 |       return Response.json({ error: "Invalid input" }, { status: 400 });
 20 |     }
 21 | 
 22 |     const { title, content } = parseResult.data;
 23 | 
 24 |     const { userId } = auth();
 25 | 
 26 |     if (!userId) {
 27 |       return Response.json({ error: "Unauthorized" }, { status: 401 });
 28 |     }
 29 | 
 30 |     const embedding = await getEmbeddingForNote(title, content);
 31 | 
 32 |     const note = await prisma.$transaction(async (tx) => {
 33 |       const note = await tx.note.create({
 34 |         data: {
 35 |           title,
 36 |           content,
 37 |           userId,
 38 |         },
 39 |       });
 40 | 
 41 |       await notesIndex.upsert([
 42 |         {
 43 |           id: note.id,
 44 |           values: embedding,
 45 |           metadata: { userId },
 46 |         },
 47 |       ]);
 48 | 
 49 |       return note;
 50 |     });
 51 | 
 52 |     return Response.json({ note }, { status: 201 });
 53 |   } catch (error) {
 54 |     console.error(error);
 55 |     return Response.json({ error: "Internal server error" }, { status: 500 });
 56 |   }
 57 | }
 58 | 
 59 | export async function PUT(req: Request) {
 60 |   try {
 61 |     const body = await req.json();
 62 | 
 63 |     const parseResult = updateNoteSchema.safeParse(body);
 64 | 
 65 |     if (!parseResult.success) {
 66 |       console.error(parseResult.error);
 67 |       return Response.json({ error: "Invalid input" }, { status: 400 });
 68 |     }
 69 | 
 70 |     const { id, title, content } = parseResult.data;
 71 | 
 72 |     const note = await prisma.note.findUnique({ where: { id } });
 73 | 
 74 |     if (!note) {
 75 |       return Response.json({ error: "Note not found" }, { status: 404 });
 76 |     }
 77 | 
 78 |     const { userId } = auth();
 79 | 
 80 |     if (!userId || userId !== note.userId) {
 81 |       return Response.json({ error: "Unauthorized" }, { status: 401 });
 82 |     }
 83 | 
 84 |     const embedding = await getEmbeddingForNote(title, content);
 85 | 
 86 |     const updatedNote = await prisma.$transaction(async (tx) => {
 87 |       const updatedNote = await tx.note.update({
 88 |         where: { id },
 89 |         data: {
 90 |           title,
 91 |           content,
 92 |         },
 93 |       });
 94 | 
 95 |       await notesIndex.upsert([
 96 |         {
 97 |           id,
 98 |           values: embedding,
 99 |           metadata: { userId },
100 |         },
101 |       ]);
102 | 
103 |       return updatedNote;
104 |     });
105 | 
106 |     return Response.json({ updatedNote }, { status: 200 });
107 |   } catch (error) {
108 |     console.error(error);
109 |     return Response.json({ error: "Internal server error" }, { status: 500 });
110 |   }
111 | }
112 | 
113 | export async function DELETE(req: Request) {
114 |   try {
115 |     const body = await req.json();
116 | 
117 |     const parseResult = deleteNoteSchema.safeParse(body);
118 | 
119 |     if (!parseResult.success) {
120 |       console.error(parseResult.error);
121 |       return Response.json({ error: "Invalid input" }, { status: 400 });
122 |     }
123 | 
124 |     const { id } = parseResult.data;
125 | 
126 |     const note = await prisma.note.findUnique({ where: { id } });
127 | 
128 |     if (!note) {
129 |       return Response.json({ error: "Note not found" }, { status: 404 });
130 |     }
131 | 
132 |     const { userId } = auth();
133 | 
134 |     if (!userId || userId !== note.userId) {
135 |       return Response.json({ error: "Unauthorized" }, { status: 401 });
136 |     }
137 | 
138 |     await prisma.$transaction(async (tx) => {
139 |       await tx.note.delete({ where: { id } });
140 |       await notesIndex.deleteOne(id);
141 |     });
142 | 
143 |     return Response.json({ message: "Note deleted" }, { status: 200 });
144 |   } catch (error) {
145 |     console.error(error);
146 |     return Response.json({ error: "Internal server error" }, { status: 500 });
147 |   }
148 | }
149 | 
150 | async function getEmbeddingForNote(title: string, content: string | undefined) {
151 |   return getEmbedding(title + "\n\n" + content ?? "");
152 | }
153 | 


--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/src/components/AddEditNoteDialog.tsx:
--------------------------------------------------------------------------------
  1 | import { CreateNoteSchema, createNoteSchema } from "@/lib/validation/note";
  2 | import { zodResolver } from "@hookform/resolvers/zod";
  3 | import { Note } from "@prisma/client";
  4 | import { useRouter } from "next/navigation";
  5 | import { useState } from "react";
  6 | import { useForm } from "react-hook-form";
  7 | import {
  8 |   Dialog,
  9 |   DialogContent,
 10 |   DialogFooter,
 11 |   DialogHeader,
 12 |   DialogTitle,
 13 | } from "./ui/dialog";
 14 | import {
 15 |   Form,
 16 |   FormControl,
 17 |   FormField,
 18 |   FormItem,
 19 |   FormLabel,
 20 |   FormMessage,
 21 | } from "./ui/form";
 22 | import { Input } from "./ui/input";
 23 | import LoadingButton from "./ui/loading-button";
 24 | import { Textarea } from "./ui/textarea";
 25 | 
 26 | interface AddEditNoteDialogProps {
 27 |   open: boolean;
 28 |   setOpen: (open: boolean) => void;
 29 |   noteToEdit?: Note;
 30 | }
 31 | 
 32 | export default function AddEditNoteDialog({
 33 |   open,
 34 |   setOpen,
 35 |   noteToEdit,
 36 | }: AddEditNoteDialogProps) {
 37 |   const [deleteInProgress, setDeleteInProgress] = useState(false);
 38 | 
 39 |   const router = useRouter();
 40 | 
 41 |   const form = useForm<CreateNoteSchema>({
 42 |     resolver: zodResolver(createNoteSchema),
 43 |     defaultValues: {
 44 |       title: noteToEdit?.title || "",
 45 |       content: noteToEdit?.content || "",
 46 |     },
 47 |   });
 48 | 
 49 |   async function onSubmit(input: CreateNoteSchema) {
 50 |     try {
 51 |       if (noteToEdit) {
 52 |         const response = await fetch("/api/notes", {
 53 |           method: "PUT",
 54 |           body: JSON.stringify({
 55 |             id: noteToEdit.id,
 56 |             ...input,
 57 |           }),
 58 |         });
 59 |         if (!response.ok) throw Error("Status code: " + response.status);
 60 |       } else {
 61 |         const response = await fetch("/api/notes", {
 62 |           method: "POST",
 63 |           body: JSON.stringify(input),
 64 |         });
 65 |         if (!response.ok) throw Error("Status code: " + response.status);
 66 |         form.reset();
 67 |       }
 68 |       router.refresh();
 69 |       setOpen(false);
 70 |     } catch (error) {
 71 |       console.error(error);
 72 |       alert("Something went wrong. Please try again.");
 73 |     }
 74 |   }
 75 | 
 76 |   async function deleteNote() {
 77 |     if (!noteToEdit) return;
 78 |     setDeleteInProgress(true);
 79 |     try {
 80 |       const response = await fetch("/api/notes", {
 81 |         method: "DELETE",
 82 |         body: JSON.stringify({
 83 |           id: noteToEdit.id,
 84 |         }),
 85 |       });
 86 |       if (!response.ok) throw Error("Status code: " + response.status);
 87 |       router.refresh();
 88 |       setOpen(false);
 89 |     } catch (error) {
 90 |       console.error(error);
 91 |       alert("Something went wrong. Please try again.");
 92 |     } finally {
 93 |       setDeleteInProgress(false);
 94 |     }
 95 |   }
 96 | 
 97 |   return (
 98 |     <Dialog open={open} onOpenChange={setOpen}>
 99 |       <DialogContent>
100 |         <DialogHeader>
101 |           <DialogTitle>{noteToEdit ? "Edit Note" : "Add Note"}</DialogTitle>
102 |         </DialogHeader>
103 |         <Form {...form}>
104 |           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
105 |             <FormField
106 |               control={form.control}
107 |               name="title"
108 |               render={({ field }) => (
109 |                 <FormItem>
110 |                   <FormLabel>Note title</FormLabel>
111 |                   <FormControl>
112 |                     <Input placeholder="Note title" {...field} />
113 |                   </FormControl>
114 |                   <FormMessage />
115 |                 </FormItem>
116 |               )}
117 |             />
118 |             <FormField
119 |               control={form.control}
120 |               name="content"
121 |               render={({ field }) => (
122 |                 <FormItem>
123 |                   <FormLabel>Note content</FormLabel>
124 |                   <FormControl>
125 |                     <Textarea placeholder="Note content" {...field} />
126 |                   </FormControl>
127 |                   <FormMessage />
128 |                 </FormItem>
129 |               )}
130 |             />
131 |             <DialogFooter className="gap-1 sm:gap-0">
132 |               {noteToEdit && (
133 |                 <LoadingButton
134 |                   variant="destructive"
135 |                   loading={deleteInProgress}
136 |                   disabled={form.formState.isSubmitting}
137 |                   onClick={deleteNote}
138 |                   type="button"
139 |                 >
140 |                   Delete note
141 |                 </LoadingButton>
142 |               )}
143 |               <LoadingButton
144 |                 type="submit"
145 |                 loading={form.formState.isSubmitting}
146 |                 disabled={deleteInProgress}
147 |               >
148 |                 Submit
149 |               </LoadingButton>
150 |             </DialogFooter>
151 |           </form>
152 |         </Form>
153 |       </DialogContent>
154 |     </Dialog>
155 |   );
156 | }
157 | 


--------------------------------------------------------------------------------