fix: code review issues

apps/dokploy/components/dashboard/project/ai/step-four.tsx

@@ -1,18 +1,14 @@
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import dynamic from "next/dynamic";
 import ReactMarkdown from "react-markdown";
+import {CodeEditor} from "@/components/shared/code-editor";
 
-const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
-	ssr: false,
-});
-
-export function StepFour({
+export const StepFour = ({
 	prevStep,
 	templateInfo,
 	setOpen,
 	setTemplateInfo,
-}: any) {
+}: any) => {
 	const handleSubmit = () => {
 		setTemplateInfo(templateInfo); // Update the template info
 		setOpen(false);
@@ -40,20 +36,11 @@ export function StepFour({
 							</div>
 							<div>
 								<h3 className="text-md font-semibold">Docker Compose</h3>
-								<MonacoEditor
-									height="200px"
-									language="yaml"
-									theme="vs-dark"
+								<CodeEditor
+									lineWrapping
 									value={templateInfo.details.dockerCompose}
-									options={{
-										minimap: { enabled: false },
-										scrollBeyondLastLine: false,
-										fontSize: 14,
-										lineNumbers: "on",
-										readOnly: true,
-										wordWrap: "on",
-										automaticLayout: true,
-									}}
+									disabled
+									className="font-mono"
 								/>
 							</div>
 							<div>

apps/dokploy/components/dashboard/project/ai/step-one.tsx

@@ -13,7 +13,7 @@ const examples = [
 	"Sendgrid service opensource analogue",
 ];
 
-export function StepOne({ nextStep, setTemplateInfo, templateInfo }: any) {
+export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
 	const [userInput, setUserInput] = useState(templateInfo.userInput);
 
 	const handleNext = () => {

apps/dokploy/components/dashboard/project/ai/step-three.tsx

@@ -15,12 +15,12 @@ import {
 import { api } from "@/utils/api";
 import { useState } from "react";
 
-export function StepThree({
+export const StepThree = ({
 	nextStep,
 	prevStep,
 	templateInfo,
 	setTemplateInfo,
-}: any) {
+}: any) => {
 	const [name, setName] = useState(templateInfo.name);
 	const [server, setServer] = useState(templateInfo.server);
 	const { data: servers } = api.server.withSSHKey.useQuery();

apps/dokploy/components/dashboard/project/ai/step-two.tsx

@@ -11,14 +11,10 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { api } from "@/utils/api";
 import { Bot, Eye, EyeOff, PlusCircle, Trash2 } from "lucide-react";
-import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { toast } from "sonner";
-
-const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
-	ssr: false,
-});
+import {CodeEditor} from "@/components/shared/code-editor";
 
 interface EnvVariable {
 	name: string;
@@ -34,12 +30,12 @@ interface TemplateInfo {
 	envVariables: EnvVariable[];
 }
 
-export function StepTwo({
+export const StepTwo = ({
 	nextStep,
 	prevStep,
 	templateInfo,
 	setTemplateInfo,
-}: any) {
+}: any) => {
 	const [suggestions, setSuggestions] = useState<Array<TemplateInfo>>([]);
 	const [selectedVariant, setSelectedVariant] = useState("");
 	const [dockerCompose, setDockerCompose] = useState("");
@@ -203,26 +199,11 @@ export function StepTwo({
 									<AccordionItem value="docker-compose">
 										<AccordionTrigger>Docker Compose</AccordionTrigger>
 										<AccordionContent>
-											<div className="h-[400px] w-full rounded-md border overflow-hidden">
-												<MonacoEditor
-													height="100%"
-													language="yaml"
-													theme="vs-dark"
-													value={dockerCompose}
-													onChange={(value) =>
-														setDockerCompose(value as string)
-													}
-													options={{
-														minimap: { enabled: false },
-														scrollBeyondLastLine: false,
-														fontSize: 14,
-														lineNumbers: "on",
-														readOnly: false,
-														wordWrap: "on",
-														automaticLayout: true,
-													}}
-												/>
-											</div>
+											<CodeEditor
+												value={dockerCompose}
+												className="font-mono"
+												onChange={(value) => setDockerCompose(value)}
+											/>
 										</AccordionContent>
 									</AccordionItem>
 									<AccordionItem value="env-variables">

apps/dokploy/components/dashboard/project/ai/template-generator.tsx

@@ -36,7 +36,7 @@ interface Props {
 	projectName?: string;
 }
 
-export function TemplateGenerator({ projectId }: Props) {
+export const TemplateGenerator = ({ projectId }: Props) => {
 	const [open, setOpen] = useState(false);
 	const [step, setStep] = useState(1);
 	const { data: aiSettings } = api.ai.get.useQuery();

apps/dokploy/components/dashboard/settings/ai-form.tsx

@@ -51,7 +51,7 @@ interface Model {
 	owned_by: string;
 }
 
-export function AiForm() {
+export const AiForm = ()=>  {
 	const [models, setModels] = useState<Model[]>([]);
 	const [isLoadingModels, setIsLoadingModels] = useState(false);
 	const [error, setError] = useState<string | null>(null);

apps/dokploy/package.json

@@ -44,7 +44,6 @@
 		"@dokploy/server": "workspace:*",
 		"@dokploy/trpc-openapi": "0.0.4",
 		"@hookform/resolvers": "^3.9.0",
-		"@monaco-editor/react": "^4.6.0",
 		"@octokit/webhooks": "^13.2.7",
 		"@radix-ui/react-accordion": "1.1.2",
 		"@radix-ui/react-alert-dialog": "^1.0.5",
@@ -167,6 +166,8 @@
 		]
 	},
 	"commitlint": {
-		"extends": ["@commitlint/config-conventional"]
+		"extends": [
+			"@commitlint/config-conventional"
+		]
 	}
 }