diff --git a/apps/dokploy/components/dashboard/project/add-ai-assistant.tsx b/apps/dokploy/components/dashboard/project/add-ai-assistant.tsx new file mode 100644 index 00000000..2bb47618 --- /dev/null +++ b/apps/dokploy/components/dashboard/project/add-ai-assistant.tsx @@ -0,0 +1,10 @@ +import { TemplateGenerator } from "@/components/dashboard/project/ai/template-generator"; + +interface Props { + projectId: string; + projectName?: string; +} + +export const AddAiAssistant = ({ projectId }: Props) => { + return ; +}; diff --git a/apps/dokploy/components/dashboard/project/ai/step-four.tsx b/apps/dokploy/components/dashboard/project/ai/step-four.tsx new file mode 100644 index 00000000..276869f7 --- /dev/null +++ b/apps/dokploy/components/dashboard/project/ai/step-four.tsx @@ -0,0 +1,92 @@ +import { Button } from "@/components/ui/button"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import dynamic from "next/dynamic"; +import ReactMarkdown from "react-markdown"; + +const MonacoEditor = dynamic(() => import("@monaco-editor/react"), { + ssr: false, +}); + +export function StepFour({ + prevStep, + templateInfo, + setOpen, + setTemplateInfo, +}: any) { + const handleSubmit = () => { + setTemplateInfo(templateInfo); // Update the template info + setOpen(false); + }; + + return ( +
+
+
+

Step 4: Review and Finalize

+ +
+
+ + {templateInfo.details.description} + +
+
+

Name

+

{templateInfo.name}

+
+
+

Server

+

{templateInfo.server || "localhost"}

+
+
+

Docker Compose

+ +
+
+

Environment Variables

+
    + {templateInfo.details.envVariables.map( + ( + env: { + name: string; + value: string; + }, + index: number, + ) => ( +
  • + {env.name}: + {env.value} +
  • + ), + )} +
+
+
+
+
+
+
+
+ + +
+
+
+ ); +} diff --git a/apps/dokploy/components/dashboard/project/ai/step-one.tsx b/apps/dokploy/components/dashboard/project/ai/step-one.tsx new file mode 100644 index 00000000..704816e2 --- /dev/null +++ b/apps/dokploy/components/dashboard/project/ai/step-one.tsx @@ -0,0 +1,69 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { useState } from "react"; + +const examples = [ + "Make a personal blog", + "Add a photo studio portfolio", + "Create a personal ad blocker", + "Build a social media dashboard", + "Sendgrid service opensource analogue", +]; + +export function StepOne({ nextStep, setTemplateInfo, templateInfo }: any) { + const [userInput, setUserInput] = useState(templateInfo.userInput); + + const handleNext = () => { + setTemplateInfo({ ...templateInfo, userInput }); + nextStep(); + }; + + const handleExampleClick = (example: string) => { + setUserInput(example); + }; + + return ( +
+
+
+

Step 1: Describe Your Needs

+
+ +