Refactor test agent view
Simplify Testar Agente UI to: - Keep agent selection at top with a single New Conversation button - Show all conversation histories across all agents in a unified list - Remove per-agent filtering in the history sidebar - Retain basic chat area while consolidating history view for easier testing
This commit is contained in:
+44
-63
@@ -174,45 +174,20 @@ export default function TestPrompt() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="animate-fade-in h-full flex gap-4">
|
<div className="animate-fade-in h-full flex gap-4">
|
||||||
{/* Sidebar com conversas anteriores */}
|
{/* Sidebar com todas as conversas */}
|
||||||
<Card className="w-80 flex-shrink-0 flex flex-col overflow-hidden">
|
<Card className="w-80 flex-shrink-0 flex flex-col overflow-hidden">
|
||||||
<div className="p-4 border-b border-border">
|
<div className="p-4 border-b border-border">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<h2 className="font-semibold text-foreground">Histórico de Conversas</h2>
|
||||||
<h2 className="font-semibold text-foreground">Conversas</h2>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={handleNewConversation}
|
|
||||||
disabled={!selectedAgent}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Nova
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="sidebar-agent-select" className="mb-2 block text-sm">
|
|
||||||
Agente
|
|
||||||
</Label>
|
|
||||||
<Select value={selectedAgent} onValueChange={setSelectedAgent}>
|
|
||||||
<SelectTrigger id="sidebar-agent-select" className="h-9">
|
|
||||||
<SelectValue placeholder="Selecione" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{agents.map((agent) => (
|
|
||||||
<SelectItem key={agent.id} value={agent.id}>
|
|
||||||
{agent.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScrollArea className="flex-1">
|
<ScrollArea className="flex-1">
|
||||||
<div className="p-2 space-y-1">
|
<div className="p-2 space-y-1">
|
||||||
{conversations
|
{conversations.length === 0 ? (
|
||||||
.filter((conv) => conv.agentId === selectedAgent)
|
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||||
.map((conversation) => (
|
Nenhuma conversa ainda
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
conversations.map((conversation) => (
|
||||||
<button
|
<button
|
||||||
key={conversation.id}
|
key={conversation.id}
|
||||||
onClick={() => handleSelectConversation(conversation.id)}
|
onClick={() => handleSelectConversation(conversation.id)}
|
||||||
@@ -228,17 +203,18 @@ export default function TestPrompt() {
|
|||||||
<p className="text-sm font-medium text-foreground truncate">
|
<p className="text-sm font-medium text-foreground truncate">
|
||||||
{conversation.title}
|
{conversation.title}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-muted-foreground">
|
<div className="flex items-center gap-2 mt-1">
|
||||||
{new Date(conversation.createdAt).toLocaleDateString("pt-BR")}
|
<span className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
|
||||||
</p>
|
{conversation.agentName}
|
||||||
|
</span>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{new Date(conversation.createdAt).toLocaleDateString("pt-BR")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))
|
||||||
{selectedAgent && conversations.filter((c) => c.agentId === selectedAgent).length === 0 && (
|
|
||||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
|
||||||
Nenhuma conversa ainda
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
@@ -248,29 +224,34 @@ export default function TestPrompt() {
|
|||||||
<Card className="flex-1 flex flex-col overflow-hidden">
|
<Card className="flex-1 flex flex-col overflow-hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="p-4 border-b border-border">
|
<div className="p-4 border-b border-border">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center gap-4">
|
||||||
<div>
|
<div className="flex-1">
|
||||||
<h1 className="text-lg font-semibold text-foreground">
|
<Label htmlFor="agent-select" className="mb-2 block text-sm">
|
||||||
{selectedAgent
|
Selecione o Agente
|
||||||
? agents.find((a) => a.id === selectedAgent)?.name
|
</Label>
|
||||||
: "Testar Agente"}
|
<Select value={selectedAgent} onValueChange={setSelectedAgent}>
|
||||||
</h1>
|
<SelectTrigger id="agent-select">
|
||||||
{currentConversationId && (
|
<SelectValue placeholder="Escolha um agente para conversar" />
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
</SelectTrigger>
|
||||||
Conversa atual
|
<SelectContent>
|
||||||
</p>
|
{agents.map((agent) => (
|
||||||
)}
|
<SelectItem key={agent.id} value={agent.id}>
|
||||||
|
{agent.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="pt-6">
|
||||||
|
<Button
|
||||||
|
onClick={handleNewConversation}
|
||||||
|
disabled={!selectedAgent}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Nova Conversa
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleNewConversation}
|
|
||||||
disabled={!selectedAgent}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Nova Conversa
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user