fix: server/client error on some dialogs.

app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx

@@ -1,8 +1,5 @@
-import Link from "next/link";
-import {GearIcon} from "@radix-ui/react-icons";
 import {PageParams} from "@/types/next";
-import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
+import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
-import {buttonVariants} from "@/components/ui/button";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {eq} from "drizzle-orm";
@@ -39,18 +36,14 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
                     <div className="min-w-full md:min-w-fit ">
                         {capitalizeFirstLetter(agent.name)}
                     </div>
-                        <div className="flex items-center gap-2 md:justify-between w-full ">
+                    <div className="flex items-center gap-2 md:justify-between w-full ">
-                            <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2">
-                                <AgentDialog agent={agent as AgentType & { id: string }}>
+                            <AgentDialog agent={agent as AgentType & { id: string }} typeTrigger={"edit"}/>
-                                    <div className={buttonVariants({variant: "outline", className: "cursor-pointer"})}>
-                                        <GearIcon className="w-7 h-7"/>
-                                    </div>
-                                </AgentDialog>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
-                            </div>
                         </div>
+                        <div className="flex items-center gap-2">
+                            <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
+                        </div>
+                    </div>
                 </PageTitle>
             </div>
 

app/(customer)/dashboard/(admin)/agents/page.tsx

@@ -1,13 +1,11 @@
 import {PageParams} from "@/types/next";
 import {AgentCard} from "@/components/wrappers/dashboard/agent/agent-card/agent-card";
 import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
-import {Button} from "@/components/ui/button";
 import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
 import {notFound} from "next/navigation";
 import {db} from "@/db";
 import * as drizzleDb from "@/db";
 import {desc, eq, not} from "drizzle-orm";
-import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
 import {Metadata} from "next";
 import {AgentDialog} from "@/features/agents/components/agent.dialog";
 
@@ -25,7 +23,6 @@ export default async function RoutePage(props: PageParams<{}>) {
         orderBy: (fields) => desc(fields.lastContact),
     });
 
-
     if (!agents) {
         notFound();
     }
@@ -36,9 +33,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 <PageTitle>Agents</PageTitle>
                 {agents.length > 0 && (
                     <PageActions>
-                         <AgentDialog>
+                         <AgentDialog typeTrigger={"create"} />
-                            <Button>+ Create Agent</Button>
-                        </AgentDialog>
                     </PageActions>
                 )}
             </PageHeader>
@@ -46,11 +41,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 {agents.length > 0 ? (
                     <CardsWithPagination data={agents} cardItem={AgentCard} cardsPerPage={4} numberOfColumns={1}/>
                 ) : (
-                     <AgentDialog>
+                     <AgentDialog typeTrigger="empty"/>
-                        <EmptyStatePlaceholder
-                            text={"Create new Agent"}
-                        />
-                    </AgentDialog>
                 )}
             </PageContent>
         </Page>

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, buttonVariants} from "@/components/ui/button";
-import {Button} 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>
+            <DialogTrigger asChild>{getTrigger()}</DialogTrigger>
-                {children ? children : <Button><Plus className="mr-2 h-4 w-4"/> Create Agent</Button>}
+            <DialogContent
-            </DialogTrigger>
+                onOpenAutoFocus={(e) => e.preventDefault()}
-            <DialogContent>
+            >
                 <DialogHeader>
                     <DialogTitle>{isEdit ? `Edit ${agent.name}` : "Create new agent"}</DialogTitle>
                 </DialogHeader>
-                <AgentForm 
+                <AgentForm
-                    onSuccess={() => setOpen(false)} 
+                    onSuccess={() => setOpen(false)}
                     defaultValues={agent}
                     agentId={agent?.id}
                 />
             </DialogContent>
         </Dialog>
     );
-};
+};