Ranked source passages with a searching state, highlighted query terms, relevance bars, and expandable text.
import * as React from 'react'
import RetrievalChunks, { type RetrievalChunk } from '@/components/ui/retrieval-chunks'
const results: RetrievalChunk[] = [
{
id: 'permissions',
source: 'Agent security guide',
location: '§ Permissions',
score: 0.94,
content:
'Request the narrowest capability that completes the task and make its duration visible before execution. Permissions should expire with the task unless the person explicitly chooses to keep them.',
},
{
id: 'approval',
source: 'Human-in-the-loop patterns',
location: 'Page 8',
score: 0.87,
content:
'Approval surfaces should explain the proposed action, scope, and likely consequence in plain language, and keep the decision next to the action it unlocks.',
},
{
id: 'audit',
source: 'Operations handbook',
location: 'Audit trail',
score: 0.71,
content:
'Record which permissions were granted, by whom, and for how long, so access can be reviewed later.',
},
]
export default function Demo() {
const [count, setCount] = React.useState(2)
React.useEffect(() => {
const timer = setTimeout(
() => setCount((value) => (value > results.length ? 0 : value + 1)),
count > results.length ? 3600 : count === 0 ? 1200 : 700,
)
return () => clearTimeout(timer)
}, [count])
return (
<RetrievalChunks
className="w-full max-w-xl"
highlight={['permissions', 'scope', 'duration']}
items={results.slice(0, Math.min(count, results.length))}
onOpen={() => undefined}
query="How should agent permissions be presented?"
searching={count <= results.length}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.