@greatapps/greatagents-ui 0.1.0 → 0.2.1

package/src/pages/agent-detail-page.tsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { useAgent } from "../hooks";
+import { AgentTabs } from "../components/agents/agent-tabs";
+import { AgentEditForm } from "../components/agents/agent-edit-form";
+import { Badge, Button, Skeleton } from "@greatapps/greatauth-ui/ui";
+import { EntityAvatar } from "@greatapps/greatauth-ui";
+import { ArrowLeft, Pencil } from "lucide-react";
+import type { GagentsHookConfig } from "../hooks/types";
+
+export interface AgentDetailPageProps {
+  config: GagentsHookConfig;
+  agentId: number;
+  onBack?: () => void;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
+}
+
+export function AgentDetailPage({
+  config,
+  agentId,
+  onBack,
+  renderChatLink,
+}: AgentDetailPageProps) {
+  const { data: agent, isLoading } = useAgent(config, agentId);
+  const [editOpen, setEditOpen] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-4 p-4">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!agent) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 p-8">
+        <p className="text-muted-foreground">Agente não encontrado</p>
+        {onBack && (
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Voltar para agentes
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-4">
+      <div className="rounded-lg border p-4 md:p-6">
+        <div className="flex flex-col gap-4 md:flex-row md:items-start md:gap-6">
+          <div className="flex items-start gap-3 flex-1">
+            {onBack && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="shrink-0 mt-1"
+                onClick={onBack}
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+            )}
+
+            <EntityAvatar photo={agent.photo} name={agent.title} size="xl" />
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h1 className="text-xl font-semibold">{agent.title}</h1>
+                <Badge
+                  variant={agent.active ? "default" : "destructive"}
+                  className="text-xs"
+                >
+                  {agent.active ? "Ativo" : "Inativo"}
+                </Badge>
+              </div>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            size="sm"
+            className="shrink-0 self-start"
+            onClick={() => setEditOpen(true)}
+          >
+            <Pencil className="mr-2 h-4 w-4" />
+            Editar
+          </Button>
+        </div>
+      </div>
+
+      <AgentTabs
+        agent={agent}
+        config={config}
+        renderChatLink={renderChatLink}
+      />
+
+      {editOpen && (
+        <AgentEditForm
+          agent={agent}
+          config={config}
+          idAccount={config.accountId}
+          open={editOpen}
+          onOpenChange={setEditOpen}
+        />
+      )}
+    </div>
+  );
+}

package/src/pages/agents-page.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { AgentsTable } from "../components/agents/agents-table";
+import { AgentFormDialog } from "../components/agents/agent-form-dialog";
+import { Button } from "@greatapps/greatauth-ui/ui";
+import { Plus } from "lucide-react";
+import type { GagentsHookConfig } from "../hooks/types";
+
+export interface AgentsPageProps {
+  config: GagentsHookConfig;
+  onNavigateToAgent?: (agentId: number) => void;
+  title?: string;
+  subtitle?: string;
+}
+
+export function AgentsPage({
+  config,
+  onNavigateToAgent,
+  title = "Agentes AI",
+  subtitle = "Gerencie seus agentes de atendimento inteligente",
+}: AgentsPageProps) {
+  const [createOpen, setCreateOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">{title}</h1>
+          <p className="text-sm text-muted-foreground">{subtitle}</p>
+        </div>
+        <Button onClick={() => setCreateOpen(true)} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          Novo Agente
+        </Button>
+      </div>
+
+      <AgentsTable config={config} onNavigateToAgent={onNavigateToAgent} />
+
+      <AgentFormDialog
+        config={config}
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+      />
+    </div>
+  );
+}

package/src/pages/credentials-page.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { useToolCredentials } from "../hooks";
+import { ToolCredentialsForm } from "../components/tools/tool-credentials-form";
+import { Button } from "@greatapps/greatauth-ui/ui";
+import { Plus } from "lucide-react";
+import type { GagentsHookConfig } from "../hooks/types";
+
+export interface CredentialsPageProps {
+  config: GagentsHookConfig;
+  gagentsApiUrl: string;
+  title?: string;
+  subtitle?: string;
+}
+
+export function CredentialsPage({
+  config,
+  gagentsApiUrl,
+  title = "Credenciais",
+  subtitle = "Gerencie as credenciais de autenticação das ferramentas",
+}: CredentialsPageProps) {
+  const { data: credentialsData, isLoading: credentialsLoading } =
+    useToolCredentials(config);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const credentials = credentialsData?.data || [];
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">{title}</h1>
+          <p className="text-sm text-muted-foreground">{subtitle}</p>
+        </div>
+        <Button onClick={() => setCreateOpen(true)} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          Nova Credencial
+        </Button>
+      </div>
+
+      <ToolCredentialsForm
+        config={config}
+        gagentsApiUrl={gagentsApiUrl}
+        credentials={credentials}
+        isLoading={credentialsLoading}
+        createOpen={createOpen}
+        onCreateOpenChange={setCreateOpen}
+      />
+    </div>
+  );
+}

package/src/pages/index.ts

@@ -0,0 +1,4 @@
+export { AgentsPage, type AgentsPageProps } from "./agents-page";
+export { AgentDetailPage, type AgentDetailPageProps } from "./agent-detail-page";
+export { ToolsPage, type ToolsPageProps } from "./tools-page";
+export { CredentialsPage, type CredentialsPageProps } from "./credentials-page";

package/src/pages/tools-page.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { ToolsTable } from "../components/tools/tools-table";
+import { ToolFormDialog } from "../components/tools/tool-form-dialog";
+import { Button } from "@greatapps/greatauth-ui/ui";
+import { Plus } from "lucide-react";
+import type { GagentsHookConfig } from "../hooks/types";
+import type { Tool } from "../types";
+
+export interface ToolsPageProps {
+  config: GagentsHookConfig;
+  title?: string;
+  subtitle?: string;
+}
+
+export function ToolsPage({
+  config,
+  title = "Ferramentas",
+  subtitle = "Gerencie as ferramentas disponíveis para seus agentes",
+}: ToolsPageProps) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editTool, setEditTool] = useState<Tool | undefined>(undefined);
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">{title}</h1>
+          <p className="text-sm text-muted-foreground">{subtitle}</p>
+        </div>
+        <Button onClick={() => setCreateOpen(true)} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          Nova Ferramenta
+        </Button>
+      </div>
+
+      <ToolsTable config={config} onEdit={(tool) => setEditTool(tool)} />
+
+      <ToolFormDialog
+        config={config}
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+      />
+
+      <ToolFormDialog
+        config={config}
+        open={!!editTool}
+        onOpenChange={(open) => !open && setEditTool(undefined)}
+        tool={editTool}
+      />
+    </div>
+  );
+}