fix: server/client error on some dialogs.

src/components/wrappers/common/empty-state-placeholder.tsx

@@ -1,14 +1,14 @@
 import Link from "next/link";
 import {cn} from "@/lib/utils";
 import {Plus} from "lucide-react";
-import {forwardRef} from "react";
+import {forwardRef, HTMLAttributes} from "react";
 
 type EmptyStatePlaceholderProps = {
     url?: string;
     onClick?: () => void;
     text: string;
     className?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
 
 export const EmptyStatePlaceholder = forwardRef<HTMLDivElement, EmptyStatePlaceholderProps>(({
                                           url,

src/features/agents/components/agent.dialog.tsx

@@ -8,35 +8,55 @@ import {
     DialogTrigger,
 } from "@/components/ui/dialog";
 import {AgentForm} from "@/features/agents/components/agent.form";
-import {useState} from "react";
-import {Button} from "@/components/ui/button";
+import {Button, buttonVariants} from "@/components/ui/button";
 import {Plus} from "lucide-react";
 import {AgentType} from "@/features/agents/agents.schema";
+import {GearIcon} from "@radix-ui/react-icons";
+import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
+import {useState} from "react";
 
 type AgentDialogProps = {
-    children?: React.ReactNode;
     agent?: AgentType & { id: string };
+    typeTrigger: "edit" | "empty" | "create";
 };
 
-export const AgentDialog = ({children, agent}: AgentDialogProps) => {
+
+export const AgentDialog = ({agent, typeTrigger}: AgentDialogProps) => {
     const [open, setOpen] = useState(false);
     const isEdit = !!agent;
 
+    const getTrigger = () => {
+        switch (typeTrigger) {
+            case "edit":
+                return (
+                    <div className={buttonVariants({variant: "outline", className: "cursor-pointer"})}>
+                        <GearIcon className="w-7 h-7"/>
+                    </div>
+                );
+            case "empty":
+                return <EmptyStatePlaceholder text="Create new Agent"/>;
+            case "create":
+                return <Button><Plus className="mr-2 h-4 w-4"/> Create Agent</Button>;
+            default:
+                return <Button><Plus className="mr-2 h-4 w-4"/> Create Agent</Button>;
+        }
+    };
+
     return (
         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                {children ? children : <Button><Plus className="mr-2 h-4 w-4"/> Create Agent</Button>}
-            </DialogTrigger>
-            <DialogContent>
+            <DialogTrigger asChild>{getTrigger()}</DialogTrigger>
+            <DialogContent
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
                 <DialogHeader>
                     <DialogTitle>{isEdit ? `Edit ${agent.name}` : "Create new agent"}</DialogTitle>
                 </DialogHeader>
-                <AgentForm 
-                    onSuccess={() => setOpen(false)} 
+                <AgentForm
+                    onSuccess={() => setOpen(false)}
                     defaultValues={agent}
                     agentId={agent?.id}
                 />
             </DialogContent>
         </Dialog>
     );
-};
+};