@greatapps/greatagents-ui 0.1.0 → 0.2.1

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>
+  );
+}