From d3c2e31d15237b9e314761a927dd9670617907ba Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Wed, 29 Oct 2025 15:02:56 +0000 Subject: [PATCH] Refactor: Make system responsive --- src/components/agents/CreateAgentDialog.tsx | 2 +- src/components/layout/AppLayout.tsx | 4 +- src/components/layout/MobileNav.tsx | 74 ++++++++ src/components/prompts/CreatePromptDialog.tsx | 2 +- src/components/prompts/EditPromptDialog.tsx | 2 +- .../prompts/PromptHistoryDialog.tsx | 2 +- src/pages/Agents.tsx | 177 ++++++++++++------ src/pages/Prompts.tsx | 53 +++++- src/pages/TestPrompt.tsx | 6 +- 9 files changed, 248 insertions(+), 74 deletions(-) create mode 100644 src/components/layout/MobileNav.tsx diff --git a/src/components/agents/CreateAgentDialog.tsx b/src/components/agents/CreateAgentDialog.tsx index 1c7ed4e..1263aa1 100644 --- a/src/components/agents/CreateAgentDialog.tsx +++ b/src/components/agents/CreateAgentDialog.tsx @@ -41,7 +41,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps return ( - + Criar Novo Agente diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx index 6951437..b1d3963 100644 --- a/src/components/layout/AppLayout.tsx +++ b/src/components/layout/AppLayout.tsx @@ -1,11 +1,13 @@ import { AppSidebar } from "./AppSidebar"; +import { MobileNav } from "./MobileNav"; import { Outlet } from "react-router-dom"; export function AppLayout() { return (
+ -
+
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx new file mode 100644 index 0000000..efa09f4 --- /dev/null +++ b/src/components/layout/MobileNav.tsx @@ -0,0 +1,74 @@ +import { useState } from "react"; +import { NavLink } from "react-router-dom"; +import { Bot, FileText, TestTube, Menu, X } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { ThemeToggle } from "./ThemeToggle"; + +const menuItems = [ + { title: "Agentes", url: "/agents", icon: Bot }, + { title: "Prompts", url: "/", icon: FileText }, + { title: "Testar Prompt", url: "/test", icon: TestTube }, +]; + +export function MobileNav() { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + {/* Mobile Header */} +
+
+
+ HX +
+

HGTX PromptLab

+
+
+ + +
+
+ + {/* Mobile Menu Overlay */} + {isOpen && ( + <> +
setIsOpen(false)} + /> + + + )} + + ); +} diff --git a/src/components/prompts/CreatePromptDialog.tsx b/src/components/prompts/CreatePromptDialog.tsx index 2b05e86..ae37349 100644 --- a/src/components/prompts/CreatePromptDialog.tsx +++ b/src/components/prompts/CreatePromptDialog.tsx @@ -80,7 +80,7 @@ Siga estas diretrizes em todas as suas interações.`; return ( - + Criar Novo Prompt diff --git a/src/components/prompts/EditPromptDialog.tsx b/src/components/prompts/EditPromptDialog.tsx index 7b74bd6..ea49313 100644 --- a/src/components/prompts/EditPromptDialog.tsx +++ b/src/components/prompts/EditPromptDialog.tsx @@ -83,7 +83,7 @@ export function EditPromptDialog({ open, onOpenChange, prompt }: EditPromptDialo return ( - + Editar Prompt diff --git a/src/components/prompts/PromptHistoryDialog.tsx b/src/components/prompts/PromptHistoryDialog.tsx index 2ce442a..b7bda94 100644 --- a/src/components/prompts/PromptHistoryDialog.tsx +++ b/src/components/prompts/PromptHistoryDialog.tsx @@ -120,7 +120,7 @@ export function PromptHistoryDialog({ open, onOpenChange, prompt }: PromptHistor return ( - + diff --git a/src/pages/Agents.tsx b/src/pages/Agents.tsx index d1d5433..3865606 100644 --- a/src/pages/Agents.tsx +++ b/src/pages/Agents.tsx @@ -56,14 +56,14 @@ export default function Agents() { return (
-
+
-

Gestão de Agentes

-

+

Gestão de Agentes

+

Crie e gerencie agentes de IA com prompts e modelos específicos

- @@ -89,64 +89,119 @@ export default function Agents() {

Nenhum agente encontrado.

) : ( -
- - - - Nome - Prompt - Modelo - Criado - Status - Ações - - - - {filteredAgents.map((agent) => ( - - {agent.name} - {agent.prompt} - - - {agent.model} - - - {agent.createdAt} - - - {agent.status === "active" ? "Ativo" : "Inativo"} - - - - - - - - - console.log("Edit", agent.id)}> - - Editar - - console.log("Delete", agent.id)} - className="text-destructive" - > - - Excluir - - - - + <> + {/* Mobile Cards */} +
+ {filteredAgents.map((agent) => ( +
+
+
+

{agent.name}

+

{agent.createdAt}

+
+ + + + + + console.log("Edit", agent.id)}> + + Editar + + console.log("Delete", agent.id)} + className="text-destructive" + > + + Excluir + + + +
+
+
+ Prompt: +

{agent.prompt}

+
+
+ Modelo: +

+ {agent.model} +

+
+
+ + {agent.status === "active" ? "Ativo" : "Inativo"} + +
+ ))} +
+ + {/* Desktop Table */} +
+
+ + + Nome + Prompt + Modelo + Criado + Status + Ações - ))} - -
-
+ + + {filteredAgents.map((agent) => ( + + {agent.name} + {agent.prompt} + + + {agent.model} + + + {agent.createdAt} + + + {agent.status === "active" ? "Ativo" : "Inativo"} + + + + + + + + + console.log("Edit", agent.id)}> + + Editar + + console.log("Delete", agent.id)} + className="text-destructive" + > + + Excluir + + + + + + ))} + + +
+ )} -
+
-

Gestão de Prompts

-

+

Gestão de Prompts

+

Crie, edite e gerencie os prompts dos seus agentes de IA

- @@ -178,7 +178,50 @@ export default function Prompts() {
) : ( <> -
+ {/* Mobile Cards */} +
+ {paginatedPrompts.map((prompt) => ( +
+
+
+

{prompt.title}

+

+ por {prompt.creator} • {prompt.lastModified} +

+
+ + + + + + handleEditPrompt(prompt)}> + + Editar + + handleViewHistory(prompt)}> + + Histórico + + + +
+
+ {prompt.version} + + {prompt.status === "published" ? "Publicado" : "Rascunho"} + +
+
+ ))} +
+ + {/* Desktop Table */} +
diff --git a/src/pages/TestPrompt.tsx b/src/pages/TestPrompt.tsx index 6149d85..88b1871 100644 --- a/src/pages/TestPrompt.tsx +++ b/src/pages/TestPrompt.tsx @@ -67,9 +67,9 @@ export default function TestPrompt() { return (
-
-

Teste de Prompt

-

+

+

Teste de Prompt

+

Converse com a IA para testar como o prompt se comporta