From 87546b45585800175df91eeec471ba2c83f58a9d Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Sat, 18 Jan 2025 22:55:35 -0600 Subject: [PATCH] feat: add domains --- .../dashboard/project/ai/step-four.tsx | 90 ---------- .../dashboard/project/ai/step-one.tsx | 59 ++++++- .../dashboard/project/ai/step-three.tsx | 161 ++++++++++-------- .../dashboard/project/ai/step-two.tsx | 152 +++++++++++------ .../project/ai/template-generator.tsx | 47 +++-- .../components/dashboard/settings/ai-form.tsx | 2 +- .../dashboard/settings/handle-ai.tsx | 28 +-- apps/dokploy/components/layouts/side.tsx | 2 +- apps/dokploy/server/api/routers/ai.ts | 28 ++- packages/server/src/db/schema/admin.ts | 154 ++++++++--------- packages/server/src/db/schema/ai.ts | 13 +- packages/server/src/services/ai.ts | 31 +++- 12 files changed, 406 insertions(+), 361 deletions(-) delete mode 100644 apps/dokploy/components/dashboard/project/ai/step-four.tsx diff --git a/apps/dokploy/components/dashboard/project/ai/step-four.tsx b/apps/dokploy/components/dashboard/project/ai/step-four.tsx deleted file mode 100644 index 18ec238a..00000000 --- a/apps/dokploy/components/dashboard/project/ai/step-four.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { CodeEditor } from "@/components/shared/code-editor"; -import { Button } from "@/components/ui/button"; -import { ScrollArea } from "@/components/ui/scroll-area"; -import ReactMarkdown from "react-markdown"; -import type { StepProps } from "./step-two"; - -export const StepFour = ({ - prevStep, - templateInfo, - setOpen, - setTemplateInfo, -}: StepProps) => { - const handleSubmit = () => { - setTemplateInfo(templateInfo); // Update the template info - setOpen(false); - }; - - return ( -
-
-
-

Step 4: Review and Finalize

- -
-
-

Name

-

- {templateInfo?.details?.name} -

-
-
-

Description

- - {templateInfo?.details?.description} - -
-
-

Server

-

- {templateInfo?.serverId || "Dokploy Server"} -

-
-
-

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 index 23044ea4..56156bbe 100644 --- a/apps/dokploy/components/dashboard/project/ai/step-one.tsx +++ b/apps/dokploy/components/dashboard/project/ai/step-one.tsx @@ -3,7 +3,17 @@ import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; import { useState } from "react"; +import { api } from "@/utils/api"; const examples = [ "Make a personal blog", @@ -16,8 +26,14 @@ const examples = [ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => { const [userInput, setUserInput] = useState(templateInfo.userInput); + // Get servers from the API + const { data: servers } = api.server.withSSHKey.useQuery(); + const handleNext = () => { - setTemplateInfo({ ...templateInfo, userInput }); + setTemplateInfo({ + ...templateInfo, + userInput, + }); nextStep(); }; @@ -26,9 +42,9 @@ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => { }; return ( -
-
-
+
+
+

Step 1: Describe Your Needs

@@ -40,6 +56,39 @@ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => { className="min-h-[100px]" />
+ +
+ + +
+
@@ -57,7 +106,7 @@ export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
-
+
- +
diff --git a/apps/dokploy/components/dashboard/project/ai/step-two.tsx b/apps/dokploy/components/dashboard/project/ai/step-two.tsx index ded7ba65..d87f9519 100644 --- a/apps/dokploy/components/dashboard/project/ai/step-two.tsx +++ b/apps/dokploy/components/dashboard/project/ai/step-two.tsx @@ -40,7 +40,8 @@ export const StepTwo = ({ useEffect(() => { mutateAsync({ aiId: templateInfo.aiId, - prompt: templateInfo.userInput, + serverId: templateInfo.server?.serverId || "", + input: templateInfo.userInput, }) .then((data) => { console.log(data); @@ -62,59 +63,98 @@ export const StepTwo = ({ nextStep(); }; - const handleEnvVariableChange = ( - index: number, - field: string, - value: string, - ) => { - // const updatedEnvVariables = [...envVariables]; - // if (updatedEnvVariables[index]) { - // updatedEnvVariables[index] = { - // ...updatedEnvVariables[index], - // [field]: value, - // }; - // setEnvVariables(updatedEnvVariables); - // } - }; - - // const addEnvVariable = () => { - // setEnvVariables([...envVariables, { name: "", value: "" }]); - // setShowValues((prev) => ({ ...prev, "": false })); - // }; - - // const removeEnvVariable = (index: number) => { - // const updatedEnvVariables = envVariables.filter((_, i) => i !== index); - // setEnvVariables(updatedEnvVariables); - // }; - - // const handleDomainChange = ( - // index: number, - // field: string, - // value: string | number, - // ) => { - // const updatedDomains = [...domains]; - // if (updatedDomains[index]) { - // updatedDomains[index] = { - // ...updatedDomains[index], - // [field]: value, - // }; - // setDomains(updatedDomains); - // } - // }; - - // const addDomain = () => { - // setDomains([...domains, { host: "", port: 0, serviceName: "" }]); - // }; - - // const removeDomain = (index: number) => { - // const updatedDomains = domains.filter((_, i) => i !== index); - // setDomains(updatedDomains); - // }; - const toggleShowValue = (name: string) => { setShowValues((prev) => ({ ...prev, [name]: !prev[name] })); }; + const handleEnvVariableChange = ( + index: number, + field: "name" | "value", + value: string, + ) => { + if (!selectedVariant) return; + + const updatedEnvVariables = [...selectedVariant.envVariables]; + updatedEnvVariables[index] = { + ...updatedEnvVariables[index], + [field]: value, + }; + + setSelectedVariant({ + ...selectedVariant, + envVariables: updatedEnvVariables, + }); + }; + + const removeEnvVariable = (index: number) => { + if (!selectedVariant) return; + + const updatedEnvVariables = selectedVariant.envVariables.filter( + (_, i) => i !== index, + ); + + setSelectedVariant({ + ...selectedVariant, + envVariables: updatedEnvVariables, + }); + }; + + const handleDomainChange = ( + index: number, + field: "host" | "port" | "serviceName", + value: string | number, + ) => { + if (!selectedVariant) return; + + const updatedDomains = [...selectedVariant.domains]; + updatedDomains[index] = { + ...updatedDomains[index], + [field]: value, + }; + + setSelectedVariant({ + ...selectedVariant, + domains: updatedDomains, + }); + }; + + const removeDomain = (index: number) => { + if (!selectedVariant) return; + + const updatedDomains = selectedVariant.domains.filter( + (_, i) => i !== index, + ); + + setSelectedVariant({ + ...selectedVariant, + domains: updatedDomains, + }); + }; + + const addEnvVariable = () => { + if (!selectedVariant) return; + + setSelectedVariant({ + ...selectedVariant, + envVariables: [ + ...selectedVariant.envVariables, + { name: "", value: "" }, + ], + }); + }; + + const addDomain = () => { + if (!selectedVariant) return; + + setSelectedVariant({ + ...selectedVariant, + domains: [ + ...selectedVariant.domains, + { host: "", port: 80, serviceName: "" }, + ], + }); + }; + if (isLoading) { return (
@@ -131,7 +171,7 @@ export const StepTwo = ({ } return ( -
+

Step 2: Choose a Variant

@@ -207,7 +247,7 @@ export const StepTwo = ({ Environment Variables - +
{selectedVariant?.envVariables.map((env, index) => (
Add Variable @@ -308,7 +348,7 @@ export const StepTwo = ({ handleDomainChange( index, "port", - parseInt(e.target.value), + Number.parseInt(e.target.value), ) } placeholder="Port" @@ -341,7 +381,7 @@ export const StepTwo = ({ variant="outline" size="sm" className="mt-2" - // onClick={addDomain} + onClick={addDomain} > Add Domain @@ -356,7 +396,7 @@ export const StepTwo = ({ )}
-
+