Retrieval Chunks

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}
    />
  )
}