{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"web-research","type":"registry:component","title":"Web research","description":"Watch the agent search: the query types in, page icons stack up as it reads, then it folds into a trail of searches and the pages each one found.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/web-research.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown, ChevronRight, Search } from \"lucide-react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * WEB RESEARCH: watch the agent search and read\n *\n * searching \"Searching\" shimmers; the live query types in\n * reading the label morphs to \"Reading\" and \"7 sites\"\n * rolls up; each page drops its icon into the\n * stack (the oldest folds away) while its title\n * rises in underneath as the last one lifts off\n * done the line morphs into \"3 searches · 9 sources\":\n * counts roll, words morph, the title row folds\n * shut and a chevron opens in; open it for the list\n * error \"Search failed\", keeping whatever was found\n * cancelled \"Stopped after 2 searches\"\n * trail opened, each search is a row on a hairline trail\n * with its count; a search on one site wears that\n * site's mark, and the pages it found sit under it\n * as overlapping marks that fold open into links\n *\n * Feed it the queries and sources as they arrive (tool calls\n * and source parts from the AI SDK); it animates the rest.\n * ───────────────────────────────────────────────────────── */\n\nexport type ResearchStatus = \"searching\" | \"reading\" | \"done\" | \"error\" | \"cancelled\";\n\nexport interface ResearchSource {\n url: string;\n title?: string;\n /** An icon URL; without one, a tinted monogram of the site. */\n favicon?: string;\n /** Which search found it (its index in queries), so the trail can group pages under their search. */\n query?: number;\n}\n\nexport interface ResearchQuery {\n text: string;\n /** A search on one site, e.g. \"reddit.com\": the row wears that site's mark and reads \"Searched Reddit for ...\". */\n site?: string;\n /** An icon URL for that site. */\n siteIcon?: string;\n /** How many it found. */\n results?: number;\n /** The word after the count, e.g. \"posts\". Defaults to \"results\". */\n resultLabel?: string;\n}\n\nexport interface WebResearchProps extends React.HTMLAttributes {\n status: ResearchStatus;\n /** Queries so far, as text or with their site and count; the last one is live while searching. */\n queries: (string | ResearchQuery)[];\n /** Pages read so far, in order. */\n sources: ResearchSource[];\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nconst EASE = \"cubic-bezier(0.23,1,0.32,1)\";\nconst MORPH = \"cubic-bezier(0.16,1,0.3,1)\";\nconst STACK = 4;\n// A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph.\nconst SHEEN =\n \"text-foreground [mask-image:linear-gradient(90deg,rgb(0_0_0/0.45)_35%,#000_50%,rgb(0_0_0/0.45)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none] motion-reduce:text-foreground/70\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(\n subscribeReduced,\n () => window.matchMedia(reducedQuery).matches,\n () => false,\n );\n\nfunction hostname(url: string) {\n try {\n return new URL(url).hostname.replace(/^www\\./, \"\");\n } catch {\n return url;\n }\n}\n\nfunction hue(text: string) {\n let h = 0;\n for (let i = 0; i < text.length; i++) h = (h * 31 + text.charCodeAt(i)) % 360;\n return h;\n}\n\nconst asQuery = (q: string | ResearchQuery): ResearchQuery => (typeof q === \"string\" ? { text: q } : q);\nconst siteName = (site: string) => {\n const parts = hostname(`https://${site}`).split(\".\");\n const name = parts.length > 1 ? parts[parts.length - 2] : parts[0];\n return name.length <= 2 ? name.toUpperCase() : name.charAt(0).toUpperCase() + name.slice(1);\n};\n\nconst plural = (n: number, word: string) => `${word}${n === 1 ? \"\" : /(s|sh|ch|x)$/.test(word) ? \"es\" : \"s\"}`;\n\nfunction Favicon({ source, className = \"\" }: { source: ResearchSource; className?: string }) {\n const host = hostname(source.url);\n const [failed, setFailed] = React.useState(false);\n if (source.favicon && !failed) {\n return \"\" setFailed(true)} className={`rounded-full bg-background object-cover ${className}`} />;\n }\n const h = hue(host);\n return (\n \n {host.charAt(0).toUpperCase()}\n \n );\n}\n\n/** Types the newest query in, a few characters a frame; earlier text never re-types. */\nfunction useTyped(text: string, active: boolean, reduced: boolean) {\n const [shown, setShown] = React.useState(text);\n React.useEffect(() => {\n if (!active || reduced) {\n setShown(text);\n return;\n }\n let i = 0;\n let frame = 0;\n const step = () => {\n i = Math.min(text.length, i + 2);\n setShown(text.slice(0, i));\n if (i < text.length) frame = requestAnimationFrame(step);\n };\n frame = requestAnimationFrame(step);\n return () => cancelAnimationFrame(frame);\n }, [text, active, reduced]);\n return shown;\n}\n\n/** A piece of the line that opens out of nothing and folds back into it (width eases, content blurs in). */\nfunction Reveal({ show, reduced, className = \"\", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n/** One icon in the stack: drops in when it's new, folds away when it's pushed out by a newer one. */\nfunction StackIcon({ shown, first, enter, reduced, z, children }: { shown: boolean; first: boolean; enter: boolean; reduced: boolean; z: number; children: React.ReactNode }) {\n const [entering] = React.useState(enter);\n return (\n \n {children}\n \n );\n}\n\n/** A one-line ticker: the new text rises in out of a blur while the last one lifts away. */\nfunction Ticker({ id, reduced, children }: { id: string; reduced: boolean; children: React.ReactNode }) {\n const [current, setCurrent] = React.useState<{ id: string; node: React.ReactNode }>({ id, node: children });\n const [leaving, setLeaving] = React.useState<{ id: string; node: React.ReactNode }[]>([]);\n if (current.id !== id) {\n if (!reduced) setLeaving((l) => (l.some((x) => x.id === current.id) ? l : [...l, current]));\n setCurrent({ id, node: children });\n }\n const done = React.useCallback((leftId: string) => setLeaving((l) => l.filter((x) => x.id !== leftId)), []);\n const first = React.useRef(true);\n React.useEffect(() => {\n first.current = false;\n }, []);\n\n return (\n \n {leaving.map((l) => (\n \n {l.node}\n \n ))}\n \n {children}\n \n \n );\n}\n\nfunction Tick({ id, out = false, enter = false, onDone, children }: { id: string; out?: boolean; enter?: boolean; onDone?: (id: string) => void; children: React.ReactNode }) {\n const ref = React.useRef(null);\n const [entering] = React.useState(enter);\n React.useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n if (out) {\n const animation = el.animate(\n [\n { opacity: 1, filter: \"blur(0px)\", transform: \"none\" },\n { opacity: 0, filter: \"blur(4px)\", transform: \"translateY(-6px)\" },\n ],\n { duration: 220, easing: MORPH, fill: \"forwards\" }\n );\n animation.onfinish = () => onDone?.(id);\n return () => animation.cancel();\n }\n if (!entering) return;\n const animation = el.animate(\n [\n { opacity: 0, filter: \"blur(4px)\", transform: \"translateY(6px)\" },\n { opacity: 1, filter: \"blur(0px)\", transform: \"none\" },\n ],\n { duration: 380, easing: MORPH, delay: 60, fill: \"backwards\" }\n );\n return () => animation.cancel();\n }, [id, out, entering, onDone]);\n return (\n \n {children}\n \n );\n}\n\nfunction SourceLink({ source }: { source: ResearchSource }) {\n return (\n \n \n {source.title ?? hostname(source.url)}\n {hostname(source.url)}\n \n );\n}\n\n/** The pages one search found: overlapping marks on a branch of the trail, folding open into links. */\nfunction SourceGroup({ sources, reduced }: { sources: ResearchSource[]; reduced: boolean }) {\n const [open, setOpen] = React.useState(false);\n const listId = React.useId();\n const shown = sources.slice(0, 5);\n return (\n
\n \n setOpen((o) => !o)}\n className=\"group flex h-6 items-center gap-2 rounded-md text-[12px] text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40\"\n >\n Sources\n \n {shown.map((src, i) => (\n \n \n \n ))}\n {sources.length > shown.length && +{sources.length - shown.length}}\n \n \n ({sources.length})\n \n \n
    \n {sources.map((src) => (\n
  • \n \n
    • \n ))}\n
\n
\n \n );\n}\n\nexport function WebResearch({ status, queries, sources, open: openProp, defaultOpen = false, onOpenChange, className = \"\", ...props }: WebResearchProps) {\n const reduced = useReducedMotion();\n const [ownOpen, setOwnOpen] = React.useState(defaultOpen);\n const open = openProp ?? ownOpen;\n const setOpen = (next: boolean) => {\n if (openProp === undefined) setOwnOpen(next);\n onOpenChange?.(next);\n };\n\n const working = status === \"searching\" || status === \"reading\";\n const query = queries.length ? asQuery(queries[queries.length - 1]).text : \"\";\n const typed = useTyped(query, status === \"searching\", reduced);\n const latest = sources[sources.length - 1];\n const extra = Math.max(0, sources.length - STACK);\n // Pages that don't say which search found them are listed after the trail.\n const ungrouped = sources.filter((src) => src.query === undefined || src.query < 0 || src.query >= queries.length);\n const listId = React.useId();\n\n // Icons that arrive after the first paint drop in; the ones already there just sit.\n const mounted = React.useRef(false);\n React.useEffect(() => {\n mounted.current = true;\n }, []);\n\n // One line that rearranges itself: a label, then whichever counts this state needs.\n const label = { searching: \"Searching\", reading: \"Reading\", error: \"Search failed\", cancelled: \"Stopped after\", done: \"\" }[status];\n const showSearches = status === \"done\" || status === \"cancelled\";\n const showSources = sources.length > 0 && (status === \"reading\" || status === \"done\" || status === \"error\");\n const showDot = showSources && (status === \"done\" || status === \"error\");\n const sourceWord = status === \"reading\" ? plural(sources.length, \"site\") : plural(sources.length, \"source\");\n\n const summary =\n status === \"searching\"\n ? `Searching for ${query}`\n : status === \"reading\"\n ? `Read ${sources.length} ${sourceWord}`\n : status === \"error\"\n ? `Search failed${sources.length ? `, ${sources.length} ${sourceWord}` : \"\"}`\n : status === \"cancelled\"\n ? `Stopped after ${queries.length} ${plural(queries.length, \"search\")}`\n : `Done: ${queries.length} ${plural(queries.length, \"search\")}, ${sources.length} ${sourceWord}`;\n\n return (\n
\n {/* The same row from first search to final summary, so every piece of it can morph; it becomes a button once there's a list to open. */}\n setOpen(!open)}\n className=\"group flex min-h-9 w-full items-center gap-2.5 rounded-lg py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default\"\n >\n \n \n \n \n \n \n {sources.map((s, i) => (\n = sources.length - STACK} first={i === Math.max(0, sources.length - STACK)} enter={mounted.current && working} reduced={reduced} z={i + 1}>\n \n \n ))}\n 0} reduced={reduced} className=\"relative z-[999]\">\n \n \n \n \n \n\n \n \n \n {label}\n \n \n \n \n  \n {plural(queries.length, \"search\")}\n \n \n \n ·\n \n \n \n \n  \n {sourceWord}\n \n \n \n “{typed}”\n \n \n {/* The page being read; the row folds shut when the work is done. */}\n \n \n \n {latest && (\n \n {latest.title ?? hostname(latest.url)} · {hostname(latest.url)}\n \n )}\n \n \n \n \n\n \n \n \n \n {/* Outside the button, so the button's name stays its visible text. */}\n \n {summary}\n \n\n \n
\n
\n {queries.length > 0 && (\n
    \n {queries.map((raw, i) => {\n const q = asQuery(raw);\n const found = sources.filter((src) => src.query === i);\n const last = i === queries.length - 1 && ungrouped.length === 0;\n return (\n
  • \n {/* The trail: a hairline down the left, a short branch to each search. */}\n \n \n
    \n \n {q.site ? (\n \n ) : (\n \n )}\n \n \n {q.site ? (\n <>\n Searched {siteName(q.site)} for {q.text}\n \n ) : (\n q.text\n )}\n \n {q.results != null && (\n \n {q.results} {q.resultLabel ?? plural(q.results, \"result\")}\n \n )}\n
    \n {found.length > 0 && }\n
    • \n );\n })}\n
\n )}\n {ungrouped.length > 0 && (\n
\n
    \n {ungrouped.map((src) => (\n
  • \n \n
    • \n ))}\n
\n
\n )}\n
\n
\n
\n \n );\n}\n"}],"css":{"@keyframes ui-sheen":{"from":{"mask-position":"150% 0"},"to":{"mask-position":"-50% 0"}},"@keyframes ui-breathe":{"0%, 100%":{"transform":"scale(0.82)","opacity":"0.55"},"50%":{"transform":"scale(1)","opacity":"1"}},"@keyframes ui-drop-in":{"from":{"opacity":"0","transform":"translateY(-8px) scale(0.6)"},"to":{"opacity":"1","transform":"none"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/web-research"}