Feat/project

.dockerignore

@@ -1,4 +1,2 @@
 node_modules/
-.next
-.env
-*.env
+.next

.gitignore

@@ -37,4 +37,4 @@ yarn-error.log*
 next-env.d.ts
 
 node_modules
-temp
+temp/

.prettierrc

@@ -1,3 +1,9 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "arrowParens": "always",
+  "printWidth": 140,
+  "trailingComma": "es5",
+  "semi": false,
+  "useTabs": true,
+  "singleQuote": true
 }

README.md

@@ -1,43 +1 @@
-<a href="https://www.llamacoder.io">
-  <img alt="Llama Coder" src="./public/og-image.png">
-  <h1 align="center">Llama Coder</h1>
-</a>
-
-<p align="center">
-  An open source Claude Artifacts – generate small apps with one prompt. Powered by Llama 3 405B & Together.ai.
-</p>
-
-## Tech stack
-
-- [Llama 3.1 405B](https://ai.meta.com/blog/meta-llama-3-1/) from Meta for the LLM
-- [Together AI](https://dub.sh/together-ai/?utm_source=example-app&utm_medium=llamacoder&utm_campaign=llamacoder-app-signup) for LLM inference
-- [Sandpack](https://sandpack.codesandbox.io/) for the code sandbox
-- Next.js app router with Tailwind
-- Helicone for observability
-- Plausible for website analytics
-
-## Cloning & running
-
-1. Clone the repo: `git clone https://github.com/Nutlope/llamacoder`
-2. Create a `.env` file and add your [Together AI API key](https://dub.sh/together-ai/?utm_source=example-app&utm_medium=llamacoder&utm_campaign=llamacoder-app-signup): `TOGETHER_API_KEY=`
-3. Run `npm install` and `npm run dev` to install dependencies and run locally
-
-## Future Tasks
-
-- [ ] Add dynamic OG images to the specific generations & include the prompt
-- [ ] Add more dynamic OG images for playwright
-- [ ] Address issue of ability to publish the same app repeatedly
-- [ ] Try chain of thought reasoning to see if it works better overall
-- [ ] Encourage best practices by making the input and textarea & having pills to generate apps w/ good prompts
-- [ ] Save previous versions so people can go back and forth between the generated ones
-- [ ] Could be nice to show a "featured apps" route on the site on `/featured`. Have a `/id/${prompt}` dynamic route that can display a bunch of nice example apps in the sandbox ready to go
-- [ ] Support more languages starting with Python, check out E2B
-- [ ] Try finetuning a smaller model on good prompts from 405b or GPT-4/Claude
-- [ ] Add dark mode to the site overall, nice design change
-- [ ] Think about how to have 405B correct itself (sometimes it makes up imports)
-- [ ] New route for updateCode that only sends the latest generated code + the modify request
-- [ ] Fix bug where if a user edits the code, then does a change, it doesn't use the edited code
-- [ ] Add rate limiting with redis upstash if the traffic gets too high
-- [ ] Try to add a consistent component library like shadcn
-- [ ] Apply code diffs directly instead of asking the model to generate the code from scratch
-- [ ] Add the ability to upload things like a screenshot for it to start from that
+## Ti-Artifacts

app/(main)/dashboard.tsx

@@ -0,0 +1,258 @@
+'use client'
+
+import Alert from '@/components/Alert'
+import ConfirmationDialog from '@/components/ConfirmationDialog'
+import CreateProjectButton from '@/components/CreateProjectButton'
+import EmptyProjectMessage from '@/components/EmptyProjectMessage'
+import HeaderV2 from '@/components/HeaderV2'
+import ProjectList from '@/components/ProjectList'
+import ProjectOverviewInputForm from '@/components/ProjectOverviewInputForm'
+import ProjectShareModal from '@/components/ProjectShareModal'
+import { useAppContext } from '@/contexts/AppContext'
+import { AccessLevel, Project } from '@/types/Project'
+import { projectApi } from '@/utils/apiClients/Project'
+import { useUser } from '@auth0/nextjs-auth0/client'
+import { CircularProgress } from '@mui/material'
+import axios from 'axios'
+import { useRouter } from 'next/navigation'
+import React, { useState } from 'react'
+
+const Dashboard: React.FC = () => {
+	const { user, error: userError, isLoading: userLoading } = useUser()
+	const { projects, projectsLoading, projectsError, refreshProjects } = useAppContext()
+	const [showCreateForm, setShowCreateForm] = useState(false)
+	const [isCreatingProject, setIsCreatingProject] = useState(false)
+	const [showShareModal, setShowShareModal] = useState(false)
+	const [selectedProject, setSelectedProject] = useState<Project | null>(null)
+	const [alert, setAlert] = useState<{
+		type: 'error' | 'info' | 'warning' | 'success'
+		message: string
+	} | null>(null)
+	const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)
+	const [projectToDelete, setProjectToDelete] = useState<Project | null>(null)
+
+	const router = useRouter()
+
+	// useEffect(() => {
+	//   if (!projectsLoading && !projectsError && projects.length === 0) {
+	//     refreshProjects();
+	//   }
+	// }, [projectsLoading, projectsError, projects.length, refreshProjects]);
+
+	const handleCreateProject = async (description: string) => {
+		setIsCreatingProject(true)
+		try {
+			const titleResponse = await axios.post('/api/genai/title', {
+				description,
+			})
+			const generatedTitle = titleResponse.data.title
+
+			const newProject: Partial<Project> = {
+				title: generatedTitle,
+				description: description,
+				thumbnail: '',
+				context: [],
+				status: 'Inactive',
+			}
+
+			const createdProject = await projectApi.createProject(newProject)
+			await refreshProjects()
+			setShowCreateForm(false)
+			router.push(`/workspaces/${createdProject.id}`)
+		} catch (error) {
+			console.error('Error creating project:', error)
+			setAlert({
+				type: 'error',
+				message: 'Failed to create project. Please try again.',
+			})
+		} finally {
+			setIsCreatingProject(false)
+		}
+	}
+
+	const handleShareClick = (project: Project): void => {
+		setSelectedProject(project)
+		setShowShareModal(true)
+	}
+
+	const handleProjectDeleted = async (deletedProject: Project): Promise<void> => {
+		try {
+			await projectApi.deleteProject(deletedProject.id)
+			setAlert({ type: 'success', message: 'Project deleted successfully.' })
+			await refreshProjects()
+		} catch (error) {
+			console.error('Error deleting project:', error)
+			setAlert({
+				type: 'error',
+				message: 'Failed to delete project. Please try again.',
+			})
+		}
+	}
+
+	const handleDeleteClick = (project: Project): void => {
+		setProjectToDelete(project)
+		setShowDeleteConfirmation(true)
+	}
+
+	const handleDeleteConfirm = async () => {
+		if (projectToDelete) {
+			await handleProjectDeleted(projectToDelete)
+			setShowDeleteConfirmation(false)
+			setProjectToDelete(null)
+		}
+	}
+
+	const handleDeleteCancel = () => {
+		setShowDeleteConfirmation(false)
+		setProjectToDelete(null)
+	}
+
+	const handleUpdateAccessLevel = async (email: string, accessLevel: AccessLevel | 'revoke') => {
+		console.log('Adding contributor:', email, accessLevel)
+		if (!selectedProject) {
+			setAlert({
+				type: 'error',
+				message: 'Failed to add contributor. Please try again.',
+			})
+			return
+		}
+		const { success } = await projectApi.shareProject(selectedProject?.id, email, accessLevel)
+		if (!success) {
+			setAlert({
+				type: 'error',
+				message: 'Failed to add contributor. Please try again.',
+			})
+			return
+		}
+		if (accessLevel === 'revoke') {
+			setSelectedProject((prevProject) => {
+				if (!prevProject) return null
+				return {
+					...prevProject,
+					contributors: prevProject?.contributors?.filter((contributor) => contributor.email !== email),
+				}
+			})
+		} else {
+			setSelectedProject((prevProject) => {
+				if (!prevProject) return null
+				return {
+					...prevProject,
+					contributors: prevProject?.contributors?.map((contributor) =>
+						contributor.email === email ? { ...contributor, accessLevel } : contributor
+					),
+				}
+			})
+		}
+	}
+
+	const handleAddContributor = async (email: string, accessLevel: AccessLevel | 'revoke') => {
+		console.log('Adding contributor:', email, accessLevel)
+		if (!selectedProject) {
+			setAlert({
+				type: 'error',
+				message: 'Failed to add contributor. Please try again.',
+			})
+			return
+		}
+		const { success } = await projectApi.shareProject(selectedProject?.id, email, accessLevel)
+		if (!success) {
+			setAlert({
+				type: 'error',
+				message: 'Failed to add contributor. Please try again.',
+			})
+			return
+		}
+		if (accessLevel === 'revoke') {
+			return
+		} else {
+			setSelectedProject((prevProject) => {
+				if (!prevProject) return null
+				return {
+					...prevProject,
+					contributors: [...(prevProject.contributors || []), { email, accessLevel }],
+				}
+			})
+		}
+	}
+
+	if (userLoading) {
+		return (
+			<div className="flex min-h-screen items-center justify-center">
+				<CircularProgress size={60} />
+			</div>
+		)
+	}
+
+	if (projectsLoading) {
+		return (
+			<div className="flex h-screen flex-col items-center justify-center bg-gray-50">
+				<CircularProgress size={64} />
+				<h2 className="mb-2 mt-4 text-2xl font-semibold text-gray-700">Loading your projects...</h2>
+			</div>
+		)
+	}
+
+	if (userError) {
+		router.push('/api/auth/login')
+	}
+
+	return (
+		<div className="flex min-h-screen flex-col">
+			<HeaderV2 user={user} />
+			<main className="mt-24 w-full flex-1">
+				<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+					{projects.length > 0 ? (
+						<>
+							<div className="mb-8 mt-8 flex items-center justify-between">
+								<h2 className="text-4xl font-bold text-gray-800">Your Projects</h2>
+								<CreateProjectButton onClick={() => setShowCreateForm(true)} showSearch={projects.length > 0} />
+							</div>
+							<ProjectList
+								projects={projects}
+								onProjectDeleted={handleProjectDeleted}
+								onShareClick={handleShareClick}
+								onDeleteClick={handleDeleteClick}
+							/>
+						</>
+					) : (
+						<EmptyProjectMessage onCreateProject={() => setShowCreateForm(true)} />
+					)}
+				</div>
+			</main>
+
+			{showCreateForm && (
+				<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30 p-4 backdrop-blur-[2px]">
+					{isCreatingProject ? (
+						<div className="flex flex-col items-center justify-center bg-gray-50 p-10">
+							<CircularProgress size={64} />
+							<h2 className="mb-4 ml-10 mr-10 mt-6 text-2xl font-semibold text-gray-700">Creating your project...</h2>
+						</div>
+					) : (
+						<ProjectOverviewInputForm onCancel={() => setShowCreateForm(false)} onNext={handleCreateProject} />
+					)}
+				</div>
+			)}
+			{alert && <Alert type={alert.type} message={alert.message} onClose={() => setAlert(null)} />}
+			{showShareModal && selectedProject && (
+				<ProjectShareModal
+					isOpen={showShareModal}
+					onClose={() => setShowShareModal(false)}
+					project={selectedProject}
+					onUpdateAccessLevel={handleUpdateAccessLevel}
+					onAddContributor={handleAddContributor}
+				/>
+			)}
+			{showDeleteConfirmation && (
+				<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+					<ConfirmationDialog
+						message={<p>Are you sure you want to delete this project? This action cannot be undone.</p>}
+						onConfirm={handleDeleteConfirm}
+						onCancel={handleDeleteCancel}
+					/>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default Dashboard

app/(main)/dashboard/page.tsx

@@ -0,0 +1,5 @@
+import Dashboard from '../dashboard';
+
+export default function DashboardPage() {
+  return <Dashboard />;
+}