luis.felipe/PromptLab-Front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add AI model selection to test prompt screen

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-29 14:53:12 +00:00
parent 2b694a9520
commit 753724182d
1 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/TestPrompt.tsx
+42 -19
View File
@@ -24,6 +24,7 @@ export default function TestPrompt() {
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 [selectedPrompt, setSelectedPrompt] = useState("");
const [selectedModel, setSelectedModel] = useState("");
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@@ -33,7 +34,7 @@ export default function TestPrompt() {
}, [messages]); }, [messages]);
const handleSend = () => { const handleSend = () => {
if (!input.trim() || !selectedPrompt) return; if (!input.trim() || !selectedPrompt || !selectedModel) return;
const userMessage: Message = { const userMessage: Message = {
id: Date.now().toString(), id: Date.now().toString(),
@@ -74,21 +75,43 @@ export default function TestPrompt() {
</div> </div>
<Card className="flex-1 flex flex-col overflow-hidden"> <Card className="flex-1 flex flex-col overflow-hidden">
{/* Selector de Prompt */} {/* Selector de Prompt e Modelo */}
<div className="p-4 border-b border-border"> <div className="p-4 border-b border-border space-y-4">
<Label htmlFor="prompt-select" className="mb-2 block"> <div>
Selecione o Prompt <Label htmlFor="prompt-select" className="mb-2 block">
</Label> Selecione o Prompt
<Select value={selectedPrompt} onValueChange={setSelectedPrompt}> </Label>
<SelectTrigger id="prompt-select"> <Select value={selectedPrompt} onValueChange={setSelectedPrompt}>
<SelectValue placeholder="Escolha um prompt" /> <SelectTrigger id="prompt-select">
</SelectTrigger> <SelectValue placeholder="Escolha um prompt" />
<SelectContent> </SelectTrigger>
<SelectItem value="atendimento">Prompt de Atendimento v2.1</SelectItem> <SelectContent>
<SelectItem value="vendas">Prompt de Vendas v1.5</SelectItem> <SelectItem value="atendimento">Prompt de Atendimento v2.1</SelectItem>
<SelectItem value="analise">Prompt de Análise</SelectItem> <SelectItem value="vendas">Prompt de Vendas v1.5</SelectItem>
</SelectContent> <SelectItem value="analise">Prompt de Análise</SelectItem>
</Select> </SelectContent>
</Select>
</div>
<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 */}
@@ -96,7 +119,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 comece a conversar</p> <p>Selecione um prompt e modelo para começar a conversar</p>
</div> </div>
) : ( ) : (
messages.map((message) => ( messages.map((message) => (
@@ -153,12 +176,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} disabled={isLoading || !selectedPrompt || !selectedModel}
className="flex-1" className="flex-1"
/> />
<Button <Button
onClick={handleSend} onClick={handleSend}
disabled={!input.trim() || isLoading || !selectedPrompt} disabled={!input.trim() || isLoading || !selectedPrompt || !selectedModel}
size="icon" size="icon"
> >
<Send className="h-4 w-4" /> <Send className="h-4 w-4" />