├── src ├── components │ ├── chat-inner.tsx │ ├── chat.tsx │ ├── ui │ │ ├── skeleton.tsx │ │ ├── separator.tsx │ │ ├── textarea.tsx │ │ ├── input.tsx │ │ ├── badge.tsx │ │ ├── scroll-area.tsx │ │ ├── tooltip.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dialog.tsx │ │ ├── sheet.tsx │ │ ├── dropdown-menu.tsx │ │ └── sidebar.tsx │ ├── welcome-message.tsx │ ├── animated-gradient.tsx │ ├── loading-state.tsx │ ├── error-state.tsx │ ├── data-stream-provider.tsx │ ├── messages │ │ ├── code-block.tsx │ │ ├── message-content.tsx │ │ └── file-attachment.tsx │ ├── chat-input.tsx │ ├── chat-header.tsx │ ├── file-attachment-display.tsx │ ├── chat-layout.tsx │ ├── memory-modal.tsx │ ├── chat-messages.tsx │ ├── file-upload-dropdown.tsx │ └── chat-sidebar.tsx ├── app │ ├── favicon.ico │ ├── chat │ │ ├── layout.tsx │ │ └── [[...id]] │ │ │ └── page.tsx │ ├── api │ │ ├── chat-list │ │ │ └── route.ts │ │ ├── chat │ │ │ ├── delete │ │ │ │ └── route.ts │ │ │ ├── edit │ │ │ │ └── route.ts │ │ │ ├── edit-message │ │ │ │ └── route.ts │ │ │ └── route.ts │ │ ├── webhooks │ │ │ └── clerk │ │ │ │ └── route.ts │ │ ├── memory │ │ │ └── route.ts │ │ └── upload │ │ │ └── route.ts │ ├── sign-in │ │ └── page.tsx │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── hooks │ ├── use-auth-redirect.ts │ ├── use-mobile.ts │ ├── use-chat-list.ts │ ├── use-chat-transition.ts │ ├── use-chat-data.ts │ └── use-chat-with-attachments.ts ├── lib │ ├── utils.ts │ ├── fetch-utils.ts │ ├── chat-sidebar-events.ts │ ├── user.ts │ └── mongodb.ts ├── models │ ├── User.ts │ └── Chat.ts ├── contexts │ └── chat-sidebar-context.tsx ├── types │ └── chat.ts └── middleware.ts ├── LICENSE.md ├── postcss.config.mjs ├── next.config.ts ├── eslint.config.mjs ├── components.json ├── .gitignore ├── tsconfig.json ├── public └── chatgpt.svg ├── package.json └── README.md /src/components/chat-inner.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Free to use, just dont directly claim it as yours! 2 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Some1Uknow/chatgpt-cloned/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /src/components/chat.tsx: -------------------------------------------------------------------------------- 1 | // This file has been moved to use existing chat components 2 | // The functionality is now in the updated useChatWithAttachments hook 3 | -------------------------------------------------------------------------------- /src/hooks/use-auth-redirect.ts: -------------------------------------------------------------------------------- 1 | import { useAuth } from "@clerk/nextjs"; 2 | 3 | export function useAuthRedirect() { 4 | const { isSignedIn, isLoaded } = useAuth(); 5 | 6 | return { isSignedIn: isSignedIn && isLoaded }; 7 | } 8 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | images: { 5 | domains: ["ucarecdn.com"], 6 | }, 7 | serverExternalPackages: ["pdf-parse"], 8 | }; 9 | 10 | export default nextConfig; 11 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | 8 | export function generateUUID(): string { 9 | return crypto.randomUUID() 10 | } 11 | -------------------------------------------------------------------------------- /src/lib/fetch-utils.ts: -------------------------------------------------------------------------------- 1 | export async function fetchWithErrorHandlers( 2 | url: string, 3 | options?: RequestInit, 4 | ): Promise { 5 | const response = await fetch(url, options); 6 | 7 | if (!response.ok) { 8 | throw new Error(`HTTP error! status: ${response.status}`); 9 | } 10 | 11 | return response; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ className, ...props }: React.ComponentProps<"div">) { 4 | return ( 5 |
10 | ) 11 | } 12 | 13 | export { Skeleton } 14 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /src/components/welcome-message.tsx: -------------------------------------------------------------------------------- 1 | interface WelcomeMessageProps { 2 | title?: string; 3 | } 4 | 5 | export default function WelcomeMessage({ title = "How can I help you today?" }: WelcomeMessageProps) { 6 | return ( 7 |
8 |
9 |

10 | {title} 11 |

12 |
13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /src/app/chat/layout.tsx: -------------------------------------------------------------------------------- 1 | import { SidebarProvider } from "@/components/ui/sidebar"; 2 | import { ChatSidebar } from "@/components/chat-sidebar"; 3 | 4 | export default function Layout({ children }: { children: React.ReactNode }) { 5 | return ( 6 | 7 |
8 | 9 |
10 | {children} 11 |
12 |
13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/chat-sidebar-events.ts: -------------------------------------------------------------------------------- 1 | // Simple event emitter for sidebar updates 2 | class ChatSidebarEvents { 3 | private listeners: (() => void)[] = []; 4 | 5 | subscribe(listener: () => void) { 6 | this.listeners.push(listener); 7 | return () => { 8 | this.listeners = this.listeners.filter(l => l !== listener); 9 | }; 10 | } 11 | 12 | emit() { 13 | this.listeners.forEach(listener => listener()); 14 | } 15 | } 16 | 17 | export const chatSidebarEvents = new ChatSidebarEvents(); 18 | 19 | // Helper function to trigger sidebar refresh 20 | export function refreshChatSidebar() { 21 | chatSidebarEvents.emit(); 22 | } 23 | -------------------------------------------------------------------------------- /src/models/User.ts: -------------------------------------------------------------------------------- 1 | import mongoose from 'mongoose'; 2 | 3 | const UserSchema = new mongoose.Schema({ 4 | clerkId: { 5 | type: String, 6 | required: true, 7 | unique: true, 8 | }, 9 | email: { 10 | type: String, 11 | required: true, 12 | }, 13 | firstName: String, 14 | lastName: String, 15 | imageUrl: String, 16 | createdAt: { 17 | type: Date, 18 | default: Date.now, 19 | }, 20 | updatedAt: { 21 | type: Date, 22 | default: Date.now, 23 | }, 24 | }, { 25 | timestamps: true, 26 | }); 27 | 28 | const User = mongoose.models.User || mongoose.model('User', UserSchema); 29 | 30 | export default User; 31 | -------------------------------------------------------------------------------- /src/hooks/use-mobile.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /.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.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /src/app/api/chat-list/route.ts: -------------------------------------------------------------------------------- 1 | import { NextRequest, NextResponse } from "next/server"; 2 | import { getAuth } from "@clerk/nextjs/server"; 3 | import dbConnect from "@/lib/mongodb"; 4 | import Chat from "@/models/Chat"; 5 | 6 | export async function GET(req: NextRequest) { 7 | const { userId } = getAuth(req); 8 | if (!userId) { 9 | return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); 10 | } 11 | await dbConnect(); 12 | 13 | // Get all chats for the user, sorted by updatedAt desc 14 | const chats = await Chat.find({ userId }) 15 | .sort({ updatedAt: -1 }) 16 | .select("chatId title") 17 | .lean(); 18 | 19 | return NextResponse.json({ chats }); 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 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 | -------------------------------------------------------------------------------- /src/lib/user.ts: -------------------------------------------------------------------------------- 1 | import { currentUser } from '@clerk/nextjs/server'; 2 | import connectToDatabase from '@/lib/mongodb'; 3 | import User from '@/models/User'; 4 | 5 | export async function getOrCreateUser() { 6 | const clerkUser = await currentUser(); 7 | 8 | if (!clerkUser) { 9 | return null; 10 | } 11 | 12 | await connectToDatabase(); 13 | 14 | let user = await User.findOne({ clerkId: clerkUser.id }); 15 | 16 | if (!user) { 17 | user = await User.create({ 18 | clerkId: clerkUser.id, 19 | email: clerkUser.emailAddresses[0]?.emailAddress, 20 | firstName: clerkUser.firstName, 21 | lastName: clerkUser.lastName, 22 | imageUrl: clerkUser.imageUrl, 23 | }); 24 | } 25 | 26 | return user; 27 | } 28 | -------------------------------------------------------------------------------- /src/hooks/use-chat-list.ts: -------------------------------------------------------------------------------- 1 | import useSWR from 'swr'; 2 | 3 | // Fetcher function for SWR 4 | const fetcher = async (url: string) => { 5 | const res = await fetch(url); 6 | if (!res.ok) throw new Error('Failed to fetch'); 7 | return res.json(); 8 | }; 9 | 10 | export function useChatList() { 11 | const { data, error, isLoading, mutate } = useSWR( 12 | '/api/chat-list', 13 | fetcher, 14 | { 15 | revalidateOnFocus: true, 16 | revalidateOnReconnect: true, 17 | dedupingInterval: 5000, // Dedupe requests within 5 seconds 18 | refreshInterval: 30000, // Refresh every 30 seconds 19 | } 20 | ); 21 | 22 | return { 23 | chats: data?.chats || [], 24 | isLoading, 25 | error, 26 | mutate, // Expose mutate function for cache invalidation 27 | }; 28 | } 29 | -------------------------------------------------------------------------------- /src/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 | function Separator({ 9 | className, 10 | orientation = "horizontal", 11 | decorative = true, 12 | ...props 13 | }: React.ComponentProps) { 14 | return ( 15 | 25 | ) 26 | } 27 | 28 | export { Separator } 29 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |