@greatapps/greatagents-ui 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/agents/agent-tabs.tsx

@@ -3,6 +3,7 @@ import type { GagentsHookConfig } from "../../hooks/types";
 import { AgentToolsList } from "./agent-tools-list";
 import { AgentObjectivesList } from "./agent-objectives-list";
 import { AgentPromptEditor } from "./agent-prompt-editor";
+import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
 import {
   Tabs,
   TabsList,
@@ -14,10 +15,10 @@ import { Wrench, Target, FileText, MessageCircle } from "lucide-react";
 interface AgentTabsProps {
   agent: Agent;
   config: GagentsHookConfig;
-  renderConversationsTab?: (agent: Agent) => React.ReactNode;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
 }
 
-export function AgentTabs({ agent, config, renderConversationsTab }: AgentTabsProps) {
+export function AgentTabs({ agent, config, renderChatLink }: AgentTabsProps) {
   return (
     <Tabs defaultValue="prompt">
       <TabsList>
@@ -33,12 +34,10 @@ export function AgentTabs({ agent, config, renderConversationsTab }: AgentTabsPr
           <Wrench className="h-3.5 w-3.5" />
           Ferramentas
         </TabsTrigger>
-        {renderConversationsTab && (
-          <TabsTrigger value="conversas" className="flex items-center gap-1.5">
-            <MessageCircle className="h-3.5 w-3.5" />
-            Conversas
-          </TabsTrigger>
-        )}
+        <TabsTrigger value="conversas" className="flex items-center gap-1.5">
+          <MessageCircle className="h-3.5 w-3.5" />
+          Conversas
+        </TabsTrigger>
       </TabsList>
 
       <TabsContent value="prompt" className="mt-4">
@@ -53,11 +52,13 @@ export function AgentTabs({ agent, config, renderConversationsTab }: AgentTabsPr
         <AgentToolsList agent={agent} config={config} />
       </TabsContent>
 
-      {renderConversationsTab && (
-        <TabsContent value="conversas" className="mt-4">
-          {renderConversationsTab(agent)}
-        </TabsContent>
-      )}
+      <TabsContent value="conversas" className="mt-4">
+        <AgentConversationsPanel
+          agent={agent}
+          config={config}
+          renderChatLink={renderChatLink}
+        />
+      </TabsContent>
     </Tabs>
   );
 }

package/src/components/conversations/agent-conversations-panel.tsx

@@ -0,0 +1,44 @@
+import type { Agent } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { useAgentConversations, useGagentsContacts, useObjectives } from "../../hooks";
+import { AgentConversationsTable } from "./agent-conversations-table";
+
+interface AgentConversationsPanelProps {
+  agent: Agent;
+  config: GagentsHookConfig;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
+}
+
+export function AgentConversationsPanel({
+  agent,
+  config,
+  renderChatLink,
+}: AgentConversationsPanelProps) {
+  const { data: conversationsData, isLoading } = useAgentConversations(
+    config,
+    agent.id,
+  );
+  const { data: contactsData } = useGagentsContacts(config);
+  const { data: objectivesData } = useObjectives(config, agent.id);
+
+  const conversations = conversationsData?.data || [];
+  const contactsMap = new Map(
+    (contactsData?.data || []).map((c) => [c.id, c.name]),
+  );
+  const objectivesMap = new Map(
+    (objectivesData?.data || []).map((o) => [o.id, o.title]),
+  );
+
+  return (
+    <div className="p-4">
+      <AgentConversationsTable
+        conversations={conversations}
+        isLoading={isLoading}
+        contactsMap={contactsMap}
+        objectivesMap={objectivesMap}
+        config={config}
+        renderChatLink={renderChatLink}
+      />
+    </div>
+  );
+}

package/src/components/conversations/agent-conversations-table.tsx

@@ -0,0 +1,160 @@
+import { useState } from "react";
+import type { Conversation } from "../../types";
+import type { GagentsHookConfig } from "../../hooks/types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Skeleton,
+  Badge,
+} from "@greatapps/greatauth-ui/ui";
+import { MessageCircle, ExternalLink } from "lucide-react";
+import { ConversationView } from "./conversation-view";
+
+interface AgentConversationsTableProps {
+  conversations: Conversation[];
+  isLoading: boolean;
+  contactsMap?: Map<number, string>;
+  objectivesMap?: Map<number, string>;
+  config: GagentsHookConfig;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
+}
+
+function formatRelativeDate(dateStr: string | null): string {
+  if (!dateStr) return "—";
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60000);
+  if (diffMin < 1) return "agora";
+  if (diffMin < 60) return `${diffMin}m atrás`;
+  const diffHours = Math.floor(diffMin / 60);
+  if (diffHours < 24) return `${diffHours}h atrás`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 30) return `${diffDays}d atrás`;
+  return date.toLocaleDateString("pt-BR");
+}
+
+export function AgentConversationsTable({
+  conversations,
+  isLoading,
+  contactsMap,
+  objectivesMap,
+  config,
+  renderChatLink,
+}: AgentConversationsTableProps) {
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  if (conversations.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+        <MessageCircle className="mb-2 h-8 w-8 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">
+          Nenhuma conversa encontrada.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>ID</TableHead>
+            <TableHead>Contato</TableHead>
+            <TableHead>Objetivo</TableHead>
+            <TableHead className="text-right">Mensagens</TableHead>
+            <TableHead className="text-right">Tokens</TableHead>
+            <TableHead>Criado em</TableHead>
+            <TableHead>Atualizado em</TableHead>
+            <TableHead className="w-10"></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {conversations.map((conversation) => (
+            <TableRow
+              key={conversation.id}
+              className="cursor-pointer"
+              onClick={() =>
+                setSelectedId(
+                  selectedId === conversation.id ? null : conversation.id,
+                )
+              }
+              data-state={selectedId === conversation.id ? "selected" : undefined}
+            >
+              <TableCell className="font-mono text-xs">
+                {conversation.id}
+              </TableCell>
+              <TableCell>
+                {contactsMap?.get(conversation.id_contact) ?? conversation.id_contact}
+              </TableCell>
+              <TableCell>
+                {conversation.id_objective && objectivesMap?.get(conversation.id_objective) ? (
+                  <Badge variant="secondary" className="text-xs">
+                    {objectivesMap.get(conversation.id_objective)}
+                  </Badge>
+                ) : (
+                  <span className="text-xs text-muted-foreground">—</span>
+                )}
+              </TableCell>
+              <TableCell className="text-right">
+                {conversation.message_count ?? "—"}
+              </TableCell>
+              <TableCell className="text-right">
+                {conversation.usage_tokens ?? "—"}
+              </TableCell>
+              <TableCell>
+                {new Date(conversation.datetime_add).toLocaleDateString("pt-BR")}
+              </TableCell>
+              <TableCell>
+                {formatRelativeDate(conversation.datetime_alt)}
+              </TableCell>
+              <TableCell>
+                {conversation.id_external ? (
+                  renderChatLink ? (
+                    <span onClick={(e) => e.stopPropagation()}>
+                      {renderChatLink(conversation.id_external)}
+                    </span>
+                  ) : (
+                    <a
+                      href={`/gchat/inbox/${conversation.id_external}`}
+                      title="Ver no Chat"
+                      onClick={(e) => e.stopPropagation()}
+                      className="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                    </a>
+                  )
+                ) : null}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {selectedId && (
+        <ConversationView
+          conversationId={selectedId}
+          onClose={() => setSelectedId(null)}
+          contactsMap={contactsMap}
+          config={config}
+          renderChatLink={renderChatLink}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/conversations/conversation-view.tsx

@@ -0,0 +1,124 @@
+import { useConversation } from "../../hooks";
+import type { GagentsHookConfig } from "../../hooks/types";
+import { Skeleton, Button } from "@greatapps/greatauth-ui/ui";
+import { X, MessageSquare } from "lucide-react";
+
+interface ConversationViewProps {
+  conversationId: number;
+  onClose: () => void;
+  contactsMap?: Map<number, string>;
+  config: GagentsHookConfig;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
+}
+
+function formatDateTime(dateStr: string | null): string {
+  if (!dateStr) return "—";
+  return new Date(dateStr).toLocaleString("pt-BR");
+}
+
+export function ConversationView({
+  conversationId,
+  onClose,
+  contactsMap,
+  config,
+  renderChatLink,
+}: ConversationViewProps) {
+  const { data: conversation, isLoading } = useConversation(config, conversationId);
+
+  if (isLoading) {
+    return (
+      <div className="rounded-lg border bg-card p-4 space-y-3">
+        <Skeleton className="h-6 w-48" />
+        <div className="grid grid-cols-2 gap-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!conversation) {
+    return (
+      <div className="rounded-lg border bg-card p-4">
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">
+            Conversa não encontrada.
+          </p>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold">Detalhes da conversa #{conversation.id}</h3>
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {conversation.id_external ? (
+        renderChatLink ? (
+          renderChatLink(conversation.id_external)
+        ) : (
+          <Button variant="outline" size="sm" asChild>
+            <a href={`/gchat/inbox/${conversation.id_external}`}>
+              <MessageSquare className="mr-2 h-4 w-4" />
+              Ver no Chat
+            </a>
+          </Button>
+        )
+      ) : null}
+
+      <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+        <div>
+          <span className="text-muted-foreground">Thread ID</span>
+          <p className="font-mono text-xs mt-0.5">
+            {conversation.openai_thread_id || "—"}
+          </p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Contato</span>
+          <p className="mt-0.5">
+            {contactsMap?.get(conversation.id_contact) ?? conversation.id_contact}
+          </p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Agente</span>
+          <p className="mt-0.5">{conversation.id_agent ?? "—"}</p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Mensagens</span>
+          <p className="mt-0.5">{conversation.message_count ?? "—"}</p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Tokens</span>
+          <p className="mt-0.5">{conversation.usage_tokens ?? "—"}</p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Rotações de Thread</span>
+          <p className="mt-0.5">{conversation.rotation_count ?? "—"}</p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Criado em</span>
+          <p className="mt-0.5">
+            {formatDateTime(conversation.datetime_add)}
+          </p>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Atualizado em</span>
+          <p className="mt-0.5">
+            {formatDateTime(conversation.datetime_alt)}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -37,6 +37,9 @@ export { ToolsTable } from "./components/tools/tools-table";
 export { ToolFormDialog } from "./components/tools/tool-form-dialog";
 export { ToolCredentialsForm } from "./components/tools/tool-credentials-form";
 export { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay } from "./components/ui/sortable";
+export { AgentConversationsPanel } from "./components/conversations/agent-conversations-panel";
+export { AgentConversationsTable } from "./components/conversations/agent-conversations-table";
+export { ConversationView } from "./components/conversations/conversation-view";
 
 // Page Compositions
 export * from "./pages";

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

@@ -6,20 +6,19 @@ 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";
-import type { Agent } from "../types";
 
 export interface AgentDetailPageProps {
   config: GagentsHookConfig;
   agentId: number;
   onBack?: () => void;
-  renderConversationsTab?: (agent: Agent) => React.ReactNode;
+  renderChatLink?: (inboxId: number) => React.ReactNode;
 }
 
 export function AgentDetailPage({
   config,
   agentId,
   onBack,
-  renderConversationsTab,
+  renderChatLink,
 }: AgentDetailPageProps) {
   const { data: agent, isLoading } = useAgent(config, agentId);
   const [editOpen, setEditOpen] = useState(false);
@@ -95,7 +94,7 @@ export function AgentDetailPage({
       <AgentTabs
         agent={agent}
         config={config}
-        renderConversationsTab={renderConversationsTab}
+        renderChatLink={renderChatLink}
       />
 
       {editOpen && (