{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "web-search",
  "title": "Web Search",
  "description": "Agent search results with a live reading indicator.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/ai-assistants/web-search.tsx",
      "content": "'use client';\n\nimport { Search } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport interface SearchResult {\n  id: string;\n  title: string;\n  domain: string;\n  snippet?: string;\n  state?: 'reading' | 'read' | 'idle';\n}\n\nexport type WebSearchVariant = 'Default' | 'Compact';\n\nexport interface WebSearchProps {\n  query: string;\n  results: SearchResult[];\n  moreCount?: number;\n  variant?: WebSearchVariant;\n  className?: string;\n}\n\nexport function WebSearch({\n  query,\n  results,\n  moreCount = 0,\n  variant = 'Default',\n  className,\n}: WebSearchProps) {\n  const compact = variant === 'Compact';\n\n  return (\n    <div className={cn('w-full max-w-[440px] text-[13px]', className)}>\n      <div className=\"flex items-center gap-2 text-neutral-500 dark:text-neutral-400\">\n        <Search className=\"size-3.5\" />\n        <span className=\"font-mono text-[12px]\">{query}</span>\n      </div>\n\n      <ul className={cn('mt-3 border-l border-black/[0.07] pl-4 dark:border-white/[0.08]', compact ? 'space-y-1.5' : 'space-y-2.5')}>\n        {results.map((result) => {\n          const reading = result.state === 'reading';\n          return (\n            <li\n              key={result.id}\n              className={cn(\n                'transition-opacity duration-200',\n                result.state === 'idle' && 'opacity-45',\n              )}\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  aria-hidden\n                  className=\"grid size-4 shrink-0 place-items-center rounded-full bg-black/[0.05] font-mono text-[8.5px] font-semibold uppercase text-neutral-500 dark:bg-white/[0.08] dark:text-neutral-400\"\n                >\n                  {result.domain.charAt(0)}\n                </span>\n                <span\n                  className={cn(\n                    'truncate font-medium text-neutral-800 dark:text-neutral-200',\n                    compact ? 'text-[12px]' : 'text-[12.5px]',\n                  )}\n                >\n                  {result.title}\n                </span>\n                <span className=\"shrink-0 font-mono text-[10.5px] text-neutral-400 dark:text-neutral-600\">\n                  {result.domain}\n                </span>\n                {reading && (\n                  <span className=\"ml-auto shrink-0 rounded-full bg-sky-500/10 px-1.5 py-0.5 font-mono text-[9px] font-medium uppercase tracking-wide text-sky-700 motion-safe:animate-pulse dark:text-sky-400\">\n                    reading\n                  </span>\n                )}\n                {result.state === 'read' && (\n                  <span className=\"ml-auto shrink-0 font-mono text-[9px] uppercase tracking-wide text-neutral-400 dark:text-neutral-600\">\n                    read\n                  </span>\n                )}\n              </div>\n              {!compact && result.snippet && (\n                <p className=\"ml-6 mt-0.5 line-clamp-1 text-[11.5px] leading-[1.5] text-neutral-500 dark:text-neutral-500\">\n                  {result.snippet}\n                </p>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n\n      {moreCount > 0 && (\n        <p className=\"ml-4 mt-2 pl-6 font-mono text-[10.5px] text-neutral-400 dark:text-neutral-600\">\n          +{moreCount} more\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport default WebSearch;\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/ai-assistants/web-search.tsx"
    }
  ],
  "type": "registry:block"
}