Good
; +\`\`\` +\`\`\` file="app/Bad.tsx" +// Missing closing backticks +`; + const expected = [ + { filePath: "app/Good.tsx", content: "const Good = () =>Good
;" }, + ]; + const result = parseV0Output(malformedInput); + expect(result).toEqual(expected); + + const malformedInput2 = "```tsx file=no_quotes.tsx\ncontent\n```"; + expect(parseV0Output(malformedInput2)).toEqual([]); + }); + + it("should handle different language specifiers and no specifier", () => { + const input = ` +\`\`\`tsx file="component.tsx" +// tsx content +\`\`\` +\`\`\`json file="data.json" +// json content +\`\`\` +\`\`\`js file="script.js" +// js content +\`\`\` +\`\`\` file="text.txt" +// no specifier content +\`\`\` +`; + const expected = [ + { filePath: "component.tsx", content: "// tsx content" }, + { filePath: "data.json", content: "// json content" }, + { filePath: "script.js", content: "// js content" }, + { filePath: "text.txt", content: "// no specifier content" }, + ]; + expect(parseV0Output(input)).toEqual(expected); + }); +}); + +describe("createProjectFromV0Output", () => { + const mockCwd = "/test/cwd"; + const mockProjectName = "my-test-project"; + const mockBasePath = `${mockCwd}/generated_projects`; + const mockProjectPath = `${mockBasePath}/${mockProjectName}`; + + beforeEach(() => { + (fs.mkdirSync as jest.Mock).mockReset(); + (fs.writeFileSync as jest.Mock).mockReset(); + (fs.existsSync as jest.Mock).mockReset(); + (path.join as jest.Mock).mockImplementation((...args) => args.join("/")); + (process.cwd as jest.Mock) = jest.fn(() => mockCwd); + }); + + it("should create files and directories for valid input", async () => { + const v0ApiOutput = ` +\`\`\`ts file="src/index.ts" +console.log('hello'); +\`\`\` +\`\`\`md file="README.md" +# Test +\`\`\` +`; + (fs.existsSync as jest.Mock).mockReturnValue(false); + + const result = await createProjectFromV0Output(v0ApiOutput, mockProjectName); + + expect(fs.existsSync).toHaveBeenCalledWith(mockProjectPath); + expect(fs.mkdirSync).toHaveBeenCalledWith(mockProjectPath, { recursive: true }); + expect(fs.existsSync).toHaveBeenCalledWith(path.join(mockProjectPath, "src")); + expect(fs.mkdirSync).toHaveBeenCalledWith(path.join(mockProjectPath, "src"), { recursive: true }); + expect(fs.writeFileSync).toHaveBeenCalledWith( + path.join(mockProjectPath, "src/index.ts"), + "console.log('hello');" + ); + expect(fs.writeFileSync).toHaveBeenCalledWith( + path.join(mockProjectPath, "README.md"), + "# Test" + ); + expect(result).toEqual({ + success: true, + message: `Project ${mockProjectName} created successfully at ${mockProjectPath}`, + projectPath: mockProjectPath, + }); + }); + + it("should return error if parseV0Output returns empty array", async () => { + const v0ApiOutput = "no valid blocks"; + const result = await createProjectFromV0Output(v0ApiOutput, mockProjectName); + expect(fs.mkdirSync).not.toHaveBeenCalled(); + expect(fs.writeFileSync).not.toHaveBeenCalled(); + expect(result).toEqual({ + success: false, + message: "No files found in the API output or failed to parse.", + projectPath: null, + }); + }); + + it("should return error if file operation fails", async () => { + const v0ApiOutput = `\`\`\`ts file="src/index.ts"\nconsole.log('fail');\`\`\``; + (fs.existsSync as jest.Mock).mockReturnValue(false); + (fs.writeFileSync as jest.Mock).mockImplementation(() => { + throw new Error("Disk full"); + }); + + const result = await createProjectFromV0Output(v0ApiOutput, mockProjectName); + expect(result).toEqual({ + success: false, + message: "Error creating project: Disk full", + projectPath: null, + }); + }); +}); + +describe("createGithubRepoAndPush", () => { + const mockProjectName = "my-git-project"; + const mockProjectPath = `/generated_projects/${mockProjectName}`; + const mockGithubToken = "fake-token"; + const mockRepoUrl = `https://github.com/user/${mockProjectName}.git`; + + let mockExecSync: jest.Mock; + let mockCreateForAuthenticatedUser: jest.Mock; + + beforeEach(() => { + mockExecSync = execSync as jest.Mock; + mockExecSync.mockReset().mockReturnValue(""); // Default success + + mockCreateForAuthenticatedUser = jest.fn().mockResolvedValue({ + data: { clone_url: mockRepoUrl }, + }); + (Octokit as jest.Mock).mockImplementation(() => ({ + rest: { + repos: { + createForAuthenticatedUser: mockCreateForAuthenticatedUser, + }, + }, + })); + }); + + it("should successfully create repo and push", async () => { + const result = await createGithubRepoAndPush( + mockProjectName, + mockProjectPath, + mockGithubToken + ); + + expect(mockExecSync).toHaveBeenCalledTimes(6); // init, checkout, add, commit, remote add, push + expect(mockExecSync).toHaveBeenNthCalledWith(1, "git init", { cwd: mockProjectPath, stdio: "pipe" }); + expect(mockExecSync).toHaveBeenNthCalledWith(2, "git checkout -b main", { cwd: mockProjectPath, stdio: "pipe" }); + expect(mockExecSync).toHaveBeenNthCalledWith(3, "git add .", { cwd: mockProjectPath, stdio: "pipe" }); + expect(mockExecSync).toHaveBeenNthCalledWith(4, `git commit -m "Initial commit: scaffold project ${mockProjectName}"`, { cwd: mockProjectPath, stdio: "pipe" }); + expect(mockExecSync).toHaveBeenNthCalledWith(5, `git remote add origin ${mockRepoUrl}`, { cwd: mockProjectPath, stdio: "pipe" }); + expect(mockExecSync).toHaveBeenNthCalledWith(6, "git push -u origin main", { cwd: mockProjectPath, stdio: "pipe" }); + + expect(mockCreateForAuthenticatedUser).toHaveBeenCalledWith({ + name: mockProjectName, + private: true, + }); + expect(result).toEqual({ + success: true, + message: "Successfully created GitHub repository and pushed initial commit.", + repoUrl: mockRepoUrl, + }); + }); + + it("should handle git init failure", async () => { + mockExecSync.mockImplementation((command: string) => { + if (command === "git init") throw new Error("git init failed"); + return ""; + }); + const result = await createGithubRepoAndPush(mockProjectName, mockProjectPath, mockGithubToken); + expect(result).toEqual({ + success: false, + message: "Failed to initialize git repository or commit files: git init failed", + repoUrl: null, + }); + }); + + it("should handle GitHub API failure", async () => { + mockCreateForAuthenticatedUser.mockRejectedValue(new Error("GitHub API error")); + const result = await createGithubRepoAndPush(mockProjectName, mockProjectPath, mockGithubToken); + expect(result).toEqual({ + success: false, + message: "Failed to create GitHub repository: GitHub API error", + repoUrl: null, + }); + }); + + it("should handle git push failure", async () => { + mockExecSync.mockImplementation((command: string) => { + if (command === "git push -u origin main") throw new Error("git push failed"); + return ""; + }); + const result = await createGithubRepoAndPush(mockProjectName, mockProjectPath, mockGithubToken); + expect(result).toEqual({ + success: false, + message: "Failed to push to GitHub repository: git push failed", + repoUrl: mockRepoUrl, + }); + expect(mockExecSync).toHaveBeenCalledWith("git init", expect.anything()); + expect(mockExecSync).toHaveBeenCalledWith("git add .", expect.anything()); + expect(mockExecSync).toHaveBeenCalledWith(expect.stringContaining("git commit"), expect.anything()); + expect(mockExecSync).toHaveBeenCalledWith(expect.stringContaining("git remote add origin"), expect.anything()); + }); +}); diff --git a/app/actions/v0/v0Actions.ts b/app/actions/v0/v0Actions.ts new file mode 100644 index 0000000..05f3f8f --- /dev/null +++ b/app/actions/v0/v0Actions.ts @@ -0,0 +1,209 @@ +"use server"; + +import { generateText } from "ai"; +import { vercel } from "@ai-sdk/vercel"; +import { scrapeAndAnalyzeWebsite } from "app/actions/scraper/scraperActions"; + +// Interface for function parameters (for clarity, TypeScript specific) +// interface GenerateV0TextParams { +// projectDescription: string; +// url: string; // Will be used in a subsequent step +// workspaceId: string; // Will be used in a subsequent step +// } + +export async function generateV0Text({ + projectDescription, + url, + workspaceId, +}: { + projectDescription: string; + url: string; + workspaceId: string; +}) { + const apiKey = process.env.V0_API_KEY; + + if (!apiKey) { + return { + success: false, + data: null, + error: "V0_API_KEY is not configured.", + }; + } + + let siteConfigData; + try { + siteConfigData = await scrapeAndAnalyzeWebsite(url, workspaceId); + } catch (error: any) { + return { + success: false, + data: null, + error: "Failed to fetch site configuration: " + error.message, + }; + } + + const siteConfigJsonString = JSON.stringify(siteConfigData, null, 2); + // siteConfigJsonString will be used in the prompt in the next step. + + try { + const baseTemplate = `Develop a Next.js website that dynamically renders content based on a JSON configuration file. The website should feature a \`site.config\` file to manage site-wide parameters. The JSON response will provide the data to populate various components. The website should be designed to be responsive and accessible, ensuring a seamless user experience across different devices and browsers. The \`site.config\` file should include parameters such as site title, description, and any other global settings. The website should parse the JSON data and use it to render the necessary components, such as navigation, content sections, and footers. The design should be clean and modern, with a focus on usability and readability. The website should handle potential errors gracefully, providing informative messages to the user if any issues arise during data fetching or rendering. The JSON response will contain the data for the website's content, including text, images, and links. The website should be able to update the content dynamically without requiring code changes. The website should follow best practices for SEO, including proper use of meta tags and semantic HTML. The website should be deployed on Vercel.`; + + const siteConfigIntegration = `Here is the JSON data (SiteConfig) to be used for the website's content and configuration: +${siteConfigJsonString}`; + + const userCustomization = `Additional project requirements or focus areas: +${projectDescription}`; + + const outputFormatInstruction = `Ensure the output is a complete Next.js project structure (files and folders), with each file clearly delineated with its path in a markdown-like format (e.g., \`\`\`tsx file="path/to/file.tsx" ... \`\`\`). Include TypeScript, Tailwind CSS, and shadcn/ui (or other sensible defaults if not specified in the description or site config).`; + + const finalPrompt = `${baseTemplate}\n\n${siteConfigIntegration}\n\n${userCustomization}\n\n${outputFormatInstruction}`; + + const { text } = await generateText({ + model: vercel("v0-1.0-md"), + prompt: finalPrompt, + headers: { + Authorization: `Bearer ${apiKey}`, + }, + }); + return { success: true, data: text, error: null }; + } catch (error: any) { + return { + success: false, + data: null, + error: "Failed to generate text from v0 API: " + error.message, + }; + } +} + +import { Octokit } from "octokit"; +import { execSync } from "child_process"; + +export async function createGithubRepoAndPush( + projectName: string, + projectPath: string, + githubToken: string +) { + // 1. Git Initialization and Commit + try { + execSync("git init", { cwd: projectPath, stdio: "pipe" }); + execSync("git checkout -b main", { cwd: projectPath, stdio: "pipe" }); // Ensure 'main' branch + execSync("git add .", { cwd: projectPath, stdio: "pipe" }); + execSync(`git commit -m "Initial commit: scaffold project ${projectName}"`, { + cwd: projectPath, + stdio: "pipe", + }); + } catch (error: any) { + return { + success: false, + message: + "Failed to initialize git repository or commit files: " + error.message, + repoUrl: null, + }; + } + + // 2. GitHub Repository Creation + const octokit = new Octokit({ auth: githubToken }); + let repoUrl: string; + + try { + const repoResponse = await octokit.rest.repos.createForAuthenticatedUser({ + name: projectName, + private: true, // Or allow user to choose + }); + repoUrl = repoResponse.data.clone_url; + } catch (error: any) { + return { + success: false, + message: "Failed to create GitHub repository: " + error.message, + repoUrl: null, + }; + } + + // 3. Pushing to GitHub + try { + execSync(`git remote add origin ${repoUrl}`, { cwd: projectPath, stdio: "pipe" }); + execSync("git push -u origin main", { cwd: projectPath, stdio: "pipe" }); + } catch (error: any) { + return { + success: false, + message: "Failed to push to GitHub repository: " + error.message, + repoUrl: repoUrl, // Include repoUrl as it was successfully created + }; + } + + // 4. Success Response + return { + success: true, + message: "Successfully created GitHub repository and pushed initial commit.", + repoUrl: repoUrl, + }; +} + +import fs from "fs"; +import path from "path"; + +// Interface for the parsed file structure (for clarity, TypeScript specific) +// interface ParsedFile { +// filePath: string; +// content: string; +// } + +function parseV0Output(v0ApiOutput: string): { filePath: string; content: string }[] { + const files: { filePath: string; content: string }[] = []; + // Regex to capture: optional language, file path, and content + const regex = /```(\w+)?\s*file="([^"]+)"\s*\n([\s\S]*?)\n```/g; + let match; + + while ((match = regex.exec(v0ApiOutput)) !== null) { + // match[1] is the optional language (e.g., tsx, json) - currently not used but captured + // match[2] is the filePath + // match[3] is the content + if (match[2] && match[3]) { + files.push({ + filePath: match[2].trim(), + content: match[3].trim(), + }); + } + } + return files; +} + +export async function createProjectFromV0Output( + v0ApiOutput: string, + projectName: string +) { + const basePath = path.join(process.cwd(), "generated_projects"); + const projectPath = path.join(basePath, projectName); + + try { + const filesToCreate = parseV0Output(v0ApiOutput); + + if (filesToCreate.length === 0) { + return { success: false, message: "No files found in the API output or failed to parse.", projectPath: null }; + } + + if (!fs.existsSync(projectPath)) { + fs.mkdirSync(projectPath, { recursive: true }); + } + + for (const file of filesToCreate) { + const fullPath = path.join(projectPath, file.filePath); + const dirName = path.dirname(fullPath); + if (!fs.existsSync(dirName)) { + fs.mkdirSync(dirName, { recursive: true }); + } + fs.writeFileSync(fullPath, file.content); + } + + return { + success: true, + message: `Project ${projectName} created successfully at ${projectPath}`, + projectPath: projectPath, + }; + } catch (error: any) { + return { + success: false, + message: "Error creating project: " + error.message, + projectPath: null, + }; + } +} diff --git a/app/dashboard/v0-tester/page.tsx b/app/dashboard/v0-tester/page.tsx new file mode 100644 index 0000000..c232f52 --- /dev/null +++ b/app/dashboard/v0-tester/page.tsx @@ -0,0 +1,18 @@ +// app/dashboard/v0-tester/page.tsx +import { getCurrentUserWorkspaceDetails } from "@/app/actions/database/workspaceActions"; +import V0TesterClientContent from "@/components/v0-tester/V0TesterClientContent"; // We will create this next + +export default async function V0TesterPage() { + const workspaceDetails = await getCurrentUserWorkspaceDetails(); + + // We might not need promptUsageCount for the v0 tester, + // but workspaceId is useful for the scraper part. + // You can decide if any initial checks like promptUsageCount are relevant here. + // For now, let's assume no usage limit for this new feature. + + return ( ++ Test the v0 API project generation flow. +
+