Pending user turns that remain visible, removable, and immediately sendable while an agent is busy.
import { useState } from 'react'
import MessageQueue from '@/components/ui/message-queue'
export default function Demo() {
const [items, setItems] = useState([
{ id: 'queue-1', content: 'Compare the mobile navigation states.' },
{ id: 'queue-2', content: 'Add the results to the implementation plan.' },
{ id: 'queue-3', content: 'Check the spacing in dark mode.' },
])
const [status, setStatus] = useState('')
return (
<div className="w-full max-w-2xl">
<MessageQueue
className="w-full"
items={items}
onReorder={setItems}
onRemove={(id) => setItems((current) => current.filter((item) => item.id !== id))}
onSendNow={(id) => {
setStatus(`Steered: ${items.find((item) => item.id === id)?.content}`)
setItems((current) => current.filter((item) => item.id !== id))
}}
onMoveToTop={(id) =>
setItems((current) => {
const selected = current.find((item) => item.id === id)
return selected ? [selected, ...current.filter((item) => item.id !== id)] : current
})
}
/>
<output className="mt-2 block text-xs leading-5 text-muted-foreground">{status}</output>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.