Agent Activity

import { CheckCircleIcon } from '@solar-icons/react/linear/check-circle'
import { GlobalIcon } from '@solar-icons/react/linear/global'
import { PenNewSquareIcon } from '@solar-icons/react/linear/pen-new-square'
import { ShieldCheckIcon } from '@solar-icons/react/linear/shield-check'
import { Widget4Icon } from '@solar-icons/react/linear/widget-4'
import * as React from 'react'
import AgentActivity, { type AgentActivityItem } from '@/components/ui/agent-activity'

const sites = ['21st.dev', 'shadcn.io', 'assistant-ui.com', 'pro.pastaui.com']

const steps = [
  { id: 'inventory', icon: <Widget4Icon />, running: 'Inspecting the component inventory', done: 'Inspected the component inventory', detail: '51 components indexed' },
  { id: 'search', icon: <GlobalIcon />, running: 'Searching AI-focused registries', done: 'Searched AI-focused registries', detail: '576 directory items compared' },
  { id: 'author', icon: <PenNewSquareIcon />, running: 'Authoring approval and execution surfaces', done: 'Authored approval and execution surfaces', detail: '7 surfaces drafted' },
  { id: 'verify', icon: <ShieldCheckIcon />, running: 'Running production verification', done: 'Verified the production build', detail: '116 routes checked' },
  { id: 'summary', icon: <CheckCircleIcon />, running: 'Writing the summary', done: 'Wrote the summary', detail: 'Ready for review' },
]

export default function Demo() {
  const [count, setCount] = React.useState(3)

  React.useEffect(() => {
    const finished = count > steps.length
    const timer = setTimeout(() => setCount((value) => (finished ? 1 : value + 1)), finished ? 3200 : 1700)
    return () => clearTimeout(timer)
  }, [count])

  const items: AgentActivityItem[] = steps.slice(0, Math.min(count, steps.length)).map((step, index) => {
    const running = index === count - 1 && count <= steps.length
    return {
      id: step.id,
      icon: step.icon,
      label: running ? step.running : step.done,
      detail: running ? undefined : step.detail,
      status: running ? 'running' : 'complete',
      sources:
        step.id === 'search'
          ? sites.map((site) => ({ id: site, label: site, icon: <GlobalIcon /> }))
          : undefined,
    }
  })

  return (
    <div className="min-h-[19rem] w-full max-w-lg">
      <AgentActivity items={items} />
    </div>
  )
}