) => {
e.preventDefault();
if (input === "") {
window.alert("Please enter a name for your notebook");
return;
}
createNotebook.mutate(undefined, {
onSuccess: ({ note_id }) => {
console.log("created new note:", { note_id });
// hit another endpoint to uplod the temp dalle url to permanent firebase url
uploadToFirebase.mutate(note_id);
router.push(`/notebook/${note_id}`);
},
onError: (error) => {
console.error(error);
window.alert("Failed to create new notebook");
},
});
};
return (
);
};
export default CreateNoteDialog;
================================================
FILE: src/components/DeleteButton.tsx
================================================
"use client";
import React from "react";
import { Button } from "./ui/button";
import { Trash } from "lucide-react";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useRouter } from "next/navigation";
type Props = {
noteId: number;
};
const DeleteButton = ({ noteId }: Props) => {
const router = useRouter();
const deleteNote = useMutation({
mutationFn: async () => {
const response = await axios.post("/api/deleteNote", {
noteId,
});
return response.data;
},
});
return (
);
};
export default DeleteButton;
================================================
FILE: src/components/Provider.tsx
================================================
"use client";
import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
type Props = {
children: React.ReactNode;
};
const queryClient = new QueryClient();
const Provider = ({ children }: Props) => {
return (
{children}
);
};
export default Provider;
================================================
FILE: src/components/TipTapEditor.tsx
================================================
"use client";
import React from "react";
import { EditorContent, useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import TipTapMenuBar from "./TipTapMenuBar";
import { Button } from "./ui/button";
import { useDebounce } from "@/lib/useDebounce";
import { useMutation } from "@tanstack/react-query";
import Text from "@tiptap/extension-text";
import axios from "axios";
import { NoteType } from "@/lib/db/schema";
import { useCompletion } from "ai/react";
type Props = { note: NoteType };
const TipTapEditor = ({ note }: Props) => {
const [editorState, setEditorState] = React.useState(
note.editorState || `${note.name}
`
);
const { complete, completion } = useCompletion({
api: "/api/completion",
});
const saveNote = useMutation({
mutationFn: async () => {
const response = await axios.post("/api/saveNote", {
noteId: note.id,
editorState,
});
return response.data;
},
});
const customText = Text.extend({
addKeyboardShortcuts() {
return {
"Shift-a": () => {
// take the last 30 words
const prompt = this.editor.getText().split(" ").slice(-30).join(" ");
complete(prompt);
return true;
},
};
},
});
const editor = useEditor({
autofocus: true,
extensions: [StarterKit, customText],
content: editorState,
onUpdate: ({ editor }) => {
setEditorState(editor.getHTML());
},
});
const lastCompletion = React.useRef("");
React.useEffect(() => {
if (!completion || !editor) return;
const diff = completion.slice(lastCompletion.current.length);
lastCompletion.current = completion;
editor.commands.insertContent(diff);
}, [completion, editor]);
const debouncedEditorState = useDebounce(editorState, 500);
React.useEffect(() => {
// save to db
if (debouncedEditorState === "") return;
saveNote.mutate(undefined, {
onSuccess: (data) => {
console.log("success update!", data);
},
onError: (err) => {
console.error(err);
},
});
}, [debouncedEditorState]);
return (
<>
{editor && }
Tip: Press{" "}
Shift + A
{" "}
for AI autocomplete
);
};
export default TipTapEditor;
================================================
FILE: src/components/TipTapMenuBar.tsx
================================================
import { Editor } from "@tiptap/react";
import {
Bold,
Code,
CodepenIcon,
Heading1,
Heading2,
Heading3,
Heading4,
Heading5,
Heading6,
Italic,
List,
ListOrdered,
Quote,
Redo,
Strikethrough,
Undo,
} from "lucide-react";
const TipTapMenuBar = ({ editor }: { editor: Editor }) => {
return (
);
};
export default TipTapMenuBar;
================================================
FILE: src/components/ui/TypewriterTitle.tsx
================================================
"use client";
import React from "react";
import Typewriter from "typewriter-effect";
type Props = {};
const TypewriterTitle = (props: Props) => {
return (
{
typewriter
.typeString("🚀 Supercharged Productivity.")
.pauseFor(1000)
.deleteAll()
.typeString("🤖 AI-Powered Insights.")
.start();
}}
/>
);
};
export default TypewriterTitle;
================================================
FILE: src/components/ui/button.tsx
================================================
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center 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",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes,
VariantProps {
asChild?: boolean
}
const Button = React.forwardRef(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
================================================
FILE: src/components/ui/dialog.tsx
================================================
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = ({
className,
...props
}: DialogPrimitive.DialogPortalProps) => (
)
DialogPortal.displayName = DialogPrimitive.Portal.displayName
const DialogOverlay = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
{children}
Close
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes) => (
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes) => (
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}
================================================
FILE: src/components/ui/input.tsx
================================================
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes {}
const Input = React.forwardRef(
({ className, type, ...props }, ref) => {
return (
)
}
)
Input.displayName = "Input"
export { Input }
================================================
FILE: src/components/ui/separator.tsx
================================================
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
const Separator = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }
================================================
FILE: src/lib/clerk-server.ts
================================================
import { Clerk } from "@clerk/backend";
export const clerk = Clerk({
apiKey: process.env.CLERK_SECRET_KEY,
});
================================================
FILE: src/lib/db/index.ts
================================================
import { neon, neonConfig } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";
neonConfig.fetchConnectionCache = true;
if (!process.env.DATABASE_URL) {
throw new Error("DATABASE_URL is not defined");
}
const sql = neon(process.env.DATABASE_URL);
export const db = drizzle(sql);
================================================
FILE: src/lib/db/schema.ts
================================================
import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
export const $notes = pgTable("notes", {
id: serial("id").primaryKey(),
name: text("name").notNull(),
createdAt: timestamp("created_at").notNull().defaultNow(),
imageUrl: text("imageUrl"),
userId: text("user_id").notNull(),
editorState: text("editor_state"),
});
export type NoteType = typeof $notes.$inferInsert;
// drizzle-orm
// drizzle-kit
================================================
FILE: src/lib/firebase.ts
================================================
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: "aideation-yt.firebaseapp.com",
projectId: "aideation-yt",
storageBucket: "aideation-yt.appspot.com",
messagingSenderId: "962348384448",
appId: "1:962348384448:web:e02758407aba3258d5ad25",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);
export async function uploadFileToFirebase(image_url: string, name: string) {
try {
const response = await fetch(image_url);
const buffer = await response.arrayBuffer();
const file_name = name.replace(" ", "") + Date.now + ".jpeg";
const storageRef = ref(storage, file_name);
await uploadBytes(storageRef, buffer, {
contentType: "image/jpeg",
});
const firebase_url = await getDownloadURL(storageRef);
return firebase_url;
} catch (error) {
console.error(error);
}
}
================================================
FILE: src/lib/openai.ts
================================================
import { Configuration, OpenAIApi } from "openai-edge";
const config = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);
export async function generateImagePrompt(name: string) {
try {
const response = await openai.createChatCompletion({
model: "gpt-3.5-turbo",
messages: [
{
role: "system",
content:
"You are an creative and helpful AI assistance capable of generating interesting thumbnail descriptions for my notes. Your output will be fed into the DALLE API to generate a thumbnail. The description should be minimalistic and flat styled",
},
{
role: "user",
content: `Please generate a thumbnail description for my notebook titles ${name}`,
},
],
});
const data = await response.json();
const image_description = data.choices[0].message.content;
return image_description as string;
} catch (error) {
console.log(error);
throw error;
}
}
export async function generateImage(image_description: string) {
try {
const response = await openai.createImage({
prompt: image_description,
n: 1,
size: "256x256",
});
const data = await response.json();
const image_url = data.data[0].url;
return image_url as string;
} catch (error) {
console.error(error);
}
}
================================================
FILE: src/lib/useDebounce.ts
================================================
import React from "react";
export function useDebounce(value: string, delay: number) {
const [debouncedValue, setDebouncedValue] = React.useState(value);
React.useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
================================================
FILE: src/lib/utils.ts
================================================
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
================================================
FILE: src/middleware.ts
================================================
import { authMiddleware } from "@clerk/nextjs";
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
export default authMiddleware({
publicRoutes: ["/"],
});
export const config = {
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
================================================
FILE: tailwind.config.ts
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
};
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}