Rename TestPrompt to TestAgent

Update the TestPrompt page to TestAgent. It now features a select dropdown for choosing an agent and a chat interface. The previous prompt and model selection components have been removed.
This commit is contained in:
gpt-engineer-app[bot]
2025-11-07 19:54:25 +00:00
parent 5a9ca2bbf9
commit f1362dbf01
+32 -46
View File
@@ -23,10 +23,16 @@ export default function TestPrompt() {
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [selectedPrompt, setSelectedPrompt] = useState(""); const [selectedAgent, setSelectedAgent] = useState("");
const [selectedModel, setSelectedModel] = useState("");
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
// Mock data de agentes
const agents = [
{ id: "1", name: "Agente de Atendimento" },
{ id: "2", name: "Agente de Vendas" },
{ id: "3", name: "Agente de Análise" },
];
useEffect(() => { useEffect(() => {
if (scrollRef.current) { if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight; scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -34,7 +40,7 @@ export default function TestPrompt() {
}, [messages]); }, [messages]);
const handleSend = () => { const handleSend = () => {
if (!input.trim() || !selectedPrompt || !selectedModel) return; if (!input.trim() || !selectedAgent) return;
const userMessage: Message = { const userMessage: Message = {
id: Date.now().toString(), id: Date.now().toString(),
@@ -51,7 +57,7 @@ export default function TestPrompt() {
id: (Date.now() + 1).toString(), id: (Date.now() + 1).toString(),
role: "assistant", role: "assistant",
content: content:
"Esta é uma resposta simulada do agente de IA. Em produção, esta resposta seria gerada pelo modelo de IA configurado com o prompt selecionado. A conversa continua naturalmente.", "Esta é uma resposta simulada do agente de IA. Em produção, esta resposta seria gerada pelo modelo de IA configurado no agente selecionado.",
}; };
setMessages((prev) => [...prev, aiMessage]); setMessages((prev) => [...prev, aiMessage]);
setIsLoading(false); setIsLoading(false);
@@ -68,50 +74,30 @@ export default function TestPrompt() {
return ( return (
<div className="animate-fade-in h-full flex flex-col max-w-5xl mx-auto"> <div className="animate-fade-in h-full flex flex-col max-w-5xl mx-auto">
<div className="mb-4 md:mb-6"> <div className="mb-4 md:mb-6">
<h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Teste de Prompt</h1> <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Testar Agente</h1>
<p className="text-sm md:text-base text-muted-foreground"> <p className="text-sm md:text-base text-muted-foreground">
Converse com a IA para testar como o prompt se comporta Converse com o agente para testar seu comportamento
</p> </p>
</div> </div>
<Card className="flex-1 flex flex-col overflow-hidden"> <Card className="flex-1 flex flex-col overflow-hidden">
{/* Selector de Prompt e Modelo */} {/* Selector de Agente */}
<div className="p-4 border-b border-border space-y-4"> <div className="p-4 border-b border-border">
<div> <Label htmlFor="agent-select" className="mb-2 block">
<Label htmlFor="prompt-select" className="mb-2 block"> Selecione o Agente
Selecione o Prompt </Label>
</Label> <Select value={selectedAgent} onValueChange={setSelectedAgent}>
<Select value={selectedPrompt} onValueChange={setSelectedPrompt}> <SelectTrigger id="agent-select">
<SelectTrigger id="prompt-select"> <SelectValue placeholder="Escolha um agente" />
<SelectValue placeholder="Escolha um prompt" /> </SelectTrigger>
</SelectTrigger> <SelectContent>
<SelectContent> {agents.map((agent) => (
<SelectItem value="atendimento">Prompt de Atendimento v2.1</SelectItem> <SelectItem key={agent.id} value={agent.id}>
<SelectItem value="vendas">Prompt de Vendas v1.5</SelectItem> {agent.name}
<SelectItem value="analise">Prompt de Análise</SelectItem> </SelectItem>
</SelectContent> ))}
</Select> </SelectContent>
</div> </Select>
<div>
<Label htmlFor="model-select" className="mb-2 block">
Modelo de IA
</Label>
<Select value={selectedModel} onValueChange={setSelectedModel}>
<SelectTrigger id="model-select">
<SelectValue placeholder="Escolha um modelo" />
</SelectTrigger>
<SelectContent>
<SelectItem value="gemini-2.5-flash">Google Gemini 2.5 Flash</SelectItem>
<SelectItem value="gemini-2.5-pro">Google Gemini 2.5 Pro</SelectItem>
<SelectItem value="gpt-5">OpenAI GPT-5</SelectItem>
<SelectItem value="gpt-5-mini">OpenAI GPT-5 Mini</SelectItem>
<SelectItem value="gpt-4.1">OpenAI GPT-4.1</SelectItem>
<SelectItem value="claude-sonnet-4-5">Anthropic Claude Sonnet 4.5</SelectItem>
<SelectItem value="claude-opus-4-1">Anthropic Claude Opus 4.1</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
{/* Chat Area */} {/* Chat Area */}
@@ -119,7 +105,7 @@ export default function TestPrompt() {
<div className="space-y-4"> <div className="space-y-4">
{messages.length === 0 ? ( {messages.length === 0 ? (
<div className="flex items-center justify-center h-full text-muted-foreground"> <div className="flex items-center justify-center h-full text-muted-foreground">
<p>Selecione um prompt e modelo para começar a conversar</p> <p>Selecione um agente para começar a conversar</p>
</div> </div>
) : ( ) : (
messages.map((message) => ( messages.map((message) => (
@@ -176,12 +162,12 @@ export default function TestPrompt() {
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
disabled={isLoading || !selectedPrompt || !selectedModel} disabled={isLoading || !selectedAgent}
className="flex-1" className="flex-1"
/> />
<Button <Button
onClick={handleSend} onClick={handleSend}
disabled={!input.trim() || isLoading || !selectedPrompt || !selectedModel} disabled={!input.trim() || isLoading || !selectedAgent}
size="icon" size="icon"
> >
<Send className="h-4 w-4" /> <Send className="h-4 w-4" />