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:
+32
-46
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user