6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/.github/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": ["config:recommended", ":disableDependencyDashboard"],
4 | "packageRules": [
5 | {
6 | "matchUpdateTypes": ["minor"],
7 | "automerge": true,
8 | "automergeType": "pr"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "drizzle-kit";
2 | export default defineConfig({
3 | dbCredentials: {
4 | url: process.env.DATABASE_URL!,
5 | },
6 | dialect: "postgresql",
7 | out: "./lib/drizzle/migrations",
8 | schema: "./lib/drizzle/schema.ts",
9 | strict: true,
10 | verbose: true,
11 | });
12 |
--------------------------------------------------------------------------------
/app/auth/login/page.tsx:
--------------------------------------------------------------------------------
1 | import { LoginForm } from "~/components/auth/login-form";
2 | import { Metadata } from "next";
3 |
4 | export const metadata: Metadata = {
5 | title: "ChatBot-Login ",
6 | description: "Login page for the AI ChatBot",
7 | };
8 | export default async function Page() {
9 | return
8 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/app/api/chats/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from "~/app/auth";
2 | import { getChats } from "~/lib/server";
3 | import { NextResponse } from "next/server";
4 |
5 | export async function GET() {
6 | const session = await auth();
7 | const id = session?.user?.id;
8 | const chats = await getChats(id);
9 | return NextResponse.json(chats, { status: 200 });
10 | }
--------------------------------------------------------------------------------
/app/robot.ts:
--------------------------------------------------------------------------------
1 | import { MetadataRoute } from "next";
2 |
3 | export default function robot(): MetadataRoute.Robots {
4 | return {
5 | rules: {
6 | userAgent: "*",
7 | allow: ["/", "/history", "/auth/login"],
8 | disallow: ["/chat","/api"],
9 | },
10 | sitemap: `${process.env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`,
11 | };
12 | }
13 |
--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "~/lib/utils";
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes
7 |
8 |
10 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/components/ai/user-message.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { IconUser } from "~/components/ui/icons";
3 |
4 | export function UserMessage({ children }: { children: React.ReactNode }) {
5 | return (
6 |
7 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/lib/types/index.ts:
--------------------------------------------------------------------------------
1 | import { ChatRequestOptions } from "ai";
2 | import { Chat } from "../drizzle";
3 |
4 | type Status = "success" | "error";
5 |
6 | export type AuthStatus = {
7 | status: Status;
8 | message: string;
9 | };
10 | export type GroupedChats = {
11 | today: Chat[];
12 | yesterday: Chat[];
13 | lastWeek: Chat[];
14 | lastMonth: Chat[];
15 | older: Chat[];
16 | };
17 |
18 | export type RegenerateFunc = ({
19 | messageId,
20 | ...options
21 | }?: {
22 | messageId?: string | undefined;
23 | } & ChatRequestOptions) => Promise
8 |
10 |
11 | {children}
12 |
13 |
8 |
9 |
11 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/lib/hooks/use-local-storage.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | function useLocalStorage
16 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "~/*": ["./*"]
22 | },
23 | "target": "ES2018"
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/components/ai/message.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { FileText } from "lucide-react";
3 | import { UIMessage } from "ai";
4 |
5 | interface MessageProps {
6 | message: UIMessage;
7 | attachment?: File;
8 | text?: string;
9 | }
10 | export default function MessageText({ attachment, text }: MessageProps) {
11 | return (
12 |
13 | {attachment && (
14 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/lib/data.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NextJsIcon,
3 | PrismaIcon,
4 | ReactIcon,
5 | NodejsIcon,
6 | DrizzleORM,
7 | } from "~/components/ui/icons";
8 | import React from "react";
9 |
10 | const exampleMessages: Array<{ heading: string; icon: React.ReactNode }> = [
11 | {
12 | heading: "Create a basic HTTP server using Node.js",
13 | icon:
15 |
18 | )}
19 | {attachment.name}
17 |
20 | {text}
21 |
22 |
21 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/components/auth/alert.tsx:
--------------------------------------------------------------------------------
1 | import { AuthStatus } from "~/lib/types";
2 | import { Alert, AlertDescription } from "~/components/ui/alert";
3 | import { CheckCheck, ShieldAlert, TriangleAlert } from "lucide-react";
4 |
5 | export default function AlertMessage(status: AuthStatus) {
6 | return (
7 |
22 | {spinner}
23 |
24 |
22 |
23 | {text}
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "~/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef
14 |
15 |
16 |
17 |
22 |
23 |
24 |
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/components/chat/auto-scoller.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, forwardRef } from "react";
2 |
3 | interface AutoScrollerProps {
4 | children: React.ReactNode;
5 | className?: string;
6 | }
7 |
8 | const AutoScroller = forwardRef
18 |
20 | Welcome back,
21 |
25 |
27 |
34 | {children}
35 |
36 | );
37 | }
38 | );
39 |
40 | AutoScroller.displayName = "AutoScroller";
41 | export { AutoScroller };
42 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 elisa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/components/search.tsx:
--------------------------------------------------------------------------------
1 | import { Search } from "lucide-react";
2 | import { Input } from "~/components/ui/input";
3 | import React from "react";
4 | import Form from "next/form";
5 | import { cn } from "~/lib/utils";
6 |
7 | interface SearchProps {
8 | searchTerm: string;
9 | setSearchTerm: React.Dispatch
24 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/app/api/file/download/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { getFileType } from "~/lib/server/helpers";
3 |
4 | export async function GET(request: NextRequest) {
5 | const searchParams = request.nextUrl.searchParams;
6 | const url = searchParams.get("url");
7 | if (!url) {
8 | return NextResponse.json(
9 | { message: "file url is required" },
10 | { status: 404 },
11 | );
12 | }
13 | const res = await fetch(url);
14 |
15 | if (!res.ok) {
16 | return NextResponse.json({ message: "File not found" }, { status: 404 });
17 | }
18 |
19 | const fileBuffer = Buffer.from(await res.arrayBuffer());
20 | const fileType = await getFileType(fileBuffer);
21 | const fileSize = fileBuffer.byteLength;
22 | if (!fileType) {
23 | return NextResponse.json({ message: "Invalid file type" }, { status: 400 });
24 | }
25 | return new NextResponse(fileBuffer, {
26 | headers: {
27 | "Content-Disposition": `attachment; filename="attachment.${fileType.ext}"`,
28 | "Content-Type": fileType.mime,
29 | "Content-Length": fileSize.toString(),
30 | },
31 | status: 200,
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/app/chat/[id]/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
3 | import { Button } from "~/components/ui/button";
4 | import { AlertTriangle } from "lucide-react";
5 |
6 | export default function Error({
7 | error,
8 | reset,
9 | }: {
10 | error: Error & { digest?: string };
11 | reset: () => void;
12 | }) {
13 | return (
14 |
15 |
33 | );
34 | }
--------------------------------------------------------------------------------
/app/(home)/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
3 | import { Button } from "~/components/ui/button";
4 | import { TriangleAlert } from "lucide-react";
5 |
6 | export default function Error({
7 | error,
8 | reset,
9 | }: {
10 | error: Error & { digest?: string };
11 | reset: () => void;
12 | }) {
13 | return (
14 |
16 |
32 |
17 |
18 |
19 |
21 |
22 |
23 | {"something went wrong our team is already notified"}
24 |
25 |
26 |
27 |
30 |
31 |
15 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/app/auth.ts:
--------------------------------------------------------------------------------
1 | import NextAuth from "next-auth";
2 | import Google from "next-auth/providers/google";
3 | import Github from "next-auth/providers/github";
4 | import { DrizzleAdapter } from "@auth/drizzle-adapter";
5 | import { db } from "~/lib/drizzle";
6 | import { accounts, users } from "~/lib/drizzle/schema";
7 |
8 | const { signIn, signOut, handlers, auth } = NextAuth({
9 | adapter: DrizzleAdapter(db, {
10 | usersTable: users,
11 | accountsTable: accounts,
12 | }),
13 | providers: [
14 | Google({
15 | clientId: process.env.AUTH_GOOGLE_ID,
16 | clientSecret: process.env.AUTH_GOOGLE_SECRET,
17 | }),
18 | Github({
19 | clientSecret: process.env.AUTH_GITHUB_SECRET,
20 | clientId: process.env.AUTH_GITHUB_ID,
21 | }),
22 | ],
23 | session: {
24 | strategy: "jwt",
25 | },
26 | pages: {
27 | error: "/auth/error",
28 | signIn: "/auth/login",
29 | },
30 | trustHost: true,
31 | callbacks: {
32 | jwt: async ({ token, user }) => {
33 | if (user) {
34 | token.sub = user.id;
35 | }
36 | return token;
37 | },
38 | session: async ({ session, token }) => {
39 | session.user.id = token.sub as string;
40 | return session;
41 | },
42 | },
43 | });
44 |
45 | export { signIn, signOut, handlers, auth };
46 |
--------------------------------------------------------------------------------
/components/ai/spinner-message.tsx:
--------------------------------------------------------------------------------
1 | import { AssitantIcon } from "~/components/ui/icons";
2 | import { Loader2 } from "lucide-react";
3 | import { Button } from "../ui/button";
4 | export function SpinnerMessage() {
5 | return (
6 |
16 |
33 |
17 |
18 |
19 |
21 |
22 |
23 | {"something went wrong our team is already notified"}
24 |
25 |
26 |
27 |
28 |
31 |
32 |
7 |
16 | );
17 | }
18 |
19 | interface LoadingButtonProps {
20 | stop: () => void;
21 | }
22 |
23 | export function LoadingButton({ stop }: LoadingButtonProps) {
24 | return (
25 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 |
4 | import { cn } from "~/lib/utils";
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 | secondary:
14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 | destructive:
16 | "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 | outline: "text-foreground",
18 | },
19 | },
20 | defaultVariants: {
21 | variant: "default",
22 | },
23 | }
24 | );
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes
8 |
15 |
9 |
11 |
12 | Copilot is thinking...
13 |
14 |
30 | {message.role === "user" ? (
31 |
32 |
39 | ) : (
40 | <>
41 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 |
6 | import { cn } from "~/lib/utils"
7 |
8 | const Avatar = React.forwardRef<
9 | React.ElementRef
33 | {files.map((part, index) => (
34 |
38 |
22 |
23 |
24 |
25 | 404
26 |
27 |
28 | Not Found
29 |
30 |
31 |
32 |
37 |
38 |
44 |
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 | import ThemeProvider from "~/components/providers/theme-provider";
3 | import { TooltipProvider } from "~/components/ui/tooltip";
4 | import { SessionProvider } from "next-auth/react";
5 | import { Toaster } from "~/components/ui/sonner";
6 | import { cn } from "~/lib/utils";
7 | import { Geist } from "next/font/google";
8 |
9 | import React from "react";
10 | export const metadata = {
11 | title: {
12 | default: "Code Copilot",
13 | template: "%s | Code Copilot",
14 | },
15 | description: "A Programming AI Assistant",
16 | icons: {
17 | icon: "/favicon.ico",
18 | },
19 | metadataBase: new URL("https://code-copilot.vercel.app"),
20 | keywords: [
21 | "Programming assistant",
22 | "Code analysis",
23 | "AI-powered coding",
24 | "Code debugging",
25 | ],
26 | };
27 |
28 | const geist = Geist({
29 | display: "swap",
30 | subsets: ["latin"],
31 | weight: "400",
32 | });
33 |
34 | export default function RootLayout({
35 | children,
36 | }: Readonly<{
37 | children: React.ReactNode;
38 | }>) {
39 | return (
40 |
41 |
45 | 33 | Oops! The chat you're looking for doesn't exist or has 34 | been removed. 35 |
36 |
44 |
46 | {text}
47 |
48 |
27 | {messages.map((message) => (
28 |
55 | );
56 | });
57 | Messages.displayName = "Messages";
58 |
59 | export default Messages;
60 |
--------------------------------------------------------------------------------
/components/navbar/nav-links.tsx:
--------------------------------------------------------------------------------
1 | import { BookOpen } from "lucide-react";
2 | import {
3 | SidebarGroup,
4 | SidebarContent,
5 | SidebarMenuItem,
6 | SidebarMenuButton,
7 | } from "../ui/sidebar";
8 | import Link from "next/link";
9 |
10 | import { AssitantIcon } from "../ui/icons";
11 | import { usePathname } from "next/navigation";
12 | import { cn } from "~/lib/utils";
13 |
14 | export default function NavLinks() {
15 | const links = [
16 | {
17 | label: "New chat",
18 | href: "/",
19 | icon:
29 |
35 | ))}
36 | {isLoading && messages[messages.length - 1].role === "user" && (
37 |
38 |
40 | )}
41 | {error && (
42 |
43 |
48 | Unable to generate response. Please try again
49 |
50 |
51 | {!isLoading ?
53 | )}
54 |
52 | {link.icon}
53 |
54 |
55 |
56 | {link.label}
57 |
58 |
59 |
27 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/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 | import { cn } from "~/lib/utils"
5 |
6 | const buttonVariants = cva(
7 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground shadow-sm 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-9 px-4 py-2",
24 | sm: "h-8 rounded-md px-3 text-xs",
25 | lg: "h-10 rounded-md px-8",
26 | icon: "h-9 w-9",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes
28 |
38 | {chats && chats.length > 0 ? (
39 | chats.map((chat) =>
29 |
37 |
42 |
52 | )}
53 |
25 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/components/skeletons.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Fragment } from "react";
3 | import { SidebarMenuSkeleton } from "./ui/sidebar";
4 | import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
5 | import { Skeleton } from "~/components/ui/skeleton";
6 | import { Separator } from "~/components/ui/separator";
7 | import SearchInput from "./search";
8 | export function ChatsSkeleton() {
9 | return (
10 |
31 |
33 |
39 | {message
40 | ? message.parts.map((msg, index) => {
41 | switch (msg.type) {
42 | case "reasoning":
43 | return (
44 |
45 |
46 | {msg.text}
47 |
48 |
49 | );
50 | case "text":
51 | return (
52 |
53 | {msg.text}
54 | {!isLoading ? (
55 |
58 | );
59 | }
60 | })
61 | : children}
62 |
63 |
30 |
33 |
34 |
37 |
45 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/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
46 |
58 | {Array.from({ length: 3 }).map((_, index) => (
59 |
47 | {
50 | return;
51 | }}
52 | placeholder="Search Chat..."
53 | searchParams="chat"
54 | className="w-full"
55 | />
56 |
57 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
53 |
54 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/GEMINI.md:
--------------------------------------------------------------------------------
1 | # GEMINI.md
2 |
3 | ## Project Overview
4 |
5 | This is a Next.js application that provides a chat interface for interacting with an AI. It uses a variety of modern web technologies to provide a feature-rich experience.
6 |
7 | The project is a "Code Copilot" chat bot. It allows users to generate responses, copy messages, regenerate messages, save and retrieve chats from a database, and upload attachments.
8 |
9 | ## Building and Running
10 |
11 | To get started with this project, you'll need to have Node.js and pnpm installed.
12 |
13 | 1. **Install dependencies:**
14 |
15 | ```bash
16 | pnpm install
17 | ```
18 |
19 | 2. **Run the development server:**
20 |
21 | ```bash
22 | pnpm run dev
23 | ```
24 |
25 | This will start the development server on [http://localhost:3000](http://localhost:3000).
26 |
27 | 3. **Build for production:**
28 |
29 | ```bash
30 | pnpm run build
31 | ```
32 |
33 | 4. **Start the production server:**
34 |
35 | ```bash
36 | pnpm run start
37 | ```
38 |
39 | ### Other useful commands:
40 |
41 | * `pnpm run lint`: Lint the code.
42 | * `pnpm run typecheck`: Run the TypeScript compiler to check for type errors.
43 | * `pnpm run db:push`: Push database schema changes.
44 | * `pnpm run db:generate`: Generate database migration files.
45 | * `pnpm run db:migrate`: Apply database migrations.
46 | * `pnpm run db:studio`: Open the Drizzle Studio to view and manage your database.
47 |
48 | ## Development Conventions
49 |
50 | * **Framework:** The project is built with [Next.js](https://nextjs.org/) and [React](https://reactjs.org/).
51 | * **Authentication:** Authentication is handled by [NextAuth.js](https://next-auth.js.org/), with providers for Google and Github.
52 | * **Database:** The project uses a PostgreSQL database with [Drizzle ORM](https://orm.drizzle.team/). The database schema is defined in `lib/drizzle/schema.ts`.
53 | * **Styling:** The project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
54 | * **UI Components:** The project uses [Radix UI](https://www.radix-ui.com/) and custom components for the user interface.
55 | * **Linting and Formatting:** The project uses [ESLint](https://eslint.org/) for linting and [Prettier](https://prettier.io/) for code formatting.
56 | * **Type Checking:** The project uses [TypeScript](https://www.typescriptlang.org/) for static type checking.
57 |
--------------------------------------------------------------------------------
/components/ai/button-row.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Check,
3 | Copy,
4 | LucideIcon,
5 | Repeat,
6 | ThumbsDown,
7 | ThumbsUp,
8 | } from "lucide-react";
9 | import { Button } from "~/components/ui/button";
10 | import {
11 | Tooltip,
12 | TooltipContent,
13 | TooltipTrigger,
14 | } from "~/components/ui/tooltip";
15 | import { toast } from "sonner";
16 | import { useClipBoard } from "~/lib/hooks";
17 | import { RegenerateFunc } from "~/lib/types";
18 |
19 | interface Props {
20 | content: string;
21 | reload:RegenerateFunc
22 | }
23 | export default function ButtonRow({ content, reload }: Props) {
24 | const [isCopied, copyText] = useClipBoard();
25 | const buttons: Array<{
26 | icon: LucideIcon;
27 | tooltip: string;
28 | label?: string;
29 | onClick: () => void;
30 | }> = [
31 | {
32 | icon: isCopied ? Check : Copy,
33 | tooltip: isCopied ? "Copied!" : "Copy",
34 | onClick: copy,
35 | label: isCopied ? "Copied!" : "Copy",
36 | },
37 | {
38 | icon: Repeat,
39 | tooltip: "Regenerate",
40 | onClick: async () => {
41 | await reload({
42 |
43 | });
44 | },
45 | },
46 | { icon: ThumbsUp, tooltip: "Like", onClick: like },
47 | { icon: ThumbsDown, tooltip: "Dislike", onClick: dislike },
48 | ];
49 |
50 | function like() {
51 | toast("Thanks for your feedback!", {
52 | position: "top-center",
53 | });
54 | }
55 | function dislike() {
56 | toast("Thanks for your feedback! We will try to improve", {
57 | position: "top-center",
58 | });
59 | }
60 | function copy() {
61 | copyText(content);
62 | }
63 | return (
64 |
23 |
25 |
65 | {buttons.map(({ icon: Icon, onClick, tooltip, label }, index) => (
66 |
67 |
68 |
79 |
80 |
81 |
83 |
84 | ))}
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
8 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
9 | ],
10 | theme: {
11 | extend: {
12 | colors: {
13 | background: "hsl(var(--background))",
14 | foreground: "hsl(var(--foreground))",
15 | card: {
16 | DEFAULT: "hsl(var(--card))",
17 | foreground: "hsl(var(--card-foreground))",
18 | },
19 | popover: {
20 | DEFAULT: "hsl(var(--popover))",
21 | foreground: "hsl(var(--popover-foreground))",
22 | },
23 | primary: {
24 | DEFAULT: "hsl(var(--primary))",
25 | foreground: "hsl(var(--primary-foreground))",
26 | },
27 | secondary: {
28 | DEFAULT: "hsl(var(--secondary))",
29 | foreground: "hsl(var(--secondary-foreground))",
30 | },
31 | muted: {
32 | DEFAULT: "hsl(var(--muted))",
33 | foreground: "hsl(var(--muted-foreground))",
34 | },
35 | accent: {
36 | DEFAULT: "hsl(var(--accent))",
37 | foreground: "hsl(var(--accent-foreground))",
38 | },
39 | destructive: {
40 | DEFAULT: "hsl(var(--destructive))",
41 | foreground: "hsl(var(--destructive-foreground))",
42 | },
43 | border: "hsl(var(--border))",
44 | input: "hsl(var(--input))",
45 | ring: "hsl(var(--ring))",
46 | chart: {
47 | "1": "hsl(var(--chart-1))",
48 | "2": "hsl(var(--chart-2))",
49 | "3": "hsl(var(--chart-3))",
50 | "4": "hsl(var(--chart-4))",
51 | "5": "hsl(var(--chart-5))",
52 | },
53 | sidebar: {
54 | DEFAULT: "hsl(var(--sidebar-background))",
55 | foreground: "hsl(var(--sidebar-foreground))",
56 | primary: "hsl(var(--sidebar-primary))",
57 | "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
58 | accent: "hsl(var(--sidebar-accent))",
59 | "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
60 | border: "hsl(var(--sidebar-border))",
61 | ring: "hsl(var(--sidebar-ring))",
62 | },
63 | },
64 | borderRadius: {
65 | lg: "var(--radius)",
66 | md: "calc(var(--radius) - 2px)",
67 | sm: "calc(var(--radius) - 4px)",
68 | },
69 | },
70 | },
71 | plugins: [require("tailwindcss-animate")],
72 | };
73 | export default config;
74 |
--------------------------------------------------------------------------------
/components/chat/view-attachement.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FileIcon, Download, Eye } from "lucide-react";
4 | import Image from "next/image";
5 | import Link from "next/link";
6 | import { Button } from "~/components/ui/button";
7 | import { Card, CardContent, CardFooter } from "~/components/ui/card";
8 |
9 | export default function ViewAttachment({
10 | attachment,
11 | }: {
12 | attachment: Attachment;
13 | }) {
14 | const isImage = attachment.contentType?.startsWith("image/");
15 |
16 | return (
17 | {tooltip}
82 |
21 |
29 | ) : (
30 |
31 |
33 | )}
34 |
37 |
42 | {attachment.name}
38 |39 | {isImage ? "Image" : attachment.contentType} 40 |
41 |
45 |
55 |
65 |
66 |
39 | {isLoading ? (
40 |
68 | {isExpanded && (
69 |
80 | {children}
81 |
82 | )}
83 |
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/lib/drizzle/schema.ts:
--------------------------------------------------------------------------------
1 | import { AdapterAccountType } from "@auth/core/adapters";
2 | import { UIMessage } from "ai";
3 | import { relations } from "drizzle-orm";
4 | import {
5 | index,
6 | integer,
7 | json,
8 | pgTable,
9 | primaryKey,
10 | text,
11 | timestamp,
12 | uuid,
13 | varchar,
14 | } from "drizzle-orm/pg-core";
15 |
16 | const timestamps = {
17 | createdAt: timestamp("createdAt", { mode: "date" }).notNull().defaultNow(),
18 | updatedAt: timestamp("updatedAt", { mode: "date" })
19 | .notNull()
20 | .defaultNow()
21 | .$onUpdate(() => new Date()),
22 | };
23 |
24 | export const users = pgTable("users", {
25 | id: uuid("id").defaultRandom().primaryKey(),
26 | name: varchar("name"),
27 | email: varchar("email").unique(),
28 | emailVerified: timestamp("emailVerified", { mode: "date" }),
29 | image: text("image"),
30 | ...timestamps,
31 | });
32 |
33 | export const chats = pgTable(
34 | "chats",
35 | {
36 | id: varchar("id").primaryKey(),
37 | title: varchar("title").notNull(),
38 | messages: json("messages").$type
41 |
46 | ) : (
47 | Reasoning
42 |
43 |
45 |
48 |
65 | )}
66 |
67 | Reasoned for a few seconds
49 |
64 |
38 |
40 |
41 |
42 | Last Updated {formatedDate}
43 |
44 |
45 |
46 |
49 |
50 |
51 |
52 |
54 |
55 |
57 |
58 |
60 |
61 |
62 |
63 |
40 |
42 |
43 |
44 | Code Copilot
45 |
46 |
47 |
73 |
76 |
79 |
80 |
27 |
28 | {languageIcon}
29 |
30 |
53 |
54 |
31 |
51 |
52 |
55 |
86 | {codes}
87 |
88 |
89 |
31 | 
36 |
37 | ) : (
38 |
39 |
41 | )}
42 |
43 |
50 |
58 | 44 | {attachment.filename} 45 |
46 |47 | {isImage ? "Image" : attachment.mediaType} 48 |
49 |{attachment.filename}
63 |{attachment.mediaType}
64 |
75 |
77 |
78 |
83 | {attachment.filename}
79 |80 | {attachment.mediaType} 81 |
82 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
29 |
41 |
42 |
55 |
43 |
54 |
44 |
45 | {session?.user?.name}
46 |
47 |
48 | {session?.user?.email}
49 |
50 |
51 |
52 |
59 |
66 | 60 | {session?.user?.name} 61 |
62 |63 | {session?.user?.email} 64 |
65 |
68 |
78 |
79 |
69 |
77 |
81 | {filteredModels.length > 0 ? (
82 | filteredModels.map((model) => (
83 |
116 | handleModelSelect(model)}
89 | role="button"
90 | tabIndex={0}
91 | aria-label={`Select ${model.name} from ${model.provider.name}`}
92 | onKeyDown={(e) => {
93 | if (e.key === "Enter" || e.key === " ") {
94 | handleModelSelect(model);
95 | }
96 | }}
97 | >
98 |
109 | ))
110 | ) : (
111 |
99 |
101 |
102 |
108 | {model.name}
103 |
104 |
107 | {model.provider.name}
106 |
112 |
114 | )}
115 | No models found matching your search.
113 |
27 |
34 |
35 | ),
36 | thead: ({ node, className, ...props }) => (
37 | -
53 | {children}
54 |
-
58 | {children}
59 |
87 |
91 | ) : (
92 |
88 |
90 |
99 | {children}
100 |
101 | );
102 | },
103 | p: ({ children, className, ...props }) => (
104 | 105 | {children} 106 |
107 | ), 108 | h1: ({ children, className, ...props }) => ( 109 |110 | {children} 111 |
112 | ), 113 | h2: ({ children, className, ...props }) => ( 114 |115 | {children} 116 |
117 | ), 118 | h3: ({ children, className, ...props }) => ( 119 |120 | {children} 121 |
122 | ), 123 | }) satisfies Components, 124 | [], 125 | ); 126 | 127 | return ( 128 |
129 |
134 | {children}
135 |
136 |
137 | );
138 | }
139 |
140 | const MarkdownBlock = memo(
141 | MarkdownComponent,
142 | (prev, next) => prev.children === next.children,
143 | );
144 |
145 | export const Markdown = memo(({ children }: { children: string }) => {
146 | const blocks = useMemo(() => parseMarkdown(children), [children]);
147 | return blocks.map((block, index) => (
148 |
42 |
52 | ))
53 |
54 | CommandInput.displayName = CommandPrimitive.Input.displayName
55 |
56 | const CommandList = React.forwardRef<
57 | React.ElementRef
85 | {!isLoggedIn ? (
86 | sendMessage({ text: msg })} />
114 | ) : (
115 | <>
116 |
120 |
124 |
132 |
133 |
171 | );
172 | }
173 |
--------------------------------------------------------------------------------
/components/chat/input.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "~/components/ui/button";
2 | import Textarea from "react-textarea-autosize";
3 | import {
4 | CloudUpload,
5 | MoveUp,
6 | Paperclip,
7 | Send,
8 | TriangleAlert,
9 | } from "lucide-react";
10 | import React, { ChangeEvent, useRef, useTransition } from "react";
11 | import { cn, sleep } from "~/lib/utils";
12 | import { LoadingButton } from "~/components/ai/spinner-message";
13 | import AttachmentPreview, {
14 | Loading,
15 | } from "~/components/chat/attachment-preview";
16 | import { FileUIPart } from "ai";
17 | import { useUploadThing } from "~/lib/uploadthing";
18 | import { toast } from "sonner";
19 | import { deleteAttachment } from "~/lib/server/actions";
20 | import { Separator } from "../ui/separator";
21 | import { ModelSelector } from "./model-select";
22 | import { Model } from "~/lib/ai/models";
23 |
24 | interface InputFieldProps {
25 | handleSubmit: (e: React.FormEvent
87 |
90 |
93 |
94 | ) : (
95 | isMobile &&
96 | !isEmpty &&
97 | !path.includes(chatId) && (
98 |
99 |
100 | {chatTitle
101 | ? chatTitle?.length > 35
102 | ? chatTitle?.slice(0, 30) + "..."
103 | : chatTitle
104 | : "Unititled Chat"}
105 |
106 |
109 |
110 | )
111 | )}
112 | {isEmpty ? (
113 |
134 |
139 |
140 | )}
141 |
142 |
170 |
143 |
158 |
144 | setInput(e.target.value)}
155 | />
156 |
157 |
159 |
169 |
160 |
165 |
168 |