{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"research-assistant","type":"registry:block","title":"AI Research Assistant","description":"A research flow that shows search tool calls, reasoning, sources and a cited final answer.","author":"Scrim UI (https://scrimui.dev)","categories":["pattern"],"docs":"https://scrimui.dev/patterns/research-assistant","dependencies":[],"registryDependencies":["https://scrimui.dev/r/search-tool-call.json","https://scrimui.dev/r/reasoning.json","https://scrimui.dev/r/source-card.json","https://scrimui.dev/r/citation-ui.json"],"files":[{"path":"src/showcase/patterns/research-assistant/research-assistant.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { SearchToolCall, type SearchResult } from \"@/components/ui/search-tool-call\";\nimport { Reasoning } from \"@/components/ui/reasoning\";\nimport { SourceCard } from \"@/components/ui/source-card\";\nimport { InlineCitation, CitationList, type Citation } from \"@/components/ui/citation-ui\";\n\n/* ------------------------------------------------------------------ */\n/* Data                                                                */\n/* ------------------------------------------------------------------ */\n\nconst SEARCH_RESULTS: SearchResult[] = [\n  {\n    title: \"Claude Fable 5 and Mythos 5 — Anthropic\",\n    url: \"https://www.anthropic.com/news/claude-fable-5-mythos-5\",\n    snippet: \"Fable 5 is the most advanced generally available Claude model to date.\",\n  },\n  {\n    title: \"Claude 5 family: model overview\",\n    url: \"https://docs.anthropic.com/models/overview\",\n    snippet: \"Capabilities, context windows and pricing for the Claude 5 line.\",\n  },\n  {\n    title: \"Anthropic model pricing\",\n    url: \"https://docs.anthropic.com/pricing\",\n    snippet: \"Per-token pricing for Opus, Sonnet and Haiku tiers.\",\n  },\n];\n\nconst REASONING_STEPS = [\n  {\n    title: \"Parsed the question\",\n    detail: \"The user asks for the latest Claude 5 tier and its pricing.\",\n  },\n  {\n    title: \"Formulated queries\",\n    detail: \"Ran two searches: model capabilities and per-tier pricing.\",\n  },\n  {\n    title: \"Cross-checked sources\",\n    detail: \"Matched official docs against release notes.\",\n  },\n  {\n    title: \"Synthesized the answer\",\n    detail: \"Combined 3 sources into a single recommendation.\",\n  },\n];\n\nconst SOURCES: Citation[] = [\n  {\n    id: 1,\n    title: \"Claude Fable 5 and Mythos 5\",\n    url: \"https://www.anthropic.com/news/claude-fable-5-mythos-5\",\n    domain: \"anthropic.com\",\n    snippet: \"Fable 5 is the most advanced generally available Claude model.\",\n  },\n  {\n    id: 2,\n    title: \"Claude 5 family: model overview\",\n    url: \"https://docs.anthropic.com/models/overview\",\n    domain: \"docs.anthropic.com\",\n  },\n  {\n    id: 3,\n    title: \"Anthropic model pricing\",\n    url: \"https://docs.anthropic.com/pricing\",\n    domain: \"docs.anthropic.com\",\n  },\n];\n\n/* ------------------------------------------------------------------ */\n/* ResearchAssistantPattern                                            */\n/* ------------------------------------------------------------------ */\n\nexport function ResearchAssistantPattern() {\n  const [phase, setPhase] = React.useState<0 | 1 | 2>(0);\n\n  React.useEffect(() => {\n    if (phase !== 0) return;\n    const t = window.setTimeout(() => setPhase(1), 3200);\n    return () => window.clearTimeout(t);\n  }, [phase]);\n\n  React.useEffect(() => {\n    if (phase !== 1) return;\n    const t = window.setTimeout(() => setPhase(2), 3600);\n    return () => window.clearTimeout(t);\n  }, [phase]);\n\n  return (\n    <div className=\"rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900\">\n      {/* Question header */}\n      <div className=\"border-b border-zinc-200 px-5 py-4 dark:border-zinc-800\">\n        <p className=\"text-[11px] font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">Research Question</p>\n        <h3 className=\"mt-1 text-lg font-semibold text-zinc-900 dark:text-zinc-100\">\n          Which Claude 5 model is most cost-effective for a high-volume support bot?\n        </h3>\n      </div>\n\n      <div className=\"grid gap-5 p-5 lg:grid-cols-[1fr_260px]\">\n        {/* Main column */}\n        <div className=\"min-w-0 space-y-4\">\n          {/* Search tools */}\n          <div className=\"space-y-2\">\n            <SearchToolCall\n              query=\"Claude 5 model comparison\"\n              status={phase >= 1 ? \"done\" : \"searching\"}\n              results={SEARCH_RESULTS.slice(0, 2)}\n              elapsed={phase >= 1 ? \"2.4s\" : \"1.4s\"}\n            />\n            <SearchToolCall\n              query=\"Claude 5 pricing per token\"\n              status={phase >= 1 ? \"done\" : \"searching\"}\n              results={SEARCH_RESULTS.slice(2)}\n              elapsed={phase >= 1 ? \"1.9s\" : \"0.8s\"}\n            />\n          </div>\n\n          {/* Reasoning */}\n          <Reasoning steps={REASONING_STEPS} elapsed=\"3.1s\" isThinking={phase === 0} />\n\n          {/* Answer */}\n          {phase === 2 && (\n            <div className=\"space-y-3 rounded-xl border border-zinc-200 p-4 dark:border-zinc-800\">\n              <p className=\"flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-emerald-700 dark:text-emerald-400\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" width=\"12\" height=\"12\">\n                  <path d=\"M20 6 9 17l-5-5\" />\n                </svg>\n                Final Answer\n              </p>\n              <p className=\"text-[15px] leading-7 text-zinc-700 dark:text-zinc-200\">\n                For high-volume support traffic, <strong>Claude Haiku 4.5</strong> is the most\n                cost-effective tier: it keeps per-token cost a fraction of Opus while still handling\n                the routine routing and drafting that support bots handle best{\" \"}\n                <InlineCitation citation={SOURCES[0]} />. Reserve Opus{\" \"}\n                <InlineCitation citation={SOURCES[1]} /> for escalation paths where reasoning quality\n                outweighs cost. At scale, streaming with Haiku keeps first-token latency low and the\n                bill predictable <InlineCitation citation={SOURCES[2]} />.\n              </p>\n              <CitationList citations={SOURCES} />\n            </div>\n          )}\n        </div>\n\n        {/* Sources sidebar */}\n        <aside className=\"hidden lg:block\">\n          <p className=\"text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">Sources</p>\n          <div className=\"mt-2 space-y-2\">\n            {SEARCH_RESULTS.map((r, i) => (\n              <SourceCard key={i} title={r.title} url={r.url} snippet={r.snippet} index={i + 1} />\n            ))}\n          </div>\n        </aside>\n      </div>\n    </div>\n  );\n}\n","type":"registry:block","target":"components/blocks/research-assistant.tsx"}]}