34 lines
922 B
TypeScript
34 lines
922 B
TypeScript
|
import { FormEvent, useState } from 'react'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
onSubmit: (message: string) => void
|
||
|
|
busy: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PromptBar({ onSubmit, busy }: Props) {
|
||
|
|
const [text, setText] = useState('')
|
||
|
|
|
||
|
|
const handle = (e: FormEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
if (!text.trim() || busy) return
|
||
|
|
onSubmit(text.trim())
|
||
|
|
setText('')
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={handle} className="panel rounded-2xl p-4 flex gap-3 items-center">
|
||
|
|
<span className="text-2xl shrink-0" aria-hidden>💬</span>
|
||
|
|
<input
|
||
|
|
className="prompt-input"
|
||
|
|
placeholder="Vraag je agents... bijv. Hoe staat de GPU? Welk model draait er?"
|
||
|
|
value={text}
|
||
|
|
onChange={(e) => setText(e.target.value)}
|
||
|
|
disabled={busy}
|
||
|
|
/>
|
||
|
|
<button type="submit" disabled={busy || !text.trim()} className="btn-primary shrink-0">
|
||
|
|
{busy ? 'Bezig...' : 'Send'}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
)
|
||
|
|
}
|