mo
fb9cc21c9a
Agent hub dashboard, FastAPI backend, and Docker stack for VM 304 MCP. Co-authored-by: Cursor <cursoragent@cursor.com>
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
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="glass-strong rounded-2xl p-4 flex gap-3 items-center shadow-card">
|
|
<span className="text-2xl" aria-hidden>💬</span>
|
|
<input
|
|
className="flex-1 bg-white border border-slate-200 rounded-xl px-4 py-2.5 outline-none font-mono text-sm text-ink placeholder:text-ink-faint focus:border-neon-cyan focus:ring-2 focus:ring-neon-cyan/20 transition"
|
|
placeholder="Vraag je agents... bijv. Hoe staat Debezium er voor?"
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
disabled={busy}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={busy || !text.trim()}
|
|
className="px-5 py-2.5 rounded-xl font-display text-sm font-semibold text-white disabled:opacity-40 transition-all hover:brightness-110"
|
|
style={{
|
|
background: busy ? '#94a3b8' : 'linear-gradient(135deg, #0099cc, #8844cc)',
|
|
boxShadow: busy ? 'none' : '0 4px 16px rgba(0, 153, 204, 0.35)',
|
|
}}
|
|
>
|
|
{busy ? 'Bezig...' : 'Send'}
|
|
</button>
|
|
</form>
|
|
)
|
|
}
|